@1agh/maude 1.2.0 → 1.3.1

package/apps/studio/canvas-edit.ts

@@ -37,14 +37,28 @@ import { parseSync } from 'oxc-parser';
 export class CanvasEditError extends Error {
   readonly canvas: string;
   readonly id: string;
-  constructor(message: string, info: { canvas: string; id: string }) {
+  /** The target no longer holds the value the caller expected (a peer changed it). */
+  readonly conflict: boolean;
+  constructor(message: string, info: { canvas: string; id: string; conflict?: boolean }) {
     super(message);
     this.name = 'CanvasEditError';
     this.canvas = info.canvas;
     this.id = info.id;
+    this.conflict = info.conflict === true;
   }
 }
 
+/**
+ * Expected-current-value guard for a single-attribute write (audit 2026-09-13
+ * P1 #5). `expected` is what the caller believes the source holds now, `next`
+ * is what it is about to write; `null` means "attribute / style key absent".
+ * Values are the RAW strings the edit routes take (not JSON-encoded).
+ */
+export interface AttributePrecondition {
+  expected: string | null;
+  next: string | null;
+}
+
 const PASCAL_CASE = /^[A-Z][A-Za-z0-9_]*$/;
 // biome-ignore lint/suspicious/noExplicitAny: oxc-parser AST nodes are heterogeneous.
 type AnyNode = any;
@@ -268,6 +282,12 @@ export interface EditResult {
    * real write with delta 0 (RC1 rim-suppression finding).
    */
   changed?: boolean;
+  /**
+   * What the target held BEFORE this write, read under the same lock. The
+   * value an undo must restore is what the write replaced — never what a
+   * client panel last believed was there (it can be a teammate's edit old).
+   */
+  previous?: AttributeState;
 }
 
 /**
@@ -280,7 +300,8 @@ export async function editAttribute(
   id: string,
   attr: string,
   value: string,
-  occurrence?: number
+  occurrence?: number,
+  precondition?: AttributePrecondition
 ): Promise<EditResult> {
   return withLock(canvasAbsPath, async () => {
     const file = Bun.file(canvasAbsPath);
@@ -291,13 +312,22 @@ export async function editAttribute(
       });
     }
     const source = await file.text();
+    // Read under the same per-file lock as the write — no gap between the read
+    // that proves the precondition (and records what is replaced) and the rename.
+    const previous = readAttributeState(canvasAbsPath, source, id, attr, occurrence);
+    if (
+      precondition &&
+      checkPrecondition(previous, id, attr, canvasAbsPath, precondition) === 'already'
+    ) {
+      return { source, delta: 0, changed: false, previous };
+    }
     const next = applyEdit(canvasAbsPath, source, id, attr, value, occurrence);
-    if (next.source === source) return { source, delta: 0, changed: false };
+    if (next.source === source) return { source, delta: 0, changed: false, previous };
     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, changed: true };
+    return { ...next, changed: true, previous };
   });
 }
 
@@ -313,7 +343,8 @@ export async function removeAttribute(
   canvasAbsPath: string,
   id: string,
   attr: string,
-  occurrence?: number
+  occurrence?: number,
+  precondition?: AttributePrecondition
 ): Promise<EditResult> {
   return withLock(canvasAbsPath, async () => {
     const file = Bun.file(canvasAbsPath);
@@ -324,13 +355,124 @@ export async function removeAttribute(
       });
     }
     const source = await file.text();
+    const previous = readAttributeState(canvasAbsPath, source, id, attr, occurrence);
+    if (
+      precondition &&
+      checkPrecondition(previous, id, attr, canvasAbsPath, precondition) === 'already'
+    ) {
+      return { source, delta: 0, changed: false, previous };
+    }
     const next = applyRemove(canvasAbsPath, source, id, attr, occurrence);
-    if (next.source === source) return { source, delta: 0, changed: false };
+    if (next.source === source) return { source, delta: 0, changed: false, previous };
     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, changed: true };
+    return { ...next, changed: true, previous };
+  });
+}
+
+/** What one plain attribute or inline style key currently holds in source. */
+export type AttributeState =
+  | { kind: 'absent' }
+  | { kind: 'literal'; value: string }
+  /** Present, but not a literal this module can compare (an expression, a spread). */
+  | { kind: 'expression' };
+
+function literalText(node: AnyNode): string | null {
+  if (!node) return null;
+  if (node.type === 'Literal' || node.type === 'StringLiteral' || node.type === 'NumericLiteral') {
+    return typeof node.value === 'string' || typeof node.value === 'number'
+      ? String(node.value)
+      : null;
+  }
+  if (node.type === 'TemplateLiteral' && node.expressions?.length === 0) {
+    return node.quasis?.[0]?.value?.cooked ?? null;
+  }
+  return null;
+}
+
+/**
+ * Read the current value of `attr` (`style.<prop>` or a plain attribute name)
+ * on the element with `data-cd-id` `id`, with the same occurrence routing as
+ * `applyEdit` / `applyRemove`. Pure — exposed for tests and preconditions.
+ */
+export function readAttributeState(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  attr: string,
+  occurrence?: number
+): AttributeState {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${parsed.errors[0]?.message ?? 'unknown'}`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+  if (typeof occurrence === 'number' && Number.isFinite(occurrence)) {
+    id = resolveUsageId(parsed.program, id, occurrence);
+  }
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  if (attr.startsWith('style.')) {
+    const style = findAttribute(hit.opening, 'style');
+    if (!style) return { kind: 'absent' };
+    const obj = style.value?.type === 'JSXExpressionContainer' ? style.value.expression : null;
+    if (obj?.type !== 'ObjectExpression') return { kind: 'expression' };
+    const prop = attr.slice('style.'.length);
+    const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    for (const p of obj.properties as AnyNode[]) {
+      if (p?.type !== 'Property' && p?.type !== 'ObjectProperty') continue;
+      const k = p.key;
+      const kname =
+        k?.type === 'Identifier' ? k.name : k?.type === 'Literal' ? String(k.value) : null;
+      if (kname !== prop && kname !== propCamel) continue;
+      const text = literalText(p.value);
+      return text === null ? { kind: 'expression' } : { kind: 'literal', value: text };
+    }
+    // A spread may supply the key at runtime; "absent" would be a guess.
+    return (obj.properties as AnyNode[]).some((p) => p?.type === 'SpreadElement')
+      ? { kind: 'expression' }
+      : { kind: 'absent' };
+  }
+  const found = findAttribute(hit.opening, attr);
+  if (!found) return { kind: 'absent' };
+  if (found.value == null) return { kind: 'literal', value: '' };
+  const direct = literalText(found.value);
+  if (direct !== null) return { kind: 'literal', value: direct };
+  const inner =
+    found.value.type === 'JSXExpressionContainer' ? literalText(found.value.expression) : null;
+  return inner === null ? { kind: 'expression' } : { kind: 'literal', value: inner };
+}
+
+/**
+ * `'apply'` when the source still holds `expected`; `'already'` when it holds
+ * `next` (a retried or already-applied write — idempotent success). Anything
+ * else is a peer's newer value: refuse rather than overwrite it.
+ */
+function checkPrecondition(
+  state: AttributeState,
+  id: string,
+  attr: string,
+  canvasAbsPath: string,
+  pre: AttributePrecondition
+): 'apply' | 'already' {
+  const holds = (value: string | null) =>
+    value === null ? state.kind === 'absent' : state.kind === 'literal' && state.value === value;
+  if (holds(pre.next)) return 'already';
+  if (holds(pre.expected)) return 'apply';
+  const name = attr.startsWith('style.') ? attr.slice('style.'.length) : attr;
+  throw new CanvasEditError(`${name} was changed by someone else — kept their value`, {
+    canvas: canvasAbsPath,
+    id,
+    conflict: true,
   });
 }
 
@@ -554,6 +696,7 @@ export function applyTextEdit(
     const expr = (only as AnyNode).expression;
     // A single `{'string literal'}` — rewrite the literal in place (DDR-150 P1).
     if (isStringLit(expr)) {
+      if (expr.value === text) return { source, delta: 0 };
       const s = new MagicString(source);
       s.overwrite(expr.start as number, expr.end as number, JSON.stringify(text));
       const out = s.toString();
@@ -585,6 +728,10 @@ export function applyTextEdit(
   const start = only.start as number;
   const end = only.end as number;
   const raw = source.slice(start, end);
+  // The text it already shows is not an edit (plan T23): a multi-line JSX text
+  // renders as its lines joined by one space, and rewriting it with that same
+  // text used to fold the author's line breaks into one line.
+  if (jsxRenderedText(raw) === escapeJsxText(text)) return { source, delta: 0 };
   // Preserve the original indentation/newline framing; swap only the visible text.
   const lead = /^\s*/.exec(raw)?.[0] ?? '';
   const trail = /\s*$/.exec(raw)?.[0] ?? '';
@@ -604,6 +751,26 @@ export function applyTextEdit(
 // the index drifts (`.filter().map()`, reorders). Anything we can't target
 // unambiguously returns null → the caller throws → routes to /design:edit.
 
+/**
+ * JSX's own whitespace rule for a text child, on the raw source: each line is
+ * trimmed (inner lines on both sides), empty lines drop, and the rest join with
+ * one space. Entities stay encoded — the caller compares against escaped text.
+ */
+function jsxRenderedText(raw: string): string {
+  const lines = raw.split(/\r\n|\n|\r/);
+  if (lines.length === 1) return raw.trim();
+  return lines
+    .map((line, i) => {
+      let l = line;
+      if (i !== 0) l = l.replace(/^[ \t]+/, '');
+      if (i !== lines.length - 1) l = l.replace(/[ \t]+$/, '');
+      return l;
+    })
+    .filter((l) => l.length > 0)
+    .join(' ')
+    .trim();
+}
+
 function isStringLit(n: AnyNode): boolean {
   return !!(
     n &&
@@ -3930,6 +4097,86 @@ export function applySetArtboardKind(
   return { source: out };
 }
 
+/** Longest artboard name the label edit accepts (the chrome truncates long ones). */
+export const MAX_ARTBOARD_LABEL = 80;
+
+/**
+ * Rename an artboard — write its DCArtboard `label` string prop (plan T25/L08,
+ * the double-click-the-name gesture). Addressed by the `id` prop like every
+ * other artboard verb; the label is a JSX string attribute, so `editStringAttr`
+ * escapes it. Pure; reparse-gated.
+ */
+export function applySetArtboardLabel(
+  canvasAbsPath: string,
+  source: string,
+  artboardId: string,
+  label: string
+): { source: string } {
+  // Control characters never reach a JSX attribute.
+  const clean = [...label]
+    .filter((c) => c.charCodeAt(0) >= 0x20 && c.charCodeAt(0) !== 0x7f)
+    .join('')
+    .trim();
+  if (!clean || clean.length > MAX_ARTBOARD_LABEL) {
+    throw new CanvasEditError(`artboard name must be 1–${MAX_ARTBOARD_LABEL} characters`, {
+      canvas: canvasAbsPath,
+      id: artboardId,
+    });
+  }
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${parsed.errors[0]?.message ?? 'unknown'}`,
+      { canvas: canvasAbsPath, id: artboardId }
+    );
+  }
+  const target = collectJsxByTag(parsed.program, 'DCArtboard').find(
+    (a) => getStringAttr(a.openingElement, 'id') === artboardId
+  );
+  if (!target) {
+    throw new CanvasEditError(`<DCArtboard id="${artboardId}"> not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id: artboardId,
+    });
+  }
+  const s = new MagicString(source);
+  editStringAttr(s, target.openingElement, 'label', clean, canvasAbsPath, artboardId);
+  const out = s.toString();
+  const check = parseSync(canvasAbsPath, out, { sourceType: 'module' });
+  if (check.errors && check.errors.length > 0) {
+    throw new CanvasEditError(
+      `artboard rename produced invalid source (${check.errors[0]?.message ?? 'parse error'})`,
+      { canvas: canvasAbsPath, id: artboardId }
+    );
+  }
+  return { source: out };
+}
+
+/** Rename an artboard on disk (atomic write + cross-process lock). */
+export async function setArtboardLabel(
+  canvasAbsPath: string,
+  artboardId: string,
+  label: string
+): Promise<{ source: string }> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id: artboardId,
+      });
+    }
+    const source = await file.text();
+    const next = applySetArtboardLabel(canvasAbsPath, source, artboardId, label);
+    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;
+  });
+}
+
 /** Set an artboard's `kind` on disk (atomic write + cross-process lock). */
 export async function setArtboardKind(
   canvasAbsPath: string,
@@ -4649,6 +4896,28 @@ export function assembleCompSource(
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
+/**
+ * The literal an attribute expression IS — a string, number or boolean (a
+ * negative number arrives as a unary minus) — or null for anything computed.
+ */
+function literalOfExpression(expr: AnyNode): string | number | boolean | null {
+  if (!expr) return null;
+  if (expr.type === 'Literal' || expr.type === 'StringLiteral') {
+    const v = expr.value;
+    return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' ? v : null;
+  }
+  if (expr.type === 'NumericLiteral') return typeof expr.value === 'number' ? expr.value : null;
+  if (expr.type === 'BooleanLiteral') return typeof expr.value === 'boolean' ? expr.value : null;
+  if (
+    expr.type === 'UnaryExpression' &&
+    expr.operator === '-' &&
+    (expr.argument?.type === 'Literal' || expr.argument?.type === 'NumericLiteral') &&
+    typeof expr.argument.value === 'number'
+  )
+    return -expr.argument.value;
+  return null;
+}
+
 function editStringAttr(
   s: MagicString,
   opening: AnyNode,
@@ -4675,6 +4944,9 @@ function editStringAttr(
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
+      // Setting the value it already has is not an edit (plan T23): keep the
+      // author's bytes, quote style included.
+      if (typeof v.value === 'string' && v.value === value) return;
       // Replace the whole `"value"` (quotes included) so we control the escaping.
       // The value lands in a JSX *attribute*, where `"` must become `&quot;` and
       // `<`/`>` their entities — NOT JS backslash escaping. `JSON.stringify` would
@@ -4699,6 +4971,25 @@ function editStringAttr(
           { canvas: canvasAbsPath, id }
         );
       }
+      // A NUMBER OR BOOLEAN STAYS ONE (plan T23). `height={400}`,
+      // `durationInFrames={30}`, `aria-pressed={false}` used to come back as
+      // `"400"` / `"30"` / `"false"` — a different type, which a component that
+      // does arithmetic on its prop (every Remotion timing prop) silently
+      // mis-reads — and even an edit to the value it already had rewrote the
+      // bytes. The same value is now no edit; a new number or boolean is
+      // written into the braces it came in.
+      const lit = literalOfExpression(inner);
+      if (lit !== null) {
+        if (String(lit) === value) return;
+        if (typeof lit === 'number' && /^-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+        if (typeof lit === 'boolean' && (value === 'true' || value === 'false')) {
+          s.overwrite(inner.start, inner.end, value);
+          return;
+        }
+      }
       // Replace the whole `{...}` with a plain quoted literal — keeps the
       // resulting JSX readable. Same JSX-attribute escaping as above (NOT
       // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
@@ -5354,3 +5645,173 @@ if (import.meta.main) {
     process.exit(2);
   }
 }
+
+// ---------------------------------------------------------------------------
+// Position-independent element identity — plan T23/T24 (DDR-241).
+//
+// `data-cd-id` is positional (component + pre-order index), so a sibling a
+// teammate inserted earlier in the same component renumbers everything after
+// it. An edit made through the UI is re-applied onto the project's newer
+// version when its own proposal lost a race (sync/source-ops.ts); before it
+// touches anything there, it has to find THE SAME element — by what the
+// element is, not where it was.
+//
+// A print is the enclosing component, the tag, the chain of ancestor tags and
+// the element's literal attributes (minus the one being edited, minus the
+// pipeline's own `data-cd-*`). It identifies an element when exactly one
+// element in the newer source carries it; anything else is ambiguous, and an
+// ambiguous edit is never guessed at.
+
+export interface ElementPrint {
+  component: string;
+  tag: string;
+  chain: string[];
+  attrs: string;
+  /** The element's own literal text (bounded) — absent for a text edit, whose text is what changes. */
+  text?: string;
+}
+
+function ownText(node: AnyNode): string {
+  let t = '';
+  for (const c of Array.isArray(node?.children) ? node.children : []) {
+    if (c?.type === 'JSXText') t += String(c.value);
+  }
+  return t.replace(/\s+/g, ' ').trim().slice(0, 80);
+}
+
+function literalAttrs(opening: AnyNode, ignore: string | null): string {
+  const out: string[] = [];
+  for (const a of Array.isArray(opening?.attributes) ? opening.attributes : []) {
+    if (a?.type !== 'JSXAttribute' || a.name?.type !== 'JSXIdentifier') continue;
+    const name = String(a.name.name);
+    if (name.startsWith('data-cd-') || name === 'style' || name === ignore || name === 'key')
+      continue;
+    const v = a.value;
+    const lit =
+      v?.type === 'Literal' || v?.type === 'StringLiteral'
+        ? String(v.value)
+        : v?.type === 'JSXExpressionContainer' &&
+            (v.expression?.type === 'Literal' || v.expression?.type === 'StringLiteral')
+          ? String(v.expression.value)
+          : v === null || v === undefined
+            ? 'true'
+            : '{expr}';
+    out.push(`${name}=${lit}`);
+  }
+  return out.sort().join('|');
+}
+
+function printAll(
+  canvasAbsPath: string,
+  source: string,
+  ignoreAttr: string | null,
+  withText = true
+): Array<{ id: string; print: ElementPrint }> {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) return [];
+  const frames: Array<{ componentName: string; jsxIndex: number }> = [
+    { componentName: '', jsxIndex: 0 },
+  ];
+  const chain: string[] = [];
+  const out: Array<{ id: string; print: ElementPrint }> = [];
+  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 comp = componentNameOf(node);
+    if (comp !== null) frames.push({ componentName: comp, jsxIndex: 0 });
+    if (node.type === 'JSXElement') {
+      const frame = frames[frames.length - 1] as { componentName: string; jsxIndex: number };
+      const idx = frame.jsxIndex;
+      frame.jsxIndex += 1;
+      const tag = jsxTagName(node) ?? '?';
+      out.push({
+        id: authoredCdId(node.openingElement) ?? computeId(frame.componentName, idx),
+        print: {
+          component: frame.componentName,
+          tag,
+          chain: [...chain],
+          attrs: literalAttrs(node.openingElement, ignoreAttr),
+          ...(withText ? { text: ownText(node) } : {}),
+        },
+      });
+      chain.push(tag);
+      if (node.openingElement) visit(node.openingElement.attributes);
+      visit(node.children);
+      chain.pop();
+      if (comp !== null) frames.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 (comp !== null) frames.pop();
+  }
+  visit(parsed.program);
+  return out;
+}
+
+const samePrint = (a: ElementPrint, b: ElementPrint) =>
+  a.component === b.component &&
+  a.tag === b.tag &&
+  a.attrs === b.attrs &&
+  (a.text ?? null) === (b.text ?? null) &&
+  a.chain.length === b.chain.length &&
+  a.chain.every((t, i) => t === b.chain[i]);
+
+/** The print of the element `id` in `source`, or null. */
+export function elementPrint(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  ignoreAttr: string | null = null,
+  withText = true
+): ElementPrint | null {
+  return (
+    printAll(canvasAbsPath, source, ignoreAttr, withText).find((e) => e.id === id)?.print ?? null
+  );
+}
+
+/**
+ * The id the element printed `print` has in `source` — `hint` first (the
+ * common case: nothing moved), else the ONE element carrying the print. Null
+ * when it is gone or ambiguous.
+ */
+export function relocateElement(
+  canvasAbsPath: string,
+  source: string,
+  hint: string,
+  print: ElementPrint,
+  ignoreAttr: string | null = null
+): string | null {
+  const all = printAll(canvasAbsPath, source, ignoreAttr, print.text !== undefined);
+  const atHint = all.find((e) => e.id === hint);
+  if (atHint && samePrint(atHint.print, print)) return hint;
+  const matches = all.filter((e) => samePrint(e.print, print));
+  return matches.length === 1 ? (matches[0] as { id: string }).id : null;
+}
+
+/** T23 — every JSX element of `source` with its id and print (corpus checks). */
+export function listElements(
+  canvasAbsPath: string,
+  source: string
+): Array<{ id: string; print: ElementPrint }> {
+  return printAll(canvasAbsPath, source, null);
+}
+
+/** T23 — how many elements of `source` carry a print no other element shares. */
+export function printUniqueness(
+  canvasAbsPath: string,
+  source: string
+): { elements: number; unique: number } {
+  const all = printAll(canvasAbsPath, source, null);
+  const key = (p: ElementPrint) =>
+    `${p.component}|${p.tag}|${p.chain.join('>')}|${p.attrs}|${p.text ?? ''}`;
+  const counts = new Map<string, number>();
+  for (const e of all) counts.set(key(e.print), (counts.get(key(e.print)) ?? 0) + 1);
+  return { elements: all.length, unique: all.filter((e) => counts.get(key(e.print)) === 1).length };
+}