pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/reorder/Reorder.js

@@ -13,7 +13,7 @@
  * preview offset is `resolveRowShift`, the dragged row's is the raw `translationY`.
  *
  * The list stays FULLY CONTROLLED: `items` is never mutated mid-drag. On release the pan hands off
- * to JS once (`runOnJS`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
+ * to JS once (`scheduleOnRN`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
  * Because the preview and the commit share the same splice semantics, the dragged row lands in the
  * slot its shifted neighbours already vacated — and passive rows snap back to 0 the instant
  * `activeIndex` goes idle, so no stale offset can outlive the drop.
@@ -37,8 +37,10 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { useAnnounce } from "../../core/a11y/index.js";
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useAnnounce, useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { VirtualList } from "../../core/list/index.js";
 import { useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -56,6 +58,8 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const colors = useMemo(() => resolveReorderColors(theme.colors), [theme.colors]);
   const rowPitch = resolveRowPitch(theme.space[2]);
   const activeIndex = useSharedValue(IDLE);
@@ -101,7 +105,8 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
       duration: liftMs
     }) : 1;
     setActiveRow(index);
-  }, [disabled, activeIndex, targetIndex, translationY, lift, motionEnabled, liftMs]);
+    if (!reducedMotion) haptics.impact("light");
+  }, [disabled, activeIndex, targetIndex, translationY, lift, motionEnabled, liftMs, reducedMotion, haptics]);
   const endDrag = useCallback(() => {
     const from = activeIndex.value;
     if (from === IDLE) return;
@@ -118,8 +123,9 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
       if (moved !== undefined) {
         setAnnouncement(resolveReorderMoveAnnouncement(moved.label, to, itemsRef.current.length));
       }
+      if (!reducedMotion) haptics.selection();
     }
-  }, [activeIndex, targetIndex, translationY, lift]);
+  }, [activeIndex, targetIndex, translationY, lift, reducedMotion, haptics]);
   const pan = useMemo(() => Gesture.Pan()
   // Without manual activation the pan swallows the virtualized list's own scroll gesture.
   .manualActivation(true).onTouchesMove((_event, manager) => {
@@ -136,7 +142,7 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
     "worklet";
 
     if (activeIndex.value === IDLE) return;
-    runOnJS(endDrag)();
+    scheduleOnRN(endDrag);
   }), [activeIndex, targetIndex, translationY, itemCount, rowPitch, endDrag]);
   const handleMove = useCallback((fromIndex, toIndex) => {
     // A row's move button stays operable while it holds focus even at the list's end (see

package/lib/module/modules/reorder/Reorder.variants.js

@@ -16,7 +16,9 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /**
  * Fixed row height, in dp. A fixed height — rather than per-row `onLayout` measurement — is what
@@ -25,10 +27,6 @@ import { createThemedVariants, createVariants } from "../../core/style/index.js"
  */
 export const REORDER_ROW_HEIGHT = 56;
 
-/** The 44dp floor every touch target holds itself to (WCAG 2.5.5 AAA; comfortably clears 2.5.8). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
 /** Grip bar glyph — three of these stacked make the drag-handle affordance. No `IconName` in the
  *  closed 22-name set represents a drag handle, and that set is never extended for one component
  *  (per the build brief), so the grip is hand-built from plain themed bars instead. */
@@ -56,6 +54,7 @@ export const GRIP_HIT_SLOP = {
  * one of these role lookups, guaranteed legible in both modes (same reasoning `resolveTimelineColors`
  * documents for its own tone-less component).
  */
+
 export function resolveReorderColors(colors) {
   return {
     rowBackground: colors.bg.surface,
@@ -167,7 +166,8 @@ export const reorderRowStructure = createThemedVariants(theme => ({
     height: REORDER_ROW_HEIGHT,
     marginBottom: theme.space[2],
     paddingHorizontal: theme.space[3],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[3]
   }
 }));
@@ -188,7 +188,8 @@ export const reorderGripBarStructure = createThemedVariants(theme => ({
   base: {
     width: GRIP_BAR_WIDTH,
     height: GRIP_BAR_HEIGHT,
-    borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
   }
 }));
 //# sourceMappingURL=Reorder.variants.js.map

package/lib/module/modules/reorder/ReorderProps.js

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

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

@@ -1,4 +1,4 @@
-# rich-text/
+# rich-text/ — a read-only renderer for sanitized HTML
 
 Read-only safe HTML renderer. Parse/sanitize in `parseRichText.ts` (ported from tickets/mobile). Heavy — subpath only.
 
@@ -24,11 +24,12 @@ safe schemes only) · `onImagePress` · `style` (layout-only, outermost, once, l
   into inline spans inside one `Text` — there is no per-heading node left, so heading semantics are
   unavailable in that mode.
 - Links are `accessibilityRole="link"`; images are `Pressable`s labelled from their `alt` (falling back to
-  `Image`).
+  `Image`) and carry `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`) on Android.
 - Colour pairs are measured across all 9 brands × both modes (`RichText.test.ts`), min ratios: text 6.10 and
   muted 6.52 and link 5.06 on the canvas · mention label 4.82 on its own `accent.subtle` pill · code and
   `pre` 5.69 on `bg.sunken`. `quoteBorder` / `border` are decorative rules (1.08–1.43:1) with no contrast
   floor — they are pinned to `border.default` and asserted never to escalate to `border.interactive`/`focus`.
+- `blockquote`'s left border is `theme.borderWidths.thick`, never a raw literal.
 
 ## Performance
 
@@ -49,4 +50,5 @@ into inline spans inside one `Text` — which a `FlatList` cannot host. It also
 ## Known gaps
 
 - Tables are sanitized through but render as their text runs, not as a grid.
-- Images render as a `🖼 alt` placeholder — the library never fetches remote content itself.
+- Images render as a `🖼 alt` placeholder inside a `Pressable` — the library never fetches remote
+  content itself.

package/lib/module/modules/rich-text/RichText.js

@@ -8,6 +8,7 @@ import { memo, useCallback, useMemo } from "react";
 import { Linking, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { HeadingText } from "../../core/heading/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { BLOCK_TAGS, isBlank, isChecked, isElement, isMention, isSafeUrl, mentionLabel, MENTION_HOSTS, parseRichText, stripHtmlToText, textContent } from "./parseRichText.js";
 import { resolveRichTextColors } from "./RichText.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,9 +28,7 @@ const styles = StyleSheet.create({
   block: {
     marginBottom: 8
   },
-  bold: {
-    fontWeight: "700"
-  },
+  bold: {},
   italic: {
     fontStyle: "italic"
   },
@@ -55,7 +54,6 @@ const styles = StyleSheet.create({
     flex: 1
   },
   quote: {
-    borderLeftWidth: 3,
     paddingLeft: 12,
     marginBottom: 8
   },
@@ -73,16 +71,8 @@ const styles = StyleSheet.create({
     marginBottom: 8
   }
 });
-const WRAP_STYLES = {
-  b: styles.bold,
-  strong: styles.bold,
-  i: styles.italic,
-  em: styles.italic,
-  u: styles.underline,
-  s: styles.strike,
-  del: styles.strike,
-  strike: styles.strike
-};
+const WRAP_TAGS = ["b", "strong", "i", "em", "u", "s", "del", "strike"];
+const WRAP_TAG_SET = new Set(WRAP_TAGS);
 const RichTextLink = /*#__PURE__*/memo(function RichTextLink({
   href,
   linkStyle,
@@ -101,13 +91,19 @@ const RichTextImage = /*#__PURE__*/memo(function RichTextImage({
   src,
   label,
   mutedStyle,
+  mode,
   onPress
 }) {
   const handlePress = useCallback(() => onPress?.(src), [onPress, src]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: label,
     onPress: onPress ? handlePress : undefined,
+    android_ripple: androidRipple,
     style: styles.imageWrap,
     children: /*#__PURE__*/_jsx(Text, {
       style: mutedStyle,
@@ -131,9 +127,9 @@ export const RichText = /*#__PURE__*/memo(function RichText({
       textDecorationLine: "underline"
     },
     mention: {
+      ...theme.fontStyleForWeight(theme.fontWeights.semibold),
       color: colors.mentionText,
-      backgroundColor: colors.mentionBg,
-      fontWeight: "600"
+      backgroundColor: colors.mentionBg
     },
     code: {
       fontFamily: MONO,
@@ -147,7 +143,30 @@ export const RichText = /*#__PURE__*/memo(function RichText({
     text: {
       color: colors.text
     }
-  }), [colors]);
+  }), [colors, theme]);
+  const wrapStyles = useMemo(() => ({
+    b: theme.fontStyleForWeight(theme.fontWeights.bold),
+    strong: theme.fontStyleForWeight(theme.fontWeights.bold),
+    i: {
+      fontStyle: "italic"
+    },
+    em: {
+      fontStyle: "italic"
+    },
+    u: {
+      textDecorationLine: "underline"
+    },
+    s: {
+      textDecorationLine: "line-through"
+    },
+    del: {
+      textDecorationLine: "line-through"
+    },
+    strike: {
+      textDecorationLine: "line-through"
+    }
+  }), [theme]);
+  const headingStyle = useMemo(() => theme.fontStyleForWeight(theme.fontWeights.bold), [theme]);
   const baseTextStyle = useMemo(() => [styles.base, palette.text], [palette]);
   const rootStyle = useMemo(() => [styles.root, style], [style]);
   const tree = useMemo(() => {
@@ -184,7 +203,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
           attrs,
           children
         } = node;
-        const wrap = WRAP_STYLES[tag];
+        const wrap = WRAP_TAG_SET.has(tag) ? wrapStyles[tag] : undefined;
         if (tag === "br") out.push("\n");else if (wrap) out.push(/*#__PURE__*/_jsx(Text, {
           style: wrap,
           children: renderInline(children, pre, key)
@@ -233,16 +252,16 @@ export const RichText = /*#__PURE__*/memo(function RichText({
         return /*#__PURE__*/_jsx(HeadingText, {
           accessibilityRole: "header",
           "aria-level": level,
-          style: [styles.base, textStyle, {
+          style: [styles.base, textStyle, headingStyle, {
             fontSize: size,
-            lineHeight: size + 6,
-            fontWeight: "700"
+            lineHeight: size + 6
           }],
           children: renderInline(children, false, key)
         }, key);
       }
       if (tag === "blockquote") return /*#__PURE__*/_jsx(View, {
         style: [styles.quote, {
+          borderLeftWidth: theme.borderWidths.thick,
           borderLeftColor: colors.quoteBorder
         }],
         children: renderBlocks(children, key, {
@@ -288,6 +307,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
           src: attrs.src ?? "",
           label: attrs.alt || "Image",
           mutedStyle: palette.muted,
+          mode: theme.mode,
           onPress: onImagePress
         }, key);
       }
@@ -337,7 +357,7 @@ export const RichText = /*#__PURE__*/memo(function RichText({
     } catch {
       return null;
     }
-  }, [tree, numberOfLines, colors, palette, openURL, onImagePress]);
+  }, [tree, numberOfLines, colors, palette, wrapStyles, headingStyle, openURL, onImagePress, theme]);
   if (!html) return null;
   if (content == null) {
     return /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/rich-text/RichTextProps.js

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

package/lib/module/modules/rich-text-editor/MODULE.md

@@ -26,7 +26,7 @@ button) — it is not the HTML and must not be used for persistence.
 
 | File | Role |
 |------|------|
-| `RichTextEditor.tsx` | The component: toolbar (`Button`), the native editor, the link dialog (`Modal` + `Input`), the mention dropdown. |
+| `RichTextEditor.tsx` | The component: toolbar (`Button`), the native editor, the link dialog (`Modal` + `Input`), the mention dropdown. Colocated props keep behavioural JSDoc on non-obvious fields only (no per-prop narration). |
 | `RichTextEditor.variants.ts` | Pure resolvers — toolbar item catalogue, `onChangeState` → active-action mapping, mention filtering, colour + `HtmlStyle` token mapping — plus the themed structural resolvers. No React, no native import (types-only from `react-native-enriched-html`). |
 | `index.ts` | Public surface: `RichTextEditor`, `RichTextEditorHandle`, `RichTextEditorProps`, `MentionUser`, `RichTextEditorImage`, `RichTextEditorToolbarAction`, `RICH_TEXT_EDITOR_TOOLBAR_ITEMS`. |
 | `__tests__/RichTextEditor.test.ts` | Pure: WCAG contrast for the field/mention pill/code/code-block/blockquote/link/list-marker colours (all brands × modes), the toolbar item catalogue, `onChangeState` mapping, mention filtering. |
@@ -126,7 +126,8 @@ Inside it the candidates go through `VirtualList` (`core/list`), not a `ScrollVi
 `itemHeight={MENTION_ROW_HEIGHT}` — the rows are a fixed 40dp (`richTextEditorMentionRowStructure`'s
 `minHeight`), so `getItemLayout` is exact and the list never measures. Rows are a memo'd `MentionRow`
 taking **primitives** (`id`, `label`), and `onSelect(id, label)` is one shared `useCallback` with `[]`
-deps rather than a closure minted per row.
+deps rather than a closure minted per row. Each row also carries `android_ripple`
+(`rippleColor(theme.mode)`, `borderless: false`), gated on `Platform.OS === "android"`.
 
 **`keyboardShouldPersistTaps="always"` — `"handled"` is not enough here.** The dropdown only exists
 while the mention session is live, and the session dies with the keyboard. Under RN's default
@@ -141,8 +142,7 @@ dropdown now does.
 ## Accessibility
 
 - **Editor field accessible name.** The native `EnrichedTextInput` gets `accessibilityLabel` from
-  `accessibilityLabel ?? label` (`resolveRichTextEditorAccessibility`) — before this fix it had no
-  path to a name at all. On native the now-redundant visible `label` `Text` is hidden from
+  `accessibilityLabel ?? label` (`resolveRichTextEditorAccessibility`). On native the now-redundant visible `label` `Text` is hidden from
   assistive tech (`aria-hidden`) so the name isn't announced twice. **On web it stays exposed**:
   `react-native-enriched-html`'s web build renders a TipTap `EditorContent` and forwards no
   accessibility prop to the underlying `contenteditable` (only `enterkeyhint`), so the field itself
@@ -151,8 +151,8 @@ dropdown now does.
   close this gap.
 - **Toolbar toggle (pressed) state.** The 14 style-toggle buttons (all but the `image`/`mention`
   triggers, see `RichTextEditorToolbarItem.toggle`) pass `Button`'s `selected` prop, driven by the
-  same `activeActions` state that already drove the `variant="solid"` highlight — before this fix
-  the toggle was colour-only (WCAG 1.4.1) and announced nothing (4.1.2). `Button` itself resolves
+  same `activeActions` state that drives the `variant="solid"` highlight, so the toggle is never
+  colour-only (WCAG 1.4.1) and always announced (4.1.2). `Button` itself resolves
   `selected` into `aria-pressed` (web) / `accessibilityState.selected` (native), per
   `docs/PLATFORM-A11Y-PROPS.md`'s "genuinely diverge" case — RN has no `pressed` accessibility
   state at all. `image`/`mention` never receive `selected`: they open a picker, not toggle a style.
@@ -180,10 +180,8 @@ Every colour handed to the native `htmlStyle`/native props is a role lookup, nev
 
 ## Known gaps
 
-- **EAS Android dev-client build confirmed successful (build `22b8321f`, APK built) but NOT yet
-  verified on a physical device by the user.** Everything reported here is typecheck/build/unit-test
-  level — jest cannot render a native Fabric component, so nothing here claims the editor "works" on
-  device.
+- **Nothing here is device-verified.** Jest cannot render a native Fabric component, so the editor's
+  behaviour on device is a manual pass; the suite only covers the mocked surface.
 - `onChangeState.image.isBlocking` (the caret is somewhere an `<img>` can't go, e.g. inside a code
   block) is not honoured — the pick/upload still runs and native `addImage` then silently no-ops.
   Disabling the button on that flag is the follow-up.
@@ -218,8 +216,3 @@ Wrapped in `React.memo`. This component re-renders on every keystroke (`onChange
 
 No motion of its own — the editor's own visual state changes (toggle highlighting, focus ring) are
 instant, and the mention dropdown is a list, where per-row animation is forbidden.
-
-## 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.

package/lib/module/modules/rich-text-editor/RichTextEditor.js

@@ -19,8 +19,10 @@
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import { EnrichedTextInput } from "react-native-enriched-html";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { VirtualList } from "../../core/list/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Input } from "../input/index.js";
 import { Modal } from "../modal/index.js";
@@ -39,6 +41,10 @@ const MentionRow = /*#__PURE__*/memo(function MentionRow({
   onSelect
 }) {
   const handlePress = useCallback(() => onSelect(id, label), [onSelect, id, label]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const restingStyle = useMemo(() => [richTextEditorMentionRowStructure(theme), {
     backgroundColor: colors.mentionRowBackground
   }], [theme, colors.mentionRowBackground]);
@@ -55,6 +61,7 @@ const MentionRow = /*#__PURE__*/memo(function MentionRow({
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "menuitem",
     onPress: handlePress,
+    android_ripple: androidRipple,
     style: rowStyle,
     children: /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
@@ -65,8 +72,7 @@ const MentionRow = /*#__PURE__*/memo(function MentionRow({
 
 // Identical to `Input`/`Textarea`: the ring sits OUTSIDE the field, on the canvas, where
 // `border.focus` is the token proven ≥ 3:1.
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+
 function RichTextEditorImpl({
   defaultValue,
   placeholder,
@@ -284,7 +290,8 @@ function RichTextEditorImpl({
     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 linkBodyStyle = useMemo(() => ({
     rowGap: theme.space[4]
@@ -366,9 +373,10 @@ function RichTextEditorImpl({
           })
         })]
       }), focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: "rich-text-editor-focus-ring",
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: 'none'
+        }]
       })]
     }), /*#__PURE__*/_jsx(Modal, {
       visible: linkOpen,

package/lib/module/modules/rich-text-editor/RichTextEditor.variants.js

@@ -167,7 +167,7 @@ export function resolveRichTextEditorColors(colors) {
     cardBorder: colors.border.interactive,
     cardBorderFocus: colors.border.focus,
     text: colors.fg.default,
-    placeholder: colors.fg.muted,
+    placeholder: colors.fg.placeholder,
     cursor: colors.accent.solid,
     selection: colors.accent.subtle,
     mentionDropdownBackground: colors.bg.surface,
@@ -216,7 +216,7 @@ export function resolveRichTextEditorHtmlStyle(theme) {
     },
     codeblock: {
       color: c.fg.default,
-      borderRadius: theme.radii.base,
+      borderRadius: theme.radii.md,
       backgroundColor: c.bg.sunken
     },
     code: {
@@ -262,7 +262,8 @@ export const richTextEditorLayout = createThemedVariants(theme => ({
 export const richTextEditorCardStructure = createThemedVariants(theme => ({
   base: {
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 export const richTextEditorToolbarStructure = createThemedVariants(theme => ({
@@ -272,8 +273,9 @@ export const richTextEditorToolbarStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     padding: theme.space[2],
     borderBottomWidth: theme.borderWidths.thin,
-    borderTopLeftRadius: theme.radii.base - theme.borderWidths.thin,
-    borderTopRightRadius: theme.radii.base - theme.borderWidths.thin
+    borderTopLeftRadius: theme.radii.md - theme.borderWidths.thin,
+    borderTopRightRadius: theme.radii.md - theme.borderWidths.thin,
+    borderCurve: "continuous"
   }
 }));
 
@@ -299,7 +301,8 @@ export const richTextEditorMentionDropdownStructure = createThemedVariants(theme
     right: 0,
     maxHeight: 200,
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     zIndex: theme.zIndices.dropdown,
     ...theme.elevation.md
   }

package/lib/module/modules/rich-text-editor/RichTextEditorProps.js

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

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

@@ -0,0 +1,3 @@
+# save-bar/ — a floating dirty-state action bar
+
+Floating dirty-state action bar with safe-area padding.

package/lib/module/modules/save-bar/SaveBar.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../../theme/hooks.js";
+import { Button } from "../button/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SaveBar = /*#__PURE__*/memo(function SaveBar({
+  dirty,
+  onSave,
+  onDiscard,
+  saveLabel = "Save",
+  discardLabel = "Discard",
+  saving = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const barStyle = useMemo(() => ({
+    paddingHorizontal: theme.space[4],
+    paddingTop: theme.space[3],
+    paddingBottom: Math.max(theme.space[3], insets.bottom),
+    backgroundColor: theme.colors.bg.surface,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border.default,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: theme.space[2]
+  }), [theme, insets.bottom]);
+  if (!dirty) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [barStyle, style],
+    children: [onDiscard ? /*#__PURE__*/_jsx(Button, {
+      label: discardLabel,
+      variant: "ghost",
+      onPress: onDiscard,
+      disabled: saving
+    }) : null, /*#__PURE__*/_jsx(Button, {
+      label: saveLabel,
+      variant: "solid",
+      onPress: onSave,
+      loading: saving
+    })]
+  });
+});
+//# sourceMappingURL=SaveBar.js.map

package/lib/module/modules/save-bar/SaveBarProps.js

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

package/lib/module/modules/save-bar/index.js

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

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

@@ -12,6 +12,7 @@ content instead of `children`.
 | `Screen.variants.ts` | Pure resolver (`resolveScreenColors`) + themed structural resolvers + `ScreenEdge` / `ScreenState` unions. |
 | `index.ts` | Public surface: `Screen`, `ScreenProps`, `ScreenEdge`, `ScreenState`. |
 | `__tests__/Screen.test.ts` | Pure: colour mapping, default edges. |
+| `__tests__/Screen.dom.test.tsx` | Render under `react-dom` — guards the shell against web-only regressions. |
 | `__tests__/Screen.render.test.tsx` | Render: default loading slot, idle children, consumer `style` last. Mocks `core/a11y` via `jest.requireActual` + override, not a full replacement — the default `LoadingState`/`ErrorState` slots call `useAnnounce`, which a full-replacement mock would drop. |
 
 ## Props
@@ -19,7 +20,8 @@ content instead of `children`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `children` | `ReactNode` | — | Shown when `state="idle"`. |
-| `edges` | `ScreenEdge[]` | `["top"]` | Passed to `SafeAreaView`. |
+| `appBar` | `ReactNode` | — | Top header slot. Receives top safe-area inset; body omits `top` from `edges`. |
+| `edges` | `readonly ScreenEdge[]` | `["top"]` | Passed to `SafeAreaView`. |
 | `padded` | `boolean` | `false` | Adds theme padding around content. |
 | `keyboardAvoiding` | `boolean` | `false` | Wraps in `KeyboardAvoidingView`. |
 | `keyboardVerticalOffset` | `number` | `0` | Passed to `KeyboardAvoidingView`. |
@@ -29,6 +31,7 @@ content instead of `children`.
 | `loading` | `ReactNode` | `<LoadingState />` | Custom loading slot. |
 | `empty` | `ReactNode` | — | Compose `EmptyState` here. |
 | `error` | `ReactNode` | — | Compose `ErrorState` here. |
+| `scrollLinked` | `boolean` | `false` | With `appBar`, uses `Animated.ScrollView` and publishes `scrollY` for `AppBar` `scrollEffect`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost shell node. |
 
@@ -38,12 +41,18 @@ content instead of `children`.
   Screens whose main content is already a `FlatList` should attach `RefreshControl` to that list
   directly and omit `onRefresh` here.
 
+## App bar composition
+
+Pass `<AppBar … />` (or any header) as `appBar`. The shell paints `bg.canvas`, applies `top` safe
+area to the bar, and applies the remaining `edges` to the body — the pattern apps previously
+hand-rolled as `Screen` + `AppHeader`.
+
 ## Motion
 
-**None, deliberately.** Screen is a layout shell with no surface of its own to animate: a state
-swap (`idle` → `loading` → `error`) is the composed `LoadingState` / `EmptyState` / `ErrorState`
-block's business, and anything Screen could animate itself (a scroll-driven header, a state
-transition it owns) would need a new public prop. Consumers animate their own content.
+**Scroll link only.** `scrollLinked` publishes `scrollY` for a composed `AppBar`; the shell itself
+does not animate. Pull-to-refresh fires a light haptic as the refresh starts, before `onRefresh` (gated on
+reduce-motion and the provider haptics flag). State swaps (`idle` → `loading` → `error`) are handled
+by the composed `LoadingState` / `EmptyState` / `ErrorState` blocks, not by Screen.
 
 ## Performance