remix 3.0.0-beta.3 → 3.0.0-beta.5

package/src/ui/tabs/README.md

@@ -0,0 +1,141 @@
+# tabs
+
+`Tabs` renders a tab control with one active tab and matching panels. Use it when related views share the same page space and the owning component may either control the active tab or let the tabs context manage it.
+
+## Component Usage
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ProjectTabs() {
+  return (
+    <Tabs defaultActiveTab="overview">
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+        <Tab name="settings">Settings</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+      <TabPanel name="settings">Project settings.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Control the active tab when state should live in the owning component:
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ControlledTabs(handle: Handle) {
+  let activeTab = 'overview'
+
+  return () => (
+    <Tabs
+      activeTab={activeTab}
+      onActiveTabChange={(nextActiveTab) => {
+        activeTab = nextActiveTab
+        void handle.update()
+      }}
+    >
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Listen for bubbling `TabsChangeEvent` events with `onTabsChange` from `remix/ui/tabs/primitives`.
+
+```tsx
+import { onTabsChange } from 'remix/ui/tabs/primitives'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function TrackedTabs() {
+  return (
+    <div
+      mix={[
+        onTabsChange((event) => {
+          console.log(event.previousActiveTab, event.activeTab)
+        }),
+      ]}
+    >
+      <Tabs defaultActiveTab="overview">
+        <TabList aria-label="Project sections">
+          <Tab name="overview">Overview</Tab>
+          <Tab name="activity">Activity</Tab>
+        </TabList>
+        <TabPanel name="overview">Project summary.</TabPanel>
+        <TabPanel name="activity">Recent changes.</TabPanel>
+      </Tabs>
+    </div>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the markup and styles:
+
+```tsx
+import * as tabs from 'remix/ui/tabs/primitives'
+import { listStyle, panelStyle, rootStyle, tabStyle } from './tabs.styles'
+
+export function PrimitiveTabs() {
+  return (
+    <tabs.Context defaultActiveTab="overview">
+      <div mix={[rootStyle, tabs.root()]}>
+        <div mix={[listStyle, tabs.list()]} aria-label="Project sections">
+          <button mix={[tabStyle, tabs.tab({ name: 'overview' })]} type="button">
+            Overview
+          </button>
+          <button mix={[tabStyle, tabs.tab({ name: 'activity' })]} type="button">
+            Activity
+          </button>
+        </div>
+
+        <div mix={[panelStyle, tabs.panel({ name: 'overview' })]}>Project summary.</div>
+        <div mix={[panelStyle, tabs.panel({ name: 'activity' })]}>Recent changes.</div>
+      </div>
+    </tabs.Context>
+  )
+}
+```
+
+## `remix/ui/tabs`
+
+- `Tabs`: root component. Supports controlled `activeTab`, uncontrolled `defaultActiveTab`, `onActiveTabChange`, `disabled`, and `size: 'md' | 'lg'`.
+- `TabList`: tablist wrapper that lays out the tabs in a track and applies the tablist primitive.
+- `Tab`: button for one tab `name`. The active tab uses the toggle slider treatment and button-sized text. Pass `disabled` to prevent activation.
+- `TabPanel`: panel for one tab `name`.
+- `rootStyle`, `listStyle`, `tabStyle`, and `panelStyle`: flat style mixins used by the component markup.
+- `onTabsChange` and `TabsChangeEvent`: re-exported primitive event helpers.
+- `TabsProps`, `TabListProps`, `TabProps`, `TabPanelProps`, and `TabsSize`: public TypeScript types for the composed APIs.
+
+## `remix/ui/tabs/primitives`
+
+- `Context`: lower-level provider for custom tabs composition.
+- `root()`: wires the root element and bubbling change events.
+- `list()`: wires the tablist role and disabled state.
+- `tab({ name, disabled })`: wires a tab button with selected state, ids, keyboard activation, and pointer activation.
+- `panel({ name })`: wires the matching tab panel id, hidden state, inert state, and label relationship.
+- `onTabsChange(...)`: event mixin for the bubbling `TabsChangeEvent`.
+- `TabsChangeEvent`: bubbling event with `activeTab` and `previousActiveTab`.
+- `TabsContextProps`, `TabsContextValue`, `TabsRegisteredTab`, `TabsActivationDirection`, `TabsRootOptions`, `TabListOptions`, `TabOptions`, and `TabPanelOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- If neither `activeTab` nor `defaultActiveTab` is provided, the first enabled tab becomes active.
+- Arrow keys activate the next or previous enabled tab. `Home` and `End` activate the first and last enabled tabs.
+- `Enter`, `Space`, and pointer clicks activate the focused tab.
+- Root `disabled` disables every tab. Tab `disabled` only disables that tab.
+- Tabs and panels are linked with generated ids through `aria-controls`, `aria-labelledby`, and `aria-selected`.
+- Inactive panels receive `hidden`, `inert`, and `data-state="inactive"`.

package/src/ui/tabs/primitives/README.md

@@ -0,0 +1,141 @@
+# tabs
+
+`Tabs` renders a tab control with one active tab and matching panels. Use it when related views share the same page space and the owning component may either control the active tab or let the tabs context manage it.
+
+## Component Usage
+
+```tsx
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ProjectTabs() {
+  return (
+    <Tabs defaultActiveTab="overview">
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+        <Tab name="settings">Settings</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+      <TabPanel name="settings">Project settings.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Control the active tab when state should live in the owning component:
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function ControlledTabs(handle: Handle) {
+  let activeTab = 'overview'
+
+  return () => (
+    <Tabs
+      activeTab={activeTab}
+      onActiveTabChange={(nextActiveTab) => {
+        activeTab = nextActiveTab
+        void handle.update()
+      }}
+    >
+      <TabList aria-label="Project sections">
+        <Tab name="overview">Overview</Tab>
+        <Tab name="activity">Activity</Tab>
+      </TabList>
+
+      <TabPanel name="overview">Project summary.</TabPanel>
+      <TabPanel name="activity">Recent changes.</TabPanel>
+    </Tabs>
+  )
+}
+```
+
+Listen for bubbling `TabsChangeEvent` events with `onTabsChange` from `remix/ui/tabs/primitives`.
+
+```tsx
+import { onTabsChange } from 'remix/ui/tabs/primitives'
+import { Tabs, TabList, Tab, TabPanel } from 'remix/ui/tabs'
+
+export function TrackedTabs() {
+  return (
+    <div
+      mix={[
+        onTabsChange((event) => {
+          console.log(event.previousActiveTab, event.activeTab)
+        }),
+      ]}
+    >
+      <Tabs defaultActiveTab="overview">
+        <TabList aria-label="Project sections">
+          <Tab name="overview">Overview</Tab>
+          <Tab name="activity">Activity</Tab>
+        </TabList>
+        <TabPanel name="overview">Project summary.</TabPanel>
+        <TabPanel name="activity">Recent changes.</TabPanel>
+      </Tabs>
+    </div>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the markup and styles:
+
+```tsx
+import * as tabs from 'remix/ui/tabs/primitives'
+import { listStyle, panelStyle, rootStyle, tabStyle } from './tabs.styles'
+
+export function PrimitiveTabs() {
+  return (
+    <tabs.Context defaultActiveTab="overview">
+      <div mix={[rootStyle, tabs.root()]}>
+        <div mix={[listStyle, tabs.list()]} aria-label="Project sections">
+          <button mix={[tabStyle, tabs.tab({ name: 'overview' })]} type="button">
+            Overview
+          </button>
+          <button mix={[tabStyle, tabs.tab({ name: 'activity' })]} type="button">
+            Activity
+          </button>
+        </div>
+
+        <div mix={[panelStyle, tabs.panel({ name: 'overview' })]}>Project summary.</div>
+        <div mix={[panelStyle, tabs.panel({ name: 'activity' })]}>Recent changes.</div>
+      </div>
+    </tabs.Context>
+  )
+}
+```
+
+## `remix/ui/tabs`
+
+- `Tabs`: root component. Supports controlled `activeTab`, uncontrolled `defaultActiveTab`, `onActiveTabChange`, `disabled`, and `size: 'md' | 'lg'`.
+- `TabList`: tablist wrapper that lays out the tabs in a track and applies the tablist primitive.
+- `Tab`: button for one tab `name`. The active tab uses the toggle slider treatment and button-sized text. Pass `disabled` to prevent activation.
+- `TabPanel`: panel for one tab `name`.
+- `rootStyle`, `listStyle`, `tabStyle`, and `panelStyle`: flat style mixins used by the component markup.
+- `onTabsChange` and `TabsChangeEvent`: re-exported primitive event helpers.
+- `TabsProps`, `TabListProps`, `TabProps`, `TabPanelProps`, and `TabsSize`: public TypeScript types for the composed APIs.
+
+## `remix/ui/tabs/primitives`
+
+- `Context`: lower-level provider for custom tabs composition.
+- `root()`: wires the root element and bubbling change events.
+- `list()`: wires the tablist role and disabled state.
+- `tab({ name, disabled })`: wires a tab button with selected state, ids, keyboard activation, and pointer activation.
+- `panel({ name })`: wires the matching tab panel id, hidden state, inert state, and label relationship.
+- `onTabsChange(...)`: event mixin for the bubbling `TabsChangeEvent`.
+- `TabsChangeEvent`: bubbling event with `activeTab` and `previousActiveTab`.
+- `TabsContextProps`, `TabsContextValue`, `TabsRegisteredTab`, `TabsActivationDirection`, `TabsRootOptions`, `TabListOptions`, `TabOptions`, and `TabPanelOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- If neither `activeTab` nor `defaultActiveTab` is provided, the first enabled tab becomes active.
+- Arrow keys activate the next or previous enabled tab. `Home` and `End` activate the first and last enabled tabs.
+- `Enter`, `Space`, and pointer clicks activate the focused tab.
+- Root `disabled` disables every tab. Tab `disabled` only disables that tab.
+- Tabs and panels are linked with generated ids through `aria-controls`, `aria-labelledby`, and `aria-selected`.
+- Inactive panels receive `hidden`, `inert`, and `data-state="inactive"`.

package/{dist/ui/separator.js → src/ui/tabs/primitives.ts}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/separator';
+export * from '@remix-run/ui/tabs/primitives'

package/src/ui/{theme.ts → tabs.ts}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/theme'
+export * from '@remix-run/ui/tabs'

package/src/ui/toggle/README.md

@@ -0,0 +1,56 @@
+# toggle
+
+`toggle` is a style mixin for checkbox inputs rendered as switches. Use native input props for normal form behavior, and compose it with `remix/ui/toggle/primitives` when you need the headless toggle state helpers or custom hosts.
+
+## Usage
+
+```tsx
+import toggle from 'remix/ui/toggle'
+
+function NotificationSetting() {
+  return () => (
+    <label>
+      <input mix={toggle({ size: 'lg' })} defaultChecked />
+      Email notifications
+    </label>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitive when app code needs normalized checked state, toggle change events, or a non-input host:
+
+```tsx
+import toggle from 'remix/ui/toggle'
+import * as togglePrimitive from 'remix/ui/toggle/primitives'
+
+function CustomToggle() {
+  return () => (
+    <button
+      aria-label="Notifications"
+      mix={[...toggle(), togglePrimitive.control({ defaultChecked: true })]}
+    />
+  )
+}
+```
+
+## `remix/ui/toggle`
+
+- `toggle(options)`: styles a native checkbox input as a switch and supplies `type="checkbox"` plus `role="switch"` when the host is an `<input>` without an explicit non-checkbox `type`. Supports `size: 'md' | 'lg'` and defaults to `'md'`.
+- `onToggleChange(handler)`: re-exported primitive event mixin.
+- `ToggleChangeEvent`: re-exported primitive event class.
+- `ToggleSize` and `ToggleOptions`: public TypeScript types for the style mixin.
+
+## `remix/ui/toggle/primitives`
+
+- `control(options)`: wires a boolean switch control with checked state, ARIA, keyboard, and native input behavior.
+- `onToggleChange(handler)`: event mixin for bubbling toggle changes.
+- `ToggleChangeEvent`: event class dispatched when a toggle changes.
+- `ToggleControlOptions`: primitive options for controlled and uncontrolled state.
+
+## Behavior Notes
+
+- Checked styles apply through `:checked`, `[aria-checked="true"]`, or `[data-state="checked"]`.
+- Native checkbox switches use the native `checked` attribute for state. Custom hosts use `role="switch"` and `aria-checked="true"` or `aria-checked="false"`.
+- Every switch needs an accessible name, usually from visible label text, `aria-label`, or `aria-labelledby`.

package/src/ui/toggle/primitives/README.md

@@ -0,0 +1,56 @@
+# toggle
+
+`toggle` is a style mixin for checkbox inputs rendered as switches. Use native input props for normal form behavior, and compose it with `remix/ui/toggle/primitives` when you need the headless toggle state helpers or custom hosts.
+
+## Usage
+
+```tsx
+import toggle from 'remix/ui/toggle'
+
+function NotificationSetting() {
+  return () => (
+    <label>
+      <input mix={toggle({ size: 'lg' })} defaultChecked />
+      Email notifications
+    </label>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitive when app code needs normalized checked state, toggle change events, or a non-input host:
+
+```tsx
+import toggle from 'remix/ui/toggle'
+import * as togglePrimitive from 'remix/ui/toggle/primitives'
+
+function CustomToggle() {
+  return () => (
+    <button
+      aria-label="Notifications"
+      mix={[...toggle(), togglePrimitive.control({ defaultChecked: true })]}
+    />
+  )
+}
+```
+
+## `remix/ui/toggle`
+
+- `toggle(options)`: styles a native checkbox input as a switch and supplies `type="checkbox"` plus `role="switch"` when the host is an `<input>` without an explicit non-checkbox `type`. Supports `size: 'md' | 'lg'` and defaults to `'md'`.
+- `onToggleChange(handler)`: re-exported primitive event mixin.
+- `ToggleChangeEvent`: re-exported primitive event class.
+- `ToggleSize` and `ToggleOptions`: public TypeScript types for the style mixin.
+
+## `remix/ui/toggle/primitives`
+
+- `control(options)`: wires a boolean switch control with checked state, ARIA, keyboard, and native input behavior.
+- `onToggleChange(handler)`: event mixin for bubbling toggle changes.
+- `ToggleChangeEvent`: event class dispatched when a toggle changes.
+- `ToggleControlOptions`: primitive options for controlled and uncontrolled state.
+
+## Behavior Notes
+
+- Checked styles apply through `:checked`, `[aria-checked="true"]`, or `[data-state="checked"]`.
+- Native checkbox switches use the native `checked` attribute for state. Custom hosts use `role="switch"` and `aria-checked="true"` or `aria-checked="false"`.
+- Every switch needs an accessible name, usually from visible label text, `aria-label`, or `aria-labelledby`.

package/src/ui/toggle/primitives.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/ui/toggle/primitives'

package/src/ui/toggle.ts

@@ -0,0 +1,3 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/ui/toggle'
+export { default } from '@remix-run/ui/toggle'

package/dist/ui/glyph.d.ts

@@ -1,2 +0,0 @@
-export * from '@remix-run/ui/glyph';
-//# sourceMappingURL=glyph.d.ts.map

package/dist/ui/glyph.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../../src/ui/glyph.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA"}

package/dist/ui/scroll-lock.d.ts

@@ -1,2 +0,0 @@
-export * from '@remix-run/ui/scroll-lock';
-//# sourceMappingURL=scroll-lock.d.ts.map

package/dist/ui/scroll-lock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroll-lock.d.ts","sourceRoot":"","sources":["../../src/ui/scroll-lock.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}

package/dist/ui/separator.d.ts

@@ -1,2 +0,0 @@
-export * from '@remix-run/ui/separator';
-//# sourceMappingURL=separator.d.ts.map

package/dist/ui/separator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/ui/separator.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA"}

package/dist/ui/theme.d.ts

@@ -1,2 +0,0 @@
-export * from '@remix-run/ui/theme';
-//# sourceMappingURL=theme.d.ts.map

package/dist/ui/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA"}

package/src/ui/glyph/README.md

@@ -1,72 +0,0 @@
-# glyph
-
-`Glyph` renders references into a shared SVG sprite sheet. Render a glyph sheet once, then render individual `Glyph` instances by name.
-
-## Usage
-
-```tsx
-import { Glyph } from 'remix/ui/glyph'
-import { RMX_01_GLYPHS } from 'remix/ui/theme'
-
-function Layout() {
-  return (
-    <html>
-      <body>
-        <RMX_01_GLYPHS />
-        <button aria-label="Delete">
-          <Glyph name="trash" />
-        </button>
-      </body>
-    </html>
-  )
-}
-```
-
-Most glyphs are decorative because the surrounding control supplies the accessible name. `Glyph` sets `aria-hidden` by default in that case.
-
-```tsx
-<button aria-label="Search">
-  <Glyph name="search" />
-</button>
-```
-
-Give the glyph its own label only when the SVG itself is the accessible element.
-
-```tsx
-<Glyph aria-label="Search" name="search" viewBox="0 0 20 20" width="24" />
-```
-
-Use `createGlyphSheet` when a theme or app provides its own complete glyph set. The generated sheet exposes the stable symbol ids and the original values for reuse.
-
-```tsx
-import { createGlyphSheet, type GlyphValues } from 'remix/ui/glyph'
-
-declare const glyphValues: GlyphValues
-
-export const AppGlyphs = createGlyphSheet(glyphValues)
-
-AppGlyphs.ids.trash
-AppGlyphs.values.trash
-```
-
-## `glyph.*`
-
-- `Glyph`: renders an `<svg>` with a `<use>` element that points at the package-owned symbol id for `name`.
-- `createGlyphSheet(values)`: creates a hidden SVG sprite sheet component from a complete glyph value set.
-- `GlyphName`: typed union of supported glyph names.
-- `GlyphProps`: props accepted by `Glyph`.
-- `GlyphSheetProps`: props accepted by generated glyph sheet components.
-- `GlyphSymbol`: SVG symbol value accepted by glyph value maps.
-- `GlyphValues`: object shape expected by `createGlyphSheet`.
-- `GlyphSheetComponent`: generated sprite sheet component with `ids` and `values` attached.
-
-The built-in glyph names are `add`, `alert`, `check`, `chevronDown`, `chevronVertical`, `chevronUp`, `chevronRight`, `close`, `copy`, `edit`, `expand`, `info`, `menu`, `open`, `search`, `spinner`, and `trash`.
-
-## Behavior Notes
-
-- Render the glyph sheet once before rendering glyph instances that reference it.
-- `createGlyphSheet` renders a hidden zero-size SVG and clones each provided `<symbol>` with the stable package id.
-- `Glyph` is `aria-hidden` by default when no accessible label or labelled-by relationship is provided.
-- Labeled glyphs keep their accessible label and do not force `aria-hidden`.
-- Host SVG props such as `viewBox`, `width`, `mix`, and `aria-label` are preserved.
-- `createGlyphSheet` throws if a provided glyph value is not a `<symbol>` element.

package/src/ui/scroll-lock/README.md

@@ -1,33 +0,0 @@
-# scroll-lock
-
-`scroll-lock` locks document scrolling while a floating or modal surface is open. Use `lockScroll` directly for imperative flows or `lockScrollOnToggle` for popover-style elements that emit `beforetoggle`.
-
-## Usage
-
-```tsx
-import { lockScroll, lockScrollOnToggle } from 'remix/ui/scroll-lock'
-
-function DialogSurface() {
-  return <div popover="auto" mix={lockScrollOnToggle()} />
-}
-
-function openModal() {
-  let unlock = lockScroll()
-
-  // Later, when the modal closes:
-  unlock()
-}
-```
-
-## API
-
-- `lockScroll(document?)`: locks the target document and returns an idempotent unlock function.
-- `lockScrollOnToggle()`: mixin that locks on `beforetoggle` open, unlocks on close, and releases the lock when the host unmounts.
-
-## Behavior Notes
-
-- The lock stores and restores the document element's inline `overflow` and `scrollbarGutter`.
-- Scroll position is restored when the last active lock is released.
-- Multiple locks are reference-counted, so the document stays locked until every unlock function has run.
-- When a scrollbar is present and computed `scrollbar-gutter` is `auto`, the document reserves a stable gutter while locked.
-- `lockScrollOnToggle` uses the host element's owner document.

package/src/ui/scroll-lock.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/scroll-lock'

package/src/ui/separator.ts

@@ -1,2 +0,0 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/separator'

package/src/ui/theme/README.md

@@ -1,103 +0,0 @@
-# theme
-
-`theme` provides Remix UI design tokens, theme creation, glyph contracts, and the built-in `RMX_01` preset. Use it to install CSS custom properties once and consume typed token references in component styles.
-
-## Usage
-
-```tsx
-import { createTheme, theme } from 'remix/ui/theme'
-import { css } from 'remix/ui'
-
-let Theme = createTheme({
-  space: {
-    none: '0px',
-    px: '1px',
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    xxl: '24px',
-  },
-  radius: { none: '0px', sm: '4px', md: '8px', lg: '12px', xl: '16px', full: '9999px' },
-  fontFamily: { sans: 'Inter, sans-serif', mono: 'monospace' },
-  fontSize: {
-    xxxs: '10px',
-    xxs: '11px',
-    xs: '12px',
-    sm: '14px',
-    md: '16px',
-    lg: '18px',
-    xl: '20px',
-    xxl: '28px',
-  },
-  lineHeight: { tight: '1.2', normal: '1.5', relaxed: '1.7' },
-  letterSpacing: { tight: '-0.02em', normal: '0', meta: '0.06em', wide: '0.08em' },
-  fontWeight: { normal: '400', medium: '500', semibold: '600', bold: '700' },
-  control: { height: { sm: '28px', md: '32px', lg: '36px' } },
-  surface: { lvl0: '#fff', lvl1: '#f8fafc', lvl2: '#f5f5f5', lvl3: '#f1f5f9', lvl4: '#e9eef6' },
-  shadow: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
-  colors: {
-    text: { primary: '#111827', secondary: '#374151', muted: '#6b7280', link: '#2563eb' },
-    border: { subtle: '#e5e7eb', default: '#d1d5db', strong: '#9ca3af' },
-    focus: { ring: '#3b82f6' },
-    overlay: { scrim: 'rgb(0 0 0 / 0.45)' },
-    action: {
-      primary: {
-        background: '#2563eb',
-        backgroundHover: '#1d4ed8',
-        backgroundActive: '#1e40af',
-        foreground: '#fff',
-        border: '#2563eb',
-      },
-      secondary: {
-        background: '#fff',
-        backgroundHover: '#f8fafc',
-        backgroundActive: '#f1f5f9',
-        foreground: '#111827',
-        border: '#d1d5db',
-      },
-      danger: {
-        background: '#dc2626',
-        backgroundHover: '#b91c1c',
-        backgroundActive: '#991b1b',
-        foreground: '#fff',
-        border: '#dc2626',
-      },
-    },
-  },
-})
-
-let card = css({
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-})
-
-function Layout() {
-  return (
-    <body>
-      <Theme />
-      <article mix={card}>Project status</article>
-    </body>
-  )
-}
-```
-
-## `theme.*`
-
-- `theme`: typed CSS variable reference contract, such as `theme.space.md` and `theme.colors.text.primary`.
-- `createTheme(values, options?)`: creates a style component with `cssText`, `selector`, `values`, `vars`, and `Style`.
-- `RMX_01`: built-in theme component.
-- `RMX_01_GLYPHS`: built-in glyph sheet component.
-- `glyphContract` and `glyphNames`: stable glyph ids and supported glyph names.
-- `ThemeValues`, `ThemeVars`, `ThemeComponent`, `ThemeStyleProps`, `CreateThemeOptions`, and `ThemeMix`: public TypeScript types for custom themes.
-- `GlyphName`, `GlyphSymbol`, and `GlyphValues`: public TypeScript types for glyph contracts.
-
-## Behavior Notes
-
-- `theme` values are CSS variable references, not raw token values.
-- `createTheme` serializes token values into CSS custom properties and renders a `<style data-rmx-theme>` tag.
-- The default selector is `:root`; pass `selector` for scoped themes.
-- The base reset is included by default, emitted in `rmx-reset`, and can be disabled with `reset: false`.
-- The built-in components consume this token contract through their style mixins.
-- Render `<RMX_01 />` and `<RMX_01_GLYPHS />` once when using the built-in theme and glyph preset.