@orangecheck/app-design 1.6.1 → 1.7.0

package/dist/components.mjs

@@ -535,7 +535,7 @@ var JS_TAG = /<\/?(?=[A-Za-z])/y;
 var JS_TAG_NAME = /[A-Za-z][\w$.:-]*/y;
 var JS_PUNCT = /=>|\.\.\.|[{}()[\];,.<>=+\-*/%!?:&|^~#]/y;
 var JSX_BEFORE = /* @__PURE__ */ new Set(["(", ",", "=", "?", ":", "{", "[", ";", ">", "&&", "||", "=>", "return"]);
-function scanJs(src, emit, jsx38) {
+function scanJs(src, emit, jsx39) {
   let i = 0;
   let prev = "";
   let tagDepth = 0;
@@ -561,7 +561,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);
@@ -573,7 +573,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);
@@ -593,7 +593,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--;
     }
@@ -942,7 +942,8 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
         onScroll: measure,
         tabIndex: edges.left || edges.right ? 0 : void 0,
         className: cn(
-          "overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          // Positioned, so sr-only text deep in a wide row scrolls and clips with the row.
+          "relative overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
           innerClassName
         ),
         children
@@ -1788,7 +1789,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,
@@ -2216,6 +2217,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]"
@@ -2341,6 +2345,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,
@@ -2377,7 +2382,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"
@@ -2460,6 +2465,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 useContext(InColumnContext);
+}
 var SiteHomeContext = sharedContext("site-home", void 0);
 function useSiteHome() {
   return useContext(SiteHomeContext);
@@ -2487,10 +2496,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__ */ jsx(Section, { space: "none", className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
+  return /* @__PURE__ */ jsx(Section, { space: "none", contained: !inColumn, className: cn("flex min-h-[min(40rem,72dvh)] items-center py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex max-w-[40rem] flex-col items-start gap-6 md:col-span-7", children: [
       /* @__PURE__ */ jsxs("p", { className: "oca-eyebrow oca-enter", children: [
         /* @__PURE__ */ jsx("span", { className: "oca-tabular", children: code }),
@@ -2897,7 +2907,7 @@ function Panel({
   const [open, setOpen] = useState(false);
   const body = (expanded) => typeof children === "function" ? children(expanded) : children;
   const head = (expanded) => /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-[min(100%,12rem)] flex-1 basis-0 flex-col gap-1", children: [
       expanded ? /* @__PURE__ */ jsx(DialogTitle, { className: "text-[1.0625rem] font-medium leading-snug", children: title }) : /* @__PURE__ */ jsx("h3", { className: "text-[1rem] font-medium leading-snug", children: title }),
       description ? expanded ? /* @__PURE__ */ jsx(DialogDescription, { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : null
     ] }),
@@ -2926,7 +2936,7 @@ function Panel({
         className: "flex h-[min(92dvh,56rem)] w-[min(96vw,80rem)] max-w-none flex-col gap-4 overflow-y-auto",
         children: [
           head(true),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1", children: open ? body(true) : null }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: open ? body(true) : null }),
           source ? /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-3", children: source }) : null
         ]
       }
@@ -4379,6 +4389,112 @@ function SignMessage({
     )
   ] });
 }
+function SectionTitle({
+  title,
+  meta,
+  description,
+  action,
+  as: Tag = "h2",
+  size = "md",
+  tone = "default",
+  id,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-[40rem] flex-[1_1_16rem] flex-col gap-1", children: [
+      /* @__PURE__ */ 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__ */ jsx("span", { className: "oca-tabular text-[0.875rem] font-normal tracking-normal text-muted-foreground", children: meta }) : null
+          ]
+        }
+      ),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-[0.9375rem] leading-relaxed text-muted-foreground", children: description }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: action }) : null
+  ] });
+}
+function ListCard({
+  as: Tag = "ul",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tag, { className: cn("divide-y divide-border overflow-clip rounded-[1.25rem] border border-border bg-card", className), ...props });
+}
+var ChoiceSize = 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__ */ jsx(ChoiceSize.Provider, { value: size, children: /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.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 = useContext(ChoiceSize) === "sm";
+  return /* @__PURE__ */ jsxs(
+    RadioGroupPrimitive.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__ */ 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__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: sm ? "text-[0.9375rem] font-medium" : "oca-title-sm", children: title }),
+          description ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
 function useMacKeys() {
   const [mac, setMac] = useState(true);
   useEffect(() => {
@@ -4654,7 +4770,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,
@@ -4684,7 +4800,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"
@@ -5154,7 +5271,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: [
@@ -5220,6 +5338,6 @@ function ToolGrid({
   );
 }
 
-export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, ChartFrame, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, HudCard, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, LoadingBlock, LockedPreview, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, Panel, PhoneFrame, PlanCard, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SignMessage, SourceNote, Sparkline, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, chartColor, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
+export { Accent, ActivityList, AnchorStatus, ApiTable, AppCard, AppGrid, ArtifactView, BlockCountdown, BlockHeight, Breadcrumbs, BrowserFrame, Callout, CardGrid, ChartFrame, ChoiceCard, ChoiceGroup, Closing, CodeBlock, CodeTabs, CommandDialog, ComparisonTable, Container, CopyButton, CountdownRing, DataTable, Diagram, Display, DocHeader, DocLayout, DocsHeading, DocsPager, DropZone, EmptyLine, EmptyState, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, FactRows, Faq, FilterChips, FloatChip, Footnote, FormSection, HashChip, HudCard, InstallTabs, KeyValueList, Lead, LegalDocument, LinkCard, ListCard, LoadingBlock, LockedPreview, MdxTable, Meter, Monogram, Notice, OnThisPage, PackageCard, PageHeader, PageHero, Panel, PhoneFrame, PlanCard, ProgressSteps, ProofStrip, Prose, ProtocolGrid, ProtocolHero, ProtocolNav, Reveal, Sats, SatsFigure, ScrollStory, SearchButton, SearchDialog, Section, SectionHeading, SectionIntro, SectionTitle, SignMessage, SourceNote, Sparkline, SpecCard, SplitBar, StatCard, StatGrid, StateBadge, Step, StepGrid, Steps, TextLink, Ticker, ToolGrid, TruthTable, UsdApprox, VerifyBox, VerifyReport, chartColor, createStateBadge, languageName, monogramGround, monogramLetter, satsText, sectionVariants, useActiveHeading, useCopy, useHeadings, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map