@tai42/studio-sdk 0.12.0 → 0.13.0

package/dist/components/dirty-guard.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unsaved-changes guard for tabbed editors. `Tabs` unmount inactive panels, so a
+ * tab switch tears an editor down and drops its edits. One registry closes the gap:
+ * editors report dirtiness via {@link useRegisterDirty}; {@link GuardedTabs} holds a
+ * switch away from a dirty editor behind a confirm; the same registry arms
+ * {@link useNavigationGuard}, so a route navigation confirms through the SAME dialog
+ * and a full-page unload raises the native prompt. The dialog is one shared
+ * {@link ConfirmDialog} driven by a pending-promise resolver, so the guard's
+ * `Promise<boolean>` handler and the tab switch both settle against it.
+ */
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, } from 'react';
+import { ConfirmDialog } from './confirm-dialog';
+import { Tabs } from './tabs';
+import { useNavigationGuard } from '../navigation';
+const DirtyGuardContext = createContext(null);
+function DirtyGuardProvider({ children }) {
+    const dirtyIds = useRef(new Set());
+    // Mirror the registry's non-empty state into React so the navigation guard's
+    // `when` re-arms as editors go dirty/clean.
+    const [anyDirty, setAnyDirty] = useState(false);
+    const [open, setOpen] = useState(false);
+    const resolverRef = useRef(null);
+    const setDirty = useCallback((id, dirty) => {
+        if (dirty)
+            dirtyIds.current.add(id);
+        else
+            dirtyIds.current.delete(id);
+        setAnyDirty(dirtyIds.current.size > 0);
+    }, []);
+    const confirmLeaveIfDirty = useCallback(() => {
+        if (dirtyIds.current.size === 0)
+            return Promise.resolve(true);
+        return new Promise((resolve) => {
+            // Settle a still-pending confirm as "stay" before it is orphaned by the new one.
+            resolverRef.current?.(false);
+            resolverRef.current = resolve;
+            setOpen(true);
+        });
+    }, []);
+    const settle = useCallback((ok) => {
+        setOpen(false);
+        const resolve = resolverRef.current;
+        resolverRef.current = null;
+        resolve?.(ok);
+    }, []);
+    // The route navigation guard is armed from the SAME registry, so it confirms
+    // through this dialog and any armed guard raises the native unload prompt.
+    useNavigationGuard(anyDirty, confirmLeaveIfDirty);
+    return (_jsxs(DirtyGuardContext.Provider, { value: { setDirty, confirmLeaveIfDirty }, children: [children, open ? (_jsx(ConfirmDialog, { title: "Discard unsaved changes?", confirmLabel: "Discard changes", pendingLabel: "Discarding", confirmVariant: "danger", isPending: false, onConfirm: () => {
+                    settle(true);
+                }, onClose: () => {
+                    settle(false);
+                }, children: _jsx("p", { style: { margin: 0 }, children: "This editor has unsaved changes. Leaving now discards them." }) })) : null] }));
+}
+/**
+ * Report an editor's dirty state to the enclosing {@link GuardedTabs}. A no-op
+ * outside a provider (an editor rendered standalone, e.g. in isolation tests) so
+ * the hook is always safe to call.
+ */
+export function useRegisterDirty(dirty) {
+    const ctx = useContext(DirtyGuardContext);
+    const id = useId();
+    useEffect(() => {
+        ctx?.setDirty(id, dirty);
+    }, [ctx, id, dirty]);
+    // Clear the registration on unmount (a tab switch unmounts the editor) so a
+    // torn-down editor never leaves the guard armed.
+    useEffect(() => () => ctx?.setDirty(id, false), [ctx, id]);
+}
+function GuardedTabsInner({ items, defaultValue, }) {
+    const ctx = useContext(DirtyGuardContext);
+    const [active, setActive] = useState(defaultValue ?? items[0]?.value);
+    // The tab set is dynamic (plugin/capability-gated tabs). If the active value is
+    // no longer present, fall back to the first tab rather than render no panel.
+    const effective = items.some((item) => item.value === active) ? active : items[0]?.value;
+    const onValueChange = (next) => {
+        void ctx?.confirmLeaveIfDirty().then((ok) => {
+            if (ok)
+                setActive(next);
+        });
+    };
+    return _jsx(Tabs, { items: items, value: effective, onValueChange: onValueChange });
+}
+/**
+ * A drop-in replacement for {@link Tabs} that guards a switch away from a dirty
+ * editor. Wraps the tabs in a {@link DirtyGuardProvider}, so an editor rendered in
+ * any panel can arm the guard through {@link useRegisterDirty}.
+ */
+export function GuardedTabs({ items, defaultValue, }) {
+    return (_jsx(DirtyGuardProvider, { children: _jsx(GuardedTabsInner, { items: items, defaultValue: defaultValue }) }));
+}
+//# sourceMappingURL=dirty-guard.js.map

package/dist/components/dirty-guard.js.map

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

package/dist/components/extension-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extension-picker.d.ts","sourceRoot":"","sources":["../../src/components/extension-picker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,MAAM,WAAW,oBAAoB;IACnC,iFAAiF;IACjF,QAAQ,CAAC,SAAS,EAAE,SAAS,SAAS,EAAE,CAAC;IACzC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,oEAAoE;IACpE,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAA6B,GAC9B,EAAE,oBAAoB,+BAmDtB"}
+{"version":3,"file":"extension-picker.d.ts","sourceRoot":"","sources":["../../src/components/extension-picker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOnD,MAAM,WAAW,oBAAoB;IACnC,iFAAiF;IACjF,QAAQ,CAAC,SAAS,EAAE,SAAS,SAAS,EAAE,CAAC;IACzC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,oEAAoE;IACpE,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAA6B,GAC9B,EAAE,oBAAoB,+BA8DtB"}

package/dist/components/extension-picker.js

@@ -2,9 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from './badge';
 import { Checkbox } from './checkbox';
 import { groupByKind, kindVariant } from './extension-grouping';
+import { EmptyState } from './primitives';
 export function ExtensionPicker({ available, value, onChange, disabled, idPrefix = 'extension-picker', }) {
     const groups = groupByKind(available);
     const selected = new Set(value);
+    // An empty catalog renders the shared EmptyState HERE — inside the picker — so
+    // every call site inherits it rather than each guarding an empty checklist (a
+    // bare div that reads as broken). No provider has published an extension yet.
+    if (available.length === 0) {
+        return (_jsx("div", { "data-testid": idPrefix, className: "tai-stack", children: _jsx(EmptyState, { title: "No extensions are available." }) }));
+    }
     /**
      * Toggle a single extension. For a NON-STACKABLE kind (`backend`), checking one
      * first strips any other selected member of that kind before appending, so the

package/dist/components/extension-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension-picker.js","sourceRoot":"","sources":["../../src/components/extension-picker.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAahE,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,kBAAkB,GACR;IACrB,MAAM,MAAM,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,MAAM,GAAG,CAAC,SAAoB,EAAE,YAAqB,EAAE,OAAgB,EAAQ,EAAE;QACrF,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC1D,OAAO;QACT,CAAC;QACD,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC;YAAE,OAAO;QACzC,MAAM,YAAY,GAAG,YAAY;YAC/B,CAAC,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAChF,CAAC,CAAC,SAAS,CAAC;QACd,MAAM,IAAI,GACR,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5F,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,6BAAkB,QAAQ,EAAE,SAAS,EAAC,WAAW,YAC9C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,eAAsB,SAAS,EAAC,uBAAuB,aAGrD,eAAK,SAAS,EAAC,SAAS,aACtB,KAAC,KAAK,IAAC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,YAAG,KAAK,CAAC,IAAI,GAAS,EAC5D,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,WAAW,gCAAuB,CAAC,CAAC,CAAC,IAAI,IAC3E,EACN,cAAK,SAAS,EAAC,SAAS,YACrB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAChC,KAAC,QAAQ,IAEP,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,EACrC,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;4BAC3B,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;wBACjD,CAAC,IANI,SAAS,CAAC,IAAI,CAOnB,CACH,CAAC,GACE,KAnBE,KAAK,CAAC,IAAI,CAoBd,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"extension-picker.js","sourceRoot":"","sources":["../../src/components/extension-picker.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-dialog.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `FormDialog` — a modal whose body is a real `<form>`, so implicit submission
+ * gives Enter-in-a-field → submit. Composes {@link Dialog} and owns the submit
+ * lifecycle: a `type="submit"` default button, a busy state that disables it and
+ * shows a Spinner while the action runs, and a close-on-success-ONLY async contract.
+ *
+ * The contract: `onSubmit` may return a promise; the dialog closes (via `onClose`)
+ * only when it RESOLVES. A rejection or synchronous throw keeps the dialog open and
+ * renders the failure through `ErrorState`, so the operator can retry the filled fields.
+ *
+ * The caller owns mount/unmount: mount only while active, and any close gesture
+ * (Cancel, Escape, overlay) calls `onClose`. `submitDisabled` blocks submission by
+ * click AND by Enter — a disabled default button is not an implicit-submission target.
+ */
+import { type ReactNode } from 'react';
+export interface FormDialogProps {
+    readonly title: string;
+    readonly description?: string;
+    /** The submit button's resting label (e.g. `Create scope`). */
+    readonly submitLabel: string;
+    /** The Spinner's accessible label while the action runs (e.g. `Creating`). */
+    readonly pendingLabel: string;
+    /**
+     * The action the form performs. A returned promise is awaited: the dialog
+     * closes only when it RESOLVES; a rejection (or a synchronous throw) keeps the
+     * dialog open and renders the failure loudly. A `void` return closes the
+     * dialog synchronously.
+     */
+    readonly onSubmit: () => void | Promise<void>;
+    /**
+     * Called on a close gesture (Cancel, Escape, overlay) and on a successful
+     * submit — at most once per dialog lifecycle. A close landing mid-submit wins:
+     * the later resolution does not fire a second `onClose`.
+     */
+    readonly onClose: () => void;
+    /** Blocks submission by click and by Enter while incomplete (a disabled default button is not an implicit-submission target). */
+    readonly submitDisabled?: boolean;
+    readonly submitVariant?: 'primary' | 'danger';
+    /** The Cancel button's label. */
+    readonly cancelLabel?: string;
+    /** The form body — the caller's fields. */
+    readonly children: ReactNode;
+}
+export declare function FormDialog({ title, description, submitLabel, pendingLabel, onSubmit, onClose, submitDisabled, submitVariant, cancelLabel, children, }: FormDialogProps): ReactNode;
+//# sourceMappingURL=form-dialog.d.ts.map

package/dist/components/form-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAA+B,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAMzF,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,iIAAiI;IACjI,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9C,iCAAiC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,cAAsB,EACtB,aAAyB,EACzB,WAAsB,EACtB,QAAQ,GACT,EAAE,eAAe,GAAG,SAAS,CAwE7B"}

package/dist/components/form-dialog.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `FormDialog` — a modal whose body is a real `<form>`, so implicit submission
+ * gives Enter-in-a-field → submit. Composes {@link Dialog} and owns the submit
+ * lifecycle: a `type="submit"` default button, a busy state that disables it and
+ * shows a Spinner while the action runs, and a close-on-success-ONLY async contract.
+ *
+ * The contract: `onSubmit` may return a promise; the dialog closes (via `onClose`)
+ * only when it RESOLVES. A rejection or synchronous throw keeps the dialog open and
+ * renders the failure through `ErrorState`, so the operator can retry the filled fields.
+ *
+ * The caller owns mount/unmount: mount only while active, and any close gesture
+ * (Cancel, Escape, overlay) calls `onClose`. `submitDisabled` blocks submission by
+ * click AND by Enter — a disabled default button is not an implicit-submission target.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Dialog } from './dialog';
+import { Button, ErrorState, Spinner } from './primitives';
+import { errorMessage } from '../errors';
+export function FormDialog({ title, description, submitLabel, pendingLabel, onSubmit, onClose, submitDisabled = false, submitVariant = 'primary', cancelLabel = 'Cancel', children, }) {
+    const [isPending, setIsPending] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    // Latches on the first close gesture so `onClose` fires at most once per lifecycle;
+    // a close mid-submit wins, and the later resolution must not close again.
+    const closedRef = useRef(false);
+    // Guards post-await setters from touching state after a mid-submit close unmounts.
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    function close() {
+        if (closedRef.current)
+            return;
+        closedRef.current = true;
+        onClose();
+    }
+    function handleSubmit(event) {
+        // SPA: the form never navigates, so the default GET is prevented.
+        event.preventDefault();
+        // Also covers a programmatic `requestSubmit` and a second Enter mid-flight, so the
+        // action fires at most once per run.
+        if (isPending || submitDisabled)
+            return;
+        setSubmitError(null);
+        setIsPending(true);
+        // `Promise.resolve().then(onSubmit)` routes a synchronous throw into the rejection
+        // path too, so a sync failure surfaces like an async one.
+        Promise.resolve()
+            .then(() => onSubmit())
+            .then(() => {
+            // A mid-submit close already settled the lifecycle; don't close or set state again.
+            if (closedRef.current || !mountedRef.current)
+                return;
+            setIsPending(false);
+            close();
+        }, (reason) => {
+            if (closedRef.current || !mountedRef.current)
+                return;
+            setIsPending(false);
+            setSubmitError(reason);
+        });
+    }
+    return (_jsx(Dialog, { title: title, description: description, open: true, onOpenChange: (next) => {
+            if (!next)
+                close();
+        }, children: _jsxs("form", { onSubmit: handleSubmit, children: [children, submitError != null ? _jsx(ErrorState, { message: errorMessage(submitError) }) : null, _jsxs("div", { className: "tai-dialog-actions", children: [_jsx(Button, { type: "button", onClick: close, children: cancelLabel }), _jsxs(Button, { type: "submit", variant: submitVariant, disabled: isPending || submitDisabled, children: [isPending ? _jsx(Spinner, { label: pendingLabel }) : null, submitLabel] })] })] }) }));
+}
+//# sourceMappingURL=form-dialog.js.map

package/dist/components/form-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.js","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AA+BzC,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,SAAS,EACzB,WAAW,GAAG,QAAQ,EACtB,QAAQ,GACQ;IAChB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC9D,oFAAoF;IACpF,0EAA0E;IAC1E,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,mFAAmF;IACnF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,KAAK;QACZ,IAAI,SAAS,CAAC,OAAO;YAAE,OAAO;QAC9B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,SAAS,YAAY,CAAC,KAAsC;QAC1D,kEAAkE;QAClE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,mFAAmF;QACnF,qCAAqC;QACrC,IAAI,SAAS,IAAI,cAAc;YAAE,OAAO;QACxC,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,mFAAmF;QACnF,0DAA0D;QAC1D,OAAO,CAAC,OAAO,EAAE;aACd,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;aACtB,IAAI,CACH,GAAG,EAAE;YACH,oFAAoF;YACpF,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO;gBAAE,OAAO;YACrD,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,KAAK,EAAE,CAAC;QACV,CAAC,EACD,CAAC,MAAe,EAAE,EAAE;YAClB,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO;gBAAE,OAAO;YACrD,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,cAAc,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC,CACF,CAAC;IACN,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,QACJ,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,IAAI;gBAAE,KAAK,EAAE,CAAC;QACrB,CAAC,YAED,gBAAM,QAAQ,EAAE,YAAY,aACzB,QAAQ,EACR,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,EAChF,eAAK,SAAS,EAAC,oBAAoB,aACjC,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,YACjC,WAAW,GACL,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,IAAI,cAAc,aAChF,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,EACnD,WAAW,IACL,IACL,IACD,GACA,CACV,CAAC;AACJ,CAAC"}

package/dist/components/json-tree.d.ts

@@ -1,8 +1,14 @@
+import type { ReactElement } from 'react';
 export interface JsonTreeProps {
     readonly data: unknown;
+    /**
+     * Opts the whole tree out of the depth-guarded default: `true` expands every
+     * node (up to the depth cap), `false` collapses to the root. Omitted, the tree
+     * opens through {@link AUTO_EXPAND_DEPTH} and collapses everything below.
+     */
     readonly defaultExpanded?: boolean;
     /** The region's accessible name, applied only while the pane actually scrolls. */
     readonly label?: string;
 }
-export declare function JsonTree({ data, defaultExpanded, label }: JsonTreeProps): import("react").JSX.Element;
+export declare function JsonTree({ data, defaultExpanded, label }: JsonTreeProps): ReactElement;
 //# sourceMappingURL=json-tree.d.ts.map

package/dist/components/json-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-tree.d.ts","sourceRoot":"","sources":["../../src/components/json-tree.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,kFAAkF;IAClF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AA8FD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAsB,EAAE,KAAK,EAAE,EAAE,aAAa,+BAU9E"}
+{"version":3,"file":"json-tree.d.ts","sourceRoot":"","sources":["../../src/components/json-tree.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAgD,YAAY,EAAE,MAAM,OAAO,CAAC;AAMxF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,kFAAkF;IAClF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AA2aD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,aAAa,GAAG,YAAY,CA2FtF"}

package/dist/components/json-tree.js

@@ -1,10 +1,65 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `JsonTree` — a collapsible viewer for arbitrary JSON on the design system's
+ * terminal ground (`tai-code-block`). Objects and arrays are native
+ * `<details>`/`<summary>` disclosures; primitives render inline, tinted by their
+ * `tai-syntax-*` type class. All values render as React TEXT children, so markup in
+ * a payload is escaped — never an HTML sink.
+ *
+ * It mounts against guaranteed-large payloads (a trace span's whole input/output),
+ * so it is BOUNDED by construction:
+ *
+ * - Nodes deeper than {@link AUTO_EXPAND_DEPTH} start COLLAPSED, and a collapsed node
+ *   renders no children. `defaultExpanded` overrides per call site.
+ * - Expand-all opens breadth-first only until {@link AUTO_EXPAND_NODE_BUDGET} nodes
+ *   render and never past {@link MAX_AUTO_DEPTH}; a node beyond either opens on click.
+ * - A container over {@link PAGE_SIZE} children renders one page plus a "show more".
+ * - Copy-whole and copy-node write JSON to the clipboard; a refused write shows an alert.
+ *
+ * The scrolling pane IS the scrolling box, carrying the region attributes itself
+ * rather than nesting a `ScrollRegion` that would add a second scroller.
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { CheckIcon, CopyIcon, XCircleIcon } from './icons';
 import { useOverflowRegion } from './scroll-region';
+import { COPIED_LABEL, COPIED_RESET_MS, useClipboardCopy } from '../hooks/useClipboardCopy';
 /** The region's name when the caller supplies none. */
 const DEFAULT_LABEL = 'JSON';
+/** The deepest level opened by the guarded default; deeper nodes start collapsed. */
+const AUTO_EXPAND_DEPTH = 1;
+/**
+ * The deepest level EXPAND-ALL reaches. Past it a node opens only on an explicit
+ * click, so the one action that opens the whole tree still cannot force an
+ * unbounded-depth payload into the DOM in a single stroke.
+ */
+const MAX_AUTO_DEPTH = 6;
+/** Children rendered per page; the rest wait behind a "show more" control. */
+const PAGE_SIZE = 100;
+/**
+ * The most rendered nodes EXPAND-ALL may auto-open in one stroke. The depth cap and
+ * the per-page limit each bound ONE dimension, but a payload that is wide AND deep
+ * multiplies them — auto-opening every node up to the cap would lay out on the order
+ * of PAGE_SIZE^depth nodes and freeze the tab. Expand-all instead opens containers
+ * breadth-first only until this budget is spent; a node past it stays collapsed and
+ * opens on an explicit click, so a huge payload opens a bounded, usable subset.
+ */
+const AUTO_EXPAND_NODE_BUDGET = 1500;
+/** A copy control's resting face; whichever is exposed is also its accessible name. */
+const COPY_LABEL = 'Copy';
+/** Shown when the browser offers no clipboard at all (any non-secure context). */
+const NO_CLIPBOARD = 'This browser will not write to the clipboard here. Select the value and copy it by hand.';
+/** Shown when the write, or the value's serialization, is offered and refused. */
+function copyFailed(reason) {
+    const detail = reason instanceof Error ? reason.message : String(reason);
+    return `Copy failed: ${detail}.`;
+}
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
+/** Whether a value is a disclosure (object or array) rather than a leaf. */
+function isContainer(value) {
+    return Array.isArray(value) || isRecord(value);
+}
 function primitiveText(value) {
     if (value === null)
         return 'null';
@@ -25,6 +80,100 @@ function primitiveText(value) {
             return '[object]';
     }
 }
+/**
+ * `JSON.stringify` is TYPED to always return `string`, but a value it cannot
+ * represent (a function, a bare `undefined`) yields `undefined` at runtime. This
+ * boundary admits the absence the standard-library overload denies, so the guard
+ * below is a real check rather than a cast around one.
+ */
+function stringifyJson(value) {
+    return JSON.stringify(value, null, 2);
+}
+/**
+ * The value's pretty JSON for the clipboard. A value JSON cannot represent (a
+ * function, a bare `undefined`) has no JSON, so its readable form is copied
+ * rather than an empty string. A value JSON REFUSES (a `bigint`) throws here, and
+ * the caller renders that as the same visible alert a blocked write is.
+ */
+function serializeForCopy(value) {
+    return stringifyJson(value) ?? String(value);
+}
+/**
+ * A child's identity for the open-state map. Each segment is percent-encoded, so a
+ * key that itself contains the separator cannot collide with a different path.
+ */
+function childPath(parent, name) {
+    const segment = encodeURIComponent(name);
+    return parent === '' ? segment : `${parent}/${segment}`;
+}
+function initialBaseline(defaultExpanded) {
+    if (defaultExpanded === true)
+        return 'expanded';
+    if (defaultExpanded === false)
+        return 'collapsed';
+    return 'depth';
+}
+/**
+ * The set of paths EXPAND-ALL auto-opens: a breadth-first sweep that opens each
+ * container in turn — spending its visible child count against a shared node budget
+ * and enqueuing that page's own container children — skipping any node whose page
+ * would overspend {@link AUTO_EXPAND_NODE_BUDGET} or that sits past {@link MAX_AUTO_DEPTH}.
+ * Only a bounded window of a huge payload is materialized, so this stays cheap even
+ * when the data is enormous; the paths it omits stay collapsed and open on a click.
+ */
+function expandedOpenPaths(root) {
+    const open = new Set();
+    if (!isContainer(root))
+        return open;
+    let budget = AUTO_EXPAND_NODE_BUDGET;
+    const queue = [
+        { value: root, path: '', depth: 0 },
+    ];
+    while (queue.length > 0) {
+        const node = queue.shift();
+        if (node === undefined)
+            break;
+        if (node.depth >= MAX_AUTO_DEPTH)
+            continue;
+        const shown = Math.min(PAGE_SIZE, containerCount(node.value));
+        // Skip when the budget can't seat a whole page (a later, smaller node may still fit).
+        if (shown > budget)
+            continue;
+        budget -= shown;
+        open.add(node.path);
+        for (const [name, childValue] of sliceEntries(node.value, shown)) {
+            if (isContainer(childValue)) {
+                queue.push({ value: childValue, path: childPath(node.path, name), depth: node.depth + 1 });
+            }
+        }
+    }
+    return open;
+}
+/**
+ * Whether a node is open, from the baseline and the reader's own toggles. An
+ * explicit toggle always wins; otherwise the baseline decides — the depth-guarded
+ * default opens through {@link AUTO_EXPAND_DEPTH}, expand-all opens the budgeted
+ * breadth-first set, collapse-all opens nothing.
+ */
+function computeOpen(baseline, overrides, expandedPaths, path, depth) {
+    const override = overrides.get(path);
+    if (override !== undefined)
+        return override;
+    if (baseline === 'expanded')
+        return expandedPaths?.has(path) ?? false;
+    if (baseline === 'collapsed')
+        return false;
+    return depth <= AUTO_EXPAND_DEPTH;
+}
+const JsonTreeContext = createContext(null);
+/** The shared tree state; a subcomponent outside a `JsonTree` is a wiring error. */
+function useJsonTreeContext() {
+    const context = useContext(JsonTreeContext);
+    if (context === null) {
+        throw new Error('JsonTree subcomponents must be rendered inside a JsonTree.');
+    }
+    return context;
+}
 /**
  * One nesting level's indent: the child block insets and draws its own guide
  * rail. The depth is expressed by the DOM nesting, so each level repeats this
@@ -36,7 +185,24 @@ const childrenStyle = {
     borderLeft: '1px solid var(--tai-color-decor)',
 };
 /** A `<summary>` is a click target; browsers do not style it as one by default. */
-const summaryStyle = { cursor: 'pointer' };
+const summaryStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--tai-space-2)',
+    cursor: 'pointer',
+};
+/** The copy control sits at the far end of a disclosure's row. */
+const nodeCopyStyle = { marginLeft: 'auto' };
+/**
+ * The per-node copy button's geometry: borrows `tai-icon-btn` for the focus ring,
+ * muted ink and hover, then shrinks to the code rhythm so the row stays dense.
+ */
+const nodeCopyButtonStyle = {
+    width: 'auto',
+    height: 'auto',
+    padding: 'var(--tai-space-1)',
+};
+const showMoreStyle = { marginTop: 'var(--tai-space-1)' };
 /** The syntax class for a primitive's type; anything outside JSON reads as muted. */
 function primitiveClass(value) {
     if (typeof value === 'string')
@@ -49,22 +215,143 @@ function primitiveClass(value) {
         return 'tai-syntax-null';
     return 'tai-muted';
 }
-function JsonNode({ name, value, defaultExpanded }) {
-    if (Array.isArray(value) || isRecord(value)) {
-        const entries = Array.isArray(value)
-            ? value.map((item, index) => [String(index), item])
-            : Object.entries(value);
-        const summary = Array.isArray(value)
-            ? `Array(${String(value.length)})`
-            : `Object(${String(entries.length)})`;
-        return (_jsxs("details", { open: defaultExpanded, children: [_jsxs("summary", { style: summaryStyle, children: [name !== undefined ? _jsxs("span", { className: "tai-syntax-key", children: [name, ": "] }) : null, _jsx("span", { className: "tai-muted", children: summary })] }), _jsx("div", { style: childrenStyle, children: entries.map(([childName, childValue]) => (_jsx(JsonNode, { name: childName, value: childValue, defaultExpanded: defaultExpanded }, childName))) })] }));
+/**
+ * A copy control that writes its value to the clipboard and shows a transient
+ * confirmed state. The write itself lives on the tree context, so a refusal is
+ * reported ONCE — as the tree's shared alert — rather than inline at each of the
+ * many buttons a large payload carries.
+ */
+function CopyButton({ value, label, variant }) {
+    const { copy } = useJsonTreeContext();
+    const [copied, setCopied] = useState(false);
+    const resetTimer = useRef(null);
+    // The write is async, so a copy can be in flight when the button unmounts (a dialog
+    // holding the tree closes on the same click); checked before the resolution sets state.
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            if (resetTimer.current !== null)
+                clearTimeout(resetTimer.current);
+        };
+    }, []);
+    const handleClick = (event) => {
+        // Inside a `<summary>` a click both toggles the disclosure natively and reaches
+        // the summary's own toggle handler; neither should fire for a copy.
+        event.preventDefault();
+        event.stopPropagation();
+        void copy(value).then((ok) => {
+            if (!ok || !mounted.current)
+                return;
+            setCopied(true);
+            if (resetTimer.current !== null)
+                clearTimeout(resetTimer.current);
+            resetTimer.current = setTimeout(() => {
+                if (mounted.current)
+                    setCopied(false);
+            }, COPIED_RESET_MS);
+        });
+    };
+    if (variant === 'text') {
+        return (_jsxs("button", { type: "button", className: "tai-btn tai-btn-ghost", onClick: handleClick, children: [copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}), copied ? COPIED_LABEL : label] }));
+    }
+    return (_jsx("button", { type: "button", className: "tai-icon-btn", style: { ...nodeCopyStyle, ...nodeCopyButtonStyle }, "aria-label": copied ? COPIED_LABEL : label, onClick: handleClick, children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }));
+}
+/** A container's child count, without materializing its entries. */
+function containerCount(value) {
+    if (Array.isArray(value))
+        return value.length;
+    if (isRecord(value))
+        return Object.keys(value).length;
+    throw new Error('containerCount expects an array or a record.');
+}
+/**
+ * The first `end` entries of a container, arrays keyed by index and objects by
+ * key. Only the visible window is materialized, so a million-element array's
+ * children never all exist at once.
+ */
+function sliceEntries(value, end) {
+    if (Array.isArray(value)) {
+        return value.slice(0, end).map((item, index) => [String(index), item]);
+    }
+    // Slice the keys before reading values, so only the visible window is materialized.
+    if (isRecord(value))
+        return Object.keys(value)
+            .slice(0, end)
+            .map((key) => [key, value[key]]);
+    throw new Error('sliceEntries expects an array or a record.');
+}
+/** One container's summary text: its kind and its child count. */
+function containerSummary(value, count) {
+    return Array.isArray(value) ? `Array(${String(count)})` : `Object(${String(count)})`;
+}
+/**
+ * The visible slice of a container's children, plus a "show more" control while
+ * any remain. Rendered ONLY when the node is open, so a collapsed container costs
+ * nothing and the page count follows how far the reader has opened it.
+ */
+function NodeChildren({ value, count, depth, path, }) {
+    const { pageSize } = useJsonTreeContext();
+    const [visible, setVisible] = useState(pageSize);
+    const shownCount = Math.min(visible, count);
+    const shown = sliceEntries(value, shownCount);
+    const remaining = count - shownCount;
+    return (_jsxs("div", { style: childrenStyle, children: [shown.map(([childName, childValue]) => (_jsx(JsonNode, { name: childName, value: childValue, depth: depth + 1, path: childPath(path, childName) }, childName))), remaining > 0 ? (_jsxs("button", { type: "button", className: "tai-btn tai-btn-ghost", style: showMoreStyle, onClick: () => {
+                    setVisible((current) => current + pageSize);
+                }, children: ["Show ", String(Math.min(remaining, pageSize)), " more"] })) : null] }));
+}
+function JsonNode({ name, value, depth, path }) {
+    const { isOpen, setOpen } = useJsonTreeContext();
+    if (isContainer(value)) {
+        const count = containerCount(value);
+        const open = isOpen(path, depth);
+        const summary = containerSummary(value, count);
+        const handleToggle = (event) => {
+            // The disclosure is state-driven: cancel the browser's own toggle so the two
+            // never diverge, then record the reader's intent.
+            event.preventDefault();
+            setOpen(path, !open);
+        };
+        return (_jsxs("details", { open: open, children: [_jsxs("summary", { style: summaryStyle, onClick: handleToggle, children: [name !== undefined ? _jsxs("span", { className: "tai-syntax-key", children: [name, ": "] }) : null, _jsx("span", { className: "tai-muted", children: summary }), depth > 0 ? (_jsx(CopyButton, { value: value, variant: "icon", label: name !== undefined ? `Copy ${name}` : COPY_LABEL })) : null] }), open ? _jsx(NodeChildren, { value: value, count: count, depth: depth, path: path }) : null] }));
     }
     return (_jsxs("div", { children: [name !== undefined ? _jsxs("span", { className: "tai-syntax-key", children: [name, ": "] }) : null, _jsx("span", { className: primitiveClass(value), children: primitiveText(value) })] }));
 }
-export function JsonTree({ data, defaultExpanded = true, label }) {
+export function JsonTree({ data, defaultExpanded, label }) {
+    const [baseline, setBaseline] = useState(() => initialBaseline(defaultExpanded));
+    const [overrides, setOverrides] = useState(() => new Map());
+    const { error: copyError, announcement, copy: copyText, } = useClipboardCopy({
+        noClipboard: NO_CLIPBOARD,
+        writeFailed: copyFailed,
+    });
     // No consumer ref: the measurement's own callback ref is the only thing that
     // needs the pane, and this component publishes no `ref` prop.
     const region = useOverflowRegion(undefined, label ?? DEFAULT_LABEL);
-    return (_jsx("div", { className: "tai-code-block", ...region, children: _jsx(JsonNode, { value: data, defaultExpanded: defaultExpanded }) }));
+    // Expand-all's open set is a function of the data alone, and it is consulted only
+    // while that baseline is active; deriving it lazily keeps a collapsed or
+    // depth-default tree from sweeping the payload at all.
+    const expandedPaths = useMemo(() => (baseline === 'expanded' ? expandedOpenPaths(data) : null), [baseline, data]);
+    const isOpen = useCallback((path, depth) => computeOpen(baseline, overrides, expandedPaths, path, depth), [baseline, overrides, expandedPaths]);
+    const setOpen = useCallback((path, open) => {
+        setOverrides((previous) => {
+            const next = new Map(previous);
+            next.set(path, open);
+            return next;
+        });
+    }, []);
+    // The value's JSON is produced lazily inside the write, so a value JSON refuses
+    // (a `bigint`) surfaces as the same visible alert a blocked write does.
+    const copy = useCallback((value) => copyText(() => serializeForCopy(value)), [copyText]);
+    const context = useMemo(() => ({ isOpen, setOpen, copy, pageSize: PAGE_SIZE }), [isOpen, setOpen, copy]);
+    const expandAll = () => {
+        setBaseline('expanded');
+        setOverrides(new Map());
+    };
+    const collapseAll = () => {
+        setBaseline('collapsed');
+        setOverrides(new Map());
+    };
+    const showToolbar = isContainer(data);
+    return (_jsx(JsonTreeContext.Provider, { value: context, children: _jsxs("div", { className: "tai-stack tai-stack-2", children: [showToolbar ? (_jsxs("div", { className: "tai-row", children: [_jsx("button", { type: "button", className: "tai-btn tai-btn-ghost", onClick: expandAll, children: "Expand all" }), _jsx("button", { type: "button", className: "tai-btn tai-btn-ghost", onClick: collapseAll, children: "Collapse all" }), _jsx(CopyButton, { value: data, variant: "text", label: COPY_LABEL }), _jsx("span", { "aria-live": "polite", className: "tai-visually-hidden", children: announcement })] })) : null, copyError !== undefined ? (_jsxs("span", { role: "alert", className: "tai-field-error", children: [_jsx(XCircleIcon, {}), copyError] })) : null, _jsx("div", { className: "tai-code-block", ...region, children: _jsx(JsonNode, { value: data, depth: 0, path: "" }) })] }) }));
 }
 //# sourceMappingURL=json-tree.js.map