@pyreon/rocketstyle 0.13.1 → 0.15.0

package/README.md

@@ -12,7 +12,7 @@ Organize component styles by dimensions — states, sizes, variants — instead
 - **Pseudo-state detection** — hover, focus, pressed tracked via signals and context
 - **Light/dark mode** — theme callbacks receive a mode parameter
 - **Provider/Consumer** — propagate parent state to children through context
-- **WeakMap caching** — computed themes cached per component instance
+- **Multi-tier WeakMap caching** — dimension maps, reserved keys, omit Sets, and theme results cached per component definition (shared across all instances). Per-mount allocations near zero for same-definition components
 - **TypeScript inference** — dimension values and prop types inferred through the chain
 
 ## Installation
@@ -337,6 +337,22 @@ Button.theme((theme, mode) => ({
 
 Use `inversed: true` in `.config()` to flip the mode for a component subtree.
 
+## Performance
+
+Rocketstyle uses a multi-tier caching architecture to minimize per-mount allocations:
+
+- **Per-definition caches** (shared across all instances via `WeakMap`):
+  - `_dimensionsCache` — `getDimensionsMap` result keyed on dimension-themes identity
+  - `_reservedKeysCache` — `Object.keys(reservedPropNames)` keyed on keywords identity
+  - `_omitSetCache` — pre-built `Set<string>` for `omit()` (avoids per-mount Set construction)
+  - `ALL_PSEUDO_KEYS` / `STATIC_OMIT_KEYS` — merged key arrays computed once
+- **Theme cache** (`LocalThemeManager`): `WeakMap` tiers for baseTheme, dimensionThemes, and per-mode resolved themes
+- **getTheme in-place merge**: dimension slices merged directly onto `finalTheme` instead of allocating a new target per `merge()` call
+- **Frozen `EMPTY_PSEUDO`**: shared frozen `{}` for pseudo-state defaults instead of 6 allocations per call
+- **Dev guard**: uses `__DEV__` (`import.meta.env.DEV`) — tree-shaken to zero bytes in production
+
+For a 150-component page with 8 dimensions each: ~1,350 Set allocations, ~300 array spreads, and ~150 map rebuilds eliminated vs naive implementation.
+
 ## Peer Dependencies
 
 | Package            | Version |

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import * as _pyreon_core0 from "@pyreon/core";
+import * as _$_pyreon_core0 from "@pyreon/core";
 import { VNodeChild } from "@pyreon/core";
 import { config, context, render } from "@pyreon/ui-core";
 
@@ -222,7 +222,7 @@ type Configuration<C = ElementType | unknown, D extends Dimensions = Dimensions>
   statics: Record<string, any>;
 } & Record<string, any>;
 type DefaultProps = Partial<PseudoProps> & {
-  children?: _pyreon_core0.VNodeChild;
+  children?: _$_pyreon_core0.VNodeChild;
 };
 //#endregion
 //#region src/types/attrs.d.ts
@@ -283,6 +283,20 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
   readonly $$types: DFP;
   IS_ROCKETSTYLE: true;
   displayName: string;
+  /**
+   * The accumulated `.attrs()` callback chain — hoisted at component-creation
+   * time so external inspectors (notably `extractDocumentTree` from
+   * `@pyreon/connector-document`) can compute post-attrs props without
+   * invoking the full styled wrapper. Each callback maps user props to a
+   * partial props object; `chain.reduce(Object.assign, {})` produces the
+   * post-attrs result.
+   *
+   * Stable contract — consumers can rely on this property being present on
+   * every rocketstyle-wrapped component. Empty array when no `.attrs()`
+   * was ever called on the chain. Treat as read-only; mutating breaks
+   * `extractDocumentTree` and any other inspector consuming the hoist.
+   */
+  readonly __rs_attrs: ReadonlyArray<(props: Record<string, unknown>) => Record<string, unknown>>;
 }
 //#endregion
 //#region src/types/rocketComponent.d.ts

package/lib/index.js

@@ -1,8 +1,10 @@
-import { createContext, provide, useContext } from "@pyreon/core";
+import { createContext, nativeCompat, provide, useContext } from "@pyreon/core";
 import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set } from "@pyreon/ui-core";
 import { signal } from "@pyreon/reactivity";
 
 //#region src/constants/index.ts
+/** Tree-shakeable dev-mode flag. `true` in dev, `false` (dead code eliminated) in prod. */
+const __DEV__ = process.env.NODE_ENV !== "production";
 /** Default theme mode used when no mode is provided via context. */
 const MODE_DEFAULT = "light";
 /** Pseudo-state interaction keys tracked for styling (hover, active, focus, pressed). */
@@ -72,6 +74,7 @@ const Provider = ({ provider = Provider$1, inversed, ...props }) => {
 		children
 	}) ?? null;
 };
+nativeCompat(Provider);
 
 //#endregion
 //#region src/constants/defaultDimensions.ts
@@ -251,31 +254,24 @@ const calculateChainOptions = (options) => (args) => {
 };
 const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensions }) => {
 	const result = {};
-	Object.keys(dimensions).forEach((item) => {
+	for (const item in dimensions) {
 		const pickedProp = props[item];
 		const t = typeof pickedProp;
 		if (multiKeys?.[item] && Array.isArray(pickedProp)) result[item] = pickedProp;
 		else if (t === "string" || t === "number") result[item] = pickedProp;
 		else result[item] = void 0;
-	});
-	if (useBooleans) {
-		const propsKeys = Object.keys(props);
-		Object.entries(result).forEach(([key, value]) => {
-			const isMultiKey = multiKeys?.[key];
-			if (!value) {
-				let newDimensionValue;
-				const keywordSet = new Set(Object.keys(dimensions[key]));
-				if (isMultiKey) newDimensionValue = propsKeys.filter((propKey) => keywordSet.has(propKey));
-				else for (let i = propsKeys.length - 1; i >= 0; i--) {
-					const k = propsKeys[i];
-					if (keywordSet.has(k) && props[k]) {
-						newDimensionValue = k;
-						break;
-					}
-				}
-				result[key] = newDimensionValue;
-			}
-		});
+	}
+	if (useBooleans) for (const key in result) {
+		if (result[key]) continue;
+		const dimensionMap = dimensions[key];
+		const isMultiKey = multiKeys?.[key];
+		let newDimensionValue;
+		if (isMultiKey) {
+			const matches = [];
+			for (const propKey in props) if (propKey in dimensionMap) matches.push(propKey);
+			newDimensionValue = matches.length > 0 ? matches : void 0;
+		} else for (const k in props) if (k in dimensionMap && props[k]) newDimensionValue = k;
+		result[key] = newDimensionValue;
 	}
 	return result;
 };
@@ -428,36 +424,41 @@ const getThemeFromChain = (options, theme) => {
 	return options.reduce((acc, item) => merge(acc, item(theme, themeModeCallback, config.css)), result);
 };
 const getDimensionThemes = (theme, options) => {
+	const dims = options.dimensions;
+	if (isEmpty(dims)) return {};
 	const result = {};
-	if (isEmpty(options.dimensions)) return result;
-	return Object.entries(options.dimensions).reduce((acc, [key, value]) => {
-		const [, dimension] = isMultiKey(value);
+	for (const key in dims) {
+		const [, dimension] = isMultiKey(dims[key]);
 		const helper = options[key];
-		if (Array.isArray(helper) && helper.length > 0) acc[dimension] = removeNullableValues(getThemeFromChain(helper, theme));
-		return acc;
-	}, result);
+		if (Array.isArray(helper) && helper.length > 0) result[dimension] = removeNullableValues(getThemeFromChain(helper, theme));
+	}
+	return result;
 };
+const EMPTY_PSEUDO = Object.freeze({});
 const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
-	let finalTheme = { ...baseTheme };
+	const finalTheme = { ...baseTheme };
 	const deferredTransforms = [];
-	Object.entries(rocketstate).forEach(([key, value]) => {
+	for (const key in rocketstate) {
+		const value = rocketstate[key];
+		if (value == null) continue;
 		const keyTheme = themes[key] ?? {};
 		const isTransform = transformKeys?.[key];
 		const mergeValue = (item) => {
 			const val = keyTheme[item];
+			if (val == null) return;
 			if (isTransform && typeof val === "function") deferredTransforms.push(val);
-			else finalTheme = merge({}, finalTheme, val);
+			else merge(finalTheme, val);
 		};
-		if (Array.isArray(value)) value.forEach(mergeValue);
+		if (Array.isArray(value)) for (let i = 0; i < value.length; i++) mergeValue(value[i]);
 		else mergeValue(value);
-	});
-	for (const transform of deferredTransforms) finalTheme = merge({}, finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
-	finalTheme.hover ??= {};
-	finalTheme.focus ??= {};
-	finalTheme.active ??= {};
-	finalTheme.disabled ??= {};
-	finalTheme.pressed ??= {};
-	finalTheme.readOnly ??= {};
+	}
+	for (let i = 0; i < deferredTransforms.length; i++) merge(finalTheme, deferredTransforms[i](finalTheme, appTheme ?? {}, themeModeCallback, config.css));
+	finalTheme.hover ??= EMPTY_PSEUDO;
+	finalTheme.focus ??= EMPTY_PSEUDO;
+	finalTheme.active ??= EMPTY_PSEUDO;
+	finalTheme.disabled ??= EMPTY_PSEUDO;
+	finalTheme.pressed ??= EMPTY_PSEUDO;
+	finalTheme.readOnly ??= EMPTY_PSEUDO;
 	return finalTheme;
 };
 const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
@@ -470,6 +471,7 @@ const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) =
 
 //#endregion
 //#region src/rocketstyle.ts
+const _countSink = globalThis;
 /** Clones the current configuration and merges new options, returning a fresh rocketComponent. */
 const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
 	...defaultOpts,
@@ -500,6 +502,17 @@ const rocketComponent = (options) => {
         `;
 	const RenderComponent = options.provider ? createLocalProvider(STYLED_COMPONENT) : STYLED_COMPONENT;
 	const ThemeManager$1 = new ThemeManager();
+	const _dimensionsCache = /* @__PURE__ */ new WeakMap();
+	const _reservedKeysCache = /* @__PURE__ */ new WeakMap();
+	const ALL_PSEUDO_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS];
+	const STATIC_OMIT_KEYS = [
+		"pseudo",
+		...PSEUDO_KEYS,
+		...options.filterAttrs ?? []
+	];
+	const _omitSetCache = /* @__PURE__ */ new WeakMap();
+	const _rsMemo = /* @__PURE__ */ new WeakMap();
+	const RS_MEMO_CAP = 32;
 	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
 	const EnhancedComponent = (props) => {
 		const localCtx = useLocalContext(options.consumer);
@@ -510,72 +523,127 @@ const rocketComponent = (options) => {
 			if (!helper.has(initialTheme)) helper.set(initialTheme, getThemeFromChain(options.theme, initialTheme));
 			return helper.get(initialTheme);
 		})();
-		const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
-			themes: (() => {
-				const helper = ThemeManager$1.dimensionsThemes;
-				if (!helper.has(initialTheme)) helper.set(initialTheme, getDimensionThemes(initialTheme, options));
-				return helper.get(initialTheme);
-			})(),
-			useBooleans: options.useBooleans
-		});
-		const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
-		const $rocketstyleAccessor = () => {
+		const initialDimensionThemes = (() => {
+			const helper = ThemeManager$1.dimensionsThemes;
+			if (!helper.has(initialTheme)) helper.set(initialTheme, getDimensionThemes(initialTheme, options));
+			return helper.get(initialTheme);
+		})();
+		let dimResult = _dimensionsCache.get(initialDimensionThemes);
+		if (dimResult) {
+			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.dimensionsMap.hit");
+		} else {
+			dimResult = getDimensionsMap({
+				themes: initialDimensionThemes,
+				useBooleans: options.useBooleans
+			});
+			_dimensionsCache.set(initialDimensionThemes, dimResult);
+		}
+		const { keysMap: dimensions, keywords: reservedPropNames } = dimResult;
+		let RESERVED_STYLING_PROPS_KEYS = _reservedKeysCache.get(reservedPropNames);
+		if (!RESERVED_STYLING_PROPS_KEYS) {
+			RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
+			_reservedKeysCache.set(reservedPropNames, RESERVED_STYLING_PROPS_KEYS);
+		}
+		const localPseudo = localCtx?.pseudo;
+		const _resolveRsEntry = () => {
 			const theme = themeAttrs.theme;
 			const mode = themeAttrs.mode;
+			let key = mode;
+			const propsRec = props;
+			for (const dimName in dimensions) {
+				const v = propsRec[dimName];
+				key += "|" + (typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? String(v) : v === void 0 ? "" : "~" + typeof v);
+			}
+			for (const k of ALL_PSEUDO_KEYS) {
+				const propV = propsRec[k];
+				const localV = localPseudo?.[k];
+				const v = propV !== void 0 ? propV : localV;
+				key += "|" + (v === void 0 ? "" : v ? "1" : "0");
+			}
+			let themeMemo = _rsMemo.get(theme);
+			if (!themeMemo) {
+				themeMemo = /* @__PURE__ */ new Map();
+				_rsMemo.set(theme, themeMemo);
+			}
+			const cached = themeMemo.get(key);
+			if (cached) {
+				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.dimensionMemo.hit");
+				themeMemo.delete(key);
+				themeMemo.set(key, cached);
+				return cached;
+			}
+			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.getTheme");
 			const baseThemeHelper = ThemeManager$1.baseTheme;
-			if (!baseThemeHelper.has(theme)) baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme));
+			if (baseThemeHelper.has(theme)) {
+				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.localThemeManager.hit");
+			} else baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme));
 			const baseTheme = baseThemeHelper.get(theme);
 			const dimHelper = ThemeManager$1.dimensionsThemes;
-			if (!dimHelper.has(theme)) dimHelper.set(theme, getDimensionThemes(theme, options));
+			if (dimHelper.has(theme)) {
+				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.localThemeManager.hit");
+			} else dimHelper.set(theme, getDimensionThemes(theme, options));
 			const themes = dimHelper.get(theme);
-			const rocketstate = _calculateStylingAttrs({
-				props: pickStyledAttrs(props, reservedPropNames),
+			const rocketstateRaw = _calculateStylingAttrs({
+				props: pickStyledAttrs(propsRec, reservedPropNames),
 				dimensions
 			});
 			const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
-			if (!modeBaseHelper.has(baseTheme)) modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode));
+			if (modeBaseHelper.has(baseTheme)) {
+				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.localThemeManager.hit");
+			} else modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode));
 			const currentModeBaseTheme = modeBaseHelper.get(baseTheme);
 			const modeDimHelper = ThemeManager$1.modeDimensionTheme[mode];
-			if (!modeDimHelper.has(themes)) modeDimHelper.set(themes, getThemeByMode(themes, mode));
-			return getTheme({
-				rocketstate,
+			if (modeDimHelper.has(themes)) {
+				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.localThemeManager.hit");
+			} else modeDimHelper.set(themes, getThemeByMode(themes, mode));
+			const rocketstyle = getTheme({
+				rocketstate: rocketstateRaw,
 				themes: modeDimHelper.get(themes),
 				baseTheme: currentModeBaseTheme,
 				transformKeys: options.transformKeys,
 				appTheme: theme
 			});
-		};
-		const localPseudo = localCtx?.pseudo;
-		const $rocketstateAccessor = () => {
-			const rocketstate = _calculateStylingAttrs({
-				props: pickStyledAttrs(props, reservedPropNames),
-				dimensions
-			});
-			const propPseudo = pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS]);
-			return {
-				...rocketstate,
+			const propPseudo = pick(propsRec, ALL_PSEUDO_KEYS);
+			const rocketstate = {
+				...rocketstateRaw,
 				pseudo: {
 					...localPseudo,
 					...propPseudo
 				}
 			};
+			if (themeMemo.size >= RS_MEMO_CAP) {
+				const oldestKey = themeMemo.keys().next().value;
+				if (oldestKey !== void 0) themeMemo.delete(oldestKey);
+			}
+			const entry = {
+				rocketstyle,
+				rocketstate
+			};
+			themeMemo.set(key, entry);
+			return entry;
 		};
-		const { pseudo: _pseudo, ...mergeProps } = {
+		const $rocketstyleAccessor = () => _resolveRsEntry().rocketstyle;
+		const $rocketstateAccessor = () => _resolveRsEntry().rocketstate;
+		let omitSet = _omitSetCache.get(RESERVED_STYLING_PROPS_KEYS);
+		if (omitSet) {
+			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.omitSet.hit");
+		} else {
+			omitSet = new Set([...RESERVED_STYLING_PROPS_KEYS, ...STATIC_OMIT_KEYS]);
+			_omitSetCache.set(RESERVED_STYLING_PROPS_KEYS, omitSet);
+		}
+		const mergeProps = localCtx ? {
 			...localCtx,
 			...props
-		};
-		const finalProps = {
-			...omit(mergeProps, [
-				...RESERVED_STYLING_PROPS_KEYS,
-				...PSEUDO_KEYS,
-				...options.filterAttrs
-			]),
-			...options.passProps ? pick(mergeProps, options.passProps) : {},
-			ref: props.ref,
-			$rocketstyle: $rocketstyleAccessor,
-			$rocketstate: $rocketstateAccessor
-		};
-		if (process.env.NODE_ENV !== "production") {
+		} : props;
+		const finalProps = omit(mergeProps, omitSet);
+		if (options.passProps) {
+			const passed = pick(mergeProps, options.passProps);
+			for (const k in passed) finalProps[k] = passed[k];
+		}
+		finalProps.ref = props.ref;
+		finalProps.$rocketstyle = $rocketstyleAccessor;
+		finalProps.$rocketstate = $rocketstateAccessor;
+		if (__DEV__) {
 			finalProps["data-rocketstyle"] = componentName;
 			if (options.DEBUG) {
 				const debugPayload = {
@@ -613,6 +681,7 @@ const rocketComponent = (options) => {
 		context: FinalComponent,
 		options: options.statics
 	});
+	FinalComponent.__rs_attrs = options.attrs ?? [];
 	Object.assign(FinalComponent, {
 		attrs: (attrs, { priority, filter } = {}) => {
 			const result = {};
@@ -669,7 +738,7 @@ const validateInit = (name, component, dimensions) => {
 	if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
 };
 const rocketstyle = (({ dimensions = DEFAULT_DIMENSIONS, useBooleans = false } = {}) => ({ name, component }) => {
-	if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
+	if (__DEV__) validateInit(name, component, dimensions);
 	return rocketComponent({
 		name,
 		component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Multi-dimensional style composition for Pyreon components",
   "license": "MIT",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
     "LICENSE",
@@ -41,17 +42,17 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.1",
-    "@pyreon/typescript": "^0.13.1",
-    "@pyreon/ui-core": "^0.13.1",
+    "@pyreon/test-utils": "^0.13.2",
+    "@pyreon/typescript": "^0.15.0",
+    "@pyreon/ui-core": "^0.15.0",
     "@vitest/browser-playwright": "^4.1.4",
-    "@vitus-labs/tools-rolldown": "^1.15.3"
+    "@vitus-labs/tools-rolldown": "^2.3.0"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.13.1",
-    "@pyreon/reactivity": "^0.13.1",
-    "@pyreon/styler": "^0.13.1",
-    "@pyreon/ui-core": "^0.13.1"
+    "@pyreon/core": "^0.15.0",
+    "@pyreon/reactivity": "^0.15.0",
+    "@pyreon/styler": "^0.15.0",
+    "@pyreon/ui-core": "^0.15.0"
   },
   "engines": {
     "node": ">= 22"

package/src/__tests__/context.test.ts

@@ -1,5 +1,5 @@
 import type { VNodeChild } from '@pyreon/core'
-import { useContext } from '@pyreon/core'
+import { h, useContext } from '@pyreon/core'
 import { Provider as CoreProvider } from '@pyreon/ui-core'
 import Provider from '../context/context'
 
@@ -46,7 +46,7 @@ describe('Provider (context)', () => {
   it('uses MODE_DEFAULT (light) when no mode is provided', () => {
     mockedUseContext.mockReturnValue((() => ({})) as any)
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children })
 
     expect(mockedCoreProvider).toHaveBeenCalledTimes(1)
@@ -59,7 +59,7 @@ describe('Provider (context)', () => {
   it('passes mode directly when inversed is false', () => {
     mockedUseContext.mockReturnValue((() => ({ mode: 'dark' })) as any)
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, mode: 'dark', inversed: false })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -69,7 +69,7 @@ describe('Provider (context)', () => {
   })
 
   it('passes mode directly when inversed is undefined', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, mode: 'dark' })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -79,7 +79,7 @@ describe('Provider (context)', () => {
   })
 
   it('inverts light to dark when inversed is true', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, mode: 'light', inversed: true })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -89,7 +89,7 @@ describe('Provider (context)', () => {
   })
 
   it('inverts dark to light when inversed is true', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, mode: 'dark', inversed: true })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -100,7 +100,7 @@ describe('Provider (context)', () => {
 
   it('passes theme to provider when provided', () => {
     const theme = { rootSize: 16, breakpoints: { sm: 576 } }
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, theme })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -108,7 +108,7 @@ describe('Provider (context)', () => {
   })
 
   it('does not pass theme key when theme is undefined', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -123,7 +123,7 @@ describe('Provider (context)', () => {
       key: null,
     }))
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, provider: customProvider as any })
 
     expect(customProvider).toHaveBeenCalledTimes(1)
@@ -132,7 +132,7 @@ describe('Provider (context)', () => {
   })
 
   it('defaults to CoreProvider when no provider prop is given', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children })
 
     expect(mockedCoreProvider).toHaveBeenCalledTimes(1)
@@ -147,7 +147,7 @@ describe('Provider (context)', () => {
   })
 
   it('passes provider reference to the provider call', () => {
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -157,7 +157,7 @@ describe('Provider (context)', () => {
   it('returns null when provider returns null', () => {
     mockedCoreProvider.mockReturnValue(null as any)
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     const result = Provider({ children })
 
     expect(result).toBeNull()
@@ -166,7 +166,7 @@ describe('Provider (context)', () => {
   it('returns null when provider returns undefined', () => {
     mockedCoreProvider.mockReturnValue(undefined as any)
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     const result = Provider({ children })
 
     expect(result).toBeNull()
@@ -179,7 +179,7 @@ describe('Provider (context)', () => {
     })) as any)
 
     const overrideTheme = { rootSize: 20 }
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children, theme: overrideTheme, mode: 'dark' })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>
@@ -190,7 +190,7 @@ describe('Provider (context)', () => {
   it('uses context mode when no mode prop is given', () => {
     mockedUseContext.mockReturnValue((() => ({ mode: 'dark' })) as any)
 
-    const children = { type: 'span', props: {}, children: ['Hello'], key: null }
+    const children = h('span', null, 'Hello')
     Provider({ children })
 
     const callArgs = mockedCoreProvider.mock.calls[0]?.[0] as Record<string, unknown>

package/src/__tests__/createLocalProvider.test.ts

@@ -1,4 +1,4 @@
-import { provide } from '@pyreon/core'
+import { h, provide } from '@pyreon/core'
 import createLocalProvider from '../context/createLocalProvider'
 
 // Mock @pyreon/core provide
@@ -246,3 +246,35 @@ describe('createLocalProvider', () => {
     expect(result).toBe(expectedResult)
   })
 })
+
+// ─── createLocalProvider — real h() round-trip ──────────────────────
+//
+// The tests above use a `BaseComponent` mock that returns
+// `{ type, props, children, key }` literals and assert against the
+// shape. This block re-runs key contracts with a base component
+// that returns real h() output — same divergence guard as the
+// attrs / connector-document parallels.
+
+describe('createLocalProvider — real h() round-trip', () => {
+  it('passes children through a real h() base component', () => {
+    const BaseComponentH = vi.fn((props: Record<string, unknown>) =>
+      h('div', { 'data-real-h': 'yes', ...props }, props.children as never),
+    )
+    const HOC = createLocalProvider(BaseComponentH as any)
+    const result = HOC({ children: 'hello' } as any) as any
+    expect(BaseComponentH).toHaveBeenCalled()
+    expect(result.type).toBe('div')
+    expect(result.props['data-real-h']).toBe('yes')
+  })
+
+  it('forwards arbitrary props through real h() output', () => {
+    const BaseComponentH = vi.fn((props: Record<string, unknown>) =>
+      h('button', props, props.label as never),
+    )
+    const HOC = createLocalProvider(BaseComponentH as any)
+    const result = HOC({ label: 'Click', 'data-id': '42' } as any) as any
+    expect(result.type).toBe('button')
+    expect(result.props.label).toBe('Click')
+    expect(result.props['data-id']).toBe('42')
+  })
+})

package/src/__tests__/native-marker.test.ts

@@ -0,0 +1,9 @@
+import { isNativeCompat } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import RocketstyleProvider from '../context/context'
+
+describe('native-compat marker — @pyreon/rocketstyle', () => {
+  it('Provider is marked native', () => {
+    expect(isNativeCompat(RocketstyleProvider)).toBe(true)
+  })
+})