@jini-ai/admin 0.4.12 → 0.4.13

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;

package/dist/react/entities/use-entity-edit.js

@@ -1,6 +1,48 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { draftForRow, invalidDraftFields, missingRequiredFields } from './rules.js';
 import { loadEntityRow, useEntityRead } from './use-entity-read.js';
+/** The first form for a loaded row, or null while it is loading or an edited row was not found. */
+function initialForm({ descriptor, loaded, id }) {
+    if (!loaded || (id !== null && loaded.row === null))
+        return null;
+    const draft = draftForRow({ descriptor, row: loaded.row });
+    const jsonText = Object.create(null);
+    for (const field of descriptor.fields) {
+        if (field.kind === 'json')
+            jsonText[field.name] = draft[field.name] === undefined ? '' : JSON.stringify(draft[field.name], null, 2);
+    }
+    return { draft, jsonText, jsonErrors: {} };
+}
+function canSaveForm({ form, missing, invalid, pending }) {
+    if (form === null || pending !== null)
+        return false;
+    return missing.length === 0 && invalid.length === 0 && !Object.values(form.jsonErrors).some(Boolean);
+}
+function parseJsonText(text) {
+    try {
+        return { value: text.trim() === '' ? undefined : JSON.parse(text), failed: false };
+    }
+    catch {
+        return { value: undefined, failed: true };
+    }
+}
+function mutationAllowed({ kind, canSave, id, port }) {
+    if (kind === 'save')
+        return canSave;
+    return id !== null && port.remove !== undefined;
+}
+/** Run the port call; resolves to the saved row's id, or null after a removal. */
+async function performMutation({ kind, port, id, draft }) {
+    if (kind === 'remove' && id !== null && port.remove) {
+        await port.remove(id);
+        return null;
+    }
+    // A create omits blanks; an update carries explicit undefined to clear optional fields.
+    const saved = id === null
+        ? await port.create(Object.fromEntries(Object.entries(draft).filter(([, value]) => value !== undefined)))
+        : await port.update(id, draft);
+    return saved.id;
+}
 /** Called by the editor mounted for one entity/id pair. */
 export function useEntityEdit({ port, ...props }) {
     const { entityName, id, registry, routes } = props;
@@ -15,22 +57,16 @@ export function useEntityEdit({ port, ...props }) {
     const [mutation, setMutation] = useState({ scope, kind: null, failed: false });
     const busy = useRef(false);
     let form = formState?.scope === scope ? formState.form : null;
-    if (read.data && form === null && (id === null || read.data.row !== null)) {
-        const draft = draftForRow({ descriptor: port.descriptor, row: read.data.row });
-        const jsonText = Object.create(null);
-        for (const field of port.descriptor.fields) {
-            if (field.kind === 'json')
-                jsonText[field.name] = draft[field.name] === undefined ? '' : JSON.stringify(draft[field.name], null, 2);
-        }
-        form = { draft, jsonText, jsonErrors: {} };
-        setFormState({ scope, form });
+    if (form === null) {
+        form = initialForm({ descriptor: port.descriptor, loaded: read.data, id });
+        if (form !== null)
+            setFormState({ scope, form });
     }
     const draft = form?.draft ?? {};
     const missing = missingRequiredFields({ descriptor: port.descriptor, draft });
     const invalid = invalidDraftFields({ descriptor: port.descriptor, draft });
     const pending = mutation.scope === scope ? mutation.kind : null;
-    const canSave = form !== null && missing.length === 0 && invalid.length === 0 &&
-        !Object.values(form.jsonErrors).some(Boolean) && pending === null;
+    const canSave = canSaveForm({ form, missing, invalid, pending });
     function setField({ name, value }) {
         if (!port.descriptor.fields.some((field) => field.name === name) || busy.current)
             return;
@@ -39,14 +75,7 @@ export function useEntityEdit({ port, ...props }) {
     function setJsonText({ name, text }) {
         if (!port.descriptor.fields.some((field) => field.name === name && field.kind === 'json') || busy.current)
             return;
-        let value;
-        let failed = false;
-        try {
-            value = text.trim() === '' ? undefined : JSON.parse(text);
-        }
-        catch {
-            failed = true;
-        }
+        const { value, failed } = parseJsonText(text);
         setFormState((state) => state?.scope === scope ? {
             scope,
             form: {
@@ -57,25 +86,15 @@ export function useEntityEdit({ port, ...props }) {
         } : state);
     }
     async function mutate({ kind }) {
-        if (busy.current || (kind === 'save' && !canSave) || (kind === 'remove' && (id === null || port.remove === undefined)))
+        if (busy.current || !mutationAllowed({ kind, canSave, id, port }))
             return;
         busy.current = true;
         setMutation({ scope, kind, failed: false });
         const active = () => mounted.current && currentScope.current === scope;
         try {
-            if (kind === 'remove' && id !== null && port.remove) {
-                await port.remove(id);
-                if (active())
-                    routes.navigate({ entity: entityName });
-            }
-            else {
-                // A create omits blanks; an update carries explicit undefined to clear optional fields.
-                const saved = id === null
-                    ? await port.create(Object.fromEntries(Object.entries(draft).filter(([, value]) => value !== undefined)))
-                    : await port.update(id, draft);
-                if (active())
-                    routes.navigate({ entity: entityName, id: saved.id });
-            }
+            const savedId = await performMutation({ kind, port, id, draft });
+            if (active())
+                routes.navigate(savedId === null ? { entity: entityName } : { entity: entityName, id: savedId });
             if (active())
                 setMutation({ scope, kind: null, failed: false });
         }

package/dist/react/shell/AdminShell.js

@@ -5,6 +5,40 @@ import { useShellDrawer, useShellRoute } from './AdminShell.hooks.js';
 import { resolveAdminShellModel } from './model.js';
 import { useAdminShellSession } from './use-admin-shell-session.js';
 import { useAdminTheme } from './use-admin-theme.js';
+/** Copy only the theme props the host supplied, so absent ones keep the hook's own defaults. */
+function themeOptions(props) {
+    return {
+        ...(props.theme ? { theme: props.theme } : {}),
+        ...(props.colorScheme ? { colorScheme: props.colorScheme } : {}),
+        ...(props.themeEnvironment ? { environment: props.themeEnvironment } : {}),
+        ...(props.themePreferenceStore ? { preferenceStore: props.themePreferenceStore } : {}),
+        ...(props.onColorSchemeChange ? { onColorSchemeChange: props.onColorSchemeChange } : {}),
+    };
+}
+/** Loading, login or session-error UI for every state except an authenticated one. */
+function renderSessionGate({ props, context, state, refresh }) {
+    if (state.status === 'checking')
+        return _jsx("div", { className: "boot-screen", role: "status", children: props.labels.loading });
+    if (state.status === 'anonymous')
+        return props.slots.login({ context, refreshSession: refresh });
+    if (props.slots.sessionError)
+        return props.slots.sessionError({ error: state.error, retry: refresh });
+    return _jsxs("div", { role: "alert", children: [_jsx("p", { children: props.labels.sessionError }), _jsx("button", { type: "button", onClick: () => { void refresh(); }, children: props.labels.retry })] });
+}
+/** Resolve the authenticated route, nav and slot arguments from the session's contributions. */
+function resolveShellView({ props, context, session, routePath, controller }, { appearance }) {
+    const model = resolveAdminShellModel({ panels: props.panels, session, routePath, defaultPanelId: props.defaultPanelId }, { capabilities: props.capabilities ?? [] });
+    const slotArgs = {
+        context, session, route: model.route, logout: controller.logout, refreshSession: controller.refresh,
+        ...(appearance ? { appearance } : {}),
+    };
+    const nav = props.translateNav ? props.translateNav({ groups: model.nav }) : model.nav;
+    return { model, slotArgs, nav };
+}
+/** The manifest-driven sidebar: header slot, nav groups, rail toggle and footer slot. */
+function ShellSidebar({ props, view, open, id }) {
+    return (_jsxs(Sidebar, { activeId: view.model.route.panelId, base: props.adminBase, open: open, id: id, label: props.labels.navigation, railStorageKey: props.railStorageKey, railDefaultCollapsed: props.railDefaultCollapsed ?? false, children: [props.slots.sidebarHeader, _jsx(Sidebar.Nav, { groups: view.nav, soonLabel: props.labels.soon, collapsibleGroups: props.collapsibleGroups ?? [] }), _jsxs(Sidebar.Footer, { children: [_jsx(Sidebar.RailToggle, { expandLabel: props.labels.expandSidebar, collapseLabel: props.labels.collapseSidebar }), props.slots.sidebarFooter?.(view.slotArgs)] })] }));
+}
 /**
  * A host-composed admin layout with manifest navigation and a session gate.
  * @param props Required host scope, ports, contributions, labels and slots; optional layout settings.
@@ -13,34 +47,17 @@ import { useAdminTheme } from './use-admin-theme.js';
 export function AdminShell(props) {
     const context = useMemo(() => ({ apiBase: props.apiBase, workspace: props.workspace }), [props.apiBase, props.workspace]);
     const session = useAdminShellSession({ port: props.session, context });
-    const appearance = useAdminTheme({ userId: session.state.status === 'authenticated' ? session.state.session.user.id : null, workspace: context.workspace }, {
-        ...(props.theme ? { theme: props.theme } : {}),
-        ...(props.colorScheme ? { colorScheme: props.colorScheme } : {}),
-        ...(props.themeEnvironment ? { environment: props.themeEnvironment } : {}),
-        ...(props.themePreferenceStore ? { preferenceStore: props.themePreferenceStore } : {}),
-        ...(props.onColorSchemeChange ? { onColorSchemeChange: props.onColorSchemeChange } : {}),
-    });
+    const appearance = useAdminTheme({ userId: session.state.status === 'authenticated' ? session.state.session.user.id : null, workspace: context.workspace }, themeOptions(props));
     const routePath = useShellRoute({ navigation: props.navigation, base: props.adminBase });
     const drawer = useShellDrawer({ routePath });
     const id = useId();
     const sidebarId = `${id}-sidebar`;
     const mainId = `${id}-main`;
-    if (session.state.status === 'checking')
-        return _jsx("div", { className: "boot-screen", role: "status", children: props.labels.loading });
-    if (session.state.status === 'anonymous')
-        return props.slots.login({ context, refreshSession: session.refresh });
-    if (session.state.status === 'error') {
-        if (props.slots.sessionError)
-            return props.slots.sessionError({ error: session.state.error, retry: session.refresh });
-        return _jsxs("div", { role: "alert", children: [_jsx("p", { children: props.labels.sessionError }), _jsx("button", { type: "button", onClick: () => { void session.refresh(); }, children: props.labels.retry })] });
-    }
-    const model = resolveAdminShellModel({ panels: props.panels, session: session.state.session, routePath, defaultPanelId: props.defaultPanelId }, { capabilities: props.capabilities ?? [] });
-    const slotArgs = {
-        context, session: session.state.session, route: model.route, logout: session.logout, refreshSession: session.refresh,
-        ...(appearance ? { appearance } : {}),
-    };
-    const nav = props.translateNav ? props.translateNav({ groups: model.nav }) : model.nav;
+    if (session.state.status !== 'authenticated')
+        return renderSessionGate({ props, context, state: session.state, refresh: session.refresh });
+    const view = resolveShellView({ props, context, session: session.state.session, routePath, controller: session }, { appearance });
+    const { model, slotArgs } = view;
     const assistant = props.slots.assistant;
-    return (_jsxs("div", { className: ['admin-layout', props.className].filter(Boolean).join(' '), children: [_jsx("a", { href: `#${mainId}`, className: "skip-link", children: props.labels.skipToContent }), _jsxs(Sidebar, { activeId: model.route.panelId ?? '', base: props.adminBase, open: drawer.open, id: sidebarId, label: props.labels.navigation, railStorageKey: props.railStorageKey, railDefaultCollapsed: props.railDefaultCollapsed ?? false, children: [props.slots.sidebarHeader, _jsx(Sidebar.Nav, { groups: nav, soonLabel: props.labels.soon, collapsibleGroups: props.collapsibleGroups ?? [] }), _jsxs(Sidebar.Footer, { children: [_jsx(Sidebar.RailToggle, { expandLabel: props.labels.expandSidebar, collapseLabel: props.labels.collapseSidebar }), props.slots.sidebarFooter?.(slotArgs)] })] }), drawer.open && _jsx("button", { type: "button", className: "sidebar-backdrop", "aria-label": props.labels.closeNavigation, onClick: () => drawer.setOpen(false) }), _jsxs("div", { className: "admin-main-col", children: [_jsxs("div", { className: "admin-topbar", children: [_jsx("button", { type: "button", className: "admin-topbar-toggle", "aria-expanded": drawer.open, "aria-controls": sidebarId, "aria-label": drawer.open ? props.labels.closeNavigation : props.labels.openNavigation, onClick: () => drawer.setOpen((open) => !open), children: _jsx("svg", { viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { d: "M2.5 5h13M2.5 9h13M2.5 13h13" }) }) }), _jsx("span", { className: "admin-topbar-title", children: props.title }), props.slots.topbar] }), _jsx("main", { ref: props.mainRef, id: mainId, className: "admin-content", tabIndex: -1, "data-agent-page": model.agentPageId ?? undefined, children: model.panel?.render(slotArgs) })] }), assistant && _jsx("aside", { className: "admin-assistant-pane", "aria-label": assistant.label, hidden: !assistant.open, children: assistant.content }), props.slots.overlays?.(slotArgs)] }));
+    return (_jsxs("div", { className: ['admin-layout', props.className].filter(Boolean).join(' '), children: [_jsx("a", { href: `#${mainId}`, className: "skip-link", children: props.labels.skipToContent }), _jsx(ShellSidebar, { props: props, view: view, open: drawer.open, id: sidebarId }), drawer.open && _jsx("button", { type: "button", className: "sidebar-backdrop", "aria-label": props.labels.closeNavigation, onClick: () => drawer.setOpen(false) }), _jsxs("div", { className: "admin-main-col", children: [_jsxs("div", { className: "admin-topbar", children: [_jsx("button", { type: "button", className: "admin-topbar-toggle", "aria-expanded": drawer.open, "aria-controls": sidebarId, "aria-label": drawer.open ? props.labels.closeNavigation : props.labels.openNavigation, onClick: () => drawer.setOpen((open) => !open), children: _jsx("svg", { viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { d: "M2.5 5h13M2.5 9h13M2.5 13h13" }) }) }), _jsx("span", { className: "admin-topbar-title", children: props.title }), props.slots.topbar] }), _jsx("main", { ref: props.mainRef, id: mainId, className: "admin-content", tabIndex: -1, "data-agent-page": model.agentPageId ?? undefined, children: model.panel?.render(slotArgs) })] }), assistant && _jsx("aside", { className: "admin-assistant-pane", "aria-label": assistant.label, hidden: !assistant.open, children: assistant.content }), props.slots.overlays?.(slotArgs)] }));
 }
 //# sourceMappingURL=AdminShell.js.map