pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/image-viewer/ImageViewer.js

@@ -6,10 +6,11 @@
  */
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Animated, FlatList, Pressable, Share, StyleSheet, useWindowDimensions, View } from "react-native";
+import { Animated, FlatList, Platform, Pressable, Share, StyleSheet, useWindowDimensions, View } from "react-native";
 import { MediaImage } from "../../core/media/index.js";
 import { useEnterExit, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/Button.js";
 import { Modal } from "../modal/Modal.js";
 import { IMAGE_VIEWER_PAGE_PADDING } from "./ImageViewer.variants.js";
@@ -105,16 +106,22 @@ export const ImageViewer = /*#__PURE__*/memo(function ImageViewer({
     testID: testID ? `${testID}-page-${item.id}` : undefined
   }), [pageStyle, testID]);
   const activeBorder = theme.colors.accent.solid;
+  const thumbCount = imageItems.length;
   const renderThumb = useCallback(({
-    item
+    item,
+    index
   }) => /*#__PURE__*/_jsx(ImageViewerThumb, {
     id: item.id,
     uri: item.thumbUri ?? item.uri,
+    label: item.label,
+    position: index + 1,
+    total: thumbCount,
     active: item.id === currentId,
     activeBorder: activeBorder,
+    mode: theme.mode,
     onPress: handleThumbPress,
     testID: testID ? `${testID}-thumb-${item.id}` : undefined
-  }), [currentId, activeBorder, handleThumbPress, testID]);
+  }), [currentId, activeBorder, theme.mode, thumbCount, handleThumbPress, testID]);
   const bodyStyle = useMemo(() => ({
     gap: theme.space[3]
   }), [theme]);
@@ -180,8 +187,12 @@ const ImageViewerPage = /*#__PURE__*/memo(function ImageViewerPage({
 const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
   id,
   uri,
+  label,
+  position,
+  total,
   active,
   activeBorder,
+  mode,
   onPress,
   testID
 }) {
@@ -189,9 +200,25 @@ const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
   const thumbStyle = useMemo(() => [styles.thumb, active ? {
     borderColor: activeBorder,
     borderWidth: 2
-  } : null], [active, activeBorder]);
+  } : styles.thumbInactive], [active, activeBorder]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
+  // Border colour alone isn't a reliable selection cue (colour-blind users, low-vision) — the
+  // dimmed opacity on unselected thumbs is the redundant, non-colour signal (WCAG 1.4.1).
+  const imageStyle = useMemo(() => [styles.thumbImage, {
+    opacity: active ? 1 : 0.6
+  }], [active]);
+  const accessibilityLabel = label ? `${label}, image ${position} of ${total}` : `Image ${position} of ${total}`;
   return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      selected: active
+    },
     onPress: handlePress,
+    android_ripple: androidRipple,
     style: thumbStyle,
     children: /*#__PURE__*/_jsx(MediaImage, {
       testID: testID,
@@ -200,7 +227,7 @@ const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
       },
       contentFit: "cover",
       recyclingKey: uri,
-      style: styles.thumbImage
+      style: imageStyle
     })
   });
 });
@@ -227,6 +254,9 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     overflow: "hidden"
   },
+  thumbInactive: {
+    borderWidth: 0
+  },
   thumbImage: {
     width: "100%",
     height: "100%"

package/lib/module/modules/image-viewer/MODULE.md

@@ -9,6 +9,12 @@ Modal image gallery with paging and thumbnails. Heavy module — subpath only.
   affordance is the backdrop, so on that branch a keyboard user previously had no way to close it at
   all. No keyboard code lives here — `__tests__/ImageViewer.keyboard.web.test.tsx` asserts the
   inheritance.
+- **Thumbnail strip (1.3.1 / 1.4.1 / 4.1.2)** — each `ImageViewerThumb` carries
+  `accessibilityRole="button"`, `accessibilityState={{ selected: active }}`, and an
+  `accessibilityLabel` built from the item's own `label` plus its position ("Photo, image 2 of 5"),
+  never a bare unlabelled tap target. The active thumb is also marked by a dimmed opacity on every
+  OTHER thumb, not by `activeBorder` colour alone — a colour-blind or low-vision user can tell which
+  image is open without relying on hue.
 
 ## Motion contract
 

package/lib/module/modules/input/Input.js

@@ -10,9 +10,10 @@
  * fades in and out. Both honour reduce-motion through `useMotion()`.
  */
 
-import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
 import { useAnnounce } from "../../core/a11y/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -41,6 +42,7 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   } = props;
   const theme = useTheme();
   const motion = useMotion();
+  const [focused, setFocused] = useState(false);
   const spec = INPUT_SIZES[size];
   const statusColors = resolveInputStatus(theme.colors, status);
   const a11y = resolveInputAccessibility({
@@ -78,9 +80,15 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   }, [motion, ringOpacity]);
   useEffect(() => () => ringAnimation.current?.stop(), []);
   const handleFocus = useCallback(() => {
-    if (!disabled) setRingVisible(true);
+    if (!disabled) {
+      setFocused(true);
+      setRingVisible(true);
+    }
   }, [disabled, setRingVisible]);
-  const handleBlur = useCallback(() => setRingVisible(false), [setRingVisible]);
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+    setRingVisible(false);
+  }, [setRingVisible]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.default,
@@ -88,9 +96,13 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   }], [theme]);
   const fieldStyle = useMemo(() => [inputStructure(theme, {
     size
-  }), {
+  }), focused ? {
+    borderWidth: 2,
+    borderColor: theme.colors.accent.solid,
+    backgroundColor: withAlpha(theme.colors.accent.solid, 0.04)
+  } : {
     borderColor: statusColors.border
-  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled]);
+  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled, focused]);
   const focusRingStyle = useMemo(() => ({
     position: "absolute",
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
@@ -99,7 +111,8 @@ export const Input = /*#__PURE__*/memo(function Input(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 inputTextStyle = useMemo(() => [{
     flex: 1,
@@ -143,7 +156,7 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
         value: value,
         onChangeText: onChangeText,
         placeholder: placeholder,
-        placeholderTextColor: theme.colors.fg.muted,
+        placeholderTextColor: theme.colors.fg.placeholder,
         secureTextEntry: secureTextEntry,
         autoComplete: autoComplete,
         importantForAutofill: autoComplete === "off" ? "no" : undefined,

package/lib/module/modules/input/Input.variants.js

@@ -28,22 +28,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const INPUT_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)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 /**
@@ -110,7 +110,8 @@ export const inputStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[2]
   },
   variants: {

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

@@ -125,3 +125,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/list-item/ListItem.js

@@ -1,16 +1,17 @@
 "use strict";
 
 /**
- * ListItem — a row primitive. It is rendered AS a list cell at scale, so it carries no mount
- * animation and no loop: the only motion is `usePressMotion`, which starts on touch and runs on the
- * native driver. The pressable root is an animated `Pressable` rather than an `Animated.View`
- * wrapper so a 5000-row list pays for no extra node.
+ * ListItem — a row primitive. Press feedback uses `usePressState` (scale + state-layer overlay).
  */
 
 import { memo, useMemo } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
-import { usePressMotion } from "../../core/motion/index.js";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { concentric } from "../../core/style/index.js";
+import { rippleColor as androidRippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
 import { listItemBodyStructure, listItemDotStructure, listItemStructure, resolveListItemAccessibility, resolveListItemColors } from "./ListItem.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -26,7 +27,8 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
 }) {
   const theme = useTheme();
   const pressable = onPress !== undefined;
-  const press = usePressMotion(!pressable);
+  const press = usePressState(!pressable);
+  const leadingRadius = useMemo(() => concentric(theme.radii.lg, theme.space[4]), [theme.radii.lg, theme.space]);
   const colors = useMemo(() => resolveListItemColors(theme.colors, unread), [theme.colors, unread]);
   const a11y = useMemo(() => resolveListItemAccessibility({
     title,
@@ -36,57 +38,77 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
   const baseStyle = useMemo(() => [listItemStructure(theme), {
     backgroundColor: colors.background
   }, style], [theme, colors, style]);
-  // `style` stays last; the press style holds only opacity/transform, which `LayoutStyle` cannot name.
   const pressableStyle = useMemo(() => [listItemStructure(theme), {
-    backgroundColor: colors.background
-  }, press.style, style], [theme, colors, press.style, style]);
+    backgroundColor: colors.background,
+    overflow: "hidden"
+  }, press.animatedStyle, style], [theme, colors, press.animatedStyle, style]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const androidRipple = useMemo(() => {
+    if (!pressable || Platform.OS !== "android") return undefined;
+    return {
+      color: androidRippleColor(theme.mode),
+      borderless: false
+    };
+  }, [pressable, theme.mode]);
   const dotStyle = useMemo(() => [listItemDotStructure(theme), {
     backgroundColor: colors.dot
   }], [theme, colors]);
   const bodyStyle = useMemo(() => listItemBodyStructure(theme), [theme]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(unread ? theme.fontWeights.semibold : theme.fontWeights.medium), {
-    fontSize: theme.fontSizes.md,
-    color: colors.title
-  }], [theme, unread, colors]);
-  const subtitleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
-    fontSize: theme.fontSizes.sm,
-    color: colors.subtitle
-  }], [theme, colors]);
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [unread && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-dot`,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
       style: dotStyle
-    }), leading, /*#__PURE__*/_jsxs(View, {
+    }), leading !== undefined && /*#__PURE__*/_jsx(View, {
+      style: {
+        borderRadius: leadingRadius,
+        borderCurve: "continuous",
+        overflow: "hidden"
+      },
+      children: leading
+    }), /*#__PURE__*/_jsxs(View, {
       style: bodyStyle,
       children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        weight: unread ? "semibold" : "medium",
         numberOfLines: 1,
-        style: titleStyle,
         children: title
       }), subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
         numberOfLines: 2,
-        style: subtitleStyle,
         children: subtitle
       })]
     }), trailing]
   });
   if (!pressable) {
-    return /*#__PURE__*/_jsx(View, {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
       testID: testID,
       style: baseStyle,
       children: body
     });
   }
-  return /*#__PURE__*/_jsx(AnimatedPressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: a11y.accessibilityLabel,
     onPress: onPress,
-    onPressIn: press.onPressIn,
-    onPressOut: press.onPressOut,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    android_ripple: androidRipple,
     style: pressableStyle,
-    children: body
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), body]
   });
 });
 //# sourceMappingURL=ListItem.js.map

package/lib/module/modules/list-item/ListItem.variants.js

@@ -1,13 +1,15 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * Pure resolvers for ListItem — no React, so the WCAG tests import this directly (mocking only
  * `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/floatingSurface.native.js";
 export const LIST_ITEM_DOT_SIZE = 8;
-export const LIST_ITEM_MIN_HEIGHT = 44;
+export const LIST_ITEM_MIN_HEIGHT = 56;
 export function resolveListItemColors(colors, unread) {
   return {
     background: unread ? colors.bg.surface : undefined,
@@ -34,7 +36,8 @@ export const listItemStructure = createThemedVariants(theme => ({
     columnGap: theme.space[3],
     minHeight: LIST_ITEM_MIN_HEIGHT,
     paddingVertical: theme.space[3],
-    paddingHorizontal: theme.space[4]
+    paddingHorizontal: theme.space[4],
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 export const listItemBodyStructure = createThemedVariants(theme => ({
@@ -43,6 +46,12 @@ export const listItemBodyStructure = createThemedVariants(theme => ({
     rowGap: theme.space[1]
   }
 }));
+export function listItemRaisedStyle(theme) {
+  return {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  };
+}
 export const listItemDotStructure = createThemedVariants(theme => ({
   base: {
     width: LIST_ITEM_DOT_SIZE,

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

@@ -3,9 +3,8 @@
 `ListItem` renders one row for notification lists, inboxes, and settings screens: optional
 `leading`/`trailing` nodes around a title + subtitle column. `unread` adds an `accent.solid` dot
 and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `bg.selected`, because
-`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set
-(`bg.sunken` pressed fill — measured, `fg.default` fails AA on `bg.hover` on 4 light brands),
-a plain `View` otherwise.
+`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set uses
+`usePressState` (scale + state-layer overlay on the native driver); a plain `View` otherwise.
 
 ## Files
 

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

@@ -16,7 +16,7 @@ unclosed fence swallows the rest of the input as code.
 | `index.ts` | Public surface: `Markdown`, `MarkdownProps`, `parseMarkdown`, node types. |
 | `__tests__/parseMarkdown.test.ts` | Pure: every block/inline form + malformed-input robustness. |
 | `__tests__/Markdown.test.ts` | Pure: WCAG contrast for text/link/quote roles (all brands × modes). |
-| `__tests__/Markdown.render.test.tsx` | Render: headings, lists, code, link press wiring, and every heading of a 60-section document reaching the tree (the rotor guard — see Performance). |
+| `__tests__/Markdown.render.test.tsx` | Render: headings, lists, code, link press wiring, every heading of a 60-section document reaching the tree (the rotor guard — see Performance), and the block/list-item safety caps (below-cap unchanged, above-cap capped + affordance reveals everything). |
 | `__tests__/Markdown.dom.test.tsx` | Real DOM (`jest.web.config.js`): a `#`/`##`/`###` document renders real `<h1>`/`<h2>`/`<h3>` tags, not three `<h1>`s. |
 
 ## Props
@@ -64,8 +64,15 @@ The parse is `useMemo`'d on `content`; the **render tree** is the other half of
   The cost is bounded by the content: blocks come from parsing one `content` string, which is a
   chat message or a notes body, not an unbounded dataset. If a caller ever does need a virtualized
   document, that is a different component with a different accessibility contract.
+- **Safety caps exist for pathological/misuse input only — they do NOT contradict the above.**
+  `MAX_RENDERED_BLOCKS` (300) and `MAX_LIST_ITEMS` (50, per list block, independent of the block
+  cap) bound a degenerate `content` string; below either cap a document/list renders exactly as
+  before. Above it, a `Button` ("Show full document" / "+N more items") mounts the real, full tree
+  on press — never a re-introduction of windowing, so the rotor contract holds once expanded.
 - Links render through a memo'd `MarkdownLink` so no per-link closure is rebuilt each render.
 
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+
+- **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/markdown/Markdown.js

@@ -7,8 +7,9 @@
  * VirtualizedList is an error in its own right.
  */
 
-import { Fragment, memo, useCallback, useMemo } from "react";
+import { Fragment, memo, useCallback, useMemo, useState } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
+import { Button } from "../button/index.js";
 import { HeadingText } from "../../core/heading/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { markdownBlockquoteStructure, markdownCodeBlockStructure, markdownListRowStructure, markdownListStructure, markdownStructure, resolveMarkdownColors, resolveMarkdownHeading } from "./Markdown.variants.js";
@@ -18,6 +19,17 @@ const MONO_FONT = Platform.select({
   ios: "Menlo",
   default: "monospace"
 });
+
+/**
+ * Safety caps for pathological/misuse input, not windowing (see MODULE.md "Performance") — below
+ * these numbers a document renders exactly as before; above, an affordance mounts the real, full
+ * tree on press, so the WCAG 2.4.1 rotor contract holds once expanded.
+ */
+// Comfortably covers long-form docs/notes (the existing 60-heading test is a fifth of it) while
+// bounding a document of thousands of blocks.
+export const MAX_RENDERED_BLOCKS = 300;
+// Covers realistic checklists/notes lists; bounds a single oversized list regardless of doc length.
+export const MAX_LIST_ITEMS = 50;
 const MarkdownLink = /*#__PURE__*/memo(function MarkdownLink({
   content,
   url,
@@ -75,6 +87,9 @@ const MarkdownBlock = /*#__PURE__*/memo(function MarkdownBlock({
   colors,
   onLinkPress
 }) {
+  // Called unconditionally (rules of hooks) though only the "list" case below reads it.
+  const [itemsExpanded, setItemsExpanded] = useState(false);
+  const expandItems = useCallback(() => setItemsExpanded(true), []);
   switch (block.type) {
     case "heading":
       {
@@ -116,25 +131,35 @@ const MarkdownBlock = /*#__PURE__*/memo(function MarkdownBlock({
         })
       });
     case "list":
-      return /*#__PURE__*/_jsx(View, {
-        style: markdownListStructure(theme),
-        children: block.items.map((item, itemIndex) => /*#__PURE__*/_jsxs(View, {
-          style: markdownListRowStructure(theme),
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.md,
-              color: colors.listMarker
-            }],
-            children: block.ordered ? `${itemIndex + 1}.` : "•"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.listContent, {
-              fontSize: theme.fontSizes.md,
-              color: colors.text
-            }],
-            children: renderInline(item, theme, colors, onLinkPress)
+      {
+        const visibleItems = itemsExpanded || block.items.length <= MAX_LIST_ITEMS ? block.items : block.items.slice(0, MAX_LIST_ITEMS);
+        const hiddenCount = block.items.length - visibleItems.length;
+        return /*#__PURE__*/_jsxs(View, {
+          style: markdownListStructure(theme),
+          children: [visibleItems.map((item, itemIndex) => /*#__PURE__*/_jsxs(View, {
+            style: markdownListRowStructure(theme),
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+                fontSize: theme.fontSizes.md,
+                color: colors.listMarker
+              }],
+              children: block.ordered ? `${itemIndex + 1}.` : "•"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.listContent, {
+                fontSize: theme.fontSizes.md,
+                color: colors.text
+              }],
+              children: renderInline(item, theme, colors, onLinkPress)
+            })]
+          }, itemIndex)), hiddenCount > 0 && /*#__PURE__*/_jsx(Button, {
+            variant: "link",
+            tone: "neutral",
+            size: "sm",
+            label: `+${hiddenCount} more items`,
+            onPress: expandItems
           })]
-        }, itemIndex))
-      });
+        });
+      }
     default:
       return /*#__PURE__*/_jsx(Text, {
         style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
@@ -155,15 +180,25 @@ export const Markdown = /*#__PURE__*/memo(function Markdown({
   const colors = useMemo(() => resolveMarkdownColors(theme.colors), [theme.colors]);
   const blocks = useMemo(() => parseMarkdown(content), [content]);
   const rootStyle = useMemo(() => [markdownStructure(theme), style], [theme, style]);
-  return /*#__PURE__*/_jsx(View, {
+  const [blocksExpanded, setBlocksExpanded] = useState(false);
+  const expandBlocks = useCallback(() => setBlocksExpanded(true), []);
+  const visibleBlocks = blocksExpanded || blocks.length <= MAX_RENDERED_BLOCKS ? blocks : blocks.slice(0, MAX_RENDERED_BLOCKS);
+  const hiddenBlockCount = blocks.length - visibleBlocks.length;
+  return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: rootStyle,
-    children: blocks.map((block, index) => /*#__PURE__*/_jsx(MarkdownBlock, {
+    children: [visibleBlocks.map((block, index) => /*#__PURE__*/_jsx(MarkdownBlock, {
       block: block,
       theme: theme,
       colors: colors,
       onLinkPress: onLinkPress
-    }, `block-${index}-${block.type}`))
+    }, `block-${index}-${block.type}`)), hiddenBlockCount > 0 && /*#__PURE__*/_jsx(Button, {
+      variant: "outline",
+      tone: "neutral",
+      size: "sm",
+      label: `Show full document (${hiddenBlockCount} more)`,
+      onPress: expandBlocks
+    })]
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/markdown/Markdown.variants.js

@@ -49,7 +49,8 @@ export const markdownStructure = createThemedVariants(theme => ({
 }));
 export const markdownCodeBlockStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     padding: theme.space[3]
   }
 }));

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

@@ -61,6 +61,7 @@ row size, since an action list's row height isn't a caller-facing choice.
   menu row is never icon-only.
 - **2.3.3** — the menu's `animationType` is `"none"` instead of `"fade"` when `useReducedMotion()`
   is true, and the sheet's own scale/lift `setValue`s straight to rest (`Menu.motion.test.tsx`).
+  Row presses use `usePressState` (scale + state-layer overlay).
 - Backdrop press closes the menu without calling any item's `onPress` — dismissal and selection are
   two distinct code paths (`closeMenu` vs. `selectItem`), so a stray tap can never accidentally fire
   an action.
@@ -127,6 +128,16 @@ supplied per row by `useSpaceActivation` (RNW's `isValidKeyPress` needs a `butto
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `openMenu`/`closeMenu` are `useCallback`'d, and the inline `onPress` previously injected into the caller-supplied `trigger` via `cloneElement` on every render is extracted to `handleTriggerPress` (`useCallback`, deps `[trigger, openMenu]`) — `trigger` is a consumer-supplied child (typically this library's own `Button`), so a fresh callback there would defeat its memo. `selectItem` and the per-row `onPress` stay inline: they go to `Pressable`/`Icon` (host elements / primitive props), not a memoized child. The sheet subtree (backdrop + rows) is built only while `open` — a closed menu mounts nothing beyond the trigger. Rows are rendered with a plain `.map()` inside a `ScrollView` (not `FlatList`): action menus are short, and mounting a fresh `VirtualizedList` on the same commit as the modal fade-in was measurable open-time cost (~2× p50 in a Jest open benchmark for a 2-item list) with no windowing benefit at current call sites — `ScrollView` has no such per-open setup and still lets a list taller than the sheet's `maxHeight: 320` scroll, which a bare `.map()` with no scroll container would silently lose. Rows get `bg.sunken` press feedback (`resolveMenuRowPressedBackground`, same non-`bg.hover` reasoning as `RadioGroup`/`Accordion`), measured in `Menu.test.ts`.
 
+## Round 5 motion
+
+Dropped the ad hoc reanimated `FadeInDown` layer (per-row entrance, and the sheet's own former
+entrance-only Reanimated bounce). `enter` (`core/motion`) now drives the sheet's scale/lift/opacity
+AND the backdrop's fade together, and the web-portal path (no RN `<Modal>`) stays `mounted` through
+a real timed exit instead of unmounting instantly — the RNModal path is unaffected, still gated on
+`open` directly, since RN's own `animationType` already owns that surface's exit. `BACKDROP_SCRIM`'s
+opacity now comes from the shared `MOTION_TRANSFORM.scrimOpacity` (previously a mismatched `0x99`
+against Modal/Drawer/BottomSheet's `0x80`).
+
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.