@pyreon/ui-core 0.11.0 → 0.11.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@pyreon/ui-core",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pyreon/ui-system",
+    "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/ui-core"
   },
   "description": "Core utilities, config, and context for Pyreon UI System",
@@ -11,10 +11,11 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    "bun": "./src/index.ts",
-    "source": "./src/index.ts",
-    "import": "./lib/index.js",
-    "types": "./lib/index.d.ts"
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
@@ -23,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -38,13 +40,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.0",
-    "@pyreon/styler": "^0.11.0",
-    "@pyreon/reactivity": "^0.11.0",
-    "@pyreon/unistyle": "^0.11.0"
+    "@pyreon/core": "^0.11.2",
+    "@pyreon/styler": "^0.11.2",
+    "@pyreon/reactivity": "^0.11.2",
+    "@pyreon/unistyle": "^0.11.2"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.0"
+    "@pyreon/typescript": "^0.11.2"
   }
 }

package/src/PyreonUI.tsx

@@ -0,0 +1,138 @@
+import type { VNodeChild } from "@pyreon/core"
+import { createContext, provide, useContext } from "@pyreon/core"
+import { 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).
+   * @default "light"
+   */
+  mode?: 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 ───────────────────────────────────────────────────────────
+
+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
+
+/**
+ * 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 ───────────────────────────────────────────────────────────────
+
+/**
+ * Unified provider for the Pyreon UI system.
+ *
+ * Replaces the need for separate UnistyleProvider, RocketstyleProvider,
+ * and ThemeProvider — one component, zero init.
+ *
+ * @example
+ * ```tsx
+ * <PyreonUI theme={{ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }} mode="system">
+ *   <App />
+ * </PyreonUI>
+ * ```
+ */
+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
+  }
+
+  // Apply inversion for nested dark/light sections
+  if (inversed) {
+    resolvedMode = INVERSED[resolvedMode]
+  }
+
+  // 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 — for elements, attrs, coolgrid, rocketstyle
+  //    Includes mode + isDark/isLight for rocketstyle dimension resolution
+  provide(coreContext, {
+    theme: enrichedTheme,
+    mode: resolvedMode,
+    isDark: resolvedMode === "dark",
+    isLight: resolvedMode === "light",
+  })
+
+  // 3. Mode context — for useMode() hook
+  provide(ModeContext, resolvedMode)
+
+  return children ?? null
+}

package/src/__tests__/PyreonUI.test.tsx

@@ -0,0 +1,81 @@
+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 })
+
+    const coreCtx = getProvideValue(1)
+    expect(coreCtx.mode).toBe("light")
+    expect(coreCtx.isLight).toBe(true)
+    expect(coreCtx.isDark).toBe(false)
+    expect(getProvideValue(2)).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)
+    expect(getProvideValue(2)).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")
+  })
+})

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")
+  })
+})

package/src/__tests__/hoistNonReactStatics.test.tsx

@@ -0,0 +1,166 @@
+import { describe, expect, it } from "vitest"
+import hoistNonReactStatics from "../hoistNonReactStatics"
+
+describe("hoistNonReactStatics", () => {
+  it("copies custom static properties from source to target", () => {
+    const Source = () => null
+    ;(Source as any).customStatic = "hello"
+    ;(Source as any).anotherStatic = 42
+
+    const Target = () => null
+
+    hoistNonReactStatics(Target, Source)
+
+    expect((Target as any).customStatic).toBe("hello")
+    expect((Target as any).anotherStatic).toBe(42)
+  })
+
+  it("does not copy component statics (displayName, defaultProps)", () => {
+    const Source = () => null
+    Source.displayName = "SourceComponent"
+    ;(Source as any).defaultProps = { bar: 1 }
+    ;(Source as any).customProp = "should copy"
+
+    const Target = () => null
+    Target.displayName = "TargetComponent"
+
+    hoistNonReactStatics(Target, Source)
+
+    expect(Target.displayName).toBe("TargetComponent")
+    expect((Target as any).defaultProps).toBeUndefined()
+    expect((Target as any).customProp).toBe("should copy")
+  })
+
+  it("does not copy known JS statics (name, length, prototype)", () => {
+    const Source = () => null
+    ;(Source as any).customProp = "value"
+
+    const Target = () => null
+    const originalName = Target.name
+
+    hoistNonReactStatics(Target, Source)
+
+    expect(Target.name).toBe(originalName)
+    expect((Target as any).customProp).toBe("value")
+  })
+
+  it("respects the excludeList", () => {
+    const Source = () => null
+    ;(Source as any).foo = "included"
+    ;(Source as any).bar = "excluded"
+    ;(Source as any).baz = "included"
+
+    const Target = () => null
+
+    hoistNonReactStatics(Target, Source, { bar: true })
+
+    expect((Target as any).foo).toBe("included")
+    expect((Target as any).bar).toBeUndefined()
+    expect((Target as any).baz).toBe("included")
+  })
+
+  it("returns the target component", () => {
+    const Source = () => null
+    const Target = () => null
+
+    const result = hoistNonReactStatics(Target, Source)
+    expect(result).toBe(Target)
+  })
+
+  it("handles string source (HTML tag) gracefully", () => {
+    const Target = () => null
+
+    const result = hoistNonReactStatics(Target, "div" as any)
+    expect(result).toBe(Target)
+  })
+
+  it("copies symbol-keyed properties", () => {
+    const sym = Symbol("custom")
+    const Source = () => null
+    ;(Source as any)[sym] = "symbol value"
+
+    const Target = () => null
+
+    hoistNonReactStatics(Target, Source)
+
+    expect((Target as any)[sym]).toBe("symbol value")
+  })
+
+  it("copies getters and setters via property descriptors", () => {
+    const Source = () => null
+    let value = 0
+    Object.defineProperty(Source, "counter", {
+      get: () => value,
+      set: (v) => {
+        value = v
+      },
+      enumerable: true,
+      configurable: true,
+    })
+
+    const Target = () => null
+
+    hoistNonReactStatics(Target, Source)
+
+    expect((Target as any).counter).toBe(0)
+    ;(Target as any).counter = 5
+    expect((Target as any).counter).toBe(5)
+    // shares the same backing variable
+    expect((Source as any).counter).toBe(5)
+  })
+
+  it("does not throw on non-configurable target properties", () => {
+    const Source = () => null
+    ;(Source as any).locked = "source value"
+
+    const Target = () => null
+    Object.defineProperty(Target, "locked", {
+      value: "target value",
+      writable: false,
+      configurable: false,
+    })
+
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow()
+    expect((Target as any).locked).toBe("target value")
+  })
+
+  it("hoists statics from prototype chain", () => {
+    function Base() {
+      // constructor stub
+    }
+    Base.prototype = Object.create(null)
+    ;(Base as any).inheritedStatic = "from base"
+
+    function Source() {
+      // constructor stub
+    }
+    Source.prototype = Object.create(null)
+    Object.setPrototypeOf(Source, Base)
+    ;(Source as any).ownStatic = "from source"
+
+    const Target = () => null
+
+    hoistNonReactStatics(Target, Source as any)
+
+    expect((Target as any).ownStatic).toBe("from source")
+    expect((Target as any).inheritedStatic).toBe("from base")
+  })
+
+  it("works with components that have no custom statics", () => {
+    const Source = () => null
+    const Target = () => null
+
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow()
+  })
+
+  it("stops prototype recursion at Object.prototype", () => {
+    const Source = () => null
+    ;(Source as any).custom = "value"
+    // Source's prototype is Function.prototype which has proto Object.prototype
+    // The recursion should walk up and stop at Object.prototype
+
+    const Target = () => null
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow()
+    expect((Target as any).custom).toBe("value")
+  })
+})