@krapwoo/ds-viewer 0.1.0 → 0.2.0

package/starter-kit/icons/types.ts

@@ -0,0 +1,69 @@
+/**
+ * Platform-neutral icon identity + render props.
+ *
+ * No react-native / DOM imports here on purpose — this module is shared by `Icon.native.tsx` and
+ * the data map in `paths.ts`, and stays ready for a future non-native renderer to import too.
+ */
+
+/** All icons from the Metro NYC Figma design system. */
+export type IconName =
+  | 'home'
+  | 'briefcase'
+  | 'add'
+  | 'pencil'
+  | 'flag'
+  | 'menu'
+  | 'pin'
+  | 'pin-filled'
+  | 'pin-hollow'
+  | 'walk'
+  | 'clear'
+  | 'locate-fixed'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'move-up-right'
+  | 'footprints'
+  | 'paperclip'
+  | 'map'
+  | 'info'
+  | 'bug'
+  | 'bell'
+  | 'bell-plus'
+  | 'search'
+  | 'clock'
+  | 'skip-forward'
+  | 'circle-slash'
+  | 'circle-plus'
+  | 'circle-check'
+  | 'circle-x'
+  | 'alert-circle'
+  | 'info-circle'
+  | 'check'
+  | 'thumb-up'
+  | 'thumb-down'
+  | 'users'
+  // Clock face (hour hand at 8) — used by the arrive-by row
+  | 'clock-8'
+  | 'triangle-alert'
+  | 'door-open'
+  | 'navigation'
+  | 'waypoints'
+  // Transit mode icons
+  | 'subway'
+  | 'train'
+  | 'ferry';
+
+/** Shared props consumed by both the native and web `Icon` renderers. */
+export interface IconRenderProps {
+  name: IconName;
+  /** Render size in points/pixels. SVG scales without artifacts (default 16). */
+  size?: number;
+  /** Override fill/stroke color. Defaults to the design-system regular text color. */
+  color?: string;
+  /** Override a stroke-mode icon's line weight. Defaults to the icon's own def (usually 2) — bump
+   *  it for a bolder look (e.g. Checkbox's checkmark) without needing a second icon definition.
+   *  Ignored for fill-mode icons, which have no stroke to widen. */
+  strokeWidth?: number;
+}

package/starter-kit/pages/Colors.catalog.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, DividedStack, VariantGroup, Swatch } from '@krapwoo/ds-viewer';
+import { DS_PALETTE, DS_SEMANTIC, colorValueLabel, type PaletteName } from '../tokens';
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 12 },
+  previewValue: { fontSize: 13, color: DS_SEMANTIC.text.muted },
+});
+
+const SEMANTIC_GROUPS: { name: string; desc: string; entries: [string, string][] }[] = [
+  { name: 'Semantic · surface', desc: 'page and card backgrounds', entries: Object.entries(DS_SEMANTIC.surface) },
+  { name: 'Semantic · text', desc: 'text colors', entries: Object.entries(DS_SEMANTIC.text) },
+  { name: 'Semantic · border', desc: 'dividers and outlines', entries: Object.entries(DS_SEMANTIC.border) },
+  { name: 'Semantic · interaction', desc: 'pressed/hover/focus overlays', entries: Object.entries(DS_SEMANTIC.interaction).filter(([name]) => name !== 'disabledOpacity') as [string, string][] },
+  { name: 'Semantic · element', desc: 'dividers and backdrops', entries: Object.entries(DS_SEMANTIC.element) },
+  { name: 'Semantic · emphasis', desc: 'saturated status accents', entries: Object.entries(DS_SEMANTIC.emphasis) },
+  { name: 'Semantic · shade', desc: 'tinted status fills', entries: Object.entries(DS_SEMANTIC.shade) },
+];
+
+function ColorsGallery() {
+  const paletteHues = Object.keys(DS_PALETTE) as PaletteName[];
+  return (
+    <DividedStack>
+      {SEMANTIC_GROUPS.map((group) => (
+        <VariantGroup key={group.name} name={group.name} desc={group.desc} align="left">
+          <View style={styles.row}>
+            {group.entries.map(([name, value]) => (
+              <Swatch key={name} name={name} value={value} valueLabel={colorValueLabel(value)} width={100} />
+            ))}
+          </View>
+        </VariantGroup>
+      ))}
+      <VariantGroup name="interaction.disabledOpacity" desc="not a color — opacity applied to a whole disabled tappable element" align="left">
+        <Text style={styles.previewValue}>{DS_SEMANTIC.interaction.disabledOpacity}</Text>
+      </VariantGroup>
+      {paletteHues.map((hue) => (
+        <VariantGroup key={hue} name={`Palette · ${hue}`} desc="raw ramp, 0 → 800" align="left">
+          <View style={styles.row}>
+            {Object.entries(DS_PALETTE[hue]).map(([step, value]) => (
+              <Swatch key={step} name={`${hue}.${step}`} value={value} />
+            ))}
+          </View>
+        </VariantGroup>
+      ))}
+    </DividedStack>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Tokens',
+  description: 'The color tokens the whole system is built from — saturated semantic accents and the raw grey ramp, each shown at its real value.',
+  tokenGallery: true,
+  render: () => <ColorsGallery />,
+});

package/starter-kit/pages/Font.catalog.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, DividedStack, VariantGroup, TypeScaleGallery } from '@krapwoo/ds-viewer';
+import { DS_FONT_WEIGHT, DS_FONT_WEIGHT_USE, DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY, type FontWeightName } from '../tokens';
+
+const styles = StyleSheet.create({
+  previewRow: { flexDirection: 'row', alignItems: 'center', gap: DS_SPACING[600] },
+  previewLabel: { minWidth: 64, ...DS_TYPOGRAPHY.labelSm, color: DS_SEMANTIC.text.regular },
+  previewValue: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted },
+  // Font page — the "is a typeface actually set" fact needs to read at a glance, not be buried in
+  // the explanatory paragraph below it.
+  typefaceStatus: { ...DS_TYPOGRAPHY.labelSm, color: DS_SEMANTIC.text.regular },
+  typefaceNote: { marginTop: DS_SPACING[400] },
+});
+
+export default defineCatalogPage({
+  group: 'Tokens',
+  description: 'The typeface in use, and the font-weight scale on its own — most components get their weight via a DS_TYPOGRAPHY token\'s embedded fontWeight rather than DS_FONT_WEIGHT directly.',
+  tokenGallery: true,
+  render: () => (
+    <DividedStack>
+      <VariantGroup name="Typeface" desc="which font family renders every token on this page" align="left">
+        <View style={styles.previewRow}>
+          <Text style={styles.previewLabel}>Font family</Text>
+          <Text style={styles.typefaceStatus}>None set — falls back to the OS default</Text>
+        </View>
+        <Text style={[styles.previewValue, styles.typefaceNote]}>
+          No custom typeface is loaded anywhere in this template — every DS_TYPOGRAPHY / DS_FONT_WEIGHT
+          token renders in the OS default system font: San Francisco on iOS, Roboto on Android, the
+          browser's system-ui stack on web (which is what you're seeing on this page right now). To
+          use a custom font instead, load it (e.g. via expo-font's useFonts) and add a fontFamily
+          field to each DS_TYPOGRAPHY token — none currently set one.
+        </Text>
+      </VariantGroup>
+      <VariantGroup name="Weight" desc="DS_FONT_WEIGHT, in isolation" align="left">
+        <TypeScaleGallery
+          steps={Object.keys(DS_FONT_WEIGHT) as FontWeightName[]}
+          sampleStyle={(name) => ({ fontSize: 16, fontWeight: DS_FONT_WEIGHT[name] })}
+          meta={(name) => DS_FONT_WEIGHT[name]}
+          useNotes={DS_FONT_WEIGHT_USE}
+        />
+      </VariantGroup>
+    </DividedStack>
+  ),
+});

package/starter-kit/pages/Icons.catalog.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, DividedStack, VariantGroup } from '@krapwoo/ds-viewer';
+import { Icon } from '../icons/Icon.native';
+import { ICON_PATHS, type IconName } from '../icons';
+import { DS_ICON_SIZE, DS_ICON_SIZE_STEPS, DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY } from '../tokens';
+
+const styles = StyleSheet.create({
+  // Icons gallery — a size-comparison row, then a grid of every icon at a fixed size.
+  iconSizeRow: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-end', gap: DS_SPACING[1200] },
+  iconSizeItem: { alignItems: 'center', gap: DS_SPACING[200] },
+  iconSizeLabel: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted },
+  iconGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: DS_SPACING[800] },
+  iconGridItem: { width: 72, alignItems: 'center', gap: DS_SPACING[200] },
+  iconGridLabel: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted, textAlign: 'center' },
+});
+
+function IconsGallery() {
+  const names = Object.keys(ICON_PATHS) as IconName[];
+  return (
+    <DividedStack>
+      <VariantGroup name="Sizes" desc="pair an icon with the text scale beside it" align="left">
+        <View style={styles.iconSizeRow}>
+          {DS_ICON_SIZE_STEPS.map((step) => (
+            <View key={step} style={styles.iconSizeItem}>
+              <Icon name="home" size={DS_ICON_SIZE[step]} />
+              <Text style={styles.iconSizeLabel}>{step} · {DS_ICON_SIZE[step]}px</Text>
+            </View>
+          ))}
+        </View>
+      </VariantGroup>
+      <VariantGroup name={`All icons (${names.length})`} desc="rendered at 24px" align="left">
+        <View style={styles.iconGrid}>
+          {names.map((name) => (
+            <View key={name} style={styles.iconGridItem}>
+              <Icon name={name} size={DS_ICON_SIZE.lg} />
+              <Text style={styles.iconGridLabel} numberOfLines={1}>{name}</Text>
+            </View>
+          ))}
+        </View>
+      </VariantGroup>
+    </DividedStack>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Tokens',
+  description: 'Every icon available to the Icon component, plus the DS_ICON_SIZE steps it can be rendered at — pair an icon\'s size with the text scale beside it.',
+  tokenGallery: true,
+  render: () => <IconsGallery />,
+});

package/starter-kit/pages/Manifest.catalog.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ScrollView, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { components, tokens } from '@krapwoo/ds-viewer/generated';
+
+const styles = StyleSheet.create({
+  box: { maxHeight: 480, overflow: 'hidden' },
+  text: { fontSize: 12, fontFamily: 'Menlo', color: '#181818' },
+});
+
+function ManifestView() {
+  return (
+    <ScrollView style={styles.box}>
+      <Text selectable style={styles.text}>{JSON.stringify({ components, tokens }, null, 2)}</Text>
+    </ScrollView>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Reference',
+  description: 'Every component\'s generated props, and every token module\'s generated values, as plain JSON — built live by `sync` from source, so it can\'t drift out of sync. Meant for tooling, not humans: feed it to an LLM (or a lint script) as ground truth for a component\'s real prop interface, instead of it guessing from source. Does not include per-page variants/states — those live in each page\'s own file; see the page\'s own Source link instead.',
+  tokenGallery: true,
+  render: () => <ManifestView />,
+});

package/starter-kit/pages/Motion.catalog.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, DividedStack, VariantGroup, TokenRow } from '@krapwoo/ds-viewer';
+import {
+  DS_MOTION_DURATION,
+  DS_MOTION_DURATION_STEPS,
+  DS_MOTION_DURATION_USE,
+  DS_MOTION_EASING,
+  DS_MOTION_EASING_STEPS,
+  DS_MOTION_EASING_USE,
+  DS_MOTION_SPRING,
+  DS_MOTION_SPRING_USE,
+  DS_MOTION_LOOP_DURATION,
+  DS_MOTION_LOOP_DURATION_STEPS,
+  DS_MOTION_LOOP_DURATION_USE,
+  DS_RADIUS,
+  DS_SEMANTIC,
+  DS_SPACING,
+  DS_TYPOGRAPHY,
+} from '../tokens';
+
+const styles = StyleSheet.create({
+  tokenStack: { gap: DS_SPACING[800] },
+  previewRow: { flexDirection: 'row', alignItems: 'center', gap: DS_SPACING[600] },
+  previewLabel: { minWidth: 64, ...DS_TYPOGRAPHY.labelSm, color: DS_SEMANTIC.text.regular },
+  previewValue: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted },
+  durationBar: { height: 12, borderRadius: DS_RADIUS.small, backgroundColor: DS_SEMANTIC.emphasis.info },
+  // Spring config — a wrapping grid of key/value fields, since DS_MOTION_SPRING has 6 fields, too
+  // many to lay out as a single previewRow.
+  springGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: DS_SPACING[600] },
+  springField: { width: 168, gap: DS_SPACING[100] },
+  easingValue: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted, fontFamily: 'Menlo' },
+});
+
+function MotionGallery() {
+  const maxDuration = Math.max(...Object.values(DS_MOTION_DURATION));
+  const maxLoopDuration = Math.max(...Object.values(DS_MOTION_LOOP_DURATION));
+  return (
+    <DividedStack>
+      <VariantGroup name="Duration" desc="one-shot transitions — reach for base (240ms) first" align="left">
+        <View style={styles.tokenStack}>
+          {DS_MOTION_DURATION_STEPS.map((step, i) => (
+            <TokenRow key={step} use={DS_MOTION_DURATION_USE[step]} last={i === DS_MOTION_DURATION_STEPS.length - 1}>
+              <View style={styles.previewRow}>
+                <Text style={styles.previewLabel}>{step}</Text>
+                <View style={[styles.durationBar, { width: (DS_MOTION_DURATION[step] / maxDuration) * 120 }]} />
+                <Text style={styles.previewValue}>{DS_MOTION_DURATION[step]}ms</Text>
+              </View>
+            </TokenRow>
+          ))}
+        </View>
+      </VariantGroup>
+      <VariantGroup name="Loop duration" desc="continuous, indeterminate loops — a spinner or a shimmer pulse, not a one-shot transition" align="left">
+        <View style={styles.tokenStack}>
+          {DS_MOTION_LOOP_DURATION_STEPS.map((step, i) => (
+            <TokenRow key={step} use={DS_MOTION_LOOP_DURATION_USE[step]} last={i === DS_MOTION_LOOP_DURATION_STEPS.length - 1}>
+              <View style={styles.previewRow}>
+                <Text style={styles.previewLabel}>{step}</Text>
+                <View style={[styles.durationBar, { width: (DS_MOTION_LOOP_DURATION[step] / maxLoopDuration) * 120 }]} />
+                <Text style={styles.previewValue}>{DS_MOTION_LOOP_DURATION[step]}ms</Text>
+              </View>
+            </TokenRow>
+          ))}
+        </View>
+      </VariantGroup>
+      <VariantGroup name="Easing" desc="cubic-bezier curves — convert with Easing.bezier(...DS_MOTION_EASING.x)" align="left">
+        <View style={styles.tokenStack}>
+          {DS_MOTION_EASING_STEPS.map((step, i) => (
+            <TokenRow key={step} use={DS_MOTION_EASING_USE[step]} last={i === DS_MOTION_EASING_STEPS.length - 1}>
+              <View style={styles.previewRow}>
+                <Text style={styles.previewLabel}>{step}</Text>
+                <Text style={styles.easingValue}>cubic-bezier({DS_MOTION_EASING[step].join(', ')})</Text>
+              </View>
+            </TokenRow>
+          ))}
+        </View>
+      </VariantGroup>
+      <VariantGroup name="Spring" desc="for Animated.spring(value, DS_MOTION_SPRING) — snap-point transitions, not fixed-duration timing">
+        <View style={styles.tokenStack}>
+          <TokenRow use={DS_MOTION_SPRING_USE} last>
+            <View style={styles.springGrid}>
+              {(Object.entries(DS_MOTION_SPRING) as [string, number | boolean][]).map(([key, value]) => (
+                <View key={key} style={styles.springField}>
+                  <Text style={styles.previewLabel}>{key}</Text>
+                  <Text style={styles.previewValue}>{String(value)}</Text>
+                </View>
+              ))}
+            </View>
+          </TokenRow>
+        </View>
+      </VariantGroup>
+    </DividedStack>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Tokens',
+  description: 'Duration (one-shot transitions), loop duration (continuous, indeterminate loops like Loading/Shimmer), easing, and spring tokens for transitions/animations. Easings are cubic-bezier tuples, not Easing objects, so the token file stays free of any react-native import. The spring config is grounded in the metro-native app this template was extracted from, where the same values drive its BottomSheet\'s snap-point transitions.',
+  tokenGallery: true,
+  render: () => <MotionGallery />,
+});

package/starter-kit/pages/Radius.catalog.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, TokenRow } from '@krapwoo/ds-viewer';
+import { DS_RADIUS, DS_RADIUS_STEPS, DS_RADIUS_USE, DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY } from '../tokens';
+
+const styles = StyleSheet.create({
+  tokenStack: { gap: DS_SPACING[800] },
+  previewRow: { flexDirection: 'row', alignItems: 'center', gap: DS_SPACING[600] },
+  previewLabel: { minWidth: 64, ...DS_TYPOGRAPHY.labelSm, color: DS_SEMANTIC.text.regular },
+  previewValue: { ...DS_TYPOGRAPHY.bodyXs, color: DS_SEMANTIC.text.muted },
+  radiusBox: { width: 40, height: 40, backgroundColor: DS_SEMANTIC.emphasis.info, borderWidth: StyleSheet.hairlineWidth, borderColor: DS_SEMANTIC.border.light },
+});
+
+function RadiusGallery() {
+  return (
+    <View style={styles.tokenStack}>
+      {DS_RADIUS_STEPS.map((step, i) => (
+        <TokenRow key={step} use={DS_RADIUS_USE[step]} last={i === DS_RADIUS_STEPS.length - 1}>
+          <View style={styles.previewRow}>
+            <Text style={styles.previewLabel}>{step}</Text>
+            <View style={[styles.radiusBox, { borderRadius: DS_RADIUS[step] }]} />
+            <Text style={styles.previewValue}>{DS_RADIUS[step]}px</Text>
+          </View>
+        </TokenRow>
+      ))}
+    </View>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Tokens',
+  description: 'The corner-radius scale, each step with a grounded "when to use this" note from DS_RADIUS_USE. Reference steps directly — DS_RADIUS.medium, never a raw 12 — the key union is typo-safe by itself.',
+  tokenGallery: true,
+  render: () => <RadiusGallery />,
+});

package/starter-kit/pages/ReportIssue.catalog.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { defineCatalogPage, PhoneFrame } from '@krapwoo/ds-viewer';
+import { Banner } from '../components/Banner';
+import { BottomSheet } from '../components/BottomSheet';
+import { Button } from '../components/Button';
+import { ButtonGroup } from '../components/ButtonGroup';
+import { Checkbox } from '../components/Checkbox';
+import { Dialog } from '../components/Dialog';
+import { Dock } from '../components/Dock';
+import { PillRow, type PillRowItem } from '../components/PillRow';
+import { ProgressDots } from '../components/ProgressDots';
+import { Radio } from '../components/Radio';
+import { Shimmer, SkeletonGroup } from '../components/Shimmer';
+import { Switch } from '../components/Switch';
+import { TextArea } from '../components/TextArea';
+import { TopNav } from '../components/TopNav';
+import { DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY } from '../tokens';
+
+const styles = StyleSheet.create({
+  cardTitle: { ...DS_TYPOGRAPHY.labelMd, color: DS_SEMANTIC.text.regular },
+  cardBody: { ...DS_TYPOGRAPHY.bodySm, color: DS_SEMANTIC.text.muted, marginTop: DS_SPACING[200] },
+  shimmerLines: { flex: 1, gap: DS_SPACING[400] },
+  // Report-an-issue recipe — the BottomSheet's own scrollable content area, so no separate
+  // ScrollView is needed here the way SavedTrips' own scroll needs one (BottomSheet already
+  // scrolls its `children` past a height cap).
+  reportContent: { gap: DS_SPACING[600] },
+  reportSwitchRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  // External field label for controls that have no label prop of their own (PillRow) — controls
+  // that DO own a label (Dropdown, InputField) use theirs instead of this.
+  recipeFieldLabel: { ...DS_TYPOGRAPHY.labelXs, color: DS_SEMANTIC.text.muted, marginBottom: DS_SPACING[200] },
+  radioGroup: { gap: DS_SPACING[600], alignItems: 'flex-start' },
+  dialogActions: { marginTop: DS_SPACING[800] },
+});
+
+// Report-issue recipe's line picker — a PillRow, not a Dropdown, specifically because this lives
+// inside a BottomSheet: Dropdown opens its own BottomSheet, and stacking two sheets traps the user
+// between backdrops (see BottomSheet's `useInsideBottomSheetWarning`).
+const REPORT_LINE_PILLS: PillRowItem[] = [
+  { id: '4', label: '4 Train' },
+  { id: '6', label: '6 Train' },
+  { id: 'q', label: 'Q Train' },
+];
+// Issue-type category — a PillRow (not SegmentedToggle): this is a data choice being filled into
+// the report, not a view/mode switch. SegmentedToggle is for "which mode is this screen in right
+// now" (e.g. Map vs List); a form's own answer belongs on Pill/Radio instead.
+const REPORT_ISSUE_TYPE_PILLS: PillRowItem[] = [
+  { id: 'delay', label: 'Delay' },
+  { id: 'crowding', label: 'Crowding' },
+  { id: 'safety', label: 'Safety' },
+];
+
+function ReportIssueDemo() {
+  const [visible, setVisible] = useState(false);
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+  const [issueType, setIssueType] = useState('delay');
+  const [line, setLine] = useState('4');
+  const [details, setDetails] = useState('');
+  const [urgent, setUrgent] = useState(false);
+  const [visibility, setVisibility] = useState('public');
+  const [notify, setNotify] = useState(true);
+
+  const requestClose = () => setConfirmDiscard(true);
+  const discard = () => {
+    setConfirmDiscard(false);
+    setVisible(false);
+  };
+
+  return (
+    <PhoneFrame>
+      {!visible && <Button label="Report an issue" onPress={() => setVisible(true)} />}
+      <BottomSheet
+        visible={visible}
+        onDismiss={requestClose}
+        header={
+          <TopNav
+            title="Report an issue"
+            trailing={
+              <Button variant="secondary" size="small" showIcon showLabel={false} iconName="clear" accessibilityLabel="Close" onPress={requestClose} />
+            }
+          />
+        }
+        footer={
+          <Dock>
+            <Button label="Submit report" onPress={() => setVisible(false)} />
+          </Dock>
+        }
+      >
+        <View style={styles.reportContent}>
+          <ProgressDots active={1} total={3} />
+          <Banner
+            variant="info"
+            title="Delays reported near 14 St"
+            description="Other riders flagged a signal problem in the last 10 minutes."
+          />
+          <View>
+            <Text style={styles.recipeFieldLabel}>Issue type</Text>
+            <PillRow
+              pills={REPORT_ISSUE_TYPE_PILLS.map((p) => ({ ...p, variant: p.id === issueType ? 'selected' : 'not_selected', onPress: () => setIssueType(p.id) }))}
+              showAddPill={false}
+            />
+          </View>
+          <View>
+            <Text style={styles.recipeFieldLabel}>Line</Text>
+            <PillRow
+              pills={REPORT_LINE_PILLS.map((p) => ({ ...p, variant: p.id === line ? 'selected' : 'not_selected', onPress: () => setLine(p.id) }))}
+              showAddPill={false}
+            />
+          </View>
+          <TextArea value={details} onChangeText={setDetails} placeholder="Describe what happened" />
+          <Checkbox checked={urgent} onChange={setUrgent} label="This needs urgent attention" />
+          <View style={styles.radioGroup}>
+            <Radio selected={visibility === 'public'} onPress={() => setVisibility('public')} label="Share publicly" />
+            <Radio selected={visibility === 'anonymous'} onPress={() => setVisibility('anonymous')} label="Report anonymously" />
+          </View>
+          <Switch value={notify} onValueChange={setNotify} label="Notify me when resolved" style={styles.reportSwitchRow} />
+          <View>
+            <Text style={styles.cardTitle}>Recent reports near you</Text>
+            {/* Last line ~70% of the others' width — see ShimmerProps.variant's `'text'` doc.
+                SkeletonGroup so the two lines announce as one "Loading" region, not two. */}
+            <SkeletonGroup style={styles.shimmerLines}>
+              <Shimmer variant="text" width={200} />
+              <Shimmer variant="text" width={140} />
+            </SkeletonGroup>
+          </View>
+        </View>
+      </BottomSheet>
+      <Dialog visible={confirmDiscard} onDismiss={() => setConfirmDiscard(false)}>
+        <Text style={styles.cardTitle}>Discard this report?</Text>
+        <Text style={styles.cardBody}>Your answers won't be saved.</Text>
+        <View style={styles.dialogActions}>
+          <ButtonGroup>
+            <Button label="Keep editing" variant="tertiary" onPress={() => setConfirmDiscard(false)} />
+            <Button label="Discard" onPress={discard} />
+          </ButtonGroup>
+        </View>
+      </Dialog>
+    </PhoneFrame>
+  );
+}
+
+export default defineCatalogPage({
+  group: 'Recipes',
+  description: 'A composed real screen — a "report an issue" flow opened from a BottomSheet, combining a step indicator, a service-alert banner, a Pill-based issue-type and line picker (a data choice, not a view switch, so Pill rather than SegmentedToggle), free-text and toggle inputs, and a loading skeleton for recent reports. Dismissing with unsaved changes opens a confirmation Dialog.',
+  tokenGallery: true,
+  fullWidthLabel: 'Preview',
+  render: () => <ReportIssueDemo />,
+});