@sigx/lynx-zero 0.4.9

package/dist/theme/StatusBarSync.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `<StatusBarSync />` — keeps the device status-bar (and Android's
+ * navigation-bar) tint legible against the active theme.
+ *
+ * Reads the current theme via `useTheme()`, looks up its variant in the
+ * theme registry, and pushes the appropriate tint to the OS via
+ * `@sigx/lynx-appearance`:
+ *
+ *   light theme → dark status-bar icons (legible against light bg)
+ *   dark  theme → light status-bar icons (legible against dark bg)
+ *
+ * Mount once, inside `<ThemeProvider>`:
+ *
+ * ```tsx
+ * <ThemeProvider>
+ *   <StatusBarSync />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * Renders nothing — it's a side-effect-only component that drives a
+ * reactive `effect()` reading `theme.name`. The `matchBackground` prop is
+ * reserved for a follow-up that pushes the active theme's
+ * `--color-base-100` as the Android system-bar background; today it's a
+ * declared no-op so the API surface is stable across the rev that wires
+ * CSS-var resolution.
+ */
+import { type Define } from '@sigx/lynx';
+export type StatusBarSyncProps = 
+/**
+ * Reserved — will (in a follow-up) push the active theme's
+ * `--color-base-100` as the Android status- and navigation-bar
+ * background. Currently a no-op; the prop ships so consumers can opt
+ * in without an API break later. iOS and Android 15+ ignore the
+ * background regardless (no equivalent on iOS; edge-to-edge on
+ * Android 15+).
+ */
+Define.Prop<'matchBackground', boolean, false>;
+export declare const StatusBarSync: import("@sigx/runtime-core").ComponentFactory<{
+    matchBackground?: boolean | undefined;
+}, void, {}>;
+//# sourceMappingURL=StatusBarSync.d.ts.map

package/dist/theme/StatusBarSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBarSync.d.ts","sourceRoot":"","sources":["../../src/theme/StatusBarSync.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAA6C,KAAK,MAAM,EAAE,MAAM,YAAY,CAAC;AAMpF,MAAM,MAAM,kBAAkB;AAC1B;;;;;;;GAOG;AACD,MAAM,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AAErD,eAAO,MAAM,aAAa;;YA2DxB,CAAC"}

package/dist/theme/StatusBarSync.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<StatusBarSync />` — keeps the device status-bar (and Android's
+ * navigation-bar) tint legible against the active theme.
+ *
+ * Reads the current theme via `useTheme()`, looks up its variant in the
+ * theme registry, and pushes the appropriate tint to the OS via
+ * `@sigx/lynx-appearance`:
+ *
+ *   light theme → dark status-bar icons (legible against light bg)
+ *   dark  theme → light status-bar icons (legible against dark bg)
+ *
+ * Mount once, inside `<ThemeProvider>`:
+ *
+ * ```tsx
+ * <ThemeProvider>
+ *   <StatusBarSync />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * Renders nothing — it's a side-effect-only component that drives a
+ * reactive `effect()` reading `theme.name`. The `matchBackground` prop is
+ * reserved for a follow-up that pushes the active theme's
+ * `--color-base-100` as the Android system-bar background; today it's a
+ * declared no-op so the API surface is stable across the rev that wires
+ * CSS-var resolution.
+ */
+import { component, effect, onMounted, onUnmounted } from '@sigx/lynx';
+import { isAvailable, setSystemBarsStyle } from '@sigx/lynx-appearance';
+import { themeController } from './theme-state.js';
+import { variantOf } from './registry.js';
+export const StatusBarSync = component(({ props }) => {
+    // Bind to the *global* theme — not `useTheme()` — so the OS bars always
+    // track the app/screen theme and can't be hijacked by a content sub-scope
+    // (a nested `<ThemeProvider>` recolors its subtree but leaves the bars put).
+    const theme = themeController;
+    let lastApplied = null;
+    let runner;
+    function apply(name) {
+        if (name === lastApplied)
+            return;
+        lastApplied = name;
+        const variant = variantOf(name);
+        // For unregistered themes we can't infer a variant — leave the
+        // system bars alone. Consumers can register their custom theme via
+        // `registerTheme()` to opt in.
+        if (!variant)
+            return;
+        const style = variant === 'dark' ? 'light' : 'dark';
+        // Fire-and-forget: `setSystemBarsStyle` is non-throwing (it
+        // resolves `{ ok: false, reason: 'unsupported' }` when the native
+        // module isn't registered, and silently filters per-leg
+        // `unsupported` results — e.g. nav-bar on iOS — so an aggregate
+        // `ok: true` is still reachable on partial platforms). Either way,
+        // void-discarding the promise here can't surface as an unhandled
+        // rejection.
+        void setSystemBarsStyle({
+            statusBar: style,
+            navigationBar: { style },
+        });
+    }
+    onMounted(() => {
+        if (!isAvailable())
+            return;
+        // A reactive effect that reads `theme.name` so the effect re-runs
+        // whenever the theme controller's underlying signal changes —
+        // including the live system-flip path inside ThemeProvider. No
+        // side effects in render; nothing to subscribe/unsubscribe by
+        // hand.
+        runner = effect(() => {
+            apply(theme.name);
+        });
+    });
+    onUnmounted(() => {
+        runner?.stop();
+        runner = undefined;
+    });
+    // Reference the prop so the type checker doesn't flag it as unused
+    // while it's still reserved. Drop this when the matchBackground
+    // implementation lands.
+    void props.matchBackground;
+    // Zero-size, out-of-flow placeholder. Avoids `display: none` —
+    // Lynx can leak unstyled text paint through display:none overlays in
+    // some builds (see lynx-display-none caveat); zero-size + absolute is
+    // the safer shape.
+    return () => (_jsx("view", { style: { position: 'absolute', width: '0px', height: '0px', opacity: 0 } }));
+});
+//# sourceMappingURL=StatusBarSync.js.map

package/dist/theme/StatusBarSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBarSync.js","sourceRoot":"","sources":["../../src/theme/StatusBarSync.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAe,MAAM,YAAY,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAa1C,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,wEAAwE;IACxE,0EAA0E;IAC1E,6EAA6E;IAC7E,MAAM,KAAK,GAAG,eAAe,CAAC;IAC9B,IAAI,WAAW,GAAkB,IAAI,CAAC;IACtC,IAAI,MAAwC,CAAC;IAE7C,SAAS,KAAK,CAAC,IAAY;QACvB,IAAI,IAAI,KAAK,WAAW;YAAE,OAAO;QACjC,WAAW,GAAG,IAAI,CAAC;QACnB,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAChC,+DAA+D;QAC/D,mEAAmE;QACnE,+BAA+B;QAC/B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,KAAK,GAAmB,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QACpE,4DAA4D;QAC5D,kEAAkE;QAClE,wDAAwD;QACxD,gEAAgE;QAChE,mEAAmE;QACnE,iEAAiE;QACjE,aAAa;QACb,KAAK,kBAAkB,CAAC;YACpB,SAAS,EAAE,KAAK;YAChB,aAAa,EAAE,EAAE,KAAK,EAAE;SAC3B,CAAC,CAAC;IACP,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO;QAC3B,kEAAkE;QAClE,8DAA8D;QAC9D,+DAA+D;QAC/D,8DAA8D;QAC9D,QAAQ;QACR,MAAM,GAAG,MAAM,CAAC,GAAG,EAAE;YACjB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,WAAW,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,IAAI,EAAE,CAAC;QACf,MAAM,GAAG,SAAS,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,mEAAmE;IACnE,gEAAgE;IAChE,wBAAwB;IACxB,KAAK,KAAK,CAAC,eAAe,CAAC;IAE3B,+DAA+D;IAC/D,qEAAqE;IACrE,sEAAsE;IACtE,mBAAmB;IACnB,OAAO,GAAG,EAAE,CAAC,CACT,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,GAAI,CACrF,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,144 @@
+/**
+ * `<ThemeProvider>` and `useTheme()` — the design-system-neutral theme engine.
+ *
+ * Themes are CSS classes containing scoped `--color-*` / `--radius-*`
+ * variable definitions; descendants of an element with the class inherit
+ * those variables (Lynx has `enableCSSInheritance: true` in its
+ * layout-pipeline defaults), and design-system components are built to read
+ * those vars directly.
+ *
+ * Theme *data* comes from the design-system package: it seeds the registry at
+ * module load (`registerTheme()` in `./registry.ts`) and ships a generated CSS
+ * class per static theme so the first frame paints correctly. Custom themes —
+ * including tenant themes fetched at runtime — register the same way so
+ * `followSystem` and `toggle()` know what to pick.
+ *
+ * Usage (here with `@sigx/lynx-daisyui`'s themes):
+ *
+ * ```tsx
+ * import { ThemeProvider, useTheme } from '@sigx/lynx-daisyui';
+ *
+ * // System-aware (default): picks the first registered light/dark theme from
+ * // the OS scheme, live-flips when the user toggles dark mode.
+ * defineApp(() => () => (
+ *     <ThemeProvider>
+ *         <App />
+ *     </ThemeProvider>
+ * ));
+ *
+ * // Pin a specific theme — ignores system appearance.
+ * <ThemeProvider initial="daisy-light">…</ThemeProvider>
+ *
+ * // Custom light/dark pair under followSystem.
+ * <ThemeProvider light="daisy-cupcake" dark="daisy-synthwave">…</ThemeProvider>
+ * ```
+ */
+import { type Define } from '@sigx/lynx';
+/**
+ * Theme class applied to the provider's host view. Plain string — a design
+ * system layers a literal union on top for autocomplete (e.g. daisyui's
+ * `DaisyTheme`). Multi-class compositions like `'daisy-light daisy-rounded'`
+ * are accepted.
+ */
+export type ThemeName = string & {};
+export interface ThemeController {
+    /** Current theme class. Reactive — read inside render/effect to track. */
+    readonly name: ThemeName;
+    /**
+     * Whether the theme is currently being driven by the system color
+     * scheme (true when no `initial` was passed and `set()` hasn't been
+     * called since mount). UI like a settings screen can read this to show
+     * a "Follow system" indicator.
+     */
+    readonly followingSystem: boolean;
+    /**
+     * Replace the active theme. Pins the choice — subsequent system
+     * appearance changes won't override it (until `followSystem()` is called).
+     */
+    set(name: ThemeName): void;
+    /**
+     * Flip to the paired theme — light ↔ dark by default; follows the `pair`
+     * declared in `registerTheme()`, or the first theme of the opposite
+     * variant.
+     */
+    toggle(): void;
+    /**
+     * Resume following system appearance. Equivalent to mounting fresh
+     * with no `initial` prop. Useful for a "Reset to system" button.
+     */
+    followSystem(): void;
+    /**
+     * Current global text-scale multiplier (`1` = the theme's default ramp).
+     * Reactive — read inside render/effect to track. Orthogonal to the theme:
+     * `set()` / `toggle()` leave it untouched.
+     */
+    readonly fontScale: number;
+    /**
+     * Set the global text-scale multiplier — the `--text-*` ramp is re-emitted
+     * at `defaultPx × scale`. Persists across theme switches, so it's the place
+     * to wire a user accessibility preference or a backend-driven setting (e.g.
+     * `setFontScale(1.25)`). Inherits into nested `<ThemeProvider>` subtrees.
+     */
+    setFontScale(scale: number): void;
+}
+/**
+ * Access the active theme controller. Resolves to the nearest
+ * `<ThemeProvider>`'s controller (a content sub-scope), or — at the app root
+ * and in *headless* code with no provider mounted — the global controller
+ * (`themeController`). Never throws: theme control is reachable from anywhere.
+ * For control that must always target the app/OS theme regardless of scope
+ * (e.g. a status-bar sync), import `themeController`.
+ */
+export declare const useTheme: import("@sigx/runtime-core").InjectableFunction<ThemeController>;
+export type ThemeProviderProps = 
+/**
+ * Pin the initial theme. When set, the provider ignores system
+ * appearance until `controller.followSystem()` is called. When
+ * omitted, the provider follows the OS color scheme and live-flips
+ * with it.
+ */
+Define.Prop<'initial', ThemeName, false>
+/**
+ * Theme to use when the system color scheme is `'light'`. Defaults to
+ * the first registered light theme. Only consulted while
+ * `followingSystem` is true.
+ */
+ & Define.Prop<'light', ThemeName, false>
+/**
+ * Theme to use when the system color scheme is `'dark'`. Defaults to
+ * the first registered dark theme. Only consulted while
+ * `followingSystem` is true.
+ */
+ & Define.Prop<'dark', ThemeName, false>
+/**
+ * Initial global text-scale multiplier (`1` = default ramp). Seeds the
+ * controller's `fontScale`; change it later via `controller.setFontScale()`.
+ * On the root provider an explicit value wins over any scale a headless
+ * caller set before mount.
+ */
+ & Define.Prop<'fontScale', number, false>
+/** Extra classes appended to the theme class on the host view. */
+ & Define.Prop<'class', string, false>
+/** Extra inline style on the host view. Merged after the base flex-fill defaults. */
+ & Define.Prop<'style', Record<string, string | number>, false> & Define.Slot<'default'>;
+/**
+ * Wraps children in a `<view class={theme}>` so the CSS variables defined
+ * inside the theme class inherit down to every descendant.
+ *
+ * Layout: the root provider defaults to flex-fill long-form so the wrapper
+ * doesn't collapse between ancestors that flex (e.g. `<SafeAreaProvider>`)
+ * and descendants that need a sized parent (`<SafeAreaView>`). A nested
+ * provider is a content island and sizes to its content instead — flex-fill's
+ * `flexBasis: 0` computes to height 0 inside scroll-view content, where
+ * nothing grows it back (#269). Consumers override via `style`.
+ *
+ * Theme name is held in an *object* signal (not a primitive) so literal-union
+ * types a DS layers on survive — `signal<T>` widens primitive literals to
+ * plain `string` via `Widen<T>`.
+ */
+export declare const ThemeProvider: import("@sigx/runtime-core").ComponentFactory<ThemeProviderProps, void, {
+    default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
+}>;
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';
+export type { Theme, ThemePalette, ThemeRadius, ThemeSizes, ThemeVariant, } from './registry.js';
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EASH,KAAK,MAAM,EACd,MAAM,YAAY,CAAC;AA8HpB;;;;;GAKG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,EAAE,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B;;;;OAIG;IACH,MAAM,IAAI,IAAI,CAAC;IACf;;;OAGG;IACH,YAAY,IAAI,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,kEAA2D,CAAC;AAmBjF,MAAM,MAAM,kBAAkB;AAC1B;;;;;GAKG;AACD,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;AAC1C;;;;GAIG;GACD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;AACxC;;;;GAIG;GACD,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC;AACvC;;;;;GAKG;GACD,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC;AACzC,kEAAkE;GAChE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC;AACrC,qFAAqF;GACnF,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAC5D,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAE7B;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa;;EA+KxB,CAAC;AAGH,OAAO,EACH,UAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GACV,MAAM,eAAe,CAAC;AACvB,YAAY,EACR,KAAK,EACL,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,GACf,MAAM,eAAe,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<ThemeProvider>` and `useTheme()` — the design-system-neutral theme engine.
+ *
+ * Themes are CSS classes containing scoped `--color-*` / `--radius-*`
+ * variable definitions; descendants of an element with the class inherit
+ * those variables (Lynx has `enableCSSInheritance: true` in its
+ * layout-pipeline defaults), and design-system components are built to read
+ * those vars directly.
+ *
+ * Theme *data* comes from the design-system package: it seeds the registry at
+ * module load (`registerTheme()` in `./registry.ts`) and ships a generated CSS
+ * class per static theme so the first frame paints correctly. Custom themes —
+ * including tenant themes fetched at runtime — register the same way so
+ * `followSystem` and `toggle()` know what to pick.
+ *
+ * Usage (here with `@sigx/lynx-daisyui`'s themes):
+ *
+ * ```tsx
+ * import { ThemeProvider, useTheme } from '@sigx/lynx-daisyui';
+ *
+ * // System-aware (default): picks the first registered light/dark theme from
+ * // the OS scheme, live-flips when the user toggles dark mode.
+ * defineApp(() => () => (
+ *     <ThemeProvider>
+ *         <App />
+ *     </ThemeProvider>
+ * ));
+ *
+ * // Pin a specific theme — ignores system appearance.
+ * <ThemeProvider initial="daisy-light">…</ThemeProvider>
+ *
+ * // Custom light/dark pair under followSystem.
+ * <ThemeProvider light="daisy-cupcake" dark="daisy-synthwave">…</ThemeProvider>
+ * ```
+ */
+import { component, defineInjectable, defineProvide, effect, onMounted, onUnmounted, signal, untrack, } from '@sigx/lynx';
+import { useSystemColorScheme } from '@sigx/lynx-appearance';
+import { colorsOf, fallbackPalette, hasStaticCss, pickThemeFor, radiusOf, sizesOf, variantOf, } from './registry.js';
+import { globalThemeState, makeThemeController, normalizeFontScale, themeController, } from './theme-state.js';
+// Control dimensions are expressed as multiples of two base units
+// (`--size-field`, `--size-selector`). Lynx's runtime CSS engine is unproven
+// for `calc(var() * n)`, so when a theme overrides a base unit we do the
+// multiplication here and emit literal px. Bases must be px (engine-safe, like
+// colors); a non-px base sets only the base var and leaves the `.lynx-zero`
+// defaults in place. Multiples mirror the defaults in `styles/tokens.css`.
+const FIELD_STEPS = { xs: 6, sm: 8, md: 12, lg: 16 };
+const SELECTOR_STEPS = {
+    'checkbox-xs': 4, 'checkbox-sm': 5, 'checkbox-md': 6, 'checkbox-lg': 8,
+    'toggle-width-xs': 8, 'toggle-width-sm': 10, 'toggle-width-md': 12, 'toggle-width-lg': 14,
+    'toggle-height-xs': 6, 'toggle-height-sm': 6, 'toggle-height-md': 7, 'toggle-height-lg': 8,
+    'toggle-thumb-xs': 4, 'toggle-thumb-sm': 4, 'toggle-thumb-md': 5, 'toggle-thumb-lg': 6,
+    'badge-xs': 4, 'badge-sm': 5, 'badge-md': 6, 'badge-lg': 8,
+};
+// Default text ramp (px) — MUST mirror `--text-*` in `styles/tokens.css`
+// (iOS-aligned, 17px base). The global `fontScale` multiplies these and emits
+// literal px (no `calc(var() * n)` — unproven in Lynx).
+const FONT_DEFAULTS = {
+    'xs': 12, 'sm': 14, 'base': 17, 'lg': 20, 'xl': 24, '2xl': 28, '3xl': 34,
+};
+const pxValue = (v) => {
+    const m = /^\s*(\d+(?:\.\d+)?)px\s*$/.exec(v);
+    return m ? Number(m[1]) : undefined;
+};
+/** Emit a theme's `sizes` overrides as literal-px CSS custom properties. */
+function applySizeVars(style, sizes) {
+    if (sizes.field) {
+        style['--size-field'] = sizes.field;
+        const base = pxValue(sizes.field);
+        if (base !== undefined) {
+            for (const k in FIELD_STEPS)
+                style[`--size-${k}`] = `${base * FIELD_STEPS[k]}px`;
+        }
+    }
+    if (sizes.selector) {
+        style['--size-selector'] = sizes.selector;
+        const base = pxValue(sizes.selector);
+        if (base !== undefined) {
+            for (const k in SELECTOR_STEPS)
+                style[`--${k}`] = `${base * SELECTOR_STEPS[k]}px`;
+        }
+    }
+}
+/**
+ * Emit the text ramp scaled by `fontScale` as `--text-*` literal px. Always
+ * emits every step — even at `1` (the literal defaults) — because Lynx's
+ * `setProperty` only merges and never clears: skipping at `1` would leave a
+ * previously-emitted larger ramp stuck after a reset. A nested provider seeds
+ * its scale from the inherited ambient value, so emitting here re-states the
+ * same ramp rather than clobbering the root's scaled one.
+ */
+function applyFontScale(style, fontScale) {
+    for (const k in FONT_DEFAULTS) {
+        style[`--text-${k}`] = `${Math.round(FONT_DEFAULTS[k] * fontScale)}px`;
+    }
+}
+/**
+ * The full custom-property set for a theme — colors, any radius/size overrides,
+ * and the `fontScale`-adjusted text ramp. Applied at runtime via the Lynx
+ * `setProperty` API (see
+ * `<ThemeProvider>`), NOT the inline `style` attribute: Lynx does not honor
+ * custom properties declared inline in this toolchain, but `setProperty`
+ * registers real, inheritable ones — the documented way to theme via CSS
+ * variables (https://lynxjs.org/guide/styling/custom-theming).
+ */
+function buildThemeVars(name, fontScale) {
+    const palette = colorsOf(name) ?? fallbackPalette();
+    const radius = radiusOf(name);
+    const sizes = sizesOf(name);
+    const vars = {};
+    if (palette) {
+        for (const key in palette)
+            vars[`--color-${key}`] = palette[key];
+    }
+    if (radius) {
+        if (radius.selector)
+            vars['--radius-selector'] = radius.selector;
+        if (radius.field)
+            vars['--radius-field'] = radius.field;
+        if (radius.box)
+            vars['--radius-box'] = radius.box;
+    }
+    if (sizes)
+        applySizeVars(vars, sizes);
+    applyFontScale(vars, fontScale);
+    return vars;
+}
+/** Unique host id per provider instance so `getElementById` targets its own subtree. */
+let themeIdSeq = 0;
+/**
+ * Access the active theme controller. Resolves to the nearest
+ * `<ThemeProvider>`'s controller (a content sub-scope), or — at the app root
+ * and in *headless* code with no provider mounted — the global controller
+ * (`themeController`). Never throws: theme control is reachable from anywhere.
+ * For control that must always target the app/OS theme regardless of scope
+ * (e.g. a status-bar sync), import `themeController`.
+ */
+export const useTheme = defineInjectable(() => themeController);
+/**
+ * Nesting-depth marker. The outermost `<ThemeProvider>` sees depth 0 and binds
+ * the global singleton (so headless `themeController` mutations render and the
+ * OS bars track it); a nested provider sees >= 1 and creates its own local
+ * state — a content sub-scope that recolors its subtree without touching the
+ * global theme or the system bars.
+ */
+const useThemeDepth = defineInjectable(() => 0);
+/**
+ * Ambient text scale inherited by nested providers. A nested `<ThemeProvider>`
+ * with no explicit `fontScale` prop seeds from this (the enclosing scale,
+ * default 1) instead of resetting to 1 — so the root's scale flows down through
+ * color sub-scopes. Each provider re-provides its own current scale.
+ */
+const useAmbientFontScale = defineInjectable(() => 1);
+/**
+ * Wraps children in a `<view class={theme}>` so the CSS variables defined
+ * inside the theme class inherit down to every descendant.
+ *
+ * Layout: the root provider defaults to flex-fill long-form so the wrapper
+ * doesn't collapse between ancestors that flex (e.g. `<SafeAreaProvider>`)
+ * and descendants that need a sized parent (`<SafeAreaView>`). A nested
+ * provider is a content island and sizes to its content instead — flex-fill's
+ * `flexBasis: 0` computes to height 0 inside scroll-view content, where
+ * nothing grows it back (#269). Consumers override via `style`.
+ *
+ * Theme name is held in an *object* signal (not a primitive) so literal-union
+ * types a DS layers on survive — `signal<T>` widens primitive literals to
+ * plain `string` via `Widen<T>`.
+ */
+export const ThemeProvider = component(({ props, slots }) => {
+    const systemScheme = useSystemColorScheme();
+    // The underlying signal widens to PrimitiveSignal<string> via Widen<T>;
+    // cast at read sites to keep the narrow union throughout the component.
+    const readScheme = () => systemScheme.value;
+    // Root vs. nested. The outermost provider (depth 0) binds the global
+    // singleton — so headless `themeController` mutations render here and the OS
+    // bars (via StatusBarSync) follow this theme. A nested provider gets its own
+    // local state: a content sub-scope that overrides its subtree only.
+    const depth = useThemeDepth();
+    const isRoot = depth === 0;
+    defineProvide(useThemeDepth, () => depth + 1);
+    // Stable id for the host view so the runtime `setProperty` call (below) can
+    // target it. Unique per instance so nested providers theme their own subtree.
+    const hostId = `zero-theme-${++themeIdSeq}`;
+    // A nested provider with no explicit `fontScale` inherits the enclosing
+    // scale (default 1 at the root), so the root's scale flows down through
+    // color sub-scopes rather than resetting. An explicit prop overrides it.
+    const ambientFontScale = useAmbientFontScale();
+    const seedScale = normalizeFontScale(props.fontScale, ambientFontScale);
+    const state = isRoot
+        ? globalThemeState
+        : signal(props.initial
+            ? { name: props.initial, following: false, fontScale: seedScale }
+            : {
+                name: readScheme() === 'dark'
+                    ? (props.dark ?? pickThemeFor('dark'))
+                    : (props.light ?? pickThemeFor('light')),
+                following: true,
+                fontScale: seedScale,
+            });
+    // Seed the root from props/system. An explicit `initial` pin is author
+    // intent and wins. With no `initial`, reflect the current system scheme into
+    // the first render — but only while `following`, so a theme a headless
+    // caller set before this mounted is respected, not clobbered. The follow
+    // effect below keeps it in sync afterwards.
+    if (isRoot) {
+        if (props.initial) {
+            state.name = props.initial;
+            state.following = false;
+        }
+        else if (state.following) {
+            state.name = readScheme() === 'dark'
+                ? (props.dark ?? pickThemeFor('dark'))
+                : (props.light ?? pickThemeFor('light'));
+        }
+        // Explicit author intent wins; otherwise keep whatever scale a headless
+        // caller may have set before this mounted (default 1).
+        if (props.fontScale !== undefined) {
+            state.fontScale = normalizeFontScale(props.fontScale, state.fontScale);
+        }
+    }
+    const controller = isRoot
+        ? themeController
+        : makeThemeController(state);
+    defineProvide(useTheme, () => controller);
+    // Re-provide this scope's current scale so nested providers inherit it.
+    defineProvide(useAmbientFontScale, () => state.fontScale);
+    // Follow the system color scheme while `following`. Reactive: re-runs when
+    // `following` flips true (e.g. `controller.followSystem()`, including the
+    // headless `themeController`) or when the OS scheme changes, and writes the
+    // matching theme. Reading `state.following` and `systemScheme.value` tracks
+    // them; the `name` write is `untrack`ed so it can't re-trigger the effect.
+    // Created on mount (the native publisher may populate the scheme between
+    // setup and mount) and torn down on unmount.
+    let follow;
+    let applyVars;
+    onMounted(() => {
+        follow = effect(() => {
+            const following = state.following;
+            const scheme = readScheme();
+            if (!following)
+                return;
+            const next = scheme === 'dark'
+                ? (props.dark ?? pickThemeFor('dark'))
+                : (props.light ?? pickThemeFor('light'));
+            untrack(() => {
+                if (state.name !== next)
+                    state.name = next;
+            });
+        });
+        // Static themes are themed by their generated CSS class (applied on
+        // the host below), which resolves on the very first frame. This
+        // `setProperty` path additionally serves runtime-registered themes
+        // (`registerTheme`, no shipped CSS class) — applied once they're
+        // selected post-mount, where it lands reliably. Reading `state.name`
+        // and `state.fontScale` (via buildThemeVars) tracks them, so this
+        // re-runs on every theme change and every `setFontScale`.
+        applyVars = effect(() => {
+            const vars = buildThemeVars(state.name, state.fontScale);
+            if (typeof lynx !== 'undefined') {
+                // `setProperty` isn't implemented for every element on every
+                // host — notably web (`@lynx-js/web-core`), where it throws on
+                // the background thread and aborts the whole card render.
+                // Degrade gracefully: apply runtime-registered theme vars where
+                // supported; static themes still resolve via their generated
+                // CSS class (applied on the host element).
+                const el = lynx.getElementById(hostId);
+                if (el && typeof el.setProperty === 'function') {
+                    try {
+                        el.setProperty(vars);
+                    }
+                    catch {
+                        /* host rejected runtime setProperty (e.g. web) */
+                    }
+                }
+            }
+        });
+    });
+    onUnmounted(() => {
+        follow?.stop();
+        follow = undefined;
+        applyVars?.stop();
+        applyVars = undefined;
+    });
+    return () => {
+        // Theme COLORS and any radius/size overrides are applied as real,
+        // inheritable CSS custom properties via the Lynx `setProperty` runtime
+        // API (see the `applyVars` effect above) — Lynx does NOT honor custom
+        // properties declared through the inline `style` attribute in this
+        // toolchain. The root background/text are painted here from palette
+        // literals (real properties, not custom props) so the surface is themed
+        // on first paint; descendants resolve `var(--color-*)` once setProperty
+        // has run. The `lynx-zero` base class supplies structural token defaults.
+        const palette = colorsOf(state.name) ?? fallbackPalette();
+        // Static themes ship a generated CSS class, so `state.name` alone
+        // paints on the first frame. A runtime-registered theme has no class —
+        // fall back to its variant's static class for the first frame; the
+        // `setProperty` effect above then swaps in its exact palette post-mount.
+        const themeClass = hasStaticCss(state.name)
+            ? state.name
+            : `${pickThemeFor(variantOf(state.name) ?? 'light')} ${state.name}`;
+        // Root: flex-fill long-form (see the component doc comment). Nested:
+        // content-sized — a sub-scope inside scroll content would otherwise
+        // collapse to zero height via `flexBasis: 0` (#269).
+        const style = isRoot
+            ? {
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 0,
+                minHeight: 0,
+                display: 'flex',
+                flexDirection: 'column',
+            }
+            : {
+                display: 'flex',
+                flexDirection: 'column',
+            };
+        if (palette) {
+            style.backgroundColor = palette['base-100'];
+            style.color = palette['base-content'];
+        }
+        if (props.style)
+            Object.assign(style, props.style);
+        return (_jsx("view", { id: hostId, class: `lynx-zero ${themeClass}${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
+    };
+});
+// Re-export registry helpers so consumers only need one import source.
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/theme/color-mix.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Engine-side color mixing.
+ *
+ * Lynx's CSS engine has no `color-mix()` and can't alpha-compose `var()`
+ * colors — but theme palettes are plain JS data, so tints can be computed
+ * where the palette lives instead of in CSS. `registerTheme()` uses this to
+ * materialize the `*-soft` tokens (see `./registry.ts`).
+ *
+ * Accepted inputs are the same "engine-safe" color strings themes already
+ * use: `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)`, `rgba(r, g, b, a)`.
+ * Anything else (named colors, `oklch()`, `var()`) is not parseable here —
+ * `mixColors` then falls back to the base color unchanged, which degrades to
+ * a neutral surface rather than a wrong tint.
+ */
+/**
+ * Mix `ratio` of `color` into `base` (linear sRGB per-channel, like
+ * `color-mix(in srgb, color ratio, base)`), returning a hex string. If either
+ * input can't be parsed, returns `base` unchanged.
+ */
+export declare function mixColors(color: string, base: string, ratio: number): string;
+//# sourceMappingURL=color-mix.d.ts.map

package/dist/theme/color-mix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mix.d.ts","sourceRoot":"","sources":["../../src/theme/color-mix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAwCH;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAS5E"}