@object-ui/app-shell 6.2.2 → 7.0.0

package/dist/views/metadata-admin/ResourceHistoryPage.d.ts

@@ -1,5 +1,43 @@
+/**
+ * MetadataResourceHistoryPage — durable change log for one item
+ * (Phase 3c).
+ *
+ * Calls `client.history(type, name)`. The framework returns
+ * `{ events: MetadataEvent[] }` where each event records who saved
+ * what, with a monotonic `seq`. We render a vertical timeline; clicking
+ * an event expands its payload diff.
+ *
+ * Rollback is intentionally not exposed in MVP — restoring a previous
+ * version is just `client.save(type, name, oldPayload)` which already
+ * works, but a one-click revert needs a confirmation flow we'll add
+ * once admins ask for it.
+ */
+import * as React from 'react';
+import { useMetadataClient } from './useMetadata';
 export interface MetadataResourceHistoryPageProps {
     type?: string;
     name?: string;
 }
-export declare function MetadataResourceHistoryPage({ type: typeProp, name: nameProp, }: MetadataResourceHistoryPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataResourceHistoryPage({ type: typeProp, name: nameProp, }: MetadataResourceHistoryPageProps): React.JSX.Element;
+/**
+ * Embeddable version of the history timeline. Re-used by both the
+ * routed full page and the right-side sheet on the edit page so we
+ * keep a single visual + fetching implementation.
+ *
+ * Pass `onRollback` to enable the per-event Rollback action — the
+ * embedded version inside ResourceEditPage uses it to refresh the
+ * editor's layered view after restoring a previous version.
+ */
+export declare function HistoryPanel({ type, name, refreshKey, onCount, client, onRollback, rollbackConfirm, rollbackLabel, }: {
+    type: string;
+    name: string;
+    refreshKey?: number;
+    onCount?: (n: number) => void;
+    client: ReturnType<typeof useMetadataClient>;
+    /** Called after a successful rollback so the parent can refresh. */
+    onRollback?: (version: number) => void;
+    /** Confirmation message — defaults to a literal English string. */
+    rollbackConfirm?: (version: number) => string;
+    /** Tooltip / button label — defaults to "Rollback". */
+    rollbackLabel?: string;
+}): React.JSX.Element;

package/dist/views/metadata-admin/ResourceHistoryPage.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { ArrowLeft, RefreshCw, Loader2 } from 'lucide-react';
+import { ArrowLeft, RefreshCw, Loader2, RotateCcw } from 'lucide-react';
 import { Button } from '@object-ui/components';
 import { Badge } from '@object-ui/components';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
@@ -30,11 +30,26 @@ export function MetadataResourceHistoryPage({ type: typeProp, name: nameProp, })
     const client = useMetadataClient();
     const { entries } = useMetadataTypes(client);
     const entry = entries.find((t) => t.type === type);
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    const [eventCount, setEventCount] = React.useState(0);
+    return (_jsx(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: "Version history", stats: [{ label: 'Events', value: eventCount }], actions: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`../${encodeURIComponent(name)}`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Back to item"] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }), children: _jsx("div", { className: "p-6 max-w-4xl", children: _jsx(HistoryPanel, { type: type, name: name, refreshKey: refreshKey, onCount: setEventCount, client: client, onRollback: () => setRefreshKey((k) => k + 1) }) }) }));
+}
+/**
+ * Embeddable version of the history timeline. Re-used by both the
+ * routed full page and the right-side sheet on the edit page so we
+ * keep a single visual + fetching implementation.
+ *
+ * Pass `onRollback` to enable the per-event Rollback action — the
+ * embedded version inside ResourceEditPage uses it to refresh the
+ * editor's layered view after restoring a previous version.
+ */
+export function HistoryPanel({ type, name, refreshKey = 0, onCount, client, onRollback, rollbackConfirm, rollbackLabel, }) {
     const [events, setEvents] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
-    const [refreshKey, setRefreshKey] = React.useState(0);
     const [expanded, setExpanded] = React.useState(null);
+    const [rollingBack, setRollingBack] = React.useState(null);
+    const [localRefresh, setLocalRefresh] = React.useState(0);
     React.useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -52,6 +67,7 @@ export function MetadataResourceHistoryPage({ type: typeProp, name: nameProp, })
                 // Reverse chronological — most recent first.
                 const sorted = [...list].sort((a, b) => (b.seq ?? 0) - (a.seq ?? 0));
                 setEvents(sorted);
+                onCount?.(sorted.length);
                 setLoading(false);
             }
             catch (err) {
@@ -64,20 +80,54 @@ export function MetadataResourceHistoryPage({ type: typeProp, name: nameProp, })
         return () => {
             cancelled = true;
         };
-    }, [client, type, name, refreshKey]);
-    return (_jsx(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: "Version history", stats: [{ label: 'Events', value: events.length }], actions: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`../${encodeURIComponent(name)}`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Back to item"] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }), children: _jsxs("div", { className: "p-6 max-w-4xl", children: [loading && (_jsxs("div", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading history\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && events.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No history yet" }), _jsx(EmptyDescription, { children: "This item has never been edited via an overlay. The first save will create the initial history record." })] })), !loading && events.length > 0 && (_jsx("ol", { className: "space-y-2 relative pl-6 border-l", children: events.map((ev, i) => {
-                        const isOpen = expanded === i;
-                        return (_jsxs("li", { className: "relative", children: [_jsx("span", { className: "absolute -left-[27px] top-2 w-3 h-3 rounded-full bg-primary ring-4 ring-background" }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setExpanded(isOpen ? null : i), onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            setExpanded(isOpen ? null : i);
-                                        }
-                                    }, className: "border rounded-lg p-3 hover:border-primary/50 cursor-pointer transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Badge, { variant: "outline", className: "text-[10px] font-mono", children: ["seq ", ev.seq ?? '–'] }), ev.kind && (_jsx(Badge, { className: 'text-[10px] ' +
-                                                        (ev.kind === 'delete' || ev.kind === 'tombstone'
-                                                            ? 'bg-red-100 text-red-800 hover:bg-red-100'
-                                                            : ev.kind === 'create'
-                                                                ? 'bg-blue-100 text-blue-800 hover:bg-blue-100'
-                                                                : 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'), children: String(ev.kind) })), ev.actor && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["by", ' ', _jsx("span", { className: "font-mono", children: String(ev.actor) })] })), ev.at && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: formatWhen(ev.at) }))] }), isOpen && (_jsx("pre", { className: "mt-2 text-xs font-mono bg-muted/30 rounded p-2 overflow-auto max-h-[280px]", children: safeStringify(ev) }))] })] }, `${ev.seq ?? i}-${i}`));
-                    }) }))] }) }));
+    }, [client, type, name, refreshKey, localRefresh]);
+    async function doRollback(version) {
+        const message = rollbackConfirm
+            ? rollbackConfirm(version)
+            : `Restore version ${version}? This writes the historical body back as the current overlay.`;
+        if (!confirm(message))
+            return;
+        setRollingBack(version);
+        setError(null);
+        try {
+            await client.rollback(type, name, version);
+            onRollback?.(version);
+            // Refetch so the new revert event shows up at the top.
+            setLocalRefresh((k) => k + 1);
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setRollingBack(null);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [loading && (_jsxs("div", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading history\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && events.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No history yet" }), _jsx(EmptyDescription, { children: "This item has never been edited via an overlay. The first save will create the initial history record." })] })), !loading && events.length > 0 && (_jsx("ol", { className: "space-y-2 relative pl-6 border-l", children: events.map((ev, i) => {
+                    const isOpen = expanded === i;
+                    const op = ev.op ?? ev.kind;
+                    const ts = ev.ts ?? ev.at;
+                    const canRollback = !!onRollback
+                        && typeof ev.version === 'number'
+                        && op !== 'delete'
+                        && op !== 'tombstone';
+                    return (_jsxs("li", { className: "relative", children: [_jsx("span", { className: "absolute -left-[27px] top-2 w-3 h-3 rounded-full bg-primary ring-4 ring-background" }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setExpanded(isOpen ? null : i), onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        setExpanded(isOpen ? null : i);
+                                    }
+                                }, className: "border rounded-lg p-3 hover:border-primary/50 cursor-pointer transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Badge, { variant: "outline", className: "text-[10px] font-mono", children: ["seq ", ev.seq ?? '–'] }), typeof ev.version === 'number' && (_jsxs(Badge, { variant: "outline", className: "text-[10px] font-mono", children: ["v", ev.version] })), op && (_jsx(Badge, { className: 'text-[10px] ' +
+                                                    (op === 'delete' || op === 'tombstone'
+                                                        ? 'bg-red-100 text-red-800 hover:bg-red-100'
+                                                        : op === 'create'
+                                                            ? 'bg-blue-100 text-blue-800 hover:bg-blue-100'
+                                                            : op === 'publish'
+                                                                ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'
+                                                                : op === 'revert'
+                                                                    ? 'bg-amber-100 text-amber-900 hover:bg-amber-100'
+                                                                    : 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'), children: String(op) })), ev.actor && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["by", ' ', _jsx("span", { className: "font-mono", children: String(ev.actor) })] })), ts && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: formatWhen(ts) })), canRollback && (_jsx(Button, { size: "sm", variant: "ghost", className: "h-6 w-6 p-0", title: rollbackLabel ?? 'Rollback to this version', disabled: rollingBack !== null, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    doRollback(ev.version);
+                                                }, children: rollingBack === ev.version ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(RotateCcw, { className: "h-3.5 w-3.5" })) }))] }), isOpen && (_jsx("pre", { className: "mt-2 text-xs font-mono bg-muted/30 rounded p-2 overflow-auto max-h-[280px]", children: safeStringify(ev) }))] })] }, `${ev.seq ?? i}-${i}`));
+                }) }))] }));
 }
 function formatWhen(at) {
     try {

package/dist/views/metadata-admin/ResourceListPage.d.ts

@@ -1,4 +1,16 @@
+/**
+ * MetadataResourceListPage — generic list of items for a metadata type
+ * (Phase 3c).
+ *
+ * Reads `/meta/:type`, applies registry-driven columns + search +
+ * source/overlay filters, and renders an ObjectGrid-like table.
+ * Each row links to its EditPage at `./:name?type=…`.
+ *
+ * No virtualisation in MVP — metadata lists are typically < 200 items
+ * per type, well under the threshold where it'd matter.
+ */
+import * as React from 'react';
 export interface MetadataResourceListPageProps {
     type?: string;
 }
-export declare function MetadataResourceListPage({ type: typeProp }: MetadataResourceListPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataResourceListPage({ type: typeProp }: MetadataResourceListPageProps): React.JSX.Element;

package/dist/views/metadata-admin/ResourceListPage.js

@@ -12,37 +12,190 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * per type, well under the threshold where it'd matter.
  */
 import * as React from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
-import { Plus, Search, RefreshCw } from 'lucide-react';
+import { Link, Navigate, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { Plus, Search, RefreshCw, AlertTriangle, Lock } from 'lucide-react';
 import { Button } from '@object-ui/components';
 import { Input } from '@object-ui/components';
 import { Badge } from '@object-ui/components';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PageShell } from './PageShell';
+import { MetadataTypeActions } from './MetadataTypeActions';
 import { useMetadataClient, useMetadataTypes, matchesQuery, } from './useMetadata';
 import { getMetadataResource, resolveResourceConfig, } from './registry';
-import { t, detectLocale } from './i18n';
+import { t, tFormat, translateMetadataType, detectLocale } from './i18n';
+/**
+ * Derive provenance from item._packageId. The `loadMetaFromDb` path
+ * tags objects with the synthetic packageId 'sys_metadata' (see
+ * framework protocol.ts:3092); treat that sentinel as runtime-authored.
+ */
+function classifyProvenance(item, rawSource) {
+    if (rawSource === 'overlay' || rawSource === 'runtime')
+        return 'runtime';
+    if (rawSource === 'code' || rawSource === 'artifact')
+        return 'artifact';
+    const pkg = item._packageId;
+    if (!pkg || pkg === 'sys_metadata')
+        return 'runtime';
+    return 'artifact';
+}
 export function MetadataResourceListPage({ type: typeProp }) {
     const params = useParams();
     const type = typeProp ?? params.type ?? '';
-    const navigate = useNavigate();
-    const client = useMetadataClient();
-    const { entries: typesEntries } = useMetadataTypes(client);
-    const entry = typesEntries.find((t) => t.type === type);
-    const config = resolveResourceConfig(type, entry);
+    if (type === 'package') {
+        const appName = params.appName ?? 'studio';
+        return _jsx(Navigate, { to: `/apps/${appName}/component/developer/packages`, replace: true });
+    }
     // If a fully custom ListPage is registered, render it and bail.
+    // Done before any other hooks so hook count stays stable across type
+    // switches between custom and default list pages.
     const customConfig = getMetadataResource(type);
     if (customConfig?.ListPage) {
         const Custom = customConfig.ListPage;
         return _jsx(Custom, { type: type });
     }
+    return _jsx(DefaultMetadataList, { type: type, appName: params.appName });
+}
+function DefaultMetadataList({ type, appName }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries: typesEntries } = useMetadataTypes(client);
+    const entry = typesEntries.find((t) => t.type === type);
+    const config = resolveResourceConfig(type, entry);
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
     const [query, setQuery] = React.useState('');
     const [sourceFilter, setSourceFilter] = React.useState('all');
+    const [searchParams, setSearchParams] = useSearchParams();
     const [refreshKey, setRefreshKey] = React.useState(0);
+    // Studio is scoped to a single *project* package at a time. Load the
+    // installed packages and keep only project-scoped ones — anything not
+    // tagged `system`/`cloud` (a missing scope counts as project). System
+    // metadata therefore never leaks: the scope selector never offers a
+    // system package and an unscoped view is not allowed.
+    const [projectPackages, setProjectPackages] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = await client.list('package');
+                if (cancelled)
+                    return;
+                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
+                const rows = (list ?? [])
+                    .map((raw) => {
+                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
+                    const m = (item?.manifest ?? item ?? {});
+                    return {
+                        id: m.id,
+                        scope: m.scope,
+                        name: m.name || m.id,
+                    };
+                })
+                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
+                rows.sort((a, b) => a.name.localeCompare(b.name));
+                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+            }
+            catch {
+                if (!cancelled)
+                    setProjectPackages([]);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    // Resolve the CURRENT APP's package so the list defaults to the scope the
+    // admin is actually working in (e.g. opening Pages from the Showcase app
+    // shows that app's pages, not an alphabetically-first empty template). The
+    // route segment may be the app `name` or its package id, so match both.
+    const [appPackage, setAppPackage] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        if (!appName) {
+            setAppPackage(null);
+            return;
+        }
+        (async () => {
+            try {
+                const apps = await client.list('app');
+                if (cancelled)
+                    return;
+                const match = (apps ?? [])
+                    .map((raw) => (raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw))
+                    .find((a) => a?.name === appName || a?._packageId === appName);
+                setAppPackage(match?._packageId ?? null);
+            }
+            catch {
+                if (!cancelled)
+                    setAppPackage(null);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [client, appName]);
+    // Resolve the active package from the URL, validated against the project
+    // package set. `null` while packages are still loading (fail closed).
+    const urlPackage = searchParams.get('package');
+    const activePackage = React.useMemo(() => {
+        if (!projectPackages)
+            return null;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return urlPackage;
+        if (projectPackages.length === 0)
+            return null;
+        // No valid URL package: prefer the CURRENT APP's package (the scope the
+        // admin is working in) when it's a valid project package — this is what
+        // makes "Pages" in the Showcase app default to Showcase's pages.
+        if (appPackage && projectPackages.some((p) => p.id === appPackage))
+            return appPackage;
+        // Otherwise prefer the project package that actually OWNS rows of this
+        // metadata type, so the list never opens empty on an alphabetically-first
+        // package that happens to own none. Falls back to the first package.
+        const counts = new Map();
+        for (const row of items) {
+            const pkg = row.item?._packageId;
+            if (pkg && pkg !== 'sys_metadata')
+                counts.set(pkg, (counts.get(pkg) ?? 0) + 1);
+        }
+        let best = null;
+        let bestN = 0;
+        for (const p of projectPackages) {
+            const n = counts.get(p.id) ?? 0;
+            if (n > bestN) {
+                best = p.id;
+                bestN = n;
+            }
+        }
+        return best ?? projectPackages[0]?.id ?? null;
+    }, [projectPackages, urlPackage, items, appPackage]);
+    // Repair `?package=` so the sidebar selector, deep-links and create/edit
+    // navigation all agree on the active scope. Runs once packages resolve
+    // and the URL holds no valid project package.
+    React.useEffect(() => {
+        if (!projectPackages || projectPackages.length === 0)
+            return;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return;
+        // If the current app's package is known we can repair immediately; otherwise
+        // wait for rows so `activePackage` can resolve to the package that owns this
+        // type (repairing to the alphabetical-first package before then would lock
+        // the list onto an empty scope).
+        const appPkgValid = !!(appPackage && projectPackages.some((p) => p.id === appPackage));
+        if (!appPkgValid && items.length === 0)
+            return;
+        if (!activePackage)
+            return;
+        const next = new URLSearchParams(searchParams);
+        next.set('package', activePackage);
+        setSearchParams(next, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectPackages, urlPackage, items, activePackage, appPackage]);
+    // Carry the active package into create/edit navigation as `?package=` so
+    // the editor binds newly-saved rows to that software package.
+    const pkgSuffix = activePackage
+        ? `?package=${encodeURIComponent(activePackage)}`
+        : '';
     React.useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -54,10 +207,14 @@ export function MetadataResourceListPage({ type: typeProp }) {
                     return;
                 const rows = (list ?? []).map((raw) => {
                     const item = (raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw) ?? {};
+                    // _diagnostics may live on the unwrapped item (default) or on the
+                    // outer envelope when callers reshape rows; check both.
+                    const diagnostics = item?._diagnostics ?? raw?._diagnostics ?? undefined;
                     return {
                         raw,
                         item,
-                        source: raw?.source,
+                        source: classifyProvenance(item, raw?.source),
+                        diagnostics,
                     };
                 });
                 setItems(rows);
@@ -75,24 +232,51 @@ export function MetadataResourceListPage({ type: typeProp }) {
         };
     }, [client, type, refreshKey]);
     const searchableFields = config.searchableFields ?? ['name', 'label', 'description'];
-    const filtered = items.filter((row) => {
+    // Structural scope — every row this package could ever show for this
+    // type, before the user's search box / source dropdown narrow it. Header
+    // counts, the source filter, and the empty-state copy all key off this so
+    // a package with zero items of a type reads as "暂无…条目", not "no match
+    // for an (empty) query" just because *other* packages own rows of the
+    // same type (server list() is not package-scoped; we scope client-side).
+    const scopedItems = React.useMemo(() => items.filter((row) => {
+        // Per-type hide hook (e.g. `view` drops the bare aggregated
+        // container the framework keeps for runtime dual-read).
+        if (config.listFilter && !config.listFilter(row.item))
+            return false;
+        // Mandatory project-package scope: show nothing until a concrete
+        // project package is active, then only rows tagged with it. The
+        // 'sys_metadata' sentinel and untagged rows never match.
+        if (!activePackage)
+            return false;
+        const pkg = row.item?._packageId;
+        const effectivePkg = !pkg || pkg === 'sys_metadata' ? null : pkg;
+        return effectivePkg === activePackage;
+    }), [items, activePackage, config]);
+    // User-driven filters (search query + source provenance) on top of scope.
+    const filtered = scopedItems.filter((row) => {
         if (!matchesQuery(row.item, query, searchableFields))
             return false;
-        if (sourceFilter !== 'all' && row.source && row.source !== sourceFilter)
+        if (sourceFilter !== 'all' && row.source !== sourceFilter)
             return false;
         return true;
     });
-    // Compute source counts for the filter dropdown.
+    // Compute source + invalid counts for filter / header stats.
     const sourceCounts = React.useMemo(() => {
-        const c = { all: items.length, code: 0, overlay: 0, effective: 0 };
-        for (const r of items) {
-            if (r.source && c[r.source] !== undefined)
-                c[r.source]++;
+        const c = { all: scopedItems.length, artifact: 0, runtime: 0 };
+        for (const r of scopedItems) {
+            c[r.source]++;
         }
         return c;
-    }, [items]);
+    }, [scopedItems]);
+    const invalidCount = React.useMemo(() => scopedItems.filter((r) => r.diagnostics && r.diagnostics.valid === false).length, [scopedItems]);
+    // Items with warnings but no errors — softer, advisory tier. We
+    // count rows (not warning instances) for consistency with `invalid`.
+    const warnOnlyCount = React.useMemo(() => scopedItems.filter((r) => r.diagnostics &&
+        r.diagnostics.valid !== false &&
+        (r.diagnostics.warnings?.length ?? 0) > 0).length, [scopedItems]);
     const columns = config.listColumns ?? defaultColumns(config.primaryKey ?? 'name');
     const locale = detectLocale();
+    const typeLabel = translateMetadataType(type, locale, entry?.label ?? type);
     // Localise default column labels — registered columns keep their
     // hand-authored labels (consumers may want bespoke wording).
     const localizeColumnLabel = (col) => {
@@ -101,24 +285,76 @@ export function MetadataResourceListPage({ type: typeProp }) {
         return translated === tryKey ? col.label : translated;
     };
     return (_jsx(PageShell, { entry: entry ?? { type, label: type }, stats: [
-            { label: t('engine.list.items', locale), value: items.length },
+            { label: t('engine.list.items', locale), value: scopedItems.length },
             { label: t('engine.list.filtered', locale), value: filtered.length },
-        ], actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), title: t('engine.list.refresh', locale), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), entry?.allowOrgOverride && (_jsxs(Button, { size: "sm", onClick: () => navigate(`./new`), children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), t('engine.list.create', locale)] }))] }), children: _jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[200px] max-w-md", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.list.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "all", children: [t('engine.list.allSources', locale), " (", sourceCounts.all, ")"] }), _jsxs(SelectItem, { value: "code", children: ["Code (", sourceCounts.code, ")"] }), _jsxs(SelectItem, { value: "overlay", children: ["Overlay (", sourceCounts.overlay, ")"] }), _jsxs(SelectItem, { value: "effective", children: ["Effective (", sourceCounts.effective, ")"] })] })] })] }), loading && (_jsxs("div", { className: "text-sm text-muted-foreground", children: [t('engine.edit.loading', locale), " ", type, "\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: items.length === 0
-                                ? `No ${type} items registered`
-                                : `No matches for "${query}"` }), _jsx(EmptyDescription, { children: config.emptyStateHint ??
-                                (entry?.allowOrgOverride
-                                    ? `Click "New" above to create the first ${type}.`
-                                    : `This type is read-only — instances are defined by code artifacts in packages.`) })] })), !loading && filtered.length > 0 && (_jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { className: "px-3 py-2 text-left font-medium", style: c.width ? { width: c.width } : undefined, children: localizeColumnLabel(c) }, c.key))), _jsx("th", { className: "px-3 py-2 text-right font-medium w-[80px]", children: t('engine.list.col.source', locale) })] }) }), _jsx("tbody", { className: "divide-y", children: filtered.map((row, i) => {
+            ...(invalidCount > 0
+                ? [
+                    {
+                        label: t('engine.list.invalid', locale),
+                        value: (_jsxs("span", { className: "inline-flex items-center gap-1 text-destructive", children: [_jsx(AlertTriangle, { className: "w-3.5 h-3.5" }), invalidCount] })),
+                    },
+                ]
+                : []),
+            ...(warnOnlyCount > 0
+                ? [
+                    {
+                        label: t('engine.list.warnings', locale),
+                        value: (_jsxs("span", { className: "inline-flex items-center gap-1 text-amber-600 dark:text-amber-400", children: [_jsx(AlertTriangle, { className: "w-3.5 h-3.5" }), warnOnlyCount] })),
+                    },
+                ]
+                : []),
+        ], actions: _jsxs(_Fragment, { children: [_jsx(MetadataTypeActions, { entry: entry, location: "list_toolbar", onAfter: () => setRefreshKey((k) => k + 1) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), title: t('engine.list.refresh', locale), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), (entry?.allowOrgOverride || entry?.allowRuntimeCreate) && (_jsxs(Button, { size: "sm", variant: config.createFields ? 'default' : 'outline', onClick: () => navigate(`./new${pkgSuffix}`), title: config.createFields
+                        ? tFormat('engine.list.createHint', locale, { type: typeLabel })
+                        : undefined, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), t('engine.list.create', locale)] }))] }), children: _jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[200px] max-w-md", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.list.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "all", children: [t('engine.list.allSources', locale), " (", sourceCounts.all, ")"] }), _jsxs(SelectItem, { value: "artifact", children: [t('engine.list.source.artifact', locale), " (", sourceCounts.artifact, ")"] }), _jsxs(SelectItem, { value: "runtime", children: [t('engine.list.source.runtime', locale), " (", sourceCounts.runtime, ")"] })] })] })] }), (loading || projectPackages === null) && (_jsxs("div", { className: "text-sm text-muted-foreground", children: [t('engine.edit.loading', locale), " ", type, "\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && projectPackages !== null && projectPackages.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No project packages installed" }), _jsx(EmptyDescription, { children: "Studio only shows metadata that belongs to a project software package. Install or create a project package to manage its metadata here." })] })), !loading && !error && projectPackages !== null && projectPackages.length > 0 && filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: scopedItems.length === 0
+                                ? tFormat('engine.list.emptyType', locale, { type: typeLabel })
+                                : tFormat('engine.list.emptyQuery', locale, { query }) }), _jsx(EmptyDescription, { children: config.emptyStateHint ??
+                                (entry?.allowOrgOverride || entry?.allowRuntimeCreate
+                                    ? tFormat('engine.list.createHint', locale, { type: typeLabel })
+                                    : t('engine.list.readOnlyHint', locale)) }), scopedItems.length === 0 && (entry?.allowOrgOverride || entry?.allowRuntimeCreate) && (_jsx("div", { className: "mt-4", children: _jsxs(Button, { onClick: () => navigate(`./new${pkgSuffix}`), children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), t('engine.list.create', locale)] }) }))] })), !loading && filtered.length > 0 && (_jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { className: "px-3 py-2 text-left font-medium", style: c.width ? { width: c.width } : undefined, children: localizeColumnLabel(c) }, c.key))), _jsx("th", { className: "px-3 py-2 text-right font-medium w-[80px]", children: t('engine.list.col.source', locale) })] }) }), _jsx("tbody", { className: "divide-y", children: filtered.map((row, i) => {
                                     const pk = config.primaryKey ?? 'name';
                                     const name = String(row.item[pk] ?? `(unnamed-${i})`);
-                                    return (_jsxs("tr", { className: "hover:bg-accent/50", children: [columns.map((c, ci) => {
+                                    // ADR-0048 — link to this row's OWNING package so the editor
+                                    // resolves the right item even in the unscoped "all" list
+                                    // where two packages may ship the same name. Falls back to the
+                                    // workspace suffix for runtime/overlay-only rows (no real
+                                    // package, or the `sys_metadata` rehydration sentinel).
+                                    const rowPkg = row.item._packageId;
+                                    const rowEditSuffix = rowPkg && rowPkg !== 'sys_metadata'
+                                        ? `?package=${encodeURIComponent(rowPkg)}`
+                                        : pkgSuffix;
+                                    const invalid = row.diagnostics?.valid === false;
+                                    const errorList = row.diagnostics?.errors ?? [];
+                                    const warnList = row.diagnostics?.warnings ?? [];
+                                    const warnOnly = !invalid && warnList.length > 0;
+                                    const errorTitle = invalid
+                                        ? errorList
+                                            .slice(0, 3)
+                                            .map((e) => `${e.path || '(root)'}: ${e.message}`)
+                                            .join('\n') +
+                                            (errorList.length > 3 ? `\n+${errorList.length - 3} more` : '')
+                                        : warnOnly
+                                            ? warnList
+                                                .slice(0, 3)
+                                                .map((w) => `${w.path || '(root)'}: ${w.message}`)
+                                                .join('\n') +
+                                                (warnList.length > 3 ? `\n+${warnList.length - 3} more` : '')
+                                            : '';
+                                    return (_jsxs("tr", { className: 'hover:bg-accent/50 ' +
+                                            (invalid
+                                                ? 'bg-destructive/[0.04]'
+                                                : warnOnly
+                                                    ? 'bg-amber-500/[0.05]'
+                                                    : ''), children: [columns.map((c, ci) => {
                                                 const value = row.item[c.key];
                                                 const cell = c.render ? c.render(value, row.item) : defaultCell(value);
-                                                return (_jsx("td", { className: "px-3 py-2 align-top", children: ci === 0 ? (_jsx(Link, { to: `./${encodeURIComponent(name)}`, className: "text-primary hover:underline font-mono", children: cell })) : (cell) }, c.key));
-                                            }), _jsx("td", { className: "px-3 py-2 text-right align-top", children: row.source ? (_jsx(Badge, { variant: "outline", className: 'text-[10px] ' +
-                                                        (row.source === 'overlay'
-                                                            ? 'border-emerald-500 text-emerald-700'
-                                                            : ''), children: row.source })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" })) })] }, name + i));
+                                                return (_jsx("td", { className: "px-3 py-2 align-top", children: ci === 0 ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [invalid && (_jsx("span", { className: "inline-flex", "aria-label": t('engine.list.invalidTitle', locale), title: `${tFormat('engine.list.invalidCount', locale, { count: errorList.length })}\n${errorTitle}`, children: _jsx(AlertTriangle, { className: "w-3.5 h-3.5 text-destructive shrink-0" }) })), warnOnly && (_jsx("span", { className: "inline-flex", "aria-label": t('engine.list.warnTitle', locale), title: `${tFormat('engine.list.warnCount', locale, { count: warnList.length })}\n${errorTitle}`, children: _jsx(AlertTriangle, { className: "w-3.5 h-3.5 text-amber-600 dark:text-amber-400 shrink-0" }) })), _jsx(Link, { to: `./${encodeURIComponent(name)}${rowEditSuffix}`, className: "text-primary hover:underline font-mono", children: cell })] })) : (cell) }, c.key));
+                                            }), _jsxs("td", { className: "px-3 py-2 text-right align-top", children: [row.item._lock && row.item._lock !== 'none' && (_jsx("span", { className: "inline-flex items-center mr-1 text-amber-600 dark:text-amber-400", title: row.item._lockReason
+                                                            ?? `_lock=${String(row.item._lock)}`, children: _jsx(Lock, { className: "h-3 w-3" }) })), _jsx(Badge, { variant: "outline", className: 'text-[10px] ' +
+                                                            (row.source === 'artifact'
+                                                                ? 'border-sky-500/50 text-sky-700 dark:text-sky-300'
+                                                                : 'border-emerald-500/50 text-emerald-700 dark:text-emerald-300'), title: row.source === 'artifact'
+                                                            ? `${t('engine.list.source.artifactDesc', locale)}${row.item._packageId ? ` (${row.item._packageId})` : ''}`
+                                                            : t('engine.list.source.runtimeDesc', locale), children: t(`engine.list.source.${row.source}`, locale) })] })] }, name + i));
                                 }) })] }) }))] }) }));
 }
 function defaultColumns(primaryKey) {

package/dist/views/metadata-admin/ResourceRouter.d.ts

@@ -1,3 +1,25 @@
+/**
+ * MetadataResourceRouter — top-level component bound to
+ * `metadata:resource`. Switches between list / create / edit /
+ * history based on the trailing wildcard URL.
+ *
+ * URL shape (the parent route is `/apps/:appName/component/:ns/:name/*`,
+ * so the wildcard begins AFTER `metadata/resource`):
+ *
+ *   `?type=view`                      → list of `view` items
+ *   `/new?type=view`                  → create new view
+ *   `/account?type=object`            → edit object `account`
+ *   `/account/history?type=object`    → history for object `account`
+ *
+ * The `type` query param is the single source of truth for the
+ * metadata type. The wildcard provides the item name (or `'new'`).
+ *
+ * Why parse the wildcard manually instead of nested `<Routes>`?
+ * The parent route's `path` is `component/:ns/:name/*` and React
+ * Router strips the matched portion before passing what's left to
+ * `useParams['*']`, so we just split on `/`.
+ */
+import * as React from 'react';
 /**
  * Props forwarded by `ComponentNavView` — it merges URL query-string
  * into props, so we accept both `type` (from `?type=…`) and route
@@ -7,4 +29,4 @@ export interface MetadataResourceRouterProps {
     /** Singular metadata type, e.g. 'view'. */
     type?: string;
 }
-export declare function MetadataResourceRouter({ type }: MetadataResourceRouterProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataResourceRouter({ type }: MetadataResourceRouterProps): React.JSX.Element;