@1agh/maude 0.28.1 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/bin/screenshot.sh

@@ -213,6 +213,55 @@ capture() {
   fi
 }
 
+# ---------- port-bounce recovery (P2.1 / DDR-094) ----------
+# The dev server can respawn on a DIFFERENT port (the prior port got taken, a
+# Tailscale/mDNS hiccup bounced it, a stale _server.json was cleared). A capture
+# launched against the OLD port then fails with ERR_CONNECTION_REFUSED. The
+# running server keeps _server.json current, so on any capture failure we re-read
+# the LIVE port and, if it changed, rewrite $URL and retry once.
+RELIVE_REPO="${ROOT:-${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null || pwd)}}"
+RELIVE_STATE="$RELIVE_REPO/.design/_server.json"
+RELIVED=0
+
+read_state_port() {
+  [ -f "$RELIVE_STATE" ] || return 1
+  if command -v jq >/dev/null 2>&1; then
+    jq -r .port "$RELIVE_STATE" 2>/dev/null
+  else
+    sed -nE 's/.*"port"[[:space:]]*:[[:space:]]*([0-9]+).*/\1/p' "$RELIVE_STATE" 2>/dev/null | head -n1
+  fi
+}
+
+# Re-read the live port; if it differs from the one in $URL, rewrite $URL and
+# return 0 (a retry is warranted). Returns 1 when nothing changed (don't retry).
+# Only fires ONCE per run (RELIVED guard) so a genuinely-down server still fails.
+relive_url() {
+  [ "$RELIVED" -eq 0 ] || return 1
+  local cur new
+  cur=$(printf '%s' "$URL" | sed -nE 's#https?://[^:/]+:([0-9]+).*#\1#p')
+  new=$(read_state_port)
+  [ -n "$new" ] || return 1
+  if [ -n "$cur" ] && [ "$cur" != "$new" ]; then
+    URL=$(printf '%s' "$URL" | sed -E "s#(://[^:/]+:)[0-9]+#\1${new}#")
+    RELIVED=1
+    echo "→ dev-server bounced ports ($cur → $new); re-reading _server.json and retrying at $URL" >&2
+    return 0
+  fi
+  return 1
+}
+
+# capture(), but on failure re-read the live port and retry once if it bounced.
+capture_resilient() {
+  local css="$1"
+  local out="$2"
+  capture "$css" "$out" && return 0
+  if relive_url; then
+    navigate_once
+    capture "$css" "$out" && return 0
+  fi
+  return 1
+}
+
 # ---------- --all-screens loop ----------
 if [ $ALL_SCREENS -eq 1 ]; then
   mkdir -p "$OUT_DIR"
@@ -227,6 +276,17 @@ if [ $ALL_SCREENS -eq 1 ]; then
     # Strip surrounding quotes, then split on comma.
     IDS=$(printf '%s' "$raw" | sed 's/^"//; s/"$//' | tr ',' '\n')
   fi
+  # No screens enumerated may mean the page never loaded (port bounce) — try a
+  # live-port re-read + one re-navigate before giving up.
+  if [ -z "$IDS" ] && relive_url; then
+    navigate_once
+    if [ "$ENGINE" = "agent-browser" ]; then
+      raw=$(agent-browser eval \
+        "Array.from(document.querySelectorAll('[data-dc-screen],[data-dc-slot]')).map(e => e.getAttribute('data-dc-screen') || e.getAttribute('data-dc-slot')).filter(Boolean).join(',')" \
+        2>/dev/null)
+      IDS=$(printf '%s' "$raw" | sed 's/^"//; s/"$//' | tr ',' '\n')
+    fi
+  fi
   if [ -z "$IDS" ]; then
     echo "✗ no [data-dc-screen]/[data-dc-slot] elements found (or eval unavailable on this engine)" >&2
     exit 3
@@ -241,7 +301,7 @@ if [ $ALL_SCREENS -eq 1 ]; then
       agent-browser eval "document.querySelector('[data-dc-screen=\"$ID\"], [data-dc-slot=\"$ID\"]').scrollIntoView({block:'center'})" >/dev/null 2>&1
       sleep 0.6
     fi
-    if capture "[data-dc-screen=\"$ID\"], [data-dc-slot=\"$ID\"]" "$OUT_FILE"; then
+    if capture_resilient "[data-dc-screen=\"$ID\"], [data-dc-slot=\"$ID\"]" "$OUT_FILE"; then
       echo "$OUT_FILE"
     else
       echo "✗ failed: $ID" >&2
@@ -254,7 +314,7 @@ fi
 
 # ---------- single-shot ----------
 navigate_once
-if capture "$CSS_SEL" "$OUT"; then
+if capture_resilient "$CSS_SEL" "$OUT"; then
   echo "$OUT"
   exit 0
 fi

package/{plugins/design/dev-server → apps/studio}/bin/server-up.sh

@@ -55,7 +55,12 @@ fi
 #     `bash server-up.sh` falls back to the postinstall side-channel.
 #   bun + server.ts → dev tree / fallback (DDR-020 made bun authoritative for source).
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
-PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(cd "$SCRIPT_DIR/../.." && pwd)}"
+# PLUGIN_ROOT is a 2-levels-under-pkgRoot anchor: plugins/design when `maude
+# design <verb>` sets CLAUDE_PLUGIN_ROOT, else apps/studio ($SCRIPT_DIR/.. — the
+# studio root, also 2-deep) for a direct `bash server-up.sh`. Both keep
+# `$PLUGIN_ROOT/../../cli` = <pkgRoot>/cli. The dev-server tree itself is always
+# $SCRIPT_DIR/.. (apps/studio) — DDR-095 moved it out of plugins/design.
+PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(cd "$SCRIPT_DIR/.." && pwd)}"
 SERVER_TS="$PLUGIN_ROOT/dev-server/server.ts"
 SERVER_MJS="$PLUGIN_ROOT/dev-server/server.mjs"
 if [ ! -f "$SERVER_TS" ]; then SERVER_TS="$SCRIPT_DIR/../server.ts"; fi
@@ -66,7 +71,8 @@ if [ ! -f "$SERVER_MJS" ]; then SERVER_MJS="$SCRIPT_DIR/../server.mjs"; fi
 # `bash server-up.sh` on a production install). MAUDE_FORCE_SOURCE=1 forces source.
 SERVER_BIN="${MAUDE_DEV_SERVER_BIN:-}"
 if [ -z "$SERVER_BIN" ] && [ "${MAUDE_FORCE_SOURCE:-0}" != "1" ]; then
-  # PLUGIN_ROOT=<pkgRoot>/plugins/design, so the side-channel is ../../cli.
+  # PLUGIN_ROOT is 2-deep under pkgRoot (plugins/design or apps/studio), so the
+  # side-channel is ../../cli either way.
   # `head -n1` (parity with the Node readers' `.trim()`) tolerates a trailing newline.
   SC="$PLUGIN_ROOT/../../cli/.platform-binary-path"
   if [ -f "$SC" ]; then
@@ -154,7 +160,7 @@ fi
 # Step 1.5 — dependency preflight (source `bun server.ts` path ONLY; runs on cold
 # start). The compiled binary embeds its deps, so this is skipped when RUNTIME=binary
 # — it only guards the source fallback. The dev-server's runtime deps live in a
-# NESTED package.json (plugins/design/dev-server/) that a global `@1agh/maude` npm
+# NESTED package.json (apps/studio/) that a global `@1agh/maude` npm
 # install or a fresh `git worktree` does NOT populate; a missing `yjs` (imported at
 # boot by sync/index.ts) crashes `bun server.ts` AFTER spawn → without this guard we
 # poll the full ${TIMEOUT}s and report a generic "start timeout", burying the cause

package/apps/studio/bin/to-lottie-verify.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<!-- to-lottie-verify.html — self-verify harness for `maude design to-lottie --verify`.
+     Renders ANY Lottie JSON through the REAL lottie-web runtime (NOT cairo — cairo
+     can't render masks; lottie-web must — DDR-094 rule 5). Generalized from the POC
+     verify.html: the Lottie source + the seek frame are query params.
+
+     Serve this dir (file:// blocks fetch):  python3 -m http.server 8200
+     Usage:  to-lottie-verify.html?src=<file.json>&f=<frame>   (omit ?f to autoplay)
+             &bg=<css color>  — backdrop (default dark)  ·  &w=&h= — stage size px -->
+<html>
+  <head>
+    <meta charset="utf8" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+      #stage {
+        margin: 20px auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="stage"></div>
+    <script>
+      const p = new URLSearchParams(location.search);
+      const src = p.get('src');
+      const f = p.get('f');
+      const bg = p.get('bg') || '#0a0a14';
+      const w = p.get('w') || '400';
+      const h = p.get('h') || '400';
+      document.body.style.background = bg;
+      const stage = document.getElementById('stage');
+      stage.style.width = `${w}px`;
+      stage.style.height = `${h}px`;
+
+      if (!src) {
+        document.title = 'error-no-src';
+      } else {
+        fetch(`./${src}`)
+          .then((r) => {
+            if (!r.ok) throw new Error(`fetch ${src} → ${r.status}`);
+            return r.json();
+          })
+          .then((data) => {
+            const anim = lottie.loadAnimation({
+              container: stage,
+              renderer: 'svg',
+              loop: true,
+              autoplay: f === null,
+              animationData: data,
+            });
+            anim.addEventListener('DOMLoaded', () => {
+              if (f !== null) anim.goToAndStop(parseInt(f, 10), true);
+              document.title = `ready${f !== null ? `-${f}` : ''}`;
+            });
+            anim.addEventListener('error', () => {
+              document.title = 'error-render';
+            });
+          })
+          .catch((e) => {
+            document.title = `error-${String(e.message || e).slice(0, 40)}`;
+          });
+      }
+    </script>
+  </body>
+</html>

package/apps/studio/bin/to-lottie.sh

@@ -0,0 +1,128 @@
+#!/usr/bin/env bash
+# to-lottie.sh — emit ONE Lottie from CODE (the maude motion handoff, DDR-094).
+#
+# This is the production-delivery counterpart to draw-build.sh: where draw-build
+# runs an agent-authored *engine* script to emit static SVG/JSX, to-lottie runs an
+# agent-authored *python-lottie generator* to emit ONE `.lottie`/`.json` that
+# renders 1:1 on web (lottie-web / dotlottie-react) AND mobile
+# (lottie-react-native) — same renderer family, 1:1 by construction. It is an
+# EMITTER from the keyframe data, NOT a converter of rendered SVG/SMIL (no reliable
+# one exists — DDR-094 research). The generator encodes the 8 conversion rules; see
+# `plugins/design/commands/to-lottie.md` + `_draw-motion-rules.md`.
+#
+# Reached via `maude design to-lottie` (DDR-062), never a raw bin path.
+#
+# Usage:
+#   to-lottie.sh --script <gen.py> --out <mark.json>
+#                [--verify] [--frames "0,33,66"] [--root <repo>] [--timeout 12]
+#
+# The generator (gen.py) builds the Lottie via python-lottie and writes it to the
+# path in $MAUDE_LOTTIE_OUT (= --out). python-lottie owns format correctness
+# (beziers, keyframes, gradients, masks, parenting); the agent encodes the
+# conversion rules (per-segment easing incl. overshoot, arc parsing via
+# parse_svg_file, layers[0]=top + reverse, masks, baked sub-loops, coord offset,
+# gradient opacity stops).
+#
+# --verify renders frames through HEADLESS lottie-web (cairo can't render masks —
+# lottie-web must) using the shipped harness + the screenshot helper, so you can
+# read the PNGs and compare to the web reference.
+#
+# Stdout (last line): the output .json path (capturable in $(...)).
+# Exit: 0 ok / 1 missing input or runtime / 2 bad args / 3 generate failed
+#       / 4 verify render failed.
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+GEN=""
+OUT=""
+VERIFY=0
+FRAMES="0,33,66"
+REPO=""
+TIMEOUT=12
+
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --script)  GEN="$2"; shift 2 ;;
+    --out)     OUT="$2"; shift 2 ;;
+    --verify)  VERIFY=1; shift ;;
+    --frames)  FRAMES="$2"; shift 2 ;;
+    --root)    REPO="$2"; shift 2 ;;
+    --timeout) TIMEOUT="$2"; shift 2 ;;
+    --help|-h) sed -n '2,33p' "$0" | sed 's/^# \?//'; exit 0 ;;
+    *) echo "to-lottie.sh: unknown arg '$1' (try --help)" >&2; exit 2 ;;
+  esac
+done
+
+[ -n "$GEN" ] || { echo "to-lottie.sh: --script <gen.py> required" >&2; exit 2; }
+[ -n "$OUT" ] || { echo "to-lottie.sh: --out <mark.json> required" >&2; exit 2; }
+[ -f "$GEN" ] || { echo "to-lottie.sh: generator not found: $GEN" >&2; exit 1; }
+command -v python3 >/dev/null 2>&1 || { echo "to-lottie.sh: python3 is required." >&2; exit 1; }
+
+# ---------- python-lottie venv (cached, idempotent) ----------
+VENV="${MAUDE_LOTTIE_VENV:-${XDG_CACHE_HOME:-$HOME/.cache}/maude/lottie-venv}"
+PY="$VENV/bin/python"
+if [ ! -x "$PY" ]; then
+  echo "→ bootstrapping python-lottie venv at $VENV (one-off) …" >&2
+  python3 -m venv "$VENV" || { echo "to-lottie.sh: venv create failed" >&2; exit 1; }
+  "$VENV/bin/pip" install --quiet --disable-pip-version-check lottie cairosvg pillow \
+    || { echo "to-lottie.sh: pip install lottie failed (needs network on first run)" >&2; exit 1; }
+fi
+# Sanity: the `lottie` module must import.
+"$PY" -c 'import lottie' 2>/dev/null || {
+  echo "→ (re)installing python-lottie into $VENV …" >&2
+  "$VENV/bin/pip" install --quiet --disable-pip-version-check lottie cairosvg pillow \
+    || { echo "to-lottie.sh: python-lottie unavailable" >&2; exit 1; }
+}
+
+# ---------- generate ----------
+mkdir -p "$(dirname "$OUT")"
+echo "→ generating Lottie: $GEN → $OUT" >&2
+MAUDE_LOTTIE_OUT="$OUT" "$PY" "$GEN" >&2
+GRC=$?
+if [ "$GRC" -ne 0 ] || [ ! -s "$OUT" ]; then
+  echo "to-lottie.sh: generator failed (rc=$GRC) or wrote no output to $OUT" >&2
+  exit 3
+fi
+# Validity gate: the output must be parseable JSON with the Lottie shape keys.
+"$PY" - "$OUT" <<'PYEOF' >&2 || { echo "to-lottie.sh: output is not a valid Lottie JSON" >&2; exit 3; }
+import json, sys
+d = json.load(open(sys.argv[1]))
+assert isinstance(d, dict) and 'layers' in d and 'op' in d, 'missing Lottie keys (layers/op)'
+print(f"  ✓ valid Lottie: {len(d.get('layers', []))} layers, {d.get('op')} frames @ {d.get('fr')}fps")
+PYEOF
+
+# ---------- self-verify through headless lottie-web ----------
+if [ "$VERIFY" -eq 1 ]; then
+  HARNESS="$SCRIPT_DIR/to-lottie-verify.html"
+  [ -f "$HARNESS" ] || { echo "to-lottie.sh: verify harness missing at $HARNESS — reinstall maude." >&2; exit 1; }
+  OUT_DIR_ABS="$(cd "$(dirname "$OUT")" && pwd)"
+  OUT_BASE="$(basename "$OUT")"
+  cp "$HARNESS" "$OUT_DIR_ABS/_to-lottie-verify.html"
+  FRAMES_DIR="$OUT_DIR_ABS/_verify-frames"
+  mkdir -p "$FRAMES_DIR"
+
+  # Serve the dir (file:// blocks fetch of the JSON). Pick a free-ish port.
+  PORT=$(( ( RANDOM % 2000 ) + 8200 ))
+  ( cd "$OUT_DIR_ABS" && "$PY" -m http.server "$PORT" >/dev/null 2>&1 ) &
+  SRV_PID=$!
+  trap 'kill "$SRV_PID" 2>/dev/null; rm -f "$OUT_DIR_ABS/_to-lottie-verify.html"' EXIT
+  sleep 1
+
+  FAIL=0
+  IFS=',' read -r -a FRAME_ARR <<< "$FRAMES"
+  for F in "${FRAME_ARR[@]}"; do
+    F_TRIM="$(printf '%s' "$F" | tr -d '[:space:]')"
+    URL="http://localhost:$PORT/_to-lottie-verify.html?src=$OUT_BASE&f=$F_TRIM"
+    PNG="$FRAMES_DIR/frame-$F_TRIM.png"
+    echo "→ verify frame $F_TRIM ($URL)" >&2
+    bash "$SCRIPT_DIR/screenshot.sh" --url "$URL" --full --out "$PNG" --timeout "$TIMEOUT" >&2 \
+      || { echo "✗ verify frame $F_TRIM failed" >&2; FAIL=$((FAIL + 1)); }
+  done
+  if [ "$FAIL" -gt 0 ]; then
+    echo "to-lottie.sh: $FAIL verify frame(s) failed to render" >&2
+    exit 4
+  fi
+  echo "→ verify frames in $FRAMES_DIR — READ them and compare to the web reference (masks render on lottie-web, NOT cairo)" >&2
+fi
+
+# Last stdout line = the output path, for $(maude design to-lottie ...) capture.
+printf '%s\n' "$OUT"

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

@@ -66,8 +66,8 @@ function ensureDist() {
 }
 
 async function readPluginVersion(): Promise<{ version: string }> {
-  // plugins/design/dev-server/ → plugins/design/.claude-plugin/plugin.json
-  const manifest = join(ROOT, '..', '.claude-plugin', 'plugin.json');
+  // apps/studio/ → ../../plugins/design/.claude-plugin/plugin.json (DDR-095)
+  const manifest = join(ROOT, '..', '..', 'plugins', 'design', '.claude-plugin', 'plugin.json');
   try {
     const parsed = JSON.parse(await Bun.file(manifest).text()) as { version?: unknown };
     if (typeof parsed.version === 'string') return { version: parsed.version };
@@ -257,7 +257,9 @@ async function ensureBindingForTarget(oxcSlug: string): Promise<void> {
   let oxcVersion = '0.131.0';
   const candidates = [
     join(ROOT, 'node_modules', 'oxc-parser', 'package.json'),
-    join(ROOT, '..', '..', '..', 'node_modules', 'oxc-parser', 'package.json'),
+    // apps/studio → ../../ = repo root → node_modules (DDR-095: was ../../../ at
+    // the old plugins/design/dev-server depth).
+    join(ROOT, '..', '..', 'node_modules', 'oxc-parser', 'package.json'),
   ];
   for (const c of candidates) {
     if (existsSync(c)) {

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

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-arrowheads.ts — Phase 24 arrow shaft + head geometry
- * @scope      plugins/design/dev-server/canvas-arrowheads.ts
+ * @scope      apps/studio/canvas-arrowheads.ts
  * @purpose    Single source of truth for arrow rendering. An ArrowStroke is
  *             reduced to an ordered list of `SvgPrimitive`s (the shaft, then
  *             the start head, then the end head). The serializer formats each

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

@@ -1,6 +1,6 @@
 /**
  * @file       canvas-comment-mount.tsx — shell-owned comment layer + mountCanvas
- * @scope      plugins/design/dev-server/canvas-comment-mount.tsx
+ * @scope      apps/studio/canvas-comment-mount.tsx
  * @purpose    The canvas mount harness (`_shell.html`) calls `mountCanvas`
  *             instead of rendering the canvas default-export raw. mountCanvas
  *             wraps ANY default export — a `DesignCanvas` UI canvas OR a bare

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,