pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/screen/Screen.js

@@ -2,32 +2,31 @@
 
 /**
  * Screen — a screen shell composing SafeArea, optional KeyboardAvoidingView, optional pull-to-refresh,
- * and async-state slots that swap in `LoadingState` / consumer-provided empty/error content instead of
- * `children`. Replaces the per-app `SafeAreaView` + `KeyboardAvoidingView` + `RefreshControl` wiring
- * that tickets/mobile and crm-mobile each re-declared.
- *
- * Requires `react-native-safe-area-context` — Screen's whole purpose is safe-area handling; consumers
- * using this module are expected to install that optional peer (see MODULE.md).
- *
- * No `accessibilityRole` of its own: like `Card`, this is a layout shell — children and composed
- * state blocks carry their own semantics.
+ * optional `appBar` slot with safe-area edge splitting, and async-state slots.
  */
 
-import { memo, useMemo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { KeyboardAvoidingView, Platform, RefreshControl, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { ScreenScrollContext } from "../../core/screen-scroll/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme, useThemeColors } from "../../theme/hooks.js";
 import { LoadingState } from "../state-block/index.js";
-import { SCREEN_DEFAULT_EDGES, resolveScreenColors, screenPaddedStructure, screenRootStructure, screenScrollContentStructure, screenStateSlotStructure } from "./Screen.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { SCREEN_DEFAULT_EDGES, resolveScreenAppBarEdges, resolveScreenBodyEdges, resolveScreenColors, screenBodyStructure, screenPaddedStructure, screenRootStructure, screenScrollContentStructure, screenShellStructure, screenStateSlotStructure } from "./Screen.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Screen = /*#__PURE__*/memo(function Screen({
   children,
+  appBar,
   edges = SCREEN_DEFAULT_EDGES,
   padded = false,
   keyboardAvoiding = false,
   keyboardVerticalOffset = 0,
   refreshing = false,
   onRefresh,
+  scrollLinked = false,
   state = "idle",
   loading,
   empty,
@@ -37,69 +36,146 @@ export const Screen = /*#__PURE__*/memo(function Screen({
 }) {
   const theme = useTheme();
   const roleColors = useThemeColors();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const screenColors = resolveScreenColors(theme.colors);
+  const hasAppBar = appBar !== undefined;
+  const scrollY = useSharedValue(0);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: event => {
+      scrollY.value = event.contentOffset.y;
+    }
+  });
+  const scrollContextValue = useMemo(() => ({
+    scrollY
+  }), [scrollY]);
+  const linkScroll = scrollLinked && hasAppBar && state === "idle";
+  const bodyEdges = useMemo(() => resolveScreenBodyEdges(edges, hasAppBar), [edges, hasAppBar]);
+  const appBarEdges = useMemo(() => resolveScreenAppBarEdges(edges, hasAppBar), [edges, hasAppBar]);
+  const slotTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const body = useMemo(() => {
     if (state === "loading") {
       return /*#__PURE__*/_jsx(View, {
         style: screenStateSlotStructure(theme),
         testID: testID === undefined ? undefined : `${testID}-loading`,
-        children: loading ?? /*#__PURE__*/_jsx(LoadingState, {})
+        children: renderNodeSlot(loading ?? /*#__PURE__*/_jsx(LoadingState, {}), slotTextStyle)
       });
     }
     if (state === "empty") {
       return /*#__PURE__*/_jsx(View, {
         style: screenStateSlotStructure(theme),
         testID: testID === undefined ? undefined : `${testID}-empty`,
-        children: empty
+        children: renderNodeSlot(empty, slotTextStyle)
       });
     }
     if (state === "error") {
       return /*#__PURE__*/_jsx(View, {
         style: screenStateSlotStructure(theme),
         testID: testID === undefined ? undefined : `${testID}-error`,
-        children: error
+        children: renderNodeSlot(error, slotTextStyle)
       });
     }
-    return children;
-  }, [children, empty, error, loading, state, testID, theme]);
+    return renderNodeSlot(children, slotTextStyle);
+  }, [children, empty, error, loading, slotTextStyle, state, testID, theme]);
   const accent = roleColors.accent.solid;
+  const handleRefresh = useCallback(() => {
+    if (!reducedMotion) haptics.impact("light");
+    onRefresh?.();
+  }, [haptics, onRefresh, reducedMotion]);
   const refreshControl = useMemo(() => onRefresh === undefined ? undefined : /*#__PURE__*/_jsx(RefreshControl, {
     refreshing: refreshing,
-    onRefresh: onRefresh,
+    onRefresh: handleRefresh,
     colors: [accent],
     tintColor: accent
-  }), [onRefresh, refreshing, accent]);
-  const inner = refreshControl === undefined ? body : /*#__PURE__*/_jsx(ScrollView, {
-    contentContainerStyle: screenScrollContentStructure(),
-    refreshControl: refreshControl,
-    keyboardShouldPersistTaps: "handled",
-    children: body
-  });
+  }), [handleRefresh, onRefresh, refreshing, accent]);
+  const inner = useMemo(() => {
+    if (linkScroll) {
+      return /*#__PURE__*/_jsx(Animated.ScrollView, {
+        onScroll: scrollHandler,
+        scrollEventThrottle: 16,
+        contentContainerStyle: screenScrollContentStructure(),
+        refreshControl: refreshControl,
+        keyboardShouldPersistTaps: "handled",
+        children: body
+      });
+    }
+    if (refreshControl === undefined) return body;
+    return /*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: screenScrollContentStructure(),
+      refreshControl: refreshControl,
+      keyboardShouldPersistTaps: "handled",
+      children: body
+    });
+  }, [body, linkScroll, refreshControl, scrollHandler]);
+  const scrollWrappedInner = linkScroll ? /*#__PURE__*/_jsx(ScreenScrollContext.Provider, {
+    value: scrollContextValue,
+    children: inner
+  }) : inner;
   const background = screenColors.background;
-  const safeAreaStyle = useMemo(() => [screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, {
+  const shellStyle = useMemo(() => [screenShellStructure(theme), {
+    backgroundColor: background
+  }, style], [theme, background, style]);
+  const bodySafeAreaStyle = useMemo(() => [hasAppBar ? screenBodyStructure(theme) : screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, !hasAppBar && {
+    backgroundColor: background
+  }], [theme, padded, background, hasAppBar]);
+  const legacySafeAreaStyle = useMemo(() => [screenRootStructure(theme), padded ? screenPaddedStructure(theme) : undefined, {
     backgroundColor: background
   }], [theme, padded, background]);
-  const rootStyle = useMemo(() => [...safeAreaStyle, style], [safeAreaStyle, style]);
-  const keyboardStyle = useMemo(() => [screenRootStructure(theme), {
+  const legacyRootStyle = useMemo(() => [...legacySafeAreaStyle, style], [legacySafeAreaStyle, style]);
+  const legacyKeyboardStyle = useMemo(() => [screenRootStructure(theme), {
     backgroundColor: background
   }, style], [theme, background, style]);
+  const content = hasAppBar ? /*#__PURE__*/_jsxs(View, {
+    style: shellStyle,
+    testID: testID,
+    children: [appBarEdges.length > 0 ? /*#__PURE__*/_jsx(SafeAreaView, {
+      edges: appBarEdges,
+      children: renderNodeSlot(appBar, slotTextStyle)
+    }) : renderNodeSlot(appBar, slotTextStyle), /*#__PURE__*/_jsx(SafeAreaView, {
+      edges: bodyEdges,
+      style: bodySafeAreaStyle,
+      children: scrollWrappedInner
+    })]
+  }) : null;
+  if (hasAppBar) {
+    if (!keyboardAvoiding) {
+      return content;
+    }
+    return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+      style: shellStyle,
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: keyboardVerticalOffset,
+      testID: testID,
+      children: [appBarEdges.length > 0 ? /*#__PURE__*/_jsx(SafeAreaView, {
+        edges: appBarEdges,
+        children: renderNodeSlot(appBar, slotTextStyle)
+      }) : renderNodeSlot(appBar, slotTextStyle), /*#__PURE__*/_jsx(SafeAreaView, {
+        edges: bodyEdges,
+        style: bodySafeAreaStyle,
+        children: scrollWrappedInner
+      })]
+    });
+  }
   if (!keyboardAvoiding) {
     return /*#__PURE__*/_jsx(SafeAreaView, {
       edges: edges,
-      style: rootStyle,
+      style: legacyRootStyle,
       testID: testID,
-      children: inner
+      children: scrollWrappedInner
     });
   }
   return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
-    style: keyboardStyle,
+    style: legacyKeyboardStyle,
     behavior: Platform.OS === "ios" ? "padding" : "height",
     keyboardVerticalOffset: keyboardVerticalOffset,
     testID: testID,
     children: /*#__PURE__*/_jsx(SafeAreaView, {
       edges: edges,
-      style: safeAreaStyle,
-      children: inner
+      style: legacySafeAreaStyle,
+      children: scrollWrappedInner
     })
   });
 });

package/lib/module/modules/screen/Screen.variants.js

@@ -40,4 +40,22 @@ export const screenScrollContentStructure = createVariants({
     flexGrow: 1
   }
 });
+export const screenBodyStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1
+  }
+}));
+export const screenShellStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1
+  }
+}));
+export function resolveScreenBodyEdges(edges, hasAppBar) {
+  if (!hasAppBar) return edges;
+  return edges.filter(edge => edge !== "top");
+}
+export function resolveScreenAppBarEdges(edges, hasAppBar) {
+  if (!hasAppBar) return [];
+  return edges.includes("top") ? ["top"] : [];
+}
 //# sourceMappingURL=Screen.variants.js.map

package/lib/module/modules/screen/ScreenProps.js

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

package/lib/module/modules/search-bar/MODULE.md

@@ -9,8 +9,8 @@ touch target, optional debounced reporting, and an optional "Cancel" text button
 
 | File | Role |
 |------|------|
-| `SearchBar.tsx` | The component. Field composition, debounce timer, clear/cancel wiring, a11y wiring, focus ring. |
-| `SearchBar.variants.ts` | Pure resolvers (`resolveSearchBarColors`, `resolveSearchBarBorderColor`, `resolveSearchBarAccessibility`, `shouldShowClear`, `resolveSearchBarFieldHitSlop`, `resolveSearchBarTrailingHitSlop`) + the themed structural resolvers (`searchBarRowStructure`, `searchBarFieldStructure`, `searchBarClearStructure`, `searchBarCancelStructure`). No React, no lucide. |
+| `SearchBar.tsx` | The component. Field composition, debounce timer, clear/cancel wiring, a11y wiring, focus ring (`FOCUS_RING_*` from `core/style/focusRing`). |
+| `SearchBar.variants.ts` | Pure resolvers (`resolveSearchBarColors`, `resolveSearchBarBorderColor`, `resolveSearchBarAccessibility`, `shouldShowClear`, `resolveSearchBarFieldHitSlop`, `resolveSearchBarTrailingHitSlop`) + the themed structural resolvers (`searchBarRowStructure`, `searchBarFieldStructure`, `searchBarClearStructure`, `searchBarCancelStructure`). `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`; `CLEAR_BUTTON_WIDTH` = that floor. No React, no lucide. |
 | `index.ts` | Public surface: `SearchBar`, `SearchBarProps`, `SearchBarSize`. |
 | `__tests__/SearchBar.test.ts` | Pure: WCAG contrast (all brands × modes) + per-edge touch target + visibility/a11y contracts. |
 | `__tests__/SearchBar.render.test.tsx` | Render: value/placeholder, the field's `search` role, immediate vs debounced typing, clear isolation, `showCancel` lifecycle, submit flushing a pending debounce, focus ring, the rendered per-edge `hitSlop`. |
@@ -22,7 +22,7 @@ touch target, optional debounced reporting, and an optional "Cancel" text button
 | `value` | `string` | — | Required — controlled. |
 | `onChangeText` | `(text: string) => void` | — | Required. Debounced per `debounceMs`; the rendered text never lags. |
 | `placeholder` | `string` | `"Search"` | Falls back into the field's `accessibilityLabel` — SearchBar renders no visible label. |
-| `accessibilityLabel` | `string` | `placeholder` | Overrides the placeholder fallback — a placeholder that reads as a prompt ("Search…") rather than a name tells a screen-reader user nothing about WHAT is being searched. Previously absent: the placeholder was the only name, with no override. |
+| `accessibilityLabel` | `string` | `placeholder` | Overrides the placeholder fallback — a placeholder that reads as a prompt ("Search…") rather than a name tells a screen-reader user nothing about WHAT is being searched. |
 | `onSubmit` | `() => void` | — | Fires on the keyboard's search key. Flushes a pending debounce first. |
 | `onClear` | `() => void` | — | Fires after the clear button or "Cancel" empties the query. |
 | `debounceMs` | `number` | `0` | `0` = report every keystroke. Above `0`, `onChangeText` is debounced while local state keeps the visible text instant. |
@@ -59,15 +59,15 @@ above-field caption; the placeholder carries the only name it has.
   size — the resolver arithmetic in `SearchBar.test.ts` only reaches the user if the object lands on
   the node.
 - **1.4.3** — query text, placeholder, and the "Cancel" label are each measured ≥ 4.5:1 against
-  `bg.canvas` (the field renders no fill, like `Input`'s box) for all 8 brands × both modes. The
+  `bg.canvas` (the field renders no fill, like `Input`'s box) for all 9 brands × both modes. The
   pressed clear/cancel foreground is measured ≥ 4.5:1 against its own `pressedFill` too — not just
   assumed from the resting canvas pairing.
 - **1.4.11** — the field's resting and focused border, and the leading/clear glyphs, are measured
   ≥ 3:1 against the canvas.
-- **2.4.7** — a `border.focus` ring appears offset outside the field on focus, identical
-  geometry/token to `Input`'s.
-- **2.3.3** — n/a: nothing here animates (the cancel button is a conditional render, not a
-  transition). The one moving part, `loading`'s `Spinner`, already honours reduced motion itself.
+- **2.4.7** — a `border.focus` ring appears offset outside the field on focus, same
+  `core/style/focusRing` geometry/token as `Input`.
+- **2.3.3** — the only motion is the clear/cancel press scale from `usePressState` and `loading`'s
+  `Spinner`; both honour reduced motion. The cancel button is a conditional render, not a transition.
 
 ## Patterns copied from Input / ButtonGroup / Menu
 
@@ -76,6 +76,7 @@ above-field caption; the placeholder carries the only name it has.
 2. **Per-edge hitSlop elimination** — copied from `ButtonGroup`'s segment-edge fix, applied to the
    field/clear/cancel trio instead of a segmented row.
 3. **`bg.sunken` (not `bg.hover`) for a pressed fill** — same reasoning as `Menu`'s pressed row.
+4. **Clear/cancel presses** — `usePressState` (scale + state-layer overlay) on both affordances.
 
 ## Design decisions specific to this module
 

package/lib/module/modules/search-bar/SearchBar.js

@@ -18,9 +18,12 @@
  * `loading` spinner — is `Spinner`'s own, which already honours reduced motion internally.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Spinner } from "../spinner/index.js";
 import { resolveSearchBarAccessibility, resolveSearchBarBorderColor, resolveSearchBarColors, resolveSearchBarFieldHitSlop, resolveSearchBarTrailingHitSlop, SEARCH_BAR_SIZES, searchBarCancelStructure, searchBarClearStructure, searchBarFieldStructure, searchBarRowStructure, shouldShowClear } from "./SearchBar.variants.js";
@@ -29,6 +32,7 @@ const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
 const ICON_STROKE = 2;
 const CLEAR_ACCESSIBILITY_LABEL = "Clear search";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const SearchBar = /*#__PURE__*/memo(function SearchBar({
   value,
   onChangeText,
@@ -124,17 +128,27 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
   const fieldHitSlop = resolveSearchBarFieldHitSlop(size, {
     trailingAdjacent: clearVisible || showCancelButton
   });
+  const clearPress = usePressState(false);
+  const cancelPress = usePressState(false);
+  const overlayStaticStyle = {
+    backgroundColor: colors.pressedFill,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
+  };
+  const floatingFieldStyle = useMemo(() => ({
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }), [theme]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: [searchBarRowStructure(theme), style],
     children: [/*#__PURE__*/_jsxs(View, {
       style: [searchBarFieldStructure(theme, {
         size
-      }), {
+      }), floatingFieldStyle, {
         borderColor: resolveSearchBarBorderColor(colors, focused)
       }, disabled && styles.dimmed],
       children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: "search-bar-focus-ring",
         style: {
           position: "absolute",
@@ -144,7 +158,9 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: colors.focusBorder,
-          borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+          borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+          borderCurve: "continuous",
+          pointerEvents: "none"
         }
       }), loading ? /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
@@ -189,53 +205,59 @@ export const SearchBar = /*#__PURE__*/memo(function SearchBar({
           color: colors.text,
           padding: 0
         }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset]
-      }), clearVisible && /*#__PURE__*/_jsx(Pressable, {
+      }), clearVisible && /*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-clear` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: CLEAR_ACCESSIBILITY_LABEL,
         onPress: handleClear,
+        onPressIn: clearPress.handlers.onPressIn,
+        onPressOut: clearPress.handlers.onPressOut,
+        onLayout: clearPress.onLayout,
         hitSlop: resolveSearchBarTrailingHitSlop(size, {
           outerRight: false
         }),
-        style: ({
-          pressed
-        }) => [searchBarClearStructure(theme), pressed && {
-          backgroundColor: colors.pressedFill
-        }],
-        children: ({
-          pressed
-        }) => /*#__PURE__*/_jsx(Icon, {
+        style: [searchBarClearStructure(theme), {
+          overflow: "hidden"
+        }, clearPress.animatedStyle],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, clearPress.overlayStyle, {
+            pointerEvents: "none"
+          }]
+        }), /*#__PURE__*/_jsx(Icon, {
           name: "x",
           size: spec.iconSize,
-          color: pressed ? colors.onPressedFill : colors.icon,
+          color: clearPress.pressed ? colors.onPressedFill : colors.icon,
           strokeWidth: ICON_STROKE
-        })
+        })]
       })]
-    }), showCancelButton && /*#__PURE__*/_jsx(Pressable, {
+    }), showCancelButton && /*#__PURE__*/_jsxs(AnimatedPressable, {
       testID: testID ? `${testID}-cancel` : undefined,
       accessibilityRole: "button",
       accessibilityLabel: cancelLabel,
       onPress: handleCancel,
+      onPressIn: cancelPress.handlers.onPressIn,
+      onPressOut: cancelPress.handlers.onPressOut,
+      onLayout: cancelPress.onLayout,
       hitSlop: resolveSearchBarTrailingHitSlop(size, {
         outerRight: true
       }),
-      style: ({
-        pressed
-      }) => [searchBarCancelStructure(theme, {
+      style: [searchBarCancelStructure(theme, {
         size
-      }), pressed && {
-        backgroundColor: colors.pressedFill
-      }],
-      children: ({
-        pressed
-      }) => /*#__PURE__*/_jsx(Text, {
+      }), {
+        overflow: "hidden"
+      }, cancelPress.animatedStyle],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, cancelPress.overlayStyle, {
+          pointerEvents: "none"
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
           fontSize: spec.fontSize,
-          color: pressed ? colors.onPressedFill : colors.cancelLabel
+          color: cancelPress.pressed ? colors.onPressedFill : colors.cancelLabel
         }],
         children: cancelLabel
-      })
+      })]
     })]
   });
 });

package/lib/module/modules/search-bar/SearchBar.variants.js

@@ -14,27 +14,25 @@
  * `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/Input/ButtonGroup — 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 };
 /**
  * Deliberately the same height/fontSize/iconSize numbers as `INPUT_SIZES` `sm`/`md`, so a SearchBar
  * and an Input placed in the same form line up exactly.
  */
 export const SEARCH_BAR_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   }
 };
 
@@ -59,7 +57,7 @@ export const CLEAR_BUTTON_WIDTH = MIN_TOUCH_TARGET;
 export function resolveSearchBarColors(colors) {
   return {
     text: colors.fg.default,
-    placeholder: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     icon: colors.fg.muted,
     border: colors.border.interactive,
     focusBorder: colors.border.focus,
@@ -141,7 +139,8 @@ export const searchBarFieldStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[2],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -171,7 +170,8 @@ export const searchBarClearStructure = createThemedVariants(theme => ({
     alignSelf: "stretch",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -186,7 +186,8 @@ export const searchBarCancelStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

package/lib/module/modules/search-bar/SearchBarProps.js

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

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

@@ -7,7 +7,7 @@ the settings-section pattern re-declared across consumer apps.
 
 | File | Role |
 |------|------|
-| `Section.tsx` | The component. Hairline + label + children; `style` last. |
+| `Section.tsx` | Hairline + label + children (`renderNodeSlot` wraps string/number children); `style` last. |
 | `Section.variants.ts` | Pure resolver (`resolveSectionColors`) + themed structural resolver. |
 | `index.ts` | Public surface: `Section`, `SectionProps`. |
 | `__tests__/Section.test.ts` | Pure: WCAG 1.4.3 on the label, colour mapping. |
@@ -37,3 +37,5 @@ the settings-section pattern re-declared across consumer apps.
 ## Performance
 
 Wrapped in `React.memo`.
+
+- **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/section/Section.js

@@ -9,10 +9,11 @@
  */
 
 import { memo, useMemo } from "react";
-import { View } from "react-native";
-import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { resolveSectionColors, sectionContainerStructure, sectionLabelStructure } from "./Section.variants.js";
+import { Text } from "../text/index.js";
+import { sectionContainerStructure } from "./Section.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Section = /*#__PURE__*/memo(function Section({
   label,
@@ -21,22 +22,19 @@ export const Section = /*#__PURE__*/memo(function Section({
   testID
 }) {
   const theme = useTheme();
-  const colors = useMemo(() => resolveSectionColors(theme.colors), [theme.colors]);
-  const rootStyle = useMemo(() => [sectionContainerStructure(theme), {
-    borderTopColor: colors.border
-  }, style], [theme, colors, style]);
-  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.bold), sectionLabelStructure(theme), {
-    color: colors.label
-  }], [theme, colors]);
-  return /*#__PURE__*/_jsxs(View, {
+  const rootStyle = useMemo(() => [sectionContainerStructure(theme), style], [theme, style]);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     testID: testID,
     style: rootStyle,
-    children: [/*#__PURE__*/_jsx(HeadingText, {
-      accessibilityRole: "header",
-      "aria-level": HEADING_LEVEL.section,
-      style: labelStyle,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "overline",
       children: label
-    }), children]
+    }), renderNodeSlot(children, childrenSlotStyle)]
   });
 });
 //# sourceMappingURL=Section.js.map

package/lib/module/modules/section/Section.variants.js

@@ -1,9 +1,5 @@
 "use strict";
 
-/**
- * Section's style resolution — same split as `Divider.variants` / `Card.variants`.
- */
-
 import { createThemedTextVariants, createThemedVariants } from "../../core/style/index.js";
 export function resolveSectionColors(colors) {
   return {
@@ -13,8 +9,7 @@ export function resolveSectionColors(colors) {
 }
 export const sectionContainerStructure = createThemedVariants(theme => ({
   base: {
-    borderTopWidth: theme.borderWidths.thin,
-    paddingTop: theme.space[2],
+    paddingTop: theme.space[4],
     paddingBottom: theme.space[2],
     rowGap: theme.space[2]
   }

package/lib/module/modules/section/SectionProps.js

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

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

@@ -1,7 +1,26 @@
-# section-list/
+# section-list/ — a virtualized sectioned list
 
 Virtualized sectioned list via `core/list/VirtualSectionList`.
 
+## Files
+
+| File | Role |
+|------|------|
+| `SectionList.tsx` | The component + `SectionListProps` / `SectionListSection`. Wraps `VirtualSectionList`; the header is a memoized `HeadingText`. |
+| `SectionList.variants.ts` | Themed structural resolver (`sectionListHeaderStructure`). |
+| `index.ts` | Public surface: `SectionList`, `SectionListProps`, `SectionListSection`. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `sections` | `readonly SectionListSection<T>[]` | — | Required. `{ title, data }` per section. |
+| `renderItem` | `(info: { item: T; sectionIndex: number; index: number }) => ReactElement \| null` | — | Required. |
+| `keyExtractor` | `(item: T, index: number) => string` | — | Required. |
+| `itemHeight` | `number` | — | Forwarded to `VirtualSectionList` for fixed-height windowing. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`. |
+
 ## Accessibility
 
 - **1.3.1 / 2.4.6** — a section header carries `accessibilityRole="header"` and `aria-level={2}`
@@ -14,5 +33,6 @@ Virtualized sectioned list via `core/list/VirtualSectionList`.
 
 | Test | Covers |
 |------|--------|
+| `__tests__/SectionList.test.ts` | Pure: the header structural resolver. |
 | `__tests__/SectionList.render.test.tsx` | Render: section header + item, heading role + level. |
 | `__tests__/SectionList.dom.test.tsx` | Real DOM (`jest.web.config.js`): the header renders a real `<h2>`. |

package/lib/module/modules/section-list/SectionListProps.js

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