mates-devtools 0.1.0-beta.1

package/dist/types/lib/css-in-js/cl.d.ts

@@ -0,0 +1,37 @@
+import type { CSSRulesInput } from "./serialize";
+export type { CSSRulesInput };
+/**
+ * A `Cl<R>` is a plain readonly object with one string property per key in `R`.
+ *
+ * - `cl.blockName` → the generated CSS class name string, ready to drop into
+ *   `class=${cl.card}` or `classes([cl.card, isActive && cl.active])`.
+ * - Empty blocks (no valid properties) map to `""`.
+ *
+ * @example
+ * ```ts
+ * const cl = css({
+ *   card: { display: "flex", padding: "1rem" },
+ *   active: { backgroundColor: "blue" },
+ * });
+ *
+ * // In template — direct class interpolation, zero overhead:
+ * html`<div class="${cl.card} ${isActive ? cl.active : ""}">…</div>`
+ *
+ * // Or with the classes() directive for conditional logic:
+ * html`<div ${classes([cl.card, [isActive, cl.active]])}>…</div>`
+ * ```
+ */
+export type Cl<R extends CSSRulesInput> = {
+    readonly [K in keyof R]: string;
+};
+/**
+ * Build a `Cl<R>` from a pre-computed `classMap` (block name → class string)
+ * that was returned by `serializeRules`.
+ *
+ * The returned object is frozen so block-name strings are immutable after
+ * creation — class names never change for a given `css()` call.
+ *
+ * @param classMap - `{ blockName: "generatedClassName" }`
+ */
+export declare function createCl<R extends CSSRulesInput>(classMap: Record<string, string>): Cl<R>;
+//# sourceMappingURL=cl.d.ts.map

package/dist/types/lib/css-in-js/cl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cl.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/cl.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,aAAa,IAAI;IAAE,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM;CAAE,CAAC;AAI9E;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,aAAa,EAC9C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC/B,EAAE,CAAC,CAAC,CAAC,CAEP"}

package/dist/types/lib/css-in-js/index.d.ts

@@ -0,0 +1,7 @@
+export type { Cl } from "./cl";
+export type { CSSBlock, CSSNestedBlock, CSSRulesInput, SerializeOptions, } from "./serialize";
+export type { CSSKeyframeStops } from "./stylesheet";
+export { configureCSS, globalCSS, keyframes, stylesheet } from "./stylesheet";
+export type { CssVars, GlobalThemeResult, ThemeMode, ThemesInput, ThemeTokenMap, } from "./theme";
+export { globalTheme, rootCSS } from "./theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/css-in-js/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC/B,YAAY,EACV,QAAQ,EACR,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9E,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/lib/css-in-js/sanitize.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Sanitize a CSS property *value* before it is written into a style rule.
+ *
+ * Transformations applied (in order):
+ * 1. Strip null bytes (`\u0000`) — can confuse CSS parsers across environments.
+ * 2. Truncate at the first `{` or `}` character — prevents rule injection.
+ *    Example: `"red}body{background:evil"` → `"red"`.
+ * 3. Strip dangerous URL protocols inside `url(...)` — removes `javascript:`,
+ *    `vbscript:`, and `data:text/html` (case-insensitive) from url() arguments.
+ *    Example: `url("javascript:evil")` → `url("evil")`.
+ *
+ * Safe values such as `calc(100% - 2px)`, `url("https://…")`,
+ * `url(data:image/png;base64,…)`, multi-stop gradients, `var(--x, fallback)`,
+ * and semicolons are passed through without modification.
+ */
+export declare function sanitizeValue(value: string): string;
+/**
+ * Validate a CSS property *name*.
+ *
+ * Returns `true` when the name contains only ASCII letters and hyphens, which
+ * covers all standard CSS properties (e.g. `color`, `background-color`,
+ * `--my-custom-prop`) as well as camelCase variants used by the serializer
+ * (e.g. `backgroundColor`, `fontSize`).
+ *
+ * Returns `false` for anything containing digits, braces, semicolons, colons,
+ * or other characters that have no place in a property name — these are skipped
+ * with a console warning in the serializer, preventing malformed rules such as
+ * `color:red: …` or `font}size: …` from being written into the stylesheet.
+ */
+export declare function sanitizePropertyName(name: string): boolean;
+//# sourceMappingURL=sanitize.d.ts.map

package/dist/types/lib/css-in-js/sanitize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/sanitize.ts"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAwBnD;AAYD;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE1D"}

package/dist/types/lib/css-in-js/serialize.d.ts

@@ -0,0 +1,98 @@
+import type * as CSS from "csstype";
+/**
+ * A nested block — used for pseudo-selectors, breakpoint shorthands, and
+ * raw `@media` queries. Only flat CSS properties are allowed inside (no
+ * further nesting).
+ *
+ * Each key preserves its specific csstype value union — e.g. `display` only
+ * accepts `"flex" | "block" | "grid" | ...` not an arbitrary string.
+ *
+ * Examples of valid keys that hold a `CSSNestedBlock`:
+ *  - `"&:hover"`, `"&::before"`, `"&:nth-child(2)"`, `"&[disabled]"`
+ *  - `"md"`, `"lg"` (breakpoint shorthands)
+ *  - `"@media (min-width: 900px)"` (raw media query)
+ */
+export type CSSNestedBlock = {
+    [K in keyof CSS.Properties]?: CSS.Properties[K];
+} & {
+    [key: string]: CSS.Properties[keyof CSS.Properties] | undefined;
+};
+/**
+ * A flat block of CSS properties.
+ *
+ * Known CSS property keys (camelCase, e.g. `display`, `backgroundColor`) get
+ * full value-level intellisense from csstype — typing `display:` will suggest
+ * `"flex"`, `"block"`, `"grid"`, etc.
+ *
+ * The index signature allows:
+ *  - Pseudo-selector keys:  `"&:hover"`, `"&::before"`, `"&[disabled]"` …
+ *  - Breakpoint shorthands: `"md"`, `"lg"` …
+ *  - Raw media queries:     `"@media (min-width: 900px)"` …
+ *  - CSS custom properties: `"--my-var"` …
+ */
+export type CSSBlock = {
+    [K in keyof CSS.Properties]?: CSS.Properties[K];
+} & {
+    [key: string]: CSS.Properties[keyof CSS.Properties] | CSSNestedBlock | undefined;
+};
+/**
+ * The full rules object accepted by `css()` and `globalCSS()`.
+ *
+ * Top-level keys are developer-chosen block names (`"button"`, `"card"`, …).
+ * Each block is a `CSSBlock` — typed CSS properties plus optional nested keys
+ * for pseudo-selectors, breakpoint shorthands, or raw `@media` strings.
+ *
+ * @example
+ * ```ts
+ * const cl = css({
+ *   button: {
+ *     display: "inline-flex",   // ✅ autocompletes "flex" | "block" | …
+ *     padding: "0.5rem 1rem",
+ *     "&:hover": { opacity: "0.9" },
+ *     "md": { fontSize: "1.125rem" },
+ *   },
+ * });
+ * ```
+ */
+export type CSSRulesInput = Record<string, CSSBlock>;
+/**
+ * Configure global CSS-in-JS options.
+ * Shallow-merges additional or override existing breakpoint shorthand keys.
+ *
+ * @example
+ * ```ts
+ * configureCSS({ breakpoints: { md: "900px", "3xl": "1920px" } });
+ * ```
+ */
+export declare function configureCSS(options: {
+    breakpoints?: Record<string, string>;
+}): void;
+/**
+ * Options for `serializeRules`.
+ */
+export interface SerializeOptions {
+    /** When true, use the block name as-is as the CSS class name (no generated suffix). */
+    literal?: boolean;
+}
+/**
+ * Serialize a full `css()` rules object into a monolithic classMap.
+ *
+ * For each named block:
+ *  - All plain CSS properties are collected into a single base rule.
+ *  - Pseudo-selector blocks (`"&:hover"`, `"&::before"`, …) each become a
+ *    separate rule sharing the same class name.
+ *  - Breakpoint shorthands (`"md"`, `"lg"`, …) and raw `"@media ..."` keys
+ *    each become a separate `@media` rule sharing the same class name.
+ *  - Unknown nested object keys throw a descriptive error at call time.
+ *  - Invalid or empty blocks produce an empty string entry and no rules.
+ *
+ * Returns `{ blockName → "className" }`.
+ * New CSS rule strings are pushed to `pendingRules` as a side-effect.
+ */
+export declare function serializeRules(rules: CSSRulesInput, pendingRules: string[], options?: SerializeOptions): Record<string, string>;
+/**
+ * Resets the class counter back to 0 and restores the default breakpoints.
+ * Intended for test isolation only — never call this in production code.
+ */
+export declare function resetAtomicCache(): void;
+//# sourceMappingURL=serialize.d.ts.map

package/dist/types/lib/css-in-js/serialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/serialize.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AAKpC;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG;KAC1B,CAAC,IAAI,MAAM,GAAG,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC;CAChD,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CACjE,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,QAAQ,GAAG;KACpB,CAAC,IAAI,MAAM,GAAG,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC;CAChD,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GACR,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,UAAU,CAAC,GACpC,cAAc,GACd,SAAS,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAiCrD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,GAAG,IAAI,CAIP;AA4DD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,MAAM,EAAE,EACtB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmFxB;AAID;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAmBvC"}

package/dist/types/lib/css-in-js/stylesheet.d.ts

@@ -0,0 +1,188 @@
+import { type SerializeOptions } from "./serialize";
+export type { CSSBlock, CSSNestedBlock, CSSRulesInput } from "./serialize";
+export { configureCSS } from "./serialize";
+import type * as CSS from "csstype";
+import type { Cl, CSSRulesInput } from "./cl";
+/**
+ * One stop inside a `@keyframes` rule.
+ * Keys are `"from"`, `"to"`, or percentage strings like `"0%"`, `"50%"`.
+ */
+export type CSSKeyframeStops = Record<string, CSS.Properties>;
+/**
+ * A ref-counted, lazily-mounted CSS stylesheet.
+ *
+ * - Rules are serialized and buffered in `#pendingRules` immediately.
+ * - The sheet is only injected into the DOM when `mount()` is called (i.e.
+ *   when the first component that owns this sheet mounts).
+ * - A ref-count tracks how many component instances are using the sheet.
+ *   When the last one unmounts the sheet is removed from the DOM; the rules
+ *   are preserved as pending so a subsequent re-mount re-injects everything.
+ */
+declare class StylesheetInstance {
+    #private;
+    /**
+     * Register a `@keyframes` animation into this sheet.
+     *
+     * @param name  - A human-readable hint used as a prefix for the scoped name.
+     * @param stops - Stop map: `{ "from": { opacity: "0" }, "to": { opacity: "1" } }`
+     * @returns     The scoped keyframe name to use in `animation` or `animationName`.
+     *
+     * @example
+     * ```ts
+     * const { css, mount, keyframes } = stylesheet();
+     * mount();
+     *
+     * const fadeIn = keyframes("fadeIn", {
+     *   from: { opacity: "0", transform: "translateY(-4px)" },
+     *   to:   { opacity: "1", transform: "translateY(0)" },
+     * });
+     *
+     * const cl = css({
+     *   box: { animation: `${fadeIn} 0.3s ease` },
+     * });
+     * ```
+     */
+    keyframes(name: string, stops: CSSKeyframeStops): string;
+    /**
+     * Buffer new CSS text coming from a `css()` call.
+     * If the sheet is already mounted the pending text is flushed to the DOM
+     * immediately; otherwise it waits until the first `mount()`.
+     */
+    appendRules(cssText: string): void;
+    /**
+     * Increment the ref-count.  On first mount, flush any pending rules and
+     * inject the sheet into the DOM.
+     */
+    mount(): void;
+    /**
+     * Decrement the ref-count.  When it reaches 0 the sheet is removed from the
+     * DOM.  The `#cssText` is moved back to `#pendingRules` so a subsequent
+     * `mount()` re-injects everything cleanly.
+     */
+    unmount(): void;
+    get refCount(): number;
+    get cssText(): string;
+    get isMounted(): boolean;
+    get sheet(): CSSStyleSheet | null;
+}
+/**
+ * Create a per-component stylesheet.
+ *
+ * Returns `{ css, mount }`:
+ *
+ * - `css(rules)` — serialize a rules object into class names and buffer the
+ *   generated CSS.  Returns a `Cl<R>` — a plain frozen object whose keys are
+ *   the block names from `rules` and whose values are the generated class name
+ *   strings.  Use directly: `class=${cl.card}`.
+ * - `mount()` — ref-counts the sheet's DOM presence.  When called inside a
+ *   component it hooks into `onMount`/cleanup automatically.  When called
+ *   outside a component (e.g. standalone scripts or benchmarks) it mounts
+ *   the sheet immediately and returns an unmount function.
+ *
+ * @example
+ * ```ts
+ * const { css, mount } = stylesheet();
+ * mount();
+ *
+ * const cl = css({
+ *   card: { display: "flex", padding: "1rem" },
+ *   active: { backgroundColor: "blue" },
+ * });
+ *
+ * // In template — plain property lookup, zero runtime overhead:
+ * // html`<div class="${cl.card} ${isActive ? cl.active : ""}">…</div>`
+ * // or with the classes() directive for conditional logic:
+ * // html`<div ${classes([cl.card, [isActive, cl.active]])}>…</div>`
+ * ```
+ */
+export declare function stylesheet(): {
+    css: CssFn;
+    mount: () => (() => void) | undefined;
+    keyframes: (name: string, stops: CSSKeyframeStops) => string;
+};
+type CssFn = <R extends CSSRulesInput>(rules: R) => Cl<R>;
+/**
+ * Ensures the global sheet exists and schedules a single microtask to mount it.
+ * Called by both `globalCSS()` and global `keyframes()` — whichever runs first
+ * creates the sheet and queues the mount; subsequent calls before the microtask
+ * fires are no-ops.
+ */
+export declare function getGlobalSheet(): StylesheetInstance;
+export declare function ensureGlobalMounted(): void;
+/**
+ * Register a `@keyframes` animation into the global stylesheet.
+ *
+ * Mirrors `stylesheet().keyframes()` but uses the shared global sheet so it
+ * can be called at module level alongside `globalCSS()`.
+ *
+ * @param name  - Human-readable hint used as the scoped-name prefix.
+ * @param stops - Stop map: `{ from: { opacity: "0" }, to: { opacity: "1" } }`
+ * @returns     The scoped keyframe name to use in `animation` / `animationName`.
+ *
+ * @example
+ * ```ts
+ * const fadeIn = keyframes("fadeIn", {
+ *   from: { opacity: "0" },
+ *   to:   { opacity: "1" },
+ * });
+ *
+ * const styles = globalCSS({
+ *   card: { animation: `${fadeIn} 0.4s ease` },
+ * });
+ * ```
+ */
+export declare function keyframes(name: string, stops: CSSKeyframeStops): string;
+/**
+ * Register global (app-level) CSS rules.
+ *
+ * - All calls share a single `StylesheetInstance` that is mounted once, via a
+ *   microtask, and never unmounted.
+ * - Multiple `globalCSS()` calls before the microtask fires are batched: only
+ *   one `mount()` call is made.
+ * - Returns a `Cl<R>` so the generated class names can be used exactly like
+ *   those from `css()`.
+ *
+ * @example
+ * ```ts
+ * const utils = globalCSS({
+ *   srOnly: { position: "absolute", width: "1px", height: "1px",
+ *              overflow: "hidden", clip: "rect(0,0,0,0)" },
+ * });
+ * // html`<span ${utils(["srOnly"])}>Screen-reader text</span>`
+ * ```
+ */
+export declare function globalCSS<R extends CSSRulesInput>(rules: R, options?: SerializeOptions): Cl<R>;
+/**
+ * Inject a raw CSS string directly into the global stylesheet.
+ *
+ * Use this for rules that cannot be expressed via `globalCSS()` — e.g.
+ * wildcard attribute selectors (`[class*="..."]`) or `@keyframes` blocks
+ * that rely on CSS custom properties (`var()`).
+ *
+ * Like `globalCSS()`, this must be called at module level (not inside a
+ * component or template function).
+ *
+ * @example
+ * ```ts
+ * globalRawCSS(`
+ *   [class*="mates-"] {
+ *     animation-fill-mode: both;
+ *   }
+ * `);
+ * ```
+ */
+export declare function globalRawCSS(css: string): void;
+/**
+ * Resets the module-level global sheet state.
+ * Intended for test isolation only — never call this in production code.
+ *
+ * Clears `globalSheet` and `globalMicrotaskQueued` so each test starts with a
+ * clean slate and any pending microtask from a prior test cannot bleed over.
+ */
+export declare function resetGlobalSheet(): void;
+/**
+ * Resets the keyframe counter back to 0.
+ * Intended for test isolation only — never call this in production code.
+ */
+export declare function resetKeyframeCounter(): void;
+//# sourceMappingURL=stylesheet.d.ts.map

package/dist/types/lib/css-in-js/stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/stylesheet.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,gBAAgB,EAAkB,MAAM,aAAa,CAAC;AAEpE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AAIpC,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AA8C9C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;AAmC9D;;;;;;;;;GASG;AACH,cAAM,kBAAkB;;IAQtB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,MAAM;IAQxD;;;;OAIG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAUlC;;;OAGG;IACH,KAAK,IAAI,IAAI;IAYb;;;;OAIG;IACH,OAAO,IAAI,IAAI;IA6Cf,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,KAAK,IAAI,aAAa,GAAG,IAAI,CAEhC;CACF;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,UAAU,IAAI;IAC5B,GAAG,EAAE,KAAK,CAAC;IACX,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACtC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,MAAM,CAAC;CAC9D,CAuCA;AAID,KAAK,KAAK,GAAG,CAAC,CAAC,SAAS,aAAa,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;AAa1D;;;;;GAKG;AACH,wBAAgB,cAAc,IAAI,kBAAkB,CAKnD;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAW1C;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAMvE;AAID;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,aAAa,EAC/C,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,gBAAgB,GACzB,EAAE,CAAC,CAAC,CAAC,CAWP;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAI9C;AAID;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAGvC;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/types/lib/css-in-js/theme.d.ts

@@ -0,0 +1,110 @@
+import { type ThemeAtomType } from "../Mutables/Extended Atoms/themeAtom";
+/**
+ * A flat map of token names to CSS values.
+ * Keys may include or omit the leading "--".
+ * e.g. { primary: "#3b82f6" }  or  { "--primary": "#3b82f6" }
+ */
+export type ThemeTokenMap = Record<string, string>;
+/**
+ * The themes object passed to globalTheme().
+ * Keys are theme names ("light", "dark", "high-contrast", …).
+ * Values are flat token maps.
+ *
+ * Convention (Option A):
+ *   - first key  → light base  → injected on :root
+ *   - second key → dark theme  → injected on [data-theme="<name>"] AND
+ *                                @media (prefers-color-scheme: dark) { :root:not([data-theme]) }
+ *   - any further keys → explicit [data-theme="<name>"] only
+ */
+export type ThemesInput = Record<string, ThemeTokenMap>;
+/**
+ * cssVars returned by globalTheme().
+ * Every key from the first (base) theme maps to its CSS variable name string.
+ * e.g. cssVars.primary → "--primary"
+ * Use as: `var(${cssVars.primary})`
+ */
+export type CssVars<T extends ThemeTokenMap> = {
+    readonly [K in keyof T]: string;
+};
+/**
+ * "auto" is always included. All defined theme names are also valid.
+ */
+export type ThemeMode<T extends ThemesInput> = "auto" | (string & keyof T);
+export type GlobalThemeResult<T extends ThemesInput> = {
+    /** Plain object: tokenKey → "--token-key" (the CSS variable name, no var() wrapper). */
+    cssVars: CssVars<T[keyof T]>;
+    /**
+     * The singleton theme atom shared across the entire app.
+     * Call `.setToDark()`, `.setToLight()`, `.setToAuto()`, or `.toggle()`.
+     * Reads/writes localStorage & data-theme on <html>.
+     * Always the same instance as `themeAtom()` from mates.
+     */
+    themeAtom: ThemeAtomType;
+};
+/**
+ * Define your application's themes as named token maps.
+ *
+ * Convention (first key = light base, second key = dark):
+ *
+ * ```ts
+ * export const { cssVars, themeAtom } = globalTheme({
+ *   light: { primary: "#3b82f6", bg: "#ffffff", text: "#111827" },
+ *   dark:  { primary: "#60a5fa", bg: "#0f172a", text: "#f1f5f9" },
+ * });
+ *
+ * // cssVars.primary  → "--primary"
+ * // use as: `var(${cssVars.primary})`
+ *
+ * // themeAtom is AtomType<"auto" | "light" | "dark">
+ * themeAtom.set("dark");
+ * themeAtom.set("auto"); // hands control back to the OS
+ * ```
+ *
+ * CSS injected (for the example above):
+ *
+ * ```css
+ * :root                          { --primary: #3b82f6; ... }   ← light base
+ * [data-theme="light"]           { --primary: #3b82f6; ... }   ← explicit light
+ * [data-theme="dark"]            { --primary: #60a5fa; ... }   ← explicit dark
+ * @media (prefers-color-scheme: dark) {
+ *   :root:not([data-theme])      { --primary: #60a5fa; ... }   ← auto OS dark
+ * }
+ * ```
+ *
+ * To prevent flash-of-wrong-theme, add this inline script as the very first
+ * child of <head> (before any stylesheet):
+ *
+ * ```html
+ * <script>
+ *   (function(){
+ *     var t = localStorage.getItem("mates-theme");
+ *     if (t && t !== "auto") document.documentElement.setAttribute("data-theme", t);
+ *   })();
+ * </script>
+ * ```
+ */
+export declare function globalTheme<T extends ThemesInput>(themes: T): GlobalThemeResult<T>;
+/**
+ * Inject a flat map of CSS properties into `:root` via the global sheet.
+ *
+ * Intended for base token overrides — e.g. Material Web component sizing,
+ * shape, and typography tokens. Keys may be CSS custom properties (`--my-var`)
+ * or plain camelCase/kebab-case properties (`fontFamily`, `font-family`).
+ *
+ * Like `globalCSS()`, injection is microtask-deferred and happens only once.
+ * Safe to call from multiple modules at startup — all rules accumulate into the
+ * same singleton sheet.
+ *
+ * ```ts
+ * // app/tokens.ts  ← module level
+ * import { rootCSS } from "mates/css-in-js";
+ *
+ * rootCSS({
+ *   "--md-filled-button-container-height": "2.125rem",
+ *   "--md-sys-shape-corner-full":          "9999px",
+ *   fontFamily: '"Roboto", sans-serif',
+ * });
+ * ```
+ */
+export declare function rootCSS<T extends Record<string, string>>(tokens: T): T;
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/lib/css-in-js/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../lib/css-in-js/theme.ts"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,sCAAsC,CAAC;AAI9C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAExD;;;;;GAKG;AACH,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,aAAa,IAAI;IAC7C,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM;CAChC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;AAE3E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI;IACrD,wFAAwF;IACxF,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,EAAE,aAAa,CAAC;CAC1B,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAC/C,MAAM,EAAE,CAAC,GACR,iBAAiB,CAAC,CAAC,CAAC,CAmDtB;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAQrE"}

package/dist/types/lib/devtools/devtoolsHooks.d.ts

@@ -0,0 +1,101 @@
+/**
+ * DevTools Hooks Bridge
+ *
+ * This module provides a set of no-op function stubs that `x-x.ts` (the core
+ * component system) and other core modules (`atom.ts`, `events.ts`) call
+ * instead of directly importing devtools modules.
+ *
+ * When devtools code is never imported (i.e. production), these remain as
+ * empty no-ops and the bundler can tree-shake the entire devtools directory.
+ *
+ * When devtools IS imported (dev mode), the devtools modules call the
+ * `installDevToolsHooks()` function to replace these stubs with real
+ * implementations, wiring up registry, logging, and perf tracking.
+ *
+ * This breaks the static import chain:
+ *   x-x.ts     ──✕──>  devtools/registry.ts
+ *   atom.ts    ──✕──>  devtools/logStore.ts
+ *   events.ts  ──✕──>  devtools/logStore.ts
+ *   x-x.ts     ──✕──>  devtools/perfStore.ts
+ *
+ * Instead:
+ *   x-x.ts / atom.ts / events.ts  ────>  devtoolsHooks.ts  (tiny, no-op stubs)
+ *   mates-devtools package         ────>  installDevToolsHooks()  (fills in real impls)
+ */
+export interface DevToolsHooks {
+    /** Register a component when it mounts */
+    registerComponent: (component: any, viewFn: Function) => void;
+    /** Unregister a component when it unmounts */
+    unregisterComponent: (component: any, viewFn: Function | null) => void;
+    /** Notify devtools that a component re-rendered */
+    notifyRender: (component: any) => void;
+    /** Get display name for a component */
+    getComponentName: (component: any) => string;
+    /** Log a component mount */
+    logComponentMount: (name: string) => void;
+    /** Log a component render with duration */
+    logComponentRender: (name: string, durationMs: number) => void;
+    /** Log a component unmount */
+    logComponentUnmount: (name: string) => void;
+    /** Log an atom set call */
+    logAtomSet: (name: string, value: unknown) => void;
+    /** Log an atom update call */
+    logAtomUpdate: (name: string) => void;
+    /** Log an event trigger */
+    logEventTrigger: (name: string, data: unknown) => void;
+    /** Log a cleanup event trigger */
+    logCleanupEventTrigger: (name: string, data: unknown) => void;
+    /** Log an outgoing fetch request */
+    logFetchRequest: (method: string, url: string, payload?: string) => void;
+    /** Log a successful fetch response */
+    logFetchResponse: (method: string, url: string, status: number, durationMs: number) => void;
+    /** Log a failed fetch request */
+    logFetchError: (method: string, url: string, error: string, durationMs: number) => void;
+    /** Record a render timing for the perf tab */
+    recordRender: (componentName: string, instanceId: number, durationMs: number) => void;
+}
+/** Register a component when it mounts (no-op until devtools is loaded) */
+export declare function dtRegisterComponent(component: any, viewFn: Function): void;
+/** Unregister a component when it unmounts (no-op until devtools is loaded) */
+export declare function dtUnregisterComponent(component: any, viewFn: Function | null): void;
+/** Notify devtools that a component re-rendered (no-op until devtools is loaded) */
+export declare function dtNotifyRender(component: any): void;
+/** Get display name for a component (returns "Anonymous" until devtools is loaded) */
+export declare function dtGetComponentName(component: any): string;
+/** Log a component mount (no-op until devtools is loaded) */
+export declare function dtLogComponentMount(name: string): void;
+/** Log a component render with duration (no-op until devtools is loaded) */
+export declare function dtLogComponentRender(name: string, durationMs: number): void;
+/** Log a component unmount (no-op until devtools is loaded) */
+export declare function dtLogComponentUnmount(name: string): void;
+/** Log an atom set call (no-op until devtools is loaded) */
+export declare function dtLogAtomSet(name: string, value: unknown): void;
+/** Log an atom update call (no-op until devtools is loaded) */
+export declare function dtLogAtomUpdate(name: string): void;
+/** Log an event trigger (no-op until devtools is loaded) */
+export declare function dtLogEventTrigger(name: string, data: unknown): void;
+/** Log a cleanup event trigger (no-op until devtools is loaded) */
+export declare function dtLogCleanupEventTrigger(name: string, data: unknown): void;
+/** Log an outgoing fetch request (no-op until devtools is loaded) */
+export declare function dtLogFetchRequest(method: string, url: string, payload?: string): void;
+/** Log a successful fetch response (no-op until devtools is loaded) */
+export declare function dtLogFetchResponse(method: string, url: string, status: number, durationMs: number): void;
+/** Log a failed fetch request (no-op until devtools is loaded) */
+export declare function dtLogFetchError(method: string, url: string, error: string, durationMs: number): void;
+/** Record a render timing for the perf tab (no-op until devtools is loaded) */
+export declare function dtRecordRender(componentName: string, instanceId: number, durationMs: number): void;
+/**
+ * Replace the no-op stubs with real devtools implementations.
+ *
+ * Called once when the mates-devtools package is first imported. This is what
+ * bridges the gap: devtools code calls this to wire itself into the
+ * component lifecycle without x-x.ts / atom.ts / events.ts needing a static
+ * import on any devtools module.
+ */
+export declare function installDevToolsHooks(real: Partial<DevToolsHooks>): void;
+/**
+ * Returns true if devtools hooks have been installed (i.e. devtools is active).
+ * Can be used as a fast gate before doing devtools-only work.
+ */
+export declare function isDevToolsInstalled(): boolean;
+//# sourceMappingURL=devtoolsHooks.d.ts.map

package/dist/types/lib/devtools/devtoolsHooks.d.ts.map

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

package/dist/types/lib/devtools/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./devtoolsHooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/devtools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/devtools/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}