@terpjs/react-core 0.9.0 → 0.10.0

package/src/format.test.tsx

@@ -0,0 +1,213 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ReactNode } from "react";
+
+import { DataView } from "./dataview";
+import { InMemoryDataViewRepository } from "./dataview";
+import type { DataViewColumn } from "./dataview";
+import {
+  formatDate,
+  formatDateTime,
+  formatNumber,
+  useFormatDate,
+  useFormatNumber,
+} from "./format";
+import { LocaleProvider } from "./locale";
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+// Midday UTC keeps the calendar date stable across most zones, but only most: UTC+13 and UTC+14
+// exist (Pacific/Apia, Pacific/Kiritimati), so at 12:00Z the local date there is already the 8th.
+// No assertion below depends on WHICH day it is — the locale assertions compare two locales against
+// each other, and the shape assertions ask whether the day or the month comes first. An earlier
+// version asserted the literal digit 7 and would have failed in Kiritimati and nowhere else.
+const WHEN = "2026-07-07T12:00:00Z";
+
+const NL = { label: "Nederlands", strings: {} };
+const EN = { label: "English", strings: {} };
+
+describe("the locale-explicit formatters", () => {
+  it("actually varies with the locale it is given", () => {
+    // The whole defect was a missing argument, so the assertion that matters is that the argument
+    // changes the answer. Comparing against one hard-coded string would pass just as happily if
+    // the locale were ignored and both calls fell through to the runner's default.
+    const dutch = formatDate(WHEN, "nl");
+    const american = formatDate(WHEN, "en-US");
+    expect(dutch).not.toBe(american);
+    // Day-first versus month-first is the visible difference, and it survives both an ICU update
+    // and a runner in a zone where the local calendar date is already the next day.
+    expect(dutch).toMatch(/^\d/);
+    expect(american).toMatch(/^[A-Za-z]/);
+  });
+
+  it("adds a time of day only in the date-time form", () => {
+    // The audit log's column is titled "when"; dropping its clock would be a silent downgrade.
+    expect(formatDateTime(WHEN, "en-US")).toMatch(/\d{1,2}:\d{2}/);
+    expect(formatDate(WHEN, "en-US")).not.toMatch(/\d{1,2}:\d{2}/);
+  });
+
+  it("groups and separates numbers the way the locale does", () => {
+    expect(formatNumber(1234.5, "nl")).not.toBe(formatNumber(1234.5, "en-US"));
+    expect(formatNumber(1234.5, "en-US")).toBe("1,234.5");
+  });
+
+  it("renders an em dash for nothing, rather than throwing or printing Invalid Date", () => {
+    // `new Date("whenever")` yields an Invalid Date whose `format` throws a RangeError, so one
+    // malformed row from an API would take down a whole table instead of showing one dash.
+    for (const value of [null, undefined, "", "not a date", Number.NaN]) {
+      expect(formatDate(value, "nl")).toBe("—");
+      expect(formatDateTime(value, "nl")).toBe("—");
+    }
+    expect(formatNumber(null, "nl")).toBe("—");
+    expect(formatNumber(Number.NaN, "nl")).toBe("—");
+  });
+
+  it("builds one formatter per locale, not one per value", () => {
+    // Constructing an Intl formatter costs ~55x using one, and every table cell comes through
+    // here, so the first version of this file turned a locale fix into a rendering cost: a 200-row
+    // table with three date columns built 600 formatters per render. Counting constructions is the
+    // only way to see it — the output is identical either way, which is exactly why it shipped.
+    const original = Intl.DateTimeFormat;
+    let constructed = 0;
+    try {
+      (Intl as { DateTimeFormat: unknown }).DateTimeFormat = function counted(
+        ...args: ConstructorParameters<typeof Intl.DateTimeFormat>
+      ) {
+        constructed += 1;
+        return new original(...args);
+      };
+      for (let index = 0; index < 50; index += 1) {
+        formatDate(`2026-07-${String((index % 28) + 1).padStart(2, "0")}T12:00:00Z`, "en-GB");
+      }
+      expect(constructed).toBe(1);
+      // A second locale is a second formatter, not a cache that answers with the wrong one.
+      formatDate(WHEN, "en-IE");
+      expect(constructed).toBe(2);
+    } finally {
+      (Intl as { DateTimeFormat: unknown }).DateTimeFormat = original;
+    }
+  });
+
+  it("accepts the three shapes a date field arrives in", () => {
+    const iso = formatDate(WHEN, "en-US");
+    expect(formatDate(new Date(WHEN), "en-US")).toBe(iso);
+    expect(formatDate(new Date(WHEN).getTime(), "en-US")).toBe(iso);
+  });
+});
+
+function ShownDate() {
+  return <p data-testid="shown">{useFormatDate()(WHEN)}</p>;
+}
+
+function ShownNumber() {
+  return <p data-testid="shown">{useFormatNumber()(1234.5)}</p>;
+}
+
+/** Render `body` under one app locale and return what it printed. */
+function shownUnder(locale: string, body: ReactNode): string {
+  const { unmount } = render(
+    <LocaleProvider locales={{ nl: NL, "en-US": EN }} defaultLocale={locale}>
+      {body}
+    </LocaleProvider>,
+  );
+  const text = screen.getByTestId("shown").textContent ?? "";
+  unmount();
+  return text;
+}
+
+describe("the hooks", () => {
+  // These compare TWO app locales against each other rather than one against an expected string,
+  // and the reason is worth stating because the first version of this file did the latter and a
+  // mutation proved it worthless. This machine's Node resolves to nl-NL, so
+  // `formatDate(value, undefined)` and `formatDate(value, "nl")` are the same string: a test that
+  // rendered a Dutch provider and asserted the Dutch spelling passed with the hook ignoring its
+  // locale entirely. It would have failed on an English host and passed here, which is worse than
+  // no test. Two locales cannot agree unless the locale is being dropped, on any host.
+
+  it("reads the app's locale, not the machine's", () => {
+    const dutch = shownUnder("nl", <ShownDate />);
+    const american = shownUnder("en-US", <ShownDate />);
+    expect(dutch).not.toBe(american);
+    expect(dutch).toBe(formatDate(WHEN, "nl"));
+    expect(american).toBe(formatDate(WHEN, "en-US"));
+  });
+
+  it("formats numbers through the same locale", () => {
+    const dutch = shownUnder("nl", <ShownNumber />);
+    const american = shownUnder("en-US", <ShownNumber />);
+    expect(dutch).not.toBe(american);
+    expect(american).toBe("1,234.5");
+  });
+
+  it("falls back to the runtime default outside a LocaleProvider", () => {
+    // `useLocale()` returns null with no provider, and that must mean "let Intl decide" rather
+    // than throw: `Field`, `DataView` and the admin screens all render fine without one.
+    render(<ShownDate />);
+    expect(screen.getByTestId("shown")).toHaveTextContent(formatDate(WHEN, undefined));
+  });
+});
+
+interface Dated {
+  id: string;
+  when: Date;
+}
+
+const DATED_COLUMNS: DataViewColumn<Dated>[] = [
+  { id: "when", header: "When", accessor: (row) => row.when, meta: { mobileSlot: "title" } },
+];
+
+function datedView(locale: string, when: Date) {
+  const repository = new InMemoryDataViewRepository([{ id: "1", when }], {
+    getRowId: (row) => row.id,
+    getValue: (row, column) => row[column as keyof Dated],
+  });
+  return (
+    <LocaleProvider locales={{ nl: NL, "en-US": EN }} defaultLocale={locale}>
+      <DataView<Dated> repository={repository} columns={DATED_COLUMNS} />
+    </LocaleProvider>
+  );
+}
+
+describe("a Date in a cell", () => {
+  // Rendered under BOTH locales, for the reason stated at the top of the hook block: the runner is
+  // nl-NL, so a single Dutch render would go green with `useCellFormatter` ignoring its locale
+  // entirely. That is what the first version of this test did — twenty lines under a comment
+  // explaining why not to. Two locales cannot both be right unless the locale is being read.
+  const when = new Date(WHEN);
+
+  it("guards its own premise: the two spellings differ", () => {
+    expect(formatDate(when, "nl")).not.toBe(formatDate(when, "en-US"));
+  });
+
+  it("is formatted for the app's locale instead of stringified — table view", async () => {
+    // `accessor` returns `unknown`, so a Date is type-legal, and `String(value)` renders
+    // "Tue Jul 07 2026 14:00:00 GMT+0200 (Central European Summer Time)" into a table cell.
+    render(datedView("en-US", when));
+    expect(await screen.findByText(formatDate(when, "en-US"))).toBeInTheDocument();
+    expect(screen.queryByText(formatDate(when, "nl"))).toBeNull();
+    expect(screen.queryByText(String(when))).toBeNull();
+    cleanup();
+
+    render(datedView("nl", when));
+    expect(await screen.findByText(formatDate(when, "nl"))).toBeInTheDocument();
+    expect(screen.queryByText(formatDate(when, "en-US"))).toBeNull();
+  });
+
+  it("is formatted for the app's locale instead of stringified — card view", async () => {
+    // The stated reason for extracting `useCellFormatter` was that the two renderers had drifted
+    // apart unnoticed, so pinning only the desktop one would reproduce the defect the extraction
+    // was for. `DataView` reads `matchMedia` to pick a layout and jsdom always says no, so the
+    // card list is only reachable through the explicit toggle.
+    render(datedView("en-US", when));
+    expect(await screen.findByRole("table")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Card view" }));
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    expect(screen.getByText(formatDate(when, "en-US"))).toBeInTheDocument();
+    expect(screen.queryByText(formatDate(when, "nl"))).toBeNull();
+    expect(screen.queryByText(String(when))).toBeNull();
+  });
+});

package/src/format.ts

@@ -0,0 +1,150 @@
+import { useCallback } from "react";
+
+import { useLocale } from "./locale";
+
+/**
+ * Locale-aware date and number formatting.
+ *
+ * Seven places in this package formatted a date with `toLocaleDateString()` or
+ * `toLocaleString()` and no locale argument, which asks the *browser* what language to use. An app
+ * that ships Dutch through `LocaleProvider` therefore rendered its own admin tables in whatever
+ * the visitor's OS was set to, one row above a `DatePicker` that got it right — because the
+ * correct helper already existed, private, in a file about calendars.
+ *
+ * That helper is now here, unchanged, and `DatePicker` imports it back. Adopting its exact shape
+ * rather than inventing one is deliberate: it is the only date rendering in the package that was
+ * already locale-correct, so it is the one that defines the house shape, and moving it moves no
+ * pixels.
+ *
+ * Each formatter comes in two forms. The hook reads the app's locale from context and is what a
+ * component should use; the plain function takes the locale explicitly, for a caller that already
+ * has one or is not a component. The hooks are `useCallback`-stable so a column list built in a
+ * `useMemo` can depend on one without rebuilding every render.
+ */
+
+/** Anything a record's date field plausibly arrives as. */
+export type FormattableDate = Date | string | number | null | undefined;
+
+/**
+ * What an absent or unparseable date renders as.
+ *
+ * An em dash rather than an empty cell, because a blank reads as "still loading" in a table and as
+ * a layout bug in a detail list. This is the glyph the audit screen already used for the same job.
+ */
+const EMPTY = "—";
+
+/**
+ * Parse without throwing, and treat an unparseable value as absent.
+ *
+ * `new Date("not a date")` yields an Invalid Date whose `format` throws a RangeError, so a single
+ * malformed row from an API would take down the whole table rather than showing one dash.
+ */
+function toDate(value: FormattableDate): Date | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+const DATE_OPTIONS: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+};
+
+const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+  ...DATE_OPTIONS,
+  hour: "2-digit",
+  minute: "2-digit",
+};
+
+/**
+ * Formatters, kept.
+ *
+ * Constructing an `Intl` formatter is expensive out of all proportion to using one — measured on
+ * this repository's Node, roughly 55x a cached instance and 69x the `toLocaleDateString()` these
+ * helpers replaced, because the built-in call is serviced from V8's own cache for the default
+ * locale and an explicit constructor is not. Every cell of every table goes through here, so
+ * building one per value turned a locale fix into a rendering cost: a 200-row table with three
+ * date columns is 600 constructions per render.
+ *
+ * The keys are a closed set in practice — an app declares its locales in `LocaleProvider` — so
+ * this is a cache with no eviction on purpose rather than by oversight.
+ */
+const DATE_FORMATTERS = new Map<string, Intl.DateTimeFormat>();
+const NUMBER_FORMATTERS = new Map<string, Intl.NumberFormat>();
+
+function dateFormatter(locale: string | undefined, withTime: boolean): Intl.DateTimeFormat {
+  const key = `${withTime ? "t" : "d"}|${locale ?? ""}`;
+  let formatter = DATE_FORMATTERS.get(key);
+  if (formatter === undefined) {
+    formatter = new Intl.DateTimeFormat(locale, withTime ? DATE_TIME_OPTIONS : DATE_OPTIONS);
+    DATE_FORMATTERS.set(key, formatter);
+  }
+  return formatter;
+}
+
+function numberFormatter(
+  locale: string | undefined,
+  options: Intl.NumberFormatOptions | undefined,
+): Intl.NumberFormat {
+  // Options are a caller's object rather than one of two constants, so they join the key. Two
+  // equivalent objects written in a different order miss each other, which costs one extra
+  // formatter and never a wrong answer.
+  const key = `${locale ?? ""}|${options === undefined ? "" : JSON.stringify(options)}`;
+  let formatter = NUMBER_FORMATTERS.get(key);
+  if (formatter === undefined) {
+    formatter = new Intl.NumberFormat(locale, options);
+    NUMBER_FORMATTERS.set(key, formatter);
+  }
+  return formatter;
+}
+
+/** Locale-explicit short date, e.g. `7 jul 2026` under `nl`. `EMPTY` for absent or unparseable. */
+export function formatDate(value: FormattableDate, locale: string | undefined): string {
+  const date = toDate(value);
+  return date === null ? EMPTY : dateFormatter(locale, false).format(date);
+}
+
+/** The same date with the time of day, for a column whose subject is *when* something happened. */
+export function formatDateTime(value: FormattableDate, locale: string | undefined): string {
+  const date = toDate(value);
+  return date === null ? EMPTY : dateFormatter(locale, true).format(date);
+}
+
+/** Locale-explicit number, with the grouping and decimal separators the locale expects. */
+export function formatNumber(
+  value: number | null | undefined,
+  locale: string | undefined,
+  options?: Intl.NumberFormatOptions,
+): string {
+  return value === null || value === undefined || Number.isNaN(value)
+    ? EMPTY
+    : numberFormatter(locale, options).format(value);
+}
+
+/** {@link formatDate} bound to the app's locale. */
+export function useFormatDate(): (value: FormattableDate) => string {
+  const locale = useLocale()?.locale;
+  return useCallback((value: FormattableDate) => formatDate(value, locale), [locale]);
+}
+
+/** {@link formatDateTime} bound to the app's locale. */
+export function useFormatDateTime(): (value: FormattableDate) => string {
+  const locale = useLocale()?.locale;
+  return useCallback((value: FormattableDate) => formatDateTime(value, locale), [locale]);
+}
+
+/** {@link formatNumber} bound to the app's locale. */
+export function useFormatNumber(): (
+  value: number | null | undefined,
+  options?: Intl.NumberFormatOptions,
+) => string {
+  const locale = useLocale()?.locale;
+  return useCallback(
+    (value: number | null | undefined, options?: Intl.NumberFormatOptions) =>
+      formatNumber(value, locale, options),
+    [locale],
+  );
+}

package/src/icons.tsx

@@ -1,3 +1,4 @@
+import type { IconName } from "@terpjs/contract";
 import type { ReactNode } from "react";
 
 import { injectTerpStyles } from "./styles";
@@ -27,8 +28,28 @@ const svgProps = {
   focusable: false,
 } as const;
 
-/** The bundled glyphs, keyed by the names a manifest's `NavItem.icon` may use. */
-export const ICON_GLYPHS: Record<string, ReactNode> = {
+// `IconName` must be the literal union, not `string`. Drop the `as const` from `ICON_NAMES` in
+// the contract and this directive becomes unused, which TypeScript reports as an error — which
+// is the point of writing it here rather than trusting the annotation over there. A scan cannot
+// check this, because the thing being checked is what the scan would be built out of.
+// @ts-expect-error the union must reject a name that is not in it
+const _iconNameIsNotWidened: IconName = "no-such-glyph";
+void _iconNameIsNotWidened;
+
+/**
+ * The bundled glyphs, keyed by the names a manifest's `NavItem.icon` may use.
+ *
+ * `satisfies Record<IconName, ReactNode>` is exhaustive in **both** directions at compile time:
+ * a glyph whose name is not in {@link ICON_NAMES} is an excess-property error, and a name with
+ * no glyph is a missing-property error. That is strictly stronger than the parity test ADR 0097
+ * §5 asked for — a test can only run after a build that already succeeded, and it would have to
+ * be kept in sync by hand — and it costs one keyword.
+ *
+ * The exported type stays `Record<string, ReactNode>` deliberately. `NavIcon` indexes this table
+ * with a `string` (its fallback is a designed behaviour, not an error), so narrowing the export
+ * would make that a type error at a call site the design wants to keep working.
+ */
+const GLYPHS = {
   home: (
     <svg {...svgProps}>
       <path d="M3 10.5 12 3l9 7.5" />
@@ -433,7 +454,34 @@ export const ICON_GLYPHS: Record<string, ReactNode> = {
       <path d="M13 3 4 14h6l-1 7 9-11h-6l1-7Z" />
     </svg>
   ),
-};
+  // The password reveal, and the only pair here where one glyph is the other struck through.
+  // The slash is part of `eye-off` rather than an overlay, so the two swap as whole glyphs and
+  // neither depends on the other rendering underneath it.
+  eye: (
+    <svg {...svgProps}>
+      <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  ),
+  "eye-off": (
+    <svg {...svgProps}>
+      <path d="M10.6 6.2A9.9 9.9 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.1" />
+      <path d="M6.6 6.8A17.7 17.7 0 0 0 2 12s3.6 7 10 7a9.8 9.8 0 0 0 4.5-1.1" />
+      <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
+      <path d="m3 3 18 18" />
+    </svg>
+  ),
+} satisfies Record<IconName, ReactNode>;
+
+/**
+ * The glyph table as the package publishes it.
+ *
+ * Typed as a string-keyed record rather than an IconName-keyed one, and that is not laziness:
+ * NavIcon looks a glyph up by a plain string on purpose, so a narrower index signature would
+ * break the one call site whose unknown-name behaviour is designed. The exhaustiveness lives on
+ * the declaration above, where it belongs.
+ */
+export const ICON_GLYPHS: Record<string, ReactNode> = GLYPHS;
 
 export interface NavIconProps {
   /** Glyph name (a `NavItem.icon` value); unknown / missing falls back to the initial. */
@@ -460,8 +508,22 @@ export function NavIcon({ name, label }: NavIconProps) {
 }
 
 export interface IconProps {
-  /** Glyph name from {@link ICON_GLYPHS}; unknown names render nothing. */
-  name: string;
+  /**
+   * Which glyph to render, by checked name.
+   *
+   * A checked name here and a plain `string` on {@link NavIconProps}, and the difference is the
+   * failure mode rather than the audience. `NavIcon` falls back to the label's initial in a
+   * tile — visible, designed, and gated by a specimen — so an unknown name there produces
+   * something. `Icon` rendered **nothing**: an empty box where a glyph should be, which is
+   * exactly the silent no-op this codebase refuses everywhere else.
+   *
+   * That was not hypothetical. The workbench's own icon gallery rendered
+   * `<Icon name="close" />` — there is no `close` glyph, the glyph is `x` — and shipped a blank
+   * cell with a caption under it. Its baseline recorded the blank and passed for releases,
+   * because a missing glyph and a glyph that is not there look identical. The type is what
+   * turns that into a build failure.
+   */
+  name: IconName;
   /**
    * CSS length applied to width & height (default `1em`, so the glyph tracks
    * the surrounding text size). All strokes use `currentColor`.

package/src/index.ts

@@ -23,11 +23,23 @@ export type {
 } from "./realtime";
 export { unwrap, unwrapOptional, ApiError } from "./unwrap";
 export type { FetchResult } from "./unwrap";
+export {
+  formatDate,
+  formatDateTime,
+  formatNumber,
+  useFormatDate,
+  useFormatDateTime,
+  useFormatNumber,
+} from "./format";
+export type { FormattableDate } from "./format";
 export { ResourceList } from "./ResourceList";
 export type { ResourceListProps } from "./ResourceList";
 export { RequireAuth } from "./RequireAuth";
 export type { RequireAuthProps } from "./RequireAuth";
-export { visibleNav } from "./nav";
+export { groupNav, isDeclarationVisible, visibleNav } from "./nav";
+export type { NavSection, NavVisibilityContext } from "./nav";
+export { activeNavPath, isNavItemActive } from "./navActive";
+export type { NavActiveCandidate } from "./navActive";
 export {
   AppShell,
   SIDEBAR_STORAGE_KEY,
@@ -51,6 +63,9 @@ export { Page } from "./Page";
 export type { PageProps } from "./Page";
 export { LAYOUT_CONTRACTS } from "./layoutContract";
 export type { LayoutContractSpec, LayoutSlotSpec } from "./layoutContract";
+// `ResolvedLayout` is deliberately NOT exported: nothing hands one to app code, so it
+// would be public surface a consumer can never hold.
+export type { LayoutDeclaration, LayoutShellDeclaration } from "./layoutDeclaration";
 export { PageActions } from "./PageActions";
 export type { OverflowAction, PageActionsProps } from "./PageActions";
 export { ModuleNav } from "./ModuleNav";
@@ -59,6 +74,17 @@ export { OverviewPage } from "./OverviewPage";
 export type { OverviewPageProps } from "./OverviewPage";
 export { DetailPage } from "./DetailPage";
 export type { DetailPageProps } from "./DetailPage";
+export { FormPage } from "./FormPage";
+export type { FormPageProps } from "./FormPage";
+export { SettingsPage } from "./SettingsPage";
+export type { SettingsPageProps } from "./SettingsPage";
+export { SplitPage, SplitPane } from "./SplitPage";
+export type {
+  SplitPageProps,
+  SplitPaneProps,
+  SplitPaneRole,
+  SplitListWidth,
+} from "./SplitPage";
 export { HubPage, HubCard } from "./HubPage";
 export type { HubPageProps, HubCardProps, RenderHubCardLink } from "./HubPage";
 export { UiTextProvider, useStrings, useUiText, resolveUiText, DEFAULT_STRINGS } from "./uiText";
@@ -76,11 +102,11 @@ export type { LoadingStateProps, InlineSpinnerProps } from "./LoadingState";
 export { ToastProvider, useToast } from "./toast";
 export type { ToastApi, ToastOptions, ToastProviderProps, ToastVariant } from "./toast";
 export { Button } from "./ui/Button";
-export type { ButtonProps, ButtonVariant } from "./ui/Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./ui/Button";
 export { Input } from "./ui/Input";
 export type { InputProps } from "./ui/Input";
 export { Select } from "./ui/Select";
-export type { SelectProps } from "./ui/Select";
+export type { SelectProps, SelectOption } from "./ui/Select";
 export { Textarea } from "./ui/Textarea";
 export type { TextareaProps } from "./ui/Textarea";
 export { Popover } from "./ui/Popover";
@@ -99,10 +125,12 @@ export { Switch } from "./ui/Switch";
 export type { SwitchProps } from "./ui/Switch";
 export { Tabs } from "./ui/Tabs";
 export type { TabItem, TabsProps } from "./ui/Tabs";
+export { Avatar } from "./ui/Avatar";
+export type { AvatarProps } from "./ui/Avatar";
 export { Badge } from "./ui/Badge";
 export type { BadgeProps, BadgeTone } from "./ui/Badge";
 export { Card } from "./ui/Card";
-export type { CardProps } from "./ui/Card";
+export type { CardProps, CardVariant } from "./ui/Card";
 export { Tooltip } from "./ui/Tooltip";
 export type { TooltipProps } from "./ui/Tooltip";
 export { Alert } from "./ui/Alert";
@@ -111,10 +139,32 @@ export { Markdown } from "./ui/Markdown";
 export type { MarkdownProps } from "./ui/Markdown";
 export { saveBlob, useEndpointDownload, fetchDownload, downloadUrl } from "./download";
 export type { DownloadTarget } from "./download";
+export { Heading, Text, Code, Link } from "./typography";
+export type {
+  HeadingProps,
+  HeadingLevel,
+  HeadingSize,
+  TextProps,
+  TextTone,
+  TextSize,
+  CodeProps,
+  LinkProps,
+} from "./typography";
 export { Field } from "./Field";
 export type { FieldProps } from "./Field";
-export { Stack, DetailList } from "./layout";
-export type { StackProps, DetailListProps, DetailItem, SpaceToken } from "./layout";
+export { Stack, Grid, Divider, DetailList } from "./layout";
+export type {
+  StackProps,
+  GridProps,
+  GridColumns,
+  GridMinColumn,
+  DividerProps,
+  Responsive,
+  DetailListProps,
+  DetailListLayout,
+  DetailItem,
+  SpaceToken,
+} from "./layout";
 export {
   buildAppRouter,
   DEFAULT_ROLE_RANKS,