@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-3EKVSKGJ.js

@@ -0,0 +1,256 @@
+"use client";
+import {
+  BADGE_APPEARANCE_RECIPES,
+  BADGE_APPEARANCE_RECIPES_CALM,
+  badgeVariants
+} from "./chunk-ECCNRCC4.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/status-badge/status-badge.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Circle,
+  Clock,
+  Loader2,
+  MinusCircle,
+  XCircle
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUSES = [
+  "pending",
+  "running",
+  "complete",
+  "awaiting-approval",
+  "denied",
+  "failed",
+  "skipped"
+];
+var STATUS_TONES = ["neutral", "info", "success", "warning", "destructive"];
+function isCustomStatus(status) {
+  return typeof status === "object" && status !== null;
+}
+var STATUS_TONE_MAP = {
+  pending: "neutral",
+  running: "info",
+  complete: "success",
+  "awaiting-approval": "warning",
+  denied: "neutral",
+  failed: "destructive",
+  skipped: "neutral"
+};
+var STATUS_ROLE = {
+  pending: "secondary",
+  running: "info",
+  complete: "success",
+  "awaiting-approval": "warning",
+  denied: "muted",
+  failed: "destructive",
+  skipped: "secondary"
+};
+var STATUS_LABELS = {
+  pending: "Pending",
+  running: "Running",
+  complete: "Complete",
+  "awaiting-approval": "Awaiting approval",
+  denied: "Denied",
+  failed: "Failed",
+  skipped: "Skipped"
+};
+var STATUS_ICONS = {
+  pending: Circle,
+  running: Loader2,
+  complete: CheckCircle2,
+  "awaiting-approval": Clock,
+  denied: XCircle,
+  failed: AlertCircle,
+  skipped: MinusCircle
+};
+var STATUS_TONE_ICONS = {
+  success: CheckCircle2,
+  warning: Clock,
+  destructive: AlertCircle
+};
+var STATUS_ICON_CLASSES = {
+  pending: "text-muted-foreground",
+  running: "text-info-text",
+  complete: "text-success-text",
+  "awaiting-approval": "text-warning-text",
+  denied: "text-muted-foreground",
+  failed: "text-destructive-text",
+  skipped: "text-muted-foreground"
+};
+var RUNNING_SPIN_CLASSES = "animate-spin motion-reduce:animate-none";
+var StatusIcon = forwardRef(function StatusIcon2({ status, className, ...props }, ref) {
+  const Icon = STATUS_ICONS[status];
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-status": status,
+      className: cn(
+        "size-4 shrink-0",
+        STATUS_ICON_CLASSES[status],
+        status === "running" && RUNNING_SPIN_CLASSES,
+        className
+      ),
+      ...props
+    }
+  );
+});
+var statusBadgeVariants = cva(
+  // Builds on the Badge pill (geometry + typography from badge.tsx). The
+  // `outline` variant carries no fill, so each status sets its own
+  // border/bg/text — conflicts resolve via cn() (later utilities win).
+  cn(badgeVariants({ variant: "outline" }), "[&_svg]:shrink-0"),
+  {
+    variants: {
+      status: {
+        // calm: neutral fill — structural, not a colour role: `appearance`
+        // has no effect (see badge.tsx's `secondary`/`outline` variants).
+        pending: "border-transparent bg-secondary text-secondary-foreground",
+        // calm: status alpha-wash (escapes the decoration drawn-not-filled rule)
+        running: cn(
+          "border-info/40 bg-info/10 text-info-text",
+          "[--badge-fill:var(--info)] [--badge-ink:var(--info-text)] [--badge-on:var(--info-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        complete: cn(
+          "border-success/40 bg-success/10 text-success-text",
+          "[--badge-fill:var(--success)] [--badge-ink:var(--success-text)] [--badge-on:var(--success-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        // ATTENTION: solid fill — must grab the eye
+        "awaiting-approval": cn(
+          "border-transparent bg-warning text-warning-foreground",
+          "[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)] [--badge-on:var(--warning-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        // calm: de-emphasized neutrals — structural, `appearance` has no effect.
+        denied: "border-transparent bg-muted text-muted-foreground",
+        // ATTENTION: solid fill — must grab the eye
+        failed: cn(
+          "border-transparent bg-destructive text-destructive-foreground",
+          "[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)] [--badge-on:var(--destructive-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        // calm: neutral fill — structural, `appearance` has no effect.
+        skipped: "border-transparent bg-secondary text-muted-foreground"
+      },
+      /**
+       * The out-of-vocabulary escape hatch (#363) — CALM treatments only (the
+       * same alpha-wash/neutral technique as the calm `status` recipes above).
+       * There is deliberately no solid/attention recipe here: the loud fill
+       * stays exclusive to the canonical `awaiting-approval`/`failed` states
+       * (integrity constraint 2, see the file docblock). For the same reason,
+       * a non-neutral tone only ever wires `BADGE_APPEARANCE_RECIPES_CALM`
+       * (tint/outline/neutral — never solid), so even a theme's global
+       * `--badge-appearance: solid` cannot loudify the hatch; `StatusBadge`
+       * also clamps an explicit `appearance="solid"` prop away below.
+       */
+      tone: {
+        // Already a neutral pill — `appearance` has no effect (mirrors
+        // Badge's `secondary`).
+        neutral: "border-transparent bg-secondary text-secondary-foreground",
+        info: cn(
+          "border-info/40 bg-info/10 text-info-text",
+          "[--badge-fill:var(--info)] [--badge-ink:var(--info-text)]",
+          BADGE_APPEARANCE_RECIPES_CALM
+        ),
+        success: cn(
+          "border-success/40 bg-success/10 text-success-text",
+          "[--badge-fill:var(--success)] [--badge-ink:var(--success-text)]",
+          BADGE_APPEARANCE_RECIPES_CALM
+        ),
+        warning: cn(
+          "border-warning/40 bg-warning/10 text-warning-text",
+          "[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)]",
+          BADGE_APPEARANCE_RECIPES_CALM
+        ),
+        destructive: cn(
+          "border-destructive/40 bg-destructive/10 text-destructive-text",
+          "[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)]",
+          BADGE_APPEARANCE_RECIPES_CALM
+        )
+      },
+      /** `md` for inline use; `sm` for rail nodes / dense rows. */
+      size: {
+        sm: "px-2 [&_svg]:size-3",
+        md: "[&_svg]:size-3.5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var StatusBadge = forwardRef(function StatusBadge2({ status, size, appearance, hideIcon = false, className, children, ...props }, ref) {
+  if (isCustomStatus(status)) {
+    const { label, tone, icon: Icon2 } = status;
+    const toneAppearance = appearance === "solid" ? void 0 : appearance;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "status-badge",
+        "data-status": "custom",
+        "data-tone": tone,
+        "data-appearance": toneAppearance,
+        className: cn(statusBadgeVariants({ tone, size }), className),
+        ...props,
+        children: [
+          hideIcon || !Icon2 ? null : /* @__PURE__ */ jsx(Icon2, { "aria-hidden": "true" }),
+          children ?? label
+        ]
+      }
+    );
+  }
+  const Icon = STATUS_ICONS[status];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "status-badge",
+      "data-status": status,
+      "data-tone": STATUS_TONE_MAP[status],
+      "data-appearance": appearance,
+      className: cn(statusBadgeVariants({ status, size }), className),
+      ...props,
+      children: [
+        hideIcon ? null : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": "true",
+            className: status === "running" ? RUNNING_SPIN_CLASSES : void 0
+          }
+        ),
+        children ?? STATUS_LABELS[status]
+      ]
+    }
+  );
+});
+var TIMELINE_STATUS_MAP = {
+  done: "complete",
+  active: "running",
+  pending: "pending"
+};
+function fromTimelineStatus(status) {
+  return TIMELINE_STATUS_MAP[status];
+}
+
+export {
+  STATUSES,
+  STATUS_TONES,
+  isCustomStatus,
+  STATUS_ROLE,
+  STATUS_LABELS,
+  STATUS_TONE_ICONS,
+  StatusIcon,
+  statusBadgeVariants,
+  StatusBadge,
+  fromTimelineStatus
+};
+//# sourceMappingURL=chunk-3EKVSKGJ.js.map

package/dist/chunk-3EKVSKGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/status-badge/status-badge.tsx"],"sourcesContent":["/**\n * StatusBadge — the canonical execution-status vocabulary (#189, research 10 §B.1).\n *\n * One CLOSED 7-state enum unifies the five status idioms across the agent\n * trace components (`@elabs-ai/components-ai` Tool / ChainOfThought / Confirmation /\n * TestResults / Sandbox), so one agent run reads as one author and an agent\n * picks a status by MEANING — it cannot emit a color or a freeform string.\n *\n * Hybrid visual (research 08 \"green deliberate / status sparingly\"): the calm\n * states — including `complete` — render the quiet `bg-<status>/10` alpha-wash\n * or a neutral fill; ONLY the two attention states (`awaiting-approval`,\n * `failed`) get the solid status fill, so a settled transcript stays calm and\n * the states that need a human grab the eye.\n *\n * Builds ON the existing Badge cva (badge.tsx) — same pill geometry and\n * typography; status colors are semantic tokens only.\n *\n * BOUNDED ESCAPE HATCH (#363): a domain that genuinely has a state the 7\n * canonical values don't express (e.g. a run engine's `stopped_guardrail`) can\n * pass a `CustomStatus` object instead of a `Status` string. Three integrity\n * constraints keep it from eroding the anti-hallucination property above:\n *\n *   1. `tone` is reachable ONLY through the object form (which requires a\n *      `label`) — it is NOT an independent prop, so a canonical status can\n *      never be recolored (`status=\"failed\" tone=\"success\"` is unrepresentable).\n *   2. The hatch is CALM-ONLY: all five tones render the quiet alpha-wash/\n *      neutral treatments. The solid attention fill stays exclusive to the\n *      canonical `awaiting-approval` and `failed` — no consumer can mint a\n *      loud chip, or the loud/calm signal degrades to noise.\n *   3. No raw color, ever: `tone` maps to existing semantic tokens only\n *      (secondary / info / success / warning / destructive).\n *\n * Map a custom status ONCE, near your domain — not per call site. `StatusIcon`\n * stays canonical-only (the enum's own icon+color atom); there is no `emphasis`/\n * `loud` option on the hatch; `fromTimelineStatus()` is unchanged.\n */\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  AlertCircle,\n  CheckCircle2,\n  Circle,\n  Clock,\n  Loader2,\n  MinusCircle,\n  XCircle,\n  type LucideIcon,\n  type LucideProps,\n} from \"lucide-react\";\nimport {\n  BADGE_APPEARANCE_RECIPES,\n  BADGE_APPEARANCE_RECIPES_CALM,\n  badgeVariants,\n  type BadgeAppearance,\n} from \"../badge/badge\";\nimport { cn } from \"../../lib/cn\";\n\n/** The canonical, closed 7-state status enum (research 10 §B.1). */\nexport const STATUSES = [\n  \"pending\",\n  \"running\",\n  \"complete\",\n  \"awaiting-approval\",\n  \"denied\",\n  \"failed\",\n  \"skipped\",\n] as const;\n\nexport type Status = (typeof STATUSES)[number];\n\n/** Closed tone set for the out-of-vocabulary escape hatch (CALM treatments only). */\nexport const STATUS_TONES = [\"neutral\", \"info\", \"success\", \"warning\", \"destructive\"] as const;\n\nexport type StatusTone = (typeof STATUS_TONES)[number];\n\n/**\n * An out-of-vocabulary status. Prefer the canonical `Status` enum; reach for\n * this only when the domain genuinely has a state the 7 do not express (e.g. a\n * run engine's `stopped_guardrail`). Map it ONCE, near your domain — not per\n * call site.\n */\nexport interface CustomStatus {\n  label: string;\n  tone: StatusTone;\n  /** Optional Lucide glyph. Omitted → label-only (no default glyph). */\n  icon?: LucideIcon;\n}\n\n/** Narrows `Status | CustomStatus` — the object form is always the escape hatch. */\nexport function isCustomStatus(status: Status | CustomStatus): status is CustomStatus {\n  return typeof status === \"object\" && status !== null;\n}\n\n/**\n * The tone each CANONICAL status maps to, for the informational `data-tone`\n * attribute only — canonical rendering always goes through the untouched\n * `status` cva branch below, never through `tone`.\n */\nconst STATUS_TONE_MAP: Record<Status, StatusTone> = {\n  pending: \"neutral\",\n  running: \"info\",\n  complete: \"success\",\n  \"awaiting-approval\": \"warning\",\n  denied: \"neutral\",\n  failed: \"destructive\",\n  skipped: \"neutral\",\n};\n\n/**\n * The canonical semantic ROLE per status — the single source of truth for\n * status colour (#392). Any other status-keyed colour map in the repo\n * (`Timeline`'s `NODE_STYLE`, or a future one) must be TESTED against this,\n * not hand-authored — a second literal copy is exactly how `NODE_STYLE`\n * drifted (`running` rendered `--primary` while this map said `--info`).\n * Do NOT interpolate `bg-${STATUS_ROLE[status]}` into a class map: Tailwind\n * scans source statically, so a template-literal class emits no CSS. Keep\n * consuming maps as literal class strings, verified against this export by a\n * test.\n */\nexport const STATUS_ROLE = {\n  pending: \"secondary\",\n  running: \"info\",\n  complete: \"success\",\n  \"awaiting-approval\": \"warning\",\n  denied: \"muted\",\n  failed: \"destructive\",\n  skipped: \"secondary\",\n} as const satisfies Record<Status, string>;\n\n/** Default human-readable label per status (override via `children`). */\nexport const STATUS_LABELS: Record<Status, string> = {\n  pending: \"Pending\",\n  running: \"Running\",\n  complete: \"Complete\",\n  \"awaiting-approval\": \"Awaiting approval\",\n  denied: \"Denied\",\n  failed: \"Failed\",\n  skipped: \"Skipped\",\n};\n\nconst STATUS_ICONS: Record<Status, LucideIcon> = {\n  pending: Circle,\n  running: Loader2,\n  complete: CheckCircle2,\n  \"awaiting-approval\": Clock,\n  denied: XCircle,\n  failed: AlertCircle,\n  skipped: MinusCircle,\n};\n\n/**\n * Lucide glyph per out-of-vocabulary TONE — the same five-tone escape hatch\n * `CustomStatus` uses (`STATUS_TONES`). A consumer that encodes a bare TONE\n * with no fuller `Status` semantics (e.g. `@elabs-ai/components-flow`'s `FlowNode.tone`,\n * #387) derives its non-colour cue from here instead of inventing a second\n * icon vocabulary — each entry reuses the SAME icon `STATUS_ICONS` already\n * pairs with that tone's one canonical status (`success`→`complete`'s\n * `CheckCircle2`, `warning`→`awaiting-approval`'s `Clock`,\n * `destructive`→`failed`'s `AlertCircle`). `neutral`/`info` have no entry:\n * nothing consumes them yet, and reaching for a glyph on every neutral/\n * default-toned element would be assistive-tech noise on the common case —\n * extend this map, don't fork a new one, the day something needs them.\n */\nexport const STATUS_TONE_ICONS: Partial<Record<StatusTone, LucideIcon>> = {\n  success: CheckCircle2,\n  warning: Clock,\n  destructive: AlertCircle,\n};\n\n/**\n * On-surface icon color per status for the standalone `StatusIcon` atom.\n * (Inside `StatusBadge` the icon inherits the badge foreground instead, so it\n * stays legible on the solid attention fills.)\n */\nconst STATUS_ICON_CLASSES: Record<Status, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-info-text\",\n  complete: \"text-success-text\",\n  \"awaiting-approval\": \"text-warning-text\",\n  denied: \"text-muted-foreground\",\n  failed: \"text-destructive-text\",\n  skipped: \"text-muted-foreground\",\n};\n\n/** `animate-spin` is a continuous loop (ease-linear is the allowed loop ease). */\nconst RUNNING_SPIN_CLASSES = \"animate-spin motion-reduce:animate-none\";\n\nexport interface StatusIconProps extends Omit<LucideProps, \"ref\"> {\n  /** The canonical execution status (closed enum). */\n  status: Status;\n}\n\n/**\n * The icon + status-color atom `StatusBadge` itself composes — for tight rows\n * (test-result rows, timeline/rail nodes) where a full badge is too heavy.\n * Decorative by default (`aria-hidden`); the adjacent row text must carry the\n * status name for AT users.\n */\nexport const StatusIcon = forwardRef<SVGSVGElement, StatusIconProps>(function StatusIcon(\n  { status, className, ...props },\n  ref,\n) {\n  const Icon = STATUS_ICONS[status];\n  return (\n    <Icon\n      ref={ref}\n      aria-hidden=\"true\"\n      data-status={status}\n      className={cn(\n        \"size-4 shrink-0\",\n        STATUS_ICON_CLASSES[status],\n        status === \"running\" && RUNNING_SPIN_CLASSES,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const statusBadgeVariants = cva(\n  // Builds on the Badge pill (geometry + typography from badge.tsx). The\n  // `outline` variant carries no fill, so each status sets its own\n  // border/bg/text — conflicts resolve via cn() (later utilities win).\n  cn(badgeVariants({ variant: \"outline\" }), \"[&_svg]:shrink-0\"),\n  {\n    variants: {\n      status: {\n        // calm: neutral fill — structural, not a colour role: `appearance`\n        // has no effect (see badge.tsx's `secondary`/`outline` variants).\n        pending: \"border-transparent bg-secondary text-secondary-foreground\",\n        // calm: status alpha-wash (escapes the decoration drawn-not-filled rule)\n        running: cn(\n          \"border-info/40 bg-info/10 text-info-text\",\n          \"[--badge-fill:var(--info)] [--badge-ink:var(--info-text)] [--badge-on:var(--info-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        complete: cn(\n          \"border-success/40 bg-success/10 text-success-text\",\n          \"[--badge-fill:var(--success)] [--badge-ink:var(--success-text)] [--badge-on:var(--success-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        // ATTENTION: solid fill — must grab the eye\n        \"awaiting-approval\": cn(\n          \"border-transparent bg-warning text-warning-foreground\",\n          \"[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)] [--badge-on:var(--warning-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        // calm: de-emphasized neutrals — structural, `appearance` has no effect.\n        denied: \"border-transparent bg-muted text-muted-foreground\",\n        // ATTENTION: solid fill — must grab the eye\n        failed: cn(\n          \"border-transparent bg-destructive text-destructive-foreground\",\n          \"[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)] [--badge-on:var(--destructive-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        // calm: neutral fill — structural, `appearance` has no effect.\n        skipped: \"border-transparent bg-secondary text-muted-foreground\",\n      },\n      /**\n       * The out-of-vocabulary escape hatch (#363) — CALM treatments only (the\n       * same alpha-wash/neutral technique as the calm `status` recipes above).\n       * There is deliberately no solid/attention recipe here: the loud fill\n       * stays exclusive to the canonical `awaiting-approval`/`failed` states\n       * (integrity constraint 2, see the file docblock). For the same reason,\n       * a non-neutral tone only ever wires `BADGE_APPEARANCE_RECIPES_CALM`\n       * (tint/outline/neutral — never solid), so even a theme's global\n       * `--badge-appearance: solid` cannot loudify the hatch; `StatusBadge`\n       * also clamps an explicit `appearance=\"solid\"` prop away below.\n       */\n      tone: {\n        // Already a neutral pill — `appearance` has no effect (mirrors\n        // Badge's `secondary`).\n        neutral: \"border-transparent bg-secondary text-secondary-foreground\",\n        info: cn(\n          \"border-info/40 bg-info/10 text-info-text\",\n          \"[--badge-fill:var(--info)] [--badge-ink:var(--info-text)]\",\n          BADGE_APPEARANCE_RECIPES_CALM,\n        ),\n        success: cn(\n          \"border-success/40 bg-success/10 text-success-text\",\n          \"[--badge-fill:var(--success)] [--badge-ink:var(--success-text)]\",\n          BADGE_APPEARANCE_RECIPES_CALM,\n        ),\n        warning: cn(\n          \"border-warning/40 bg-warning/10 text-warning-text\",\n          \"[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)]\",\n          BADGE_APPEARANCE_RECIPES_CALM,\n        ),\n        destructive: cn(\n          \"border-destructive/40 bg-destructive/10 text-destructive-text\",\n          \"[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)]\",\n          BADGE_APPEARANCE_RECIPES_CALM,\n        ),\n      },\n      /** `md` for inline use; `sm` for rail nodes / dense rows. */\n      size: {\n        sm: \"px-2 [&_svg]:size-3\",\n        md: \"[&_svg]:size-3.5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport interface StatusBadgeProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    Omit<VariantProps<typeof statusBadgeVariants>, \"status\" | \"tone\"> {\n  /** The canonical execution status, or a mapped out-of-vocabulary one (#363). */\n  status: Status | CustomStatus;\n  /** Render label-only (no status icon). */\n  hideIcon?: boolean;\n  /**\n   * Explicit per-instance override of the fill/border/ink treatment — see\n   * `Badge`'s own doc. Meaningful only on the colour-bearing statuses\n   * (`running`/`complete`/`awaiting-approval`/`failed`) and tones\n   * (`info`/`success`/`warning`/`destructive`); `pending`/`denied`/`skipped`\n   * and the `neutral` tone are already neutral pills. On a `CustomStatus`\n   * (the out-of-vocabulary hatch), `\"solid\"` is never honoured — the hatch\n   * is calm-only (integrity constraint 2, file docblock).\n   */\n  appearance?: BadgeAppearance;\n}\n\nexport const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(function StatusBadge(\n  { status, size, appearance, hideIcon = false, className, children, ...props },\n  ref,\n) {\n  if (isCustomStatus(status)) {\n    const { label, tone, icon: Icon } = status;\n    // Calm-only hatch: `solid` never reaches a custom tone, even via an\n    // explicit prop (integrity constraint 2) — `statusBadgeVariants`'\n    // `tone` branches also never wire the `solid` recipe, so a theme's\n    // global `--badge-appearance: solid` can't reach it either.\n    const toneAppearance = appearance === \"solid\" ? undefined : appearance;\n    return (\n      <span\n        ref={ref}\n        data-slot=\"status-badge\"\n        data-status=\"custom\"\n        data-tone={tone}\n        data-appearance={toneAppearance}\n        className={cn(statusBadgeVariants({ tone, size }), className)}\n        {...props}\n      >\n        {hideIcon || !Icon ? null : <Icon aria-hidden=\"true\" />}\n        {children ?? label}\n      </span>\n    );\n  }\n\n  const Icon = STATUS_ICONS[status];\n  return (\n    <span\n      ref={ref}\n      data-slot=\"status-badge\"\n      data-status={status}\n      data-tone={STATUS_TONE_MAP[status]}\n      data-appearance={appearance}\n      className={cn(statusBadgeVariants({ status, size }), className)}\n      {...props}\n    >\n      {hideIcon ? null : (\n        <Icon\n          aria-hidden=\"true\"\n          className={status === \"running\" ? RUNNING_SPIN_CLASSES : undefined}\n        />\n      )}\n      {children ?? STATUS_LABELS[status]}\n    </span>\n  );\n});\n\n/** The editor/markdown `Timeline` 3-state vocabulary (`@elabs-ai/components-editor`). */\nexport type TimelineStatus = \"done\" | \"active\" | \"pending\";\n\nconst TIMELINE_STATUS_MAP: Record<TimelineStatus, Status> = {\n  done: \"complete\",\n  active: \"running\",\n  pending: \"pending\",\n};\n\n/**\n * Map the Timeline `done|active|pending` vocabulary onto the canonical\n * `Status` (research 10 §B.1 mapping b — lossless; the timeline only\n * expresses 3 of the 7 states). The AI-SDK `ToolUIPart` mapper lives in\n * `@elabs-ai/components-ai` (`statusFromToolState`, tool.tsx) so `@elabs-ai/components-ui` stays free of\n * the `ai` dependency (D6).\n */\nexport function fromTimelineStatus(status: TimelineStatus): Status {\n  return TIMELINE_STATUS_MAP[status];\n}\n"],"mappings":"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","names":["StatusIcon","StatusBadge","Icon"]}

package/dist/chunk-3JAEQNCB.js

@@ -0,0 +1,60 @@
+"use client";
+
+// src/lib/use-scroll-progress.ts
+import { useEffect, useRef, useState } from "react";
+var MOTION_FACTOR_FLOOR = 0.01;
+function readMotionFactor(el) {
+  if (typeof window === "undefined") return 1;
+  const target = el ?? document.documentElement;
+  const value = Number.parseFloat(getComputedStyle(target).getPropertyValue("--motion-factor"));
+  return Number.isFinite(value) ? value : 1;
+}
+function isMotionAtFloor(factor) {
+  return factor <= MOTION_FACTOR_FLOOR;
+}
+function supportsScrollTimeline() {
+  return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timeline: scroll()");
+}
+function useScrollProgress(onScroll, { enabled = true, target } = {}) {
+  const [state, setState] = useState({ mode: "static", factor: 1 });
+  const onScrollRef = useRef(onScroll);
+  useEffect(() => {
+    onScrollRef.current = onScroll;
+  });
+  useEffect(() => {
+    const factor = readMotionFactor(target?.current);
+    if (!enabled || isMotionAtFloor(factor)) {
+      setState({ mode: "static", factor });
+      return;
+    }
+    if (supportsScrollTimeline()) {
+      setState({ mode: "timeline", factor });
+      return;
+    }
+    setState({ mode: "script", factor });
+    let cancelled = false;
+    let stop;
+    import("motion").then(({ scroll }) => {
+      if (cancelled) return;
+      stop = scroll((progress, info) => {
+        onScrollRef.current?.(info.y.current, progress);
+      });
+    }).catch(() => {
+      if (!cancelled) setState({ mode: "static", factor });
+    });
+    return () => {
+      cancelled = true;
+      stop?.();
+    };
+  }, [enabled, target]);
+  return state;
+}
+
+export {
+  MOTION_FACTOR_FLOOR,
+  readMotionFactor,
+  isMotionAtFloor,
+  supportsScrollTimeline,
+  useScrollProgress
+};
+//# sourceMappingURL=chunk-3JAEQNCB.js.map

package/dist/chunk-3JAEQNCB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-scroll-progress.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\n\n/**\n * The motion gate (`packages/tokens/src/themes.css`, MOTION GATE) sets `--motion-factor` to\n * 0.0001 under a reduce request and 1 otherwise. Anything at or below this floor is \"motion off\".\n */\nexport const MOTION_FACTOR_FLOOR = 0.01;\n\n/** `--motion-factor` as seen by `el` (default: the document root); 1 when unset or on the server. */\nexport function readMotionFactor(el?: Element | null): number {\n  if (typeof window === \"undefined\") return 1;\n  const target = el ?? document.documentElement;\n  const value = Number.parseFloat(getComputedStyle(target).getPropertyValue(\"--motion-factor\"));\n  return Number.isFinite(value) ? value : 1;\n}\n\n/** True when the factor sits at the floor — the reader asked for reduced motion. */\nexport function isMotionAtFloor(factor: number): boolean {\n  return factor <= MOTION_FACTOR_FLOOR;\n}\n\n/** True when the browser runs scroll-driven CSS animations (`animation-timeline: scroll()`). */\nexport function supportsScrollTimeline(): boolean {\n  return (\n    typeof CSS !== \"undefined\" &&\n    typeof CSS.supports === \"function\" &&\n    CSS.supports(\"animation-timeline: scroll()\")\n  );\n}\n\n/**\n * How root scroll progress is delivered:\n * - `static` — server render, before hydration, motion at the floor, or disabled: nothing moves.\n * - `timeline` — the browser runs `animation-timeline: scroll()`; the caller's CSS does the work\n *   on the compositor and no JavaScript listens to scroll.\n * - `script` — no scroll timelines: `motion`'s `scroll()` (an optional peer, imported lazily\n *   only here) calls `onScroll` every frame.\n */\nexport type ScrollProgressMode = \"static\" | \"timeline\" | \"script\";\n\nexport interface ScrollProgressOptions {\n  /** Skip all work (e.g. a plane whose rate means it never moves). Default `true`. */\n  enabled?: boolean;\n  /** Read `--motion-factor` from this element (so a subtree can dial motion); default the root. */\n  target?: RefObject<Element | null>;\n}\n\nexport interface ScrollProgress {\n  mode: ScrollProgressMode;\n  /** `--motion-factor` read once after mount (1 before hydration). */\n  factor: number;\n}\n\n/**\n * Root scroll progress under the motion gate. The factor is read once, after hydration, so the\n * server HTML and the first client render are identical (`static`). `onScroll(scrollY, progress)`\n * fires only in `script` mode; it may change between renders without resubscribing.\n */\nexport function useScrollProgress(\n  onScroll?: (scrollY: number, progress: number) => void,\n  { enabled = true, target }: ScrollProgressOptions = {},\n): ScrollProgress {\n  const [state, setState] = useState<ScrollProgress>({ mode: \"static\", factor: 1 });\n  const onScrollRef = useRef(onScroll);\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const factor = readMotionFactor(target?.current);\n    if (!enabled || isMotionAtFloor(factor)) {\n      setState({ mode: \"static\", factor });\n      return;\n    }\n    if (supportsScrollTimeline()) {\n      setState({ mode: \"timeline\", factor });\n      return;\n    }\n    setState({ mode: \"script\", factor });\n    let cancelled = false;\n    let stop: (() => void) | undefined;\n    import(\"motion\")\n      .then(({ scroll }) => {\n        if (cancelled) return;\n        stop = scroll((progress: number, info) => {\n          onScrollRef.current?.(info.y.current, progress);\n        });\n      })\n      .catch(() => {\n        // `motion` is an optional peer: without it the page simply does not move.\n        if (!cancelled) setState({ mode: \"static\", factor });\n      });\n    return () => {\n      cancelled = true;\n      stop?.();\n    };\n  }, [enabled, target]);\n\n  return state;\n}\n"],"mappings":";;;AAEA,SAAS,WAAW,QAAQ,gBAAgC;AAMrD,IAAM,sBAAsB;AAG5B,SAAS,iBAAiB,IAA6B;AAC5D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,QAAQ,OAAO,WAAW,iBAAiB,MAAM,EAAE,iBAAiB,iBAAiB,CAAC;AAC5F,SAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU;AACnB;AAGO,SAAS,yBAAkC;AAChD,SACE,OAAO,QAAQ,eACf,OAAO,IAAI,aAAa,cACxB,IAAI,SAAS,8BAA8B;AAE/C;AA8BO,SAAS,kBACd,UACA,EAAE,UAAU,MAAM,OAAO,IAA2B,CAAC,GACrC;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyB,EAAE,MAAM,UAAU,QAAQ,EAAE,CAAC;AAChF,QAAM,cAAc,OAAO,QAAQ;AAEnC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,SAAS,iBAAiB,QAAQ,OAAO;AAC/C,QAAI,CAAC,WAAW,gBAAgB,MAAM,GAAG;AACvC,eAAS,EAAE,MAAM,UAAU,OAAO,CAAC;AACnC;AAAA,IACF;AACA,QAAI,uBAAuB,GAAG;AAC5B,eAAS,EAAE,MAAM,YAAY,OAAO,CAAC;AACrC;AAAA,IACF;AACA,aAAS,EAAE,MAAM,UAAU,OAAO,CAAC;AACnC,QAAI,YAAY;AAChB,QAAI;AACJ,WAAO,QAAQ,EACZ,KAAK,CAAC,EAAE,OAAO,MAAM;AACpB,UAAI,UAAW;AACf,aAAO,OAAO,CAAC,UAAkB,SAAS;AACxC,oBAAY,UAAU,KAAK,EAAE,SAAS,QAAQ;AAAA,MAChD,CAAC;AAAA,IACH,CAAC,EACA,MAAM,MAAM;AAEX,UAAI,CAAC,UAAW,UAAS,EAAE,MAAM,UAAU,OAAO,CAAC;AAAA,IACrD,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AACZ,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,CAAC;AAEpB,SAAO;AACT;","names":[]}

package/dist/chunk-3LWAAK3J.js

@@ -0,0 +1,140 @@
+"use client";
+import {
+  Slider
+} from "./chunk-WX3LWMVU.js";
+import {
+  NumberInput
+} from "./chunk-4GQFIJAE.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/slider-number/slider-number.tsx
+import { forwardRef, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getStepDecimals(step) {
+  const str = step.toString();
+  const dot = str.indexOf(".");
+  return dot === -1 ? 0 : str.length - dot - 1;
+}
+function clampValue(value, min, max) {
+  let result = value;
+  if (min !== void 0) result = Math.max(min, result);
+  if (max !== void 0) result = Math.min(max, result);
+  return result;
+}
+function roundValue(value, step, precision) {
+  const decimals = precision ?? getStepDecimals(step);
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+var SliderNumber = forwardRef(function SliderNumber2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  precision,
+  resetLabel,
+  disabled,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  className,
+  ...props
+}, ref) {
+  const { t } = useLocale();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue !== void 0 ? defaultValue : null
+  );
+  const currentValue = isControlled ? valueProp : internalValue;
+  const [inputEpoch, setInputEpoch] = useState(0);
+  const commit = useCallback(
+    (next) => {
+      const rounded = next == null ? null : roundValue(clampValue(next, min, max), step, precision);
+      if (next != null && rounded !== next && rounded === currentValue) {
+        setInputEpoch((n) => n + 1);
+      }
+      if (!isControlled) setInternalValue(rounded);
+      onValueChange?.(rounded);
+    },
+    [isControlled, onValueChange, min, max, step, precision, currentValue]
+  );
+  const isDefault = currentValue == null;
+  const sliderValue = currentValue ?? min;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "slider-number",
+      className: cn("flex w-80 max-w-full items-center gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            "data-slot": "slider-number-slider",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            min,
+            max,
+            step,
+            disabled,
+            value: [sliderValue],
+            onValueChange: (values) => commit(values[0] ?? null),
+            thumbProps: {
+              // Visually distinct "provider default" thumb — dimmed + dashed,
+              // never confusable with a real value (including 0).
+              className: cn(isDefault && "opacity-50 border-dashed")
+            },
+            className: "flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            "data-slot": "slider-number-input",
+            id,
+            name,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            min,
+            max,
+            step,
+            disabled,
+            value: currentValue,
+            onValueChange: commit,
+            className: "w-32 shrink-0"
+          },
+          inputEpoch
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "data-slot": "slider-number-reset",
+            disabled: disabled || isDefault,
+            onClick: () => commit(null),
+            children: resetLabel ?? t("ui.sliderNumber.reset")
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  SliderNumber
+};
+//# sourceMappingURL=chunk-3LWAAK3J.js.map

package/dist/chunk-3LWAAK3J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/slider-number/slider-number.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { NumberInput } from \"../number-input\";\nimport { Slider } from \"../slider\";\nimport { useLocale } from \"../locale-provider\";\n\nexport interface SliderNumberProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** Controlled value. Pass `null` for \"use the provider default\". */\n  value?: number | null;\n  /** Uncontrolled initial value. */\n  defaultValue?: number | null;\n  /** Called when the value changes — always rounded identically on the drag and type paths. */\n  onValueChange?: (value: number | null) => void;\n  /** Minimum allowed value. Defaults to 0. */\n  min?: number;\n  /** Maximum allowed value. Defaults to 100. */\n  max?: number;\n  /** Step increment for both the slider and the number input's arrow keys. Defaults to 1. */\n  step?: number;\n  /**\n   * Number of decimal places to round to. Defaults to the decimal places in\n   * `step` (e.g. `step={0.1}` rounds to 1 decimal). Applied identically on\n   * BOTH the slider path and the number-input path so drag-then-type never\n   * disagrees.\n   */\n  precision?: number;\n  /** Label for the reset-to-provider-default control. Defaults to \"Reset\". */\n  resetLabel?: ReactNode;\n  /** Disables the whole control. */\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nfunction getStepDecimals(step: number): number {\n  const str = step.toString();\n  const dot = str.indexOf(\".\");\n  return dot === -1 ? 0 : str.length - dot - 1;\n}\n\nfunction clampValue(value: number, min?: number, max?: number): number {\n  let result = value;\n  if (min !== undefined) result = Math.max(min, result);\n  if (max !== undefined) result = Math.min(max, result);\n  return result;\n}\n\n/** Rounds to a fixed decimal precision — the ONE function both paths call. */\nfunction roundValue(value: number, step: number, precision?: number): number {\n  const decimals = precision ?? getStepDecimals(step);\n  const factor = 10 ** decimals;\n  return Math.round(value * factor) / factor;\n}\n\n/**\n * SliderNumber — a `Slider` and a `NumberInput` bound to one value, clamped\n * and rounded in lockstep so they can never disagree, plus an explicit\n * `null` state meaning \"use the provider default\" with a reset control.\n *\n * The subtle part (#372): both the slider's `onValueChange` and the number\n * input's `onValueChange` are routed through the SAME `commit` function,\n * which rounds to a fixed decimal precision before storing — so dragging to\n * a value and then typing the same value never produces two representations\n * of the same intent (e.g. floating-point drift like `0.30000000000000004`).\n */\nexport const SliderNumber = forwardRef<HTMLDivElement, SliderNumberProps>(function SliderNumber(\n  {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    precision,\n    resetLabel,\n    disabled,\n    id,\n    name,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const isControlled = valueProp !== undefined;\n  const [internalValue, setInternalValue] = useState<number | null>(\n    defaultValue !== undefined ? defaultValue : null,\n  );\n  const currentValue = isControlled ? valueProp : internalValue;\n\n  // Bumped whenever this component normalises a typed value back to the value\n  // it ALREADY holds. `NumberInput` only re-derives its display text when the\n  // controlled `value` prop CHANGES, so in that one case it would keep showing\n  // the raw keystrokes (\"0.44\") while the slider and the committed value read\n  // the rounded one (0.4) — the exact \"slider and input disagree\" failure this\n  // component exists to prevent. Remounting it re-derives the text from the\n  // value that was actually accepted. It only ever fires on blur, when the\n  // input is no longer focused, so the remount is invisible.\n  const [inputEpoch, setInputEpoch] = useState(0);\n\n  const commit = useCallback(\n    (next: number | null) => {\n      const rounded = next == null ? null : roundValue(clampValue(next, min, max), step, precision);\n      if (next != null && rounded !== next && rounded === currentValue) {\n        setInputEpoch((n) => n + 1);\n      }\n      if (!isControlled) setInternalValue(rounded);\n      onValueChange?.(rounded);\n    },\n    [isControlled, onValueChange, min, max, step, precision, currentValue],\n  );\n\n  const isDefault = currentValue == null;\n  const sliderValue = currentValue ?? min;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"slider-number\"\n      // A default FIXED width (matching Slider's own convention — it has no\n      // intrinsic width either, and its stories always pass one via\n      // className) so the Slider's `flex-1` has real space to grow into.\n      // `w-full`/percentage widths are unresolvable inside an ancestor with\n      // no definite width (e.g. Storybook's default \"centered\" layout, or a\n      // bare inline/flex context), which collapses `flex-1` to near-zero.\n      // Callers in a definite-width layout can still override via `className`\n      // (e.g. `className=\"w-full\"` inside a form field's own fixed-width row).\n      // `max-w-full` keeps the fixed width from OVERFLOWING a container\n      // narrower than 20rem (a settings drawer, a 320px mobile column) — it is\n      // a preferred width, not a floor.\n      className={cn(\"flex w-80 max-w-full items-center gap-3\", className)}\n      {...props}\n    >\n      <Slider\n        data-slot=\"slider-number-slider\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        value={[sliderValue]}\n        onValueChange={(values) => commit(values[0] ?? null)}\n        thumbProps={{\n          // Visually distinct \"provider default\" thumb — dimmed + dashed,\n          // never confusable with a real value (including 0).\n          className: cn(isDefault && \"opacity-50 border-dashed\"),\n        }}\n        className=\"flex-1\"\n      />\n      <NumberInput\n        key={inputEpoch}\n        data-slot=\"slider-number-input\"\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        value={currentValue}\n        onValueChange={commit}\n        // NumberInput's own default is w-36 (144px); shrinking it below\n        // ~w-32 leaves too little room for the digits once its own\n        // decrease/increase buttons are subtracted, clipping the text.\n        className=\"w-32 shrink-0\"\n      />\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        data-slot=\"slider-number-reset\"\n        disabled={disabled || isDefault}\n        onClick={() => commit(null)}\n      >\n        {resetLabel ?? t(\"ui.sliderNumber.reset\")}\n      </Button>\n    </div>\n  );\n});\n"],"mappings":"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","names":["SliderNumber"]}

package/dist/chunk-3OSGTUN2.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-3OSGTUN2.js.map

package/dist/chunk-3OSGTUN2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-3P7SRCDB.js

@@ -0,0 +1,23 @@
+"use client";
+
+// src/lib/format-duration.ts
+var MS_PER_SECOND = 1e3;
+var SECONDS_PER_MINUTE = 60;
+var TEN_SECONDS = 10;
+function formatElapsed(elapsedMs) {
+  if (elapsedMs < MS_PER_SECOND) {
+    return `${Math.round(elapsedMs)}ms`;
+  }
+  const totalSeconds = elapsedMs / MS_PER_SECOND;
+  if (totalSeconds < SECONDS_PER_MINUTE) {
+    return `${totalSeconds.toFixed(totalSeconds < TEN_SECONDS ? 1 : 0)}s`;
+  }
+  const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);
+  const seconds = Math.round(totalSeconds % SECONDS_PER_MINUTE);
+  return `${minutes}m${String(seconds).padStart(2, "0")}s`;
+}
+
+export {
+  formatElapsed
+};
+//# sourceMappingURL=chunk-3P7SRCDB.js.map

package/dist/chunk-3P7SRCDB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/format-duration.ts"],"sourcesContent":["const MS_PER_SECOND = 1000;\nconst SECONDS_PER_MINUTE = 60;\nconst TEN_SECONDS = 10;\n\n/**\n * Human-readable elapsed time — one formatter for every \"how long did this take\"\n * surface in the system: `TurnStatus`'s running turn (#105), `ChangeReview`'s check\n * rows (#112), `AgentEvent`'s hook durations (#109).\n *\n * Exported so a consumer's own elapsed-time surfaces agree with ours.\n * Adapted from `brainless`'s turn-status elapsed formatter (MIT, see `ATTRIBUTION.md`).\n *\n * Rungs: sub-second → \"420ms\" · under ten seconds → \"8.0s\" · under a minute → \"45s\" ·\n * beyond → \"2m05s\".\n */\nexport function formatElapsed(elapsedMs: number): string {\n  if (elapsedMs < MS_PER_SECOND) {\n    return `${Math.round(elapsedMs)}ms`;\n  }\n\n  const totalSeconds = elapsedMs / MS_PER_SECOND;\n\n  if (totalSeconds < SECONDS_PER_MINUTE) {\n    return `${totalSeconds.toFixed(totalSeconds < TEN_SECONDS ? 1 : 0)}s`;\n  }\n\n  const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);\n  const seconds = Math.round(totalSeconds % SECONDS_PER_MINUTE);\n  return `${minutes}m${String(seconds).padStart(2, \"0\")}s`;\n}\n"],"mappings":";;;AAAA,IAAM,gBAAgB;AACtB,IAAM,qBAAqB;AAC3B,IAAM,cAAc;AAab,SAAS,cAAc,WAA2B;AACvD,MAAI,YAAY,eAAe;AAC7B,WAAO,GAAG,KAAK,MAAM,SAAS,CAAC;AAAA,EACjC;AAEA,QAAM,eAAe,YAAY;AAEjC,MAAI,eAAe,oBAAoB;AACrC,WAAO,GAAG,aAAa,QAAQ,eAAe,cAAc,IAAI,CAAC,CAAC;AAAA,EACpE;AAEA,QAAM,UAAU,KAAK,MAAM,eAAe,kBAAkB;AAC5D,QAAM,UAAU,KAAK,MAAM,eAAe,kBAAkB;AAC5D,SAAO,GAAG,OAAO,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG,CAAC;AACvD;","names":[]}

package/dist/chunk-45ICJ3EV.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-45ICJ3EV.js.map

package/dist/chunk-45ICJ3EV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-4ACT7RLU.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-4ACT7RLU.js.map

package/dist/chunk-4ACT7RLU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}