@pyreon/ui-core 0.11.1 → 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.1",
+  "version": "0.11.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -24,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -39,13 +40,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/styler": "^0.11.1",
-    "@pyreon/reactivity": "^0.11.1",
-    "@pyreon/unistyle": "^0.11.1"
+    "@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.1"
+    "@pyreon/typescript": "^0.11.3"
   }
 }

package/src/PyreonUI.tsx

@@ -0,0 +1,142 @@
+import type { VNodeChild } from "@pyreon/core"
+import { createContext, provide, useContext } from "@pyreon/core"
+import { computed, signal } from "@pyreon/reactivity"
+import { ThemeContext } from "@pyreon/styler"
+import type { PyreonTheme } from "@pyreon/unistyle"
+import { enrichTheme } from "@pyreon/unistyle"
+import { context as coreContext } from "./context"
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type ThemeMode = "light" | "dark"
+export type ThemeModeInput = ThemeMode | "system"
+
+export interface PyreonUIProps {
+  /** Theme object with breakpoints, rootSize, and custom keys. */
+  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 | (() => ThemeModeInput) | undefined
+  /** Flip mode for a nested section (e.g. dark sidebar in light app). */
+  inversed?: boolean | undefined
+  children?: VNodeChild
+}
+
+// ─── System mode detection ──────────────────────────────────────────────────
+
+const _isBrowser = typeof window !== "undefined" && typeof matchMedia === "function"
+
+/** Reactive signal tracking the OS dark mode preference. Lazy-initialized on first use. */
+let _systemMode: ReturnType<typeof signal<ThemeMode>> | undefined
+
+function getSystemMode(): ReturnType<typeof signal<ThemeMode>> {
+  if (_systemMode) return _systemMode
+
+  const prefersDark = _isBrowser && matchMedia("(prefers-color-scheme: dark)").matches
+  _systemMode = signal<ThemeMode>(prefersDark ? "dark" : "light")
+
+  if (_isBrowser) {
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+      _systemMode?.set(e.matches ? "dark" : "light")
+    })
+  }
+
+  return _systemMode
+}
+
+// ─── Mode context ───────────────────────────────────────────────────────────
+
+/** 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" }
+
+/**
+ * Read the resolved color mode ("light" | "dark") from the nearest PyreonUI.
+ * Reactive — updates when the mode prop changes or when OS preference changes
+ * (if mode="system").
+ *
+ * @example
+ * const mode = useMode() // "light" | "dark"
+ */
+export function useMode(): ThemeMode {
+  return useContext(ModeContext)()
+}
+
+// ─── Auto-init ──────────────────────────────────────────────────────────────
+
+let _autoInitDone = false
+
+function autoInit(): void {
+  if (_autoInitDone) return
+  _autoInitDone = true
+}
+
+// ─── PyreonUI ───────────────────────────────────────────────────────────────
+
+/**
+ * Unified provider for the Pyreon UI system.
+ *
+ * Replaces the need for separate UnistyleProvider, RocketstyleProvider,
+ * and ThemeProvider — one component, zero init.
+ *
+ * Mode can be a static string OR a signal/getter for reactive switching:
+ * ```tsx
+ * // 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()
+
+  // 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
+  }
+
+  // Wrap in computed for memoization
+  const modeComputed = computed(resolveMode)
+
+  // Enrich theme with responsive utilities (__PYREON__)
+  const enrichedTheme = enrichTheme(theme)
+
+  // Provide to all three context layers:
+
+  // 1. Styler ThemeContext — for styled() components and useTheme()
+  provide(ThemeContext, enrichedTheme)
+
+  // 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,
+    get mode() {
+      return modeComputed()
+    },
+    get isDark() {
+      return modeComputed() === "dark"
+    },
+    get isLight() {
+      return modeComputed() === "light"
+    },
+  })
+
+  // 3. Mode context — getter function for useMode()
+  provide(ModeContext, () => modeComputed())
+
+  return children ?? null
+}

package/src/__tests__/PyreonUI.test.tsx

@@ -0,0 +1,97 @@
+import { h } from "@pyreon/core"
+import { describe, expect, it, vi } from "vitest"
+import { PyreonUI } from "../PyreonUI"
+
+// Spy on provide to verify context provision
+const provideSpy = vi.spyOn(await import("@pyreon/core"), "provide")
+
+/** Get the value argument (2nd arg) from a provide() call by index. */
+const getProvideValue = (callIndex: number): any => provideSpy.mock.calls[callIndex]![1]
+
+describe("PyreonUI", () => {
+  const theme = {
+    rootSize: 16,
+    breakpoints: { xs: 0, sm: 576, md: 768 },
+    colors: { primary: "#228be6" },
+  }
+
+  beforeEach(() => {
+    provideSpy.mockClear()
+  })
+
+  it("renders children", () => {
+    const child = h("div", null, "hello")
+    const result = PyreonUI({ theme, children: child })
+    expect(result).toBe(child)
+  })
+
+  it("returns null when no children", () => {
+    const result = PyreonUI({ theme })
+    expect(result).toBeNull()
+  })
+
+  it("calls provide three times (ThemeContext, core context, mode context)", () => {
+    PyreonUI({ theme, children: null })
+    expect(provideSpy).toHaveBeenCalledTimes(3)
+  })
+
+  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)
+
+    // Mode context (3rd call) — getter function
+    const modeGetter = getProvideValue(2)
+    expect(typeof modeGetter).toBe("function")
+    expect(modeGetter()).toBe("light")
+  })
+
+  it("provides dark mode", () => {
+    PyreonUI({ theme, mode: "dark", children: null })
+
+    const coreCtx = getProvideValue(1)
+    expect(coreCtx.mode).toBe("dark")
+    expect(coreCtx.isDark).toBe(true)
+    expect(coreCtx.isLight).toBe(false)
+
+    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")
+  })
+
+  it("inverts dark to light", () => {
+    PyreonUI({ theme, mode: "dark", inversed: true, children: null })
+    expect(getProvideValue(2)()).toBe("light")
+  })
+
+  it("enriches theme with __PYREON__ before providing", () => {
+    PyreonUI({ theme, children: null })
+
+    const providedTheme = getProvideValue(0)
+    expect(providedTheme.__PYREON__).toBeDefined()
+    expect(providedTheme.__PYREON__.sortedBreakpoints).toEqual(["xs", "sm", "md"])
+    expect(providedTheme.colors).toEqual({ primary: "#228be6" })
+  })
+
+  it("works with system mode (resolves to light in happy-dom)", () => {
+    PyreonUI({ theme, mode: "system", children: null })
+    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/__tests__/compose.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest"
+import compose from "../compose"
+
+describe("compose", () => {
+  it("should compose two functions right-to-left", () => {
+    const double = (x: number) => x * 2
+    const addOne = (x: number) => x + 1
+    const composed = compose(addOne, double)
+    // double(3) = 6, then addOne(6) = 7
+    expect(composed(3)).toBe(7)
+  })
+
+  it("should compose three functions right-to-left", () => {
+    const add = (x: number) => x + 1
+    const mul = (x: number) => x * 3
+    const sub = (x: number) => x - 2
+    // sub(5) = 3, mul(3) = 9, add(9) = 10
+    expect(compose(add, mul, sub)(5)).toBe(10)
+  })
+
+  it("should work with a single function", () => {
+    const identity = (x: number) => x
+    expect(compose(identity)(42)).toBe(42)
+  })
+
+  it("should pass value through string transforms", () => {
+    const upper = (s: string) => s.toUpperCase()
+    const exclaim = (s: string) => `${s}!`
+    // exclaim('hello') = 'hello!', upper('hello!') = 'HELLO!'
+    expect(compose(upper, exclaim)("hello")).toBe("HELLO!")
+  })
+})

package/src/__tests__/config.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, it } from "vitest"
+import config, { init } from "../config"
+
+describe("Configuration", () => {
+  it("has default component as div", () => {
+    expect(config.component).toBe("div")
+  })
+
+  it("has default textComponent as span", () => {
+    expect(config.textComponent).toBe("span")
+  })
+
+  it("has css function", () => {
+    expect(config.css).toBeDefined()
+    expect(typeof config.css).toBe("function")
+  })
+
+  it("has styled function", () => {
+    expect(config.styled).toBeDefined()
+    expect(typeof config.styled).toBe("function")
+  })
+
+  it("has keyframes function", () => {
+    expect(config.keyframes).toBeDefined()
+    expect(typeof config.keyframes).toBe("function")
+  })
+
+  describe("init", () => {
+    const originalCss = config.css
+    const originalStyled = config.styled
+    const originalKeyframes = config.keyframes
+    const originalComponent = config.component
+    const originalTextComponent = config.textComponent
+    const originalCreateMediaQueries = config.createMediaQueries
+
+    afterEach(() => {
+      // restore defaults
+      config.css = originalCss
+      config.styled = originalStyled
+      config.keyframes = originalKeyframes
+      config.component = originalComponent
+      config.textComponent = originalTextComponent
+      config.createMediaQueries = originalCreateMediaQueries
+    })
+
+    it("updates css engine", () => {
+      const mockCss = (() => "") as any
+      init({ css: mockCss })
+      expect(config.css).toBe(mockCss)
+    })
+
+    it("updates styled engine", () => {
+      const mockStyled = (() => "") as any
+      init({ styled: mockStyled })
+      expect(config.styled).toBe(mockStyled)
+    })
+
+    it("updates component", () => {
+      init({ component: "section" })
+      expect(config.component).toBe("section")
+    })
+
+    it("updates textComponent", () => {
+      init({ textComponent: "p" })
+      expect(config.textComponent).toBe("p")
+    })
+
+    it("updates keyframes", () => {
+      const mockKeyframes = (() => "anim") as any
+      init({ keyframes: mockKeyframes })
+      expect(config.keyframes).toBe(mockKeyframes)
+    })
+
+    it("updates createMediaQueries", () => {
+      const mockCreateMQ = (() => ({})) as any
+      init({ createMediaQueries: mockCreateMQ })
+      expect(config.createMediaQueries).toBe(mockCreateMQ)
+    })
+
+    it("only updates provided fields", () => {
+      init({ component: "article" })
+      expect(config.component).toBe("article")
+      expect(config.textComponent).toBe("span")
+      expect(config.css).toBe(originalCss)
+    })
+
+    it("does nothing with empty object", () => {
+      init({})
+      expect(config.component).toBe("div")
+      expect(config.textComponent).toBe("span")
+    })
+
+    it("can be called multiple times to swap engine", () => {
+      const first = (() => "first") as any
+      const second = (() => "second") as any
+      init({ css: first })
+      expect(config.css).toBe(first)
+      init({ css: second })
+      expect(config.css).toBe(second)
+    })
+  })
+})

package/src/__tests__/context.test.tsx

@@ -0,0 +1,70 @@
+import { popContext, useContext } from "@pyreon/core"
+import { afterEach, describe, expect, it } from "vitest"
+import Provider, { context } from "../context"
+
+describe("Provider", () => {
+  afterEach(() => {
+    // Clean up any pushed context frames
+    try {
+      popContext()
+    } catch {
+      // Ignore if no context was pushed
+    }
+  })
+
+  it("returns children when no theme is provided", () => {
+    const children = "Hello"
+    const result = Provider({ children })
+    expect(result).toBe("Hello")
+  })
+
+  it("returns children with empty theme", () => {
+    const children = "Hello"
+    const result = Provider({ theme: {}, children })
+    expect(result).toBe("Hello")
+  })
+
+  it("returns children with null theme", () => {
+    const children = "Hello"
+    // @ts-expect-error testing null theme
+    const result = Provider({ theme: null, children })
+    expect(result).toBe("Hello")
+  })
+
+  it("returns children when theme is provided and pushes context", () => {
+    const theme = { rootSize: 16, breakpoints: { xs: 0 } }
+    const children = "Styled"
+    const result = Provider({ theme, children })
+    expect(result).toBe("Styled")
+  })
+
+  it("pushes context with theme and extra props", () => {
+    const theme = { rootSize: 16 }
+    const children = "Content"
+    Provider({ theme, children, custom: "value" })
+    // After Provider runs, context should have been pushed
+    // We can verify by reading the context value
+    const ctx = useContext(context)
+    expect(ctx.theme).toEqual({ rootSize: 16 })
+    expect(ctx.custom).toBe("value")
+  })
+
+  it("returns null when no children and no theme", () => {
+    const result = Provider({})
+    expect(result).toBeNull()
+  })
+
+  it("returns null when theme is provided but no children", () => {
+    const theme = { rootSize: 16 }
+    const result = Provider({ theme })
+    expect(result).toBeNull()
+  })
+})
+
+describe("context", () => {
+  it("exports context object with an id", () => {
+    expect(context).toBeDefined()
+    expect(context.id).toBeDefined()
+    expect(typeof context.id).toBe("symbol")
+  })
+})