@orangecheck/app-design 1.6.2 → 1.7.0

package/dist/components.d.mts

@@ -3,11 +3,11 @@ import { ReactNode, HTMLAttributes, ElementType, CSSProperties, Component, Error
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 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 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-B9G1BNXI.mjs';
 import { ExplorerKind, Network } from './format.mjs';
-import { j as ProtocolSlug } from './index-DmfyPYe5.mjs';
-import { S as Statement } from './status-badge-BJ9Sdsx8.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';
+import { k as ProtocolSlug } from './index-Bkl49Vgy.mjs';
+import { S as Statement } from './status-badge-BBbCO6ZA.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-CKO8IseL.mjs';
 
 declare function Eyebrow({ className, onInk, ...props }: HTMLAttributes<HTMLParagraphElement> & {
     onInk?: boolean;
@@ -574,6 +574,8 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
 }): react.JSX.Element;
 
 declare const SIZES: {
+    readonly '2xs': "size-7 rounded-[0.55rem] text-[0.75rem]";
+    readonly xs: "size-8 rounded-[0.6rem] text-[0.875rem]";
     readonly sm: "size-9 rounded-[0.7rem] text-[0.9375rem]";
     readonly md: "size-11 rounded-[0.85rem] text-[1.125rem]";
     readonly lg: "size-14 rounded-[1.05rem] text-[1.5rem]";
@@ -843,6 +845,39 @@ declare function TextLink({ href: written, children, external, className, }: {
     className?: string;
 }): react.JSX.Element;
 
+declare function SectionTitle({ title, meta, description, action, as: Tag, size, tone, id, className, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    as?: 'h2' | 'h3';
+    size?: 'md' | 'sm';
+    tone?: 'default' | 'danger';
+    id?: string;
+    className?: string;
+}): react.JSX.Element;
+declare function ListCard({ as: Tag, className, ...props }: HTMLAttributes<HTMLElement> & {
+    as?: 'ul' | 'ol' | 'div';
+}): react.JSX.Element;
+declare function ChoiceGroup<T extends string>({ value, onValueChange, label, columns, size, disabled, className, children, }: {
+    value: T | undefined;
+    onValueChange: (value: T) => void;
+    label: string;
+    columns?: 1 | 2 | 3;
+    size?: 'md' | 'sm';
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function ChoiceCard({ value, title, description, icon, disabled, className, }: {
+    value: string;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}): react.JSX.Element;
+
 interface SearchResult {
     id: string;
     href?: string;
@@ -882,4 +917,4 @@ interface SearchDialogProps {
 declare function SearchDialog({ onQuery, open: openProp, onOpenChange, onSelect, button, hotkey, label, placeholder, idle, defaultQuery, debounceMs, browse, className, }: SearchDialogProps): react.JSX.Element;
 declare function CommandDialog({ label, placeholder, ...props }: Omit<SearchDialogProps, 'browse' | 'button'>): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, ChoiceCard, ChoiceGroup, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, ListCard, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SectionTitle, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };

package/dist/components.d.ts

@@ -3,11 +3,11 @@ import { ReactNode, HTMLAttributes, ElementType, CSSProperties, Component, Error
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 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 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-BWWnm5Jv.js';
 import { ExplorerKind, Network } from './format.js';
-import { j as ProtocolSlug } from './index-DmfyPYe5.js';
-import { S as Statement } from './status-badge-Bt8x3RhO.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';
+import { k as ProtocolSlug } from './index-Bkl49Vgy.js';
+import { S as Statement } from './status-badge-CHHxtFkP.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-CzjFPng4.js';
 
 declare function Eyebrow({ className, onInk, ...props }: HTMLAttributes<HTMLParagraphElement> & {
     onInk?: boolean;
@@ -574,6 +574,8 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
 }): react.JSX.Element;
 
 declare const SIZES: {
+    readonly '2xs': "size-7 rounded-[0.55rem] text-[0.75rem]";
+    readonly xs: "size-8 rounded-[0.6rem] text-[0.875rem]";
     readonly sm: "size-9 rounded-[0.7rem] text-[0.9375rem]";
     readonly md: "size-11 rounded-[0.85rem] text-[1.125rem]";
     readonly lg: "size-14 rounded-[1.05rem] text-[1.5rem]";
@@ -843,6 +845,39 @@ declare function TextLink({ href: written, children, external, className, }: {
     className?: string;
 }): react.JSX.Element;
 
+declare function SectionTitle({ title, meta, description, action, as: Tag, size, tone, id, className, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    as?: 'h2' | 'h3';
+    size?: 'md' | 'sm';
+    tone?: 'default' | 'danger';
+    id?: string;
+    className?: string;
+}): react.JSX.Element;
+declare function ListCard({ as: Tag, className, ...props }: HTMLAttributes<HTMLElement> & {
+    as?: 'ul' | 'ol' | 'div';
+}): react.JSX.Element;
+declare function ChoiceGroup<T extends string>({ value, onValueChange, label, columns, size, disabled, className, children, }: {
+    value: T | undefined;
+    onValueChange: (value: T) => void;
+    label: string;
+    columns?: 1 | 2 | 3;
+    size?: 'md' | 'sm';
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function ChoiceCard({ value, title, description, icon, disabled, className, }: {
+    value: string;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}): react.JSX.Element;
+
 interface SearchResult {
     id: string;
     href?: string;
@@ -882,4 +917,4 @@ interface SearchDialogProps {
 declare function SearchDialog({ onQuery, open: openProp, onOpenChange, onSelect, button, hotkey, label, placeholder, idle, defaultQuery, debounceMs, browse, className, }: SearchDialogProps): react.JSX.Element;
 declare function CommandDialog({ label, placeholder, ...props }: Omit<SearchDialogProps, 'browse' | 'button'>): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, ChoiceCard, ChoiceGroup, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, ListCard, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SectionTitle, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };

package/dist/components.js

@@ -570,7 +570,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, jsx38) {
+function scanJs(src, emit, jsx39) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -596,7 +596,7 @@ function scanJs(src, emit, jsx38) {
       sig('"');
       continue;
     }
-    if (jsx38 && tagDepth === 0 && (m = at(JS_TAG, src, i)) && (prev === "" || JSX_BEFORE.has(prev))) {
+    if (jsx39 && 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);
@@ -608,7 +608,7 @@ function scanJs(src, emit, jsx38) {
         continue;
       }
     }
-    if (jsx38 && tagDepth > 0 && braceInTag === 0) {
+    if (jsx39 && tagDepth > 0 && braceInTag === 0) {
       if (src.startsWith("/>", i) || src[i] === ">") {
         const close = src[i] === ">" ? ">" : "/>";
         emit(close);
@@ -628,7 +628,7 @@ function scanJs(src, emit, jsx38) {
         continue;
       }
       if (src[i] === "{") braceInTag = 1;
-    } else if (jsx38 && tagDepth > 0 && braceInTag > 0) {
+    } else if (jsx39 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -1824,7 +1824,7 @@ function Well({
   ] });
 }
 var FRAME = "overflow-hidden rounded-[1.25rem] border border-[var(--oca-code-line)] bg-[var(--oca-code-surface)]";
-var COPY_ON_INK = "text-oca-ink-subtle hover:bg-white/10 hover:text-white";
+var COPY_ON_INK = "text-oca-ink-subtle hover:bg-white/10 hover:text-white max-md:size-11";
 function CodeBlock({
   code,
   html,
@@ -2252,6 +2252,9 @@ var GROUNDS = [
   }
 ];
 var SIZES = {
+  // A list row's avatar, a facepile.
+  "2xs": "size-7 rounded-[0.55rem] text-[0.75rem]",
+  xs: "size-8 rounded-[0.6rem] text-[0.875rem]",
   sm: "size-9 rounded-[0.7rem] text-[0.9375rem]",
   md: "size-11 rounded-[0.85rem] text-[1.125rem]",
   lg: "size-14 rounded-[1.05rem] text-[1.5rem]"
@@ -2377,6 +2380,7 @@ function MarkOutline({ className }) {
 // src/family/index.ts
 var OCHK_IO = "https://ochk.io";
 var DOCS_HREF = `${OCHK_IO}/docs`;
+var OCHK_APP = "https://ochk.app";
 function protocol(slug, verb, line, kinds) {
   return {
     slug,
@@ -2413,7 +2417,7 @@ var FAMILY = [
   {
     slug: "me",
     label: "ochk.app",
-    href: "https://ochk.app",
+    href: OCHK_APP,
     group: "orangecheck",
     line: "One account, with Bitcoin behind it.",
     status: "testing"
@@ -2496,6 +2500,10 @@ function protocolSite(slug) {
   { href: `${OCHK_IO}/trust`, label: "Trust" },
   { href: `${OCHK_IO}/about`, label: "About" }
 ];
+var InColumnContext = sharedContext("in-column", false);
+function useInColumn() {
+  return react.useContext(InColumnContext);
+}
 var SiteHomeContext = sharedContext("site-home", void 0);
 function useSiteHome() {
   return react.useContext(SiteHomeContext);
@@ -2523,10 +2531,11 @@ function ErrorPage({
   className
 }) {
   const shellHome = useSiteHome();
+  const inColumn = useInColumn();
   const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : shellHome ?? OCHK_IO);
   const words = WORDS[code] ?? (code >= 500 ? WORDS[500] : WORDS[404]);
   const server = code >= 500;
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { space: "none", className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { space: "none", contained: !inColumn, className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[40rem] flex-col items-start gap-6 md:col-span-7", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oca-eyebrow oca-enter", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oca-tabular", children: code }),
@@ -4415,6 +4424,112 @@ function SignMessage({
     )
   ] });
 }
+function SectionTitle({
+  title,
+  meta,
+  description,
+  action,
+  as: Tag = "h2",
+  size = "md",
+  tone = "default",
+  id,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-[40rem] flex-[1_1_16rem] flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tag,
+        {
+          id,
+          className: cn(
+            "flex scroll-mt-24 flex-wrap items-baseline gap-x-3",
+            size === "sm" ? "oca-title-sm" : "oca-title",
+            tone === "danger" && "text-destructive"
+          ),
+          children: [
+            title,
+            meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oca-tabular text-[0.875rem] font-normal tracking-normal text-muted-foreground", children: meta }) : null
+          ]
+        }
+      ),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: description }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: action }) : null
+  ] });
+}
+function ListCard({
+  as: Tag = "ul",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn("divide-y divide-border overflow-clip rounded-[1.25rem] border border-border bg-card", className), ...props });
+}
+var ChoiceSize = react.createContext("md");
+var COLUMNS = { 1: "", 2: "sm:grid-cols-2", 3: "sm:grid-cols-2 lg:grid-cols-3" };
+function ChoiceGroup({
+  value,
+  onValueChange,
+  label,
+  columns = 1,
+  size = "md",
+  disabled,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ChoiceSize.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      value: value ?? "",
+      onValueChange: (v) => onValueChange(v),
+      "aria-label": label,
+      disabled,
+      className: cn("grid", size === "sm" ? "gap-1.5" : "gap-3", COLUMNS[columns], className),
+      children
+    }
+  ) });
+}
+function ChoiceCard({
+  value,
+  title,
+  description,
+  icon,
+  disabled,
+  className
+}) {
+  const sm = react.useContext(ChoiceSize) === "sm";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadioGroupPrimitive__namespace.Item,
+    {
+      value,
+      disabled,
+      className: cn(
+        "group flex w-full min-w-0 items-start gap-3 border text-left outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "border-border bg-card data-[state=checked]:border-foreground data-[state=checked]:bg-accent data-[state=unchecked]:hover:border-oca-hairline-strong",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        sm ? "min-h-11 rounded-xl px-3.5 py-2.5" : "rounded-[1.25rem] p-5",
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "shrink-0 text-muted-foreground group-data-[state=checked]:text-oca-accent-ink [&_svg]:size-full",
+              sm ? "mt-0.5 size-4" : "size-6"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: sm ? "text-[0.9375rem] font-medium" : "oca-title-sm", children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
 function useMacKeys() {
   const [mac, setMac] = react.useState(true);
   react.useEffect(() => {
@@ -4690,7 +4805,7 @@ function download(content, filename, mime) {
   a.remove();
   setTimeout(() => URL.revokeObjectURL(url), 0);
 }
-var BAR_BUTTON = "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[0.75rem] text-oca-ink-subtle transition-colors hover:bg-white/10 hover:text-white";
+var BAR_BUTTON = "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[0.75rem] text-oca-ink-subtle transition-colors hover:bg-white/10 hover:text-white max-md:h-11 max-md:min-w-11 max-md:justify-center max-md:px-3";
 function ArtifactView({
   content,
   title,
@@ -4720,7 +4835,8 @@ function ArtifactView({
             "aria-pressed": view === v,
             onClick: () => setView(v),
             className: cn(
-              "h-7 rounded-full px-2.5 text-[0.75rem] transition-colors",
+              // The pill stays 28px; its target reaches the bar's 44.
+              "relative h-7 rounded-full px-2.5 text-[0.75rem] transition-colors before:absolute before:inset-x-0 before:top-1/2 before:h-11 before:-translate-y-1/2",
               view === v ? "bg-white/[0.12] text-white" : "text-oca-ink-subtle hover:text-white"
             ),
             children: v === "formatted" ? "Formatted" : "Raw"
@@ -5190,7 +5306,8 @@ function FilterChips({
           onClick: () => press(o.value),
           className: cn(
             "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-[0.875rem] transition-colors",
-            tight ? "h-8" : "h-9",
+            // A thumb's 44px on a phone.
+            tight ? "h-11 md:h-8" : "h-11 md:h-9",
             on ? "border-foreground bg-foreground text-background" : "border-border bg-card text-muted-foreground hover:border-oca-hairline-strong hover:text-foreground"
           ),
           children: [
@@ -5270,6 +5387,8 @@ exports.BrowserFrame = BrowserFrame;
 exports.Callout = Callout;
 exports.CardGrid = CardGrid;
 exports.ChartFrame = ChartFrame;
+exports.ChoiceCard = ChoiceCard;
+exports.ChoiceGroup = ChoiceGroup;
 exports.Closing = Closing;
 exports.CodeBlock = CodeBlock;
 exports.CodeTabs = CodeTabs;
@@ -5306,6 +5425,7 @@ exports.KeyValueList = KeyValueList;
 exports.Lead = Lead;
 exports.LegalDocument = LegalDocument;
 exports.LinkCard = LinkCard;
+exports.ListCard = ListCard;
 exports.LoadingBlock = LoadingBlock;
 exports.LockedPreview = LockedPreview;
 exports.MdxTable = MdxTable;
@@ -5334,6 +5454,7 @@ exports.SearchDialog = SearchDialog;
 exports.Section = Section;
 exports.SectionHeading = SectionHeading;
 exports.SectionIntro = SectionIntro;
+exports.SectionTitle = SectionTitle;
 exports.SignMessage = SignMessage;
 exports.SourceNote = SourceNote;
 exports.Sparkline = Sparkline;