@tsdraw/react 0.6.2 → 0.8.0

package/dist/index.cjs

@@ -100,66 +100,106 @@ function SelectionOverlay({
 }
 var STYLE_COLORS = Object.entries(core.DEFAULT_COLORS).filter(([key]) => key !== "white").map(([value]) => ({ value }));
 var STYLE_DASHES = ["draw", "solid", "dashed", "dotted"];
+var STYLE_FILLS = ["none", "blank", "semi", "solid"];
 var STYLE_SIZES = ["s", "m", "l", "xl"];
 function StylePanel({
   visible,
+  parts,
+  customParts,
   style,
   theme,
   drawColor,
   drawDash,
+  drawFill,
   drawSize,
   onColorSelect,
   onDashSelect,
+  onFillSelect,
   onSizeSelect
 }) {
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "tsdraw-style-color-dot",
-            style: { background: core.resolveThemeColor(item.value, theme) }
-          }
-        )
-      },
-      item.value
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
-      },
-      dash
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
-      },
-      size
-    )) })
-  ] });
+  if (!visible || parts.length === 0) return null;
+  const context = {
+    drawColor,
+    drawDash,
+    drawFill,
+    drawSize,
+    onColorSelect,
+    onDashSelect,
+    onFillSelect,
+    onSizeSelect
+  };
+  const customPartMap = new Map((customParts ?? []).map((customPart) => [customPart.id, customPart]));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: parts.map((part) => {
+    if (part === "colors") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "tsdraw-style-color-dot",
+              style: { background: core.resolveThemeColor(item.value, theme) }
+            }
+          )
+        },
+        item.value
+      )) }, part);
+    }
+    if (part === "dashes") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
+        },
+        dash
+      )) }, part);
+    }
+    if (part === "fills") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_FILLS.map((fill) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tsdraw-style-row",
+          "data-active": drawFill === fill ? "true" : void 0,
+          "aria-label": `Fill ${fill}`,
+          title: fill,
+          onClick: () => onFillSelect(fill),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-fill tsdraw-style-fill--${fill}` }) })
+        },
+        fill
+      )) }, part);
+    }
+    if (part === "sizes") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
+        },
+        size
+      )) }, part);
+    }
+    const customPart = customPartMap.get(part);
+    if (!customPart) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section tsdraw-style-section--custom", children: customPart.render(context) }, part);
+  }) });
 }
 function ToolOverlay({
   visible,
@@ -199,6 +239,8 @@ function ToolOverlay({
 function getDefaultToolbarIcon(toolId, isActive) {
   if (toolId === "select") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "pen") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPencil, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "square") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSquare, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "circle") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCircle, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEraser, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "hand") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandStop, { size: 16, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
   return null;
@@ -255,6 +297,249 @@ function getCanvasCursor(currentTool, state) {
   return state.showToolOverlay ? "none" : "crosshair";
 }
 
+// src/canvas/touchInteractions.ts
+var TAP_MAX_DURATION_MS = 100;
+var DOUBLE_TAP_INTERVAL_MS = 100;
+var TAP_MOVE_TOLERANCE = 14;
+var PINCH_MODE_ZOOM_DISTANCE = 24;
+var PINCH_MODE_PAN_DISTANCE = 16;
+var PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE = 64;
+function createTouchInteractionController(editor, canvas, handlers) {
+  const activeTouchPoints = /* @__PURE__ */ new Map();
+  const touchTapState = {
+    active: false,
+    startTime: 0,
+    maxTouchCount: 0,
+    moved: false,
+    startPoints: /* @__PURE__ */ new Map(),
+    lastTapAtByCount: {}
+  };
+  const touchCameraState = {
+    active: false,
+    mode: "not-sure",
+    previousCenter: { x: 0, y: 0 },
+    initialCenter: { x: 0, y: 0 },
+    previousDistance: 1,
+    initialDistance: 1,
+    previousAngle: 0
+  };
+  const isTouchPointer = (event) => event.pointerType === "touch";
+  const endTouchCameraGesture = () => {
+    touchCameraState.active = false;
+    touchCameraState.mode = "not-sure";
+    touchCameraState.previousDistance = 1;
+    touchCameraState.initialDistance = 1;
+    touchCameraState.previousAngle = 0;
+  };
+  const maybeHandleTouchTapGesture = () => {
+    if (activeTouchPoints.size > 0) return;
+    if (!touchTapState.active) return;
+    const elapsed = performance.now() - touchTapState.startTime;
+    if (!touchTapState.moved && elapsed <= TAP_MAX_DURATION_MS && (touchTapState.maxTouchCount === 2 || touchTapState.maxTouchCount === 3)) {
+      const fingerCount = touchTapState.maxTouchCount;
+      const now = performance.now();
+      const previousTapTime = touchTapState.lastTapAtByCount[fingerCount] ?? 0;
+      const isDoubleTap = previousTapTime > 0 && now - previousTapTime <= DOUBLE_TAP_INTERVAL_MS;
+      if (isDoubleTap) {
+        touchTapState.lastTapAtByCount[fingerCount] = 0;
+        if (fingerCount === 2) {
+          if (handlers.runUndo()) handlers.refreshView();
+        } else if (handlers.runRedo()) handlers.refreshView();
+      } else touchTapState.lastTapAtByCount[fingerCount] = now;
+    }
+    touchTapState.active = false;
+    touchTapState.startPoints.clear();
+    touchTapState.maxTouchCount = 0;
+    touchTapState.moved = false;
+  };
+  const beginTouchCameraGesture = () => {
+    const points = [...activeTouchPoints.values()];
+    if (points.length !== 2) return;
+    handlers.cancelActivePointerInteraction();
+    const first = points[0];
+    const second = points[1];
+    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
+    const distance = Math.hypot(second.x - first.x, second.y - first.y);
+    const angle = Math.atan2(second.y - first.y, second.x - first.x);
+    touchCameraState.active = true;
+    touchCameraState.mode = "not-sure";
+    touchCameraState.previousCenter = center;
+    touchCameraState.initialCenter = center;
+    touchCameraState.previousDistance = Math.max(1, distance);
+    touchCameraState.initialDistance = Math.max(1, distance);
+    touchCameraState.previousAngle = angle;
+  };
+  const updateTouchCameraGesture = () => {
+    if (!touchCameraState.active) return false;
+    const points = [...activeTouchPoints.values()];
+    if (points.length !== 2) {
+      endTouchCameraGesture();
+      return false;
+    }
+    const first = points[0];
+    const second = points[1];
+    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
+    const distance = Math.max(1, Math.hypot(second.x - first.x, second.y - first.y));
+    const angle = Math.atan2(second.y - first.y, second.x - first.x);
+    const centerDx = center.x - touchCameraState.previousCenter.x;
+    const centerDy = center.y - touchCameraState.previousCenter.y;
+    const touchDistance = Math.abs(distance - touchCameraState.initialDistance);
+    const originDistance = Math.hypot(center.x - touchCameraState.initialCenter.x, center.y - touchCameraState.initialCenter.y);
+    if (touchCameraState.mode === "not-sure") {
+      if (touchDistance > PINCH_MODE_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+      else if (originDistance > PINCH_MODE_PAN_DISTANCE) touchCameraState.mode = "panning";
+    } else if (touchCameraState.mode === "panning" && touchDistance > PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+    const canvasRect = canvas.getBoundingClientRect();
+    const centerOnCanvasX = center.x - canvasRect.left;
+    const centerOnCanvasY = center.y - canvasRect.top;
+    editor.panBy(centerDx, centerDy);
+    if (touchCameraState.mode === "zooming") {
+      const zoomFactor = distance / touchCameraState.previousDistance;
+      editor.zoomAt(zoomFactor, centerOnCanvasX, centerOnCanvasY);
+      editor.rotateAt(angle - touchCameraState.previousAngle, centerOnCanvasX, centerOnCanvasY);
+    }
+    touchCameraState.previousCenter = center;
+    touchCameraState.previousDistance = distance;
+    touchCameraState.previousAngle = angle;
+    handlers.refreshView();
+    return true;
+  };
+  const handlePointerDown = (event) => {
+    if (!isTouchPointer(event)) return false;
+    activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (!touchTapState.active) {
+      touchTapState.active = true;
+      touchTapState.startTime = performance.now();
+      touchTapState.maxTouchCount = activeTouchPoints.size;
+      touchTapState.moved = false;
+      touchTapState.startPoints.clear();
+    } else {
+      touchTapState.maxTouchCount = Math.max(touchTapState.maxTouchCount, activeTouchPoints.size);
+    }
+    touchTapState.startPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (activeTouchPoints.size === 2) {
+      beginTouchCameraGesture();
+      return true;
+    }
+    return false;
+  };
+  const handlePointerMove = (event) => {
+    if (!isTouchPointer(event)) return false;
+    if (activeTouchPoints.has(event.pointerId)) activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const tapStart = touchTapState.startPoints.get(event.pointerId);
+    if (tapStart) {
+      const moved = Math.hypot(event.clientX - tapStart.x, event.clientY - tapStart.y);
+      if (moved > TAP_MOVE_TOLERANCE) touchTapState.moved = true;
+    }
+    return updateTouchCameraGesture();
+  };
+  const handlePointerUpOrCancel = (event) => {
+    if (!isTouchPointer(event)) return false;
+    const wasCameraGestureActive = touchCameraState.active;
+    activeTouchPoints.delete(event.pointerId);
+    touchTapState.startPoints.delete(event.pointerId);
+    if (activeTouchPoints.size < 2) endTouchCameraGesture();
+    maybeHandleTouchTapGesture();
+    return wasCameraGestureActive;
+  };
+  let gestureLastScale = 1;
+  let gestureActive = false;
+  const handleGestureEvent = (event, container) => {
+    if (!container.contains(event.target)) return;
+    event.preventDefault();
+    const gestureEvent = event;
+    if (gestureEvent.scale == null) return;
+    if (event.type === "gesturestart") {
+      gestureLastScale = gestureEvent.scale;
+      gestureActive = true;
+      return;
+    }
+    if (event.type === "gestureend") {
+      gestureActive = false;
+      gestureLastScale = 1;
+      return;
+    }
+    if (event.type === "gesturechange" && gestureActive) {
+      const zoomFactor = gestureEvent.scale / gestureLastScale;
+      gestureLastScale = gestureEvent.scale;
+      const canvasRect = canvas.getBoundingClientRect();
+      const cx = (gestureEvent.clientX ?? canvasRect.left + canvasRect.width / 2) - canvasRect.left;
+      const cy = (gestureEvent.clientY ?? canvasRect.top + canvasRect.height / 2) - canvasRect.top;
+      editor.zoomAt(zoomFactor, cx, cy);
+      handlers.refreshView();
+    }
+  };
+  const reset = () => {
+    activeTouchPoints.clear();
+    touchTapState.active = false;
+    touchTapState.startPoints.clear();
+    endTouchCameraGesture();
+  };
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUpOrCancel,
+    handleGestureEvent,
+    reset,
+    isCameraGestureActive: () => touchCameraState.active,
+    isTrackpadZoomActive: () => gestureActive
+  };
+}
+
+// src/canvas/keyboardShortcuts.ts
+var TOOL_SHORTCUTS = {
+  v: "select",
+  h: "hand",
+  e: "eraser",
+  p: "pen",
+  b: "pen",
+  d: "pen",
+  x: "pen",
+  r: "square",
+  o: "circle",
+  c: "circle"
+};
+function isEditableTarget(eventTarget) {
+  const element = eventTarget;
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  const tagName = element.tagName;
+  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+}
+function handleKeyboardShortcutKeyDown(event, handlers) {
+  if (isEditableTarget(event.target)) return;
+  const loweredKey = event.key.toLowerCase();
+  const isMetaPressed = event.metaKey || event.ctrlKey;
+  if (isMetaPressed && (loweredKey === "z" || loweredKey === "y")) {
+    const shouldRedo = loweredKey === "y" || loweredKey === "z" && event.shiftKey;
+    if (handlers.runHistoryShortcut(shouldRedo)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  }
+  if (!isMetaPressed && !event.altKey) {
+    const nextToolId = TOOL_SHORTCUTS[loweredKey];
+    if (nextToolId && handlers.isToolAvailable(nextToolId)) {
+      handlers.setToolFromShortcut(nextToolId);
+      event.preventDefault();
+      return;
+    }
+  }
+  if (event.key === "Delete" || event.key === "Backspace") {
+    if (handlers.deleteSelection()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  }
+  handlers.dispatchKeyDown(event);
+}
+function handleKeyboardShortcutKeyUp(event, handlers) {
+  if (isEditableTarget(event.target)) return;
+  handlers.dispatchKeyUp(event);
+}
+
 // src/persistence/localIndexedDb.ts
 var DATABASE_PREFIX = "tsdraw_v1_";
 var DATABASE_VERSION = 2;
@@ -378,25 +663,35 @@ function getOrCreateSessionId() {
 
 // src/canvas/useTsdrawCanvasController.ts
 function toScreenRect(editor, bounds) {
-  const { x, y, zoom } = editor.viewport;
+  const topLeft = core.pageToScreen(editor.viewport, bounds.minX, bounds.minY);
+  const topRight = core.pageToScreen(editor.viewport, bounds.maxX, bounds.minY);
+  const bottomLeft = core.pageToScreen(editor.viewport, bounds.minX, bounds.maxY);
+  const bottomRight = core.pageToScreen(editor.viewport, bounds.maxX, bounds.maxY);
+  const minX = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+  const minY = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
+  const maxX = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+  const maxY = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
   return {
-    left: bounds.minX * zoom + x,
-    top: bounds.minY * zoom + y,
-    width: (bounds.maxX - bounds.minX) * zoom,
-    height: (bounds.maxY - bounds.minY) * zoom
+    left: minX,
+    top: minY,
+    width: Math.max(0, maxX - minX),
+    height: Math.max(0, maxY - minY)
   };
 }
 function resolveDrawColor(colorStyle, theme) {
   return core.resolveThemeColor(colorStyle, theme);
 }
+var ZOOM_WHEEL_CAP = 10;
 function useTsdrawCanvasController(options = {}) {
-  const stylePanelToolIds = options.stylePanelToolIds ?? ["pen"];
-  const stylePanelToolIdsRef = react.useRef(stylePanelToolIds);
   const onMountRef = react.useRef(options.onMount);
   const containerRef = react.useRef(null);
   const canvasRef = react.useRef(null);
   const editorRef = react.useRef(null);
   const dprRef = react.useRef(1);
+  const penDetectedRef = react.useRef(false);
+  const penModeRef = react.useRef(false);
+  const lastPointerDownWithRef = react.useRef("mouse");
+  const activePointerIdsRef = react.useRef(/* @__PURE__ */ new Set());
   const lastPointerClientRef = react.useRef(null);
   const currentToolRef = react.useRef(options.initialTool ?? "pen");
   const selectedShapeIdsRef = react.useRef([]);
@@ -426,6 +721,7 @@ function useTsdrawCanvasController(options = {}) {
   const [currentTool, setCurrentToolState] = react.useState(options.initialTool ?? "pen");
   const [drawColor, setDrawColor] = react.useState("black");
   const [drawDash, setDrawDash] = react.useState("draw");
+  const [drawFill, setDrawFill] = react.useState("none");
   const [drawSize, setDrawSize] = react.useState("m");
   const [selectedShapeIds, setSelectedShapeIds] = react.useState([]);
   const [selectionBrush, setSelectionBrush] = react.useState(null);
@@ -442,9 +738,6 @@ function useTsdrawCanvasController(options = {}) {
   react.useEffect(() => {
     currentToolRef.current = currentTool;
   }, [currentTool]);
-  react.useEffect(() => {
-    stylePanelToolIdsRef.current = stylePanelToolIds;
-  }, [stylePanelToolIds]);
   react.useEffect(() => {
     onMountRef.current = options.onMount;
   }, [options.onMount]);
@@ -456,7 +749,7 @@ function useTsdrawCanvasController(options = {}) {
   }, [selectionRotationDeg]);
   react.useEffect(() => {
     schedulePersistRef.current?.();
-  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawSize]);
+  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawFill, drawSize]);
   const render = react.useCallback(() => {
     const canvas = canvasRef.current;
     const editor = editorRef.current;
@@ -592,6 +885,7 @@ function useTsdrawCanvasController(options = {}) {
     const initialStyle = editor.getCurrentDrawStyle();
     setDrawColor(initialStyle.color);
     setDrawDash(initialStyle.dash);
+    setDrawFill(initialStyle.fill);
     setDrawSize(initialStyle.size);
     const resize = () => {
       const dpr = window.devicePixelRatio ?? 1;
@@ -654,9 +948,9 @@ function useTsdrawCanvasController(options = {}) {
       }
       refreshSelectionBounds(editor, nextSelectedShapeIds);
     };
-    const applyRemoteDocumentSnapshot = (document) => {
+    const applyRemoteDocumentSnapshot = (document2) => {
       ignorePersistenceChanges = true;
-      editor.loadDocumentSnapshot(document);
+      editor.loadDocumentSnapshot(document2);
       editor.clearRedoHistory();
       reconcileSelectionAfterDocumentLoad();
       render();
@@ -673,6 +967,7 @@ function useTsdrawCanvasController(options = {}) {
       const nextDrawStyle = editor.getCurrentDrawStyle();
       setDrawColor(nextDrawStyle.color);
       setDrawDash(nextDrawStyle.dash);
+      setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
       setSelectionRotationDeg(0);
       render();
@@ -687,8 +982,95 @@ function useTsdrawCanvasController(options = {}) {
       const coalesced = e.getCoalescedEvents?.();
       return coalesced && coalesced.length > 0 ? coalesced : [e];
     };
+    const applyDocumentChangeResult = (changed) => {
+      if (!changed) return false;
+      reconcileSelectionAfterDocumentLoad();
+      setSelectionRotationDeg(0);
+      render();
+      syncHistoryState();
+      return true;
+    };
+    const normalizeWheelDelta = (event) => {
+      let deltaX = event.deltaX;
+      let deltaY = event.deltaY;
+      let deltaZoom = 0;
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        const clamped = Math.abs(deltaY) > ZOOM_WHEEL_CAP ? ZOOM_WHEEL_CAP * Math.sign(deltaY) : deltaY;
+        deltaZoom = -clamped / 100;
+      } else if (event.shiftKey && !navigator.userAgent.includes("Mac") && !navigator.userAgent.includes("iPhone") && !navigator.userAgent.includes("iPad")) {
+        deltaX = deltaY;
+        deltaY = 0;
+      }
+      return { x: -deltaX, y: -deltaY, z: deltaZoom };
+    };
+    const deleteCurrentSelection = () => {
+      const selectedIds = selectedShapeIdsRef.current;
+      if (selectedIds.length === 0) return false;
+      editor.beginHistoryEntry();
+      editor.deleteShapes(selectedIds);
+      editor.endHistoryEntry();
+      setSelectedShapeIds([]);
+      selectedShapeIdsRef.current = [];
+      setSelectionBounds(null);
+      setSelectionBrush(null);
+      setSelectionRotationDeg(0);
+      render();
+      syncHistoryState();
+      return true;
+    };
+    const cancelActivePointerInteraction = () => {
+      if (!isPointerActiveRef.current) return;
+      isPointerActiveRef.current = false;
+      lastPointerClientRef.current = null;
+      editor.input.pointerUp();
+      if (currentToolRef.current === "select") {
+        const dragMode = selectDragRef.current.mode;
+        if (dragMode === "rotate") setIsRotatingSelection(false);
+        if (dragMode === "resize") setIsResizingSelection(false);
+        if (dragMode === "move") setIsMovingSelection(false);
+        if (dragMode === "marquee") setSelectionBrush(null);
+        selectDragRef.current.mode = "none";
+      } else {
+        editor.tools.pointerUp();
+      }
+      editor.endHistoryEntry();
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const touchInteractions = createTouchInteractionController(editor, canvas, {
+      cancelActivePointerInteraction,
+      refreshView: () => {
+        render();
+        refreshSelectionBounds(editor);
+      },
+      runUndo: () => applyDocumentChangeResult(editor.undo()),
+      runRedo: () => applyDocumentChangeResult(editor.redo())
+    });
+    const isDrawingTool = (tool) => tool !== "select" && tool !== "hand";
+    const hasRealPressure = (pressure) => pressure != null && pressure > 0 && pressure !== 0.5;
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
+      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+        penDetectedRef.current = true;
+        penModeRef.current = true;
+      }
+      lastPointerDownWithRef.current = e.pointerType;
+      activePointerIdsRef.current.add(e.pointerId);
+      const startedCameraGesture = touchInteractions.handlePointerDown(e);
+      if (startedCameraGesture || touchInteractions.isCameraGestureActive()) {
+        e.preventDefault();
+        if (!canvas.hasPointerCapture(e.pointerId)) {
+          canvas.setPointerCapture(e.pointerId);
+        }
+        return;
+      }
+      const allowPointerDown = !penModeRef.current || e.pointerType !== "touch" || !isDrawingTool(currentToolRef.current);
+      if (!allowPointerDown) {
+        return;
+      }
+      if (activePointerIdsRef.current.size > 1) {
+        return;
+      }
       isPointerActiveRef.current = true;
       editor.beginHistoryEntry();
       canvas.setPointerCapture(e.pointerId);
@@ -697,7 +1079,7 @@ function useTsdrawCanvasController(options = {}) {
       const first = sampleEvents(e)[0];
       const { x, y } = getPagePoint(first);
       const pressure = first.pressure ?? 0.5;
-      const isPen = first.pointerType === "pen" || first.pointerType === "touch";
+      const isPen = first.pointerType === "pen" || hasRealPressure(first.pressure);
       if (currentToolRef.current === "select") {
         const hit = core.getTopShapeAtPoint(editor, { x, y });
         const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
@@ -737,6 +1119,16 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerMove = (e) => {
+      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+        penDetectedRef.current = true;
+        penModeRef.current = true;
+      }
+      if (touchInteractions.handlePointerMove(e)) {
+        e.preventDefault();
+        return;
+      }
+      if (penModeRef.current && e.pointerType === "touch" && isDrawingTool(currentToolRef.current) && !isPointerActiveRef.current) return;
+      if (activePointerIdsRef.current.size > 1) return;
       updatePointerPreview(e.clientX, e.clientY);
       const prevClient = lastPointerClientRef.current;
       const dx = prevClient ? e.clientX - prevClient.x : 0;
@@ -745,7 +1137,7 @@ function useTsdrawCanvasController(options = {}) {
       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";
+        const isPen = sample.pointerType === "pen" || hasRealPressure(sample.pressure);
         editor.input.pointerMove(x, y, pressure, isPen);
       }
       if (currentToolRef.current === "select") {
@@ -795,6 +1187,13 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerUp = (e) => {
+      activePointerIdsRef.current.delete(e.pointerId);
+      const hadTouchCameraGesture = touchInteractions.handlePointerUpOrCancel(e);
+      if (hadTouchCameraGesture || touchInteractions.isCameraGestureActive()) {
+        e.preventDefault();
+        return;
+      }
+      if (!isPointerActiveRef.current) return;
       isPointerActiveRef.current = false;
       lastPointerClientRef.current = null;
       updatePointerPreview(e.clientX, e.clientY);
@@ -878,7 +1277,10 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.endHistoryEntry();
     };
-    const handlePointerCancel = () => {
+    const handlePointerCancel = (e) => {
+      activePointerIdsRef.current.delete(e.pointerId);
+      const hadTouchCameraGesture = touchInteractions.handlePointerUpOrCancel(e);
+      if (hadTouchCameraGesture || touchInteractions.isCameraGestureActive()) return;
       if (!isPointerActiveRef.current) return;
       isPointerActiveRef.current = false;
       lastPointerClientRef.current = null;
@@ -907,31 +1309,58 @@ function useTsdrawCanvasController(options = {}) {
         applyRemoteDocumentSnapshot(pending);
       }
     };
-    const handleKeyDown = (e) => {
-      const isMetaPressed = e.metaKey || e.ctrlKey;
-      const loweredKey = e.key.toLowerCase();
-      const isUndoOrRedoKey = loweredKey === "z" || loweredKey === "y";
-      if (isMetaPressed && isUndoOrRedoKey) {
-        const shouldRedo = loweredKey === "y" || loweredKey === "z" && e.shiftKey;
-        const changed = shouldRedo ? editor.redo() : editor.undo();
-        if (changed) {
-          e.preventDefault();
-          e.stopPropagation();
-          reconcileSelectionAfterDocumentLoad();
-          setSelectionRotationDeg(0);
-          render();
-          syncHistoryState();
-          return;
-        }
+    const handleWheel = (e) => {
+      if (!container.contains(e.target)) return;
+      e.preventDefault();
+      if (touchInteractions.isTrackpadZoomActive()) return;
+      const delta = normalizeWheelDelta(e);
+      if (delta.z !== 0) {
+        const rect = canvas.getBoundingClientRect();
+        const pointX = e.clientX - rect.left;
+        const pointY = e.clientY - rect.top;
+        editor.zoomAt(Math.exp(delta.z), pointX, pointY);
+      } else {
+        editor.panBy(delta.x, delta.y);
       }
-      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.keyDown({ key: e.key });
       render();
+      refreshSelectionBounds(editor);
+    };
+    const handleGestureEvent = (e) => {
+      touchInteractions.handleGestureEvent(e, container);
+    };
+    const handleKeyDown = (e) => {
+      handleKeyboardShortcutKeyDown(e, {
+        isToolAvailable: (tool) => editor.tools.hasTool(tool),
+        setToolFromShortcut: (tool) => {
+          editor.setCurrentTool(tool);
+          setCurrentToolState(tool);
+          currentToolRef.current = tool;
+          if (tool !== "select") resetSelectUi();
+          render();
+        },
+        runHistoryShortcut: (shouldRedo) => applyDocumentChangeResult(shouldRedo ? editor.redo() : editor.undo()),
+        deleteSelection: () => currentToolRef.current === "select" ? deleteCurrentSelection() : false,
+        dispatchKeyDown: (event) => {
+          editor.input.setModifiers(event.shiftKey, event.ctrlKey, event.metaKey);
+          editor.tools.keyDown({ key: event.key });
+          render();
+        },
+        dispatchKeyUp: () => void 0
+      });
     };
     const handleKeyUp = (e) => {
-      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.keyUp({ key: e.key });
-      render();
+      handleKeyboardShortcutKeyUp(e, {
+        isToolAvailable: () => false,
+        setToolFromShortcut: () => void 0,
+        runHistoryShortcut: () => false,
+        deleteSelection: () => false,
+        dispatchKeyDown: () => void 0,
+        dispatchKeyUp: (event) => {
+          editor.input.setModifiers(event.shiftKey, event.ctrlKey, event.metaKey);
+          editor.tools.keyUp({ key: event.key });
+          render();
+        }
+      });
     };
     const initializePersistence = async () => {
       if (!persistenceKey) {
@@ -1008,6 +1437,10 @@ function useTsdrawCanvasController(options = {}) {
     const ro = new ResizeObserver(resize);
     ro.observe(container);
     canvas.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    document.addEventListener("gesturestart", handleGestureEvent);
+    document.addEventListener("gesturechange", handleGestureEvent);
+    document.addEventListener("gestureend", handleGestureEvent);
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("pointercancel", handlePointerCancel);
@@ -1051,6 +1484,7 @@ function useTsdrawCanvasController(options = {}) {
         editor.setCurrentDrawStyle(partial);
         if (partial.color) setDrawColor(partial.color);
         if (partial.dash) setDrawDash(partial.dash);
+        if (partial.fill) setDrawFill(partial.fill);
         if (partial.size) setDrawSize(partial.size);
         render();
       }
@@ -1063,13 +1497,19 @@ function useTsdrawCanvasController(options = {}) {
       disposeMount?.();
       ro.disconnect();
       canvas.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("wheel", handleWheel);
+      document.removeEventListener("gesturestart", handleGestureEvent);
+      document.removeEventListener("gesturechange", handleGestureEvent);
+      document.removeEventListener("gestureend", handleGestureEvent);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("pointercancel", handlePointerCancel);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       isPointerActiveRef.current = false;
+      activePointerIdsRef.current.clear();
       pendingRemoteDocumentRef.current = null;
+      touchInteractions.reset();
       persistenceChannel?.close();
       void persistenceDb?.close();
       editorRef.current = null;
@@ -1080,6 +1520,7 @@ function useTsdrawCanvasController(options = {}) {
     options.persistenceKey,
     options.toolDefinitions,
     refreshSelectionBounds,
+    resetSelectUi,
     render,
     updatePointerPreview
   ]);
@@ -1108,6 +1549,7 @@ function useTsdrawCanvasController(options = {}) {
       editor.setCurrentDrawStyle(partial);
       if (partial.color) setDrawColor(partial.color);
       if (partial.dash) setDrawDash(partial.dash);
+      if (partial.fill) setDrawFill(partial.fill);
       if (partial.size) setDrawSize(partial.size);
       render();
     },
@@ -1175,6 +1617,7 @@ function useTsdrawCanvasController(options = {}) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1184,7 +1627,6 @@ function useTsdrawCanvasController(options = {}) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
     canUndo,
     canRedo,
     undo,
@@ -1195,12 +1637,21 @@ function useTsdrawCanvasController(options = {}) {
     handleRotatePointerDown
   };
 }
-var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser"]];
+var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser", "square", "circle"]];
 var EMPTY_CUSTOM_TOOLS = [];
 var EMPTY_CUSTOM_ELEMENTS = [];
+var EMPTY_STYLE_PANEL_PARTS = [];
+var EMPTY_STYLE_PANEL_CUSTOM_PARTS = [];
+var DEFAULT_STYLE_PANEL_PARTS_BY_TOOL = {
+  pen: ["colors", "dashes", "sizes"],
+  square: ["colors", "dashes", "fills", "sizes"],
+  circle: ["colors", "dashes", "fills", "sizes"]
+};
 var DEFAULT_TOOL_LABELS = {
   select: "Select",
   pen: "Pen",
+  square: "Rectangle",
+  circle: "Ellipse",
   eraser: "Eraser",
   hand: "Hand"
 };
@@ -1272,21 +1723,6 @@ function Tsdraw(props) {
     () => customTools.filter((customTool) => toolbarToolIds.has(customTool.id)).map((customTool) => customTool.definition),
     [customTools, toolbarToolIds]
   );
-  const stylePanelToolIds = react.useMemo(
-    () => {
-      const nextToolIds = /* @__PURE__ */ new Set();
-      if (toolbarToolIds.has("pen")) {
-        nextToolIds.add("pen");
-      }
-      for (const customTool of customTools) {
-        if ((customTool.showStylePanel ?? false) && toolbarToolIds.has(customTool.id)) {
-          nextToolIds.add(customTool.id);
-        }
-      }
-      return [...nextToolIds];
-    },
-    [customTools, toolbarToolIds]
-  );
   const firstToolbarTool = react.useMemo(() => {
     for (const toolbarPart of toolbarPartIds) {
       for (const item of toolbarPart) {
@@ -1315,6 +1751,7 @@ function Tsdraw(props) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1324,7 +1761,6 @@ function Tsdraw(props) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel,
     canUndo,
     canRedo,
     undo,
@@ -1338,11 +1774,12 @@ function Tsdraw(props) {
     initialTool,
     theme: resolvedTheme,
     persistenceKey: props.persistenceKey,
-    stylePanelToolIds,
     onMount: props.onMount
   });
   const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
   const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
+  const isToolbarHidden = props.uiOptions?.toolbar?.hide === true;
+  const isStylePanelHidden = props.uiOptions?.stylePanel?.hide === true;
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsxRuntime.jsx(
     ToolOverlay,
@@ -1364,9 +1801,24 @@ function Tsdraw(props) {
   const onDashSelect = react.useCallback((dash) => {
     applyDrawStyle({ dash });
   }, [applyDrawStyle]);
+  const onFillSelect = react.useCallback((fill) => {
+    applyDrawStyle({ fill });
+  }, [applyDrawStyle]);
   const onSizeSelect = react.useCallback((size) => {
     applyDrawStyle({ size });
   }, [applyDrawStyle]);
+  const activeCustomTool = customToolMap.get(currentTool);
+  const stylePanelParts = react.useMemo(
+    () => {
+      const fromCustomTool = activeCustomTool?.stylePanel?.parts;
+      if (fromCustomTool && fromCustomTool.length > 0) return fromCustomTool;
+      if (activeCustomTool?.stylePanel?.customParts && activeCustomTool.stylePanel.customParts.length > 0) return activeCustomTool.stylePanel.customParts.map((customPart) => customPart.id);
+      if (currentTool in DEFAULT_STYLE_PANEL_PARTS_BY_TOOL) return DEFAULT_STYLE_PANEL_PARTS_BY_TOOL[currentTool] ?? EMPTY_STYLE_PANEL_PARTS;
+      return EMPTY_STYLE_PANEL_PARTS;
+    },
+    [activeCustomTool, currentTool]
+  );
+  const stylePanelCustomParts = activeCustomTool?.stylePanel?.customParts ?? EMPTY_STYLE_PANEL_CUSTOM_PARTS;
   const toolbarParts = react.useMemo(
     () => toolbarPartIds.map((toolbarPart, partIndex) => {
       const items = toolbarPart.map((item) => {
@@ -1455,14 +1907,18 @@ function Tsdraw(props) {
         /* @__PURE__ */ jsxRuntime.jsx(
           StylePanel,
           {
-            visible: isPersistenceReady && showStylePanel,
+            visible: !isStylePanelHidden && isPersistenceReady && stylePanelParts.length > 0,
+            parts: stylePanelParts,
+            customParts: stylePanelCustomParts,
             style: stylePanelPlacementStyle,
             theme: resolvedTheme,
             drawColor,
             drawDash,
+            drawFill,
             drawSize,
             onColorSelect,
             onDashSelect,
+            onFillSelect,
             onSizeSelect
           }
         ),
@@ -1479,7 +1935,7 @@ function Tsdraw(props) {
           },
           customElement.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !isToolbarHidden ? /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
             parts: toolbarParts,
@@ -1488,7 +1944,7 @@ function Tsdraw(props) {
             onToolChange: setTool,
             disabled: !isPersistenceReady
           }
-        )
+        ) : null
       ]
     }
   );