@1agh/maude 0.42.0 → 0.43.0

package/apps/studio/annotations-model.ts

@@ -74,11 +74,21 @@ export interface ArrowBind {
  *     element). Absent / empty = ungrouped. Serialized as `data-group-ids`.
  *   - `author` — provenance. `'ai'` when created through the
  *     `maude design annotate` write surface. Absent = human-drawn.
+ *   - `authorName` / `authorId` — Phase 3 (whiteboard-improvements): who drew
+ *     a human-authored stroke, stamped from presence identity (`useCollab`'s
+ *     `myName`/`myConnId` — git `user.name`, else an `anonymous-*` fallback).
+ *     Absent on AI-authored strokes and on any stroke drawn before this
+ *     field existed (back-compat — no author badge, not an error). Never
+ *     trust a wire/stored COLOR for this identity — badges re-derive their
+ *     color from the name via `colorForName` so they match the author's live
+ *     presence hue.
  */
 interface StrokeBase {
   id: string;
   groupIds?: string[];
   author?: 'ai';
+  authorName?: string;
+  authorId?: string;
   /**
    * FigJam v3 — rotation in degrees (clockwise) around the stroke's bbox
    * center. Absent / 0 = axis-aligned (back-compat). Honoured by the box-
@@ -553,6 +563,11 @@ export const IMAGE_MIN_SIZE = 16;
 export const IMAGE_MAX_DROP_SIDE = 480;
 export const LINK_DEFAULT_W = 260;
 export const LINK_DEFAULT_H = 76;
+// Phase 4 (whiteboard-improvements) — a sticker dropped from the picker has no
+// natural size to probe (unlike createImageFromFile's Image.onload path — the
+// shell already resolved it to a project asset by the time the canvas hears
+// about it) — one fixed, friendly on-board size for every sticker.
+export const STICKER_DROP_SIZE = 160;
 // DDR-150 P4 — media-reference chip (dropped video/audio → assets/ pointer).
 export const MEDIAREF_DEFAULT_W = 280;
 export const MEDIAREF_DEFAULT_H = 76;
@@ -926,6 +941,12 @@ function rootExtraAttrs(s: Stroke): string {
     extra += ` data-group-ids="${esc(s.groupIds.join(' '))}"`;
   }
   if (s.author === 'ai') extra += ' data-author="ai"';
+  // Phase 3 (whiteboard-improvements) — human author identity, independent of
+  // `data-author="ai"` (never both: a stroke is either agent- or human-drawn).
+  // escAttr (not esc) — these are attribute values, not element content; see
+  // the Phase 23 escAttr() docblock above for why a bare `>` here is unsafe.
+  if (s.authorName) extra += ` data-author-name="${escAttr(s.authorName)}"`;
+  if (s.authorId) extra += ` data-author-id="${escAttr(s.authorId)}"`;
   // FigJam v3 — rotation: `data-rot` is the round-trip source of truth; the
   // transform is presentational so the persisted SVG renders rotated in any
   // viewer. The pivot derives from stored geometry → idempotent re-serialize.
@@ -1302,6 +1323,33 @@ function parseBindAttr(raw: string | null): ArrowBind | null {
   return bind;
 }
 
+const AUTHOR_NAME_MAX_LEN = 64;
+
+/**
+ * Phase 3 (whiteboard-improvements) — an `authorName` parsed off disk may
+ * have come from a peer's synced `.annotations.svg` (untrusted foreign
+ * input, same class of risk `use-collab.tsx`'s `sanitizeForeignState` /
+ * `sanitizeName` already guard presence names against). Strips control
+ * chars, bidi overrides/isolates, zero-width chars, and the BOM; caps
+ * length. Mirrors that function's code-point ranges rather than importing
+ * it — this module stays dependency-free of the stateful collab layer.
+ */
+function sanitizeAuthorName(raw: string): string {
+  let cleaned = '';
+  for (const ch of raw) {
+    const cp = ch.codePointAt(0) ?? 0;
+    const unsafe =
+      cp <= 0x1f ||
+      (cp >= 0x7f && cp <= 0x9f) ||
+      (cp >= 0x200b && cp <= 0x200f) ||
+      (cp >= 0x202a && cp <= 0x202e) ||
+      (cp >= 0x2066 && cp <= 0x2069) ||
+      cp === 0xfeff;
+    if (!unsafe) cleaned += ch;
+  }
+  return cleaned.trim().slice(0, AUTHOR_NAME_MAX_LEN);
+}
+
 /** FigJam v3 — read the cross-tool root attrs back onto a parsed stroke. */
 function readSharedAttrs(el: Element, s: Stroke): void {
   const g = el.getAttribute('data-group-ids');
@@ -1310,6 +1358,16 @@ function readSharedAttrs(el: Element, s: Stroke): void {
     if (ids.length) s.groupIds = ids;
   }
   if (el.getAttribute('data-author') === 'ai') s.author = 'ai';
+  const authorName = el.getAttribute('data-author-name');
+  if (authorName) {
+    const cleaned = sanitizeAuthorName(authorName);
+    if (cleaned) s.authorName = cleaned;
+  }
+  const authorId = el.getAttribute('data-author-id');
+  if (authorId) {
+    const cleanedId = sanitizeAuthorName(authorId);
+    if (cleanedId) s.authorId = cleanedId;
+  }
   // FigJam v3 — rotation. `data-rot` is authoritative (the transform attr is
   // presentational); malformed / out-of-range values drop to axis-aligned.
   const rotRaw = el.getAttribute('data-rot');

package/apps/studio/api.ts

@@ -23,6 +23,7 @@ import {
   insertArtboard,
   insertClip,
   insertElement,
+  insertElementIntoArtboard,
   type MovePosition,
   moveElement,
   removeAttribute,
@@ -37,6 +38,7 @@ import {
 } from './canvas-edit.ts';
 import type { Context } from './context.ts';
 import { createHistory } from './history.ts';
+import { STICKERS_DIR } from './paths.ts';
 
 // Directories that never hold user-facing canvases. Exported so the
 // external-canvas watcher (`canvas-list-watch.ts`) shares one source instead of
@@ -255,6 +257,9 @@ export interface Api {
   saveAsset(bytes: Uint8Array): Promise<SaveAssetResult>;
   /** Stage F1 — list content-addressed image/video assets for the AssetPicker. */
   listAssets(): Promise<{ ok: true; assets: AssetListing[] }>;
+  /** Phase 4 (feature-whiteboard-annotation-improvements) — the bundled sticker
+   *  catalogue (MAUDE's own, not the served project's) for the StickerPicker. */
+  listStickers(): Promise<{ ok: true; packs: StickerPack[] }>;
   /** DDR-148 — streaming variant for the HTTP route (100 MB video without a
    *  full in-RAM buffer). Sniffs + caps + content-addresses like saveAsset. */
   saveAssetFromStream(stream: ReadableStream<Uint8Array>): Promise<SaveAssetResult>;
@@ -288,7 +293,13 @@ export interface Api {
     idIndex?: unknown;
   }): Promise<EditOpResult>;
   // Phase 12 (DDR-103) — inline text-content edit (POST /_api/edit-text). Main-origin only.
-  editText(input: { canvas?: unknown; id?: unknown; text?: unknown }): Promise<EditOpResult>;
+  editText(input: {
+    canvas?: unknown;
+    id?: unknown;
+    text?: unknown;
+    occurrence?: unknown;
+    before?: unknown;
+  }): Promise<EditOpResult>;
   // Phase 12.2 (DDR-104) — custom HTML attribute edit (POST /_api/edit-attr). Main-origin
   // only. The CSS panel's "custom HTML attribute" escape hatch (data-*, aria-*, role, …);
   // writes a plain JSX attribute via editAttribute's non-`style.` path.
@@ -396,10 +407,16 @@ export interface Api {
   }): Promise<
     { ok: true; deletedId: string; seq?: number } | { ok: false; status: number; error: string }
   >;
-  /** Insert a synthesized div/text/image relative to a reference element. */
+  /**
+   * Insert a synthesized div/text/image relative to a reference element, OR —
+   * when the artboard has no element to anchor on yet — as a direct child of
+   * `artboardId` (the tool-palette "+ Element" empty-artboard fallback).
+   * Exactly one of `refId` / `artboardId` must be provided.
+   */
   insertElementOp(input: {
     canvas?: unknown;
     refId?: unknown;
+    artboardId?: unknown;
     position?: unknown;
     kind?: unknown;
     src?: unknown;
@@ -472,8 +489,19 @@ export { ASSET_IMAGE_HREF_RE, sanitizeAnnotationSvg } from './annotations-model.
 
 import { sanitizeAnnotationSvg } from './annotations-model.ts';
 
-/** Phase 23 — hard ceiling on a single uploaded asset (10 MB). */
-export const ASSET_MAX_BYTES = 10 * 1024 * 1024;
+/**
+ * Phase 23 — per-file ceiling for a still image. Raised 10 MB → 50 MB (still
+ * well under the video cap / MAX_REQUEST_BODY headroom) after a real drone
+ * photo tripped the old ceiling. Overridable via `MAUDE_ASSET_MAX_IMAGE_BYTES`
+ * (bytes), mirroring {@link ASSET_MAX_VIDEO_BYTES}'s override. The route lives
+ * on the (untrusted) canvas origin (DDR-088), and images stream through the
+ * same category-capped writer as video/audio (`saveAssetFromStream`), so
+ * raising this doesn't reintroduce the memory-amplification risk DDR-088 capped.
+ */
+export const ASSET_MAX_BYTES = (() => {
+  const env = Number(process.env.MAUDE_ASSET_MAX_IMAGE_BYTES);
+  return Number.isFinite(env) && env > 0 ? env : 50 * 1024 * 1024;
+})();
 
 /**
  * Phase 23 security review (DDR-088 follow-up) — aggregate per-server-instance
@@ -565,6 +593,24 @@ export interface AssetListing {
   mtimeMs: number;
 }
 
+/** Phase 4 (feature-whiteboard-annotation-improvements) — one bundled sticker. */
+export interface StickerItem {
+  file: string;
+  keywords: string[];
+  /** Servable path — `/_stickers/<pack>/<file>` (main-origin static route). */
+  url: string;
+}
+
+/** A bundled sticker pack — one `apps/studio/stickers/<slug>/manifest.json`. */
+export interface StickerPack {
+  slug: string;
+  name: string;
+  author: string;
+  attributionUrl: string;
+  license: string;
+  stickers: StickerItem[];
+}
+
 /** DDR-148 — media category, decides which per-file cap applies. */
 export type AssetCategory = 'image' | 'video' | 'audio';
 
@@ -576,7 +622,7 @@ export interface AssetTypeInfo {
 
 /**
  * DDR-148 — per-file ceiling for time-based media (video + audio). Images keep
- * the tighter {@link ASSET_MAX_BYTES} 10 MB cap. Overridable via
+ * the tighter {@link ASSET_MAX_BYTES} cap. Overridable via
  * `MAUDE_ASSET_MAX_VIDEO_BYTES` (bytes) for power users. The route lives on the
  * (untrusted) canvas origin, so this cap + the session budget + the streamed
  * write are the trust mitigation, exactly like the image caps (DDR-088).
@@ -595,7 +641,9 @@ const UNSUPPORTED_ASSET_MSG =
   'unsupported media type — png/jpeg/gif/webp images or mp4/mov/webm/mp3/wav/m4a media only (SVG/script rejected)';
 
 function capError(category?: AssetCategory): string {
-  if (category === 'image') return 'image exceeds the 10 MB cap';
+  if (category === 'image') {
+    return `image exceeds the ${Math.round(ASSET_MAX_BYTES / (1024 * 1024))} MB cap`;
+  }
   const mb = Math.round(ASSET_MAX_VIDEO_BYTES / (1024 * 1024));
   return `media exceeds the ${mb} MB cap`;
 }
@@ -1316,8 +1364,9 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
   // optional (DDR Task 9):
   //   • magic-byte sniff → true type ∈ {png,jpg,gif,webp}; a header lie or an
   //     SVG (script-bearing vector) is rejected — bytes decide, name is ignored.
-  //   • ≤ 10 MB ceiling (assets get their OWN cap; never routed through the 1 MB
-  //     SVG-text gate in saveAnnotations).
+  //   • per-category ceiling ({@link ASSET_MAX_BYTES} for images; assets get
+  //     their OWN cap; never routed through the 1 MB SVG-text gate in
+  //     saveAnnotations).
   //   • content-addressed name `assets/<sha8-of-bytes>.<ext>` → identical drops
   //     dedupe → a malicious canvas can't fill the disk with N copies of one
   //     image, and orphan-on-delete is safe (shared content survives).
@@ -1331,8 +1380,8 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
    * request body chunk-by-chunk so a 100 MB video never lands as a single
    * ArrayBuffer in RAM (the memory-amplification vector DDR-088 §review flagged
    * for the untrusted canvas origin — worse now that the per-file cap is 100 MB,
-   * not 10 MB). Sniffs the type from the head, applies the CATEGORY cap while
-   * streaming (image 10 MB · video/audio {@link ASSET_MAX_VIDEO_BYTES}), writes
+   * not a few MB). Sniffs the type from the head, applies the CATEGORY cap while
+   * streaming (image {@link ASSET_MAX_BYTES} · video/audio {@link ASSET_MAX_VIDEO_BYTES}), writes
    * to a temp file, then content-addresses (sha8) → dedupe-rename. Nothing is
    * ever parsed — only magic bytes are read. `saveAsset(bytes)` wraps this so
    * both the route and any programmatic caller share ONE tested path.
@@ -1512,6 +1561,59 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     return { ok: true, assets: out.slice(0, 500) };
   }
 
+  // Phase 4 (feature-whiteboard-annotation-improvements) — the bundled sticker
+  // catalogue for the StickerPicker. Reads from MAUDE's OWN `STICKERS_DIR`
+  // (paths.ts, DDR-045) — never the served project's designRoot, unlike
+  // listAssets above. A pack directory missing or with an invalid
+  // manifest.json is skipped, not fatal — one bad pack shouldn't blank the
+  // whole picker. MAIN-ORIGIN ONLY at the route layer (the picker is shell UI,
+  // same posture as listAssets/AssetPicker).
+  async function listStickers(): Promise<{ ok: true; packs: StickerPack[] }> {
+    let packDirs: string[] = [];
+    try {
+      const entries = await readdir(STICKERS_DIR, { withFileTypes: true });
+      packDirs = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+    } catch {
+      return { ok: true, packs: [] }; // no bundled stickers in this layout
+    }
+    const packs: StickerPack[] = [];
+    for (const slug of packDirs) {
+      try {
+        const manifestPath = path.join(STICKERS_DIR, slug, 'manifest.json');
+        const raw = await readFile(manifestPath, 'utf8');
+        const manifest = JSON.parse(raw) as {
+          name?: string;
+          author?: string;
+          attributionUrl?: string;
+          license?: string;
+          stickers?: Array<{ file?: string; keywords?: string[] }>;
+        };
+        const stickers: StickerItem[] = (manifest.stickers ?? [])
+          .filter(
+            (s): s is { file: string; keywords?: string[] } =>
+              typeof s.file === 'string' && !!s.file
+          )
+          .map((s) => ({
+            file: s.file,
+            keywords: Array.isArray(s.keywords)
+              ? s.keywords.filter((k) => typeof k === 'string')
+              : [],
+            url: `/_stickers/${slug}/${encodeURIComponent(s.file)}`,
+          }));
+        packs.push({
+          slug,
+          name: manifest.name ?? slug,
+          author: manifest.author ?? '',
+          attributionUrl: manifest.attributionUrl ?? '',
+          license: manifest.license ?? '',
+          stickers,
+        });
+      } catch {}
+    }
+    packs.sort((a, b) => a.name.localeCompare(b.name));
+    return { ok: true, packs };
+  }
+
   // Phase 31 follow-up — persist an image pasted straight from the clipboard into
   // the ACP composer (a screenshot has no path yet), so the chip can point Claude
   // at a real file to Read. Sibling of saveAsset, but:
@@ -1519,13 +1621,17 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
   //     the versioned `assets/`; pasted screenshots are ephemeral, not canvas media.
   //   • returns an ABSOLUTE path — Claude runs with its own cwd, so a project-
   //     relative string could miss; an absolute path always resolves.
-  // Same load-bearing caps as saveAsset (magic-byte sniff → no SVG/script, 10 MB,
-  // content-addressed name, shared session write budget). MAIN-ORIGIN ONLY at the
-  // route layer (the untrusted canvas can't reach it).
+  // Same load-bearing caps as saveAsset (magic-byte sniff → no SVG/script,
+  // ASSET_MAX_BYTES, content-addressed name, shared session write budget).
+  // MAIN-ORIGIN ONLY at the route layer (the untrusted canvas can't reach it).
   async function saveChatAttachment(bytes: Uint8Array): Promise<SaveAssetResult> {
     if (!bytes || bytes.length === 0) return { ok: false, status: 400, error: 'empty body' };
     if (bytes.length > ASSET_MAX_BYTES) {
-      return { ok: false, status: 413, error: 'attachment exceeds the 10 MB cap' };
+      return {
+        ok: false,
+        status: 413,
+        error: `attachment exceeds the ${Math.round(ASSET_MAX_BYTES / (1024 * 1024))} MB cap`,
+      };
     }
     const kind = sniffImageType(bytes);
     if (!kind) {
@@ -2009,6 +2115,8 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     canvas?: unknown;
     id?: unknown;
     text?: unknown;
+    occurrence?: unknown;
+    before?: unknown;
   }): Promise<EditOpResult> {
     const r = resolveCanvasAbs(input.canvas);
     if (!r.ok) return r;
@@ -2017,7 +2125,23 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     if (typeof input.text !== 'string') return { ok: false, status: 400, error: 'text required' };
     if (input.text.length > 5000) return { ok: false, status: 413, error: 'text too long' };
     const text = input.text;
-    return suppressedEdit(r.abs, () => runEditText(r.abs, id, text), 'edit failed');
+    // Optional context for editing `{variable}` text (unified-text-editing
+    // follow-up): which rendered instance, and its pre-edit text — both used
+    // only to target the right source string; a bad/absent value just makes an
+    // unresolvable expression edit fail loud (route to /design:edit).
+    const occurrence =
+      typeof input.occurrence === 'number' &&
+      Number.isInteger(input.occurrence) &&
+      input.occurrence >= 0
+        ? input.occurrence
+        : undefined;
+    const before =
+      typeof input.before === 'string' && input.before.length <= 5000 ? input.before : undefined;
+    return suppressedEdit(
+      r.abs,
+      () => runEditText(r.abs, id, text, { occurrence, before }),
+      'edit failed'
+    );
   }
 
   async function editAttr(input: {
@@ -2347,10 +2471,12 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     }
   }
 
-  /** Insert a synthesized element (div/text/image) relative to `refId`. */
+  /** Insert a synthesized element (div/text/image) relative to `refId`, or —
+   * empty-artboard fallback — as a direct child of `artboardId`. */
   async function insertElementOp(input: {
     canvas?: unknown;
     refId?: unknown;
+    artboardId?: unknown;
     position?: unknown;
     kind?: unknown;
     src?: unknown;
@@ -2361,14 +2487,30 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     const r = resolveCanvasAbs(input.canvas);
     if (!r.ok) return r;
     if (!takeStructuralToken()) return RATE_LIMITED;
-    const refId = typeof input.refId === 'string' ? input.refId.trim() : '';
-    if (!CD_ID_RE.test(refId)) {
+    const hasRefId = typeof input.refId === 'string' && input.refId.trim() !== '';
+    const hasArtboardId = typeof input.artboardId === 'string' && input.artboardId.trim() !== '';
+    if (hasRefId === hasArtboardId) {
+      return { ok: false, status: 400, error: 'provide exactly one of refId / artboardId' };
+    }
+    const refId = hasRefId ? (input.refId as string).trim() : '';
+    if (hasRefId && !CD_ID_RE.test(refId)) {
       return { ok: false, status: 400, error: 'invalid reference data-cd-id' };
     }
+    const artboardId = hasArtboardId ? (input.artboardId as string).trim() : '';
+    if (hasArtboardId && !/^[A-Za-z][\w-]{0,63}$/.test(artboardId)) {
+      return { ok: false, status: 400, error: 'invalid artboard id' };
+    }
     const position = input.position;
     if (typeof position !== 'string' || !MOVE_POSITIONS.has(position)) {
       return { ok: false, status: 400, error: 'invalid position' };
     }
+    if (hasArtboardId && position !== 'inside-start' && position !== 'inside-end') {
+      return {
+        ok: false,
+        status: 400,
+        error: 'artboardId insert requires inside-start/inside-end',
+      };
+    }
     const kind = input.kind;
     if (kind !== 'div' && kind !== 'text' && kind !== 'image') {
       return { ok: false, status: 400, error: 'invalid kind (div|text|image)' };
@@ -2383,10 +2525,18 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
         ctx.bus.emit('activity:unsuppress', rel);
         return { ok: false, status: 413, error: 'canvas source too large to grow' };
       }
-      const res = await insertElement(r.abs, refId, position as MovePosition, kind as InsertKind, {
-        src,
-        occurrence: refIndex,
-      });
+      const res = hasArtboardId
+        ? await insertElementIntoArtboard(
+            r.abs,
+            artboardId,
+            position as 'inside-start' | 'inside-end',
+            kind as InsertKind,
+            { src }
+          )
+        : await insertElement(r.abs, refId, position as MovePosition, kind as InsertKind, {
+            src,
+            occurrence: refIndex,
+          });
       const after = await Bun.file(r.abs).text();
       if (after === before) {
         ctx.bus.emit('activity:unsuppress', rel);
@@ -3208,6 +3358,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     saveAnnotations,
     saveAsset,
     listAssets,
+    listStickers,
     saveAssetFromStream,
     saveChatAttachment,
     resolveChatAttachment,