@exponential-at/ui-element 0.0.0-stage → 0.1.0

package/dist/chunks/index-yte5bftp.js

@@ -0,0 +1,898 @@
+// packages/exponential-ui-element/src/element.ts
+import { Show, batch, createComponent, createEffect, createMemo, createRoot, createSignal, onCleanup, untrack } from "solid-js";
+import { render } from "solid-js/web";
+import { setPointer } from "@exponential-at/ui/web";
+import { ExponentialSurface, createHostSurface, createSurface, extensionCatalogs, hostPlugin, px } from "@exponential-at/ui-solid";
+
+// packages/exponential-ui-element/src/events.ts
+function emit(target, name, detail, cancelable = false) {
+  return target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable }));
+}
+var isThenable = (v) => typeof v === `object` && v !== null && typeof v.then === `function`;
+function joinPending(results) {
+  const pending = results.filter(isThenable);
+  if (pending.length === 0)
+    return;
+  return Promise.all(pending).then(() => {
+    return;
+  });
+}
+function emitWaiting(target, name, base) {
+  const waits = [];
+  const detail = { ...base, waitUntil: (p) => void waits.push(Promise.resolve(p)) };
+  emit(target, name, detail);
+  return waits;
+}
+
+// packages/exponential-ui-element/src/transport.ts
+import { DEFAULT_URL_SCHEMES, ExponentialHost, JsonlStreamTransport, SseTransport, WebSocketTransport, decideUrl } from "@exponential-at/ui";
+import { ownPrivateHosts } from "@exponential-at/ui/web";
+function transportKind2(attrs) {
+  if (attrs.transport === `ws` || /^wss?:/i.test(attrs.src))
+    return `ws`;
+  if (attrs.transport === `sse`)
+    return `sse`;
+  return `jsonl`;
+}
+function createTransport2(attrs) {
+  const kind = transportKind2(attrs);
+  const postUrl = attrs.post || undefined;
+  if (kind === `ws`)
+    return new WebSocketTransport({ url: attrs.src });
+  if (kind === `sse`)
+    return new SseTransport({ url: attrs.src, postUrl });
+  return new JsonlStreamTransport({ url: attrs.src, postUrl });
+}
+var WS_OF = { http: `ws`, https: `wss` };
+function transportSchemes2(policy) {
+  const http = (policy?.schemes ?? DEFAULT_URL_SCHEMES).filter((s) => s === `http` || s === `https`);
+  return [...http, ...http.map((s) => WS_OF[s])];
+}
+var documentBase = () => typeof document !== `undefined` && document.baseURI ? document.baseURI : undefined;
+function decideOne(url, policy, schemes) {
+  const baseUrl = policy?.baseUrl ?? documentBase();
+  let parsed;
+  try {
+    parsed = new URL(url.trim(), baseUrl);
+  } catch {
+    return { allowed: false, reason: `invalid` };
+  }
+  const scheme = parsed.protocol.replace(/:$/, ``).toLowerCase();
+  if (!schemes.includes(scheme))
+    return { allowed: false, url: parsed.href, reason: `scheme` };
+  const twin = scheme === `ws` ? `http:${parsed.href.slice(3)}` : scheme === `wss` ? `https:${parsed.href.slice(4)}` : parsed.href;
+  const own = ownPrivateHosts();
+  const allowPrivate = own.length ? [...policy?.allowPrivate ?? [], ...own] : policy?.allowPrivate;
+  const d = decideUrl({ schemes: [`http`, `https`], hosts: policy?.hosts, allowPrivate, baseUrl }, twin);
+  return d.allowed ? { allowed: true, url: parsed.href } : { allowed: false, url: parsed.href, reason: d.reason };
+}
+function decideTransport2(attrs, policy) {
+  const schemes = transportSchemes2(policy);
+  const src = decideOne(attrs.src, policy, schemes);
+  const post = attrs.post ? decideOne(attrs.post, policy, schemes) : undefined;
+  const denied = !src.allowed ? [`src`, src] : post && !post.allowed ? [`post`, post] : undefined;
+  return denied ? { allowed: false, src, post, reason: `${denied[0]} denied by the URL policy (${denied[1].reason})` } : { allowed: true, src, post };
+}
+function createHost2(attrs, extensions = [], policy) {
+  const decision = decideTransport2(attrs, policy);
+  if (!decision.allowed)
+    throw new Error(`exponential-ui: ${decision.reason}`);
+  return new ExponentialHost({ transport: createTransport2(attrs), extensions });
+}
+var transportKey = (attrs) => `${transportKind2(attrs)}\x00${attrs.src}\x00${attrs.post ?? ``}`;
+
+// packages/exponential-ui-element/src/element.ts
+var TAG2 = `exponential-surface`;
+var ATTRIBUTES = {
+  theme: `theme`,
+  mode: `mode`,
+  density: `density`,
+  contrast: `contrast`,
+  locale: `locale`,
+  "time-zone": `timeZone`,
+  direction: `direction`,
+  width: `width`,
+  height: `height`,
+  "surface-id": `surfaceId`,
+  src: `src`,
+  post: `post`,
+  transport: `transport`
+};
+var ATTRIBUTE_OF = Object.fromEntries(Object.entries(ATTRIBUTES).map(([a, p]) => [p, a]));
+var pick = (value, allowed) => typeof value === `string` && allowed.includes(value) ? value : undefined;
+function lengthOf2(value) {
+  if (value === null || value === undefined || value === ``)
+    return;
+  if (typeof value === `number`)
+    return Number.isFinite(value) ? value : undefined;
+  const t = value.trim();
+  return /^-?\d+(\.\d+)?$/.test(t) ? Number(t) : t;
+}
+var PROPERTIES = [...Object.values(ATTRIBUTES), `surface`, `root`, `templates`, `data`, `host`, `plugin`, `extensions`, `strings`, `states`, `measure`, `viewportHeight`];
+var isConnectable = (h) => h.hasTransport && h.status === `closed`;
+var burst = null;
+
+class ExponentialSurfaceElement2 extends HTMLElement {
+  static get observedAttributes() {
+    return Object.keys(ATTRIBUTES);
+  }
+  #theme = createSignal(undefined);
+  #mode = createSignal(undefined);
+  #density = createSignal(undefined);
+  #contrast = createSignal(undefined);
+  #locale = createSignal(undefined);
+  #timeZone = createSignal(undefined);
+  #direction = createSignal(undefined);
+  #width = createSignal(undefined);
+  #height = createSignal(undefined);
+  #surfaceId = createSignal(undefined);
+  #src = createSignal(undefined);
+  #post = createSignal(undefined);
+  #transport = createSignal(undefined);
+  #surface = createSignal(undefined);
+  #root = createSignal(undefined);
+  #templates = createSignal(undefined);
+  #data = createSignal(undefined);
+  #host = createSignal(undefined);
+  #plugin = createSignal(undefined);
+  #extensions = createSignal(undefined);
+  #strings = createSignal(undefined);
+  #states = createSignal(undefined);
+  #measure = createSignal(undefined);
+  #viewportHeight = createSignal(undefined);
+  #store = createSignal(null);
+  #storeDispose;
+  #built;
+  #status = createSignal(undefined);
+  #denied = createSignal(undefined);
+  #liveHost;
+  #currentSurface = () => null;
+  #handle = null;
+  #ready = false;
+  #dispose;
+  #reflecting = false;
+  attributeChangedCallback(name, _old, value) {
+    if (this.#reflecting)
+      return;
+    const prop = ATTRIBUTES[name];
+    if (prop)
+      this.#signal(prop)[1](() => value ?? undefined);
+  }
+  #signal(prop) {
+    switch (prop) {
+      case `theme`:
+        return this.#theme;
+      case `mode`:
+        return this.#mode;
+      case `density`:
+        return this.#density;
+      case `contrast`:
+        return this.#contrast;
+      case `locale`:
+        return this.#locale;
+      case `timeZone`:
+        return this.#timeZone;
+      case `direction`:
+        return this.#direction;
+      case `width`:
+        return this.#width;
+      case `height`:
+        return this.#height;
+      case `surfaceId`:
+        return this.#surfaceId;
+      case `src`:
+        return this.#src;
+      case `post`:
+        return this.#post;
+      case `transport`:
+        return this.#transport;
+    }
+  }
+  #setAttrProp(prop, value) {
+    const attr = ATTRIBUTE_OF[prop];
+    if (typeof value === `string` || value === null || value === undefined) {
+      this.#reflecting = true;
+      try {
+        if (typeof value === `string`)
+          this.setAttribute(attr, value);
+        else
+          this.removeAttribute(attr);
+      } finally {
+        this.#reflecting = false;
+      }
+    }
+    this.#signal(prop)[1](() => value ?? undefined);
+  }
+  get theme() {
+    return this.#theme[0]();
+  }
+  set theme(v) {
+    this.#setAttrProp(`theme`, v);
+  }
+  get mode() {
+    return this.#mode[0]();
+  }
+  set mode(v) {
+    this.#setAttrProp(`mode`, v);
+  }
+  get density() {
+    return this.#density[0]();
+  }
+  set density(v) {
+    this.#setAttrProp(`density`, v);
+  }
+  get contrast() {
+    return this.#contrast[0]();
+  }
+  set contrast(v) {
+    this.#setAttrProp(`contrast`, v);
+  }
+  get locale() {
+    return this.#locale[0]();
+  }
+  set locale(v) {
+    this.#setAttrProp(`locale`, v);
+  }
+  get timeZone() {
+    return this.#timeZone[0]();
+  }
+  set timeZone(v) {
+    this.#setAttrProp(`timeZone`, v);
+  }
+  get direction() {
+    return this.#direction[0]();
+  }
+  set direction(v) {
+    this.#setAttrProp(`direction`, v);
+  }
+  get width() {
+    return this.#width[0]();
+  }
+  set width(v) {
+    this.#setAttrProp(`width`, v);
+  }
+  get height() {
+    return this.#height[0]();
+  }
+  set height(v) {
+    this.#setAttrProp(`height`, v);
+  }
+  get surfaceId() {
+    return this.#surfaceId[0]() || `main`;
+  }
+  set surfaceId(v) {
+    this.#setAttrProp(`surfaceId`, v);
+  }
+  get src() {
+    return this.#src[0]();
+  }
+  set src(v) {
+    this.#setAttrProp(`src`, v);
+  }
+  get post() {
+    return this.#post[0]();
+  }
+  set post(v) {
+    this.#setAttrProp(`post`, v);
+  }
+  get transport() {
+    return this.#transport[0]();
+  }
+  set transport(v) {
+    this.#setAttrProp(`transport`, v);
+  }
+  get surface() {
+    return this.#surface[0]();
+  }
+  set surface(v) {
+    this.#surface[1](() => v ?? undefined);
+  }
+  get root() {
+    return this.#root[0]();
+  }
+  set root(v) {
+    this.#root[1](() => v);
+  }
+  get templates() {
+    return this.#templates[0]();
+  }
+  set templates(v) {
+    this.#templates[1](() => v ?? undefined);
+  }
+  get data() {
+    return this.#data[0]();
+  }
+  set data(v) {
+    this.#data[1](() => v ?? undefined);
+  }
+  get host() {
+    return this.#host[0]();
+  }
+  set host(v) {
+    this.#host[1](() => v ?? undefined);
+  }
+  get plugin() {
+    return this.#plugin[0]();
+  }
+  set plugin(v) {
+    this.#plugin[1](() => v ?? undefined);
+  }
+  get extensions() {
+    return this.#extensions[0]();
+  }
+  set extensions(v) {
+    this.#extensions[1](() => v ?? undefined);
+  }
+  get strings() {
+    return this.#strings[0]();
+  }
+  set strings(v) {
+    this.#strings[1](() => v ?? undefined);
+  }
+  get states() {
+    return this.#states[0]();
+  }
+  set states(v) {
+    this.#states[1](() => v ?? undefined);
+  }
+  get measure() {
+    return this.#measure[0]();
+  }
+  set measure(v) {
+    this.#measure[1](() => v ?? undefined);
+  }
+  get viewportHeight() {
+    return this.#viewportHeight[0]();
+  }
+  set viewportHeight(v) {
+    this.#viewportHeight[1](() => v ?? undefined);
+  }
+  get handle() {
+    return this.#handle;
+  }
+  get issues() {
+    return this.surfaceState?.issues ?? [];
+  }
+  get status() {
+    return (this.#liveHost ?? this.#host[0]())?.status ?? this.#status[0]()?.status;
+  }
+  get statusDetail() {
+    return (this.#liveHost ?? this.#host[0]())?.statusDetail ?? this.#status[0]()?.detail;
+  }
+  get surfaceState() {
+    return untrack(() => this.#surface[0]() ?? this.#currentSurface() ?? this.#ownStore());
+  }
+  #ownStore() {
+    const s = this.#store[0]();
+    return s && s.surfaceId === this.surfaceId ? s : null;
+  }
+  #activeHost() {
+    const given = this.#host[0]();
+    if (given) {
+      this.#dropBuilt();
+      this.#denied[1](undefined);
+      return given;
+    }
+    const src = this.#src[0]();
+    if (!src) {
+      this.#dropBuilt();
+      this.#denied[1](undefined);
+      return;
+    }
+    const attrs = { src, post: this.#post[0](), transport: this.#transport[0]() };
+    const policy = this.#plugin[0]()?.urls;
+    const decision = decideTransport2(attrs, policy);
+    if (!decision.allowed) {
+      this.#dropBuilt();
+      this.#denied[1](decision.reason);
+      return;
+    }
+    this.#denied[1](undefined);
+    const key = transportKey(attrs);
+    if (this.#built?.key !== key) {
+      this.#dropBuilt();
+      this.#built = { key, host: createHost2(attrs, extensionCatalogs(untrack(() => this.#extensions[0]()) ?? []), policy) };
+    }
+    return this.#built.host;
+  }
+  #dropBuilt() {
+    const b = this.#built;
+    this.#built = undefined;
+    b?.host.close();
+  }
+  apply(message) {
+    const given = untrack(() => this.#surface[0]());
+    if (given)
+      return given.apply(message);
+    const host = untrack(() => this.#activeHost());
+    if (host) {
+      host.receive(message);
+      return;
+    }
+    let store = untrack(() => this.#ownStore());
+    if (!store) {
+      this.#storeDispose?.();
+      const surfaceId = this.surfaceId;
+      store = createRoot((dispose) => {
+        this.#storeDispose = dispose;
+        return createSurface({ surfaceId });
+      });
+      this.#store[1](() => store);
+    }
+    store.apply(message);
+  }
+  setData(pointer, value) {
+    const state = this.surfaceState;
+    if (state)
+      state.setData(pointer, value);
+    else
+      this.data = setPointer(untrack(() => this.#data[0]()) ?? {}, pointer, value);
+  }
+  reset() {
+    this.surfaceState?.reset();
+  }
+  run(command) {
+    this.#handle?.run(command);
+  }
+  focus(id) {
+    if (typeof id !== `string`) {
+      super.focus(id);
+      return true;
+    }
+    return this.#handle?.focus(id) ?? false;
+  }
+  announce(text, live) {
+    this.#handle?.announce(text, live);
+  }
+  scrollIntoView(id) {
+    if (typeof id !== `string`) {
+      super.scrollIntoView(id);
+      return true;
+    }
+    return this.#handle?.scrollIntoView(id) ?? false;
+  }
+  scrollToIndex(id, index, align) {
+    return this.#handle?.scrollToIndex(id, index, align) ?? false;
+  }
+  #elementPlugin(base) {
+    return {
+      ...base,
+      onAction: (e) => {
+        const own = base.onAction?.(e);
+        return joinPending([own, ...emitWaiting(this, `xui-action`, e)]);
+      },
+      onInput: (e) => {
+        const own = base.onInput?.(e);
+        return joinPending([own, ...emitWaiting(this, `xui-input`, e)]);
+      },
+      onUpload: (files, target) => {
+        const own = base.onUpload?.(files, target);
+        return joinPending([own, ...emitWaiting(this, `xui-upload`, { files, target })]);
+      },
+      onFunctionCall: (call) => {
+        const own = base.onFunctionCall?.(call);
+        let answered = false;
+        let answer;
+        emit(this, `xui-function-call`, {
+          call,
+          respond: (value) => {
+            if (answered)
+              return;
+            answered = true;
+            answer = value;
+          }
+        });
+        return answered ? answer : own;
+      },
+      openUrl: (url) => {
+        if (!emit(this, `xui-open-url`, { url }, true))
+          return;
+        if (base.openUrl)
+          base.openUrl(url);
+        else if (typeof window !== `undefined`)
+          window.open(url, `_blank`, `noopener,noreferrer`);
+      },
+      onPaintError: (error) => {
+        base.onPaintError?.(error);
+        emit(this, `xui-paint-error`, { error });
+      },
+      onThemeIssues: (issues) => {
+        base.onThemeIssues?.(issues);
+        emit(this, `xui-theme-issues`, { issues });
+      },
+      onUnknown: (node) => {
+        base.onUnknown?.(node);
+        emit(this, `xui-unknown`, { node });
+      }
+    };
+  }
+  #hostPlugin(host, base) {
+    const merged = hostPlugin(host, this.#elementPlugin(base));
+    return {
+      ...merged,
+      openUrl: (url) => {
+        if (!emit(this, `xui-open-url`, { url }, true))
+          return;
+        if (base.openUrl)
+          base.openUrl(url);
+        else
+          host.openUrl(url);
+      }
+    };
+  }
+  #upgradeProperties() {
+    for (const name of PROPERTIES) {
+      if (!Object.prototype.hasOwnProperty.call(this, name))
+        continue;
+      const value = this[name];
+      delete this[name];
+      this[name] = value;
+    }
+  }
+  connectedCallback() {
+    this.#upgradeProperties();
+    if (this.#dispose)
+      return;
+    if (burst) {
+      burst.add(this);
+      return;
+    }
+    burst = new Set;
+    queueMicrotask(() => {
+      const pending = burst;
+      burst = null;
+      if (pending?.size)
+        batch(() => pending.forEach((el) => el.#mount()));
+    });
+    this.#mount();
+  }
+  #mount() {
+    if (this.#dispose || !this.isConnected)
+      return;
+    this.replaceChildren();
+    this.#ready = false;
+    this.#dispose = render(() => this.#view(), this);
+  }
+  disconnectedCallback() {
+    burst?.delete(this);
+    const dispose = this.#dispose;
+    this.#dispose = undefined;
+    dispose?.();
+    this.#handle = null;
+    this.#currentSurface = () => null;
+    this.#dropBuilt();
+    this.#status[1](undefined);
+  }
+  #view() {
+    const host = createMemo(() => this.#activeHost());
+    createEffect(() => {
+      const h = host();
+      this.#liveHost = h;
+      if (!h) {
+        const reason = this.#denied[0]();
+        const s = reason ? { status: `closed`, detail: reason } : undefined;
+        this.#status[1](s);
+        if (s)
+          emit(this, `xui-status`, s);
+        return;
+      }
+      let last;
+      const check = () => {
+        if (last && last.status === h.status && last.detail === h.statusDetail)
+          return;
+        last = { status: h.status, detail: h.statusDetail };
+        this.#status[1](last);
+        emit(this, `xui-status`, h.statusDetail === undefined ? { status: h.status } : { status: h.status, detail: h.statusDetail });
+      };
+      const unsubscribe = h.subscribe(check);
+      if (isConnectable(h))
+        h.connect();
+      check();
+      onCleanup(() => {
+        unsubscribe();
+        if (this.#liveHost === h)
+          this.#liveHost = undefined;
+      });
+    });
+    const hostSurface = createMemo(() => {
+      const h = host();
+      return h ? createHostSurface(h, this.surfaceId) : undefined;
+    });
+    const current = createMemo(() => this.#surface[0]() ?? hostSurface()?.() ?? this.#ownStore());
+    this.#currentSurface = current;
+    const plugin = createMemo(() => {
+      const base = this.#plugin[0]() ?? {};
+      const h = host();
+      return h ? this.#hostPlugin(h, base) : this.#elementPlugin(base);
+    });
+    const fixture = () => !current();
+    const height = () => lengthOf2(this.#height[0]());
+    const handleRef = (handle) => {
+      this.#handle = handle;
+      if (this.#ready)
+        return;
+      this.#ready = true;
+      queueMicrotask(() => {
+        if (this.#handle === handle && this.isConnected)
+          emit(this, `xui-ready`, { handle });
+      });
+    };
+    const el = this;
+    const props = {
+      get surface() {
+        return current() ?? undefined;
+      },
+      get root() {
+        return fixture() ? el.#root[0]() : undefined;
+      },
+      get templates() {
+        return fixture() ? el.#templates[0]() : undefined;
+      },
+      get data() {
+        return fixture() ? el.#data[0]() : undefined;
+      },
+      get theme() {
+        return current()?.theme ?? el.#theme[0]();
+      },
+      get mode() {
+        return pick(el.#mode[0](), [`light`, `dark`, `system`]);
+      },
+      get density() {
+        return pick(el.#density[0](), [`compact`, `default`, `comfortable`]);
+      },
+      get contrast() {
+        return pick(el.#contrast[0](), [`normal`, `high`, `system`]);
+      },
+      get locale() {
+        return el.#locale[0]() || undefined;
+      },
+      get timeZone() {
+        return el.#timeZone[0]() || undefined;
+      },
+      get direction() {
+        return pick(el.#direction[0](), [`ltr`, `rtl`]);
+      },
+      get width() {
+        return lengthOf2(el.#width[0]());
+      },
+      get style() {
+        const h = height();
+        return h === undefined ? undefined : { height: px(h) };
+      },
+      get viewportHeight() {
+        return el.#viewportHeight[0]();
+      },
+      get strings() {
+        return el.#strings[0]();
+      },
+      get extensions() {
+        return el.#extensions[0]();
+      },
+      get states() {
+        return el.#states[0]();
+      },
+      get measure() {
+        return el.#measure[0]();
+      },
+      get host() {
+        return plugin();
+      },
+      get id() {
+        return el.surfaceId;
+      },
+      handleRef
+    };
+    return createComponent(Show, {
+      get when() {
+        return !host() && !el.#denied[0]() || el.#surface[0]() !== undefined || current() !== null;
+      },
+      get children() {
+        return createComponent(ExponentialSurface, props);
+      }
+    });
+  }
+}
+// packages/exponential-ui-element/src/icons.ts
+import { createRenderEffect } from "solid-js";
+var SKIP = new Set([`size`, `class`, `color`, `strokeWidth`, `absoluteStrokeWidth`, `children`, `ref`, `width`, `height`]);
+function sanitize(root) {
+  for (const el of Array.from(root.querySelectorAll(`script,foreignObject`)))
+    el.remove();
+  for (const el of [root, ...Array.from(root.querySelectorAll(`*`))]) {
+    for (const a of Array.from(el.attributes)) {
+      if (/^on/i.test(a.name) || /(^|:)href$/i.test(a.name) && /^\s*javascript:/i.test(a.value))
+        el.removeAttribute(a.name);
+    }
+  }
+}
+function parse(markup) {
+  if (typeof document === `undefined`)
+    return null;
+  const t = document.createElement(`template`);
+  t.innerHTML = markup.trim();
+  const svg = t.content.firstElementChild;
+  if (!svg || svg.localName !== `svg`)
+    return null;
+  sanitize(svg);
+  return svg;
+}
+var classTokens = (...values) => values.flatMap((v) => (v ?? ``).split(/\s+/)).filter((c, i, all) => c !== `` && all.indexOf(c) === i).join(` `);
+function svgIcon2(markup) {
+  let template;
+  return (props) => {
+    if (template === undefined)
+      template = parse(markup);
+    if (!template)
+      return null;
+    const svg = template.cloneNode(true);
+    const base = template.getAttribute(`class`);
+    let written = new Set;
+    createRenderEffect(() => {
+      const next = new Set;
+      const set = (name, value) => {
+        if (value === undefined || value === null || value === false)
+          return;
+        svg.setAttribute(name, String(value));
+        next.add(name);
+      };
+      const size = props.size;
+      set(`width`, props.width ?? size ?? 24);
+      set(`height`, props.height ?? size ?? 24);
+      const cls = classTokens(base, props.class);
+      if (cls)
+        set(`class`, cls);
+      if (props.color !== undefined)
+        set(`stroke`, props.color);
+      if (props.strokeWidth !== undefined)
+        set(`stroke-width`, props.strokeWidth);
+      const keys = Object.keys(props);
+      const a11y = keys.some((k) => k.startsWith(`aria-`) || k === `role` || k === `title`);
+      if (!a11y)
+        set(`aria-hidden`, `true`);
+      for (const k of keys) {
+        if (SKIP.has(k))
+          continue;
+        const v = props[k];
+        if (typeof v === `string` || typeof v === `number` || v === true)
+          set(k, v);
+      }
+      for (const name of written) {
+        if (next.has(name))
+          continue;
+        const own = template.getAttribute(name);
+        if (own === null)
+          svg.removeAttribute(name);
+        else
+          svg.setAttribute(name, own);
+      }
+      written = next;
+    });
+    return svg;
+  };
+}
+function iconsFromSvg2(resolve) {
+  const byMarkup = new Map;
+  return (name) => {
+    const markup = resolve(name);
+    if (!markup)
+      return;
+    let icon = byMarkup.get(markup);
+    if (!icon) {
+      icon = svgIcon2(markup);
+      byMarkup.set(markup, icon);
+    }
+    return icon;
+  };
+}
+// packages/exponential-ui-element/src/extensions.ts
+import { children as resolveChildren, createMemo as createMemo2, getOwner, runWithOwner, untrack as untrack2 } from "solid-js";
+import { defineSolidExtension, registerExtension as registerSolidExtension } from "@exponential-at/ui-solid";
+function applyRootProps2(el, rootProps) {
+  for (const [name, value] of Object.entries(rootProps)) {
+    if (value === undefined || value === null)
+      continue;
+    if (name === `class`) {
+      for (const c of String(value).split(/\s+/))
+        if (c)
+          el.classList.add(c);
+    } else if (name === `style`) {
+      const style = el.style;
+      if (!style || typeof value !== `object`)
+        continue;
+      for (const [k, v] of Object.entries(value))
+        if (v !== undefined && v !== null)
+          style.setProperty(k, String(v));
+    } else
+      el.setAttribute(name, String(value));
+  }
+}
+var toNodes = (value) => {
+  const out = [];
+  const visit = (v) => {
+    if (Array.isArray(v))
+      v.forEach(visit);
+    else if (typeof v === `function`)
+      visit(v());
+    else if (v instanceof Node)
+      out.push(v);
+    else if (typeof v === `string` || typeof v === `number`)
+      out.push(document.createTextNode(String(v)));
+  };
+  visit(value);
+  return out;
+};
+function adapt(painter) {
+  return (p) => {
+    const owner = getOwner();
+    const kids = resolveChildren(() => p.children);
+    const slots = new Map;
+    const slotOf = (name) => {
+      let hit = slots.get(name);
+      if (!hit) {
+        hit = runWithOwner(owner, () => resolveChildren(() => untrack2(() => p.slots)[name]));
+        slots.set(name, hit);
+      }
+      return hit;
+    };
+    for (const name of Object.keys(untrack2(() => p.node.slots) ?? {}))
+      slotOf(name);
+    const painted = createMemo2(() => {
+      const rootProps = p.rootProps;
+      const ctx = {
+        node: p.node,
+        props: p.props,
+        theme: p.theme,
+        mode: p.mode,
+        tokens: p.tokens,
+        emit: p.emit,
+        rootProps,
+        applyRootProps: (el) => applyRootProps2(el, rootProps),
+        children: () => toNodes(kids()),
+        slot: (name) => p.node.slots?.[name] ? toNodes(slotOf(name)()) : []
+      };
+      return painter(ctx);
+    });
+    return painted;
+  };
+}
+function defineElementExtension2(options) {
+  const components = {};
+  for (const [name, painter] of Object.entries(options.components))
+    components[name] = adapt(painter);
+  return defineSolidExtension({ catalog: options.catalog, components });
+}
+function registerExtension2(extension) {
+  const options = `catalog` in extension && extension.catalog === null ? { components: extension.components } : extension;
+  return registerSolidExtension(options);
+}
+
+// packages/exponential-ui-element/src/index.ts
+import { defineSolidExtension as defineSolidExtension2, createSurface as createSurface2 } from "@exponential-at/ui-solid";
+function define2(tag = TAG2) {
+  if (typeof customElements === `undefined`)
+    return;
+  const existing = customElements.get(tag);
+  if (existing) {
+    if (existing === ExponentialSurfaceElement2 || existing.prototype instanceof ExponentialSurfaceElement2)
+      return;
+    throw new Error(`exponential-ui: <${tag}> is already defined by another class (a second copy of @exponential-at/ui-element, or another library); pick another tag with define("my-surface")`);
+  }
+  customElements.define(tag, tag === TAG2 ? ExponentialSurfaceElement2 : class extends ExponentialSurfaceElement2 {
+  });
+  installHostRule2(tag);
+}
+function installHostRule2(tag) {
+  if (typeof document === `undefined` || !document.head)
+    return;
+  if (document.head.querySelector(`style[data-xui-element="${tag}"]`))
+    return;
+  const style = document.createElement(`style`);
+  style.setAttribute(`data-xui-element`, tag);
+  style.textContent = `:where(${tag}){display:contents}`;
+  document.head.appendChild(style);
+}
+
+export { transportKind2, createTransport2, transportSchemes2, decideTransport2, createHost2, TAG2, lengthOf2, ExponentialSurfaceElement2, svgIcon2, iconsFromSvg2, applyRootProps2, defineElementExtension2, registerExtension2, define2, installHostRule2, defineSolidExtension2, createSurface2 };
+
+//# debugId=61792AA23A38D24D64756E2164756E21
+//# sourceMappingURL=index-yte5bftp.js.map