@atmos.build/ui 0.1.3 → 0.1.5

package/dist/components/usage-bar.d.ts

@@ -9,9 +9,11 @@ export interface UsageBarProps extends Omit<React.ComponentProps<'div'>, 'childr
     label: string;
     /** Consumed share, 0–1. Values outside the range clamp rather than overflow the track. */
     fraction: number;
+    pendingFraction?: number;
     /** Right-aligned readout — a percentage, "12k of 200k", whatever the caller measures in. */
     value?: React.ReactNode;
     caption?: React.ReactNode;
     tone?: UsageBarTone;
+    srOnlyLabel?: boolean;
 }
-export declare function UsageBar({ label, fraction, value, caption, tone, className, ...props }: UsageBarProps): React.JSX.Element;
+export declare function UsageBar({ label, fraction, pendingFraction, value, caption, tone, srOnlyLabel, className, ...props }: UsageBarProps): React.JSX.Element;

package/dist/components/usage-bar.js

@@ -18,9 +18,11 @@ export function usageTone(fraction) {
         return 'warning';
     return 'usage';
 }
-export function UsageBar({ label, fraction, value, caption, tone, className, ...props }) {
+export function UsageBar({ label, fraction, pendingFraction = 0, value, caption, tone, srOnlyLabel = false, className, ...props }) {
     const clamped = Math.max(0, Math.min(1, Number.isFinite(fraction) ? fraction : 0));
     const percent = Math.round(clamped * 100);
-    const resolvedTone = tone ?? usageTone(clamped);
-    return (_jsxs("div", { "data-slot": "usage-bar", "data-tone": resolvedTone, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-label": label, className: cn('flex flex-col gap-1', className), ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11.5px]", children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: label }), value ? (_jsx("span", { className: "text-muted-foreground shrink-0 font-mono tabular-nums", children: value })) : null] }), _jsx("div", { className: "bg-muted h-1 overflow-hidden rounded-full", "aria-hidden": true, children: _jsx("span", { className: cn('block h-full rounded-full transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${percent}%` } }) }), caption ? (_jsx("p", { className: "text-muted-foreground/75 font-mono text-[10.5px]", children: caption })) : null] }));
+    const pending = Math.max(0, Math.min(1 - clamped, Number.isFinite(pendingFraction) ? pendingFraction : 0));
+    const pendingPercent = Math.round(pending * 100);
+    const resolvedTone = tone ?? usageTone(clamped + pending);
+    return (_jsxs("div", { "data-slot": "usage-bar", "data-tone": resolvedTone, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.min(100, percent + pendingPercent), "aria-label": label, className: cn('flex flex-col gap-1', className), ...props, children: [srOnlyLabel && !value ? null : (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11.5px]", children: [srOnlyLabel ? null : (_jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: label })), value ? (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 font-mono tabular-nums", children: value })) : null] })), _jsxs("div", { className: "bg-muted flex h-1 overflow-hidden rounded-full", "aria-hidden": true, children: [_jsx("span", { className: cn('block h-full transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${percent}%` } }), pendingPercent > 0 ? (_jsx("span", { "data-slot": "usage-bar-pending", className: cn('block h-full opacity-40 transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${pendingPercent}%` } })) : null] }), caption ? (_jsx("p", { className: "text-muted-foreground/75 font-mono text-[10.5px]", children: caption })) : null] }));
 }

package/dist/flow/editor/adapter.d.ts

@@ -10,7 +10,7 @@ export interface FlowEditorIssue {
     readonly severity?: FlowEditorIssueSeverity;
 }
 export interface FlowAdapterContext {
-    readonly workspaceId: string | null | undefined;
+    readonly orgId: string | null | undefined;
 }
 export interface NodeConfigPanelProps<TData> {
     readonly node: RfNode<TData>;

package/dist/flow/editor/flow-editor.d.ts

@@ -23,7 +23,7 @@ export interface FlowEditorCanvasContext<TData, TEdge> {
 export type UseFlowEditorCanvasPresentation<TData, TEdge> = (context: FlowEditorCanvasContext<TData, TEdge>) => FlowEditorCanvasPresentation<TData, TEdge>;
 export interface FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult> {
     readonly adapter: FlowDomainAdapter<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>;
-    readonly workspaceId: string | null | undefined;
+    readonly orgId: string | null | undefined;
     readonly initialNodes: RfNode<TData>[];
     readonly initialEdges: RfEdge<TEdge>[];
     readonly settingsTitle: string;
@@ -50,5 +50,5 @@ export interface FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TP
         onOpenChange: (open: boolean) => void;
     }) => ReactNode;
 }
-export declare function FlowEditor<TData, TEdge = unknown, TDef = unknown, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown>({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew, externalDirty, initiallyUnpublished, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId, renderHeaderStart, useCanvasPresentation, renderSettings, }: FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>): import("react").JSX.Element;
+export declare function FlowEditor<TData, TEdge = unknown, TDef = unknown, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown>({ adapter, orgId, initialNodes, initialEdges, settingsTitle, isNew, externalDirty, initiallyUnpublished, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId, renderHeaderStart, useCanvasPresentation, renderSettings, }: FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>): import("react").JSX.Element;
 export {};

package/dist/flow/editor/flow-editor.js

@@ -14,9 +14,9 @@ import { SettingsDialog } from './settings-dialog.js';
 function useDefaultCanvasPresentation(_context) {
     return {};
 }
-export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew = false, externalDirty = false, initiallyUnpublished = false, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId = 'flow-editor', renderHeaderStart, useCanvasPresentation = useDefaultCanvasPresentation, renderSettings, }) {
+export function FlowEditor({ adapter, orgId, initialNodes, initialEdges, settingsTitle, isNew = false, externalDirty = false, initiallyUnpublished = false, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId = 'flow-editor', renderHeaderStart, useCanvasPresentation = useDefaultCanvasPresentation, renderSettings, }) {
     const t = useTranslations('flowEditor');
-    const adapterCtx = useMemo(() => ({ workspaceId }), [workspaceId]);
+    const adapterCtx = useMemo(() => ({ orgId }), [orgId]);
     const groups = useMemo(() => adapter.nodeGroups(adapterCtx), [adapter, adapterCtx]);
     const dag = useDagEditor({
         makeNodeData: adapter.makeNodeData,
@@ -173,7 +173,7 @@ export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, s
             lastSavedSigRef.current = debouncedSaveSig;
             return;
         }
-        if (isNew || !workspaceId)
+        if (isNew || !orgId)
             return;
         if (debouncedSaveSig === lastSavedSigRef.current)
             return;
@@ -181,7 +181,7 @@ export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, s
         void persistRef.current(true).catch(() => {
             lastSavedSigRef.current = null;
         });
-    }, [debouncedSaveSig, isNew, workspaceId]);
+    }, [debouncedSaveSig, isNew, orgId]);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const toolbarExtras = adapter.toolbarExtras?.(adapterCtx);
     const canvasPresentation = useCanvasPresentation({ dag, groups, invalidNodeIds });

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { AudioPreview, type AudioPreviewProps, type AudioPreviewLabels, type Aud
 export { AvatarUploader, type AvatarUploaderLabels, type AvatarUploaderProps, } from './components/avatar-uploader.js';
 export { Avatar, avatarVariants, initialsFromName, type AvatarProps } from './components/avatar.js';
 export { Badge, badgeVariants } from './components/badge.js';
-export { AreaChart, BarChart, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, type BarChartProps, type CartesianChartProps, type CategoricalChartProps, type ChartAxisOptions, type ChartDatum, type ChartLegendItem, type ScatterChartProps, } from './components/charts/index.js';
+export { AreaChart, BarChart, CHART_COLORS, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, type BarChartProps, type CartesianChartProps, type CategoricalChartProps, type ChartAxisOptions, type ChartDatum, type ChartLegendItem, type PieChartProps, type ScatterChartProps, } from './components/charts/index.js';
 export { ChannelBadge, ChannelListRow, channelIcon, channelListRowVariants, type ChannelBadgeProps, type ChannelListRowProps, type ChannelKind, } from './components/channel-list.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Chip, chipVariants, type ChipProps, type ChipLabelProps, type ChipRemoveProps, } from './components/chip.js';
@@ -75,6 +75,7 @@ export { TimestampedTranscript, type TimestampedTranscriptLabels, type Timestamp
 export { MicrophonePriority, type MicrophonePriorityItem, type MicrophonePriorityLabels, type MicrophonePriorityProps, } from './components/microphone-priority.js';
 export { SpeechPlayback, type SpeechPlaybackLabels, type SpeechPlaybackProps, type SpeechPlaybackState, } from './components/speech-playback.js';
 export { cn } from './lib/cn.js';
+export { useScrollLockEscape } from './lib/scroll-lock-escape.js';
 export { clearLocalUiState, readLocalUiState, subscribeLocalUiState, useLocalUiState, writeLocalUiState, } from './lib/local-ui-state.js';
 export { disclosureStateKey, useDisclosureState, type DisclosureState, } from './lib/disclosure-state.js';
 export * from './lib/view-query/index.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { AudioPreview, } from './components/audio-preview.js';
 export { AvatarUploader, } from './components/avatar-uploader.js';
 export { Avatar, avatarVariants, initialsFromName } from './components/avatar.js';
 export { Badge, badgeVariants } from './components/badge.js';
-export { AreaChart, BarChart, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, } from './components/charts/index.js';
+export { AreaChart, BarChart, CHART_COLORS, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, } from './components/charts/index.js';
 export { ChannelBadge, ChannelListRow, channelIcon, channelListRowVariants, } from './components/channel-list.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Chip, chipVariants, } from './components/chip.js';
@@ -75,6 +75,7 @@ export { TimestampedTranscript, } from './components/timestamped-transcript.js';
 export { MicrophonePriority, } from './components/microphone-priority.js';
 export { SpeechPlayback, } from './components/speech-playback.js';
 export { cn } from './lib/cn.js';
+export { useScrollLockEscape } from './lib/scroll-lock-escape.js';
 export { clearLocalUiState, readLocalUiState, subscribeLocalUiState, useLocalUiState, writeLocalUiState, } from './lib/local-ui-state.js';
 export { disclosureStateKey, useDisclosureState, } from './lib/disclosure-state.js';
 export * from './lib/view-query/index.js';

package/dist/lib/scroll-lock-escape.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Portalled content lands outside the scroll-lock (react-remove-scroll) of any enclosing dialog.
+ * That lock's document-level, bubble-phase `wheel` handler cancels mouse-wheel scrolling on
+ * portalled content (trackpad deltas slip its overscroll heuristic, discrete wheel ticks don't).
+ * Stopping the wheel event at the scroller keeps it from reaching that handler, so the content
+ * scrolls natively while the dialog's background stays locked. A callback ref (re)attaches the
+ * listener every time the scroller mounts, since it only exists while the surface is open.
+ */
+export declare function useScrollLockEscape<T extends HTMLElement>(): (node: T | null) => void;

package/dist/lib/scroll-lock-escape.js

@@ -0,0 +1,22 @@
+'use client';
+import { useCallback, useRef } from 'react';
+/**
+ * Portalled content lands outside the scroll-lock (react-remove-scroll) of any enclosing dialog.
+ * That lock's document-level, bubble-phase `wheel` handler cancels mouse-wheel scrolling on
+ * portalled content (trackpad deltas slip its overscroll heuristic, discrete wheel ticks don't).
+ * Stopping the wheel event at the scroller keeps it from reaching that handler, so the content
+ * scrolls natively while the dialog's background stays locked. A callback ref (re)attaches the
+ * listener every time the scroller mounts, since it only exists while the surface is open.
+ */
+export function useScrollLockEscape() {
+    const cleanupRef = useRef(null);
+    return useCallback((node) => {
+        cleanupRef.current?.();
+        cleanupRef.current = null;
+        if (!node)
+            return;
+        const stop = (event) => event.stopPropagation();
+        node.addEventListener('wheel', stop, { passive: true });
+        cleanupRef.current = () => node.removeEventListener('wheel', stop);
+    }, []);
+}

package/dist/mcp-app/checkout-version.d.ts

@@ -0,0 +1,14 @@
+export interface McpAppCheckoutVersionState {
+    reachable: boolean;
+    repositoryRoot: boolean;
+    branch: string | null;
+    headCommit: string | null;
+    detached: boolean;
+}
+export interface McpAppCheckoutVersionCopy {
+    checkout(id: string): string;
+    detachedHead: string;
+    detachedHeadAt(commit: string): string;
+}
+export declare function mcpAppCheckoutVersionLabel(checkoutId: string, state: McpAppCheckoutVersionState | null, copy: McpAppCheckoutVersionCopy): string;
+export declare function shortCheckoutId(checkoutId: string): string;

package/dist/mcp-app/checkout-version.js

@@ -0,0 +1,19 @@
+export function mcpAppCheckoutVersionLabel(checkoutId, state, copy) {
+    if (state?.reachable && state.repositoryRoot) {
+        if (!state.detached && state.branch?.trim())
+            return state.branch.trim();
+        if (state.detached) {
+            const commit = shortCommit(state.headCommit);
+            return commit ? copy.detachedHeadAt(commit) : copy.detachedHead;
+        }
+    }
+    return copy.checkout(shortCheckoutId(checkoutId));
+}
+export function shortCheckoutId(checkoutId) {
+    const normalized = checkoutId.trim();
+    return normalized.length > 12 ? `${normalized.slice(0, 4)}…${normalized.slice(-4)}` : normalized;
+}
+function shortCommit(commit) {
+    const normalized = commit?.trim();
+    return normalized ? normalized.slice(0, 7) : null;
+}

package/dist/mcp-app/index.d.ts

@@ -1,4 +1,8 @@
 export { App } from '@modelcontextprotocol/ext-apps';
 export type { McpUiHostContext, McpUiToolResultNotification } from '@modelcontextprotocol/ext-apps';
 export { applyAtmosHostContext } from './theme.js';
+export { mcpAppCheckoutVersionLabel, shortCheckoutId, type McpAppCheckoutVersionCopy, type McpAppCheckoutVersionState, } from './checkout-version.js';
 export { useAtmosMcpApp, type AtmosMcpAppOptions } from './use-atmos-mcp-app.js';
+export { useMcpResource, type McpResourceState } from './use-mcp-resource.js';
+export { callMcpTool, useMcpTool, type McpToolState } from './use-mcp-tool.js';
+export type { McpToolInput, McpToolOutput, RuntimeSchema, TypedMcpResource, TypedMcpTool, } from './typed-schema.js';

package/dist/mcp-app/index.js

@@ -1,3 +1,6 @@
 export { App } from '@modelcontextprotocol/ext-apps';
 export { applyAtmosHostContext } from './theme.js';
+export { mcpAppCheckoutVersionLabel, shortCheckoutId, } from './checkout-version.js';
 export { useAtmosMcpApp } from './use-atmos-mcp-app.js';
+export { useMcpResource } from './use-mcp-resource.js';
+export { callMcpTool, useMcpTool } from './use-mcp-tool.js';

package/dist/mcp-app/resource-protocol.d.ts

@@ -0,0 +1,5 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import { type ResourceUpdatedNotification } from '@modelcontextprotocol/sdk/types.js';
+export declare function onMcpResourceUpdated(app: App, handler: (notification: ResourceUpdatedNotification) => void): void;
+export declare function subscribeMcpResource(app: App, uri: string): Promise<void>;
+export declare function unsubscribeMcpResource(app: App, uri: string): Promise<void>;

package/dist/mcp-app/resource-protocol.js

@@ -0,0 +1,13 @@
+import { EmptyResultSchema, ResourceUpdatedNotificationSchema, SubscribeRequestSchema, UnsubscribeRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+export function onMcpResourceUpdated(app, handler) {
+    resourceProtocol(app).setNotificationHandler(ResourceUpdatedNotificationSchema, handler);
+}
+export async function subscribeMcpResource(app, uri) {
+    await resourceProtocol(app).request(SubscribeRequestSchema.parse({ method: 'resources/subscribe', params: { uri } }), EmptyResultSchema);
+}
+export async function unsubscribeMcpResource(app, uri) {
+    await resourceProtocol(app).request(UnsubscribeRequestSchema.parse({ method: 'resources/unsubscribe', params: { uri } }), EmptyResultSchema);
+}
+function resourceProtocol(app) {
+    return app;
+}

package/dist/mcp-app/typed-schema.d.ts

@@ -0,0 +1,28 @@
+export interface RuntimeSchema<T> {
+    parse(value: unknown): T;
+}
+export interface TypedMcpResource<T> {
+    readonly uri: string;
+    readonly schema: RuntimeSchema<T>;
+}
+export interface TypedMcpTool<ParsedInput = unknown, Output = unknown, Input = ParsedInput> {
+    readonly name: string;
+    readonly input: RuntimeSchema<ParsedInput>;
+    readonly output: RuntimeSchema<Output>;
+    readonly '~types'?: {
+        input: Input;
+        output: Output;
+        parsedInput: ParsedInput;
+    };
+}
+export type McpToolInput<Tool extends TypedMcpTool> = '~types' extends keyof Tool ? ToolTypeCarrier<Tool> extends {
+    input: infer Input;
+} ? Input : ParsedSchema<Tool['input']> : ParsedSchema<Tool['input']>;
+export type McpToolOutput<Tool extends TypedMcpTool> = '~types' extends keyof Tool ? ToolTypeCarrier<Tool> extends {
+    output: infer Output;
+} ? Output : ParsedSchema<Tool['output']> : ParsedSchema<Tool['output']>;
+type ToolTypeCarrier<Tool> = Tool extends {
+    readonly '~types'?: infer Types;
+} ? NonNullable<Types> : never;
+type ParsedSchema<Schema> = Schema extends RuntimeSchema<infer Value> ? Value : never;
+export {};

package/dist/mcp-app/typed-schema.js

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

package/dist/mcp-app/use-mcp-resource.d.ts

@@ -0,0 +1,11 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import type { ReadResourceResult } from '@modelcontextprotocol/sdk/types.js';
+import type { TypedMcpResource } from './typed-schema.js';
+export interface McpResourceState<T> {
+    data: T | undefined;
+    error: Error | undefined;
+    loading: boolean;
+    refresh: () => void;
+}
+export declare function useMcpResource<T>(app: App | null | undefined, uri: string | null | undefined, select: (resource: ReadResourceResult) => T): McpResourceState<T>;
+export declare function useMcpResource<T>(app: App | null | undefined, resource: TypedMcpResource<T> | null | undefined): McpResourceState<T>;

package/dist/mcp-app/use-mcp-resource.js

@@ -0,0 +1,206 @@
+/* eslint-disable react-hooks/refs -- the latest selector must not become a store subscription dependency */
+import { useMemo, useRef, useSyncExternalStore } from 'react';
+import { onMcpResourceUpdated, subscribeMcpResource, unsubscribeMcpResource, } from './resource-protocol.js';
+const EMPTY_SNAPSHOT = { loading: false };
+const SUBSCRIPTION_RETRY_BASE_MS = 500;
+const SUBSCRIPTION_RETRY_MAX_ATTEMPT = 6;
+const SUBSCRIPTION_RETRY_MAX_MS = 30_000;
+const registries = new WeakMap();
+export function useMcpResource(app, resourceOrUri, select) {
+    const uri = typeof resourceOrUri === 'string' ? resourceOrUri : resourceOrUri?.uri;
+    const selectRef = useRef(() => {
+        throw new Error('An MCP resource selector is required');
+    });
+    selectRef.current =
+        typeof resourceOrUri === 'string'
+            ? (select ?? selectRef.current)
+            : (result) => parseTypedResource(result, resourceOrUri);
+    const entry = useMemo(() => (app && uri ? resourceEntry(app, uri) : undefined), [app, uri]);
+    const snapshot = useSyncExternalStore(entry?.subscribe ?? emptySubscribe, entry?.getSnapshot ?? emptySnapshot, emptySnapshot);
+    let data;
+    let error = snapshot.error;
+    if (snapshot.result) {
+        try {
+            data = selectRef.current(snapshot.result);
+        }
+        catch (cause) {
+            error = resourceError(cause);
+        }
+    }
+    return {
+        data,
+        error,
+        loading: snapshot.loading,
+        refresh: entry?.refresh ?? emptyRefresh,
+    };
+}
+function parseTypedResource(result, resource) {
+    if (!resource)
+        throw new Error('An MCP resource descriptor is required');
+    const content = result.contents.find((item) => item.uri === resource.uri);
+    if (!content || !('text' in content) || typeof content.text !== 'string') {
+        throw new Error(`MCP resource ${resource.uri} did not contain text content`);
+    }
+    return resource.schema.parse(JSON.parse(content.text));
+}
+class McpResourceRegistry {
+    app;
+    entries = new Map();
+    listening = false;
+    constructor(app) {
+        this.app = app;
+    }
+    listen() {
+        if (this.listening)
+            return;
+        this.listening = true;
+        onMcpResourceUpdated(this.app, ({ params }) => this.entries.get(params.uri)?.updated());
+    }
+}
+class McpResourceEntry {
+    registry;
+    uri;
+    listeners = new Set();
+    snapshot = { loading: true };
+    desired = false;
+    subscribed = false;
+    readVersion = 0;
+    retryAttempt = 0;
+    retryTimer;
+    transition = Promise.resolve();
+    constructor(registry, uri) {
+        this.registry = registry;
+        this.uri = uri;
+    }
+    getSnapshot = () => this.snapshot;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        if (this.listeners.size === 1) {
+            const wasDesired = this.desired;
+            this.desired = true;
+            if (!wasDesired) {
+                this.retryAttempt = 0;
+                this.cancelRetry();
+            }
+            this.registry.listen();
+            this.reconcile();
+        }
+        return () => {
+            this.listeners.delete(listener);
+            queueMicrotask(() => {
+                if (this.listeners.size !== 0)
+                    return;
+                this.desired = false;
+                this.cancelRetry();
+                this.reconcile();
+            });
+        };
+    };
+    refresh = () => {
+        if (this.subscribed) {
+            void this.read();
+            return;
+        }
+        this.retryAttempt = 0;
+        this.cancelRetry();
+        this.reconcile();
+    };
+    updated() {
+        if (this.desired && this.subscribed)
+            void this.read();
+    }
+    reconcile() {
+        this.transition = this.transition
+            .then(() => this.applyDesired())
+            .catch((cause) => {
+            if (this.desired) {
+                this.publish({ ...this.snapshot, error: resourceError(cause), loading: false });
+                if (retryableResourceError(cause))
+                    this.scheduleRetry();
+            }
+        });
+    }
+    async applyDesired() {
+        if (this.desired && !this.subscribed) {
+            this.publish({ ...this.snapshot, error: undefined, loading: true });
+            await subscribeMcpResource(this.registry.app, this.uri);
+            this.subscribed = true;
+            this.retryAttempt = 0;
+            this.cancelRetry();
+            if (this.desired)
+                void this.read();
+        }
+        if (!this.desired && this.subscribed) {
+            this.subscribed = false;
+            this.readVersion += 1;
+            await unsubscribeMcpResource(this.registry.app, this.uri);
+        }
+        if (this.desired !== this.subscribed)
+            this.reconcile();
+    }
+    scheduleRetry() {
+        if (!this.desired || this.subscribed || this.retryTimer)
+            return;
+        const delay = Math.min(SUBSCRIPTION_RETRY_BASE_MS * 2 ** this.retryAttempt, SUBSCRIPTION_RETRY_MAX_MS);
+        this.retryAttempt = Math.min(this.retryAttempt + 1, SUBSCRIPTION_RETRY_MAX_ATTEMPT);
+        this.retryTimer = setTimeout(() => {
+            this.retryTimer = undefined;
+            if (this.desired && !this.subscribed)
+                this.reconcile();
+        }, delay);
+    }
+    cancelRetry() {
+        if (this.retryTimer === undefined)
+            return;
+        clearTimeout(this.retryTimer);
+        this.retryTimer = undefined;
+    }
+    async read() {
+        const version = ++this.readVersion;
+        this.publish({ ...this.snapshot, error: undefined, loading: true });
+        try {
+            const result = await this.registry.app.readServerResource({ uri: this.uri });
+            if (!this.desired || !this.subscribed || version !== this.readVersion)
+                return;
+            this.publish({ result, loading: false });
+        }
+        catch (cause) {
+            if (!this.desired || !this.subscribed || version !== this.readVersion)
+                return;
+            this.publish({ ...this.snapshot, error: resourceError(cause), loading: false });
+        }
+    }
+    publish(snapshot) {
+        this.snapshot = snapshot;
+        this.listeners.forEach((listener) => listener());
+    }
+}
+function resourceEntry(app, uri) {
+    let registry = registries.get(app);
+    if (!registry) {
+        registry = new McpResourceRegistry(app);
+        registries.set(app, registry);
+    }
+    let entry = registry.entries.get(uri);
+    if (!entry) {
+        entry = new McpResourceEntry(registry, uri);
+        registry.entries.set(uri, entry);
+    }
+    return entry;
+}
+function resourceError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+function retryableResourceError(cause) {
+    if (!cause || typeof cause !== 'object' || !('code' in cause))
+        return true;
+    const code = cause.code;
+    return code !== -32700 && code !== -32600 && code !== -32601 && code !== -32602;
+}
+function emptySubscribe() {
+    return emptyRefresh;
+}
+function emptySnapshot() {
+    return EMPTY_SNAPSHOT;
+}
+function emptyRefresh() { }

package/dist/mcp-app/use-mcp-tool.d.ts

@@ -0,0 +1,9 @@
+import type { App } from '@modelcontextprotocol/ext-apps';
+import type { McpToolInput, McpToolOutput, TypedMcpTool } from './typed-schema.js';
+export interface McpToolState<Input, Output> {
+    call: (input: Input) => Promise<Output>;
+    error: Error | undefined;
+    loading: boolean;
+}
+export declare function callMcpTool<Tool extends TypedMcpTool>(app: App, tool: Tool, input: McpToolInput<Tool>): Promise<McpToolOutput<Tool>>;
+export declare function useMcpTool<Tool extends TypedMcpTool>(app: App | null | undefined, tool: Tool): McpToolState<McpToolInput<Tool>, McpToolOutput<Tool>>;

package/dist/mcp-app/use-mcp-tool.js

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export async function callMcpTool(app, tool, input) {
+    const parsedInput = tool.input.parse(input);
+    const result = await app.callServerTool({
+        name: tool.name,
+        arguments: asToolArguments(parsedInput),
+    });
+    if (result.isError)
+        throw toolCallError(tool.name, result);
+    return tool.output.parse(result.structuredContent);
+}
+export function useMcpTool(app, tool) {
+    const [status, setStatus] = useState({
+        app,
+        error: undefined,
+        pending: 0,
+        tool,
+    });
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const call = useCallback(async (input) => {
+        if (!app)
+            throw new Error(`Cannot call MCP tool ${tool.name}: the app is not connected`);
+        setStatus((current) => ({
+            app,
+            error: undefined,
+            pending: current.app === app && current.tool === tool ? current.pending + 1 : 1,
+            tool,
+        }));
+        try {
+            return await callMcpTool(app, tool, input);
+        }
+        catch (cause) {
+            const nextError = mcpToolError(cause);
+            if (mounted.current) {
+                setStatus((current) => current.app === app && current.tool === tool
+                    ? { ...current, error: nextError }
+                    : current);
+            }
+            throw nextError;
+        }
+        finally {
+            if (mounted.current) {
+                setStatus((current) => current.app === app && current.tool === tool
+                    ? { ...current, pending: Math.max(0, current.pending - 1) }
+                    : current);
+            }
+        }
+    }, [app, tool]);
+    const currentStatus = status.app === app && status.tool === tool ? status : undefined;
+    return { call, error: currentStatus?.error, loading: Boolean(currentStatus?.pending) };
+}
+function asToolArguments(input) {
+    if (!input || typeof input !== 'object' || Array.isArray(input)) {
+        throw new Error('MCP tool input must be an object');
+    }
+    return input;
+}
+function toolCallError(name, result) {
+    const detail = result.content
+        .filter((item) => Boolean(item.type === 'text' && item.text.trim()))
+        .map((item) => item.text.trim())
+        .join('\n');
+    return new Error(detail ? `MCP tool ${name} failed: ${detail}` : `MCP tool ${name} failed`);
+}
+function mcpToolError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}

package/dist/mcp-app/vite.js

@@ -6,7 +6,7 @@ import { defineConfig } from 'vite';
 const MCP_APP_SOURCE_METADATA_PROPERTY = '__atmosMcpSource';
 const REACT_COMPONENT_FILE = /\.[jt]sx$/i;
 const NON_PRODUCTION_COMPONENT_FILE = /\.(?:stories|test|spec)\.[cm]?[jt]sx?$/i;
-export function atmosMcpAppViteConfig({ root, entry = 'src/main.tsx', outDir = '../dist', }) {
+export function atmosMcpAppViteConfig({ root, entry = 'src/main.tsx', outDir = '../app-build', }) {
     return defineConfig({
         root,
         publicDir: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmos.build/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",
@@ -64,6 +64,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/ext-apps": "1.7.5",
+    "@modelcontextprotocol/sdk": "1.29.0",
     "@radix-ui/react-roving-focus": "^1.1.15",
     "@radix-ui/react-slot": "^1.3.0",
     "@tailwindcss/postcss": "^4.3.2",