bits-lab 0.0.0-stage → 0.1.0

package/dist/Minimap.js

@@ -0,0 +1,236 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-minimap";
+const CSS = `
+.bl-mini { position: relative; flex: 0 0 auto; overflow: hidden; background: var(--bl-bg); box-shadow: 0 0 0 2px var(--bl-edge); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
+.bl-mini:focus-visible { outline: 2px solid var(--bl-view); outline-offset: 3px; }
+.bl-mini canvas { position: absolute; top: 0; left: 0; image-rendering: pixelated; }
+.bl-mini__view { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; border: 2px solid var(--bl-view); background: color-mix(in srgb, var(--bl-view) 14%, transparent); cursor: grab; will-change: transform; }
+.bl-mini[data-dragging] .bl-mini__view { cursor: grabbing; background: color-mix(in srgb, var(--bl-view) 24%, transparent); }
+`;
+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 KINDS = {
+  heading: /^H[1-6]$/,
+  media: /^(IMG|VIDEO|CANVAS|SVG|PICTURE|FIGURE|IFRAME)$/,
+  code: /^(PRE|CODE|TABLE)$/,
+  control: /^(BUTTON|INPUT|SELECT|TEXTAREA)$/
+};
+const DEFAULT_COLORS = { heading: "#ffcd75", text: "#566c86", media: "#41a6f6", code: "#a7f070", control: "#ef7d57" };
+const kindOf = (node) => Object.keys(KINDS).find((kind) => KINDS[kind].test(node.tagName.toUpperCase())) ?? "text";
+function Minimap({
+  target,
+  selector = "h1, h2, h3, h4, h5, h6, p, li, blockquote, img, video, canvas, svg, picture, pre, table, button, input, textarea",
+  width = 96,
+  height = 320,
+  pixelSize = 2,
+  colors,
+  backgroundColor = "#0b0b14",
+  edgeColor = "#333c57",
+  viewportColor = "#73eff7",
+  label = "Page overview",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const canvasRef = useRef(null);
+  const viewRef = useRef(null);
+  const [progress, setProgress] = useState(0);
+  const [mapHeight, setMapHeight] = useState(height);
+  const geometry = useRef({ scale: 1, contentH: 1, viewH: 1, offset: 0, maxScroll: 0, blocks: [] });
+  const palette = { ...DEFAULT_COLORS, ...colors };
+  const paletteKey = JSON.stringify(palette);
+  useEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const isWindow = !target;
+    const scroller = () => target?.current ?? document.scrollingElement ?? document.documentElement;
+    const scrollTop = () => isWindow ? window.scrollY : scroller().scrollTop;
+    const colorsNow = JSON.parse(paletteKey);
+    let frame = 0;
+    const measure = () => {
+      const el2 = scroller();
+      if (!el2) return;
+      const g = geometry.current;
+      const box = isWindow ? { top: 0, left: 0 } : el2.getBoundingClientRect();
+      const originTop = box.top + (isWindow ? 0 : el2.clientTop) - scrollTop();
+      const originLeft = box.left + (isWindow ? 0 : el2.clientLeft) - (isWindow ? window.scrollX : el2.scrollLeft);
+      const contentW = isWindow ? document.documentElement.clientWidth : el2.clientWidth;
+      g.viewH = isWindow ? window.innerHeight : el2.clientHeight;
+      g.contentH = Math.max(el2.scrollHeight, g.viewH);
+      g.maxScroll = Math.max(0, g.contentH - g.viewH);
+      g.scale = width / Math.max(1, contentW);
+      g.blocks = [];
+      for (const node of el2.querySelectorAll(selector)) {
+        if (root.contains(node)) continue;
+        const r = node.getBoundingClientRect();
+        if (!r.width || !r.height) continue;
+        const kind = kindOf(node);
+        const line = kind === "text" || kind === "heading" ? parseFloat(getComputedStyle(node).lineHeight) || r.height : 0;
+        g.blocks.push({ x: r.left - originLeft, y: r.top - originTop, w: r.width, h: r.height, kind, line });
+      }
+      setMapHeight(Math.min(height, Math.ceil(g.contentH * g.scale)));
+      draw();
+    };
+    const draw = () => {
+      const g = geometry.current;
+      const fullH = g.contentH * g.scale;
+      const visibleH = Math.min(height, fullH);
+      const p = g.maxScroll ? Math.min(1, Math.max(0, scrollTop() / g.maxScroll)) : 0;
+      g.offset = p * Math.max(0, fullH - visibleH);
+      const px = Math.max(1, pixelSize);
+      canvas.width = Math.ceil(width / px);
+      canvas.height = Math.ceil(visibleH / px);
+      canvas.style.width = `${canvas.width * px}px`;
+      canvas.style.height = `${canvas.height * px}px`;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const s = g.scale / px;
+      const off = g.offset / px;
+      for (const b of g.blocks) {
+        const y = b.y * s - off;
+        const h = Math.max(1, b.h * s);
+        if (y + h < 0 || y > canvas.height) continue;
+        ctx.fillStyle = colorsNow[b.kind] ?? colorsNow.text;
+        const x = Math.round(b.x * s);
+        const w = Math.max(1, Math.round(b.w * s));
+        const pitch = b.line * s;
+        if (pitch >= 2) {
+          const count = Math.max(1, Math.round(b.h / b.line));
+          for (let i = 0; i < count; i++) {
+            const lineW = i === count - 1 && count > 1 ? Math.max(1, Math.round(w * 0.6)) : w;
+            ctx.fillRect(x, Math.round(y + i * pitch), lineW, Math.max(1, Math.round(pitch * 0.55)));
+          }
+        } else {
+          ctx.fillRect(x, Math.round(y), w, Math.round(h));
+        }
+      }
+      const view = viewRef.current;
+      if (view) {
+        view.style.height = `${Math.max(8, g.viewH * g.scale)}px`;
+        view.style.transform = `translateY(${scrollTop() * g.scale - g.offset}px)`;
+      }
+      setProgress(Math.round(p * 100));
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        draw();
+      });
+    };
+    let timer = 0;
+    const remeasure = () => {
+      clearTimeout(timer);
+      timer = setTimeout(measure, 120);
+    };
+    const scrollSource = isWindow ? window : scroller();
+    scrollSource?.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", remeasure);
+    const resize = new ResizeObserver(remeasure);
+    const el = scroller();
+    if (el) {
+      resize.observe(el);
+      for (const child of el.children) resize.observe(child);
+    }
+    const mutations = new MutationObserver(remeasure);
+    if (el) mutations.observe(el, { childList: true, subtree: true, characterData: true });
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      scrollSource?.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", remeasure);
+      resize.disconnect();
+      mutations.disconnect();
+    };
+  }, [target, selector, width, height, pixelSize, paletteKey]);
+  const scrollTo = (top, smooth = false) => {
+    const g = geometry.current;
+    const value = Math.max(0, Math.min(g.maxScroll, top));
+    const behavior = smooth && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "smooth" : "instant";
+    if (target) target.current?.scrollTo({ top: value, behavior });
+    else window.scrollTo({ top: value, behavior });
+  };
+  const currentScroll = () => target ? target.current?.scrollTop ?? 0 : window.scrollY;
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    const root = rootRef.current;
+    const g = geometry.current;
+    const rect = root.getBoundingClientRect();
+    const onBox = viewRef.current?.contains(event.target);
+    if (!onBox) {
+      scrollTo((event.clientY - rect.top + g.offset) / g.scale - g.viewH / 2, true);
+      return;
+    }
+    event.preventDefault();
+    try {
+      root.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    root.setAttribute("data-dragging", "");
+    const startY = event.clientY;
+    const startScroll = currentScroll();
+    const travel = Math.max(1, Math.min(height, g.contentH * g.scale) - g.viewH * g.scale);
+    const ratio = g.maxScroll / travel;
+    const onMove = (move) => scrollTo(startScroll + (move.clientY - startY) * ratio);
+    const onUp = () => {
+      root.removeAttribute("data-dragging");
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerup", onUp);
+      root.removeEventListener("pointercancel", onUp);
+    };
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerup", onUp);
+    root.addEventListener("pointercancel", onUp);
+  };
+  const onKeyDown = (event) => {
+    const g = geometry.current;
+    const now = currentScroll();
+    const moves = {
+      ArrowDown: now + g.viewH * 0.15,
+      ArrowUp: now - g.viewH * 0.15,
+      PageDown: now + g.viewH * 0.9,
+      PageUp: now - g.viewH * 0.9,
+      Home: 0,
+      End: g.maxScroll
+    };
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    scrollTo(moves[event.key], event.key === "Home" || event.key === "End" || event.key.startsWith("Page"));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-mini ${className}`,
+      role: "scrollbar",
+      "aria-label": label,
+      "aria-orientation": "vertical",
+      "aria-controls": target?.current?.id || void 0,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": progress,
+      "aria-valuetext": `${progress}%`,
+      tabIndex: 0,
+      onPointerDown,
+      onKeyDown,
+      style: { width, height: mapHeight, "--bl-bg": backgroundColor, "--bl-edge": edgeColor, "--bl-view": viewportColor, ...style },
+      children: [
+        /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { ref: viewRef, className: "bl-mini__view", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  Minimap as default
+};

package/dist/MobileTabBar.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties, type ReactNode, type MouseEvent as ReactMouseEvent } from 'react';
+export interface MobileTab {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Unread count or marker. */
+    badge?: ReactNode;
+    /** Fires when the active tab is tapped again (e.g. scroll to top). */
+    onReselect?: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+}
+export interface MobileTabBarProps {
+    tabs?: MobileTab[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string, tab: MobileTab) => void;
+    /** Show every label, or only the active one. */
+    labels?: 'active' | 'always';
+    /** A floating pill instead of a full-width bar. */
+    floating?: boolean;
+    /** Fixed to the bottom of the viewport. */
+    fixed?: boolean;
+    /** A short vibration on change, where supported. */
+    haptics?: boolean;
+    /** How much the blob stretches between tabs. */
+    stretch?: number;
+    label?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    activeColor?: string;
+    blobColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    badgeColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MobileTabBar({ tabs, value, defaultValue, onValueChange, labels, floating, fixed, haptics, stretch, label, backgroundColor, textColor, activeColor, blobColor, lineColor, accentColor, badgeColor, fontFamily, className, style }: MobileTabBarProps): import("react").JSX.Element;

package/dist/MobileTabBar.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-mobile-tab-bar";
+const CSS = `
+.bl-tabbar { position: relative; display: flex; width: 100%; box-sizing: border-box; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bl-bg); color: var(--bl-muted); font-family: var(--bl-font); box-shadow: 0 -1px 0 var(--bl-line); }
+.bl-tabbar[data-floating] { width: auto; margin: 0 12px 12px; padding-bottom: 8px; border-radius: 999px; box-shadow: 0 0 0 1px var(--bl-line), 0 16px 40px -16px rgba(0,0,0,0.8); }
+.bl-tabbar[data-fixed] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
+.bl-tabbar__blob { position: absolute; top: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: var(--bl-l, 0px); right: var(--bl-r, 0px); border-radius: 999px; background: var(--bl-blob); transition: left var(--bl-lead-l) cubic-bezier(.3,1.2,.5,1) var(--bl-delay-l), right var(--bl-lead-r) cubic-bezier(.3,1.2,.5,1) var(--bl-delay-r); pointer-events: none; }
+.bl-tabbar[data-floating] .bl-tabbar__blob { bottom: 8px; }
+.bl-tabbar__tab { position: relative; z-index: 1; flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 48px; padding: 6px 4px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 200ms; }
+.bl-tabbar__tab[aria-current="page"] { color: var(--bl-active); }
+.bl-tabbar__tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -4px; }
+.bl-tabbar__icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
+.bl-tabbar__icon > * { max-width: 100%; max-height: 100%; }
+.bl-tabbar__tab[data-bounce] .bl-tabbar__icon { animation: bl-tabbar-bounce 520ms cubic-bezier(.3,1.6,.5,1); }
+.bl-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bl-tabbar[data-labels="active"] .bl-tabbar__label { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.3,1.2,.5,1), opacity 200ms; }
+.bl-tabbar[data-labels="active"] .bl-tabbar__label > span { min-height: 0; overflow: hidden; }
+.bl-tabbar[data-labels="active"] .bl-tabbar__tab[aria-current="page"] .bl-tabbar__label { grid-template-rows: 1fr; opacity: 1; }
+.bl-tabbar__badge { position: absolute; top: -4px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--bl-badge); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bl-bg); }
+.bl-tabbar__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-tabbar-bounce { 0% { transform: scale(1); } 30% { transform: scale(0.8) translateY(2px); } 60% { transform: scale(1.18) translateY(-3px); } 100% { transform: none; } }
+@media (prefers-reduced-motion: reduce) { .bl-tabbar__blob { transition: none; } .bl-tabbar__tab[data-bounce] .bl-tabbar__icon { animation: none; } .bl-tabbar[data-labels="active"] .bl-tabbar__label { transition: 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);
+  }, []);
+}
+function MobileTabBar({
+  tabs = [],
+  value,
+  defaultValue,
+  onValueChange,
+  labels = "active",
+  floating = false,
+  fixed = false,
+  haptics = false,
+  stretch = 1,
+  label = "Main",
+  backgroundColor = "#1a1c2c",
+  textColor = "#94b0c2",
+  activeColor = "#0b0b14",
+  blobColor = "#73eff7",
+  lineColor = "#333c57",
+  accentColor = "#f4f4f4",
+  badgeColor = "#b13e53",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [inner, setInner] = useState(defaultValue ?? tabs[0]?.id);
+  const current = value !== void 0 ? value : inner;
+  const [bounce, setBounce] = useState(null);
+  const rootRef = useRef(null);
+  const tabRefs = useRef({});
+  const last = useRef(null);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const place = (animate = true) => {
+      const tab = tabRefs.current[current];
+      if (!root || !tab) return;
+      const width = root.clientWidth;
+      const left = tab.offsetLeft;
+      const right = width - (tab.offsetLeft + tab.offsetWidth);
+      const previous = last.current;
+      const goingRight = previous != null && left > previous;
+      const lead = `${Math.round(260 / stretch)}ms`;
+      const tail = `${Math.round(420 * stretch)}ms`;
+      const delay = `${Math.round(70 * stretch)}ms`;
+      root.style.setProperty("--bl-lead-l", animate ? goingRight ? tail : lead : "0ms");
+      root.style.setProperty("--bl-lead-r", animate ? goingRight ? lead : tail : "0ms");
+      root.style.setProperty("--bl-delay-l", animate && goingRight ? delay : "0ms");
+      root.style.setProperty("--bl-delay-r", animate && !goingRight ? delay : "0ms");
+      root.style.setProperty("--bl-l", `${left}px`);
+      root.style.setProperty("--bl-r", `${right}px`);
+      last.current = left;
+    };
+    place(last.current !== null);
+    const resize = new ResizeObserver(() => place(false));
+    resize.observe(root);
+    return () => resize.disconnect();
+  }, [current, tabs.length, labels, stretch]);
+  const choose = (tab, event) => {
+    if (tab.id === current) {
+      tab.onReselect?.(event);
+      return;
+    }
+    if (value === void 0) setInner(tab.id);
+    onValueChange?.(tab.id, tab);
+    setBounce(tab.id);
+    if (haptics && navigator.userActivation?.hasBeenActive !== false && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) navigator.vibrate?.(8);
+  };
+  const onKeyDown = (event, index) => {
+    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (!step) return;
+    event.preventDefault();
+    const next = tabs[(index + step + tabs.length) % tabs.length];
+    tabRefs.current[next.id]?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: rootRef,
+      className: `bl-tabbar ${className}`,
+      "aria-label": label,
+      "data-labels": labels,
+      "data-floating": floating || void 0,
+      "data-fixed": fixed || void 0,
+      style: { "--bl-bg": backgroundColor, "--bl-active": activeColor, "--bl-blob": blobColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-badge": badgeColor, "--bl-font": fontFamily, color: textColor, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-tabbar__blob", "aria-hidden": "true" }),
+        tabs.map((tab, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (node) => {
+              tabRefs.current[tab.id] = node;
+            },
+            type: "button",
+            className: "bl-tabbar__tab",
+            "aria-current": tab.id === current ? "page" : void 0,
+            "aria-label": tab.badge ? `${tab.label}, ${tab.badge} new` : void 0,
+            "data-bounce": bounce === tab.id || void 0,
+            onAnimationEnd: () => bounce === tab.id && setBounce(null),
+            onClick: (event) => choose(tab, event),
+            onKeyDown: (event) => onKeyDown(event, i),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "bl-tabbar__icon", "aria-hidden": "true", children: [
+                tab.icon,
+                tab.badge ? /* @__PURE__ */ jsx("span", { className: "bl-tabbar__badge", children: tab.badge }) : null
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "bl-tabbar__label", children: /* @__PURE__ */ jsx("span", { children: tab.label }) })
+            ]
+          },
+          tab.id
+        ))
+      ]
+    }
+  );
+}
+export {
+  MobileTabBar as default
+};

package/dist/MorphDialog.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MorphDialogProps {
+    /** Card content below the shared media. The card is a button. */
+    card?: ReactNode;
+    /** Dialog content. Mark an element with data-autofocus to focus it on open. */
+    children?: ReactNode;
+    /** Dialog heading; also its accessible name. */
+    title?: ReactNode;
+    /** Shared image or video at the top of both the card and the dialog. */
+    media?: ReactNode;
+    cardMediaHeight?: number;
+    dialogMediaHeight?: number;
+    /** Dialog width, in px. */
+    width?: number;
+    /** Dialog max height (any CSS length); the body scrolls beyond it. */
+    maxHeight?: string;
+    radius?: number;
+    /** Morph length, in ms. */
+    duration?: number;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    backgroundColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    backdropColor?: string;
+    /** Backdrop blur, in px. */
+    backdropBlur?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MorphDialog({ card, children, title, media, cardMediaHeight, dialogMediaHeight, width, maxHeight, radius, duration, open: controlledOpen, onOpenChange, backgroundColor, textColor, lineColor, accentColor, backdropColor, backdropBlur, fontFamily, className, style }: MorphDialogProps): import("react").JSX.Element;

package/dist/MorphDialog.js

@@ -0,0 +1,199 @@
+'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-morph-dialog";
+const CSS = `
+.bl-md__card { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font: inherit; font-family: var(--bl-font, inherit); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--bl-line); transition: transform 200ms, box-shadow 200ms; }
+.bl-md__card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--bl-line), 0 12px 30px -16px rgba(0,0,0,0.6); }
+.bl-md__card:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-md__card[data-hidden] { visibility: hidden; }
+.bl-md__media { overflow: hidden; }
+.bl-md__media > img, .bl-md__media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
+.bl-md__card .bl-md__media { height: var(--bl-card-media); }
+.bl-md__backdrop { position: fixed; inset: 0; z-index: 1000; background: var(--bl-backdrop); backdrop-filter: blur(var(--bl-blur)); -webkit-backdrop-filter: blur(var(--bl-blur)); }
+.bl-md__shell { font-family: var(--bl-font, inherit); position: fixed; z-index: 1001; display: flex; flex-direction: column; overflow: hidden; background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 40px 80px -30px rgba(0,0,0,0.7); outline: none; }
+.bl-md__shell .bl-md__media { flex: 0 0 auto; height: var(--bl-dialog-media); }
+.bl-md__body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
+.bl-md__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--bl-close-radius); background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; }
+.bl-md__close:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+`;
+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 FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function lockScroll() {
+  const { body, documentElement } = document;
+  const previous = { overflow: body.style.overflow, paddingRight: body.style.paddingRight };
+  const gap = window.innerWidth - documentElement.clientWidth;
+  body.style.overflow = "hidden";
+  if (gap > 0) body.style.paddingRight = `${gap}px`;
+  return () => {
+    Object.assign(body.style, previous);
+  };
+}
+function MorphDialog({
+  card,
+  children,
+  title,
+  media,
+  cardMediaHeight = 160,
+  dialogMediaHeight = 260,
+  width = 560,
+  maxHeight = "85vh",
+  radius = 18,
+  duration = 480,
+  open: controlledOpen,
+  onOpenChange,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  lineColor = "rgba(255,255,255,0.1)",
+  accentColor = "#73eff7",
+  backdropColor = "rgba(10,10,20,0.6)",
+  backdropBlur = 6,
+  fontFamily,
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const cardRef = useRef(null);
+  const shellRef = useRef(null);
+  const backdropRef = useRef(null);
+  const bodyRef = useRef(null);
+  const [innerOpen, setInnerOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const open = controlledOpen ?? innerOpen;
+  const closing = useRef(false);
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+  const vars = {
+    "--bl-radius": `${radius}px`,
+    "--bl-close-radius": radius ? "50%" : "0",
+    "--bl-bg": backgroundColor,
+    "--bl-ink": textColor,
+    "--bl-line": lineColor,
+    "--bl-accent": accentColor,
+    "--bl-backdrop": backdropColor,
+    "--bl-blur": `${backdropBlur}px`,
+    "--bl-card-media": `${cardMediaHeight}px`,
+    "--bl-dialog-media": `${dialogMediaHeight}px`,
+    ...fontFamily ? { "--bl-font": fontFamily } : null
+  };
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  const reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const frames = () => {
+    const from = cardRef.current.getBoundingClientRect();
+    const w = Math.min(width, window.innerWidth - 32);
+    const shell = shellRef.current;
+    shell.style.width = `${w}px`;
+    shell.style.height = "auto";
+    const h = shell.offsetHeight;
+    const to = { left: (window.innerWidth - w) / 2, top: Math.max(16, (window.innerHeight - h) / 2), width: w, height: h };
+    return { from, to };
+  };
+  const box = (r, rad) => ({ left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, borderRadius: `${rad}px` });
+  useLayoutEffect(() => {
+    if (!mounted || !open) return;
+    const shell = shellRef.current;
+    const { from, to } = frames();
+    Object.assign(shell.style, box(to, radius));
+    const unlock = lockScroll();
+    const easing = "cubic-bezier(.2,.9,.25,1)";
+    if (reduced()) {
+      shell.animate({ opacity: [0, 1] }, { duration: 160 });
+    } else {
+      shell.animate([box(from, radius), box(to, radius)], { duration, easing });
+      bodyRef.current.animate({ opacity: [0, 0, 1], transform: ["translateY(12px)", "translateY(12px)", "none"] }, { duration: duration * 1.1, easing });
+    }
+    backdropRef.current.animate({ opacity: [0, 1] }, { duration: duration * 0.7, fill: "both" });
+    cardRef.current.setAttribute("data-hidden", "");
+    (shell.querySelector("[data-autofocus]") ?? shell).focus({ preventScroll: true });
+    return unlock;
+  }, [mounted, open]);
+  useEffect(() => {
+    if (open || !mounted || closing.current) return;
+    closing.current = true;
+    const shell = shellRef.current;
+    const finish = () => {
+      closing.current = false;
+      cardRef.current?.removeAttribute("data-hidden");
+      setMounted(false);
+      cardRef.current?.focus({ preventScroll: true });
+    };
+    if (!shell) return finish();
+    const current = shell.getBoundingClientRect();
+    const target = cardRef.current.getBoundingClientRect();
+    backdropRef.current.animate({ opacity: [1, 0] }, { duration: duration * 0.7, fill: "forwards" });
+    const animation = reduced() ? shell.animate({ opacity: [1, 0] }, { duration: 140, fill: "forwards" }) : shell.animate([box(current, radius), box(target, radius)], { duration: duration * 0.85, easing: "cubic-bezier(.4,0,.2,1)", fill: "forwards" });
+    if (!reduced()) bodyRef.current.animate({ opacity: [1, 0] }, { duration: duration * 0.3, fill: "forwards" });
+    animation.onfinish = finish;
+  }, [open, mounted]);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      setOpen(false);
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = [...shellRef.current.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null || el === document.activeElement);
+    if (!items.length) {
+      event.preventDefault();
+      return;
+    }
+    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();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...vars, ...style }, children: [
+    /* @__PURE__ */ jsxs("button", { ref: cardRef, type: "button", className: "bl-md__card", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: [
+      media && /* @__PURE__ */ jsx("div", { className: "bl-md__media", children: media }),
+      card
+    ] }),
+    mounted && createPortal(
+      /* @__PURE__ */ jsxs("div", { style: vars, children: [
+        /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "bl-md__backdrop", onClick: () => setOpen(false) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: shellRef,
+            className: "bl-md__shell",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? `${uid}-title` : void 0,
+            tabIndex: -1,
+            onKeyDown,
+            style: { maxHeight },
+            children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "bl-md__close", "aria-label": "Close", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l10 10M12 2 2 12" }) }) }),
+              media && /* @__PURE__ */ jsx("div", { className: "bl-md__media", children: media }),
+              /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: "bl-md__body", children: [
+                title && /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, style: { margin: "0 0 12px", font: "inherit", fontSize: "1.4em", fontWeight: 700 }, children: title }),
+                children
+              ] })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  MorphDialog as default
+};