@fluixi-ui/fx 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,164 @@
+# @fluixi-ui/fx
+
+Token-aware style objects for Fluixi UI — the engine behind the `fx` prop.
+
+```tsx
+<Box fx={{ p: 4, bg: 'bgSubtle', radius: 'lg', _hover: { bg: 'bgMuted' } }} />
+```
+
+No CSS-in-JS runtime, no dependencies. Values resolve to the `--flx-ui-*` custom
+properties `@fluixi-ui/tokens` defines, so anything written with `fx` follows the
+theme, the accent, and the skin — including a theme driven from `@fluixi-css`.
+
+## Values
+
+A property's scale decides both which tokens a string key resolves against and
+what a bare number means:
+
+```tsx
+p: 3          // padding: var(--flx-ui-space-3)   — space scale
+m: -2         // margin: calc(var(--flx-ui-space-2) * -1)
+width: 240    // width: 240px                     — sizing is pixels
+zIndex: 3     // z-index: 3                       — unitless stays bare
+radius: 'lg'  // border-radius: var(--flx-ui-radius-lg)
+bg: 'primary' // background-color: var(--flx-ui-color-primary)
+bg: 'accent-9'// background-color: var(--flx-ui-accent-9)
+bg: '#ff0000' // background-color: #ff0000        — raw CSS always allowed
+```
+
+Aliases are deliberately few — `p` `px` `py` `m` `mx` `my` `bg` `radius` `shadow`.
+Everything else is the real CSS property name (`paddingTop`, not `pt`), so there's
+no table to learn. `px`/`py` map to the logical properties and follow writing
+direction.
+
+## Selectors
+
+A closed set of `_`-prefixed keys. They expand to the library's real conventions,
+not just the CSS pseudo — headless parts signal state through `data-*`/ARIA:
+
+```tsx
+_disabled: { opacity: 'disabled' }
+// :disabled, [disabled], [data-disabled]
+```
+
+State: `_hover` `_active` `_focus` `_focusVisible` `_focusWithin` `_disabled`
+`_checked` `_selected` `_expanded` `_open` `_invalid`
+Pseudo-elements: `_before` `_after` `_placeholder` `_selection`
+Structural: `_first` `_last` `_odd` `_even` `_notFirst` `_notLast` `_children`
+Environment: `_dark` `_light` `_hc` `_rtl` `_motionReduce` `_motionSafe`
+
+`_dark` targets `[data-theme='dark']` — the axis `createTheme` drives — and matches
+the element itself as well as a themed ancestor, so scoped theming works.
+
+The set being closed is the point: `fx` can't reach an app's class names, so a
+component can never couple itself to consumer CSS.
+
+Nesting composes:
+
+```tsx
+_dark: { _hover: { bg: 'primaryHover' } }
+```
+
+## Responsive
+
+Mobile-first objects keyed by breakpoint. `base` carries no media query:
+
+```tsx
+fx={{ p: { base: 3, md: 5 } }}
+```
+
+## Container queries
+
+Respond to the space a component is actually given rather than the viewport.
+The container is an ancestor — an element can't query itself:
+
+```tsx
+<Card fx={{ containerType: 'inline-size' }}>
+  <Stack fx={{ _container: { md: { flexDirection: 'row' } } }} />
+</Card>
+```
+
+Keys are a breakpoint name or a raw condition. Element-relative sizes often don't
+line up with the page scale, so raw conditions are first-class:
+
+```tsx
+_container: { '(min-width: 30rem)': { gap: 4 } }
+```
+
+Name a container when the nearest one isn't the one you mean:
+
+```tsx
+<aside fx={{ containerType: 'inline-size', containerName: 'panel' }}>
+  <div fx={{ _container: { name: 'panel', lg: { p: 6 } } }} />
+</aside>
+```
+
+At-rules nest rather than combine, so a container query and a media query can
+wrap the same declarations.
+
+## Colour
+
+Helpers emit CSS; they never compute a colour in JS. That matters here: tokens
+are custom properties that re-resolve against `data-theme` / `data-accent`, so a
+value computed at render would freeze whichever theme happened to be active.
+`color-mix()` and relative colour syntax re-resolve on their own, so a derived
+colour keeps following the theme, the accent and the skin.
+
+```tsx
+import { alpha, mix, lighten, darken } from '@fluixi-ui/fx';
+
+alpha('primary', 12)      // color-mix(in oklab, var(--flx-ui-color-primary) 12%, transparent)
+mix('primary', 'bg', 20)  // 20% primary over the page background
+lighten('primary', 8)     // oklch(from … calc(l + 0.08) c h / alpha)
+darken('border', 10)
+```
+
+Every amount is a percentage, 0–100. `lighten`/`darken` shift lightness in OKLCH,
+which keeps chroma and hue — a tint stays the same colour instead of drifting grey
+the way mixing with white or black does. They need relative colour syntax
+(Chrome 119+, Safari 16.4+, Firefox 128+); for a wider floor use
+`mix(color, 'white', n)`.
+
+## How it lands on the page
+
+Flat declarations and every `base` value go to the `style` attribute — most `fx`
+usage never touches the stylesheet. Only selector keys and non-`base` breakpoints
+need a rule; those are hashed, deduped, and inserted under `[data-fx="…"]` into
+`@layer flx.fx`, which sits above components and skins so `fx` wins, and below
+unlayered consumer CSS so an app can still override it.
+
+## Server rendering
+
+Inline declarations need nothing. For the rule tier, emit what was collected:
+
+```tsx
+const { css, tokens } = collectFx();
+`<style data-fx-sheet data-fx-tokens="${tokens}">${css}</style>`;
+```
+
+The client adopts that sheet instead of re-inserting its rules.
+
+## Composing
+
+`mergeFx` folds a component's own styling, its `slotProps`, and the consumer's
+`fx` into one object — later wins per property, selector blocks and breakpoint
+records merge rather than replace:
+
+```tsx
+resolveFx(mergeFx(componentOwn, slotProps.body?.fx, props.fx));
+```
+
+## Binding it to an element
+
+```tsx
+const [local, others] = splitProps(props, ['fx', 'style']);
+return <div {...fxProps(() => local.fx, () => local.style)} {...others} />;
+```
+
+Pass accessors, not values. The resolve runs inside a memo, so a reactive `fx`
+updates without re-rendering. A `style` prop is merged last and stays raw CSS —
+no token resolution — so it remains the lowest-level escape hatch.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './lib/types.js';
+export * from './lib/scales.js';
+export * from './lib/selectors.js';
+export * from './lib/resolve.js';
+export * from './lib/sheet.js';
+export * from './lib/merge.js';
+export * from './lib/color.js';
+export * from './lib/props.js';
+export { hash } from './lib/hash.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './lib/types.js';
+export * from './lib/scales.js';
+export * from './lib/selectors.js';
+export * from './lib/resolve.js';
+export * from './lib/sheet.js';
+export * from './lib/merge.js';
+export * from './lib/color.js';
+export * from './lib/props.js';
+export { hash } from './lib/hash.js';

package/dist/lib/color.d.ts

@@ -0,0 +1,18 @@
+import type { ColorValue } from './types.js';
+/**
+ * Fade a colour toward transparent.
+ *
+ * @example
+ * ```ts
+ * alpha('primary', 12) // color-mix(in oklab, var(--flx-ui-color-primary) 12%, transparent)
+ * ```
+ */
+export declare function alpha(color: ColorValue, amount: number): string;
+/**
+ * Blend two colours. The amount applies to the first, matching how `color-mix`
+ * reads: `mix('primary', 'bg', 20)` is 20% primary over the page background.
+ */
+export declare function mix(color: ColorValue, into: ColorValue, amount: number): string;
+export declare function lighten(color: ColorValue, amount: number): string;
+export declare function darken(color: ColorValue, amount: number): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/lib/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAmB7C;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAG/E;AAeD,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhE"}

package/dist/lib/color.js

@@ -0,0 +1,53 @@
+import { resolveColor } from './scales.js';
+/**
+ * Colour helpers emit CSS, they never compute a colour in JS.
+ *
+ * That's not a stylistic choice. Tokens are custom properties that re-resolve
+ * against `data-theme` / `data-accent`, so anything computed here would freeze a
+ * value that was only correct for the theme active at render. `color-mix()` and
+ * relative colour syntax re-resolve on their own, so a derived colour keeps
+ * following the theme, the accent and the skin.
+ *
+ * Every amount is a percentage, 0–100.
+ */
+function percent(amount) {
+    // Trim float noise from the divisions below without pulling in a rounding lib.
+    return Math.round(Math.min(100, Math.max(0, amount)) * 1000) / 1000;
+}
+/**
+ * Fade a colour toward transparent.
+ *
+ * @example
+ * ```ts
+ * alpha('primary', 12) // color-mix(in oklab, var(--flx-ui-color-primary) 12%, transparent)
+ * ```
+ */
+export function alpha(color, amount) {
+    return `color-mix(in oklab, ${resolveColor(String(color))} ${percent(amount)}%, transparent)`;
+}
+/**
+ * Blend two colours. The amount applies to the first, matching how `color-mix`
+ * reads: `mix('primary', 'bg', 20)` is 20% primary over the page background.
+ */
+export function mix(color, into, amount) {
+    const from = resolveColor(String(color));
+    return `color-mix(in oklab, ${from} ${percent(amount)}%, ${resolveColor(String(into))})`;
+}
+/**
+ * Shift lightness in OKLCH, which keeps chroma and hue — so a tint stays the same
+ * colour rather than drifting grey the way mixing with white or black does.
+ * Alpha is carried through.
+ *
+ * Relative colour syntax is required (Chrome 119+, Safari 16.4+, Firefox 128+).
+ * For a wider floor, `mix(color, 'white', n)` degrades gracefully.
+ */
+function shift(color, delta) {
+    const sign = delta < 0 ? '-' : '+';
+    return `oklch(from ${resolveColor(String(color))} calc(l ${sign} ${percent(Math.abs(delta)) / 100}) c h / alpha)`;
+}
+export function lighten(color, amount) {
+    return shift(color, amount);
+}
+export function darken(color, amount) {
+    return shift(color, -amount);
+}

package/dist/lib/hash.d.ts

@@ -0,0 +1,6 @@
+/**
+ * FNV-1a, base36. Only needs to distinguish rule bodies within one document, so
+ * 32 bits is ample and the short output keeps the emitted attribute readable.
+ */
+export declare function hash(input: string): string;
+//# sourceMappingURL=hash.d.ts.map

package/dist/lib/hash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.d.ts","sourceRoot":"","sources":["../../src/lib/hash.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAO1C"}

package/dist/lib/hash.js

@@ -0,0 +1,12 @@
+/**
+ * FNV-1a, base36. Only needs to distinguish rule bodies within one document, so
+ * 32 bits is ample and the short output keeps the emitted attribute readable.
+ */
+export function hash(input) {
+    let value = 0x811c9dc5;
+    for (let i = 0; i < input.length; i++) {
+        value ^= input.charCodeAt(i);
+        value = Math.imul(value, 0x01000193);
+    }
+    return (value >>> 0).toString(36);
+}

package/dist/lib/merge.d.ts

@@ -0,0 +1,8 @@
+import type { FxObject, FxProp } from './types.js';
+/**
+ * Combine style objects, later winning per property. Used to fold a component's
+ * own styling, its `slotProps`, and the consumer's `fx` into one object before
+ * resolving — so all three compose instead of clobbering.
+ */
+export declare function mergeFx(...inputs: FxProp[]): FxObject;
+//# sourceMappingURL=merge.d.ts.map

package/dist/lib/merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../src/lib/merge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAiCnD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAOrD"}

package/dist/lib/merge.js

@@ -0,0 +1,46 @@
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function flatten(input, out) {
+    if (!input)
+        return;
+    const value = typeof input === 'function' ? input() : input;
+    if (!value)
+        return;
+    if (Array.isArray(value)) {
+        for (const entry of value)
+            flatten(entry, out);
+        return;
+    }
+    out.push(value);
+}
+function mergeInto(target, source) {
+    for (const key of Object.keys(source)) {
+        const value = source[key];
+        const existing = target[key];
+        // Selector blocks and breakpoint records merge; anything else replaces, so a
+        // scalar overriding a responsive record (or the reverse) does what it reads like.
+        if (isPlainObject(value) && isPlainObject(existing)) {
+            const merged = { ...existing };
+            mergeInto(merged, value);
+            target[key] = merged;
+        }
+        else {
+            target[key] = value;
+        }
+    }
+}
+/**
+ * Combine style objects, later winning per property. Used to fold a component's
+ * own styling, its `slotProps`, and the consumer's `fx` into one object before
+ * resolving — so all three compose instead of clobbering.
+ */
+export function mergeFx(...inputs) {
+    const objects = [];
+    for (const input of inputs)
+        flatten(input, objects);
+    const result = {};
+    for (const object of objects)
+        mergeInto(result, object);
+    return result;
+}

package/dist/lib/props.d.ts

@@ -0,0 +1,20 @@
+import type { FxProp } from './types.js';
+export interface FxAttributes {
+    style: () => string | undefined;
+    'data-fx': () => string | undefined;
+}
+/**
+ * Bind an `fx` prop to the attributes an element needs. Pass accessors, not
+ * values — the resolve runs inside a memo, so a reactive `fx` updates the style
+ * without re-rendering, and identical objects reuse the same inserted rules.
+ *
+ * A `style` prop is merged last, so it stays the lowest-level escape hatch.
+ *
+ * @example
+ * ```tsx
+ * const [local, others] = splitProps(props, ['fx', 'style']);
+ * <div {...fxProps(() => local.fx, () => local.style)} {...others} />
+ * ```
+ */
+export declare function fxProps(fx: () => FxProp, style?: () => unknown): FxAttributes;
+//# sourceMappingURL=props.d.ts.map

package/dist/lib/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/lib/props.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;CACrC;AAeD;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,OAAO,GAAG,YAAY,CAiB7E"}

package/dist/lib/props.js

@@ -0,0 +1,50 @@
+import { createMemo } from '@fluixi/reactive/signal';
+import { resolveFx } from './resolve.js';
+import { cssProperty } from './scales.js';
+import { insertFx } from './sheet.js';
+/** A raw `style` prop stays raw CSS — no token resolution, no alias expansion. */
+function serializeStyle(value) {
+    if (value == null)
+        return '';
+    if (typeof value === 'function')
+        return serializeStyle(value());
+    if (typeof value === 'string')
+        return value;
+    if (typeof value !== 'object')
+        return '';
+    return Object.keys(value)
+        .map((key) => [key, value[key]])
+        .filter(([, entry]) => entry != null && entry !== false)
+        .map(([key, entry]) => `${cssProperty(key)}:${String(entry)}`)
+        .join(';');
+}
+/**
+ * Bind an `fx` prop to the attributes an element needs. Pass accessors, not
+ * values — the resolve runs inside a memo, so a reactive `fx` updates the style
+ * without re-rendering, and identical objects reuse the same inserted rules.
+ *
+ * A `style` prop is merged last, so it stays the lowest-level escape hatch.
+ *
+ * @example
+ * ```tsx
+ * const [local, others] = splitProps(props, ['fx', 'style']);
+ * <div {...fxProps(() => local.fx, () => local.style)} {...others} />
+ * ```
+ */
+export function fxProps(fx, style) {
+    // Inserting from inside the memo keeps resolve and insert in one pass; it's
+    // idempotent, so re-running on a dependency change costs a Set lookup.
+    const resolved = createMemo(() => {
+        const result = resolveFx(fx());
+        insertFx(result);
+        return result;
+    });
+    return {
+        style: () => {
+            const own = resolved().style;
+            const user = serializeStyle(style?.());
+            return (own && user ? `${own};${user}` : own || user) || undefined;
+        },
+        'data-fx': () => resolved().token,
+    };
+}

package/dist/lib/resolve.d.ts

@@ -0,0 +1,8 @@
+import type { FxProp, FxResult } from './types.js';
+/**
+ * Resolve a style object into inline declarations plus, when it uses selectors or
+ * breakpoints, a block of rule text. Pure — nothing is inserted into the document
+ * here; see `insertFx`.
+ */
+export declare function resolveFx(input: FxProp): FxResult;
+//# sourceMappingURL=resolve.d.ts.map

package/dist/lib/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/lib/resolve.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAqB,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+ItE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAkBjD"}

package/dist/lib/resolve.js

@@ -0,0 +1,142 @@
+import { breakpoint } from '@fluixi-ui/tokens/reference';
+import { hash } from './hash.js';
+import { ALIASES, cssProperty, resolveValue } from './scales.js';
+import { composeSelectors, isSelectorKey, selectorEntry } from './selectors.js';
+const BREAKPOINTS = breakpoint;
+const ROOT = ['&'];
+const CONTAINER_KEY = '_container';
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function bucketKey(selectors, atRules) {
+    return `${atRules.join('||')}||${selectors.join(', ')}`;
+}
+/**
+ * `element` replaces the `&` placeholder, and only inside selectors — a declaration
+ * value is free to contain an ampersand (a `url()` query string, say).
+ */
+function serializeRules(buckets, inlineKey, element) {
+    const out = [];
+    for (const [key, bucket] of buckets) {
+        if (key === inlineKey || bucket.declarations.size === 0)
+            continue;
+        const selector = bucket.selectors.map((part) => part.split('&').join(element)).join(', ');
+        let body = `${selector}{${[...bucket.declarations.values()].join(';')}}`;
+        for (let i = bucket.atRules.length - 1; i >= 0; i--)
+            body = `${bucket.atRules[i]}{${body}}`;
+        out.push(body);
+    }
+    return out.join('');
+}
+/**
+ * Flatten the array form and unwrap the accessor form. Falsy entries drop out so
+ * `fx={[base, dense && {...}]}` reads naturally.
+ */
+function normalize(input) {
+    if (!input)
+        return [];
+    const value = typeof input === 'function' ? input() : input;
+    if (!value)
+        return [];
+    if (Array.isArray(value))
+        return value.filter(Boolean);
+    return [value];
+}
+/**
+ * Walk a style object into buckets keyed by selector + media. Nothing is emitted
+ * until the walk finishes, so nesting order never affects the result.
+ */
+function walk(object, selectors, atRules, buckets) {
+    const key = bucketKey(selectors, atRules);
+    let bucket = buckets.get(key);
+    if (!bucket) {
+        bucket = { selectors, atRules, declarations: new Map() };
+        buckets.set(key, bucket);
+    }
+    for (const name of Object.keys(object)) {
+        const value = object[name];
+        if (value == null || value === false)
+            continue;
+        if (name === CONTAINER_KEY) {
+            if (isPlainObject(value))
+                walkContainer(value, selectors, atRules, buckets);
+            continue;
+        }
+        if (isSelectorKey(name)) {
+            if (!isPlainObject(value))
+                continue;
+            const entry = selectorEntry(name);
+            // A pseudo-element with no `content` would never render, and supplying it
+            // every time is noise.
+            const child = 'selector' in entry && /::(before|after)$/.test(entry.selector) && !('content' in value)
+                ? { content: "''", ...value }
+                : value;
+            if ('selector' in entry) {
+                walk(child, composeSelectors(selectors, entry.selector), atRules, buckets);
+            }
+            else {
+                walk(child, selectors, [...atRules, entry.atRule], buckets);
+            }
+            continue;
+        }
+        const property = ALIASES[name] ?? name;
+        if (isPlainObject(value)) {
+            for (const step of Object.keys(value)) {
+                const stepValue = value[step];
+                if (stepValue == null || stepValue === false)
+                    continue;
+                if (step === 'base') {
+                    declare(bucket, property, stepValue);
+                }
+                else if (BREAKPOINTS[step]) {
+                    walk({ [property]: stepValue }, selectors, [...atRules, `@media (min-width: ${BREAKPOINTS[step]})`], buckets);
+                }
+            }
+            continue;
+        }
+        declare(bucket, property, value);
+    }
+}
+/**
+ * `_container` is parameterised, so it can't live in the static selector table.
+ * Keys are either a breakpoint name or a raw condition starting with `(`; a
+ * `name` entry scopes the query to a named container rather than the nearest one.
+ */
+function walkContainer(query, selectors, atRules, buckets) {
+    const name = typeof query['name'] === 'string' ? `${query['name']} ` : '';
+    for (const key of Object.keys(query)) {
+        if (key === 'name')
+            continue;
+        const block = query[key];
+        if (!isPlainObject(block))
+            continue;
+        const condition = BREAKPOINTS[key] ? `(min-width: ${BREAKPOINTS[key]})` : key;
+        walk(block, selectors, [...atRules, `@container ${name}${condition}`], buckets);
+    }
+}
+function declare(bucket, property, value) {
+    bucket.declarations.set(property, `${cssProperty(property)}:${resolveValue(property, value)}`);
+}
+/**
+ * Resolve a style object into inline declarations plus, when it uses selectors or
+ * breakpoints, a block of rule text. Pure — nothing is inserted into the document
+ * here; see `insertFx`.
+ */
+export function resolveFx(input) {
+    const objects = normalize(input);
+    if (objects.length === 0)
+        return { style: '', rules: '', token: undefined };
+    const buckets = new Map();
+    const inlineKey = bucketKey(ROOT, []);
+    for (const object of objects)
+        walk(object, ROOT, [], buckets);
+    const inline = buckets.get(inlineKey);
+    const style = inline ? [...inline.declarations.values()].join(';') : '';
+    // Hash the unscoped form, then re-serialize against the attribute it names, so
+    // identical style objects always land on the same token.
+    const unscoped = serializeRules(buckets, inlineKey, '&');
+    if (!unscoped)
+        return { style, rules: '', token: undefined };
+    const token = hash(unscoped);
+    return { style, rules: serializeRules(buckets, inlineKey, `[data-fx="${token}"]`), token };
+}