@1agh/maude 0.36.1 → 0.38.0

package/apps/studio/canvas-edit.ts

@@ -170,6 +170,13 @@ export interface EditResult {
   source: string;
   /** Number of bytes the edit changed (positive = grew, negative = shrunk). */
   delta: number;
+  /**
+   * Whether a disk write actually happened. Set by the disk-op wrappers only
+   * (pure apply* variants leave it undefined). Callers must NOT infer this from
+   * `delta` — an equal-length replacement (e.g. text "Alpha" → "Gamma") is a
+   * real write with delta 0 (RC1 rim-suppression finding).
+   */
+  changed?: boolean;
 }
 
 /**
@@ -193,12 +200,12 @@ export async function editAttribute(
     }
     const source = await file.text();
     const next = applyEdit(canvasAbsPath, source, id, attr, value);
-    if (next.source === source) return { source, delta: 0 };
+    if (next.source === source) return { source, delta: 0, changed: false };
     const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
     await Bun.write(tmp, next.source);
     const { rename } = await import('node:fs/promises');
     await rename(tmp, canvasAbsPath);
-    return next;
+    return { ...next, changed: true };
   });
 }
 
@@ -225,12 +232,12 @@ export async function removeAttribute(
     }
     const source = await file.text();
     const next = applyRemove(canvasAbsPath, source, id, attr);
-    if (next.source === source) return { source, delta: 0 };
+    if (next.source === source) return { source, delta: 0, changed: false };
     const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
     await Bun.write(tmp, next.source);
     const { rename } = await import('node:fs/promises');
     await rename(tmp, canvasAbsPath);
-    return next;
+    return { ...next, changed: true };
   });
 }
 
@@ -298,12 +305,12 @@ export async function editText(
     }
     const source = await file.text();
     const next = applyTextEdit(canvasAbsPath, source, id, text);
-    if (next.source === source) return { source, delta: 0 };
+    if (next.source === source) return { source, delta: 0, changed: false };
     const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
     await Bun.write(tmp, next.source);
     const { rename } = await import('node:fs/promises');
     await rename(tmp, canvasAbsPath);
-    return next;
+    return { ...next, changed: true };
   });
 }
 
@@ -414,6 +421,415 @@ export function applyTextEdit(
   return { source: out, delta: out.length - source.length };
 }
 
+// ---------------------------------------------------------------------------
+// Node-move reorder (DDR-138, phase-12.1). Moving a whole JSXElement to a new
+// sibling/parent position — the one structural edit `editAttribute`/`editText`
+// don't do. Remove the element's line-span + insert a re-indented copy at an
+// anchor derived from `refId` + `position`. A same-parent reorder is the
+// degenerate case where source/target indent match (no re-indent). Reparenting
+// works because we re-indent (not raw magic-string.move). Guardrails refuse
+// structurally-unsafe moves; a post-move reparse gate guarantees we never write
+// corrupt source. The move response recomputes the moved element's positional
+// id (matches what the pipeline assigns on the next pass) + surfaces its
+// author-semantic `data-dc-element` handle so the client can re-settle the
+// selection through the id churn.
+
+export type MovePosition = 'before' | 'after' | 'inside-start' | 'inside-end';
+
+export interface MoveResult extends EditResult {
+  /** Recomputed positional id of the moved element (== the DOM `data-cd-id`
+   *  after the next pipeline pass). Best-effort — null if not resolvable. */
+  movedId: string | null;
+  /** The moved element's `data-dc-element` value (DDR-007), if it has one — a
+   *  stable re-select key that survives the id churn byte-for-byte. */
+  semanticId: string | null;
+}
+
+/** Read a plain-string JSX attribute value off an opening element (null when
+ *  absent or not a string literal). */
+function getStringAttr(opening: AnyNode, name: string): string | null {
+  const attr = findAttribute(opening, name);
+  if (!attr) return null;
+  const v = attr.value;
+  if (v == null) return '';
+  if (v.type === 'Literal' || v.type === 'StringLiteral') return String(v.value);
+  return null;
+}
+
+/** Info about the line a byte offset sits on: the whitespace indentation, where
+ *  it begins, and whether a newline immediately precedes it. */
+function lineStartInfo(
+  source: string,
+  pos: number
+): { indent: string; indentStart: number; newlineBefore: boolean } {
+  let i = pos;
+  while (i > 0 && (source[i - 1] === ' ' || source[i - 1] === '\t')) i--;
+  return {
+    indent: source.slice(i, pos),
+    indentStart: i,
+    newlineBefore: i > 0 && source[i - 1] === '\n',
+  };
+}
+
+/** Detect the file's indentation unit (tab vs N spaces). Canvases are Prettier
+ *  2-space by default; fall back to that. */
+function detectIndentUnit(source: string): string {
+  if (/\n\t/.test(source)) return '\t';
+  const m = /\n( +)\S/.exec(source);
+  return m ? m[1] : '  ';
+}
+
+/** Re-indent an element's source text from `fromIndent` (its old line indent) to
+ *  `toIndent` (the target depth). The first line carries no leading indent in
+ *  `elText` (it starts at the element), so only continuation lines shift, by the
+ *  same delta, preserving the element's internal structure. */
+function reindentBlock(elText: string, fromIndent: string, toIndent: string): string {
+  if (fromIndent === toIndent) return elText;
+  const lines = elText.split('\n');
+  return lines
+    .map((line, i) => {
+      if (i === 0) return line;
+      const lead = /^[ \t]*/.exec(line)?.[0] ?? '';
+      const rest = line.slice(lead.length);
+      if (rest === '') return line; // blank line — leave as-is
+      const rel = lead.startsWith(fromIndent) ? lead.slice(fromIndent.length) : lead;
+      return toIndent + rel + rest;
+    })
+    .join('\n');
+}
+
+/** Normalize element text for duplicate-tolerant matching: trim each line so
+ *  re-indentation differences don't defeat the match. */
+function normalizeForMatch(t: string): string {
+  return t
+    .split('\n')
+    .map((l) => l.trim())
+    .join('\n');
+}
+
+/** Walk the program with the SAME component + jsxIndex bookkeeping the pipeline
+ *  uses (canvas-pipeline.ts walkInjectIds), collecting every JSXElement with the
+ *  id it will be assigned. Reused to recompute the moved element's post-move id. */
+function collectElements(program: AnyNode): Array<{ id: string; node: AnyNode }> {
+  interface Frame {
+    componentName: string;
+    jsxIndex: number;
+  }
+  const stack: Frame[] = [{ componentName: '', jsxIndex: 0 }];
+  const out: Array<{ id: string; node: AnyNode }> = [];
+
+  function visit(node: AnyNode): void {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) {
+      for (const c of node) visit(c);
+      return;
+    }
+    if (typeof node.type !== 'string') return;
+
+    const newComp = componentNameOf(node);
+    let pushed = false;
+    if (newComp !== null) {
+      stack.push({ componentName: newComp, jsxIndex: 0 });
+      pushed = true;
+    }
+
+    if (node.type === 'JSXElement') {
+      const frame = stack[stack.length - 1] as Frame;
+      const idx = frame.jsxIndex;
+      frame.jsxIndex += 1;
+      out.push({ id: computeId(frame.componentName, idx), node });
+      if (node.openingElement) visit(node.openingElement.attributes);
+      visit(node.children);
+      if (pushed) stack.pop();
+      return;
+    }
+
+    for (const k of Object.keys(node)) {
+      if (k === 'loc' || k === 'range' || k === 'start' || k === 'end' || k === 'type') continue;
+      visit(node[k]);
+    }
+    if (pushed) stack.pop();
+  }
+
+  visit(program);
+  return out;
+}
+
+/**
+ * Every JSX element with its enclosing-component frame + tag. Superset of
+ * collectElements used to resolve a reused-component INSTANCE to its parent
+ * USAGE (see resolveUsageId).
+ */
+function collectElementsFull(
+  program: AnyNode
+): Array<{ id: string; componentName: string; isFrameRoot: boolean; tag: string | null }> {
+  interface Frame {
+    componentName: string;
+    jsxIndex: number;
+  }
+  const stack: Frame[] = [{ componentName: '', jsxIndex: 0 }];
+  const out: Array<{
+    id: string;
+    componentName: string;
+    isFrameRoot: boolean;
+    tag: string | null;
+  }> = [];
+  function tagOf(node: AnyNode): string | null {
+    const n = node?.openingElement?.name;
+    if (n?.type === 'JSXIdentifier' && typeof n.name === 'string') return n.name;
+    return null;
+  }
+  function visit(node: AnyNode): void {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) {
+      for (const c of node) visit(c);
+      return;
+    }
+    if (typeof node.type !== 'string') return;
+    const newComp = componentNameOf(node);
+    let pushed = false;
+    if (newComp !== null) {
+      stack.push({ componentName: newComp, jsxIndex: 0 });
+      pushed = true;
+    }
+    if (node.type === 'JSXElement') {
+      const frame = stack[stack.length - 1] as Frame;
+      const idx = frame.jsxIndex;
+      frame.jsxIndex += 1;
+      out.push({
+        id: computeId(frame.componentName, idx),
+        componentName: frame.componentName,
+        isFrameRoot: idx === 0,
+        tag: tagOf(node),
+      });
+      if (node.openingElement) visit(node.openingElement.attributes);
+      visit(node.children);
+      if (pushed) stack.pop();
+      return;
+    }
+    for (const k of Object.keys(node)) {
+      if (k === 'loc' || k === 'range' || k === 'start' || k === 'end' || k === 'type') continue;
+      visit(node[k]);
+    }
+    if (pushed) stack.pop();
+  }
+  visit(program);
+  return out;
+}
+
+/**
+ * Resolve a reused-component INSTANCE id to the parent's `<Component>` USAGE id.
+ *
+ * A component used N times (`<Column/>` … `<Column/>`) renders N DOM nodes that
+ * all carry ONE data-cd-id — the id of an element INSIDE the component's
+ * definition. That id can't be moved (there's only one, inside the loop-free
+ * component body). But each USAGE in the parent is a distinct, movable JSX
+ * element. So when `domId` names an element that lives inside a component with
+ * multiple usages, map it to the `occurrenceIndex`-th usage (the occurrence index
+ * of ANY element in the component equals the instance index = the usage index).
+ * Falls through to `domId` for a normal element, or a `.map()`ed single-usage
+ * element (one usage → can't split). Reordering elements WITHIN a reused
+ * component's definition isn't reachable via drag (edit the component source).
+ */
+function resolveUsageId(
+  program: AnyNode,
+  domId: string,
+  occurrenceIndex: number | undefined
+): string {
+  const all = collectElementsFull(program);
+  const target = all.find((e) => e.id === domId);
+  if (!target?.componentName) return domId;
+  const usages = all.filter((e) => e.tag === target.componentName);
+  if (usages.length <= 1) return domId; // single usage (or `.map`) — not splittable
+  const i =
+    typeof occurrenceIndex === 'number' && occurrenceIndex >= 0 && occurrenceIndex < usages.length
+      ? occurrenceIndex
+      : 0;
+  return usages[i]?.id ?? domId;
+}
+
+/**
+ * Move the element with `data-cd-id === id` to a position relative to the element
+ * with `data-cd-id === refId`. Async wrapper: read, apply, atomic write under the
+ * per-file mutex — identical persistence to `editAttribute`.
+ *
+ * `idIndex` / `refIndex` are the DOM occurrence indices — which rendered instance
+ * of a reused component the id refers to (0 for a normal, single-render element).
+ */
+export async function moveElement(
+  canvasAbsPath: string,
+  id: string,
+  refId: string,
+  position: MovePosition,
+  idIndex?: number,
+  refIndex?: number
+): Promise<MoveResult> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id,
+      });
+    }
+    const source = await file.text();
+    const next = applyMove(canvasAbsPath, source, id, refId, position, idIndex, refIndex);
+    if (next.source === source) return next;
+    const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
+    await Bun.write(tmp, next.source);
+    const { rename } = await import('node:fs/promises');
+    await rename(tmp, canvasAbsPath);
+    return next;
+  });
+}
+
+/** Pure variant of `moveElement` — exposed for tests. Never mutates disk. */
+export function applyMove(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  refId: string,
+  position: MovePosition,
+  idIndex?: number,
+  refIndex?: number
+): MoveResult {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    const first = parsed.errors[0];
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${first?.message ?? 'unknown'}`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  // Map reused-component INSTANCE ids to their parent USAGE elements before the
+  // move (a shared internal id isn't movable per-instance; the usage is).
+  id = resolveUsageId(parsed.program, id, idIndex);
+  refId = resolveUsageId(parsed.program, refId, refIndex);
+
+  if (id === refId) {
+    throw new CanvasEditError('cannot move an element relative to itself', {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+
+  const moved = findOpening(parsed.program, id);
+  if (!moved) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const ref = findOpening(parsed.program, refId);
+  if (!ref) {
+    throw new CanvasEditError(`reference data-cd-id "${refId}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id: refId,
+    });
+  }
+
+  const movedEl = moved.element;
+  const refEl = ref.element;
+  const mStart = movedEl.start as number;
+  const mEnd = movedEl.end as number;
+  const rStart = refEl.start as number;
+  const rEnd = refEl.end as number;
+
+  // Guardrail: the reference must not live inside the moved element's subtree —
+  // that would splice the node into itself.
+  if (rStart >= mStart && rEnd <= mEnd) {
+    throw new CanvasEditError('cannot move an element into its own subtree', {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+
+  const inside = position === 'inside-start' || position === 'inside-end';
+  if (inside && (refEl.openingElement?.selfClosing || !refEl.closingElement)) {
+    throw new CanvasEditError(
+      `target "${refId}" is self-closing — cannot nest an element inside it`,
+      { canvas: canvasAbsPath, id: refId }
+    );
+  }
+
+  const indentUnit = detectIndentUnit(source);
+  const elText = source.slice(mStart, mEnd);
+  const movedLine = lineStartInfo(source, mStart);
+  const removeStart = movedLine.newlineBefore ? movedLine.indentStart - 1 : movedLine.indentStart;
+
+  // Resolve the target indent + insertion anchor per position.
+  let targetIndent: string;
+  let anchor: number;
+  let insertText: string;
+
+  if (position === 'after') {
+    targetIndent = lineStartInfo(source, rStart).indent;
+    const reText = reindentBlock(elText, movedLine.indent, targetIndent);
+    anchor = rEnd;
+    insertText = `\n${targetIndent}${reText}`;
+  } else if (position === 'before') {
+    const rLine = lineStartInfo(source, rStart);
+    targetIndent = rLine.indent;
+    const reText = reindentBlock(elText, movedLine.indent, targetIndent);
+    if (rLine.newlineBefore) {
+      anchor = rLine.indentStart - 1;
+      insertText = `\n${targetIndent}${reText}`;
+    } else {
+      anchor = rLine.indentStart;
+      insertText = `${targetIndent}${reText}\n`;
+    }
+  } else if (position === 'inside-start') {
+    targetIndent = lineStartInfo(source, rStart).indent + indentUnit;
+    const reText = reindentBlock(elText, movedLine.indent, targetIndent);
+    anchor = refEl.openingElement.end as number;
+    insertText = `\n${targetIndent}${reText}`;
+  } else {
+    // inside-end — insert as the last child, before the closing tag's own line.
+    targetIndent = lineStartInfo(source, rStart).indent + indentUnit;
+    const reText = reindentBlock(elText, movedLine.indent, targetIndent);
+    const cStart = refEl.closingElement.start as number;
+    const cLine = lineStartInfo(source, cStart);
+    if (cLine.newlineBefore) {
+      anchor = cLine.indentStart - 1;
+      insertText = `\n${targetIndent}${reText}`;
+    } else {
+      anchor = cStart;
+      insertText = `${reText}`;
+    }
+  }
+
+  const s = new MagicString(source);
+  s.remove(removeStart, mEnd);
+  s.appendLeft(anchor, insertText);
+  const out = s.toString();
+
+  // Reparse gate: never write source that doesn't parse. This is the catch-all
+  // that lets us keep the guardrail set small.
+  const check = parseSync(canvasAbsPath, out, { sourceType: 'module' });
+  if (check.errors && check.errors.length > 0) {
+    const first = check.errors[0];
+    throw new CanvasEditError(
+      `move would produce invalid source (${first?.message ?? 'parse error'}); aborted`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  // Re-settle hints. semanticId survives the move verbatim; movedId is the
+  // recomputed positional id (matches the post-reload DOM).
+  const semanticId = getStringAttr(movedEl.openingElement, 'data-dc-element');
+  let movedId: string | null = null;
+  const wanted = normalizeForMatch(reindentBlock(elText, movedLine.indent, targetIndent));
+  for (const { id: eid, node } of collectElements(check.program)) {
+    if (normalizeForMatch(out.slice(node.start as number, node.end as number)) === wanted) {
+      movedId = eid;
+      break;
+    }
+  }
+
+  return { source: out, delta: out.length - source.length, movedId, semanticId };
+}
+
 // ---------------------------------------------------------------------------
 // Edit shapes.
 

package/apps/studio/canvas-lib.tsx

@@ -256,6 +256,19 @@ const ENGINE_CSS = `
   flex: 1;
   position: relative;
   overflow: hidden;
+  /* Artboard-isolation root. An artboard is a fixed-size design surface — its
+     content must NOT react to the studio chrome (panel/sidebar/window resize)
+     or to pan/zoom. But @media, vw/vh, and position:fixed in mock CSS resolve
+     against the iframe viewport (= the studio's canvas stage), not this box —
+     so widening the Assistant panel narrows the iframe and reflows the mock
+     even though the world zoom never changed. A transformed ancestor (dc-world)
+     already re-roots position:fixed; container-type re-roots the responsive
+     path: authors get artboard-relative @container queries + cqw/cqh units that
+     stay put. Viewport units still escape by spec (no CSS can re-root them) —
+     the smoke lint + design-system-keeper flag those, and the design:new +
+     frontend-design guidance steers mocks off them. (NB: no backticks in this
+     comment — it lives inside the ENGINE_CSS template literal.) */
+  container-type: inline-size;
 }
 button.dc-artboard-label {
   appearance: none;
@@ -539,6 +552,22 @@ function patchCanvasMeta(patch: {
       })),
     };
   }
+  // Mirror the patch into the in-iframe meta snapshot. `getInitial` (viewport +
+  // layout) reads `window.__canvas_meta__`, which is otherwise populated ONCE at
+  // page load — so after a settle, a soft HMR remount (any module edit: text,
+  // reorder, agent edit) would re-read the STALE page-load camera and reset the
+  // pan/zoom. Keeping the snapshot current means the remount restores the live
+  // camera. General fix, not reorder-specific. (DDR-138 dogfood.)
+  const w = window as unknown as {
+    __canvas_meta__?: {
+      viewport?: ViewportState;
+      layout?: { artboards: PersistedArtboardLayout[] };
+    };
+  };
+  if (w.__canvas_meta__ && typeof w.__canvas_meta__ === 'object') {
+    if (sanitized.viewport) w.__canvas_meta__.viewport = sanitized.viewport;
+    if (sanitized.layout) w.__canvas_meta__.layout = sanitized.layout;
+  }
   // Stamp the self-write timestamp BEFORE the fetch so the round-trip
   // (PATCH → server write → fs:json broadcast → iframe message) lands
   // safely inside the echo window even on a fast network.
@@ -635,6 +664,20 @@ function fitRectIntoHost(rect: ArtboardRect, hostEl: HTMLElement, pad = 24): Vie
   return computeFit([rect], hostEl, pad);
 }
 
+// RC3 (rca/issue-canvas-hmr-optimistic-update-consistency) — the LIVE camera,
+// hoisted above the `key=attempt` remount boundary. softReload() swaps the
+// canvas module by remounting a fresh React subtree (canvas-comment-mount.tsx,
+// clean-slate `key`), which tears down useViewportController and re-runs the
+// one-shot getInitial(). The snapshot that init used to read
+// (`__canvas_meta__.viewport` via readCanvasMeta) is mirrored only on the
+// 500 ms settle, so an edit landing mid-gesture snapped the camera back to a
+// stale pan/zoom — the reported "zoom reset while an artboard is edited".
+// canvas-lib is an externalized runtime module (canvas-build.ts): the SAME
+// module instance survives the canvas re-import, so the camera parked here
+// outlives the subtree. A full page load clears it — correct, view.json seeds
+// then. Written on every applyViewport (exact — no settle/publish lag).
+let liveViewport: ViewportState | null = null;
+
 export function useViewportController(opts: ViewportControllerOptions): ViewportControllerHandle {
   const {
     hostRef,
@@ -761,6 +804,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
         zoom: clampZoom(next.zoom),
       };
       vpRef.current = clamped;
+      liveViewport = clamped; // RC3 — survives the soft-reload remount
       writeTransform(clamped);
       schedulePublish();
       scheduleSettle();
@@ -1389,6 +1433,10 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   }, []);
 
   const getInitial = useCallback((): ViewportState | null => {
+    // RC3 — after a soft-reload remount, resume the live camera parked at
+    // module scope (exact, no settle lag) before falling back to the meta
+    // snapshot. Null on a fresh page load, so view.json still seeds there.
+    if (liveViewport) return { ...liveViewport };
     const meta = readCanvasMeta();
     const v = meta?.viewport;
     if (v && Number.isFinite(v.x) && Number.isFinite(v.y) && Number.isFinite(v.zoom)) {