@1agh/maude 0.28.1 → 0.29.0

package/apps/studio/use-canvas-media-drop.tsx

@@ -0,0 +1,343 @@
+/**
+ * @file       use-canvas-media-drop.tsx — Phase 23 canvas media intake
+ * @scope      apps/studio/use-canvas-media-drop.tsx
+ * @purpose    OS-level drag-and-drop + clipboard paste of images and URLs onto
+ *             the canvas. Routes each gesture to a create callback owned by
+ *             AnnotationsLayer (which holds the commit/undo sink + screenToWorld):
+ *               • image file → `onImage(file, world)`  → optimistic stroke + upload
+ *               • http(s) URL → `onLink(url, title, world)` → client-only link chip
+ *
+ *             The classification + URL helpers are PURE + exported so the unit
+ *             tests cover the dispatch matrix without a real DataTransfer /
+ *             ClipboardEvent. The hook itself only wires the DOM events and the
+ *             drag-affordance class.
+ *
+ *             Security: link URLs are gated to http(s) (no javascript:/data:);
+ *             image bytes go through POST /_api/asset (magic-byte sniff + caps,
+ *             DDR Task 9). Nothing here trusts the dropped content.
+ */
+
+import { useEffect } from 'react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure helpers (exported for unit tests)
+
+/** A normalized snapshot of a DataTransfer / ClipboardData payload. */
+export interface MediaPayload {
+  files: readonly File[];
+  /** text/uri-list (DnD) */
+  uriList: string;
+  /** text/html (carries the anchor text for a dragged/pasted link) */
+  html: string;
+  /** text/plain */
+  plain: string;
+}
+
+export type MediaIntent =
+  | { kind: 'image'; file: File }
+  | { kind: 'link'; url: string; title: string };
+
+/** True only for an absolute http(s) URL — the one scheme a link chip accepts. */
+export function isHttpUrl(value: string): boolean {
+  try {
+    const u = new URL(value.trim());
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Normalize a single token into a safe http(s) URL, or null. You should NOT have
+ * to type a scheme to paste a link:
+ *   - an explicit scheme is kept ONLY if it's http(s) — `javascript:` / `data:`
+ *     / `file:` / `mailto:` all return null (never reach window.open);
+ *   - a scheme-less but domain-shaped token (`example.com`, `sub.example.io/x`)
+ *     gets `https://` prepended. The TLD must be alphabetic (≥2) so a bare
+ *     decimal like `3.5` or `v1.2` is NOT mistaken for a domain.
+ */
+export function normalizeUrl(raw: string): string | null {
+  const s = raw.trim();
+  if (!s) return null;
+  // Distinguish a real scheme (`http:`, `javascript:`) from a `host:port` colon.
+  // A scheme: the part before the FIRST colon is a valid scheme name (no `/`) AND
+  // the char after the colon is NOT a digit (a digit there is a port → scheme-less).
+  const colon = s.indexOf(':');
+  const hasScheme =
+    colon > 0 &&
+    /^[a-zA-Z][a-zA-Z0-9+.-]*$/.test(s.slice(0, colon)) &&
+    !/^\d/.test(s.slice(colon + 1));
+  if (hasScheme) return isHttpUrl(s) ? s : null;
+  // Scheme-less but domain-shaped (alphabetic TLD ≥2) → assume https.
+  if (/^([a-z0-9-]+\.)+[a-z]{2,}(:\d+)?(\/\S*)?$/i.test(s)) {
+    const u = `https://${s}`;
+    return isHttpUrl(u) ? u : null;
+  }
+  return null;
+}
+
+/**
+ * First link URL in a blob of text, normalized to http(s). Handles a uri-list
+ * (newline-separated, `#` comment lines), a bare-domain paste, and an explicit
+ * inline URL inside prose. Returns null when none.
+ */
+export function firstHttpUrl(text: string): string | null {
+  if (!text) return null;
+  for (const raw of text.split(/[\r\n]+/)) {
+    const line = raw.trim();
+    if (!line || line.startsWith('#')) continue;
+    const u = normalizeUrl(line);
+    if (u) return u;
+  }
+  // Fall back to an explicit inline URL token inside prose (a scheme is required
+  // here — bare-domain detection only fires on a whole standalone line).
+  const m = text.match(/https?:\/\/[^\s"'<>]+/i);
+  return m ? normalizeUrl(m[0]) : null;
+}
+
+/** Hostname without a leading `www.` — the chip's domain label. */
+export function linkDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+/** A readable title fallback when no anchor text is available. */
+export function prettifyUrl(url: string): string {
+  try {
+    const u = new URL(url);
+    const host = u.hostname.replace(/^www\./, '');
+    const path = u.pathname.replace(/\/+$/, '');
+    return path && path !== '/' ? `${host}${path}` : host;
+  } catch {
+    return url;
+  }
+}
+
+/** Anchor text from a `text/html` DnD/clipboard payload, else null. */
+export function anchorTextFromHtml(html: string): string | null {
+  if (!html) return null;
+  const m = html.match(/<a\b[^>]*>([\s\S]*?)<\/a>/i);
+  if (!m?.[1]) return null;
+  const text = m[1]
+    .replace(/<[^>]*>/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return text || null;
+}
+
+/**
+ * Decide what a drop / paste is: an image file wins over a URL (a dragged image
+ * carries both an image file AND a uri-list pointing at it). Returns null for a
+ * plain-text / non-media payload so the caller leaves the event untouched.
+ */
+export function classifyMediaPayload(p: MediaPayload): MediaIntent | null {
+  const imageFile = p.files.find((f) => typeof f.type === 'string' && f.type.startsWith('image/'));
+  if (imageFile) return { kind: 'image', file: imageFile };
+  const url = firstHttpUrl(p.uriList) ?? firstHttpUrl(p.plain);
+  if (url) {
+    const title = anchorTextFromHtml(p.html) ?? prettifyUrl(url);
+    return { kind: 'link', url, title };
+  }
+  return null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Upload
+
+/** POST raw image bytes to the capped asset route. Returns the assets/ path. */
+export async function uploadAsset(file: Blob): Promise<{ path: string } | { error: string }> {
+  try {
+    const res = await fetch('/_api/asset', {
+      method: 'POST',
+      headers: { 'Content-Type': file.type || 'application/octet-stream' },
+      body: file,
+    });
+    if (!res.ok) {
+      let msg = `upload failed (${res.status})`;
+      try {
+        const j = (await res.json()) as { error?: string };
+        if (j?.error) msg = j.error;
+      } catch {
+        /* non-JSON error body */
+      }
+      return { error: msg };
+    }
+    const j = (await res.json()) as { path?: string };
+    return typeof j?.path === 'string' ? { path: j.path } : { error: 'malformed upload response' };
+  } catch (e) {
+    return { error: e instanceof Error ? e.message : 'network error' };
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Transient toast (no React state — self-contained DOM, mirrors ensure*Styles)
+
+const TOAST_CSS = `
+.dc-media-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 108px;
+  transform: translateX(-50%);
+  z-index: 9;
+  max-width: 360px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: #26262b;
+  color: #fff;
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  box-shadow: 0 8px 28px rgba(0,0,0,0.34);
+  opacity: 0;
+  transition: opacity 140ms ease;
+  pointer-events: none;
+}
+.dc-media-toast[data-show="1"] { opacity: 1; }
+/* Drop affordance — a focus-accent inset frame while a media drag is over the
+   canvas, so the surface reads as a drop target. */
+.dc-media-dragover::after {
+  content: "";
+  position: fixed;
+  inset: 6px;
+  z-index: 8;
+  border: 2px dashed var(--maude-hud-accent, #d63b1f);
+  border-radius: 12px;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dc-media-toast { transition: none; }
+}
+`.trim();
+
+function ensureMediaStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-media-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-media-css';
+  s.textContent = TOAST_CSS;
+  document.head.appendChild(s);
+}
+
+/** Show a brief auto-dismissing toast in the canvas (e.g. an upload failure). */
+export function showCanvasToast(message: string): void {
+  if (typeof document === 'undefined') return;
+  ensureMediaStyles();
+  const el = document.createElement('div');
+  el.className = 'dc-media-toast';
+  el.setAttribute('role', 'status');
+  el.textContent = message;
+  document.body.appendChild(el);
+  requestAnimationFrame(() => el.setAttribute('data-show', '1'));
+  setTimeout(() => {
+    el.setAttribute('data-show', '0');
+    setTimeout(() => el.remove(), 200);
+  }, 2600);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+
+export interface MediaDropCallbacks {
+  onImage: (file: File, world: [number, number]) => void;
+  onLink: (url: string, title: string, world: [number, number]) => void;
+}
+
+export function useCanvasMediaDrop(opts: {
+  enabled: boolean;
+  screenToWorld: (cx: number, cy: number) => [number, number];
+  callbacks: MediaDropCallbacks;
+}): void {
+  const { enabled, screenToWorld, callbacks } = opts;
+  useEffect(() => {
+    if (!enabled || typeof document === 'undefined') return;
+    ensureMediaStyles();
+    const body = document.body;
+
+    const hasMedia = (dt: DataTransfer | null): boolean => {
+      if (!dt) return false;
+      const types = Array.from(dt.types ?? []);
+      return types.includes('Files') || types.includes('text/uri-list');
+    };
+
+    const payloadFromTransfer = (dt: DataTransfer): MediaPayload => ({
+      files: dt.files ? Array.from(dt.files) : [],
+      uriList: safeGet(dt, 'text/uri-list'),
+      html: safeGet(dt, 'text/html'),
+      plain: safeGet(dt, 'text/plain'),
+    });
+
+    const onDragOver = (e: DragEvent) => {
+      if (!hasMedia(e.dataTransfer)) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+      body.classList.add('dc-media-dragover');
+    };
+    const onDragLeave = (e: DragEvent) => {
+      // Only clear when the pointer actually leaves the window (related target
+      // null), not when crossing between child elements.
+      if (e.relatedTarget == null) body.classList.remove('dc-media-dragover');
+    };
+    const onDrop = (e: DragEvent) => {
+      body.classList.remove('dc-media-dragover');
+      if (!e.dataTransfer) return;
+      const intent = classifyMediaPayload(payloadFromTransfer(e.dataTransfer));
+      if (!intent) return; // not media — leave the event for other handlers
+      e.preventDefault();
+      const world = screenToWorld(e.clientX, e.clientY);
+      dispatchIntent(intent, world);
+    };
+    const onPaste = (e: ClipboardEvent) => {
+      const cd = e.clipboardData;
+      if (!cd) return;
+      const files: File[] = [];
+      if (cd.files) for (const f of Array.from(cd.files)) files.push(f);
+      // Some browsers expose pasted images only via items, not files.
+      if (cd.items) {
+        for (const it of Array.from(cd.items)) {
+          if (it.kind === 'file' && it.type.startsWith('image/')) {
+            const f = it.getAsFile();
+            if (f && !files.includes(f)) files.push(f);
+          }
+        }
+      }
+      const intent = classifyMediaPayload({
+        files,
+        uriList: safeGet(cd, 'text/uri-list'),
+        html: safeGet(cd, 'text/html'),
+        plain: safeGet(cd, 'text/plain'),
+      });
+      if (!intent) return; // plain-text paste — let the existing paste flow run
+      e.preventDefault();
+      // Paste has no pointer position — drop at the visible viewport centre.
+      const world = screenToWorld(window.innerWidth / 2, window.innerHeight / 2);
+      dispatchIntent(intent, world);
+    };
+
+    const dispatchIntent = (intent: MediaIntent, world: [number, number]) => {
+      if (intent.kind === 'image') callbacks.onImage(intent.file, world);
+      else if (isHttpUrl(intent.url)) callbacks.onLink(intent.url, intent.title, world);
+    };
+
+    document.addEventListener('dragover', onDragOver);
+    document.addEventListener('dragleave', onDragLeave);
+    document.addEventListener('drop', onDrop);
+    document.addEventListener('paste', onPaste);
+    return () => {
+      document.removeEventListener('dragover', onDragOver);
+      document.removeEventListener('dragleave', onDragLeave);
+      document.removeEventListener('drop', onDrop);
+      document.removeEventListener('paste', onPaste);
+      body.classList.remove('dc-media-dragover');
+    };
+  }, [enabled, screenToWorld, callbacks]);
+}
+
+function safeGet(dt: DataTransfer, type: string): string {
+  try {
+    return dt.getData(type) ?? '';
+  } catch {
+    return '';
+  }
+}

package/{plugins/design/dev-server → apps/studio}/use-collab.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-collab.tsx — client-side Yjs collab provider for canvas iframes
- * @scope      plugins/design/dev-server/use-collab.tsx
+ * @scope      apps/studio/use-collab.tsx
  * @purpose    Mounts a single Y.Doc + Awareness per canvas iframe. Opens a
  *             WebSocket to `/_ws/collab/:slug`, speaks the y-websocket binary
  *             protocol, exposes hooks for the cursor overlay + Task 3 comments

package/{plugins/design/dev-server → apps/studio}/use-cursor-modifiers.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-cursor-modifiers.tsx — T28 (Wave 3)
- * @scope      plugins/design/dev-server/use-cursor-modifiers.tsx
+ * @scope      apps/studio/use-cursor-modifiers.tsx
  * @purpose    Modifier-aware cursor state machine. Tracks Alt / Shift / Meta
  *             modifier state globally and reflects it as `data-mod-*`
  *             attributes on `.dc-canvas`. CSS rules consume those attrs to

package/{plugins/design/dev-server → apps/studio}/use-keyboard-discipline.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-keyboard-discipline.tsx — T29 (Wave 3)
- * @scope      plugins/design/dev-server/use-keyboard-discipline.tsx
+ * @scope      apps/studio/use-keyboard-discipline.tsx
  * @purpose    Keyboard nudge + Cmd+A select-all-in-artboard. Bail when focus
  *             is inside an input / textarea / contenteditable so typing
  *             into the dev-server's own inputs (file tree filter, etc.)
@@ -29,6 +29,7 @@
 import { useEffect } from 'react';
 
 import { useArtboardsContext, useDragStateContext } from './canvas-lib.tsx';
+import { scopedCdSelector, selectorIndex } from './dom-selection.ts';
 import { isEditableTarget } from './input-router.tsx';
 import { type Selection, useSelectionSet } from './use-selection-set.tsx';
 
@@ -85,10 +86,12 @@ export function useKeyboardDiscipline(): void {
         for (const el of stamped) {
           const cdId = el.getAttribute('data-cd-id');
           if (!cdId) continue;
+          const kdSelector = scopedCdSelector(cdId, id);
           hits.push({
             id: cdId,
-            selector: `[data-cd-id="${cdId}"]`,
+            selector: kdSelector,
             artboardId: id,
+            index: selectorIndex(document, kdSelector, el),
             tag: el.tagName.toLowerCase(),
           });
         }

package/{plugins/design/dev-server → apps/studio}/use-selection-set.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-selection-set.tsx — Phase 4.1 multi-selection store
- * @scope      plugins/design/dev-server/use-selection-set.tsx
+ * @scope      apps/studio/use-selection-set.tsx
  * @purpose    Multi-element selection state for canvas-shell. The canvas
  *             input router calls `replace()` / `add()` / `clear()`;
  *             the provider debounces and posts up to the dev-server shell
@@ -46,6 +46,14 @@ export interface Selection {
   selector: string;
   /** Artboard host (`data-dc-screen`) — for scoping multi-edits in future. */
   artboardId?: string | null;
+  /**
+   * Occurrence index of this element among `querySelectorAll(selector)`.
+   * data-cd-id is stamped per SOURCE element, so a component rendered N times
+   * (a list row, or a reusable used twice) yields N DOM nodes with the SAME
+   * id+artboard selector. The index disambiguates which instance — resolvers
+   * use `querySelectorAll(selector)[index]`. Absent/0 → first match.
+   */
+  index?: number;
   /** Snapshot fields filled by the router from `resolveHoverTarget`. */
   tag?: string;
   classes?: string;

package/{plugins/design/dev-server → apps/studio}/use-snap-guides.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-snap-guides.tsx — Phase 4.2 snap math + guide-line shapes
- * @scope      plugins/design/dev-server/use-snap-guides.tsx
+ * @scope      apps/studio/use-snap-guides.tsx
  * @purpose    Pure function `computeSnap` that returns a snapped (x, y) for a
  *             proposed artboard rect plus the guide lines that should render
  *             as visual feedback. No React state; the drag controller calls

package/{plugins/design/dev-server → apps/studio}/use-tool-mode.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-tool-mode.tsx — Phase 4.1 tool-mode store
- * @scope      plugins/design/dev-server/use-tool-mode.tsx
+ * @scope      apps/studio/use-tool-mode.tsx
  * @purpose    Context + hook for the active canvas tool. Wired into
  *             DesignCanvas. Phase 5 will
  *             register additional tools (pen, circle, arrow, eraser) via
@@ -52,6 +52,8 @@ export const DEFAULT_TOOLS: readonly ToolDescriptor[] = Object.freeze([
   { id: 'hand', label: 'Hand', shortcut: 'H', cursor: TOOL_CURSORS.hand },
   { id: 'comment', label: 'Comment', shortcut: 'C', cursor: TOOL_CURSORS.comment },
   { id: 'pen', label: 'Pen', shortcut: 'B', cursor: TOOL_CURSORS.pen },
+  // Annotation polish (item 8) — highlighter sits next to the pen.
+  { id: 'highlighter', label: 'Highlighter', shortcut: 'I', cursor: TOOL_CURSORS.highlighter },
   // Phase 24 — one Shape tool replaces the separate Rect (R) + Ellipse (O)
   // buttons; the primitive is chosen from the palette popover.
   { id: 'shape', label: 'Shape', shortcut: 'R', cursor: TOOL_CURSORS.shape },

package/{plugins/design/dev-server → apps/studio}/use-undo-stack.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-undo-stack.tsx — React Context + Provider for the undo stack
- * @scope      plugins/design/dev-server/use-undo-stack.tsx
+ * @scope      apps/studio/use-undo-stack.tsx
  * @purpose    Wraps the pure `undoReducer` (undo-stack.ts) in React state,
  *             owns the async runner that awaits side-effects before applying
  *             the next state transition, exposes the `lastLabel` HUD signal,

package/apps/studio/whats-new.json

@@ -0,0 +1,139 @@
+{
+  "$schema": "./whats-new.schema.json",
+  "entries": [
+    {
+      "id": "studio-full-functionality",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "feature",
+      "title": "The studio is fully wired now",
+      "summary": "Everything in the chrome is live: the top bar shows the real zoom + artboard count, the status bar always shows hub-sync, and your avatar (plus Claude when it's editing) appears in the menubar. The ⌘K palette grew real Canvas/Tools commands (New canvas, Export, Handoff, Draw), there's a proper Export & handoff dialog (PNG/PDF/SVG/HTML/shadcn/ZIP) right in the shell, and a new display-only Inspector panel (Inspect · Layers · CSS) reads any element you ⌘-click.",
+      "surface": "design-ui",
+      "tour": [
+        {
+          "target": ".st-mb-right",
+          "title": "Live status, finally",
+          "body": "Zoom, artboard count, presence and hub-sync now reflect the real state — no more static placeholders."
+        },
+        {
+          "target": ".st-rpanel",
+          "title": "Inspector",
+          "body": "⌘-click an element in the canvas, then press I — pos, size, ancestry and markup, read-only (live CSS knobs land in Phase 12)."
+        }
+      ]
+    },
+    {
+      "id": "draw-animation-lottie",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "feature",
+      "title": "Animate draw marks → ship one Lottie",
+      "summary": "/design:draw now handles motion briefs (morph, pulse, blink) and proves the animation is actually live. /design:to-lottie productionizes it into one Lottie that plays 1:1 on web and React Native.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "studio-maude-ds-redesign",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "feature",
+      "title": "The studio, redesigned in maude",
+      "summary": "The canvas browser chrome is now built in the maude design system itself — a dark-first studio shell with a branded menubar + real dropdowns, a collapsible file-tree sidebar with a rail, a cohesive bottom context bar, a maude-styled comments panel, and a clean light handoff. New: a ⌘K command palette for jumping to the design-system view, comments, theme, reload, and help. The in-canvas chrome (tools, minimap, selection halos) was re-skinned to the same indigo accent so the whole surface reads as one product.",
+      "surface": "design-ui",
+      "tour": [
+        {
+          "target": ".st-menubar .st-brand",
+          "title": "Built in maude",
+          "body": "The studio chrome now dogfoods the maude DS — one cohesive material across the menubar, sidebar, canvas and status bar."
+        },
+        {
+          "target": ".st-menubar .st-whatsnew",
+          "title": "Press ⌘K",
+          "body": "A new command palette jumps you to the design-system view, comments, theme toggle, reload, and help — no mouse needed."
+        }
+      ]
+    },
+    {
+      "id": "annotation-tooling-polish",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "improvement",
+      "title": "Richer annotations — highlighter, lists & text shortcuts",
+      "summary": "Annotations got a full polish pass: a new highlighter tool (translucent marker with multiply blend), dashed strokes on shapes, FigJam-style sticky corner, multi-line text with Enter, italic/underline/lists, and Cmd+B/I/U formatting shortcuts that work the same way in sticky notes, shapes, and the text tool.",
+      "surface": "design-ui",
+      "tour": [
+        {
+          "target": ".dc-tool-palette button[aria-label^='Highlighter']",
+          "title": "New: Highlighter",
+          "body": "A translucent marker pen (I) — overlapping strokes darken with multiply blend. Pick hue and nib width from the chrome below."
+        }
+      ]
+    },
+    {
+      "id": "canvas-media-images-links",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "feature",
+      "title": "Drop images & paste links onto the canvas",
+      "summary": "Drag a screenshot from your desktop — or paste a clipboard image or a URL — straight onto the canvas. Images sit alongside your annotations; links render as a tidy preview chip you can open in one click.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "in-app-whats-new-tour",
+      "version": "0.29.0",
+      "date": "2026-06-08",
+      "kind": "feature",
+      "title": "What's New, right in the canvas browser",
+      "summary": "The Maude UI now tells you what shipped — a dismissible notice plus a panel you can reopen from the menubar. Each closed-out feature adds an entry automatically.",
+      "surface": "design-ui",
+      "tour": [
+        {
+          "target": "[data-tour='whatsnew']",
+          "title": "Your What's New badge",
+          "body": "This ✦ badge lights up when a new maude version ships features. Click it any time to reopen this panel."
+        },
+        {
+          "target": "[data-tour='help']",
+          "title": "Tours live in Help too",
+          "body": "Open Help to replay the full \"how Maude works\" walkthrough whenever you want."
+        }
+      ]
+    },
+    {
+      "id": "canvas-create-delete-from-browser",
+      "version": "0.28.1",
+      "date": "2026-06-03",
+      "kind": "feature",
+      "title": "Create & delete canvases from the browser",
+      "summary": "Spin up a blank brief-board straight from the file tree (+ board) and remove canvases without leaving the UI — no /design:new round-trip needed.",
+      "learnMore": "https://github.com/1aGh/maude#readme",
+      "surface": "design-ui"
+    },
+    {
+      "id": "canvas-activity-overlay",
+      "version": "0.28.0",
+      "date": "2026-06-02",
+      "kind": "feature",
+      "title": "Live canvas activity overlay",
+      "summary": "See at a glance which artboard Claude (or a teammate) is editing — a soft rim + badge highlights the active canvas and fades when work settles.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "draw-as-code-svg-agent",
+      "version": "0.28.0",
+      "date": "2026-05-30",
+      "kind": "feature",
+      "title": "Draw production SVGs as code",
+      "summary": "/design:draw generates logos, icons, and diagrams through a deterministic geometry engine — no hand-guessed path data — and proofs them across the 16/24/48/256 verify ladder.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "self-hostable-hub-sync",
+      "version": "0.27.0",
+      "date": "2026-05-28",
+      "kind": "feature",
+      "title": "Self-hostable hub + live file sync",
+      "summary": "Run your own Maude hub and co-edit canvases with bidirectional file sync, offline-aware status, and conflict handling.",
+      "surface": "design-ui"
+    }
+  ]
+}

package/apps/studio/whats-new.schema.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/1aGh/maude/main/apps/studio/whats-new.schema.json",
+  "title": "Maude What's New feed",
+  "description": "User-facing product-update entries surfaced in the Maude UI (and mirrored to the docs site). Single source of truth — ships with the dev-server, appended on /flow:done, stamped at release. See .ai/plans/feature-in-app-whats-new-tour.md (DDR-A).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["entries"],
+  "properties": {
+    "$schema": { "type": "string" },
+    "entries": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/entry" }
+    }
+  },
+  "$defs": {
+    "entry": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "kind", "title", "summary"],
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Stable slug (usually the plan slug). Used for de-dup and as the React key.",
+          "pattern": "^[a-z0-9][a-z0-9-]*$"
+        },
+        "version": {
+          "type": ["string", "null"],
+          "description": "Semver the feature shipped in, or null while pending (stamped at release).",
+          "pattern": "^\\d+\\.\\d+\\.\\d+"
+        },
+        "date": {
+          "type": ["string", "null"],
+          "description": "Release date YYYY-MM-DD, or null while pending."
+        },
+        "kind": { "enum": ["feature", "improvement", "usage", "fix"] },
+        "title": { "type": "string", "minLength": 1 },
+        "summary": { "type": "string", "minLength": 1 },
+        "learnMore": {
+          "type": "string",
+          "description": "Optional URL to docs / release notes. Constrained to http(s) — the feed renders this as an <a href>, so a javascript:/data: scheme is rejected at the data-contract layer (defense-in-depth alongside React's URL sanitizer).",
+          "pattern": "^https?://"
+        },
+        "surface": {
+          "type": "string",
+          "description": "Which UI surface this targets (e.g. design-ui). Future-proofing."
+        },
+        "tour": {
+          "type": "array",
+          "description": "Optional spotlight steps that highlight the new UI (consumed by the tour engine — Phase 3).",
+          "items": { "$ref": "#/$defs/tourStep" }
+        }
+      }
+    },
+    "tourStep": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["target", "title", "body"],
+      "properties": {
+        "target": {
+          "type": "string",
+          "description": "CSS selector or [data-tour=\"<key>\"] anchor to spotlight."
+        },
+        "title": { "type": "string", "minLength": 1 },
+        "body": { "type": "string", "minLength": 1 },
+        "placement": { "enum": ["top", "bottom", "left", "right", "auto"] }
+      }
+    }
+  }
+}