bits-lab 0.0.0-stage → 0.1.2

package/dist/BootSequence.js

@@ -0,0 +1,234 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-boot-sequence";
+const CSS = `
+.bl-boot { position: relative; width: 100%; height: 100%; min-height: var(--bl-min-h); overflow: hidden; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.6; }
+.bl-boot[data-skippable] { cursor: pointer; }
+.bl-boot__screen { position: absolute; inset: 0; padding: 18px 20px 40px; overflow: hidden; }
+.bl-boot__screen[data-off] { animation: bl-boot-off 420ms steps(6) forwards; }
+.bl-boot__line { display: flex; gap: 1ch; min-height: 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; }
+.bl-boot__text { flex: 1; min-width: 0; }
+.bl-boot__head { margin-bottom: 0.8em; color: var(--bl-accent); }
+.bl-boot__tag { flex: 0 0 auto; white-space: pre; }
+.bl-boot__tag[data-status="ok"] { color: var(--bl-ok); }
+.bl-boot__tag[data-status="warn"] { color: var(--bl-warn); }
+.bl-boot__tag[data-status="fail"] { color: var(--bl-fail); }
+.bl-boot__cursor { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: bl-boot-blink 1s steps(1) infinite; }
+.bl-boot__hint { position: absolute; right: 16px; bottom: 12px; left: 16px; color: var(--bl-muted); font-size: 0.8em; text-align: right; animation: bl-boot-blink 1.6s steps(1) infinite; }
+.bl-boot__reveal { position: absolute; inset: 0; animation: bl-boot-on 520ms steps(8) both; }
+.bl-boot__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.2) 2px 3px); }
+.bl-boot__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.bl-boot__skip { position: absolute; top: 8px; right: 8px; padding: 6px 10px; border: 1px solid var(--bl-muted); background: var(--bl-bg); color: var(--bl-ink); font: inherit; font-size: 0.8em; opacity: 0; pointer-events: none; }
+.bl-boot__skip:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--bl-accent); }
+@keyframes bl-boot-blink { 50% { opacity: 0; } }
+@keyframes bl-boot-off { 60% { transform: scaleY(0.04); filter: brightness(2.5); opacity: 1; } 100% { transform: scale(0, 0.04); opacity: 0; } }
+@keyframes bl-boot-on { from { clip-path: inset(50% 0 50% 0); filter: brightness(2.2); } to { clip-path: inset(0 0 0 0); filter: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-boot__cursor, .bl-boot__hint { animation: none; }
+  .bl-boot__screen[data-off], .bl-boot__reveal { 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 TAGS = { ok: "[  OK  ]", warn: "[ WARN ]", fail: "[ FAIL ]" };
+const DEFAULT_LINES = [
+  { text: "Detecting CPU... PX-8 @ 4.77 MHz", status: "ok" },
+  { text: "Memory test:", count: 640, unit: "K", status: "ok" },
+  { text: "Video adapter... 16-color palette", status: "ok" },
+  { text: "Sound chip... square, saw, noise", status: "ok" },
+  { text: "Cartridge slot... empty", status: "warn" },
+  { text: "Loading BITS.SYS", status: "ok" },
+  "Starting shell..."
+];
+let audio = null;
+function beepOnce(frequency, seconds) {
+  try {
+    audio ?? (audio = new AudioContext());
+    if (audio.state === "suspended") audio.resume();
+    const osc = audio.createOscillator();
+    const gain = audio.createGain();
+    const now = audio.currentTime;
+    osc.type = "square";
+    osc.frequency.value = frequency;
+    gain.gain.setValueAtTime(0.05, now);
+    gain.gain.linearRampToValueAtTime(0, now + seconds);
+    osc.connect(gain).connect(audio.destination);
+    osc.start(now);
+    osc.stop(now + seconds);
+  } catch {
+  }
+}
+function BootSequence({
+  header = ["BITS LAB BIOS v1.0", "(C) 2026 Bits Lab. All rights reserved."],
+  lines = DEFAULT_LINES,
+  speed = 70,
+  lineDelay = 160,
+  countDuration = 900,
+  holdAfter = 700,
+  skippable = true,
+  beep = false,
+  replayKey,
+  onComplete,
+  children,
+  minHeight = 320,
+  fontSize = 14,
+  backgroundColor = "#0b0b14",
+  textColor = "#94b0c2",
+  accentColor = "#f4f4f4",
+  okColor = "#a7f070",
+  warnColor = "#ffcd75",
+  failColor = "#ef7d57",
+  mutedColor = "#566c86",
+  scanlines = true,
+  hint = "Click or press any key to skip",
+  label = "System boot",
+  fontFamily = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  className = "",
+  style
+}) {
+  useStyles();
+  const timeline = useMemo(() => {
+    let t = 0;
+    const items = lines.map((entry) => {
+      const line = typeof entry === "string" ? { text: entry } : entry;
+      const start = t;
+      const typeEnd = start + line.text.length / speed * 1e3;
+      const countEnd = typeEnd + (line.count != null ? countDuration : 0);
+      t = countEnd + (line.delay ?? lineDelay);
+      return { ...line, start, typeEnd, countEnd };
+    });
+    return { items, total: t + holdAfter };
+  }, [lines, speed, lineDelay, countDuration, holdAfter]);
+  const [elapsed, setElapsed] = useState(0);
+  const [phase, setPhase] = useState("boot");
+  const startRef = useRef(0);
+  useEffect(() => {
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    setPhase("boot");
+    setElapsed(0);
+    startRef.current = reduced ? -Infinity : performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const t = Math.min(timeline.total, now - startRef.current);
+      setElapsed(t);
+      if (t < timeline.total) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [timeline, replayKey]);
+  const done = elapsed >= timeline.total;
+  const skip = () => {
+    startRef.current = -Infinity;
+  };
+  useEffect(() => {
+    if (!skippable || done) return void 0;
+    const onKey = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey || event.key === "Tab" || event.key === "Shift") return;
+      const el = event.target;
+      if (el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName))) return;
+      skip();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [skippable, done]);
+  const tagsShown = timeline.items.filter((item) => item.status && elapsed >= item.countEnd).length;
+  const beeped = useRef(0);
+  useEffect(() => {
+    if (tagsShown < beeped.current) beeped.current = 0;
+    if (beep && tagsShown > beeped.current) {
+      const latest = timeline.items.filter((item) => item.status)[tagsShown - 1];
+      beepOnce(latest?.status === "fail" ? 220 : 1320, 0.04);
+    }
+    beeped.current = tagsShown;
+  }, [tagsShown, beep, timeline]);
+  const completed = useRef(onComplete);
+  completed.current = onComplete;
+  useEffect(() => {
+    if (!done) return;
+    if (beep) beepOnce(988, 0.2);
+    completed.current?.();
+    if (children) setPhase(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "revealed" : "off");
+  }, [done]);
+  let active = -1;
+  timeline.items.forEach((item, i) => {
+    if (elapsed >= item.start) active = i;
+  });
+  const finished = timeline.items.filter((item) => elapsed >= item.countEnd);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-boot ${className}`,
+      role: "region",
+      "aria-label": label,
+      "data-skippable": skippable && !done || void 0,
+      onClick: skippable && !done ? skip : void 0,
+      style: {
+        "--bl-min-h": `${minHeight}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-accent": accentColor,
+        "--bl-ok": okColor,
+        "--bl-warn": warnColor,
+        "--bl-fail": failColor,
+        "--bl-muted": mutedColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        phase !== "revealed" && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bl-boot__screen",
+            "data-off": phase === "off" || void 0,
+            "aria-hidden": "true",
+            onAnimationEnd: (event) => {
+              if (event.target === event.currentTarget) setPhase("revealed");
+            },
+            children: [
+              header.length > 0 && /* @__PURE__ */ jsx("div", { className: "bl-boot__head", children: header.map((line, i) => /* @__PURE__ */ jsx("div", { className: "bl-boot__line", children: line }, i)) }),
+              timeline.items.map((item, i) => {
+                if (elapsed < item.start) return null;
+                const chars = Math.min(item.text.length, Math.floor((elapsed - item.start) / 1e3 * speed));
+                let count = "";
+                if (item.count != null && elapsed >= item.typeEnd) {
+                  const progress = Math.min(1, (elapsed - item.typeEnd) / countDuration);
+                  count = ` ${Math.round(item.count * progress)}${item.unit ?? ""}`;
+                }
+                const tag = item.status && elapsed >= item.countEnd ? item.status : null;
+                return /* @__PURE__ */ jsxs("div", { className: "bl-boot__line", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "bl-boot__text", children: [
+                    item.text.slice(0, chars),
+                    count,
+                    i === active && !done && /* @__PURE__ */ jsx("span", { className: "bl-boot__cursor" })
+                  ] }),
+                  tag && /* @__PURE__ */ jsx("span", { className: "bl-boot__tag", "data-status": tag, children: TAGS[tag] })
+                ] }, i);
+              }),
+              done && /* @__PURE__ */ jsx("div", { className: "bl-boot__line", children: /* @__PURE__ */ jsx("span", { className: "bl-boot__cursor" }) }),
+              skippable && !done && hint && /* @__PURE__ */ jsx("div", { className: "bl-boot__hint", children: hint })
+            ]
+          }
+        ),
+        phase === "revealed" && /* @__PURE__ */ jsx("div", { className: "bl-boot__reveal", children }),
+        scanlines && /* @__PURE__ */ jsx("div", { className: "bl-boot__scan", "aria-hidden": "true" }),
+        skippable && !done && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-boot__skip", onClick: skip, children: "Skip boot sequence" }),
+        /* @__PURE__ */ jsx("div", { className: "bl-boot__sr", role: "log", "aria-live": "polite", children: finished.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
+          item.text,
+          item.count != null ? ` ${item.count}${item.unit ?? ""}` : "",
+          item.status ? ` ${item.status.toUpperCase()}` : ""
+        ] }, i)) })
+      ]
+    }
+  );
+}
+export {
+  BootSequence as default
+};

package/dist/BreadcrumbTrail.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+export interface Crumb {
+    label: string;
+    /** Renders a link; without it the crumb is a button. */
+    href?: string;
+    icon?: ReactNode;
+}
+export interface BreadcrumbTrailProps {
+    /** Root first, current page last. */
+    items?: Crumb[];
+    /** Any crumb or menu click; call event.preventDefault() for client-side routing. */
+    onNavigate?: (item: Crumb, index: number, event: ReactMouseEvent<HTMLElement>) => void;
+    separator?: ReactNode;
+    /** Accessible name of the "…" button and its menu. */
+    moreLabel?: string;
+    /** Accessible name of the nav landmark. */
+    label?: string;
+    fontSize?: number;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    hoverColor?: string;
+    chipColor?: string;
+    menuColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function BreadcrumbTrail({ items, onNavigate, separator, moreLabel, label, fontSize, textColor, mutedColor, dimColor, hoverColor, chipColor, menuColor, lineColor, accentColor, fontFamily, className, style }: BreadcrumbTrailProps): import("react").JSX.Element;

package/dist/BreadcrumbTrail.js

@@ -0,0 +1,181 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-breadcrumb-trail";
+const CSS = `
+.bl-crumbs { position: relative; min-width: 0; font-family: var(--bl-font); font-size: var(--bl-size); }
+.bl-crumbs__list { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
+.bl-crumbs__item { display: flex; align-items: center; gap: 4px; min-width: 0; animation: bl-crumbs-in 260ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-crumbs__item:last-child { flex: 0 1 auto; }
+.bl-crumbs__link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); font: inherit; text-decoration: none; cursor: pointer; transition: background-color 150ms, color 150ms; }
+.bl-crumbs__link:hover { background: var(--bl-hover); color: var(--bl-ink); }
+.bl-crumbs__link:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-crumbs__current { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; color: var(--bl-ink); font-weight: 600; }
+.bl-crumbs__text { overflow: hidden; text-overflow: ellipsis; }
+.bl-crumbs__sep { flex: none; display: grid; place-items: center; color: var(--bl-dim); }
+.bl-crumbs__more { display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: var(--bl-chip); color: var(--bl-ink); font: inherit; letter-spacing: 1px; cursor: pointer; transition: background-color 150ms; }
+.bl-crumbs__more:hover, .bl-crumbs__more[aria-expanded="true"] { background: var(--bl-hover); }
+.bl-crumbs__more:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-crumbs__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: var(--bl-menu-x); min-width: 180px; margin: 0; padding: 5px; border-radius: 12px; background: var(--bl-menu); list-style: none; box-shadow: 0 0 0 1px var(--bl-line), 0 16px 32px -14px rgba(0,0,0,0.8); transform-origin: top left; animation: bl-crumbs-menu 200ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-crumbs__menu .bl-crumbs__link { display: flex; width: 100%; box-sizing: border-box; padding: 8px 10px; animation: bl-crumbs-in 240ms cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 35ms); }
+.bl-crumbs__clip { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
+.bl-crumbs__measure { width: max-content; }
+@keyframes bl-crumbs-in { from { opacity: 0; transform: translateY(4px) scale(0.92); } }
+@keyframes bl-crumbs-menu { from { opacity: 0; transform: scale(0.9) translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .bl-crumbs__item, .bl-crumbs__menu, .bl-crumbs__menu .bl-crumbs__link { 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 Chevron = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 2.5 8 6l-3.5 3.5" }) });
+function BreadcrumbTrail({
+  items = [],
+  onNavigate,
+  separator = /* @__PURE__ */ jsx(Chevron, {}),
+  moreLabel = "Show hidden pages",
+  label = "Breadcrumb",
+  fontSize = 14,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  hoverColor = "rgba(255,255,255,0.08)",
+  chipColor = "rgba(255,255,255,0.05)",
+  menuColor = "#1a1c2c",
+  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 navRef = useRef(null);
+  const measureRef = useRef(null);
+  const moreRef = useRef(null);
+  const menuRef = useRef(null);
+  const [hidden, setHidden] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [menuX, setMenuX] = useState(0);
+  useLayoutEffect(() => {
+    const nav = navRef.current;
+    const measure = measureRef.current;
+    const fit = () => {
+      const widths = [...measure.children].map((node) => node.getBoundingClientRect().width);
+      const more = widths.pop();
+      const gap = 4;
+      const available = nav.clientWidth;
+      const total = (n2) => widths.reduce((sum, w, i) => i >= 1 && i <= n2 ? sum : sum + w + gap, 0) + (n2 ? more + gap : 0);
+      let n = 0;
+      while (n < items.length - 2 && total(n) > available) n++;
+      setHidden(n);
+    };
+    fit();
+    const resize = new ResizeObserver(fit);
+    resize.observe(nav);
+    resize.observe(measure);
+    return () => resize.disconnect();
+  }, [items, fontSize, fontFamily]);
+  useEffect(() => {
+    if (!hidden) setOpen(false);
+  }, [hidden]);
+  useEffect(() => {
+    if (!open) return void 0;
+    const menu = menuRef.current;
+    const button = moreRef.current;
+    const nav = navRef.current;
+    setMenuX(button.offsetLeft);
+    menu.querySelector(".bl-crumbs__link")?.focus();
+    const entries = () => [...menu.querySelectorAll(".bl-crumbs__link")];
+    const onKey = (event) => {
+      const list = entries();
+      const at = list.indexOf(document.activeElement);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        button.focus();
+      } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        list[(at + (event.key === "ArrowDown" ? 1 : -1) + list.length) % list.length]?.focus();
+      } else if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        list[event.key === "Home" ? 0 : list.length - 1]?.focus();
+      } else if (event.key === "Tab") setOpen(false);
+    };
+    const onDown = (event) => {
+      if (!nav.contains(event.target)) setOpen(false);
+    };
+    menu.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      menu.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [open]);
+  const content = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { className: "bl-crumbs__text", children: item.label })
+  ] });
+  const link = (item, index, extra = {}) => {
+    const onClick = (event) => {
+      onNavigate?.(item, index, event);
+      setOpen(false);
+    };
+    return item.href ? /* @__PURE__ */ jsx("a", { className: "bl-crumbs__link", href: item.href, onClick, ...extra, children: content(item) }) : /* @__PURE__ */ jsx("button", { type: "button", className: "bl-crumbs__link", onClick, ...extra, children: content(item) });
+  };
+  const crumb = (item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "bl-crumbs__item", children: [
+      last ? /* @__PURE__ */ jsx("span", { className: "bl-crumbs__current", "aria-current": "page", children: content(item) }) : link(item, index),
+      !last && /* @__PURE__ */ jsx("span", { className: "bl-crumbs__sep", "aria-hidden": "true", children: separator })
+    ] }, `${index}-${item.label}`);
+  };
+  const folded = items.slice(1, 1 + hidden);
+  return /* @__PURE__ */ jsxs("nav", { ref: navRef, "aria-label": label, className: `bl-crumbs ${className}`, style: { "--bl-size": `${fontSize}px`, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-dim": dimColor, "--bl-hover": hoverColor, "--bl-chip": chipColor, "--bl-menu": menuColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-font": fontFamily, "--bl-menu-x": `${menuX}px`, ...style }, children: [
+    /* @__PURE__ */ jsxs("ol", { className: "bl-crumbs__list", children: [
+      items.length > 0 && crumb(items[0], 0),
+      hidden > 0 && /* @__PURE__ */ jsxs("li", { className: "bl-crumbs__item", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: moreRef,
+            type: "button",
+            className: "bl-crumbs__more",
+            "aria-label": `${moreLabel} (${hidden})`,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": open ? `${uid}-menu` : void 0,
+            onClick: () => setOpen((o) => !o),
+            onKeyDown: (event) => {
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setOpen(true);
+              }
+            },
+            children: "\u2026"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "bl-crumbs__sep", "aria-hidden": "true", children: separator })
+      ] }),
+      items.slice(1 + hidden).map((item, i) => crumb(item, i + 1 + hidden))
+    ] }),
+    open && /* @__PURE__ */ jsx("ul", { ref: menuRef, id: `${uid}-menu`, role: "menu", "aria-label": moreLabel, className: "bl-crumbs__menu", children: folded.map((item, i) => /* @__PURE__ */ jsx("li", { role: "none", children: link(item, i + 1, { role: "menuitem", tabIndex: -1, style: { "--i": i } }) }, `${i}-${item.label}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "bl-crumbs__clip", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { ref: measureRef, className: "bl-crumbs__list bl-crumbs__measure", children: [
+      items.map((item, index) => /* @__PURE__ */ jsxs("span", { className: "bl-crumbs__item", style: { animation: "none" }, children: [
+        /* @__PURE__ */ jsx("span", { className: index === items.length - 1 ? "bl-crumbs__current" : "bl-crumbs__link", children: content(item) }),
+        index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "bl-crumbs__sep", children: separator })
+      ] }, `${index}-${item.label}`)),
+      /* @__PURE__ */ jsxs("span", { className: "bl-crumbs__item", style: { animation: "none" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-crumbs__more", children: "\u2026" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-crumbs__sep", children: separator })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  BreadcrumbTrail as default
+};

package/dist/CRTPower.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CRTPowerProps {
+    /** What's on the screen. It's inert and hidden from screen readers while off. */
+    children?: ReactNode;
+    /** Controlled power state. */
+    on?: boolean;
+    /** Starting state when uncontrolled. */
+    defaultOn?: boolean;
+    /** Called with the new state when the power button is pressed. */
+    onChange?: (on: boolean) => void;
+    /** Power-on length, in ms (power-off is a little shorter). */
+    duration?: number;
+    /** Screen height: a number in px or any CSS length. */
+    height?: number | string;
+    radius?: number;
+    background?: string;
+    bezelColor?: string;
+    /** Color of the power-on line and the fading dot. */
+    glowColor?: string;
+    scanlines?: boolean;
+    vignette?: boolean;
+    /** Show the built-in power button. */
+    showButton?: boolean;
+    /** Play the power-on animation when the component mounts. */
+    powerOnAtMount?: boolean;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CRTPower({ children, on, defaultOn, onChange, duration, height, radius, background, bezelColor, glowColor, scanlines, vignette, showButton, powerOnAtMount, fontFamily, className, style }: CRTPowerProps): import("react").JSX.Element;

package/dist/CRTPower.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-crt-power";
+const CSS = `
+.bl-crt { display: grid; gap: 14px; justify-items: center; width: 100%; }
+.bl-crt__screen { position: relative; width: 100%; height: var(--bl-height); background: var(--bl-bg); overflow: hidden; border-radius: var(--bl-radius);
+  box-shadow: 0 0 0 4px #0b0b14, 0 0 0 10px var(--bl-bezel), 0 0 0 14px #0b0b14, 10px 14px 0 10px rgba(11, 11, 20, 0.4); }
+.bl-crt__content { position: absolute; inset: 0; transform-origin: center; will-change: transform, filter; }
+.bl-crt__content[data-off] { visibility: hidden; }
+.bl-crt__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 4px); }
+.bl-crt__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%); }
+.bl-crt__dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--bl-glow); box-shadow: 0 0 18px 6px var(--bl-glow); opacity: 0; pointer-events: none; }
+.bl-crt__power { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; background: var(--bl-bezel); color: #f4f4f4; font: 9px/1 var(--bl-font, "Press Start 2P", ui-monospace, monospace); text-transform: uppercase; cursor: pointer;
+  box-shadow: 0 -3px 0 0 #0b0b14, 0 3px 0 0 #0b0b14, -3px 0 0 0 #0b0b14, 3px 0 0 0 #0b0b14; }
+.bl-crt__power:focus-visible { outline: 3px solid #41a6f6; outline-offset: 5px; }
+.bl-crt__led { width: 8px; height: 8px; background: #b13e53; box-shadow: 0 0 6px #b13e53; }
+.bl-crt__power[aria-pressed="true"] .bl-crt__led { background: #a7f070; box-shadow: 0 0 8px #a7f070; }
+`;
+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 reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function CRTPower({
+  children,
+  on,
+  defaultOn = true,
+  onChange,
+  duration = 650,
+  height = 360,
+  radius = 18,
+  background = "#0b0b14",
+  bezelColor = "#333c57",
+  glowColor = "#e8f6ff",
+  scanlines = true,
+  vignette = true,
+  showButton = true,
+  powerOnAtMount = true,
+  fontFamily,
+  className = "",
+  style
+}) {
+  useStyles();
+  const controlled = typeof on === "boolean";
+  const [internalOn, setInternalOn] = useState(defaultOn);
+  const isOn = controlled ? on : internalOn;
+  const [visible, setVisible] = useState(isOn && !powerOnAtMount);
+  const contentRef = useRef(null);
+  const dotRef = useRef(null);
+  const first = useRef(true);
+  useEffect(() => {
+    const content = contentRef.current;
+    const dot = dotRef.current;
+    if (!content) return void 0;
+    if (first.current) {
+      first.current = false;
+      if (!(isOn && powerOnAtMount)) {
+        setVisible(isOn);
+        return void 0;
+      }
+    }
+    const animations = [];
+    if (reducedMotion()) {
+      setVisible(true);
+      animations.push(content.animate([{ opacity: isOn ? 0 : 1 }, { opacity: isOn ? 1 : 0 }], { duration: 200, fill: "forwards" }));
+      animations[0].onfinish = () => setVisible(isOn);
+      return () => animations.forEach((animation) => animation.cancel());
+    }
+    if (isOn) {
+      setVisible(true);
+      animations.push(
+        content.animate(
+          [
+            { transform: "scale(0, 0.004)", filter: "brightness(6)", opacity: 1 },
+            { transform: "scale(1, 0.004)", filter: "brightness(5)", offset: 0.35 },
+            { transform: "scale(1, 1.04)", filter: "brightness(2)", offset: 0.75 },
+            { transform: "scale(1, 1)", filter: "brightness(1)", opacity: 1 }
+          ],
+          { duration, easing: "cubic-bezier(.2,.8,.2,1)" }
+        )
+      );
+    } else {
+      const off = content.animate(
+        [
+          { transform: "scale(1, 1)", filter: "brightness(1)" },
+          { transform: "scale(1, 0.004)", filter: "brightness(4)", offset: 0.55 },
+          { transform: "scale(0, 0.004)", filter: "brightness(6)" }
+        ],
+        { duration: duration * 0.8, easing: "cubic-bezier(.6,0,.8,.2)", fill: "forwards" }
+      );
+      off.onfinish = () => {
+        setVisible(false);
+        off.cancel();
+      };
+      animations.push(off);
+      if (dot) {
+        animations.push(dot.animate([{ opacity: 0 }, { opacity: 1, offset: 0.1 }, { opacity: 0, transform: "scale(0.4)" }], { duration: duration * 1.4, delay: duration * 0.7 }));
+      }
+    }
+    return () => animations.forEach((animation) => animation.cancel());
+  }, [isOn, duration, powerOnAtMount]);
+  const toggle = () => {
+    const next = !isOn;
+    if (!controlled) setInternalOn(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-crt ${className}`,
+      style: {
+        "--bl-height": typeof height === "number" ? `${height}px` : height,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": background,
+        "--bl-bezel": bezelColor,
+        "--bl-glow": glowColor,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-crt__screen", children: [
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: "bl-crt__content", "data-off": !visible || void 0, inert: !isOn || void 0, "aria-hidden": !isOn || void 0, children }),
+          /* @__PURE__ */ jsx("div", { ref: dotRef, className: "bl-crt__dot", "aria-hidden": "true" }),
+          scanlines && /* @__PURE__ */ jsx("div", { className: "bl-crt__scan", "aria-hidden": "true" }),
+          vignette && /* @__PURE__ */ jsx("div", { className: "bl-crt__vignette", "aria-hidden": "true" })
+        ] }),
+        showButton && /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-crt__power", "aria-pressed": isOn, onClick: toggle, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-crt__led", "aria-hidden": "true" }),
+          isOn ? "Power off" : "Power on"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CRTPower as default
+};

package/dist/CardDeck.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CardDeckProps {
+    /** The cards, top first. */
+    children?: ReactNode;
+    width?: number;
+    height?: number;
+    /** Cards shown in the pile. */
+    visible?: number;
+    /** How far each card sits down-right of the one above, in px. */
+    offset?: number;
+    /** Fan angle per card, in degrees. */
+    fan?: number;
+    /** Drag distance (share of the width) before the card flies. */
+    threshold?: number;
+    loop?: boolean;
+    onChange?: (index: number) => void;
+    label?: string;
+    radius?: number;
+    cardColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    chipColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CardDeck({ children, width, height, visible, offset, fan, threshold, loop, onChange, label, radius, cardColor, textColor, mutedColor, lineColor, chipColor, accentColor, fontFamily, className, style }: CardDeckProps): import("react").JSX.Element;