pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/tabs/Tabs.variants.js

@@ -11,11 +11,9 @@
  *    is unit-testable without rendering React Native.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/RadioGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * Tabs-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target test
  * can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
@@ -90,7 +88,8 @@ export const tabItemStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -142,7 +141,8 @@ export const tabsFocusRingStructure = createThemedVariants(theme => ({
     right: 0,
     bottom: 0,
     borderWidth: theme.borderWidths.thick,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 export const tabsIndicatorStructure = createThemedVariants(theme => ({

package/lib/module/modules/tabs/TabsProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TabsProps.js.map

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

@@ -1,4 +1,4 @@
-# text
+# text/ — the Text and Heading typography primitives
 
 Typography primitives — `Text` and `Heading` with closed `variant` unions. The base primitive most
 other modules compose, so a colour defect here is a defect everywhere.
@@ -16,23 +16,34 @@ import { Text, Heading } from 'pixelize-native-library/text';
 
 | `Text` variant | size | weight | colour role |
 |---|---|---|---|
-| `body` | `md` | regular | `fg.default` |
+| `display` | `4xl` | bold | `fg.default` |
+| `title` | `2xl` | bold | `fg.default` |
+| `heading` | `xl` | bold | `fg.default` |
+| `subheading` | `lg` | semibold | `fg.default` |
+| `body` | 17 iOS / `md` elsewhere | regular | `fg.default` |
 | `body-sm` | `sm` | regular | `fg.default` |
-| `caption` | `xs` | regular | `fg.muted` |
-| `label` | `md` | semibold | `fg.default` |
-| `label-sm` | `sm` | semibold | `fg.default` |
-| `overline` | `xs` | bold | `fg.muted` |
-
-`Heading` reuses `label` / `label-sm` and overrides only the font size (`h1` `3xl` → `h4` `lg`). It
-renders with `accessibilityRole="header"` **and `aria-level` derived 1:1 from `variant`**
-(`HEADING_LEVELS` in `Text.variants.ts`) — `react-native-web` renders every `header` role as `<h1>`
-unless `aria-level` is set, so without this every `Heading` variant rendered the same DOM tag
-regardless of size (see `core/heading/MODULE.md`). `Text` carries neither prop.
+| `caption` | `xs` | medium | `fg.muted` |
+| `label` | `sm` | semibold | `fg.default` |
+| `label-sm` | `xs` | semibold | `fg.default` |
+| `overline` | `xs` | bold | `fg.muted` — uppercase, `letterSpacing: 1.2` |
+
+Optional props (additive): `color` (an `fg` role or a `status` role), `align`, `weight`,
+`numberOfLines`. Each variant carries its own `lineHeight` (`body` alone derives it as size + 6) and
+its own `letterSpacing`; a variant configured at `0` falls back to `opticalLetterSpacing`, which
+tightens from the `letterSpacings` tokens at 20 / 30 / 48 dp.
+
+`Heading` maps onto the `Text` variants (`h1`→`title`, `h2`→`heading`, `h3`→`subheading`,
+`h4`→`label`) and overrides font size (`3xl` → `lg`), line height and letter spacing. It renders with
+`accessibilityRole="header"` **and `aria-level` derived 1:1 from `variant`** (`HEADING_LEVELS` in
+`Text.variants.ts`) — `react-native-web` renders every `header` role as `<h1>` unless `aria-level` is
+set, so without this every `Heading` variant rendered the same DOM tag regardless of size (see
+`core/heading/MODULE.md`). `Text` carries neither prop.
 
 ## Colour
 
-A variant may bind to **`fg.default` or `fg.muted` only** — the union is closed at the type level
-(`TextColorRole`), and `Text.test.ts` measures both roles across all 9 brands × both modes against
+A **variant** may bind to `fg.default` or `fg.muted` only — that internal union is closed, and the
+wider `color` prop (`TextColorRole` = those two plus a `status` role, resolved through
+`status[role].text`) is the only way past it. `Text.test.ts` measures both `fg` roles across all 9 brands × both modes against
 `bg.canvas`, `bg.surface` and `bg.raised`. Measured minimums: `fg.default` 6.10 / 6.65 / 6.31,
 `fg.muted` 6.52 / 6.99 / 6.71 — all clear WCAG 1.4.3's 4.5:1.
 

package/lib/module/modules/text/Text.js

@@ -1,9 +1,5 @@
 "use strict";
 
-/**
- * Text — typography primitive with a closed `variant` union. Replaces ad-hoc fontSize literals.
- */
-
 import { memo, useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 import { HeadingText } from "../../core/heading/index.js";
@@ -13,12 +9,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const Text = /*#__PURE__*/memo(function Text({
   variant = 'body',
   children,
+  color,
   numberOfLines,
+  align,
+  weight,
   style,
   testID
 }) {
   const theme = useTheme();
-  const rootStyle = useMemo(() => [resolveTextStyle(theme, variant), style], [theme, variant, style]);
+  const textOptions = useMemo(() => ({
+    color,
+    align,
+    weight
+  }), [color, align, weight]);
+  const rootStyle = useMemo(() => [resolveTextStyle(theme, variant, textOptions), style], [theme, variant, textOptions, style]);
   return /*#__PURE__*/_jsx(RNText, {
     testID: testID,
     numberOfLines: numberOfLines,
@@ -29,12 +33,20 @@ export const Text = /*#__PURE__*/memo(function Text({
 export const Heading = /*#__PURE__*/memo(function Heading({
   variant = 'h2',
   children,
+  color,
   numberOfLines,
+  align,
+  weight,
   style,
   testID
 }) {
   const theme = useTheme();
-  const rootStyle = useMemo(() => [resolveHeadingStyle(theme, variant), style], [theme, variant, style]);
+  const textOptions = useMemo(() => ({
+    color,
+    align,
+    weight
+  }), [color, align, weight]);
+  const rootStyle = useMemo(() => [resolveHeadingStyle(theme, variant, textOptions), style], [theme, variant, textOptions, style]);
   return /*#__PURE__*/_jsx(HeadingText, {
     testID: testID,
     numberOfLines: numberOfLines,

package/lib/module/modules/text/Text.variants.js

@@ -1,63 +1,85 @@
 "use strict";
 
-/**
- * `variant` is the level as well as the size. Without this, `react-native-web` renders every
- * heading as `<h1>` (see `core/heading`).
- */
+import { Platform } from 'react-native';
+import letterSpacings from "../../theme/tokens/primitives/letterSpacings.js";
 export const HEADING_LEVELS = {
   h1: 1,
   h2: 2,
   h3: 3,
   h4: 4
 };
-
-/** Runtime companion to `TextVariant`, so the WCAG test can enumerate every variant a consumer can pass. */
-export const TEXT_VARIANTS = ['body', 'body-sm', 'caption', 'label', 'label-sm', 'overline'];
-
-/**
- * The `fg` roles a text variant may bind to. `fg.subtle` is deliberately NOT one of them: it is the
- * flat `gray[500]` rung tuned to the 3:1 non-text tier, and measures 3.19:1 against `bg.canvas` on
- * emerald light — the exact defect `Timeline.test.ts` already documents. Text has no large-text
- * exemption to fall back on (its smallest variants are `xs`), so the union is closed at the two
- * derived, measured roles.
- */
-
-export const HEADING_VARIANTS = {
-  h1: 'label',
-  h2: 'label',
-  h3: 'label-sm',
-  h4: 'label-sm'
-};
+export const TEXT_VARIANTS = ['display', 'title', 'heading', 'subheading', 'body', 'body-sm', 'caption', 'label', 'label-sm', 'overline'];
 const VARIANT_CONFIG = {
+  display: {
+    fontSize: '4xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 40,
+    letterSpacing: -0.5
+  },
+  title: {
+    fontSize: '2xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 30,
+    letterSpacing: -0.3
+  },
+  heading: {
+    fontSize: 'xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 26,
+    letterSpacing: -0.2
+  },
+  subheading: {
+    fontSize: 'lg',
+    weight: 'semibold',
+    color: 'default',
+    lineHeight: 24,
+    letterSpacing: -0.1
+  },
   body: {
-    fontSize: 'md',
+    fontSize: 'body',
     weight: 'regular',
-    color: 'default'
+    color: 'default',
+    lineHeight: 'body',
+    letterSpacing: 0
   },
   'body-sm': {
     fontSize: 'sm',
     weight: 'regular',
-    color: 'default'
+    color: 'default',
+    lineHeight: 20,
+    letterSpacing: 0
   },
   caption: {
     fontSize: 'xs',
-    weight: 'regular',
-    color: 'muted'
+    weight: 'medium',
+    color: 'muted',
+    lineHeight: 16,
+    letterSpacing: 0.2
   },
   label: {
-    fontSize: 'md',
+    fontSize: 'sm',
     weight: 'semibold',
-    color: 'default'
+    color: 'default',
+    lineHeight: 20,
+    letterSpacing: 0
   },
   'label-sm': {
-    fontSize: 'sm',
+    fontSize: 'xs',
     weight: 'semibold',
-    color: 'default'
+    color: 'default',
+    lineHeight: 16,
+    letterSpacing: 0
   },
   overline: {
     fontSize: 'xs',
     weight: 'bold',
-    color: 'muted'
+    color: 'muted',
+    lineHeight: 16,
+    letterSpacing: 1.2,
+    uppercase: true
   }
 };
 const HEADING_OVERRIDES = {
@@ -74,25 +96,75 @@ const HEADING_OVERRIDES = {
     fontSize: 'lg'
   }
 };
-
-/** The role colour a variant resolves to. Pure, so the WCAG test measures it without a `Theme`. */
+export const HEADING_VARIANTS = {
+  h1: 'title',
+  h2: 'heading',
+  h3: 'subheading',
+  h4: 'label'
+};
+function variantFontSize(theme, variant) {
+  const config = VARIANT_CONFIG[variant];
+  if (config.fontSize === 'body') {
+    return Platform.select({
+      ios: 17,
+      default: theme.fontSizes.md
+    });
+  }
+  return theme.fontSizes[config.fontSize];
+}
+function opticalLetterSpacing(fontSize, configured) {
+  if (configured !== 0) return configured;
+  if (fontSize >= 48) return fontSize * letterSpacings.tighter;
+  if (fontSize >= 30) return fontSize * letterSpacings.tight;
+  if (fontSize >= 20) return fontSize * letterSpacings.tight * 0.5;
+  return 0;
+}
+function variantLineHeight(_theme, variant, fontSize) {
+  const config = VARIANT_CONFIG[variant];
+  if (config.lineHeight === 'body') {
+    return fontSize + 6;
+  }
+  return config.lineHeight;
+}
+export function resolveTextColorFromRole(colors, role) {
+  if (role === 'default' || role === 'muted') {
+    return colors.fg[role];
+  }
+  return colors.status[role].text;
+}
 export function resolveTextColor(colors, variant) {
   return colors.fg[VARIANT_CONFIG[variant].color];
 }
-export function resolveTextStyle(theme, variant) {
+export function resolveTextStyle(theme, variant, options) {
   const config = VARIANT_CONFIG[variant];
-  return {
-    ...theme.fontStyleForWeight(theme.fontWeights[config.weight]),
-    fontSize: theme.fontSizes[config.fontSize],
-    color: resolveTextColor(theme.colors, variant)
+  const fontSize = variantFontSize(theme, variant);
+  const weight = options?.weight ?? config.weight;
+  const color = options?.color !== undefined ? resolveTextColorFromRole(theme.colors, options.color) : resolveTextColor(theme.colors, variant);
+  const style = {
+    ...theme.fontStyleForWeight(theme.fontWeights[weight]),
+    fontSize,
+    lineHeight: variantLineHeight(theme, variant, fontSize),
+    letterSpacing: opticalLetterSpacing(fontSize, config.letterSpacing),
+    color
   };
+  if (options?.align !== undefined) {
+    style.textAlign = options.align;
+  }
+  if (config.uppercase) {
+    style.textTransform = 'uppercase';
+  }
+  return style;
 }
-export function resolveHeadingStyle(theme, variant) {
-  const base = resolveTextStyle(theme, HEADING_VARIANTS[variant]);
+export function resolveHeadingStyle(theme, variant, options) {
+  const base = resolveTextStyle(theme, HEADING_VARIANTS[variant], options);
   const override = HEADING_OVERRIDES[variant];
-  return override ? {
+  if (!override) return base;
+  const fontSize = theme.fontSizes[override.fontSize];
+  return {
     ...base,
-    fontSize: theme.fontSizes[override.fontSize]
-  } : base;
+    fontSize,
+    lineHeight: fontSize + (variant === 'h1' ? 6 : variant === 'h2' ? 6 : 4),
+    letterSpacing: variant === 'h1' ? -0.3 : variant === 'h2' ? -0.2 : -0.1
+  };
 }
 //# sourceMappingURL=Text.variants.js.map

package/lib/module/modules/text/TextProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TextProps.js.map

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

@@ -1,7 +1,7 @@
 # textarea/ — multiline text entry
 
-`Textarea` is `Input`'s multiline sibling (Input is built in parallel; this module has no dependency
-on it). Same closed-prop shape as every other module: `size` / `status` are closed unions, colour is
+`Textarea` is `Input`'s multiline sibling — it shares `Input`'s prop names by convention but imports
+nothing from it. Same closed-prop shape as every other module: `size` / `status` are closed unions, colour is
 resolved from `RoleColors`, and `containerStyle` is the one documented `LayoutStyle` exception for a
 component wrapping a native `TextInput` (CLAUDE.md).
 
@@ -27,7 +27,7 @@ component wrapping a native `TextInput` (CLAUDE.md).
 | `status` | `default \| error` | `default` | Closed union — drives the field boundary + message colour. |
 | `disabled` | `boolean` | `false` | `editable={false}` + dimmed; blocks `changeText`. |
 | `label` | `string` | — | Rendered above the field; falls back into the field's `accessibilityLabel`. |
-| `accessibilityLabel` | `string` | `label` | Overrides the label fallback — needed when the visible label lives elsewhere (e.g. a `FormField` wrapper). Previously absent: `label` was the only way in. |
+| `accessibilityLabel` | `string` | `label` | Overrides the label fallback — needed when the visible label lives elsewhere (e.g. a `FormField` wrapper). |
 | `helperText` | `string` | — | Shown when `status` is `default`, or as the `error` fallback (see below). |
 | `errorText` | `string` | — | Shown instead of `helperText` when `status` is `error` and it's provided. |
 | `maxLength` | `number` | — | Passed straight to `TextInput`. |
@@ -55,7 +55,7 @@ No `icon` prop: multiline fields don't carry a leading/trailing icon in this cat
   which would otherwise double up visibly with the themed ring above. Native is untouched, since
   `outlineWidth` also drives TV remote-control focus there.
 - **2.3.3** — two things animate, both `opacity` only, on the native driver: the always-mounted focus
-  ring crossfades (`Textarea.tsx:99`, `fast`) and the helper/error message fades in and out
+  ring crossfades (`fast`) and the helper/error message fades in and out
   (`useEnterExit`). Both are guarded by `if (!motion.enabled) { …setValue(to); return; }`, so under
   reduce motion the ring is at its final opacity on the very next render and the message is removed
   outright rather than faded — pinned by `Textarea.motion.test.tsx`.
@@ -64,10 +64,9 @@ No `icon` prop: multiline fields don't carry a leading/trailing icon in this cat
   `textbox` value to assign.
 - `aria-disabled` tracks the same flag `editable` uses — flat, not `accessibilityState={{…}}`:
   react-native-web drops the object form entirely.
-- **3.3.1 — CORRECTED to match `FormField`'s own stated rule.** `errorText` now joins the accessible
-  NAME and sets `aria-invalid`, instead of riding `accessibilityHint` — a hint is advisory and some
-  readers suppress it, which a validity message must never be (same fix as `Input`). `helperText`
-  (genuinely advisory) stays on `accessibilityHint` for native.
+- **3.3.1** — `errorText` joins the accessible NAME and sets `aria-invalid`; it never rides
+  `accessibilityHint`, which is advisory and suppressed by some readers. `helperText` (genuinely
+  advisory) stays on `accessibilityHint` for native. Matches `FormField` and `Input`.
 - The label `Text` is hidden from assistive tech on native
   (`accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"`) — its content
   is carried by the field's own `accessibilityLabel`. The helper/error `Text` is hidden the same way
@@ -92,16 +91,13 @@ Same reasoning as Button's `tone`: every colour a field boundary or message can
 
 ## Known gaps
 
-- No `Input` module exists yet to diff this against (built in parallel) — the "same contract as
-  Input" note in the spec is honoured by prop-name convention (`value`/`onChangeText`/`status`/
-  `disabled`/`label`/`helperText`/`errorText`/`maxLength`/`containerStyle`), not by a shared import.
+- The "same contract as `Input`" guarantee is prop-name convention
+  (`value`/`onChangeText`/`status`/`disabled`/`label`/`helperText`/`errorText`/`maxLength`/
+  `containerStyle`), not a shared import or a shared type — the two can drift without a compile error.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Renders only host elements (`View`/`Text`/`TextInput`) — nothing to memoize.
 
-## 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.
+The field uses `radii.md`+ with `borderCurve: "continuous"`; theme access goes through
+`theme/hooks`, and reanimated loads at runtime as an optional peer.

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

@@ -11,16 +11,16 @@
  */
 
 import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
-import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
-import { useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
+import { AnimatedText, useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveTextareaAccessibility, resolveTextareaStatus, textareaFieldStructure, textareaLayout, TEXTAREA_SIZES } from "./Textarea.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Matches Button's own focus ring exactly: a small gap OUTSIDE the field, on the canvas, because
 // `border.focus` is the role token proven ≥ 3:1 against the canvas (drawn over the field's own
 // boundary colour its ≥ 3:1 isn't guaranteed for every `status`).
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
 export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
   const {
     value,
@@ -58,11 +58,14 @@ export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
   if (message !== undefined) lastMessage.current = message;
   const ringOpacity = useAnimatedValue(0);
   const ringAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
   const setRingVisible = useCallback(visible => {
     ringAnimation.current?.stop();
     const to = visible ? 1 : 0;
     if (!motion.enabled) {
-      ringOpacity.setValue(to);
+      ringOpacity.value = to;
       return;
     }
     ringAnimation.current = motion.timing(ringOpacity, to, {
@@ -98,7 +101,8 @@ export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
     bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
   }), [theme]);
   const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.xs,
@@ -124,7 +128,7 @@ export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
         value: value,
         onChangeText: onChangeText,
         placeholder: placeholder,
-        placeholderTextColor: theme.colors.fg.muted,
+        placeholderTextColor: theme.colors.fg.placeholder,
         editable: !disabled,
         multiline: true,
         maxLength: maxLength,
@@ -137,11 +141,10 @@ export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
         onFocus: handleFocus,
         onBlur: handleBlur,
         style: inputTextStyle
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      }), /*#__PURE__*/_jsx(Reanimated.View, {
         testID: "textarea-focus-ring",
-        style: [focusRingStyle, {
-          opacity: ringOpacity
+        style: [focusRingStyle, ringAnimatedStyle, {
+          pointerEvents: 'none'
         }]
       })]
     }), messageMotion.mounted && lastMessage.current !== undefined &&
@@ -150,7 +153,7 @@ export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
     // the field's `accessibilityHint` (helper) or its `accessibilityLabel` (error), so a second
     // stop here would repeat it. On web `accessibilityElementsHidden` is not forwarded, and this
     // node is instead what the field's `aria-describedby` points at.
-    _jsx(Animated.Text, {
+    _jsx(AnimatedText, {
       nativeID: hintId,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",

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

@@ -14,13 +14,16 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
+
 /**
  * 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,
@@ -86,7 +89,8 @@ export function resolveTextareaAccessibility(input) {
  */
 export const textareaFieldStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin,
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2]

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TextareaProps.js.map

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

@@ -1,15 +1,15 @@
 # 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.
+circle) connected to the next row's marker by a line. Optional per-item notes and note actions
+compose `Button` controls; the container may run a one-shot decorative reveal when motion allows.
 
 ## Files
 
 | File | Role |
 |------|------|
 | `Timeline.tsx` | The component + the private memo'd `TimelineRow`. Row models, virtualization threshold, the container reveal, and 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. |
+| `Timeline.variants.ts` | Pure resolvers (`resolveTimelineColors`, `resolveTimelineItemAccessibility`) + 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. |
@@ -19,7 +19,11 @@ per-item emphasis, no animation.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `items` | `{ title: string; description?: string; timestamp?: string; icon?: IconName; leading?: ReactNode }[]` | — | Rendered top to bottom, in array order. `leading` (added 2026-07, additive) replaces the default marker for that item — see below. |
+| `items` | `TimelineItem[]` | — | `{ id?, title, description?, timestamp?, icon?, leading?, notes? }` — `notes` are rows under the item. `leading` replaces the default marker; `id` keys the row. |
+| `onAddNote` | `() => void` | — | When set, shows an add-note affordance on items that support notes. |
+| `onEditNote` | `(noteId: string) => void` | — | Edit handler per note row. |
+| `onDeleteNote` | `(noteId: string) => void` | — | Delete handler per note row. |
+| `notesLoading` | `boolean` | `false` | Shows loading on note actions when true. |
 | `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. |
 
@@ -98,14 +102,6 @@ marker is a composition slot, not an icon choice.
 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.
-
 ## Reveal motion (decorative, one value for the whole list)
 
 A single `Animated.Value` on the outer container drives an opacity + `translateY` reveal
@@ -129,8 +125,3 @@ slightly less precise — the same call `markdown/` and `more-items/` make. The
 `item.id` when given, else a positional `timeline-index-<i>` — never one derived from `title`, which
 would remount a row on a text edit.
 
-## 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.