@jini-ai/admin 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.2 — 2026-10-05
+
+- Catalog provider settings: on a host without `saveChanges`, a provider the last read did not return (a catalog-only provider's first key or settings) is now written instead of silently dropped while the tab reported Saved.
+- `RowMenu`: positioning and click-outside are tracked from the menu's callback ref (`trackOpenMenu`); `RowMenuState` is an exported interface and its `menuRef` accepts both callback and object refs. Behavior unchanged.
+- Entity fields: both `Select`s share one `selectTranslate` adapter, so the boolean field's `Select` copy also goes through the host dictionary.
+
 ## 0.4.1 — 2026-10-04
 
 - Media cards show the original file size and upload date (`formatUploadDate` exported from the media barrel); a null size is hidden.
@@ -15,6 +21,9 @@
 
 ## Unreleased
 
+- Media Providers tab on hosts without `saveChanges`: saving the first key or
+  settings of a catalog provider the last read did not return now writes them
+  (previously nothing was written, yet the tab showed "Saved").
 - Fix strict compilation of entity tables and integration/session test fixtures
   with explicit row, deferred-promise and tuple types. Runtime behavior and test
   assertions are unchanged.

package/dist/agent-plugins/react/components/AgentPluginFileTree.js

@@ -2,6 +2,6 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useAgentPluginFileTree } from '../hooks/AgentPluginInspector.hooks.js';
 export function AgentPluginFileTree({ files, selectedPath, onOpen }, _optional = {}) {
     const vm = useAgentPluginFileTree({ files, selectedPath, onOpen });
-    return _jsx("div", { ref: vm.treeRef, role: "tree", "aria-label": "Package files", onKeyDown: vm.onKeyDown, children: vm.rows.map(row => _jsxs("div", { role: "treeitem", "aria-label": row.name, "aria-level": row.depth, "aria-setsize": row.setSize, "aria-posinset": row.posInSet, "aria-expanded": row.expanded, "aria-selected": row.selected, tabIndex: row.tabIndex, title: row.path, "data-tree-path": row.path, style: row.indent, onClick: row.onClick, onFocus: row.onFocus, children: [_jsxs("span", { "aria-hidden": true, children: [row.icon, " "] }), row.name] }, row.key)) });
+    return _jsx("div", { role: "tree", "aria-label": "Package files", onKeyDown: vm.onKeyDown, children: vm.rows.map(row => _jsxs("div", { role: "treeitem", "aria-label": row.name, "aria-level": row.depth, "aria-setsize": row.setSize, "aria-posinset": row.posInSet, "aria-expanded": row.expanded, "aria-selected": row.selected, tabIndex: row.tabIndex, title: row.path, "data-tree-path": row.path, style: row.indent, onClick: row.onClick, onFocus: row.onFocus, children: [_jsxs("span", { "aria-hidden": true, children: [row.icon, " "] }), row.name] }, row.key)) });
 }
 //# sourceMappingURL=AgentPluginFileTree.js.map

package/dist/agent-plugins/react/hooks/AgentPluginInspector.hooks.d.ts

@@ -34,7 +34,6 @@ export declare function useAgentPluginFileTree({ files, selectedPath, onOpen }:
         path: string;
     }, optional?: Record<string, never>) => void;
 }, _optional?: {}): {
-    treeRef: import("react").RefObject<HTMLDivElement | null>;
     rows: {
         key: string;
         name: string;

package/dist/agent-plugins/react/hooks/AgentPluginInspector.hooks.js

@@ -20,7 +20,8 @@ export function useAgentPluginInspector({ pluginId, permissions, name }, _option
 const fileGlyphs = { json: '{}', markdown: 'M↓', javascript: 'JS', typescript: 'TS', config: '⚙', html: '<>', css: '#', image: '▧', shell: '>', text: '¶', file: '▤' };
 export function useAgentPluginFileTree({ files, selectedPath, onOpen }, _optional = {}) {
     const tree = buildPackageFileTree({ paths: files.map(f => f.relativePath) }), [toggled, setToggled] = useState(new Map());
-    const [focused, setFocused] = useState(null), treeRef = useRef(null), moveFocus = useRef(false);
+    // Set by keyboard navigation to the tree that received the key, so the effect always has a real element.
+    const [focused, setFocused] = useState(null), focusWithin = useRef(null);
     // Expansion is derived from selected ancestors until the viewer explicitly toggles a folder.
     const ancestors = new Set(selectedPath ? ancestorFolderPaths({ filePath: selectedPath }) : []);
     const isExpanded = ({ path }) => toggled.get(path) ?? ancestors.has(path);
@@ -28,10 +29,10 @@ export function useAgentPluginFileTree({ files, selectedPath, onOpen }, _optiona
     const visible = (path) => path !== null && rows.some(r => r.node.path === path);
     const activePath = visible(focused) ? focused : visible(selectedPath) ? selectedPath : rows[0]?.node.path ?? null;
     // Move DOM focus only after keyboard navigation, never when opening the inspector.
-    useEffect(() => { if (!moveFocus.current)
-        return; moveFocus.current = false; Array.from(treeRef.current?.querySelectorAll('[data-tree-path]') ?? []).find(el => el.dataset.treePath === activePath)?.focus(); });
+    useEffect(() => { const tree = focusWithin.current; if (!tree)
+        return; focusWithin.current = null; Array.from(tree.querySelectorAll('[data-tree-path]')).find(el => el.dataset.treePath === activePath)?.focus(); });
     const setExpanded = (path, expanded) => setToggled(current => new Map(current).set(path, expanded));
-    return { treeRef,
+    return {
         rows: rows.map(row => {
             const { node } = row, folder = node.kind === 'folder', expanded = folder && isExpanded({ path: node.path });
             return { key: `${node.kind}:${node.path}`, name: node.name, path: node.path, depth: row.depth + 1, setSize: row.setSize, posInSet: row.posInSet, expanded: folder ? expanded : undefined, selected: folder ? undefined : node.path === selectedPath, tabIndex: node.path === activePath ? 0 : -1,
@@ -55,7 +56,7 @@ export function useAgentPluginFileTree({ files, selectedPath, onOpen }, _optiona
                 onOpen({ path: action.open });
             if (action.focus) {
                 setFocused(action.focus);
-                moveFocus.current = true;
+                focusWithin.current = event.currentTarget;
             }
         },
     };

package/dist/agent-plugins/react/hooks/AgentPluginPanel.hooks.js

@@ -7,9 +7,10 @@ export function useAgentPluginPanel({ props, mode }, _optional = {}) {
     const canRead = permissions.includes(AGENT_PLUGINS_READ) && !!props.permissions?.includes(AGENT_PLUGINS_READ);
     const canWrite = canRead && permissions.includes(AGENT_PLUGINS_WRITE) && !!props.permissions?.includes(AGENT_PLUGINS_WRITE);
     // Scope is intentionally unfiltered on BOTH tabs, including switched-off bundled packages.
+    const busyIds = state?.busyIds ?? [], expandedIds = state?.expandedIds ?? [];
     const rows = (canRead ? state?.plugins ?? [] : []).map(plugin => {
-        const name = humanizeAgentPluginId({ pluginId: plugin.pluginId }), busy = state?.busyIds.includes(plugin.pluginId) ?? false;
-        const expanded = state?.expandedIds.includes(plugin.pluginId) ?? false;
+        const name = humanizeAgentPluginId({ pluginId: plugin.pluginId }), busy = busyIds.includes(plugin.pluginId);
+        const expanded = expandedIds.includes(plugin.pluginId);
         // Derived from the id alone, so handles survive sorting and switching tabs.
         const handle = `agent-plugin-${encodeURIComponent(plugin.pluginId)}`;
         const turnOff = () => controller?.requestDisable({ pluginId: plugin.pluginId, variant: mode === 'installed' ? 'disable' : 'remove' });

package/dist/media/react/hooks/LibraryTab.hooks.d.ts

@@ -67,8 +67,6 @@ export declare function useLibraryTab({ params, permissions }: TabViewProps, _op
     onOrder: ({ value }: {
         value: string;
     }) => void;
-    onOrderCreated: () => void;
-    onOrderAlphabetical: () => void;
     search: string;
     loading: boolean;
     busy: boolean;

package/dist/media/react/hooks/LibraryTab.hooks.js

@@ -51,7 +51,7 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
     // Lightbox — an index into the list, not the item itself, so arrow-key/navigation
     // buttons move the number without re-deriving "what's next" from an item reference.
     const [lightboxIndex, setLightboxIndex] = useState(null);
-    const items = snapshot?.items ?? [];
+    const items = snapshot?.items ?? [], pendingIds = snapshot?.pendingIds ?? [];
     const canUpload = permissions.includes('media.upload');
     const canEdit = permissions.includes('media.update');
     const canTrash = permissions.includes('media.trash');
@@ -59,7 +59,7 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
     const canPurge = permissions.includes('media.delete.force');
     const actions = items.map((item, index) => ({
         item,
-        busy: snapshot?.pendingIds.includes(item.id) ?? false,
+        busy: pendingIds.includes(item.id),
         ...(canEdit ? { onEdit: () => setEditing(item) } : {}),
         onPreview: () => setLightboxIndex(index),
         ...(canTrash
@@ -123,16 +123,6 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
         onOrder: ({ value }) => {
             void controller?.setQuery({ query: { ...controller.getSnapshot().query, orderBy: value === 'alphabetical' ? 'alphabetical' : 'created' } });
         },
-        onOrderCreated: () => {
-            void controller?.setQuery({
-                query: { ...controller.getSnapshot().query, orderBy: 'created' },
-            });
-        },
-        onOrderAlphabetical: () => {
-            void controller?.setQuery({
-                query: { ...controller.getSnapshot().query, orderBy: 'alphabetical' },
-            });
-        },
         search: snapshot?.query.search ?? '',
         loading: !snapshot || (snapshot.items === null && snapshot.loading && !snapshot.error),
         busy: snapshot?.busy ?? false,
@@ -147,13 +137,14 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
         },
         cancelPurge: () => controller?.cancelPurge(),
         confirmPurge: () => {
-            if (!canPurge || !controller)
+            const item = controller?.getSnapshot().pendingPurge;
+            // The controller refuses to purge without a pending item, so there is nothing to announce.
+            if (!canPurge || !controller || !item)
                 return;
-            const item = controller.getSnapshot().pendingPurge;
-            const index = items.findIndex(row => row.id === item?.id);
+            const index = items.findIndex(row => row.id === item.id);
             return controller.confirmPurge({ confirmed: true }).then(saved => {
                 if (saved) {
-                    setSuccess(item ? `Deleted permanently ${item.title}` : 'Deleted permanently');
+                    setSuccess(`Deleted permanently ${item.title}`);
                     setFocusAfterPurge(Math.max(0, index));
                 }
             });

package/dist/media/react/hooks/ProvidersTab.hooks.js

@@ -48,7 +48,11 @@ export function useProvidersTab(_required = {}, _optional = {}) {
                 }
                 // Older hosts retain the one-button editor; writes remain sequential and failures
                 // retain local edits. Atomic whole-set hosts should implement saveChanges instead.
-                for (const item of lastRead) {
+                // Submitted ids the last read never returned (catalog-only providers getting their
+                // first key or settings) start from an empty stored state, or their writes are lost.
+                const known = new Set(lastRead.map(item => item.id));
+                const unread = Object.keys(providers).filter(id => !known.has(id)).map(id => ({ id, configured: false }));
+                for (const item of [...lastRead, ...unread]) {
                     const entry = providers[item.id];
                     if (!entry) {
                         if (item.configured || item.baseUrl || item.model)

package/dist/media/react/hooks/UploadButton.hooks.d.ts

@@ -14,10 +14,17 @@ export interface UploadButtonProps {
 /** Reads a browser File at the React boundary; headless controllers only receive bytes. */
 export declare function readMediaFile({ file }: {
     file: File;
-}, { signal }?: {
+}, { signal, createReader }?: {
     signal?: AbortSignal;
+    createReader?: () => FileReader;
 }): Promise<UploadInput>;
-export declare function useUploadButton(props: UploadButtonProps, _optional?: Record<string, never>): {
+export declare function useUploadButton(props: UploadButtonProps, { readFile }?: {
+    readFile?: (required: {
+        file: File;
+    }, optional?: {
+        signal?: AbortSignal;
+    }) => Promise<UploadInput>;
+}): {
     alt: string;
     withAlt: boolean;
     multiple: boolean;

package/dist/media/react/hooks/UploadButton.hooks.js

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 /** Reads a browser File at the React boundary; headless controllers only receive bytes. */
-export function readMediaFile({ file }, { signal } = {}) {
+export function readMediaFile({ file }, { signal, createReader = () => new FileReader() } = {}) {
     return new Promise((resolve, reject) => {
         signal?.throwIfAborted();
-        const reader = new FileReader();
+        const reader = createReader();
         const abort = () => {
             reader.abort();
             reject(new Error('File read aborted'));
@@ -26,13 +26,15 @@ export function readMediaFile({ file }, { signal } = {}) {
         reader.readAsDataURL(file);
     });
 }
-export function useUploadButton(props, _optional = {}) {
+export function useUploadButton(props, { readFile = readMediaFile } = {}) {
     // Advisory picker formats mirror the host's standard ceiling, including video. The
     // injected server still validates/sniffs bytes; a file picker is never a security boundary.
     const inputRef = useRef(null);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [alt, setAlt] = useState(''), [busy, setBusy] = useState(false), [error, setError] = useState(null), [success, setSuccess] = useState(null);
-    const inFlight = useRef(false), lifetime = useRef(null);
+    // The mount effect swaps in a fresh controller (StrictMode replays it), so handlers,
+    // which only run after mount, always read a live signal.
+    const inFlight = useRef(false), lifetime = useRef(new AbortController());
     useEffect(() => {
         const abort = new AbortController();
         lifetime.current = abort;
@@ -48,7 +50,7 @@ export function useUploadButton(props, _optional = {}) {
     async function uploadFiles(files) {
         if (!files.length || inFlight.current || props.disabled)
             return;
-        const signal = lifetime.current?.signal;
+        const signal = lifetime.current.signal;
         inFlight.current = true;
         setBusy(true);
         setError(null);
@@ -57,12 +59,12 @@ export function useUploadButton(props, _optional = {}) {
         let remaining = [...files];
         try {
             for (const file of files) {
-                const input = await readMediaFile({ file }, signal ? { signal } : {});
-                if (signal?.aborted)
+                const input = await readFile({ file }, { signal });
+                if (signal.aborted)
                     return;
                 if (!await props.upload({ input, ...(alt.trim() ? { alt: alt.trim() } : {}) }))
                     throw new Error(`Upload failed for ${file.name}`);
-                if (signal?.aborted)
+                if (signal.aborted)
                     return;
                 uploaded.push(file.name);
                 remaining = remaining.slice(1);
@@ -72,12 +74,12 @@ export function useUploadButton(props, _optional = {}) {
                 inputRef.current.value = '';
         }
         catch (error) {
-            if (!signal?.aborted)
+            if (!signal.aborted)
                 setError(error instanceof Error ? error.message : 'Upload failed');
         }
         finally {
             inFlight.current = false;
-            if (!signal?.aborted) {
+            if (!signal.aborted) {
                 // Keep only failed/unattempted files: retry must not duplicate successes in a batch.
                 setSelectedFiles(remaining);
                 setBusy(false);

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

@@ -1,4 +1,4 @@
-import { type KeyboardEvent } from 'react';
+import { type KeyboardEvent, type RefObject } from 'react';
 /**
  * @file `RowMenu`'s open/close state, viewport-aware positioning, and keyboard/focus behavior,
  * split out of the component so it can be swapped for a fake via the `useRowMenu` prop on
@@ -9,6 +9,25 @@ interface Position {
     left: number;
     placement: 'below' | 'above';
 }
+type RowMenuWindow = Pick<Window, 'innerHeight' | 'innerWidth' | 'addEventListener' | 'removeEventListener'>;
+type RowMenuDocument = Pick<Document, 'addEventListener' | 'removeEventListener'>;
+/** What `useRowMenu` hands `RowMenu` — and the shape an injected `useRowMenu` fake must return. */
+export interface RowMenuState {
+    readonly open: boolean;
+    readonly position: Position | null;
+    readonly triggerRef: RefObject<HTMLButtonElement | null>;
+    /** A callback ref from the real hook (see {@link trackOpenMenu}; `null` while closed), or a host
+     *  hook's ref object. Spelled out rather than React's `Ref`, whose callback form carries a brand
+     *  that fails to match across two installed `@types/react` copies (Jini's vs a host app's). */
+    readonly menuRef: RefObject<HTMLDivElement | null> | ((menu: HTMLDivElement | null) => void) | null;
+    readonly itemRefs: RefObject<Array<HTMLButtonElement | null>>;
+    readonly onTriggerClick: () => void;
+    readonly onTriggerKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    readonly onMenuKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    readonly selectItem: (item: {
+        readonly onSelect: () => void;
+    }) => void;
+}
 /**
  * Owns `RowMenu`'s open/close state, positioning, and keyboard/focus behavior.
  *
@@ -17,20 +36,8 @@ interface Position {
  */
 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>;
-    menuRef: import("react").RefObject<HTMLDivElement | null>;
-    itemRefs: import("react").RefObject<(HTMLButtonElement | null)[]>;
-    onTriggerClick: () => void;
-    onTriggerKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
-    onMenuKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
-    selectItem: ({ onSelect }: {
-        readonly onSelect: () => void;
-    }) => void;
-};
+    readonly window: RowMenuWindow;
+    readonly document: RowMenuDocument;
+}): RowMenuState;
 export {};
 //# sourceMappingURL=RowMenu.hooks.d.ts.map

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

@@ -1,6 +1,56 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 /** 8px clearance kept between the menu and the viewport edge on every side it's tested against. */
 const VIEWPORT_MARGIN = 8;
+/**
+ * Starts the listeners one open menu needs and returns the matching stop. Called from the menu's
+ * callback ref, so both elements are in hand: `trigger` is the button the menu opened from and
+ * `menu` is the just-attached popup — neither is ever null here.
+ *
+ * Positioning runs immediately, at ref-attach time in the commit, i.e. after the (initially
+ * off-screen, `visibility: hidden`) menu has actually laid out, so its real dimensions are known
+ * before deciding above-vs-below — a plain `useEffect` would run one paint too late and produce a
+ * visible jump. Recomputed on scroll and resize too: a portaled menu is a DOM sibling of its anchor,
+ * not a child, so it does not track the anchor's position on its own the way an in-flow popup would.
+ *
+ * Click-outside closes. Scoped to the open window only, same lifecycle discipline as
+ * `ConfirmButton`'s armed-only document listeners — a closed, idle `RowMenu` costs nothing beyond
+ * its trigger button even with many mounted per table.
+ *
+ * @complexity O(1) per call and per scroll/resize/mousedown event.
+ */
+function trackOpenMenu({ trigger, menu }, { window, document, onPosition, onDismiss }) {
+    function reposition() {
+        const rect = trigger.getBoundingClientRect();
+        const menuHeight = menu.offsetHeight;
+        const menuWidth = menu.offsetWidth;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const fitsBelow = spaceBelow >= menuHeight + VIEWPORT_MARGIN;
+        const placement = fitsBelow || rect.top < menuHeight + VIEWPORT_MARGIN ? 'below' : 'above';
+        // Right-aligned to the trigger by default (the trigger is the table's last column), clamped
+        // so it never overflows the viewport's left or right edge.
+        const left = Math.min(Math.max(VIEWPORT_MARGIN, rect.right - menuWidth), window.innerWidth - menuWidth - VIEWPORT_MARGIN);
+        onPosition({
+            top: placement === 'below' ? rect.bottom + 4 : rect.top - 4,
+            left,
+            placement,
+        });
+    }
+    function onDocMouseDown(e) {
+        const target = e.target;
+        if (menu.contains(target) || trigger.contains(target))
+            return;
+        onDismiss();
+    }
+    reposition();
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    document.addEventListener('mousedown', onDocMouseDown);
+    return () => {
+        window.removeEventListener('scroll', reposition, true);
+        window.removeEventListener('resize', reposition);
+        document.removeEventListener('mousedown', onDocMouseDown);
+    };
+}
 /**
  * Owns `RowMenu`'s open/close state, positioning, and keyboard/focus behavior.
  *
@@ -8,74 +58,44 @@ const VIEWPORT_MARGIN = 8;
  *   needs, for `ArrowUp`-to-last-item and wraparound navigation.
  */
 export function useRowMenu({ itemCount, window, document }) {
-    const [open, setOpen] = useState(false);
+    // The trigger the menu is open against; `null` while closed. Held as state (not just a boolean)
+    // so the menu's callback ref below is built with the element already in hand. Read from
+    // `triggerRef` at open time: an unattached trigger leaves this `null`, so a menu with nothing to
+    // anchor to never opens.
+    const [anchor, setAnchor] = useState(null);
+    const open = anchor !== null;
     const [position, setPosition] = useState(null);
     const [activeIndex, setActiveIndex] = useState(0);
     const triggerRef = useRef(null);
-    const menuRef = useRef(null);
     const itemRefs = useRef([]);
     itemRefs.current = itemRefs.current.slice(0, itemCount);
     function close(returnFocus) {
-        setOpen(false);
+        setAnchor(null);
         setPosition(null);
         if (returnFocus)
             triggerRef.current?.focus();
     }
     function openAt(index) {
         setActiveIndex(index);
-        setOpen(true);
+        setAnchor(triggerRef.current);
     }
-    // Measured after the (initially off-screen, `visibility: hidden`) menu has actually laid out, so
-    // `menuRef.current`'s real dimensions are known before deciding above-vs-below — a plain
-    // `useEffect` would run one paint too late and produce a visible jump. Recomputed on scroll and
-    // resize too: a portaled menu is a DOM sibling of its anchor, not a child, so it does not track
-    // the anchor's position on its own the way an in-flow popup would.
-    useLayoutEffect(() => {
-        if (!open)
-            return;
-        function reposition() {
-            const trigger = triggerRef.current;
-            if (!trigger)
-                return;
-            const rect = trigger.getBoundingClientRect();
-            const menuHeight = menuRef.current?.offsetHeight ?? 0;
-            const menuWidth = menuRef.current?.offsetWidth ?? 0;
-            const spaceBelow = window.innerHeight - rect.bottom;
-            const fitsBelow = spaceBelow >= menuHeight + VIEWPORT_MARGIN;
-            const placement = fitsBelow || rect.top < menuHeight + VIEWPORT_MARGIN ? 'below' : 'above';
-            // Right-aligned to the trigger by default (the trigger is the table's last column), clamped
-            // so it never overflows the viewport's left or right edge.
-            const left = Math.min(Math.max(VIEWPORT_MARGIN, rect.right - menuWidth), window.innerWidth - menuWidth - VIEWPORT_MARGIN);
-            setPosition({
-                top: placement === 'below' ? rect.bottom + 4 : rect.top - 4,
-                left,
-                placement,
-            });
-        }
-        reposition();
-        window.addEventListener('scroll', reposition, true);
-        window.addEventListener('resize', reposition);
-        return () => {
-            window.removeEventListener('scroll', reposition, true);
-            window.removeEventListener('resize', reposition);
+    // Only the open menu renders this ref, so it only exists once there is an anchor. React calls it
+    // with the menu element on attach and `null` on detach (React 18 and 19 alike; attach always comes
+    // first, so `stop` is set by then). A new anchor or new `window`/`document` ports make a new ref,
+    // which React detaches and re-attaches — the same re-subscribe an effect's deps would give.
+    const menuRef = useMemo(() => {
+        if (!anchor)
+            return null;
+        let stop;
+        return (menu) => {
+            if (menu)
+                stop = trackOpenMenu({ trigger: anchor, menu }, { window, document, onPosition: setPosition, onDismiss: () => close(false) });
+            else
+                stop();
         };
-    }, [open, window, document]);
-    // Click-outside closes. Scoped to the open window only, same lifecycle discipline as
-    // `ConfirmButton`'s armed-only document listeners — a closed, idle `RowMenu` costs nothing beyond
-    // its trigger button even with many mounted per table.
-    useEffect(() => {
-        if (!open)
-            return;
-        function onDocMouseDown(e) {
-            const target = e.target;
-            if (menuRef.current?.contains(target) || triggerRef.current?.contains(target))
-                return;
-            close(false);
-        }
-        document.addEventListener('mousedown', onDocMouseDown);
-        return () => document.removeEventListener('mousedown', onDocMouseDown);
+        // `close` only touches state setters and `triggerRef`, all stable across renders.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, window, document]);
+    }, [anchor, window, document]);
     // Keeps real DOM focus on the active item (roving focus via `tabIndex={-1}` on every item except
     // the active one) rather than only tracking `activeIndex` in state — arrow-key navigation needs
     // to move the browser's actual focus for a screen reader to announce it.

package/dist/react/entities/EntityField.d.ts

@@ -1,5 +1,5 @@
 import type { AdminEntityField } from '../../core/ports/entities.js';
-import type { EntityTranslate } from './types.js';
+import { type EntityTranslate } from './types.js';
 import { type RelationIndex } from './rules.js';
 export declare function EntityField(props: {
     readonly inputId: string;

package/dist/react/entities/EntityField.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Select } from '@jini-ai/ui/admin-widgets';
+import { selectTranslate } from './types.js';
 import { fromDatetimeLocalValue, toDatetimeLocalValue } from './rules.js';
 export function EntityField(props) {
     const { inputId, field, value, translate, disabled, invalid, onChange } = props;
     const common = { id: inputId, disabled, 'aria-invalid': invalid };
+    const selectT = selectTranslate({ translate });
     switch (field.kind) {
         case 'json': return _jsx("textarea", { ...common, value: props.text, onChange: (e) => props.onTextChange({ text: e.target.value }) });
         case 'relation': {
             const options = props.relations[field.target]?.options ?? [];
             const selectedId = typeof value === 'string' ? value : '';
             const missing = selectedId !== '' && !options.some((option) => option.id === selectedId);
-            return _jsx(Select, { id: inputId, disabled: disabled, value: selectedId, translate: (key) => translate({ key }), "aria-label": translate({ key: field.label ?? field.name }), options: [
+            return _jsx(Select, { id: inputId, disabled: disabled, value: selectedId, translate: selectT, "aria-label": translate({ key: field.label ?? field.name }), options: [
                     { value: '', label: translate({ key: 'No value' }) },
                     ...(missing ? [{ value: selectedId, label: `${selectedId} (${translate({ key: 'Unresolved' })})` }] : []),
                     ...options.map((option) => ({ value: option.id, label: option.title })),
@@ -19,7 +21,7 @@ export function EntityField(props) {
         case 'boolean':
             if (field.required)
                 return _jsx("input", { ...common, type: "checkbox", checked: value === true, onChange: (e) => onChange({ value: e.target.checked }) });
-            return _jsx(Select, { id: inputId, disabled: disabled, value: value === undefined ? '' : value === true ? 'true' : 'false', translate: (key) => translate({ key }), "aria-label": translate({ key: field.label ?? field.name }), options: [
+            return _jsx(Select, { id: inputId, disabled: disabled, value: value === undefined ? '' : value === true ? 'true' : 'false', translate: selectT, "aria-label": translate({ key: field.label ?? field.name }), options: [
                     { value: '', label: translate({ key: 'No value' }) }, { value: 'true', label: translate({ key: 'Yes' }) }, { value: 'false', label: translate({ key: 'No' }) },
                 ], onChange: (selected) => onChange({ value: selected === '' ? undefined : selected === 'true' }) });
         case 'datetime': return _jsx("input", { ...common, type: "datetime-local", step: "0.001", value: toDatetimeLocalValue({ value }), onChange: (e) => onChange({ value: fromDatetimeLocalValue({ raw: e.target.value }) }) });

package/dist/react/entities/types.d.ts

@@ -42,4 +42,13 @@ export declare function entityText({ translate, key, values }: {
     readonly key: string;
     readonly values: Readonly<Record<string, string | number>>;
 }): string;
+/**
+ * Adapts the host's object-arg {@link EntityTranslate} to the positional `(key) => string` form the
+ * shared `Select` widget takes. One adapter for every `Select` an entity form renders, so each one
+ * routes its own copy (search box, empty state) through the host dictionary — even the short boolean
+ * select, which never shows that copy today.
+ */
+export declare function selectTranslate({ translate }: {
+    readonly translate: EntityTranslate;
+}): (key: string) => string;
 //# sourceMappingURL=types.d.ts.map

package/dist/react/entities/types.js

@@ -2,4 +2,13 @@
 export function entityText({ translate, key, values }) {
     return translate({ key: key }).replace(/\{([\w]+)\}/g, (match, name) => Object.hasOwn(values, name) ? String(values[name]) : match);
 }
+/**
+ * Adapts the host's object-arg {@link EntityTranslate} to the positional `(key) => string` form the
+ * shared `Select` widget takes. One adapter for every `Select` an entity form renders, so each one
+ * routes its own copy (search box, empty state) through the host dictionary — even the short boolean
+ * select, which never shows that copy today.
+ */
+export function selectTranslate({ translate }) {
+    return (key) => translate({ key });
+}
 //# sourceMappingURL=types.js.map

package/dist/security/react/hooks/AccessTokensTab.hooks.js

@@ -3,13 +3,13 @@ import { useController } from '../../../react/use-controller.js';
 import { createAccessTokensController } from '../../controllers/access-tokens.controller.js';
 import { createOtherCredentialsController } from '../../controllers/other-credentials.controller.js';
 import { CATEGORIES, credentialLabel, filterCredentials, filterOtherCredentials, otherWritePermission, writePermission } from '../../rules.js';
-import { useSecurityPorts } from './SecurityPorts.hooks.js';
+import { noOtherCredentials, useSecurityPorts } from './SecurityPorts.hooks.js';
 export function useAccessTokensTab({ permissions = [] }, _optional = {}) {
     const ports = useSecurityPorts({});
     const key = permissions.join('\0');
     const canRead = permissions.includes('security.read');
     const access = useController({ create: () => createAccessTokensController({ api: ports.securityApi, permissions }), dependencies: [ports.securityApi, key] }, { start: ({ controller }) => { void controller.load({}); } });
-    const other = useController({ create: () => createOtherCredentialsController({ api: ports.otherCredentials ?? { async list() { return []; }, async replace() { throw new Error('Unavailable'); }, async remove() { throw new Error('Unavailable'); } }, permissions }), dependencies: [ports.otherCredentials, key] }, { start: ({ controller }) => { void controller.load({}); } });
+    const other = useController({ create: () => createOtherCredentialsController({ api: ports.otherCredentials ?? noOtherCredentials, permissions }), dependencies: [ports.otherCredentials, key] }, { start: ({ controller }) => { void controller.load({}); } });
     const [removal, setRemoval] = useState(null);
     const s = access.snapshot, o = other.snapshot;
     const query = s?.query ?? '', category = s?.category ?? 'all';

package/dist/security/react/hooks/RootKeyTab.hooks.js

@@ -1,12 +1,11 @@
 import { useController } from '../../../react/use-controller.js';
 import { createRootKeyController } from '../../controllers/root-key.controller.js';
 import { ROOT_KEY_PERMISSION, START_FRESH_CONFIRMATION, isRootKeyLocked } from '../../rules.js';
-import { useSecurityPorts } from './SecurityPorts.hooks.js';
-const unavailable = { async status() { throw new Error('Unavailable'); }, async generate() { throw new Error('Unavailable'); }, async importToken() { throw new Error('Unavailable'); }, async previewStartFresh() { throw new Error('Unavailable'); }, async startFresh() { throw new Error('Unavailable'); } };
+import { unavailableRootKey, useSecurityPorts } from './SecurityPorts.hooks.js';
 export function useRootKeyTab({ permissions = [], params }, _optional = {}) {
     const { rootKey } = useSecurityPorts({});
     const key = permissions.join('\0');
-    const { controller, snapshot: s } = useController({ create: () => createRootKeyController({ api: rootKey ?? unavailable, permissions }), dependencies: [rootKey, key] }, { start: ({ controller }) => { void controller.load({}); } });
+    const { controller, snapshot: s } = useController({ create: () => createRootKeyController({ api: rootKey ?? unavailableRootKey, permissions }), dependencies: [rootKey, key] }, { start: ({ controller }) => { void controller.load({}); } });
     return { denied: !rootKey || !permissions.includes(ROOT_KEY_PERMISSION), loading: s?.loading ?? true, saving: s?.saving ?? false, status: s?.status, error: s?.error, result: s?.result,
         scopeNotice: typeof params.scopeNotice === 'string' ? params.scopeNotice : 'This key protects saved credentials. Keep its backup separate from the database.',
         token: s?.token ?? '', confirm: s?.confirm ?? '', confirming: s?.confirming ?? false, preview: s?.preview,

package/dist/security/react/hooks/SecurityPorts.hooks.d.ts

@@ -4,6 +4,10 @@ export interface SecurityPorts {
     readonly otherCredentials?: OtherCredentialsPort;
     readonly rootKey?: RootKeyPort;
 }
+/** Stand-ins for optional ports the host did not supply. Hooks always run, so a tab still builds
+ * its controller; these keep it inert: nothing to list, every other call refused. */
+export declare const unavailableRootKey: RootKeyPort;
+export declare const noOtherCredentials: OtherCredentialsPort;
 export declare const SecurityPortsContext: import("react").Context<SecurityPorts | null>;
 export declare function useSecurityPorts(_required?: Record<string, never>, _optional?: {}): SecurityPorts;
 //# sourceMappingURL=SecurityPorts.hooks.d.ts.map

package/dist/security/react/hooks/SecurityPorts.hooks.js

@@ -1,5 +1,10 @@
 import { createContext, useContext } from 'react';
 import { AdminConfigError } from '../../../core/module/index.js';
+const refuse = async () => { throw new Error('Unavailable'); };
+/** Stand-ins for optional ports the host did not supply. Hooks always run, so a tab still builds
+ * its controller; these keep it inert: nothing to list, every other call refused. */
+export const unavailableRootKey = { status: refuse, generate: refuse, importToken: refuse, previewStartFresh: refuse, startFresh: refuse };
+export const noOtherCredentials = { async list() { return []; }, replace: refuse, remove: refuse };
 export const SecurityPortsContext = createContext(null);
 export function useSecurityPorts(_required = {}, _optional = {}) { const ports = useContext(SecurityPortsContext); if (!ports)
     throw new AdminConfigError({ issues: ['React scope unavailable: security'] }); return ports; }

package/dist/source-control/react/hooks/ProvidersTab.hooks.js

@@ -5,10 +5,10 @@ import { useSourceControlPorts } from './SourceControlPorts.hooks.js';
 export function useProvidersTab({ permissions = [] }, _optional = {}) {
     const ports = useSourceControlPorts({}), key = permissions.join('\0'), canRead = permissions.includes('source-control.read'), canWrite = canRead && permissions.includes('source-control.credentials.write');
     const { controller, snapshot: state } = useController({ create: () => createSourceControlController({ api: ports.sourceControlApi, permissions }), dependencies: [ports.sourceControlApi, key] }, { start: ({ controller }) => { void controller.load({}); } });
-    const infos = sourceControlProviders({ providers: state?.providers ?? [], credentials: state?.credentials ?? [] });
-    const first = infos.find(p => p.listed && !defaultSourceControlCredential({ credentials: state?.credentials ?? [], providerId: p.id }))?.id;
+    const credentials = state?.credentials ?? [], infos = sourceControlProviders({ providers: state?.providers ?? [], credentials });
+    const first = infos.find(p => p.listed && !defaultSourceControlCredential({ credentials, providerId: p.id }))?.id;
     const rows = infos.map(info => {
-        const saved = defaultSourceControlCredential({ credentials: state?.credentials ?? [], providerId: info.id }), draft = state?.drafts[info.id] ?? blankSourceControlDraft({});
+        const saved = defaultSourceControlCredential({ credentials, providerId: info.id }), draft = state?.drafts[info.id] ?? blankSourceControlDraft({});
         return { id: info.id, label: info.label, heading: saved ? info.label : `Connect ${info.label}`, saved, defaultOpen: info.id === first, canEdit: canWrite && info.listed, unlisted: !info.listed, connected: !!saved,
             token: draft.token, tokenLabel: `${info.label} ${info.tokenLabel}`, hint: saved ? 'Leave blank to keep the current token.' : 'Once saved, the token is never displayed again.', saving: draft.saving, error: draft.error,
             disabled: !canWrite || !sourceControlReady({ info, draft }), help: info.help, tokenPageUrl: safeSourceControlUrl({ url: info.tokenPageUrl }), hasGuidance: !!info.help || !!safeSourceControlUrl({ url: info.tokenPageUrl }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/admin",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Composable admin surface for Jini-hosted products: framework-free contracts, panel registry, and route model in `/core`; React shell and panels in `/react`. Import only the layers you need.",
   "license": "Apache-2.0",
   "repository": {
@@ -282,10 +282,10 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
+    "@jini-ai/ui": "^0.4.3",
     "@jini-ai/agentic": "^0.4.1",
-    "@jini-ai/ui": "^0.4.2",
-    "@jini-ai/ui-kit": "^0.1.0",
-    "@jini-ai/agent-plugins": "^0.4.1"
+    "@jini-ai/agent-plugins": "^0.4.1",
+    "@jini-ai/ui-kit": "^0.1.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",