pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/swipeable-row/SwipeableRow.js

@@ -16,12 +16,14 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Menu } from "../menu/index.js";
 import { resolveSwipeableActionTone, SWIPE_ACTION_WIDTH, swipeableActionButtonStructure, swipeableActionFocusRingStructure, swipeableActionsStructure, swipeableMoreAffordanceStructure, swipeableRowStructure } from "./SwipeableRow.variants.js";
@@ -29,6 +31,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 18;
 const NO_ACTIONS = [];
+const AnimatedActionPressable = Animated.createAnimatedComponent(Pressable);
 export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
   children,
   leftActions = NO_ACTIONS,
@@ -200,6 +203,7 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
 }) {
   const colors = useMemo(() => resolveSwipeableActionTone(theme.colors, action.tone ?? "accent"), [theme, action.tone]);
   const [focused, setFocused] = useState(false);
+  const press = usePressState(false);
   const handlePress = useCallback(() => onRun(action.id), [onRun, action.id]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
@@ -213,20 +217,32 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
   const focusRingStyle = useMemo(() => [swipeableActionFocusRingStructure(theme), {
     borderColor: theme.colors.border.focus
   }], [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode)
+  }), [theme.mode]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedActionPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: action.label
-    // `accessibilityElementsHidden`/`importantForAccessibility` on the tray are no-ops in
-    // react-native-web (zero occurrences in its dist), so the tray's buttons would otherwise be
-    // invisible tab stops painted over by the row's own content.
+    // RNW ignores the tray's a11y-hiding props, so this stays a reachable tab stop otherwise.
     ,
     tabIndex: -1,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    style: buttonStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
+    android_ripple: androidRipple,
+    style: [buttonStyle, styles.overflowHidden, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle
@@ -241,4 +257,9 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
     })]
   });
 });
+const styles = StyleSheet.create({
+  overflowHidden: {
+    overflow: "hidden"
+  }
+});
 //# sourceMappingURL=SwipeableRow.js.map

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

@@ -77,3 +77,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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.
+
+Toggle uses `usePressState` and `useHaptics().selection()` on press.

package/lib/module/modules/switch/Switch.js

@@ -7,8 +7,9 @@
  * to RN — which is also why there is no `size` prop.
  */
 
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { Switch as RNSwitch } from "react-native";
+import { useHaptics } from "../../core/haptics/index.js";
 import { useThemeColors } from "../../theme/hooks.js";
 import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,6 +24,7 @@ export const Switch = /*#__PURE__*/memo(function Switch({
   // `trackColor`/`thumbColor` accept no token object — the same raw-string escape hatch as
   // `placeholderTextColor` — so colour is resolved via `useThemeColors()`, not `useTheme().colors`.
   const colors = useThemeColors();
+  const haptics = useHaptics();
   const {
     trackOff,
     trackOn,
@@ -32,10 +34,14 @@ export const Switch = /*#__PURE__*/memo(function Switch({
     value,
     disabled
   });
+  const handleValueChange = useCallback(next => {
+    haptics.selection();
+    onValueChange(next);
+  }, [haptics, onValueChange]);
   return /*#__PURE__*/_jsx(RNSwitch, {
     testID: testID,
     value: value,
-    onValueChange: onValueChange,
+    onValueChange: handleValueChange,
     disabled: disabled,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: accessibilityLabel,

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

@@ -57,7 +57,8 @@ purpose control has no closed union of appearances to resolve.
 - **2.3.3** — the indicator's movement is two `Animated.Value`s (`translateX`, `scaleX`) driven off
   each tab's own `onLayout` measurement. When `useMotion().enabled` is false (reduced motion or the
   global kill switch) they're set with `setValue` (an instant snap) instead of tweening — verified
-  in the render tests by spying on `Animated.timing` and asserting it isn't called.
+  in the render tests by spying on `Animated.timing` and asserting it isn't called. Tab presses use
+  `usePressState` (scale + state-layer overlay).
 
 ## Indicator motion (transform-only, native driver)
 

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

@@ -16,13 +16,18 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsFocusRingStructure, tabsIndicatorStructure, tabsStripStructure, TABS_INDICATOR_UNIT_WIDTH, TABS_SIZES } from "./Tabs.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 /** Centre of the 1dp bar in its own untransformed box — `scaleX` grows around it, not from the left. */
 const INDICATOR_ORIGIN = TABS_INDICATOR_UNIT_WIDTH / 2;
 const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
@@ -31,51 +36,64 @@ const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
   size,
   theme,
   labelColor,
-  pressedColor,
   hitSlop,
   fontSize,
   iconSize,
   onPress,
   onLayout,
+  hapticsSelection,
   testID
 }) {
   const a11y = resolveTabAccessibility({
     selected
   });
-  // Keyboard / external-keyboard / assistive-tech focus, held per tab so a focus change re-renders
-  // one item instead of the strip (same reasoning `BottomNavTab` documents).
+  const press = usePressState(false);
   const [focused, setFocused] = useState(false);
-  const handlePress = useCallback(() => onPress(item.value), [onPress, item.value]);
-  const handleLayout = useCallback(event => onLayout(item.value, event), [onLayout, item.value]);
+  const handlePress = useCallback(() => {
+    hapticsSelection();
+    onPress(item.value);
+  }, [hapticsSelection, onPress, item.value]);
+  const handleLayout = useCallback(event => {
+    press.onLayout(event);
+    onLayout(item.value, event);
+  }, [onLayout, item.value, press.onLayout]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => [tabsFocusRingStructure(theme), {
     borderColor: theme.colors.border.focus
   }], [theme]);
-  const pressedStyle = useMemo(() => ({
-    backgroundColor: pressedColor
-  }), [pressedColor]);
-  const itemStyle = useCallback(({
-    pressed
-  }) => [tabItemStructure(theme, {
+  const itemStyle = useMemo(() => [tabItemStructure(theme, {
     size
-  }), pressed ? pressedStyle : null], [theme, size, pressedStyle]);
-  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+  }), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights[selected ? "semibold" : "medium"]), {
     fontSize,
     color: labelColor
-  }], [theme, fontSize, labelColor]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  }], [theme, fontSize, labelColor, selected]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     "aria-selected": a11y["aria-selected"],
     accessibilityLabel: item.label,
     onPress: handlePress,
     onLayout: handleLayout,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: itemStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
@@ -101,6 +119,7 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
   const colors = useMemo(() => resolveTabsColors(theme.colors), [theme.colors]);
   const spec = TABS_SIZES[size];
   const [layouts, setLayouts] = useState({});
@@ -163,12 +182,12 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
       size: size,
       theme: theme,
       labelColor: item.value === value ? colors.activeLabel : colors.inactiveLabel,
-      pressedColor: colors.pressedTab,
       hitSlop: spec.hitSlop,
       fontSize: spec.fontSize,
       iconSize: spec.iconSize,
       onPress: onValueChange,
       onLayout: handleTabLayout,
+      hapticsSelection: haptics.selection,
       testID: testID ? `${testID}-${item.value}` : undefined
     }, item.value))]
   });

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

@@ -90,7 +90,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 +143,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/text/MODULE.md

@@ -16,12 +16,15 @@ import { Text, Heading } from 'pixelize-native-library/text';
 
 | `Text` variant | size | weight | colour role |
 |---|---|---|---|
-| `body` | `md` | regular | `fg.default` |
+| `body` | 17 iOS / 16 Android | 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` |
+| `overline` | `xs` | bold | `fg.muted` | uppercase + wider tracking |
+
+Optional props (additive): `color` (`fg` role or `status` role), `align`, `weight`, `numberOfLines`.
+Every variant resolves `lineHeight` (size + 5) and `letterSpacing` from theme tokens.
 
 `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`**

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,84 @@
 "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';
 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 +95,68 @@ 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 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: 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/textarea/MODULE.md

@@ -105,3 +105,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

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

@@ -98,7 +98,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 +125,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,

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

@@ -86,7 +86,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/toast/MODULE.md

@@ -145,10 +145,10 @@ change can't silently reintroduce the gap.
   `core/a11y` and re-export, once that edit lands, rather than leaving two near-identical stores.
 - **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.
+- **Top position has no safe-area inset awareness.** `position: "bottom"` now adds the same static
+  iOS home-indicator approximation Drawer/BottomSheet use (`resolveToastBottomInset`); `top` still
+  reads a fixed `theme.space[4]` with no notch awareness — a consumer on a notched device may want
+  its own top padding via screen-level layout until `react-native-safe-area-context` is a real peer.
 - Render tests need `@testing-library/react-native` + a react-native jest preset (same
   dependency-pending note as `Button.render.test.tsx`).
 
@@ -161,3 +161,7 @@ change can't silently reintroduce the gap.
 - 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.
+
+Success/danger toasts fire `useHaptics().notification()` when a haptics module is registered.
+
+- **Round 5 motion** — dropped the ad hoc reanimated `FadeInDown`/`FadeOut`/`LinearTransition` wrapper; `progress` already drove the card's own entrance+exit fade/slide, so the wrapper was pure duplication.