@mhamz.01/easyflow-whiteboard 2.178.0 → 2.181.0

package/README.md

@@ -0,0 +1,429 @@
+# @mhamz.01/easyflow-whiteboard
+
+A feature-rich, embeddable React whiteboard built on Fabric.js, Zustand, and TailwindCSS. Drop it into any React 18+ app and get a fully functional infinite canvas with drawing tools, HTML overlay nodes, and automatic persistence.
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Component API](#component-api)
+- [Types](#types)
+- [Store API](#store-api)
+- [Available Tools](#available-tools)
+- [Keyboard Shortcuts](#keyboard-shortcuts)
+- [Persistence Pattern](#persistence-pattern)
+- [Architecture Overview](#architecture-overview)
+- [Directory Structure](#directory-structure)
+- [Performance Design](#performance-design)
+- [Built With](#built-with)
+
+---
+
+## Installation
+
+```bash
+npm install @mhamz.01/easyflow-whiteboard
+```
+
+### Peer Dependencies
+
+```bash
+npm install fabric@^7 react@^18 react-dom@^18 zustand@^5 \
+  @radix-ui/react-dropdown-menu@^2 \
+  @radix-ui/react-label@^2 \
+  @radix-ui/react-slider@^1
+```
+
+---
+
+## Quick Start
+
+```tsx
+import { EasyflowWhiteboard } from '@mhamz.01/easyflow-whiteboard';
+import '@mhamz.01/easyflow-whiteboard/dist/styles.css';
+
+export default function Page() {
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <EasyflowWhiteboard />
+    </div>
+  );
+}
+```
+
+> **Next.js note:** The component uses `"use client"` internally. Wrap it in a dynamic import or a client boundary if you use the App Router.
+
+---
+
+## Component API
+
+### `<EasyflowWhiteboard />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialData` | `WhiteboardInitialData` | — | Pre-load saved canvas JSON and HTML nodes |
+| `onSave` | `(payload: WhiteboardSavePayload) => void` | — | Debounced callback fired whenever the canvas changes |
+| `saveDebounceMs` | `number` | `2000` | Debounce delay (ms) for `onSave` |
+| `availableTasks` | `TaskTemplate[]` | `[]` | Tasks shown in the task picker dropdown |
+| `availableDocuments` | `DocumentTemplate[]` | `[]` | Documents shown in the document picker dropdown |
+| `isLoadingData` | `boolean` | `false` | Show toolbar skeleton while async data loads |
+| `createNewTaskHref` | `string` | — | URL for the "Create new task" footer link |
+| `createNewDocumentHref` | `string` | — | URL for the "Create new document" footer link |
+| `editable` | `boolean` | `true` | Set `false` to make the canvas fully read-only. See [EDITABLE_MODE.md](./EDITABLE_MODE.md) |
+
+---
+
+## Types
+
+### `WhiteboardInitialData`
+
+Shape of the data you pass in to restore a saved board.
+
+```ts
+interface WhiteboardInitialData {
+  canvas?:    string;             // canvas.toJSON() string from a previous save
+  tasks?:     TaskNodeData[];
+  documents?: DocumentNodeData[];
+}
+```
+
+### `WhiteboardSavePayload`
+
+Shape of the data the `onSave` callback receives.
+
+```ts
+interface WhiteboardSavePayload {
+  canvas:    string;             // Serialized Fabric.js canvas state
+  tasks:     TaskNodeData[];
+  documents: DocumentNodeData[];
+}
+```
+
+### `TaskTemplate` / `TaskNodeData`
+
+```ts
+interface TaskNodeData {
+  id:         string;
+  type:       "task";
+  title:      string;
+  status:     "todo" | "in-progress" | "done";
+  x:          number;            // World-space X position on the canvas
+  y:          number;            // World-space Y position on the canvas
+  assignee?:  string;
+  project?:   string;
+  priority?:  "low" | "medium" | "high";
+  dueDate?:   string;
+}
+```
+
+### `DocumentTemplate` / `DocumentNodeData`
+
+```ts
+interface DocumentNodeData {
+  id:          string;
+  type:        "document";
+  title:       string;
+  project:     string;
+  breadcrumb?: string[];
+  preview:     string;
+  updatedAt?:  string;
+  x:           number;
+  y:           number;
+}
+```
+
+---
+
+## Store API
+
+Access and mutate whiteboard state from anywhere in your app:
+
+```tsx
+import { useWhiteboardStore } from '@mhamz.01/easyflow-whiteboard';
+
+function MyComponent() {
+  const activeTool    = useWhiteboardStore((s) => s.activeTool);
+  const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
+
+  return <button onClick={() => setActiveTool("pen")}>Pen</button>;
+}
+```
+
+### State Slices
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `activeTool` | `Tool` | Currently selected drawing tool |
+| `setActiveTool` | `(tool: Tool) => void` | Switch the active tool programmatically |
+| `toolOptions` | `ToolOptions` | Per-tool styling options (color, strokeWidth, etc.) |
+| `setToolOption` | `(tool, option, value) => void` | Update a single tool option |
+| `selectedObjects` | `FabricObject[]` | Fabric objects currently selected on canvas |
+| `canUndo` / `canRedo` | `boolean` | Whether undo/redo is available |
+| `zoom` | `number` | Current canvas zoom level (1 = 100%) |
+| `bringToFront` | `(canvas) => void` | Move selected object to the top layer |
+| `sendToBack` | `(canvas) => void` | Move selected object to the bottom layer |
+
+---
+
+## Available Tools
+
+| Tool ID | Shortcut | Description |
+|---------|----------|-------------|
+| `select` | `V` | Select and move Fabric objects |
+| `pan` | `H` | Click-drag to pan the viewport; two-finger pinch to zoom |
+| `pen` | `P` | Freehand drawing with configurable stroke |
+| `rectangle` | `R` | Draw rectangles (drag to size) |
+| `circle` | `C` | Draw circles (drag to size) |
+| `frame` | `F` | Draw white frames — always rendered behind other objects |
+| `line` | `L` | Draw straight lines |
+| `arrow` | `A` | Draw lines with a filled arrowhead |
+| `text` | `T` | Place editable inline text |
+| `image` | `I` | Upload and place an image from disk |
+| `eraser` | `E` | Brush-erase objects by painting over them |
+| `undo` | `Ctrl+Z` | Undo the last canvas change |
+| `redo` | `Ctrl+Shift+Z` | Redo the last undone change |
+
+---
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `V H P R C F L A T I E` | Activate corresponding tool |
+| `Delete` / `Backspace` | Delete selected objects or HTML nodes |
+| `Ctrl+Z` | Undo |
+| `Ctrl+Shift+Z` or `Ctrl+Y` | Redo |
+| `Ctrl+C` | Copy selected Fabric objects |
+| `Ctrl+V` | Paste with cascading offset |
+| `Ctrl+A` | Select all HTML nodes (tasks + documents) |
+| `Escape` | Clear HTML node selection |
+| `Ctrl++` / `Ctrl+-` | Zoom in / out |
+| `Ctrl+0` | Reset zoom to 100% |
+| `Ctrl+Scroll` | Zoom to cursor |
+| `Shift+Scroll` | Horizontal pan |
+
+---
+
+## Persistence Pattern
+
+The library owns the UI and interaction. You own the data storage:
+
+```tsx
+import { EasyflowWhiteboard, WhiteboardInitialData, WhiteboardSavePayload } from '@mhamz.01/easyflow-whiteboard';
+import '@mhamz.01/easyflow-whiteboard/dist/styles.css';
+import { useCallback, useEffect, useState } from 'react';
+
+export default function BoardPage({ boardId }: { boardId: string }) {
+  const [initialData, setInitialData] = useState<WhiteboardInitialData>();
+  const [isLoading, setIsLoading] = useState(true);
+
+  // 1. Load saved state from your database on mount
+  useEffect(() => {
+    fetch(`/api/boards/${boardId}`)
+      .then(r => r.json())
+      .then(data => {
+        setInitialData({
+          canvas:    data.canvasJson,
+          tasks:     data.tasks,
+          documents: data.documents,
+        });
+        setIsLoading(false);
+      });
+  }, [boardId]);
+
+  // 2. Save on every debounced change
+  const handleSave = useCallback(async (payload: WhiteboardSavePayload) => {
+    await fetch(`/api/boards/${boardId}`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        canvasJson: payload.canvas,
+        tasks:      payload.tasks,
+        documents:  payload.documents,
+      }),
+    });
+  }, [boardId]);
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <EasyflowWhiteboard
+        initialData={initialData}
+        onSave={handleSave}
+        saveDebounceMs={2000}
+        isLoadingData={isLoading}
+        availableTasks={myProjectTasks}
+        availableDocuments={myProjectDocs}
+        createNewTaskHref="/tasks/new"
+        createNewDocumentHref="/docs/new"
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## Architecture Overview
+
+```
+EasyflowWhiteboard (whiteboard-test.tsx)
+│
+├── <canvas>                         Fabric.js v7 rendering surface
+│   Handles: shapes, paths, images, arrows, frames, text, selection
+│
+├── CanvasOverlayLayer               Absolutely-positioned HTML div
+│   ├── TaskNode                     Rich task card (status, assignee, priority)
+│   └── DocumentNode                 Rich document card (preview, breadcrumb)
+│   Reads canvas viewport transform on every `after:render` to stay aligned
+│
+├── WhiteboardToolbar                Fixed bottom bar
+│   ├── Tool buttons (V H P R C F L A T I E)
+│   ├── TaskDropdown                 Template picker → add task to canvas
+│   └── DocumentDropdown            Template picker → add doc to canvas
+│
+├── ToolOptionsPanel                 Left sidebar (appears for active tools)
+│   └── PenOptions / ShapeOptions / TextOptions / ImageOptions / ...
+│
+└── ZoomControls                     Top-right zoom percentage pill
+```
+
+### Two-layer rendering
+
+Fabric.js renders vector objects (shapes, paths, images) on a `<canvas>` element. An HTML `<div>` overlay, transformed with the same `viewportTransform` matrix, renders interactive React cards (tasks, documents). The two layers share a single world coordinate system — placing a node at `(x: 100, y: 200)` positions it exactly over canvas coordinates `(100, 200)`.
+
+### Hook composition
+
+The root `FabricWhiteboard` component delegates every behaviour to a dedicated hook:
+
+| Hook | Responsibility |
+|------|---------------|
+| `useCanvasInit` | Mount canvas, hydrate saved state, handle resize |
+| `useToolManager` | Switch drawing mode and cursors on tool change |
+| `useDrawing` | Mouse-drag shape creation |
+| `useEraser` | Brush cursor, trail render, object deletion |
+| `useMouseHandlers` | Single event router with rAF throttle |
+| `usePan` | Viewport drag and pinch zoom |
+| `useZoom` | Wheel zoom, keyboard shortcuts |
+| `useSelection` | Fabric selection → store, rubber-band box |
+| `useTextStyle` | Live font/color updates on selected text |
+| `useLiveUpdate` | Live style updates on selected objects |
+| `usePersistence` | Debounced auto-save + history push |
+| `useCopyPaste` | Ctrl+C / Ctrl+V clipboard |
+
+---
+
+## Directory Structure
+
+```
+src/
+├── index.ts                              Public API — component, store, and types
+├── styles.css                            Component stylesheet (TailwindCSS, scoped)
+│
+├── store/
+│   └── whiteboard-store.ts               Zustand store (tools, history, zoom, layer order)
+│
+├── types/
+│   └── canvas-node.ts                    TaskNodeData, DocumentNodeData, CanvasNode
+│
+├── lib/
+│   ├── fabric-utils.ts                   Canvas setup helpers, shape updates, welcome animation
+│   ├── fabric-arrow.ts                   Custom Arrow shape (Line + triangle arrowhead)
+│   ├── fabric-bidirectional-arrow.ts     Custom BidirectionalArrow shape (arrowheads both ends)
+│   ├── fabric-frame.ts                   Custom Frame shape (white Rect, always behind)
+│   └── utils.ts                          cn() — clsx + tailwind-merge
+│
+├── hooks/                                Canvas behaviour hooks (consumed by whiteboard-test.tsx)
+│   ├── useCanvasInit.ts                  Fabric canvas mount, hydration, resize
+│   ├── useToolManager.ts                 Drawing mode + cursor switch on tool change
+│   ├── useDrawing.ts                     Mouse-drag shape creation (rect, circle, etc.)
+│   ├── useEraser.ts                      Eraser brush, trail, object deletion
+│   ├── useMouseHandlers.ts               Single event router with rAF throttle on mouse:move
+│   ├── usePan.ts                         Viewport drag and two-finger pinch zoom
+│   ├── useZoom.ts                        Wheel zoom, toolbar buttons, keyboard shortcuts
+│   ├── useSelection.ts                   Fabric selection events → store + rubber-band box
+│   ├── useTextStyle.ts                   Live font/size/color sync to selected IText
+│   ├── useLiveUpdate.ts                  Live fill/stroke sync to selected objects
+│   ├── usePersistance.ts                 Debounced onSave callback + undo history push
+│   └── useCopyPaste.ts                   Ctrl+C / Ctrl+V with cascading paste offset
+│
+└── components/
+    ├── whiteboard/
+    │   └── whiteboard-test.tsx           Root component — composes all hooks and layers
+    │
+    ├── node/                             HTML overlay: draggable cards synced to canvas
+    │   ├── custom-node-overlay-layer.tsx Overlay orchestrator (renders all nodes)
+    │   ├── custom-node.tsx               TaskNode — task card with status toggle
+    │   ├── document-node.tsx             DocumentNode — document card with preview
+    │   ├── types/
+    │   │   └── overlay-types.ts          Shared interfaces (Task, Document, DragState, etc.)
+    │   └── hooks/
+    │       ├── useNodeState.ts           Local state + parent prop sync
+    │       ├── useNodeSelection.ts       selectedIds set + selection guard refs
+    │       ├── useNodeDrag.ts            Full drag lifecycle with rAF throttle
+    │       ├── useFabricSync.ts          Fabric object:moving → HTML position delta
+    │       ├── useWheelZoom.ts           Forwards wheel events from overlay to Fabric
+    │       ├── useSelectionBox.ts        Rubber-band hit-test for HTML nodes
+    │       └── useKeyboardShortcuts.ts   Ctrl+A, Escape, Delete for overlay nodes
+    │
+    ├── toolbar/
+    │   ├── whiteboard-toolbar.tsx        Bottom tool bar — buttons, shortcuts, dropdowns
+    │   ├── tooloptions-panel.tsx         Left sidebar — properties for active tool or selection
+    │   ├── toolbar-button.tsx            Reusable icon button with tooltip
+    │   ├── toolbar-seperator.tsx         Vertical divider between toolbar groups
+    │   ├── task-dropdown.tsx             Task template picker (opens above toolbar)
+    │   ├── document-dropdown.tsx         Document template picker (opens above toolbar)
+    │   ├── layers-control.tsx            Bring/send layer order controls
+    │   ├── options/                      Per-tool options panels
+    │   │   ├── pen-option.tsx            Stroke color, width, dash style
+    │   │   ├── shape-option.tsx          Fill, stroke, dash style for rect/circle/frame
+    │   │   ├── text-option.tsx           Font family, size, weight, alignment, color
+    │   │   ├── image-options.tsx         Opacity and filter controls for images
+    │   │   ├── line-options.tsx          Stroke color, width, dash style for lines
+    │   │   └── arrow-options.tsx         Stroke color, width for arrows
+    │   └── toolbar-skeleton/
+    │       └── toolbar-skeleton.tsx      Animated loading skeleton matching toolbar shape
+    │
+    ├── ui/                               Low-level Radix UI wrappers (no business logic)
+    │   ├── dropdown-menu.tsx             Radix DropdownMenu
+    │   ├── label.tsx                     Radix Label
+    │   └── slider.tsx                    Radix Slider
+    │
+    └── zoomcontrol/
+        └── zoom-control.tsx              Zoom percentage pill with +/− buttons
+```
+
+---
+
+## Performance Design
+
+The library is built to stay smooth at 60fps even during fast draws and large canvases.
+
+| Pattern | Where | Why |
+|---------|-------|-----|
+| `requestRenderAll()` everywhere | All hooks | Defers paint to Fabric's rAF loop; never blocks the main thread |
+| rAF throttle on `mouse:move` | `useMouseHandlers` | Raw pointer rate can be 200Hz; throttle to one frame |
+| Props in refs, effects register once | All canvas hooks | Avoids tearing down/reattaching listeners on every render |
+| `React.memo` + custom comparators | Toolbar, Overlay wrappers | Pan/zoom state changes don't re-render toolbar or node cards |
+| Delta accumulator in `useFabricSync` | Node drag | Never drops position updates even when RAF guard is active |
+| `requestIdleCallback` for JSON serialization | `usePersistence` | Expensive `canvas.toJSON()` runs during browser idle time |
+| History capped at 50 snapshots | `whiteboard-store` | Each snapshot can be 100 KB+; cap prevents memory growth |
+
+---
+
+## Built With
+
+| Dependency | Role |
+|-----------|------|
+| [Fabric.js v7](https://fabricjs.com/) | Canvas rendering engine |
+| [Zustand v5](https://zustand-demo.pmnd.rs/) | Lightweight state management |
+| [Radix UI](https://www.radix-ui.com/) | Accessible headless UI primitives |
+| [Lucide React](https://lucide.dev/) | Icon set |
+| [TailwindCSS v4](https://tailwindcss.com/) | Utility-first styling |
+| [clsx](https://github.com/lukeed/clsx) + [tailwind-merge](https://github.com/dcastil/tailwind-merge) | Safe class name composition |
+
+---
+
+## License
+
+MIT © Muhammad Hamza

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAUrE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;;AAE5D,wBA6KE"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAUrE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;;AAE5D,wBA6KE"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// HTML overlay orchestrator — renders task and document node cards positioned in canvas world-space coordinates.
 import React, { useRef, useCallback } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";

package/dist/components/node/custom-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,aAAc,SAAQ,aAAa;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAQ,GACT,EAAE,aAAa,2CAoIf"}
+{"version":3,"file":"custom-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,aAAc,SAAQ,aAAa;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAQ,GACT,EAAE,aAAa,2CAoIf"}

package/dist/components/node/custom-node.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// TaskNode card — draggable HTML card showing task title, status, priority, assignee, and a one-click done toggle.
 import { useState, useEffect } from "react";
 import { Check, ListCheck, Calendar, User2, AlertCircle } from "lucide-react";
 export default function TaskNode({ id, title, status, assignee, project, priority, dueDate, isSelected = false, onSelect, onDragStart, onStatusChange, zoom = 1, // Default to 1:1 scale

package/dist/components/node/document-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/document-node.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,UAAe,EACf,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,GACZ,EAAE,iBAAiB,2CAwHnB"}
+{"version":3,"file":"document-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/document-node.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,UAAe,EACf,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,GACZ,EAAE,iBAAiB,2CAwHnB"}

package/dist/components/node/document-node.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DocumentNode card — draggable HTML card showing document title, breadcrumb path, and an expandable content preview.
 import { useState, useEffect } from "react";
 import { ChevronDown, ChevronUp, Clock, ExternalLink, MoreHorizontal, Layers } from "lucide-react";
 export default function DocumentNode({ id, title, project, breadcrumb = [], preview, updatedAt, isSelected = false, onSelect, onDragStart, }) {

package/dist/components/node/hooks/useKeyboardShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,yBAAyB;IACjC,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,yBAAyB,QAwC3B"}
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,yBAAyB;IACjC,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,yBAAyB,QA2C3B"}

package/dist/components/node/hooks/useKeyboardShortcuts.js

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
 /**
  * SRP: handles global keyboard shortcuts for the overlay.
  *
@@ -11,6 +12,7 @@ import { useEffect } from "react";
  *  Delete/Backspace — delete selected nodes
  */
 export function useKeyboardShortcuts({ localTasksRef, localDocumentsRef, selectedIdsRef, setSelectedIds, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }) {
+    const editable = useWhiteboardStore((s) => s.editable);
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.target instanceof HTMLInputElement ||
@@ -29,6 +31,8 @@ export function useKeyboardShortcuts({ localTasksRef, localDocumentsRef, selecte
                 return;
             }
             if ((e.key === "Delete" || e.key === "Backspace") && selectedIdsRef.current.size > 0) {
+                if (!editable)
+                    return;
                 e.preventDefault();
                 const sel = selectedIdsRef.current;
                 const updatedTasks = localTasksRef.current.filter((t) => !sel.has(t.id));
@@ -42,5 +46,5 @@ export function useKeyboardShortcuts({ localTasksRef, localDocumentsRef, selecte
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [onTasksUpdate, onDocumentsUpdate]);
+    }, [onTasksUpdate, onDocumentsUpdate, editable]);
 }

package/dist/components/node/hooks/useNodeDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,yBAAyB,EACzB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EAqLxD"}
+{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAGvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,yBAAyB,EACzB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBAEmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EAsLxD"}

package/dist/components/node/hooks/useNodeDrag.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from "react";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
 function readPointer(e) {
     if ("touches" in e && e.touches.length > 0) {
         return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
@@ -22,6 +23,7 @@ function readPointer(e) {
  *    matrix-decomposition vs matrix-multiplication divergence.
  */
 export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, htmlNodesSelectedByBoxRef, localTasksRef, localDocumentsRef, fabricCanvas, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }) {
+    const editable = useWhiteboardStore((s) => s.editable);
     const [dragging, setDragging] = useState(null);
     const dragStateRef = useRef({
         isDragging: false,
@@ -42,6 +44,8 @@ export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, htmlNodesSelec
         return undefined;
     }, [localTasksRef, localDocumentsRef]);
     const handleDragStart = useCallback((itemId, e) => {
+        if (!editable)
+            return;
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
@@ -119,7 +123,7 @@ export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, htmlNodesSelec
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
         document.body.style.touchAction = "none";
-    }, [fabricCanvas, selectedIdsRef, dragSelectedIdsRef, getItemPosition]);
+    }, [fabricCanvas, selectedIdsRef, dragSelectedIdsRef, getItemPosition, editable]);
     // Attach move/end listeners only while a drag is active (SRP for side effects).
     useEffect(() => {
         if (!dragging)

package/dist/components/node/hooks/useNodeState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeState.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;;;EAoBhE"}
+{"version":3,"file":"useNodeState.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;;;EAoBhE"}

package/dist/components/node/hooks/useNodeState.js

@@ -1,3 +1,4 @@
+// Owns local task/document state and keeps it in sync with parent props; exposes stable refs for sibling hooks.
 import { useState, useEffect, useRef } from "react";
 /**
  * SRP: owns local task/document state and keeps it in sync with parent props.

package/dist/components/node/types/overlay-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-types.d.ts","sourceRoot":"","sources":["../../../../src/components/node/types/overlay-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"overlay-types.d.ts","sourceRoot":"","sources":["../../../../src/components/node/types/overlay-types.ts"],"names":[],"mappings":"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"}

package/dist/components/node/types/overlay-types.js

@@ -1 +1,2 @@
+// Shared TypeScript interfaces for the HTML canvas overlay: node data shapes, drag state, and component prop contracts.
 export {};

package/dist/components/toolbar/document-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/document-dropdown.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkDD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,kBAAuB,EACvB,aAAa,GACd,EAAE,qBAAqB,2CAoGvB"}
+{"version":3,"file":"document-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/document-dropdown.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkDD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,kBAAuB,EACvB,aAAa,GACd,EAAE,qBAAqB,2CAoGvB"}

package/dist/components/toolbar/document-dropdown.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Document picker dropdown — lists document templates passed by the consumer; clicking one places it on the canvas as a DocumentNode.
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { FileText, Plus, Clock, Layers } from "lucide-react";
 import { useWhiteboardStore } from "../../store/whiteboard-store";

package/dist/components/toolbar/layers-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layers-control.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/layers-control.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,UAAU,kBAAkB;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAyEzE"}
+{"version":3,"file":"layers-control.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/layers-control.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,UAAU,kBAAkB;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAyEzE"}

package/dist/components/toolbar/layers-control.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Layer ordering controls — bring to front/back and step forward/backward for the currently selected Fabric object.
 import { ArrowUp, ArrowDown, ChevronsUp, ChevronsDown } from "lucide-react";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 export default function LayerControls({ fabricCanvas }) {

package/dist/components/toolbar/options/arrow-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/arrow-options.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAehC,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAiNvE"}
+{"version":3,"file":"arrow-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/arrow-options.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAehC,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAiNvE"}

package/dist/components/toolbar/options/arrow-options.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Arrow tool options panel — stroke color, stroke width, and dash style for the arrow drawing tool.
 import { useWhiteboardStore } from "../../../store/whiteboard-store";
 import { cn } from "../../../lib/utils";
 import { useEffect, useState } from "react";

package/dist/components/toolbar/options/erase-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"erase-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/erase-option.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAgEpC"}
+{"version":3,"file":"erase-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/erase-option.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAgEpC"}

package/dist/components/toolbar/options/erase-option.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Eraser tool options panel — brush size control for the eraser tool.
 import { useWhiteboardStore } from "../../../store/whiteboard-store";
 const PRESET_SIZES = [10, 20, 30, 50];
 export default function EraserOptions() {

package/dist/components/toolbar/options/image-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/image-options.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA8CnC"}
+{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/image-options.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA8CnC"}

package/dist/components/toolbar/options/image-options.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Image tool options panel — opacity slider and filter controls for placed FabricImage objects.
 import { useWhiteboardStore } from "../../../store/whiteboard-store";
 import { Label } from "../../../components/ui/label";
 import { Slider } from "../../../components/ui/slider";