Refactoring round 8: hide data files, safe saves, Esc as Cancel (#85)

Recurring cleanup round over the code since round 7 (bc688f3). The
issue now also asks to fix bugs and small inconsistencies found on the
way, so unlike the rounds before, this one changes behaviour in a few
places. Duplicated code in api went from 23 clones with 228 lines to
none (jscpd, at least 50 tokens). In src it stays at 22 clones with
271 lines, the same before and after.

Bugs:
- nginx served project and snapshot files as they were, so anyone who
  knew a project id could read it without signing in. Every file the
  API writes now goes through AtomicFile (temp file, mode, rename).
  Projects, snapshots, releases, accounts and sessions are 0640, and
  nginx answers 403 for them.
- Any signed-in account could delete a shared image, font or sound,
  which projects of other accounts may wear. Deleting one is now for
  administrators only. The editor never deleted a file, so the
  client's delete is gone.
- Two saves of one project could run at once. The lock file was
  removed after each save, so a waiting save and the next one locked
  different files. The lock file now stays, and deleting a project
  takes the lock as well.
- Bytes that are no picture got a 500 instead of a 422, because the
  error handler also threw for warnings silenced with @.
- A session file was rewritten in place. A request reading it at that
  moment found it empty and was signed out. It is replaced atomically.
- Delete did nothing for a shape picked in the vector art list. Delete
  now goes through removeSelection, one case per kind of selection,
  and a kind without a case fails the type check.

Inconsistencies:
- Escape on a question does what its Cancel does. Cancel on "Delete
  project?" and "Restore snapshot?" leads back to the picker or the
  list like the other questions did, and so does deleting a project.
- Editor texts use American spelling throughout, like the port names:
  48 British spellings in 45 lines (colour, centre, initialised).
- objectName and groupName replace eleven copies of "own name, else
  the asset's" and three of "Group". One copy fell back to the object
  id instead of "?".

Duplicates, dead code, comments:
- routeFiles serves images, fonts and sounds instead of three copies.
  HashedFileStore holds what the three stores shared: keeping a file
  under its hash with its name, listing and deleting. The stores keep
  only which bytes they take and what a record says.
- AtomicFile replaces nine copies of temp file plus rename.
- removeShapes is the one way the canvas, the inspector button and
  Delete take shapes out.
- GraphInterpreter.fire was called by tests only. The 54 calls use a
  helper in tests/helpers.ts now.
- FileStore.delete, HttpFileStore.delete and the PluginApi type were
  unused. A doc comment in actions.ts sat above the wrong function.

Checked and left as is:
- solidCells is used by tests only. It is the per-cell view before the
  merge into rectangles, the one place the largest-scale rule shows.
- An undo checker ran all 124 commands of the unit tests and compared
  the project before and after undo. The only differences are empty
  ports, groups and notes lists where there were none, which the file
  format drops anyway.

Docs:
- README: the check sum.
- Wiki, own commit: API (admin-only deletes, 422, file modes, lock
  file), Home (the "Not yet" list named three things that exist),
  Concepts, Keyboard, Vector art, Architecture and Development, and
  the 38 characters Gitea flagged as ambiguous on eight pages.
- .gitignore: the lock files, and pasted-*.png in any folder, which
  keeps the screenshot archive out.

Tests:
- ./check.sh: 195 files, 2817 tests, exit 0 (+2 for the name helpers).
- PHP: accounts 52 in the web container and 53 in the CI image with
  the race test (+2), snapshots 15 (+1), releases 20.
- Full e2e run: ALL PASSED, 1586 checks (+6 in 12, 47, 49 and 50).
- Smokes jumprun, tetris, actor: 24, 19 and 21 checks. The example
  project files were restored byte for byte afterwards.
- The file stores of HEAD and of this commit give byte-identical
  output for the live folders and for store, list and delete in a
  throwaway folder.
- Counter-checks, all fail as expected: a 500 for bad bytes fails 12,
  no admin check fails 49, removing the lock file again loses saves
  in 3 of 3 runs (151 to 170 of 321), Delete ignoring shapes fails 47,
  Escape that only closes fails 50, and dropping the shape case fails
  the type check (TS2366).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/core/commands/animationCommands.ts

@@ -270,7 +270,7 @@ export class SetKeyInterpolationCommand extends TimelineCommand {
       else key.interpolation = this.interpolation;
       changed += 1;
     }
-    if (changed === 0) throw new CommandError('Only a number or colour key can ease');
+    if (changed === 0) throw new CommandError('Only a number or color key can ease');
   }
 }
 

src/core/commands/colliderCommands.ts

@@ -4,7 +4,7 @@ import { isLiveInstance, type ObjectRef, resolvedHolder } from '../model/instanc
 import type { Asset } from '../model/Asset';
 import type { PropertyBag } from '../model/Properties';
 import { findAsset, type ObjectHolder, type Project } from '../model/Project';
-import { createSceneObject, type SceneObject } from '../model/SceneObject';
+import { createSceneObject, objectName, type SceneObject } from '../model/SceneObject';
 import { resolveSceneObjectProps } from '../properties/resolve';
 import { transformOfObject } from '../properties/transform';
 import { removeById } from '../util/list';
@@ -52,7 +52,7 @@ abstract class AddPartCommand implements Command {
       if (requireAsset(project, this.assetId).type !== this.partType)
         throw new CommandError(`That asset is not a ${this.partType}`);
     } else {
-      project.assets.push(this.build(project, target, targetAsset, target.name || targetAsset.name));
+      project.assets.push(this.build(project, target, targetAsset, objectName(target, targetAsset)));
     }
     holder.objects.push(createSceneObject(this.objectId, this.assetId, { x: 0, y: 0, z: 0 }, this.targetId));
   }

src/core/commands/pixelArtCommands.ts

@@ -72,9 +72,9 @@ export class SetPaletteColorsCommand implements Command {
   execute(project: Project): void {
     const palette = requirePalette(project, this.paletteId);
     if (this.colors.length > PALETTE_MAX)
-      throw new CommandError(`A palette holds at most ${PALETTE_MAX} colours`);
+      throw new CommandError(`A palette holds at most ${PALETTE_MAX} colors`);
     if (!this.colors.every((c) => Number.isInteger(c) && c >= 0 && c <= 0xffffff))
-      throw new CommandError('A colour is 0xRRGGBB');
+      throw new CommandError('A color is 0xRRGGBB');
     this.before = [...palette.colors];
     palette.colors = [...this.colors];
   }

src/core/commands/vectorArtCommands.ts

@@ -328,7 +328,7 @@ export class SetVectorShapeStyleCommand implements Command {
       throw new CommandError('An outline is wider than nothing');
     for (const paint of [this.style.paint, this.style.stroke?.paint])
       if (paint && paint.type !== 'texture' && paint.stops.length < MIN_STOPS)
-        throw new CommandError('A gradient needs two colours');
+        throw new CommandError('A gradient needs two colors');
     this.previous = {
       fill: shape.fill,
       opacity: shape.opacity,

src/core/graph/GraphInterpreter.ts

@@ -105,24 +105,10 @@ export class GraphInterpreter {
     return this.indexOf(this.graph).ofType(type);
   }
 
-  fire(
-    type: string,
-    ctx: NodeContext,
-    outputs: Record<string, Value> = {},
-    filter?: (node: GraphNode) => boolean,
-    /** Which of the event node's exec outputs the pulse leaves through – a state event names one. */
-    port = 'exec',
-  ): number {
-    let fired = 0;
-    for (const node of this.eventNodes(type)) {
-      if (filter && !filter(node)) continue;
-      this.pulse(node, ctx, outputs, port);
-      fired++;
-    }
-    return fired;
-  }
-
-  /** Runs the flow of one event node, whichever it is; `fire` is this for every node of a type. */
+  /**
+   * Runs the flow of one event node, whichever it is. `port` is the exec output the pulse leaves
+   * through – a state event names one.
+   */
   pulse(node: GraphNode, ctx: NodeContext, outputs: Record<string, Value> = {}, port = 'exec'): void {
     this.frame = this.emptyFrame(this.graph);
     this.callStack = [];

src/core/graph/nodes/action/PlaySound.ts

@@ -54,7 +54,7 @@ export const PlaySound: NodeDef = {
   description:
     'Plays a sound asset. "volume" multiplies the volume the asset itself carries and "loop" either ' +
     "leaves the asset's own setting alone or overrules it, so the asset says what the sound is and " +
-    'the node only colours it. Each play is a voice of its own: firing this twice in a row is heard ' +
+    'the node only colors it. Each play is a voice of its own: firing this twice in a row is heard ' +
     'twice, overlapping. The sound belongs to this object and stops when the object is destroyed, ' +
     'unless "detached" is on.',
   inputs: [exec(), soundPort(), withDefault(num('volume'), 1), loopPort(), detachedPort()],

src/core/graph/nodes/action/animationNodes.ts

@@ -21,7 +21,7 @@ export const PlayAnimation: NodeDef = {
   description:
     'Plays an animation on an object: its rows reach the object and what is placed inside it, so every ' +
     'instance plays on its own. A paused one runs on from where it stands; one already running keeps its ' +
-    'frame but wins again over the others on the object. Blend fades numbers and colours over that many ' +
+    'frame but wins again over the others on the object. Blend fades numbers and colors over that many ' +
     'seconds from what they held when it took over; everything else switches at once. Blend out is for ' +
     'Once (reset): when its frames run out it fades back to where it started over that many seconds. ' +
     'Restart starts one already running or paused over from its first frame – blended in from where it ' +

src/core/model/SceneObject.ts

@@ -42,6 +42,16 @@ export interface ObjectGroup {
   name: string;
 }
 
+/** What an object is called: its own name, else its asset's, and `?` while the asset is gone. */
+export function objectName(object: { name: string }, asset: { name: string } | undefined): string {
+  return object.name || asset?.name || '?';
+}
+
+/** What a group is called; one that was never named is a "Group". */
+export function groupName(group: ObjectGroup): string {
+  return group.name || 'Group';
+}
+
 export function createSceneObject(
   id: string,
   assetId: string,

src/core/model/animation.ts

@@ -16,7 +16,7 @@ import { treeOrder } from './hierarchy';
 import { instanceChildId, resolveObjects } from './instance';
 import { findAsset, type Project } from './Project';
 import { colorOf, type PropertyBag, type PropertyValue, textOf } from './Properties';
-import type { SceneObject } from './SceneObject';
+import { objectName, type SceneObject } from './SceneObject';
 import { mixColor } from '../util/color';
 
 /** `once` holds the last value when it ends, `once-reset` puts back what was there before it started. */
@@ -483,7 +483,7 @@ export function trackDef(
 /** How the timeline names what a row aims at: the object (or the root itself) and the property. */
 export function trackLabel(project: Project, animation: AnimationAsset, track: AnimationTrack): string {
   const aimed = aimedAt(project, animation, track.target);
-  const who = !aimed ? '(missing)' : aimed.object ? aimed.object.name || aimed.asset.name : aimed.asset.name;
+  const who = !aimed ? '(missing)' : aimed.object ? objectName(aimed.object, aimed.asset) : aimed.asset.name;
   const def =
     aimed && animatableDefsOf(project, aimed.asset, aimed.bag).find((d) => d.key === track.property);
   return `${who} · ${def ? def.label : aimed ? `${track.property} (missing)` : track.property}`;

src/core/model/objectRefs.ts

@@ -7,7 +7,7 @@ import { findAsset, type Project } from './Project';
 import { treeOrder, type ObjectTree } from './hierarchy';
 import { resolveObjects } from './instance';
 import { mapNested, type PropertyBag, type PropertyValue, tagged, tagOf, untag } from './Properties';
-import type { SceneObject } from './SceneObject';
+import { objectName, type SceneObject } from './SceneObject';
 import { Recorder } from '../util/recorder';
 
 /** The id an object's place names; '' for none and for anything that is no object's place. */
@@ -59,7 +59,7 @@ export function objectChoices(project: Project, holder: ObjectTree, objectId: st
   const choices: ObjectChoice[] = [];
   for (const { object, depth } of treeOrder({ ...holder, objects })) {
     if (!object.id.startsWith(scope)) continue;
-    const label = object.name || findAsset(project, object.assetId)?.name || object.id;
+    const label = objectName(object, findAsset(project, object.assetId));
     choices.push({ ref: object.id.slice(scope.length), label, depth });
   }
   if (!scope) return choices;

src/core/particles/nodes.ts

@@ -229,7 +229,7 @@ export const ParticleColor: ParticleNodeDef = {
   type: 'ParticleColor',
   label: 'Color',
   category: 'particles',
-  description: 'A constant colour.',
+  description: 'A constant color.',
   inputs: [],
   outputs: [numberOut('color')],
   params: [flatDef('value', 'color', { label: 'Value', value: 0xffffff })],
@@ -262,7 +262,7 @@ export const ParticleOutput: ParticleNodeDef = {
   label: 'Output',
   category: 'particles',
   description:
-    'What the particle looks like: x and y offset it from the source, the scales multiply its size, rotation turns it, colour tints it and alpha fades it.',
+    'What the particle looks like: x and y offset it from the source, the scales multiply its size, rotation turns it, color tints it and alpha fades it.',
   inputs: [
     { key: 'x', label: 'x', type: 'number', inline: false },
     { key: 'y', label: 'y', type: 'number', inline: false },
@@ -423,7 +423,7 @@ export const ParticleMixColor: ParticleNodeDef = {
   type: 'ParticleMixColor',
   label: 'Mix color',
   category: 'particles',
-  description: 'Blends two colours channel by channel: t = 0 is a, t = 1 is b. A flame fading to smoke.',
+  description: 'Blends two colors channel by channel: t = 0 is a, t = 1 is b. A flame fading to smoke.',
   inputs: [colorIn('a', 0xffffff), colorIn('b', 0x000000), numberIn('t', 0.5)],
   outputs: [numberOut('color')],
   params: [],

src/core/shader/compile.ts

@@ -83,7 +83,7 @@ export function compileShader(graph: Graph): ShaderBuild {
     },
     conform: (node, port, expr) => {
       if (port.type === 'number' && expr.type === 'vec3') {
-        walk.problem(node, `"${port.key}" needs a number, not a colour`);
+        walk.problem(node, `"${port.key}" needs a number, not a color`);
         return null;
       }
       if (port.type === 'vec3' && expr.type === 'float') return { code: asVec3(expr), type: 'vec3' };

src/core/shader/nodes.ts

@@ -150,7 +150,7 @@ export const ShaderOutput: ShaderNodeDef = {
   label: 'Output',
   category: 'shader',
   description:
-    'The colour and opacity the sprite is drawn with; unconnected, each is the texture’s. Edge says how the picture continues past its border when sampled outside it.',
+    'The color and opacity the sprite is drawn with; unconnected, each is the texture’s. Edge says how the picture continues past its border when sampled outside it.',
   inputs: [vec3Port('color'), { key: 'alpha', label: 'alpha', type: 'number', inline: false }],
   outputs: [],
   params: [{ key: EDGE_PARAM, label: 'Edge', kind: 'enum', default: DEFAULT_EDGE, options: EDGE_OPTIONS }],
@@ -241,7 +241,7 @@ export const ShaderColor: ShaderNodeDef = {
   type: SHADER_COLOR,
   label: 'Color',
   category: 'shader',
-  description: 'A constant colour.',
+  description: 'A constant color.',
   inputs: [],
   outputs: [vec3Port('color')],
   params: [flatDef('value', 'color', { label: 'Value', value: 0xffffff })],
@@ -261,19 +261,19 @@ export const ShaderNumber: ShaderNodeDef = {
   emit: (_inputs, params) => ({ value: { code: floatLiteral(Number(params.value ?? 0)), type: 'float' } }),
 };
 
-export const ShaderAdd = arithmetic('ShaderAdd', 'Add', '+', 'a + b, per channel for colours.', 0);
+export const ShaderAdd = arithmetic('ShaderAdd', 'Add', '+', 'a + b, per channel for colors.', 0);
 export const ShaderSubtract = arithmetic(
   'ShaderSubtract',
   'Subtract',
   '-',
-  'a - b, per channel for colours.',
+  'a - b, per channel for colors.',
   0,
 );
 export const ShaderMultiply = arithmetic(
   'ShaderMultiply',
   'Multiply',
   '*',
-  'a × b, per channel for colours.',
+  'a × b, per channel for colors.',
   1,
 );
 /**
@@ -291,7 +291,7 @@ export const ShaderDivide: ShaderNodeDef = {
   type: 'ShaderDivide',
   label: 'Divide',
   category: 'shader',
-  description: 'a / b, per channel for colours. Dividing by 0 is 0, not a pixel the driver picks.',
+  description: 'a / b, per channel for colors. Dividing by 0 is 0, not a pixel the driver picks.',
   inputs: [anyIn('a', 1), anyIn('b', 1)],
   outputs: [anyOut('result')],
   params: [],
@@ -305,7 +305,7 @@ export const ShaderClamp: ShaderNodeDef = {
   type: 'ShaderClamp',
   label: 'Clamp',
   category: 'shader',
-  description: 'Holds the value inside min..max, per channel for colours.',
+  description: 'Holds the value inside min..max, per channel for colors.',
   inputs: [anyIn('value', 0), floatIn('min', 0), floatIn('max', 1)],
   outputs: [anyOut('result')],
   params: [],
@@ -332,7 +332,7 @@ export const ShaderLuminance: ShaderNodeDef = {
   type: 'ShaderLuminance',
   label: 'Luminance',
   category: 'shader',
-  description: 'How bright a colour is (Rec. 709 weights), as one number.',
+  description: 'How bright a color is (Rec. 709 weights), as one number.',
   inputs: [vec3Port('color')],
   outputs: [{ key: 'value', label: 'value', type: 'number' }],
   params: [],
@@ -358,7 +358,7 @@ export const ShaderSin = unary(
   'ShaderSin',
   'Sin',
   'sin',
-  'The sine of a number in radians: one full wave every 6.283. Per channel for colours.',
+  'The sine of a number in radians: one full wave every 6.283. Per channel for colors.',
 );
 export const ShaderFloor = unary(
   'ShaderFloor',
@@ -376,14 +376,14 @@ export const ShaderAbs = unary(
   'ShaderAbs',
   'Abs',
   'abs',
-  'The distance from 0, sign dropped: -0.3 becomes 0.3. A value crossing 0 becomes a V. Per channel for colours.',
+  'The distance from 0, sign dropped: -0.3 becomes 0.3. A value crossing 0 becomes a V. Per channel for colors.',
 );
 
 export const ShaderStep: ShaderNodeDef = {
   type: 'ShaderStep',
   label: 'Step',
   category: 'shader',
-  description: '0 while value is below edge, 1 from edge on: a hard cut. Per channel for colours.',
+  description: '0 while value is below edge, 1 from edge on: a hard cut. Per channel for colors.',
   inputs: [floatIn('edge', 0.5), anyIn('value', 0)],
   outputs: [anyOut('result')],
   params: [],
@@ -398,7 +398,7 @@ export const ShaderPow: ShaderNodeDef = {
   label: 'Pow',
   category: 'shader',
   description:
-    'value to the power of exponent: 2 squares it, 0.5 is the square root. Below 0 the value counts as 0. Per channel for colours.',
+    'value to the power of exponent: 2 squares it, 0.5 is the square root. Below 0 the value counts as 0. Per channel for colors.',
   inputs: [anyIn('value', 0), floatIn('exponent', 2)],
   outputs: [anyOut('result')],
   params: [],
@@ -414,7 +414,7 @@ export const ShaderSqrt: ShaderNodeDef = {
   label: 'Sqrt',
   category: 'shader',
   description:
-    'The square root: 0.25 becomes 0.5, 4 becomes 2. Below 0 the value counts as 0. Per channel for colours.',
+    'The square root: 0.25 becomes 0.5, 4 becomes 2. Below 0 the value counts as 0. Per channel for colors.',
   inputs: [anyIn('value', 0)],
   outputs: [anyOut('result')],
   params: [],

src/core/store/FileStore.ts

@@ -19,10 +19,9 @@ export interface StoredFile extends UploadedFile {
  * so there is nothing else to send. `type` only fills the Content-Type header – the server trusts
  * the bytes, not the label – and uploading the same bytes twice yields the same file, the hash of
  * its content. `name` is the caption kept beside it; uploading the same bytes under a new name
- * renames what the pickers show.
+ * renames what the pickers show. Nothing here deletes a file: another account's project may wear it.
  */
 export interface FileStore<U extends UploadedFile = UploadedFile, S extends StoredFile = StoredFile> {
   upload(bytes: Blob | ArrayBuffer, type: string, name?: string): Promise<U>;
   list(): Promise<S[]>;
-  delete(file: string): Promise<void>;
 }

src/core/store/HttpFileStore.ts

@@ -27,8 +27,4 @@ export class HttpFileStore<
   async list(): Promise<S[]> {
     return apiRequest<S[]>(this.endpoint, 'GET', this.route, {});
   }
-
-  async delete(file: string): Promise<void> {
-    await apiRequest<void>(this.endpoint, 'DELETE', `${this.route}/${encodeURIComponent(file)}`, {});
-  }
 }

src/editor/ProjectSession.ts

@@ -150,10 +150,21 @@ export class ProjectSession {
     return this.pickerDialog.current();
   }
 
+  /** The question stands in for the picker: Cancel goes back to it, and so does the deletion. */
   private confirmDelete(id: string, name: string): void {
     new Dialog(`Delete project "${name}"?`, 'All assets and scenes are removed permanently.', [
-      { label: 'Cancel' },
-      { label: 'Delete', danger: true, onClick: () => void this.run(this.deleteProject(id)) },
+      { label: 'Cancel', onClick: () => this.openProjectPicker() },
+      {
+        label: 'Delete',
+        danger: true,
+        onClick: () =>
+          void this.run(
+            (async () => {
+              await this.deleteProject(id);
+              this.openProjectPicker();
+            })(),
+          ),
+      },
     ]).openCentered();
   }
 
@@ -262,7 +273,7 @@ export class ProjectSession {
       `Restore snapshot "${snapshot.name}"?`,
       'The project as it is now is kept as a snapshot of its own first, so this can be taken back.',
       [
-        { label: 'Cancel' },
+        { label: 'Cancel', onClick: () => this.openSnapshots() },
         {
           label: 'Restore',
           primary: true,

src/editor/actions.ts

@@ -2,6 +2,7 @@
  * Editor actions that several places trigger the same way (inspector, hierarchy context
  * menu, keyboard): they run the command and put the selection where the user expects it.
  */
+import { RemoveAnimationKeysCommand, RemoveAnimationTracksCommand } from '../core/commands/animationCommands';
 import { annotationNoun, RemoveAnnotationCommand } from '../core/commands/annotationCommands';
 import { DeleteAssetCommand, SetActiveSceneCommand } from '../core/commands/assetCommands';
 import {
@@ -12,8 +13,10 @@ import {
 } from '../core/commands/colliderCommands';
 import { oneStep } from '../core/commands/CompoundCommand';
 import { CreateContainerCommand } from '../core/commands/containerCommands';
+import { RemoveFrameCommand } from '../core/commands/frameCommands';
 import { RemoveNodeCommand } from '../core/commands/graphCommands';
 import { RemoveSceneObjectsCommand } from '../core/commands/sceneObjectCommands';
+import { RemoveVectorShapeCommand, RemoveVectorShapesCommand } from '../core/commands/vectorArtCommands';
 import type { AssetType } from '../core/model/AssetTypes';
 import { curveUsages } from '../core/model/curve';
 import { structTypeUsages } from '../core/model/structTypes';
@@ -29,7 +32,6 @@ import { animationsUsing, tilesUsing, findPropertyUsages, findUsages } from '../
 import { Dialog } from '../ui';
 import { type EditorState, objectSelection } from './state';
 
-/** Groups the objects into a new container asset placed in their stead; selects the container. */
 /**
  * What a double-click on an asset does, wherever it happens (asset panel, "Open …" entries, a link
  * in the inspector): open its tab – and a scene, whose tab is the scene view, becomes the active one.
@@ -39,6 +41,7 @@ export function activateAsset(state: EditorState, assetId: string): void {
   state.openAsset(assetId);
 }
 
+/** Groups the objects into a new container asset placed in their stead; selects the container. */
 export function createContainer(state: EditorState, holderId: string, objectIds: readonly string[]): boolean {
   const command = new CreateContainerCommand(holderId, objectIds);
   if (!state.execute(command)) return false;
@@ -80,6 +83,18 @@ export function removeObjects(state: EditorState, holderId: string, objectIds: r
   return state.execute(new RemoveSceneObjectsCommand(holderId, objectIds));
 }
 
+/** Takes shapes of a vector art out as one undo step; the drawing itself stays selected. */
+export function removeShapes(state: EditorState, assetId: string, shapeIds: readonly string[]): boolean {
+  if (shapeIds.length === 0) return false;
+  const removed = state.execute(
+    shapeIds.length === 1
+      ? new RemoveVectorShapeCommand(assetId, shapeIds[0]!)
+      : new RemoveVectorShapesCommand(assetId, shapeIds),
+  );
+  if (removed) state.select({ kind: 'asset', assetId });
+  return removed;
+}
+
 /** Deletes graph nodes as one undo step, however many were selected. */
 export function removeNodes(state: EditorState, assetId: string, nodeIds: readonly string[]): boolean {
   const commands = nodeIds.map((id) => new RemoveNodeCommand(assetId, id));
@@ -115,6 +130,43 @@ export function removeGraphSelection(
   return state.execute(oneStep(label, commands));
 }
 
+/**
+ * What Delete does to the selection; false when nothing is selected. Every kind is a case of its
+ * own, so a new kind of selection cannot slip through without saying what Delete takes away.
+ */
+export function removeSelection(state: EditorState): boolean {
+  const s = state.selection;
+  if (!s) return false;
+  switch (s.kind) {
+    case 'asset':
+      confirmDeleteAsset(state, s.assetId);
+      return true;
+    case 'object':
+      removeObjects(state, s.holderId, s.objectIds);
+      return true;
+    case 'node':
+      removeGraphSelection(state, s.assetId, s.nodeIds, s.annotationIds);
+      return true;
+    case 'annotation':
+      removeGraphSelection(state, s.assetId, [], s.annotationIds);
+      return true;
+    case 'frame':
+      state.execute(new RemoveFrameCommand(s.assetId, s.frameId));
+      return true;
+    case 'shape':
+      removeShapes(state, s.assetId, s.shapeIds);
+      return true;
+    case 'track':
+      // The keys when some are picked, else the row itself – like a frame of a texture.
+      state.execute(
+        s.keys.length > 0
+          ? new RemoveAnimationKeysCommand(s.assetId, s.keys)
+          : new RemoveAnimationTracksCommand(s.assetId, [s.trackId]),
+      );
+      return true;
+  }
+}
+
 /** Asks before deleting an asset, spelling out what goes with it. */
 export function confirmDeleteAsset(state: EditorState, assetId: string): void {
   const asset = findAsset(state.project, assetId);
@@ -167,5 +219,5 @@ function wornDetail(sprites: number, animations: number, tiles: number, type: As
   // "a, b and c" rather than "a and b and c", which three kinds of user made reachable.
   const list =
     who.length > 2 ? `${who.slice(0, -1).join(', ')} and ${who[who.length - 1]}` : who.join(' and ');
-  return `${list} reference it and show the plain colour in its place.`;
+  return `${list} reference it and show the plain color in its place.`;
 }

src/editor/animation/RowDialog.ts

@@ -5,6 +5,7 @@ import {
 import { animationTargets, targetDefs, trackDef } from '../../core/model/animation';
 import type { AnimationAsset, AnimationTrack } from '../../core/model/Asset';
 import { findAsset } from '../../core/model/Project';
+import { objectName } from '../../core/model/SceneObject';
 import type { PropertyDef } from '../../core/properties/PropertySchema';
 import { type Button, Dropdown, Label, Menu, type MenuItem } from '../../ui';
 import { dialogSlot, FormDialog } from '../FormDialog';
@@ -90,7 +91,7 @@ export class RowDialog extends FormDialog {
     for (const { id, object, depth } of animationTargets(this.state.project, root))
       choices.push({
         id,
-        label: `${'   '.repeat(depth)}${object.name || findAsset(this.state.project, object.assetId)?.name || '?'}`,
+        label: `${'   '.repeat(depth)}${objectName(object, findAsset(this.state.project, object.assetId))}`,
       });
     return choices;
   }

src/editor/inspector/annotationSection.ts

@@ -49,7 +49,7 @@ export function buildAnnotationSection(host: InspectorHost, assetId: string, ann
   );
   addNote(
     host,
-    'The text is drawn black or white, whichever reads better on this colour – so any colour stays legible.',
+    'The text is drawn black or white, whichever reads better on this color – so any color stays legible.',
     'small',
   );
   if (annotation.color !== undefined)
@@ -103,7 +103,7 @@ function addRow(
 
 function describe(kind: AnnotationKind): string {
   return kind === 'group'
-    ? 'Nodes whose centre lies in the box move with it. Deleting the group leaves them where they are.'
+    ? 'Nodes whose center lies in the box move with it. Deleting the group leaves them where they are.'
     : 'A comment is read, not run: it frames nothing and moves alone.';
 }
 

src/editor/inspector/objectSection.ts

@@ -29,7 +29,7 @@ import {
 import { type ObjectChoice, objectChoices } from '../../core/model/objectRefs';
 import { type PropertyValue, textOf } from '../../core/model/Properties';
 import { findAsset, findObjectHolder, type Project } from '../../core/model/Project';
-import type { SceneObject } from '../../core/model/SceneObject';
+import { objectName, type SceneObject } from '../../core/model/SceneObject';
 import {
   COMMON_PROPS,
   isCommonProp,
@@ -120,7 +120,7 @@ export function buildObjectsSection(host: InspectorHost, holderId: string, objec
   for (const id of objectIds) {
     const object = findObject(view, id);
     const asset = object && findAsset(host.state.project, object.assetId);
-    if (object && asset) addNote(host, `${object.name || asset.name}  ·  ${asset.type}`);
+    if (object && asset) addNote(host, `${objectName(object, asset)}  ·  ${asset.type}`);
   }
   addGap(host);
   addNote(host, 'Ctrl-click adds or removes objects.', 'small');
@@ -136,7 +136,7 @@ export function buildObjectsSection(host: InspectorHost, holderId: string, objec
     new Button('Create container', { onClick: () => createContainer(host.state, holderId, objectIds) }),
   );
   addNote(host, 'Groups the selection into a reusable container', 'small');
-  addNote(host, 'asset placed at its centre (Ctrl+G).', 'small');
+  addNote(host, 'asset placed at its center (Ctrl+G).', 'small');
   addGap(host);
   host.body.add(
     new Button('Remove', {

src/editor/inspector/parentRow.ts

@@ -1,7 +1,7 @@
 import { SetParentCommand } from '../../core/commands/sceneObjectCommands';
 import { findObject, isSelfOrAncestor, treeOrder } from '../../core/model/hierarchy';
 import { findAsset, type ObjectHolder } from '../../core/model/Project';
-import type { SceneObject } from '../../core/model/SceneObject';
+import { objectName, type SceneObject } from '../../core/model/SceneObject';
 import { Dropdown, Label, Menu, type MenuItem } from '../../ui';
 import { labelledRow } from './fieldFactory';
 import type { InspectorHost } from './host';
@@ -14,7 +14,7 @@ import { viewOf } from './objectQueries';
  */
 export function parentRow(host: InspectorHost, holder: ObjectHolder, object: SceneObject, fixed: boolean) {
   const { row } = labelledRow('Parent');
-  const nameOf = (o: SceneObject) => o.name || findAsset(host.state.project, o.assetId)?.name || '?';
+  const nameOf = (o: SceneObject) => objectName(o, findAsset(host.state.project, o.assetId));
   const parent = findObject(holder, object.parentId);
   const name = parent ? nameOf(parent) : 'None';
   if (fixed) {

src/editor/inspector/shapeSection.ts

@@ -14,7 +14,6 @@ import {
   DuplicateVectorShapeCommand,
   MoveVectorShapeCommand,
   RemoveVectorShapeCommand,
-  RemoveVectorShapesCommand,
   RenameVectorShapeCommand,
   SetVectorShapeStyleCommand,
 } from '../../core/commands/vectorArtCommands';
@@ -52,6 +51,7 @@ import {
 } from '../../core/model/vectorPaint';
 import type { PropertyDef } from '../../core/properties/PropertySchema';
 import { Button, HStack, Theme } from '../../ui';
+import { removeShapes } from '../actions';
 import { type EditorState, shapeSelection } from '../state';
 import { GradientBar } from '../vectorart/GradientBar';
 import { ShapeList } from '../vectorart/ShapeList';
@@ -74,7 +74,7 @@ interface PreviewStyle {
 export type PaintPart = 'fill' | 'stroke';
 
 const FILL_KIND_LABELS: Record<FillKind, string> = {
-  solid: 'Solid colour',
+  solid: 'Solid color',
   linear: 'Linear gradient',
   radial: 'Radial gradient',
   texture: 'Texture',
@@ -112,7 +112,7 @@ const TEXTURE_DEF: PropertyDef = {
 function stopDefs(part: PaintPart): { color: PropertyDef; alpha: PropertyDef; offset: PropertyDef } {
   const prefix = part === 'fill' ? 'fillStop' : 'lineStop';
   return {
-    color: { key: `${prefix}Color`, label: 'Stop colour', kind: 'color', default: 0xffffff },
+    color: { key: `${prefix}Color`, label: 'Stop color', kind: 'color', default: 0xffffff },
     alpha: {
       key: `${prefix}Alpha`,
       label: 'Stop opacity',
@@ -187,7 +187,7 @@ const OPACITY_DEF: PropertyDef = {
 const OUTLINE_DEF: PropertyDef = { key: 'outline', label: 'Outline', kind: 'boolean', default: false };
 const STROKE_COLOR_DEF: PropertyDef = {
   key: 'strokeColor',
-  label: 'Line colour',
+  label: 'Line color',
   kind: 'color',
   default: DEFAULT_STROKE.color,
 };
@@ -303,7 +303,7 @@ export function buildShapeSection(
         STROKE_COLOR_DEF,
         (s) => s.stroke?.color ?? DEFAULT_STROKE.color,
         (input, s) => ({ stroke: { ...strokeOf(s), color: Number(input) } }),
-        'Set line colour',
+        'Set line color',
       );
     else gradientRows(host, assetId, shapeId, 'stroke');
     styleRow(
@@ -323,10 +323,7 @@ export function buildShapeSection(
     host.body.add(
       new Button('Delete shapes', {
         variant: 'danger',
-        onClick: () => {
-          host.state.execute(new RemoveVectorShapesCommand(assetId, shapeIds));
-          host.state.select({ kind: 'asset', assetId });
-        },
+        onClick: () => removeShapes(host.state, assetId, shapeIds),
       }),
     );
   host.body.add(addShapeButton(host, assetId));
@@ -683,9 +680,9 @@ function gradientRows(host: InspectorHost, assetId: string, shapeId: string, par
       },
       label,
     );
-  stopRow(defs.color, (stop) => stop.color, 'color', 'Set stop colour');
+  stopRow(defs.color, (stop) => stop.color, 'color', 'Set stop color');
   stopRow(defs.alpha, (stop) => stop.alpha, 'alpha', 'Set stop opacity');
-  stopRow(defs.offset, (stop) => stop.offset, 'offset', 'Move colour stop');
+  stopRow(defs.offset, (stop) => stop.offset, 'offset', 'Move color stop');
 
   const remove = new Button('Remove stop', {
     variant: 'ghost',
@@ -701,7 +698,7 @@ function gradientRows(host: InspectorHost, assetId: string, shapeId: string, par
           assetId,
           shapeId,
           withGradient(shape, part, next),
-          'Remove colour stop',
+          'Remove color stop',
         ),
       );
     },

src/editor/panels/GroupNameDialog.ts

@@ -1,4 +1,4 @@
-import type { ObjectGroup } from '../../core/model/SceneObject';
+import { groupName, type ObjectGroup } from '../../core/model/SceneObject';
 import { type Button, Dropdown, Menu, TextField, ui } from '../../ui';
 import { dialogSlot, FormDialog } from '../FormDialog';
 
@@ -72,8 +72,8 @@ export class GroupNameDialog extends FormDialog {
     return [
       { label: NEW_GROUP, onSelect: pick('', NEW_GROUP) },
       ...(this.join?.groups ?? []).map((g) => ({
-        label: g.name || 'Group',
-        onSelect: pick(g.id, g.name || 'Group'),
+        label: groupName(g),
+        onSelect: pick(g.id, groupName(g)),
       })),
     ];
   }

src/editor/panels/HierarchyPanel.ts

@@ -11,6 +11,7 @@ import {
 } from '../../core/model/hierarchy';
 import { resolvedHolder } from '../../core/model/instance';
 import { findAsset, type ObjectHolder } from '../../core/model/Project';
+import { groupName, objectName } from '../../core/model/SceneObject';
 import { deviationMarks } from '../../core/properties/deviation';
 import { type DropSpot, ListView, Menu, Panel, ScrollContainer } from '../../ui';
 import { groupRowItems, selectGroup } from '../objectGroups';
@@ -272,7 +273,7 @@ export class HierarchyPanel extends Panel {
         if (row.kind === 'group')
           return {
             id: groupRowId(row.group.id),
-            label: row.group.name || 'Group',
+            label: groupName(row.group),
             hint: String(row.memberIds.length),
             icon: GROUP_ICON_SVG,
             iconAtEnd: true,
@@ -284,7 +285,7 @@ export class HierarchyPanel extends Panel {
         const asset = findAsset(this.state.project, object.assetId);
         return {
           id: object.id,
-          label: object.name || asset?.name || '?',
+          label: objectName(object, asset),
           icon: asset && ASSET_ICON_SVG[asset.type],
           iconAtEnd: true,
           depth,

src/editor/pixelart/PixelArtSide.ts

@@ -120,7 +120,7 @@ export class PixelArtSide extends ScrollContainer {
     this.toolOptions = row(this.filledOption, this.contiguousOption, new Spacer(), this.brushButton);
     c.add(this.toolOptions);
 
-    c.add(heading('Colours'));
+    c.add(heading('Colors'));
     this.palette.onPick = (index) => this.canvas.setColor(index);
     this.palette.onReflow = () => this.relayoutContent();
     c.add(this.palette);
@@ -395,7 +395,7 @@ export class PixelArtSide extends ScrollContainer {
     this.addColorButton.setEnabled(palette !== null);
     this.removeColorButton.setEnabled(editable);
     this.paletteNote.setText(
-      palette ? `${palette.name} · ${palette.colors.length} colours` : 'Default colours',
+      palette ? `${palette.name} · ${palette.colors.length} colors` : 'Default colors',
     );
     this.createPaletteButton.visible = asset !== null && palette === null;
 

src/editor/pixelart/pixelActions.ts

@@ -167,17 +167,17 @@ export function setPaletteColor(
   if (index < 1 || index > palette.colors.length || palette.colors[index - 1] === color) return false;
   const colors = [...palette.colors];
   colors[index - 1] = color;
-  return state.execute(new SetPaletteColorsCommand(palette.id, 'Palette colour', colors));
+  return state.execute(new SetPaletteColorsCommand(palette.id, 'Palette color', colors));
 }
 
 /** Appends a colour; returns its index, 0 when the palette is full. */
 export function addPaletteColor(state: EditorState, palette: PaletteAsset, color: number): number {
   if (palette.colors.length >= PALETTE_MAX) {
-    state.setNotice(`A palette holds at most ${PALETTE_MAX} colours.`);
+    state.setNotice(`A palette holds at most ${PALETTE_MAX} colors.`);
     return 0;
   }
   const colors = [...palette.colors, color];
-  return state.execute(new SetPaletteColorsCommand(palette.id, 'Add colour', colors)) ? colors.length : 0;
+  return state.execute(new SetPaletteColorsCommand(palette.id, 'Add color', colors)) ? colors.length : 0;
 }
 
 /**
@@ -203,9 +203,9 @@ export function removePaletteColor(state: EditorState, palette: PaletteAsset, in
       if (next) replaced[file] = pixelCels.put(next);
     }
     if (Object.keys(replaced).length > 0)
-      rewrites.push(new EditPixelArtCommand(asset.id, 'Remove colour', (s) => withCelsReplaced(s, replaced)));
+      rewrites.push(new EditPixelArtCommand(asset.id, 'Remove color', (s) => withCelsReplaced(s, replaced)));
   }
   const colors = palette.colors.filter((_, i) => i !== index - 1);
-  const recolor = new SetPaletteColorsCommand(palette.id, 'Remove colour', colors);
-  return state.execute(oneStep('Remove colour', [recolor, ...rewrites]));
+  const recolor = new SetPaletteColorsCommand(palette.id, 'Remove color', colors);
+  return state.execute(oneStep('Remove color', [recolor, ...rewrites]));
 }

src/editor/plugins/pluginApi.ts

@@ -110,5 +110,3 @@ export function createPluginApi(pluginId: string, host: PluginHost) {
     ui: Object.freeze({ NodeBoard }),
   });
 }
-
-export type PluginApi = ReturnType<typeof createPluginApi>;

src/editor/shader/previewPicture.ts

@@ -2,6 +2,7 @@ import { findObject } from '../../core/model/hierarchy';
 import { resolvedHolder } from '../../core/model/instance';
 import type { PropertyBag } from '../../core/model/Properties';
 import { findAsset, findObjectHolder, type Project } from '../../core/model/Project';
+import { objectName } from '../../core/model/SceneObject';
 import { findFrame, resolvePicture, resolveTexture, type TextureRef } from '../../core/model/texture';
 import type { FlatDef } from '../../core/properties/PropertySchema';
 import { resolveAssetProps, resolveSceneObjectProps } from '../../core/properties/resolve';
@@ -46,7 +47,7 @@ export function previewPicture(project: Project, subject: PictureSubject): Previ
     const object = holder && findObject(resolvedHolder(project, holder), subject.objectId);
     const asset = object && findAsset(project, object.assetId);
     if (!object || asset?.type !== 'sprite') return null;
-    return spritePicture(project, object.name || asset.name, resolveSceneObjectProps(project, asset, object));
+    return spritePicture(project, objectName(object, asset), resolveSceneObjectProps(project, asset, object));
   }
   if (subject.kind === 'frame') {
     const found = findFrame(project, subject.frameId);

src/editor/shortcuts.ts

@@ -1,7 +1,5 @@
-import { RemoveAnimationKeysCommand, RemoveAnimationTracksCommand } from '../core/commands/animationCommands';
-import { RemoveFrameCommand } from '../core/commands/frameCommands';
 import { ui } from '../ui';
-import { confirmDeleteAsset, createContainer, removeGraphSelection, removeObjects } from './actions';
+import { createContainer, removeSelection } from './actions';
 import type { EditorState } from './state';
 
 export interface ShortcutActions {
@@ -45,22 +43,7 @@ export function installShortcuts(state: EditorState, actions: ShortcutActions):
       if (s?.kind === 'object') createContainer(state, s.holderId, s.objectIds);
       return true;
     }
-    if (event.key === 'Delete' || event.key === 'Backspace') {
-      const s = state.selection;
-      if (s?.kind === 'object') removeObjects(state, s.holderId, s.objectIds);
-      else if (s?.kind === 'node') removeGraphSelection(state, s.assetId, s.nodeIds, s.annotationIds);
-      else if (s?.kind === 'frame') state.execute(new RemoveFrameCommand(s.assetId, s.frameId));
-      else if (s?.kind === 'annotation') removeGraphSelection(state, s.assetId, [], s.annotationIds);
-      // The keys when some are picked, else the row itself – like a frame of a texture.
-      else if (s?.kind === 'track')
-        state.execute(
-          s.keys.length > 0
-            ? new RemoveAnimationKeysCommand(s.assetId, s.keys)
-            : new RemoveAnimationTracksCommand(s.assetId, [s.trackId]),
-        );
-      else if (s?.kind === 'asset') confirmDeleteAsset(state, s.assetId);
-      return s !== null;
-    }
+    if (event.key === 'Delete' || event.key === 'Backspace') return removeSelection(state);
     // Ctrl+Enter starts play and then holds/resumes it. A plain letter would be taken away from
     // the game, which owns the keyboard while playing.
     if (mod && event.key === 'Enter') {

src/editor/variables/VariablesEditor.ts

@@ -7,6 +7,7 @@ import type { Container } from 'pixi.js';
 import { isVariableOwner } from '../../core/model/Asset';
 import { findObject } from '../../core/model/hierarchy';
 import { findAsset } from '../../core/model/Project';
+import { objectName } from '../../core/model/SceneObject';
 import { Label, ScrollContainer, Theme, ui, VStack, HStack } from '../../ui';
 import { assetSignature, buildVariables, refreshAssetSection } from '../inspector/assetSection';
 import type { InspectorHost } from '../inspector/host';
@@ -31,7 +32,7 @@ function ownerOf(state: EditorState, target: Extract<ValuesTarget, { kind: 'vari
   const view = viewOf(state.project, owner.holderId);
   const object = view && findObject(view, owner.objectId);
   const asset = object && findAsset(state.project, object.assetId);
-  return object && asset?.type === 'behavior' ? { asset, name: object.name || asset.name } : null;
+  return object && asset?.type === 'behavior' ? { asset, name: objectName(object, asset) } : null;
 }
 
 /** What the tab of `target` says, or null once there is nothing left to show – the tab closes then. */

src/editor/vectorart/GradientBar.ts

@@ -122,7 +122,7 @@ export class GradientBar extends Widget {
       return;
     }
     const after = withStopAdded(gradient, this.offsetAt(local.x));
-    this.handlers.commit(cloneGradient(gradient), after, 'Add colour stop');
+    this.handlers.commit(cloneGradient(gradient), after, 'Add color stop');
     this.handlers.select(after.stops.length - 1);
   }
 
@@ -139,7 +139,7 @@ export class GradientBar extends Widget {
   private onRelease(): void {
     const drag = this.drag;
     this.drag = null;
-    if (drag?.moved) this.handlers.commit(drag.before, drag.after, 'Move colour stop');
+    if (drag?.moved) this.handlers.commit(drag.before, drag.after, 'Move color stop');
   }
 
   override redraw(): void {

src/editor/vectorart/VectorArtCanvas.ts

@@ -13,8 +13,6 @@
 import { type FederatedPointerEvent, Graphics } from 'pixi.js';
 import {
   AddVectorShapeCommand,
-  RemoveVectorShapeCommand,
-  RemoveVectorShapesCommand,
   paintsOf,
   SetVectorShapeRingsCommand,
   SetVectorShapeStyleCommand,
@@ -50,6 +48,7 @@ import {
   withSmoothToggled,
 } from '../polygonEdit';
 import { DRAG_THRESHOLD, drawPointGrip, HANDLE_RADIUS, POINT_SIZE } from '../pointGrips';
+import { removeShapes } from '../actions';
 import { type EditorState, shapeSelection } from '../state';
 import { drawChecker } from '../texture/checker';
 import { SheetCanvas } from '../texture/SheetCanvas';
@@ -256,12 +255,7 @@ export class VectorArtCanvas extends SheetCanvas<VectorArtAsset> {
     const shapeIds = this.selectedShapeIds();
     if (shapeIds.length === 0) return super.onKeyDown(event);
     this.endPen();
-    this.state.execute(
-      shapeIds.length === 1
-        ? new RemoveVectorShapeCommand(this.assetId, shapeIds[0]!)
-        : new RemoveVectorShapesCommand(this.assetId, shapeIds),
-    );
-    this.state.select({ kind: 'asset', assetId: this.assetId });
+    removeShapes(this.state, this.assetId, shapeIds);
     return true;
   }
 
@@ -784,7 +778,7 @@ export class VectorArtCanvas extends SheetCanvas<VectorArtAsset> {
     if (this.target === 'stroke' && !shape.stroke) return 'Paint: this shape has no outline.';
     return this.shownPaint()
       ? `Paint: drag the two handles of the ${part}.`
-      : `Paint: the ${part} is one colour – pick a ${this.target === 'fill' ? 'gradient or texture' : 'gradient'} in the inspector.`;
+      : `Paint: the ${part} is one color – pick a ${this.target === 'fill' ? 'gradient or texture' : 'gradient'} in the inspector.`;
   }
 
   private syncHint(asset: VectorArtAsset | null): void {

src/runtime/World.ts

@@ -11,7 +11,7 @@ import { referenceCandidates } from '../core/model/objectRefs';
 import type { Cell } from '../core/model/tilemap';
 import { descendantsBelow } from '../core/model/walk';
 import { findAsset, findAssetOf, findScene, type Project } from '../core/model/Project';
-import { createSceneObject, type SceneObject } from '../core/model/SceneObject';
+import { createSceneObject, objectName, type SceneObject } from '../core/model/SceneObject';
 import { apply, IDENTITY } from '../core/model/matrix';
 import { hasTransformProps } from '../core/properties/PropertySchema';
 import { carriedTransform, localMatrixOf, transformOf } from '../core/properties/transform';
@@ -247,7 +247,7 @@ export class World {
     }
     entity.assetId = asset.id;
     entity.type = asset.type;
-    entity.name = object.name || asset.name;
+    entity.name = objectName(object, asset);
     entity.x = object.position.x;
     entity.y = object.position.y;
     entity.z = object.position.z;

src/ui/UIContext.ts

@@ -36,6 +36,6 @@ export function initUI(app: Application, root: Container, overlay: Container): U
 }
 
 export function ui(): UIContext {
-  if (!context) throw new Error('UI not initialised – call initUI() first');
+  if (!context) throw new Error('UI not initialized – call initUI() first');
   return context;
 }

src/ui/widgets/Dialog.ts

@@ -12,10 +12,16 @@ export interface DialogButton {
   onClick?: () => void;
 }
 
-/** A modal box with title, message and a right-aligned button row. Any button closes it. */
+/**
+ * A modal box with title, message and a right-aligned button row. Any button closes it, and Escape
+ * is the plain button – the one neither primary nor danger, the Cancel – so both lead back alike.
+ */
 export class Dialog extends Popup {
+  private readonly cancel: (() => void) | undefined;
+
   constructor(title: string, message: string, buttons: DialogButton[]) {
     super({ modal: true, padding: Theme.padding * 2, gap: Theme.padding });
+    this.cancel = buttons.find((b) => !b.primary && !b.danger)?.onClick;
     this.minWidth = 320;
     this.content.add(new Label(title, { style: 'bodyBold' }));
     if (message) this.content.add(new Label(message, { style: 'muted' }));
@@ -30,4 +36,8 @@ export class Dialog extends Popup {
     }
     this.content.add(row);
   }
+
+  protected override dismiss(): void {
+    this.closeThen(this.cancel)();
+  }
 }

src/ui/widgets/Popup.ts

@@ -151,10 +151,15 @@ export class Popup extends Widget {
   private readonly onEscape = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       event.stopPropagation();
-      this.close();
+      this.dismiss();
     }
   };
 
+  /** What Escape does. A popup closes; a dialog makes it its Cancel. */
+  protected dismiss(): void {
+    this.close();
+  }
+
   override measure(): Size {
     const c = this.content.measure();
     return { w: Math.max(this.minWidth, c.w), h: Math.max(this.minHeight, c.h) };

src/viewport/items.ts

@@ -22,6 +22,7 @@ import {
   solidRects,
 } from '../core/model/tilemapCollision';
 import { findAsset, findAssetOf, type ObjectHolder, type Project } from '../core/model/Project';
+import { objectName } from '../core/model/SceneObject';
 import { fontFileOf, fontSmoothOf } from '../core/model/font';
 import { resolveTexture, type TextureRef } from '../core/model/texture';
 import type { FrameOutline } from '../core/model/frameOutline';
@@ -206,7 +207,7 @@ export function collectHolderItems(
     items.push({
       id: object.id,
       type: asset.type,
-      name: object.name || asset.name,
+      name: objectName(object, asset),
       x: m.tx,
       y: m.ty,
       z,