@orangecheck/app-design 1.5.0 → 1.6.0

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.mjs';
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts, darkPalette, lightPalette } from './tokens.mjs';
 export { Accordion, AccordionItem, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, ConfirmOptions, Density, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldControlProps, FieldProps, Input, InputProps, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useDensity, useTimedOut } from './primitives.mjs';
 export { S as Statement, a as Status, b as StatusBadge, c as StatusBadgeProps, s as statusWord } from './status-badge-BJ9Sdsx8.mjs';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.mjs';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CheckState, Closing, Column, CommandDialog, Container, CopyButton, CopyButtonProps, CountdownRing, DataTable, Display, DisplayProps, EmptyLine, EmptyState, Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LegalBlock, LegalDocument, LegalSource, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, PackageItem, PageHeader, PhoneFrame, PlanCard, ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, SearchButton, SearchDialog, SearchDialogProps, SearchGroup, SearchQuery, SearchResult, Section, SectionHeading, SectionIntro, SectionProps, SignMessage, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, TextLink, Ticker, TruthRow, TruthStatus, TruthTable, UsdApprox, VerifyCheck, VerifyReport, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, ChartFrame, ChartTone, CheckState, Closing, Column, CommandDialog, Container, CopyButton, CopyButtonProps, CountdownRing, DataTable, Display, DisplayProps, EmptyLine, EmptyState, Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, KeyValueItem, KeyValueList, Lead, LegalBlock, LegalDocument, LegalSource, LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, SearchButton, SearchDialog, SearchDialogProps, SearchGroup, SearchQuery, SearchResult, Section, SectionHeading, SectionIntro, SectionProps, SignMessage, SourceNote, SourceNoteProps, Sparkline, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, TextLink, Ticker, TruthRow, TruthStatus, TruthTable, UsdApprox, ValueTone, VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
 export { D as DocHeader, a as DocLayout, P as PageHero, b as PageHeroProps, T as TocItem, u as useActiveHeading } from './hero-Dn37il-9.mjs';
 export { A as ApiRow, a as ApiTable, b as AppCard, c as AppCardProps, d as AppGrid, B as Breadcrumbs, C as Callout, e as CardGrid, f as CodeBlock, g as CodeBlockProps, h as CodeTab, i as CodeTabs, j as ComparisonColumn, k as ComparisonRow, l as ComparisonTable, m as Crumb, D as Diagram, n as DocsHeading, o as DocsPager, I as InstallTabs, L as LinkCard, M as MdxTable, p as MermaidLike, q as MermaidLoader, O as OnThisPage, P as PagerLink, r as ProtocolGrid, s as ProtocolHero, t as ProtocolNav, S as SpecCard, u as SpecCardProps, v as SpecFileKind, w as Step, x as Steps, V as VerifyBox, y as languageName, z as useHeadings } from './docs-CFE5mU_6.mjs';
 export { A as AnchorState, a as AnchorStatus, b as ArtifactView, B as BlockCountdown, c as BlockHeight, C as ChosenFile, D as DropZone, F as FilterChips, d as FilterOption, e as FormSection, M as Meter, S as SectionStatus, f as StateBadge, g as StateDef, h as StateTone, T as ToolGrid, i as ToolItem, j as createStateBadge } from './tools-Bg1gi2HO.mjs';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.js';
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts, darkPalette, lightPalette } from './tokens.js';
 export { Accordion, AccordionItem, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, ConfirmOptions, Density, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldControlProps, FieldProps, Input, InputProps, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useDensity, useTimedOut } from './primitives.js';
 export { S as Statement, a as Status, b as StatusBadge, c as StatusBadgeProps, s as statusWord } from './status-badge-Bt8x3RhO.js';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.js';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CheckState, Closing, Column, CommandDialog, Container, CopyButton, CopyButtonProps, CountdownRing, DataTable, Display, DisplayProps, EmptyLine, EmptyState, Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LegalBlock, LegalDocument, LegalSource, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, PackageItem, PageHeader, PhoneFrame, PlanCard, ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, SearchButton, SearchDialog, SearchDialogProps, SearchGroup, SearchQuery, SearchResult, Section, SectionHeading, SectionIntro, SectionProps, SignMessage, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, TextLink, Ticker, TruthRow, TruthStatus, TruthTable, UsdApprox, VerifyCheck, VerifyReport, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.js';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, ChartFrame, ChartTone, CheckState, Closing, Column, CommandDialog, Container, CopyButton, CopyButtonProps, CountdownRing, DataTable, Display, DisplayProps, EmptyLine, EmptyState, Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, KeyValueItem, KeyValueList, Lead, LegalBlock, LegalDocument, LegalSource, LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, SearchButton, SearchDialog, SearchDialogProps, SearchGroup, SearchQuery, SearchResult, Section, SectionHeading, SectionIntro, SectionProps, SignMessage, SourceNote, SourceNoteProps, Sparkline, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, TextLink, Ticker, TruthRow, TruthStatus, TruthTable, UsdApprox, ValueTone, VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.js';
 export { D as DocHeader, a as DocLayout, P as PageHero, b as PageHeroProps, T as TocItem, u as useActiveHeading } from './hero-Dn37il-9.js';
 export { A as ApiRow, a as ApiTable, b as AppCard, c as AppCardProps, d as AppGrid, B as Breadcrumbs, C as Callout, e as CardGrid, f as CodeBlock, g as CodeBlockProps, h as CodeTab, i as CodeTabs, j as ComparisonColumn, k as ComparisonRow, l as ComparisonTable, m as Crumb, D as Diagram, n as DocsHeading, o as DocsPager, I as InstallTabs, L as LinkCard, M as MdxTable, p as MermaidLike, q as MermaidLoader, O as OnThisPage, P as PagerLink, r as ProtocolGrid, s as ProtocolHero, t as ProtocolNav, S as SpecCard, u as SpecCardProps, v as SpecFileKind, w as Step, x as Steps, V as VerifyBox, y as languageName, z as useHeadings } from './docs-ByUx4t-D.js';
 export { A as AnchorState, a as AnchorStatus, b as ArtifactView, B as BlockCountdown, c as BlockHeight, C as ChosenFile, D as DropZone, F as FilterChips, d as FilterOption, e as FormSection, M as Meter, S as SectionStatus, f as StateBadge, g as StateDef, h as StateTone, T as ToolGrid, i as ToolItem, j as createStateBadge } from './tools-Bw7RhO92.js';

package/dist/index.js

@@ -58,36 +58,174 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var Link6__default = /*#__PURE__*/_interopDefault(Link6);
 
+// src/tokens/palette.ts
+var lightPalette = {
+  accent: "#f4f4f4",
+  accentDisplay: "#f55819",
+  accentForeground: "#0a0a0a",
+  accentInk: "#c73f09",
+  background: "#fafafa",
+  border: "#ececec",
+  brand: "#f66d36",
+  brandForeground: "#0a0a0a",
+  card: "#ffffff",
+  cardForeground: "#0a0a0a",
+  chart1: "#ea580b",
+  chart2: "#2563eb",
+  chart3: "#9d2b77",
+  chart4: "#92400e",
+  chartDown: "#c2262e",
+  chartGrid: "#ececec",
+  chartNeutral: "#8a8f96",
+  chartUp: "#15803d",
+  codeAdded: "#86d39b",
+  codeAddedLine: "#1a2c20",
+  codeComment: "#909397",
+  codeFunction: "#9db4ec",
+  codeKeyword: "#e3a8c2",
+  codeLine: "#2a2a2a",
+  codeLink: "#9db4ec",
+  codeMark: "#232323",
+  codeNumber: "#fcb781",
+  codePackage: "#e99a8f",
+  codeProperty: "#9db4ec",
+  codePunctuation: "#d5d8dc",
+  codeRemoved: "#f19a9a",
+  codeRemovedLine: "#2f1c1c",
+  codeString: "#e99a8f",
+  codeSurface: "#161616",
+  codeTag: "#e3a8c2",
+  codeType: "#8fd0c2",
+  destructive: "#c2262e",
+  destructiveForeground: "#ffffff",
+  foreground: "#0a0a0a",
+  hairlineStrong: "#dadada",
+  info: "#1d4ed8",
+  infoForeground: "#ffffff",
+  ink: "#0a0a0a",
+  inkCard: "#1e1e1e",
+  inkEyebrow: "#f0835a",
+  inkForeground: "#ffffff",
+  inkLine: "#2a2a2a",
+  inkMuted: "#d5d8dc",
+  inkSubtle: "#909397",
+  inkTitle: "#fcb781",
+  input: "#8f8f8f",
+  muted: "#f2f2f2",
+  mutedForeground: "#54585e",
+  ocWalletReady: "#15803d",
+  ocWalletSurface: "#ffffff",
+  orange: "#f66d36",
+  orangeDeep: "#ea580b",
+  orangeLight: "#fb933c",
+  outline: "#f2cfc3",
+  peach: "#fed8ab",
+  popover: "#ffffff",
+  popoverForeground: "#0a0a0a",
+  primary: "#0a0a0a",
+  primaryForeground: "#ffffff",
+  ring: "#ea580b",
+  secondary: "#ffffff",
+  secondaryForeground: "#0a0a0a",
+  skeleton: "#e8e8e8",
+  sphereFrom: "#ff6f33",
+  sphereTo: "#ffd9c4",
+  subtleForeground: "#686c72",
+  success: "#15803d",
+  successForeground: "#ffffff",
+  tableHead: "#ededed",
+  warning: "#a15c07",
+  warningForeground: "#ffffff"
+};
+var darkPalette = {
+  accent: "#1e1e1e",
+  accentDisplay: "#f66d36",
+  accentForeground: "#fafafa",
+  accentInk: "#f0835a",
+  background: "#0a0a0a",
+  bandLine: "#262626",
+  border: "#2a2a2a",
+  brand: "#f66d36",
+  brandForeground: "#0a0a0a",
+  card: "#161616",
+  cardForeground: "#fafafa",
+  chart1: "#f66d36",
+  chart2: "#3b82f6",
+  chart3: "#f9a8d4",
+  chart4: "#fde047",
+  chartDown: "#f87171",
+  chartGrid: "#2a2a2a",
+  chartNeutral: "#62676e",
+  chartUp: "#4ade80",
+  codeAdded: "#86d39b",
+  codeAddedLine: "#132519",
+  codeComment: "#909397",
+  codeFunction: "#9db4ec",
+  codeKeyword: "#e3a8c2",
+  codeLine: "#2a2a2a",
+  codeLink: "#9db4ec",
+  codeMark: "#1b1b1b",
+  codeNumber: "#fcb781",
+  codePackage: "#e99a8f",
+  codeProperty: "#9db4ec",
+  codePunctuation: "#d5d8dc",
+  codeRemoved: "#f19a9a",
+  codeRemovedLine: "#271414",
+  codeString: "#e99a8f",
+  codeSurface: "#0e0e0e",
+  codeTag: "#e3a8c2",
+  codeType: "#8fd0c2",
+  destructive: "#f87171",
+  destructiveForeground: "#0a0a0a",
+  foreground: "#fafafa",
+  hairlineStrong: "#333333",
+  iconRing: "#333333",
+  iconTile: "#1e1e1e",
+  info: "#93c5fd",
+  infoForeground: "#0a0a0a",
+  ink: "#171717",
+  inkCard: "#1e1e1e",
+  inkEyebrow: "#f0835a",
+  inkForeground: "#ffffff",
+  inkLine: "#2a2a2a",
+  inkMuted: "#d5d8dc",
+  inkSubtle: "#909397",
+  inkTitle: "#fcb781",
+  input: "#6a6a6a",
+  muted: "#1e1e1e",
+  mutedForeground: "#a3a6aa",
+  ocWalletReady: "#4ade80",
+  ocWalletSurface: "#161616",
+  orange: "#f66d36",
+  orangeDeep: "#ea580b",
+  orangeLight: "#fb933c",
+  outline: "#3a2a24",
+  peach: "#fed8ab",
+  popover: "#1a1a1a",
+  popoverForeground: "#fafafa",
+  primary: "#fafafa",
+  primaryForeground: "#0a0a0a",
+  ring: "#f66d36",
+  secondary: "#1c1c1c",
+  secondaryForeground: "#fafafa",
+  skeleton: "#222222",
+  sphereFrom: "#ff6f33",
+  sphereTo: "#ffd9c4",
+  subtleForeground: "#8b8e93",
+  success: "#4ade80",
+  successForeground: "#0a0a0a",
+  tableHead: "#1e1e1e",
+  warning: "#fbbf24",
+  warningForeground: "#0a0a0a"
+};
+
 // src/tokens/index.ts
 var APP_ATTRIBUTE = "data-oc-app";
 var APP_ID = "ochk";
 var appColors = {
-  light: {
-    background: "#FAFAFA",
-    foreground: "#0A0A0A",
-    card: "#FFFFFF",
-    muted: "#F2F2F2",
-    mutedForeground: "#54585E",
-    subtleForeground: "#686C72",
-    border: "#ECECEC",
-    hairlineStrong: "#DADADA",
-    accentDisplay: "#F55819",
-    accentInk: "#C73F09",
-    ring: "#EA580B"
-  },
-  dark: {
-    background: "#0A0A0A",
-    foreground: "#FAFAFA",
-    card: "#161616",
-    muted: "#1E1E1E",
-    mutedForeground: "#A3A6AA",
-    subtleForeground: "#8B8E93",
-    border: "#2A2A2A",
-    hairlineStrong: "#333333",
-    accentDisplay: "#F66D36",
-    accentInk: "#F0835A",
-    ring: "#F66D36"
-  },
+  /** Every colour token, generated from tokens.css (palette.ts): the chart series, code, ink and status colours too. */
+  light: lightPalette,
+  dark: darkPalette,
   brand: {
     orange: "#F66D36",
     orangeLight: "#FB933C",
@@ -2063,7 +2201,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, emit2, jsx51) {
+function scanJs(src, emit2, jsx52) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -2089,7 +2227,7 @@ function scanJs(src, emit2, jsx51) {
       sig('"');
       continue;
     }
-    if (jsx51 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+    if (jsx52 && 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) {
         emit2(m);
@@ -2101,7 +2239,7 @@ function scanJs(src, emit2, jsx51) {
         continue;
       }
     }
-    if (jsx51 && tagDepth > 0 && braceInTag === 0) {
+    if (jsx52 && tagDepth > 0 && braceInTag === 0) {
       if (src.startsWith("/>", i) || src[i] === ">") {
         const close = src[i] === ">" ? ">" : "/>";
         emit2(close);
@@ -2121,7 +2259,7 @@ function scanJs(src, emit2, jsx51) {
         continue;
       }
       if (src[i] === "{") braceInTag = 1;
-    } else if (jsx51 && tagDepth > 0 && braceInTag > 0) {
+    } else if (jsx52 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -2539,7 +2677,22 @@ function PageHeader({
   ] });
 }
 var InStatGrid = react.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__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-baseline gap-1 text-[0.8125rem] font-normal tracking-normal oca-tabular", tone), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+      " ",
+      label
+    ] }) : null
+  ] });
+}
+function StatCard({ label, value, hint, size, delta, className }) {
   const inGrid = react.useContext(InStatGrid);
   const density = useDensity();
   const sm = (size ?? (density === "compact" ? "sm" : "md")) === "sm";
@@ -2557,15 +2710,19 @@ function StatCard({ label, value, hint, size, className }) {
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("leading-snug text-muted-foreground", sm ? "text-[0.8125rem]" : "text-[0.875rem]"), children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Delta, { ...delta }) : null
+            ]
           }
         ),
         hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : inGrid ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true }) : null
@@ -2654,6 +2811,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,
@@ -2672,15 +2836,19 @@ function KeyValueList({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("ml-2 font-sans text-[0.8125rem]", TONE_TEXT[it.tone ?? "muted"]), children: it.note }) : null
+              ]
             }
           )
         ]
@@ -3961,6 +4129,185 @@ function LockedPreview({
     ] })
   ] });
 }
+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__ */ jsxRuntime.jsxs("figure", { className: cn("oca-chart flex min-w-0 flex-col gap-3", className), children: [
+    legend && legend.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, "data-swatch": l.dashed ? "dashed" : "", style: { "--swatch": c } }),
+        l.label
+      ] }, i);
+    }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-w-0", children }),
+    caption ? /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        area ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0", stopColor: "currentColor", stopOpacity: 0.22 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: `${line} L${x(pts.length - 1).toFixed(2)},${height} L${x(0).toFixed(2)},${height} Z`, fill: `url(#${gradient})` })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("a", { href, className: "text-foreground underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", rel: "noreferrer", target: "_blank", children: [
+    source,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " (opens in a new tab)" })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: source });
+  if (variant === "line") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-[0.75rem] leading-snug text-muted-foreground", className), children: [
+      "Source: ",
+      name,
+      updated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " \xB7 ",
+        updated
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": true, className: "size-3.5" }),
+          "Source"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", className: "flex w-[min(calc(100vw-2rem),20rem)] flex-col gap-2 p-4 text-[0.875rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.75rem] text-muted-foreground", children: "Where this number comes from" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: name }),
+      detail ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.8125rem] leading-snug text-muted-foreground [&_code]:font-mono", children: detail }) : null,
+      updated ? /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const body = (expanded) => typeof children === "function" ? children(expanded) : children;
+  const head = (expanded) => /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      expanded ? /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-[1.0625rem] font-medium leading-snug", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[1rem] font-medium leading-snug", children: title }),
+      description ? expanded ? /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+      actions,
+      expandable && !expanded ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Maximize2, { "aria-hidden": true, className: "size-4" })
+        }
+      ) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: body(false) }),
+    source ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mb-1 border-t border-border pt-3", children: source }) : null,
+    expandable ? /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1", children: open ? body(true) : null }),
+          source ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border pt-3", children: source }) : null
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function HudCard({
+  eyebrow,
+  live = false,
+  title,
+  children,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-[0.75rem] text-muted-foreground", children: [
+          live ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-oca-orange-deep motion-safe:animate-pulse" }) : null,
+          eyebrow
+        ] }) : null,
+        title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[1.125rem] font-medium leading-tight oca-tabular", children: title }) : null,
+        children,
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border pt-2", children: footer }) : null
+      ]
+    }
+  );
+}
 function SectionHeading({
   eyebrow,
   title,
@@ -7281,6 +7628,7 @@ exports.CardGrid = CardGrid;
 exports.CardHeader = CardHeader;
 exports.CardNumeral = CardNumeral;
 exports.CardTitle = CardTitle;
+exports.ChartFrame = ChartFrame;
 exports.Checkbox = Checkbox;
 exports.Closing = Closing;
 exports.CodeBlock = CodeBlock;
@@ -7340,6 +7688,7 @@ exports.FormSection = FormSection;
 exports.HalftoneCanvas = HalftoneCanvas;
 exports.HalftoneSphere = HalftoneSphere;
 exports.HashChip = HashChip;
+exports.HudCard = HudCard;
 exports.Input = Input;
 exports.InstallTabs = InstallTabs;
 exports.IsoCheck = IsoCheck;
@@ -7371,6 +7720,7 @@ exports.PackageCard = PackageCard;
 exports.PageHeader = PageHeader;
 exports.PageHero = PageHero;
 exports.Pagination = Pagination;
+exports.Panel = Panel;
 exports.PhoneFrame = PhoneFrame;
 exports.PlanCard = PlanCard;
 exports.Popover = Popover;
@@ -7420,6 +7770,8 @@ exports.SiteFooter = SiteFooter;
 exports.SiteHeader = SiteHeader;
 exports.Skeleton = Skeleton;
 exports.SkipLink = SkipLink;
+exports.SourceNote = SourceNote;
+exports.Sparkline = Sparkline;
 exports.SpecCard = SpecCard;
 exports.Spinner = Spinner;
 exports.SplitBar = SplitBar;
@@ -7459,10 +7811,12 @@ exports.badgeVariants = badgeVariants;
 exports.blocksToDuration = blocksToDuration;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
+exports.chartColor = chartColor;
 exports.cn = cn;
 exports.confirm = confirm;
 exports.createMdxComponents = createMdxComponents;
 exports.createStateBadge = createStateBadge;
+exports.darkPalette = darkPalette;
 exports.escapeHtml = escapeHtml;
 exports.explorerUrl = explorerUrl;
 exports.familyByGroup = familyByGroup;
@@ -7474,6 +7828,7 @@ exports.grammarOf = grammarOf;
 exports.highlight = highlight;
 exports.highlightToHtml = highlightToHtml;
 exports.languageName = languageName;
+exports.lightPalette = lightPalette;
 exports.linesToHtml = linesToHtml;
 exports.mdxComponents = mdxComponents;
 exports.monogramGround = monogramGround;