@chatlychat/widget-element 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @chatlychat/widget-element — changelog
+
+## 0.1.0 — unreleased
+
+- Initial release: `<chatly-widget>` custom element, `defineChatlyWidget()`,
+  and the refcounted embed lifecycle (`startWidget`, `controls`) that
+  `@chatlychat/widget-react` builds on.
+- Zero dependencies. The main entry has no side effects; `/register` defines
+  the tag.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chatly Engineering
+
+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,181 @@
-# Temporary Holding Version
+# @chatlychat/widget-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.
+The Chatly chat widget as a custom element. **Zero dependencies.**
+
+```bash
+pnpm add @chatlychat/widget-element
+```
+
+```html
+<script type="module">
+  import '@chatlychat/widget-element/register';
+</script>
+
+<chatly-widget public-id="acme-web" api-url="https://api.chatlychat.com"></chatly-widget>
+```
+
+Works in Vue, Svelte, Angular, Lit, Astro, Alpine, htmx and plain HTML —
+anywhere a custom element works. For React, use
+[`@chatlychat/widget-react`](../widget-react), which is built on this package's
+lifecycle.
+
+## Why not just paste the snippet?
+
+If a `<script>` in your `<head>` is all you need, paste
+[the snippet](https://chatlychat.com/docs/channel-web) and stop reading. This
+package earns its keep when the widget's lifetime is tied to something your
+framework owns:
+
+- the chat should appear on some routes and not others, and your router
+  unmounts the element;
+- the theme or the visitor's identity comes from component state;
+- your templates bind properties and listen for events, and you would rather
+  write `<chatly-widget :theme="theme" @chatly-ready="…">` than reach into
+  `window`.
+
+It also handles three things a hand-written integration usually does not: a
+widget left behind when its component unmounts, a re-boot caused by a DOM
+move, and a re-initialisation caused by a re-render that changed nothing.
+
+## Attributes
+
+| attribute        | notes                                                         |
+| ---------------- | ------------------------------------------------------------- |
+| `public-id`      | **Required.** The web channel's public ID.                    |
+| `api-url`        | Defaults to the host the loader was served from.              |
+| `realtime-url`   | Rarely needed; the API reports the right one.                 |
+| `loader-url`     | Where `loader.js` is served from. **Self-hosting: set this.** |
+| `locale`         | Applied with `setLocale()` once the widget is up.             |
+| `css-overrides`  | CSS injected into the widget's shadow root.                   |
+| `inline`         | Boolean. Mount the chat inside this element.                  |
+| `theme`          | JSON.                                                         |
+| `behavior`       | JSON.                                                         |
+| `visitor`        | JSON.                                                         |
+| `copy`           | JSON.                                                         |
+| `copy-by-locale` | JSON.                                                         |
+| `quick-links`    | JSON.                                                         |
+
+Attributes are live: change one and the element applies it. A changed
+`visitor` becomes an `identify()` and a changed `locale` a `setLocale()` —
+neither re-mounts the widget. A change to anything else re-initialises it,
+which closes an open panel (the widget has no `setTheme`; this is the honest
+cost, and it only happens when a value really changed).
+
+### A malformed JSON attribute does not stop the chat
+
+It is dropped, `console.error` says which attribute and why, and the widget
+starts without it.
+
+That is the opposite of what the widget does with a `mountTo` selector that
+matches nothing, and deliberately so: a failed `mountTo` would put an
+unexpected floating bubble on a page built to embed the chat, which reads as a
+bug and is easy to miss, whereas a failed `theme` leaves a working chat in the
+default colours and a named error in the console. Losing support chat on your
+site over a trailing comma is the worse trade.
+
+## Properties
+
+Every JSON attribute is also a property, and the property wins:
+
+```js
+const chat = document.querySelector('chatly-widget');
+chat.theme = { primaryColor: '#4f46e5', colorScheme: 'auto' };
+chat.visitor = { externalId: 'u_42', email: 'jamie@acme.io', userHash };
+chat.config = { behavior: { tabs: ['home', 'messages'] } }; // the whole object
+```
+
+Setting a property **before** the element is defined or upgraded works too,
+which matters because every property-binding template engine can produce that
+ordering.
+
+`chat.controls` is the widget's post-boot method object — `open`, `close`,
+`toggle`, `identify`, `setUser`, `setCustomAttributes`,
+`deleteCustomAttribute`, `setLabel`, `removeLabel`, `setLocale`, `track`,
+`registerPushToken`, `reset` — so a reference to the element is enough to
+drive the chat. It is also exported on its own as `controls`.
+
+`init` and `destroy` are deliberately absent: the element owns the lifecycle,
+and calling them behind its back leaves it believing a widget is mounted that
+is not.
+
+## Events
+
+The element re-dispatches every widget event as a DOM `CustomEvent`, with the
+widget's payload on `detail`. They bubble and are `composed`, so a listener on
+an ancestor hears them.
+
+`chatly-ready`, `chatly-open`, `chatly-close`, `chatly-message`,
+`chatly-conversation`, `chatly-identified`, `chatly-reset`, `chatly-action`,
+`chatly-error`.
+
+```html
+<chatly-widget public-id="acme-web"></chatly-widget>
+<script type="module">
+  import '@chatlychat/widget-element/register';
+  document.querySelector('chatly-widget').addEventListener('chatly-message', (e) => {
+    console.log('reply from', e.detail.authorType);
+  });
+</script>
+```
+
+Hyphenated, not `chatly:message`: a colon is legal in an event name but not in
+a Vue, Angular or Svelte template binding.
+
+## Inline mounting
+
+```html
+<chatly-widget public-id="acme-web" inline style="height: 600px"></chatly-widget>
+```
+
+The chat fills the element instead of floating. No launcher, no corner offset,
+and `close()` warns instead of working — hide or remove the element instead.
+
+The element sets `display: block` on itself in this mode, because a custom
+element is `display: inline` by default, which collapses to a zero-height box
+and looks exactly like the widget failing to load. It also sets a 420px
+`min-height` unless you set one.
+
+## The main entry has no side effects
+
+Importing `@chatlychat/widget-element` defines nothing and touches no DOM.
+`@chatlychat/widget-element/register` is the opt-in that defines
+`<chatly-widget>`, and `defineChatlyWidget('my-tag')` is there if you need a
+different tag name. Calling either twice is safe.
+
+This split is why `@chatlychat/widget-react` can depend on this package for the
+embed lifecycle without registering an element its consumers never asked for,
+and why nothing here crashes a server-side bundle — a top-level
+`class X extends HTMLElement` would throw `HTMLElement is not defined` the
+moment a Next.js server component imported so much as a type from here.
+
+## One widget per page
+
+`window.Chatly` is a singleton. Two connected `<chatly-widget>` elements with
+different attributes is a misconfiguration: the first owns the configuration,
+the second's attributes are ignored (its events still fire), and a console
+warning says so. Two with the same configuration is harmless — which is what
+makes an element inside a template that re-renders safe.
+
+Moving the element in the DOM, or removing and re-adding it in the same task,
+does **not** re-boot the widget. A `disconnectedCallback` is not necessarily
+an unmount: `appendChild` elsewhere fires disconnect then connect, and so does
+a framework re-keying a list.
+
+## Composing with the snippet
+
+If the page already has the snippet, this package does not fetch a second
+loader — it queues its `init` onto the shim the snippet installed and lets that
+loader replay it. The element's configuration wins. You do not need both, but
+having both is not broken.
+
+## Self-hosting
+
+Set `loader-url`. `GET /v1/channels/:id` returns the right value for your
+deployment as `embed.loaderUrl`; read it from there rather than typing a host.
+The same response lists every origin a running widget connects to
+(`connectOrigins`) — there are three, and a CSP built from the script host
+alone lets the launcher paint and then blocks every request it makes.
+
+## License
+
+MIT — see `LICENSE`.

package/dist/element.d.ts

@@ -0,0 +1,66 @@
+/**
+ * `<chatly-widget>` — the widget as a custom element.
+ *
+ * ── Why the class is built inside a function ────────────────────────────
+ *
+ * `class X extends HTMLElement {}` is evaluated when its MODULE is evaluated,
+ * and `HTMLElement` does not exist in Node. A top-level class would therefore
+ * throw `ReferenceError: HTMLElement is not defined` the moment a Next.js
+ * server component, a Remix loader or a Vitest node-environment test imported
+ * anything from this package — including just a type. That is not a
+ * theoretical risk: it is the single most common way a web-component package
+ * breaks an SSR build, and the stack trace points at the framework rather
+ * than at us.
+ *
+ * So the class is created lazily by `defineChatlyWidget()`, the main entry has
+ * no side effects at all, and `@chatlychat/widget-element/register` is the
+ * opt-in that defines the tag. A React consumer pulling this package in for
+ * the embed lifecycle never registers an element they did not ask for.
+ *
+ * ── Attributes vs properties ────────────────────────────────────────────
+ *
+ * HTML attributes are strings. `theme`, `behavior`, `visitor`, `copy`,
+ * `copy-by-locale` and `quick-links` are objects, so each is accepted BOTH as
+ * a JSON attribute (for a page that is really just HTML) and as a property
+ * (for a framework template that has a real object to hand). The property
+ * wins when both are set, because a framework binding is the more specific
+ * statement.
+ */
+import { controls } from './embed.js';
+import type { ChatlyBehavior, ChatlyCopy, ChatlyEmbedOptions, ChatlyIdentity, ChatlyQuickLink, ChatlyTheme } from './types.js';
+/** The default tag name. Overridable in `defineChatlyWidget`. */
+export declare const CHATLY_WIDGET_TAG = "chatly-widget";
+/**
+ * The events the element re-dispatches, and the handler each comes from.
+ *
+ * Prefixed `chatly-` rather than `chatly:` — a colon is legal in an event
+ * name but not in a Vue/Angular/Svelte template binding, which is most of the
+ * audience for a custom element. They bubble and are `composed` so a listener
+ * on an ancestor (or outside a shadow root the host page put us in) hears them.
+ */
+export declare const ELEMENT_EVENTS: readonly ["ready", "open", "close", "message", "conversation", "identified", "reset", "action", "error"];
+/** `chatly-ready`, `chatly-message`, … — the DOM event names, without prefix. */
+export type ChatlyElementEvent = (typeof ELEMENT_EVENTS)[number];
+/** What `document.querySelector<ChatlyWidgetElement>` gets you. */
+export interface ChatlyWidgetElement extends HTMLElement {
+    theme?: ChatlyTheme;
+    behavior?: ChatlyBehavior;
+    visitor?: ChatlyIdentity;
+    copy?: ChatlyCopy;
+    copyByLocale?: Record<string, ChatlyCopy>;
+    quickLinks?: ChatlyQuickLink[];
+    /** The full option object, for a host that would rather set one thing. */
+    config?: Partial<ChatlyEmbedOptions>;
+    /** `Chatly.open()` and friends, so a reference to the element is enough. */
+    readonly controls: typeof controls;
+}
+/**
+ * Define the element, once.
+ *
+ * Idempotent and safe to call from anywhere: a second call with a tag that is
+ * already registered returns quietly instead of throwing
+ * `NotSupportedError: the name "chatly-widget" has already been used`, which
+ * is what two bundles each importing `/register` would otherwise produce.
+ */
+export declare function defineChatlyWidget(tagName?: string): void;
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,QAAQ,EAAuC,MAAM,YAAY,CAAC;AAE3E,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EAEV,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB,iEAAiE;AACjE,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAqCjD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,0GAUjB,CAAC;AAEX,iFAAiF;AACjF,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAejE,mEAAmE;AACnE,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,EAAE,OAAO,QAAQ,CAAC;CACpC;AA+CD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,MAA0B,GAAG,IAAI,CAS5E"}

package/dist/element.js

@@ -0,0 +1,333 @@
+/**
+ * `<chatly-widget>` — the widget as a custom element.
+ *
+ * ── Why the class is built inside a function ────────────────────────────
+ *
+ * `class X extends HTMLElement {}` is evaluated when its MODULE is evaluated,
+ * and `HTMLElement` does not exist in Node. A top-level class would therefore
+ * throw `ReferenceError: HTMLElement is not defined` the moment a Next.js
+ * server component, a Remix loader or a Vitest node-environment test imported
+ * anything from this package — including just a type. That is not a
+ * theoretical risk: it is the single most common way a web-component package
+ * breaks an SSR build, and the stack trace points at the framework rather
+ * than at us.
+ *
+ * So the class is created lazily by `defineChatlyWidget()`, the main entry has
+ * no side effects at all, and `@chatlychat/widget-element/register` is the
+ * opt-in that defines the tag. A React consumer pulling this package in for
+ * the embed lifecycle never registers an element they did not ask for.
+ *
+ * ── Attributes vs properties ────────────────────────────────────────────
+ *
+ * HTML attributes are strings. `theme`, `behavior`, `visitor`, `copy`,
+ * `copy-by-locale` and `quick-links` are objects, so each is accepted BOTH as
+ * a JSON attribute (for a page that is really just HTML) and as a property
+ * (for a framework template that has a real object to hand). The property
+ * wins when both are set, because a framework binding is the more specific
+ * statement.
+ */
+import { controls, startWidget } from './embed.js';
+/** The default tag name. Overridable in `defineChatlyWidget`. */
+export const CHATLY_WIDGET_TAG = 'chatly-widget';
+/**
+ * Attribute names, and the option each one sets.
+ *
+ * Kebab-case on the outside because that is what HTML authors expect and what
+ * `attributeChangedCallback` reports; camelCase on the inside because that is
+ * the widget's own option name. `json: true` marks the ones parsed rather
+ * than passed through.
+ */
+const ATTRIBUTES = [
+    { attribute: 'public-id', option: 'publicId' },
+    { attribute: 'api-url', option: 'apiUrl' },
+    { attribute: 'realtime-url', option: 'realtimeUrl' },
+    { attribute: 'loader-url', option: 'loaderUrl' },
+    { attribute: 'locale', option: 'locale' },
+    { attribute: 'css-overrides', option: 'cssOverrides' },
+    { attribute: 'theme', option: 'theme', json: true },
+    { attribute: 'behavior', option: 'behavior', json: true },
+    { attribute: 'visitor', option: 'visitor', json: true },
+    { attribute: 'copy', option: 'copy', json: true },
+    { attribute: 'copy-by-locale', option: 'copyByLocale', json: true },
+    { attribute: 'quick-links', option: 'quickLinks', json: true },
+];
+/**
+ * `inline` is handled separately: it is boolean (present/absent) and it does
+ * not carry a value, it decides whether `mountTo` is this element.
+ */
+const INLINE_ATTRIBUTE = 'inline';
+const OBSERVED = [...ATTRIBUTES.map((a) => a.attribute), INLINE_ATTRIBUTE];
+/**
+ * The events the element re-dispatches, and the handler each comes from.
+ *
+ * Prefixed `chatly-` rather than `chatly:` — a colon is legal in an event
+ * name but not in a Vue/Angular/Svelte template binding, which is most of the
+ * audience for a custom element. They bubble and are `composed` so a listener
+ * on an ancestor (or outside a shadow root the host page put us in) hears them.
+ */
+export const ELEMENT_EVENTS = [
+    'ready',
+    'open',
+    'close',
+    'message',
+    'conversation',
+    'identified',
+    'reset',
+    'action',
+    'error',
+];
+/**
+ * The object-valued properties, for the pre-upgrade dance in the constructor.
+ *
+ * Derived from `ATTRIBUTES` plus `config` so a new JSON attribute cannot be
+ * added without also being rescued on upgrade — the failure mode there is
+ * silent, and a list maintained by hand beside another list is how it would
+ * happen.
+ */
+const PROPERTY_NAMES = [
+    ...ATTRIBUTES.filter((a) => a.json === true).map((a) => a.option),
+    'config',
+];
+/**
+ * Parse a JSON attribute, or drop it.
+ *
+ * ── Why a malformed attribute does not stop the widget ──────────────────
+ *
+ * A broken `theme` attribute could either (a) refuse to mount, the way the
+ * widget refuses a `mountTo` selector that matches nothing, or (b) drop the
+ * attribute, say so, and start anyway. (b), because the two cases are not
+ * alike: a failed `mountTo` would put an unexpected floating bubble on a page
+ * built to embed the chat, which reads as a bug and is easy to miss, whereas a
+ * failed `theme` leaves a WORKING chat in the default colours plus a named
+ * error in the console. Losing support chat on a customer's site over a
+ * trailing comma is the worse trade.
+ *
+ * ── Why not zod ─────────────────────────────────────────────────────────
+ *
+ * This package ships to a customer's page with zero dependencies, and zod
+ * measured ~11KB gzipped when it reached the widget. There is also nothing
+ * for it to be the source of truth ABOUT: the widget's `InitOptions` has no
+ * runtime schema on either side of this boundary — it is a typed object
+ * literal from the host page — and the server validates what actually reaches
+ * it (`widgetInitSchema`). So the boundary asserts what it can honestly
+ * assert: this parsed, and it is an object rather than an array or a number.
+ */
+function parseJsonAttribute(element, attribute, raw) {
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch (err) {
+        console.error(`[Chatly] <${element.localName}> ignored the ${attribute} attribute — it is not valid ` +
+            `JSON. The widget still started, without it. ${String(err)}`);
+        return undefined;
+    }
+    if (typeof parsed !== 'object' || parsed === null) {
+        console.error(`[Chatly] <${element.localName}> ignored the ${attribute} attribute — JSON parsed to ` +
+            `${typeof parsed}, and this attribute must be an object or array.`);
+        return undefined;
+    }
+    return parsed;
+}
+/**
+ * Define the element, once.
+ *
+ * Idempotent and safe to call from anywhere: a second call with a tag that is
+ * already registered returns quietly instead of throwing
+ * `NotSupportedError: the name "chatly-widget" has already been used`, which
+ * is what two bundles each importing `/register` would otherwise produce.
+ */
+export function defineChatlyWidget(tagName = CHATLY_WIDGET_TAG) {
+    if (typeof window === 'undefined' || typeof customElements === 'undefined') {
+        // SSR, or a DOM-less test. Not an error — see the file header.
+        return;
+    }
+    if (customElements.get(tagName) !== undefined) {
+        return;
+    }
+    customElements.define(tagName, buildElementClass());
+}
+function buildElementClass() {
+    return class ChatlyWidget extends HTMLElement {
+        static get observedAttributes() {
+            return OBSERVED;
+        }
+        controls = controls;
+        /*
+         * Object props are held in a private map rather than as class fields.
+         *
+         * `useDefineForClassFields` is on in this repo's tsconfig, so a declared
+         * field is installed with `Object.defineProperty` in the constructor —
+         * which would CLOBBER a value a framework set on the element before it was
+         * upgraded (`el.theme = {…}` then `document.body.append(el)`). Accessors
+         * on the prototype plus a private store keep the pre-upgrade value.
+         */
+        #props = new Map();
+        #handle = null;
+        constructor() {
+            super();
+            /*
+             * The pre-upgrade property dance.
+             *
+             * A framework that does `el.theme = {…}` before the element is defined
+             * (or before this module loads) creates an OWN data property, which
+             * shadows the prototype accessor for good: the setter never runs, the
+             * private store stays empty, and the theme is silently dropped. Every
+             * template engine that binds properties — Vue, Angular, Lit, Svelte —
+             * can produce that ordering, and so can plain `createElement` +
+             * `append` on a page whose bundle is still loading.
+             *
+             * So on upgrade, each own property is lifted off the instance and
+             * re-assigned, which this time reaches the accessor.
+             */
+            for (const key of PROPERTY_NAMES) {
+                if (!Object.prototype.hasOwnProperty.call(this, key)) {
+                    continue;
+                }
+                const value = this[key];
+                delete this[key];
+                this[key] = value;
+            }
+        }
+        get theme() {
+            return this.#props.get('theme');
+        }
+        set theme(value) {
+            this.#setProp('theme', value);
+        }
+        get behavior() {
+            return this.#props.get('behavior');
+        }
+        set behavior(value) {
+            this.#setProp('behavior', value);
+        }
+        get visitor() {
+            return this.#props.get('visitor');
+        }
+        set visitor(value) {
+            this.#setProp('visitor', value);
+        }
+        get copy() {
+            return this.#props.get('copy');
+        }
+        set copy(value) {
+            this.#setProp('copy', value);
+        }
+        get copyByLocale() {
+            return this.#props.get('copyByLocale');
+        }
+        set copyByLocale(value) {
+            this.#setProp('copyByLocale', value);
+        }
+        get quickLinks() {
+            return this.#props.get('quickLinks');
+        }
+        set quickLinks(value) {
+            this.#setProp('quickLinks', value);
+        }
+        get config() {
+            return this.#props.get('config');
+        }
+        set config(value) {
+            this.#setProp('config', value);
+        }
+        #setProp(key, value) {
+            if (value === undefined) {
+                this.#props.delete(key);
+            }
+            else {
+                this.#props.set(key, value);
+            }
+            // Only if connected: a property set before the element is in the DOM is
+            // configuration, not a change — `connectedCallback` will read it.
+            if (this.#handle !== null) {
+                this.#handle.update(this.#options(), this.#handlers());
+            }
+        }
+        connectedCallback() {
+            if (this.hasAttribute(INLINE_ATTRIBUTE)) {
+                /*
+                 * The element IS the container in inline mode, and the widget fills
+                 * what it is given. Without `display: block` a custom element is
+                 * `display: inline`, which collapses to a zero-height box and renders
+                 * a chat panel nobody can see — the single most reported mistake with
+                 * inline mounting, and it looks exactly like the widget not loading.
+                 */
+                this.style.display = 'block';
+                if (this.style.minHeight === '') {
+                    this.style.minHeight = '420px';
+                }
+            }
+            this.#handle = startWidget(this, this.#options(), this.#handlers());
+        }
+        disconnectedCallback() {
+            /*
+             * A disconnect is not necessarily an unmount: `appendChild` elsewhere in
+             * the document fires disconnect then connect, and so does a framework
+             * re-keying its list. `startWidget`'s deferred teardown is what makes
+             * that survivable — see `release` in embed.ts.
+             */
+            this.#handle?.stop();
+            this.#handle = null;
+        }
+        attributeChangedCallback() {
+            if (this.#handle === null) {
+                return;
+            }
+            this.#handle.update(this.#options(), this.#handlers());
+        }
+        /** Attributes, then properties (which win), then `config` (which wins). */
+        #options() {
+            const options = {};
+            for (const { attribute, option, json } of ATTRIBUTES) {
+                const raw = this.getAttribute(attribute);
+                if (raw === null) {
+                    continue;
+                }
+                const value = json === true ? parseJsonAttribute(this, attribute, raw) : raw;
+                if (value !== undefined) {
+                    options[option] = value;
+                }
+            }
+            for (const [key, value] of this.#props) {
+                if (key !== 'config') {
+                    options[key] = value;
+                }
+            }
+            Object.assign(options, this.config ?? {});
+            if (this.hasAttribute(INLINE_ATTRIBUTE)) {
+                options['mountTo'] = this;
+            }
+            // `publicId` may legitimately be missing here — the element can be in
+            // the DOM before its framework has bound the attribute. `startWidget`
+            // warns and declines rather than booting a widget with no channel.
+            return options;
+        }
+        /**
+         * Re-dispatch every widget event as a DOM event on this element.
+         *
+         * Written out rather than generated from `ELEMENT_EVENTS` in a loop: the
+         * handler signatures differ (`onOpen` takes nothing, `onReady` a session),
+         * and assigning through a string index would need a cast that defeats the
+         * one thing the compiler is useful for here — noticing that a handler name
+         * in `ChatlyEmbedHandlers` has no `chatly-*` event.
+         */
+        #handlers() {
+            const emit = (name) => (detail) => {
+                this.dispatchEvent(new CustomEvent(`chatly-${name}`, { detail, bubbles: true, composed: true }));
+            };
+            return {
+                onReady: emit('ready'),
+                onOpen: emit('open'),
+                onClose: emit('close'),
+                onMessage: emit('message'),
+                onConversation: emit('conversation'),
+                onIdentified: emit('identified'),
+                onReset: emit('reset'),
+                onAction: emit('action'),
+                onError: emit('error'),
+            };
+        }
+    };
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA0B,MAAM,YAAY,CAAC;AAY3E,iEAAiE;AACjE,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAEjD;;;;;;;GAOG;AACH,MAAM,UAAU,GAIX;IACH,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE;IAC9C,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE;IAC1C,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE;IACpD,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;IAChD,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACzC,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE;IACtD,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;IACnD,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE;IACzD,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE;IACvD,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE;IACjD,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE;IACnE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE;CAC/D,CAAC;AAEF;;;GAGG;AACH,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAElC,MAAM,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAE3E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,OAAO;IACP,MAAM;IACN,OAAO;IACP,SAAS;IACT,cAAc;IACd,YAAY;IACZ,OAAO;IACP,QAAQ;IACR,OAAO;CACC,CAAC;AAKX;;;;;;;GAOG;AACH,MAAM,cAAc,GAAsB;IACxC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;IACjE,QAAQ;CACT,CAAC;AAgBF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,kBAAkB,CAAC,OAAoB,EAAE,SAAiB,EAAE,GAAW;IAC9E,IAAI,MAAe,CAAC;IACpB,IAAI,CAAC;QACH,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CACX,aAAa,OAAO,CAAC,SAAS,iBAAiB,SAAS,+BAA+B;YACrF,+CAA+C,MAAM,CAAC,GAAG,CAAC,EAAE,CAC/D,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QAClD,OAAO,CAAC,KAAK,CACX,aAAa,OAAO,CAAC,SAAS,iBAAiB,SAAS,8BAA8B;YACpF,GAAG,OAAO,MAAM,kDAAkD,CACrE,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAC,UAAkB,iBAAiB;IACpE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;QAC3E,+DAA+D;QAC/D,OAAO;IACT,CAAC;IACD,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO;IACT,CAAC;IACD,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,iBAAiB;IACxB,OAAO,MAAM,YAAa,SAAQ,WAAW;QACpC,MAAM,KAAK,kBAAkB;YAClC,OAAO,QAAQ,CAAC;QAClB,CAAC;QAEe,QAAQ,GAAG,QAAQ,CAAC;QAEpC;;;;;;;;WAQG;QACH,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;QACpC,OAAO,GAA6B,IAAI,CAAC;QAEzC;YACE,KAAK,EAAE,CAAC;YACR;;;;;;;;;;;;;eAaG;YACH,KAAK,MAAM,GAAG,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;oBACrD,SAAS;gBACX,CAAC;gBACD,MAAM,KAAK,GAAI,IAA2C,CAAC,GAAG,CAAC,CAAC;gBAChE,OAAQ,IAA2C,CAAC,GAAG,CAAC,CAAC;gBACxD,IAA2C,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YAC5D,CAAC;QACH,CAAC;QAED,IAAW,KAAK;YACd,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAA4B,CAAC;QAC7D,CAAC;QACD,IAAW,KAAK,CAAC,KAA8B;YAC7C,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,IAAW,QAAQ;YACjB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAA+B,CAAC;QACnE,CAAC;QACD,IAAW,QAAQ,CAAC,KAAiC;YACnD,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;QAED,IAAW,OAAO;YAChB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,SAAS,CAA+B,CAAC;QAClE,CAAC;QACD,IAAW,OAAO,CAAC,KAAiC;YAClD,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,IAAW,IAAI;YACb,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAA2B,CAAC;QAC3D,CAAC;QACD,IAAW,IAAI,CAAC,KAA6B;YAC3C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QAED,IAAW,YAAY;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAA2C,CAAC;QACnF,CAAC;QACD,IAAW,YAAY,CAAC,KAA6C;YACnE,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC;QAED,IAAW,UAAU;YACnB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAkC,CAAC;QACxE,CAAC;QACD,IAAW,UAAU,CAAC,KAAoC;YACxD,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAW,MAAM;YACf,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAA4C,CAAC;QAC9E,CAAC;QACD,IAAW,MAAM,CAAC,KAA8C;YAC9D,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACjC,CAAC;QAED,QAAQ,CAAC,GAAW,EAAE,KAAc;YAClC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC9B,CAAC;YACD,wEAAwE;YACxE,kEAAkE;YAClE,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC1B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YACzD,CAAC;QACH,CAAC;QAEM,iBAAiB;YACtB,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACxC;;;;;;mBAMG;gBACH,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;gBAC7B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC;oBAChC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;gBACjC,CAAC;YACH,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACtE,CAAC;QAEM,oBAAoB;YACzB;;;;;eAKG;YACH,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;QAEM,wBAAwB;YAC7B,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACzD,CAAC;QAED,2EAA2E;QAC3E,QAAQ;YACN,MAAM,OAAO,GAA4B,EAAE,CAAC;YAC5C,KAAK,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,UAAU,EAAE,CAAC;gBACrD,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBACzC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;oBACjB,SAAS;gBACX,CAAC;gBACD,MAAM,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC7E,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;gBAC1B,CAAC;YACH,CAAC;YACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACvC,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;oBACrB,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC;YACD,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACxC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;YAC5B,CAAC;YACD,sEAAsE;YACtE,sEAAsE;YACtE,mEAAmE;YACnE,OAAO,OAAwC,CAAC;QAClD,CAAC;QAED;;;;;;;;WAQG;QACH,SAAS;YACP,MAAM,IAAI,GACR,CAAC,IAAwB,EAAE,EAAE,CAC7B,CAAC,MAAgB,EAAQ,EAAE;gBACzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC7E,CAAC;YACJ,CAAC,CAAC;YACJ,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;gBACtB,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;gBACtB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;gBAC1B,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;gBACpC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;gBAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACxB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;aACvB,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}