bits-lab 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Steven Phung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,52 @@
-# Temporary Holding Version
+# Bits Lab
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+159 original React components with an 8-bit soul: text effects, animated backgrounds, game UI, inputs, data displays, overlays, navigation and playful toys. Every component brings its own styles, so there is nothing else to import or configure.
+
+Browse them all, tweak their props and copy the code at **https://bits-lab.vercel.app**.
+
+## Install
+
+```bash
+npm install bits-lab
+```
+
+Needs React 19. Nothing else has dependencies, except `GravityBox`, which uses `matter-js` for its physics. Install it and import GravityBox from its own entry point:
+
+```bash
+npm install matter-js
+```
+
+```jsx
+import GravityBox from "bits-lab/GravityBox";
+```
+
+## Use
+
+```jsx
+import { FocusPull, HoldToConfirm, PixelSpinners } from "bits-lab";
+
+export default function Page() {
+  return (
+    <>
+      <FocusPull as="h1" text="Every pixel snaps into focus" />
+      <HoldToConfirm onConfirm={() => console.log("Deleted")}>Hold to delete</HoldToConfirm>
+      <PixelSpinners type="hourglass" label="Loading" showLabel />
+    </>
+  );
+}
+```
+
+Each component also has its own entry point, which is handy for components with several exports:
+
+```jsx
+import Toaster, { toast } from "bits-lab/ToastStack";
+import { Switch, Checkbox } from "bits-lab/ToggleKit";
+```
+
+- **TypeScript:** types are included.
+- **Next.js:** every file starts with `"use client"`, so components work in the App Router without a wrapper.
+- **Accessibility:** components follow WAI-ARIA patterns, work with the keyboard and respect reduced motion.
+
+## License
+
+MIT © Steven Phung

package/dist/Accordion.d.ts

@@ -0,0 +1,52 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface AccordionItem {
+    /** Stable id used in value / defaultValue; defaults to the item's index. */
+    id?: string;
+    title: ReactNode;
+    /** A string, or nodes whose direct children stagger in. */
+    content?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items?: AccordionItem[];
+    /** One section open at a time, or many. */
+    type?: 'single' | 'multiple';
+    defaultValue?: string | string[];
+    /** Controlled open section(s): an id in single mode, ids in multiple mode. */
+    value?: string | string[] | null;
+    /** Receives an id (or null) in single mode, an array of ids in multiple mode. */
+    onValueChange?: (value: string | string[] | null) => void;
+    /** Single mode: whether the open section can be closed. */
+    collapsible?: boolean;
+    /** Opening spring stiffness. */
+    stiffness?: number;
+    /** Opening spring damping. */
+    damping?: number;
+    /** Delay between content children appearing, in ms. */
+    stagger?: number;
+    /** Max width in px. */
+    width?: number;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    hoverColor?: string;
+    accentColor?: string;
+    /** Heading level wrapping each trigger (2–6). */
+    headingLevel?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export declare function springEasing({ stiffness, damping, mass }?: SpringOptions): {
+    easing: string;
+    duration: number;
+};
+export default function Accordion({ items, type, defaultValue, value: controlled, onValueChange, collapsible, stiffness, damping, stagger, width, radius, backgroundColor, textColor, mutedColor, lineColor, hoverColor, accentColor, headingLevel, fontFamily, className, style }: AccordionProps): import("react").JSX.Element;

package/dist/Accordion.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-accordion";
+const STYLES = `
+.bl-acc { width: 100%; max-width: var(--bl-w); border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line); color: var(--bl-ink); font-family: var(--bl-font); overflow: hidden; }
+.bl-acc__item + .bl-acc__item { border-top: 1px solid var(--bl-line); }
+.bl-acc__heading { margin: 0; font: inherit; }
+.bl-acc__trigger { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
+.bl-acc__trigger:hover { background: var(--bl-hover); }
+.bl-acc__trigger:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
+.bl-acc__trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+.bl-acc__title { flex: 1; min-width: 0; }
+.bl-acc__chev { flex: 0 0 auto; color: var(--bl-muted); transition: transform var(--bl-dur) var(--bl-ease); }
+.bl-acc__trigger[aria-expanded="true"] .bl-acc__chev { transform: rotate(180deg); color: var(--bl-accent); }
+.bl-acc__panel { overflow: hidden; }
+.bl-acc__panel:not([data-open]):not([data-animating]) { height: 0; visibility: hidden; }
+.bl-acc__body { padding: 0 18px 18px; color: var(--bl-muted); font-size: 14px; line-height: 1.6; }
+.bl-acc__body > * { margin: 0 0 10px; }
+.bl-acc__body > :last-child { margin-bottom: 0; }
+.bl-acc__panel[data-open] .bl-acc__body > * { animation: bl-acc-in 380ms cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i, 0) * var(--bl-stagger)); }
+@keyframes bl-acc-in { from { opacity: 0; transform: translateY(8px); } }
+@media (prefers-reduced-motion: reduce) { .bl-acc__chev { transition: none; } .bl-acc__panel[data-open] .bl-acc__body > * { 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 = STYLES;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function springEasing({ stiffness = 260, damping = 22, mass = 1 } = {}) {
+  const supported = typeof CSS !== "undefined" && CSS.supports?.("animation-timing-function", "linear(0, 1)");
+  let x = 0;
+  let v = 0;
+  const dt = 1 / 120;
+  const points = [0];
+  let t = 0;
+  while (t < 3) {
+    const force = -stiffness * (x - 1) - damping * v;
+    v += force / mass * dt;
+    x += v * dt;
+    t += dt;
+    points.push(x);
+    if (Math.abs(x - 1) < 1e-3 && Math.abs(v) < 0.01) break;
+  }
+  const duration = Math.round(t * 1e3);
+  if (!supported) return { easing: "cubic-bezier(.2,.9,.25,1)", duration: Math.min(duration, 500) };
+  const step = Math.max(1, Math.floor(points.length / 40));
+  const sampled = points.filter((_, i) => i % step === 0);
+  sampled.push(1);
+  return { easing: `linear(${sampled.map((p) => p.toFixed(3)).join(", ")})`, duration };
+}
+function Accordion({
+  items = [],
+  type = "single",
+  defaultValue,
+  value: controlled,
+  onValueChange,
+  collapsible = true,
+  stiffness = 260,
+  damping = 22,
+  stagger = 45,
+  width = 640,
+  radius = 14,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.1)",
+  hoverColor = "rgba(255,255,255,0.04)",
+  accentColor = "#73eff7",
+  headingLevel = 3,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const multiple = type === "multiple";
+  const [inner, setInner] = useState(() => {
+    const start = defaultValue ?? [];
+    return Array.isArray(start) ? start : [start];
+  });
+  const open = controlled !== void 0 ? Array.isArray(controlled) ? controlled : controlled ? [controlled] : [] : inner;
+  const panels = useRef({});
+  const triggers = useRef([]);
+  const previous = useRef(open);
+  const spring = springEasing({ stiffness, damping });
+  const toggle = (id) => {
+    const isOpen = open.includes(id);
+    if (isOpen && !multiple && !collapsible) return;
+    const next = isOpen ? open.filter((v) => v !== id) : multiple ? [...open, id] : [id];
+    if (controlled === void 0) setInner(next);
+    onValueChange?.(multiple ? next : next[0] ?? null);
+  };
+  useLayoutEffect(() => {
+    const before = previous.current;
+    previous.current = open;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    for (const [id, panel] of Object.entries(panels.current)) {
+      if (!panel) continue;
+      const was = before.includes(id);
+      const is = open.includes(id);
+      if (was === is) continue;
+      if (is) [...panel.firstElementChild.children].forEach((child, i) => child.style.setProperty("--i", String(i)));
+      if (reduced) continue;
+      const target = is ? panel.scrollHeight : 0;
+      const from = is ? 0 : panel.scrollHeight;
+      panel.setAttribute("data-animating", "");
+      const animation = panel.animate([{ height: `${from}px` }, { height: `${target}px` }], is ? spring : { duration: 240, easing: "cubic-bezier(.4,0,.2,1)" });
+      animation.onfinish = animation.oncancel = () => panel.removeAttribute("data-animating");
+    }
+  }, [open.join("|")]);
+  const onKeyDown = (event, index) => {
+    const enabled = items.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+    const position = enabled.indexOf(index);
+    const keys = { ArrowDown: position + 1, ArrowUp: position - 1, Home: 0, End: enabled.length - 1 };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    triggers.current[enabled[(keys[event.key] + enabled.length) % enabled.length]]?.focus();
+  };
+  const Heading = `h${Math.min(6, Math.max(2, headingLevel))}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `bl-acc ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-hover": hoverColor,
+        "--bl-accent": accentColor,
+        "--bl-dur": `${Math.min(spring.duration, 450)}ms`,
+        "--bl-ease": "cubic-bezier(.2,.9,.25,1.2)",
+        "--bl-stagger": `${stagger}ms`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: items.map((item, index) => {
+        const id = item.id ?? String(index);
+        const isOpen = open.includes(id);
+        return /* @__PURE__ */ jsxs("div", { className: "bl-acc__item", children: [
+          /* @__PURE__ */ jsx(Heading, { className: "bl-acc__heading", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                triggers.current[index] = node;
+              },
+              type: "button",
+              id: `${uid}-trigger-${index}`,
+              className: "bl-acc__trigger",
+              "aria-expanded": isOpen,
+              "aria-controls": `${uid}-panel-${index}`,
+              "aria-disabled": !multiple && !collapsible && isOpen ? true : void 0,
+              disabled: item.disabled,
+              onClick: () => toggle(id),
+              onKeyDown: (event) => onKeyDown(event, index),
+              children: [
+                item.icon,
+                /* @__PURE__ */ jsx("span", { className: "bl-acc__title", children: item.title }),
+                /* @__PURE__ */ jsx("svg", { className: "bl-acc__chev", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 5.5 7 9.5l4-4" }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: (node) => {
+                panels.current[id] = node;
+              },
+              id: `${uid}-panel-${index}`,
+              className: "bl-acc__panel",
+              role: "region",
+              "aria-labelledby": `${uid}-trigger-${index}`,
+              "data-open": isOpen || void 0,
+              inert: isOpen ? void 0 : true,
+              children: /* @__PURE__ */ jsx("div", { className: "bl-acc__body", children: typeof item.content === "string" ? /* @__PURE__ */ jsx("p", { children: item.content }) : item.content })
+            }
+          )
+        ] }, id);
+      })
+    }
+  );
+}
+export {
+  Accordion as default,
+  springEasing
+};

package/dist/AchievementToast.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type AchievementTier = 'bronze' | 'silver' | 'gold' | 'diamond';
+export interface AchievementData {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Icon or sprite in the badge; defaults to a star. */
+    icon?: ReactNode;
+    /** XP shown on the badge. */
+    xp?: number;
+    /** A preset tier, or any CSS color for the accent. */
+    tier?: AchievementTier | (string & {});
+    /** Time on screen for this toast, in ms. */
+    duration?: number;
+}
+export interface Achievement extends AchievementData {
+    id: number;
+}
+export declare function achievement(data: AchievementData): number;
+export interface AchievementToasterProps {
+    /** Corner the stack grows from. */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Most toasts on screen at once; the rest queue. */
+    max?: number;
+    /** Default time on screen, in ms (hover pauses it). */
+    duration?: number;
+    /** Small heading on every toast. */
+    label?: string;
+    /** Position inside the nearest positioned parent instead of the window. */
+    contained?: boolean;
+    fontFamily?: string;
+    /** Called when a toast appears, e.g. to play a sound. */
+    onShow?: (toast: Achievement) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function AchievementToaster({ position, max, duration, label, contained, fontFamily, onShow, className, style }: AchievementToasterProps): import("react").JSX.Element;

package/dist/AchievementToast.js

@@ -0,0 +1,162 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-achievement";
+const CSS = `
+.bl-ach-region { position: var(--bl-position); z-index: 1000; display: flex; flex-direction: column; gap: 14px; pointer-events: none; width: min(380px, calc(100% - 32px)); }
+.bl-ach-region[data-corner*="bottom"] { bottom: 20px; flex-direction: column-reverse; }
+.bl-ach-region[data-corner*="top"] { top: 20px; }
+.bl-ach-region[data-corner*="right"] { right: 20px; }
+.bl-ach-region[data-corner*="left"] { left: 20px; }
+.bl-ach {
+  --bl-tier: #ffcd75;
+  position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
+  padding: 12px 12px 16px; margin: 4px; background: #1a1c2c; color: #f4f4f4; pointer-events: auto;
+  font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace);
+  box-shadow: 0 -4px 0 0 #0b0b14, 0 4px 0 0 #0b0b14, -4px 0 0 0 #0b0b14, 4px 0 0 0 #0b0b14, 8px 8px 0 0 rgba(11, 11, 20, 0.5);
+  animation: bl-ach-in 360ms steps(6) both;
+}
+.bl-ach-region[data-corner*="left"] .bl-ach { animation-name: bl-ach-in-left; }
+.bl-ach[data-leaving] { animation: bl-ach-out 240ms steps(4) both; }
+.bl-ach__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: #0b0b14; box-shadow: inset 0 0 0 3px var(--bl-tier); }
+.bl-ach__icon > :not(.bl-ach__spark) { animation: bl-ach-pop 500ms steps(5) 200ms both; }
+.bl-ach__spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; background: var(--bl-tier); opacity: 0; animation: bl-ach-spark 600ms steps(6) 260ms; }
+.bl-ach__label { margin: 0 0 6px; font-size: 8px; color: var(--bl-tier); letter-spacing: 0.08em; text-transform: uppercase; }
+.bl-ach__title { margin: 0; font-size: 11px; line-height: 1.4; text-transform: uppercase; }
+.bl-ach__desc { margin: 6px 0 0; font: 14px/1.35 var(--bl-body, ui-monospace, monospace); color: #94b0c2; }
+.bl-ach__xp { align-self: start; padding: 4px 6px; background: #38b764; color: #0b0b14; font-size: 8px; white-space: nowrap; }
+.bl-ach__close { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; background: none; color: #94b0c2; font: 12px/1 monospace; cursor: pointer; }
+.bl-ach__close:hover, .bl-ach__close:focus-visible { color: #f4f4f4; outline: 2px solid #41a6f6; }
+.bl-ach__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bl-tier); transform-origin: left; animation: bl-ach-timer var(--bl-duration) linear both; }
+.bl-ach:hover .bl-ach__timer, .bl-ach:focus-within .bl-ach__timer { animation-play-state: paused; }
+@keyframes bl-ach-in { from { transform: translateX(110%); } }
+@keyframes bl-ach-in-left { from { transform: translateX(-110%); } }
+@keyframes bl-ach-out { to { transform: translateY(20%); opacity: 0; } }
+@keyframes bl-ach-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
+@keyframes bl-ach-spark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
+@keyframes bl-ach-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-ach, .bl-ach[data-leaving] { animation: bl-ach-fade 200ms both; }
+  .bl-ach[data-leaving] { animation-direction: reverse; }
+  .bl-ach__icon > *, .bl-ach__spark { animation: none !important; }
+  @keyframes bl-ach-fade { from { opacity: 0; } }
+}
+`;
+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 TIERS = { bronze: "#ef7d57", silver: "#94b0c2", gold: "#ffcd75", diamond: "#73eff7" };
+const listeners = /* @__PURE__ */ new Set();
+let nextId = 1;
+function achievement(data) {
+  const toast = { id: nextId++, tier: "gold", ...data };
+  listeners.forEach((listener) => listener(toast));
+  return toast.id;
+}
+const SPARKS = [
+  [-30, -26],
+  [30, -26],
+  [-34, 10],
+  [34, 10],
+  [0, -38],
+  [0, 34]
+];
+function Toast({ toast, duration, label, onDone }) {
+  const [leaving, setLeaving] = useState(false);
+  const leave = useCallback(() => setLeaving(true), []);
+  useEffect(() => {
+    if (!leaving) return void 0;
+    const timer = setTimeout(() => onDone(toast.id), 240);
+    return () => clearTimeout(timer);
+  }, [leaving, onDone, toast.id]);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "bl-ach",
+      "data-leaving": leaving || void 0,
+      style: { "--bl-tier": TIERS[toast.tier] ?? toast.tier, "--bl-duration": `${toast.duration ?? duration}ms` },
+      onKeyDown: (event) => event.key === "Escape" && leave(),
+      "aria-label": `${label}: ${toast.title}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-ach__icon", "aria-hidden": "true", children: [
+          toast.icon ?? /* @__PURE__ */ jsx("span", { style: { fontSize: 22, color: "var(--bl-tier)" }, children: "\u2605" }),
+          SPARKS.map(([dx, dy], index) => /* @__PURE__ */ jsx("i", { className: "bl-ach__spark", style: { "--dx": `${dx}px`, "--dy": `${dy}px` } }, index))
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "bl-ach__label", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "bl-ach__title", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "bl-ach__desc", children: toast.description })
+        ] }),
+        toast.xp != null && /* @__PURE__ */ jsxs("span", { className: "bl-ach__xp", children: [
+          "+",
+          toast.xp,
+          " XP"
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "bl-ach__close", onClick: leave, "aria-label": "Dismiss", children: "\xD7" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-ach__timer", onAnimationEnd: leave })
+      ]
+    }
+  );
+}
+function AchievementToaster({
+  position = "bottom-right",
+  max = 3,
+  duration = 4500,
+  label = "Achievement unlocked",
+  contained = false,
+  fontFamily,
+  onShow,
+  className = "",
+  style
+}) {
+  useStyles();
+  const [visible, setVisible] = useState([]);
+  const queue = useRef([]);
+  const onShowRef = useRef(onShow);
+  onShowRef.current = onShow;
+  const pump = useCallback(() => {
+    setVisible((current) => {
+      if (current.length >= max || !queue.current.length) return current;
+      const next = queue.current.shift();
+      onShowRef.current?.(next);
+      return [...current, next];
+    });
+  }, [max]);
+  useEffect(() => {
+    const listener = (toast) => {
+      queue.current.push(toast);
+      pump();
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, [pump]);
+  const remove = useCallback(
+    (id) => {
+      setVisible((current) => current.filter((toast) => toast.id !== id));
+      setTimeout(pump, 0);
+    },
+    [pump]
+  );
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: `bl-ach-region ${className}`,
+      "data-corner": position,
+      "aria-live": "polite",
+      "aria-label": "Achievements",
+      style: { "--bl-position": contained ? "absolute" : "fixed", ...fontFamily ? { "--bl-font": fontFamily } : null, ...style },
+      children: visible.map((toast) => /* @__PURE__ */ jsx(Toast, { toast, duration, label, onDone: remove }, toast.id))
+    }
+  );
+}
+export {
+  achievement,
+  AchievementToaster as default
+};

package/dist/AgentCard.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type AgentStatus = 'queued' | 'running' | 'success' | 'error';
+export interface AgentCardProps {
+    /** The tool's name. */
+    tool?: string;
+    /** Arguments, summarised on one line. */
+    args?: Record<string, unknown> | string;
+    status?: AgentStatus;
+    /** When the call started (ms since epoch); drives the live timer. */
+    startedAt?: number;
+    /** Final duration in ms; overrides the timer. */
+    duration?: number;
+    logs?: string[];
+    result?: ReactNode;
+    error?: ReactNode;
+    /** Icon shown while queued. */
+    icon?: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Max width in px. */
+    width?: number;
+    /** Max height of the log panel in px. */
+    logHeight?: number;
+    backgroundColor?: string;
+    chipColor?: string;
+    codeColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    okColor?: string;
+    errorColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    monoFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function AgentCard({ tool, args, status, startedAt, duration, logs, result, error, icon, defaultOpen, open: controlledOpen, onOpenChange, width, logHeight, backgroundColor, chipColor, codeColor, textColor, mutedColor, dimColor, lineColor, accentColor, okColor, errorColor, radius, fontFamily, monoFamily, className, style }: AgentCardProps): import("react").JSX.Element;