@praxisjs/css 0.1.0

package/dist/builder/css-builder.d.ts

@@ -0,0 +1,98 @@
+import type { Properties } from "csstype";
+/**
+ * Typed CSS property object — backed by `csstype`.
+ * All ~300 CSS properties with full value autocomplete.
+ * Used as the argument to `this.css({...})` and all nesting methods.
+ */
+export type CSSProperties = Properties<string | number> & Record<string, string | number | undefined>;
+/**
+ * Fluent CSS builder returned by `this.css({...})`.
+ * TypeScript sees it as `string` — works in JSX `class=`, `cx()`, computed keys.
+ * Serialises to a CSS rule block via `toString()`.
+ *
+ * @example
+ * class BtnStyles extends Stylesheet {
+ *   $base = this.css({ display: 'inline-flex', padding: '8px 16px' })
+ *     .hover({ opacity: 0.9 })
+ *     .disabled({ opacity: 0.4, pointerEvents: 'none' })
+ *     .before({ content: '""', display: 'block' })
+ *     .media('max-width: 640px', { width: '100%' })
+ * }
+ */
+export type CSSBuilder = string & {
+    /** `&:hover { ... }` */
+    hover(props: CSSProperties): CSSBuilder;
+    /** `&:focus { ... }` */
+    focus(props: CSSProperties): CSSBuilder;
+    /** `&:focus-within { ... }` */
+    focusWithin(props: CSSProperties): CSSBuilder;
+    /** `&:focus-visible { ... }` */
+    focusVisible(props: CSSProperties): CSSBuilder;
+    /** `&:active { ... }` */
+    active(props: CSSProperties): CSSBuilder;
+    /** `&:visited { ... }` */
+    visited(props: CSSProperties): CSSBuilder;
+    /** `&:target { ... }` */
+    target(props: CSSProperties): CSSBuilder;
+    /** `&:disabled, &[disabled], &[aria-disabled="true"] { ... }` */
+    disabled(props: CSSProperties): CSSBuilder;
+    /** `&:enabled { ... }` */
+    enabled(props: CSSProperties): CSSBuilder;
+    /** `&:checked { ... }` */
+    checked(props: CSSProperties): CSSBuilder;
+    /** `&:indeterminate { ... }` */
+    indeterminate(props: CSSProperties): CSSBuilder;
+    /** `&:required { ... }` */
+    required(props: CSSProperties): CSSBuilder;
+    /** `&:optional { ... }` */
+    optional(props: CSSProperties): CSSBuilder;
+    /** `&:valid { ... }` */
+    valid(props: CSSProperties): CSSBuilder;
+    /** `&:invalid { ... }` */
+    invalid(props: CSSProperties): CSSBuilder;
+    /** `&:read-only { ... }` */
+    readOnly(props: CSSProperties): CSSBuilder;
+    /** `&:first-child { ... }` */
+    first(props: CSSProperties): CSSBuilder;
+    /** `&:last-child { ... }` */
+    last(props: CSSProperties): CSSBuilder;
+    /** `&:nth-child(n) { ... }` */
+    nthChild(n: string | number, props: CSSProperties): CSSBuilder;
+    /** `&:empty { ... }` */
+    empty(props: CSSProperties): CSSBuilder;
+    /** `&:has(selector) { ... }` */
+    has(selector: string, props: CSSProperties): CSSBuilder;
+    /** `&:is(...) { ... }` */
+    is(selector: string, props: CSSProperties): CSSBuilder;
+    /** `&:where(...) { ... }` — zero specificity */
+    where(selector: string, props: CSSProperties): CSSBuilder;
+    /** `&:not(selector) { ... }` */
+    not(selector: string, props: CSSProperties): CSSBuilder;
+    /** `&::before { ... }` */
+    before(props: CSSProperties): CSSBuilder;
+    /** `&::after { ... }` */
+    after(props: CSSProperties): CSSBuilder;
+    /** `&::placeholder { ... }` */
+    placeholder(props: CSSProperties): CSSBuilder;
+    /** `&::selection { ... }` */
+    selection(props: CSSProperties): CSSBuilder;
+    /** `&::first-line { ... }` */
+    firstLine(props: CSSProperties): CSSBuilder;
+    /** `&::first-letter { ... }` */
+    firstLetter(props: CSSProperties): CSSBuilder;
+    /** `&::marker { ... }` */
+    marker(props: CSSProperties): CSSBuilder;
+    /** `&::backdrop { ... }` */
+    backdrop(props: CSSProperties): CSSBuilder;
+    /** `@media (query) { ... }` */
+    media(query: string, props: CSSProperties): CSSBuilder;
+    /** `@container (query) { ... }` */
+    container(query: string, props: CSSProperties): CSSBuilder;
+    /** `@supports (condition) { ... }` */
+    supports(condition: string, props: CSSProperties): CSSBuilder;
+    /** Any arbitrary nested selector or at-rule. */
+    on(selector: string, props: CSSProperties): CSSBuilder;
+};
+export declare function isCSSBuilder(value: unknown): boolean;
+export declare function createCSSBuilder(initialProps: CSSProperties): CSSBuilder;
+//# sourceMappingURL=css-builder.d.ts.map

package/dist/builder/css-builder.d.ts.map

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

package/dist/builder/css-builder.js

@@ -0,0 +1,79 @@
+// ─── Runtime ──────────────────────────────────────────────────────────────────
+const CSS_BUILDER = Symbol("css-builder");
+export function isCSSBuilder(value) {
+    return typeof value === "object" && value !== null &&
+        value[CSS_BUILDER] === true;
+}
+function toKebab(camel) {
+    return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function propsToCSS(props) {
+    return Object.entries(props)
+        .filter(([, v]) => v != null)
+        .map(([k, v]) => `${toKebab(k)}: ${String(v)};`)
+        .join("\n");
+}
+export function createCSSBuilder(initialProps) {
+    const parts = [];
+    const rootCSS = propsToCSS(initialProps);
+    if (rootCSS)
+        parts.push(rootCSS);
+    const addNested = (selector, props) => {
+        const rawCSS = propsToCSS(props);
+        if (!rawCSS)
+            return builder;
+        const inner = rawCSS.split("\n").map((l) => `  ${l}`).join("\n");
+        parts.push(`${selector} {\n${inner}\n}`);
+        return builder;
+    };
+    const toCSS = () => parts.join("\n");
+    const builder = Object.assign(Object.create(null), {
+        [CSS_BUILDER]: true,
+        toString: toCSS,
+        [Symbol.toPrimitive]: toCSS,
+        // Pseudo-classes — interaction
+        hover: (p) => addNested("&:hover", p),
+        focus: (p) => addNested("&:focus", p),
+        focusWithin: (p) => addNested("&:focus-within", p),
+        focusVisible: (p) => addNested("&:focus-visible", p),
+        active: (p) => addNested("&:active", p),
+        visited: (p) => addNested("&:visited", p),
+        target: (p) => addNested("&:target", p),
+        // Pseudo-classes — form state
+        disabled: (p) => addNested('&:disabled, &[disabled], &[aria-disabled="true"]', p),
+        enabled: (p) => addNested("&:enabled", p),
+        checked: (p) => addNested("&:checked", p),
+        indeterminate: (p) => addNested("&:indeterminate", p),
+        required: (p) => addNested("&:required", p),
+        optional: (p) => addNested("&:optional", p),
+        valid: (p) => addNested("&:valid", p),
+        invalid: (p) => addNested("&:invalid", p),
+        readOnly: (p) => addNested("&:read-only", p),
+        // Pseudo-classes — structural
+        first: (p) => addNested("&:first-child", p),
+        last: (p) => addNested("&:last-child", p),
+        nthChild: (n, p) => addNested(`&:nth-child(${String(n)})`, p),
+        empty: (p) => addNested("&:empty", p),
+        // Pseudo-classes — relational (Selectors Level 4)
+        has: (sel, p) => addNested(`&:has(${sel})`, p),
+        is: (sel, p) => addNested(`&:is(${sel})`, p),
+        where: (sel, p) => addNested(`&:where(${sel})`, p),
+        not: (sel, p) => addNested(`&:not(${sel})`, p),
+        // Pseudo-elements
+        before: (p) => addNested("&::before", p),
+        after: (p) => addNested("&::after", p),
+        placeholder: (p) => addNested("&::placeholder", p),
+        selection: (p) => addNested("&::selection", p),
+        firstLine: (p) => addNested("&::first-line", p),
+        firstLetter: (p) => addNested("&::first-letter", p),
+        marker: (p) => addNested("&::marker", p),
+        backdrop: (p) => addNested("&::backdrop", p),
+        // At-rules
+        media: (q, p) => addNested(`@media (${q})`, p),
+        container: (q, p) => addNested(`@container (${q})`, p),
+        supports: (cond, p) => addNested(`@supports (${cond})`, p),
+        on: (sel, p) => addNested(sel, p),
+    });
+    return builder;
+}
+//# sourceMappingURL=css-builder.js.map

package/dist/builder/css-builder.js.map

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

package/dist/builder/keyframes.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from "./css-builder.js";
+type KeyframeStops = Record<string, CSSProperties>;
+/**
+ * Defines a scoped `@keyframes` animation and injects it into `document.head`.
+ * Returns the scoped animation name — use it in the `animation` or
+ * `animationName` property of a stylesheet field.
+ *
+ * The name is content-hashed so two identical animations share one injection.
+ * Safe to call at module level (outside components).
+ *
+ * @example
+ * const pulse = keyframes('pulse', {
+ *   from: { opacity: 1 },
+ *   to:   { opacity: 0.4 },
+ * })
+ *
+ * class LoaderStyles extends Stylesheet {
+ *   $spinner = this.css({ animation: `${pulse} 1.2s ease-in-out infinite` })
+ * }
+ */
+export declare function keyframes(name: string, stops: KeyframeStops): string;
+export {};
+//# sourceMappingURL=keyframes.d.ts.map

package/dist/builder/keyframes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtD,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAenD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,CAsBpE"}

package/dist/builder/keyframes.js

@@ -0,0 +1,54 @@
+import { getCollector } from "../internal/collector.js";
+import { hashCSS } from "../internal/hash.js";
+const STATIC_MODE = typeof __PRAXIS_CSS_STATIC__ !== "undefined" && __PRAXIS_CSS_STATIC__;
+const injected = new Set();
+function toKebab(camel) {
+    return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function stopToCSS(props) {
+    return Object.entries(props)
+        .filter(([, v]) => v != null)
+        .map(([k, v]) => `    ${toKebab(k)}: ${String(v)};`)
+        .join("\n");
+}
+/**
+ * Defines a scoped `@keyframes` animation and injects it into `document.head`.
+ * Returns the scoped animation name — use it in the `animation` or
+ * `animationName` property of a stylesheet field.
+ *
+ * The name is content-hashed so two identical animations share one injection.
+ * Safe to call at module level (outside components).
+ *
+ * @example
+ * const pulse = keyframes('pulse', {
+ *   from: { opacity: 1 },
+ *   to:   { opacity: 0.4 },
+ * })
+ *
+ * class LoaderStyles extends Stylesheet {
+ *   $spinner = this.css({ animation: `${pulse} 1.2s ease-in-out infinite` })
+ * }
+ */
+export function keyframes(name, stops) {
+    const stopsCSS = Object.entries(stops)
+        .map(([stop, props]) => `  ${stop} {\n${stopToCSS(props)}\n  }`)
+        .join("\n");
+    const scopedName = `prx-${name}-${hashCSS(stopsCSS)}`;
+    const kfCSS = `@keyframes ${scopedName} {\n${stopsCSS}\n}`;
+    if (STATIC_MODE)
+        return scopedName;
+    const col = getCollector();
+    if (col) {
+        col.addKeyframes(scopedName, kfCSS);
+        return scopedName;
+    }
+    if (!injected.has(scopedName) && typeof document !== "undefined") {
+        const el = document.createElement("style");
+        el.setAttribute("data-praxis-keyframes", scopedName);
+        el.textContent = kfCSS;
+        document.head.appendChild(el);
+        injected.add(scopedName);
+    }
+    return scopedName;
+}
+//# sourceMappingURL=keyframes.js.map

package/dist/builder/keyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes.js","sourceRoot":"","sources":["../../src/builder/keyframes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAM9C,MAAM,WAAW,GACf,OAAO,qBAAqB,KAAK,WAAW,IAAI,qBAAqB,CAAC;AAIxE,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAC;AAEnC,SAAS,OAAO,CAAC,KAAa;IAC5B,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC;AAED,SAAS,SAAS,CAAC,KAAoB;IACrC,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACzB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC;SAC5B,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;SACnD,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,SAAS,CAAC,IAAY,EAAE,KAAoB;IAC1D,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACnC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC;SAC/D,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,OAAO,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,cAAc,UAAU,OAAO,QAAQ,KAAK,CAAC;IAE3D,IAAI,WAAW;QAAE,OAAO,UAAU,CAAC;IAEnC,MAAM,GAAG,GAAG,YAAY,EAAE,CAAC;IAC3B,IAAI,GAAG,EAAE,CAAC;QAAC,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAAC,OAAO,UAAU,CAAC;IAAC,CAAC;IAEpE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACjE,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC;QACrD,EAAE,CAAC,WAAW,GAAG,KAAK,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/dist/cx.d.ts

@@ -0,0 +1,3 @@
+export type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, unknown>;
+export declare function cx(...args: ClassValue[]): string;
+//# sourceMappingURL=cx.d.ts.map

package/dist/cx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAgBhD"}

package/dist/cx.js

@@ -0,0 +1,23 @@
+export function cx(...args) {
+    const classes = [];
+    for (const arg of args) {
+        if (!arg && arg !== 0)
+            continue;
+        if (typeof arg === "string" || typeof arg === "number") {
+            classes.push(String(arg));
+        }
+        else if (Array.isArray(arg)) {
+            const inner = cx(...arg);
+            if (inner)
+                classes.push(inner);
+        }
+        else if (typeof arg === "object") {
+            for (const [key, val] of Object.entries(arg)) {
+                if (val)
+                    classes.push(key);
+            }
+        }
+    }
+    return classes.join(" ");
+}
+//# sourceMappingURL=cx.js.map

package/dist/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../src/cx.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,EAAE,CAAC,GAAG,IAAkB;IACtC,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;YAAE,SAAS;QAChC,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QAC5B,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,GAAI,GAAoB,CAAC,CAAC;YAC3C,IAAI,KAAK;gBAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;aAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnC,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7C,IAAI,GAAG;oBAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC"}

package/dist/decorators/param.d.ts

@@ -0,0 +1,23 @@
+import type { ReactiveStylesheet } from "../base/stylesheet.js";
+export declare function getParamNames(ctor: object): Set<string>;
+/**
+ * Marks a field in a {@link ReactiveStylesheet} subclass as a reactive CSS custom property.
+ * The field name becomes `--fieldName` on the component's container element.
+ * Setting the field updates the CSS var reactively — zero re-renders.
+ *
+ * Only valid inside a `ReactiveStylesheet` subclass. TypeScript enforces this at
+ * compile time via the `createFieldDecorator<ReactiveStylesheet>` constraint.
+ *
+ * @example
+ * class CardStyles extends ReactiveStylesheet {
+ *   @Param() color  = '#3b82f6'   // → --color on the element
+ *   @Param() radius = '8px'       // → --radius on the element
+ *
+ *   $root = `border-radius: var(--radius); background: var(--color);`
+ * }
+ *
+ * // In the component:
+ * this.$card.color = '#ef4444'  // updates --color reactively
+ */
+export declare function Param(): <This extends ReactiveStylesheet, Value = unknown>(_value: undefined, context: ClassFieldDecoratorContext<This, Value>) => void;
+//# sourceMappingURL=param.d.ts.map

package/dist/decorators/param.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"param.d.ts","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAEvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,oIAUpB"}

package/dist/decorators/param.js

@@ -0,0 +1,39 @@
+import { createFieldDecorator } from "@praxisjs/decorators";
+const PARAM_META = new WeakMap();
+export function getParamNames(ctor) {
+    return PARAM_META.get(ctor) ?? new Set();
+}
+/**
+ * Marks a field in a {@link ReactiveStylesheet} subclass as a reactive CSS custom property.
+ * The field name becomes `--fieldName` on the component's container element.
+ * Setting the field updates the CSS var reactively — zero re-renders.
+ *
+ * Only valid inside a `ReactiveStylesheet` subclass. TypeScript enforces this at
+ * compile time via the `createFieldDecorator<ReactiveStylesheet>` constraint.
+ *
+ * @example
+ * class CardStyles extends ReactiveStylesheet {
+ *   @Param() color  = '#3b82f6'   // → --color on the element
+ *   @Param() radius = '8px'       // → --radius on the element
+ *
+ *   $root = `border-radius: var(--radius); background: var(--color);`
+ * }
+ *
+ * // In the component:
+ * this.$card.color = '#ef4444'  // updates --color reactively
+ */
+export function Param() {
+    return createFieldDecorator({
+        bind(instance, name) {
+            const ctor = instance.constructor;
+            let meta = PARAM_META.get(ctor);
+            if (!meta) {
+                meta = new Set();
+                PARAM_META.set(ctor, meta);
+            }
+            meta.add(name);
+            return {};
+        },
+    });
+}
+//# sourceMappingURL=param.js.map

package/dist/decorators/param.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"param.js","sourceRoot":"","sources":["../../src/decorators/param.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,UAAU,GAAG,IAAI,OAAO,EAAuB,CAAC;AAEtD,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,OAAO,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC;AAC3C,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,oBAAoB,CAAqB;QAC9C,IAAI,CAAC,QAAQ,EAAE,IAAI;YACjB,MAAM,IAAI,GAAI,QAAmB,CAAC,WAAqB,CAAC;YACxD,IAAI,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAAC,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;gBAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAAC,CAAC;YAC5D,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACf,OAAO,EAAE,CAAC;QACZ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/decorators/style.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Reactive field decorator that binds a signal value to a CSS custom property
+ * on the component's container element — with zero re-renders.
+ *
+ * Only CSS custom properties (variables) are supported: the property name must
+ * start with `--`.
+ *
+ * @example
+ * class ThemeCard extends StatefulComponent {
+ *   @Style('--accent') accent = '#3b82f6'
+ *   @Style('--radius') radius = '8px'
+ * }
+ */
+export declare function Style(property: `--${string}`): <This extends object, Value = unknown>(_value: undefined, context: ClassFieldDecoratorContext<This, Value>) => void;
+//# sourceMappingURL=style.d.ts.map

package/dist/decorators/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,KAAK,MAAM,EAAE,uHAsC5C"}

package/dist/decorators/style.js

@@ -0,0 +1,53 @@
+import { effect, signal } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "@praxisjs/decorators";
+/**
+ * Reactive field decorator that binds a signal value to a CSS custom property
+ * on the component's container element — with zero re-renders.
+ *
+ * Only CSS custom properties (variables) are supported: the property name must
+ * start with `--`.
+ *
+ * @example
+ * class ThemeCard extends StatefulComponent {
+ *   @Style('--accent') accent = '#3b82f6'
+ *   @Style('--radius') radius = '8px'
+ * }
+ */
+export function Style(property) {
+    return createFieldDecorator({
+        bind(instance, _name, initialValue) {
+            const sig = signal(initialValue);
+            let stopEffect = null;
+            return {
+                descriptor: {
+                    get() {
+                        return sig();
+                    },
+                    set(v) {
+                        sig.set(v);
+                    },
+                },
+                onMount() {
+                    // _anchor is the "[/ComponentName]" comment node inserted by the runtime.
+                    // Its parentElement is the container where the component lives.
+                    const el = instance._anchor
+                        ?.parentElement;
+                    if (!el)
+                        return;
+                    stopEffect = effect(() => {
+                        el.style.setProperty(property, String(sig()));
+                    });
+                },
+                onUnmount() {
+                    stopEffect?.();
+                    stopEffect = null;
+                    const el = instance._anchor
+                        ?.parentElement;
+                    if (el)
+                        el.style.removeProperty(property);
+                },
+            };
+        },
+    });
+}
+//# sourceMappingURL=style.js.map

package/dist/decorators/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/decorators/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAsB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,KAAK,CAAC,QAAuB;IAC3C,OAAO,oBAAoB,CAAS;QAClC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY;YAChC,MAAM,GAAG,GAAG,MAAM,CAAC,YAA+B,CAAC,CAAC;YACpD,IAAI,UAAU,GAAwB,IAAI,CAAC;YAE3C,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG;wBACD,OAAO,GAAG,EAAE,CAAC;oBACf,CAAC;oBACD,GAAG,CAAC,CAAkB;wBACpB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBACb,CAAC;iBACF;gBAED,OAAO;oBACL,0EAA0E;oBAC1E,gEAAgE;oBAChE,MAAM,EAAE,GAAI,QAAqC,CAAC,OAAO;wBACvD,EAAE,aAAmC,CAAC;oBACxC,IAAI,CAAC,EAAE;wBAAE,OAAO;oBAEhB,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;wBACvB,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;oBAChD,CAAC,CAAC,CAAC;gBACL,CAAC;gBAED,SAAS;oBACP,UAAU,EAAE,EAAE,CAAC;oBACf,UAAU,GAAG,IAAI,CAAC;oBAClB,MAAM,EAAE,GAAI,QAAqC,CAAC,OAAO;wBACvD,EAAE,aAAmC,CAAC;oBACxC,IAAI,EAAE;wBAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;gBAC5C,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/decorators/styled.d.ts

@@ -0,0 +1,37 @@
+import type { StatefulComponent } from "@praxisjs/core";
+import type { ReactiveStylesheet, Stylesheet } from "../base/stylesheet.js";
+/**
+ * Scoped CSS field decorator. Receives a {@link Stylesheet} or
+ * {@link ReactiveStylesheet} subclass and builds a stylesheet object with:
+ *
+ * - `$xxx` fields → scoped class name strings (static, cached per class)
+ * - `@Param() xxx` fields → reactive CSS custom property setters
+ *   (requires {@link ReactiveStylesheet} and a `StatefulComponent` field)
+ *
+ * **TypeScript enforcement:**
+ * - `@Styled(ReactiveStylesheetSubclass)` can only be applied to fields of
+ *   classes that extend `StatefulComponent`.
+ * - `@Styled(StylesheetSubclass)` (no `@Param()`) can be applied to any component.
+ *
+ * @example — static CSS (any component)
+ * class IconStyles extends Stylesheet {
+ *   $root = `display: inline-flex; align-items: center;`
+ * }
+ *
+ * class Icon extends StatelessComponent {
+ *   @Styled(IconStyles) $s!: IconStyles
+ * }
+ *
+ * @example — reactive CSS vars (StatefulComponent only)
+ * class CardStyles extends ReactiveStylesheet {
+ *   @Param() color = '#3b82f6'
+ *   $root = `border: 2px solid var(--color);`
+ * }
+ *
+ * @Component()
+ * class Card extends StatefulComponent {
+ *   @Styled(CardStyles) $card!: CardStyles
+ * }
+ */
+export declare function Styled<T extends Stylesheet>(StyleClass: new () => T): [T] extends [ReactiveStylesheet] ? (value: undefined, context: ClassFieldDecoratorContext<StatefulComponent, T>) => void : (value: undefined, context: ClassFieldDecoratorContext<object, T>) => void;
+//# sourceMappingURL=styled.d.ts.map

package/dist/decorators/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/decorators/styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAoD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,UAAU,EACzC,UAAU,EAAE,UAAU,CAAC,GACtB,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAC/B,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,IAAI,GACrF,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,IAAI,CAoE7E"}

package/dist/decorators/styled.js

@@ -0,0 +1,138 @@
+import { effect, signal } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "@praxisjs/decorators";
+import { getParamNames } from "./param.js";
+import { isCSSBuilder } from "../builder/css-builder.js";
+import { hashCSS } from "../internal/hash.js";
+import { injectStyle, releaseStyle } from "../internal/registry.js";
+const styleClassCache = new Map();
+function getStyleClassData(StyleClass) {
+    const cached = styleClassCache.get(StyleClass);
+    if (cached)
+        return cached;
+    // Constructing the template fires @Param() addInitializers, populating PARAM_META.
+    const template = new StyleClass();
+    const paramNames = getParamNames(StyleClass);
+    const classMap = {};
+    const blocks = [];
+    const paramDefaults = {};
+    for (const [key, value] of Object.entries(template)) {
+        if (key.startsWith("$")) {
+            // Accept plain strings or fluent CSSBuilder values.
+            const css = typeof value === "string" ? value : isCSSBuilder(value) ? String(value) : null;
+            if (css !== null) {
+                const safeName = key.slice(1).replace(/[^\w-]/g, "-");
+                const className = `prx-${safeName}-${hashCSS(css)}`;
+                classMap[key] = className;
+                blocks.push(`.${className} { ${css.trim()} }`);
+            }
+        }
+        else if (paramNames.has(key) && (typeof value === "string" || typeof value === "number")) {
+            paramDefaults[key] = value;
+        }
+    }
+    const data = {
+        classMap: Object.freeze(classMap),
+        rawCSS: blocks.join("\n"),
+        registryKey: blocks.length ? hashCSS(blocks.join("\n")) : "",
+        paramDefaults: Object.freeze(paramDefaults),
+    };
+    styleClassCache.set(StyleClass, data);
+    return data;
+}
+// ─── @Styled field decorator ──────────────────────────────────────────────────
+/**
+ * Scoped CSS field decorator. Receives a {@link Stylesheet} or
+ * {@link ReactiveStylesheet} subclass and builds a stylesheet object with:
+ *
+ * - `$xxx` fields → scoped class name strings (static, cached per class)
+ * - `@Param() xxx` fields → reactive CSS custom property setters
+ *   (requires {@link ReactiveStylesheet} and a `StatefulComponent` field)
+ *
+ * **TypeScript enforcement:**
+ * - `@Styled(ReactiveStylesheetSubclass)` can only be applied to fields of
+ *   classes that extend `StatefulComponent`.
+ * - `@Styled(StylesheetSubclass)` (no `@Param()`) can be applied to any component.
+ *
+ * @example — static CSS (any component)
+ * class IconStyles extends Stylesheet {
+ *   $root = `display: inline-flex; align-items: center;`
+ * }
+ *
+ * class Icon extends StatelessComponent {
+ *   @Styled(IconStyles) $s!: IconStyles
+ * }
+ *
+ * @example — reactive CSS vars (StatefulComponent only)
+ * class CardStyles extends ReactiveStylesheet {
+ *   @Param() color = '#3b82f6'
+ *   $root = `border: 2px solid var(--color);`
+ * }
+ *
+ * @Component()
+ * class Card extends StatefulComponent {
+ *   @Styled(CardStyles) $card!: CardStyles
+ * }
+ */
+export function Styled(StyleClass) {
+    const data = getStyleClassData(StyleClass);
+    // Eagerly inject CSS at decoration time (module load) so it is in the DOM
+    // before any component mounts — avoids layout-measurement timing issues.
+    // The per-instance onMount/onUnmount still manage the ref count on top of
+    // this base reference, which intentionally stays for the page lifetime.
+    if (data.rawCSS)
+        injectStyle(data.registryKey, data.rawCSS);
+    return createFieldDecorator({
+        bind(instance) {
+            const paramSignals = {};
+            const hasParams = Object.keys(data.paramDefaults).length > 0;
+            const stylesheetObj = hasParams
+                ? { ...data.classMap }
+                : data.classMap;
+            for (const [paramName, defaultVal] of Object.entries(data.paramDefaults)) {
+                const sig = signal(defaultVal);
+                paramSignals[paramName] = sig;
+                Object.defineProperty(stylesheetObj, paramName, {
+                    get() { return sig(); },
+                    set(v) { sig.set(v); },
+                    enumerable: true,
+                    configurable: true,
+                });
+            }
+            let stopFns = [];
+            return {
+                descriptor: { value: stylesheetObj, writable: false },
+                onMount() {
+                    // Increment ref-count for this instance (base ref injected at decoration time).
+                    if (data.rawCSS)
+                        injectStyle(data.registryKey, data.rawCSS);
+                    if (hasParams) {
+                        const el = instance._anchor?.parentElement;
+                        if (el) {
+                            for (const [paramName, sig] of Object.entries(paramSignals)) {
+                                stopFns.push(effect(() => {
+                                    el.style.setProperty(`--${paramName}`, String(sig()));
+                                }));
+                            }
+                        }
+                    }
+                },
+                onUnmount() {
+                    if (data.rawCSS)
+                        releaseStyle(data.registryKey);
+                    for (const stop of stopFns)
+                        stop();
+                    stopFns = [];
+                    if (hasParams) {
+                        const el = instance._anchor?.parentElement;
+                        if (el) {
+                            for (const paramName of Object.keys(paramSignals)) {
+                                el.style.removeProperty(`--${paramName}`);
+                            }
+                        }
+                    }
+                },
+            };
+        },
+    });
+}
+//# sourceMappingURL=styled.js.map