@orangecheck/app-design 1.4.1 → 1.6.0

package/dist/components.mjs

@@ -1,22 +1,25 @@
-import { forwardRef, createContext, useContext, useState, useEffect, createElement, useRef, Children, isValidElement, cloneElement, useCallback, useMemo, Component, useId, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { forwardRef, createContext, useContext, useState, useEffect, createElement, useRef, Children, isValidElement, cloneElement, useCallback, useMemo, Component, useSyncExternalStore, useId, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { ChevronDown, Check, Search, Copy, ArrowUpRight, ArrowRight, ChevronRight, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Lock, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
+import { X, ChevronDown, Check, Search, Copy, Lock, Info, ArrowUpRight, ArrowRight, ChevronRight, CornerDownLeft, Download, FileText, Upload, ArrowLeft, Maximize2, CircleDashed, CircleMinus, CircleSlash, Clock, CircleX, CircleCheck } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import 'next-themes';
 import 'sonner';
 import Link from 'next/link';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useRouter } from 'next/compat/router';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 var merge = extendTailwindMerge({
   extend: {
@@ -532,7 +535,7 @@ var JS_TAG = /<\/?(?=[A-Za-z])/y;
 var JS_TAG_NAME = /[A-Za-z][\w$.:-]*/y;
 var JS_PUNCT = /=>|\.\.\.|[{}()[\];,.<>=+\-*/%!?:&|^~#]/y;
 var JSX_BEFORE = /* @__PURE__ */ new Set(["(", ",", "=", "?", ":", "{", "[", ";", ">", "&&", "||", "=>", "return"]);
-function scanJs(src, emit, jsx35) {
+function scanJs(src, emit, jsx38) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -558,7 +561,7 @@ function scanJs(src, emit, jsx35) {
       sig('"');
       continue;
     }
-    if (jsx35 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+    if (jsx38 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
       const name = at(JS_TAG_NAME, src, i + m.length);
       if (name) {
         emit(m);
@@ -570,7 +573,7 @@ function scanJs(src, emit, jsx35) {
         continue;
       }
     }
-    if (jsx35 && tagDepth > 0 && braceInTag === 0) {
+    if (jsx38 && tagDepth > 0 && braceInTag === 0) {
       if (src.startsWith("/>", i) || src[i] === ">") {
         const close = src[i] === ">" ? ">" : "/>";
         emit(close);
@@ -590,7 +593,7 @@ function scanJs(src, emit, jsx35) {
         continue;
       }
       if (src[i] === "{") braceInTag = 1;
-    } else if (jsx35 && tagDepth > 0 && braceInTag > 0) {
+    } else if (jsx38 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -1175,7 +1178,22 @@ function PageHeader({
   ] });
 }
 var InStatGrid = createContext(false);
-function StatCard({ label, value, hint, size, className }) {
+function Delta({ value, suffix = "", good = "up", label }) {
+  const dir = value > 0 ? "up" : value < 0 ? "down" : "flat";
+  const tone = dir === "flat" ? "text-muted-foreground" : dir === good ? "text-success" : "text-destructive";
+  const sign = value > 0 ? "+" : value < 0 ? "\u2212" : "";
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-baseline gap-1 text-[0.8125rem] font-normal tracking-normal oca-tabular", tone), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: dir === "up" ? "\u2191" : dir === "down" ? "\u2193" : "\xB7" }),
+    sign,
+    Math.abs(value).toLocaleString("en-US", { maximumFractionDigits: 2 }),
+    suffix,
+    label ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      " ",
+      label
+    ] }) : null
+  ] });
+}
+function StatCard({ label, value, hint, size, delta, className }) {
   const inGrid = useContext(InStatGrid);
   const density = useDensity();
   const sm = (size ?? (density === "compact" ? "sm" : "md")) === "sm";
@@ -1193,15 +1211,19 @@ function StatCard({ label, value, hint, size, className }) {
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: cn("leading-snug text-muted-foreground", sm ? "text-[0.8125rem]" : "text-[0.875rem]"), children: label }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "span",
           {
             className: cn(
               "break-words oca-tabular leading-tight tracking-[-0.02em]",
               sm ? "text-[1.25rem]" : "text-[1.5rem] md:text-[1.75rem]",
-              inGrid && "self-end"
+              inGrid && "self-end",
+              delta && "flex flex-wrap items-baseline gap-x-2"
             ),
-            children: value
+            children: [
+              value,
+              delta ? /* @__PURE__ */ jsx(Delta, { ...delta }) : null
+            ]
           }
         ),
         hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : inGrid ? /* @__PURE__ */ jsx("span", { "aria-hidden": true }) : null
@@ -1290,6 +1312,13 @@ function StatGrid({ columns, empty, isEmpty, className, children, ...props }) {
     }
   ) });
 }
+var TONE_TEXT = {
+  good: "text-success",
+  caution: "text-warning",
+  bad: "text-destructive",
+  brand: "text-oca-accent-ink",
+  muted: "text-muted-foreground"
+};
 function KeyValueList({
   items,
   dense,
@@ -1308,15 +1337,19 @@ function KeyValueList({
         ),
         children: [
           /* @__PURE__ */ jsx("dt", { className: cn("shrink-0 text-muted-foreground", tight ? "text-[0.8125rem] @md:w-36" : "text-[0.875rem] @md:w-48"), children: it.label }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "dd",
             {
               className: cn(
                 "min-w-0 break-words",
                 tight ? "text-[0.875rem]" : "text-[0.9375rem]",
-                it.mono && (tight ? "font-mono text-[0.8125rem]" : "font-mono text-[0.875rem]")
+                it.mono && (tight ? "font-mono text-[0.8125rem]" : "font-mono text-[0.875rem]"),
+                it.tone && !it.note && TONE_TEXT[it.tone]
               ),
-              children: it.value
+              children: [
+                it.value,
+                it.note ? /* @__PURE__ */ jsx("span", { className: cn("ml-2 font-sans text-[0.8125rem]", TONE_TEXT[it.tone ?? "muted"]), children: it.note }) : null
+              ]
             }
           )
         ]
@@ -2474,6 +2507,460 @@ function ErrorPage({
     art !== null ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-enter hidden justify-center md:col-span-5 md:flex [--enter-delay:120ms]", children: art ?? /* @__PURE__ */ jsx(MarkOutline, { className: "w-full max-w-[20rem] text-oca-hairline-strong" }) }) : null
   ] }) });
 }
+function onSecond(tick) {
+  const id = setInterval(tick, 1e3);
+  return () => clearInterval(id);
+}
+var nowSeconds = () => Math.floor(Date.now() / 1e3);
+function CountdownRing({
+  period,
+  remaining,
+  warnAt = 5,
+  size = 18,
+  showSeconds = true,
+  className
+}) {
+  const now = useSyncExternalStore(onSecond, nowSeconds, () => null);
+  const left = remaining ?? (now === null ? null : period - now % period);
+  const share = left === null ? 1 : Math.max(0, Math.min(1, left / period));
+  const warn = left !== null && left <= warnAt;
+  const r = size / 2 - 1.5;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "timer",
+      "aria-label": left === null ? void 0 : `${left} second${left === 1 ? "" : "s"} left`,
+      className: cn("inline-flex items-center gap-1.5", warn ? "text-destructive" : "text-muted-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
+          /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r, fill: "none", stroke: "var(--border)", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeDasharray: c,
+              strokeDashoffset: c * (1 - share),
+              className: cn(left !== null && left < period && "transition-[stroke-dashoffset] duration-1000 ease-linear motion-reduce:transition-none")
+            }
+          )
+        ] }),
+        showSeconds && left !== null ? /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] oca-tabular", children: [
+          left,
+          "s"
+        ] }) : null
+      ]
+    }
+  );
+}
+function PlanCard({
+  name,
+  subtitle,
+  price,
+  period,
+  footnote,
+  features = [],
+  action,
+  badge,
+  badgeTone = "neutral",
+  highlight: highlight2 = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex h-full flex-col gap-5 rounded-[1.25rem] border bg-card p-6",
+        highlight2 ? "border-foreground shadow-sm ring-1 ring-foreground" : "border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-[1.0625rem] font-medium leading-snug", children: name }),
+            badge ? /* @__PURE__ */ jsx(Badge, { tone: badgeTone, children: badge }) : null
+          ] }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: subtitle }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "oca-display-3 oca-tabular", children: price }),
+            period ? /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: period }) : null
+          ] }),
+          footnote ? /* @__PURE__ */ jsx("p", { className: "text-[0.8125rem] text-muted-foreground", children: footnote }) : null
+        ] }),
+        features.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5 text-[0.9375rem]", children: features.map((f, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "mt-1 size-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0", children: f })
+        ] }, i)) }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col pt-1 [&>*]:w-full", children: action }) : null
+      ]
+    }
+  );
+}
+function LockedPreview({
+  title,
+  description,
+  action,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    children ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        inert: true,
+        "aria-hidden": true,
+        "data-oca-locked": "",
+        className: "pointer-events-none max-h-[28rem] select-none overflow-hidden [mask-image:linear-gradient(to_bottom,#000_25%,transparent_85%)]",
+        children
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto flex max-w-md flex-col items-center gap-4 rounded-[1.25rem] border border-border bg-card px-6 py-7 text-center shadow-sm", children && "-mt-40"), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-10 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ jsx(Lock, { className: "size-[1.125rem]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[1.0625rem] font-medium leading-snug", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-snug text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2", children: action })
+    ] })
+  ] });
+}
+var Dialog = DialogPrimitive.Root;
+var overlayClass = "oca-animate-fade fixed inset-0 z-50 bg-[rgb(10_10_10/0.38)] backdrop-blur-[2px] data-[state=closed]:opacity-0";
+var DialogContent = forwardRef(function DialogContent2({ className, children, hideClose, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: overlayClass }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "oca-animate-rise fixed left-1/2 top-1/2 z-50 w-[min(92vw,34rem)] -translate-x-1/2 -translate-y-1/2",
+          "max-h-[88vh] overflow-y-auto rounded-[1.5rem] border border-border bg-popover p-6 text-popover-foreground shadow-xl md:p-8",
+          "outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          hideClose ? null : /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var DialogTitle = forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      className: cn("text-[1.5rem] font-normal leading-tight tracking-[-0.02em]", className),
+      ...props
+    }
+  );
+});
+var DialogDescription = forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("oca-body", className), ...props });
+});
+var sheetSide = {
+  right: "inset-y-0 right-0 h-full w-[min(88vw,24rem)] border-l",
+  left: "inset-y-0 left-0 h-full w-[min(88vw,24rem)] border-r",
+  bottom: "inset-x-0 bottom-0 max-h-[88vh] rounded-t-[1.5rem] border-t"
+};
+forwardRef(function SheetContent2({ className, children, side = "right", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: overlayClass }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "oca-animate-fade fixed z-50 flex flex-col gap-4 overflow-y-auto border-border bg-popover p-6 text-popover-foreground shadow-xl outline-none",
+          sheetSide[side],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 w-72 rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+forwardRef(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 max-w-xs rounded-lg bg-oca-ink px-2.5 py-1.5 text-[0.8125rem] leading-snug text-oca-ink-foreground",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+forwardRef(function DropdownMenuContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "oca-animate-fade z-50 min-w-56 overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-lg",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+forwardRef(function DropdownMenuItem2({ className, destructive, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none",
+        "data-[highlighted]:bg-accent data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:text-muted-foreground",
+        destructive && "text-destructive [&_svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+});
+forwardRef(function DropdownMenuLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn("px-3 pb-1.5 pt-2 text-[0.8125rem] text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
+});
+function chartColor(series) {
+  if (typeof series === "string") return `var(--oca-chart-${series})`;
+  const n = series >= 1 && series <= 4 && Number.isInteger(series) ? series : (series % 4 + 4) % 4 + 1;
+  return `var(--oca-chart-${n})`;
+}
+function ChartFrame({
+  legend,
+  caption,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("oca-chart flex min-w-0 flex-col gap-3", className), children: [
+    legend && legend.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "oca-chart-legend", "aria-label": "Legend", children: legend.map((l, i) => {
+      const c = typeof l.color === "number" || ["neutral", "up", "down"].includes(String(l.color)) ? chartColor(l.color) : String(l.color);
+      return /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-swatch": l.dashed ? "dashed" : "", style: { "--swatch": c } }),
+        l.label
+      ] }, i);
+    }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "relative min-w-0", children }),
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: caption }) : null
+  ] });
+}
+function Sparkline({
+  values,
+  label,
+  tone = "ink",
+  area = false,
+  width = 96,
+  height = 24,
+  className
+}) {
+  const gradient = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const pts = values.filter((v) => Number.isFinite(v));
+  const lo = Math.min(...pts);
+  const hi = Math.max(...pts);
+  const span = hi - lo || 1;
+  const pad3 = 1.5;
+  const x = (i) => pts.length < 2 ? width / 2 : i / (pts.length - 1) * width;
+  const y = (v) => pad3 + (1 - (v - lo) / span) * (height - pad3 * 2);
+  const line = pts.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(2)},${y(v).toFixed(2)}`).join(" ");
+  const color = tone === "ink" ? "var(--foreground)" : tone === "muted" ? "var(--muted-foreground)" : tone === "trend" ? chartColor(pts.length > 1 && pts[pts.length - 1] < pts[0] ? "down" : "up") : chartColor(tone);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "img",
+      "aria-label": label,
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      width,
+      height,
+      className: cn("block overflow-visible", className),
+      style: { color },
+      children: pts.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        area ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "currentColor", stopOpacity: 0.22 }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx("path", { d: `${line} L${x(pts.length - 1).toFixed(2)},${height} L${x(0).toFixed(2)},${height} Z`, fill: `url(#${gradient})` })
+        ] }) : null,
+        /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })
+      ] }) : null
+    }
+  );
+}
+function SourceNote({ source, href, detail, updated, variant = "popover", className }) {
+  const name = href ? /* @__PURE__ */ jsxs("a", { href, className: "text-foreground underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", rel: "noreferrer", target: "_blank", children: [
+    source,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" })
+  ] }) : /* @__PURE__ */ jsx("span", { className: "text-foreground", children: source });
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxs("p", { className: cn("text-[0.75rem] leading-snug text-muted-foreground", className), children: [
+      "Source: ",
+      name,
+      updated ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " \xB7 ",
+        updated
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        className: cn(
+          "inline-flex h-7 items-center gap-1 rounded-full px-2 text-[0.75rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Info, { "aria-hidden": true, className: "size-3.5" }),
+          "Source"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "flex w-[min(calc(100vw-2rem),20rem)] flex-col gap-2 p-4 text-[0.875rem]", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[0.75rem] text-muted-foreground", children: "Where this number comes from" }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: name }),
+      detail ? /* @__PURE__ */ jsx("div", { className: "text-[0.8125rem] leading-snug text-muted-foreground [&_code]:font-mono", children: detail }) : null,
+      updated ? /* @__PURE__ */ jsx("p", { className: "text-[0.8125rem] text-muted-foreground", children: updated }) : null
+    ] })
+  ] });
+}
+function Panel({
+  title,
+  description,
+  actions,
+  source,
+  expandable = false,
+  children,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const body = (expanded) => typeof children === "function" ? children(expanded) : children;
+  const head = (expanded) => /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      expanded ? /* @__PURE__ */ jsx(DialogTitle, { className: "text-[1.0625rem] font-medium leading-snug", children: title }) : /* @__PURE__ */ jsx("h3", { className: "text-[1rem] font-medium leading-snug", children: title }),
+      description ? expanded ? /* @__PURE__ */ jsx(DialogDescription, { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+      actions,
+      expandable && !expanded ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(true),
+          "aria-label": "Open full screen",
+          className: "inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": true, className: "size-4" })
+        }
+      ) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cn("flex min-w-0 flex-col gap-4 rounded-[1.25rem] border border-border bg-card p-5 md:p-6", className), children: [
+    head(false),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: body(false) }),
+    source ? /* @__PURE__ */ jsx("div", { className: "-mb-1 border-t border-border pt-3", children: source }) : null,
+    expandable ? /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        ...description ? {} : { "aria-describedby": void 0 },
+        className: "flex h-[min(92dvh,56rem)] w-[min(96vw,80rem)] max-w-none flex-col gap-4 overflow-y-auto",
+        children: [
+          head(true),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1", children: open ? body(true) : null }),
+          source ? /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-3", children: source }) : null
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function HudCard({
+  eyebrow,
+  live = false,
+  title,
+  children,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-oca-hud": "",
+      className: cn(
+        "flex w-60 max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-xl border border-border bg-background/85 p-3 text-[0.8125rem] shadow-sm backdrop-blur-md",
+        className
+      ),
+      children: [
+        eyebrow ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-[0.75rem] text-muted-foreground", children: [
+          live ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-oca-orange-deep motion-safe:animate-pulse" }) : null,
+          eyebrow
+        ] }) : null,
+        title ? /* @__PURE__ */ jsx("p", { className: "text-[1.125rem] font-medium leading-tight oca-tabular", children: title }) : null,
+        children,
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-2", children: footer }) : null
+      ]
+    }
+  );
+}
 function IsoCheck({ size = 360, settle = false, shadow = true, tilt = false, title, className }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -2962,7 +3449,7 @@ var Textarea = forwardRef(
     );
   }
 );
-var Label = forwardRef(function Label2({ className, ...props }, ref) {
+var Label2 = forwardRef(function Label3({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     LabelPrimitive.Root,
     {
@@ -2985,7 +3472,7 @@ function Field({ label, hint, optional, error, children, id: fixedId, className,
   const control = typeof children === "function" ? children(wiring) : isValidElement(children) ? cloneElement(children, { ...wiring }) : children;
   const hintNode = hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: hideLabel ? "sr-only" : "flex items-baseline gap-2", children: [
+    /* @__PURE__ */ jsxs(Label2, { htmlFor: id, className: hideLabel ? "sr-only" : "flex items-baseline gap-2", children: [
       label,
       optional ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] font-normal text-muted-foreground", children: "Optional" }) : null
     ] }),
@@ -3934,6 +4421,7 @@ function SearchDialog({
   idle,
   defaultQuery = "",
   debounceMs = 120,
+  browse = false,
   className
 }) {
   const [own, setOwn] = useState(false);
@@ -3970,7 +4458,7 @@ function SearchDialog({
   }, [hotkey]);
   useEffect(() => {
     const q = query.trim();
-    if (!q) {
+    if (!q && !(browse && open)) {
       setGroups([]);
       setState("idle");
       return;
@@ -3992,14 +4480,15 @@ function SearchDialog({
       clearTimeout(t);
       ctl.abort();
     };
-  }, [query, debounceMs]);
+  }, [query, debounceMs, browse, open]);
   useEffect(() => {
     listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
   }, [active]);
   const choose = (r) => {
     setOpen(false);
-    if (onSelect) onSelect(r);
-    else window.location.assign(r.href);
+    if (r.run) r.run();
+    else if (onSelect) onSelect(r);
+    else if (r.href) window.location.assign(r.href);
   };
   const optionId = (i) => `${listId}-o${i}`;
   const showList = state === "done" && flat.length > 0;
@@ -4070,25 +4559,28 @@ function SearchDialog({
                   index++;
                   const i = index;
                   const on = i === active;
+                  const Option = r.href ? "a" : "div";
                   return /* @__PURE__ */ jsxs(
-                    "a",
+                    Option,
                     {
                       id: optionId(i),
-                      href: r.href,
+                      ...r.href ? { href: r.href } : {},
                       role: "option",
                       "aria-selected": on,
                       tabIndex: -1,
                       onMouseMove: () => setActive(i),
                       onClick: (e) => {
-                        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+                        if (r.href && (e.metaKey || e.ctrlKey || e.shiftKey)) return;
                         e.preventDefault();
                         choose(r);
                       },
                       className: cn(
                         "flex items-start gap-3 rounded-xl px-3 py-2.5 transition-colors",
-                        on ? "bg-accent" : "hover:bg-accent"
+                        on ? "bg-accent" : "hover:bg-accent",
+                        !r.href && "cursor-pointer"
                       ),
                       children: [
+                        r.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-[1.0625rem]", children: r.icon }) : null,
                         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
                           /* @__PURE__ */ jsx("span", { className: "truncate text-[0.9375rem] font-medium text-foreground", children: r.title }),
                           r.section ? /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: r.section }) : null,
@@ -4100,6 +4592,7 @@ function SearchDialog({
                             }
                           ) : r.excerpt ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[0.875rem] leading-snug text-muted-foreground", children: r.excerpt }) : null
                         ] }),
+                        r.meta ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-[0.8125rem] text-muted-foreground", children: r.meta }) : null,
                         /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: cn("mt-1 size-4 shrink-0 text-muted-foreground", !on && "invisible") })
                       ]
                     },
@@ -4108,11 +4601,11 @@ function SearchDialog({
                 })
               ] }, gi)) }),
               state === "idle" ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: idle ?? "Type a word: a protocol, a function, an error." }) : null,
-              state === "done" && flat.length === 0 ? /* @__PURE__ */ jsxs("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: [
+              state === "done" && flat.length === 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: query.trim() ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 "No results for \u201C",
                 query.trim(),
                 "\u201D."
-              ] }) : null,
+              ] }) : "Nothing here yet." }) : null,
               state === "error" ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-6 text-[0.9375rem] text-muted-foreground", children: "Search is not available right now. Try again in a moment." }) : null
             ] }),
             /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "hidden shrink-0 items-center gap-4 border-t border-border px-5 py-2.5 text-[0.75rem] text-muted-foreground sm:flex", children: [
@@ -4137,6 +4630,13 @@ function SearchDialog({
     ] }) })
   ] });
 }
+function CommandDialog({
+  label = "Commands",
+  placeholder = "Search, or run a command",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SearchDialog, { ...props, label, placeholder, button: false, browse: true });
+}
 function pretty(content) {
   try {
     return JSON.stringify(JSON.parse(content), null, 2);
@@ -4565,6 +5065,13 @@ function BlockCountdown({
     ] }) : null
   ] });
 }
+var METER_FILL = {
+  ink: "bg-foreground",
+  brand: "bg-oca-orange-deep",
+  good: "bg-success",
+  caution: "bg-warning",
+  bad: "bg-destructive"
+};
 function Meter({
   value,
   max,
@@ -4599,7 +5106,7 @@ function Meter({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("h-full shrink-0 rounded-full", tone === "brand" ? "bg-oca-orange-deep" : "bg-foreground"),
+              className: cn("h-full shrink-0 rounded-full", METER_FILL[tone]),
               style: { width: `${v * 100}%` }
             }
           ),
@@ -4713,6 +5220,6 @@ function ToolGrid({
   );
 }
 
-export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, Closing, CodeBlock, CodeTabs, ComparisonTable, Container, CopyButton, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, LoadingBlock, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SignMessage, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
+export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, ChartFrame, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, HudCard, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, LoadingBlock, LockedPreview, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, Panel, PhoneFrame, PlanCard, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SignMessage, SourceNote, Sparkline, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, chartColor, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map