@starrykit/slides-editor 0.1.30 → 0.1.31

package/dist/components/editor-header.d.ts

@@ -1,4 +1,5 @@
 import type { PdfExportSelection } from "@starrykit/slides-core";
+import type { DeckSwitcherOption } from "../index";
 export interface PdfExportSlideOption {
     id: string;
     title: string;
@@ -6,7 +7,11 @@ export interface PdfExportSlideOption {
 }
 interface EditorHeaderProps {
     title: string;
+    decks?: DeckSwitcherOption[];
+    currentDeckId?: string | null;
     onTitleChange?: (t: string) => void;
+    onDeckSwitch?: (deckId: string) => void;
+    onDeckImport?: (files: FileList) => void;
     onPresent?: () => void;
     onExportPdf?: (selection: PdfExportSelection) => void;
     onExportHtml?: () => void;
@@ -14,6 +19,7 @@ interface EditorHeaderProps {
     pdfSlides?: PdfExportSlideOption[];
     pdfThumbnails?: Record<string, string>;
     isSaving: boolean;
+    isSwitchingDeck?: boolean;
 }
-export declare function EditorHeader({ title, onTitleChange, onPresent, onExportPdf, onExportHtml, onExportSourceFiles, pdfSlides, pdfThumbnails, isSaving, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorHeader({ title, decks, currentDeckId, onTitleChange, onDeckSwitch, onDeckImport, onPresent, onExportPdf, onExportHtml, onExportSourceFiles, pdfSlides, pdfThumbnails, isSaving, isSwitchingDeck, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/editor-workspace.d.ts

@@ -2,6 +2,7 @@ import type { EditableType, PdfExportSelection, SlideModel, StageRect } from "@s
 import type { MouseEvent as ReactMouseEvent, RefObject } from "react";
 import type { BlockManipulationOverlay as BlockManipulationOverlayModel } from "../hooks/block-manipulation-types";
 import type { ImageCropOverlay as ImageCropOverlayModel } from "../hooks/use-image-crop";
+import type { DeckSwitcherOption } from "../index";
 import type { ResizeHandleCorner, ResizeHandlePosition } from "../lib/block-snap-types";
 import type { CssPropertyRow } from "../lib/collect-css-properties";
 import type { SelectionCommandAvailability } from "./floating-toolbar";
@@ -9,7 +10,10 @@ interface EditorWorkspaceProps {
     slides: SlideModel[];
     activeSlide: SlideModel;
     deckTitle: string;
+    decks?: DeckSwitcherOption[];
+    currentDeckId?: string | null;
     isSaving: boolean;
+    isSwitchingDeck: boolean;
     isPresenting: boolean;
     thumbnails: Record<string, string>;
     slideWidth: number;
@@ -42,6 +46,8 @@ interface EditorWorkspaceProps {
     isManipulating: boolean;
     isToolbarSuppressed: boolean;
     onDeckTitleChange?: (title: string) => void;
+    onDeckSwitch?: (deckId: string) => void;
+    onDeckImport?: (files: FileList) => void;
     onExportPdf?: (selection: PdfExportSelection) => void;
     onExportHtml?: () => void;
     onExportSourceFiles?: () => void;
@@ -84,5 +90,5 @@ interface EditorWorkspaceProps {
     onDuplicateElement: () => void;
     onDeleteElement: () => void;
 }
-declare function EditorWorkspace({ slides, activeSlide, deckTitle, isSaving, isPresenting, thumbnails, slideWidth, slideHeight, offsetX, offsetY, scale, preselectionOverlay, marqueeOverlay, selectionOverlay, toolbarKey, inspectedStyles, selectedElementType, selectionCommandAvailability, isSelectedElementLocked, groupScopeOverlayPassive, isEditingText, isCropMode, cropOverlay, manipulationOverlay, attributeValues, iframeRef, stageViewportRef, selectionOverlayRef, selectionContextMenuTriggerRef, isManipulating, isToolbarSuppressed, onDeckTitleChange, onExportPdf, onExportHtml, onExportSourceFiles, onPresent, onExitPresenting, onSelectSlide, onSidebarSlideFocusChange, onAddSlide, onAddSlideAbove, onAddSlideBelow, onDuplicateSlide, onDeleteSlide, onToggleSlideHidden, onRenameSlide, onReorderSlide, onSidebarFocusChange, onSelectionOverlayMouseDown, onSelectionOverlayMouseUp, onSelectionOverlayMouseMove, onSelectionOverlayContextMenu, onStageMouseLeave, onResizeHandleMouseDown, onCornerRotationZoneMouseDown, onCropHandleMouseDown, onSelectionOverlayDoubleClick, onBackgroundClick, onStyleChange, onStyleChanges, onStylePreview, onAttributeChange, onAlignToSlide, onCropImage, onDistribute, onGroup, onLayerOrder, onUngroup, onDuplicateElement, onDeleteElement, }: EditorWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorWorkspace({ slides, activeSlide, deckTitle, decks, currentDeckId, isSaving, isSwitchingDeck, isPresenting, thumbnails, slideWidth, slideHeight, offsetX, offsetY, scale, preselectionOverlay, marqueeOverlay, selectionOverlay, toolbarKey, inspectedStyles, selectedElementType, selectionCommandAvailability, isSelectedElementLocked, groupScopeOverlayPassive, isEditingText, isCropMode, cropOverlay, manipulationOverlay, attributeValues, iframeRef, stageViewportRef, selectionOverlayRef, selectionContextMenuTriggerRef, isManipulating, isToolbarSuppressed, onDeckTitleChange, onDeckSwitch, onDeckImport, onExportPdf, onExportHtml, onExportSourceFiles, onPresent, onExitPresenting, onSelectSlide, onSidebarSlideFocusChange, onAddSlide, onAddSlideAbove, onAddSlideBelow, onDuplicateSlide, onDeleteSlide, onToggleSlideHidden, onRenameSlide, onReorderSlide, onSidebarFocusChange, onSelectionOverlayMouseDown, onSelectionOverlayMouseUp, onSelectionOverlayMouseMove, onSelectionOverlayContextMenu, onStageMouseLeave, onResizeHandleMouseDown, onCornerRotationZoneMouseDown, onCropHandleMouseDown, onSelectionOverlayDoubleClick, onBackgroundClick, onStyleChange, onStyleChanges, onStylePreview, onAttributeChange, onAlignToSlide, onCropImage, onDistribute, onGroup, onLayerOrder, onUngroup, onDuplicateElement, onDeleteElement, }: EditorWorkspaceProps): import("react/jsx-runtime").JSX.Element;
 export { EditorWorkspace };

package/dist/index.d.ts

@@ -2,13 +2,26 @@ import { type PdfExportSelection, type SlideModel } from "@starrykit/slides-core
 export interface SlidesEditorProps {
     slides: SlideModel[];
     deckTitle?: string;
+    decks?: DeckSwitcherOption[];
+    currentDeckId?: string | null;
     isSaving?: boolean;
+    isSwitchingDeck?: boolean;
     onSlidesChange?: (slides: SlideModel[]) => void;
     onDeckTitleChange?: (title: string) => void;
+    onDeckSwitch?: (deckId: string) => void;
+    onDeckImport?: (files: FileList) => void;
     onExportPdf?: (selection: PdfExportSelection) => void;
     onExportHtml?: () => void;
     onExportSourceFiles?: () => void;
 }
-declare function SlidesEditor({ slides: loadedSlides, deckTitle, isSaving, onSlidesChange, onDeckTitleChange, onExportPdf, onExportHtml, onExportSourceFiles, }: SlidesEditorProps): import("react/jsx-runtime").JSX.Element;
+export interface DeckSwitcherOption {
+    id: string;
+    title: string;
+    description?: string;
+    directoryName: string;
+    relativePath: string;
+    isCurrent: boolean;
+}
+declare function SlidesEditor({ slides: loadedSlides, deckTitle, decks, currentDeckId, isSaving, isSwitchingDeck, onSlidesChange, onDeckTitleChange, onDeckSwitch, onDeckImport, onExportPdf, onExportHtml, onExportSourceFiles, }: SlidesEditorProps): import("react/jsx-runtime").JSX.Element;
 export { SlidesEditor };
 export * from "@starrykit/slides-core";

package/dist/index.js

@@ -14,6 +14,7 @@ import {
   FileCheck2,
   FileCode2,
   FileText,
+  FolderInput,
   Layers3,
   Play,
   Presentation,
@@ -33,7 +34,7 @@ function cn(...inputs) {
 }
 
 // src/components/editor-header.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var EXPORTS = [
   {
     id: "html",
@@ -60,23 +61,37 @@ var EXPORTS = [
 var GITHUB_REPO_URL = "https://github.com/StarryKit/starry-slides";
 function EditorHeader({
   title,
+  decks = [],
+  currentDeckId,
   onTitleChange,
+  onDeckSwitch,
+  onDeckImport,
   onPresent,
   onExportPdf,
   onExportHtml,
   onExportSourceFiles,
   pdfSlides = [],
   pdfThumbnails = {},
-  isSaving
+  isSaving,
+  isSwitchingDeck = false
 }) {
-  const [open, setOpen] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const [deckOpen, setDeckOpen] = useState(false);
   const [pdfDialogOpen, setPdfDialogOpen] = useState(false);
   const [titleWidth, setTitleWidth] = useState(0);
-  const ref = useRef(null);
+  const exportRef = useRef(null);
+  const deckRef = useRef(null);
+  const deckImportInputRef = useRef(null);
   const titleDisplay = title || "Untitled presentation";
+  const canOpenDeckMenu = decks.length > 0 || Boolean(onDeckImport);
   useEffect(() => {
     const onDoc = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      if (exportRef.current && !exportRef.current.contains(e.target)) {
+        setExportOpen(false);
+      }
+      if (deckRef.current && !deckRef.current.contains(e.target)) {
+        setDeckOpen(false);
+      }
     };
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
@@ -89,7 +104,7 @@ function EditorHeader({
     setTitleWidth(Math.ceil(nextWidth));
   }, []);
   const handleExport = (e) => {
-    setOpen(false);
+    setExportOpen(false);
     if (e.soon) {
       toast(`${e.label} is not available yet.`, {
         description: "We are still building this export option."
@@ -124,28 +139,134 @@ function EditorHeader({
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-foreground/10" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            value: title,
-            onChange: (e) => onTitleChange?.(e.target.value),
-            "aria-label": "Deck title",
-            className: "max-w-full min-w-0 flex-none rounded-md bg-transparent px-2 py-1 text-[18px] font-semibold text-foreground outline-none focus:bg-foreground/[0.04]",
-            style: titleWidth ? { width: `${titleWidth}px` } : void 0,
-            placeholder: "Untitled presentation"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            ref: measureTitleRef,
-            "aria-hidden": "true",
-            className: "pointer-events-none invisible absolute left-0 top-0 whitespace-pre rounded-md px-2 py-1 text-[18px] font-semibold",
-            children: titleDisplay
-          },
-          titleDisplay
-        )
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 shrink", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: title,
+              onChange: (e) => onTitleChange?.(e.target.value),
+              "aria-label": "Deck title",
+              className: "max-w-full min-w-0 flex-none rounded-md bg-transparent px-2 py-1 text-[18px] font-semibold text-foreground outline-none focus:bg-foreground/[0.04]",
+              style: titleWidth ? { width: `${titleWidth}px` } : void 0,
+              placeholder: "Untitled presentation"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: measureTitleRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 whitespace-pre rounded-md px-2 py-1 text-[18px] font-semibold",
+              children: titleDisplay
+            },
+            titleDisplay
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: deckRef, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Switch deck",
+              "aria-expanded": deckOpen,
+              "aria-haspopup": "menu",
+              disabled: !canOpenDeckMenu || isSwitchingDeck,
+              onClick: () => {
+                if (canOpenDeckMenu && !isSwitchingDeck) {
+                  setDeckOpen((open) => !open);
+                }
+              },
+              className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground/45 transition-colors hover:bg-foreground/[0.04] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-35",
+              children: /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn("h-3.5 w-3.5 transition-transform", deckOpen && "rotate-180")
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: deckImportInputRef,
+              type: "file",
+              multiple: true,
+              "aria-label": "Import deck folder",
+              className: "hidden",
+              ...{ webkitdirectory: "", directory: "" },
+              onChange: (event) => {
+                const files = event.currentTarget.files;
+                if (files?.length) {
+                  onDeckImport?.(files);
+                }
+                event.currentTarget.value = "";
+              }
+            }
+          ),
+          deckOpen && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "menu",
+              "aria-label": "Local decks",
+              className: "absolute left-0 z-50 mt-1.5 w-[300px] rounded-lg border border-foreground/[0.08] bg-white p-1.5 shadow-[0_4px_20px_rgba(0,0,0,0.06),0_12px_40px_rgba(0,0,0,0.08)] animate-fade-in",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "px-2.5 py-1.5 text-[10px] font-medium uppercase tracking-wider text-foreground/40", children: "Local decks" }),
+                decks.map((deck) => {
+                  const current = deck.isCurrent || deck.id === currentDeckId;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitemradio",
+                      "aria-checked": current,
+                      disabled: current || isSwitchingDeck,
+                      onClick: () => {
+                        setDeckOpen(false);
+                        onDeckSwitch?.(deck.id);
+                      },
+                      className: cn(
+                        "flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors",
+                        current ? "bg-foreground/[0.045] text-foreground" : "text-foreground/72 hover:bg-foreground/[0.04] hover:text-foreground",
+                        isSwitchingDeck && "cursor-wait opacity-60"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center", children: current ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : null }),
+                        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium", children: deck.title }),
+                          /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-[11px] text-foreground/45", children: deck.relativePath === "." ? deck.directoryName : deck.relativePath })
+                        ] })
+                      ]
+                    },
+                    deck.id
+                  );
+                }),
+                onDeckImport ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-foreground/[0.08]" }),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      onClick: () => {
+                        setDeckOpen(false);
+                        deckImportInputRef.current?.click();
+                      },
+                      className: "flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left text-foreground/72 transition-colors hover:bg-foreground/[0.04] hover:text-foreground",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(FolderInput, { className: "h-3.5 w-3.5" }) }),
+                        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium", children: "Import deck..." }),
+                          /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-[11px] text-foreground/45", children: "Choose a folder with manifest.json" })
+                        ] })
+                      ]
+                    }
+                  )
+                ] }) : null
+              ]
+            }
+          )
+        ] })
       ] }),
       isSaving ? /* @__PURE__ */ jsx(
         "span",
@@ -157,21 +278,26 @@ function EditorHeader({
       ) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative", ref, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", ref: exportRef, children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: () => setOpen((o) => !o),
+            onClick: () => setExportOpen((o) => !o),
             className: "h-8 px-3 rounded-md flex items-center gap-1.5 text-[13px] text-foreground/70 hover:bg-foreground/[0.04] hover:text-foreground transition-colors",
             children: [
               /* @__PURE__ */ jsx(Download, { className: "w-3.5 h-3.5" }),
               /* @__PURE__ */ jsx("span", { children: "Export" }),
-              /* @__PURE__ */ jsx(ChevronDown, { className: cn("w-3 h-3 transition-transform", open && "rotate-180") })
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn("w-3 h-3 transition-transform", exportOpen && "rotate-180")
+                }
+              )
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-1.5 w-[280px] bg-white rounded-xl border border-foreground/[0.08] shadow-[0_4px_20px_rgba(0,0,0,0.06),0_12px_40px_rgba(0,0,0,0.08)] p-1.5 animate-fade-in z-50", children: [
+        exportOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-1.5 w-[280px] bg-white rounded-xl border border-foreground/[0.08] shadow-[0_4px_20px_rgba(0,0,0,0.06),0_12px_40px_rgba(0,0,0,0.08)] p-1.5 animate-fade-in z-50", children: [
           /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-foreground/40 px-2.5 py-1.5 font-medium", children: "Export formats" }),
           EXPORTS.map((e) => {
             const Icon = e.icon;
@@ -1060,7 +1186,7 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/slide-sidebar.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function SlideSidebar({
   slides,
   activeSlideId,
@@ -1132,7 +1258,7 @@ function SlideSidebar({
     onRename?.(renameDialogSlideId, renameDraft);
     cancelRename();
   }, [cancelRename, onRename, renameDialogSlideId, renameDraft]);
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx6(
       "aside",
       {
@@ -1482,7 +1608,7 @@ function rangesOverlapOrNear(startA, endA, startB, endB, proximity) {
 }
 
 // src/components/block-manipulation-overlay.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function makeRotationCursor(svgBody) {
   return encodeURIComponent(
     `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none">${svgBody}</g></svg>`
@@ -1515,7 +1641,7 @@ function BlockManipulationOverlay({
   onCornerRotationZoneMouseDown
 }) {
   const handleClassName = "absolute z-[5] size-[13px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white bg-foreground shadow-[0_2px_8px_rgba(0,0,0,0.16)] transition-colors before:absolute before:inset-[3px] before:rounded-full before:bg-white/90 hover:bg-foreground/80";
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     snapGuides.map((guide, index) => {
       const lineWidth = guide.variant === "spacing" ? "2px" : "1px";
       const capLength = 14;
@@ -1558,7 +1684,7 @@ function BlockManipulationOverlay({
           "data-testid": `snap-guide-${guide.orientation}`,
           "data-variant": guide.variant,
           style: lineStyle,
-          children: guide.variant === "spacing" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          children: guide.variant === "spacing" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
             /* @__PURE__ */ jsx7(
               "span",
               {
@@ -3820,7 +3946,7 @@ import {
   useRef as useRef7,
   useState as useState8
 } from "react";
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function ColorPopover({
   activePopoverId,
   commitFeature,
@@ -3956,10 +4082,10 @@ function OptionsPopover({
                     onPointerDown: () => {
                       skipNextPreviewClearRef.current = true;
                     },
-                    children: showOptionPreviewAfterLabel ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                    children: showOptionPreviewAfterLabel ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
                       /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: option.label }),
                       /* @__PURE__ */ jsx18(OptionSwatch, { feature, option })
-                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                    ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
                       Icon ? /* @__PURE__ */ jsx18(ToolbarIcon, { icon: Icon }) : /* @__PURE__ */ jsx18(OptionSwatch, { feature, option }),
                       /* @__PURE__ */ jsx18("span", { className: "truncate", children: option.label })
                     ] })
@@ -4186,7 +4312,7 @@ var LINE_HEIGHT_SLIDER_STEP = 0.01;
 var LINE_HEIGHT_SLIDER_DEFAULT = 1.2;
 
 // src/components/floating-toolbar-sections.tsx
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var BORDER_RANGE_DEBOUNCE_MS = 160;
 function FloatingToolbarSections({
   activePopoverId,
@@ -4203,7 +4329,7 @@ function FloatingToolbarSections({
   setActivePopoverId
 }) {
   const isImageSelection = selectedElementType === "image";
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     /* @__PURE__ */ jsx19(
       LockSection,
       {
@@ -4214,9 +4340,9 @@ function FloatingToolbarSections({
         showGroupTool
       }
     ),
-    isSelectedElementLocked ? null : /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    isSelectedElementLocked ? null : /* @__PURE__ */ jsxs12(Fragment5, { children: [
       /* @__PURE__ */ jsx19(Divider, {}),
-      isImageSelection ? /* @__PURE__ */ jsx19(ImageSection, { commitFeature, getFeature: getFeature2 }) : /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      isImageSelection ? /* @__PURE__ */ jsx19(ImageSection, { commitFeature, getFeature: getFeature2 }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
         /* @__PURE__ */ jsx19(
           FontSection,
           {
@@ -4263,7 +4389,7 @@ function FloatingToolbarSections({
           }
         )
       ] }),
-      isImageSelection ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      isImageSelection ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
         /* @__PURE__ */ jsx19(Divider, {}),
         /* @__PURE__ */ jsx19(
           BorderSection,
@@ -4278,7 +4404,7 @@ function FloatingToolbarSections({
           }
         )
       ] }) : null,
-      showMultiTools ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      showMultiTools ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
         /* @__PURE__ */ jsx19(Divider, {}),
         /* @__PURE__ */ jsx19(
           MultiArrangeSection,
@@ -5242,7 +5368,7 @@ function getFeature(featureId) {
 }
 
 // src/components/image-crop-overlay.tsx
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var CROP_CURSOR_PATHS = {
   "top-left": "M12 22V12H22",
   "top-right": "M2 12h10v10",
@@ -5252,7 +5378,7 @@ var CROP_CURSOR_PATHS = {
 function ImageCropOverlay({ overlay, onCropHandleMouseDown }) {
   const handleClassName = "absolute z-[7] size-8 -translate-x-1/2 -translate-y-1/2 rounded-sm bg-transparent text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.7)]";
   const maskRegions = createMaskRegions(overlay.selectionBounds, overlay.cropBounds);
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
     /* @__PURE__ */ jsx21("div", { className: "pointer-events-none absolute inset-0 z-[5]", "data-testid": "image-crop-mask", children: maskRegions.map((region) => /* @__PURE__ */ jsx21(
       "div",
       {
@@ -5648,7 +5774,10 @@ function EditorWorkspace({
   slides,
   activeSlide,
   deckTitle,
+  decks,
+  currentDeckId,
   isSaving,
+  isSwitchingDeck,
   isPresenting,
   thumbnails,
   slideWidth,
@@ -5677,6 +5806,8 @@ function EditorWorkspace({
   isManipulating,
   isToolbarSuppressed,
   onDeckTitleChange,
+  onDeckSwitch,
+  onDeckImport,
   onExportPdf,
   onExportHtml,
   onExportSourceFiles,
@@ -5727,6 +5858,11 @@ function EditorWorkspace({
             {
               title: deckTitle,
               onTitleChange: onDeckTitleChange,
+              decks,
+              currentDeckId,
+              isSwitchingDeck,
+              onDeckSwitch,
+              onDeckImport,
               isSaving,
               onPresent,
               onExportHtml,
@@ -11206,9 +11342,14 @@ var EMPTY_LOCKED_ELEMENT_IDS = [];
 function SlidesEditor({
   slides: loadedSlides,
   deckTitle,
+  decks,
+  currentDeckId,
   isSaving = false,
+  isSwitchingDeck = false,
   onSlidesChange,
   onDeckTitleChange,
+  onDeckSwitch,
+  onDeckImport,
   onExportPdf,
   onExportHtml,
   onExportSourceFiles
@@ -11471,7 +11612,10 @@ function SlidesEditor({
       slides,
       activeSlide,
       deckTitle: resolvedDeckTitle,
+      decks,
+      currentDeckId,
       isSaving,
+      isSwitchingDeck,
       isPresenting,
       thumbnails,
       slideWidth,
@@ -11499,6 +11643,8 @@ function SlidesEditor({
       isManipulating: isManipulating || isMarqueeSelecting,
       isToolbarSuppressed,
       onDeckTitleChange,
+      onDeckSwitch,
+      onDeckImport,
       onExportHtml,
       onExportSourceFiles,
       onExportPdf,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starrykit/slides-editor",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "Embeddable React editor UI for Starry Slides — host-driven through props and callbacks.",
   "license": "MIT",
   "homepage": "https://github.com/StarryKit/starry-slides#readme",
@@ -30,7 +30,7 @@
     "build": "tsc -p tsconfig.json && tsup src/index.tsx --format esm --external react --external react-dom"
   },
   "dependencies": {
-    "@starrykit/slides-core": "0.1.30",
+    "@starrykit/slides-core": "0.1.31",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "html-to-image": "^1.11.11",