@tsdraw/react 0.4.0

package/dist/index.js

@@ -0,0 +1,975 @@
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, isSelectTool } from '@tsdraw/core';
+import { IconPointer, IconPencil, IconEraser, IconHandStop } from '@tabler/icons-react';
+
+// src/components/TsdrawCanvas.tsx
+function SelectionOverlay({
+  selectionBrush,
+  selectionBounds,
+  selectionRotationDeg,
+  currentTool,
+  selectedCount,
+  onRotatePointerDown,
+  onResizePointerDown
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectionBrush && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "tsdraw-selection-brush",
+        style: {
+          left: selectionBrush.left,
+          top: selectionBrush.top,
+          width: selectionBrush.width,
+          height: selectionBrush.height
+        }
+      }
+    ),
+    selectionBounds && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tsdraw-selection-frame",
+        style: {
+          left: selectionBounds.left,
+          top: selectionBounds.top,
+          width: selectionBounds.width,
+          height: selectionBounds.height,
+          transform: `rotate(${selectionRotationDeg}deg)`
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "tsdraw-selection-bounds" }),
+          currentTool === "select" && selectedCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "tsdraw-rotation-stem" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "tsdraw-rotation-handle",
+                "aria-label": "Rotate selection",
+                onPointerDown: onRotatePointerDown
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "tsdraw-selection-handle tsdraw-selection-handle--nw",
+                style: { left: "0%", top: "0%" },
+                "aria-label": "Resize top left",
+                onPointerDown: (e) => onResizePointerDown(e, "nw")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "tsdraw-selection-handle tsdraw-selection-handle--ne",
+                style: { left: "100%", top: "0%" },
+                "aria-label": "Resize top right",
+                onPointerDown: (e) => onResizePointerDown(e, "ne")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "tsdraw-selection-handle tsdraw-selection-handle--sw",
+                style: { left: "0%", top: "100%" },
+                "aria-label": "Resize bottom left",
+                onPointerDown: (e) => onResizePointerDown(e, "sw")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "tsdraw-selection-handle tsdraw-selection-handle--se",
+                style: { left: "100%", top: "100%" },
+                "aria-label": "Resize bottom right",
+                onPointerDown: (e) => onResizePointerDown(e, "se")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var STYLE_COLORS = Object.entries(DEFAULT_COLORS).filter(([key]) => key !== "white").map(([value]) => ({ value }));
+var STYLE_DASHES = ["draw", "solid", "dashed", "dotted"];
+var STYLE_SIZES = ["s", "m", "l", "xl"];
+function StylePanel({
+  visible,
+  style,
+  theme,
+  drawColor,
+  drawDash,
+  drawSize,
+  onColorSelect,
+  onDashSelect,
+  onSizeSelect
+}) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: [
+    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tsdraw-style-color",
+        "data-active": drawColor === item.value ? "true" : void 0,
+        "aria-label": `Color ${item.value}`,
+        title: item.value,
+        onClick: () => onColorSelect(item.value),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "tsdraw-style-color-dot",
+            style: { background: resolveThemeColor(item.value, theme) }
+          }
+        )
+      },
+      item.value
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tsdraw-style-row",
+        "data-active": drawDash === dash ? "true" : void 0,
+        "aria-label": `Stroke ${dash}`,
+        title: dash,
+        onClick: () => onDashSelect(dash),
+        children: /* @__PURE__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
+      },
+      dash
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tsdraw-style-row",
+        "data-active": drawSize === size ? "true" : void 0,
+        "aria-label": `Thickness ${size}`,
+        title: size,
+        onClick: () => onSizeSelect(size),
+        children: /* @__PURE__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
+      },
+      size
+    )) })
+  ] });
+}
+function ToolOverlay({
+  visible,
+  pointerX,
+  pointerY,
+  isPenPreview,
+  penRadius,
+  penColor,
+  eraserRadius
+}) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx("div", { className: "tsdraw-tool-overlay", "aria-hidden": "true", children: isPenPreview ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "tsdraw-tool-dot",
+      style: {
+        left: pointerX,
+        top: pointerY,
+        width: penRadius * 2,
+        height: penRadius * 2,
+        backgroundColor: penColor
+      }
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "tsdraw-tool-ring",
+      style: {
+        left: pointerX,
+        top: pointerY,
+        width: eraserRadius * 2,
+        height: eraserRadius * 2
+      }
+    }
+  ) });
+}
+function getDefaultToolbarIcon(toolId, isActive) {
+  if (toolId === "select") return /* @__PURE__ */ jsx(IconPointer, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "pen") return /* @__PURE__ */ jsx(IconPencil, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "eraser") return /* @__PURE__ */ jsx(IconEraser, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "hand") return /* @__PURE__ */ jsx(IconHandStop, { size: 18, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
+  return null;
+}
+function Toolbar({ items, currentTool, onToolChange, style }) {
+  return /* @__PURE__ */ jsx("div", { className: "tsdraw-toolbar", style, children: items.map((item) => {
+    const isActive = currentTool === item.id;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tsdraw-toolbar-btn",
+        "data-active": isActive ? "true" : void 0,
+        onClick: () => onToolChange(item.id),
+        title: item.label,
+        "aria-label": item.label,
+        children: typeof item.icon === "function" ? item.icon(isActive) : item.icon
+      },
+      item.id
+    );
+  }) });
+}
+function getCanvasCursor(currentTool, state) {
+  if (currentTool === "hand") return "grab";
+  if (isSelectTool(currentTool)) {
+    if (state.isRotatingSelection) return "grabbing";
+    if (state.isResizingSelection) return "nwse-resize";
+    if (state.isMovingSelection) return "grabbing";
+    return "default";
+  }
+  return state.showToolOverlay ? "none" : "crosshair";
+}
+
+// src/canvas/useTsdrawCanvasController.ts
+function toScreenRect(editor, bounds) {
+  const { x, y, zoom } = editor.viewport;
+  return {
+    left: bounds.minX * zoom + x,
+    top: bounds.minY * zoom + y,
+    width: (bounds.maxX - bounds.minX) * zoom,
+    height: (bounds.maxY - bounds.minY) * zoom
+  };
+}
+function resolveDrawColor(colorStyle, theme) {
+  return resolveThemeColor(colorStyle, theme);
+}
+function useTsdrawCanvasController(options = {}) {
+  const stylePanelToolIds = options.stylePanelToolIds ?? ["pen"];
+  const stylePanelToolIdsRef = useRef(stylePanelToolIds);
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const editorRef = useRef(null);
+  const dprRef = useRef(1);
+  const lastPointerClientRef = useRef(null);
+  const currentToolRef = useRef(options.initialTool ?? "pen");
+  const selectedShapeIdsRef = useRef([]);
+  const selectionRotationRef = useRef(0);
+  const resizeRef = useRef({
+    handle: null,
+    startBounds: null,
+    startShapes: /* @__PURE__ */ new Map()
+  });
+  const rotateRef = useRef({
+    center: null,
+    startAngle: 0,
+    startSelectionRotationDeg: 0,
+    startShapes: /* @__PURE__ */ new Map()
+  });
+  const selectDragRef = useRef({
+    mode: "none",
+    startPage: { x: 0, y: 0 },
+    currentPage: { x: 0, y: 0 },
+    startPositions: /* @__PURE__ */ new Map(),
+    additive: false,
+    initialSelection: []
+  });
+  const [currentTool, setCurrentToolState] = useState(options.initialTool ?? "pen");
+  const [drawColor, setDrawColor] = useState("black");
+  const [drawDash, setDrawDash] = useState("draw");
+  const [drawSize, setDrawSize] = useState("m");
+  const [selectedShapeIds, setSelectedShapeIds] = useState([]);
+  const [selectionBrush, setSelectionBrush] = useState(null);
+  const [selectionBounds, setSelectionBounds] = useState(null);
+  const [selectionRotationDeg, setSelectionRotationDeg] = useState(0);
+  const [isMovingSelection, setIsMovingSelection] = useState(false);
+  const [isResizingSelection, setIsResizingSelection] = useState(false);
+  const [isRotatingSelection, setIsRotatingSelection] = useState(false);
+  const [pointerScreenPoint, setPointerScreenPoint] = useState({ x: 0, y: 0 });
+  const [isPointerInsideCanvas, setIsPointerInsideCanvas] = useState(false);
+  useEffect(() => {
+    currentToolRef.current = currentTool;
+  }, [currentTool]);
+  useEffect(() => {
+    stylePanelToolIdsRef.current = stylePanelToolIds;
+  }, [stylePanelToolIds]);
+  useEffect(() => {
+    selectedShapeIdsRef.current = selectedShapeIds;
+  }, [selectedShapeIds]);
+  useEffect(() => {
+    selectionRotationRef.current = selectionRotationDeg;
+  }, [selectionRotationDeg]);
+  const render = useCallback(() => {
+    const canvas = canvasRef.current;
+    const editor = editorRef.current;
+    if (!canvas || !editor) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = dprRef.current || 1;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+    editor.render(ctx);
+  }, []);
+  const refreshSelectionBounds = useCallback((editor, ids = selectedShapeIdsRef.current) => {
+    const pageBounds = getSelectionBoundsPage(editor, ids);
+    setSelectionBounds(pageBounds ? toScreenRect(editor, pageBounds) : null);
+  }, []);
+  const getPagePointFromClient = useCallback((editor, clientX, clientY) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    return editor.screenToPage(clientX - rect.left, clientY - rect.top);
+  }, []);
+  const updatePointerPreview = useCallback((clientX, clientY) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const isInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    setIsPointerInsideCanvas(isInside);
+    setPointerScreenPoint({
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    });
+  }, []);
+  const resetSelectUi = useCallback(() => {
+    setSelectionBrush(null);
+    setSelectionRotationDeg(0);
+    setIsMovingSelection(false);
+    setIsResizingSelection(false);
+    setIsRotatingSelection(false);
+    selectDragRef.current.mode = "none";
+    resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map() };
+    rotateRef.current = {
+      center: null,
+      startAngle: 0,
+      startSelectionRotationDeg: selectionRotationRef.current,
+      startShapes: /* @__PURE__ */ new Map()
+    };
+  }, []);
+  const handleResizePointerDown = useCallback(
+    (e, handle) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const editor = editorRef.current;
+      if (!editor || selectedShapeIdsRef.current.length === 0) return;
+      const bounds = getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
+      if (!bounds) return;
+      resizeRef.current = {
+        handle,
+        startBounds: bounds,
+        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+      };
+      selectDragRef.current.mode = "resize";
+      const p = getPagePointFromClient(editor, e.clientX, e.clientY);
+      editor.input.pointerDown(p.x, p.y, 0.5, false);
+      selectDragRef.current.startPage = p;
+      selectDragRef.current.currentPage = p;
+      lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
+      setIsResizingSelection(true);
+    },
+    [getPagePointFromClient]
+  );
+  const handleRotatePointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const editor = editorRef.current;
+      if (!editor || selectedShapeIdsRef.current.length === 0) return;
+      const bounds = getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
+      if (!bounds) return;
+      const center = {
+        x: (bounds.minX + bounds.maxX) / 2,
+        y: (bounds.minY + bounds.maxY) / 2
+      };
+      const p = getPagePointFromClient(editor, e.clientX, e.clientY);
+      rotateRef.current = {
+        center,
+        startAngle: Math.atan2(p.y - center.y, p.x - center.x),
+        startSelectionRotationDeg: selectionRotationRef.current,
+        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+      };
+      selectDragRef.current.mode = "rotate";
+      editor.input.pointerDown(p.x, p.y, 0.5, false);
+      selectDragRef.current.startPage = p;
+      selectDragRef.current.currentPage = p;
+      lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
+      setIsRotatingSelection(true);
+    },
+    [getPagePointFromClient]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+    const initialTool = options.initialTool ?? "pen";
+    const editor = new Editor({
+      toolDefinitions: options.toolDefinitions,
+      initialToolId: initialTool
+    });
+    editor.renderer.setTheme(options.theme ?? "light");
+    if (!editor.tools.hasTool(initialTool)) {
+      editor.setCurrentTool("pen");
+    }
+    const activeTool = editor.getCurrentToolId();
+    editorRef.current = editor;
+    setCurrentToolState(activeTool);
+    currentToolRef.current = activeTool;
+    const initialStyle = editor.getCurrentDrawStyle();
+    setDrawColor(initialStyle.color);
+    setDrawDash(initialStyle.dash);
+    setDrawSize(initialStyle.size);
+    const resize = () => {
+      const dpr = window.devicePixelRatio ?? 1;
+      dprRef.current = dpr;
+      const rect = container.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * dpr);
+      canvas.height = Math.round(rect.height * dpr);
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      editor.viewport.x = 0;
+      editor.viewport.y = 0;
+      editor.viewport.zoom = 1;
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const getPagePoint = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      return editor.screenToPage(e.clientX - rect.left, e.clientY - rect.top);
+    };
+    const sampleEvents = (e) => {
+      const coalesced = e.getCoalescedEvents?.();
+      return coalesced && coalesced.length > 0 ? coalesced : [e];
+    };
+    const handlePointerDown = (e) => {
+      if (!canvas.contains(e.target)) return;
+      canvas.setPointerCapture(e.pointerId);
+      lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
+      updatePointerPreview(e.clientX, e.clientY);
+      const first = sampleEvents(e)[0];
+      const { x, y } = getPagePoint(first);
+      const pressure = first.pressure ?? 0.5;
+      const isPen = first.pointerType === "pen" || first.pointerType === "touch";
+      if (currentToolRef.current === "select") {
+        const hit = getTopShapeAtPoint(editor, { x, y });
+        const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
+        if (isHitSelected) {
+          selectDragRef.current = {
+            mode: "move",
+            startPage: { x, y },
+            currentPage: { x, y },
+            startPositions: buildStartPositions(editor, selectedShapeIdsRef.current),
+            additive: false,
+            initialSelection: [...selectedShapeIdsRef.current]
+          };
+          setIsMovingSelection(true);
+          return;
+        }
+        selectDragRef.current = {
+          mode: "marquee",
+          startPage: { x, y },
+          currentPage: { x, y },
+          startPositions: /* @__PURE__ */ new Map(),
+          additive: first.shiftKey,
+          initialSelection: [...selectedShapeIdsRef.current]
+        };
+        setSelectionBrush({ left: e.offsetX, top: e.offsetY, width: 0, height: 0 });
+        if (!e.shiftKey) {
+          setSelectedShapeIds([]);
+          selectedShapeIdsRef.current = [];
+          setSelectionBounds(null);
+          setSelectionRotationDeg(0);
+        }
+        return;
+      }
+      editor.input.pointerDown(x, y, pressure, isPen);
+      editor.input.setModifiers(first.shiftKey, first.ctrlKey, first.metaKey);
+      editor.tools.pointerDown({ point: { x, y, z: pressure } });
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const handlePointerMove = (e) => {
+      updatePointerPreview(e.clientX, e.clientY);
+      const prevClient = lastPointerClientRef.current;
+      const dx = prevClient ? e.clientX - prevClient.x : 0;
+      const dy = prevClient ? e.clientY - prevClient.y : 0;
+      lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
+      for (const sample of sampleEvents(e)) {
+        const { x, y } = getPagePoint(sample);
+        const pressure = sample.pressure ?? 0.5;
+        const isPen = sample.pointerType === "pen" || sample.pointerType === "touch";
+        editor.input.pointerMove(x, y, pressure, isPen);
+      }
+      if (currentToolRef.current === "select") {
+        const mode = selectDragRef.current.mode;
+        const { x: px, y: py } = editor.input.getCurrentPagePoint();
+        if (mode === "rotate") {
+          const { center, startAngle, startSelectionRotationDeg, startShapes } = rotateRef.current;
+          if (!center) return;
+          const angle = Math.atan2(py - center.y, px - center.x);
+          const delta = angle - startAngle;
+          setSelectionRotationDeg(startSelectionRotationDeg + delta * 180 / Math.PI);
+          applyRotation(editor, startShapes, center, delta);
+          render();
+          return;
+        }
+        if (mode === "resize") {
+          const { handle, startBounds, startShapes } = resizeRef.current;
+          if (!handle || !startBounds) return;
+          applyResize(editor, handle, startBounds, startShapes, { x: px, y: py }, e.shiftKey);
+          render();
+          refreshSelectionBounds(editor);
+          return;
+        }
+        if (mode === "move") {
+          const drag = selectDragRef.current;
+          applyMove(editor, drag.startPositions, px - drag.startPage.x, py - drag.startPage.y);
+          render();
+          refreshSelectionBounds(editor);
+          return;
+        }
+        if (mode === "marquee") {
+          selectDragRef.current.currentPage = { x: px, y: py };
+          const pageRect = normalizeSelectionBounds(selectDragRef.current.startPage, selectDragRef.current.currentPage);
+          setSelectionBrush(toScreenRect(editor, pageRect));
+          const ids = getShapesInBounds(editor, pageRect);
+          const nextIds = selectDragRef.current.additive ? Array.from(/* @__PURE__ */ new Set([...selectDragRef.current.initialSelection, ...ids])) : ids;
+          setSelectedShapeIds(nextIds);
+          selectedShapeIdsRef.current = nextIds;
+          setSelectionRotationDeg(0);
+          refreshSelectionBounds(editor, nextIds);
+          return;
+        }
+      }
+      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
+      editor.tools.pointerMove({ screenDeltaX: dx, screenDeltaY: dy });
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const handlePointerUp = (e) => {
+      lastPointerClientRef.current = null;
+      updatePointerPreview(e.clientX, e.clientY);
+      const { x, y } = getPagePoint(e);
+      editor.input.pointerMove(x, y);
+      editor.input.pointerUp();
+      if (currentToolRef.current === "select") {
+        const drag = selectDragRef.current;
+        if (drag.mode === "rotate") {
+          setIsRotatingSelection(false);
+          selectDragRef.current.mode = "none";
+          setSelectionRotationDeg(0);
+          rotateRef.current = {
+            center: null,
+            startAngle: 0,
+            startSelectionRotationDeg: selectionRotationRef.current,
+            startShapes: /* @__PURE__ */ new Map()
+          };
+          render();
+          refreshSelectionBounds(editor);
+          return;
+        }
+        if (drag.mode === "resize") {
+          setIsResizingSelection(false);
+          selectDragRef.current.mode = "none";
+          resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map() };
+          render();
+          refreshSelectionBounds(editor);
+          return;
+        }
+        if (drag.mode === "move") {
+          setIsMovingSelection(false);
+          selectDragRef.current.mode = "none";
+          render();
+          refreshSelectionBounds(editor);
+          return;
+        }
+        if (drag.mode === "marquee") {
+          const rect = normalizeSelectionBounds(drag.startPage, { x, y });
+          const moved = Math.abs(x - drag.startPage.x) > 2 || Math.abs(y - drag.startPage.y) > 2;
+          let ids = [];
+          if (!moved) {
+            const hit = getTopShapeAtPoint(editor, { x, y });
+            if (hit) {
+              ids = drag.additive ? Array.from(/* @__PURE__ */ new Set([...drag.initialSelection, hit.id])) : [hit.id];
+            } else {
+              ids = drag.additive ? drag.initialSelection : [];
+            }
+          } else {
+            ids = getShapesInBounds(editor, rect);
+            if (drag.additive) {
+              ids = Array.from(/* @__PURE__ */ new Set([...drag.initialSelection, ...ids]));
+            }
+          }
+          setSelectedShapeIds(ids);
+          selectedShapeIdsRef.current = ids;
+          setSelectionRotationDeg(0);
+          setSelectionBrush(null);
+          selectDragRef.current.mode = "none";
+          render();
+          refreshSelectionBounds(editor, ids);
+          return;
+        }
+      }
+      editor.tools.pointerUp();
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const handleKeyDown = (e) => {
+      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
+      editor.tools.keyDown({ key: e.key });
+      render();
+    };
+    const handleKeyUp = (e) => {
+      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
+      editor.tools.keyUp({ key: e.key });
+      render();
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(container);
+    canvas.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    const disposeMount = options.onMount?.({
+      editor,
+      container,
+      canvas,
+      setTool: (tool) => {
+        if (!editor.tools.hasTool(tool)) return;
+        editor.setCurrentTool(tool);
+        setCurrentToolState(tool);
+        currentToolRef.current = tool;
+      },
+      getCurrentTool: () => editor.getCurrentToolId(),
+      applyDrawStyle: (partial) => {
+        editor.setCurrentDrawStyle(partial);
+        if (partial.color) setDrawColor(partial.color);
+        if (partial.dash) setDrawDash(partial.dash);
+        if (partial.size) setDrawSize(partial.size);
+        render();
+      }
+    });
+    return () => {
+      disposeMount?.();
+      ro.disconnect();
+      canvas.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      editorRef.current = null;
+    };
+  }, [
+    getPagePointFromClient,
+    options.initialTool,
+    options.onMount,
+    options.toolDefinitions,
+    refreshSelectionBounds,
+    render,
+    updatePointerPreview
+  ]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.renderer.setTheme(options.theme ?? "light");
+    render();
+  }, [options.theme, render]);
+  const setTool = useCallback(
+    (tool) => {
+      const editor = editorRef.current;
+      if (!editor) return;
+      if (!editor.tools.hasTool(tool)) return;
+      editor.setCurrentTool(tool);
+      setCurrentToolState(tool);
+      currentToolRef.current = tool;
+      if (tool !== "select") resetSelectUi();
+    },
+    [resetSelectUi]
+  );
+  const applyDrawStyle = useCallback(
+    (partial) => {
+      const editor = editorRef.current;
+      if (!editor) return;
+      editor.setCurrentDrawStyle(partial);
+      if (partial.color) setDrawColor(partial.color);
+      if (partial.dash) setDrawDash(partial.dash);
+      if (partial.size) setDrawSize(partial.size);
+      render();
+    },
+    [render]
+  );
+  const showToolOverlay = isPointerInsideCanvas && (currentTool === "pen" || currentTool === "eraser");
+  const canvasCursor = getCanvasCursor(currentTool, {
+    isMovingSelection,
+    isResizingSelection,
+    isRotatingSelection,
+    showToolOverlay
+  });
+  const cursorContext = {
+    currentTool,
+    defaultCursor: canvasCursor,
+    showToolOverlay,
+    isMovingSelection,
+    isResizingSelection,
+    isRotatingSelection
+  };
+  const toolOverlay = {
+    visible: showToolOverlay,
+    pointerX: pointerScreenPoint.x,
+    pointerY: pointerScreenPoint.y,
+    isPenPreview: currentTool === "pen",
+    penRadius: Math.max(2, STROKE_WIDTHS[drawSize] / 2),
+    penColor: resolveDrawColor(drawColor, options.theme ?? "light"),
+    eraserRadius: ERASER_MARGIN
+  };
+  return {
+    containerRef,
+    canvasRef,
+    currentTool,
+    drawColor,
+    drawDash,
+    drawSize,
+    selectedShapeIds,
+    selectionBrush,
+    selectionBounds,
+    selectionRotationDeg,
+    canvasCursor,
+    cursorContext,
+    toolOverlay,
+    showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
+    setTool,
+    applyDrawStyle,
+    handleResizePointerDown,
+    handleRotatePointerDown
+  };
+}
+var DEFAULT_TOOL_IDS = ["select", "pen", "eraser", "hand"];
+var DEFAULT_TOOL_LABELS = {
+  select: "Select",
+  pen: "Pen",
+  eraser: "Eraser",
+  hand: "Hand"
+};
+function parseAnchor(anchor) {
+  const parts = anchor.split("-");
+  let vertical = "center";
+  let horizontal = "center";
+  for (const part of parts) {
+    if (part === "top" || part === "bottom") vertical = part;
+    else if (part === "left" || part === "right") horizontal = part;
+  }
+  return { vertical, horizontal };
+}
+function isCustomTool(toolItem) {
+  return typeof toolItem !== "string";
+}
+function getToolId(toolItem) {
+  return typeof toolItem === "string" ? toolItem : toolItem.id;
+}
+function resolvePlacementStyle(placement, fallbackAnchor, fallbackOffsetX, fallbackOffsetY) {
+  const anchor = placement?.anchor ?? fallbackAnchor;
+  const offsetX = placement?.offsetX ?? fallbackOffsetX;
+  const offsetY = placement?.offsetY ?? fallbackOffsetY;
+  const { vertical, horizontal } = parseAnchor(anchor);
+  const result = {};
+  const transforms = [];
+  if (horizontal === "left") {
+    result.left = offsetX;
+  } else if (horizontal === "right") {
+    result.right = offsetX;
+  } else {
+    result.left = "50%";
+    transforms.push("translateX(-50%)");
+    if (offsetX) transforms.push(`translateX(${offsetX}px)`);
+  }
+  if (vertical === "top") {
+    result.top = offsetY;
+  } else if (vertical === "bottom") {
+    result.bottom = offsetY;
+  } else {
+    result.top = "50%";
+    transforms.push("translateY(-50%)");
+    if (offsetY) transforms.push(`translateY(${offsetY}px)`);
+  }
+  if (transforms.length > 0) result.transform = transforms.join(" ");
+  return { ...result, ...placement?.style ?? {} };
+}
+function Tsdraw(props) {
+  const [systemTheme, setSystemTheme] = useState(() => {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const toolItems = props.tools ?? DEFAULT_TOOL_IDS;
+  const customTools = useMemo(
+    () => toolItems.filter(isCustomTool),
+    [toolItems]
+  );
+  const toolDefinitions = useMemo(
+    () => customTools.map((tool) => tool.definition),
+    [customTools]
+  );
+  const toolbarItems = useMemo(
+    () => toolItems.map((tool) => {
+      if (typeof tool === "string") {
+        return {
+          id: tool,
+          label: DEFAULT_TOOL_LABELS[tool],
+          icon: (isActive) => getDefaultToolbarIcon(tool, isActive)
+        };
+      }
+      return {
+        id: tool.id,
+        label: tool.label,
+        icon: (isActive) => isActive && tool.iconSelected ? tool.iconSelected : tool.icon
+      };
+    }),
+    [toolItems]
+  );
+  const stylePanelToolIds = useMemo(
+    () => toolItems.filter((tool) => {
+      if (typeof tool === "string") return tool === "pen";
+      return tool.showStylePanel ?? false;
+    }).map(getToolId),
+    [toolItems]
+  );
+  const initialTool = props.initialToolId ?? toolbarItems[0]?.id ?? "pen";
+  const requestedTheme = props.theme ?? "light";
+  useEffect(() => {
+    if (requestedTheme !== "system" || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const syncSystemTheme = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    syncSystemTheme();
+    mediaQuery.addEventListener("change", syncSystemTheme);
+    return () => mediaQuery.removeEventListener("change", syncSystemTheme);
+  }, [requestedTheme]);
+  const resolvedTheme = requestedTheme === "system" ? systemTheme : requestedTheme;
+  const {
+    containerRef,
+    canvasRef,
+    currentTool,
+    drawColor,
+    drawDash,
+    drawSize,
+    selectedShapeIds,
+    selectionBrush,
+    selectionBounds,
+    selectionRotationDeg,
+    canvasCursor: defaultCanvasCursor,
+    cursorContext,
+    toolOverlay,
+    showStylePanel,
+    setTool,
+    applyDrawStyle,
+    handleResizePointerDown,
+    handleRotatePointerDown
+  } = useTsdrawCanvasController({
+    toolDefinitions,
+    initialTool,
+    theme: resolvedTheme,
+    stylePanelToolIds,
+    onMount: props.onMount
+  });
+  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 16);
+  const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
+  const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
+  const defaultToolOverlay = /* @__PURE__ */ jsx(
+    ToolOverlay,
+    {
+      visible: toolOverlay.visible,
+      pointerX: toolOverlay.pointerX,
+      pointerY: toolOverlay.pointerY,
+      isPenPreview: toolOverlay.isPenPreview,
+      penRadius: toolOverlay.penRadius,
+      penColor: toolOverlay.penColor,
+      eraserRadius: toolOverlay.eraserRadius
+    }
+  );
+  const overlayNode = props.uiOptions?.overlays?.renderToolOverlay?.({ defaultOverlay: defaultToolOverlay, overlayState: toolOverlay, currentTool }) ?? defaultToolOverlay;
+  const customElements = props.uiOptions?.customElements ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `tsdraw tsdraw-${resolvedTheme}mode ${props.className ?? ""}`,
+      style: {
+        width: props.width ?? "100%",
+        height: props.height ?? "100%",
+        position: "relative",
+        overflow: "hidden",
+        ...props.style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%",
+              touchAction: "none",
+              cursor: canvasCursor
+            },
+            "data-testid": "tsdraw-canvas"
+          }
+        ),
+        overlayNode,
+        /* @__PURE__ */ jsx(
+          SelectionOverlay,
+          {
+            selectionBrush,
+            selectionBounds,
+            selectionRotationDeg,
+            currentTool,
+            selectedCount: selectedShapeIds.length,
+            onRotatePointerDown: handleRotatePointerDown,
+            onResizePointerDown: handleResizePointerDown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StylePanel,
+          {
+            visible: showStylePanel,
+            style: stylePanelPlacementStyle,
+            theme: resolvedTheme,
+            drawColor,
+            drawDash,
+            drawSize,
+            onColorSelect: (color) => applyDrawStyle({ color }),
+            onDashSelect: (dash) => applyDrawStyle({ dash }),
+            onSizeSelect: (size) => applyDrawStyle({ size })
+          }
+        ),
+        customElements.map((customElement) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              zIndex: 130,
+              pointerEvents: "all",
+              ...resolvePlacementStyle(customElement.placement, "top-left", 8, 8)
+            },
+            children: customElement.render({ currentTool, setTool, applyDrawStyle })
+          },
+          customElement.id
+        )),
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            items: toolbarItems,
+            style: toolbarPlacementStyle,
+            currentTool,
+            onToolChange: setTool
+          }
+        )
+      ]
+    }
+  );
+}
+function TsdrawCanvas(props) {
+  return /* @__PURE__ */ jsx(Tsdraw, { ...props });
+}
+
+export { Tsdraw, TsdrawCanvas, getDefaultToolbarIcon };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map