@tsdraw/react 0.6.1 → 0.7.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;
@@ -365,11 +407,15 @@ function createSessionId() {
 }
 function getOrCreateSessionId() {
   if (typeof window === "undefined") return createSessionId();
-  const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-  if (existing) return existing;
-  const newId = createSessionId();
-  window.sessionStorage.setItem(SESSION_STORAGE_KEY, newId);
-  return newId;
+  try {
+    const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (existing) return existing;
+    const newId = createSessionId();
+    window.sessionStorage.setItem(SESSION_STORAGE_KEY, newId);
+    return newId;
+  } catch {
+    return createSessionId();
+  }
 }
 
 // src/canvas/useTsdrawCanvasController.ts
@@ -386,8 +432,7 @@ function resolveDrawColor(colorStyle, theme) {
   return core.resolveThemeColor(colorStyle, theme);
 }
 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);
@@ -421,6 +466,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);
@@ -438,8 +484,8 @@ function useTsdrawCanvasController(options = {}) {
     currentToolRef.current = currentTool;
   }, [currentTool]);
   react.useEffect(() => {
-    stylePanelToolIdsRef.current = stylePanelToolIds;
-  }, [stylePanelToolIds]);
+    onMountRef.current = options.onMount;
+  }, [options.onMount]);
   react.useEffect(() => {
     selectedShapeIdsRef.current = selectedShapeIds;
   }, [selectedShapeIds]);
@@ -448,7 +494,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;
@@ -584,6 +630,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;
@@ -665,6 +712,7 @@ function useTsdrawCanvasController(options = {}) {
       const nextDrawStyle = editor.getCurrentDrawStyle();
       setDrawColor(nextDrawStyle.color);
       setDrawDash(nextDrawStyle.dash);
+      setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
       setSelectionRotationDeg(0);
       render();
@@ -713,7 +761,7 @@ function useTsdrawCanvasController(options = {}) {
           additive: first.shiftKey,
           initialSelection: [...selectedShapeIdsRef.current]
         };
-        setSelectionBrush({ left: e.offsetX, top: e.offsetY, width: 0, height: 0 });
+        setSelectionBrush(toScreenRect(editor, { minX: x, minY: y, maxX: x, maxY: y }));
         if (!e.shiftKey) {
           setSelectedShapeIds([]);
           selectedShapeIdsRef.current = [];
@@ -870,6 +918,35 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.endHistoryEntry();
     };
+    const handlePointerCancel = () => {
+      if (!isPointerActiveRef.current) return;
+      isPointerActiveRef.current = false;
+      lastPointerClientRef.current = null;
+      editor.input.pointerUp();
+      if (currentToolRef.current === "select") {
+        const drag = selectDragRef.current;
+        if (drag.mode === "rotate") setIsRotatingSelection(false);
+        if (drag.mode === "resize") setIsResizingSelection(false);
+        if (drag.mode === "move") setIsMovingSelection(false);
+        if (drag.mode === "marquee") setSelectionBrush(null);
+        if (drag.mode !== "none") {
+          selectDragRef.current.mode = "none";
+          render();
+          refreshSelectionBounds(editor);
+        }
+        editor.endHistoryEntry();
+      } else {
+        editor.tools.pointerUp();
+        render();
+        refreshSelectionBounds(editor);
+        editor.endHistoryEntry();
+      }
+      if (pendingRemoteDocumentRef.current) {
+        const pending = pendingRemoteDocumentRef.current;
+        pendingRemoteDocumentRef.current = null;
+        applyRemoteDocumentSnapshot(pending);
+      }
+    };
     const handleKeyDown = (e) => {
       const isMetaPressed = e.metaKey || e.ctrlKey;
       const loweredKey = e.key.toLowerCase();
@@ -916,22 +993,42 @@ function useTsdrawCanvasController(options = {}) {
         }
         editor.loadHistorySnapshot(loaded.history);
         syncHistoryState();
+        if (disposed) return;
         persistenceActive = true;
-        persistenceChannel = new BroadcastChannel(`tsdraw:persistence:${persistenceKey}`);
-        persistenceChannel.onmessage = async (event) => {
-          const data = event.data;
-          if (data?.type !== "tsdraw:persisted" || data.senderSessionId === sessionId) return;
-          if (!persistenceDb || disposed) return;
-          const nextLoaded = await persistenceDb.load(sessionId);
-          if (nextLoaded.records.length > 0) {
-            const nextDocument = { records: nextLoaded.records };
-            if (isPointerActiveRef.current) {
-              pendingRemoteDocumentRef.current = nextDocument;
+        if (typeof BroadcastChannel !== "undefined") {
+          persistenceChannel = new BroadcastChannel(`tsdraw:persistence:${persistenceKey}`);
+          let isLoadingRemote = false;
+          let pendingRemoteLoad = false;
+          persistenceChannel.onmessage = () => {
+            if (disposed) return;
+            if (isLoadingRemote) {
+              pendingRemoteLoad = true;
               return;
             }
-            applyRemoteDocumentSnapshot(nextDocument);
-          }
-        };
+            isLoadingRemote = true;
+            const processLoad = async () => {
+              try {
+                do {
+                  pendingRemoteLoad = false;
+                  if (!persistenceDb || disposed) return;
+                  const nextLoaded = await persistenceDb.load(sessionId);
+                  if (disposed) return;
+                  if (nextLoaded.records.length > 0) {
+                    const nextDocument = { records: nextLoaded.records };
+                    if (isPointerActiveRef.current) {
+                      pendingRemoteDocumentRef.current = nextDocument;
+                      return;
+                    }
+                    applyRemoteDocumentSnapshot(nextDocument);
+                  }
+                } while (pendingRemoteLoad && !disposed);
+              } finally {
+                isLoadingRemote = false;
+              }
+            };
+            void processLoad();
+          };
+        }
       } finally {
         if (!disposed) {
           setIsPersistenceReady(true);
@@ -953,12 +1050,13 @@ function useTsdrawCanvasController(options = {}) {
     canvas.addEventListener("pointerdown", handlePointerDown);
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
     void initializePersistence().catch((error) => {
       console.error("failed to initialize tsdraw persistence", error);
     });
-    disposeMount = options.onMount?.({
+    disposeMount = onMountRef.current?.({
       editor,
       container,
       canvas,
@@ -993,6 +1091,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();
       }
@@ -1007,6 +1106,7 @@ function useTsdrawCanvasController(options = {}) {
       canvas.removeEventListener("pointerdown", handlePointerDown);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       isPointerActiveRef.current = false;
@@ -1018,7 +1118,6 @@ function useTsdrawCanvasController(options = {}) {
   }, [
     getPagePointFromClient,
     options.initialTool,
-    options.onMount,
     options.persistenceKey,
     options.toolDefinitions,
     refreshSelectionBounds,
@@ -1050,6 +1149,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();
     },
@@ -1117,6 +1217,7 @@ function useTsdrawCanvasController(options = {}) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1126,7 +1227,6 @@ function useTsdrawCanvasController(options = {}) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
     canUndo,
     canRedo,
     undo,
@@ -1137,10 +1237,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"
 };
@@ -1183,14 +1294,14 @@ function resolvePlacementStyle(placement, fallbackAnchor, fallbackOffsetX, fallb
     if (offsetY) transforms.push(`translateY(${offsetY}px)`);
   }
   if (transforms.length > 0) result.transform = transforms.join(" ");
-  return { ...result, ...placement?.style ?? {} };
+  return placement?.style ? { ...result, ...placement.style } : result;
 }
 function Tsdraw(props) {
   const [systemTheme, setSystemTheme] = react.useState(() => {
     if (typeof window === "undefined") return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
-  const customTools = props.customTools ?? [];
+  const customTools = props.customTools ?? EMPTY_CUSTOM_TOOLS;
   const toolbarPartIds = props.uiOptions?.toolbar?.parts ?? DEFAULT_TOOLBAR_PARTS;
   const customToolMap = react.useMemo(
     () => new Map(customTools.map((customTool) => [customTool.id, customTool])),
@@ -1212,21 +1323,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) {
@@ -1255,6 +1351,7 @@ function Tsdraw(props) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1264,7 +1361,6 @@ function Tsdraw(props) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel,
     canUndo,
     canRedo,
     undo,
@@ -1278,11 +1374,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,
@@ -1297,7 +1394,31 @@ function Tsdraw(props) {
     }
   );
   const overlayNode = props.uiOptions?.overlays?.renderToolOverlay?.({ defaultOverlay: defaultToolOverlay, overlayState: toolOverlay, currentTool }) ?? defaultToolOverlay;
-  const customElements = props.uiOptions?.customElements ?? [];
+  const customElements = props.uiOptions?.customElements ?? EMPTY_CUSTOM_ELEMENTS;
+  const onColorSelect = react.useCallback((color) => {
+    applyDrawStyle({ color });
+  }, [applyDrawStyle]);
+  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) => {
@@ -1386,15 +1507,19 @@ 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: (color) => applyDrawStyle({ color }),
-            onDashSelect: (dash) => applyDrawStyle({ dash }),
-            onSizeSelect: (size) => applyDrawStyle({ size })
+            onColorSelect,
+            onDashSelect,
+            onFillSelect,
+            onSizeSelect
           }
         ),
         customElements.map((customElement) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1410,7 +1535,7 @@ function Tsdraw(props) {
           },
           customElement.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !isToolbarHidden ? /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
             parts: toolbarParts,
@@ -1419,7 +1544,7 @@ function Tsdraw(props) {
             onToolChange: setTool,
             disabled: !isPersistenceReady
           }
-        )
+        ) : null
       ]
     }
   );