@krapwoo/ds-viewer 0.14.1 → 0.15.0

package/native/catalog/FamilyPage.tsx

@@ -1,11 +1,13 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Platform, Pressable, StyleSheet, Text, View, findNodeHandle } from 'react-native';
+import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View, findNodeHandle, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { CatalogButton } from './CatalogButton';
 import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { Blocks, SectionPagerRow, type SectionPager } from './SectionBlock';
 import { PropsTable } from './PropsTable';
 import { presentationBlocks } from './comparison';
 import { DEFAULT_SPECIMEN_SURFACE } from './specimenSurfaceStyle';
 import { hashForId } from './catalogNavigation';
+import { referenceLinkProps, type ReferenceNavigation } from './catalogReferences';
 // A plain extensionless import — the same one every other `.tsx` file here already uses for its
 // own pure-module siblings (e.g. `CatalogShell.tsx` → `./catalogNavigation`): this file is a React
 // component with no test of its own that imports it directly under Node, so it only ever goes
@@ -13,6 +15,7 @@ import { hashForId } from './catalogNavigation';
 import {
   alsoUsedBySegments,
   anatomyColumns,
+  anatomyLayout,
   anatomyPinFor,
   ariaLevelFor,
   buildPartTree,
@@ -51,6 +54,93 @@ function memberAsSectionDef(member: CatalogMember): SectionDef {
 
 const ARIA_HIDDEN = { 'aria-hidden': true } as Record<string, unknown>;
 
+/** The one muted line under a family/group page's description: what kind of page this is and how
+ *  it differs from a page of variants. The same wording on every page of that kind. */
+const PAGE_KIND_EXPLAINER = {
+  group: {
+    lead: 'Group page.',
+    text: 'These are separate components shown together because they’re used in the same place. Each has its own API, unlike variants, which are one component changed by its props.',
+  },
+  family: {
+    lead: 'Family page.',
+    text: 'One component and the parts it’s built from. Each part is its own component, unlike variants, which are one component changed by its props.',
+  },
+} as const;
+
+/** #63 R2: the shared page head both `FamilyPage` and `GroupPage` render — breadcrumb, banner,
+ *  title/description (plus an optional "Not shown in the browser" note) and the pager. Pulled out
+ *  of `FamilyPage`'s own top-level render rather than duplicated, per the contract's "factor the
+ *  head into a small shared piece rather than duplicating markup". */
+export function FamilyPageHead<TId extends string>({
+  def, kind, groupLabel, breadcrumbRoot, banner, pager, headingRef, notShown,
+}: {
+  /** Which page kind this head introduces — adds that kind's one-line explainer under the
+   *  description (`PAGE_KIND_EXPLAINER`). */
+  kind: 'family' | 'group';
+  def: Pick<SectionDef<TId>, 'id' | 'title' | 'description'>;
+  groupLabel?: string;
+  breadcrumbRoot?: string;
+  banner?: React.ReactNode;
+  pager?: SectionPager<TId>;
+  headingRef?: React.Ref<View>;
+  /** See `FamilyDef.notShown`. */
+  notShown?: string;
+}) {
+  return (
+    <>
+      {groupLabel && <Text style={styles.breadcrumb}>{breadcrumbRoot ? `${breadcrumbRoot} / ${groupLabel}` : groupLabel}</Text>}
+      {banner}
+      <View style={styles.pageHead}>
+        <View style={styles.titlebar}>
+          <View style={styles.titleText}>
+            <View ref={headingRef} tabIndex={-1} role="heading" {...({ 'aria-level': 1 } as Record<string, unknown>)} style={styles.headingTarget}>
+              <Text style={styles.title}>{def.title ?? def.id}</Text>
+            </View>
+            <Text style={styles.desc}>{def.description}</Text>
+            <View style={styles.kindNote}>
+              <Text style={styles.kindNoteText}>
+                <Text style={styles.kindNoteLead}>{PAGE_KIND_EXPLAINER[kind].lead} </Text>
+                {PAGE_KIND_EXPLAINER[kind].text}
+              </Text>
+            </View>
+            {notShown && (
+              <Text style={styles.notShown}>
+                <Text style={styles.notShownLead}>Not shown in the browser: </Text>
+                {notShown}
+              </Text>
+            )}
+          </View>
+          {pager && <SectionPagerRow pager={pager} />}
+        </View>
+      </View>
+    </>
+  );
+}
+
+/** Task 2B2: one path for every one of this file's own link producers (below-specimens/whole
+ *  lines, Uses, related pages, anatomy legend) — `navigation` supplied: resolve+activate through
+ *  the shell's own real `CatalogShell` journey (`referenceLinkProps`), the canonical address, even
+ *  when it differs from `name` (an alias, or a component binding). `navigation` omitted (a
+ *  standalone-mounted `FamilyPage`, this framework's own catalog demo included): keep the prior
+ *  plain-`href`-only behavior, gated by the member's own `resolvesAddress` (sibling member ids,
+ *  plus whatever `knownAddressIds` the caller passed) — never a dead link, same as before. */
+function familyLink(
+  navigation: ReferenceNavigation | undefined,
+  resolvesAddress: (name: string) => boolean,
+  name: string,
+  /** Task 2B2 correction: the Part/whole that actually owns this call site (its Uses/related/
+   *  "also used by" line) — see `ReferenceNavigation.open`'s own doc comment. Omitted for a
+   *  page-level link producer (`relatedPages`, an anatomy "other page" entry, or the anatomy
+   *  legend's own member row, which already names its destination). */
+  sourceMemberId?: string,
+): { href: string; onPress?: (event?: { preventDefault?: () => void }) => void } | undefined {
+  if (navigation) {
+    const activation = referenceLinkProps(navigation, name, sourceMemberId);
+    return activation ? { href: hashForId(activation.memberId ?? activation.pageId), onPress: activation.onPress } : undefined;
+  }
+  return resolvesAddress(name) ? { href: hashForId(name) } : undefined;
+}
+
 /** Fidelity badge (spec §5.2 "Badges"): no existing fidelity/OS badge to reuse, so this is a small
  *  pill on `microLabel`, reusing `SectionBlock`'s own OS-badge visual. `replicated` keeps that
  *  plain pill; `approximated` and `documentation-only` both get the gray/muted treatment the
@@ -139,6 +229,8 @@ function BelowSpecimensLine({
   source,
   alsoUsedBy,
   resolvesAddress,
+  navigation,
+  sourceMemberId,
 }: {
   related?: RelatedSegment[];
   showRelationship: boolean;
@@ -146,33 +238,39 @@ function BelowSpecimensLine({
   source: string;
   alsoUsedBy: AlsoUsedByEntry[];
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
+  /** Task 2B2 correction: this line's own owning member — threaded into every link it renders, so
+   *  a Back return lands on this member, not just the page (`familyLink`'s own doc comment). */
+  sourceMemberId?: string;
 }) {
   const usedBy = alsoUsedBySegments(alsoUsedBy);
   return (
     <Text style={styles.belowLine}>
       {related &&
-        related.map((segment, i) =>
-          segment.memberId ? (
-            <Text key={i} role="link" style={styles.relatedLink} {...({ href: hashForId(segment.memberId) } as Record<string, unknown>)}>
+        related.map((segment, i) => {
+          const link = segment.memberId ? familyLink(navigation, resolvesAddress, segment.memberId, sourceMemberId) : undefined;
+          return link ? (
+            <Text key={i} role="link" style={styles.relatedLink} {...link}>
               {segment.text}
             </Text>
           ) : (
             <Text key={i}>{segment.text}</Text>
-          ),
-        )}
+          );
+        })}
       {related && ' · '}
       {showRelationship && `${relationship} · `}
       {source}
       {usedBy.length > 0 && ' · '}
-      {usedBy.map((segment, i) =>
-        segment.component && resolvesAddress(segment.component) ? (
-          <Text key={i} role="link" style={styles.relatedLink} {...({ href: hashForId(segment.component) } as Record<string, unknown>)}>
+      {usedBy.map((segment, i) => {
+        const link = segment.component ? familyLink(navigation, resolvesAddress, segment.component, sourceMemberId) : undefined;
+        return link ? (
+          <Text key={i} role="link" style={styles.relatedLink} {...link}>
             {segment.text}
           </Text>
         ) : (
           <Text key={i}>{segment.text}</Text>
-        ),
-      )}
+        );
+      })}
     </Text>
   );
 }
@@ -186,12 +284,14 @@ function WholeBelowLine({
   source,
   alsoUsedBy,
   resolvesAddress,
+  navigation,
 }: {
   name: string;
   fidelity: CatalogMember['fidelity'];
   source: string;
   alsoUsedBy: AlsoUsedByEntry[];
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
 }) {
   const usedBy = alsoUsedBySegments(alsoUsedBy);
   return (
@@ -202,17 +302,20 @@ function WholeBelowLine({
       <Text style={styles.belowLine}> · </Text>
       <Text style={styles.belowLine}>{source}</Text>
       {usedBy.length > 0 && <Text style={styles.belowLine}> · </Text>}
-      {usedBy.map((segment, i) =>
-        segment.component && resolvesAddress(segment.component) ? (
-          <Text key={i} role="link" style={styles.relatedLink} {...({ href: hashForId(segment.component) } as Record<string, unknown>)}>
+      {usedBy.map((segment, i) => {
+        // The whole's own inverse use returns to the whole wrapper, not just the page — `name` is
+        // this very member's own id (the whole is a member like any other).
+        const link = segment.component ? familyLink(navigation, resolvesAddress, segment.component, name) : undefined;
+        return link ? (
+          <Text key={i} role="link" style={styles.relatedLink} {...link}>
             {segment.text}
           </Text>
         ) : (
           <Text key={i} style={styles.belowLine}>
             {segment.text}
           </Text>
-        ),
-      )}
+        );
+      })}
     </View>
   );
 }
@@ -221,23 +324,36 @@ function WholeBelowLine({
  *  the disclosure, after notes and before Guidance. A name links — the same accent treatment
  *  `BelowSpecimensLine`'s own `related` links use — when it resolves to a real catalog address (a
  *  page, member, or alias); otherwise it shows in `codeSmall`, since there's nothing to link to. */
-function UsesLine({ composedOf, resolvesAddress }: { composedOf: ComposedOfEntry[]; resolvesAddress: (name: string) => boolean }) {
+function UsesLine({
+  composedOf,
+  resolvesAddress,
+  navigation,
+  sourceMemberId,
+}: {
+  composedOf: ComposedOfEntry[];
+  resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
+  sourceMemberId?: string;
+}) {
   return (
     <Text style={styles.usesLine}>
       {'Uses '}
-      {composedOf.map((entry, i) => (
-        <Text key={i}>
-          {resolvesAddress(entry.component) ? (
-            <Text role="link" style={styles.relatedLink} {...({ href: hashForId(entry.component) } as Record<string, unknown>)}>
-              {entry.component}
-            </Text>
-          ) : (
-            <Text style={styles.usesCode}>{entry.component}</Text>
-          )}
-          {` (${entry.role})`}
-          {i < composedOf.length - 1 ? ', ' : ''}
-        </Text>
-      ))}
+      {composedOf.map((entry, i) => {
+        const link = familyLink(navigation, resolvesAddress, entry.component, sourceMemberId);
+        return (
+          <Text key={i}>
+            {link ? (
+              <Text role="link" style={styles.relatedLink} {...link}>
+                {entry.component}
+              </Text>
+            ) : (
+              <Text style={styles.usesCode}>{entry.component}</Text>
+            )}
+            {` (${entry.role})`}
+            {i < composedOf.length - 1 ? ', ' : ''}
+          </Text>
+        );
+      })}
     </Text>
   );
 }
@@ -252,11 +368,13 @@ function DisclosureBody({
   parts,
   resolvedProps,
   resolvesAddress,
+  navigation,
 }: {
   member: CatalogMember;
   parts: DisclosurePart[];
   resolvedProps?: PropDef[];
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
 }) {
   return (
     <View style={styles.disclosureBody}>
@@ -267,7 +385,7 @@ function DisclosureBody({
             {note}
           </Text>
         ))}
-      {parts.includes('uses') && <UsesLine composedOf={member.composedOf!} resolvesAddress={resolvesAddress} />}
+      {parts.includes('uses') && <UsesLine composedOf={member.composedOf!} resolvesAddress={resolvesAddress} navigation={navigation} sourceMemberId={member.id} />}
       {parts.includes('whenToUse') && (
         <Text style={styles.disclosureText}>
           <Text style={styles.disclosureLead}>Guidance </Text>
@@ -290,55 +408,186 @@ function DisclosureBody({
   );
 }
 
-/** V2b item 6: the disclosure toggle shows a chevron before its label (`›` closed, `⌄` open, as
- *  v8 does), on the `icon` role, hidden from screen readers (the toggle's own accessible name is
- *  its text label — Errata 4's `accessibilityState`/`aria-expanded` already say whether it's
- *  open). No animation. */
-function DisclosureChevron({ open }: { open: boolean }) {
+/** The disclosure trigger's trailing chevron (`›`), on the `icon` role, hidden from screen readers
+ *  (the trigger's own accessible name is its text label). Always `›`: the content opens in a side
+ *  panel, never expands in place. */
+function DisclosureChevron() {
   return (
     <Text {...ARIA_HIDDEN} style={styles.chevron}>
-      {open ? '⌄' : '›'}
+      ›
     </Text>
   );
 }
 
-/** Slice D1 item 9: "Notes and API" (using `apiLabel`) as a controlled toggle, closed by default —
- *  shared by the whole and every Part/Related member (never by a folded row, which has no second,
- *  nested toggle of its own: its own open state already decides whether its disclosure body shows). */
+/** What the one shared side panel shows: the member's disclosure, headed by its trigger's label. */
+interface MemberPanelRequest {
+  member: CatalogMember & { props?: PropDef[] };
+  parts: DisclosurePart[];
+  label: string;
+  resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
+}
+
+interface MemberPanelControl {
+  /** The member whose panel is open, if any — a trigger's `aria-expanded`. */
+  activeId?: string;
+  show: (request: MemberPanelRequest) => void;
+  hide: () => void;
+}
+
+const MemberPanelContext = createContext<MemberPanelControl | null>(null);
+
+const PANEL_WIDTH = 440;
+/** At or below this window width the panel takes the full width, as the approved design shows at
+ *  768 (the viewer has no shared narrow breakpoint constant to reuse). */
+const PANEL_FULL_WIDTH_AT_OR_BELOW = 768;
+/** The light scrim behind the panel — no `CATALOG_COLOR` is a translucent overlay. */
+const PANEL_SCRIM = 'rgba(20,20,20,.28)';
+
+/** The member side panel: `role="dialog"`, `aria-modal`, named by the member, one at a time, no
+ *  animation. On web, `Modal` (transparent) supplies the dialog role, Esc to close, Tab
+ *  containment, and returning focus to the trigger on close. React Native's own `Modal` does none
+ *  of those on native (only `onRequestClose` for the hardware back button), so on native the panel
+ *  moves screen-reader focus to the × itself on open (`AccessibilityInfo.setAccessibilityFocus`);
+ *  it does not return focus to the trigger on close — that is left to the platform. Following a
+ *  link inside it closes it first (`navigation` is wrapped), then navigates. */
+function MemberPanel({ request, onClose }: { request: MemberPanelRequest; onClose: () => void }) {
+  const { width } = useWindowDimensions();
+  const headingId = useId();
+  const closeRef = useRef<View>(null);
+  const focusClose = useCallback(() => {
+    const node = closeRef.current;
+    if (!node) return;
+    if (Platform.OS === 'web') {
+      node.focus?.();
+      return;
+    }
+    const handle = findNodeHandle(node);
+    if (handle != null) AccessibilityInfo.setAccessibilityFocus(handle);
+  }, []);
+  const { member, parts, label, resolvesAddress, navigation } = request;
+  const closingNavigation = useMemo<ReferenceNavigation | undefined>(
+    () =>
+      navigation && {
+        resolve: (name) => navigation.resolve(name),
+        open: (pageId, memberId, sourceMemberId) => {
+          onClose();
+          navigation.open(pageId, memberId, sourceMemberId);
+        },
+      },
+    [navigation, onClose],
+  );
+  // Locks the document's own scroll while the panel is open, for hosts whose body scrolls. The
+  // shell's own pane needs nothing: `Modal` portals outside it, so wheel chaining from the scrim
+  // never reaches it. Restores the previous overflow on close and on unmount. (iOS Safari ignores
+  // body overflow for touch scrolling.)
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+    const { body } = document;
+    const previous = body.style.overflow;
+    body.style.overflow = 'hidden';
+    return () => { body.style.overflow = previous; };
+  }, []);
+  // A plain-`href` link (no shell navigation) just changes the hash — close the panel on that too.
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof window === 'undefined') return;
+    window.addEventListener('hashchange', onClose);
+    return () => window.removeEventListener('hashchange', onClose);
+  }, [onClose]);
+  return (
+    <Modal visible transparent animationType="none" onRequestClose={onClose} onShow={focusClose} {...({ 'aria-labelledby': headingId } as Record<string, unknown>)}>
+      <View style={styles.panelRoot}>
+        {/* On web, a plain View, not a Pressable: the Modal's focus trap `focus()`es descendants in turn, and
+            even a tabindex=-1 scrim would take focus — an unnamed, ringless stop. Press-to-close there is a
+            click handler only (the × and Esc are the keyboard paths). */}
+        {Platform.OS === 'web' ? (
+          <View testID="member-panel-scrim" style={styles.panelScrim} {...({ onClick: onClose } as Record<string, unknown>)} />
+        ) : (
+          // Native has no DOM focus trap, so a Pressable is safe there and gives tap-to-close.
+          <Pressable testID="member-panel-scrim" style={styles.panelScrim} onPress={onClose} accessible={false} />
+        )}
+        <View style={[styles.panel, width <= PANEL_FULL_WIDTH_AT_OR_BELOW && styles.panelFull]}>
+          <View style={styles.panelHead}>
+            <View style={styles.panelTitle}>
+              <Text style={styles.panelKicker}>{label}</Text>
+              <Text nativeID={headingId} role="heading" {...({ 'aria-level': 2 } as Record<string, unknown>)} style={styles.panelName}>
+                {member.id}
+              </Text>
+            </View>
+            <CatalogButton ref={closeRef} label="×" accessibilityLabel="Close" variant="secondary" onPress={onClose} />
+          </View>
+          <ScrollView style={styles.panelBody} contentContainerStyle={styles.panelBodyContent}>
+            <DisclosureBody member={member} parts={parts} resolvedProps={member.props} resolvesAddress={resolvesAddress} navigation={closingNavigation} />
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+/** Owns the one shared side panel for a page: every member trigger below it opens it, a second
+ *  trigger swaps its content, and only one is ever open. */
+export function MemberPanelHost({ children }: { children: React.ReactNode }) {
+  const [request, setRequest] = useState<MemberPanelRequest | null>(null);
+  const hide = useCallback(() => setRequest(null), []);
+  const control = useMemo<MemberPanelControl>(() => ({ activeId: request?.member.id, show: setRequest, hide }), [request?.member.id, hide]);
+  return (
+    <MemberPanelContext.Provider value={control}>
+      {children}
+      {request && <MemberPanel request={request} onClose={hide} />}
+    </MemberPanelContext.Provider>
+  );
+}
+
+/** Slice D1 item 9: "Notes and API" (using `apiLabel`) as a link-style trigger that opens the
+ *  member's side panel — shared by the whole, every Part/Related member, and an open folded row.
+ *  Renders nothing for a member with nothing to disclose. */
 function MemberDisclosureToggle({
   member,
   apiLabel,
   resolvesAddress,
+  navigation,
 }: {
   member: CatalogMember & { props?: PropDef[] };
   apiLabel: string;
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
 }) {
-  const [open, setOpen] = useState(false);
+  const panel = useContext(MemberPanelContext);
   const [focused, setFocused] = useState(false);
   const parts = disclosureContent(member, member.props);
   if (parts.length === 0) return null;
+  // A member rendered outside a page's own host still gets a working panel.
+  if (!panel) {
+    return (
+      <MemberPanelHost>
+        <MemberDisclosureToggle member={member} apiLabel={apiLabel} resolvesAddress={resolvesAddress} navigation={navigation} />
+      </MemberPanelHost>
+    );
+  }
   const label = disclosureLabel(member, apiLabel, parts.includes('props'));
+  const open = panel.activeId === member.id;
   return (
-    <>
-      <Pressable
-        onPress={() => setOpen((value) => !value)}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        accessibilityRole="button"
-        accessibilityState={{ expanded: open }}
-        {...({ 'aria-expanded': open } as Record<string, unknown>)}
-        style={[styles.disclosureToggle, focused && styles.focusRing]}
-      >
-        <DisclosureChevron open={open} />
-        <Text style={styles.disclosureToggleLabel}>{label}</Text>
-      </Pressable>
-      {open && <DisclosureBody member={member} parts={parts} resolvedProps={member.props} resolvesAddress={resolvesAddress} />}
-    </>
+    <Pressable
+      onPress={() => panel.show({ member, parts, label, resolvesAddress, navigation })}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open }}
+      {...({ 'aria-expanded': open, 'aria-haspopup': 'dialog' } as Record<string, unknown>)}
+      style={[styles.disclosureToggle, focused && styles.focusRing]}
+    >
+      <Text style={styles.disclosureToggleLabel}>{label}</Text>
+      <DisclosureChevron />
+    </Pressable>
   );
 }
 
-type FamilyMember = CatalogMember & { props?: PropDef[]; path: string; alsoUsedBy?: AlsoUsedByEntry[] };
+/** #63 R2: exported so `GroupPage.tsx` can type its own `byId`/member records the same way
+ *  `FamilyPage`'s internals already do — a group's own `FamilyDef.members` carries the same shape
+ *  plus an optional `partOf` (`types.ts`), which this type simply doesn't need to name to stay
+ *  assignable. */
+export type FamilyMember = CatalogMember & { props?: PropDef[]; path: string; alsoUsedBy?: AlsoUsedByEntry[] };
 
 interface MemberRenderProps {
   member: FamilyMember;
@@ -353,6 +602,9 @@ interface MemberRenderProps {
   /** V2d item 3: whether a name (a `composedOf` entry's `component`) resolves to a real catalog
    *  address — a page, member, or alias — so `UsesLine` knows which names to link. */
   resolvesAddress: (name: string) => boolean;
+  /** Task 2B2: `CatalogShell`'s own shared reference navigation — see `familyLink`'s own doc
+   *  comment above for how it and `resolvesAddress` combine. */
+  navigation?: ReferenceNavigation;
   // Pressable forwards its ref to its underlying `View` (react-native's own `Pressable.d.ts`), so
   // a registered node is always a `View` instance whether it came from a block member's `View`
   // heading target or a folded row's `Pressable`.
@@ -367,7 +619,13 @@ interface MemberRenderProps {
  *  Related member (no pin, no gutter) — otherwise the same header and body: name, description,
  *  specimens (through `Blocks`, when the member has any), the below-specimens line, and a
  *  closed-by-default disclosure. */
-function FamilyPart({ member, number, level, allMemberIds, defaultPreviewWidths, apiLabel, resolvesAddress, registerNode, pinRef }: MemberRenderProps & { level: number }) {
+/** #63 R2: exported so `GroupPage.tsx` can render a top-level group member through the exact same
+ *  piece a family's own Part/Related member uses, with no second copy of its name row/specimens/
+ *  below-line/disclosure rendering. `afterNameRow` is additive (`undefined` elsewhere, unchanged
+ *  behavior for every existing family-page call site) — a group's own "Part N of <Family>" link
+ *  (`PartOfLine`, below) renders there, right under the member's own name row and before its
+ *  description, per the contract's own ordering. */
+export function FamilyPart({ member, number, level, allMemberIds, defaultPreviewWidths, apiLabel, resolvesAddress, navigation, registerNode, pinRef, afterNameRow }: MemberRenderProps & { level: number; afterNameRow?: React.ReactNode }) {
   const surface = member.specimenSurface ?? DEFAULT_SPECIMEN_SURFACE;
   const memberDef = useMemo(() => memberAsSectionDef(member), [member]);
   const blocks = useMemo(
@@ -399,6 +657,7 @@ function FamilyPart({ member, number, level, allMemberIds, defaultPreviewWidths,
           />
         </View>
       </View>
+      {afterNameRow}
       {/* D2 item A1: `partBody`'s own rhythm gap applies to every member, numbered or not — only
           the gutter indent (`partBodyIndented`) is conditional — so a Related member (never
           numbered) still gets the same spacing between its own description/specimens/below-line/
@@ -423,9 +682,11 @@ function FamilyPart({ member, number, level, allMemberIds, defaultPreviewWidths,
           source={member.source}
           alsoUsedBy={member.alsoUsedBy ?? []}
           resolvesAddress={resolvesAddress}
+          navigation={navigation}
+          sourceMemberId={member.id}
         />
         <View style={styles.disclosureSpacer}>
-          <MemberDisclosureToggle member={member} apiLabel={apiLabel} resolvesAddress={resolvesAddress} />
+          <MemberDisclosureToggle member={member} apiLabel={apiLabel} resolvesAddress={resolvesAddress} navigation={navigation} />
         </View>
       </View>
     </View>
@@ -440,10 +701,9 @@ function FamilyPart({ member, number, level, allMemberIds, defaultPreviewWidths,
  *  show specimens (spec's v8 reference keeps every folded-row example documentation-only). Slice
  *  D1: no gutter either way — a folded row's own pin (when it has a number) sits inline with its
  *  name, never offsetting the row's body. */
-function FoldedRow({ member, number, allMemberIds, resolvesAddress, open, onToggle, registerNode }: MemberRenderProps & { open: boolean; onToggle: () => void }) {
+function FoldedRow({ member, number, allMemberIds, apiLabel, resolvesAddress, navigation, open, onToggle, registerNode }: MemberRenderProps & { open: boolean; onToggle: () => void }) {
   const [focused, setFocused] = useState(false);
   const related = member.related ? linkifyRelated(member.related, allMemberIds) : undefined;
-  const parts = disclosureContent(member, member.props);
   return (
     <View style={styles.foldedRow}>
       <Pressable
@@ -474,10 +734,10 @@ function FoldedRow({ member, number, allMemberIds, resolvesAddress, open, onTogg
             source={member.source}
             alsoUsedBy={member.alsoUsedBy ?? []}
             resolvesAddress={resolvesAddress}
+            navigation={navigation}
+            sourceMemberId={member.id}
           />
-          {parts.length > 0 && (
-            <DisclosureBody member={member} parts={parts} resolvedProps={member.props} resolvesAddress={resolvesAddress} />
-          )}
+          <MemberDisclosureToggle member={member} apiLabel={apiLabel} resolvesAddress={resolvesAddress} navigation={navigation} />
         </View>
       )}
     </View>
@@ -571,10 +831,75 @@ interface MeasurableNode {
   measureLayout?: (relativeToNativeNode: number, onSuccess: (left: number, top: number, width: number, height: number) => void, onFail: () => void) => void;
 }
 
+/** A node with `focus` (every mounted web host node's real DOM method) — narrower than RN's own
+ *  `Text`/`View` ref types, the same reason `MeasurableNode` above exists for `measureLayout`. */
+interface FocusableNode {
+  focus?: (options?: { preventScroll?: boolean }) => void;
+}
+
+/** Anatomy-narrow-layout focus fix: lets a legend row (`AnatomyMemberRow`/`AnatomyOtherRow`)
+ *  register its own focusable name link and report when it gains focus, without either of them
+ *  needing to know *why* — `AnatomyBox` is the only thing that reads `legendNodesRef`, after a
+ *  layout-mode or balanced-column change remounts the row that currently holds focus at a new
+ *  tree position (switching `anatomyLegend` <-> `anatomyColumns`, or redistributing columns)
+ *  disconnects it and the browser drops focus to `<body>`. `register`'s `key` is stable across
+ *  that remount (a member id, or `other:<name>` for an "Other page" row), so the *replacement*
+ *  node at the same address can be found and refocused. */
+interface LegendFocus {
+  register: (key: string, node: FocusableNode | null) => void;
+  onFocus: (key: string) => void;
+  onBlur: (key: string) => void;
+}
+
+/** #63 R3: a family's own stub row for an *external part* — a member defined on a group page
+ *  rather than this family's own `members` (`FamilyDef.externalParts`). Same pin/gutter as a real
+ *  `FamilyPart`, but no specimens, description, or disclosure: only the name and a "Details on
+ *  <group title>" link to that member's own address (`familyLink`, the same resolve-and-activate
+ *  convention every other canonical link here uses — plain text, never a dead link, when it
+ *  doesn't resolve). */
+function ExternalPartRow({
+  memberId, number, groupTitle, resolvesAddress, navigation,
+}: {
+  memberId: string;
+  number?: string;
+  groupTitle: string;
+  resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
+}) {
+  const link = familyLink(navigation, resolvesAddress, memberId);
+  return (
+    <View>
+      <View style={styles.partHeadRow}>
+        {number !== undefined && (
+          <View style={styles.pinBox}>
+            <Pin number={number} />
+          </View>
+        )}
+        <View style={styles.partHeadMain}>
+          <Text style={[CATALOG_TEXT.heading2, styles.memberName]}>{memberId}</Text>
+        </View>
+      </View>
+      <View style={[styles.partBody, number !== undefined && styles.partBodyIndented]}>
+        <Text style={styles.belowLine}>
+          {link ? (
+            <Text role="link" style={styles.relatedLink} {...link}>
+              {`Details on ${groupTitle}`}
+            </Text>
+          ) : (
+            <Text>{`Details on ${groupTitle}`}</Text>
+          )}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
 /** One Part in its tree position: rendered through `FamilyPart` as always, wrapped in a `Branch`
  *  only when it has children (a leaf costs nothing extra), with its children nested inside its own
- *  block (spec: "so the lines don't cross other parts") at one more 52px gutter. */
-function PartTreeBranch({
+ *  block (spec: "so the lines don't cross other parts") at one more 52px gutter. #63 R2: exported
+ *  so `GroupPage.tsx` can nest a top-level group member's own parts underneath it, the same tree
+ *  (pins, tree lines, numbering) a family's own Parts section already renders. */
+export function PartTreeBranch({
   node,
   byId,
   outline,
@@ -582,8 +907,10 @@ function PartTreeBranch({
   defaultPreviewWidths,
   apiLabel,
   resolvesAddress,
+  navigation,
   registerNode,
   pinNodesRef,
+  externalParts,
 }: {
   node: PartTreeEntry;
   byId: ReadonlyMap<string, FamilyMember>;
@@ -592,12 +919,18 @@ function PartTreeBranch({
   defaultPreviewWidths?: PreviewWidths;
   apiLabel: string;
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
   registerNode: (id: string, node: View | null) => void;
   pinNodesRef: React.RefObject<Map<string, View | null>>;
+  /** #63 R3: every id this family's own `inWhole` sections list that is actually a group-page
+   *  member rather than one of `byId` above — rendered as `ExternalPartRow` instead of
+   *  `FamilyPart`. Omitted (the default) outside a family page's own Parts tree — `GroupPage.tsx`'s
+   *  own use of this same component never passes one, since a group never has external parts of
+   *  its own. */
+  externalParts?: FamilyDef['externalParts'];
 }) {
   const member = byId.get(node.id);
-  if (!member) return null;
-  const part = (
+  const part = member ? (
     <FamilyPart
       member={member}
       number={outline.get(node.id)?.number}
@@ -606,13 +939,20 @@ function PartTreeBranch({
       defaultPreviewWidths={defaultPreviewWidths}
       apiLabel={apiLabel}
       resolvesAddress={resolvesAddress}
+      navigation={navigation}
       registerNode={registerNode}
       pinRef={(pinNode) => {
         if (pinNode) pinNodesRef.current.set(node.id, pinNode);
         else pinNodesRef.current.delete(node.id);
       }}
     />
-  );
+  ) : (() => {
+    const external = externalParts?.get(node.id);
+    return external ? (
+      <ExternalPartRow memberId={node.id} number={outline.get(node.id)?.number} groupTitle={external.title} resolvesAddress={resolvesAddress} navigation={navigation} />
+    ) : null;
+  })();
+  if (part === null) return null;
   if (node.children.length === 0) return part;
   return (
     <Branch parentId={node.id} childIds={node.children.map((child) => child.id)} pinNodesRef={pinNodesRef}>
@@ -628,8 +968,10 @@ function PartTreeBranch({
             defaultPreviewWidths={defaultPreviewWidths}
             apiLabel={apiLabel}
             resolvesAddress={resolvesAddress}
+            navigation={navigation}
             registerNode={registerNode}
             pinNodesRef={pinNodesRef}
+            externalParts={externalParts}
           />
         ))}
       </View>
@@ -648,9 +990,11 @@ function FamilySectionGroup({
   defaultPreviewWidths,
   apiLabel,
   resolvesAddress,
+  navigation,
   openRows,
   onToggleRow,
   registerNode,
+  externalParts,
 }: {
   section: CatalogMemberSection;
   members: FamilyMember[];
@@ -659,14 +1003,22 @@ function FamilySectionGroup({
   defaultPreviewWidths?: PreviewWidths;
   apiLabel: string;
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
   openRows: ReadonlySet<string>;
   onToggleRow: (id: string) => void;
   registerNode: (id: string, node: View | null) => void;
+  /** #63 R3: see `PartTreeBranch`'s own doc comment. Omitted for the "Related" bucket — A5 only
+   *  ever applies to an `inWhole` section. */
+  externalParts?: FamilyDef['externalParts'];
 }) {
   const byId = useMemo(() => new Map(members.map((member) => [member.id, member])), [members]);
   const pinNodesRef = useRef<Map<string, View | null>>(new Map());
+  // #63 R3: `section.members` may list an external part — present in `externalParts` but never in
+  // `byId` (it isn't one of this family's own `members`) — kept here (unlike a genuinely unknown
+  // id, still dropped) so it gets its own `ExternalPartRow` stub below.
+  const ids = section.members.filter((id) => byId.has(id) || externalParts?.has(id));
   if (section.kind === 'blocks') {
-    const tree = buildPartTree(members.map((member) => member.id), outline);
+    const tree = buildPartTree(ids, outline);
     return (
       <View style={styles.blocksSection}>
         {tree.map((node) => (
@@ -679,8 +1031,10 @@ function FamilySectionGroup({
             defaultPreviewWidths={defaultPreviewWidths}
             apiLabel={apiLabel}
             resolvesAddress={resolvesAddress}
+            navigation={navigation}
             registerNode={registerNode}
             pinNodesRef={pinNodesRef}
+            externalParts={externalParts}
           />
         ))}
       </View>
@@ -688,21 +1042,30 @@ function FamilySectionGroup({
   }
   return (
     <View style={styles.foldedList}>
-      {members.map((member, i) => (
-        <View key={member.id} style={[styles.foldedListRow, i < members.length - 1 && styles.foldedListRowDivider]}>
-          <FoldedRow
-            member={member}
-            number={outline.get(member.id)?.number}
-            allMemberIds={allMemberIds}
-            defaultPreviewWidths={defaultPreviewWidths}
-            apiLabel={apiLabel}
-            resolvesAddress={resolvesAddress}
-            open={openRows.has(member.id)}
-            onToggle={() => onToggleRow(member.id)}
-            registerNode={registerNode}
-          />
-        </View>
-      ))}
+      {ids.map((id, i) => {
+        const member = byId.get(id);
+        const external = member ? undefined : externalParts?.get(id);
+        return (
+          <View key={id} style={[styles.foldedListRow, i < ids.length - 1 && styles.foldedListRowDivider]}>
+            {member ? (
+              <FoldedRow
+                member={member}
+                number={outline.get(id)?.number}
+                allMemberIds={allMemberIds}
+                defaultPreviewWidths={defaultPreviewWidths}
+                apiLabel={apiLabel}
+                resolvesAddress={resolvesAddress}
+                navigation={navigation}
+                open={openRows.has(id)}
+                onToggle={() => onToggleRow(id)}
+                registerNode={registerNode}
+              />
+            ) : external ? (
+              <ExternalPartRow memberId={id} number={outline.get(id)?.number} groupTitle={external.title} resolvesAddress={resolvesAddress} navigation={navigation} />
+            ) : null}
+          </View>
+        );
+      })}
     </View>
   );
 }
@@ -711,12 +1074,12 @@ function FamilySectionGroup({
  *  page's own id as a link when it resolves to a real catalog address, plain text when not — never
  *  a dead link — then its note, when authored. No specimens, no disclosure, no source line, no
  *  number, no pin. */
-function RelatedPageRow({ entry, resolvesAddress }: { entry: RelatedPage; resolvesAddress: (name: string) => boolean }) {
-  const resolved = resolvesAddress(entry.page);
+function RelatedPageRow({ entry, resolvesAddress, navigation }: { entry: RelatedPage; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation }) {
+  const link = familyLink(navigation, resolvesAddress, entry.page);
   return (
     <Text style={styles.belowLine}>
-      {resolved ? (
-        <Text role="link" style={styles.relatedPageName} {...({ href: hashForId(entry.page) } as Record<string, unknown>)}>
+      {link ? (
+        <Text role="link" style={styles.relatedPageName} {...link}>
           {entry.page}
         </Text>
       ) : (
@@ -727,11 +1090,11 @@ function RelatedPageRow({ entry, resolvesAddress }: { entry: RelatedPage; resolv
   );
 }
 
-function RelatedPagesList({ items, resolvesAddress }: { items: readonly RelatedPage[]; resolvesAddress: (name: string) => boolean }) {
+function RelatedPagesList({ items, resolvesAddress, navigation }: { items: readonly RelatedPage[]; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation }) {
   return (
     <View style={styles.relatedPagesList}>
       {items.map((entry, i) => (
-        <RelatedPageRow key={i} entry={entry} resolvesAddress={resolvesAddress} />
+        <RelatedPageRow key={i} entry={entry} resolvesAddress={resolvesAddress} navigation={navigation} />
       ))}
     </View>
   );
@@ -753,9 +1116,11 @@ function FamilyLabeledGroup({
   defaultPreviewWidths,
   apiLabel,
   resolvesAddress,
+  navigation,
   openRows,
   onToggleRow,
   registerNode,
+  externalParts,
 }: {
   label: 'Parts' | 'Related';
   sections: CatalogMemberSection[];
@@ -767,9 +1132,13 @@ function FamilyLabeledGroup({
   defaultPreviewWidths?: PreviewWidths;
   apiLabel: string;
   resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
   openRows: ReadonlySet<string>;
   onToggleRow: (id: string) => void;
   registerNode: (id: string, node: View | null) => void;
+  /** #63 R3: see `PartTreeBranch`'s own doc comment — only ever passed for the "Parts" group
+   *  (A5 only applies to an `inWhole` section). */
+  externalParts?: FamilyDef['externalParts'];
 }) {
   // Field spec item 3: "a page with no relatedPages and no Related sections renders exactly as it
   // does today — no heading, no divider, nothing."
@@ -797,21 +1166,37 @@ function FamilyLabeledGroup({
             defaultPreviewWidths={defaultPreviewWidths}
             apiLabel={apiLabel}
             resolvesAddress={resolvesAddress}
+            navigation={navigation}
             openRows={openRows}
             onToggleRow={onToggleRow}
             registerNode={registerNode}
+            externalParts={externalParts}
           />
         ))}
-        {relatedPages && relatedPages.length > 0 && <RelatedPagesList items={relatedPages} resolvesAddress={resolvesAddress} />}
+        {relatedPages && relatedPages.length > 0 && <RelatedPagesList items={relatedPages} resolvesAddress={resolvesAddress} navigation={navigation} />}
       </View>
     </View>
   );
 }
 
+/** What an anatomy pin looks up by member id: only the `fidelity` (dashed or solid). An own member
+ *  satisfies it as is; an external part is represented by a stub carrying its owner's fidelity
+ *  (`pinMembersWithExternal`). */
+type PinMembers = ReadonlyMap<string, Pick<FamilyMember, 'fidelity'>>;
+
+/** `byId` plus one fidelity-only entry per external part (a member documented on a group page), so
+ *  its anatomy pin is dashed or solid by its owner's fidelity, exactly like an own part's. */
+function pinMembersWithExternal(byId: ReadonlyMap<string, FamilyMember>, externalParts: FamilyDef['externalParts']): PinMembers {
+  if (!externalParts || externalParts.size === 0) return byId;
+  const merged = new Map<string, Pick<FamilyMember, 'fidelity'>>(byId);
+  for (const [id, external] of externalParts) if (!merged.has(id) && external.fidelity) merged.set(id, { fidelity: external.fidelity });
+  return merged;
+}
+
 /** Slice D1 item 5: the family page's own member records and computed outline, read by `AnatomyPin`
  *  so a page's `anatomy.picture` (author-supplied markup, possibly arbitrarily positioned) never
  *  hardcodes a number. `undefined` outside a family page's own anatomy box. */
-const FamilyAnatomyContext = createContext<{ byId: ReadonlyMap<string, FamilyMember>; outline: FamilyDef['outline'] } | undefined>(undefined);
+const FamilyAnatomyContext = createContext<{ byId: PinMembers; outline: FamilyDef['outline'] } | undefined>(undefined);
 
 /** Slice D1 item 5: a pin for use inside `anatomy.picture`. `member` names one of this page's
  *  members and shows its number (dashed when it has no area of its own), looked up through
@@ -841,8 +1226,12 @@ export function AnatomyPin({ member, other }: { member?: string; other?: string
  *  when there's a pin to show — a member with no number (outside every `inWhole` section) gets no
  *  gutter either, so its name starts flush at the row's own left edge instead of under blank
  *  space. */
-function AnatomyMemberRow({ memberId, description, byId, outline }: { memberId: string; description: string; byId: ReadonlyMap<string, FamilyMember>; outline: FamilyDef['outline'] }) {
+function AnatomyMemberRow({ memberId, description, byId, outline, legendFocus, resolvesAddress, navigation }: { memberId: string; description: string; byId: PinMembers; outline: FamilyDef['outline']; legendFocus: LegendFocus; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation }) {
   const pin = anatomyPinFor(memberId, byId, outline);
+  // `familyLink` already resolves this row's own member (`resolvesAddress`'s sibling ids, at
+  // minimum, cover it) — an explicitly supplied `navigation` that still can't resolve it must stay
+  // honest plain text, never a raw `hashForId(memberId)` escape hatch around that refusal.
+  const link = familyLink(navigation, resolvesAddress, memberId);
   return (
     <View style={styles.legendRow}>
       {pin && (
@@ -854,9 +1243,18 @@ function AnatomyMemberRow({ memberId, description, byId, outline }: { memberId:
         </View>
       )}
       <View style={styles.legendBody}>
-        <Text role="link" style={styles.legendName} {...({ href: hashForId(memberId) } as Record<string, unknown>)}>
-          {memberId}
-        </Text>
+        {link ? (
+          <Text
+            role="link"
+            style={styles.legendName}
+            ref={(node) => legendFocus.register(memberId, node as unknown as FocusableNode)}
+            {...({ ...link, onFocus: () => legendFocus.onFocus(memberId), onBlur: () => legendFocus.onBlur(memberId) } as Record<string, unknown>)}
+          >
+            {memberId}
+          </Text>
+        ) : (
+          <Text style={styles.legendName}>{memberId}</Text>
+        )}
         <Text style={styles.legendDesc}>{description}</Text>
       </View>
     </View>
@@ -869,8 +1267,11 @@ function AnatomyMemberRow({ memberId, description, byId, outline }: { memberId:
  *  "other page" row always shows its ↗, so the slot is never blank. Keeping it also keeps
  *  APPROVED.md's "the description ... starts at the name's left edge" — pulling the marker inline
  *  instead left each description hanging 26px to the left of its own name. */
-function AnatomyOtherRow({ name, description, resolvesAddress }: { name: string; description: string; resolvesAddress: (name: string) => boolean }) {
-  const resolved = resolvesAddress(name);
+function AnatomyOtherRow({ name, description, resolvesAddress, navigation, legendFocus }: { name: string; description: string; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation; legendFocus: LegendFocus }) {
+  const link = familyLink(navigation, resolvesAddress, name);
+  // No member id of its own (it names a component documented elsewhere), so it needs its own
+  // namespace to never collide with a real member id sharing the same text.
+  const focusKey = `other:${name}`;
   return (
     <View style={styles.legendRow}>
       <View style={styles.legendPinSlot} {...ARIA_HIDDEN} testID="legend-pin-slot">
@@ -880,8 +1281,13 @@ function AnatomyOtherRow({ name, description, resolvesAddress }: { name: string;
       </View>
       <View style={styles.legendBody}>
         <View style={styles.legendNameRow}>
-          {resolved ? (
-            <Text role="link" style={styles.legendName} {...({ href: hashForId(name) } as Record<string, unknown>)}>
+          {link ? (
+            <Text
+              role="link"
+              style={styles.legendName}
+              ref={(node) => legendFocus.register(focusKey, node as unknown as FocusableNode)}
+              {...({ ...link, onFocus: () => legendFocus.onFocus(focusKey), onBlur: () => legendFocus.onBlur(focusKey) } as Record<string, unknown>)}
+            >
               {name}
             </Text>
           ) : (
@@ -895,69 +1301,200 @@ function AnatomyOtherRow({ name, description, resolvesAddress }: { name: string;
   );
 }
 
-function AnatomyGroup({ group, byId, outline, resolvesAddress }: { group: CatalogAnatomyGroup; byId: ReadonlyMap<string, FamilyMember>; outline: FamilyDef['outline']; resolvesAddress: (name: string) => boolean }) {
+function AnatomyGroup({ group, byId, outline, resolvesAddress, navigation, legendFocus }: { group: CatalogAnatomyGroup; byId: PinMembers; outline: FamilyDef['outline']; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation; legendFocus: LegendFocus }) {
   return (
     <View>
       <Text style={styles.legendGroupLabel}>{group.label}</Text>
       {group.items.map((item, i) =>
         'member' in item ? (
-          <AnatomyMemberRow key={i} memberId={item.member} description={item.description} byId={byId} outline={outline} />
+          <AnatomyMemberRow key={i} memberId={item.member} description={item.description} byId={byId} outline={outline} legendFocus={legendFocus} resolvesAddress={resolvesAddress} navigation={navigation} />
         ) : (
-          <AnatomyOtherRow key={i} name={item.other} description={item.description} resolvesAddress={resolvesAddress} />
+          <AnatomyOtherRow key={i} name={item.other} description={item.description} resolvesAddress={resolvesAddress} navigation={navigation} legendFocus={legendFocus} />
         ),
       )}
     </View>
   );
 }
 
-/** Slice D1 item 5: the anatomy box — always first (right after the page head), a plain-card
- *  "Anatomy" label above the picture (the same label-outside-card treatment the specimen grids
- *  below it use), and a legend beside it (six items or fewer) or below it in up to three balanced
- *  columns (more than six). */
-function AnatomyBox({ anatomy, byId, outline, resolvesAddress }: { anatomy: CatalogAnatomy; byId: ReadonlyMap<string, FamilyMember>; outline: FamilyDef['outline']; resolvesAddress: (name: string) => boolean }) {
+/** Slice D1 item 5, narrow-layout fix: the anatomy box — always first (right after the page head),
+ *  a plain-card "Anatomy" label above the picture (the same label-outside-card treatment the
+ *  specimen grids below it use), and a legend beside it or below it, decided by `anatomyLayout`
+ *  from the card's own measured width and the picture's own measured intrinsic width (web only —
+ *  see `onCardLayout`/`onPictureLayout` below), in up to three balanced columns when stacked.
+ *
+ *  The stage (and the picture inside it) renders at the same position in this tree whether the
+ *  legend sits beside it or below it — only the wrapper's own `flexDirection` and the legend's own
+ *  shape change around it — so toggling between the two never remounts the picture and discards
+ *  its own authored state or focus.
+ *
+ *  #63 R2: exported so `GroupPage.tsx` can render an embedded family's own anatomy box — several
+ *  may exist on one group page (one per top-level member that has one), each its own independent
+ *  instance of this component (its own `FamilyAnatomyContext`/measurement state), not a
+ *  page-singleton. */
+export function AnatomyBox({ anatomy, byId, outline, resolvesAddress, navigation }: { anatomy: CatalogAnatomy; byId: PinMembers; outline: FamilyDef['outline']; resolvesAddress: (name: string) => boolean; navigation?: ReferenceNavigation }) {
   const totalItems = anatomy.groups.reduce((sum, group) => sum + group.items.length, 0);
-  const stacked = totalItems > 6;
+  const [cardWidth, setCardWidth] = useState(0);
+  const [pictureWidth, setPictureWidth] = useState(0);
+  // Width-driven layout is a web-only concern (field spec: native keeps its existing item-count
+  // decision) — `onLayout` itself is the same RN-compatible API either platform would use, but
+  // these handlers simply never update state off web, so `anatomyLayout` always sees an
+  // unmeasured (0) width on native and keeps falling back to the original `totalItems > 6` rule.
+  // `onCardLayout` sits on the card's own interior wrapper (below), not the bordered card itself,
+  // so the measured width is the interior content width `anatomyLayout`'s budget already assumes
+  // — the bordered card's own box would overstate it by its own 2px (1px each side) border.
+  const onCardLayout = (event: LayoutChangeEvent) => {
+    if (Platform.OS !== 'web') return;
+    const next = Math.round(event.nativeEvent.layout.width);
+    if (next > 0 && next !== cardWidth) setCardWidth(next);
+  };
+  const onPictureLayout = (event: LayoutChangeEvent) => {
+    if (Platform.OS !== 'web') return;
+    const next = Math.round(event.nativeEvent.layout.width);
+    if (next > 0 && next !== pictureWidth) setPictureWidth(next);
+  };
+  const { stacked, legendColumns } = anatomyLayout(totalItems, cardWidth, pictureWidth);
   const contextValue = useMemo(() => ({ byId, outline }), [byId, outline]);
+
+  // Focus fix: a legend row's own focusable name link, keyed by its stable address (a member id,
+  // or `other:<name>`), registered by whichever row currently renders it — see `LegendFocus`'s own
+  // comment above. Refs/plain mutable state, not React state: recording "who last had focus"
+  // must never itself trigger a render.
+  const legendNodesRef = useRef<Map<string, FocusableNode | null>>(new Map());
+  const focusedLegendKeyRef = useRef<string | undefined>(undefined);
+  const legendFocus: LegendFocus = useMemo(
+    () => ({
+      register: (key, node) => {
+        if (node) legendNodesRef.current.set(key, node);
+        else legendNodesRef.current.delete(key);
+      },
+      onFocus: (key) => {
+        focusedLegendKeyRef.current = key;
+      },
+      onBlur: (key) => {
+        if (focusedLegendKeyRef.current === key) focusedLegendKeyRef.current = undefined;
+      },
+    }),
+    [],
+  );
+  // A layout-mode switch (`anatomyLegend` <-> `anatomyColumns`) or a balanced-column count change
+  // can remount the legend row that currently holds focus at a different tree position — the
+  // browser then drops focus to `<body>` (web's own behavior for a removed focused node). Restore
+  // it to the replacement row at the same address, right after that same render commits, the same
+  // web-only `.focus()` convention `scrollAndFocusMember` already uses below. Guarded on
+  // `document.activeElement === document.body` so another control's focus is never overridden.
+  // Explicit blur clears the recorded key, so clicking page background cannot revive stale focus;
+  // disconnecting an active anchor during reflow does not dispatch that blur event.
+  useLayoutEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const key = focusedLegendKeyRef.current;
+    if (!key) return;
+    if (document.activeElement !== document.body) return;
+    legendNodesRef.current.get(key)?.focus?.({ preventScroll: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stacked, legendColumns]);
+
+  const stage = (
+    <View style={styles.anatomyStage}>
+      {/* Measures the picture's own intrinsic width, not the stage: the stage stretches to the
+          card's full width when stacked (a plain View's default cross-axis stretch in a column
+          layout), but this wrapper's own `alignItems: 'center'` parent never stretches it in turn,
+          so the picture's measured width stays the same whichever layout is in effect. Web only:
+          this measuring wrapper would otherwise give an authored picture (e.g. one already using
+          `alignSelf: 'stretch'` or percentage sizing) a new containing block it never had before —
+          native keeps receiving `anatomy.picture` directly, as it always did. */}
+      {Platform.OS === 'web' ? (
+        // `testID` exists only so a renderer test can trigger a real resize on exactly this node
+        // without depending on the author's own picture markup — see `legendPinSlot`'s comment.
+        <View onLayout={onPictureLayout} testID="anatomy-picture-measure">
+          {anatomy.picture}
+        </View>
+      ) : (
+        anatomy.picture
+      )}
+    </View>
+  );
+
   return (
     <FamilyAnatomyContext.Provider value={contextValue}>
       <View style={styles.anatomy}>
         <Text style={styles.anatomyHeadText}>Anatomy</Text>
         <View style={styles.anatomyCard}>
-        {stacked ? (
-          <View>
-            <View style={styles.anatomyStage}>{anatomy.picture}</View>
-            <View style={styles.anatomyColumns}>
-              {anatomyColumns(anatomy.groups, 3).map((column, i) => (
-                <View key={i} style={styles.anatomyColumn}>
-                  {column.map((group, j) => (
-                    <AnatomyGroup key={j} group={group} byId={byId} outline={outline} resolvesAddress={resolvesAddress} />
-                  ))}
-                </View>
-              ))}
-            </View>
-          </View>
-        ) : (
-          <View style={styles.anatomyBody}>
-            <View style={styles.anatomyStage}>{anatomy.picture}</View>
-            <View style={styles.anatomyLegend}>
+          {anatomy.picture == null ? (
+            // No picture (e.g. mutually exclusive parts that never share one frame): the legend
+            // takes the card's full width instead of sitting beside an empty picture column.
+            <View style={styles.anatomyLegendAlone} testID="anatomy-legend">
               {anatomy.groups.map((group, i) => (
-                <AnatomyGroup key={i} group={group} byId={byId} outline={outline} resolvesAddress={resolvesAddress} />
+                <AnatomyGroup key={i} group={group} byId={byId} outline={outline} resolvesAddress={resolvesAddress} navigation={navigation} legendFocus={legendFocus} />
               ))}
             </View>
+          ) : (
+          <View style={stacked ? undefined : styles.anatomyBody} onLayout={onCardLayout} testID="anatomy-body">
+            {stage}
+            {stacked ? (
+              // `testID` exists only so a renderer test can assert which layout rendered without
+              // depending on geometry jsdom can't provide (no ResizeObserver there — `onLayout`
+              // never fires), the same reason `legendPinSlot` carries one above.
+              <View style={styles.anatomyColumns} testID="anatomy-columns">
+                {anatomyColumns(anatomy.groups, legendColumns).map((column, i) => (
+                  <View key={i} style={styles.anatomyColumn}>
+                    {column.map((group, j) => (
+                      <AnatomyGroup key={j} group={group} byId={byId} outline={outline} resolvesAddress={resolvesAddress} navigation={navigation} legendFocus={legendFocus} />
+                    ))}
+                  </View>
+                ))}
+              </View>
+            ) : (
+              <View style={styles.anatomyLegend} testID="anatomy-legend">
+                {anatomy.groups.map((group, i) => (
+                  <AnatomyGroup key={i} group={group} byId={byId} outline={outline} resolvesAddress={resolvesAddress} navigation={navigation} legendFocus={legendFocus} />
+                ))}
+              </View>
+            )}
           </View>
-        )}
+          )}
         </View>
       </View>
     </FamilyAnatomyContext.Provider>
   );
 }
 
+/** #63 R2: a group member that is also an external part of some family's own outline — a plain
+ *  link line, "Part N of <Family>", to the family page (never to a specific member address — the
+ *  family page has no separate address for one of its own parts). Reuses this file's own
+ *  `belowLine`/`relatedLink` styles rather than a new visual; renders through `familyLink` so it
+ *  resolves and activates exactly like every other canonical link `FamilyPage`'s own pieces
+ *  produce (plain text, never a dead link, when it doesn't resolve). */
+export function PartOfLine({
+  partOf, resolvesAddress, navigation,
+}: {
+  partOf: { pageId: string; title: string; number: string };
+  resolvesAddress: (name: string) => boolean;
+  navigation?: ReferenceNavigation;
+}) {
+  const link = familyLink(navigation, resolvesAddress, partOf.pageId);
+  return (
+    <Text style={styles.belowLine}>
+      {`Part ${partOf.number} of `}
+      {link ? (
+        <Text role="link" style={styles.relatedLink} {...link}>
+          {partOf.title}
+        </Text>
+      ) : (
+        <Text>{partOf.title}</Text>
+      )}
+    </Text>
+  );
+}
+
 /** Scrolls a member's node into view and moves focus to it (spec §5.3 "Member address"). The jump
  *  is always instant, like a normal anchor link: a smooth `scrollIntoView` does not reliably move
  *  the shell's nested scroll container on web (the same limitation `CatalogShell`'s
  *  `resetMainScroll` works around), and an instant jump also satisfies Reduce Motion. Native has
- *  no scroll-into-view of its own; `AccessibilityInfo`'s focus call is enough there. */
-function scrollAndFocusMember(node: View): void {
+ *  no scroll-into-view of its own; `AccessibilityInfo`'s focus call is enough there.
+ *
+ *  #63 R2: exported so `GroupPage.tsx` reuses the exact same jump mechanics for its own member
+ *  addresses, rather than a second implementation. */
+export function scrollAndFocusMember(node: View): void {
   if (Platform.OS === 'web') {
     const dom = node as unknown as { scrollIntoView?: (options: { behavior: 'auto'; block: 'start' }) => void; focus?: (options?: { preventScroll?: boolean }) => void };
     dom.scrollIntoView?.({ behavior: 'auto', block: 'start' });
@@ -986,6 +1523,7 @@ export function FamilyPage<TId extends string>({
   focusMemberId,
   focusNonce,
   knownAddressIds,
+  navigation,
 }: {
   def: SectionDef<TId>;
   groupLabel?: string;
@@ -1011,10 +1549,19 @@ export function FamilyPage<TId extends string>({
    *  omitted when `FamilyPage` is used standalone (e.g. this very page's own live demo), where
    *  only this family's own members can resolve. */
   knownAddressIds?: ReadonlySet<string>;
+  /** Task 2B2: `CatalogShell`'s own shared reference navigation (see `catalogReferences.ts`'s
+   *  `ReferenceNavigation`/`referenceLinkProps`) — every one of this page's own link producers
+   *  (below-specimens/whole lines, Uses, related pages, anatomy legend) resolves and activates
+   *  through it when supplied, retaining this family's own sibling-member addresses exactly as
+   *  `resolvesAddress` below already does. Omitted (a standalone-mounted `FamilyPage`, this
+   *  framework's own catalog demo included) keeps every one of them at its prior plain-`href`-only
+   *  behavior, unchanged. */
+  navigation?: ReferenceNavigation<TId>;
 }) {
   const family = def.family!;
   const apiLabel = family.apiLabel ?? 'API';
   const byId = useMemo(() => new Map(family.members.map((member) => [member.id, member])), [family.members]);
+  const anatomyById = useMemo(() => pinMembersWithExternal(byId, family.externalParts), [byId, family.externalParts]);
   // N7: a `whole` that isn't one of its own members (bad data, already reported by
   // `validateFamily`) must degrade to a missing block, never a crash reading an absent member.
   const wholeMember = resolveWhole(byId, family.whole);
@@ -1071,28 +1618,11 @@ export function FamilyPage<TId extends string>({
   }, [focusMemberId, openRows, focusNonce]);
 
   return (
+    <MemberPanelHost>
     <View>
-      {groupLabel && <Text style={styles.breadcrumb}>{breadcrumbRoot ? `${breadcrumbRoot} / ${groupLabel}` : groupLabel}</Text>}
-      {banner}
-      <View style={styles.pageHead}>
-        <View style={styles.titlebar}>
-          <View style={styles.titleText}>
-            <View ref={headingRef} tabIndex={-1} role="heading" {...({ 'aria-level': 1 } as Record<string, unknown>)} style={styles.headingTarget}>
-              <Text style={styles.title}>{def.title ?? def.id}</Text>
-            </View>
-            <Text style={styles.desc}>{def.description}</Text>
-            {family.notShown && (
-              <Text style={styles.notShown}>
-                <Text style={styles.notShownLead}>Not shown in the browser: </Text>
-                {family.notShown}
-              </Text>
-            )}
-          </View>
-          {pager && <SectionPagerRow pager={pager} />}
-        </View>
-      </View>
+      <FamilyPageHead kind="family" def={def} groupLabel={groupLabel} breadcrumbRoot={breadcrumbRoot} banner={banner} pager={pager} headingRef={headingRef} notShown={family.notShown} />
 
-      {family.anatomy && <AnatomyBox anatomy={family.anatomy} byId={byId} outline={family.outline} resolvesAddress={resolvesAddress} />}
+      {family.anatomy && <AnatomyBox anatomy={family.anatomy} byId={anatomyById} outline={family.outline} resolvesAddress={resolvesAddress} navigation={navigation} />}
 
       {wholeMember && (
         <View style={styles.whole} ref={(node) => registerNode(wholeMember.id, node)} tabIndex={-1}>
@@ -1114,9 +1644,10 @@ export function FamilyPage<TId extends string>({
                   source={wholeMember.source}
                   alsoUsedBy={wholeMember.alsoUsedBy ?? []}
                   resolvesAddress={resolvesAddress}
+                  navigation={navigation}
                 />
                 <View style={styles.disclosureSpacer}>
-                  <MemberDisclosureToggle member={wholeMember} apiLabel={apiLabel} resolvesAddress={resolvesAddress} />
+                  <MemberDisclosureToggle member={wholeMember} apiLabel={apiLabel} resolvesAddress={resolvesAddress} navigation={navigation} />
                 </View>
               </>
             );
@@ -1133,9 +1664,11 @@ export function FamilyPage<TId extends string>({
         defaultPreviewWidths={defaultPreviewWidths}
         apiLabel={apiLabel}
         resolvesAddress={resolvesAddress}
+        navigation={navigation}
         openRows={openRows}
         onToggleRow={toggleRow}
         registerNode={registerNode}
+        externalParts={family.externalParts}
       />
       <FamilyLabeledGroup
         label="Related"
@@ -1147,11 +1680,13 @@ export function FamilyPage<TId extends string>({
         defaultPreviewWidths={defaultPreviewWidths}
         apiLabel={apiLabel}
         resolvesAddress={resolvesAddress}
+        navigation={navigation}
         openRows={openRows}
         onToggleRow={toggleRow}
         registerNode={registerNode}
       />
     </View>
+    </MemberPanelHost>
   );
 }
 
@@ -1168,6 +1703,9 @@ const styles = StyleSheet.create({
   title: { ...CATALOG_TEXT.pageTitle, color: CATALOG_COLOR.text, marginBottom: 5 },
   desc: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted, maxWidth: 700 },
   notShown: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted, maxWidth: 700, marginTop: CATALOG_SPACE.sm },
+  kindNote: { maxWidth: 700, marginTop: CATALOG_SPACE.sm, borderLeftWidth: 2, borderLeftColor: CATALOG_COLOR.borderStrong, paddingLeft: CATALOG_SPACE.md, paddingVertical: 2 },
+  kindNoteText: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  kindNoteLead: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
   notShownLead: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
 
   // Slice D1 item 5: the anatomy box's own "Anatomy" label sits outside, above a plain card —
@@ -1179,6 +1717,7 @@ const styles = StyleSheet.create({
   anatomyBody: { flexDirection: 'row', alignItems: 'flex-start' },
   anatomyStage: { padding: CATALOG_SPACE.xl, alignItems: 'center', justifyContent: 'center' },
   anatomyLegend: { flex: 1, borderLeftWidth: 1, borderLeftColor: CATALOG_COLOR.border, paddingVertical: CATALOG_SPACE.sm },
+  anatomyLegendAlone: { paddingVertical: CATALOG_SPACE.sm },
   anatomyColumns: { flexDirection: 'row', borderTopWidth: 1, borderTopColor: CATALOG_COLOR.border },
   anatomyColumn: { flex: 1, borderLeftWidth: 1, borderLeftColor: CATALOG_COLOR.border, paddingVertical: CATALOG_SPACE.sm },
   // Host-authored text (`anatomy.groups[].label`) — never a transforming role like `microLabel`,
@@ -1283,6 +1822,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chevron: { ...CATALOG_TEXT.icon, color: CATALOG_COLOR.accent },
+  panelRoot: { flex: 1, flexDirection: 'row', justifyContent: 'flex-end' },
+  panelScrim: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: PANEL_SCRIM },
+  panel: { width: PANEL_WIDTH, maxWidth: '100%', height: '100%', backgroundColor: CATALOG_COLOR.surface, borderLeftWidth: 1, borderLeftColor: CATALOG_COLOR.borderStrong },
+  panelFull: { width: '100%' },
+  panelHead: { flexDirection: 'row', alignItems: 'flex-start', gap: CATALOG_SPACE.md, padding: CATALOG_SPACE.lg, borderBottomWidth: 1, borderBottomColor: CATALOG_COLOR.border },
+  panelTitle: { flex: 1, gap: 2 },
+  panelKicker: { ...CATALOG_TEXT.microLabel, color: CATALOG_COLOR.textMuted },
+  panelName: { ...CATALOG_TEXT.heading3, color: CATALOG_COLOR.text },
+  panelBody: { flex: 1 },
+  panelBodyContent: { padding: CATALOG_SPACE.lg },
   disclosureToggleLabel: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.accent },
   disclosureBody: { gap: CATALOG_SPACE.sm, paddingTop: CATALOG_SPACE.xs },
   note: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.text },