@pyreon/rocketstyle 0.11.2 → 0.11.4

package/lib/index.js

@@ -201,20 +201,33 @@ const createLocalProvider = (WrappedComponent) => {
 //#region src/hooks/useTheme.ts
 /**
 * Retrieves the current theme object and resolved mode from context.
-* Supports mode inversion so nested components can flip between
-* light and dark without a new provider.
 *
-* In Pyreon, components run once — no useMemo needed.
+* Returns an object with getter properties so that mode/isDark/isLight
+* are evaluated lazily on each access. This supports reactive mode
+* switching via PyreonUI — when PyreonUI provides `get mode()` getters,
+* rocketstyle picks up changes on every styled component re-evaluation.
+*
+* Without getters, destructuring would capture the mode value once at
+* setup time, making theme switching permanently broken.
 */
 const useThemeAttrs = ({ inversed }) => {
-	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
-	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
-	const isDark = inversed ? !ctxDark : ctxDark;
+	const ctx = useContext(context) || {};
 	return {
-		theme,
-		mode,
-		isDark,
-		isLight: !isDark
+		get theme() {
+			return ctx.theme ?? {};
+		},
+		get mode() {
+			const ctxMode = ctx.mode ?? "light";
+			return inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
+		},
+		get isDark() {
+			const ctxDark = ctx.isDark ?? false;
+			return inversed ? !ctxDark : ctxDark;
+		},
+		get isLight() {
+			const ctxDark = ctx.isDark ?? false;
+			return !(inversed ? !ctxDark : ctxDark);
+		}
 	};
 };
 
@@ -282,12 +295,12 @@ const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 	const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
 	const Enhanced = (WrappedComponent) => {
 		const HOCComponent = (props) => {
-			const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
-			const callbackParams = [theme, {
+			const themeAttrs = useThemeAttrs({ inversed });
+			const callbackParams = [themeAttrs.theme, {
 				render,
-				mode,
-				isDark,
-				isLight
+				mode: themeAttrs.mode,
+				isDark: themeAttrs.isDark,
+				isLight: themeAttrs.isLight
 			}];
 			const filteredProps = removeUndefinedProps(props);
 			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
@@ -483,24 +496,7 @@ const rocketComponent = (options) => {
 	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
 	const EnhancedComponent = (props) => {
 		const localCtx = useLocalContext(options.consumer);
-		const { theme, mode } = useThemeAttrs(options);
-		const baseThemeHelper = ThemeManager$1.baseTheme;
-		if (!baseThemeHelper.has(theme)) 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));
-		const themes = dimHelper.get(theme);
-		const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
-		if (!modeBaseHelper.has(baseTheme)) 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));
-		const currentModeThemes = modeDimHelper.get(themes);
-		const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
-			themes,
-			useBooleans: options.useBooleans
-		});
-		const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
+		const themeAttrs = useThemeAttrs(options);
 		const { pseudo, ...mergeProps } = {
 			...localCtx,
 			...props
@@ -509,48 +505,69 @@ const rocketComponent = (options) => {
 			...pseudo,
 			...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
 		};
-		const rocketstate = _calculateStylingAttrs({
-			props: pickStyledAttrs(mergeProps, reservedPropNames),
-			dimensions
-		});
-		const finalRocketstate = {
-			...rocketstate,
-			pseudo: pseudoRocketstate
-		};
-		const computedRocketstyle = getTheme({
-			rocketstate,
-			themes: currentModeThemes,
-			baseTheme: currentModeBaseTheme,
-			transformKeys: options.transformKeys,
-			appTheme: theme
-		});
-		const finalProps = {
-			...omit(mergeProps, [
-				...RESERVED_STYLING_PROPS_KEYS,
-				...PSEUDO_KEYS,
-				...options.filterAttrs
-			]),
-			...options.passProps ? pick(mergeProps, options.passProps) : {},
-			ref: props.ref,
-			$rocketstyle: computedRocketstyle,
-			$rocketstate: finalRocketstate
-		};
-		if (process.env.NODE_ENV !== "production") {
-			finalProps["data-rocketstyle"] = componentName;
-			if (options.DEBUG) {
-				const debugPayload = {
-					component: componentName,
-					rocketstate: finalRocketstate,
-					rocketstyle: computedRocketstyle,
-					dimensions,
-					mode,
-					reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
-					filteredAttrs: options.filterAttrs
-				};
-				console.debug(`[rocketstyle] ${componentName} render:`, debugPayload);
+		return (() => {
+			const theme = themeAttrs.theme;
+			const mode = themeAttrs.mode;
+			const baseThemeHelper = ThemeManager$1.baseTheme;
+			if (!baseThemeHelper.has(theme)) 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));
+			const themes = dimHelper.get(theme);
+			const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
+			if (!modeBaseHelper.has(baseTheme)) 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));
+			const currentModeThemes = modeDimHelper.get(themes);
+			const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
+				themes,
+				useBooleans: options.useBooleans
+			});
+			const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
+			const rocketstate = _calculateStylingAttrs({
+				props: pickStyledAttrs(mergeProps, reservedPropNames),
+				dimensions
+			});
+			const finalRocketstate = {
+				...rocketstate,
+				pseudo: pseudoRocketstate
+			};
+			const computedRocketstyle = getTheme({
+				rocketstate,
+				themes: currentModeThemes,
+				baseTheme: currentModeBaseTheme,
+				transformKeys: options.transformKeys,
+				appTheme: theme
+			});
+			const finalProps = {
+				...omit(mergeProps, [
+					...RESERVED_STYLING_PROPS_KEYS,
+					...PSEUDO_KEYS,
+					...options.filterAttrs
+				]),
+				...options.passProps ? pick(mergeProps, options.passProps) : {},
+				ref: props.ref,
+				$rocketstyle: computedRocketstyle,
+				$rocketstate: finalRocketstate
+			};
+			if (process.env.NODE_ENV !== "production") {
+				finalProps["data-rocketstyle"] = componentName;
+				if (options.DEBUG) {
+					const debugPayload = {
+						component: componentName,
+						rocketstate: finalRocketstate,
+						rocketstyle: computedRocketstyle,
+						dimensions,
+						mode,
+						reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
+						filteredAttrs: options.filterAttrs
+					};
+					console.debug(`[rocketstyle] ${componentName} render:`, debugPayload);
+				}
 			}
-		}
-		return RenderComponent(finalProps);
+			return RenderComponent(finalProps);
+		});
 	};
 	const FinalComponent = compose(...hocsFuncs)(EnhancedComponent);
 	FinalComponent.IS_ROCKETSTYLE = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -44,13 +44,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.2",
-    "@pyreon/reactivity": "^0.11.2",
-    "@pyreon/ui-core": "^0.11.2",
-    "@pyreon/styler": "^0.11.2"
+    "@pyreon/core": "^0.11.4",
+    "@pyreon/reactivity": "^0.11.4",
+    "@pyreon/ui-core": "^0.11.4",
+    "@pyreon/styler": "^0.11.4"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.2"
+    "@pyreon/typescript": "^0.11.4"
   }
 }

package/src/__tests__/e2e-styler.test.ts

@@ -64,7 +64,10 @@ const getComputedTheme = (Component: any, props: Record<string, any> = {}) => {
     ]),
   )
   try {
-    const vnode = Component(props) as any
+    let vnode = Component(props) as any
+    // EnhancedComponent returns a reactive accessor (function) for mode switching.
+    // In tests we evaluate it directly to get the VNode.
+    while (typeof vnode === "function") vnode = vnode()
     return vnode.$rocketstyle
   } finally {
     popContext()

package/src/__tests__/providerConsumer.test.ts

@@ -60,6 +60,13 @@ const ChildComponent: any = ({
 })
 ChildComponent.displayName = "ChildComponent"
 
+/** Unwrap reactive accessors (EnhancedComponent returns a function for mode switching). */
+const unwrap = (val: any): any => {
+  let result = val
+  while (typeof result === "function" && !result.IS_ROCKETSTYLE) result = result()
+  return result
+}
+
 /** Push a theme context and run fn, then pop */
 const withThemeContext = (fn: () => any) => {
   pushContext(
@@ -103,7 +110,7 @@ describe("Provider/Consumer integration", () => {
         component: BaseComponent,
       }).config({ provider: true })
 
-      const result = withThemeContext(() => ParentButton({ children: "Child" }))
+      const result = withThemeContext(() => unwrap(ParentButton({ children: "Child" })))
       // Provider wraps with createLocalProvider which injects pseudo state
       // Initial state should be false
       expect(result.props["data-hover"]).toBe("false")
@@ -131,9 +138,9 @@ describe("Provider/Consumer integration", () => {
 
       // Render parent, then render child within the same context
       withThemeContext(() => {
-        const _parentResult = Parent({ children: null })
+        const _parentResult = unwrap(Parent({ children: null }))
         // The parent pushes local context — child should see it
-        const childResult = Child({})
+        const childResult = unwrap(Child({}))
         expect(childResult).toBeDefined()
         const childProps = childResult?.props ?? childResult
         expect(childProps["data-parent-hover"]).toBe("no")
@@ -151,7 +158,7 @@ describe("Provider/Consumer integration", () => {
           })),
       })
 
-      const result = withThemeContext(() => Child({}))
+      const result = withThemeContext(() => unwrap(Child({})))
       const props = result?.props ?? result
       expect(props["data-parent-hover"]).toBe("no")
     })

package/src/__tests__/rocketstyleIntegration.test.ts

@@ -66,10 +66,17 @@ const withThemeContext = (fn: () => any) => {
   }
 }
 
+/** Unwrap reactive accessors (EnhancedComponent returns a function for mode switching). */
+const unwrap = (val: any): any => {
+  let result = val
+  while (typeof result === "function" && !result.IS_ROCKETSTYLE) result = result()
+  return result
+}
+
 /** Helper: call the component and return its output for inspection. */
 const renderProps = (Component: any, props: Record<string, any> = {}) => {
   return withThemeContext(() => {
-    const vnode = Component(props) as any
+    const vnode = unwrap(Component(props))
     return vnode?.props ?? vnode
   })
 }
@@ -584,7 +591,7 @@ describe("theme and state injection", () => {
         primary: { color: "red" },
       }))
 
-    const vnode = withThemeContext(() => Button({ state: "primary" }))
+    const vnode = withThemeContext(() => unwrap(Button({ state: "primary" })))
     expect(vnode.$rocketstyle).toBeDefined()
     expect(vnode.$rocketstyle.color).toBe("red")
     expect(vnode.$rocketstyle.bg).toBe("white")
@@ -608,7 +615,7 @@ describe("theme and state injection", () => {
       primary: { color: "blue" },
     }))
 
-    const vnode = withThemeContext(() => Button({ state: "primary" }))
+    const vnode = withThemeContext(() => unwrap(Button({ state: "primary" })))
     expect(vnode.$rocketstate).toBeDefined()
     expect(vnode.$rocketstate.state).toBe("primary")
   })

package/src/hoc/rocketstyleAttrsHoc.ts

@@ -27,11 +27,15 @@ const rocketStyleHOC: RocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 
   const Enhanced = (WrappedComponent: ComponentFn<any>) => {
     const HOCComponent: ComponentFn<any> = (props) => {
-      const { theme, mode, isDark, isLight } = useTheme({
-        inversed,
-      })
+      // IMPORTANT: Do NOT destructure — useTheme returns getter properties.
+      // Destructuring calls getters once and captures static values.
+      // Keep the object reference so properties re-evaluate lazily.
+      const themeAttrs = useTheme({ inversed })
 
-      const callbackParams = [theme, { render, mode, isDark, isLight }]
+      const callbackParams = [
+        themeAttrs.theme,
+        { render, mode: themeAttrs.mode, isDark: themeAttrs.isDark, isLight: themeAttrs.isLight },
+      ]
 
       // Remove undefined props not to override potential default props
       const filteredProps = removeUndefinedProps(props)

package/src/hooks/useTheme.ts

@@ -14,23 +14,38 @@ type UseThemeAttrs = ({ inversed }: { inversed?: boolean | undefined }) => Conte
 
 /**
  * Retrieves the current theme object and resolved mode from context.
- * Supports mode inversion so nested components can flip between
- * light and dark without a new provider.
  *
- * In Pyreon, components run once — no useMemo needed.
+ * Returns an object with getter properties so that mode/isDark/isLight
+ * are evaluated lazily on each access. This supports reactive mode
+ * switching via PyreonUI — when PyreonUI provides `get mode()` getters,
+ * rocketstyle picks up changes on every styled component re-evaluation.
+ *
+ * Without getters, destructuring would capture the mode value once at
+ * setup time, making theme switching permanently broken.
  */
 const useThemeAttrs: UseThemeAttrs = ({ inversed }) => {
-  const {
-    theme = {},
-    mode: ctxMode = "light",
-    isDark: ctxDark,
-  } = useContext<Context>(context) || {}
-
-  const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode
-  const isDark = inversed ? !ctxDark : ctxDark
-  const isLight = !isDark
+  // Keep the context object reference — read its properties lazily via getters.
+  // PyreonUI provides { get mode() {...} } so each access re-evaluates.
+  const ctx = useContext<Context>(context) || ({} as Partial<Context>)
 
-  return { theme, mode, isDark, isLight }
+  return {
+    get theme() {
+      return ctx.theme ?? ({} as Record<string, unknown>)
+    },
+    get mode() {
+      const ctxMode = ctx.mode ?? "light"
+      return inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode
+    },
+    get isDark() {
+      const ctxDark = ctx.isDark ?? false
+      return inversed ? !ctxDark : ctxDark
+    },
+    get isLight() {
+      const ctxDark = ctx.isDark ?? false
+      const isDark = inversed ? !ctxDark : ctxDark
+      return !isDark
+    },
+  }
 }
 
 export default useThemeAttrs

package/src/rocketstyle.ts

@@ -104,120 +104,138 @@ const rocketComponent: RocketComponent = (options) => {
     // --------------------------------------------------
     // general theme and theme mode dark / light passed in context
     // --------------------------------------------------
-    const { theme, mode } = useTheme(options)
+    // IMPORTANT: Do NOT destructure — useTheme returns getter properties.
+    // Destructuring calls getters once and captures static values.
+    // Keep the object reference so mode/isDark/isLight re-evaluate lazily.
+    const themeAttrs = useTheme(options)
 
     // --------------------------------------------------
-    // calculate themes for all defined styling dimensions
-    // --------------------------------------------------
-
-    // BASE / DEFAULT THEME Object (cached by theme identity)
-    const baseThemeHelper = ThemeManager.baseTheme
-    if (!baseThemeHelper.has(theme)) {
-      baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme))
-    }
-    const baseTheme = baseThemeHelper.get(theme)
-
-    // DIMENSION(S) THEMES Object (cached by theme identity)
-    const dimHelper = ThemeManager.dimensionsThemes
-    if (!dimHelper.has(theme)) {
-      dimHelper.set(theme, getDimensionThemes(theme, options))
-    }
-    const themes = dimHelper.get(theme)
-
-    // BASE / DEFAULT MODE THEME Object (cached by mode + baseTheme)
-    const modeBaseHelper = ThemeManager.modeBaseTheme[mode]
-    if (!modeBaseHelper.has(baseTheme)) {
-      modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode))
-    }
-    const currentModeBaseTheme = modeBaseHelper.get(baseTheme)
-
-    // DIMENSION(S) MODE THEMES Object (cached by mode + themes)
-    const modeDimHelper = ThemeManager.modeDimensionTheme[mode]
-    if (!modeDimHelper.has(themes)) {
-      modeDimHelper.set(themes, getThemeByMode(themes, mode))
-    }
-    const currentModeThemes = modeDimHelper.get(themes)
-
-    // --------------------------------------------------
-    // dimension map & reserved prop names
-    // --------------------------------------------------
-    const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
-      themes,
-      useBooleans: options.useBooleans,
-    })
-
-    const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames)
-
-    // --------------------------------------------------
-    // get final props: merged styling from context + attrs + direct props
+    // Static setup — runs once at component mount
     // --------------------------------------------------
     const { pseudo, ...mergeProps } = {
       ...localCtx,
       ...props,
     }
 
-    // --------------------------------------------------
-    // pseudo rocket state
-    // --------------------------------------------------
     const pseudoRocketstate = {
       ...pseudo,
       ...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS]),
     }
 
     // --------------------------------------------------
-    // rocketstate — active dimension values
+    // Reactive accessor — re-evaluates when mode changes.
+    // When mounted, the runtime wraps this in an effect so
+    // reading themeAttrs.mode creates a reactive dependency.
+    // Mode switches are infrequent (user-initiated), so full
+    // re-render of the styled subtree is acceptable.
     // --------------------------------------------------
-    const rocketstate = _calculateStylingAttrs({
-      props: pickStyledAttrs(mergeProps, reservedPropNames),
-      dimensions,
-    })
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: theme resolution is inherently multi-step
+    return (() => {
+      // Read theme and mode lazily via getters — tracked by the effect
+      const theme = themeAttrs.theme
+      const mode = themeAttrs.mode
+
+      // --------------------------------------------------
+      // calculate themes for all defined styling dimensions
+      // --------------------------------------------------
+
+      // BASE / DEFAULT THEME Object (cached by theme identity)
+      const baseThemeHelper = ThemeManager.baseTheme
+      if (!baseThemeHelper.has(theme)) {
+        baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme))
+      }
+      const baseTheme = baseThemeHelper.get(theme)
 
-    const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate }
+      // DIMENSION(S) THEMES Object (cached by theme identity)
+      const dimHelper = ThemeManager.dimensionsThemes
+      if (!dimHelper.has(theme)) {
+        dimHelper.set(theme, getDimensionThemes(theme, options))
+      }
+      const themes = dimHelper.get(theme)
 
-    // --------------------------------------------------
-    // rocketstyle — computed theme based on active dimensions
-    // --------------------------------------------------
-    const computedRocketstyle = getTheme({
-      rocketstate,
-      themes: currentModeThemes,
-      baseTheme: currentModeBaseTheme,
-      transformKeys: options.transformKeys,
-      appTheme: theme,
-    })
+      // BASE / DEFAULT MODE THEME Object (cached by mode + baseTheme)
+      const modeBaseHelper = ThemeManager.modeBaseTheme[mode]
+      if (!modeBaseHelper.has(baseTheme)) {
+        modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode))
+      }
+      const currentModeBaseTheme = modeBaseHelper.get(baseTheme)
 
-    // --------------------------------------------------
-    // final props passed to WrappedComponent
-    // --------------------------------------------------
-    const finalProps: Record<string, any> = {
-      ...omit(mergeProps, [...RESERVED_STYLING_PROPS_KEYS, ...PSEUDO_KEYS, ...options.filterAttrs]),
-      ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
-      // ref flows as a normal prop in Pyreon
-      ref: props.ref,
-      $rocketstyle: computedRocketstyle,
-      $rocketstate: finalRocketstate,
-    }
+      // DIMENSION(S) MODE THEMES Object (cached by mode + themes)
+      const modeDimHelper = ThemeManager.modeDimensionTheme[mode]
+      if (!modeDimHelper.has(themes)) {
+        modeDimHelper.set(themes, getThemeByMode(themes, mode))
+      }
+      const currentModeThemes = modeDimHelper.get(themes)
 
-    // development debugging
-    if (process.env.NODE_ENV !== "production") {
-      finalProps["data-rocketstyle"] = componentName
+      // --------------------------------------------------
+      // dimension map & reserved prop names
+      // --------------------------------------------------
+      const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
+        themes,
+        useBooleans: options.useBooleans,
+      })
 
-      if (options.DEBUG) {
-        const debugPayload = {
-          component: componentName,
-          rocketstate: finalRocketstate,
-          rocketstyle: computedRocketstyle,
-          dimensions,
-          mode,
-          reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
-          filteredAttrs: options.filterAttrs,
-        }
+      const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames)
+
+      // --------------------------------------------------
+      // rocketstate — active dimension values
+      // --------------------------------------------------
+      const rocketstate = _calculateStylingAttrs({
+        props: pickStyledAttrs(mergeProps, reservedPropNames),
+        dimensions,
+      })
+
+      const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate }
+
+      // --------------------------------------------------
+      // rocketstyle — computed theme based on active dimensions
+      // --------------------------------------------------
+      const computedRocketstyle = getTheme({
+        rocketstate,
+        themes: currentModeThemes,
+        baseTheme: currentModeBaseTheme,
+        transformKeys: options.transformKeys,
+        appTheme: theme,
+      })
 
-        // biome-ignore lint/suspicious/noConsole: debug logging controlled by DEBUG option
-        console.debug(`[rocketstyle] ${componentName} render:`, debugPayload)
+      // --------------------------------------------------
+      // final props passed to WrappedComponent
+      // --------------------------------------------------
+      const finalProps: Record<string, any> = {
+        ...omit(mergeProps, [
+          ...RESERVED_STYLING_PROPS_KEYS,
+          ...PSEUDO_KEYS,
+          ...options.filterAttrs,
+        ]),
+        ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
+        // ref flows as a normal prop in Pyreon
+        ref: props.ref,
+        $rocketstyle: computedRocketstyle,
+        $rocketstate: finalRocketstate,
+      }
+
+      // development debugging
+      if (process.env.NODE_ENV !== "production") {
+        finalProps["data-rocketstyle"] = componentName
+
+        if (options.DEBUG) {
+          const debugPayload = {
+            component: componentName,
+            rocketstate: finalRocketstate,
+            rocketstyle: computedRocketstyle,
+            dimensions,
+            mode,
+            reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
+            filteredAttrs: options.filterAttrs,
+          }
+
+          // biome-ignore lint/suspicious/noConsole: debug logging controlled by DEBUG option
+          console.debug(`[rocketstyle] ${componentName} render:`, debugPayload)
+        }
       }
-    }
 
-    return RenderComponent(finalProps)
+      return RenderComponent(finalProps)
+    }) as unknown as ReturnType<ComponentFn<InnerComponentProps>>
   }
 
   // ------------------------------------------------------