bits-lab 0.0.0-stage → 0.1.0

package/dist/SpotlightTour.js

@@ -0,0 +1,231 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-spotlight-tour";
+const CSS = `
+.bl-tour { position: fixed; inset: 0; z-index: 1950; font-family: var(--bl-font); }
+.bl-tour__shade { position: fixed; inset: 0; }
+.bl-tour__hole { position: fixed; top: 0; left: 0; border-radius: var(--bl-radius); box-shadow: 0 0 0 2px var(--bl-accent), 0 0 0 200vmax var(--bl-dim); pointer-events: none; transition: transform 420ms cubic-bezier(.3,1.2,.5,1), width 420ms cubic-bezier(.3,1.2,.5,1), height 420ms cubic-bezier(.3,1.2,.5,1); animation: bl-tour-in 260ms ease both; }
+.bl-tour__hole[data-none] { width: 0 !important; height: 0 !important; box-shadow: 0 0 0 200vmax var(--bl-dim); }
+.bl-tour__bubble { position: fixed; top: 0; left: 0; width: min(var(--bl-w), calc(100vw - 24px)); box-sizing: border-box; padding: 18px; border-radius: 14px; background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 24px 60px -24px rgba(0,0,0,0.9); outline: none; transition: transform 420ms cubic-bezier(.3,1.2,.5,1); }
+.bl-tour__card { animation: bl-tour-card 360ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-tour__step { color: var(--bl-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+.bl-tour__title { margin: 6px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
+.bl-tour__body { margin: 0; color: var(--bl-muted); font-size: 14px; line-height: 1.55; }
+.bl-tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
+.bl-tour__dots { display: flex; gap: 6px; }
+.bl-tour__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bl-line); transition: width 240ms, background-color 240ms; }
+.bl-tour__dots i[data-on] { width: 18px; border-radius: 4px; background: var(--bl-accent); }
+.bl-tour__btns { display: flex; gap: 8px; }
+.bl-tour__btn { padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
+.bl-tour__btn:hover { color: var(--bl-ink); }
+.bl-tour__btn[data-primary] { background: var(--bl-accent); color: var(--bl-on-accent); }
+.bl-tour__btn[data-primary]:hover { filter: brightness(1.12); }
+.bl-tour__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-tour__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-tour__close:hover { color: var(--bl-ink); background: var(--bl-line); }
+.bl-tour__close:focus-visible { outline: 2px solid var(--bl-accent); }
+@keyframes bl-tour-in { from { opacity: 0; } }
+@keyframes bl-tour-card { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
+@media (prefers-reduced-motion: reduce) { .bl-tour__hole, .bl-tour__bubble { transition: none; } .bl-tour__card { animation: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const resolve = (target) => typeof target === "string" ? document.querySelector(target) : target?.current ?? null;
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function SpotlightTour({
+  steps = [],
+  open = false,
+  onClose,
+  onStepChange,
+  startAt = 0,
+  padding = 8,
+  radius = 12,
+  gap = 14,
+  width = 320,
+  closeOnBackdrop = false,
+  backLabel = "Back",
+  nextLabel = "Next",
+  doneLabel = "Done",
+  skipLabel = "Skip tour",
+  dimColor = "rgba(8,8,16,0.68)",
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif"
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [index, setIndex] = useState(startAt);
+  const [hole, setHole] = useState(null);
+  const [bubblePos, setBubblePos] = useState({ x: 0, y: 0 });
+  const bubbleRef = useRef(null);
+  const returnFocus = useRef(null);
+  const step = steps[index];
+  const last = index === steps.length - 1;
+  useEffect(() => {
+    if (open) {
+      returnFocus.current = document.activeElement;
+      setIndex(startAt);
+    }
+  }, [open, startAt]);
+  const finish = (completed) => {
+    onClose?.(completed);
+    const back = returnFocus.current;
+    if (back instanceof HTMLElement) setTimeout(() => back.focus({ preventScroll: true }), 0);
+  };
+  const go = (next) => {
+    if (next < 0 || next >= steps.length) return;
+    setIndex(next);
+    onStepChange?.(next);
+  };
+  useLayoutEffect(() => {
+    if (!open || !step) return void 0;
+    const el = resolve(step.target);
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    el?.scrollIntoView?.({ block: "center", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+    let frame = 0;
+    const place = () => {
+      frame = 0;
+      const bubble = bubbleRef.current;
+      const bw = bubble?.offsetWidth ?? width;
+      const bh = bubble?.offsetHeight ?? 160;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      if (!el) {
+        setHole(null);
+        setBubblePos({ x: (vw - bw) / 2, y: (vh - bh) / 2 });
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      const box = { x: r.left - padding, y: r.top - padding, w: r.width + padding * 2, h: r.height + padding * 2 };
+      setHole(box);
+      const room = { bottom: vh - (box.y + box.h), top: box.y, right: vw - (box.x + box.w), left: box.x };
+      const fits = (side2) => side2 === "top" || side2 === "bottom" ? room[side2] >= bh + gap + 8 : room[side2] >= bw + gap + 8;
+      const side = step.side && fits(step.side) ? step.side : ["bottom", "top", "right", "left"].find(fits) ?? "bottom";
+      let x = side === "right" ? box.x + box.w + gap : side === "left" ? box.x - bw - gap : box.x + box.w / 2 - bw / 2;
+      let y = side === "bottom" ? box.y + box.h + gap : side === "top" ? box.y - bh - gap : box.y + box.h / 2 - bh / 2;
+      x = Math.max(12, Math.min(vw - bw - 12, x));
+      y = Math.max(12, Math.min(vh - bh - 12, y));
+      setBubblePos({ x, y });
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(place);
+    };
+    place();
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const resize = new ResizeObserver(schedule);
+    if (el) resize.observe(el);
+    if (bubbleRef.current) resize.observe(bubbleRef.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      resize.disconnect();
+    };
+  }, [open, step, padding, gap, width]);
+  useEffect(() => {
+    if (!open) return void 0;
+    bubbleRef.current?.focus({ preventScroll: true });
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        finish(false);
+      } else if (event.key === "ArrowRight") {
+        if (last) finish(true);
+        else go(index + 1);
+      } else if (event.key === "ArrowLeft") {
+        go(index - 1);
+      } else if (event.key === "Tab") {
+        const items = [...bubbleRef.current?.querySelectorAll(FOCUSABLE) ?? []];
+        if (!items.length) return;
+        const first = items[0];
+        const end = items[items.length - 1];
+        if (event.shiftKey && (document.activeElement === first || document.activeElement === bubbleRef.current)) {
+          event.preventDefault();
+          end.focus();
+        } else if (!event.shiftKey && document.activeElement === end) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, index]);
+  if (!open || !step) return null;
+  const vars = {
+    "--bl-dim": dimColor,
+    "--bl-radius": `${radius}px`,
+    "--bl-w": `${width}px`,
+    "--bl-bg": backgroundColor,
+    "--bl-ink": textColor,
+    "--bl-muted": mutedColor,
+    "--bl-line": lineColor,
+    "--bl-accent": accentColor,
+    "--bl-on-accent": onAccentColor,
+    "--bl-font": fontFamily
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "bl-tour", style: vars, children: [
+      /* @__PURE__ */ jsx("div", { className: "bl-tour__shade", onClick: () => closeOnBackdrop && finish(false) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bl-tour__hole",
+          "data-none": !hole || void 0,
+          style: hole ? { width: hole.w, height: hole.h, transform: `translate(${hole.x}px, ${hole.y}px)` } : { transform: `translate(50vw, 50vh)` },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: bubbleRef,
+          className: "bl-tour__bubble",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": `${uid}-title`,
+          "aria-describedby": `${uid}-body`,
+          tabIndex: -1,
+          style: { transform: `translate(${bubblePos.x}px, ${bubblePos.y}px)` },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "bl-tour__card", children: [
+              /* @__PURE__ */ jsxs("div", { className: "bl-tour__step", children: [
+                "Step ",
+                index + 1,
+                " of ",
+                steps.length
+              ] }),
+              /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, className: "bl-tour__title", children: step.title }),
+              /* @__PURE__ */ jsx("div", { id: `${uid}-body`, className: "bl-tour__body", children: step.body }),
+              /* @__PURE__ */ jsxs("div", { className: "bl-tour__foot", children: [
+                /* @__PURE__ */ jsx("span", { className: "bl-tour__dots", "aria-hidden": "true", children: steps.map((_, i) => /* @__PURE__ */ jsx("i", { "data-on": i === index || void 0 }, i)) }),
+                /* @__PURE__ */ jsxs("span", { className: "bl-tour__btns", children: [
+                  index > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-tour__btn", onClick: () => go(index - 1), children: backLabel }),
+                  /* @__PURE__ */ jsx("button", { type: "button", className: "bl-tour__btn", "data-primary": "", onClick: () => last ? finish(true) : go(index + 1), children: last ? doneLabel : nextLabel })
+                ] })
+              ] })
+            ] }, index),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-tour__close", "aria-label": skipLabel, onClick: () => finish(false), children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2 2 10" }) }) })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  SpotlightTour as default
+};

package/dist/SpringDrawer.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export interface SpringDrawerProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Drag-to-close, Esc and the backdrop call this with false. */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+    /** Heading; also the dialog's accessible name. */
+    title?: ReactNode;
+    /** Wired up as the dialog's accessible description. */
+    description?: ReactNode;
+    side?: 'bottom' | 'right' | 'left';
+    /** Bottom only: open heights as fractions of the viewport (or container). */
+    snapPoints?: number[];
+    /** Index into the sorted snap points to open at. */
+    defaultSnap?: number;
+    /** Side drawers: width, in px. */
+    size?: number;
+    /** Bottom sheet max width, in px. */
+    maxWidth?: number;
+    /** Allow closing by drag, Esc and backdrop. */
+    dismissible?: boolean;
+    /** Render inside the parent element instead of the window. Nested drawers inherit it. */
+    contained?: boolean;
+    /** Spring stiffness. */
+    stiffness?: number;
+    /** Damping ratio: below 1 bounces, 1 is critically damped. */
+    damping?: number;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    backdropColor?: string;
+    fontFamily?: string;
+    className?: string;
+}
+export default function SpringDrawer({ open, onOpenChange, children, title, description, side, snapPoints, defaultSnap, size, maxWidth, dismissible, contained, stiffness, damping, radius, backgroundColor, textColor, mutedColor, lineColor, accentColor, backdropColor, fontFamily, className }: SpringDrawerProps): import("react").JSX.Element;

package/dist/SpringDrawer.js

@@ -0,0 +1,360 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-spring-drawer";
+const CSS = `
+.bl-drawer__backdrop { position: fixed; inset: 0; background: var(--bl-backdrop); opacity: 0; }
+.bl-drawer__shell { position: fixed; display: flex; flex-direction: column; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line), 0 -20px 60px -20px rgba(0,0,0,0.6); outline: none; touch-action: none; will-change: transform; transition: filter 300ms; }
+.bl-drawer[data-contained] .bl-drawer__backdrop, .bl-drawer[data-contained] .bl-drawer__shell { position: absolute; }
+.bl-drawer[data-side="bottom"] .bl-drawer__shell { left: 0; right: 0; bottom: 0; max-width: var(--bl-max-w); margin: 0 auto; height: var(--bl-size); border-radius: var(--bl-radius) var(--bl-radius) 0 0; }
+.bl-drawer[data-side="right"] .bl-drawer__shell { top: 0; bottom: 0; right: 0; width: var(--bl-size); max-width: 92%; border-radius: var(--bl-radius) 0 0 var(--bl-radius); }
+.bl-drawer[data-side="left"] .bl-drawer__shell { top: 0; bottom: 0; left: 0; width: var(--bl-size); max-width: 92%; border-radius: 0 var(--bl-radius) var(--bl-radius) 0; }
+.bl-drawer__shell[data-nested] { filter: brightness(0.7); }
+.bl-drawer__handle { flex: 0 0 auto; display: grid; place-items: center; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; }
+.bl-drawer__handle::before { content: ""; width: 44px; height: 5px; border-radius: var(--bl-pill); background: var(--bl-muted); opacity: 0.5; }
+.bl-drawer__handle:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -4px; }
+.bl-drawer[data-side="right"] .bl-drawer__handle, .bl-drawer[data-side="left"] .bl-drawer__handle { position: absolute; top: 50%; width: 28px; height: 60px; transform: translateY(-50%); }
+.bl-drawer[data-side="right"] .bl-drawer__handle { left: 0; }
+.bl-drawer[data-side="left"] .bl-drawer__handle { right: 0; }
+.bl-drawer[data-side="right"] .bl-drawer__handle::before, .bl-drawer[data-side="left"] .bl-drawer__handle::before { width: 5px; height: 44px; }
+.bl-drawer__header { flex: 0 0 auto; padding: 4px 22px 10px; }
+.bl-drawer[data-side="right"] .bl-drawer__header, .bl-drawer[data-side="left"] .bl-drawer__header { padding-top: 22px; }
+.bl-drawer__title { margin: 0; font-size: 1.15em; font-weight: 700; }
+.bl-drawer__desc { margin: 4px 0 0; color: var(--bl-muted); font-size: 0.92em; }
+.bl-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px 22px; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const DrawerContext = createContext(null);
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function SpringDrawer({
+  open,
+  onOpenChange,
+  children,
+  title,
+  description,
+  side = "bottom",
+  snapPoints = [0.5, 0.92],
+  defaultSnap = 0,
+  size = 380,
+  maxWidth = 720,
+  dismissible = true,
+  contained = false,
+  stiffness = 520,
+  damping = 0.82,
+  radius = 20,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.1)",
+  accentColor = "#73eff7",
+  backdropColor = "rgba(8,8,16,0.6)",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = ""
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const parent = useContext(DrawerContext);
+  const anchorRef = useRef(null);
+  const shellRef = useRef(null);
+  const backdropRef = useRef(null);
+  const bodyRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [host, setHost] = useState(null);
+  const [nested, setNested] = useState(false);
+  const physics = useRef({ x: 0, v: 0, target: 0, frame: 0, onRest: null });
+  const geometry = useRef({ snaps: [0], closed: 1, full: 1 });
+  const [snapIndex, setSnapIndex] = useState(defaultSnap);
+  const opener = useRef(null);
+  const isContained = parent ? parent.contained : contained;
+  const bottom = side === "bottom";
+  const sign = side === "left" ? -1 : 1;
+  const request = (next) => onOpenChange?.(next);
+  const childContext = useMemo(() => ({ host, contained: isContained, setNested }), [host, isContained]);
+  useLayoutEffect(() => {
+    setHost(parent?.host ?? (contained ? anchorRef.current?.parentElement : document.body));
+  }, [parent, contained]);
+  const measure = () => {
+    const box = isContained ? host : null;
+    const viewH = box ? box.clientHeight : window.innerHeight;
+    const viewW = box ? box.clientWidth : window.innerWidth;
+    if (bottom) {
+      const points = [...snapPoints].sort((a, b) => a - b);
+      const full = Math.max(...points) * viewH;
+      geometry.current = { full, closed: full, snaps: points.map((p) => full - p * viewH) };
+    } else {
+      const full = Math.min(size, viewW * 0.92);
+      geometry.current = { full, closed: full, snaps: [0] };
+    }
+    shellRef.current?.style.setProperty("--bl-size", `${geometry.current.full}px`);
+  };
+  const apply = () => {
+    const { x } = physics.current;
+    const { closed, snaps } = geometry.current;
+    const shell = shellRef.current;
+    if (!shell) return;
+    const pushed = nestedRef.current ? bottom ? " scale(0.94) translateY(-14px)" : " scale(0.96)" : "";
+    shell.style.transform = bottom ? `translate3d(0, ${x}px, 0)${pushed}` : `translate3d(${sign * x}px, 0, 0)${pushed}`;
+    const openAmount = 1 - Math.min(1, Math.max(0, (x - Math.min(...snaps)) / Math.max(1, closed - Math.min(...snaps))));
+    if (backdropRef.current) backdropRef.current.style.opacity = String(openAmount);
+  };
+  const nestedRef = useRef(false);
+  nestedRef.current = nested;
+  const springTo = (target, velocity = physics.current.v, onRest = null) => {
+    const p = physics.current;
+    p.target = target;
+    p.v = velocity;
+    p.onRest = onRest;
+    cancelAnimationFrame(p.frame);
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      p.x = target;
+      p.v = 0;
+      apply();
+      onRest?.();
+      return;
+    }
+    const critical = 2 * Math.sqrt(stiffness);
+    let last = performance.now();
+    const step = (now) => {
+      const dt = Math.min(0.25, (now - last) / 1e3);
+      last = now;
+      const steps = Math.max(1, Math.ceil(dt / 4e-3));
+      for (let i = 0; i < steps; i++) {
+        const h = dt / steps;
+        const force = -stiffness * (p.x - p.target) - critical * damping * p.v;
+        p.v += force * h;
+        p.x += p.v * h;
+      }
+      apply();
+      if (Math.abs(p.x - p.target) < 0.4 && Math.abs(p.v) < 8) {
+        p.x = p.target;
+        p.v = 0;
+        apply();
+        p.frame = 0;
+        const done = p.onRest;
+        p.onRest = null;
+        done?.();
+        return;
+      }
+      p.frame = requestAnimationFrame(step);
+    };
+    p.frame = requestAnimationFrame(step);
+  };
+  useEffect(() => {
+    if (open) {
+      opener.current = document.activeElement;
+      setSnapIndex(Math.min(defaultSnap, (bottom ? snapPoints.length : 1) - 1));
+      setMounted(true);
+    } else if (mounted) {
+      springTo(geometry.current.closed, physics.current.v, () => {
+        setMounted(false);
+        opener.current?.focus?.({ preventScroll: true });
+      });
+    }
+    parent?.setNested(open);
+  }, [open]);
+  useEffect(() => () => parent?.setNested(false), [parent]);
+  useLayoutEffect(() => {
+    if (!mounted || !host) return;
+    measure();
+    physics.current.x = geometry.current.closed;
+    apply();
+    springTo(geometry.current.snaps[Math.min(snapIndex, geometry.current.snaps.length - 1)], 0);
+    shellRef.current.focus({ preventScroll: true });
+    let unlock = () => {
+    };
+    if (!isContained && !parent) {
+      const previous = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      unlock = () => document.body.style.overflow = previous;
+    }
+    const onResize = () => {
+      measure();
+      springTo(geometry.current.snaps[Math.min(snapIndexRef.current, geometry.current.snaps.length - 1)]);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      unlock();
+      window.removeEventListener("resize", onResize);
+      cancelAnimationFrame(physics.current.frame);
+    };
+  }, [mounted, host]);
+  const snapIndexRef = useRef(snapIndex);
+  snapIndexRef.current = snapIndex;
+  useEffect(() => {
+    if (mounted) apply();
+  }, [nested]);
+  const goToSnap = (index) => {
+    const { snaps } = geometry.current;
+    if (index < 0) {
+      if (dismissible) request(false);
+      return;
+    }
+    const clamped = Math.min(snaps.length - 1, index);
+    setSnapIndex(clamped);
+    springTo(snaps[clamped]);
+  };
+  const drag = useRef(null);
+  const onPointerDown = (event) => {
+    if (event.button > 0 || event.target.closest("input, textarea, select, a, [data-no-drag]")) return;
+    const inBody = bodyRef.current?.contains(event.target);
+    if (inBody && bodyRef.current.scrollTop > 0) return;
+    if (event.target.closest("button") && !event.target.closest(".bl-drawer__handle")) return;
+    cancelAnimationFrame(physics.current.frame);
+    drag.current = { id: event.pointerId, start: bottom ? event.clientY : event.clientX, origin: physics.current.x, samples: [], moved: false, inBody };
+  };
+  const onPointerMove = (event) => {
+    const d = drag.current;
+    if (!d || event.pointerId !== d.id) return;
+    const pos = bottom ? event.clientY : event.clientX;
+    let delta = (pos - d.start) * (bottom ? 1 : sign);
+    if (!d.moved) {
+      if (Math.abs(delta) < 4) return;
+      if (d.inBody && delta < 0 && bodyRef.current.scrollHeight > bodyRef.current.clientHeight) {
+        drag.current = null;
+        return;
+      }
+      d.moved = true;
+      try {
+        shellRef.current.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    let x = d.origin + delta;
+    const min = Math.min(...geometry.current.snaps);
+    if (x < min) x = min - Math.pow(min - x, 0.7);
+    if (!dismissible && x > geometry.current.snaps[0]) x = geometry.current.snaps[0] + Math.pow(x - geometry.current.snaps[0], 0.7);
+    physics.current.x = x;
+    d.samples.push([performance.now(), x]);
+    if (d.samples.length > 5) d.samples.shift();
+    apply();
+  };
+  const onPointerUp = (event) => {
+    const d = drag.current;
+    drag.current = null;
+    if (!d || !d.moved) return;
+    if (shellRef.current.hasPointerCapture?.(event.pointerId)) shellRef.current.releasePointerCapture(event.pointerId);
+    const [first, last] = [d.samples[0], d.samples[d.samples.length - 1]];
+    const velocity = first && last && last[0] > first[0] ? (last[1] - first[1]) / (last[0] - first[0]) * 1e3 : 0;
+    const projected = physics.current.x + velocity * 0.2;
+    const { snaps, closed } = geometry.current;
+    const candidates = snaps.map((x, i) => ({ x, i }));
+    if (dismissible) candidates.push({ x: closed, i: -1 });
+    const best = candidates.reduce((a, b) => Math.abs(b.x - projected) < Math.abs(a.x - projected) ? b : a);
+    physics.current.v = velocity;
+    if (best.i === -1) request(false);
+    else {
+      setSnapIndex(best.i);
+      springTo(best.x, velocity);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && dismissible) {
+      event.stopPropagation();
+      request(false);
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = [...shellRef.current.querySelectorAll(FOCUSABLE)].filter((el) => !el.closest("[inert]"));
+    if (!items.length) return event.preventDefault();
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === shellRef.current)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  const onHandleKey = (event) => {
+    if (!bottom) return;
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      goToSnap(snapIndex + 1);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      goToSnap(snapIndex - 1);
+    }
+  };
+  const snapCount = bottom ? snapPoints.length : 1;
+  const content = mounted && host && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-drawer ${className}`,
+      "data-side": side,
+      "data-contained": isContained || void 0,
+      style: {
+        position: isContained ? "absolute" : "fixed",
+        inset: 0,
+        zIndex: 1200,
+        pointerEvents: "none",
+        "--bl-radius": `${radius}px`,
+        "--bl-pill": radius ? "999px" : "0",
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-backdrop": backdropColor,
+        "--bl-font": fontFamily,
+        "--bl-max-w": `${maxWidth}px`,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "bl-drawer__backdrop", style: { pointerEvents: "auto" }, onClick: () => dismissible && request(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: shellRef,
+            className: "bl-drawer__shell",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? `${uid}-title` : void 0,
+            "aria-describedby": description ? `${uid}-desc` : void 0,
+            tabIndex: -1,
+            "data-nested": nested || void 0,
+            inert: nested ? true : void 0,
+            style: { pointerEvents: "auto" },
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bl-drawer__handle",
+                  "aria-label": bottom && snapCount > 1 ? `Resize drawer (position ${snapIndex + 1} of ${snapCount}). Use up and down arrows.` : "Drag to close",
+                  onKeyDown: onHandleKey,
+                  onClick: () => bottom && snapCount > 1 && goToSnap((snapIndex + 1) % snapCount)
+                }
+              ),
+              (title || description) && /* @__PURE__ */ jsxs("div", { className: "bl-drawer__header", children: [
+                title && /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, className: "bl-drawer__title", children: title }),
+                description && /* @__PURE__ */ jsx("p", { id: `${uid}-desc`, className: "bl-drawer__desc", children: description })
+              ] }),
+              /* @__PURE__ */ jsx("div", { ref: bodyRef, className: "bl-drawer__body", children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: childContext, children }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: anchorRef, hidden: true }),
+    content && createPortal(content, host)
+  ] });
+}
+export {
+  SpringDrawer as default
+};

package/dist/SpriteAnimator.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties } from 'react';
+export interface SpriteAnimation {
+    /** Row of the sheet this animation lives on (0 is the top). */
+    row?: number;
+    /** Number of frames in the row. */
+    frames?: number;
+    /** Frames per second. */
+    fps?: number;
+    loop?: boolean;
+    /** Play forward then backward instead of jumping back to frame 0. */
+    pingPong?: boolean;
+}
+export interface SpriteAnimatorProps {
+    /** Sprite sheet image URL. */
+    src?: string;
+    /** Size of one frame on the sheet, in px. */
+    frameWidth?: number;
+    frameHeight?: number;
+    /** Named animations; pick one with `animation`. */
+    animations?: Record<string, SpriteAnimation>;
+    /** Key of the animation to play. Without it, `row`, `frames` and `fps` are used. */
+    animation?: string;
+    row?: number;
+    frames?: number;
+    fps?: number;
+    /** Integer upscaling factor (pixels stay crisp). */
+    scale?: number;
+    loop?: boolean;
+    pingPong?: boolean;
+    /** Pause on the current frame when false. */
+    playing?: boolean;
+    /** Mirror horizontally. */
+    flipX?: boolean;
+    /** Accessible description of the sprite. */
+    label?: string;
+    /** Called when a non-looping animation reaches its last frame. */
+    onEnd?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SpriteAnimator({ src, frameWidth, frameHeight, animations, animation, row, frames, fps, scale, loop, pingPong, playing, flipX, label, onEnd, className, style }: SpriteAnimatorProps): import("react").JSX.Element;