@object-ui/app-shell 11.3.0 → 11.5.0

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

@@ -14,21 +14,36 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * surface — it is an injected slot (`aiSlot`) the cloud edition fills.
  */
 import * as React from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { SchemaRenderer, useAdapter, SchemaRendererProvider } from '@object-ui/react';
 import { GridFieldAuthoringProvider } from '@object-ui/components';
 import { ObjectView as PluginObjectView } from '@object-ui/plugin-view';
 import { ListView } from '@object-ui/plugin-list';
-import { Boxes, FileText, Database, LayoutDashboard, BarChart3, Table2, Folder, Compass, Workflow, SlidersHorizontal, MousePointer2, Eye, Loader2, Save, Pencil, Check, Plus, X, } from 'lucide-react';
+import { 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 { DESIGNER_SEL_PARAM, parseNavSelParam, formatNavSelParam, findNavPositionById, navIdAtPosition, } from '../metadata-admin/nav-selection';
+import { formatMetadataError, formatPublishFailures } from './metadataError';
+import { loadPackageSurfaces } from './packageSurfaces';
+import { buildObjectSkeleton, buildFlowSkeleton, buildAppSkeleton, buildPermissionSkeleton } from './skeletons';
+import { t, tFormat, useMetadataLocale } from '../metadata-admin/i18n';
 import { AppNavCanvas } from '../metadata-admin/previews/AppNavCanvas';
-import { readFields, writeFields, newField } from '../metadata-admin/previews/object-fields-io';
+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 { PackageIdInput, PackageIdSuggestionHint } from './PackageIdInput';
+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,
@@ -75,14 +90,283 @@ function extractDraftBody(resp) {
         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(PackageIdSuggestionHint, { show: !idTouched && !!newName.trim() && !newId, locale: locale }), _jsx(PackageIdInput, { value: newId, onChange: (v) => {
+                                                setIdTouched(true);
+                                                setNewId(v);
+                                            }, onEnter: () => void doCreate(), onEscape: () => setCreating(false), placeholder: t('engine.studio.pkg.idPlaceholder', locale), locale: locale, testId: "pkg-switcher-id-input" }), 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';
-    return (_jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-background text-foreground", children: [aiSlot ? _jsx("aside", { className: "w-64 shrink-0 overflow-auto border-r bg-muted/40", children: aiSlot }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex items-center gap-3 border-b px-3 py-2", children: [_jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap text-[13px] font-medium", children: [_jsx(Boxes, { className: "h-4 w-4" }), " ", packageId] }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("nav", { className: "flex gap-1", children: PILLARS.map((p) => (_jsxs(Link, { to: `/studio/${packageId}/${p.key}`, className: 'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ' +
+    const locale = useMetadataLocale();
+    // Courtesy gate (ADR-0057 D10): a read-only code/installed package refuses
+    // authoring server-side (ADR-0070), so don't let the user build up doomed
+    // local edits first — disable the authoring affordances up front. Unknown
+    // writability (fetch failed / still loading) stays ungated; the server gate
+    // remains the authority either way.
+    const [pkgWritable, setPkgWritable] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        setPkgWritable(null);
+        fetchPackages()
+            .then((list) => {
+            if (!cancelled)
+                setPkgWritable(list.find((p) => p.id === packageId)?.writable ?? null);
+        })
+            .catch(() => {
+            /* unknown — leave ungated */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [packageId]);
+    const readOnly = pkgWritable === false;
+    // 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);
+    // Scaffold the new app's navigation from the package's objects (default on) —
+    // otherwise a fresh app has zero menu items and every object must be wired by
+    // hand in the Interfaces pillar (objectui#2262).
+    const [appAddObjects, setAppAddObjects] = React.useState(true);
+    const loadPackageObjects = React.useCallback(async () => {
+        // Published objects + pending DRAFT objects, merged — a fresh package's
+        // objects are usually still drafts (same merge the Data pillar rail does).
+        const [list, draftHeaders] = await Promise.all([
+            shellClient.list('object', { packageId }),
+            shellClient.listDrafts({ packageId, type: 'object' }).catch(() => []),
+        ]);
+        const items = (list || [])
+            .map((o) => ({ 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({ name: d.name, label: d.name });
+        }
+        return items;
+    }, [shellClient, packageId]);
+    const doCreateApp = React.useCallback(async () => {
+        const label = appLabel.trim();
+        const name = toFieldName(appName.trim() || label);
+        if (!label || !name || name === 'field')
+            return;
+        setAppBusy(true);
+        try {
+            const navObjects = appAddObjects ? await loadPackageObjects().catch(() => []) : [];
+            await shellClient.save('app', name, buildAppSkeleton(name, label, navObjects), { 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, appAddObjects, loadPackageObjects, 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" }), p.label] }, p.key))) })] }), _jsx("div", { className: "min-h-0 flex-1", children: tab === 'data' ? (_jsx(DataPillar, { packageId: packageId })) : tab === 'automations' ? (_jsx(AutomationsPillar, { packageId: packageId })) : (_jsx(InterfacesPillar, { packageId: packageId })) })] })] }));
+                                            : '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), disabled: readOnly, title: readOnly ? t('engine.studio.pkg.readonlyHint', locale) : 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 disabled:pointer-events-none disabled:opacity-50", 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("label", { className: "flex cursor-pointer items-center gap-1.5 px-0.5 py-0.5 text-[11px] text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: appAddObjects, onChange: (e) => setAppAddObjects(e.target.checked), className: "h-3 w-3 accent-primary" }), t('engine.studio.app.scaffoldNav', locale)] }), _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", 
+                                        // Publish is review-then-confirm: open the pending-changes panel,
+                                        // whose footer button fires the actual atomic package publish —
+                                        // never straight from this header click (objectui#2261).
+                                        onClick: () => setChangesOpen(true), disabled: publishing || !hasPending || readOnly, title: readOnly
+                                            ? t('engine.studio.pkg.readonlyHint', locale)
+                                            : 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, readOnly: readOnly })) : tab === 'automations' ? (_jsx(AutomationsPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved, readOnly: readOnly })) : tab === 'access' ? (_jsx(AccessPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved, readOnly: readOnly })) : (_jsx(InterfacesPillar, { packageId: packageId, publishNonce: publishNonce, draftNonce: draftNonce, onDraftSaved: onDraftSaved, onCreateApp: readOnly ? undefined : () => setAppCreating(true), readOnly: readOnly })) })] }), _jsx(DraftChangesPanel, { open: changesOpen, onOpenChange: setChangesOpen, packageId: packageId, onPublish: readOnly ? undefined : doPublish, publishing: publishing })] }));
 }
 /** Recursive App-navigation tree (groups + typed leaves). */
 function NavTree({ nodes, active, onPick, }) {
@@ -98,9 +382,60 @@ function NavTree({ nodes, active, onPick, }) {
         }) }));
 }
 /** Interfaces pillar — real App nav · live canvas · inspector. */
-function InterfacesPillar({ packageId }) {
+/**
+ * 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, readOnly = false, }) {
     const client = useMetadataClient();
-    const locale = 'zh-CN';
+    const locale = useMetadataLocale();
     const [appLabel, setAppLabel] = React.useState(packageId);
     const [appName, setAppName] = React.useState(null);
     const [appDraft, setAppDraft] = React.useState({});
@@ -108,6 +443,37 @@ function InterfacesPillar({ packageId }) {
     // nav editing — drag-drop reorder / rename / add / remove via AppNavCanvas
     const [editNav, setEditNav] = React.useState(false);
     const [navSel, setNavSel] = React.useState(null);
+    // #2272 — designer deep-link: `?sel=nav:<id>` selects the nav item with
+    // that spec `id` and switches the pillar into nav editing. The id is the
+    // stable external contract; positional `navigation[i]` selection ids stay
+    // internal. Selection changes mirror back to the URL (replace).
+    const [searchParams, setSearchParams] = useSearchParams();
+    const navSelParam = parseNavSelParam(searchParams.get(DESIGNER_SEL_PARAM));
+    const appliedNavSelRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!navSelParam || navTree.length === 0)
+            return;
+        if (appliedNavSelRef.current === navSelParam)
+            return;
+        const hit = findNavPositionById({ navigation: navTree }, navSelParam);
+        if (!hit)
+            return;
+        appliedNavSelRef.current = navSelParam;
+        setEditNav(true);
+        setNavSel({ kind: 'nav', id: hit.selectionId });
+    }, [navSelParam, navTree]);
+    React.useEffect(() => {
+        const navId = navSel ? navIdAtPosition({ navigation: navTree }, navSel.id) : null;
+        setSearchParams((prev) => {
+            const next = new URLSearchParams(prev);
+            if (navId)
+                next.set(DESIGNER_SEL_PARAM, formatNavSelParam(navId));
+            else
+                next.delete(DESIGNER_SEL_PARAM);
+            return next;
+        }, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [navSel]);
     const [navDirty, setNavDirty] = React.useState(false);
     const [navHasDraft, setNavHasDraft] = React.useState(false);
     const [navSaving, setNavSaving] = React.useState(false);
@@ -118,22 +484,77 @@ function InterfacesPillar({ packageId }) {
     const [saving, setSaving] = React.useState(false);
     const [hasDraft, setHasDraft] = React.useState(false);
     const [error, setError] = React.useState(null);
-    // Resolve the App by package id → load its navigation tree.
+    // 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 apps = (await client.list('app'));
+                const [pub, drafts] = await Promise.all([
+                    client.list('object', { packageId }),
+                    client.listDrafts({ packageId, type: 'object' }).catch(() => []),
+                ]);
                 if (cancelled)
                     return;
-                const app = (apps || []).find((a) => a._packageId === packageId || a.packageId === packageId || a.name === packageId) ?? (apps || [])[0];
-                if (!app)
+                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;
-                setAppLabel(String(app.label ?? app.name ?? packageId));
-                setAppName(String(app.name));
+                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', String(app.name)),
-                    client.getDraft('app', String(app.name)).catch(() => null),
+                    client.layered('app', name),
+                    client.getDraft('app', name).catch(() => null),
                 ]);
                 if (cancelled)
                     return;
@@ -141,8 +562,12 @@ function InterfacesPillar({ packageId }) {
                 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) {
@@ -163,14 +588,16 @@ function InterfacesPillar({ packageId }) {
                 setCurrent((cur) => cur ?? firstLeaf);
             }
             catch (e) {
-                if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                if (!cancelled) {
+                    setError(formatMetadataError(e));
+                    setAppStatus('missing');
+                }
             }
         })();
         return () => {
             cancelled = true;
         };
-    }, [client, packageId]);
+    }, [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
@@ -204,7 +631,7 @@ function InterfacesPillar({ packageId }) {
             }
             catch (e) {
                 if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                    setError(formatMetadataError(e));
             }
             finally {
                 if (!cancelled)
@@ -214,38 +641,24 @@ function InterfacesPillar({ packageId }) {
         return () => {
             cancelled = true;
         };
-    }, [client, current, isEditable]);
+    }, [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' });
+            await client.save(current.type, current.name, draft, { mode: 'draft', packageId });
             setHasDraft(true);
+            onDraftSaved?.();
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [client, current, draft]);
-    const doPublish = React.useCallback(async () => {
-        if (!current)
-            return;
-        setSaving('publish');
-        try {
-            await client.publish(current.type, current.name);
-            setHasDraft(false);
-        }
-        catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setSaving(false);
         }
-    }, [client, current]);
+    }, [client, current, draft, onDraftSaved]);
     // nav editing — patch appDraft.navigation, then save/publish the App overlay
     const onNavPatch = React.useCallback((patch) => {
         setAppDraft((d) => ({ ...d, ...patch }));
@@ -256,37 +669,39 @@ function InterfacesPillar({ packageId }) {
             return;
         setNavSaving('draft');
         try {
-            await client.save('app', appName, appDraft, { mode: 'draft' });
+            // "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(e instanceof Error ? e.message : String(e));
-        }
-        finally {
-            setNavSaving(false);
-        }
-    }, [client, appName, appDraft]);
-    const doNavPublish = React.useCallback(async () => {
-        if (!appName)
-            return;
-        setNavSaving('publish');
-        try {
-            await client.publish('app', appName);
-            setNavHasDraft(false);
-        }
-        catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setNavSaving(false);
         }
-    }, [client, appName]);
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [current ? (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: current.label }), _jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5", children: [current.type, " \u00B7 ", current.name] })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u83DC\u5355\u9879" })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !isEditable || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: (editNav ? 'w-72' : 'w-52') + ' flex shrink-0 flex-col border-r', children: [_jsxs("div", { className: "shrink-0 border-b px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsxs("p", { className: "truncate text-[11px] font-medium text-muted-foreground", children: [appLabel, " \u00B7 \u5BFC\u822A"] }), _jsx("button", { type: "button", onClick: () => {
+    }, [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 || readOnly, title: readOnly ? t('engine.studio.pkg.readonlyHint', locale) : undefined, 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' && !readOnly && (_jsx("button", { type: "button", onClick: () => {
                                                     setEditNav((v) => !v);
                                                     setNavSel(null);
-                                                }, title: editNav ? '完成编辑' : '编辑导航(拖拽排序 / 重命名 / 增删)', className: 'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[10px] ' +
-                                                    (editNav ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted'), children: editNav ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3 w-3" }), " \u5B8C\u6210"] })) : (_jsxs(_Fragment, { children: [_jsx(Pencil, { className: "h-3 w-3" }), " \u7F16\u8F91"] })) })] }), editNav && (_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [navHasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-1.5 py-0.5 text-[10px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03" })), _jsxs("button", { onClick: doNavSave, disabled: !navDirty || !!navSaving, className: "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-50", children: [navSaving === 'draft' ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Save, { className: "h-3 w-3" })), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doNavPublish, disabled: !navHasDraft || !!navSaving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [navSaving === 'publish' ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : null, "\u53D1\u5E03"] })] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: navTree.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })) : editNav ? (_jsx(AppNavCanvas, { draft: appDraft, rootKey: "navigation", onPatch: onNavPatch, selection: navSel, onSelectionChange: (s) => setNavSel(s ? { kind: s.kind, id: s.id } : null) })) : (_jsx(NavTree, { nodes: navTree, active: current, onPick: setCurrent })) })] }), _jsxs("main", { className: "min-w-0 flex-1 overflow-auto bg-muted/30 p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Eye, { className: "h-3 w-3" }), " \u9884\u89C8\u5373\u8FD0\u884C \u00B7 \u540C\u4E00\u6E32\u67D3\u5668"] }), current && (_jsxs("span", { className: "text-[11px] text-muted-foreground", children: [current.type, " \u00B7 ", current.name] }))] }), error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error })), _jsx("div", { className: "rounded-lg border bg-background p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u83DC\u5355\u9879" })) : loading ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " \u52A0\u8F7D\u4E2D\u2026"] })) : current.type === 'object' ? (_jsx(SchemaRenderer, { schema: { type: 'object-view', objectName: current.name } })) : Preview ? (_jsx(Preview, { type: current.type, name: current.name, draft: draft, editing: true, selection: selection, onSelectionChange: setSelection, onPatch: onPatch, locale: locale })) : (_jsxs("div", { className: "py-12 text-center text-xs text-muted-foreground", children: [current.type, " \u6682\u7528\u53EA\u8BFB\u9884\u89C8,\u8BBE\u8BA1\u80FD\u529B\u5EFA\u8BBE\u4E2D\u3002"] })) }), isEditable ? (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u70B9\u9009\u79EF\u6728 \u2192 \u53F3\u4FA7\u76F4\u63A5\u6539 \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] })) : current?.type === 'object' ? (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(Database, { className: "h-3 w-3" }), " \u8FD0\u884C\u6001\u5217\u8868\u9884\u89C8 \u00B7 \u6539\u5B57\u6BB5 / \u7ED3\u6784\u8BF7\u5230 ", _jsx("span", { className: "font-medium", children: "Data" }), " \u652F\u67F1"] })) : null] }), _jsxs("aside", { className: "w-72 shrink-0 overflow-auto border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u5C5E\u6027" }), selection && (_jsx("button", { type: "button", onClick: () => setSelection(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u53D6\u6D88\u9009\u62E9", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx("div", { className: "p-3", children: selection && Inspector && current ? (_jsx(Inspector, { type: current.type, name: current.name, draft: draft, selection: selection, onPatch: onPatch, onClearSelection: () => setSelection(null), onSelectionChange: setSelection, readOnly: false, locale: locale })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 px-2 py-10 text-center text-xs text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-5 w-5" }), "\u5728\u753B\u5E03\u91CC\u70B9\u9009\u4E00\u4E2A\u79EF\u6728,", _jsx("br", {}), "\u5B83\u7684\u5C5E\u6027\u4F1A\u5728\u8FD9\u91CC\u76F4\u63A5\u7F16\u8F91\u3002"] })) })] })] })] }));
+                                                }, 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) {
@@ -336,11 +751,12 @@ function renderStudioGridList(props) {
             addDeleteRecordsInline: true,
         }, dataSource: ds, onEdit: onEdit, className: className, refreshKey: refreshKey }));
 }
-function DataPillar({ packageId }) {
+function DataPillar({ packageId, publishNonce = 0, onDraftSaved, readOnly = false, }) {
     const client = useMetadataClient();
     const adapter = useAdapter();
-    const locale = 'zh-CN';
+    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);
@@ -350,32 +766,88 @@ function DataPillar({ packageId }) {
     const [dirty, setDirty] = React.useState(false);
     const [hasDraft, setHasDraft] = React.useState(false);
     const [saving, setSaving] = React.useState(false);
+    // Timestamp of the last successful draft save — renders a "last saved HH:MM"
+    // hint next to the Save button (framework#2615 P3: nothing confirmed a draft
+    // save persisted, unlike the sibling pillars which toast).
+    const [savedAt, setSavedAt] = React.useState(null);
     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 {
-                const list = (await client.list('object', { packageId }));
+                // 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 && !readOnly)
+                    setCreating(true);
             }
             catch (e) {
                 if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                    setError(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setObjectsLoaded(true);
             }
         })();
         return () => {
             cancelled = true;
         };
-    }, [client, packageId]);
+    }, [client, packageId, readOnly]);
     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);
@@ -394,10 +866,11 @@ function DataPillar({ packageId }) {
                 const draftBody = extractDraftBody(draftResp);
                 setObjDraft(draftBody ? { ...baseline, ...draftBody } : baseline);
                 setHasDraft(!!draftBody);
+                setHasBaseline(!!(lay.effective ?? lay.code));
             }
             catch (e) {
                 if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                    setError(formatMetadataError(e));
             }
             finally {
                 if (!cancelled)
@@ -407,61 +880,87 @@ function DataPillar({ packageId }) {
         return () => {
             cancelled = true;
         };
-    }, [client, current]);
+    }, [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.
+    // Guarded in addition to being hidden — it's also reachable through
+    // GridFieldAuthoringProvider/ObjectFormDesigner.
     const addField = React.useCallback(() => {
+        if (readOnly)
+            return;
         const view = readFields(objDraft.fields);
         const name = nextFieldName(view.entries.map((e) => e.name));
-        view.entries.push(newField(name, 'text', '新字段'));
+        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]);
-    const doSave = React.useCallback(async () => {
-        if (!current)
+    }, [objDraft, readOnly]);
+    // "+ 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 () => {
+        if (readOnly)
             return;
-        setSaving('draft');
+        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 {
-            await client.save('object', current.name, objDraft, { mode: 'draft' });
-            setHasDraft(true);
-            setDirty(false);
+            const body = buildObjectSkeleton(name, 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(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
-            setSaving(false);
+            setCreateBusy(false);
         }
-    }, [client, current, objDraft]);
-    const doPublish = React.useCallback(async () => {
+    }, [newLabel, newName, objects, client, packageId, onDraftSaved, readOnly]);
+    const doSave = React.useCallback(async () => {
         if (!current)
             return;
-        setSaving('publish');
+        setSaving('draft');
         setError(null);
         try {
-            await client.publish('object', current.name);
-            // Bust the data-layer object-schema cache (separate from the metadata client)
-            // so the remounted grid re-fetches the new/edited columns without a reload.
-            adapter?.clearCache?.();
-            setHasDraft(false);
+            await client.save('object', current.name, objDraft, { mode: 'draft', packageId });
+            setHasDraft(true);
             setDirty(false);
-            setGridVer((v) => v + 1);
+            setSavedAt(new Date());
+            toast.success(tFormat('engine.studio.data.savedDraft', locale, { label: current.label }));
+            onDraftSaved?.();
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setSaving(false);
         }
-    }, [adapter, client, current]);
+    }, [client, current, objDraft, onDraftSaved, packageId, locale]);
     // Drag-reorder columns → reorder the object's `fields` metadata (field display
-    // order follows metadata order), then publish so the new order persists.
+    // 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;
@@ -476,49 +975,124 @@ function DataPillar({ packageId }) {
         const entries = view.entries.map((e) => (visible.has(e.name) ? visibleInOrder[vi++] : e));
         const body = { ...objDraft, fields: writeFields({ ...view, entries }) };
         setObjDraft(body);
-        setSaving('publish');
+        setSaving('draft');
         setError(null);
         try {
-            await client.save('object', current.name, body, { mode: 'draft' });
-            await client.publish('object', current.name);
-            adapter?.clearCache?.();
-            setHasDraft(false);
+            await client.save('object', current.name, body, { mode: 'draft', packageId });
+            setHasDraft(true);
             setDirty(false);
-            setGridVer((v) => v + 1); // remount so the grid reflects the persisted order
+            onDraftSaved?.();
+            setGridVer((v) => v + 1); // remount so the grid reflects the new (draft) order
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setSaving(false);
         }
-    }, [client, current, objDraft, adapter]);
+    }, [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] }), _jsxs("span", { children: [fieldCount, " \u5B57\u6BB5"] })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u5BF9\u8C61" })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !dirty || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "w-52 shrink-0 overflow-auto border-r p-2", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: "\u5BF9\u8C61" }), objects.length === 0 && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })), objects.map((o) => (_jsxs("button", { onClick: () => setCurrent(o), className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
-                                    (current?.name === o.name ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Database, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: o.label })] }, o.name)))] }), _jsx("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u5BF9\u8C61" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex shrink-0 items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Eye, { className: "h-3 w-3" }), " \u8FD0\u884C\u6001\u5217\u8868 \u00B7 \u540C\u4E00\u6E32\u67D3\u5668"] }), _jsxs("button", { type: "button", onClick: addField, title: "\u6DFB\u52A0\u4E00\u4E2A\u5B57\u6BB5(\u968F\u540E\u5728\u53F3\u4FA7\u8BBE\u7F6E\u7C7B\u578B\u4E0E\u5C5E\u6027)", className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " \u6DFB\u52A0\u5B57\u6BB5"] })] }), error && (_jsx("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive", children: error })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-lg border bg-background", children: _jsx(GridFieldAuthoringProvider, { value: {
-                                            onAddColumn: addField,
-                                            addColumnLabel: '添加字段',
-                                            onEditColumn: (fieldName) => {
-                                                // ignore non-field columns (e.g. the row-actions column)
-                                                if (readFields(objDraft.fields).entries.some((e) => e.name === fieldName)) {
-                                                    setFieldSel({ kind: 'field', id: fieldName });
-                                                }
-                                            },
-                                            editColumnLabel: '编辑字段属性',
-                                            onReorderFields: doReorderFields,
-                                        }, children: _jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(PluginObjectView, { schema: {
-                                                    type: 'object-view',
-                                                    objectName: current.name,
-                                                    // No saved view exists in design mode, so show the object's
-                                                    // own fields as columns (in metadata order), dropping
-                                                    // framework-managed/audit fields so the grid opens on the
-                                                    // meaningful columns first — the way Airtable does.
-                                                    table: {
-                                                        fields: readFields(objDraft.fields)
-                                                            .entries.map((e) => e.name)
-                                                            .filter((n) => !STUDIO_SYSTEM_FIELD_NAMES.has(n)),
+    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) })), savedAt && !dirty && (_jsx("span", { className: "ml-auto text-[11px] text-muted-foreground", "data-testid": "data-saved-at", children: tFormat('engine.studio.data.lastSaved', locale, {
+                            time: savedAt.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }),
+                        }) })), _jsxs("button", { onClick: doSave, disabled: !current || !dirty || !!saving || readOnly, title: readOnly ? t('engine.studio.pkg.readonlyHint', locale) : undefined, className: (savedAt && !dirty ? '' : '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: readOnly ? (_jsxs("p", { title: t('engine.studio.pkg.readonlyHint', locale), className: "flex items-center gap-1.5 px-2 py-1.5 text-[11px] text-muted-foreground", children: [_jsx(Lock, { className: "h-3 w-3" }), " ", t('engine.studio.pkg.readonly', locale)] })) : 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') && !readOnly && (_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, disabled: readOnly })) : viewMode === 'settings' ? (_jsx(ObjectSettingsPanel, { name: current.name, draft: objDraft, onPatch: onPatch, locale: locale, disabled: readOnly })) : 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: {
+                                                    // Read-only package: keep the per-column inspector (view props)
+                                                    // but drop add-column and drag-reorder — both are doomed writes.
+                                                    ...(readOnly
+                                                        ? {}
+                                                        : {
+                                                            onAddColumn: addField,
+                                                            addColumnLabel: t('engine.studio.data.addField', locale),
+                                                            onReorderFields: doReorderFields,
+                                                        }),
+                                                    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 });
+                                                        }
                                                     },
-                                                }, dataSource: adapter, renderListView: renderStudioGridList }, `${current.name}:${gridVer}`) }) }) }), _jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u5217\u5934\u300C+\u300D\u52A0\u5B57\u6BB5 \u00B7 \u7B14\u5F62\u6539\u5C5E\u6027 \u00B7 \u62D6\u5217\u5934\u91CD\u6392 \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] })] })) }), current && fieldSel && inspector && (_jsxs("aside", { className: "flex w-80 shrink-0 flex-col border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u5B57\u6BB5\u5C5E\u6027" }), _jsx("button", { type: "button", onClick: () => setFieldSel(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u5173\u95ED", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: React.createElement(inspector, {
+                                                    editColumnLabel: t('engine.studio.data.editFieldProps', locale),
+                                                }, 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)
+                                                                    // Also drop a field named `actions`: the grid always pins
+                                                                    // its own row-actions column headed "Actions", so a data
+                                                                    // column of the same name reads as a duplicated column.
+                                                                    // The field stays editable in the form designer.
+                                                                    .filter((n) => !STUDIO_SYSTEM_FIELD_NAMES.has(n) && n !== 'actions'),
+                                                            },
+                                                        }, 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, readOnly: readOnly })) : !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,
@@ -526,14 +1100,30 @@ function DataPillar({ packageId }) {
                                     onPatch,
                                     onClearSelection: () => setFieldSel(null),
                                     onSelectionChange: setFieldSel,
-                                    readOnly: false,
+                                    readOnly,
                                     locale,
                                 }) })] }))] })] }));
 }
-/** Automations pillar — flows: list → FlowPreview (default OFF / review-then-enable). */
-function AutomationsPillar({ packageId }) {
+/**
+ * A flow's live status in the Automations rail: a colored dot + On/Off, from the
+ * engine's runtime state (persisted `status` is intent; this is what's actually
+ * live). Renders nothing for a flow the engine doesn't know yet (never published)
+ * — the amber "unpublished draft" chip already covers that case.
+ */
+export function FlowStatusDot({ state, locale }) {
+    if (!state)
+        return null;
+    const { enabled, bound } = state;
+    const title = enabled
+        ? bound
+            ? t('engine.studio.auto.onBound', locale)
+            : t('engine.studio.auto.onUnbound', locale)
+        : t('engine.studio.auto.offTitle', locale);
+    return (_jsxs("span", { title: title, className: "inline-flex shrink-0 items-center gap-1", children: [_jsx("span", { className: 'h-1.5 w-1.5 rounded-full ' + (enabled ? 'bg-emerald-500' : 'bg-muted-foreground/40') }), _jsx("span", { className: 'text-[10px] ' + (enabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'), children: enabled ? t('engine.studio.auto.on', locale) : t('engine.studio.auto.off', locale) })] }));
+}
+function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, readOnly = false, }) {
     const client = useMetadataClient();
-    const locale = 'zh-CN';
+    const locale = useMetadataLocale();
     const [flows, setFlows] = React.useState([]);
     const [current, setCurrent] = React.useState(null);
     const [draft, setDraft] = React.useState({});
@@ -542,31 +1132,107 @@ function AutomationsPillar({ packageId }) {
     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;
+    // Runtime enable/bound state per flow (GET /automation/_status). Persisted
+    // `status` is intent; this is what's actually live in the engine — the truth
+    // behind the rail's status dots. Refetched after a publish (publishNonce);
+    // degrades silently on an older backend / offline (dots just don't render).
+    const [flowStatus, setFlowStatus] = React.useState({});
     React.useEffect(() => {
         let cancelled = false;
         (async () => {
             try {
-                const list = (await client.list('flow', { packageId }));
+                const res = await fetch('/api/v1/automation/_status', { credentials: 'include', headers: { Accept: 'application/json' } });
+                if (!res.ok)
+                    return;
+                const payload = (await res.json().catch(() => null));
+                const list = payload?.data?.flows ?? payload?.flows ?? [];
+                if (cancelled || !Array.isArray(list))
+                    return;
+                const map = {};
+                for (const s of list)
+                    if (s?.name)
+                        map[s.name] = { enabled: s.enabled !== false, bound: !!s.bound };
+                setFlowStatus(map);
+            }
+            catch {
+                /* offline / older backend → no dots */
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [publishNonce]);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                // Published flows ∪ pending DRAFT flows — `list()` only sees
+                // published/active metadata, so a just-authored flow that hasn't been
+                // published yet (or a fresh writable-base package whose flows are all
+                // drafts) would render an empty rail even though "Changes · N" shows the
+                // draft exists. Mirrors the Data / Interfaces / Access pillars, which all
+                // merge their drafts. Keyed on `publishNonce` too so drafts that go live
+                // collapse back into the published rail after a package publish.
+                const items = await loadPackageSurfaces(client, 'flow', packageId);
                 if (cancelled)
                     return;
-                const items = (list || [])
-                    .map((f) => ({ type: 'flow', name: String(f.name ?? ''), label: String(f.label ?? f.name ?? '') }))
-                    .filter((f) => f.name);
                 setFlows(items);
                 setCurrent((c) => c ?? items[0] ?? null);
             }
             catch (e) {
                 if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                    setError(formatMetadataError(e));
+            }
+            finally {
+                if (!cancelled)
+                    setListed(true);
             }
         })();
         return () => {
             cancelled = true;
         };
-    }, [client, packageId]);
+    }, [client, packageId, publishNonce]);
+    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 = buildFlowSkeleton(name, label, t('engine.studio.auto.nodeStart', locale), t('engine.studio.auto.nodeEnd', locale));
+            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;
@@ -590,7 +1256,7 @@ function AutomationsPillar({ packageId }) {
             }
             catch (e) {
                 if (!cancelled)
-                    setError(e instanceof Error ? e.message : String(e));
+                    setError(formatMetadataError(e));
             }
             finally {
                 if (!cancelled)
@@ -600,7 +1266,7 @@ function AutomationsPillar({ packageId }) {
         return () => {
             cancelled = true;
         };
-    }, [client, current]);
+    }, [client, current, publishNonce]);
     const onPatch = React.useCallback((patch) => setDraft((d) => ({ ...d, ...patch })), []);
     const doSave = React.useCallback(async () => {
         if (!current)
@@ -608,34 +1274,56 @@ function AutomationsPillar({ packageId }) {
         setSaving('draft');
         setError(null);
         try {
-            await client.save('flow', current.name, draft, { mode: 'draft' });
+            await client.save('flow', current.name, draft, { mode: 'draft', packageId });
             setHasDraft(true);
+            onDraftSaved?.();
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setSaving(false);
         }
-    }, [client, current, draft]);
-    const doPublish = React.useCallback(async () => {
+    }, [client, current, draft, onDraftSaved]);
+    // Enable/disable persists via the flow's deployment `status` (active = on,
+    // obsolete = off) — the engine honors it on the next publish. The switch flips
+    // it and saves the draft immediately; the change goes live when the package is
+    // published (so "review before enabling" is preserved).
+    const flowEnabled = draft.status !== 'obsolete' && draft.status !== 'invalid';
+    const toggleEnabled = React.useCallback(async () => {
         if (!current)
             return;
-        setSaving('publish');
+        const next = !(draft.status !== 'obsolete' && draft.status !== 'invalid');
+        const nextDraft = { ...draft, status: next ? 'active' : 'obsolete' };
+        setDraft(nextDraft);
+        setSaving('draft');
         setError(null);
         try {
-            await client.publish('flow', current.name);
-            setHasDraft(false);
+            await client.save('flow', current.name, nextDraft, { mode: 'draft', packageId });
+            setHasDraft(true);
+            onDraftSaved?.();
+            toast.success(next ? t('engine.studio.auto.enabledToast', locale) : t('engine.studio.auto.disabledToast', locale));
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
+            setError(formatMetadataError(e));
         }
         finally {
             setSaving(false);
         }
-    }, [client, current]);
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u9ED8\u8BA4 OFF \u00B7 \u5BA1\u9605\u540E\u518D\u542F\u7528" }), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: "\u672A\u53D1\u5E03\u8349\u7A3F" })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), "\u4FDD\u5B58\u8349\u7A3F"] }), _jsxs("button", { onClick: doPublish, disabled: !current || !isEditable || !hasDraft || !!saving, className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [saving === 'publish' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null, "\u53D1\u5E03"] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "w-52 shrink-0 overflow-auto border-r p-2", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: "\u81EA\u52A8\u5316 \u00B7 flow" }), flows.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? '加载失败' : '加载中…' })) : (flows.map((f) => (_jsxs("button", { onClick: () => setCurrent(f), className: 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs ' +
-                                    (current?.name === f.name ? 'bg-muted font-medium' : 'text-foreground/90 hover:bg-muted/60'), children: [_jsx(Workflow, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: f.label })] }, f.name))))] }), _jsxs("main", { className: "min-w-0 flex-1 overflow-auto bg-muted/30 p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [_jsx(Workflow, { className: "h-3 w-3" }), " \u53EF\u89C6\u5316\u7F16\u6392 \u00B7 \u70B9\u9009\u8282\u70B9\u914D\u7F6E"] }), current && _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["flow \u00B7 ", current.name] })] }), error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error })), _jsx("div", { className: "rounded-lg border bg-background p-4", children: !current ? (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "\u9009\u62E9\u4E00\u4E2A\u81EA\u52A8\u5316" })) : loading ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " \u52A0\u8F7D\u4E2D\u2026"] })) : Preview ? (React.createElement(Preview, {
+    }, [client, current, draft, packageId, onDraftSaved, locale]);
+    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) })), current && (_jsxs("button", { type: "button", role: "switch", "aria-checked": flowEnabled, onClick: toggleEnabled, disabled: !isEditable || !!saving, title: flowEnabled ? t('engine.studio.auto.disableTitle', locale) : t('engine.studio.auto.enableTitle', locale), className: "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] hover:bg-muted disabled:opacity-50", children: [_jsx("span", { className: 'relative inline-flex h-3.5 w-6 shrink-0 items-center rounded-full transition-colors ' + (flowEnabled ? 'bg-emerald-500' : 'bg-muted-foreground/40'), children: _jsx("span", { className: 'inline-block h-2.5 w-2.5 rounded-full bg-white transition-transform ' + (flowEnabled ? 'translate-x-3' : 'translate-x-0.5') }) }), flowEnabled ? t('engine.studio.auto.enabled', locale) : t('engine.studio.auto.disabled', locale)] })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving || readOnly, title: readOnly ? t('engine.studio.pkg.readonlyHint', locale) : undefined, 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) }), !readOnly && (_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 }), _jsx(FlowStatusDot, { state: flowStatus[f.name], locale: locale })] }, 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,
@@ -644,7 +1332,7 @@ function AutomationsPillar({ packageId }) {
                                     onSelectionChange: setSelection,
                                     onPatch,
                                     locale,
-                                })) : (_jsx("pre", { className: "overflow-auto text-[11px] text-muted-foreground", children: JSON.stringify(draft, null, 2) })) }), isEditable && (_jsxs("p", { className: "mt-2 flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-3 w-3" }), " \u70B9\u9009\u8282\u70B9 \u2192 \u53F3\u4FA7\u914D\u7F6E \u00B7 \u6539\u5B8C\u300C\u4FDD\u5B58\u8349\u7A3F\u300D\u2192\u300C\u53D1\u5E03\u300D"] }))] }), _jsxs("aside", { className: "w-72 shrink-0 overflow-auto border-l", children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-background/95 px-3 py-2 backdrop-blur", children: [_jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u914D\u7F6E" }), selection && (_jsx("button", { type: "button", onClick: () => setSelection(null), className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "\u53D6\u6D88\u9009\u62E9", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx("div", { className: "p-3", children: selection && inspector && current ? (React.createElement(inspector, {
+                                })) : (_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,
@@ -654,6 +1342,135 @@ function AutomationsPillar({ packageId }) {
                                     onSelectionChange: setSelection,
                                     readOnly: false,
                                     locale,
-                                })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 px-2 py-10 text-center text-xs text-muted-foreground", children: [_jsx(MousePointer2, { className: "h-5 w-5" }), "\u5728\u753B\u5E03\u91CC\u70B9\u9009\u4E00\u4E2A\u8282\u70B9,", _jsx("br", {}), "\u5B83\u7684\u914D\u7F6E\u4F1A\u5728\u8FD9\u91CC\u663E\u793A\u3002"] })) })] })] })] }));
+                                })) : (_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, readOnly = false, }) {
+    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, buildPermissionSkeleton(name, label), { 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) })] })] })) : readOnly ? (_jsxs("p", { title: t('engine.studio.pkg.readonlyHint', locale), className: "flex items-center gap-1.5 px-2 py-1.5 text-[11px] text-muted-foreground", children: [_jsx(Lock, { className: "h-3 w-3" }), " ", t('engine.studio.pkg.readonly', 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;