@object-ui/app-shell 6.2.2 → 7.0.0

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

@@ -1,6 +1,44 @@
+/**
+ * LayeredDiff — visualizes how the runtime resolves a two-tier metadata item.
+ *
+ * Tabs:
+ *   • Diff (default) — field-level table comparing Code (artifact) vs
+ *     Effective (merged). Highlights modified / added / removed top-level
+ *     fields with color coding so admins can see at a glance what their
+ *     overlay actually changes.
+ *   • Code      — pretty-printed JSON of the artifact baseline.
+ *   • Overlay   — pretty-printed JSON of just the deltas they've saved.
+ *   • Effective — the merged value the runtime serves.
+ *
+ * Backed by `client.layered(type, name)` (Phase 3a `?layers=true`).
+ *
+ * Diff scope: top-level keys only. Nested objects/arrays are compared by
+ * JSON-stringify equality. Drilling into nested diffs is a future
+ * enhancement; the overlay deltas we ship in practice are flat.
+ */
+import * as React from 'react';
 import type { MetadataLayered } from '@object-ui/data-objectstack';
+import { type SupportedLocale } from './i18n';
 export interface LayeredDiffProps {
     layered: MetadataLayered<Record<string, unknown>> | null;
     loading?: boolean;
+    locale?: SupportedLocale | string;
 }
-export declare function LayeredDiff({ layered, loading }: LayeredDiffProps): import("react/jsx-runtime").JSX.Element;
+export type DiffStatus = 'unchanged' | 'modified' | 'added' | 'removed';
+export interface DiffRow {
+    key: string;
+    status: DiffStatus;
+    codeValue: unknown;
+    effectiveValue: unknown;
+}
+export declare function computeDiffRows(code: unknown, effective: unknown): DiffRow[];
+/**
+ * Count of top-level fields where the overlay actually changes the
+ * effective value vs the artifact baseline. Used by the editor's
+ * Layers tab trigger to show e.g. "3 overlaid" next to the label.
+ *
+ * Returns 0 when there is no baseline (pure-runtime item) or the two
+ * payloads are identical.
+ */
+export declare function countOverlaidFields(code: unknown, effective: unknown): number;
+export declare function LayeredDiff({ layered, loading, locale }: LayeredDiffProps): React.JSX.Element;

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

@@ -1,15 +1,181 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * LayeredDiff — visualizes how the runtime resolves a two-tier metadata item.
+ *
+ * Tabs:
+ *   • Diff (default) — field-level table comparing Code (artifact) vs
+ *     Effective (merged). Highlights modified / added / removed top-level
+ *     fields with color coding so admins can see at a glance what their
+ *     overlay actually changes.
+ *   • Code      — pretty-printed JSON of the artifact baseline.
+ *   • Overlay   — pretty-printed JSON of just the deltas they've saved.
+ *   • Effective — the merged value the runtime serves.
+ *
+ * Backed by `client.layered(type, name)` (Phase 3a `?layers=true`).
+ *
+ * Diff scope: top-level keys only. Nested objects/arrays are compared by
+ * JSON-stringify equality. Drilling into nested diffs is a future
+ * enhancement; the overlay deltas we ship in practice are flat.
+ */
+import * as React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@object-ui/components';
-import { Badge } from '@object-ui/components';
-export function LayeredDiff({ layered, loading }) {
+import { Badge, Switch } from '@object-ui/components';
+import { cn } from '@object-ui/components';
+import { t, tFormat } from './i18n';
+const STATUS_STYLE = {
+    unchanged: {
+        badge: 'bg-muted text-muted-foreground border border-border',
+        row: '',
+    },
+    modified: {
+        badge: 'bg-amber-100 text-amber-900 border border-amber-300 dark:bg-amber-950/60 dark:text-amber-200 dark:border-amber-800',
+        row: 'bg-amber-50/50 dark:bg-amber-950/20',
+    },
+    added: {
+        badge: 'bg-emerald-100 text-emerald-900 border border-emerald-300 dark:bg-emerald-950/60 dark:text-emerald-200 dark:border-emerald-800',
+        row: 'bg-emerald-50/50 dark:bg-emerald-950/20',
+    },
+    removed: {
+        badge: 'bg-rose-100 text-rose-900 border border-rose-300 dark:bg-rose-950/60 dark:text-rose-200 dark:border-rose-800',
+        row: 'bg-rose-50/50 dark:bg-rose-950/20',
+    },
+};
+export function computeDiffRows(code, effective) {
+    const codeObj = isPlainObject(code) ? code : {};
+    const effObj = isPlainObject(effective) ? effective : {};
+    const allKeys = new Set([
+        ...Object.keys(codeObj),
+        ...Object.keys(effObj),
+    ]);
+    const rows = [];
+    for (const key of allKeys) {
+        const inCode = key in codeObj;
+        const inEff = key in effObj;
+        const codeValue = codeObj[key];
+        const effectiveValue = effObj[key];
+        let status;
+        if (inCode && !inEff) {
+            status = 'removed';
+        }
+        else if (!inCode && inEff) {
+            status = 'added';
+        }
+        else if (stableStringify(codeValue) !== stableStringify(effectiveValue)) {
+            status = 'modified';
+        }
+        else {
+            status = 'unchanged';
+        }
+        rows.push({ key, status, codeValue, effectiveValue });
+    }
+    // Sort: changed first (modified, added, removed), then unchanged; alpha within each.
+    const order = {
+        modified: 0,
+        added: 1,
+        removed: 2,
+        unchanged: 3,
+    };
+    rows.sort((a, b) => {
+        if (order[a.status] !== order[b.status])
+            return order[a.status] - order[b.status];
+        return a.key.localeCompare(b.key);
+    });
+    return rows;
+}
+function isPlainObject(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+function stableStringify(v) {
+    try {
+        return JSON.stringify(v, (_k, val) => {
+            if (isPlainObject(val)) {
+                return Object.keys(val).sort().reduce((acc, k) => {
+                    acc[k] = val[k];
+                    return acc;
+                }, {});
+            }
+            return val;
+        });
+    }
+    catch {
+        return String(v);
+    }
+}
+function formatCell(v) {
+    if (v === undefined)
+        return '—';
+    if (v === null)
+        return 'null';
+    if (typeof v === 'string')
+        return v;
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v);
+    try {
+        return JSON.stringify(v);
+    }
+    catch {
+        return String(v);
+    }
+}
+/**
+ * Count of top-level fields where the overlay actually changes the
+ * effective value vs the artifact baseline. Used by the editor's
+ * Layers tab trigger to show e.g. "3 overlaid" next to the label.
+ *
+ * Returns 0 when there is no baseline (pure-runtime item) or the two
+ * payloads are identical.
+ */
+export function countOverlaidFields(code, effective) {
+    if (code == null)
+        return 0;
+    let n = 0;
+    for (const row of computeDiffRows(code, effective)) {
+        if (row.status !== 'unchanged')
+            n += 1;
+    }
+    return n;
+}
+export function LayeredDiff({ layered, loading, locale }) {
     if (loading) {
-        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading layers\u2026" }));
+        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: t('engine.edit.loading', locale) }));
     }
     if (!layered) {
-        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Layered view unavailable for this item." }));
+        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: t('engine.layers.diff.noBaseline', locale) }));
     }
     const hasOverlay = layered.overlay != null;
-    return (_jsxs(Tabs, { defaultValue: "effective", className: "w-full", children: [_jsxs(TabsList, { className: "grid grid-cols-3 w-fit", children: [_jsxs(TabsTrigger, { value: "code", children: ["Code", _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "artifact" })] }), _jsxs(TabsTrigger, { value: "overlay", children: ["Overlay", hasOverlay ? (_jsx(Badge, { className: "ml-1.5 text-[10px] bg-emerald-600 text-emerald-50", children: layered.overlayScope ?? 'set' })) : (_jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px] text-muted-foreground", children: "none" }))] }), _jsxs(TabsTrigger, { value: "effective", children: ["Effective", _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "merged" })] })] }), _jsx(TabsContent, { value: "code", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.code, emptyHint: "No code-level artifact for this item. It may have been created at runtime as a pure overlay." }) }), _jsx(TabsContent, { value: "overlay", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.overlay, emptyHint: "No overlay set. The runtime is using the code-level value as-is." }) }), _jsx(TabsContent, { value: "effective", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.effective, emptyHint: "No effective value resolved." }) })] }));
+    return (_jsxs(Tabs, { defaultValue: "diff", className: "w-full", children: [_jsxs(TabsList, { className: "grid grid-cols-4 w-fit", children: [_jsx(TabsTrigger, { value: "diff", children: t('engine.layers.diff', locale) }), _jsxs(TabsTrigger, { value: "code", children: [t('engine.layers.code', locale), _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "artifact" })] }), _jsxs(TabsTrigger, { value: "overlay", children: [t('engine.layers.overlay', locale), hasOverlay ? (_jsx(Badge, { className: "ml-1.5 text-[10px] bg-emerald-600 text-emerald-50", children: layered.overlayScope ?? 'set' })) : (_jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px] text-muted-foreground", children: "none" }))] }), _jsxs(TabsTrigger, { value: "effective", children: [t('engine.layers.effective', locale), _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "merged" })] })] }), _jsx(TabsContent, { value: "diff", className: "mt-3", children: _jsx(DiffTable, { code: layered.code, effective: layered.effective, locale: locale }) }), _jsx(TabsContent, { value: "code", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.code, emptyHint: t('engine.layers.diff.noBaseline', locale) }) }), _jsx(TabsContent, { value: "overlay", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.overlay, emptyHint: t('engine.layers.diff.noChanges', locale) }) }), _jsx(TabsContent, { value: "effective", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.effective, emptyHint: "No effective value resolved." }) })] }));
+}
+function DiffTable({ code, effective, locale, }) {
+    const [showUnchanged, setShowUnchanged] = React.useState(false);
+    // No baseline = pure runtime overlay; the diff table has nothing to compare.
+    if (code == null) {
+        return (_jsx("div", { className: "rounded border bg-muted/30 p-4 text-xs text-muted-foreground", children: t('engine.layers.diff.noBaseline', locale) }));
+    }
+    const rows = React.useMemo(() => computeDiffRows(code, effective), [code, effective]);
+    const counts = React.useMemo(() => {
+        return rows.reduce((acc, r) => {
+            acc[r.status] += 1;
+            return acc;
+        }, { unchanged: 0, modified: 0, added: 0, removed: 0 });
+    }, [rows]);
+    const visibleRows = showUnchanged
+        ? rows
+        : rows.filter((r) => r.status !== 'unchanged');
+    const hasAnyChange = counts.modified > 0 || counts.added > 0 || counts.removed > 0;
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: tFormat('engine.layers.diff.summary', locale, {
+                            modified: counts.modified,
+                            added: counts.added,
+                            removed: counts.removed,
+                        }) }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground cursor-pointer select-none", children: [_jsx(Switch, { checked: showUnchanged, onCheckedChange: setShowUnchanged, "aria-label": t('engine.layers.diff.showUnchanged', locale) }), t('engine.layers.diff.showUnchanged', locale), _jsx(Badge, { variant: "outline", className: "ml-1 text-[10px]", children: counts.unchanged })] })] }), !hasAnyChange && !showUnchanged ? (_jsx("div", { className: "rounded border bg-muted/30 p-4 text-xs text-muted-foreground", children: t('engine.layers.diff.noChanges', locale) })) : (_jsxs("div", { className: "rounded border overflow-hidden", children: [_jsxs("div", { className: "grid grid-cols-[minmax(140px,1fr)_minmax(160px,1.4fr)_minmax(160px,1.4fr)_auto] bg-muted/50 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [_jsx("div", { className: "px-3 py-2", children: t('engine.layers.diff.field', locale) }), _jsx("div", { className: "px-3 py-2", children: t('engine.layers.diff.code', locale) }), _jsx("div", { className: "px-3 py-2", children: t('engine.layers.diff.effective', locale) }), _jsx("div", { className: "px-3 py-2", children: t('engine.layers.diff.status', locale) })] }), _jsx("div", { className: "divide-y", children: visibleRows.map((row) => {
+                            const style = STATUS_STYLE[row.status];
+                            return (_jsxs("div", { className: cn('grid grid-cols-[minmax(140px,1fr)_minmax(160px,1.4fr)_minmax(160px,1.4fr)_auto] text-xs', style.row), children: [_jsx("div", { className: "px-3 py-2 font-mono text-foreground truncate", title: row.key, children: row.key }), _jsx(DiffValueCell, { value: row.codeValue, muted: row.status === 'added' }), _jsx(DiffValueCell, { value: row.effectiveValue, muted: row.status === 'removed' }), _jsx("div", { className: "px-3 py-2", children: _jsx("span", { className: cn('inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium', style.badge), children: t(`engine.layers.diff.${row.status}`, locale) }) })] }, row.key));
+                        }) })] }))] }));
+}
+function DiffValueCell({ value, muted }) {
+    const text = formatCell(value);
+    const isMissing = value === undefined;
+    return (_jsx("div", { className: cn('px-3 py-2 font-mono break-all', muted || isMissing ? 'text-muted-foreground italic' : 'text-foreground'), title: text.length > 200 ? text : undefined, children: text.length > 200 ? `${text.slice(0, 200)}…` : text }));
 }
 function LayerPanel({ payload, emptyHint, }) {
     if (payload == null) {

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

@@ -1,3 +1,17 @@
+/**
+ * MetadataDetailDrawer — slide-over editor for a related metadata item.
+ *
+ * Opens from the parent's Related tab without taking the user away
+ * from the parent's context. Internally we mount the same
+ * `MetadataResourceEditPage` used by the full-page route, so all the
+ * Save / Reset / Validate behaviour is shared. The drawer just frames
+ * it and adds a "Open full page ↗" affordance.
+ *
+ * Width is wide enough for forms (max 1100px) but capped at 92vw to
+ * leave a thin strip of the parent visible behind, reinforcing the
+ * "still in the same object" feel.
+ */
+import * as React from 'react';
 import type { RelatedTarget } from './RelatedPanel';
 export interface MetadataDetailDrawerProps {
     /** When non-null, drawer is open and shows this target. */
@@ -10,4 +24,4 @@ export interface MetadataDetailDrawerProps {
         name: string;
     };
 }
-export declare function MetadataDetailDrawer({ target, onClose, parentContext, }: MetadataDetailDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataDetailDrawer({ target, onClose, parentContext, }: MetadataDetailDrawerProps): React.JSX.Element;

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

@@ -0,0 +1,48 @@
+/**
+ * `MetadataTypeActions` — renders the declarative, **type-level** actions a
+ * metadata type carries (GAP-1) using the same button affordance business
+ * objects use for their `actions`.
+ *
+ * The framework's `/meta/types` endpoint emits these on each rich entry as
+ * spec `ActionSchema` objects (see `MetadataTypeAction` in `useMetadata`).
+ * The canonical first consumer is the `datasource` type, which declares a
+ * "Test connection" action (`type:'api'`, `POST
+ * /api/v1/datasources/${ctx.recordId}/test`). Rendering happens in two
+ * chrome slots:
+ *
+ *   • ResourceEditPage  → `location='record_header'`, `recordId` = item name.
+ *   • ResourceListPage  → `location='list_toolbar'` (no recordId).
+ *
+ * Execution path mirrors ObjectView's auth-aware `apiHandler` rather than the
+ * core ActionRunner's bare `fetch`: the metadata API endpoints require the
+ * better-auth session cookie + bearer token, which only ride along through
+ * `createAuthenticatedFetch` (and matter in split-origin dev where the SPA is
+ * on :5180 and the backend on :3000). `${ctx.recordId}` / `${param.X}` tokens
+ * in `target` are resolved here, exactly as the spec mandates renderers do.
+ *
+ * Dialogs: actions that declare an array of `params` collect them from the
+ * user in the shared {@link ActionParamDialog} before running (same UX as
+ * business-object actions); actions that declare a `resultDialog` render the
+ * API response in {@link ActionResultDialog}. `confirmText` still gates the run.
+ *
+ * Only `type:'api'` is wired today; other types surface a toast so a
+ * misconfigured action fails loud instead of silent.
+ */
+import * as React from 'react';
+import type { RichMetadataTypeEntry } from './useMetadata';
+export interface MetadataTypeActionsProps {
+    /** The rich type entry whose `actions` to render. */
+    entry?: Pick<RichMetadataTypeEntry, 'actions'> | undefined;
+    /** Which chrome slot is asking — actions are filtered by their `locations`. */
+    location: string;
+    /** Current item name, exposed to actions as `${ctx.recordId}`. */
+    recordId?: string;
+    /** Called after a successful action when `refreshAfter` is set. */
+    onAfter?: () => void;
+}
+/**
+ * Render the location-filtered type-level actions. Returns `null` when the
+ * type declares none for this slot, so callers can drop it straight into an
+ * existing toolbar `<>…</>` without conditionals.
+ */
+export declare function MetadataTypeActions({ entry, location, recordId, onAfter }: MetadataTypeActionsProps): React.ReactElement | null;

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * `MetadataTypeActions` — renders the declarative, **type-level** actions a
+ * metadata type carries (GAP-1) using the same button affordance business
+ * objects use for their `actions`.
+ *
+ * The framework's `/meta/types` endpoint emits these on each rich entry as
+ * spec `ActionSchema` objects (see `MetadataTypeAction` in `useMetadata`).
+ * The canonical first consumer is the `datasource` type, which declares a
+ * "Test connection" action (`type:'api'`, `POST
+ * /api/v1/datasources/${ctx.recordId}/test`). Rendering happens in two
+ * chrome slots:
+ *
+ *   • ResourceEditPage  → `location='record_header'`, `recordId` = item name.
+ *   • ResourceListPage  → `location='list_toolbar'` (no recordId).
+ *
+ * Execution path mirrors ObjectView's auth-aware `apiHandler` rather than the
+ * core ActionRunner's bare `fetch`: the metadata API endpoints require the
+ * better-auth session cookie + bearer token, which only ride along through
+ * `createAuthenticatedFetch` (and matter in split-origin dev where the SPA is
+ * on :5180 and the backend on :3000). `${ctx.recordId}` / `${param.X}` tokens
+ * in `target` are resolved here, exactly as the spec mandates renderers do.
+ *
+ * Dialogs: actions that declare an array of `params` collect them from the
+ * user in the shared {@link ActionParamDialog} before running (same UX as
+ * business-object actions); actions that declare a `resultDialog` render the
+ * API response in {@link ActionResultDialog}. `confirmText` still gates the run.
+ *
+ * Only `type:'api'` is wired today; other types surface a toast so a
+ * misconfigured action fails loud instead of silent.
+ */
+import * as React from 'react';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { createAuthenticatedFetch } from '@object-ui/auth';
+import { getIcon } from '../../utils/getIcon';
+import { ActionParamDialog } from '../ActionParamDialog';
+import { ActionResultDialog } from '../ActionResultDialog';
+/** Map the spec's action variants onto the Shadcn Button variants. */
+const VARIANT_MAP = {
+    primary: 'default',
+    secondary: 'secondary',
+    danger: 'destructive',
+    ghost: 'ghost',
+    link: 'link',
+};
+/**
+ * Substitute `${ctx.X}` / `${param.X}` tokens in an action target. Values are
+ * `encodeURIComponent`'d — opaque ids in a path segment (datasource name) are
+ * the only use today, and encoding is the correct behaviour for those.
+ */
+function interpolateTarget(target, ctx, params) {
+    if (target.indexOf('${') === -1)
+        return target;
+    return target.replace(/\$\{(param|ctx)\.([\w.]+)\}/g, (_m, scope, path) => {
+        const root = scope === 'param' ? params : ctx;
+        const value = path
+            .split('.')
+            .reduce((o, k) => (o == null ? undefined : o[k]), root);
+        return value == null ? '' : encodeURIComponent(String(value));
+    });
+}
+/**
+ * Render the location-filtered type-level actions. Returns `null` when the
+ * type declares none for this slot, so callers can drop it straight into an
+ * existing toolbar `<>…</>` without conditionals.
+ */
+export function MetadataTypeActions({ entry, location, recordId, onAfter }) {
+    const [busy, setBusy] = React.useState(null);
+    const [paramState, setParamState] = React.useState({ open: false, params: [] });
+    const [resultState, setResultState] = React.useState({ open: false });
+    const authFetch = React.useMemo(() => createAuthenticatedFetch(), []);
+    const actions = React.useMemo(() => (entry?.actions ?? []).filter((a) => !a.locations || a.locations.length === 0 || a.locations.includes(location)), [entry?.actions, location]);
+    if (actions.length === 0)
+        return null;
+    /** Open the param dialog and resolve with the collected values (or null on cancel). */
+    const collectParams = (params, title) => new Promise((resolve) => {
+        setParamState({ open: true, params, title, resolve });
+    });
+    const run = async (action) => {
+        const title = action.label ?? action.name;
+        // Only `type:'api'` is wired today. Default (`undefined`) is treated as
+        // `script` by the spec, which the engine cannot execute — fail loud.
+        if (action.type !== 'api') {
+            toast.error(`Action “${title}”: type "${action.type ?? 'script'}" is not supported here yet.`);
+            return;
+        }
+        if (action.confirmText && !window.confirm(action.confirmText))
+            return;
+        // Inputs: an array of param descriptors → collect in a dialog; a static
+        // object → forward as-is.
+        let params;
+        if (Array.isArray(action.params) && action.params.length > 0) {
+            const collected = await collectParams(action.params, title);
+            if (collected == null)
+                return; // user cancelled
+            params = collected;
+        }
+        else {
+            params = action.params ?? {};
+        }
+        const ctx = { recordId, origin: window.location.origin };
+        const resolved = interpolateTarget(action.target ?? '', ctx, params);
+        if (!resolved) {
+            toast.error(`Action “${title}” has no target.`);
+            return;
+        }
+        // Split SPA + backend dev: promote same-origin `/api/...` paths to the
+        // backend origin so the request (and its auth cookie) reaches :3000.
+        const apiBase = (import.meta.env?.VITE_SERVER_URL || '').replace(/\/+$/, '');
+        const url = /^https?:\/\//i.test(resolved) ? resolved : `${apiBase}${resolved}`;
+        const method = (action.method || 'POST').toUpperCase();
+        setBusy(action.name);
+        try {
+            const init = {
+                method,
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+            };
+            if (method !== 'GET' && method !== 'DELETE')
+                init.body = JSON.stringify(params);
+            const res = await authFetch(url, init);
+            let data = null;
+            try {
+                data = (await res.json());
+            }
+            catch {
+                /* non-JSON / empty body — fall back to status text */
+            }
+            if (!res.ok || (data && data.success === false)) {
+                const detail = data?.error || data?.message || `HTTP ${res.status} ${res.statusText}`.trim();
+                toast.error(`${action.errorMessage ? `${action.errorMessage}: ` : ''}${title}: ${detail}`);
+                return;
+            }
+            // Rich result reveal when declared, else a success toast.
+            if (action.resultDialog) {
+                setResultState({ open: true, spec: action.resultDialog, data: data ?? {} });
+            }
+            else {
+                const msg = action.successMessage || (typeof data?.message === 'string' ? data.message : `${title} ✓`);
+                toast.success(msg);
+            }
+            if (action.refreshAfter)
+                onAfter?.();
+        }
+        catch (err) {
+            toast.error(`${title}: ${err?.message ?? String(err)}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [actions.map((action) => {
+                const Icon = action.icon ? getIcon(action.icon) : null;
+                const isBusy = busy === action.name;
+                return (_jsxs(Button, { size: "sm", variant: VARIANT_MAP[action.variant ?? 'secondary'] ?? 'secondary', disabled: isBusy, onClick: () => run(action), title: action.label ?? action.name, children: [isBusy ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : Icon ? (_jsx(Icon, { className: "h-4 w-4 mr-1" })) : null, action.label ?? action.name] }, action.name));
+            }), _jsx(ActionParamDialog, { state: paramState, onOpenChange: (open) => {
+                    if (!open) {
+                        paramState.resolve?.(null);
+                        setParamState({ open: false, params: [] });
+                    }
+                } }), _jsx(ActionResultDialog, { state: resultState, onAcknowledge: () => setResultState({ open: false }) })] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * PackagesPage — the package management entry point for Studio.
+ *
+ * Studio previously exposed packages only through the sidebar `active_package`
+ * *filter* dropdown; there was no surface to see all packages, create one, or
+ * act on one (publish / revert / enable / disable). This page fills that gap.
+ *
+ * It is the authoring home for the Studio → package → publish workflow:
+ *   1. Create a package (POST /api/v1/packages with a minimal manifest).
+ *   2. Author metadata bound to it (via the sidebar scope + ResourceEditPage).
+ *   3. Publish it (POST /api/v1/packages/:id/publish).
+ *
+ * Backed entirely by the existing `/api/v1/packages` REST surface
+ * (see framework `http-dispatcher.handlePackages`).
+ */
+import * as React from 'react';
+export declare function PackagesPage(): React.JSX.Element;
+export default PackagesPage;