@pyreon/rocketstyle 0.11.2 → 0.11.3

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "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.3",
+    "@pyreon/reactivity": "^0.11.3",
+    "@pyreon/ui-core": "^0.11.3",
+    "@pyreon/styler": "^0.11.3"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.2"
+    "@pyreon/typescript": "^0.11.3"
   }
 }

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