@jini-ai/admin 0.3.9 → 0.4.0

package/dist/playground/react/index.d.ts

@@ -0,0 +1,136 @@
+export { usePlaygroundPorts } from './hooks/PlaygroundPorts.hooks.js';
+export declare function playground(_required: Record<string, never>, _optional?: {}): {
+    id: "playground";
+    requires: {
+        readonly playgroundTargets: import("../../core/module/token.js").AdminPortToken<import("../../contracts/playground-render-target.js").PlaygroundRenderTargetPort, "admin.playground.render-target">;
+    };
+    messages: Readonly<{
+        title: "Playground";
+        studio: "Studio";
+        canvas: "Canvas";
+        description: "Ask the assistant to build anything — try “Show a pie chart of my data.”";
+        empty: "Nothing drawn yet — ask the assistant.";
+        denied: "Permission denied";
+    }>;
+    pages: {
+        readonly playground: {
+            readonly path: "/playground";
+            readonly label: "Playground";
+            readonly permissions: readonly ["playground.read"];
+            readonly nav: {
+                readonly group: "studio";
+                readonly icon: "canvas";
+            };
+            readonly tabs: {
+                readonly canvas: {
+                    readonly label: "Canvas";
+                };
+            };
+        };
+    };
+} & {
+    react: {
+        module: {
+            id: "playground";
+            requires: {
+                readonly playgroundTargets: import("../../core/module/token.js").AdminPortToken<import("../../contracts/playground-render-target.js").PlaygroundRenderTargetPort, "admin.playground.render-target">;
+            };
+            messages: Readonly<{
+                title: "Playground";
+                studio: "Studio";
+                canvas: "Canvas";
+                description: "Ask the assistant to build anything — try “Show a pie chart of my data.”";
+                empty: "Nothing drawn yet — ask the assistant.";
+                denied: "Permission denied";
+            }>;
+            pages: {
+                readonly playground: {
+                    readonly path: "/playground";
+                    readonly label: "Playground";
+                    readonly permissions: readonly ["playground.read"];
+                    readonly nav: {
+                        readonly group: "studio";
+                        readonly icon: "canvas";
+                    };
+                    readonly tabs: {
+                        readonly canvas: {
+                            readonly label: "Canvas";
+                        };
+                    };
+                };
+            };
+        };
+        pages: {
+            readonly playground: {
+                Page: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").ModulePageProps>>;
+                tabs: {
+                    readonly canvas: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").TabViewProps>>;
+                };
+            };
+        };
+        Provider: ({ admin, children }: {
+            admin: import("../../core/module/types.js").AdminInstance;
+            children: import("react").ReactNode;
+        }, _optional?: Record<string, never>) => import("react").FunctionComponentElement<import("react").ProviderProps<import("../../core/module/types.js").ScopedPorts<{
+            id: "playground";
+            requires: {
+                readonly playgroundTargets: import("../../core/module/token.js").AdminPortToken<import("../../contracts/playground-render-target.js").PlaygroundRenderTargetPort, "admin.playground.render-target">;
+            };
+            messages: Readonly<{
+                title: "Playground";
+                studio: "Studio";
+                canvas: "Canvas";
+                description: "Ask the assistant to build anything — try “Show a pie chart of my data.”";
+                empty: "Nothing drawn yet — ask the assistant.";
+                denied: "Permission denied";
+            }>;
+            pages: {
+                readonly playground: {
+                    readonly path: "/playground";
+                    readonly label: "Playground";
+                    readonly permissions: readonly ["playground.read"];
+                    readonly nav: {
+                        readonly group: "studio";
+                        readonly icon: "canvas";
+                    };
+                    readonly tabs: {
+                        readonly canvas: {
+                            readonly label: "Canvas";
+                        };
+                    };
+                };
+            };
+        }> | null>>;
+        usePorts: (_required?: Record<string, never>, _optional?: Record<string, never>) => import("../../core/module/types.js").ScopedPorts<{
+            id: "playground";
+            requires: {
+                readonly playgroundTargets: import("../../core/module/token.js").AdminPortToken<import("../../contracts/playground-render-target.js").PlaygroundRenderTargetPort, "admin.playground.render-target">;
+            };
+            messages: Readonly<{
+                title: "Playground";
+                studio: "Studio";
+                canvas: "Canvas";
+                description: "Ask the assistant to build anything — try “Show a pie chart of my data.”";
+                empty: "Nothing drawn yet — ask the assistant.";
+                denied: "Permission denied";
+            }>;
+            pages: {
+                readonly playground: {
+                    readonly path: "/playground";
+                    readonly label: "Playground";
+                    readonly permissions: readonly ["playground.read"];
+                    readonly nav: {
+                        readonly group: "studio";
+                        readonly icon: "canvas";
+                    };
+                    readonly tabs: {
+                        readonly canvas: {
+                            readonly label: "Canvas";
+                        };
+                    };
+                };
+            };
+        }>;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/playground/react/index.js

@@ -0,0 +1,10 @@
+import { bindReact } from '../../react/bind-react.js';
+import { playgroundModule } from '../playground.module.js';
+import { PlaygroundPortsContext } from './hooks/PlaygroundPorts.hooks.js';
+export { usePlaygroundPorts } from './hooks/PlaygroundPorts.hooks.js';
+export function playground(_required, _optional = {}) {
+    const module = { ...playgroundModule };
+    const react = bindReact({ module, views: { playground: { page: () => import('./pages/PlaygroundPage.js'), tabs: { canvas: () => import('./tabs/CanvasTab.js') } } } }, { context: PlaygroundPortsContext });
+    return Object.assign(module, { react });
+}
+//# sourceMappingURL=index.js.map

package/dist/playground/react/pages/PlaygroundPage.d.ts

@@ -0,0 +1,4 @@
+import type { ModulePageProps } from '../../../react/bind-react.js';
+export declare function PlaygroundPage(props: ModulePageProps, _optional?: {}): import("react").JSX.Element;
+export default PlaygroundPage;
+//# sourceMappingURL=PlaygroundPage.d.ts.map

package/dist/playground/react/pages/PlaygroundPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { Notice, Spinner } from '@jini-ai/ui-kit/react';
+import { usePlaygroundPage } from '../hooks/PlaygroundPage.hooks.js';
+import { playgroundMessagesEn as m } from '../../messages.en.js';
+export function PlaygroundPage(props, _optional = {}) {
+    const vm = usePlaygroundPage(props);
+    return _jsxs("section", { "data-jini-part": "playground.page", children: [_jsx("p", { children: m.studio }), _jsx("h1", { children: props.description.label }), vm.denied ? _jsx(Notice, { tone: "danger", children: m.denied }) : _jsxs(_Fragment, { children: [_jsx("p", { children: m.description }), _jsx(Suspense, { fallback: _jsx(Spinner, { label: "Loading canvas\u2026" }), children: vm.ActiveTab && _jsx(vm.ActiveTab, { params: vm.params, permissions: vm.permissions }) })] })] });
+}
+export default PlaygroundPage;
+//# sourceMappingURL=PlaygroundPage.js.map

package/dist/playground/react/tabs/CanvasTab.d.ts

@@ -0,0 +1,4 @@
+import type { TabViewProps } from '../../../react/bind-react.js';
+export declare function CanvasTab(props: TabViewProps, _optional?: {}): import("react").JSX.Element;
+export default CanvasTab;
+//# sourceMappingURL=CanvasTab.d.ts.map

package/dist/playground/react/tabs/CanvasTab.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Canvas } from '../components/Canvas.js';
+export function CanvasTab(props, _optional = {}) { return _jsx(Canvas, { ...props }); }
+export default CanvasTab;
+//# sourceMappingURL=CanvasTab.js.map

package/dist/playground/rules.d.ts

@@ -0,0 +1,4 @@
+export declare function canMountPlayground({ permissions }: {
+    permissions: readonly string[];
+}, _optional?: {}): boolean;
+//# sourceMappingURL=rules.d.ts.map

package/dist/playground/rules.js

@@ -0,0 +1,2 @@
+export function canMountPlayground({ permissions }, _optional = {}) { return permissions.includes('playground.read'); }
+//# sourceMappingURL=rules.js.map

package/dist/react/OverlayHost.d.ts

@@ -0,0 +1,3 @@
+import type { OverlayHostProps } from './OverlayHost.hooks.js';
+export declare function OverlayHost(props: OverlayHostProps, _optional?: Record<string, never>): import("react").JSX.Element;
+//# sourceMappingURL=OverlayHost.d.ts.map

package/dist/react/OverlayHost.hooks.d.ts

@@ -0,0 +1,9 @@
+import type { createOverlayController } from './overlays.js';
+export interface OverlayHostProps {
+    readonly controller: ReturnType<typeof createOverlayController>;
+}
+export declare function useOverlayHost({ controller }: OverlayHostProps, _optional?: Record<string, never>): {
+    id: number;
+    content: import("react").ReactNode;
+}[];
+//# sourceMappingURL=OverlayHost.hooks.d.ts.map

package/dist/react/OverlayHost.hooks.js

@@ -0,0 +1,9 @@
+import { useSyncExternalStore, useEffect, useCallback } from 'react';
+export function useOverlayHost({ controller }, _optional = {}) {
+    const subscribe = useCallback((listener) => controller.subscribe({ listener }), [controller]);
+    const snapshot = useSyncExternalStore(subscribe, controller.getSnapshot, controller.getSnapshot);
+    // Host unmount cancels a waiting service call but keeps the controller replay-safe.
+    useEffect(() => () => controller.cancel(), [controller]);
+    return snapshot.entries.map((entry) => ({ id: entry.id, content: entry.render() }));
+}
+//# sourceMappingURL=OverlayHost.hooks.js.map

package/dist/react/OverlayHost.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useOverlayHost } from './OverlayHost.hooks.js';
+export function OverlayHost(props, _optional = {}) {
+    const entries = useOverlayHost(props);
+    return (_jsx("div", { "data-jini-part": "admin.overlays", children: entries.map((entry) => (_jsx("div", { children: entry.content }, entry.id))) }));
+}
+//# sourceMappingURL=OverlayHost.js.map

package/dist/react/bind-react.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentType, ReactNode, LazyExoticComponent, Context as ReactContext } from 'react';
+import type { AdminInstance, AdminModule, ScopedPorts } from '../core/module/types.js';
+export interface TabViewProps {
+    readonly params: Readonly<Record<string, unknown>>;
+    readonly permissions?: readonly string[];
+}
+export interface ModulePageProps {
+    readonly tabs: Readonly<Record<string, LazyExoticComponent<ComponentType<TabViewProps>>>>;
+    readonly description: ReturnType<AdminInstance['describe']>['pages'][number];
+    readonly requestedTab?: string;
+    readonly onTabChange?: (required: {
+        tab: string;
+    }, optional?: Record<string, never>) => void;
+}
+type Loader<P> = () => Promise<{
+    default: ComponentType<P>;
+}>;
+export type ReactViews<M extends AdminModule> = {
+    readonly [P in keyof M['pages']]: {
+        readonly page: Loader<ModulePageProps>;
+        readonly tabs: {
+            readonly [T in keyof M['pages'][P]['tabs']]: Loader<TabViewProps>;
+        };
+    };
+};
+/** Every page and tab is lazy. The only port context is private to this binding;
+ * a sibling module can never read another module's dependencies through a global locator. */
+export declare function bindReact<const M extends AdminModule>({ module, views }: {
+    module: M;
+    views: ReactViews<M>;
+}, { context }?: {
+    context?: ReactContext<ScopedPorts<M> | null>;
+}): {
+    module: M;
+    pages: { [P in keyof M["pages"]]: {
+        Page: LazyExoticComponent<ComponentType<ModulePageProps>>;
+        tabs: { [T in keyof M["pages"][P]["tabs"]]: LazyExoticComponent<ComponentType<TabViewProps>>; };
+    }; };
+    Provider: ({ admin, children }: {
+        admin: AdminInstance;
+        children: ReactNode;
+    }, _optional?: Record<string, never>) => import("react").FunctionComponentElement<import("react").ProviderProps<ScopedPorts<M> | null>>;
+    usePorts: (_required?: Record<string, never>, _optional?: Record<string, never>) => ScopedPorts<M>;
+};
+export {};
+//# sourceMappingURL=bind-react.d.ts.map

package/dist/react/bind-react.js

@@ -0,0 +1,28 @@
+import { createContext, createElement, lazy, useContext } from 'react';
+import { AdminConfigError } from '../core/module/create-admin.js';
+/** Every page and tab is lazy. The only port context is private to this binding;
+ * a sibling module can never read another module's dependencies through a global locator. */
+export function bindReact({ module, views }, { context } = {}) {
+    const Context = context ?? createContext(null);
+    const pages = Object.fromEntries(Object.entries(views).map(([id, raw]) => {
+        const view = raw;
+        return [
+            id,
+            {
+                Page: lazy(view.page),
+                tabs: Object.fromEntries(Object.entries(view.tabs).map(([tab, load]) => [tab, lazy(load)])),
+            },
+        ];
+    }));
+    function usePorts(_required = {}, _optional = {}) {
+        const ports = useContext(Context);
+        if (!ports)
+            throw new AdminConfigError({ issues: [`React scope unavailable: ${module.id}`] });
+        return ports;
+    }
+    function Provider({ admin, children }, _optional = {}) {
+        return createElement(Context.Provider, { value: admin.scope({ module }) }, children);
+    }
+    return { module, pages, Provider, usePorts };
+}
+//# sourceMappingURL=bind-react.js.map

package/dist/react/components/ConfirmButton/ConfirmButton.hooks.d.ts

@@ -13,7 +13,13 @@
  * @complexity O(1) per render/interaction. The two document-level listeners are attached only while
  * armed, not for the component's whole mounted lifetime.
  */
-export declare function useConfirmButton(pending: boolean | undefined, disabled: boolean | undefined, onConfirm: () => void): {
+export declare function useConfirmButton({ onConfirm, document }: {
+    readonly onConfirm: () => void;
+    readonly document: Pick<Document, 'addEventListener' | 'removeEventListener'>;
+}, { pending, disabled }?: {
+    readonly pending?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}): {
     confirming: boolean;
     buttonRef: import("react").RefObject<HTMLButtonElement | null>;
     handleClick: () => void;

package/dist/react/components/ConfirmButton/ConfirmButton.hooks.js

@@ -14,7 +14,7 @@ import { useEffect, useRef, useState } from 'react';
  * @complexity O(1) per render/interaction. The two document-level listeners are attached only while
  * armed, not for the component's whole mounted lifetime.
  */
-export function useConfirmButton(pending, disabled, onConfirm) {
+export function useConfirmButton({ onConfirm, document }, { pending, disabled } = {}) {
     const [confirming, setConfirming] = useState(false);
     const buttonRef = useRef(null);
     // Listeners are scoped to the armed window only — an idle (disarmed) ConfirmButton costs nothing
@@ -40,7 +40,7 @@ export function useConfirmButton(pending, disabled, onConfirm) {
             document.removeEventListener('mousedown', onDocMouseDown);
             document.removeEventListener('keydown', onKeyDown);
         };
-    }, [confirming]);
+    }, [confirming, document]);
     function handleClick() {
         if (pending || disabled)
             return;

package/dist/react/components/ConfirmButton/ConfirmButton.js

@@ -28,7 +28,7 @@ const DEFAULT_PENDING_LABEL = '…';
  * defaulted to the real implementation, so a test can supply a fake without mocking modules).
  */
 export function ConfirmButton({ useConfirmButton: useConfirmButtonState = useConfirmButton, ...props }) {
-    const { confirming, buttonRef, handleClick, handleBlur } = useConfirmButtonState(props.pending, props.disabled, props.onConfirm);
+    const { confirming, buttonRef, handleClick, handleBlur } = useConfirmButtonState({ onConfirm: props.onConfirm, document }, { pending: props.pending, disabled: props.disabled });
     const label = props.pending
         ? (props.pendingLabel ?? DEFAULT_PENDING_LABEL)
         : confirming

package/dist/react/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -22,8 +22,15 @@ import { type UseConfirmDialog } from './ConfirmDialog.hooks.js';
  *
  * | element | handle | role |
  * |---|---|---|
- * | the confirm action | `delete-role-confirm` | `button` |
  * | the cancel/dismiss action | `delete-role-cancel` | `button` |
+ * | the confirm action, unless the caller opts out with `agentMayConfirm={false}` | `delete-role-confirm` | `button` |
+ *
+ * The confirm action is agent-reachable by default, same as every other published control — the
+ * product's standing policy is that the in-page assistant may click buttons, fill forms and confirm
+ * dialogs, with permanently destructive actions gated by a separate in-chat confirmation at the tool
+ * level rather than by hiding the button. A caller whose dialog must stay human-only regardless
+ * (e.g. it guards a secret the assistant must never see or move on its own) opts out explicitly with
+ * `agentMayConfirm={false}`.
  *
  * Both segments are literals this component chooses itself, never host data — unlike `RowMenu`'s
  * per-item keys (arbitrary host strings that can collide after slugifying), `confirm`/`cancel`
@@ -31,7 +38,7 @@ import { type UseConfirmDialog } from './ConfirmDialog.hooks.js';
  * choice of name, and a bad one should fail loudly at first render rather than silently answer to a
  * handle the caller never wrote. Omit `agentHandle` and no `data-agent-*` markup is emitted at all.
  *
- * Both handles are present in the DOM as soon as `agentHandle` is supplied, regardless of `open` —
+ * The published handles are present in the DOM as soon as `agentHandle` is supplied, regardless of `open` —
  * this component stays mounted and toggles the native `<dialog>`'s open state rather than being
  * conditionally rendered by its caller (see `useConfirmDialog`'s doc comment), so there is no
  * "closed" render that omits them, the same reasoning `RowMenu`'s always-visible trigger handle
@@ -77,6 +84,11 @@ export interface ConfirmDialogProps {
     /** This dialog's own agent handle — see this file's "Agent handles" doc comment for the full
      *  scheme. Omit and no `data-agent-*` markup is emitted at all. */
     agentHandle?: string;
+    /** Publishes the confirm action (`<agentHandle>-confirm`) so the assistant can confirm this
+     *  dialog without a human — on by default, matching every other published control. Pass `false`
+     *  only for a dialog that must stay human-only regardless (e.g. it guards a secret). Has no
+     *  effect without `agentHandle`. @default true */
+    agentMayConfirm?: boolean;
 }
 /**
  * Controlled modal confirm — renders the `<dialog>` markup and delegates its open/close and focus
@@ -87,5 +99,5 @@ export interface ConfirmDialogProps {
  * is no browser-assigned "default button" for Enter to reach for at all; confirm can only ever fire
  * from an explicit click or explicit Tab-then-Enter onto it.
  */
-export declare function ConfirmDialog({ useDialog, agentHandle: baseHandle, ...props }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ useDialog, agentHandle: baseHandle, agentMayConfirm, ...props }: ConfirmDialogProps): import("react").JSX.Element;
 //# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/react/components/ConfirmDialog/ConfirmDialog.hooks.d.ts

@@ -32,7 +32,13 @@ export interface ConfirmDialogController {
 }
 /** The signature `ConfirmDialogProps.useDialog` accepts. Any hook matching this can drive the
  *  component; it does not have to be {@link useConfirmDialog}, or even use React state at all. */
-export type UseConfirmDialog = (open: boolean, pending: boolean | undefined, onCancel: () => void) => ConfirmDialogController;
+export type UseConfirmDialog = (requiredArgs: {
+    readonly open: boolean;
+    readonly onCancel: () => void;
+    readonly document: Pick<Document, 'activeElement'>;
+}, optionalArgs?: {
+    readonly pending?: boolean | undefined;
+}) => ConfirmDialogController;
 /**
  * Host-wide defaults every `ConfirmDialog` beneath a {@link ConfirmDialogDefaultsProvider} falls
  * back to when the matching prop is not passed explicitly. Today this is only `cancelLabel` — see
@@ -68,7 +74,9 @@ export declare function ConfirmDialogDefaultsProvider({ children, cancelLabel }:
  * @returns The label to render.
  * @complexity O(1).
  */
-export declare function useConfirmDialogCancelLabel(explicit: string | undefined): string;
+export declare function useConfirmDialogCancelLabel(_requiredArgs: Record<string, never>, { explicit }?: {
+    readonly explicit?: string | undefined;
+}): string;
 /**
  * Owns the `<dialog>` element's open/close lifecycle and focus management for `ConfirmDialog`.
  *
@@ -81,5 +89,11 @@ export declare function useConfirmDialogCancelLabel(explicit: string | undefined
  *
  * @complexity O(1) per open/close transition — one `showModal`/`close` call and one focus move.
  */
-export declare function useConfirmDialog(open: boolean, pending: boolean | undefined, onCancel: () => void): ConfirmDialogController;
+export declare function useConfirmDialog({ open, onCancel, document }: {
+    readonly open: boolean;
+    readonly onCancel: () => void;
+    readonly document: Pick<Document, 'activeElement'>;
+}, { pending }?: {
+    readonly pending?: boolean | undefined;
+}): ConfirmDialogController;
 //# sourceMappingURL=ConfirmDialog.hooks.d.ts.map

package/dist/react/components/ConfirmDialog/ConfirmDialog.hooks.js

@@ -36,7 +36,7 @@ export function ConfirmDialogDefaultsProvider({ children, cancelLabel }) {
  * @returns The label to render.
  * @complexity O(1).
  */
-export function useConfirmDialogCancelLabel(explicit) {
+export function useConfirmDialogCancelLabel(_requiredArgs, { explicit } = {}) {
     const { cancelLabel } = useContext(ConfirmDialogDefaultsContext);
     return explicit ?? cancelLabel ?? DEFAULT_CANCEL_LABEL;
 }
@@ -52,7 +52,7 @@ export function useConfirmDialogCancelLabel(explicit) {
  *
  * @complexity O(1) per open/close transition — one `showModal`/`close` call and one focus move.
  */
-export function useConfirmDialog(open, pending, onCancel) {
+export function useConfirmDialog({ open, onCancel, document }, { pending } = {}) {
     // `useId()`, not a string literal — a hardcoded id breaks the moment a screen mounts two
     // `ConfirmDialog`s at once (a delete-role and a delete-policy confirm on one page, both
     // stay-mounted/toggle-`open` per this hook's own doc comment above): two `<h2>`s share one
@@ -95,7 +95,7 @@ export function useConfirmDialog(open, pending, onCancel) {
             if (triggerRef.current instanceof HTMLElement)
                 triggerRef.current.focus();
         }
-    }, [open]);
+    }, [open, document]);
     function handleNativeCancel(e) {
         // Fires on Escape while a real `showModal()`-opened dialog has focus. Always prevented: the
         // effect above is the single source of truth for open/closed (driven by `open`), so

package/dist/react/components/ConfirmDialog/ConfirmDialog.js

@@ -65,7 +65,7 @@ function confirmDialogCancelLabel(cancelLabel, title) {
  * @complexity O(1).
  */
 function confirmDialogAgentProps(base, action, options) {
-    return base === undefined ? {} : agentHandle(`${base}-${action}`, options);
+    return base === undefined ? {} : agentHandle({ handle: `${base}-${action}` }, options);
 }
 /**
  * Controlled modal confirm — renders the `<dialog>` markup and delegates its open/close and focus
@@ -76,14 +76,14 @@ function confirmDialogAgentProps(base, action, options) {
  * is no browser-assigned "default button" for Enter to reach for at all; confirm can only ever fire
  * from an explicit click or explicit Tab-then-Enter onto it.
  */
-export function ConfirmDialog({ useDialog = useConfirmDialog, agentHandle: baseHandle, ...props }) {
-    const { titleId, dialogRef, cancelRef, handleNativeCancel, handleBackdropClick } = useDialog(props.open, props.pending, props.onCancel);
-    const tone = resolveTone(props);
-    const cancelLabel = useConfirmDialogCancelLabel(props.cancelLabel);
+export function ConfirmDialog({ useDialog = useConfirmDialog, agentHandle: baseHandle, agentMayConfirm = true, ...props }) {
+    const { titleId, dialogRef, cancelRef, handleNativeCancel, handleBackdropClick } = useDialog({ open: props.open, onCancel: props.onCancel, document }, { pending: props.pending });
+    const tone = resolveTone({}, props);
+    const cancelLabel = useConfirmDialogCancelLabel({}, { explicit: props.cancelLabel });
     return (_jsxs("dialog", { ref: dialogRef, className: "confirm-dialog", "aria-labelledby": titleId, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("h2", { id: titleId, children: props.title }), _jsx("div", { className: "confirm-dialog-body", children: props.body }), _jsxs("div", { className: "confirm-dialog-actions", children: [_jsx("button", { ref: cancelRef, type: "button", className: "btn-secondary", disabled: props.pending, onClick: props.onCancel, ...confirmDialogAgentProps(baseHandle, CANCEL_HANDLE_ACTION, {
                             role: 'button',
                             label: confirmDialogCancelLabel(cancelLabel, props.title),
-                        }), children: cancelLabel }), _jsx("button", { type: "button", className: toneClassName(tone), disabled: props.pending, onClick: props.onConfirm, ...confirmDialogAgentProps(baseHandle, CONFIRM_HANDLE_ACTION, {
+                        }), children: cancelLabel }), _jsx("button", { type: "button", className: toneClassName({ tone }), disabled: props.pending, onClick: () => props.onConfirm(), ...confirmDialogAgentProps(agentMayConfirm ? baseHandle : undefined, CONFIRM_HANDLE_ACTION, {
                             role: 'button',
                             label: confirmDialogConfirmLabel(props.confirmLabel, props.title, tone),
                         }), children: props.confirmLabel })] })] }));

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.d.ts

@@ -3,7 +3,9 @@ import { type CanvasEmbedPlaceholderDescriptor, type InteractiveHtmlEditorProps
  *  direct unit-testability without mounting the editor. Uses `hasAttributeOnAnyNodeShape` because
  *  the `isProtectedElement` predicate is invoked from inside GrapesJS's `isComponent` callback,
  *  which is not always called with a real DOM `Element` — see that helper's own doc. */
-export declare function isProtectedEmbedElement(el: Element): boolean;
+export declare function isProtectedEmbedElement({ el }: {
+    readonly el: Element;
+}): boolean;
 /**
  * Recognizes a `data-embed-config` marker (the consuming product's own `src/core/embeds/marker.ts`'s single scanner
  * convention) on a live canvas element and describes it for `@jini-ai/ui/html-editor`'s
@@ -19,7 +21,9 @@ export declare function isProtectedEmbedElement(el: Element): boolean;
  *
  * @complexity O(1) — one attribute read, one `JSON.parse` of a small config object, one table lookup.
  */
-export declare function describeEmbedPlaceholder(el: Element): CanvasEmbedPlaceholderDescriptor | undefined;
+export declare function describeEmbedPlaceholder({ el }: {
+    readonly el: Element;
+}): CanvasEmbedPlaceholderDescriptor | undefined;
 export type InteractiveHtmlEditorProps = Omit<HtmlEditorProps, 'isProtectedElement' | 'describeEmbedPlaceholder'>;
 export declare function InteractiveHtmlEditor(props: InteractiveHtmlEditorProps): import("react").JSX.Element;
 //# sourceMappingURL=InteractiveHtmlEditor.d.ts.map

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.js

@@ -2,14 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { InteractiveHtmlEditor as HtmlEditor, hasAttributeOnAnyNodeShape, } from '@jini-ai/ui/html-editor';
 /**
  * @file Consuming-product-specific composition of `@jini-ai/ui/html-editor`'s generic
- * `InteractiveHtmlEditor`: a Page's `body_html` (the first caller — see the consuming product's own
- * `apps/admin/src/features/pages/PageEditor.tsx`)
+ * `InteractiveHtmlEditor`: a page editor's `body_html`
  * can carry `<div data-embed-type="…" data-embed-id="…"></div>` placeholders (and the legacy
  * `data-widget-embed`/`data-form-embed` attributes on migration-era rows) that a separate scanner
- * (that product's own `src/widgets/html-embeds.ts`) resolves at render time — that scanner requires the div to
+ * in the host resolves at render time — that scanner requires the div to
  * stay exactly empty and self-closing, and degrades silently, with no error, the moment anything is
  * written inside one. The CURRENT convention has since moved to a single `data-embed-config`
- * attribute carrying a JSON payload (that product's own `src/core/embeds/marker.ts`); `isProtectedEmbedElement`
+ * attribute carrying a JSON payload in the host marker schema; `isProtectedEmbedElement`
  * below has not been updated to recognize it (tracked separately — see that function's own doc), but
  * `describeEmbedPlaceholder` below IS built against the current convention, since it only needs to
  * read the marker, not police edits to it.
@@ -35,7 +34,7 @@ const EMBED_MARKER_ATTRIBUTES = ['data-embed-type', 'data-widget-embed', 'data-f
  *  direct unit-testability without mounting the editor. Uses `hasAttributeOnAnyNodeShape` because
  *  the `isProtectedElement` predicate is invoked from inside GrapesJS's `isComponent` callback,
  *  which is not always called with a real DOM `Element` — see that helper's own doc. */
-export function isProtectedEmbedElement(el) {
+export function isProtectedEmbedElement({ el }) {
     return EMBED_MARKER_ATTRIBUTES.some((attr) => hasAttributeOnAnyNodeShape(el, attr));
 }
 /**
@@ -91,7 +90,7 @@ const ID_PREVIEW_LENGTH = 8;
  * otherwise a truncated `id`, otherwise an explicit "nothing was set" note rather than a blank line.
  *
  * **Deliberately does not fetch a human title for a `media` marker.** There is no cheap existing admin
- * route for a single media asset's title by id — `AdminAPI.listMedia()` (`apps/admin/src/lib/api.ts`)
+ * route for a single media asset's title by id — the host's media-list API
  * is the only read, and it returns the ENTIRE workspace's media library, active and trashed, with no
  * id filter or pagination, just to answer one id's `title`. Adding a `GET /media/:id` route is out of
  * this feature's scope (an editor-chrome label is not worth a new server endpoint), and reusing
@@ -124,7 +123,7 @@ function identityLabel(config) {
  *
  * @complexity O(1) — one attribute read, one `JSON.parse` of a small config object, one table lookup.
  */
-export function describeEmbedPlaceholder(el) {
+export function describeEmbedPlaceholder({ el }) {
     const raw = el.getAttribute('data-embed-config');
     if (!raw)
         return undefined;
@@ -144,6 +143,6 @@ export function describeEmbedPlaceholder(el) {
     return { kindLabel: EMBED_KIND_LABELS[type] ?? titleCase(type), identityLabel: identityLabel(config) };
 }
 export function InteractiveHtmlEditor(props) {
-    return (_jsx(HtmlEditor, { ...props, isProtectedElement: isProtectedEmbedElement, describeEmbedPlaceholder: describeEmbedPlaceholder }));
+    return (_jsx(HtmlEditor, { ...props, isProtectedElement: (el) => isProtectedEmbedElement({ el }), describeEmbedPlaceholder: (el) => describeEmbedPlaceholder({ el }) }));
 }
 //# sourceMappingURL=InteractiveHtmlEditor.js.map

package/dist/react/components/RowMenu/RowMenu.d.ts

@@ -5,7 +5,8 @@ import { useRowMenu } from './RowMenu.hooks.js';
  * so a row can grow more actions (Edit, Disable, Delete, …) without widening the table or producing
  * the wall of buttons that pattern turns into.
  *
- * Portaled to `document.body` and positioned with `getBoundingClientRect()` rather than rendered as
+ * Portaled to `document.body` by default (or the host's `portalContainer`) and positioned with
+ * `getBoundingClientRect()` rather than rendered as
  * an in-flow absolutely-positioned child of the trigger — an admin table normally sits inside a
  * horizontal scroller (`overflow-x: auto`), and per the CSS overflow spec, setting either axis to a
  * non-`visible` value forces the *other* axis to compute as `auto` as well, so a menu positioned to
@@ -72,6 +73,9 @@ export interface RowMenuProps {
     /** This row's own agent handle — see this file's "Agent handles" doc comment for the full
      *  scheme. Omit and no `data-agent-*` markup is emitted at all. */
     agentHandle?: string;
+    /** Host-owned popup container, outside the row's clipping scroller. Use a container within
+     *  the page driver's root when its agent must reach menu items. Defaults to `document.body`. */
+    portalContainer?: Element | DocumentFragment;
 }
 export declare function RowMenu({ useRowMenu: useRowMenuState, agentHandle: baseHandle, ...props }: RowMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=RowMenu.d.ts.map

package/dist/react/components/RowMenu/RowMenu.hooks.d.ts

@@ -15,7 +15,11 @@ interface Position {
  * @param itemCount Length of the caller's item list — the only piece of `RowMenuProps` this state
  *   needs, for `ArrowUp`-to-last-item and wraparound navigation.
  */
-export declare function useRowMenu(itemCount: number): {
+export declare function useRowMenu({ itemCount, window, document }: {
+    readonly itemCount: number;
+    readonly window: Pick<Window, 'innerHeight' | 'innerWidth' | 'addEventListener' | 'removeEventListener'>;
+    readonly document: Pick<Document, 'addEventListener' | 'removeEventListener'>;
+}): {
     open: boolean;
     position: Position | null;
     triggerRef: import("react").RefObject<HTMLButtonElement | null>;
@@ -24,7 +28,9 @@ export declare function useRowMenu(itemCount: number): {
     onTriggerClick: () => void;
     onTriggerKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
     onMenuKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
-    selectItem: (onSelect: () => void) => void;
+    selectItem: ({ onSelect }: {
+        readonly onSelect: () => void;
+    }) => void;
 };
 export {};
 //# sourceMappingURL=RowMenu.hooks.d.ts.map