@pyreon/ui-core 0.11.2 → 0.11.3

package/lib/index.d.ts

@@ -225,9 +225,10 @@ interface PyreonUIProps {
   theme: PyreonTheme;
   /**
    * Color mode: "light", "dark", or "system" (follows OS preference).
+   * Can be a signal or getter for reactive mode switching.
    * @default "light"
    */
-  mode?: ThemeModeInput | undefined;
+  mode?: ThemeModeInput | (() => ThemeModeInput) | undefined;
   /** Flip mode for a nested section (e.g. dark sidebar in light app). */
   inversed?: boolean | undefined;
   children?: VNodeChild;
@@ -247,11 +248,17 @@ declare function useMode(): ThemeMode;
  * Replaces the need for separate UnistyleProvider, RocketstyleProvider,
  * and ThemeProvider — one component, zero init.
  *
- * @example
+ * Mode can be a static string OR a signal/getter for reactive switching:
  * ```tsx
- * <PyreonUI theme={{ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }} mode="system">
- *   <App />
- * </PyreonUI>
+ * // Static
+ * <PyreonUI theme={theme} mode="dark">
+ *
+ * // Reactive signal
+ * const mode = signal<ThemeModeInput>("light")
+ * <PyreonUI theme={theme} mode={mode}>
+ *
+ * // System (follows OS preference)
+ * <PyreonUI theme={theme} mode="system">
  * ```
  */
 declare function PyreonUI({

package/lib/index.js

@@ -1,6 +1,6 @@
 import { ThemeContext, css, keyframes, styled } from "@pyreon/styler";
 import { createContext, h, provide, useContext } from "@pyreon/core";
-import { signal } from "@pyreon/reactivity";
+import { computed, signal } from "@pyreon/reactivity";
 import { enrichTheme } from "@pyreon/unistyle";
 
 //#region src/compose.ts
@@ -283,11 +283,12 @@ function getSystemMode() {
 	if (_systemMode) return _systemMode;
 	_systemMode = signal(_isBrowser && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
 	if (_isBrowser) matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-		_systemMode.set(e.matches ? "dark" : "light");
+		_systemMode?.set(e.matches ? "dark" : "light");
 	});
 	return _systemMode;
 }
-const ModeContext = createContext("light");
+/** Context value is a getter — consumers call it to read the current mode reactively. */
+const ModeContext = createContext(() => "light");
 const INVERSED = {
 	light: "dark",
 	dark: "light"
@@ -301,14 +302,9 @@ const INVERSED = {
 * const mode = useMode() // "light" | "dark"
 */
 function useMode() {
-	return useContext(ModeContext);
+	return useContext(ModeContext)();
 }
 let _autoInitDone = false;
-/**
-* Ensure the CSS engine is initialized. If init() was called manually,
-* this is a no-op. Otherwise, imports @pyreon/styler defaults.
-* Called once on first PyreonUI mount.
-*/
 function autoInit() {
 	if (_autoInitDone) return;
 	_autoInitDone = true;
@@ -319,28 +315,42 @@ function autoInit() {
 * Replaces the need for separate UnistyleProvider, RocketstyleProvider,
 * and ThemeProvider — one component, zero init.
 *
-* @example
+* Mode can be a static string OR a signal/getter for reactive switching:
 * ```tsx
-* <PyreonUI theme={{ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }} mode="system">
-*   <App />
-* </PyreonUI>
+* // Static
+* <PyreonUI theme={theme} mode="dark">
+*
+* // Reactive signal
+* const mode = signal<ThemeModeInput>("light")
+* <PyreonUI theme={theme} mode={mode}>
+*
+* // System (follows OS preference)
+* <PyreonUI theme={theme} mode="system">
 * ```
 */
 function PyreonUI({ theme, mode = "light", inversed, children }) {
 	autoInit();
-	let resolvedMode;
-	if (mode === "system") resolvedMode = getSystemMode()();
-	else resolvedMode = mode;
-	if (inversed) resolvedMode = INVERSED[resolvedMode];
+	const resolveMode = () => {
+		const raw = typeof mode === "function" ? mode() : mode;
+		const resolved = raw === "system" ? getSystemMode()() : raw;
+		return inversed ? INVERSED[resolved] : resolved;
+	};
+	const modeComputed = computed(resolveMode);
 	const enrichedTheme = enrichTheme(theme);
 	provide(ThemeContext, enrichedTheme);
 	provide(context, {
 		theme: enrichedTheme,
-		mode: resolvedMode,
-		isDark: resolvedMode === "dark",
-		isLight: resolvedMode === "light"
+		get mode() {
+			return modeComputed();
+		},
+		get isDark() {
+			return modeComputed() === "dark";
+		},
+		get isLight() {
+			return modeComputed() === "light";
+		}
 	});
-	provide(ModeContext, resolvedMode);
+	provide(ModeContext, () => modeComputed());
 	return children ?? null;
 }
 
@@ -351,7 +361,13 @@ const render = (content, attachProps) => {
 	const t = typeof content;
 	if (t === "string" || t === "number" || t === "boolean" || t === "bigint") return content;
 	if (Array.isArray(content)) return content;
-	if (typeof content === "function") return h(content, attachProps ?? {});
+	if (typeof content === "function") {
+		if (attachProps && "key" in attachProps) {
+			const { key, ...rest } = attachProps;
+			return h(content, rest);
+		}
+		return h(content, attachProps ?? {});
+	}
 	if (typeof content === "object") return content;
 	return content;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/ui-core",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -40,13 +40,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.2",
-    "@pyreon/styler": "^0.11.2",
-    "@pyreon/reactivity": "^0.11.2",
-    "@pyreon/unistyle": "^0.11.2"
+    "@pyreon/core": "^0.11.3",
+    "@pyreon/styler": "^0.11.3",
+    "@pyreon/reactivity": "^0.11.3",
+    "@pyreon/unistyle": "^0.11.3"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.2"
+    "@pyreon/typescript": "^0.11.3"
   }
 }

package/src/PyreonUI.tsx

@@ -1,6 +1,6 @@
 import type { VNodeChild } from "@pyreon/core"
 import { createContext, provide, useContext } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { computed, signal } from "@pyreon/reactivity"
 import { ThemeContext } from "@pyreon/styler"
 import type { PyreonTheme } from "@pyreon/unistyle"
 import { enrichTheme } from "@pyreon/unistyle"
@@ -16,9 +16,10 @@ export interface PyreonUIProps {
   theme: PyreonTheme
   /**
    * Color mode: "light", "dark", or "system" (follows OS preference).
+   * Can be a signal or getter for reactive mode switching.
    * @default "light"
    */
-  mode?: ThemeModeInput | undefined
+  mode?: ThemeModeInput | (() => ThemeModeInput) | undefined
   /** Flip mode for a nested section (e.g. dark sidebar in light app). */
   inversed?: boolean | undefined
   children?: VNodeChild
@@ -39,7 +40,7 @@ function getSystemMode(): ReturnType<typeof signal<ThemeMode>> {
 
   if (_isBrowser) {
     matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-      _systemMode!.set(e.matches ? "dark" : "light")
+      _systemMode?.set(e.matches ? "dark" : "light")
     })
   }
 
@@ -48,7 +49,8 @@ function getSystemMode(): ReturnType<typeof signal<ThemeMode>> {
 
 // ─── Mode context ───────────────────────────────────────────────────────────
 
-const ModeContext = createContext<ThemeMode>("light")
+/** Context value is a getter — consumers call it to read the current mode reactively. */
+const ModeContext = createContext<() => ThemeMode>(() => "light")
 
 const INVERSED: Record<ThemeMode, ThemeMode> = { light: "dark", dark: "light" }
 
@@ -61,26 +63,16 @@ const INVERSED: Record<ThemeMode, ThemeMode> = { light: "dark", dark: "light" }
  * const mode = useMode() // "light" | "dark"
  */
 export function useMode(): ThemeMode {
-  return useContext(ModeContext)
+  return useContext(ModeContext)()
 }
 
 // ─── Auto-init ──────────────────────────────────────────────────────────────
 
 let _autoInitDone = false
 
-/**
- * Ensure the CSS engine is initialized. If init() was called manually,
- * this is a no-op. Otherwise, imports @pyreon/styler defaults.
- * Called once on first PyreonUI mount.
- */
 function autoInit(): void {
   if (_autoInitDone) return
   _autoInitDone = true
-
-  // config already has styler defaults from the import in config.ts,
-  // so no lazy import needed — the CSS engine is ready.
-  // If the user called init() with a custom engine, those values are
-  // already set and we respect them.
 }
 
 // ─── PyreonUI ───────────────────────────────────────────────────────────────
@@ -91,28 +83,33 @@ function autoInit(): void {
  * Replaces the need for separate UnistyleProvider, RocketstyleProvider,
  * and ThemeProvider — one component, zero init.
  *
- * @example
+ * Mode can be a static string OR a signal/getter for reactive switching:
  * ```tsx
- * <PyreonUI theme={{ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }} mode="system">
- *   <App />
- * </PyreonUI>
+ * // Static
+ * <PyreonUI theme={theme} mode="dark">
+ *
+ * // Reactive signal
+ * const mode = signal<ThemeModeInput>("light")
+ * <PyreonUI theme={theme} mode={mode}>
+ *
+ * // System (follows OS preference)
+ * <PyreonUI theme={theme} mode="system">
  * ```
  */
 export function PyreonUI({ theme, mode = "light", inversed, children }: PyreonUIProps): VNodeChild {
   autoInit()
 
-  // Resolve mode: "system" → track OS preference, "light"/"dark" → use directly
-  let resolvedMode: ThemeMode
-  if (mode === "system") {
-    resolvedMode = getSystemMode()()
-  } else {
-    resolvedMode = mode
+  // Create a reactive mode getter that resolves "system" and applies inversion.
+  // This getter is provided via context — consumers read it lazily in their
+  // own reactive scopes, so mode changes propagate automatically.
+  const resolveMode = (): ThemeMode => {
+    const raw = typeof mode === "function" ? mode() : mode
+    const resolved = raw === "system" ? getSystemMode()() : raw
+    return inversed ? INVERSED[resolved] : resolved
   }
 
-  // Apply inversion for nested dark/light sections
-  if (inversed) {
-    resolvedMode = INVERSED[resolvedMode]
-  }
+  // Wrap in computed for memoization
+  const modeComputed = computed(resolveMode)
 
   // Enrich theme with responsive utilities (__PYREON__)
   const enrichedTheme = enrichTheme(theme)
@@ -122,17 +119,24 @@ export function PyreonUI({ theme, mode = "light", inversed, children }: PyreonUI
   // 1. Styler ThemeContext — for styled() components and useTheme()
   provide(ThemeContext, enrichedTheme)
 
-  // 2. Core context — for elements, attrs, coolgrid, rocketstyle
-  //    Includes mode + isDark/isLight for rocketstyle dimension resolution
+  // 2. Core context — provide a reactive object with getters.
+  //    Rocketstyle reads mode/isDark/isLight from this context.
+  //    By providing getters, the values update when modeComputed changes.
   provide(coreContext, {
     theme: enrichedTheme,
-    mode: resolvedMode,
-    isDark: resolvedMode === "dark",
-    isLight: resolvedMode === "light",
+    get mode() {
+      return modeComputed()
+    },
+    get isDark() {
+      return modeComputed() === "dark"
+    },
+    get isLight() {
+      return modeComputed() === "light"
+    },
   })
 
-  // 3. Mode context — for useMode() hook
-  provide(ModeContext, resolvedMode)
+  // 3. Mode context — getter function for useMode()
+  provide(ModeContext, () => modeComputed())
 
   return children ?? null
 }

package/src/__tests__/PyreonUI.test.tsx

@@ -38,11 +38,16 @@ describe("PyreonUI", () => {
   it("defaults mode to light", () => {
     PyreonUI({ theme, children: null })
 
+    // Core context (2nd call) — has getter properties for reactive mode
     const coreCtx = getProvideValue(1)
     expect(coreCtx.mode).toBe("light")
     expect(coreCtx.isLight).toBe(true)
     expect(coreCtx.isDark).toBe(false)
-    expect(getProvideValue(2)).toBe("light")
+
+    // Mode context (3rd call) — getter function
+    const modeGetter = getProvideValue(2)
+    expect(typeof modeGetter).toBe("function")
+    expect(modeGetter()).toBe("light")
   })
 
   it("provides dark mode", () => {
@@ -52,17 +57,19 @@ describe("PyreonUI", () => {
     expect(coreCtx.mode).toBe("dark")
     expect(coreCtx.isDark).toBe(true)
     expect(coreCtx.isLight).toBe(false)
-    expect(getProvideValue(2)).toBe("dark")
+
+    const modeGetter = getProvideValue(2)
+    expect(modeGetter()).toBe("dark")
   })
 
   it("inverts mode when inversed=true", () => {
     PyreonUI({ theme, mode: "light", inversed: true, children: null })
-    expect(getProvideValue(2)).toBe("dark")
+    expect(getProvideValue(2)()).toBe("dark")
   })
 
   it("inverts dark to light", () => {
     PyreonUI({ theme, mode: "dark", inversed: true, children: null })
-    expect(getProvideValue(2)).toBe("light")
+    expect(getProvideValue(2)()).toBe("light")
   })
 
   it("enriches theme with __PYREON__ before providing", () => {
@@ -76,6 +83,15 @@ describe("PyreonUI", () => {
 
   it("works with system mode (resolves to light in happy-dom)", () => {
     PyreonUI({ theme, mode: "system", children: null })
-    expect(getProvideValue(2)).toBe("light")
+    expect(getProvideValue(2)()).toBe("light")
+  })
+
+  it("mode context is a getter function (reactive-ready)", () => {
+    PyreonUI({ theme, mode: "dark", children: null })
+    const modeGetter = getProvideValue(2)
+    // Mode context is a function, not a static value — consumers call it
+    // inside their own reactive scopes for reactive mode switching.
+    expect(typeof modeGetter).toBe("function")
+    expect(modeGetter()).toBe("dark")
   })
 })

package/src/render.tsx

@@ -30,6 +30,12 @@ const render: Render = (content, attachProps) => {
   }
 
   if (typeof content === "function") {
+    // Extract key from props — it's a VNode concept, not a component prop.
+    // Passing key inside props causes JSX runtime warnings.
+    if (attachProps && "key" in attachProps) {
+      const { key, ...rest } = attachProps
+      return h(content as string | ComponentFn, rest as Props)
+    }
     return h(content as string | ComponentFn, (attachProps ?? {}) as Props)
   }