bits-lab 0.0.0-stage → 0.1.0

package/dist/ShadowStack.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-shadow-stack";
+const CSS = `
+.bl-stack { margin: 0; color: var(--bl-face); font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.1; text-shadow: var(--bl-shadow); transform: translate(var(--bl-push-x), var(--bl-push-y)); transition: text-shadow 160ms steps(4), transform 160ms steps(4); }
+.bl-stack[data-mode="echo"] { animation: bl-stack-breathe 2.6s ease-in-out infinite; }
+.bl-stack[data-follow] { cursor: default; user-select: none; }
+@keyframes bl-stack-breathe { 50% { letter-spacing: 0.02em; } }
+@media (prefers-reduced-motion: reduce) { .bl-stack { transition: none; 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 hexToRgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+function along(colors, t) {
+  const rgb = colors.map(hexToRgb);
+  const at = Math.min(rgb.length - 1.0001, t * (rgb.length - 1));
+  const i = Math.floor(at);
+  const f = at - i;
+  return `rgb(${rgb[i].map((v, k) => Math.round(v + (rgb[i + 1][k] - v) * f)).join(",")})`;
+}
+function shadowFor(mode, depth, angle, step, colors, echoes, spacing) {
+  const rad = angle * Math.PI / 180;
+  const unit = 1 / Math.max(Math.abs(Math.cos(rad)), Math.abs(Math.sin(rad)));
+  const ux = Math.cos(rad) * unit;
+  const uy = Math.sin(rad) * unit;
+  if (mode === "echo") {
+    return Array.from({ length: echoes }, (_, i) => {
+      const d = (i + 1) * spacing;
+      const color = along(colors, i / Math.max(1, echoes - 1));
+      return `${(ux * d).toFixed(1)}px ${(uy * d).toFixed(1)}px 0 color-mix(in srgb, ${color} ${Math.round(70 - i / echoes * 55)}%, transparent)`;
+    }).join(", ");
+  }
+  const layers = Math.max(1, Math.round(depth / step));
+  return Array.from({ length: layers }, (_, i) => {
+    const d = (i + 1) * step;
+    return `${Math.round(ux * d)}px ${Math.round(uy * d)}px 0 ${along(colors, i / Math.max(1, layers - 1))}`;
+  }).join(", ");
+}
+function ShadowStack({
+  text = "",
+  as: Tag = "h2",
+  mode = "extrude",
+  depth = 10,
+  angle = 45,
+  step = 1,
+  echoes = 4,
+  spacing = 6,
+  follow = false,
+  press = true,
+  faceColor = "#ffcd75",
+  colors = ["#ef7d57", "#b13e53", "#5d275d", "#1a1c2c"],
+  fontSize = 56,
+  fontFamily = '"Press Start 2P", ui-monospace, monospace',
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const [aim, setAim] = useState(angle);
+  const [pressed, setPressed] = useState(false);
+  const live = follow ? aim : angle;
+  const squash = pressed ? 0.35 : 1;
+  const shadow = shadowFor(mode, depth * squash, live, step, colors, echoes, spacing * squash);
+  const rad = live * Math.PI / 180;
+  const push = pressed && mode === "extrude" ? depth * (1 - squash) : 0;
+  useEffect(() => setAim(angle), [angle]);
+  useEffect(() => {
+    if (!follow || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const root = rootRef.current;
+    let raf = 0;
+    const onMove = (event) => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const r = root.getBoundingClientRect();
+        const away = Math.atan2(r.top + r.height / 2 - event.clientY, r.left + r.width / 2 - event.clientX) * 180 / Math.PI;
+        setAim(Math.round(away / 15) * 15);
+      });
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", onMove);
+    };
+  }, [follow]);
+  const setPress = (down) => {
+    if (press && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) setPressed(down);
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-stack ${className}`,
+      "data-mode": mode,
+      "data-follow": follow || void 0,
+      onPointerDown: () => setPress(true),
+      onPointerUp: () => setPress(false),
+      onPointerLeave: () => setPress(false),
+      style: { "--bl-face": faceColor, "--bl-shadow": shadow, "--bl-size": typeof fontSize === "number" ? `${fontSize}px` : fontSize, "--bl-font": fontFamily, "--bl-push-x": `${Math.round(Math.cos(rad) * push)}px`, "--bl-push-y": `${Math.round(Math.sin(rad) * push)}px`, ...style },
+      children: text
+    }
+  );
+}
+export {
+  ShadowStack as default
+};

package/dist/SideRail.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties, type ReactNode, type MouseEvent as ReactMouseEvent } from 'react';
+export interface RailItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Renders a link instead of a button. */
+    href?: string;
+    badge?: ReactNode;
+    onSelect?: (event: ReactMouseEvent<HTMLElement>) => void;
+    /** One level of nested items. */
+    children?: RailItem[];
+}
+export interface RailSection {
+    title?: string;
+    items: RailItem[];
+}
+export interface SideRailProps {
+    sections?: RailSection[];
+    /** Logo area beside the collapse button. */
+    brand?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string, item: RailItem, event: ReactMouseEvent<HTMLElement>) => void;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    width?: number;
+    railWidth?: number;
+    label?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    hoverColor?: string;
+    activeColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SideRail({ sections, brand, value, defaultValue, onValueChange, collapsed, defaultCollapsed, onCollapsedChange, width, railWidth, label, backgroundColor, textColor, mutedColor, dimColor, hoverColor, activeColor, lineColor, accentColor, onAccentColor, fontFamily, className, style }: SideRailProps): import("react").JSX.Element;

package/dist/SideRail.js

@@ -0,0 +1,253 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-side-rail";
+const CSS = `
+.bl-rail { position: relative; display: flex; flex-direction: column; width: var(--bl-w); height: 100%; box-sizing: border-box; padding: 10px; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: inset -1px 0 0 var(--bl-line); transition: width 320ms cubic-bezier(.3,1.1,.5,1); overflow: hidden; }
+.bl-rail[data-collapsed] { width: var(--bl-rail-w); }
+.bl-rail__head { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 8px; padding: 0 4px; }
+.bl-rail__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; font-weight: 700; }
+.bl-rail__toggle { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-rail__toggle:hover { background: var(--bl-hover); color: var(--bl-ink); }
+.bl-rail__toggle svg { transition: transform 320ms cubic-bezier(.3,1.3,.5,1); }
+.bl-rail[data-collapsed] .bl-rail__toggle svg { transform: rotate(180deg); }
+.bl-rail[data-collapsed] .bl-rail__head { flex-direction: column; padding: 0; }
+.bl-rail[data-collapsed] .bl-rail__brand { flex: none; }
+.bl-rail__scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
+.bl-rail__glow { position: absolute; left: 0; right: 0; top: 0; height: var(--bl-ih, 0px); border-radius: 10px; background: var(--bl-active-bg); transform: translateY(var(--bl-iy, 0px)); transition: transform 320ms cubic-bezier(.3,1.2,.5,1), height 320ms; pointer-events: none; }
+.bl-rail__glow::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--bl-accent); }
+.bl-rail__glow[data-hidden] { opacity: 0; }
+.bl-rail__section { margin: 0 0 10px; padding: 0; list-style: none; }
+.bl-rail__title { height: 26px; padding: 8px 12px 0; color: var(--bl-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; transition: opacity 200ms; }
+.bl-rail[data-collapsed] .bl-rail__title { opacity: 0; }
+.bl-rail__item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 10px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
+.bl-rail__item:hover { color: var(--bl-ink); background: var(--bl-hover); }
+.bl-rail__item[aria-current="page"] { color: var(--bl-ink); font-weight: 600; }
+.bl-rail__item:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
+.bl-rail__icon { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; }
+.bl-rail__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms; }
+.bl-rail__badge { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 999px; background: var(--bl-accent); color: var(--bl-on-accent); font-size: 11px; font-weight: 700; text-align: center; transition: opacity 200ms; }
+.bl-rail__caret { flex: 0 0 auto; color: var(--bl-dim); transition: transform 240ms cubic-bezier(.3,1.3,.5,1), opacity 200ms; }
+.bl-rail__item[aria-expanded="true"] .bl-rail__caret { transform: rotate(90deg); }
+.bl-rail[data-collapsed] :is(.bl-rail__label, .bl-rail__badge, .bl-rail__caret) { opacity: 0; }
+.bl-rail[data-collapsed] .bl-rail__badge { position: absolute; top: 6px; left: 30px; min-width: 8px; height: 8px; padding: 0; opacity: 1; font-size: 0; }
+.bl-rail__kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.2,.9,.25,1); }
+.bl-rail__kids[data-open] { grid-template-rows: 1fr; }
+.bl-rail__kids > ul { min-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 22px; list-style: none; }
+.bl-rail__kids .bl-rail__item { min-height: 34px; font-size: 13px; }
+.bl-rail[data-collapsed] .bl-rail__kids { display: none; }
+.bl-rail__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.bl-rail__tip, .bl-rail__fly { position: fixed; z-index: 1700; font-family: var(--bl-font); }
+.bl-rail__tip { padding: 5px 9px; border-radius: 7px; background: var(--bl-ink); color: var(--bl-bg); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translateY(-50%); animation: bl-rail-pop 160ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-rail__fly { min-width: 180px; padding: 6px; border-radius: 12px; background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 20px 40px -18px rgba(0,0,0,0.85); animation: bl-rail-pop 200ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-rail__fly-title { padding: 6px 10px 4px; color: var(--bl-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
+.bl-rail__fly ul { margin: 0; padding: 0; list-style: none; }
+@keyframes bl-rail-pop { from { opacity: 0; translate: -6px 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-rail, .bl-rail__glow, .bl-rail__kids, .bl-rail__toggle svg, .bl-rail__caret { transition: none; } .bl-rail__tip, .bl-rail__fly { 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 Caret = () => /* @__PURE__ */ jsx("svg", { className: "bl-rail__caret", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 2.5 8 6l-3.5 3.5" }) });
+function SideRail({
+  sections = [],
+  brand,
+  value,
+  defaultValue,
+  onValueChange,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  width = 248,
+  railWidth = 68,
+  label = "Sidebar",
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  hoverColor = "rgba(255,255,255,0.05)",
+  activeColor = "rgba(115,239,247,0.12)",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const current = value !== void 0 ? value : innerValue;
+  const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
+  const isCollapsed = collapsed ?? innerCollapsed;
+  const [openGroups, setOpenGroups] = useState(() => new Set(sections.flatMap((s) => s.items).filter((item) => item.children?.some((child) => child.id === current)).map((item) => item.id)));
+  const [tip, setTip] = useState(null);
+  const [fly, setFly] = useState(null);
+  const rootRef = useRef(null);
+  const scrollRef = useRef(null);
+  const glowRef = useRef(null);
+  const flyRef = useRef(null);
+  const select = (item, event) => {
+    if (value === void 0) setInnerValue(item.id);
+    onValueChange?.(item.id, item, event);
+    item.onSelect?.(event);
+    setFly(null);
+  };
+  const setCollapsed = (next) => {
+    if (collapsed === void 0) setInnerCollapsed(next);
+    onCollapsedChange?.(next);
+    setTip(null);
+    setFly(null);
+  };
+  const toggleGroup = (id) => setOpenGroups((groups) => {
+    const next = new Set(groups);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+  useLayoutEffect(() => {
+    const scroller = scrollRef.current;
+    const glow = glowRef.current;
+    if (!scroller || !glow) return void 0;
+    const place = () => {
+      let node = scroller.querySelector('[aria-current="page"]');
+      if (!node || node.closest(".bl-rail__kids:not([data-open])")) node = scroller.querySelector("[data-has-current]");
+      if (!node) {
+        glow.setAttribute("data-hidden", "");
+        return;
+      }
+      glow.removeAttribute("data-hidden");
+      const box = node.getBoundingClientRect();
+      const base = scroller.getBoundingClientRect();
+      glow.style.setProperty("--bl-iy", `${box.top - base.top + scroller.scrollTop}px`);
+      glow.style.setProperty("--bl-ih", `${box.height}px`);
+    };
+    place();
+    const resize = new ResizeObserver(place);
+    scroller.querySelectorAll("ul").forEach((list) => resize.observe(list));
+    return () => resize.disconnect();
+  }, [current, openGroups, isCollapsed, sections]);
+  useEffect(() => {
+    if (!fly) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setFly(null);
+        fly.anchor?.focus();
+      }
+    };
+    const onDown = (event) => {
+      if (!flyRef.current?.contains(event.target) && !fly.anchor?.contains(event.target)) setFly(null);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    requestAnimationFrame(() => flyRef.current?.querySelector("button, a")?.focus());
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [fly]);
+  const showTip = (event, text) => {
+    if (!isCollapsed) return;
+    const box = event.currentTarget.getBoundingClientRect();
+    setTip({ text, x: box.right + 10, y: box.top + box.height / 2 });
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    const scope = document.activeElement?.closest(".bl-rail__fly") ?? scrollRef.current;
+    const items = [...scope.querySelectorAll(".bl-rail__item")].filter((node) => !node.closest(".bl-rail__kids:not([data-open])"));
+    const at = items.indexOf(document.activeElement);
+    if (at < 0) return;
+    event.preventDefault();
+    items[(at + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]?.focus();
+  };
+  const renderItem = (item, nested = false) => {
+    const kids = !nested && !!item.children?.length;
+    const isOpen = openGroups.has(item.id);
+    const hasCurrent = kids && item.children.some((child) => child.id === current);
+    const common = {
+      className: "bl-rail__item",
+      onPointerEnter: (event) => showTip(event, item.label),
+      onPointerLeave: () => setTip(null),
+      onFocus: (event) => showTip(event, item.label),
+      onBlur: () => setTip(null)
+    };
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsx("span", { className: "bl-rail__icon", "aria-hidden": "true", children: item.icon }),
+      /* @__PURE__ */ jsx("span", { className: "bl-rail__label", children: item.label }),
+      item.badge != null && /* @__PURE__ */ jsxs("span", { className: "bl-rail__badge", children: [
+        item.badge,
+        /* @__PURE__ */ jsx("span", { className: "bl-rail__sr", children: " new" })
+      ] }),
+      kids && /* @__PURE__ */ jsx(Caret, {})
+    ] });
+    if (kids) {
+      return /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...common,
+            type: "button",
+            "aria-expanded": isCollapsed ? fly?.id === item.id : isOpen,
+            "aria-controls": isCollapsed ? void 0 : `${uid}-${item.id}`,
+            "aria-haspopup": isCollapsed ? "true" : void 0,
+            "data-has-current": hasCurrent && (isCollapsed || !isOpen) || void 0,
+            onClick: (event) => {
+              if (isCollapsed) {
+                const box = event.currentTarget.getBoundingClientRect();
+                setTip(null);
+                setFly((f) => f?.id === item.id ? null : { id: item.id, item, x: box.right + 10, y: box.top, anchor: event.currentTarget });
+              } else toggleGroup(item.id);
+            },
+            children: inner
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { id: `${uid}-${item.id}`, className: "bl-rail__kids", "data-open": isOpen && !isCollapsed || void 0, inert: !isOpen || isCollapsed || void 0, children: /* @__PURE__ */ jsx("ul", { children: item.children.map((child) => renderItem(child, true)) }) })
+      ] }, item.id);
+    }
+    const isCurrent = current === item.id;
+    return /* @__PURE__ */ jsx("li", { children: item.href ? /* @__PURE__ */ jsx("a", { ...common, href: item.href, "aria-current": isCurrent ? "page" : void 0, onClick: (event) => select(item, event), children: inner }) : /* @__PURE__ */ jsx("button", { ...common, type: "button", "aria-current": isCurrent ? "page" : void 0, onClick: (event) => select(item, event), children: inner }) }, item.id);
+  };
+  const vars = {
+    "--bl-w": `${width}px`,
+    "--bl-rail-w": `${railWidth}px`,
+    "--bl-bg": backgroundColor,
+    "--bl-ink": textColor,
+    "--bl-muted": mutedColor,
+    "--bl-dim": dimColor,
+    "--bl-hover": hoverColor,
+    "--bl-active-bg": activeColor,
+    "--bl-line": lineColor,
+    "--bl-accent": accentColor,
+    "--bl-on-accent": onAccentColor,
+    "--bl-font": fontFamily
+  };
+  return /* @__PURE__ */ jsxs("nav", { ref: rootRef, className: `bl-rail ${className}`, "aria-label": label, "data-collapsed": isCollapsed || void 0, onKeyDown, style: { ...vars, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "bl-rail__head", children: [
+      brand && /* @__PURE__ */ jsx("div", { className: "bl-rail__brand", children: brand }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "bl-rail__toggle", "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar", "aria-expanded": !isCollapsed, onClick: () => setCollapsed(!isCollapsed), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 3.5 5.5 8l4.5 4.5" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "bl-rail__scroll", onScroll: () => setTip(null), children: [
+      /* @__PURE__ */ jsx("div", { ref: glowRef, className: "bl-rail__glow", "aria-hidden": "true" }),
+      sections.map((section, s) => /* @__PURE__ */ jsxs("div", { children: [
+        section.title && /* @__PURE__ */ jsx("div", { className: "bl-rail__title", id: `${uid}-s${s}`, children: section.title }),
+        /* @__PURE__ */ jsx("ul", { className: "bl-rail__section", "aria-labelledby": section.title ? `${uid}-s${s}` : void 0, children: section.items.map((item) => renderItem(item)) })
+      ] }, section.title ?? s))
+    ] }),
+    tip && /* @__PURE__ */ jsx("div", { className: "bl-rail__tip", "aria-hidden": "true", style: { ...vars, left: tip.x, top: tip.y }, children: tip.text }),
+    fly && /* @__PURE__ */ jsxs("div", { ref: flyRef, className: "bl-rail__fly", role: "menu", "aria-label": fly.item.label, style: { ...vars, left: fly.x, top: fly.y }, children: [
+      /* @__PURE__ */ jsx("div", { className: "bl-rail__fly-title", "aria-hidden": "true", children: fly.item.label }),
+      /* @__PURE__ */ jsx("ul", { children: fly.item.children.map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "bl-rail__item", "aria-current": current === child.id ? "page" : void 0, onClick: (event) => select(child, event), children: [
+        child.icon && /* @__PURE__ */ jsx("span", { className: "bl-rail__icon", "aria-hidden": "true", children: child.icon }),
+        /* @__PURE__ */ jsx("span", { className: "bl-rail__label", children: child.label })
+      ] }) }, child.id)) })
+    ] })
+  ] });
+}
+export {
+  SideRail as default
+};

package/dist/SignalText.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface SignalTextProps {
+    text?: string;
+    as?: ElementType;
+    /** Noise that locks in left to right, a split-flap board, or colour-split tearing bursts. */
+    mode?: 'scramble' | 'flap' | 'glitch';
+    /** Noise characters for scramble: a preset name or your own string. */
+    charset?: 'blocks' | 'alpha' | 'digits' | (string & {});
+    /** How long scramble or flap takes to settle, in ms. */
+    duration?: number;
+    /** For trigger "loop": how often it replays (or bursts), in ms. */
+    interval?: number;
+    trigger?: 'view' | 'mount' | 'hover' | 'loop';
+    textColor?: string;
+    noiseColor?: string;
+    /** The two glitch copies. */
+    splitColors?: [string, string];
+    /** Flap tile colour. */
+    cellColor?: string;
+    cellGap?: number;
+    onSettled?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SignalText({ text, as: Tag, mode, charset, duration, interval, trigger, textColor, noiseColor, splitColors, cellColor, cellGap, onSettled, className, style }: SignalTextProps): import("react").JSX.Element;

package/dist/SignalText.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-signal-text";
+const CSS = `
+.bl-signal { position: relative; margin: 0; color: var(--bl-ink); }
+.bl-signal__glyphs { display: inline; }
+.bl-signal__ch { white-space: pre; }
+.bl-signal__ch[data-noise] { color: var(--bl-noise); }
+.bl-signal[data-mode="flap"] .bl-signal__glyphs { display: inline-flex; flex-wrap: wrap; gap: var(--bl-cell-gap); }
+.bl-signal[data-mode="flap"] .bl-signal__word { display: inline-flex; gap: var(--bl-cell-gap); }
+.bl-signal[data-mode="flap"] .bl-signal__ch { position: relative; display: inline-grid; place-items: center; min-width: 1.05em; padding: 0.12em 0.08em; border-radius: 0.12em; background: var(--bl-cell); box-shadow: inset 0 -0.08em 0 rgba(0,0,0,0.35); line-height: 1; font-variant-numeric: tabular-nums; }
+.bl-signal[data-mode="flap"] .bl-signal__ch::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.45); }
+.bl-signal[data-mode="flap"] .bl-signal__ch[data-flip] { animation: bl-signal-flap var(--bl-step) steps(2) both; }
+.bl-signal[data-mode="glitch"] .bl-signal__glyphs::before, .bl-signal[data-mode="glitch"] .bl-signal__glyphs::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
+.bl-signal[data-burst] .bl-signal__glyphs::before { opacity: 0.85; color: var(--bl-split-a); animation: bl-signal-tear-a 0.32s steps(4) both; }
+.bl-signal[data-burst] .bl-signal__glyphs::after { opacity: 0.85; color: var(--bl-split-b); animation: bl-signal-tear-b 0.32s steps(4) both; }
+.bl-signal[data-burst] .bl-signal__glyphs { animation: bl-signal-jolt 0.32s steps(4) both; }
+.bl-signal__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-signal-flap { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.1); filter: brightness(1.4); } 100% { transform: scaleY(1); } }
+@keyframes bl-signal-tear-a { 0% { clip-path: inset(10% 0 70% 0); transform: translate(-0.06em, 0); } 33% { clip-path: inset(55% 0 20% 0); transform: translate(0.08em, 0); } 66% { clip-path: inset(30% 0 45% 0); transform: translate(-0.04em, 0); } 100% { clip-path: inset(80% 0 5% 0); transform: translate(0.05em, 0); } }
+@keyframes bl-signal-tear-b { 0% { clip-path: inset(60% 0 15% 0); transform: translate(0.06em, 0); } 33% { clip-path: inset(5% 0 75% 0); transform: translate(-0.07em, 0); } 66% { clip-path: inset(40% 0 35% 0); transform: translate(0.05em, 0); } 100% { clip-path: inset(20% 0 60% 0); transform: translate(-0.03em, 0); } }
+@keyframes bl-signal-jolt { 0%, 100% { transform: none; } 25% { transform: translateX(0.03em); } 50% { transform: translateX(-0.02em) skewX(-4deg); } 75% { transform: translateX(0.01em); } }
+@media (prefers-reduced-motion: reduce) { .bl-signal .bl-signal__ch, .bl-signal .bl-signal__glyphs { animation: none !important; } .bl-signal .bl-signal__glyphs::before, .bl-signal .bl-signal__glyphs::after { display: 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 CHARSETS = {
+  blocks: "\u2588\u2593\u2592\u2591\u259A\u259E\u2599\u259F\u259B\u259C\u25A0\u25A1\u25AA\u25AB",
+  alpha: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  digits: "0123456789",
+  // The split-flap drum: what a departures board can show, in order.
+  board: " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:!?-"
+};
+const pick = (set) => set[Math.floor(Math.random() * set.length)];
+function SignalText({
+  text = "",
+  as: Tag = "p",
+  mode = "scramble",
+  charset = "blocks",
+  duration = 1200,
+  interval = 3200,
+  trigger = "view",
+  textColor = "inherit",
+  noiseColor = "#73eff7",
+  splitColors = ["#ef7d57", "#41a6f6"],
+  cellColor = "#333c57",
+  cellGap = 4,
+  onSettled,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const settledRef = useRef(onSettled);
+  settledRef.current = onSettled;
+  const target = mode === "flap" ? text.toUpperCase() : text;
+  const flapSteps = Math.max(1, ...[...target].map((ch) => Math.max(0, CHARSETS.board.indexOf(ch))));
+  const stepMs = Math.max(30, duration / flapSteps);
+  const [cells, setCells] = useState(() => [...target].map((ch) => ({ ch, noise: false, flip: 0 })));
+  const [burst, setBurst] = useState(false);
+  const [run, setRun] = useState(trigger === "mount" || trigger === "loop" ? 1 : 0);
+  useEffect(() => {
+    if (trigger !== "view") return void 0;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      observer.disconnect();
+      setRun((r) => r + 1);
+    }, { threshold: 0.3 });
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, [trigger]);
+  useEffect(() => {
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const chars = [...target];
+    const settle = () => {
+      setCells(chars.map((ch) => ({ ch, noise: false, flip: 0 })));
+      settledRef.current?.();
+    };
+    if (!run || reduced || mode === "glitch") {
+      settle();
+      return void 0;
+    }
+    let raf = 0;
+    let timer = 0;
+    let begun = 0;
+    if (mode === "scramble") {
+      const set = CHARSETS[charset] ?? charset;
+      const n = Math.max(1, chars.length);
+      let lastFrame = 0;
+      const tick = (now) => {
+        if (!begun) begun = now;
+        const t = (now - begun) / duration;
+        if (now - lastFrame > 50 || t >= 1) {
+          lastFrame = now;
+          setCells(chars.map((ch, i) => t >= (i + 1) / n || ch === " " ? { ch, noise: false, flip: 0 } : { ch: pick(set), noise: true, flip: 0 }));
+        }
+        if (t < 1) raf = requestAnimationFrame(tick);
+        else settledRef.current?.();
+      };
+      raf = requestAnimationFrame(tick);
+    } else {
+      const drum = CHARSETS.board;
+      const steps = chars.map((ch) => Math.max(0, drum.indexOf(ch)));
+      let step = 0;
+      const advance = () => {
+        step += 1;
+        setCells(chars.map((ch, i) => {
+          const at = drum.indexOf(ch) < 0 ? ch : drum[Math.min(step, steps[i])];
+          return { ch: at, noise: false, flip: step <= steps[i] ? step : 0 };
+        }));
+        if (step < flapSteps) timer = setTimeout(advance, stepMs);
+        else settledRef.current?.();
+      };
+      setCells(chars.map(() => ({ ch: " ", noise: false, flip: 0 })));
+      timer = setTimeout(advance, stepMs);
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(timer);
+    };
+  }, [run, target, mode, charset, duration, flapSteps, stepMs]);
+  useEffect(() => {
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || trigger !== "loop") return void 0;
+    const id = setInterval(() => mode === "glitch" ? setBurst(true) : setRun((r) => r + 1), Math.max(interval, duration + 400));
+    return () => clearInterval(id);
+  }, [trigger, interval, duration, mode]);
+  useEffect(() => {
+    if (mode !== "glitch" || !run || trigger === "loop" || trigger === "hover") return void 0;
+    setBurst(true);
+    return void 0;
+  }, [mode, run, trigger]);
+  useEffect(() => {
+    if (!burst) return void 0;
+    const id = setTimeout(() => setBurst(false), 340);
+    return () => clearTimeout(id);
+  }, [burst]);
+  const onPointerEnter = () => {
+    if (trigger !== "hover" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    if (mode === "glitch") setBurst(true);
+    else setRun((r) => r + 1);
+  };
+  const words = [];
+  [...target].forEach((ch, i) => {
+    const space = ch === " ";
+    const prev = words[words.length - 1];
+    if (prev && prev.space === space) prev.end = i + 1;
+    else words.push({ start: i, end: i + 1, space });
+  });
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-signal ${className}`,
+      "data-mode": mode,
+      "data-burst": burst || void 0,
+      onPointerEnter,
+      style: { "--bl-ink": textColor, "--bl-noise": noiseColor, "--bl-split-a": splitColors[0], "--bl-split-b": splitColors[1], "--bl-cell": cellColor, "--bl-cell-gap": `${cellGap}px`, "--bl-step": `${stepMs}ms`, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-signal__sr", children: text }),
+        /* @__PURE__ */ jsx("span", { className: "bl-signal__glyphs", "data-text": target, "aria-hidden": "true", children: words.map(({ start, end }) => (
+          // Letters of a word stay together, so the flap board only wraps between words.
+          /* @__PURE__ */ jsx("span", { className: "bl-signal__word", children: cells.slice(start, end).map((cell, k) => /* @__PURE__ */ jsx("span", { className: "bl-signal__ch", "data-noise": cell.noise || void 0, "data-flip": cell.flip ? "" : void 0, children: cell.ch }, `${start + k}-${cell.flip}`)) }, start)
+        )) })
+      ]
+    }
+  );
+}
+export {
+  SignalText as default
+};

package/dist/SkeletonShimmer.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface SkeletonShimmerProps {
+    /** While true, the content is hidden and traced into a skeleton. */
+    loading?: boolean;
+    children?: ReactNode;
+    /** Bar thickness as a share of each text line. */
+    lineScale?: number;
+    /** Crossfade in ms. */
+    fade?: number;
+    /** Shimmer cycle in ms. */
+    speed?: number;
+    baseColor?: string;
+    shineColor?: string;
+    loadingLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SkeletonShimmer({ loading, children, lineScale, fade, speed, baseColor, shineColor, loadingLabel, className, style }: SkeletonShimmerProps): import("react").JSX.Element;