@1agh/maude 0.36.0 → 0.36.1

package/apps/studio/canvas-shell.tsx

@@ -47,6 +47,12 @@ import {
   useViewportControllerContext,
   type ViewportControllerHandle,
 } from './canvas-lib.tsx';
+import {
+  buildEditSourceRecord,
+  type EditSourceApplyFn,
+  type EditSourceOp,
+  type EditSourcePayload,
+} from './commands/edit-source-command.ts';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import {
   ContextMenuProvider,
@@ -92,7 +98,7 @@ import {
   useSelectionSet,
 } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
-import { useUndoStack } from './use-undo-stack.tsx';
+import { useUndoSinks, useUndoStack } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles — halos render as `position: fixed` siblings of the canvas. Reading
@@ -1372,6 +1378,28 @@ function CanvasRouter({
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
   const undoStack = useUndoStack();
+  const undoSinks = useUndoSinks();
+  // Latest undo stack, read inside long-lived listeners (text-edit dblclick)
+  // without making them a hook dependency — avoids re-binding on every undo op.
+  const undoStackRef = useRef(undoStack);
+  undoStackRef.current = undoStack;
+
+  // Phase: inline-edit undo (DDR-103/104 follow-up). Wire the `editSourceApplyFn`
+  // sink so an `edit-source` command's do()/undo() reaches the main-origin-only
+  // `/_api/edit-*` write — which the untrusted canvas iframe can't call (DDR-054).
+  // It posts `dgn:'apply-edit'` to the parent shell, which performs the write.
+  useEffect(() => {
+    const applyFn: EditSourceApplyFn = (apply) => {
+      try {
+        window.parent.postMessage({ dgn: 'apply-edit', ...apply }, '*');
+      } catch {
+        /* detached / cross-origin teardown — nothing to apply */
+      }
+    };
+    undoSinks.setSink('editSourceApplyFn', applyFn);
+    return () => undoSinks.setSink('editSourceApplyFn', undefined);
+  }, [undoSinks]);
+
   // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
   const zoomController = useViewportControllerContext();
   // Shell View-menu chrome-visibility bridge (dgn:'view-chrome') — minimap /
@@ -1520,6 +1548,35 @@ function CanvasRouter({
         }
         return;
       }
+      // Inline-edit undo (DDR-103/104 follow-up). The shell's inspector posts
+      // this AFTER it has applied a CSS / attribute edit (`/_api/edit-css` /
+      // `/_api/edit-attr`), so we RECORD it onto the in-canvas undo stack
+      // (append without re-running do() — the edit already landed) and Cmd+Z
+      // can invert it. Inline TEXT edits originate in this iframe and record
+      // themselves directly (see commitEdit). PARENT-ORIGIN ONLY (DDR-054):
+      // a hostile canvas self-post must not be able to plant fake undo entries.
+      if (m.dgn === 'record-edit') {
+        if (e.source !== window.parent) return;
+        const p = (m as { payload?: Partial<EditSourcePayload> }).payload;
+        if (
+          p &&
+          (p.op === 'css' || p.op === 'text' || p.op === 'attr') &&
+          typeof p.canvas === 'string' &&
+          typeof p.id === 'string'
+        ) {
+          undoStack.record(
+            buildEditSourceRecord({
+              op: p.op as EditSourceOp,
+              canvas: p.canvas,
+              id: p.id,
+              key: typeof p.key === 'string' ? p.key : '',
+              before: typeof p.before === 'string' ? p.before : null,
+              after: typeof p.after === 'string' ? p.after : null,
+            })
+          );
+        }
+        return;
+      }
       if (m.dgn === 'request-layers') {
         postLayersTree((m as { artboardId?: string }).artboardId ?? null);
         return;
@@ -1605,11 +1662,25 @@ function CanvasRouter({
       if (text === original.trim()) return;
       const cdId = elx.getAttribute('data-cd-id');
       if (!cdId) return;
+      const file = deriveFile();
       try {
-        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file: deriveFile(), text }, '*');
+        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file, text }, '*');
       } catch {
         /* detached / cross-origin */
       }
+      // Record onto the in-canvas undo stack so Cmd+Z reverts the rewrite. The
+      // edit already posted above (record, don't re-run do()). before/after are
+      // the trimmed bodies the edit-text endpoint persists.
+      undoStackRef.current.record(
+        buildEditSourceRecord({
+          op: 'text',
+          canvas: file,
+          id: cdId,
+          key: '',
+          before: original.trim(),
+          after: text,
+        })
+      );
     }
     const onDbl = (e: MouseEvent): void => {
       if (editing) return;

package/apps/studio/client/app.jsx

@@ -4156,7 +4156,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
-function CssKnobs({ el, cfg, onOptimistic }) {
+function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
   const editable = !!el.id;
   const computed = el.computed || {};
   // Phase 12.3 — optimistic local overlay over the selection's authored / custom
@@ -4248,47 +4248,88 @@ function CssKnobs({ el, cfg, onOptimistic }) {
       value,
     });
   };
+  // Record an inline edit onto the canvas undo stack (Cmd+Z). The edit has
+  // already POSTed `/_api/edit-*`; the canvas iframe APPENDS the record (no
+  // re-run). `before`/`after` null = the prop/attr was/becomes unset.
+  const record = (op, key, before, after) => {
+    onRecordEdit?.({
+      op,
+      canvas: el.file,
+      id: el.id,
+      key,
+      before: before == null || before === '' ? null : before,
+      after: after == null || after === '' ? null : after,
+    });
+  };
   const commit = (property, raw) => {
     const value = (raw || '').trim();
     if (!editable || !value) return;
-    if (value === (authored[property] ?? '').trim()) return; // no-op
+    const before = authored[property] ?? null;
+    if (value === (before ?? '').trim()) return; // no-op
     optimistic(property, value);
     setA(property, value); // reflect in the panel immediately (no reload → no reselect)
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, value }, property);
+    record('css', property, before, value);
   };
   // A custom CSS property (Advanced) — same write, but the panel surfaces it from
   // the customStyles map, so overlay THERE.
   const commitCustom = (property, raw) => {
     const value = (raw || '').trim();
-    if (!editable || !property.trim() || !value) return;
-    optimistic(property.trim(), value);
-    setC(property.trim(), value);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property: property.trim(), value }, property.trim());
+    const prop = property.trim();
+    if (!editable || !prop || !value) return;
+    const before = customStyles[prop] ?? null;
+    optimistic(prop, value);
+    setC(prop, value);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property: prop, value }, prop);
+    record('css', prop, before, value);
   };
   const commitAttr = (attr, raw) => {
     const a = (attr || '').trim();
     const value = (raw || '').trim();
     if (!editable || !a || !value) return;
+    const before = attrs[a] ?? null;
     setT(a, value);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr: a, value }, `@${a}`);
+    record('attr', a, before, value);
   };
   // Phase 12.3 — reset (remove the inline prop / attr → back to class/inherited).
   const reset = (property) => {
     if (!editable) return;
+    const before = authored[property] ?? null;
     optimistic(property, null);
     setA(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetCustom = (property) => {
     if (!editable) return;
+    const before = customStyles[property] ?? null;
     optimistic(property, null);
     setC(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetAttr = (attr) => {
     if (!editable) return;
+    const before = attrs[attr] ?? null;
     setT(attr, null);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
+    record('attr', attr, before, null);
+  };
+  // Cmd+Z / Cmd+Shift+Z (or Cmd+Y) inside the inspector forwards to the canvas
+  // undo stack — Figma-parity: a property field reverts the last DOCUMENT edit,
+  // not field text. Without this, an edit committed with focus still in the
+  // inspector couldn't be undone (the iframe's own keydown never sees the key).
+  const onKnobKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+    const k = e.key.toLowerCase();
+    if (k === 'z') {
+      e.preventDefault();
+      onUndoRedo?.(e.shiftKey ? 'redo' : 'undo');
+    } else if (k === 'y') {
+      e.preventDefault();
+      onUndoRedo?.('redo');
+    }
   };
   // Phase 12.3 (W2.2) — Figma/Webflow scrub: drag a number field horizontally to
   // change its value. Live preview via optimistic apply on every move (no source
@@ -4726,7 +4767,7 @@ function CssKnobs({ el, cfg, onOptimistic }) {
   const attrRows = Object.entries(attrs);
 
   return (
-    <div className="st-cp" key={el.id} data-tour="css-panel">
+    <div className="st-cp" key={el.id} data-tour="css-panel" onKeyDown={onKnobKeyDown}>
       <div className="st-cp-id">
         <span className="st-cp-idtag">
           {el.tag || 'element'}
@@ -5272,6 +5313,8 @@ function InspectorPanel({
   onHoverLayer,
   cfg,
   onOptimistic,
+  onRecordEdit,
+  onUndoRedo,
   tab: tabProp,
   onTabChange,
   width,
@@ -5445,7 +5488,13 @@ function InspectorPanel({
             )}
           </>
         ) : (
-          <CssKnobs el={el} cfg={cfg} onOptimistic={onOptimistic} />
+          <CssKnobs
+            el={el}
+            cfg={cfg}
+            onOptimistic={onOptimistic}
+            onRecordEdit={onRecordEdit}
+            onUndoRedo={onUndoRedo}
+          />
         )}
       </div>
     </aside>
@@ -6538,6 +6587,47 @@ function App() {
             if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
           })
           .catch(() => {});
+      } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
+        // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
+        // `edit-source` command can't call the main-origin-only `/_api/edit-*`
+        // routes (DDR-054), so it asks us to re-apply the before/after value.
+        // `value` null = reset (remove the inline prop / attr). For CSS we also
+        // optimistically repaint so the revert shows before the HMR reload.
+        const op = m.op;
+        const value = typeof m.value === 'string' ? m.value : null;
+        let url;
+        let body;
+        if (op === 'css') {
+          url = '/_api/edit-css';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, property: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, property: m.key, value };
+          applyOptimisticStyle({ id: m.id, prop: m.key, value });
+        } else if (op === 'attr') {
+          url = '/_api/edit-attr';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, attr: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, attr: m.key, value };
+        } else {
+          url = '/_api/edit-text';
+          body = { canvas: m.canvas, id: m.id, text: value ?? '' };
+        }
+        editApplyChainRef.current = editApplyChainRef.current
+          .catch(() => {})
+          .then(() =>
+            fetch(url, {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((j) => {
+                if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
+              })
+              .catch(() => {})
+          );
       } else if (m.dgn === 'layers-tree') {
         // Phase 12 Task 4 — browsable layers tree for the active artboard.
         setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
@@ -6791,6 +6881,28 @@ function App() {
     [activePath]
   );
 
+  // Inline-edit undo (DDR-103/104 follow-up). The inspector calls this after it
+  // POSTs `/_api/edit-css` / `/_api/edit-attr`, so the canvas iframe records the
+  // edit on its undo stack and Cmd+Z can invert it. The iframe gates this to
+  // parent-origin posts (DDR-054). See `commands/edit-source-command.ts`.
+  const recordSourceEdit = useCallback(
+    (payload) => {
+      if (!activePath || activePath === SYSTEM_TAB || !payload) return;
+      const el = iframesRef.current.get(activePath);
+      if (el && el.contentWindow) {
+        try {
+          el.contentWindow.postMessage({ dgn: 'record-edit', payload }, '*');
+        } catch {}
+      }
+    },
+    [activePath]
+  );
+
+  // Serializes `apply-edit` source writes from canvas undo/redo so a rapid
+  // multi-Cmd+Z on the same property lands on disk in dispatch order (the
+  // iframe sink is fire-and-forget, so without this the POSTs could race).
+  const editApplyChainRef = useRef(Promise.resolve());
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -6859,6 +6971,19 @@ function App() {
         setPaletteOpen((v) => !v);
         return;
       }
+      // Cmd+Z / Cmd+Shift+Z / Cmd+Y — forward to the active canvas's undo stack
+      // when focus is in the shell chrome (not a text field, not the canvas
+      // iframe). Inside the canvas iframe the canvas owns Cmd+Z; inside an editable
+      // field native undo wins (the inspector's CssKnobs forwards on its own). This
+      // makes inspector CSS / inline text / attr edits undoable from anywhere.
+      if (meta && !e.altKey && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
+        if (!inEditable && !inCanvasIframe && activePath && activePath !== SYSTEM_TAB) {
+          e.preventDefault();
+          const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
+          postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
+          return;
+        }
+      }
       // Cmd+Shift+R — refresh the FILES tree (re-read /_index-data). The fs-watch
       // → canvas-list-update auto-refresh can miss events in the compiled desktop
       // sidecar (recursive fs.watch is unreliable in a bun --compile binary), and
@@ -7387,6 +7512,8 @@ function App() {
               onTabChange={setInspectorTab}
               onClose={() => setInspectorOpen(false)}
               onOptimistic={applyOptimisticStyle}
+              onRecordEdit={recordSourceEdit}
+              onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
               layersTree={layersTree}
               onSelectLayer={(n) =>
                 postToActiveCanvas({

package/apps/studio/commands/edit-source-command.ts

@@ -0,0 +1,118 @@
+/**
+ * @file       commands/edit-source-command.ts — undo entry for inline source edits
+ * @scope      apps/studio/commands/edit-source-command.ts
+ * @purpose    Reversible record of a single in-canvas direct edit that writes
+ *             the canvas `.tsx` source: an inspector CSS commit/reset
+ *             (`/_api/edit-css`), an inline text rewrite (`/_api/edit-text`), or
+ *             a custom HTML-attribute edit (`/_api/edit-attr`). Before this
+ *             command existed these edits were covered by NEITHER the Cmd+Z
+ *             undo stack NOR the `_history` snapshot stack, so they were
+ *             unrecoverable in-app (the reported bug). See the undo/redo
+ *             coverage RCA: `.ai/logs/rca/issue-undo-redo-coverage-gaps.md`.
+ *
+ * Why a single `edit-source` kind for all three ops. Each is invertible
+ * through the SAME endpoint by re-applying the prior value — `editCss(prop,
+ * before)` undoes `editCss(prop, after)`; `null` means "remove the inline
+ * prop / attr" (the reset path) or "field was unset, undo by reset". Storing
+ * the op + before/after as a flat record keeps one builder + one sink.
+ *
+ * Origin split (DDR-054). This command runs INSIDE the untrusted canvas iframe
+ * (where the undo stack lives), but `/_api/edit-*` are main-origin-only — the
+ * iframe cannot fetch them. So `do()` / `undo()` route through the injected
+ * `editSourceApplyFn` sink, which posts `dgn:'apply-edit'` to the parent shell;
+ * the shell performs the privileged write. Records are built per iframe mount
+ * from a serializable `CommandRecord` (DDR-050 rev 2) so the stack survives the
+ * `mode:'module'` HMR reload that the source write triggers.
+ */
+
+import type { CommandRecord, EditCommand } from '../undo-stack.ts';
+import { registerCommand } from '../undo-stack.ts';
+
+/** Which main-origin edit route this record re-applies through. */
+export type EditSourceOp = 'css' | 'text' | 'attr';
+
+export interface EditSourcePayload {
+  op: EditSourceOp;
+  /** Canvas file path (repo- or designRoot-relative — same string the edit POST used). */
+  canvas: string;
+  /** `data-cd-id` of the target element. */
+  id: string;
+  /**
+   * CSS property name (`op:'css'`) or HTML attribute name (`op:'attr'`).
+   * Empty string for `op:'text'` (the whole text node is the target).
+   */
+  key: string;
+  /** Value before the edit. `null` = the prop/attr was unset (undo ⇒ reset). */
+  before: string | null;
+  /** Value after the edit. `null` = the edit removed the prop/attr (the reset path). */
+  after: string | null;
+}
+
+/**
+ * One application of an inline edit. The production binding (canvas-shell.tsx)
+ * posts `dgn:'apply-edit'` to the parent shell; tests pass a spy. `value` null
+ * means "reset" — remove the inline prop / attr (for `op:'text'` a null value
+ * never occurs, text always has a body).
+ */
+export type EditSourceApplyFn = (apply: {
+  op: EditSourceOp;
+  canvas: string;
+  id: string;
+  key: string;
+  value: string | null;
+}) => void | Promise<void>;
+
+export const EDIT_SOURCE_KIND = 'edit-source';
+
+export interface EditSourceCommandInit {
+  payload: EditSourcePayload;
+  applyFn: EditSourceApplyFn;
+  label?: string;
+}
+
+export function createEditSourceCommand(init: EditSourceCommandInit): EditCommand {
+  const { payload, applyFn } = init;
+  const apply = (value: string | null) =>
+    applyFn({ op: payload.op, canvas: payload.canvas, id: payload.id, key: payload.key, value });
+  return {
+    kind: EDIT_SOURCE_KIND,
+    label: init.label ?? defaultLabel(payload),
+    async do() {
+      await apply(payload.after);
+    },
+    async undo() {
+      await apply(payload.before);
+    },
+  };
+}
+
+/**
+ * Build a persistable record. The caller (the shell's CssKnobs for css/attr,
+ * canvas-shell's text commit for text) has already applied the edit once, so
+ * this record is pushed onto the stack via `useUndoStack().record()` — which
+ * appends WITHOUT re-running `do()` — not via `push()`.
+ */
+export function buildEditSourceRecord(
+  payload: EditSourcePayload
+): CommandRecord<EditSourcePayload> {
+  return { kind: EDIT_SOURCE_KIND, label: defaultLabel(payload), payload };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Registry
+
+registerCommand<EditSourcePayload>(EDIT_SOURCE_KIND, (record, sinks) => {
+  const applyFn = sinks.editSourceApplyFn as EditSourceApplyFn | undefined;
+  if (!applyFn) return null;
+  return createEditSourceCommand({ payload: record.payload, applyFn, label: record.label });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internals
+
+function defaultLabel(p: EditSourcePayload): string {
+  if (p.op === 'text') return 'edit text';
+  const verb = p.after == null ? 'reset' : 'edit';
+  const what = p.op === 'attr' ? `@${p.key}` : p.key;
+  return `${verb} ${what}`;
+}