makersclaw 0.2.0 → 0.3.0

package/registry/blocks/whiteboard/whiteboard.jsx

@@ -0,0 +1,721 @@
+"use client";
+
+// Whiteboard — a full-page freeform board on sketch-canvas: a top bar with
+// the board's title (click to rename), the save state, a Board / Text view
+// switch, Export PNG and Share; under it the canvas with sketch-canvas's
+// rail, context toolbar, zoom and undo. An empty board offers starter
+// templates (blank, grid, 2×2 matrix). The Text view is the board's words
+// as a list — the accessible alternative to the drawing, and what an agent
+// reads.
+//
+// With `onCreateTask`, a selected note or text gets a "Create task" button
+// in the top bar; the element keeps a mark (customData.task, drawn as a
+// small badge over it) once the task exists.
+//
+// Saves are the page's: `onSave(sketch)` and `onRename(title)` are async
+// and answer { ok }; the top bar shows "Saving…", "Saved", or the error
+// with a Retry. The canvas stays mounted under the Text view, so switching
+// views never loses an edit or the undo history.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Field, Icon, IconButton, Input, Kbd, Popover, ToggleGroup, Tooltip, cx, toast } from "../../ui";
+import { SketchCanvas, isSketchEmpty, sketchItems, sketchToText, useSketchCanvas } from "../sketch-canvas";
+import { WHITEBOARD_TEMPLATES, fileNameFor, templateSketch } from "./templates";
+
+const IDLE = { state: "idle" };
+
+async function settle(fn, ...args) {
+  try {
+    const res = await fn(...args);
+    return res?.ok ? { state: "saved" } : { state: "error", error: res?.error };
+  } catch (e) {
+    return { state: "error", error: e?.message };
+  }
+}
+
+export function Whiteboard({
+  title,
+  defaultTitle = "Untitled board",
+  onRename,
+  value,
+  defaultValue,
+  onChange,
+  onSave,
+  changeDelay,
+  templates = WHITEBOARD_TEMPLATES,
+  onShare,
+  shareLabel = "Share",
+  onExport,
+  onBack,
+  backLabel = "Back",
+  meta,
+  readOnly = false,
+  defaultView = "board",
+  canvasRef,
+  onCreateTask,
+  onOpenTask,
+  taskLabel = "Create task",
+  className,
+}) {
+  const own = useSketchCanvas();
+  const ref = canvasRef ?? own;
+
+  // ---- title --------------------------------------------------------------
+  const [ownTitle, setOwnTitle] = useState(defaultTitle);
+  const [pendingTitle, setPendingTitle] = useState(null); // typed, not yet confirmed by onRename
+  const shownTitle = pendingTitle ?? (title !== undefined ? title : ownTitle);
+  const [titleSave, setTitleSave] = useState(IDLE);
+  const titleSeq = useRef(0);
+
+  const rename = useCallback(
+    async (next) => {
+      if (title === undefined) setOwnTitle(next);
+      if (!onRename) return;
+      const seq = ++titleSeq.current;
+      setPendingTitle(next);
+      setTitleSave({ state: "saving" });
+      const res = await settle(onRename, next);
+      if (seq !== titleSeq.current) return;
+      setTitleSave(res);
+      if (res.state === "saved") setPendingTitle(null);
+    },
+    [title, onRename],
+  );
+
+  // ---- the sketch ---------------------------------------------------------
+  const [sketch, setSketch] = useState(() => value ?? defaultValue ?? null);
+  useEffect(() => {
+    if (value !== undefined) setSketch(value);
+  }, [value]);
+  const empty = isSketchEmpty(sketch);
+  const [blank, setBlank] = useState(false); // "Blank" chosen: the plain hint, not the templates
+  const [sketchSave, setSketchSave] = useState(IDLE);
+  const sketchSeq = useRef(0);
+  const lastSketch = useRef(null);
+  const cbs = useRef({});
+  cbs.current = { onChange, onSave };
+
+  const saveSketch = useCallback(async (s) => {
+    const fn = cbs.current.onSave;
+    if (!fn) return;
+    const seq = ++sketchSeq.current;
+    setSketchSave({ state: "saving" });
+    const res = await settle(fn, s);
+    if (seq !== sketchSeq.current) return;
+    setSketchSave(res);
+  }, []);
+
+  const handleChange = useCallback(
+    (s) => {
+      lastSketch.current = s;
+      setSketch(s);
+      if (isSketchEmpty(s)) setBlank(false);
+      cbs.current.onChange?.(s);
+      saveSketch(s);
+    },
+    [saveSketch],
+  );
+
+  const applyTemplate = (t) => {
+    const h = ref.current;
+    if (!h) return;
+    const s = templateSketch(t);
+    if (!s) {
+      setBlank(true);
+      h.focus();
+      return;
+    }
+    h.setScene(s);
+    h.setTool("select");
+    requestAnimationFrame(() => h.zoomToFit({ animate: false }));
+    h.focus();
+  };
+
+  // ---- export -------------------------------------------------------------
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState(null);
+  const exportPng = async () => {
+    const h = ref.current;
+    if (!h) return;
+    setExporting(true);
+    setExportError(null);
+    try {
+      const blob = await h.exportImage();
+      if (onExport) {
+        const res = await settle(onExport, blob, { title: shownTitle, fileName: fileNameFor(shownTitle) });
+        if (res.state === "error") setExportError(res.error || "Couldn't export");
+      } else {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileNameFor(shownTitle);
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }
+    } catch (e) {
+      setExportError(e?.message || "Couldn't export");
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  // ---- tasks from what is on the board -----------------------------------
+  // Excalidraw tells us every change (selection, scroll, zoom); from it we
+  // read what could become a task (selected notes and texts that are not
+  // one yet) and where the badges of those that are sit on screen.
+  const [handle, setHandle] = useState(null);
+  const [picked, setPicked] = useState([]); // [{ key, ids, text }]
+  const [marks, setMarks] = useState([]); // [{ key, x, y, title, id }]
+  const [pending, setPending] = useState(() => new Map()); // key → title
+  const pendingRef = useRef(pending);
+  pendingRef.current = pending;
+  const keys = useRef({ picked: "", marks: "" });
+  const scene = useRef(null);
+  const canTask = Boolean(onCreateTask) && !readOnly;
+
+  const readScene = useCallback((elements, appState) => {
+    scene.current = { elements, appState };
+    const live = (elements ?? []).filter((el) => !el.isDeleted);
+    const byId = new Map(live.map((el) => [el.id, el]));
+    const sel = appState?.selectedElementIds ?? {};
+    const found = new Map();
+    for (const el of live) {
+      if (!sel[el.id]) continue;
+      const found1 = taskSource(el, byId);
+      if (!found1 || found.has(found1.key) || isTask(found1, byId) || pendingRef.current.has(found1.key)) continue;
+      found.set(found1.key, found1);
+    }
+    const nextPicked = [...found.values()].sort((a, b) => a.y - b.y || a.x - b.x);
+    const pk = nextPicked.map((p) => `${p.key}:${p.text}`).join("|");
+    if (pk !== keys.current.picked) {
+      keys.current.picked = pk;
+      setPicked(nextPicked);
+    }
+    // Badges: at the top-right corner of each converted note, in screen px.
+    const z = appState?.zoom?.value ?? 1;
+    const sx = appState?.scrollX ?? 0;
+    const sy = appState?.scrollY ?? 0;
+    const w = appState?.width ?? Infinity;
+    const h = appState?.height ?? Infinity;
+    const nextMarks = [];
+    for (const el of live) {
+      if (el.type === "text" && el.containerId && byId.has(el.containerId)) continue;
+      const task = el.customData?.task;
+      const title = task?.title ?? pendingRef.current.get(el.id);
+      if (!task && !pendingRef.current.has(el.id)) continue;
+      const x = Math.round((el.x + el.width + sx) * z);
+      const y = Math.round((el.y + sy) * z);
+      if (x < -40 || y < -20 || x > w + 40 || y > h + 20) continue;
+      nextMarks.push({ key: el.id, x, y, title, id: task?.id ?? null, pending: !task });
+    }
+    const mk = JSON.stringify(nextMarks);
+    if (mk !== keys.current.marks) {
+      keys.current.marks = mk;
+      setMarks(nextMarks);
+    }
+  }, []);
+
+  useEffect(() => {
+    const api = handle?.api;
+    if (!api?.onChange) return;
+    readScene(api.getSceneElements(), api.getAppState());
+    return api.onChange((els, st) => readScene(els, st));
+  }, [handle, readScene]);
+  useEffect(() => {
+    // A pending mark came or went: redraw the badges.
+    keys.current.marks = "";
+    if (scene.current) readScene(scene.current.elements, scene.current.appState);
+  }, [pending, readScene]);
+
+  /** Write (or clear) the task mark on the elements a task came from. */
+  const markElements = (ids, task) => {
+    const api = (handle ?? ref.current)?.api;
+    if (!api) return;
+    const set = new Set(ids);
+    const els = api.getSceneElementsIncludingDeleted().map((el) => {
+      if (!set.has(el.id)) return el;
+      const { task: _old, ...rest } = el.customData ?? {};
+      return {
+        ...el,
+        customData: task ? { ...rest, task } : rest,
+        version: (el.version ?? 1) + 1,
+        versionNonce: Math.floor(Math.random() * 2 ** 31),
+        updated: Date.now(),
+      };
+    });
+    api.updateScene({ elements: els });
+  };
+
+  const [taskOpen, setTaskOpen] = useState(false);
+  const [taskDraft, setTaskDraft] = useState("");
+  const createTasks = async (items, override) => {
+    setTaskOpen(false);
+    const list = items.map((it) => ({ ...it, title: clipTitle(items.length === 1 && override?.trim() ? override : it.text) }));
+    setPending((m) => {
+      const next = new Map(m);
+      for (const it of list) next.set(it.key, it.title);
+      return next;
+    });
+    const results = await Promise.all(
+      list.map(async (it) => {
+        let res;
+        try {
+          res = await onCreateTask({ title: it.title, sourceIds: it.ids });
+        } catch (e) {
+          res = { ok: false, error: e?.message };
+        }
+        const ok = Boolean(res) && res.ok !== false;
+        if (ok) markElements(it.ids, { id: res?.id ?? null, title: it.title });
+        return { it, ok, id: res?.id ?? null, error: res?.error };
+      }),
+    );
+    setPending((m) => {
+      const next = new Map(m);
+      for (const it of list) next.delete(it.key);
+      return next;
+    });
+    const done = results.filter((r) => r.ok);
+    const failed = results.filter((r) => !r.ok);
+    if (done.length) {
+      const one = done.length === 1 ? done[0] : null;
+      toast.success(one ? `Task created: ${one.it.title}` : `${done.length} tasks created`, {
+        action: one && onOpenTask ? { label: "Open", onClick: () => onOpenTask({ id: one.id, title: one.it.title, sourceIds: one.it.ids }) } : undefined,
+      });
+    }
+    if (failed.length) {
+      toast.error(failed.length === 1 ? `Couldn't create “${failed[0].it.title}”` : `Couldn't create ${failed.length} tasks`, {
+        description: failed[0].error || "Nothing was created. Try again.",
+      });
+    }
+  };
+
+  // ---- view ---------------------------------------------------------------
+  const [view, setView] = useState(defaultView === "text" ? "text" : "board");
+  const textView = view === "text";
+
+  const retry = () => {
+    if (sketchSave.state === "error") saveSketch(lastSketch.current ?? ref.current?.getScene() ?? sketch);
+    if (titleSave.state === "error") rename(shownTitle);
+  };
+
+  const sized = /(^|\s)(h-|min-h-|size-|flex-1|grow)/.test(className ?? "");
+  const hasTemplates = Array.isArray(templates) && templates.length > 0;
+
+  return (
+    <section
+      aria-label={shownTitle}
+      className={cx("flex flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground", !sized && "h-[40rem]", className)}
+    >
+      <header className="flex min-h-14 shrink-0 items-center gap-1 border-b border-border bg-card px-2 py-1.5 text-card-foreground sm:gap-2 sm:px-3">
+        {onBack ? <IconButton icon="arrow-left" label={backLabel} size="sm" onClick={onBack} /> : null}
+        <span aria-hidden="true" className="hidden size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground sm:grid">
+          <Icon name="pencil" size={16} />
+        </span>
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <TitleField value={shownTitle} readOnly={readOnly} onCommit={rename} />
+          {meta ? <span className="hidden min-w-0 truncate text-xs text-muted-foreground lg:inline">{meta}</span> : null}
+        </div>
+        <SaveStatus states={[sketchSave, titleSave]} onRetry={retry} />
+        <ToggleGroup
+          size="sm"
+          aria-label="View"
+          value={view}
+          onChange={setView}
+          items={[
+            { value: "board", label: "Board view", icon: "pencil", iconOnly: true },
+            { value: "text", label: "Text view", icon: "list", iconOnly: true },
+          ]}
+        />
+        {canTask && picked.length ? (
+          <Popover
+            open={taskOpen}
+            onOpenChange={(o) => {
+              if (o) setTaskDraft(picked[0]?.text ?? "");
+              setTaskOpen(o);
+            }}
+            label={picked.length === 1 ? taskLabel : `Create ${picked.length} tasks`}
+            align="end"
+            width="md"
+            trigger={(p) => (
+              <Button {...p} size="sm" icon="check-circle" aria-label={picked.length === 1 ? taskLabel : `Create ${picked.length} tasks`}>
+                <span className="max-sm:hidden">{picked.length === 1 ? taskLabel : `Create ${picked.length} tasks`}</span>
+              </Button>
+            )}
+          >
+            {picked.length === 1 ? (
+              <form
+                className="grid gap-3"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  if (taskDraft.trim()) createTasks(picked, taskDraft);
+                }}
+              >
+                <Field id="wb-task-title" label="Task">
+                  <Input id="wb-task-title" value={taskDraft} maxLength={200} onChange={(e) => setTaskDraft(e.target.value)} onFocus={(e) => e.target.select()} />
+                </Field>
+                <p className="text-xs text-muted-foreground">The note stays on the board, with a mark that it's now a task.</p>
+                <div className="flex justify-end gap-2">
+                  <Button size="sm" variant="quiet" onClick={() => setTaskOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button size="sm" variant="primary" type="submit" disabled={!taskDraft.trim()}>
+                    {taskLabel}
+                  </Button>
+                </div>
+              </form>
+            ) : (
+              <div className="grid gap-3">
+                <p className="text-sm font-medium">One task for each note</p>
+                <ul className="grid max-h-48 gap-1 overflow-y-auto">
+                  {picked.map((it) => (
+                    <li key={it.key} className="flex items-start gap-2 text-sm">
+                      <Icon name="check-circle" size={14} className="mt-0.5 shrink-0 text-muted-foreground" />
+                      <span className="min-w-0 break-words">{clipTitle(it.text)}</span>
+                    </li>
+                  ))}
+                </ul>
+                <div className="flex justify-end gap-2">
+                  <Button size="sm" variant="quiet" onClick={() => setTaskOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button size="sm" variant="primary" onClick={() => createTasks(picked)}>
+                    Create {picked.length} tasks
+                  </Button>
+                </div>
+              </div>
+            )}
+          </Popover>
+        ) : null}
+        <Tooltip label={exportError ? `Export failed: ${exportError}` : "Export as PNG"}>
+          <Button size="sm" icon={exportError ? "warning" : "download"} loading={exporting} disabled={empty} onClick={exportPng} aria-label={exportError ? `Export PNG — failed: ${exportError}. Try again` : "Export PNG"}>
+            <span className="max-sm:hidden">Export</span>
+          </Button>
+        </Tooltip>
+        {onShare ? (
+          <Button size="sm" variant="primary" icon="share" onClick={onShare} aria-label={shareLabel}>
+            <span className="max-sm:hidden">{shareLabel}</span>
+          </Button>
+        ) : null}
+      </header>
+
+      <div className="relative min-h-0 flex-1">
+        <div className="absolute inset-0" inert={textView || undefined} aria-hidden={textView || undefined}>
+          <SketchCanvas
+            label={shownTitle}
+            value={value}
+            defaultValue={defaultValue}
+            onChange={handleChange}
+            changeDelay={changeDelay}
+            readOnly={readOnly}
+            canvasRef={ref}
+            onReady={setHandle}
+            empty={hasTemplates && !blank ? <Starter templates={templates} onPick={applyTemplate} /> : undefined}
+            className="h-full rounded-none border-0"
+          />
+          {marks.length ? <TaskMarks marks={marks} onOpen={onOpenTask} /> : null}
+        </div>
+        {textView ? <TextView sketch={sketch} onBoard={() => setView("board")} readOnly={readOnly} /> : null}
+      </div>
+    </section>
+  );
+}
+
+/** The title: a button that becomes a field; Enter or leaving saves, Esc
+ *  puts it back. */
+function TitleField({ value, readOnly, onCommit }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const done = useRef(false);
+  if (readOnly) return <h2 className="min-w-0 truncate px-1 text-sm font-semibold">{value}</h2>;
+  if (!editing) {
+    return (
+      <Tooltip label="Rename">
+        <Button
+          variant="quiet"
+          size="sm"
+          align="start"
+          className="min-w-0 max-w-full"
+          aria-label={`${value}. Rename board`}
+          onClick={() => {
+            setDraft(value);
+            done.current = false;
+            setEditing(true);
+          }}
+        >
+          <span className="truncate font-semibold">{value}</span>
+        </Button>
+      </Tooltip>
+    );
+  }
+  const finish = (save) => {
+    if (done.current) return;
+    done.current = true;
+    setEditing(false);
+    const next = draft.trim();
+    if (save && next && next !== value) onCommit(next);
+  };
+  return (
+    <Input
+      autoFocus
+      aria-label="Board title"
+      value={draft}
+      maxLength={120}
+      className="min-w-0 max-w-sm font-semibold"
+      onChange={(e) => setDraft(e.target.value)}
+      onFocus={(e) => e.target.select()}
+      onBlur={() => finish(true)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          finish(false);
+        }
+      }}
+    />
+  );
+}
+
+/** One line for every save the board makes (the drawing, the title): the
+ *  worst of them. */
+function SaveStatus({ states, onRetry }) {
+  const failed = states.find((s) => s.state === "error");
+  if (failed) {
+    return (
+      <div role="alert" className="flex min-w-0 items-center gap-1 text-xs">
+        <Icon name="warning" size={14} className="shrink-0 text-destructive" />
+        <span className="truncate max-md:sr-only">{failed.error || "Couldn't save"}</span>
+        <Button variant="quiet" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+  const saving = states.some((s) => s.state === "saving");
+  const saved = states.some((s) => s.state === "saved");
+  if (!saving && !saved) return null;
+  return (
+    <p role="status" className="flex shrink-0 items-center gap-1 px-1 text-xs text-muted-foreground">
+      <Icon name={saving ? "loader" : "check"} size={14} className={cx(saving && "motion-safe:animate-spin")} />
+      <span className="max-sm:sr-only">{saving ? "Saving…" : "Saved"}</span>
+    </p>
+  );
+}
+
+/** The empty board: how to start, and the templates. The layer under it
+ *  lets clicks through to the canvas; the card takes its own. */
+function Starter({ templates, onPick }) {
+  return (
+    <div className="pointer-events-auto w-full max-w-md rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg">
+      <p className="text-base font-semibold">Start your board</p>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Pick a starting point, or double-click anywhere to write. <Kbd>P</Kbd> draws, <Kbd>R</Kbd> makes a box.
+      </p>
+      <ul className="mt-4 grid grid-cols-3 gap-2" aria-label="Templates">
+        {templates.map((t) => (
+          <li key={t.id} className="min-w-0">
+            {/* raw: a template tile holds a drawn preview above its name;
+                Button is a one-line label. Keyboard and focus ring as Button. */}
+            <button
+              type="button"
+              onClick={() => onPick(t)}
+              title={t.description}
+              aria-label={t.description ? `${t.label}: ${t.description}` : t.label}
+              className="group flex w-full flex-col gap-2 rounded-lg border border-border bg-background p-2 text-left outline-none transition-colors duration-150 hover:border-primary hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none"
+            >
+              <Preview template={t} />
+              <span className="truncate text-xs font-medium">{t.label}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/** A small drawing of what a template lays down, in tokens. */
+function Preview({ template }) {
+  const box = "aspect-[4/3] w-full overflow-hidden rounded-md border border-border bg-card";
+  if (template.preview) return <span className={cx(box, "grid place-items-center")}>{template.preview}</span>;
+  if (template.id === "grid") {
+    return (
+      <span aria-hidden="true" className={cx(box, "grid grid-cols-3 grid-rows-2 gap-1 p-1.5")}>
+        {Array.from({ length: 6 }, (_, i) => (
+          <span key={i} className="rounded-sm border border-dashed border-muted-foreground/50" />
+        ))}
+      </span>
+    );
+  }
+  if (template.id === "matrix") {
+    return (
+      <span aria-hidden="true" className={cx(box, "block p-1.5")}>
+        <span className="grid size-full grid-cols-2 grid-rows-2 gap-px border-b-2 border-l-2 border-muted-foreground">
+          <span className="bg-success/25" />
+          <span className="bg-info/25" />
+          <span className="bg-muted" />
+          <span className="bg-warning/25" />
+        </span>
+      </span>
+    );
+  }
+  if (template.id === "blank") {
+    return (
+      <span aria-hidden="true" className={cx(box, "grid place-items-center text-muted-foreground")}>
+        <Icon name="plus" size={18} />
+      </span>
+    );
+  }
+  return (
+    <span aria-hidden="true" className={cx(box, "grid place-items-center text-muted-foreground")}>
+      <Icon name={template.icon ?? "frame"} size={18} />
+    </span>
+  );
+}
+
+/** The board as a list: frames as sections, their words in reading order;
+ *  what sits outside any frame last. */
+function TextView({ sketch, onBoard, readOnly }) {
+  const items = sketchItems(sketch);
+  const frames = items.filter((i) => i.kind === "frame");
+  const rest = items.filter((i) => i.kind !== "frame");
+  const inFrame = (f) => rest.filter((i) => i.frame === f.id);
+  const outside = rest.filter((i) => !i.frame || !frames.some((f) => f.id === i.frame));
+  const [copied, setCopied] = useState(null);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(sketchToText(sketch));
+      setCopied("Copied");
+    } catch {
+      setCopied("Couldn't copy");
+    }
+    setTimeout(() => setCopied(null), 1600);
+  };
+  const line = (it) => (it.kind === "stamp" ? (it.text ? `${it.stamp}: ${it.text}` : it.stamp) : it.kind === "image" ? "Image" : it.text);
+  return (
+    <div className="absolute inset-0 z-10 overflow-y-auto bg-background">
+      <div className="mx-auto grid max-w-2xl gap-6 px-4 py-6 sm:px-6">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div>
+            <h3 className="text-base font-semibold">What the board says</h3>
+            <p className="text-sm text-muted-foreground">Every word on the board, top to bottom, grouped by frame.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            {copied ? (
+              <span role="status" className="text-xs text-muted-foreground">
+                {copied}
+              </span>
+            ) : null}
+            <Button size="sm" icon="copy" onClick={copy} disabled={!items.length}>
+              Copy text
+            </Button>
+          </div>
+        </div>
+        {!items.length ? (
+          <div className="grid justify-items-center gap-3 rounded-lg border border-dashed border-border px-4 py-10 text-center">
+            <p className="text-sm text-muted-foreground">{readOnly ? "Nothing on this board yet." : "Nothing written on the board yet. Drawings without words don't show here."}</p>
+            <Button size="sm" icon="pencil" onClick={onBoard}>
+              Back to the board
+            </Button>
+          </div>
+        ) : (
+          <>
+            {frames.map((f) => (
+              <TextSection key={f.id} title={f.name} lines={inFrame(f).map(line).filter(Boolean)} />
+            ))}
+            {outside.length ? <TextSection title={frames.length ? "Outside frames" : null} lines={outside.map(line).filter(Boolean)} /> : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TextSection({ title, lines }) {
+  return (
+    <section className="grid gap-2">
+      {title ? <h4 className="text-sm font-semibold">{title}</h4> : null}
+      {lines.length ? (
+        <ul className="grid gap-1.5">
+          {lines.map((l, i) => (
+            <li key={i} className="rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground">
+              {l}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-sm text-muted-foreground">Empty.</p>
+      )}
+    </section>
+  );
+}
+
+// ---- tasks ------------------------------------------------------------------
+
+const clipTitle = (s) => {
+  const t = String(s ?? "").replace(/\s+/g, " ").trim();
+  return t.length > 200 ? `${t.slice(0, 199)}…` : t;
+};
+
+/** What a selected element could become a task from: a note (a shape with
+ *  words bound in it — selecting its words counts too) or a lone text.
+ *  { key: the element that carries the mark, ids: every element it came
+ *  from, text, x, y } or null. */
+function taskSource(el, byId) {
+  let box = el;
+  let words = null;
+  if (el.type === "text") {
+    words = el;
+    if (el.containerId && byId.has(el.containerId)) box = byId.get(el.containerId);
+  } else {
+    const b = (el.boundElements ?? []).find((x) => x.type === "text");
+    words = b ? byId.get(b.id) : null;
+  }
+  const text = String(words?.originalText ?? words?.text ?? "").replace(/\s+/g, " ").trim();
+  if (!words || !text) return null;
+  return { key: box.id, ids: box === words ? [words.id] : [box.id, words.id], text, x: box.x, y: box.y };
+}
+
+function isTask(src, byId) {
+  return src.ids.some((id) => byId.get(id)?.customData?.task);
+}
+
+/** The small "Task" badges over converted notes, in screen px over the
+ *  canvas. Clickable (open the task) when the page gives `onOpenTask`;
+ *  otherwise they let the pointer through to the board. */
+function TaskMarks({ marks, onOpen }) {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[5] overflow-hidden">
+      {marks.map((m) => {
+        const body = (
+          <>
+            <Icon name={m.pending ? "loader" : "check-circle"} size={12} className={cx("shrink-0", m.pending ? "motion-safe:animate-spin" : "text-success")} />
+            <span>{m.pending ? "Creating…" : "Task"}</span>
+          </>
+        );
+        const place = { left: m.x, top: m.y };
+        const look = "absolute flex -translate-x-3/4 -translate-y-1/2 items-center gap-1 rounded-full border border-border bg-card px-2 py-0.5 text-[11px] leading-4 font-medium text-card-foreground shadow-sm";
+        return onOpen && m.id != null && !m.pending ? (
+          // raw: a 20px badge pinned over a drawn note; a kit Button is 36px
+          // and would cover the note it marks.
+          <button
+            key={m.key}
+            type="button"
+            title={`Open task: ${m.title}`}
+            aria-label={`Open task: ${m.title}`}
+            onClick={() => onOpen({ id: m.id, title: m.title, sourceIds: [m.key] })}
+            className={cx(look, "pointer-events-auto cursor-pointer outline-none transition-colors duration-150 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none")}
+            style={place}
+          >
+            {body}
+          </button>
+        ) : (
+          <span key={m.key} title={m.title} className={look} style={place}>
+            {body}
+          </span>
+        );
+      })}
+    </div>
+  );
+}