@pyreon/ui-core 0.3.0 → 0.11.0

package/lib/index.d.ts

@@ -2,6 +2,7 @@ import * as _pyreon_styler0 from "@pyreon/styler";
 import { StyledFunction, css, keyframes, styled } from "@pyreon/styler";
 import * as _pyreon_core0 from "@pyreon/core";
 import { ComponentFn, VNodeChild } from "@pyreon/core";
+import { PyreonTheme } from "@pyreon/unistyle";
 
 //#region src/compose.d.ts
 type ArityOneFn = (arg: any) => any;
@@ -216,6 +217,50 @@ declare const isEmpty: IsEmpty;
 //#region src/isEqual.d.ts
 declare const isEqual: (a: unknown, b: unknown) => boolean;
 //#endregion
+//#region src/PyreonUI.d.ts
+type ThemeMode = "light" | "dark";
+type ThemeModeInput = ThemeMode | "system";
+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;
+}
+/**
+ * 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"
+ */
+declare function useMode(): ThemeMode;
+/**
+ * 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>
+ * ```
+ */
+declare function PyreonUI({
+  theme,
+  mode,
+  inversed,
+  children
+}: PyreonUIProps): VNodeChild;
+//#endregion
 //#region src/render.d.ts
 type RenderProps<T extends Record<string, unknown> | undefined> = (props: Partial<T>) => VNodeChild;
 /**
@@ -253,5 +298,5 @@ declare const throttle: <T extends (...args: any[]) => any>(fn: T, wait?: number
 };
 declare const merge: <T extends Record<string, any>>(target: T, ...sources: Record<string, any>[]) => T;
 //#endregion
-export { type BreakpointKeys, type Breakpoints, type CSSEngineConnector, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, type Render, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useStableValue };
+export { type BreakpointKeys, type Breakpoints, type CSSEngineConnector, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, PyreonUI, type PyreonUIProps, type Render, type ThemeMode, type ThemeModeInput, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useMode, useStableValue };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,5 +1,7 @@
-import { css, keyframes, styled } from "@pyreon/styler";
-import { createContext, h, provide } from "@pyreon/core";
+import { ThemeContext, css, keyframes, styled } from "@pyreon/styler";
+import { createContext, h, provide, useContext } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
+import { enrichTheme } from "@pyreon/unistyle";
 
 //#region src/compose.ts
 const compose = (...fns) => (p) => fns.reduceRight((acc, cur) => cur(acc), p);
@@ -273,166 +275,87 @@ const isEqual = (a, b) => {
 };
 
 //#endregion
-//#region src/render.tsx
-const render = (content, attachProps) => {
-	if (!content) return null;
-	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 === "object" && content !== null) return content;
-	return content;
-};
-
-//#endregion
-//#region ../../node_modules/.bun/@pyreon+reactivity@0.7.12/node_modules/@pyreon/reactivity/lib/index.js
-let batchDepth = 0;
-const setA = /* @__PURE__ */ new Set();
-let pendingNotifications = setA;
-function isBatching() {
-	return batchDepth > 0;
-}
-function enqueuePendingNotification(notify) {
-	pendingNotifications.add(notify);
-}
-let activeEffect = null;
-const effectDeps = /* @__PURE__ */ new WeakMap();
-let _depsCollector = null;
-let _skipDepsCollection = false;
-/**
-* Register the active effect as a subscriber of the given reactive source.
-* The subscriber Set is created lazily on the host — sources read only outside
-* effects never allocate a Set.
-*/
-function trackSubscriber(host) {
-	if (activeEffect) {
-		if (!host._s) host._s = /* @__PURE__ */ new Set();
-		host._s.add(activeEffect);
-		if (_skipDepsCollection) return;
-		if (_depsCollector) _depsCollector.push(host._s);
-		else {
-			let deps = effectDeps.get(activeEffect);
-			if (!deps) {
-				deps = /* @__PURE__ */ new Set();
-				effectDeps.set(activeEffect, deps);
-			}
-			deps.add(host._s);
-		}
-	}
-}
-function notifySubscribers(subscribers) {
-	if (subscribers.size === 0) return;
-	if (subscribers.size === 1) {
-		const sub = subscribers.values().next().value;
-		if (isBatching()) enqueuePendingNotification(sub);
-		else sub();
-		return;
-	}
-	if (isBatching()) for (const sub of subscribers) enqueuePendingNotification(sub);
-	else {
-		const originalSize = subscribers.size;
-		let i = 0;
-		for (const sub of subscribers) {
-			if (i >= originalSize) break;
-			sub();
-			i++;
-		}
-	}
-}
-let _traceListeners = null;
-/** @internal — called from signal.set() when tracing is active */
-function _notifyTraceListeners(sig, prev, next) {
-	if (!_traceListeners) return;
-	const event = {
-		signal: sig,
-		name: sig.label,
-		prev,
-		next,
-		stack: (/* @__PURE__ */ new Error()).stack ?? "",
-		timestamp: performance.now()
-	};
-	for (const l of _traceListeners) l(event);
-}
-/** Check if any trace listeners are active (fast path for signal.set) */
-function isTracing() {
-	return _traceListeners !== null;
-}
-function _peek() {
-	return this._v;
-}
-function _set(newValue) {
-	if (Object.is(this._v, newValue)) return;
-	const prev = this._v;
-	this._v = newValue;
-	if (isTracing()) _notifyTraceListeners(this, prev, newValue);
-	if (this._d) notifyDirect(this._d);
-	if (this._s) notifySubscribers(this._s);
-}
-function _update(fn) {
-	_set.call(this, fn(this._v));
-}
-function _subscribe(listener) {
-	if (!this._s) this._s = /* @__PURE__ */ new Set();
-	this._s.add(listener);
-	return () => this._s?.delete(listener);
+//#region src/PyreonUI.tsx
+const _isBrowser = typeof window !== "undefined" && typeof matchMedia === "function";
+/** Reactive signal tracking the OS dark mode preference. Lazy-initialized on first use. */
+let _systemMode;
+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");
+	});
+	return _systemMode;
 }
+const ModeContext = createContext("light");
+const INVERSED = {
+	light: "dark",
+	dark: "light"
+};
 /**
-* Register a direct updater — lighter than subscribe().
-* Uses a flat array instead of Set. Disposal nulls the slot (no Set.delete overhead).
-* Used by compiler-emitted _bindText/_bindDirect for zero-overhead DOM bindings.
+* 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"
 */
-function _directFn(updater) {
-	if (!this._d) this._d = [];
-	const arr = this._d;
-	const idx = arr.length;
-	arr.push(updater);
-	return () => {
-		arr[idx] = null;
-	};
+function useMode() {
+	return useContext(ModeContext);
 }
+let _autoInitDone = false;
 /**
-* Notify direct updaters — flat array iteration, batch-aware.
-* Null slots (from disposed updaters) are skipped.
+* 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 notifyDirect(updaters) {
-	if (isBatching()) for (let i = 0; i < updaters.length; i++) {
-		const fn = updaters[i];
-		if (fn) enqueuePendingNotification(fn);
-	}
-	else for (let i = 0; i < updaters.length; i++) updaters[i]?.();
-}
-function _debug() {
-	return {
-		name: this.label,
-		value: this._v,
-		subscriberCount: this._s?.size ?? 0
-	};
+function autoInit() {
+	if (_autoInitDone) return;
+	_autoInitDone = true;
 }
 /**
-* Create a reactive signal.
+* Unified provider for the Pyreon UI system.
+*
+* Replaces the need for separate UnistyleProvider, RocketstyleProvider,
+* and ThemeProvider — one component, zero init.
 *
-* Only 1 closure is allocated (the read function). State is stored as
-* properties on the function object (_v, _s) and methods (peek, set,
-* update, subscribe) are shared across all signals — not per-signal closures.
+* @example
+* ```tsx
+* <PyreonUI theme={{ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }} mode="system">
+*   <App />
+* </PyreonUI>
+* ```
 */
-function signal(initialValue, options) {
-	const read = (() => {
-		trackSubscriber(read);
-		return read._v;
+function PyreonUI({ theme, mode = "light", inversed, children }) {
+	autoInit();
+	let resolvedMode;
+	if (mode === "system") resolvedMode = getSystemMode()();
+	else resolvedMode = mode;
+	if (inversed) resolvedMode = INVERSED[resolvedMode];
+	const enrichedTheme = enrichTheme(theme);
+	provide(ThemeContext, enrichedTheme);
+	provide(context, {
+		theme: enrichedTheme,
+		mode: resolvedMode,
+		isDark: resolvedMode === "dark",
+		isLight: resolvedMode === "light"
 	});
-	read._v = initialValue;
-	read._s = null;
-	read._d = null;
-	read.peek = _peek;
-	read.set = _set;
-	read.update = _update;
-	read.subscribe = _subscribe;
-	read.direct = _directFn;
-	read.debug = _debug;
-	read.label = options?.name;
-	return read;
+	provide(ModeContext, resolvedMode);
+	return children ?? null;
 }
 
+//#endregion
+//#region src/render.tsx
+const render = (content, attachProps) => {
+	if (!content) return null;
+	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 === "object") return content;
+	return content;
+};
+
 //#endregion
 //#region src/useStableValue.ts
 /**
@@ -555,5 +478,5 @@ const merge = (target, ...sources) => {
 };
 
 //#endregion
-export { HTML_TAGS, HTML_TEXT_TAGS, Provider, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useStableValue };
+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,16 +1,17 @@
 {
   "name": "@pyreon/ui-core",
-  "version": "0.3.0",
+  "version": "0.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/ui-system",
-    "directory": "packages/ui-core"
+    "directory": "packages/ui-system/ui-core"
   },
   "description": "Core utilities, config, and context for Pyreon UI System",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "bun": "./src/index.ts",
     "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
@@ -25,7 +26,7 @@
     "LICENSE"
   ],
   "engines": {
-    "node": ">= 18"
+    "node": ">= 22"
   },
   "publishConfig": {
     "access": "public"
@@ -37,11 +38,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": ">=0.4.0 <1.0.0",
-    "@pyreon/styler": ">=0.3.0"
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/styler": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0",
+    "@pyreon/unistyle": "^0.11.0"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.7.4"
+    "@pyreon/typescript": "^0.11.0"
   }
 }