@web-applets/sdk 0.0.8 → 0.1.0

package/README.md

@@ -1,93 +1,97 @@
 # Web Applets
 
-> An open SDK to create interoperable actions & views for agents – _a web of capabilities!_
+> An open spec & SDK for creating apps that agents can use.
 
-🔗 [Community Applets Repo](https://github.com/unternet-co/community-applets) | 🔗 [Community Mailing List](https://groups.google.com/a/unternet.co/g/community)
+🔗 [Applets Repo](https://github.com/unternet-co/community-applets) | 🔗 [Mailing List](https://groups.google.com/a/unternet.co/g/community) | 🔗 [Applets Chat Demo](https://github.com/unternet-co/applets-chat)
 
 ## What is it?
 
-Web Applets is a specification for modular, local web software that can be read and used by both humans and machines. Web Applets aims to be an interoperabe application layer for agents – instead of chatbots that can only interact in plain text, Web Applets allow them to actuate real software, read the results, and render rich, graphical views in response.
+Web Applets is an open specification for building software that both humans and AI can understand and use together. Instead of forcing AI to operate traditional point-and-click apps built for humans, Web Applets creates a new kind of software designed for human-AI collaboration. Think of them a bit like artifacts, but they do stuff!
 
-In short, your model can use & respond with artibrary bits of web UI that a human can then interact with – a map, a rich text document, an item on Amazon with a purchase button, whatever you can build with the web you can turn it into an applet that an agent can use and display.
+![Demo of a web applets chatbot](./docs/assets/applets-chat-demo.gif)
 
-Did we mention it's _interoperable_? We think the future of software should be open & collaborative, not locked down to a single platform.
+Web Applets are modular pieces of web software that:
 
-For more, see [why](./docs/why.md).
+- **Can be used directly by humans with rich, graphical interfaces**
+- **Can be understood and operated by AI through a clear protocol**
+- **Run locally in your environment, not on distant servers**
+- **Share context and state with their environment**
+- **Can be freely combined and composed**
 
-## Getting started
-
-Install the applets SDK & CLI:
-
-```bash
-npm i --save @web-applets/sdk
-npm i --save-dev @web-applets/cli
-```
+Think of any web software you use today - maps, documents, shopping, calendars - and imagine if instead of visiting these as separate websites, you could pull them into your own environment where both you and AI could use them together seamlessly.
 
-Then, initialize the `applets.config.json` and create a new blank applet:
+## Key Features
 
-```bash
-npx applets init
-npx applets create <your-applet-name>
-```
-
-This creates an applet folder, with a build system built-in using Vite. You can change this to anything you want. We recommend building at this stage, as the SDK currently needs to be bundled. We're working on adding a statically hosted script to import.
+- **Built on Web Standards:** Create applets using familiar web technologies (HTML, CSS, JavaScript)
+- **AI-Native Protocol:** Applets expose their state and actions in a way AI can understand and use
+- **Rich Interfaces:** Full support for complex graphical UIs, not just text
+- **Local-First:** Runs in your environment, keeping your data under your control
+- **Composable:** Applets can work together, sharing context and state
+- **Open Standard:** Designed for interoperability, not platform lock-in
 
-Inside your applet folder, you'll find a basic web app setup:
+Web Applets aims to do for AI-enabled software what the web did for documents - create an open platform where anyone can build, share, and connect applications. We believe the future of software should be built on open collaboration, not tight integration with closed platforms.
 
-- `public/manifest.json`: This file describes the Applet, and tells the model what actions are available and what parameters each action takes
-- `index.html`: Much like a website, this holds the main page for your applet
-- `src/main.ts`: Declares functions that respond to each action, and a render function that updates the view based on state
+## Example
 
-> Want to use React? Svelte? Vue? – No problem, just install the dependencies and create an app the way you normally would in a website. So long as you're receiving the action events, it will all just work.
+Let's say we have a simple website that says hello. It might look something like this:
 
-Let's say we want our applet to respond to a "set_name" action and render the user's name. In our `manifest.json` file we can write:
+`index.html`:
 
-```js
-{
-  // ...
-  "actions": [
-    {
-      "id": "set_name",
-      "description": "Sets the name of the user to be greeted",
-      "params": {
-        "name": {
-          "type": "string",
-          "description": "The name of the user"
-        }
-      }
-    }
-  ]
-}
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <script src="./main.js" type="module"></script>
+  <body>
+    Hello! <span id="name">whoever you are</span>.
+  </body>
+</html>
 ```
 
-Now let's update `src/main.ts` to assign an action handler:
+Let's add some Web Applets functionality, so this can respond to a `set_name` message:
+
+`main.js`:
 
 ```js
-// First, import the SDK
-import { appletContext } from '../../sdk/src';
+import { applets } from '@web-applets/sdk';
 
-// Now connect to the applet runtime
-const applet = appletContext.connect();
+const context = applets.getContext();
 
-// Attach the action handler, and update the state
-applet.setActionHandler('set_name', ({ name }) => {
-  applet.setState({ name });
+// Define a 'set_name' action, and make it update the shared data object with the new name
+context.defineAction('set_name', {
+  params: {
+    name: {
+      type: string,
+      description: 'The name of the person to be greeted.',
+    },
+  },
+  handler: ({ name }) => applet.data = { name };
 });
+
+// Whenever the data is updated, update the view
+context.ondata = () => {
+  document.getElementById('name').innerText = applet.data.name;
+};
 ```
 
-When this state updates, it will inform the client which can then store the state somewhere, for example in a database so the applet will persist between uses.
+Done! If you load this up in the inspector and introduce yourself, it will respond by greeting you.
 
-Finally, we need to render the applet whenever a render signal is received. Again in `main.ts`:
+## Getting started
 
-```js
-// ...
+Create a new web app with the applets SDK installed. You can do this quickly using our CLI:
 
-applet.onrender = () => {
-  document.body.innerText = `Hello, ${applet.state.name}!`;
-};
+```bash
+npx @web-applets/create
 ```
 
-Now if you run `npx applets playground`, you should be able to test out your new applet action directly. This applet will now work in any environment where the SDK is installed.
+Inside the generated folder, you'll find a basic web app setup:
+
+- `public/manifest.json`: A web app manifest, useful when publishing your applet, adding icons, etc.
+- `index.html`: Much like a website, this holds the main page for your applet
+- `src/main.ts`: Declares functions that respond to each action, and a render function that updates the view based on state
+
+> Want to use React? Svelte? Vue? – No problem, just install the dependencies and create an app the way you normally would in a website. So long as you're receiving the action events, it will all just work.
+
+Now if you run `npx @web-applets/inspector`, you should be able to test out your new applet directly. This applet will now work in any environment where the SDK is installed.
 
 ![A screenshot showing the 'playground' editing UI, with a web applets showing 'Hello, Web Applets'](docs/assets/web-applets-playground.png)
 
@@ -95,16 +99,12 @@ Now if you run `npx applets playground`, you should be able to test out your new
 
 Using Web Applets is just as easy as creating them!
 
-First, build your applets. By default, this goes into a folder called `dist/`, but you'll likely want to change this in `applets.config.json` to point to wherever you're serving public files from. For example, in a Vite project, edit this to be `./public`.
-
-Then, run:
+Install & import the applets client in your app:
 
 ```bash
-npx applets build
+npm install @web-applets/sdk
 ```
 
-Now in your main app, you can import the applets client:
-
 ```js
 import { applets } from '@web-applets/sdk';
 ```
@@ -112,8 +112,8 @@ import { applets } from '@web-applets/sdk';
 Now you can import your applets from wherever they're being served from (note – you can also host them anywhere on the web):
 
 ```js
-const applet = await applets.load('/helloworld.applet'); // replace with a URL if hosted remotely
-applet.onstateupdated = (state) => console.log(state);
+const applet = await applets.load('/helloworld.applet'); // replace with an https URL if hosted remotely
+applet.ondata = (e) => console.log(e.data);
 applet.dispatchAction('set_name', { name: 'Web Applets' });
 ```
 
@@ -125,43 +125,13 @@ document.body.appendChild(container);
 const applet = await applets.load(`/helloworld.applet`, container);
 ```
 
-To load pre-existing saved state into an applet, simply set the state property:
+To load pre-existing saved data into an applet, simply set the data property:
 
 ```js
-applet.state = { name: 'Ada Lovelace' };
+applet.data = { name: 'Ada Lovelace' };
 // console.log: { name: "Ada Lovelace" }
 ```
 
-It may also be helpful to check available applets at a domain, or in your public folder. For that you can extract the applet headers from the App Manifest at the public root (`/manifest.json`), and see the available applets and a shorthand for the actions you can take in them. This is automatically created when you build your applets.
-
-```js
-const headers = await applets.getHeaders('/');
-```
-
-This headers object looks like:
-
-```js
-[
-  {
-    name: 'Hello World',
-    description: 'Displays a greeting to the user.',
-    url: '/applets/helloworld.applet',
-    actions: [
-      {
-        id: 'set_name',
-        description: 'Sets the name of the user to be greeted',
-        params: {
-          name: 'The name of the user',
-        },
-      },
-    ],
-  },
-  // ...
-];
-```
-
-You can use it to present a quick summary of available tools to your model, and then decide on an applet and action to use.
-
 ## Feedback & Community
 
 This is a community project, and we're open to community members discussing the project direction, and submitting code!

package/dist/components/applet-frame.d.ts

@@ -0,0 +1,19 @@
+import { Applet } from '../index';
+export declare class AppletFrame extends HTMLElement {
+    #private;
+    container?: HTMLIFrameElement;
+    applet?: Applet;
+    loaded?: boolean;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    set src(value: string);
+    get src(): string;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    loadApplet(url: string): Promise<void>;
+    set data(data: any);
+    resizeContainer(dimensions: {
+        height: number;
+        width: number;
+    }): void;
+    get styles(): string;
+}

package/dist/components/applet-frame.js

@@ -0,0 +1,93 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _AppletFrame_root, _AppletFrame_src;
+import { applets, } from '../index';
+// TODO: Add resize event handler, and resize DOM element
+export class AppletFrame extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AppletFrame_root.set(this, void 0);
+        _AppletFrame_src.set(this, void 0);
+    }
+    connectedCallback() {
+        __classPrivateFieldSet(this, _AppletFrame_root, this.attachShadow({ mode: 'open' }), "f");
+        this.container = document.createElement('iframe');
+        __classPrivateFieldGet(this, _AppletFrame_root, "f").appendChild(this.container);
+        const styles = document.createElement('style');
+        styles.textContent = this.styles;
+        __classPrivateFieldGet(this, _AppletFrame_root, "f").appendChild(styles);
+        const url = this.getAttribute('src');
+        if (url)
+            this.loadApplet(url);
+    }
+    set src(value) {
+        __classPrivateFieldSet(this, _AppletFrame_src, value, "f");
+        this.loadApplet(value);
+    }
+    get src() {
+        return __classPrivateFieldGet(this, _AppletFrame_src, "f");
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'src') {
+            this.src = newValue;
+        }
+    }
+    async loadApplet(url) {
+        if (!this.container)
+            return;
+        this.applet = await applets.load(url, this.container);
+        // When data received, bubble the event up
+        this.applet.ondata = (dataEvent) => {
+            this.dispatchEvent(dataEvent);
+        };
+        // Resize
+        this.applet.onresize = (resizeEvent) => {
+            this.resizeContainer(resizeEvent.dimensions);
+        };
+        this.applet.onactions = (e) => { };
+        // Emit a load event when loading complete
+        this.dispatchEvent(new Event('load'));
+        this.loaded = true;
+    }
+    set data(data) {
+        if (this.applet && this.loaded) {
+            this.applet.data = data;
+        }
+        else {
+            const loadListener = () => {
+                this.applet.data = data;
+                this.removeEventListener('load', loadListener);
+            };
+            this.addEventListener('load', loadListener);
+        }
+    }
+    resizeContainer(dimensions) {
+        this.container.style.height = `${dimensions.height + 2}px`;
+    }
+    get styles() {
+        return /*css*/ `
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      iframe {
+        border: none;
+        height: 100%;
+        width: 100%;
+      }
+    `;
+    }
+}
+_AppletFrame_root = new WeakMap(), _AppletFrame_src = new WeakMap();
+AppletFrame.observedAttributes = ['src'];
+customElements.define('applet-frame', AppletFrame);

package/dist/core/applet.d.ts

@@ -0,0 +1,21 @@
+import { AppletAction, AppletMessage, ActionParams, AppletManifest, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay, AppletReadyEvent } from './shared';
+export declare function load(url: string, container?: HTMLIFrameElement): Promise<Applet>;
+export interface AppletOptions {
+    manifest: AppletManifest;
+    container: HTMLIFrameElement;
+}
+export declare class Applet<T = any> extends EventTarget {
+    #private;
+    messageRelay: AppletMessageRelay;
+    actions: AppletAction[];
+    container: HTMLIFrameElement;
+    constructor(manifest: AppletManifest, targetWindow: Window);
+    dispatchAction(actionId: string, params?: ActionParams): Promise<AppletMessage>;
+    get data(): T;
+    set data(data: T);
+    get manifest(): AppletManifest;
+    onready(event: AppletReadyEvent): void;
+    onresize(event: AppletResizeEvent): void;
+    onactions(event: AppletActionsEvent): void;
+    ondata(event: AppletDataEvent): void;
+}

package/dist/core/applet.js

@@ -0,0 +1,117 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Applet_instances, _Applet_manifest, _Applet_data, _Applet_addListeners;
+import { parseUrl } from '../utils';
+import { AppletDataMessage, AppletInitMessage, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay, loadManifest, AppletReadyEvent, AppletActionMessage, } from './shared';
+// Container for initializing applets without an explicit container
+const hiddenContainer = document.createElement('iframe');
+hiddenContainer.style.display = 'none';
+document.body.appendChild(hiddenContainer);
+// Options for loading an applet
+// interface LoadOpts {
+//   unsafe?: boolean;
+// }
+// const defaultOpts: LoadOpts = {
+//   unsafe: false,
+// };
+// Load an applet object from a URL
+export async function load(url, container
+// opts?: LoadOpts
+) {
+    if (!container)
+        container = hiddenContainer;
+    url = parseUrl(url);
+    const manifest = await loadManifest(url);
+    // If unsafe enabled, allow same origin sandbox
+    // This is required for e.g. YouTube embeds
+    //   const _opts = Object.assign(defaultOpts, opts ?? {});
+    // if (_opts.unsafe && manifest.unsafe) {
+    //   container.setAttribute(
+    //     'sandbox',
+    //     'allow-scripts allow-forms allow-same-origin'
+    //   );
+    // } else {
+    //   container.setAttribute('sandbox', 'allow-scripts allow-forms');
+    // }
+    container.setAttribute('sandbox', 'allow-scripts allow-forms');
+    container.src = url;
+    const applet = new Applet(manifest, container.contentWindow);
+    return new Promise((resolve) => {
+        applet.onready = () => resolve(applet);
+    });
+}
+export class Applet extends EventTarget {
+    constructor(manifest, targetWindow) {
+        super();
+        _Applet_instances.add(this);
+        this.actions = [];
+        _Applet_manifest.set(this, void 0);
+        _Applet_data.set(this, void 0);
+        this.messageRelay = new AppletMessageRelay(targetWindow);
+        __classPrivateFieldSet(this, _Applet_manifest, manifest, "f");
+        __classPrivateFieldGet(this, _Applet_instances, "m", _Applet_addListeners).call(this);
+        this.messageRelay.on('ready', () => {
+            this.messageRelay.send(new AppletInitMessage());
+        });
+    }
+    async dispatchAction(actionId, params) {
+        const actionMessage = new AppletActionMessage({
+            actionId,
+            params,
+        });
+        return await this.messageRelay.send(actionMessage);
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _Applet_data, "f");
+    }
+    set data(data) {
+        __classPrivateFieldSet(this, _Applet_data, data, "f");
+        this.messageRelay.send(new AppletDataMessage({ data }));
+    }
+    get manifest() {
+        return __classPrivateFieldGet(this, _Applet_manifest, "f");
+    }
+    onready(event) { }
+    onresize(event) { }
+    onactions(event) { }
+    ondata(event) { }
+}
+_Applet_manifest = new WeakMap(), _Applet_data = new WeakMap(), _Applet_instances = new WeakSet(), _Applet_addListeners = function _Applet_addListeners() {
+    this.messageRelay.on('ready', (message) => {
+        const readyEvent = new AppletReadyEvent();
+        if (typeof this.onready === 'function')
+            this.onready(readyEvent);
+        this.dispatchEvent(readyEvent);
+    });
+    this.messageRelay.on('data', (message) => {
+        __classPrivateFieldSet(this, _Applet_data, message.data, "f");
+        const dataEvent = new AppletDataEvent({ data: message.data });
+        if (typeof this.ondata === 'function')
+            this.ondata(dataEvent);
+        this.dispatchEvent(dataEvent);
+    });
+    this.messageRelay.on('resize', (message) => {
+        const resizeEvent = new AppletResizeEvent({
+            dimensions: message.dimensions,
+        });
+        if (typeof this.onresize === 'function')
+            this.onresize(resizeEvent);
+        this.dispatchEvent(resizeEvent);
+    });
+    this.messageRelay.on('actions', (message) => {
+        this.actions = message.actions;
+        const actionsEvent = new AppletActionsEvent({ actions: message.actions });
+        if (typeof this.onactions === 'function')
+            this.onactions(actionsEvent);
+        this.dispatchEvent(actionsEvent);
+    });
+};

package/dist/core/context.d.ts

@@ -0,0 +1,32 @@
+import { ActionParams, AppletDataEvent, AppletLoadEvent, AppletReadyEvent, JSONSchemaProperties, AppletManifest, AppletAction, AppletMessageRelay } from './shared';
+export type ActionHandler<T extends ActionParams> = (params: T) => void | Promise<void>;
+export type ActionHandlerDict = {
+    [key: string]: ActionHandler<any>;
+};
+export declare class AppletContext extends EventTarget {
+    #private;
+    messageRelay: AppletMessageRelay;
+    actionHandlers: ActionHandlerDict;
+    manifest: AppletManifest;
+    constructor();
+    connect(): void;
+    initialize(): Promise<void>;
+    createResizeObserver(): void;
+    attachListeners(): void;
+    setActionHandler<T = ActionParams>(actionId: string, handler: ActionHandler<T>): void;
+    defineAction<T = ActionParams>(actionId: string, definition: ActionDefinition<T>): void;
+    set actions(actions: AppletAction[]);
+    get actions(): AppletAction[];
+    set data(data: any);
+    get data(): any;
+    setData(data: any): Promise<void>;
+    onload(event: AppletLoadEvent): Promise<void> | void;
+    onready(event: AppletReadyEvent): void;
+    ondata(event: AppletDataEvent): void;
+}
+interface ActionDefinition<T> extends Omit<AppletAction, 'id'> {
+    params?: JSONSchemaProperties;
+    handler?: ActionHandler<T>;
+}
+export declare function getContext(): AppletContext;
+export {};

package/dist/core/context.js

@@ -0,0 +1,138 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AppletContext_actions, _AppletContext_data;
+import { AppletMessage, AppletDataEvent, AppletLoadEvent, AppletReadyEvent, AppletActionsMessage, AppletReadyMessage, AppletMessageRelay, } from './shared';
+export class AppletContext extends EventTarget {
+    constructor() {
+        super();
+        this.actionHandlers = {};
+        _AppletContext_actions.set(this, {});
+        _AppletContext_data.set(this, void 0);
+        this.connect();
+    }
+    connect() {
+        this.messageRelay = new AppletMessageRelay(window.parent);
+        // When document loads/if it's loaded, call the initialize function
+        if (document.readyState === 'complete' ||
+            document.readyState === 'interactive') {
+            // Document has loaded already.
+            // Timeout added so if the caller defines the onload function, it will exist by now
+            setTimeout(this.initialize.bind(this), 1);
+        }
+        else {
+            // Document not yet loaded, we'll add an event listener to call when it does
+            window.addEventListener('DOMContentLoaded', this.initialize.bind(this));
+        }
+        this.createResizeObserver();
+        this.attachListeners();
+    }
+    async initialize() {
+        const manifestLinkElem = document.querySelector('link[rel="manifest"]');
+        if (!manifestLinkElem)
+            return;
+        try {
+            const manifestRequest = await fetch(manifestLinkElem.href);
+            const manifest = await manifestRequest.json();
+            this.manifest = manifest;
+            this.actions = manifest.actions ?? [];
+        }
+        catch (e) {
+            return;
+        }
+        // Call the onload function
+        const loadEvent = new AppletLoadEvent();
+        this.dispatchEvent(loadEvent);
+        if (typeof this.onload === 'function')
+            await this.onload(loadEvent);
+        // Tell the host we're ready
+        this.messageRelay.send(new AppletReadyMessage());
+        // Emit a local ready event
+        const readyEvent = new AppletReadyEvent();
+        this.dispatchEvent(readyEvent);
+        if (typeof this.onready === 'function')
+            this.onready(readyEvent);
+    }
+    createResizeObserver() {
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                const message = new AppletMessage('resize', {
+                    dimensions: {
+                        width: entry.contentRect.width,
+                        height: entry.contentRect.height,
+                    },
+                });
+                this.messageRelay.send(message);
+            }
+        });
+        resizeObserver.observe(document.querySelector('html'));
+    }
+    attachListeners() {
+        this.messageRelay.on('init', (message) => {
+            this.manifest = message.manifest;
+            this.actions = this.manifest?.actions || [];
+        });
+        this.messageRelay.on('data', (message) => {
+            this.setData(message.data);
+        });
+        this.messageRelay.on('action', async (message) => {
+            if (Object.keys(this.actionHandlers).includes(message.actionId)) {
+                await this.actionHandlers[message.actionId](message.params);
+            }
+        });
+    }
+    setActionHandler(actionId, handler) {
+        this.actionHandlers[actionId] = handler;
+    }
+    defineAction(actionId, definition) {
+        const { handler, ...properties } = definition;
+        this.actions = [
+            ...this.actions,
+            {
+                id: actionId,
+                ...properties,
+            },
+        ];
+        this.setActionHandler(actionId, handler);
+    }
+    set actions(actions) {
+        if (!actions)
+            return;
+        for (let action of actions) {
+            __classPrivateFieldGet(this, _AppletContext_actions, "f")[action.id] = action;
+        }
+        this.messageRelay.send(new AppletActionsMessage({ actions: this.actions }));
+    }
+    get actions() {
+        return Object.values(__classPrivateFieldGet(this, _AppletContext_actions, "f"));
+    }
+    set data(data) {
+        this.setData(data);
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _AppletContext_data, "f");
+    }
+    async setData(data) {
+        const dataMessage = new AppletMessage('data', { data });
+        await this.messageRelay.send(dataMessage);
+        __classPrivateFieldSet(this, _AppletContext_data, data, "f");
+        const dataEvent = new AppletDataEvent({ data });
+        this.dispatchEvent(dataEvent);
+        this.ondata(dataEvent);
+    }
+    onload(event) { }
+    onready(event) { }
+    ondata(event) { }
+}
+_AppletContext_actions = new WeakMap(), _AppletContext_data = new WeakMap();
+export function getContext() {
+    return new AppletContext();
+}