@easemate/web-kit 0.1.0

package/build/utils/dismiss-controller.d.cts

@@ -0,0 +1,14 @@
+export interface DismissContext {
+    owner: HTMLElement;
+    content?: HTMLElement | null;
+    triggers?: Array<HTMLElement | null | undefined>;
+}
+export interface DismissControllerOptions {
+    onDismiss: (event: Event) => void;
+}
+export declare class DismissController {
+    #private;
+    constructor(options: DismissControllerOptions);
+    connect(context: DismissContext): void;
+    disconnect(): void;
+}

package/build/utils/dismiss-controller.d.ts

@@ -0,0 +1,14 @@
+export interface DismissContext {
+    owner: HTMLElement;
+    content?: HTMLElement | null;
+    triggers?: Array<HTMLElement | null | undefined>;
+}
+export interface DismissControllerOptions {
+    onDismiss: (event: Event) => void;
+}
+export declare class DismissController {
+    #private;
+    constructor(options: DismissControllerOptions);
+    connect(context: DismissContext): void;
+    disconnect(): void;
+}

package/build/utils/dismiss-controller.js

@@ -0,0 +1,73 @@
+export class DismissController {
+    #onDismiss;
+    #context = null;
+    #active = false;
+    constructor(options) {
+        this.#onDismiss = options.onDismiss;
+    }
+    connect(context) {
+        this.#context = {
+            owner: context.owner,
+            content: context.content ?? null,
+            triggers: (context.triggers ?? []).filter((el) => el instanceof HTMLElement)
+        };
+        if (!this.#active) {
+            document.addEventListener('pointerdown', this.#handlePointerDown, true);
+            document.addEventListener('keydown', this.#handleKeyDown, true);
+            this.#active = true;
+        }
+    }
+    disconnect() {
+        if (!this.#active) {
+            return;
+        }
+        document.removeEventListener('pointerdown', this.#handlePointerDown, true);
+        document.removeEventListener('keydown', this.#handleKeyDown, true);
+        this.#active = false;
+        this.#context = null;
+    }
+    #handlePointerDown = (event) => {
+        if (!this.#context) {
+            return;
+        }
+        const { owner, content, triggers } = this.#context;
+        const path = event.composedPath();
+        if (path.some((node) => node instanceof Element && node.hasAttribute('data-select-ignore'))) {
+            return;
+        }
+        if (path.includes(owner)) {
+            return;
+        }
+        if (content && path.includes(content)) {
+            return;
+        }
+        if (triggers.some((trigger) => path.includes(trigger))) {
+            return;
+        }
+        this.#onDismiss(event);
+    };
+    #handleKeyDown = (event) => {
+        if (event.key !== 'Escape' || !this.#context) {
+            return;
+        }
+        event.preventDefault();
+        const active = document.activeElement;
+        if (!active) {
+            this.#onDismiss(event);
+            return;
+        }
+        const { owner, content, triggers } = this.#context;
+        const path = event.composedPath();
+        if (path.includes(owner) || owner.contains(active)) {
+            this.#onDismiss(event);
+            return;
+        }
+        if (content && (path.includes(content) || content.contains(active))) {
+            this.#onDismiss(event);
+            return;
+        }
+        if (triggers.some((trigger) => path.includes(trigger) || trigger.contains(active))) {
+            this.#onDismiss(event);
+        }
+    };
+}

package/build/utils/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.when = exports.unsafeHTML = exports.styleObject = exports.styleMap = exports.repeat = exports.renderList = exports.renderIf = exports.optionalAttribute = exports.ifDefined = exports.classMap = exports.createOutsideClickHandle = exports.DismissController = void 0;
+var dismiss_controller_1 = require("./dismiss-controller.cjs");
+Object.defineProperty(exports, "DismissController", { enumerable: true, get: function () { return dismiss_controller_1.DismissController; } });
+var outside_click_1 = require("./outside-click.cjs");
+Object.defineProperty(exports, "createOutsideClickHandle", { enumerable: true, get: function () { return outside_click_1.createOutsideClickHandle; } });
+var template_helpers_1 = require("./template-helpers.cjs");
+Object.defineProperty(exports, "classMap", { enumerable: true, get: function () { return template_helpers_1.classMap; } });
+Object.defineProperty(exports, "ifDefined", { enumerable: true, get: function () { return template_helpers_1.ifDefined; } });
+Object.defineProperty(exports, "optionalAttribute", { enumerable: true, get: function () { return template_helpers_1.optionalAttribute; } });
+Object.defineProperty(exports, "renderIf", { enumerable: true, get: function () { return template_helpers_1.renderIf; } });
+Object.defineProperty(exports, "renderList", { enumerable: true, get: function () { return template_helpers_1.renderList; } });
+Object.defineProperty(exports, "repeat", { enumerable: true, get: function () { return template_helpers_1.repeat; } });
+Object.defineProperty(exports, "styleMap", { enumerable: true, get: function () { return template_helpers_1.styleMap; } });
+Object.defineProperty(exports, "styleObject", { enumerable: true, get: function () { return template_helpers_1.styleObject; } });
+Object.defineProperty(exports, "unsafeHTML", { enumerable: true, get: function () { return template_helpers_1.unsafeHTML; } });
+Object.defineProperty(exports, "when", { enumerable: true, get: function () { return template_helpers_1.when; } });

package/build/utils/index.d.cts

@@ -0,0 +1,3 @@
+export { DismissController } from "./dismiss-controller.cjs";
+export { createOutsideClickHandle } from "./outside-click.cjs";
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./template-helpers.cjs";

package/build/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { DismissController } from "./dismiss-controller.js";
+export { createOutsideClickHandle } from "./outside-click.js";
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./template-helpers.js";

package/build/utils/index.js

@@ -0,0 +1,3 @@
+export { DismissController } from "./dismiss-controller.js";
+export { createOutsideClickHandle } from "./outside-click.js";
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./template-helpers.js";

package/build/utils/outside-click.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestOutsideClickUpdate = exports.disconnectOutsideClickHandles = exports.updateOutsideClickHandles = exports.registerOutsideClickHandle = exports.createOutsideClickHandle = void 0;
+const dismiss_controller_1 = require("./dismiss-controller.cjs");
+const registry = new WeakMap();
+const toDismissContext = (host, options) => {
+    if (options.disabled?.(host)) {
+        return null;
+    }
+    const resolved = options.resolve(host);
+    if (!resolved) {
+        return null;
+    }
+    const owner = resolved.owner ?? host ?? null;
+    if (!(owner instanceof HTMLElement)) {
+        return null;
+    }
+    const content = resolved.content && resolved.content instanceof HTMLElement ? resolved.content : null;
+    const triggers = resolved.triggers?.filter((element) => element instanceof HTMLElement) ?? [];
+    return {
+        owner,
+        content,
+        triggers
+    };
+};
+const createOutsideClickHandle = (host, onDismiss, options) => {
+    const controller = new dismiss_controller_1.DismissController({
+        onDismiss(event) {
+            if (options.disabled?.(host)) {
+                return;
+            }
+            onDismiss.call(host, event);
+        }
+    });
+    return {
+        update() {
+            const context = toDismissContext(host, options);
+            if (!context) {
+                controller.disconnect();
+                return;
+            }
+            controller.connect(context);
+        },
+        disconnect() {
+            controller.disconnect();
+        }
+    };
+};
+exports.createOutsideClickHandle = createOutsideClickHandle;
+const registerOutsideClickHandle = (host, handle) => {
+    let handles = registry.get(host);
+    if (!handles) {
+        handles = new Set();
+        registry.set(host, handles);
+    }
+    handles.add(handle);
+};
+exports.registerOutsideClickHandle = registerOutsideClickHandle;
+const updateOutsideClickHandles = (host) => {
+    const handles = registry.get(host);
+    if (!handles) {
+        return;
+    }
+    handles.forEach((handle) => {
+        handle.update();
+    });
+};
+exports.updateOutsideClickHandles = updateOutsideClickHandles;
+const disconnectOutsideClickHandles = (host) => {
+    const handles = registry.get(host);
+    if (!handles) {
+        return;
+    }
+    handles.forEach((handle) => {
+        handle.disconnect();
+    });
+};
+exports.disconnectOutsideClickHandles = disconnectOutsideClickHandles;
+const requestOutsideClickUpdate = (host) => {
+    (0, exports.updateOutsideClickHandles)(host);
+};
+exports.requestOutsideClickUpdate = requestOutsideClickUpdate;

package/build/utils/outside-click.d.cts

@@ -0,0 +1,18 @@
+export interface OutsideClickResolution {
+    owner?: HTMLElement | null | undefined;
+    content?: HTMLElement | null | undefined;
+    triggers?: Array<HTMLElement | null | undefined>;
+}
+export interface OutsideClickHandle {
+    update(): void;
+    disconnect(): void;
+}
+export interface OutsideClickHandleOptions<THost extends HTMLElement> {
+    resolve: (host: THost) => OutsideClickResolution | null | undefined;
+    disabled?: (host: THost) => boolean;
+}
+export declare const createOutsideClickHandle: <THost extends HTMLElement>(host: THost, onDismiss: (this: THost, event: Event) => void, options: OutsideClickHandleOptions<THost>) => OutsideClickHandle;
+export declare const registerOutsideClickHandle: (host: HTMLElement, handle: OutsideClickHandle) => void;
+export declare const updateOutsideClickHandles: (host: HTMLElement) => void;
+export declare const disconnectOutsideClickHandles: (host: HTMLElement) => void;
+export declare const requestOutsideClickUpdate: (host: HTMLElement) => void;

package/build/utils/outside-click.d.ts

@@ -0,0 +1,18 @@
+export interface OutsideClickResolution {
+    owner?: HTMLElement | null | undefined;
+    content?: HTMLElement | null | undefined;
+    triggers?: Array<HTMLElement | null | undefined>;
+}
+export interface OutsideClickHandle {
+    update(): void;
+    disconnect(): void;
+}
+export interface OutsideClickHandleOptions<THost extends HTMLElement> {
+    resolve: (host: THost) => OutsideClickResolution | null | undefined;
+    disabled?: (host: THost) => boolean;
+}
+export declare const createOutsideClickHandle: <THost extends HTMLElement>(host: THost, onDismiss: (this: THost, event: Event) => void, options: OutsideClickHandleOptions<THost>) => OutsideClickHandle;
+export declare const registerOutsideClickHandle: (host: HTMLElement, handle: OutsideClickHandle) => void;
+export declare const updateOutsideClickHandles: (host: HTMLElement) => void;
+export declare const disconnectOutsideClickHandles: (host: HTMLElement) => void;
+export declare const requestOutsideClickUpdate: (host: HTMLElement) => void;

package/build/utils/outside-click.js

@@ -0,0 +1,74 @@
+import { DismissController } from "./dismiss-controller.js";
+const registry = new WeakMap();
+const toDismissContext = (host, options) => {
+    if (options.disabled?.(host)) {
+        return null;
+    }
+    const resolved = options.resolve(host);
+    if (!resolved) {
+        return null;
+    }
+    const owner = resolved.owner ?? host ?? null;
+    if (!(owner instanceof HTMLElement)) {
+        return null;
+    }
+    const content = resolved.content && resolved.content instanceof HTMLElement ? resolved.content : null;
+    const triggers = resolved.triggers?.filter((element) => element instanceof HTMLElement) ?? [];
+    return {
+        owner,
+        content,
+        triggers
+    };
+};
+export const createOutsideClickHandle = (host, onDismiss, options) => {
+    const controller = new DismissController({
+        onDismiss(event) {
+            if (options.disabled?.(host)) {
+                return;
+            }
+            onDismiss.call(host, event);
+        }
+    });
+    return {
+        update() {
+            const context = toDismissContext(host, options);
+            if (!context) {
+                controller.disconnect();
+                return;
+            }
+            controller.connect(context);
+        },
+        disconnect() {
+            controller.disconnect();
+        }
+    };
+};
+export const registerOutsideClickHandle = (host, handle) => {
+    let handles = registry.get(host);
+    if (!handles) {
+        handles = new Set();
+        registry.set(host, handles);
+    }
+    handles.add(handle);
+};
+export const updateOutsideClickHandles = (host) => {
+    const handles = registry.get(host);
+    if (!handles) {
+        return;
+    }
+    handles.forEach((handle) => {
+        handle.update();
+    });
+};
+export const disconnectOutsideClickHandles = (host) => {
+    const handles = registry.get(host);
+    if (!handles) {
+        return;
+    }
+    handles.forEach((handle) => {
+        handle.disconnect();
+    });
+};
+export const requestOutsideClickUpdate = (host) => {
+    updateOutsideClickHandles(host);
+};

package/build/utils/template-helpers.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionalAttribute = exports.ifDefined = exports.unsafeHTML = exports.repeat = exports.when = exports.styleMap = exports.classMap = void 0;
+exports.renderIf = renderIf;
+exports.renderList = renderList;
+exports.styleObject = styleObject;
+const lit_html_1 = require("lit-html");
+const class_map_js_1 = require("lit-html/directives/class-map.js");
+Object.defineProperty(exports, "classMap", { enumerable: true, get: function () { return class_map_js_1.classMap; } });
+const if_defined_js_1 = require("lit-html/directives/if-defined.js");
+Object.defineProperty(exports, "ifDefined", { enumerable: true, get: function () { return if_defined_js_1.ifDefined; } });
+const repeat_js_1 = require("lit-html/directives/repeat.js");
+Object.defineProperty(exports, "repeat", { enumerable: true, get: function () { return repeat_js_1.repeat; } });
+const style_map_js_1 = require("lit-html/directives/style-map.js");
+Object.defineProperty(exports, "styleMap", { enumerable: true, get: function () { return style_map_js_1.styleMap; } });
+const unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
+Object.defineProperty(exports, "unsafeHTML", { enumerable: true, get: function () { return unsafe_html_js_1.unsafeHTML; } });
+const when_js_1 = require("lit-html/directives/when.js");
+Object.defineProperty(exports, "when", { enumerable: true, get: function () { return when_js_1.when; } });
+function renderIf(condition, template) {
+    if (!condition) {
+        return lit_html_1.nothing;
+    }
+    return typeof template === 'function' ? template() : template;
+}
+function renderList(items, template, key = (item) => item) {
+    return (0, repeat_js_1.repeat)(items, key, template);
+}
+function styleObject(input) {
+    const definedEntries = Object.entries(input).reduce((acc, [property, value]) => {
+        if (value === null || value === undefined || value === '') {
+            return acc;
+        }
+        acc[property] = typeof value === 'number' ? `${value}` : value;
+        return acc;
+    }, {});
+    return (0, style_map_js_1.styleMap)(definedEntries);
+}
+exports.optionalAttribute = if_defined_js_1.ifDefined;

package/build/utils/template-helpers.d.cts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit-html';
+import { nothing } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { when } from 'lit-html/directives/when.js';
+export { classMap, styleMap, when, repeat, unsafeHTML, ifDefined };
+export declare function renderIf<T>(condition: T | undefined | null, template: TemplateResult | (() => TemplateResult)): TemplateResult | typeof nothing;
+export declare function renderList<T>(items: readonly T[], template: (item: T, index: number) => TemplateResult, key?: (item: T, index: number) => unknown): ReturnType<typeof repeat>;
+export declare function styleObject(input: Record<string, string | number | null | undefined>): ReturnType<typeof styleMap>;
+export declare const optionalAttribute: <T>(value: T) => typeof nothing | NonNullable<T>;

package/build/utils/template-helpers.d.ts

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit-html';
+import { nothing } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { when } from 'lit-html/directives/when.js';
+export { classMap, styleMap, when, repeat, unsafeHTML, ifDefined };
+export declare function renderIf<T>(condition: T | undefined | null, template: TemplateResult | (() => TemplateResult)): TemplateResult | typeof nothing;
+export declare function renderList<T>(items: readonly T[], template: (item: T, index: number) => TemplateResult, key?: (item: T, index: number) => unknown): ReturnType<typeof repeat>;
+export declare function styleObject(input: Record<string, string | number | null | undefined>): ReturnType<typeof styleMap>;
+export declare const optionalAttribute: <T>(value: T) => typeof nothing | NonNullable<T>;

package/build/utils/template-helpers.js

@@ -0,0 +1,28 @@
+import { nothing } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { when } from 'lit-html/directives/when.js';
+export { classMap, styleMap, when, repeat, unsafeHTML, ifDefined };
+export function renderIf(condition, template) {
+    if (!condition) {
+        return nothing;
+    }
+    return typeof template === 'function' ? template() : template;
+}
+export function renderList(items, template, key = (item) => item) {
+    return repeat(items, key, template);
+}
+export function styleObject(input) {
+    const definedEntries = Object.entries(input).reduce((acc, [property, value]) => {
+        if (value === null || value === undefined || value === '') {
+            return acc;
+        }
+        acc[property] = typeof value === 'number' ? `${value}` : value;
+        return acc;
+    }, {});
+    return styleMap(definedEntries);
+}
+export const optionalAttribute = ifDefined;

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@easemate/web-kit",
+  "version": "0.1.0",
+  "description": "Web components for easemate - a UI kit for animation libraries",
+  "type": "module",
+  "files": [
+    "build"
+  ],
+  "sideEffects": [
+    "./build/register.js",
+    "./build/register.cjs",
+    "./build/styles/**/*.css"
+  ],
+  "scripts": {
+    "clean": "rm -rf build",
+    "build": "npm run clean && zshy",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check src test",
+    "lint:fix": "biome check src test --write",
+    "format": "biome format src test",
+    "format:fix": "biome format src test --write",
+    "typecheck": "tsc --noEmit",
+    "prepare": "zshy"
+  },
+  "keywords": [
+    "ui",
+    "web-components",
+    "typescript",
+    "animation",
+    "controls",
+    "leva",
+    "lil-gui"
+  ],
+  "author": "Aaron Iker",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/easemate/web-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/easemate/web-kit/issues"
+  },
+  "homepage": "https://github.com/easemate/web-kit#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "lit-html": "^3.2.1"
+  },
+  "zshy": {
+    "exports": {
+      ".": "./src/index.ts",
+      "./elements": "./src/elements/index.ts",
+      "./decorators": "./src/decorators/index.ts",
+      "./utils": "./src/utils/index.ts",
+      "./theme": "./src/theme/index.ts",
+      "./register": "./src/register.ts"
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./build/index.d.cts",
+      "import": "./build/index.js",
+      "require": "./build/index.cjs"
+    },
+    "./elements": {
+      "types": "./build/elements/index.d.cts",
+      "import": "./build/elements/index.js",
+      "require": "./build/elements/index.cjs"
+    },
+    "./decorators": {
+      "types": "./build/decorators/index.d.cts",
+      "import": "./build/decorators/index.js",
+      "require": "./build/decorators/index.cjs"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.cts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.cjs"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.cts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.cjs"
+    },
+    "./register": {
+      "types": "./build/register.d.cts",
+      "import": "./build/register.js",
+      "require": "./build/register.cjs"
+    }
+  },
+  "main": "./build/index.cjs",
+  "types": "./build/index.d.cts",
+  "module": "./build/index.js"
+}