mates 0.1.0-beta.9 → 0.2.1

package/README.md

@@ -1,18 +1,10 @@
 # MATES
 
-**MATES** is a lightweight, TypeScript-first front-end framework built on [lit-html](https://lit.dev/docs/libraries/standalone-templates/) to help you build large scale complex web applications that focuses on Developer Experience. 
+**MATES** is a TypeScript-first front-end framework built on lit-html — no virtual DOM, no compiler needed. It's faster than React, fully type-safe, and runs via Vite, Bun, or CDN (~50KB gzipped).
 
-Try out Here on Stackblitz 
-Check the Full **Docs** Here  
-
-What if we had a framework that is just perfect? A framework that's faster than react and without the need of a compiler. A Framework that's super type safe. A framework that cherishes capabilities of Javascript. Mates a Beautiful, simple, Perfect Javascript Framework with **no virtual DOM**, **no compiler step**, but with lots of **goodness**. You can install Mates and run using a build tool like Vite or Bun or just use CDN to load Mates at runtime.
-
-MATES is based on an architecture: **M**utable State, **A**ctions, **T**emplates, **E**vents and **S**etups. State is mutable, Actions are trackable functions, Templates are functions that return html template strings, setups are run once before the component is mounted to set up some state or some business logic or effects. 
-
-Mates is about 50Kb gzipped, but it comes with a Router, really good state management system (you will not need anything else), Date Utils with timezone support (no need for extra library), Fetch and web socket Utils (no axios or socket.io needed), Animation Utils, Form Validation Utils, Virtualisation for lists or tables, built in CSS-in-Js library, portals, tooltips, snackbars, popups (so it'll help you create popups with no effort), UUID utils to generate random ID, Actions, Events, custom hook support, Memoisation, Zero promises (cancellable and reusable promises), built in support for pagination and lazy loading, with tons of built in hooks that are very useful, utilites to handle local storage across all tabs, a Task Manager to handle lots of async tasks in parallel or one by one and many more. 
-
----
+Its architecture follows the MATES pattern: Mutable State, Actions, Templates, Events, and Setups.
 
+It comes fully batteries-included with: a Router, state management, date/timezone utils, fetch & WebSocket utils, animations, form validation, list virtualisation, CSS-in-JS, portals, tooltips, popups, UUID generation, memoisation, cancellable promises, pagination, lazy loading, local storage sync across tabs, a Task Manager, and a rich set of built-in hooks — eliminating the need for most third-party libraries.
 
 ---
 
@@ -24,8 +16,6 @@ Most frameworks ask you to learn a new mental model — JSX compilers, reactive
 - **No virtual DOM** — `lit-html` patches only the parts of the DOM that actually changed. Updates are surgical, not diffed from scratch.]
 - **Predictable two-layer components** — the outer function (setup) runs once. The inner function (render) runs on every update. Clear separation between initialization and rendering.
 - **Batteries included** — routing, async state machines, CSS-in-JS, WebSocket, virtualization, portals, and animations are all first-party and designed to work together.
-- **Very Capable** it's shipped with lots of utitlies to help you avoid installing a third party library just for few of it's functions.
-- **TypeScript-first** — every API is fully typed from the ground up.
 
 ---
 
@@ -73,7 +63,7 @@ Every Mates component is a **closure** with two layers:
 
 | Layer | Runs | Purpose |
 |-------|------|---------|
-| **Outer function** | Once on mount | Create atoms, set up subscriptions, register lifecycle hooks |
+| **Outer function** | Once on mount | Create atoms, set up subscriptions using **on** function, register lifecycle hooks..etc |
 | **Inner function** | Every render | Read reactive values and return a `TemplateResult` |
 
 ```typescript
@@ -92,7 +82,7 @@ const Counter = (propsFn: Props<{ label: string }>) => {
 };
 ```
 
-> **Rule of thumb:** atoms, effects, hooks, and subscriptions always go in the **outer** function, you can also make api calls..etc you can be assumed that this code is only executed once. template function always returns html temlate strings. Modern IDEs have a built in formatting support for the html template strings.
+> **Rule of thumb:** atoms, effects, hooks, and subscriptions always go in the **outer** function, you can also make api calls..etc you can be assured that this code is only executed once. template function always returns html temlate strings. Modern IDEs have a built in formatting support for the html template strings.
 
 ---
 

package/dist/Directives/animationClasses.d.ts

@@ -18,7 +18,7 @@ export declare function injectMatesAnimations(): void;
  *
  * @example
  * ```ts
- * import { MA } from "@mates";
+ * import { MA } from "mates";
  * html`<div class=${MA.fadeIn}>Hello</div>`
  * html`<div class="${MA.slideInUp}" style="--mates-duration:500ms">Hi</div>`
  * ```

package/dist/Directives/index.d.ts

@@ -9,7 +9,7 @@ export { type LazyLoadCallback, type LazyLoadOptions, lazyLoad, onScrolledIntoVi
 export { type ConnectCallback, type DisconnectCallback, onConnect, onDisconnect, onUpdate, type UpdateCallback, } from "./lifecycleDirectives";
 export { type MasonryGridOptions, type MasonryItemTemplate, type MasonryKeyFn, masonryGrid, } from "./masonryGrid";
 export { type MemoKeys, type MemoTemplateFn, memoTemplate, } from "./memoTemplate";
-export { type MatesCustomEventMap, type OnEventMap, on, removeOn, } from "./onDirective";
+export { type MatesCustomEventMap, type OnEventMap, on, on as onEvent, removeOn, } from "./onDirective";
 export { type OnParentMap, onParent } from "./onParentDirective";
 export { renderSwitch, type SwitchCase, type SwitchEntry, } from "./renderSwitch";
 export { removeStyle, type StyleMap, type StyleValue, style, } from "./styleDirective";

package/dist/Directives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,IAAI,EACJ,UAAU,GACX,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,OAAO,EACP,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAChF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,QAAQ,GACT,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,QAAQ,EACR,WAAW,EACX,SAAS,GACV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,QAAQ,EACR,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,cAAc,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,cAAc,EACnB,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,EAAE,EACF,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,IAAI,EACJ,UAAU,GACX,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,OAAO,EACP,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAChF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,QAAQ,GACT,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,QAAQ,EACR,WAAW,EACX,SAAS,GACV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,QAAQ,EACR,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,cAAc,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,cAAc,EACnB,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,EAAE,EACF,EAAE,IAAI,OAAO,EACb,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,kBAAkB,CAAC"}

package/dist/Directives/onParentDirective.d.ts

@@ -13,7 +13,7 @@ export type OnParentMap = {
  *
  * @example
  * ```ts
- * import { ref, setRef, onParent } from "@mates";
+ * import { ref, setRef, onParent } from "mates";
  *
  * const listRef = ref<HTMLUListElement>();
  *

package/dist/Directives/timerDirective.d.ts

@@ -19,8 +19,8 @@ export type TimerContent = () => unknown;
  *
  * @example
  * ```ts
- * import { html } from "@mates";
- * import { timer } from "@mates";
+ * import { html } from "mates";
+ * import { timer } from "mates";
  *
  * // Live clock — updates every second, no component re-render
  * html`

package/dist/Fetch/Fetch.d.ts

@@ -8,8 +8,8 @@ export type FetchRequest = Omit<RequestInit, "body"> & {
      * - If it starts with `http:` or `https:` it is used as-is (absolute URL),
      *   ignoring any `host` set on the client/base request.
      * - Otherwise it is treated as a path and appended to `host`
-     *   (e.g. `host = "https://api.example.com"` + `url = "/users"` →
-     *   `"https://api.example.com/users"`).
+     *   (e.g. `host = "https://<host>"` + `url = "/users"` →
+     *   `"https://<host>/users"`).
      * - Dynamic segments (`:id`) are substituted from `params`.
      *
      * @example
@@ -24,7 +24,7 @@ export type FetchRequest = Omit<RequestInit, "body"> & {
      */
     path?: string;
     /**
-     * Origin / base host, e.g. `"https://api.example.com"`.
+     * Origin / base host, e.g. `"https://<your-api>"`.
      * Used as a prefix when `url` is a relative path.
      * Defaults to `""` (no host prefix).
      */
@@ -67,7 +67,7 @@ export declare const clearInterceptors: () => void;
  * - All requests are logged to Mates DevTools when devtools is connected.
  *
  * @example
- * const api = new FetchClient({ host: "https://api.example.com" });
+ * const api = new FetchClient({ host: "https://<your-api>" });
  * api.interceptBefore((url, opts) => ({
  *   url,
  *   options: { ...opts, headers: { ...opts.headers, Authorization: `Bearer ${token}` } },
@@ -106,16 +106,16 @@ export declare class FetchClient {
      * exactly as `buildRequestUrl` handles them.
      *
      * @example
-     * const loadUser = api.fetchAction({ host: "https://api.example.com", url: "/users/:id" });
+     * const loadUser = api.fetchAction({ host: "https://<your-api>", url: "/users/:id" });
      * loadUser({ id: 7, expand: "posts" });
-     * // → GET https://api.example.com/users/7?expand=posts
+     * // → GET https://<your-api>/users/7?expand=posts
      */
     fetchAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;
     /**
      * Creates an asyncAction that always issues a GET request via this client.
      *
      * @example
-     * const loadUsers = api.getAction({ host: "https://api.example.com", url: "/users" });
+     * const loadUsers = api.getAction({ host: "https://<your-api>", url: "/users" });
      * loadUsers({ page: 2, limit: 20 });
      */
     getAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;
@@ -123,7 +123,7 @@ export declare class FetchClient {
      * Creates an asyncAction that always issues a POST request via this client.
      *
      * @example
-     * const createUser = api.postAction({ host: "https://api.example.com", url: "/users" });
+     * const createUser = api.postAction({ host: "https://<your-api>", url: "/users" });
      * createUser({ name: "Alice" });
      */
     postAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;
@@ -131,7 +131,7 @@ export declare class FetchClient {
      * Creates an asyncAction that always issues a PUT request via this client.
      *
      * @example
-     * const replaceUser = api.putAction({ host: "https://api.example.com", url: "/users/:id" });
+     * const replaceUser = api.putAction({ host: "https://<your-api>", url: "/users/:id" });
      * replaceUser({ id: 7, name: "Bob" });
      */
     putAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;
@@ -139,7 +139,7 @@ export declare class FetchClient {
      * Creates an asyncAction that always issues a PATCH request via this client.
      *
      * @example
-     * const patchUser = api.patchAction({ host: "https://api.example.com", url: "/users/:id" });
+     * const patchUser = api.patchAction({ host: "https://<your-api>", url: "/users/:id" });
      * patchUser({ id: 7, status: "inactive" });
      */
     patchAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;
@@ -147,7 +147,7 @@ export declare class FetchClient {
      * Creates an asyncAction that always issues a DELETE request via this client.
      *
      * @example
-     * const removeUser = api.deleteAction({ host: "https://api.example.com", url: "/users/:id" });
+     * const removeUser = api.deleteAction({ host: "https://<your-api>", url: "/users/:id" });
      * removeUser({ id: 7 });
      */
     deleteAction<T = unknown>(config?: FetchActionConfig): AsyncActionReturnType<(params?: Record<string, any>) => Promise<T>>;

package/dist/Mutables/Extended Atoms/themeAtom.d.ts

@@ -34,10 +34,9 @@ export type ThemeAtomType = AtomType<ThemeValue> & {
     readonly name: "themeAtom";
 };
 /**
- * Returns the singleton reactive theme atom.
+ * The singleton reactive theme atom.
  *
- * Call once at module / app level to initialise. Every subsequent call
- * returns the same instance with no side-effects.
+ * Use directly — it is the atom, not a factory.
  *
  * - Reads the initial theme from `localStorage["mates-theme"]`.
  * - Falls back to the OS color-scheme preference when no value is stored.
@@ -47,13 +46,14 @@ export type ThemeAtomType = AtomType<ThemeValue> & {
  *   "auto" mode, re-notifying all subscribers so derived UIs update.
  *
  * @example
- * const theme = themeAtom();
- * theme.setToDark();
- * theme.toggle();       // → "light"
- * theme.setToAuto();    // follows OS
- * theme.resolved;       // "light" | "dark" — never "auto"
- * theme();              // "light" | "dark" | "auto"
- * theme.val;            // same
+ * import { themeAtom } from "mates";
+ *
+ * themeAtom.setToDark();
+ * themeAtom.toggle();      // → "light"
+ * themeAtom.setToAuto();   // follows OS
+ * themeAtom.resolved;      // "light" | "dark" — never "auto"
+ * themeAtom();             // read current value: "light" | "dark" | "auto"
+ * themeAtom.val;           // same
  */
-export declare function themeAtom(): ThemeAtomType;
+export declare const themeAtom: ThemeAtomType;
 //# sourceMappingURL=themeAtom.d.ts.map

package/dist/Mutables/Extended Atoms/themeAtom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeAtom.d.ts","sourceRoot":"","sources":["../../../lib/Mutables/Extended Atoms/themeAtom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,cAAc,CAAC;AAUnD,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG;IACjD,mEAAmE;IACnE,UAAU,IAAI,IAAI,CAAC;IACnB,kEAAkE;IAClE,SAAS,IAAI,IAAI,CAAC;IAClB,uEAAuE;IACvE,SAAS,IAAI,IAAI,CAAC;IAClB;;;;OAIG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC5B,CAAC;AA6EF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,IAAI,aAAa,CAuFzC"}
+{"version":3,"file":"themeAtom.d.ts","sourceRoot":"","sources":["../../../lib/Mutables/Extended Atoms/themeAtom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,cAAc,CAAC;AAUnD,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG;IACjD,mEAAmE;IACnE,UAAU,IAAI,IAAI,CAAC;IACnB,kEAAkE;IAClE,SAAS,IAAI,IAAI,CAAC;IAClB,uEAAuE;IACvE,SAAS,IAAI,IAAI,CAAC;IAClB;;;;OAIG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC5B,CAAC;AA6JF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,EAAE,aAAgC,CAAC"}

package/dist/Mutables/atom/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./atom";
+export * from "./atom";
 export * from "./createTimedAtom";
 export * from "./debouncedAtom";
-export * from "./atom";
 export * from "./mapAtom";
 export * from "./setAtom";
 export * from "./storageAtom";

package/dist/Mutables/atom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/Mutables/atom/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/Mutables/atom/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}

package/dist/Template/x-x.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"x-x.d.ts","sourceRoot":"","sources":["../../lib/Template/x-x.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,2BAA2B,CAAC;AAwBhF,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,MAAM,CAAsB;IAE7B,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,IAAI,SAAe;IAC1B,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAEV;IACT,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAU;IAE3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,EAAE,MAAM,GAAG,CAAC,CAAa;IAEzD,gFAAgF;IACzE,UAAU,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,EAAE,CAAM;IAEpD,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,EAAE,GAAG;IAIvC,WAAW,SAAM;IAExB,iGAAiG;IAC1F,MAAM,SAAK;IAClB,sEAAsE;IAC/D,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAQ;IACjD,kFAAkF;IAC3E,cAAc,SAAK;IAE1B,+CAA+C;IACxC,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE,CAAM;IACzD,2EAA2E;IACpE,WAAW,EAAE,OAAO,CAAQ;IAG5B,qBAAqB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAa;IACnD,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI;IAKjC,aAAa,EAAE,IAAI,GAAG,gBAAgB,CAAQ;IAC9C,UAAU,EAAE,IAAI,GAAG,gBAAgB,CAAQ;;IAwBlD,IAAI,KAAK,CAAC,GAAG,qBAAA,EAGZ;IAED,IAAI,KAAK,wBAER;IAEM,OAAO,EAAE,GAAG,CAAC;IAEpB,OAAO,CAAC,cAAc,CAAS;IAM/B;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAmBxB,IAAI,IAAI,CAAC,GAAG,KAAA,EAyBX;IAED,IAAI,IAAI,QAEP;IAMD,gBAAgB;IAIhB,iBAAiB;IAgCjB,oBAAoB;IAqBpB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ;IAazC,OAAO;IA6CP,OAAO,CAAC,eAAe;IAqFvB,OAAO,CAAC,kBAAkB;CA0E3B"}
+{"version":3,"file":"x-x.d.ts","sourceRoot":"","sources":["../../lib/Template/x-x.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,2BAA2B,CAAC;AAWhF,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,MAAM,CAAsB;IAE7B,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,IAAI,SAAe;IAC1B,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAEV;IACT,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAU;IAE3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,EAAE,MAAM,GAAG,CAAC,CAAa;IAEzD,gFAAgF;IACzE,UAAU,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,EAAE,CAAM;IAEpD,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,EAAE,GAAG;IAIvC,WAAW,SAAM;IAExB,iGAAiG;IAC1F,MAAM,SAAK;IAClB,sEAAsE;IAC/D,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAQ;IACjD,kFAAkF;IAC3E,cAAc,SAAK;IAE1B,+CAA+C;IACxC,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE,CAAM;IACzD,2EAA2E;IACpE,WAAW,EAAE,OAAO,CAAQ;IAG5B,qBAAqB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAa;IACnD,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI;IAKjC,aAAa,EAAE,IAAI,GAAG,gBAAgB,CAAQ;IAC9C,UAAU,EAAE,IAAI,GAAG,gBAAgB,CAAQ;;IAwBlD,IAAI,KAAK,CAAC,GAAG,qBAAA,EAGZ;IAED,IAAI,KAAK,wBAER;IAEM,OAAO,EAAE,GAAG,CAAC;IAEpB,OAAO,CAAC,cAAc,CAAS;IAM/B;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAmBxB,IAAI,IAAI,CAAC,GAAG,KAAA,EAyBX;IAED,IAAI,IAAI,QAEP;IAMD,gBAAgB;IAIhB,iBAAiB;IAgCjB,oBAAoB;IAqBpB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ;IAazC,OAAO;IA6CP,OAAO,CAAC,eAAe;IAqFvB,OAAO,CAAC,kBAAkB;CAiF3B"}

package/dist/Template/x.d.ts

@@ -1,5 +1,9 @@
 import type { ComponentType } from "./x-x.types";
 export declare const x: <T extends Record<string, any>>(viewFn: ComponentType<T>, props?: T) => import("lit-html").TemplateResult<1>;
 export declare const view: <T extends Record<string, any>>(viewFn: ComponentType<T>, props?: T) => import("lit-html").TemplateResult<1>;
+/** @alias x */
+export declare const template: <T extends Record<string, any>>(viewFn: ComponentType<T>, props?: T) => import("lit-html").TemplateResult<1>;
 export declare const renderX: <T extends Record<string, any>>(viewFn: ComponentType<T>, element: HTMLElement, props?: T) => import("lit-html").RootPart;
+/** @alias renderX */
+export declare const renderTemplate: <T extends Record<string, any>>(viewFn: ComponentType<T>, element: HTMLElement, props?: T) => import("lit-html").RootPart;
 //# sourceMappingURL=x.d.ts.map

package/dist/Template/x.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"x.d.ts","sourceRoot":"","sources":["../../lib/Template/x.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,eAAO,MAAM,CAAC,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7C,QAAQ,aAAa,CAAC,CAAC,CAAC,EACxB,QAAO,CAAW,yCAGnB,CAAC;AAGF,eAAO,MAAM,IAAI,GARC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UACrC,aAAa,CAAC,CAAC,CAAC,UACjB,CAAC,yCAMW,CAAC;AAEtB,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACnD,QAAQ,aAAa,CAAC,CAAC,CAAC,EACxB,SAAS,WAAW,EACpB,QAAO,CAAW,gCAGnB,CAAC"}
+{"version":3,"file":"x.d.ts","sourceRoot":"","sources":["../../lib/Template/x.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,eAAO,MAAM,CAAC,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7C,QAAQ,aAAa,CAAC,CAAC,CAAC,EACxB,QAAO,CAAW,yCAGnB,CAAC;AAGF,eAAO,MAAM,IAAI,GARC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UACrC,aAAa,CAAC,CAAC,CAAC,UACjB,CAAC,yCAMW,CAAC;AACtB,eAAe;AACf,eAAO,MAAM,QAAQ,GAVH,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UACrC,aAAa,CAAC,CAAC,CAAC,UACjB,CAAC,yCAQe,CAAC;AAE1B,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACnD,QAAQ,aAAa,CAAC,CAAC,CAAC,EACxB,SAAS,WAAW,EACpB,QAAO,CAAW,gCAGnB,CAAC;AAEF,qBAAqB;AACrB,eAAO,MAAM,cAAc,GATH,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UAC3C,aAAa,CAAC,CAAC,CAAC,WACf,WAAW,UACb,CAAC,gCAM2B,CAAC"}

package/dist/Utils/svgIcon.d.ts

@@ -69,10 +69,8 @@ declare const svgIconDirective: (_markup: string, _config: SvgConfig) => import(
  * ```ts
  * import { safeSVG, html } from "mates";
  *
- * const heartIcon =
- *   `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- *      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5…"/>
- *    </svg>`;
+ * // markup must be a valid SVG string (starts with <svg ...>)
+ * const heartIcon = `<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5…"/></svg>`;
  *
  * html`<button>${safeSVG(heartIcon, { size: 24, fill: "currentColor" })}</button>`;
  * ```

package/dist/Utils/svgIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svgIcon.d.ts","sourceRoot":"","sources":["../../lib/Utils/svgIcon.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AAIvE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5C,4CAA4C;IAC5C,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsFF,cAAM,gBAAiB,SAAQ,SAAS;;gBAY1B,QAAQ,EAAE,QAAQ;IASrB,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;IAuD7D,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS;CA2BpD;AAED,QAAA,MAAM,gBAAgB,mHAA8B,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,SAAc,GACrB,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAErC;AAED;;;;;;;;;GASG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"svgIcon.d.ts","sourceRoot":"","sources":["../../lib/Utils/svgIcon.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AAIvE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5C,4CAA4C;IAC5C,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsFF,cAAM,gBAAiB,SAAQ,SAAS;;gBAY1B,QAAQ,EAAE,QAAQ;IASrB,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;IAuD7D,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS;CA2BpD;AAED,QAAA,MAAM,gBAAgB,mHAA8B,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,SAAc,GACrB,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAErC;AAED;;;;;;;;;GASG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,CAAC"}

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

@@ -1,4 +1,4 @@
-import { type AtomType } from "../Mutables/atom/atom";
+import { type ThemeAtomType } from "../Mutables/Extended Atoms/themeAtom";
 /**
  * A flat map of token names to CSS values.
  * Keys may include or omit the leading "--".
@@ -33,8 +33,13 @@ 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]>;
-    /** Reactive atom: "auto" | theme-name. Reads/writes localStorage & data-theme on <html>. */
-    themeAtom: AtomType<ThemeMode<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.
@@ -101,5 +106,5 @@ export declare function globalTheme<T extends ThemesInput>(themes: T): GlobalThe
  * });
  * ```
  */
-export declare function rootCSS(tokens: Record<string, string>): void;
+export declare function rootCSS<T extends Record<string, string>>(tokens: T): T;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../lib/css-in-js/theme.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,uBAAuB,CAAC;AAM5D;;;;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,4FAA4F;IAC5F,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,CAAC;AAwFF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAC/C,MAAM,EAAE,CAAC,GACR,iBAAiB,CAAC,CAAC,CAAC,CA0EtB;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAO5D"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../lib/css-in-js/theme.ts"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,sCAAsC,CAAC;AAK9C;;;;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,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAQtE"}