bits-lab 0.0.0-stage → 0.1.0

package/dist/LogoOrbit.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-logo-orbit";
+const CSS = `
+.bl-orbit { position: relative; width: min(var(--bl-size), 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-orbit__ring { position: absolute; inset: 0; animation: bl-orbit-spin var(--bl-dur) linear infinite; animation-direction: var(--bl-dir); pointer-events: none; }
+.bl-orbit__track { position: absolute; left: 50%; top: 50%; width: calc(var(--bl-r) * 2cqi); height: calc(var(--bl-r) * 2cqi); border-radius: 50%; border: 1px dashed var(--bl-line); transform: translate(-50%, -50%); pointer-events: none; }
+.bl-orbit__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--bl-a)) translateX(calc(var(--bl-r) * 1cqi)) rotate(calc(var(--bl-a) * -1)); }
+.bl-orbit__logo { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--bl-item); height: var(--bl-item); margin: calc(var(--bl-item) / -2) 0 0 calc(var(--bl-item) / -2); border-radius: var(--bl-item-radius); background: var(--bl-item-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 8px 20px -10px rgba(0,0,0,0.6); pointer-events: auto; outline: none; animation: bl-orbit-spin var(--bl-dur) linear infinite; animation-direction: var(--bl-cdir); transition: box-shadow 160ms, scale 160ms; }
+.bl-orbit__logo > * { max-width: 62%; max-height: 62%; }
+.bl-orbit__logo:hover, .bl-orbit__logo:focus-visible { scale: 1.15; box-shadow: 0 0 0 2px var(--bl-accent), 0 8px 24px -8px rgba(0,0,0,0.6); }
+.bl-orbit__tip { position: absolute; left: 50%; bottom: calc(100% + 6px); 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-orbit__logo:hover .bl-orbit__tip, .bl-orbit__logo:focus-visible .bl-orbit__tip { opacity: 1; }
+.bl-orbit__center { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: var(--bl-center); height: var(--bl-center); border-radius: 50%; transform: translate(-50%, -50%); background: var(--bl-center-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 0 60px -10px var(--bl-accent); }
+.bl-orbit[data-pausable]:hover :is(.bl-orbit__ring, .bl-orbit__logo), .bl-orbit[data-pausable]:focus-within :is(.bl-orbit__ring, .bl-orbit__logo), .bl-orbit[data-paused] :is(.bl-orbit__ring, .bl-orbit__logo) { animation-play-state: paused; }
+.bl-orbit__list { margin: 0; padding: 0; list-style: none; }
+@keyframes bl-orbit-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) { .bl-orbit__ring, .bl-orbit__logo { 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);
+  }, []);
+}
+function distribute(n, radii) {
+  const total = radii.reduce((a, b) => a + b, 0);
+  const counts = radii.map((r) => Math.floor(n * r / total));
+  let left = n - counts.reduce((a, b) => a + b, 0);
+  for (let i = radii.length - 1; left > 0; i = (i - 1 + radii.length) % radii.length, left--) counts[i]++;
+  return counts;
+}
+function LogoOrbit({
+  logos = [],
+  center,
+  rings = 2,
+  size = 480,
+  innerRadius = 24,
+  ringGap = 16,
+  itemSize = 52,
+  centerSize = 96,
+  duration = 40,
+  pauseOnHover = true,
+  showTracks = true,
+  label = "Integrations",
+  backgroundColor = "#1a1c2c",
+  itemColor = "#262b44",
+  centerColor = "#333c57",
+  lineColor = "rgba(148,176,194,0.25)",
+  accentColor = "#73eff7",
+  textColor = "#f4f4f4",
+  itemRadius = 14,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const [offscreen, setOffscreen] = useState(false);
+  useEffect(() => {
+    const io = new IntersectionObserver(([entry]) => setOffscreen(!entry.isIntersecting));
+    io.observe(rootRef.current);
+    return () => io.disconnect();
+  }, []);
+  const radii = Array.from({ length: Math.max(1, rings) }, (_, k) => innerRadius + k * ringGap);
+  const counts = distribute(logos.length, radii);
+  let next = 0;
+  const groups = counts.map((count) => {
+    const group = logos.slice(next, next + count);
+    next += count;
+    return group;
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-orbit ${className}`,
+      role: "group",
+      "aria-label": label,
+      "data-pausable": pauseOnHover || void 0,
+      "data-paused": offscreen || void 0,
+      style: {
+        "--bl-size": `${size}px`,
+        // Tiles shrink with the box on small screens (cqi resolves against the orbit).
+        "--bl-item": `min(${itemSize}px, 12cqi)`,
+        "--bl-center": `min(${centerSize}px, 22cqi)`,
+        "--bl-item-radius": `${itemRadius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-item-bg": itemColor,
+        "--bl-center-bg": centerColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-ink": textColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        showTracks && radii.map((r, k) => /* @__PURE__ */ jsx("div", { className: "bl-orbit__track", style: { "--bl-r": r }, "aria-hidden": "true" }, `t${k}`)),
+        /* @__PURE__ */ jsx("div", { className: "bl-orbit__center", children: center }),
+        /* @__PURE__ */ jsx("ul", { className: "bl-orbit__list", children: groups.map((group, k) => {
+          const ringStyle = { "--bl-dur": `${duration * (1 + k * 0.5)}s`, "--bl-dir": k % 2 ? "reverse" : "normal", "--bl-cdir": k % 2 ? "normal" : "reverse", "--bl-r": radii[k] };
+          if (!group.length) return null;
+          return /* @__PURE__ */ jsx("li", { className: "bl-orbit__ring", style: ringStyle, children: /* @__PURE__ */ jsx("ul", { className: "bl-orbit__list", children: group.map((logo, i) => /* @__PURE__ */ jsx("li", { className: "bl-orbit__item", style: { "--bl-a": `${360 / group.length * i + k * 17}deg` }, children: /* @__PURE__ */ jsxs("span", { className: "bl-orbit__logo", tabIndex: 0, "aria-label": logo.label, role: "img", children: [
+            logo.icon,
+            logo.label && /* @__PURE__ */ jsx("span", { className: "bl-orbit__tip", "aria-hidden": "true", children: logo.label })
+          ] }) }, logo.id ?? logo.label ?? i)) }) }, k);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  LogoOrbit as default
+};

package/dist/Marquee.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MarqueeProps {
+    /** Logos or cards, dealt round-robin into lanes. */
+    items?: ReactNode[];
+    lanes?: number;
+    /** Lanes run up and down instead of across. */
+    vertical?: boolean;
+    /** px per second. */
+    speed?: number;
+    /** How much lane speeds differ (0–1). */
+    variance?: number;
+    /** Neighbouring lanes run opposite ways. */
+    alternate?: boolean;
+    /** Speed of a hovered lane, 0–1 (0 stops it). */
+    slow?: number;
+    /** Opacity of the other items in a hovered lane. */
+    dim?: number;
+    gap?: number;
+    /** Edge fade in px. */
+    fade?: number;
+    /** Height of a vertical wall in px. */
+    height?: number;
+    showPause?: boolean;
+    /** Name of the items list for screen readers, and of the pause button. */
+    label?: string;
+    textColor?: string;
+    accentColor?: string;
+    chipColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Marquee({ items, lanes, vertical, speed, variance, alternate, slow, dim, gap, fade, height, showPause, label, textColor, accentColor, chipColor, fontFamily, className, style }: MarqueeProps): import("react").JSX.Element;

package/dist/Marquee.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-marquee-wall";
+const CSS = `
+.bl-mwall { position: relative; display: grid; gap: 10px; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-mwall__lanes { display: flex; flex-direction: column; gap: var(--bl-gap); }
+.bl-mwall[data-vertical] .bl-mwall__lanes { flex-direction: row; height: var(--bl-h); }
+.bl-mwall__lane { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); }
+.bl-mwall[data-vertical] .bl-mwall__lane { flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); mask-image: linear-gradient(180deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); }
+.bl-mwall__track { display: flex; width: max-content; will-change: transform; }
+.bl-mwall[data-vertical] .bl-mwall__track { flex-direction: column; width: auto; }
+.bl-mwall__set { display: flex; flex: none; gap: var(--bl-gap); padding-right: var(--bl-gap); }
+.bl-mwall[data-vertical] .bl-mwall__set { flex-direction: column; padding: 0 0 var(--bl-gap); }
+.bl-mwall__item { flex: none; transition: transform 220ms steps(3), opacity 220ms steps(3); }
+.bl-mwall__lane[data-focus] .bl-mwall__item { opacity: var(--bl-dim); }
+.bl-mwall__lane[data-focus] .bl-mwall__item:hover { opacity: 1; transform: scale(1.06); }
+.bl-mwall__pause { justify-self: end; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; }
+.bl-mwall__pause:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-mwall__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bl-mwall__item { 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 Lane({ items, index, vertical, speed, variance, alternate, slow, paused }) {
+  const laneRef = useRef(null);
+  const trackRef = useRef(null);
+  const setRef = useRef(null);
+  const pausedRef = useRef(paused);
+  pausedRef.current = paused;
+  const [copies, setCopies] = useState(2);
+  useEffect(() => {
+    const lane = laneRef.current;
+    const set = setRef.current;
+    const fit = () => {
+      const view = vertical ? lane.clientHeight : lane.clientWidth;
+      const one = (vertical ? set.offsetHeight : set.offsetWidth) || 1;
+      setCopies(Math.max(2, Math.ceil(view / one) + 1));
+    };
+    const resize = new ResizeObserver(fit);
+    resize.observe(lane);
+    resize.observe(set);
+    return () => resize.disconnect();
+  }, [vertical]);
+  useEffect(() => {
+    const lane = laneRef.current;
+    const track = trackRef.current;
+    const set = setRef.current;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const dir = alternate && index % 2 ? -1 : 1;
+    const own = speed * (1 + (index * 37 % 7 / 6 - 0.5) * variance);
+    let offset = 0;
+    let rate = 1;
+    let hovered = false;
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const goal = pausedRef.current ? 0 : hovered ? slow : 1;
+      rate += (goal - rate) * Math.min(1, dt * 6);
+      const size = (vertical ? set.offsetHeight : set.offsetWidth) || 1;
+      offset = ((offset + dir * own * rate * dt) % size + size) % size;
+      track.style.transform = vertical ? `translateY(${-offset.toFixed(2)}px)` : `translateX(${-offset.toFixed(2)}px)`;
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const onEnter = () => {
+      hovered = true;
+      lane.dataset.focus = "";
+    };
+    const onLeave = () => {
+      hovered = false;
+      delete lane.dataset.focus;
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(lane);
+    document.addEventListener("visibilitychange", start);
+    lane.addEventListener("pointerenter", onEnter);
+    lane.addEventListener("pointerleave", onLeave);
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+      lane.removeEventListener("pointerenter", onEnter);
+      lane.removeEventListener("pointerleave", onLeave);
+      track.style.transform = "";
+    };
+  }, [index, vertical, speed, variance, alternate, slow]);
+  return /* @__PURE__ */ jsx("div", { ref: laneRef, className: "bl-mwall__lane", children: /* @__PURE__ */ jsx("div", { ref: trackRef, className: "bl-mwall__track", children: Array.from({ length: copies }, (_, c) => /* @__PURE__ */ jsx("div", { ref: c === 0 ? setRef : void 0, className: "bl-mwall__set", children: items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "bl-mwall__item", children: item }, i)) }, c)) }) });
+}
+function Marquee({
+  items = [],
+  lanes = 2,
+  vertical = false,
+  speed = 40,
+  variance = 0.3,
+  alternate = true,
+  slow = 0.15,
+  dim = 0.45,
+  gap = 16,
+  fade = 56,
+  height = 420,
+  showPause = true,
+  label = "Featured",
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  chipColor = "rgba(255,255,255,0.08)",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [paused, setPaused] = useState(false);
+  const count = Math.max(1, Math.min(lanes, items.length || 1));
+  const dealt = Array.from({ length: count }, (_, l) => items.filter((_2, i) => i % count === l));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-mwall ${className}`,
+      "data-vertical": vertical || void 0,
+      style: { "--bl-gap": `${gap}px`, "--bl-fade": `${fade}px`, "--bl-h": `${height}px`, "--bl-dim": dim, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-chip": chipColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "bl-mwall__sr", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) }),
+        /* @__PURE__ */ jsx("div", { className: "bl-mwall__lanes", "aria-hidden": "true", children: dealt.map((laneItems, l) => /* @__PURE__ */ jsx(Lane, { items: laneItems, index: l, vertical, speed, variance, alternate, slow, paused }, l)) }),
+        showPause && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-mwall__pause", "aria-pressed": paused, "aria-label": paused ? `Play ${label}` : `Pause ${label}`, onClick: () => setPaused((p) => !p), children: paused ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 1.5v9l7-4.5z" }) }) : /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z" }) }) })
+      ]
+    }
+  );
+}
+export {
+  Marquee as default
+};

package/dist/MarqueeLine.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MarqueeLineProps {
+    /** What scrolls past. */
+    items?: ReactNode[];
+    /** Cruising speed in px per second. */
+    speed?: number;
+    direction?: 'left' | 'right';
+    /** Scroll surge: up to this many times cruising speed (scrolling up can reverse it). */
+    boost?: number;
+    /** Lean in degrees at full surge. */
+    skew?: number;
+    separator?: ReactNode;
+    pauseOnHover?: boolean;
+    /** Drag to scrub. */
+    draggable?: boolean;
+    /** A pause button; motion that runs for more than 5 seconds needs one. */
+    showPause?: boolean;
+    /** Name of the items list for screen readers, and of the pause button. */
+    label?: string;
+    gap?: number;
+    /** Width of the faded edges in px. */
+    fade?: number;
+    padding?: number;
+    fontSize?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    accentColor?: string;
+    chipColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MarqueeLine({ items, speed, direction, boost, skew, separator, pauseOnHover, draggable, showPause, label, gap, fade, padding, fontSize, backgroundColor, textColor, accentColor, chipColor, fontFamily, className, style }: MarqueeLineProps): import("react").JSX.Element;

package/dist/MarqueeLine.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-marquee-line";
+const CSS = `
+.bl-marquee { position: relative; display: flex; align-items: center; gap: 8px; overflow: hidden; padding: var(--bl-pad) 0; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: var(--bl-size); }
+.bl-marquee__viewport { flex: 1; min-width: 0; overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--bl-fade), #000 calc(100% - var(--bl-fade)), transparent); }
+.bl-marquee__viewport[data-dragging] { cursor: grabbing; }
+.bl-marquee__track { display: flex; width: max-content; will-change: transform; }
+.bl-marquee__set { display: flex; flex: none; align-items: center; gap: var(--bl-gap); padding-right: var(--bl-gap); white-space: nowrap; }
+.bl-marquee__item { display: inline-flex; align-items: center; gap: 0.4em; }
+.bl-marquee__sep { color: var(--bl-accent); }
+.bl-marquee__pause { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; padding: 0; border: 0; border-radius: 8px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; }
+.bl-marquee__pause:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-marquee__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+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 MarqueeLine({
+  items = [],
+  speed = 60,
+  direction = "left",
+  boost = 6,
+  skew = 8,
+  separator = "\u2726",
+  pauseOnHover = true,
+  draggable = true,
+  showPause = true,
+  label = "Announcements",
+  gap = 28,
+  fade = 48,
+  padding = 14,
+  fontSize = 22,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  accentColor = "#ffcd75",
+  chipColor = "rgba(255,255,255,0.08)",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const viewportRef = useRef(null);
+  const trackRef = useRef(null);
+  const setRef = useRef(null);
+  const [copies, setCopies] = useState(2);
+  const [paused, setPaused] = useState(false);
+  const pausedRef = useRef(paused);
+  pausedRef.current = paused;
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    const set = setRef.current;
+    const fit = () => setCopies(Math.max(2, Math.ceil(viewport.clientWidth * 2 / Math.max(1, set.offsetWidth)) + 1));
+    const resize = new ResizeObserver(fit);
+    resize.observe(viewport);
+    resize.observe(set);
+    return () => resize.disconnect();
+  }, []);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    const track = trackRef.current;
+    const set = setRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) return void 0;
+    const sign = direction === "right" ? -1 : 1;
+    let offset = 0;
+    let surge = 0;
+    let lastY = window.scrollY;
+    let hovered = false;
+    let drag = null;
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const y = window.scrollY;
+      const scrolled = (y - lastY) / Math.max(dt, 1e-3);
+      lastY = y;
+      const kick = Math.max(-boost, Math.min(boost, scrolled / 400));
+      if (Math.abs(kick) > Math.abs(surge)) surge = kick;
+      surge *= Math.exp(-dt * 2.5);
+      const holding = pausedRef.current || pauseOnHover && hovered;
+      if (!drag && !holding) offset += sign * speed * (1 + surge) * dt;
+      const width = set.offsetWidth || 1;
+      offset = (offset % width + width) % width;
+      const lean = holding ? 0 : Math.max(-1, Math.min(1, surge / boost)) * skew * sign;
+      track.style.transform = `translateX(${-offset.toFixed(2)}px) skewX(${(-lean).toFixed(2)}deg)`;
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || !visible || document.hidden) return;
+      last = performance.now();
+      lastY = window.scrollY;
+      raf = requestAnimationFrame(tick);
+    };
+    const onEnter = () => hovered = true;
+    const onLeave = () => hovered = false;
+    const onDown = (event) => {
+      if (!draggable || event.button > 0) return;
+      drag = { x: event.clientX, offset };
+      viewport.dataset.dragging = "";
+      try {
+        viewport.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    };
+    const onMove = (event) => {
+      if (drag) offset = drag.offset - (event.clientX - drag.x);
+    };
+    const onUp = () => {
+      drag = null;
+      delete viewport.dataset.dragging;
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+    });
+    observer.observe(viewport);
+    const onVisibility = () => start();
+    document.addEventListener("visibilitychange", onVisibility);
+    viewport.addEventListener("pointerenter", onEnter);
+    viewport.addEventListener("pointerleave", onLeave);
+    viewport.addEventListener("pointerdown", onDown);
+    viewport.addEventListener("pointermove", onMove);
+    viewport.addEventListener("pointerup", onUp);
+    viewport.addEventListener("pointercancel", onUp);
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      viewport.removeEventListener("pointerenter", onEnter);
+      viewport.removeEventListener("pointerleave", onLeave);
+      viewport.removeEventListener("pointerdown", onDown);
+      viewport.removeEventListener("pointermove", onMove);
+      viewport.removeEventListener("pointerup", onUp);
+      viewport.removeEventListener("pointercancel", onUp);
+      track.style.transform = "";
+    };
+  }, [speed, direction, boost, skew, pauseOnHover, draggable]);
+  const renderSet = (key, ref) => /* @__PURE__ */ jsx("div", { ref, className: "bl-marquee__set", children: items.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "bl-marquee__item", children: item }),
+    separator && /* @__PURE__ */ jsx("span", { className: "bl-marquee__sep", "aria-hidden": "true", children: separator })
+  ] }, i)) }, key);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-marquee ${className}`,
+      style: { "--bl-gap": `${gap}px`, "--bl-fade": `${fade}px`, "--bl-pad": `${padding}px`, "--bl-size": `${fontSize}px`, "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-chip": chipColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "bl-marquee__sr", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) }),
+        /* @__PURE__ */ jsx("div", { ref: viewportRef, className: "bl-marquee__viewport", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { ref: trackRef, className: "bl-marquee__track", children: Array.from({ length: copies }, (_, i) => renderSet(i, i === 0 ? setRef : void 0)) }) }),
+        showPause && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-marquee__pause", "aria-pressed": paused, "aria-label": paused ? `Play ${label}` : `Pause ${label}`, onClick: () => setPaused((p) => !p), children: paused ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 1.5v9l7-4.5z" }) }) : /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z" }) }) })
+      ]
+    }
+  );
+}
+export {
+  MarqueeLine as default
+};

package/dist/MasonryWall.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MasonryWallProps {
+    /** Items of any height; give each a key so it can glide when the list changes. */
+    children?: ReactNode;
+    minColumnWidth?: number;
+    maxColumns?: number;
+    gap?: number;
+    /** Glide time in ms. */
+    duration?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MasonryWall({ children, minColumnWidth, maxColumns, gap, duration, className, style }: MasonryWallProps): import("react").JSX.Element;

package/dist/MasonryWall.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-masonry-wall";
+const CSS = `
+.bl-masonry { position: relative; width: 100%; }
+.bl-masonry__item { position: absolute; top: 0; left: 0; width: var(--bl-col-w); transform: translate(var(--x), var(--y)); transition: transform var(--bl-dur) cubic-bezier(.2,.8,.2,1); }
+.bl-masonry__item[data-new] { animation: bl-masonry-pop 360ms steps(4) both; animation-delay: calc(var(--i) * 40ms); }
+.bl-masonry[data-ready="false"] .bl-masonry__item { transition: none; visibility: hidden; }
+@keyframes bl-masonry-pop { from { opacity: 0; scale: 0.85; } }
+@media (prefers-reduced-motion: reduce) { .bl-masonry__item { transition: none; } .bl-masonry__item[data-new] { 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);
+  }, []);
+}
+function MasonryWall({ children, minColumnWidth = 220, maxColumns = 6, gap = 16, duration = 450, className = "", style }) {
+  useStyles();
+  const items = Children.toArray(children);
+  const keys = items.map((item, i) => String(item.key ?? i));
+  const rootRef = useRef(null);
+  const nodes = useRef(/* @__PURE__ */ new Map());
+  const seen = useRef(null);
+  const [layout, setLayout] = useState({ ready: false, colWidth: 0, height: 0, pos: {} });
+  const [fresh, setFresh] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (seen.current) {
+      const added = keys.filter((k) => !seen.current.has(k));
+      if (added.length) setFresh(new Set(added));
+    }
+    seen.current = new Set(keys);
+  }, [keys.join("|")]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const place = () => {
+      const width = root.clientWidth;
+      const cols = Math.max(1, Math.min(maxColumns, Math.floor((width + gap) / (minColumnWidth + gap))));
+      const colWidth = (width - gap * (cols - 1)) / cols;
+      const heights = new Array(cols).fill(0);
+      const pos = {};
+      keys.forEach((k) => {
+        const node = nodes.current.get(k);
+        if (!node) return;
+        const c = heights.indexOf(Math.min(...heights));
+        pos[k] = { x: c * (colWidth + gap), y: heights[c] };
+        heights[c] += node.offsetHeight + gap;
+      });
+      setLayout({ ready: true, colWidth, height: Math.max(0, Math.max(...heights) - gap), pos });
+    };
+    place();
+    const resize = new ResizeObserver(place);
+    resize.observe(root);
+    nodes.current.forEach((node) => resize.observe(node));
+    return () => resize.disconnect();
+  }, [keys.join("|"), minColumnWidth, maxColumns, gap]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-masonry ${className}`,
+      "data-ready": layout.ready,
+      style: { "--bl-col-w": `${layout.colWidth}px`, "--bl-dur": `${duration}ms`, height: layout.height, ...style },
+      children: items.map((item, i) => {
+        const k = keys[i];
+        const p = layout.pos[k] ?? { x: 0, y: 0 };
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (node) => {
+              if (node) nodes.current.set(k, node);
+              else nodes.current.delete(k);
+            },
+            className: "bl-masonry__item",
+            "data-new": fresh.has(k) || void 0,
+            style: { "--x": `${p.x}px`, "--y": `${p.y}px`, "--i": i },
+            children: item
+          },
+          k
+        );
+      })
+    }
+  );
+}
+export {
+  MasonryWall as default
+};

package/dist/MegaMenu.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface MegaMenuItem {
+    label: string;
+    /** Opens the shared panel with this content. */
+    content?: ReactNode;
+    /** A plain link when there is no content. */
+    href?: string;
+}
+export interface MegaMenuProps {
+    items?: MegaMenuItem[];
+    /** Hover intent before opening, in ms. */
+    openDelay?: number;
+    /** Grace period before closing after the pointer leaves, in ms. */
+    closeDelay?: number;
+    /** Space between the bar and the panel. */
+    gap?: number;
+    maxPanelWidth?: number;
+    /** Slide and resize time between triggers, in ms. */
+    duration?: number;
+    label?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    hoverColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MegaMenu({ items, openDelay, closeDelay, gap, maxPanelWidth, duration, label, backgroundColor, textColor, mutedColor, hoverColor, lineColor, accentColor, radius, fontFamily, className, style }: MegaMenuProps): import("react").JSX.Element;