pixelize-native-library 1.0.6

package/lib/module/modules/textarea/Textarea.variants.js

@@ -0,0 +1,113 @@
+"use strict";
+
+/**
+ * Textarea's style + behaviour resolution — pure functions the component (and its tests) depend on,
+ * plus the themed structural variant resolvers. Same split as `Button.variants.ts`:
+ *  - STRUCTURE (padding, radius, border WIDTH, minHeight) lives in `createThemedVariants` below,
+ *    registered once per theme identity.
+ *  - COLOUR is `status`-driven and resolved by `resolveTextareaStatus` from the theme's ROLE colours
+ *    — never a raw ramp, never a hardcoded hex — so `status` stays a closed union, not a `color`.
+ *  - ACCESSIBILITY prop derivation is `resolveTextareaAccessibility`, kept pure so the
+ *    label/hint/disabled contract is unit-testable without rendering React Native.
+ *
+ * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * A multiline field is already well past the 44dp floor at every size (unlike a compact control such
+ * as Button), so the touch target is met structurally — no `hitSlop` needed here. Kept local (not
+ * imported from a sibling module) per the library's module-isolation rule.
+ */
+export const MIN_TOUCH_TARGET = 44;
+export const TEXTAREA_SIZES = {
+  sm: {
+    minHeight: 72,
+    fontSize: 14
+  },
+  md: {
+    minHeight: 96,
+    fontSize: 16
+  },
+  lg: {
+    minHeight: 128,
+    fontSize: 18
+  }
+};
+/**
+ * Maps `status` onto the theme's role colours — the reason the prop is a closed union and not a
+ * `color?: string`. `error`'s border is `status.danger.solid`: measured ≥ 3:1 against the canvas on
+ * every brand (unlike `status.danger.border`, the pale ramp[200] chip outline, which does not clear
+ * 3:1 — see the WCAG test). `default`'s border is the same neutral `border.interactive` Button uses
+ * for its outline boundary, guaranteed ≥ 3:1 on every brand.
+ */
+export function resolveTextareaStatus(colors, status) {
+  switch (status) {
+    case "error":
+      return {
+        border: colors.status.danger.solid,
+        message: colors.status.danger.text
+      };
+    case "default":
+      return {
+        border: colors.border.interactive,
+        message: colors.fg.muted
+      };
+  }
+}
+/**
+ * Derives the accessibility surface once, purely, so the label/hint/disabled contract is testable
+ * without a renderer. React Native has no `aria-describedby`; `accessibilityHint` is the platform
+ * equivalent, so the SAME string this returns is also what the component renders as the visible
+ * helper/error `Text` — one source of truth, never two strings that could drift apart.
+ */
+export function resolveTextareaAccessibility(input) {
+  const isError = (input.status ?? "default") === "error";
+  const hint = isError && input.errorText ? input.errorText : input.helperText;
+  return {
+    accessibilityLabel: input.label,
+    accessibilityHint: hint,
+    accessibilityState: {
+      disabled: input.disabled === true
+    }
+  };
+}
+
+/**
+ * Structural styles only — layout, padding, radius, border WIDTH, per-size `minHeight`. No colours
+ * (those are status-driven and applied inline over this), so this compiles once per theme identity
+ * via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const textareaFieldStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.base,
+    borderWidth: theme.borderWidths.thin,
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2]
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: TEXTAREA_SIZES.sm.minHeight
+      },
+      md: {
+        minHeight: TEXTAREA_SIZES.md.minHeight
+      },
+      lg: {
+        minHeight: TEXTAREA_SIZES.lg.minHeight
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+
+/** The gap between label / field / helper text. Themed (uses `space`), so it goes through the same resolver. */
+export const textareaLayout = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[1]
+  }
+}));
+//# sourceMappingURL=Textarea.variants.js.map

package/lib/module/modules/textarea/Textarea.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","TEXTAREA_SIZES","sm","minHeight","fontSize","md","lg","resolveTextareaStatus","colors","status","border","danger","solid","message","text","interactive","fg","muted","resolveTextareaAccessibility","input","isError","hint","errorText","helperText","accessibilityLabel","label","accessibilityHint","accessibilityState","disabled","textareaFieldStructure","theme","base","borderRadius","radii","borderWidth","borderWidths","thin","paddingHorizontal","space","paddingVertical","variants","size","defaultVariants","textareaLayout","rowGap"],"sourceRoot":"../../../../src","sources":["modules/textarea/Textarea.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,oBAAoB,QAAQ,2BAAkB;AAKvD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAG,EAAE;AASlC,OAAO,MAAMC,cAAc,GAAG;EAC5BC,EAAE,EAAE;IAAEC,SAAS,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnCC,EAAE,EAAE;IAAEF,SAAS,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnCE,EAAE,EAAE;IAAEH,SAAS,EAAE,GAAG;IAAEC,QAAQ,EAAE;EAAG;AACrC,CAA2D;AAS3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,qBAAqBA,CAACC,MAAkB,EAAEC,MAAsB,EAAwB;EACtG,QAAQA,MAAM;IACZ,KAAK,OAAO;MACV,OAAO;QAAEC,MAAM,EAAEF,MAAM,CAACC,MAAM,CAACE,MAAM,CAACC,KAAK;QAAEC,OAAO,EAAEL,MAAM,CAACC,MAAM,CAACE,MAAM,CAACG;MAAK,CAAC;IACnF,KAAK,SAAS;MACZ,OAAO;QAAEJ,MAAM,EAAEF,MAAM,CAACE,MAAM,CAACK,WAAW;QAAEF,OAAO,EAAEL,MAAM,CAACQ,EAAE,CAACC;MAAM,CAAC;EAC1E;AACF;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,4BAA4BA,CAC1CC,KAAiC,EACL;EAC5B,MAAMC,OAAO,GAAG,CAACD,KAAK,CAACV,MAAM,IAAI,SAAS,MAAM,OAAO;EACvD,MAAMY,IAAI,GAAGD,OAAO,IAAID,KAAK,CAACG,SAAS,GAAGH,KAAK,CAACG,SAAS,GAAGH,KAAK,CAACI,UAAU;EAC5E,OAAO;IACLC,kBAAkB,EAAEL,KAAK,CAACM,KAAK;IAC/BC,iBAAiB,EAAEL,IAAI;IACvBM,kBAAkB,EAAE;MAAEC,QAAQ,EAAET,KAAK,CAACS,QAAQ,KAAK;IAAK;EAC1D,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAG9B,oBAAoB,CAAE+B,KAAY,KAAM;EAC5EC,IAAI,EAAE;IACJC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAACF,IAAI;IAC9BG,WAAW,EAAEJ,KAAK,CAACK,YAAY,CAACC,IAAI;IACpCC,iBAAiB,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC,CAAC;IACjCC,eAAe,EAAET,KAAK,CAACQ,KAAK,CAAC,CAAC;EAChC,CAAC;EACDE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJvC,EAAE,EAAE;QAAEC,SAAS,EAAEF,cAAc,CAACC,EAAE,CAACC;MAAU,CAAC;MAC9CE,EAAE,EAAE;QAAEF,SAAS,EAAEF,cAAc,CAACI,EAAE,CAACF;MAAU,CAAC;MAC9CG,EAAE,EAAE;QAAEH,SAAS,EAAEF,cAAc,CAACK,EAAE,CAACH;MAAU;IAC/C;EACF,CAAC;EACDuC,eAAe,EAAE;IAAED,IAAI,EAAE;EAAK;AAChC,CAAC,CAAC,CAAC;;AAEH;AACA,OAAO,MAAME,cAAc,GAAG5C,oBAAoB,CAAE+B,KAAY,KAAM;EACpEC,IAAI,EAAE;IAAEa,MAAM,EAAEd,KAAK,CAACQ,KAAK,CAAC,CAAC;EAAE;AACjC,CAAC,CAAC,CAAC","ignoreList":[]}

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

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

package/lib/module/modules/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Textarea"],"sourceRoot":"../../../../src","sources":["modules/textarea/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,eAAY","ignoreList":[]}

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

@@ -0,0 +1,95 @@
+# timeline/ — a vertical list of dated/ordered events
+
+`Timeline` renders a vertical stack of events, each a marker (a plain dot, or an icon in a filled
+circle) connected to the next row's marker by a line. Purely informational — no press handling, no
+per-item emphasis, no animation.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Timeline.tsx` | The component. Maps `items` to rows; wires the decorative connector's hidden-from-AT props. |
+| `Timeline.variants.ts` | Pure resolver (`resolveTimelineColors`) + the structural variant resolvers (`timelineRowStructure`, `timelineConnectorStructure`, `timelineMarkerStructure`, `timelineConnectorLineStructure`, `timelineContentStructure`) and the `TIMELINE_MARKER` size constants. No React, no lucide. |
+| `index.ts` | Public surface: `Timeline`, `TimelineProps`, `TimelineItem`, `IconName` (re-exported from `core/icon`). |
+| `__tests__/Timeline.test.ts` | Pure: WCAG contrast (all brands × modes) for title/description/timestamp and the icon-on-marker pairing, plus the decorative-connector colour-mapping regression guard (mirrors `Divider.test.ts`). |
+| `__tests__/Timeline.render.test.tsx` | Render: item order, description/timestamp omission, marker sizing per kind, connector line present on every row but the last, decorative hide vs exposed text, consumer `style` applies last. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `{ title: string; description?: string; timestamp?: string; icon?: IconName }[]` | — | Rendered top to bottom, in array order. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`; per-row/marker/connector/line nodes get `${testID}-item-<i>[-marker\|-connector\|-line]` when set. |
+
+There is no `variant`/`size`/`tone` — every event reads identically (accent marker, decorative
+connector, fixed `fg` text roles), so there is no appearance choice to close into a union (same
+reasoning `Divider`'s minimal prop set follows when a component has nothing to vary).
+
+## Accessibility contract (WCAG)
+
+- **4.1.2 / structure** — the marker + connecting line are purely decorative (removing them changes
+  spacing, not meaning): the connector `View` wrapping both carries `accessibilityElementsHidden` +
+  `importantForAccessibility="no-hide-descendants"` (the same pairing `Avatar` uses for its
+  decorative state), so neither the circle nor the line is announced. The title/description/
+  timestamp `Text` nodes are ordinary children of a plain, role-less `View` (the same "container has
+  nothing to announce; children carry their own semantics" reasoning `Card.tsx` documents), so they
+  stay in the accessibility tree, read in the order they appear.
+- **1.4.3** — `title` (`fg.default`) and `description`/`timestamp` (`fg.muted`) are each measured
+  ≥ 4.5:1 against `bg.canvas` for all 8 brands × both modes (`Timeline.test.ts`), the same reference
+  surface `Input`/`Badge`/`Button` use for their own resting-state text. `timestamp` deliberately
+  does **not** use `fg.subtle` — that role is a flat, unmeasured `gray[500]` rung with no
+  `readableOn()` derivation and falls as low as 3.19:1 (emerald light) against `bg.canvas`, the same
+  RadioGroup/Tabs class of bug the build brief calls out; `fg.muted` is the derived role that clears
+  AA everywhere, and the timestamp's smaller `fontSizes.xs` still carries the de-emphasis. The icon
+  glyph (`accent.onSolid`) is measured ≥ 4.5:1 against its own circle fill (`accent.solid`) — never
+  assumed from Button's identical pairing, per the RadioGroup/Tabs lesson in the build brief.
+- **1.4.11** — the connector line reads `border.default`, the same decorative rung `Divider`
+  documents: it draws no interactive boundary and is hidden from AT, so the 3:1 non-text floor does
+  not apply (an explicit regression guard asserts it is never the guaranteed-≥3:1
+  `border.interactive`/`border.focus` tokens instead).
+- **Touch target (2.5.x)** — N/A. Timeline has no `onPress`; same reasoning `AVATAR_SIZES` documents
+  for its own non-interactive diameters.
+- **2.3.3 (reduced motion)** — N/A. No animation.
+
+## Patterns copied from `button/` (the reference module), `avatar/`, and `divider/`
+
+1. **Structure vs colour split.** Theme-numeric structure (marker diameter via `radii.full`,
+   connector line width via `borderWidths.thick`, content spacing via `space[…]`) → themed
+   `createThemedVariants` resolvers, registered once per theme. The row/connector-column layout has
+   no theme dependency, so those two use the lighter `createVariants` instead (same choice
+   `Spinner`/`RadioGroup` make for their own theme-independent structure). Colour → resolved from
+   role tokens (`resolveTimelineColors`), applied inline.
+2. **Pure, testable resolver** (no React/lucide) so the WCAG + colour-mapping contract is
+   unit-tested against real palettes — never eyeballed.
+3. **`icon?: IconName`** — a NAME, never a `ReactNode`; always paired with the visible `title`, so
+   it carries no `accessibilityLabel` requirement of its own (unlike Button's icon-only shape).
+4. **`style: LayoutStyle`** last and once, no `{...rest}`.
+
+## Why the connector's bottom padding lives on `content`, not the shared row
+
+A row's height is undetermined (it hugs its tallest child); the connector column has no explicit
+height, so it stretches (cross-axis `align-items: stretch`, the default) to match whichever sibling
+sets that height. Padding placed on the row wrapper itself sits *outside* what determined the row's
+own auto height in the first place, so the connector's stretched height would stop at the content's
+un-padded text height — leaving a visible gap in the line before the next row's marker. Padding
+placed on the **content** column instead becomes part of the height that determines the stretch, so
+the connector column (and the line's `flex: 1` inside it) stretches through the gap too, and the
+line reaches the next marker with no visible break.
+
+## Known gaps
+
+None — no icon, no new theme token, and no new core helper needed for this component. All markers
+use the closed 22-name `IconName` set already in `core/icon`.
+
+## Resolved (were WCAG bugs caught by the measured test suite, now fixed)
+
+- `timestamp` originally mapped to `fg.subtle`, which measured below 4.5:1 against `bg.canvas` on
+  5 of 8 brands in light mode (lavender/meadow/radiant/emerald/rosewood; as low as 3.19:1 on
+  emerald) — caught by `Timeline.test.ts`'s real `it.each` measurement, never eyeballed. Remapped to
+  `fg.muted` (the `readableOn()`-derived role every other module already trusts on `bg.canvas`),
+  which clears AA on all 8 brands × both modes.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `items.map()` renders host `View`/`Text` plus this library's `Icon` with only primitive props — nothing to memoize.

package/lib/module/modules/timeline/Timeline.js

@@ -0,0 +1,92 @@
+"use strict";
+
+/**
+ * Timeline — a vertical list of dated/ordered events. Each row is a marker (a plain dot, or an
+ * icon in a filled circle) connected to the next row's marker by a line. Purely informational: no
+ * press handling, no per-item emphasis, no animation. The marker + connecting line are decorative
+ * (removing them changes spacing, not meaning — same reasoning `Divider` documents for its own
+ * hairline), so they are hidden from assistive tech; the title/description/timestamp stay in the
+ * normal accessibility tree, read in order, exactly like the plain `View` container `Card.tsx`
+ * documents ("nothing here for `accessibilityRole` to announce — children carry their own
+ * semantics").
+ */
+
+import { memo } from "react";
+import { Text, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveTimelineColors, timelineConnectorLineStructure, timelineConnectorStructure, timelineContentStructure, timelineMarkerStructure, timelineRowStructure, TIMELINE_MARKER } from "./Timeline.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+export const Timeline = /*#__PURE__*/memo(function Timeline({
+  items,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = resolveTimelineColors(theme.colors);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      const position = isLast ? "last" : "middle";
+      const rowTestID = testID === undefined ? undefined : `${testID}-item-${index}`;
+      return /*#__PURE__*/_jsxs(View, {
+        testID: rowTestID,
+        style: timelineRowStructure(),
+        children: [/*#__PURE__*/_jsxs(View, {
+          testID: rowTestID === undefined ? undefined : `${rowTestID}-connector`,
+          style: timelineConnectorStructure(),
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: [/*#__PURE__*/_jsx(View, {
+            testID: rowTestID === undefined ? undefined : `${rowTestID}-marker`,
+            style: [timelineMarkerStructure(theme, {
+              kind: item.icon === undefined ? "dot" : "icon"
+            }), {
+              backgroundColor: colors.markerFill
+            }],
+            children: item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+              name: item.icon,
+              size: TIMELINE_MARKER.glyph,
+              color: colors.markerIcon,
+              strokeWidth: ICON_STROKE
+            })
+          }), !isLast && /*#__PURE__*/_jsx(View, {
+            testID: rowTestID === undefined ? undefined : `${rowTestID}-line`,
+            style: [timelineConnectorLineStructure(theme), {
+              backgroundColor: colors.connector
+            }]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: timelineContentStructure(theme, {
+            position
+          }),
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+              fontSize: theme.fontSizes.md,
+              color: colors.title
+            }],
+            children: item.title
+          }), item.description !== undefined && /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              fontSize: theme.fontSizes.sm,
+              color: colors.description,
+              marginTop: theme.space[1]
+            }],
+            children: item.description
+          }), item.timestamp !== undefined && /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              fontSize: theme.fontSizes.xs,
+              color: colors.timestamp,
+              marginTop: theme.space[1]
+            }],
+            children: item.timestamp
+          })]
+        })]
+      }, `${index}-${item.title}`);
+    })
+  });
+});
+//# sourceMappingURL=Timeline.js.map

package/lib/module/modules/timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","Text","View","Icon","useTheme","resolveTimelineColors","timelineConnectorLineStructure","timelineConnectorStructure","timelineContentStructure","timelineMarkerStructure","timelineRowStructure","TIMELINE_MARKER","jsx","_jsx","jsxs","_jsxs","ICON_STROKE","Timeline","items","style","testID","theme","colors","children","map","item","index","isLast","length","position","rowTestID","undefined","accessibilityElementsHidden","importantForAccessibility","kind","icon","backgroundColor","markerFill","name","size","glyph","color","markerIcon","strokeWidth","connector","fontStyleForWeight","fontWeights","semibold","fontSize","fontSizes","md","title","description","regular","sm","marginTop","space","timestamp","xs"],"sourceRoot":"../../../../src","sources":["modules/timeline/Timeline.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/timeline/Timeline.variants.js

@@ -0,0 +1,146 @@
+"use strict";
+
+/**
+ * Timeline's style + colour resolution — pure, React/lucide-free, same split as `Button`:
+ *  - STRUCTURE (row layout, marker diameter, connector width, content spacing) lives in the
+ *    `createThemedVariants` resolvers below, registered once per theme identity — never rebuilt
+ *    per render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveTimelineColors`), never a raw hex:
+ *    every marker is the accent role and every text tier a fixed `fg` role. There is no
+ *    `tone`/`color` prop to widen — a Timeline event has no per-item emphasis to express, so (like
+ *    `resolveAvatarColors` / `resolveTabsColors`) this is pure indirection, not a union to resolve.
+ *
+ * Free of React and of any lucide import, so the WCAG + colour-mapping tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
+/**
+ * Timeline-specific dimensions. Kept a plain constant — no theme dependency — same as
+ * `BUTTON_SIZES` / `AVATAR_SIZES`, so the render layer and tests share one source of truth.
+ *
+ * Not a touch target: Timeline has no `onPress` in this contract (a purely informational list), so
+ * the 44dp floor interactive modules hold themselves to (see `Button`'s `MIN_TOUCH_TARGET`) does
+ * not apply here — same reasoning `AVATAR_SIZES` documents for its own non-interactive diameters.
+ */
+export const TIMELINE_MARKER = {
+  dot: 8,
+  icon: 28,
+  glyph: 16
+};
+/**
+ * Maps Timeline's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
+ * `tone`/`color` prop to widen: every event reads identically, so every colour Timeline can show is
+ * one of these role lookups, guaranteed legible in both modes.
+ */
+export function resolveTimelineColors(colors) {
+  return {
+    markerFill: colors.accent.solid,
+    markerIcon: colors.accent.onSolid,
+    // Decorative connector graphics carry no information of their own — removing the line changes
+    // spacing, not meaning — the same WCAG 1.4.11 reasoning `Divider.variants.ts` documents for
+    // `border.default`, deliberately NOT the guaranteed-≥3:1 `border.interactive`/`border.focus`
+    // those tokens exist for real UI/focus boundaries.
+    connector: colors.border.default,
+    title: colors.fg.default,
+    description: colors.fg.muted,
+    // NOT `fg.subtle`: measured, that role is a flat `gray[500]` rung with no `readableOn()`
+    // derivation behind it, and it falls as low as 3.19:1 (emerald light) against `bg.canvas` —
+    // the exact RadioGroup/Tabs class of bug the build brief calls out. `fg.muted` is the
+    // `readableOn()`-derived role and clears 4.5:1 on all 8 brands × both modes; the timestamp's
+    // smaller `fontSizes.xs` still carries the visual de-emphasis `subtle` was reaching for.
+    timestamp: colors.fg.muted
+  };
+}
+
+/**
+ * The whole row: the connector column beside the content column. No theme dependency (a plain
+ * constant layout, like `spinnerBox`/`radioDotStructure`), so this uses `createVariants`, not the
+ * themed resolver — no theme identity to cache against.
+ */
+export const timelineRowStructure = createVariants({
+  base: {
+    flexDirection: "row"
+  }
+});
+
+/**
+ * The connector column — fixed at the icon circle's width so a dot row and an icon row centre on
+ * the same vertical axis regardless of which marker kind that particular item renders. No explicit
+ * height: it stretches (the row's default cross-axis behaviour for a `flexDirection: "row"`
+ * container) to match the content column's height, which is what lets the line below the marker
+ * reach all the way down to the next row's marker — see `timelineContentStructure` below. No theme
+ * dependency, so `createVariants` again.
+ */
+export const timelineConnectorStructure = createVariants({
+  base: {
+    width: TIMELINE_MARKER.icon,
+    alignItems: "center"
+  }
+});
+
+/** The marker itself — a small dot, or a larger circle sized to hold an icon glyph. */
+export const timelineMarkerStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.full
+  },
+  variants: {
+    kind: {
+      dot: {
+        width: TIMELINE_MARKER.dot,
+        height: TIMELINE_MARKER.dot
+      },
+      icon: {
+        width: TIMELINE_MARKER.icon,
+        height: TIMELINE_MARKER.icon
+      }
+    }
+  },
+  defaultVariants: {
+    kind: "dot"
+  }
+}));
+
+/**
+ * The line connecting one marker to the next. `flex: 1` fills whatever height the connector
+ * column above stretches to; a `middle` row's CONTENT carries the extra bottom padding that makes
+ * that stretched height reach past the text into the gap before the next row (see
+ * `timelineContentStructure`), so the line never visibly stops short of the next marker.
+ */
+export const timelineConnectorLineStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    width: theme.borderWidths.thick
+  }
+}));
+
+/**
+ * The text column beside the connector. A `middle` row (one with a following item) reserves the
+ * gap to that next row HERE, on the content sibling, not on the shared row wrapper — a row with an
+ * undetermined height stretches its children to its tallest child's own intrinsic height, so
+ * padding placed on the row itself would sit outside what the connector column stretches to match,
+ * leaving a visible break in the line. Placed on content instead, the padding becomes part of the
+ * height the connector column stretches to, so the line spans through it.
+ */
+export const timelineContentStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    marginLeft: theme.space[3]
+  },
+  variants: {
+    position: {
+      middle: {
+        paddingBottom: theme.space[6]
+      },
+      last: {
+        paddingBottom: 0
+      }
+    }
+  },
+  defaultVariants: {
+    position: "middle"
+  }
+}));
+//# sourceMappingURL=Timeline.variants.js.map

package/lib/module/modules/timeline/Timeline.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","createVariants","TIMELINE_MARKER","dot","icon","glyph","resolveTimelineColors","colors","markerFill","accent","solid","markerIcon","onSolid","connector","border","default","title","fg","description","muted","timestamp","timelineRowStructure","base","flexDirection","timelineConnectorStructure","width","alignItems","timelineMarkerStructure","theme","justifyContent","borderRadius","radii","full","variants","kind","height","defaultVariants","timelineConnectorLineStructure","flex","borderWidths","thick","timelineContentStructure","marginLeft","space","position","middle","paddingBottom","last"],"sourceRoot":"../../../../src","sources":["modules/timeline/Timeline.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,oBAAoB,EAAEC,cAAc,QAAQ,2BAAkB;AAYvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAmC,GAAG;EAAEC,GAAG,EAAE,CAAC;EAAEC,IAAI,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAG,CAAC;AAclF;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAACC,MAAkB,EAAkB;EACxE,OAAO;IACLC,UAAU,EAAED,MAAM,CAACE,MAAM,CAACC,KAAK;IAC/BC,UAAU,EAAEJ,MAAM,CAACE,MAAM,CAACG,OAAO;IACjC;IACA;IACA;IACA;IACAC,SAAS,EAAEN,MAAM,CAACO,MAAM,CAACC,OAAO;IAChCC,KAAK,EAAET,MAAM,CAACU,EAAE,CAACF,OAAO;IACxBG,WAAW,EAAEX,MAAM,CAACU,EAAE,CAACE,KAAK;IAC5B;IACA;IACA;IACA;IACA;IACAC,SAAS,EAAEb,MAAM,CAACU,EAAE,CAACE;EACvB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,oBAAoB,GAAGpB,cAAc,CAAC;EACjDqB,IAAI,EAAE;IACJC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGvB,cAAc,CAAC;EACvDqB,IAAI,EAAE;IACJG,KAAK,EAAEvB,eAAe,CAACE,IAAI;IAC3BsB,UAAU,EAAE;EACd;AACF,CAAC,CAAC;;AAEF;AACA,OAAO,MAAMC,uBAAuB,GAAG3B,oBAAoB,CAAE4B,KAAY,KAAM;EAC7EN,IAAI,EAAE;IACJI,UAAU,EAAE,QAAQ;IACpBG,cAAc,EAAE,QAAQ;IACxBC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAACC;EAC5B,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ/B,GAAG,EAAE;QAAEsB,KAAK,EAAEvB,eAAe,CAACC,GAAG;QAAEgC,MAAM,EAAEjC,eAAe,CAACC;MAAI,CAAC;MAChEC,IAAI,EAAE;QAAEqB,KAAK,EAAEvB,eAAe,CAACE,IAAI;QAAE+B,MAAM,EAAEjC,eAAe,CAACE;MAAK;IACpE;EACF,CAAC;EACDgC,eAAe,EAAE;IAAEF,IAAI,EAAE;EAAM;AACjC,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,8BAA8B,GAAGrC,oBAAoB,CAAE4B,KAAY,KAAM;EACpFN,IAAI,EAAE;IACJgB,IAAI,EAAE,CAAC;IACPb,KAAK,EAAEG,KAAK,CAACW,YAAY,CAACC;EAC5B;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAGzC,oBAAoB,CAAE4B,KAAY,KAAM;EAC9EN,IAAI,EAAE;IACJgB,IAAI,EAAE,CAAC;IACPI,UAAU,EAAEd,KAAK,CAACe,KAAK,CAAC,CAAC;EAC3B,CAAC;EACDV,QAAQ,EAAE;IACRW,QAAQ,EAAE;MACRC,MAAM,EAAE;QAAEC,aAAa,EAAElB,KAAK,CAACe,KAAK,CAAC,CAAC;MAAE,CAAC;MACzCI,IAAI,EAAE;QAAED,aAAa,EAAE;MAAE;IAC3B;EACF,CAAC;EACDV,eAAe,EAAE;IAAEQ,QAAQ,EAAE;EAAS;AACxC,CAAC,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/timeline`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The internal resolvers (`resolveTimelineColors`, `TIMELINE_MARKER`, …)
+ * stay internal — a consumer configures a Timeline through its `items`, never by importing internals.
+ */
+
+export { Timeline } from "./Timeline.js";
+
+// Re-exported so a caller can type an item's `icon` field without a separate import from `core/icon`.
+//# sourceMappingURL=index.js.map

package/lib/module/modules/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Timeline"],"sourceRoot":"../../../../src","sources":["modules/timeline/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,eAAY;;AAGrC","ignoreList":[]}

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

@@ -0,0 +1,104 @@
+# toast/ — a transient status message, floating outside RN's Modal system
+
+`Toast` is a `ToastProvider` + `useToast()` hook, not a placeable component — a screen never renders
+`<Toast>` directly, it wraps its root in `<ToastProvider>` and calls `useToast().show(...)` from
+anywhere beneath it.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Toast.tsx` | `ToastProvider`, the internal `ToastCard`, and `useToast()`. State machine, timers, animation, a11y wiring. |
+| `Toast.variants.ts` | Pure resolver (`resolveToastTone`) + the themed structural resolvers (`toastCardStructure`, `toastAccentBarStructure`, `toastOverlayStructure`, including the overlay's `zIndex`). No React, no lucide. |
+| `index.ts` | Public surface: `ToastProvider`, `useToast`, `ToastOptions`, `ToastContextValue`, `ToastProviderProps`, the closed unions. No `IconName` re-export — the dismiss glyph is a fixed internal choice. |
+| `__tests__/Toast.test.ts` | Pure: WCAG contrast (all brands × modes, including the close icon vs the card background) + touch target + the tone→role contract + every resolved colour is a solid 6-digit hex (never an alpha token). |
+| `__tests__/Toast.render.test.tsx` | Render: show/auto-dismiss/dismiss, replace-while-visible, the cross-platform announce call, missing-provider error, the REAL rendered card background (flattened style, not just the token). |
+
+## Why not `<Modal>`
+
+A confirmed iOS bug drops or breaks a second `<Modal>` presented while a sibling Modal — this
+library's own, or an OS share sheet — is still mounted or mid-dismiss-animation. A toast shown while
+one of those is open would silently fail to appear. `ToastProvider` instead renders its own plain
+`View` overlay, `position: "absolute"`, at the provider's own root — entirely outside RN's Modal
+system, so it floats over anything without competing for the same presentation stack.
+
+## API
+
+| Member | Shape | Notes |
+|--------|-------|-------|
+| `ToastProvider` | `{ children, position?: "top" \| "bottom" }` | Mount once near the app root. `position` defaults to `top`; it is provider-level (one overlay), not per-toast. No `style` prop — same as `PixelizeProvider`, the only other provider in this catalogue: it wraps the whole app rather than being laid out by one. |
+| `useToast()` | `{ show(options), dismiss() }` | Throws outside a `ToastProvider`, same contract as `useTheme()`. |
+| `ToastOptions` | `{ message: string, tone?: ToastTone, duration?: number }` | `tone` defaults to `neutral`; `duration` defaults to `DEFAULT_TOAST_DURATION` (~3000ms). |
+| `ToastTone` | `success \| warning \| danger \| info \| neutral` | Closed union — colour from `colors.status.<role>`, never a `color` prop. |
+
+Single-slot by design: calling `show()` while a toast is visible replaces its message/tone, restarts
+the auto-dismiss timer, and restarts the entrance animation (a fresh message reads as a new event).
+There is no stacking queue in v1 — see Known gaps. `dismiss()` always targets that one slot and is a
+safe no-op when nothing is showing.
+
+## Accessibility contract (WCAG)
+
+- **4.1.3 (status messages)** — `show()` calls `AccessibilityInfo.announceForAccessibility(message)`,
+  the real cross-platform imperative API (VoiceOver + TalkBack). The message `Text` deliberately does
+  NOT also carry `accessibilityLiveRegion`: that RN prop is Android-only, and since `show()` always
+  fires the imperative announce too, keeping both would double-announce on Android on every toast —
+  see the comment at the `show()` call site and on the `Text` in `Toast.tsx`. The card itself is
+  `accessibilityRole="alert"`. Every tone announces the same way (no politeness distinction).
+- **2.5.x target size** — the close button's 24dp box reaches ≥ 44dp via `hitSlop`
+  (`CLOSE_BUTTON_SIZE + 2 · CLOSE_HIT_SLOP ≥ 44`), same `slopFor` idiom as `Button`/`Input`/`Checkbox`.
+- **1.4.3** — the message text is `status.<role>.text` (or `fg.default` for `neutral`) on `bg.raised`,
+  measured ≥ 4.5:1 for every tone × brand × mode (`Toast.test.ts`). A contrast ratio only means
+  anything against an OPAQUE backdrop, so `Toast.test.ts` also asserts every resolved colour is a
+  solid 6-digit hex (never an alpha token), and `Toast.render.test.tsx` flattens the card's real
+  rendered style array to confirm `backgroundColor` survives as that same opaque hex — proving
+  `theme.elevation.lg` (spread after `{ backgroundColor }` in `Toast.tsx`, shadow-only, never a fill)
+  never clobbers or substitutes for it.
+- **1.4.11** — the left accent bar is the SAME role as the text (see "Why the bar reuses `text`"
+  below), measured ≥ 3:1 against the card's own background for every tone × brand × mode. The close
+  icon (`fg.muted`, constant across tones — not resolved via `resolveToastTone`) is measured the same
+  way against every tone's card background in the same file.
+- **2.3.3** — the slide/fade entrance and exit are suppressed (`duration: 0`) when
+  `useReducedMotion()` is true; the toast still appears/disappears, just without the animated motion.
+- The close button is icon-only: `accessibilityRole="button"` with a fixed, always-present
+  `accessibilityLabel="Dismiss notification"` (not a consumer-configurable prop, so there is no
+  unlabelled-icon-button state to make unrepresentable here — unlike `Button`'s icon-only shape).
+
+## Why the accent bar reuses `status.<role>.text`, not `.solid`
+
+A first design used `status.<role>.solid` (the vivid fill) for the bar against the card's `subtle`
+(pale) background — the obvious "coloured bar" choice. Measuring it against every brand × mode
+(`roleColors.test.ts`'s own promises only cover `solid` vs `onSolid`/`subtle`) showed
+`success`/`warning`/`info` in **light mode** fall to ~1.9–2.6:1 against `subtle`/`surface`/`raised` —
+well under the 3:1 a rendered boundary needs; only `danger` happened to clear it. `status.<role>.text`
+is the rung `readableOn` already resolves to ≥ 4.5:1 nearby, so it comfortably clears the bar's
+looser 3:1 floor too — one already-verified role covers both the bar and the message, instead of
+shipping a second, unverified pairing. `Toast.test.ts` locks this measurement so a future token
+change can't silently reintroduce the gap.
+
+## Patterns copied from `Button`/`Card`
+
+1. **Structure vs colour split.** Structural values (padding, radius, gap, the bar's width, the
+   overlay's edge inset AND `zIndex`) → `createThemedVariants`, one resolver per concept, registered
+   once per theme — never a fresh inline style object per render. Colour → resolved from role tokens
+   per `tone`, applied inline.
+2. **Pure, testable resolvers** in `Toast.variants.ts` (no React/lucide) so the WCAG + tone→colour
+   contracts are unit-tested by measuring real palettes — never eyeballed.
+3. **Elevation applied directly** from `theme.elevation.lg` on the card, same idiom as `Card`'s
+   `elevated` variant (`theme.elevation.md`) — not re-derived as a shadow style.
+4. **Closed unions only** (`tone`, `position`), no `{...rest}`, no consumer style prop on the
+   provider (see API table).
+
+## Known gaps
+
+- **No stacking queue.** `show()` while visible replaces the current toast; there is no multi-toast
+  queue in v1. Flagging for a future version if a consumer needs concurrent toasts.
+- **No safe-area inset awareness.** The overlay's edge inset is a fixed `theme.space[4]`; it does not
+  read device safe-area insets (notch/home-indicator). `react-native-safe-area-context` is already an
+  optional peer dependency for this catalogue but no module wires it yet — a consumer on a notched
+  device may want to add its own top padding via screen-level layout until this is revisited.
+- Render tests need `@testing-library/react-native` + a react-native jest preset (same
+  dependency-pending note as `Button.render.test.tsx`).
+
+## Performance
+
+`ToastProvider` (exported) and `ToastCard` (internal, non-exported) are both wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — mirrors the repo convention (e.g. `AccordionRow`) of memoizing library-internal child components too. No new `useCallback`/`useMemo` needed: the props handed to `ToastCard` (`toast`, `theme`, `position`, `progress`, `onDismiss={hide}`) were already stable — the file already used `useCallback`/`useMemo` throughout.