@a4ui/core 0.31.1 → 0.33.0

package/dist/motion-jYMWmZqB.js

@@ -0,0 +1,119 @@
+import { clsx as M } from "clsx";
+import { twMerge as h } from "tailwind-merge";
+import { animate as a, inView as I } from "motion";
+import { createSignal as i, createEffect as R, untrack as m, onCleanup as C } from "solid-js";
+function N(...e) {
+  return h(M(e));
+}
+const l = "a4ui-effects";
+function p() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function F() {
+  var t;
+  try {
+    if (new URLSearchParams(window.location.search).get("calm") === "1") return !1;
+  } catch {
+  }
+  const e = (t = p()) == null ? void 0 : t.getItem(l);
+  return e === null ? !0 : e === "1";
+}
+function y(e) {
+  typeof document > "u" || document.documentElement.classList.toggle("calm", !e);
+}
+const w = F();
+y(w);
+const [g, U] = i(w);
+function V() {
+  return g;
+}
+function _() {
+  return !g();
+}
+function b(e) {
+  var t;
+  (t = p()) == null || t.setItem(l, e ? "1" : "0"), y(e), U(e);
+}
+const L = "(prefers-reduced-motion: reduce)";
+function T() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(L).matches;
+}
+const E = "a4ui-motion-forced";
+function O() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+var d;
+const [u, Y] = i(((d = O()) == null ? void 0 : d.getItem(E)) === "1");
+typeof document < "u" && document.documentElement.classList.toggle("force-motion", m(u));
+function k() {
+  return u;
+}
+function A(e) {
+  var t;
+  (t = O()) == null || t.setItem(E, e ? "1" : "0"), typeof document < "u" && document.documentElement.classList.toggle("force-motion", e), Y(e);
+}
+function c() {
+  return _() || T() && !u();
+}
+function G(e, t = 600) {
+  const [o, f] = i(0);
+  let n;
+  return R(() => {
+    const r = e();
+    if (n == null || n.stop(), c()) {
+      f(r);
+      return;
+    }
+    const s = m(o);
+    s !== r && (n = a(s, r, {
+      duration: t / 1e3,
+      ease: "easeOut",
+      onUpdate: (S) => f(S)
+    }));
+  }), C(() => n == null ? void 0 : n.stop()), o;
+}
+function P(e, t = {}) {
+  c() || a(
+    e,
+    { opacity: [0, 1], y: [t.y ?? 8, 0] },
+    { duration: t.duration ?? 0.32, delay: t.delay ?? 0, ease: "easeOut" }
+  );
+}
+function Q(e, t = {}) {
+  if (c()) return () => {
+  };
+  e.style.opacity = "0";
+  let o = !1;
+  return I(
+    e,
+    () => {
+      o || (o = !0, a(
+        e,
+        { opacity: [0, 1], y: [t.y ?? 16, 0] },
+        { duration: t.duration ?? 0.5, ease: "easeOut" }
+      ));
+    },
+    { amount: t.amount ?? 0.2 }
+  );
+}
+export {
+  G as a,
+  P as b,
+  N as c,
+  A as d,
+  k as e,
+  _ as i,
+  c as m,
+  T as p,
+  Q as r,
+  b as s,
+  V as u
+};

package/dist/ui/AnimatedBeam.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface AnimatedBeamProps {
+    containerRef: HTMLElement | undefined;
+    fromRef: HTMLElement | undefined;
+    toRef: HTMLElement | undefined;
+    /** Px the curve bows away from a straight line. @default 0 (straight) */
+    curvature?: number;
+    /** Travel from `toRef` to `fromRef` instead of the default direction. */
+    reverse?: boolean;
+    /** Seconds for one travel of the gradient segment. @default 3 */
+    duration?: number;
+    class?: string;
+}
+/**
+ * Renders an animated SVG "beam" connecting two elements: a faint static
+ * base stroke under a traveling gradient segment that loops from `fromRef`
+ * to `toRef` (or the reverse, with `reverse`). Absolutely positioned over
+ * `containerRef`, whose bounds establish the coordinate space both
+ * endpoints are measured against. Static (no travel) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * let container: HTMLDivElement | undefined
+ * let fromEl: HTMLDivElement | undefined
+ * let toEl: HTMLDivElement | undefined
+ *
+ * <div ref={container} class="relative flex items-center justify-between p-8">
+ *   <div ref={fromEl} class="size-10 rounded-full bg-card" />
+ *   <div ref={toEl} class="size-10 rounded-full bg-card" />
+ *   <AnimatedBeam containerRef={container} fromRef={fromEl} toRef={toEl} curvature={40} />
+ * </div>
+ * ```
+ */
+export declare function AnimatedBeam(props: AnimatedBeamProps): JSX.Element;

package/dist/ui/BentoGrid.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+export interface BentoGridProps {
+    children: JSX.Element;
+    class?: string;
+}
+export interface BentoCardProps {
+    children: JSX.Element;
+    /** Number of grid columns to span at `sm`+ (2) and `lg`+ (3). Defaults to 1. */
+    colSpan?: 1 | 2 | 3;
+    /** Number of grid rows to span. Defaults to 1. */
+    rowSpan?: 1 | 2;
+    class?: string;
+}
+/**
+ * Responsive CSS grid for bento-style layouts — 1 column on mobile, 2 at
+ * `sm`, 3 at `lg`. Compose with {@link BentoCard} tiles, using `colSpan`/
+ * `rowSpan` on each tile to create the varied-size bento look.
+ *
+ * @example
+ * ```tsx
+ * <BentoGrid>
+ *   <BentoCard colSpan={2} rowSpan={2}>
+ *     <h3 class="text-lg font-semibold">Overview</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Uptime</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Latency</h3>
+ *   </BentoCard>
+ *   <BentoCard colSpan={3}>
+ *     <h3 class="text-lg font-semibold">Recent activity</h3>
+ *   </BentoCard>
+ * </BentoGrid>
+ * ```
+ */
+export declare function BentoGrid(props: BentoGridProps): JSX.Element;
+/** Glass tile for a {@link BentoGrid}, spanning columns/rows via `colSpan`/`rowSpan`. */
+export declare function BentoCard(props: BentoCardProps): JSX.Element;

package/dist/ui/BorderBeam.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface BorderBeamProps {
+    /** Length of the traveling gradient segment, in px. @default 60 */
+    size?: number;
+    /** Full trip duration around the border, in seconds. @default 6 */
+    duration?: number;
+    /** Animation start offset, in seconds. @default 0 */
+    delay?: number;
+    class?: string;
+}
+/**
+ * Decorative light segment that travels continuously around the border of
+ * its parent. The parent must be `position: relative` (or similar) — this
+ * renders an absolutely-positioned, `pointer-events-none` layer (`inset-0`,
+ * `rounded-[inherit]`) tracking the parent's own box. Purely cosmetic
+ * (`aria-hidden`); under reduced motion the moving beam is replaced with a
+ * static edge glow instead of animating.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-6">
+ *   <BorderBeam />
+ *   <p>Card content</p>
+ * </div>
+ * ```
+ */
+export declare function BorderBeam(props: BorderBeamProps): JSX.Element;

package/dist/ui/Callout.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+/** Semantic tone of a {@link Callout}; drives the accent border, tint, and default icon. */
+export type CalloutTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface CalloutProps {
+    /** Visual/semantic tone. Defaults to `'info'`. */
+    tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Optional bold heading shown above the body. */
+    title?: JSX.Element;
+    /** Overrides the tone's default icon. */
+    icon?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Inline highlighted block for embedding guidance/notes inside prose (docs,
+ * READMEs, long-form content) — a left accent border, a faint tone-tinted
+ * background, and an icon. Unlike {@link Alert} it isn't a dismissible
+ * notification; it's part of the content flow.
+ *
+ * @example
+ * ```tsx
+ * <Callout tone="warning" title="Before you continue">
+ *   This action can't be undone once the migration starts.
+ * </Callout>
+ * ```
+ */
+export declare function Callout(props: CalloutProps): JSX.Element;

package/dist/ui/Confetti.d.ts

@@ -0,0 +1,46 @@
+import { JSX } from 'solid-js';
+export interface ConfettiProps {
+    /** Bump this (e.g. a counter) to fire a burst. Mount does not count. */
+    trigger?: number;
+    /** Number of pieces per burst. @default 80 */
+    count?: number;
+    class?: string;
+}
+/**
+ * Fires one burst of confetti pieces from the bottom-center of `container`,
+ * flying up and outward in a fan, rotating, then falling with gravity and
+ * fading out — each piece removes itself once its animation finishes. Angle,
+ * speed, fall distance and spin are derived deterministically from each
+ * piece's index (Math.sin), so the same `count` always produces the same
+ * fan. `container` should be `position: relative` (or already positioned)
+ * with `overflow: hidden` so pieces don't affect layout. No-op under
+ * {@link motionReduced}. This is the primitive behind {@link Confetti}.
+ *
+ * @example
+ * ```ts
+ * fireConfetti(cardEl, { count: 120 })
+ * ```
+ */
+export declare function fireConfetti(container: HTMLElement, opts?: {
+    count?: number;
+}): void;
+/**
+ * Absolutely-positioned confetti layer: fires a burst of colored pieces from
+ * the bottom-center whenever `trigger` changes (the initial mount does not
+ * fire one). Purely decorative — `pointer-events-none` and `aria-hidden`.
+ * Place it inside a `position: relative` container; pair with a `count`
+ * prop, or reach for {@link fireConfetti} directly to fire into an
+ * arbitrary element outside Solid's render tree.
+ *
+ * @example
+ * ```tsx
+ * const [bursts, setBursts] = createSignal(0)
+ * return (
+ *   <div class="relative h-64">
+ *     <Confetti trigger={bursts()} count={100} />
+ *     <Button onClick={() => setBursts((n) => n + 1)}>Celebrate</Button>
+ *   </div>
+ * )
+ * ```
+ */
+export declare function Confetti(props: ConfettiProps): JSX.Element;

package/dist/ui/CursorTrail.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface CursorTrailProps {
+    /** Blob tone. @default 'primary' */
+    color?: 'primary' | 'accent';
+    /** Blob diameter in px. @default 24 */
+    size?: number;
+    class?: string;
+}
+/**
+ * Layer that spawns a soft, blurred blob at the cursor position on every
+ * throttled `pointermove` over its parent, scaling down and fading out as
+ * it removes itself — leaving a trail. Must sit inside a `position:
+ * relative` parent (the layer listens on `parentElement`, since it is
+ * itself `pointer-events-none`). Purely decorative — `pointer-events-none`
+ * and `aria-hidden`. No-op under {@link motionReduced}; listeners are
+ * cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative h-48 rounded-lg border">
+ *   <CursorTrail color="accent" size={32} />
+ * </div>
+ * ```
+ */
+export declare function CursorTrail(props: CursorTrailProps): JSX.Element;

package/dist/ui/DiffViewer.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+/** A single rendered row of a diff. */
+export interface DiffLine {
+    type: 'add' | 'remove' | 'context';
+    content: string;
+    /** Line number in the old file. Present for `'remove'` and `'context'` rows. */
+    oldNum?: number;
+    /** Line number in the new file. Present for `'add'` and `'context'` rows. */
+    newNum?: number;
+}
+export interface DiffViewerProps {
+    /** Unified diff text (as produced by `git diff`/`diff -u`). Ignored if `lines` is set. */
+    diff?: string;
+    /** Pre-parsed diff rows. Takes precedence over `diff`. */
+    lines?: DiffLine[];
+    /** Header label. If omitted, inferred from the `+++`/`---` headers of `diff`, when present. */
+    filename?: string;
+    class?: string;
+}
+/**
+ * Read-only diff block: renders added/removed/context lines with a line-number
+ * gutter and a +/-/space marker. Accepts either a raw unified-diff string
+ * (parsed internally) or pre-parsed {@link DiffLine} rows.
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   filename="src/lib/cn.ts"
+ *   diff={`@@ -1,3 +1,3 @@\n-export const cn = (a) => a\n+export const cn = (a, b) => a + b\n context line`}
+ * />
+ * ```
+ */
+export declare function DiffViewer(props: DiffViewerProps): JSX.Element;

package/dist/ui/Dock.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+export interface DockItem {
+    icon: JSX.Element;
+    label?: string;
+    onClick?: (e: MouseEvent) => void;
+    href?: string;
+}
+export interface DockProps {
+    items: DockItem[];
+    class?: string;
+}
+/**
+ * macOS-style dock: a glass pill of icon buttons that magnify based on
+ * horizontal distance to the cursor. Scale-only transform (`transform-origin:
+ * bottom`), reset to 1× on pointerleave. Respects `prefers-reduced-motion`
+ * (renders static, still fully clickable/keyboard-focusable).
+ *
+ * @example
+ * ```tsx
+ * import { Home, Search, Settings } from 'lucide-solid'
+ *
+ * <Dock
+ *   items={[
+ *     { icon: <Home size={22} />, label: 'Home', onClick: () => {} },
+ *     { icon: <Search size={22} />, label: 'Search', onClick: () => {} },
+ *     { icon: <Settings size={22} />, label: 'Settings', href: '/settings' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Dock(props: DockProps): JSX.Element;

package/dist/ui/Globe.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+export interface GlobeMarker {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface GlobeArc {
+    /** [lat, lng] */
+    from: [number, number];
+    /** [lat, lng] */
+    to: [number, number];
+}
+export interface GlobeProps {
+    markers?: GlobeMarker[];
+    arcs?: GlobeArc[];
+    /** Canvas size in CSS px (square). @default 400 */
+    size?: number;
+    /** Spin automatically. @default true (ignored under reduced motion). */
+    autoRotate?: boolean;
+    class?: string;
+}
+/**
+ * A dotted 3D globe drawn on `<canvas>` with plain Canvas 2D (no three.js,
+ * no WebGL): dots come from a deterministic Fibonacci-sphere distribution,
+ * rotate around the Y axis, and project orthographically with depth-scaled
+ * alpha/size. `markers` render as brighter glowing dots (title = label);
+ * `arcs` draw as outward-bulging curves between two front-facing markers,
+ * with a small traveling highlight. Auto-rotates unless `autoRotate={false}`;
+ * drag with the pointer to spin manually. Renders a single static frame
+ * under `motionReduced()` (no auto-rotation; drag still works).
+ *
+ * @example
+ * ```tsx
+ * <Globe
+ *   size={360}
+ *   markers={[
+ *     { lat: 40.7, lng: -74.0, label: 'New York' },
+ *     { lat: 35.7, lng: 139.7, label: 'Tokyo' },
+ *   ]}
+ *   arcs={[{ from: [40.7, -74.0], to: [35.7, 139.7] }]}
+ * />
+ * ```
+ */
+export declare function Globe(props: GlobeProps): JSX.Element;

package/dist/ui/Meteors.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface MeteorsProps {
+    /** Number of meteor streaks to render. @default 20 */
+    count?: number;
+    class?: string;
+}
+/**
+ * Decorative full-cover meteor shower: thin diagonal streaks that fall
+ * down-left and fade, looping with staggered delays and varied start
+ * positions/durations. Purely visual — absolute, `pointer-events-none`,
+ * `aria-hidden` — so it layers behind/inside a `relative overflow-hidden`
+ * container without affecting layout or a11y. Under {@link motionReduced} it
+ * swaps the falling streaks for a handful of static, faint dots.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-8">
+ *   <Meteors count={20} />
+ *   <p class="relative">Content sits above the meteors.</p>
+ * </div>
+ * ```
+ */
+export declare function Meteors(props: MeteorsProps): JSX.Element;

package/dist/ui/ModelPicker.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+/** A single selectable model in a {@link ModelPicker} menu. */
+export interface ModelOption {
+    id: string;
+    name: string;
+    icon?: JSX.Element;
+    description?: string;
+    badge?: JSX.Element;
+}
+export interface ModelPickerProps {
+    models: ModelOption[];
+    /** Controlled selected model id. Omit and use `defaultValue` for uncontrolled use. */
+    value?: string;
+    /** Initial selected model id when uncontrolled. Ignored if `value` is passed. */
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    class?: string;
+}
+/**
+ * Dropdown trigger showing the selected model's icon + name + a chevron; the
+ * menu lists every model with icon, name, description, and optional badge,
+ * checkmarking the current selection. Controlled via `value`/`onChange` or
+ * uncontrolled via `defaultValue`, and fully keyboard-navigable (arrow keys,
+ * typeahead, Escape) via Kobalte's `DropdownMenu`.
+ *
+ * @example
+ * ```tsx
+ * <ModelPicker
+ *   models={[
+ *     { id: 'sonnet', name: 'Claude Sonnet', description: 'Balanced speed and quality' },
+ *     { id: 'opus', name: 'Claude Opus', description: 'Most capable', badge: <Badge tone="info">New</Badge> },
+ *   ]}
+ *   defaultValue="sonnet"
+ *   onChange={(id) => console.log('selected', id)}
+ * />
+ * ```
+ */
+export declare function ModelPicker(props: ModelPickerProps): JSX.Element;

package/dist/ui/ReasoningTrace.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface ReasoningTraceProps {
+    /** Reasoning body content; takes precedence over `text` when both are given. */
+    children?: JSX.Element;
+    /** Plain-text reasoning body, rendered with preserved whitespace. */
+    text?: string;
+    /** Header label. Defaults to `'Reasoning'`. */
+    label?: JSX.Element;
+    /** Whether the panel starts expanded. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Show a pulsing dot in the header to indicate reasoning is still streaming. */
+    streaming?: boolean;
+    class?: string;
+}
+/**
+ * Collapsible panel for surfacing a model's intermediate "thinking"/reasoning
+ * trace. The header is a toggle button (brain icon + label + rotating
+ * chevron, plus a pulsing dot while `streaming`); the body is a muted,
+ * smaller-text block showing `text` or `children` with whitespace preserved.
+ * Collapsed by default unless `defaultOpen`. Height/opacity transition,
+ * instant under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <ReasoningTrace streaming text={reasoningSoFar()} />
+ * ```
+ */
+export declare function ReasoningTrace(props: ReasoningTraceProps): JSX.Element;

package/dist/ui/Snippet.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+export interface SnippetProps {
+    /** Source text to display and copy. */
+    code: string;
+    /** Optional language tag shown as a small badge, e.g. `'tsx'`. Informational only, no highlighting. */
+    language?: string;
+    class?: string;
+}
+/**
+ * Single inline code block (mono, bordered, scrollable) with a copy button
+ * that morphs into a checkmark for 1.5s after copying. For one code sample —
+ * use {@link CodeTabs} instead when you need several tabs/languages.
+ *
+ * @example
+ * ```tsx
+ * <Snippet language="bash" code="pnpm add @a4ui/core" />
+ * ```
+ */
+export declare function Snippet(props: SnippetProps): JSX.Element;

package/dist/ui/SuggestionChips.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface SuggestionChipsProps {
+    suggestions: string[];
+    onSelect?: (s: string) => void;
+    onDismiss?: (s: string) => void;
+    class?: string;
+}
+/**
+ * Wrapping row of pill chips, e.g. AI-suggested follow-up prompts. Clicking a
+ * chip calls `onSelect`; if `onDismiss` is passed, each chip also shows a
+ * small "x" that removes it without triggering `onSelect`. The select and
+ * dismiss controls are real sibling `<button>`s (not nested — a `<button>`
+ * can't validly contain another interactive element), so both are reachable
+ * and operable independently via Tab/Enter/Space with no extra ARIA wiring.
+ *
+ * @example
+ * ```tsx
+ * <SuggestionChips
+ *   suggestions={['Summarize this', 'Explain like I\'m 5', 'Write tests']}
+ *   onSelect={(s) => sendMessage(s)}
+ *   onDismiss={(s) => setSuggestions((prev) => prev.filter((x) => x !== s))}
+ * />
+ * ```
+ */
+export declare function SuggestionChips(props: SuggestionChipsProps): JSX.Element;

package/dist/ui/ToolCallTimeline.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+/** Status of a single tool call rendered by {@link ToolCallTimeline}. */
+export type ToolCallStatus = 'pending' | 'success' | 'error';
+/** A single tool invocation rendered by {@link ToolCallTimeline}. */
+export interface ToolCall {
+    /** Tool/function name, rendered in mono. */
+    name: string;
+    status: ToolCallStatus;
+    /** Arguments passed to the call. Shown in a collapsible details area when present. */
+    args?: JSX.Element | string;
+    /** Result returned by the call. Shown in a collapsible details area when present. */
+    result?: JSX.Element | string;
+}
+export interface ToolCallTimelineProps {
+    calls: ToolCall[];
+    class?: string;
+}
+/**
+ * Vertical timeline of AI tool calls: a connector line runs down the left with
+ * a status node per call (spinner while `pending`, check when `success`, x when
+ * `error`), the tool name in mono, and — when `args`/`result` are given — a
+ * collapsible details panel underneath.
+ *
+ * @example
+ * ```tsx
+ * <ToolCallTimeline
+ *   calls={[
+ *     { name: 'search_docs', status: 'success', args: 'query: "refunds"', result: '3 matches' },
+ *     { name: 'update_ticket', status: 'pending' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ToolCallTimeline(props: ToolCallTimelineProps): JSX.Element;

package/dist/ui/UsageMeter.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface UsageMeterProps {
+    used: number;
+    limit: number;
+    /** Header content shown before the "{used}/{limit}{unit}" count. */
+    label?: JSX.Element;
+    /** Appended to displayed numbers, e.g. `' tokens'` or `'%'`. */
+    unit?: string;
+    /** Fraction of `limit` (0–1) at which the fill switches to the warning tone. @default 0.85 */
+    warnAt?: number;
+    class?: string;
+}
+/**
+ * Labeled consumption bar: a header row with `label` and the raw
+ * "{used}/{limit}{unit}" count, a track whose fill width is `used / limit`
+ * (clamped to 0–100%) and switches to a warning tone once that ratio reaches
+ * `warnAt`, and a small "{remaining} left" line underneath. Built on Kobalte's
+ * `Meter` primitive, so it carries the same `role="meter"` a11y semantics as
+ * {@link Meter}.
+ *
+ * @example
+ * ```tsx
+ * <UsageMeter used={92} limit={100} label="API requests" unit=" req" warnAt={0.9} />
+ * ```
+ */
+export declare function UsageMeter(props: UsageMeterProps): JSX.Element;

package/dist/ui/WorldMap.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'solid-js';
+export interface WorldMapPoint {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface WorldMapConnection {
+    from: WorldMapPoint;
+    to: WorldMapPoint;
+}
+export interface WorldMapProps {
+    /** Arcs to draw between projected points. @default [] */
+    connections?: WorldMapConnection[];
+    class?: string;
+}
+/**
+ * A decorative, dependency-free SVG "world map": an evenly spaced dotted-grid
+ * backdrop (a stylized map, not accurate coastlines) with connection arcs
+ * projected from lat/lng via equirectangular mapping. Each arc bulges upward
+ * and carries a traveling primary→accent gradient segment (reusing
+ * {@link AnimatedBeam}'s technique); arcs render static under reduced motion.
+ * Responsive — scales to its container via the 2:1 `viewBox`.
+ *
+ * @example
+ * ```tsx
+ * <WorldMap
+ *   class="w-full"
+ *   connections={[
+ *     { from: { lat: 40.7128, lng: -74.006, label: 'New York' }, to: { lat: 51.5074, lng: -0.1278, label: 'London' } },
+ *     { from: { lat: 51.5074, lng: -0.1278 }, to: { lat: 35.6762, lng: 139.6503, label: 'Tokyo' } },
+ *     { from: { lat: 40.7128, lng: -74.006 }, to: { lat: -23.5505, lng: -46.6333, label: 'São Paulo' } },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function WorldMap(props: WorldMapProps): JSX.Element;