@classic-homes/theme-react 0.1.50 → 0.1.52

package/dist/index.js

@@ -41,6 +41,11 @@ __export(index_exports, {
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
+  DataPanel: () => DataPanel,
+  DataPanelContent: () => DataPanelContent,
+  DataPanelFooter: () => DataPanelFooter,
+  DataPanelHeader: () => DataPanelHeader,
+  DataPanelTab: () => DataPanelTab,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -54,6 +59,7 @@ __export(index_exports, {
   Input: () => Input,
   Label: () => Label,
   PageHeader: () => PageHeader,
+  PasswordInput: () => PasswordInput,
   Separator: () => Separator,
   Switch: () => Switch,
   badgeVariants: () => badgeVariants,
@@ -62,7 +68,8 @@ __export(index_exports, {
   pageHeaderActionsVariants: () => pageHeaderActionsVariants,
   pageHeaderContainerVariants: () => pageHeaderContainerVariants,
   pageHeaderSubtitleVariants: () => pageHeaderSubtitleVariants,
-  pageHeaderTitleVariants: () => pageHeaderTitleVariants
+  pageHeaderTitleVariants: () => pageHeaderTitleVariants,
+  useDataPanel: () => useDataPanel
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -178,21 +185,91 @@ var Input = React3.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/components/Label.tsx
+// src/components/PasswordInput.tsx
 var React4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+var EyeOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "svg",
+  {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22" })
+  }
+);
+var PasswordInput = React4.forwardRef(
+  ({ className, disabled, showLabel = "Show password", hideLabel = "Hide password", ...props }, ref) => {
+    const [showPassword, setShowPassword] = React4.useState(false);
+    const toggleVisibility = () => {
+      setShowPassword((prev) => !prev);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: showPassword ? "text" : "password",
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          disabled,
+          ref,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-0 top-0 h-10 w-10 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-r-md disabled:pointer-events-none disabled:opacity-50",
+          onClick: toggleVisibility,
+          disabled,
+          "aria-label": showPassword ? hideLabel : showLabel,
+          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeIcon, {})
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/Label.tsx
+var React5 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority2.cva)(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/Badge.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
   "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -209,9 +286,9 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
     }
   }
 );
-var Badge = React5.forwardRef(
+var Badge = React6.forwardRef(
   ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
@@ -225,10 +302,10 @@ var Badge = React5.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Separator.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Separator = React6.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Separator = React7.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -245,12 +322,14 @@ var Separator = React6.forwardRef(({ className, orientation = "horizontal", deco
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/Switch.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = React7.forwardRef(
-  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    SwitchPrimitives.Root,
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SwitchRoot = SwitchPrimitives.Root;
+var SwitchThumb = SwitchPrimitives.Thumb;
+var Switch = React8.forwardRef(
+  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SwitchRoot,
     {
       className: cn(
         "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
@@ -258,10 +337,10 @@ var Switch = React7.forwardRef(
         size === "sm" && "h-5 w-9",
         className
       ),
-      ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        SwitchPrimitives.Thumb,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        SwitchThumb,
         {
           className: cn(
             "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
@@ -276,10 +355,10 @@ var Switch = React7.forwardRef(
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/Avatar.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -288,7 +367,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -297,7 +376,7 @@ var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -311,15 +390,19 @@ var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__P
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Dialog.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PrimitiveOverlay = DialogPrimitive.Overlay;
+var PrimitiveContent = DialogPrimitive.Content;
+var PrimitiveTitle = DialogPrimitive.Title;
+var PrimitiveDescription = DialogPrimitive.Description;
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Overlay,
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveOverlay,
   {
     ref,
     className: cn(
@@ -330,10 +413,10 @@ var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    DialogPrimitive.Content,
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    PrimitiveContent,
     {
       ref,
       className: cn(
@@ -346,9 +429,9 @@ var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) =
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -356,8 +439,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Title,
+var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveTitle,
   {
     ref,
     className: cn("text-lg font-semibold leading-none tracking-tight", className),
@@ -365,8 +448,8 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Description,
+var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveDescription,
   {
     ref,
     className: cn("text-sm text-muted-foreground", className),
@@ -376,9 +459,9 @@ var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/PageHeader.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var pageHeaderContainerVariants = (0, import_class_variance_authority4.cva)("", {
   variants: {
     variant: {
@@ -427,22 +510,893 @@ var pageHeaderActionsVariants = (0, import_class_variance_authority4.cva)("flex
     variant: "default"
   }
 });
-var PageHeader = React10.forwardRef(
-  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var PageHeader = React11.forwardRef(
+  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "header",
     {
       ref,
       className: cn(pageHeaderContainerVariants({ variant }), className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
       ]
     }
   )
 );
 PageHeader.displayName = "PageHeader";
+
+// src/components/DataPanel.tsx
+var React12 = __toESM(require("react"));
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_data_panel_core = require("@classic-homes/data-panel-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DropdownTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownContent = DropdownMenuPrimitive.Content;
+var DropdownLabel = DropdownMenuPrimitive.Label;
+var DropdownItem = DropdownMenuPrimitive.Item;
+var DropdownSeparator = DropdownMenuPrimitive.Separator;
+function useDataPanel(options = {}) {
+  const {
+    persistKey,
+    initialMode = import_data_panel_core.DEFAULT_PANEL_STATE.mode,
+    initialEdge = import_data_panel_core.DEFAULT_PANEL_STATE.edge,
+    initialExpanded = import_data_panel_core.DEFAULT_PANEL_STATE.isExpanded,
+    constraints = {}
+  } = options;
+  const resolvedConstraints = { ...import_data_panel_core.DEFAULT_CONSTRAINTS, ...constraints };
+  const [persistedState] = React12.useState(() => {
+    if (persistKey && typeof window !== "undefined") {
+      return (0, import_data_panel_core.loadPanelState)(persistKey);
+    }
+    return null;
+  });
+  const [mode, setMode] = React12.useState(persistedState?.mode ?? initialMode);
+  const [edge, setEdge] = React12.useState(persistedState?.edge ?? initialEdge);
+  const [isExpanded, setIsExpanded] = React12.useState(
+    persistedState?.isExpanded ?? initialExpanded
+  );
+  const [detachedPosition, setDetachedPosition] = React12.useState(
+    persistedState?.detachedPosition ?? import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition
+  );
+  const [detachedSize, setDetachedSize] = React12.useState(
+    persistedState?.detachedSize ?? import_data_panel_core.DEFAULT_PANEL_STATE.detachedSize
+  );
+  const [pinnedSize, setPinnedSize] = React12.useState(
+    persistedState?.pinnedSize ?? import_data_panel_core.DEFAULT_PANEL_STATE.pinnedSize
+  );
+  const saveTimeoutRef = React12.useRef(null);
+  const debouncedSave = React12.useCallback(() => {
+    if (!persistKey) return;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = setTimeout(() => {
+      (0, import_data_panel_core.savePanelState)(persistKey, {
+        mode,
+        variant: "full",
+        edge,
+        isExpanded,
+        detachedPosition,
+        detachedSize,
+        pinnedSize,
+        cardSnapIndex: 0
+      });
+    }, 300);
+  }, [persistKey, mode, edge, isExpanded, detachedPosition, detachedSize, pinnedSize]);
+  const handleSetMode = React12.useCallback(
+    (newMode) => {
+      setMode(newMode);
+      if (newMode === "detached" && typeof window !== "undefined" && detachedPosition.x === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.y) {
+        setDetachedPosition(
+          (0, import_data_panel_core.getInitialDetachedPosition)(detachedSize, window.innerWidth, window.innerHeight)
+        );
+      }
+    },
+    [detachedPosition, detachedSize]
+  );
+  const handleSetDetachedPosition = React12.useCallback(
+    (position) => {
+      if (typeof window === "undefined") {
+        setDetachedPosition(position);
+        return;
+      }
+      setDetachedPosition(
+        (0, import_data_panel_core.constrainPosition)(position, detachedSize, window.innerWidth, window.innerHeight)
+      );
+    },
+    [detachedSize]
+  );
+  const handleSetDetachedSize = React12.useCallback(
+    (size) => {
+      setDetachedSize((0, import_data_panel_core.constrainSize)(size, resolvedConstraints));
+    },
+    [resolvedConstraints]
+  );
+  const handleSetPinnedSize = React12.useCallback(
+    (size) => {
+      if (typeof window === "undefined") {
+        setPinnedSize(size);
+        return;
+      }
+      if ((0, import_data_panel_core.isHorizontalEdge)(edge)) {
+        setPinnedSize((0, import_data_panel_core.constrainPinnedWidth)(size, resolvedConstraints, window.innerWidth));
+      } else {
+        setPinnedSize((0, import_data_panel_core.constrainPinnedHeight)(size, resolvedConstraints, window.innerHeight));
+      }
+    },
+    [edge, resolvedConstraints]
+  );
+  React12.useEffect(() => {
+    debouncedSave();
+  }, [debouncedSave]);
+  return {
+    mode,
+    setMode: handleSetMode,
+    edge,
+    setEdge,
+    isExpanded,
+    setIsExpanded,
+    detachedPosition,
+    setDetachedPosition: handleSetDetachedPosition,
+    detachedSize,
+    setDetachedSize: handleSetDetachedSize,
+    pinnedSize,
+    setPinnedSize: handleSetPinnedSize
+  };
+}
+var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m18 15-6-6-6 6" })
+  }
+);
+var MoreVerticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+    ]
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+var edgeLabels = {
+  left: "Pin to left",
+  right: "Pin to right",
+  top: "Pin to top",
+  bottom: "Pin to bottom"
+};
+var DataPanelHeader = React12.forwardRef(
+  ({
+    title,
+    subtitle,
+    mode,
+    edge,
+    isExpanded,
+    onModeChange,
+    onEdgeChange,
+    onExpandedChange,
+    onClose,
+    disableClose = false,
+    disableModeSwitch = false,
+    headerContent,
+    headerActions,
+    className,
+    draggable = false
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-between gap-2 border-b border-border bg-muted/30 px-4 py-3",
+          draggable && "cursor-grab active:cursor-grabbing",
+          className
+        ),
+        "data-panel-header": true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold leading-none truncate", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: subtitle })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+            headerActions,
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                onClick: () => onExpandedChange?.(!isExpanded),
+                "aria-label": isExpanded ? "Collapse panel" : "Expand panel",
+                "aria-expanded": isExpanded,
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("transition-transform", !isExpanded && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronUpIcon, {}) })
+              }
+            ),
+            !disableModeSwitch && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuPrimitive.Root, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "aria-label": "Panel options",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MoreVerticalIcon, {})
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                DropdownContent,
+                {
+                  className: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+                  sideOffset: 4,
+                  align: "end",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownLabel, { className: "px-2 py-1.5 text-sm font-semibold", children: "Panel Position" }),
+                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      DropdownItem,
+                      {
+                        className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                        onSelect: () => {
+                          onModeChange?.("pinned");
+                          onEdgeChange?.(e);
+                        },
+                        children: [
+                          edgeLabels[e],
+                          mode === "pinned" && edge === e && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
+                        ]
+                      },
+                      e
+                    )),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownSeparator, { className: "-mx-1 my-1 h-px bg-muted" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      DropdownItem,
+                      {
+                        className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
+                        onSelect: () => onModeChange?.("detached"),
+                        children: [
+                          "Detach",
+                          mode === "detached" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] }),
+            !disableClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                onClick: onClose,
+                "aria-label": "Close panel",
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DataPanelHeader.displayName = "DataPanelHeader";
+var DataPanelContent = React12.forwardRef(
+  ({ children, className }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("flex-1 overflow-auto p-4", className), children });
+  }
+);
+DataPanelContent.displayName = "DataPanelContent";
+var DataPanelFooter = React12.forwardRef(
+  ({ actions = [], footerContent, footerActions, className }, ref) => {
+    if (!footerContent && actions.length === 0 && !footerActions) {
+      return null;
+    }
+    const mapVariant = (variant) => {
+      if (variant === "primary") return "default";
+      return variant ?? "default";
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-end gap-2 border-t border-border bg-muted/30 px-4 py-3",
+          className
+        ),
+        children: footerContent ? footerContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          footerActions,
+          actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Button,
+            {
+              variant: mapVariant(action.variant),
+              size: "sm",
+              disabled: action.disabled,
+              onClick: action.onClick,
+              children: action.label
+            },
+            index
+          ))
+        ] })
+      }
+    );
+  }
+);
+DataPanelFooter.displayName = "DataPanelFooter";
+var DataPanelTab = React12.forwardRef(
+  ({ title = "Panel", edge, onClick, className }, ref) => {
+    const positionClasses = {
+      left: "left-0 top-1/2 -translate-y-1/2 rounded-r-md border-l-0",
+      right: "right-0 top-1/2 -translate-y-1/2 rounded-l-md border-r-0",
+      top: "top-0 left-1/2 -translate-x-1/2 rounded-b-md border-t-0",
+      bottom: "bottom-0 left-1/2 -translate-x-1/2 rounded-t-md border-b-0"
+    }[edge];
+    const isVertical = edge === "left" || edge === "right";
+    const iconRotation = {
+      left: "rotate-90",
+      right: "-rotate-90",
+      top: "rotate-180",
+      bottom: ""
+    }[edge];
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "fixed z-40 flex items-center justify-center gap-2 border border-border bg-background px-3 py-2 text-sm font-medium shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          positionClasses,
+          isVertical && "[writing-mode:vertical-rl]",
+          className
+        ),
+        onClick,
+        "aria-label": `Expand ${title} panel`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("shrink-0", iconRotation), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronUpIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(isVertical && "rotate-180"), children: title })
+        ]
+      }
+    );
+  }
+);
+DataPanelTab.displayName = "DataPanelTab";
+var DataPanel = React12.forwardRef(
+  ({
+    open: controlledOpen,
+    onOpenChange,
+    mode: controlledMode,
+    onModeChange,
+    edge: controlledEdge,
+    onEdgeChange,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    title,
+    subtitle,
+    children,
+    actions = [],
+    constraints = {},
+    disableClose = false,
+    disableResize = false,
+    disableDrag = false,
+    disableModeSwitch = false,
+    persistKey,
+    snapThreshold = 20,
+    detachThreshold = 40,
+    headerContent,
+    headerActions,
+    footerContent,
+    footerActions,
+    className
+  }, ref) => {
+    const resolvedConstraints = { ...import_data_panel_core.DEFAULT_CONSTRAINTS, ...constraints };
+    const [internalOpen, setInternalOpen] = React12.useState(true);
+    const [internalMode, setInternalMode] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.mode);
+    const [internalEdge, setInternalEdge] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.edge);
+    const [internalExpanded, setInternalExpanded] = React12.useState(
+      import_data_panel_core.DEFAULT_PANEL_STATE.isExpanded
+    );
+    const [detachedPosition, setDetachedPosition] = React12.useState(
+      import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition
+    );
+    const [detachedSize, setDetachedSize] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.detachedSize);
+    const [pinnedSize, setPinnedSize] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.pinnedSize);
+    const [isDragging, setIsDragging] = React12.useState(false);
+    const [isResizing, setIsResizing] = React12.useState(false);
+    const [snapPreview, setSnapPreview] = React12.useState(null);
+    const [isPinnedDragging, setIsPinnedDragging] = React12.useState(false);
+    const [pullOffset, setPullOffset] = React12.useState(0);
+    const dragStateRef = React12.useRef({
+      startPosition: { x: 0, y: 0 },
+      startPanelPosition: { x: 0, y: 0 }
+    });
+    const pinnedDragStateRef = React12.useRef({
+      startPosition: { x: 0, y: 0 },
+      hasDetached: false
+    });
+    const resizeStateRef = React12.useRef({
+      handle: null,
+      startPosition: { x: 0, y: 0 },
+      startSize: { width: 0, height: 0 },
+      startPanelPosition: { x: 0, y: 0 }
+    });
+    const open = controlledOpen ?? internalOpen;
+    const mode = controlledMode ?? internalMode;
+    const edge = controlledEdge ?? internalEdge;
+    const isExpanded = controlledExpanded ?? internalExpanded;
+    const saveTimeoutRef = React12.useRef(null);
+    const debouncedSave = React12.useCallback(() => {
+      if (!persistKey) return;
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+      saveTimeoutRef.current = setTimeout(() => {
+        (0, import_data_panel_core.savePanelState)(persistKey, {
+          mode: internalMode,
+          variant: "full",
+          edge: internalEdge,
+          isExpanded: internalExpanded,
+          detachedPosition,
+          detachedSize,
+          pinnedSize,
+          cardSnapIndex: 0
+        });
+      }, 300);
+    }, [
+      persistKey,
+      internalMode,
+      internalEdge,
+      internalExpanded,
+      detachedPosition,
+      detachedSize,
+      pinnedSize
+    ]);
+    React12.useEffect(() => {
+      if (!persistKey) return;
+      const persisted = (0, import_data_panel_core.loadPanelState)(persistKey);
+      if (persisted) {
+        if (controlledMode === void 0 && persisted.mode) setInternalMode(persisted.mode);
+        if (controlledEdge === void 0 && persisted.edge) setInternalEdge(persisted.edge);
+        if (controlledExpanded === void 0 && persisted.isExpanded !== void 0)
+          setInternalExpanded(persisted.isExpanded);
+        if (persisted.detachedPosition) setDetachedPosition(persisted.detachedPosition);
+        if (persisted.detachedSize) setDetachedSize(persisted.detachedSize);
+        if (persisted.pinnedSize) setPinnedSize(persisted.pinnedSize);
+      }
+    }, [persistKey, controlledMode, controlledEdge, controlledExpanded]);
+    React12.useEffect(() => {
+      if (mode === "detached" && detachedPosition.x === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.y) {
+        setDetachedPosition(
+          (0, import_data_panel_core.getInitialDetachedPosition)(detachedSize, window.innerWidth, window.innerHeight)
+        );
+      }
+    }, [mode, detachedPosition, detachedSize]);
+    const handleOpenChange = (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    };
+    const handleModeChange = (newMode) => {
+      if (controlledMode === void 0) {
+        setInternalMode(newMode);
+      }
+      onModeChange?.(newMode);
+      debouncedSave();
+    };
+    const handleEdgeChange = (newEdge) => {
+      if (controlledEdge === void 0) {
+        setInternalEdge(newEdge);
+      }
+      onEdgeChange?.(newEdge);
+      debouncedSave();
+    };
+    const handleExpandedChange = (newExpanded) => {
+      if (controlledExpanded === void 0) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+      debouncedSave();
+    };
+    const handleDragStart = (e) => {
+      if (disableDrag) return;
+      const target = e.target;
+      if (!target.closest("[data-panel-header]")) return;
+      const pos = (0, import_data_panel_core.getPointerPosition)(e.nativeEvent);
+      if (mode === "detached") {
+        setIsDragging(true);
+        dragStateRef.current = {
+          startPosition: pos,
+          startPanelPosition: { ...detachedPosition }
+        };
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+      } else if (mode === "pinned" && detachThreshold > 0) {
+        setIsPinnedDragging(true);
+        pinnedDragStateRef.current = {
+          startPosition: pos,
+          hasDetached: false
+        };
+        setPullOffset(0);
+        document.body.style.cursor = "grab";
+        document.body.style.userSelect = "none";
+      }
+    };
+    const handleDragMove = React12.useCallback(
+      (e) => {
+        if (!isDragging) return;
+        const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
+        const newPosition = (0, import_data_panel_core.calculateDragPosition)(
+          {
+            isDragging: true,
+            startPosition: dragStateRef.current.startPosition,
+            startPanelPosition: dragStateRef.current.startPanelPosition,
+            currentPosition: currentPos
+          },
+          currentPos
+        );
+        const snap = (0, import_data_panel_core.detectEdgeSnap)(
+          newPosition,
+          detachedSize,
+          window.innerWidth,
+          window.innerHeight,
+          snapThreshold
+        );
+        setSnapPreview(snap.shouldSnap ? snap.edge : null);
+        setDetachedPosition(
+          (0, import_data_panel_core.constrainPosition)(newPosition, detachedSize, window.innerWidth, window.innerHeight)
+        );
+      },
+      [isDragging, detachedSize, snapThreshold]
+    );
+    const handleDragEnd = React12.useCallback(() => {
+      if (!isDragging) return;
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      if (snapPreview) {
+        handleModeChange("pinned");
+        handleEdgeChange(snapPreview);
+        setSnapPreview(null);
+      } else {
+        debouncedSave();
+      }
+    }, [isDragging, snapPreview, handleModeChange, handleEdgeChange, debouncedSave]);
+    const handlePinnedDragMove = React12.useCallback(
+      (e) => {
+        if (!isPinnedDragging) return;
+        const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
+        const distance = (0, import_data_panel_core.calculateDetachDistance)(
+          pinnedDragStateRef.current.startPosition,
+          currentPos,
+          edge
+        );
+        if (distance >= detachThreshold && !pinnedDragStateRef.current.hasDetached) {
+          pinnedDragStateRef.current.hasDetached = true;
+          setIsPinnedDragging(false);
+          setPullOffset(0);
+          const newPosition = (0, import_data_panel_core.calculateDetachedPositionFromPinned)(
+            currentPos,
+            pinnedSize,
+            detachedSize,
+            edge,
+            window.innerWidth,
+            window.innerHeight
+          );
+          setDetachedPosition(newPosition);
+          handleModeChange("detached");
+          setIsDragging(true);
+          dragStateRef.current = {
+            startPosition: currentPos,
+            startPanelPosition: newPosition
+          };
+          document.body.style.cursor = "grabbing";
+        } else if (!pinnedDragStateRef.current.hasDetached) {
+          const pull = (0, import_data_panel_core.calculatePullOffset)(distance, detachThreshold);
+          setPullOffset(pull);
+        }
+      },
+      [isPinnedDragging, edge, detachThreshold, pinnedSize, detachedSize, handleModeChange]
+    );
+    const handlePinnedDragEnd = React12.useCallback(() => {
+      if (!isPinnedDragging) return;
+      setIsPinnedDragging(false);
+      setPullOffset(0);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }, [isPinnedDragging]);
+    const handleResizeStart = (e, handle) => {
+      if (disableResize) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      const pos = (0, import_data_panel_core.getPointerPosition)(e.nativeEvent);
+      resizeStateRef.current = {
+        handle,
+        startPosition: pos,
+        startSize: mode === "detached" ? { ...detachedSize } : { width: pinnedSize, height: pinnedSize },
+        startPanelPosition: { ...detachedPosition }
+      };
+      document.body.style.cursor = (0, import_data_panel_core.getResizeCursor)(handle);
+      document.body.style.userSelect = "none";
+    };
+    const handleResizeMove = React12.useCallback(
+      (e) => {
+        if (!isResizing || !resizeStateRef.current.handle) return;
+        const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
+        const { handle, startPosition, startSize, startPanelPosition } = resizeStateRef.current;
+        if (mode === "detached") {
+          const result = (0, import_data_panel_core.calculateResize)(
+            {
+              isResizing: true,
+              handle,
+              startPosition,
+              startSize,
+              startPanelPosition
+            },
+            currentPos
+          );
+          const constrainedSize = (0, import_data_panel_core.constrainSize)(result.size, resolvedConstraints);
+          const constrainedPosition = (0, import_data_panel_core.constrainPosition)(
+            result.position,
+            constrainedSize,
+            window.innerWidth,
+            window.innerHeight
+          );
+          setDetachedSize(constrainedSize);
+          setDetachedPosition(constrainedPosition);
+        } else {
+          const delta = (0, import_data_panel_core.isHorizontalEdge)(edge) ? currentPos.x - startPosition.x : currentPos.y - startPosition.y;
+          const direction = edge === "left" || edge === "top" ? 1 : -1;
+          const newSize = startSize.width + delta * direction;
+          if ((0, import_data_panel_core.isHorizontalEdge)(edge)) {
+            setPinnedSize((0, import_data_panel_core.constrainPinnedWidth)(newSize, resolvedConstraints, window.innerWidth));
+          } else {
+            setPinnedSize((0, import_data_panel_core.constrainPinnedHeight)(newSize, resolvedConstraints, window.innerHeight));
+          }
+        }
+      },
+      [isResizing, mode, edge, resolvedConstraints]
+    );
+    const handleResizeEnd = React12.useCallback(() => {
+      if (!isResizing) return;
+      setIsResizing(false);
+      resizeStateRef.current.handle = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      debouncedSave();
+    }, [isResizing, debouncedSave]);
+    React12.useEffect(() => {
+      if (isDragging) {
+        window.addEventListener("pointermove", handleDragMove);
+        window.addEventListener("pointerup", handleDragEnd);
+        return () => {
+          window.removeEventListener("pointermove", handleDragMove);
+          window.removeEventListener("pointerup", handleDragEnd);
+        };
+      }
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    React12.useEffect(() => {
+      if (isPinnedDragging) {
+        window.addEventListener("pointermove", handlePinnedDragMove);
+        window.addEventListener("pointerup", handlePinnedDragEnd);
+        return () => {
+          window.removeEventListener("pointermove", handlePinnedDragMove);
+          window.removeEventListener("pointerup", handlePinnedDragEnd);
+        };
+      }
+    }, [isPinnedDragging, handlePinnedDragMove, handlePinnedDragEnd]);
+    React12.useEffect(() => {
+      if (isResizing) {
+        window.addEventListener("pointermove", handleResizeMove);
+        window.addEventListener("pointerup", handleResizeEnd);
+        return () => {
+          window.removeEventListener("pointermove", handleResizeMove);
+          window.removeEventListener("pointerup", handleResizeEnd);
+        };
+      }
+    }, [isResizing, handleResizeMove, handleResizeEnd]);
+    const panelStyles = React12.useMemo(() => {
+      if (mode === "pinned") {
+        const baseStyles = (0, import_data_panel_core.getPinnedPositionStyles)(edge, pinnedSize);
+        if (pullOffset > 0) {
+          const transform = (0, import_data_panel_core.getPinnedPullTransform)(pullOffset, edge);
+          return { ...baseStyles, transform };
+        }
+        return baseStyles;
+      }
+      return (0, import_data_panel_core.getDetachedPositionStyles)(detachedPosition, detachedSize);
+    }, [mode, edge, pinnedSize, detachedPosition, detachedSize, pullOffset]);
+    const pinnedClasses = {
+      left: "left-0 top-0 bottom-0 border-r",
+      right: "right-0 top-0 bottom-0 border-l",
+      top: "top-0 left-0 right-0 border-b",
+      bottom: "bottom-0 left-0 right-0 border-t"
+    }[edge];
+    const animationClass = mode === "pinned" ? {
+      left: "animate-slide-right",
+      right: "animate-slide-left",
+      top: "animate-slide-down",
+      bottom: "animate-slide-up"
+    }[edge] : "animate-scale-in";
+    if (!open) return null;
+    if (!isExpanded && mode === "pinned") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DataPanelTab, { title, edge, onClick: () => handleExpandedChange(true) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      snapPreview && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: cn(
+            "fixed z-40 bg-primary/20 border-2 border-primary border-dashed transition-all",
+            snapPreview === "left" && "left-0 top-0 bottom-0 w-80",
+            snapPreview === "right" && "right-0 top-0 bottom-0 w-80",
+            snapPreview === "top" && "top-0 left-0 right-0 h-64",
+            snapPreview === "bottom" && "bottom-0 left-0 right-0 h-64"
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "div",
+        {
+          ref,
+          className: cn(
+            "fixed z-50 flex flex-col bg-background border border-border shadow-lg overflow-hidden",
+            mode === "pinned" && pinnedClasses,
+            mode === "detached" && "rounded-lg",
+            isPinnedDragging && pullOffset > 0 && "shadow-2xl",
+            animationClass,
+            className
+          ),
+          style: panelStyles,
+          role: mode === "detached" ? "dialog" : void 0,
+          "aria-modal": mode === "detached" ? "true" : void 0,
+          "aria-labelledby": title ? "data-panel-title" : void 0,
+          onPointerDown: handleDragStart,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              DataPanelHeader,
+              {
+                title,
+                subtitle,
+                mode,
+                edge,
+                isExpanded,
+                onModeChange: handleModeChange,
+                onEdgeChange: handleEdgeChange,
+                onExpandedChange: handleExpandedChange,
+                onClose: () => handleOpenChange(false),
+                disableClose,
+                disableModeSwitch,
+                headerContent,
+                headerActions,
+                draggable: !disableDrag && (mode === "detached" || mode === "pinned" && detachThreshold > 0)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DataPanelContent, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              DataPanelFooter,
+              {
+                actions,
+                footerContent,
+                footerActions
+              }
+            ),
+            !disableResize && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: mode === "detached" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--horizontal resize-handle--top",
+                  onPointerDown: (e) => handleResizeStart(e, "top")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--horizontal resize-handle--bottom",
+                  onPointerDown: (e) => handleResizeStart(e, "bottom")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--vertical resize-handle--left",
+                  onPointerDown: (e) => handleResizeStart(e, "left")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--vertical resize-handle--right",
+                  onPointerDown: (e) => handleResizeStart(e, "right")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--top-left",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "top-left")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--top-right",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "top-right")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--bottom-left",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "bottom-left")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--bottom-right",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "bottom-right")
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "div",
+              {
+                className: cn(
+                  "resize-handle",
+                  edge === "left" && "resize-handle--vertical resize-handle--right",
+                  edge === "right" && "resize-handle--vertical resize-handle--left",
+                  edge === "top" && "resize-handle--horizontal resize-handle--bottom",
+                  edge === "bottom" && "resize-handle--horizontal resize-handle--top"
+                ),
+                onPointerDown: (e) => handleResizeStart(e, (0, import_data_panel_core.getPinnedResizeHandle)(edge))
+              }
+            ) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DataPanel.displayName = "DataPanel";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -456,6 +1410,11 @@ PageHeader.displayName = "PageHeader";
   CardFooter,
   CardHeader,
   CardTitle,
+  DataPanel,
+  DataPanelContent,
+  DataPanelFooter,
+  DataPanelHeader,
+  DataPanelTab,
   Dialog,
   DialogClose,
   DialogContent,
@@ -469,6 +1428,7 @@ PageHeader.displayName = "PageHeader";
   Input,
   Label,
   PageHeader,
+  PasswordInput,
   Separator,
   Switch,
   badgeVariants,
@@ -477,5 +1437,6 @@ PageHeader.displayName = "PageHeader";
   pageHeaderActionsVariants,
   pageHeaderContainerVariants,
   pageHeaderSubtitleVariants,
-  pageHeaderTitleVariants
+  pageHeaderTitleVariants,
+  useDataPanel
 });