@mrmeg/expo-ui 0.20.0 → 0.21.0

package/dist/components/Carousel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Platform, ScrollView, StyleSheet, Text, View, } from "react-native";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useDimensions } from "../hooks/useDimensions.js";
 import { spacing } from "../constants/spacing.js";
@@ -56,11 +56,14 @@ function clampIndex(index, count) {
  * resolved item width.
  *
  * Built on `ScrollView` — not a virtualized list — on purpose: every slide is
- * in the server-rendered tree, so web SSR ships the real content instead of an
- * empty scroller that only fills in after measurement. Snapping uses the
- * platform scroller (`snapToInterval` on native, CSS scroll-snap on web); no
+ * in the prerendered tree, so a web build's HTML shell ships the real content
+ * instead of an empty scroller that only fills in after measurement. Snapping
+ * uses the platform scroller (`snapToInterval` on native, CSS scroll-snap on web); no
  * animation library is involved.
  *
+ * Slides sized by a fractional `itemWidth` measure against the viewport until
+ * the first `onLayout` lands — see the `itemWidth` caveat on `CarouselProps`.
+ *
  * @example
  * ```tsx
  * <Carousel itemWidth={0.8} onIndexChange={setPage}>
@@ -78,9 +81,9 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
     const items = React.Children.toArray(children);
     const count = items.length;
     // Width source of truth: the measured container after mount, seeded from the
-    // viewport so the server and the client's first render agree. `useDimensions`
-    // reads the SSR viewport context rather than `window`, which is what keeps
-    // that seed hydration-safe (docs/ssr-hydration.md §4).
+    // viewport so a prerendered HTML shell and the client's first render agree.
+    // `useDimensions` seeds from a constant default rather than `window` on that
+    // first render, which is what keeps the seed hydration-safe.
     const { width: viewportWidth } = useDimensions();
     const [measuredWidth, setMeasuredWidth] = useState(null);
     const containerWidth = measuredWidth ?? viewportWidth;
@@ -88,7 +91,8 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
     const interval = slideWidth + gap;
     const [activeIndex, setActiveIndex] = useState(() => clampIndex(initialIndex, count));
     // Mirrors activeIndex so the scroll handler can dedupe without re-reading
-    // state: one settle emits many scroll events, onIndexChange must fire once.
+    // state: web's throttled ticks report the same page many times over, and
+    // onIndexChange must fire once per page.
     const activeIndexRef = useRef(activeIndex);
     const scrollRef = useRef(null);
     const hasScrolledToInitial = useRef(false);
@@ -99,9 +103,28 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
         setActiveIndex(next);
         onIndexChange?.(next);
     }, [onIndexChange]);
+    const isWeb = Platform.OS === "web";
     const handleScroll = useCallback((event) => {
         commitIndex(getCarouselIndex(event.nativeEvent.contentOffset.x, interval, count));
     }, [commitIndex, count, interval]);
+    // Native fallback for a drag that releases with the content at rest: no
+    // momentum follows, so `onMomentumScrollEnd` never arrives and the settle
+    // would go unreported.
+    //
+    // Gated on velocity because an ungated drag-end handler is exactly the
+    // double-fire this replaced: a flick past a slide midpoint that snaps back
+    // reports the midpoint page on release and the original page on settle. A
+    // release that *will* glide reports a non-zero velocity (points/ms on iOS,
+    // density-scaled px/s on Android — either way, orders of magnitude above
+    // this epsilon), and momentum end is left to speak for it. A release at rest
+    // reports 0, and there `getCarouselIndex`'s round-to-nearest already agrees
+    // with where `snapToInterval` would land, so the two paths can't disagree.
+    const handleScrollEndDrag = useCallback((event) => {
+        const velocityX = event.nativeEvent.velocity?.x ?? 0;
+        if (Math.abs(velocityX) > 0.01)
+            return;
+        handleScroll(event);
+    }, [handleScroll]);
     const handleLayout = useCallback((event) => {
         const next = event.nativeEvent.layout.width;
         if (!(next > 0))
@@ -120,24 +143,54 @@ export function Carousel({ children, itemWidth = 0.85, gap = spacing.md, content
             return;
         scrollRef.current?.scrollTo({ x: targetIndex * interval, animated: false });
     }, [interval, measuredWidth, targetIndex]);
-    const isWeb = Platform.OS === "web";
+    // Re-clamp when children shrink. Without this the status line reads "5 of 3"
+    // with no active dot until the next scroll, because activeIndex is only
+    // seeded once and the scroller — already past the new content width — emits
+    // nothing on its own. Scrolling back is what makes the offset agree with the
+    // reported page again.
+    useEffect(() => {
+        if (count <= 0 || activeIndexRef.current < count)
+            return;
+        const clamped = count - 1;
+        commitIndex(clamped);
+        if (interval > 0) {
+            scrollRef.current?.scrollTo({ x: clamped * interval, animated: false });
+        }
+    }, [commitIndex, count, interval]);
+    const handleDotPress = useCallback((index) => {
+        commitIndex(index);
+        if (interval > 0) {
+            scrollRef.current?.scrollTo({ x: index * interval, animated: true });
+        }
+    }, [commitIndex, interval]);
     const useCssSnap = isWeb && snap;
     const dotsVisible = showDots && count > 1;
     return (_jsxs(View, { style: [styles.container, styleOverride], onLayout: handleLayout, testID: testID, children: [_jsx(ScrollView, { ref: scrollRef, testID: `${testID}-scroll`, horizontal: true, showsHorizontalScrollIndicator: false, 
                 // Native snapping. react-native-web drops these (they aren't in its
                 // forwarded-prop list), so web uses the CSS scroll-snap styles instead.
-                snapToInterval: snap && interval > 0 ? interval : undefined, snapToAlignment: "start", decelerationRate: snap ? "fast" : "normal", 
-                // react-native-web only emits scroll ticks when the throttle is > 0 and
-                // never emits momentum events — this is what keeps the dots live for
-                // wheel/trackpad scrolling.
-                scrollEventThrottle: 16, onScroll: handleScroll, onMomentumScrollEnd: handleScroll, style: useCssSnap
+                snapToInterval: snap && interval > 0 ? interval : undefined, snapToAlignment: "start", decelerationRate: snap ? "fast" : "normal", ...(isWeb
+                    ? { scrollEventThrottle: 16, onScroll: handleScroll }
+                    : { onMomentumScrollEnd: handleScroll, onScrollEndDrag: handleScrollEndDrag }), style: useCssSnap
                     ? [webStyles.scroller, { scrollPaddingLeft: contentPadding }]
-                    : undefined, contentContainerStyle: [{ paddingHorizontal: contentPadding, gap }, contentContainerStyle], children: items.map((child, index) => (_jsx(View, { testID: `${testID}-item-${index}`, style: [slideWidth > 0 && { width: slideWidth }, useCssSnap && webStyles.item], children: child }, React.isValidElement(child) && child.key != null ? child.key : index))) }), count > 1 && (_jsx(View, { testID: `${testID}-status`, style: styles.status, "aria-live": "polite", children: _jsx(Text, { style: styles.statusText, children: `${activeIndex + 1} of ${count}` }) })), dotsVisible && (_jsx(View, { testID: `${testID}-dots`, style: styles.dots, accessibilityRole: "tablist", children: items.map((_, index) => (_jsx(View, { testID: `${testID}-dot-${index}`, accessibilityRole: "tab", accessibilityState: { selected: index === activeIndex }, accessibilityLabel: `Slide ${index + 1} of ${count}`, style: [styles.dot, index === activeIndex ? styles.dotActive : styles.dotInactive] }, index))) }))] }));
+                    : undefined, contentContainerStyle: [{ paddingHorizontal: contentPadding, gap }, contentContainerStyle], children: items.map((child, index) => (_jsx(View, { testID: `${testID}-item-${index}`, style: [slideWidth > 0 && { width: slideWidth }, useCssSnap && webStyles.item], children: child }, React.isValidElement(child) && child.key != null ? child.key : index))) }), count > 1 && (_jsx(View, { testID: `${testID}-status`, style: styles.status, "aria-live": "polite", children: _jsx(Text, { style: styles.statusText, children: `${activeIndex + 1} of ${count}` }) })), dotsVisible && (_jsx(View, { testID: `${testID}-dots`, style: styles.dots, accessibilityRole: "tablist", children: items.map((_, index) => (_jsx(Pressable, { testID: `${testID}-dot-${index}`, accessibilityRole: "tab", accessibilityState: { selected: index === activeIndex }, "aria-selected": index === activeIndex, accessibilityLabel: `Slide ${index + 1} of ${count}`, hitSlop: DOT_HIT_SLOP, onPress: () => handleDotPress(index), style: styles.dotButton, children: _jsx(View, { testID: `${testID}-dot-${index}-indicator`, style: [styles.dot, index === activeIndex ? styles.dotActive : styles.dotInactive] }) }, index))) }))] }));
 }
 // ============================================================================
 // Styles
 // ============================================================================
 const DOT_SIZE = 8;
+// Press target around each 8px dot. The square is what separates the dots
+// visually (the row itself has no gap, so neighboring targets are flush — no
+// dead strip between them), and `DOT_HIT_SLOP` extends it vertically to
+// `spacing.touchTarget` (24 + 2 x 10 = 44). The slop is vertical-only on
+// purpose: horizontal slop would overlap the neighboring dot's target and make
+// which dot a tap lands on ambiguous.
+const DOT_HIT_SIZE = 24;
+const DOT_HIT_SLOP = {
+    top: (spacing.touchTarget - DOT_HIT_SIZE) / 2,
+    bottom: (spacing.touchTarget - DOT_HIT_SIZE) / 2,
+    left: 0,
+    right: 0,
+};
 // Web-only CSS scroll-snap. `scrollPaddingLeft` is applied inline at the call
 // site (it tracks the contentPadding prop) so the leading inset survives the
 // browser snapping slide 0 to the scrollport start — which also makes page `i`
@@ -166,8 +219,17 @@ const createStyles = (theme) => StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        gap: spacing.xs,
-        marginTop: spacing.md,
+        // No `gap`: the DOT_HIT_SIZE squares carry the visual spacing, and a gap
+        // would open an unpressable strip between adjacent targets. marginTop
+        // absorbs the wrapper's own vertical padding so the row sits where the
+        // pre-Pressable dots did.
+        marginTop: spacing.md - (DOT_HIT_SIZE - DOT_SIZE) / 2,
+    },
+    dotButton: {
+        width: DOT_HIT_SIZE,
+        height: DOT_HIT_SIZE,
+        alignItems: "center",
+        justifyContent: "center",
     },
     dot: {
         width: DOT_SIZE,

package/dist/components/Label.d.ts

@@ -5,9 +5,20 @@ export interface LabelProps {
      */
     children: string;
     /**
-     * Native ID to associate with a form control
+     * The label's OWN id. On web react-native-web maps it to `id`; on native it
+     * is the `nativeID` a control's `accessibilityLabelledBy` can point at.
+     *
+     * Must differ from the paired input's id — see `htmlFor`.
      */
     nativeID?: string;
+    /**
+     * WEB ONLY — the id of the input this label describes (the input's
+     * `nativeID`). Passing it makes `@rn-primitives/label` render a real
+     * `<label for="…">`, which is what associates the two and makes clicking the
+     * label focus the input. No-op on native, where association goes the other
+     * way (the control points at the label's `nativeID`).
+     */
+    htmlFor?: string;
     /**
      * Whether the field is required (shows asterisk)
      */
@@ -37,25 +48,34 @@ export interface LabelProps {
 /**
  * Label component for form fields using @rn-primitives/label
  *
- * Provides accessible labeling for form controls with automatic
- * association via nativeID.
+ * Accessible labeling for form controls. Association needs **two distinct
+ * ids**: `nativeID` is the label's own id, `htmlFor` is the input's id. Giving
+ * both the same value renders two elements with one id on web and associates
+ * nothing.
  *
  * Usage:
  * ```tsx
- * // Basic label
- * <Label nativeID="email-input">Email</Label>
+ * // Paired with an input. `htmlFor` (web) makes this a real <label for>, so
+ * // clicking it focuses the input; `nativeID` names the label itself, which is
+ * // what a control's `accessibilityLabelledBy` points at on native.
+ * <Label nativeID="email-label" htmlFor="email-input">Email</Label>
  * <TextInput nativeID="email-input" />
  *
  * // Required field
- * <Label nativeID="password" required>Password</Label>
+ * <Label nativeID="password-label" htmlFor="password-input" required>Password</Label>
+ * <TextInput nativeID="password-input" secureTextEntry />
  *
  * // With error state
- * <Label nativeID="username" error>Username</Label>
+ * <Label nativeID="username-label" htmlFor="username-input" error>Username</Label>
+ *
+ * // Standalone caption with no control to associate — omit htmlFor
+ * <Label>Filters</Label>
  *
- * // With press handler to focus input
- * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ * // With press handler to focus input (needed on native, where htmlFor is a
+ * // no-op and pressing the label does nothing on its own)
+ * <Label nativeID="search-label" htmlFor="search-input" onPress={() => inputRef.current?.focus()}>
  *   Search
  * </Label>
  * ```
  */
-export declare function Label({ children, nativeID, required, size, error, disabled, style, onPress, }: LabelProps): import("react").JSX.Element;
+export declare function Label({ children, nativeID, htmlFor, required, size, error, disabled, style, onPress, }: LabelProps): import("react").JSX.Element;

package/dist/components/Label.js

@@ -14,28 +14,37 @@ const SIZE_CONFIGS = {
 /**
  * Label component for form fields using @rn-primitives/label
  *
- * Provides accessible labeling for form controls with automatic
- * association via nativeID.
+ * Accessible labeling for form controls. Association needs **two distinct
+ * ids**: `nativeID` is the label's own id, `htmlFor` is the input's id. Giving
+ * both the same value renders two elements with one id on web and associates
+ * nothing.
  *
  * Usage:
  * ```tsx
- * // Basic label
- * <Label nativeID="email-input">Email</Label>
+ * // Paired with an input. `htmlFor` (web) makes this a real <label for>, so
+ * // clicking it focuses the input; `nativeID` names the label itself, which is
+ * // what a control's `accessibilityLabelledBy` points at on native.
+ * <Label nativeID="email-label" htmlFor="email-input">Email</Label>
  * <TextInput nativeID="email-input" />
  *
  * // Required field
- * <Label nativeID="password" required>Password</Label>
+ * <Label nativeID="password-label" htmlFor="password-input" required>Password</Label>
+ * <TextInput nativeID="password-input" secureTextEntry />
  *
  * // With error state
- * <Label nativeID="username" error>Username</Label>
+ * <Label nativeID="username-label" htmlFor="username-input" error>Username</Label>
  *
- * // With press handler to focus input
- * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ * // Standalone caption with no control to associate — omit htmlFor
+ * <Label>Filters</Label>
+ *
+ * // With press handler to focus input (needed on native, where htmlFor is a
+ * // no-op and pressing the label does nothing on its own)
+ * <Label nativeID="search-label" htmlFor="search-input" onPress={() => inputRef.current?.focus()}>
  *   Search
  * </Label>
  * ```
  */
-export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
+export function Label({ children, nativeID, htmlFor, required, size = "md", error, disabled, style, onPress, }) {
     const { theme } = useTheme();
     const styles = themedStyles(theme);
     const sizeConfig = SIZE_CONFIGS[size];
@@ -53,7 +62,7 @@ export function Label({ children, nativeID, required, size = "md", error, disabl
     return (_jsx(LabelPrimitive.Root, { nativeID: nativeID, onPress: onPress, style: {
             ...styles.root,
             ...(Platform.OS === "web" && onPress && { cursor: "pointer" }),
-        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) }));
+        }, children: _jsxs(LabelPrimitive.Text, { htmlFor: htmlFor, style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) }));
 }
 const createStyles = (theme) => StyleSheet.create({
     root: {

package/dist/constants/fonts.js

@@ -2,10 +2,11 @@ import { Platform } from "react-native";
 // Web font stack fallback
 const WEB_FONT_STACK = "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
 // IMPORTANT: do NOT key these on `typeof document` / `typeof navigator`.
-// On a web bundle, Node SSR sees `undefined` for both and the client sees them,
-// producing different snapshot values at module load -> hydration mismatch on
-// every <StyledText>. `Platform.OS` (from react-native-web) returns "web" in
-// both environments, so the value is stable.
+// A web bundle is also evaluated in Node when a host app's HTML shell is
+// rendered at export time, where both are `undefined` while the browser sees
+// them — that produces different module-load snapshots and a hydration
+// mismatch on every <StyledText>. `Platform.OS` (from react-native-web)
+// returns "web" in both environments, so the value is stable.
 const isWebRuntime = Platform.OS === "web";
 const isReactNativeRuntime = Platform.OS !== "web";
 // Georgia ships as one face per platform; every weight slot points at the

package/dist/hooks/useDimensions.d.ts

@@ -1,3 +1,17 @@
+/**
+ * Viewport the first web render is computed from, before the real window can
+ * be read. Desktop is chosen because:
+ *   1. A desktop visitor sees no reflow — their real viewport lands in the
+ *      same breakpoint.
+ *   2. A mobile visitor gets one frame of desktop-styled content before the
+ *      post-mount effect snaps to real dimensions — better than the inverse
+ *      (every desktop visitor seeing mobile-tiny, then snapping).
+ *   3. It matches the frame the app hands `SafeAreaProvider`, and it is the
+ *      value the HTML shell `expo export` renders in Node is built from, so
+ *      the browser's first render agrees with the markup it hydrates.
+ */
+export declare const DEFAULT_VIEWPORT_WIDTH = 1280;
+export declare const DEFAULT_VIEWPORT_HEIGHT = 800;
 export declare const SCREEN_SIZES: {
     readonly SMALL: 768;
     readonly MEDIUM: 1000;
@@ -15,15 +29,11 @@ type WindowDimensions = {
 * Provides a consistent way to access window dimensions and screen size
 * information across mobile and web.
 *
-* On web SSR, the initial width comes from `SsrViewportContext`, which a
-* route's loader can populate from a `mrmeg-vw` cookie (precise, from
-* previous visit) or User-Agent heuristics. Both server and the initial
-* client render read the same context value so hydration matches; after
-* mount, real dimensions take over and the cookie is updated for next time.
-*
-* Routes that don't provide the context get the package default
-* (`SSR_VIEWPORT_DEFAULT_WIDTH` = 1280) — desktop-correct, mobile gets one
-* frame of desktop layout before snapping.
+* On web the first render uses `DEFAULT_VIEWPORT_WIDTH` / `_HEIGHT` — the
+* window can't be read while the HTML shell is rendered in Node at export
+* time, and reading it during the browser's first render would disagree with
+* that markup. A post-mount effect swaps in the real viewport and follows
+* resize from there.
 */
 export declare const useDimensions: () => WindowDimensions;
 export {};

package/dist/hooks/useDimensions.js

@@ -1,6 +1,19 @@
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Platform, useWindowDimensions } from "react-native";
-import { SsrViewportContext, SSR_VIEWPORT_DEFAULT_HEIGHT, } from "../state/SsrViewportContext.js";
+/**
+ * Viewport the first web render is computed from, before the real window can
+ * be read. Desktop is chosen because:
+ *   1. A desktop visitor sees no reflow — their real viewport lands in the
+ *      same breakpoint.
+ *   2. A mobile visitor gets one frame of desktop-styled content before the
+ *      post-mount effect snaps to real dimensions — better than the inverse
+ *      (every desktop visitor seeing mobile-tiny, then snapping).
+ *   3. It matches the frame the app hands `SafeAreaProvider`, and it is the
+ *      value the HTML shell `expo export` renders in Node is built from, so
+ *      the browser's first render agrees with the markup it hydrates.
+ */
+export const DEFAULT_VIEWPORT_WIDTH = 1280;
+export const DEFAULT_VIEWPORT_HEIGHT = 800;
 export const SCREEN_SIZES = {
     SMALL: 768,
     MEDIUM: 1000,
@@ -20,53 +33,32 @@ const calculateDimensionFlags = (width, height) => {
         isLargeScreen: width > SCREEN_SIZES.MEDIUM,
     };
 };
-// Persist the real viewport width as a cookie on first mount so subsequent
-// SSR requests can render with the user's actual layout (no flash on repeat
-// visits). The server reads this cookie via your route loader using
-// `detectSsrViewportWidth(request)` from server/lib/ssrViewport.ts.
-const SSR_VIEWPORT_COOKIE = "mrmeg-vw";
-const SSR_VIEWPORT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
-function writeViewportCookie(width) {
-    if (typeof document === "undefined")
-        return;
-    // Round to nearest 10 so resize-driven writes don't bust HTTP caching on
-    // every pixel of horizontal movement.
-    const rounded = Math.round(width / 10) * 10;
-    document.cookie = `${SSR_VIEWPORT_COOKIE}=${rounded}; path=/; max-age=${SSR_VIEWPORT_COOKIE_MAX_AGE}; SameSite=Lax`;
-}
 /**
 * Provides a consistent way to access window dimensions and screen size
 * information across mobile and web.
 *
-* On web SSR, the initial width comes from `SsrViewportContext`, which a
-* route's loader can populate from a `mrmeg-vw` cookie (precise, from
-* previous visit) or User-Agent heuristics. Both server and the initial
-* client render read the same context value so hydration matches; after
-* mount, real dimensions take over and the cookie is updated for next time.
-*
-* Routes that don't provide the context get the package default
-* (`SSR_VIEWPORT_DEFAULT_WIDTH` = 1280) — desktop-correct, mobile gets one
-* frame of desktop layout before snapping.
+* On web the first render uses `DEFAULT_VIEWPORT_WIDTH` / `_HEIGHT` — the
+* window can't be read while the HTML shell is rendered in Node at export
+* time, and reading it during the browser's first render would disagree with
+* that markup. A post-mount effect swaps in the real viewport and follows
+* resize from there.
 */
 export const useDimensions = () => {
     const isWeb = Platform.OS === "web";
-    const ssrWidth = use(SsrViewportContext);
     // Native reads come from useWindowDimensions, which subscribes to rotation /
     // split-screen / resize and tears the listener down for us — no manual
     // Dimensions.addEventListener to leak. On web we ignore it and drive layout
-    // from the SSR context + the resize listener below so hydration stays exact.
+    // from the default frame + the resize listener below.
     const native = useWindowDimensions();
-    // Lazy initializer: both server and client first render compute identical
-    // flags from the context value, so hydration matches.
-    const [dimensions, setDimensions] = useState(() => calculateDimensionFlags(ssrWidth, SSR_VIEWPORT_DEFAULT_HEIGHT));
+    const [dimensions, setDimensions] = useState(() => calculateDimensionFlags(DEFAULT_VIEWPORT_WIDTH, DEFAULT_VIEWPORT_HEIGHT));
     // Web: read the real viewport after mount and follow resize events. Keeping
-    // this in an effect (not render) preserves the SSR-matched first paint.
+    // this in an effect (not render) keeps the first render identical to the
+    // exported markup it hydrates.
     useEffect(() => {
         if (!isWeb)
             return;
         const syncFromWindow = () => {
             setDimensions(calculateDimensionFlags(window.innerWidth, window.innerHeight));
-            writeViewportCookie(window.innerWidth);
         };
         syncFromWindow();
         window.addEventListener("resize", syncFromWindow);

package/dist/hooks/useResources.d.ts

@@ -1,17 +1,3 @@
-/**
- * Registers the Feather icon font in expo-font's per-request SSR store.
- *
- * Must be called from a **render body** on server-web (see `useResources`
- * below): expo-font enters an `AsyncLocalStorage` store per request, so a
- * module-scope registration lands in at most one request's store. Registering
- * during render means every request emits the `@font-face` rule into
- * `<style id="expo-generated-fonts">` and server-rendered `<Icon>`s agree with
- * the client's first render.
- *
- * No-op on native and on client web (both already covered: native by the
- * effect below, client web by the module-scope call above).
- */
-export declare function ensureIconFontRegistered(): void;
 interface LoadResourcesResult {
     loaded: boolean;
     error: Error | null;

package/dist/hooks/useResources.js

@@ -4,45 +4,17 @@ import Feather from "@expo/vector-icons/Feather";
 import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
 import { useThemeStore } from "../state/themeStore.js";
-// Eager, module-scope load that primes the Feather font on the *client* before
-// first render: on web it synchronously injects the @font-face rule, which is
-// what makes the client's `Font.isLoaded("feather")` check read true during
-// hydration; on native it just starts the fetch ahead of the effect below
-// (which then no-ops for the already-loaded font).
+// Eager, module-scope load that primes the Feather font before first render:
+// on web it synchronously injects the @font-face rule, so icons have their
+// glyphs on the first paint; on native it just starts the fetch ahead of the
+// effect below (which then no-ops for the already-loaded font).
 //
-// Deliberately guarded off server-web. expo-font's SSR store is per-request
-// AsyncLocalStorage, and Metro's inlineRequires defers this module's evaluation
-// until it is first required during a render — so on the server this line only
-// ever populated the store of whichever request happened to warm the module
-// cache. Requests 2+ then shipped HTML with no @font-face and empty icons while
-// the client rendered glyphs (React #418). Server registration happens
-// per-request in ensureIconFontRegistered() instead.
+// Guarded on `window` because web bundles are also evaluated in Node when
+// `expo export` renders the HTML shell, where there is no document to inject
+// into.
 if (typeof window !== "undefined") {
     void Font.loadAsync(Feather.font);
 }
-/**
- * Registers the Feather icon font in expo-font's per-request SSR store.
- *
- * Must be called from a **render body** on server-web (see `useResources`
- * below): expo-font enters an `AsyncLocalStorage` store per request, so a
- * module-scope registration lands in at most one request's store. Registering
- * during render means every request emits the `@font-face` rule into
- * `<style id="expo-generated-fonts">` and server-rendered `<Icon>`s agree with
- * the client's first render.
- *
- * No-op on native and on client web (both already covered: native by the
- * effect below, client web by the module-scope call above).
- */
-export function ensureIconFontRegistered() {
-    if (Platform.OS !== "web" || typeof window !== "undefined")
-        return;
-    if (Font.isLoaded("feather"))
-        return; // per-request store; cheap
-    // Synchronous on server-web (expo-font routes to registerStaticFont). No
-    // `void`/try-catch: a throw here means we're outside a request scope, which
-    // must be loud.
-    Font.loadAsync(Feather.font);
-}
 // The four static Inter weights StyledText's native family keys point at
 // (see constants/fonts.ts). Native-only: web never renders these family names
 // ("Inter_400Regular" etc.) — fontFamilies.sansSerif resolves every weight to
@@ -96,10 +68,6 @@ function ensureWebFontStylesheet() {
  * un-download Inter. The Feather icon font always loads.
  */
 export const useResources = () => {
-    // Render-body (not effect) so server-web registers the icon font in *this*
-    // request's expo-font store — effects never run on the server and a
-    // module-scope call only reaches one request. See ensureIconFontRegistered.
-    ensureIconFontRegistered();
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {

package/dist/hooks/useTheme.js

@@ -3,7 +3,6 @@ import { colors } from "../constants/colors.js";
 import { Platform, StyleSheet } from "react-native";
 import { resolveThemePreference, useThemeStore } from "../state/themeStore.js";
 import { useThemeColorScope } from "../state/themeColorScope.js";
-import { useSsrThemeSeed } from "../state/ssrTheme.js";
 import { spacing as spacingConstants } from "../constants/spacing.js";
 // Module-level cache for contrast calculations to avoid memory leak
 // and share across components
@@ -46,24 +45,11 @@ function getCachedOrCompute(key, compute) {
  * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.03)" }
  */
 export function useTheme() {
-    const storeUserTheme = useThemeStore((s) => s.userTheme);
-    const storeSystemTheme = useThemeStore((s) => s.systemTheme);
-    const hasLoadedTheme = useThemeStore((s) => s.hasLoadedTheme);
+    const userTheme = useThemeStore((s) => s.userTheme);
+    const systemTheme = useThemeStore((s) => s.systemTheme);
     const setTheme = useThemeStore((s) => s.setTheme);
     const colorOverrides = useThemeStore((s) => s.colorOverrides);
     const scoped = useThemeColorScope();
-    const seed = useSsrThemeSeed();
-    // Before persistence has been read, a web render must resolve from the
-    // per-request SSR seed instead of store state. The store is a module
-    // singleton shared across concurrent SSR requests, so it can only ever hold
-    // the SSR-safe boot defaults ("system"/light); the seed is cookie-derived,
-    // which is the one signal the server and the browser read identically —
-    // that's what keeps the hydrated tree matching the server HTML. After mount
-    // `syncThemeFromEnvironment()` flips `hasLoadedTheme` and store state (real
-    // localStorage/AsyncStorage + live OS listener) takes over for good.
-    const useSeed = Platform.OS === "web" && !hasLoadedTheme;
-    const userTheme = useSeed ? seed.userTheme : storeUserTheme;
-    const systemTheme = useSeed ? seed.systemTheme : storeSystemTheme;
     // Determine which theme to use (user preference or system)
     const effectiveScheme = resolveThemePreference(userTheme, systemTheme);
     const base = colors[effectiveScheme];

package/dist/lib/themedStyles.d.ts

@@ -1,17 +1,17 @@
 import { type Theme } from "../constants/colors";
 /**
  * Registers theme-dependent styles at module scope so react-native-web
- * inserts their CSS rules into the server-side sheet before the document
- * <head> is serialized.
+ * inserts their CSS rules into the sheet before the prerendered document
+ * <head> is serialized at export time.
  *
  * Styles created lazily during render — the
  * `useMemo(() => createStyles(theme), [theme])` idiom — are inserted into
  * RNW's sheet *after* expo-router has already captured the
- * `<style id="react-native-stylesheet">` snapshot for the head. The SSR
- * HTML then references class names that have no rules, which paints
- * completely unstyled until hydration re-inserts them client-side (worst
- * on the first request after a server cold start, and on every dev
- * rebundle). See docs/ssr-hydration.md.
+ * `<style id="react-native-stylesheet">` snapshot for the head. The exported
+ * HTML shell then references class names that have no rules, which paints
+ * completely unstyled until the client re-inserts them on hydration (worst
+ * on a cold load of the shell, and on every dev rebundle). See "Enable
+ * Server Output" in docs/server-guide.md.
  *
  * Both base themes are computed eagerly at module load. Themes carrying
  * color overrides (global brand or scoped) are computed once per theme

package/dist/lib/themedStyles.js

@@ -1,17 +1,17 @@
 import { colors } from "../constants/colors.js";
 /**
  * Registers theme-dependent styles at module scope so react-native-web
- * inserts their CSS rules into the server-side sheet before the document
- * <head> is serialized.
+ * inserts their CSS rules into the sheet before the prerendered document
+ * <head> is serialized at export time.
  *
  * Styles created lazily during render — the
  * `useMemo(() => createStyles(theme), [theme])` idiom — are inserted into
  * RNW's sheet *after* expo-router has already captured the
- * `<style id="react-native-stylesheet">` snapshot for the head. The SSR
- * HTML then references class names that have no rules, which paints
- * completely unstyled until hydration re-inserts them client-side (worst
- * on the first request after a server cold start, and on every dev
- * rebundle). See docs/ssr-hydration.md.
+ * `<style id="react-native-stylesheet">` snapshot for the head. The exported
+ * HTML shell then references class names that have no rules, which paints
+ * completely unstyled until the client re-inserts them on hydration (worst
+ * on a cold load of the shell, and on every dev rebundle). See "Enable
+ * Server Output" in docs/server-guide.md.
  *
  * Both base themes are computed eagerly at module load. Themes carrying
  * color overrides (global brand or scoped) are computed once per theme

package/dist/state/index.d.ts

@@ -2,5 +2,3 @@ export * from "./globalUIStore";
 export * from "./notify";
 export * from "./themeStore";
 export * from "./themeColorScope";
-export * from "./ssrTheme";
-export * from "./SsrViewportContext";

package/dist/state/index.js

@@ -2,5 +2,3 @@ export * from "./globalUIStore.js";
 export * from "./notify.js";
 export * from "./themeStore.js";
 export * from "./themeColorScope.js";
-export * from "./ssrTheme.js";
-export * from "./SsrViewportContext.js";