@classic-homes/theme-react 0.1.50 → 0.1.51

package/dist/index.mjs

@@ -375,6 +375,895 @@ var PageHeader = React10.forwardRef(
   )
 );
 PageHeader.displayName = "PageHeader";
+
+// src/components/DataPanel.tsx
+import * as React11 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  DEFAULT_PANEL_STATE,
+  DEFAULT_CONSTRAINTS,
+  loadPanelState,
+  savePanelState,
+  getPointerPosition,
+  calculateDragPosition,
+  calculateResize,
+  getResizeCursor,
+  getPinnedResizeHandle,
+  constrainSize,
+  constrainPosition,
+  constrainPinnedWidth,
+  constrainPinnedHeight,
+  detectEdgeSnap,
+  getPinnedPositionStyles,
+  getDetachedPositionStyles,
+  getInitialDetachedPosition,
+  isHorizontalEdge,
+  calculateDetachDistance,
+  calculatePullOffset,
+  calculateDetachedPositionFromPinned,
+  getPinnedPullTransform
+} from "@classic-homes/data-panel-core";
+import { Fragment, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+function useDataPanel(options = {}) {
+  const {
+    persistKey,
+    initialMode = DEFAULT_PANEL_STATE.mode,
+    initialEdge = DEFAULT_PANEL_STATE.edge,
+    initialExpanded = DEFAULT_PANEL_STATE.isExpanded,
+    constraints = {}
+  } = options;
+  const resolvedConstraints = { ...DEFAULT_CONSTRAINTS, ...constraints };
+  const [persistedState] = React11.useState(() => {
+    if (persistKey && typeof window !== "undefined") {
+      return loadPanelState(persistKey);
+    }
+    return null;
+  });
+  const [mode, setMode] = React11.useState(persistedState?.mode ?? initialMode);
+  const [edge, setEdge] = React11.useState(persistedState?.edge ?? initialEdge);
+  const [isExpanded, setIsExpanded] = React11.useState(
+    persistedState?.isExpanded ?? initialExpanded
+  );
+  const [detachedPosition, setDetachedPosition] = React11.useState(
+    persistedState?.detachedPosition ?? DEFAULT_PANEL_STATE.detachedPosition
+  );
+  const [detachedSize, setDetachedSize] = React11.useState(
+    persistedState?.detachedSize ?? DEFAULT_PANEL_STATE.detachedSize
+  );
+  const [pinnedSize, setPinnedSize] = React11.useState(
+    persistedState?.pinnedSize ?? DEFAULT_PANEL_STATE.pinnedSize
+  );
+  const saveTimeoutRef = React11.useRef(null);
+  const debouncedSave = React11.useCallback(() => {
+    if (!persistKey) return;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = setTimeout(() => {
+      savePanelState(persistKey, {
+        mode,
+        variant: "full",
+        edge,
+        isExpanded,
+        detachedPosition,
+        detachedSize,
+        pinnedSize,
+        cardSnapIndex: 0
+      });
+    }, 300);
+  }, [persistKey, mode, edge, isExpanded, detachedPosition, detachedSize, pinnedSize]);
+  const handleSetMode = React11.useCallback(
+    (newMode) => {
+      setMode(newMode);
+      if (newMode === "detached" && typeof window !== "undefined" && detachedPosition.x === DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === DEFAULT_PANEL_STATE.detachedPosition.y) {
+        setDetachedPosition(
+          getInitialDetachedPosition(detachedSize, window.innerWidth, window.innerHeight)
+        );
+      }
+    },
+    [detachedPosition, detachedSize]
+  );
+  const handleSetDetachedPosition = React11.useCallback(
+    (position) => {
+      if (typeof window === "undefined") {
+        setDetachedPosition(position);
+        return;
+      }
+      setDetachedPosition(
+        constrainPosition(position, detachedSize, window.innerWidth, window.innerHeight)
+      );
+    },
+    [detachedSize]
+  );
+  const handleSetDetachedSize = React11.useCallback(
+    (size) => {
+      setDetachedSize(constrainSize(size, resolvedConstraints));
+    },
+    [resolvedConstraints]
+  );
+  const handleSetPinnedSize = React11.useCallback(
+    (size) => {
+      if (typeof window === "undefined") {
+        setPinnedSize(size);
+        return;
+      }
+      if (isHorizontalEdge(edge)) {
+        setPinnedSize(constrainPinnedWidth(size, resolvedConstraints, window.innerWidth));
+      } else {
+        setPinnedSize(constrainPinnedHeight(size, resolvedConstraints, window.innerHeight));
+      }
+    },
+    [edge, resolvedConstraints]
+  );
+  React11.useEffect(() => {
+    debouncedSave();
+  }, [debouncedSave]);
+  return {
+    mode,
+    setMode: handleSetMode,
+    edge,
+    setEdge,
+    isExpanded,
+    setIsExpanded,
+    detachedPosition,
+    setDetachedPosition: handleSetDetachedPosition,
+    detachedSize,
+    setDetachedSize: handleSetDetachedSize,
+    pinnedSize,
+    setPinnedSize: handleSetPinnedSize
+  };
+}
+var ChevronUpIcon = () => /* @__PURE__ */ jsx11(
+  "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__ */ jsx11("path", { d: "m18 15-6-6-6 6" })
+  }
+);
+var MoreVerticalIcon = () => /* @__PURE__ */ jsxs3(
+  "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__ */ jsx11("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "5", r: "1" }),
+      /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "19", r: "1" })
+    ]
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsxs3(
+  "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__ */ jsx11("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx11("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 = React11.forwardRef(
+  ({
+    title,
+    subtitle,
+    mode,
+    edge,
+    isExpanded,
+    onModeChange,
+    onEdgeChange,
+    onExpandedChange,
+    onClose,
+    disableClose = false,
+    disableModeSwitch = false,
+    headerContent,
+    headerActions,
+    className,
+    draggable = false
+  }, ref) => {
+    return /* @__PURE__ */ jsxs3(
+      "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__ */ jsx11("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ jsxs3(Fragment, { children: [
+            title && /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold leading-none truncate", children: title }),
+            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: subtitle })
+          ] }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 shrink-0", children: [
+            headerActions,
+            /* @__PURE__ */ jsx11(
+              "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__ */ jsx11("span", { className: cn("transition-transform", !isExpanded && "rotate-180"), children: /* @__PURE__ */ jsx11(ChevronUpIcon, {}) })
+              }
+            ),
+            !disableModeSwitch && /* @__PURE__ */ jsxs3(DropdownMenuPrimitive.Root, { children: [
+              /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx11(
+                "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__ */ jsx11(MoreVerticalIcon, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
+                DropdownMenuPrimitive.Content,
+                {
+                  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__ */ jsx11(DropdownMenuPrimitive.Label, { className: "px-2 py-1.5 text-sm font-semibold", children: "Panel Position" }),
+                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ jsxs3(
+                      DropdownMenuPrimitive.Item,
+                      {
+                        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__ */ jsx11("span", { className: "ml-auto text-xs", children: "\u2713" })
+                        ]
+                      },
+                      e
+                    )),
+                    /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Separator, { className: "-mx-1 my-1 h-px bg-muted" }),
+                    /* @__PURE__ */ jsxs3(
+                      DropdownMenuPrimitive.Item,
+                      {
+                        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__ */ jsx11("span", { className: "ml-auto text-xs", children: "\u2713" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] }),
+            !disableClose && /* @__PURE__ */ jsx11(
+              "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__ */ jsx11(CloseIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DataPanelHeader.displayName = "DataPanelHeader";
+var DataPanelContent = React11.forwardRef(
+  ({ children, className }, ref) => {
+    return /* @__PURE__ */ jsx11("div", { ref, className: cn("flex-1 overflow-auto p-4", className), children });
+  }
+);
+DataPanelContent.displayName = "DataPanelContent";
+var DataPanelFooter = React11.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__ */ jsx11(
+      "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__ */ jsxs3(Fragment, { children: [
+          footerActions,
+          actions.map((action, index) => /* @__PURE__ */ jsx11(
+            Button,
+            {
+              variant: mapVariant(action.variant),
+              size: "sm",
+              disabled: action.disabled,
+              onClick: action.onClick,
+              children: action.label
+            },
+            index
+          ))
+        ] })
+      }
+    );
+  }
+);
+DataPanelFooter.displayName = "DataPanelFooter";
+var DataPanelTab = React11.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__ */ jsxs3(
+      "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__ */ jsx11("span", { className: cn("shrink-0", iconRotation), children: /* @__PURE__ */ jsx11(ChevronUpIcon, {}) }),
+          /* @__PURE__ */ jsx11("span", { className: cn(isVertical && "rotate-180"), children: title })
+        ]
+      }
+    );
+  }
+);
+DataPanelTab.displayName = "DataPanelTab";
+var DataPanel = React11.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 = { ...DEFAULT_CONSTRAINTS, ...constraints };
+    const [internalOpen, setInternalOpen] = React11.useState(true);
+    const [internalMode, setInternalMode] = React11.useState(DEFAULT_PANEL_STATE.mode);
+    const [internalEdge, setInternalEdge] = React11.useState(DEFAULT_PANEL_STATE.edge);
+    const [internalExpanded, setInternalExpanded] = React11.useState(
+      DEFAULT_PANEL_STATE.isExpanded
+    );
+    const [detachedPosition, setDetachedPosition] = React11.useState(
+      DEFAULT_PANEL_STATE.detachedPosition
+    );
+    const [detachedSize, setDetachedSize] = React11.useState(DEFAULT_PANEL_STATE.detachedSize);
+    const [pinnedSize, setPinnedSize] = React11.useState(DEFAULT_PANEL_STATE.pinnedSize);
+    const [isDragging, setIsDragging] = React11.useState(false);
+    const [isResizing, setIsResizing] = React11.useState(false);
+    const [snapPreview, setSnapPreview] = React11.useState(null);
+    const [isPinnedDragging, setIsPinnedDragging] = React11.useState(false);
+    const [pullOffset, setPullOffset] = React11.useState(0);
+    const dragStateRef = React11.useRef({
+      startPosition: { x: 0, y: 0 },
+      startPanelPosition: { x: 0, y: 0 }
+    });
+    const pinnedDragStateRef = React11.useRef({
+      startPosition: { x: 0, y: 0 },
+      hasDetached: false
+    });
+    const resizeStateRef = React11.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 = React11.useRef(null);
+    const debouncedSave = React11.useCallback(() => {
+      if (!persistKey) return;
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+      saveTimeoutRef.current = setTimeout(() => {
+        savePanelState(persistKey, {
+          mode: internalMode,
+          variant: "full",
+          edge: internalEdge,
+          isExpanded: internalExpanded,
+          detachedPosition,
+          detachedSize,
+          pinnedSize,
+          cardSnapIndex: 0
+        });
+      }, 300);
+    }, [
+      persistKey,
+      internalMode,
+      internalEdge,
+      internalExpanded,
+      detachedPosition,
+      detachedSize,
+      pinnedSize
+    ]);
+    React11.useEffect(() => {
+      if (!persistKey) return;
+      const persisted = 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]);
+    React11.useEffect(() => {
+      if (mode === "detached" && detachedPosition.x === DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === DEFAULT_PANEL_STATE.detachedPosition.y) {
+        setDetachedPosition(
+          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 = 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 = React11.useCallback(
+      (e) => {
+        if (!isDragging) return;
+        const currentPos = getPointerPosition(e);
+        const newPosition = calculateDragPosition(
+          {
+            isDragging: true,
+            startPosition: dragStateRef.current.startPosition,
+            startPanelPosition: dragStateRef.current.startPanelPosition,
+            currentPosition: currentPos
+          },
+          currentPos
+        );
+        const snap = detectEdgeSnap(
+          newPosition,
+          detachedSize,
+          window.innerWidth,
+          window.innerHeight,
+          snapThreshold
+        );
+        setSnapPreview(snap.shouldSnap ? snap.edge : null);
+        setDetachedPosition(
+          constrainPosition(newPosition, detachedSize, window.innerWidth, window.innerHeight)
+        );
+      },
+      [isDragging, detachedSize, snapThreshold]
+    );
+    const handleDragEnd = React11.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 = React11.useCallback(
+      (e) => {
+        if (!isPinnedDragging) return;
+        const currentPos = getPointerPosition(e);
+        const distance = calculateDetachDistance(
+          pinnedDragStateRef.current.startPosition,
+          currentPos,
+          edge
+        );
+        if (distance >= detachThreshold && !pinnedDragStateRef.current.hasDetached) {
+          pinnedDragStateRef.current.hasDetached = true;
+          setIsPinnedDragging(false);
+          setPullOffset(0);
+          const newPosition = 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 = calculatePullOffset(distance, detachThreshold);
+          setPullOffset(pull);
+        }
+      },
+      [isPinnedDragging, edge, detachThreshold, pinnedSize, detachedSize, handleModeChange]
+    );
+    const handlePinnedDragEnd = React11.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 = getPointerPosition(e.nativeEvent);
+      resizeStateRef.current = {
+        handle,
+        startPosition: pos,
+        startSize: mode === "detached" ? { ...detachedSize } : { width: pinnedSize, height: pinnedSize },
+        startPanelPosition: { ...detachedPosition }
+      };
+      document.body.style.cursor = getResizeCursor(handle);
+      document.body.style.userSelect = "none";
+    };
+    const handleResizeMove = React11.useCallback(
+      (e) => {
+        if (!isResizing || !resizeStateRef.current.handle) return;
+        const currentPos = getPointerPosition(e);
+        const { handle, startPosition, startSize, startPanelPosition } = resizeStateRef.current;
+        if (mode === "detached") {
+          const result = calculateResize(
+            {
+              isResizing: true,
+              handle,
+              startPosition,
+              startSize,
+              startPanelPosition
+            },
+            currentPos
+          );
+          const constrainedSize = constrainSize(result.size, resolvedConstraints);
+          const constrainedPosition = constrainPosition(
+            result.position,
+            constrainedSize,
+            window.innerWidth,
+            window.innerHeight
+          );
+          setDetachedSize(constrainedSize);
+          setDetachedPosition(constrainedPosition);
+        } else {
+          const delta = 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 (isHorizontalEdge(edge)) {
+            setPinnedSize(constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth));
+          } else {
+            setPinnedSize(constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight));
+          }
+        }
+      },
+      [isResizing, mode, edge, resolvedConstraints]
+    );
+    const handleResizeEnd = React11.useCallback(() => {
+      if (!isResizing) return;
+      setIsResizing(false);
+      resizeStateRef.current.handle = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      debouncedSave();
+    }, [isResizing, debouncedSave]);
+    React11.useEffect(() => {
+      if (isDragging) {
+        window.addEventListener("pointermove", handleDragMove);
+        window.addEventListener("pointerup", handleDragEnd);
+        return () => {
+          window.removeEventListener("pointermove", handleDragMove);
+          window.removeEventListener("pointerup", handleDragEnd);
+        };
+      }
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    React11.useEffect(() => {
+      if (isPinnedDragging) {
+        window.addEventListener("pointermove", handlePinnedDragMove);
+        window.addEventListener("pointerup", handlePinnedDragEnd);
+        return () => {
+          window.removeEventListener("pointermove", handlePinnedDragMove);
+          window.removeEventListener("pointerup", handlePinnedDragEnd);
+        };
+      }
+    }, [isPinnedDragging, handlePinnedDragMove, handlePinnedDragEnd]);
+    React11.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 = React11.useMemo(() => {
+      if (mode === "pinned") {
+        const baseStyles = getPinnedPositionStyles(edge, pinnedSize);
+        if (pullOffset > 0) {
+          const transform = getPinnedPullTransform(pullOffset, edge);
+          return { ...baseStyles, transform };
+        }
+        return baseStyles;
+      }
+      return 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__ */ jsx11(DataPanelTab, { title, edge, onClick: () => handleExpandedChange(true) });
+    }
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      snapPreview && /* @__PURE__ */ jsx11(
+        "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__ */ jsxs3(
+        "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__ */ jsx11(
+              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__ */ jsx11(DataPanelContent, { children }),
+            /* @__PURE__ */ jsx11(
+              DataPanelFooter,
+              {
+                actions,
+                footerContent,
+                footerActions
+              }
+            ),
+            !disableResize && /* @__PURE__ */ jsx11(Fragment, { children: mode === "detached" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--horizontal resize-handle--top",
+                  onPointerDown: (e) => handleResizeStart(e, "top")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--horizontal resize-handle--bottom",
+                  onPointerDown: (e) => handleResizeStart(e, "bottom")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--vertical resize-handle--left",
+                  onPointerDown: (e) => handleResizeStart(e, "left")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--vertical resize-handle--right",
+                  onPointerDown: (e) => handleResizeStart(e, "right")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--top-left",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "top-left")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--top-right",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "top-right")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--bottom-left",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "bottom-left")
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  className: "resize-handle resize-handle--corner resize-handle--bottom-right",
+                  style: { "--handle-radius": "6px" },
+                  onPointerDown: (e) => handleResizeStart(e, "bottom-right")
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx11(
+              "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, getPinnedResizeHandle(edge))
+              }
+            ) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DataPanel.displayName = "DataPanel";
 export {
   Avatar,
   AvatarFallback,
@@ -387,6 +1276,11 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  DataPanel,
+  DataPanelContent,
+  DataPanelFooter,
+  DataPanelHeader,
+  DataPanelTab,
   Dialog,
   DialogClose,
   DialogContent,
@@ -408,5 +1302,6 @@ export {
   pageHeaderActionsVariants,
   pageHeaderContainerVariants,
   pageHeaderSubtitleVariants,
-  pageHeaderTitleVariants
+  pageHeaderTitleVariants,
+  useDataPanel
 };