@orangecheck/app-design 1.2.3 → 1.4.0

package/dist/mdx.mjs

@@ -1,5 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { forwardRef, createContext, useState, useMemo, useRef, useId, useEffect, useCallback, useSyncExternalStore, Children, isValidElement } from 'react';
+import { forwardRef, createContext, useState, useMemo, useRef, useId, useEffect, useContext, useCallback, useSyncExternalStore, Children, isValidElement } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -9,6 +9,7 @@ import { cva } from 'class-variance-authority';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import 'sonner';
 import Link from 'next/link';
+import { useRouter } from 'next/compat/router';
 
 // src/code/highlight.ts
 var TOKEN_CLASS = {
@@ -541,6 +542,11 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     )
   ] });
 }
+function sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = createContext(initial));
+}
 function Spinner({ className, label }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -784,11 +790,13 @@ function forClipboard(text, lang) {
   if (!lines.some((l) => l.startsWith("$ "))) return text;
   return lines.filter((l) => l.startsWith("$ ")).map((l) => l.slice(2)).join("\n");
 }
-function linesFromDom(pre) {
+function linesFromDom(pre, newline) {
   if (!pre) return null;
   const lines = pre.querySelectorAll("[data-line]");
   if (lines.length === 0) return pre.textContent ?? "";
-  return Array.from(lines).filter((l) => l.getAttribute("data-diff") !== "remove").map((l) => l.textContent ?? "").join("\n");
+  const text = Array.from(lines).filter((l) => l.getAttribute("data-diff") !== "remove").map((l) => l.textContent ?? "").join("\n");
+  return newline ? `${text}
+` : text;
 }
 function prepare(code, lang, marks, diff) {
   const d = diff ? readDiff(code) : null;
@@ -797,7 +805,8 @@ function prepare(code, lang, marks, diff) {
   const kept = d ? src.split("\n").filter((_, i) => d.diff.get(i + 1) !== "remove") : null;
   return {
     html: linesToHtml(lines, { highlight: parseLineRanges(marks), diff: d?.diff }),
-    copy: kept ? kept.join("\n") : src,
+    // Byte for byte, the final newline too: a hash printed beside the code must match a copy of it.
+    copy: kept ? kept.join("\n") + (/\n$/.test(code) ? "\n" : "") : code,
     lines: lines.length,
     diff: !!d
   };
@@ -862,6 +871,7 @@ function CodeBlock({
   code,
   html,
   children,
+  trailingNewline = false,
   lang,
   caption,
   copy = true,
@@ -882,7 +892,7 @@ function CodeBlock({
   );
   const markup = prepared?.html ?? html;
   const lines = prepared?.lines ?? (html !== void 0 ? html.split("\n").length : code?.split("\n").length ?? 0);
-  const read = () => forClipboard(prepared?.copy ?? linesFromDom(preRef.current) ?? code ?? "", lang);
+  const read = () => forClipboard(prepared?.copy ?? linesFromDom(preRef.current, trailingNewline) ?? code ?? "", lang);
   return /* @__PURE__ */ jsxs("figure", { className: cn(FRAME, className), children: [
     /* @__PURE__ */ jsxs("figcaption", { className: "flex h-11 items-center justify-between gap-3 border-b border-[var(--oca-code-line)] pl-5 pr-2", children: [
       /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-oca-ink-subtle", children: caption ?? languageName(lang) ?? "Code" }),
@@ -1154,6 +1164,7 @@ function MdxTable({ className, ...props }) {
     }
   ) }) });
 }
+var said = (n) => n !== void 0 && n !== null && n !== false && n !== "";
 function ApiTable({
   rows,
   caption,
@@ -1161,43 +1172,42 @@ function ApiTable({
   className
 }) {
   const hasDefault = rows.some((r) => r.default !== void 0);
-  const marks = (r) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    r.required ? /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
-    r.deprecated ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
-    r.status ? /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) : null
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose my-6", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-border bg-card max-sm:hidden", children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem]", children: [
-      caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
-        hasDefault ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
-        /* @__PURE__ */ jsx("th", { scope: "row", className: "px-4 py-3 text-left font-normal", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1", children: [
-          /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-          marks(r)
-        ] }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.type ?? "\u2014" }),
-        hasDefault ? /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-[0.8125rem] text-muted-foreground", children: r.default ?? "\u2014" }) : null,
-        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 leading-relaxed text-muted-foreground", children: r.description })
-      ] }, r.name)) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx("ul", { "aria-label": caption, className: "divide-y divide-border rounded-2xl border border-border bg-card sm:hidden", children: rows.map((r) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
-      /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.875rem] text-foreground", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
-        r.type ? /* @__PURE__ */ jsx("code", { className: "break-all font-mono text-[0.8125rem] text-muted-foreground", children: r.type }) : null
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: marks(r) }),
-      r.description ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-relaxed text-muted-foreground", children: r.description }) : null,
-      r.default !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[0.8125rem] text-muted-foreground", children: [
-        "Default ",
-        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: r.default })
-      ] }) : null
-    ] }, r.name)) })
-  ] });
+  const hasDescription = rows.some((r) => said(r.description));
+  const hasSource = rows.some((r) => said(r.source));
+  const cell = "px-4 py-3 max-sm:p-0";
+  return /* @__PURE__ */ jsx("div", { className: cn("not-prose my-6 overflow-hidden rounded-2xl border border-border bg-card", className), children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.875rem] max-sm:block", children: [
+    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx("thead", { className: "max-sm:sr-only", children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-oca-hairline-strong bg-oca-table-head text-[0.8125rem]", children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: nameHeader }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Type" }),
+      hasDefault ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Default" }) : null,
+      hasDescription ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Description" }) : null,
+      hasSource ? /* @__PURE__ */ jsx("th", { scope: "col", className: "px-4 py-2.5 font-medium", children: "Defined in" }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border max-sm:block", children: rows.map((r) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        id: r.id,
+        className: "scroll-mt-28 align-top target:bg-muted max-sm:flex max-sm:flex-col max-sm:gap-1.5 max-sm:px-4 max-sm:py-3.5",
+        children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", className: cn(cell, "text-left font-normal"), children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-1 max-sm:flex-row max-sm:flex-wrap max-sm:items-baseline max-sm:gap-x-2", children: [
+            /* @__PURE__ */ jsx("code", { className: cn("font-mono text-[0.8125rem] text-foreground max-sm:text-[0.875rem]", r.deprecated && "line-through decoration-oca-subtle"), children: r.name }),
+            r.required ? /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] text-oca-accent-ink", children: "Required" }) : null,
+            r.deprecated ? /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Deprecated" }) : null,
+            r.status ? /* @__PURE__ */ jsx(StatusBadge, { status: r.status }) : null
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: cn(cell, "font-mono text-[0.8125rem] text-muted-foreground max-sm:break-all", !said(r.type) && "max-sm:hidden"), children: r.type ?? "\u2014" }),
+          hasDefault ? /* @__PURE__ */ jsxs("td", { className: cn(cell, "font-mono text-[0.8125rem] text-muted-foreground max-sm:order-last", r.default === void 0 && "max-sm:hidden"), children: [
+            /* @__PURE__ */ jsx("span", { className: "font-sans sm:hidden", children: "Default " }),
+            r.default ?? "\u2014"
+          ] }) : null,
+          hasDescription ? /* @__PURE__ */ jsx("td", { className: cn(cell, "leading-relaxed text-muted-foreground", !said(r.description) && "max-sm:hidden"), children: r.description }) : null,
+          hasSource ? /* @__PURE__ */ jsx("td", { className: cn(cell, "text-[0.8125rem] text-muted-foreground max-sm:order-last max-sm:break-all", !said(r.source) && "max-sm:hidden"), children: r.source }) : null
+        ]
+      },
+      r.id ?? r.name
+    )) })
+  ] }) }) });
 }
 function useDarkMode() {
   const [dark, setDark] = useState(false);
@@ -1259,17 +1269,35 @@ function mermaidTheme(el) {
     sequenceNumberColor: card
   };
 }
+var FIT = 4 / 3;
 function naturalSize(svg) {
   const w = svg.match(/viewBox="[\d.-]+ [\d.-]+ ([\d.]+) [\d.]+"/)?.[1];
-  if (!w) return svg;
-  return svg.replace(/<svg([^>]*?)\swidth="100%"/, `<svg$1 width="${Math.ceil(Number(w))}"`).replace(/max-width:\s*[\d.]+px;?/, "");
+  if (!w) return { svg, width: null };
+  const width = Math.ceil(Number(w));
+  return {
+    svg: svg.replace(/<svg([^>]*?)\swidth="100%"/, `<svg$1 width="${width}"`).replace(/max-width:\s*[\d.]+px;?/, ""),
+    width
+  };
+}
+function useInnerWidth(ref, padding) {
+  const [width, setWidth] = useState(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth - padding));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref, padding]);
+  return width;
 }
 function Diagram({ chart, caption, load, className }) {
   const ref = useRef(null);
   const dark = useDarkMode();
   const raw = useId();
-  const [svg, setSvg] = useState(null);
+  const [drawn, setDrawn] = useState(null);
   const [failed, setFailed] = useState(false);
+  const room = useInnerWidth(ref, 48);
+  const fits = drawn?.width != null && room != null && drawn.width <= room * FIT;
   useEffect(() => {
     let live = true;
     const el = ref.current;
@@ -1279,9 +1307,9 @@ function Diagram({ chart, caption, load, className }) {
         const mod = await load();
         const mermaid = "default" in mod ? mod.default : mod;
         mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "base", themeVariables: mermaidTheme(el) });
-        const { svg: drawn } = await mermaid.render(`oca-diagram-${raw.replace(/[^a-zA-Z0-9]/g, "")}-${dark ? "d" : "l"}`, chart);
+        const { svg } = await mermaid.render(`oca-diagram-${raw.replace(/[^a-zA-Z0-9]/g, "")}-${dark ? "d" : "l"}`, chart);
         if (live) {
-          setSvg(naturalSize(drawn));
+          setDrawn(naturalSize(svg));
           setFailed(false);
         }
       } catch {
@@ -1294,13 +1322,17 @@ function Diagram({ chart, caption, load, className }) {
   }, [chart, dark, load, raw]);
   if (failed) return /* @__PURE__ */ jsx(CodeBlock, { code: chart, caption: "Diagram (shown as its source)", className: cn("my-6", className) });
   return /* @__PURE__ */ jsxs("figure", { ref, className: cn("not-prose my-6 overflow-hidden rounded-[1.25rem] border border-border bg-card", className), children: [
-    svg ? /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsx(
+    drawn ? /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--card)", children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex w-max min-w-full justify-center p-6 [&_svg]:h-auto [&_svg]:max-w-none",
+        "data-fit": fits ? "" : void 0,
+        className: cn(
+          "flex justify-center p-6 [&_svg]:h-auto",
+          fits ? "w-full [&_svg]:max-w-full" : "w-max min-w-full [&_svg]:max-w-none"
+        ),
         role: "img",
         "aria-label": typeof caption === "string" ? caption : "Diagram",
-        dangerouslySetInnerHTML: { __html: svg }
+        dangerouslySetInnerHTML: { __html: drawn.svg }
       }
     ) }) : /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Drawing the diagram", className: "p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full rounded-xl" }) }),
     caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t border-border px-5 py-3 text-[0.8125rem] text-muted-foreground", children: caption }) : null
@@ -1470,6 +1502,10 @@ function protocolSite(slug) {
   { href: `${OCHK_IO}/trust`, label: "Trust" },
   { href: `${OCHK_IO}/about`, label: "About" }
 ];
+var InDocsContext = sharedContext("in-docs", false);
+function useInDocs() {
+  return useContext(InDocsContext);
+}
 var CARD = "group relative flex h-full flex-col rounded-[1.25rem] border border-border bg-card p-6 transition-colors hover:border-oca-hairline-strong md:p-7 has-[a:focus-visible]:ring-2 has-[a:focus-visible]:ring-ring has-[a:focus-visible]:ring-offset-2 has-[a:focus-visible]:ring-offset-background";
 var STRETCH = 'outline-none after:absolute after:inset-0 after:rounded-[1.25rem] after:content-[""]';
 var pad = (n) => String(n + 1).padStart(2, "0");
@@ -1478,6 +1514,7 @@ function ProtocolGrid({
   link = "page",
   className
 }) {
+  const inDocs = useInDocs();
   return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 md:gap-5", className), children: protocols.map((slug) => {
     const p = protocolSite(slug);
     const i = PROTOCOL_ORDER.indexOf(slug);
@@ -1490,7 +1527,7 @@ function ProtocolGrid({
         ] }),
         p.status !== "live" ? /* @__PURE__ */ jsx(StatusBadge, { status: p.status }) : null
       ] }),
-      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("h3", { className: "oca-display-3", children: link === "docs" && inDocs ? /* @__PURE__ */ jsx(Link, { href: `/${p.slug}`, className: STRETCH, children: p.label }) : /* @__PURE__ */ jsx(
         "a",
         {
           href: link === "tool" ? p.toolHref : link === "docs" ? `${DOCS_HREF}/${p.slug}` : p.pageHref,
@@ -1521,14 +1558,61 @@ function ProtocolGrid({
     ] }) }, slug);
   }) });
 }
-function SpecCard({
-  protocol: protocol2,
-  version,
-  license,
-  vectors,
-  size = "md",
+var LINK = "text-foreground underline decoration-foreground/35 underline-offset-4 transition-colors hover:decoration-foreground";
+var SCHEME = /^[a-z][a-z\d+.-]*:/i;
+function useResolved(href) {
+  const router = useRouter();
+  if (!router || !href || href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || SCHEME.test(href)) return href;
+  const here = router.asPath.split(/[?#]/)[0] || "/";
+  const url = new URL(href, `https://page.invalid${here}`);
+  return url.pathname + url.search + url.hash;
+}
+function TextLink({
+  href: written,
+  children,
+  external,
   className
 }) {
+  const href = useResolved(written);
+  const internal = href.startsWith("/") && !href.startsWith("/api/") && !href.startsWith("/.well-known/");
+  const offsite = external ?? /^https?:\/\//.test(href);
+  if (internal && !offsite) {
+    return /* @__PURE__ */ jsx(Link, { href, className: cn(LINK, className), children });
+  }
+  return /* @__PURE__ */ jsxs("a", { href, className: cn(LINK, className), ...offsite ? { target: "_blank", rel: "noreferrer" } : {}, children: [
+    children,
+    offsite ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+  ] });
+}
+var SPEC_FILE = {
+  spec: {
+    file: "SPEC.md",
+    title: "Normative source",
+    note: "This page is a human-readable summary. The authoritative copy lives in the spec repo. If the two ever drift, the repo wins."
+  },
+  security: {
+    file: "SECURITY.md",
+    title: "Normative threat model",
+    note: "This page is the short form. The authoritative, numbered threat model lives in the spec repo."
+  },
+  rationale: {
+    file: "WHY.md",
+    title: "Design rationale",
+    note: "This page is the short version. The full rationale and the rejected-design log live in the spec repo."
+  }
+};
+function SpecCard(props) {
+  return props.repo !== void 0 ? /* @__PURE__ */ jsx(SpecFileNote, { ...props }) : /* @__PURE__ */ jsx(ProtocolSpecCard, { ...props });
+}
+function SpecFileNote({ repo, file, kind = "spec", version, note, className }) {
+  const d = SPEC_FILE[kind];
+  const f = file ?? d.file;
+  return /* @__PURE__ */ jsxs(Callout, { title: version ? `${d.title} \xB7 ${version}` : d.title, className, children: [
+    /* @__PURE__ */ jsx("p", { children: note ?? d.note }),
+    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(TextLink, { href: `https://github.com/orangecheck/${repo}/blob/main/${f}`, className: "break-all font-mono text-[0.875rem]", children: `${repo}/${f}` }) })
+  ] });
+}
+function ProtocolSpecCard({ protocol: protocol2, version, license, vectors, size = "md", className }) {
   const p = protocolSite(protocol2);
   const repo = `oc-${p.slug}-protocol`;
   const facts = [
@@ -1575,23 +1659,6 @@ function SpecCard({
     ] }) }) })
   ] });
 }
-var LINK = "text-foreground underline decoration-foreground/35 underline-offset-4 transition-colors hover:decoration-foreground";
-function TextLink({
-  href,
-  children,
-  external,
-  className
-}) {
-  const internal = href.startsWith("/") && !href.startsWith("/api/") && !href.startsWith("/.well-known/");
-  const offsite = external ?? /^https?:\/\//.test(href);
-  if (internal && !offsite) {
-    return /* @__PURE__ */ jsx(Link, { href, className: cn(LINK, className), children });
-  }
-  return /* @__PURE__ */ jsxs("a", { href, className: cn(LINK, className), ...offsite ? { target: "_blank", rel: "noreferrer" } : {}, children: [
-    children,
-    offsite ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
-  ] });
-}
 function createMdxComponents({ mermaid } = {}) {
   function Pre(props) {
     if (props["data-oca-code"] !== void 0) {
@@ -1603,6 +1670,7 @@ function createMdxComponents({ mermaid } = {}) {
           caption: props["data-title"],
           diff: props["data-diff"] !== void 0,
           lineNumbers: props["data-line-numbers"] !== void 0,
+          trailingNewline: props["data-eol"] !== void 0,
           className: "my-6"
         }
       );
@@ -1629,6 +1697,9 @@ function createMdxComponents({ mermaid } = {}) {
   const heading = (as) => function Heading(props) {
     return /* @__PURE__ */ jsx(DocsHeading, { as, ...props });
   };
+  const minor = (Tag) => function Minor({ className, ...props }) {
+    return /* @__PURE__ */ jsx(Tag, { className: cn("mb-2 mt-6 scroll-mt-28 text-[0.9375rem] font-medium leading-snug text-foreground", className), ...props });
+  };
   return {
     h1: heading("h1"),
     h2: heading("h2"),
@@ -1637,11 +1708,15 @@ function createMdxComponents({ mermaid } = {}) {
     p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("my-4 text-[1rem] leading-[1.75] text-muted-foreground md:text-[1.0625rem]", className), ...props }),
     a: A,
     strong: (props) => /* @__PURE__ */ jsx("strong", { className: "font-medium text-foreground", ...props }),
+    h5: minor("h5"),
+    h6: minor("h6"),
     ul: ({ className, ...props }) => /* @__PURE__ */ jsx(
       "ul",
       {
         className: cn(
           "my-4 list-disc space-y-1.5 pl-5 text-[1rem] leading-[1.7] text-muted-foreground marker:text-oca-subtle md:text-[1.0625rem]",
+          // A GitHub task list: the box replaces the bullet.
+          className?.includes("contains-task-list") && "list-none pl-0",
           className
         ),
         ...props
@@ -1657,7 +1732,26 @@ function createMdxComponents({ mermaid } = {}) {
         ...props
       }
     ),
-    li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("pl-1 [&>p]:my-1 [&>ul]:my-1.5 [&>ol]:my-1.5", className), ...props }),
+    li: ({ className, ...props }) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: cn(
+          "pl-1 [&>p]:my-1 [&>ul]:my-1.5 [&>ol]:my-1.5",
+          // A wrapped task starts under its text, not under the box.
+          className?.includes("task-list-item") && "pl-6 -indent-6",
+          className
+        ),
+        ...props
+      }
+    ),
+    input: (props) => props.type === "checkbox" ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        className: cn("mr-2 size-4 translate-y-[2px] align-baseline accent-foreground", props.className),
+        "aria-label": props.checked ? "Done" : "To do"
+      }
+    ) : /* @__PURE__ */ jsx("input", { ...props }),
     blockquote: ({ children }) => /* @__PURE__ */ jsx(Callout, { children }),
     hr: () => /* @__PURE__ */ jsx("hr", { className: "my-10 border-border" }),
     table: MdxTable,