mates-devtools 0.1.0-beta.1

package/dist/types/lib/Directives/memoTemplate.d.ts

@@ -0,0 +1,94 @@
+import type { TemplateResult } from "lit-html";
+import type { DirectiveResult } from "lit-html/directive.js";
+/**
+ * A factory function that produces the `TemplateResult` to render.
+ * Only called when the keys have changed.
+ */
+export type MemoTemplateFn = () => TemplateResult;
+/**
+ * The keys array. Each element is compared with `Object.is` against the
+ * previous render's value at the same index.
+ *
+ * - Primitive keys (strings, numbers, booleans, symbols) are compared by value.
+ * - Object / array keys are compared by reference — if you want deep equality
+ *   you should derive a primitive key (e.g. a serialised id or version number).
+ */
+export type MemoKeys = readonly unknown[];
+/**
+ * `memoTemplate(keys, templateFn)` — a child-part directive that only calls
+ * `templateFn` when one or more of the `keys` have changed since the last
+ * render. When the keys are identical the previously rendered `TemplateResult`
+ * is returned as-is, and lit-html skips the DOM diff entirely.
+ *
+ * ### Key comparison
+ * Each key is compared with `Object.is` (value equality for primitives,
+ * reference equality for objects). A change in the length of the keys array
+ * is always treated as a change.
+ *
+ * ### When to use this
+ * Use `memoTemplate` to wrap expensive subtrees that depend on a known,
+ * finite set of values. It is the direct equivalent of React's
+ * `React.memo` / `useMemo` but expressed at the *template level*.
+ *
+ * ### Difference from lit-html's built-in `guard`
+ * `guard` is a thin lit-html built-in that does the same key-check but
+ * provides no TypeScript ergonomics, no named API, and no place to hook
+ * into the mates directive ecosystem. `memoTemplate` is idiomatic mates —
+ * built on `AsyncDirective` so it participates in the full
+ * connect/disconnect lifecycle.
+ *
+ * @param keys       - Array of values to watch. Template only re-renders when
+ *                     at least one value changes (compared via `Object.is`).
+ * @param templateFn - Zero-argument factory that returns the `TemplateResult`
+ *                     to render. Only called when keys have changed.
+ *
+ * @example
+ * // ── Basic — skip re-render when `user` reference is unchanged ────────────
+ * html`
+ *   <section>
+ *     ${memoTemplate([user], () => html`
+ *       <h2>${user.name}</h2>
+ *       <p>${user.bio}</p>
+ *     `)}
+ *   </section>
+ * `
+ *
+ * // ── Multiple keys ─────────────────────────────────────────────────────────
+ * html`
+ *   <ul>
+ *     ${items.val.map(item =>
+ *       memoTemplate([item.id, item.label, isSelected(item.id)], () => html`
+ *         <li class="${isSelected(item.id) ? 'active' : ''}">${item.label}</li>
+ *       `)
+ *     )}
+ *   </ul>
+ * `
+ *
+ * // ── Atom values as keys ───────────────────────────────────────────────────
+ * const count = atom(0);
+ * const theme = atom('light');
+ *
+ * html`
+ *   <div>
+ *     ${memoTemplate([count.val, theme.val], () => html`
+ *       <span class="${theme.val}">${count.val}</span>
+ *     `)}
+ *   </div>
+ * `
+ *
+ * // ── Empty keys array — renders once, never again ──────────────────────────
+ * html`
+ *   <footer>
+ *     ${memoTemplate([], () => html`<p>© ${new Date().getFullYear()} Acme</p>`)}
+ *   </footer>
+ * `
+ *
+ * // ── Single primitive key ─────────────────────────────────────────────────
+ * html`
+ *   <div>
+ *     ${memoTemplate([userId], () => expensiveUserCard(userId))}
+ *   </div>
+ * `
+ */
+export declare function memoTemplate(keys: MemoKeys, templateFn: MemoTemplateFn): DirectiveResult;
+//# sourceMappingURL=memoTemplate.d.ts.map

package/dist/types/lib/Directives/memoTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoTemplate.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/memoTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,uBAAuB,CAAC;AAK/B;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,cAAc,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,CAAC;AA8E1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAc,GACzB,eAAe,CAEjB"}

package/dist/types/lib/Directives/onDirective.d.ts

@@ -0,0 +1,71 @@
+/** Callback for the custom `enterViewport` event (IntersectionObserver). */
+export type EnterViewportHandler = (entry: IntersectionObserverEntry) => void;
+/** Callback for the custom `exitViewport` event (IntersectionObserver). */
+export type ExitViewportHandler = (entry: IntersectionObserverEntry) => void;
+/** Callback for the custom `clickOutside` event (mousedown outside element). */
+export type ClickOutsideHandler = (event: MouseEvent) => void;
+export interface MatesCustomEventMap {
+    /** Fires when the element enters the viewport (via IntersectionObserver). */
+    enterViewport: EnterViewportHandler;
+    /** Fires when the element exits the viewport (via IntersectionObserver). */
+    exitViewport: ExitViewportHandler;
+    /** Fires when the user clicks outside of this element. */
+    clickOutside: ClickOutsideHandler;
+}
+/**
+ * Full event handler map merging standard HTMLElement events with mates-specific
+ * custom events. Each key is an event name and each value is the handler
+ * function. All entries are optional.
+ */
+export type OnEventMap = {
+    [K in keyof HTMLElementEventMap]?: (event: HTMLElementEventMap[K]) => void;
+} & {
+    [K in keyof MatesCustomEventMap]?: MatesCustomEventMap[K];
+};
+/**
+ * Declarative event-binding directive for lit-html templates.
+ *
+ * Accepts a map of DOM event names (type-safe) plus mates-specific custom
+ * events: `enterViewport`, `exitViewport`, and `clickOutside`.
+ *
+ * Listeners and observers are created once and reused across re-renders.
+ * If a handler's identity changes, only the handler reference is swapped —
+ * the underlying listener / observer stays intact (no teardown/recreate).
+ * Handlers that are removed from the map between renders are cleaned up.
+ *
+ * When the host element is disconnected from the DOM, all listeners and
+ * observers are automatically torn down. They are re-created on the next
+ * render after reconnection.
+ *
+ * For element-level resize observation, use the `onResize` lifecycle hook
+ * instead.
+ *
+ * @example
+ * ```ts
+ * import { html } from "mates";
+ * import { on } from "mates";
+ *
+ * html`
+ *   <div ${on({
+ *     click(e) { console.log("clicked", e.clientX) },
+ *     mouseenter() { console.log("hover in") },
+ *     mouseleave() { console.log("hover out") },
+ *     enterViewport(entry) { console.log("visible!", entry.intersectionRatio) },
+ *     exitViewport(entry) { console.log("hidden!") },
+ *     clickOutside(e) { console.log("clicked outside", e.target) },
+ *   })}>
+ *     Interactive element
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function on(events: OnEventMap): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * Imperatively tears down all event listeners and observers bound by `on()`
+ * on the given element. Useful when you need to clean up before the element
+ * is naturally disconnected from the DOM.
+ *
+ * Safe to call on elements that never had `on()` applied.
+ */
+export declare function removeOn(el: Element): void;
+//# sourceMappingURL=onDirective.d.ts.map

package/dist/types/lib/Directives/onDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/onDirective.ts"],"names":[],"mappings":"AAWA,4EAA4E;AAC5E,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;AAE9E,2EAA2E;AAC3E,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;AAE7E,gFAAgF;AAChF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAI9D,MAAM,WAAW,mBAAmB;IAClC,6EAA6E;IAC7E,aAAa,EAAE,oBAAoB,CAAC;IACpC,4EAA4E;IAC5E,YAAY,EAAE,mBAAmB,CAAC;IAClC,0DAA0D;IAC1D,YAAY,EAAE,mBAAmB,CAAC;CACnC;AAID;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;KACtB,CAAC,IAAI,MAAM,mBAAmB,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI;CAC3E,GAAG;KACD,CAAC,IAAI,MAAM,mBAAmB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;CAC1D,CAAC;AA+KF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,mGAEpC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAE1C"}

package/dist/types/lib/Directives/onParentDirective.d.ts

@@ -0,0 +1,34 @@
+import type { MatesRef } from "../Mutables/ref/ref";
+type AnyEventName = keyof HTMLElementEventMap;
+export type OnParentMap = {
+    [K in AnyEventName]?: (event: HTMLElementEventMap[K]) => void;
+};
+/**
+ * Attaches event listeners to a parent (or any ancestor) element via a
+ * `MatesRef`, scoped to the lifetime of the element the directive is on.
+ *
+ * - Listeners are bound as soon as the ref's element becomes available.
+ * - If the host element disconnects, all listeners are removed automatically.
+ * - Handler identity changes are handled via ref-swap — no rebind overhead.
+ *
+ * @example
+ * ```ts
+ * import { ref, setRef, onParent } from "@mates";
+ *
+ * const listRef = ref<HTMLUListElement>();
+ *
+ * html`
+ *   <ul ${setRef(listRef)}>
+ *     <li ${onParent(listRef, {
+ *       click(e) { console.log("delegated click", e.target) },
+ *       keydown(e) { if (e.key === "Enter") select(e.target) },
+ *     })}>
+ *       Item
+ *     </li>
+ *   </ul>
+ * `;
+ * ```
+ */
+export declare function onParent(target: MatesRef<HTMLElement>, events: OnParentMap): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+export {};
+//# sourceMappingURL=onParentDirective.d.ts.map

package/dist/types/lib/Directives/onParentDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onParentDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/onParentDirective.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMpD,KAAK,YAAY,GAAG,MAAM,mBAAmB,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG;KACvB,CAAC,IAAI,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI;CAC9D,CAAC;AA6CF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,mGAE1E"}

package/dist/types/lib/Directives/renderSwitch.d.ts

@@ -0,0 +1,55 @@
+import { nothing, type TemplateResult } from "lit-html";
+/**
+ * A `[condition, template]` tuple — the condition is evaluated and when
+ * `true` its template is returned by {@link renderSwitch}.
+ */
+export type SwitchEntry = readonly [
+    condition: boolean,
+    template: TemplateResult
+];
+/**
+ * One item in the array passed to {@link renderSwitch}.
+ *
+ * Either:
+ * - `[condition, template]` — a conditional branch.
+ * - `TemplateResult`        — an unconditional fallback (typically placed last).
+ */
+export type SwitchCase = SwitchEntry | TemplateResult;
+/**
+ * `renderSwitch` — return the template for the first truthy branch.
+ *
+ * Iterates `cases` in order:
+ * - **`[condition, template]`** — if `condition` is truthy, `template` is returned.
+ * - **`TemplateResult`** — returned unconditionally (acts as a default / fallback).
+ *
+ * If no branch matches and there is no fallback, `nothing` is returned so the
+ * call site produces no DOM output.
+ *
+ * TypeScript narrows each element to either `SwitchEntry` (a 2-tuple) or
+ * `TemplateResult` — both can be inferred without explicit type annotations at
+ * the call site.
+ *
+ * @example
+ * ```ts
+ * // Three tabs + a fallback shown when no tab is active
+ * html`${renderSwitch([
+ *   [tab === "home",     html`<home-panel></home-panel>`],
+ *   [tab === "settings", html`<settings-panel></settings-panel>`],
+ *   [tab === "profile",  html`<profile-panel></profile-panel>`],
+ *   html`<p>Select a tab to get started.</p>`,   // ← default
+ * ])}`
+ *
+ * // Without a default — returns nothing when no condition is met
+ * html`${renderSwitch([
+ *   [isAdmin,  html`<admin-tools></admin-tools>`],
+ *   [isEditor, html`<editor-bar></editor-bar>`],
+ * ])}`
+ * ```
+ *
+ * @param cases  Ordered list of `[condition, template]` entries and/or a
+ *               plain `TemplateResult` default.
+ * @returns      The first matching `TemplateResult`, or `nothing` when
+ *               no branch matches.
+ */
+export declare function renderSwitch(cases: readonly SwitchCase[]): TemplateResult | typeof nothing;
+//# sourceMappingURL=renderSwitch.d.ts.map

package/dist/types/lib/Directives/renderSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSwitch.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/renderSwitch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAIxD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS;IACjC,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,cAAc;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,SAAS,UAAU,EAAE,GAC3B,cAAc,GAAG,OAAO,OAAO,CAYjC"}

package/dist/types/lib/Directives/resolveAttrValue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The value type accepted by the `attr()` directive for a single attribute.
+ *
+ * - `string | number`           — set the attribute to that value
+ * - `boolean`                   — true → set to "", false → remove
+ * - `null | undefined`          — remove the attribute
+ * - `[condition, val]`          — conditional: set when truthy, remove when falsy
+ * - `[condition, trueVal, falseVal]` — ternary
+ */
+export type AttrValue = string | number | boolean | null | undefined | [unknown, string | number | boolean] | [unknown, string | number | boolean, string | number | boolean];
+/** A map of attribute names to their values. */
+export type AttrMap = Record<string, AttrValue>;
+/**
+ * Resolve a single attribute value to either a set-action (with a string value)
+ * or a remove-action.
+ *
+ * This is a pure function with zero dependencies — safe to import from anywhere.
+ *
+ * @example
+ * resolveAttrValue("hello")        // { action: "set", value: "hello" }
+ * resolveAttrValue(42)             // { action: "set", value: "42" }
+ * resolveAttrValue(true)           // { action: "set", value: "" }
+ * resolveAttrValue(false)          // { action: "remove" }
+ * resolveAttrValue(null)           // { action: "remove" }
+ * resolveAttrValue([true, "yes"])  // { action: "set", value: "yes" }
+ * resolveAttrValue([false, "yes"]) // { action: "remove" }
+ * resolveAttrValue([true, "a", "b"]) // { action: "set", value: "a" }
+ */
+export declare function resolveAttrValue(value: AttrValue): {
+    action: "set";
+    value: string;
+} | {
+    action: "remove";
+};
+//# sourceMappingURL=resolveAttrValue.d.ts.map

package/dist/types/lib/Directives/resolveAttrValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAttrValue.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/resolveAttrValue.ts"],"names":[],"mappings":"AAOA;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GACpC,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEpE,gDAAgD;AAChD,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,GACf;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,QAAQ,CAAA;CAAE,CAmCzD"}

package/dist/types/lib/Directives/styleDirective.d.ts

@@ -0,0 +1,81 @@
+import type * as CSS from "csstype";
+/**
+ * A plain style value — a string or number (numbers are treated as px for
+ * length-based properties, but we leave that to the browser).
+ */
+type PlainValue = string | number;
+/**
+ * Conditional style value (2-element tuple):
+ *   [condition, value]
+ * The style is only applied when `condition` is truthy.
+ */
+type ConditionalValue = [condition: unknown, value: PlainValue];
+/**
+ * Ternary style value (3-element tuple):
+ *   [condition, trueValue, falseValue]
+ * Applies `trueValue` when condition is truthy, `falseValue` otherwise.
+ */
+type TernaryValue = [
+    condition: unknown,
+    trueValue: PlainValue,
+    falseValue: PlainValue
+];
+/**
+ * Every value in the style map can be:
+ *  - a plain string / number (always applied)
+ *  - a 2-element array  → [condition, value]         (conditional)
+ *  - a 3-element array  → [condition, ifTrue, ifFalse] (ternary)
+ *  - undefined / null / false (ignored)
+ */
+export type StyleValue = PlainValue | ConditionalValue | TernaryValue | undefined | null | false;
+/**
+ * The style map accepted by the `style()` directive.
+ *
+ * Keys are camelCase CSS property names (type-safe via csstype) OR
+ * kebab-case strings (for custom properties like `--my-var`).
+ */
+export type StyleMap = {
+    [K in keyof CSS.Properties]?: StyleValue;
+} & {
+    /** Allow arbitrary kebab-case or custom property names. */
+    [key: string]: StyleValue;
+};
+/**
+ * Declarative, conditional style directive for lit-html templates.
+ *
+ * Accepts a map of CSS property names to values. Values can be:
+ *  - **plain**: always applied (`color: "red"`)
+ *  - **conditional** (2-element array): applied only when condition is truthy
+ *    (`color: [isError, "red"]`)
+ *  - **ternary** (3-element array): picks between two values
+ *    (`color: [isError, "red", "green"]`)
+ *
+ * Properties whose conditions are falsy (or whose keys are removed between
+ * renders) are automatically cleaned up from the element's inline style.
+ *
+ * @example
+ * ```ts
+ * import { html } from "mates";
+ * import { style } from "mates";
+ *
+ * const isEnabled = true;
+ * const isError = false;
+ *
+ * html`
+ *   <div ${style({
+ *     color: [isEnabled, "red"],
+ *     background: "white",
+ *     fontWeight: [isError, "bold", "normal"],
+ *     "--custom-var": "42px",
+ *     opacity: [isEnabled, 1, 0.5],
+ *   })}>
+ *     Styled content
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function style(styles: StyleMap): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/** No-op — kept for backwards compatibility. */
+export declare function removeStyle(_el: Element): void;
+export {};
+//# sourceMappingURL=styleDirective.d.ts.map

package/dist/types/lib/Directives/styleDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/styleDirective.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AAKpC;;;GAGG;AACH,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAElC;;;;GAIG;AACH,KAAK,gBAAgB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;AAEhE;;;;GAIG;AACH,KAAK,YAAY,GAAG;IAClB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE,UAAU;CACvB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,gBAAgB,GAChB,YAAY,GACZ,SAAS,GACT,IAAI,GACJ,KAAK,CAAC;AAEV;;;;;GAKG;AACH,MAAM,MAAM,QAAQ,GAAG;KACpB,CAAC,IAAI,MAAM,GAAG,CAAC,UAAU,CAAC,CAAC,EAAE,UAAU;CACzC,GAAG;IACF,2DAA2D;IAC3D,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAgBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,QAAQ,mGAErC;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAG"}

package/dist/types/lib/Directives/timerDirective.d.ts

@@ -0,0 +1,52 @@
+export type TimerContent = () => unknown;
+/**
+ * A self-ticking directive that updates a child part on a fixed interval
+ * without triggering a component re-render.
+ *
+ * The callback can return anything lit-html can render — a `TemplateResult`,
+ * a plain string, a number, etc.
+ *
+ * The interval is automatically cleared when the host element is removed
+ * from the DOM, and restarted when it reconnects.
+ *
+ * If `ms` changes between renders, the interval is restarted with the new
+ * duration.
+ *
+ * @param callback - Function called on every tick. Return value is rendered.
+ * @param ms       - Interval in milliseconds. Required. Minimum 16ms (one frame
+ *                   at 60fps) — values below this are rejected with an error
+ *                   since the browser cannot paint any faster.
+ *
+ * @example
+ * ```ts
+ * import { html } from "@mates";
+ * import { timer } from "@mates";
+ *
+ * // Live clock — updates every second, no component re-render
+ * html`
+ *   <div>
+ *     Time: ${timer(() => new Date().toLocaleTimeString(), 1000)}
+ *   </div>
+ * `;
+ *
+ * // Countdown
+ * const end = Date.now() + 60_000;
+ * html`
+ *   <span>
+ *     ${timer(() => {
+ *       const remaining = Math.max(0, Math.ceil((end - Date.now()) / 1000));
+ *       return remaining === 0 ? "Done!" : `${remaining}s`;
+ *     }, 1000)}
+ *   </span>
+ * `;
+ *
+ * // Dynamic HTML content
+ * html`
+ *   <div>
+ *     ${timer(() => html`<strong>${new Date().toLocaleTimeString()}</strong>`, 500)}
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function timer(callback: TimerContent, ms: number): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+//# sourceMappingURL=timerDirective.d.ts.map

package/dist/types/lib/Directives/timerDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timerDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/timerDirective.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC;AA+CzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,mGAEvD"}

package/dist/types/lib/Directives/virtualHelpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Virtual scrolling helpers — now backed by the forked @lit-labs/virtualizer
+ * engine (see lib/virtualizer).
+ *
+ * Key upgrade: `virtualList` no longer requires `itemHeight`. The FlowLayout
+ * uses ResizeObserver to measure each child's actual rendered height, so items
+ * can be any height — fixed, dynamic, or content-driven.
+ */
+export { type VirtualGridOptions, type VirtualItemTemplate, type VirtualKeyFn, type VirtualListOptions, type VirtualMasonryOptions, virtualGrid, virtualList, virtualMasonry, } from "../virtualizer/mates-adapter.js";
+//# sourceMappingURL=virtualHelpers.d.ts.map

package/dist/types/lib/Directives/virtualHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualHelpers.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/virtualHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,iCAAiC,CAAC"}

package/dist/types/lib/Fetch/ErrorTypes.d.ts

@@ -0,0 +1,74 @@
+export declare const ErrorTypes: {
+    readonly 100: "CONTINUE";
+    readonly 101: "SWITCHING_PROTOCOLS";
+    readonly 102: "PROCESSING";
+    readonly 103: "EARLY_HINTS";
+    readonly 200: "OK";
+    readonly 201: "CREATED";
+    readonly 202: "ACCEPTED";
+    readonly 203: "NON_AUTHORITATIVE_INFORMATION";
+    readonly 204: "NO_CONTENT";
+    readonly 205: "RESET_CONTENT";
+    readonly 206: "PARTIAL_CONTENT";
+    readonly 207: "MULTI_STATUS";
+    readonly 208: "ALREADY_REPORTED";
+    readonly 226: "IM_USED";
+    readonly 300: "MULTIPLE_CHOICES";
+    readonly 301: "MOVED_PERMANENTLY";
+    readonly 302: "FOUND";
+    readonly 303: "SEE_OTHER";
+    readonly 304: "NOT_MODIFIED";
+    readonly 305: "USE_PROXY";
+    readonly 307: "TEMPORARY_REDIRECT";
+    readonly 308: "PERMANENT_REDIRECT";
+    readonly 400: "BAD_REQUEST";
+    readonly 401: "UNAUTHORIZED";
+    readonly 402: "PAYMENT_REQUIRED";
+    readonly 403: "FORBIDDEN";
+    readonly 404: "NOT_FOUND";
+    readonly 405: "METHOD_NOT_ALLOWED";
+    readonly 406: "NOT_ACCEPTABLE";
+    readonly 407: "PROXY_AUTHENTICATION_REQUIRED";
+    readonly 408: "REQUEST_TIMEOUT";
+    readonly 409: "CONFLICT";
+    readonly 410: "GONE";
+    readonly 411: "LENGTH_REQUIRED";
+    readonly 412: "PRECONDITION_FAILED";
+    readonly 413: "PAYLOAD_TOO_LARGE";
+    readonly 414: "URI_TOO_LONG";
+    readonly 415: "UNSUPPORTED_MEDIA_TYPE";
+    readonly 416: "RANGE_NOT_SATISFIABLE";
+    readonly 417: "EXPECTATION_FAILED";
+    readonly 418: "IM_A_TEAPOT";
+    readonly 421: "MISDIRECTED_REQUEST";
+    readonly 422: "UNPROCESSABLE_ENTITY";
+    readonly 423: "LOCKED";
+    readonly 424: "FAILED_DEPENDENCY";
+    readonly 425: "TOO_EARLY";
+    readonly 426: "UPGRADE_REQUIRED";
+    readonly 428: "PRECONDITION_REQUIRED";
+    readonly 429: "TOO_MANY_REQUESTS";
+    readonly 431: "REQUEST_HEADER_FIELDS_TOO_LARGE";
+    readonly 451: "UNAVAILABLE_FOR_LEGAL_REASONS";
+    readonly 500: "INTERNAL_SERVER_ERROR";
+    readonly 501: "NOT_IMPLEMENTED";
+    readonly 502: "BAD_GATEWAY";
+    readonly 503: "SERVICE_UNAVAILABLE";
+    readonly 504: "GATEWAY_TIMEOUT";
+    readonly 505: "HTTP_VERSION_NOT_SUPPORTED";
+    readonly 506: "VARIANT_ALSO_NEGOTIATES";
+    readonly 507: "INSUFFICIENT_STORAGE";
+    readonly 508: "LOOP_DETECTED";
+    readonly 510: "NOT_EXTENDED";
+    readonly 511: "NETWORK_AUTHENTICATION_REQUIRED";
+};
+export type ErrorType = (typeof ErrorTypes)[keyof typeof ErrorTypes];
+/**
+ * Checks if a status code indicates a successful API response.
+ * Returns true for status codes in the 200-299 range (2xx Success).
+ *
+ * @param statusCode - The HTTP status code to check
+ * @returns true if the status code indicates success (2xx), false otherwise
+ */
+export declare function isApiResponseSuccess(statusCode: number): boolean;
+//# sourceMappingURL=ErrorTypes.d.ts.map

package/dist/types/lib/Fetch/ErrorTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTypes.d.ts","sourceRoot":"","sources":["../../../../../lib/Fetch/ErrorTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEb,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEhE"}