@fluixi/web-components 0.0.0-stage → 1.0.0-alpha.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ibrahima Touré
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,32 @@
-# Temporary Holding Version
+# @fluixi/web-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Standard custom elements with Fluixi's reactivity inside. They work in any page and any
+framework, and in a Fluixi app they render on the server and hydrate like the rest of the page.
+
+```ts
+import { defineCustomElement, prop, typedElement } from '@fluixi/web-components';
+import { html } from '@fluixi/dom';
+import { signal } from '@fluixi/reactive/signal';
+
+class FxCounter extends typedElement({ step: prop.number(1) }) {
+  #count = signal(0);
+
+  protected override render() {
+    return html`<button @click=${() => this.#count.set(this.#count() + this.step)}>${() => this.#count()}</button>`;
+  }
+}
+
+defineCustomElement('fx-counter', FxCounter);
+```
+
+- **Props**: `prop.string`, `number`, `boolean`, `object`, `custom` and `any`; a property and
+  its attribute share one signal, with `reflect` and `attribute` options.
+- **Events**: `this.emit(type, detail)`, typed for consumers through `ElementAttributes`.
+- **Styles**: light DOM by default; `static shadow` and shared constructed `static styles`.
+- **Context**: `provide` and `consume` between elements, interoperable with `@lit/context`, and
+  the app's own providers.
+- **Forms and focus**: `FormAssociated`, `rovingFocus`, `trapFocus`, `tabbables`.
+- **Setup form**: `defineElement(name, setup, { props })` without a class.
+- **Loading**: `defineWhenUsed` registers an element only once its tag appears.
+
+Documentation: [Web components](https://docs.fluixi.com/v1/en/web-components).

package/dist/context.cjs

@@ -0,0 +1,162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/context.ts
+var context_exports = {};
+__export(context_exports, {
+  ContextProviderEvent: () => ContextProviderEvent,
+  ContextRequestEvent: () => ContextRequestEvent,
+  announceOwner: () => announceOwner,
+  consumeContext: () => consumeContext,
+  provideContext: () => provideContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_signal = require("@fluixi/reactive/signal");
+var ContextRequestEvent = class extends Event {
+  constructor(context, contextTarget, callback, subscribe) {
+    super("context-request", { bubbles: true, composed: true });
+    this.context = context;
+    this.contextTarget = contextTarget;
+    this.callback = callback;
+    this.subscribe = subscribe;
+  }
+};
+var ContextProviderEvent = class extends Event {
+  constructor(context, contextTarget) {
+    super("context-provider", { bubbles: true, composed: true });
+    this.context = context;
+    this.contextTarget = contextTarget;
+  }
+};
+var ContextOwnerEvent = class extends Event {
+  constructor(element) {
+    super("fluixi-context-owner");
+    this.element = element;
+  }
+};
+function announceOwner(element) {
+  element.ownerDocument.dispatchEvent(new ContextOwnerEvent(element));
+}
+function matches(key, context) {
+  return key === context || typeof key === "object" && key !== null && key.id === context.id;
+}
+function describe(context) {
+  return context.id.description ?? "context";
+}
+function provideContext(host, context, value) {
+  const read = typeof value === "function" ? value : () => value;
+  const subscribers = /* @__PURE__ */ new Map();
+  const onRequest = (event) => {
+    const request = event;
+    if (!matches(request.context, context) || request.contextTarget === host) return;
+    event.stopImmediatePropagation();
+    if (!request.subscribe) {
+      request.callback((0, import_signal.untrack)(read));
+      return;
+    }
+    const unsubscribe = () => void subscribers.delete(request.callback);
+    subscribers.set(request.callback, unsubscribe);
+    request.callback((0, import_signal.untrack)(read), unsubscribe);
+  };
+  const dom = typeof host.addEventListener === "function";
+  if (dom) host.addEventListener("context-request", onRequest);
+  const owner = (0, import_signal.getOwner)();
+  let first = true;
+  const stopTracking = (0, import_signal.effect)(
+    () => {
+      const next = read();
+      if (owner) (owner.contexts ??= /* @__PURE__ */ new Map()).set(context.id, next);
+      if (first) {
+        first = false;
+        return;
+      }
+      for (const [callback, unsubscribe] of subscribers) callback(next, unsubscribe);
+    },
+    void 0,
+    { name: `provide ${describe(context)}` }
+  );
+  if (dom) {
+    queueMicrotask(() => {
+      if (!stopped) host.dispatchEvent(new ContextProviderEvent(context, host));
+    });
+  }
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    if (dom) host.removeEventListener("context-request", onRequest);
+    stopTracking();
+    subscribers.clear();
+  };
+  (0, import_signal.onCleanup)(stop);
+  return stop;
+}
+function consumeContext(host, context, options = {}) {
+  const subscribe = options.subscribe ?? true;
+  const owner = (0, import_signal.getOwner)();
+  const fromTree = () => (0, import_signal.runWithOwner)(owner, () => (0, import_signal.useContext)(context));
+  const value = (0, import_signal.signal)(fromTree(), { name: describe(context) });
+  if (typeof host.dispatchEvent !== "function") return () => value();
+  let answered = false;
+  let unsubscribe;
+  const ask = () => {
+    host.dispatchEvent(
+      new ContextRequestEvent(
+        context,
+        host,
+        (next, stop) => {
+          answered = true;
+          if (stop) unsubscribe = stop;
+          value.set(() => next);
+        },
+        subscribe
+      )
+    );
+  };
+  const doc = host.ownerDocument;
+  const onProvider = (event) => {
+    const announced = event;
+    if (answered || !matches(announced.context, context)) return;
+    if (containsComposed(announced.contextTarget, host)) ask();
+  };
+  const onOwner = (event) => {
+    if (answered || !containsComposed(event.element, host)) return;
+    const next = fromTree();
+    value.set(() => next);
+  };
+  ask();
+  if (!answered) {
+    doc.addEventListener("context-provider", onProvider);
+    doc.addEventListener("fluixi-context-owner", onOwner);
+  }
+  (0, import_signal.onCleanup)(() => {
+    unsubscribe?.();
+    doc.removeEventListener("context-provider", onProvider);
+    doc.removeEventListener("fluixi-context-owner", onOwner);
+  });
+  return () => value();
+}
+function containsComposed(container, node) {
+  let at = node;
+  while (at) {
+    if (at === container) return true;
+    at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+  }
+  return false;
+}

package/dist/context.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Context between elements, over the Web Components Community Group protocol.
+ *
+ * A consumer dispatches `context-request` from itself; it bubbles, crosses shadow roots, and
+ * the nearest provider of that context answers and stops it. With `subscribe` the provider
+ * calls back again on every change. A provider that turns up late (its tag upgraded after the
+ * consumer asked) announces itself with `context-provider`, and consumers still waiting ask
+ * again. Lit's `@lit/context` speaks the same protocol, so the two interoperate when they share
+ * the context object.
+ *
+ * The key is a Fluixi context (`createContext` from `@fluixi/core` or `@fluixi/reactive`), which
+ * also joins the two trees: an element that finds no provider above it in the DOM reads the
+ * owner tree it was created in, and what an element provides is visible to `useContext` in the
+ * components it renders.
+ */
+import { type Accessor } from '@fluixi/reactive/signal';
+/** A context key. `createContext` in `@fluixi/core` and `@fluixi/reactive` both return one. */
+export interface ElementContext<T> {
+    readonly id: symbol;
+    readonly defaultValue?: T;
+}
+type ContextCallback<T> = (value: T, unsubscribe?: () => void) => void;
+/** Asks for a context. Field names and order follow the protocol, and so Lit. */
+export declare class ContextRequestEvent<T = unknown> extends Event {
+    readonly context: unknown;
+    readonly contextTarget: Element;
+    readonly callback: ContextCallback<T>;
+    readonly subscribe?: boolean | undefined;
+    constructor(context: unknown, contextTarget: Element, callback: ContextCallback<T>, subscribe?: boolean | undefined);
+}
+/** A provider that has just become available, so a consumer still waiting can ask again. */
+export declare class ContextProviderEvent extends Event {
+    readonly context: unknown;
+    readonly contextTarget: Element;
+    constructor(context: unknown, contextTarget: Element);
+}
+/** Tell consumers under `element` that the owner tree above them changed. */
+export declare function announceOwner(element: Element): void;
+declare global {
+    interface HTMLElementEventMap {
+        'context-request': ContextRequestEvent;
+        'context-provider': ContextProviderEvent;
+    }
+}
+/**
+ * Answer `context-request` for `context` from inside `host`. `value` is a value or an accessor;
+ * with an accessor, subscribed consumers are called again when it changes. Stops when the
+ * reactive scope it was called in ends: call it in `render()`.
+ */
+export declare function provideContext<T>(host: HTMLElement, context: ElementContext<T>, value: T | Accessor<T>): () => void;
+export interface ConsumeOptions {
+    /** Keep receiving the provider's changes. Defaults to true. */
+    subscribe?: boolean;
+}
+/**
+ * The nearest value of `context` above `host`, as an accessor.
+ *
+ * Asked of the DOM first. With no provider there, it is the value in the owner tree the element
+ * was created in, so `<Ctx.Provider>` in a Fluixi app reaches an element rendered inside it, and
+ * otherwise the context's default. A provider that appears later takes over. Stops when the
+ * reactive scope it was called in ends: call it in `render()`.
+ */
+export declare function consumeContext<T>(host: HTMLElement, context: ElementContext<T>, options?: ConsumeOptions): Accessor<T>;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAA0E,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEhI,+FAA+F;AAC/F,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;CAC3B;AAED,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;AAEvE,iFAAiF;AACjF,qBAAa,mBAAmB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,KAAK;IAEvD,QAAQ,CAAC,OAAO,EAAE,OAAO;IACzB,QAAQ,CAAC,aAAa,EAAE,OAAO;IAC/B,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO;gBAHnB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,EAC5B,SAAS,CAAC,EAAE,OAAO,YAAA;CAI/B;AAED,4FAA4F;AAC5F,qBAAa,oBAAqB,SAAQ,KAAK;IAE3C,QAAQ,CAAC,OAAO,EAAE,OAAO;IACzB,QAAQ,CAAC,aAAa,EAAE,OAAO;gBADtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,OAAO;CAIlC;AAaD,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAEpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,iBAAiB,EAAE,mBAAmB,CAAC;QACvC,kBAAkB,EAAE,oBAAoB,CAAC;KAC1C;CACF;AAcD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAyDnH;AAED,MAAM,WAAW,cAAc;IAC7B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,GAAE,cAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAoD1H"}

package/dist/context.js

@@ -0,0 +1,192 @@
+/**
+ * Context between elements, over the Web Components Community Group protocol.
+ *
+ * A consumer dispatches `context-request` from itself; it bubbles, crosses shadow roots, and
+ * the nearest provider of that context answers and stops it. With `subscribe` the provider
+ * calls back again on every change. A provider that turns up late (its tag upgraded after the
+ * consumer asked) announces itself with `context-provider`, and consumers still waiting ask
+ * again. Lit's `@lit/context` speaks the same protocol, so the two interoperate when they share
+ * the context object.
+ *
+ * The key is a Fluixi context (`createContext` from `@fluixi/core` or `@fluixi/reactive`), which
+ * also joins the two trees: an element that finds no provider above it in the DOM reads the
+ * owner tree it was created in, and what an element provides is visible to `useContext` in the
+ * components it renders.
+ */
+import { effect, getOwner, onCleanup, runWithOwner, signal, untrack, useContext } from '@fluixi/reactive/signal';
+/** Asks for a context. Field names and order follow the protocol, and so Lit. */
+export class ContextRequestEvent extends Event {
+    context;
+    contextTarget;
+    callback;
+    subscribe;
+    constructor(context, contextTarget, callback, subscribe) {
+        super('context-request', { bubbles: true, composed: true });
+        this.context = context;
+        this.contextTarget = contextTarget;
+        this.callback = callback;
+        this.subscribe = subscribe;
+    }
+}
+/** A provider that has just become available, so a consumer still waiting can ask again. */
+export class ContextProviderEvent extends Event {
+    context;
+    contextTarget;
+    constructor(context, contextTarget) {
+        super('context-provider', { bubbles: true, composed: true });
+        this.context = context;
+        this.contextTarget = contextTarget;
+    }
+}
+/**
+ * An element has just been linked to the app it was rendered in: hydration reached it after it
+ * had rendered. Consumers inside it that found no provider read the owner tree again. Fluixi's
+ * own, not part of the protocol.
+ */
+class ContextOwnerEvent extends Event {
+    element;
+    constructor(element) {
+        super('fluixi-context-owner');
+        this.element = element;
+    }
+}
+/** Tell consumers under `element` that the owner tree above them changed. */
+export function announceOwner(element) {
+    element.ownerDocument.dispatchEvent(new ContextOwnerEvent(element));
+}
+/**
+ * The same context. Identity first, as the protocol has it; then the Fluixi id, because
+ * `@fluixi/core`'s `createContext` wraps the reactive one in a second object with the same id.
+ */
+function matches(key, context) {
+    return key === context || (typeof key === 'object' && key !== null && key.id === context.id);
+}
+function describe(context) {
+    return context.id.description ?? 'context';
+}
+/**
+ * Answer `context-request` for `context` from inside `host`. `value` is a value or an accessor;
+ * with an accessor, subscribed consumers are called again when it changes. Stops when the
+ * reactive scope it was called in ends: call it in `render()`.
+ */
+export function provideContext(host, context, value) {
+    const read = typeof value === 'function' ? value : () => value;
+    const subscribers = new Map();
+    const onRequest = (event) => {
+        const request = event;
+        // The host asking for its own context wants the one above it.
+        if (!matches(request.context, context) || request.contextTarget === host)
+            return;
+        event.stopImmediatePropagation();
+        if (!request.subscribe) {
+            request.callback(untrack(read));
+            return;
+        }
+        const unsubscribe = () => void subscribers.delete(request.callback);
+        subscribers.set(request.callback, unsubscribe);
+        request.callback(untrack(read), unsubscribe);
+    };
+    // A server render has no DOM events: the owner tree below carries the value there.
+    const dom = typeof host.addEventListener === 'function';
+    if (dom)
+        host.addEventListener('context-request', onRequest);
+    // Fluixi components the element renders read it with `useContext`, from the owner `render()`
+    // runs under.
+    const owner = getOwner();
+    let first = true;
+    const stopTracking = effect(() => {
+        const next = read();
+        if (owner)
+            (owner.contexts ??= new Map()).set(context.id, next);
+        if (first) {
+            first = false;
+            return;
+        }
+        for (const [callback, unsubscribe] of subscribers)
+            callback(next, unsubscribe);
+    }, undefined, { name: `provide ${describe(context)}` });
+    // After the render that called this has placed its content: a light DOM provider takes its
+    // children out while it renders, so a consumer among them is not inside it yet.
+    if (dom) {
+        queueMicrotask(() => {
+            if (!stopped)
+                host.dispatchEvent(new ContextProviderEvent(context, host));
+        });
+    }
+    let stopped = false;
+    const stop = () => {
+        if (stopped)
+            return;
+        stopped = true;
+        if (dom)
+            host.removeEventListener('context-request', onRequest);
+        stopTracking();
+        subscribers.clear();
+    };
+    onCleanup(stop);
+    return stop;
+}
+/**
+ * The nearest value of `context` above `host`, as an accessor.
+ *
+ * Asked of the DOM first. With no provider there, it is the value in the owner tree the element
+ * was created in, so `<Ctx.Provider>` in a Fluixi app reaches an element rendered inside it, and
+ * otherwise the context's default. A provider that appears later takes over. Stops when the
+ * reactive scope it was called in ends: call it in `render()`.
+ */
+export function consumeContext(host, context, options = {}) {
+    const subscribe = options.subscribe ?? true;
+    // The owner tree as it stands now, and again if hydration links this element up later.
+    const owner = getOwner();
+    const fromTree = () => runWithOwner(owner, () => useContext(context));
+    const value = signal(fromTree(), { name: describe(context) });
+    // A server render: no DOM to ask, the owner tree is the answer.
+    if (typeof host.dispatchEvent !== 'function')
+        return () => value();
+    let answered = false;
+    let unsubscribe;
+    const ask = () => {
+        host.dispatchEvent(new ContextRequestEvent(context, host, (next, stop) => {
+            answered = true;
+            if (stop)
+                unsubscribe = stop;
+            // `.set` calls a function argument as an updater; a context can hold a function.
+            value.set(() => next);
+        }, subscribe));
+    };
+    const doc = host.ownerDocument;
+    const onProvider = (event) => {
+        const announced = event;
+        if (answered || !matches(announced.context, context))
+            return;
+        if (containsComposed(announced.contextTarget, host))
+            ask();
+    };
+    const onOwner = (event) => {
+        if (answered || !containsComposed(event.element, host))
+            return;
+        const next = fromTree();
+        value.set(() => next);
+    };
+    ask();
+    if (!answered) {
+        doc.addEventListener('context-provider', onProvider);
+        doc.addEventListener('fluixi-context-owner', onOwner);
+    }
+    onCleanup(() => {
+        unsubscribe?.();
+        doc.removeEventListener('context-provider', onProvider);
+        doc.removeEventListener('fluixi-context-owner', onOwner);
+    });
+    return () => value();
+}
+/** Whether `node` sits under `container` once shadow roots are looked through. */
+function containsComposed(container, node) {
+    let at = node;
+    while (at) {
+        if (at === container)
+            return true;
+        at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+    }
+    return false;
+}

package/dist/context.mjs

@@ -0,0 +1,141 @@
+// src/context.ts
+import { effect, getOwner, onCleanup, runWithOwner, signal, untrack, useContext } from "@fluixi/reactive/signal";
+var ContextRequestEvent = class extends Event {
+  constructor(context, contextTarget, callback, subscribe) {
+    super("context-request", { bubbles: true, composed: true });
+    this.context = context;
+    this.contextTarget = contextTarget;
+    this.callback = callback;
+    this.subscribe = subscribe;
+  }
+};
+var ContextProviderEvent = class extends Event {
+  constructor(context, contextTarget) {
+    super("context-provider", { bubbles: true, composed: true });
+    this.context = context;
+    this.contextTarget = contextTarget;
+  }
+};
+var ContextOwnerEvent = class extends Event {
+  constructor(element) {
+    super("fluixi-context-owner");
+    this.element = element;
+  }
+};
+function announceOwner(element) {
+  element.ownerDocument.dispatchEvent(new ContextOwnerEvent(element));
+}
+function matches(key, context) {
+  return key === context || typeof key === "object" && key !== null && key.id === context.id;
+}
+function describe(context) {
+  return context.id.description ?? "context";
+}
+function provideContext(host, context, value) {
+  const read = typeof value === "function" ? value : () => value;
+  const subscribers = /* @__PURE__ */ new Map();
+  const onRequest = (event) => {
+    const request = event;
+    if (!matches(request.context, context) || request.contextTarget === host) return;
+    event.stopImmediatePropagation();
+    if (!request.subscribe) {
+      request.callback(untrack(read));
+      return;
+    }
+    const unsubscribe = () => void subscribers.delete(request.callback);
+    subscribers.set(request.callback, unsubscribe);
+    request.callback(untrack(read), unsubscribe);
+  };
+  const dom = typeof host.addEventListener === "function";
+  if (dom) host.addEventListener("context-request", onRequest);
+  const owner = getOwner();
+  let first = true;
+  const stopTracking = effect(
+    () => {
+      const next = read();
+      if (owner) (owner.contexts ??= /* @__PURE__ */ new Map()).set(context.id, next);
+      if (first) {
+        first = false;
+        return;
+      }
+      for (const [callback, unsubscribe] of subscribers) callback(next, unsubscribe);
+    },
+    void 0,
+    { name: `provide ${describe(context)}` }
+  );
+  if (dom) {
+    queueMicrotask(() => {
+      if (!stopped) host.dispatchEvent(new ContextProviderEvent(context, host));
+    });
+  }
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    if (dom) host.removeEventListener("context-request", onRequest);
+    stopTracking();
+    subscribers.clear();
+  };
+  onCleanup(stop);
+  return stop;
+}
+function consumeContext(host, context, options = {}) {
+  const subscribe = options.subscribe ?? true;
+  const owner = getOwner();
+  const fromTree = () => runWithOwner(owner, () => useContext(context));
+  const value = signal(fromTree(), { name: describe(context) });
+  if (typeof host.dispatchEvent !== "function") return () => value();
+  let answered = false;
+  let unsubscribe;
+  const ask = () => {
+    host.dispatchEvent(
+      new ContextRequestEvent(
+        context,
+        host,
+        (next, stop) => {
+          answered = true;
+          if (stop) unsubscribe = stop;
+          value.set(() => next);
+        },
+        subscribe
+      )
+    );
+  };
+  const doc = host.ownerDocument;
+  const onProvider = (event) => {
+    const announced = event;
+    if (answered || !matches(announced.context, context)) return;
+    if (containsComposed(announced.contextTarget, host)) ask();
+  };
+  const onOwner = (event) => {
+    if (answered || !containsComposed(event.element, host)) return;
+    const next = fromTree();
+    value.set(() => next);
+  };
+  ask();
+  if (!answered) {
+    doc.addEventListener("context-provider", onProvider);
+    doc.addEventListener("fluixi-context-owner", onOwner);
+  }
+  onCleanup(() => {
+    unsubscribe?.();
+    doc.removeEventListener("context-provider", onProvider);
+    doc.removeEventListener("fluixi-context-owner", onOwner);
+  });
+  return () => value();
+}
+function containsComposed(container, node) {
+  let at = node;
+  while (at) {
+    if (at === container) return true;
+    at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+  }
+  return false;
+}
+export {
+  ContextProviderEvent,
+  ContextRequestEvent,
+  announceOwner,
+  consumeContext,
+  provideContext
+};