@krapwoo/ds-viewer 0.9.1 → 0.11.0

package/native/catalog/CatalogShell.tsx

@@ -1,11 +1,24 @@
 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 { FamilyPage } from './FamilyPage';
 import { UpdatePanel } from './UpdatePanel';
-import { DS_VIEWER_SECRET_HEADER, footerLink, groupLabelFor, hashForId, neighbors, orderedIds, resolveActiveFromHash, shouldShowMajorBanner, UPDATE_PAGE_ID } from './catalogNavigation';
+import {
+  aliasTargets,
+  DS_VIEWER_SECRET_HEADER,
+  footerLink,
+  groupLabelFor,
+  hashForId,
+  neighbors,
+  orderedIds,
+  resolveRoute,
+  shouldShowMajorBanner,
+  UPDATE_PAGE_ID,
+  type MemberSearchEntry,
+} from './catalogNavigation';
 import { findOverlayNode, overlayAddressFromSearch } from './overlayViewport';
 import { SpecimenAddressProvider } from './SpecimenAddress';
 import type { NavGroup, PreviewWidths, SectionDef, UpdateNotice, VersionStatus } from './types';
@@ -88,6 +101,41 @@ function MajorBanner({ update, onReviewUpdate, onDismiss, keepDocumentUrl = fals
   );
 }
 
+/** Spec §5.3 "Unknown or malformed address": shown instead of silently falling back to the first
+ *  page, for every page (not only family pages). Focuses its own title on mount — unlike a normal
+ *  page change, this can be the very first thing a fresh load shows, so it can't wait for the
+ *  shared "focus only when the user navigated" logic the rest of the shell uses. */
+function NotFoundPage({ raw, firstHref, onOpenFirst }: { raw: string; firstHref?: string; onOpenFirst: () => void }) {
+  const ref = useRef<View>(null);
+  useEffect(() => {
+    focusElement(ref.current);
+  }, []);
+  return (
+    <View>
+      <View ref={ref} tabIndex={-1} role="heading" {...({ 'aria-level': 1 } as Record<string, unknown>)} style={notFoundStyles.headingTarget}>
+        <Text style={notFoundStyles.title}>Page not found</Text>
+      </View>
+      <Text style={notFoundStyles.body}>{`There's no catalog page at #${raw}.`}</Text>
+      <Pressable
+        onPress={onOpenFirst}
+        accessibilityRole="link"
+        {...(firstHref ? ({ href: firstHref } as Record<string, unknown>) : null)}
+        style={notFoundStyles.link}
+      >
+        <Text style={notFoundStyles.linkText}>Open the first page</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const notFoundStyles = StyleSheet.create({
+  headingTarget: { alignSelf: 'flex-start', marginBottom: 6 },
+  title: { ...CATALOG_TEXT.pageTitle, color: CATALOG_COLOR.text },
+  body: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted, marginBottom: CATALOG_SPACE.lg },
+  link: { alignSelf: 'flex-start', minHeight: CATALOG_LAYOUT.controlSize, justifyContent: 'center' },
+  linkText: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.accent },
+});
+
 const bannerStyles = StyleSheet.create({
   banner: {
     flexDirection: 'row',
@@ -101,11 +149,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 },
 });
 
 /**
@@ -174,9 +222,64 @@ export function CatalogShell<TId extends string>({
   const sectionsById = useMemo(() => new Map(sections.map((def) => [def.id, def])), [sections]);
   const labels = useMemo(() => new Map(sections.filter((def) => def.title).map((def) => [def.id as string, def.title as string])), [sections]);
   const order = useMemo(() => orderedIds(groups, new Set(sectionsById.keys())), [groups, sectionsById]);
-  const [active, setActive] = useState<ShellPageId<TId> | undefined>(() =>
-    embedded ? initialPage ?? order[0] : isWeb() ? resolveActiveFromHash(window.location.hash, order) : order[0],
-  );
+  // Spec §5.3: every family page's own member ids/aliases, resolved to their page (and member, for
+  // anything other than the whole) — used both for an old/alias/member address (`resolveRoute`)
+  // and for the sidebar's member search (`memberSearchEntries` below).
+  const aliasMap = useMemo(() => aliasTargets(sections), [sections]);
+  // V2d item 3: every real catalog address a family member's `composedOf` could resolve to,
+  // outside its own family — every other page's own id, plus every member id/alias `aliasMap`
+  // already resolves (`FamilyPage` itself always adds its own family's member ids on top of this).
+  const knownAddressIds = useMemo(() => new Set<string>([...sectionsById.keys(), ...aliasMap.keys()]), [sectionsById, aliasMap]);
+  const memberIndex = useMemo(() => {
+    const map = new Map<string, string[]>();
+    for (const section of sections) {
+      if (!section.family) continue;
+      const ids: string[] = [];
+      for (const member of section.family.members) {
+        ids.push(member.id, ...(member.aliases ?? []));
+      }
+      map.set(section.id, ids);
+    }
+    return map;
+  }, [sections]);
+  const memberSearchEntries = useMemo(() => {
+    const entries: MemberSearchEntry<TId>[] = [];
+    for (const section of sections) {
+      if (!section.family) continue;
+      for (const member of section.family.members) {
+        if (member.id === section.family.whole) continue;
+        entries.push({ pageId: section.id, memberId: member.id, aliases: member.aliases, familyTitle: section.title ?? section.id });
+      }
+    }
+    return entries;
+  }, [sections]);
+
+  const routeFromHash = useCallback((hash: string) => resolveRoute(hash, order, aliasMap), [order, aliasMap]);
+
+  const [active, setActive] = useState<ShellPageId<TId> | undefined>(() => {
+    if (embedded) return initialPage ?? order[0];
+    if (!isWeb()) return order[0];
+    const route = routeFromHash(window.location.hash);
+    if (route.kind === 'empty') return order[0];
+    if (route.kind === 'update') return UPDATE_PAGE_ID;
+    if (route.kind === 'page') return route.id;
+    if (route.kind === 'member') return route.pageId;
+    return undefined; // notFound
+  });
+  const [pendingMemberId, setPendingMemberId] = useState<string | undefined>(() => {
+    if (embedded || !isWeb()) return undefined;
+    const route = routeFromHash(window.location.hash);
+    return route.kind === 'member' ? route.memberId : undefined;
+  });
+  // V2c item 11: bumped on every member activation, even a repeat one, so `FamilyPage`'s own
+  // one-shot jump (`shouldRunMemberJump`) counts a re-selected member address as fresh — a plain
+  // `pendingMemberId` state update bails out (no re-render) when the string value is unchanged.
+  const [pendingMemberNonce, setPendingMemberNonce] = useState(0);
+  const [notFoundRaw, setNotFoundRaw] = useState<string | undefined>(() => {
+    if (embedded || !isWeb()) return undefined;
+    const route = routeFromHash(window.location.hash);
+    return route.kind === 'notFound' ? route.raw : undefined;
+  });
 
   const scrollRef = useRef<ScrollView>(null);
   const headingRef = useRef<View>(null);
@@ -185,36 +288,78 @@ export function CatalogShell<TId extends string>({
   const pushHistoryNext = useRef(false);
   const focusHeadingNext = useRef(false);
 
-  const select = useCallback((id: ShellPageId<TId>) => {
+  const select = useCallback((id: ShellPageId<TId>, memberId?: string) => {
+    setNotFoundRaw(undefined);
     if (id === activeRef.current) {
-      focusElement(headingRef.current);
+      if (memberId) {
+        pushHistoryNext.current = true;
+        setPendingMemberId(memberId);
+        setPendingMemberNonce((n) => n + 1);
+      } else {
+        setPendingMemberId(undefined);
+        focusElement(headingRef.current);
+      }
       return;
     }
     pushHistoryNext.current = true;
-    focusHeadingNext.current = true;
+    focusHeadingNext.current = !memberId;
+    setPendingMemberId(memberId);
+    if (memberId) setPendingMemberNonce((n) => n + 1);
     setActive(id);
   }, []);
 
-  // Back/forward and manual fragment edits.
+  // Back/forward, manual fragment edits, and our own hash assignments below (which also fire
+  // `hashchange`) all funnel through here.
   useEffect(() => {
     if (!routesByUrl) return;
     const onHashChange = () => {
-      const id = resolveActiveFromHash(window.location.hash, order);
-      if (id === undefined) return;
-      if (id !== activeRef.current) {
-        focusHeadingNext.current = true;
-        setActive(id);
-      } else if (window.location.hash !== hashForId(id)) {
-        // An unknown fragment that falls back to the page already open: just correct the URL.
-        window.history.replaceState(null, '', hashForId(id));
+      const route = routeFromHash(window.location.hash);
+      if (route.kind === 'notFound') {
+        setNotFoundRaw(route.raw);
+        setPendingMemberId(undefined);
+        return;
+      }
+      setNotFoundRaw(undefined);
+      if (route.kind === 'empty') {
+        setPendingMemberId(undefined);
+        if (order[0] !== undefined && order[0] !== activeRef.current) {
+          focusHeadingNext.current = true;
+          setActive(order[0]);
+        }
+        return;
+      }
+      if (route.kind === 'update') {
+        setPendingMemberId(undefined);
+        if (UPDATE_PAGE_ID !== activeRef.current) {
+          focusHeadingNext.current = true;
+          setActive(UPDATE_PAGE_ID);
+        }
+        return;
+      }
+      if (route.kind === 'page') {
+        setPendingMemberId(undefined);
+        if (route.id !== activeRef.current) {
+          focusHeadingNext.current = true;
+          setActive(route.id);
+        }
+        return;
+      }
+      // member: scroll/open/focus is the member itself (FamilyPage's own effect), never the page
+      // heading — even when this also switches the active page.
+      setPendingMemberId(route.memberId);
+      setPendingMemberNonce((n) => n + 1);
+      if (route.pageId !== activeRef.current) {
+        focusHeadingNext.current = false;
+        setActive(route.pageId);
       }
     };
     window.addEventListener('hashchange', onHashChange);
     return () => window.removeEventListener('hashchange', onHashChange);
-  }, [order, routesByUrl]);
+  }, [order, routesByUrl, routeFromHash]);
 
-  // After every page change: sync the fragment, return to the top, and move focus when the user
-  // navigated (never on first load).
+  // After every page or member change: sync the fragment, return to the top (unless a member is
+  // addressed — FamilyPage scrolls to that instead), and move focus when the user navigated to a
+  // new page (never on first load, and never for a member address, which focuses the member).
   useEffect(() => {
     if (active === undefined) return;
     const push = pushHistoryNext.current;
@@ -222,15 +367,17 @@ export function CatalogShell<TId extends string>({
     pushHistoryNext.current = false;
     focusHeadingNext.current = false;
     if (routesByUrl) {
-      const expected = hashForId(active);
+      const expected = hashForId(pendingMemberId ?? active);
       if (window.location.hash !== expected) {
         if (push) window.location.hash = expected;
         else window.history.replaceState(null, '', expected);
       }
     }
-    resetMainScroll(scrollRef.current);
-    if (focus) focusElement(headingRef.current);
-  }, [active, routesByUrl]);
+    if (!pendingMemberId) {
+      resetMainScroll(scrollRef.current);
+      if (focus) focusElement(headingRef.current);
+    }
+  }, [active, pendingMemberId, routesByUrl]);
 
   const activeDef = active !== undefined && active !== UPDATE_PAGE_ID ? sectionsById.get(active) : undefined;
 
@@ -284,9 +431,24 @@ export function CatalogShell<TId extends string>({
 
   return (
     <View style={styles.root}>
-      <CatalogSidebar logo={appName} logoImageSource={logoImageSource} caption={title} groups={groups} labels={labels} active={active} onPress={select} footer={footer} keepDocumentUrl={embedded} />
+      <CatalogSidebar
+        logo={appName}
+        logoImageSource={logoImageSource}
+        caption={title}
+        groups={groups}
+        labels={labels}
+        memberIndex={memberIndex}
+        memberSearchEntries={memberSearchEntries}
+        active={active}
+        onPress={select}
+        onSelectMember={(pageId, memberId) => select(pageId, memberId)}
+        footer={footer}
+        keepDocumentUrl={embedded}
+      />
       <ScrollView ref={scrollRef} style={styles.main} contentContainerStyle={styles.mainContent}>
-        {active === UPDATE_PAGE_ID ? (
+        {notFoundRaw !== undefined ? (
+          <NotFoundPage raw={notFoundRaw} firstHref={order[0] !== undefined ? hashForId(order[0]) : undefined} onOpenFirst={() => order[0] !== undefined && select(order[0])} />
+        ) : active === UPDATE_PAGE_ID ? (
           <UpdatePanel
             update={effectiveUpdate}
             versionStatus={liveStatus}
@@ -295,6 +457,25 @@ export function CatalogShell<TId extends string>({
             appName={appName}
             headingRef={headingRef}
           />
+        ) : activeDef?.family ? (
+          <FamilyPage
+            key={activeDef.id}
+            def={activeDef}
+            groupLabel={groupLabelFor(groups, activeDef.id)}
+            breadcrumbRoot={appName}
+            banner={showBanner && effectiveUpdate ? <MajorBanner update={effectiveUpdate} onReviewUpdate={() => select(UPDATE_PAGE_ID)} onDismiss={dismissMajorBanner} keepDocumentUrl={embedded} /> : undefined}
+            pager={{
+              previousId: neighbors(order, activeDef.id).previous,
+              nextId: neighbors(order, activeDef.id).next,
+              onNavigate: select,
+              labelOf: (id) => labels.get(id) ?? id,
+            }}
+            headingRef={headingRef}
+            defaultPreviewWidths={defaultPreviewWidths}
+            focusMemberId={pendingMemberId}
+            focusNonce={pendingMemberNonce}
+            knownAddressIds={knownAddressIds}
+          />
         ) : activeDef ? (
           <SectionBlock
             key={activeDef.id}
@@ -327,7 +508,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 +517,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,9 +1,9 @@
 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 { filterGroups, hashForId, searchResults, UPDATE_PAGE_ID, type MemberSearchEntry } from './catalogNavigation';
 import type { NavGroup } from './types';
 import { CatalogSearchInput } from './CatalogSearchInput';
 
@@ -52,6 +52,29 @@ function NavItem<TId extends string>({ id, label, active, onPress, keepDocumentU
   );
 }
 
+/** One member search hit (spec §5.3 "Search"): `<memberId> — in <familyTitle>`, opening that
+ *  member's address. Shares the plain nav-row visual `NavItem` uses ("Use the existing row
+ *  styles"); `href` is the member's own address so Enter activates it the same way every other
+ *  link in the sidebar does. */
+function MemberResultItem({ label, familyTitle, href, onPress, keepDocumentUrl = false }: { label: string; familyTitle: string; href: string; onPress: () => void; keepDocumentUrl?: boolean }) {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  return (
+    <Pressable
+      onPress={pressHandler(onPress, keepDocumentUrl)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      accessibilityRole="link"
+      {...({ href } as Record<string, unknown>)}
+      style={({ pressed }) => [styles.item, (pressed || hovered) && styles.itemHover, focused && styles.focusRing]}
+    >
+      <Text style={styles.label}>{`${label} — in ${familyTitle}`}</Text>
+    </Pressable>
+  );
+}
+
 function FooterLink({ label, kind, active, onPress, keepDocumentUrl = false }: { label: string; kind: 'update' | 'version'; active: boolean; onPress: () => void; keepDocumentUrl?: boolean }) {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -90,8 +113,11 @@ export function CatalogSidebar<TId extends string>({
   caption,
   groups,
   labels,
+  memberIndex,
+  memberSearchEntries,
   active,
   onPress,
+  onSelectMember,
   footer,
   keepDocumentUrl = false,
 }: {
@@ -107,8 +133,17 @@ export function CatalogSidebar<TId extends string>({
   groups: NavGroup<TId>[];
   /** Display titles by page id (`SectionDef.title`); pages without one show their id. */
   labels?: ReadonlyMap<string, string>;
+  /** Every family page's own member ids/aliases, by page id (spec §5.3 "Search") — a page also
+   *  matches the filter on any of these, not just its own id/title. */
+  memberIndex?: ReadonlyMap<string, readonly string[]>;
+  /** Every family member search candidate across the catalog (spec §5.3 "Search") — shown as its
+   *  own "Members" group of hits, below the filtered pages, while the query is non-empty. */
+  memberSearchEntries?: readonly MemberSearchEntry<TId>[];
   active: string | undefined;
   onPress: (id: TId) => void;
+  /** Opens a member hit's address: activates its family page, then scrolls/opens/focuses the
+   *  member itself (`CatalogShell`). */
+  onSelectMember?: (pageId: TId, memberId: string) => void;
   /** The link below the nav list that opens the update page: the installed version (`'version'`),
    *  or the update notice with a dot (`'update'`, design §5's footer line). `active` is true while
    *  the update page itself is open — it gets the same active styling a selected nav item would. */
@@ -128,7 +163,8 @@ export function CatalogSidebar<TId extends string>({
   const [loadedAspect, setLoadedAspect] = useState<number | undefined>(undefined);
   const [logoFailed, setLogoFailed] = useState(false);
   const [nameWrapped, setNameWrapped] = useState(false);
-  const filtered = filterGroups(groups, query, labels);
+  const filtered = filterGroups(groups, query, labels, memberIndex);
+  const memberHits = memberSearchEntries ? searchResults(memberSearchEntries, query) : [];
 
   const logoAspect = staticAspect ?? loadedAspect;
   const attemptingLogo = Boolean(logoImageSource) && !logoFailed;
@@ -153,8 +189,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);
   };
@@ -202,7 +238,10 @@ export function CatalogSidebar<TId extends string>({
 
         <CatalogSearchInput value={query} onChangeText={setQuery} placeholder="Filter components…" />
 
-        {filtered.length === 0 && <Text style={styles.empty}>No matches</Text>}
+        {filtered.length === 0 && memberHits.length === 0 && <Text style={styles.empty}>No matches</Text>}
+        {/* V2c item 10: pages first, member hits below them — matching `memberSearchEntries`'s own
+            doc comment ("below the filtered pages") and the spec's "the sidebar lists family pages
+            only, never members" emphasis. */}
         {filtered.map((group) => (
           <View key={group.label}>
             <Text style={styles.groupLabel}>{group.label}</Text>
@@ -211,6 +250,21 @@ export function CatalogSidebar<TId extends string>({
             ))}
           </View>
         ))}
+        {memberHits.length > 0 && (
+          <View>
+            <Text style={styles.groupLabel}>Members</Text>
+            {memberHits.map((hit) => (
+              <MemberResultItem
+                key={`${hit.pageId}:${hit.memberId}`}
+                label={hit.label}
+                familyTitle={hit.familyTitle}
+                href={hashForId(hit.memberId)}
+                onPress={() => onSelectMember?.(hit.pageId, hit.memberId)}
+                keepDocumentUrl={keepDocumentUrl}
+              />
+            ))}
+          </View>
+        )}
       </ScrollView>
       {footer && (
         <View style={styles.footerContainer}>
@@ -235,8 +289,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 +298,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 +316,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 +335,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,