@krapwoo/ds-viewer 0.9.0 → 0.10.0

package/dist/cli/dev.js

@@ -6,7 +6,7 @@ import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
 import { resolveConfig } from "./config.js";
 import { sync } from "./sync.js";
-import { clearDevLock, liveDevLock, missingWorkspaceFiles, workspacePath, writeDevLock, writeWorkspace } from "./workspace.js";
+import { clearDevLock, liveDevLock, missingWorkspaceFiles, readEndpointRecord, workspacePath, writeDevLock, writeEndpointRecord, writeWorkspace } from "./workspace.js";
 import { findFreePort } from "./port.js";
 import { globBaseFolder } from "./glob.js";
 import { buildVersionStatus, createVersionController, defaultPreferencesDir, readPersonalAutoCheck, resolveAutoCheck, runUpdateCheck, statusFromCheck, writeUpdateFile, writeVersionFile, } from "./updateCheck.js";
@@ -362,6 +362,44 @@ export function repairWorkspaceIfMissing(deps) {
     sync(config);
     return { missing, repaired: true };
 }
+function listenOnce(server, port) {
+    return new Promise((resolve, reject) => {
+        const onError = (error) => {
+            server.removeListener('listening', onListening);
+            reject(error);
+        };
+        const onListening = () => {
+            server.removeListener('error', onError);
+            resolve(server.address().port);
+        };
+        server.once('error', onError);
+        server.once('listening', onListening);
+        server.listen(port, '127.0.0.1');
+    });
+}
+/** Resolves the update endpoint's real port: the stored record's port when it's actually free, a
+ *  fresh OS-assigned one otherwise. Tries the real bind directly, once — a separate "is this free?"
+ *  probe followed by a real bind would leave a window for something else to take the port in
+ *  between, and could never tell "a foreign process holds it" from "nothing does" anyway, which
+ *  Part 1 says this must never try to resolve: a bind failure for any reason falls back the same
+ *  way, never killing, probing, or assuming ownership of whatever holds it. Mutates
+ *  `secretHolder.secret` to a fresh value only on that fallback path — reusing the stored *port*
+ *  without the *secret* minted for it would pair a stale secret with an address nobody recorded. */
+export async function bindEndpointServer(server, secretHolder, storedPort) {
+    if (storedPort !== undefined) {
+        try {
+            const port = await listenOnce(server, storedPort);
+            return { port, reused: true };
+        }
+        catch {
+            // Taken — by a foreign process, a second catalog, anything. Fall through to a fresh port and
+            // secret below; never retry the same port or investigate what's holding it.
+        }
+    }
+    secretHolder.secret = randomBytes(24).toString('hex');
+    const port = await listenOnce(server, 0);
+    return { port, reused: false };
+}
 export async function dev(initialConfig, devOptions = {}) {
     assertLocalInstall(initialConfig.projectRoot);
     const ownVersion = readOwnVersion(import.meta.dirname);
@@ -480,14 +518,20 @@ export async function dev(initialConfig, devOptions = {}) {
     let updateEndpoint;
     let endpointServer;
     if (!devOptions.noUpdateEndpoint) {
+        // Reused across restarts so an already-open page's baked-in endpoint keeps working: the
+        // stored record's secret is the candidate here, replaced by `bindEndpointServer` itself only
+        // if the stored port turns out to be taken.
+        const stored = readEndpointRecord(config);
+        endpointDeps.secret = stored?.secret ?? secret;
         endpointServer = createUpdateEndpoint(endpointDeps);
-        await new Promise((resolve) => endpointServer.listen(0, '127.0.0.1', resolve));
-        const endpointPort = endpointServer.address().port;
+        const binding = await bindEndpointServer(endpointServer, endpointDeps, stored?.port);
+        if (!binding.reused)
+            writeEndpointRecord(config, { port: binding.port, secret: endpointDeps.secret });
         // Printed for the same reason the Metro port above is printed: a developer (or Task 20's own
         // verification) checking the endpoint directly (e.g. with curl) needs its port — the secret
         // itself is never printed; the endpoint rejects anything that doesn't already have it.
-        console.log(`Update endpoint listening on 127.0.0.1:${endpointPort}`);
-        updateEndpoint = { baseUrl: `http://127.0.0.1:${endpointPort}`, secret };
+        console.log(`Update endpoint listening on 127.0.0.1:${binding.port}`);
+        updateEndpoint = { baseUrl: `http://127.0.0.1:${binding.port}`, secret: endpointDeps.secret };
     }
     else {
         console.log('Update endpoint disabled for this run (--no-update-endpoint).');

package/dist/cli/workspace.js

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { chmodSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { globBaseFolder } from "./glob.js";
 import { DEFAULT_WORKSPACE_DIR } from "./types.js";
@@ -151,6 +151,42 @@ export function liveDevLock(config, ownPid = process.pid) {
         return undefined;
     return lock;
 }
+const ENDPOINT_RECORD_FILE = 'endpoint.json';
+/** `bindEndpointServer` never writes a secret shorter than this (`randomBytes(24).toString('hex')`
+ *  is 48 characters), so a shorter one can only come from a hand-written record — but a
+ *  hand-written `{"secret":""}` is reused verbatim and `secretMatches` in `cli/endpoint.ts`
+ *  compares two zero-length buffers as equal, authenticating every request. Minor finding,
+ *  correction pass 4: treated the same as any other invalid record field below. */
+const MIN_SECRET_LENGTH = 32;
+/** The endpoint address a previous `dev` run bound, so a restart can reuse it instead of minting a
+ *  fresh one — otherwise an already-open page's baked-in endpoint goes stale on every restart.
+ *  Missing, corrupt, or partially-written is all treated the same: absent, so the caller falls
+ *  back to generating a fresh pair exactly as if `dev` had never run before. */
+export function readEndpointRecord(config) {
+    const recordPath = workspacePath(config, ENDPOINT_RECORD_FILE);
+    if (!existsSync(recordPath))
+        return undefined;
+    try {
+        const record = JSON.parse(readFileSync(recordPath, 'utf8'));
+        if (typeof record.port !== 'number' || record.port <= 0 || typeof record.secret !== 'string' || record.secret.length < MIN_SECRET_LENGTH)
+            return undefined;
+        return { port: record.port, secret: record.secret };
+    }
+    catch {
+        return undefined; // A partial write from a process that crashed mid-write owns nothing.
+    }
+}
+/** Written with mode 0600 — not a new exposure (the same secret already lands in cleartext inside
+ *  the generated `entry.tsx`, see `writeWorkspace`), but it must not be any more exposed than
+ *  that. `chmodSync` runs in addition to `writeFileSync`'s own `mode` option: that option only
+ *  applies when the file is newly created, so a pre-existing record left with looser permissions
+ *  would otherwise keep them across every later rewrite. */
+export function writeEndpointRecord(config, record) {
+    mkdirSync(workspacePath(config), { recursive: true });
+    const recordPath = workspacePath(config, ENDPOINT_RECORD_FILE);
+    writeFileSync(recordPath, `${JSON.stringify(record, null, 2)}\n`, { mode: 0o600 });
+    chmodSync(recordPath, 0o600);
+}
 /** The files `writeWorkspace` always writes: the ones that define the workspace to Expo and Metro.
  *  `babel.config.js` is conditional and the update files are written separately, so neither counts
  *  as missing here. */

package/dist/native/catalog/tokens.js

@@ -26,6 +26,30 @@ export const CATALOG_TYPE = {
     '3xl': 32,
     '4xl': 40,
 };
+export const CATALOG_FONT = { code: 'Menlo, monospace' };
+/** The catalog's fixed set of typography roles, each a complete `fontSize`/`fontWeight`/
+ *  `lineHeight` (plus `letterSpacing`/`textTransform`/`fontFamily` where the role needs them)
+ *  built on `CATALOG_TYPE`. Every catalog-chrome text style spreads one of these rather than
+ *  setting its own typography properties directly (enforced by
+ *  `__tests__/textRoles.test.ts`). */
+export const CATALOG_TEXT = {
+    pageTitle: { fontSize: CATALOG_TYPE.pageTitle, fontWeight: '700', lineHeight: 34 },
+    heading1: { fontSize: CATALOG_TYPE['2xl'], fontWeight: '700', lineHeight: 30 },
+    heading2: { fontSize: CATALOG_TYPE.xl, fontWeight: '700', lineHeight: 24 },
+    heading3: { fontSize: CATALOG_TYPE.lg, fontWeight: '700', lineHeight: 22 },
+    icon: { fontSize: CATALOG_TYPE.lg, fontWeight: '400', lineHeight: 22 },
+    body: { fontSize: CATALOG_TYPE.md, fontWeight: '400', lineHeight: 20 },
+    bodyStrong: { fontSize: CATALOG_TYPE.md, fontWeight: '700', lineHeight: 20 },
+    caption: { fontSize: CATALOG_TYPE.sm, fontWeight: '400', lineHeight: 18 },
+    captionStrong: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', lineHeight: 18 },
+    label: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', lineHeight: 18, letterSpacing: 0.72, textTransform: 'uppercase' },
+    micro: { fontSize: CATALOG_TYPE.xs, fontWeight: '400', lineHeight: 14 },
+    microLabel: { fontSize: CATALOG_TYPE.xs, fontWeight: '700', lineHeight: 14, letterSpacing: 0.6, textTransform: 'uppercase' },
+    code: { fontSize: CATALOG_TYPE.md, fontWeight: '400', lineHeight: 20, fontFamily: CATALOG_FONT.code },
+    codeSmall: { fontSize: CATALOG_TYPE.sm, fontWeight: '400', lineHeight: 18, fontFamily: CATALOG_FONT.code },
+    codeSmallStrong: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', lineHeight: 18, fontFamily: CATALOG_FONT.code },
+    codeMicro: { fontSize: CATALOG_TYPE.xs, fontWeight: '400', lineHeight: 14, fontFamily: CATALOG_FONT.code },
+};
 export const CATALOG_SPACE = {
     xs: 4,
     sm: 8,
@@ -69,21 +93,42 @@ export const CATALOG_LAYOUT = {
 /** Max width of the main content column. */
 export const CATALOG_MAX_CONTENT_WIDTH = 1200;
 /** When to reach for each catalog-chrome type size. Rendered in the framework catalog's Type
- *  Scale page. */
+ *  Scale page. Every size is now consumed through a `CATALOG_TEXT` role (see `CATALOG_TEXT_USE`)
+ *  rather than directly. */
 export const CATALOG_TYPE_USE = {
-    xs: 'Sidebar group labels (uppercase); a prop\'s type annotation.',
-    tableHeader: 'Grid column headers and list cell captions (uppercase).',
-    sm: 'Breadcrumb, catalog caption, block labels, prop names and descriptions.',
-    panelHeading: 'Reference-panel headings: Guidance, Quick reference, Props (uppercase).',
-    md: 'Default body text: descriptions, nav links, grid row headers, quick-reference rows, the filter field.',
-    lg: 'Pager arrows and the filter field\'s clear (×) glyph.',
-    brand: 'The app name at the top of the sidebar.',
-    xl: "The major-update banner's close (×) glyph.",
-    '2xl': "The update page's version numbers and the arrow between them.",
-    pageTitle: 'The selected page\'s title.',
+    xs: 'Backs the `micro`, `microLabel` and `codeMicro` roles: token values and meta captions; sidebar group labels and OS badges (uppercase); a prop\'s type and default value (monospace).',
+    tableHeader: 'Reserved — no current consumer; grid column headers and list cell captions now use the `captionStrong` role (built on `sm`).',
+    sm: 'Backs the `caption`, `captionStrong`, `label`, `codeSmall` and `codeSmallStrong` roles: breadcrumbs, block/prop descriptions, swatch/token names, table captions, monospace prop names and file paths.',
+    panelHeading: 'Reserved — no current consumer; reference-panel and update-page headings now use the `label` role (built on `sm`).',
+    md: 'Backs the `body`, `bodyStrong` and `code` roles: descriptions, nav links, the filter field, switch labels, a long unbroken value that needs to wrap at its \'/\'s (monospace).',
+    lg: 'Backs the `heading3` and `icon` roles: a result note\'s title; pager arrows and the filter field\'s clear (×) glyph.',
+    brand: 'Reserved — no current consumer; the sidebar app name now uses the `heading2` role (built on `xl`).',
+    xl: 'Backs the `heading2` role: the app name at the top of the sidebar.',
+    '2xl': 'Backs the `heading1` role: the update page\'s version numbers and the arrow between them.',
+    pageTitle: 'Backs the `pageTitle` role: the selected page\'s title, including the update page\'s own title.',
     '3xl': 'Reserved — no current consumer.',
     '4xl': 'Reserved — no current consumer.',
 };
+/** When to reach for each catalog-chrome typography role. Rendered in the framework catalog's
+ *  Type Scale page. */
+export const CATALOG_TEXT_USE = {
+    pageTitle: 'The selected page\'s title, including the update page\'s own title.',
+    heading1: 'The update page\'s version numbers and the arrow between them.',
+    heading2: 'The app name at the top of the sidebar.',
+    heading3: 'A result note\'s title (the update page\'s success/failure banner).',
+    icon: 'Glyph-only controls: pager arrows, the filter field\'s clear (×) glyph, the update banner\'s close (×) glyph.',
+    body: 'Default body text: descriptions, nav links, the filter field, update-page facts/notes/steps.',
+    bodyStrong: 'Emphasised body text: grid/list row headers, switch and step labels, inline-bold notice text.',
+    caption: 'Secondary text: breadcrumbs, status captions, block/prop descriptions, sidebar subtitle/footer, update-page captions.',
+    captionStrong: 'Emphasised secondary text: grid column headers, grid/list/table captions, reference-panel subheadings, swatch/token names, replay and result links, step-icon glyphs.',
+    label: 'Uppercase labels and headings: block and preview-frame labels, token-section labels, reference-panel and update-page headings.',
+    micro: 'The smallest text: token values and meta captions, a prop\'s default-value label.',
+    microLabel: 'Uppercase micro labels: variant-group names, sidebar group labels, OS badges.',
+    code: 'Monospace body text: a long unbroken value that needs to wrap at its \'/\'s.',
+    codeSmall: 'Monospace secondary text: a prop\'s optional marker, the update page\'s inline code, file paths and log lines.',
+    codeSmallStrong: 'Emphasised monospace secondary text: a prop\'s own name.',
+    codeMicro: 'Monospace micro text: a prop\'s type and default value.',
+};
 /** When to reach for each catalog-chrome spacing step. Rendered in the framework catalog's
  *  Spacing page. */
 export const CATALOG_SPACE_USE = {
@@ -127,7 +172,10 @@ export const CATALOG_COLOR = {
     accentSubtle: '#e9efff',
     /** 3px keyboard focus ring on every catalog control. */
     focusRing: '#c9d7ff',
-    code: 'Menlo',
+    /** @deprecated kept for the public API; re-points at `CATALOG_FONT.code` so there is one source
+     *  of truth. New code should reach for `CATALOG_FONT.code` (or a `CATALOG_TEXT` `code*` role)
+     *  instead. */
+    code: CATALOG_FONT.code,
     /** Major-update banner background/border/text (design §5 "Viewer notice"). */
     warning: '#8a4b00',
     warningSubtle: '#fff4e0',

package/native/catalog/BoundedOverlayViewport.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-import { CATALOG_COLOR, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_TEXT } from './tokens';
 import { isFiniteOverlaySize, overlayStageDimensions, resolveOverlayViewport, type OverlaySlot } from './overlayViewport';
 
 function isWeb(): boolean {
@@ -108,5 +108,5 @@ const styles = StyleSheet.create({
     height: '100%',
     borderWidth: 0,
   },
-  status: { position: 'absolute', fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  status: { position: 'absolute', ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/CatalogButton.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, type View } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 
 /** The viewer's own button, for catalog chrome and demo triggers (not an app component): a rounded
  *  rectangle, primary in the accent blue, secondary outlined. `disabled` greys it and stops the
@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
   disabled: { backgroundColor: CATALOG_COLOR.controlDisabled, borderColor: CATALOG_COLOR.controlDisabled },
   // Same ring as the sidebar's: an outline, so focusing never shifts the layout.
   focus: { outlineWidth: CATALOG_LAYOUT.focusRingWidth, outlineStyle: 'solid', outlineColor: CATALOG_COLOR.focusRing } as object,
-  label: { fontSize: CATALOG_TYPE.md, fontWeight: '700' },
+  label: { ...CATALOG_TEXT.bodyStrong },
   labelPrimary: { color: '#ffffff' },
   labelSecondary: { color: CATALOG_COLOR.text },
   labelBusy: { color: CATALOG_COLOR.textMuted },

package/native/catalog/CatalogSearchInput.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS, CATALOG_LAYOUT } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS, CATALOG_LAYOUT } from './tokens';
 
 /**
  * Plain search input for filtering the catalog's own sidebar nav. Deliberately built from bare
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
     backgroundColor: CATALOG_COLOR.surfaceMuted,
   },
   boxFocused: { outlineWidth: CATALOG_LAYOUT.focusRingWidth, outlineStyle: 'solid', outlineColor: CATALOG_COLOR.focusRing },
-  input: { flex: 1, fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.text, padding: 0 },
+  input: { flex: 1, ...CATALOG_TEXT.body, color: CATALOG_COLOR.text, padding: 0 },
   // A full 44×44 target: react-native-web does not honor hitSlop for pointer or keyboard.
   clearButton: {
     width: CATALOG_LAYOUT.controlSize, height: CATALOG_LAYOUT.controlSize,
@@ -82,5 +82,5 @@ const styles = StyleSheet.create({
   },
   focusRing: { outlineWidth: CATALOG_LAYOUT.focusRingWidth, outlineStyle: 'solid', outlineColor: CATALOG_COLOR.focusRing },
   clearButtonActive: { backgroundColor: CATALOG_COLOR.surfacePressed },
-  clear: { fontSize: CATALOG_TYPE.lg, color: CATALOG_COLOR.textMuted, paddingHorizontal: 2 },
+  clear: { ...CATALOG_TEXT.icon, color: CATALOG_COLOR.textMuted, paddingHorizontal: 2 },
 });

package/native/catalog/CatalogShell.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Platform, Pressable, ScrollView, StyleSheet, Text, View, findNodeHandle } from 'react-native';
 import type { ImageSourcePropType } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_MAX_CONTENT_WIDTH, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_MAX_CONTENT_WIDTH, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { CatalogSidebar } from './CatalogSidebar';
 import { SectionBlock } from './SectionBlock';
 import { UpdatePanel } from './UpdatePanel';
@@ -101,11 +101,11 @@ const bannerStyles = StyleSheet.create({
     paddingHorizontal: 14,
     marginBottom: 18,
   },
-  text: { flex: 1, fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.warning },
-  bold: { fontWeight: '700' },
-  link: { color: CATALOG_COLOR.warning, fontWeight: '700', textDecorationLine: 'underline' },
+  text: { flex: 1, ...CATALOG_TEXT.body, color: CATALOG_COLOR.warning },
+  bold: { ...CATALOG_TEXT.bodyStrong },
+  link: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.warning, textDecorationLine: 'underline' },
   close: { width: 32, height: 32, borderRadius: CATALOG_RADIUS.sm, alignItems: 'center', justifyContent: 'center' },
-  closeGlyph: { fontSize: CATALOG_TYPE.xl, color: CATALOG_COLOR.warning },
+  closeGlyph: { ...CATALOG_TEXT.icon, color: CATALOG_COLOR.warning },
 });
 
 /**
@@ -327,7 +327,7 @@ const styles = StyleSheet.create({
   // A `BoundedOverlayViewport` child document's own root: no sidebar/chrome, just the one
   // addressed node — sized by whatever that node itself renders, not the catalog's own layout.
   overlayDocumentRoot: { flex: 1 },
-  overlayUnavailable: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.textMuted, padding: CATALOG_SPACE.lg },
+  overlayUnavailable: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted, padding: CATALOG_SPACE.lg },
   main: { flex: 1 },
   mainContent: {
     width: '100%',
@@ -336,5 +336,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: CATALOG_LAYOUT.mainPaddingX,
     paddingBottom: CATALOG_SPACE['3xl'],
   },
-  empty: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.textMuted },
+  empty: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/CatalogSidebar.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { View, Text, ScrollView, Pressable, StyleSheet, Image } from 'react-native';
 import type { ImageSourcePropType, LayoutChangeEvent, NativeSyntheticEvent, ImageLoadEventData } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { logoLayout } from './logoLayout';
 import { filterGroups, hashForId, UPDATE_PAGE_ID } from './catalogNavigation';
 import type { NavGroup } from './types';
@@ -153,8 +153,8 @@ export function CatalogSidebar<TId extends string>({
   const onLogoError = () => setLogoFailed(true);
   // Wrap detection for the "mark" row: the name Text's own measured height, not `onTextLayout`
   // (react-native-web's `Text` doesn't implement it) and not a character-count heuristic (wraps at
-  // a different length per name). More than one line of `CATALOG_TYPE.brand` means it wrapped.
-  const NAME_LINE_HEIGHT = Math.round(CATALOG_TYPE.brand * 1.3);
+  // a different length per name). More than one line of `CATALOG_TEXT.heading2` means it wrapped.
+  const NAME_LINE_HEIGHT = CATALOG_TEXT.heading2.lineHeight;
   const onNameLayout = (e: LayoutChangeEvent) => {
     setNameWrapped(e.nativeEvent.layout.height > NAME_LINE_HEIGHT * 1.5);
   };
@@ -235,8 +235,8 @@ const styles = StyleSheet.create({
     paddingBottom: CATALOG_LAYOUT.sidebarPaddingTop,
   },
   header: { marginBottom: 20 },
-  logo: { fontSize: CATALOG_TYPE.brand, fontWeight: '800', color: CATALOG_COLOR.text },
-  subtitle: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, marginTop: 2 },
+  logo: { ...CATALOG_TEXT.heading2, color: CATALOG_COLOR.text },
+  subtitle: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted, marginTop: 2 },
   subtitleAfterWordmark: { marginTop: CATALOG_LAYOUT.logoCaptionGap },
   mark: { width: CATALOG_LAYOUT.logoMark, height: CATALOG_LAYOUT.logoMark },
   wordmark: { height: CATALOG_LAYOUT.logoWordmarkHeight, alignSelf: 'flex-start' },
@@ -244,13 +244,12 @@ const styles = StyleSheet.create({
   inlineHeader: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md },
   inlineHeaderTop: { alignItems: 'flex-start' },
   inlineText: { flex: 1, minWidth: 0 },
-  empty: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, paddingHorizontal: CATALOG_LAYOUT.navItemPaddingX, paddingVertical: 8 },
+  empty: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted, paddingHorizontal: CATALOG_LAYOUT.navItemPaddingX, paddingVertical: 8 },
   footerContainer: {
     borderTopWidth: 1,
     borderTopColor: CATALOG_COLOR.borderHairline,
     paddingHorizontal: CATALOG_LAYOUT.sidebarPaddingX,
-    paddingTop: 10,
-    paddingBottom: 14,
+    paddingVertical: CATALOG_SPACE.md,
   },
   footerLink: {
     flexDirection: 'row',
@@ -263,13 +262,10 @@ const styles = StyleSheet.create({
   footerLinkHover: { backgroundColor: CATALOG_COLOR.surfacePressed },
   footerLinkActive: { backgroundColor: CATALOG_COLOR.accentSubtle },
   footerDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: CATALOG_COLOR.accent, flexShrink: 0 },
-  footerLabel: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
-  footerLabelActive: { color: CATALOG_COLOR.accent, fontWeight: '700' },
+  footerLabel: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  footerLabelActive: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.accent },
   groupLabel: {
-    fontSize: CATALOG_TYPE.xs,
-    fontWeight: '800',
-    letterSpacing: 1,
-    textTransform: 'uppercase',
+    ...CATALOG_TEXT.microLabel,
     color: CATALOG_COLOR.text,
     marginTop: 22,
     marginBottom: 7,
@@ -285,6 +281,6 @@ const styles = StyleSheet.create({
   itemHover: { backgroundColor: CATALOG_COLOR.surfacePressed },
   itemActive: { backgroundColor: CATALOG_COLOR.accentSubtle },
   focusRing: { outlineWidth: CATALOG_LAYOUT.focusRingWidth, outlineStyle: 'solid', outlineColor: CATALOG_COLOR.focusRing },
-  label: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.textMuted },
-  labelActive: { color: CATALOG_COLOR.accent, fontWeight: '700' },
+  label: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted },
+  labelActive: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.accent },
 });

package/native/catalog/ComparisonGrid.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TEXT } from './tokens';
 import { COLUMN_MIN_WIDTH, MATRIX_LAYOUT, axisItems, cellKey, gridMinWidth, indexCells, validateComparison } from './comparison';
 import { SpecimenContent, SpecimenSurface } from './SpecimenSurface';
 import { SpecimenAddressProvider } from './SpecimenAddress';
@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
   headerCell: { backgroundColor: CATALOG_COLOR.surfaceMuted, justifyContent: 'center' },
   bodyRow: { minHeight: MATRIX_LAYOUT.rowMinHeight },
   specimenCell: { alignItems: 'center', justifyContent: 'center' },
-  headerText: { fontSize: CATALOG_TYPE.tableHeader, fontWeight: '800', letterSpacing: 0.44, color: CATALOG_COLOR.text },
-  rowHeaderText: { fontSize: CATALOG_TYPE.md, fontWeight: '700', color: CATALOG_COLOR.text },
-  unavailable: { fontSize: CATALOG_TYPE.sm, fontStyle: 'italic', textAlign: 'center', color: CATALOG_COLOR.textMuted },
+  headerText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
+  rowHeaderText: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
+  unavailable: { ...CATALOG_TEXT.caption, textAlign: 'center', color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/ComparisonGroups.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TEXT } from './tokens';
 import { COLUMN_MIN_WIDTH, MATRIX_LAYOUT, type ListGroup } from './comparison';
 import { SpecimenContent, SpecimenSurface } from './SpecimenSurface';
 import { SpecimenAddressProvider } from './SpecimenAddress';
@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     borderRightColor: CATALOG_COLOR.border,
   },
-  rowHeaderText: { fontSize: CATALOG_TYPE.md, fontWeight: '700', color: CATALOG_COLOR.text },
+  rowHeaderText: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
   cells: { flex: 1, flexDirection: 'row' },
   cell: { flex: 1, borderRightWidth: 1, borderRightColor: CATALOG_COLOR.border },
   lastColumn: { borderRightWidth: 0 },
@@ -100,7 +100,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: CATALOG_COLOR.border,
   },
-  captionText: { fontSize: CATALOG_TYPE.tableHeader, fontWeight: '800', letterSpacing: 0.44, color: CATALOG_COLOR.text },
+  captionText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
   specimen: {
     flexGrow: 1,
     minHeight: MATRIX_LAYOUT.rowMinHeight,

package/native/catalog/ComparisonList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TEXT } from './tokens';
 import { MATRIX_LAYOUT, listGeometry, type ListItem } from './comparison';
 import { SpecimenContent, SpecimenSurface } from './SpecimenSurface';
 import { SpecimenAddressProvider } from './SpecimenAddress';
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: CATALOG_COLOR.border,
   },
-  captionText: { fontSize: CATALOG_TYPE.tableHeader, fontWeight: '800', letterSpacing: 0.44, color: CATALOG_COLOR.text },
+  captionText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
   specimen: {
     flexGrow: 1,
     minHeight: MATRIX_LAYOUT.rowMinHeight,

package/native/catalog/MotionSpecimen.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, AccessibilityInfo, Pressable, StyleSheet, Text, View } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { motionReplayLabel, motionTranslatesDirectly, motionValueTarget, type MotionValueRange } from './motionValueDomain';
 
 /** `Animated.spring`'s physics fields — the same shape as a design system's own spring-config
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
     backgroundColor: CATALOG_COLOR.accent,
   },
   footer: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md },
-  label: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  label: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
   labelSpacer: { flex: 1 },
   replayButton: {
     paddingHorizontal: CATALOG_SPACE.md,
@@ -148,5 +148,5 @@ const styles = StyleSheet.create({
     backgroundColor: CATALOG_COLOR.surface,
   },
   replayButtonPressed: { backgroundColor: CATALOG_COLOR.surfacePressed },
-  replayText: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.text },
+  replayText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
 });

package/native/catalog/PhoneFrame.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Platform, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TEXT } from './tokens';
 import { DEVICE_FRAME, DEVICE_SCALE_WARN_BELOW, deviceFrameScale } from './deviceFrame';
 import { resolveOverlayViewport } from './overlayViewport';
 import { useSpecimenAddress } from './SpecimenAddress';
@@ -149,5 +149,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden',
   },
-  status: { position: 'absolute', fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  status: { position: 'absolute', ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/PropsTable.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
 import { PROPS_COLUMN_GAP } from './comparison';
 import type { PropDef } from './types';
 
@@ -86,14 +86,14 @@ const styles = StyleSheet.create({
   rowFirst: { paddingTop: 0 },
   rowLast: { borderBottomWidth: 0, paddingBottom: 0 },
   header: { width: 140, gap: 2 },
-  name: { fontSize: CATALOG_TYPE.sm, fontFamily: CATALOG_COLOR.code, fontWeight: '700', color: CATALOG_COLOR.text },
-  optionalMark: { fontWeight: '400', color: CATALOG_COLOR.textMuted },
-  type: { fontSize: CATALOG_TYPE.xs, fontFamily: CATALOG_COLOR.code, color: CATALOG_COLOR.accent },
+  name: { ...CATALOG_TEXT.codeSmallStrong, color: CATALOG_COLOR.text },
+  optionalMark: { ...CATALOG_TEXT.codeSmall, color: CATALOG_COLOR.textMuted },
+  type: { ...CATALOG_TEXT.codeMicro, color: CATALOG_COLOR.accent },
   // The second column — description + default — sized by the row's remaining width.
   body: { flex: 1, gap: 2 },
-  desc: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, lineHeight: 17 },
-  default: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
-  defaultVal: { fontFamily: CATALOG_COLOR.code, color: CATALOG_COLOR.textMuted },
+  desc: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  default: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
+  defaultVal: { ...CATALOG_TEXT.codeMicro, color: CATALOG_COLOR.textMuted },
   gridRow: { flexDirection: 'row', gap: PROPS_COLUMN_GAP },
   cell: { flex: 1, minWidth: 0, paddingVertical: CATALOG_SPACE.md, gap: 4 },
   cellDivider: { borderBottomWidth: 1, borderBottomColor: CATALOG_COLOR.border },