@hyunsdev/ui 0.1.0

package/dist/chunk-OUFGNJ3V.js

@@ -0,0 +1,1726 @@
+import {
+  sidedockFocusClass,
+  sidedockOutlineStrokeClass,
+  sidedockShellClass
+} from "./chunk-BI3KKBIC.js";
+import {
+  Skeleton
+} from "./chunk-KJJB2PVC.js";
+import {
+  ScrollArea,
+  ScrollBar
+} from "./chunk-GJT7TDBS.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-PLZMCJSL.js";
+import {
+  Input
+} from "./chunk-YUPLJP3F.js";
+import {
+  Separator
+} from "./chunk-6ANDNGHD.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-D3SP7GL3.js";
+import {
+  Button
+} from "./chunk-TU5CYBB4.js";
+import {
+  cn
+} from "./chunk-DN2AEEA2.js";
+
+// src/layouts/window/components/WindowRow.tsx
+import * as Slot from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+function WindowGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-group",
+      className: cn("relative mt-4 flex w-full min-w-0 flex-col px-2 py-2 md:px-8", className),
+      ...props
+    }
+  );
+}
+function WindowGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "window-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-text-muted focus-visible:ring-focus-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-group-content",
+      className: cn("relative flex w-full min-w-0 flex-col px-2 py-2", className),
+      ...props
+    }
+  );
+}
+function WindowRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-row",
+      className: cn(
+        "relative flex w-full min-w-0 justify-between gap-2 py-3 first:pt-0 last:pb-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowRowContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-row-content",
+      className: cn("relative flex w-full min-w-0 flex-col", className),
+      ...props
+    }
+  );
+}
+function WindowRowTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "window-row-title", className: cn("text text-base", className), ...props });
+}
+function WindowRowDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-row-description",
+      className: cn("text-text-muted text-xs", className),
+      ...props
+    }
+  );
+}
+function WindowRowActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "window-row-actions",
+      className: cn("relative flex shrink-0 items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function WindowRowSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "window-row-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-window-border w-auto", className),
+      ...props
+    }
+  );
+}
+
+// src/layouts/window/core/Window.tsx
+import * as React3 from "react";
+import { XIcon } from "lucide-react";
+import { motion } from "motion/react";
+
+// src/layouts/window/WindowManager.tsx
+import * as React2 from "react";
+
+// src/layouts/window/core/WindowContext.tsx
+import React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var WindowStateContext = React.createContext(null);
+function WindowStateProvider({
+  children,
+  value
+}) {
+  return /* @__PURE__ */ jsx2(WindowStateContext.Provider, { value, children });
+}
+function useWindow() {
+  const context = React.useContext(WindowStateContext);
+  if (!context) {
+    throw new Error("useWindow must be used within a WindowProvider.");
+  }
+  return context;
+}
+function resolveOpenState(currentOpen, nextOpen) {
+  return typeof nextOpen === "function" ? nextOpen(currentOpen) : nextOpen;
+}
+function WindowProvider({
+  children,
+  defaultOpen = false,
+  onCloseRequest,
+  onOpenChange,
+  open
+}) {
+  const [blockedInteractionCount, setBlockedInteractionCount] = React.useState(0);
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const isOpenRef = React.useRef(isOpen);
+  const closeRequestVersionRef = React.useRef(0);
+  React.useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  const forceSetOpen = React.useCallback(
+    (nextOpen) => {
+      const resolvedOpen = resolveOpenState(isOpen, nextOpen);
+      if (!isControlled) {
+        setUncontrolledOpen(resolvedOpen);
+      }
+      onOpenChange?.(resolvedOpen);
+    },
+    [isControlled, isOpen, onOpenChange]
+  );
+  const openWindow = React.useCallback(() => {
+    closeRequestVersionRef.current += 1;
+    forceSetOpen(true);
+  }, [forceSetOpen]);
+  const forceCloseWindow = React.useCallback(() => {
+    forceSetOpen(false);
+  }, [forceSetOpen]);
+  const indicateBlockedInteraction = React.useCallback(() => {
+    setBlockedInteractionCount((currentCount) => currentCount + 1);
+  }, []);
+  const closeWindow = React.useCallback(
+    async (reason) => {
+      if (!isOpenRef.current) {
+        return true;
+      }
+      const closeRequestVersion = closeRequestVersionRef.current + 1;
+      closeRequestVersionRef.current = closeRequestVersion;
+      const closeAllowed = await onCloseRequest?.(reason) ?? true;
+      if (!closeAllowed) {
+        return false;
+      }
+      if (closeRequestVersion !== closeRequestVersionRef.current) {
+        return false;
+      }
+      forceCloseWindow();
+      return true;
+    },
+    [forceCloseWindow, onCloseRequest]
+  );
+  const toggleWindow = React.useCallback(() => {
+    if (isOpenRef.current) {
+      void closeWindow("programmatic").catch((error) => {
+        console.error("Failed to toggle window closed.", error);
+      });
+      return;
+    }
+    openWindow();
+  }, [closeWindow, openWindow]);
+  const contextValue = React.useMemo(
+    () => ({
+      blockedInteractionCount,
+      close: closeWindow,
+      forceClose: forceCloseWindow,
+      indicateBlockedInteraction,
+      isOpen,
+      open: openWindow,
+      toggle: toggleWindow
+    }),
+    [
+      blockedInteractionCount,
+      closeWindow,
+      forceCloseWindow,
+      indicateBlockedInteraction,
+      isOpen,
+      openWindow,
+      toggleWindow
+    ]
+  );
+  return /* @__PURE__ */ jsx2(WindowStateProvider, { value: contextValue, children });
+}
+
+// src/layouts/window/WindowManager.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var WindowManagerContext = React2.createContext(null);
+function defineWindow(definition) {
+  return definition;
+}
+function WindowManagerProvider({
+  children,
+  defaultActiveWindowId = null,
+  windows
+}) {
+  const windowMap = React2.useMemo(() => {
+    const nextWindowMap = /* @__PURE__ */ new Map();
+    windows.forEach((windowDefinition) => {
+      if (nextWindowMap.has(windowDefinition.id)) {
+        throw new Error(`Duplicate Window id "${windowDefinition.id}" is not allowed.`);
+      }
+      nextWindowMap.set(windowDefinition.id, windowDefinition);
+    });
+    return nextWindowMap;
+  }, [windows]);
+  if (defaultActiveWindowId !== null && !windowMap.has(defaultActiveWindowId)) {
+    throw new Error(
+      `WindowManagerProvider could not find a registered window for "${defaultActiveWindowId}".`
+    );
+  }
+  const [activeWindowId, setActiveWindowId] = React2.useState(defaultActiveWindowId);
+  const activeWindowIdRef = React2.useRef(activeWindowId);
+  const windowControllersRef = React2.useRef(/* @__PURE__ */ new Map());
+  React2.useEffect(() => {
+    activeWindowIdRef.current = activeWindowId;
+  }, [activeWindowId]);
+  const getWindow = React2.useCallback((id) => windowMap.get(id), [windowMap]);
+  const isOpen = React2.useCallback((id) => activeWindowId === id, [activeWindowId]);
+  const registerWindowController = React2.useCallback(
+    (id, controller) => {
+      windowControllersRef.current.set(id, controller);
+      return () => {
+        const registeredController = windowControllersRef.current.get(id);
+        if (registeredController === controller) {
+          windowControllersRef.current.delete(id);
+        }
+      };
+    },
+    []
+  );
+  const closeActiveWindow = React2.useCallback(async () => {
+    const currentActiveWindowId = activeWindowIdRef.current;
+    if (!currentActiveWindowId) {
+      return true;
+    }
+    const activeWindowController = windowControllersRef.current.get(currentActiveWindowId);
+    if (!activeWindowController) {
+      throw new Error(
+        `WindowManagerProvider could not find a controller for "${currentActiveWindowId}".`
+      );
+    }
+    return activeWindowController.close("programmatic");
+  }, []);
+  const openWindow = React2.useCallback(
+    async (id) => {
+      if (!windowMap.has(id)) {
+        throw new Error(`WindowManagerProvider could not find a registered window for "${id}".`);
+      }
+      const currentActiveWindowId = activeWindowIdRef.current;
+      if (currentActiveWindowId === id) {
+        return true;
+      }
+      if (currentActiveWindowId) {
+        const activeWindowController = windowControllersRef.current.get(currentActiveWindowId);
+        if (!activeWindowController) {
+          throw new Error(
+            `WindowManagerProvider could not find a controller for "${currentActiveWindowId}".`
+          );
+        }
+        const closeSucceeded = await activeWindowController.close("window-switch");
+        if (!closeSucceeded) {
+          return false;
+        }
+      }
+      setActiveWindowId(id);
+      return true;
+    },
+    [windowMap]
+  );
+  const setWindowOpenState = React2.useCallback((id, open) => {
+    setActiveWindowId((currentActiveWindowId) => {
+      if (open) {
+        return id;
+      }
+      if (currentActiveWindowId === id) {
+        return null;
+      }
+      return currentActiveWindowId;
+    });
+  }, []);
+  const contextValue = React2.useMemo(
+    () => ({
+      activeWindowId,
+      closeActiveWindow,
+      getWindow,
+      isOpen,
+      openWindow,
+      registerWindowController,
+      setWindowOpenState,
+      windows
+    }),
+    [
+      activeWindowId,
+      closeActiveWindow,
+      getWindow,
+      isOpen,
+      openWindow,
+      registerWindowController,
+      setWindowOpenState,
+      windows
+    ]
+  );
+  return /* @__PURE__ */ jsx3(WindowManagerContext.Provider, { value: contextValue, children });
+}
+function useWindowManager() {
+  const context = React2.useContext(WindowManagerContext);
+  if (!context) {
+    throw new Error("useWindowManager must be used within a WindowManagerProvider.");
+  }
+  return context;
+}
+function ManagedWindowControllerBridge({ id }) {
+  const { close } = useWindow();
+  const { registerWindowController } = useWindowManager();
+  React2.useEffect(
+    () => registerWindowController(id, { close }),
+    [close, id, registerWindowController]
+  );
+  return null;
+}
+function ManagedWindowInstance({
+  definition,
+  isOpen
+}) {
+  const { setWindowOpenState } = useWindowManager();
+  return /* @__PURE__ */ jsxs(
+    WindowProvider,
+    {
+      open: isOpen,
+      onCloseRequest: definition.onCloseRequest,
+      onOpenChange: (nextOpen) => {
+        setWindowOpenState(definition.id, nextOpen);
+      },
+      children: [
+        /* @__PURE__ */ jsx3(ManagedWindowControllerBridge, { id: definition.id }),
+        definition.render()
+      ]
+    }
+  );
+}
+function WindowHost() {
+  const { activeWindowId, windows } = useWindowManager();
+  return /* @__PURE__ */ jsx3(Fragment, { children: windows.map((windowDefinition) => /* @__PURE__ */ jsx3(
+    ManagedWindowInstance,
+    {
+      definition: windowDefinition,
+      isOpen: activeWindowId === windowDefinition.id
+    },
+    windowDefinition.id
+  )) });
+}
+
+// src/layouts/window/core/Window.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var MotionDialogContent = motion.create(DialogContent);
+var WindowSizeContext = React3.createContext(null);
+var DEFAULT_WINDOW_SIZE_CLASS = "h-[min(90vh,48rem)] w-[min(1120px,calc(100%-1rem))] max-w-280 sm:max-w-280";
+function getWindowSizeClass(size) {
+  if (size === void 0 || size === "default") {
+    return DEFAULT_WINDOW_SIZE_CLASS;
+  }
+  return "max-w-[calc(100%-1rem)] sm:max-w-[calc(100%-1rem)]";
+}
+function getWindowSizeStyle(size) {
+  if (size === void 0 || size === "default") {
+    return void 0;
+  }
+  if (size === "content") {
+    return {
+      height: "fit-content",
+      maxHeight: "min(90vh, 48rem)",
+      maxWidth: "min(1120px, calc(100% - 1rem))",
+      width: "fit-content"
+    };
+  }
+  return {
+    maxHeight: "min(90vh, 48rem)",
+    maxWidth: "min(1120px, calc(100% - 1rem))",
+    ...size
+  };
+}
+function WindowCloseButton({
+  className,
+  onClick,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      "data-slot": "window-close-button",
+      variant: "ghost",
+      size: "icon-sm",
+      type,
+      className: cn("absolute top-2 right-2 z-10", className),
+      onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(XIcon, {}),
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  ) });
+}
+function WindowLayout({
+  children,
+  className,
+  forceMount: forceMountProp,
+  showCloseButton = true,
+  size
+}) {
+  const windowManager = React3.useContext(WindowManagerContext);
+  const { blockedInteractionCount, close, forceClose, isOpen, open } = useWindow();
+  const [sizeRequest, setSizeRequest] = React3.useState(null);
+  const forceMount = forceMountProp ?? windowManager !== null;
+  const resolvedSize = sizeRequest?.size ?? size;
+  const sizeContextValue = React3.useMemo(
+    () => ({
+      requestSize: (token, nextSize) => {
+        setSizeRequest((currentRequest) => {
+          if (nextSize === void 0) {
+            return currentRequest?.token === token ? null : currentRequest;
+          }
+          return {
+            size: nextSize,
+            token
+          };
+        });
+      }
+    }),
+    []
+  );
+  const handleOpenChange = React3.useCallback(
+    (nextOpen) => {
+      if (nextOpen) {
+        open();
+        return;
+      }
+      forceClose();
+    },
+    [forceClose, open]
+  );
+  const windowSizeStyle = getWindowSizeStyle(resolvedSize);
+  return /* @__PURE__ */ jsx4(Dialog, { open: isOpen, onCloseRequest: close, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs2(
+    MotionDialogContent,
+    {
+      layout: "size",
+      blockedInteractionCount,
+      ...forceMount === true ? { forceMount: true } : {},
+      showCloseButton: false,
+      ...windowSizeStyle !== void 0 ? { style: windowSizeStyle } : {},
+      transition: {
+        layout: {
+          duration: 0.18,
+          ease: [0, 0.5, 0, 1]
+        }
+      },
+      className: cn(
+        "border-window-border bg-window-background text-window-text shadow-window overflow-hidden rounded-[var(--radius-window)] p-0",
+        getWindowSizeClass(resolvedSize),
+        "flex gap-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { className: "sr-only", children: [
+          /* @__PURE__ */ jsx4(DialogTitle, { children: "Window Layout" }),
+          /* @__PURE__ */ jsx4(DialogDescription, { children: "Displays a modal window with a navigation sidebar and context content." })
+        ] }),
+        /* @__PURE__ */ jsx4(WindowSizeContext.Provider, { value: sizeContextValue, children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "data-slot": "window-layout",
+            className: "relative flex min-h-0 min-w-0 flex-auto overflow-hidden",
+            children: [
+              showCloseButton && /* @__PURE__ */ jsx4(WindowCloseButton, {}),
+              /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-px bg-white/50 dark:bg-white/10" }),
+              /* @__PURE__ */ jsx4("div", { className: "flex min-h-0 min-w-0 flex-auto flex-col md:flex-row", children })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function useWindowSizeRequest(size) {
+  const context = React3.useContext(WindowSizeContext);
+  React3.useLayoutEffect(() => {
+    if (!context) {
+      return;
+    }
+    const token = /* @__PURE__ */ Symbol("window-size-request");
+    context.requestSize(token, size);
+    return () => {
+      context.requestSize(token, void 0);
+    };
+  }, [context, size]);
+}
+
+// src/layouts/window/core/WindowContent.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function WindowContent({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(
+    ScrollArea,
+    {
+      "data-slot": "window-layout-content",
+      className: cn(
+        "bg-window-background relative flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-auto",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx5(ScrollBar, {})
+      ]
+    }
+  );
+}
+
+// src/layouts/window/core/WindowSidebar.tsx
+import React5 from "react";
+import * as Slot2 from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function WindowSidebar({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "aside",
+    {
+      "data-slot": "window-layout-sidebar",
+      className: cn(
+        "border-sidedock-border relative flex max-h-[min(20rem,40vh)] min-h-48 w-full shrink-0 flex-col overflow-auto border-b md:border-r md:border-b-0",
+        sidedockShellClass,
+        "md:h-full md:max-h-none md:w-64",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowSidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    Input,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("h-8 w-full shadow-none", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarContent({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(
+    ScrollArea,
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx6(ScrollBar, {})
+      ]
+    }
+  );
+}
+function WindowSidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "div";
+  return /* @__PURE__ */ jsx6(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidedock-label flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowSidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx6(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidedock-text hover:bg-sidedock-hover-background hover:text-sidedock-text-hover absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowSidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function WindowSidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva(
+  cn(
+    "cursor-pointer peer/menu-button group/menu-button text-sidedock-text flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidedock-hover-background hover:text-sidedock-text-hover active:bg-sidedock-active-background active:text-sidedock-text-active disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidedock-hover-background data-open:hover:text-sidedock-text-hover data-active:bg-sidedock-active-background data-active:text-sidedock-text-active data-active:font-medium [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+    sidedockFocusClass
+  ),
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: cn("bg-background-primary text-text-normal", sidedockOutlineStrokeClass)
+      },
+      size: {
+        default: "h-7 text-sm",
+        sm: "h-6 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function WindowSidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  leadingVisual,
+  trailingVisual,
+  trailingVisualVisibility = "always",
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  const { isOpen } = useWindow();
+  const button = /* @__PURE__ */ jsxs4(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props,
+      children: [
+        leadingVisual ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-slot": "sidebar-menu-button-leading-visual",
+            className: "flex shrink-0 items-center justify-center",
+            children: leadingVisual
+          }
+        ) : null,
+        /* @__PURE__ */ jsx6(Slot2.Slottable, { children: /* @__PURE__ */ jsx6("span", { "data-slot": "sidebar-menu-button-label", className: "flex min-w-0 flex-1 truncate", children }) }),
+        trailingVisual ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-slot": "sidebar-menu-button-trailing-visual",
+            className: cn(
+              "ml-auto flex shrink-0 items-center justify-center",
+              trailingVisualVisibility === "hover" && "invisible opacity-0 group-hover/menu-button:visible group-hover/menu-button:opacity-100 group-focus-visible/menu-button:visible group-focus-visible/menu-button:opacity-100"
+            ),
+            children: trailingVisual
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx6(TooltipContent, { side: "right", align: "center", hidden: !isOpen, ...tooltip })
+  ] });
+}
+function WindowSidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx6(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: cn(
+        "text-sidedock-text peer-hover/menu-button:text-sidedock-text-hover hover:bg-sidedock-hover-background hover:text-sidedock-text-hover absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        showOnHover && "peer-data-active/menu-button:text-sidedock-text-active group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowSidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "text-sidedock-text peer-hover/menu-button:text-sidedock-text-hover peer-data-active/menu-button:text-sidedock-text-active pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowSidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const [width] = React5.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+  const skeletonStyle = {
+    "--skeleton-width": width
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx6(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsx6(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: skeletonStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layouts/window/WindowFlow.tsx
+import * as React7 from "react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { AnimatePresence, motion as motion2 } from "motion/react";
+
+// src/layouts/window/WindowFlowContext.tsx
+import * as React6 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var WindowFlowContext = React6.createContext(null);
+function defineWindowFlowStep(definition) {
+  return definition;
+}
+function WindowFlowProvider({
+  children,
+  defaultStep,
+  onStepChangeRequest,
+  onStepChange,
+  step,
+  steps
+}) {
+  const windowContext = React6.useContext(WindowStateContext);
+  const stepMap = React6.useMemo(() => {
+    const nextStepMap = /* @__PURE__ */ new Map();
+    steps.forEach((stepDefinition) => {
+      if (nextStepMap.has(stepDefinition.id)) {
+        throw new Error(`Duplicate WindowFlow step id "${stepDefinition.id}" is not allowed.`);
+      }
+      nextStepMap.set(stepDefinition.id, stepDefinition);
+    });
+    return nextStepMap;
+  }, [steps]);
+  const initialStep = step ?? defaultStep;
+  if (initialStep === void 0) {
+    throw new Error("WindowFlowProvider requires a step or defaultStep.");
+  }
+  if (!stepMap.has(initialStep)) {
+    throw new Error(`WindowFlowProvider could not find a registered step for "${initialStep}".`);
+  }
+  const [uncontrolledStep, setUncontrolledStep] = React6.useState(initialStep);
+  const [direction, setDirection] = React6.useState("none");
+  const isControlled = step !== void 0;
+  const activeStep = isControlled ? step : uncontrolledStep;
+  const activeStepRef = React6.useRef(activeStep);
+  const stepChangeRequestVersionRef = React6.useRef(0);
+  const indicateBlockedInteraction = windowContext?.indicateBlockedInteraction;
+  const activeStepIndex = steps.findIndex((stepDefinition) => stepDefinition.id === activeStep);
+  if (activeStepIndex === -1) {
+    throw new Error(`WindowFlowProvider could not find a registered step for "${activeStep}".`);
+  }
+  React6.useEffect(() => {
+    activeStepRef.current = activeStep;
+  }, [activeStep]);
+  const getStep = React6.useCallback(
+    (targetStep) => stepMap.get(targetStep),
+    [stepMap]
+  );
+  const setFlowStep = React6.useCallback(
+    async (nextStep2, reason = "programmatic") => {
+      const currentStep = activeStepRef.current;
+      if (nextStep2 === currentStep) {
+        return true;
+      }
+      if (!stepMap.has(nextStep2)) {
+        throw new Error(`WindowFlowProvider could not find a registered step for "${nextStep2}".`);
+      }
+      const currentStepIndex = steps.findIndex(
+        (stepDefinition) => stepDefinition.id === currentStep
+      );
+      const nextStepIndex = steps.findIndex((stepDefinition) => stepDefinition.id === nextStep2);
+      const nextDirection = nextStepIndex > currentStepIndex ? "next" : nextStepIndex < currentStepIndex ? "previous" : "none";
+      const stepChangeRequestVersion = stepChangeRequestVersionRef.current + 1;
+      stepChangeRequestVersionRef.current = stepChangeRequestVersion;
+      const stepChangeAllowed = await onStepChangeRequest?.({
+        from: currentStep,
+        reason,
+        to: nextStep2
+      }) ?? true;
+      if (!stepChangeAllowed) {
+        indicateBlockedInteraction?.();
+        return false;
+      }
+      if (stepChangeRequestVersion !== stepChangeRequestVersionRef.current) {
+        return false;
+      }
+      setDirection(nextDirection);
+      if (!isControlled) {
+        setUncontrolledStep(nextStep2);
+      }
+      onStepChange?.(nextStep2);
+      return true;
+    },
+    [indicateBlockedInteraction, isControlled, onStepChange, onStepChangeRequest, stepMap, steps]
+  );
+  const previousStep = React6.useCallback(
+    (reason = "programmatic") => {
+      const currentStepIndex = steps.findIndex(
+        (stepDefinition) => stepDefinition.id === activeStepRef.current
+      );
+      const previousStepDefinition = steps[currentStepIndex - 1];
+      if (!previousStepDefinition) {
+        return Promise.resolve(false);
+      }
+      return setFlowStep(previousStepDefinition.id, reason);
+    },
+    [setFlowStep, steps]
+  );
+  const nextStep = React6.useCallback(
+    (reason = "programmatic") => {
+      const currentStepIndex = steps.findIndex(
+        (stepDefinition) => stepDefinition.id === activeStepRef.current
+      );
+      const nextStepDefinition = steps[currentStepIndex + 1];
+      if (!nextStepDefinition) {
+        return Promise.resolve(false);
+      }
+      return setFlowStep(nextStepDefinition.id, reason);
+    },
+    [setFlowStep, steps]
+  );
+  const contextValue = React6.useMemo(
+    () => ({
+      canGoNext: activeStepIndex < steps.length - 1,
+      canGoPrevious: activeStepIndex > 0,
+      direction,
+      getStep,
+      isFirstStep: activeStepIndex === 0,
+      isLastStep: activeStepIndex === steps.length - 1,
+      nextStep,
+      previousStep,
+      setStep: setFlowStep,
+      step: activeStep,
+      stepIndex: activeStepIndex,
+      steps
+    }),
+    [activeStep, activeStepIndex, direction, getStep, nextStep, previousStep, setFlowStep, steps]
+  );
+  return /* @__PURE__ */ jsx7(WindowFlowContext.Provider, { value: contextValue, children });
+}
+function useWindowFlow() {
+  const context = React6.useContext(WindowFlowContext);
+  if (!context) {
+    throw new Error("useWindowFlow must be used within a WindowFlowProvider.");
+  }
+  return context;
+}
+
+// src/layouts/window/WindowFlow.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function WindowFlowLayout({ className, ...props }) {
+  const { getStep, step } = useWindowFlow();
+  const activeStep = getStep(step);
+  const windowSize = React7.useMemo(
+    () => getFlowStepWindowSize(activeStep?.windowSize),
+    [activeStep?.windowSize]
+  );
+  useWindowSizeRequest(windowSize);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "window-flow-layout",
+      className: cn("flex min-h-0 min-w-0 flex-auto flex-col", className),
+      ...props
+    }
+  );
+}
+function WindowFlowHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "window-flow-header",
+      className: cn(
+        "border-window-border flex shrink-0 flex-col gap-3 border-b px-6 py-5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WindowFlowContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "window-flow-content",
+      className: cn("relative flex min-h-0 min-w-0 flex-auto flex-col overflow-hidden", className),
+      ...props
+    }
+  );
+}
+function WindowFlowFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "window-flow-footer",
+      className: cn(
+        "border-window-border flex shrink-0 items-center justify-between gap-3 border-t px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS = 0.08;
+var WINDOW_FLOW_ENTER_TRANSITION_DURATION_SECONDS = 0.16;
+var WINDOW_FLOW_ENTER_TRANSITION_DELAY_SECONDS = 0.04;
+var WINDOW_FLOW_EXIT_TRANSITION_OFFSET_PX = 24;
+var WINDOW_FLOW_ENTER_TRANSITION_OFFSET_PX = 48;
+var WINDOW_FLOW_EXIT_X_TRANSITION_EASE = [0, 0.5, 0, 1];
+var WINDOW_FLOW_ENTER_X_TRANSITION_EASE = [0, 0.5, 0, 1];
+var WINDOW_FLOW_EXIT_OPACITY_TRANSITION_EASE = [
+  0.35,
+  0.35,
+  0.65,
+  0.65
+];
+var WINDOW_FLOW_ENTER_OPACITY_TRANSITION_EASE = [
+  0.35,
+  0.35,
+  0.65,
+  0.65
+];
+function getFlowPosition(stepIndex, activeStepIndex) {
+  if (stepIndex < activeStepIndex) {
+    return "previous";
+  }
+  if (stepIndex > activeStepIndex) {
+    return "next";
+  }
+  return "active";
+}
+function getFlowEnterAnimation(direction) {
+  if (direction === "next") {
+    return {
+      x: WINDOW_FLOW_ENTER_TRANSITION_OFFSET_PX,
+      opacity: 0
+    };
+  }
+  if (direction === "previous") {
+    return {
+      x: -WINDOW_FLOW_ENTER_TRANSITION_OFFSET_PX,
+      opacity: 0
+    };
+  }
+  return {
+    x: 0,
+    opacity: 1
+  };
+}
+function getFlowAnimateState(direction) {
+  const delay = direction === "none" ? 0 : WINDOW_FLOW_ENTER_TRANSITION_DELAY_SECONDS;
+  return {
+    x: 0,
+    opacity: 1,
+    transition: {
+      x: {
+        delay,
+        duration: WINDOW_FLOW_ENTER_TRANSITION_DURATION_SECONDS,
+        ease: WINDOW_FLOW_ENTER_X_TRANSITION_EASE
+      },
+      opacity: {
+        delay,
+        duration: WINDOW_FLOW_ENTER_TRANSITION_DURATION_SECONDS,
+        ease: WINDOW_FLOW_ENTER_OPACITY_TRANSITION_EASE
+      }
+    }
+  };
+}
+function getFlowExitAnimation(direction) {
+  if (direction === "next") {
+    return {
+      x: -WINDOW_FLOW_EXIT_TRANSITION_OFFSET_PX,
+      opacity: 0,
+      transition: {
+        x: {
+          duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+          ease: WINDOW_FLOW_EXIT_X_TRANSITION_EASE
+        },
+        opacity: {
+          duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+          ease: WINDOW_FLOW_EXIT_OPACITY_TRANSITION_EASE
+        }
+      }
+    };
+  }
+  if (direction === "previous") {
+    return {
+      x: WINDOW_FLOW_EXIT_TRANSITION_OFFSET_PX,
+      opacity: 0,
+      transition: {
+        x: {
+          duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+          ease: WINDOW_FLOW_EXIT_X_TRANSITION_EASE
+        },
+        opacity: {
+          duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+          ease: WINDOW_FLOW_EXIT_OPACITY_TRANSITION_EASE
+        }
+      }
+    };
+  }
+  return {
+    x: 0,
+    opacity: 0,
+    transition: {
+      x: {
+        duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+        ease: WINDOW_FLOW_EXIT_X_TRANSITION_EASE
+      },
+      opacity: {
+        duration: WINDOW_FLOW_EXIT_TRANSITION_DURATION_SECONDS,
+        ease: WINDOW_FLOW_EXIT_OPACITY_TRANSITION_EASE
+      }
+    }
+  };
+}
+var windowFlowViewVariants = {
+  center: getFlowAnimateState,
+  enter: getFlowEnterAnimation,
+  exit: getFlowExitAnimation
+};
+function getFlowInitialState(direction) {
+  return direction === "none" ? false : "enter";
+}
+function getFlowStepWindowSize(size) {
+  if (typeof size === "object" && size.height === void 0 && size.minHeight !== void 0) {
+    return {
+      ...size,
+      height: size.minHeight
+    };
+  }
+  return size;
+}
+function shouldMeasureFlowStepSize(size) {
+  if (size === "content") {
+    return true;
+  }
+  return typeof size === "object" && size.height === void 0;
+}
+function useElementHeight() {
+  const elementRef = React7.useRef(null);
+  const resizeObserverRef = React7.useRef(null);
+  const [height, setHeight] = React7.useState(null);
+  const updateHeight = React7.useCallback((element) => {
+    const nextHeight = element ? element.getBoundingClientRect().height : null;
+    setHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+  }, []);
+  const ref = React7.useCallback(
+    (element) => {
+      resizeObserverRef.current?.disconnect();
+      resizeObserverRef.current = null;
+      elementRef.current = element;
+      if (!element) {
+        return;
+      }
+      updateHeight(element);
+      if (element && typeof ResizeObserver !== "undefined") {
+        resizeObserverRef.current = new ResizeObserver(([entry]) => {
+          if (!entry) {
+            return;
+          }
+          setHeight(entry.contentRect.height);
+        });
+        resizeObserverRef.current.observe(element);
+      }
+    },
+    [updateHeight]
+  );
+  React7.useEffect(() => {
+    return () => {
+      resizeObserverRef.current?.disconnect();
+    };
+  }, []);
+  React7.useLayoutEffect(() => {
+    updateHeight(elementRef.current);
+  });
+  return [ref, height];
+}
+function getFlowViewLayoutClass(measuredSize, activeViewHeight) {
+  if (!measuredSize) {
+    return "absolute inset-0";
+  }
+  if (activeViewHeight === null) {
+    return "relative w-full";
+  }
+  return "absolute inset-x-0 top-0";
+}
+function WindowFlowView({
+  children,
+  className,
+  direction: directionProp,
+  pageIndex,
+  step,
+  ...props
+}) {
+  const { direction, stepIndex, steps } = useWindowFlow();
+  const ownStepIndex = pageIndex ?? steps.findIndex((stepDefinition) => stepDefinition.id === step);
+  const active = ownStepIndex === stepIndex;
+  const position = getFlowPosition(ownStepIndex, stepIndex);
+  const resolvedDirection = directionProp ?? direction;
+  return /* @__PURE__ */ jsx8(
+    motion2.div,
+    {
+      "data-slot": "window-flow-view",
+      "data-active": active,
+      "data-flow-direction": resolvedDirection,
+      "data-flow-position": position,
+      "data-step": step,
+      "aria-hidden": !active,
+      className: cn(
+        "min-h-0 min-w-0 overflow-auto motion-reduce:transform-none!",
+        active ? "pointer-events-auto" : "pointer-events-none",
+        className
+      ),
+      custom: resolvedDirection,
+      variants: windowFlowViewVariants,
+      initial: getFlowInitialState(resolvedDirection),
+      animate: "center",
+      exit: "exit",
+      ...props,
+      children
+    }
+  );
+}
+function WindowFlowViews({ children, className, style, ...props }) {
+  const { direction, getStep, step, steps } = useWindowFlow();
+  if (steps.length === 0) {
+    throw new Error("WindowFlowViews requires registered steps on WindowFlowProvider.");
+  }
+  const activeStep = getStep(step);
+  if (!activeStep) {
+    throw new Error(`WindowFlowViews could not find a registered step for "${step}".`);
+  }
+  const activeWindowSize = getFlowStepWindowSize(activeStep.windowSize);
+  const [activeViewRef, activeViewHeight] = useElementHeight();
+  const measuredSize = shouldMeasureFlowStepSize(activeWindowSize);
+  return /* @__PURE__ */ jsxs5(
+    motion2.div,
+    {
+      "data-slot": "window-flow-views",
+      "data-flow-direction": direction,
+      className: cn("relative flex min-h-0 min-w-0 flex-auto overflow-hidden", className),
+      style: {
+        ...style,
+        ...measuredSize && activeViewHeight !== null ? { height: activeViewHeight } : null
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx8(AnimatePresence, { custom: direction, initial: false, children: /* @__PURE__ */ jsx8(
+          motion2.div,
+          {
+            custom: direction,
+            "data-slot": "window-flow-view",
+            "data-active": true,
+            "data-flow-direction": direction,
+            "data-flow-position": "active",
+            "data-step": activeStep.id,
+            ref: activeViewRef,
+            className: cn(
+              "min-h-0 min-w-0 overflow-auto motion-reduce:transform-none!",
+              getFlowViewLayoutClass(measuredSize, activeViewHeight)
+            ),
+            variants: windowFlowViewVariants,
+            initial: getFlowInitialState(direction),
+            animate: "center",
+            exit: "exit",
+            children: activeStep.render()
+          },
+          activeStep.id
+        ) })
+      ]
+    }
+  );
+}
+function WindowFlowPreviousButton({
+  children = "Back",
+  disabled,
+  onClick,
+  type = "button",
+  variant = "outline",
+  ...props
+}) {
+  const { canGoPrevious, previousStep } = useWindowFlow();
+  return /* @__PURE__ */ jsxs5(
+    Button,
+    {
+      disabled: disabled ?? !canGoPrevious,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          void previousStep("previous-button").catch((error) => {
+            console.error("Failed to move to the previous window flow step.", error);
+          });
+        }
+      },
+      type,
+      variant,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8(ArrowLeftIcon, {}),
+        children
+      ]
+    }
+  );
+}
+function WindowFlowNextButton({
+  children,
+  disabled,
+  onClick,
+  type = "button",
+  variant = "accent",
+  ...props
+}) {
+  const { canGoNext, isLastStep, nextStep } = useWindowFlow();
+  return /* @__PURE__ */ jsxs5(
+    Button,
+    {
+      disabled: disabled ?? !canGoNext,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          void nextStep("next-button").catch((error) => {
+            console.error("Failed to move to the next window flow step.", error);
+          });
+        }
+      },
+      type,
+      variant,
+      ...props,
+      children: [
+        children ?? (isLastStep ? "Done" : "Next"),
+        /* @__PURE__ */ jsx8(ArrowRightIcon, {})
+      ]
+    }
+  );
+}
+function WindowFlowProgress({ className, ...props }) {
+  const { stepIndex, steps } = useWindowFlow();
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "window-flow-progress",
+      className: cn("flex w-full items-center gap-1.5", className),
+      ...props,
+      children: steps.map((stepDefinition, index) => /* @__PURE__ */ jsx8(
+        "div",
+        {
+          "data-active": index === stepIndex,
+          "data-complete": index < stepIndex,
+          "data-slot": "window-flow-progress-segment",
+          className: cn(
+            "bg-background-tertiary h-1.5 min-w-0 flex-1 rounded-full transition-colors",
+            index <= stepIndex && "bg-interactive-accent"
+          )
+        },
+        stepDefinition.id
+      ))
+    }
+  );
+}
+
+// src/layouts/window/WindowPage.tsx
+import "react";
+
+// src/layouts/window/WindowPageContext.tsx
+import * as React8 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var WindowPageContext = React8.createContext(null);
+function defineWindowPage(definition) {
+  return definition;
+}
+function WindowPageProvider({
+  children,
+  defaultPage,
+  onPageChangeRequest,
+  onPageChange,
+  pages = [],
+  page
+}) {
+  const windowContext = React8.useContext(WindowStateContext);
+  const pageMap = React8.useMemo(() => {
+    const nextPageMap = /* @__PURE__ */ new Map();
+    pages.forEach((pageDefinition) => {
+      if (nextPageMap.has(pageDefinition.id)) {
+        throw new Error(`Duplicate WindowPage id "${pageDefinition.id}" is not allowed.`);
+      }
+      nextPageMap.set(pageDefinition.id, pageDefinition);
+    });
+    return nextPageMap;
+  }, [pages]);
+  const initialPage = page ?? defaultPage;
+  if (initialPage === void 0) {
+    throw new Error("WindowPageProvider requires a page or defaultPage.");
+  }
+  if (pages.length > 0 && !pageMap.has(initialPage)) {
+    throw new Error(`WindowPageProvider could not find a registered page for "${initialPage}".`);
+  }
+  const [uncontrolledPage, setUncontrolledPage] = React8.useState(initialPage);
+  const isControlled = page !== void 0;
+  const activePage = isControlled ? page : uncontrolledPage;
+  const activePageRef = React8.useRef(activePage);
+  const pageChangeRequestVersionRef = React8.useRef(0);
+  const indicateBlockedInteraction = windowContext?.indicateBlockedInteraction;
+  if (pages.length > 0 && !pageMap.has(activePage)) {
+    throw new Error(`WindowPageProvider could not find a registered page for "${activePage}".`);
+  }
+  React8.useEffect(() => {
+    activePageRef.current = activePage;
+  }, [activePage]);
+  const getPage = React8.useCallback(
+    (targetPage) => pageMap.get(targetPage),
+    [pageMap]
+  );
+  const setPage = React8.useCallback(
+    async (nextPage, reason = "programmatic") => {
+      const currentPage = activePageRef.current;
+      if (nextPage === currentPage) {
+        return true;
+      }
+      if (pages.length > 0 && !pageMap.has(nextPage)) {
+        throw new Error(`WindowPageProvider could not find a registered page for "${nextPage}".`);
+      }
+      const pageChangeRequestVersion = pageChangeRequestVersionRef.current + 1;
+      pageChangeRequestVersionRef.current = pageChangeRequestVersion;
+      const pageChangeAllowed = await onPageChangeRequest?.({
+        from: currentPage,
+        reason,
+        to: nextPage
+      }) ?? true;
+      if (!pageChangeAllowed) {
+        indicateBlockedInteraction?.();
+        return false;
+      }
+      if (pageChangeRequestVersion !== pageChangeRequestVersionRef.current) {
+        return false;
+      }
+      if (!isControlled) {
+        setUncontrolledPage(nextPage);
+      }
+      onPageChange?.(nextPage);
+      return true;
+    },
+    [
+      indicateBlockedInteraction,
+      isControlled,
+      onPageChange,
+      onPageChangeRequest,
+      pageMap,
+      pages.length
+    ]
+  );
+  const isActive = React8.useCallback(
+    (targetPage) => activePage === targetPage,
+    [activePage]
+  );
+  const contextValue = React8.useMemo(
+    () => ({
+      getPage,
+      isActive,
+      pages,
+      page: activePage,
+      setPage
+    }),
+    [activePage, getPage, isActive, pages, setPage]
+  );
+  return /* @__PURE__ */ jsx9(WindowPageContext.Provider, { value: contextValue, children });
+}
+function useWindowPage() {
+  const context = React8.useContext(WindowPageContext);
+  if (!context) {
+    throw new Error("useWindowPage must be used within a WindowPageProvider.");
+  }
+  return context;
+}
+
+// src/layouts/window/WindowPage.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function WindowPageNavButton({ onClick, page, ...props }) {
+  const { isActive, setPage } = useWindowPage();
+  return /* @__PURE__ */ jsx10(
+    WindowSidebarMenuButton,
+    {
+      "data-slot": "window-page-nav-button",
+      isActive: isActive(page),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          void setPage(page, "nav-button").catch((error) => {
+            console.error("Failed to change window page from nav button.", error);
+          });
+        }
+      },
+      ...props
+    }
+  );
+}
+function useRegisteredWindowPages() {
+  const context = useWindowPage();
+  if (context.pages.length === 0) {
+    throw new Error(
+      "WindowPageList and WindowPageViews require registered pages on WindowPageProvider."
+    );
+  }
+  return context;
+}
+function WindowPageView({
+  children,
+  className,
+  keepMounted = false,
+  page,
+  ...props
+}) {
+  const { isActive } = useWindowPage();
+  const active = isActive(page);
+  if (!keepMounted && !active) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "window-page-view",
+      "data-active": active,
+      "data-page": page,
+      "aria-hidden": !active,
+      hidden: !active,
+      className: cn(className),
+      ...props,
+      children
+    }
+  );
+}
+function WindowPageList({ className, ...props }) {
+  const { pages } = useRegisteredWindowPages();
+  return /* @__PURE__ */ jsx10(WindowSidebarMenu, { "data-slot": "window-page-list", className: cn(className), ...props, children: pages.map((pageDefinition) => {
+    const Icon = pageDefinition.icon;
+    return /* @__PURE__ */ jsx10(WindowSidebarMenuItem, { children: /* @__PURE__ */ jsx10(
+      WindowPageNavButton,
+      {
+        page: pageDefinition.id,
+        leadingVisual: Icon ? /* @__PURE__ */ jsx10(Icon, { className: "size-4" }) : void 0,
+        children: pageDefinition.label
+      }
+    ) }, pageDefinition.id);
+  }) });
+}
+function WindowPageViews({ children, className, ...props }) {
+  const { pages } = useRegisteredWindowPages();
+  return /* @__PURE__ */ jsxs6("div", { "data-slot": "window-page-views", className: cn(className), ...props, children: [
+    children,
+    pages.map((pageDefinition) => /* @__PURE__ */ jsx10(
+      WindowPageView,
+      {
+        page: pageDefinition.id,
+        keepMounted: pageDefinition.keepMounted,
+        children: pageDefinition.render()
+      },
+      pageDefinition.id
+    ))
+  ] });
+}
+
+export {
+  WindowGroup,
+  WindowGroupLabel,
+  WindowGroupContent,
+  WindowRow,
+  WindowRowContent,
+  WindowRowTitle,
+  WindowRowDescription,
+  WindowRowActions,
+  WindowRowSeparator,
+  WindowStateContext,
+  WindowStateProvider,
+  useWindow,
+  WindowProvider,
+  WindowManagerContext,
+  defineWindow,
+  WindowManagerProvider,
+  useWindowManager,
+  WindowHost,
+  WindowCloseButton,
+  WindowLayout,
+  useWindowSizeRequest,
+  WindowContent,
+  WindowSidebar,
+  WindowSidebarInput,
+  WindowSidebarHeader,
+  WindowSidebarFooter,
+  WindowSidebarContent,
+  WindowSidebarGroup,
+  WindowSidebarGroupLabel,
+  WindowSidebarGroupAction,
+  WindowSidebarGroupContent,
+  WindowSidebarMenu,
+  WindowSidebarMenuItem,
+  WindowSidebarMenuButton,
+  WindowSidebarMenuAction,
+  WindowSidebarMenuBadge,
+  WindowSidebarMenuSkeleton,
+  defineWindowFlowStep,
+  WindowFlowProvider,
+  useWindowFlow,
+  WindowFlowLayout,
+  WindowFlowHeader,
+  WindowFlowContent,
+  WindowFlowFooter,
+  WindowFlowView,
+  WindowFlowViews,
+  WindowFlowPreviousButton,
+  WindowFlowNextButton,
+  WindowFlowProgress,
+  defineWindowPage,
+  WindowPageProvider,
+  useWindowPage,
+  WindowPageNavButton,
+  WindowPageView,
+  WindowPageList,
+  WindowPageViews
+};
+//# sourceMappingURL=chunk-OUFGNJ3V.js.map