@howells/stacksheet 0.1.0 → 1.0.0

package/dist/index.js

@@ -1,5 +1,1350 @@
-export { createSheetStack } from "./create.js";
-export { resolveConfig } from "./config.js";
-export { getStackTransform, getSlideFrom, getPanelStyles } from "./stacking.js";
-export { useIsMobile, useResolvedSide } from "./media.js";
+// src/springs.ts
+var springs = {
+  soft: { stiffness: 120, damping: 18, mass: 1 },
+  subtle: { stiffness: 300, damping: 30, mass: 1 },
+  natural: { stiffness: 200, damping: 20, mass: 1 },
+  snappy: { stiffness: 400, damping: 28, mass: 0.8 },
+  stiff: { stiffness: 400, damping: 40, mass: 1 }
+};
+
+// src/config.ts
+var DEFAULT_STACKING = {
+  scaleStep: 0.04,
+  offsetStep: 36,
+  opacityStep: 0,
+  radius: 12,
+  renderThreshold: 3
+};
+var DEFAULT_SIDE = {
+  desktop: "right",
+  mobile: "bottom"
+};
+function resolveConfig(config = {}) {
+  const side = typeof config.side === "string" ? { desktop: config.side, mobile: config.side } : { ...DEFAULT_SIDE, ...config.side };
+  const spring = typeof config.spring === "string" ? springs[config.spring] : { ...springs.stiff, ...config.spring };
+  return {
+    maxDepth: config.maxDepth ?? Number.POSITIVE_INFINITY,
+    closeOnEscape: config.closeOnEscape ?? true,
+    closeOnBackdrop: config.closeOnBackdrop ?? true,
+    showOverlay: config.showOverlay ?? true,
+    lockScroll: config.lockScroll ?? true,
+    width: config.width ?? 420,
+    maxWidth: config.maxWidth ?? "90vw",
+    breakpoint: config.breakpoint ?? 768,
+    side,
+    stacking: { ...DEFAULT_STACKING, ...config.stacking },
+    spring,
+    zIndex: config.zIndex ?? 100,
+    ariaLabel: config.ariaLabel ?? "Sheet dialog",
+    onOpenComplete: config.onOpenComplete,
+    onCloseComplete: config.onCloseComplete,
+    drag: config.drag ?? true,
+    closeThreshold: config.closeThreshold ?? 0.25,
+    velocityThreshold: config.velocityThreshold ?? 0.5,
+    dismissible: config.dismissible ?? true,
+    modal: config.modal ?? true,
+    shouldScaleBackground: config.shouldScaleBackground ?? false,
+    scaleBackgroundAmount: config.scaleBackgroundAmount ?? 0.97
+  };
+}
+
+// src/create.tsx
+import { Portal } from "@radix-ui/react-portal";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useStore as useStore2 } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+
+// src/renderer.tsx
+import FocusTrap from "focus-trap-react";
+import { AnimatePresence, motion as m } from "motion/react";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import { useStore } from "zustand";
+
+// src/icons.tsx
+import { jsx } from "react/jsx-runtime";
+function ArrowLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: 16,
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24",
+      width: 16,
+      children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: 16,
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24",
+      width: 16,
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
+}
+
+// src/media.ts
+import { useEffect, useState } from "react";
+function useIsMobile(breakpoint) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mql.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+function useResolvedSide(config) {
+  const isMobile = useIsMobile(config.breakpoint);
+  return isMobile ? config.side.mobile : config.side.desktop;
+}
+
+// src/panel-context.tsx
+import { createContext, useContext } from "react";
+var SheetPanelContext = createContext(
+  null
+);
+function useSheetPanel() {
+  const ctx = useContext(SheetPanelContext);
+  if (!ctx) {
+    throw new Error(
+      "Sheet.* components must be used inside a sheet panel. They should be rendered by a component opened via actions.open(), push(), etc."
+    );
+  }
+  return ctx;
+}
+
+// src/stacking.ts
+function getStackTransform(depth, stacking) {
+  if (depth <= 0) {
+    return { scale: 1, offset: 0, opacity: 1, borderRadius: 0 };
+  }
+  const beyondThreshold = depth >= stacking.renderThreshold;
+  const visualDepth = beyondThreshold ? stacking.renderThreshold - 1 : depth;
+  return {
+    scale: Math.max(0.5, 1 - visualDepth * stacking.scaleStep),
+    offset: visualDepth * stacking.offsetStep,
+    opacity: beyondThreshold ? 0 : Math.max(0, 1 - visualDepth * stacking.opacityStep),
+    borderRadius: stacking.radius
+  };
+}
+function getAnimatedBorderRadius(side, depth, stacking) {
+  if (side === "bottom") {
+    const radius = depth > 0 ? stacking.radius : 16;
+    return {
+      borderTopLeftRadius: radius,
+      borderTopRightRadius: radius,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+  if (depth > 0) {
+    return { borderRadius: stacking.radius };
+  }
+  return { borderRadius: 0 };
+}
+function getSlideFrom(side) {
+  switch (side) {
+    case "right":
+      return { x: "100%" };
+    case "left":
+      return { x: "-100%" };
+    case "bottom":
+      return { y: "100%" };
+    default:
+      return { x: "100%" };
+  }
+}
+function getSlideTarget() {
+  return { x: 0, y: 0 };
+}
+function getPanelStyles(side, config, _depth, index) {
+  const { width, maxWidth, zIndex } = config;
+  const base = {
+    position: "fixed",
+    zIndex: zIndex + 10 + index,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    willChange: "transform",
+    transformOrigin: side === "bottom" ? "center bottom" : `${side} center`
+  };
+  if (side === "bottom") {
+    return {
+      ...base,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      maxHeight: "85vh"
+      // borderRadius is animated via Motion's animate prop for scale correction
+    };
+  }
+  const sideStyles = side === "right" ? { top: 0, right: 0, bottom: 0 } : { top: 0, left: 0, bottom: 0 };
+  return {
+    ...base,
+    ...sideStyles,
+    width,
+    maxWidth
+  };
+}
+
+// src/use-drag.ts
+import { useCallback, useEffect as useEffect2, useRef } from "react";
+var INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
+  "INPUT",
+  "TEXTAREA",
+  "SELECT",
+  "BUTTON",
+  "A"
+]);
+function isInteractiveElement(el) {
+  if (INTERACTIVE_TAGS.has(el.tagName)) {
+    return true;
+  }
+  if (el.isContentEditable) {
+    return true;
+  }
+  if (el.closest("button, a, input, textarea, select, [contenteditable]")) {
+    return true;
+  }
+  if (el.closest("[data-stacksheet-no-drag]")) {
+    return true;
+  }
+  return false;
+}
+function getDismissAxis(side) {
+  switch (side) {
+    case "right":
+      return { axis: "x", sign: 1 };
+    case "left":
+      return { axis: "x", sign: -1 };
+    case "bottom":
+      return { axis: "y", sign: 1 };
+    default:
+      return { axis: "x", sign: 1 };
+  }
+}
+var DEAD_ZONE = 10;
+var MAX_ANGLE_DEG = 35;
+function classifyGesture(dx, dy, axis, sign) {
+  const absDx = Math.abs(dx);
+  const absDy = Math.abs(dy);
+  let angleDeg;
+  if (axis === "y") {
+    angleDeg = absDy === 0 ? 90 : Math.atan(absDx / absDy) * 180 / Math.PI;
+  } else {
+    angleDeg = absDx === 0 ? 90 : Math.atan(absDy / absDx) * 180 / Math.PI;
+  }
+  if (angleDeg > MAX_ANGLE_DEG) {
+    return "none";
+  }
+  const moveInAxis = axis === "x" ? dx : dy;
+  if (moveInAxis * sign < 0) {
+    return "none";
+  }
+  return "drag";
+}
+function getPanelDimension(panel, axis) {
+  if (!panel) {
+    return 300;
+  }
+  return axis === "x" ? panel.offsetWidth : panel.offsetHeight;
+}
+function useDrag(panelRef, config, onDragUpdate) {
+  const startRef = useRef(null);
+  const committedRef = useRef(null);
+  const offsetRef = useRef(0);
+  const { axis, sign } = getDismissAxis(config.side);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!config.enabled) {
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      const target = e.target;
+      if (!target) {
+        return;
+      }
+      const isHandle = !!target.closest("[data-stacksheet-handle]");
+      if (!isHandle && isInteractiveElement(target)) {
+        return;
+      }
+      if (!isHandle) {
+        const scrollable = target.closest("[data-radix-scroll-area-viewport]");
+        if (scrollable && scrollable.scrollTop > 0 && axis === "y") {
+          return;
+        }
+      }
+      startRef.current = { x: e.clientX, y: e.clientY, time: Date.now() };
+      committedRef.current = null;
+      offsetRef.current = 0;
+      e.currentTarget?.setPointerCapture?.(e.pointerId);
+    },
+    [config.enabled, axis]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!startRef.current) {
+        return;
+      }
+      const dx = e.clientX - startRef.current.x;
+      const dy = e.clientY - startRef.current.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (committedRef.current === null && dist < DEAD_ZONE) {
+        return;
+      }
+      if (committedRef.current === null) {
+        committedRef.current = classifyGesture(dx, dy, axis, sign);
+        if (committedRef.current === "none") {
+          startRef.current = null;
+          return;
+        }
+      }
+      if (committedRef.current !== "drag") {
+        return;
+      }
+      const rawOffset = axis === "x" ? dx : dy;
+      const clampedOffset = Math.max(0, rawOffset * sign);
+      offsetRef.current = clampedOffset;
+      onDragUpdate({ offset: clampedOffset, isDragging: true });
+      e.preventDefault();
+    },
+    [axis, sign, onDragUpdate]
+  );
+  const handlePointerUp = useCallback(
+    (_e) => {
+      if (!startRef.current || committedRef.current !== "drag") {
+        startRef.current = null;
+        committedRef.current = null;
+        return;
+      }
+      const offset = offsetRef.current;
+      const elapsed = Date.now() - startRef.current.time;
+      const velocity = elapsed > 0 ? offset / elapsed : 0;
+      startRef.current = null;
+      committedRef.current = null;
+      offsetRef.current = 0;
+      const panelSize = getPanelDimension(panelRef.current, axis);
+      const pastThreshold = offset / panelSize > config.closeThreshold;
+      const fastEnough = velocity > config.velocityThreshold;
+      if (pastThreshold || fastEnough) {
+        if (config.isNested) {
+          config.onPop();
+        } else {
+          config.onClose();
+        }
+        onDragUpdate({ offset: 0, isDragging: false });
+      } else {
+        onDragUpdate({ offset: 0, isDragging: false });
+      }
+    },
+    [
+      panelRef,
+      axis,
+      config.closeThreshold,
+      config.velocityThreshold,
+      config.isNested,
+      config.onClose,
+      config.onPop,
+      onDragUpdate,
+      config
+    ]
+  );
+  const handlePointerCancel = useCallback(() => {
+    startRef.current = null;
+    committedRef.current = null;
+    offsetRef.current = 0;
+    onDragUpdate({ offset: 0, isDragging: false });
+  }, [onDragUpdate]);
+  useEffect2(() => {
+    const el = panelRef.current;
+    if (!(el && config.enabled)) {
+      return;
+    }
+    el.addEventListener("pointerdown", handlePointerDown);
+    el.addEventListener("pointermove", handlePointerMove);
+    el.addEventListener("pointerup", handlePointerUp);
+    el.addEventListener("pointercancel", handlePointerCancel);
+    return () => {
+      el.removeEventListener("pointerdown", handlePointerDown);
+      el.removeEventListener("pointermove", handlePointerMove);
+      el.removeEventListener("pointerup", handlePointerUp);
+      el.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [
+    panelRef,
+    config.enabled,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel
+  ]);
+}
+
+// src/renderer.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BUTTON_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  color: "inherit",
+  opacity: 0.5,
+  transition: "opacity 150ms",
+  padding: 0
+};
+var HANDLE_BAR_STYLE = {
+  width: 36,
+  height: 4,
+  borderRadius: 2,
+  background: "var(--muted-foreground, rgba(0, 0, 0, 0.25))"
+};
+function DefaultHeader({ isNested, onBack, onClose, side }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    side === "bottom" && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-stacksheet-handle": "",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "12px 0 4px",
+          flexShrink: 0,
+          cursor: "grab",
+          touchAction: "none"
+        },
+        children: /* @__PURE__ */ jsx2("div", { style: HANDLE_BAR_STYLE })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          height: 48,
+          flexShrink: 0,
+          padding: "0 12px",
+          borderBottom: "1px solid var(--border, transparent)"
+        },
+        children: [
+          isNested && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "aria-label": "Back",
+              onClick: onBack,
+              style: BUTTON_STYLE,
+              type: "button",
+              children: /* @__PURE__ */ jsx2(ArrowLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "aria-label": "Close",
+              onClick: onClose,
+              style: BUTTON_STYLE,
+              type: "button",
+              children: /* @__PURE__ */ jsx2(XIcon, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var EMPTY_CLASSNAMES = {
+  backdrop: "",
+  panel: "",
+  header: ""
+};
+function resolveClassNames(cn) {
+  if (!cn) {
+    return EMPTY_CLASSNAMES;
+  }
+  return {
+    backdrop: cn.backdrop ?? "",
+    panel: cn.panel ?? "",
+    header: cn.header ?? ""
+  };
+}
+function selectSpring(isTop, spring, stackSpring) {
+  return isTop ? spring : stackSpring;
+}
+function buildAriaProps(isTop, isModal, isComposable, ariaLabel, panelId) {
+  if (!isTop) {
+    return {};
+  }
+  const props = { role: "dialog" };
+  if (isModal) {
+    props["aria-modal"] = "true";
+  }
+  if (isComposable) {
+    props["aria-labelledby"] = `${panelId}-title`;
+    props["aria-describedby"] = `${panelId}-desc`;
+  } else {
+    props["aria-label"] = ariaLabel;
+  }
+  return props;
+}
+function getDragTransform(side, offset) {
+  if (offset === 0) {
+    return {};
+  }
+  switch (side) {
+    case "right":
+      return { x: offset };
+    case "left":
+      return { x: -offset };
+    case "bottom":
+      return { y: offset };
+    default:
+      return {};
+  }
+}
+function SheetPanel({
+  item,
+  index,
+  depth,
+  isTop,
+  isNested,
+  side,
+  config,
+  classNames,
+  Content,
+  shouldRender,
+  pop,
+  close,
+  renderHeader,
+  slideFrom,
+  slideTarget,
+  spring,
+  stackSpring,
+  exitSpring
+}) {
+  const panelRef = useRef2(null);
+  const hasEnteredRef = useRef2(false);
+  const [dragState, setDragState] = useState2({
+    offset: 0,
+    isDragging: false
+  });
+  const transform = getStackTransform(depth, config.stacking);
+  const panelStyles = getPanelStyles(side, config, depth, index);
+  const stackOffset = getStackingOffset(side, transform.offset);
+  useEffect3(() => {
+    if (!isTop) {
+      hasEnteredRef.current = false;
+    }
+  }, [isTop]);
+  const handleAnimationComplete = useCallback2(() => {
+    if (isTop && !hasEnteredRef.current) {
+      hasEnteredRef.current = true;
+      config.onOpenComplete?.();
+    }
+  }, [isTop, config]);
+  useDrag(
+    panelRef,
+    {
+      enabled: isTop && config.drag && config.dismissible,
+      closeThreshold: config.closeThreshold,
+      velocityThreshold: config.velocityThreshold,
+      side,
+      onClose: close,
+      onPop: pop,
+      isNested
+    },
+    setDragState
+  );
+  const ariaLabel = (typeof item.data?.__ariaLabel === "string" ? item.data.__ariaLabel : void 0) ?? config.ariaLabel;
+  const panelId = `stacksheet-${item.id}`;
+  const panelContext = useMemo(
+    () => ({ close, back: pop, isNested, isTop, panelId, side }),
+    [close, pop, isNested, isTop, panelId, side]
+  );
+  const isComposable = renderHeader === false;
+  const hasPanelClass = classNames.panel !== "";
+  const dragOffset = getDragTransform(side, dragState.offset);
+  const panelStyle = {
+    ...panelStyles,
+    boxShadow: isTop ? getShadow(side, false) : getShadow(side, true),
+    pointerEvents: isTop ? "auto" : "none",
+    // During drag, disable spring transition for immediate feedback
+    ...dragState.isDragging ? { transition: "none" } : {},
+    ...hasPanelClass ? {} : {
+      background: "var(--background, #fff)",
+      borderColor: "var(--border, transparent)"
+    }
+  };
+  const headerProps = {
+    isNested,
+    onBack: pop,
+    onClose: close,
+    side
+  };
+  const isModal = config.modal;
+  const ariaProps = buildAriaProps(
+    isTop,
+    isModal,
+    isComposable,
+    ariaLabel,
+    panelId
+  );
+  const transition = dragState.isDragging ? { type: "tween", duration: 0 } : selectSpring(isTop, spring, stackSpring);
+  const animatedRadius = getAnimatedBorderRadius(side, depth, config.stacking);
+  const animateTarget = {
+    ...slideTarget,
+    ...stackOffset,
+    ...dragOffset,
+    scale: transform.scale,
+    opacity: transform.opacity,
+    ...animatedRadius,
+    transition
+  };
+  const panelContent = /* @__PURE__ */ jsx2(
+    m.div,
+    {
+      animate: animateTarget,
+      className: classNames.panel || void 0,
+      exit: {
+        ...slideFrom,
+        opacity: 0.6,
+        transition: exitSpring
+      },
+      initial: {
+        ...slideFrom,
+        opacity: 0.8
+      },
+      onAnimationComplete: handleAnimationComplete,
+      ref: panelRef,
+      style: panelStyle,
+      tabIndex: isTop ? -1 : void 0,
+      transition: spring,
+      ...ariaProps,
+      children: isComposable ? (
+        /* Composable mode: content fills panel directly, uses Sheet.* parts */
+        shouldRender && Content && /* @__PURE__ */ jsx2(Content, { ...item.data })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderHeader ? renderHeader(headerProps) : /* @__PURE__ */ jsx2(DefaultHeader, { ...headerProps }),
+        shouldRender && Content && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-stacksheet-no-drag": "",
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              overscrollBehavior: "contain"
+            },
+            children: /* @__PURE__ */ jsx2(Content, { ...item.data })
+          }
+        )
+      ] })
+    },
+    item.id
+  );
+  if (!isModal) {
+    return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: panelContent });
+  }
+  return /* @__PURE__ */ jsx2(SheetPanelContext.Provider, { value: panelContext, children: /* @__PURE__ */ jsx2(
+    FocusTrap,
+    {
+      active: isTop,
+      focusTrapOptions: {
+        initialFocus: false,
+        returnFocusOnDeactivate: true,
+        escapeDeactivates: false,
+        allowOutsideClick: true,
+        checkCanFocusTrap: () => new Promise(
+          (resolve) => requestAnimationFrame(() => resolve())
+        ),
+        fallbackFocus: () => {
+          if (panelRef.current) {
+            return panelRef.current;
+          }
+          return document.body;
+        }
+      },
+      children: panelContent
+    }
+  ) });
+}
+function useBodyScale(config, isOpen) {
+  useEffect3(() => {
+    if (!config.shouldScaleBackground) {
+      return;
+    }
+    const wrapper = document.querySelector("[data-stacksheet-wrapper]");
+    if (!(wrapper && wrapper instanceof HTMLElement)) {
+      return;
+    }
+    if (isOpen) {
+      const scale = config.scaleBackgroundAmount;
+      wrapper.style.transition = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 500ms cubic-bezier(0.32, 0.72, 0, 1)";
+      wrapper.style.transform = `scale(${scale})`;
+      wrapper.style.borderRadius = "8px";
+      wrapper.style.overflow = "hidden";
+      wrapper.style.transformOrigin = "center top";
+      return;
+    }
+    wrapper.style.transform = "";
+    wrapper.style.borderRadius = "";
+    const handleEnd = () => {
+      wrapper.style.transition = "";
+      wrapper.style.overflow = "";
+      wrapper.style.transformOrigin = "";
+    };
+    wrapper.addEventListener("transitionend", handleEnd, { once: true });
+    return () => wrapper.removeEventListener("transitionend", handleEnd);
+  }, [isOpen, config.shouldScaleBackground, config.scaleBackgroundAmount]);
+}
+function SheetRenderer({
+  store,
+  config,
+  sheets,
+  componentMap,
+  classNames: classNamesProp,
+  renderHeader
+}) {
+  const isOpen = useStore(store, (s) => s.isOpen);
+  const stack = useStore(store, (s) => s.stack);
+  const close = useStore(store, (s) => s.close);
+  const pop = useStore(store, (s) => s.pop);
+  const side = useResolvedSide(config);
+  const classNames = resolveClassNames(classNamesProp);
+  useBodyScale(config, isOpen);
+  const triggerRef = useRef2(null);
+  const wasOpenRef = useRef2(false);
+  useEffect3(() => {
+    if (isOpen && !wasOpenRef.current) {
+      triggerRef.current = document.activeElement;
+    } else if (!isOpen && wasOpenRef.current) {
+      const el = triggerRef.current;
+      if (el && el instanceof HTMLElement) {
+        el.focus();
+      }
+      triggerRef.current = null;
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  useEffect3(() => {
+    if (!(isOpen && config.closeOnEscape && config.dismissible)) {
+      return;
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (stack.length > 1) {
+          pop();
+        } else {
+          close();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    isOpen,
+    config.closeOnEscape,
+    config.dismissible,
+    stack.length,
+    pop,
+    close
+  ]);
+  const slideFrom = getSlideFrom(side);
+  const slideTarget = getSlideTarget();
+  const spring = {
+    type: "spring",
+    damping: config.spring.damping,
+    stiffness: config.spring.stiffness,
+    mass: config.spring.mass
+  };
+  const stackSpring = spring;
+  const exitSpring = spring;
+  const isModal = config.modal;
+  const showOverlay = isModal && config.showOverlay;
+  const hasBackdropClass = classNames.backdrop !== "";
+  const backdropStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: config.zIndex,
+    cursor: config.closeOnBackdrop && config.dismissible ? "pointer" : void 0,
+    ...hasBackdropClass ? {} : { background: "var(--overlay, rgba(0, 0, 0, 0.2))" }
+  };
+  const handleExitComplete = useCallback2(() => {
+    if (stack.length === 0) {
+      config.onCloseComplete?.();
+    }
+  }, [stack.length, config]);
+  const shouldLockScroll = isOpen && isModal && config.lockScroll;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showOverlay && /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx2(
+      m.div,
+      {
+        animate: { opacity: 1 },
+        className: classNames.backdrop || void 0,
+        exit: { opacity: 0 },
+        initial: { opacity: 0 },
+        onClick: config.closeOnBackdrop && config.dismissible ? close : void 0,
+        style: backdropStyle,
+        transition: spring
+      },
+      "stacksheet-backdrop"
+    ) }),
+    /* @__PURE__ */ jsx2(RemoveScroll, { enabled: shouldLockScroll, forwardProps: true, children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: config.zIndex + 1,
+          overflow: "hidden",
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsx2(AnimatePresence, { onExitComplete: handleExitComplete, children: stack.map((item, index) => {
+          const depth = stack.length - 1 - index;
+          const isTop = depth === 0;
+          const isNested = stack.length > 1;
+          const shouldRender = depth < config.stacking.renderThreshold;
+          const Content = componentMap.get(item.type) ?? sheets[item.type];
+          return /* @__PURE__ */ jsx2(
+            SheetPanel,
+            {
+              Content,
+              classNames,
+              close,
+              config,
+              depth,
+              exitSpring,
+              index,
+              isNested,
+              isTop,
+              item,
+              pop,
+              renderHeader,
+              shouldRender,
+              side,
+              slideFrom,
+              slideTarget,
+              spring,
+              stackSpring
+            },
+            item.id
+          );
+        }) })
+      }
+    ) })
+  ] });
+}
+function getStackingOffset(side, offset) {
+  if (offset === 0) {
+    return {};
+  }
+  switch (side) {
+    case "right":
+      return { x: -offset };
+    case "left":
+      return { x: offset };
+    case "bottom":
+      return { y: -offset };
+    default:
+      return {};
+  }
+}
+function getShadow(side, isNested) {
+  if (side === "bottom") {
+    return isNested ? "0 -2px 16px rgba(0,0,0,0.06)" : "0 -8px 32px rgba(0,0,0,0.15)";
+  }
+  const dir = side === "right" ? -1 : 1;
+  return isNested ? `${dir * 2}px 0 16px rgba(0,0,0,0.06)` : `${dir * 8}px 0 32px rgba(0,0,0,0.15)`;
+}
+
+// src/store.ts
+import { createStore } from "zustand";
+function warnInlineComponent(component, componentRegistry, warnedNames) {
+  if (typeof process === "undefined" || process?.env?.NODE_ENV === "production") {
+    return;
+  }
+  const name = component.displayName || component.name;
+  if (!name) {
+    return;
+  }
+  if (warnedNames.has(name)) {
+    return;
+  }
+  for (const [existing, key] of componentRegistry) {
+    const existingName = existing.displayName || existing.name;
+    if (existingName === name) {
+      warnedNames.add(name);
+      console.warn(
+        `[stacksheet] A new component reference with name "${name}" was registered (key: ${key}), but a different reference with the same name already exists. This usually means you're passing an inline arrow function (e.g. open(() => <MySheet />)). Define the component outside of render to avoid memory leaks and broken navigate() same-type detection.`
+      );
+      return;
+    }
+  }
+}
+function resolveArgs(componentRegistry, componentMap, getNextKey, warnedNames, first, second, third) {
+  if (typeof first === "function") {
+    const component = first;
+    let typeKey = componentRegistry.get(component);
+    if (!typeKey) {
+      warnInlineComponent(component, componentRegistry, warnedNames);
+      typeKey = getNextKey();
+      componentRegistry.set(component, typeKey);
+      componentMap.set(typeKey, component);
+    }
+    if (typeof second === "string") {
+      return {
+        type: typeKey,
+        id: second,
+        data: third ?? {}
+      };
+    }
+    return {
+      type: typeKey,
+      id: crypto.randomUUID(),
+      data: second ?? {}
+    };
+  }
+  return {
+    type: first,
+    id: second,
+    data: third ?? {}
+  };
+}
+function createSheetStore(config) {
+  const componentRegistry = /* @__PURE__ */ new Map();
+  const componentMap = /* @__PURE__ */ new Map();
+  let adhocCounter = 0;
+  function getNextKey() {
+    return `__adhoc_${adhocCounter++}`;
+  }
+  const warnedNames = /* @__PURE__ */ new Set();
+  function resolve(first, second, third) {
+    return resolveArgs(
+      componentRegistry,
+      componentMap,
+      getNextKey,
+      warnedNames,
+      first,
+      second,
+      third
+    );
+  }
+  const store = createStore()((set, get) => {
+    function _openResolved({ type, id, data }) {
+      set({
+        stack: [{ id, type, data }],
+        isOpen: true
+      });
+    }
+    function _pushResolved({ type, id, data }) {
+      set((state) => {
+        const item = { id, type, data };
+        if (Number.isFinite(config.maxDepth) && state.stack.length >= config.maxDepth) {
+          return {
+            stack: [...state.stack.slice(0, -1), item],
+            isOpen: true
+          };
+        }
+        return {
+          stack: [...state.stack, item],
+          isOpen: true
+        };
+      });
+    }
+    function _replaceResolved({ type, id, data }) {
+      set((state) => {
+        const item = { id, type, data };
+        if (state.stack.length === 0) {
+          return { stack: [item], isOpen: true };
+        }
+        return {
+          stack: [...state.stack.slice(0, -1), item],
+          isOpen: true
+        };
+      });
+    }
+    return {
+      stack: [],
+      isOpen: false,
+      open(first, second, third) {
+        _openResolved(resolve(first, second, third));
+      },
+      push(first, second, third) {
+        _pushResolved(resolve(first, second, third));
+      },
+      replace(first, second, third) {
+        _replaceResolved(resolve(first, second, third));
+      },
+      swap(first, second) {
+        let type;
+        let data;
+        if (typeof first === "function") {
+          const component = first;
+          let typeKey = componentRegistry.get(component);
+          if (!typeKey) {
+            warnInlineComponent(component, componentRegistry, warnedNames);
+            typeKey = getNextKey();
+            componentRegistry.set(component, typeKey);
+            componentMap.set(typeKey, component);
+          }
+          type = typeKey;
+          data = second ?? {};
+        } else {
+          type = first;
+          data = second ?? {};
+        }
+        set((state) => {
+          const top = state.stack.at(-1);
+          if (!top) {
+            return state;
+          }
+          const newStack = [...state.stack];
+          newStack[newStack.length - 1] = { id: top.id, type, data };
+          return { stack: newStack };
+        });
+      },
+      navigate(first, second, third) {
+        const resolved = resolve(first, second, third);
+        const { stack } = get();
+        const top = stack.at(-1);
+        if (stack.length === 0) {
+          _openResolved(resolved);
+          return;
+        }
+        let isSameType = top?.type === resolved.type;
+        if (!isSameType && typeof first === "function") {
+          const topComponent = componentMap.get(top?.type ?? "");
+          isSameType = topComponent === first;
+        }
+        if (isSameType) {
+          _replaceResolved(resolved);
+          return;
+        }
+        _pushResolved(resolved);
+      },
+      setData(first, second, third) {
+        const { id, data } = resolve(first, second, third);
+        set((state) => {
+          const idx = state.stack.findIndex((item) => item.id === id);
+          if (idx === -1) {
+            return state;
+          }
+          const updated = [...state.stack];
+          updated[idx] = { ...updated[idx], data };
+          return { stack: updated };
+        });
+      },
+      remove(id) {
+        set((state) => {
+          const next = state.stack.filter((item) => item.id !== id);
+          if (next.length === state.stack.length) {
+            return state;
+          }
+          if (next.length === 0) {
+            return { stack: [], isOpen: false };
+          }
+          return { stack: next };
+        });
+      },
+      pop() {
+        set((state) => {
+          if (state.stack.length <= 1) {
+            return { stack: [], isOpen: false };
+          }
+          return { stack: state.stack.slice(0, -1), isOpen: true };
+        });
+      },
+      close() {
+        set({ stack: [], isOpen: false });
+      }
+    };
+  });
+  return { store, componentRegistry, componentMap };
+}
+
+// src/create.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function createStacksheet(config) {
+  const resolved = resolveConfig(config);
+  const { store, componentMap } = createSheetStore(resolved);
+  const StoreContext = createContext2(null);
+  function useStoreContext() {
+    const ctx = useContext2(StoreContext);
+    if (!ctx) {
+      throw new Error(
+        "useSheet/useStacksheetState must be used within <StacksheetProvider>"
+      );
+    }
+    return ctx;
+  }
+  const EMPTY_SHEETS = {};
+  function StacksheetProvider({
+    sheets = EMPTY_SHEETS,
+    children,
+    classNames,
+    renderHeader
+  }) {
+    const value = useMemo2(() => ({ store, config: resolved }), []);
+    return /* @__PURE__ */ jsxs2(StoreContext.Provider, { value, children: [
+      children,
+      /* @__PURE__ */ jsx3(Portal, { asChild: false, children: /* @__PURE__ */ jsx3(
+        SheetRenderer,
+        {
+          classNames,
+          componentMap,
+          config: resolved,
+          renderHeader,
+          sheets,
+          store
+        }
+      ) })
+    ] });
+  }
+  function useSheet() {
+    const { store: s } = useStoreContext();
+    return useMemo2(() => {
+      const state = s.getState();
+      return {
+        open: state.open,
+        push: state.push,
+        replace: state.replace,
+        swap: state.swap,
+        navigate: state.navigate,
+        setData: state.setData,
+        remove: state.remove,
+        pop: state.pop,
+        close: state.close
+      };
+    }, [s]);
+  }
+  function useStacksheetState() {
+    const { store: s } = useStoreContext();
+    return useStore2(
+      s,
+      useShallow((state) => ({
+        stack: state.stack,
+        isOpen: state.isOpen
+      }))
+    );
+  }
+  return { StacksheetProvider, useSheet, useStacksheetState, store };
+}
+
+// src/parts.tsx
+import {
+  Root as ScrollAreaRoot,
+  Scrollbar as ScrollAreaScrollbar,
+  Thumb as ScrollAreaThumb,
+  Viewport as ScrollAreaViewport
+} from "@radix-ui/react-scroll-area";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var HANDLE_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "12px 0 4px",
+  flexShrink: 0,
+  cursor: "grab",
+  touchAction: "none"
+};
+var HANDLE_BAR_STYLE2 = {
+  width: 36,
+  height: 4,
+  borderRadius: 2,
+  background: "var(--muted-foreground, rgba(0, 0, 0, 0.25))"
+};
+function SheetHandle({
+  asChild,
+  className,
+  style,
+  children
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      className,
+      "data-stacksheet-handle": "",
+      style: { ...HANDLE_STYLE, ...style },
+      children: children ?? /* @__PURE__ */ jsx4("div", { style: HANDLE_BAR_STYLE2 })
+    }
+  );
+}
+var HEADER_STYLE = {
+  flexShrink: 0
+};
+function SheetHeader({
+  asChild,
+  className,
+  style,
+  children
+}) {
+  const Comp = asChild ? Slot : "header";
+  return /* @__PURE__ */ jsx4(Comp, { className, style: { ...HEADER_STYLE, ...style }, children });
+}
+function SheetTitle({ asChild, className, style, children }) {
+  const { panelId } = useSheetPanel();
+  const Comp = asChild ? Slot : "h2";
+  return /* @__PURE__ */ jsx4(Comp, { className, id: `${panelId}-title`, style, children });
+}
+function SheetDescription({
+  asChild,
+  className,
+  style,
+  children
+}) {
+  const { panelId } = useSheetPanel();
+  const Comp = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx4(Comp, { className, id: `${panelId}-desc`, style, children });
+}
+var BODY_STYLE = {
+  flex: 1,
+  minHeight: 0,
+  position: "relative"
+};
+var SCROLLBAR_STYLE = {
+  display: "flex",
+  userSelect: "none",
+  touchAction: "none",
+  padding: 2,
+  width: 8
+};
+var THUMB_STYLE = {
+  flex: 1,
+  borderRadius: 4,
+  background: "var(--border, rgba(0, 0, 0, 0.15))",
+  position: "relative"
+};
+function SheetBody({ asChild, className, style, children }) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx4(
+      Slot,
+      {
+        className,
+        "data-stacksheet-no-drag": "",
+        style: { ...BODY_STYLE, ...style },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    ScrollAreaRoot,
+    {
+      className,
+      "data-stacksheet-no-drag": "",
+      style: { ...BODY_STYLE, overflow: "hidden", ...style },
+      children: [
+        /* @__PURE__ */ jsx4(
+          ScrollAreaViewport,
+          {
+            style: { height: "100%", width: "100%", overscrollBehavior: "contain" },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx4(ScrollAreaScrollbar, { orientation: "vertical", style: SCROLLBAR_STYLE, children: /* @__PURE__ */ jsx4(ScrollAreaThumb, { style: THUMB_STYLE }) })
+      ]
+    }
+  );
+}
+var FOOTER_STYLE = {
+  flexShrink: 0
+};
+function SheetFooter({
+  asChild,
+  className,
+  style,
+  children
+}) {
+  const Comp = asChild ? Slot : "footer";
+  return /* @__PURE__ */ jsx4(Comp, { className, style: { ...FOOTER_STYLE, ...style }, children });
+}
+function SheetClose({ asChild, className, style, children }) {
+  const { close } = useSheetPanel();
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      "aria-label": children ? void 0 : "Close",
+      className,
+      onClick: close,
+      style,
+      type: asChild ? void 0 : "button",
+      children: children ?? /* @__PURE__ */ jsx4(XIcon, {})
+    }
+  );
+}
+function SheetBack({ asChild, className, style, children }) {
+  const { back, isNested } = useSheetPanel();
+  if (!isNested) {
+    return null;
+  }
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      "aria-label": children ? void 0 : "Back",
+      className,
+      onClick: back,
+      style,
+      type: asChild ? void 0 : "button",
+      children: children ?? /* @__PURE__ */ jsx4(ArrowLeftIcon, {})
+    }
+  );
+}
+var Sheet = {
+  Handle: SheetHandle,
+  Header: SheetHeader,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Body: SheetBody,
+  Footer: SheetFooter,
+  Close: SheetClose,
+  Back: SheetBack
+};
+export {
+  Sheet,
+  createStacksheet,
+  getPanelStyles,
+  getSlideFrom,
+  getStackTransform,
+  resolveConfig,
+  springs,
+  useIsMobile,
+  useResolvedSide,
+  useSheetPanel
+};
 //# sourceMappingURL=index.js.map