@jini-ai/admin 0.4.12 → 0.6.10

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

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

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

@@ -6,9 +6,9 @@ import { UploadButton } from '../components/UploadButton.js';
 import { EditMediaPanel } from '../components/EditMediaPanel.js';
 import { MediaLightbox } from '../components/MediaLightbox.js';
 import { MediaPurgeDialog } from '../components/MediaPurgeDialog.js';
-export function LibraryTab(props, _optional = {}) {
+export function LibraryTab(props) {
     const vm = useLibraryTab(props);
-    return (_jsxs("section", { className: "jini-media-library", "data-jini-part": "media.library", children: [vm.canUpload && _jsx(UploadButton, { upload: vm.upload, disabled: vm.busy }), _jsx("div", { className: "jini-media-order-control", children: _jsx(Select, { label: "Order by", attrs: { 'data-jini-part': 'media.sort', 'data-agent-element': 'media-order-by' }, value: vm.orderBy, onValueChange: vm.onOrder, options: [{ value: 'created', label: 'Created (newest first)' }, { value: 'alphabetical', label: 'Alphabetical (A–Z)' }] }) }), _jsxs("div", { className: "jini-media-library-filters", hidden: true, children: [_jsx(TextField, { attrs: { 'data-jini-part': 'media.search', 'data-agent-element': 'media-search' }, label: "Search media", value: vm.search, onValueChange: vm.onSearch }), _jsx(Select, { label: "Status", value: vm.statusFilter, onValueChange: vm.onStatus, options: [{ value: 'all', label: 'All statuses' }, { value: 'active', label: 'Active' }, { value: 'trashed', label: 'Trash' }] })] }), _jsx("p", { className: "jini-media-success", role: "status", "aria-live": "polite", "aria-atomic": "true", children: vm.success }), vm.untyped && _jsx("p", { className: "jini-notice", children: vm.t.untyped }), vm.snapshot?.error && _jsxs("div", { className: "jini-notice jini-notice-error", children: [_jsx("p", { className: "jini-notice-text", role: "alert", children: vm.snapshot.error }), _jsx(Button, { onPress: vm.onRetry, children: "Retry" })] }), vm.loading ? (_jsx("p", { className: "jini-notice", role: "status", children: vm.t.loading })) : (_jsx(MediaGrid, { gridRef: vm.gridRef, emptyLabel: vm.emptyLabel, actions: vm.actions, api: vm.mediaApi })), _jsx(MediaLightbox, { items: vm.items, api: vm.mediaApi, activeIndex: vm.lightboxIndex, onNavigate: vm.onNavigate, onClose: vm.closeLightbox }), vm.editing && (_jsx(EditMediaPanel, { api: vm.mediaApi, item: vm.editing, onSaved: vm.saved, onClose: vm.closeEdit }, vm.editing.id)), _jsx(MediaPurgeDialog, { open: !!vm.snapshot?.pendingPurge, pending: vm.busy, ...(vm.snapshot?.pendingPurge ? { filename: vm.snapshot.pendingPurge.title } : {}), onCancel: vm.cancelPurge, onConfirm: vm.confirmPurge })] }));
+    return (_jsxs("section", { className: "jini-media-library", "data-jini-part": "media.library", children: [vm.canUpload && _jsx(UploadButton, { upload: vm.upload, disabled: vm.busy }), _jsx("div", { className: "jini-media-order-control", children: _jsx(Select, { label: "Order by", attrs: { 'data-jini-part': 'media.sort', 'data-agent-element': 'media-order-by' }, value: vm.orderBy, onValueChange: vm.onOrder, options: [{ value: 'created', label: 'Created (newest first)' }, { value: 'alphabetical', label: 'Alphabetical (A–Z)' }] }) }), _jsxs("div", { className: "jini-media-library-filters", hidden: true, children: [_jsx(TextField, { attrs: { 'data-jini-part': 'media.search', 'data-agent-element': 'media-search' }, label: "Search media", value: vm.search, onValueChange: vm.onSearch }), _jsx(Select, { label: "Status", value: vm.statusFilter, onValueChange: vm.onStatus, options: [{ value: 'all', label: 'All statuses' }, { value: 'active', label: 'Active' }, { value: 'trashed', label: 'Trash' }] })] }), _jsx("p", { className: "jini-media-success", role: "status", "aria-live": "polite", "aria-atomic": "true", children: vm.success }), vm.untyped && _jsx("p", { className: "jini-notice", children: vm.t.untyped }), vm.snapshot?.error && _jsxs("div", { className: "jini-notice jini-notice-error", children: [_jsx("p", { className: "jini-notice-text", role: "alert", children: vm.snapshot.error }), _jsx(Button, { onPress: vm.onRetry, children: "Retry" })] }), vm.loading ? (_jsx("p", { className: "jini-notice", role: "status", children: vm.t.loading })) : (_jsx(MediaGrid, { gridRef: vm.gridRef, emptyLabel: vm.emptyLabel, actions: vm.actions, api: vm.mediaApi })), _jsx(MediaLightbox, { items: vm.items, api: vm.mediaApi, activeIndex: vm.lightboxIndex, onNavigate: vm.onNavigate, onClose: vm.closeLightbox }), vm.editing && (_jsx(EditMediaPanel, { api: vm.mediaApi, item: vm.editing, onSaved: vm.saved, onClose: vm.closeEdit }, vm.editing.id)), _jsx(MediaPurgeDialog, { ...vm.purgeDialog, onCancel: vm.cancelPurge, onConfirm: vm.confirmPurge })] }));
 }
 export default LibraryTab;
 //# sourceMappingURL=LibraryTab.js.map

package/dist/media/rules.d.ts

@@ -56,6 +56,13 @@ export declare function formatByteSize({ bytes }: {
 }, { locale }?: {
     locale?: string;
 }): string;
+/** The file name a media card shows. A media record keeps only its extension-less title, so the
+ * extension comes from the type sniffed from its bytes; an unknown type, or a title that already
+ * ends with that extension, shows the title as-is. */
+export declare function mediaFileName({ title, contentType }: {
+    title: string;
+    contentType: string | null;
+}, _optional?: Record<string, never>): string;
 /** Full-library counts, independent of search/order/type selection; Providers has no count. */
 export declare function countMediaTabs({ media }: {
     media: readonly MediaAsset[];

package/dist/media/rules.js

@@ -75,8 +75,16 @@ export function isRetryableMediaError({ error }, _optional = {}) {
     const failure = error;
     if (typeof failure.retryable === 'boolean')
         return failure.retryable;
-    const status = failure.status ?? failure.statusCode ?? Number(failure.message?.match(/HTTP\s+(\d{3})/i)?.[1]);
-    return status === 408 || status === 429 || (status >= 500 && status <= 599) || error instanceof TypeError;
+    return isRetryableHttpStatus({ status: mediaErrorHttpStatus({ failure }) }) || error instanceof TypeError;
+}
+/** `status`, else `statusCode`, else the `HTTP nnn` an older transport put in its message —
+ * `NaN` when none is present. */
+function mediaErrorHttpStatus({ failure }, _optional = {}) {
+    return failure.status ?? failure.statusCode ?? Number(failure.message?.match(/HTTP\s+(\d{3})/i)?.[1]);
+}
+/** Request timeout, rate limiting and any 5xx are temporary; `NaN` and every other status are not. */
+function isRetryableHttpStatus({ status }, _optional = {}) {
+    return status === 408 || status === 429 || (status >= 500 && status <= 599);
 }
 /** Blank means native size; invalid values reach the server's positive-integer validator. */
 export function parseOptionalPixelSize({ value }, _optional = {}) {
@@ -94,6 +102,21 @@ export function formatByteSize({ bytes }, { locale = 'en-US' } = {}) {
     const mb = kb / 1024;
     return mb < 1024 ? `${decimal.format(mb)} MB` : `${decimal.format(mb / 1024)} GB`;
 }
+/** The extension each sniffed media type is stored as; JPEG shows as the common ".jpg". */
+const MEDIA_EXTENSION_BY_CONTENT_TYPE = {
+    'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/webp': 'webp', 'image/avif': 'avif',
+    'image/svg+xml': 'svg', 'video/mp4': 'mp4', 'video/webm': 'webm', 'audio/wav': 'wav', 'audio/mpeg': 'mp3',
+    'audio/flac': 'flac', 'audio/mp4': 'm4a', 'application/pdf': 'pdf',
+};
+/** The file name a media card shows. A media record keeps only its extension-less title, so the
+ * extension comes from the type sniffed from its bytes; an unknown type, or a title that already
+ * ends with that extension, shows the title as-is. */
+export function mediaFileName({ title, contentType }, _optional = {}) {
+    const extension = contentType ? MEDIA_EXTENSION_BY_CONTENT_TYPE[contentType] : undefined;
+    if (!extension || title.toLowerCase().endsWith(`.${extension}`))
+        return title;
+    return `${title}.${extension}`;
+}
 /** Full-library counts, independent of search/order/type selection; Providers has no count. */
 export function countMediaTabs({ media }, _optional = {}) {
     return { all: media.length, images: filterMediaByTab({ media, tab: 'images' }).length,

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { agentHandle } from '@jini-ai/agentic';
 import { useConfirmController } from '@jini-ai/ui-kit/react';
 import { resolveTone, toneClassName } from '../../types.js';
 import { useConfirmDialog, useConfirmDialogCancelLabel } from './ConfirmDialog.hooks.js';
+import { confirmDialogAgentAttrs, withoutAccessibleName } from './confirm-dialog-attrs.js';
 /**
  * UI-kit's confirmation planner owns the sub-handle segments appended to the caller's base:
  * literals chosen by the mechanism, never host data. Neither needs sanitizing, unlike
@@ -39,16 +39,13 @@ export function ConfirmDialog({ useDialog = useConfirmDialog, agentHandle: baseH
         ...(props.pending === undefined ? {} : { pending: props.pending }),
         onConfirm: () => props.onConfirm(), onCancel: () => props.onCancel(),
     }, {
-        // UI-kit names selects separately; agentic publishes them as fields and still owns handle validation.
-        agent: ((required, optional = {}) => agentHandle(required, {
-            ...(optional.role === undefined ? {} : { role: optional.role === 'select' ? 'field' : optional.role }),
-            ...(optional.label === undefined ? {} : { label: optional.label }),
-        })),
+        // UI-kit names selects separately; see `confirmDialogAgentAttrs`.
+        agent: confirmDialogAgentAttrs,
     });
     const { titleId, dialogRef, cancelRef, handleNativeCancel, handleBackdropClick } = useDialog({ open: props.open, onCancel: () => { controller.requestDismiss({ reason: 'close' }); }, document }, { pending: controller.pending });
     // Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent labels.
-    const { 'aria-label': _cancelName, ...cancelAttrs } = controller.cancel.attrs ?? {};
-    const { 'aria-label': _confirmName, ...confirmAttrs } = controller.confirm.attrs ?? {};
+    const cancelAttrs = withoutAccessibleName({ attrs: controller.cancel.attrs });
+    const confirmAttrs = withoutAccessibleName({ attrs: controller.confirm.attrs });
     return (_jsxs("dialog", { ref: dialogRef, className: "confirm-dialog", "aria-labelledby": titleId, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("h2", { id: titleId, children: props.title }), _jsxs("div", { className: "confirm-dialog-body", children: [props.body, controller.error] }), _jsxs("div", { className: "confirm-dialog-actions", children: [_jsx("button", { ref: cancelRef, type: "button", className: "btn-secondary", disabled: controller.pending, onClick: () => controller.cancel.onPress?.({}), ...cancelAttrs, children: cancelLabel }), _jsx("button", { type: "button", className: toneClassName({ tone }), disabled: controller.pending, onClick: () => controller.confirm.onPress?.({}), ...confirmAttrs, children: props.confirmLabel })] })] }));
 }
 //# sourceMappingURL=ConfirmDialog.js.map

package/dist/react/components/ConfirmDialog/confirm-dialog-attrs.d.ts

@@ -0,0 +1,20 @@
+import type { AgentAttrsPort, KitAttrs } from '@jini-ai/ui-kit';
+/**
+ * The agent-attribute port `ConfirmDialog` hands UI-kit's confirm controller. UI-kit names selects
+ * separately; agentic publishes them as fields and still owns handle validation. Absent role/label
+ * options stay absent rather than being sent as `undefined`.
+ *
+ * @complexity O(1).
+ */
+export declare const confirmDialogAgentAttrs: AgentAttrsPort;
+/**
+ * Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent
+ * labels. Returns the action's attributes without UI-kit's `aria-label`. UI-kit's `ButtonProps`
+ * types `attrs` as optional, so a missing set yields an empty one.
+ *
+ * @complexity O(k) in the number of attributes.
+ */
+export declare function withoutAccessibleName({ attrs }: {
+    attrs: KitAttrs | undefined;
+}, _optional?: Record<string, never>): KitAttrs;
+//# sourceMappingURL=confirm-dialog-attrs.d.ts.map

package/dist/react/components/ConfirmDialog/confirm-dialog-attrs.js

@@ -0,0 +1,24 @@
+import { agentHandle } from '@jini-ai/agentic';
+/**
+ * The agent-attribute port `ConfirmDialog` hands UI-kit's confirm controller. UI-kit names selects
+ * separately; agentic publishes them as fields and still owns handle validation. Absent role/label
+ * options stay absent rather than being sent as `undefined`.
+ *
+ * @complexity O(1).
+ */
+export const confirmDialogAgentAttrs = (required, optional = {}) => agentHandle(required, {
+    ...(optional.role === undefined ? {} : { role: optional.role === 'select' ? 'field' : optional.role }),
+    ...(optional.label === undefined ? {} : { label: optional.label }),
+});
+/**
+ * Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent
+ * labels. Returns the action's attributes without UI-kit's `aria-label`. UI-kit's `ButtonProps`
+ * types `attrs` as optional, so a missing set yields an empty one.
+ *
+ * @complexity O(k) in the number of attributes.
+ */
+export function withoutAccessibleName({ attrs }, _optional = {}) {
+    const { 'aria-label': _accessibleName, ...rest } = attrs ?? {};
+    return rest;
+}
+//# sourceMappingURL=confirm-dialog-attrs.js.map

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

@@ -125,7 +125,17 @@ function identityLabel(config) {
  * @complexity O(1) — one attribute read, one `JSON.parse` of a small config object, one table lookup.
  */
 export function describeEmbedPlaceholder({ el }) {
-    const raw = el.getAttribute('data-embed-config');
+    const marker = parseEmbedConfig(el.getAttribute('data-embed-config'));
+    if (!marker)
+        return undefined;
+    const { config } = marker;
+    const type = marker.type.toLowerCase();
+    if (type === 'gallery')
+        return { kindLabel: EMBED_KIND_LABELS.gallery, identityLabel: galleryIdentityLabel(config) };
+    return { kindLabel: EMBED_KIND_LABELS[type] ?? titleCase(type), identityLabel: identityLabel(config) };
+}
+/** A marker's config object and its non-empty string `type`, or `undefined` for anything else. */
+function parseEmbedConfig(raw) {
     if (!raw)
         return undefined;
     let parsed;
@@ -140,12 +150,11 @@ export function describeEmbedPlaceholder({ el }) {
     const config = parsed;
     if (typeof config.type !== 'string' || config.type === '')
         return undefined;
-    const type = config.type.toLowerCase();
-    if (type === 'gallery') {
-        const count = Array.isArray(config.images) ? config.images.length : 0;
-        return { kindLabel: EMBED_KIND_LABELS.gallery, identityLabel: count === 0 ? 'no images set' : `${count} ${count === 1 ? 'image' : 'images'}` };
-    }
-    return { kindLabel: EMBED_KIND_LABELS[type] ?? titleCase(type), identityLabel: identityLabel(config) };
+    return { config, type: config.type };
+}
+function galleryIdentityLabel(config) {
+    const count = Array.isArray(config.images) ? config.images.length : 0;
+    return count === 0 ? 'no images set' : `${count} ${count === 1 ? 'image' : 'images'}`;
 }
 export function InteractiveHtmlEditor(props) {
     return (_jsx(HtmlEditor, { ...props, isProtectedElement: (el) => isProtectedEmbedElement({ el }), describeEmbedPlaceholder: (el) => describeEmbedPlaceholder({ el }) }));

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

@@ -17,6 +17,21 @@ import { useRowMenu } from './RowMenu.hooks.js';
 function rowMenuAgentProps(handle, options) {
     return handle === undefined ? {} : agentHandle({ handle }, options);
 }
+function rowMenuPopupClassName(position) {
+    return `row-menu-popup${position?.placement === 'above' ? ' row-menu-popup-above' : ''}`;
+}
+function rowMenuPopupStyle(position) {
+    return {
+        position: 'fixed',
+        top: position ? position.top : -9999,
+        left: position ? position.left : -9999,
+        // Laid out but invisible until the first `reposition()` measurement lands (see
+        // `RowMenu.hooks.tsx`) — keeps `offsetHeight`/`offsetWidth` measurable without a
+        // visible flash at the wrong coordinates.
+        visibility: position ? 'visible' : 'hidden',
+        transform: position?.placement === 'above' ? 'translateY(-100%)' : undefined,
+    };
+}
 export function RowMenu({ useRowMenu: useRowMenuState = useRowMenu, agentHandle: baseHandle, ...props }) {
     const { open, position, triggerRef, menuRef, itemRefs, onTriggerClick, onTriggerKeyDown, onMenuKeyDown, selectItem, } = useRowMenuState({ itemCount: props.items.length, window, document });
     // One base handle per item, positionally aligned with `props.items` — undefined (rather than an
@@ -26,16 +41,7 @@ export function RowMenu({ useRowMenu: useRowMenuState = useRowMenu, agentHandle:
         ? buildAgentListHandles({ prefix: `${baseHandle}-item`, ids: props.items.map((item) => item.key) })
         : undefined;
     return (_jsxs(_Fragment, { children: [_jsx("button", { ref: triggerRef, type: "button", className: "row-menu-trigger", "aria-label": props.triggerLabel, "aria-haspopup": "menu", "aria-expanded": open, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown, ...rowMenuAgentProps(baseHandle, { role: 'button', label: props.triggerLabel }), children: _jsxs("svg", { viewBox: "0 0 18 18", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "9", cy: "4.5", r: "1.5" }), _jsx("circle", { cx: "9", cy: "9", r: "1.5" }), _jsx("circle", { cx: "9", cy: "13.5", r: "1.5" })] }) }), open
-                ? createPortal(_jsx("div", { ref: menuRef, role: "menu", "aria-label": props.triggerLabel, className: `row-menu-popup${position?.placement === 'above' ? ' row-menu-popup-above' : ''}`, style: {
-                        position: 'fixed',
-                        top: position ? position.top : -9999,
-                        left: position ? position.left : -9999,
-                        // Laid out but invisible until the first `reposition()` measurement lands (see
-                        // `RowMenu.hooks.tsx`) — keeps `offsetHeight`/`offsetWidth` measurable without a
-                        // visible flash at the wrong coordinates.
-                        visibility: position ? 'visible' : 'hidden',
-                        transform: position?.placement === 'above' ? 'translateY(-100%)' : undefined,
-                    }, onKeyDown: onMenuKeyDown, children: props.items.map((item, index) => {
+                ? createPortal(_jsx("div", { ref: menuRef, role: "menu", "aria-label": props.triggerLabel, className: rowMenuPopupClassName(position), style: rowMenuPopupStyle(position), onKeyDown: onMenuKeyDown, children: props.items.map((item, index) => {
                         const toneClass = toneClassName({ tone: resolveTone({}, item) });
                         return (_jsx("button", { ref: (el) => {
                                 itemRefs.current[index] = el;

package/dist/react/components/Sidebar.js

@@ -210,34 +210,40 @@ function SidebarNav(props) {
              */
             const collapsible = Boolean(group.label) && !collapsed && (props.collapsibleGroups ?? []).includes(group.label);
             const open = !collapsible || sections.isOpen({ groupLabel: group.label });
-            const panelId = `cms-section-${(group.label ?? `top-${gi}`).toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
-            return (_jsxs("div", { className: "cms-section", children: [group.label && collapsible ? (
-                    // A real `<button>`, not a click-handled `<div>`: keyboard focus, Enter/Space
-                    // activation, and the button role all come free, and `aria-expanded` only carries its
-                    // meaning on an element that is actually a control.
-                    _jsxs("button", { type: "button", className: `cms-group cms-group-toggle${open ? '' : ' is-closed'}`, "aria-expanded": open, "aria-controls": panelId, onClick: () => sections.toggle({ groupLabel: group.label }), children: [_jsx("span", { children: group.label }), _jsx("svg", { className: "cms-group-chevron", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 7l4 4 4-4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })) : group.label ? (_jsx("div", { className: "cms-group", children: group.label })) : null, _jsx("div", { className: "cms-section-items", id: panelId, hidden: !open, children: group.items.map((item) => {
-                            const active = item.id === activeId;
-                            const href = adminHref({ routePath: item.href }, { base });
-                            if (props.renderItem) {
-                                return _jsx(Fragment, { children: props.renderItem(item, { active, href, collapsed }) }, item.id);
-                            }
-                            if (item.soon && !item.soonPreviewable) {
-                                return (_jsxs("div", { className: "cms-item is-soon", "aria-disabled": "true", children: [_jsx(Icon, { markup: item.icon ?? '' }), _jsx("span", { children: item.label }), _jsx("span", { className: "soon", children: props.soonLabel ?? 'Soon' })] }, item.id));
-                            }
-                            if (item.soon) {
-                                // `soonPreviewable`: same real `<a>` as a shipped row (active state, aria-current,
-                                // rail tooltip, cmd-click/copy-link all work identically) with the `soon` badge kept
-                                // alongside the label — the announcement stays honest, but the row is no longer inert.
-                                return (_jsxs("a", { className: `cms-item is-soon${active ? ' active' : ''}`, href: href, "aria-current": active ? 'page' : undefined, ...railTooltipProps(item.label), children: [_jsx(Icon, { markup: item.icon ?? '' }), _jsx("span", { children: item.label }), _jsx("span", { className: "soon", children: props.soonLabel ?? 'Soon' })] }, item.id));
-                            }
-                            return (_jsxs("a", { className: `cms-item${active ? ' active' : ''}`, 
-                                // `AdminNavItem.href` is a route path; the base is applied here so the panel
-                                // manifest never has to know it. A real URL, so cmd-click and "copy link address"
-                                // behave normally.
-                                href: href, "aria-current": active ? 'page' : undefined, ...railTooltipProps(item.label), children: [_jsx(Icon, { markup: item.icon ?? '' }), _jsx("span", { children: item.label })] }, item.id));
-                        }) })] }, group.label ?? `top-${gi}`));
+            const sectionKey = group.label ?? `top-${gi}`;
+            const panelId = `cms-section-${sectionKey.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+            return (_jsxs("div", { className: "cms-section", children: [_jsx(NavGroupHeading, { label: group.label, collapsible: collapsible, open: open, panelId: panelId, onToggle: () => sections.toggle({ groupLabel: group.label }) }), _jsx("div", { className: "cms-section-items", id: panelId, hidden: !open, children: group.items.map((item) => (_jsx(NavItemRow, { item: item, nav: props, active: item.id === activeId, href: adminHref({ routePath: item.href }, { base }), collapsed: collapsed, railTooltipProps: railTooltipProps }, item.id))) })] }, sectionKey));
         }) }));
 }
+function NavGroupHeading({ label, collapsible, open, panelId, onToggle }) {
+    if (!label)
+        return null;
+    if (!collapsible)
+        return _jsx("div", { className: "cms-group", children: label });
+    return (
+    // A real `<button>`, not a click-handled `<div>`: keyboard focus, Enter/Space
+    // activation, and the button role all come free, and `aria-expanded` only carries its
+    // meaning on an element that is actually a control.
+    _jsxs("button", { type: "button", className: `cms-group cms-group-toggle${open ? '' : ' is-closed'}`, "aria-expanded": open, "aria-controls": panelId, onClick: onToggle, children: [_jsx("span", { children: label }), _jsx("svg", { className: "cms-group-chevron", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 7l4 4 4-4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+}
+function DisabledSoonItem({ item, soonLabel }) {
+    return (_jsxs("div", { className: "cms-item is-soon", "aria-disabled": "true", children: [_jsx(Icon, { markup: item.icon ?? '' }), _jsx("span", { children: item.label }), _jsx("span", { className: "soon", children: soonLabel })] }));
+}
+function NavItemRow({ item, nav, active, href, collapsed, railTooltipProps }) {
+    if (nav.renderItem)
+        return _jsx(_Fragment, { children: nav.renderItem(item, { active, href, collapsed }) });
+    const soonLabel = nav.soonLabel ?? 'Soon';
+    if (item.soon && !item.soonPreviewable)
+        return _jsx(DisabledSoonItem, { item: item, soonLabel: soonLabel });
+    // `soonPreviewable`: same real `<a>` as a shipped row (active state, aria-current,
+    // rail tooltip, cmd-click/copy-link all work identically) with the `soon` badge kept
+    // alongside the label — the announcement stays honest, but the row is no longer inert.
+    return (_jsxs("a", { className: `cms-item${item.soon ? ' is-soon' : ''}${active ? ' active' : ''}`, 
+        // `AdminNavItem.href` is a route path; the base is applied here so the panel
+        // manifest never has to know it. A real URL, so cmd-click and "copy link address"
+        // behave normally.
+        href: href, "aria-current": active ? 'page' : undefined, ...railTooltipProps(item.label), children: [_jsx(Icon, { markup: item.icon ?? '' }), _jsx("span", { children: item.label }), item.soon ? _jsx("span", { className: "soon", children: soonLabel }) : null] }));
+}
 /** The bottom region. Carries no content of its own — the host decides what belongs there. */
 function SidebarFooter(props) {
     return _jsx("div", { className: ['cms-foot', props.className].filter(Boolean).join(' '), children: props.children });

package/dist/react/entities/EntityEdit.js

@@ -1,9 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId, useMemo } from 'react';
 import { EntityField } from './EntityField.js';
+import { RelationTruncationNotice } from './RelationTruncationNotice.js';
 import { useEntityEdit } from './use-entity-edit.js';
 import { entityText } from './types.js';
-import { RELATION_OPTION_LIMIT } from './rules.js';
+function EntityFieldRow({ edit, form, field, inputId, relations, translate }) {
+    const missing = edit.missing.includes(field.name);
+    const invalid = edit.invalid.some((problem) => problem.field === field.name);
+    const jsonError = form.jsonErrors[field.name] === true;
+    return _jsxs("div", { children: [_jsxs("label", { htmlFor: inputId, children: [translate({ key: field.label ?? field.name }), field.required ? ' *' : '', field.kind === 'datetime' ? ` (${translate({ key: 'UTC' })})` : ''] }), _jsx(EntityField, { inputId: inputId, field: field, value: form.draft[field.name], text: form.jsonText[field.name] ?? '', relations: relations, translate: translate, disabled: edit.pending !== null, invalid: missing || invalid || jsonError, onChange: ({ value }) => edit.setField({ name: field.name, value }), onTextChange: ({ text }) => edit.setJsonText({ name: field.name, text }) }), missing ? _jsx("p", { children: translate({ key: 'Required' }) }) : null, invalid ? _jsx("p", { children: translate({ key: 'Invalid value' }) }) : null, jsonError ? _jsx("p", { role: "alert", children: translate({ key: 'Invalid JSON' }) }) : null] });
+}
+function EditActions({ edit, canRemove, translate }) {
+    return _jsxs(_Fragment, { children: [_jsx("button", { type: "submit", disabled: !edit.canSave, children: translate({ key: edit.pending === 'save' ? 'Saving' : 'Save' }) }), canRemove ? _jsx("button", { type: "button", disabled: edit.pending !== null, onClick: () => { void edit.remove(); }, children: translate({ key: edit.pending === 'remove' ? 'Deleting' : 'Delete' }) }) : null] });
+}
 function EntityEditor(props) {
     const { port, translate, routes, entityName, id } = props;
     const formId = useId();
@@ -12,19 +21,13 @@ function EntityEditor(props) {
         return _jsx("p", { role: "alert", children: translate({ key: 'Unable to load row' }) });
     if (edit.read.loading || !edit.read.data)
         return _jsx("p", { role: "status", children: translate({ key: 'Loading' }) });
-    if (id !== null && edit.read.data.row === null)
+    // useEntityEdit builds the form in the same render its row arrives, so once data has loaded the
+    // only way to have no form is an edit route whose row does not exist.
+    const { form } = edit;
+    if (!form)
         return _jsx("p", { role: "status", children: translate({ key: 'Row not found' }) });
-    if (!edit.form)
-        return _jsx("p", { role: "status", children: translate({ key: 'Loading' }) });
-    const busy = edit.pending !== null;
-    const truncated = Object.entries(edit.read.data.relations).filter(([, target]) => target.truncated).map(([name]) => name);
-    return _jsxs("form", { className: "page", onSubmit: (e) => { e.preventDefault(); void edit.save(); }, children: [_jsx("a", { href: routes.href({ entity: entityName }), children: translate({ key: port.descriptor.labelPlural }) }), _jsx("h1", { children: entityText({ translate, key: id === null ? 'New {entity}' : 'Edit {entity}', values: { entity: translate({ key: port.descriptor.labelSingular }) } }) }), edit.failed ? _jsx("p", { role: "alert", children: translate({ key: 'Operation failed' }) }) : null, port.descriptor.fields.map((field, index) => {
-                const inputId = `${formId}-${index}`;
-                const missing = edit.missing.includes(field.name);
-                const invalid = edit.invalid.some((problem) => problem.field === field.name);
-                const jsonError = edit.form?.jsonErrors[field.name] === true;
-                return _jsxs("div", { children: [_jsxs("label", { htmlFor: inputId, children: [translate({ key: field.label ?? field.name }), field.required ? ' *' : '', field.kind === 'datetime' ? ` (${translate({ key: 'UTC' })})` : ''] }), _jsx(EntityField, { inputId: inputId, field: field, value: edit.form?.draft[field.name], text: edit.form?.jsonText[field.name] ?? '', relations: edit.read.data.relations, translate: translate, disabled: busy, invalid: missing || invalid || jsonError, onChange: ({ value }) => edit.setField({ name: field.name, value }), onTextChange: ({ text }) => edit.setJsonText({ name: field.name, text }) }), missing ? _jsx("p", { children: translate({ key: 'Required' }) }) : null, invalid ? _jsx("p", { children: translate({ key: 'Invalid value' }) }) : null, jsonError ? _jsx("p", { role: "alert", children: translate({ key: 'Invalid JSON' }) }) : null] }, field.name);
-            }), truncated.length > 0 ? _jsx("p", { children: entityText({ translate, key: 'Related names limited to {limit} rows: {targets}', values: { limit: RELATION_OPTION_LIMIT, targets: truncated.join(', ') } }) }) : null, _jsx("button", { type: "submit", disabled: !edit.canSave, children: translate({ key: edit.pending === 'save' ? 'Saving' : 'Save' }) }), id !== null && port.remove ? _jsx("button", { type: "button", disabled: busy, onClick: () => { void edit.remove(); }, children: translate({ key: edit.pending === 'remove' ? 'Deleting' : 'Delete' }) }) : null] });
+    const { relations } = edit.read.data;
+    return _jsxs("form", { className: "page", onSubmit: (e) => { e.preventDefault(); void edit.save(); }, children: [_jsx("a", { href: routes.href({ entity: entityName }), children: translate({ key: port.descriptor.labelPlural }) }), _jsx("h1", { children: entityText({ translate, key: id === null ? 'New {entity}' : 'Edit {entity}', values: { entity: translate({ key: port.descriptor.labelSingular }) } }) }), edit.failed ? _jsx("p", { role: "alert", children: translate({ key: 'Operation failed' }) }) : null, port.descriptor.fields.map((field, index) => _jsx(EntityFieldRow, { edit: edit, form: form, field: field, inputId: `${formId}-${index}`, relations: relations, translate: translate }, field.name)), _jsx(RelationTruncationNotice, { relations: relations, translate: translate }), _jsx(EditActions, { edit: edit, canRemove: id !== null && port.remove !== undefined, translate: translate })] });
 }
 /** Host entity editing uses the existing registry/ports and core draft validation.
  * Required booleans default false, optional booleans remain unset, and invalid JSON blocks save

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

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 import type { AdminEntityField } from '../../core/ports/entities.js';
 import { type EntityTranslate } from './types.js';
 import { type RelationIndex } from './rules.js';
-export declare function EntityField(props: {
+interface EntityFieldProps {
     readonly inputId: string;
     readonly field: AdminEntityField;
     readonly value: unknown;
@@ -16,5 +17,7 @@ export declare function EntityField(props: {
     readonly onTextChange: (args: {
         readonly text: string;
     }) => void;
-}): import("react").JSX.Element;
+}
+export declare function EntityField(props: EntityFieldProps): ReactNode;
+export {};
 //# sourceMappingURL=EntityField.d.ts.map

package/dist/react/entities/EntityField.js

@@ -2,32 +2,47 @@ 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';
+const fieldLabel = ({ field, translate }) => translate({ key: field.label ?? field.name });
+const blankToUndefined = (raw) => (raw === '' ? undefined : raw);
+const commonProps = ({ inputId, disabled, invalid }) => ({ id: inputId, disabled, 'aria-invalid': invalid });
+function RelationInput(props) {
+    const { inputId, field, value, translate, disabled, onChange } = props;
+    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: selectTranslate({ translate }), "aria-label": fieldLabel(props), options: [
+            { value: '', label: translate({ key: 'No value' }) },
+            ...(missing ? [{ value: selectedId, label: `${selectedId} (${translate({ key: 'Unresolved' })})` }] : []),
+            ...options.map((option) => ({ value: option.id, label: option.title })),
+        ], onChange: (selected) => onChange({ value: blankToUndefined(selected) }) });
+}
+function booleanSelectValue(value) {
+    if (value === undefined)
+        return '';
+    return value === true ? 'true' : 'false';
+}
+function BooleanInput(props) {
+    const { inputId, field, value, translate, disabled, onChange } = props;
+    if (field.required)
+        return _jsx("input", { ...commonProps(props), type: "checkbox", checked: value === true, onChange: (e) => onChange({ value: e.target.checked }) });
+    return _jsx(Select, { id: inputId, disabled: disabled, value: booleanSelectValue(value), translate: selectTranslate({ translate }), "aria-label": fieldLabel(props), 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' }) });
+}
+function NumberInput(props) {
+    const { field, value, onChange } = props;
+    return _jsx("input", { ...commonProps(props), type: "number", step: field.kind === 'integer' ? '1' : 'any', value: typeof value === 'number' ? value : '', onChange: (e) => onChange({ value: e.target.value === '' ? undefined : Number(e.target.value) }) });
+}
 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 });
+    const { field, value, onChange } = props;
     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: 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 })),
-                ], onChange: (selected) => onChange({ value: selected === '' ? undefined : selected }) });
-        }
-        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: 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 }) }) });
+        case 'json': return _jsx("textarea", { ...commonProps(props), value: props.text, onChange: (e) => props.onTextChange({ text: e.target.value }) });
+        case 'relation': return _jsx(RelationInput, { ...props, field: field });
+        case 'boolean': return _jsx(BooleanInput, { ...props });
+        case 'datetime': return _jsx("input", { ...commonProps(props), type: "datetime-local", step: "0.001", value: toDatetimeLocalValue({ value }), onChange: (e) => onChange({ value: fromDatetimeLocalValue({ raw: e.target.value }) }) });
         case 'integer':
-        case 'real': return _jsx("input", { ...common, type: "number", step: field.kind === 'integer' ? '1' : 'any', value: typeof value === 'number' ? value : '', onChange: (e) => onChange({ value: e.target.value === '' ? undefined : Number(e.target.value) }) });
-        case 'text': return _jsx("input", { ...common, value: typeof value === 'string' ? value : '', onChange: (e) => onChange({ value: e.target.value === '' ? undefined : e.target.value }) });
+        case 'real': return _jsx(NumberInput, { ...props });
+        case 'text': return _jsx("input", { ...commonProps(props), value: typeof value === 'string' ? value : '', onChange: (e) => onChange({ value: blankToUndefined(e.target.value) }) });
     }
 }
 //# sourceMappingURL=EntityField.js.map

package/dist/react/entities/EntityList.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { DataTable } from '../components/DataTable.js';
 import { EntityCell } from './EntityCell.js';
+import { RelationTruncationNotice } from './RelationTruncationNotice.js';
 import { entityText } from './types.js';
-import { loadRelationIndex, resolveEntityPageSize, RELATION_OPTION_LIMIT } from './rules.js';
+import { loadRelationIndex, resolveEntityPageSize } from './rules.js';
 import { useEntityRead } from './use-entity-read.js';
 /** Cursor history records actual returned page lengths; never sort a server-paginated page locally.
  * Host translation, registry and navigation are injected, and this list uses the existing DataTable.
@@ -15,9 +16,10 @@ export function EntityList(props) {
     const limit = resolveEntityPageSize({ raw: props.limitParam });
     const token = JSON.stringify([entityName, limit]);
     const [walk, setWalk] = useState({ token, port, entries: [{ cursor: null, offset: 0 }] });
-    if (walk.token !== token || walk.port !== port)
+    const walkIsCurrent = walk.token === token && walk.port === port;
+    if (!walkIsCurrent)
         setWalk({ token, port, entries: [{ cursor: null, offset: 0 }] });
-    const entries = walk.token === token && walk.port === port ? walk.entries : [{ cursor: null, offset: 0 }];
+    const entries = walkIsCurrent ? walk.entries : [{ cursor: null, offset: 0 }];
     const position = entries[entries.length - 1];
     const load = useCallback(async () => {
         if (port === null)
@@ -37,7 +39,6 @@ export function EntityList(props) {
         return _jsx("p", { role: "status", children: translate({ key: 'Loading' }) });
     const { page, relations } = result.data;
     const descriptor = port.descriptor;
-    const truncated = Object.entries(relations).filter(([, options]) => options.truncated).map(([name]) => name);
     return _jsxs("div", { className: "page", children: [_jsx("a", { href: routes.href({}), children: translate({ key: 'Data' }) }), _jsx("h1", { children: translate({ key: descriptor.labelPlural }) }), _jsx("a", { href: routes.href({ entity: entityName, view: 'create' }), children: entityText({ translate, key: 'New {entity}', values: { entity: translate({ key: descriptor.labelSingular }) } }) }), _jsx(DataTable, { rows: [...page.items], rowKey: (row) => row.id, empty: _jsx("p", { children: translate({ key: 'No rows' }) }), columns: descriptor.fields.map((field) => ({
                     key: field.name, header: translate({ key: field.label ?? field.name }),
                     // Sorting a server-cut page would misrepresent collection order.
@@ -47,6 +48,6 @@ export function EntityList(props) {
                 })) }), _jsx("p", { children: page.items.length === 0 ? translate({ key: 'No rows' }) : entityText({ translate, key: 'Showing {from}–{to}', values: { from: position.offset + 1, to: position.offset + page.items.length } }) }), _jsx("button", { type: "button", disabled: entries.length === 1, onClick: () => setWalk((current) => ({ ...current, entries: current.entries.slice(0, -1) })), children: translate({ key: 'Previous' }) }), _jsx("button", { type: "button", disabled: page.nextCursor === null, onClick: () => {
                     if (page.nextCursor !== null)
                         setWalk((current) => ({ ...current, entries: [...current.entries, { cursor: page.nextCursor, offset: position.offset + page.items.length }] }));
-                }, children: translate({ key: 'Next' }) }), truncated.length > 0 ? _jsx("p", { children: entityText({ translate, key: 'Related names limited to {limit} rows: {targets}', values: { limit: RELATION_OPTION_LIMIT, targets: truncated.join(', ') } }) }) : null] });
+                }, children: translate({ key: 'Next' }) }), _jsx(RelationTruncationNotice, { relations: relations, translate: translate })] });
 }
 //# sourceMappingURL=EntityList.js.map

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type EntityTranslate } from './types.js';
+import { type RelationIndex } from './rules.js';
+/** Names every relation target whose option set was cut at the limit; renders nothing otherwise. */
+export declare function RelationTruncationNotice({ relations, translate }: {
+    readonly relations: RelationIndex;
+    readonly translate: EntityTranslate;
+}): ReactNode;
+//# sourceMappingURL=RelationTruncationNotice.d.ts.map

package/dist/react/entities/RelationTruncationNotice.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { entityText } from './types.js';
+import { RELATION_OPTION_LIMIT } from './rules.js';
+/** Names every relation target whose option set was cut at the limit; renders nothing otherwise. */
+export function RelationTruncationNotice({ relations, translate }) {
+    const truncated = Object.entries(relations).filter(([, options]) => options.truncated).map(([name]) => name);
+    return truncated.length > 0 ? _jsx("p", { children: entityText({ translate, key: 'Related names limited to {limit} rows: {targets}', values: { limit: RELATION_OPTION_LIMIT, targets: truncated.join(', ') } }) }) : null;
+}
+//# sourceMappingURL=RelationTruncationNotice.js.map

package/dist/react/entities/use-entity-edit.d.ts

@@ -1,24 +1,26 @@
 import type { AdminErasedEntityPort } from '../../core/ports/entities.js';
 import type { EntityEditProps } from './types.js';
+import { type EntityLoadedRow } from './use-entity-read.js';
 interface FormState {
     readonly draft: Record<string, unknown>;
     readonly jsonText: Readonly<Record<string, string>>;
     readonly jsonErrors: Readonly<Record<string, boolean>>;
 }
+type MutationKind = 'save' | 'remove';
 /** Called by the editor mounted for one entity/id pair. */
 export declare function useEntityEdit({ port, ...props }: EntityEditProps & {
     readonly port: AdminErasedEntityPort;
 }): {
     form: FormState | null;
     read: {
-        readonly data: import("./use-entity-read.js").EntityLoadedRow | undefined;
+        readonly data: EntityLoadedRow | undefined;
         readonly error: unknown;
         readonly loading: boolean;
     };
     missing: readonly string[];
     invalid: readonly import("./rules.js").DraftFieldProblem[];
     canSave: boolean;
-    pending: "save" | "remove" | null;
+    pending: MutationKind | null;
     failed: boolean;
     setField: ({ name, value }: {
         readonly name: string;