Mark overrides in gold instead of bold, and up the hierarchy

An inspector label whose value deviates from its base was drawn bold, which is
easy to miss next to the regular labels and says nothing in the hierarchy, where
a folded subtree could hide a change entirely.

The colour now lives as a theme token (`override`, #f2c84b) used by both the
inspector labels and the hierarchy rows. Whether a row deviates is decided by
`src/core/properties/deviation.ts`: `objectDeviates` compares an object against
what it follows -- the container template for content, the asset otherwise --
and `deviationMarks` carries the mark up to every ancestor, so a folded subtree
still shows that something inside was changed.

`deviationMarks` takes the stored holder, not the resolved one: in the resolved
view container content looks like an ordinary object and `instanceTargetOf`
would compare against the asset, marking every instance.

Covered by 3 unit tests and 5 e2e checks, including one that strips an object's
own overrides to prove the row stays gold for a deviating child and restores
them byte for byte. Full suite remote on the RTX 4070: 275 checks, all passed.

src/core/properties/deviation.ts

@@ -0,0 +1,41 @@
+import { ancestorIdsOf, type ObjectTree } from '../model/hierarchy';
+import { instanceTargetOf, isEmptyEdit, resolveObjects } from '../model/instance';
+import { findAsset, type Project } from '../model/Project';
+import type { SceneObject } from '../model/SceneObject';
+import { schemaForAsset } from './PropertySchema';
+import { deviatesFromAsset } from './resolve';
+
+/**
+ * Whether a placed object deviates from whatever it follows: the container template it was
+ * resolved from, or its asset. `holder` must be the stored holder – what an object follows is
+ * decided by where it lives, and in a resolved view everything looks stored.
+ */
+export function objectDeviates(project: Project, holder: ObjectTree, object: SceneObject): boolean {
+  const target = instanceTargetOf(project, holder, object.id);
+  if (target) {
+    // Instance edits are pruned to what really deviates, so their presence is the answer.
+    const edit = target.instance.instanceEdits[target.path];
+    return edit !== undefined && !isEmptyEdit(edit);
+  }
+  if (object.editorOffset.x !== 0 || object.editorOffset.y !== 0) return true;
+  const asset = findAsset(project, object.assetId);
+  return (
+    asset !== undefined && schemaForAsset(asset).some((def) => deviatesFromAsset(object, asset, def.key))
+  );
+}
+
+/**
+ * Ids the hierarchy marks: everything deviating itself, plus every ancestor of one. The ancestors
+ * matter because subtrees fold – without them a collapsed row would hide that something below it
+ * was changed.
+ */
+export function deviationMarks(project: Project, holder: ObjectTree): Set<string> {
+  const view: ObjectTree = { objects: resolveObjects(project, holder) };
+  const marks = new Set<string>();
+  for (const object of view.objects) {
+    if (!objectDeviates(project, holder, object)) continue;
+    marks.add(object.id);
+    for (const ancestorId of ancestorIdsOf(view, object.id)) marks.add(ancestorId);
+  }
+  return marks;
+}

src/editor/debugHook.ts

@@ -1,4 +1,4 @@
-import { type Application, type Container, Rectangle, Text } from 'pixi.js';
+import { type Application, Color, type ColorSource, type Container, Rectangle, Text } from 'pixi.js';
 import { resolveObjects } from '../core/model/instance';
 import { findObjectHolder } from '../core/model/Project';
 import { Button, ui, Widget } from '../ui';
@@ -34,6 +34,20 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     const p = node.getGlobalPosition();
     return { x: p.x + node.width / 2, y: p.y + node.height / 2 };
   };
+  /** Fill colour of a visible text, as `#rrggbb` – what tells an override label from a plain one. */
+  const textColor = (text: string): string | null => {
+    let found: string | null = null;
+    const walk = (node: Container): void => {
+      if (found !== null || !node.visible) return;
+      if (node instanceof Text && node.text === text) {
+        found = new Color(node.style.fill as ColorSource).toHex();
+        return;
+      }
+      for (const child of node.children) walk(child);
+    };
+    walk(app.stage);
+    return found;
+  };
   /**
    * The visible text of the overlay layer, in drawing order – everything an open popup shows.
    * Menus hide filtered-out entries, so this is also what a search box currently leaves.
@@ -118,6 +132,7 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     objectsOf,
     sceneObjects: () => (state.activeScene ? objectsOf(state.activeScene.id) : []),
     locate,
+    textColor,
     overlayTexts,
     overlayRect,
     textOverflows,
@@ -159,6 +174,7 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
     /** Rows the hierarchy shows – collapsed subtrees are not in here. */
     hierarchyOrder: () => hierarchy.rowOrder(),
     hierarchyChevron: (id: string) => hierarchy.chevronPosition(id),
+    hierarchyRowColor: (id: string) => hierarchy.rowColor(id),
     hierarchyExpandAll: () => hierarchy.expandAll(),
     hierarchyCollapseAll: () => hierarchy.collapseAll(),
     /** The colour actually on screen at a point, as `#rrggbb` – what was drawn, not what the model says. */

src/editor/inspector/fieldFactory.ts

@@ -46,7 +46,7 @@ export interface FieldRow {
   /** Push a model value into the widget (no events fired). */
   setValue(value: PropertyValue): void;
   /**
-   * Highlight the row as deviating from its base value (an override on scene objects, a
+   * Colour the label as deviating from its base value (an override on scene objects, a
    * non-default value on assets) and re-evaluate which actions currently apply.
    */
   setModified(modified: boolean): void;
@@ -154,7 +154,7 @@ export function createFieldRow(
     row,
     setValue: field.setValue,
     setModified(modified) {
-      label.setStyle(modified ? 'bodyBold' : 'muted');
+      label.setStyle(modified ? 'override' : 'muted');
       refreshActions();
     },
   };

src/editor/inspector/objectSection.ts

@@ -474,7 +474,7 @@ function parentRow(host: InspectorHost, holder: ObjectHolder, object: SceneObjec
 }
 
 /**
- * Bold marks exactly what the ↺/↑ buttons offer: for content of a placed container a deviation
+ * Gold marks exactly what the ↺/↑ buttons offer: for content of a placed container a deviation
  * from the template (position per axis, overrides), for any other object one from the asset. The
  * editor offset has one base only – no offset at all.
  */

src/editor/panels/HierarchyPanel.ts

@@ -6,6 +6,7 @@ import { hasColorSwatch } from '../../core/model/AssetTypes';
 import { ancestorIdsOf, childIdsOf, findObject, visibleTreeOrder } from '../../core/model/hierarchy';
 import { isLiveInstance, isTemplateContent, resolvedHolder } from '../../core/model/instance';
 import { findAsset, type ObjectHolder } from '../../core/model/Project';
+import { deviationMarks } from '../../core/properties/deviation';
 import { resolveSceneObjectProps } from '../../core/properties/resolve';
 import { type DropSpot, ListView, Menu, Panel, ScrollContainer } from '../../ui';
 import { addCollider, createContainer, removeObjects } from '../actions';
@@ -18,6 +19,9 @@ import { type EditorState, objectSelection } from '../state';
  * siblings, or onto the empty space below the rows to move it to the top level. The object keeps
  * its world position every time.
  *
+ * A row's name turns gold when the object deviates from what it follows – its container template
+ * or its asset – or when anything below it does, so a folded subtree still shows it.
+ *
  * Rows with children fold: the chevron (or ←/→, or a double-click on the row) toggles them.
  * Everything starts collapsed – which ids are open is view state kept here, never part of the
  * project, and selecting an object always unfolds the way down to it.
@@ -128,6 +132,11 @@ export class HierarchyPanel extends Panel {
     return holder ? visibleTreeOrder(holder, this.expanded).map((e) => e.object.id) : [];
   }
 
+  /** Label colour of a row as `#rrggbb` – gold means it or something below it deviates (test hook). */
+  rowColor(id: string): string | null {
+    return this.list.rowColor(id);
+  }
+
   /** Global centre of a row's chevron, so tests can click the real hit area (test hook). */
   chevronPosition(id: string): { x: number; y: number } | null {
     return this.list.chevronGlobal(id);
@@ -226,6 +235,10 @@ export class HierarchyPanel extends Panel {
     this.shownHolderId = holder?.id ?? '';
     const kind = holder?.type === 'container' ? 'Container' : 'Scene';
     this.setTitle(holder ? `${kind}: ${holder.name}` : 'Scene objects');
+    // From the stored holder, not the resolved one: what an object follows depends on where it
+    // lives, and in a resolved view container content looks stored.
+    const source = this.source();
+    const marks = source ? deviationMarks(this.state.project, source) : new Set<string>();
     this.list.setItems(
       (holder ? visibleTreeOrder(holder, this.expanded) : []).map(({ object, depth, hasChildren }) => {
         const asset = findAsset(this.state.project, object.assetId);
@@ -237,6 +250,7 @@ export class HierarchyPanel extends Panel {
           depth,
           swatch: asset && hasColorSwatch(asset.type) ? Number(props.color ?? 0) : undefined,
           expanded: hasChildren ? this.expanded.has(object.id) : undefined,
+          overridden: marks.has(object.id),
         };
       }),
     );

src/ui/Theme.ts

@@ -41,6 +41,8 @@ export const Theme = {
     trigger: 0xf2c84b,
     container: 0x3fb8c9,
     marquee: 0x4c8dff,
+    /** A value deviating from what it follows: an override on a placed object, a non-default on an asset. */
+    override: 0xf2c84b,
     /** Node graph: canvas, node chrome, per-category title colors, port colors, live highlight. */
     graphBackground: 0x15171b,
     node: 0x262a32,
@@ -67,6 +69,7 @@ export type TextStyleToken =
   | 'body'
   | 'bodyBold'
   | 'muted'
+  | 'override'
   | 'small'
   | 'title'
   | 'mono'
@@ -89,6 +92,9 @@ export function textStyle(token: TextStyleToken = 'body'): TextStyle {
     case 'muted':
       style = new TextStyle({ ...base, fill: Theme.colors.textMuted });
       break;
+    case 'override':
+      style = new TextStyle({ ...base, fill: Theme.colors.override });
+      break;
     case 'small':
       style = new TextStyle({ ...base, fontSize: Theme.smallFontSize, fill: Theme.colors.textMuted });
       break;

src/ui/widgets/ListRow.ts

@@ -1,4 +1,4 @@
-import { Graphics, Text } from 'pixi.js';
+import { Color, type ColorSource, Graphics, Text } from 'pixi.js';
 import { drawControlBox } from '../draw';
 import { centreY } from '../math';
 import { Theme, textStyle } from '../Theme';
@@ -25,6 +25,7 @@ export class ListRow extends Widget {
     super();
     this.cursor = 'pointer';
     this.minHeight = height;
+    if (item.overridden) this.labelText.style = textStyle('override');
     this.addChild(this.bg, this.labelText, this.hint);
     this.trackHover();
   }
@@ -37,6 +38,11 @@ export class ListRow extends Widget {
     this.invalidate();
   }
 
+  /** Fill of the label as `#rrggbb` – tells a marked row from a plain one (test hook). */
+  get labelColor(): string {
+    return new Color(this.labelText.style.fill as ColorSource).toHex();
+  }
+
   /** Left edge of the chevron slot (or of the content itself in a flat list). */
   private get indent(): number {
     return Theme.padding + (this.item.depth ?? 0) * Theme.treeIndent;

src/ui/widgets/ListView.ts

@@ -16,6 +16,8 @@ export interface ListItem {
   swatch?: number;
   /** Whether the subtree is shown; such rows get a chevron. Left undefined for leaves. */
   expanded?: boolean;
+  /** Draws the label in the override colour – the row, or something inside it, deviates. */
+  overridden?: boolean;
 }
 
 /** Pixels of travel before a press turns into a drag. */
@@ -129,6 +131,11 @@ export class ListView extends Widget {
     this.redraw();
   }
 
+  /** Label colour of a row as `#rrggbb`; null when no such row is shown (test hook). */
+  rowColor(id: string): string | null {
+    return this.rows.find((r) => r.item.id === id)?.labelColor ?? null;
+  }
+
   /** Global centre of a row's chevron; null when the row has none. */
   chevronGlobal(id: string): { x: number; y: number } | null {
     return this.rows.find((r) => r.item.id === id)?.chevronGlobal() ?? null;