@seahax/elemental 0.1.0 → 0.2.0

package/README.md

@@ -1,16 +1,17 @@
 # @seahax/elemental
 
-Small building blocks with a lot of potential.
+Functional, reactive, web component base library.
 
-Extremely small reactive web components library, containing everything you really need to build anything up to a full reactive application, with only about 3KB overhead (depending on compression, minification, and tree-shaking).
+Contains everything you need to build anything from a single component up to a full reactive application, with only about 3KB overhead (depending on compression, minification, and tree-shaking).
 
+- Create fully portable web components
+- Direct and safe access to the DOM (no virtual DOM)
+- React-style list rendering using unique keys
+- React-style code reuse using composable hooks
+- Global & local state reactivity
+- Client-side routing
 - No Build Tooling
 - No Dependencies
-- Portable Web Components
-- Global & Local Reactivity
-- Efficient DOM Rendering
-- Functional Hooks
-- Routing
 
 ## Define A Web Component
 
@@ -147,6 +148,51 @@ const element = new MyComponent();
 element.checked = true;
 ```
 
+## Render An Element
+
+```ts
+// By tag name.
+const element = h('div', {
+  // Set attributes.
+  class: 'my-class',
+  // Set properties.
+  ':id': 'my-id',
+}, [
+  // Set children.
+  h('p', [text]),
+]);
+
+// By custom element constructor.
+const element = h(MyComponent, {
+  // Set attributes.
+  class: 'my-class',
+  // Set properties.
+  ':id': 'my-id',
+}, [
+  // Set children.
+  h('p', [text]),
+]);
+```
+
+## Update An Element
+
+```ts
+// Update an existing element.
+h(element, {
+  // Set attributes.
+  class: 'my-class',
+  // Remove attributes.
+  class: null,
+  // Set properties.
+  ':id': 'my-id',
+  // Attributes and properties that are not provided are left alone.
+}, [
+  // Replace all children. Children are left alone if no child array is
+  // provided (undefined or omitted).
+  h('p', [text]),
+]);
+```
+
 ## Render Lists With Keys
 
 ```ts

package/dist/component.js

@@ -0,0 +1,66 @@
+import { createCallbacks as e } from "./internal/callbacks.js";
+import { $$ref as t, $$renderContextStack as n } from "./internal/constants.js";
+//#region src/component.ts
+Object.assign(window, { [n]: [] });
+function r(r, i = {}) {
+	return class extends HTMLElement {
+		#e = e();
+		#t = e();
+		#n = i;
+		#r;
+		#i = !1;
+		constructor() {
+			super();
+			let e = this.#r = {};
+			if (this.#n.props) {
+				let t = this.#n.props;
+				for (let [n, r] of Object.entries(t)) {
+					if (n in this) continue;
+					let t = r(e[n] = this.#a(void 0), this);
+					Object.defineProperty(this, n, t);
+				}
+			}
+		}
+		connectedCallback() {
+			let e = this.attachShadow({
+				...this.#n.shadow,
+				mode: this.#n.shadow?.mode ?? "open"
+			});
+			try {
+				window[n].push({
+					host: this,
+					onDisconnect: this.#e,
+					onSetRef: this.#t,
+					useRef: this.#a
+				}), r(e, this.#r);
+			} finally {
+				window[n].pop();
+			}
+			this.#t.run();
+		}
+		disconnectedCallback() {
+			this.#t.clear(), this.#e.run({ clear: !0 });
+		}
+		#a = (e, n) => {
+			let r = this.#o, i = e;
+			return {
+				[t]: !0,
+				get value() {
+					return i;
+				},
+				set value(e) {
+					e !== i && (i = e, n?.(i), r());
+				}
+			};
+		};
+		#o = () => {
+			this.#i || (this.#i = !0, queueMicrotask(() => {
+				this.#i = !1, this.#t.run();
+			}));
+		};
+	};
+}
+//#endregion
+export { r as defineComponent };
+
+//# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":["#onDisconnect","#onSetRef","#options","#refs","#useRef","#notify","#notifying"],"sources":["../src/component.ts"],"sourcesContent":["import { type Callbacks, createCallbacks } from './internal/callbacks.ts';\nimport { $$ref, $$renderContextStack } from './internal/constants.ts';\n\ntype SafeProps<TProps> = any extends any\n  ? { [P in keyof TProps as P extends keyof HTMLElement ? never : P]: TProps[P] }\n  : never;\n\nexport interface ComponentConstructor<TProps extends object> {\n  new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n  readonly shadow?: Partial<ShadowRootInit>;\n  readonly props?: ComponentPropDescriptors<TProps>;\n}\n\nexport type ComponentPropDescriptors<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;\n};\n\nexport type ComponentPropDescriptorFactory<TType> = (\n  ref: Ref<TType | undefined>,\n  host: HTMLElement,\n) => ComponentPropDescriptor<TType>;\n\nexport interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'value' | 'get' | 'set'> {\n  get(): T;\n  set?(value: T): void;\n}\n\nexport type ComponentWithProps<TProps extends object> = HTMLElement & {\n  -readonly [P in keyof SafeProps<TProps>]: TProps[P];\n};\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n  readonly host: ComponentWithProps<TProps>;\n};\n\nexport type ComponentPropRefs<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: Ref<TProps[P] | undefined>;\n};\n\nexport interface Ref<T> extends ReadonlyRef<T> {\n  value: T;\n}\n\nexport interface ReadonlyRef<T> {\n  /** @hidden */\n  [$$ref]: unknown;\n  readonly value: T;\n}\n\nexport type RefValues<T> = T extends readonly any[]\n  ? { [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never }\n  : never;\n\ndeclare global {\n  interface Window {\n    readonly [$$renderContextStack]: {\n      readonly host: HTMLElement;\n      readonly onDisconnect: Callbacks;\n      readonly onSetRef: Callbacks;\n      readonly useRef: <T>(initialValue: T, onChange?: (value: T) => void) => Ref<T>;\n    }[];\n  }\n}\n\nObject.assign(window, { [$$renderContextStack]: [] });\n\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadow: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadow: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  options: ComponentOptions<Record<string, unknown>> = {},\n): new () => HTMLElement {\n  return class extends HTMLElement {\n    readonly #onDisconnect = createCallbacks();\n    readonly #onSetRef = createCallbacks();\n    readonly #options = options;\n    readonly #refs: ComponentPropRefs<Record<string, unknown>>;\n    #notifying = false;\n\n    constructor() {\n      super();\n      const refs: Record<string, Ref<unknown>> = (this.#refs = {});\n\n      if (this.#options.props) {\n        const descriptors = this.#options.props;\n\n        for (const [key, getDescriptor] of Object.entries(descriptors)) {\n          if (key in this) continue;\n          const ref = (refs[key] = this.#useRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n    }\n\n    protected connectedCallback(): void {\n      const shadow = this.attachShadow({ ...this.#options.shadow, mode: this.#options.shadow?.mode ?? 'open' });\n\n      try {\n        window[$$renderContextStack].push({\n          host: this,\n          onDisconnect: this.#onDisconnect,\n          onSetRef: this.#onSetRef,\n          useRef: this.#useRef,\n        });\n\n        render(shadow as ComponentShadowRoot<Record<string, unknown>>, this.#refs);\n      } finally {\n        window[$$renderContextStack].pop();\n      }\n\n      this.#onSetRef.run();\n    }\n\n    protected disconnectedCallback(): void {\n      this.#onSetRef.clear();\n      this.#onDisconnect.run({ clear: true });\n    }\n\n    readonly #useRef = <T>(initialValue: T, onChange?: (value: T) => void): Ref<T> => {\n      const notify = this.#notify;\n      let value = initialValue;\n\n      return {\n        [$$ref]: true,\n        get value() {\n          return value;\n        },\n        set value(newValue) {\n          if (newValue === value) return;\n          value = newValue;\n          onChange?.(value);\n          notify();\n        },\n      };\n    };\n\n    readonly #notify = (): void => {\n      if (this.#notifying) return;\n      this.#notifying = true;\n\n      queueMicrotask(() => {\n        this.#notifying = false;\n        this.#onSetRef.run();\n      });\n    };\n  };\n}\n"],"mappings":";;;AAmEA,OAAO,OAAO,QAAQ,GAAG,IAAuB,EAAE,EAAE,CAAC;AAOrD,SAAgB,EACd,GAIA,IAAqD,EAAE,EAChC;AACvB,QAAO,cAAc,YAAY;EAC/B,KAAyB,GAAiB;EAC1C,KAAqB,GAAiB;EACtC,KAAoB;EACpB;EACA,KAAa;EAEb,cAAc;AACZ,UAAO;GACP,IAAM,IAAsC,MAAA,IAAa,EAAE;AAE3D,OAAI,MAAA,EAAc,OAAO;IACvB,IAAM,IAAc,MAAA,EAAc;AAElC,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAY,EAAE;AAC9D,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADf,KAAO,MAAA,EAAkB,KAAA,EAAU,EACf,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;;EAKlD,oBAAoC;GAClC,IAAM,IAAS,KAAK,aAAa;IAAE,GAAG,MAAA,EAAc;IAAQ,MAAM,MAAA,EAAc,QAAQ,QAAQ;IAAQ,CAAC;AAEzG,OAAI;AAQF,IAPA,OAAO,GAAsB,KAAK;KAChC,MAAM;KACN,cAAc,MAAA;KACd,UAAU,MAAA;KACV,QAAQ,MAAA;KACT,CAAC,EAEF,EAAO,GAAwD,MAAA,EAAW;aAClE;AACR,WAAO,GAAsB,KAAK;;AAGpC,SAAA,EAAe,KAAK;;EAGtB,uBAAuC;AAErC,GADA,MAAA,EAAe,OAAO,EACtB,MAAA,EAAmB,IAAI,EAAE,OAAO,IAAM,CAAC;;EAGzC,MAAuB,GAAiB,MAA0C;GAChF,IAAM,IAAS,MAAA,GACX,IAAQ;AAEZ,UAAO;KACJ,IAAQ;IACT,IAAI,QAAQ;AACV,YAAO;;IAET,IAAI,MAAM,GAAU;AACd,WAAa,MACjB,IAAQ,GACR,IAAW,EAAM,EACjB,GAAQ;;IAEX;;EAGH,WAA+B;AACzB,SAAA,MACJ,MAAA,IAAkB,IAElB,qBAAqB;AAEnB,IADA,MAAA,IAAkB,IAClB,MAAA,EAAe,KAAK;KACpB"}

package/dist/hooks/core.js

@@ -0,0 +1,38 @@
+import { createCallbacks as e } from "../internal/callbacks.js";
+import { $$renderContextStack as t } from "../internal/constants.js";
+import "../component.js";
+//#region src/hooks/core.ts
+function n(e, t) {
+	return a().useRef(e, t);
+}
+function r(t, n) {
+	let { onSetRef: r, onDisconnect: i } = a(), o = e(), s = () => o.run({ clear: !0 }), c;
+	r.push(() => {
+		let e = t.map((e) => e.value);
+		if (c?.length === e.length && c?.every((t, n) => t === e[n])) return;
+		c = e, s();
+		let r = n(...c);
+		r && o.push(() => r());
+	}), i.push(s);
+}
+function i(...e) {
+	if (e.length === 0) return {};
+	let { host: t } = a(), i = Object.fromEntries(e.map((e) => [e, n(t.getAttribute(e), (n) => {
+		n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
+	})])), o = new MutationObserver((e) => {
+		for (let { attributeName: n } of e) n != null && Object.hasOwn(i, n) && (i[n].value = t.getAttribute(n));
+	});
+	return r([], () => (o.observe(t, {
+		attributeFilter: e,
+		attributes: !0
+	}), () => o.disconnect())), i;
+}
+function a() {
+	let e = window[t].at(-1);
+	if (!e) throw Error("hooks must be called inside a render function");
+	return e;
+}
+//#endregion
+export { i as useAttributes, r as useEffect, n as useRef };
+
+//# sourceMappingURL=core.js.map

package/dist/hooks/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","names":[],"sources":["../../src/hooks/core.ts"],"sourcesContent":["import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';\nimport { createCallbacks } from '../internal/callbacks.ts';\nimport { $$renderContextStack } from '../internal/constants.ts';\n\n/** Create an observable value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return getHookContext().useRef(initialValue, onChange);\n}\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onSetRef, onDisconnect } = getHookContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.run({ clear: true });\n  let values: any[] | undefined;\n\n  onSetRef.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/** Observe attribute changes. */\nexport function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>> {\n  if (names.length === 0) return {} as any;\n  const { host } = getHookContext();\n\n  const refs = Object.fromEntries(\n    names.map((name) => [\n      name,\n      useRef(host.getAttribute(name), (value) => {\n        if (value == null) host.removeAttribute(name);\n        else host.setAttribute(name, value);\n      }),\n    ]),\n  );\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refs[attributeName]!.value = host.getAttribute(attributeName);\n      }\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { attributeFilter: names, attributes: true });\n    return () => observer.disconnect();\n  });\n\n  return refs as Readonly<Record<TName, Ref<string | null>>>;\n}\n\nfunction getHookContext(): (typeof window)[typeof $$renderContextStack][0] {\n  const context = window[$$renderContextStack].at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAgB,CAAC,OAAO,GAAc,EAAS;;AAIxD,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAgB,EAC7C,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,IAAI,EAAE,OAAO,IAAM,CAAC,EAC5D;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ;;AAI5B,SAAgB,EAAoC,GAAG,GAA6D;AAClH,KAAI,EAAM,WAAW,EAAG,QAAO,EAAE;CACjC,IAAM,EAAE,YAAS,GAAgB,EAE3B,IAAO,OAAO,YAClB,EAAM,KAAK,MAAS,CAClB,GACA,EAAO,EAAK,aAAa,EAAK,GAAG,MAAU;AACzC,EAAI,KAAS,OAAM,EAAK,gBAAgB,EAAK,GACxC,EAAK,aAAa,GAAM,EAAM;GACnC,CACH,CAAC,CACH,EAEK,IAAW,IAAI,kBAAkB,MAAa;AAClD,OAAK,IAAM,EAAE,sBAAmB,EAC9B,CAAI,KAAiB,QAAQ,OAAO,OAAO,GAAM,EAAc,KAC7D,EAAK,GAAgB,QAAQ,EAAK,aAAa,EAAc;GAGjE;AAOF,QALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM;EAAE,iBAAiB;EAAO,YAAY;EAAM,CAAC,QACvD,EAAS,YAAY,EAClC,EAEK;;AAGT,SAAS,IAAkE;CACzE,IAAM,IAAU,OAAO,GAAsB,GAAG,GAAG;AACnD,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO"}

package/dist/hooks/loading.js

@@ -0,0 +1,31 @@
+import { useEffect as e, useRef as t } from "./core.js";
+//#region src/hooks/loading.ts
+function n(n, r, { debounceMs: i } = {}) {
+	let a = t({
+		loading: !0,
+		value: void 0,
+		error: void 0
+	}), o = !0;
+	return e(n, () => (...e) => {
+		let t = new AbortController();
+		return Promise.race(o ? [Promise.resolve()] : [new Promise((e) => setTimeout(e, i)), new Promise((e) => t.signal.addEventListener("abort", e, { once: !0 }))]).then(() => {
+			if (!t.signal.aborted) return r(t.signal, ...e);
+		}).then((e) => {
+			t.signal.aborted || (a.value = {
+				loading: !1,
+				value: e,
+				error: void 0
+			});
+		}).catch((e) => {
+			t.signal.aborted || (a.value = {
+				loading: !1,
+				value: void 0,
+				error: e
+			});
+		}), o = !1, () => t.abort();
+	}), e([], () => () => o = !0), a;
+}
+//#endregion
+export { n as useLoading };
+
+//# sourceMappingURL=loading.js.map

package/dist/hooks/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","names":[],"sources":["../../src/hooks/loading.ts"],"sourcesContent":["import type { ReadonlyRef, Ref, RefValues } from '../component.ts';\nimport { useEffect, useRef } from './core.ts';\n\nexport interface LoadingValue<TValue> {\n  readonly loading: boolean;\n  readonly value: TValue | undefined;\n  readonly error: unknown;\n}\n\nexport interface LoadingOptions {\n  readonly debounceMs?: number;\n}\n\n/** Load data asynchronously. */\nexport function useLoading<const TDeps extends readonly ReadonlyRef<any>[], TValue>(\n  deps: TDeps,\n  callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>,\n  { debounceMs }: LoadingOptions = {},\n): Ref<LoadingValue<TValue>> {\n  const ref = useRef<LoadingValue<TValue>>({ loading: true, value: undefined, error: undefined });\n  let skipDebounce = true;\n\n  useEffect(deps, () => (...values) => {\n    const ac = new AbortController();\n\n    Promise.race(\n      skipDebounce\n        ? [Promise.resolve()]\n        : [\n            new Promise((resolve) => setTimeout(resolve, debounceMs)),\n            new Promise((resolve) => ac.signal.addEventListener('abort', resolve, { once: true })),\n          ],\n    )\n      .then(() => {\n        if (ac.signal.aborted) return;\n        return callback(ac.signal, ...(values as any));\n      })\n      .then((value) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value, error: undefined };\n      })\n      .catch((error: unknown) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value: undefined, error };\n      });\n\n    skipDebounce = false;\n    return () => ac.abort();\n  });\n\n  // Skip the debounce again if the component unmounts.\n  useEffect([], () => () => (skipDebounce = true));\n\n  return ref;\n}\n"],"mappings":";;AAcA,SAAgB,EACd,GACA,GACA,EAAE,kBAA+B,EAAE,EACR;CAC3B,IAAM,IAAM,EAA6B;EAAE,SAAS;EAAM,OAAO,KAAA;EAAW,OAAO,KAAA;EAAW,CAAC,EAC3F,IAAe;AAiCnB,QA/BA,EAAU,UAAa,GAAG,MAAW;EACnC,IAAM,IAAK,IAAI,iBAAiB;AAwBhC,SAtBA,QAAQ,KACN,IACI,CAAC,QAAQ,SAAS,CAAC,GACnB,CACE,IAAI,SAAS,MAAY,WAAW,GAAS,EAAW,CAAC,EACzD,IAAI,SAAS,MAAY,EAAG,OAAO,iBAAiB,SAAS,GAAS,EAAE,MAAM,IAAM,CAAC,CAAC,CACvF,CACN,CACE,WAAW;AACN,UAAG,OAAO,QACd,QAAO,EAAS,EAAG,QAAQ,GAAI,EAAe;IAC9C,CACD,MAAM,MAAU;AACX,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,SAAS;IAAO;IAAO,OAAO,KAAA;IAAW;IACvD,CACD,OAAO,MAAmB;AACrB,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,SAAS;IAAO,OAAO,KAAA;IAAW;IAAO;IACvD,EAEJ,IAAe,UACF,EAAG,OAAO;GACvB,EAGF,EAAU,EAAE,cAAe,IAAe,GAAM,EAEzC"}

package/dist/hooks/route.d.ts

@@ -7,4 +7,4 @@ export type RouteMatchArray = readonly [string, ...string[]] & {
     readonly groups: Record<string, string>;
 };
 /** Observe route (window.history) changes. */
-export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): [match: Ref<RouteMatchArray | null>, state: Ref<unknown>];
+export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): Ref<RouteMatchArray | null>;

package/dist/hooks/route.js

@@ -0,0 +1,18 @@
+import { useEffect as e, useRef as t } from "./core.js";
+import { getRouter as n } from "../router.js";
+import { useStore as r } from "./store.js";
+//#region src/hooks/route.ts
+function i(i, { match: a = "prefix", source: o = "pathname" } = {}) {
+	let s = a === "exact" ? /^$/u : a === "prefix" ? /^.*$/u : a, c = Array.isArray(i) ? i : [i], l = r(n(), (e) => e[o]), u = t(d(l.value));
+	return e([l], (e) => {
+		u.value = d(e);
+	}), u;
+	function d(e) {
+		let t = c.find((t) => e.endsWith(t)) ?? null;
+		return t == null ? null : (e = e.slice(t.length), e.match(s));
+	}
+}
+//#endregion
+export { i as useRoute };
+
+//# sourceMappingURL=route.js.map

package/dist/hooks/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","names":[],"sources":["../../src/hooks/route.ts"],"sourcesContent":["import type { Ref } from '../component.ts';\nimport { getRouter } from '../router.ts';\nimport { useEffect, useRef } from './core.ts';\nimport { useStore } from './store.ts';\n\nexport interface RouteOptions {\n  readonly match?: 'prefix' | 'exact' | RegExp;\n  readonly source?: 'pathname' | 'hash';\n}\n\nexport type RouteMatchArray = readonly [string, ...string[]] & { readonly groups: Record<string, string> };\n\n/** Observe route (window.history) changes. */\nexport function useRoute(\n  path: string | readonly string[],\n  { match = 'prefix', source = 'pathname' }: RouteOptions = {},\n): Ref<RouteMatchArray | null> {\n  const matchRx = match === 'exact' ? /^$/u : match === 'prefix' ? /^.*$/u : match;\n  const paths = Array.isArray(path) ? (path as readonly string[]) : [path as string];\n  const refRoute = useStore(getRouter(), (state) => state[source]);\n  const refMatch = useRef<RouteMatchArray | null>(getMatch(refRoute.value));\n\n  useEffect([refRoute], (route) => {\n    refMatch.value = getMatch(route);\n  });\n\n  return refMatch;\n\n  function getMatch(route: string): RouteMatchArray | null {\n    const prefix = paths.find((path) => route.endsWith(path)) ?? null;\n    if (prefix == null) return null;\n    route = route.slice(prefix.length);\n    return route.match(matchRx) as RouteMatchArray | null;\n  }\n}\n"],"mappings":";;;;AAaA,SAAgB,EACd,GACA,EAAE,WAAQ,UAAU,YAAS,eAA6B,EAAE,EAC/B;CAC7B,IAAM,IAAU,MAAU,UAAU,QAAQ,MAAU,WAAW,UAAU,GACrE,IAAQ,MAAM,QAAQ,EAAK,GAAI,IAA6B,CAAC,EAAe,EAC5E,IAAW,EAAS,GAAW,GAAG,MAAU,EAAM,GAAQ,EAC1D,IAAW,EAA+B,EAAS,EAAS,MAAM,CAAC;AAMzE,QAJA,EAAU,CAAC,EAAS,GAAG,MAAU;AAC/B,IAAS,QAAQ,EAAS,EAAM;GAChC,EAEK;CAEP,SAAS,EAAS,GAAuC;EACvD,IAAM,IAAS,EAAM,MAAM,MAAS,EAAM,SAAS,EAAK,CAAC,IAAI;AAG7D,SAFI,KAAU,OAAa,QAC3B,IAAQ,EAAM,MAAM,EAAO,OAAO,EAC3B,EAAM,MAAM,EAAQ"}

package/dist/hooks/store.js

@@ -0,0 +1,10 @@
+import { useEffect as e, useRef as t } from "./core.js";
+//#region src/hooks/store.ts
+function n(n, r = (e) => e, i) {
+	let a = t(r(n.state), i && ((e) => i(n, e)));
+	return e([], () => n.subscribe((e) => a.value = r(e))), a;
+}
+//#endregion
+export { n as useStore };
+
+//# sourceMappingURL=store.js.map

package/dist/hooks/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../src/hooks/store.ts"],"sourcesContent":["import type { ReadonlyRef, Ref } from '../component.ts';\nimport type { Store } from '../store.ts';\nimport { useEffect, useRef } from './core.ts';\n\n/** Observe store (external state) changes. */\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue,\n  mutate: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select?: (state: TState) => TValue,\n): ReadonlyRef<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue = (state) => state as unknown as TValue,\n  mutate?: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue> {\n  const ref = useRef(select(store.state), mutate && ((value) => mutate(store, value)));\n  useEffect([], () => store.subscribe((state) => (ref.value = select(state))));\n  return ref;\n}\n"],"mappings":";;AAcA,SAAgB,EACd,GACA,KAAqC,MAAU,GAC/C,GACa;CACb,IAAM,IAAM,EAAO,EAAO,EAAM,MAAM,EAAE,OAAY,MAAU,EAAO,GAAO,EAAM,EAAE;AAEpF,QADA,EAAU,EAAE,QAAQ,EAAM,WAAW,MAAW,EAAI,QAAQ,EAAO,EAAM,CAAE,CAAC,EACrE"}

package/dist/html.d.ts

@@ -1,33 +1,37 @@
-type TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;
-type TagType<TTag extends string> = TTag extends keyof TagMap ? TagMap[TTag] : HTMLElement;
-type ChildValue = Node | HtmlDeferred | string | number | bigint | false | null | undefined;
+type Alpha = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
+type ChildValue = Node | HtmlDeferredElement | string | number | bigint | false | null | undefined;
 type AttrValue = string | number | bigint | boolean | null | undefined;
-export interface HtmlDeferred<TTag extends keyof TagMap | (string & {}) = string> {
-    readonly tag: TTag;
-    readonly key: string;
-    readonly attrs: Readonly<Record<string, AttrValue>>;
+type TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;
+type IfEquals<T, U, Y = unknown, N = never> = (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? Y : N;
+type ElementType<TElement> = TElement extends string ? TElement extends keyof TagMap ? TagMap[TElement] : HTMLElement : TElement extends CustomElementConstructor ? InstanceType<TElement> : TElement extends Element | Document | ShadowRoot ? TElement : never;
+type ElementProps<TElement> = {
+    readonly [P in keyof TElement & string as TElement[P] extends ((...args: any[]) => any) | null | undefined ? never : IfEquals<Record<P, TElement[P]>, Pick<TElement, P>, `:${P}`, never>]?: TElement[P];
+};
+type ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element ? {} : Readonly<Record<`${Alpha}${string}`, AttrValue>>;
+export type HtmlConfig<TElement> = ElementAttrs<TElement> & ElementProps<ElementType<TElement>>;
+export type HtmlConfigWithKey<TElement> = {
+    readonly [DATA_KEY]: string;
+} & HtmlConfig<TElement>;
+export interface HtmlDeferredElement<TElement extends HTMLElement = HTMLElement> {
+    readonly tag: string;
+    readonly config: {
+        readonly [DATA_KEY]: string;
+    } & HtmlConfig<TElement>;
     readonly children: readonly ChildValue[] | undefined;
-    resolve: () => TagType<TTag>;
+    toElement: () => TElement;
 }
+declare const DATA_KEY = "data-key";
+/**
+ * Create a deferred HTML element with a key.
+ *
+ * Final element creation is deferred until the element is used as a child,
+ * when it can be determined if a new element should be created, or an existing
+ * element with the same key and tag-name should be updated.
+ */
+export declare function html<const TElement extends keyof TagMap | (string & {}) | CustomElementConstructor>(el: TElement, config: HtmlConfigWithKey<TElement>, children?: readonly ChildValue[]): HtmlDeferredElement<ElementType<TElement>>;
 /**
- * Create a deferred HTML element with a key. Final element creation is
- * deferred until the element is used as a child, when it can be determined if
- * a new element should be created, or an existing element with the same key
- * should be updated.
+ * Create or update an HTML element.
  */
-export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, attrs: {
-    readonly $key: string;
-} & Readonly<Record<string, AttrValue>>, children?: readonly ChildValue[]): HtmlDeferred<TTag>;
-/** Create an HTML element with attributes and children. */
-export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, attrs?: Readonly<Record<string, AttrValue>>, children?: readonly ChildValue[]): TagType<TTag>;
-/** Create an HTML element with children. */
-export declare function html<const TTag extends keyof TagMap | (string & {})>(tag: TTag | CustomElementConstructor, children?: readonly ChildValue[]): TagType<TTag>;
-/** Update element attributes and replace children. */
-export declare function html<TElement extends Element | Document | ShadowRoot>(element: TElement, attrs?: TElement extends {
-    setAttribute: (...args: any[]) => any;
-} ? Readonly<Record<string, AttrValue>> : undefined, children?: readonly ChildValue[]): TElement;
-/** Replace element children. */
-export declare function html<TElement extends Element | Document | ShadowRoot>(element: TElement, children?: readonly ChildValue[]): TElement;
-/** Parse a raw HTML string into a `DocumentFragment`. */
-export declare function parseHTML(htmlString: string): DocumentFragment;
+export declare function html<TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot>(el: TElement, attrs?: HtmlConfig<TElement>, children?: readonly ChildValue[]): ElementType<NoInfer<TElement>>;
+export declare function html<TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot>(el: TElement, children?: readonly ChildValue[]): ElementType<TElement>;
 export {};

package/dist/html.js

@@ -0,0 +1,42 @@
+//#region src/html.ts
+var e = "data-key";
+function t(n, r = {}, i = []) {
+	if (typeof n == "function") {
+		let e = customElements.getName(n);
+		e ?? (e = `ce-${crypto.randomUUID()}`, customElements.define(e, n)), n = e;
+	}
+	let a;
+	if ([a, i] = Array.isArray(r) ? [{}, r] : [r, i], typeof n == "string") return e in a ? {
+		tag: n,
+		config: a,
+		children: i,
+		toElement: () => t(document.createElement(n), a, i)
+	} : t(document.createElement(n), a, i);
+	if ("setAttribute" in n) {
+		for (let [e, t] of Object.entries(a)) if (!(t === void 0 || e.startsWith(":"))) if (t === null || t === !1) n.hasAttribute(e) && n.removeAttribute(e);
+		else {
+			let r = t == 1 ? "" : String(t);
+			n.getAttribute(e) !== r && n.setAttribute(e, r);
+		}
+	}
+	for (let [e, t] of Object.entries(a)) {
+		if (t === void 0 || !e.startsWith(":")) continue;
+		let r = e.slice(1);
+		Reflect.get(n, r) !== t && Reflect.set(n, r, t);
+	}
+	let o;
+	return n.replaceChildren(...i.filter((e) => e != null && e !== !1).map((r) => {
+		if (typeof r != "object") return document.createTextNode(String(r));
+		if (r instanceof Node) return r;
+		o ??= new Map([...n.children].flatMap((t) => {
+			let n = t.getAttribute(e);
+			return n == null ? [] : [[n, t]];
+		}));
+		let i = r.config[e], a = o.get(i);
+		return a && a.tagName.toLowerCase() === r.tag ? (o.delete(i), t(a, r.config, r.children)) : r.toElement();
+	})), n;
+}
+//#endregion
+export { t as html };
+
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","names":[],"sources":["../src/html.ts"],"sourcesContent":["// prettier-ignore\ntype Alpha = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';\ntype ChildValue = Node | HtmlDeferredElement | string | number | bigint | false | null | undefined;\ntype AttrValue = string | number | bigint | boolean | null | undefined;\ntype TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;\n\ntype IfEquals<T, U, Y = unknown, N = never> =\n  (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? Y : N;\n\ntype ElementType<TElement> = TElement extends string\n  ? TElement extends keyof TagMap\n    ? TagMap[TElement]\n    : HTMLElement\n  : TElement extends CustomElementConstructor\n    ? InstanceType<TElement>\n    : TElement extends Element | Document | ShadowRoot\n      ? TElement\n      : never;\n\ntype ElementProps<TElement> = {\n  readonly [P in keyof TElement & string as TElement[P] extends ((...args: any[]) => any) | null | undefined\n    ? never\n    : IfEquals<Record<P, TElement[P]>, Pick<TElement, P>, `:${P}`, never>]?: TElement[P];\n};\n\ntype ElementAttrs<TElement> = TElement extends string | CustomElementConstructor | Element\n  ? {}\n  : Readonly<Record<`${Alpha}${string}`, AttrValue>>;\n\nexport type HtmlConfig<TElement> = ElementAttrs<TElement> & ElementProps<ElementType<TElement>>;\nexport type HtmlConfigWithKey<TElement> = { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n\nexport interface HtmlDeferredElement<TElement extends HTMLElement = HTMLElement> {\n  readonly tag: string;\n  readonly config: { readonly [DATA_KEY]: string } & HtmlConfig<TElement>;\n  readonly children: readonly ChildValue[] | undefined;\n  toElement: () => TElement;\n}\n\nconst DATA_KEY = 'data-key';\n\n/**\n * Create a deferred HTML element with a key.\n *\n * Final element creation is deferred until the element is used as a child,\n * when it can be determined if a new element should be created, or an existing\n * element with the same key and tag-name should be updated.\n */\nexport function html<const TElement extends keyof TagMap | (string & {}) | CustomElementConstructor>(\n  el: TElement,\n  config: HtmlConfigWithKey<TElement>,\n  children?: readonly ChildValue[],\n): HtmlDeferredElement<ElementType<TElement>>;\n\n/**\n * Create or update an HTML element.\n */\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, attrs?: HtmlConfig<TElement>, children?: readonly ChildValue[]): ElementType<NoInfer<TElement>>;\nexport function html<\n  TElement extends keyof TagMap | (string & {}) | CustomElementConstructor | Element | Document | ShadowRoot,\n>(el: TElement, children?: readonly ChildValue[]): ElementType<TElement>;\n\nexport function html(\n  el: string | CustomElementConstructor | Element | Document | ShadowRoot,\n  attrsOrChildren: readonly ChildValue[] | Readonly<Record<string, any>> = {},\n  children: readonly ChildValue[] = [],\n): Node | HtmlDeferredElement {\n  if (typeof el === 'function') {\n    let name = customElements.getName(el);\n\n    if (name == null) {\n      name = `ce-${crypto.randomUUID()}`;\n      customElements.define(name, el);\n    }\n\n    el = name;\n  }\n\n  let attrs: Readonly<Record<string, any>>;\n  [attrs, children] = Array.isArray(attrsOrChildren)\n    ? [{}, attrsOrChildren as readonly ChildValue[]]\n    : [attrsOrChildren as Readonly<Record<string, any>>, children];\n\n  if (typeof el === 'string') {\n    return DATA_KEY in attrs\n      ? {\n          tag: el,\n          config: attrs as HtmlDeferredElement['config'],\n          children,\n          toElement: () => html(document.createElement(el), attrs, children),\n        }\n      : html(document.createElement(el), attrs, children);\n  }\n\n  if ('setAttribute' in el) {\n    for (const [name, rawValue] of Object.entries(attrs)) {\n      if (rawValue === undefined || name.startsWith(':')) continue;\n\n      if (rawValue === null || rawValue === false) {\n        if (el.hasAttribute(name)) el.removeAttribute(name);\n      } else {\n        const value = rawValue == true ? '' : String(rawValue);\n        if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n      }\n    }\n  }\n\n  for (const [rawName, value] of Object.entries(attrs)) {\n    if (value === undefined || !rawName.startsWith(':')) continue;\n    const name = rawName.slice(1);\n    if (Reflect.get(el, name) !== value) Reflect.set(el, name, value);\n  }\n\n  let keyElements: Map<string, Element> | undefined;\n\n  el.replaceChildren(\n    ...children\n      .filter((child) => child != null && child !== false)\n      .map((child) => {\n        if (typeof child !== 'object') return document.createTextNode(String(child));\n        if (child instanceof Node) return child;\n\n        keyElements ??= new Map(\n          [...el.children].flatMap((child) => {\n            const key = child.getAttribute(DATA_KEY);\n            return key == null ? [] : [[key, child] as const];\n          }),\n        );\n\n        const key = child.config[DATA_KEY];\n        const reused = keyElements.get(key);\n\n        if (reused && reused.tagName.toLowerCase() === child.tag) {\n          keyElements.delete(key);\n          return html(reused, child.config, child.children);\n        }\n\n        return child.toElement();\n      }),\n  );\n\n  return el;\n}\n"],"mappings":";AAuCA,IAAM,IAAW;AAyBjB,SAAgB,EACd,GACA,IAAyE,EAAE,EAC3E,IAAkC,EAAE,EACR;AAC5B,KAAI,OAAO,KAAO,YAAY;EAC5B,IAAI,IAAO,eAAe,QAAQ,EAAG;AAOrC,EALI,MACF,IAAO,MAAM,OAAO,YAAY,IAChC,eAAe,OAAO,GAAM,EAAG,GAGjC,IAAK;;CAGP,IAAI;AAKJ,KAJA,CAAC,GAAO,KAAY,MAAM,QAAQ,EAAgB,GAC9C,CAAC,EAAE,EAAE,EAAyC,GAC9C,CAAC,GAAkD,EAAS,EAE5D,OAAO,KAAO,SAChB,QAAO,KAAY,IACf;EACE,KAAK;EACL,QAAQ;EACR;EACA,iBAAiB,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;EACnE,GACD,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;AAGvD,KAAI,kBAAkB,GACpB;OAAK,IAAM,CAAC,GAAM,MAAa,OAAO,QAAQ,EAAM,CAC9C,aAAa,KAAA,KAAa,EAAK,WAAW,IAAI,EAElD,KAAI,MAAa,QAAQ,MAAa,IAChC,EAAG,aAAa,EAAK,IAAE,EAAG,gBAAgB,EAAK;OAC9C;GACL,IAAM,IAAQ,KAAY,IAAO,KAAK,OAAO,EAAS;AACtD,GAAI,EAAG,aAAa,EAAK,KAAK,KAAO,EAAG,aAAa,GAAM,EAAM;;;AAKvE,MAAK,IAAM,CAAC,GAAS,MAAU,OAAO,QAAQ,EAAM,EAAE;AACpD,MAAI,MAAU,KAAA,KAAa,CAAC,EAAQ,WAAW,IAAI,CAAE;EACrD,IAAM,IAAO,EAAQ,MAAM,EAAE;AAC7B,EAAI,QAAQ,IAAI,GAAI,EAAK,KAAK,KAAO,QAAQ,IAAI,GAAI,GAAM,EAAM;;CAGnE,IAAI;AA4BJ,QA1BA,EAAG,gBACD,GAAG,EACA,QAAQ,MAAU,KAAS,QAAQ,MAAU,GAAM,CACnD,KAAK,MAAU;AACd,MAAI,OAAO,KAAU,SAAU,QAAO,SAAS,eAAe,OAAO,EAAM,CAAC;AAC5E,MAAI,aAAiB,KAAM,QAAO;AAElC,QAAgB,IAAI,IAClB,CAAC,GAAG,EAAG,SAAS,CAAC,SAAS,MAAU;GAClC,IAAM,IAAM,EAAM,aAAa,EAAS;AACxC,UAAO,KAAO,OAAO,EAAE,GAAG,CAAC,CAAC,GAAK,EAAM,CAAU;IACjD,CACH;EAED,IAAM,IAAM,EAAM,OAAO,IACnB,IAAS,EAAY,IAAI,EAAI;AAOnC,SALI,KAAU,EAAO,QAAQ,aAAa,KAAK,EAAM,OACnD,EAAY,OAAO,EAAI,EAChB,EAAK,GAAQ,EAAM,QAAQ,EAAM,SAAS,IAG5C,EAAM,WAAW;GACxB,CACL,EAEM"}

package/dist/index.js

@@ -1,257 +1,9 @@
-//#region src/internal/callbacks.ts
-function e() {
-	let e = /* @__PURE__ */ new Set(), t = {
-		push: (t) => (e.add(t), () => e.delete(t)),
-		run: ({ clear: n = !1 } = {}) => {
-			let r = [], i = [...e];
-			for (let e of i) try {
-				e();
-			} catch (e) {
-				r.push(e);
-			}
-			if (n && e.clear(), r.length > 0) throw AggregateError(r);
-			return t;
-		},
-		clear: () => e.clear()
-	};
-	return t;
-}
-//#endregion
-//#region src/internal/constants.ts
-var t = Symbol(), n = Symbol();
-//#endregion
-//#region src/component.ts
-Object.assign(window, { [n]: [] });
-function r(r, i = {}) {
-	return class extends HTMLElement {
-		#e = e();
-		#t = e();
-		#n = i;
-		#r;
-		#i = !1;
-		constructor() {
-			super();
-			let e = this.#r = {};
-			if (this.#n.props) {
-				let t = this.#n.props;
-				for (let [n, r] of Object.entries(t)) {
-					if (n in this) continue;
-					let t = r(e[n] = this.#a(void 0), this);
-					Object.defineProperty(this, n, t);
-				}
-			}
-		}
-		connectedCallback() {
-			let e = this.attachShadow({
-				...this.#n.shadow,
-				mode: this.#n.shadow?.mode ?? "open"
-			});
-			try {
-				window[n].push({
-					host: this,
-					onDisconnect: this.#e,
-					onSetRef: this.#t,
-					useRef: this.#a
-				}), r(e, this.#r);
-			} finally {
-				window[n].pop();
-			}
-			this.#t.run();
-		}
-		disconnectedCallback() {
-			this.#t.clear(), this.#e.run({ clear: !0 });
-		}
-		#a = (e, n) => {
-			let r = this.#o, i = e;
-			return {
-				[t]: !0,
-				get value() {
-					return i;
-				},
-				set value(e) {
-					e !== i && (i = e, n?.(i), r());
-				}
-			};
-		};
-		#o = () => {
-			this.#i || (this.#i = !0, queueMicrotask(() => {
-				this.#i = !1, this.#t.run();
-			}));
-		};
-	};
-}
-//#endregion
-//#region src/hooks/core.ts
-function i(e, t) {
-	return s().useRef(e, t);
-}
-function a(t, n) {
-	let { onSetRef: r, onDisconnect: i } = s(), a = e(), o = () => a.run({ clear: !0 }), c;
-	r.push(() => {
-		let e = t.map((e) => e.value);
-		if (c?.length === e.length && c?.every((t, n) => t === e[n])) return;
-		c = e, o();
-		let r = n(...c);
-		r && a.push(() => r());
-	}), i.push(o);
-}
-function o(...e) {
-	if (e.length === 0) return {};
-	let { host: t } = s(), n = Object.fromEntries(e.map((e) => [e, i(t.getAttribute(e), (n) => {
-		n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
-	})])), r = new MutationObserver((e) => {
-		for (let { attributeName: r } of e) r != null && Object.hasOwn(n, r) && (n[r].value = t.getAttribute(r));
-	});
-	return a([], () => (r.observe(t, {
-		attributeFilter: e,
-		attributes: !0
-	}), () => r.disconnect())), n;
-}
-function s() {
-	let e = window[n].at(-1);
-	if (!e) throw Error("hooks must be called inside a render function");
-	return e;
-}
-//#endregion
-//#region src/hooks/loading.ts
-function c(e, t, { debounceMs: n } = {}) {
-	let r = i({
-		loading: !0,
-		value: void 0,
-		error: void 0
-	}), o = !0;
-	return a(e, () => (...e) => {
-		let i = new AbortController();
-		return Promise.race(o ? [Promise.resolve()] : [new Promise((e) => setTimeout(e, n)), new Promise((e) => i.signal.addEventListener("abort", e, { once: !0 }))]).then(() => {
-			if (!i.signal.aborted) return t(i.signal, ...e);
-		}).then((e) => {
-			i.signal.aborted || (r.value = {
-				loading: !1,
-				value: e,
-				error: void 0
-			});
-		}).catch((e) => {
-			i.signal.aborted || (r.value = {
-				loading: !1,
-				value: void 0,
-				error: e
-			});
-		}), o = !1, () => i.abort();
-	}), a([], () => () => o = !0), r;
-}
-//#endregion
-//#region src/store.ts
-function l(t) {
-	let n = e(), r = t;
-	return {
-		get state() {
-			return r;
-		},
-		set state(e) {
-			e !== r && (r = e, n.run());
-		},
-		subscribe: (e) => n.push(() => e(r))
-	};
-}
-//#endregion
-//#region src/router.ts
-function u() {
-	return d ??= f();
-}
-var d;
-function f() {
-	let e = l({
-		url: window.location.href,
-		pathname: window.location.pathname,
-		hash: window.location.hash,
-		state: window.history.state
-	}), t = () => {
-		let t = e.state;
-		t.url !== window.location.href && (t = {
-			...t,
-			url: window.location.href,
-			pathname: window.location.pathname,
-			hash: window.location.hash
-		}), t.state !== window.history.state && (t = {
-			...t,
-			state: window.history.state
-		}), e.state = t;
-	};
-	return Object.defineProperties(history, Object.fromEntries(["pushState", "replaceState"].map((e) => {
-		let n = history[e].bind(history);
-		return [e, {
-			value: (...e) => {
-				n(...e), t();
-			},
-			enumerable: !0,
-			configurable: !0
-		}];
-	}))), window.addEventListener("popstate", t), e;
-}
-//#endregion
-//#region src/hooks/route.ts
-function p(e, { match: t = "prefix", source: n = "pathname" } = {}) {
-	let r = t === "exact" ? /^$/u : t === "prefix" ? /^.*$/u : t, o = Array.isArray(e) ? e : [e], s = (e) => {
-		let t = new URL(e)[n], i = o.find((e) => t.endsWith(e)) ?? null;
-		return i == null ? null : (t = t.slice(i.length), t.match(r));
-	}, c = i(window.location.href), l = i(s(window.location.href)), d = i(window.history.state);
-	return a([], () => u().subscribe(({ url: e, state: t }) => {
-		c.value = e, d.value = t;
-	})), a([c], (e) => {
-		l.value = s(e);
-	}), [l, d];
-}
-//#endregion
-//#region src/hooks/store.ts
-function m(e, t = (e) => e, n) {
-	let r = i(t(e.state), n && ((t) => n(e, t)));
-	return a([], () => e.subscribe((e) => r.value = t(e))), r;
-}
-//#endregion
-//#region src/html.ts
-var h = "data-key";
-function g(e, t = {}, n = []) {
-	if (typeof e == "function") {
-		let t = customElements.getName(e);
-		t ?? (t = `ce-${crypto.randomUUID()}`, customElements.define(t, e)), e = t;
-	}
-	let r;
-	if ([r, n] = Array.isArray(t) ? [{}, t] : [t, n], typeof e == "string") {
-		let { [h]: t, ...i } = r;
-		return typeof t == "string" ? {
-			tag: e,
-			key: t,
-			attrs: i,
-			children: n,
-			resolve: () => g(document.createElement(e), i, n)
-		} : g(document.createElement(e), r, n);
-	}
-	if ("setAttribute" in e) {
-		let t = new Set(e.getAttributeNames());
-		for (let [n, i] of Object.entries(r)) {
-			if (t?.delete(n), i == null || i == 0) continue;
-			let r = i == 1 ? "" : String(i);
-			e.getAttribute(n) !== r && e.setAttribute(n, r);
-		}
-		for (let n of t) e.removeAttribute(n);
-	}
-	let i;
-	return e.replaceChildren(...n.filter((e) => e != null && e !== !1).map((t) => {
-		if (typeof t != "object") return document.createTextNode(String(t));
-		if (t instanceof Node) return t;
-		i ??= new Map([...e.children].flatMap((e) => {
-			let t = e.getAttribute(h);
-			return t == null ? [] : [[t, e]];
-		}));
-		let n = i.get(t.key);
-		return n && n.tagName.toLowerCase() === t.tag ? (i.delete(t.key), g(n, t.attrs, t.children)) : t.resolve();
-	})), e;
-}
-function _(e) {
-	let t = g("template");
-	return t.innerHTML = e, t.content;
-}
-//#endregion
-export { l as createStore, r as defineComponent, u as getRouter, g as h, g as html, _ as parseHTML, o as useAttributes, a as useEffect, c as useLoading, i as useRef, p as useRoute, m as useStore };
-
-//# sourceMappingURL=index.js.map
+import { defineComponent as e } from "./component.js";
+import { useAttributes as t, useEffect as n, useRef as r } from "./hooks/core.js";
+import { useLoading as i } from "./hooks/loading.js";
+import { createStore as a } from "./store.js";
+import { getRouter as o } from "./router.js";
+import { useStore as s } from "./hooks/store.js";
+import { useRoute as c } from "./hooks/route.js";
+import { html as l } from "./html.js";
+export { a as createStore, e as defineComponent, o as getRouter, l as h, l as html, t as useAttributes, n as useEffect, i as useLoading, r as useRef, c as useRoute, s as useStore };

package/dist/internal/callbacks.js

@@ -0,0 +1,22 @@
+//#region src/internal/callbacks.ts
+function e() {
+	let e = /* @__PURE__ */ new Set(), t = {
+		push: (t) => (e.add(t), () => e.delete(t)),
+		run: ({ clear: n = !1 } = {}) => {
+			let r = [], i = [...e];
+			for (let e of i) try {
+				e();
+			} catch (e) {
+				r.push(e);
+			}
+			if (n && e.clear(), r.length > 0) throw AggregateError(r);
+			return t;
+		},
+		clear: () => e.clear()
+	};
+	return t;
+}
+//#endregion
+export { e as createCallbacks };
+
+//# sourceMappingURL=callbacks.js.map

package/dist/internal/callbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callbacks.js","names":[],"sources":["../../src/internal/callbacks.ts"],"sourcesContent":["export interface Callbacks {\n  readonly push: (callback: () => void) => () => void;\n  readonly run: (options?: { readonly clear?: boolean }) => void;\n  readonly clear: () => void;\n}\n\nexport function createCallbacks(): Callbacks {\n  const callbacks = new Set<() => void>();\n\n  const self: Callbacks = {\n    push: (callback) => {\n      callbacks.add(callback);\n      return () => callbacks.delete(callback);\n    },\n    run: ({ clear = false } = {}) => {\n      const errors: unknown[] = [];\n      const callbacksCopy = [...callbacks];\n\n      for (const callback of callbacksCopy) {\n        try {\n          callback();\n        } catch (error: unknown) {\n          errors.push(error);\n        }\n      }\n\n      if (clear) callbacks.clear();\n      if (errors.length > 0) throw new AggregateError(errors);\n      return self;\n    },\n    clear: () => callbacks.clear(),\n  };\n\n  return self;\n}\n"],"mappings":";AAMA,SAAgB,IAA6B;CAC3C,IAAM,oBAAY,IAAI,KAAiB,EAEjC,IAAkB;EACtB,OAAO,OACL,EAAU,IAAI,EAAS,QACV,EAAU,OAAO,EAAS;EAEzC,MAAM,EAAE,WAAQ,OAAU,EAAE,KAAK;GAC/B,IAAM,IAAoB,EAAE,EACtB,IAAgB,CAAC,GAAG,EAAU;AAEpC,QAAK,IAAM,KAAY,EACrB,KAAI;AACF,OAAU;YACH,GAAgB;AACvB,MAAO,KAAK,EAAM;;AAKtB,OADI,KAAO,EAAU,OAAO,EACxB,EAAO,SAAS,EAAG,OAAU,eAAe,EAAO;AACvD,UAAO;;EAET,aAAa,EAAU,OAAO;EAC/B;AAED,QAAO"}

package/dist/internal/constants.js

@@ -0,0 +1,6 @@
+//#region src/internal/constants.ts
+var e = Symbol(), t = Symbol();
+//#endregion
+export { e as $$ref, t as $$renderContextStack };
+
+//# sourceMappingURL=constants.js.map

package/dist/internal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../src/internal/constants.ts"],"sourcesContent":["export const $$ref = Symbol();\nexport const $$renderContextStack = Symbol();\n"],"mappings":";AAAA,IAAa,IAAQ,QAAQ,EAChB,IAAuB,QAAQ"}

package/dist/router.d.ts

@@ -1,9 +1,7 @@
 import { type Store } from './store.ts';
 export interface RouterState {
-    readonly url: string;
     readonly pathname: string;
     readonly hash: string;
-    readonly state: unknown;
 }
 /**
  * Get a router {@link Store} that is updated when the client side route (aka:

package/dist/router.js

@@ -0,0 +1,35 @@
+import { createStore as e } from "./store.js";
+//#region src/router.ts
+function t() {
+	return n ??= r();
+}
+var n;
+function r() {
+	let t = e({
+		pathname: window.location.pathname,
+		hash: window.location.hash
+	}), n = () => {
+		let e = t.state;
+		t.state.pathname !== window.location.pathname && (e = {
+			...e,
+			pathname: window.location.pathname
+		}), t.state.hash !== window.location.hash && (e = {
+			...e,
+			hash: window.location.hash
+		}), t.state = e;
+	};
+	return Object.defineProperties(history, Object.fromEntries(["pushState", "replaceState"].map((e) => {
+		let t = history[e].bind(history);
+		return [e, {
+			value: (...e) => {
+				t(...e), n();
+			},
+			enumerable: !0,
+			configurable: !0
+		}];
+	}))), window.addEventListener("popstate", n), t;
+}
+//#endregion
+export { t as getRouter };
+
+//# sourceMappingURL=router.js.map

package/dist/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","names":[],"sources":["../src/router.ts"],"sourcesContent":["import { createStore, type Store } from './store.ts';\n\nexport interface RouterState {\n  readonly pathname: string;\n  readonly hash: string;\n}\n\n/**\n * Get a router {@link Store} that is updated when the client side route (aka:\n * `History`) changes. This method returns the same store every time it is\n * called (ie. a singleton).\n */\nexport function getRouter(): Store<RouterState> {\n  return (singleton ??= createRouter());\n}\n\nlet singleton: Store<RouterState> | undefined;\n\nfunction createRouter(): Store<RouterState> {\n  const store = createStore<RouterState>({\n    pathname: window.location.pathname,\n    hash: window.location.hash,\n  });\n\n  const onUpdate = (): void => {\n    let state = store.state;\n\n    if (store.state.pathname !== window.location.pathname) {\n      state = { ...state, pathname: window.location.pathname };\n    }\n\n    if (store.state.hash !== window.location.hash) {\n      state = { ...state, hash: window.location.hash };\n    }\n\n    store.state = state;\n  };\n\n  Object.defineProperties(\n    history,\n    Object.fromEntries(\n      (['pushState', 'replaceState'] as const).map((method: 'pushState' | 'replaceState') => {\n        const original = history[method].bind(history) as History['pushState'] & History['replaceState'];\n        const descriptor: PropertyDescriptor = {\n          value: (...args: Parameters<typeof original>) => {\n            original(...args);\n            onUpdate();\n          },\n          enumerable: true,\n          configurable: true,\n        };\n\n        return [method, descriptor];\n      }),\n    ),\n  );\n\n  window.addEventListener('popstate', onUpdate);\n\n  return store;\n}\n"],"mappings":";;AAYA,SAAgB,IAAgC;AAC9C,QAAQ,MAAc,GAAc;;AAGtC,IAAI;AAEJ,SAAS,IAAmC;CAC1C,IAAM,IAAQ,EAAyB;EACrC,UAAU,OAAO,SAAS;EAC1B,MAAM,OAAO,SAAS;EACvB,CAAC,EAEI,UAAuB;EAC3B,IAAI,IAAQ,EAAM;AAUlB,EARI,EAAM,MAAM,aAAa,OAAO,SAAS,aAC3C,IAAQ;GAAE,GAAG;GAAO,UAAU,OAAO,SAAS;GAAU,GAGtD,EAAM,MAAM,SAAS,OAAO,SAAS,SACvC,IAAQ;GAAE,GAAG;GAAO,MAAM,OAAO,SAAS;GAAM,GAGlD,EAAM,QAAQ;;AAwBhB,QArBA,OAAO,iBACL,SACA,OAAO,YACJ,CAAC,aAAa,eAAe,CAAW,KAAK,MAAyC;EACrF,IAAM,IAAW,QAAQ,GAAQ,KAAK,QAAQ;AAU9C,SAAO,CAAC,GAAQ;GARd,QAAQ,GAAG,MAAsC;AAE/C,IADA,EAAS,GAAG,EAAK,EACjB,GAAU;;GAEZ,YAAY;GACZ,cAAc;GAGA,CAAW;GAC3B,CACH,CACF,EAED,OAAO,iBAAiB,YAAY,EAAS,EAEtC"}

package/dist/store.js

@@ -0,0 +1,18 @@
+import { createCallbacks as e } from "./internal/callbacks.js";
+//#region src/store.ts
+function t(t) {
+	let n = e(), r = t;
+	return {
+		get state() {
+			return r;
+		},
+		set state(e) {
+			e !== r && (r = e, n.run());
+		},
+		subscribe: (e) => n.push(() => e(r))
+	};
+}
+//#endregion
+export { t as createStore };
+
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../src/store.ts"],"sourcesContent":["import { createCallbacks } from './internal/callbacks.ts';\n\nexport interface Store<TState> {\n  state: TState;\n  subscribe: (callback: (state: TState) => void) => () => void;\n}\n\n/** Create a new store containing an observable state. */\nexport function createStore<TState>(initialState: TState): Store<TState> {\n  const callbacks = createCallbacks();\n  let state = initialState;\n\n  return {\n    get state() {\n      return state;\n    },\n    set state(newState) {\n      if (newState === state) return;\n      state = newState;\n      callbacks.run();\n    },\n    subscribe: (callback) => callbacks.push(() => callback(state)),\n  };\n}\n"],"mappings":";;AAQA,SAAgB,EAAoB,GAAqC;CACvE,IAAM,IAAY,GAAiB,EAC/B,IAAQ;AAEZ,QAAO;EACL,IAAI,QAAQ;AACV,UAAO;;EAET,IAAI,MAAM,GAAU;AACd,SAAa,MACjB,IAAQ,GACR,EAAU,KAAK;;EAEjB,YAAY,MAAa,EAAU,WAAW,EAAS,EAAM,CAAC;EAC/D"}

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@seahax/elemental",
-  "version": "0.1.0",
-  "private": false,
-  "description": "Extremely small reactive web components library.",
+  "version": "0.2.0",
+  "description": "Functional, reactive, web component base library.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/seahax/workshop.git",
-    "directory": "packages/elemental"
+    "url": "git+https://github.com/seahax/elemental.git"
   },
   "license": "Unlicense",
   "type": "module",
@@ -22,19 +20,22 @@
   ],
   "scripts": {
     "build": "vite build && tsc -b -f tsconfig.lib.json",
-    "clean": "rm -rf dist",
-    "diff": "npm run build >/dev/null && npm diff 'dist/**.mjs' 'dist/**.cjs' 'dist/**.js' 'dist/**.d.ts'",
-    "start": "vite dev",
-    "test": "eslint src && vitest run --coverage"
+    "prepare": "npm run build && npm test",
+    "test": "eslint src"
   },
   "devDependencies": {
-    "@seahax/eslint": "^0.2.27",
-    "@seahax/vitest": "^0.1.8",
-    "@vitest/coverage-v8": "^4.0.16",
-    "eslint": "^9.39.4",
-    "vite": "^8.0.8",
-    "vite-bundle-analyzer": "^1.3.7",
-    "vitest": "^4.1.4"
+    "@eslint/js": "^10.0.1",
+    "@seahax/eslint-progress": "^0.1.17",
+    "@types/node": "^25.6.0",
+    "eslint": "^10.3.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-regexp": "^3.1.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "jiti": "^2.6.1",
+    "typescript-eslint": "^8.59.1",
+    "vite": "^8.0.10",
+    "vite-bundle-analyzer": "^1.3.8"
   },
   "publishConfig": {
     "access": "public"

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["#onDisconnect","#onSetRef","#options","#refs","#useRef","#notify","#notifying"],"sources":["../src/internal/callbacks.ts","../src/internal/constants.ts","../src/component.ts","../src/hooks/core.ts","../src/hooks/loading.ts","../src/store.ts","../src/router.ts","../src/hooks/route.ts","../src/hooks/store.ts","../src/html.ts"],"sourcesContent":["export interface Callbacks {\n  readonly push: (callback: () => void) => () => void;\n  readonly run: (options?: { readonly clear?: boolean }) => void;\n  readonly clear: () => void;\n}\n\nexport function createCallbacks(): Callbacks {\n  const callbacks = new Set<() => void>();\n\n  const self: Callbacks = {\n    push: (callback) => {\n      callbacks.add(callback);\n      return () => callbacks.delete(callback);\n    },\n    run: ({ clear = false } = {}) => {\n      const errors: unknown[] = [];\n      const callbacksCopy = [...callbacks];\n\n      for (const callback of callbacksCopy) {\n        try {\n          callback();\n        } catch (error: unknown) {\n          errors.push(error);\n        }\n      }\n\n      if (clear) callbacks.clear();\n      if (errors.length > 0) throw new AggregateError(errors);\n      return self;\n    },\n    clear: () => callbacks.clear(),\n  };\n\n  return self;\n}\n","export const $$ref = Symbol();\nexport const $$renderContextStack = Symbol();\n","import { type Callbacks, createCallbacks } from './internal/callbacks.ts';\nimport { $$ref, $$renderContextStack } from './internal/constants.ts';\n\ntype SafeProps<TProps> = any extends any\n  ? { [P in keyof TProps as P extends keyof HTMLElement ? never : P]: TProps[P] }\n  : never;\n\nexport interface ComponentConstructor<TProps extends object> {\n  new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n  readonly shadow?: Partial<ShadowRootInit>;\n  readonly props?: ComponentPropDescriptors<TProps>;\n}\n\nexport type ComponentPropDescriptors<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;\n};\n\nexport type ComponentPropDescriptorFactory<TType> = (\n  ref: Ref<TType | undefined>,\n  host: HTMLElement,\n) => ComponentPropDescriptor<TType>;\n\nexport interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'value' | 'get' | 'set'> {\n  get(): T;\n  set?(value: T): void;\n}\n\nexport type ComponentWithProps<TProps extends object> = HTMLElement & {\n  -readonly [P in keyof SafeProps<TProps>]: TProps[P];\n};\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n  readonly host: ComponentWithProps<TProps>;\n};\n\nexport type ComponentPropRefs<TProps extends object> = {\n  readonly [P in keyof SafeProps<TProps>]: Ref<TProps[P] | undefined>;\n};\n\nexport interface Ref<T> extends ReadonlyRef<T> {\n  value: T;\n}\n\nexport interface ReadonlyRef<T> {\n  /** @hidden */\n  [$$ref]: unknown;\n  readonly value: T;\n}\n\nexport type RefValues<T> = T extends readonly any[]\n  ? { [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never }\n  : never;\n\ndeclare global {\n  interface Window {\n    readonly [$$renderContextStack]: {\n      readonly host: HTMLElement;\n      readonly onDisconnect: Callbacks;\n      readonly onSetRef: Callbacks;\n      readonly useRef: <T>(initialValue: T, onChange?: (value: T) => void) => Ref<T>;\n    }[];\n  }\n}\n\nObject.assign(window, { [$$renderContextStack]: [] });\n\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadow: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadow: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  options: ComponentOptions<Record<string, unknown>> = {},\n): new () => HTMLElement {\n  return class extends HTMLElement {\n    readonly #onDisconnect = createCallbacks();\n    readonly #onSetRef = createCallbacks();\n    readonly #options = options;\n    readonly #refs: ComponentPropRefs<Record<string, unknown>>;\n    #notifying = false;\n\n    constructor() {\n      super();\n      const refs: Record<string, Ref<unknown>> = (this.#refs = {});\n\n      if (this.#options.props) {\n        const descriptors = this.#options.props;\n\n        for (const [key, getDescriptor] of Object.entries(descriptors)) {\n          if (key in this) continue;\n          const ref = (refs[key] = this.#useRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n    }\n\n    protected connectedCallback(): void {\n      const shadow = this.attachShadow({ ...this.#options.shadow, mode: this.#options.shadow?.mode ?? 'open' });\n\n      try {\n        window[$$renderContextStack].push({\n          host: this,\n          onDisconnect: this.#onDisconnect,\n          onSetRef: this.#onSetRef,\n          useRef: this.#useRef,\n        });\n\n        render(shadow as ComponentShadowRoot<Record<string, unknown>>, this.#refs);\n      } finally {\n        window[$$renderContextStack].pop();\n      }\n\n      this.#onSetRef.run();\n    }\n\n    protected disconnectedCallback(): void {\n      this.#onSetRef.clear();\n      this.#onDisconnect.run({ clear: true });\n    }\n\n    readonly #useRef = <T>(initialValue: T, onChange?: (value: T) => void): Ref<T> => {\n      const notify = this.#notify;\n      let value = initialValue;\n\n      return {\n        [$$ref]: true,\n        get value() {\n          return value;\n        },\n        set value(newValue) {\n          if (newValue === value) return;\n          value = newValue;\n          onChange?.(value);\n          notify();\n        },\n      };\n    };\n\n    readonly #notify = (): void => {\n      if (this.#notifying) return;\n      this.#notifying = true;\n\n      queueMicrotask(() => {\n        this.#notifying = false;\n        this.#onSetRef.run();\n      });\n    };\n  };\n}\n","import { type ReadonlyRef, type Ref, type RefValues } from '../component.ts';\nimport { createCallbacks } from '../internal/callbacks.ts';\nimport { $$renderContextStack } from '../internal/constants.ts';\n\n/** Create an observable value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return getHookContext().useRef(initialValue, onChange);\n}\n\n/** React to observable (reference) changes. */\nexport function useEffect<const TDeps extends readonly ReadonlyRef<any>[]>(\n  deps: TDeps,\n  callback: (...values: RefValues<TDeps>) => (() => void) | void,\n): void {\n  const { onSetRef, onDisconnect } = getHookContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.run({ clear: true });\n  let values: any[] | undefined;\n\n  onSetRef.push((): void => {\n    const newValues = deps.map((dep) => dep.value);\n    if (values?.length === newValues.length && values?.every((value, i) => value === newValues[i])) return;\n    values = newValues;\n    cleanup();\n    const maybeCleanup = callback(...(values as any));\n    if (maybeCleanup) cleanupCallback.push(() => maybeCleanup());\n  });\n\n  onDisconnect.push(cleanup);\n}\n\n/** Observe attribute changes. */\nexport function useAttributes<TName extends string>(...names: TName[]): Readonly<Record<TName, Ref<string | null>>> {\n  if (names.length === 0) return {} as any;\n  const { host } = getHookContext();\n\n  const refs = Object.fromEntries(\n    names.map((name) => [\n      name,\n      useRef(host.getAttribute(name), (value) => {\n        if (value == null) host.removeAttribute(name);\n        else host.setAttribute(name, value);\n      }),\n    ]),\n  );\n\n  const observer = new MutationObserver((mutation) => {\n    for (const { attributeName } of mutation) {\n      if (attributeName != null && Object.hasOwn(refs, attributeName)) {\n        refs[attributeName]!.value = host.getAttribute(attributeName);\n      }\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { attributeFilter: names, attributes: true });\n    return () => observer.disconnect();\n  });\n\n  return refs as Readonly<Record<TName, Ref<string | null>>>;\n}\n\nfunction getHookContext(): (typeof window)[typeof $$renderContextStack][0] {\n  const context = window[$$renderContextStack].at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n","import type { ReadonlyRef, Ref, RefValues } from '../component.ts';\nimport { useEffect, useRef } from './core.ts';\n\nexport interface LoadingValue<TValue> {\n  readonly loading: boolean;\n  readonly value: TValue | undefined;\n  readonly error: unknown;\n}\n\nexport interface LoadingOptions {\n  readonly debounceMs?: number;\n}\n\n/** Load data asynchronously. */\nexport function useLoading<const TDeps extends readonly ReadonlyRef<any>[], TValue>(\n  deps: TDeps,\n  callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>,\n  { debounceMs }: LoadingOptions = {},\n): Ref<LoadingValue<TValue>> {\n  const ref = useRef<LoadingValue<TValue>>({ loading: true, value: undefined, error: undefined });\n  let skipDebounce = true;\n\n  useEffect(deps, () => (...values) => {\n    const ac = new AbortController();\n\n    Promise.race(\n      skipDebounce\n        ? [Promise.resolve()]\n        : [\n            new Promise((resolve) => setTimeout(resolve, debounceMs)),\n            new Promise((resolve) => ac.signal.addEventListener('abort', resolve, { once: true })),\n          ],\n    )\n      .then(() => {\n        if (ac.signal.aborted) return;\n        return callback(ac.signal, ...(values as any));\n      })\n      .then((value) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value, error: undefined };\n      })\n      .catch((error: unknown) => {\n        if (ac.signal.aborted) return;\n        ref.value = { loading: false, value: undefined, error };\n      });\n\n    skipDebounce = false;\n    return () => ac.abort();\n  });\n\n  // Skip the debounce again if the component unmounts.\n  useEffect([], () => () => (skipDebounce = true));\n\n  return ref;\n}\n","import { createCallbacks } from './internal/callbacks.ts';\n\nexport interface Store<TState> {\n  state: TState;\n  subscribe: (callback: (state: TState) => void) => () => void;\n}\n\n/** Create a new store containing an observable state. */\nexport function createStore<TState>(initialState: TState): Store<TState> {\n  const callbacks = createCallbacks();\n  let state = initialState;\n\n  return {\n    get state() {\n      return state;\n    },\n    set state(newState) {\n      if (newState === state) return;\n      state = newState;\n      callbacks.run();\n    },\n    subscribe: (callback) => callbacks.push(() => callback(state)),\n  };\n}\n","import { createStore, type Store } from './store.ts';\n\nexport interface RouterState {\n  readonly url: string;\n  readonly pathname: string;\n  readonly hash: string;\n  readonly state: unknown;\n}\n\n/**\n * Get a router {@link Store} that is updated when the client side route (aka:\n * `History`) changes. This method returns the same store every time it is\n * called (ie. a singleton).\n */\nexport function getRouter(): Store<RouterState> {\n  return (singleton ??= createRouter());\n}\n\nlet singleton: Store<RouterState> | undefined;\n\nfunction createRouter(): Store<RouterState> {\n  const store = createStore<RouterState>({\n    url: window.location.href,\n    pathname: window.location.pathname,\n    hash: window.location.hash,\n    state: window.history.state,\n  });\n\n  const onUpdate = (): void => {\n    let state = store.state;\n\n    if (state.url !== window.location.href) {\n      state = {\n        ...state,\n        url: window.location.href,\n        pathname: window.location.pathname,\n        hash: window.location.hash,\n      };\n    }\n\n    if (state.state !== window.history.state) {\n      state = { ...state, state: window.history.state };\n    }\n\n    store.state = state;\n  };\n\n  Object.defineProperties(\n    history,\n    Object.fromEntries(\n      (['pushState', 'replaceState'] as const).map((method: 'pushState' | 'replaceState') => {\n        const original = history[method].bind(history) as History['pushState'] & History['replaceState'];\n        const descriptor: PropertyDescriptor = {\n          value: (...args: Parameters<typeof original>) => {\n            original(...args);\n            onUpdate();\n          },\n          enumerable: true,\n          configurable: true,\n        };\n\n        return [method, descriptor];\n      }),\n    ),\n  );\n\n  window.addEventListener('popstate', onUpdate);\n\n  return store;\n}\n","import type { Ref } from '../component.ts';\nimport { getRouter } from '../router.ts';\nimport { useEffect, useRef } from './core.ts';\n\nexport interface RouteOptions {\n  readonly match?: 'prefix' | 'exact' | RegExp;\n  readonly source?: 'pathname' | 'hash';\n}\n\nexport type RouteMatchArray = readonly [string, ...string[]] & { readonly groups: Record<string, string> };\n\n/** Observe route (window.history) changes. */\nexport function useRoute(\n  path: string | readonly string[],\n  { match = 'prefix', source = 'pathname' }: RouteOptions = {},\n): [match: Ref<RouteMatchArray | null>, state: Ref<unknown>] {\n  const matchRx = match === 'exact' ? /^$/u : match === 'prefix' ? /^.*$/u : match;\n  const paths = Array.isArray(path) ? (path as readonly string[]) : [path as string];\n\n  const getMatch = (url: string): RouteMatchArray | null => {\n    let value = new URL(url)[source];\n    const prefix = paths.find((path) => value.endsWith(path)) ?? null;\n    if (prefix == null) return null;\n    value = value.slice(prefix.length);\n    return value.match(matchRx) as RouteMatchArray | null;\n  };\n\n  const refUrl = useRef<string>(window.location.href);\n  const refMatch = useRef<RouteMatchArray | null>(getMatch(window.location.href));\n  const refState = useRef<unknown>(window.history.state);\n\n  useEffect([], () => {\n    return getRouter().subscribe(({ url, state }) => {\n      refUrl.value = url;\n      refState.value = state;\n    });\n  });\n\n  useEffect([refUrl], (url) => {\n    refMatch.value = getMatch(url);\n  });\n\n  return [refMatch, refState];\n}\n","import type { ReadonlyRef, Ref } from '../component.ts';\nimport type { Store } from '../store.ts';\nimport { useEffect, useRef } from './core.ts';\n\n/** Observe store (external state) changes. */\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue,\n  mutate: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select?: (state: TState) => TValue,\n): ReadonlyRef<TValue>;\nexport function useStore<TState, TValue = TState>(\n  store: Store<TState>,\n  select: (state: TState) => TValue = (state) => state as unknown as TValue,\n  mutate?: (store: Store<TState>, value: TValue) => void,\n): Ref<TValue> {\n  const ref = useRef(select(store.state), mutate && ((value) => mutate(store, value)));\n  useEffect([], () => store.subscribe((state) => (ref.value = select(state))));\n  return ref;\n}\n","type TagMap = HTMLElementTagNameMap & HTMLElementDeprecatedTagNameMap;\ntype TagType<TTag extends string> = TTag extends keyof TagMap ? TagMap[TTag] : HTMLElement;\ntype ChildValue = Node | HtmlDeferred | string | number | bigint | false | null | undefined;\ntype AttrValue = string | number | bigint | boolean | null | undefined;\n\nexport interface HtmlDeferred<TTag extends keyof TagMap | (string & {}) = string> {\n  readonly tag: TTag;\n  readonly key: string;\n  readonly attrs: Readonly<Record<string, AttrValue>>;\n  readonly children: readonly ChildValue[] | undefined;\n  resolve: () => TagType<TTag>;\n}\n\nconst DATA_KEY = 'data-key';\n\n/**\n * Create a deferred HTML element with a key. Final element creation is\n * deferred until the element is used as a child, when it can be determined if\n * a new element should be created, or an existing element with the same key\n * should be updated.\n */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  attrs: { readonly $key: string } & Readonly<Record<string, AttrValue>>,\n  children?: readonly ChildValue[],\n): HtmlDeferred<TTag>;\n\n/** Create an HTML element with attributes and children. */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  attrs?: Readonly<Record<string, AttrValue>>,\n  children?: readonly ChildValue[],\n): TagType<TTag>;\n\n/** Create an HTML element with children. */\nexport function html<const TTag extends keyof TagMap | (string & {})>(\n  tag: TTag | CustomElementConstructor,\n  children?: readonly ChildValue[],\n): TagType<TTag>;\n\n/** Update element attributes and replace children. */\nexport function html<TElement extends Element | Document | ShadowRoot>(\n  element: TElement,\n  attrs?: TElement extends { setAttribute: (...args: any[]) => any } ? Readonly<Record<string, AttrValue>> : undefined,\n  children?: readonly ChildValue[],\n): TElement;\n\n/** Replace element children. */\nexport function html<TElement extends Element | Document | ShadowRoot>(\n  element: TElement,\n  children?: readonly ChildValue[],\n): TElement;\n\nexport function html(\n  el: string | CustomElementConstructor | Element | Document | ShadowRoot,\n  attrsOrChildren: Readonly<Record<string, AttrValue>> | readonly ChildValue[] = {},\n  children: readonly ChildValue[] = [],\n): Node | HtmlDeferred {\n  if (typeof el === 'function') {\n    let name = customElements.getName(el);\n\n    if (name == null) {\n      name = `ce-${crypto.randomUUID()}`;\n      customElements.define(name, el);\n    }\n\n    el = name;\n  }\n\n  let attrs: Readonly<Record<string, AttrValue>>;\n  [attrs, children] = Array.isArray(attrsOrChildren)\n    ? [{}, attrsOrChildren as readonly ChildValue[]]\n    : [attrsOrChildren as Readonly<Record<string, AttrValue>>, children];\n\n  if (typeof el === 'string') {\n    const { [DATA_KEY]: key, ...otherAttrs } = attrs;\n\n    return typeof key === 'string'\n      ? {\n          tag: el,\n          key,\n          attrs: otherAttrs,\n          children,\n          resolve: () => html(document.createElement(el), otherAttrs, children),\n        }\n      : html(document.createElement(el), attrs, children);\n  }\n\n  if ('setAttribute' in el) {\n    const oldAttrs = new Set(el.getAttributeNames());\n\n    for (const [name, rawValue] of Object.entries(attrs)) {\n      oldAttrs?.delete(name);\n      if (rawValue == null || rawValue == false) continue;\n      const value = rawValue == true ? '' : String(rawValue);\n      if (el.getAttribute(name) === value) continue;\n      el.setAttribute(name, value);\n    }\n\n    for (const name of oldAttrs) {\n      el.removeAttribute(name);\n    }\n  }\n\n  let keyElements: Map<string, Element> | undefined;\n\n  el.replaceChildren(\n    ...children\n      .filter((child) => child != null && child !== false)\n      .map((child) => {\n        if (typeof child !== 'object') return document.createTextNode(String(child));\n        if (child instanceof Node) return child;\n\n        keyElements ??= new Map(\n          [...el.children].flatMap((child) => {\n            const key = child.getAttribute(DATA_KEY);\n            return key == null ? [] : [[key, child] as const];\n          }),\n        );\n\n        const reused = keyElements.get(child.key);\n\n        if (reused && reused.tagName.toLowerCase() === child.tag) {\n          keyElements.delete(child.key);\n          return html(reused, child.attrs, child.children);\n        }\n\n        return child.resolve();\n      }),\n  );\n\n  return el;\n}\n\n/** Parse a raw HTML string into a `DocumentFragment`. */\nexport function parseHTML(htmlString: string): DocumentFragment {\n  const template = html('template');\n  template.innerHTML = htmlString;\n  return template.content;\n}\n"],"mappings":";AAMA,SAAgB,IAA6B;CAC3C,IAAM,oBAAY,IAAI,KAAiB,EAEjC,IAAkB;EACtB,OAAO,OACL,EAAU,IAAI,EAAS,QACV,EAAU,OAAO,EAAS;EAEzC,MAAM,EAAE,WAAQ,OAAU,EAAE,KAAK;GAC/B,IAAM,IAAoB,EAAE,EACtB,IAAgB,CAAC,GAAG,EAAU;AAEpC,QAAK,IAAM,KAAY,EACrB,KAAI;AACF,OAAU;YACH,GAAgB;AACvB,MAAO,KAAK,EAAM;;AAKtB,OADI,KAAO,EAAU,OAAO,EACxB,EAAO,SAAS,EAAG,OAAU,eAAe,EAAO;AACvD,UAAO;;EAET,aAAa,EAAU,OAAO;EAC/B;AAED,QAAO;;;;ACjCT,IAAa,IAAQ,QAAQ,EAChB,IAAuB,QAAQ;;;ACkE5C,OAAO,OAAO,QAAQ,GAAG,IAAuB,EAAE,EAAE,CAAC;AAOrD,SAAgB,EACd,GAIA,IAAqD,EAAE,EAChC;AACvB,QAAO,cAAc,YAAY;EAC/B,KAAyB,GAAiB;EAC1C,KAAqB,GAAiB;EACtC,KAAoB;EACpB;EACA,KAAa;EAEb,cAAc;AACZ,UAAO;GACP,IAAM,IAAsC,MAAA,IAAa,EAAE;AAE3D,OAAI,MAAA,EAAc,OAAO;IACvB,IAAM,IAAc,MAAA,EAAc;AAElC,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAY,EAAE;AAC9D,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EADN,EAAK,KAAO,MAAA,EAAkB,KAAA,EAAU,EACf,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;;EAKlD,oBAAoC;GAClC,IAAM,IAAS,KAAK,aAAa;IAAE,GAAG,MAAA,EAAc;IAAQ,MAAM,MAAA,EAAc,QAAQ,QAAQ;IAAQ,CAAC;AAEzG,OAAI;AAQF,IAPA,OAAO,GAAsB,KAAK;KAChC,MAAM;KACN,cAAc,MAAA;KACd,UAAU,MAAA;KACV,QAAQ,MAAA;KACT,CAAC,EAEF,EAAO,GAAwD,MAAA,EAAW;aAClE;AACR,WAAO,GAAsB,KAAK;;AAGpC,SAAA,EAAe,KAAK;;EAGtB,uBAAuC;AAErC,GADA,MAAA,EAAe,OAAO,EACtB,MAAA,EAAmB,IAAI,EAAE,OAAO,IAAM,CAAC;;EAGzC,MAAuB,GAAiB,MAA0C;GAChF,IAAM,IAAS,MAAA,GACX,IAAQ;AAEZ,UAAO;KACJ,IAAQ;IACT,IAAI,QAAQ;AACV,YAAO;;IAET,IAAI,MAAM,GAAU;AACd,WAAa,MACjB,IAAQ,GACR,IAAW,EAAM,EACjB,GAAQ;;IAEX;;EAGH,WAA+B;AACzB,SAAA,MACJ,MAAA,IAAkB,IAElB,qBAAqB;AAEnB,IADA,MAAA,IAAkB,IAClB,MAAA,EAAe,KAAK;KACpB;;;;;;ACpJR,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAgB,CAAC,OAAO,GAAc,EAAS;;AAIxD,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAgB,EAC7C,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,IAAI,EAAE,OAAO,IAAM,CAAC,EAC5D;AAWJ,CATA,EAAS,WAAiB;EACxB,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC9C,MAAI,GAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,CAAE;AAEhG,EADA,IAAS,GACT,GAAS;EACT,IAAM,IAAe,EAAS,GAAI,EAAe;AACjD,EAAI,KAAc,EAAgB,WAAW,GAAc,CAAC;GAC5D,EAEF,EAAa,KAAK,EAAQ;;AAI5B,SAAgB,EAAoC,GAAG,GAA6D;AAClH,KAAI,EAAM,WAAW,EAAG,QAAO,EAAE;CACjC,IAAM,EAAE,YAAS,GAAgB,EAE3B,IAAO,OAAO,YAClB,EAAM,KAAK,MAAS,CAClB,GACA,EAAO,EAAK,aAAa,EAAK,GAAG,MAAU;AACzC,EAAI,KAAS,OAAM,EAAK,gBAAgB,EAAK,GACxC,EAAK,aAAa,GAAM,EAAM;GACnC,CACH,CAAC,CACH,EAEK,IAAW,IAAI,kBAAkB,MAAa;AAClD,OAAK,IAAM,EAAE,sBAAmB,EAC9B,CAAI,KAAiB,QAAQ,OAAO,OAAO,GAAM,EAAc,KAC7D,EAAK,GAAgB,QAAQ,EAAK,aAAa,EAAc;GAGjE;AAOF,QALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM;EAAE,iBAAiB;EAAO,YAAY;EAAM,CAAC,QACvD,EAAS,YAAY,EAClC,EAEK;;AAGT,SAAS,IAAkE;CACzE,IAAM,IAAU,OAAO,GAAsB,GAAG,GAAG;AACnD,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO;;;;ACnDT,SAAgB,EACd,GACA,GACA,EAAE,kBAA+B,EAAE,EACR;CAC3B,IAAM,IAAM,EAA6B;EAAE,SAAS;EAAM,OAAO,KAAA;EAAW,OAAO,KAAA;EAAW,CAAC,EAC3F,IAAe;AAiCnB,QA/BA,EAAU,UAAa,GAAG,MAAW;EACnC,IAAM,IAAK,IAAI,iBAAiB;AAwBhC,SAtBA,QAAQ,KACN,IACI,CAAC,QAAQ,SAAS,CAAC,GACnB,CACE,IAAI,SAAS,MAAY,WAAW,GAAS,EAAW,CAAC,EACzD,IAAI,SAAS,MAAY,EAAG,OAAO,iBAAiB,SAAS,GAAS,EAAE,MAAM,IAAM,CAAC,CAAC,CACvF,CACN,CACE,WAAW;AACN,UAAG,OAAO,QACd,QAAO,EAAS,EAAG,QAAQ,GAAI,EAAe;IAC9C,CACD,MAAM,MAAU;AACX,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,SAAS;IAAO;IAAO,OAAO,KAAA;IAAW;IACvD,CACD,OAAO,MAAmB;AACrB,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,SAAS;IAAO,OAAO,KAAA;IAAW;IAAO;IACvD,EAEJ,IAAe,UACF,EAAG,OAAO;GACvB,EAGF,EAAU,EAAE,cAAe,IAAe,GAAM,EAEzC;;;;AC7CT,SAAgB,EAAoB,GAAqC;CACvE,IAAM,IAAY,GAAiB,EAC/B,IAAQ;AAEZ,QAAO;EACL,IAAI,QAAQ;AACV,UAAO;;EAET,IAAI,MAAM,GAAU;AACd,SAAa,MACjB,IAAQ,GACR,EAAU,KAAK;;EAEjB,YAAY,MAAa,EAAU,WAAW,EAAS,EAAM,CAAC;EAC/D;;;;ACRH,SAAgB,IAAgC;AAC9C,QAAQ,MAAc,GAAc;;AAGtC,IAAI;AAEJ,SAAS,IAAmC;CAC1C,IAAM,IAAQ,EAAyB;EACrC,KAAK,OAAO,SAAS;EACrB,UAAU,OAAO,SAAS;EAC1B,MAAM,OAAO,SAAS;EACtB,OAAO,OAAO,QAAQ;EACvB,CAAC,EAEI,UAAuB;EAC3B,IAAI,IAAQ,EAAM;AAelB,EAbI,EAAM,QAAQ,OAAO,SAAS,SAChC,IAAQ;GACN,GAAG;GACH,KAAK,OAAO,SAAS;GACrB,UAAU,OAAO,SAAS;GAC1B,MAAM,OAAO,SAAS;GACvB,GAGC,EAAM,UAAU,OAAO,QAAQ,UACjC,IAAQ;GAAE,GAAG;GAAO,OAAO,OAAO,QAAQ;GAAO,GAGnD,EAAM,QAAQ;;AAwBhB,QArBA,OAAO,iBACL,SACA,OAAO,YACJ,CAAC,aAAa,eAAe,CAAW,KAAK,MAAyC;EACrF,IAAM,IAAW,QAAQ,GAAQ,KAAK,QAAQ;AAU9C,SAAO,CAAC,GAT+B;GACrC,QAAQ,GAAG,MAAsC;AAE/C,IADA,EAAS,GAAG,EAAK,EACjB,GAAU;;GAEZ,YAAY;GACZ,cAAc;GACf,CAE0B;GAC3B,CACH,CACF,EAED,OAAO,iBAAiB,YAAY,EAAS,EAEtC;;;;ACxDT,SAAgB,EACd,GACA,EAAE,WAAQ,UAAU,YAAS,eAA6B,EAAE,EACD;CAC3D,IAAM,IAAU,MAAU,UAAU,QAAQ,MAAU,WAAW,UAAU,GACrE,IAAQ,MAAM,QAAQ,EAAK,GAAI,IAA6B,CAAC,EAAe,EAE5E,KAAY,MAAwC;EACxD,IAAI,IAAQ,IAAI,IAAI,EAAI,CAAC,IACnB,IAAS,EAAM,MAAM,MAAS,EAAM,SAAS,EAAK,CAAC,IAAI;AAG7D,SAFI,KAAU,OAAa,QAC3B,IAAQ,EAAM,MAAM,EAAO,OAAO,EAC3B,EAAM,MAAM,EAAQ;IAGvB,IAAS,EAAe,OAAO,SAAS,KAAK,EAC7C,IAAW,EAA+B,EAAS,OAAO,SAAS,KAAK,CAAC,EACzE,IAAW,EAAgB,OAAO,QAAQ,MAAM;AAatD,QAXA,EAAU,EAAE,QACH,GAAW,CAAC,WAAW,EAAE,QAAK,eAAY;AAE/C,EADA,EAAO,QAAQ,GACf,EAAS,QAAQ;GACjB,CACF,EAEF,EAAU,CAAC,EAAO,GAAG,MAAQ;AAC3B,IAAS,QAAQ,EAAS,EAAI;GAC9B,EAEK,CAAC,GAAU,EAAS;;;;AC5B7B,SAAgB,EACd,GACA,KAAqC,MAAU,GAC/C,GACa;CACb,IAAM,IAAM,EAAO,EAAO,EAAM,MAAM,EAAE,OAAY,MAAU,EAAO,GAAO,EAAM,EAAE;AAEpF,QADA,EAAU,EAAE,QAAQ,EAAM,WAAW,MAAW,EAAI,QAAQ,EAAO,EAAM,CAAE,CAAC,EACrE;;;;ACRT,IAAM,IAAW;AAwCjB,SAAgB,EACd,GACA,IAA+E,EAAE,EACjF,IAAkC,EAAE,EACf;AACrB,KAAI,OAAO,KAAO,YAAY;EAC5B,IAAI,IAAO,eAAe,QAAQ,EAAG;AAOrC,EALI,MACF,IAAO,MAAM,OAAO,YAAY,IAChC,eAAe,OAAO,GAAM,EAAG,GAGjC,IAAK;;CAGP,IAAI;AAKJ,KAJA,CAAC,GAAO,KAAY,MAAM,QAAQ,EAAgB,GAC9C,CAAC,EAAE,EAAE,EAAyC,GAC9C,CAAC,GAAwD,EAAS,EAElE,OAAO,KAAO,UAAU;EAC1B,IAAM,GAAG,IAAW,GAAK,GAAG,MAAe;AAE3C,SAAO,OAAO,KAAQ,WAClB;GACE,KAAK;GACL;GACA,OAAO;GACP;GACA,eAAe,EAAK,SAAS,cAAc,EAAG,EAAE,GAAY,EAAS;GACtE,GACD,EAAK,SAAS,cAAc,EAAG,EAAE,GAAO,EAAS;;AAGvD,KAAI,kBAAkB,GAAI;EACxB,IAAM,IAAW,IAAI,IAAI,EAAG,mBAAmB,CAAC;AAEhD,OAAK,IAAM,CAAC,GAAM,MAAa,OAAO,QAAQ,EAAM,EAAE;AAEpD,OADA,GAAU,OAAO,EAAK,EAClB,KAAY,QAAQ,KAAY,EAAO;GAC3C,IAAM,IAAQ,KAAY,IAAO,KAAK,OAAO,EAAS;AAClD,KAAG,aAAa,EAAK,KAAK,KAC9B,EAAG,aAAa,GAAM,EAAM;;AAG9B,OAAK,IAAM,KAAQ,EACjB,GAAG,gBAAgB,EAAK;;CAI5B,IAAI;AA2BJ,QAzBA,EAAG,gBACD,GAAG,EACA,QAAQ,MAAU,KAAS,QAAQ,MAAU,GAAM,CACnD,KAAK,MAAU;AACd,MAAI,OAAO,KAAU,SAAU,QAAO,SAAS,eAAe,OAAO,EAAM,CAAC;AAC5E,MAAI,aAAiB,KAAM,QAAO;AAElC,QAAgB,IAAI,IAClB,CAAC,GAAG,EAAG,SAAS,CAAC,SAAS,MAAU;GAClC,IAAM,IAAM,EAAM,aAAa,EAAS;AACxC,UAAO,KAAO,OAAO,EAAE,GAAG,CAAC,CAAC,GAAK,EAAM,CAAU;IACjD,CACH;EAED,IAAM,IAAS,EAAY,IAAI,EAAM,IAAI;AAOzC,SALI,KAAU,EAAO,QAAQ,aAAa,KAAK,EAAM,OACnD,EAAY,OAAO,EAAM,IAAI,EACtB,EAAK,GAAQ,EAAM,OAAO,EAAM,SAAS,IAG3C,EAAM,SAAS;GACtB,CACL,EAEM;;AAIT,SAAgB,EAAU,GAAsC;CAC9D,IAAM,IAAW,EAAK,WAAW;AAEjC,QADA,EAAS,YAAY,GACd,EAAS"}