@fluixi-ui/fx 0.1.0-alpha.0

package/dist/lib/scales.d.ts

@@ -0,0 +1,59 @@
+import { vars } from '@fluixi-ui/tokens/vars';
+/**
+ * A token scale. Membership decides two things for every CSS property: which
+ * token map a string key is looked up in, and what a bare number means.
+ */
+export type Scale = 'space' | 'size' | 'color' | 'radius' | 'shadow' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing' | 'fontFamily' | 'borderWidth' | 'duration' | 'easing' | 'opacity' | 'zIndex' | 'unitless';
+export type SpaceStep = keyof typeof vars.space;
+export type ColorToken = keyof typeof vars.color;
+export type RadiusToken = keyof typeof vars.radius;
+export type ShadowToken = keyof typeof vars.shadow;
+export type FontSizeToken = keyof typeof vars.fontSize;
+export type FontWeightToken = keyof typeof vars.fontWeight;
+export type LineHeightToken = keyof typeof vars.lineHeight;
+export type LetterSpacingToken = keyof typeof vars.letterSpacing;
+export type FontFamilyToken = keyof typeof vars.fontFamily;
+export type BorderWidthToken = keyof typeof vars.borderWidth;
+export type DurationToken = keyof typeof vars.duration;
+export type EasingToken = keyof typeof vars.easing;
+export type OpacityToken = keyof typeof vars.opacity;
+export type ZIndexToken = keyof typeof vars.zIndex;
+/**
+ * Negative space steps, for pulling an element out of its flow (`m: -2`). Written
+ * out because TypeScript can't negate a numeric literal union generically.
+ */
+export type NegativeSpaceStep = -1 | -2 | -3 | -4 | -5 | -6 | -8 | -10 | -12 | -16 | -20 | -24;
+declare const SPACE_PROPS: readonly ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd", "gap", "rowGap", "columnGap", "inset", "insetInline", "insetInlineStart", "insetInlineEnd", "insetBlock", "insetBlockStart", "insetBlockEnd", "top", "right", "bottom", "left"];
+declare const SIZE_PROPS: readonly ["width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "flexBasis", "inlineSize", "blockSize", "minInlineSize", "minBlockSize", "maxInlineSize", "maxBlockSize"];
+declare const COLOR_PROPS: readonly ["color", "background", "backgroundColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "borderInlineColor", "borderInlineStartColor", "borderInlineEndColor", "borderBlockColor", "borderBlockStartColor", "borderBlockEndColor", "outlineColor", "textDecorationColor", "caretColor", "accentColor", "columnRuleColor", "fill", "stroke"];
+declare const RADIUS_PROPS: readonly ["borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderStartStartRadius", "borderStartEndRadius", "borderEndStartRadius", "borderEndEndRadius"];
+declare const BORDER_WIDTH_PROPS: readonly ["borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderInlineWidth", "borderBlockWidth", "outlineWidth"];
+declare const UNITLESS_PROPS: readonly ["flexGrow", "flexShrink", "order", "flex", "zoom"];
+export type SpaceProp = (typeof SPACE_PROPS)[number];
+export type SizeProp = (typeof SIZE_PROPS)[number];
+export type ColorProp = (typeof COLOR_PROPS)[number];
+export type RadiusProp = (typeof RADIUS_PROPS)[number];
+export type BorderWidthProp = (typeof BORDER_WIDTH_PROPS)[number];
+export type UnitlessProp = (typeof UNITLESS_PROPS)[number];
+/** Which scale each CSS property draws from. Properties absent here are untouched. */
+export declare const PROP_SCALE: Record<string, Scale>;
+/**
+ * Short names for the properties that get typed most, plus the two multi-side
+ * ones CSS has no single longhand for. Everything else is written as the real
+ * CSS property, so there's no table to memorise.
+ */
+export declare const ALIASES: Record<string, string>;
+/**
+ * Colours resolve semantic name → palette scale ref → raw CSS, so `'primary'`
+ * and `'accent-9'` and `'#fff'` are all valid and unambiguous.
+ */
+export declare function resolveColor(value: string): string;
+/**
+ * Resolve one declaration value against its property's scale. Unknown keys pass
+ * through verbatim — token-first, never token-only.
+ */
+export declare function resolveValue(property: string, value: string | number): string;
+/** `paddingInline` → `padding-inline`; custom properties pass through. */
+export declare function cssProperty(name: string): string;
+export {};
+//# sourceMappingURL=scales.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../src/lib/scales.ts"],"names":[],"mappings":"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"}

package/dist/lib/scales.js

@@ -0,0 +1,222 @@
+import { vars } from '@fluixi-ui/tokens/vars';
+const SPACE_PROPS = [
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingInline',
+    'paddingInlineStart',
+    'paddingInlineEnd',
+    'paddingBlock',
+    'paddingBlockStart',
+    'paddingBlockEnd',
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginInline',
+    'marginInlineStart',
+    'marginInlineEnd',
+    'marginBlock',
+    'marginBlockStart',
+    'marginBlockEnd',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'inset',
+    'insetInline',
+    'insetInlineStart',
+    'insetInlineEnd',
+    'insetBlock',
+    'insetBlockStart',
+    'insetBlockEnd',
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+const SIZE_PROPS = [
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'flexBasis',
+    'inlineSize',
+    'blockSize',
+    'minInlineSize',
+    'minBlockSize',
+    'maxInlineSize',
+    'maxBlockSize',
+];
+const COLOR_PROPS = [
+    'color',
+    'background',
+    'backgroundColor',
+    'borderColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderInlineColor',
+    'borderInlineStartColor',
+    'borderInlineEndColor',
+    'borderBlockColor',
+    'borderBlockStartColor',
+    'borderBlockEndColor',
+    'outlineColor',
+    'textDecorationColor',
+    'caretColor',
+    'accentColor',
+    'columnRuleColor',
+    'fill',
+    'stroke',
+];
+const RADIUS_PROPS = [
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderStartStartRadius',
+    'borderStartEndRadius',
+    'borderEndStartRadius',
+    'borderEndEndRadius',
+];
+const BORDER_WIDTH_PROPS = [
+    'borderWidth',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderInlineWidth',
+    'borderBlockWidth',
+    'outlineWidth',
+];
+const UNITLESS_PROPS = ['flexGrow', 'flexShrink', 'order', 'flex', 'zoom'];
+function assign(target, props, scale) {
+    for (const prop of props)
+        target[prop] = scale;
+}
+/** Which scale each CSS property draws from. Properties absent here are untouched. */
+export const PROP_SCALE = (() => {
+    const map = {};
+    assign(map, SPACE_PROPS, 'space');
+    assign(map, SIZE_PROPS, 'size');
+    assign(map, COLOR_PROPS, 'color');
+    assign(map, RADIUS_PROPS, 'radius');
+    assign(map, BORDER_WIDTH_PROPS, 'borderWidth');
+    assign(map, UNITLESS_PROPS, 'unitless');
+    map['boxShadow'] = 'shadow';
+    map['fontSize'] = 'fontSize';
+    map['fontWeight'] = 'fontWeight';
+    map['lineHeight'] = 'lineHeight';
+    map['letterSpacing'] = 'letterSpacing';
+    map['fontFamily'] = 'fontFamily';
+    map['transitionDuration'] = 'duration';
+    map['animationDuration'] = 'duration';
+    map['transitionTimingFunction'] = 'easing';
+    map['animationTimingFunction'] = 'easing';
+    map['opacity'] = 'opacity';
+    map['zIndex'] = 'zIndex';
+    return map;
+})();
+/**
+ * Short names for the properties that get typed most, plus the two multi-side
+ * ones CSS has no single longhand for. Everything else is written as the real
+ * CSS property, so there's no table to memorise.
+ */
+export const ALIASES = {
+    p: 'padding',
+    px: 'paddingInline',
+    py: 'paddingBlock',
+    m: 'margin',
+    mx: 'marginInline',
+    my: 'marginBlock',
+    bg: 'backgroundColor',
+    radius: 'borderRadius',
+    shadow: 'boxShadow',
+};
+const TOKEN_MAPS = {
+    space: vars.space,
+    color: vars.color,
+    radius: vars.radius,
+    shadow: vars.shadow,
+    fontSize: vars.fontSize,
+    fontWeight: vars.fontWeight,
+    lineHeight: vars.lineHeight,
+    letterSpacing: vars.letterSpacing,
+    fontFamily: vars.fontFamily,
+    borderWidth: vars.borderWidth,
+    duration: vars.duration,
+    easing: vars.easing,
+    opacity: vars.opacity,
+    zIndex: vars.zIndex,
+};
+/** Palette scale steps (`accent-9`, `gray-11`) and the status solids/tints. */
+const SCALE_REF = /^(?:accent|gray)-(?:[1-9]|1[0-2])$|^(?:danger|success|warning)-(?:solid|fg|subtle|text)$/;
+function camel(name) {
+    return name.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
+/**
+ * Colours resolve semantic name → palette scale ref → raw CSS, so `'primary'`
+ * and `'accent-9'` and `'#fff'` are all valid and unambiguous.
+ */
+export function resolveColor(value) {
+    const semantic = vars.color[value];
+    if (semantic)
+        return semantic;
+    if (SCALE_REF.test(value))
+        return `var(--flx-ui-${value})`;
+    // Tolerate the kebab spelling of a semantic name (`bg-subtle`), since that's
+    // how the same token reads in CSS.
+    const kebab = vars.color[camel(value)];
+    return kebab ?? value;
+}
+function spaceStep(n) {
+    const step = vars.space[String(Math.abs(n))];
+    if (!step)
+        return undefined;
+    return n < 0 ? `calc(${step} * -1)` : step;
+}
+/**
+ * Resolve one declaration value against its property's scale. Unknown keys pass
+ * through verbatim — token-first, never token-only.
+ */
+export function resolveValue(property, value) {
+    const scale = PROP_SCALE[property];
+    if (typeof value === 'number') {
+        if (!scale)
+            return String(value);
+        switch (scale) {
+            case 'space': {
+                // An off-scale step has no token to reference, so degrade to pixels
+                // rather than emitting a `var()` that resolves to nothing.
+                return spaceStep(value) ?? `${value}px`;
+            }
+            case 'size':
+            case 'radius':
+            case 'borderWidth':
+            case 'fontSize':
+            case 'letterSpacing':
+                return value === 0 ? '0' : `${value}px`;
+            case 'duration':
+                return `${value}ms`;
+            default:
+                return String(value);
+        }
+    }
+    if (scale === 'color')
+        return resolveColor(value);
+    const map = scale ? TOKEN_MAPS[scale] : undefined;
+    return map?.[value] ?? value;
+}
+/** `paddingInline` → `padding-inline`; custom properties pass through. */
+export function cssProperty(name) {
+    if (name.startsWith('--'))
+        return name;
+    return name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+}

package/dist/lib/selectors.d.ts

@@ -0,0 +1,128 @@
+/**
+ * A selector key expands to either a selector pattern (where `&` stands for the
+ * element) or a whole at-rule prelude that wraps the declarations. The set is
+ * closed on purpose: you can't reach an app's own class names from `fx`, so a
+ * component can never couple itself to consumer CSS.
+ */
+export type SelectorEntry = {
+    selector: string;
+} | {
+    atRule: string;
+};
+/**
+ * State keys expand to the library's real conventions, not just the CSS pseudo —
+ * headless parts signal state through `data-*`/ARIA, so a `:disabled`-only
+ * mapping would miss most of them.
+ *
+ * The theme keys match the element itself as well as its descendants, so a
+ * scoped `data-theme` region works the same as a page-level one.
+ */
+export declare const SELECTORS: {
+    _hover: {
+        selector: string;
+    };
+    _active: {
+        selector: string;
+    };
+    _focus: {
+        selector: string;
+    };
+    _focusVisible: {
+        selector: string;
+    };
+    _focusWithin: {
+        selector: string;
+    };
+    _disabled: {
+        selector: string;
+    };
+    _checked: {
+        selector: string;
+    };
+    _selected: {
+        selector: string;
+    };
+    _expanded: {
+        selector: string;
+    };
+    _open: {
+        selector: string;
+    };
+    _invalid: {
+        selector: string;
+    };
+    _before: {
+        selector: string;
+    };
+    _after: {
+        selector: string;
+    };
+    _placeholder: {
+        selector: string;
+    };
+    _selection: {
+        selector: string;
+    };
+    _first: {
+        selector: string;
+    };
+    _last: {
+        selector: string;
+    };
+    _odd: {
+        selector: string;
+    };
+    _even: {
+        selector: string;
+    };
+    _notFirst: {
+        selector: string;
+    };
+    _notLast: {
+        selector: string;
+    };
+    _children: {
+        selector: string;
+    };
+    _dark: {
+        selector: string;
+    };
+    _light: {
+        selector: string;
+    };
+    _hc: {
+        selector: string;
+    };
+    _rtl: {
+        selector: string;
+    };
+    _motionReduce: {
+        atRule: string;
+    };
+    _motionSafe: {
+        atRule: string;
+    };
+};
+export type SelectorKey = keyof typeof SELECTORS;
+type Assert<T extends true> = T;
+/**
+ * Build-time guard, not API. If `SelectorKey` ever widens to `string`, `FxObject`'s
+ * selector block collapses into an index signature that swallows every property —
+ * and nothing else in the package would fail to compile.
+ */
+export type SelectorKeysAreClosed = Assert<string extends SelectorKey ? false : true>;
+export declare function isSelectorKey(key: string): key is SelectorKey;
+export declare function selectorEntry(key: SelectorKey): SelectorEntry;
+/** Split a selector list on commas that aren't inside brackets or parens. */
+export declare function splitSelectorList(pattern: string): string[];
+/**
+ * Compose a nested pattern onto the selectors resolved so far — each `&` in the
+ * inner pattern becomes an outer selector, crossing multi-part lists.
+ *
+ * Nesting order shows up in the emitted text (`&:where(dark):hover` vs
+ * `&:hover:where(dark)`). The two match identically, but they hash apart, so the
+ * same styling written both ways costs two rules. Not worth canonicalising.
+ */
+export declare function composeSelectors(outer: string[], pattern: string): string[];
+export {};
+//# sourceMappingURL=selectors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/lib/selectors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCmB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,SAAS,CAAC;AAEjD,KAAK,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;AAEhC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;AAEtF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,WAAW,CAE7D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,GAAG,aAAa,CAE7D;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAe3D;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAO3E"}

package/dist/lib/selectors.js

@@ -0,0 +1,82 @@
+/**
+ * State keys expand to the library's real conventions, not just the CSS pseudo —
+ * headless parts signal state through `data-*`/ARIA, so a `:disabled`-only
+ * mapping would miss most of them.
+ *
+ * The theme keys match the element itself as well as its descendants, so a
+ * scoped `data-theme` region works the same as a page-level one.
+ */
+export const SELECTORS = {
+    _hover: { selector: '&:hover' },
+    _active: { selector: '&:active' },
+    _focus: { selector: '&:focus' },
+    _focusVisible: { selector: '&:focus-visible' },
+    _focusWithin: { selector: '&:focus-within' },
+    _disabled: { selector: '&:disabled, &[disabled], &[data-disabled]' },
+    _checked: { selector: "&:checked, &[data-state='checked'], &[aria-checked='true']" },
+    _selected: { selector: "&[data-selected], &[aria-selected='true']" },
+    _expanded: { selector: "&[data-expanded], &[aria-expanded='true']" },
+    _open: { selector: "&[data-state='open'], &[data-open]" },
+    _invalid: { selector: "&:invalid, &[data-invalid], &[aria-invalid='true']" },
+    _before: { selector: '&::before' },
+    _after: { selector: '&::after' },
+    _placeholder: { selector: '&::placeholder' },
+    _selection: { selector: '&::selection' },
+    _first: { selector: '&:first-child' },
+    _last: { selector: '&:last-child' },
+    _odd: { selector: '&:nth-child(odd)' },
+    _even: { selector: '&:nth-child(even)' },
+    _notFirst: { selector: '&:not(:first-child)' },
+    _notLast: { selector: '&:not(:last-child)' },
+    _children: { selector: '& > *' },
+    _dark: { selector: "&:where([data-theme='dark'], [data-theme='dark'] *)" },
+    _light: { selector: "&:where([data-theme='light'], [data-theme='light'] *)" },
+    _hc: { selector: "&:where([data-theme='high-contrast'], [data-theme='high-contrast'] *)" },
+    _rtl: { selector: "&:where([dir='rtl'], [dir='rtl'] *)" },
+    _motionReduce: { atRule: '@media (prefers-reduced-motion: reduce)' },
+    _motionSafe: { atRule: '@media (prefers-reduced-motion: no-preference)' },
+    // `satisfies` rather than an annotation — an annotation would widen the keys to
+    // `string`, and `SelectorKey` needs the literals to stay a closed union.
+};
+export function isSelectorKey(key) {
+    return key.charCodeAt(0) === 95 /* _ */ && key in SELECTORS;
+}
+export function selectorEntry(key) {
+    return SELECTORS[key];
+}
+/** Split a selector list on commas that aren't inside brackets or parens. */
+export function splitSelectorList(pattern) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < pattern.length; i++) {
+        const char = pattern[i];
+        if (char === '(' || char === '[')
+            depth++;
+        else if (char === ')' || char === ']')
+            depth--;
+        else if (char === ',' && depth === 0) {
+            parts.push(pattern.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    parts.push(pattern.slice(start).trim());
+    return parts;
+}
+/**
+ * Compose a nested pattern onto the selectors resolved so far — each `&` in the
+ * inner pattern becomes an outer selector, crossing multi-part lists.
+ *
+ * Nesting order shows up in the emitted text (`&:where(dark):hover` vs
+ * `&:hover:where(dark)`). The two match identically, but they hash apart, so the
+ * same styling written both ways costs two rules. Not worth canonicalising.
+ */
+export function composeSelectors(outer, pattern) {
+    const inner = splitSelectorList(pattern);
+    const composed = [];
+    for (const parent of outer) {
+        for (const part of inner)
+            composed.push(part.split('&').join(parent));
+    }
+    return composed;
+}

package/dist/lib/sheet.d.ts

@@ -0,0 +1,17 @@
+import type { FxResult } from './types.js';
+/**
+ * Insert a resolved object's rules, once per distinct rule body. Objects that
+ * fitted entirely inline never reach the stylesheet at all.
+ */
+export declare function insertFx(result: FxResult): void;
+/**
+ * Everything inserted so far, for a server render to emit into `<head>`. Render
+ * the result as `<style data-fx-sheet data-fx-tokens="…">`; the client adopts it.
+ */
+export declare function collectFx(): {
+    css: string;
+    tokens: string;
+};
+/** Drop all inserted rules. For tests and for reusing a server runtime per request. */
+export declare function resetFx(): void;
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/lib/sheet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmC3C;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAgB/C;AAMD;;;GAGG;AACH,wBAAgB,SAAS,IAAI;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAK3D;AAED,uFAAuF;AACvF,wBAAgB,OAAO,IAAI,IAAI,CAK9B"}

package/dist/lib/sheet.js

@@ -0,0 +1,74 @@
+import { LAYER_ORDER } from '@fluixi-ui/tokens/css';
+const SHEET_ATTRIBUTE = 'data-fx-sheet';
+const TOKENS_ATTRIBUTE = 'data-fx-tokens';
+const inserted = new Set();
+const collected = [];
+let sheet = null;
+/**
+ * Find or create the sheet. A server-rendered sheet is adopted rather than
+ * duplicated, and the tokens it already carries are seeded so hydration doesn't
+ * re-insert rules that are on the page.
+ */
+function styleElement() {
+    if (sheet && sheet.isConnected)
+        return sheet;
+    const existing = document.head.querySelector(`style[${SHEET_ATTRIBUTE}]`);
+    if (existing) {
+        for (const token of (existing.getAttribute(TOKENS_ATTRIBUTE) ?? '').split(',')) {
+            if (token)
+                inserted.add(token);
+        }
+        sheet = existing;
+        return sheet;
+    }
+    sheet = document.createElement('style');
+    sheet.setAttribute(SHEET_ATTRIBUTE, '');
+    // Redeclaring the order is a no-op, but it makes the layer position of this
+    // sheet deterministic no matter which stylesheet the document loaded first.
+    sheet.appendChild(document.createTextNode(LAYER_ORDER));
+    document.head.appendChild(sheet);
+    return sheet;
+}
+/**
+ * Insert a resolved object's rules, once per distinct rule body. Objects that
+ * fitted entirely inline never reach the stylesheet at all.
+ */
+export function insertFx(result) {
+    if (!result.token || !result.rules)
+        return;
+    if (typeof document === 'undefined') {
+        if (inserted.has(result.token))
+            return;
+        inserted.add(result.token);
+        collected.push(wrap(result.rules));
+        return;
+    }
+    const element = styleElement();
+    if (inserted.has(result.token))
+        return;
+    inserted.add(result.token);
+    collected.push(wrap(result.rules));
+    element.appendChild(document.createTextNode(wrap(result.rules)));
+    element.setAttribute(TOKENS_ATTRIBUTE, [...inserted].join(','));
+}
+function wrap(rules) {
+    return `@layer flx.fx{${rules}}`;
+}
+/**
+ * Everything inserted so far, for a server render to emit into `<head>`. Render
+ * the result as `<style data-fx-sheet data-fx-tokens="…">`; the client adopts it.
+ */
+export function collectFx() {
+    return {
+        css: collected.length ? `${LAYER_ORDER}${collected.join('')}` : '',
+        tokens: [...inserted].join(','),
+    };
+}
+/** Drop all inserted rules. For tests and for reusing a server runtime per request. */
+export function resetFx() {
+    inserted.clear();
+    collected.length = 0;
+    if (sheet && sheet.isConnected)
+        sheet.remove();
+    sheet = null;
+}