@1agh/maude 0.28.0 → 0.29.0

package/apps/studio/canvas-create.ts

@@ -0,0 +1,104 @@
+// canvas-create.ts — Phase 22 UI add-on. Pure helpers behind POST /_api/canvas
+// (api.ts createCanvas), which lets the browser file-tree create a blank brief
+// board directly — no slash command, no model cost. Generation (ingesting a
+// board's notes into artboards) stays with Claude via `/design:new`; this only
+// stamps out the empty annotation surface.
+//
+// SINGLE SOURCE — the board envelope is the SAME `brief-board.tsx.template`
+// `/design:new --blank` substitutes. We text-import it so Bun.build inlines the
+// content into the `bun --compile` standalone binary (verified: works at dev
+// runtime AND embeds at build time), sidestepping DDR-045 — no runtime disk read
+// of a file that lives outside `apps/studio/`. The template stayed under the
+// design plugin (plugins/design/templates) when the studio moved (DDR-095).
+
+import briefBoardTemplate from '../../plugins/design/templates/brief-board.tsx.template' with {
+  type: 'text',
+};
+
+export const BRIEF_BOARD_TEMPLATE: string = briefBoardTemplate;
+
+/**
+ * The ONE security boundary for the create endpoint. A canvas name is the only
+ * user-controlled value, and it is interpolated into BOTH a real nested
+ * filesystem path (`<group>/<name>.tsx`) AND the generated `.tsx` (JSX text) +
+ * `.meta.json` (JSON string). This strict allowlist does triple duty:
+ *   • path safety   — no `/`, `\`, `..`, or leading dot ⇒ no traversal;
+ *   • template safety — no `<`, `>`, `{`, `}` ⇒ can't break out of JSX text;
+ *   • JSON safety    — no `"` or `\` ⇒ can't break out of a meta string.
+ * Unicode letters/numbers are allowed (so "Onboarding Brief" / accented names
+ * work); the first char must be a letter/number (excludes leading space/dash/dot).
+ */
+const NAME_RE = /^[\p{L}\p{N}][\p{L}\p{N} _-]{0,59}$/u;
+
+export interface NameValidation {
+  ok: boolean;
+  name?: string;
+  componentName?: string;
+  error?: string;
+}
+
+export function validateCanvasName(raw: unknown): NameValidation {
+  if (typeof raw !== 'string') return { ok: false, error: 'name must be a string' };
+  // NFC-normalize so a decomposed (NFD) name and its composed sibling can't hash
+  // to two JS strings that collide to ONE on-disk path on a normalizing filesystem
+  // (APFS/HFS+) — which would let the 409 existence guard be bypassed and an
+  // existing board silently overwritten (Phase 22 security review, low). Collapse
+  // runs of SPACES (the one allowed whitespace) to a single space so the JS slug
+  // (`/\s+/→_`) and slug.sh (`tr ' ' '_'`) can't diverge on a double-spaced name
+  // (review #4); tabs/newlines stay un-collapsed and are rejected by NAME_RE.
+  const name = raw.normalize('NFC').trim().replace(/ +/g, ' ');
+  if (!name) return { ok: false, error: 'name is required' };
+  if (name.length > 60) return { ok: false, error: 'name must be 60 characters or fewer' };
+  if (!NAME_RE.test(name)) {
+    return {
+      ok: false,
+      error: 'name may contain only letters, numbers, spaces, hyphens and underscores',
+    };
+  }
+  // Defense in depth — the regex already forbids these, but assert no path bits
+  // survive (a regex edit must never silently re-open traversal).
+  if (name.includes('..') || name.includes('/') || name.includes('\\') || name.startsWith('.')) {
+    return { ok: false, error: 'name may not contain path separators or leading dots' };
+  }
+  return { ok: true, name, componentName: componentNameFrom(name) };
+}
+
+/** PascalCase a name into a valid JS identifier for the component default export.
+ *  Non-identifier characters split words; an empty / digit-leading result gets a
+ *  `Board` prefix so the emitted `export default function <id>()` always parses. */
+export function componentNameFrom(name: string): string {
+  // Split on NON-(letter|number) so Unicode letters survive (the validator
+  // accepts them) — `Přihlášení` → `Přihlášení`, a valid JS identifier (verified
+  // it parses), not the ASCII-mangled `PIhlEn` (review #1). Empty (all-symbol) →
+  // `BriefBoard`; a digit-leading result (incl. Unicode digits) → `Board…` so the
+  // emitted `export default function <id>()` always parses.
+  const pascal = name
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter(Boolean)
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join('');
+  if (!pascal) return 'BriefBoard';
+  if (/^\p{Nd}/u.test(pascal)) return `Board${pascal}`;
+  return pascal;
+}
+
+export interface BriefBoardOpts {
+  name: string;
+  componentName: string;
+  dsName: string;
+  platform: string;
+  seedHint: string;
+  historyDir: string;
+}
+
+/** Substitute the brief-board template placeholders. Safe because `name`
+ *  (the only user value reaching here) is validated by `validateCanvasName`,
+ *  and every other field is server-derived (config / fixed strings). */
+export function renderBriefBoard(opts: BriefBoardOpts): string {
+  return BRIEF_BOARD_TEMPLATE.replaceAll('{{NAME}}', opts.name)
+    .replaceAll('{{COMPONENT_NAME}}', opts.componentName)
+    .replaceAll('{{DS_NAME}}', opts.dsName)
+    .replaceAll('{{PLATFORM}}', opts.platform)
+    .replaceAll('{{SEED_HINT}}', opts.seedHint)
+    .replaceAll('{{HISTORY_DIR}}', opts.historyDir);
+}

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,9 @@ export const TOOL_CURSORS: Record<Tool, string> = Object.freeze({
   hand: HAND,
   comment: COMMENT,
   pen: PEN,
+  // 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,
@@ -168,6 +202,6 @@ export const TOOL_CURSORS: Record<Tool, string> = Object.freeze({
  */
 export function resolveToolCursor(token: unknown): string | null {
   if (typeof token !== 'string' || !/^[a-z-]+$/.test(token)) return null;
-  if (!Object.prototype.hasOwnProperty.call(TOOL_CURSORS, token)) return null;
+  if (!Object.hasOwn(TOOL_CURSORS, token)) return null;
   return TOOL_CURSORS[token as Tool];
 }

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,11 +416,58 @@ 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,

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/"),

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

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-lib.tsx — dev-server-bundled canvas library
- * @scope      plugins/design/dev-server/canvas-lib.tsx
+ * @scope      apps/studio/canvas-lib.tsx
  *             Ships with the dev-server install; resolved at canvas build time
  *             via the `@maude/canvas-lib` virtual specifier. Per DDR-025, this
  *             is the single source of truth — no project-side copy.
@@ -67,14 +67,19 @@
  * deprecation log at dev-server boot.
  */
 
+import {
+  AnimatePresence as _MotionAnimatePresence,
+  motion as _motionImpl,
+  useReducedMotion as _useReducedMotion,
+} from 'motion/react';
 import {
   type CSSProperties,
+  createContext,
   Fragment,
+  isValidElement,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
   type RefObject,
-  createContext,
-  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -84,12 +89,6 @@ import {
   useState,
 } from 'react';
 
-import {
-  AnimatePresence as _MotionAnimatePresence,
-  motion as _motionImpl,
-  useReducedMotion as _useReducedMotion,
-} from 'motion/react';
-
 import { ArtboardActivityOverlay } from './artboard-activity-overlay.tsx';
 import { CanvasShell } from './canvas-shell.tsx';
 import {
@@ -138,10 +137,9 @@ const ENGINE_CSS = `
   /* Canvas-shell chrome — the workspace plane + dotted grid follow the Maude
      chrome theme (--maude-chrome-*), NOT the DS palette. See canvas-shell.tsx
      HUD_TOKENS_CSS. Artboards (.dc-artboard) keep the DS theme. */
-  background-color: var(--maude-chrome-bg-1, #f4f1ea);
+  background-color: var(--maude-chrome-bg-0, #f4f1ea);
   background-image:
-    linear-gradient(var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px),
-    linear-gradient(90deg, var(--maude-chrome-border, rgba(0,0,0,0.08)) 1px, transparent 1px);
+    radial-gradient(var(--maude-chrome-dot, rgba(0,0,0,0.12)) 1.1px, transparent 1.2px);
   background-size: 24px 24px;
 }
 /* DDR-046 — Snap guides. Sibling kind = confident magenta + glow + distance
@@ -200,6 +198,17 @@ const ENGINE_CSS = `
      irrelevant under zoom (zoom anchors top-left of the box). will-change
      hints to the compositor that this layer changes often. */
   will-change: transform;
+  /* Marquee / multi-select drags over artboards must not trigger native text
+     selection (it highlighted the canvas content). Editable surfaces re-enable
+     it below. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+.dc-world input,
+.dc-world textarea,
+.dc-world [contenteditable="true"] {
+  user-select: text;
+  -webkit-user-select: text;
 }
 .dc-section-collapsed { display: contents; }
 
@@ -1163,7 +1172,7 @@ export function useDragStateContext(): DragStateBus | null {
 interface DesignCanvasProps {
   children: ReactNode;
   /** Per-overlay opt-out. `false` hides it; omit or `true` shows it. */
-  controls?: { minimap?: boolean; toolbar?: boolean };
+  controls?: { minimap?: boolean; toolbar?: boolean; zoom?: boolean };
 }
 
 /**
@@ -1375,6 +1384,7 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   );
 
   const showMiniMap = controls?.minimap !== false;
+  const showZoom = controls?.zoom !== false;
 
   // Drag-state bus (Phase 4.2). Single source of truth: only one artboard
   // drag is active at a time. DCArtboards write here when their local drag
@@ -1446,10 +1456,12 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
         {children}
       </div>
       {showMiniMap ? <DCMiniMap /> : null}
-      {/* DCZoomToolbar is intentionally not rendered here. The Phase 5.1
-          ToolPalette absorbs its 4 actions into the unified canvas chrome.
-          The component stays exported for back-compat with any consumer that
-          still imports it directly. */}
+      {/* Plan C F6 — separate bottom-left zoom pill (the design's ZoomHud).
+          Phase 5.1 had folded zoom into the ToolPalette; user feedback wants
+          the design's standalone pill, so DCZoomToolbar renders here again (the
+          ToolPalette's inline zoom is removed in tool-palette.tsx). It carries
+          MORE than the mock — fit + actual-size — so no capability is lost. */}
+      {showZoom ? <DCZoomToolbar /> : null}
     </div>
   );
 
@@ -1901,6 +1913,9 @@ const OVERLAY_CSS = `
   overflow: hidden;
 }
 .dc-mm-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 5px 8px 4px;
   border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   letter-spacing: 0.05em;
@@ -1908,6 +1923,7 @@ const OVERLAY_CSS = `
   font-size: 9px;
   background: var(--maude-chrome-bg-1, #f4f1ea);
 }
+.dc-mm-count { font-variant-numeric: tabular-nums; color: var(--maude-chrome-fg-2, rgba(40,30,20,0.55)); }
 .dc-mm-body {
   position: relative;
   width: 100%;
@@ -1933,9 +1949,8 @@ const OVERLAY_CSS = `
 }
 .dc-zoom-tb {
   position: absolute;
-  left: 50%;
+  left: 16px;
   bottom: 16px;
-  transform: translateX(-50%);
   display: flex;
   align-items: stretch;
   background: var(--maude-chrome-bg-0, #ffffff);
@@ -2106,7 +2121,10 @@ export function DCMiniMap() {
   return (
     <div className="dc-mm" aria-hidden="true">
       <div className="dc-mm-hd">
-        WORLD MAP · {world.artboards.length}/{world.artboards.length}
+        <span>World</span>
+        <span className="dc-mm-count">
+          {world.artboards.length} / {world.artboards.length}
+        </span>
       </div>
       <div
         className="dc-mm-body"
@@ -2204,11 +2222,7 @@ export function SpecimenHeader({
 }
 
 /** `<dl class="specimen-meta">` ladder. */
-export function SpecimenMeta({
-  entries,
-}: {
-  entries: Array<{ label: string; value: ReactNode }>;
-}) {
+export function SpecimenMeta({ entries }: { entries: Array<{ label: string; value: ReactNode }> }) {
   return (
     <dl className="specimen-meta">
       {entries.map(({ label, value }) => (
@@ -2227,13 +2241,7 @@ export function KbdHint({ children }: { children: ReactNode }) {
 }
 
 /** Inline `var(--name)` value visualiser — small chip + token name. */
-export function TokenChip({
-  name,
-  swatch,
-}: {
-  name: string;
-  swatch?: boolean;
-}) {
+export function TokenChip({ name, swatch }: { name: string; swatch?: boolean }) {
   return (
     <span className="token-chip" data-token={name}>
       {swatch ? (
@@ -2763,7 +2771,7 @@ export function ReducedMotionToggle() {
 }
 
 export {
+  _MotionAnimatePresence as AnimatePresence,
   _motionImpl as motion,
   _useReducedMotion as useReducedMotion,
-  _MotionAnimatePresence as AnimatePresence,
 };