@orangecheck/app-design 1.6.2 → 1.8.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;
@@ -469,9 +469,10 @@ declare function EmptyState({ title, children, action, icon, className, }: {
     className?: string;
 }): react.JSX.Element;
 type NoticeTone = 'neutral' | 'brand' | 'danger' | 'info' | 'success' | 'warning';
-declare function Notice({ tone, title, children, action, role, className, }: {
+declare function Notice({ tone, title, children, action, icon, role, className, }: {
     tone?: NoticeTone;
     title?: ReactNode;
+    icon?: ReactNode;
     children?: ReactNode;
     action?: ReactNode;
     role?: 'alert' | 'status' | 'note';
@@ -573,7 +574,9 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
     style?: CSSProperties;
 }): react.JSX.Element;
 
-declare const SIZES: {
+declare const SIZES$1: {
+    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]";
@@ -583,7 +586,7 @@ declare function monogramGround(seed: string): number;
 declare function Monogram({ name, seed, size, className, style, }: {
     name: string;
     seed?: string;
-    size?: keyof typeof SIZES;
+    size?: keyof typeof SIZES$1;
     className?: string;
     style?: CSSProperties;
 }): react.JSX.Element;
@@ -843,6 +846,70 @@ 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 ListRow({ title, meta, description, leading, trailing, actions, revealActions, href, onSelect, current, unread, variant, as: Tag, className, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    actions?: ReactNode;
+    revealActions?: 'always' | 'hover';
+    href?: string;
+    onSelect?: () => void;
+    current?: boolean;
+    unread?: boolean;
+    variant?: 'card' | 'pane';
+    as?: 'li' | 'div';
+    className?: string;
+}): 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;
+
+declare const SIZES: {
+    readonly '2xs': "size-7 text-[0.6875rem] [&_svg]:size-3.5";
+    readonly xs: "size-8 text-[0.75rem] [&_svg]:size-4";
+    readonly sm: "size-9 text-[0.8125rem] [&_svg]:size-4";
+    readonly md: "size-11 text-[0.9375rem] [&_svg]:size-5";
+    readonly lg: "size-14 text-[1.1875rem] [&_svg]:size-6";
+};
+declare function Avatar({ seed, name, src, size, className, }: {
+    seed: string;
+    name?: string | null;
+    src?: string | null;
+    size?: keyof typeof SIZES;
+    className?: string;
+}): react.JSX.Element;
+
 interface SearchResult {
     id: string;
     href?: string;
@@ -882,4 +949,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, Avatar, 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, ListRow, 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;
@@ -469,9 +469,10 @@ declare function EmptyState({ title, children, action, icon, className, }: {
     className?: string;
 }): react.JSX.Element;
 type NoticeTone = 'neutral' | 'brand' | 'danger' | 'info' | 'success' | 'warning';
-declare function Notice({ tone, title, children, action, role, className, }: {
+declare function Notice({ tone, title, children, action, icon, role, className, }: {
     tone?: NoticeTone;
     title?: ReactNode;
+    icon?: ReactNode;
     children?: ReactNode;
     action?: ReactNode;
     role?: 'alert' | 'status' | 'note';
@@ -573,7 +574,9 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
     style?: CSSProperties;
 }): react.JSX.Element;
 
-declare const SIZES: {
+declare const SIZES$1: {
+    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]";
@@ -583,7 +586,7 @@ declare function monogramGround(seed: string): number;
 declare function Monogram({ name, seed, size, className, style, }: {
     name: string;
     seed?: string;
-    size?: keyof typeof SIZES;
+    size?: keyof typeof SIZES$1;
     className?: string;
     style?: CSSProperties;
 }): react.JSX.Element;
@@ -843,6 +846,70 @@ 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 ListRow({ title, meta, description, leading, trailing, actions, revealActions, href, onSelect, current, unread, variant, as: Tag, className, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    actions?: ReactNode;
+    revealActions?: 'always' | 'hover';
+    href?: string;
+    onSelect?: () => void;
+    current?: boolean;
+    unread?: boolean;
+    variant?: 'card' | 'pane';
+    as?: 'li' | 'div';
+    className?: string;
+}): 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;
+
+declare const SIZES: {
+    readonly '2xs': "size-7 text-[0.6875rem] [&_svg]:size-3.5";
+    readonly xs: "size-8 text-[0.75rem] [&_svg]:size-4";
+    readonly sm: "size-9 text-[0.8125rem] [&_svg]:size-4";
+    readonly md: "size-11 text-[0.9375rem] [&_svg]:size-5";
+    readonly lg: "size-14 text-[1.1875rem] [&_svg]:size-6";
+};
+declare function Avatar({ seed, name, src, size, className, }: {
+    seed: string;
+    name?: string | null;
+    src?: string | null;
+    size?: keyof typeof SIZES;
+    className?: string;
+}): react.JSX.Element;
+
 interface SearchResult {
     id: string;
     href?: string;
@@ -882,4 +949,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, Avatar, 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, ListRow, 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, jsx40) {
   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 (jsx40 && 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 (jsx40 && 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 (jsx40 && tagDepth > 0 && braceInTag > 0) {
       if (src[i] === "{") braceInTag++;
       else if (src[i] === "}") braceInTag--;
     }
@@ -1513,6 +1513,7 @@ function Notice({
   title,
   children,
   action,
+  icon,
   role,
   className
 }) {
@@ -1529,7 +1530,17 @@ function Notice({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 gap-3", children: [
-          kind !== "neutral" ? /* @__PURE__ */ jsxRuntime.jsx(
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "mt-0.5 shrink-0 [&_svg]:size-[1.125rem]",
+                kind === "brand" ? "text-oca-accent-ink" : kind === "danger" ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: icon
+            }
+          ) : kind !== "neutral" ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               "aria-hidden": true,
@@ -1824,7 +1835,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 +2263,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 +2391,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 +2428,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 +2511,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 +2542,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 }),
@@ -2796,7 +2816,8 @@ react.forwardRef(function DropdownMenuItem2({ className, destructive, ...props }
     {
       ref,
       className: cn(
-        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none",
+        // A thumb's 44px on a phone.
+        "flex h-10 cursor-default select-none items-center gap-2.5 rounded-xl px-3 text-[0.9375rem] outline-none max-md:h-11",
         "data-[highlighted]:bg-accent data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:text-muted-foreground",
         destructive && "text-destructive [&_svg]:text-destructive",
         className
@@ -4415,6 +4436,220 @@ 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 ROW_LOOK = {
+  // In a ListCard: full width, the card's hairlines between rows.
+  card: { box: "px-5", hover: "hover:bg-accent/60", current: "bg-accent" },
+  // In a pane's list (threads, contacts): rounded, lifted when current.
+  pane: { box: "rounded-xl px-3", hover: "hover:bg-accent", current: "bg-card shadow-sm ring-1 ring-border" }
+};
+function ListRow({
+  title,
+  meta,
+  description,
+  leading,
+  trailing,
+  actions,
+  revealActions = "always",
+  href,
+  onSelect,
+  current = false,
+  unread = false,
+  variant = "card",
+  as: Tag = "li",
+  className
+}) {
+  const tight = useDensity() === "compact";
+  const look = ROW_LOOK[variant];
+  const interactive = href !== void 0 || onSelect !== void 0;
+  const cls = cn(
+    "flex min-h-11 w-full min-w-0 items-center gap-3 text-left outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+    look.box,
+    variant === "pane" ? "py-2" : tight ? "py-3" : "py-4",
+    interactive && !current && look.hover,
+    current && look.current,
+    actions && "pr-14"
+  );
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0", children: leading }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-[0.9375rem] text-foreground", unread ? "font-semibold" : "font-medium"), children: title }),
+        meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oca-tabular shrink-0 text-[0.8125rem] text-muted-foreground", children: meta }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-[0.875rem]", unread ? "text-foreground" : "text-muted-foreground"), children: description }) : null
+    ] }),
+    trailing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center gap-2", children: trailing }) : null
+  ] });
+  const aria = current ? { "aria-current": "true" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag, { className: cn("group/row relative", className), children: [
+    href !== void 0 ? href.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className: cls, ...aria, children: body }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: cls, ...aria, children: body }) : onSelect ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onSelect, className: cls, ...aria, children: body }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: body }),
+    actions ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute right-2 top-1/2 flex -translate-y-1/2 items-center",
+          revealActions === "hover" && "transition-opacity md:opacity-0 md:focus-within:opacity-100 md:group-hover/row:opacity-100 md:has-[[data-state=open]]:opacity-100"
+        ),
+        children: actions
+      }
+    ) : null
+  ] });
+}
+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
+        ] })
+      ]
+    }
+  );
+}
+var SIZES2 = {
+  "2xs": "size-7 text-[0.6875rem] [&_svg]:size-3.5",
+  xs: "size-8 text-[0.75rem] [&_svg]:size-4",
+  sm: "size-9 text-[0.8125rem] [&_svg]:size-4",
+  md: "size-11 text-[0.9375rem] [&_svg]:size-5",
+  lg: "size-14 text-[1.1875rem] [&_svg]:size-6"
+};
+function personInitials(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((w) => w.match(/[\p{L}\p{N}]/u)?.[0] ?? "").join("").toLocaleUpperCase();
+}
+function avatarHue(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0) % 360;
+}
+function Avatar({
+  seed,
+  name,
+  src,
+  size = "sm",
+  className
+}) {
+  const [failed, setFailed] = react.useState(null);
+  const box = cn("inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full", SIZES2[size], className);
+  if (src && failed !== src) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", "aria-hidden": true, className: cn(box, "object-cover"), onError: () => setFailed(src) })
+    );
+  }
+  const initials = name ? personInitials(name) : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(box, "font-medium leading-none"),
+      style: {
+        "--oca-avatar-h": avatarHue(seed),
+        backgroundColor: "hsl(var(--oca-avatar-h) 60% var(--oca-avatar-bg-l))",
+        color: "hsl(var(--oca-avatar-h) 45% var(--oca-avatar-fg-l))"
+      },
+      children: initials || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRound, {})
+    }
+  );
+}
 function useMacKeys() {
   const [mac, setMac] = react.useState(true);
   react.useEffect(() => {
@@ -4690,7 +4925,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 +4955,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 +5426,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: [
@@ -5263,6 +5500,7 @@ exports.ApiTable = ApiTable;
 exports.AppCard = AppCard;
 exports.AppGrid = AppGrid;
 exports.ArtifactView = ArtifactView;
+exports.Avatar = Avatar;
 exports.BlockCountdown = BlockCountdown;
 exports.BlockHeight = BlockHeight;
 exports.Breadcrumbs = Breadcrumbs;
@@ -5270,6 +5508,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 +5546,8 @@ exports.KeyValueList = KeyValueList;
 exports.Lead = Lead;
 exports.LegalDocument = LegalDocument;
 exports.LinkCard = LinkCard;
+exports.ListCard = ListCard;
+exports.ListRow = ListRow;
 exports.LoadingBlock = LoadingBlock;
 exports.LockedPreview = LockedPreview;
 exports.MdxTable = MdxTable;
@@ -5334,6 +5576,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;