@mrmeg/expo-ui 0.18.0 → 0.21.0

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/components/index.d.ts

@@ -1,10 +1,12 @@
 export * from "./Accordion";
 export * from "./Alert";
 export * from "./AnimatedView";
+export * from "./Avatar";
 export * from "./Badge";
 export * from "./BottomSheet";
 export * from "./Button";
 export * from "./Card";
+export * from "./Carousel";
 export * from "./Checkbox";
 export * from "./Collapsible";
 export * from "./Dialog";

package/dist/components/index.js

@@ -1,10 +1,12 @@
 export * from "./Accordion.js";
 export * from "./Alert.js";
 export * from "./AnimatedView.js";
+export * from "./Avatar.js";
 export * from "./Badge.js";
 export * from "./BottomSheet.js";
 export * from "./Button.js";
 export * from "./Card.js";
+export * from "./Carousel.js";
 export * from "./Checkbox.js";
 export * from "./Collapsible.js";
 export * from "./Dialog.js";

package/dist/constants/colors.d.ts

@@ -22,11 +22,13 @@ declare const palette: {
     readonly gray900: "#18181B";
     readonly gray950: "#09090B";
     readonly black: "#000000";
+    readonly dark950: "#050506";
     readonly dark900: "#09090B";
     readonly dark800: "#18181B";
     readonly dark700: "#27272A";
     readonly dark600: "#3F3F46";
     readonly dark400: "#A1A1AA";
+    readonly dark350: "#B0B0B8";
     readonly dark300: "#D4D4D8";
     readonly dark100: "#F4F4F5";
     readonly green500: "#22C55E";
@@ -40,6 +42,7 @@ declare const palette: {
  * Semantic color interface - what colors mean in the UI
  */
 export interface ThemeColors {
+    surfaceSunken: string;
     background: string;
     foreground: string;
     card: string;
@@ -61,6 +64,7 @@ export interface ThemeColors {
     success: string;
     warning: string;
     border: string;
+    borderStrong: string;
     input: string;
     ring: string;
     overlay: string;

package/dist/constants/colors.js

@@ -25,11 +25,15 @@ const palette = {
     gray950: "#09090B",
     black: "#000000",
     // Dark mode surfaces — zinc-based
+    // `dark950` sits below zinc-950 as the app-chrome tier; `dark350` is a
+    // zinc-350 midpoint used for dim text that stays comfortably readable.
+    dark950: "#050506",
     dark900: "#09090B",
     dark800: "#18181B",
     dark700: "#27272A",
     dark600: "#3F3F46",
     dark400: "#A1A1AA",
+    dark350: "#B0B0B8",
     dark300: "#D4D4D8",
     dark100: "#F4F4F5",
     // Status
@@ -44,6 +48,7 @@ const lightTheme = {
     dark: false,
     fonts: navigationFonts,
     colors: {
+        surfaceSunken: palette.gray50,
         background: palette.white,
         foreground: palette.gray950,
         card: palette.white,
@@ -51,13 +56,13 @@ const lightTheme = {
         popover: palette.white,
         popoverForeground: palette.gray950,
         text: palette.gray950,
-        textDim: palette.gray500,
+        textDim: palette.gray600,
         primary: palette.gray900,
         primaryForeground: palette.gray50,
         secondary: palette.gray100,
         secondaryForeground: palette.gray900,
         muted: palette.gray100,
-        mutedForeground: palette.gray500,
+        mutedForeground: palette.gray600,
         accent: palette.teal500,
         accentForeground: palette.white,
         destructive: palette.red500,
@@ -65,6 +70,7 @@ const lightTheme = {
         success: palette.green500,
         warning: palette.amber500,
         border: palette.gray200,
+        borderStrong: palette.gray300,
         input: palette.gray200,
         ring: palette.gray400,
         overlay: "rgba(0, 0, 0, 0.5)",
@@ -82,6 +88,7 @@ const darkTheme = {
     dark: true,
     fonts: navigationFonts,
     colors: {
+        surfaceSunken: palette.dark950,
         background: palette.dark900,
         foreground: palette.dark100,
         card: palette.dark800,
@@ -89,13 +96,13 @@ const darkTheme = {
         popover: palette.dark800,
         popoverForeground: palette.dark100,
         text: palette.dark100,
-        textDim: palette.dark400,
+        textDim: palette.dark350,
         primary: palette.gray50,
         primaryForeground: palette.gray900,
         secondary: palette.gray800,
         secondaryForeground: palette.gray50,
         muted: palette.dark700,
-        mutedForeground: palette.dark400,
+        mutedForeground: palette.dark350,
         accent: palette.teal400,
         accentForeground: palette.gray900,
         destructive: palette.red400,
@@ -103,6 +110,7 @@ const darkTheme = {
         success: palette.green400,
         warning: palette.amber400,
         border: palette.dark700,
+        borderStrong: palette.dark600,
         input: palette.dark700,
         ring: palette.dark400,
         overlay: "rgba(0, 0, 0, 0.7)",

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/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,4 +2,3 @@ export * from "./globalUIStore";
 export * from "./notify";
 export * from "./themeStore";
 export * from "./themeColorScope";
-export * from "./SsrViewportContext";

package/dist/state/index.js

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

package/dist/state/themeStore.d.ts

@@ -2,6 +2,13 @@ import type { ThemeColors } from "../constants/colors";
 import type { FontOverrides } from "../constants/fonts";
 export type ThemePreference = "system" | "light" | "dark";
 export type ResolvedTheme = "light" | "dark";
+/**
+ * Key the persisted preference lives under (`localStorage` on web,
+ * `AsyncStorage` on native). Exported so a host app's pre-boot script — e.g.
+ * the blocking color-scheme script in `app/+html.tsx` — can read the same
+ * value the store does.
+ */
+export declare const THEME_STORAGE_KEY = "user-theme-preference";
 /**
  * Per-scheme color overrides a host app can inject to brand the package.
  *
@@ -44,6 +51,14 @@ export type ShapeOverrides = {
 export type ThemeStore = {
     userTheme: ThemePreference;
     systemTheme: ResolvedTheme;
+    /**
+     * True once the persisted preference has actually been read (or explicitly
+     * set by the user). Until then `userTheme` / `systemTheme` still hold the
+     * boot defaults ("system" / light), so a host app that needs to hold a
+     * paint until the real preference is known can wait on this. Mirrors
+     * `hasLoadedOnboarding` in the host app's onboarding store.
+     */
+    hasLoadedTheme: boolean;
     /**
      * App-injected palette overrides, applied by `useTheme` on top of the
      * package defaults. Empty by default — zero override means the package