@datalayer/agent-runtimes 1.3.29 → 1.3.30

package/lib/loop/embed/AppEmbed.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * An application in another product's page, as a React component (LOOP
+ * D-07, D-09, D-11): what the `<datalayer-app>` element draws, and what a
+ * host that uses React mounts itself.
+ *
+ * Four modes, as the Appspec says (`deployment.embedded.mode`) or the host:
+ *
+ * - **inline** — the application where the component is: `AppRenderer`, its
+ *   page beside its conversation when it has one;
+ * - **bubble** — a round button in the corner that opens the conversation in
+ *   a popup, the copilot pattern;
+ * - **panel** — the conversation at the right edge of the page, at full
+ *   height;
+ * - **assistant** — the application's character on the page, speaking in a
+ *   balloon (§6.9), the one its Appspec names (`interface.assistant`).
+ *
+ * The three floating modes are `ChatFloating`'s, given the application's
+ * name, welcome, starters and accent, and its agent's endpoint — created
+ * with the application's spec in its payload, so the runtime enforces its
+ * rules there as it does inline.
+ *
+ * In the `loop` theme with the application's accent (T-12, T-05), which the
+ * host may override with the face and the mode (D-11).
+ *
+ * @module loop/embed/AppEmbed
+ */
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { registerPortalRoot } from '@primer/react';
+import { DatalayerThemeProvider, loopTheme } from '@datalayer/primer-addons';
+import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
+import { ChatFloating } from '../../chat/ChatFloating';
+import { useAgentRuntimes } from '../../hooks/useAgentRuntimes';
+import { AppRenderer, DATALAYER_BOOTSTRAP_AGENTSPEC, appDatalayerCreatePayload, defineAppPlugin, } from '../apps/AppRenderer';
+import { LoopAgentBlueprint } from '../core';
+import { ensureServerAgent } from '../plugins/agents/switchable';
+import { floatingViewOf } from './embedConfig';
+import { embedThemeStyles } from './embedTheme';
+/** What the application's agent is created with on an agent-runtimes server. */
+function serverCreatePayload(app) {
+    const blueprint = (defineAppPlugin(app).contributes ?? []).find((item) => item.point === LoopAgentBlueprint);
+    return blueprint?.value.createPayload ?? { name: app.id };
+}
+/**
+ * The application's agent on the host's agent-runtimes server: created
+ * there with the application's spec unless it is there already, as the
+ * workspace's Local target does.
+ */
+function useServerAgent(app, serverUrl) {
+    const [state, setState] = useState({
+        waiting: 'Starting…',
+    });
+    const source = JSON.stringify(app);
+    useEffect(() => {
+        let cancelled = false;
+        const base = serverUrl.replace(/\/+$/, '');
+        setState({ waiting: 'Starting…' });
+        ensureServerAgent(base, app.id, serverCreatePayload(app)).then(() => {
+            if (!cancelled) {
+                setState({
+                    protocol: {
+                        type: 'ag-ui',
+                        endpoint: `${base}/api/v1/ag-ui/${app.id}/`,
+                        agentId: app.id,
+                    },
+                });
+            }
+        }, (error) => {
+            if (!cancelled) {
+                setState({
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [serverUrl, source]);
+    return state;
+}
+/**
+ * The application's agent on a Datalayer runtime: allocated with a plain
+ * agentspec, the agent created there with the application's spec — the
+ * runtime `AppRenderer` launches inline (R-03, R-05).
+ */
+function useDatalayerAgent(app, instance) {
+    const token = useIAMStore(state => state.token);
+    const source = JSON.stringify(app);
+    const agentConfig = useMemo(() => ({
+        name: app.id,
+        protocol: 'ag-ui',
+        agentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC,
+        createPayload: appDatalayerCreatePayload(app, instance),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [source, instance?.appUid, instance?.deploymentUid, instance?.version]);
+    const { runtime, error } = useAgentRuntimes({
+        agentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC,
+        agentConfig,
+        variant: 'cloud-pydanticai',
+        // Only for a visitor Datalayer knows: a runtime is somebody's to pay for.
+        autoStart: Boolean(token),
+        autoCreateAgent: Boolean(token),
+    });
+    if (!token) {
+        return {
+            error: `${app.name} runs on Datalayer, which needs you signed in. An application embedded for visitors who are not needs its embed token (LOOP D-14), or an agent-runtimes server of the host's own (the "server" attribute).`,
+        };
+    }
+    if (error) {
+        return { error };
+    }
+    if (!runtime?.agentBaseUrl) {
+        return { waiting: 'Starting…' };
+    }
+    return {
+        protocol: {
+            type: 'ag-ui',
+            endpoint: `${runtime.agentBaseUrl}/api/v1/ag-ui/${app.id}/`,
+            agentId: app.id,
+            authToken: token,
+        },
+    };
+}
+/** The application's face, as the floating chat's button and header draw it. */
+function Face({ emoji }) {
+    return (_jsx("span", { "aria-hidden": true, style: { fontSize: 18, lineHeight: 1 }, children: emoji }));
+}
+/** The bubble, the panel and the assistant: `ChatFloating` in that mode. */
+function FloatingChat({ app, view, colorMode, agent, }) {
+    const welcome = app.interface.welcome || app.description;
+    return (_jsx(ChatFloating
+    // A new agent is a new conversation.
+    , { defaultViewMode: view, assistantCharacter: app.interface.assistant ?? 'paperclip', protocol: agent.protocol, authToken: agent.protocol?.authToken, title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, suggestions: app.interface.starters.map(starter => ({
+            title: starter.label,
+            message: starter.message,
+        })), themeVariant: "loop", colorMode: colorMode, showTokenUsage: false, showSettingsButton: false, showPoweredBy: false, useStore: false, launching: !agent.protocol && !agent.error, launchingMessage: agent.waiting, disabled: Boolean(agent.error), disableReason: agent.error }, agent.protocol?.endpoint ?? 'waiting'));
+}
+/** Floating, its agent on the host's agent-runtimes server. */
+function ServerFloating({ serverUrl, ...props }) {
+    return (_jsx(FloatingChat, { ...props, agent: useServerAgent(props.app, serverUrl) }));
+}
+/** Floating, its agent on a Datalayer runtime. */
+function DatalayerFloating({ instance, ...props }) {
+    return (_jsx(FloatingChat, { ...props, agent: useDatalayerAgent(props.app, instance) }));
+}
+/**
+ * Overlays — menus, dialogs — drawn inside the embed's own root, under the
+ * theme's element, so that they wear its theme: what the element asks for,
+ * since Primer's own portal root is in the host's `<body>`, outside the
+ * shadow root and its styles.
+ */
+function OwnPortalRoot() {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        if (ref.current) {
+            registerPortalRoot(ref.current);
+        }
+    }, []);
+    return _jsx("div", { ref: ref, className: "datalayer-app-portal" });
+}
+/** The visitor's system mode, followed while it changes. */
+function useSystemMode() {
+    const query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia('(prefers-color-scheme: dark)')
+        : null;
+    const [dark, setDark] = useState(Boolean(query?.matches));
+    useEffect(() => {
+        if (!query) {
+            return undefined;
+        }
+        const follow = () => setDark(query.matches);
+        query.addEventListener?.('change', follow);
+        return () => query.removeEventListener?.('change', follow);
+    }, [query]);
+    return dark ? 'dark' : 'light';
+}
+/** The `loop` theme, with the application's (or the host's) accent and face. */
+export function EmbedThemed({ accent, colorMode, font, children, style, }) {
+    const themeStyles = useMemo(() => embedThemeStyles({ accent, font }), [accent, font]);
+    return (
+    /*
+     * Marked as themed above the provider, so that the provider counts
+     * itself nested and leaves the host's <body> and Primer's portal root
+     * alone: it would otherwise write the theme's tokens, colour and face on
+     * the host's page (T-13). A wrapper of no box.
+     */
+    _jsx("div", { "data-color-mode": colorMode, style: { display: 'contents' }, children: _jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: loopTheme, themeStyles: themeStyles, baseStyles: style, children: children }) }));
+}
+export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUrl, instance, height = 640, ownPortal = false, }) {
+    const system = useSystemMode();
+    const resolvedMode = colorMode === 'auto' ? system : colorMode;
+    const shownAs = mode ?? app.deployment.embedded?.mode ?? 'inline';
+    const view = floatingViewOf(shownAs);
+    return (_jsxs(EmbedThemed, { accent: accent ?? app.interface.accent, colorMode: resolvedMode, font: font, style: view
+            ? // Floating: nothing in the page's flow, nothing painted behind.
+                { backgroundColor: 'transparent' }
+            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view && serverUrl ? (_jsx(ServerFloating, { app: app, view: view, serverUrl: serverUrl, colorMode: resolvedMode })) : view ? (_jsx(DatalayerFloating, { app: app, view: view, instance: instance, colorMode: resolvedMode })) : (_jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), instance: instance }))] }));
+}
+export default AppEmbed;

package/lib/loop/embed/datalayer-app.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/loop/embed/datalayer-app.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The one script a host loads (LOOP D-08): it defines `<datalayer-app>` and
+ * nothing else. Built on its own by `npm run build:embed`
+ * (`vite.embed.config.ts`) into `dist-embed/datalayer-app.js`, with the
+ * stylesheet the element links into its shadow root beside it
+ * (`dist-embed/datalayer-app.css`); served from a Datalayer origin at
+ * `/embed/`.
+ *
+ * @module loop/embed/datalayer-app
+ */
+import { defineDatalayerAppElement } from './element';
+defineDatalayerAppElement();

package/lib/loop/embed/element.d.ts

@@ -0,0 +1,57 @@
+import type { AppSpec } from '../../types/agentspecs';
+import { type ParsedAppspec } from '../apps/appspec';
+/** What the framed run page and the element say to each other. */
+export declare const EMBED_MESSAGES: {
+    readonly size: "datalayer-app:size";
+    readonly decision: "datalayer-app:decision";
+    /** To the frame: an embed token, the first or a new one. */
+    readonly token: "datalayer-app:token";
+    /** From the frame: the token lapsed; a new one is needed. */
+    readonly tokenExpired: "datalayer-app:token-expired";
+};
+/** Where an application comes from, once read. */
+export type EmbedSource = {
+    kind: 'spec';
+    app: AppSpec;
+} | {
+    kind: 'frame';
+    src: string;
+} | {
+    kind: 'said';
+    text: string;
+    expired?: boolean;
+};
+/** An Appspec from its text, YAML or JSON; refused in a sentence when it is neither. */
+export declare function appspecOfText(text: string): AppSpec;
+/**
+ * An application the embed can run, or a sentence saying why not: one with
+ * an id, and an agent to answer — what the spec tolerates in a draft, an
+ * embed cannot run.
+ */
+export declare function runnable({ app, problems }: ParsedAppspec): AppSpec;
+/** The run page an application on Datalayer is framed from. */
+export declare function frameSrcOf(origin: string, app: string, token?: string): string;
+/**
+ * An application on Datalayer, read with its embed token: what the space
+ * keeps of it (`model_s`, the stored definition), whose `spec` is the
+ * Appspec. A decision is framed; so is an application that has no spec.
+ */
+export declare function readEmbeddedApp({ api, origin, app, token, fetcher, }: {
+    api: string;
+    origin: string;
+    app: string;
+    token: string;
+    fetcher?: typeof fetch;
+}): Promise<EmbedSource>;
+export type DatalayerAppElementOptions = {
+    /** The element's name; `datalayer-app` by default. */
+    tag?: string;
+    /** Where the script was loaded from: the default origin, and where its stylesheet is. */
+    scriptUrl?: string;
+};
+/**
+ * Define the element, once. Returns its class, or `undefined` where there is
+ * no `customElements` (a server render) — a second call returns the class
+ * already defined.
+ */
+export declare function defineDatalayerAppElement(options?: DatalayerAppElementOptions): CustomElementConstructor | undefined;

package/lib/loop/embed/element.js

@@ -0,0 +1,405 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `<datalayer-app>`: an application in another product's page, as one
+ * script tag and one element (LOOP D-08), in the mode its Appspec says
+ * (D-07), its theme isolated from the host's and overridable in the three
+ * ways that matter (T-13, D-11).
+ *
+ *   <script src="https://datalayer.app/embed/datalayer-app.js" async></script>
+ *   <datalayer-app app="01M…" origin="https://datalayer.app"></datalayer-app>
+ *
+ * What it shows comes from one of three places, first found first:
+ *
+ * 1. an Appspec written in the element, as YAML or JSON
+ *    (`<script type="application/yaml">…</script>`);
+ * 2. an Appspec at an address (`spec="https://…/support-desk.yaml"`);
+ * 3. an application on Datalayer (`app`), read with its embed token
+ *    (`token`). A decision, or an application given without a token, is
+ *    framed as before: Datalayer's run page in an iframe, sized to it, its
+ *    `decision` and `token-expired` events raised on the element.
+ *
+ * Every other application is drawn here, in the element's shadow root, by
+ * `AppEmbed` — inline, or floating over the page as a bubble, a panel or the
+ * assistant. The bundle's stylesheet is linked inside that root, the
+ * styled-components rules are written into it, and Primer's overlays are
+ * drawn in it, so nothing of the application's styles reaches the page and
+ * nothing of the page's reaches the application.
+ *
+ * @module loop/embed/element
+ */
+import { createRoot } from 'react-dom/client';
+import { StyleSheetManager } from 'styled-components';
+import { loopThemeStyles } from '@datalayer/primer-addons';
+import { coreStore } from '@datalayer/core/lib/state/substates/CoreState';
+import { parseAppspec } from '../apps/appspec';
+import { readAppspecYaml } from '../apps/yaml';
+import { AppEmbed } from './AppEmbed';
+import { EMBED_HOST_VARIABLES, EMBED_OBSERVED_ATTRIBUTES, EMBED_TAG, EmbedAttributeError, embedLookOf, inlineHeightOf, } from './embedConfig';
+import { embedShadowCss } from './embedTheme';
+/** What the framed run page and the element say to each other. */
+export const EMBED_MESSAGES = {
+    size: 'datalayer-app:size',
+    decision: 'datalayer-app:decision',
+    /** To the frame: an embed token, the first or a new one. */
+    token: 'datalayer-app:token',
+    /** From the frame: the token lapsed; a new one is needed. */
+    tokenExpired: 'datalayer-app:token-expired',
+};
+/** An Appspec from its text, YAML or JSON; refused in a sentence when it is neither. */
+export function appspecOfText(text) {
+    // Written in a page, a document is indented with its markup: the
+    // indentation every line shares is the page's, not the document's.
+    const lines = text.replace(/\t/g, '  ').split('\n');
+    const indent = Math.min(...lines
+        .filter(line => line.trim())
+        .map(line => line.length - line.trimStart().length));
+    const trimmed = lines
+        .map(line => line.slice(Number.isFinite(indent) ? indent : 0))
+        .join('\n')
+        .trim();
+    if (!trimmed) {
+        throw new EmbedAttributeError('datalayer-app: the Appspec is empty.');
+    }
+    let parsed;
+    if (trimmed.startsWith('{')) {
+        let document;
+        try {
+            document = JSON.parse(trimmed);
+        }
+        catch (error) {
+            throw new EmbedAttributeError(`datalayer-app: the Appspec is not JSON (${error.message}).`);
+        }
+        parsed = parseAppspec(document);
+    }
+    else {
+        parsed = readAppspecYaml(trimmed);
+    }
+    return runnable(parsed);
+}
+/**
+ * An application the embed can run, or a sentence saying why not: one with
+ * an id, and an agent to answer — what the spec tolerates in a draft, an
+ * embed cannot run.
+ */
+export function runnable({ app, problems }) {
+    if (!app.id) {
+        throw new EmbedAttributeError(`datalayer-app: the Appspec names no application${problems.length ? ` (${problems[0]})` : ''}.`);
+    }
+    if (app.kind !== 'decision' && !app.agent) {
+        throw new EmbedAttributeError(`datalayer-app: “${app.name || app.id}” names no agent to answer; an embedded application is run by an agent (a team is not supported yet).`);
+    }
+    return app;
+}
+/** The run page an application on Datalayer is framed from. */
+export function frameSrcOf(origin, app, token = '') {
+    // The token in the fragment, which no server is sent: it reaches the page
+    // and no access log.
+    return `${origin.replace(/\/+$/, '')}/public/apps/${encodeURIComponent(app)}/run?embed=1${token ? `#token=${encodeURIComponent(token)}` : ''}`;
+}
+/**
+ * An application on Datalayer, read with its embed token: what the space
+ * keeps of it (`model_s`, the stored definition), whose `spec` is the
+ * Appspec. A decision is framed; so is an application that has no spec.
+ */
+export async function readEmbeddedApp({ api, origin, app, token, fetcher = fetch, }) {
+    const response = await fetcher(`${api.replace(/\/+$/, '')}/api/spacer/v1/apps/${encodeURIComponent(app)}/embedded`, { headers: { Authorization: `Bearer ${token}` } });
+    if (response.status === 401) {
+        return {
+            kind: 'said',
+            text: 'datalayer-app: the embed token expired or is not for this application.',
+            expired: true,
+        };
+    }
+    if (!response.ok) {
+        return {
+            kind: 'said',
+            text: `datalayer-app: the application could not be read (${response.status}).`,
+        };
+    }
+    const body = (await response.json());
+    let definition;
+    try {
+        definition = JSON.parse(String(body.app?.model_s ?? '{}'));
+    }
+    catch {
+        definition = {};
+    }
+    if (!definition.spec) {
+        return { kind: 'frame', src: frameSrcOf(origin, app, token) };
+    }
+    const spec = runnable(parseAppspec(definition.spec));
+    return spec.kind === 'decision'
+        ? { kind: 'frame', src: frameSrcOf(origin, app, token) }
+        : { kind: 'spec', app: spec };
+}
+/** The script that is running, when it is a script tag. */
+function currentScriptUrl() {
+    try {
+        const script = document.currentScript;
+        return script?.src ? new URL(script.src, location.href).href : '';
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Define the element, once. Returns its class, or `undefined` where there is
+ * no `customElements` (a server render) — a second call returns the class
+ * already defined.
+ */
+export function defineDatalayerAppElement(options = {}) {
+    if (typeof window === 'undefined' || !('customElements' in window)) {
+        return undefined;
+    }
+    const tag = options.tag ?? EMBED_TAG;
+    const existing = customElements.get(tag);
+    if (existing) {
+        return existing;
+    }
+    const scriptUrl = options.scriptUrl ?? currentScriptUrl();
+    const scriptOrigin = scriptUrl ? new URL(scriptUrl).origin : '';
+    // The bundle's stylesheet, beside its script.
+    const stylesheetUrl = scriptUrl
+        ? scriptUrl.replace(/\.js(\?.*)?$/, '.css')
+        : '';
+    class DatalayerAppElement extends HTMLElement {
+        static get observedAttributes() {
+            return EMBED_OBSERVED_ATTRIBUTES;
+        }
+        root = null;
+        frame = null;
+        source = null;
+        loading = 0;
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+            this.onMessage = this.onMessage.bind(this);
+        }
+        /** An embed token, the attribute's. Set it to hand a new one over. */
+        get token() {
+            return this.getAttribute('token') ?? '';
+        }
+        set token(value) {
+            if (value) {
+                this.setAttribute('token', String(value));
+            }
+            else {
+                this.removeAttribute('token');
+            }
+        }
+        connectedCallback() {
+            window.addEventListener('message', this.onMessage);
+            void this.load();
+        }
+        disconnectedCallback() {
+            window.removeEventListener('message', this.onMessage);
+            this.unmount();
+        }
+        attributeChangedCallback(name, before, after) {
+            if (!this.isConnected || before === after) {
+                return;
+            }
+            // A new token is handed to the framed page that is already there,
+            // which keeps what the person entered.
+            if (name === 'token' && this.frame?.contentWindow && after) {
+                this.frame.contentWindow.postMessage({ type: EMBED_MESSAGES.token, token: after }, this.origin());
+                return;
+            }
+            // How it looks is drawn again; what it is, read again.
+            if (['mode', 'accent', 'theme', 'font', 'height'].includes(name)) {
+                this.draw();
+                return;
+            }
+            void this.load();
+        }
+        origin() {
+            return (this.getAttribute('origin') ||
+                scriptOrigin ||
+                location.origin).replace(/\/+$/, '');
+        }
+        inputs() {
+            const attributes = {};
+            for (const name of EMBED_OBSERVED_ATTRIBUTES) {
+                attributes[name] = this.getAttribute(name);
+            }
+            const computed = getComputedStyle(this);
+            const variables = {};
+            for (const [key, property] of Object.entries(EMBED_HOST_VARIABLES)) {
+                const value = computed.getPropertyValue(property).trim();
+                if (value) {
+                    variables[key] = value.replace(/^["']|["']$/g, '');
+                }
+            }
+            return { attributes, variables };
+        }
+        /** Where the application comes from: the element's own Appspec, an address, or Datalayer. */
+        async read() {
+            const inline = this.querySelector('script[type="application/yaml"], script[type="application/json"], script[type="text/yaml"]');
+            if (inline?.textContent?.trim()) {
+                return { kind: 'spec', app: appspecOfText(inline.textContent) };
+            }
+            const spec = this.getAttribute('spec');
+            if (spec) {
+                const response = await fetch(new URL(spec, location.href).href);
+                if (!response.ok) {
+                    return {
+                        kind: 'said',
+                        text: `datalayer-app: the Appspec at ${spec} could not be read (${response.status}).`,
+                    };
+                }
+                return { kind: 'spec', app: appspecOfText(await response.text()) };
+            }
+            const app = this.getAttribute('app');
+            if (!app) {
+                return {
+                    kind: 'said',
+                    text: 'datalayer-app: the "app" attribute names the application to show, or "spec" the address of its Appspec.',
+                };
+            }
+            const token = this.token;
+            if (!token) {
+                // A public application: Datalayer's run page, framed.
+                return { kind: 'frame', src: frameSrcOf(this.origin(), app) };
+            }
+            return readEmbeddedApp({
+                api: this.getAttribute('api') ||
+                    coreStore.getState().configuration?.spacerUrl ||
+                    'https://prod1.datalayer.run',
+                origin: this.origin(),
+                app,
+                token,
+            });
+        }
+        async load() {
+            const turn = ++this.loading;
+            let source;
+            try {
+                source = await this.read();
+            }
+            catch (error) {
+                source = {
+                    kind: 'said',
+                    text: error instanceof Error
+                        ? error.message
+                        : `datalayer-app: ${String(error)}`,
+                };
+            }
+            // A later read wins over an earlier one still in flight.
+            if (turn !== this.loading || !this.isConnected) {
+                return;
+            }
+            this.source = source;
+            this.draw();
+            if (source.kind === 'said' && source.expired) {
+                this.dispatchEvent(new CustomEvent('token-expired', {
+                    detail: { app: this.getAttribute('app') ?? '' },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        unmount() {
+            this.root?.unmount();
+            this.root = null;
+            this.frame = null;
+        }
+        /** The shadow root's skeleton: the bundle's stylesheet, the element's own, and what goes in it. */
+        skeleton(themeCss) {
+            const shadow = this.shadowRoot;
+            this.unmount();
+            shadow.replaceChildren();
+            if (stylesheetUrl) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = stylesheetUrl;
+                shadow.appendChild(link);
+            }
+            const style = document.createElement('style');
+            style.textContent = embedShadowCss(themeCss);
+            shadow.appendChild(style);
+            return shadow;
+        }
+        say(text) {
+            this.setAttribute('data-embed-mode', 'inline');
+            const shadow = this.skeleton();
+            const note = document.createElement('p');
+            note.className = 'datalayer-app-said';
+            note.setAttribute('role', 'status');
+            note.textContent = text;
+            shadow.appendChild(note);
+        }
+        draw() {
+            const source = this.source;
+            if (!source) {
+                return;
+            }
+            if (source.kind === 'said') {
+                this.say(source.text);
+                return;
+            }
+            if (source.kind === 'frame') {
+                this.setAttribute('data-embed-mode', 'inline');
+                const shadow = this.skeleton();
+                const frame = document.createElement('iframe');
+                frame.className = 'datalayer-app-frame';
+                frame.src = source.src;
+                frame.title = 'Datalayer app';
+                frame.style.height = `${inlineHeightOf(this.getAttribute('height'))}px`;
+                frame.setAttribute('allow', 'clipboard-write');
+                shadow.appendChild(frame);
+                this.frame = frame;
+                return;
+            }
+            let look;
+            try {
+                look = embedLookOf(this.inputs(), source.app);
+            }
+            catch (error) {
+                this.say(error.message);
+                return;
+            }
+            this.setAttribute('data-embed-mode', look.mode);
+            const shadow = this.skeleton(loopThemeStyles.css);
+            const mount = document.createElement('div');
+            mount.className = 'datalayer-app-root';
+            shadow.appendChild(mount);
+            this.root = createRoot(mount);
+            const server = this.getAttribute('server') || undefined;
+            this.root.render(_jsx(StyleSheetManager, { target: shadow, children: _jsx(AppEmbed, { app: source.app, mode: look.mode, accent: look.accent, colorMode: look.colorMode, font: look.font, serverUrl: server, height: inlineHeightOf(this.getAttribute('height')), ownPortal: true }) }));
+        }
+        onMessage(event) {
+            if (!this.frame || event.source !== this.frame.contentWindow) {
+                return;
+            }
+            if (event.origin !== this.origin()) {
+                return;
+            }
+            const data = (event.data ?? {});
+            if (data.type === EMBED_MESSAGES.size &&
+                typeof data.height === 'number' &&
+                data.height > 0) {
+                this.frame.style.height = `${Math.ceil(data.height)}px`;
+            }
+            else if (data.type === EMBED_MESSAGES.decision) {
+                this.dispatchEvent(new CustomEvent('decision', {
+                    detail: data.record,
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            else if (data.type === EMBED_MESSAGES.tokenExpired) {
+                this.dispatchEvent(new CustomEvent('token-expired', {
+                    detail: { app: this.getAttribute('app') ?? '' },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+    }
+    customElements.define(tag, DatalayerAppElement);
+    return DatalayerAppElement;
+}