@stackable-labs/sdk-extension-react 1.0.0

package/LICENSE

@@ -0,0 +1,29 @@
+LICENSE
+
+Copyright (c) 2026-present UNIQUELY PARTICULAR LLC, STACKABLE LABS, LLC, agnoStack, Inc., and Adam Grohs ("Author" herein)
+
+Permission is hereby granted to use, copy, and modify this software
+(the "Software") solely for the purpose of developing, testing,
+or maintaining integration with Author's products and services.
+
+The Software may not be used:
+- as a standalone product or service,
+- to integrate with any platform or service other than Author's,
+- to build or enhance a competing product or service,
+- or for any purpose unrelated to integrations with Author.
+
+Redistribution of the Software, in whole or in part, is permitted
+only as part of an application or service that integrates with Author
+and does not expose the Software as a general-purpose library.
+
+This 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.
+
+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
+PUBLISHER, AUTHORS, ANY CONTRIBUTOR 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

@@ -0,0 +1,47 @@
+# @stackable-labs/sdk-extension-react
+
+React hooks and components for building Stackable extensions.
+
+## Installation
+
+```bash
+npm install @stackable-labs/sdk-extension-react
+```
+
+## Peer dependencies
+
+```
+react >= 18.0.0 < 19.0.0
+react-dom >= 18.0.0 < 19.0.0
+```
+
+## Usage
+
+Call `createExtension` as the entry point of your extension bundle:
+
+```tsx
+import { createExtension, Surface, ui } from '@stackable-labs/sdk-extension-react';
+
+export default createExtension(() => (
+  <Surface id="slot.content">
+    <ui.Text>Hello from my extension!</ui.Text>
+  </Surface>
+));
+```
+
+## Key exports
+
+- **`createExtension`** — entry point bootstrap; mounts the extension React tree
+- **`useCapabilities`** — call host-mediated APIs (`data.query`, `actions.toast`, `actions.invoke`)
+- **`useSurfaceContext`** — read the context object passed by the host
+- **`useStore` / `createStore`** — lightweight store for extension-local state
+- **`ui`** — pre-approved UI primitive Components (`Button`, `Text`, `Card`, `Badge`, `Input`, etc.)
+- **`Surface`** — Components to render your UI in host target slot
+
+## Changelog
+
+See [npm version history](https://www.npmjs.com/package/@stackable-labs/sdk-extension-react?activeTab=versions).
+
+## License
+
+SEE LICENSE IN [LICENSE](./LICENSE)

package/dist/Surface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Surface component — represents a single UI surface within an extension.
+ * Each Surface maps to an extension point (target) in the host app.
+ *
+ * Serializes the React element tree (including event handler references) and
+ * sends it to the host via postMessage. The host renders using its component
+ * registry and proxies user interactions back via postMessage.
+ */
+import React from 'react';
+interface SurfaceProps {
+    /** The extension point target ID (e.g., "slot.header") */
+    id: string;
+    children: React.ReactNode;
+}
+export interface SerializedNode {
+    type: 'element' | 'text';
+    tag?: string;
+    attrs?: Record<string, string>;
+    actionId?: string;
+    children?: SerializedNode[];
+    text?: string;
+}
+export declare const Surface: ({ id, children }: SurfaceProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Surface.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Surface component — represents a single UI surface within an extension.
+ * Each Surface maps to an extension point (target) in the host app.
+ *
+ * Serializes the React element tree (including event handler references) and
+ * sends it to the host via postMessage. The host renders using its component
+ * registry and proxies user interactions back via postMessage.
+ */
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { SurfaceContext } from './context';
+/**
+ * Per-surface action handler registry.
+ * Each Surface instance gets its own map keyed by surfaceId so they don't collide.
+ */
+const surfaceHandlers = new Map();
+const getSurfaceRegistry = (surfaceId) => {
+    let reg = surfaceHandlers.get(surfaceId);
+    if (!reg) {
+        reg = { handlers: new Map(), counter: 0 };
+        surfaceHandlers.set(surfaceId, reg);
+    }
+    return reg;
+};
+/**
+ * Serialize the rendered DOM tree from the hidden container.
+ * This approach works with hook-based child components because React has
+ * already rendered them into actual DOM elements by the time we traverse.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const serializeDOMNode = (domNode, registry) => {
+    if (domNode.nodeType === Node.TEXT_NODE) {
+        const text = domNode.textContent || '';
+        if (!text.trim())
+            return [];
+        return [{ type: 'text', text }];
+    }
+    if (domNode.nodeType !== Node.ELEMENT_NODE)
+        return [];
+    const el = domNode;
+    const tag = el.tagName.toLowerCase();
+    // Skip the container div
+    if (tag === 'div' && el.hasAttribute('data-surface-id')) {
+        return Array.from(el.childNodes).flatMap((child) => serializeDOMNode(child, registry));
+    }
+    const attrs = {};
+    let actionId;
+    // Extract props from React's internal __reactProps$ to preserve original
+    // prop names (e.g. className instead of class) and custom element props
+    // (e.g. variant, gap, direction) that may not appear as DOM attributes.
+    const propsKey = Object.keys(el).find((k) => k.startsWith('__reactProps$'));
+    if (propsKey) {
+        const reactProps = el[propsKey];
+        if (reactProps) {
+            for (const [key, value] of Object.entries(reactProps)) {
+                if (key === 'children')
+                    continue;
+                if ((key === 'onClick' || key === 'onChange') && typeof value === 'function') {
+                    const id = `action-${++registry.counter}`;
+                    registry.handlers.set(id, value);
+                    if (key === 'onClick')
+                        actionId = id;
+                    if (key === 'onChange')
+                        attrs['data-onchange-id'] = id;
+                    continue;
+                }
+                if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                    attrs[key] = String(value);
+                }
+            }
+        }
+    }
+    else {
+        // Fallback: copy DOM attributes if React props are unavailable
+        for (const attr of Array.from(el.attributes)) {
+            if (attr.name === 'style')
+                continue;
+            // Map 'class' back to 'className' for host components
+            const name = attr.name === 'class' ? 'className' : attr.name;
+            attrs[name] = attr.value;
+        }
+    }
+    const children = Array.from(el.childNodes).flatMap((child) => serializeDOMNode(child, registry));
+    return [{ type: 'element', tag, attrs, actionId, children }];
+};
+export const Surface = ({ id, children }) => {
+    const [context, setContext] = useState({});
+    const prevTreeRef = useRef('');
+    const containerRef = useRef(null);
+    const serializeAndSend = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const registry = getSurfaceRegistry(id);
+        // Clear previous handlers for THIS surface only
+        registry.handlers.clear();
+        registry.counter = 0;
+        const serialized = serializeDOMNode(container, registry);
+        const tree = {
+            type: 'element',
+            tag: '__fragment',
+            children: serialized,
+        };
+        // Only send if tree structure actually changed (ignore action ID changes)
+        const treeForComparison = JSON.stringify(tree, (key, value) => key === 'actionId' || key === 'data-onchange-id' ? undefined : value);
+        if (treeForComparison === prevTreeRef.current)
+            return;
+        prevTreeRef.current = treeForComparison;
+        window.parent.postMessage({ type: 'surface-update', surfaceId: id, tree }, '*');
+    }, [id]);
+    // Serialize after every Surface render
+    useEffect(() => {
+        serializeAndSend();
+    });
+    // Watch for DOM mutations from child component state changes
+    // (children may re-render without Surface itself re-rendering)
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const observer = new MutationObserver(() => {
+            serializeAndSend();
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        return () => observer.disconnect();
+    }, [serializeAndSend]);
+    useEffect(() => {
+        // Listen for context updates and action invocations from host
+        const handleMessage = (event) => {
+            const msg = event.data;
+            if (!msg || typeof msg !== 'object')
+                return;
+            if (msg.type === 'context-update' && msg.surfaceId === id) {
+                setContext(msg.context);
+            }
+            if (msg.type === 'surface-render' && msg.surfaceId === id) {
+                // Host slot mounted late — re-send current tree
+                if (msg.context) {
+                    setContext(msg.context);
+                }
+                prevTreeRef.current = '';
+                serializeAndSend();
+            }
+            if (msg.type === 'action-invoke' && msg.surfaceId === id && msg.actionId) {
+                const registry = getSurfaceRegistry(id);
+                const handler = registry.handlers.get(msg.actionId);
+                if (handler) {
+                    if (msg.value !== undefined) {
+                        handler({ target: { value: msg.value } });
+                    }
+                    else {
+                        handler();
+                    }
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        // Notify host that this surface is ready
+        window.parent.postMessage({ type: 'surface-ready', surfaceId: id }, '*');
+        return () => {
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [id, serializeAndSend]);
+    return (_jsx(SurfaceContext.Provider, { value: context, children: _jsx("div", { ref: containerRef, "data-surface-id": id, style: { display: 'none' }, children: children }) }));
+};
+//# sourceMappingURL=Surface.js.map

package/dist/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../src/Surface.tsx"],"names":[],"mappings":"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"}

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+/**
+ * React contexts for the extension runtime.
+ */
+/** Context for surface-level data (provided by host per surface) */
+export declare const SurfaceContext: import("react").Context<Record<string, unknown> | null>;
+/** Context for extension-level data (provided by createExtension) */
+export interface ExtensionContextValue {
+    extensionId: string;
+}
+export declare const ExtensionContext: import("react").Context<ExtensionContextValue | null>;

package/dist/context.js

@@ -0,0 +1,8 @@
+/**
+ * React contexts for the extension runtime.
+ */
+import { createContext } from 'react';
+/** Context for surface-level data (provided by host per surface) */
+export const SurfaceContext = createContext(null);
+export const ExtensionContext = createContext(null);
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,oEAAoE;AACpE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAiC,IAAI,CAAC,CAAA;AAOjF,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAA"}

package/dist/createExtension.d.ts

@@ -0,0 +1,21 @@
+/**
+ * createExtension — bootstraps the extension runtime in the iframe sandbox.
+ * Sets up Remote DOM, RPC listener, and renders the extension's React tree.
+ */
+import React from 'react';
+interface CreateExtensionOptions {
+    extensionId?: string;
+}
+/**
+ * Bootstrap an extension. Call this as the entry point of your extension bundle.
+ *
+ * @example
+ * export default createExtension(() => (
+ *   <>
+ *     <Surface id="slot.header"><Header /></Surface>
+ *     <Surface id="slot.content"><Content /></Surface>
+ *   </>
+ * ));
+ */
+export declare const createExtension: (factory: () => React.ReactElement, options?: CreateExtensionOptions) => void;
+export {};

package/dist/createExtension.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { ExtensionContext } from './context';
+import { initRpcListener } from './rpc-client';
+/**
+ * Bootstrap an extension. Call this as the entry point of your extension bundle.
+ *
+ * @example
+ * export default createExtension(() => (
+ *   <>
+ *     <Surface id="slot.header"><Header /></Surface>
+ *     <Surface id="slot.content"><Content /></Surface>
+ *   </>
+ * ));
+ */
+export const createExtension = (factory, options) => {
+    // Initialize RPC listener for capability responses
+    initRpcListener();
+    const extensionId = options?.extensionId ?? 'unknown';
+    const contextValue = {
+        extensionId,
+    };
+    // Mount the extension React tree
+    const container = document.getElementById('extension-root') ?? document.body;
+    const root = createRoot(container);
+    root.render(_jsx(ExtensionContext.Provider, { value: contextValue, children: factory() }));
+    // Notify host that the extension is ready
+    window.parent.postMessage({ type: 'extension-ready' }, '*');
+};
+//# sourceMappingURL=createExtension.js.map

package/dist/createExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createExtension.js","sourceRoot":"","sources":["../src/createExtension.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAiC,EAAE,OAAgC,EAAQ,EAAE;IAC3G,mDAAmD;IACnD,eAAe,EAAE,CAAA;IAEjB,MAAM,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAA;IAErD,MAAM,YAAY,GAA0B;QAC1C,WAAW;KACZ,CAAA;IAED,iCAAiC;IACjC,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAA;IAC5E,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAElC,IAAI,CAAC,MAAM,CACT,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,OAAO,EAAE,GACgB,CAC7B,CAAA;IAED,0CAA0C;IAC1C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,GAAG,CAAC,CAAA;AAC7D,CAAC,CAAA"}

package/dist/hooks.d.ts

@@ -0,0 +1,32 @@
+/**
+ * React hooks for extension developers.
+ */
+import type { ContextData, ApiRequest, ToastPayload } from '@stackable-labs/sdk-extension-contracts';
+import type { Store } from './store';
+/**
+ * Read the host-provided context for the current surface.
+ */
+export declare const useSurfaceContext: () => Record<string, unknown>;
+/**
+ * Access host-mediated capabilities (data, actions, context).
+ */
+export declare const useCapabilities: () => {
+    data: {
+        query: <T = unknown>(payload: ApiRequest) => Promise<T>;
+    };
+    actions: {
+        toast: (payload: ToastPayload) => Promise<void>;
+        invoke: <T = unknown>(action: string, payload?: Record<string, unknown>) => Promise<T>;
+    };
+    context: {
+        read: () => Promise<ContextData>;
+    };
+};
+/**
+ * Subscribe to a shared store with an optional selector.
+ */
+export declare const useStore: <T, S = T>(store: Store<T>, selector?: (state: T) => S) => S;
+/**
+ * Access the extension-level context (extension ID, manifest, etc.)
+ */
+export declare const useExtension: () => import("./context").ExtensionContextValue;

package/dist/hooks.js

@@ -0,0 +1,51 @@
+/**
+ * React hooks for extension developers.
+ */
+import { useContext, useSyncExternalStore, useCallback } from 'react';
+import { ExtensionContext, SurfaceContext } from './context';
+import { callCapability } from './rpc-client';
+/**
+ * Read the host-provided context for the current surface.
+ */
+export const useSurfaceContext = () => {
+    const ctx = useContext(SurfaceContext);
+    if (!ctx) {
+        throw new Error('useSurfaceContext must be used inside a <Surface> component');
+    }
+    return ctx;
+};
+/**
+ * Access host-mediated capabilities (data, actions, context).
+ */
+export const useCapabilities = () => ({
+    data: {
+        query: (payload) => callCapability('data.query', payload),
+    },
+    actions: {
+        toast: (payload) => callCapability('actions.toast', payload),
+        invoke: (action, payload) => callCapability('actions.invoke', { action, payload }),
+    },
+    context: {
+        read: () => callCapability('context.read'),
+    },
+});
+/**
+ * Subscribe to a shared store with an optional selector.
+ */
+export const useStore = (store, selector) => {
+    const select = selector ?? ((s) => s);
+    const getSnapshot = useCallback(() => select(store.get()), [store, select]);
+    const subscribe = useCallback((onStoreChange) => store.subscribe(onStoreChange), [store]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+/**
+ * Access the extension-level context (extension ID, manifest, etc.)
+ */
+export const useExtension = () => {
+    const ctx = useContext(ExtensionContext);
+    if (!ctx) {
+        throw new Error('useExtension must be used inside a createExtension() tree');
+    }
+    return ctx;
+};
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAOrE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7C;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAA4B,EAAE;IAC7D,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACtC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAA;IAChF,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAAC;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,CAAc,OAAmB,EAAc,EAAE,CACtD,cAAc,CAAI,YAAY,EAAE,OAAO,CAAC;KAC3C;IACD,OAAO,EAAE;QACP,KAAK,EAAE,CAAC,OAAqB,EAAiB,EAAE,CAC9C,cAAc,CAAO,eAAe,EAAE,OAAO,CAAC;QAChD,MAAM,EAAE,CAAc,MAAc,EAAE,OAAiC,EAAc,EAAE,CACrF,cAAc,CAAI,gBAAgB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAgC,CAAC;KACzF;IACD,OAAO,EAAE;QACP,IAAI,EAAE,GAAyB,EAAE,CAC/B,cAAc,CAAc,cAAc,CAAC;KAC9C;CACF,CAAC,CAAA;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAW,KAAe,EAAE,QAA0B,EAAK,EAAE;IACnF,MAAM,MAAM,GAAG,QAAQ,IAAI,CAAC,CAAC,CAAI,EAAE,EAAE,CAAC,CAAiB,CAAC,CAAA;IAExD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAE3E,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,aAAyB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAC7D,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAA;AAClE,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACxC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;IAC9E,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { createExtension } from './createExtension';
+export { createStore } from './store';
+export { useSurfaceContext, useCapabilities, useStore, useExtension, } from './hooks';
+export type { Store } from './store';
+export { Surface } from './Surface';
+export * as ui from './ui';
+export { useContextData } from './useContextData';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { createExtension } from './createExtension';
+export { createStore } from './store';
+export { useSurfaceContext, useCapabilities, useStore, useExtension, } from './hooks';
+export { Surface } from './Surface';
+export * as ui from './ui';
+export { useContextData } from './useContextData';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,KAAK,EAAE,MAAM,MAAM,CAAA;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/rpc-client.d.ts

@@ -0,0 +1,12 @@
+/**
+ * RPC Client — sends capability requests from sandbox to host via postMessage.
+ */
+import type { CapabilityType } from '@stackable-labs/sdk-extension-contracts';
+/**
+ * Initialize the RPC listener for responses from the host.
+ */
+export declare const initRpcListener: () => void;
+/**
+ * Send a capability request to the host and await the response.
+ */
+export declare const callCapability: <T = unknown>(capability: CapabilityType, payload?: unknown) => Promise<T>;

package/dist/rpc-client.js

@@ -0,0 +1,53 @@
+/**
+ * RPC Client — sends capability requests from sandbox to host via postMessage.
+ */
+let requestCounter = 0;
+const pendingRequests = new Map();
+const generateRequestId = () => `req_${++requestCounter}_${Date.now()}`;
+/**
+ * Initialize the RPC listener for responses from the host.
+ */
+export const initRpcListener = () => {
+    window.addEventListener('message', (event) => {
+        const msg = event.data;
+        if (msg?.type === 'capability-response') {
+            const response = msg;
+            const pending = pendingRequests.get(response.id);
+            if (pending) {
+                pendingRequests.delete(response.id);
+                if (response.success) {
+                    pending.resolve(response.data);
+                }
+                else {
+                    pending.reject(new Error(response.error || 'Capability call failed'));
+                }
+            }
+        }
+    });
+};
+/**
+ * Send a capability request to the host and await the response.
+ */
+export const callCapability = (capability, payload) => (new Promise((resolve, reject) => {
+    const id = generateRequestId();
+    pendingRequests.set(id, {
+        resolve: resolve,
+        reject,
+    });
+    const request = {
+        type: 'capability-request',
+        id,
+        capability,
+        payload,
+    };
+    // Post to parent (host) window
+    window.parent.postMessage(request, '*');
+    // Timeout after 30 seconds
+    setTimeout(() => {
+        if (pendingRequests.has(id)) {
+            pendingRequests.delete(id);
+            reject(new Error(`Capability call '${capability}' timed out`));
+        }
+    }, 30000);
+}));
+//# sourceMappingURL=rpc-client.js.map

package/dist/rpc-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rpc-client.js","sourceRoot":"","sources":["../src/rpc-client.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,IAAI,cAAc,GAAG,CAAC,CAAA;AACtB,MAAM,eAAe,GAAG,IAAI,GAAG,EAG3B,CAAA;AAEJ,MAAM,iBAAiB,GAAG,GAAW,EAAE,CAAC,OAAO,EAAE,cAAc,IAAI,IAAI,CAAC,GAAG,EAAE,EAAE,CAAA;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAS,EAAE;IACxC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;QACzD,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAA;QACtB,IAAI,GAAG,EAAE,IAAI,KAAK,qBAAqB,EAAE,CAAC;YACxC,MAAM,QAAQ,GAAG,GAAyB,CAAA;YAC1C,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;YAChD,IAAI,OAAO,EAAE,CAAC;gBACZ,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBACnC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;oBACrB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAChC,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAA;gBACvE,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAc,UAA0B,EAAE,OAAiB,EAAc,EAAE,CAAC,CACxG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IAC9B,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAC9B,eAAe,CAAC,GAAG,CAAC,EAAE,EAAE;QACtB,OAAO,EAAE,OAAkC;QAC3C,MAAM;KACP,CAAC,CAAA;IAEF,MAAM,OAAO,GAAsB;QACjC,IAAI,EAAE,oBAAoB;QAC1B,EAAE;QACF,UAAU;QACV,OAAO;KACR,CAAA;IAED,+BAA+B;IAC/B,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAA;IAEvC,2BAA2B;IAC3B,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YAC5B,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YAC1B,MAAM,CAAC,IAAI,KAAK,CAAC,oBAAoB,UAAU,aAAa,CAAC,CAAC,CAAA;QAChE,CAAC;IACH,CAAC,EAAE,KAAK,CAAC,CAAA;AACX,CAAC,CAAC,CACH,CAAA"}

package/dist/store.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared Store — cross-surface state coordination.
+ * All surfaces in the same extension runtime share a store instance.
+ */
+type Listener<T> = (state: T) => void;
+export interface Store<T> {
+    get(): T;
+    set(partial: Partial<T>): void;
+    subscribe(listener: Listener<T>): () => void;
+}
+/**
+ * Create a shared store for cross-surface coordination.
+ *
+ * @example
+ * const store = createStore({ mode: 'account', selectedId: null });
+ * store.set({ mode: 'conversations' });
+ * store.subscribe((state) => console.log(state));
+ */
+export declare const createStore: <T extends object>(initialState: T) => Store<T>;
+export {};

package/dist/store.js

@@ -0,0 +1,30 @@
+/**
+ * Shared Store — cross-surface state coordination.
+ * All surfaces in the same extension runtime share a store instance.
+ */
+/**
+ * Create a shared store for cross-surface coordination.
+ *
+ * @example
+ * const store = createStore({ mode: 'account', selectedId: null });
+ * store.set({ mode: 'conversations' });
+ * store.subscribe((state) => console.log(state));
+ */
+export const createStore = (initialState) => {
+    let state = { ...initialState };
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set: (partial) => {
+            state = { ...state, ...partial };
+            listeners.forEach((listener) => listener(state));
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAUH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,YAAe,EAAY,EAAE;IACzE,IAAI,KAAK,GAAG,EAAE,GAAG,YAAY,EAAE,CAAA;IAC/B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAe,CAAA;IAExC,OAAO;QACL,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK;QAEhB,GAAG,EAAE,CAAC,OAAmB,EAAE,EAAE;YAC3B,KAAK,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,OAAO,EAAE,CAAA;YAChC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;QAClD,CAAC;QAED,SAAS,EAAE,CAAC,QAAqB,EAAE,EAAE;YACnC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;YACvB,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC5B,CAAC,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC,CAAA"}

package/dist/ui.d.ts

@@ -0,0 +1,222 @@
+/**
+ * UI Component Wrappers for Extensions
+ *
+ * These are thin React components that render Remote DOM custom elements.
+ * The host maps these custom elements to real React components (e.g., shadcn/ui).
+ *
+ * Extension developers use these as: <ui.Card>, <ui.Button>, etc.
+ */
+import React from 'react';
+import type { AllowedIconName } from '@stackable-labs/sdk-extension-contracts';
+type RemoteInputChangeEvent = {
+    target: {
+        value: string;
+    };
+};
+export declare const Card: (props: {
+    className?: string;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContent: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Stack: (props: {
+    gap?: string;
+    direction?: "row" | "column";
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Inline: (props: {
+    gap?: string;
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: (props: {
+    className?: string;
+    tone?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: (props: {
+    level?: "1" | "2" | "3" | "4" | "5" | "6";
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: (props: {
+    variant?: string;
+    tone?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: (props: {
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    type?: string;
+    className?: string;
+    title?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: (props: {
+    type?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Separator: (props: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: (props: {
+    defaultValue?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsList: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsTrigger: (props: {
+    value: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsContent: (props: {
+    value: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollArea: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarImage: (props: {
+    src: string;
+    alt?: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarFallback: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: (props: {
+    name: AllowedIconName;
+    size?: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: (props: {
+    href?: string;
+    target?: string;
+    rel?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterLink: (props: {
+    href?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: (props: {
+    title?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: (props: {
+    icon?: AllowedIconName;
+    label: string;
+    description?: string;
+    onClick?: () => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-card': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-card-content': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-card-header': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                variant?: string;
+                size?: string;
+                disabled?: boolean;
+                type?: string;
+                title?: string;
+            }, HTMLElement>;
+            'ui-text': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                tone?: string;
+            }, HTMLElement>;
+            'ui-heading': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                level?: string;
+            }, HTMLElement>;
+            'ui-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                variant?: string;
+                tone?: string;
+            }, HTMLElement>;
+            'ui-input': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                type?: string;
+                placeholder?: string;
+                value?: string;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+                disabled?: boolean;
+                id?: string;
+            };
+            'ui-stack': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                gap?: string;
+                direction?: string;
+                align?: string;
+            }, HTMLElement>;
+            'ui-inline': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                gap?: string;
+                align?: string;
+            }, HTMLElement>;
+            'ui-separator': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-tabs': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                defaultValue?: string;
+            }, HTMLElement>;
+            'ui-tabs-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-tabs-trigger': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                value?: string;
+            }, HTMLElement>;
+            'ui-tabs-content': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                value?: string;
+            }, HTMLElement>;
+            'ui-scroll-area': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-avatar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-avatar-image': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                src?: string;
+                alt?: string;
+            }, HTMLElement>;
+            'ui-avatar-fallback': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-icon': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                name?: string;
+                size?: string;
+            }, HTMLElement>;
+            'ui-link': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                href?: string;
+                target?: string;
+                rel?: string;
+            }, HTMLElement>;
+            'ui-menu-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                icon?: string;
+                label?: string;
+                description?: string;
+            }, HTMLElement>;
+            'ui-menu': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                title?: string;
+            }, HTMLElement>;
+        }
+    }
+}
+export {};

package/dist/ui.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// ─── Layout ──────────────────────────────────────────────────────────────────
+export const Card = (props) => _jsx("ui-card", { ...props, children: props.children });
+export const CardContent = (props) => _jsx("ui-card-content", { ...props, children: props.children });
+export const CardHeader = (props) => _jsx("ui-card-header", { ...props, children: props.children });
+export const Stack = (props) => _jsx("ui-stack", { ...props, children: props.children });
+export const Inline = (props) => _jsx("ui-inline", { ...props, children: props.children });
+// ─── Text ────────────────────────────────────────────────────────────────────
+export const Text = (props) => _jsx("ui-text", { ...props, children: props.children });
+export const Heading = (props) => _jsx("ui-heading", { ...props, children: props.children });
+export const Badge = (props) => _jsx("ui-badge", { ...props, children: props.children });
+// ─── Inputs ──────────────────────────────────────────────────────────────────
+export const Button = (props) => _jsx("ui-button", { ...props, children: props.children });
+export const Input = (props) => _jsx("ui-input", { ...props });
+// ─── Feedback / Navigation ───────────────────────────────────────────────────
+export const Separator = (props) => _jsx("ui-separator", { ...props });
+export const Tabs = (props) => _jsx("ui-tabs", { ...props, children: props.children });
+export const TabsList = (props) => _jsx("ui-tabs-list", { ...props, children: props.children });
+export const TabsTrigger = (props) => _jsx("ui-tabs-trigger", { ...props, children: props.children });
+export const TabsContent = (props) => _jsx("ui-tabs-content", { ...props, children: props.children });
+export const ScrollArea = (props) => _jsx("ui-scroll-area", { ...props, children: props.children });
+// ─── Avatar ──────────────────────────────────────────────────────────────────
+export const Avatar = (props) => _jsx("ui-avatar", { ...props, children: props.children });
+export const AvatarImage = (props) => _jsx("ui-avatar-image", { ...props });
+export const AvatarFallback = (props) => _jsx("ui-avatar-fallback", { ...props, children: props.children });
+// ─── Icons ───────────────────────────────────────────────────────────────────
+export const Icon = (props) => _jsx("ui-icon", { ...props });
+export const Link = (props) => _jsx("ui-link", { ...props, children: props.children });
+// NOTE: Keep this implementation in sync with
+// packages/apps/host-app/src/components/FooterLink.tsx.
+// TODO: Abstract FooterLink into a shared React component package.
+export const FooterLink = (props) => (_jsx("ui-link", { ...props, target: "_blank", rel: "noopener noreferrer", className: "text-zinc-500 opacity-80 transition-colors hover:text-zinc-900 hover:opacity-100", children: props.children }));
+// ─── Composite ──────────────────────────────────────────────────────────────
+export const Menu = (props) => _jsx("ui-menu", { ...props, children: props.children });
+export const MenuItem = (props) => _jsx("ui-menu-item", { ...props });
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.tsx"],"names":[],"mappings":"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"}

package/dist/useContextData.d.ts

@@ -0,0 +1,9 @@
+/**
+ * useContextData — reads host context on mount and returns all context fields.
+ */
+import type { ContextData } from '@stackable-labs/sdk-extension-contracts';
+type UseContextDataResult = ContextData & {
+    loading: boolean;
+};
+export declare const useContextData: () => UseContextDataResult;
+export {};

package/dist/useContextData.js

@@ -0,0 +1,27 @@
+/**
+ * useContextData — reads host context on mount and returns all context fields.
+ */
+import { useState, useEffect } from 'react';
+import { useCapabilities } from './hooks';
+export const useContextData = () => {
+    const capabilities = useCapabilities();
+    const [contextData, setContextData] = useState({});
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const loadContext = async () => {
+            try {
+                const ctx = await capabilities.context.read();
+                setContextData(ctx);
+            }
+            catch (err) {
+                console.error('Failed to read context:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        loadContext();
+    }, [capabilities]);
+    return { ...contextData, loading };
+};
+//# sourceMappingURL=useContextData.js.map

package/dist/useContextData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContextData.js","sourceRoot":"","sources":["../src/useContextData.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAIzC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAyB,EAAE;IACvD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAA;IAEtC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAA;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAA;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;gBAC7C,cAAc,CAAC,GAAG,CAAC,CAAA;YACrB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAA;YAC/C,CAAC;oBAAS,CAAC;gBACT,UAAU,CAAC,KAAK,CAAC,CAAA;YACnB,CAAC;QACH,CAAC,CAAA;QACD,WAAW,EAAE,CAAA;IACf,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,EAAE,GAAG,WAAW,EAAE,OAAO,EAAE,CAAA;AACpC,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@stackable-labs/sdk-extension-react",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@stackable-labs/sdk-extension-contracts": "1.0.0",
+    "@remote-dom/core": "1.x",
+    "@remote-dom/react": "1.x"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <19.0.0",
+    "react-dom": ">=18.0.0 <19.0.0"
+  },
+  "description": "React bindings for building Stackable extensions.",
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://www.npmjs.com/package/@stackable-labs/sdk-extension-react",
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ]
+}