@hyunsdev/ui 0.1.0

package/dist/layouts/panel/index.js

@@ -0,0 +1,513 @@
+import {
+  cn
+} from "../../chunk-DN2AEEA2.js";
+
+// src/layouts/panel/components/PanelBreadcrumb.tsx
+import "react";
+import * as Slot from "@radix-ui/react-slot";
+import { MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PanelBreadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
+}
+function PanelBreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "text-text-muted flex flex-wrap items-center gap-1 text-sm wrap-break-word",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PanelBreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn(
+        "bg-background-primary hover:bg-background-modifier-hover hover:text-text-normal inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 transition",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PanelBreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(className), ...props });
+}
+function PanelBreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("text-text-normal font-normal", className),
+      ...props
+    }
+  );
+}
+function PanelBreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("text-text-muted select-none [&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? "/"
+    }
+  );
+}
+function PanelBreadcrumbEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+
+// src/layouts/panel/sidebar/PanelSidebar.tsx
+import * as React3 from "react";
+
+// src/layouts/panel/sidebar/PanelSidebarContext.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PANEL_SIDEBAR_MIN_WIDTH = "250px";
+var PANEL_SIDEBAR_DEFAULT_WIDTH = "280px";
+var PANEL_SIDEBAR_MAX_WIDTH = "400px";
+var PANEL_SIDEBAR_RESIZE_STEP = 16;
+var PANEL_SIDEBAR_DRAG_THRESHOLD = 3;
+function toPixelWidth(width) {
+  const parsedWidth = Number.parseInt(width, 10);
+  return Number.isNaN(parsedWidth) ? 0 : parsedWidth;
+}
+var PANEL_SIDEBAR_MIN_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_MIN_WIDTH);
+var PANEL_SIDEBAR_DEFAULT_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_DEFAULT_WIDTH);
+var PANEL_SIDEBAR_MAX_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_MAX_WIDTH);
+function clampPanelSidebarWidth(width) {
+  return Math.min(PANEL_SIDEBAR_MAX_WIDTH_PX, Math.max(PANEL_SIDEBAR_MIN_WIDTH_PX, width));
+}
+var PanelSidebarContext = React2.createContext(null);
+function PanelSidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [_open, _setOpen] = React2.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const [sidebarWidth, setSidebarWidth] = React2.useState(
+    () => clampPanelSidebarWidth(PANEL_SIDEBAR_DEFAULT_WIDTH_PX)
+  );
+  const [hasSidebar, setHasSidebar] = React2.useState(false);
+  const [isResizing, setIsResizing] = React2.useState(false);
+  const [currentSide, setCurrentSide] = React2.useState("right");
+  const dragStateRef = React2.useRef({
+    pointerId: null,
+    startX: 0,
+    startWidth: PANEL_SIDEBAR_DEFAULT_WIDTH_PX
+  });
+  const didDragRef = React2.useRef(false);
+  const setOpen = React2.useCallback(
+    (value) => {
+      const nextOpen = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(nextOpen);
+      } else {
+        _setOpen(nextOpen);
+      }
+    },
+    [open, setOpenProp]
+  );
+  const toggleSidebar = React2.useCallback(() => {
+    setOpen((currentOpen) => !currentOpen);
+  }, [setOpen]);
+  const handleRailPointerDown = React2.useCallback(
+    (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      setIsResizing(true);
+      didDragRef.current = false;
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth: sidebarWidth
+      };
+      const handlePointerMove = (pointerEvent) => {
+        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {
+          return;
+        }
+        const deltaX = pointerEvent.clientX - dragStateRef.current.startX;
+        const signedDeltaX = currentSide === "right" ? -deltaX : deltaX;
+        if (Math.abs(signedDeltaX) >= PANEL_SIDEBAR_DRAG_THRESHOLD) {
+          didDragRef.current = true;
+        }
+        setSidebarWidth(clampPanelSidebarWidth(dragStateRef.current.startWidth + signedDeltaX));
+      };
+      const handlePointerEnd = (pointerEvent) => {
+        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {
+          return;
+        }
+        dragStateRef.current.pointerId = null;
+        setIsResizing(false);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerEnd);
+        window.removeEventListener("pointercancel", handlePointerEnd);
+      };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "ew-resize";
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerEnd);
+      window.addEventListener("pointercancel", handlePointerEnd);
+    },
+    [currentSide, sidebarWidth]
+  );
+  const handleRailClick = React2.useCallback(
+    (event) => {
+      if (didDragRef.current) {
+        didDragRef.current = false;
+        event.preventDefault();
+        return;
+      }
+      toggleSidebar();
+    },
+    [toggleSidebar]
+  );
+  const handleRailKeyDown = React2.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          setSidebarWidth(
+            (currentWidth) => clampPanelSidebarWidth(
+              currentWidth + (currentSide === "right" ? PANEL_SIDEBAR_RESIZE_STEP : -PANEL_SIDEBAR_RESIZE_STEP)
+            )
+          );
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          setSidebarWidth(
+            (currentWidth) => clampPanelSidebarWidth(
+              currentWidth + (currentSide === "right" ? -PANEL_SIDEBAR_RESIZE_STEP : PANEL_SIDEBAR_RESIZE_STEP)
+            )
+          );
+          return;
+        case "Home":
+          event.preventDefault();
+          setSidebarWidth(PANEL_SIDEBAR_MIN_WIDTH_PX);
+          return;
+        case "End":
+          event.preventDefault();
+          setSidebarWidth(PANEL_SIDEBAR_MAX_WIDTH_PX);
+          return;
+        default:
+      }
+    },
+    [currentSide]
+  );
+  const state = open ? "expanded" : "collapsed";
+  const wrapperStyle = React2.useMemo(
+    () => ({
+      ...style,
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth, style]
+  );
+  const contextValue = React2.useMemo(
+    () => ({
+      currentSide,
+      hasSidebar,
+      handleRailClick,
+      handleRailKeyDown,
+      handleRailPointerDown,
+      isResizing,
+      state,
+      open,
+      setHasSidebar,
+      setCurrentSide,
+      setOpen,
+      sidebarWidth,
+      toggleSidebar
+    }),
+    [
+      currentSide,
+      hasSidebar,
+      handleRailClick,
+      handleRailKeyDown,
+      handleRailPointerDown,
+      isResizing,
+      state,
+      open,
+      setHasSidebar,
+      setCurrentSide,
+      setOpen,
+      sidebarWidth,
+      toggleSidebar
+    ]
+  );
+  return /* @__PURE__ */ jsx2(PanelSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: wrapperStyle,
+      className: cn("group/sidebar-wrapper flex h-full min-h-0 w-full", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function usePanelSidebar() {
+  const context = React2.useContext(PanelSidebarContext);
+  if (!context) {
+    throw new Error("usePanelSidebar must be used within a PanelSidebarProvider");
+  }
+  return context;
+}
+
+// src/layouts/panel/sidebar/PanelSidebar.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PanelSidebar({
+  side = "right",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isResizing, setCurrentSide, setHasSidebar, state } = usePanelSidebar();
+  React3.useEffect(() => {
+    setCurrentSide(side);
+  }, [setCurrentSide, side]);
+  React3.useEffect(() => {
+    setHasSidebar(true);
+    return () => {
+      setHasSidebar(false);
+    };
+  }, [setHasSidebar]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "group peer text-panel-text relative hidden h-full md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent",
+              isResizing ? "transition-none" : "transition-[width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            "data-side": side,
+            className: cn(
+              "absolute inset-y-0 z-[var(--layer-sidebar)] hidden h-full w-(--sidebar-width) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              isResizing ? "transition-none" : "transition-[left,right,width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-panel-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: cn(
+                  "group-data-[variant=floating]:ring-panel-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+                ),
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelSidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-panel-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PanelSidebarRail({ className, ...props }) {
+  const { currentSide, handleRailClick, handleRailKeyDown, handleRailPointerDown, sidebarWidth } = usePanelSidebar();
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Resize Sidebar",
+      "aria-orientation": "vertical",
+      "aria-valuemax": 400,
+      "aria-valuemin": 250,
+      "aria-valuenow": sidebarWidth,
+      tabIndex: 0,
+      onClick: handleRailClick,
+      onKeyDown: handleRailKeyDown,
+      onPointerDown: handleRailPointerDown,
+      title: "Resize Sidebar",
+      className: cn(
+        "hover:after:bg-border absolute inset-y-0 z-[calc(var(--layer-sidebar)+10)] hidden w-4 touch-none transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        currentSide === "left" ? "-right-4 cursor-w-resize" : "left-0 cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-panel-background group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/layouts/panel/core/Panel.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Panel({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx4(PanelSidebarProvider, { children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel",
+      className: cn(
+        "bg-panel-background text-text-normal shadow-panel rounded-panel relative z-[calc(var(--layer-sidebar)+1)] flex h-full w-full flex-col",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function PanelBody({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel-body",
+      className: cn("relative flex min-h-0 flex-1 overflow-hidden", className),
+      ...props,
+      children
+    }
+  );
+}
+function PanelFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel-footer",
+      className: cn("border-panel-border relative flex h-8 w-full border-t", className),
+      ...props
+    }
+  );
+}
+function PanelHeader({ className, ...props }) {
+  const { hasSidebar, open } = usePanelSidebar();
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel-header",
+      className: cn(
+        "flex h-11 items-center justify-between border-b border-transparent px-3 text-sm transition-[border-color] duration-100",
+        hasSidebar && open && "border-panel-border border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PanelHeaderLeading({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel-header-leading",
+      className: cn("flex items-center gap-0.5", className),
+      ...props
+    }
+  );
+}
+function PanelHeaderTrailing({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "panel-header-trailing",
+      className: cn("ml-auto flex items-center gap-0.5", className),
+      ...props
+    }
+  );
+}
+export {
+  PANEL_SIDEBAR_DEFAULT_WIDTH,
+  PANEL_SIDEBAR_MAX_WIDTH,
+  PANEL_SIDEBAR_MIN_WIDTH,
+  Panel,
+  PanelBody,
+  PanelBreadcrumb,
+  PanelBreadcrumbEllipsis,
+  PanelBreadcrumbItem,
+  PanelBreadcrumbLink,
+  PanelBreadcrumbList,
+  PanelBreadcrumbPage,
+  PanelBreadcrumbSeparator,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderLeading,
+  PanelHeaderTrailing,
+  PanelSidebar,
+  PanelSidebarContext,
+  PanelSidebarInset,
+  PanelSidebarProvider,
+  PanelSidebarRail,
+  usePanelSidebar
+};
+//# sourceMappingURL=index.js.map

package/dist/layouts/panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layouts/panel/components/PanelBreadcrumb.tsx","../../../src/layouts/panel/sidebar/PanelSidebar.tsx","../../../src/layouts/panel/sidebar/PanelSidebarContext.tsx","../../../src/layouts/panel/core/Panel.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as Slot from \"@radix-ui/react-slot\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nexport function PanelBreadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" className={cn(className)} {...props} />\n}\n\nexport function PanelBreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-text-muted flex flex-wrap items-center gap-1 text-sm wrap-break-word\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function PanelBreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\n        \"bg-background-primary hover:bg-background-modifier-hover hover:text-text-normal inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 transition\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function PanelBreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return <Comp data-slot=\"breadcrumb-link\" className={cn(className)} {...props} />\n}\n\nexport function PanelBreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-text-normal font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PanelBreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"text-text-muted select-none [&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? \"/\"}\n    </li>\n  )\n}\n\nexport function PanelBreadcrumbEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-5 items-center justify-center [&>svg]:size-4\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n","import * as React from \"react\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nimport { usePanelSidebar } from \"./PanelSidebarContext\"\n\nexport function PanelSidebar({\n  side = \"right\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isResizing, setCurrentSide, setHasSidebar, state } = usePanelSidebar()\n\n  React.useEffect(() => {\n    setCurrentSide(side)\n  }, [setCurrentSide, side])\n\n  React.useEffect(() => {\n    setHasSidebar(true)\n\n    return () => {\n      setHasSidebar(false)\n    }\n  }, [setHasSidebar])\n\n  return (\n    <div\n      className=\"group peer text-panel-text relative hidden h-full md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent\",\n          isResizing\n            ? \"transition-none\"\n            : \"transition-[width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"absolute inset-y-0 z-[var(--layer-sidebar)] hidden h-full w-(--sidebar-width) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          isResizing\n            ? \"transition-none\"\n            : \"transition-[left,right,width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"border-panel-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className={cn(\n            \"group-data-[variant=floating]:ring-panel-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\",\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function PanelSidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-panel-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function PanelSidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { currentSide, handleRailClick, handleRailKeyDown, handleRailPointerDown, sidebarWidth } =\n    usePanelSidebar()\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Resize Sidebar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={400}\n      aria-valuemin={250}\n      aria-valuenow={sidebarWidth}\n      tabIndex={0}\n      onClick={handleRailClick}\n      onKeyDown={handleRailKeyDown}\n      onPointerDown={handleRailPointerDown}\n      title=\"Resize Sidebar\"\n      className={cn(\n        \"hover:after:bg-border absolute inset-y-0 z-[calc(var(--layer-sidebar)+10)] hidden w-4 touch-none transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        currentSide === \"left\" ? \"-right-4 cursor-w-resize\" : \"left-0 cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-panel-background group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n","import React from \"react\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nexport const PANEL_SIDEBAR_MIN_WIDTH = \"250px\"\nexport const PANEL_SIDEBAR_DEFAULT_WIDTH = \"280px\"\nexport const PANEL_SIDEBAR_MAX_WIDTH = \"400px\"\n\nexport type PanelSidebarContextProps = {\n  currentSide: \"left\" | \"right\"\n  hasSidebar: boolean\n  isResizing: boolean\n  sidebarWidth: number\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>\n  toggleSidebar: () => void\n  setHasSidebar: React.Dispatch<React.SetStateAction<boolean>>\n  setCurrentSide: React.Dispatch<React.SetStateAction<\"left\" | \"right\">>\n  handleRailClick: (event: React.MouseEvent<HTMLButtonElement>) => void\n  handleRailKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void\n  handleRailPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void\n}\n\nconst PANEL_SIDEBAR_RESIZE_STEP = 16\nconst PANEL_SIDEBAR_DRAG_THRESHOLD = 3\n\ntype PanelSidebarDragState = {\n  pointerId: number | null\n  startX: number\n  startWidth: number\n}\n\ntype PanelSidebarWrapperStyle = React.CSSProperties & {\n  readonly \"--sidebar-width\"?: string\n}\n\nfunction toPixelWidth(width: string) {\n  const parsedWidth = Number.parseInt(width, 10)\n  return Number.isNaN(parsedWidth) ? 0 : parsedWidth\n}\n\nconst PANEL_SIDEBAR_MIN_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_MIN_WIDTH)\nconst PANEL_SIDEBAR_DEFAULT_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_DEFAULT_WIDTH)\nconst PANEL_SIDEBAR_MAX_WIDTH_PX = toPixelWidth(PANEL_SIDEBAR_MAX_WIDTH)\n\nfunction clampPanelSidebarWidth(width: number) {\n  return Math.min(PANEL_SIDEBAR_MAX_WIDTH_PX, Math.max(PANEL_SIDEBAR_MIN_WIDTH_PX, width))\n}\n\nexport const PanelSidebarContext = React.createContext<PanelSidebarContextProps | null>(null)\n\nexport function PanelSidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const [sidebarWidth, setSidebarWidth] = React.useState(() =>\n    clampPanelSidebarWidth(PANEL_SIDEBAR_DEFAULT_WIDTH_PX),\n  )\n  const [hasSidebar, setHasSidebar] = React.useState(false)\n  const [isResizing, setIsResizing] = React.useState(false)\n  const [currentSide, setCurrentSide] = React.useState<\"left\" | \"right\">(\"right\")\n  const dragStateRef = React.useRef<PanelSidebarDragState>({\n    pointerId: null,\n    startX: 0,\n    startWidth: PANEL_SIDEBAR_DEFAULT_WIDTH_PX,\n  })\n  const didDragRef = React.useRef(false)\n\n  const setOpen = React.useCallback<React.Dispatch<React.SetStateAction<boolean>>>(\n    (value) => {\n      const nextOpen = typeof value === \"function\" ? value(open) : value\n\n      if (setOpenProp) {\n        setOpenProp(nextOpen)\n      } else {\n        _setOpen(nextOpen)\n      }\n    },\n    [open, setOpenProp],\n  )\n\n  const toggleSidebar = React.useCallback(() => {\n    setOpen((currentOpen) => !currentOpen)\n  }, [setOpen])\n\n  const handleRailPointerDown = React.useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      if (event.button !== 0) {\n        return\n      }\n\n      event.preventDefault()\n      setIsResizing(true)\n      didDragRef.current = false\n      dragStateRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startWidth: sidebarWidth,\n      }\n\n      const handlePointerMove = (pointerEvent: PointerEvent) => {\n        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {\n          return\n        }\n\n        const deltaX = pointerEvent.clientX - dragStateRef.current.startX\n        const signedDeltaX = currentSide === \"right\" ? -deltaX : deltaX\n\n        if (Math.abs(signedDeltaX) >= PANEL_SIDEBAR_DRAG_THRESHOLD) {\n          didDragRef.current = true\n        }\n\n        setSidebarWidth(clampPanelSidebarWidth(dragStateRef.current.startWidth + signedDeltaX))\n      }\n\n      const handlePointerEnd = (pointerEvent: PointerEvent) => {\n        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {\n          return\n        }\n\n        dragStateRef.current.pointerId = null\n        setIsResizing(false)\n        document.body.style.userSelect = \"\"\n        document.body.style.cursor = \"\"\n\n        window.removeEventListener(\"pointermove\", handlePointerMove)\n        window.removeEventListener(\"pointerup\", handlePointerEnd)\n        window.removeEventListener(\"pointercancel\", handlePointerEnd)\n      }\n\n      document.body.style.userSelect = \"none\"\n      document.body.style.cursor = \"ew-resize\"\n\n      window.addEventListener(\"pointermove\", handlePointerMove)\n      window.addEventListener(\"pointerup\", handlePointerEnd)\n      window.addEventListener(\"pointercancel\", handlePointerEnd)\n    },\n    [currentSide, sidebarWidth],\n  )\n\n  const handleRailClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (didDragRef.current) {\n        didDragRef.current = false\n        event.preventDefault()\n        return\n      }\n\n      toggleSidebar()\n    },\n    [toggleSidebar],\n  )\n\n  const handleRailKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      switch (event.key) {\n        case \"ArrowLeft\":\n          event.preventDefault()\n          setSidebarWidth((currentWidth) =>\n            clampPanelSidebarWidth(\n              currentWidth +\n                (currentSide === \"right\" ? PANEL_SIDEBAR_RESIZE_STEP : -PANEL_SIDEBAR_RESIZE_STEP),\n            ),\n          )\n          return\n        case \"ArrowRight\":\n          event.preventDefault()\n          setSidebarWidth((currentWidth) =>\n            clampPanelSidebarWidth(\n              currentWidth +\n                (currentSide === \"right\" ? -PANEL_SIDEBAR_RESIZE_STEP : PANEL_SIDEBAR_RESIZE_STEP),\n            ),\n          )\n          return\n        case \"Home\":\n          event.preventDefault()\n          setSidebarWidth(PANEL_SIDEBAR_MIN_WIDTH_PX)\n          return\n        case \"End\":\n          event.preventDefault()\n          setSidebarWidth(PANEL_SIDEBAR_MAX_WIDTH_PX)\n          return\n        default:\n      }\n    },\n    [currentSide],\n  )\n\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const wrapperStyle = React.useMemo<PanelSidebarWrapperStyle>(\n    () => ({\n      ...style,\n      \"--sidebar-width\": `${sidebarWidth}px`,\n    }),\n    [sidebarWidth, style],\n  )\n\n  const contextValue = React.useMemo<PanelSidebarContextProps>(\n    () => ({\n      currentSide,\n      hasSidebar,\n      handleRailClick,\n      handleRailKeyDown,\n      handleRailPointerDown,\n      isResizing,\n      state,\n      open,\n      setHasSidebar,\n      setCurrentSide,\n      setOpen,\n      sidebarWidth,\n      toggleSidebar,\n    }),\n    [\n      currentSide,\n      hasSidebar,\n      handleRailClick,\n      handleRailKeyDown,\n      handleRailPointerDown,\n      isResizing,\n      state,\n      open,\n      setHasSidebar,\n      setCurrentSide,\n      setOpen,\n      sidebarWidth,\n      toggleSidebar,\n    ],\n  )\n\n  return (\n    <PanelSidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={wrapperStyle}\n        className={cn(\"group/sidebar-wrapper flex h-full min-h-0 w-full\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </PanelSidebarContext.Provider>\n  )\n}\n\nexport function usePanelSidebar() {\n  const context = React.useContext(PanelSidebarContext)\n\n  if (!context) {\n    throw new Error(\"usePanelSidebar must be used within a PanelSidebarProvider\")\n  }\n\n  return context\n}\n","import { cn } from \"@hyunsdev/ui/lib/utils\"\n\nimport { PanelSidebarProvider, usePanelSidebar } from \"../sidebar\"\n\nexport function Panel({ children, className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <PanelSidebarProvider>\n      <div\n        data-slot=\"panel\"\n        className={cn(\n          \"bg-panel-background text-text-normal shadow-panel rounded-panel relative z-[calc(var(--layer-sidebar)+1)] flex h-full w-full flex-col\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PanelSidebarProvider>\n  )\n}\n\nexport function PanelBody({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"panel-body\"\n      className={cn(\"relative flex min-h-0 flex-1 overflow-hidden\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PanelFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"panel-footer\"\n      className={cn(\"border-panel-border relative flex h-8 w-full border-t\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PanelHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { hasSidebar, open } = usePanelSidebar()\n\n  return (\n    <div\n      data-slot=\"panel-header\"\n      className={cn(\n        \"flex h-11 items-center justify-between border-b border-transparent px-3 text-sm transition-[border-color] duration-100\",\n        hasSidebar && open && \"border-panel-border border-border\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function PanelHeaderLeading({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"panel-header-leading\"\n      className={cn(\"flex items-center gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PanelHeaderTrailing({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"panel-header-trailing\"\n      className={cn(\"ml-auto flex items-center gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAAA,OAAuB;AAEvB,YAAY,UAAU;AACtB,SAAS,0BAA0B;AAK1B,cA0EL,YA1EK;AADF,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACpF,SAAO,oBAAC,SAAI,cAAW,cAAa,aAAU,cAAa,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO;AAClG;AAEO,SAAS,oBAAoB,EAAE,WAAW,GAAG,MAAM,GAA+B;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,oBAAoB,EAAE,WAAW,GAAG,MAAM,GAA+B;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,OAAO,UAAe,YAAO;AAEnC,SAAO,oBAAC,QAAK,aAAU,mBAAkB,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO;AAChF;AAEO,SAAS,oBAAoB,EAAE,WAAW,GAAG,MAAM,GAAiC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,gDAAgD,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;AAEO,SAAS,wBAAwB,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB;AAAA,QACpB,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAChC;AAEJ;;;AC7FA,YAAYA,YAAW;;;ACAvB,OAAOC,YAAW;AAqPZ,gBAAAC,YAAA;AAjPC,IAAM,0BAA0B;AAChC,IAAM,8BAA8B;AACpC,IAAM,0BAA0B;AAkBvC,IAAM,4BAA4B;AAClC,IAAM,+BAA+B;AAYrC,SAAS,aAAa,OAAe;AACnC,QAAM,cAAc,OAAO,SAAS,OAAO,EAAE;AAC7C,SAAO,OAAO,MAAM,WAAW,IAAI,IAAI;AACzC;AAEA,IAAM,6BAA6B,aAAa,uBAAuB;AACvE,IAAM,iCAAiC,aAAa,2BAA2B;AAC/E,IAAM,6BAA6B,aAAa,uBAAuB;AAEvE,SAAS,uBAAuB,OAAe;AAC7C,SAAO,KAAK,IAAI,4BAA4B,KAAK,IAAI,4BAA4B,KAAK,CAAC;AACzF;AAEO,IAAM,sBAAsBC,OAAM,cAA+C,IAAI;AAErF,SAAS,qBAAqB;AAAA,EACnC,cAAc;AAAA,EACd,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAIA,OAAM,SAAS,WAAW;AACpD,QAAM,OAAO,YAAY;AACzB,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM;AAAA,IAAS,MACrD,uBAAuB,8BAA8B;AAAA,EACvD;AACA,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAS,KAAK;AACxD,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAA2B,OAAO;AAC9E,QAAM,eAAeA,OAAM,OAA8B;AAAA,IACvD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,YAAY;AAAA,EACd,CAAC;AACD,QAAM,aAAaA,OAAM,OAAO,KAAK;AAErC,QAAM,UAAUA,OAAM;AAAA,IACpB,CAAC,UAAU;AACT,YAAM,WAAW,OAAO,UAAU,aAAa,MAAM,IAAI,IAAI;AAE7D,UAAI,aAAa;AACf,oBAAY,QAAQ;AAAA,MACtB,OAAO;AACL,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,WAAW;AAAA,EACpB;AAEA,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,YAAQ,CAAC,gBAAgB,CAAC,WAAW;AAAA,EACvC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,wBAAwBA,OAAM;AAAA,IAClC,CAAC,UAAiD;AAChD,UAAI,MAAM,WAAW,GAAG;AACtB;AAAA,MACF;AAEA,YAAM,eAAe;AACrB,oBAAc,IAAI;AAClB,iBAAW,UAAU;AACrB,mBAAa,UAAU;AAAA,QACrB,WAAW,MAAM;AAAA,QACjB,QAAQ,MAAM;AAAA,QACd,YAAY;AAAA,MACd;AAEA,YAAM,oBAAoB,CAAC,iBAA+B;AACxD,YAAI,aAAa,cAAc,aAAa,QAAQ,WAAW;AAC7D;AAAA,QACF;AAEA,cAAM,SAAS,aAAa,UAAU,aAAa,QAAQ;AAC3D,cAAM,eAAe,gBAAgB,UAAU,CAAC,SAAS;AAEzD,YAAI,KAAK,IAAI,YAAY,KAAK,8BAA8B;AAC1D,qBAAW,UAAU;AAAA,QACvB;AAEA,wBAAgB,uBAAuB,aAAa,QAAQ,aAAa,YAAY,CAAC;AAAA,MACxF;AAEA,YAAM,mBAAmB,CAAC,iBAA+B;AACvD,YAAI,aAAa,cAAc,aAAa,QAAQ,WAAW;AAC7D;AAAA,QACF;AAEA,qBAAa,QAAQ,YAAY;AACjC,sBAAc,KAAK;AACnB,iBAAS,KAAK,MAAM,aAAa;AACjC,iBAAS,KAAK,MAAM,SAAS;AAE7B,eAAO,oBAAoB,eAAe,iBAAiB;AAC3D,eAAO,oBAAoB,aAAa,gBAAgB;AACxD,eAAO,oBAAoB,iBAAiB,gBAAgB;AAAA,MAC9D;AAEA,eAAS,KAAK,MAAM,aAAa;AACjC,eAAS,KAAK,MAAM,SAAS;AAE7B,aAAO,iBAAiB,eAAe,iBAAiB;AACxD,aAAO,iBAAiB,aAAa,gBAAgB;AACrD,aAAO,iBAAiB,iBAAiB,gBAAgB;AAAA,IAC3D;AAAA,IACA,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,UAA+C;AAC9C,UAAI,WAAW,SAAS;AACtB,mBAAW,UAAU;AACrB,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAAkD;AACjD,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB;AAAA,YAAgB,CAAC,iBACf;AAAA,cACE,gBACG,gBAAgB,UAAU,4BAA4B,CAAC;AAAA,YAC5D;AAAA,UACF;AACA;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB;AAAA,YAAgB,CAAC,iBACf;AAAA,cACE,gBACG,gBAAgB,UAAU,CAAC,4BAA4B;AAAA,YAC5D;AAAA,UACF;AACA;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,0BAAgB,0BAA0B;AAC1C;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,0BAAgB,0BAA0B;AAC1C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,QAAQ,OAAO,aAAa;AAElC,QAAM,eAAeA,OAAM;AAAA,IACzB,OAAO;AAAA,MACL,GAAG;AAAA,MACH,mBAAmB,GAAG,YAAY;AAAA,IACpC;AAAA,IACA,CAAC,cAAc,KAAK;AAAA,EACtB;AAEA,QAAM,eAAeA,OAAM;AAAA,IACzB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAD,KAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAC1E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,SAAS,kBAAkB;AAChC,QAAM,UAAUC,OAAM,WAAW,mBAAmB;AAEpD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4DAA4D;AAAA,EAC9E;AAEA,SAAO;AACT;;;ADxOI,SASE,OAAAC,MATF,QAAAC,aAAA;AA3BG,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIG;AACD,QAAM,EAAE,YAAY,gBAAgB,eAAe,MAAM,IAAI,gBAAgB;AAE7E,EAAM,iBAAU,MAAM;AACpB,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,EAAM,iBAAU,MAAM;AACpB,kBAAc,IAAI;AAElB,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB,UAAU,cAAc,cAAc;AAAA,MACxD,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,aAAU;AAAA,MAGV;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,aACI,oBACA;AAAA,cACJ;AAAA,cACA;AAAA,cACA,YAAY,cAAc,YAAY,UAClC,qFACA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,aAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,aACI,oBACA;AAAA;AAAA,cAEJ,YAAY,cAAc,YAAY,UAClC,6FACA;AAAA,cACJ;AAAA,YACF;AAAA,YACC,GAAG;AAAA,YAEJ,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAa;AAAA,gBACb,aAAU;AAAA,gBACV,WAAW;AAAA,kBACT;AAAA,gBACF;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAiC;AACvF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAAmC;AACxF,QAAM,EAAE,aAAa,iBAAiB,mBAAmB,uBAAuB,aAAa,IAC3F,gBAAgB;AAElB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAa;AAAA,MACb,aAAU;AAAA,MACV,cAAW;AAAA,MACX,oBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAe;AAAA,MACf,OAAM;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,SAAS,6BAA6B;AAAA,QACtD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AE3HM,gBAAAE,YAAA;AAHC,SAAS,MAAM,EAAE,UAAU,WAAW,GAAG,MAAM,GAAgC;AACpF,SACE,gBAAAA,KAAC,wBACC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,SAAS,UAAU,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AACxF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gDAAgD,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAChF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,yDAAyD,SAAS;AAAA,MAC/E,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAChF,QAAM,EAAE,YAAY,KAAK,IAAI,gBAAgB;AAE7C,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,cAAc,QAAQ;AAAA,QACtB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACvF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,oBAAoB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["React","React","jsx","React","jsx","jsxs","jsx"]}

package/dist/layouts/presentation/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import { W as WindowLayout, a as WindowProvider, b as WindowContextValue } from '../../WindowContext-DybYtZJa.js';
+import '../../components/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare function PresentationProvider({ ...props }: ComponentProps<typeof WindowProvider>): React.JSX.Element;
+declare function usePresentation(): WindowContextValue;
+declare function PresentationLayout({ children, className, ...props }: ComponentProps<typeof WindowLayout>): React.JSX.Element;
+declare function PresentationContent({ children }: ComponentProps<"div">): React.JSX.Element;
+declare function PresentationToolbar({ children, className, ...props }: ComponentProps<"div">): React.JSX.Element;
+
+export { PresentationContent, PresentationLayout, PresentationProvider, PresentationToolbar, usePresentation };

package/dist/layouts/presentation/index.js

@@ -0,0 +1,100 @@
+import {
+  WindowLayout,
+  WindowProvider,
+  useWindow
+} from "../../chunk-OUFGNJ3V.js";
+import "../../chunk-BI3KKBIC.js";
+import "../../chunk-KJJB2PVC.js";
+import "../../chunk-GJT7TDBS.js";
+import "../../chunk-PLZMCJSL.js";
+import "../../chunk-YUPLJP3F.js";
+import "../../chunk-6ANDNGHD.js";
+import "../../chunk-D3SP7GL3.js";
+import "../../chunk-TU5CYBB4.js";
+import "../../chunk-O2BG2KSY.js";
+import {
+  cn
+} from "../../chunk-DN2AEEA2.js";
+
+// src/layouts/presentation/PresentationLayout.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var PRESENTATION_TOOLBAR_IDLE_TIMEOUT = 3e3;
+function PresentationProvider({ ...props }) {
+  return /* @__PURE__ */ jsx(WindowProvider, { ...props });
+}
+function usePresentation() {
+  const window2 = useWindow();
+  return window2;
+}
+function PresentationLayout({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    WindowLayout,
+    {
+      ...props,
+      className: cn("h-dvh max-h-dvw! w-dvw max-w-dvw! rounded-none", className),
+      showCloseButton: false,
+      children
+    }
+  );
+}
+function PresentationContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "bg-background-primary relative flex h-full w-full flex-col", children });
+}
+function PresentationToolbar({ children, className, ...props }) {
+  const [isVisible, setIsVisible] = useState(true);
+  const hideTimeoutRef = useRef(null);
+  useEffect(() => {
+    const clearHideTimeout = () => {
+      if (hideTimeoutRef.current !== null) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+    };
+    const resetHideTimeout = () => {
+      setIsVisible(true);
+      clearHideTimeout();
+      hideTimeoutRef.current = setTimeout(() => {
+        setIsVisible(false);
+      }, PRESENTATION_TOOLBAR_IDLE_TIMEOUT);
+    };
+    resetHideTimeout();
+    window.addEventListener("pointermove", resetHideTimeout);
+    return () => {
+      clearHideTimeout();
+      window.removeEventListener("pointermove", resetHideTimeout);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed bottom-0 left-0 z-100 flex w-dvw items-center justify-center transition-opacity duration-200",
+        isVisible ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "bg-background-primary text-text-muted border-border mb-4 flex items-center justify-center rounded-xl border p-1 shadow",
+            className
+          ),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  PresentationContent,
+  PresentationLayout,
+  PresentationProvider,
+  PresentationToolbar,
+  usePresentation
+};
+//# sourceMappingURL=index.js.map