@pyreon/rocketstyle 0.11.5 → 0.11.6

package/README.md

@@ -78,12 +78,12 @@ Button({ danger: true, lg: true, label: 'Delete' })
 
 A dimension is a named axis of style variation. The factory ships with four defaults:
 
-| Dimension | Prop name | Multi | Example |
-| --------- | --------- | ----- | ------- |
-| `states` | `state` | no | `primary`, `danger`, `success` |
-| `sizes` | `size` | no | `sm`, `md`, `lg` |
-| `variants` | `variant` | no | `outlined`, `filled` |
-| `multiple` | — | yes | `rounded`, `shadow` |
+| Dimension  | Prop name | Multi | Example                        |
+| ---------- | --------- | ----- | ------------------------------ |
+| `states`   | `state`   | no    | `primary`, `danger`, `success` |
+| `sizes`    | `size`    | no    | `sm`, `md`, `lg`               |
+| `variants` | `variant` | no    | `outlined`, `filled`           |
+| `multiple` | —         | yes   | `rounded`, `shadow`            |
 
 Each dimension creates a chain method (`.states()`, `.sizes()`, etc.) and a corresponding prop on the component.
 
@@ -127,7 +127,9 @@ Factory initializer. Returns a function that accepts component configuration.
 
 ```ts
 const factory = rocketstyle({
-  dimensions: { /* custom dimensions */ },
+  dimensions: {
+    /* custom dimensions */
+  },
   useBooleans: true,
 })
 
@@ -200,15 +202,15 @@ Button.states((theme, mode, css) => ({
 Define the CSS template using `@pyreon/styler`'s `css` tagged template.
 
 ```ts
-Button.styles((css) => css`
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s;
-
-  ${({ $rocketstyle }) =>
-    makeItResponsive({ theme: $rocketstyle, styles, css })
-  }
-`)
+Button.styles(
+  (css) => css`
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+
+    ${({ $rocketstyle }) => makeItResponsive({ theme: $rocketstyle, styles, css })}
+  `,
+)
 ```
 
 ### .config(options)
@@ -254,11 +256,11 @@ Define your own dimensions by passing them to the factory:
 ```ts
 const rocketButton = rocketstyle({
   dimensions: {
-    intent: 'intent',                    // prop: intent="primary"
-    size: 'size',                        // prop: size="lg"
+    intent: 'intent', // prop: intent="primary"
+    size: 'size', // prop: size="lg"
     appearance: {
       propName: 'appearance',
-      multi: true,                       // allows multiple values
+      multi: true, // allows multiple values
     },
   },
 })
@@ -308,9 +310,10 @@ const ButtonIcon = rocketstyle()({
   component: Element,
 })
   .config({
-    consumer: (ctx) => ctx(({ pseudo }) => ({
-      state: pseudo.hover ? 'active' : 'default',
-    })),
+    consumer: (ctx) =>
+      ctx(({ pseudo }) => ({
+        state: pseudo.hover ? 'active' : 'default',
+      })),
   })
   .states({
     default: { color: '#666' },
@@ -318,10 +321,7 @@ const ButtonIcon = rocketstyle()({
   })
 
 // Icon reacts to parent's hover state
-ButtonGroup({ state: 'primary', children: [
-  ButtonIcon({}),
-  'Label',
-]})
+ButtonGroup({ state: 'primary', children: [ButtonIcon({}), 'Label'] })
 ```
 
 ## Light / Dark Mode
@@ -339,12 +339,12 @@ Use `inversed: true` in `.config()` to flip the mode for a component subtree.
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | * |
-| @pyreon/reactivity | * |
-| @pyreon/ui-core | * |
-| @pyreon/styler | * |
+| Package            | Version |
+| ------------------ | ------- |
+| @pyreon/core       | \*      |
+| @pyreon/reactivity | \*      |
+| @pyreon/ui-core    | \*      |
+| @pyreon/styler     | \*      |
 
 ## License
 

package/lib/index.d.ts

@@ -9,7 +9,7 @@ type Theme$1 = {
 type TProvider = {
   children: VNodeChild;
   theme?: Theme$1 | undefined;
-  mode?: "light" | "dark" | undefined;
+  mode?: 'light' | 'dark' | undefined;
   inversed?: boolean | undefined;
   provider?: ((props: Record<string, unknown>) => VNodeChild) | undefined;
 };
@@ -95,8 +95,13 @@ type Css = typeof config.css;
 /**
  * Props available inside `.styles()` interpolation functions.
  *
- * - `$rocketstyle` — computed theme (inferred from `.theme()` chain)
+ * - `$rocketstyle` — resolved theme object (the styled() runtime resolves
+ *   the reactive accessor before calling interpolation functions)
  * - `$rocketstate` — active dimension values + pseudo state
+ *
+ * Note: internally, rocketstyle passes $rocketstyle as a `() => CSS` accessor
+ * to DynamicStyled for reactive class swapping. But by the time interpolation
+ * functions run, it's always been resolved to a plain CSS object.
  */
 type RocketStyleInterpolationProps<CSS extends TObj = TObj> = {
   $rocketstyle: CSS;
@@ -123,13 +128,13 @@ declare const THEME_MODES: {
 interface ThemeDefault {}
 type Theme<T> = T extends unknown ? ThemeDefault : MergeTypes<[ThemeDefault, T]>;
 type ThemeModeKeys = keyof typeof THEME_MODES;
-type ThemeModeCallback = <A = any, B = any>(light: A, dark: B) => (mode: "light" | "dark") => A | B;
+type ThemeModeCallback = <A = any, B = any>(light: A, dark: B) => (mode: 'light' | 'dark') => A | B;
 type ThemeMode = <A = any, B = any>(light: A, dark: B) => A | B;
 type ThemeCb<CSS, T> = (theme: T, mode: ThemeModeCallback, css: Css) => Partial<CSS>;
 //#endregion
 //#region src/types/dimensions.d.ts
 type ExtractNullableDimensionKeys<T> = { [P in keyof T as T[P] extends false ? never : P]: T[P] };
-type ExtractDimensionKey<T extends DimensionValue> = T extends DimensionValueObj ? T["propName"] : T;
+type ExtractDimensionKey<T extends DimensionValue> = T extends DimensionValueObj ? T['propName'] : T;
 type ExtractDimensionMulti<T extends DimensionValue> = T extends DimensionValueObj ? true : false;
 type DimensionValuePrimitive = string;
 type DimensionValueObj = {
@@ -158,7 +163,7 @@ type RocketComponentType = ElementType & {
   IS_ROCKETSTYLE: true;
   $$rocketstyle: Record<string, unknown>;
 };
-type RocketProviderState<T extends RocketComponentType | TObj | unknown = unknown> = T extends RocketComponentType ? Partial<T["$$rocketstyle"]> & {
+type RocketProviderState<T extends RocketComponentType | TObj | unknown = unknown> = T extends RocketComponentType ? Partial<T['$$rocketstyle']> & {
   pseudo: PseudoState;
 } : T;
 type ConsumerCtxCBValue<T extends RocketComponentType, D extends Dimensions, DKP extends TDKP> = (attrs: RocketProviderState<T>) => DKP extends TDKP ? Partial<ExtractDimensions<D, DKP> & {
@@ -290,5 +295,19 @@ type IsRocketComponent = <T>(component: T) => boolean;
 /** Runtime type guard — checks if a component was created by `rocketstyle()`. */
 declare const isRocketComponent: IsRocketComponent;
 //#endregion
-export { type AttrsCb, type ComponentFn, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, rocketstyle as default, rocketstyle, isRocketComponent };
+//#region src/index.d.ts
+/**
+ * Resolve a $rocketstyle value — handles both function accessor and plain object.
+ * Use in styled() interpolation functions when $rocketstyle may be a reactive accessor.
+ *
+ * @example
+ * ```ts
+ * styled(Component)`
+ *   color: ${(props) => resolveTheme(props.$rocketstyle).color};
+ * `
+ * ```
+ */
+declare function resolveTheme<T = Record<string, unknown>>(value: (() => T) | T): T;
+//#endregion
+export { type AttrsCb, type ComponentFn, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, rocketstyle as default, rocketstyle, isRocketComponent, resolveTheme };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -57,13 +57,13 @@ const ALL_RESERVED_KEYS = [
 */
 const Provider = ({ provider = Provider$1, inversed, ...props }) => {
 	const { theme, mode, provider: RocketstyleProvider, children } = {
-		...useContext(context),
+		...useContext(context)(),
 		...props,
 		provider
 	};
 	let newMode = MODE_DEFAULT;
 	if (mode) newMode = inversed ? THEME_MODES_INVERSED[mode] : mode;
-	return RocketstyleProvider({
+	return (RocketstyleProvider ?? Provider$1)({
 		mode: newMode,
 		isDark: newMode === "dark",
 		isLight: newMode === "light",
@@ -148,11 +148,6 @@ const createLocalProvider = (WrappedComponent) => {
 		const hover = signal(false);
 		const focus = signal(false);
 		const pressed = signal(false);
-		const pseudoState = () => ({
-			hover: hover(),
-			focus: focus(),
-			pressed: pressed()
-		});
 		const events = {
 			onMouseEnter: (e) => {
 				hover.set(true);
@@ -184,7 +179,15 @@ const createLocalProvider = (WrappedComponent) => {
 			...$rocketstate,
 			pseudo: {
 				...$rocketstate?.pseudo,
-				...pseudoState()
+				get hover() {
+					return hover();
+				},
+				get focus() {
+					return focus();
+				},
+				get pressed() {
+					return pressed();
+				}
 			}
 		};
 		provide(localContext, updatedState);
@@ -203,29 +206,26 @@ const createLocalProvider = (WrappedComponent) => {
 * Retrieves the current theme object and resolved mode from context.
 *
 * 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.
+* are evaluated lazily on each access. The context is a ReactiveContext,
+* so useContext returns `() => CoreContextValue` — we call it inside
+* each getter to ensure reactive tracking.
 */
 const useThemeAttrs = ({ inversed }) => {
-	const ctx = useContext(context) || {};
+	const getCtx = useContext(context);
 	return {
 		get theme() {
-			return ctx.theme ?? {};
+			return getCtx().theme ?? {};
 		},
 		get mode() {
-			const ctxMode = ctx.mode ?? "light";
+			const ctxMode = getCtx().mode ?? "light";
 			return inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
 		},
 		get isDark() {
-			const ctxDark = ctx.isDark ?? false;
+			const ctxDark = getCtx().isDark ?? false;
 			return inversed ? !ctxDark : ctxDark;
 		},
 		get isLight() {
-			const ctxDark = ctx.isDark ?? false;
+			const ctxDark = getCtx().isDark ?? false;
 			return !(inversed ? !ctxDark : ctxDark);
 		}
 	};
@@ -297,23 +297,21 @@ const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 		const HOCComponent = (props) => {
 			const themeAttrs = useThemeAttrs({ inversed });
 			const filteredProps = removeUndefinedProps(props);
-			return (() => {
-				const callbackParams = [themeAttrs.theme, {
-					render,
-					mode: themeAttrs.mode,
-					isDark: themeAttrs.isDark,
-					isLight: themeAttrs.isLight
-				}];
-				const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
-				const finalAttrs = calculateAttrs([{
-					...prioritizedAttrs,
-					...filteredProps
-				}, ...callbackParams]);
-				return WrappedComponent({
-					...prioritizedAttrs,
-					...finalAttrs,
-					...filteredProps
-				});
+			const callbackParams = [themeAttrs.theme, {
+				render,
+				mode: themeAttrs.mode,
+				isDark: themeAttrs.isDark,
+				isLight: themeAttrs.isLight
+			}];
+			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
+			const finalAttrs = calculateAttrs([{
+				...prioritizedAttrs,
+				...filteredProps
+			}, ...callbackParams]);
+			return WrappedComponent({
+				...prioritizedAttrs,
+				...finalAttrs,
+				...filteredProps
 			});
 		};
 		return HOCComponent;
@@ -507,69 +505,68 @@ const rocketComponent = (options) => {
 			...pseudo,
 			...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
 		};
-		return (() => {
-			const theme = themeAttrs.theme;
+		const theme = themeAttrs.theme;
+		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 { 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 $rocketstyleAccessor = () => {
 			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({
+			return getTheme({
 				rocketstate,
-				themes: currentModeThemes,
+				themes: modeDimHelper.get(themes),
 				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);
-				}
+		};
+		const finalProps = {
+			...omit(mergeProps, [
+				...RESERVED_STYLING_PROPS_KEYS,
+				...PSEUDO_KEYS,
+				...options.filterAttrs
+			]),
+			...options.passProps ? pick(mergeProps, options.passProps) : {},
+			ref: props.ref,
+			$rocketstyle: $rocketstyleAccessor,
+			$rocketstate: finalRocketstate
+		};
+		if (process.env.NODE_ENV !== "production") {
+			finalProps["data-rocketstyle"] = componentName;
+			if (options.DEBUG) {
+				const debugPayload = {
+					component: componentName,
+					rocketstate: finalRocketstate,
+					rocketstyle: $rocketstyleAccessor(),
+					dimensions,
+					mode: themeAttrs.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;
@@ -672,8 +669,22 @@ const isRocketComponent = (component) => {
 
 //#endregion
 //#region src/index.ts
+/**
+* Resolve a $rocketstyle value — handles both function accessor and plain object.
+* Use in styled() interpolation functions when $rocketstyle may be a reactive accessor.
+*
+* @example
+* ```ts
+* styled(Component)`
+*   color: ${(props) => resolveTheme(props.$rocketstyle).color};
+* `
+* ```
+*/
+function resolveTheme(value) {
+	return typeof value === "function" ? value() : value;
+}
 var src_default = rocketstyle;
 
 //#endregion
-export { Provider, context, src_default as default, isRocketComponent, rocketstyle };
+export { Provider, context, src_default as default, isRocketComponent, resolveTheme, rocketstyle };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "Multi-dimensional style composition for Pyreon components",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/rocketstyle"
   },
-  "description": "Multi-dimensional style composition for Pyreon components",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,20 +34,24 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/test-utils": "^0.11.6",
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/ui-core": "^0.11.5",
-    "@pyreon/styler": "^0.11.5"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
+    "@pyreon/styler": "^0.11.6",
+    "@pyreon/ui-core": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }