@object-ui/app-shell 6.2.2 → 7.0.0

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;

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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 { GripVertical, Plus, Search, X } from 'lucide-react';
+import { Badge, Popover, PopoverContent, PopoverTrigger, } from '@object-ui/components';
+import { resolveFieldTypeMeta, resolveCategoryTone } from './field-types';
+import { detectLocale, t, tFormat } from '../i18n';
+const DND_MIME = 'text/x-objectui-viewcol';
+function FieldIcon({ type }) {
+    const meta = resolveFieldTypeMeta(type);
+    const tone = resolveCategoryTone(type);
+    const Icon = meta.Icon;
+    return _jsx(Icon, { className: `h-3.5 w-3.5 shrink-0 ${tone.icon}` });
+}
+/* ───────────────────────────── Column chip ────────────────────────────── */
+export function ColumnChip({ index, label, fieldType, selected, canEdit, dragging, dropBefore, onSelect, onRemove, onDragStart, onDragEnd, onDragOverChip, onDropChip, }) {
+    return (_jsxs("div", { className: "relative flex items-stretch", children: [dropBefore && (_jsx("span", { className: "pointer-events-none absolute -left-1 top-0 h-full w-0.5 rounded bg-primary" })), _jsxs("div", { role: "button", tabIndex: 0, draggable: canEdit, "aria-pressed": selected, onDragStart: (e) => {
+                    if (!canEdit)
+                        return;
+                    e.dataTransfer.effectAllowed = 'move';
+                    e.dataTransfer.setData(DND_MIME, String(index));
+                    onDragStart();
+                }, onDragEnd: onDragEnd, onDragOver: (e) => {
+                    if (!canEdit || !dragging)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                    onDragOverChip();
+                }, onDrop: (e) => {
+                    if (!canEdit)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onDropChip();
+                }, onClick: onSelect, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onSelect();
+                    }
+                }, className: 'group inline-flex items-center gap-1.5 rounded-md border bg-card py-1 pl-1.5 pr-1 text-xs transition-colors hover:border-primary/40 ' +
+                    (selected ? 'border-primary ring-1 ring-primary' : 'border-border') +
+                    (canEdit ? ' cursor-grab active:cursor-grabbing' : ''), children: [canEdit && (_jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/40 group-hover:text-muted-foreground" })), _jsx(FieldIcon, { type: fieldType }), _jsx("span", { className: "max-w-[12rem] truncate font-medium", children: label }), canEdit && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": `Remove ${label}`, onClick: (e) => {
+                            e.stopPropagation();
+                            onRemove();
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onRemove();
+                            }
+                        }, className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive", children: _jsx(X, { className: "h-3 w-3" }) }))] })] }));
+}
+/* ───────────────────────── Field list row (vertical) ──────────────────── */
+/**
+ * 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 function FieldListRow({ index, label, fieldName, fieldType, selected, canEdit, dragging, dropBefore, onSelect, onRemove, onDragStart, onDragEnd, onDragOverRow, onDropRow, }) {
+    return (_jsxs("div", { className: "relative", children: [dropBefore && (_jsx("span", { className: "pointer-events-none absolute -top-0.5 left-0 right-0 h-0.5 rounded bg-primary" })), _jsxs("div", { role: "button", tabIndex: 0, draggable: canEdit, "aria-pressed": selected, onDragStart: (e) => {
+                    if (!canEdit)
+                        return;
+                    e.dataTransfer.effectAllowed = 'move';
+                    e.dataTransfer.setData(DND_MIME, String(index));
+                    onDragStart();
+                }, onDragEnd: onDragEnd, onDragOver: (e) => {
+                    if (!canEdit || !dragging)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                    onDragOverRow();
+                }, onDrop: (e) => {
+                    if (!canEdit)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onDropRow();
+                }, onClick: onSelect, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onSelect();
+                    }
+                }, className: 'group flex items-center gap-2 rounded-md border bg-card px-2 py-1.5 text-xs transition-colors hover:border-primary/40 ' +
+                    (selected ? 'border-primary ring-1 ring-primary ' : 'border-border ') +
+                    (canEdit ? 'cursor-grab active:cursor-grabbing' : ''), children: [canEdit && (_jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/40 group-hover:text-muted-foreground" })), _jsx(FieldIcon, { type: fieldType }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: label }), fieldName && fieldName !== label && (_jsx("code", { className: "max-w-[7rem] shrink-0 truncate text-[10px] text-muted-foreground", children: fieldName })), canEdit && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": `Remove ${label}`, onClick: (e) => {
+                            e.stopPropagation();
+                            onRemove();
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onRemove();
+                            }
+                        }, className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive", children: _jsx(X, { className: "h-3 w-3" }) }))] })] }));
+}
+/* ─────────────────────────── Add-field popover ────────────────────────── */
+export function AddFieldPopover({ fields, usedNames, loading, error, onAdd, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const filtered = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return fields;
+        return fields.filter((f) => f.name.toLowerCase().includes(q) || f.label.toLowerCase().includes(q));
+    }, [fields, query]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-md border border-dashed px-2 py-1 text-xs text-muted-foreground hover:border-primary/40 hover:bg-accent/40 hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.form.addFieldPlain', locale)] }) }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", children: [_jsxs("div", { className: "relative border-b p-2", children: [_jsx(Search, { className: "pointer-events-none absolute left-4 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('engine.form.searchFields', locale), className: "h-8 w-full rounded border border-input bg-background pl-7 pr-2 text-xs outline-none focus:border-primary" })] }), _jsx("div", { className: "max-h-72 overflow-auto p-1", children: loading ? (_jsx(Hint, { children: t('engine.form.loadingFields', locale) })) : error ? (_jsx(Hint, { tone: "warn", children: tFormat('engine.form.noObjectFields', locale, { error }) })) : filtered.length === 0 ? (_jsx(Hint, { children: query ? t('engine.form.noMatchingFields', locale) : t('engine.form.noFieldsOnObject', locale) })) : (filtered.map((f) => {
+                            const used = usedNames.has(f.name);
+                            return (_jsxs("button", { type: "button", onClick: () => onAdd(f), className: "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent", children: [_jsx(FieldIcon, { type: f.type }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: f.label }), f.name !== f.label && (_jsx("code", { className: "max-w-[6rem] truncate text-[10px] text-muted-foreground", children: f.name })), used && (_jsx(Badge, { variant: "secondary", className: "px-1 py-0 text-[9px]", children: t('engine.form.added', locale) }))] }, f.name));
+                        })) })] })] }));
+}
+function Hint({ children, tone }) {
+    return (_jsx("div", { className: 'px-2 py-4 text-center text-[11px] ' +
+            (tone === 'warn' ? 'text-amber-600 dark:text-amber-300' : 'text-muted-foreground'), children: children }));
+}

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

@@ -1,2 +1,24 @@
+/**
+ * ViewPreview — renders a View metadata draft using the same `object-view`
+ * SchemaRenderer the runtime ObjectView route uses, with the draft's own
+ * `config` body injected as a named `listView` so the preview reflects the
+ * unsaved edit (not the last saved version).
+ *
+ * A view is the canonical first-class **ViewItem** ({ viewKind, config }):
+ * one view, one `config` body — there are no in-document variant tabs. An
+ * object's *other* views are independent ViewItems surfaced by the view
+ * switcher (a query), not nested here.
+ *
+ * The render path forks on `viewKind`:
+ *   - list-family (grid / kanban / calendar / …) → `object-view`, with the
+ *     draft body injected as a named listView (below);
+ *   - form-family (simple / drawer / …) → `object-form`, with the draft's
+ *     sections mapped onto the form schema (a form view binds a record layout,
+ *     not a list, so the list renderer would just fall back to a bare grid).
+ *
+ * A raw single-schema draft (a bare `{ type, … }` with no `config` wrapper,
+ * e.g. an ad-hoc preview) is rendered straight through SchemaRenderer.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function ViewPreview({ name, draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViewPreview({ name, draft, editing }: MetadataPreviewProps): React.JSX.Element;