@sigx/lynx-daisyui 0.4.0 → 0.4.2

package/dist/styles/components/typography.css

@@ -1,5 +1,30 @@
-/* Typography — text color utilities for semantic colors */
+/*
+ * Daisy semantic color utilities.
+ *
+ *   bg-<token>:   every token in DAISY_COLOR_TOKEN_LIST (semantics +
+ *                 their -content variants, plus the three base surfaces
+ *                 and base-content).
+ *   text-<token>: semantic tokens + their -content variants, plus
+ *                 base-content. The three base surface tokens
+ *                 (base-100/200/300) are deliberately omitted — text the
+ *                 colour of the surface it sits on is never useful, and
+ *                 keeping the class out prevents accidental "invisible
+ *                 text" footguns.
+ *
+ * Hand-written rules rather than Tailwind-generated utilities, so they
+ * survive purge regardless of whether a consumer's source statically
+ * references the class. This matters for daisy components that compose
+ * the class dynamically — e.g. `class={`bg-${props.background}`}` in
+ * `<NavDrawer>` — which Tailwind's source scanner can't see. Without
+ * these always-on rules, `<NavDrawer background="primary">` paints
+ * transparent because `bg-primary` got purged.
+ *
+ * Lynx specifics: `var(--color-*)` resolves only from CSS-pipeline rules
+ * (this file, daisy themes), never from inline `style.backgroundColor`.
+ * Keep daisy surface tokens flowing through a class.
+ */
 
+/* Text */
 .text-primary { color: var(--color-primary); }
 .text-primary-content { color: var(--color-primary-content); }
 .text-secondary { color: var(--color-secondary); }
@@ -18,15 +43,24 @@
 .text-error { color: var(--color-error); }
 .text-error-content { color: var(--color-error-content); }
 
-/* Background color utilities for semantic colors */
+/* Background */
 .bg-primary { background-color: var(--color-primary); }
+.bg-primary-content { background-color: var(--color-primary-content); }
 .bg-secondary { background-color: var(--color-secondary); }
+.bg-secondary-content { background-color: var(--color-secondary-content); }
 .bg-accent { background-color: var(--color-accent); }
+.bg-accent-content { background-color: var(--color-accent-content); }
 .bg-neutral { background-color: var(--color-neutral); }
+.bg-neutral-content { background-color: var(--color-neutral-content); }
 .bg-base-100 { background-color: var(--color-base-100); }
 .bg-base-200 { background-color: var(--color-base-200); }
 .bg-base-300 { background-color: var(--color-base-300); }
+.bg-base-content { background-color: var(--color-base-content); }
 .bg-info { background-color: var(--color-info); }
+.bg-info-content { background-color: var(--color-info-content); }
 .bg-success { background-color: var(--color-success); }
+.bg-success-content { background-color: var(--color-success-content); }
 .bg-warning { background-color: var(--color-warning); }
+.bg-warning-content { background-color: var(--color-warning-content); }
 .bg-error { background-color: var(--color-error); }
+.bg-error-content { background-color: var(--color-error-content); }

package/dist/styles/index.css

@@ -1,8 +1,12 @@
-/* @sigx/lynx-daisyui — all themes + component styles */
+/* @sigx/lynx-daisyui — base tokens + component styles.
+ *
+ * Theme COLORS live in the theme registry (src/theme/registry.ts) and are
+ * applied as inline CSS custom properties by <ThemeProvider>; only the
+ * theme-agnostic structural tokens ship as CSS, under the `.daisy` base
+ * class. */
 
-/* Themes */
-@import './themes/light.css';
-@import './themes/dark.css';
+/* Structural design tokens (.daisy) + composable shape modifiers */
+@import './themes/tokens.css';
 @import './themes/shapes.css';
 
 /* Base reset */

package/dist/styles/themes/shapes.css

@@ -1,5 +1,6 @@
 /* Shape variants — override roundness tokens */
-/* Combine with a color theme: class="daisy-light daisy-rounded" */
+/* Compose with the base via ThemeProvider's `class` prop, e.g.
+   <ThemeProvider class="daisy-rounded"> → host class="daisy daisy-rounded" */
 
 .daisy-flat {
   --rounded-box: 0px;

package/dist/styles/themes/{dark.css → tokens.css}

@@ -1,37 +1,13 @@
-/* DaisyUI Dark Theme — overrides only color tokens */
-/* Scoped under .daisy-dark; CSS inheritance propagates to descendants */
-
-.daisy-dark {
-  /* Apply base colors to the theme root */
-  background-color: #1d232a;
-  color: #a6adbb;
-
-  /* Semantic colors */
-  --color-primary: #7582ff;
-  --color-primary-content: #050617;
-  --color-secondary: #ff71cf;
-  --color-secondary-content: #190211;
-  --color-accent: #00e7d0;
-  --color-accent-content: #001210;
-  --color-neutral: #2a323c;
-  --color-neutral-content: #a6adbb;
-
-  /* Base colors */
-  --color-base-100: #1d232a;
-  --color-base-200: #191e24;
-  --color-base-300: #343b46;
-  --color-base-content: #a6adbb;
-
-  /* Status colors */
-  --color-info: #00b4fa;
-  --color-info-content: #000000;
-  --color-success: #00a96e;
-  --color-success-content: #000000;
-  --color-warning: #ffc100;
-  --color-warning-content: #000000;
-  --color-error: #ff676a;
-  --color-error-content: #000000;
+/* Theme-agnostic structural design tokens.
+ *
+ * Theme COLORS come from the theme registry (src/theme/registry.ts) and are
+ * applied as inline CSS custom properties by <ThemeProvider>. These
+ * radius / sizing / component tokens are identical across themes, so they
+ * ship once here under the `.daisy` base class that <ThemeProvider> puts on
+ * its host view; CSS inheritance propagates them to every descendant. A theme
+ * may still override roundness via its `radius` field. */
 
+.daisy {
   /* ── Roundness ── */
   --rounded-box: 16px;
   --rounded-btn: 8px;

package/dist/theme/StatusBarSync.d.ts

@@ -0,0 +1,41 @@
+/**
+ * `<StatusBarSync />` — keeps the device status-bar (and Android's
+ * navigation-bar) tint legible against the active daisyui 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, {}>;

package/dist/theme/StatusBarSync.js

@@ -0,0 +1,85 @@
+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 daisyui 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 { useTheme } from './ThemeProvider.js';
+import { variantOf } from './registry.js';
+export const StatusBarSync = component(({ props }) => {
+    const theme = useTheme();
+    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 } }));
+});

package/dist/theme/ThemeProvider.d.ts

@@ -2,54 +2,92 @@
  * `<ThemeProvider>` and `useTheme()` — daisyui theme switching for
  * `@sigx/lynx-daisyui`.
  *
- * The package ships two color themes (`daisy-light`, `daisy-dark`) plus
- * style modifier themes (`daisy-rounded`, `daisy-flat`). Each is a CSS
- * class containing scoped `--color-*` / `--radius-*` / `--border-*`
- * variable definitions; descendants of an element with the class
- * inherit those variables (Lynx has `enableCSSInheritance: true` in
- * its layout-pipeline defaults), and the daisyui components are built
- * to read those vars directly.
+ * 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 the daisyui components are built to read
+ * those vars directly.
+ *
+ * Six color themes ship in the box (`daisy-light`, `daisy-dark`,
+ * `daisy-cupcake`, `daisy-emerald`, `daisy-synthwave`, `daisy-dracula`)
+ * plus style modifier themes (`daisy-rounded`, `daisy-flat`). Custom themes
+ * register their light/dark variant via `registerTheme()` in
+ * `./registry.ts` so `followSystem` and `toggle()` know what to pick.
  *
  * Usage:
  *
  * ```tsx
  * import { ThemeProvider, useTheme } from '@sigx/lynx-daisyui';
  *
+ * // System-aware (default): picks daisy-light or daisy-dark from the OS,
+ * // live-flips when the user toggles dark mode.
  * defineApp(() => () => (
- *     <ThemeProvider initial="daisy-light">
+ *     <ThemeProvider>
  *         <App />
  *     </ThemeProvider>
  * ));
  *
- * // Anywhere inside:
- * const theme = useTheme();
- * theme.toggle();             // daisy-light ↔ daisy-dark
- * theme.set('daisy-dark');    // explicit
- * theme.name;                 // 'daisy-light' | 'daisy-dark' | custom string
- * ```
+ * // Pin a specific theme — ignores system appearance.
+ * <ThemeProvider initial="daisy-light">…</ThemeProvider>
  *
- * For multi-class compositions (color + modifier), set a custom string:
- * `theme.set('daisy-light daisy-rounded')`.
+ * // Custom light/dark pair under followSystem.
+ * <ThemeProvider light="daisy-cupcake" dark="daisy-synthwave">…</ThemeProvider>
+ * ```
  */
 import { type Define } from '@sigx/lynx';
+import type { DaisyColor } from '../shared/styles.js';
+/**
+ * Declaration-merge extension: add a typed `variant` prop to `<Icon>`,
+ * `<FaSolidIcon>`, `<LucideIcon>`, etc. Daisy owns the entire concept
+ * — `@sigx/lynx-icons` has no notion of variants. Without this merge
+ * being in scope (i.e. an app that doesn't depend on daisy), `<Icon
+ * variant="…">` is a compile error: the property doesn't exist.
+ *
+ * The merge fires the moment any consumer imports anything from
+ * `@sigx/lynx-daisyui`. No subpath, no extra import dance.
+ */
+declare module '@sigx/lynx-icons' {
+    interface IconPropsExtensions {
+        /**
+         * Daisy color token applied as the icon's `fill`. Resolved at
+         * runtime through `useIconColorResolver` (provided by
+         * `<ThemeProvider>`) to the current theme's hex value.
+         */
+        variant?: DaisyColor;
+    }
+}
 /**
- * Theme class applied to the provider's host view. The two built-ins
- * (`daisy-light` / `daisy-dark`) get autocomplete; arbitrary strings
- * are accepted for custom themes or multi-class compositions like
- * `'daisy-light daisy-rounded'`.
+ * Theme class applied to the provider's host view. The six color themes
+ * get autocomplete; arbitrary strings are accepted for custom themes or
+ * multi-class compositions like `'daisy-light daisy-rounded'`.
  */
-export type DaisyTheme = 'daisy-light' | 'daisy-dark' | (string & {});
+export type DaisyTheme = 'daisy-light' | 'daisy-dark' | 'daisy-cupcake' | 'daisy-emerald' | 'daisy-synthwave' | 'daisy-dracula' | (string & {});
 export interface ThemeController {
     /** Current theme class. Reactive — read inside render/effect to track. */
     readonly name: DaisyTheme;
-    /** Replace the active theme. */
+    /**
+     * 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: DaisyTheme): void;
     /**
-     * Flip between `daisy-light` and `daisy-dark`. When the active
-     * theme is neither (custom / multi-class), defaults to
-     * `daisy-dark` on first call.
+     * Flip to the paired theme — for built-ins, light ↔ dark; for custom
+     * themes, 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;
 }
 /**
  * Access the enclosing daisyui theme controller. Throws when used
@@ -57,26 +95,44 @@ export interface ThemeController {
  */
 export declare const useTheme: import("@sigx/runtime-core").InjectableFunction<ThemeController>;
 export type ThemeProviderProps = 
-/** Initial theme class. Defaults to `daisy-light`. */
+/**
+ * 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', DaisyTheme, false>
+/**
+ * Theme to use when the system color scheme is `'light'`. Defaults to
+ * the first registered light theme (`daisy-light`). Only consulted
+ * while `followingSystem` is true.
+ */
+ & Define.Prop<'light', DaisyTheme, false>
+/**
+ * Theme to use when the system color scheme is `'dark'`. Defaults to
+ * the first registered dark theme (`daisy-dark`). Only consulted
+ * while `followingSystem` is true.
+ */
+ & Define.Prop<'dark', DaisyTheme, 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 daisyui CSS
- * variables defined inside `.daisy-light` / `.daisy-dark` inherit
- * down to every descendant.
+ * Wraps children in a `<view class={theme}>` so the daisyui CSS variables
+ * defined inside the theme class inherit down to every descendant.
  *
- * The host view 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>`). Consumers
- * override the layout via `style`.
+ * Layout: 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>`). Consumers override via
+ * `style`.
  *
  * Theme name is held in an *object* signal (not a primitive) so the
- * literal-union type survives — `signal<T>` widens primitive literals
- * to plain `string` via `Widen<T>`.
+ * literal-union type survives — `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, } from './registry.js';
+export type { Theme, ThemePalette, ThemeRadius, ThemeVariant } from './registry.js';

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<ThemeProvider>` and `useTheme()` — daisyui theme switching for
+ * `@sigx/lynx-daisyui`.
+ *
+ * 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 the daisyui components are built to read
+ * those vars directly.
+ *
+ * Six color themes ship in the box (`daisy-light`, `daisy-dark`,
+ * `daisy-cupcake`, `daisy-emerald`, `daisy-synthwave`, `daisy-dracula`)
+ * plus style modifier themes (`daisy-rounded`, `daisy-flat`). Custom themes
+ * register their light/dark variant via `registerTheme()` in
+ * `./registry.ts` so `followSystem` and `toggle()` know what to pick.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * import { ThemeProvider, useTheme } from '@sigx/lynx-daisyui';
+ *
+ * // System-aware (default): picks daisy-light or daisy-dark from the OS,
+ * // 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, onMounted, onUnmounted, signal, } from '@sigx/lynx';
+import { useIconColorResolver } from '@sigx/lynx-icons';
+import { useSystemColorScheme } from '@sigx/lynx-appearance';
+import { colorsOf, pairOf, pickThemeFor, radiusOf } from './registry.js';
+/**
+ * Access the enclosing daisyui theme controller. Throws when used
+ * outside `<ThemeProvider>` — install a provider at your app root.
+ */
+export const useTheme = defineInjectable(() => {
+    throw new Error('[lynx-daisyui] useTheme() called outside <ThemeProvider>. Wrap your app root with `<ThemeProvider>…</ThemeProvider>`.');
+});
+/**
+ * Wraps children in a `<view class={theme}>` so the daisyui CSS variables
+ * defined inside the theme class inherit down to every descendant.
+ *
+ * Layout: 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>`). Consumers override via
+ * `style`.
+ *
+ * Theme name is held in an *object* signal (not a primitive) so the
+ * literal-union type survives — `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;
+    // Seed: pin to `initial` if set, otherwise follow system.
+    const initialState = props.initial
+        ? { name: props.initial, following: false }
+        : {
+            name: readScheme() === 'dark'
+                ? (props.dark ?? pickThemeFor('dark'))
+                : (props.light ?? pickThemeFor('light')),
+            following: true,
+        };
+    const state = signal(initialState);
+    // Guard against re-applying the same theme on stray re-fires.
+    let lastApplied = state.following ? readScheme() : null;
+    function applySystem(scheme, force = false) {
+        if (!state.following)
+            return;
+        if (!force && lastApplied === scheme)
+            return;
+        lastApplied = scheme;
+        state.name = scheme === 'dark'
+            ? (props.dark ?? pickThemeFor('dark'))
+            : (props.light ?? pickThemeFor('light'));
+    }
+    const controller = {
+        get name() { return state.name; },
+        get followingSystem() { return state.following; },
+        set(next) {
+            state.name = next;
+            state.following = false;
+        },
+        toggle() {
+            state.name = pairOf(state.name);
+            state.following = false;
+        },
+        followSystem() {
+            state.following = true;
+            applySystem(readScheme(), /* force */ true);
+        },
+    };
+    defineProvide(useTheme, () => controller);
+    // Wire the daisy color resolver into `@sigx/lynx-icons`'s injectable
+    // so any `<Icon variant="primary">` rendered inside this subtree gets
+    // the daisy primary hex automatically. Reading `state.name` inside
+    // the resolver makes every icon's render re-run when the theme flips.
+    const resolver = (iconProps) => {
+        const variant = iconProps.variant;
+        if (!variant)
+            return undefined;
+        // Every theme's palette lives in the registry; fall back to daisy-light
+        // if the active theme isn't registered. SVG fills can't read CSS vars,
+        // so the resolved hex/rgb is substituted into the fill at render time.
+        const palette = colorsOf(state.name) ?? colorsOf('daisy-light');
+        return palette?.[variant];
+    };
+    defineProvide(useIconColorResolver, () => resolver);
+    // Subscribe to system color-scheme changes. Both PrimitiveSignal and
+    // Computed expose `.subscribe(fn)` returning an unsubscribe handle —
+    // we lean on the structural shape so this file doesn't pull
+    // @sigx/reactivity into its imports.
+    let unsubscribe;
+    onMounted(() => {
+        // Re-seed once mounted — covers the case where the native publisher
+        // populated `__globalProps` between setup and mount.
+        applySystem(readScheme());
+        const sig = systemScheme;
+        if (typeof sig.subscribe === 'function') {
+            unsubscribe = sig.subscribe(() => applySystem(readScheme()));
+        }
+    });
+    onUnmounted(() => {
+        unsubscribe?.();
+        unsubscribe = undefined;
+    });
+    return () => {
+        // Every theme is data. Apply its color tokens as inline CSS custom
+        // properties — Lynx inherits custom properties to descendants, so
+        // component classes resolve `var(--color-*)` against these (the same
+        // mechanism SafeAreaProvider uses for `--sat`/`--sal`). The `daisy`
+        // base class supplies theme-agnostic structural tokens (radius,
+        // sizing); a theme may override roundness via `radius`. The root
+        // background/text are painted from the palette literals (inline
+        // `var()` values don't resolve in Lynx).
+        const palette = colorsOf(state.name) ?? colorsOf('daisy-light');
+        const radius = radiusOf(state.name);
+        const style = {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: 0,
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: palette['base-100'],
+            color: palette['base-content'],
+        };
+        for (const key in palette) {
+            style[`--color-${key}`] = palette[key];
+        }
+        if (radius) {
+            if (radius.box)
+                style['--rounded-box'] = radius.box;
+            if (radius.btn)
+                style['--rounded-btn'] = radius.btn;
+            if (radius.badge)
+                style['--rounded-badge'] = radius.badge;
+            if (radius.tab)
+                style['--rounded-tab'] = radius.tab;
+            if (radius.selector)
+                style['--rounded-selector'] = radius.selector;
+            if (radius.toggle)
+                style['--rounded-toggle'] = radius.toggle;
+        }
+        if (props.style)
+            Object.assign(style, props.style);
+        return (_jsx("view", { class: `daisy${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
+    };
+});
+// Re-export registry helpers so consumers only need `@sigx/lynx-daisyui`.
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './registry.js';