@pyreon/rocketstyle 0.15.0 → 0.18.0

package/lib/index.d.ts

@@ -87,11 +87,47 @@ type ExtractNullableKeys<T> = { [P in keyof T as IsAny<T[P]> extends true ? P :
 type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
-type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentFn<infer TProps> ? TProps : TComponentOrTProps;
+/**
+ * Extracts the props type from a Pyreon component function — or passes
+ * through the input unchanged when it's already a props type.
+ *
+ * Multi-overload aware: matches up to 4 call signatures and produces the
+ * UNION of their first-argument types. A single-overload function still
+ * works (the union of 4 copies of the same props type dedupes back to
+ * the single shape).
+ *
+ * **Why this shape**. `T extends (props: infer P) => any ? P : never` only
+ * captures the LAST overload of a multi-overload function — TS's overload-
+ * resolution-against-conditional-types semantics. Iterator / List / Element
+ * are 3-overload primitives where the LAST overload (`ChildrenProps`) is the
+ * loosest; without overload-aware extraction, `ExtractProps<Iterator>`
+ * returned just `ChildrenProps` and lost both `SimpleProps<T>` and
+ * `ObjectProps<T>` — wrapping Iterator through `rocketstyle()` /
+ * `attrs()` silently downgraded the public prop surface.
+ *
+ * The pattern-match shape `T extends { (props: infer P1, ...args: any): any;
+ * (props: infer P2, ...args: any): any; ... }` is the canonical TS trick
+ * for extracting overload sets — see also `Parameters<T>` semantics.
+ *
+ * Mirrors vitus-labs PR #222.
+ */
+type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends {
+  (props: infer P1, ...args: any): any;
+  (props: infer P2, ...args: any): any;
+  (props: infer P3, ...args: any): any;
+  (props: infer P4, ...args: any): any;
+} ? P1 | P2 | P3 | P4 : TComponentOrTProps extends {
+  (props: infer P1, ...args: any): any;
+  (props: infer P2, ...args: any): any;
+  (props: infer P3, ...args: any): any;
+} ? P1 | P2 | P3 : TComponentOrTProps extends {
+  (props: infer P1, ...args: any): any;
+  (props: infer P2, ...args: any): any;
+} ? P1 | P2 : TComponentOrTProps extends ComponentFn<infer TProps> ? TProps : TComponentOrTProps;
 //#endregion
 //#region src/types/styles.d.ts
 interface StylesDefault {}
-type Styles<S = unknown> = StylesDefault;
+type Styles<_S = unknown> = StylesDefault;
 type Css = typeof config.css;
 /**
  * Props available inside `.styles()` interpolation functions.
@@ -226,12 +262,25 @@ type DefaultProps = Partial<PseudoProps> & {
 };
 //#endregion
 //#region src/types/attrs.d.ts
-type AttrsCb<A, T> = (props: Partial<A>, theme: T, helpers: {
+/** Helpers object passed as the 3rd arg to every `.attrs(callback)`. */
+type AttrsHelpers = {
   mode?: ThemeModeKeys;
   isDark?: boolean;
   isLight?: boolean;
   createElement: typeof render;
-}) => Partial<A>;
+};
+/**
+ * Callback signature for `.attrs((props, theme, helpers) => …)`.
+ *
+ * `Partial<A>` on the return is for the strict-typing form when callers
+ * pass `AttrsCb<DFP, Theme<T>>` directly. In the rocketstyle `.attrs()`
+ * callback overload itself we use a different shape that decouples the
+ * props arg (narrow, full DFP) from the return type (loose — only the
+ * user's explicit `<P>` generic is checked, with `Record<string,
+ * unknown>` allowing runtime extras like `_documentProps`). See
+ * `IRocketStyleComponent.attrs` for the call-site shape.
+ */
+type AttrsCb<A, T> = (props: Partial<A>, theme: T, helpers: AttrsHelpers) => Partial<A>;
 //#endregion
 //#region src/types/hoc.d.ts
 type GenericHoc = (component: ElementType) => ElementType;
@@ -250,7 +299,7 @@ type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends
  * @param DKP  Dimensions key props.
  * @param DFP  Calculated final component props
  */
-interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> {
+interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = (OA extends infer O ? Omit<O, keyof EA & keyof O> & Partial<Pick<O, keyof EA & keyof O>> & MergeTypes<[Partial<Omit<EA, keyof O>>, DefaultProps, ExtractDimensionProps<D, DKP, UB>]> : never)> {
   (props: DFP): VNodeChild;
   config: <NC extends ElementType | unknown = unknown>({
     name,
@@ -261,10 +310,16 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
     inversed,
     passProps
   }: ConfigAttrs<NC, D, DKP, UB>) => NC extends ElementType ? RocketStyleComponent<ExtractProps<NC>, EA, T, CSS, S, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
-  attrs: <P extends TObj | unknown = unknown>(param: P extends TObj ? Partial<DFP & P> | ((props: Partial<DFP & P>, theme: Theme<T>, helpers: any) => Partial<P> & Record<string, unknown>) : Partial<DFP> | AttrsCb<DFP, Theme<T>>, config?: Partial<{
-    priority: boolean;
-    filter: P extends TObj ? Partial<keyof (EA & P)>[] : Partial<keyof EA>[];
-  }>) => P extends TObj ? RocketStyleComponent<OA, MergeTypes<[EA, P]>, T, CSS, S, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  attrs: {
+    <P extends TObj = {}>(param: (props: Partial<DFP & P>, theme: Theme<T>, helpers: AttrsHelpers) => Partial<P> & Record<string, unknown>, config?: Partial<{
+      priority: boolean;
+      filter: (keyof MergeTypes<[EA, P]>)[];
+    }>): RocketStyleComponent<OA, MergeTypes<[EA, P]>, T, CSS, S, HOC, D, UB, DKP>;
+    <P extends TObj = {}>(param: P & Partial<NoInfer<DFP>>, config?: Partial<{
+      priority: boolean;
+      filter: (keyof MergeTypes<[EA, P]>)[];
+    }>): RocketStyleComponent<OA, MergeTypes<[EA, P]>, T, CSS, S, HOC, D, UB, DKP>;
+  };
   theme: <P extends TObj = TObj>(param: Partial<P> | Partial<Styles<CSS>> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
   styles: (param: StylesCb<CSS>) => RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
   compose: <P extends ComposeParam>(param: P) => P extends TObj ? RocketStyleComponent<OA, EA, T, CSS, S, MergeTypes<[HOC, P]>, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
@@ -337,5 +392,5 @@ declare const isRocketComponent: IsRocketComponent;
  */
 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 };
+export { type AttrsCb, type AttrsHelpers, 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

@@ -239,7 +239,31 @@ const useThemeAttrs = ({ inversed }) => {
 //#region src/utils/attrs.ts
 const removeUndefinedProps = (props) => {
 	const result = {};
-	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
+	const descriptors = Object.getOwnPropertyDescriptors(props);
+	for (const key of Object.keys(descriptors)) {
+		const d = descriptors[key];
+		if (d.get || d.value !== void 0) Object.defineProperty(result, key, d);
+	}
+	return result;
+};
+/**
+* Like `Object.assign(target, ...sources)` but copies own property
+* DESCRIPTORS instead of reading + writing values. Later sources
+* override earlier ones (same semantics as spread / Object.assign).
+*
+* Required for reactive-prop preservation through the rocketstyle
+* pipeline: a plain `{ ...A, ...B }` spread fires every getter on A
+* and B and stores the resolved value, breaking the reactive
+* subscription. This helper copies descriptors so getters survive
+* the merge.
+*/
+const mergeDescriptors = (...sources) => {
+	const result = {};
+	for (const source of sources) {
+		if (!source) continue;
+		const descriptors = Object.getOwnPropertyDescriptors(source);
+		for (const key of Object.keys(descriptors)) Object.defineProperty(result, key, descriptors[key]);
+	}
 	return result;
 };
 /** Picks only the props whose keys exist in the dimension keywords lookup and have truthy values. */
@@ -301,15 +325,7 @@ const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 				isLight: themeAttrs.isLight
 			}];
 			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
-			const finalAttrs = calculateAttrs([{
-				...prioritizedAttrs,
-				...filteredProps
-			}, ...callbackParams]);
-			return WrappedComponent({
-				...prioritizedAttrs,
-				...finalAttrs,
-				...filteredProps
-			});
+			return WrappedComponent(mergeDescriptors(prioritizedAttrs, calculateAttrs([mergeDescriptors(prioritizedAttrs, filteredProps), ...callbackParams]), filteredProps));
 		};
 		return HOCComponent;
 	};
@@ -472,23 +488,38 @@ 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,
-	attrs: chainOptions(opts.attrs, defaultOpts.attrs),
-	filterAttrs: [...defaultOpts.filterAttrs ?? [], ...opts.filterAttrs ?? []],
-	priorityAttrs: chainOptions(opts.priorityAttrs, defaultOpts.priorityAttrs),
-	statics: {
-		...defaultOpts.statics,
-		...opts.statics
-	},
-	compose: {
-		...defaultOpts.compose,
-		...opts.compose
-	},
-	...chainOrOptions(CONFIG_KEYS, opts, defaultOpts),
-	...chainReservedKeyOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts)
-});
+/**
+* Clones the current configuration and merges new options, returning a fresh
+* rocketComponent.
+*
+* Component-swap reset: when `opts.component` is set AND differs from the
+* current `defaultOpts.component`, the prior `attrs`, `priorityAttrs`,
+* `filterAttrs`, and `compose` chains are dropped — they were tailored to the
+* previous component's prop shape, and applying them to a different component
+* silently leaks invalid props through to the DOM (e.g. `disabled` on an
+* `<a>`). Callers who want to preserve them must re-chain explicitly:
+*
+*   const NewBtn = Button.config({ component: 'a' }).attrs(sharedAttrs)
+*/
+const cloneAndEnhance = (defaultOpts, opts) => {
+	const componentChanged = opts.component != null && opts.component !== defaultOpts.component;
+	return rocketComponent({
+		...defaultOpts,
+		attrs: componentChanged ? chainOptions(opts.attrs, []) : chainOptions(opts.attrs, defaultOpts.attrs),
+		filterAttrs: componentChanged ? [...opts.filterAttrs ?? []] : [...defaultOpts.filterAttrs ?? [], ...opts.filterAttrs ?? []],
+		priorityAttrs: componentChanged ? chainOptions(opts.priorityAttrs, []) : chainOptions(opts.priorityAttrs, defaultOpts.priorityAttrs),
+		statics: {
+			...defaultOpts.statics,
+			...opts.statics
+		},
+		compose: componentChanged ? { ...opts.compose } : {
+			...defaultOpts.compose,
+			...opts.compose
+		},
+		...chainOrOptions(CONFIG_KEYS, opts, defaultOpts),
+		...chainReservedKeyOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts)
+	});
+};
 const rocketComponent = (options) => {
 	const { component, styles } = options;
 	const { styled } = config;
@@ -548,11 +579,16 @@ const rocketComponent = (options) => {
 		const _resolveRsEntry = () => {
 			const theme = themeAttrs.theme;
 			const mode = themeAttrs.mode;
-			let key = mode;
 			const propsRec = props;
+			const rocketstateRaw = _calculateStylingAttrs({
+				props: pickStyledAttrs(propsRec, reservedPropNames),
+				dimensions
+			});
+			let key = mode;
 			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);
+				const v = rocketstateRaw[dimName];
+				if (Array.isArray(v)) key += "|" + (v.length === 0 ? "" : v.slice().sort().join(","));
+				else 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];
@@ -583,10 +619,6 @@ const rocketComponent = (options) => {
 				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 rocketstateRaw = _calculateStylingAttrs({
-				props: pickStyledAttrs(propsRec, reservedPropNames),
-				dimensions
-			});
 			const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
 			if (modeBaseHelper.has(baseTheme)) {
 				if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("rocketstyle.localThemeManager.hit");
@@ -631,20 +663,34 @@ const rocketComponent = (options) => {
 			omitSet = new Set([...RESERVED_STYLING_PROPS_KEYS, ...STATIC_OMIT_KEYS]);
 			_omitSetCache.set(RESERVED_STYLING_PROPS_KEYS, omitSet);
 		}
-		const mergeProps = localCtx ? {
-			...localCtx,
-			...props
-		} : props;
+		const mergeProps = localCtx ? mergeDescriptors(localCtx, props) : props;
 		const finalProps = omit(mergeProps, omitSet);
 		if (options.passProps) {
 			const passed = pick(mergeProps, options.passProps);
-			for (const k in passed) finalProps[k] = passed[k];
+			const passedDescriptors = Object.getOwnPropertyDescriptors(passed);
+			for (const k of Object.keys(passedDescriptors)) Object.defineProperty(finalProps, k, passedDescriptors[k]);
 		}
-		finalProps.ref = props.ref;
-		finalProps.$rocketstyle = $rocketstyleAccessor;
-		finalProps.$rocketstate = $rocketstateAccessor;
+		const refDescriptor = Object.getOwnPropertyDescriptor(props, "ref");
+		if (refDescriptor) Object.defineProperty(finalProps, "ref", refDescriptor);
+		Object.defineProperty(finalProps, "$rocketstyle", {
+			value: $rocketstyleAccessor,
+			writable: true,
+			enumerable: true,
+			configurable: true
+		});
+		Object.defineProperty(finalProps, "$rocketstate", {
+			value: $rocketstateAccessor,
+			writable: true,
+			enumerable: true,
+			configurable: true
+		});
 		if (__DEV__) {
-			finalProps["data-rocketstyle"] = componentName;
+			Object.defineProperty(finalProps, "data-rocketstyle", {
+				value: componentName,
+				writable: true,
+				enumerable: true,
+				configurable: true
+			});
 			if (options.DEBUG) {
 				const debugPayload = {
 					component: componentName,
@@ -715,8 +761,8 @@ const rocketComponent = (options) => {
 			{
 				render,
 				mode,
-				isDark: mode === "light",
-				isLight: mode === "dark"
+				isDark: mode === "dark",
+				isLight: mode === "light"
 			}
 		])
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.15.0",
+  "version": "0.18.0",
   "description": "Multi-dimensional style composition for Pyreon components",
   "license": "MIT",
   "repository": {
@@ -42,19 +42,19 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.2",
-    "@pyreon/typescript": "^0.15.0",
-    "@pyreon/ui-core": "^0.15.0",
+    "@pyreon/test-utils": "^0.13.5",
+    "@pyreon/typescript": "^0.18.0",
+    "@pyreon/ui-core": "^0.18.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.3.0"
   },
-  "peerDependencies": {
-    "@pyreon/core": "^0.15.0",
-    "@pyreon/reactivity": "^0.15.0",
-    "@pyreon/styler": "^0.15.0",
-    "@pyreon/ui-core": "^0.15.0"
-  },
   "engines": {
     "node": ">= 22"
+  },
+  "dependencies": {
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0",
+    "@pyreon/styler": "^0.18.0",
+    "@pyreon/ui-core": "^0.18.0"
   }
 }

package/src/__tests__/attrs-overloads.test.ts

@@ -0,0 +1,97 @@
+import type { ComponentFn } from '@pyreon/core'
+import rocketstyle from '../init'
+
+// Type-level regression tests for the post-#225/#227 `.attrs()` overload
+// split: (a) DFP widening makes `.attrs(obj)` keys optional at JSX call site,
+// (b) callback overload preserves Pyreon's loose-return convention so
+// `_documentProps` / `tag: 'a'` runtime extras still typecheck without
+// per-callsite `as any` casts.
+//
+// These are not bisect-load-bearing at runtime — they're type-level
+// assertions exercised by `tsc --noEmit`. Including them in the suite
+// makes failures show up in the test report (vitest treats type errors
+// as compile failures).
+describe('attrs overloads — type-level contract', () => {
+  // A minimal base component standing in for Text / Button / etc.
+  // We only care about the type-level surface here.
+  type BaseProps = {
+    tag?: 'div' | 'span' | 'p' | 'h1' | 'h2' | 'h3'
+    role?: string
+  }
+  const Base: ComponentFn<BaseProps> = () => null
+
+  describe('object overload — keys become optional at JSX site (PR #225)', () => {
+    it('accepts object with default values', () => {
+      const Comp = rocketstyle()({ name: 'Comp', component: Base }).attrs({
+        tag: 'div',
+      })
+      // The component is callable — at the JSX call site, `tag` is now
+      // optional because `.attrs({ tag: 'div' })` provides a default.
+      // Pre-#225 the type would have required `tag` at the JSX site.
+      // We can't directly assert via `expectTypeOf` without the dep, but
+      // the smoke is: the chain compiles without errors.
+      expect(typeof Comp).toBe('function')
+    })
+
+    it('accepts new keys in attrs object', () => {
+      // The attrs object can introduce new keys beyond the base component's
+      // props (here: `customField`). The keys flow into the returned
+      // component's extended-attrs `EA` and become typed props.
+      const Comp = rocketstyle()({ name: 'Comp', component: Base }).attrs({
+        customField: 'hello',
+      })
+      expect(typeof Comp).toBe('function')
+    })
+  })
+
+  describe('callback overload — Pyreon convention for runtime extras', () => {
+    it('accepts callback returning fields outside the base prop union (no as-cast needed)', () => {
+      // This is the canonical document-primitive pattern: a Text-based
+      // rocketstyle that overrides `tag` to a value outside Text's strict
+      // `tag` union AND adds a runtime-only `_documentProps` marker. The
+      // callback's return type intentionally allows `Record<string, unknown>`
+      // for keys outside the user's explicit `<P>` generic, matching
+      // Pyreon's pre-#225 convention.
+      const Comp = rocketstyle()({ name: 'DocLink', component: Base }).attrs<{
+        href?: string
+      }>((props) => ({
+        tag: 'a', // 'a' is NOT in BaseProps['tag'] — falls through Record<string, unknown>
+        _documentProps: { href: props.href ?? '#' },
+      }))
+      expect(typeof Comp).toBe('function')
+    })
+
+    it('accepts callback returning literal values (contextual narrowing via <P>)', () => {
+      // When the user passes an explicit `<P>` generic, the callback's
+      // return is contextually typed against `Partial<P>`. Writing
+      // `tag: 'h1'` stays narrow at literal `'h1'` — no `as const` needed.
+      // Note: tag is in BaseProps['tag'] union so this typechecks against
+      // BOTH the wildcard arm AND the explicit P-key arm.
+      const Comp = rocketstyle()({ name: 'Heading', component: Base }).attrs<{
+        level?: number
+      }>((props) => ({
+        tag: `h${props.level ?? 1}` as 'h1' | 'h2' | 'h3',
+      }))
+      expect(typeof Comp).toBe('function')
+    })
+
+    it('callback receives full DFP-typed props for narrow reads', () => {
+      // The `props` arg passed to the callback IS strictly typed as
+      // `Partial<DFP & P>` — so reading `props.tag` narrows against the
+      // wrapped component's full surface. This is the "props narrow,
+      // return loose" asymmetry Pyreon settled on.
+      const Comp = rocketstyle()({ name: 'Probe', component: Base }).attrs<{
+        scale?: number
+      }>((props) => {
+        // Type check: `props.scale` is `number | undefined`, `props.tag`
+        // is the narrow BaseProps['tag'] union | undefined.
+        const _scale: number | undefined = props.scale
+        const _tag: 'div' | 'span' | 'p' | 'h1' | 'h2' | 'h3' | undefined = props.tag
+        expect(_scale).toBeUndefined()
+        expect(_tag).toBeUndefined()
+        return { scale: 1 }
+      })
+      expect(typeof Comp).toBe('function')
+    })
+  })
+})

package/src/__tests__/cache-key-boolean-collision.test.ts

@@ -0,0 +1,54 @@
+/**
+ * Bug reproduction: under `useBooleans: true`, `_resolveRsEntry`'s cache
+ * key reads `propsRec[dimName]` directly (e.g. `propsRec.state`). Boolean
+ * shorthand props like `<X primary />` populate `propsRec.primary` (NOT
+ * `propsRec.state`), so the cache key for the `state` slot is `undefined`
+ * → `''` regardless of which boolean variant was passed.
+ *
+ * Result: `<X primary />` and `<X secondary />` produce identical cache
+ * keys and share the cached entry. The first-resolved variant's
+ * `$rocketstyle` wins for all subsequent renders.
+ */
+import { initTestConfig, withThemeContext } from '@pyreon/test-utils'
+import rocketstyle from '../init'
+
+let cleanup: () => void
+beforeAll(() => {
+  cleanup = initTestConfig()
+})
+afterAll(() => cleanup())
+
+const ThemeCapture: any = ({ $rocketstyle, $rocketstate, ...rest }: any) => ({
+  type: 'div',
+  props: rest,
+  $rocketstyle: typeof $rocketstyle === 'function' ? $rocketstyle() : $rocketstyle,
+  $rocketstate: typeof $rocketstate === 'function' ? $rocketstate() : $rocketstate,
+})
+ThemeCapture.displayName = 'ThemeCapture'
+
+describe('rocketstyle — cache-key collision under useBooleans:true', () => {
+  it('different boolean variants produce different $rocketstyle (NOT collide)', () => {
+    const Button: any = rocketstyle({ useBooleans: true })({
+      name: 'BoolButton',
+      component: ThemeCapture,
+    }).states(() => ({
+      primary: { color: 'red' },
+      secondary: { color: 'blue' },
+    }))
+
+    // Render with primary=true. Captures the $rocketstyle resolved
+    // for state='primary'.
+    const a = withThemeContext(() => Button({ primary: true }))
+
+    // Render with secondary=true. Should resolve to state='secondary'
+    // and produce DIFFERENT $rocketstyle.
+    const b = withThemeContext(() => Button({ secondary: true }))
+
+    // Bug: a.$rocketstyle === b.$rocketstyle (same cached entry).
+    // Fix: a.$rocketstyle.color === 'red', b.$rocketstyle.color === 'blue'.
+    expect(a.$rocketstate.state).toBe('primary')
+    expect(b.$rocketstate.state).toBe('secondary')
+    expect(a.$rocketstyle.color).toBe('red')
+    expect(b.$rocketstyle.color).toBe('blue')
+  })
+})