@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/authoring/react-dom-authoring-adapter.ts

@@ -49,17 +49,14 @@
  * without importing that Object3D-shaped apparatus), and is RETAINED in the
  * document — user data is never silently dropped (AC-K4).
  *
- * Undo/redo (D-K3, AC-K6) is adapter-local (`PendingUndo`, mirroring
- * `ReactWorldAuthoringAdapter`'s pattern) and self-registers with the
- * editor-global undo timeline (`./undo-timeline.ts`) exactly like every
- * other ingest/world adapter — so Ctrl+Z reaches it while it's the active
- * session, and its entries are dropped (not misapplied) once the session
- * ends (the route's teardown calls `unregisterUndoAdapter`).
+ * The overlay is one session-scoped JSON history resource. Exact before/after
+ * documents are journaled by HistoryService and expire when this mount ends.
  */
 
 import type {
   AuthoringAdapter,
   AuthoringCapabilities,
+  AuthoringProvenance,
   BoxEditProvider,
   ColorSampleProvider,
   DOMRectLike,
@@ -73,6 +70,7 @@ import type {
   SelectionProvider,
 } from '@engine/adapter';
 import type { EditorStore } from '../editor-store';
+import { JsonHistoryResource } from '../history/json-history-resource';
 import { browserOrInlineResolver, getComputedStyleValue } from '../ui-source/inspect';
 import {
   cssColorToHex,
@@ -80,7 +78,6 @@ import {
   numericStyleValue,
   styleProp,
 } from './react-world-authoring-adapter';
-import { notifyUndoableOp, registerUndoAdapter } from './undo-timeline';
 
 /**
  * The minimal structural shape this adapter needs from a live DOM element —
@@ -234,9 +231,9 @@ export interface ReactDomAuthoringOptions {
   destination: string;
 }
 
-interface PendingUndo {
-  undo: () => void;
-  redo: () => void;
+interface ReactDomHistoryState {
+  overlay: ReactDomOverlay;
+  styles: Record<string, Record<string, string>>;
 }
 
 export class ReactDomAuthoringAdapter implements AuthoringAdapter {
@@ -250,12 +247,18 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
     persist: true,
   };
 
+  readonly provenance: AuthoringProvenance = {
+    source: 'foreign',
+    label: 'overlay',
+    detail:
+      'Unmodified ingested React game — style edits persist to an editor overlay; the game source is never written.',
+  };
+
   private readonly doc: ReactDomOverlay;
   private readonly persistFn: (overlay: ReactDomOverlay) => Promise<void>;
   private readonly destinationPath: string;
   private dirty = false;
-  private readonly undoStack: PendingUndo[] = [];
-  private readonly redoStack: PendingUndo[] = [];
+  private readonly historyResource: JsonHistoryResource<ReactDomHistoryState> | null;
   /** Synchronous-burst cache for `snapshot()` — see that method's doc. */
   private snapCache: DomTree | null = null;
   private snapInvalidationScheduled = false;
@@ -288,11 +291,22 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
     this.doc = opts.overlay;
     this.persistFn = opts.persist;
     this.destinationPath = opts.destination;
-    // This adapter IS an undo/redo target the editor-global timeline
-    // dispatches to (mirrors `ReactWorldAuthoringAdapter`'s identical call) —
-    // the caller (the ingest route's teardown) unregisters it on session end.
-    registerUndoAdapter(this);
     this.applyOverlayOnMount();
+    const history = store.projectHistory;
+    this.historyResource = history
+      ? new JsonHistoryResource({
+          history,
+          kind: 'overlay',
+          scope: 'project',
+          location: opts.destination.replace(/^\//, ''),
+          displayName: opts.destination,
+          capture: () => this.captureHistoryState(),
+          restore: async (state) => {
+            this.restoreHistoryState(state);
+            await this.persistFn(this.doc);
+          },
+        })
+      : null;
   }
 
   /**
@@ -346,6 +360,7 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
     return {
       id: n.id,
       label: labelFor(n.el, n.tag),
+      role: 'element',
       kind: n.tag,
       parentId: n.parentId,
       childIds: n.childIds,
@@ -387,13 +402,6 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
     this.doc[id] = entry;
   }
 
-  private removeOverlayEntry(id: string, prop: string): void {
-    const entry = this.doc[id];
-    if (!entry) return;
-    delete entry[prop];
-    if (Object.keys(entry).length === 0) delete this.doc[id];
-  }
-
   readonly hierarchy: HierarchyProvider = {
     roots: () => {
       const { nodes, rootIds } = this.snapshot();
@@ -443,6 +451,13 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
         // `ReactWorldAuthoringAdapter.pickable`'s identical fix and the
         // first-party `viewport-raycast.ts` locked-skip.
         if (this.lockedIds.has(node.id)) continue;
+        // The host layer is pointer-events:none at rest, so computed style
+        // would make every descendant appear non-interactive. Honor only the
+        // node's own explicit declaration: a transparent full-size wrapper
+        // must not swallow picks intended for a world below it.
+        if ((node.el.style as { pointerEvents?: unknown } | undefined)?.pointerEvents === 'none') {
+          continue;
+        }
         const rect = node.el.getBoundingClientRect?.();
         if (!rect) continue; // no live rect (test fixture, or unmounted) — never a candidate
         if (
@@ -574,9 +589,11 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
    */
   readonly boxEdit: BoxEditProvider = {
     begin: (id) => {
+      this.historyResource?.assertCanMutate();
       this.boxEditSession = { id, touched: new Map(), priorInline: new Map() };
     },
     apply: (id, patch) => {
+      this.historyResource?.assertCanMutate();
       const session = this.boxEditSession;
       if (!session || session.id !== id) return; // no open gesture for this id
       const n = this.snapshot().nodes.get(id);
@@ -626,20 +643,21 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
     touched: Map<string, string>,
     priorInline: Map<string, string>,
   ): void {
-    const entries: PendingUndo[] = [];
+    this.historyResource?.assertCanMutate();
+    const before = this.captureHistoryState();
+    const beforeStyles = before.styles[id] ?? {};
+    before.styles[id] = beforeStyles;
+    for (const [prop, value] of priorInline) beforeStyles[prop] = value;
+    let changed = false;
     for (const [prop, value] of touched) {
-      const entry = this.writeStyleEntry(id, prop, value, priorInline.get(prop));
-      if (entry) entries.push(entry);
+      changed = this.writeStyleEntry(id, prop, value) || changed;
+    }
+    if (!changed) return;
+    if (this.historyResource) {
+      void this.historyResource
+        .record(`Edit ${touched.size} Styles`, before, this.captureHistoryState())
+        .catch(() => {});
     }
-    if (entries.length === 0) return;
-    this.pushUndo({
-      undo: () => {
-        for (let i = entries.length - 1; i >= 0; i--) entries[i]!.undo();
-      },
-      redo: () => {
-        for (const entry of entries) entry.redo();
-      },
-    });
   }
 
   readonly inspector: InspectorProvider = {
@@ -689,88 +707,70 @@ export class ReactDomAuthoringAdapter implements AuthoringAdapter {
   };
 
   /**
-   * T0 (spec 27 §4, B1) — the write body extracted from {@link writeStyle}, RETURNING
-   * the resulting {@link PendingUndo} entry instead of pushing it, so a caller that
-   * writes MULTIPLE props for one logical gesture ({@link commitBoxEdit}) can compose
-   * them into a single undo entry itself. `writeStyle` (below) is now a one-line
-   * wrapper — identical behavior for its existing single-prop caller (`inspector.set`).
+   * T0 (spec 27 §4, B1) — the write body extracted from {@link writeStyle}, returning
+   * whether the overlay changed so a multi-property box gesture can record once.
    * `priorInlineOverride`, when given, is used as the captured PRE-gesture inline value
    * instead of re-reading `n.el.style` — needed because `boxEdit.apply` already mutated
    * the live inline style for preview before `end` gets here (see `boxEditSession`'s
    * doc comment). D-K2's restore-BOTH-halves invariant (inline AND overlay) is
    * unchanged — only WHERE `prevInline` comes from differs when an override is given.
    */
-  private writeStyleEntry(
-    id: string,
-    prop: string,
-    value: string,
-    priorInlineOverride?: string,
-  ): PendingUndo | null {
+  private writeStyleEntry(id: string, prop: string, value: string): boolean {
     const n = this.snapshot().nodes.get(id);
-    if (!n) return null;
-    const prevRaw =
-      priorInlineOverride !== undefined ? priorInlineOverride : styleProp(n.el.style, prop);
-    const prevInline = prevRaw == null ? '' : String(prevRaw);
-    const existingEntry = this.doc[id];
-    const hadOverlayEntry = existingEntry ? Object.hasOwn(existingEntry, prop) : false;
-    const prevOverlayValue = existingEntry?.[prop];
+    if (!n) return false;
 
     this.applyStyleToElement(n.el, prop, value);
     this.recordOverlayEntry(id, prop, value);
     this.dirty = true;
     this.store.notifyIngestEdit();
 
-    return {
-      undo: () => {
-        // Re-resolve rather than cache the element ref — the DOM is live and
-        // may have re-rendered since this entry was pushed (same discipline
-        // as `ReactWorldAuthoringAdapter.applyStyleWrite`).
-        const cur = this.snapshot().nodes.get(id);
-        if (cur) this.applyStyleToElement(cur.el, prop, prevInline);
-        if (hadOverlayEntry) this.recordOverlayEntry(id, prop, prevOverlayValue!);
-        else this.removeOverlayEntry(id, prop);
-        this.store.notifyIngestEdit();
-      },
-      redo: () => {
-        const cur = this.snapshot().nodes.get(id);
-        if (cur) this.applyStyleToElement(cur.el, prop, value);
-        this.recordOverlayEntry(id, prop, value);
-        this.store.notifyIngestEdit();
-      },
-    };
+    return true;
   }
 
   /**
    * D-K2: mutate the live element's inline style AND the overlay document,
-   * mark dirty, push an adapter-local undo entry that restores BOTH the
-   * prior inline value and the prior overlay-entry state (present, absent,
-   * or a different value) — never just one half (AC-K6).
+   * then journal the complete overlay state as one session transaction.
    */
   private writeStyle(id: string, prop: string, value: string): void {
-    const entry = this.writeStyleEntry(id, prop, value);
-    if (entry) this.pushUndo(entry);
+    this.historyResource?.assertCanMutate();
+    const before = this.captureHistoryState();
+    if (!this.writeStyleEntry(id, prop, value)) return;
+    if (this.historyResource) {
+      void this.historyResource
+        .record(`Set ${prop}`, before, this.captureHistoryState())
+        .catch(() => {});
+    }
   }
 
-  private pushUndo(entry: PendingUndo): void {
-    this.undoStack.push(entry);
-    this.redoStack.length = 0;
-    notifyUndoableOp(this);
+  dispose(): void {
+    this.historyResource?.dispose();
   }
 
-  undo(): boolean {
-    const e = this.undoStack.pop();
-    if (!e) return false;
-    e.undo();
-    this.redoStack.push(e);
-    return true;
+  private captureHistoryState(): ReactDomHistoryState {
+    const styles: ReactDomHistoryState['styles'] = {};
+    for (const [id, node] of this.snapshot().nodes) {
+      const values: Record<string, string> = {};
+      for (const { prop } of STYLE_PROPERTIES) {
+        const value = styleProp(node.el.style, prop);
+        if (value !== '') values[prop] = String(value);
+      }
+      styles[id] = values;
+    }
+    return { overlay: structuredClone(this.doc), styles };
   }
 
-  redo(): boolean {
-    const e = this.redoStack.pop();
-    if (!e) return false;
-    e.redo();
-    this.undoStack.push(e);
-    return true;
+  private restoreHistoryState(state: ReactDomHistoryState): void {
+    for (const key of Object.keys(this.doc)) delete this.doc[key];
+    Object.assign(this.doc, structuredClone(state.overlay));
+    const { nodes } = this.snapshot();
+    for (const [id, node] of nodes) {
+      const values = state.styles[id] ?? {};
+      for (const { prop } of STYLE_PROPERTIES) {
+        this.applyStyleToElement(node.el, prop, values[prop] ?? '');
+      }
+    }
+    this.dirty = true;
+    this.store.notifyIngestEdit();
   }
 
   subscribe(listener: () => void): () => void {