@tsdraw/react 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -197,29 +197,52 @@ function ToolOverlay({
   ) });
 }
 function getDefaultToolbarIcon(toolId, isActive) {
-  if (toolId === "select") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "pen") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPencil, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEraser, { size: 18, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
-  if (toolId === "hand") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandStop, { size: 18, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
+  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 === "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;
 }
-function Toolbar({ items, currentTool, onToolChange, style }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-toolbar", style, children: items.map((item) => {
-    const isActive = currentTool === item.id;
-    return /* @__PURE__ */ jsxRuntime.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 getActionIcon(actionId) {
+  if (actionId === "undo") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowBackUp, { size: 16, stroke: 1.8 });
+  return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowForwardUp, { size: 16, stroke: 1.8 });
+}
+function Toolbar({ parts, currentTool, onToolChange, disabled, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-toolbar", style, children: parts.map((part, partIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tsdraw-toolbar-part", children: [
+    part.items.map((item) => {
+      if (item.type === "action") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "tsdraw-toolbar-btn",
+            onClick: item.onSelect,
+            title: item.label,
+            "aria-label": item.label,
+            disabled: disabled || item.disabled,
+            children: getActionIcon(item.id)
+          },
+          item.id
+        );
+      }
+      const isActive = currentTool === item.id;
+      return /* @__PURE__ */ jsxRuntime.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,
+          disabled,
+          children: typeof item.icon === "function" ? item.icon(isActive) : item.icon
+        },
+        item.id
+      );
+    }),
+    partIndex < parts.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-toolbar-separator" }) : null
+  ] }, part.id)) });
 }
 function getCanvasCursor(currentTool, state) {
   if (currentTool === "hand") return "grab";
@@ -234,10 +257,11 @@ function getCanvasCursor(currentTool, state) {
 
 // src/persistence/localIndexedDb.ts
 var DATABASE_PREFIX = "tsdraw_v1_";
-var DATABASE_VERSION = 1;
+var DATABASE_VERSION = 2;
 var STORE = {
   records: "records",
-  state: "state"
+  state: "state",
+  history: "history"
 };
 function requestToPromise(request) {
   return new Promise((resolve, reject) => {
@@ -263,6 +287,9 @@ function openLocalDatabase(persistenceKey) {
       if (!database.objectStoreNames.contains(STORE.state)) {
         database.createObjectStore(STORE.state);
       }
+      if (!database.objectStoreNames.contains(STORE.history)) {
+        database.createObjectStore(STORE.history);
+      }
     };
     request.onsuccess = () => resolve(request.result);
     request.onerror = () => reject(request.error ?? new Error("Failed to open IndexedDB"));
@@ -279,11 +306,13 @@ var TsdrawLocalIndexedDb = class {
   }
   async load(sessionId) {
     const database = await this.databasePromise;
-    const transaction = database.transaction([STORE.records, STORE.state], "readonly");
+    const transaction = database.transaction([STORE.records, STORE.state, STORE.history], "readonly");
     const recordStore = transaction.objectStore(STORE.records);
     const stateStore = transaction.objectStore(STORE.state);
+    const historyStore = transaction.objectStore(STORE.history);
     const records = await requestToPromise(recordStore.getAll());
     let state = (await requestToPromise(stateStore.get(sessionId)))?.snapshot ?? null;
+    let history = (await requestToPromise(historyStore.get(sessionId)))?.snapshot ?? null;
     if (!state) {
       const allStates = await requestToPromise(stateStore.getAll());
       if (allStates.length > 0) {
@@ -291,14 +320,22 @@ var TsdrawLocalIndexedDb = class {
         state = allStates[allStates.length - 1]?.snapshot ?? null;
       }
     }
+    if (!history) {
+      const allHistoryRows = await requestToPromise(historyStore.getAll());
+      if (allHistoryRows.length > 0) {
+        allHistoryRows.sort((left, right) => left.updatedAt - right.updatedAt);
+        history = allHistoryRows[allHistoryRows.length - 1]?.snapshot ?? null;
+      }
+    }
     await transactionDone(transaction);
-    return { records, state };
+    return { records, state, history };
   }
   async storeSnapshot(args) {
     const database = await this.databasePromise;
-    const transaction = database.transaction([STORE.records, STORE.state], "readwrite");
+    const transaction = database.transaction([STORE.records, STORE.state, STORE.history], "readwrite");
     const recordStore = transaction.objectStore(STORE.records);
     const stateStore = transaction.objectStore(STORE.state);
+    const historyStore = transaction.objectStore(STORE.history);
     recordStore.clear();
     for (const record of args.records) {
       recordStore.put(record, record.id);
@@ -309,6 +346,12 @@ var TsdrawLocalIndexedDb = class {
       updatedAt: Date.now()
     };
     stateStore.put(stateRow, args.sessionId);
+    const historyRow = {
+      id: args.sessionId,
+      snapshot: args.history,
+      updatedAt: Date.now()
+    };
+    historyStore.put(historyRow, args.sessionId);
     await transactionDone(transaction);
   }
 };
@@ -386,6 +429,9 @@ function useTsdrawCanvasController(options = {}) {
   const [isMovingSelection, setIsMovingSelection] = react.useState(false);
   const [isResizingSelection, setIsResizingSelection] = react.useState(false);
   const [isRotatingSelection, setIsRotatingSelection] = react.useState(false);
+  const [canUndo, setCanUndo] = react.useState(false);
+  const [canRedo, setCanRedo] = react.useState(false);
+  const [isPersistenceReady, setIsPersistenceReady] = react.useState(!options.persistenceKey);
   const [pointerScreenPoint, setPointerScreenPoint] = react.useState({ x: 0, y: 0 });
   const [isPointerInsideCanvas, setIsPointerInsideCanvas] = react.useState(false);
   react.useEffect(() => {
@@ -463,6 +509,7 @@ function useTsdrawCanvasController(options = {}) {
         startBounds: bounds,
         startShapes: core.buildTransformSnapshots(editor, selectedShapeIdsRef.current)
       };
+      editor.beginHistoryEntry();
       selectDragRef.current.mode = "resize";
       const p = getPagePointFromClient(editor, e.clientX, e.clientY);
       editor.input.pointerDown(p.x, p.y, 0.5, false);
@@ -492,6 +539,7 @@ function useTsdrawCanvasController(options = {}) {
         startSelectionRotationDeg: selectionRotationRef.current,
         startShapes: core.buildTransformSnapshots(editor, selectedShapeIdsRef.current)
       };
+      editor.beginHistoryEntry();
       selectDragRef.current.mode = "rotate";
       editor.input.pointerDown(p.x, p.y, 0.5, false);
       selectDragRef.current.startPage = p;
@@ -524,10 +572,15 @@ function useTsdrawCanvasController(options = {}) {
     let persistenceActive = false;
     const persistenceKey = options.persistenceKey;
     const sessionId = getOrCreateSessionId();
+    const syncHistoryState = () => {
+      setCanUndo(editor.canUndo());
+      setCanRedo(editor.canRedo());
+    };
     const activeTool = editor.getCurrentToolId();
     editorRef.current = editor;
     setCurrentToolState(activeTool);
     currentToolRef.current = activeTool;
+    syncHistoryState();
     const initialStyle = editor.getCurrentDrawStyle();
     setDrawColor(initialStyle.color);
     setDrawDash(initialStyle.dash);
@@ -554,6 +607,7 @@ function useTsdrawCanvasController(options = {}) {
       await persistenceDb.storeSnapshot({
         records: snapshot.document.records,
         state: snapshot.state,
+        history: editor.getHistorySnapshot(),
         sessionId
       });
       persistenceChannel?.postMessage({
@@ -594,6 +648,7 @@ function useTsdrawCanvasController(options = {}) {
     const applyRemoteDocumentSnapshot = (document) => {
       ignorePersistenceChanges = true;
       editor.loadDocumentSnapshot(document);
+      editor.clearRedoHistory();
       reconcileSelectionAfterDocumentLoad();
       render();
       ignorePersistenceChanges = false;
@@ -626,6 +681,7 @@ function useTsdrawCanvasController(options = {}) {
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
       isPointerActiveRef.current = true;
+      editor.beginHistoryEntry();
       canvas.setPointerCapture(e.pointerId);
       lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
       updatePointerPreview(e.clientX, e.clientY);
@@ -750,6 +806,7 @@ function useTsdrawCanvasController(options = {}) {
           };
           render();
           refreshSelectionBounds(editor);
+          editor.endHistoryEntry();
           return;
         }
         if (drag.mode === "resize") {
@@ -758,6 +815,7 @@ function useTsdrawCanvasController(options = {}) {
           resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map() };
           render();
           refreshSelectionBounds(editor);
+          editor.endHistoryEntry();
           return;
         }
         if (drag.mode === "move") {
@@ -765,6 +823,7 @@ function useTsdrawCanvasController(options = {}) {
           selectDragRef.current.mode = "none";
           render();
           refreshSelectionBounds(editor);
+          editor.endHistoryEntry();
           return;
         }
         if (drag.mode === "marquee") {
@@ -796,6 +855,7 @@ function useTsdrawCanvasController(options = {}) {
             pendingRemoteDocumentRef.current = null;
             applyRemoteDocumentSnapshot(pendingRemoteDocument);
           }
+          editor.endHistoryEntry();
           return;
         }
       }
@@ -807,8 +867,25 @@ function useTsdrawCanvasController(options = {}) {
         pendingRemoteDocumentRef.current = null;
         applyRemoteDocumentSnapshot(pendingRemoteDocument);
       }
+      editor.endHistoryEntry();
     };
     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;
+        }
+      }
       editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
       editor.tools.keyDown({ key: e.key });
       render();
@@ -819,40 +896,56 @@ function useTsdrawCanvasController(options = {}) {
       render();
     };
     const initializePersistence = async () => {
-      if (!persistenceKey) return;
-      persistenceDb = new TsdrawLocalIndexedDb(persistenceKey);
-      const loaded = await persistenceDb.load(sessionId);
-      const snapshot = {};
-      if (loaded.records.length > 0) {
-        snapshot.document = { records: loaded.records };
-      }
-      if (loaded.state) {
-        snapshot.state = loaded.state;
-      }
-      if (snapshot.document || snapshot.state) {
-        applyLoadedSnapshot(snapshot);
+      if (!persistenceKey) {
+        setIsPersistenceReady(true);
+        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;
-            return;
+      try {
+        persistenceDb = new TsdrawLocalIndexedDb(persistenceKey);
+        const loaded = await persistenceDb.load(sessionId);
+        const snapshot = {};
+        if (loaded.records.length > 0) {
+          snapshot.document = { records: loaded.records };
+        }
+        if (loaded.state) {
+          snapshot.state = loaded.state;
+        }
+        if (snapshot.document || snapshot.state) {
+          applyLoadedSnapshot(snapshot);
+        }
+        editor.loadHistorySnapshot(loaded.history);
+        syncHistoryState();
+        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;
+              return;
+            }
+            applyRemoteDocumentSnapshot(nextDocument);
           }
-          applyRemoteDocumentSnapshot(nextDocument);
+        };
+      } finally {
+        if (!disposed) {
+          setIsPersistenceReady(true);
         }
-      };
+      }
     };
     const cleanupEditorListener = editor.listen(() => {
       if (ignorePersistenceChanges) return;
       schedulePersist();
     });
+    const cleanupHistoryListener = editor.listenHistory(() => {
+      syncHistoryState();
+      if (ignorePersistenceChanges) return;
+      schedulePersist();
+    });
     resize();
     const ro = new ResizeObserver(resize);
     ro.observe(container);
@@ -875,6 +968,26 @@ function useTsdrawCanvasController(options = {}) {
         currentToolRef.current = tool;
       },
       getCurrentTool: () => editor.getCurrentToolId(),
+      undo: () => {
+        const changed = editor.undo();
+        if (!changed) return false;
+        reconcileSelectionAfterDocumentLoad();
+        setSelectionRotationDeg(0);
+        render();
+        syncHistoryState();
+        return true;
+      },
+      redo: () => {
+        const changed = editor.redo();
+        if (!changed) return false;
+        reconcileSelectionAfterDocumentLoad();
+        setSelectionRotationDeg(0);
+        render();
+        syncHistoryState();
+        return true;
+      },
+      canUndo: () => editor.canUndo(),
+      canRedo: () => editor.canRedo(),
       applyDrawStyle: (partial) => {
         editor.setCurrentDrawStyle(partial);
         if (partial.color) setDrawColor(partial.color);
@@ -887,6 +1000,7 @@ function useTsdrawCanvasController(options = {}) {
       disposed = true;
       schedulePersistRef.current = null;
       cleanupEditorListener();
+      cleanupHistoryListener();
       disposeMount?.();
       ro.disconnect();
       canvas.removeEventListener("pointerdown", handlePointerDown);
@@ -940,6 +1054,38 @@ function useTsdrawCanvasController(options = {}) {
     },
     [render]
   );
+  const undo = react.useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return false;
+    const changed = editor.undo();
+    if (!changed) return false;
+    const nextSelectedShapeIds = selectedShapeIdsRef.current.filter((shapeId) => editor.getShape(shapeId) != null);
+    if (nextSelectedShapeIds.length !== selectedShapeIdsRef.current.length) {
+      selectedShapeIdsRef.current = nextSelectedShapeIds;
+      setSelectedShapeIds(nextSelectedShapeIds);
+    }
+    setSelectionRotationDeg(0);
+    render();
+    setCanUndo(editor.canUndo());
+    setCanRedo(editor.canRedo());
+    return true;
+  }, [render]);
+  const redo = react.useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return false;
+    const changed = editor.redo();
+    if (!changed) return false;
+    const nextSelectedShapeIds = selectedShapeIdsRef.current.filter((shapeId) => editor.getShape(shapeId) != null);
+    if (nextSelectedShapeIds.length !== selectedShapeIdsRef.current.length) {
+      selectedShapeIdsRef.current = nextSelectedShapeIds;
+      setSelectedShapeIds(nextSelectedShapeIds);
+    }
+    setSelectionRotationDeg(0);
+    render();
+    setCanUndo(editor.canUndo());
+    setCanRedo(editor.canRedo());
+    return true;
+  }, [render]);
   const showToolOverlay = isPointerInsideCanvas && (currentTool === "pen" || currentTool === "eraser");
   const canvasCursor = getCanvasCursor(currentTool, {
     isMovingSelection,
@@ -978,14 +1124,19 @@ function useTsdrawCanvasController(options = {}) {
     canvasCursor,
     cursorContext,
     toolOverlay,
+    isPersistenceReady,
     showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
+    canUndo,
+    canRedo,
+    undo,
+    redo,
     setTool,
     applyDrawStyle,
     handleResizePointerDown,
     handleRotatePointerDown
   };
 }
-var DEFAULT_TOOL_IDS = ["select", "pen", "eraser", "hand"];
+var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser"]];
 var DEFAULT_TOOL_LABELS = {
   select: "Select",
   pen: "Pen",
@@ -1002,11 +1153,8 @@ function parseAnchor(anchor) {
   }
   return { vertical, horizontal };
 }
-function isCustomTool(toolItem) {
-  return typeof toolItem !== "string";
-}
-function getToolId(toolItem) {
-  return typeof toolItem === "string" ? toolItem : toolItem.id;
+function isToolbarAction(item) {
+  return item === "undo" || item === "redo";
 }
 function resolvePlacementStyle(placement, fallbackAnchor, fallbackOffsetX, fallbackOffsetY) {
   const anchor = placement?.anchor ?? fallbackAnchor;
@@ -1041,40 +1189,55 @@ function Tsdraw(props) {
     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 = react.useMemo(
-    () => toolItems.filter(isCustomTool),
-    [toolItems]
-  );
-  const toolDefinitions = react.useMemo(
-    () => customTools.map((tool) => tool.definition),
+  const customTools = props.customTools ?? [];
+  const toolbarPartIds = props.uiOptions?.toolbar?.parts ?? DEFAULT_TOOLBAR_PARTS;
+  const customToolMap = react.useMemo(
+    () => new Map(customTools.map((customTool) => [customTool.id, customTool])),
     [customTools]
   );
-  const toolbarItems = react.useMemo(
-    () => toolItems.map((tool) => {
-      if (typeof tool === "string") {
-        return {
-          id: tool,
-          label: DEFAULT_TOOL_LABELS[tool],
-          icon: (isActive) => getDefaultToolbarIcon(tool, isActive)
-        };
+  const toolbarToolIds = react.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const toolbarPart of toolbarPartIds) {
+      for (const item of toolbarPart) {
+        if (isToolbarAction(item)) continue;
+        if (item in DEFAULT_TOOL_LABELS || customToolMap.has(item)) {
+          ids.add(item);
+        }
       }
-      return {
-        id: tool.id,
-        label: tool.label,
-        icon: (isActive) => isActive && tool.iconSelected ? tool.iconSelected : tool.icon
-      };
-    }),
-    [toolItems]
+    }
+    return ids;
+  }, [customToolMap, toolbarPartIds]);
+  const toolDefinitions = react.useMemo(
+    () => customTools.filter((customTool) => toolbarToolIds.has(customTool.id)).map((customTool) => customTool.definition),
+    [customTools, toolbarToolIds]
   );
   const stylePanelToolIds = react.useMemo(
-    () => toolItems.filter((tool) => {
-      if (typeof tool === "string") return tool === "pen";
-      return tool.showStylePanel ?? false;
-    }).map(getToolId),
-    [toolItems]
+    () => {
+      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 initialTool = props.initialToolId ?? toolbarItems[0]?.id ?? "pen";
+  const firstToolbarTool = react.useMemo(() => {
+    for (const toolbarPart of toolbarPartIds) {
+      for (const item of toolbarPart) {
+        if (isToolbarAction(item)) continue;
+        if (item in DEFAULT_TOOL_LABELS || customToolMap.has(item)) {
+          return item;
+        }
+      }
+    }
+    return void 0;
+  }, [customToolMap, toolbarPartIds]);
+  const initialTool = props.initialToolId ?? firstToolbarTool ?? "pen";
   const requestedTheme = props.theme ?? "light";
   react.useEffect(() => {
     if (requestedTheme !== "system" || typeof window === "undefined") return;
@@ -1099,7 +1262,12 @@ function Tsdraw(props) {
     canvasCursor: defaultCanvasCursor,
     cursorContext,
     toolOverlay,
+    isPersistenceReady,
     showStylePanel,
+    canUndo,
+    canRedo,
+    undo,
+    redo,
     setTool,
     applyDrawStyle,
     handleResizePointerDown,
@@ -1112,7 +1280,7 @@ function Tsdraw(props) {
     stylePanelToolIds,
     onMount: props.onMount
   });
-  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 16);
+  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
   const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsxRuntime.jsx(
@@ -1129,6 +1297,51 @@ function Tsdraw(props) {
   );
   const overlayNode = props.uiOptions?.overlays?.renderToolOverlay?.({ defaultOverlay: defaultToolOverlay, overlayState: toolOverlay, currentTool }) ?? defaultToolOverlay;
   const customElements = props.uiOptions?.customElements ?? [];
+  const toolbarParts = react.useMemo(
+    () => toolbarPartIds.map((toolbarPart, partIndex) => {
+      const items = toolbarPart.map((item) => {
+        if (item === "undo") {
+          return {
+            type: "action",
+            id: "undo",
+            label: "Undo",
+            disabled: !canUndo,
+            onSelect: undo
+          };
+        }
+        if (item === "redo") {
+          return {
+            type: "action",
+            id: "redo",
+            label: "Redo",
+            disabled: !canRedo,
+            onSelect: redo
+          };
+        }
+        if (item in DEFAULT_TOOL_LABELS) {
+          return {
+            type: "tool",
+            id: item,
+            label: DEFAULT_TOOL_LABELS[item],
+            icon: (isActive) => getDefaultToolbarIcon(item, isActive)
+          };
+        }
+        const customTool = customToolMap.get(item);
+        if (!customTool) return null;
+        return {
+          type: "tool",
+          id: customTool.id,
+          label: customTool.label,
+          icon: (isActive) => isActive && customTool.iconSelected ? customTool.iconSelected : customTool.icon
+        };
+      }).filter((nextItem) => nextItem != null);
+      return {
+        id: `toolbar-part-${partIndex.toString(36)}`,
+        items
+      };
+    }).filter((part) => part.items.length > 0),
+    [canRedo, canUndo, customToolMap, redo, toolbarPartIds, undo]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1172,7 +1385,7 @@ function Tsdraw(props) {
         /* @__PURE__ */ jsxRuntime.jsx(
           StylePanel,
           {
-            visible: showStylePanel,
+            visible: isPersistenceReady && showStylePanel,
             style: stylePanelPlacementStyle,
             theme: resolvedTheme,
             drawColor,
@@ -1199,10 +1412,11 @@ function Tsdraw(props) {
         /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
-            items: toolbarItems,
+            parts: toolbarParts,
             style: toolbarPlacementStyle,
-            currentTool,
-            onToolChange: setTool
+            currentTool: isPersistenceReady ? currentTool : null,
+            onToolChange: setTool,
+            disabled: !isPersistenceReady
           }
         )
       ]