@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/previews/ActionPreview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ActionPreview — read-only summary of an Action metadata draft.
+ *
+ * Actions are the configurable buttons / menu items / shortcuts a
+ * record or list surfaces. The preview shows:
+ *
+ *   1. A faux button rendered using the action's `variant`, `icon`,
+ *      and `label` so authors can see the visual weight before they
+ *      ship it (primary buttons are highlighted, danger turns red,
+ *      icon-only actions render a compact icon button).
+ *   2. A metadata strip: type, target, locations, shortcut, bulk
+ *      flag, AI exposure, refreshAfter, confirmText.
+ *   3. A params table when the action prompts the user — this is the
+ *      modal/drawer it would open on click. We render it as a static
+ *      preview, not an interactive form, because previews must be
+ *      side-effect free.
+ *   4. A "what happens on click" callout that describes the resolved
+ *      handler in plain language (e.g. "POST ${target}", "open form
+ *      ${target}", "run script ${target}").
+ *   5. A resultDialog mock when configured (TOTP / backup-codes-style
+ *      reveal dialogs).
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ActionPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/ActionPreview.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ActionPreview — read-only summary of an Action metadata draft.
+ *
+ * Actions are the configurable buttons / menu items / shortcuts a
+ * record or list surfaces. The preview shows:
+ *
+ *   1. A faux button rendered using the action's `variant`, `icon`,
+ *      and `label` so authors can see the visual weight before they
+ *      ship it (primary buttons are highlighted, danger turns red,
+ *      icon-only actions render a compact icon button).
+ *   2. A metadata strip: type, target, locations, shortcut, bulk
+ *      flag, AI exposure, refreshAfter, confirmText.
+ *   3. A params table when the action prompts the user — this is the
+ *      modal/drawer it would open on click. We render it as a static
+ *      preview, not an interactive form, because previews must be
+ *      side-effect free.
+ *   4. A "what happens on click" callout that describes the resolved
+ *      handler in plain language (e.g. "POST ${target}", "open form
+ *      ${target}", "run script ${target}").
+ *   5. A resultDialog mock when configured (TOTP / backup-codes-style
+ *      reveal dialogs).
+ */
+import * as React from 'react';
+import { AlertTriangle, Bot, Code2, Eye, Globe, Keyboard, LayoutGrid, Link2, Lock, MoreHorizontal, Pencil, RefreshCw, ScanLine, Sparkles, Square, Workflow, icons as lucideIcons, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+function localize(v) {
+    if (v == null)
+        return '';
+    if (typeof v === 'string')
+        return v;
+    if (typeof v === 'object') {
+        const o = v;
+        return o.en ?? o['en-US'] ?? Object.values(o)[0] ?? '';
+    }
+    return String(v);
+}
+function typeIcon(type) {
+    switch (type) {
+        case 'url':
+            return Link2;
+        case 'modal':
+            return LayoutGrid;
+        case 'flow':
+            return Workflow;
+        case 'api':
+            return Globe;
+        case 'form':
+            return Pencil;
+        case 'script':
+        default:
+            return Code2;
+    }
+}
+function variantClasses(variant) {
+    switch (variant) {
+        case 'primary':
+        case 'default':
+        case undefined:
+            // Shadcn-native default button is a solid primary, not an outline.
+            return 'bg-primary text-primary-foreground hover:opacity-90';
+        case 'danger':
+        case 'destructive':
+            return 'bg-red-600 text-white hover:bg-red-700';
+        case 'secondary':
+            return 'bg-secondary text-secondary-foreground hover:opacity-90';
+        case 'ghost':
+            return 'bg-transparent text-foreground hover:bg-accent';
+        case 'link':
+            return 'bg-transparent text-primary underline-offset-2 hover:underline px-0';
+        default:
+            // 'outline' and any unrecognized variant fall back to a bordered button.
+            return 'border bg-background text-foreground hover:bg-accent';
+    }
+}
+function describeHandler(type, target, hasBody) {
+    if (!target && !hasBody)
+        return 'No handler bound yet.';
+    switch (type) {
+        case 'url':
+            return `Navigate to ${target}`;
+        case 'flow':
+            return `Run flow ${target}`;
+        case 'modal':
+            return `Open modal ${target}`;
+        case 'api':
+            return `Call API endpoint ${target}`;
+        case 'form':
+            return `Open form view ${target} (/console/forms/${target ?? '?'})`;
+        case 'script':
+            return hasBody
+                ? 'Run inline script body (L1 expression or L2 sandboxed JS).'
+                : `Run named script ${target}`;
+        default:
+            return `Invoke ${target}`;
+    }
+}
+export function ActionPreview({ name, draft }) {
+    const d = draft;
+    const actionName = String(d.name ?? name ?? '');
+    const label = localize(d.label) || actionName;
+    const icon = d.icon || undefined;
+    const type = String(d.type ?? 'script');
+    const target = d.target ?? d.execute;
+    const variant = d.variant || undefined;
+    const component = String(d.component ?? '');
+    const locations = Array.isArray(d.locations) ? d.locations : [];
+    const shortcut = d.shortcut || undefined;
+    const bulkEnabled = !!d.bulkEnabled;
+    const refreshAfter = !!d.refreshAfter;
+    const aiExposed = d.aiExposed;
+    const confirmText = localize(d.confirmText);
+    const successMessage = localize(d.successMessage);
+    const params = Array.isArray(d.params) ? d.params : [];
+    const resultDialog = d.resultDialog;
+    const body = d.body;
+    const objectName = d.objectName || undefined;
+    const visible = d.visible;
+    const disabled = d.disabled;
+    const method = d.method || 'POST';
+    const bodyExtra = d.bodyExtra;
+    const TypeIcon = typeIcon(type);
+    const iconOnly = component === 'action:icon';
+    if (!actionName && !label) {
+        return (_jsx(PreviewShell, { hint: "action", children: _jsx(PreviewMessage, { children: "Set name and label to see the action preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "action", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-4 flex items-center justify-center min-h-[80px]", children: _jsx(FauxButton, { label: label, icon: icon, variant: variant, iconOnly: iconOnly, disabled: !!disabled && typeof disabled === 'boolean' }) }), _jsxs("div", { className: "rounded border bg-background p-3 text-xs space-y-1.5", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: actionName })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: TypeIcon, label: `type: ${type}` }), objectName && _jsx(Pill, { icon: Square, label: `object: ${objectName}`, mono: true }), variant && _jsx(Pill, { label: `variant: ${variant}` }), component && _jsx(Pill, { icon: MoreHorizontal, label: component }), shortcut && _jsx(Pill, { icon: Keyboard, label: shortcut, mono: true }), bulkEnabled && _jsx(Pill, { icon: ScanLine, label: "bulk", tone: "green" }), refreshAfter && _jsx(Pill, { icon: RefreshCw, label: "refresh after" }), aiExposed === false && _jsx(Pill, { icon: Bot, label: "AI: opted out", tone: "amber" }), aiExposed === true && _jsx(Pill, { icon: Sparkles, label: "AI: exposed" })] }), locations.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1 pt-1", children: [_jsx("span", { className: "text-muted-foreground", children: "Locations:" }), locations.map((l) => (_jsx("span", { className: "inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-mono", children: l }, l)))] })), Boolean(typeof visible === 'string' || (visible && typeof visible === 'object')) && (_jsx(ConditionLine, { label: "Visible when", value: visible, icon: Eye })), disabled != null && typeof disabled !== 'boolean' && (_jsx(ConditionLine, { label: "Disabled when", value: disabled, icon: Lock }))] }), _jsxs("div", { className: "rounded border border-blue-200 bg-blue-50 p-2.5 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-blue-900 mb-0.5", children: [_jsx(TypeIcon, { className: "h-3.5 w-3.5" }), " On click"] }), _jsx("div", { className: "text-blue-950 font-mono break-all", children: describeHandler(type, target, !!body?.source) }), confirmText && (_jsxs("div", { className: "mt-1.5 flex items-start gap-1.5 text-amber-900", children: [_jsx(AlertTriangle, { className: "h-3 w-3 mt-0.5" }), _jsxs("span", { children: ["First asks: ", _jsx("em", { children: confirmText })] })] })), successMessage && (_jsxs("div", { className: "mt-1.5 text-blue-950", children: ["On success: ", _jsx("em", { children: successMessage })] }))] }), locations.length > 0 && (_jsx(Section, { title: "Where it appears", children: _jsx(PlacementPreview, { locations: locations, label: label, icon: icon, variant: variant, iconOnly: iconOnly }) })), type === 'api' && !!target && (_jsx(Section, { title: "Test request", icon: Globe, children: _jsx(ApiTestPanel, { target: target, method: method, bodyExtra: bodyExtra, params: params }) })), params.length > 0 && (_jsx(Section, { title: "Input Dialog", count: params.length, children: _jsx(DialogMock, { title: label, params: params, variant: variant }) })), resultDialog && (_jsx(Section, { title: "Result Dialog", icon: Eye, children: _jsx(ResultDialogMock, { dialog: resultDialog }) })), body?.source && (_jsx(Section, { title: `Script Body (${body.language ?? 'expression'})`, icon: Code2, children: _jsx("pre", { className: "m-0 rounded border bg-background p-2.5 text-xs font-mono whitespace-pre-wrap max-h-[200px] overflow-auto", children: body.source }) }))] }) }) }));
+}
+function FauxButton({ label, icon, variant, iconOnly, disabled, }) {
+    const cls = `inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium pointer-events-none ${variantClasses(variant)} ${disabled ? 'opacity-50' : ''}`;
+    return (_jsxs("button", { type: "button", className: cls, "aria-disabled": true, disabled: true, children: [icon && _jsx(IconHint, { name: icon }), !iconOnly && _jsx("span", { children: label })] }));
+}
+/**
+ * Render the action's bound Lucide icon by name (kebab- or PascalCase).
+ * Falls back to a compact name chip when the icon can't be resolved, so
+ * the author still sees that an icon binding is in place.
+ */
+function IconHint({ name }) {
+    const pascal = name
+        .split(/[-_\s]+/)
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join('');
+    const resolved = pascal === 'Home' ? 'House' : pascal;
+    const Glyph = lucideIcons[resolved];
+    if (Glyph) {
+        return _jsx(Glyph, { className: "h-4 w-4", "aria-hidden": true });
+    }
+    return (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-white/30 px-1 text-[9px] uppercase font-mono", children: name.slice(0, 3) }));
+}
+function DialogMock({ title, params, variant }) {
+    return (_jsxs("div", { className: "rounded border bg-background shadow-sm", children: [_jsx("div", { className: "border-b bg-muted/30 px-3 py-2 text-xs font-medium", children: title }), _jsx("div", { className: "p-3 space-y-2", children: params.map((p, i) => {
+                    const fieldName = p.name ?? p.field ?? `param_${i}`;
+                    const fieldLabel = localize(p.label) || fieldName;
+                    return (_jsxs("div", { className: "space-y-0.5", children: [_jsxs("label", { className: "text-xs flex items-center gap-1", children: [fieldLabel, p.required && _jsx("span", { className: "text-red-600 text-[10px]", children: "*" }), _jsx("span", { className: "ml-1 font-mono text-[9px] text-muted-foreground", children: fieldName }), p.type && _jsx("span", { className: "font-mono text-[9px] text-muted-foreground", children: p.type })] }), renderFieldMock(p), p.helpText && _jsx("div", { className: "text-[10px] text-muted-foreground", children: p.helpText })] }, i));
+                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t bg-muted/20 px-3 py-2", children: [_jsx("button", { type: "button", disabled: true, className: "text-xs px-2.5 py-1 rounded border bg-background pointer-events-none", children: "Cancel" }), _jsx("button", { type: "button", disabled: true, className: `text-xs px-2.5 py-1 rounded pointer-events-none ${variantClasses(variant || 'primary')}`, children: "OK" })] })] }));
+}
+function renderFieldMock(p) {
+    const cls = 'w-full text-xs px-2 py-1 border rounded bg-background pointer-events-none';
+    const placeholder = p.placeholder || (p.defaultFromRow ? '(from selected row)' : '');
+    const def = p.defaultValue;
+    if (Array.isArray(p.options) && p.options.length > 0) {
+        return (_jsxs("select", { className: cls, disabled: true, value: "", children: [_jsx("option", { value: "", children: placeholder || '— select —' }), p.options.map((o, i) => (_jsx("option", { value: o.value, children: localize(o.label) }, i)))] }));
+    }
+    if (p.type === 'boolean') {
+        return (_jsxs("label", { className: "inline-flex items-center gap-1.5 text-xs", children: [_jsx("input", { type: "checkbox", disabled: true, className: "pointer-events-none" }), " Toggle"] }));
+    }
+    if (p.type === 'textarea' || p.type === 'html' || p.type === 'long_text') {
+        return _jsx("textarea", { className: `${cls} min-h-[48px]`, placeholder: placeholder, value: def != null ? String(def) : '', readOnly: true });
+    }
+    return (_jsx("input", { type: p.type === 'number' || p.type === 'integer' ? 'number' : p.type === 'date' ? 'date' : 'text', className: cls, placeholder: placeholder, value: def != null ? String(def) : '', readOnly: true }));
+}
+function ResultDialogMock({ dialog }) {
+    const title = localize(dialog.title) || 'Result';
+    const description = localize(dialog.description);
+    const acknowledge = localize(dialog.acknowledge) || 'I have saved this';
+    const fields = dialog.fields ?? [];
+    return (_jsxs("div", { className: "rounded border bg-background shadow-sm", children: [_jsx("div", { className: "border-b bg-muted/30 px-3 py-2 text-xs font-medium", children: title }), _jsxs("div", { className: "p-3 space-y-2 text-xs", children: [description && _jsx("div", { className: "text-muted-foreground", children: description }), fields.length === 0 ? (_jsx("div", { className: "text-muted-foreground italic", children: "Renders full JSON response." })) : (_jsx("ul", { className: "space-y-1.5", children: fields.map((f, i) => (_jsx("li", { className: "rounded border bg-muted/20 p-2", children: _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-medium", children: localize(f.label) || f.path }), _jsx("span", { className: "font-mono text-[9px] text-muted-foreground", children: f.path }), _jsx("span", { className: "ml-auto font-mono text-[9px] uppercase text-muted-foreground", children: f.format ?? dialog.format ?? 'json' })] }) }, i))) }))] }), _jsx("div", { className: "flex items-center justify-end border-t bg-muted/20 px-3 py-2", children: _jsx("button", { type: "button", disabled: true, className: "text-xs px-2.5 py-1 rounded bg-primary text-primary-foreground pointer-events-none", children: acknowledge }) })] }));
+}
+function ConditionLine({ label, value, icon: Icon }) {
+    const src = typeof value === 'string' ? value : value?.source ?? JSON.stringify(value);
+    return (_jsxs("div", { className: "flex items-start gap-1.5 pt-0.5", children: [_jsx(Icon, { className: "h-3 w-3 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("span", { className: "text-muted-foreground", children: [label, ":"] }), _jsx("code", { className: "font-mono break-all", children: src })] }));
+}
+function Section({ title, count, icon: Icon, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [Icon && _jsx(Icon, { className: "h-3 w-3" }), _jsx("span", { children: title }), count != null && _jsxs("span", { className: "opacity-70", children: ["(", count, ")"] })] }), children] }));
+}
+function Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green'
+        ? 'text-emerald-700'
+        : tone === 'amber'
+            ? 'text-amber-700'
+            : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: `${cls} ${mono ? 'font-mono' : ''}`, children: label })] }));
+}
+/* ─────────────── Placement simulation (where it appears) ─────────────── */
+function Frame({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[10px] font-mono uppercase tracking-wider text-muted-foreground/70", children: label }), children] }));
+}
+function PlacementPreview({ locations, label, icon, variant, iconOnly }) {
+    const btn = _jsx(FauxButton, { label: label, icon: icon, variant: variant, iconOnly: iconOnly });
+    return (_jsxs("div", { className: "space-y-2.5", children: [locations.includes('record_header') && (_jsx(Frame, { label: "record_header", children: _jsxs("div", { className: "rounded border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded bg-muted" }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium", children: "Sample record" }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: "Record detail" })] })] }), _jsx("div", { className: "flex items-center gap-1.5", children: btn })] }), _jsx("div", { className: "p-3 text-[10px] text-muted-foreground", children: "\u2026record body\u2026" })] }) })), locations.includes('list_toolbar') && (_jsx(Frame, { label: "list_toolbar", children: _jsxs("div", { className: "rounded border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx("div", { className: "text-xs font-medium", children: "Records" }), _jsx("div", { className: "flex items-center gap-1.5", children: btn })] }), _jsx("div", { className: "px-3 py-2 text-[10px] text-muted-foreground", children: "row 1 \u00B7 row 2 \u00B7 row 3" })] }) })), locations.includes('list_item') && (_jsx(Frame, { label: "list_item", children: _jsx("div", { className: "divide-y rounded border bg-background", children: [0, 1].map((i) => (_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1.5", children: [_jsxs("span", { className: "text-[11px]", children: ["Row ", i + 1] }), _jsx("div", { className: "origin-right scale-90", children: btn })] }, i))) }) })), (locations.includes('record_section') || locations.includes('record_related')) && (_jsx(Frame, { label: locations.includes('record_related') ? 'record_related' : 'record_section', children: _jsxs("div", { className: "rounded border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsx("span", { className: "text-xs font-medium", children: "Section" }), btn] }), _jsx("div", { className: "p-3 text-[10px] text-muted-foreground", children: "\u2026section content\u2026" })] }) })), locations.includes('record_more') && (_jsx(Frame, { label: "record_more", children: _jsxs("div", { className: "w-52 rounded border bg-background", children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b px-3 py-1.5 text-[11px] text-muted-foreground", children: [_jsx(MoreHorizontal, { className: "h-3.5 w-3.5" }), " More"] }), _jsx("div", { className: "px-2 py-1.5 text-xs", children: _jsx("div", { className: "rounded px-1 py-0.5 hover:bg-accent", children: label }) })] }) })), locations.includes('global_nav') && (_jsx(Frame, { label: "global_nav", children: _jsxs("div", { className: "rounded border bg-background", children: [_jsx("div", { className: "px-3 py-2 text-[11px] text-muted-foreground", children: "\u2318K \u00B7 Command palette" }), _jsx("div", { className: "border-t px-3 py-1.5 text-xs", children: _jsx("div", { className: "rounded px-1 py-0.5 hover:bg-accent", children: label }) })] }) }))] }));
+}
+/* ─────────────── Test request runner (api type) ─────────────── */
+function ApiTestPanel({ target, method, bodyExtra, params }) {
+    const m = (method || 'POST').toUpperCase();
+    const [resp, setResp] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const reqBody = (bodyExtra && typeof bodyExtra === 'object') ? bodyExtra : {};
+    const run = async () => {
+        setLoading(true);
+        setResp(null);
+        try {
+            const token = (typeof localStorage !== 'undefined') ? localStorage.getItem('auth-session-token') : null;
+            const headers = { 'Content-Type': 'application/json' };
+            if (token)
+                headers.Authorization = `Bearer ${token}`;
+            const init = { method: m, headers, credentials: 'include' };
+            if (m !== 'GET' && m !== 'HEAD')
+                init.body = JSON.stringify(reqBody);
+            const r = await fetch(target, init);
+            const text = await r.text();
+            let parsed = text;
+            try {
+                parsed = JSON.parse(text);
+            }
+            catch { /* keep text */ }
+            setResp({ status: r.status, ok: r.ok, body: parsed });
+        }
+        catch (e) {
+            setResp({ status: 0, ok: false, error: e instanceof Error ? e.message : String(e) });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-2 text-xs", children: [_jsxs("div", { className: "rounded border bg-background p-2 font-mono text-[11px] break-all", children: [_jsx("span", { className: "font-semibold", children: m }), " ", target] }), Object.keys(reqBody).length > 0 && (_jsx("pre", { className: "m-0 rounded border bg-muted/30 p-2 text-[10px] font-mono whitespace-pre-wrap", children: JSON.stringify(reqBody, null, 2) })), params.length > 0 && (_jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["+ ", params.length, " user-supplied param", params.length > 1 ? 's' : '', " collected at runtime"] })), m !== 'GET' && (_jsxs("div", { className: "flex items-start gap-1.5 text-[10px] text-amber-700", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsxs("span", { children: ["Sends a real ", m, " request to the live backend \u2014 may modify data."] })] })), _jsxs("button", { type: "button", onClick: run, disabled: loading, className: "inline-flex items-center gap-1.5 rounded border bg-background px-2.5 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50", children: [_jsx(Globe, { className: "h-3.5 w-3.5" }), " ", loading ? 'Sending…' : 'Send test request'] }), resp && (_jsxs("div", { className: 'rounded border p-2 ' + (resp.ok ? 'border-green-300 bg-green-50' : 'border-red-300 bg-red-50'), children: [_jsx("div", { className: "mb-1 text-[11px] font-medium", children: resp.error ? 'Network error' : ('HTTP ' + resp.status + (resp.ok ? ' OK' : '')) }), _jsx("pre", { className: "m-0 max-h-[200px] overflow-auto text-[10px] font-mono whitespace-pre-wrap", children: resp.error ?? (typeof resp.body === 'string' ? resp.body : JSON.stringify(resp.body, null, 2)) })] }))] }));
+}

package/dist/views/metadata-admin/previews/AddWidgetPicker.d.ts

@@ -0,0 +1,12 @@
+/**
+ * AddWidgetPicker — popover with a search box and categorized list
+ * of dashboard widget types. Picking a type calls `onAdd(type)`.
+ * Closes on selection so authors land on the new widget's
+ * inspector right away.
+ */
+import * as React from 'react';
+export interface AddWidgetPickerProps {
+    onAdd: (type: string) => void;
+    label?: string;
+}
+export declare function AddWidgetPicker({ onAdd, label }: AddWidgetPickerProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/AddWidgetPicker.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * AddWidgetPicker — popover with a search box and categorized list
+ * of dashboard widget types. Picking a type calls `onAdd(type)`.
+ * Closes on selection so authors land on the new widget's
+ * inspector right away.
+ */
+import * as React from 'react';
+import { Plus, Search } from 'lucide-react';
+import { WIDGETS_BY_CATEGORY, WIDGET_CATEGORY_LABEL, WIDGET_TYPE_META, UnknownWidgetIcon, } from './widget-types';
+export function AddWidgetPicker({ onAdd, label = 'Add widget' }) {
+    const [open, setOpen] = React.useState(false);
+    const [q, setQ] = React.useState('');
+    const popoverRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open) {
+            setQ('');
+            return;
+        }
+        const onDoc = (e) => {
+            if (!popoverRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onDoc);
+        document.addEventListener('keydown', onKey);
+        queueMicrotask(() => inputRef.current?.focus());
+        return () => {
+            document.removeEventListener('mousedown', onDoc);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+    const filtered = React.useMemo(() => {
+        const ql = q.trim().toLowerCase();
+        if (!ql)
+            return WIDGETS_BY_CATEGORY;
+        return WIDGETS_BY_CATEGORY
+            .map((group) => ({
+            category: group.category,
+            types: group.types.filter((t) => t.id.toLowerCase().includes(ql) || t.label.toLowerCase().includes(ql)),
+        }))
+            .filter((g) => g.types.length);
+    }, [q]);
+    return (_jsxs("div", { ref: popoverRef, className: "relative", children: [_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-dashed px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/30 hover:text-foreground", onClick: () => setOpen((v) => !v), children: [_jsx(Plus, { className: "h-3 w-3" }), label] }), open && (_jsxs("div", { className: "absolute right-0 top-full z-40 mt-1 w-72 rounded-md border bg-popover shadow-md", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-2 py-1.5", children: [_jsx(Search, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("input", { ref: inputRef, type: "text", value: q, onChange: (e) => setQ(e.target.value), placeholder: "Search widgets\u2026", className: "w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground" })] }), _jsx("div", { className: "max-h-72 overflow-auto py-1", children: filtered.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: "No matches." })) : (filtered.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "px-3 pt-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground", children: WIDGET_CATEGORY_LABEL[group.category] }), group.types.map((t) => {
+                                    const Icon = (WIDGET_TYPE_META[t.id]?.icon ?? UnknownWidgetIcon);
+                                    return (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent", onClick: () => {
+                                            onAdd(t.id);
+                                            setOpen(false);
+                                        }, children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "font-medium truncate", children: t.label }), _jsx("code", { className: "ml-auto text-[10px] text-muted-foreground", children: t.id })] }, t.id));
+                                })] }, group.category)))) })] }))] }));
+}

package/dist/views/metadata-admin/previews/AgentPreview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * AgentPreview — read-only summary of an AI Agent metadata draft.
+ *
+ * Shows the configuration an operator needs to sanity-check an agent
+ * before saving:
+ *   • Persona header (avatar, label, role, visibility, active flag).
+ *   • Model config (provider, model id, temperature, max tokens).
+ *   • System prompt / instructions in a scrollable monospace block.
+ *   • Skills + Tools as two collapsible chip lists.
+ *   • Knowledge sources (RAG indices) when present.
+ *   • Planning + guardrails callouts.
+ *
+ * We intentionally do **not** wire a live chat into this preview:
+ *   1. The draft may reference unsaved skills/tools the runtime can't
+ *      resolve, so a chat would just error.
+ *   2. AI calls cost real money; a preview tab that silently spends
+ *      tokens whenever someone clicks the tab is bad UX.
+ * Instead we render a "Try it" button that links to the runtime
+ * agent chat (`/console/ai/agents/<name>/chat`) where the saved
+ * version of this agent can be exercised properly.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function AgentPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/AgentPreview.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Bot, BrainCircuit, Database, ExternalLink, Eye, EyeOff, Gauge, Lock, ScrollText, Shield, Sparkles, Wrench, } from 'lucide-react';
+import { cn } from '@object-ui/components';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+export function AgentPreview({ name, draft }) {
+    const d = draft;
+    const agentName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? agentName);
+    const role = String(d.role ?? '');
+    const avatar = d.avatar || undefined;
+    const instructions = String(d.instructions ?? '');
+    const active = d.active !== false;
+    const visibility = String(d.visibility ?? 'organization');
+    const model = (d.model ?? {});
+    const skills = Array.isArray(d.skills) ? d.skills : [];
+    const tools = Array.isArray(d.tools) ? d.tools : [];
+    const knowledge = d.knowledge;
+    const planning = d.planning;
+    const memory = d.memory;
+    const guardrails = d.guardrails;
+    const permissions = Array.isArray(d.permissions) ? d.permissions : [];
+    if (!agentName && !instructions && skills.length === 0 && tools.length === 0) {
+        return (_jsx(PreviewShell, { hint: "agent", children: _jsx(PreviewMessage, { children: "Fill in label, role, and instructions in the Form tab to see the agent preview." }) }));
+    }
+    const chatUrl = agentName ? `/console/ai/agents/${encodeURIComponent(agentName)}/chat` : null;
+    return (_jsx(PreviewShell, { hint: "agent", toolbar: chatUrl && (_jsxs("a", { href: chatUrl, target: "_blank", rel: "noreferrer", className: "text-xs inline-flex items-center gap-1 text-muted-foreground hover:text-foreground", title: "Open the saved version of this agent in a new chat", children: ["Try in chat ", _jsx(ExternalLink, { className: "h-3 w-3" })] })), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "grid lg:grid-cols-[1fr_240px] gap-0", children: [_jsxs("div", { className: "p-3 space-y-3 min-w-0", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3 flex items-start gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full bg-background border flex items-center justify-center shrink-0 overflow-hidden", children: avatar ? (_jsx("img", { src: avatar, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Bot, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: agentName })] }), role && _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: role }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: active ? Eye : EyeOff, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), _jsx(Pill, { icon: Lock, label: visibility }), model.provider && _jsx(Pill, { icon: Sparkles, label: `${model.provider}${model.model ? ` · ${model.model}` : ''}`, mono: true }), model.temperature != null && _jsx(Pill, { icon: Gauge, label: `temp ${model.temperature}` }), model.maxTokens != null && _jsx(Pill, { label: `max ${model.maxTokens}t` })] })] })] }), _jsx(Section, { title: "Instructions", icon: ScrollText, children: instructions ? (_jsx("pre", { className: "m-0 rounded border bg-background p-2.5 text-xs whitespace-pre-wrap font-mono max-h-[40vh] overflow-auto", children: instructions })) : (_jsx(Empty, { children: "No system prompt set yet." })) }), _jsx(Section, { title: "Capabilities", icon: Wrench, children: _jsxs("div", { className: "space-y-2", children: [_jsx(ChipList, { label: "Skills", emptyHint: "Attach skills (preferred)", items: skills.map((s) => ({ key: s, label: s })), icon: Sparkles, tone: "violet", mono: true }), _jsx(ChipList, { label: "Tools", emptyHint: "No direct tools (skills can provide them)", items: tools.map((t, i) => ({ key: `${t.type ?? ''}:${t.name ?? i}`, label: t.name ?? String(t), hint: t.type })), icon: Wrench, tone: "blue", mono: true })] }) }), knowledge && Object.keys(knowledge).length > 0 && (_jsx(Section, { title: "Knowledge (RAG)", icon: Database, children: _jsx(KnowledgeSummary, { knowledge: knowledge }) }))] }), _jsxs("div", { className: "border-l bg-muted/20 p-3 text-xs space-y-3", children: [planning && Object.keys(planning).length > 0 && (_jsx(RailBlock, { icon: BrainCircuit, title: "Planning", children: _jsx(KeyVals, { data: planning, keys: ['strategy', 'maxIterations', 'allowReplan'] }) })), memory && Object.keys(memory).length > 0 && (_jsx(RailBlock, { icon: Activity, title: "Memory", children: _jsx(KeyVals, { data: {
+                                        'short.maxMessages': memory.shortTerm?.maxMessages,
+                                        'long.enabled': memory.longTerm?.enabled,
+                                        'long.store': memory.longTerm?.store,
+                                    }, keys: ['short.maxMessages', 'long.enabled', 'long.store'] }) })), guardrails && Object.keys(guardrails).length > 0 && (_jsx(RailBlock, { icon: Shield, title: "Guardrails", children: _jsx(KeyVals, { data: guardrails, keys: Object.keys(guardrails).slice(0, 6) }) })), permissions.length > 0 && (_jsx(RailBlock, { icon: Lock, title: "Permissions", children: _jsx("ul", { className: "space-y-0.5", children: permissions.map((p) => _jsx("li", { className: "font-mono", children: p }, p)) }) })), !planning && !memory && !guardrails && permissions.length === 0 && (_jsx("div", { className: "text-muted-foreground italic", children: "Defaults in use." }))] })] }) }) }));
+}
+function KnowledgeSummary({ knowledge }) {
+    const sources = Array.isArray(knowledge.sources) ? knowledge.sources : [];
+    const indexes = Array.isArray(knowledge.indexes) ? knowledge.indexes : [];
+    const items = [...sources, ...indexes];
+    if (items.length === 0) {
+        const keys = Object.keys(knowledge);
+        return (_jsx("div", { className: "text-xs text-muted-foreground font-mono", children: keys.length ? keys.join(', ') : 'configured' }));
+    }
+    return (_jsx("ul", { className: "rounded border bg-background divide-y text-xs", children: items.map((s, i) => {
+            const obj = (s ?? {});
+            const id = (obj.id ?? obj.name ?? `source ${i + 1}`);
+            const kind = (obj.type ?? obj.kind ?? '');
+            return (_jsxs("li", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [_jsx(Database, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: "font-mono", children: String(id) }), kind && _jsx("span", { className: "text-[10px] uppercase text-muted-foreground", children: kind })] }, i));
+        }) }));
+}
+function Section({ title, icon: Icon, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [Icon && _jsx(Icon, { className: "h-3 w-3" }), _jsx("span", { children: title })] }), children] }));
+}
+function Empty({ children }) {
+    return _jsx("div", { className: "text-xs text-muted-foreground italic", children: children });
+}
+/**
+ * Tone presets for capability chips — keep skills and tools visually
+ * distinct at a glance. Full Tailwind class strings (JIT) with light +
+ * dark variants.
+ */
+const CHIP_TONE = {
+    violet: {
+        chip: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-300',
+        icon: 'text-violet-500 dark:text-violet-400',
+    },
+    blue: {
+        chip: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
+        icon: 'text-blue-500 dark:text-blue-400',
+    },
+};
+function ChipList({ label, emptyHint, items, icon: Icon, tone, mono = false, }) {
+    const t = tone ? CHIP_TONE[tone] : null;
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase text-muted-foreground tracking-wider mb-1", children: label }), items.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground italic", children: emptyHint })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: items.map((it) => (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px]', t ? t.chip : 'bg-background', mono && 'font-mono'), children: [Icon && _jsx(Icon, { className: cn('h-3 w-3 shrink-0', t?.icon) }), it.label, it.hint && _jsx("span", { className: "text-[9px] uppercase opacity-70", children: it.hint })] }, it.key))) }))] }));
+}
+function RailBlock({ icon: Icon, title, children, }) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] uppercase text-muted-foreground tracking-wider mb-1", children: [_jsx(Icon, { className: "h-3 w-3" }), " ", title] }), children] }));
+}
+function KeyVals({ data, keys }) {
+    const rows = keys
+        .map((k) => [k, getPath(data, k)])
+        .filter(([, v]) => v !== undefined && v !== null);
+    if (rows.length === 0)
+        return _jsx("div", { className: "text-muted-foreground italic", children: "\u2014" });
+    return (_jsx("dl", { className: "space-y-0.5", children: rows.map(([k, v]) => (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-muted-foreground font-mono truncate", children: k }), _jsx("dd", { className: "font-mono text-right truncate", children: String(v) })] }, k))) }));
+}
+function getPath(obj, path) {
+    const parts = path.split('.');
+    let cur = obj;
+    for (const p of parts) {
+        if (cur == null)
+            return undefined;
+        cur = cur[p];
+    }
+    return cur;
+}
+function Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green'
+        ? 'text-emerald-700'
+        : tone === 'amber'
+            ? 'text-amber-700'
+            : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: `${cls} ${mono ? 'font-mono' : ''}`, children: label })] }));
+}

package/dist/views/metadata-admin/previews/AppNavCanvas.d.ts

@@ -0,0 +1,31 @@
+/**
+ * AppNavCanvas — form-canvas-style editor for an App's top-level
+ * navigation tree. Each nav entry becomes a card with a drag handle,
+ * a kind icon, an inline-rename label, the bound path, and a remove
+ * affordance on hover. Drag-drop reorders within the root list.
+ *
+ * Nested children are rendered indented; cross-level moves and
+ * adding child items are still handled by AppNavInspector (the
+ * canvas keeps DnD focused on the root list to avoid surprising
+ * cross-tree reorders).
+ *
+ * Selection IDs match AppNavInspector:
+ *   { kind: 'nav', id: `${rootKey}[${i}]` }
+ *   { kind: 'nav', id: `${rootKey}[${i}].children[${j}]` }
+ */
+import * as React from 'react';
+export interface AppNavCanvasProps {
+    draft: Record<string, unknown>;
+    rootKey: string;
+    onPatch?: (patch: Record<string, unknown>) => void;
+    selection: {
+        kind: string;
+        id: string;
+    } | null;
+    onSelectionChange?: (sel: {
+        kind: string;
+        id: string;
+        label?: string;
+    } | null) => void;
+}
+export declare function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionChange, }: AppNavCanvasProps): React.JSX.Element;