@seahax/elemental 0.4.1 → 0.5.0

package/README.md

@@ -14,8 +14,8 @@ Contains everything you need to build anything from a single component up to a f
 - No Dependencies
 - Tiny Bundle Size
 
-![NPM Version](https://img.shields.io/npm/v/@seahax/elemental?color=red)
-[![bundlejs](https://deno.bundlejs.com/badge?q=@seahax/elemental@latest&treeshake=[*])](https://bundlejs.com/?q=%40seahax%2Felemental%40latest&treeshake=%5B*%5D)
+[![NPM](https://img.shields.io/npm/v/%40seahax%2Felemental?style=for-the-badge&color=red)](https://www.npmjs.com/package/@seahax/elemental) [![BundleJS (GZIP)](https://img.shields.io/bundlejs/size/%40seahax/elemental?style=for-the-badge&label=bundlejs%20(gzip))
+](https://bundlejs.com/?q=%40seahax%2Felemental%40latest&treeshake=%5B*%5D)
 
 
 ## Define A Web Component
@@ -23,20 +23,30 @@ Contains everything you need to build anything from a single component up to a f
 ```ts
 import {
   defineComponent,
+  h,
   useRef,
   useStore,
   useAttributes,
+  useParent,
+  useDocument,
   useRoute,
-  useLoading,
+  useAsync,
   useEffect,
   useChildEffect,
+  useDisconnectCallback,
+  useElementInternals,
   useHost,
-  h,
 } from '@seahax/elemental';
 
 export const MyComponent = defineComponent((shadow) => {
-  // This function is run once after the component is created, when it is
-  // first connected to the document.
+  // This function is called every time the component is connected to the
+  // document.
+  // 
+  // For the most part, a component's lifecycle should be handled as if it
+  // starts on connect and ends on disconnect, even though the component
+  // can be reconnected to the document. Restore internal state on
+  // connection from host attributes and properties. Effect hooks are
+  // designed to facilitate this pattern.
 
   // Create HTML elements and save references to them.
   const myInput = h('input');
@@ -58,9 +68,15 @@ export const MyComponent = defineComponent((shadow) => {
   // Use a reference (reactive state) bound to a (shared) store.
   const globalStateRef = useStore(myStore, select, mutate);
 
-  // Use references (reactive state) bound to attributes.
+  // Use references (reactive state) bound to the component's attributes.
   const [dataValueRef, ...] = useAttributes('data-value', ...);
 
+  // Use a reference (reactive state) bound to the component's parent node.
+  const parentNode = useParent();
+
+  // Use a reference (reactive state) bound to the component's owner document.
+  const ownerDocument = useDocument();
+
   // Use a reference (reactive state) bound to route matching.
   const routeMatchRef = useRoute('/path/', {
     match: 'prefix', // 'exact' | 'prefix' | RegExp
@@ -68,7 +84,7 @@ export const MyComponent = defineComponent((shadow) => {
   });
 
   // Use a reference (reactive state) bound to an async loader function.
-  const loadingStateRef = useLoading([
+  const asyncRef = useAsync([
     // dependency references
   ], async (signal, ...dependencyValues) => {
     // Reactive async code runs when the component is connected to the
@@ -84,15 +100,15 @@ export const MyComponent = defineComponent((shadow) => {
     globalStateRef,
     dataValueRef,
     routeMatchRef,
-    routeStateRef,
-    loadingStateRef,
+    asyncRef,
   ], (...dependencyValues) => {
     // Reactive code runs when the component is connected to the document,
     // and when any of the dependencies change.
 
     return () => {
-      // Cleanup before the next effect callback and after the component
-      // is disconnected from the document.
+      // Cleanup after dependency refs are changed (before the next effect
+      // callback) and after the component is disconnected from the
+      // document.
     };
   });
 
@@ -108,24 +124,74 @@ export const MyComponent = defineComponent((shadow) => {
     };
   });
 
-  // Use the host element (generally only useful in reusable hooks).
+  // Register a document disconnection callback.
+  useDisconnectCallback(() => {
+    // Called when the component is disconnected from the document.
+  });
+
+  // Use the element's internals.
+  const elementInternals = useElementInternals();
+
+  // Use the component host element.
   const host = useHost();
 });
 ```
 
+## Enable Form Association
+
+```ts
+import {
+  useElementInternals,
+  useForm,
+  useFormDisabled,
+  useFormResetCallback,
+  useFormRestoreCallback,
+} from '@seahax/elemental';
+
+const MyComponent = defineComponent(
+  (shadow) => {
+    // Use the element's internals.
+    const elementInternals = useElementInternals();
+
+    // Use a reference (reactive state) bound to the associated form.
+    const formRef = useForm();
+
+    // Use a reference (reactive state) bound to the form disabled state.
+    const formDisabledRef = useFormDisabled();
+
+    // Register a form reset callback.
+    useFormResetCallback(() => {
+      // Called when the associated form is reset. Only called on connect
+      // if the form was reset while the component was disconnected.
+    });
+
+    // Register a form restore callback.
+    useFormRestoreCallback((state, reason) => {
+      // Called when the associated form is restored. Only called on connect
+      // if the form was restored while the component was disconnected.
+    });
+  },
+  {
+    // Enable form association.
+    formAssociated: true,
+  }
+);
+```
+
 ## Customize The Shadow Root
 
 ```ts
 const MyComponent = defineComponent(
   (shadow) => {
-    // Renderer...
+    ...
   },
   {
-    // Shadow root options.
+    // Use custom shadow root initialization options.
+    // (default: { mode: 'open' }).
     shadow: {
       mode: 'closed',
       ...
-    }
+    },
   }
 );
 ```

package/dist/component.d.ts

@@ -3,11 +3,16 @@ type SafeProps<TProps> = any extends any ? {
     [P in keyof TProps as P extends keyof HTMLElement ? never : P]: TProps[P];
 } : never;
 export interface ComponentConstructor<TProps extends object> {
+    readonly formAssociated: boolean;
     new (): ComponentWithProps<TProps>;
 }
 export interface ComponentOptions<TProps extends object> {
+    /** Shadow root attachment options. */
     readonly shadow?: Partial<ShadowRootInit>;
+    /** Component custom property descriptors. */
     readonly props?: ComponentPropDescriptors<TProps>;
+    /** True to mark the component as form-associated. */
+    readonly formAssociated?: boolean;
 }
 export type ComponentPropDescriptors<TProps extends object> = {
     readonly [P in keyof SafeProps<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;

package/dist/component.js

@@ -1,34 +1,57 @@
-import { createContextController as e } from "./internal/context.js";
-import { useRef as t } from "./hooks/ref.js";
+import { createController as e } from "./internal/controller.js";
 //#region src/component.ts
-function n(n, { props: r, shadow: i } = {}) {
+function t(t, { props: n, shadow: r, formAssociated: i = !1 } = {}) {
 	return class extends HTMLElement {
-		#e = {};
-		#t = e(this);
+		static formAssociated = i;
+		#e;
+		#t;
+		#n = {};
 		constructor() {
-			if (super(), r) {
-				let e = this.#e;
-				for (let [n, i] of Object.entries(r)) {
-					if (n in this) continue;
-					let r = i(e[n] = t(void 0), this);
-					Object.defineProperty(this, n, r);
+			if (super(), this.#e = this.attachShadow({
+				...r,
+				mode: r?.mode ?? "open"
+			}), this.#t = e({
+				host: this,
+				formAssociated: i,
+				render: () => t(this.#e, this.#n),
+				attachInternals: () => super.attachInternals()
+			}), n) {
+				let e = this.#n;
+				for (let [t, r] of Object.entries(n)) {
+					if (t in this) continue;
+					let n = r(e[t] = this.#t.createRef(void 0), this);
+					Object.defineProperty(this, t, n);
 				}
 			}
+			i && this.attachInternals();
+		}
+		attachInternals() {
+			return this.#t.attachInternals();
 		}
 		connectedCallback() {
-			this.#t.connect(() => {
-				n(this.attachShadow({
-					...i,
-					mode: i?.mode ?? "open"
-				}), this.#e);
-			});
+			this.#t.connectedCallback();
+		}
+		connectedMoveCallback() {
+			this.#t.connectedMoveCallback();
 		}
 		disconnectedCallback() {
-			this.#t.disconnect();
+			this.#t.disconnectedCallback();
+		}
+		adoptedCallback() {
+			this.#t.adoptedCallback();
+		}
+		formDisabledCallback(e) {
+			this.#t.formDisabledCallback(e);
+		}
+		formResetCallback() {
+			this.#t.formResetCallback();
+		}
+		formStateRestoreCallback(e, t) {
+			this.#t.formStateRestoreCallback(e, t);
 		}
 	};
 }
 //#endregion
-export { n as defineComponent };
+export { t as defineComponent };
 
 //# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":["#propRefs","#contextController"],"sources":["../src/component.ts"],"sourcesContent":["import { type Ref, useRef } from './hooks/ref.ts';\nimport { createContextController } from './internal/context.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\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadowRoot: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  { props, shadow }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<{}> {\n  return class extends HTMLElement {\n    readonly #propRefs: ComponentPropRefs<Record<string, unknown>> = {};\n    readonly #contextController = createContextController(this);\n\n    constructor() {\n      super();\n\n      if (props) {\n        const propRefs: Record<string, Ref<unknown>> = this.#propRefs;\n\n        for (const [key, getDescriptor] of Object.entries(props)) {\n          if (key in this) continue;\n          const ref = (propRefs[key] = useRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n    }\n\n    protected connectedCallback(): void {\n      this.#contextController.connect(() => {\n        const shadowRoot = this.attachShadow({ ...shadow, mode: shadow?.mode ?? 'open' });\n        render(shadowRoot as ComponentShadowRoot<Record<string, unknown>>, this.#propRefs);\n      });\n    }\n\n    protected disconnectedCallback(): void {\n      this.#contextController.disconnect();\n    }\n  };\n}\n"],"mappings":";;;AA+CA,SAAgB,EACd,GAIA,EAAE,UAAO,cAAsD,EAAE,EACvC;AAC1B,QAAO,cAAc,YAAY;EAC/B,KAAiE,EAAE;EACnE,KAA8B,EAAwB,KAAK;EAE3D,cAAc;AAGZ,OAFA,OAAO,EAEH,GAAO;IACT,IAAM,IAAyC,MAAA;AAE/C,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAM,EAAE;AACxD,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADX,KAAO,EAAY,KAAA,EAAU,EACb,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;;EAKlD,oBAAoC;AAClC,SAAA,EAAwB,cAAc;AAEpC,MADmB,KAAK,aAAa;KAAE,GAAG;KAAQ,MAAM,GAAQ,QAAQ;KAAQ,CACzE,EAA4D,MAAA,EAAe;KAClF;;EAGJ,uBAAuC;AACrC,SAAA,EAAwB,YAAY"}
+{"version":3,"file":"component.js","names":["#shadow","#controller","#props"],"sources":["../src/component.ts"],"sourcesContent":["import { type Ref } from './hooks/ref.ts';\nimport { type Controller, createController } from './internal/controller.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  readonly formAssociated: boolean;\n  new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n  /** Shadow root attachment options. */\n  readonly shadow?: Partial<ShadowRootInit>;\n  /** Component custom property descriptors. */\n  readonly props?: ComponentPropDescriptors<TProps>;\n  /** True to mark the component as form-associated. */\n  readonly formAssociated?: boolean;\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\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n  render: (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n  options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n  render: (\n    shadowRoot: ComponentShadowRoot<Record<string, unknown>>,\n    props: ComponentPropRefs<Record<string, unknown>>,\n  ) => void,\n  { props, shadow, formAssociated = false }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<{}> {\n  return class extends HTMLElement {\n    static readonly formAssociated = formAssociated;\n\n    readonly #shadow: ComponentShadowRoot<Record<string, unknown>>;\n    readonly #controller: Controller;\n    readonly #props: ComponentPropRefs<Record<string, unknown>> = {};\n\n    constructor() {\n      super();\n\n      this.#shadow = this.attachShadow({\n        ...shadow,\n        mode: shadow?.mode ?? 'open',\n      }) as ComponentShadowRoot<Record<string, unknown>>;\n\n      this.#controller = createController({\n        host: this,\n        formAssociated,\n        render: () => render(this.#shadow, this.#props),\n        attachInternals: () => super.attachInternals(),\n      });\n\n      if (props) {\n        const propRefs: Record<string, Ref<unknown>> = this.#props;\n\n        for (const [key, getDescriptor] of Object.entries(props)) {\n          if (key in this) continue;\n          const ref = (propRefs[key] = this.#controller.createRef<any>(undefined));\n          const descriptor = getDescriptor(ref, this);\n          Object.defineProperty(this, key, descriptor);\n        }\n      }\n\n      if (formAssociated) {\n        this.attachInternals();\n      }\n    }\n\n    override attachInternals(): ElementInternals {\n      return this.#controller.attachInternals();\n    }\n\n    protected connectedCallback(): void {\n      this.#controller.connectedCallback();\n    }\n\n    protected connectedMoveCallback(): void {\n      this.#controller.connectedMoveCallback();\n    }\n\n    protected disconnectedCallback(): void {\n      this.#controller.disconnectedCallback();\n    }\n\n    protected adoptedCallback(): void {\n      this.#controller.adoptedCallback();\n    }\n\n    protected formDisabledCallback(disabled: boolean): void {\n      this.#controller.formDisabledCallback(disabled);\n    }\n\n    protected formResetCallback(): void {\n      this.#controller.formResetCallback();\n    }\n\n    protected formStateRestoreCallback(state: string | File | FormData, reason: 'restore' | 'autocomplete'): void {\n      this.#controller.formStateRestoreCallback(state, reason);\n    }\n  };\n}\n"],"mappings":";;AAoDA,SAAgB,EACd,GAIA,EAAE,UAAO,WAAQ,oBAAiB,OAAqD,EAAE,EAC/D;AAC1B,QAAO,cAAc,YAAY;EAC/B,OAAgB,iBAAiB;EAEjC;EACA;EACA,KAA8D,EAAE;EAEhE,cAAc;AAeZ,OAdA,OAAO,EAEP,MAAA,IAAe,KAAK,aAAa;IAC/B,GAAG;IACH,MAAM,GAAQ,QAAQ;IACvB,CAAC,EAEF,MAAA,IAAmB,EAAiB;IAClC,MAAM;IACN;IACA,cAAc,EAAO,MAAA,GAAc,MAAA,EAAY;IAC/C,uBAAuB,MAAM,iBAAiB;IAC/C,CAAC,EAEE,GAAO;IACT,IAAM,IAAyC,MAAA;AAE/C,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAM,EAAE;AACxD,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADX,KAAO,MAAA,EAAiB,UAAe,KAAA,EAAU,EACjC,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;AAIhD,GAAI,KACF,KAAK,iBAAiB;;EAI1B,kBAA6C;AAC3C,UAAO,MAAA,EAAiB,iBAAiB;;EAG3C,oBAAoC;AAClC,SAAA,EAAiB,mBAAmB;;EAGtC,wBAAwC;AACtC,SAAA,EAAiB,uBAAuB;;EAG1C,uBAAuC;AACrC,SAAA,EAAiB,sBAAsB;;EAGzC,kBAAkC;AAChC,SAAA,EAAiB,iBAAiB;;EAGpC,qBAA+B,GAAyB;AACtD,SAAA,EAAiB,qBAAqB,EAAS;;EAGjD,oBAAoC;AAClC,SAAA,EAAiB,mBAAmB;;EAGtC,yBAAmC,GAAiC,GAA0C;AAC5G,SAAA,EAAiB,yBAAyB,GAAO,EAAO"}

package/dist/hooks/async.d.ts

@@ -0,0 +1,11 @@
+import { type ReadonlyRef, type Ref, type RefValues } from './ref.ts';
+export interface AsyncValue<TValue> {
+    readonly value: TValue | undefined;
+    readonly error: unknown;
+    readonly isLoading: boolean;
+}
+export interface AsyncOptions {
+    readonly debounceMs?: number;
+}
+/** Use a reference (reactive state) bound to an async loader function. */
+export declare function useAsync<const TDeps extends readonly ReadonlyRef<any>[], TValue>(deps: TDeps, callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>, { debounceMs }?: AsyncOptions): Ref<AsyncValue<TValue>>;

package/dist/hooks/{loading.js → async.js}

@@ -1,6 +1,6 @@
 import { useRef as e } from "./ref.js";
 import { useEffect as t } from "./effect.js";
-//#region src/hooks/loading.ts
+//#region src/hooks/async.ts
 function n(n, r, { debounceMs: i } = {}) {
 	let a = e({
 		value: void 0,
@@ -27,6 +27,6 @@ function n(n, r, { debounceMs: i } = {}) {
 	}), t([], () => () => o = !0), a;
 }
 //#endregion
-export { n as useLoading };
+export { n as useAsync };
 
-//# sourceMappingURL=loading.js.map
+//# sourceMappingURL=async.js.map

package/dist/hooks/async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.js","names":[],"sources":["../../src/hooks/async.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { type ReadonlyRef, type Ref, type RefValues, useRef } from './ref.ts';\n\nexport interface AsyncValue<TValue> {\n  readonly value: TValue | undefined;\n  readonly error: unknown;\n  readonly isLoading: boolean;\n}\n\nexport interface AsyncOptions {\n  readonly debounceMs?: number;\n}\n\n/** Use a reference (reactive state) bound to an async loader function. */\nexport function useAsync<const TDeps extends readonly ReadonlyRef<any>[], TValue>(\n  deps: TDeps,\n  callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>,\n  { debounceMs }: AsyncOptions = {},\n): Ref<AsyncValue<TValue>> {\n  const ref = useRef<AsyncValue<TValue>>({ value: undefined, error: undefined, isLoading: true });\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 = { isLoading: false, value, error: undefined };\n      })\n      .catch((error: unknown) => {\n        if (ac.signal.aborted) return;\n        ref.value = { isLoading: 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,kBAA6B,EAAE,EACR;CACzB,IAAM,IAAM,EAA2B;EAAE,OAAO,KAAA;EAAW,OAAO,KAAA;EAAW,WAAW;EAAM,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,WAAW;IAAO;IAAO,OAAO,KAAA;IAAW;IACzD,CACD,OAAO,MAAmB;AACrB,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,WAAW;IAAO,OAAO,KAAA;IAAW;IAAO;IACzD,EAEJ,IAAe,UACF,EAAG,OAAO;GACvB,EAGF,EAAU,EAAE,cAAe,IAAe,GAAM,EAEzC"}

package/dist/hooks/{child-effect.js → child.js}

@@ -1,7 +1,7 @@
 import { useRef as e } from "./ref.js";
 import { useEffect as t } from "./effect.js";
 import { useHost as n } from "./host.js";
-//#region src/hooks/child-effect.ts
+//#region src/hooks/child.ts
 function r(r) {
 	let i = n(), a = e(0), o = new MutationObserver((e) => {
 		e.some((e) => e.type === "childList") && (a.value = (a.value + 1) % (2 ** 53 - 1));
@@ -11,4 +11,4 @@ function r(r) {
 //#endregion
 export { r as useChildEffect };
 
-//# sourceMappingURL=child-effect.js.map
+//# sourceMappingURL=child.js.map

package/dist/hooks/child.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"child.js","names":[],"sources":["../../src/hooks/child.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { useHost } from './host.ts';\nimport { useRef } from './ref.ts';\n\n/** React to child list changes (non-recursive). */\nexport function useChildEffect(callback: () => (() => void) | void): void {\n  const host = useHost();\n  const ref = useRef(0);\n\n  const observer = new MutationObserver((mutation) => {\n    if (mutation.some((m) => m.type === 'childList')) {\n      ref.value = (ref.value + 1) % Number.MAX_SAFE_INTEGER;\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { childList: true });\n    return () => observer.disconnect();\n  });\n\n  useEffect([ref], () => {\n    return callback();\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAe,GAA2C;CACxE,IAAM,IAAO,GAAS,EAChB,IAAM,EAAO,EAAE,EAEf,IAAW,IAAI,kBAAkB,MAAa;AAClD,EAAI,EAAS,MAAM,MAAM,EAAE,SAAS,YAAY,KAC9C,EAAI,SAAS,EAAI,QAAQ;GAE3B;AAOF,CALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM,EAAE,WAAW,IAAM,CAAC,QAC9B,EAAS,YAAY,EAClC,EAEF,EAAU,CAAC,EAAI,QACN,GAAU,CACjB"}

package/dist/hooks/controller.d.ts

@@ -0,0 +1,3 @@
+import { type Controller } from '../internal/controller.ts';
+/** @internal Get the controller of the currently rendering component. */
+export declare function useController(): Controller;

package/dist/hooks/controller.js

@@ -0,0 +1,11 @@
+import { getController as e } from "../internal/controller.js";
+//#region src/hooks/controller.ts
+function t() {
+	let t = e();
+	if (!t) throw Error("hooks must be called by a render function");
+	return t;
+}
+//#endregion
+export { t as useController };
+
+//# sourceMappingURL=controller.js.map

package/dist/hooks/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":[],"sources":["../../src/hooks/controller.ts"],"sourcesContent":["import { type Controller, getController } from '../internal/controller.ts';\n\n/** @internal Get the controller of the currently rendering component. */\nexport function useController(): Controller {\n  const controller = getController();\n  if (!controller) throw new Error('hooks must be called by a render function');\n  return controller;\n}\n"],"mappings":";;AAGA,SAAgB,IAA4B;CAC1C,IAAM,IAAa,GAAe;AAClC,KAAI,CAAC,EAAY,OAAU,MAAM,4CAA4C;AAC7E,QAAO"}

package/dist/hooks/disconnect.d.ts

@@ -0,0 +1,2 @@
+/** Register a callback for disconnections. */
+export declare function useDisconnectCallback(callback: () => void): void;

package/dist/hooks/disconnect.js

@@ -0,0 +1,9 @@
+import { useController as e } from "./controller.js";
+//#region src/hooks/disconnect.ts
+function t(t) {
+	e().onDisconnect.push(t);
+}
+//#endregion
+export { t as useDisconnectCallback };
+
+//# sourceMappingURL=disconnect.js.map

package/dist/hooks/disconnect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disconnect.js","names":[],"sources":["../../src/hooks/disconnect.ts"],"sourcesContent":["import { useController } from './controller.ts';\n\n/** Register a callback for disconnections. */\nexport function useDisconnectCallback(callback: () => void): void {\n  useController().onDisconnect.push(callback);\n}\n"],"mappings":";;AAGA,SAAgB,EAAsB,GAA4B;AAChE,IAAe,CAAC,aAAa,KAAK,EAAS"}

package/dist/hooks/document.d.ts

@@ -0,0 +1,3 @@
+import type { ReadonlyRef } from './ref.ts';
+/** Use a reference (reactive state) bound to the owner document. */
+export declare function useDocument(): ReadonlyRef<Document>;

package/dist/hooks/document.js

@@ -0,0 +1,9 @@
+import { useController as e } from "./controller.js";
+//#region src/hooks/document.ts
+function t() {
+	return e().refDocument;
+}
+//#endregion
+export { t as useDocument };
+
+//# sourceMappingURL=document.js.map

package/dist/hooks/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","names":[],"sources":["../../src/hooks/document.ts"],"sourcesContent":["import { useController } from './controller.ts';\nimport type { ReadonlyRef } from './ref.ts';\n\n/** Use a reference (reactive state) bound to the owner document. */\nexport function useDocument(): ReadonlyRef<Document> {\n  return useController().refDocument;\n}\n"],"mappings":";;AAIA,SAAgB,IAAqC;AACnD,QAAO,GAAe,CAAC"}

package/dist/hooks/effect.js

@@ -1,15 +1,15 @@
-import { createCallbacks as e } from "../internal/callbacks.js";
-import { useContext as t } from "./context.js";
+import { useController as e } from "./controller.js";
+import { useDisconnectCallback as t } from "./disconnect.js";
 //#region src/hooks/effect.ts
 function n(n, r) {
-	let { onNotify: i, onDisconnect: a } = t(), o = e(), s = () => o.runAndClear(), c;
-	i.push(() => {
+	let i, a, o = () => {
+		let e = i;
+		i = void 0, e?.();
+	};
+	e().onNotify.push(() => {
 		let e = n.map((e) => e.value);
-		if (c?.length === e.length && c?.every((t, n) => t === e[n])) return;
-		c = e, s();
-		let t = r(...c);
-		t && o.push(() => t());
-	}), a.push(s);
+		a?.length === e.length && a?.every((t, n) => t === e[n]) || (a = e, o(), i = r(...a));
+	}), t(o);
 }
 //#endregion
 export { n as useEffect };

package/dist/hooks/effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"effect.js","names":[],"sources":["../../src/hooks/effect.ts"],"sourcesContent":["import { createCallbacks } from '../internal/callbacks.ts';\nimport { useContext } from './context.ts';\nimport type { ReadonlyRef, RefValues } from './ref.ts';\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 { onNotify, onDisconnect } = useContext();\n  const cleanupCallback = createCallbacks();\n  const cleanup = (): void => cleanupCallback.runAndClear();\n  let values: any[] | undefined;\n\n  onNotify.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"],"mappings":";;;AAKA,SAAgB,EACd,GACA,GACM;CACN,IAAM,EAAE,aAAU,oBAAiB,GAAY,EACzC,IAAkB,GAAiB,EACnC,UAAsB,EAAgB,aAAa,EACrD;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"}
+{"version":3,"file":"effect.js","names":[],"sources":["../../src/hooks/effect.ts"],"sourcesContent":["import { useController } from './controller.ts';\nimport { useDisconnectCallback } from './disconnect.ts';\nimport type { ReadonlyRef, RefValues } from './ref.ts';\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  let cleanupCallback: (() => void) | void;\n  let values: any[] | undefined;\n\n  const cleanup = () => {\n    const callback = cleanupCallback;\n    cleanupCallback = undefined;\n    callback?.();\n  };\n\n  useController().onNotify.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    cleanupCallback = callback(...(values as any));\n  });\n\n  useDisconnectCallback(cleanup);\n}\n"],"mappings":";;;AAKA,SAAgB,EACd,GACA,GACM;CACN,IAAI,GACA,GAEE,UAAgB;EACpB,IAAM,IAAW;AAEjB,EADA,IAAkB,KAAA,GAClB,KAAY;;AAWd,CARA,GAAe,CAAC,SAAS,WAAiB;EACxC,IAAM,IAAY,EAAK,KAAK,MAAQ,EAAI,MAAM;AAC1C,KAAQ,WAAW,EAAU,UAAU,GAAQ,OAAO,GAAO,MAAM,MAAU,EAAU,GAAG,KAC9F,IAAS,GACT,GAAS,EACT,IAAkB,EAAS,GAAI,EAAe;GAC9C,EAEF,EAAsB,EAAQ"}

package/dist/hooks/form.d.ts

@@ -0,0 +1,9 @@
+import type { ReadonlyRef } from './ref.ts';
+/** Use a reference (reactive state) bound to the associated form. */
+export declare function useForm(): ReadonlyRef<HTMLFormElement | null>;
+/** Use a reference (reactive state) bound to the form disabled state. */
+export declare function useFormDisabled(): ReadonlyRef<boolean>;
+/** Register a callback for form resets. */
+export declare function useFormResetCallback(callback: () => void): void;
+/** Register a callback for form restorations. */
+export declare function useFormRestoreCallback(callback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void): void;

package/dist/hooks/form.js

@@ -0,0 +1,23 @@
+import { useController as e } from "./controller.js";
+//#region src/hooks/form.ts
+function t() {
+	return a().refForm;
+}
+function n() {
+	return a().refDisabled;
+}
+function r(e) {
+	a().onReset.push(e);
+}
+function i(e) {
+	a().onRestore.push(e);
+}
+function a() {
+	let { formAssociated: t } = e();
+	if (!t) throw Error("form hooks must be called in a form-associated component");
+	return t;
+}
+//#endregion
+export { t as useForm, n as useFormDisabled, r as useFormResetCallback, i as useFormRestoreCallback };
+
+//# sourceMappingURL=form.js.map

package/dist/hooks/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../src/hooks/form.ts"],"sourcesContent":["import type { Controller } from '../internal/controller.ts';\nimport { useController } from './controller.ts';\nimport type { ReadonlyRef } from './ref.ts';\n\n/** Use a reference (reactive state) bound to the associated form. */\nexport function useForm(): ReadonlyRef<HTMLFormElement | null> {\n  return useFormAssociated().refForm;\n}\n\n/** Use a reference (reactive state) bound to the form disabled state. */\nexport function useFormDisabled(): ReadonlyRef<boolean> {\n  return useFormAssociated().refDisabled;\n}\n\n/** Register a callback for form resets. */\nexport function useFormResetCallback(callback: () => void): void {\n  useFormAssociated().onReset.push(callback);\n}\n\n/** Register a callback for form restorations. */\nexport function useFormRestoreCallback(\n  callback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void,\n): void {\n  useFormAssociated().onRestore.push(callback);\n}\n\nfunction useFormAssociated(): Controller['formAssociated'] & {} {\n  const { formAssociated } = useController();\n  if (!formAssociated) throw new Error('form hooks must be called in a form-associated component');\n  return formAssociated;\n}\n"],"mappings":";;AAKA,SAAgB,IAA+C;AAC7D,QAAO,GAAmB,CAAC;;AAI7B,SAAgB,IAAwC;AACtD,QAAO,GAAmB,CAAC;;AAI7B,SAAgB,EAAqB,GAA4B;AAC/D,IAAmB,CAAC,QAAQ,KAAK,EAAS;;AAI5C,SAAgB,EACd,GACM;AACN,IAAmB,CAAC,UAAU,KAAK,EAAS;;AAG9C,SAAS,IAAuD;CAC9D,IAAM,EAAE,sBAAmB,GAAe;AAC1C,KAAI,CAAC,EAAgB,OAAU,MAAM,2DAA2D;AAChG,QAAO"}

package/dist/hooks/host.d.ts

@@ -1,2 +1,2 @@
-/** Get the component host element. */
+/** Use the component host element. */
 export declare function useHost(): HTMLElement;

package/dist/hooks/host.js

@@ -1,4 +1,4 @@
-import { useContext as e } from "./context.js";
+import { useController as e } from "./controller.js";
 //#region src/hooks/host.ts
 function t() {
 	return e().host;

package/dist/hooks/host.js.map

@@ -1 +1 @@
-{"version":3,"file":"host.js","names":[],"sources":["../../src/hooks/host.ts"],"sourcesContent":["import { useContext } from './context.ts';\n\n/** Get the component host element. */\nexport function useHost(): HTMLElement {\n  return useContext().host;\n}\n"],"mappings":";;AAGA,SAAgB,IAAuB;AACrC,QAAO,GAAY,CAAC"}
+{"version":3,"file":"host.js","names":[],"sources":["../../src/hooks/host.ts"],"sourcesContent":["import { useController } from './controller.ts';\n\n/** Use the component host element. */\nexport function useHost(): HTMLElement {\n  return useController().host;\n}\n"],"mappings":";;AAGA,SAAgB,IAAuB;AACrC,QAAO,GAAe,CAAC"}

package/dist/hooks/internals.d.ts

@@ -0,0 +1,2 @@
+/** Use the element internals. */
+export declare function useElementInternals(): ElementInternals;

package/dist/hooks/internals.js

@@ -0,0 +1,9 @@
+import { useController as e } from "./controller.js";
+//#region src/hooks/internals.ts
+function t() {
+	return e().attachInternals();
+}
+//#endregion
+export { t as useElementInternals };
+
+//# sourceMappingURL=internals.js.map

package/dist/hooks/internals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.js","names":[],"sources":["../../src/hooks/internals.ts"],"sourcesContent":["import { useController } from './controller.ts';\n\n/** Use the element internals. */\nexport function useElementInternals(): ElementInternals {\n  return useController().attachInternals();\n}\n"],"mappings":";;AAGA,SAAgB,IAAwC;AACtD,QAAO,GAAe,CAAC,iBAAiB"}

package/dist/hooks/parent.d.ts

@@ -0,0 +1,3 @@
+import type { ReadonlyRef } from './ref.ts';
+/** Use a reference (reactive state) bound to the parent node. */
+export declare function useParent(): ReadonlyRef<ParentNode | null>;

package/dist/hooks/parent.js

@@ -0,0 +1,9 @@
+import { useController as e } from "./controller.js";
+//#region src/hooks/parent.ts
+function t() {
+	return e().refParent;
+}
+//#endregion
+export { t as useParent };
+
+//# sourceMappingURL=parent.js.map

package/dist/hooks/parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.js","names":[],"sources":["../../src/hooks/parent.ts"],"sourcesContent":["import { useController } from './controller.ts';\nimport type { ReadonlyRef } from './ref.ts';\n\n/** Use a reference (reactive state) bound to the parent node. */\nexport function useParent(): ReadonlyRef<ParentNode | null> {\n  return useController().refParent;\n}\n"],"mappings":";;AAIA,SAAgB,IAA4C;AAC1D,QAAO,GAAe,CAAC"}

package/dist/hooks/ref.d.ts

@@ -1,3 +1,4 @@
+import type { $$ref } from '../internal/controller.ts';
 export interface Ref<T> extends ReadonlyRef<T> {
     value: T;
 }
@@ -9,7 +10,5 @@ export interface ReadonlyRef<T> {
 export type RefValues<T> = T extends readonly any[] ? {
     [K in keyof T]: T[K] extends ReadonlyRef<infer V> ? V : never;
 } : never;
-declare const $$ref: unique symbol;
 /** Use a reference (reactive state) value. */
 export declare function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T>;
-export {};

package/dist/hooks/ref.js

@@ -1,19 +1,9 @@
-import { useContext as e } from "./context.js";
+import { useController as e } from "./controller.js";
 //#region src/hooks/ref.ts
-var t = Symbol();
-function n(n, r) {
-	let { notify: i } = e(), a = n;
-	return {
-		[t]: !0,
-		get value() {
-			return a;
-		},
-		set value(e) {
-			e !== a && (a = e, r?.(a), i());
-		}
-	};
+function t(t, n) {
+	return e().createRef(t, n);
 }
 //#endregion
-export { n as useRef };
+export { t as useRef };
 
 //# sourceMappingURL=ref.js.map

package/dist/hooks/ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref.js","names":[],"sources":["../../src/hooks/ref.ts"],"sourcesContent":["import { useContext } from './context.ts';\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\nconst $$ref = Symbol();\n\n/** Use a reference (reactive state) value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  const { notify } = useContext();\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"],"mappings":";;AAgBA,IAAM,IAAQ,QAAQ;AAGtB,SAAgB,EAAU,GAAiB,GAAuC;CAChF,IAAM,EAAE,cAAW,GAAY,EAC3B,IAAQ;AAEZ,QAAO;GACJ,IAAQ;EACT,IAAI,QAAQ;AACV,UAAO;;EAET,IAAI,MAAM,GAAU;AACd,SAAa,MACjB,IAAQ,GACR,IAAW,EAAM,EACjB,GAAQ;;EAEX"}
+{"version":3,"file":"ref.js","names":[],"sources":["../../src/hooks/ref.ts"],"sourcesContent":["import type { $$ref } from '../internal/controller.ts';\nimport { useController } from './controller.ts';\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\n/** Use a reference (reactive state) value. */\nexport function useRef<T>(initialValue: T, onChange?: (value: T) => void): Ref<T> {\n  return useController().createRef(initialValue, onChange);\n}\n"],"mappings":";;AAkBA,SAAgB,EAAU,GAAiB,GAAuC;AAChF,QAAO,GAAe,CAAC,UAAU,GAAc,EAAS"}

package/dist/hooks/route.d.ts

@@ -3,8 +3,8 @@ export interface RouteOptions {
     readonly match?: 'prefix' | 'exact' | RegExp;
     readonly source?: 'pathname' | 'hash';
 }
-export type RouteMatchArray = readonly [string, ...string[]] & {
+export type RouteMatch = readonly [string, ...string[]] & {
     readonly groups: Record<string, string>;
 };
 /** Use a reference (reactive state) bound to route matching. */
-export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): Ref<RouteMatchArray | null>;
+export declare function useRoute(path: string | readonly string[], { match, source }?: RouteOptions): Ref<RouteMatch | null>;

package/dist/hooks/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","names":[],"sources":["../../src/hooks/route.ts"],"sourcesContent":["import { getRouter } from '../router.ts';\nimport { useEffect } from './effect.ts';\nimport { type Ref, useRef } from './ref.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/** Use a reference (reactive state) bound to route matching. */\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"}
+{"version":3,"file":"route.js","names":[],"sources":["../../src/hooks/route.ts"],"sourcesContent":["import { getRouter } from '../router.ts';\nimport { useEffect } from './effect.ts';\nimport { type Ref, useRef } from './ref.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 RouteMatch = readonly [string, ...string[]] & { readonly groups: Record<string, string> };\n\n/** Use a reference (reactive state) bound to route matching. */\nexport function useRoute(\n  path: string | readonly string[],\n  { match = 'prefix', source = 'pathname' }: RouteOptions = {},\n): Ref<RouteMatch | 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<RouteMatch | 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): RouteMatch | 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 RouteMatch | null;\n  }\n}\n"],"mappings":";;;;;AAaA,SAAgB,EACd,GACA,EAAE,WAAQ,UAAU,YAAS,eAA6B,EAAE,EACpC;CACxB,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,EAA0B,EAAS,EAAS,MAAM,CAAC;AAMpE,QAJA,EAAU,CAAC,EAAS,GAAG,MAAU;AAC/B,IAAS,QAAQ,EAAS,EAAM;GAChC,EAEK;CAEP,SAAS,EAAS,GAAkC;EAClD,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/index.d.ts

@@ -1,9 +1,14 @@
 export * from './component.ts';
+export * from './hooks/async.ts';
 export * from './hooks/attributes.ts';
-export * from './hooks/child-effect.ts';
+export * from './hooks/child.ts';
+export * from './hooks/disconnect.ts';
+export * from './hooks/document.ts';
 export * from './hooks/effect.ts';
+export * from './hooks/form.ts';
 export * from './hooks/host.ts';
-export * from './hooks/loading.ts';
+export * from './hooks/internals.ts';
+export * from './hooks/parent.ts';
 export * from './hooks/ref.ts';
 export * from './hooks/route.ts';
 export * from './hooks/store.ts';

package/dist/index.js

@@ -1,13 +1,18 @@
 import { useRef as e } from "./hooks/ref.js";
 import { defineComponent as t } from "./component.js";
-import { useEffect as n } from "./hooks/effect.js";
-import { useHost as r } from "./hooks/host.js";
-import { useAttributes as i } from "./hooks/attributes.js";
-import { useChildEffect as a } from "./hooks/child-effect.js";
-import { useLoading as o } from "./hooks/loading.js";
-import { createStore as s } from "./store.js";
-import { getRouter as c } from "./router.js";
-import { useStore as l } from "./hooks/store.js";
-import { useRoute as u } from "./hooks/route.js";
-import { html as d } from "./html.js";
-export { s as createStore, t as defineComponent, c as getRouter, d as h, d as html, i as useAttributes, a as useChildEffect, n as useEffect, r as useHost, o as useLoading, e as useRef, u as useRoute, l as useStore };
+import { useDisconnectCallback as n } from "./hooks/disconnect.js";
+import { useEffect as r } from "./hooks/effect.js";
+import { useAsync as i } from "./hooks/async.js";
+import { useHost as a } from "./hooks/host.js";
+import { useAttributes as o } from "./hooks/attributes.js";
+import { useChildEffect as s } from "./hooks/child.js";
+import { useDocument as c } from "./hooks/document.js";
+import { useForm as l, useFormDisabled as u, useFormResetCallback as d, useFormRestoreCallback as f } from "./hooks/form.js";
+import { useElementInternals as p } from "./hooks/internals.js";
+import { useParent as m } from "./hooks/parent.js";
+import { createStore as h } from "./store.js";
+import { getRouter as g } from "./router.js";
+import { useStore as _ } from "./hooks/store.js";
+import { useRoute as v } from "./hooks/route.js";
+import { html as y } from "./html.js";
+export { h as createStore, t as defineComponent, g as getRouter, y as h, y as html, i as useAsync, o as useAttributes, s as useChildEffect, n as useDisconnectCallback, c as useDocument, r as useEffect, p as useElementInternals, l as useForm, u as useFormDisabled, d as useFormResetCallback, f as useFormRestoreCallback, a as useHost, m as useParent, e as useRef, v as useRoute, _ as useStore };

package/dist/internal/controller.d.ts

@@ -0,0 +1,33 @@
+import { type ReadonlyRef, type Ref } from '../hooks/ref.ts';
+import { type Callbacks } from './callbacks.ts';
+export interface Controller {
+    readonly host: HTMLElement;
+    readonly onNotify: Callbacks;
+    readonly onDisconnect: Callbacks;
+    readonly refDocument: ReadonlyRef<Document>;
+    readonly refParent: ReadonlyRef<ParentNode | null>;
+    readonly formAssociated: {
+        readonly refForm: ReadonlyRef<HTMLFormElement | null>;
+        readonly refDisabled: ReadonlyRef<boolean>;
+        readonly onReset: Callbacks;
+        readonly onRestore: Callbacks<[state: string | File | FormData, reason: 'restore' | 'autocomplete']>;
+    } | undefined;
+    readonly createRef: <T>(value: T, onChange?: (value: T) => void) => Ref<T>;
+    readonly attachInternals: () => ElementInternals;
+    readonly connectedCallback: () => void;
+    readonly connectedMoveCallback: () => void;
+    readonly disconnectedCallback: () => void;
+    readonly adoptedCallback: () => void;
+    readonly formDisabledCallback: (disabled: boolean) => void;
+    readonly formResetCallback: () => void;
+    readonly formStateRestoreCallback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void;
+}
+export interface ControllerConfig {
+    readonly host: HTMLElement;
+    readonly formAssociated: boolean;
+    readonly render: (controller: Controller) => void;
+    readonly attachInternals: () => ElementInternals;
+}
+export declare const $$ref: unique symbol;
+export declare function getController(): Controller | undefined;
+export declare function createController({ host, formAssociated, render, attachInternals }: ControllerConfig): Controller;

package/dist/internal/controller.js

@@ -0,0 +1,72 @@
+import { createCallbacks as e } from "./callbacks.js";
+//#region src/internal/controller.ts
+var t = Symbol(), n = [];
+function r() {
+	return n.at(-1);
+}
+function i({ host: r, formAssociated: i, render: a, attachInternals: o }) {
+	let s = !1, c = !1, l, u, d = e(), f = (e, n) => {
+		let r = e;
+		return {
+			[t]: !0,
+			get value() {
+				return r;
+			},
+			set value(e) {
+				e !== r && (r = e, n?.(r), !(!c || s) && (s = !0, queueMicrotask(() => {
+					s = !1, d.run();
+				})));
+			}
+		};
+	}, p = {
+		host: r,
+		onNotify: d,
+		onDisconnect: e(),
+		refDocument: f(r.ownerDocument),
+		refParent: f(r.parentNode),
+		formAssociated: i ? {
+			refForm: f(null),
+			refDisabled: f(!1),
+			onReset: e(),
+			onRestore: e()
+		} : void 0,
+		createRef: f,
+		attachInternals: () => l ??= o(),
+		connectedCallback: () => {
+			c = !0, p.refParent.value = r.parentNode;
+			try {
+				n.push(p), a(p);
+			} finally {
+				n.pop();
+			}
+			u?.type === "reset" ? p.formAssociated?.onReset.run() : u?.type === "restore" && p.formAssociated?.onRestore.run(u.state, u.reason), p.onNotify.run();
+		},
+		connectedMoveCallback: () => {
+			p.refParent.value = r.parentNode, p.onNotify.run();
+		},
+		disconnectedCallback: () => {
+			p.onNotify.clear(), p.formAssociated?.onReset.clear(), p.formAssociated?.onRestore.clear(), p.onDisconnect.runAndClear();
+		},
+		adoptedCallback: () => {
+			p.refDocument.value = r.ownerDocument, p.onNotify.run();
+		},
+		formDisabledCallback: (e) => {
+			p.formAssociated && (p.formAssociated.refDisabled.value = e, p.onNotify.run());
+		},
+		formResetCallback: () => {
+			p.formAssociated && (c ? p.formAssociated.onReset.run() : u = { type: "reset" });
+		},
+		formStateRestoreCallback: (e, t) => {
+			p.formAssociated && (c ? p.formAssociated.onRestore.run(e, t) : u = {
+				type: "restore",
+				state: e,
+				reason: t
+			});
+		}
+	};
+	return p;
+}
+//#endregion
+export { i as createController, r as getController };
+
+//# sourceMappingURL=controller.js.map

package/dist/internal/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":[],"sources":["../../src/internal/controller.ts"],"sourcesContent":["import { type ReadonlyRef, type Ref } from '../hooks/ref.ts';\nimport { type Callbacks, createCallbacks } from './callbacks.ts';\n\nexport interface Controller {\n  readonly host: HTMLElement;\n  readonly onNotify: Callbacks;\n  readonly onDisconnect: Callbacks;\n  readonly refDocument: ReadonlyRef<Document>;\n  readonly refParent: ReadonlyRef<ParentNode | null>;\n  readonly formAssociated:\n    | {\n        readonly refForm: ReadonlyRef<HTMLFormElement | null>;\n        readonly refDisabled: ReadonlyRef<boolean>;\n        readonly onReset: Callbacks;\n        readonly onRestore: Callbacks<[state: string | File | FormData, reason: 'restore' | 'autocomplete']>;\n      }\n    | undefined;\n  readonly createRef: <T>(value: T, onChange?: (value: T) => void) => Ref<T>;\n  readonly attachInternals: () => ElementInternals;\n  readonly connectedCallback: () => void;\n  readonly connectedMoveCallback: () => void;\n  readonly disconnectedCallback: () => void;\n  readonly adoptedCallback: () => void;\n  readonly formDisabledCallback: (disabled: boolean) => void;\n  readonly formResetCallback: () => void;\n  readonly formStateRestoreCallback: (state: string | File | FormData, reason: 'restore' | 'autocomplete') => void;\n}\n\nexport interface ControllerConfig {\n  readonly host: HTMLElement;\n  readonly formAssociated: boolean;\n  readonly render: (controller: Controller) => void;\n  readonly attachInternals: () => ElementInternals;\n}\n\nexport const $$ref = Symbol();\n\nconst controllers: Controller[] = [];\n\nexport function getController(): Controller | undefined {\n  return controllers.at(-1);\n}\n\nexport function createController({ host, formAssociated, render, attachInternals }: ControllerConfig): Controller {\n  let notifying = false;\n  let connected = false;\n  let internals: ElementInternals | undefined;\n\n  let deferredFormUpdate:\n    | { readonly type: 'reset' }\n    | { readonly type: 'restore'; state: string | File | FormData; reason: 'restore' | 'autocomplete' }\n    | undefined;\n\n  const onNotify = createCallbacks();\n\n  const createRef = <T>(initialValue: T, onChange?: (value: T) => void): Ref<T> => {\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        if (!connected || notifying) return;\n        notifying = true;\n\n        queueMicrotask(() => {\n          notifying = false;\n          onNotify.run();\n        });\n      },\n    };\n  };\n\n  const controller = {\n    host,\n    onNotify,\n    onDisconnect: createCallbacks(),\n    refDocument: createRef(host.ownerDocument),\n    refParent: createRef(host.parentNode),\n    formAssociated: formAssociated\n      ? {\n          refForm: createRef<HTMLFormElement | null>(null),\n          refDisabled: createRef(false),\n          onReset: createCallbacks(),\n          onRestore: createCallbacks(),\n        }\n      : undefined,\n    createRef,\n    attachInternals: () => {\n      return (internals ??= attachInternals());\n    },\n    connectedCallback: () => {\n      connected = true;\n      controller.refParent.value = host.parentNode;\n\n      try {\n        controllers.push(controller);\n        render(controller);\n      } finally {\n        controllers.pop();\n      }\n\n      if (deferredFormUpdate?.type === 'reset') {\n        controller.formAssociated?.onReset.run();\n      } else if (deferredFormUpdate?.type === 'restore') {\n        controller.formAssociated?.onRestore.run(deferredFormUpdate.state, deferredFormUpdate.reason);\n      }\n\n      controller.onNotify.run();\n    },\n    connectedMoveCallback: () => {\n      controller.refParent.value = host.parentNode;\n      controller.onNotify.run();\n    },\n    disconnectedCallback: () => {\n      controller.onNotify.clear();\n      controller.formAssociated?.onReset.clear();\n      controller.formAssociated?.onRestore.clear();\n      controller.onDisconnect.runAndClear();\n    },\n    adoptedCallback: () => {\n      controller.refDocument.value = host.ownerDocument;\n      controller.onNotify.run();\n    },\n    formDisabledCallback: (disabled: boolean) => {\n      if (!controller.formAssociated) return;\n      controller.formAssociated.refDisabled.value = disabled;\n      controller.onNotify.run();\n    },\n    formResetCallback: () => {\n      if (!controller.formAssociated) return;\n      if (connected) controller.formAssociated.onReset.run();\n      else deferredFormUpdate = { type: 'reset' };\n    },\n    formStateRestoreCallback: (state, reason) => {\n      if (!controller.formAssociated) return;\n      if (connected) controller.formAssociated.onRestore.run(state, reason);\n      else deferredFormUpdate = { type: 'restore', state, reason };\n    },\n  } satisfies Controller;\n\n  return controller;\n}\n"],"mappings":";;AAmCA,IAAa,IAAQ,QAAQ,EAEvB,IAA4B,EAAE;AAEpC,SAAgB,IAAwC;AACtD,QAAO,EAAY,GAAG,GAAG;;AAG3B,SAAgB,EAAiB,EAAE,SAAM,mBAAgB,WAAQ,sBAAiD;CAChH,IAAI,IAAY,IACZ,IAAY,IACZ,GAEA,GAKE,IAAW,GAAiB,EAE5B,KAAgB,GAAiB,MAA0C;EAC/E,IAAI,IAAQ;AAEZ,SAAO;IACJ,IAAQ;GACT,IAAI,QAAQ;AACV,WAAO;;GAET,IAAI,MAAM,GAAU;AACd,UAAa,MACjB,IAAQ,GACR,IAAW,EAAM,EACb,GAAC,KAAa,OAClB,IAAY,IAEZ,qBAAqB;AAEnB,KADA,IAAY,IACZ,EAAS,KAAK;MACd;;GAEL;IAGG,IAAa;EACjB;EACA;EACA,cAAc,GAAiB;EAC/B,aAAa,EAAU,EAAK,cAAc;EAC1C,WAAW,EAAU,EAAK,WAAW;EACrC,gBAAgB,IACZ;GACE,SAAS,EAAkC,KAAK;GAChD,aAAa,EAAU,GAAM;GAC7B,SAAS,GAAiB;GAC1B,WAAW,GAAiB;GAC7B,GACD,KAAA;EACJ;EACA,uBACU,MAAc,GAAiB;EAEzC,yBAAyB;AAEvB,GADA,IAAY,IACZ,EAAW,UAAU,QAAQ,EAAK;AAElC,OAAI;AAEF,IADA,EAAY,KAAK,EAAW,EAC5B,EAAO,EAAW;aACV;AACR,MAAY,KAAK;;AASnB,GANI,GAAoB,SAAS,UAC/B,EAAW,gBAAgB,QAAQ,KAAK,GAC/B,GAAoB,SAAS,aACtC,EAAW,gBAAgB,UAAU,IAAI,EAAmB,OAAO,EAAmB,OAAO,EAG/F,EAAW,SAAS,KAAK;;EAE3B,6BAA6B;AAE3B,GADA,EAAW,UAAU,QAAQ,EAAK,YAClC,EAAW,SAAS,KAAK;;EAE3B,4BAA4B;AAI1B,GAHA,EAAW,SAAS,OAAO,EAC3B,EAAW,gBAAgB,QAAQ,OAAO,EAC1C,EAAW,gBAAgB,UAAU,OAAO,EAC5C,EAAW,aAAa,aAAa;;EAEvC,uBAAuB;AAErB,GADA,EAAW,YAAY,QAAQ,EAAK,eACpC,EAAW,SAAS,KAAK;;EAE3B,uBAAuB,MAAsB;AACtC,KAAW,mBAChB,EAAW,eAAe,YAAY,QAAQ,GAC9C,EAAW,SAAS,KAAK;;EAE3B,yBAAyB;AAClB,KAAW,mBACZ,IAAW,EAAW,eAAe,QAAQ,KAAK,GACjD,IAAqB,EAAE,MAAM,SAAS;;EAE7C,2BAA2B,GAAO,MAAW;AACtC,KAAW,mBACZ,IAAW,EAAW,eAAe,UAAU,IAAI,GAAO,EAAO,GAChE,IAAqB;IAAE,MAAM;IAAW;IAAO;IAAQ;;EAE/D;AAED,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seahax/elemental",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Functional, reactive, web component base library.",
   "repository": {
     "type": "git",

package/dist/hooks/child-effect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"child-effect.js","names":[],"sources":["../../src/hooks/child-effect.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { useHost } from './host.ts';\nimport { useRef } from './ref.ts';\n\n/** React to child list changes (non-recursive). */\nexport function useChildEffect(callback: () => (() => void) | void): void {\n  const host = useHost();\n  const ref = useRef(0);\n\n  const observer = new MutationObserver((mutation) => {\n    if (mutation.some((m) => m.type === 'childList')) {\n      ref.value = (ref.value + 1) % Number.MAX_SAFE_INTEGER;\n    }\n  });\n\n  useEffect([], () => {\n    observer.observe(host, { childList: true });\n    return () => observer.disconnect();\n  });\n\n  useEffect([ref], () => {\n    return callback();\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,EAAe,GAA2C;CACxE,IAAM,IAAO,GAAS,EAChB,IAAM,EAAO,EAAE,EAEf,IAAW,IAAI,kBAAkB,MAAa;AAClD,EAAI,EAAS,MAAM,MAAM,EAAE,SAAS,YAAY,KAC9C,EAAI,SAAS,EAAI,QAAQ;GAE3B;AAOF,CALA,EAAU,EAAE,SACV,EAAS,QAAQ,GAAM,EAAE,WAAW,IAAM,CAAC,QAC9B,EAAS,YAAY,EAClC,EAEF,EAAU,CAAC,EAAI,QACN,GAAU,CACjB"}

package/dist/hooks/context.d.ts

@@ -1,3 +0,0 @@
-import { type Context } from '../internal/context.ts';
-/** @internal Get the context of the currently rendering component. */
-export declare function useContext(): Context;

package/dist/hooks/context.js

@@ -1,11 +0,0 @@
-import { contextStack as e } from "../internal/context.js";
-//#region src/hooks/context.ts
-function t() {
-	let t = e.at(-1);
-	if (!t) throw Error("hooks must be called inside a render function");
-	return t;
-}
-//#endregion
-export { t as useContext };
-
-//# sourceMappingURL=context.js.map

package/dist/hooks/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/hooks/context.ts"],"sourcesContent":["import { type Context, contextStack } from '../internal/context.ts';\n\n/** @internal Get the context of the currently rendering component. */\nexport function useContext(): Context {\n  const context = contextStack.at(-1);\n  if (!context) throw new Error('hooks must be called inside a render function');\n  return context;\n}\n"],"mappings":";;AAGA,SAAgB,IAAsB;CACpC,IAAM,IAAU,EAAa,GAAG,GAAG;AACnC,KAAI,CAAC,EAAS,OAAU,MAAM,gDAAgD;AAC9E,QAAO"}

package/dist/hooks/loading.d.ts

@@ -1,11 +0,0 @@
-import { type ReadonlyRef, type Ref, type RefValues } from './ref.ts';
-export interface LoadingValue<TValue> {
-    readonly value: TValue | undefined;
-    readonly error: unknown;
-    readonly isLoading: boolean;
-}
-export interface LoadingOptions {
-    readonly debounceMs?: number;
-}
-/** Use a reference (reactive state) bound to an async loader function. */
-export declare function useLoading<const TDeps extends readonly ReadonlyRef<any>[], TValue>(deps: TDeps, callback: (signal: AbortSignal, ...values: RefValues<TDeps>) => Promise<TValue>, { debounceMs }?: LoadingOptions): Ref<LoadingValue<TValue>>;

package/dist/hooks/loading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"loading.js","names":[],"sources":["../../src/hooks/loading.ts"],"sourcesContent":["import { useEffect } from './effect.ts';\nimport { type ReadonlyRef, type Ref, type RefValues, useRef } from './ref.ts';\n\nexport interface LoadingValue<TValue> {\n  readonly value: TValue | undefined;\n  readonly error: unknown;\n  readonly isLoading: boolean;\n}\n\nexport interface LoadingOptions {\n  readonly debounceMs?: number;\n}\n\n/** Use a reference (reactive state) bound to an async loader function. */\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>>({ value: undefined, error: undefined, isLoading: true });\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 = { isLoading: false, value, error: undefined };\n      })\n      .catch((error: unknown) => {\n        if (ac.signal.aborted) return;\n        ref.value = { isLoading: 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,OAAO,KAAA;EAAW,OAAO,KAAA;EAAW,WAAW;EAAM,CAAC,EAC7F,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,WAAW;IAAO;IAAO,OAAO,KAAA;IAAW;IACzD,CACD,OAAO,MAAmB;AACrB,KAAG,OAAO,YACd,EAAI,QAAQ;IAAE,WAAW;IAAO,OAAO,KAAA;IAAW;IAAO;IACzD,EAEJ,IAAe,UACF,EAAG,OAAO;GACvB,EAGF,EAAU,EAAE,cAAe,IAAe,GAAM,EAEzC"}

package/dist/internal/context.d.ts

@@ -1,13 +0,0 @@
-import { type Callbacks } from './callbacks.ts';
-export interface Context {
-    readonly host: HTMLElement;
-    readonly onNotify: Callbacks;
-    readonly onDisconnect: Callbacks;
-    readonly notify: () => void;
-}
-export interface ContextController {
-    readonly connect: (callback: () => void) => void;
-    readonly disconnect: () => void;
-}
-export declare const contextStack: Context[];
-export declare function createContextController(host: HTMLElement): ContextController;

package/dist/internal/context.js

@@ -1,32 +0,0 @@
-import { createCallbacks as e } from "./callbacks.js";
-//#region src/internal/context.ts
-var t = [];
-function n(n) {
-	let r = !1, i = {
-		host: n,
-		onNotify: e(),
-		onDisconnect: e(),
-		notify: () => {
-			r || (r = !0, queueMicrotask(() => {
-				r = !1, i.onNotify.run();
-			}));
-		}
-	};
-	return {
-		connect: (e) => {
-			try {
-				t.push(i), e();
-			} finally {
-				t.pop();
-			}
-			i.onNotify.run();
-		},
-		disconnect: () => {
-			i.onNotify.clear(), i.onDisconnect.runAndClear();
-		}
-	};
-}
-//#endregion
-export { t as contextStack, n as createContextController };
-
-//# sourceMappingURL=context.js.map

package/dist/internal/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/internal/context.ts"],"sourcesContent":["import { type Callbacks, createCallbacks } from './callbacks.ts';\n\nexport interface Context {\n  readonly host: HTMLElement;\n  readonly onNotify: Callbacks;\n  readonly onDisconnect: Callbacks;\n  readonly notify: () => void;\n}\n\nexport interface ContextController {\n  readonly connect: (callback: () => void) => void;\n  readonly disconnect: () => void;\n}\n\nexport const contextStack: Context[] = [];\n\nexport function createContextController(host: HTMLElement): ContextController {\n  let notifying = false;\n\n  const context: Context = {\n    host,\n    onNotify: createCallbacks(),\n    onDisconnect: createCallbacks(),\n    notify: () => {\n      if (notifying) return;\n      notifying = true;\n\n      queueMicrotask(() => {\n        notifying = false;\n        context.onNotify.run();\n      });\n    },\n  };\n\n  return {\n    connect: (callback) => {\n      try {\n        contextStack.push(context);\n        callback();\n      } finally {\n        contextStack.pop();\n      }\n\n      context.onNotify.run();\n    },\n    disconnect: () => {\n      context.onNotify.clear();\n      context.onDisconnect.runAndClear();\n    },\n  };\n}\n"],"mappings":";;AAcA,IAAa,IAA0B,EAAE;AAEzC,SAAgB,EAAwB,GAAsC;CAC5E,IAAI,IAAY,IAEV,IAAmB;EACvB;EACA,UAAU,GAAiB;EAC3B,cAAc,GAAiB;EAC/B,cAAc;AACR,SACJ,IAAY,IAEZ,qBAAqB;AAEnB,IADA,IAAY,IACZ,EAAQ,SAAS,KAAK;KACtB;;EAEL;AAED,QAAO;EACL,UAAU,MAAa;AACrB,OAAI;AAEF,IADA,EAAa,KAAK,EAAQ,EAC1B,GAAU;aACF;AACR,MAAa,KAAK;;AAGpB,KAAQ,SAAS,KAAK;;EAExB,kBAAkB;AAEhB,GADA,EAAQ,SAAS,OAAO,EACxB,EAAQ,aAAa,aAAa;;EAErC"}