mates-devtools 0.1.0-beta.1

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

@@ -0,0 +1,79 @@
+/**
+ * A single entry in the `classes()` array or values in a class map.
+ *
+ * Accepts strings and the falsy values that fall out of JS conditional
+ * expressions — no pre-filtering needed at the call site.
+ *
+ * Also accepts tuples for conditional application:
+ *   [true, "btn"]           — apply "btn" if true
+ *   [false, "btn"]          — don't apply "btn" if false
+ *   [condition, "a", "b"]   — apply "a" if condition, else "b"
+ *
+ * ```ts
+ * html`<div ${classes([
+ *   "btn",
+ *   isActive && "btn-active",
+ *   [isLarge, "btn-lg", "btn-sm"],
+ * ])}></div>`
+ * ```
+ *
+ * `0` is included so that numeric short-circuit expressions (`count && "cls"`)
+ * compile without a cast when `count` is zero.
+ */
+export type ClassEntry = string | false | null | undefined | 0 | [boolean, string] | [boolean, string, string];
+export type ClassesInput = string | ClassEntry[] | Record<string, any>;
+/**
+ * Apply a dynamic list of class names to an element.
+ *
+ * Used as an **element directive**:
+ *
+ * ```ts
+ * html`<div ${classes(["btn", "btn-primary"])}></div>`
+ * ```
+ *
+ * Falsy values (`false`, `null`, `undefined`) are silently ignored, so
+ * inline JS conditions work without any manual filtering:
+ *
+ * ```ts
+ * html`<div ${classes([
+ *   "card",
+ *   isActive && "card-active",
+ *   isError  && "card-error",
+ *   isLarge  ? "card-lg" : "card-sm",
+ * ])}></div>`
+ * ```
+ *
+ * Also supports conditional and ternary tuples for cleaner syntax:
+ *
+ * ```ts
+ * html`<div ${classes([
+ *   "card",
+ *   [isActive, "card-active"],           // conditional tuple
+ *   [isLarge, "card-lg", "card-sm"],     // ternary tuple
+ * ])}></div>`
+ * ```
+ *
+ * Or an object map for class name mapping:
+ *
+ * ```ts
+ * html`<div ${classes({
+ *   [cl.hero]: isHero,
+ *   [cl.button]: isButton,
+ * })}></div>`
+ * ```
+ *
+ * Stale classes are removed automatically on every re-render. All managed
+ * classes are cleaned up when the element disconnects from the DOM.
+ *
+ * @param names - Array of class entries or object map of classes.
+ *   - Array elements can be:
+ *     - Strings (applied as-is)
+ *     - Falsy values (silently ignored)
+ *     - `[condition, "class"]` (apply class if condition is truthy)
+ *     - `[condition, "classA", "classB"]` (apply classA if true, else classB)
+ *   - Object keys are applied if their values are truthy.
+ */
+export declare function classes(names: ClassesInput): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/** No-op — kept for backwards compatibility. */
+export declare function removeClasses(_el: Element): void;
+//# sourceMappingURL=classesDirective.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"classesDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/classesDirective.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,KAAK,GACL,IAAI,GACJ,SAAS,GACT,CAAC,GACD,CAAC,OAAO,EAAE,MAAM,CAAC,GACjB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAyFvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,mGAE1C;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAG"}

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

@@ -0,0 +1,84 @@
+import type { DirectiveResult } from "lit-html/directive.js";
+import { type DollarChain } from "./$";
+/**
+ * Lifecycle object returned from the `eleHook` mount callback.
+ *
+ * - `onUpdate`  — called on every re-render after the initial mount,
+ *                 receiving the latest args passed at the call site.
+ * - `onCleanup` — called when the element is disconnected from the DOM.
+ *
+ * @template A - Tuple of user-supplied argument types.
+ */
+export type EleHookLifecycle<A extends any[] = []> = {
+    /** Called on every re-render after the initial mount with the latest args. */
+    onUpdate?: (...args: A) => void;
+    /** Called when the element is disconnected from the DOM. */
+    onCleanup?: () => void;
+};
+/**
+ * The mount callback signature for `eleHook()`.
+ *
+ * The first argument `$` (DollarChain) is always injected automatically —
+ * it is a fluent handle bound to the host element. Any additional arguments
+ * are the user-supplied values passed at the template call site.
+ *
+ * Return an `EleHookLifecycle` object to handle updates and cleanup,
+ * or return nothing if the mount body is all you need.
+ *
+ * @template A - Tuple of user-supplied argument types.
+ */
+export type EleHookMountFn<A extends any[] = []> = ($: DollarChain, ...args: A) => EleHookLifecycle<A> | undefined | void;
+/**
+ * `eleHook()` — create a reusable element-part directive that gives you
+ * full `$` (DollarChain) access to the host element.
+ *
+ * Returns a **function** that accepts user-supplied arguments and produces
+ * a lit-html directive result. Define the hook once, use it anywhere.
+ *
+ * The first argument to the mount callback (`$`) is always injected — it is
+ * a `DollarChain` bound to the host element. Any extra parameters you define
+ * become the arguments the returned function accepts at the call site, and
+ * they flow through to `onUpdate` on every re-render.
+ *
+ * While the mount callback or lifecycle methods are executing,
+ * `componentRunningStatus.isHookRunning` is set to `true`.
+ *
+ * @example
+ * ```ts
+ * // ── No args ──────────────────────────────────────────────────────
+ * const ripple = eleHook(($) => {
+ *   $.on("click", (e) => { /* ripple animation *​/ });
+ *   $.classes("has-ripple");
+ *   return { onCleanup() { $.removeClass("has-ripple"); } };
+ * });
+ * html`<button ${ripple()}>Click me</button>`
+ *
+ * // ── With args ────────────────────────────────────────────────────
+ * const highlight = eleHook(($, color: string, pulse: boolean) => {
+ *   $.style({ backgroundColor: color });
+ *   if (pulse) $.classes("pulse");
+ *   return {
+ *     onUpdate(nextColor, nextPulse) {
+ *       $.style({ backgroundColor: nextColor });
+ *       nextPulse ? $.addClass("pulse") : $.removeClass("pulse");
+ *     },
+ *   };
+ * });
+ * html`<div ${highlight(color.val, isPulsing.val)}>Highlighted</div>`
+ *
+ * // ── Replacing attr() directive ───────────────────────────────────
+ * const myAttr = eleHook(($, attrs: AttrMap) => {
+ *   $.attr(attrs);
+ *   return { onUpdate(next) { $.attr(next); } };
+ * });
+ * html`<div ${myAttr({ disabled: true, role: "button" })}></div>`
+ * ```
+ *
+ * @template A - Tuple of user-supplied argument types.
+ * @param mountFn - Called once on first mount. Receives `$` (DollarChain)
+ *                  followed by the user-supplied args.
+ * @returns A function that accepts the user args and produces a directive result.
+ */
+export declare function eleHook<A extends any[] = []>(mountFn: EleHookMountFn<A>): (...args: A) => DirectiveResult;
+export type { DirectiveResult };
+//# sourceMappingURL=eleHook.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eleHook.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/eleHook.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAK,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAI1C;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,IAAI;IACnD,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,IAAI,CACjD,CAAC,EAAE,WAAW,EACd,GAAG,IAAI,EAAE,CAAC,KACP,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;AAoB5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,EAC1C,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GACzB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,eAAe,CAmEjC;AAED,YAAY,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,29 @@
+/** A mutable ref container so we can swap handler identity without rebinding. */
+export interface HandlerRef<T extends Function = Function> {
+    current: T | undefined;
+}
+/** Tracks a single bound event — its cleanup fn and handler ref for swapping. */
+export interface BoundEntry {
+    handler: Function;
+    cleanup: () => void;
+    handlerRef?: HandlerRef;
+}
+/**
+ * Bind a single event listener on any EventTarget (element, window, document).
+ * Uses a stable wrapper + handlerRef so the handler can be swapped on re-render
+ * without touching the DOM listener.
+ */
+export declare function bindEvent(target: EventTarget, eventName: string, handler: Function): BoundEntry;
+export declare function unbindEntry(entry: BoundEntry): void;
+export declare function unbindAll(entries: Map<string, BoundEntry>): void;
+/**
+ * Sync a map of event handlers onto a target element.
+ *
+ * - First-time keys: bound via `bindEvent`
+ * - Existing keys with changed handler: handler ref is swapped, no rebind
+ * - Keys removed from the map: unbound and deleted from entries
+ *
+ * Returns the updated entries map (same reference, mutated in place).
+ */
+export declare function syncEvents(target: EventTarget, events: Record<string, Function | undefined>, entries: Map<string, BoundEntry>): void;
+//# sourceMappingURL=eventBinding.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eventBinding.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/eventBinding.ts"],"names":[],"mappings":"AAEA,iFAAiF;AACjF,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IACvD,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;CACxB;AAED,iFAAiF;AACjF,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,QAAQ,GAChB,UAAU,CAcZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAEnD;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,IAAI,CAKhE;AAID;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC,EAC5C,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GAC/B,IAAI,CA2BN"}

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

@@ -0,0 +1,101 @@
+import type { TemplateResult } from "lit-html";
+import type { DirectiveResult } from "lit-html/directive.js";
+/**
+ * Lifecycle object returned from the `htmlHook` mount callback.
+ *
+ * - `onUpdate`  — called on every re-render after the initial mount,
+ *                 receiving the latest args passed at the call site.
+ * - `onCleanup` — called when the element is disconnected from the DOM.
+ *
+ * @template A - Tuple of user-supplied argument types.
+ */
+export type HtmlHookLifecycle<A extends any[] = []> = {
+    /** Called on every re-render after the initial mount with the latest args. */
+    onUpdate?: (...args: A) => void;
+    /** Called when the element is disconnected from the DOM. */
+    onCleanup?: () => void;
+};
+/**
+ * The render function passed to the `htmlHook` mount callback.
+ * Call this to push a lit-html template into the child part slot.
+ * Can be called synchronously during mount, or asynchronously later
+ * (from timers, fetch callbacks, observers, etc.).
+ */
+export type HtmlHookRenderFn = (template: TemplateResult) => void;
+/**
+ * The mount callback signature for `htmlHook()`.
+ *
+ * The first argument `render` is always injected automatically — it pushes
+ * templates into the child slot. Any additional arguments are the
+ * user-supplied values passed at the template call site.
+ *
+ * Return an `HtmlHookLifecycle` object to handle updates and cleanup,
+ * or return nothing if the mount body is all you need.
+ *
+ * @template A - Tuple of user-supplied argument types.
+ */
+export type HtmlHookMountFn<A extends any[] = []> = (render: HtmlHookRenderFn, ...args: A) => HtmlHookLifecycle<A> | void;
+/**
+ * `htmlHook()` — create a reusable child-part directive that lets you
+ * render HTML templates into a slot.
+ *
+ * Returns a **function** that accepts user-supplied arguments and produces
+ * a lit-html directive result. Define the hook once, use it anywhere.
+ *
+ * The first argument to the mount callback (`render`) is always injected —
+ * it pushes a `TemplateResult` into the child slot. Any extra parameters
+ * you define become the arguments the returned function accepts at the
+ * call site, and they flow through to `onUpdate` on every re-render.
+ *
+ * The `render` function can be called:
+ * - **Synchronously** during mount (content appears immediately)
+ * - **Asynchronously** from timers, fetch callbacks, observers, etc.
+ *
+ * While the mount callback or lifecycle methods are executing,
+ * `componentRunningStatus.isHookRunning` is set to `true`.
+ *
+ * @example
+ * ```ts
+ * // ── No args ──────────────────────────────────────────────────────
+ * const greeting = htmlHook((render) => {
+ *   render(html`<h1>Hello, World!</h1>`);
+ * });
+ * html`<div>${greeting()}</div>`
+ *
+ * // ── With args ────────────────────────────────────────────────────
+ * const userCard = htmlHook((render, name: string, role: string) => {
+ *   render(html`<div class="card">${name} — ${role}</div>`);
+ *   return {
+ *     onUpdate(nextName, nextRole) {
+ *       render(html`<div class="card">${nextName} — ${nextRole}</div>`);
+ *     },
+ *   };
+ * });
+ * html`<section>${userCard(user.name, user.role)}</section>`
+ *
+ * // ── Async usage ──────────────────────────────────────────────────
+ * const asyncData = htmlHook((render, url: string) => {
+ *   render(html`<p>Loading...</p>`);
+ *   fetch(url)
+ *     .then(r => r.json())
+ *     .then(data => render(html`<pre>${JSON.stringify(data)}</pre>`));
+ *   return {
+ *     onUpdate(nextUrl) {
+ *       render(html`<p>Loading...</p>`);
+ *       fetch(nextUrl)
+ *         .then(r => r.json())
+ *         .then(data => render(html`<pre>${JSON.stringify(data)}</pre>`));
+ *     },
+ *     onCleanup() { /* cancel in-flight requests *​/ },
+ *   };
+ * });
+ * html`<div>${asyncData(currentUrl.val)}</div>`
+ * ```
+ *
+ * @template A - Tuple of user-supplied argument types.
+ * @param mountFn - Called once on first mount. Receives `render()` followed
+ *                  by the user-supplied args.
+ * @returns A function that accepts the user args and produces a directive result.
+ */
+export declare function htmlHook<A extends any[] = []>(mountFn: HtmlHookMountFn<A>): (...args: A) => DirectiveResult;
+//# sourceMappingURL=htmlHook.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"htmlHook.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/htmlHook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,uBAAuB,CAAC;AAM/B;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,IAAI;IACpD,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;AAElE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,IAAI,CAClD,MAAM,EAAE,gBAAgB,EACxB,GAAG,IAAI,EAAE,CAAC,KACP,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;AAoBjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,EAC3C,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAC1B,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,eAAe,CA8FjC"}

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

@@ -0,0 +1,18 @@
+export { $, type DollarChain } from "./$";
+export { type AnimatedIfConfig, type AnimatedXConfig, animatedIf, animatedX, } from "./animatedConditional";
+export { type AttrMap, type AttrValue, attr, removeAttr, } from "./attrDirective";
+export { type ClassEntry, type ClassesInput, classes, removeClasses, } from "./classesDirective";
+export { type EleHookLifecycle, type EleHookMountFn, eleHook } from "./eleHook";
+export { type HtmlHookLifecycle, type HtmlHookMountFn, type HtmlHookRenderFn, htmlHook, } from "./htmlHook";
+export { type IntersectCallback, type IntersectOptions, onHidden, onIntersect, onVisible, } from "./intersectDirective";
+export { type LazyLoadCallback, type LazyLoadOptions, lazyLoad, onScrolledIntoView, type ScrolledIntoViewCallback, type ScrolledIntoViewOptions, } from "./lazyLoadDirective";
+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 OnParentMap, onParent } from "./onParentDirective";
+export { renderSwitch, type SwitchCase, type SwitchEntry, } from "./renderSwitch";
+export { removeStyle, type StyleMap, type StyleValue, style, } from "./styleDirective";
+export { type TimerContent, timer } from "./timerDirective";
+export { type VirtualGridOptions, type VirtualListOptions, type VirtualMasonryOptions, virtualGrid, virtualList, virtualMasonry, } from "./virtualHelpers";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,67 @@
+export type IntersectCallback = () => void;
+export interface IntersectOptions {
+    /** Called every time the element enters the viewport. */
+    onVisible?: IntersectCallback;
+    /** Called every time the element leaves the viewport. */
+    onHidden?: IntersectCallback;
+    /**
+     * Margin around the viewport in CSS syntax (e.g. `"200px"` or `"10%"`).
+     * Positive values trigger callbacks before the element fully crosses the
+     * viewport edge. Default: `"0px"`.
+     */
+    rootMargin?: string;
+    /**
+     * Intersection ratio threshold (0–1) at which callbacks fire.
+     * Default: `0`.
+     */
+    threshold?: number;
+}
+/**
+ * Attach an `IntersectionObserver` to an element and respond to both
+ * enter and exit viewport transitions.
+ *
+ * ```ts
+ * html`<div ${onIntersect({
+ *   onVisible() { player.play(); },
+ *   onHidden()  { player.pause(); },
+ * })}></div>`
+ *
+ * // With options
+ * html`<div ${onIntersect({
+ *   onVisible() { prefetch(); },
+ *   rootMargin: "200px",
+ * })}></div>`
+ * ```
+ */
+export declare function onIntersect(options: IntersectOptions): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * Fire `callback` every time the element enters the viewport.
+ *
+ * ```ts
+ * // Infinite scroll sentinel
+ * html`<div ${onVisible(() => loadNextPage())}></div>`
+ *
+ * // Prefetch before fully visible
+ * html`<div ${onVisible(() => prefetch(), { rootMargin: "300px" })}></div>`
+ * ```
+ *
+ * @param callback  - Called on every enter transition.
+ * @param options   - Optional `rootMargin` / `threshold` tuning.
+ */
+export declare function onVisible(callback: IntersectCallback, options?: Pick<IntersectOptions, "rootMargin" | "threshold">): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * Fire `callback` every time the element leaves the viewport.
+ *
+ * ```ts
+ * // Pause when out of view
+ * html`<video ${onHidden(() => video.pause())}></video>`
+ *
+ * // Track when an ad leaves the screen
+ * html`<div ${onHidden(() => trackExit())}></div>`
+ * ```
+ *
+ * @param callback  - Called on every exit transition.
+ * @param options   - Optional `rootMargin` / `threshold` tuning.
+ */
+export declare function onHidden(callback: IntersectCallback, options?: Pick<IntersectOptions, "rootMargin" | "threshold">): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+//# sourceMappingURL=intersectDirective.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"intersectDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/intersectDirective.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,gBAAgB,mGAEpD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CACvB,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,mGAG7D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,mGAG7D"}

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

@@ -0,0 +1,66 @@
+export type ScrolledIntoViewCallback = () => void;
+export interface ScrolledIntoViewOptions {
+    /**
+     * Margin around the viewport in CSS syntax (e.g. `"200px"` or `"10%"`).
+     * Positive values trigger the callback before the element is fully visible.
+     * Default: `"0px"`
+     */
+    rootMargin?: string;
+    /**
+     * Intersection ratio threshold (0–1) at which the callback fires.
+     * Default: `0`
+     */
+    threshold?: number;
+}
+/** @deprecated Use `ScrolledIntoViewCallback` instead. */
+export type LazyLoadCallback = ScrolledIntoViewCallback;
+/** @deprecated Use `ScrolledIntoViewOptions` instead. */
+export type LazyLoadOptions = ScrolledIntoViewOptions;
+/**
+ * Fires `callback` each time the element transitions from hidden to visible
+ * in the viewport (a genuine invisible → visible crossing).
+ *
+ * - Does **not** fire on mount if the element is already in view.
+ * - Fires **again** every time the element re-enters the viewport after
+ *   having left it — useful for infinite scroll, repeat animations, etc.
+ * - The `IntersectionObserver` is torn down automatically when the element
+ *   disconnects from the DOM — no manual cleanup needed.
+ * - `options` are fixed at creation time and cannot change between renders;
+ *   only the `callback` reference is updated on re-renders.
+ *
+ * @param callback - Called whenever the element scrolls into view.
+ * @param options  - Optional `IntersectionObserver` tuning.
+ *
+ * @example
+ * ```ts
+ * // Infinite scroll — load next page when sentinel enters the viewport
+ * html`<div ${onScrolledIntoView(() => loadNextPage())}></div>`
+ *
+ * // Animate on enter
+ * html`<section ${onScrolledIntoView(() => el.classList.add("fade-in"))}></section>`
+ *
+ * // Lazy-load a heavy image
+ * html`<img ${onScrolledIntoView(() => { img.src = img.dataset.src!; })}
+ *      data-src="/heavy.jpg" />`
+ *
+ * // Prefetch 300px before the element becomes visible
+ * html`<div ${onScrolledIntoView(() => prefetch(), { rootMargin: "300px" })}></div>`
+ *
+ * // Fire only when at least 50% of the element is visible
+ * html`<div ${onScrolledIntoView(() => trackImpression(), { threshold: 0.5 })}></div>`
+ * ```
+ */
+export declare function onScrolledIntoView(callback: ScrolledIntoViewCallback, options?: ScrolledIntoViewOptions): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * @deprecated Use `onScrolledIntoView()` instead.
+ *
+ * ```ts
+ * // Before
+ * html`<div ${lazyLoad(() => loadMore())}></div>`
+ *
+ * // After
+ * html`<div ${onScrolledIntoView(() => loadMore())}></div>`
+ * ```
+ */
+export declare function lazyLoad(callback: LazyLoadCallback, options?: LazyLoadOptions): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+//# sourceMappingURL=lazyLoadDirective.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lazyLoadDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/lazyLoadDirective.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,wBAAwB,GAAG,MAAM,IAAI,CAAC;AAElD,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC;AAExD,yDAAyD;AACzD,MAAM,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAgEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,wBAAwB,EAClC,OAAO,CAAC,EAAE,uBAAuB,mGAGlC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,CAAC,EAAE,eAAe,mGAG1B"}

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

@@ -0,0 +1,56 @@
+export type ConnectCallback = (el: HTMLElement) => void;
+export type DisconnectCallback = (el: HTMLElement) => void;
+export type UpdateCallback = (el: HTMLElement) => void;
+/**
+ * Fires the callback once when the element is first connected to the DOM.
+ * If the element is removed and re-added, the callback fires again.
+ *
+ * Useful for fetching data, focusing elements, or starting animations
+ * when a conditionally-rendered element appears.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div ${onConnect((el) => fetchData())}>
+ *     ${content()}
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function onConnect(callback: ConnectCallback): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * Fires the callback when the element is removed from the DOM.
+ * Always uses the latest callback passed — no stale closure issues.
+ *
+ * Useful for teardown logic on conditionally-rendered elements,
+ * cancelling in-flight requests, or saving state before removal.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div ${onDisconnect((el) => cancelRequest())}>
+ *     ${content()}
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function onDisconnect(callback: DisconnectCallback): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/**
+ * Fires the callback on every re-render after the initial mount.
+ * Skips the first render (use `onConnect` for that).
+ * Resets after disconnection, so the first render after reconnect is
+ * also skipped.
+ *
+ * Useful for reacting to prop/state changes on a mounted element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div ${onUpdate((el) => syncScroll(el))}>
+ *     ${items()}
+ *   </div>
+ * `;
+ * ```
+ */
+export declare function onUpdate(callback: UpdateCallback): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+//# sourceMappingURL=lifecycleDirectives.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycleDirectives.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/lifecycleDirectives.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;AA+CvD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,eAAe,mGAElD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,kBAAkB,mGAExD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,cAAc,mGAEhD"}

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

@@ -0,0 +1,114 @@
+import type { TemplateResult } from "lit-html";
+/**
+ * Options for `masonryGrid`.
+ */
+export interface MasonryGridOptions {
+    /**
+     * Number of columns.
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * Gap between items in pixels.
+     * @default 12
+     */
+    gap?: number;
+    /**
+     * Optional CSS class applied to the outer container.
+     */
+    containerClass?: string;
+    /**
+     * Optional inline styles merged onto the outer container.
+     */
+    containerStyle?: string;
+}
+/**
+ * Render function for each item in the masonry grid.
+ * Receives the item and its index in the source array.
+ */
+export type MasonryItemTemplate<T> = (item: T, index: number) => TemplateResult;
+/**
+ * Key function for stable item identity (same as lit-html's KeyFn).
+ */
+export type MasonryKeyFn<T> = (item: T, index: number) => unknown;
+/**
+ * `masonryGrid` — pure CSS masonry layout using `column-count`.
+ *
+ * No virtualisation, no JavaScript layout computation — just CSS columns.
+ * Every item is rendered in the DOM and the browser handles column
+ * distribution and reflow automatically.
+ *
+ * Best for small-to-medium lists (< 500 items) where you want a true
+ * masonry look without the complexity of virtualisation. For large lists,
+ * use `virtualMasonry` or `repeatVirtual` with `layout: { type: "masonry" }`
+ * instead.
+ *
+ * ---
+ *
+ * ## Syntax
+ *
+ * Same overloaded signatures as `repeat`:
+ *
+ * ```ts
+ * // Without key function
+ * html`<div>
+ *   ${masonryGrid(
+ *     photos,
+ *     (photo) => html`<img src=${photo.url} style="width:100%;border-radius:8px;" />`,
+ *     { columns: 4, gap: 16 },
+ *   )}
+ * </div>`
+ *
+ * // With key function (recommended)
+ * html`<div>
+ *   ${masonryGrid(
+ *     photos,
+ *     (photo) => photo.id,
+ *     (photo) => html`
+ *       <div style="border-radius:8px;overflow:hidden;">
+ *         <img src=${photo.url} style="width:100%;display:block;" />
+ *         <p style="padding:8px;margin:0;">${photo.title}</p>
+ *       </div>
+ *     `,
+ *     { columns: 3, gap: 12 },
+ *   )}
+ * </div>`
+ * ```
+ *
+ * ---
+ *
+ * ## Options
+ *
+ * | Option           | Type     | Default | Description                           |
+ * |------------------|----------|---------|---------------------------------------|
+ * | `columns`        | `number` | `3`     | Number of CSS columns.                |
+ * | `gap`            | `number` | `12`    | Gap (px) between columns and rows.    |
+ * | `containerClass` | `string` | `""`    | CSS class on the outer container.     |
+ * | `containerStyle` | `string` | `""`    | Extra inline styles on the container. |
+ *
+ * ---
+ *
+ * ## How it works
+ *
+ * Uses CSS `column-count` + `break-inside: avoid` on each item wrapper.
+ * This is the simplest masonry implementation — zero JS layout, zero
+ * absolute positioning, pure CSS column flow. Items fill columns
+ * top-to-bottom, left-to-right (browser's native column distribution).
+ *
+ * ### Caveats
+ *
+ * - **Column order is top-to-bottom, not left-to-right.** Item 1 goes
+ *   to column 1 top, item 2 below it, etc. — not item 1 col 1, item 2
+ *   col 2, item 3 col 3. This is how CSS columns work. If you need
+ *   left-to-right order, use `virtualMasonry` which uses JS layout.
+ *
+ * - **No virtualisation.** All items are in the DOM. For lists > 500 items,
+ *   use `virtualMasonry` or `repeatVirtual({ layout: { type: "masonry" } })`.
+ *
+ * - **Responsive columns** require re-rendering with a different `columns`
+ *   value — CSS `column-count` doesn't support `auto` based on width.
+ *   Use `onWindowResize` to update the column count reactively.
+ */
+export declare function masonryGrid<T>(items: readonly T[], template: MasonryItemTemplate<T>, options?: MasonryGridOptions): unknown;
+export declare function masonryGrid<T>(items: readonly T[], keyFn: MasonryKeyFn<T>, template: MasonryItemTemplate<T>, options?: MasonryGridOptions): unknown;
+//# sourceMappingURL=masonryGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masonryGrid.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/masonryGrid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAO/C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;AA2IlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC;AACX,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EACtB,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC"}