Give a list its own tab instead of a comma line

A list property in the inspector was a single text field holding a comma
separated line -- unreadable past a handful of items, and it could not
carry anything but text. It becomes a button ("3 items") that opens a
sixth centre tab, where every item is a row built by the very widget the
inspector would build for that item kind.

The renderer was free: a PropertyDef of kind 'list' already carries
`items`, so item i becomes a synthetic def of that kind -- number, text,
boolean and colour rows appear without a new branch.

The way into the tab goes through the state (EditorState.listSlot,
openList(), event 'list'), like every other tab switch here; a tab may
not call showTab itself. ListSlot lives next to Selection rather than in
the tab folder, or state.ts would have to import upwards.

A row's handlers must not close over a snapshot of the list: they outlive
a commit, since the tab only rebuilds when the length changes, and the
second edited row would otherwise revive the value the first replaced.

showTab switched five `visible` lines by hand, where a sixth tab is
silently forgotten; it is a Record<CentreTab, Widget> now.

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

src/editor/Editor.ts

@@ -2,7 +2,7 @@ import type { Application } from 'pixi.js';
 import { findAsset, findObjectHolder } from '../core/model/Project';
 import type { ProjectStore } from '../core/store/ProjectStore';
 import type { TextureStore } from '../core/store/TextureStore';
-import { Button, HStack, Splitter, Theme, ui, VStack } from '../ui';
+import { Button, HStack, Splitter, Theme, ui, VStack, type Widget } from '../ui';
 import { GameViewport } from './viewport/GameViewport';
 import { SceneViewport } from './viewport/SceneViewport';
 import { attachAutosave } from './autosave';
@@ -10,6 +10,7 @@ import { ContainerEditor } from './container/ContainerEditor';
 import { EditorRun } from './EditorRun';
 import { GraphEditor } from './graph/GraphEditor';
 import { Inspector } from './inspector/Inspector';
+import { ListEditor } from './list/ListEditor';
 import { AssetPanel } from './panels/AssetPanel';
 import { HierarchyPanel } from './panels/HierarchyPanel';
 import { Toolbar } from './panels/Toolbar';
@@ -20,9 +21,18 @@ import type { EditorState } from './state';
 import { TextureEditor } from './texture/TextureEditor';
 import { installTextureImport } from './textureImport';
 
-export type CentreTab = 'scene' | 'graph' | 'game' | 'texture' | 'container';
+export type CentreTab = 'scene' | 'graph' | 'game' | 'texture' | 'container' | 'list';
 
-const TAB_ORDER = ['scene', 'game', 'graph', 'texture', 'container'] as const;
+const TAB_ORDER = ['scene', 'game', 'graph', 'texture', 'container', 'list'] as const;
+
+const TAB_LABELS: Record<CentreTab, string> = {
+  scene: 'Scene',
+  game: 'Game',
+  graph: 'Graph',
+  texture: 'Texture',
+  container: 'Container',
+  list: 'List',
+};
 
 const MIN_LEFT_WIDTH = 160;
 const MAX_LEFT_WIDTH = 500;
@@ -42,6 +52,7 @@ export class Editor implements PlayHost {
   readonly graphEditor: GraphEditor;
   readonly textureEditor: TextureEditor;
   readonly containerEditor: ContainerEditor;
+  readonly listEditor: ListEditor;
   readonly hierarchy: HierarchyPanel;
   readonly assets: AssetPanel;
   readonly inspector: Inspector;
@@ -57,6 +68,7 @@ export class Editor implements PlayHost {
   private readonly workspace: HStack;
   private readonly centre: VStack;
   private readonly tabButtons: Record<CentreTab, Button>;
+  private readonly panes: Record<CentreTab, Widget>;
   private readonly toolbar: Toolbar;
   private fpsFrames = 0;
   private fpsElapsed = 0;
@@ -75,6 +87,7 @@ export class Editor implements PlayHost {
     this.graphEditor = new GraphEditor(state);
     this.textureEditor = new TextureEditor(state);
     this.containerEditor = new ContainerEditor(state);
+    this.listEditor = new ListEditor(state);
     this.hierarchy = new HierarchyPanel(state);
     this.inspector = new Inspector(state);
     this.play = new PlaySession(state, this);
@@ -109,32 +122,30 @@ export class Editor implements PlayHost {
     this.centre = new VStack();
     const tabs = new HStack({ gap: 2, padding: 4, align: 'center' });
     tabs.minHeight = Theme.controlHeight + 8;
+    // Written out per tab rather than derived, because a `Record<CentreTab, …>` is what makes
+    // adding a tab a type error everywhere it has to be handled instead of a silent omission.
+    this.panes = {
+      scene: this.viewport,
+      game: this.gameView,
+      graph: this.graphEditor,
+      texture: this.textureEditor,
+      container: this.containerEditor,
+      list: this.listEditor,
+    };
     this.tabButtons = {
-      scene: new Button('Scene', { variant: 'ghost', width: 90, onClick: () => this.showTab('scene') }),
-      game: new Button('Game', { variant: 'ghost', width: 90, onClick: () => this.showTab('game') }),
-      graph: new Button('Graph', { variant: 'ghost', width: 90, onClick: () => this.showTab('graph') }),
-      texture: new Button('Texture', {
-        variant: 'ghost',
-        width: 90,
-        onClick: () => this.showTab('texture'),
-      }),
-      container: new Button('Container', {
-        variant: 'ghost',
-        width: 90,
-        onClick: () => this.showTab('container'),
-      }),
+      scene: this.tabButton('scene'),
+      game: this.tabButton('game'),
+      graph: this.tabButton('graph'),
+      texture: this.tabButton('texture'),
+      container: this.tabButton('container'),
+      list: this.tabButton('list'),
     };
-    for (const tab of TAB_ORDER) tabs.add(this.tabButtons[tab]);
     this.centre.add(tabs);
-    this.centre.add(this.viewport, 1);
-    this.centre.add(this.graphEditor, 1);
-    this.centre.add(this.gameView, 1);
-    this.centre.add(this.textureEditor, 1);
-    this.centre.add(this.containerEditor, 1);
-    this.graphEditor.visible = false;
-    this.gameView.visible = false;
-    this.textureEditor.visible = false;
-    this.containerEditor.visible = false;
+    for (const tab of TAB_ORDER) {
+      tabs.add(this.tabButtons[tab]);
+      this.centre.add(this.panes[tab], 1);
+      this.panes[tab].visible = tab === 'scene';
+    }
     this.tabButtons.scene.setToggled(true);
 
     this.leftColumn.minWidth = this.leftWidth;
@@ -177,6 +188,11 @@ export class Editor implements PlayHost {
       )
         this.showTab('container');
     });
+    // Opening a list is a request to look at it, so this switches even when the slot is unchanged.
+    state.on('list', () => {
+      if (state.listSlot) this.showTab('list');
+      else if (this.tab === 'list') this.showTab('scene');
+    });
     state.on('project', () => {
       this.play.syncFromModel();
       this.editorRun.invalidate();
@@ -187,22 +203,24 @@ export class Editor implements PlayHost {
 
   showTab(tab: CentreTab): void {
     this.tab = tab;
-    this.viewport.visible = tab === 'scene';
-    this.graphEditor.visible = tab === 'graph';
-    this.gameView.visible = tab === 'game';
-    this.textureEditor.visible = tab === 'texture';
-    this.containerEditor.visible = tab === 'container';
     // The hierarchy lists what the visible tab edits; every other tab is about the scene.
     this.hierarchy.showObjectsOf(
       tab === 'container'
         ? () => findObjectHolder(this.state.project, this.containerEditor.currentAssetId)
         : () => this.state.activeScene,
     );
-    for (const key of TAB_ORDER) this.tabButtons[key].setToggled(key === tab);
+    for (const key of TAB_ORDER) {
+      this.panes[key].visible = key === tab;
+      this.tabButtons[key].setToggled(key === tab);
+    }
     this.centre.relayout();
     ui().focus.validate();
   }
 
+  private tabButton(tab: CentreTab): Button {
+    return new Button(TAB_LABELS[tab], { variant: 'ghost', width: 90, onClick: () => this.showTab(tab) });
+  }
+
   boot(): Promise<void> {
     return this.projects.boot();
   }

src/editor/debugHook.ts

@@ -223,6 +223,11 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
       objectScreen: (id: string) => containerEditor.objectScreen(id),
       dropPreview: () => containerEditor.dropInfo(),
     },
+    list: {
+      info: () => editor.listEditor.debugInfo(),
+      /** Where an item's widget sits, so a check can click it – a number field has no findable text. */
+      fieldAt: (index: number) => editor.listEditor.fieldAt(index),
+    },
     world: () => editor.worldSnapshot(),
     playInfo: () => editor.playInfo(),
     /** Behaviors running without Play (`Run in editor`), and how long they have been at it. */

src/editor/inspector/assetSection.ts

@@ -23,7 +23,7 @@ import { Button, Dropdown, HStack, Label, Menu, Spacer, TextField, Theme } from
 import { aspectActions, sizeCommand } from './aspectAction';
 import { createField, createFieldRow, type FieldHandlers, labelledRow } from './fieldFactory';
 import { addNote, addTitle, type InspectorHost } from './host';
-import { previewingHandlers } from './previewHandlers';
+import { listOpener, previewingHandlers } from './previewHandlers';
 
 const VARIABLE_KIND_LABELS: Record<VariableKind, string> = {
   number: 'Number',
@@ -124,13 +124,16 @@ function buildProps(host: InspectorHost, asset: Asset, schema: readonly Property
 
 /** Previews straight into the asset while editing; the command records the value from before the preview. */
 function assetHandlers(host: InspectorHost, assetId: string, def: PropertyDef): FieldHandlers {
-  return previewingHandlers<Asset>(host, {
-    target: () => findAsset(host.state.project, assetId),
-    read: (asset) => asset.props[def.key],
-    write: (asset, value) => (asset.props[def.key] = value),
-    // No `remove`: an asset bag is dense – loading fills the defaults, a new variable brings its own.
-    commit: (value) => new SetAssetPropertyCommand(assetId, def.key, value),
-  });
+  return {
+    ...previewingHandlers<Asset>(host, {
+      target: () => findAsset(host.state.project, assetId),
+      read: (asset) => asset.props[def.key],
+      write: (asset, value) => (asset.props[def.key] = value),
+      // No `remove`: an asset bag is dense – loading fills the defaults, a new variable brings its own.
+      commit: (value) => new SetAssetPropertyCommand(assetId, def.key, value),
+    }),
+    ...listOpener(host.state, def, () => ({ kind: 'asset', assetId, key: def.key })),
+  };
 }
 
 /** Variables of a behavior: kind mark, name, default value, remove – plus an "add" menu. */

src/editor/inspector/fieldFactory.ts

@@ -39,6 +39,11 @@ export interface FieldHandlers {
   onInput: (value: PropertyValue) => void;
   /** Final value – commit as a command. */
   onChange: (value: PropertyValue) => void;
+  /**
+   * Sends a list to the List tab. Only the caller knows where the value it edits lives, so a
+   * list row falls back to the comma-separated text field wherever this is not given.
+   */
+  openList?: () => void;
 }
 
 export interface FieldRow {
@@ -195,9 +200,16 @@ export function createField(
       return { widget: field, grow: true, setValue: (v) => field.setValue(Number(v)) };
     }
     case 'list': {
-      // Typed as one comma-separated line rather than a row per item: a board is hundreds of
-      // entries, and a growing list of fields would push everything else out of the inspector.
-      const asText = (v: PropertyValue) => listToText(isList(v) ? v : [], def.items);
+      const asList = (v: PropertyValue) => (isList(v) ? v : []);
+      const { openList } = handlers;
+      if (openList) {
+        // A board is hundreds of entries: the row says how many and hands the editing to the
+        // List tab, where a row per item has the space for it.
+        const count = (v: PropertyValue) => `${asList(v).length} items`;
+        const button = new Button(count(value), { variant: 'ghost', onClick: openList });
+        return { widget: button, grow: true, setValue: (v) => button.setText(count(v)) };
+      }
+      const asText = (v: PropertyValue) => listToText(asList(v), def.items);
       const field = new TextField(asText(value), {
         onChange: (text) => handlers.onChange(listFromText(String(text), def.items)),
       });

src/editor/inspector/nodeSection.ts

@@ -17,7 +17,7 @@ import { Button, Label } from '../../ui';
 import { createFieldRow, type FieldHandlers } from './fieldFactory';
 import { addGap, addNote, addTitle, type InspectorHost } from './host';
 import { buildPortSection } from './portSection';
-import { previewingHandlers } from './previewHandlers';
+import { listOpener, previewingHandlers } from './previewHandlers';
 
 /** Structure-defining facts of a node selection: ports, connected inputs, declared variables. */
 export function nodeSignature(project: Project, assetId: string, nodeId: string): string {
@@ -60,7 +60,7 @@ export function buildNodeSection(host: InspectorHost, assetId: string, nodeId: s
       host,
       effective,
       node.params[param.key] ?? effective.default,
-      paramHandlers(host, assetId, nodeId, param.key),
+      paramHandlers(host, assetId, nodeId, effective),
     );
     host.fields.set(`param:${param.key}`, row);
     host.body.add(row.row);
@@ -74,7 +74,7 @@ export function buildNodeSection(host: InspectorHost, assetId: string, nodeId: s
       host,
       inline,
       node.params[port.key] ?? inline.default,
-      paramHandlers(host, assetId, nodeId, port.key),
+      paramHandlers(host, assetId, nodeId, inline),
     );
     host.fields.set(`input:${port.key}`, row);
     host.body.add(row.row);
@@ -116,14 +116,23 @@ function resolveParamDef(param: PropertyDef, asset: Asset): PropertyDef {
 }
 
 /** Previews straight into the node's params; the command records the value from before the preview. */
-function paramHandlers(host: InspectorHost, assetId: string, nodeId: string, key: string): FieldHandlers {
-  return previewingHandlers<GraphNode>(host, {
-    target: () => currentNode(host.state.project, assetId, nodeId)?.node,
-    read: (node) => node.params[key],
-    write: (node, value) => (node.params[key] = value),
-    remove: (node) => delete node.params[key],
-    commit: (value) => new SetNodeParamCommand(assetId, nodeId, key, value),
-  });
+function paramHandlers(
+  host: InspectorHost,
+  assetId: string,
+  nodeId: string,
+  def: PropertyDef,
+): FieldHandlers {
+  const key = def.key;
+  return {
+    ...previewingHandlers<GraphNode>(host, {
+      target: () => currentNode(host.state.project, assetId, nodeId)?.node,
+      read: (node) => node.params[key],
+      write: (node, value) => (node.params[key] = value),
+      remove: (node) => delete node.params[key],
+      commit: (value) => new SetNodeParamCommand(assetId, nodeId, key, value),
+    }),
+    ...listOpener(host.state, def, () => ({ kind: 'node', assetId, nodeId, key })),
+  };
 }
 
 /** The node together with the graph it sits in, because its ports are derived from both. */

src/editor/inspector/objectSection.ts

@@ -43,7 +43,7 @@ import { aspectActions, sizeCommand } from './aspectAction';
 import { createFieldRow, type FieldRow, labelledRow } from './fieldFactory';
 import { addGap, addNote, addTitle, type InspectorHost } from './host';
 import { parentRow } from './parentRow';
-import { previewingHandlers } from './previewHandlers';
+import { listOpener, previewingHandlers } from './previewHandlers';
 import { currentProps, currentRef, deviations, positionMoved, targetOf, viewOf } from './objectQueries';
 import { componentRow, OFFSET_AXES, offsetKey, POSITION_AXES } from './vectorRows';
 
@@ -314,13 +314,16 @@ function propertyRow(
     host,
     def,
     values[def.key] ?? def.default,
-    previewingHandlers<ObjectRef>(host, {
-      target: () => currentRef(host.state, holderId, objectId),
-      read: (ref) => ref.object.overrides[def.key],
-      write: (ref, value) => ref.setOverride(def.key, value),
-      remove: (ref) => ref.setOverride(def.key, undefined),
-      commit: (value) => new SetOverrideCommand(holderId, objectId, def.key, value),
-    }),
+    {
+      ...previewingHandlers<ObjectRef>(host, {
+        target: () => currentRef(host.state, holderId, objectId),
+        read: (ref) => ref.object.overrides[def.key],
+        write: (ref, value) => ref.setOverride(def.key, value),
+        remove: (ref) => ref.setOverride(def.key, undefined),
+        commit: (value) => new SetOverrideCommand(holderId, objectId, def.key, value),
+      }),
+      ...listOpener(host.state, def, () => ({ kind: 'object', holderId, objectId, key: def.key })),
+    },
     {
       extra: aspectActions(
         host,

src/editor/inspector/previewHandlers.ts

@@ -1,7 +1,20 @@
+import type { PropertyDef } from '../../core/properties/PropertySchema';
 import type { Command } from '../../core/commands/Command';
 import type { PropertyValue } from '../../core/model/Properties';
+import type { EditorState, ListSlot } from '../state';
 import type { FieldHandlers } from './fieldFactory';
-import type { InspectorHost } from './host';
+
+/**
+ * The `openList` half of a row's handlers, for the sections that know where their value lives.
+ * Empty for every other kind, so spreading it into the handlers is always safe.
+ */
+export function listOpener(
+  state: EditorState,
+  def: PropertyDef,
+  slot: () => ListSlot,
+): Pick<FieldHandlers, 'openList'> {
+  return def.kind === 'list' ? { openList: () => state.openList(slot()) } : {};
+}
 
 /** Where an inspector row finds the value it edits, and what committing it means. */
 export interface PreviewedValue<Target, Model = PropertyValue> {
@@ -24,7 +37,7 @@ export interface PreviewedValue<Target, Model = PropertyValue> {
  * written back first – including "the key did not exist", via `remove`.
  */
 export function previewingHandlers<Target, Model = PropertyValue>(
-  host: InspectorHost,
+  host: { state: EditorState },
   spec: PreviewedValue<Target, Model>,
 ): FieldHandlers {
   const toModel = spec.toModel ?? ((input: PropertyValue) => input as unknown as Model);

src/editor/list/ListEditor.ts

@@ -0,0 +1,185 @@
+/**
+ * Edits one list, a row per item, with the same field widgets the inspector builds. A list row in
+ * the inspector has one line for a value that can be hundreds long; the inspector stays visible
+ * beside this tab, so what the list belongs to is still on screen while it is edited.
+ */
+import {
+  listFromText,
+  type ListItemKind,
+  listToText,
+  type PropertyDef,
+} from '../../core/properties/PropertySchema';
+import {
+  Button,
+  HStack,
+  Label,
+  ScrollContainer,
+  Spacer,
+  TextField,
+  Theme,
+  VStack,
+  type Widget,
+} from '../../ui';
+import { createField, type FieldContext } from '../inspector/fieldFactory';
+import type { EditorState } from '../state';
+import { type ListAccess, resolveList } from './slot';
+
+const INDEX_WIDTH = 40;
+
+type ItemDef = Extract<PropertyDef, { kind: ListItemKind }>;
+
+export class ListEditor extends VStack {
+  private readonly ctx: FieldContext;
+  private readonly title = new Label('', { style: 'bodyBold' });
+  private readonly count = new Label('', { style: 'small', align: 'right' });
+  private readonly scroll = new ScrollContainer();
+  private readonly addButton: Button;
+  private readonly bulk: TextField;
+  private rows = new VStack({ padding: Theme.padding, gap: Theme.gap });
+  /** The structure the rows were built for; only a change here may destroy a row being typed in. */
+  private signature = '';
+  private setters: ((value: number | string | boolean) => void)[] = [];
+  private fields: Widget[] = [];
+
+  constructor(private readonly state: EditorState) {
+    super({ gap: 0 });
+    this.ctx = { project: () => this.state.project };
+
+    const header = new HStack({ gap: Theme.gap, padding: Theme.padding, align: 'center' });
+    header.minHeight = Theme.controlHeight + 2 * Theme.padding;
+    header.add(this.title, 1);
+    header.add(this.count);
+    this.add(header);
+
+    this.scroll.setContent(this.rows);
+    this.add(this.scroll, 1);
+
+    // The comma text is what the inspector used to show. It stays, as the way to paste a whole
+    // list at once – per-item rows do not replace that.
+    const footer = new HStack({ gap: Theme.gap, padding: Theme.padding, align: 'center' });
+    this.addButton = new Button('+ Item', { variant: 'ghost', onClick: () => this.addItem() });
+    footer.add(this.addButton);
+    this.bulk = new TextField('', {
+      placeholder: 'comma-separated',
+      onChange: (text) => this.setAll(text),
+    });
+    footer.add(this.bulk, 1);
+    this.add(footer);
+
+    state.on('list', () => this.rebuild());
+    state.on('load', () => this.rebuild());
+    state.on('project', () => this.refresh());
+    this.rebuild();
+  }
+
+  /** For the check scripts: where an item's widget sits, since a number field carries no findable text. */
+  fieldAt(index: number): { x: number; y: number } | null {
+    const widget = this.fields[index];
+    if (!widget) return null;
+    const p = widget.getGlobalPosition();
+    return { x: p.x + widget.w / 2, y: p.y + widget.h / 2 };
+  }
+
+  /** For the check scripts: what the tab shows and how its rows read right now. */
+  debugInfo(): { title: string; items: string[]; kind: string } {
+    const access = this.access();
+    if (!access) return { title: '', items: [], kind: '' };
+    return {
+      title: access.title,
+      items: access.value.map((item) => String(item)),
+      kind: access.def.items,
+    };
+  }
+
+  private access(): ListAccess | null {
+    const slot = this.state.listSlot;
+    return slot ? resolveList(this.state, slot) : null;
+  }
+
+  /** Everything that decides how many rows there are and of what kind. */
+  private signatureOf(access: ListAccess | null): string {
+    return access ? `${access.title}|${access.def.items}|${access.value.length}` : '';
+  }
+
+  private refresh(): void {
+    const access = this.access();
+    if (this.signatureOf(access) !== this.signature) {
+      this.rebuild();
+      return;
+    }
+    if (!access) return;
+    this.setters.forEach((set, i) => set(access.value[i] ?? ''));
+    this.bulk.setValue(listToText(access.value, access.def.items));
+  }
+
+  private rebuild(): void {
+    const access = this.access();
+    this.signature = this.signatureOf(access);
+    this.rows.destroy({ children: true });
+    this.rows = new VStack({ padding: Theme.padding, gap: Theme.gap });
+    this.scroll.setContent(this.rows);
+    this.setters = [];
+    this.fields = [];
+
+    this.title.setText(access ? access.title : 'No list open');
+    this.count.setText(access ? `${access.value.length} items` : '');
+    this.addButton.visible = access !== null;
+    this.bulk.visible = access !== null;
+
+    if (!access) {
+      this.rows.add(new Label('Open a list from its row in the inspector.', { style: 'muted' }));
+    } else {
+      this.bulk.setValue(listToText(access.value, access.def.items));
+      access.value.forEach((item, index) => this.rows.add(this.itemRow(access, item, index)));
+      if (access.value.length === 0) this.rows.add(new Label('The list is empty.', { style: 'muted' }));
+    }
+    this.scroll.relayoutContent();
+    this.relayout();
+  }
+
+  private itemRow(access: ListAccess, item: number | string | boolean, index: number): HStack {
+    const row = new HStack({ gap: Theme.gap, align: 'center' });
+    row.minHeight = Theme.rowHeight;
+    const label = new Label(String(index), { style: 'small', align: 'right' });
+    label.minWidth = INDEX_WIDTH;
+    row.add(label);
+    const field = createField(this.ctx, itemDef(access.def.items, index), item, access.itemHandlers(index));
+    row.add(field.widget, field.grow ? 1 : 0);
+    if (!field.grow) row.add(new Spacer(), 1);
+    row.add(
+      new Button('×', {
+        variant: 'ghost',
+        width: Theme.controlHeight,
+        onClick: () => access.replace(access.value.filter((_, i) => i !== index)),
+      }),
+    );
+    this.setters.push(field.setValue);
+    this.fields.push(field.widget);
+    return row;
+  }
+
+  private addItem(): void {
+    const access = this.access();
+    if (access) access.replace([...access.value, itemDef(access.def.items, 0).default]);
+  }
+
+  private setAll(text: string): void {
+    const access = this.access();
+    if (access) access.replace(listFromText(text, access.def.items));
+  }
+}
+
+/** One item as a property definition, so the inspector's own widget renders it. */
+function itemDef(items: ListItemKind, index: number): ItemDef {
+  const key = String(index);
+  switch (items) {
+    case 'number':
+      return { key, label: key, kind: 'number', default: 0 };
+    case 'text':
+      return { key, label: key, kind: 'text', default: '' };
+    case 'boolean':
+      return { key, label: key, kind: 'boolean', default: false };
+    case 'color':
+      return { key, label: key, kind: 'color', default: 0 };
+  }
+}

src/editor/list/slot.ts

@@ -0,0 +1,155 @@
+/**
+ * Resolves a `ListSlot` to the list in it and to the two ways of writing it back. Each of the
+ * three cases is the spec the matching inspector section already uses, so an item edited in the
+ * List tab goes through the same command, the same coercion and the same undo step as the row
+ * it replaces.
+ */
+import { SetAssetPropertyCommand } from '../../core/commands/assetCommands';
+import { SetNodeParamCommand } from '../../core/commands/graphCommands';
+import { SetOverrideCommand } from '../../core/commands/sceneObjectCommands';
+import { findNode, type GraphNode } from '../../core/graph/Graph';
+import { resolveDef } from '../../core/graph/nested';
+import type { Asset } from '../../core/model/Asset';
+import { behaviorLookup } from '../../core/model/behaviorPrograms';
+import type { ObjectRef } from '../../core/model/instance';
+import { isList, type ListValue, type PropertyValue } from '../../core/model/Properties';
+import { findAsset } from '../../core/model/Project';
+import {
+  coerceListItem,
+  type PropertyDef,
+  type PropertySchema,
+  schemaForAsset,
+} from '../../core/properties/PropertySchema';
+import { resolveAssetProps } from '../../core/properties/resolve';
+import type { FieldHandlers } from '../inspector/fieldFactory';
+import { currentProps, currentRef } from '../inspector/objectQueries';
+import { previewingHandlers, type PreviewedValue } from '../inspector/previewHandlers';
+import type { EditorState, ListSlot } from '../state';
+
+export type ListDef = Extract<PropertyDef, { kind: 'list' }>;
+
+/** What the tab needs of a slot: what is in it, and the two ways of writing it back. */
+export interface ListAccess {
+  readonly def: ListDef;
+  readonly value: ListValue;
+  /** What the tab header says the list belongs to. */
+  readonly title: string;
+  /** One item, previewed and committed exactly as the inspector does it. */
+  itemHandlers(index: number): FieldHandlers;
+  /** A whole new list in one command – adding, deleting, and the bulk text field. */
+  replace(next: ListValue): void;
+}
+
+export function resolveList(state: EditorState, slot: ListSlot): ListAccess | null {
+  if (slot.kind === 'asset') return assetAccess(state, slot);
+  if (slot.kind === 'object') return objectAccess(state, slot);
+  return nodeAccess(state, slot);
+}
+
+const asList = (value: PropertyValue | undefined): ListValue => (isList(value) ? value : []);
+
+const listDefIn = (schema: PropertySchema, key: string): ListDef | null => {
+  const def = schema.find((d) => d.key === key);
+  return def?.kind === 'list' ? def : null;
+};
+
+const withItem = (list: ListValue, index: number, item: number | string | boolean): ListValue =>
+  list.map((value, i) => (i === index ? item : value));
+
+/**
+ * `current` re-resolves rather than closing over a snapshot: a preview writes into the model, so
+ * the next keystroke has to build on what is in there now, and the commit on what the restore
+ * put back. Everything else is the spec the matching inspector section already uses.
+ */
+function access<Target>(
+  state: EditorState,
+  def: ListDef,
+  title: string,
+  current: () => ListValue,
+  spec: Omit<PreviewedValue<Target>, 'toModel'>,
+): ListAccess {
+  return {
+    def,
+    title,
+    value: current(),
+    itemHandlers: (index) =>
+      previewingHandlers<Target>(
+        { state },
+        { ...spec, toModel: (input) => withItem(current(), index, coerceListItem(input, def.items)) },
+      ),
+    // No coercion here: every command behind `commit` runs the value through `coerceValue`.
+    // A preview does not, which is why `toModel` above has to.
+    replace: (next) => state.execute(spec.commit(next)),
+  };
+}
+
+function assetAccess(state: EditorState, slot: Extract<ListSlot, { kind: 'asset' }>): ListAccess | null {
+  const asset = findAsset(state.project, slot.assetId);
+  const def = asset && listDefIn(schemaForAsset(asset), slot.key);
+  if (!asset || !def) return null;
+  const at = () => findAsset(state.project, slot.assetId);
+  return access<Asset>(
+    state,
+    def,
+    `${asset.name} · ${def.label}`,
+    () => {
+      const now = at();
+      return now ? asList(resolveAssetProps(now)[slot.key]) : [];
+    },
+    {
+      target: at,
+      read: (found) => found.props[slot.key],
+      write: (found, value) => (found.props[slot.key] = value),
+      commit: (value) => new SetAssetPropertyCommand(slot.assetId, slot.key, value),
+    },
+  );
+}
+
+function objectAccess(state: EditorState, slot: Extract<ListSlot, { kind: 'object' }>): ListAccess | null {
+  const ref = currentRef(state, slot.holderId, slot.objectId);
+  const owner = ref && findAsset(state.project, ref.object.assetId);
+  const def = owner && listDefIn(schemaForAsset(owner), slot.key);
+  if (!ref || !def) return null;
+  return access<ObjectRef>(
+    state,
+    def,
+    `${ref.object.name} · ${def.label}`,
+    () => asList(currentProps(state, slot.holderId, slot.objectId)?.[slot.key]),
+    {
+      target: () => currentRef(state, slot.holderId, slot.objectId),
+      read: (found) => found.object.overrides[slot.key],
+      write: (found, value) => found.setOverride(slot.key, value),
+      remove: (found) => found.setOverride(slot.key, undefined),
+      commit: (value) => new SetOverrideCommand(slot.holderId, slot.objectId, slot.key, value),
+    },
+  );
+}
+
+function nodeAccess(state: EditorState, slot: Extract<ListSlot, { kind: 'node' }>): ListAccess | null {
+  const found = nodeIn(state, slot);
+  if (!found) return null;
+  const nodeDef = resolveDef(found.node, found.graph, behaviorLookup(state.project));
+  const def = nodeDef && listDefIn(nodeDef.params, slot.key);
+  if (!def) return null;
+  return access<GraphNode>(
+    state,
+    def,
+    `${nodeDef.label} · ${def.label}`,
+    () => asList(nodeIn(state, slot)?.node.params[slot.key] ?? def.default),
+    {
+      target: () => nodeIn(state, slot)?.node,
+      read: (node) => node.params[slot.key],
+      write: (node, value) => (node.params[slot.key] = value),
+      remove: (node) => delete node.params[slot.key],
+      commit: (value) => new SetNodeParamCommand(slot.assetId, slot.nodeId, slot.key, value),
+    },
+  );
+}
+
+/** The node together with its graph, because `resolveDef` needs both. */
+function nodeIn(state: EditorState, slot: Extract<ListSlot, { kind: 'node' }>) {
+  const asset = findAsset(state.project, slot.assetId);
+  if (asset?.type !== 'behavior') return null;
+  const node = findNode(asset.graph, slot.nodeId);
+  return node ? { node, graph: asset.graph } : null;
+}

src/editor/state.ts

@@ -26,6 +26,27 @@ export type Selection =
   | { kind: 'frame'; assetId: string; frameId: string }
   | null;
 
+/**
+ * Which list the List tab edits. Deliberately not a `Selection`: a list is not something one
+ * selects, it is a value inside something already selected, and exactly three places hold one.
+ */
+export type ListSlot =
+  | { kind: 'asset'; assetId: string; key: string }
+  | { kind: 'object'; holderId: string; objectId: string; key: string }
+  | { kind: 'node'; assetId: string; nodeId: string; key: string };
+
+export function sameSlot(a: ListSlot | null, b: ListSlot | null): boolean {
+  if (!a || !b) return a === b;
+  switch (a.kind) {
+    case 'asset':
+      return b.kind === 'asset' && b.assetId === a.assetId && b.key === a.key;
+    case 'object':
+      return b.kind === 'object' && b.holderId === a.holderId && b.objectId === a.objectId && b.key === a.key;
+    case 'node':
+      return b.kind === 'node' && b.assetId === a.assetId && b.nodeId === a.nodeId && b.key === a.key;
+  }
+}
+
 /** Builds an object selection; the last id is the primary one unless given explicitly. */
 export function objectSelection(holderId: string, objectIds: readonly string[], primary?: string): Selection {
   const picked = pickIds(objectIds, primary);
@@ -53,6 +74,8 @@ export type EditorEvent =
   /** A different project was loaded. */
   | 'load'
   | 'selection'
+  /** The List tab was pointed at another list (or at none). */
+  | 'list'
   | 'mode'
   | 'save'
   | 'notice'
@@ -75,6 +98,7 @@ export class EditorState {
   revision = 0;
   commands = new CommandStack(this.project);
   selection: Selection = null;
+  listSlot: ListSlot | null = null;
   mode: EditorMode = 'edit';
   /**
    * Play is on but the world is not being ticked. A sub-state of `mode === 'play'` rather than a
@@ -110,6 +134,7 @@ export class EditorState {
     this.revision = revision;
     this.commands = new CommandStack(project);
     this.selection = null;
+    this.listSlot = null;
     this.saveStatus = 'saved';
     this.emit('load');
     this.emit('project');
@@ -230,6 +255,19 @@ export class EditorState {
     this.emit('save');
   }
 
+  /**
+   * Points the List tab at a list. No tab knows the `Editor`, so this is how the button on a
+   * list row gets there: the state changes, the editor switches.
+   */
+  openList(slot: ListSlot | null): void {
+    if (sameSlot(this.listSlot, slot)) {
+      if (slot) this.emit('list');
+      return;
+    }
+    this.listSlot = slot;
+    this.emit('list');
+  }
+
   select(selection: Selection): void {
     // Test hooks pass the short form `{ kind: 'object', holderId, objectId }` without `objectIds`.
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition