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

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2026 Dennis Strähhuber
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,54 @@
+Exponential
+Copyright 2026 Dennis Strähhuber
+
+This product includes software developed as part of the Exponential project,
+licensed under the Apache License, Version 2.0 (see LICENSE at the repo root).
+
+Third-party code vendored into this repository keeps its own NOTICE, next to
+the vendored source:
+
+  apps/desktop/crates/ui/NOTICE
+  apps/desktop/crates/gpui-markdown-editor/NOTICE
+
+This file records the attributions that travel with a distributed artifact.
+It is not the per-client dependency inventory; that is generated separately.
+
+
+================================================================================
+Feedback widget
+================================================================================
+
+The feedback widget (packages/widget, emitted to
+apps/web/public/widget/v1/loader.js and widget.js) is served cross-origin to
+third-party websites, so its bundle redistributes the software below. Both
+emitted files carry a short banner naming these packages and pointing here.
+
+  preact
+  Copyright (c) 2015-present Jason Miller
+  https://github.com/preactjs/preact
+  MIT License
+
+  @zumer/snapdom
+  Copyright (c) 2025 ZumerLab
+  https://github.com/zumerlab/snapdom
+  MIT License
+
+Both are made available under the following terms:
+
+    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,213 @@
-# Temporary Holding Version
+# `@exponential-at/ui-element`: Exponential UI as a custom element
 
-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.
+`<exponential-surface>` paints an A2UI surface in the core catalog
+(`@exponential-at/ui`) in any page, with no framework (FEED-130). It does not
+have a painter of its own. It mounts the Solid renderer
+(`@exponential-at/ui-solid`) inside itself, so you get one painter with two
+entry points. The element uses light DOM and is `display: contents` through
+one shared zero-specificity rule `define()` installs (`:where(exponential-surface){display:contents}`,
+so any rule of yours wins), so the surface's `.xui-surface` root is THE box,
+in the same place React's div would be. Elements attached in one task mount
+together: the first at once, the rest in a microtask inside one batch.
+
+## The invariant
+
+For every surface, the element paints exactly what the React renderer
+paints: the same elements, attributes, `<style data-xui-style>` sheets,
+layers and runtime themes. `src/parity.test.ts` compares the element's
+`.xui-surface` subtree against `@exponential-at/ui-react` in jsdom, using
+the Solid package's `serializeDom` and `renderReact`.
+
+```html
+<script type="module">
+  import "@exponential-at/ui-element/define"   // or the self-contained ./standalone bundle
+</script>
+
+<exponential-surface theme="orange" mode="system" src="/ui/stream" post="/ui/events"></exponential-surface>
+
+<script type="module">
+  const el = document.querySelector("exponential-surface")
+  el.addEventListener("xui-action", (e) => e.detail.waitUntil(fetch("/save", { method: "POST", body: JSON.stringify(e.detail.context) })))
+</script>
+```
+
+Without a server, call `apply()` to feed it A2UI v0.9 messages:
+
+```js
+const el = document.createElement("exponential-surface")
+document.body.append(el)
+el.apply({ createSurface: { surfaceId: "main", catalogId } })
+el.apply({ updateComponents: { surfaceId: "main", components } })
+```
+
+## API
+
+| attribute / property | what |
+|---|---|
+| `theme` | A built-in id (attribute). The property also takes a theme JSON or a `ResolvedTheme`; an object is not reflected. An unusable theme never throws: the default theme paints and `xui-theme-issues` fires. |
+| `mode` | `light`, `dark` or `system` (the default, followed live) |
+| `density`, `contrast` | `compact`, `default` or `comfortable`; `normal`, `high` or `system` |
+| `locale`, `time-zone` (`timeZone`) | BCP 47 locale (default `en-US`) and IANA time zone (default the platform's) |
+| `direction` | `ltr` or `rtl` (default: the locale's direction) |
+| `width`, `height` | A numeric string means px; any other string is a CSS length. An explicit `height` is the viewport for height conditions. |
+| `surface-id` (`surfaceId`) | The surface id (default `main`): the `xui-s-<id>` class, the store `apply()` makes, and the host surface it paints |
+| `src`, `post`, `transport` | The host API (see below) |
+| `surface` | A `createSurface` store (it takes priority over the other sources) |
+| `root`, `templates`, `data` | Fixture mode: a normalized tree, its lifted templates, and a data model |
+| `host` | An `ExponentialHost` to use instead of `src` |
+| `plugin` | A `HostPlugin`: icons, `Markdown`, URL and media policies, `optionSource`, `mediaRequest`, `mediaStreamUrl`, `resolveUrl`, `functions`, and the callbacks |
+| `extensions`, `strings`, `states`, `measure`, `viewportHeight` | The same as the Solid props |
+
+String properties reflect to their attributes. Setting a property to
+`null` removes its attribute. Properties set before the element is attached
+(or before it is upgraded) still apply.
+
+Read-only properties:
+
+- `handle`: the `SurfaceHandle`, or `null` until the first paint.
+- `issues`: the active store's reduce issues.
+- `status`: the transport status; `statusDetail`: its detail (an error, or why the URL policy refused `src`/`post`).
+- `surfaceState`: the `SurfaceState` being painted.
+
+Methods:
+
+- `apply(message)` sends the message to the `surface` property, else to the host (`receive`), else to a store created on first use.
+- `setData(pointer, value)` writes the active store. In fixture mode it sets a new `data`.
+- `reset()` resets the active store.
+- `run(command)`, `focus(id)`, `announce(text, live?)`, `scrollIntoView(id)` and `scrollToIndex(id, index, align?)` go through the handle. Before the first paint they return `false` or do nothing. Called without a string id, `focus()` and `scrollIntoView()` keep their usual `HTMLElement` meaning.
+
+Detaching the element disposes the painted DOM. Re-attaching it paints
+again, and every property survives. Attaching also clears any children the
+author put inside the element.
+
+## Events
+
+Every event is a `CustomEvent` that bubbles and is composed. When there is
+a matching `plugin` callback, both the callback and the event fire. Where a
+promise is involved, the results are joined: the control stays pending until
+all of them settle.
+
+| event | detail |
+|---|---|
+| `xui-action` | `SurfaceActionEvent` + `waitUntil(promise)`. A Button stays pending (`aria-busy="true"` and `disabled` at once; `data-pending="true"` after `PENDING_DELAY_MS`) until the promise settles. |
+| `xui-input` | `SurfaceInputEvent` + `waitUntil`. The revision is acknowledged when the promise settles. |
+| `xui-function-call` | `{ call, respond(value) }`. The first `respond` wins. With no response, the plugin's `onFunctionCall` result is used. |
+| `xui-open-url` | `{ url }`, after the URL policy passed it. Cancelable: if not cancelled, it goes to `plugin.openUrl`, else `window.open(url, "_blank", "noopener,noreferrer")`. |
+| `xui-upload` | `{ files, target: { nodeId, name }, waitUntil }` |
+| `xui-paint-error` | `{ error }` |
+| `xui-theme-issues` | `{ issues }` |
+| `xui-unknown` | `{ node }` |
+| `xui-status` | `{ status, detail? }` |
+| `xui-ready` | `{ handle }`. Fires once per mount, in a microtask after the handle arrives, so listeners added right after `appendChild` still get it. |
+
+`HTMLElementEventMap` and `HTMLElementTagNameMap` are augmented, so
+`addEventListener("xui-action", …)` and `document.createElement("exponential-surface")`
+are typed.
+
+## The host API
+
+When `src` is set and no `host` property is given, the element builds
+`new ExponentialHost({ transport })` with one of these transports:
+
+- `WebSocketTransport` when `src` is a `ws:`/`wss:` URL or `transport="ws"`.
+- `SseTransport` when `transport="sse"`.
+- `JsonlStreamTransport` otherwise.
+
+Client messages are POSTed to `post` (default `src`). The element connects
+the host it built when attached, closes it when detached, and rebuilds it
+when `src`, `post` or `transport` change. A host surface paints nothing
+until the host has a surface with `surface-id`. Actions, functions, URLs and
+media route through the host (`hostPlugin`). `xui-open-url` still fires
+before the host opens a URL.
+
+A `host` property belongs to the page. The element connects it only if it
+has a transport and has never connected (`status === "closed"`), and it
+never closes it.
+
+`src` and `post` pass the page's URL policy (`plugin.urls`, the one every
+href passes) BEFORE a transport is built (`decideTransport`): a private,
+loopback or link-local host (`10.0.0.5`, `localhost`, `*.local`,
+`169.254.169.254`, `::1`, decimal and IPv4-mapped literals) is denied unless
+`plugin.urls.allowPrivate` opts it in (the page's own private origin is, so
+a dev server on localhost streams from itself); a `hosts` allowlist holds;
+`schemes: ["https"]` means https + wss only; `javascript:`, `file:`, `data:`
+never connect. A `ws:`/`wss:` url is decided as its http(s) twin. A denied
+`src` or `post` builds no host and fetches nothing: `status` is `closed`,
+`statusDetail` says why (`src denied by the URL policy (private)`) and
+`xui-status` fires once. The standalone bundle carries the same filter.
+
+## Extensions
+
+```js
+import { defineElementExtension } from "@exponential-at/ui-element"
+
+el.extensions = [defineElementExtension({
+  catalog,                                    // defineExtension(...) or its JSON
+  components: {
+    Gauge: (ctx) => {
+      const div = document.createElement("div")
+      ctx.applyRootProps(div)                   // class, data-xui-id, data-xui-c, data-r-*, aria, dir, style
+      div.textContent = `${ctx.props.value}`
+      div.append(...ctx.children())             // ctx.slot("header") for a slot
+      div.onclick = () => ctx.emit("press")
+      return div
+    },
+  },
+})]
+```
+
+A painter is a plain function: `ElementPaintContext` goes in, and one DOM
+element comes out. It runs again when the node, props, theme, mode or root
+attributes change, and the new element replaces the old one. The painted
+children and slots are the same nodes on every re-paint. `registerExtension(ext)`
+registers one for every surface on the page. A `components` key that names a
+core native overrides its painter. A host built from `src` learns the
+catalogs of `el.extensions` when it is built: set the extensions before the
+element attaches (or before `src`).
+
+## Icons for framework-less hosts
+
+```js
+el.plugin = { icons: iconsFromSvg((name) => sprite[name]) }   // SVG markup strings
+```
+
+Each markup string becomes an icon component, created once per distinct
+string. A name with no markup falls back to the renderer's own Lucide
+glyphs. The wrapper sets on the `<svg>` root what lucide-react's root
+carries for the props it receives:
+
+- `width`/`height` = `width` ?? `size` ?? 24.
+- `class` = the markup's own classes + the painter's.
+- `aria-hidden="true"`, unless an aria-*/role/title prop is passed.
+- `stroke` = `color`, `stroke-width` = `strokeWidth`.
+- Every other string or number attribute as given (`data-icon`…).
+
+The markup is trusted, but `<script>`, `foreignObject`, `on*` attributes
+and `javascript:` links are stripped anyway.
+
+## Entries
+
+| entry | what |
+|---|---|
+| `@exponential-at/ui-element` | No side effects: the class, `TAG`, `define(tag?)`, the helpers, and re-exports of `createSurface`, `registerExtension` and `defineSolidExtension` |
+| `@exponential-at/ui-element/define` | Calls `define()` on import (idempotent; a tag taken by another class throws; another tag gets its own subclass) |
+| `@exponential-at/ui-element/standalone` | The same, bundled self-contained (Solid and the renderer inlined) into one ES module |
+
+## Layout
+
+| path | what |
+|---|---|
+| `src/element.ts` | `ExponentialSurfaceElement`: the signals, attributes and properties, the source order, the merged plugin, mounting |
+| `src/events.ts` | Event names, detail types, the global augmentations, the `waitUntil` join |
+| `src/transport.ts` | `src`/`post`/`transport` → an `ExponentialHost` |
+| `src/extensions.ts` | `defineElementExtension`, `registerExtension`, `applyRootProps` |
+| `src/icons.ts` | `iconsFromSvg`, `svgIcon` |
+| `src/index.ts`, `define.ts`, `standalone.ts` | The entries |
+| `src/*.test.ts` | jsdom suites: element, events, transport, extensions, DOM parity with React |
+
+## Commands
+
+```bash
+bun run --filter @exponential-at/ui-element typecheck
+bun run --filter @exponential-at/ui-element test
+```