bits-lab 0.0.0-stage → 0.1.2

package/dist/CardDeck.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-card-deck";
+const CSS = `
+.bl-deck { display: grid; justify-items: center; gap: 14px; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-deck__pile { position: relative; width: var(--bl-w); max-width: 100%; height: var(--bl-h); touch-action: pan-y; outline: none; }
+.bl-deck__pile:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 8px; border-radius: var(--bl-radius); }
+.bl-deck__card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-card); box-shadow: 0 0 0 2px var(--bl-line), 0 10px 22px -12px rgba(0,0,0,0.8); transform: translate(calc(var(--d) * var(--bl-offset)), calc(var(--d) * var(--bl-offset))) rotate(calc(var(--d) * var(--bl-fan) * var(--side))); transition: transform 360ms cubic-bezier(.3,1.3,.5,1), opacity 300ms; user-select: none; }
+.bl-deck__card[data-top] { cursor: grab; }
+.bl-deck__card[data-dragging] { cursor: grabbing; transition: none; }
+.bl-deck__card[data-hidden] { opacity: 0; }
+.bl-deck__card[data-flying] { transition: transform 420ms cubic-bezier(.4,0,.6,1), opacity 420ms; opacity: 0; }
+.bl-deck__bar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--bl-muted); }
+.bl-deck__btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; }
+.bl-deck__btn:hover { background: var(--bl-line); }
+.bl-deck__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-deck__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.bl-deck__count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .bl-deck__card { transition: none !important; } }
+`;
+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 Arrow = ({ flip }) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { transform: flip ? "scaleX(-1)" : void 0 }, children: /* @__PURE__ */ jsx("path", { d: "M6 3l5 5-5 5" }) });
+function CardDeck({
+  children,
+  width = 280,
+  height = 380,
+  visible = 4,
+  offset = 6,
+  fan = 2.5,
+  threshold = 0.3,
+  loop = true,
+  onChange,
+  label = "Card deck",
+  radius = 16,
+  cardColor = "#262b44",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  chipColor = "rgba(255,255,255,0.08)",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const cards = Children.toArray(children);
+  const n = cards.length;
+  const [top, setTop] = useState(0);
+  const [flying, setFlying] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const pileRef = useRef(null);
+  const changeRef = useRef(onChange);
+  changeRef.current = onChange;
+  useEffect(() => {
+    if (top >= n && n) setTop(0);
+  }, [n, top]);
+  const go = (step, throwX = step * 1, throwY = 0) => {
+    if (!n || flying) return;
+    const next = loop ? (top + step + n) % n : Math.max(0, Math.min(n - 1, top + step));
+    if (next === top) return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (step > 0 && !reduced) {
+      const w = pileRef.current?.offsetWidth ?? width;
+      setFlying({ index: top, dx: Math.sign(throwX || 1) * w * 1.4, dy: throwY * 0.5, spin: Math.sign(throwX || 1) * 24 });
+      setTimeout(() => {
+        setFlying(null);
+        setTop(next);
+        changeRef.current?.(next);
+      }, 380);
+    } else {
+      setTop(next);
+      changeRef.current?.(next);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.button > 0 || flying) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setDrag({ x: event.clientX, y: event.clientY, dx: 0, dy: 0 });
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    setDrag((d) => ({ ...d, dx: event.clientX - d.x, dy: event.clientY - d.y }));
+  };
+  const onPointerUp = () => {
+    if (!drag) return;
+    const w = pileRef.current?.offsetWidth ?? width;
+    const far = Math.abs(drag.dx) > w * threshold;
+    setDrag(null);
+    if (far) go(1, drag.dx, drag.dy);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      go(1);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      go(-1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-deck ${className}`,
+      style: { "--bl-w": `${width}px`, "--bl-h": `${height}px`, "--bl-offset": `${offset}px`, "--bl-fan": `${fan}deg`, "--bl-radius": `${radius}px`, "--bl-card": cardColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-chip": chipColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: pileRef, className: "bl-deck__pile", role: "group", "aria-roledescription": "card deck", "aria-label": `${label}: card ${n ? top + 1 : 0} of ${n}`, tabIndex: 0, onKeyDown, children: cards.map((card, i) => {
+          const d = (i - top + n) % n;
+          const isTop = d === 0;
+          const fly = flying && flying.index === i;
+          const transform = fly ? `translate(${flying.dx}px, ${flying.dy}px) rotate(${flying.spin}deg)` : isTop && drag ? `translate(${drag.dx}px, ${drag.dy * 0.4}px) rotate(${drag.dx * 0.06}deg)` : void 0;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bl-deck__card",
+              "data-top": isTop || void 0,
+              "data-dragging": isTop && drag || void 0,
+              "data-flying": fly || void 0,
+              "data-hidden": d >= visible || void 0,
+              "aria-hidden": !isTop || void 0,
+              inert: !isTop || void 0,
+              onPointerDown: isTop ? onPointerDown : void 0,
+              onPointerMove: isTop ? onPointerMove : void 0,
+              onPointerUp: isTop ? onPointerUp : void 0,
+              onPointerCancel: isTop ? onPointerUp : void 0,
+              style: { "--d": Math.min(d, visible), "--side": d % 2 ? -1 : 1, zIndex: fly ? n + 1 : n - d, transform },
+              children: card
+            },
+            card.key ?? i
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-deck__bar", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-deck__btn", "aria-label": "Previous card", disabled: !loop && top === 0, onClick: () => go(-1), children: /* @__PURE__ */ jsx(Arrow, { flip: true }) }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-deck__count", "aria-live": "polite", children: [
+            n ? top + 1 : 0,
+            " / ",
+            n
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-deck__btn", "aria-label": "Next card", disabled: !loop && top === n - 1, onClick: () => go(1), children: /* @__PURE__ */ jsx(Arrow, {}) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardDeck as default
+};

package/dist/ChangelogTimeline.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+export interface ChangelogEntry {
+    id?: string;
+    date: ReactNode;
+    /** Machine-readable date for the <time> element. */
+    dateTime?: string;
+    title: ReactNode;
+    /** A version or label pill. */
+    tag?: ReactNode;
+    body?: ReactNode;
+    /** An image URL, or any node (video, embed). */
+    media?: ReactNode;
+    mediaAlt?: string;
+}
+export interface ChangelogTimelineProps {
+    entries?: ChangelogEntry[];
+    /** The scroller to measure against, when it is not the page. */
+    scrollRoot?: RefObject<HTMLElement | null>;
+    /** Where the beam tip sits, as a share of the viewport height. */
+    anchor?: number;
+    dateColumn?: number;
+    stickyTop?: number;
+    width?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    accentColor?: string;
+    mediaRadius?: number;
+    fontFamily?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ChangelogTimeline({ entries, scrollRoot, anchor, dateColumn, stickyTop, width, backgroundColor, textColor, mutedColor, trackColor, accentColor, mediaRadius, fontFamily, label, className, style }: ChangelogTimelineProps): import("react").JSX.Element;

package/dist/ChangelogTimeline.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-changelog";
+const CSS = `
+.bl-log { position: relative; container-type: inline-size; width: 100%; max-width: var(--bl-w); margin: 0 auto; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-log__list { position: relative; margin: 0; padding: 0; list-style: none; }
+.bl-log__line { position: absolute; top: 6px; bottom: 6px; left: var(--bl-x); width: 2px; margin-left: -1px; background: var(--bl-track); }
+.bl-log__beam { position: absolute; inset: 0 0 auto 0; height: calc(var(--bl-p, 0) * 100%); background: linear-gradient(transparent, var(--bl-accent) 40px); box-shadow: 0 0 12px var(--bl-accent); }
+.bl-log__entry { position: relative; display: grid; grid-template-columns: calc(var(--bl-x) - 28px) 56px minmax(0, 1fr); padding-bottom: 48px; }
+.bl-log__entry:last-child { padding-bottom: 0; }
+.bl-log__date { position: sticky; top: var(--bl-sticky); align-self: start; padding-top: 2px; color: var(--bl-muted); font-size: 13px; text-align: right; }
+.bl-log__dot { position: sticky; top: calc(var(--bl-sticky) + 4px); align-self: start; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--bl-bg); box-shadow: 0 0 0 2px var(--bl-track); transition: background-color 200ms, box-shadow 200ms; }
+.bl-log__entry[data-reached] .bl-log__dot { background: var(--bl-accent); box-shadow: 0 0 0 2px var(--bl-accent), 0 0 0 6px color-mix(in srgb, var(--bl-accent) 25%, transparent); }
+.bl-log__body { min-width: 0; opacity: 0.25; transform: translateY(16px); transition: opacity 500ms cubic-bezier(.2,.9,.25,1), transform 500ms cubic-bezier(.2,.9,.25,1); }
+.bl-log__entry[data-reached] .bl-log__body { opacity: 1; transform: none; }
+.bl-log__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
+.bl-log__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
+.bl-log__tag { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bl-accent) 16%, transparent); color: var(--bl-accent); font-size: 12px; font-weight: 600; }
+.bl-log__text { color: var(--bl-muted); font-size: 15px; line-height: 1.6; }
+.bl-log__text > * { margin: 0 0 10px; }
+.bl-log__text > :last-child { margin-bottom: 0; }
+.bl-log__media { margin-top: 14px; overflow: hidden; border-radius: var(--bl-radius); box-shadow: 0 0 0 1px var(--bl-track); }
+.bl-log__media img, .bl-log__media video { display: block; width: 100%; height: auto; }
+@container (max-width: 600px) {
+  .bl-log__line { left: 6px; }
+  .bl-log__entry { grid-template-columns: 12px minmax(0, 1fr); column-gap: 18px; }
+  .bl-log__date { position: static; grid-column: 2; grid-row: 1; margin-bottom: 4px; text-align: left; }
+  .bl-log__dot { grid-column: 1; grid-row: 1 / span 2; }
+  .bl-log__body { grid-column: 2; }
+}
+@media (prefers-reduced-motion: reduce) { .bl-log__body { transition: none; opacity: 1; transform: none; } .bl-log__dot { 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 ChangelogTimeline({
+  entries = [],
+  scrollRoot,
+  anchor = 0.6,
+  dateColumn = 140,
+  stickyTop = 24,
+  width = 760,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "#333c57",
+  accentColor = "#73eff7",
+  mediaRadius = 12,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Changelog",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const listRef = useRef(null);
+  const lineRef = useRef(null);
+  const [reached, setReached] = useState(0);
+  useEffect(() => {
+    const list = listRef.current;
+    const line = lineRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const view = scrollRoot?.current?.getBoundingClientRect() ?? { top: 0, height: window.innerHeight };
+      const tip = view.top + view.height * anchor;
+      const box = line.getBoundingClientRect();
+      const progress = reduced ? 1 : Math.max(0, Math.min(1, (tip - box.top) / Math.max(1, box.height)));
+      line.style.setProperty("--bl-p", String(progress));
+      const items = list.querySelectorAll(":scope > .bl-log__entry");
+      let count = 0;
+      items.forEach((item) => {
+        if (reduced || item.getBoundingClientRect().top + 8 <= tip) count++;
+      });
+      setReached(count);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    window.addEventListener("scroll", schedule, { capture: true, passive: true });
+    window.addEventListener("resize", schedule);
+    const resize = new ResizeObserver(schedule);
+    resize.observe(list);
+    update();
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+      resize.disconnect();
+    };
+  }, [scrollRoot, anchor, entries.length]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `bl-log ${className}`,
+      "aria-label": label,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-x": `${dateColumn + 28}px`,
+        "--bl-sticky": `${stickyTop}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-track": trackColor,
+        "--bl-accent": accentColor,
+        "--bl-radius": `${mediaRadius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: lineRef, className: "bl-log__line", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "bl-log__beam" }) }),
+        /* @__PURE__ */ jsx("ol", { ref: listRef, className: "bl-log__list", children: entries.map((entry, i) => /* @__PURE__ */ jsxs("li", { className: "bl-log__entry", "data-reached": i < reached || void 0, "aria-labelledby": `${uid}-${i}`, children: [
+          /* @__PURE__ */ jsx("time", { className: "bl-log__date", dateTime: entry.dateTime, children: entry.date }),
+          /* @__PURE__ */ jsx("span", { className: "bl-log__dot", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "bl-log__body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bl-log__head", children: [
+              /* @__PURE__ */ jsx("h3", { id: `${uid}-${i}`, className: "bl-log__title", children: entry.title }),
+              entry.tag && /* @__PURE__ */ jsx("span", { className: "bl-log__tag", children: entry.tag })
+            ] }),
+            entry.body && /* @__PURE__ */ jsx("div", { className: "bl-log__text", children: typeof entry.body === "string" ? /* @__PURE__ */ jsx("p", { children: entry.body }) : entry.body }),
+            entry.media && /* @__PURE__ */ jsx("div", { className: "bl-log__media", children: typeof entry.media === "string" ? /* @__PURE__ */ jsx("img", { src: entry.media, alt: entry.mediaAlt ?? "", loading: "lazy" }) : entry.media })
+          ] })
+        ] }, entry.id ?? i)) })
+      ]
+    }
+  );
+}
+export {
+  ChangelogTimeline as default
+};

package/dist/ChapterProgress.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties, type RefObject } from 'react';
+export interface ChapterProgressProps {
+    /** The article to track. */
+    target?: RefObject<HTMLElement | null>;
+    /** Which headings count as chapters. */
+    selector?: string;
+    /** Space a heading keeps below the top when jumped to, in px. */
+    offset?: number;
+    wordsPerMinute?: number;
+    showTime?: boolean;
+    listLabel?: string;
+    label?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ChapterProgress({ target, selector, offset, wordsPerMinute, showTime, listLabel, label, backgroundColor, textColor, mutedColor, trackColor, lineColor, accentColor, fontFamily, className, style }: ChapterProgressProps): import("react").JSX.Element;

package/dist/ChapterProgress.js

@@ -0,0 +1,211 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-chapter-progress";
+const CSS = `
+.bl-chap { position: relative; z-index: 10; display: grid; gap: 8px; padding: 10px 14px 12px; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: 13px; box-shadow: 0 1px 0 var(--bl-line), 0 10px 24px -18px rgba(0,0,0,0.8); }
+.bl-chap__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.bl-chap__current { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.bl-chap__current b { color: var(--bl-accent); font-weight: 700; }
+.bl-chap__meta { flex: 0 0 auto; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
+.bl-chap__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--bl-track); color: var(--bl-ink); font: inherit; cursor: pointer; }
+.bl-chap__toggle:hover { filter: brightness(1.2); }
+.bl-chap__toggle:focus-visible, .bl-chap__link:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-chap__toggle svg { transition: transform 200ms; }
+.bl-chap__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.bl-chap__bar { position: relative; height: 6px; border-radius: 999px; background: var(--bl-track); }
+.bl-chap__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--bl-accent); transform-origin: left; transform: scaleX(var(--bl-p, 0)); }
+.bl-chap__tick { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border: 0; border-radius: 50%; background: var(--bl-bg); box-shadow: inset 0 0 0 3px var(--bl-track); cursor: pointer; transition: transform 160ms, box-shadow 160ms; }
+.bl-chap__tick[data-passed] { box-shadow: inset 0 0 0 3px var(--bl-accent); }
+.bl-chap__tick[data-current] { background: var(--bl-accent); }
+.bl-chap__tick:hover { transform: scale(1.3); }
+.bl-chap__tick::after { content: attr(data-title); position: absolute; left: 50%; top: calc(100% + 8px); padding: 3px 8px; border-radius: 6px; background: var(--bl-ink); color: var(--bl-bg); font-size: 12px; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 120ms; }
+.bl-chap__tick:hover::after { opacity: 1; }
+.bl-chap__menu { position: absolute; top: calc(100% + 6px); right: 10px; display: grid; gap: 2px; min-width: 220px; max-width: calc(100% - 20px); max-height: 60vh; margin: 0; padding: 6px; overflow: auto; border-radius: 10px; background: var(--bl-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 20px 40px -16px rgba(0,0,0,0.8); list-style: none; }
+.bl-chap__link { display: flex; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--bl-ink); font: inherit; text-align: left; cursor: pointer; }
+.bl-chap__link:hover { background: var(--bl-track); }
+.bl-chap__link[aria-current="true"] { color: var(--bl-accent); }
+.bl-chap__link span { color: var(--bl-muted); font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .bl-chap__tick, .bl-chap__toggle svg { 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 scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function ChapterProgress({
+  target,
+  selector = "h2",
+  offset = 72,
+  wordsPerMinute = 220,
+  showTime = true,
+  listLabel = "Chapters",
+  label = "Reading progress",
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "#333c57",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootRef = useRef(null);
+  const fillRef = useRef(null);
+  const [chapters, setChapters] = useState([]);
+  const [current, setCurrent] = useState(-1);
+  const [percent, setPercent] = useState(0);
+  const [minutesLeft, setMinutesLeft] = useState(0);
+  const [open, setOpen] = useState(false);
+  const headings = useRef([]);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    const article = target?.current;
+    if (!article) return void 0;
+    const scroller = scrollParent(article);
+    scrollerRef.current = scroller;
+    const isWindow = scroller === window;
+    let frame = 0;
+    let words = 0;
+    let layout = { top: 0, travel: 1, marks: [] };
+    const viewTop = () => isWindow ? 0 : scroller.getBoundingClientRect().top;
+    const viewHeight = () => isWindow ? window.innerHeight : scroller.clientHeight;
+    const measure = () => {
+      headings.current = [...article.querySelectorAll(selector)];
+      const scrollTop = isWindow ? window.scrollY : scroller.scrollTop;
+      const top = article.getBoundingClientRect().top - viewTop() + scrollTop;
+      const travel = Math.max(1, article.offsetHeight - viewHeight());
+      const marks = headings.current.map((h) => h.getBoundingClientRect().top - viewTop() + scrollTop - offset);
+      layout = { top, travel, marks };
+      words = (article.innerText || "").split(/\s+/).filter(Boolean).length;
+      setChapters(headings.current.map((h, i) => ({ title: h.textContent.trim(), at: Math.max(0, Math.min(1, (marks[i] - top) / travel)) })));
+      update();
+    };
+    const update = () => {
+      frame = 0;
+      const scrollTop = isWindow ? window.scrollY : scroller.scrollTop;
+      const p = Math.max(0, Math.min(1, (scrollTop - layout.top) / layout.travel));
+      fillRef.current?.style.setProperty("--bl-p", String(p));
+      let index = -1;
+      layout.marks.forEach((mark, i) => {
+        if (scrollTop >= mark - 2) index = i;
+      });
+      setCurrent(index);
+      setPercent(Math.round(p * 100));
+      setMinutesLeft(Math.ceil(words * (1 - p) / wordsPerMinute));
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    let timer = 0;
+    const remeasure = () => {
+      clearTimeout(timer);
+      timer = setTimeout(measure, 100);
+    };
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", remeasure);
+    const resize = new ResizeObserver(remeasure);
+    resize.observe(article);
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", remeasure);
+      resize.disconnect();
+    };
+  }, [target, selector, offset, wordsPerMinute]);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        rootRef.current?.querySelector(".bl-chap__toggle")?.focus();
+      }
+    };
+    const onDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [open]);
+  const jump = (index) => {
+    const heading = headings.current[index];
+    const scroller = scrollerRef.current;
+    if (!heading || !scroller) return;
+    const isWindow = scroller === window;
+    const viewTop = isWindow ? 0 : scroller.getBoundingClientRect().top;
+    const scrollTop = isWindow ? window.scrollY : scroller.scrollTop;
+    const top = heading.getBoundingClientRect().top - viewTop + scrollTop - offset + 1;
+    const behavior = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+    scroller.scrollTo({ top, behavior });
+    if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+    heading.focus({ preventScroll: true });
+    setOpen(false);
+  };
+  const chapter = chapters[current];
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: rootRef,
+      className: `bl-chap ${className}`,
+      "aria-label": label,
+      style: { "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-track": trackColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-chap__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-chap__current", "aria-live": "polite", children: chapter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("b", { children: current + 1 }),
+            " \xB7 ",
+            chapter.title
+          ] }) : "Introduction" }),
+          showTime && /* @__PURE__ */ jsx("span", { className: "bl-chap__meta", "aria-hidden": "true", children: percent >= 100 ? "Done" : `${minutesLeft} min left` }),
+          chapters.length > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-chap__toggle", "aria-expanded": open, "aria-controls": `${uid}-menu`, onClick: () => setOpen((o) => !o), children: [
+            listLabel,
+            /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 3.5 5 6.5 8 3.5" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-chap__bar", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, children: [
+          /* @__PURE__ */ jsx("div", { ref: fillRef, className: "bl-chap__fill" }),
+          chapters.map((c, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              className: "bl-chap__tick",
+              style: { "--at": c.at },
+              "data-title": c.title,
+              "data-passed": i <= current || void 0,
+              "data-current": i === current || void 0,
+              onClick: () => jump(i)
+            },
+            i
+          ))
+        ] }),
+        open && /* @__PURE__ */ jsx("ol", { id: `${uid}-menu`, className: "bl-chap__menu", children: chapters.map((c, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-chap__link", "aria-current": i === current || void 0, onClick: () => jump(i), children: [
+          /* @__PURE__ */ jsx("span", { children: i + 1 }),
+          c.title
+        ] }) }, i)) })
+      ]
+    }
+  );
+}
+export {
+  ChapterProgress as default
+};

package/dist/ChatBubbles.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ChatMessage {
+    id: string | number;
+    from: 'me' | 'them';
+    text: ReactNode;
+    author?: string;
+    /** Avatar content (image, sprite or initials); defaults to the author's initial. */
+    avatar?: ReactNode;
+    time?: string;
+    /** Reactions already on the message. */
+    reactions?: string[];
+}
+export interface ChatBubblesProps {
+    messages?: ChatMessage[];
+    /** Show the typing indicator. */
+    typing?: boolean;
+    typingName?: string;
+    /** Picker options; double-click adds the first. */
+    reactions?: string[];
+    /** Called when you toggle a reaction. */
+    onReact?: (id: ChatMessage['id'], emoji: string, on: boolean) => void;
+    /** Thread height (px or any CSS length). */
+    height?: number | string;
+    radius?: number;
+    /** Accessible name of the live log. */
+    label?: string;
+    backgroundColor?: string;
+    meColor?: string;
+    meTextColor?: string;
+    themColor?: string;
+    themTextColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    chipColor?: string;
+    pickerColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ChatBubbles({ messages, typing, typingName, reactions, onReact, height, radius, label, backgroundColor, meColor, meTextColor, themColor, themTextColor, textColor, mutedColor, chipColor, pickerColor, lineColor, accentColor, fontFamily, className, style }: ChatBubblesProps): import("react").JSX.Element;