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

package/dist/element.cjs

@@ -0,0 +1,847 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/element.ts
+var element_exports = {};
+__export(element_exports, {
+  HTMLReactiveElement: () => HTMLReactiveElement,
+  createElementClass: () => createElementClass,
+  defineElement: () => defineElement,
+  typedElement: () => typedElement
+});
+module.exports = __toCommonJS(element_exports);
+var import_signal3 = require("@fluixi/reactive/signal");
+var import_dom2 = require("@fluixi/dom");
+
+// src/props.ts
+var import_signal = require("@fluixi/reactive/signal");
+function createPropStates(schema) {
+  const states = {};
+  for (const [name, declaration] of Object.entries(schema)) {
+    const value = (0, import_signal.signal)(declaration.initial, { equals: declaration.equals, name });
+    states[name] = {
+      read: value,
+      // `.set` reads a function argument as an updater and calls it. A property holding
+      // a callback is ordinary for a custom element, so it is wrapped: the value
+      // arrives as the return of an updater that ignores the previous one.
+      write: (next) => void (typeof next === "function" ? value.set(() => next) : value.set(next)),
+      declaration,
+      attribute: declaration.attribute === "" ? name.toLowerCase() : declaration.attribute
+    };
+  }
+  return states;
+}
+function observedFrom(schema) {
+  return Object.entries(schema).map(([name, d]) => d.attribute === "" ? name.toLowerCase() : d.attribute).filter((a) => a !== false);
+}
+
+// src/registry.ts
+var import_dom = require("@fluixi/dom");
+var defined = /* @__PURE__ */ new Map();
+function registry() {
+  return typeof customElements === "undefined" ? null : customElements;
+}
+function defineCustomElement(name, constructor, options = {}) {
+  if ((0, import_dom.isServer)() && typeof HTMLElement !== "undefined") return constructor;
+  const registered = defined.get(name);
+  if (registered) return registered;
+  const ce = registry();
+  if (!ce) return constructor;
+  const existing = ce.get(name);
+  if (existing) {
+    defined.set(name, existing);
+    return existing;
+  }
+  ce.define(name, constructor, options.extends ? { extends: options.extends } : void 0);
+  defined.set(name, constructor);
+  return constructor;
+}
+
+// src/events.ts
+function createDispatch(host) {
+  return (type, detail, init = {}) => host.dispatchEvent(
+    new CustomEvent(type, {
+      bubbles: init.bubbles ?? true,
+      composed: init.composed ?? true,
+      cancelable: init.cancelable ?? false,
+      detail
+    })
+  );
+}
+
+// src/targets.ts
+function selector(name) {
+  const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(name) : name;
+  return `[data-target="${escaped}"]`;
+}
+function createTargets(root2) {
+  return {
+    get: (name) => root2().querySelector(selector(name)),
+    all: (name) => Array.from(root2().querySelectorAll(selector(name))),
+    require: (name) => {
+      const found = root2().querySelector(selector(name));
+      if (found) return found;
+      throw new Error(
+        `[fluixi] no element with data-target="${name}" in this component. Add it to the markup, or use targets.get() if its absence is expected.`
+      );
+    }
+  };
+}
+
+// src/styles.ts
+var sheets = /* @__PURE__ */ new Map();
+var resolved = /* @__PURE__ */ new WeakMap();
+function flatten(styles, out) {
+  if (!styles) return out;
+  if (typeof styles === "string" || !Array.isArray(styles)) out.push(styles);
+  else for (const entry of styles) flatten(entry, out);
+  return out;
+}
+function sheetFor(css) {
+  let sheet = sheets.get(css);
+  if (!sheet) {
+    sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    sheets.set(css, sheet);
+  }
+  return sheet;
+}
+function canAdopt(root2) {
+  return typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in root2;
+}
+function applyStyles(root2, owner, styles) {
+  let list = resolved.get(owner);
+  if (!list) resolved.set(owner, list = flatten(styles, []));
+  if (!list.length) return;
+  if (canAdopt(root2)) {
+    root2.adoptedStyleSheets = [...root2.adoptedStyleSheets, ...list.map((s) => typeof s === "string" ? sheetFor(s) : s)];
+    return;
+  }
+  for (const entry of list) {
+    const style = document.createElement("style");
+    style.textContent = typeof entry === "string" ? entry : Array.from(entry.cssRules, (rule) => rule.cssText).join("\n");
+    root2.appendChild(style);
+  }
+}
+
+// src/context.ts
+var import_signal2 = 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_signal2.untrack)(read));
+      return;
+    }
+    const unsubscribe = () => void subscribers.delete(request.callback);
+    subscribers.set(request.callback, unsubscribe);
+    request.callback((0, import_signal2.untrack)(read), unsubscribe);
+  };
+  const dom = typeof host.addEventListener === "function";
+  if (dom) host.addEventListener("context-request", onRequest);
+  const owner = (0, import_signal2.getOwner)();
+  let first = true;
+  const stopTracking = (0, import_signal2.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_signal2.onCleanup)(stop);
+  return stop;
+}
+function consumeContext(host, context, options = {}) {
+  const subscribe = options.subscribe ?? true;
+  const owner = (0, import_signal2.getOwner)();
+  const fromTree = () => (0, import_signal2.runWithOwner)(owner, () => (0, import_signal2.useContext)(context));
+  const value = (0, import_signal2.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_signal2.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;
+}
+
+// src/element.ts
+var OWNER_KEY = /* @__PURE__ */ Symbol.for("fluixi.owner");
+var SERVER_PROPS = /* @__PURE__ */ Symbol.for("fluixi.serverProps");
+var ELEMENT_RENDERER = /* @__PURE__ */ Symbol.for("fluixi.serverElementRenderer");
+var RENDER_ON_SERVER = /* @__PURE__ */ Symbol.for("fluixi.renderOnServer");
+var OWNS_CONTENT = /* @__PURE__ */ Symbol.for("fluixi.ownsContent");
+var SSR_ATTRIBUTE = "data-fx-ssr";
+var SSR_PROPS_ATTRIBUTE = "data-fx-props";
+function isPlainData(value, seen = /* @__PURE__ */ new Set()) {
+  if (value === null) return true;
+  switch (typeof value) {
+    case "string":
+    case "number":
+    case "boolean":
+      return true;
+    case "object":
+      break;
+    default:
+      return false;
+  }
+  const object = value;
+  if (seen.has(object)) return false;
+  seen.add(object);
+  const proto = Object.getPrototypeOf(object);
+  if (Array.isArray(object)) return object.every((item) => isPlainData(item, seen));
+  if (proto !== Object.prototype && proto !== null) return false;
+  return Object.values(object).every((item) => isPlainData(item, seen));
+}
+var BaseElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+if (typeof HTMLElement === "undefined" && typeof globalThis.customElements === "undefined") {
+  const defined2 = /* @__PURE__ */ new Map();
+  globalThis.customElements = {
+    define: (name, constructor) => void defined2.set(name, constructor),
+    get: (name) => defined2.get(name),
+    getName: (constructor) => [...defined2].find(([, c]) => c === constructor)?.[0] ?? null,
+    upgrade: () => {
+    },
+    // Never resolves: nothing is ever upgraded on a server.
+    whenDefined: () => new Promise(() => {
+    })
+  };
+}
+var prepared = /* @__PURE__ */ new WeakSet();
+function shadowInit(shadow) {
+  if (shadow === true) return { mode: "open" };
+  if (typeof shadow === "string") return { mode: shadow };
+  return { mode: "open", ...shadow };
+}
+function schemaOf(constructor) {
+  const chain = [];
+  for (let c = constructor; c && c !== HTMLReactiveElement; c = Object.getPrototypeOf(c)) {
+    if (Object.prototype.hasOwnProperty.call(c, "props")) chain.unshift(c.props ?? {});
+  }
+  return Object.assign({}, ...chain);
+}
+function prepare(constructor) {
+  if (prepared.has(constructor)) return;
+  prepared.add(constructor);
+  const observed = constructor.observedAttributes ?? [];
+  const missing = observedFrom(schemaOf(constructor)).filter((a) => !observed.includes(a));
+  if (missing.length) {
+    console.warn(
+      `[fluixi] ${constructor.name}.observedAttributes leaves out ${missing.join(", ")}, so those props no longer follow their attributes. A class or mixin that adds its own should return [...super.observedAttributes, ...].`
+    );
+  }
+  for (const name of Object.keys(schemaOf(constructor))) {
+    Object.defineProperty(constructor.prototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return stateOf(this, name).read();
+      },
+      set(value) {
+        writeFromOutside(this, name, value);
+      }
+    });
+  }
+}
+var stateOf;
+var writeFromOutside;
+var _deferred, _HTMLReactiveElement_instances, writeFromOutside_fn, _statesCache, _carried, _dispose, _root, _authored, _built, _waiting, _waited, _handed, _hydrating, _pendingDispose, _reflecting, _internals, _scope, _targets, _dispatch, _creator, _rootOwner, states_fn, reactiveScope_fn, adoptOwnProps_fn, _HTMLReactiveElement_static, renderOnServer_fn, build_fn, startReflecting_fn, shouldWaitForHost_fn, waitForHost_fn, adoptOwner_fn, teardown_fn;
+var _HTMLReactiveElement = class _HTMLReactiveElement extends BaseElement {
+  constructor() {
+    super();
+    __privateAdd(this, _HTMLReactiveElement_instances);
+    /**
+     * Props written while the app hydrates around an element already built, applied once it is
+     * done. The page hydrates inside a batch whose effects run before hydration ends: an update
+     * run there builds the element's new content while server nodes are still being claimed,
+     * and its templates claimed the page's nodes as their own (the page's frame moved into the
+     * element). Until then the element shows what it adopted from the server.
+     */
+    __privateAdd(this, _deferred, null);
+    __privateAdd(this, _statesCache, null);
+    /** Prop values kept across a real removal, for the signals the next scope re-creates. */
+    __privateAdd(this, _carried, null);
+    __privateAdd(this, _dispose, null);
+    __privateAdd(this, _root, this);
+    __privateAdd(this, _authored, []);
+    __privateAdd(this, _built, false);
+    /** Server-rendered and waiting for the app to hand over an owner; cancels the wait. */
+    __privateAdd(this, _waiting, null);
+    /** The wait ran once; whatever it found, the next build goes ahead. */
+    __privateAdd(this, _waited, false);
+    /**
+     * A template or hydration handed the owner over. An upgrade reads whatever owner happens to be
+     * current (a module evaluating inside a route preload), which is not this element's host.
+     */
+    __privateAdd(this, _handed, false);
+    /** The first build adopts content the server rendered. */
+    __privateAdd(this, _hydrating, false);
+    /**
+     * Disposal is deferred because `disconnectedCallback` cannot tell a removal from a move.
+     * Appending an already-parented node fires disconnect then connect in the same task, and
+     * tearing the scope down in between would rebuild the subtree on every reorder, which a
+     * keyed list does constantly.
+     */
+    __privateAdd(this, _pendingDispose, null);
+    /** Suppresses the attribute callback a reflect triggers, so it does not loop. */
+    __privateAdd(this, _reflecting, /* @__PURE__ */ new Set());
+    __privateAdd(this, _internals, null);
+    /**
+     * What the devtools graph groups this element's signals under. Opened when the element
+     * first needs one, closed when it is really removed.
+     */
+    __privateAdd(this, _scope, null);
+    __privateAdd(this, _targets, null);
+    __privateAdd(this, _dispatch, null);
+    /** The owner the element was created under, for context: a Fluixi template, or none. */
+    __privateAdd(this, _creator, (0, import_signal3.getOwner)());
+    /** The owner `render()` runs under, while built. Its parent is the creator. */
+    __privateAdd(this, _rootOwner, null);
+    prepare(new.target);
+    const handed = Object.getOwnPropertyDescriptor(this, OWNER_KEY);
+    if (handed) {
+      delete this[OWNER_KEY];
+      __privateSet(this, _creator, handed.value ?? __privateGet(this, _creator));
+      __privateSet(this, _handed, handed.value != null);
+    }
+    __privateMethod(this, _HTMLReactiveElement_instances, adoptOwnProps_fn).call(this);
+  }
+  /**
+   * The attributes of every declared prop. A mixin in between that observes its own
+   * extends this with `super.observedAttributes`; a subclass need not touch it.
+   */
+  static get observedAttributes() {
+    prepare(this);
+    return observedFrom(schemaOf(this));
+  }
+  connectedCallback() {
+    Object.getPrototypeOf(_HTMLReactiveElement.prototype).connectedCallback?.call(this);
+    if (__privateGet(this, _pendingDispose) !== null) {
+      clearTimeout(__privateGet(this, _pendingDispose));
+      __privateSet(this, _pendingDispose, null);
+      return;
+    }
+    __privateMethod(this, _HTMLReactiveElement_instances, adoptOwnProps_fn).call(this, true);
+    if (!__privateGet(this, _built) && !__privateGet(this, _waiting)) __privateMethod(this, _HTMLReactiveElement_instances, build_fn).call(this);
+  }
+  disconnectedCallback() {
+    Object.getPrototypeOf(_HTMLReactiveElement.prototype).disconnectedCallback?.call(this);
+    if (!__privateGet(this, _built) || __privateGet(this, _pendingDispose) !== null) return;
+    __privateSet(this, _pendingDispose, setTimeout(() => {
+      __privateSet(this, _pendingDispose, null);
+      __privateMethod(this, _HTMLReactiveElement_instances, teardown_fn).call(this);
+    }, 0));
+  }
+  /** Another document, the same scope: nothing reactive depends on which document holds the node. */
+  adoptedCallback() {
+    Object.getPrototypeOf(_HTMLReactiveElement.prototype).adoptedCallback?.call(this);
+  }
+  attributeChangedCallback(name, previous, value) {
+    Object.getPrototypeOf(_HTMLReactiveElement.prototype).attributeChangedCallback?.call(
+      this,
+      name,
+      previous,
+      value
+    );
+    if (__privateGet(this, _reflecting).has(name)) return;
+    for (const [prop, state] of Object.entries(__privateMethod(this, _HTMLReactiveElement_instances, states_fn).call(this))) {
+      if (state.attribute !== name) continue;
+      __privateMethod(this, _HTMLReactiveElement_instances, writeFromOutside_fn).call(this, prop, value, () => state.write(state.declaration.fromAttribute(value)));
+      return;
+    }
+  }
+  /**
+   * What the element shows. Runs once, on the first connect, inside the element's reactive
+   * scope; bindings keep it current after that. It is never re-run, so read a prop inside a
+   * binding (`() => this.step`), not in the body, to follow it.
+   */
+  render() {
+    return void 0;
+  }
+  /**
+   * Give `context` to the elements inside this one, and to `useContext` in the components it
+   * renders. A value or an accessor; subscribed consumers follow the accessor. Call in `render()`.
+   */
+  provide(context, value) {
+    provideContext(this, context, value);
+  }
+  /**
+   * The nearest value of `context` above this element, as an accessor: an element providing
+   * it, else the Fluixi app the element was rendered in, else the default. Call in `render()`.
+   */
+  consume(context, options) {
+    return consumeContext(this, context, options);
+  }
+  /**
+   * Dispatch a `CustomEvent`, bubbling and composed by default. False when cancelled.
+   *
+   * The name goes out lowercased: a JSX handler listens for the name after `on`, lowercased,
+   * so `emit('signOut')` reaches `onSignOut`, and a listener added by hand uses `signout`.
+   */
+  emit(type, detail, init) {
+    __privateGet(this, _dispatch) ?? __privateSet(this, _dispatch, createDispatch(this));
+    return __privateGet(this, _dispatch).call(this, type.toLowerCase(), detail, init);
+  }
+  /** Elements inside this one, by `data-target`, scoped to its render root. */
+  get targets() {
+    return __privateGet(this, _targets) ?? __privateSet(this, _targets, createTargets(() => __privateGet(this, _root)));
+  }
+  /** Where `render()` output goes: the shadow root, or the element itself in light DOM. */
+  get renderRoot() {
+    return __privateGet(this, _root);
+  }
+  /**
+   * The children the author wrote between the tags, in light DOM. Empty under shadow DOM,
+   * where the browser projects them through `<slot>` and they were never the element's to place.
+   */
+  get authoredChildren() {
+    return __privateGet(this, _authored);
+  }
+  /**
+   * The element's `ElementInternals`, attached on first use: ARIA defaults, custom states,
+   * and with `static formAssociated = true`, taking part in a `<form>`.
+   */
+  get internals() {
+    return __privateGet(this, _internals) ?? __privateSet(this, _internals, this.attachInternals());
+  }
+  /**
+   * Render a light DOM element's content into its server node, under the page's owner so its
+   * context and resources are the page's. Props come from what @fluixi/dom recorded on the
+   * node; the ones with no attribute form ride along as JSON for the client. Shadow DOM
+   * elements are left to the client until declarative shadow roots are emitted.
+   */
+  static [RENDER_ON_SERVER](node) {
+    var _a;
+    __privateMethod(_a = _HTMLReactiveElement, _HTMLReactiveElement_static, renderOnServer_fn).call(_a, this, node);
+  }
+};
+_deferred = new WeakMap();
+_HTMLReactiveElement_instances = new WeakSet();
+writeFromOutside_fn = function(name, value, apply = () => stateOf(this, name).write(value)) {
+  if (!__privateGet(this, _built) || !(0, import_dom2.isAppHydrationPending)()) {
+    apply();
+    return;
+  }
+  if (!__privateGet(this, _deferred)) {
+    __privateSet(this, _deferred, /* @__PURE__ */ new Map());
+    (0, import_dom2.whenAppHydrated)(() => {
+      const pending = __privateGet(this, _deferred);
+      __privateSet(this, _deferred, null);
+      for (const write of pending?.values() ?? []) write();
+    });
+  }
+  __privateGet(this, _deferred).set(name, apply);
+};
+_statesCache = new WeakMap();
+_carried = new WeakMap();
+_dispose = new WeakMap();
+_root = new WeakMap();
+_authored = new WeakMap();
+_built = new WeakMap();
+_waiting = new WeakMap();
+_waited = new WeakMap();
+_handed = new WeakMap();
+_hydrating = new WeakMap();
+_pendingDispose = new WeakMap();
+_reflecting = new WeakMap();
+_internals = new WeakMap();
+_scope = new WeakMap();
+_targets = new WeakMap();
+_dispatch = new WeakMap();
+_creator = new WeakMap();
+_rootOwner = new WeakMap();
+states_fn = function() {
+  if (__privateGet(this, _statesCache)) return __privateGet(this, _statesCache);
+  const states = (0, import_signal3.withReactiveScope)(__privateMethod(this, _HTMLReactiveElement_instances, reactiveScope_fn).call(this), () => createPropStates(schemaOf(this.constructor)));
+  if (__privateGet(this, _carried)) {
+    for (const [name, value] of Object.entries(__privateGet(this, _carried))) states[name]?.write(value);
+    __privateSet(this, _carried, null);
+  }
+  return __privateSet(this, _statesCache, states);
+};
+reactiveScope_fn = function() {
+  return __privateGet(this, _scope) ?? __privateSet(this, _scope, (0, import_signal3.openReactiveScope)({
+    kind: "element",
+    name: `<${this.localName}>`,
+    target: this,
+    // The class, since the line that opened the scope is this package's, not the app's.
+    detail: this.constructor.name
+  }));
+};
+adoptOwnProps_fn = function(warn = false) {
+  for (const name of Object.keys(schemaOf(this.constructor))) {
+    if (!Object.prototype.hasOwnProperty.call(this, name)) continue;
+    const value = this[name];
+    delete this[name];
+    if (warn) {
+      console.warn(
+        `[fluixi] <${this.localName}> has a class field named "${name}", which hides the declared prop. Declare it only in static props, and set a default there.`
+      );
+    }
+    __privateMethod(this, _HTMLReactiveElement_instances, states_fn).call(this)[name].write(value);
+  }
+};
+_HTMLReactiveElement_static = new WeakSet();
+renderOnServer_fn = function(constructor, node) {
+  var _a;
+  if (constructor.shadow !== void 0 && constructor.shadow !== false) return;
+  const element = new constructor();
+  const recorded = node[SERVER_PROPS] ?? {};
+  const carried = {};
+  for (const [name, state] of Object.entries(__privateMethod(_a = element, _HTMLReactiveElement_instances, states_fn).call(_a))) {
+    if (name in recorded) {
+      const value = recorded[name];
+      state.write(value);
+      if (value !== null && typeof value === "object" && isPlainData(value)) carried[name] = value;
+    } else if (state.attribute !== false) {
+      const attribute = node.getAttribute(state.attribute);
+      if (attribute !== null) state.write(state.declaration.fromAttribute(attribute));
+    }
+  }
+  __privateSet(element, _authored, [...node.childNodes]);
+  for (const child of __privateGet(element, _authored)) node.removeChild(child);
+  __privateSet(element, _root, node);
+  __privateSet(element, _built, true);
+  const scope = `${node.getAttribute(import_dom2.HYDRATION_KEY) ?? ""}~`;
+  const createdIn = node[OWNER_KEY] ?? null;
+  (0, import_signal3.runWithOwner)(
+    createdIn,
+    () => (0, import_signal3.root)(() => {
+      (0, import_dom2.setKeyScope)(scope);
+      (0, import_dom2.insert)(node, element.render());
+    })
+  );
+  node.setAttribute(SSR_ATTRIBUTE, "");
+  if (Object.keys(carried).length) {
+    try {
+      node.setAttribute(SSR_PROPS_ATTRIBUTE, JSON.stringify(carried));
+    } catch {
+    }
+  }
+};
+build_fn = function() {
+  if (__privateMethod(this, _HTMLReactiveElement_instances, shouldWaitForHost_fn).call(this)) return __privateMethod(this, _HTMLReactiveElement_instances, waitForHost_fn).call(this);
+  __privateSet(this, _built, true);
+  const constructor = this.constructor;
+  const shadow = constructor.shadow;
+  if (shadow !== void 0 && shadow !== false) {
+    __privateSet(this, _root, this.shadowRoot ?? this.attachShadow(shadowInit(shadow)));
+    applyStyles(__privateGet(this, _root), constructor, constructor.styles);
+  } else if (this.hasAttribute(SSR_ATTRIBUTE)) {
+    __privateSet(this, _hydrating, true);
+    const json = this.getAttribute(SSR_PROPS_ATTRIBUTE);
+    if (json) {
+      try {
+        const states = __privateMethod(this, _HTMLReactiveElement_instances, states_fn).call(this);
+        for (const [name, value] of Object.entries(JSON.parse(json))) states[name]?.write(value);
+      } catch {
+      }
+    }
+    this.removeAttribute(SSR_ATTRIBUTE);
+    this.removeAttribute(SSR_PROPS_ATTRIBUTE);
+    this[OWNS_CONTENT] = true;
+    __privateSet(this, _root, this);
+  } else {
+    __privateSet(this, _authored, Array.from(this.childNodes));
+    for (const node of __privateGet(this, _authored)) node.remove();
+    __privateSet(this, _root, this);
+  }
+  const creator = __privateGet(this, _creator) ?? (0, import_signal3.getOwner)();
+  (0, import_signal3.runWithOwner)(null, () => (0, import_signal3.withReactiveScope)(
+    __privateMethod(this, _HTMLReactiveElement_instances, reactiveScope_fn).call(this),
+    () => (0, import_signal3.root)((dispose) => {
+      const own = (0, import_signal3.getOwner)();
+      __privateSet(this, _rootOwner, own);
+      if (own && creator) own.parent = creator;
+      __privateSet(this, _dispose, dispose);
+      __privateMethod(this, _HTMLReactiveElement_instances, startReflecting_fn).call(this);
+      if (__privateGet(this, _hydrating)) {
+        (0, import_dom2.setKeyScope)(`${this.getAttribute(import_dom2.HYDRATION_KEY) ?? ""}~`);
+        (0, import_dom2.hydrateChildren)(this, () => this.render());
+      } else (0, import_dom2.insert)(__privateGet(this, _root), this.render());
+      __privateSet(this, _hydrating, false);
+    })
+  ));
+  const shown = (node) => node.nodeType === 1 || node.nodeType === 3 && node.textContent?.trim();
+  if (__privateGet(this, _root) === this && __privateGet(this, _authored).some((node) => shown(node) && !node.isConnected)) {
+    console.warn(
+      `[fluixi] <${this.localName}> has children between its tags that its render() does not place, so they are not shown. Place this.authoredChildren in render(), or use shadow DOM with a <slot>.`
+    );
+  }
+};
+startReflecting_fn = function() {
+  for (const state of Object.values(__privateMethod(this, _HTMLReactiveElement_instances, states_fn).call(this))) {
+    const attribute = state.attribute;
+    if (attribute === false || !state.declaration.reflect) continue;
+    (0, import_signal3.effect)(() => {
+      const next = state.declaration.toAttribute(state.read());
+      __privateGet(this, _reflecting).add(attribute);
+      try {
+        if (next === null) this.removeAttribute(attribute);
+        else this.setAttribute(attribute, next);
+      } finally {
+        __privateGet(this, _reflecting).delete(attribute);
+      }
+    }, void 0, { name: `reflect ${attribute}` });
+  }
+};
+/**
+ * Hydration found this element after it had already rendered, as a server-rendered one does:
+ * link the render to the app now, so what it provides reaches the element. Consumers that
+ * found nothing are told to look again.
+ */
+/**
+ * Rendered by the server inside an app, and upgraded before that app hydrated: nothing
+ * above it yet, so a context read in its first render would find nothing. Light DOM only;
+ * a shadow root is built by the client.
+ */
+shouldWaitForHost_fn = function() {
+  const shadow = this.constructor.shadow;
+  return !__privateGet(this, _waited) && !__privateGet(this, _handed) && (shadow === void 0 || shadow === false) && this.hasAttribute(SSR_ATTRIBUTE);
+};
+/**
+ * Wait a microtask, so an entry module that imported this element has called `startClient`.
+ * Then build when the app hands over an owner, or when its hydration ends without reaching
+ * this element. No app hydrating (a static page, another framework): build now.
+ */
+waitForHost_fn = function() {
+  let cancelled = false;
+  let stop = () => {
+  };
+  __privateSet(this, _waiting, () => {
+    cancelled = true;
+    stop();
+  });
+  const resume = () => {
+    if (cancelled) return;
+    __privateSet(this, _waiting, null);
+    __privateSet(this, _waited, true);
+    if (!__privateGet(this, _built) && this.isConnected) __privateMethod(this, _HTMLReactiveElement_instances, build_fn).call(this);
+  };
+  queueMicrotask(() => {
+    if (cancelled) return;
+    if ((0, import_dom2.isAppHydrationPending)()) stop = (0, import_dom2.whenAppHydrated)(resume);
+    else resume();
+  });
+};
+adoptOwner_fn = function(owner) {
+  if (!owner || __privateGet(this, _handed)) return;
+  __privateSet(this, _handed, true);
+  __privateSet(this, _creator, owner);
+  if (__privateGet(this, _waiting)) {
+    __privateGet(this, _waiting).call(this);
+    __privateSet(this, _waiting, null);
+    if (this.isConnected) __privateMethod(this, _HTMLReactiveElement_instances, build_fn).call(this);
+    return;
+  }
+  if (!__privateGet(this, _rootOwner)) return;
+  __privateGet(this, _rootOwner).parent = owner;
+  announceOwner(this);
+};
+teardown_fn = function() {
+  var _a;
+  (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+  __privateSet(this, _dispose, null);
+  __privateSet(this, _rootOwner, null);
+  __privateSet(this, _built, false);
+  if (__privateGet(this, _scope)) (0, import_signal3.closeReactiveScope)(__privateGet(this, _scope));
+  __privateSet(this, _scope, null);
+  if (__privateGet(this, _statesCache)) {
+    __privateSet(this, _carried, Object.fromEntries(Object.entries(__privateGet(this, _statesCache)).map(([name, state]) => [name, state.read()])));
+    __privateSet(this, _statesCache, null);
+  }
+  if (__privateGet(this, _root) === this) {
+    this.textContent = "";
+    for (const node of __privateGet(this, _authored)) this.appendChild(node);
+  }
+};
+__privateAdd(_HTMLReactiveElement, _HTMLReactiveElement_static);
+(() => {
+  Object.defineProperty(_HTMLReactiveElement.prototype, OWNER_KEY, {
+    configurable: true,
+    get() {
+      return __privateGet(this, _creator);
+    },
+    set(owner) {
+      __privateMethod(this, _HTMLReactiveElement_instances, adoptOwner_fn).call(this, owner);
+    }
+  });
+  if (typeof HTMLElement === "undefined") {
+    globalThis[ELEMENT_RENDERER] ??= (node) => {
+      const registry2 = globalThis.customElements;
+      const constructor = registry2?.get(node.localName);
+      constructor?.[RENDER_ON_SERVER]?.(node);
+    };
+  }
+  stateOf = (element, name) => {
+    var _a;
+    const state = __privateMethod(_a = element, _HTMLReactiveElement_instances, states_fn).call(_a)[name];
+    if (!state) throw new Error(`[fluixi] ${name} is not a declared prop of <${element.localName}>`);
+    return state;
+  };
+  writeFromOutside = (element, name, value) => {
+    var _a;
+    return __privateMethod(_a = element, _HTMLReactiveElement_instances, writeFromOutside_fn).call(_a, name, value);
+  };
+})();
+var HTMLReactiveElement = _HTMLReactiveElement;
+function typedElement(props) {
+  class Typed extends HTMLReactiveElement {
+  }
+  Typed.props = props;
+  return Typed;
+}
+function createElementClass(setup, options = {}) {
+  let Base = HTMLReactiveElement;
+  for (const mixin of options.mixins ?? []) Base = mixin(Base);
+  class SetupElement extends Base {
+    render() {
+      const accessors = {};
+      for (const name of Object.keys(schemaOf(this.constructor))) {
+        accessors[name] = () => this[name];
+      }
+      return setup({
+        el: this,
+        props: accessors,
+        set: (name, value) => {
+          this[name] = value;
+        },
+        dispatch: (type, detail, init) => this.emit(type, detail, init),
+        targets: this.targets,
+        children: () => [...this.authoredChildren],
+        provide: (context, value) => this.provide(context, value),
+        consume: (context, options2) => this.consume(context, options2)
+      });
+    }
+  }
+  SetupElement.props = options.props ?? {};
+  SetupElement.shadow = options.shadow;
+  SetupElement.styles = options.styles;
+  return SetupElement;
+}
+function defineElement(name, setup, options = {}) {
+  const constructor = createElementClass(setup, options);
+  const className = name.replace(/(^|-)([a-z0-9])/g, (_, _dash, ch) => ch.toUpperCase());
+  Object.defineProperty(constructor, "name", { value: className, configurable: true });
+  if ((0, import_dom2.isServer)()) return constructor;
+  return defineCustomElement(name, constructor, options.define);
+}