@object-ui/app-shell 11.4.0 → 11.5.0

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

@@ -14,7 +14,7 @@ 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, useNavigate, 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';
@@ -25,7 +25,10 @@ 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, toFieldName, toFieldNameLoose, } from '../metadata-admin/previews/object-fields-io';
@@ -33,6 +36,7 @@ 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 = [
@@ -153,21 +157,38 @@ function PackageSwitcher({ packageId, tab }) {
                                                     void doCreate();
                                                 if (e.key === 'Escape')
                                                     setCreating(false);
-                                            }, placeholder: t('engine.studio.pkg.namePlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: newId, onChange: (e) => {
+                                            }, 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(e.target.value.toLowerCase().replace(/[^a-z0-9_.-]/g, ''));
-                                            }, onKeyDown: (e) => {
-                                                if (e.key === 'Enter')
-                                                    void doCreate();
-                                                if (e.key === 'Escape')
-                                                    setCreating(false);
-                                            }, placeholder: t('engine.studio.pkg.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), err && _jsx("p", { className: "text-[10px] text-destructive", children: err }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreate(), disabled: busy || !newName.trim() || !PACKAGE_ID_RE.test(newId.trim()), className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [busy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.pkg.createWritable', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.pkg.new', locale)] })) })] })] }))] }));
+                                                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';
     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
@@ -252,6 +273,27 @@ export function StudioDesignSurface({ aiSlot }) {
     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);
@@ -259,7 +301,8 @@ export function StudioDesignSurface({ aiSlot }) {
             return;
         setAppBusy(true);
         try {
-            await shellClient.save('app', name, { name, label, active: true, navigation: [] }, { mode: 'draft', packageId });
+            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);
@@ -274,7 +317,7 @@ export function StudioDesignSurface({ aiSlot }) {
         finally {
             setAppBusy(false);
         }
-    }, [appLabel, appName, shellClient, packageId]);
+    }, [appLabel, appName, appAddObjects, loadPackageObjects, shellClient, packageId]);
     React.useEffect(() => {
         let cancelled = false;
         (async () => {
@@ -298,7 +341,7 @@ export function StudioDesignSurface({ aiSlot }) {
     return (_jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-background text-foreground", children: [aiSlot ? _jsx("aside", { className: "w-64 shrink-0 overflow-auto border-r bg-muted/40", children: aiSlot }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex items-center gap-3 border-b px-3 py-2", children: [_jsx("button", { type: "button", onClick: () => shellNavigate('/home'), title: t('engine.studio.home', locale), className: "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground", children: _jsx(HomeIcon, { className: "h-4 w-4" }) }), _jsx(PackageSwitcher, { packageId: packageId, tab: tab }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("nav", { className: "flex gap-1", children: PILLARS.map((p) => (_jsxs(Link, { to: `/studio/${packageId}/${p.key}`, className: 'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ' +
                                         (tab === p.key
                                             ? 'bg-primary/10 font-medium text-primary'
-                                            : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: [_jsx(p.Icon, { className: "h-3.5 w-3.5" }), t(`engine.studio.pillar.${p.key}`, locale)] }, p.key))) }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [packageApp ? (_jsxs("button", { type: "button", onClick: () => window.open(`/apps/${encodeURIComponent(packageApp.name)}`, '_blank'), title: tFormat('engine.studio.app.openTitle', locale, { label: packageApp.label }), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t('engine.studio.app.open', locale)] })) : appDraftPending ? (_jsx("span", { title: t('engine.studio.app.willOpenAfterPublish', locale), className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: tFormat('engine.studio.app.pending', locale, { label: appDraftPending }) })) : (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setAppCreating((v) => !v), title: t('engine.studio.app.noneTitle', locale), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), t('engine.studio.app.create', locale)] }), appCreating && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setAppCreating(false) }), _jsxs("div", { className: "absolute right-0 top-full z-50 mt-1 flex w-72 flex-col gap-1.5 rounded-lg border bg-background p-2 shadow-lg", children: [_jsx("input", { autoFocus: true, value: appLabel, onChange: (e) => {
+                                            : '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));
@@ -315,7 +358,15 @@ export function StudioDesignSurface({ aiSlot }) {
                                                                         void doCreateApp();
                                                                     if (e.key === 'Escape')
                                                                         setAppCreating(false);
-                                                                }, placeholder: t('engine.studio.app.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("button", { type: "button", onClick: () => void doCreateApp(), disabled: appBusy || !appLabel.trim() || !toFieldName(appName.trim() || appLabel) || toFieldName(appName.trim() || appLabel) === 'field', className: "inline-flex items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [appBusy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.createDraft', locale)] })] })] }))] })), _jsxs("button", { type: "button", onClick: () => setChangesOpen(true), className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(GitBranch, { className: "h-3.5 w-3.5" }), t('engine.studio.changes', locale), hasPending ? ` · ${pendingCount}` : ''] }), _jsxs("button", { type: "button", onClick: doPublish, disabled: publishing || !hasPending, title: hasPending ? t('engine.studio.publishTitle', locale) : t('engine.studio.publishNoneTitle', locale), className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50", children: [publishing ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Rocket, { className: "h-3.5 w-3.5" }), t('engine.studio.publish', locale)] })] })] }), _jsx("div", { className: "min-h-0 flex-1", children: tab === 'data' ? (_jsx(DataPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : tab === 'automations' ? (_jsx(AutomationsPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : tab === 'access' ? (_jsx(AccessPillar, { packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved })) : (_jsx(InterfacesPillar, { packageId: packageId, publishNonce: publishNonce, draftNonce: draftNonce, onDraftSaved: onDraftSaved, onCreateApp: () => setAppCreating(true) })) })] }), _jsx(DraftChangesPanel, { open: changesOpen, onOpenChange: setChangesOpen, packageId: packageId })] }));
+                                                                }, 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, }) {
@@ -382,7 +433,7 @@ function StudioNavItemInspector({ navId, appDraft, objects, onNavPatch, onClear,
                             });
                         }, 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, }) {
+function InterfacesPillar({ packageId, publishNonce = 0, draftNonce = 0, onDraftSaved, onCreateApp, readOnly = false, }) {
     const client = useMetadataClient();
     const locale = useMetadataLocale();
     const [appLabel, setAppLabel] = React.useState(packageId);
@@ -392,6 +443,37 @@ function InterfacesPillar({ packageId, publishNonce = 0, draftNonce = 0, onDraft
     // 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);
@@ -611,7 +693,7 @@ function InterfacesPillar({ packageId, publishNonce = 0, draftNonce = 0, onDraft
             setNavSaving(false);
         }
     }, [client, appName, appDraft, onDraftSaved]);
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [current ? (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: current.label }), _jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5", children: [current.type, " \u00B7 ", current.name] })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: t('engine.studio.if.pickLeft', locale) })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), t('engine.studio.saveDraft', locale)] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: (editNav ? 'w-72' : 'w-52') + ' flex shrink-0 flex-col border-r', children: [_jsxs("div", { className: "shrink-0 border-b px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsx("p", { className: "truncate text-[11px] font-medium text-muted-foreground", children: tFormat('engine.studio.if.navHeading', locale, { app: appLabel }) }), appStatus === 'ready' && (_jsx("button", { type: "button", onClick: () => {
+    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 ? 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] ' +
@@ -669,7 +751,7 @@ function renderStudioGridList(props) {
             addDeleteRecordsInline: true,
         }, dataSource: ds, onEdit: onEdit, className: className, refreshKey: refreshKey }));
 }
-function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
+function DataPillar({ packageId, publishNonce = 0, onDraftSaved, readOnly = false, }) {
     const client = useMetadataClient();
     const adapter = useAdapter();
     const locale = useMetadataLocale();
@@ -684,6 +766,10 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
     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);
@@ -734,7 +820,7 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
                 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)
+                if (items.length === 0 && !readOnly)
                     setCreating(true);
             }
             catch (e) {
@@ -749,7 +835,7 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         return () => {
             cancelled = true;
         };
-    }, [client, packageId]);
+    }, [client, packageId, readOnly]);
     React.useEffect(() => {
         if (!current)
             return;
@@ -801,20 +887,26 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         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', t('engine.studio.data.newFieldLabel', locale)));
         setObjDraft((d) => ({ ...d, fields: writeFields(view) }));
         setDirty(true);
         setFieldSel({ kind: 'field', id: name });
-    }, [objDraft]);
+    }, [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;
         const label = newLabel.trim();
         const name = toFieldName(newName.trim() || label);
         if (!label || !name || name === 'field')
@@ -826,11 +918,7 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         setCreateBusy(true);
         setError(null);
         try {
-            const body = {
-                name,
-                label,
-                fields: { name: { type: 'text', label: t('engine.studio.data.nameFieldLabel', locale) } },
-            };
+            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]);
@@ -849,7 +937,7 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         finally {
             setCreateBusy(false);
         }
-    }, [newLabel, newName, objects, client, packageId, onDraftSaved]);
+    }, [newLabel, newName, objects, client, packageId, onDraftSaved, readOnly]);
     const doSave = React.useCallback(async () => {
         if (!current)
             return;
@@ -859,6 +947,8 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
             await client.save('object', current.name, objDraft, { mode: 'draft', packageId });
             setHasDraft(true);
             setDirty(false);
+            setSavedAt(new Date());
+            toast.success(tFormat('engine.studio.data.savedDraft', locale, { label: current.label }));
             onDraftSaved?.();
         }
         catch (e) {
@@ -867,7 +957,7 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         finally {
             setSaving(false);
         }
-    }, [client, current, objDraft, onDraftSaved]);
+    }, [client, current, objDraft, onDraftSaved, packageId, locale]);
     // Drag-reorder columns → reorder the object's `fields` metadata (field display
     // order follows metadata order), saved as a DRAFT. Published later via the
     // package release — NOT auto-published per reorder as it used to be.
@@ -902,12 +992,15 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         }
     }, [client, current, objDraft, onDraftSaved]);
     const inspector = getMetadataInspector('object');
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [current ? (_jsxs("span", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "text-[13px] font-medium text-foreground", children: current.label }), _jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5", children: ["object \u00B7 ", current.name] }), _jsx("span", { children: tFormat('engine.studio.data.fieldCount', locale, { count: fieldCount }) })] })) : (_jsx("span", { className: "text-[11px] text-muted-foreground", children: t('engine.studio.data.pickObject', locale) })), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _jsxs("button", { onClick: doSave, disabled: !current || !dirty || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), t('engine.studio.saveDraft', locale)] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "flex w-52 shrink-0 flex-col border-r", children: [_jsxs("div", { className: "shrink-0 p-2 pb-1", children: [_jsx("p", { className: "px-2 pb-1 pt-1 text-[11px] font-medium text-muted-foreground", children: t('engine.studio.data.objects', locale) }), _jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('engine.studio.data.searchObjects', locale), className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none placeholder:text-muted-foreground/70 focus:ring-1 focus:ring-primary" })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto p-2 pt-1", children: [objects.length === 0 && (_jsx("p", { className: "px-2 py-3 text-[11px] text-muted-foreground", children: error ? t('engine.studio.loadFailed', locale) : objectsLoaded ? t('engine.studio.data.noObjects', locale) : t('engine.studio.loading', locale) })), objects
+    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: creating ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("input", { autoFocus: true, value: newLabel, onChange: (e) => {
+                                            (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));
@@ -936,12 +1029,19 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
                                                             ? t('engine.studio.data.badge.settings', locale)
                                                             : formMode === 'layout'
                                                                 ? t('engine.studio.data.badge.formLayout', locale)
-                                                                : t('engine.studio.data.badge.formPreview', locale)] }), (viewMode === 'grid' || viewMode === 'form') && (_jsxs("button", { type: "button", onClick: addField, title: t('engine.studio.data.addFieldTitle', locale), className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.data.addField', locale)] }))] }), error && (_jsx("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive whitespace-pre-line", children: error })), viewMode === 'rules' ? (_jsx(ObjectValidationsPanel, { draft: objDraft, onPatch: onPatch })) : viewMode === 'settings' ? (_jsx(ObjectSettingsPanel, { name: current.name, draft: objDraft, onPatch: onPatch, locale: locale })) : viewMode === 'grid' && !hasBaseline ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/20 text-center", children: [_jsx("p", { className: "text-sm font-medium", children: t('engine.studio.data.draftObjectTitle', locale) }), _jsx("p", { className: "max-w-md text-[11px] leading-5 text-muted-foreground", children: t('engine.studio.data.draftObjectHint', locale) }), _jsx("button", { type: "button", onClick: () => {
+                                                                : 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: {
-                                                    onAddColumn: addField,
-                                                    addColumnLabel: t('engine.studio.data.addField', locale),
+                                                    // 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)) {
@@ -949,7 +1049,6 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
                                                         }
                                                     },
                                                     editColumnLabel: t('engine.studio.data.editFieldProps', locale),
-                                                    onReorderFields: doReorderFields,
                                                 }, children: _jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(PluginObjectView, { schema: {
                                                             type: 'object-view',
                                                             objectName: current.name,
@@ -960,11 +1059,15 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
                                                             table: {
                                                                 fields: readFields(objDraft.fields)
                                                                     .entries.map((e) => e.name)
-                                                                    .filter((n) => !STUDIO_SYSTEM_FIELD_NAMES.has(n)),
+                                                                    // 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 })) : !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: `
+                                                                (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
@@ -997,12 +1100,28 @@ function DataPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
                                     onPatch,
                                     onClearSelection: () => setFieldSel(null),
                                     onSelectionChange: setFieldSel,
-                                    readOnly: false,
+                                    readOnly,
                                     locale,
                                 }) })] }))] })] }));
 }
-/** Automations pillar — flows: list → FlowPreview (default OFF / review-then-enable). */
-function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
+/**
+ * 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 = useMetadataLocale();
     const [flows, setFlows] = React.useState([]);
@@ -1025,16 +1144,50 @@ function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
     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);
             }
@@ -1050,7 +1203,7 @@ function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         return () => {
             cancelled = true;
         };
-    }, [client, packageId]);
+    }, [client, packageId, publishNonce]);
     const doCreateFlow = React.useCallback(async () => {
         const label = newLabel.trim();
         const name = toFieldName(newName.trim() || label);
@@ -1061,16 +1214,7 @@ function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
         try {
             // Minimal valid, autolaunched skeleton: start → end. The designer fills in
             // the trigger + nodes; publishing it is a separate, user-initiated step.
-            const skeleton = {
-                name,
-                label,
-                type: 'autolaunched',
-                nodes: [
-                    { id: 'start', type: 'start', label: t('engine.studio.auto.nodeStart', locale) },
-                    { id: 'end', type: 'end', label: t('engine.studio.auto.nodeEnd', locale) },
-                ],
-                edges: [{ id: 'e1', source: 'start', target: 'end' }],
-            };
+            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]);
@@ -1141,9 +1285,35 @@ function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
             setSaving(false);
         }
     }, [client, current, draft, onDraftSaved]);
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: t('engine.studio.auto.defaultOff', locale) }), hasDraft && (_jsx("span", { className: "rounded bg-amber-400/15 px-2 py-0.5 text-[11px] text-amber-600 dark:text-amber-300", children: t('engine.studio.unpublishedDraft', locale) })), _jsxs("button", { onClick: doSave, disabled: !current || !isEditable || !!saving, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs hover:bg-muted disabled:opacity-50", children: [saving === 'draft' ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), t('engine.studio.saveDraft', locale)] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("nav", { className: "flex w-52 shrink-0 flex-col overflow-auto border-r p-2", children: [_jsxs("div", { className: "flex items-center gap-1 px-2 pb-1 pt-1", children: [_jsx("p", { className: "flex-1 text-[11px] font-medium text-muted-foreground", children: t('engine.studio.auto.heading', locale) }), _jsxs("button", { type: "button", onClick: () => setCreating((v) => !v), title: t('engine.studio.auto.newTitle', locale), className: "inline-flex items-center gap-0.5 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted", children: [_jsx(Plus, { className: "h-3 w-3" }), " ", t('engine.studio.new', locale)] })] }), flows.length > 0 &&
+    // 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;
+        const next = !(draft.status !== 'obsolete' && draft.status !== 'invalid');
+        const nextDraft = { ...draft, status: next ? 'active' : 'obsolete' };
+        setDraft(nextDraft);
+        setSaving('draft');
+        setError(null);
+        try {
+            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(formatMetadataError(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [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 })] }, 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) => {
+                                        (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')
@@ -1189,7 +1359,7 @@ function AutomationsPillar({ packageId, publishNonce = 0, onDraftSaved, }) {
  * 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, }) {
+function AccessPillar({ packageId, publishNonce, onDraftSaved, readOnly = false, }) {
     const client = useMetadataClient();
     const locale = useMetadataLocale();
     const [perms, setPerms] = React.useState([]);
@@ -1263,7 +1433,7 @@ function AccessPillar({ packageId, publishNonce, onDraftSaved, }) {
         try {
             // Package door → create as a DRAFT stamped with this package (D6/D7),
             // published atomically with the rest of the package.
-            await client.save('permission', name, { name, label, objects: {}, fields: {} }, { mode: 'draft', packageId });
+            await client.save('permission', name, buildPermissionSkeleton(name, label), { mode: 'draft', packageId });
             toast.success(tFormat('engine.studio.access.created', locale, { label }));
             setCreating(false);
             setNewLabel('');
@@ -1301,6 +1471,6 @@ function AccessPillar({ packageId, publishNonce, onDraftSaved, }) {
                                                     void doCreate();
                                                 if (e.key === 'Escape')
                                                     setCreating(false);
-                                            }, placeholder: t('engine.studio.access.idPlaceholder', locale), className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreate(), disabled: busy || !newLabel.trim() || !toFieldName(newName.trim() || newLabel) || toFieldName(newName.trim() || newLabel) === 'field', className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [busy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), t('engine.studio.create', locale)] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: t('engine.studio.cancel', locale) })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " ", t('engine.studio.access.new', locale)] })) })] }), _jsx("main", { className: "min-w-0 flex-1 overflow-auto", children: current ? (_jsx(PermissionMatrixEditPage, { type: "permission", name: current, packageId: packageId, publishNonce: publishNonce, onDraftSaved: onDraftSaved }, current)) : (_jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: loaded && perms.length === 0 ? t('engine.studio.access.emptyMain', locale) : t('engine.studio.access.pick', locale) })) })] })] }));
+                                            }, 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;