pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/limit-reached-modal/MODULE.md

@@ -0,0 +1,94 @@
+# limit-reached-modal/ — a plan-limit dialog composed from Modal + Button
+
+`LimitReachedModal` is the mobile counterpart to web's `LimitReachedModal`
+(`Micro-Components/src/Components/LimitReachedModal`) — a dialog shown when an org hits a plan
+limit (records, automations, custom modules, seats, projects, tickets). Like `AlertDialog`, it is
+DELIBERATELY built by composing this library's own, already-shipped `Modal` (backdrop, panel,
+dismissal, title contrast) and `Button` (tone, press feedback, touch target) rather than
+reimplementing either. This module owns exactly its own copy (six `kind`s × admin/member), the
+optional usage line, and which action(s) appear.
+
+## Files
+
+| File | Role |
+|------|------|
+| `LimitReachedModal.tsx` | The component. Composes `Modal` (title, dismissal) with an icon badge, a message, an optional usage line, and a one- or two-`Button` action row. |
+| `LimitReachedModal.variants.ts` | Pure resolvers: the `LimitKind` copy table (`resolveLimitReachedCopy`, ported verbatim from web), `formatLimitUsage`, and the themed icon-badge/action-row layout + colour (`resolveLimitReachedModalColors`). No React, no lucide. |
+| `index.ts` | Public surface: `LimitReachedModal`, `LimitReachedModalProps`, `LimitKind`. |
+| `__tests__/LimitReachedModal.test.ts` | Pure: the copy resolver for all six kinds × both admin/member paths, the usage formatter, and WCAG contrast for this module's own colour choices (icon badge, message, usage) — measured for all 9 brands × both modes. |
+| `__tests__/LimitReachedModal.render.test.tsx` | Render: hidden when `visible=false`, the upgrade CTA absent when `canManageBilling=false`, `onUpgrade`/`onRequestClose` wiring, and the usage line appearing only when both `limit` and `used` are given. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `visible` | `boolean` | — | Required. Forwarded to `Modal` — fully controlled, no internal open state. |
+| `onRequestClose` | `() => void` | — | Required. Forwarded to `Modal` (backdrop press, Android back, iOS VoiceOver escape). Also the dismiss action's `onPress`. |
+| `kind` | `LimitKind` | — | Required. `"record" \| "automation" \| "custom_modules" \| "user" \| "projects" \| "tickets"` — selects the copy table entry. |
+| `limit` | `number \| null` | `null` | Plan limit for `kind`. Paired with `used` to show `"<used> of <limit> <unit> used"`. |
+| `used` | `number \| null` | `null` | Current usage for `kind`. Either alone renders no usage line — both are required together. |
+| `canManageBilling` | `boolean` | — | Required. `true` shows the admin copy + an "Upgrade plan" CTA; `false` shows "contact your organization administrator" copy and no CTA. |
+| `onUpgrade` | `() => void` | — | Optional. Wired to the upgrade Button's `onPress` (only rendered when `canManageBilling`). |
+| `title` | `string` | `kind`'s default | Overrides the resolved title, forwarded to `Modal`'s `title`. |
+| `message` | `string` | `kind`'s default | Overrides the resolved admin/member message. |
+| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-dismiss` / `${testID}-upgrade` on the two actions. |
+
+No `style` — same reasoning as `Modal`/`AlertDialog`: there is no parent layout flow to place a
+full-screen dialog within.
+
+## Accessibility contract
+
+- **1.4.3** — the title (via `Modal`'s own `resolveModalPanelColors`) and the message (`fg.default`
+  on the panel's `bg.surface`) clear 4.5:1 for every brand × mode.
+- **1.4.3** — the usage line (`fg.muted` on `bg.surface`) clears 4.5:1 — the same pairing
+  `AlertDialog`'s description proves for itself.
+- **1.4.3** — the icon glyph (`status.warning.text` on its own `status.warning.subtle` badge fill)
+  clears 4.5:1 — the exact pairing Badge/Banner's own `subtle` variant already proves at the role
+  layer (`roleColors.test.ts`), reused rather than freshly measured.
+- **Dismissal semantics** — every one of `Modal`'s dismissal paths (backdrop press, Android hardware
+  back, iOS VoiceOver escape, and on web Escape) resolves to `onRequestClose`, since this module
+  never intercepts it — same contract as the dismiss action itself.
+- **2.1.1 keyboard (web only)** — INHERITED whole from `Modal`. This matters most at
+  `canManageBilling: false`, which renders a single "Close" button: on the `ModalPortalProvider`
+  branch, before that fix, one Tab put a keyboard user outside the dialog behind the scrim with no
+  way back to the only control that dismisses it. No keyboard code lives here;
+  `__tests__/LimitReachedModal.keyboard.web.test.tsx` asserts the inheritance.
+- **Upgrade vs. dismiss are never confusable** — the dismiss action is always `variant="outline"`
+  (unfilled) and the upgrade action is always `variant="solid"` (filled, high-emphasis), so the
+  primary choice is never the visually quieter one.
+
+## Patterns
+
+1. **Compose, don't reimplement.** `Modal` and `Button` are stable, shipped modules; no backdrop,
+   panel, or press-feedback logic is duplicated here — the same "compose existing exports" step
+   `AlertDialog` and `EmptyState` already take.
+2. **A fixed severity, not a `tone` prop.** A plan limit is a soft stop, not a destructive action —
+   the icon badge is always `status.warning`, so there is nothing here to widen into a raw
+   `color?: string`.
+3. **No gradient, no per-`kind` icon.** Web's header uses a brand gradient and swaps `Crown`/`Users`
+   per `kind`; this library has no `LinearGradient` and no registered `crown` glyph, and the API
+   contract bans a raw colour prop regardless. One `triangle-alert` icon on `status.warning` reads
+   correctly for every kind and every brand — the same icon `Banner` already resolves for its own
+   `warning` tone (`resolveBannerIcon`).
+4. **Structure vs. colour split**, even for a thin composing module — the icon badge and action row
+   layouts live in themed resolvers; colour is `resolveLimitReachedModalColors`, applied inline.
+
+## Known gaps
+
+- No built-in scrolling for a long message/usage combination on a small screen — same known gap
+  `Modal`/`AlertDialog` document for `children` in general.
+- No per-`kind` icon or illustration (see Patterns #3) — every `kind` shares one `triangle-alert`
+  badge. A future kind needing a distinct glyph adds one via `core/icon`'s deep-import + map-entry
+  pattern, not a per-kind override prop.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The inline
+`() => onUpgrade?.()` is a fresh closure per render, same as `EmptyState`'s action Button — cheap
+because it forwards straight to a leaf `Pressable`, never a memoized child list item.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/limit-reached-modal/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/limit-reached-modal`. Value exports and type exports
+ * are split for `verbatimModuleSyntax`. The copy table, usage formatter, and colour/structure
+ * resolvers stay internal — a consumer configures a LimitReachedModal through its props, never by
+ * importing its internals.
+ */
+
+export { LimitReachedModal } from "./LimitReachedModal.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/list-item/ListItem.js

@@ -0,0 +1,92 @@
+"use strict";
+
+/**
+ * ListItem — a row primitive. It is rendered AS a list cell at scale, so it carries no mount
+ * animation and no loop: the only motion is `usePressMotion`, which starts on touch and runs on the
+ * native driver. The pressable root is an animated `Pressable` rather than an `Animated.View`
+ * wrapper so a 5000-row list pays for no extra node.
+ */
+
+import { memo, useMemo } from "react";
+import { Animated, Pressable, Text, View } from "react-native";
+import { usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { listItemBodyStructure, listItemDotStructure, listItemStructure, resolveListItemAccessibility, resolveListItemColors } from "./ListItem.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+export const ListItem = /*#__PURE__*/memo(function ListItem({
+  leading,
+  title,
+  subtitle,
+  trailing,
+  unread = false,
+  onPress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const pressable = onPress !== undefined;
+  const press = usePressMotion(!pressable);
+  const colors = useMemo(() => resolveListItemColors(theme.colors, unread), [theme.colors, unread]);
+  const a11y = useMemo(() => resolveListItemAccessibility({
+    title,
+    subtitle,
+    unread
+  }), [title, subtitle, unread]);
+  const baseStyle = useMemo(() => [listItemStructure(theme), {
+    backgroundColor: colors.background
+  }, style], [theme, colors, style]);
+  // `style` stays last; the press style holds only opacity/transform, which `LayoutStyle` cannot name.
+  const pressableStyle = useMemo(() => [listItemStructure(theme), {
+    backgroundColor: colors.background
+  }, press.style, style], [theme, colors, press.style, style]);
+  const dotStyle = useMemo(() => [listItemDotStructure(theme), {
+    backgroundColor: colors.dot
+  }], [theme, colors]);
+  const bodyStyle = useMemo(() => listItemBodyStructure(theme), [theme]);
+  const titleStyle = useMemo(() => [theme.fontStyleForWeight(unread ? theme.fontWeights.semibold : theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.md,
+    color: colors.title
+  }], [theme, unread, colors]);
+  const subtitleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.subtitle
+  }], [theme, colors]);
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [unread && /*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-dot`,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: dotStyle
+    }), leading, /*#__PURE__*/_jsxs(View, {
+      style: bodyStyle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: titleStyle,
+        children: title
+      }), subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 2,
+        style: subtitleStyle,
+        children: subtitle
+      })]
+    }), trailing]
+  });
+  if (!pressable) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: baseStyle,
+      children: body
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: a11y.accessibilityLabel,
+    onPress: onPress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    style: pressableStyle,
+    children: body
+  });
+});
+//# sourceMappingURL=ListItem.js.map

package/lib/module/modules/list-item/ListItem.variants.js

@@ -0,0 +1,53 @@
+"use strict";
+
+/**
+ * Pure resolvers for ListItem — no React, so the WCAG tests import this directly (mocking only
+ * `react-native`'s `StyleSheet`, as every sibling module's tests do).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const LIST_ITEM_DOT_SIZE = 8;
+export const LIST_ITEM_MIN_HEIGHT = 44;
+export function resolveListItemColors(colors, unread) {
+  return {
+    background: unread ? colors.bg.surface : undefined,
+    // NOT `bg.hover`: measured, `fg.default` falls to 3.87:1 against it on 4 of 8 light brands
+    // (lavender/radiant/skyline/rosewood) — `bg.sunken` clears AA everywhere (`ListItem.test.ts`).
+    pressed: colors.bg.sunken,
+    title: colors.fg.default,
+    subtitle: colors.fg.muted,
+    dot: colors.accent.solid
+  };
+}
+export function resolveListItemAccessibility(input) {
+  const parts = [input.title];
+  if (input.subtitle !== undefined) parts.push(input.subtitle);
+  if (input.unread) parts.push("unread");
+  return {
+    accessibilityLabel: parts.join(", ")
+  };
+}
+export const listItemStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[3],
+    minHeight: LIST_ITEM_MIN_HEIGHT,
+    paddingVertical: theme.space[3],
+    paddingHorizontal: theme.space[4]
+  }
+}));
+export const listItemBodyStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    rowGap: theme.space[1]
+  }
+}));
+export const listItemDotStructure = createThemedVariants(theme => ({
+  base: {
+    width: LIST_ITEM_DOT_SIZE,
+    height: LIST_ITEM_DOT_SIZE,
+    borderRadius: theme.radii.full
+  }
+}));
+//# sourceMappingURL=ListItem.variants.js.map

package/lib/module/modules/list-item/MODULE.md

@@ -0,0 +1,53 @@
+# list-item/ — a generic pressable row (leading / title / subtitle / trailing, unread state)
+
+`ListItem` renders one row for notification lists, inboxes, and settings screens: optional
+`leading`/`trailing` nodes around a title + subtitle column. `unread` adds an `accent.solid` dot
+and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `bg.selected`, because
+`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set
+(`bg.sunken` pressed fill — measured, `fg.default` fails AA on `bg.hover` on 4 light brands),
+a plain `View` otherwise.
+
+## Files
+
+| File | Role |
+|------|------|
+| `ListItem.tsx` | The component. |
+| `ListItem.variants.ts` | Pure resolvers (`resolveListItemColors`, `resolveListItemAccessibility`) + themed structure. No React. |
+| `index.ts` | Public surface: `ListItem`, `ListItemProps`. |
+| `__tests__/ListItem.test.ts` | Pure: WCAG contrast (all brands × modes) + a11y label contract. |
+| `__tests__/ListItem.render.test.tsx` | Render: unread dot/bg, press, leading/trailing slots. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `leading` | `ReactNode` | — | E.g. an `Avatar` or icon; carries its own semantics. |
+| `title` | `string` | — | `fg.default`, semibold when `unread`. |
+| `subtitle` | `string` | — | `fg.muted`, max 2 lines. |
+| `trailing` | `ReactNode` | — | E.g. a timestamp `Text` or `Badge`. |
+| `unread` | `boolean` | `false` | Accent dot (decorative, hidden from AT — "unread" is announced in the label instead) + `bg.surface` fill. |
+| `onPress` | `() => void` | — | Row becomes a `button`-role Pressable, min 44dp tall. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Also derives the `-dot` sub-id. |
+
+## Accessibility
+
+- Pressable rows carry `accessibilityLabel = "title, subtitle, unread?"` so the dot never has to
+  speak for itself; non-pressable rows leave the text nodes in the normal tree.
+- Title/subtitle are measured ≥ 4.5:1 against the canvas, the `bg.surface` unread fill, and the
+  `bg.sunken` pressed fill for all 8 brands × both modes (`ListItem.test.ts`).
+
+## Known gaps
+
+- `leading`/`trailing` are `ReactNode` slots (per the generic-row spec) — the nodes' own contrast
+  and touch-target concerns belong to the consumer.
+
+## Performance
+
+Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/list-item/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/list-item`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures a ListItem
+ * through its props, never by importing its internals.
+ */
+
+export { ListItem } from "./ListItem.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/markdown/MODULE.md

@@ -0,0 +1,71 @@
+# markdown/ — a dependency-free markdown renderer
+
+`Markdown` parses and renders a markdown string with a small hand-rolled parser — no third-party
+markdown/renderer dependency. Supported: h1–h6, bold, italic, inline code, fenced code blocks
+(monospace block on a `bg.sunken` fill, no copy button), unordered/ordered lists, links,
+blockquotes, paragraphs. The parser never throws: malformed input degrades to literal text, an
+unclosed fence swallows the rest of the input as code.
+
+## Files
+
+| File | Role |
+|------|------|
+| `parseMarkdown.ts` | Pure parser: `parseMarkdown(content) → MarkdownBlockNode[]`. No imports at all. |
+| `Markdown.tsx` | The renderer. Parse memoized on `content`. |
+| `Markdown.variants.ts` | Pure resolvers (`resolveMarkdownColors`, heading specs) + themed structure. No React. |
+| `index.ts` | Public surface: `Markdown`, `MarkdownProps`, `parseMarkdown`, node types. |
+| `__tests__/parseMarkdown.test.ts` | Pure: every block/inline form + malformed-input robustness. |
+| `__tests__/Markdown.test.ts` | Pure: WCAG contrast for text/link/quote roles (all brands × modes). |
+| `__tests__/Markdown.render.test.tsx` | Render: headings, lists, code, link press wiring, and every heading of a 60-section document reaching the tree (the rotor guard — see Performance). |
+| `__tests__/Markdown.dom.test.tsx` | Real DOM (`jest.web.config.js`): a `#`/`##`/`###` document renders real `<h1>`/`<h2>`/`<h3>` tags, not three `<h1>`s. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `content` | `string` | — | The markdown source. |
+| `onLinkPress` | `(url: string) => void` | — | Links render underlined `accent.text`; without this, a link is styled but inert (the library never opens URLs itself). |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | |
+
+## Rendering roles
+
+Body/list text `fg.default`, blockquote `fg.muted` behind a `border.default` left rule
+(decorative, Divider's reasoning), code on `bg.sunken`, links `accent.text` + underline
+(`link` a11y role), headings `2xl bold` (h1) / `xl semibold` (h2) / `lg semibold` (h3+) with the
+`header` a11y role. **`aria-level` carries the real `#`-count (1–6), no longer clamped to 3** — a
+`react-native-web` heading with no `aria-level` renders `<h1>` regardless of role, so every heading
+used to collapse to the same DOM tag (see `core/heading/MODULE.md`). Levels 4–6 share level 3's
+type size — the document's *structure* is what the level communicates below `lg`. Monospace is the
+platform face (Menlo/monospace) — the token layer has no mono family.
+
+## Known gaps
+
+- No nesting inside bold/italic spans, no images, no tables, no task lists — out of scope for a
+  chat/notes body renderer; unsupported syntax renders as its literal text.
+
+## Performance
+
+The parse is `useMemo`'d on `content`; the **render tree** is the other half of the cost, so:
+
+- Each block renders through `MarkdownBlock`, a `React.memo`'d component. Its props (`theme`,
+  `colors`, `onLinkPress`, and the block node itself) are stable while `content` is unchanged, so a
+  parent re-render re-renders no block.
+- `colors` is `useMemo`'d on `theme.colors`; the root style array is `useMemo`'d on `(theme, style)`.
+- **A document is never virtualized.** Every block renders, always — a plain `.map()`, no
+  `VirtualList`, no block-count threshold. Two reasons, and the first is not a performance
+  trade-off:
+  1. **The heading outline is the document's navigation.** A screen reader's rotor lists the
+     `accessibilityRole="header"` nodes that are *in the tree*; windowing leaves ~10 blocks mounted,
+     so a 60-heading document offered a rotor a handful of entries and no way to reach the rest
+     (WCAG 2.4.1). Unlike a list of records, a document's own structure is the affordance.
+  2. `Markdown` is normally embedded in a caller's `ScrollView`, where a nested VirtualizedList is
+     an error in React Native regardless.
+  The cost is bounded by the content: blocks come from parsing one `content` string, which is a
+  chat message or a notes body, not an unbounded dataset. If a caller ever does need a virtualized
+  document, that is a different component with a different accessibility contract.
+- Links render through a memo'd `MarkdownLink` so no per-link closure is rebuilt each render.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.

package/lib/module/modules/markdown/Markdown.js

@@ -0,0 +1,183 @@
+"use strict";
+
+/**
+ * A markdown document is rendered whole, never virtualized: the heading outline is what a screen
+ * reader's rotor navigates, and windowing would expose only the ~10 blocks currently on screen
+ * (WCAG 2.4.1). It is also normally embedded in a caller's ScrollView, where a nested
+ * VirtualizedList is an error in its own right.
+ */
+
+import { Fragment, memo, useCallback, useMemo } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { HeadingText } from "../../core/heading/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { markdownBlockquoteStructure, markdownCodeBlockStructure, markdownListRowStructure, markdownListStructure, markdownStructure, resolveMarkdownColors, resolveMarkdownHeading } from "./Markdown.variants.js";
+import { parseMarkdown } from "./parseMarkdown.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MONO_FONT = Platform.select({
+  ios: "Menlo",
+  default: "monospace"
+});
+const MarkdownLink = /*#__PURE__*/memo(function MarkdownLink({
+  content,
+  url,
+  color,
+  onLinkPress
+}) {
+  const handlePress = useCallback(() => onLinkPress?.(url), [onLinkPress, url]);
+  return /*#__PURE__*/_jsx(Text, {
+    accessibilityRole: "link",
+    onPress: onLinkPress === undefined ? undefined : handlePress,
+    style: [styles.link, {
+      color
+    }],
+    children: content
+  });
+});
+function renderInline(nodes, theme, colors, onLinkPress) {
+  return nodes.map((node, index) => {
+    switch (node.type) {
+      case "bold":
+        return /*#__PURE__*/_jsx(Text, {
+          style: theme.fontStyleForWeight(theme.fontWeights.bold),
+          children: node.content
+        }, index);
+      case "italic":
+        return /*#__PURE__*/_jsx(Text, {
+          style: styles.italic,
+          children: node.content
+        }, index);
+      case "code":
+        return /*#__PURE__*/_jsx(Text, {
+          style: [styles.mono, {
+            backgroundColor: colors.codeBackground,
+            color: colors.code
+          }],
+          children: node.content
+        }, index);
+      case "link":
+        return /*#__PURE__*/_jsx(MarkdownLink, {
+          content: node.content,
+          url: node.url,
+          color: colors.link,
+          onLinkPress: onLinkPress
+        }, index);
+      default:
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: node.content
+        }, index);
+    }
+  });
+}
+const MarkdownBlock = /*#__PURE__*/memo(function MarkdownBlock({
+  block,
+  theme,
+  colors,
+  onLinkPress
+}) {
+  switch (block.type) {
+    case "heading":
+      {
+        const spec = resolveMarkdownHeading(theme, block.level);
+        return /*#__PURE__*/_jsx(HeadingText, {
+          accessibilityRole: "header",
+          "aria-level": block.level,
+          style: [theme.fontStyleForWeight(theme.fontWeights[spec.fontWeight]), {
+            fontSize: spec.fontSize,
+            color: colors.heading
+          }],
+          children: renderInline(block.children, theme, colors, onLinkPress)
+        });
+      }
+    case "code-block":
+      return /*#__PURE__*/_jsx(View, {
+        style: [markdownCodeBlockStructure(theme), {
+          backgroundColor: colors.codeBackground
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.mono, {
+            fontSize: theme.fontSizes.sm,
+            color: colors.code
+          }],
+          children: block.content
+        })
+      });
+    case "blockquote":
+      return /*#__PURE__*/_jsx(View, {
+        style: [markdownBlockquoteStructure(theme), {
+          borderLeftColor: colors.quoteBorder
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+            fontSize: theme.fontSizes.md,
+            color: colors.quoteText
+          }],
+          children: renderInline(block.children, theme, colors, onLinkPress)
+        })
+      });
+    case "list":
+      return /*#__PURE__*/_jsx(View, {
+        style: markdownListStructure(theme),
+        children: block.items.map((item, itemIndex) => /*#__PURE__*/_jsxs(View, {
+          style: markdownListRowStructure(theme),
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              fontSize: theme.fontSizes.md,
+              color: colors.listMarker
+            }],
+            children: block.ordered ? `${itemIndex + 1}.` : "•"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.listContent, {
+              fontSize: theme.fontSizes.md,
+              color: colors.text
+            }],
+            children: renderInline(item, theme, colors, onLinkPress)
+          })]
+        }, itemIndex))
+      });
+    default:
+      return /*#__PURE__*/_jsx(Text, {
+        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+          fontSize: theme.fontSizes.md,
+          color: colors.text
+        }],
+        children: renderInline(block.children, theme, colors, onLinkPress)
+      });
+  }
+});
+export const Markdown = /*#__PURE__*/memo(function Markdown({
+  content,
+  onLinkPress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = useMemo(() => resolveMarkdownColors(theme.colors), [theme.colors]);
+  const blocks = useMemo(() => parseMarkdown(content), [content]);
+  const rootStyle = useMemo(() => [markdownStructure(theme), style], [theme, style]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: rootStyle,
+    children: blocks.map((block, index) => /*#__PURE__*/_jsx(MarkdownBlock, {
+      block: block,
+      theme: theme,
+      colors: colors,
+      onLinkPress: onLinkPress
+    }, `block-${index}-${block.type}`))
+  });
+});
+const styles = StyleSheet.create({
+  italic: {
+    fontStyle: "italic"
+  },
+  mono: {
+    fontFamily: MONO_FONT
+  },
+  link: {
+    textDecorationLine: "underline"
+  },
+  listContent: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=Markdown.js.map

package/lib/module/modules/markdown/Markdown.variants.js

@@ -0,0 +1,73 @@
+"use strict";
+
+/**
+ * Pure resolvers for Markdown — no React, so the WCAG tests import this directly (mocking only
+ * `react-native`'s `StyleSheet`, as every sibling module's tests do).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+export function resolveMarkdownColors(colors) {
+  return {
+    text: colors.fg.default,
+    heading: colors.fg.default,
+    codeBackground: colors.bg.sunken,
+    code: colors.fg.default,
+    link: colors.accent.text,
+    quoteBorder: colors.border.default,
+    quoteText: colors.fg.muted,
+    listMarker: colors.fg.muted
+  };
+}
+/**
+ * SIZE only — `h4`–`h6` deliberately share `h3`'s size while keeping their own `aria-level`. The
+ * document's structure is what the heading level carries; three more type sizes below `lg` would
+ * be smaller than body text.
+ */
+export function resolveMarkdownHeading(theme, level) {
+  switch (level) {
+    case 1:
+      return {
+        fontSize: theme.fontSizes["2xl"],
+        fontWeight: "bold"
+      };
+    case 2:
+      return {
+        fontSize: theme.fontSizes.xl,
+        fontWeight: "semibold"
+      };
+    default:
+      return {
+        fontSize: theme.fontSizes.lg,
+        fontWeight: "semibold"
+      };
+  }
+}
+export const markdownStructure = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[3]
+  }
+}));
+export const markdownCodeBlockStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.base,
+    padding: theme.space[3]
+  }
+}));
+export const markdownBlockquoteStructure = createThemedVariants(theme => ({
+  base: {
+    borderLeftWidth: theme.borderWidths.thick,
+    paddingLeft: theme.space[3]
+  }
+}));
+export const markdownListStructure = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[1]
+  }
+}));
+export const markdownListRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    columnGap: theme.space[2]
+  }
+}));
+//# sourceMappingURL=Markdown.variants.js.map

package/lib/module/modules/markdown/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/markdown`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The parser is exported for consumers that need the node tree
+ * (e.g. extracting plain text); the style resolvers stay internal.
+ */
+
+export { Markdown } from "./Markdown.js";
+export { parseMarkdown } from "./parseMarkdown.js";
+//# sourceMappingURL=index.js.map