@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ScreenPreview — live design-time preview of a flow `screen` node, rendered
+ * exactly as the end user will see it at runtime.
+ *
+ * It builds a runtime `ScreenSpec` from the node's authored `config` and hands
+ * it to the shared {@link ScreenView} — the SAME renderer the runtime
+ * FlowRunner uses — so the preview can never drift from runtime (the
+ * design↔runtime divergence #1927 set out to kill). `{var}` references in the
+ * title/description are interpolated, and `fields` are gated by their
+ * `visibleWhen`, against the supplied `variables` (the flow's declared defaults
+ * in the inspector, or the live simulated values when paused in the Debug
+ * simulator).
+ *
+ * Object-form mode is fed the SAME enriched object list the runtime uses
+ * (`useMetadata().objects`, which derives inline master-detail `subforms` from
+ * `inlineEdit` relationships) so the preview renders those child grids too.
+ *
+ * Homes: the flow node inspector (live-updates as the config is edited) and the
+ * Debug simulator's paused-at-screen state.
+ */
+import * as React from 'react';
+import { Button, cn } from '@object-ui/components';
+import { useAdapter } from '../../../providers/AdapterProvider';
+import { useMetadata } from '../../../providers/MetadataProvider';
+import { ScreenView, isObjectFormScreen, initialScreenValues } from '../../ScreenView';
+import { buildScreenSpec, interpolate, hiddenFieldCount } from './screen-spec';
+export function ScreenPreview({ node, variables, className }) {
+    const adapter = useAdapter();
+    const meta = useMetadata();
+    const spec = React.useMemo(() => buildScreenSpec(node, variables), [node, variables]);
+    const isObjectForm = isObjectFormScreen(spec);
+    // Enriched object defs (incl. derived master-detail `subforms`) — the exact
+    // list the runtime FlowRunner gets. Only read in object-form mode so a plain
+    // field screen never triggers the all-objects fetch.
+    const objects = isObjectForm ? meta.objects : undefined;
+    const title = interpolate(spec.title, variables);
+    const description = interpolate(spec.description, variables);
+    const hidden = isObjectForm ? 0 : hiddenFieldCount(node, variables);
+    // Reset transient input state when the screen's STRUCTURE changes (fields
+    // added/removed/retyped/gated, or object-form target/mode); typing survives a
+    // label/title-only edit.
+    const structKey = isObjectForm
+        ? `obj:${spec.objectName}:${spec.mode ?? 'create'}`
+        : 'fields:' + spec.fields.map((f) => `${f.name}:${f.type ?? ''}:${f.required ? 1 : 0}`).join('|');
+    const empty = !title && !description && !isObjectForm && spec.fields.length === 0 && hidden === 0;
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-md border bg-background', className), children: [_jsx("div", { className: "flex items-center gap-1.5 border-b bg-muted/30 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Preview" }), _jsx("div", { className: "max-h-[60vh] overflow-auto p-4", children: empty ? (_jsx("p", { className: "text-sm italic text-muted-foreground", children: "Add a title, description, fields, or an object form to preview this screen." })) : (_jsxs(_Fragment, { children: [title && _jsx("h3", { className: "text-base font-semibold leading-tight", children: title }), description && (_jsx("p", { className: cn('whitespace-pre-line text-sm text-muted-foreground', title && 'mt-1'), children: description })), _jsx(ScreenFormPreview, { spec: spec, adapter: adapter, objects: objects }, structKey), !isObjectForm && hidden > 0 && (_jsxs("p", { className: "mt-3 text-[11px] italic text-muted-foreground", children: [hidden, " field", hidden === 1 ? '' : 's', " hidden by ", hidden === 1 ? 'its' : 'their', " \u201Cvisible when\u201D", ' ', "condition", hidden === 1 ? '' : 's', "."] })), !isObjectForm && spec.fields.length > 0 && (_jsx("div", { className: "mt-4 flex justify-end", children: _jsx(Button, { size: "sm", disabled: true, children: "Submit" }) }))] })) })] }));
+}
+/**
+ * Holds the transient field values so the preview is interactive (the author
+ * can type into it) while never persisting anything.
+ */
+function ScreenFormPreview({ spec, adapter, objects }) {
+    const [values, setValues] = React.useState(() => initialScreenValues(spec));
+    return (_jsx(ScreenView, { screen: spec, values: values, onValueChange: (name, v) => setValues((p) => ({ ...p, [name]: v })), dataSource: adapter ?? undefined, objects: objects, objectForm: {
+            showSubmit: false,
+            showCancel: false,
+            noDataSourceMessage: 'Connect to a backend to preview this object form.',
+        } }));
+}

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

@@ -0,0 +1,22 @@
+/**
+ * SkillPreview — read-only summary of an AI Skill draft.
+ *
+ * Skills are reusable bundles of (instructions + tool whitelist +
+ * trigger conditions) that agents pull in. The preview surfaces:
+ *
+ *   • Header pills: active flag, permission requirements, model
+ *     hint if present.
+ *   • Description block.
+ *   • Instructions — the prompt fragment injected into the agent's
+ *     system prompt, in a soft code block so the operator can read
+ *     it the way the LLM will.
+ *   • Tools — chip list. Wildcards (`*`, `prefix.*`) get highlighted
+ *     because they expand the agent's tool surface significantly.
+ *   • Trigger phrases — the natural-language hints that route a user
+ *     message into this skill.
+ *   • Trigger conditions — CEL/structured conditions, rendered as a
+ *     compact table.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function SkillPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Asterisk, BookOpen, Filter, MessagesSquare, Power, ShieldCheck, Sparkles, Wrench, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+export function SkillPreview({ name, draft }) {
+    const d = draft;
+    const skillName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? skillName);
+    const description = d.description ?? '';
+    const instructions = d.instructions ?? '';
+    const tools = Array.isArray(d.tools) ? d.tools : [];
+    const triggerPhrases = Array.isArray(d.triggerPhrases) ? d.triggerPhrases : [];
+    const triggerConditions = Array.isArray(d.triggerConditions)
+        ? d.triggerConditions
+        : [];
+    const permissions = Array.isArray(d.permissions) ? d.permissions : [];
+    const active = d.active !== false;
+    const model = d.model ?? undefined;
+    if (!skillName) {
+        return (_jsx(PreviewShell, { hint: "skill", children: _jsx(PreviewMessage, { children: "Give the skill a name and at least an instructions block to see the preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "skill", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Sparkles, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _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: skillName })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: Power, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), model && _jsx(Pill, { label: `model: ${model}`, mono: true }), permissions.length > 0 && (_jsx(Pill, { icon: ShieldCheck, label: `${permissions.length} required perm${permissions.length === 1 ? '' : 's'}` }))] })] })] }) }), _jsx(Section, { title: "Instructions", icon: BookOpen, children: instructions ? (_jsx("pre", { className: "rounded border bg-background p-2.5 text-xs font-mono whitespace-pre-wrap break-words max-h-64 overflow-auto", children: instructions })) : (_jsx("div", { className: "text-xs text-amber-700", children: "No instructions yet \u2014 the skill will contribute nothing to the prompt." })) }), _jsxs(Section, { title: `Tools (${tools.length})`, icon: Wrench, children: [tools.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground italic", children: "No tools whitelisted." })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: tools.map((t) => {
+                                    const isWild = t.includes('*');
+                                    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-mono border ${isWild ? 'border-amber-300 bg-amber-50 text-amber-900' : 'border-border bg-muted/40'}`, children: [isWild && _jsx(Asterisk, { className: "h-3 w-3" }), t] }, t));
+                                }) })), tools.some((t) => t.includes('*')) && (_jsx("div", { className: "mt-1 text-[10px] text-amber-700", children: "Wildcards expand to many tools at runtime \u2014 review the matching set in the agent before activating." }))] }), triggerPhrases.length > 0 && (_jsx(Section, { title: `Trigger Phrases (${triggerPhrases.length})`, icon: MessagesSquare, children: _jsx("ul", { className: "rounded border bg-background divide-y text-xs", children: triggerPhrases.map((p, i) => (_jsxs("li", { className: "px-2.5 py-1.5", children: [_jsx("span", { className: "text-muted-foreground mr-2", children: "\"" }), p, _jsx("span", { className: "text-muted-foreground ml-2", children: "\"" })] }, i))) }) })), triggerConditions.length > 0 && (_jsx(Section, { title: `Trigger Conditions (${triggerConditions.length})`, icon: Filter, children: _jsx("div", { className: "rounded border bg-background overflow-hidden", children: _jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { className: "divide-y", children: triggerConditions.map((cond, i) => (_jsxs("tr", { children: [_jsx("td", { className: "px-2.5 py-1.5 align-top w-24 text-muted-foreground text-[10px] uppercase", children: cond.type ?? 'cond' }), _jsx("td", { className: "px-2.5 py-1.5 font-mono break-all", children: cond.expression ??
+                                                    cond.value ??
+                                                    JSON.stringify(cond) })] }, i))) }) }) }) })), permissions.length > 0 && (_jsx(Section, { title: "Required Permissions", icon: ShieldCheck, children: _jsx("div", { className: "flex flex-wrap gap-1", children: permissions.map((p) => (_jsx("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: p }, p))) }) }))] }) }) }));
+}
+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 Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green' ? 'text-emerald-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/ToolPreview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ToolPreview — read-only summary of an AI Tool metadata draft.
+ *
+ * AI tools are LLM-callable functions whose contract is a JSON Schema
+ * in `parameters`. The preview renders:
+ *
+ *   1. A header strip: machine name, category, target object, flags
+ *      (active, requiresConfirmation, builtIn).
+ *   2. The description verbatim (this is what the LLM reads to decide
+ *      when to call the tool, so authors must be able to skim it).
+ *   3. An **input parameters** table extracted from the JSON Schema:
+ *      one row per top-level property with type, required marker,
+ *      description, enum hints, and default value.
+ *   4. An **output schema** mirror table when `outputSchema` is set.
+ *   5. A skeletal "example invocation" panel showing what the LLM
+ *      would emit if it called the tool with required fields stubbed.
+ *
+ * We do not run the tool from the preview — invocation requires auth,
+ * permission checks, and live datasource access that the preview
+ * sandbox doesn't provide. Authors get an `Open in API Console` link
+ * for end-to-end testing.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ToolPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ToolPreview — read-only summary of an AI Tool metadata draft.
+ *
+ * AI tools are LLM-callable functions whose contract is a JSON Schema
+ * in `parameters`. The preview renders:
+ *
+ *   1. A header strip: machine name, category, target object, flags
+ *      (active, requiresConfirmation, builtIn).
+ *   2. The description verbatim (this is what the LLM reads to decide
+ *      when to call the tool, so authors must be able to skim it).
+ *   3. An **input parameters** table extracted from the JSON Schema:
+ *      one row per top-level property with type, required marker,
+ *      description, enum hints, and default value.
+ *   4. An **output schema** mirror table when `outputSchema` is set.
+ *   5. A skeletal "example invocation" panel showing what the LLM
+ *      would emit if it called the tool with required fields stubbed.
+ *
+ * We do not run the tool from the preview — invocation requires auth,
+ * permission checks, and live datasource access that the preview
+ * sandbox doesn't provide. Authors get an `Open in API Console` link
+ * for end-to-end testing.
+ */
+import * as React from 'react';
+import { AlertTriangle, Box, CheckCircle2, ChevronRight, Database, ExternalLink, FileJson, Power, Tag, Wrench, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+function isObjectSchema(s) {
+    return !!s && typeof s === 'object' && typeof s.properties === 'object';
+}
+function typeLabel(p) {
+    if (!p)
+        return 'any';
+    if (Array.isArray(p.type))
+        return p.type.join('|');
+    if (p.type === 'array' && p.items)
+        return `${typeLabel(p.items)}[]`;
+    if (p.$ref)
+        return p.$ref.split('/').pop() || 'ref';
+    return p.type ?? 'any';
+}
+function stubValue(p) {
+    if (p.default !== undefined)
+        return p.default;
+    if (Array.isArray(p.enum) && p.enum.length)
+        return p.enum[0];
+    const t = Array.isArray(p.type) ? p.type[0] : p.type;
+    switch (t) {
+        case 'string':
+            return p.format ? `<${p.format}>` : '<string>';
+        case 'number':
+        case 'integer':
+            return 0;
+        case 'boolean':
+            return false;
+        case 'array':
+            return [];
+        case 'object':
+            return {};
+        default:
+            return null;
+    }
+}
+export function ToolPreview({ name, draft }) {
+    const d = draft;
+    const toolName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? toolName);
+    const description = String(d.description ?? '');
+    const category = d.category || undefined;
+    const objectName = d.objectName || undefined;
+    const requiresConfirmation = !!d.requiresConfirmation;
+    const active = d.active !== false;
+    const builtIn = !!d.builtIn;
+    const parameters = (d.parameters ?? {});
+    const outputSchema = (d.outputSchema ?? undefined);
+    const props = isObjectSchema(parameters) ? parameters.properties ?? {} : {};
+    const required = new Set(Array.isArray(parameters.required) ? parameters.required : []);
+    const exampleArgs = React.useMemo(() => {
+        const out = {};
+        for (const key of required) {
+            if (props[key])
+                out[key] = stubValue(props[key]);
+        }
+        // If there are no required fields, show the first optional one to
+        // give the LLM a reasonable example shape.
+        if (Object.keys(out).length === 0) {
+            const firstKey = Object.keys(props)[0];
+            if (firstKey)
+                out[firstKey] = stubValue(props[firstKey]);
+        }
+        return out;
+    }, [props, required]);
+    if (!toolName && !description && Object.keys(props).length === 0) {
+        return (_jsx(PreviewShell, { hint: "tool", children: _jsx(PreviewMessage, { children: "Set name, description, and parameters to see the tool preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "tool", toolbar: toolName && (_jsxs("a", { href: `/developer/api-console?path=/api/v1/ai/tools/${encodeURIComponent(toolName)}/invoke`, target: "_blank", rel: "noreferrer", className: "text-xs inline-flex items-center gap-1 text-muted-foreground hover:text-foreground", title: "Open API Console to test invocation", children: ["Open in API Console ", _jsx(ExternalLink, { className: "h-3 w-3" })] })), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3 space-y-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Wrench, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _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: toolName })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [category && _jsx(Pill, { icon: Tag, label: category }), objectName && _jsx(Pill, { icon: Database, label: objectName, mono: true }), _jsx(Pill, { icon: Power, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), requiresConfirmation && (_jsx(Pill, { icon: AlertTriangle, label: "Requires confirmation", tone: "amber" })), builtIn && _jsx(Pill, { label: "built-in" })] })] })] }), description && (_jsx("div", { className: "pl-6 text-xs text-foreground whitespace-pre-wrap", children: description }))] }), _jsx(Section, { title: "Input Parameters", count: Object.keys(props).length, children: Object.keys(props).length === 0 ? (_jsx(Empty, { children: "This tool takes no input parameters." })) : (_jsx(ParamTable, { props: props, required: required })) }), Object.keys(props).length > 0 && (_jsx(Section, { title: "Example LLM Call", icon: FileJson, children: _jsx("pre", { className: "m-0 rounded border bg-background p-2.5 text-xs font-mono overflow-auto max-h-[200px]", children: `{
+  "tool": "${toolName}",
+  "arguments": ${JSON.stringify(exampleArgs, null, 2).replace(/\n/g, '\n  ')}
+}` }) })), isObjectSchema(outputSchema) && outputSchema.properties && Object.keys(outputSchema.properties).length > 0 && (_jsx(Section, { title: "Output Schema", count: Object.keys(outputSchema.properties).length, icon: Box, children: _jsx(ParamTable, { props: outputSchema.properties, required: new Set(Array.isArray(outputSchema.required) ? outputSchema.required : []) }) }))] }) }) }));
+}
+function ParamTable({ props, required }) {
+    const keys = Object.keys(props);
+    return (_jsx("div", { className: "rounded border bg-background overflow-hidden", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-muted/30 text-left text-[10px] uppercase tracking-wider text-muted-foreground", children: [_jsx("th", { className: "px-2.5 py-1.5 font-medium", children: "Name" }), _jsx("th", { className: "px-2.5 py-1.5 font-medium", children: "Type" }), _jsx("th", { className: "px-2.5 py-1.5 font-medium", children: "Description" })] }) }), _jsx("tbody", { className: "divide-y", children: keys.map((k) => {
+                        const p = props[k];
+                        const isReq = required.has(k);
+                        return (_jsxs("tr", { className: "align-top", children: [_jsx("td", { className: "px-2.5 py-1.5 font-mono", children: _jsxs("div", { className: "flex items-center gap-1", children: [isReq ? (_jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-600" })) : (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })), k, isReq && _jsx("span", { className: "text-[9px] uppercase text-emerald-700 ml-1", children: "req" })] }) }), _jsx("td", { className: "px-2.5 py-1.5 font-mono text-muted-foreground", children: typeLabel(p) }), _jsxs("td", { className: "px-2.5 py-1.5", children: [p.description && _jsx("div", { children: p.description }), Array.isArray(p.enum) && p.enum.length > 0 && (_jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["enum: ", p.enum.map((v) => JSON.stringify(v)).join(' | ')] })), p.default !== undefined && (_jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["default: ", _jsx("code", { className: "font-mono", children: JSON.stringify(p.default) })] })), p.format && (_jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["format: ", p.format] }))] })] }, k));
+                    }) })] }) }));
+}
+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 Empty({ children }) {
+    return _jsx("div", { className: "text-xs text-muted-foreground italic", children: 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 })] }));
+}

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

@@ -0,0 +1,25 @@
+/**
+ * TranslationPreview — read-only coverage report for one locale bundle.
+ *
+ * A translation record represents exactly one locale (per the i18n ADR).
+ * This preview answers two questions an operator typically has when
+ * opening a translation:
+ *
+ *   1. "Which locale is this and how complete is it?" → header strip
+ *      with the locale badge, total-key count, and an overall coverage
+ *      bar (categories that have at least one entry).
+ *   2. "Where are the strings?" → a card per category in
+ *      `TranslationDataSchema`: objects · apps · messages ·
+ *      validationMessages · globalActions · dashboards · settings ·
+ *      metadataForms. Each card shows the count of top-level keys and
+ *      a sample of up to 5 keys so the user can confirm the right
+ *      bundle is loaded.
+ *
+ * For flat string maps (messages, validationMessages, globalActions,
+ * settings) we render a small key→value sample table. For nested
+ * objects (objects, apps, dashboards, metadataForms) we list the
+ * top-level keys with their inner key count.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function TranslationPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppWindow, ClipboardList, FileText, Gauge, Globe2, LayoutDashboard, Languages, ListChecks, MessageCircle, Settings2, ShieldAlert, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+const CATEGORIES = [
+    { key: 'objects', label: 'Objects', icon: ListChecks, flat: false },
+    { key: 'apps', label: 'Apps', icon: AppWindow, flat: false },
+    { key: 'messages', label: 'Messages', icon: MessageCircle, flat: true },
+    { key: 'validationMessages', label: 'Validation Messages', icon: ShieldAlert, flat: true },
+    { key: 'globalActions', label: 'Global Actions', icon: ClipboardList, flat: true },
+    { key: 'dashboards', label: 'Dashboards', icon: LayoutDashboard, flat: false },
+    { key: 'settings', label: 'Settings', icon: Settings2, flat: true },
+    { key: 'metadataForms', label: 'Metadata Forms', icon: FileText, flat: false },
+];
+export function TranslationPreview({ name, draft }) {
+    const d = draft;
+    const locale = d.locale ?? d.language ?? '?';
+    const label = d.label ?? d.name ?? name ?? '';
+    const description = d.description;
+    const data = d.data ?? d;
+    const counts = CATEGORIES.map((cat) => {
+        const bag = data?.[cat.key];
+        if (!bag || typeof bag !== 'object')
+            return { ...cat, count: 0, sample: [] };
+        const entries = Object.entries(bag);
+        return { ...cat, count: entries.length, sample: entries.slice(0, 5) };
+    });
+    const totalKeys = counts.reduce((sum, c) => sum + c.count, 0);
+    const populated = counts.filter((c) => c.count > 0).length;
+    const coverage = Math.round((populated / CATEGORIES.length) * 100);
+    if (totalKeys === 0) {
+        return (_jsx(PreviewShell, { hint: `translation · ${locale}`, children: _jsx(PreviewMessage, { children: "This bundle is empty \u2014 add at least one translated string to see the coverage report." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `translation · ${locale} · ${totalKeys} keys`, children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Languages, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _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 }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 text-[10px] font-mono text-emerald-800", children: [_jsx(Globe2, { className: "h-3 w-3" }), " ", locale] })] }), description && _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description }), _jsxs("div", { className: "mt-2 flex items-center gap-2 text-[11px]", children: [_jsx(Gauge, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground", children: "Category coverage:" }), _jsx("div", { className: "h-1.5 w-32 rounded-full bg-muted overflow-hidden", children: _jsx("div", { className: "h-full bg-emerald-500", style: { width: `${coverage}%` } }) }), _jsxs("span", { className: "font-mono", children: [populated, "/", CATEGORIES.length, " (", coverage, "%)"] }), _jsxs("span", { className: "ml-3 text-muted-foreground", children: [totalKeys, " total keys"] })] })] })] }) }), _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: counts.map((c) => (_jsx(CategoryCard, { cat: c }, c.key))) })] }) }) }));
+}
+function CategoryCard({ cat, }) {
+    const Icon = cat.icon;
+    return (_jsxs("div", { className: `rounded border bg-background ${cat.count === 0 ? 'opacity-60' : ''}`, children: [_jsxs("div", { className: "flex items-center justify-between border-b px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "text-xs font-medium", children: cat.label })] }), _jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-mono", children: cat.count })] }), _jsx("div", { className: "px-2.5 py-1.5 min-h-[3.5rem]", children: cat.count === 0 ? (_jsx("div", { className: "text-[11px] text-muted-foreground italic", children: "empty" })) : (_jsxs("ul", { className: "space-y-0.5 text-[11px]", children: [cat.sample.map(([k, v]) => (_jsxs("li", { className: "flex items-baseline gap-2 truncate", children: [_jsx("code", { className: "font-mono text-muted-foreground shrink-0", children: k }), _jsx("span", { className: "truncate text-foreground/80", children: renderSampleValue(v, cat.flat) })] }, k))), cat.count > cat.sample.length && (_jsxs("li", { className: "text-[10px] text-muted-foreground italic", children: ["+", cat.count - cat.sample.length, " more\u2026"] }))] })) })] }));
+}
+function renderSampleValue(v, flat) {
+    if (flat) {
+        if (typeof v === 'string')
+            return `"${v}"`;
+        if (v == null)
+            return '∅';
+        return String(v);
+    }
+    if (v && typeof v === 'object') {
+        const n = Object.keys(v).length;
+        return `{${n} keys}`;
+    }
+    return String(v ?? '∅');
+}

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

@@ -0,0 +1,27 @@
+/**
+ * ValidationPreview — read-only summary of a Validation rule draft.
+ *
+ * Validation is a discriminated union by `type`:
+ *   script · unique · state_machine · format · cross_field · async ·
+ *   custom · conditional · plus the schema-style JSONValidationSchema.
+ *
+ * The preview shows a shared envelope (target, message, severity,
+ * active, events, priority, tags) and then a type-specific body so
+ * each rule shape gets the right vocabulary instead of a generic
+ * "field dump":
+ *
+ *   • script         → CEL condition block
+ *   • unique         → unique fields + scope (CEL)
+ *   • state_machine  → from→to transitions matrix
+ *   • format         → regex / built-in format name
+ *   • cross_field    → involved fields + cross-field condition
+ *   • async          → endpoint URL + timeout
+ *   • custom         → handler reference
+ *   • conditional    → predicate + nested rule reference
+ *
+ * Severity drives the accent color (error=red, warning=amber,
+ * info=blue) the same way runtime UI surfaces it.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ValidationPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertTriangle, ArrowRight, Code2, Fingerprint, Globe2, Info, Power, Regex, ShieldAlert, Sigma, Workflow, XOctagon, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+function celText(c) {
+    if (!c)
+        return undefined;
+    if (typeof c === 'string')
+        return c;
+    if (typeof c === 'object' && typeof c.source === 'string')
+        return c.source;
+    return undefined;
+}
+function severityTone(s) {
+    switch (s) {
+        case 'error':
+            return {
+                ring: 'border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/40',
+                text: 'text-red-700 dark:text-red-300',
+                icon: XOctagon,
+            };
+        case 'warning':
+            return {
+                ring: 'border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40',
+                text: 'text-amber-800 dark:text-amber-300',
+                icon: AlertTriangle,
+            };
+        case 'info':
+        default:
+            return {
+                ring: 'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/40',
+                text: 'text-blue-800 dark:text-blue-300',
+                icon: Info,
+            };
+    }
+}
+export function ValidationPreview({ name, draft }) {
+    const d = draft;
+    const ruleName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? ruleName);
+    const description = d.description ?? '';
+    const type = d.type ?? 'script';
+    const object = d.object;
+    const message = d.message ?? '';
+    const severity = (d.severity ?? 'error');
+    const active = d.active !== false;
+    const events = Array.isArray(d.events) ? d.events : [];
+    const priority = d.priority;
+    const tags = Array.isArray(d.tags) ? d.tags : [];
+    const tone = severityTone(severity);
+    if (!ruleName) {
+        return (_jsx(PreviewShell, { hint: "validation", children: _jsx(PreviewMessage, { children: "Give the validation a name to see the preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `validation · ${type}`, children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ShieldAlert, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _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: ruleName }), _jsx("span", { className: "rounded border bg-background px-1.5 py-0.5 text-[10px] font-mono", children: type })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: Power, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), object && _jsx(Pill, { label: `object: ${object}`, mono: true }), priority != null && _jsx(Pill, { label: `priority ${priority}` }), events.length > 0 && (_jsx(Pill, { label: `on ${events.join(', ')}` }))] })] })] }) }), _jsx("div", { className: `rounded border p-2.5 text-xs ${tone.ring}`, children: _jsxs("div", { className: `flex items-start gap-1.5 ${tone.text}`, children: [_jsx(tone.icon, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium uppercase tracking-wider text-[10px]", children: severity }), _jsx("div", { className: "font-normal mt-0.5 text-foreground", children: message || _jsx("span", { className: "italic text-muted-foreground", children: "no message set" }) })] })] }) }), _jsx(TypeBody, { type: type, d: d }), tags.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-1", children: "Tags" }), _jsx("div", { className: "flex flex-wrap gap-1", children: tags.map((t) => (_jsx("span", { className: "inline-flex items-center rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: t }, t))) })] }))] }) }) }));
+}
+function TypeBody({ type, d }) {
+    switch (type) {
+        case 'script':
+        case 'conditional':
+            return (_jsx(Section, { title: "Condition", icon: Code2, children: _jsx(CelBlock, { value: celText(d.condition) ?? celText(d.expression) }) }));
+        case 'unique': {
+            const fields = Array.isArray(d.fields) ? d.fields : [];
+            const scope = celText(d.scope) ?? celText(d.where);
+            return (_jsxs(_Fragment, { children: [_jsx(Section, { title: `Unique on ${fields.length} field${fields.length === 1 ? '' : 's'}`, icon: Fingerprint, children: _jsx("div", { className: "flex flex-wrap gap-1", children: fields.length === 0 ? (_jsx("span", { className: "text-xs text-amber-700 dark:text-amber-400", children: "no fields set" })) : (fields.map((f) => (_jsx("span", { className: "rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: f }, f)))) }) }), scope && (_jsx(Section, { title: "Scope", icon: Sigma, children: _jsx(CelBlock, { value: scope }) }))] }));
+        }
+        case 'state_machine': {
+            // ADR-0020 shape: transitions is a `{ fromState: [allowedToStates] }` map.
+            const transitionMap = d.transitions && typeof d.transitions === 'object' && !Array.isArray(d.transitions)
+                ? d.transitions
+                : {};
+            const entries = Object.entries(transitionMap);
+            const field = d.field;
+            return (_jsx(Section, { title: `Transitions${field ? ` on ${field}` : ''}`, icon: Workflow, children: entries.length === 0 ? (_jsx("div", { className: "text-xs text-amber-700 dark:text-amber-400", children: "No transitions declared." })) : (_jsx("ul", { className: "rounded border bg-background divide-y text-xs", children: entries.map(([from, tos]) => (_jsxs("li", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [_jsx("span", { className: "font-mono", children: from }), _jsx(ArrowRight, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: "font-mono text-emerald-700 dark:text-emerald-400", children: Array.isArray(tos) && tos.length > 0 ? tos.join(' | ') : '∅ (dead-end)' })] }, from))) })) }));
+        }
+        case 'format': {
+            const pattern = d.pattern ?? d.regex;
+            const format = d.format;
+            return (_jsx(Section, { title: "Format", icon: Regex, children: _jsxs("div", { className: "rounded border bg-background p-2.5 text-xs space-y-1", children: [format && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Built-in:" }), ' ', _jsx("code", { className: "font-mono", children: format })] })), pattern && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Pattern:" }), ' ', _jsx("code", { className: "font-mono break-all", children: pattern })] })), !format && !pattern && _jsx("span", { className: "text-amber-700 dark:text-amber-400", children: "No format or regex set." })] }) }));
+        }
+        case 'cross_field': {
+            const fields = Array.isArray(d.fields) ? d.fields : [];
+            const condition = celText(d.condition);
+            return (_jsxs(_Fragment, { children: [_jsx(Section, { title: "Fields involved", icon: Sigma, children: _jsxs("div", { className: "flex flex-wrap gap-1", children: [fields.map((f) => (_jsx("span", { className: "rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: f }, f))), fields.length === 0 && _jsx("span", { className: "text-xs text-muted-foreground italic", children: "none" })] }) }), _jsx(Section, { title: "Cross-field condition", icon: Code2, children: _jsx(CelBlock, { value: condition }) })] }));
+        }
+        case 'async': {
+            const endpoint = d.endpoint ?? d.url;
+            const timeout = d.timeoutMs;
+            const method = d.method ?? 'POST';
+            return (_jsx(Section, { title: "Async endpoint", icon: Globe2, children: _jsxs("div", { className: "rounded border bg-background p-2.5 text-xs space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-mono", children: method }), _jsx("code", { className: "font-mono break-all", children: endpoint ?? '—' })] }), timeout != null && (_jsxs("div", { className: "text-muted-foreground", children: ["timeout: ", timeout, "ms"] }))] }) }));
+        }
+        case 'custom': {
+            const handler = d.handler ?? d.function;
+            return (_jsx(Section, { title: "Custom handler", icon: Code2, children: _jsx("div", { className: "rounded border bg-background px-2.5 py-1.5 text-xs", children: handler ? _jsx("code", { className: "font-mono break-all", children: handler }) : _jsx("span", { className: "text-amber-700 dark:text-amber-400", children: "No handler set." }) }) }));
+        }
+        default:
+            return (_jsx(Section, { title: "Rule", icon: ShieldAlert, children: _jsxs("div", { className: "rounded border bg-background p-2.5 text-xs text-muted-foreground italic", children: ["Unknown rule type \"", type, "\". Showing common fields only."] }) }));
+    }
+}
+function CelBlock({ value }) {
+    if (!value) {
+        return _jsx("div", { className: "text-xs text-amber-700 dark:text-amber-400", children: "No expression set." });
+    }
+    return (_jsx("pre", { className: "rounded border bg-background p-2.5 text-xs font-mono whitespace-pre-wrap break-words", children: value }));
+}
+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 Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green' ? 'text-emerald-700 dark:text-emerald-400' : '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/ViewColumnPanes.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Compact controls for the View column bar.
+ *
+ *   • ColumnChip      — a single draggable column "pill": click to
+ *     select (→ inspector), drag to reorder, × to remove. Designed to
+ *     sit in a one-line toolbar above the live grid preview so the
+ *     preview — not the field manager — owns the canvas.
+ *
+ *   • AddFieldPopover — an Airtable/Notion-style "+ Add field" button
+ *     that opens a searchable checklist of the bound Object's fields.
+ *     Click a field to append it as a column. Already-used fields are
+ *     tagged "Added" but stay clickable (a table may show a field
+ *     twice). Removal is explicit via the chip × so column-level config
+ *     (label, width, sortable…) is never silently dropped.
+ */
+import * as React from 'react';
+import type { ObjectFieldInfo } from './useObjectFields';
+export declare function ColumnChip({ index, label, fieldType, selected, canEdit, dragging, dropBefore, onSelect, onRemove, onDragStart, onDragEnd, onDragOverChip, onDropChip, }: {
+    index: number;
+    label: string;
+    fieldType: unknown;
+    selected: boolean;
+    canEdit: boolean;
+    dragging: boolean;
+    dropBefore: boolean;
+    onSelect: () => void;
+    onRemove: () => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    onDragOverChip: () => void;
+    onDropChip: () => void;
+}): React.JSX.Element;
+/**
+ * FieldListRow — a full-width, vertically-stacked variant of {@link ColumnChip}
+ * for the right-panel Fields list. Same HTML5 drag-and-drop contract (click to
+ * select, drag the handle to reorder, × to remove) but laid out as a list row
+ * (icon · label · machine name · remove) so it reads like a mainstream
+ * low-code field manager rather than a horizontal toolbar.
+ */
+export declare function FieldListRow({ index, label, fieldName, fieldType, selected, canEdit, dragging, dropBefore, onSelect, onRemove, onDragStart, onDragEnd, onDragOverRow, onDropRow, }: {
+    index: number;
+    label: string;
+    fieldName?: string;
+    fieldType: unknown;
+    selected: boolean;
+    canEdit: boolean;
+    dragging: boolean;
+    dropBefore: boolean;
+    onSelect: () => void;
+    onRemove: () => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    onDragOverRow: () => void;
+    onDropRow: () => void;
+}): React.JSX.Element;
+export declare function AddFieldPopover({ fields, usedNames, loading, error, onAdd, }: {
+    fields: ObjectFieldInfo[];
+    usedNames: Set<string>;
+    loading: boolean;
+    error: string | null;
+    onAdd: (field: ObjectFieldInfo) => void;
+}): React.JSX.Element;