@crewlethq/ui 0.31.0 → 0.32.0

package/dist/{chunk-JODJS7MR.js → chunk-PJD2KFHX.js}

@@ -1,10 +1,11 @@
 import { Note } from './chunk-CJKMURZO.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OJ45PPCV.js';
+import { CanvasToolbar, toolForKey } from './chunk-E6EWK5YY.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-OTN35CI4.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasBoard-ZLPDINSM.css';
-import { useState, useCallback, useMemo, useRef } from 'react';
-import { MaximizeGlyph, PencilGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
+import './CanvasBoard-MBZVBWDO.css';
+import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
+import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/CanvasBoard/budget.ts
@@ -41,6 +42,11 @@ var NOTE_TONES = {
   green: "green",
   purple: "purple"
 };
+function titleSize(note) {
+  const chars = Math.max(1, Array.from(note.text.trim()).length);
+  return Math.max(1, Math.min(note.h * 0.6, note.w / (chars * TITLE_GLYPH_EM)));
+}
+var TITLE_GLYPH_EM = 0.58;
 function noteName(note) {
   const words = note.text.trim().replace(/\s+/g, " ");
   return words.length > 40 ? `${words.slice(0, 39)}\u2026` : words;
@@ -54,8 +60,21 @@ var LABELS = {
   removeNote: "Delete note",
   noteText: "Note text",
   paused: "Zoom in to run this board",
-  active: "Press Escape to return to the canvas"
+  active: "Press Escape to return to the canvas",
+  interact: "Double-click to use this board",
+  tools: "Tools",
+  moveTool: "Move",
+  handTool: "Hand",
+  textTool: "Text",
+  stickyTool: "Sticky note"
+};
+var TOOL_CURSOR = {
+  move: "pointer",
+  hand: "hand",
+  text: "text",
+  sticky: "crosshair"
 };
+var CANVAS_BOARD_MIN_ZOOM = 0.02;
 var KEY_STEP = 8;
 var KEY_STEP_LARGE = 64;
 var CONTENT_MARGIN = 160;
@@ -80,23 +99,37 @@ function contentOf(boards, notes) {
   };
 }
 var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var CONTROL = "button, a[href], input, select, textarea, [contenteditable='true']";
+var POINTER_CORNERS = ["resize-nw", "resize-ne", "resize-sw"];
 function useFrameGestures(zoom, minSide, maxSide, commit) {
   const [preview, setPreview] = useState(null);
   const drag = useRef(null);
   const next = useCallback(
-    (d, dx, dy) => d.mode === "move" ? { ...d.from, x: Math.round(d.from.x + dx), y: Math.round(d.from.y + dy) } : {
-      ...d.from,
-      w: clamp(Math.round(d.from.w + dx), minSide, maxSide),
-      h: clamp(Math.round(d.from.h + dy), minSide, maxSide)
+    (d, dx, dy) => {
+      const { from } = d;
+      if (d.mode === "move") return { ...from, x: Math.round(from.x + dx), y: Math.round(from.y + dy) };
+      const west = d.mode === "resize-nw" || d.mode === "resize-sw";
+      const north = d.mode === "resize-nw" || d.mode === "resize-ne";
+      const w = clamp(Math.round(from.w + (west ? -dx : dx)), minSide, maxSide);
+      const h = clamp(Math.round(from.h + (north ? -dy : dy)), minSide, maxSide);
+      return {
+        x: west ? from.x + from.w - w : from.x,
+        y: north ? from.y + from.h - h : from.y,
+        w,
+        h
+      };
     },
     [minSide, maxSide]
   );
-  const handle = (id, mode, item) => {
+  const pointer = (id, mode, item) => {
     const from = { x: item.x, y: item.y, w: item.w, h: item.h };
     return {
       onPointerDown: (event) => {
         if (event.pointerType === "mouse" && event.button !== 0) return;
+        const control = event.target instanceof Element ? event.target.closest(CONTROL) : null;
+        if (control !== null && control !== event.currentTarget) return;
         event.preventDefault();
+        event.stopPropagation();
         try {
           event.currentTarget.setPointerCapture(event.pointerId);
         } catch {
@@ -135,7 +168,12 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
       onPointerCancel: () => {
         drag.current = null;
         setPreview(null);
-      },
+      }
+    };
+  };
+  const keys = (id, mode, item) => {
+    const from = { x: item.x, y: item.y, w: item.w, h: item.h };
+    return {
       onKeyDown: (event) => {
         const step = event.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
         const delta = {
@@ -159,8 +197,13 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
       }
     };
   };
-  return { preview, handle };
+  const handle = (id, mode, item) => ({
+    ...pointer(id, mode, item),
+    ...keys(id, mode, item)
+  });
+  return { preview, handle, pointer };
 }
+var TYPING = "input, textarea, select, [contenteditable='true']";
 function CanvasBoard({
   label,
   boards,
@@ -174,9 +217,11 @@ function CanvasBoard({
   onBoardChange,
   onNoteChange,
   onNoteRemove,
+  onNoteCreate,
   onOpen,
   onActivate,
   controlsExtra,
+  toolbar = true,
   labels,
   canvasLabels,
   canvasRef,
@@ -187,6 +232,22 @@ function CanvasBoard({
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
   const [active, setActive] = useState(null);
   const [editing, setEditing] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [chosenTool, setTool] = useState("move");
+  const [spaceHeld, setSpaceHeld] = useState(false);
+  const canvas = useRef(null);
+  useImperativeHandle(canvasRef, () => canvas.current, []);
+  const creates = editable && onNoteCreate !== void 0;
+  const tools = [
+    { id: "move", label: text.moveTool, icon: /* @__PURE__ */ jsx(MousePointer2Glyph, {}), shortcut: "V" },
+    { id: "hand", label: text.handTool, icon: /* @__PURE__ */ jsx(HandGlyph, {}), shortcut: "H" },
+    ...creates ? [
+      { id: "text", label: text.textTool, icon: /* @__PURE__ */ jsx(TypeGlyph, {}), shortcut: "T" },
+      { id: "sticky", label: text.stickyTool, icon: /* @__PURE__ */ jsx(StickyNoteGlyph, {}), shortcut: "S" }
+    ] : []
+  ];
+  const tool = tools.some((t) => t.id === chosenTool) ? chosenTool : "move";
+  const acting = spaceHeld ? "hand" : tool;
   const activate = (id) => {
     setActive(id);
     onActivate?.(id);
@@ -215,15 +276,77 @@ function CanvasBoard({
   );
   const largest = boards.reduce((w, b) => Math.max(w, b.w), 0);
   const live = new Set(liveBoards(drawnBoards, view, viewport, maxLive, minLiveWidth));
+  const shownSelection = selected !== null && (selected.kind === "board" ? boards : notes).some((item) => item.id === selected.id) ? selected : null;
+  const isSelected = (kind, id) => shownSelection?.kind === kind && shownSelection.id === id;
+  useEffect(() => {
+    if (!spaceHeld) return;
+    const release = (event) => {
+      if (event instanceof KeyboardEvent && event.key !== " ") return;
+      setSpaceHeld(false);
+    };
+    window.addEventListener("keyup", release);
+    window.addEventListener("blur", release);
+    return () => {
+      window.removeEventListener("keyup", release);
+      window.removeEventListener("blur", release);
+    };
+  }, [spaceHeld]);
   const onKeyDown = (event) => {
-    if (event.key === "Escape" && active !== null) {
-      event.stopPropagation();
-      activate(null);
+    const target = event.target instanceof Element ? event.target : null;
+    if (event.key === "Escape") {
+      if (active !== null) {
+        event.stopPropagation();
+        activate(null);
+      } else if (shownSelection !== null) {
+        event.stopPropagation();
+        setSelected(null);
+      }
+      return;
+    }
+    if (event.defaultPrevented || target?.closest(TYPING)) return;
+    if (event.key === " ") {
+      if (target?.closest(CONTROL)) return;
+      event.preventDefault();
+      if (!event.repeat) setSpaceHeld(true);
+      return;
+    }
+    if ((event.key === "Delete" || event.key === "Backspace") && editable && shownSelection?.kind === "note") {
+      event.preventDefault();
+      onNoteRemove?.(shownSelection.id);
+      setSelected(null);
+      return;
+    }
+    const picked = toolForKey(tools, event);
+    if (picked !== void 0) {
+      event.preventDefault();
+      setTool(picked);
+    }
+  };
+  const onClick = (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target?.closest(".crewlet-canvas__viewport")) return;
+    if (target.closest(".crewlet-canvas-board__board, .crewlet-canvas-board__note")) return;
+    if ((acting === "text" || acting === "sticky") && onNoteCreate && canvas.current) {
+      const at = canvas.current.worldAt({ x: event.clientX, y: event.clientY });
+      const id = onNoteCreate(acting === "text" ? "title" : "sticky", {
+        x: Math.round(at.x),
+        y: Math.round(at.y)
+      });
+      setTool("move");
+      if (id !== void 0) {
+        setSelected({ kind: "note", id });
+        setEditing(id);
+      }
+      return;
     }
+    if (acting === "move") setSelected(null);
   };
   const zoomVar = { "--crewlet-canvas-board-zoom": String(view.k) };
+  const activeBoard = boards.find((b) => b.id === active && live.has(b.id));
+  const chosenBoard = shownSelection?.kind === "board" ? shownSelection.id : null;
+  const hint = !editable && activeBoard ? text.active : !editable && chosenBoard !== null && live.has(chosenBoard) ? text.interact : "";
   return (
-    // The wrapper only hears Escape bubbling from inside the canvas; the
+    // The wrapper hears keys and clicks bubbling from inside the canvas; the
     // canvas's own viewport is the focusable, labelled control.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ jsx(
@@ -231,7 +354,9 @@ function CanvasBoard({
       {
         className: cx("crewlet-canvas-board", className),
         "data-editable": editable || void 0,
+        "data-tool": acting,
         onKeyDown,
+        onClick,
         children: /* @__PURE__ */ jsx(
           Canvas,
           {
@@ -239,23 +364,31 @@ function CanvasBoard({
             content,
             largestItemWidth: largest || void 0,
             ground: "dotted",
+            cursor: TOOL_CURSOR[acting],
+            minZoom: CANVAS_BOARD_MIN_ZOOM,
+            refitOnResize: true,
+            controlsActualSize: true,
             controlsExtra,
+            hint,
             labels: canvasLabels,
+            overlay: toolbar ? /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__tools", children: /* @__PURE__ */ jsx(CanvasToolbar, { label: text.tools, tools, value: tool, onChange: setTool }) }) : void 0,
             onViewChange: (nextView, size) => {
               setView(nextView);
               setViewport(size);
             },
-            ref: canvasRef,
+            ref: canvas,
             children: /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__layer", style: zoomVar, children: [
               drawnBoards.map((b) => {
                 const isLive = live.has(b.id);
                 const isActive = !editable && active === b.id && isLive;
+                const chosen = isSelected("board", b.id);
                 return /* @__PURE__ */ jsxs(
                   "section",
                   {
                     className: "crewlet-canvas-board__board",
                     "data-live": isLive || void 0,
                     "data-active": isActive || void 0,
+                    "data-selected": chosen || void 0,
                     "aria-label": `${b.title}, ${text.size(b.w, b.h)}`,
                     style: { left: b.x, top: b.y, width: b.w, height: b.h },
                     children: [
@@ -266,10 +399,25 @@ function CanvasBoard({
                             type: "button",
                             className: "crewlet-canvas-board__title crewlet-canvas-board__handle",
                             "aria-label": text.move(b.title),
+                            "aria-pressed": chosen,
+                            onFocus: () => setSelected({ kind: "board", id: b.id }),
                             ...boardGestures.handle(b.id, "move", b),
                             children: b.title
                           }
-                        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__title", children: b.title }),
+                        ) : (
+                          // The name selects its board, as a press on the board
+                          // does; the board's keyboard route is its own page and
+                          // its open control, so the name is pointer only.
+                          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "crewlet-canvas-board__title",
+                              onClick: () => setSelected({ kind: "board", id: b.id }),
+                              children: b.title
+                            }
+                          )
+                        ),
                         onOpen && /* @__PURE__ */ jsx(
                           IconButton,
                           {
@@ -287,27 +435,29 @@ function CanvasBoard({
                           /* @__PURE__ */ jsx("span", { children: text.size(b.w, b.h) }),
                           /* @__PURE__ */ jsx("span", { children: text.paused })
                         ] }) }),
-                        isLive && !isActive && // A press here pans the canvas like the field around it;
-                        // a click without a drag hands this board the pointer.
-                        // The board's page stays reachable by keyboard through
-                        // its own frame, so the shield is pointer only.
-                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        !isActive && // A press here pans the canvas like the field around it;
+                        // a click selects the board and a double-click hands a
+                        // live board the pointer. The board's page stays
+                        // reachable by keyboard through its own frame, so the
+                        // shield is pointer only.
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                         /* @__PURE__ */ jsx(
                           "div",
                           {
                             className: "crewlet-canvas-board__shield",
-                            onClick: editable ? void 0 : () => activate(b.id)
+                            onClick: () => setSelected({ kind: "board", id: b.id }),
+                            onDoubleClick: editable || !isLive ? void 0 : () => activate(b.id)
                           }
                         )
                       ] }),
-                      isActive && /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__hint", children: text.active }),
                       editable && /* @__PURE__ */ jsx(
-                        "button",
+                        Corners,
                         {
-                          type: "button",
-                          className: "crewlet-canvas-board__resize",
-                          "aria-label": text.resize(b.title),
-                          ...boardGestures.handle(b.id, "resize", b)
+                          title: b.title,
+                          selected: chosen,
+                          text,
+                          keyed: boardGestures.handle(b.id, "resize-se", b),
+                          pointer: (mode) => boardGestures.pointer(b.id, mode, b)
                         }
                       )
                     ]
@@ -321,9 +471,13 @@ function CanvasBoard({
                   note: n,
                   editable,
                   editing: editing === n.id,
+                  selected: isSelected("note", n.id),
                   text,
                   moveHandle: noteGestures.handle(n.id, "move", n),
-                  resizeHandle: noteGestures.handle(n.id, "resize", n),
+                  dragPaper: noteGestures.pointer(n.id, "move", n),
+                  resizeHandle: noteGestures.handle(n.id, "resize-se", n),
+                  resizePointer: (mode) => noteGestures.pointer(n.id, mode, n),
+                  onSelect: () => setSelected({ kind: "note", id: n.id }),
                   onEdit: () => setEditing(n.id),
                   onDone: (value) => {
                     setEditing(null);
@@ -345,13 +499,47 @@ function CanvasBoard({
     )
   );
 }
+function Corners({
+  title,
+  selected,
+  text,
+  keyed,
+  pointer
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selected && POINTER_CORNERS.map((mode) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "crewlet-canvas-board__resize",
+        "data-corner": mode,
+        ...pointer(mode)
+      },
+      mode
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-canvas-board__resize",
+        "data-corner": "resize-se",
+        "aria-label": text.resize(title),
+        ...keyed
+      }
+    )
+  ] });
+}
 function NoteView({
   note,
   editable,
   editing,
+  selected,
   text,
   moveHandle,
+  dragPaper,
   resizeHandle,
+  resizePointer,
+  onSelect,
   onEdit,
   onDone,
   onCancel,
@@ -365,6 +553,7 @@ function NoteView({
         "aria-label": text.noteText,
         defaultValue: note.text,
         autoFocus: true,
+        onFocus: (event) => event.currentTarget.select(),
         onBlur: (event) => onDone(event.currentTarget.value),
         onKeyDown: (event) => {
           if (event.key === "Escape") {
@@ -377,7 +566,14 @@ function NoteView({
           }
         }
       }
-    ) : /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__note-text", children: note.text }),
+    ) : /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "crewlet-canvas-board__note-text",
+        style: note.kind === "title" ? { fontSize: titleSize(note) } : void 0,
+        children: note.text
+      }
+    ),
     editable && !editing && /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__note-tools", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -385,6 +581,7 @@ function NoteView({
           type: "button",
           className: "crewlet-canvas-board__handle crewlet-canvas-board__note-move",
           "aria-label": text.move(noteName(note)),
+          onFocus: onSelect,
           ...moveHandle
         }
       ),
@@ -410,16 +607,22 @@ function NoteView({
       )
     ] }),
     editable && !editing && /* @__PURE__ */ jsx(
-      "button",
+      Corners,
       {
-        type: "button",
-        className: "crewlet-canvas-board__resize",
-        "aria-label": text.resize(noteName(note)),
-        ...resizeHandle
+        title: noteName(note),
+        selected,
+        text,
+        keyed: resizeHandle,
+        pointer: resizePointer
       }
     )
   ] });
   const frame = { left: note.x, top: note.y, width: note.w, height: note.h };
+  const paper = {
+    "data-selected": selected || void 0,
+    onClick: onSelect,
+    ...editable && !editing ? { ...dragPaper, onDoubleClick: onEdit } : {}
+  };
   if (note.kind === "sticky") {
     return /* @__PURE__ */ jsx(
       Note,
@@ -428,11 +631,12 @@ function NoteView({
         className: "crewlet-canvas-board__note",
         "data-kind": "sticky",
         style: frame,
+        ...paper,
         children: body
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, children: body });
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, ...paper, children: body });
 }
 
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards };
+export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, liveBoards, titleSize };

package/dist/{chunk-LR5QTFOE.js → chunk-RV7SZAHR.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-O63MWA4G.js';
+import { SlideStage } from './chunk-E6CR5PEV.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-VOX3YRFO.js → chunk-V5IGUXMZ.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-YZ7KG2RD.js').then(
+  loading ??= import('./Editor-YWBUJAQU.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-3C3BRIMY.js → chunk-VS3KOOOL.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-O63MWA4G.js';
+import { SlideStage } from './chunk-E6CR5PEV.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideGrid-RT6QEQEE.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-S6VG5ZFZ.js → chunk-WTNUVQVI.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OJ45PPCV.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OTN35CI4.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/generated/index.d.ts

@@ -24,6 +24,7 @@ export * from '../Callout/index.js';
 export * from '../Canvas/index.js';
 export * from '../CanvasBoard/index.js';
 export * from '../CanvasSchematic/index.js';
+export * from '../CanvasToolbar/index.js';
 export * from '../Card/index.js';
 export * from '../ChangeMark/index.js';
 export * from '../CharacterPicker/index.js';