@pyreon/ui-core 0.24.5 → 0.25.0

package/lib/index.js

@@ -1,6 +1,6 @@
+import { computed, registerSingleton, signal } from "@pyreon/reactivity";
 import { ThemeContext, css, keyframes, styled } from "@pyreon/styler";
 import { createReactiveContext, h, nativeCompat, provide, useContext } from "@pyreon/core";
-import { computed, signal } from "@pyreon/reactivity";
 import { enrichTheme } from "@pyreon/unistyle";
 
 //#region src/compose.ts
@@ -538,6 +538,10 @@ const merge = (target, ...sources) => {
 	return target;
 };
 
+//#endregion
+//#region src/index.ts
+registerSingleton("@pyreon/ui-core", "0.24.6", import.meta.url);
+
 //#endregion
 export { HTML_TAGS, HTML_TEXT_TAGS, Provider, PyreonUI, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useMode, useStableValue };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/ui-core",
-  "version": "0.24.5",
+  "version": "0.25.0",
   "description": "Core utilities, config, and context for Pyreon UI System",
   "license": "MIT",
   "repository": {
@@ -13,8 +13,7 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE",
-    "src"
+    "LICENSE"
   ],
   "type": "module",
   "sideEffects": false,
@@ -22,7 +21,6 @@
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "bun": "./src/index.ts",
       "import": "./lib/index.js",
       "types": "./lib/index.d.ts"
     }
@@ -38,16 +36,16 @@
   },
   "devDependencies": {
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/typescript": "^0.24.5",
+    "@pyreon/typescript": "^0.25.0",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
   "engines": {
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.5",
-    "@pyreon/reactivity": "^0.24.5",
-    "@pyreon/styler": "^0.24.5",
-    "@pyreon/unistyle": "^0.24.5"
+    "@pyreon/core": "^0.25.0",
+    "@pyreon/reactivity": "^0.25.0",
+    "@pyreon/styler": "^0.25.0",
+    "@pyreon/unistyle": "^0.25.0"
   }
 }

package/src/PyreonUI.tsx

@@ -1,227 +0,0 @@
-import type { VNodeChild } from '@pyreon/core'
-import { createReactiveContext, nativeCompat, 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.
-   *
-   * Optional — when omitted, the theme is INHERITED from the nearest
-   * ancestor PyreonUI. This makes nested `<PyreonUI inversed>` work
-   * without re-passing the theme:
-   *
-   * ```tsx
-   * <PyreonUI theme={appTheme}>
-   *   <Header />
-   *   <PyreonUI inversed>  // inherits appTheme, just flips mode
-   *     <DarkSidebar />
-   *   </PyreonUI>
-   * </PyreonUI>
-   * ```
-   *
-   * At the OUTERMOST PyreonUI with no ancestor, the provided ThemeContext
-   * value falls back to the default `{}` (styled components see fields as
-   * undefined; no crash). Pass a real theme at the outermost PyreonUI to
-   * avoid that.
-   */
-  theme?: PyreonTheme | undefined
-  /**
-   * Color mode: "light", "dark", or "system" (follows OS preference).
-   * Can be a signal or getter for reactive mode switching.
-   *
-   * When omitted, mode is INHERITED from the nearest ancestor PyreonUI
-   * (or `'light'` at the root).
-   */
-  mode?: ThemeModeInput | (() => ThemeModeInput) | undefined
-  /**
-   * Flip mode for a nested section (e.g. dark sidebar in light app).
-   * Scoped — only affects DESCENDANTS of this PyreonUI; ancestors and
-   * siblings see the original mode unchanged.
-   */
-  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
-
-  // Ternary (not `&&`) so the typeof-derived `_isBrowser` guard is
-  // statically verifiable as protecting the `matchMedia` access — same
-  // runtime value (`false` on the server), SSR-safe + analyzer-clear.
-  const prefersDark = _isBrowser
-    ? matchMedia('(prefers-color-scheme: dark)').matches
-    : false
-  _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 ───────────────────────────────────────────────────────────
-
-/** Reactive context — useContext(ModeContext) returns () => ThemeMode. */
-const ModeContext = createReactiveContext<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(props: PyreonUIProps): VNodeChild {
-  autoInit()
-
-  // IMPORTANT: do NOT destructure props. Components run once in Pyreon, and
-  // destructuring captures values at setup time — losing reactivity. Reading
-  // `props.mode` / `props.inversed` lazily inside `resolveMode()` lets the
-  // computed re-evaluate when the underlying reactive props change (parent
-  // re-renders with a different value, or signal-driven mode toggling).
-  //
-  // Previously this destructured `{ theme, mode = 'light', inversed, children }`
-  // which made `inversed` permanently static — toggling inversed in a parent
-  // had no effect because the local boolean was captured once. See
-  // `.claude/rules/anti-patterns.md` "Destructuring props" entry.
-
-  // 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.
-  //
-  // When `inversed` is set without an explicit `mode`, inherit the parent's
-  // mode and flip it. This makes nested `<PyreonUI inversed>` work reactively:
-  // outer light → inner dark, outer dark → inner light.
-  //
-  // useContext(ModeContext) returns the reactive accessor from the nearest
-  // parent PyreonUI. At root level (no parent), the ReactiveContext default
-  // returns 'light'. This read is TRACKED inside the computed below, so when
-  // the parent's mode changes, this child's computed re-evaluates.
-  const parentModeAccessor = useContext(ModeContext)
-  // Same shape for theme — useContext(ThemeContext) is a reactive accessor.
-  // When `props.theme` is omitted, we provide the parent's theme through
-  // verbatim (already enriched at the level it was provided). Re-enriching
-  // would be idempotent but wasteful, AND would replace the parent's exact
-  // `__PYREON__` reference, which downstream identity-keyed caches (styler's
-  // class cache, rocketstyle's per-definition WeakMaps) rely on for hits.
-  // Pass-through preserves identity.
-  const parentThemeAccessor = useContext(ThemeContext)
-  const resolveMode = (): ThemeMode => {
-    const mode = props.mode
-    let resolved: ThemeMode
-    if (mode === undefined || mode === null) {
-      // No explicit mode — inherit from parent context
-      resolved = parentModeAccessor()
-    } else {
-      const raw = typeof mode === 'function' ? mode() : mode
-      resolved = raw === 'system' ? getSystemMode()() : raw
-    }
-    return props.inversed ? INVERSED[resolved] : resolved
-  }
-
-  // Wrap in computed for memoization
-  const modeComputed = computed(resolveMode)
-
-  // Enrich theme — wrapped in computed so user-preference theme swaps
-  // propagate. The enrichment itself is cheap (builds a __PYREON__ block).
-  //
-  // When `props.theme` is omitted, return the parent's theme verbatim
-  // (already enriched). Without this, `enrichTheme(undefined)` would
-  // destructure undefined and throw — but the throw happens LAZILY (the
-  // computed is only read when a child consumes ThemeContext), so the
-  // failure mode is the cryptic dev-mode warning
-  // `[pyreon] Unhandled effect error: TypeError: Cannot destructure property
-  // 'breakpoints' of 'theme' as it is undefined`
-  // followed by every styled descendant rendering with an empty theme.
-  // That's what made the user's nested `<PyreonUI inversed>` "look like
-  // inversed wasn't working" — the whole subtree was broken.
-  const enrichedTheme = computed(() => {
-    const t = props.theme
-    if (t === undefined || t === null) return parentThemeAccessor()
-    return enrichTheme(t)
-  })
-
-  // Provide to all three context layers:
-
-  // 1. Styler ThemeContext — reactive accessor. DynamicStyled reads this
-  //    inside its computed() to re-resolve CSS on theme swap.
-  provide(ThemeContext, () => enrichedTheme())
-
-  // 2. Core context — provide a reactive getter function.
-  //    coreContext is a ReactiveContext, so provide(() => value).
-  //    Rocketstyle reads mode/isDark/isLight by calling the getter.
-  provide(coreContext, () => ({
-    theme: enrichedTheme(),
-    mode: modeComputed(),
-    isDark: modeComputed() === 'dark',
-    isLight: modeComputed() === 'light',
-  }))
-
-  // 3. Mode context — getter function for useMode()
-  provide(ModeContext, () => modeComputed())
-
-  return props.children ?? null
-}
-
-// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so
-// PyreonUI's three provide() calls + useContext(ModeContext) read run inside
-// Pyreon's setup frame. Critical for compat-mode apps that wrap their tree
-// with <PyreonUI> at the top level — without the marker, theme/mode never
-// propagate to descendants.
-nativeCompat(PyreonUI)

package/src/__tests__/PyreonUI-inheritance.test.tsx

@@ -1,157 +0,0 @@
-// Verifies the user's three reported issues are FIXED:
-//
-//   1. `inversed` works on a nested PyreonUI when theme is inherited.
-//   2. `theme` is optional — nested `<PyreonUI inversed>` (no theme prop)
-//      no longer crashes the ThemeContext getter.
-//   3. Nested PyreonUI inherits theme from the parent's ThemeContext
-//      out of the box.
-//
-// PLUS the user's explicit scoping invariant: an INNER inversed PyreonUI
-// must NOT leak its flipped mode back to the outer subtree. This holds
-// trivially via Pyreon's provide() scoping (each `provide()` push lives
-// only inside the providing component's subtree), but worth locking in.
-import { describe, expect, it, vi } from 'vitest'
-import { PyreonUI } from '../PyreonUI'
-
-// Spy on provide()
-const provideSpy = vi.spyOn(await import('@pyreon/core'), 'provide')
-
-describe('PyreonUI — theme/mode inheritance + scope invariants', () => {
-  const theme = {
-    rootSize: 16,
-    breakpoints: { xs: 0, sm: 576, md: 768 },
-    colors: { primary: '#228be6' },
-  }
-
-  beforeEach(() => {
-    provideSpy.mockClear()
-  })
-
-  it('ISSUE 2 FIXED: <PyreonUI inversed> with no theme prop returns a non-throwing ThemeContext getter', () => {
-    // The previous broken shape: computed wraps enrichTheme(undefined),
-    // which throws lazily when a child reads ThemeContext. With the fix,
-    // omitted theme inherits from the parent ThemeContext (default `{}`
-    // at the root).
-    PyreonUI({ inversed: true, children: null })
-    const themeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    expect(() => themeGetter()).not.toThrow()
-    // At root with no parent theme, falls back to the ReactiveContext
-    // default `{}` — no crash, just an empty theme.
-    expect(themeGetter()).toEqual({})
-  })
-
-  it('ISSUE 3 FIXED: nested PyreonUI inherits theme from parent ThemeContext identity', () => {
-    // Drive the outer + inner manually. The inner runs inside the outer's
-    // setup frame — useContext(ThemeContext) inside the inner reads the
-    // outer's provided getter, returning the outer's enriched theme.
-    PyreonUI({ theme, children: null }) // outer
-    const outerThemeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    const outerEnriched = outerThemeGetter()
-
-    provideSpy.mockClear()
-    PyreonUI({ inversed: true, children: null }) // inner — no theme prop
-    const innerThemeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    const innerTheme = innerThemeGetter()
-
-    // The inner provides the PARENT'S theme by REFERENCE — not a fresh
-    // enrichTheme() call. Same `__PYREON__` block identity → downstream
-    // identity-keyed caches (styler classCache, rocketstyle WeakMaps) hit.
-    expect(innerTheme).toBe(outerEnriched)
-  })
-
-  it('ISSUE 1 FIXED: inversed flips the mode when theme is inherited from parent', () => {
-    // The user's reported shape:
-    //   <PyreonUI theme={theme}>          ← provides mode='light'
-    //     <PyreonUI inversed>             ← no theme, only `inversed`
-    //       <DarkSidebar />               ← reads mode → should be 'dark'
-    //     </PyreonUI>
-    //   </PyreonUI>
-    //
-    // Before the fix: enrichTheme(undefined) crashed in the inner's
-    // ThemeContext getter and the whole inner subtree fell back to outer's
-    // mode (the inversion was effectively invisible because every styled
-    // descendant rendered with the wrong theme).
-    PyreonUI({ theme, mode: 'light', children: null }) // outer
-    provideSpy.mockClear()
-    PyreonUI({ inversed: true, children: null }) // inner — no theme
-    const innerModeGetter = provideSpy.mock.calls[2]![1] as () => unknown
-    expect(innerModeGetter()).toBe('dark')
-  })
-
-  it('SCOPE INVARIANT: inner inversed does NOT leak to outer', () => {
-    // The outer PyreonUI provided ModeContext BEFORE the inner one ran.
-    // Inner's provide() pushed a new frame onto the context stack — that
-    // frame is identity-removed on inner unmount, leaving the outer's
-    // frame intact. We assert on the outer's mode getter staying 'light'
-    // after the inner has also been provided.
-    PyreonUI({ theme, mode: 'light', children: null }) // outer
-    const outerModeGetter = provideSpy.mock.calls[2]![1] as () => unknown
-    provideSpy.mockClear()
-    PyreonUI({ inversed: true, children: null }) // inner
-
-    // Outer's mode getter is still the same closure and still returns
-    // 'light' — it was never touched by the inner's provide().
-    expect(outerModeGetter()).toBe('light')
-  })
-
-  it('SCOPE INVARIANT: outer theme is unaffected by inner inheritance', () => {
-    PyreonUI({ theme, children: null }) // outer
-    const outerThemeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    const outerThemeBefore = outerThemeGetter()
-    provideSpy.mockClear()
-    PyreonUI({ inversed: true, children: null }) // inner
-
-    // Outer's theme getter still returns the same enriched theme.
-    expect(outerThemeGetter()).toBe(outerThemeBefore)
-  })
-
-  // ─── Breakpoints optional — "one-size" app ───────────────────────────────────
-  // User requirement: breakpoints should not be required. An app that
-  // passes them gets responsive behavior; an app that omits them renders
-  // at a single size. The type already permits this (`breakpoints?:` in
-  // `PyreonTheme`) and unistyle's `makeItResponsive` already short-circuits
-  // when breakpoints are empty:
-  //
-  //   // packages/ui-system/unistyle/src/responsive/makeItResponsive.ts:123
-  //   if (isEmpty(breakpoints) || isEmpty(__PYREON__)) {
-  //     return css`${renderStyles(internalTheme)}`
-  //   }
-  //
-  // These two specs lock in that the WHOLE chain (PyreonUI →
-  // enrichTheme → ThemeContext consumer) works with a theme that has no
-  // `breakpoints` AND no `rootSize`. A regression in `enrichTheme` to a
-  // strict-required shape would surface here.
-
-  it('BREAKPOINTS OPTIONAL: theme with no breakpoints renders an enriched theme with empty media', () => {
-    // Minimal theme — just colors. No breakpoints, no rootSize. This is
-    // the "one-size app" shape.
-    const minimal = { colors: { primary: '#228be6' } }
-    PyreonUI({ theme: minimal, children: null })
-    const themeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    const enriched = themeGetter() as {
-      colors: unknown
-      __PYREON__: { sortedBreakpoints: unknown; media: unknown }
-    }
-
-    expect(enriched.colors).toEqual({ primary: '#228be6' })
-    // __PYREON__ exists but both fields are undefined — downstream
-    // `makeItResponsive` detects empty + falls back to plain CSS.
-    expect(enriched.__PYREON__).toBeDefined()
-    expect(enriched.__PYREON__.sortedBreakpoints).toBeUndefined()
-    expect(enriched.__PYREON__.media).toBeUndefined()
-  })
-
-  it('BREAKPOINTS OPTIONAL: nested PyreonUI inherits a no-breakpoints theme unchanged', () => {
-    const minimal = { colors: { primary: '#228be6' } }
-    PyreonUI({ theme: minimal, children: null }) // outer
-    const outerThemeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-    const outerEnriched = outerThemeGetter()
-
-    provideSpy.mockClear()
-    PyreonUI({ inversed: true, children: null }) // inner — no theme prop
-    const innerThemeGetter = provideSpy.mock.calls[0]![1] as () => unknown
-
-    // Identity-preserved: same enriched theme reference, no re-enrichment.
-    expect(innerThemeGetter()).toBe(outerEnriched)
-  })
-})

package/src/__tests__/PyreonUI.test.tsx

@@ -1,194 +0,0 @@
-import { h } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import { describe, expect, it, vi } from 'vitest'
-import { PyreonUI, type PyreonUIProps } 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) — ReactiveContext getter function
-    const coreCtxGetter = getProvideValue(1)
-    expect(typeof coreCtxGetter).toBe('function')
-    const coreCtx = coreCtxGetter()
-    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 coreCtxGetter = getProvideValue(1)
-    const coreCtx = coreCtxGetter()
-    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 })
-
-    // ThemeContext is reactive — the provided value is an accessor.
-    const providedThemeGetter = getProvideValue(0)
-    const providedTheme = providedThemeGetter()
-    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')
-  })
-
-  // ─── Reactivity regression tests ──────────────────────────────────────────
-  // Components run ONCE in Pyreon. Destructuring props at setup captures
-  // values statically, breaking reactivity. PyreonUI used to destructure
-  // `{ theme, mode, inversed, children }` which made `inversed` permanently
-  // static — toggling it in a parent had no effect.
-  //
-  // The fix: read `props.X` lazily inside `resolveMode()`. With reactive
-  // props (signal-backed via the compiler's _rp() wrapping, or signal
-  // reads inside a getter prop), the computed correctly tracks the
-  // dependencies and re-evaluates on change.
-  //
-  // These tests use real signals to simulate the compiler-emitted reactive
-  // prop pattern: `<PyreonUI inversed={isInversed()}>` becomes
-  // `_rp(() => isInversed())` which is converted to a getter by
-  // makeReactiveProps. The getter reads the signal each time, registering
-  // it as a dependency of any reactive scope (like our `computed`).
-
-  it('inversed mode reacts when backed by a signal (regression for destructuring bug)', () => {
-    const inversed = signal(false)
-    // Simulate makeReactiveProps output: define `inversed` as a getter
-    // that reads the signal. This matches what the compiler emits for
-    // reactive props in real usage.
-    const props = {} as PyreonUIProps
-    Object.assign(props, { theme, mode: 'light' as const, children: null })
-    Object.defineProperty(props, 'inversed', {
-      get: () => inversed(),
-      enumerable: true,
-      configurable: true,
-    })
-
-    PyreonUI(props)
-    const modeGetter = getProvideValue(2)
-
-    // Initial: inversed=false, mode=light → resolved=light
-    expect(modeGetter()).toBe('light')
-
-    // Toggle inversed via the signal — mimics a parent's signal change
-    // that would, in real usage, drive a re-render's reactive prop.
-    inversed.set(true)
-
-    // The mode getter MUST see the new value. If destructured (the old
-    // bug), the local `inversed` boolean was captured at setup and this
-    // would still return 'light'.
-    expect(modeGetter()).toBe('dark')
-
-    // And back
-    inversed.set(false)
-    expect(modeGetter()).toBe('light')
-  })
-
-  it('mode reacts when backed by a signal getter (no destructuring)', () => {
-    // The function form (mode={() => signal()}) is the documented way
-    // to make mode reactive. The destructuring bug never broke this
-    // form because `typeof mode === 'function'` correctly called it
-    // each time. But this test guards against future regressions.
-    const mode = signal<'light' | 'dark'>('light')
-    PyreonUI({ theme, mode: () => mode(), children: null })
-    const modeGetter = getProvideValue(2)
-
-    expect(modeGetter()).toBe('light')
-
-    mode.set('dark')
-
-    expect(modeGetter()).toBe('dark')
-  })
-
-  it('inversed false → true → false toggles correctly through the full cycle', () => {
-    // Full cycle: verifies the inverted-mode dependency chain
-    // (mode + inversed both feeding into resolveMode) reacts correctly
-    // to multiple toggles of the signal.
-    const inversed = signal(false)
-    const props = {} as PyreonUIProps
-    Object.assign(props, { theme, mode: 'dark' as const, children: null })
-    Object.defineProperty(props, 'inversed', {
-      get: () => inversed(),
-      enumerable: true,
-      configurable: true,
-    })
-
-    PyreonUI(props)
-    const modeGetter = getProvideValue(2)
-
-    expect(modeGetter()).toBe('dark') // dark + not inversed → dark
-
-    inversed.set(true)
-    expect(modeGetter()).toBe('light') // dark + inversed → light
-
-    inversed.set(false)
-    expect(modeGetter()).toBe('dark') // dark + not inversed → dark again
-  })
-})

package/src/__tests__/compose.test.ts

@@ -1,32 +0,0 @@
-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!')
-  })
-})