bits-lab 0.0.0-stage → 0.1.2

package/dist/TerminalDemo.js

@@ -0,0 +1,214 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-terminal-demo";
+const CSS = `
+.bl-term { position: relative; width: 100%; max-width: var(--bl-w); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); box-shadow: inset 0 0 0 1px var(--bl-line), 0 30px 60px -30px rgba(0,0,0,0.6); font: 400 var(--bl-size)/1.6 var(--bl-font); }
+.bl-term__bar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--bl-line); background: var(--bl-bar); }
+.bl-term__lights { display: flex; gap: 7px; }
+.bl-term__lights i { width: 11px; height: 11px; border-radius: 50%; }
+.bl-term__title { position: absolute; left: 50%; transform: translateX(-50%); color: var(--bl-muted); font-size: 12px; white-space: nowrap; }
+.bl-term__replay { margin-left: auto; padding: 3px 8px; border: 1px solid var(--bl-line); border-radius: 6px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 11px; cursor: pointer; }
+.bl-term__replay:hover { color: var(--bl-ink); }
+.bl-term__replay:focus-visible { outline: 2px solid var(--bl-prompt); outline-offset: 2px; }
+.bl-term__body { height: var(--bl-h); overflow-y: auto; padding: 14px 16px; scrollbar-width: thin; }
+.bl-term__line { min-height: 1.6em; white-space: pre-wrap; word-break: break-word; }
+.bl-term__prompt { color: var(--bl-prompt); margin-right: 0.6em; user-select: none; }
+.bl-term__line[data-kind="output"] { color: var(--bl-muted); }
+.bl-term__line[data-kind="success"] { color: var(--bl-success); }
+.bl-term__line[data-kind="error"] { color: var(--bl-error); }
+.bl-term__line[data-kind="info"] { color: var(--bl-info); }
+.bl-term__line[data-kind="spinner"] { color: var(--bl-ink); }
+.bl-term__mark { display: inline-block; width: 1.4em; }
+.bl-term__cursor { display: inline-block; width: 0.6em; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: var(--bl-ink); animation: bl-term-blink 1s steps(1) infinite; }
+@keyframes bl-term-blink { 50% { opacity: 0; } }
+.bl-term__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bl-term__cursor { 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 SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+const MARKS = { success: "\u2714", error: "\u2716", info: "\u2139" };
+const DEFAULT_SCRIPT = [
+  { type: "command", text: "npx bits-lab add dot-globe" },
+  { type: "output", text: "Resolving registry\u2026" },
+  { type: "spinner", text: "Fetching component", duration: 1200, done: "Fetched dot-globe.jsx (12 kB)" },
+  { type: "spinner", text: "Writing files", duration: 800, done: "Wrote src/components/DotGlobe.jsx" },
+  { type: "info", text: "No dependencies to install." },
+  { type: "pause", duration: 400 },
+  { type: "command", text: "npm run dev" },
+  { type: "output", text: "  VITE ready in 312 ms\n  \u279C  Local:   http://localhost:5173/" },
+  { type: "success", text: "Done. Happy shipping!" }
+];
+const finalLine = (step, prompt) => {
+  if (step.type === "command") return { kind: "command", text: step.text, prompt: step.prompt ?? prompt };
+  if (step.type === "spinner") return { kind: step.failed ? "error" : "success", text: step.done ?? step.text };
+  return { kind: step.type, text: step.text };
+};
+function TerminalDemo({
+  script = DEFAULT_SCRIPT,
+  title = "zsh \u2014 bits-lab",
+  prompt = "$",
+  typingSpeed = 45,
+  lineDelay = 260,
+  loop = false,
+  loopDelay = 2600,
+  startOnView = true,
+  showControls = true,
+  width = 640,
+  height = 300,
+  radius = 12,
+  fontSize = 13.5,
+  fontFamily = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  background = "#11131c",
+  barColor = "#181b27",
+  lineColor = "rgba(255,255,255,0.08)",
+  textColor = "#e8eaf0",
+  mutedColor = "#94b0c2",
+  promptColor = "#73eff7",
+  successColor = "#a7f070",
+  errorColor = "#ef7d57",
+  infoColor = "#ffcd75",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const bodyRef = useRef(null);
+  const [lines, setLines] = useState([]);
+  const [running, setRunning] = useState(false);
+  const [finished, setFinished] = useState(false);
+  const [run, setRun] = useState(0);
+  const [inView, setInView] = useState(!startOnView);
+  const scriptKey = JSON.stringify(script);
+  useEffect(() => {
+    if (!startOnView || inView) return;
+    const io = new IntersectionObserver(([entry]) => entry.isIntersecting && setInView(true), { threshold: 0.35 });
+    io.observe(rootRef.current);
+    return () => io.disconnect();
+  }, [startOnView, inView]);
+  useEffect(() => {
+    if (!inView) return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) {
+      setLines(script.filter((step) => step.type !== "pause").map((step) => finalLine(step, prompt)));
+      setFinished(true);
+      return;
+    }
+    let cancelled = false;
+    const timers = /* @__PURE__ */ new Set();
+    const wait = (ms) => new Promise((resolve) => {
+      const id = setTimeout(() => {
+        timers.delete(id);
+        resolve();
+      }, ms);
+      timers.add(id);
+    });
+    const push = (line) => setLines((prev) => [...prev, line]);
+    const patchLast = (patch) => setLines((prev) => [...prev.slice(0, -1), { ...prev[prev.length - 1], ...patch }]);
+    (async () => {
+      do {
+        setLines([]);
+        setFinished(false);
+        setRunning(true);
+        for (const step of script) {
+          if (cancelled) return;
+          if (step.type === "pause") {
+            await wait(step.duration ?? 600);
+          } else if (step.type === "command") {
+            push({ kind: "command", text: "", prompt: step.prompt ?? prompt, typing: true });
+            await wait(step.delay ?? 380);
+            for (let i = 1; i <= step.text.length && !cancelled; i++) {
+              patchLast({ text: step.text.slice(0, i) });
+              await wait(typingSpeed * (0.55 + Math.random() * 0.9));
+            }
+            await wait(320);
+            patchLast({ typing: false });
+          } else if (step.type === "spinner") {
+            push({ kind: "spinner", text: step.text, frame: 0 });
+            const end = performance.now() + (step.duration ?? 1e3);
+            for (let frame = 1; performance.now() < end && !cancelled; frame++) {
+              await wait(80);
+              patchLast({ frame });
+            }
+            patchLast(finalLine(step, prompt));
+          } else {
+            push(finalLine(step, prompt));
+          }
+          await wait(step.after ?? lineDelay);
+        }
+        if (cancelled) return;
+        setRunning(false);
+        setFinished(true);
+        if (loop) await wait(loopDelay);
+      } while (loop && !cancelled);
+    })();
+    return () => {
+      cancelled = true;
+      timers.forEach(clearTimeout);
+    };
+  }, [inView, run, scriptKey, prompt, typingSpeed, lineDelay, loop, loopDelay]);
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (body) body.scrollTop = body.scrollHeight;
+  }, [lines]);
+  const transcript = script.filter((step) => step.type !== "pause").map((step) => finalLine(step, prompt)).map((line) => line.kind === "command" ? `${line.prompt} ${line.text}` : line.text).join("\n");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-term ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-h": `${height}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-font": fontFamily,
+        "--bl-bg": background,
+        "--bl-bar": barColor,
+        "--bl-line": lineColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-prompt": promptColor,
+        "--bl-success": successColor,
+        "--bl-error": errorColor,
+        "--bl-info": infoColor,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-term__bar", children: [
+          /* @__PURE__ */ jsxs("span", { className: "bl-term__lights", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("i", { style: { background: "#ff5f57" } }),
+            /* @__PURE__ */ jsx("i", { style: { background: "#febc2e" } }),
+            /* @__PURE__ */ jsx("i", { style: { background: "#28c840" } })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-term__title", children: title }),
+          showControls && !loop && finished && /* @__PURE__ */ jsx("button", { className: "bl-term__replay", type: "button", onClick: () => setRun((r) => r + 1), children: "Replay" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: "bl-term__body", "aria-hidden": "true", children: [
+          lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "bl-term__line", "data-kind": line.kind, children: [
+            line.kind === "command" && /* @__PURE__ */ jsx("span", { className: "bl-term__prompt", children: line.prompt }),
+            line.kind === "spinner" && /* @__PURE__ */ jsx("span", { className: "bl-term__mark", children: SPINNER[line.frame % SPINNER.length] }),
+            MARKS[line.kind] && /* @__PURE__ */ jsx("span", { className: "bl-term__mark", children: MARKS[line.kind] }),
+            line.text,
+            line.typing && /* @__PURE__ */ jsx("span", { className: "bl-term__cursor" })
+          ] }, i)),
+          (finished || !running) && /* @__PURE__ */ jsxs("div", { className: "bl-term__line", children: [
+            /* @__PURE__ */ jsx("span", { className: "bl-term__prompt", children: prompt }),
+            /* @__PURE__ */ jsx("span", { className: "bl-term__cursor" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "bl-term__sr", "aria-label": `${title} terminal transcript`, children: transcript })
+      ]
+    }
+  );
+}
+export {
+  TerminalDemo as default
+};

package/dist/TestimonialWall.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface Testimonial {
+    quote: ReactNode;
+    name: ReactNode;
+    role?: ReactNode;
+    /** An image URL or any node. */
+    avatar?: ReactNode;
+}
+export interface TestimonialWallProps {
+    testimonials?: Testimonial[];
+    rows?: number;
+    /** Pixels per second. */
+    speed?: number;
+    cardWidth?: number;
+    /** Lines shown until a card is hovered or focused. */
+    lines?: number;
+    gap?: number;
+    /** Width of the edge fade in px. */
+    fade?: number;
+    showPause?: boolean;
+    pauseLabel?: string;
+    playLabel?: string;
+    label?: string;
+    backgroundColor?: string;
+    cardColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TestimonialWall({ testimonials, rows, speed, cardWidth, lines, gap, fade, showPause, pauseLabel, playLabel, label, backgroundColor, cardColor, textColor, mutedColor, lineColor, accentColor, radius, fontFamily, className, style }: TestimonialWallProps): import("react").JSX.Element;

package/dist/TestimonialWall.js

@@ -0,0 +1,131 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-testimonial-wall";
+const CSS = `
+.bl-wall { position: relative; display: grid; gap: var(--bl-gap); width: 100%; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-wall__row { position: relative; overflow: hidden; padding: 14px 0; -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-wall__track { display: flex; width: max-content; animation: bl-wall-scroll var(--bl-dur, 60s) linear infinite; animation-direction: var(--bl-dir, normal); }
+.bl-wall__set { display: flex; flex: 0 0 auto; align-items: flex-start; gap: var(--bl-gap); margin: 0; padding: 0 var(--bl-gap) 0 0; list-style: none; }
+.bl-wall__row:hover .bl-wall__track, .bl-wall__row:focus-within .bl-wall__track, .bl-wall[data-paused] .bl-wall__track { animation-play-state: paused; }
+.bl-wall__card { position: relative; display: grid; gap: 12px; width: var(--bl-card-w); margin: 0; padding: 18px; box-sizing: border-box; border-radius: var(--bl-radius); background: var(--bl-card); box-shadow: 0 0 0 1px var(--bl-line); outline: none; transition: transform 220ms cubic-bezier(.2,.9,.25,1.2), box-shadow 220ms; }
+.bl-wall__card:hover, .bl-wall__card:focus-visible { z-index: 1; transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px var(--bl-accent), 0 18px 40px -18px rgba(0,0,0,0.7); }
+.bl-wall__quote { margin: 0; color: var(--bl-ink); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--bl-lines); overflow: hidden; }
+.bl-wall__card:hover .bl-wall__quote, .bl-wall__card:focus-visible .bl-wall__quote { -webkit-line-clamp: unset; }
+.bl-wall__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.bl-wall__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--bl-line); }
+.bl-wall__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.bl-wall__name { display: block; font-size: 14px; font-weight: 700; font-style: normal; }
+.bl-wall__role { display: block; color: var(--bl-muted); font-size: 13px; }
+.bl-wall__pause { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--bl-card); color: var(--bl-muted); font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 0 0 1px var(--bl-line); }
+.bl-wall__pause:hover { color: var(--bl-ink); }
+.bl-wall__pause:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+@keyframes bl-wall-scroll { to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-wall__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
+  .bl-wall__track { animation: none; }
+  .bl-wall__set[aria-hidden] { display: none; }
+  .bl-wall__pause { 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);
+  }, []);
+}
+function Card({ item, hidden }) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("figure", { className: "bl-wall__card", tabIndex: hidden ? -1 : 0, children: [
+    /* @__PURE__ */ jsx("blockquote", { className: "bl-wall__quote", children: item.quote }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "bl-wall__who", children: [
+      item.avatar && /* @__PURE__ */ jsx("span", { className: "bl-wall__avatar", children: typeof item.avatar === "string" ? /* @__PURE__ */ jsx("img", { src: item.avatar, alt: "" }) : item.avatar }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("cite", { className: "bl-wall__name", children: item.name }),
+        item.role && /* @__PURE__ */ jsx("span", { className: "bl-wall__role", children: item.role })
+      ] })
+    ] })
+  ] }) });
+}
+function Row({ items, reverse, speed }) {
+  const setRef = useRef(null);
+  const [duration, setDuration] = useState(60);
+  useEffect(() => {
+    const node = setRef.current;
+    const measure = () => setDuration(Math.max(8, node.offsetWidth / speed));
+    const resize = new ResizeObserver(measure);
+    resize.observe(node);
+    measure();
+    return () => resize.disconnect();
+  }, [speed]);
+  return /* @__PURE__ */ jsx("div", { className: "bl-wall__row", children: /* @__PURE__ */ jsxs("div", { className: "bl-wall__track", style: { "--bl-dur": `${duration}s`, "--bl-dir": reverse ? "reverse" : "normal" }, children: [
+    /* @__PURE__ */ jsx("ul", { ref: setRef, className: "bl-wall__set", children: items.map((item, i) => /* @__PURE__ */ jsx(Card, { item }, i)) }),
+    /* @__PURE__ */ jsx("ul", { className: "bl-wall__set", "aria-hidden": "true", children: items.map((item, i) => /* @__PURE__ */ jsx(Card, { item, hidden: true }, i)) })
+  ] }) });
+}
+function TestimonialWall({
+  testimonials = [],
+  rows = 3,
+  speed = 30,
+  cardWidth = 300,
+  lines = 4,
+  gap = 16,
+  fade = 80,
+  showPause = true,
+  pauseLabel = "Pause",
+  playLabel = "Play",
+  label = "What people say",
+  backgroundColor = "#1a1c2c",
+  cardColor = "#262b44",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  radius = 14,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [paused, setPaused] = useState(false);
+  const rowCount = Math.max(1, Math.min(rows, testimonials.length || 1));
+  const perRow = Math.max(3, Math.ceil(testimonials.length / rowCount));
+  const dealt = Array.from(
+    { length: rowCount },
+    (_, r) => testimonials.length ? Array.from({ length: perRow }, (_2, i) => testimonials[(r * perRow + i) % testimonials.length]) : []
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `bl-wall ${className}`,
+      "aria-label": label,
+      "data-paused": paused || void 0,
+      style: {
+        "--bl-gap": `${gap}px`,
+        "--bl-fade": `${fade}px`,
+        "--bl-card-w": `min(${cardWidth}px, 80vw)`,
+        "--bl-lines": lines,
+        "--bl-bg": backgroundColor,
+        "--bl-card": cardColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        dealt.map((items, r) => /* @__PURE__ */ jsx(Row, { items, reverse: r % 2 === 1, speed: speed * (1 + r % 3 * 0.18) }, r)),
+        showPause && /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-wall__pause", onClick: () => setPaused((p) => !p), children: [
+          /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: paused ? /* @__PURE__ */ jsx("path", { d: "M3 1.5v9l7.5-4.5z" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z" }) }),
+          paused ? playLabel : pauseLabel
+        ] })
+      ]
+    }
+  );
+}
+export {
+  TestimonialWall as default
+};

package/dist/TextOnPath.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+export type PathPreset = 'wave' | 'arc' | 'smile' | 'circle' | 'loop';
+export declare const PATHS: Record<PathPreset, {
+    viewBox: string;
+    d: string;
+}>;
+export interface TextOnPathProps {
+    /** End it with a separator so the loop reads cleanly. */
+    text?: string;
+    /** A preset name or any SVG path data (pair custom paths with viewBox). */
+    path?: PathPreset | (string & {});
+    viewBox?: string;
+    /** Minimum copies of the text; more are added if the path needs them. */
+    repeat?: number;
+    /** Scroll speed in viewBox units per second; 0 for still text. */
+    speed?: number;
+    direction?: 'forward' | 'reverse';
+    /** Starting position along the path, in percent. */
+    offset?: number;
+    fontSize?: number;
+    fontWeight?: number;
+    letterSpacing?: number;
+    /** Draw the guide path. */
+    showPath?: boolean;
+    pauseOnHover?: boolean;
+    /** Max width, in px. */
+    width?: number;
+    textColor?: string;
+    guideColor?: string;
+    fontFamily?: string;
+    /** Accessible name; defaults to the text. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TextOnPath({ text, path, viewBox, repeat, speed, direction, offset, fontSize, fontWeight, letterSpacing, showPath, pauseOnHover, width, textColor, guideColor, fontFamily, label, className, style }: TextOnPathProps): import("react").JSX.Element;

package/dist/TextOnPath.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-text-on-path";
+const CSS = `
+.bl-tpath { display: block; width: 100%; max-width: var(--bl-w); overflow: visible; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-tpath text { fill: currentColor; font-size: var(--bl-size); font-weight: var(--bl-weight); letter-spacing: var(--bl-spacing); }
+.bl-tpath__guide { fill: none; stroke: var(--bl-guide); stroke-width: 1; stroke-dasharray: 3 5; }
+`;
+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 PATHS = {
+  wave: { viewBox: "0 0 1000 240", d: "M0,140 C125,40 250,40 375,140 S625,240 750,140 S875,40 1000,120" },
+  arc: { viewBox: "0 0 1000 320", d: "M40,300 Q500,-120 960,300" },
+  smile: { viewBox: "0 0 1000 300", d: "M40,40 Q500,460 960,40" },
+  circle: { viewBox: "0 0 1000 1000", d: "M500,500 m-380,0 a380,380 0 1,1 760,0 a380,380 0 1,1 -760,0" },
+  loop: { viewBox: "0 0 1000 400", d: "M40,300 C200,300 260,60 420,60 C600,60 560,340 420,340 C280,340 360,120 600,120 C780,120 820,300 960,300" }
+};
+function TextOnPath({
+  text = "Text along a path \xB7 ",
+  path = "wave",
+  viewBox,
+  repeat = 3,
+  speed = 40,
+  direction = "forward",
+  offset = 0,
+  fontSize = 42,
+  fontWeight = 700,
+  letterSpacing = 1,
+  showPath = false,
+  pauseOnHover = true,
+  width = 900,
+  textColor = "#f4f4f4",
+  guideColor = "rgba(255,255,255,0.18)",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label,
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const preset = typeof path === "string" && PATHS[path] ? PATHS[path] : null;
+  const d = preset ? preset.d : path;
+  const box = viewBox ?? preset?.viewBox ?? "0 0 1000 300";
+  const svgRef = useRef(null);
+  const textPathRef = useRef(null);
+  const hovering = useRef(false);
+  const [grown, setGrown] = useState(1);
+  const copies = Math.max(repeat, grown);
+  useEffect(() => {
+    const svg = svgRef.current;
+    const textPath = textPathRef.current;
+    if (!svg || !textPath) return void 0;
+    textPath.setAttribute("startOffset", `${offset}%`);
+    if (!speed || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const pathEl = svg.querySelector("path[id]");
+    const length = pathEl.getTotalLength();
+    const copy = textPath.getComputedTextLength() / copies || length;
+    const needed = Math.ceil(length / copy) + 1;
+    if (needed > copies) {
+      setGrown(needed);
+      return void 0;
+    }
+    let shift = 0;
+    let last = performance.now();
+    let frame = 0;
+    let visible = true;
+    const sign = direction === "reverse" ? 1 : -1;
+    const tick = (now) => {
+      const dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      if (!(pauseOnHover && hovering.current)) shift = (shift + speed * dt) % copy;
+      textPath.setAttribute("startOffset", `${offset / 100 * length + sign * shift + (sign < 0 ? 0 : -copy)}`);
+      if (visible) frame = requestAnimationFrame(tick);
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !frame) {
+        last = performance.now();
+        frame = requestAnimationFrame(tick);
+      } else if (!visible) {
+        cancelAnimationFrame(frame);
+        frame = 0;
+      }
+    });
+    observer.observe(svg);
+    frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [d, speed, direction, copies, offset, text, fontSize, letterSpacing, pauseOnHover]);
+  const content = speed ? text.repeat(copies) : text;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      className: `bl-tpath ${className}`,
+      viewBox: box,
+      role: "img",
+      "aria-label": label ?? text.trim(),
+      onPointerEnter: () => hovering.current = true,
+      onPointerLeave: () => hovering.current = false,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-weight": fontWeight,
+        "--bl-spacing": `${letterSpacing}px`,
+        "--bl-ink": textColor,
+        "--bl-guide": guideColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("path", { id: `${uid}-path`, d, fill: "none", className: showPath ? "bl-tpath__guide" : void 0 }),
+        /* @__PURE__ */ jsx("text", { "aria-hidden": "true", dominantBaseline: "middle", children: /* @__PURE__ */ jsx("textPath", { ref: textPathRef, href: `#${uid}-path`, children: content }) })
+      ]
+    }
+  );
+}
+export {
+  PATHS,
+  TextOnPath as default
+};

package/dist/ThinkingShimmer.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ThinkingStep {
+    id?: string | number;
+    label: ReactNode;
+    status?: 'pending' | 'active' | 'done';
+    detail?: ReactNode;
+}
+export interface ThinkingShimmerProps {
+    /** While true the label shimmers and the timer ticks. */
+    thinking?: boolean;
+    steps?: ThinkingStep[];
+    label?: string;
+    /** Header text once done, given the elapsed seconds. */
+    doneLabel?: (seconds: number) => string;
+    /** Epoch ms when the work began, if it started before this mounted. */
+    startedAt?: number;
+    showTimer?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** One shimmer pass, in ms. */
+    shimmerSpeed?: number;
+    /** Max width, in px. */
+    width?: number;
+    textColor?: string;
+    mutedColor?: string;
+    shineColor?: string;
+    lineColor?: string;
+    hoverColor?: string;
+    accentColor?: string;
+    successColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ThinkingShimmer({ thinking, steps, label, doneLabel, startedAt, showTimer, defaultOpen, open: controlledOpen, onOpenChange, shimmerSpeed, width, textColor, mutedColor, shineColor, lineColor, hoverColor, accentColor, successColor, fontFamily, className, style }: ThinkingShimmerProps): import("react").JSX.Element;