@object-ui/app-shell 11.2.0 → 11.3.0

package/dist/views/studio-design/StudioDesignSurface.js

@@ -0,0 +1,659 @@
+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.
+/**
+ * StudioDesignSurface — the open-source WYSIWYG design surface (ADR-0080).
+ *
+ * Routed as /studio/:packageId/{data|automations|interfaces} — three pillars,
+ * each composed AROUND existing renderers (no new editor code):
+ *   - Interfaces: the real App navigation tree → live canvas (getMetadataPreview)
+ *     + inspector (getMetadataInspector), edits persisting via draft → publish.
+ *   - Data: the package's objects → fields + record grid.
+ *   - Automations: flows → FlowPreview (default OFF / review-then-enable).
+ *
+ * Open-core boundary: the left AI copilot is NOT part of the open-source
+ * surface — it is an injected slot (`aiSlot`) the cloud edition fills.
+ */
+import * as React from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { SchemaRenderer, useAdapter, SchemaRendererProvider } from '@object-ui/react';
+import { GridFieldAuthoringProvider } from '@object-ui/components';
+import { ObjectView as PluginObjectView } from '@object-ui/plugin-view';
+import { ListView } from '@object-ui/plugin-list';
+import { Boxes, FileText, Database, LayoutDashboard, BarChart3, Table2, Folder, Compass, Workflow, SlidersHorizontal, MousePointer2, Eye, Loader2, Save, Pencil, Check, Plus, X, } from 'lucide-react';
+import { getMetadataPreview } from '../metadata-admin/preview-registry';
+import { getMetadataInspector } from '../metadata-admin/inspector-registry';
+import { useMetadataClient } from '../metadata-admin/useMetadata';
+import { AppNavCanvas } from '../metadata-admin/previews/AppNavCanvas';
+import { readFields, writeFields, newField } from '../metadata-admin/previews/object-fields-io';
+const PILLARS = [
+    { key: 'data', label: 'Data', Icon: Database },
+    { key: 'automations', label: 'Automations', Icon: Workflow },
+    { key: 'interfaces', label: 'Interfaces', Icon: LayoutDashboard },
+];
+const KIND_ICON = {
+    group: Folder,
+    page: FileText,
+    object: Database,
+    dashboard: LayoutDashboard,
+    report: BarChart3,
+    view: Table2,
+};
+const navIcon = (type) => KIND_ICON[type ?? ''] ?? Compass;
+/** Resolve a leaf nav node → the surface {type,name} it binds to. */
+function resolveSurface(node) {
+    const label = String(node.label ?? '');
+    switch (node.type) {
+        case 'page':
+            return node.pageName || node.page ? { type: 'page', name: String(node.pageName || node.page), label } : null;
+        case 'object':
+            return node.objectName || node.object
+                ? { type: 'object', name: String(node.objectName || node.object), label }
+                : null;
+        case 'dashboard':
+            return node.dashboardName || node.dashboard
+                ? { type: 'dashboard', name: String(node.dashboardName || node.dashboard), label }
+                : null;
+        case 'report':
+            return node.reportName || node.report
+                ? { type: 'report', name: String(node.reportName || node.report), label }
+                : null;
+        case 'view':
+            return node.viewName || node.view ? { type: 'view', name: String(node.viewName || node.view), label } : null;
+        default:
+            return null;
+    }
+}
+/** Normalize the framework draft envelope `{ type, name, item }` → body | null. */
+function extractDraftBody(resp) {
+    if (!resp || typeof resp !== 'object')
+        return null;
+    const env = resp;
+    if (!('item' in env))
+        return null;
+    const body = env.item;
+    if (!body || typeof body !== 'object')
+        return null;
+    return Object.keys(body).length > 0 ? body : null;
+}
+export function StudioDesignSurface({ aiSlot }) {
+    const params = useParams();
+    const packageId = params.packageId ?? 'com.example.showcase';
+    const tab = params.tab ?? 'interfaces';
+    return (_jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-background text-foreground", children: [aiSlot ? _jsx("aside", { className: "w-64 shrink-0 overflow-auto border-r bg-muted/40", children: aiSlot }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex items-center gap-3 border-b px-3 py-2", children: [_jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap text-[13px] font-medium", children: [_jsx(Boxes, { className: "h-4 w-4" }), " ", packageId] }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("nav", { className: "flex gap-1", children: PILLARS.map((p) => (_jsxs(Link, { to: `/studio/${packageId}/${p.key}`, className: 'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ' +
+                                        (tab === p.key
+                                            ? 'bg-primary/10 font-medium text-primary'
+                                            : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: [_jsx(p.Icon, { className: "h-3.5 w-3.5" }), p.label] }, p.key))) })] }), _jsx("div", { className: "min-h-0 flex-1", children: tab === 'data' ? (_jsx(DataPillar, { packageId: packageId })) : tab === 'automations' ? (_jsx(AutomationsPillar, { packageId: packageId })) : (_jsx(InterfacesPillar, { packageId: packageId })) })] })] }));
+}
+/** Recursive App-navigation tree (groups + typed leaves). */
+function NavTree({ nodes, active, onPick, }) {
+    return (_jsx(_Fragment, { children: nodes.map((node, i) => {
+            if (node.type === 'group' || (Array.isArray(node.children) && node.children.length)) {
+                return (_jsxs("div", { className: "mb-1", children: [_jsxs("p", { className: "flex items-center gap-1 px-2 pb-1 pt-3 text-[11px] text-muted-foreground", children: [_jsx(Folder, { className: "h-3 w-3" }), " ", node.label] }), _jsx("div", { className: "pl-1.5", children: _jsx(NavTree, { nodes: node.children ?? [], active: active, onPick: onPick }) })] }, node.id ?? i));
+            }
+            const surface = resolveSurface(node);
+            const Icon = navIcon(node.type);
+            const isActive = !!surface && active?.type === surface.type && active?.name === surface.name;
+            return (_jsxs("button", { onClick: () => surface && onPick(surface), disabled: !surface, title: surface ? `${surface.type} · ${surface.name}` : node.label, className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs disabled:opacity-40 ' +
+                    (isActive ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: node.label }), surface && surface.type !== 'page' && (_jsx("span", { className: "rounded bg-muted px-1 py-px text-[9px] uppercase text-muted-foreground", children: surface.type }))] }, node.id ?? i));
+        }) }));
+}
+/** Interfaces pillar — real App nav · live canvas · inspector. */
+function InterfacesPillar({ packageId }) {
+    const client = useMetadataClient();
+    const locale = 'zh-CN';
+    const [appLabel, setAppLabel] = React.useState(packageId);
+    const [appName, setAppName] = React.useState(null);
+    const [appDraft, setAppDraft] = React.useState({});
+    const navTree = React.useMemo(() => (Array.isArray(appDraft.navigation) ? appDraft.navigation : []), [appDraft]);
+    // nav editing — drag-drop reorder / rename / add / remove via AppNavCanvas
+    const [editNav, setEditNav] = React.useState(false);
+    const [navSel, setNavSel] = React.useState(null);
+    const [navDirty, setNavDirty] = React.useState(false);
+    const [navHasDraft, setNavHasDraft] = React.useState(false);
+    const [navSaving, setNavSaving] = React.useState(false);
+    const [current, setCurrent] = React.useState(null);
+    const [draft, setDraft] = React.useState({});
+    const [selection, setSelection] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [saving, setSaving] = React.useState(false);
+    const [hasDraft, setHasDraft] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    // Resolve the App by package id → load its navigation tree.
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const apps = (await client.list('app'));
+                if (cancelled)
+                    return;
+                const app = (apps || []).find((a) => a._packageId === packageId || a.packageId === packageId || a.name === packageId) ?? (apps || [])[0];
+                if (!app)
+                    return;
+                setAppLabel(String(app.label ?? app.name ?? packageId));
+                setAppName(String(app.name));
+                const [layRaw, appDraftResp] = await Promise.all([
+                    client.layered('app', String(app.name)),
+                    client.getDraft('app', String(app.name)).catch(() => null),
+                ]);
+                if (cancelled)
+                    return;
+                const lay = layRaw;
+                const eff = (lay.effective ?? lay.code ?? {});
+                const appDraftBody = extractDraftBody(appDraftResp);
+                const body = appDraftBody ? { ...eff, ...appDraftBody } : eff;
+                setAppDraft(body);
+                setNavHasDraft(!!appDraftBody);
+                const tree = Array.isArray(body.navigation) ? body.navigation : [];
+                // auto-open the first resolvable leaf
+                const firstLeaf = (function find(nodes) {
+                    for (const n of nodes) {
+                        if (n.type === 'group' || n.children?.length) {
+                            const r = find(n.children ?? []);
+                            if (r)
+                                return r;
+                        }
+                        else {
+                            const s = resolveSurface(n);
+                            if (s)
+                                return s;
+                        }
+                    }
+                    return null;
+                })(tree);
+                setCurrent((cur) => cur ?? firstLeaf);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId]);
+    const Preview = getMetadataPreview(current?.type ?? '');
+    const Inspector = getMetadataInspector(current?.type ?? '');
+    // Object leaves render as a runtime records grid (preview = runtime); schema
+    // editing is the Data pillar's job, so they are not draft-editable in this canvas.
+    const isEditable = !!Preview && current?.type !== 'object';
+    // Load the selected surface's draft (only for editable preview types).
+    React.useEffect(() => {
+        if (!current || !isEditable) {
+            setDraft({});
+            setHasDraft(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setSelection(null);
+        (async () => {
+            try {
+                const [lay, draftResp] = await Promise.all([
+                    client.layered(current.type, current.name),
+                    client.getDraft(current.type, current.name).catch(() => null),
+                ]);
+                if (cancelled)
+                    return;
+                const baseline = (lay.effective ??
+                    lay.code ??
+                    {});
+                const body = extractDraftBody(draftResp);
+                setDraft(body ? { ...baseline, ...body } : baseline);
+                setHasDraft(!!body);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current, isEditable]);
+    const onPatch = React.useCallback((patch) => setDraft((d) => ({ ...d, ...patch })), []);
+    const doSave = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('draft');
+        try {
+            await client.save(current.type, current.name, draft, { mode: 'draft' });
+            setHasDraft(true);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, draft]);
+    const doPublish = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('publish');
+        try {
+            await client.publish(current.type, current.name);
+            setHasDraft(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current]);
+    // nav editing — patch appDraft.navigation, then save/publish the App overlay
+    const onNavPatch = React.useCallback((patch) => {
+        setAppDraft((d) => ({ ...d, ...patch }));
+        setNavDirty(true);
+    }, []);
+    const doNavSave = React.useCallback(async () => {
+        if (!appName)
+            return;
+        setNavSaving('draft');
+        try {
+            await client.save('app', appName, appDraft, { mode: 'draft' });
+            setNavHasDraft(true);
+            setNavDirty(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setNavSaving(false);
+        }
+    }, [client, appName, appDraft]);
+    const doNavPublish = React.useCallback(async () => {
+        if (!appName)
+            return;
+        setNavSaving('publish');
+        try {
+            await client.publish('app', appName);
+            setNavHasDraft(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setNavSaving(false);
+        }
+    }, [client, appName]);
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [current ? (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: current.label }), _jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5", children: [current.type, " \u00B7 ", current.name] })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u83DC\u5355\u9879" })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !isEditable || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: (editNav ? 'w-72' : 'w-52') + ' flex shrink-0 flex-col border-r', children: [_jsxs("div", { className: "shrink-0 border-b px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsxs("p", { className: "truncate text-[11px] font-medium text-muted-foreground", children: [appLabel, " \u00B7 \u5BFC\u822A"] }), _jsx("button", { type: "button", onClick: () => {
+                                                    setEditNav((v) => !v);
+                                                    setNavSel(null);
+                                                }, title: editNav ? '完成编辑' : '编辑导航(拖拽排序 / 重命名 / 增删)', className: 'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[10px] ' +
+                                                    (editNav ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted'), children: editNav ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3 w-3" }), " \u5B8C\u6210"] })) : (_jsxs(_Fragment, { children: [_jsx(Pencil, { className: "h-3 w-3" }), " \u7F16\u8F91"] })) })] }), editNav && (_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [navHasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-1.5 py-0.5 text-[10px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03" })), _jsxs("button", { onClick: doNavSave, disabled: !navDirty || !!navSaving, className: "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-50", children: [navSaving === 'draft' ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Save, { className: "h-3 w-3" })), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doNavPublish, disabled: !navHasDraft || !!navSaving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [navSaving === 'publish' ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : null, "\u53D1\u5E03"] })] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: navTree.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })) : editNav ? (_jsx(AppNavCanvas, { draft: appDraft, rootKey: "navigation", onPatch: onNavPatch, selection: navSel, onSelectionChange: (s) => setNavSel(s ? { kind: s.kind, id: s.id } : null) })) : (_jsx(NavTree, { nodes: navTree, active: current, onPick: setCurrent })) })] }), _jsxs("main", { className: "min-w-0 flex-1 overflow-auto bg-muted/30 p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Eye, { className: "h-3 w-3" }), " \u9884\u89C8\u5373\u8FD0\u884C \u00B7 \u540C\u4E00\u6E32\u67D3\u5668"] }), current && (_jsxs("span", { className: "text-[11px] text-muted-foreground", children: [current.type, " \u00B7 ", current.name] }))] }), error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error })), _jsx("div", { className: "rounded-lg border bg-background p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u83DC\u5355\u9879" })) : loading ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " \u52A0\u8F7D\u4E2D\u2026"] })) : current.type === 'object' ? (_jsx(SchemaRenderer, { schema: { type: 'object-view', objectName: current.name } })) : Preview ? (_jsx(Preview, { type: current.type, name: current.name, draft: draft, editing: true, selection: selection, onSelectionChange: setSelection, onPatch: onPatch, locale: locale })) : (_jsxs("div", { className: "py-12 text-center text-xs text-muted-foreground", children: [current.type, " \u6682\u7528\u53EA\u8BFB\u9884\u89C8,\u8BBE\u8BA1\u80FD\u529B\u5EFA\u8BBE\u4E2D\u3002"] })) }), isEditable ? (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u70B9\u9009\u79EF\u6728 \u2192 \u53F3\u4FA7\u76F4\u63A5\u6539 \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] })) : current?.type === 'object' ? (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(Database, { className: "h-3 w-3" }), " \u8FD0\u884C\u6001\u5217\u8868\u9884\u89C8 \u00B7 \u6539\u5B57\u6BB5 / \u7ED3\u6784\u8BF7\u5230 ", _jsx("span", { className: "font-medium", children: "Data" }), " \u652F\u67F1"] })) : null] }), _jsxs("aside", { className: "w-72 shrink-0 overflow-auto border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u5C5E\u6027" }), selection && (_jsx("button", { type: "button", onClick: () => setSelection(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u53D6\u6D88\u9009\u62E9", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx("div", { className: "p-3", children: selection && Inspector && current ? (_jsx(Inspector, { type: current.type, name: current.name, draft: draft, selection: selection, onPatch: onPatch, onClearSelection: () => setSelection(null), onSelectionChange: setSelection, readOnly: false, locale: locale })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 px-2 py-10 text-center text-xs text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-5 w-5" }), "\u5728\u753B\u5E03\u91CC\u70B9\u9009\u4E00\u4E2A\u79EF\u6728,", _jsx("br", {}), "\u5B83\u7684\u5C5E\u6027\u4F1A\u5728\u8FD9\u91CC\u76F4\u63A5\u7F16\u8F91\u3002"] })) })] })] })] }));
+}
+/** Next unused `field_N` name for a freshly-added field. */
+function nextFieldName(existing) {
+    let i = existing.length + 1;
+    let name = `field_${i}`;
+    while (existing.includes(name))
+        name = `field_${++i}`;
+    return name;
+}
+/**
+ * Data pillar — the package's objects: a records grid (Airtable parity) plus
+ * table-based field management. Add a field, or click a column header's edit
+ * affordance, to open ObjectFieldInspector (full type list + per-type config)
+ * in the right panel; changes persist via the object draft → publish overlay.
+ */
+/**
+ * Framework-managed/audit fields. They lead the raw metadata order but aren't
+ * what a user manages in a data grid, so the Data pillar drops them from the
+ * column set (mirrors ObjectGrid's regular-vs-system split) to open on the
+ * meaningful fields first — the same way Airtable hides system columns.
+ */
+const STUDIO_SYSTEM_FIELD_NAMES = new Set([
+    '_id', 'id', 'organization_id', 'org_id', 'space_id',
+    'created_at', 'created_by', 'updated_at', 'updated_by',
+    'modified_at', 'modified_by', 'created_time', 'modified_time', 'updated_time',
+    'deleted_at', 'deleted_by',
+]);
+/**
+ * Render the Data pillar's records grid using the SAME rich list surface as the
+ * runtime list pages — the standard toolbar (view switcher, search, sort, filter,
+ * group, hide-fields) plus Airtable-style inline data management. This is the
+ * plugin ObjectView's `renderListView` slot, so the object-view still owns data
+ * fetching while ListView owns the toolbar + grid. Defined at module scope (not
+ * inline) so it stays a static component reference.
+ */
+function renderStudioGridList(props) {
+    const { schema: listSchema, dataSource: ds, onEdit, className, refreshKey } = props;
+    return (_jsx(ListView, { schema: {
+            ...listSchema,
+            viewType: 'grid',
+            showSearch: true,
+            showSort: true,
+            showFilters: true,
+            showGroup: true,
+            showHideFields: true,
+            inlineEdit: true,
+            addDeleteRecordsInline: true,
+        }, dataSource: ds, onEdit: onEdit, className: className, refreshKey: refreshKey }));
+}
+function DataPillar({ packageId }) {
+    const client = useMetadataClient();
+    const adapter = useAdapter();
+    const locale = 'zh-CN';
+    const [objects, setObjects] = React.useState([]);
+    const [current, setCurrent] = React.useState(null);
+    const [objDraft, setObjDraft] = React.useState({});
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    // field management — a selected field opens ObjectFieldInspector (full type + config)
+    const [fieldSel, setFieldSel] = React.useState(null);
+    const [dirty, setDirty] = React.useState(false);
+    const [hasDraft, setHasDraft] = React.useState(false);
+    const [saving, setSaving] = React.useState(false);
+    const [gridVer, setGridVer] = React.useState(0);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = (await client.list('object', { packageId }));
+                if (cancelled)
+                    return;
+                const items = (list || [])
+                    .map((o) => ({ type: 'object', name: String(o.name ?? ''), label: String(o.label ?? o.name ?? '') }))
+                    .filter((o) => o.name);
+                setObjects(items);
+                setCurrent((c) => c ?? items[0] ?? null);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId]);
+    React.useEffect(() => {
+        if (!current)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setFieldSel(null);
+        setDirty(false);
+        (async () => {
+            try {
+                const [layRaw, draftResp] = await Promise.all([
+                    client.layered('object', current.name),
+                    client.getDraft('object', current.name).catch(() => null),
+                ]);
+                if (cancelled)
+                    return;
+                const lay = layRaw;
+                const baseline = (lay.effective ?? lay.code ?? {});
+                const draftBody = extractDraftBody(draftResp);
+                setObjDraft(draftBody ? { ...baseline, ...draftBody } : baseline);
+                setHasDraft(!!draftBody);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current]);
+    const fieldCount = React.useMemo(() => readFields(objDraft.fields).entries.length, [objDraft]);
+    const onPatch = React.useCallback((patch) => {
+        setObjDraft((d) => ({ ...d, ...patch }));
+        setDirty(true);
+    }, []);
+    // "+ add field": append a fresh text field and select it for editing in the panel.
+    const addField = React.useCallback(() => {
+        const view = readFields(objDraft.fields);
+        const name = nextFieldName(view.entries.map((e) => e.name));
+        view.entries.push(newField(name, 'text', '新字段'));
+        setObjDraft((d) => ({ ...d, fields: writeFields(view) }));
+        setDirty(true);
+        setFieldSel({ kind: 'field', id: name });
+    }, [objDraft]);
+    const doSave = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('draft');
+        setError(null);
+        try {
+            await client.save('object', current.name, objDraft, { mode: 'draft' });
+            setHasDraft(true);
+            setDirty(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, objDraft]);
+    const doPublish = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('publish');
+        setError(null);
+        try {
+            await client.publish('object', current.name);
+            // Bust the data-layer object-schema cache (separate from the metadata client)
+            // so the remounted grid re-fetches the new/edited columns without a reload.
+            adapter?.clearCache?.();
+            setHasDraft(false);
+            setDirty(false);
+            setGridVer((v) => v + 1);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [adapter, client, current]);
+    // Drag-reorder columns → reorder the object's `fields` metadata (field display
+    // order follows metadata order), then publish so the new order persists.
+    const doReorderFields = React.useCallback(async (orderedNames) => {
+        if (!current)
+            return;
+        const view = readFields(objDraft.fields);
+        // Reorder only the visible fields among their own slots; keep system /
+        // hidden fields (not shown as columns) in their original positions.
+        const visible = new Set(orderedNames);
+        const visibleInOrder = orderedNames
+            .map((n) => view.entries.find((e) => e.name === n))
+            .filter((e) => Boolean(e));
+        let vi = 0;
+        const entries = view.entries.map((e) => (visible.has(e.name) ? visibleInOrder[vi++] : e));
+        const body = { ...objDraft, fields: writeFields({ ...view, entries }) };
+        setObjDraft(body);
+        setSaving('publish');
+        setError(null);
+        try {
+            await client.save('object', current.name, body, { mode: 'draft' });
+            await client.publish('object', current.name);
+            adapter?.clearCache?.();
+            setHasDraft(false);
+            setDirty(false);
+            setGridVer((v) => v + 1); // remount so the grid reflects the persisted order
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, objDraft, adapter]);
+    const inspector = getMetadataInspector('object');
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [current ? (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: current.label }), _jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5", children: ["object \u00B7 ", current.name] }), _jsxs("span", { children: [fieldCount, " \u5B57\u6BB5"] })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u5BF9\u8C61" })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !dirty || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "w-52 shrink-0 overflow-auto border-r p-2", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: "\u5BF9\u8C61" }), objects.length === 0 && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })), objects.map((o) => (_jsxs("button", { onClick: () => setCurrent(o), className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
+                                    (current?.name === o.name ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Database, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: o.label })] }, o.name)))] }), _jsx("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u5BF9\u8C61" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex shrink-0 items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Eye, { className: "h-3 w-3" }), " \u8FD0\u884C\u6001\u5217\u8868 \u00B7 \u540C\u4E00\u6E32\u67D3\u5668"] }), _jsxs("button", { type: "button", onClick: addField, title: "\u6DFB\u52A0\u4E00\u4E2A\u5B57\u6BB5(\u968F\u540E\u5728\u53F3\u4FA7\u8BBE\u7F6E\u7C7B\u578B\u4E0E\u5C5E\u6027)", className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " \u6DFB\u52A0\u5B57\u6BB5"] })] }), error && (_jsx("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive", children: error })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-lg border bg-background", children: _jsx(GridFieldAuthoringProvider, { value: {
+                                            onAddColumn: addField,
+                                            addColumnLabel: '添加字段',
+                                            onEditColumn: (fieldName) => {
+                                                // ignore non-field columns (e.g. the row-actions column)
+                                                if (readFields(objDraft.fields).entries.some((e) => e.name === fieldName)) {
+                                                    setFieldSel({ kind: 'field', id: fieldName });
+                                                }
+                                            },
+                                            editColumnLabel: '编辑字段属性',
+                                            onReorderFields: doReorderFields,
+                                        }, children: _jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(PluginObjectView, { schema: {
+                                                    type: 'object-view',
+                                                    objectName: current.name,
+                                                    // No saved view exists in design mode, so show the object's
+                                                    // own fields as columns (in metadata order), dropping
+                                                    // framework-managed/audit fields so the grid opens on the
+                                                    // meaningful columns first — the way Airtable does.
+                                                    table: {
+                                                        fields: readFields(objDraft.fields)
+                                                            .entries.map((e) => e.name)
+                                                            .filter((n) => !STUDIO_SYSTEM_FIELD_NAMES.has(n)),
+                                                    },
+                                                }, dataSource: adapter, renderListView: renderStudioGridList }, `${current.name}:${gridVer}`) }) }) }), _jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u5217\u5934\u300C+\u300D\u52A0\u5B57\u6BB5 \u00B7 \u7B14\u5F62\u6539\u5C5E\u6027 \u00B7 \u62D6\u5217\u5934\u91CD\u6392 \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] })] })) }), current && fieldSel && inspector && (_jsxs("aside", { className: "flex w-80 shrink-0 flex-col border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u5B57\u6BB5\u5C5E\u6027" }), _jsx("button", { type: "button", onClick: () => setFieldSel(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u5173\u95ED", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: React.createElement(inspector, {
+                                    type: 'object',
+                                    name: current.name,
+                                    draft: objDraft,
+                                    selection: fieldSel,
+                                    onPatch,
+                                    onClearSelection: () => setFieldSel(null),
+                                    onSelectionChange: setFieldSel,
+                                    readOnly: false,
+                                    locale,
+                                }) })] }))] })] }));
+}
+/** Automations pillar — flows: list → FlowPreview (default OFF / review-then-enable). */
+function AutomationsPillar({ packageId }) {
+    const client = useMetadataClient();
+    const locale = 'zh-CN';
+    const [flows, setFlows] = React.useState([]);
+    const [current, setCurrent] = React.useState(null);
+    const [draft, setDraft] = React.useState({});
+    const [selection, setSelection] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [saving, setSaving] = React.useState(false);
+    const [hasDraft, setHasDraft] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const Preview = getMetadataPreview(current?.type ?? '');
+    const inspector = getMetadataInspector('flow');
+    const isEditable = !!Preview;
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = (await client.list('flow', { packageId }));
+                if (cancelled)
+                    return;
+                const items = (list || [])
+                    .map((f) => ({ type: 'flow', name: String(f.name ?? ''), label: String(f.label ?? f.name ?? '') }))
+                    .filter((f) => f.name);
+                setFlows(items);
+                setCurrent((c) => c ?? items[0] ?? null);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId]);
+    React.useEffect(() => {
+        if (!current)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setSelection(null);
+        (async () => {
+            try {
+                const [layRaw, draftResp] = await Promise.all([
+                    client.layered('flow', current.name),
+                    client.getDraft('flow', current.name).catch(() => null),
+                ]);
+                if (cancelled)
+                    return;
+                const lay = layRaw;
+                const baseline = (lay.effective ?? lay.code ?? {});
+                const draftBody = extractDraftBody(draftResp);
+                setDraft(draftBody ? { ...baseline, ...draftBody } : baseline);
+                setHasDraft(!!draftBody);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e instanceof Error ? e.message : String(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current]);
+    const onPatch = React.useCallback((patch) => setDraft((d) => ({ ...d, ...patch })), []);
+    const doSave = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('draft');
+        setError(null);
+        try {
+            await client.save('flow', current.name, draft, { mode: 'draft' });
+            setHasDraft(true);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, draft]);
+    const doPublish = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('publish');
+        setError(null);
+        try {
+            await client.publish('flow', current.name);
+            setHasDraft(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current]);
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u9ED8\u8BA4 OFF \u00B7 \u5BA1\u9605\u540E\u518D\u542F\u7528" }), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !isEditable || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "w-52 shrink-0 overflow-auto border-r p-2", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: "\u81EA\u52A8\u5316 \u00B7 flow" }), flows.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })) : (flows.map((f) => (_jsxs("button", { onClick: () => setCurrent(f), className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
+                                    (current?.name === f.name ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Workflow, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: f.label })] }, f.name))))] }), _jsxs("main", { className: "min-w-0 flex-1 overflow-auto bg-muted/30 p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Workflow, { className: "h-3 w-3" }), " \u53EF\u89C6\u5316\u7F16\u6392 \u00B7 \u70B9\u9009\u8282\u70B9\u914D\u7F6E"] }), current && _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["flow \u00B7 ", current.name] })] }), error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error })), _jsx("div", { className: "rounded-lg border bg-background p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u81EA\u52A8\u5316" })) : loading ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " \u52A0\u8F7D\u4E2D\u2026"] })) : Preview ? (React.createElement(Preview, {
+                                    type: current.type,
+                                    name: current.name,
+                                    draft,
+                                    editing: true,
+                                    selection,
+                                    onSelectionChange: setSelection,
+                                    onPatch,
+                                    locale,
+                                })) : (_jsx("pre", { className: "overflow-auto text-[11px] text-muted-foreground", children: JSON.stringify(draft, null, 2) })) }), isEditable && (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u70B9\u9009\u8282\u70B9 \u2192 \u53F3\u4FA7\u914D\u7F6E \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] }))] }), _jsxs("aside", { className: "w-72 shrink-0 overflow-auto border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u914D\u7F6E" }), selection && (_jsx("button", { type: "button", onClick: () => setSelection(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u53D6\u6D88\u9009\u62E9", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx("div", { className: "p-3", children: selection && inspector && current ? (React.createElement(inspector, {
+                                    type: 'flow',
+                                    name: current.name,
+                                    draft,
+                                    selection,
+                                    onPatch,
+                                    onClearSelection: () => setSelection(null),
+                                    onSelectionChange: setSelection,
+                                    readOnly: false,
+                                    locale,
+                                })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 px-2 py-10 text-center text-xs text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-5 w-5" }), "\u5728\u753B\u5E03\u91CC\u70B9\u9009\u4E00\u4E2A\u8282\u70B9,", _jsx("br", {}), "\u5B83\u7684\u914D\u7F6E\u4F1A\u5728\u8FD9\u91CC\u663E\u793A\u3002"] })) })] })] })] }));
+}
+export default StudioDesignSurface;