pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/typing-indicator/TypingIndicator.js

@@ -0,0 +1,98 @@
+"use strict";
+
+/**
+ * TypingIndicator — three animated dots for "someone is typing". Under reduced motion, and on any
+ * tier that can't afford decorative motion, the dots are static (WCAG 2.3.3) — the accessible
+ * "Typing" label is the real signal, exactly as `Spinner` treats its own frozen glyph.
+ *
+ * The consumer mounts and unmounts this component as typing starts and stops, so "Typing" is spoken
+ * ONCE per mount via `useAnnounce` (WCAG 4.1.3) — not on a timer, and not once per pulse: the effect
+ * fires once per mounted instance, and `useAnnounce`'s own dedup would silence a repeat regardless.
+ * A screen-reader user who is not focused on the thread would otherwise learn someone is typing only
+ * by chance, on their next swipe past this element.
+ *
+ * Each dot loops a BARE `motion.timing` over a 0→1 driver and interpolates that into the
+ * min→max→min opacity pulse. `Animated.loop` only runs natively (`_startNativeLoop`) when the
+ * animation it wraps reports `_isUsingNativeDriver()`, which `Animated.sequence` returns `false`
+ * for unconditionally — a looped sequence therefore restarts every leg from the JS thread, forever.
+ * The stagger is `TimingOptions.delay` (one JS timeout per dot at start-up) rather than
+ * `Animated.delay`, which is itself a `useNativeDriver: false` timing.
+ */
+
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Animated, View } from "react-native";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveTypingIndicatorAccessibility, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY, typingDotStructure, typingIndicatorStructure } from "./TypingIndicator.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DOT_COUNT = 3;
+/** The driver's midpoint: the peak of the pulse, and the resting value while motion is off. */
+const PULSE_PEAK = 0.5;
+export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const a11y = resolveTypingIndicatorAccessibility();
+  useAnnounce(a11y.accessibilityLabel);
+  const drivers = useRef(Array.from({
+    length: DOT_COUNT
+  }, () => new Animated.Value(PULSE_PEAK))).current;
+  const loops = useRef([]);
+  const cycleMs = motion.duration("deliberate");
+  const pulsing = motion.decorative && cycleMs > 0;
+  useEffect(() => {
+    loops.current.forEach(loop => loop.stop());
+    loops.current = [];
+    if (!pulsing) {
+      drivers.forEach(driver => driver.setValue(PULSE_PEAK));
+      return undefined;
+    }
+    loops.current = drivers.map((driver, index) => {
+      // Each iteration replays from wherever the driver sits when the loop starts.
+      driver.setValue(0);
+      const loop = Animated.loop(motion.timing(driver, 1, {
+        duration: "deliberate",
+        delay: index * cycleMs / DOT_COUNT
+      }));
+      loop.start();
+      return loop;
+    });
+    return () => {
+      loops.current.forEach(loop => loop.stop());
+      loops.current = [];
+    };
+  }, [drivers, pulsing, cycleMs, motion]);
+  useEffect(() => () => loops.current.forEach(loop => loop.stop()), []);
+  const dotColor = theme.colors.fg.muted;
+  const dotStyles = useMemo(() => {
+    const base = [typingDotStructure(theme, {
+      size
+    }), {
+      backgroundColor: dotColor
+    }];
+    return drivers.map(driver => [base, {
+      opacity: driver.interpolate({
+        inputRange: [0, PULSE_PEAK, 1],
+        outputRange: [TYPING_DOT_MIN_OPACITY, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY]
+      })
+    }]);
+  }, [theme, size, dotColor, drivers]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: a11y.accessible,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    style: [typingIndicatorStructure(theme, {
+      size
+    }), style],
+    children: dotStyles.map((dotStyle, index) => /*#__PURE__*/_jsx(Animated.View, {
+      testID: testID === undefined ? undefined : `${testID}-dot-${index}`,
+      style: dotStyle
+    }, index))
+  });
+});
+//# sourceMappingURL=TypingIndicator.js.map

package/lib/module/modules/typing-indicator/TypingIndicator.variants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const TYPING_DOT_SIZES = {
+  sm: 6,
+  md: 8
+};
+export const TYPING_DOT_MIN_OPACITY = 0.3;
+export const TYPING_DOT_MAX_OPACITY = 1;
+export const typingIndicatorStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[1],
+    paddingVertical: theme.space[2],
+    paddingHorizontal: theme.space[3]
+  },
+  variants: {
+    size: {
+      sm: {},
+      md: {}
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+export const typingDotStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.full
+  },
+  variants: {
+    size: {
+      sm: {
+        width: TYPING_DOT_SIZES.sm,
+        height: TYPING_DOT_SIZES.sm
+      },
+      md: {
+        width: TYPING_DOT_SIZES.md,
+        height: TYPING_DOT_SIZES.md
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+export function resolveTypingIndicatorAccessibility() {
+  return {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: "Typing"
+  };
+}
+//# sourceMappingURL=TypingIndicator.variants.js.map

package/lib/module/modules/typing-indicator/index.js

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

package/lib/module/modules/unread-badge/MODULE.md

@@ -0,0 +1,20 @@
+# unread-badge/ — compact unread count pill
+
+`UnreadBadge` shows a danger-toned count pill, clamped to `9+`. Returns `null` when `count` is 0.
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `count` | `number` | — | Required. Hidden when `<= 0`. |
+| `size` | `sm \| md` | `md` | Closed union. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, last in array. |
+| `testID` | `string` | — | |
+
+## Files
+
+| File | Role |
+|------|------|
+| `UnreadBadge.tsx` | Component. |
+| `UnreadBadge.variants.ts` | Resolvers + structure. |
+| `index.ts` | Public surface. |

package/lib/module/modules/unread-badge/UnreadBadge.js

@@ -0,0 +1,45 @@
+"use strict";
+
+/**
+ * UnreadBadge — a compact count pill for chat/notification overflow ("9+"). Renders nothing when
+ * `count` is 0. Positioned by the consumer (typically absolute on an icon parent).
+ */
+
+import { memo } from "react";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { formatUnreadCount, resolveUnreadBadgeAccessibility, resolveUnreadBadgeColors, unreadBadgeStructure, UNREAD_BADGE_SIZES } from "./UnreadBadge.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const UnreadBadge = /*#__PURE__*/memo(function UnreadBadge({
+  count,
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  if (count <= 0) return null;
+  const colors = resolveUnreadBadgeColors(theme.colors);
+  const a11y = resolveUnreadBadgeAccessibility({
+    count
+  });
+  const spec = UNREAD_BADGE_SIZES[size];
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: a11y.accessible,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    style: [unreadBadgeStructure(theme, {
+      size
+    }), {
+      backgroundColor: colors.fill
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.bold), {
+        fontSize: spec.fontSize,
+        color: colors.text
+      }],
+      children: formatUnreadCount(count)
+    })
+  });
+});
+//# sourceMappingURL=UnreadBadge.js.map

package/lib/module/modules/unread-badge/UnreadBadge.variants.js

@@ -0,0 +1,66 @@
+"use strict";
+
+/**
+ * UnreadBadge style resolution — structure in themed resolvers, colour from role tokens.
+ * Free of React so WCAG tests import directly.
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const UNREAD_BADGE_SIZES = {
+  sm: {
+    minWidth: 16,
+    height: 16,
+    fontSize: 10,
+    paddingHorizontal: 3
+  },
+  md: {
+    minWidth: 20,
+    height: 20,
+    fontSize: 11,
+    paddingHorizontal: 4
+  }
+};
+export const UNREAD_BADGE_MAX_DISPLAY = 9;
+export function formatUnreadCount(count) {
+  if (count > UNREAD_BADGE_MAX_DISPLAY) return `${UNREAD_BADGE_MAX_DISPLAY}+`;
+  return String(count);
+}
+export function resolveUnreadBadgeColors(colors) {
+  return {
+    fill: colors.status.danger.solid,
+    text: colors.status.danger.onSolid
+  };
+}
+export function resolveUnreadBadgeAccessibility(input) {
+  const label = input.count > UNREAD_BADGE_MAX_DISPLAY ? `${UNREAD_BADGE_MAX_DISPLAY + 1} or more unread` : `${input.count} unread`;
+  return {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: label
+  };
+}
+export const unreadBadgeStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.full
+  },
+  variants: {
+    size: {
+      sm: {
+        minWidth: UNREAD_BADGE_SIZES.sm.minWidth,
+        height: UNREAD_BADGE_SIZES.sm.height,
+        paddingHorizontal: UNREAD_BADGE_SIZES.sm.paddingHorizontal
+      },
+      md: {
+        minWidth: UNREAD_BADGE_SIZES.md.minWidth,
+        height: UNREAD_BADGE_SIZES.md.height,
+        paddingHorizontal: UNREAD_BADGE_SIZES.md.paddingHorizontal
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+//# sourceMappingURL=UnreadBadge.variants.js.map

package/lib/module/modules/unread-badge/index.js

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

package/lib/module/test/mocks/flashList.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { FlatList } from 'react-native';
+export const FlashList = FlatList;
+//# sourceMappingURL=flashList.js.map

package/lib/module/test/perfHelpers.js

@@ -0,0 +1,18 @@
+"use strict";
+
+/** Shared helpers for *.perf.test.tsx — mounted-row bounds and render-count guards. */
+
+export const PERF_DATASET_SIZE = 10_000;
+export const PERF_MAX_MOUNTED_ROWS = 200;
+export function makeIndexedDataset(size) {
+  return Array.from({
+    length: size
+  }, (_, index) => ({
+    id: `row-${index}`,
+    label: `Row ${index + 1}`
+  }));
+}
+export function countByTestIdPrefix(queryAllByTestId, prefix) {
+  return queryAllByTestId(new RegExp(`^${prefix}`)).length;
+}
+//# sourceMappingURL=perfHelpers.js.map

package/lib/module/theme/MODULE.md

@@ -8,7 +8,9 @@ hooks components read. It sits on top of three siblings — `tokens/` (the copy-
 and holds React state — none of which may appear in `tokens/`. It mirrors web's `Theme/provider/`
 in *shape and export names* (`PixelizeProvider`, `useThemeMode`), not byte-for-byte.
 
-## Public surface (`pixelize-native-library/theme`)
+`Theme` includes `elevatedSurfaces` (dark-mode background steps) when resolved by the provider.
+
+## Public surface
 
 | Export | Kind | Purpose |
 |---|---|---|
@@ -85,3 +87,9 @@ mode's — same adapter, separate key, so a plain-string storage slot never has
 Brand's existing fully-controlled-prop behavior (reactive to a changing `brand` prop, tested since
 before persistence existed) is preserved on top rather than replaced — see the `brand?` prop note
 above.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/theme/hooks.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Lightweight theme hooks — no PixelizeProvider, no palette barrels.
+ * Component modules import from here instead of the theme barrel.
+ */
+
+export { useTheme } from "./provider/useTheme.js";
+export { useThemeColors } from "./provider/useThemeColors.js";
+export { useThemeMode } from "./provider/useThemeMode.js";
+//# sourceMappingURL=hooks.js.map

package/lib/module/theme/index.js

@@ -6,10 +6,7 @@
  * this subpath is intentionally the small, runtime-facing layer an app wires once at its root.
  */
 
-export { PixelizeProvider, useTheme, useThemeColors, useThemeMode, createAsyncStorageAdapter } from "./provider/index.js";
-
-// Resolved-colour types, for annotating a value pulled from `useThemeColors()`.
-
-// The brand catalogue, for building a theme picker.
-export { themeNames, DEFAULT_THEME } from "./tokens/brands/index.js";
+export { PixelizeProvider, useTheme, useThemeColors, useThemeMode, createAsyncStorageAdapter, THEME_NAMES, DEFAULT_THEME, loadPalette, loadPaletteSync } from "./provider/index.js";
+/** @deprecated Use THEME_NAMES from this module instead. */
+export { THEME_NAMES as themeNames } from "./provider/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/platform/MODULE.md

@@ -17,7 +17,10 @@ platform values, so the token says `1` / `600` and this layer resolves it.
 |---|---|---|
 | `rem(n)` | `number` | Identity — RN lengths are already DP. Web returns `n/16 + 'rem'`. |
 | `hairline` | `number` | `StyleSheet.hairlineWidth` — density-dependent, resolved at runtime. |
-| `elevation(token)` | `ElevationStyle` | `ElevationToken` → RN shadow style props. |
+| `highlight(level, mode)` | `BoxShadowArray` | Mode-aware inset top-edge highlight. |
+| `highlightLevels(level, mode)` | `BoxShadowArray` | Alias of `highlight` — never hardcodes light palette. |
+| `floatingBackground(theme, level)` | `string` | Light: role bg; dark: `elevatedSurfaces` step. |
+| `floatingSurfaceStyle(theme, level)` | `ViewStyle` | `elevation` + `highlight` + `borderCurve`. |
 | `interFontFamilies` | `Record<FontWeightValue, string>` | Weight value (`'400'`…`'700'`) → Inter face name. |
 | `systemFontFamily` | `string` | `System` (iOS) / `sans-serif` (Android). |
 | `fontStyleForWeight(weight, interLoaded?)` | `FontStyleForWeight` | Weight value → `{fontFamily}` or system fallback. |
@@ -29,7 +32,16 @@ Types: `ElevationStyle`, `FontWeightValue` (`= (typeof fontWeights)[keyof typeof
 
 ## Key behaviours
 
-### Elevation uses the legacy shadow props, not `boxShadow`
+### Elevation emits full `boxShadow` stacks (New Arch peer >= 0.82)
+
+`elevation(token)` maps every `layers[]` entry to `boxShadow` plus `elevation` for Android
+low-API z-order. `highlight()` adds inset top-edge bands; `composeBoxShadow()` merges outset and
+inset. `springs` exports Material 3 physics triples for Reanimated 4.5. `elevatedSurfaces()` adds
+dark-mode surface steps on `Theme.elevatedSurfaces`. `STATE_LAYER_OPACITY` holds press/focus scrims.
+
+Legacy shadow-prop documentation below is superseded for native — kept for web context only.
+
+### Elevation uses the legacy shadow props on web only
 
 `boxShadow` is **New-Architecture-only**. Our peer range (RN >= 0.79) still allows
 `newArchEnabled=false`, where `boxShadow` renders **nothing**. The legacy props map straight to the
@@ -100,3 +112,9 @@ sunrise/sunset and via `Appearance.setColorScheme()`.
 
 - `spread` unsupported (above).
 - Android shadow tint requires API 28+; below that colour is ignored by the platform.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/theme/platform/elevation.native.js

@@ -1,60 +1,18 @@
 "use strict";
 
 import { Platform } from 'react-native';
-
-/**
- * The style props an elevation resolves to. A `Pick` rather than `ViewStyle` so a future RN
- * shadow prop cannot silently widen what this function is allowed to emit.
- */
-
-/**
- * Resolve an elevation token to RN style props.
- *
- * Uses the legacy shadow props over `boxShadow` because `boxShadow` is New-Architecture-only, and
- * our peer range (RN >= 0.79) still lets a consumer ship `newArchEnabled=false` — on which
- * `boxShadow` renders nothing at all. The legacy props map straight to the platform APIs and are
- * not deprecated, so they are the only path that works on both architectures. react-native-web's
- * style preprocessor converts these same legacy props into a real CSS `box-shadow`, so the `web`
- * branch below rides that conversion rather than emitting `boxShadow` itself.
- *
- * An elevation token is a STACK of layers (web needs both an ambient and a contact shadow per
- * step), but legacy RN shadow props can only express one. This renders `layers[0]` — the dominant
- * layer — and drops the rest. That is an honest limit of the legacy path, not a token compromise:
- * a future `boxShadow`-only resolver (new-arch-only consumers) can render every layer.
- *
- * `layer.spread` is dropped — neither legacy platform API exposes it (RN implements it by
- * insetting a custom shadowPath). The ramp's `md`/`lg` carry a negative spread to tighten the
- * shadow on web, so those two steps read marginally wider here. Accepted: honouring it would mean
- * hand-drawing a shadow layer per view.
- *
- * Returns one of three shapes: `ios`, `android` (RN's `default` branch — Android reads the numeric
- * `elevation` prop and ignores offset/opacity/radius), and `web`. `web` MUST stay its own explicit
- * key: without it, react-native-web falls through to `default` (the Android shape), whose only
- * meaningful field — `elevation` — react-native-web silently ignores (it is Android-only), so the
- * shadow renders as nothing at all.
- */
 export function elevation(token) {
   const layer = token.layers[0];
   return Platform.select({
     ios: {
       shadowColor: layer.color,
-      // Always explicit: iOS defaults shadowOffset to (0, -3), not (0, 0).
       shadowOffset: {
         width: layer.x,
         height: layer.y
       },
-      // iOS multiplies shadowOpacity by the colour's own alpha, so 1 lets #rrggbbaa carry the
-      // translucency by itself — and keeps one colour value correct on both platforms.
       shadowOpacity: 1,
-      // Halved because iOS renders a given shadowRadius heavier than the same CSS blur, so an
-      // unhalved radius reads darker and wider than the web token this mirrors.
       shadowRadius: layer.blur / 2
     },
-    // Same legacy shadow-prop shape as iOS, but WITHOUT the halving above: that halving corrects
-    // for iOS rendering a given shadowRadius heavier than the same CSS blur, which is an iOS
-    // quirk, not a web one. The token's `blur` already IS the original web/CSS value (see
-    // `elevation.ts`'s doc comment), so it passes straight through as `shadowRadius` and
-    // react-native-web's preprocessor turns the whole set into a real CSS `box-shadow`.
     web: {
       shadowColor: layer.color,
       shadowOffset: {
@@ -64,8 +22,6 @@ export function elevation(token) {
       shadowOpacity: 1,
       shadowRadius: layer.blur
     },
-    // Android draws the shadow from `elevation` alone; it ignores offset/opacity/radius and tints
-    // with shadowColor only on API 28+. Below that the shadow is the platform's default black.
     default: {
       shadowColor: layer.color,
       elevation: token.android

package/lib/module/theme/platform/floatingSurface.native.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { hexToHsl, withLightness } from "../tokens/builders/color.js";
+import { elevation as renderElevation } from "./elevation.native.js";
+import { elevation as elevationTokens } from "../tokens/primitives/index.js";
+import { composeBoxShadow, highlight } from "./highlight.native.js";
+const MIN_DARK_STEP = 4;
+function darkStep(base, floorLightness) {
+  const bumped = floorLightness + MIN_DARK_STEP + 0.15;
+  return withLightness(base, Math.max(hexToHsl(base).l, bumped));
+}
+function darkFloatingBackground(theme, level) {
+  const canvasL = hexToHsl(theme.colors.bg.canvas).l;
+  switch (level) {
+    case 'sm':
+      return darkStep(theme.colors.bg.surface, canvasL);
+    case 'md':
+      {
+        const sm = darkFloatingBackground(theme, 'sm');
+        return darkStep(theme.colors.bg.raised, hexToHsl(sm).l);
+      }
+    case 'lg':
+      {
+        const md = darkFloatingBackground(theme, 'md');
+        return darkStep(theme.colors.bg.raised, hexToHsl(md).l);
+      }
+  }
+}
+const DARK_AMBIENT = [{
+  offsetX: 0,
+  offsetY: 8,
+  blurRadius: 24,
+  spreadDistance: 0,
+  color: 'rgba(0,0,0,0.4)'
+}];
+export function tokenBoxShadow(token) {
+  return token.layers.map(layer => ({
+    offsetX: layer.x,
+    offsetY: layer.y,
+    blurRadius: layer.blur,
+    spreadDistance: layer.spread,
+    color: layer.color
+  }));
+}
+export function floatingBackground(theme, level) {
+  if (theme.mode === 'light') {
+    return level === 'sm' ? theme.colors.bg.raised : theme.colors.bg.surface;
+  }
+  return darkFloatingBackground(theme, level);
+}
+export function floatingSurfaceStyle(theme, level) {
+  const token = elevationTokens[level];
+  const legacy = renderElevation(token);
+  const style = {
+    ...legacy,
+    borderCurve: 'continuous'
+  };
+  if (Platform.OS === 'android') {
+    return style;
+  }
+  if (theme.mode === 'dark') {
+    const inset = level === 'lg' ? highlight('subtle', theme.mode) : [];
+    style.boxShadow = composeBoxShadow(DARK_AMBIENT, inset);
+    if (level === 'lg') {
+      style.borderTopWidth = 1;
+      style.borderTopColor = 'rgba(255,255,255,0.06)';
+    }
+    return style;
+  }
+  const inset = highlight('subtle', theme.mode);
+  style.boxShadow = composeBoxShadow(tokenBoxShadow(token), inset);
+  return style;
+}
+//# sourceMappingURL=floatingSurface.native.js.map

package/lib/module/theme/platform/highlight.native.js

@@ -0,0 +1,59 @@
+"use strict";
+
+const LIGHT = {
+  subtle: 'rgba(255,255,255,0.05)',
+  raised: 'rgba(255,255,255,0.85)'
+};
+const DARK = {
+  subtle: 'rgba(255,255,255,0.10)',
+  raised: 'rgba(255,255,255,1.0)'
+};
+function layerKey(layer) {
+  return [layer.offsetX, layer.offsetY, layer.blurRadius ?? 0, layer.spreadDistance ?? 0, layer.inset ? 1 : 0, layer.color ?? ''].join('|');
+}
+function dedupeLayers(layers) {
+  const seen = new Set();
+  const out = [];
+  for (const layer of layers) {
+    const key = layerKey(layer);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(layer);
+  }
+  return out;
+}
+export function highlightLevels(level, mode) {
+  return highlight(level, mode);
+}
+export function highlight(level, mode) {
+  if (level === 'none') return [];
+  const palette = mode === 'dark' ? DARK : LIGHT;
+  const color = palette[level];
+  if (level === 'subtle') {
+    return [{
+      offsetX: 0,
+      offsetY: 1,
+      blurRadius: 0,
+      spreadDistance: 0,
+      inset: true,
+      color
+    }];
+  }
+  return [{
+    offsetX: 0,
+    offsetY: 1,
+    blurRadius: 1,
+    spreadDistance: 0,
+    inset: true,
+    color
+  }];
+}
+export function composeBoxShadow(outset, inset) {
+  return dedupeLayers([...outset, ...inset]);
+}
+export function asBoxShadowArray(value) {
+  if (value === undefined) return [];
+  if (typeof value === 'string') return [];
+  return value;
+}
+//# sourceMappingURL=highlight.native.js.map

package/lib/module/theme/platform/index.js

@@ -9,6 +9,11 @@
  */
 export { rem, hairline } from "./units.native.js";
 export { elevation } from "./elevation.native.js";
+export { highlight, highlightLevels, composeBoxShadow } from "./highlight.native.js";
+export { elevatedSurfaces } from "./surfaces.native.js";
+export { STATE_LAYER_OPACITY, rippleColor, stateLayerScrim } from "./stateLayer.native.js";
+export { floatingBackground, floatingSurfaceStyle } from "./floatingSurface.native.js";
+export { springs } from "./motion.native.js";
 export { interFontFamilies, systemFontFamily, fontStyleForWeight } from "./fonts.native.js";
 export { getSystemColorMode, subscribeToSystemColorMode } from "./colorScheme.native.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/platform/motion.native.js

@@ -0,0 +1,35 @@
+"use strict";
+
+export const springs = {
+  spatialFast: {
+    stiffness: 800,
+    damping: 33.94,
+    mass: 1
+  },
+  spatialDefault: {
+    stiffness: 380,
+    damping: 31.19,
+    mass: 1
+  },
+  spatialSlow: {
+    stiffness: 200,
+    damping: 22.63,
+    mass: 1
+  },
+  effectsFast: {
+    stiffness: 3800,
+    damping: 123.29,
+    mass: 1
+  },
+  effectsDefault: {
+    stiffness: 1600,
+    damping: 80.0,
+    mass: 1
+  },
+  effectsSlow: {
+    stiffness: 800,
+    damping: 56.57,
+    mass: 1
+  }
+};
+//# sourceMappingURL=motion.native.js.map