bits-lab 0.0.0-stage → 0.1.0

package/dist/ElasticString.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function ElasticString({
+  strings = 1,
+  height = 200,
+  gap,
+  thickness = 3,
+  colors = ["#73eff7"],
+  grab = 26,
+  maxPull = 70,
+  stiffness = 420,
+  damping = 7,
+  onPluck,
+  className = "",
+  style
+}) {
+  const svgRef = useRef(null);
+  const pathRefs = useRef([]);
+  const pluckRef = useRef(onPluck);
+  pluckRef.current = onPluck;
+  useEffect(() => {
+    const svg = svgRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const spacing = gap ?? height / (strings + 1);
+    const restY = (i) => gap ? (height - gap * (strings - 1)) / 2 + i * gap : spacing * (i + 1);
+    const state = Array.from({ length: strings }, () => ({ x: 0.5, dy: 0, v: 0, held: false }));
+    let width = svg.clientWidth || 1;
+    let frame = 0;
+    let last = 0;
+    const draw = (i) => {
+      const s = state[i];
+      const y = restY(i);
+      const cx = s.x * width;
+      pathRefs.current[i]?.setAttribute("d", `M0 ${y} Q ${cx.toFixed(1)} ${(y + s.dy * 2).toFixed(1)} ${width} ${y}`);
+    };
+    const tick = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3 || 0.016);
+      last = now;
+      let moving = false;
+      state.forEach((s, i) => {
+        if (s.held) return;
+        if (reduced) s.dy = 0;
+        else {
+          const k = stiffness * (1 + i * 0.18);
+          for (let t = 0; t < dt; t += 1 / 240) {
+            s.v += (-k * s.dy - damping * s.v) / 240;
+            s.dy += s.v / 240;
+          }
+        }
+        if (Math.abs(s.dy) > 0.05 || Math.abs(s.v) > 0.5) moving = true;
+        else {
+          s.dy = 0;
+          s.v = 0;
+        }
+        draw(i);
+      });
+      frame = moving ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (!frame) {
+        last = performance.now();
+        frame = requestAnimationFrame(tick);
+      }
+    };
+    const release = (i, s) => {
+      s.held = false;
+      pluckRef.current?.(i, Math.min(1, Math.abs(s.dy) / maxPull));
+      wake();
+    };
+    const onMove = (event) => {
+      const rect = svg.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      state.forEach((s, i) => {
+        const offset = py - restY(i);
+        if (s.held) {
+          if (Math.abs(offset) > maxPull || px < 0 || px > width) release(i, s);
+          else {
+            s.x = Math.max(0.05, Math.min(0.95, px / width));
+            s.dy = offset;
+            draw(i);
+          }
+        } else if (Math.abs(offset) < grab && Math.abs(s.dy) < 4) {
+          s.held = true;
+          s.v = 0;
+          s.x = Math.max(0.05, Math.min(0.95, px / width));
+          s.dy = offset;
+          draw(i);
+        }
+      });
+    };
+    const onLeave = () => state.forEach((s, i) => s.held && release(i, s));
+    const resize = new ResizeObserver(() => {
+      width = svg.clientWidth || 1;
+      state.forEach((_, i) => draw(i));
+    });
+    resize.observe(svg);
+    svg.addEventListener("pointermove", onMove);
+    svg.addEventListener("pointerleave", onLeave);
+    svg.addEventListener("pointercancel", onLeave);
+    state.forEach((_, i) => draw(i));
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      svg.removeEventListener("pointermove", onMove);
+      svg.removeEventListener("pointerleave", onLeave);
+      svg.removeEventListener("pointercancel", onLeave);
+    };
+  }, [strings, height, gap, grab, maxPull, stiffness, damping]);
+  return /* @__PURE__ */ jsx("svg", { ref: svgRef, className, width: "100%", height, "aria-hidden": "true", style: { display: "block", touchAction: "pan-y", overflow: "visible", ...style }, children: Array.from({ length: strings }, (_, i) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: (node) => {
+        pathRefs.current[i] = node;
+      },
+      fill: "none",
+      stroke: colors[i % colors.length],
+      strokeWidth: Math.max(1, thickness - i * 0.3),
+      strokeLinecap: "round"
+    },
+    i
+  )) });
+}
+export {
+  ElasticString as default
+};

package/dist/ExpandCard.d.ts

@@ -0,0 +1,44 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ExpandCardProps {
+    /** Stable identity inside a grid (defaults to its position). */
+    id?: string;
+    /** Image or video at the top; it grows taller when open. */
+    media?: ReactNode;
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    summary?: ReactNode;
+    /** The article, revealed in the page flow when open. */
+    children?: ReactNode;
+    /** Controlled open state when used outside a grid. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function ExpandCard({ id, media, eyebrow, title, summary, children, open: controlledOpen, onOpenChange, className, style }: ExpandCardProps): import("react").JSX.Element;
+export interface ExpandCardGridProps {
+    /** ExpandCard elements. */
+    children?: ReactNode;
+    /** id of the card that starts open. */
+    defaultOpen?: string | null;
+    onOpenChange?: (id: string | null) => void;
+    /** Minimum card width before the grid wraps, in px. */
+    minWidth?: number;
+    gap?: number;
+    radius?: number;
+    mediaHeight?: number;
+    openMediaHeight?: number;
+    titleSize?: number;
+    /** Motion length, in ms. */
+    duration?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function ExpandCardGrid({ children, defaultOpen, onOpenChange, minWidth, gap, radius, mediaHeight, openMediaHeight, titleSize, duration, backgroundColor, textColor, mutedColor, lineColor, accentColor, fontFamily, className, style }: ExpandCardGridProps): import("react").JSX.Element;
+export default ExpandCardGrid;

package/dist/ExpandCard.js

@@ -0,0 +1,182 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useContext, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-expand-card";
+const CSS = `
+.bl-xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--bl-min), 100%), 1fr)); gap: var(--bl-gap); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-xcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-xcard[data-open] { grid-column: 1 / -1; box-shadow: inset 0 0 0 1px var(--bl-line), 0 24px 50px -30px rgba(0,0,0,0.7); }
+.bl-xcard__trigger { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.bl-xcard__trigger:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; border-radius: var(--bl-radius); }
+.bl-xcard[data-open] .bl-xcard__trigger { cursor: default; }
+.bl-xcard__media { overflow: hidden; height: var(--bl-media); transition: height var(--bl-dur) cubic-bezier(.2,.9,.25,1); }
+.bl-xcard[data-open] .bl-xcard__media { height: var(--bl-media-open); }
+.bl-xcard__media > img, .bl-xcard__media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
+.bl-xcard__head { padding: 16px 18px 18px; }
+.bl-xcard__eyebrow { margin: 0 0 6px; color: var(--bl-accent); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
+.bl-xcard__title { margin: 0; font-size: var(--bl-title); font-weight: 700; line-height: 1.25; transition: font-size var(--bl-dur) cubic-bezier(.2,.9,.25,1); }
+.bl-xcard[data-open] .bl-xcard__title { font-size: calc(var(--bl-title) * 1.45); }
+.bl-xcard__summary { margin: 8px 0 0; color: var(--bl-muted); font-size: 14px; line-height: 1.55; }
+.bl-xcard__body { padding: 0 18px 22px; color: var(--bl-ink); line-height: 1.7; animation: bl-xcard-in calc(var(--bl-dur) * 1.2) cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--bl-dur) * 0.35); }
+.bl-xcard__body > :first-child { margin-top: 0; }
+.bl-xcard__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; animation: bl-xcard-in 300ms ease both; }
+.bl-xcard__close:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+@keyframes bl-xcard-in { from { opacity: 0; transform: translateY(10px); } }
+@media (prefers-reduced-motion: reduce) { .bl-xcard__media, .bl-xcard__title { transition: none; } .bl-xcard__body, .bl-xcard__close { 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 GridContext = createContext(null);
+function ExpandCard({ id, media, eyebrow, title, summary, children, open: controlledOpen, onOpenChange, className = "", style }) {
+  const grid = useContext(GridContext);
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const key = id ?? uid;
+  const [innerOpen, setInnerOpen] = useState(false);
+  const open = grid ? grid.openId === key : controlledOpen ?? innerOpen;
+  const triggerRef = useRef(null);
+  const setOpen = (next) => {
+    if (grid) grid.toggle(next ? key : null);
+    else {
+      if (controlledOpen === void 0) setInnerOpen(next);
+      onOpenChange?.(next);
+    }
+    if (!next) setTimeout(() => triggerRef.current?.focus({ preventScroll: true }));
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: `bl-xcard ${className}`,
+      "data-open": open || void 0,
+      "data-expand-key": key,
+      style,
+      onKeyDown: (event) => {
+        if (open && event.key === "Escape") {
+          event.stopPropagation();
+          setOpen(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "bl-xcard__trigger",
+            "aria-expanded": open,
+            "aria-controls": `${uid}-body`,
+            onClick: () => !open && setOpen(true),
+            children: [
+              media && /* @__PURE__ */ jsx("div", { className: "bl-xcard__media", "aria-hidden": "true", children: media }),
+              /* @__PURE__ */ jsxs("div", { className: "bl-xcard__head", children: [
+                eyebrow && /* @__PURE__ */ jsx("p", { className: "bl-xcard__eyebrow", children: eyebrow }),
+                /* @__PURE__ */ jsx("h3", { className: "bl-xcard__title", children: title }),
+                summary && /* @__PURE__ */ jsx("p", { className: "bl-xcard__summary", children: summary })
+              ] })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-xcard__close", "aria-label": "Close article", 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" }) }) }),
+          /* @__PURE__ */ jsx("div", { id: `${uid}-body`, className: "bl-xcard__body", role: "region", "aria-label": typeof title === "string" ? title : void 0, children })
+        ] })
+      ]
+    }
+  );
+}
+function ExpandCardGrid({
+  children,
+  defaultOpen = null,
+  onOpenChange,
+  minWidth = 240,
+  gap = 16,
+  radius = 16,
+  mediaHeight = 150,
+  openMediaHeight = 300,
+  titleSize = 17,
+  duration = 480,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.1)",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const [openId, setOpenId] = useState(defaultOpen);
+  const before = useRef(null);
+  const toggle = (next) => {
+    const grid = ref.current;
+    if (grid) before.current = new Map([...grid.children].map((card) => [card.dataset.expandKey, card.getBoundingClientRect()]));
+    setOpenId(next);
+    onOpenChange?.(next);
+  };
+  useLayoutEffect(() => {
+    const grid = ref.current;
+    const old = before.current;
+    before.current = null;
+    if (!grid || !old || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    for (const card of grid.children) {
+      const from = old.get(card.dataset.expandKey);
+      if (!from) continue;
+      const to = card.getBoundingClientRect();
+      const dx = from.left - to.left;
+      const dy = from.top - to.top;
+      const easing = "cubic-bezier(.2,.9,.25,1)";
+      if (Math.abs(from.width - to.width) > 1 || Math.abs(from.height - to.height) > 1) {
+        card.animate(
+          [
+            { transform: `translate(${dx}px, ${dy}px)`, width: `${from.width}px`, height: `${from.height}px` },
+            { transform: "none", width: `${to.width}px`, height: `${to.height}px` }
+          ],
+          { duration, easing }
+        );
+      } else if (dx || dy) {
+        card.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration, easing });
+      }
+    }
+    const opened = grid.querySelector("[data-open]");
+    if (opened) {
+      const rect = opened.getBoundingClientRect();
+      if (rect.top < 0 || rect.top > window.innerHeight * 0.6) opened.scrollIntoView({ block: "start", behavior: "smooth" });
+    }
+  }, [openId, duration]);
+  return /* @__PURE__ */ jsx(GridContext.Provider, { value: { openId, toggle }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `bl-xgrid ${className}`,
+      style: {
+        "--bl-min": `${minWidth}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-media": `${mediaHeight}px`,
+        "--bl-media-open": `${openMediaHeight}px`,
+        "--bl-title": `${titleSize}px`,
+        "--bl-dur": `${duration}ms`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: Children.map(children, (child, i) => isValidElement(child) ? cloneElement(child, { id: child.props.id ?? `card-${i}` }) : child)
+    }
+  ) });
+}
+var stdin_default = ExpandCardGrid;
+export {
+  ExpandCard,
+  ExpandCardGrid,
+  stdin_default as default
+};

package/dist/FeatureTabs.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FeatureItem {
+    id?: string | number;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Shown in the media panel while this tab is active. */
+    media?: ReactNode;
+}
+export interface FeatureTabsProps {
+    items?: FeatureItem[];
+    /** Time per tab, in ms. */
+    interval?: number;
+    /** Advance automatically (off under reduced motion). */
+    autoPlay?: boolean;
+    defaultIndex?: number;
+    onChange?: (index: number, item: FeatureItem) => void;
+    /** Media panel aspect ratio, e.g. "4 / 3". */
+    mediaAspect?: string;
+    gap?: number;
+    radius?: number;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    hoverColor?: string;
+    activeColor?: string;
+    trackColor?: string;
+    stageColor?: string;
+    lineColor?: string;
+    titleSize?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FeatureTabs({ items, interval, autoPlay, defaultIndex, onChange, mediaAspect, gap, radius, textColor, mutedColor, accentColor, hoverColor, activeColor, trackColor, stageColor, lineColor, titleSize, fontFamily, className, style }: FeatureTabsProps): import("react").JSX.Element;

package/dist/FeatureTabs.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-feature-tabs";
+const CSS = `
+.bl-ft-wrap { container-type: inline-size; width: 100%; }
+.bl-ft { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--bl-gap); align-items: center; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-ft__list { display: flex; flex-direction: column; gap: 6px; }
+.bl-ft__tab { position: relative; display: block; width: 100%; padding: 16px 18px 18px; border: 0; border-radius: var(--bl-radius); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color 200ms; }
+.bl-ft__tab:hover { background: var(--bl-hover); }
+.bl-ft__tab[aria-selected="true"] { background: var(--bl-active); }
+.bl-ft__tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-ft__title { display: block; font-weight: 700; font-size: var(--bl-title-size); line-height: 1.25; opacity: 0.6; transition: opacity 200ms; }
+.bl-ft__tab[aria-selected="true"] .bl-ft__title { opacity: 1; }
+.bl-ft__desc { display: grid; grid-template-rows: 0fr; color: var(--bl-muted); font-size: 14px; line-height: 1.5; transition: grid-template-rows 320ms cubic-bezier(.2,.8,.2,1); }
+.bl-ft__desc > span { overflow: hidden; }
+.bl-ft__tab[aria-selected="true"] .bl-ft__desc { grid-template-rows: 1fr; }
+.bl-ft__desc > span > span { display: block; padding-top: 6px; }
+.bl-ft__track { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--bl-track); overflow: hidden; opacity: 0; }
+.bl-ft__tab[aria-selected="true"] .bl-ft__track { opacity: 1; }
+.bl-ft__fill { width: 100%; height: 100%; background: var(--bl-accent); transform-origin: left; transform: scaleX(0); }
+.bl-ft__fill[data-run] { animation: bl-ft-fill var(--bl-interval) linear forwards; }
+.bl-ft[data-paused] .bl-ft__fill[data-run] { animation-play-state: paused; }
+@keyframes bl-ft-fill { to { transform: scaleX(1); } }
+.bl-ft__stage { position: relative; aspect-ratio: var(--bl-ratio); border-radius: var(--bl-radius); overflow: hidden; background: var(--bl-stage); box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-ft__panel { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
+.bl-ft__panel[data-active] { opacity: 1; transform: none; }
+.bl-ft__panel > img, .bl-ft__panel > video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bl-ft__pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; }
+.bl-ft__pause:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+@container (max-width: 680px) {
+  .bl-ft { grid-template-columns: minmax(0, 1fr); }
+  .bl-ft__stage { order: -1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bl-ft__panel, .bl-ft__desc, .bl-ft__title { transition: none; }
+  .bl-ft__panel { transform: 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 PauseIcon = ({ paused }) => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": "true", children: paused ? /* @__PURE__ */ jsx("path", { d: "M3 1.5v11l9.5-5.5z" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 1.5h3.2v11H2.5zm5.8 0h3.2v11H8.3z" }) });
+function FeatureTabs({
+  items = [],
+  interval = 5e3,
+  autoPlay = true,
+  defaultIndex = 0,
+  onChange,
+  mediaAspect = "4 / 3",
+  gap = 32,
+  radius = 14,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  hoverColor = "rgba(255,255,255,0.04)",
+  activeColor = "rgba(255,255,255,0.07)",
+  trackColor = "rgba(255,255,255,0.12)",
+  stageColor = "#1a1c2c",
+  lineColor = "rgba(255,255,255,0.08)",
+  titleSize = 17,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const tabs = useRef([]);
+  const [index, setIndex] = useState(Math.min(defaultIndex, Math.max(0, items.length - 1)));
+  const [userPaused, setUserPaused] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const playing = autoPlay && !reduced && items.length > 1;
+  const select = (next, focus = false) => {
+    const wrapped = (next + items.length) % items.length;
+    setIndex(wrapped);
+    onChange?.(wrapped, items[wrapped]);
+    if (focus) tabs.current[wrapped]?.focus();
+  };
+  const onKeyDown = (event) => {
+    const moves = { ArrowDown: index + 1, ArrowRight: index + 1, ArrowUp: index - 1, ArrowLeft: index - 1, Home: 0, End: items.length - 1 };
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    select(moves[event.key], true);
+  };
+  const paused = userPaused || hovering;
+  return /* @__PURE__ */ jsx("div", { className: `bl-ft-wrap ${className}`, style, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "bl-ft",
+      "data-paused": paused || void 0,
+      onPointerEnter: (event) => event.pointerType === "mouse" && setHovering(true),
+      onPointerLeave: () => setHovering(false),
+      style: {
+        "--bl-interval": `${interval}ms`,
+        "--bl-ratio": mediaAspect,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-accent": accentColor,
+        "--bl-hover": hoverColor,
+        "--bl-active": activeColor,
+        "--bl-track": trackColor,
+        "--bl-stage": stageColor,
+        "--bl-line": lineColor,
+        "--bl-title-size": `${titleSize}px`,
+        "--bl-font": fontFamily
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-ft__list", role: "tablist", "aria-orientation": "vertical", onKeyDown, children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (node) => {
+              tabs.current[i] = node;
+            },
+            id: `${uid}-tab-${i}`,
+            className: "bl-ft__tab",
+            role: "tab",
+            type: "button",
+            "aria-selected": i === index,
+            "aria-controls": `${uid}-panel-${i}`,
+            tabIndex: i === index ? 0 : -1,
+            onClick: () => select(i),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-ft__title", children: item.title }),
+              item.description && /* @__PURE__ */ jsx("span", { className: "bl-ft__desc", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { children: item.description }) }) }),
+              playing && /* @__PURE__ */ jsx("span", { className: "bl-ft__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "bl-ft__fill",
+                  "data-run": i === index ? "" : void 0,
+                  onAnimationEnd: () => i === index && select(index + 1)
+                },
+                `${index}-${i}`
+              ) })
+            ]
+          },
+          item.id ?? i
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-ft__stage", children: [
+          items.map((item, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `${uid}-panel-${i}`,
+              className: "bl-ft__panel",
+              role: "tabpanel",
+              "aria-labelledby": `${uid}-tab-${i}`,
+              "aria-hidden": i !== index,
+              inert: i !== index ? true : void 0,
+              "data-active": i === index ? "" : void 0,
+              children: item.media
+            },
+            item.id ?? i
+          )),
+          playing && /* @__PURE__ */ jsx("button", { className: "bl-ft__pause", type: "button", onClick: () => setUserPaused((p) => !p), "aria-label": userPaused ? "Play feature tour" : "Pause feature tour", children: /* @__PURE__ */ jsx(PauseIcon, { paused: userPaused }) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  FeatureTabs as default
+};

package/dist/FeedList.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FeedItem {
+    id: string | number;
+    title: string;
+    body?: ReactNode;
+    icon?: ReactNode;
+    /** When it happened; shown as a relative time. */
+    time?: Date | number | string;
+    /** Icon colour. */
+    tone?: string;
+}
+export interface FeedListProps {
+    /** Newest first. */
+    items?: FeedItem[];
+    /** Makes the feed a listbox you can move through and pick from. */
+    onSelect?: (item: FeedItem) => void;
+    max?: number;
+    label?: string;
+    emptyLabel?: string;
+    /** Relative-time language. */
+    locale?: string;
+    width?: number;
+    maxHeight?: number;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    hoverColor?: string;
+    chipColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    flashColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FeedList({ items, onSelect, max, label, emptyLabel, locale, width, maxHeight, radius, backgroundColor, textColor, mutedColor, hoverColor, chipColor, lineColor, accentColor, flashColor, fontFamily, className, style }: FeedListProps): import("react").JSX.Element;