@object-ui/app-shell 11.2.0 → 11.4.0

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

@@ -0,0 +1,1306 @@
+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, useNavigate, 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 { ObjectForm } from '@object-ui/plugin-form';
+import { Boxes, FileText, Database, LayoutDashboard, BarChart3, Table2, Folder, Compass, Workflow, SlidersHorizontal, MousePointer2, Eye, Loader2, Save, Pencil, Check, Plus, X, GitBranch, Rocket, ChevronDown, Lock, ExternalLink, Home as HomeIcon, Shield, } from 'lucide-react';
+import { getMetadataPreview } from '../metadata-admin/preview-registry';
+import { PermissionMatrixEditPage } from '../metadata-admin/PermissionMatrixEditor';
+import { getMetadataInspector } from '../metadata-admin/inspector-registry';
+import { useMetadataClient } from '../metadata-admin/useMetadata';
+import { formatMetadataError, formatPublishFailures } from './metadataError';
+import { t, tFormat, useMetadataLocale } from '../metadata-admin/i18n';
+import { AppNavCanvas } from '../metadata-admin/previews/AppNavCanvas';
+import { readFields, writeFields, newField, toFieldName, toFieldNameLoose, } from '../metadata-admin/previews/object-fields-io';
+import { ObjectFormDesigner } from './ObjectFormDesigner';
+import { ObjectValidationsPanel } from './ObjectValidationsPanel';
+import { ObjectSettingsPanel } from './ObjectSettingsPanel';
+import { fetchPackages, createBasePackage, PACKAGE_ID_RE } from './packages-io';
+import { DraftChangesPanel } from '../../preview/DraftChangesPanel';
+import { toast } from 'sonner';
+const PILLARS = [
+    { key: 'data', label: 'Data', Icon: Database },
+    { key: 'automations', label: 'Automations', Icon: Workflow },
+    { key: 'interfaces', label: 'Interfaces', Icon: LayoutDashboard },
+    { key: 'access', label: 'Access', Icon: Shield },
+];
+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;
+}
+/** Top-bar package switcher: list app packages (可写 base vs 只读 code), switch by
+ * navigation, and create a new writable base inline (POST /packages {id,name}). */
+function PackageSwitcher({ packageId, tab }) {
+    const navigate = useNavigate();
+    const locale = useMetadataLocale();
+    const [open, setOpen] = React.useState(false);
+    const [pkgs, setPkgs] = React.useState(null);
+    const [creating, setCreating] = React.useState(false);
+    const [newName, setNewName] = React.useState('');
+    const [newId, setNewId] = React.useState('');
+    const [idTouched, setIdTouched] = React.useState(false);
+    const [busy, setBusy] = React.useState(false);
+    const [err, setErr] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        fetchPackages()
+            .then((parsed) => {
+            if (!cancelled)
+                setPkgs(parsed);
+        })
+            .catch(() => {
+            /* leave null — switcher still works for navigation-free display */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [packageId]);
+    const current = pkgs?.find((p) => p.id === packageId) ?? null;
+    const doCreate = React.useCallback(async () => {
+        const name = newName.trim();
+        const id = newId.trim();
+        if (!name || !PACKAGE_ID_RE.test(id))
+            return;
+        setBusy(true);
+        setErr(null);
+        try {
+            await createBasePackage(id, name);
+            toast.success(tFormat('engine.studio.pkg.created', locale, { name }));
+            setOpen(false);
+            setCreating(false);
+            setNewName('');
+            setNewId('');
+            setIdTouched(false);
+            navigate(`/studio/${encodeURIComponent(id)}/data`);
+        }
+        catch (e) {
+            setErr(formatMetadataError(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [newName, newId, navigate]);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex items-center gap-1.5 whitespace-nowrap rounded-md px-1.5 py-0.5 text-[13px] font-medium hover:bg-muted", title: t('engine.studio.pkg.switchTitle', locale), children: [_jsx(Boxes, { className: "h-4 w-4" }), " ", current?.name ?? packageId, current && !current.writable && (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded bg-amber-400/15 px-1.5 py-0.5 text-[10px] font-normal text-amber-600 dark:text-amber-300", children: [_jsx(Lock, { className: "h-2.5 w-2.5" }), " ", t('engine.studio.pkg.readonly', locale)] })), _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), open && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }), _jsxs("div", { className: "absolute left-0 top-full z-50 mt-1 w-80 rounded-lg border bg-background p-1.5 shadow-lg", children: [_jsx("p", { className: "px-2 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.studio.pkg.heading', locale) }), _jsxs("div", { className: "max-h-64 overflow-auto", children: [pkgs === null && _jsx("p", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: t('engine.studio.loading', locale) }), pkgs?.length === 0 && _jsx("p", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: t('engine.studio.pkg.none', locale) }), pkgs?.map((p) => (_jsxs("button", { type: "button", onClick: () => {
+                                            setOpen(false);
+                                            navigate(`/studio/${encodeURIComponent(p.id)}/${tab}`);
+                                        }, className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
+                                            (p.id === packageId ? 'bg-muted font-medium' : 'hover:bg-muted/60'), children: [_jsx(Boxes, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: p.name }), _jsx("span", { className: "block truncate font-mono text-[10px] text-muted-foreground", children: p.id })] }), p.writable ? (_jsx("span", { className: "rounded bg-emerald-400/15 px-1.5 py-0.5 text-[10px] text-emerald-600 dark:text-emerald-300", children: t('engine.studio.pkg.writable', locale) })) : (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded bg-amber-400/15 px-1.5 py-0.5 text-[10px] text-amber-600 dark:text-amber-300", children: [_jsx(Lock, { className: "h-2.5 w-2.5" }), " ", t('engine.studio.pkg.readonly', locale)] }))] }, p.id)))] }), _jsx("div", { className: "mt-1 border-t pt-1.5", children: creating ? (_jsxs("div", { className: "flex flex-col gap-1.5 px-1 pb-1", children: [_jsx("input", { autoFocus: true, value: newName, onChange: (e) => {
+                                                setNewName(e.target.value);
+                                                if (!idTouched) {
+                                                    const slug = toFieldNameLoose(e.target.value).replace(/_/g, '-');
+                                                    setNewId(slug ? `com.example.${slug}` : '');
+                                                }
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreate();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.pkg.namePlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: newId, onChange: (e) => {
+                                                setIdTouched(true);
+                                                setNewId(e.target.value.toLowerCase().replace(/[^a-z0-9_.-]/g, ''));
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreate();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.pkg.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), err && _jsx("p", { className: "text-[10px] text-destructive", children: err }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreate(), disabled: busy || !newName.trim() || !PACKAGE_ID_RE.test(newId.trim()), className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [busy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.pkg.createWritable', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.pkg.new', locale)] })) })] })] }))] }));
+}
+export function StudioDesignSurface({ aiSlot }) {
+    const params = useParams();
+    const packageId = params.packageId ?? 'com.example.showcase';
+    const tab = params.tab ?? 'interfaces';
+    const locale = useMetadataLocale();
+    // Package-level publish (ADR-0033/0037/0048): edits accumulate as per-item
+    // drafts STAMPED with this package (each save passes packageId → the draft row's
+    // sys_metadata.package_id). Publishing promotes exactly THIS package's drafts in
+    // one atomic pass (POST /packages/:id/publish-drafts), reviewed as a whole in
+    // DraftChangesPanel. There is no per-item publish.
+    const [changesOpen, setChangesOpen] = React.useState(false);
+    const [pendingCount, setPendingCount] = React.useState(null);
+    const [publishing, setPublishing] = React.useState(false);
+    const [publishNonce, setPublishNonce] = React.useState(0); // ↑ → pillars re-read the published baseline
+    const [draftNonce, setDraftNonce] = React.useState(0); // ↑ → refresh the pending-draft count
+    const refreshPending = React.useCallback(async () => {
+        try {
+            const res = await fetch(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(packageId)}`, {
+                credentials: 'include',
+                headers: { Accept: 'application/json' },
+                cache: 'no-store',
+            });
+            if (!res.ok)
+                return setPendingCount(null);
+            const data = (await res.json());
+            const list = (Array.isArray(data) ? data : (data?.drafts ?? []));
+            setPendingCount(list.length);
+        }
+        catch {
+            setPendingCount(null);
+        }
+    }, [packageId]);
+    React.useEffect(() => {
+        void refreshPending();
+    }, [refreshPending, publishNonce, draftNonce]);
+    const doPublish = React.useCallback(async () => {
+        setPublishing(true);
+        try {
+            const res = await fetch(`/api/v1/packages/${encodeURIComponent(packageId)}/publish-drafts`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+                body: '{}',
+            });
+            const payload = (await res.json().catch(() => null));
+            if (!res.ok || payload?.success === false) {
+                // Hard failure (e.g. package not found) — carry the field-anchored issues.
+                throw Object.assign(new Error(payload?.error?.message || `HTTP ${res.status}`), {
+                    issues: payload?.error?.details?.issues,
+                });
+            }
+            const failed = payload?.data?.failed ?? [];
+            if (failed.length > 0) {
+                // Partial publish: some drafts did NOT go live. The server returns 200
+                // with them buried in `failed[]`, so the UI used to claim success and
+                // swallow the reason — surface which drafts failed and why instead.
+                toast.error(formatPublishFailures(failed));
+            }
+            else {
+                toast.success(t('engine.studio.publishedAll', locale));
+                setChangesOpen(false);
+            }
+            setPublishNonce((n) => n + 1);
+        }
+        catch (e) {
+            toast.error(formatMetadataError(e));
+        }
+        finally {
+            setPublishing(false);
+        }
+        await refreshPending();
+    }, [packageId, refreshPending]);
+    const onDraftSaved = React.useCallback(() => setDraftNonce((n) => n + 1), []);
+    const hasPending = (pendingCount ?? 0) > 0;
+    // Builder → running-app bridge (Airtable's Launch): the builder edits the
+    // package (设计界面), the app is its published front-end. If this package
+    // ships an app, offer 打开应用 — opened in a new tab so the builder context
+    // survives. (App → builder is the reverse bridge, tracked separately.)
+    const shellNavigate = useNavigate();
+    const shellClient = useMetadataClient();
+    const [packageApp, setPackageApp] = React.useState(null);
+    // 创建应用 (package has no app yet): create a draft `app` item — the published
+    // front-end's on-ramp. The button flips to 打开应用 after the package publish.
+    const [appCreating, setAppCreating] = React.useState(false);
+    const [appLabel, setAppLabel] = React.useState('');
+    const [appName, setAppName] = React.useState('');
+    const [appNameTouched, setAppNameTouched] = React.useState(false);
+    const [appBusy, setAppBusy] = React.useState(false);
+    const [appDraftPending, setAppDraftPending] = React.useState(null);
+    const doCreateApp = React.useCallback(async () => {
+        const label = appLabel.trim();
+        const name = toFieldName(appName.trim() || label);
+        if (!label || !name || name === 'field')
+            return;
+        setAppBusy(true);
+        try {
+            await shellClient.save('app', name, { name, label, active: true, navigation: [] }, { mode: 'draft', packageId });
+            toast.success(tFormat('engine.studio.app.savedDraft', locale, { label }));
+            setAppDraftPending(label);
+            setAppCreating(false);
+            setAppLabel('');
+            setAppName('');
+            setAppNameTouched(false);
+            setDraftNonce((n) => n + 1);
+        }
+        catch (e) {
+            toast.error(formatMetadataError(e));
+        }
+        finally {
+            setAppBusy(false);
+        }
+    }, [appLabel, appName, shellClient, packageId]);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const apps = (await shellClient.list('app', { packageId }));
+                const first = (apps || [])
+                    .map((a) => ({ name: String(a.name ?? ''), label: String(a.label ?? a.name ?? '') }))
+                    .filter((a) => a.name)[0];
+                if (!cancelled)
+                    setPackageApp(first ?? null);
+            }
+            catch {
+                if (!cancelled)
+                    setPackageApp(null);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [shellClient, packageId, publishNonce]);
+    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: [_jsx("button", { type: "button", onClick: () => shellNavigate('/home'), title: t('engine.studio.home', locale), className: "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground", children: _jsx(HomeIcon, { className: "h-4 w-4" }) }), _jsx(PackageSwitcher, { packageId: packageId, tab: tab }), _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" }), t(`engine.studio.pillar.${p.key}`, locale)] }, p.key))) }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [packageApp ? (_jsxs("button", { type: "button", onClick: () => window.open(`/apps/${encodeURIComponent(packageApp.name)}`, '_blank'), title: tFormat('engine.studio.app.openTitle', locale, { label: packageApp.label }), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t('engine.studio.app.open', locale)] })) : appDraftPending ? (_jsx("span", { title: t('engine.studio.app.willOpenAfterPublish', locale), className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: tFormat('engine.studio.app.pending', locale, { label: appDraftPending }) })) : (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setAppCreating((v) => !v), title: t('engine.studio.app.noneTitle', locale), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), t('engine.studio.app.create', locale)] }), appCreating && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setAppCreating(false) }), _jsxs("div", { className: "absolute right-0 top-full z-50 mt-1 flex w-72 flex-col gap-1.5 rounded-lg border bg-background p-2 shadow-lg", children: [_jsx("input", { autoFocus: true, value: appLabel, onChange: (e) => {
+                                                                    setAppLabel(e.target.value);
+                                                                    if (!appNameTouched)
+                                                                        setAppName(toFieldNameLoose(e.target.value));
+                                                                }, onKeyDown: (e) => {
+                                                                    if (e.key === 'Enter')
+                                                                        void doCreateApp();
+                                                                    if (e.key === 'Escape')
+                                                                        setAppCreating(false);
+                                                                }, placeholder: t('engine.studio.app.namePlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: appName, onChange: (e) => {
+                                                                    setAppNameTouched(true);
+                                                                    setAppName(toFieldNameLoose(e.target.value));
+                                                                }, onKeyDown: (e) => {
+                                                                    if (e.key === 'Enter')
+                                                                        void doCreateApp();
+                                                                    if (e.key === 'Escape')
+                                                                        setAppCreating(false);
+                                                                }, placeholder: t('engine.studio.app.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("button", { type: "button", onClick: () => void doCreateApp(), disabled: appBusy || !appLabel.trim() || !toFieldName(appName.trim() || appLabel) || toFieldName(appName.trim() || appLabel) === 'field', className: "inline-flex items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [appBusy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.createDraft', locale)] })] })] }))] })), _jsxs("button", { type: "button", onClick: () => setChangesOpen(true), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(GitBranch, { className: "h-3.5 w-3.5" }), t('engine.studio.changes', locale), hasPending ? ` · ${pendingCount}` : ''] }), _jsxs("button", { type: "button", onClick: doPublish, disabled: publishing || !hasPending, title: hasPending ? t('engine.studio.publishTitle', locale) : t('engine.studio.publishNoneTitle', locale), className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [publishing ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Rocket, { className: "h-3.5 w-3.5" }), t('engine.studio.publish', locale)] })] })] }), _jsx("div", { className: "min-h-0 flex-1", children: tab === 'data' ? (_jsx(DataPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : tab === 'automations' ? (_jsx(AutomationsPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : tab === 'access' ? (_jsx(AccessPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : (_jsx(InterfacesPillar, { packageId: packageId, publishNonce: publishNonce, draftNonce: draftNonce, onDraftSaved: onDraftSaved, onCreateApp: () => setAppCreating(true) })) })] }), _jsx(DraftChangesPanel, { open: changesOpen, onOpenChange: setChangesOpen, 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. */
+/**
+ * StudioNavItemInspector — right-panel editor for the selected nav item while
+ * editing an app's navigation. The Studio adds flat top-level items
+ * (`navigation[i]`), so binding is a business-friendly object picker rather
+ * than the raw path field of the generic AppNavInspector: picking an object
+ * writes `{ object }` (which the runtime resolves to that object's record
+ * list) and, if the label is still the placeholder, adopts the object's label.
+ */
+function StudioNavItemInspector({ navId, appDraft, objects, onNavPatch, onClear, }) {
+    const locale = useMetadataLocale();
+    const idx = React.useMemo(() => {
+        const m = /^navigation\[(\d+)\]$/.exec(navId);
+        return m ? Number(m[1]) : -1;
+    }, [navId]);
+    const nav = React.useMemo(() => (Array.isArray(appDraft.navigation) ? appDraft.navigation : []), [appDraft]);
+    const node = idx >= 0 ? nav[idx] : null;
+    if (!node) {
+        return (_jsx("div", { className: "px-2 py-10 text-center text-xs text-muted-foreground", children: t('engine.studio.nav.selectItem', locale) }));
+    }
+    const patch = (updates) => {
+        onNavPatch({ navigation: nav.map((n, i) => (i === idx ? { ...n, ...updates } : n)) });
+    };
+    const boundObject = String(node.object ?? node.objectName ?? '');
+    const curLabel = String(node.label ?? node.title ?? node.name ?? '');
+    // A nav card is a placeholder until its label is edited or a target adopts a
+    // real label. Match both the legacy English sentinel and the locale-specific
+    // default from AppNavCanvas so items created in any locale are recognized.
+    const isPlaceholder = !curLabel || curLabel === 'New item' || curLabel === t('engine.appNav.newItem', locale);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[11px] font-medium text-muted-foreground", children: t('engine.studio.nav.label', locale) }), _jsx("input", { value: curLabel, onChange: (e) => patch({ label: e.target.value }), placeholder: t('engine.studio.nav.labelPlaceholder', locale), className: "w-full rounded border bg-background px-2 py-1 text-xs" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-[11px] font-medium text-muted-foreground", children: t('engine.studio.nav.linkObject', locale) }), _jsxs("select", { value: boundObject, onChange: (e) => {
+                            const objName = e.target.value;
+                            const obj = objects.find((o) => o.name === objName);
+                            if (!objName) {
+                                // Unbind → back to an (invalid, dropped-on-save) placeholder.
+                                patch({ type: undefined, objectName: undefined, object: undefined });
+                                return;
+                            }
+                            // Emit a spec-complete ObjectNavItem: the app schema's nav is a
+                            // discriminated union on `type` and BaseNavItem requires a
+                            // snake_case `id`. Missing either fails "navigation.0: Invalid
+                            // input" at save. `object`/`path` are cleared so no stray keys
+                            // linger from the blank placeholder.
+                            patch({
+                                id: node.id || `nav_${objName}`,
+                                type: 'object',
+                                objectName: objName,
+                                object: undefined,
+                                path: undefined,
+                                label: isPlaceholder && obj ? obj.label : curLabel,
+                            });
+                        }, className: "w-full rounded border bg-background px-2 py-1 text-xs", children: [_jsx("option", { value: "", children: t('engine.studio.nav.chooseObject', locale) }), objects.map((o) => (_jsxs("option", { value: o.name, children: [o.label, " (", o.name, ")"] }, o.name)))] }), _jsx("p", { className: "mt-1 text-[11px] text-muted-foreground", children: boundObject ? t('engine.studio.nav.boundHint', locale) : t('engine.studio.nav.unboundHint', locale) }), objects.length === 0 && (_jsx("p", { className: "mt-1 text-[11px] text-amber-600 dark:text-amber-400", children: t('engine.studio.nav.noObjects', locale) }))] }), _jsx("button", { type: "button", onClick: onClear, className: "text-[11px] text-muted-foreground underline-offset-2 hover:underline", children: t('engine.studio.deselect', locale) })] }));
+}
+function InterfacesPillar({ packageId, publishNonce = 0, draftNonce = 0, onDraftSaved, onCreateApp, }) {
+    const client = useMetadataClient();
+    const locale = useMetadataLocale();
+    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);
+    // App resolution status — tells "still loading" apart from "this package has
+    // no app", so the canvas shows a real empty state instead of an endless
+    // spinner.
+    const [appStatus, setAppStatus] = React.useState('loading');
+    // Objects in THIS package (published ∪ draft) — the nav item inspector's
+    // object picker, so nav can be wired to sibling objects before publishing.
+    const [pkgObjects, setPkgObjects] = React.useState([]);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const [pub, drafts] = await Promise.all([
+                    client.list('object', { packageId }),
+                    client.listDrafts({ packageId, type: 'object' }).catch(() => []),
+                ]);
+                if (cancelled)
+                    return;
+                const byName = new Map();
+                for (const raw of [...(pub || []), ...(drafts || [])]) {
+                    const o = raw;
+                    const name = String(o.name ?? '');
+                    if (!name || byName.has(name))
+                        continue;
+                    byName.set(name, { name, label: String(o.label ?? o.name ?? name) });
+                }
+                setPkgObjects([...byName.values()]);
+            }
+            catch {
+                /* non-fatal — picker just stays empty */
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId, publishNonce, draftNonce]);
+    // Resolve THIS package's App → load its navigation tree. The query is scoped
+    // to the package (`list('app', { packageId })`) so a design surface only ever
+    // shows the current package's app — never another package's. `list()` sees
+    // published metadata only, so a freshly-created (unpublished) app is found via
+    // `listDrafts()` instead, keeping it designable before its first publish.
+    React.useEffect(() => {
+        let cancelled = false;
+        setAppStatus('loading');
+        (async () => {
+            try {
+                const published = (await client.list('app', { packageId }));
+                if (cancelled)
+                    return;
+                let name = published?.[0]?.name ? String(published[0].name) : null;
+                let label = published?.[0]
+                    ? String(published[0].label ?? published[0].name ?? packageId)
+                    : packageId;
+                if (!name) {
+                    const drafts = await client.listDrafts({ packageId, type: 'app' });
+                    if (cancelled)
+                        return;
+                    const d = drafts?.[0];
+                    if (d?.name) {
+                        name = String(d.name);
+                        label = String(d.name);
+                    }
+                }
+                if (!name) {
+                    setAppStatus('missing');
+                    return;
+                }
+                setAppLabel(label);
+                setAppName(name);
+                const [layRaw, appDraftResp] = await Promise.all([
+                    client.layered('app', name),
+                    client.getDraft('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;
+                if (typeof body.label === 'string' || typeof body.name === 'string') {
+                    setAppLabel(String(body.label ?? body.name ?? label));
+                }
+                setAppDraft(body);
+                setNavHasDraft(!!appDraftBody);
+                setAppStatus('ready');
+                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(formatMetadataError(e));
+                    setAppStatus('missing');
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId, publishNonce, draftNonce]);
+    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(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current, isEditable, publishNonce]);
+    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', packageId });
+            setHasDraft(true);
+            onDraftSaved?.();
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, draft, onDraftSaved]);
+    // 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 {
+            // "Add nav item" inserts a blank placeholder that only becomes a valid,
+            // spec-conformant item once a target is picked in the inspector. Drop
+            // still-untargeted placeholders (no `type`) so one stray blank can't fail
+            // the whole app's spec validation ("navigation.N: Invalid input"), and
+            // backfill a snake_case id defensively.
+            const rawNav = Array.isArray(appDraft.navigation) ? appDraft.navigation : [];
+            const cleanedNav = rawNav
+                .filter((n) => n && typeof n.type === 'string')
+                .map((n, i) => {
+                const item = n;
+                return typeof item.id === 'string' && item.id ? item : { ...item, id: `nav_item_${i + 1}` };
+            });
+            await client.save('app', appName, { ...appDraft, navigation: cleanedNav }, { mode: 'draft', packageId });
+            setNavHasDraft(true);
+            setNavDirty(false);
+            onDraftSaved?.();
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setNavSaving(false);
+        }
+    }, [client, appName, appDraft, onDraftSaved]);
+    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: t('engine.studio.if.pickLeft', locale) })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _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" }), t('engine.studio.saveDraft', locale)] })] }), _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: [_jsx("p", { className: "truncate text-[11px] font-medium text-muted-foreground", children: tFormat('engine.studio.if.navHeading', locale, { app: appLabel }) }), appStatus === 'ready' && (_jsx("button", { type: "button", onClick: () => {
+                                                    setEditNav((v) => !v);
+                                                    setNavSel(null);
+                                                }, title: editNav ? t('engine.studio.if.doneEditTitle', locale) : t('engine.studio.if.editNavTitle', locale), 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" }), " ", t('engine.studio.done', locale)] })) : (_jsxs(_Fragment, { children: [_jsx(Pencil, { className: "h-3 w-3" }), " ", t('engine.studio.edit', locale)] })) }))] }), 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: t('engine.studio.unpublished', locale) })), _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" })), t('engine.studio.saveDraft', locale)] })] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: appStatus === 'missing' && !error ? (_jsxs("div", { className: "px-2 py-3", children: [_jsx("p", { className: "text-[11px] text-muted-foreground", children: t('engine.studio.if.noApp', locale) }), onCreateApp && (_jsxs("button", { type: "button", onClick: onCreateApp, className: "mt-2 inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] hover:bg-muted", children: [_jsx(Plus, { className: "h-3 w-3" }), " ", t('engine.studio.app.create', locale)] }))] })) : editNav ? (_jsx(AppNavCanvas, { draft: appDraft, rootKey: "navigation", onPatch: onNavPatch, selection: navSel, onSelectionChange: (s) => setNavSel(s ? { kind: s.kind, id: s.id } : null) })) : navTree.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error
+                                        ? t('engine.studio.loadFailed', locale)
+                                        : appStatus === 'loading'
+                                            ? t('engine.studio.loading', locale)
+                                            : t('engine.studio.if.noNavItems', locale) })) : (_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" }), " ", t('engine.studio.if.previewIsRuntime', locale)] }), 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 whitespace-pre-line", children: error })), _jsx("div", { className: "rounded-lg border bg-background p-4", children: appStatus === 'missing' && !error ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(LayoutDashboard, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: t('engine.studio.if.noAppTitle', locale) }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t('engine.studio.if.noAppHint', locale) })] }), onCreateApp && (_jsxs("button", { type: "button", onClick: onCreateApp, className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.app.create', locale)] }))] })) : !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: t('engine.studio.if.pickLeft', locale) })) : 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" }), " ", t('engine.studio.loading', locale)] })) : 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 })) : (_jsx("div", { className: "py-12 text-center text-xs text-muted-foreground", children: tFormat('engine.studio.if.readonlyPreview', locale, { type: current.type }) })) }), isEditable ? (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " ", t('engine.studio.if.editHint', locale)] })) : 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" }), " ", t('engine.studio.if.objectHintPre', locale), _jsx("span", { className: "font-medium", children: "Data" }), t('engine.studio.if.objectHintPost', locale)] })) : 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: t('engine.studio.inspector.props', locale) }), 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": t('engine.studio.deselect', locale), children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx("div", { className: "p-3", children: editNav && navSel ? (_jsx(StudioNavItemInspector, { navId: navSel.id, appDraft: appDraft, objects: pkgObjects, onNavPatch: onNavPatch, onClear: () => setNavSel(null) })) : 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" }), t('engine.studio.inspector.emptyLine1', locale), _jsx("br", {}), t('engine.studio.inspector.emptyLine2', locale)] })) })] })] })] }));
+}
+/** 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, publishNonce = 0, onDraftSaved, }) {
+    const client = useMetadataClient();
+    const adapter = useAdapter();
+    const locale = useMetadataLocale();
+    const [objects, setObjects] = React.useState([]);
+    const [objectsLoaded, setObjectsLoaded] = React.useState(false);
+    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);
+    // Records grid ⇄ Form ⇄ Validations ⇄ Settings — four views of the SAME
+    // object. Grid/Form are the runtime renderer (same-renderer principle);
+    // Validations edits `validations` rules; Settings edits object basics +
+    // the ADR-0085 semantic roles. All patch the one `objDraft`.
+    const [viewMode, setViewMode] = React.useState('grid');
+    // Within the Form view: 布局 (WYSIWYG drag/section designer) ⇄ 预览 (live form).
+    const [formMode, setFormMode] = React.useState('layout');
+    // Tracks which object's baseline is currently loaded — so we (re)load exactly
+    // once per selected object and never clobber an in-progress draft.
+    const loadedNameRef = React.useRef(null);
+    // Left-rail search + inline "new object" creator (design §4: rail = search + New).
+    const [query, setQuery] = React.useState('');
+    const [creating, setCreating] = React.useState(false);
+    const [newLabel, setNewLabel] = React.useState('');
+    const [newName, setNewName] = React.useState('');
+    const [nameTouched, setNameTouched] = React.useState(false);
+    const [createBusy, setCreateBusy] = React.useState(false);
+    // Whether the selected object exists beyond the draft (published/code baseline).
+    // A draft-only object has NO physical table yet (DDL lands at publish), so the
+    // Records grid must not fire data SQL against it.
+    const [hasBaseline, setHasBaseline] = React.useState(true);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                // Published objects + pending DRAFT objects, merged. `list()` only
+                // sees published/active metadata, so a freshly-created writable base
+                // whose objects are all drafts would render an empty (previously:
+                // forever-"loading") rail. Draft headers carry no label — show the
+                // machine name until the draft body loads on selection.
+                const [list, draftHeaders] = await Promise.all([
+                    client.list('object', { packageId }),
+                    client.listDrafts({ packageId, type: 'object' }).catch(() => []),
+                ]);
+                if (cancelled)
+                    return;
+                const items = (list || [])
+                    .map((o) => ({ type: 'object', name: String(o.name ?? ''), label: String(o.label ?? o.name ?? '') }))
+                    .filter((o) => o.name);
+                const known = new Set(items.map((o) => o.name));
+                for (const d of draftHeaders) {
+                    if (d.name && !known.has(d.name)) {
+                        items.push({ type: 'object', name: d.name, label: d.name });
+                    }
+                }
+                setObjects(items);
+                setCurrent((c) => c ?? items[0] ?? null);
+                // First-run: an empty writable package opens the creator right away —
+                // the first thing to do here is make an object, so put the inputs up.
+                if (items.length === 0)
+                    setCreating(true);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setObjectsLoaded(true);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId]);
+    React.useEffect(() => {
+        if (!current)
+            return;
+        // Load once per selected object. Bail if this object's baseline is already
+        // loaded — a client-identity churn or a child remount must NOT re-fetch and
+        // clobber the in-progress form-layout draft the designer is editing.
+        // Keyed by object + publishNonce: a package publish (nonce++) re-reads the
+        // fresh published baseline; otherwise we never clobber an in-progress draft.
+        const loadKey = `${current.name}#${publishNonce}`;
+        if (loadedNameRef.current === loadKey)
+            return;
+        loadedNameRef.current = loadKey;
+        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);
+                setHasBaseline(!!(lay.effective ?? lay.code));
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current, publishNonce]);
+    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', t('engine.studio.data.newFieldLabel', locale)));
+        setObjDraft((d) => ({ ...d, fields: writeFields(view) }));
+        setDirty(true);
+        setFieldSel({ kind: 'field', id: name });
+    }, [objDraft]);
+    // "+ new object": create a fresh object as a DRAFT in this package (runtime
+    // create — same path the classic Studio editor uses), seeded with one text
+    // field so the form/grid isn't empty. It stays draft-only (no physical table)
+    // until the package publish, so we land on 表单·布局 — the metadata-level
+    // surface that never fires data SQL.
+    const doCreateObject = React.useCallback(async () => {
+        const label = newLabel.trim();
+        const name = toFieldName(newName.trim() || label);
+        if (!label || !name || name === 'field')
+            return; // CJK label → identifier must be typed
+        if (objects.some((o) => o.name === name)) {
+            setError(tFormat('engine.studio.data.idExists', locale, { name }));
+            return;
+        }
+        setCreateBusy(true);
+        setError(null);
+        try {
+            const body = {
+                name,
+                label,
+                fields: { name: { type: 'text', label: t('engine.studio.data.nameFieldLabel', locale) } },
+            };
+            await client.save('object', name, body, { mode: 'draft', packageId });
+            const surface = { type: 'object', name, label };
+            setObjects((prev) => [...prev, surface]);
+            setCurrent(surface);
+            setViewMode('form');
+            setFormMode('layout');
+            setCreating(false);
+            setNewLabel('');
+            setNewName('');
+            setNameTouched(false);
+            onDraftSaved?.();
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setCreateBusy(false);
+        }
+    }, [newLabel, newName, objects, client, packageId, onDraftSaved]);
+    const doSave = React.useCallback(async () => {
+        if (!current)
+            return;
+        setSaving('draft');
+        setError(null);
+        try {
+            await client.save('object', current.name, objDraft, { mode: 'draft', packageId });
+            setHasDraft(true);
+            setDirty(false);
+            onDraftSaved?.();
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, objDraft, onDraftSaved]);
+    // Drag-reorder columns → reorder the object's `fields` metadata (field display
+    // order follows metadata order), saved as a DRAFT. Published later via the
+    // package release — NOT auto-published per reorder as it used to be.
+    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('draft');
+        setError(null);
+        try {
+            await client.save('object', current.name, body, { mode: 'draft', packageId });
+            setHasDraft(true);
+            setDirty(false);
+            onDraftSaved?.();
+            setGridVer((v) => v + 1); // remount so the grid reflects the new (draft) order
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, objDraft, onDraftSaved]);
+    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] }), _jsx("span", { children: tFormat('engine.studio.data.fieldCount', locale, { count: fieldCount }) })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: t('engine.studio.data.pickObject', locale) })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _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" }), t('engine.studio.saveDraft', locale)] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "flex w-52 shrink-0 flex-col border-r", children: [_jsxs("div", { className: "shrink-0 p-2 pb-1", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: t('engine.studio.data.objects', locale) }), _jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('engine.studio.data.searchObjects', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none placeholder:text-muted-foreground/70 focus:ring-1 focus:ring-primary" })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto p-2 pt-1", children: [objects.length === 0 && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? t('engine.studio.loadFailed', locale) : objectsLoaded ? t('engine.studio.data.noObjects', locale) : t('engine.studio.loading', locale) })), objects
+                                        .filter((o) => !query.trim() ||
+                                        o.label.toLowerCase().includes(query.trim().toLowerCase()) ||
+                                        o.name.toLowerCase().includes(query.trim().toLowerCase()))
+                                        .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("div", { className: "shrink-0 border-t p-2", children: creating ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("input", { autoFocus: true, value: newLabel, onChange: (e) => {
+                                                setNewLabel(e.target.value);
+                                                if (!nameTouched)
+                                                    setNewName(toFieldNameLoose(e.target.value));
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreateObject();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.data.labelPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: newName, onChange: (e) => {
+                                                setNameTouched(true);
+                                                setNewName(toFieldNameLoose(e.target.value));
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreateObject();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.data.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreateObject(), disabled: createBusy || !newLabel.trim() || !toFieldName(newName.trim() || newLabel) || toFieldName(newName.trim() || newLabel) === 'field', className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [createBusy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.createDraft', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "inline-flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.data.newObject', locale)] })) })] }), _jsx("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden p-4", children: !current ? (objectsLoaded && objects.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-2 py-16 text-center", children: [_jsx("p", { className: "text-sm font-medium", children: t('engine.studio.data.firstObjectTitle', locale) }), _jsx("p", { className: "max-w-sm text-[11px] leading-5 text-muted-foreground", children: t('engine.studio.data.firstObjectHint', locale) })] })) : (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: t('engine.studio.data.pickObject', locale) }))) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex shrink-0 items-center gap-2", children: [_jsxs("div", { className: "inline-flex rounded-md border p-0.5 text-[11px]", children: [_jsx("button", { type: "button", onClick: () => setViewMode('grid'), className: 'rounded px-2.5 py-0.5 ' +
+                                                        (viewMode === 'grid' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.tab.records', locale) }), _jsx("button", { type: "button", onClick: () => setViewMode('form'), className: 'rounded px-2.5 py-0.5 ' +
+                                                        (viewMode === 'form' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.tab.form', locale) }), _jsx("button", { type: "button", onClick: () => setViewMode('rules'), className: 'rounded px-2.5 py-0.5 ' +
+                                                        (viewMode === 'rules' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.tab.rules', locale) }), _jsx("button", { type: "button", onClick: () => setViewMode('settings'), className: 'rounded px-2.5 py-0.5 ' +
+                                                        (viewMode === 'settings' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.tab.settings', locale) })] }), _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" }), ' ', viewMode === 'grid'
+                                                    ? t('engine.studio.data.badge.grid', locale)
+                                                    : viewMode === 'rules'
+                                                        ? t('engine.studio.data.badge.rules', locale)
+                                                        : viewMode === 'settings'
+                                                            ? t('engine.studio.data.badge.settings', locale)
+                                                            : formMode === 'layout'
+                                                                ? t('engine.studio.data.badge.formLayout', locale)
+                                                                : t('engine.studio.data.badge.formPreview', locale)] }), (viewMode === 'grid' || viewMode === 'form') && (_jsxs("button", { type: "button", onClick: addField, title: t('engine.studio.data.addFieldTitle', locale), 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" }), " ", t('engine.studio.data.addField', locale)] }))] }), error && (_jsx("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive whitespace-pre-line", children: error })), viewMode === 'rules' ? (_jsx(ObjectValidationsPanel, { draft: objDraft, onPatch: onPatch })) : viewMode === 'settings' ? (_jsx(ObjectSettingsPanel, { name: current.name, draft: objDraft, onPatch: onPatch, locale: locale })) : viewMode === 'grid' && !hasBaseline ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/20 text-center", children: [_jsx("p", { className: "text-sm font-medium", children: t('engine.studio.data.draftObjectTitle', locale) }), _jsx("p", { className: "max-w-md text-[11px] leading-5 text-muted-foreground", children: t('engine.studio.data.draftObjectHint', locale) }), _jsx("button", { type: "button", onClick: () => {
+                                                setViewMode('form');
+                                                setFormMode('layout');
+                                            }, className: "mt-1 inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted", children: t('engine.studio.data.goDesignFields', locale) })] })) : viewMode === 'grid' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-lg border bg-background", children: _jsx(GridFieldAuthoringProvider, { value: {
+                                                    onAddColumn: addField,
+                                                    addColumnLabel: t('engine.studio.data.addField', locale),
+                                                    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: t('engine.studio.data.editFieldProps', locale),
+                                                    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" }), " ", t('engine.studio.data.gridHint', locale)] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("div", { className: "inline-flex rounded-md border p-0.5 text-[11px]", children: [_jsx("button", { type: "button", onClick: () => setFormMode('layout'), className: 'rounded px-2.5 py-0.5 ' +
+                                                                (formMode === 'layout' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.form.layout', locale) }), _jsx("button", { type: "button", onClick: () => setFormMode('preview'), className: 'rounded px-2.5 py-0.5 ' +
+                                                                (formMode === 'preview' ? 'bg-muted font-medium' : 'text-muted-foreground hover:text-foreground'), children: t('engine.studio.data.form.preview', locale) })] }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: formMode === 'layout' ? t('engine.studio.data.form.layoutBadge', locale) : t('engine.studio.data.form.previewBadge', locale) }), formMode === 'preview' && (dirty || hasDraft) && (_jsx("span", { className: "inline-flex items-center gap-1 rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.data.form.previewWarn', locale) }))] }), formMode === 'layout' ? (_jsx(ObjectFormDesigner, { draft: objDraft, systemFieldNames: STUDIO_SYSTEM_FIELD_NAMES, onChange: onPatch, selectedField: fieldSel?.kind === 'field' ? fieldSel.id : null, onSelectField: (name) => setFieldSel({ kind: 'field', id: name }), onAddField: addField })) : !hasBaseline ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/20 text-center", children: [_jsx("p", { className: "text-sm font-medium", children: t('engine.studio.data.form.noPublishedTitle', locale) }), _jsx("p", { className: "max-w-md text-[11px] leading-5 text-muted-foreground", children: t('engine.studio.data.form.noPublishedHint', locale) })] })) : (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+                /* Design preview: the form is a click-to-select canvas, not a data-entry
+                 * form. Disable interaction on field contents so a click anywhere on a
+                 * field routes to its [data-field] wrapper (→ select), and neutralize the
+                 * create/cancel footer so nothing is submittable here. */
+                .os-form-authoring [data-field]{border-radius:8px;cursor:pointer;transition:box-shadow .12s;padding:8px;margin:-8px 0;}
+                .os-form-authoring [data-field] *{pointer-events:none;}
+                .os-form-authoring [data-field]:hover{box-shadow:0 0 0 1px hsl(var(--border));}
+                .os-form-authoring form > div:last-child:has(button){display:none;}
+                ${fieldSel?.kind === 'field'
+                                                        ? `.os-form-authoring [data-field="${String(fieldSel.id).replace(/[^\w-]/g, '')}"]{box-shadow:0 0 0 2px hsl(var(--primary));}`
+                                                        : ''}
+              ` }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-lg border bg-background p-6", children: _jsx("div", { className: "os-form-authoring mx-auto max-w-2xl", onClick: (e) => {
+                                                            const el = e.target.closest('[data-field]');
+                                                            const name = el?.getAttribute('data-field');
+                                                            if (name && readFields(objDraft.fields).entries.some((f) => f.name === name)) {
+                                                                setFieldSel({ kind: 'field', id: name });
+                                                            }
+                                                        }, children: _jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(ObjectForm, { schema: {
+                                                                    type: 'object-form',
+                                                                    objectName: current.name,
+                                                                    mode: 'create',
+                                                                    fields: readFields(objDraft.fields)
+                                                                        .entries.map((e) => e.name)
+                                                                        .filter((n) => !STUDIO_SYSTEM_FIELD_NAMES.has(n)),
+                                                                }, dataSource: adapter }, `${current.name}:${gridVer}:form`) }) }) }), _jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " ", t('engine.studio.data.formHint', locale)] })] }))] }))] })) }), 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: t('engine.studio.data.fieldProps', locale) }), _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": t('engine.studio.close', locale), 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, publishNonce = 0, onDraftSaved, }) {
+    const client = useMetadataClient();
+    const locale = useMetadataLocale();
+    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);
+    // Tells "still fetching the list" apart from "fetched, package has no flows"
+    // — without it the empty rail showed an endless "加载中…" for a fresh package.
+    const [listed, setListed] = React.useState(false);
+    // Inline create — a fresh package starts with zero flows, so the pillar must
+    // offer a way to author the first one (mirrors the object/app creators).
+    const [creating, setCreating] = React.useState(false);
+    const [newLabel, setNewLabel] = React.useState('');
+    const [newName, setNewName] = React.useState('');
+    const [createBusy, setCreateBusy] = React.useState(false);
+    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(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setListed(true);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, packageId]);
+    const doCreateFlow = React.useCallback(async () => {
+        const label = newLabel.trim();
+        const name = toFieldName(newName.trim() || label);
+        if (!label || !name || name === 'field')
+            return;
+        setCreateBusy(true);
+        setError(null);
+        try {
+            // Minimal valid, autolaunched skeleton: start → end. The designer fills in
+            // the trigger + nodes; publishing it is a separate, user-initiated step.
+            const skeleton = {
+                name,
+                label,
+                type: 'autolaunched',
+                nodes: [
+                    { id: 'start', type: 'start', label: t('engine.studio.auto.nodeStart', locale) },
+                    { id: 'end', type: 'end', label: t('engine.studio.auto.nodeEnd', locale) },
+                ],
+                edges: [{ id: 'e1', source: 'start', target: 'end' }],
+            };
+            await client.save('flow', name, skeleton, { mode: 'draft', packageId });
+            const item = { type: 'flow', name, label };
+            setFlows((fs) => [...fs.filter((f) => f.name !== name), item]);
+            setCurrent(item);
+            setHasDraft(true);
+            setCreating(false);
+            setNewLabel('');
+            setNewName('');
+            onDraftSaved?.();
+            toast.success(tFormat('engine.studio.auto.savedDraft', locale, { label }));
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setCreateBusy(false);
+        }
+    }, [newLabel, newName, client, packageId, onDraftSaved]);
+    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(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, current, publishNonce]);
+    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', packageId });
+            setHasDraft(true);
+            onDraftSaved?.();
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [client, current, draft, onDraftSaved]);
+    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: t('engine.studio.auto.defaultOff', locale) }), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _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" }), t('engine.studio.saveDraft', locale)] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "flex w-52 shrink-0 flex-col overflow-auto border-r p-2", children: [_jsxs("div", { className: "flex items-center gap-1 px-2 pb-1 pt-1", children: [_jsx("p", { className: "flex-1 text-[11px] font-medium text-muted-foreground", children: t('engine.studio.auto.heading', locale) }), _jsxs("button", { type: "button", onClick: () => setCreating((v) => !v), title: t('engine.studio.auto.newTitle', locale), className: "inline-flex items-center gap-0.5 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted", children: [_jsx(Plus, { className: "h-3 w-3" }), " ", t('engine.studio.new', locale)] })] }), flows.length > 0 &&
+                                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))), flows.length === 0 && !creating && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? t('engine.studio.loadFailed', locale) : !listed ? t('engine.studio.loading', locale) : t('engine.studio.auto.none', locale) })), creating && (_jsxs("div", { className: "mt-1 space-y-1.5 rounded-md border bg-muted/30 p-2", children: [_jsx("input", { autoFocus: true, value: newLabel, onChange: (e) => setNewLabel(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                void doCreateFlow();
+                                            if (e.key === 'Escape')
+                                                setCreating(false);
+                                        }, placeholder: t('engine.studio.auto.namePlaceholder', locale), className: "w-full rounded border bg-background px-2 py-1 text-xs" }), _jsx("input", { value: newName, onChange: (e) => setNewName(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                void doCreateFlow();
+                                            if (e.key === 'Escape')
+                                                setCreating(false);
+                                        }, placeholder: t('engine.studio.auto.idPlaceholder', locale), className: "w-full rounded border bg-background px-2 py-1 font-mono text-[11px]" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", onClick: () => void doCreateFlow(), disabled: !newLabel.trim() || createBusy, className: "inline-flex flex-1 items-center justify-center gap-1 rounded bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [createBusy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.createDraft', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded border px-2 py-1 text-[11px] hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] }))] }), _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" }), " ", t('engine.studio.auto.canvasHint', locale)] }), 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 whitespace-pre-line", 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: t('engine.studio.auto.pick', locale) })) : 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" }), " ", t('engine.studio.loading', locale)] })) : 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" }), " ", t('engine.studio.auto.editHint', locale)] }))] }), _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: t('engine.studio.auto.config', locale) }), 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": t('engine.studio.deselect', locale), 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" }), t('engine.studio.auto.emptyLine1', locale), _jsx("br", {}), t('engine.studio.auto.emptyLine2', locale)] })) })] })] })] }));
+}
+/**
+ * Access pillar — the permission workbench (builder-ui §7, ADR-0084's fourth
+ * content pillar). Left rail: the environment's permission sets / profiles;
+ * main: the Salesforce-style PermissionMatrixEditPage (objects × CRUD/VAMA +
+ * field-level R/W).
+ *
+ * Scope note (ADR-0086 P0/P1/P2): the pillar is scoped to the current package.
+ * The left rail lists only permission sets this package owns — the metadata API
+ * filters `permission` by the record-level `package_id` provenance server-side
+ * (P1), so environment-owned platform defaults (`admin_full_access`,
+ * `member_default`, …) are excluded by the backend. The object MATRIX lists only
+ * the objects this package declares, and Save merges just that slice back,
+ * leaving other packages' contributed rows untouched (P0). Save writes a package
+ * DRAFT and publishes with the whole package via the top-bar Publish (P2, D6).
+ */
+function AccessPillar({ packageId, publishNonce, onDraftSaved, }) {
+    const client = useMetadataClient();
+    const locale = useMetadataLocale();
+    const [perms, setPerms] = React.useState([]);
+    const [loaded, setLoaded] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [current, setCurrent] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    // inline creator (same rail pattern as the Data pillar's object creator)
+    const [creating, setCreating] = React.useState(false);
+    const [newLabel, setNewLabel] = React.useState('');
+    const [newName, setNewName] = React.useState('');
+    const [nameTouched, setNameTouched] = React.useState(false);
+    const [busy, setBusy] = React.useState(false);
+    const load = React.useCallback(async () => {
+        try {
+            // Scope the rail to this package server-side (ADR-0086 P1): the metadata
+            // API filters `permission` by the record-level `package_id` provenance, so
+            // it returns only the sets this package owns — environment-owned platform
+            // defaults (`admin_full_access`, `member_default`, …) are excluded by the
+            // backend, not the client. (The `?package=` list rows don't echo the
+            // provenance columns, so a client-side filter can't do this.)
+            //
+            // ADR-0086 P2 (D6): a package permission set is draft/published metadata,
+            // so the rail shows published ∪ pending-draft sets — a set created (or
+            // renamed) as a draft but not yet published must still appear, just like
+            // the Data/Interfaces pillars merge their drafts. Draft headers are
+            // already package-scoped by `listDrafts({ packageId })`.
+            const [list, drafts] = await Promise.all([
+                client.list('permission', { packageId }),
+                client.listDrafts({ packageId, type: 'permission' }).catch(() => []),
+            ]);
+            const byName = new Map();
+            for (const p of list || []) {
+                const name = String(p.name ?? p.id ?? '');
+                if (!name)
+                    continue;
+                byName.set(name, {
+                    name,
+                    label: String(p.label ?? p.name ?? ''),
+                    isProfile: !!p.isProfile,
+                });
+            }
+            for (const d of drafts || []) {
+                const name = String(d?.name ?? '');
+                if (!name || byName.has(name))
+                    continue;
+                byName.set(name, { name, label: name });
+            }
+            const scoped = [...byName.values()];
+            setPerms(scoped);
+            setCurrent((c) => c ?? scoped[0]?.name ?? null);
+        }
+        catch (e) {
+            setError(formatMetadataError(e));
+        }
+        finally {
+            setLoaded(true);
+        }
+    }, [client, packageId]);
+    React.useEffect(() => {
+        void load();
+        // Re-read after a package publish so drafts that went live collapse into
+        // the published rail (ADR-0086 P2).
+    }, [load, publishNonce]);
+    const doCreate = React.useCallback(async () => {
+        const label = newLabel.trim();
+        const name = toFieldName(newName.trim() || label);
+        if (!label || !name || name === 'field')
+            return;
+        setBusy(true);
+        try {
+            // Package door → create as a DRAFT stamped with this package (D6/D7),
+            // published atomically with the rest of the package.
+            await client.save('permission', name, { name, label, objects: {}, fields: {} }, { mode: 'draft', packageId });
+            toast.success(tFormat('engine.studio.access.created', locale, { label }));
+            setCreating(false);
+            setNewLabel('');
+            setNewName('');
+            setNameTouched(false);
+            onDraftSaved?.();
+            await load();
+            setCurrent(name);
+        }
+        catch (e) {
+            toast.error(formatMetadataError(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [client, newLabel, newName, load, packageId, onDraftSaved, locale]);
+    const filtered = perms.filter((p) => !query.trim() ||
+        p.label.toLowerCase().includes(query.trim().toLowerCase()) ||
+        p.name.toLowerCase().includes(query.trim().toLowerCase()));
+    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: [_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx(Shield, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium text-foreground", children: t('engine.studio.access.title', locale) }), _jsx("span", { className: "rounded bg-muted px-1.5 py-0.5", children: t('engine.studio.access.subtitle', locale) })] }), _jsx("span", { title: t('engine.studio.access.bannerTitle', locale), className: "ml-auto rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.access.banner', locale) })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "flex w-52 shrink-0 flex-col border-r", children: [_jsxs("div", { className: "p-2 pb-0", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: t('engine.studio.access.heading', locale) }), _jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('engine.studio.access.search', locale), className: "mb-1 h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto p-2 pt-1", children: [perms.length === 0 && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? t('engine.studio.loadFailed', locale) : loaded ? t('engine.studio.access.none', locale) : t('engine.studio.loading', locale) })), filtered.map((p) => (_jsxs("button", { onClick: () => setCurrent(p.name), className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
+                                            (current === p.name ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Shield, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 truncate", children: p.label }), p.isProfile && (_jsx("span", { className: "rounded bg-muted px-1 py-px text-[9px] uppercase text-muted-foreground", children: "profile" }))] }, p.name)))] }), _jsx("div", { className: "shrink-0 border-t p-2", children: creating ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("input", { autoFocus: true, value: newLabel, onChange: (e) => {
+                                                setNewLabel(e.target.value);
+                                                if (!nameTouched)
+                                                    setNewName(toFieldNameLoose(e.target.value));
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreate();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.access.labelPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: newName, onChange: (e) => {
+                                                setNameTouched(true);
+                                                setNewName(toFieldNameLoose(e.target.value));
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    void doCreate();
+                                                if (e.key === 'Escape')
+                                                    setCreating(false);
+                                            }, placeholder: t('engine.studio.access.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreate(), disabled: busy || !newLabel.trim() || !toFieldName(newName.trim() || newLabel) || toFieldName(newName.trim() || newLabel) === 'field', className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [busy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.create', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.access.new', locale)] })) })] }), _jsx("main", { className: "min-w-0 flex-1 overflow-auto", children: current ? (_jsx(PermissionMatrixEditPage, { type: "permission", name: current, packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved }, current)) : (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: loaded && perms.length === 0 ? t('engine.studio.access.emptyMain', locale) : t('engine.studio.access.pick', locale) })) })] })] }));
+}
+export default StudioDesignSurface;