@stackable-labs/sdk-extension-react 1.22.0 → 1.22.2

package/dist/index.d.ts

@@ -1,7 +1,493 @@
-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';
+import React from 'react';
+import { ApiRequest, FetchRequestInit, FetchResponse, ToastPayload, ContextData, AllowedIconName } from '@stackable-labs/sdk-extension-contracts';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * createExtension — bootstraps the extension runtime in the iframe sandbox.
+ * Sets up Remote DOM, RPC listener, and renders the extension's React tree.
+ */
+
+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>
+ *   </>
+ * ));
+ */
+declare const createExtension: (factory: () => React.ReactElement, options?: CreateExtensionOptions) => void;
+
+/**
+ * Shared Store — cross-surface state coordination.
+ * All surfaces in the same extension runtime share a store instance.
+ */
+type Listener<T> = (state: T) => void;
+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));
+ */
+declare const createStore: <T extends object>(initialState: T) => Store<T>;
+
+/** Context for extension-level data (provided by createExtension) */
+interface ExtensionContextValue {
+    extensionId: string;
+}
+
+/**
+ * Read the host-provided context for the current surface.
+ */
+declare const useSurfaceContext: () => Record<string, unknown>;
+/**
+ * Access host-mediated capabilities (data, actions, context).
+ */
+declare const useCapabilities: () => {
+    data: {
+        query: <T = unknown>(payload: ApiRequest) => Promise<T>;
+        fetch: (url: string, init?: FetchRequestInit) => Promise<FetchResponse>;
+    };
+    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.
+ */
+declare const useStore: <T, S = T>(store: Store<T>, selector?: (state: T) => S) => S;
+/**
+ * Access the extension-level context (extension ID, manifest, etc.)
+ */
+declare const useExtension: () => ExtensionContextValue;
+
+interface SurfaceProps {
+    /** The extension point target ID (e.g., "slot.header") */
+    id: string;
+    children: React.ReactNode;
+}
+declare const Surface: ({ id, children }: SurfaceProps) => react_jsx_runtime.JSX.Element;
+
+type RemoteInputChangeEvent = {
+    target: {
+        value: string;
+    };
+};
+declare const Card: (props: {
+    className?: string;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const CardContent: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const CardHeader: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Stack: (props: {
+    gap?: string;
+    direction?: "row" | "column";
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Inline: (props: {
+    gap?: string;
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Text: (props: {
+    className?: string;
+    tone?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Heading: (props: {
+    level?: "1" | "2" | "3" | "4" | "5" | "6";
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Badge: (props: {
+    variant?: string;
+    tone?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Button: (props: {
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    type?: string;
+    className?: string;
+    title?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Input: (props: {
+    type?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Textarea: (props: {
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    disabled?: boolean;
+    rows?: string;
+    className?: string;
+    id?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Select: (props: {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const SelectOption: (props: {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: (props: {
+    checked?: boolean;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Switch: (props: {
+    checked?: boolean;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    disabled?: boolean;
+    size?: string;
+    className?: string;
+    id?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Label: (props: {
+    htmlFor?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const RadioGroup: (props: {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: RemoteInputChangeEvent) => void;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const RadioGroupItem: (props: {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Separator: (props: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Tabs: (props: {
+    defaultValue?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const TabsList: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const TabsTrigger: (props: {
+    value: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const TabsContent: (props: {
+    value: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const ScrollArea: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Skeleton: (props: {
+    width?: string;
+    height?: string;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: (props: {
+    content: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Progress: (props: {
+    value?: string;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Alert: (props: {
+    variant?: string;
+    title?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Collapsible: (props: {
+    defaultOpen?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const CollapsibleTrigger: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const CollapsibleContent: (props: {
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Avatar: (props: {
+    src?: string;
+    alt?: string;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Icon: (props: {
+    name: AllowedIconName;
+    size?: string;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Link: (props: {
+    href?: string;
+    target?: string;
+    rel?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const FooterLink: (props: {
+    href?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const Menu: (props: {
+    title?: string;
+    className?: string;
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const MenuItem: (props: {
+    icon?: AllowedIconName;
+    label: string;
+    description?: string;
+    onClick?: () => void;
+    className?: string;
+}) => 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-textarea': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                placeholder?: string;
+                value?: string;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+                disabled?: boolean;
+                rows?: string;
+                id?: string;
+            };
+            'ui-select': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                value?: string;
+                defaultValue?: string;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+                placeholder?: string;
+                disabled?: boolean;
+            };
+            'ui-select-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                value?: string;
+                disabled?: boolean;
+            }, HTMLElement>;
+            'ui-checkbox': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                checked?: boolean;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+                disabled?: boolean;
+                id?: string;
+            };
+            'ui-switch': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                checked?: boolean;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+                disabled?: boolean;
+                size?: string;
+                id?: string;
+            };
+            'ui-label': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                htmlFor?: string;
+            }, HTMLElement>;
+            'ui-radio-group': Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
+                value?: string;
+                defaultValue?: string;
+                onChange?: (e: RemoteInputChangeEvent) => void;
+            };
+            'ui-radio-group-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                value?: string;
+                disabled?: boolean;
+                id?: string;
+            }, HTMLElement>;
+            '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> & {
+                src?: string;
+                alt?: string;
+            }, 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>;
+            'ui-skeleton': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                width?: string;
+                height?: string;
+            }, HTMLElement>;
+            'ui-tooltip': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                content?: string;
+            }, HTMLElement>;
+            'ui-progress': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                value?: string;
+            }, HTMLElement>;
+            'ui-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                variant?: string;
+                title?: string;
+            }, HTMLElement>;
+            'ui-collapsible': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                defaultOpen?: boolean;
+            }, HTMLElement>;
+            'ui-collapsible-trigger': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'ui-collapsible-content': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+declare const ui_Alert: typeof Alert;
+declare const ui_Avatar: typeof Avatar;
+declare const ui_Badge: typeof Badge;
+declare const ui_Button: typeof Button;
+declare const ui_Card: typeof Card;
+declare const ui_CardContent: typeof CardContent;
+declare const ui_CardHeader: typeof CardHeader;
+declare const ui_Checkbox: typeof Checkbox;
+declare const ui_Collapsible: typeof Collapsible;
+declare const ui_CollapsibleContent: typeof CollapsibleContent;
+declare const ui_CollapsibleTrigger: typeof CollapsibleTrigger;
+declare const ui_FooterLink: typeof FooterLink;
+declare const ui_Heading: typeof Heading;
+declare const ui_Icon: typeof Icon;
+declare const ui_Inline: typeof Inline;
+declare const ui_Input: typeof Input;
+declare const ui_Label: typeof Label;
+declare const ui_Link: typeof Link;
+declare const ui_Menu: typeof Menu;
+declare const ui_MenuItem: typeof MenuItem;
+declare const ui_Progress: typeof Progress;
+declare const ui_RadioGroup: typeof RadioGroup;
+declare const ui_RadioGroupItem: typeof RadioGroupItem;
+declare const ui_ScrollArea: typeof ScrollArea;
+declare const ui_Select: typeof Select;
+declare const ui_SelectOption: typeof SelectOption;
+declare const ui_Separator: typeof Separator;
+declare const ui_Skeleton: typeof Skeleton;
+declare const ui_Stack: typeof Stack;
+declare const ui_Switch: typeof Switch;
+declare const ui_Tabs: typeof Tabs;
+declare const ui_TabsContent: typeof TabsContent;
+declare const ui_TabsList: typeof TabsList;
+declare const ui_TabsTrigger: typeof TabsTrigger;
+declare const ui_Text: typeof Text;
+declare const ui_Textarea: typeof Textarea;
+declare const ui_Tooltip: typeof Tooltip;
+declare namespace ui {
+  export { ui_Alert as Alert, ui_Avatar as Avatar, ui_Badge as Badge, ui_Button as Button, ui_Card as Card, ui_CardContent as CardContent, ui_CardHeader as CardHeader, ui_Checkbox as Checkbox, ui_Collapsible as Collapsible, ui_CollapsibleContent as CollapsibleContent, ui_CollapsibleTrigger as CollapsibleTrigger, ui_FooterLink as FooterLink, ui_Heading as Heading, ui_Icon as Icon, ui_Inline as Inline, ui_Input as Input, ui_Label as Label, ui_Link as Link, ui_Menu as Menu, ui_MenuItem as MenuItem, ui_Progress as Progress, ui_RadioGroup as RadioGroup, ui_RadioGroupItem as RadioGroupItem, ui_ScrollArea as ScrollArea, ui_Select as Select, ui_SelectOption as SelectOption, ui_Separator as Separator, ui_Skeleton as Skeleton, ui_Stack as Stack, ui_Switch as Switch, ui_Tabs as Tabs, ui_TabsContent as TabsContent, ui_TabsList as TabsList, ui_TabsTrigger as TabsTrigger, ui_Text as Text, ui_Textarea as Textarea, ui_Tooltip as Tooltip };
+}
+
+/**
+ * useContextData — reads host context on mount and returns all context fields.
+ */
+
+type UseContextDataResult = ContextData & {
+    loading: boolean;
+};
+declare const useContextData: () => UseContextDataResult;
+
+export { type Store, Surface, createExtension, createStore, ui, useCapabilities, useContextData, useExtension, useStore, useSurfaceContext };