@btst/stack 1.9.0 → 1.10.0

package/dist/packages/ui/src/components/ui-builder/internal/components/nav.cjs

@@ -0,0 +1,702 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const LucideIcons = require('lucide-react');
+const button = require('../../../button.cjs');
+const dialog = require('../../../dialog.cjs');
+const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
+const layerRenderer = require('../../layer-renderer.cjs');
+const index$1 = require('../../../../../../../node_modules/.pnpm/next-themes@0.4.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next-themes/dist/index.cjs');
+const dropdownMenu = require('../../../dropdown-menu.cjs');
+const popover = require('../../../popover.cjs');
+const command = require('../../../command.cjs');
+const input = require('../../../input.cjs');
+const utils = require('../../../../lib/utils.cjs');
+const codePanel = require('../../components/code-panel.cjs');
+const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs');
+const tooltip = require('../../../tooltip.cjs');
+const useKeyboardShortcuts = require('../../../../hooks/use-keyboard-shortcuts.cjs');
+const index = require('../../../../../../../node_modules/.pnpm/zustand@4.5.5_@types_react@19.2.6_immer@11.1.3_react@19.2.0/node_modules/zustand/esm/index.cjs');
+
+const Z_INDEX = 1e3;
+function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
+  const selectedPageId = layerStore.useLayerStore((state) => state.selectedPageId);
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const componentRegistry = editorStore.useEditorStore((state) => state.registry);
+  const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
+  const showLeftPanel = editorStore.useEditorStore((state) => state.showLeftPanel);
+  const setShowLeftPanel = editorStore.useEditorStore((state) => state.setShowLeftPanel);
+  const showRightPanel = editorStore.useEditorStore((state) => state.showRightPanel);
+  const setShowRightPanel = editorStore.useEditorStore((state) => state.setShowRightPanel);
+  const pastStates = index.useStore(
+    layerStore.useLayerStore.temporal,
+    (state) => state.pastStates
+  );
+  const futureStates = index.useStore(
+    layerStore.useLayerStore.temporal,
+    (state) => state.futureStates
+  );
+  const { undo, redo } = layerStore.useLayerStore.temporal.getState();
+  const page = findLayerById(selectedPageId);
+  const canUndo = !!pastStates.length;
+  const canRedo = !!futureStates.length;
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState(false);
+  const [isExportModalOpen, setIsExportModalOpen] = React.useState(false);
+  const handleUndo = React.useCallback(() => {
+    undo();
+    incrementRevision();
+  }, [undo, incrementRevision]);
+  const handleRedo = React.useCallback(() => {
+    redo();
+    incrementRevision();
+  }, [redo, incrementRevision]);
+  const keyCombinations = React.useMemo(
+    () => [
+      {
+        keys: { metaKey: true, shiftKey: false },
+        key: "z",
+        handler: handleUndo
+      },
+      {
+        keys: { metaKey: true, shiftKey: true },
+        key: "z",
+        handler: handleRedo
+      },
+      {
+        keys: { metaKey: true, shiftKey: true },
+        key: "9",
+        handler: () => {
+          const elements = document.querySelectorAll("*");
+          elements.forEach((element) => {
+            element.classList.add("animate-spin", "origin-center");
+          });
+        }
+      },
+      {
+        keys: { metaKey: true, shiftKey: true },
+        key: "0",
+        handler: () => {
+          const elements = document.querySelectorAll("*");
+          elements.forEach((element) => {
+            element.classList.remove("animate-spin", "origin-center");
+          });
+        }
+      }
+    ],
+    [handleUndo, handleRedo]
+  );
+  useKeyboardShortcuts.useKeyboardShortcuts(keyCombinations);
+  const handleOpenPreview = React.useCallback(() => {
+    setIsPreviewModalOpen(true);
+  }, []);
+  const handleOpenExport = React.useCallback(() => {
+    setIsExportModalOpen(true);
+  }, []);
+  const handleToggleLeftPanel = React.useCallback(() => {
+    setShowLeftPanel(!showLeftPanel);
+  }, [showLeftPanel, setShowLeftPanel]);
+  const handleToggleRightPanel = React.useCallback(() => {
+    setShowRightPanel(!showRightPanel);
+  }, [showRightPanel, setShowRightPanel]);
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX }), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between bg-background px-2 md:px-6 py-4 border-b",
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          leftChildren,
+          leftChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex h-10 w-px bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:contents", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  onClick: handleToggleLeftPanel,
+                  variant: showLeftPanel ? "secondary" : "outline",
+                  size: "icon",
+                  className: "flex flex-col justify-center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Left Panel" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelLeft, { className: "w-4 h-4" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { children: [
+                showLeftPanel ? "Hide" : "Show",
+                " Left Panel"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  onClick: handleToggleRightPanel,
+                  variant: showRightPanel ? "secondary" : "outline",
+                  size: "icon",
+                  className: "flex flex-col justify-center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Right Panel" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelRight, { className: "w-4 h-4" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { children: [
+                showRightPanel ? "Hide" : "Show",
+                " Right Panel"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex h-10 w-px bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PagesPopover, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(PreviewModeToggle, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex space-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ActionButtons,
+              {
+                canUndo,
+                canRedo,
+                onUndo: handleUndo,
+                onRedo: handleRedo,
+                onOpenPreview: handleOpenPreview,
+                onOpenExport: handleOpenExport,
+                showExport
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 flex w-px bg-border" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ModeToggle, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex md:hidden space-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 flex w-px bg-border" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ResponsiveDropdown,
+              {
+                canUndo,
+                canRedo,
+                onUndo: handleUndo,
+                onRedo: handleRedo,
+                onOpenPreview: handleOpenPreview,
+                onOpenExport: handleOpenExport,
+                showExport,
+                children: rightChildren
+              }
+            )
+          ] }),
+          rightChildren && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-px bg-border" }),
+            rightChildren
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewDialog,
+          {
+            isOpen: isPreviewModalOpen,
+            onOpenChange: setIsPreviewModalOpen,
+            page,
+            componentRegistry
+          }
+        ),
+        showExport && /* @__PURE__ */ jsxRuntime.jsx(
+          CodeDialog,
+          {
+            isOpen: isExportModalOpen,
+            onOpenChange: setIsExportModalOpen
+          }
+        )
+      ]
+    }
+  );
+}
+const ActionButtons = ({
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onOpenPreview,
+  onOpenExport,
+  showExport = true
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          onClick: onUndo,
+          variant: "secondary",
+          size: "icon",
+          disabled: !canUndo,
+          className: "flex flex-col justify-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Undo" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Undo, { className: "w-4 h-4" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
+        "Undo",
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318Z" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          onClick: onRedo,
+          variant: "secondary",
+          size: "icon",
+          disabled: !canRedo,
+          className: "flex flex-col justify-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Redo" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Redo, { className: "w-4 h-4" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
+        "Redo",
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+Z" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          onClick: onOpenPreview,
+          variant: "secondary",
+          size: "icon",
+          className: "flex flex-col justify-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Preview" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "w-4 h-4" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
+        "Preview",
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+P" })
+      ] })
+    ] }),
+    showExport && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          onClick: onOpenExport,
+          variant: "secondary",
+          size: "icon",
+          className: "flex flex-col justify-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Export" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FileUp, { className: "w-4 h-4" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
+        "Export Code",
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+E" })
+      ] })
+    ] })
+  ] });
+};
+const ResponsiveDropdown = ({
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onOpenPreview,
+  onOpenExport,
+  showExport = true,
+  children
+}) => {
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreVertical, { className: "w-4 h-4" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", style, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          className: "gap-2",
+          onClick: onUndo,
+          disabled: !canUndo,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Undo, { className: "w-4 h-4" }),
+            "Undo",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318Z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          className: "gap-2",
+          onClick: onRedo,
+          disabled: !canRedo,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Redo, { className: "w-4 h-4" }),
+            "Redo",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+Z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "gap-2", onClick: onOpenPreview, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "w-4 h-4" }),
+        "Preview",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+P" })
+      ] }),
+      showExport && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "gap-2", onClick: onOpenExport, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FileUp, { className: "w-4 h-4" }),
+        "Export",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+E" })
+      ] }),
+      children && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children })
+      ] })
+    ] })
+  ] });
+};
+const PreviewDialog = ({
+  isOpen,
+  onOpenChange,
+  page,
+  componentRegistry
+}) => {
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  const shortcuts = React.useMemo(
+    () => [
+      {
+        keys: { metaKey: true, shiftKey: true },
+        key: "p",
+        handler: () => {
+          onOpenChange(true);
+        }
+      }
+    ],
+    [onOpenChange]
+  );
+  useKeyboardShortcuts.useKeyboardShortcuts(shortcuts);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTrigger, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContentWithZIndex,
+      {
+        className: "max-w-[calc(100dvw)] max-h-[calc(100dvh)] overflow-auto p-0 gap-0",
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "py-3 bg-yellow-600 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: "Page Preview" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            layerRenderer,
+            {
+              className: "w-full h-full flex flex-col overflow-x-hidden",
+              page,
+              componentRegistry
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const CodeDialog = ({ isOpen, onOpenChange }) => {
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  const shortcuts = React.useMemo(
+    () => [
+      {
+        keys: { metaKey: true, shiftKey: true },
+        key: "e",
+        handler: () => {
+          onOpenChange(true);
+        }
+      }
+    ],
+    [onOpenChange]
+  );
+  useKeyboardShortcuts.useKeyboardShortcuts(shortcuts);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTrigger, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContentWithZIndex,
+      {
+        className: "sm:max-w-[625px] max-h-[625px]",
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Generated Code" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(codePanel.CodePanel, {})
+        ]
+      }
+    )
+  ] });
+};
+function ModeToggle() {
+  const { setTheme } = index$1.useTheme();
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  const handleSetLightTheme = React.useCallback(() => {
+    setTheme("light");
+  }, [setTheme]);
+  const handleSetDarkTheme = React.useCallback(() => {
+    setTheme("dark");
+  }, [setTheme]);
+  const handleSetSystemTheme = React.useCallback(() => {
+    setTheme("system");
+  }, [setTheme]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.SunIcon, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoonIcon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Toggle theme" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleSetLightTheme, children: "Light" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleSetDarkTheme, children: "Dark" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleSetSystemTheme, children: "System" })
+    ] })
+  ] });
+}
+function PagesPopover() {
+  const { pages, selectedPageId, addPageLayer, selectPage } = layerStore.useLayerStore();
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [selectedPage, setSelectedPage] = React.useState(
+    selectedPageId
+  );
+  const [textInputValue, setTextInputValue] = React.useState("");
+  const allowPagesCreation = editorStore.useEditorStore(
+    (state) => state.allowPagesCreation
+  );
+  const selectedPageData = React.useMemo(() => {
+    return pages.find((page) => page.id === selectedPageId);
+  }, [pages, selectedPageId]);
+  const handleSelect = React.useCallback(
+    (pageId) => {
+      setSelectedPage(pageId);
+      selectPage(pageId);
+      setOpen(false);
+    },
+    [selectPage, setOpen]
+  );
+  const handleAddPageLayer = React.useCallback(
+    (pageName) => {
+      addPageLayer(pageName);
+      setTextInputValue("");
+    },
+    [addPageLayer, setTextInputValue]
+  );
+  const handleSubmit = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      handleAddPageLayer(textInputValue);
+    },
+    [handleAddPageLayer, textInputValue]
+  );
+  const handleTextInputChange = React.useCallback(
+    (e) => {
+      setTextInputValue(e.target.value);
+    },
+    [setTextInputValue]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddPageLayer(textInputValue);
+      }
+    },
+    [handleAddPageLayer, textInputValue]
+  );
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  const textInputForm = /* @__PURE__ */ jsxRuntime.jsx("form", { className: "w-full", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center space-x-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        className: "w-full flex-grow",
+        placeholder: "New page name...",
+        value: textInputValue,
+        onChange: handleTextInputChange,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PlusIcon, { className: "w-4 h-4" }) })
+  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          size: "default",
+          className: "max-w-30 overflow-hidden",
+          children: selectedPageData?.name
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Select page" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverContent, { className: "w-[300px] p-0", style, children: /* @__PURE__ */ jsxRuntime.jsxs(command.Command, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        command.CommandInput,
+        {
+          placeholder: "Select page or create new...",
+          value: inputValue,
+          onValueChange: setInputValue
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(command.CommandList, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(command.CommandEmpty, { children: [
+          "No pages found",
+          allowPagesCreation && textInputForm
+        ] }),
+        pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+          PageItem,
+          {
+            selectedPageId,
+            page,
+            onSelect: handleSelect
+          },
+          page.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandSeparator, {}),
+        allowPagesCreation && /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { heading: "Create new page", children: /* @__PURE__ */ jsxRuntime.jsx(command.CommandItem, { children: textInputForm }) })
+      ] })
+    ] }) })
+  ] }) });
+}
+const PageItem = ({
+  selectedPageId,
+  page,
+  onSelect
+}) => {
+  const handleSelect = React.useCallback(() => {
+    onSelect(page.id);
+  }, [onSelect, page.id]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    command.CommandItem,
+    {
+      value: page.name,
+      onSelect: handleSelect,
+      className: utils.cn(selectedPageId === page.id && "font-bold"),
+      children: [
+        selectedPageId === page.id ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckIcon, { className: "w-4 h-4 mr-2" }) : null,
+        page.name
+      ]
+    }
+  );
+};
+const DialogContentWithZIndex = React.forwardRef(({ className, children, ...props }, ref) => {
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogOverlay, { style }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      dialog.DialogContent,
+      {
+        ref,
+        className: utils.cn(
+          "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogClose, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4 rounded-full p-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+DialogContentWithZIndex.displayName = "DialogContentWithZIndex";
+const PreviewModeToggle = () => {
+  const { previewMode, setPreviewMode } = editorStore.useEditorStore();
+  const handleSelect = React.useCallback((mode) => {
+    setPreviewMode(mode);
+  }, [setPreviewMode]);
+  const style = React.useMemo(() => ({ zIndex: Z_INDEX + 1 }), []);
+  const previewModeIcon = React.useMemo(() => {
+    return {
+      mobile: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Smartphone, { className: "h-4 w-4" }),
+      tablet: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Tablet, { className: "h-4 w-4" }),
+      desktop: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Monitor, { className: "h-4 w-4" }),
+      responsive: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Maximize, { className: "h-4 w-4" })
+    }[previewMode];
+  }, [previewMode]);
+  const handleSelectMobile = React.useCallback(() => {
+    handleSelect("mobile");
+  }, [handleSelect]);
+  const handleSelectTablet = React.useCallback(() => {
+    handleSelect("tablet");
+  }, [handleSelect]);
+  const handleSelectDesktop = React.useCallback(() => {
+    handleSelect("desktop");
+  }, [handleSelect]);
+  const handleSelectResponsive = React.useCallback(() => {
+    handleSelect("responsive");
+  }, [handleSelect]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", children: [
+        previewModeIcon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Select screen size" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Select screen size" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", style, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          onSelect: handleSelectMobile,
+          className: previewMode === "mobile" ? "bg-secondary text-secondary-foreground" : "",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Smartphone, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Mobile" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          onSelect: handleSelectTablet,
+          className: previewMode === "tablet" ? "bg-secondary text-secondary-foreground" : "",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Tablet, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tablet" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          onSelect: handleSelectDesktop,
+          className: previewMode === "desktop" ? "bg-secondary text-secondary-foreground" : "",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Monitor, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Desktop" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          onSelect: handleSelectResponsive,
+          className: previewMode === "responsive" ? "bg-secondary text-secondary-foreground" : "",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Maximize, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Responsive" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.NavBar = NavBar;