"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;
