@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/authoring/react-inspector-section.tsx

@@ -1,3 +1,4 @@
+import { Button, Checkbox, Select, TextInput } from '../design-system';
 /**
  * React-world inspector section (C2, spec 27 §5 C2,
  * docs/unified-world-editor/27-visual-react-editing.md) — the "wire the
@@ -19,7 +20,7 @@
  * `PropertyDescriptor.group` (falling back to one flat "Style" group for an
  * adapter, like `ReactDomAuthoringAdapter`, whose descriptors declare none),
  * mapping each descriptor to the right C1 widget instead of a generic
- * `<input>` — see `widgetKindFor`'s doc comment for the exact mapping table.
+ * `<TextInput>` — see `widgetKindFor`'s doc comment for the exact mapping table.
  * `suppresses: ['properties']` replaces the shell's generic property grid
  * for a matched node (Rule zero: this section still talks to the node ONLY
  * through `adapter.inspector`/`adapter.hierarchy`, never the DOM/fiber the
@@ -39,7 +40,7 @@
  */
 
 import type { AuthoringAdapter, EditorNode, PropertyDescriptor } from '@engine/adapter';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { groupProperties } from '../components/inspector-property-grouping';
 import {
   AlignmentGrid,
@@ -71,12 +72,15 @@ import {
   TextShadowEditor,
   THEME,
 } from '../components/inspector-widgets';
+import { LABEL_COL_WIDTH } from '../components/inspector-widgets/shared';
+import { DisclosureIcon, themeVars } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import {
   type InspectorSectionProps,
   registerInspectorSections,
 } from '../inspector-section-registry';
 import { effectiveColorFromChain, getAvailableFonts } from '../ui-source/inspect';
+import type { OidEntry } from '../ui-source/oid-transform';
 import { CompositeAuthoringAdapter } from './composite-authoring-adapter';
 import { beginEyedropperSession } from './eyedropper-session';
 import { ReactDomAuthoringAdapter } from './react-dom-authoring-adapter';
@@ -294,7 +298,7 @@ function Field({
       data-testid={testId ? `${testId}-row` : undefined}
       style={{ ...rowStyle, padding: '4px 8px' }}
     >
-      <span style={{ width: 76, flexShrink: 0, fontSize: 11, color: THEME.textMuted }}>
+      <span style={{ width: LABEL_COL_WIDTH, flexShrink: 0, fontSize: 11, color: THEME.textMuted }}>
         {label}
       </span>
       <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
@@ -374,21 +378,16 @@ function GradientRow({ prop, raw, disabled, testId, commit }: KindRowProps): Rea
   if (!parsed) {
     return (
       <Field label={prop.label} testId={testId}>
-        <button
+        <Button
           type="button"
+          variant="secondary"
+          className="vgai-field-trigger"
           data-testid={testId}
           disabled={disabled}
           onClick={() => commit(prop.path, composeGradient(DEFAULT_GRADIENT))}
-          style={{
-            ...inputStyle(disabled),
-            width: '100%',
-            textAlign: 'left',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            color: THEME.textMuted,
-          }}
         >
           No gradient — click to add
-        </button>
+        </Button>
       </Field>
     );
   }
@@ -538,15 +537,15 @@ function ScrubRow({ prop, raw, disabled, testId, commit }: KindRowProps): React.
 function SelectRow({ prop, raw, disabled, testId, commit }: KindRowProps): React.ReactElement {
   return (
     <Field label={prop.label} testId={testId}>
-      <select
+      <Select
+        className="vgai-select"
         data-testid={testId}
         value={String(raw ?? '')}
         disabled={disabled}
         onChange={(e) => commit(prop.path, e.target.value)}
         style={{
-          ...inputStyle(disabled),
           width: '100%',
-          cursor: disabled ? 'not-allowed' : 'pointer',
+          ...(disabled ? { background: THEME.dynamicBg, color: THEME.dynamic } : null),
         }}
       >
         {(prop.options ?? []).map((o) => (
@@ -554,7 +553,7 @@ function SelectRow({ prop, raw, disabled, testId, commit }: KindRowProps): React
             {String(o)}
           </option>
         ))}
-      </select>
+      </Select>
     </Field>
   );
 }
@@ -564,8 +563,8 @@ function CheckboxRow({ prop, raw, disabled, testId, commit }: KindRowProps): Rea
     <label
       style={{ display: 'flex', gap: 6, alignItems: 'center', padding: '6px 8px', fontSize: 12 }}
     >
-      <input
-        type="checkbox"
+      <Checkbox
+        className="vgai-checkbox"
         data-testid={testId}
         checked={raw !== false}
         disabled={disabled}
@@ -599,7 +598,7 @@ function JsonRow({ prop, raw, disabled, testId, commit }: KindRowProps): React.R
 function TextRow({ prop, raw, disabled, testId, commit }: KindRowProps): React.ReactElement {
   return (
     <Field label={prop.label} testId={testId}>
-      <input
+      <TextInput
         type="text"
         data-testid={testId}
         readOnly={disabled}
@@ -897,6 +896,256 @@ function rowKey(row: PropertyRow): string {
   return `align:${row.justify.path}`;
 }
 
+function compactScrub(
+  adapter: AuthoringAdapter,
+  id: string,
+  prop: PropertyDescriptor | undefined,
+  label: string,
+  commit: (path: string, value: unknown) => void,
+): React.ReactElement | null {
+  if (!prop) return null;
+  const unit = UNITLESS_NUMBER_PROPS.has(propNameFromPath(prop.path)) ? '' : 'px';
+  const testId = testIdFor(prop.path);
+  return (
+    <ScrubbableInput
+      key={prop.path}
+      testId={testId}
+      label={label}
+      value={numericValue(adapter.inspector?.get(id, prop.path))}
+      unit={unit}
+      disabled={prop.readonly}
+      onChange={(value) => commit(prop.path, value)}
+      onChangeEnd={(value) => commit(prop.path, value)}
+      style={{ flex: 1, minWidth: 0 }}
+    />
+  );
+}
+
+function SemanticLayout({
+  adapter,
+  id,
+  props,
+  fonts,
+  showConstraints,
+  onToggleConstraints,
+}: {
+  adapter: AuthoringAdapter;
+  id: string;
+  props: readonly PropertyDescriptor[];
+  fonts: readonly string[];
+  showConstraints: boolean;
+  onToggleConstraints: () => void;
+}): React.ReactElement {
+  const store = useEditorStore();
+  const byName = new Map(props.map((prop) => [propNameFromPath(prop.path), prop] as const));
+  const commit = (path: string, value: unknown): void => {
+    adapter.inspector?.set(id, path, value);
+    store.notifyIngestEdit();
+  };
+  const display = String(
+    adapter.inspector?.get(id, byName.get('display')?.path ?? 'style.display') ?? '',
+  );
+  const isFlex = display === 'flex' || display === 'inline-flex';
+  const displayProp = byName.get('display');
+  const gapProp = byName.get('gap');
+  const alignRows = buildPropertyRows(
+    props.filter((prop) => ['justifyContent', 'alignItems'].includes(propNameFromPath(prop.path))),
+  );
+  const ordinary = ['flexDirection', 'flexWrap', 'overflow']
+    .map((name) => byName.get(name))
+    .filter((prop): prop is PropertyDescriptor => !!prop);
+  return (
+    <div style={{ padding: '2px 8px 7px' }}>
+      <div style={{ display: 'flex', gap: 6 }}>
+        {compactScrub(adapter, id, byName.get('width'), 'W', commit)}
+        {compactScrub(adapter, id, byName.get('height'), 'H', commit)}
+      </div>
+      {showConstraints && (
+        <div data-testid="react-layout-constraints" style={{ marginTop: 5 }}>
+          <div style={{ display: 'flex', gap: 6 }}>
+            {compactScrub(adapter, id, byName.get('minWidth'), 'Min W', commit)}
+            {compactScrub(adapter, id, byName.get('minHeight'), 'Min H', commit)}
+          </div>
+          <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
+            {compactScrub(adapter, id, byName.get('maxWidth'), 'Max W', commit)}
+            {compactScrub(adapter, id, byName.get('maxHeight'), 'Max H', commit)}
+          </div>
+        </div>
+      )}
+      <Button
+        type="button"
+        variant="ghost"
+        size="compact"
+        data-testid="react-layout-toggle-constraints"
+        onClick={onToggleConstraints}
+        style={{ display: 'flex', margin: '2px auto 5px' }}
+      >
+        {showConstraints ? '− constraints' : '··· constraints'}
+      </Button>
+      <div
+        style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 1fr)', gap: 6 }}
+      >
+        {displayProp && (
+          <Select
+            data-testid={testIdFor(displayProp.path)}
+            value={display}
+            disabled={displayProp.readonly}
+            onChange={(event) => commit(displayProp.path, event.target.value)}
+            style={{ ...inputStyle(displayProp.readonly), width: '100%', cursor: 'pointer' }}
+          >
+            {(displayProp.options ?? []).map((option) => (
+              <option key={String(option)} value={String(option)}>
+                {String(option)}
+              </option>
+            ))}
+          </Select>
+        )}
+        {compactScrub(adapter, id, gapProp, 'Gap', commit)}
+      </div>
+      {isFlex && (
+        <div data-testid="react-layout-flex-controls" style={{ marginTop: 5 }}>
+          {ordinary
+            .filter((prop) => propNameFromPath(prop.path) !== 'overflow')
+            .map((prop) => (
+              <SingleRow key={prop.path} adapter={adapter} id={id} prop={prop} fonts={fonts} />
+            ))}
+          {alignRows.map((row) =>
+            row.kind === 'single' ? (
+              <SingleRow
+                key={rowKey(row)}
+                adapter={adapter}
+                id={id}
+                prop={row.prop}
+                fonts={fonts}
+              />
+            ) : (
+              <ComboRow key={rowKey(row)} adapter={adapter} id={id} row={row} />
+            ),
+          )}
+        </div>
+      )}
+      {ordinary
+        .filter((prop) => propNameFromPath(prop.path) === 'overflow')
+        .map((prop) => (
+          <SingleRow key={prop.path} adapter={adapter} id={id} prop={prop} fonts={fonts} />
+        ))}
+    </div>
+  );
+}
+
+function SemanticPosition({
+  adapter,
+  id,
+  props,
+  fonts,
+}: {
+  adapter: AuthoringAdapter;
+  id: string;
+  props: readonly PropertyDescriptor[];
+  fonts: readonly string[];
+}): React.ReactElement {
+  const store = useEditorStore();
+  const byName = new Map(props.map((prop) => [propNameFromPath(prop.path), prop] as const));
+  const position = byName.get('position');
+  const positionValue = String(
+    position ? (adapter.inspector?.get(id, position.path) ?? 'static') : 'static',
+  );
+  const commit = (path: string, value: unknown): void => {
+    adapter.inspector?.set(id, path, value);
+    store.notifyIngestEdit();
+  };
+  const offsets = ['top', 'right', 'bottom', 'left'];
+  const itemProps = ['zIndex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf']
+    .map((name) => byName.get(name))
+    .filter((prop): prop is PropertyDescriptor => !!prop);
+  return (
+    <div style={{ padding: '2px 8px 7px' }}>
+      {position && (
+        <div
+          data-testid={testIdFor(position.path)}
+          style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 2 }}
+        >
+          {(position.options ?? []).map((option) => {
+            const value = String(option);
+            const active = value === positionValue;
+            return (
+              <Button
+                key={value}
+                type="button"
+                variant={active ? 'primary' : 'secondary'}
+                size="compact"
+                aria-pressed={active}
+                title={value}
+                disabled={position.readonly}
+                onClick={() => commit(position.path, value)}
+              >
+                {value.slice(0, 3)}
+              </Button>
+            );
+          })}
+        </div>
+      )}
+      {positionValue !== 'static' && (
+        <div
+          data-testid="react-position-offsets"
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, marginTop: 6 }}
+        >
+          {offsets.map((name) =>
+            compactScrub(adapter, id, byName.get(name), name[0]!.toUpperCase(), commit),
+          )}
+        </div>
+      )}
+      {itemProps.length > 0 && (
+        <div style={{ borderTop: `1px solid ${THEME.border}`, marginTop: 7, paddingTop: 3 }}>
+          <div style={{ color: THEME.textMuted, fontSize: 9, padding: '2px 0 1px' }}>
+            STACKING &amp; FLEX ITEM
+          </div>
+          {itemProps.map((prop) => (
+            <SingleRow key={prop.path} adapter={adapter} id={id} prop={prop} fonts={fonts} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SemanticSpacing({
+  adapter,
+  id,
+  props,
+}: {
+  adapter: AuthoringAdapter;
+  id: string;
+  props: readonly PropertyDescriptor[];
+}): React.ReactElement {
+  const store = useEditorStore();
+  const byName = new Map(props.map((prop) => [propNameFromPath(prop.path), prop] as const));
+  const commit = (path: string, value: unknown): void => {
+    adapter.inspector?.set(id, path, value);
+    store.notifyIngestEdit();
+  };
+  const cells = [
+    ['marginTop', 'M T'],
+    ['marginRight', 'M R'],
+    ['marginBottom', 'M B'],
+    ['marginLeft', 'M L'],
+    ['paddingTop', 'P T'],
+    ['paddingRight', 'P R'],
+    ['paddingBottom', 'P B'],
+    ['paddingLeft', 'P L'],
+  ] as const;
+  return (
+    <div style={{ padding: '2px 8px 8px' }}>
+      <div style={{ color: THEME.textMuted, fontSize: 9, marginBottom: 4 }}>
+        MARGIN · OUTSIDE / PADDING · INSIDE
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+        {cells.map(([name, label]) => compactScrub(adapter, id, byName.get(name), label, commit))}
+      </div>
+    </div>
+  );
+}
+
 function GroupBlock({
   name,
   groupId,
@@ -912,31 +1161,142 @@ function GroupBlock({
   id: string;
   fonts: readonly string[];
 }): React.ReactElement {
+  const [collapsed, setCollapsed] = useState(false);
+  const [showConstraints, setShowConstraints] = useState(false);
   const rows = buildPropertyRows(props);
   return (
     <div
       data-testid={`react-inspector-group-${groupId}`}
       style={{ borderTop: `1px solid ${THEME.border}`, marginTop: 4 }}
     >
-      <div
-        style={{
-          fontSize: 11,
-          fontWeight: 600,
-          color: THEME.textMuted,
-          padding: '6px 8px 2px',
-          textTransform: 'uppercase',
-          letterSpacing: 0.4,
-        }}
+      <Button
+        type="button"
+        variant="ghost"
+        className="vgai-inspector-group-trigger"
+        aria-expanded={!collapsed}
+        onClick={() => setCollapsed((value) => !value)}
       >
-        {name}
-      </div>
-      {rows.map((row) =>
-        row.kind === 'single' ? (
-          <SingleRow key={rowKey(row)} adapter={adapter} id={id} prop={row.prop} fonts={fonts} />
-        ) : (
-          <ComboRow key={rowKey(row)} adapter={adapter} id={id} row={row} />
-        ),
+        <span
+          aria-hidden="true"
+          style={{ display: 'inline-flex', justifyContent: 'center', width: 8 }}
+        >
+          <DisclosureIcon direction={collapsed ? 'right' : 'down'} />
+        </span>
+        <span>{name}</span>
+      </Button>
+      {!collapsed && name === 'Layout' && (
+        <SemanticLayout
+          adapter={adapter}
+          id={id}
+          props={props}
+          fonts={fonts}
+          showConstraints={showConstraints}
+          onToggleConstraints={() => setShowConstraints((value) => !value)}
+        />
+      )}
+      {!collapsed && name === 'Position' && (
+        <SemanticPosition adapter={adapter} id={id} props={props} fonts={fonts} />
+      )}
+      {!collapsed && name === 'Spacing' && (
+        <SemanticSpacing adapter={adapter} id={id} props={props} />
       )}
+      {!collapsed &&
+        name !== 'Layout' &&
+        name !== 'Position' &&
+        name !== 'Spacing' &&
+        rows.map((row) =>
+          row.kind === 'single' ? (
+            <SingleRow key={rowKey(row)} adapter={adapter} id={id} prop={row.prop} fonts={fonts} />
+          ) : (
+            <ComboRow key={rowKey(row)} adapter={adapter} id={id} row={row} />
+          ),
+        )}
+    </div>
+  );
+}
+
+function BreadcrumbBar({
+  adapter,
+  node,
+}: {
+  adapter: AuthoringAdapter;
+  node: EditorNode;
+}): React.ReactElement {
+  const chain: EditorNode[] = [];
+  let current: EditorNode | null = node;
+  let guard = 0;
+  while (current && guard++ < 100) {
+    chain.unshift(current);
+    current = current.parentId ? adapter.hierarchy.node(current.parentId) : null;
+  }
+  return (
+    <nav
+      aria-label="Selection ancestry"
+      data-testid="react-inspector-breadcrumbs"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+        padding: '6px 8px',
+        overflowX: 'auto',
+        borderBottom: `1px solid ${THEME.border}`,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {chain.map((entry, index) => (
+        <span key={entry.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
+          {index > 0 && <span style={{ color: THEME.textMuted }}>/</span>}
+          <Button
+            type="button"
+            variant="ghost"
+            size="compact"
+            aria-current={entry.id === node.id ? 'page' : undefined}
+            title={entry.secondaryLabel ?? entry.label}
+            onClick={() => adapter.selection?.set([entry.id])}
+          >
+            {entry.label}
+          </Button>
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function StoryActions({
+  owner,
+  node,
+}: {
+  owner: ReactWorldAuthoringAdapter;
+  node: EditorNode;
+}): React.ReactElement {
+  const args = owner.portableArgs(node.id);
+  return (
+    <div
+      data-testid="react-story-controls-header"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        padding: '7px 8px',
+        borderBottom: `1px solid ${THEME.border}`,
+      }}
+    >
+      <div style={{ minWidth: 0 }}>
+        <div style={{ color: THEME.text, fontSize: 12, fontWeight: 600 }}>{node.label}</div>
+        <div style={{ color: THEME.textMuted, fontSize: 10 }}>
+          {args ? `${Object.keys(args).length} args · session controls` : 'Portable CSF story'}
+        </div>
+      </div>
+      <Button
+        type="button"
+        variant="secondary"
+        size="compact"
+        data-testid="react-story-reset-args"
+        onClick={() => owner.resetPortableArgs(node.id)}
+      >
+        Reset
+      </Button>
     </div>
   );
 }
@@ -949,38 +1309,111 @@ function GroupBlock({
  *  `data-oid` component-source writes); a `ReactDomAuthoringAdapter`
  *  (ingested, overlay-only — never touches source) gets its own honest note
  *  instead, so neither lane's write model is ever misrepresented. */
+/**
+ * C4 (spec §9): "the editor offers open/copy-path/go-to-line operations" for a DOM
+ * element's mapped source location. Read-only — this ONLY surfaces where the source is
+ * and copies a `file:line` locator; it has no write path (that stays SourceWriteBackend's
+ * bounded style/className/text/struct ops, wired elsewhere). `open` degrades honestly to
+ * copy-path when no editor-launch protocol is configured (documented fallback, not a
+ * silent no-op): most terminals/OS shells don't register a handler for arbitrary custom
+ * URI schemes, so we copy a `vscode://file/<abs>:<line>` link users can paste, rather than
+ * assume a scheme is registered and fail silently if it isn't.
+ */
+function SourceLocationRow({ entry }: { entry: OidEntry }): React.ReactElement {
+  const [copied, setCopied] = useState<'path' | 'link' | null>(null);
+  const filePath = `${entry.file}:${entry.line}`;
+  const copy = async (text: string, kind: 'path' | 'link'): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(kind);
+      setTimeout(() => setCopied(null), 1500);
+    } catch {
+      // Clipboard API unavailable (permissions/non-secure context) — the row still shows
+      // the path as selectable text, so the user can copy it manually.
+    }
+  };
+  return (
+    <div
+      data-testid="react-source-location"
+      style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}
+    >
+      <code style={{ fontFamily: FONT_MONO, color: THEME.textMuted }}>{filePath}</code>
+      <Button
+        type="button"
+        data-testid="source-copy-path"
+        onClick={() => void copy(filePath, 'path')}
+        style={{ width: 'auto' }}
+      >
+        {copied === 'path' ? 'Copied' : 'Copy path'}
+      </Button>
+      <Button
+        type="button"
+        data-testid="source-open"
+        title="Copies a vscode://file link (go-to-line) — no in-editor open protocol is wired yet"
+        onClick={() => void copy(`vscode://file/${entry.file}:${entry.line}`, 'link')}
+        style={{ width: 'auto' }}
+      >
+        {copied === 'link' ? 'Copied' : 'Open (copy link)'}
+      </Button>
+    </div>
+  );
+}
+
 function LaneDisclosure({
   owner,
   node,
+  nodeId,
 }: {
   owner: ReactWorldAuthoringAdapter | ReactDomAuthoringAdapter;
   node: EditorNode | null;
+  nodeId: string;
 }): React.ReactElement {
   const isLaneB = owner instanceof ReactWorldAuthoringAdapter;
+  // C4: only Lane B (the OID/JSX source-writer path) has a source-location mapping —
+  // Lane A (`ReactDomAuthoringAdapter`, an ingested/overlay session) never stamps
+  // `data-oid` or has an OID index (see its file doc comment), so it has nothing to
+  // resolve here; that's the intended DOM-only degradation, not a bug.
+  const sourceEntry = isLaneB ? owner.sourceLocation(nodeId) : undefined;
+  const semanticCopy =
+    node?.role === 'story' ? (
+      <>
+        <strong style={{ color: THEME.accent }}>Story preview.</strong>{' '}
+        <code style={{ fontFamily: FONT_MONO }}>{node.label}</code> is the active portable CSF
+        design state.
+      </>
+    ) : node?.role === 'document' ? (
+      <>
+        <strong style={{ color: THEME.accent }}>CSF document.</strong>{' '}
+        <code style={{ fontFamily: FONT_MONO }}>{node.secondaryLabel ?? node.label}</code> owns this
+        root's design states.
+      </>
+    ) : null;
   return (
     <div
       data-testid={isLaneB ? 'react-lane-b-disclosure' : 'react-overlay-disclosure'}
       style={{
         padding: 8,
         borderBottom: `1px solid ${THEME.border}`,
-        background: isLaneB ? 'rgba(59,130,246,0.08)' : 'rgba(255,255,255,0.04)',
+        background: isLaneB ? themeVars.accent.muted : THEME.neutralHover,
         color: THEME.text,
         fontSize: 11,
         lineHeight: 1.5,
       }}
     >
-      {isLaneB ? (
-        <>
-          <strong style={{ color: THEME.accent }}>Component source.</strong> Edits change{' '}
-          <code style={{ fontFamily: FONT_MONO }}>{node?.label ?? 'this component'}</code>'s source
-          — every rendered instance updates.
-        </>
-      ) : (
-        <>
-          <strong style={{ color: THEME.textMuted }}>Session overlay (ingested game).</strong> Edits
-          are NOT written to source — they persist as a per-project overlay only.
-        </>
-      )}
+      {semanticCopy ??
+        (isLaneB ? (
+          <>
+            <strong style={{ color: THEME.accent }}>Component source.</strong> Edits change{' '}
+            <code style={{ fontFamily: FONT_MONO }}>{node?.label ?? 'this component'}</code>'s
+            source — every rendered instance updates.
+          </>
+        ) : (
+          <>
+            <strong style={{ color: THEME.textMuted }}>Session overlay (ingested game).</strong>{' '}
+            Edits are NOT written to source — they persist as a per-project overlay only.
+          </>
+        ))}
+      {sourceEntry && <SourceLocationRow entry={sourceEntry} />}
     </div>
   );
 }
@@ -1008,7 +1441,11 @@ function ReactPropertiesSection({
 
   return (
     <div data-testid="react-inspector-section">
-      <LaneDisclosure owner={owner} node={node} />
+      <BreadcrumbBar adapter={adapter} node={node!} />
+      {node?.role === 'story' && owner instanceof ReactWorldAuthoringAdapter && (
+        <StoryActions owner={owner} node={node} />
+      )}
+      <LaneDisclosure owner={owner} node={node} nodeId={nodeId} />
       {ungrouped.length > 0 && (
         <GroupBlock
           name="Style"
@@ -1037,5 +1474,6 @@ function ReactPropertiesSection({
 registerInspectorSections({
   match: isReactDomSelection,
   Section: ReactPropertiesSection,
-  suppresses: ['properties'],
+  panelName: 'React Inspector',
+  suppresses: ['header', 'transform', 'properties', 'components'],
 });