hiraki 0.0.1

package/dist/index.js

@@ -0,0 +1,1331 @@
+import { createContext, forwardRef, isValidElement, cloneElement, useContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/components/root.tsx
+var DrawerContext = createContext(null);
+function useDrawerContext() {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error("Drawer compound components must be used within <Drawer.Root>");
+  }
+  return ctx;
+}
+function useControllableState({
+  controlled,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : uncontrolled;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) setUncontrolled(nextValue);
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+function resolveSnapPoint(snap, viewportSize, contentSize) {
+  if (snap === "content") return Math.min(contentSize ?? viewportSize, viewportSize);
+  if (typeof snap === "number") return Math.min(Math.max(snap, 0), viewportSize);
+  const percent = parseFloat(snap) / 100;
+  return Math.round(viewportSize * percent);
+}
+function useSnapPoints({
+  snapPoints,
+  viewportSize,
+  contentSize,
+  activeSnapPoint,
+  onSnapPointChange
+}) {
+  const [rawActiveSnapIndex, setRawActiveSnapIndex] = useControllableState({
+    controlled: activeSnapPoint,
+    defaultValue: snapPoints.length > 0 ? snapPoints.length - 1 : 0,
+    onChange: onSnapPointChange
+  });
+  const resolvedSnapPoints = useMemo(() => {
+    if (snapPoints.length === 0) return [{ value: viewportSize }];
+    return snapPoints.map((sp) => ({
+      value: resolveSnapPoint(sp, viewportSize, contentSize),
+      label: typeof sp === "string" ? sp : void 0
+    }));
+  }, [snapPoints, viewportSize, contentSize]);
+  const snapEntries = useMemo(
+    () => resolvedSnapPoints.map((sp, i) => ({ value: sp.value, index: i })),
+    [resolvedSnapPoints]
+  );
+  const maxIndex = Math.max(resolvedSnapPoints.length - 1, 0);
+  const activeSnapIndex = Math.min(Math.max(rawActiveSnapIndex, 0), maxIndex);
+  const setActiveSnapIndex = useCallback(
+    (index) => {
+      setRawActiveSnapIndex(Math.min(Math.max(index, 0), maxIndex));
+    },
+    [maxIndex, setRawActiveSnapIndex]
+  );
+  const activeSnapPx = resolvedSnapPoints[activeSnapIndex]?.value ?? viewportSize;
+  const translateForSnap = useCallback(
+    (index, maxTranslate) => {
+      const clampedIndex = Math.min(Math.max(index, 0), maxIndex);
+      const snapPx = resolvedSnapPoints[clampedIndex]?.value ?? 0;
+      return Math.max(0, maxTranslate - snapPx);
+    },
+    [maxIndex, resolvedSnapPoints]
+  );
+  return { resolvedSnapPoints, snapEntries, activeSnapIndex, setActiveSnapIndex, activeSnapPx, translateForSnap };
+}
+
+// src/engine/pointer-tracker.ts
+var DEFAULT_SMOOTHING = 0.3;
+var DEFAULT_AXIS_LOCK = 8;
+function createPointerTracker(options = {}) {
+  const smoothingFactor = options.smoothingFactor ?? DEFAULT_SMOOTHING;
+  const axisLockThreshold = options.axisLockThreshold ?? DEFAULT_AXIS_LOCK;
+  let state = {
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    dominantAxis: null,
+    isActive: false,
+    pointerId: null,
+    timestamp: 0,
+    startTimestamp: 0
+  };
+  let lastX = 0;
+  let lastY = 0;
+  let lastTimestamp = 0;
+  function onPointerDown(event) {
+    if (state.isActive) return false;
+    state = {
+      startX: event.clientX,
+      startY: event.clientY,
+      currentX: event.clientX,
+      currentY: event.clientY,
+      deltaX: 0,
+      deltaY: 0,
+      velocityX: 0,
+      velocityY: 0,
+      dominantAxis: null,
+      isActive: true,
+      pointerId: event.pointerId,
+      timestamp: event.timeStamp,
+      startTimestamp: event.timeStamp
+    };
+    lastX = event.clientX;
+    lastY = event.clientY;
+    lastTimestamp = event.timeStamp;
+    return true;
+  }
+  function onPointerMove(event) {
+    if (!state.isActive || state.pointerId !== event.pointerId) return false;
+    const dt = event.timeStamp - lastTimestamp;
+    const rawVx = dt > 0 ? (event.clientX - lastX) / dt : 0;
+    const rawVy = dt > 0 ? (event.clientY - lastY) / dt : 0;
+    const vx = smoothingFactor * rawVx + (1 - smoothingFactor) * state.velocityX;
+    const vy = smoothingFactor * rawVy + (1 - smoothingFactor) * state.velocityY;
+    const deltaX = event.clientX - state.startX;
+    const deltaY = event.clientY - state.startY;
+    let dominantAxis = state.dominantAxis;
+    if (dominantAxis === null) {
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      if (Math.max(absX, absY) >= axisLockThreshold) {
+        dominantAxis = absX > absY ? "x" : "y";
+      }
+    }
+    state = {
+      ...state,
+      currentX: event.clientX,
+      currentY: event.clientY,
+      deltaX,
+      deltaY,
+      velocityX: vx,
+      velocityY: vy,
+      dominantAxis,
+      timestamp: event.timeStamp
+    };
+    lastX = event.clientX;
+    lastY = event.clientY;
+    lastTimestamp = event.timeStamp;
+    return true;
+  }
+  function onPointerUp(event) {
+    if (!state.isActive || state.pointerId !== event.pointerId) return false;
+    state = { ...state, isActive: false };
+    return true;
+  }
+  function getState() {
+    return state;
+  }
+  function reset() {
+    state = { ...state, isActive: false, pointerId: null, dominantAxis: null, velocityX: 0, velocityY: 0 };
+  }
+  return { onPointerDown, onPointerMove, onPointerUp, getState, reset };
+}
+
+// src/engine/physics.ts
+function rubberBand(value, min, max, factor = 0.55) {
+  if (value >= min && value <= max) return value;
+  const distance = value < min ? min - value : value - max;
+  const sign = value < min ? -1 : 1;
+  const dampened = factor * Math.log(1 + distance);
+  return (value < min ? min : max) + sign * dampened;
+}
+function decayPosition(position, velocity, deceleration = 3e-3) {
+  if (Math.abs(velocity) < 0.01) return position;
+  return position + velocity * Math.abs(velocity) / (2 * deceleration);
+}
+function findNearestSnapPoint(currentPx, velocityPxMs, snapPoints, inertia = true) {
+  if (snapPoints.length === 0) return 0;
+  const projected = inertia ? decayPosition(currentPx, velocityPxMs) : currentPx;
+  let nearestIndex = 0;
+  let nearestDist = Infinity;
+  for (const { value, index } of snapPoints) {
+    const dist = Math.abs(projected - value);
+    if (dist < nearestDist) {
+      nearestDist = dist;
+      nearestIndex = index;
+    }
+  }
+  return nearestIndex;
+}
+
+// src/engine/gesture-engine.ts
+function isHorizontal(direction) {
+  return direction === "left" || direction === "right";
+}
+function getDirectionSign(direction) {
+  return direction === "top" || direction === "left" ? -1 : 1;
+}
+function shouldDrag(target, direction) {
+  if (!(target instanceof Element)) return true;
+  const horizontal = isHorizontal(direction);
+  const scrollParent = getScrollParent(target, horizontal);
+  if (!scrollParent) return true;
+  const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollParent;
+  if (horizontal) {
+    return direction === "right" ? scrollLeft <= 0 : scrollLeft + clientWidth >= scrollWidth - 1;
+  }
+  return direction === "bottom" ? scrollTop <= 0 : scrollTop + clientHeight >= scrollHeight - 1;
+}
+function getScrollParent(el, horizontal) {
+  let current = el;
+  while (current) {
+    if (current === document.body || current === document.documentElement) {
+      return null;
+    }
+    const style = window.getComputedStyle(current);
+    const overflow = horizontal ? `${style.overflowX} ${style.overflow}` : `${style.overflowY} ${style.overflow}`;
+    if (/auto|scroll/.test(overflow)) {
+      const hasScroll = horizontal ? current.scrollWidth > current.clientWidth : current.scrollHeight > current.clientHeight;
+      if (hasScroll) return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function createGestureEngine(options) {
+  let opts = { ...options };
+  const tracker = createPointerTracker();
+  let isDragging = false;
+  let dragStartTranslate = 0;
+  let translateValue = 0;
+  let capturedElement = null;
+  function update(newOpts) {
+    opts = { ...opts, ...newOpts };
+  }
+  function getDelta() {
+    const state = tracker.getState();
+    const delta = isHorizontal(opts.direction) ? state.deltaX : state.deltaY;
+    return delta * getDirectionSign(opts.direction);
+  }
+  function getVelocity() {
+    const state = tracker.getState();
+    const velocity = isHorizontal(opts.direction) ? state.velocityX : state.velocityY;
+    return velocity * getDirectionSign(opts.direction);
+  }
+  function clampWithRubberBand(raw) {
+    const min = 0;
+    const max = opts.maxTranslate;
+    if (raw >= min && raw <= max) return raw;
+    if (!opts.rubberBandEnabled) return Math.min(Math.max(raw, min), max);
+    return rubberBand(raw, min, max);
+  }
+  function onPointerDown(event) {
+    const started = tracker.onPointerDown(event);
+    if (!started) return false;
+    dragStartTranslate = translateValue;
+    capturedElement = event.target;
+    return true;
+  }
+  function onPointerMove(event) {
+    if (!tracker.getState().isActive) return false;
+    tracker.onPointerMove(event);
+    const state = tracker.getState();
+    if (!isDragging) {
+      if (state.dominantAxis === null) return false;
+      const horizontal = isHorizontal(opts.direction);
+      const correctAxis = horizontal ? state.dominantAxis === "x" : state.dominantAxis === "y";
+      if (!correctAxis) {
+        tracker.reset();
+        return false;
+      }
+      if (!shouldDrag(capturedElement, opts.direction)) {
+        tracker.reset();
+        return false;
+      }
+      isDragging = true;
+      opts.onDragStart?.(translateValue);
+    }
+    translateValue = clampWithRubberBand(dragStartTranslate + getDelta());
+    opts.onDrag?.(translateValue);
+    return true;
+  }
+  function onPointerUp(event) {
+    const wasActive = tracker.getState().isActive;
+    tracker.onPointerUp(event);
+    if (!wasActive || !isDragging) {
+      isDragging = false;
+      return false;
+    }
+    isDragging = false;
+    const velocityPxMs = getVelocity() * 1e3;
+    const snapVelocityPxMs = -velocityPxMs;
+    const closeThresholdPx = opts.closeThreshold * opts.maxTranslate;
+    const shouldClose = translateValue > closeThresholdPx;
+    let targetSnapIndex;
+    if (shouldClose) {
+      targetSnapIndex = -1;
+    } else {
+      targetSnapIndex = findNearestSnapPoint(
+        opts.maxTranslate - translateValue,
+        snapVelocityPxMs,
+        opts.snapPoints,
+        opts.inertia
+      );
+    }
+    opts.onDragEnd?.({ translateValue, velocityPxMs, targetSnapIndex, shouldClose });
+    return true;
+  }
+  function setTranslate(value) {
+    translateValue = value;
+  }
+  function getIsDragging() {
+    return isDragging;
+  }
+  function getTranslate() {
+    return translateValue;
+  }
+  return { update, onPointerDown, onPointerMove, onPointerUp, setTranslate, getIsDragging, getTranslate };
+}
+
+// src/utils/focus-trap.ts
+var FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "area[href]",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "details > summary",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])'
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter((el) => {
+    const style = window.getComputedStyle(el);
+    return style.visibility !== "hidden" && style.display !== "none";
+  });
+}
+function createFocusTrap(initialContainer) {
+  let container = initialContainer;
+  let active = false;
+  let previouslyFocused = null;
+  function handleKeyDown(event) {
+    if (!active || event.key !== "Tab") return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const firstEl = focusable[0];
+    const lastEl = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstEl) {
+        event.preventDefault();
+        lastEl?.focus();
+      }
+    } else {
+      if (document.activeElement === lastEl) {
+        event.preventDefault();
+        firstEl?.focus();
+      }
+    }
+  }
+  function handleFocusOut(event) {
+    if (!active) return;
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget && !container.contains(relatedTarget)) {
+      getFocusableElements(container)[0]?.focus();
+    }
+  }
+  function activate() {
+    if (active) return;
+    active = true;
+    previouslyFocused = document.activeElement;
+    getFocusableElements(container)[0]?.focus();
+    document.addEventListener("keydown", handleKeyDown);
+    container.addEventListener("focusout", handleFocusOut);
+  }
+  function deactivate() {
+    if (!active) return;
+    active = false;
+    document.removeEventListener("keydown", handleKeyDown);
+    container.removeEventListener("focusout", handleFocusOut);
+    if (previouslyFocused && typeof previouslyFocused.focus === "function") {
+      previouslyFocused.focus();
+    }
+    previouslyFocused = null;
+  }
+  function updateContainer(newContainer) {
+    if (active) {
+      container.removeEventListener("focusout", handleFocusOut);
+      container = newContainer;
+      container.addEventListener("focusout", handleFocusOut);
+    } else {
+      container = newContainer;
+    }
+  }
+  return { activate, deactivate, updateContainer };
+}
+
+// src/utils/scroll-lock.ts
+var lockCount = 0;
+var savedScrollY = 0;
+var savedScrollbarWidth = 0;
+var originalStyles = null;
+function getScrollbarWidth() {
+  if (typeof document === "undefined") return 0;
+  const outer = document.createElement("div");
+  outer.style.cssText = "visibility:hidden;overflow:scroll;position:absolute;top:-9999px;width:50px";
+  document.body.appendChild(outer);
+  const inner = document.createElement("div");
+  outer.appendChild(inner);
+  const width = outer.offsetWidth - inner.offsetWidth;
+  document.body.removeChild(outer);
+  return width;
+}
+function lockScroll() {
+  if (typeof document === "undefined") return;
+  lockCount++;
+  if (lockCount > 1) return;
+  savedScrollY = window.scrollY;
+  savedScrollbarWidth = getScrollbarWidth();
+  const body = document.body;
+  originalStyles = {
+    overflow: body.style.overflow,
+    paddingRight: body.style.paddingRight,
+    position: body.style.position,
+    top: body.style.top,
+    width: body.style.width
+  };
+  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
+  if (isIOS) {
+    body.style.position = "fixed";
+    body.style.top = `-${savedScrollY}px`;
+    body.style.width = "100%";
+  } else {
+    body.style.overflow = "hidden";
+  }
+  if (savedScrollbarWidth > 0) {
+    body.style.paddingRight = `${savedScrollbarWidth}px`;
+    document.documentElement.style.setProperty("--hiraki-scrollbar-width", `${savedScrollbarWidth}px`);
+  }
+}
+function unlockScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount > 0 || !originalStyles) return;
+  const body = document.body;
+  body.style.overflow = originalStyles.overflow;
+  body.style.paddingRight = originalStyles.paddingRight;
+  body.style.position = originalStyles.position;
+  body.style.top = originalStyles.top;
+  body.style.width = originalStyles.width;
+  document.documentElement.style.removeProperty("--hiraki-scrollbar-width");
+  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
+  if (isIOS) window.scrollTo(0, savedScrollY);
+  originalStyles = null;
+}
+
+// src/utils/dom.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref !== null && ref !== void 0) {
+        ref.current = node;
+      }
+    }
+  };
+}
+function composeEventHandlers(originalHandler, ourHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalHandler?.(event);
+    if (!checkForDefaultPrevented || !event.defaultPrevented) {
+      ourHandler?.(event);
+    }
+  };
+}
+var idCounter = 0;
+function generateId(prefix = "hiraki") {
+  return `${prefix}-${++idCounter}`;
+}
+
+// src/animations/presets.ts
+var SPRING_EASING = "cubic-bezier(0.32, 0.08, 0.38, 1.1)";
+var EASE_OUT = "cubic-bezier(0.16, 1, 0.3, 1)";
+var EASE_IN_OUT = "cubic-bezier(0.4, 0, 0.2, 1)";
+function getTransform(direction, value) {
+  switch (direction) {
+    case "top":
+      return `translate3d(0, ${-value}px, 0)`;
+    case "left":
+      return `translate3d(${-value}px, 0, 0)`;
+    case "right":
+      return `translate3d(${value}px, 0, 0)`;
+    default:
+      return `translate3d(0, ${value}px, 0)`;
+  }
+}
+function getEnterTransition(preset, duration = 350) {
+  switch (preset) {
+    case "spring":
+      return { duration, easing: SPRING_EASING, property: "transform" };
+    case "scale":
+      return { duration, easing: EASE_OUT, property: "transform, opacity" };
+    case "morph":
+      return { duration, easing: EASE_OUT, property: "transform, border-radius, width, height" };
+    default:
+      return { duration, easing: EASE_OUT, property: "transform" };
+  }
+}
+function getExitTransition(preset, duration = 300) {
+  switch (preset) {
+    case "spring":
+      return { duration, easing: EASE_IN_OUT, property: "transform" };
+    case "scale":
+      return { duration, easing: EASE_IN_OUT, property: "transform, opacity" };
+    case "morph":
+      return { duration, easing: EASE_IN_OUT, property: "transform, border-radius, width, height" };
+    default:
+      return { duration, easing: EASE_IN_OUT, property: "transform" };
+  }
+}
+function getSnapTransition(velocityPxMs, distancePx) {
+  const absVelocity = Math.abs(velocityPxMs);
+  const duration = absVelocity > 0.5 ? Math.max(120, Math.min(250, distancePx / absVelocity)) : 250;
+  return { duration, easing: EASE_OUT, property: "transform" };
+}
+function applyTransition(el, config) {
+  el.style.transition = `${config.property} ${config.duration}ms ${config.easing}`;
+}
+function removeTransition(el) {
+  el.style.transition = "none";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/animations/transitions.ts
+function applyDragTransition(el) {
+  if (!el) return;
+  removeTransition(el);
+}
+function applySnapTransition(el, velocityPxMs, distancePx) {
+  if (!el) return;
+  if (prefersReducedMotion()) {
+    applyTransition(el, { duration: 0, easing: "linear", property: "transform" });
+    return;
+  }
+  applyTransition(el, getSnapTransition(velocityPxMs, distancePx));
+}
+function applyEnterTransition(el, preset = "slide", duration) {
+  if (!el) return;
+  if (prefersReducedMotion()) {
+    applyTransition(el, { duration: 0, easing: "linear", property: "transform" });
+    return;
+  }
+  applyTransition(el, getEnterTransition(preset, duration));
+}
+function applyExitTransition(el, preset = "slide", duration) {
+  if (!el) return;
+  if (prefersReducedMotion()) {
+    applyTransition(el, { duration: 0, easing: "linear", property: "transform" });
+    return;
+  }
+  applyTransition(el, getExitTransition(preset, duration));
+}
+
+// src/utils/css-properties.ts
+function calcOverlayOpacity(progress, maxOpacity = 0.5) {
+  return Math.min(Math.max(progress, 0), 1) * maxOpacity;
+}
+function calcBackgroundScale(progress, minScale = 0.96) {
+  return minScale + (1 - minScale) * (1 - Math.min(Math.max(progress, 0), 1));
+}
+
+// src/animations/micro-interactions.ts
+function updateOverlayProgress(overlayEl, progress) {
+  if (!overlayEl) return;
+  overlayEl.style.opacity = String(calcOverlayOpacity(progress));
+}
+function updateBackgroundScale(backgroundEl, progress) {
+  if (!backgroundEl) return;
+  backgroundEl.style.transform = `scale(${calcBackgroundScale(progress)})`;
+  backgroundEl.style.borderRadius = `${progress * 12}px`;
+}
+function updateDragProgress(contentEl, progress) {
+  if (!contentEl) return;
+  contentEl.style.setProperty("--hiraki-drag-progress", String(progress));
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var EXIT_DURATION = 300;
+var INTERACTIVE_SELECTOR = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  '[role="button"]',
+  '[contenteditable="true"]',
+  "[data-hiraki-close]",
+  "[data-hiraki-trigger]"
+].join(", ");
+function getViewportSize(direction) {
+  if (typeof window === "undefined") return 600;
+  return direction === "left" || direction === "right" ? window.innerWidth : window.innerHeight;
+}
+function measureElementExtent(element, direction) {
+  return direction === "left" || direction === "right" ? element.offsetWidth : element.offsetHeight;
+}
+function measureContentExtent(element, direction) {
+  return direction === "left" || direction === "right" ? element.scrollWidth : element.scrollHeight;
+}
+function shouldIgnoreGestureTarget(target, container) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-hiraki-handle]")) return false;
+  const interactiveTarget = target.closest(INTERACTIVE_SELECTOR);
+  return interactiveTarget !== null && container.contains(interactiveTarget);
+}
+function Root({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  direction = "bottom",
+  variant = "default",
+  modal = true,
+  dismissible = true,
+  snapPoints: snapPointsProp = [],
+  activeSnapPoint: controlledSnap,
+  onSnapPointChange,
+  closeThreshold = 0.5,
+  rubberBand: rubberBand2 = true,
+  inertia = true,
+  shouldScaleBackground = false,
+  onDragStart,
+  onDrag,
+  onDragEnd
+}) {
+  const [open, setOpen] = useControllableState({
+    controlled: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [mounted, setMounted] = useState(false);
+  const [contentSize, setContentSize] = useState(0);
+  const contentRef = useRef(null);
+  const overlayRef = useRef(null);
+  const triggerRef = useRef(null);
+  const translateRef = useRef(0);
+  const maxTranslateRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const dragProgressRef = useRef(0);
+  const isEnteringRef = useRef(false);
+  const titleId = useMemo(() => generateId("hiraki-title"), []);
+  const descriptionId = useMemo(() => generateId("hiraki-desc"), []);
+  const [viewportSize, setViewportSize] = useState(() => getViewportSize(direction));
+  useIsomorphicLayoutEffect(() => {
+    const update = () => setViewportSize(getViewportSize(direction));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [direction]);
+  const {
+    resolvedSnapPoints,
+    snapEntries,
+    activeSnapIndex,
+    setActiveSnapIndex,
+    translateForSnap
+  } = useSnapPoints({
+    snapPoints: snapPointsProp,
+    viewportSize,
+    contentSize,
+    activeSnapPoint: controlledSnap,
+    onSnapPointChange
+  });
+  function applyTranslate(value) {
+    translateRef.current = value;
+    if (contentRef.current) {
+      contentRef.current.style.transform = getTransform(direction, value);
+    }
+  }
+  function applyProgress(value) {
+    dragProgressRef.current = value;
+    updateOverlayProgress(overlayRef.current, value);
+    updateDragProgress(contentRef.current, value);
+    if (shouldScaleBackground) {
+      const bgEl = document.querySelector("[data-hiraki-background]");
+      updateBackgroundScale(bgEl, value);
+    }
+  }
+  const stableRefs = useRef({ onDragStart, onDrag, onDragEnd, direction, shouldScaleBackground });
+  stableRefs.current = { onDragStart, onDrag, onDragEnd, direction, shouldScaleBackground };
+  const engineRef = useRef(null);
+  const getEngine = useCallback(() => {
+    if (!engineRef.current) {
+      engineRef.current = createGestureEngine({
+        direction,
+        snapPoints: snapEntries,
+        maxTranslate: maxTranslateRef.current,
+        activeSnapIndex,
+        closeThreshold,
+        rubberBandEnabled: rubberBand2,
+        inertia,
+        onDragStart: void 0,
+        onDrag: void 0,
+        onDragEnd: void 0
+      });
+    }
+    return engineRef.current;
+  }, []);
+  const updateMeasuredSizes = useCallback(() => {
+    const element = contentRef.current;
+    if (!element) return 0;
+    const nextMaxTranslate = measureElementExtent(element, direction);
+    const nextContentSize = measureContentExtent(element, direction);
+    maxTranslateRef.current = nextMaxTranslate;
+    getEngine().update({ maxTranslate: nextMaxTranslate });
+    setContentSize((prev) => prev === nextContentSize ? prev : nextContentSize);
+    return nextMaxTranslate;
+  }, [direction, getEngine]);
+  const triggerClose = useCallback(() => {
+    const mt = maxTranslateRef.current;
+    if (contentRef.current) applyExitTransition(contentRef.current);
+    applyTranslate(mt);
+    getEngine().setTranslate(mt);
+    applyProgress(0);
+    setTimeout(() => {
+      setOpen(false);
+      setMounted(false);
+    }, EXIT_DURATION);
+  }, [getEngine, setOpen]);
+  useEffect(() => {
+    const engine = getEngine();
+    engine.update({
+      direction,
+      snapPoints: snapEntries,
+      maxTranslate: maxTranslateRef.current,
+      activeSnapIndex,
+      closeThreshold,
+      rubberBandEnabled: rubberBand2,
+      inertia,
+      onDragStart: (tv) => {
+        isDraggingRef.current = true;
+        if (contentRef.current) {
+          applyDragTransition(contentRef.current);
+          contentRef.current.dataset["hirakiDragging"] = "true";
+        }
+        stableRefs.current.onDragStart?.({
+          velocity: 0,
+          direction: stableRefs.current.direction,
+          translateValue: tv
+        });
+      },
+      onDrag: (tv) => {
+        applyTranslate(tv);
+        const mt = maxTranslateRef.current;
+        const progress = mt > 0 ? Math.max(0, 1 - tv / mt) : 0;
+        applyProgress(progress);
+        stableRefs.current.onDrag?.({
+          velocity: 0,
+          direction: stableRefs.current.direction,
+          translateValue: tv
+        });
+      },
+      onDragEnd: (result) => {
+        isDraggingRef.current = false;
+        if (contentRef.current) {
+          contentRef.current.dataset["hirakiDragging"] = "false";
+        }
+        if (result.shouldClose) {
+          triggerClose();
+        } else {
+          const snapPx = resolvedSnapPoints[result.targetSnapIndex]?.value ?? 0;
+          const mt = maxTranslateRef.current;
+          const targetTranslate = Math.max(0, mt - snapPx);
+          const dist = Math.abs(result.translateValue - targetTranslate);
+          if (contentRef.current) applySnapTransition(contentRef.current, result.velocityPxMs / 1e3, dist);
+          applyTranslate(targetTranslate);
+          getEngine().setTranslate(targetTranslate);
+          const progress = mt > 0 ? Math.max(0, 1 - targetTranslate / mt) : 0;
+          applyProgress(progress);
+          setActiveSnapIndex(result.targetSnapIndex);
+          stableRefs.current.onDragEnd?.({
+            velocity: result.velocityPxMs,
+            direction: stableRefs.current.direction,
+            translateValue: result.translateValue
+          });
+        }
+      }
+    });
+  }, [direction, snapEntries, activeSnapIndex, closeThreshold, rubberBand2, inertia]);
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  useIsomorphicLayoutEffect(() => {
+    if (!mounted || !contentRef.current) return;
+    const element = contentRef.current;
+    updateMeasuredSizes();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      updateMeasuredSizes();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [mounted, updateMeasuredSizes]);
+  useIsomorphicLayoutEffect(() => {
+    if (!mounted || !open || !contentRef.current) return;
+    const mt = updateMeasuredSizes();
+    if (mt === 0) return;
+    isEnteringRef.current = true;
+    applyTranslate(mt);
+    getEngine().setTranslate(mt);
+    let firstFrame = 0;
+    let secondFrame = 0;
+    firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => {
+        if (!contentRef.current) return;
+        const targetTranslate = translateForSnap(activeSnapIndex, mt);
+        const progress = mt > 0 ? Math.max(0, 1 - targetTranslate / mt) : 0;
+        applyEnterTransition(contentRef.current);
+        applyTranslate(targetTranslate);
+        getEngine().setTranslate(targetTranslate);
+        applyProgress(progress);
+        isEnteringRef.current = false;
+      });
+    });
+    return () => {
+      cancelAnimationFrame(firstFrame);
+      cancelAnimationFrame(secondFrame);
+      isEnteringRef.current = false;
+    };
+  }, [mounted, open, updateMeasuredSizes]);
+  useIsomorphicLayoutEffect(() => {
+    if (!mounted || !open || !contentRef.current) return;
+    if (isDraggingRef.current || isEnteringRef.current) return;
+    const mt = updateMeasuredSizes();
+    if (mt === 0) return;
+    const targetTranslate = translateForSnap(activeSnapIndex, mt);
+    const distance = Math.abs(translateRef.current - targetTranslate);
+    const progress = mt > 0 ? Math.max(0, 1 - targetTranslate / mt) : 0;
+    if (distance > 0.5) {
+      applySnapTransition(contentRef.current, 0, distance);
+      applyTranslate(targetTranslate);
+    }
+    getEngine().setTranslate(targetTranslate);
+    applyProgress(progress);
+  }, [activeSnapIndex, contentSize, mounted, open, translateForSnap, updateMeasuredSizes, viewportSize]);
+  useEffect(() => {
+    if (!open || !contentRef.current) return;
+    const trap = createFocusTrap(contentRef.current);
+    const timeout = setTimeout(() => trap.activate(), 100);
+    return () => {
+      clearTimeout(timeout);
+      trap.deactivate();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || !modal) return;
+    lockScroll();
+    return () => unlockScroll();
+  }, [open, modal]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape" && dismissible) triggerClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, dismissible, triggerClose]);
+  const openDrawer = useCallback(() => {
+    setMounted(true);
+    setOpen(true);
+  }, [setOpen]);
+  const forceClose = useCallback(() => {
+    triggerClose();
+  }, [triggerClose]);
+  const closeDrawer = useCallback(() => {
+    if (dismissible) triggerClose();
+  }, [dismissible, triggerClose]);
+  const gestureHandlers = useMemo(
+    () => ({
+      onPointerDown: (e) => {
+        if (shouldIgnoreGestureTarget(e.target, e.currentTarget)) return;
+        const engine = getEngine();
+        engine.onPointerDown(e.nativeEvent);
+      },
+      onPointerMove: (e) => {
+        const engine = getEngine();
+        const handled = engine.onPointerMove(e.nativeEvent);
+        if (handled && engine.getIsDragging() && !e.currentTarget.hasPointerCapture(e.pointerId)) {
+          e.currentTarget.setPointerCapture(e.pointerId);
+        }
+      },
+      onPointerUp: (e) => {
+        getEngine().onPointerUp(e.nativeEvent);
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+      },
+      onPointerCancel: (e) => {
+        getEngine().onPointerUp(e.nativeEvent);
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+      }
+    }),
+    [getEngine]
+  );
+  const contextValue = {
+    open,
+    mounted,
+    openDrawer,
+    closeDrawer,
+    forceClose,
+    direction,
+    variant,
+    modal,
+    dismissible,
+    isDraggingRef,
+    translateRef,
+    maxTranslateRef,
+    dragProgressRef,
+    resolvedSnapPoints,
+    activeSnapIndex,
+    contentRef,
+    overlayRef,
+    triggerRef,
+    titleId,
+    descriptionId,
+    gestureHandlers
+  };
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children });
+}
+Root.displayName = "Drawer.Root";
+var Trigger = forwardRef(
+  function Trigger2({ children, onClick, asChild: _asChild, ...props }, ref) {
+    const { openDrawer, triggerRef } = useDrawerContext();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: composeRefs(triggerRef, ref),
+        type: "button",
+        "data-hiraki-trigger": "",
+        onClick: composeEventHandlers2(onClick, openDrawer),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Trigger.displayName = "Drawer.Trigger";
+function composeEventHandlers2(original, ours) {
+  return (e) => {
+    original?.(e);
+    if (!e.defaultPrevented) ours?.(e);
+  };
+}
+function Portal({ children, container }) {
+  const { mounted } = useDrawerContext();
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+  if (!hydrated || !mounted) return null;
+  return createPortal(children, container ?? document.body);
+}
+Portal.displayName = "Drawer.Portal";
+var Overlay = forwardRef(
+  function Overlay2({ onClick, style, ...props }, ref) {
+    const { overlayRef, closeDrawer, dismissible } = useDrawerContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: composeRefs(overlayRef, ref),
+        "data-hiraki-overlay": "",
+        "aria-hidden": "true",
+        onClick: composeEventHandlers(onClick, () => {
+          if (dismissible) closeDrawer();
+        }),
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          opacity: 0,
+          zIndex: "var(--hiraki-overlay-z, 49)",
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Overlay.displayName = "Drawer.Overlay";
+
+// src/variants/variant-config.ts
+var VARIANT_CONFIGS = {
+  default: {
+    showHandle: true,
+    borderRadius: 16,
+    fullWidth: true
+  },
+  floating: {
+    showHandle: true,
+    margin: 12,
+    borderRadius: 16,
+    fullWidth: false
+  },
+  sheet: {
+    showHandle: true,
+    borderRadius: 0,
+    fullWidth: true
+  },
+  fullscreen: {
+    showHandle: false,
+    borderRadius: 0,
+    fullWidth: true,
+    morph: true
+  },
+  nested: {
+    showHandle: true,
+    borderRadius: 16,
+    fullWidth: true,
+    nested: true
+  },
+  stack: {
+    showHandle: true,
+    borderRadius: 16,
+    fullWidth: true,
+    stackOffset: 8
+  }
+};
+function getVariantConfig(variant) {
+  return VARIANT_CONFIGS[variant];
+}
+function getContentStyle(variant, direction) {
+  const config = getVariantConfig(variant);
+  const style = {};
+  if (config.margin) {
+    switch (direction) {
+      case "bottom":
+        style.left = config.margin;
+        style.right = config.margin;
+        style.bottom = config.margin;
+        break;
+      case "top":
+        style.left = config.margin;
+        style.right = config.margin;
+        style.top = config.margin;
+        break;
+      case "left":
+        style.top = config.margin;
+        style.bottom = config.margin;
+        style.left = config.margin;
+        break;
+      case "right":
+        style.top = config.margin;
+        style.bottom = config.margin;
+        style.right = config.margin;
+        break;
+    }
+  }
+  if (config.borderRadius != null && config.borderRadius > 0) {
+    const r = `var(--hiraki-radius, ${config.borderRadius}px)`;
+    if (config.margin) {
+      style.borderRadius = r;
+    } else {
+      switch (direction) {
+        case "bottom":
+          style.borderTopLeftRadius = r;
+          style.borderTopRightRadius = r;
+          break;
+        case "top":
+          style.borderBottomLeftRadius = r;
+          style.borderBottomRightRadius = r;
+          break;
+        case "left":
+          style.borderTopRightRadius = r;
+          style.borderBottomRightRadius = r;
+          break;
+        case "right":
+          style.borderTopLeftRadius = r;
+          style.borderBottomLeftRadius = r;
+          break;
+      }
+    }
+  }
+  return style;
+}
+function getPositionStyle(direction) {
+  switch (direction) {
+    case "top":
+      return { top: 0, left: 0, right: 0 };
+    case "left":
+      return { left: 0, top: 0, bottom: 0 };
+    case "right":
+      return { right: 0, top: 0, bottom: 0 };
+    default:
+      return { bottom: 0, left: 0, right: 0 };
+  }
+}
+var Content = forwardRef(
+  function Content2({ children, style, ...props }, ref) {
+    const {
+      contentRef,
+      direction,
+      variant,
+      open,
+      titleId,
+      descriptionId,
+      gestureHandlers
+    } = useDrawerContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: composeRefs(contentRef, ref),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        "data-hiraki-content": "",
+        "data-hiraki-direction": direction,
+        "data-hiraki-variant": variant,
+        "data-hiraki-open": open ? "true" : "false",
+        "data-hiraki-dragging": "false",
+        "data-state": open ? "open" : "closed",
+        style: {
+          position: "fixed",
+          zIndex: "var(--hiraki-content-z, 50)",
+          willChange: "transform",
+          touchAction: "none",
+          ...getPositionStyle(direction),
+          ...getContentStyle(variant, direction),
+          ...style
+        },
+        ...gestureHandlers,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Content.displayName = "Drawer.Content";
+var Handle = forwardRef(
+  function Handle2({
+    handleOnly: _handleOnly = false,
+    visible = true,
+    style,
+    ...props
+  }, ref) {
+    const { direction } = useDrawerContext();
+    const isHorizontal2 = direction === "left" || direction === "right";
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-hiraki-handle": "",
+        "aria-hidden": "true",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: isHorizontal2 ? 20 : "100%",
+          height: isHorizontal2 ? 52 : 20,
+          margin: isHorizontal2 ? "0 8px" : "0",
+          flexShrink: 0,
+          cursor: isHorizontal2 ? "ew-resize" : "ns-resize",
+          touchAction: "none",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          ...style
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: isHorizontal2 ? 5 : 44,
+              height: isHorizontal2 ? 44 : 5,
+              borderRadius: 9999,
+              backgroundColor: "var(--hiraki-handle-bg, rgba(120, 120, 128, 0.42))",
+              boxShadow: "var(--hiraki-handle-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.22))",
+              pointerEvents: "none"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+Handle.displayName = "Drawer.Handle";
+var Title = forwardRef(
+  function Title2({ children, ...props }, ref) {
+    const { titleId } = useDrawerContext();
+    return /* @__PURE__ */ jsx("h2", { ref, id: titleId, "data-hiraki-title": "", ...props, children });
+  }
+);
+Title.displayName = "Drawer.Title";
+var Description = forwardRef(
+  function Description2({ children, ...props }, ref) {
+    const { descriptionId } = useDrawerContext();
+    return /* @__PURE__ */ jsx("p", { ref, id: descriptionId, "data-hiraki-description": "", ...props, children });
+  }
+);
+Description.displayName = "Drawer.Description";
+var Close = forwardRef(
+  function Close2({ children, onClick, asChild = false, ...props }, ref) {
+    const { forceClose } = useDrawerContext();
+    const handleClick = (e) => {
+      onClick?.(e);
+      forceClose();
+    };
+    if (asChild && isValidElement(children)) {
+      const child = children;
+      return cloneElement(child, {
+        ...props,
+        ref,
+        "data-hiraki-close": "",
+        onClick: (e) => {
+          if (typeof child.props.onClick === "function") child.props.onClick(e);
+          handleClick(e);
+        }
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-hiraki-close": "",
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Close.displayName = "Drawer.Close";
+var SnapIndicator = forwardRef(
+  function SnapIndicator2({ style, ...props }, ref) {
+    const { resolvedSnapPoints, activeSnapIndex, direction } = useDrawerContext();
+    const isHorizontal2 = direction === "left" || direction === "right";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-hiraki-snap-indicator": "",
+        "aria-hidden": "true",
+        style: {
+          display: "flex",
+          gap: 4,
+          flexDirection: isHorizontal2 ? "column" : "row",
+          justifyContent: "center",
+          ...style
+        },
+        ...props,
+        children: resolvedSnapPoints.map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-active": i === activeSnapIndex ? "true" : "false",
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              backgroundColor: i === activeSnapIndex ? "var(--hiraki-snap-active, currentColor)" : "var(--hiraki-snap-inactive, rgba(120, 120, 128, 0.32))",
+              transition: "background-color 200ms ease"
+            }
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+SnapIndicator.displayName = "Drawer.SnapIndicator";
+var ScrollArea = forwardRef(
+  function ScrollArea2({ children, style, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-hiraki-scroll-area": "",
+        style: {
+          overflowY: "auto",
+          overscrollBehavior: "contain",
+          WebkitOverflowScrolling: "touch",
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+ScrollArea.displayName = "Drawer.ScrollArea";
+
+// src/index.ts
+var Drawer = {
+  Root,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Handle,
+  Title,
+  Description,
+  Close,
+  SnapIndicator,
+  ScrollArea
+};
+
+export { Drawer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map