@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/docs/DocsLayout.tsx

@@ -0,0 +1,197 @@
+"use client";
+import { useEffect, useState, type ReactNode } from "react";
+
+/**
+ * Docs shell: a sticky, scroll-spied sidebar on desktop and a native
+ * <details> disclosure on mobile — the sidebar never just vanishes
+ * (canon §17). One nav model, rendered twice. Presentation-generic: nav
+ * groups, hero, and content arrive as props/children; nothing app-specific
+ * is baked in. Structural CSS (grid reveal, sticky offset, disclosure
+ * marker, scroll margins) lives in styles/docs.css; consumers with fixed
+ * chrome set --docs-nav-h on the shell or an ancestor.
+ */
+
+export interface DocsNavItem {
+  /** id of the section element this entry links to (`#id`) and scroll-spies. */
+  id: string;
+  label: ReactNode;
+  /**
+   * A page link instead of an in-page section: the entry is not spied and is
+   * lit only when `current`. Lets one sidebar span a docs site's pages.
+   */
+  href?: string;
+  current?: boolean;
+}
+
+export interface DocsNavGroup {
+  label: ReactNode;
+  items: DocsNavItem[];
+}
+
+export interface DocsHero {
+  kicker?: ReactNode;
+  title: ReactNode;
+  lede?: ReactNode;
+  actions?: ReactNode;
+}
+
+/**
+ * Scroll-spy: the last of `ids` whose element's top has passed a line a
+ * quarter down the viewport. Position rather than intersection, so a section
+ * taller than the viewport stays active the whole way through it.
+ */
+function useSpy(ids: string[], fallback: string): string {
+  const [active, setActive] = useState(fallback);
+  const key = ids.join("\n");
+  useEffect(() => {
+    const list = key ? key.split("\n") : [];
+    let frame = 0;
+    const read = () => {
+      frame = 0;
+      const line = window.innerHeight * 0.25;
+      let next = list[0] ?? "";
+      for (const id of list) {
+        const el = document.getElementById(id);
+        if (el && el.getBoundingClientRect().top <= line) next = id;
+      }
+      setActive(next);
+    };
+    const onScroll = () => {
+      if (frame === 0) frame = requestAnimationFrame(read);
+    };
+    read();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [key]);
+  return active;
+}
+
+export function DocsLayout({
+  nav,
+  hero,
+  children,
+  rail,
+  railLabel = "on this page",
+  search,
+  contentsLabel = "contents",
+  ariaLabel = "docs",
+  className,
+}: {
+  nav: DocsNavGroup[];
+  hero?: DocsHero;
+  children: ReactNode;
+  /**
+   * On-this-page entries: a second, narrower rail on wide viewports. Either
+   * one list for the whole page, or a list per nav entry (keyed by nav item
+   * id) so the rail follows the section being read.
+   */
+  rail?: DocsNavItem[] | Record<string, DocsNavItem[]>;
+  /** Heading above the on-this-page rail. */
+  railLabel?: ReactNode;
+  /** Search affordance, rendered above the hero. */
+  search?: ReactNode;
+  /** Label on the collapsed mobile disclosure. */
+  contentsLabel?: string;
+  /** aria-label shared by both renderings of the nav. */
+  ariaLabel?: string;
+  /** Extra classes on the shell (e.g. a wider max-width). */
+  className?: string;
+}) {
+  // Two spies: the sidebar tracks its entries, the rail tracks its own, so a
+  // lit sub-section never un-lights the entry it belongs to.
+  const navIds = nav.flatMap((g) => g.items.filter((i) => i.href == null).map((i) => i.id));
+  const navActive = useSpy(navIds, navIds[0] ?? "");
+  const railItems = Array.isArray(rail) ? rail : rail?.[navActive];
+  const railIds = (railItems ?? []).map((i) => i.id);
+  const railActive = useSpy(railIds, railIds[0] ?? "");
+
+  const itemLink = (it: DocsNavItem, active: string) => {
+    const on = it.href != null ? it.current === true : active === it.id;
+    const current = it.href != null ? "page" : "true";
+    return (
+      <a
+        key={it.id}
+        href={it.href ?? `#${it.id}`}
+        aria-current={on ? current : undefined}
+        className={`rounded-none border-s-2 px-[0.6rem] py-[0.28rem] font-mono text-[0.82rem] no-underline transition-colors duration-150 ease-brand ${
+          on
+            ? "border-s-accent bg-accent-weak text-ink"
+            : "border-s-transparent text-ink-soft hover:bg-accent-weak hover:text-ink"
+        }`}
+      >
+        {it.label}
+      </a>
+    );
+  };
+
+  const sideNav = (
+    <nav aria-label={ariaLabel} className="flex flex-col gap-[0.1rem]">
+      {nav.map((g, gi) => (
+        <div key={gi} className="mt-[0.8rem] flex flex-col gap-[0.1rem]">
+          <span className="mb-[0.2rem] px-[0.6rem] font-mono text-[0.68rem] uppercase tracking-[0.12em] text-ink-mute">
+            {g.label}
+          </span>
+          {g.items.map((it) => itemLink(it, navActive))}
+        </div>
+      ))}
+    </nav>
+  );
+
+  const railNav =
+    railItems && railItems.length > 0 ? (
+      <nav
+        aria-label={typeof railLabel === "string" ? railLabel : "on this page"}
+        className="mt-[0.8rem] flex flex-col gap-[0.1rem]"
+      >
+        <span className="mb-[0.2rem] px-[0.6rem] font-mono text-[0.68rem] uppercase tracking-[0.12em] text-ink-mute">
+          {railLabel}
+        </span>
+        {railItems.map((it) => itemLink(it, railActive))}
+      </nav>
+    ) : null;
+
+  return (
+    <div className={className ? `docs-shell ${className}` : "docs-shell"}>
+      <aside className="docs-side">{sideNav}</aside>
+
+      <div className="docs-content flex min-w-0 flex-col gap-[clamp(1.6rem,3.5vw,2.6rem)]">
+        <details className="docs-side-mobile mb-[1.3rem] rounded-none border border-hair px-[0.85rem] py-[0.55rem]">
+          <summary className="cursor-pointer font-mono text-[0.7rem] uppercase tracking-[0.12em] text-ink-mute">
+            {contentsLabel}
+          </summary>
+          {sideNav}
+        </details>
+
+        {search != null && <div className="docs-search">{search}</div>}
+
+        {hero && (
+          <header className="docs-hero">
+            {hero.kicker != null && (
+              <p className="m-0 font-mono text-[0.68rem] uppercase tracking-[0.14em] text-accent">
+                {hero.kicker}
+              </p>
+            )}
+            <h1 className="mb-[0.7rem] mt-[0.5rem] font-display text-[clamp(1.9rem,4vw,2.7rem)] font-normal tracking-[-0.02em] text-ink">
+              {hero.title}
+            </h1>
+            {hero.lede != null && (
+              <p className="m-0 max-w-[60ch] leading-[1.6] text-ink-soft">{hero.lede}</p>
+            )}
+            {hero.actions != null && <div className="mt-[1rem]">{hero.actions}</div>}
+          </header>
+        )}
+
+        {children}
+      </div>
+
+      {/* The column stays whenever a rail is given, so an entry with no
+          sub-sections empties it instead of reflowing the page. */}
+      {rail != null && <aside className="docs-rail">{railNav}</aside>}
+    </div>
+  );
+}

package/src/components/docs/DocsSearch.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "../../lib/utils";
+import { Kbd } from "../../ui/kbd";
+import { SearchBar } from "../../ui/search-bar";
+import type { DocsNavItem } from "./DocsLayout";
+
+/**
+ * Docs search — the bordered `⌘K` affordance over a page's own headings.
+ * There is no index and no dependency: the caller hands over the same
+ * `DocsNavItem[]` the rail renders, and the field filters them on the client.
+ * `⌘K` / `Ctrl-K` focuses the field from anywhere on the page (D1, #4429).
+ */
+
+/** Case-insensitive match over an item's label, falling back to its id. */
+export function filterDocsItems(items: DocsNavItem[], query: string): DocsNavItem[] {
+  const needle = query.trim().toLowerCase();
+  if (needle === "") return [];
+  return items.filter((item) =>
+    typeof item.label === "string"
+      ? item.label.toLowerCase().includes(needle)
+      : item.id.toLowerCase().includes(needle),
+  );
+}
+
+export interface DocsSearchProps {
+  items: DocsNavItem[];
+  /** Accessible name for the field. */
+  label?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export function DocsSearch({
+  items,
+  label = "Search sections",
+  placeholder = "Search",
+  className,
+}: DocsSearchProps) {
+  const [query, setQuery] = useState("");
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        wrapRef.current?.querySelector("input")?.focus();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const matches = filterDocsItems(items, query);
+
+  /* Results float over the page, anchored under the field: an in-flow list
+     would push the hero down with every keystroke. */
+  return (
+    <div
+      ref={wrapRef}
+      className={cn("relative flex flex-col items-start", className)}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") setQuery("");
+      }}
+    >
+      <SearchBar
+        value={query}
+        onChange={setQuery}
+        aria-label={label}
+        placeholder={placeholder}
+        hint={<Kbd>⌘K</Kbd>}
+      />
+      {query.trim() !== "" && (
+        <ul className="absolute end-0 top-full z-20 m-0 mt-[0.4rem] grid max-h-[min(60vh,24rem)] w-[min(100vw_-_2rem,26rem)] list-none gap-0 overflow-y-auto border border-hair bg-popover p-0 shadow-lg">
+          {matches.length > 0 ? (
+            matches.map((item) => (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  onClick={() => setQuery("")}
+                  className="block px-[0.7rem] py-[0.45rem] font-mono text-[0.82rem] text-ink-soft no-underline transition-colors duration-150 ease-brand hover:bg-accent-weak hover:text-ink"
+                >
+                  {item.label}
+                </a>
+              </li>
+            ))
+          ) : (
+            <li className="px-[0.7rem] py-[0.45rem] font-mono text-[0.82rem] text-ink-mute">
+              no section matches
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/components/docs/Endpoint.tsx

@@ -0,0 +1,135 @@
+import { CodeTabs, DocsCodeBlock, type CodeSample } from "./CodeTabs";
+
+/**
+ * One HTTP endpoint as doc chrome: method chip + path, summary, metadata
+ * badges, request/response field tables, and tabbed code samples.
+ * Presentation-generic — the endpoint arrives fully described as props.
+ * Method chips consume the theme-aware var(--method-*) custom props defined
+ * in styles/docs.css (never raw hex at the use site); the field-table row
+ * hairlines live there too.
+ */
+
+export type DocsMethod = "GET" | "POST" | "PUT" | "DELETE";
+
+export interface DocsField {
+  name: string;
+  type: string;
+  required?: boolean;
+  description: string;
+}
+
+export interface DocsEndpoint {
+  method: DocsMethod;
+  path: string;
+  summary: string;
+  /** Auth requirement, e.g. "none", "bearer · orders:write". */
+  auth?: string;
+  /** Rate limit note, e.g. "10/min/IP". */
+  rateLimit?: string;
+  /** Flag / gate note — rendered muted, e.g. an env toggle. */
+  flag?: string;
+  request?: DocsField[];
+  responseFields?: DocsField[];
+  /** JSON string, when a shape reads clearer than a table. */
+  responseExample?: string;
+  examples?: CodeSample[];
+}
+
+const METHOD_BG: Record<DocsMethod, string> = {
+  GET: "bg-(--method-get)",
+  POST: "bg-(--method-post)",
+  PUT: "bg-(--method-put)",
+  DELETE: "bg-(--method-delete)",
+};
+
+/** The colored HTTP-method chip, on its own for legends and indexes. */
+export function MethodBadge({ method }: { method: DocsMethod }) {
+  return (
+    <span
+      className={`rounded-none px-[0.45rem] py-[0.15rem] font-mono text-[0.7rem] font-semibold tracking-[0.04em] text-on-accent ${METHOD_BG[method]}`}
+    >
+      {method}
+    </span>
+  );
+}
+
+function InlineCode({ children }: { children: React.ReactNode }) {
+  return (
+    <code className="rounded-none bg-ink/9 px-[0.3rem] py-[0.05rem] font-mono text-[0.82em]">
+      {children}
+    </code>
+  );
+}
+
+function FieldTable({ title, fields }: { title: string; fields: DocsField[] }) {
+  return (
+    <div className="flex flex-col gap-[0.3rem]">
+      <span className="font-mono text-[0.66rem] uppercase tracking-[0.12em] text-ink-mute">
+        {title}
+      </span>
+      <table className="doc-fields w-full border-collapse text-[0.84rem]">
+        <tbody>
+          {fields.map((f) => (
+            <tr key={f.name}>
+              <td className="whitespace-nowrap">
+                <InlineCode>{f.name}</InlineCode>
+                {f.required && (
+                  <span className="ms-[0.15rem] text-down" title="required">
+                    *
+                  </span>
+                )}
+              </td>
+              <td className="whitespace-nowrap font-mono text-[0.78rem] text-ink-mute">{f.type}</td>
+              <td className="w-full leading-[1.5] text-ink-soft">{f.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** Small bordered metadata chip beside the endpoint head. */
+function DocBadge({ muted, children }: { muted?: boolean; children: React.ReactNode }) {
+  return (
+    <span
+      className={`whitespace-nowrap rounded-none border border-hair px-[0.45rem] py-[0.15rem] font-mono text-[0.68rem] ${
+        muted ? "text-ink-mute" : "text-ink-soft"
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function EndpointDoc({ ep }: { ep: DocsEndpoint }) {
+  return (
+    <div className="doc-endpoint flex flex-col gap-[0.55rem] rounded-none border border-hair bg-surface/55 p-[clamp(0.8rem,2vw,1.1rem)]">
+      <div className="flex flex-wrap items-center gap-[0.6rem]">
+        <MethodBadge method={ep.method} />
+        <code className="break-all font-mono text-[0.92rem] text-ink">{ep.path}</code>
+      </div>
+      <p className="m-0 text-[0.88rem] leading-[1.65] text-ink-soft">{ep.summary}</p>
+      {(ep.auth || ep.rateLimit || ep.flag) && (
+        <div className="flex flex-wrap gap-[0.35rem]">
+          {ep.auth && <DocBadge>auth · {ep.auth}</DocBadge>}
+          {ep.rateLimit && <DocBadge>{ep.rateLimit}</DocBadge>}
+          {ep.flag && <DocBadge muted>{ep.flag}</DocBadge>}
+        </div>
+      )}
+      {ep.request && ep.request.length > 0 && <FieldTable title="Request" fields={ep.request} />}
+      {ep.responseFields && ep.responseFields.length > 0 && (
+        <FieldTable title="Response" fields={ep.responseFields} />
+      )}
+      {ep.responseExample && (
+        <div className="flex flex-col gap-[0.3rem]">
+          <span className="font-mono text-[0.66rem] uppercase tracking-[0.12em] text-ink-mute">
+            Response
+          </span>
+          <DocsCodeBlock code={ep.responseExample} copyLabel="Copy response example" />
+        </div>
+      )}
+      {ep.examples && ep.examples.length > 0 && <CodeTabs samples={ep.examples} />}
+    </div>
+  );
+}

package/src/components/document/DocumentFrame.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+import { LayoutLines } from "../page-geometry";
+
+/**
+ * The framed document column (D1, #4429).
+ *
+ * Every marketing page sits between the same fixed dashed rails as the
+ * landing page (`LayoutLines`), one `--page-pad` outside the content column,
+ * so a subpage and the home page read as the same built object. Section
+ * hairlines are full-bleed and cross the rails, as the landing bands do; the
+ * outer wrapper clips them to the viewport so they never add a horizontal
+ * scroll.
+ *
+ * The frame also resets the counter the section headings number themselves
+ * from (`// 01`, `// 02`, …).
+ *
+ * Utilities only — no site/app CSS class. The column width and inline
+ * inset come from `--frame-w` / `--page-pad`.
+ */
+export interface DocumentFrameProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function DocumentFrame({ children, className }: DocumentFrameProps) {
+  return (
+    <>
+      <LayoutLines />
+      <div className="relative z-10 overflow-x-clip [counter-reset:doc-section]">
+        <div
+          className={cn(
+            "mx-auto w-full max-w-[calc(var(--frame-w)+2*var(--page-pad))]",
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/document/GlyphList.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * The glyph list (D1, #4429).
+ *
+ * One list grammar for the whole site: a muted `[*]` marker, then a bold
+ * lead-in and one unpunctuated clause. No borders, no bullets, no
+ * description columns — the list reads as a dense block of statements.
+ *
+ * Utilities only — no site/app CSS class.
+ */
+export interface GlyphListProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function GlyphList({ children, className }: GlyphListProps) {
+  return (
+    <ul className={cn("m-0 grid list-none gap-[1rem] p-0", className)}>{children}</ul>
+  );
+}
+
+export interface GlyphRowProps {
+  /** The bold lead-in; rendered in ink at medium weight. */
+  label?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function GlyphRow({ label, children, className }: GlyphRowProps) {
+  return (
+    <li
+      className={cn(
+        "flex gap-[0.75rem] text-[length:var(--type-body)] leading-[var(--leading-prose)] text-ink-soft",
+        className,
+      )}
+    >
+      <span aria-hidden="true" className="shrink-0 font-mono text-ink-mute">
+        [*]
+      </span>
+      <span>
+        {label ? (
+          <strong className="mr-[0.6rem] font-medium text-ink">{label}</strong>
+        ) : null}
+        {children}
+      </span>
+    </li>
+  );
+}

package/src/components/document/PageTitle.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * The page opener (D1, #4429).
+ *
+ * The landing hero's grammar at page-title size: a muted `~/digithings/<path>`
+ * line, the title with a blinking block caret, and a one-sentence lede, staged
+ * in with `animate-appear` (the kit drops the entrance under reduced motion).
+ *
+ * Utilities only — no site/app CSS class.
+ */
+export interface PageTitleProps {
+  title: ReactNode;
+  /** The page's path under `~/digithings/`, e.g. `services`. */
+  path?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PageTitle({ title, path, children, className }: PageTitleProps) {
+  return (
+    <header className={cn("max-w-[var(--measure-prose)]", className)}>
+      {path ? (
+        <p className="animate-appear m-0 mb-[1.1rem] font-mono text-[0.75rem] tracking-[0.04em] text-ink-mute opacity-0">
+          {`~/digithings/${path}`}
+        </p>
+      ) : null}
+      <h1 className="animate-appear m-0 font-mono text-[length:var(--type-page-title)] font-medium leading-[1.2] tracking-[-0.02em] text-ink opacity-0 [animation-delay:90ms]">
+        {title}
+        <span
+          aria-hidden="true"
+          className="ml-[0.3em] inline-block h-[0.82em] w-[0.5em] bg-accent align-[-0.08em] [animation:chat-cursor-blink_1.1s_steps(1)_infinite] motion-reduce:[animation:none]"
+        />
+      </h1>
+      {children ? (
+        <p className="animate-appear mt-[0.9rem] mb-0 text-[length:var(--type-body)] leading-[var(--leading-prose)] text-ink-soft opacity-0 [animation-delay:200ms]">
+          {children}
+        </p>
+      ) : null}
+    </header>
+  );
+}

package/src/components/document/Prose.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Long-form prose wrapper (D1, #4429).
+ *
+ * Caps the measure and sets the loose reading leading, then styles the
+ * common inline elements (paragraph rhythm, links, emphasis, lists) so a
+ * prose block needs no per-element classes. Accent is furniture only —
+ * links and list markers, never body text.
+ *
+ * Utilities only — no site/app CSS class.
+ */
+export interface ProseProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Prose({ children, className }: ProseProps) {
+  return (
+    <div
+      className={cn(
+        "max-w-[var(--measure-prose)] text-[length:var(--type-body)] leading-[var(--leading-prose)] text-ink-soft",
+        "[&_p]:mt-[1.1em] [&_p:first-child]:mt-0",
+        "[&_a]:text-ink [&_a]:underline [&_a]:underline-offset-[3px]",
+        "[&_strong]:font-medium [&_strong]:text-ink",
+        "[&_em]:italic",
+        "[&_ul]:mt-[1.1em] [&_ul]:list-none [&_ul]:p-0 [&_li]:relative [&_li]:pl-[1.4em] [&_li]:leading-[var(--leading-prose)]",
+        "[&_li]:before:absolute [&_li]:before:left-0 [&_li]:before:text-ink-mute [&_li]:before:content-['[_*]_']",
+        "[&_ol]:mt-[1.1em] [&_ol]:pl-[1.4em] [&_li]:marker:text-ink-mute",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/document/Section.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+import { Reveal } from "../../motion/primitives";
+
+/**
+ * A document section (D1, #4429).
+ *
+ * A full-bleed hairline on top — it crosses the page rails, as the landing
+ * bands' rules do — then one inline inset (`--page-pad`) and a block step
+ * tighter than the landing's `--page-step`, because a document section is a
+ * few rows rather than a band. Headings number themselves `// 01`, `// 02`
+ * from the frame's counter. The content rises in once when scrolled into view.
+ *
+ * Utilities only — no site/app CSS class.
+ */
+export interface SectionProps {
+  /** Anchor target, when a section is linked to. */
+  id?: string;
+  /** Section heading; the one h2 at `--type-section`. */
+  title?: ReactNode;
+  /** One sentence under the heading, at body size and prose leading. */
+  lede?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Section({ id, title, lede, children, className }: SectionProps) {
+  return (
+    <section
+      id={id}
+      className={cn(
+        "relative px-[var(--page-pad)] py-[clamp(3rem,6vw,5rem)]",
+        "before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:h-px before:w-screen before:-translate-x-1/2 before:bg-hair",
+        className,
+      )}
+    >
+      <Reveal>
+        {title ? (
+          <h2 className="m-0 max-w-[var(--measure-prose)] text-[length:var(--type-section)] font-medium leading-[1.35] tracking-[-0.01em] text-ink [counter-increment:doc-section] before:mb-[0.8rem] before:block before:font-mono before:text-[0.72rem] before:font-normal before:tracking-[0.04em] before:text-ink-mute before:content-['//_'_counter(doc-section,decimal-leading-zero)]">
+            {title}
+          </h2>
+        ) : null}
+        {lede ? (
+          <p className="mt-[0.9rem] mb-0 max-w-[var(--measure-prose)] text-[length:var(--type-body)] leading-[var(--leading-prose)] text-ink-soft">
+            {lede}
+          </p>
+        ) : null}
+        {children ? (
+          <div className={cn(title || lede ? "mt-[1.6rem]" : undefined)}>{children}</div>
+        ) : null}
+      </Reveal>
+    </section>
+  );
+}

package/src/components/document/index.ts

@@ -0,0 +1,13 @@
+export {
+  DocumentFrame,
+  type DocumentFrameProps,
+} from "./DocumentFrame";
+export { Section, type SectionProps } from "./Section";
+export { PageTitle, type PageTitleProps } from "./PageTitle";
+export { Prose, type ProseProps } from "./Prose";
+export {
+  GlyphList,
+  GlyphRow,
+  type GlyphListProps,
+  type GlyphRowProps,
+} from "./GlyphList";