@1agh/maude 1.0.11 → 1.3.0

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,
   });
 }
 
@@ -3930,6 +4072,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,
@@ -5354,3 +5576,165 @@ 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 — 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 };
+}

package/apps/studio/canvas-imports.ts

@@ -0,0 +1,89 @@
+// Relative-import rewriting for a canvas that CHANGES FOLDER (issue #114).
+//
+// THE BUG THIS MODULE EXISTS TO FIX. `moveCanvas` / `moveFolder` relocated a
+// canvas with a bare `rename()` — bytes moved, specifiers didn't. A canvas
+// dragged from `ui/` into `ui/print/` kept
+//
+//     import { … } from "../system/alligators/preview/_kit";
+//     import "../system/alligators/preview/_layout.css";
+//
+// which is only correct one level up, so the canvas 500s on the next build with
+// `Could not resolve`. Nothing anywhere in the tree rewrote imports; the
+// capability simply did not exist. It reads like a sync bug from the outside
+// (the broken file shows up on every peer), which is how it got reported
+// alongside one — but it is entirely local to the move.
+//
+// Deliberately regex-over-known-vocabulary rather than a parser: it matches the
+// house style of the other static readers (`_canvas-rects-static.mjs`), it
+// cannot fail closed on a canvas whose syntax a parser would reject, and the
+// vocabulary is small and fixed. Only `./`- and `../`-prefixed specifiers are
+// touched — a bare or aliased specifier (`react`, `@maude/canvas-lib`) is
+// resolved by the bundler, not by depth, and rewriting one would break it.
+
+import path from 'node:path';
+
+/**
+ * Every shape that can carry a module specifier in a canvas body, as
+ * [pattern, index of the capture group holding the quoted specifier].
+ *
+ *   from "…"      — `import x from`, `export … from`
+ *   import "…"    — side-effect import (this is the one that carries `_layout.css`)
+ *   import("…")   — dynamic import
+ *
+ * `require("…")` is deliberately absent: canvases are ESM (Bun.build), and a
+ * `require` in one is not something this should quietly rewrite.
+ */
+const SPECIFIER_PATTERNS: readonly RegExp[] = [
+  /(\bfrom\s*)(["'])([^"']+)\2/g,
+  /(\bimport\s*)(["'])([^"']+)\2/g,
+  /(\bimport\s*\(\s*)(["'])([^"']+)\2/g,
+];
+
+/** Is this a path-relative specifier (the only kind whose meaning depends on
+ *  which folder the importing file sits in)? */
+export function isRelativeSpecifier(spec: string): boolean {
+  return spec.startsWith('./') || spec.startsWith('../');
+}
+
+/**
+ * Re-root one relative specifier from `fromDir` to `toDir`.
+ *
+ * Both dirs are POSIX, design-root-relative (`''` = the design root itself).
+ * Returns the specifier unchanged when it isn't relative.
+ */
+export function rerootSpecifier(spec: string, fromDir: string, toDir: string): string {
+  if (!isRelativeSpecifier(spec)) return spec;
+  // What the specifier pointed AT, as a design-root-relative path. `join` +
+  // `normalize` collapse the `..` segments; a target above the design root stays
+  // expressed with leading `..` and re-roots just as correctly.
+  const target = path.posix.normalize(path.posix.join(fromDir, spec));
+  let next = path.posix.relative(toDir, target);
+  // `relative` drops the leading `./` that makes a same-dir specifier relative
+  // rather than bare — without it `sibling.css` would resolve as a PACKAGE.
+  if (!next.startsWith('.')) next = `./${next}`;
+  // A trailing slash in the source (`from "../lib/"`) is meaningful to a
+  // resolver; `normalize`/`relative` drop it, so put it back.
+  if (spec.endsWith('/') && !next.endsWith('/')) next = `${next}/`;
+  return next;
+}
+
+/**
+ * Rewrite every relative import in `source` for a file that moved from
+ * `fromDir` to `toDir` (both POSIX, design-root-relative).
+ *
+ * Returns the source unchanged when the two dirs are the same or nothing
+ * relative was found, so a caller can cheaply skip the write.
+ */
+export function rewriteRelativeImports(source: string, fromDir: string, toDir: string): string {
+  const from = path.posix.normalize(fromDir === '' ? '.' : fromDir);
+  const to = path.posix.normalize(toDir === '' ? '.' : toDir);
+  if (from === to) return source;
+  let out = source;
+  for (const pattern of SPECIFIER_PATTERNS) {
+    out = out.replace(pattern, (whole, lead: string, quote: string, spec: string) => {
+      if (!isRelativeSpecifier(spec)) return whole;
+      return `${lead}${quote}${rerootSpecifier(spec, from, to)}${quote}`;
+    });
+  }
+  return out;
+}

package/apps/studio/canvas-lib.tsx

@@ -475,6 +475,17 @@ button.dc-artboard-label {
   width: 100%;
 }
 button.dc-artboard-label:focus-visible { outline: 2px solid var(--maude-hud-accent, #d63b1f); outline-offset: -2px; }
+input.dc-artboard-rename {
+  appearance: none;
+  border-width: 0 0 1px 0;
+  font: inherit;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  text-transform: none;
+  outline: 2px solid var(--maude-hud-accent, #d63b1f);
+  outline-offset: -2px;
+}
 /* DDR-148 — video-artboard badge, overlaid top-right of the header. Opens
    the timeline panel (same postMessage the context-menu entry sends). */
 .dc-canvas .dc-artboard-video-badge {
@@ -2447,6 +2458,25 @@ export function DCArtboard({
   // edited), so it never ratchets up from a previously-larger measured value
   // the way feeding `rect.h` back as the floor would.
   const heightFloor = typeof height === 'number' ? height : VP_GRID.h;
+  // Plan T25/L08 — rename in place: double-click the name, Enter commits (the
+  // shell writes the `label` prop), Escape or an unchanged name cancels.
+  const [renaming, setRenaming] = useState(false);
+  const renameDoneRef = useRef(false);
+  const commitRename = (value: string) => {
+    if (renameDoneRef.current) return;
+    renameDoneRef.current = true;
+    setRenaming(false);
+    const next = value.trim();
+    if (!next || next === label) return;
+    try {
+      window.parent.postMessage(
+        { dgn: 'rename-artboard-request', artboardId: id, label: next },
+        '*'
+      );
+    } catch {
+      /* detached / cross-origin */
+    }
+  };
   const articleRef = useRef<HTMLElement | null>(null);
   const measured = useArtboardBounds(articleRef as RefObject<HTMLElement | null>);
   useEffect(() => {
@@ -2590,24 +2620,58 @@ export function DCArtboard({
         }}
         {...handleProps}
       >
-        <button
-          type="button"
-          className="dc-artboard-label sku"
-          // a11y-auditor (T3 review) — the kind chip is aria-hidden (decorative,
-          // redundant with the Inspector's Kind picker), so a non-digital kind
-          // must still reach the artboard's own accessible name or it's
-          // invisible to AT users entirely.
-          aria-label={
-            resolvedKind !== 'digital' ? `Artboard ${label}, ${resolvedKind}` : `Artboard ${label}`
-          }
-        >
-          {resolvedKind !== 'digital' ? (
-            <span className="dc-artboard-kind-chip" aria-hidden="true">
-              <ArtboardKindIcon kind={resolvedKind} />
-            </span>
-          ) : null}
-          {label}
-        </button>
+        {renaming ? (
+          <input
+            className="dc-artboard-label sku dc-artboard-rename"
+            data-testid={`artboard-rename-${id}`}
+            aria-label="Artboard name"
+            defaultValue={label}
+            maxLength={80}
+            // biome-ignore lint/a11y/noAutofocus: the rename field opens on the designer's own double-click
+            autoFocus
+            onFocus={(e) => e.currentTarget.select()}
+            // The label is the drag handle; typing and clicking in the field
+            // must not start a move or reach the canvas shortcuts.
+            onPointerDown={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === 'Enter') commitRename(e.currentTarget.value);
+              else if (e.key === 'Escape') {
+                renameDoneRef.current = true;
+                setRenaming(false);
+              }
+            }}
+            onBlur={(e) => commitRename(e.currentTarget.value)}
+          />
+        ) : (
+          <button
+            type="button"
+            className="dc-artboard-label sku"
+            onDoubleClick={(e) => {
+              if (isReadOnlyCanvas()) return;
+              e.stopPropagation();
+              renameDoneRef.current = false;
+              setRenaming(true);
+            }}
+            // a11y-auditor (T3 review) — the kind chip is aria-hidden (decorative,
+            // redundant with the Inspector's Kind picker), so a non-digital kind
+            // must still reach the artboard's own accessible name or it's
+            // invisible to AT users entirely.
+            aria-label={
+              resolvedKind !== 'digital'
+                ? `Artboard ${label}, ${resolvedKind}`
+                : `Artboard ${label}`
+            }
+          >
+            {resolvedKind !== 'digital' ? (
+              <span className="dc-artboard-kind-chip" aria-hidden="true">
+                <ArtboardKindIcon kind={resolvedKind} />
+              </span>
+            ) : null}
+            {label}
+          </button>
+        )}
         {hasVideo ? (
           <button
             type="button"