@krapwoo/ds-viewer 0.2.0 → 0.4.0

package/native/catalog/CatalogSidebar.tsx

@@ -3,7 +3,7 @@ import { View, Text, ScrollView, Pressable, StyleSheet, Image } from 'react-nati
 import type { ImageSourcePropType, LayoutChangeEvent, NativeSyntheticEvent, ImageLoadEventData } from 'react-native';
 import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
 import { logoLayout } from './logoLayout';
-import { filterGroups, hashForId } from './catalogNavigation';
+import { filterGroups, hashForId, UPDATE_PAGE_ID } from './catalogNavigation';
 import type { NavGroup } from './types';
 import { CatalogSearchInput } from './CatalogSearchInput';
 
@@ -43,6 +43,32 @@ function NavItem<TId extends string>({ id, active, onPress }: { id: TId; active:
   );
 }
 
+function FooterLink({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      accessibilityRole="link"
+      accessibilityState={{ selected: active }}
+      {...({ href: hashForId(UPDATE_PAGE_ID), ...(active ? { 'aria-current': 'page' } : null) } as Record<string, unknown>)}
+      style={({ pressed }) => [
+        styles.footerLink,
+        (pressed || hovered) && styles.footerLinkHover,
+        active && styles.footerLinkActive,
+        focused && styles.focusRing,
+      ]}
+    >
+      <View style={styles.footerDot} />
+      <Text style={[styles.footerLabel, active && styles.footerLabelActive]}>{label}</Text>
+    </Pressable>
+  );
+}
+
 /**
  * Catalog navigation: app name, caption, a filter field, and one link per page under grouped
  * headings. Selecting a link opens that page (CatalogShell owns which page is shown). The filter
@@ -55,6 +81,7 @@ export function CatalogSidebar<TId extends string>({
   groups,
   active,
   onPress,
+  footer,
 }: {
   logo: string;
   /** Optional logo image, validated and bundled by `cli/workspace.ts` from the project's `logo`
@@ -64,8 +91,12 @@ export function CatalogSidebar<TId extends string>({
   logoImageSource?: ImageSourcePropType;
   caption: string;
   groups: NavGroup<TId>[];
-  active: TId | undefined;
+  active: string | undefined;
   onPress: (id: TId) => void;
+  /** The quiet update-notice link below the nav list (design §5's footer line), or `undefined`
+   *  when there is no update to show. `active` is true while the update page itself is open — it
+   *  gets the same active styling a selected nav item would. */
+  footer?: { label: string; active: boolean; onPress: () => void };
 }) {
   const [query, setQuery] = useState('');
   // A bundled local image (the only kind `cli/workspace.ts` ever produces — see its doc comment
@@ -165,6 +196,11 @@ export function CatalogSidebar<TId extends string>({
           </View>
         ))}
       </ScrollView>
+      {footer && (
+        <View style={styles.footerContainer}>
+          <FooterLink label={footer.label} active={footer.active} onPress={footer.onPress} />
+        </View>
+      )}
     </View>
   );
 }
@@ -193,6 +229,26 @@ const styles = StyleSheet.create({
   inlineHeaderTop: { alignItems: 'flex-start' },
   inlineText: { flex: 1, minWidth: 0 },
   empty: { fontSize: CATALOG_TYPE.sm, 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,
+  },
+  footerLink: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: CATALOG_SPACE.sm,
+    minHeight: CATALOG_LAYOUT.controlSize,
+    paddingHorizontal: 10,
+    borderRadius: CATALOG_RADIUS.sm,
+  },
+  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' },
   groupLabel: {
     fontSize: CATALOG_TYPE.xs,
     fontWeight: '800',

package/native/catalog/ComparisonGrid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
-import { COLUMN_MIN_WIDTH, MATRIX_LAYOUT, cellKey, gridWidthBounds, indexCells, validateComparison } from './comparison';
+import { COLUMN_MIN_WIDTH, MATRIX_LAYOUT, axisItems, cellKey, gridWidthBounds, indexCells, validateComparison } from './comparison';
 import type { ComparisonDef, SpecimenSize } from './types';
 
 /**
@@ -14,7 +14,9 @@ export function ComparisonGrid({ def, size, sectionId }: { def: ComparisonDef; s
     for (const issue of validateComparison({ ...def, size })) console.warn(`[Catalog] ${sectionId}: ${issue}`);
   }
   const cells = indexCells(def);
-  const bounds = gridWidthBounds(def.columns.length, size);
+  const rows = axisItems(def.rows);
+  const columns = axisItems(def.columns);
+  const bounds = gridWidthBounds(columns.length, size);
   const column = {
     flexGrow: 1,
     flexShrink: 1,
@@ -22,7 +24,7 @@ export function ComparisonGrid({ def, size, sectionId }: { def: ComparisonDef; s
     minWidth: COLUMN_MIN_WIDTH[size],
     maxWidth: MATRIX_LAYOUT.columnMaxWidth,
   };
-  const lastColumn = def.columns.length - 1;
+  const lastColumn = columns.length - 1;
 
   return (
     <ScrollView horizontal style={styles.scroller} contentContainerStyle={styles.scrollContent}>
@@ -35,18 +37,18 @@ export function ComparisonGrid({ def, size, sectionId }: { def: ComparisonDef; s
           <View role="columnheader" style={[styles.cell, styles.rowHeader, styles.headerCell]}>
             <Text style={styles.headerText}>{def.rowLabel}</Text>
           </View>
-          {def.columns.map((c, ci) => (
+          {columns.map((c, ci) => (
             <View key={c.key} role="columnheader" style={[styles.cell, column, styles.headerCell, ci === lastColumn && styles.lastColumn]}>
               <Text style={styles.headerText}>{c.label}</Text>
             </View>
           ))}
         </View>
-        {def.rows.map((row, ri) => (
-          <View key={row.key} role="row" style={[styles.row, ri === def.rows.length - 1 && styles.lastRow]}>
+        {rows.map((row, ri) => (
+          <View key={row.key} role="row" style={[styles.row, ri === rows.length - 1 && styles.lastRow]}>
             <View role="rowheader" style={[styles.cell, styles.rowHeader, styles.bodyRow]}>
               <Text style={styles.rowHeaderText}>{row.label}</Text>
             </View>
-            {def.columns.map((c, ci) => {
+            {columns.map((c, ci) => {
               const cell = cells.get(cellKey(row.key, c.key));
               return (
                 <View key={c.key} role="cell" style={[styles.cell, column, styles.bodyRow, styles.specimenCell, ci === lastColumn && styles.lastColumn]}>

package/native/catalog/SectionBlock.tsx

@@ -213,6 +213,7 @@ export function SectionBlock<TId extends string>({
   def,
   groupLabel,
   breadcrumbRoot,
+  banner,
   pager,
   headingRef,
   headingLevel = 1,
@@ -221,6 +222,9 @@ export function SectionBlock<TId extends string>({
   def: SectionDef<TId>;
   groupLabel?: string;
   breadcrumbRoot?: string;
+  /** The major-update banner (`CatalogShell`'s own `MajorBanner`), rendered between the breadcrumb
+   *  and the title — the approved mockup's own `PAGE_BG` order: crumb, then banner, then title. */
+  banner?: React.ReactNode;
   pager?: SectionPager<TId>;
   headingRef?: React.Ref<View>;
   headingLevel?: 1 | 2;
@@ -238,6 +242,7 @@ export function SectionBlock<TId extends string>({
       {groupLabel && (
         <Text style={styles.breadcrumb}>{breadcrumbRoot ? `${breadcrumbRoot} / ${groupLabel}` : groupLabel}</Text>
       )}
+      {banner}
       <View style={styles.titlebar}>
         <View style={styles.titleText}>
           {/* The focus target is the heading itself, so assistive tech announces its role and level. */}

package/native/catalog/SpacingScaleGallery.tsx

@@ -8,7 +8,7 @@ import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS } from './to
  * framework's own, and any host app's). Generic over the step-name type so it works for any scale
  * (the host app's `DS_SPACING`, this framework's own `CATALOG_SPACE`, or a third-party one).
  */
-export function SpacingScaleGallery<TStep extends string>({
+export function SpacingScaleGallery<TStep extends string | number>({
   steps,
   values,
   useNotes,