@crewlethq/ui 0.34.2 → 0.35.1

package/dist/{chunk-WPX6A5BV.js → chunk-E35CMI5D.js}

@@ -5,7 +5,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-5NNSKY6A.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
-import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
+import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, FrameGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/CanvasBoard/budget.ts
@@ -65,12 +65,14 @@ var LABELS = {
   tools: "Tools",
   moveTool: "Move",
   handTool: "Hand",
+  frameTool: "Frame",
   textTool: "Text",
   stickyTool: "Sticky note"
 };
 var TOOL_CURSOR = {
   move: "pointer",
   hand: "hand",
+  frame: "crosshair",
   text: "text",
   sticky: "crosshair"
 };
@@ -228,6 +230,8 @@ function CanvasBoard({
   onNoteChange,
   onNoteRemove,
   onNoteCreate,
+  onBoardCreate,
+  onBoardRemove,
   onOpen,
   onActivate,
   selected: heldSelection,
@@ -256,9 +260,11 @@ function CanvasBoard({
   const canvas = useRef(null);
   useImperativeHandle(canvasRef, () => canvas.current, []);
   const creates = editable && onNoteCreate !== void 0;
+  const frames = editable && onBoardCreate !== 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" },
+    ...frames ? [{ id: "frame", label: text.frameTool, icon: /* @__PURE__ */ jsx(FrameGlyph, {}), shortcut: "F" }] : [],
     ...creates ? [
       { id: "text", label: text.textTool, icon: /* @__PURE__ */ jsx(TypeGlyph, {}), shortcut: "T" },
       { id: "sticky", label: text.stickyTool, icon: /* @__PURE__ */ jsx(StickyNoteGlyph, {}), shortcut: "S" }
@@ -328,11 +334,14 @@ function CanvasBoard({
       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;
+    if ((event.key === "Delete" || event.key === "Backspace") && editable && shownSelection !== null) {
+      const remove = shownSelection.kind === "note" ? onNoteRemove : onBoardRemove;
+      if (remove) {
+        event.preventDefault();
+        remove(shownSelection.id);
+        setSelected(null);
+        return;
+      }
     }
     const picked = toolForKey(tools, event);
     if (picked !== void 0) {
@@ -344,6 +353,13 @@ function CanvasBoard({
     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 === "frame" && onBoardCreate && canvas.current) {
+      const at = canvas.current.worldAt({ x: event.clientX, y: event.clientY });
+      const id = onBoardCreate({ x: Math.round(at.x), y: Math.round(at.y) });
+      setTool("move");
+      if (id !== void 0) setSelected({ kind: "board", id });
+      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", {