@1agh/maude 0.28.1 → 0.30.0

package/{plugins/design/dev-server → apps/studio}/canvas-cursors.ts

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-cursors.ts — Phase 24 custom tool cursors (Kenney CC0)
- * @scope      plugins/design/dev-server/canvas-cursors.ts
+ * @scope      apps/studio/canvas-cursors.ts
  * @purpose    FigJam/Figma-style custom cursors for EVERY canvas tool. The
  *             native crosshair / text / arrow cursors are tiny + thin and
  *             vanish on busy canvases; these are 32×32 SVG cursors that read on
@@ -46,16 +46,29 @@ const HALO = "stroke='#ffffff' stroke-linejoin='round' stroke-linecap='round'";
 // Kenney's outline band (`b`) is painted WHITE (the halo) and its inner fill
 // (`w`) is painted dark INK. Reads crisply on a LIGHT canvas (solid dark glyph)
 // AND a dark one (white halo edge).
-function kenney(b: string, w: string): string {
-  return `<svg ${W}><path fill='#ffffff' d='${b}'/><path fill='${INK}' d='${w}'/></svg>`;
+function kenney(b: string, w: string, transform?: string): string {
+  // Optional `<g transform>` for the drawing tools whose Kenney glyph needs
+  // re-orienting so the writing tip lands at the hotspot (user steer
+  // 2026-06-04: pen / highlighter "kreslí pod koncem, ne na špičce" → flipped so
+  // the nib points down-LEFT, top-right→bottom-left).
+  const open = transform ? `<g transform='${transform}'>` : '';
+  const close = transform ? '</g>' : '';
+  return `<svg ${W}>${open}<path fill='#ffffff' d='${b}'/><path fill='${INK}' d='${w}'/>${close}</svg>`;
 }
 
+// Vertical mirror about the 32-viewBox horizontal centre: (x,y) → (x, 32−y).
+// Applied to pen/highlighter so the glyph lies along the top-right→bottom-left
+// diagonal with the nib at bottom-left.
+const FLIP_V = 'translate(0,32) scale(1,-1)';
+
+// move → Kenney `pointer_b` (user steer 2026-06-04 — the plain variant, not the
+// shaded one). Hotspot at the arrow tip (top).
 const MOVE = svgCursor(
   kenney(
-    'M16.75 23.9 L20 22.55 20.5 22.15 20.35 21.55 18.4 17.75 21.25 17.25 21.75 17 22 16.45 Q22 16.1 21.6 15.9 L11.45 8.2 11.4 8.2 10.85 8 10.2 8.25 10 8.8 10 20.75 Q10 21.55 10.85 21.55 L11.4 21.35 13.6 19.8 15.6 23.5 16.05 23.95 16.75 23.9 M8 8.8 Q7.95 8.05 8.55 7.15 L8.95 6.75 Q9.8 6 10.85 6 11.55 6 12.2 6.35 L12.65 6.6 22.65 14.15 Q24.15 15 24 16.45 24.05 17.55 23.2 18.45 L23.05 18.55 Q22.1 19.3 21.45 19.3 L22.1 20.55 Q22.5 21.2 22.5 22.15 L22.05 23.4 20.9 24.35 20.8 24.4 17.55 25.75 15.25 25.8 Q14.15 25.4 13.75 24.25 L12.95 22.75 12.65 22.9 12.55 23 Q11.75 23.55 10.85 23.55 7.95 23.55 8 20.75 L8 8.8',
-    'M16.75 23.9 L16.05 23.95 15.6 23.5 13.6 19.8 11.4 21.35 10.85 21.55 Q10 21.55 10 20.75 L10 8.8 10.2 8.25 10.85 8 11.4 8.2 11.45 8.2 21.6 15.9 Q22 16.1 22 16.45 L21.75 17 21.25 17.25 18.4 17.75 20.35 21.55 20.5 22.15 20 22.55 16.75 23.9'
+    'M10.25 8.25 L10.05 8.65 10 9 10 23.1 10.05 23.4 10.25 23.75 10.8 24 11.45 23.85 11.6 23.7 11.75 23.45 14.65 19.8 14.85 19.65 14.95 19.5 15.4 19.2 15.95 19.1 21.05 19.1 21.2 19.1 21.35 19.05 21.65 18.9 21.9 18.6 22 18.3 22 17.9 21.9 17.65 21.75 17.35 21.65 17.3 21.55 17.15 11.5 8.25 11.25 8.05 10.95 8 10.6 8.05 10.25 8.25 M9.15 6.6 L9.7 6.25 10 6.15 10.95 6 11.9 6.15 13 6.9 22.9 15.65 23 15.8 23.2 15.95 23.75 16.75 24 17.9 24 18.3 23.9 18.95 23.8 19.25 23.6 19.7 23.1 20.35 22.75 20.6 22.1 20.9 22.05 20.95 22 20.95 21.2 21.1 21.05 21.1 16.2 21.1 16.1 21.25 16.05 21.25 13.4 24.6 13.05 25.15 12.9 25.3 12.55 25.55 Q11.6 26.15 10.55 26 L10.5 26 Q9.65 25.85 9 25.3 L8.45 24.65 8.4 24.5 8.15 24.05 8 23.1 8 9 Q8 8.45 8.15 8.05 L8.25 7.75 8.45 7.35 9.15 6.6',
+    'M10.25 8.25 L10.6 8.05 10.95 8 11.25 8.05 11.5 8.25 21.55 17.15 21.65 17.3 21.75 17.35 21.9 17.65 22 17.9 22 18.3 21.9 18.6 21.65 18.9 21.35 19.05 21.2 19.1 21.05 19.1 15.95 19.1 15.4 19.2 14.95 19.5 14.85 19.65 14.65 19.8 11.75 23.45 11.6 23.7 11.45 23.85 10.8 24 10.25 23.75 10.05 23.4 10 23.1 10 9 10.05 8.65 10.25 8.25'
   ),
-  6,
+  8,
   5,
   'default'
 );
@@ -68,22 +81,40 @@ const HAND = svgCursor(
   12,
   'grab'
 );
+// comment → Kenney `message_round` (user steer 2026-06-04). Hotspot at the
+// tail tip (bottom-centre), where the comment pin is dropped.
 const COMMENT = svgCursor(
   kenney(
-    'M8 4 Q4 4 4 8 L4 20 Q4 24 8 24 L12 24 15.3 27.3 16 27.6 16.7 27.3 20 24 24 24 Q28 24 28 20 L28 8 Q28 4 24 4 L8 4 M24 2 Q30 2 30 8 L30 20 Q30 26 24 26 L20.85 26 18.15 28.75 Q17.2 29.6 16 29.6 14.8 29.6 13.9 28.75 L11.15 26 8 26 Q2 26 2 20 L2 8 Q2 2 8 2 L24 2 M24 14 Q24 14.85 23.4 15.4 22.85 16 22 16 21.15 16 20.55 15.4 20 14.85 20 14 20 13.15 20.55 12.55 21.15 12 22 12 22.85 12 23.4 12.55 24 13.15 24 14 M12 14 Q12 14.85 11.4 15.4 10.85 16 10 16 9.15 16 8.55 15.4 8 14.85 8 14 8 13.15 8.55 12.55 9.15 12 10 12 10.85 12 11.4 12.55 12 13.15 12 14 M18 14 Q18 14.85 17.4 15.4 16.85 16 16 16 15.15 16 14.55 15.4 14 14.85 14 14 14 13.15 14.55 12.55 15.15 12 16 12 16.85 12 17.4 12.55 18 13.15 18 14',
-    'M18 14 Q18 13.15 17.4 12.55 16.85 12 16 12 15.15 12 14.55 12.55 14 13.15 14 14 14 14.85 14.55 15.4 15.15 16 16 16 16.85 16 17.4 15.4 18 14.85 18 14 M8 4 L24 4 Q28 4 28 8 L28 20 Q28 24 24 24 L20 24 16.7 27.3 16 27.6 15.3 27.3 12 24 8 24 Q4 24 4 20 L4 8 Q4 4 8 4 M12 14 Q12 13.15 11.4 12.55 10.85 12 10 12 9.15 12 8.55 12.55 8 13.15 8 14 8 14.85 8.55 15.4 9.15 16 10 16 10.85 16 11.4 15.4 12 14.85 12 14 M24 14 Q24 13.15 23.4 12.55 22.85 12 22 12 21.15 12 20.55 12.55 20 13.15 20 14 20 14.85 20.55 15.4 21.15 16 22 16 22.85 16 23.4 15.4 24 14.85 24 14'
+    'M28 14 Q28 9.85 24.45 6.9 20.95 4 16 4 11.05 4 7.5 6.9 L7.45 7 Q4 9.9 4 14 4 18.15 7.55 21.05 L7.5 21.05 Q9.2 22.45 11.2 23.2 L15.3 27.3 16 27.6 16.7 27.3 20.85 23.2 Q22.7 22.45 24.3 21.15 L24.45 21.05 Q28 18.15 28 14 M25.75 5.35 Q30.05 8.95 30 14 30.05 19.05 25.75 22.6 L25.4 22.85 Q23.8 24.1 22 24.9 L18.1 28.75 18.15 28.75 Q17.2 29.6 16 29.6 14.8 29.6 13.85 28.75 L13.9 28.75 10 24.9 6.6 22.85 6.25 22.6 Q1.95 19.05 2 14 1.95 8.95 6.25 5.35 10.3 2 16 2 21.7 2 25.75 5.35',
+    'M28 14 Q28 18.15 24.45 21.05 L24.3 21.15 Q22.7 22.45 20.85 23.2 L16.7 27.3 16 27.6 15.3 27.3 11.2 23.2 Q9.2 22.45 7.5 21.05 L7.55 21.05 Q4 18.15 4 14 4 9.9 7.45 7 L7.5 6.9 Q11.05 4 16 4 20.95 4 24.45 6.9 28 9.85 28 14'
   ),
   12,
-  22,
+  21,
   'crosshair'
 );
+// pen → Kenney `drawing_pen`, mirrored vertically (FLIP_V) so the nib points
+// down-LEFT (top-right→bottom-left diagonal). Source gradient-shade path dropped.
+// Hotspot at the nib, bottom-left.
 const PEN = svgCursor(
+  kenney(
+    'M4 13.1 L4 6 Q4 5.15 4.6 4.6 5.15 4 6 4 L13.1 4 Q13.95 4 14.55 4.6 L28.65 18.75 Q29.8 19.9 29.75 21.45 L29.75 21.6 29.75 21.7 Q29.75 23.2 28.7 24.35 L24.45 28.65 24.35 28.75 Q23.15 29.85 21.65 29.8 L21.55 29.8 21.4 29.8 Q20.2 29.8 19.25 29.15 L18 29.35 Q16.6 29.4 15.25 28 L15.2 27.95 8.2 20.95 Q7.6 20.35 7.6 19.55 7.6 18.7 8.2 18.1 L4.6 14.5 Q4 13.9 4 13.1 M19.5 26.65 L20.1 27.25 Q20.7 27.85 21.5 27.8 22.35 27.85 23 27.25 L27.25 22.95 Q27.8 22.35 27.75 21.55 27.8 20.75 27.2 20.15 L13.1 6 6 6 6 13.1 12.35 19.45 9.6 19.5 16.65 26.55 Q18.05 28.05 19.5 26.65 M8.05 12.3 L8 8 12.25 8.05 13.8 9.6 9.6 13.85 8.05 12.3 M15.25 11.05 L23 18.8 18.8 23.05 11.05 15.3 15.25 11.05',
+    'M15.25 11.05 L11.05 15.3 18.8 23.05 23 18.8 15.25 11.05 M12.35 19.45 L6 13.1 6 6 13.1 6 27.2 20.15 Q27.8 20.75 27.75 21.55 27.8 22.35 27.25 22.95 L23 27.25 Q22.35 27.85 21.5 27.8 20.7 27.85 20.1 27.25 L19.5 26.65 12.35 19.45 M8.05 12.3 L9.6 13.85 13.8 9.6 12.25 8.05 8 8 8.05 12.3',
+    FLIP_V
+  ),
+  6,
+  18,
+  'crosshair'
+);
+// highlighter → Kenney `drawing_pencil`, also mirrored vertically (distinct from
+// the pen glyph). Hotspot at the lead tip, bottom-left.
+const HIGHLIGHTER = svgCursor(
   kenney(
     'M5.15 10.85 Q4 9.65 4 8.1 L4 7.95 4 7.85 Q3.95 6.2 5.1 5.15 6.25 4 7.85 4 L7.95 4 8.1 4 Q9.65 4 10.85 5.15 L11 5.3 14.3 5.25 Q15.15 5.25 15.75 5.85 L29.9 20 Q31 21.15 31 22.75 L31 22.85 31 23 Q31.05 24.5 29.9 25.7 L29.55 25.95 25.65 29.9 25.65 29.95 Q24.45 31.1 22.75 31.1 21.2 31.15 20 29.95 L5.85 15.8 Q5.25 15.2 5.25 14.35 L5.25 10.95 5.15 10.85 M19.95 24.2 L18.55 22.8 22.8 18.55 24.2 19.95 19.95 24.2 M28.45 21.4 L14.3 7.25 10.15 7.3 9.4 6.55 Q8.8 5.95 7.95 6 7.1 5.95 6.5 6.55 5.95 7.1 6 7.95 5.95 8.8 6.55 9.4 L7.25 10.1 7.25 14.35 21.4 28.5 Q22 29.1 22.75 29.1 23.6 29.1 24.2 28.5 L28.45 24.25 Q29.05 23.65 29 22.85 29.05 22 28.45 21.4 M9.25 13.5 L9.25 9.3 13.5 9.25 14.3 10.05 10.05 14.3 9.25 13.5 M17.15 21.4 L11.5 15.75 15.75 11.5 21.4 17.15 17.15 21.4',
-    'M17.15 21.4 L21.4 17.15 15.75 11.5 11.5 15.75 17.15 21.4 M28.45 21.4 Q29.05 22 29 22.85 29.05 23.65 28.45 24.25 L24.2 28.5 Q23.6 29.1 22.75 29.1 22 29.1 21.4 28.5 L7.25 14.35 7.25 10.1 6.55 9.4 Q5.95 8.8 6 7.95 5.95 7.1 6.5 6.55 7.1 5.95 7.95 6 8.8 5.95 9.4 6.55 L10.15 7.3 14.3 7.25 28.45 21.4 M19.95 24.2 L24.2 19.95 22.8 18.55 18.55 22.8 19.95 24.2 M9.25 13.5 L10.05 14.3 14.3 10.05 13.5 9.25 9.25 9.3 9.25 13.5'
+    'M17.15 21.4 L21.4 17.15 15.75 11.5 11.5 15.75 17.15 21.4 M28.45 21.4 Q29.05 22 29 22.85 29.05 23.65 28.45 24.25 L24.2 28.5 Q23.6 29.1 22.75 29.1 22 29.1 21.4 28.5 L7.25 14.35 7.25 10.1 6.55 9.4 Q5.95 8.8 6 7.95 5.95 7.1 6.5 6.55 7.1 5.95 7.95 6 8.8 5.95 9.4 6.55 L10.15 7.3 14.3 7.25 28.45 21.4 M19.95 24.2 L24.2 19.95 22.8 18.55 18.55 22.8 19.95 24.2 M9.25 13.5 L10.05 14.3 14.3 10.05 13.5 9.25 9.25 9.3 9.25 13.5',
+    FLIP_V
   ),
-  20,
-  20,
+  6,
+  18,
   'crosshair'
 );
 const CROSSHAIR = svgCursor(
@@ -140,6 +171,11 @@ export const TOOL_CURSORS: Record<Tool, string> = Object.freeze({
   hand: HAND,
   comment: COMMENT,
   pen: PEN,
+  // FigJam v3 — the section container draws like a shape (crosshair glyph).
+  section: CROSSHAIR,
+  // Highlighter = Kenney `drawing_pencil` rot180; pen = `drawing_pen` rot180 —
+  // distinct glyphs, both from the Kenney pack (user steer 2026-06-04).
+  highlighter: HIGHLIGHTER,
   shape: CROSSHAIR,
   rect: CROSSHAIR,
   ellipse: CROSSHAIR,

package/{plugins/design/dev-server → apps/studio}/canvas-edit.ts

@@ -68,6 +68,8 @@ function computeId(componentName: string, idx: number): string {
 
 interface OpeningHit {
   opening: AnyNode;
+  /** The full JSXElement node — `editText` needs `.children` (JSXText), not just the opening tag. */
+  element: AnyNode;
 }
 
 /**
@@ -108,7 +110,7 @@ function findOpening(program: AnyNode, targetId: string): OpeningHit | null {
       frame.jsxIndex += 1;
       const id = computeId(frame.componentName, idx);
       if (id === targetId) {
-        hit = { opening: node.openingElement };
+        hit = { opening: node.openingElement, element: node };
       }
       if (!hit) {
         if (node.openingElement) visit(node.openingElement.attributes);
@@ -200,6 +202,111 @@ export async function editAttribute(
   });
 }
 
+/**
+ * Remove an attribute (or one inline-style property) from the element with the
+ * given `data-cd-id` — the "reset to original" path (Phase 12.3). `attr` follows
+ * the same shape as `editAttribute`: `style.<camelOrKebab>` removes one inline
+ * style key (dropping the whole `style={{}}` when it was the last key); any other
+ * name removes that plain JSX attribute. A missing key/attribute is a no-op
+ * (delta 0), never an error. Same atomic write + per-file lock as `editAttribute`.
+ */
+export async function removeAttribute(
+  canvasAbsPath: string,
+  id: string,
+  attr: string
+): Promise<EditResult> {
+  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 = applyRemove(canvasAbsPath, source, id, attr);
+    if (next.source === source) return { source, delta: 0 };
+    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 `removeAttribute` — exposed for tests. */
+export function applyRemove(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  attr: string
+): EditResult {
+  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,
+      }
+    );
+  }
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const s = new MagicString(source);
+  if (attr.startsWith('style.')) {
+    removeStyleProp(s, hit.opening, attr.slice('style.'.length), source);
+  } else if (attr === 'data-cd-id') {
+    throw new CanvasEditError('data-cd-id is owned by the pipeline; cannot be removed', {
+      canvas: canvasAbsPath,
+      id,
+    });
+  } else {
+    removeStringAttr(s, hit.opening, attr, source);
+  }
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
+/**
+ * Apply an inline TEXT-content edit to the JSX element with the given
+ * `data-cd-id`. Leaf-text only: the element's children must be exactly one
+ * `JSXText` node (whitespace-only siblings are ignored). Mixed/expression
+ * children (`<b>x</b>`, `{count}`) throw `CanvasEditError` — the caller should
+ * surface a "use /design:edit" refusal rather than guess. The text is
+ * JSX-escaped before it touches source. Same atomic write + per-file lock as
+ * `editAttribute`. See DDR-103.
+ */
+export async function editText(
+  canvasAbsPath: string,
+  id: string,
+  text: string
+): Promise<EditResult> {
+  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 = applyTextEdit(canvasAbsPath, source, id, text);
+    if (next.source === source) return { source, delta: 0 };
+    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 — exposed for tests + in-memory pipelines. Caller owns
  * persistence. Throws CanvasEditError if the ID isn't found or the edit shape
@@ -245,6 +352,68 @@ export function applyEdit(
   return { source: out, delta: out.length - source.length };
 }
 
+/**
+ * Pure variant of `editText` — parse, locate the JSXText child, overwrite its
+ * source span (preserving the original leading/trailing whitespace so JSX
+ * indentation survives), escaping the new text. Throws `CanvasEditError` for a
+ * missing id, no text content, or mixed/expression children.
+ */
+export function applyTextEdit(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  text: string
+): EditResult {
+  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 }
+    );
+  }
+
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+
+  const children: AnyNode[] = Array.isArray(hit.element?.children) ? hit.element.children : [];
+  // Ignore whitespace-only JSXText siblings (`<button>\n  Save\n</button>` parses
+  // as one JSXText; `<a>\n  <b/>\n</a>` parses as ws + element + ws — the ws is
+  // noise). What's left is the "real" content.
+  const meaningful = children.filter(
+    (c) => !(c?.type === 'JSXText' && typeof c.value === 'string' && c.value.trim() === '')
+  );
+  if (meaningful.length === 0) {
+    throw new CanvasEditError(`element "${id}" has no editable text content`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const only = meaningful[0];
+  if (meaningful.length > 1 || only?.type !== 'JSXText') {
+    throw new CanvasEditError(
+      `element "${id}" has mixed or expression content — edit it via /design:edit`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  const start = only.start as number;
+  const end = only.end as number;
+  const raw = source.slice(start, end);
+  // Preserve the original indentation/newline framing; swap only the visible text.
+  const lead = /^\s*/.exec(raw)?.[0] ?? '';
+  const trail = /\s*$/.exec(raw)?.[0] ?? '';
+  const s = new MagicString(source);
+  s.overwrite(start, end, `${lead}${escapeJsxText(text)}${trail}`);
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
@@ -263,14 +432,20 @@ function editStringAttr(s: MagicString, opening: AnyNode, name: string, value: s
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
-      // Replace just the value text, keeping surrounding quotes.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // 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
+      // emit `\"`, which is invalid in a JSX attribute and corrupts the source on
+      // any value containing a double quote. Use the same `escapeAttr` as the two
+      // insert branches so all four paths agree. See DDR-103 / DDR-105.
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     if (v.type === 'JSXExpressionContainer') {
       // Replace the whole `{...}` with a plain quoted literal — keeps the
-      // resulting JSX readable, no escaping gymnastics.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // resulting JSX readable. Same JSX-attribute escaping as above (NOT
+      // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     // Unknown shape — refuse rather than corrupt.
@@ -289,6 +464,24 @@ function escapeAttr(value: string): string {
   return value.replace(/"/g, '&quot;').replace(/[<>]/g, (c) => (c === '<' ? '&lt;' : '&gt;'));
 }
 
+/**
+ * Escape JSX-significant characters so user-typed text lands in source `.tsx`
+ * as inert TEXT, never as markup or an expression. The text is written between
+ * an element's tags (`<button>HERE</button>`), where `<`/`>` would start a tag
+ * and `{`/`}` would open a JSX expression — so all four (plus a bare `&`, which
+ * begins an entity) are encoded. This is the load-bearing guard that keeps the
+ * inline text editor (Phase 12) from being a source-injection vector. See
+ * DDR-103.
+ */
+function escapeJsxText(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;');
+}
+
 function editStyleProp(
   s: MagicString,
   opening: AnyNode,
@@ -308,14 +501,14 @@ function editStyleProp(
     return;
   }
   const v = attr.value;
-  if (!v || v.type !== 'JSXExpressionContainer') {
+  if (v?.type !== 'JSXExpressionContainer') {
     throw new CanvasEditError(
       `style attribute on ${id} is not a {{...}} expression — refusing to edit`,
       { canvas: canvasAbsPath, id }
     );
   }
   const obj = v.expression;
-  if (!obj || obj.type !== 'ObjectExpression') {
+  if (obj?.type !== 'ObjectExpression') {
     throw new CanvasEditError(
       `style={...} on ${id} is not an inline ObjectExpression — refusing to edit`,
       { canvas: canvasAbsPath, id }
@@ -349,6 +542,63 @@ function editStyleProp(
   void tail;
 }
 
+/**
+ * Remove a single inline-style property (the "reset to original" path — DDR-104
+ * Phase 12.3). No-op when the style attribute or the key is absent. When the key
+ * was the object's ONLY property, the whole `style={{…}}` attribute is removed so
+ * we don't leave an empty `style={{}}` behind.
+ */
+function removeStyleProp(s: MagicString, opening: AnyNode, prop: string, source: string): boolean {
+  const attr = findAttribute(opening, 'style');
+  if (!attr) return false;
+  const v = attr.value;
+  if (v?.type !== 'JSXExpressionContainer') return false;
+  const obj = v.expression;
+  if (obj?.type !== 'ObjectExpression') return false;
+  const props = (obj.properties as AnyNode[]).filter(
+    (p) => p?.type === 'Property' || p?.type === 'ObjectProperty'
+  );
+  const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  const idx = props.findIndex((p) => {
+    const k = p.key;
+    const kname =
+      k?.type === 'Identifier' ? k.name : k?.type === 'Literal' ? String(k.value) : null;
+    return kname === prop || kname === propCamel;
+  });
+  if (idx === -1) return false;
+
+  // Only property → drop the whole `style={{…}}` attribute (plus the leading space).
+  if (props.length === 1) {
+    const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+    s.remove(start, attr.end);
+    return true;
+  }
+  // Otherwise remove the one property + one adjacent comma/whitespace run so the
+  // remaining object stays well-formed: consume forward to the next prop's start
+  // (eats the trailing `, `), or — for the last prop — backward from the previous
+  // prop's end (eats the leading `, `).
+  const target = props[idx];
+  if (idx < props.length - 1) {
+    s.remove(target.start as number, props[idx + 1].start as number);
+  } else {
+    s.remove(props[idx - 1].end as number, target.end as number);
+  }
+  return true;
+}
+
+/**
+ * Remove a plain JSX attribute (the custom-attribute "reset" path). No-op when
+ * absent. Refuses `data-cd-id` / `style` (pipeline-owned / wrong endpoint).
+ */
+function removeStringAttr(s: MagicString, opening: AnyNode, name: string, source: string): boolean {
+  if (name === 'data-cd-id' || name === 'style') return false;
+  const attr = findAttribute(opening, name);
+  if (!attr) return false;
+  const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+  s.remove(start, attr.end);
+  return true;
+}
+
 /**
  * Render a JS object key — bare identifier when the prop is camelCase + valid
  * JS id, quoted otherwise. Mirrors how authors write JSX styles.

package/{plugins/design/dev-server → apps/studio}/canvas-icons.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-icons.tsx — Phase 5.1 inline-SVG icon set
- * @scope      plugins/design/dev-server/canvas-icons.tsx
+ * @scope      apps/studio/canvas-icons.tsx
  * @purpose    Tiny dependency-free Lucide-style icon set for the canvas
  *             chrome (tool palette, context toolbar). Each icon is a single
  *             `<svg>` with `currentColor` stroke so it inherits the button
@@ -122,6 +122,18 @@ export function IconText(props: IconProps) {
   );
 }
 
+// Phase 23 — link (chain) glyph, used by the annotation context toolbar's
+// "Open link" button. (Media is paste/drop-only — no toolbar buttons — so the
+// picture-frame image icon was dropped.)
+export function IconLink(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </Svg>
+  );
+}
+
 export function IconPresentation(props: IconProps) {
   return (
     <Svg {...props}>
@@ -404,16 +416,65 @@ export function IconAlignRight(props: IconProps) {
   );
 }
 
+// ── Annotation polish text-style icons (italic / underline / lists) ──────────
+export function IconItalic(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 5h8M6 19h8M14 5l-4 14" />
+    </Svg>
+  );
+}
+export function IconUnderline(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M7 4v7a5 5 0 0010 0V4M5 20h14" />
+    </Svg>
+  );
+}
+export function IconListBullet(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M9 6h11M9 12h11M9 18h11" />
+      <circle cx="4.5" cy="6" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="12" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="18" r="1.1" fill="currentColor" stroke="none" />
+    </Svg>
+  );
+}
+export function IconListOrdered(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M10 6h10M10 12h10M10 18h10" />
+      <path d="M3 5l1.4-.5V9M3 9h2.8" strokeWidth={1.4} />
+      <path d="M3.2 14.2a1 1 0 011.7.7c0 .9-1.7 1.4-1.7 2.6h2" strokeWidth={1.4} />
+    </Svg>
+  );
+}
+
+// ── Annotation polish — highlighter (chisel-tip marker) ──────────────────────
+export function IconHighlighter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M14 4l6 6-8.5 8.5H6v-5.5z" />
+      <path d="M11 7l6 6" />
+      <path d="M4 21h7" strokeWidth={2.5} />
+    </Svg>
+  );
+}
+
 export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   move: IconMove,
   hand: IconHand,
   comment: IconComment,
   pen: IconPen,
+  highlighter: IconHighlighter,
   // Phase 24 — single Shape tool. rect/ellipse kept for any legacy lookups.
   shape: IconShape,
   rect: IconRect,
   ellipse: IconEllipse,
   sticky: IconSticky,
+  // FigJam v3 — labelled organizing container.
+  section: IconSection,
   arrow: IconArrow,
   text: IconText,
   eraser: IconEraser,
@@ -428,3 +489,106 @@ export const SHAPE_KIND_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   triangle: IconTriangle,
   'triangle-down': IconTriangleDown,
 };
+
+// ── FigJam v3 — multi-select manipulation icons ──────────────────────────────
+// Object align (an edge line + two boxes), distribute (rails + a box), and
+// group/ungroup. Same 24×24 stroke language as the rest of the set.
+
+export function IconObjAlignLeft(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18" />
+      <rect x="7" y="6" width="11" height="4" rx="1" />
+      <rect x="7" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignHCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 3v2M12 19v2" />
+      <rect x="6" y="6" width="12" height="4" rx="1" />
+      <rect x="8" y="14" width="8" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignRight(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M20 3v18" />
+      <rect x="6" y="6" width="11" height="4" rx="1" />
+      <rect x="11" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignTop(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18" />
+      <rect x="6" y="7" width="4" height="11" rx="1" />
+      <rect x="14" y="7" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignVCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h2M19 12h2" />
+      <rect x="6" y="6" width="4" height="12" rx="1" />
+      <rect x="14" y="8" width="4" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignBottom(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 20h18" />
+      <rect x="6" y="6" width="4" height="11" rx="1" />
+      <rect x="14" y="11" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeH(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18M20 3v18" />
+      <rect x="9" y="8" width="6" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeV(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18M3 20h18" />
+      <rect x="8" y="9" width="8" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconGroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 7V4a1 1 0 011-1h3M17 3h3a1 1 0 011 1v3M21 17v3a1 1 0 01-1 1h-3M7 21H4a1 1 0 01-1-1v-3" />
+      <rect x="7" y="7" width="6" height="6" rx="1" />
+      <rect x="11" y="11" width="6" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconUngroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="7" height="7" rx="1" />
+      <rect x="13" y="13" width="7" height="7" rx="1" />
+      <path d="M15 6l3 3M6 15l3 3" />
+    </Svg>
+  );
+}
+
+/** FigJam v3 — section tool: a region with its name chip docked top-left. */
+export function IconSection(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="8" width="16" height="12" rx="2" />
+      <path d="M4 4h7" />
+    </Svg>
+  );
+}

package/{plugins/design/dev-server → apps/studio}/canvas-lib-inline.ts

@@ -3,7 +3,7 @@
 //
 // `/design:handoff` emits a self-contained shadcn registry-item.json. Canvases
 // import their envelope + helpers from `@maude/canvas-lib`, which the dev-server
-// resolves to its bundled `plugins/design/dev-server/canvas-lib.tsx`. The
+// resolves to its bundled `apps/studio/canvas-lib.tsx`. The
 // handoff drop must inline every used export so the consumer never sees the
 // `@maude/canvas-lib` specifier — it's a dev-time virtual module, not a real
 // npm dep.

package/{plugins/design/dev-server → apps/studio}/canvas-lib-resolver.ts

@@ -2,7 +2,7 @@
 //
 // Canvases import the shared canvas library via the specifier `@maude/canvas-lib`.
 // At build time we redirect that to the dev-server-bundled source at
-// `plugins/design/dev-server/canvas-lib.tsx` so:
+// `apps/studio/canvas-lib.tsx` so:
 //
 //   - the lib ships with the dev-server install (single source of truth — see
 //     DDR-025; reverses DDR-022's "project-owned source under <designRoot>/_lib/"),