@object-ui/app-shell 6.2.3 → 7.1.0

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;

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

@@ -0,0 +1,403 @@
+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.
+/**
+ * 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';
+import { Link, useLocation } from 'react-router-dom';
+import { Package as PackageIcon, Plus, RefreshCw, Search, Upload, Download, FileUp, Undo2, Power, PowerOff, ExternalLink, AlertTriangle, Trash2, } from 'lucide-react';
+import { Button, Input, Badge, Switch, Label, Separator, Skeleton, Empty, EmptyTitle, EmptyDescription, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
+import { detectLocale, t, tFormat } from './i18n';
+const API = '/api/v1/packages';
+async function apiJson(path, init) {
+    const res = await fetch(path, {
+        credentials: 'include',
+        headers: { Accept: 'application/json', ...(init?.headers || {}) },
+        ...init,
+    });
+    const text = await res.text();
+    const payload = text ? JSON.parse(text) : null;
+    if (!res.ok || payload?.success === false) {
+        const msg = payload?.error?.message ||
+            payload?.error ||
+            payload?.message ||
+            `Request failed (${res.status})`;
+        throw new Error(typeof msg === 'string' ? msg : `Request failed (${res.status})`);
+    }
+    // Runtime wraps successful payloads in { data, ... } or returns the object directly.
+    return (payload?.data ?? payload);
+}
+/* -------------------------------------------------------------------------- */
+/* Scope badge                                                                 */
+/* -------------------------------------------------------------------------- */
+function ScopeBadge({ scope }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const s = scope ?? 'project';
+    const variant = s === 'project' ? 'default' : s === 'system' ? 'secondary' : 'outline';
+    const labelKey = s === 'project'
+        ? 'engine.packages.scope.project'
+        : s === 'system'
+            ? 'engine.packages.scope.system'
+            : s === 'cloud'
+                ? 'engine.packages.scope.cloud'
+                : '';
+    return _jsx(Badge, { variant: variant, children: labelKey ? t(labelKey, locale) : s });
+}
+function StatusBadge({ pkg }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const enabled = pkg.enabled !== false && pkg.status !== 'disabled';
+    return (_jsx(Badge, { variant: enabled ? 'default' : 'outline', children: enabled ? t('engine.packages.status.enabled', locale) : t('engine.packages.status.disabled', locale) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Create-package dialog                                                       */
+/* -------------------------------------------------------------------------- */
+const ID_RE = /^[a-z0-9][a-z0-9._-]{1,254}$/i;
+const VERSION_RE = /^\d+\.\d+\.\d+$/;
+function CreatePackageDialog({ open, onOpenChange, onCreated, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [id, setId] = React.useState('');
+    const [name, setName] = React.useState('');
+    const [version, setVersion] = React.useState('0.1.0');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        if (open) {
+            setId('');
+            setName('');
+            setVersion('0.1.0');
+            setError(null);
+            setBusy(false);
+        }
+    }, [open]);
+    const idValid = ID_RE.test(id);
+    const versionValid = VERSION_RE.test(version);
+    const canSubmit = idValid && versionValid && !!name.trim() && !busy;
+    async function submit() {
+        if (!canSubmit)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await apiJson(API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    manifest: {
+                        id: id.trim(),
+                        name: name.trim(),
+                        version: version.trim(),
+                        type: 'app',
+                        scope: 'project',
+                    },
+                }),
+            });
+            onCreated(id.trim());
+            // Let context selectors (e.g. the sidebar package switcher) pick up the
+            // new package without a full page reload.
+            try {
+                window.dispatchEvent(new CustomEvent('objectui:packages-changed'));
+            }
+            catch {
+                /* non-DOM env */
+            }
+            onOpenChange(false);
+        }
+        catch (e) {
+            setError(e?.message ?? t('engine.packages.create.failed', locale));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('engine.packages.create.title', locale) }), _jsx(DialogDescription, { children: tFormat('engine.packages.create.description', locale, { example: 'com.acme.crm' }) })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-id", children: t('engine.packages.create.id', locale) }), _jsx(Input, { id: "pkg-id", "data-testid": "package-id-input", placeholder: "com.acme.crm", value: id, onChange: (e) => setId(e.target.value), "aria-invalid": !!id && !idValid }), !!id && !idValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.idInvalid', locale) }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-name", children: t('engine.packages.create.name', locale) }), _jsx(Input, { id: "pkg-name", "data-testid": "package-name-input", placeholder: "Acme CRM", value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-version", children: t('engine.packages.create.version', locale) }), _jsx(Input, { id: "pkg-version", placeholder: "0.1.0", value: version, onChange: (e) => setVersion(e.target.value), "aria-invalid": !!version && !versionValid }), !!version && !versionValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.versionInvalid', locale) }))] }), error && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t('engine.cancel', locale) }), _jsx(Button, { onClick: submit, disabled: !canSubmit, children: busy ? t('engine.packages.create.creating', locale) : t('engine.packages.create.submit', locale) })] })] }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Detail sheet — manifest + lifecycle actions                                 */
+/* -------------------------------------------------------------------------- */
+function DetailRow({ label, children }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-4 py-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("span", { className: "text-sm font-medium text-right break-all", children: children })] }));
+}
+function PackageDetailSheet({ pkg, appBase, open, onOpenChange, onChanged, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [busy, setBusy] = React.useState(null);
+    const [msg, setMsg] = React.useState(null);
+    // ADR-0033 — pending DRAFT items bound to this package. AI-authored metadata
+    // lands as drafts that the active-only browsers hide, so without this the
+    // package looks empty right after a build. We list them here with a link to
+    // the existing per-item review/diff (?review=1) so the user can publish them.
+    const [drafts, setDrafts] = React.useState(null);
+    React.useEffect(() => {
+        setMsg(null);
+        setBusy(null);
+    }, [pkg?.manifest.id]);
+    React.useEffect(() => {
+        const pid = pkg?.manifest.id;
+        if (!open || !pid) {
+            setDrafts(null);
+            return;
+        }
+        let cancelled = false;
+        apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(pid)}`)
+            .then((r) => {
+            if (!cancelled)
+                setDrafts(r?.drafts ?? []);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setDrafts([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, pkg?.manifest.id]);
+    if (!pkg)
+        return null;
+    const id = pkg.manifest.id;
+    const enabled = pkg.enabled !== false && pkg.status !== 'disabled';
+    const isKernel = pkg.manifest.scope === 'system' || pkg.manifest.scope === 'cloud';
+    async function run(action, fn, okText) {
+        setBusy(action);
+        setMsg(null);
+        try {
+            await fn();
+            setMsg({ kind: 'ok', text: okText });
+            onChanged();
+        }
+        catch (e) {
+            setMsg({ kind: 'err', text: e?.message ?? t('engine.packages.detail.actionFailed', locale) });
+        }
+        finally {
+            setBusy(null);
+        }
+    }
+    const publish = () => run('publish', () => apiJson(`${API}/${encodeURIComponent(id)}/publish`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+    }).then((r) => {
+        if (r && r.success === false) {
+            const n = r.validationErrors?.length ?? 0;
+            throw new Error(n
+                ? tFormat('engine.packages.detail.publishBlocked', locale, { count: n })
+                : r.validationErrors?.[0]?.message || t('engine.packages.detail.nothingToPublish', locale));
+        }
+        return r;
+    }), t('engine.packages.detail.published', locale));
+    // ADR-0033 — publish every pending draft of this app in one shot, then
+    // refresh the pending list (it should now be empty). Distinct from the
+    // registry-based `publish` above; this hits `/publish-drafts`.
+    const publishDrafts = () => run('publish-drafts', () => apiJson(`${API}/${encodeURIComponent(id)}/publish-drafts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) }).then(async (r) => {
+        try {
+            const fresh = await apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(id)}`);
+            setDrafts(fresh?.drafts ?? []);
+        }
+        catch {
+            setDrafts([]);
+        }
+        if (r?.failedCount) {
+            throw new Error(tFormat('engine.packages.detail.publishDraftsPartial', locale, {
+                published: r.publishedCount ?? 0,
+                failed: r.failedCount,
+            }));
+        }
+        return r;
+    }), t('engine.packages.detail.publishDraftsOk', locale));
+    const revert = () => run('revert', () => apiJson(`${API}/${encodeURIComponent(id)}/revert`, { method: 'POST' }), t('engine.packages.detail.reverted', locale));
+    // ADR-0033 — discard every pending draft of this app in one shot, reverting
+    // it to the last published baseline. NON-destructive: published metadata and
+    // data are untouched. Distinct from the metadata-service `/revert` above —
+    // this hits the robust `/discard-drafts` (sys_metadata) path.
+    const discardDrafts = () => run('discard-drafts', () => apiJson(`${API}/${encodeURIComponent(id)}/discard-drafts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) }).then(async (r) => {
+        try {
+            const fresh = await apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(id)}`);
+            setDrafts(fresh?.drafts ?? []);
+        }
+        catch {
+            setDrafts([]);
+        }
+        if (r?.failedCount) {
+            throw new Error(tFormat('engine.packages.detail.discardDraftsPartial', locale, {
+                discarded: r.discardedCount ?? 0,
+                failed: r.failedCount,
+            }));
+        }
+        return r;
+    }), t('engine.packages.detail.discardDraftsOk', locale));
+    // ADR-0033 — delete the WHOLE package: every metadata row (active + draft)
+    // plus each object's physical table (DESTRUCTIVE). Confirmed, then closes the
+    // sheet on success. Errors stay visible (sheet kept open).
+    const deleteApp = async () => {
+        const ok = window.confirm(tFormat('engine.packages.detail.deleteConfirm', locale, { name: pkg?.manifest.name || id }));
+        if (!ok)
+            return;
+        setBusy('delete');
+        setMsg(null);
+        try {
+            await apiJson(`${API}/${encodeURIComponent(id)}`, { method: 'DELETE' });
+            onChanged();
+            onOpenChange(false);
+        }
+        catch (e) {
+            setMsg({ kind: 'err', text: e?.message ?? t('engine.packages.detail.deleteFailed', locale) });
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const toggleEnable = () => run('toggle', () => apiJson(`${API}/${encodeURIComponent(id)}/${enabled ? 'disable' : 'enable'}`, {
+        method: 'PATCH',
+    }), enabled ? t('engine.packages.detail.disabled', locale) : t('engine.packages.detail.enabled', locale));
+    const exportPkg = () => run('export', async () => {
+        const manifest = await apiJson(`${API}/${encodeURIComponent(id)}/export`);
+        const blob = new Blob([JSON.stringify(manifest, null, 2)], {
+            type: 'application/json',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${id}.package.json`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }, t('engine.packages.detail.exported', locale));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "w-full sm:max-w-md overflow-y-auto", children: [_jsxs(SheetHeader, { children: [_jsxs(SheetTitle, { className: "flex items-center gap-2", children: [_jsx(PackageIcon, { className: "h-4 w-4" }), pkg.manifest.name || id] }), _jsx(SheetDescription, { className: "font-mono text-xs", children: id })] }), _jsxs("div", { className: "mt-4", children: [_jsx(DetailRow, { label: t('engine.packages.col.version', locale), children: pkg.manifest.version || '—' }), _jsx(DetailRow, { label: t('engine.packages.detail.type', locale), children: pkg.manifest.type || '—' }), _jsx(DetailRow, { label: t('engine.packages.col.scope', locale), children: _jsx(ScopeBadge, { scope: pkg.manifest.scope }) }), _jsx(DetailRow, { label: t('engine.packages.col.status', locale), children: _jsx(StatusBadge, { pkg: pkg }) }), pkg.manifest.description && (_jsx(DetailRow, { label: t('engine.packages.detail.description', locale), children: pkg.manifest.description }))] }), _jsx(Separator, { className: "my-4" }), _jsxs(Link, { to: `${appBase}/metadata/object?package=${encodeURIComponent(id)}`, className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline", onClick: () => onOpenChange(false), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t('engine.packages.detail.browseMetadata', locale)] }), drafts && drafts.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [t('engine.packages.detail.pendingChanges', locale), _jsx(Badge, { variant: "secondary", children: drafts.length })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('engine.packages.detail.pendingHint', locale) }), !isKernel && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", onClick: publishDrafts, disabled: !!busy, children: [_jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'publish-drafts'
+                                                    ? t('engine.packages.detail.publishing', locale)
+                                                    : tFormat('engine.packages.detail.publishApp', locale, { count: drafts.length })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: discardDrafts, disabled: !!busy, children: [_jsx(Undo2, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'discard-drafts'
+                                                    ? t('engine.packages.detail.discarding', locale)
+                                                    : tFormat('engine.packages.detail.discardChanges', locale, { count: drafts.length })] })] })), _jsx("ul", { className: "space-y-1", children: drafts.map((d) => (_jsx("li", { children: _jsxs(Link, { to: `${appBase}/metadata/${encodeURIComponent(d.type)}/${encodeURIComponent(d.name)}?review=1`, className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline", onClick: () => onOpenChange(false), children: [_jsx(FileUp, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "font-mono text-xs", children: d.type }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), d.name] }) }, `${d.type}/${d.name}`))) })] })] })), _jsx(Separator, { className: "my-4" }), isKernel ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('engine.packages.detail.kernelReadOnly', locale) })) : (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.packages.detail.actions', locale) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", onClick: publish, disabled: !!busy, children: [_jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'publish' ? t('engine.packages.detail.publishing', locale) : t('engine.packages.detail.publish', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: revert, disabled: !!busy, children: [_jsx(Undo2, { className: "mr-1.5 h-3.5 w-3.5" }), t('engine.packages.detail.revert', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: toggleEnable, disabled: !!busy, children: [enabled ? (_jsx(PowerOff, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Power, { className: "mr-1.5 h-3.5 w-3.5" })), enabled ? t('engine.packages.detail.disable', locale) : t('engine.packages.detail.enable', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: exportPkg, disabled: !!busy, children: [_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'export' ? t('engine.packages.detail.exporting', locale) : t('engine.packages.detail.export', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: deleteApp, disabled: !!busy, className: "text-destructive hover:bg-destructive/10 hover:text-destructive", children: [_jsx(Trash2, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'delete' ? t('engine.packages.detail.deleting', locale) : t('engine.packages.detail.deleteApp', locale)] })] })] })), msg && (_jsx("div", { className: `mt-4 rounded-md border p-2 text-sm ${msg.kind === 'ok'
+                        ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+                        : 'border-destructive/40 bg-destructive/10 text-destructive'}`, children: msg.text }))] }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Main page                                                                   */
+/* -------------------------------------------------------------------------- */
+export function PackagesPage() {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const { pathname } = useLocation();
+    // App base = path up to (and excluding) `/component/...`, so links to
+    // `/apps/:app/metadata/...` work regardless of nesting.
+    const appBase = React.useMemo(() => {
+        const idx = pathname.indexOf('/component');
+        return idx >= 0 ? pathname.slice(0, idx) : pathname;
+    }, [pathname]);
+    const [packages, setPackages] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    const [showKernel, setShowKernel] = React.useState(false);
+    const [createOpen, setCreateOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(null);
+    const [detailOpen, setDetailOpen] = React.useState(false);
+    const fileRef = React.useRef(null);
+    const [importing, setImporting] = React.useState(false);
+    const [importMsg, setImportMsg] = React.useState(null);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await apiJson(API);
+            const list = Array.isArray(data?.packages) ? data.packages : [];
+            list.sort((a, b) => {
+                // User (project) packages first, then by name.
+                const sa = a.manifest.scope === 'project' ? 0 : 1;
+                const sb = b.manifest.scope === 'project' ? 0 : 1;
+                if (sa !== sb)
+                    return sa - sb;
+                return (a.manifest.name || a.manifest.id).localeCompare(b.manifest.name || b.manifest.id);
+            });
+            setPackages(list);
+        }
+        catch (e) {
+            setError(e?.message ?? t('engine.packages.loadFailed', locale));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [locale]);
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    // Keep the open detail sheet in sync with refreshed data.
+    React.useEffect(() => {
+        if (!selected)
+            return;
+        const fresh = packages.find((p) => p.manifest.id === selected.manifest.id);
+        if (fresh && fresh !== selected)
+            setSelected(fresh);
+    }, [packages, selected]);
+    const filtered = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return packages.filter((p) => {
+            const kernel = p.manifest.scope === 'system' || p.manifest.scope === 'cloud';
+            if (kernel && !showKernel)
+                return false;
+            if (!q)
+                return true;
+            return (p.manifest.id.toLowerCase().includes(q) ||
+                (p.manifest.name || '').toLowerCase().includes(q));
+        });
+    }, [packages, query, showKernel]);
+    const openDetail = (pkg) => {
+        setSelected(pkg);
+        setDetailOpen(true);
+    };
+    const onImportFile = async (e) => {
+        const file = e.target.files?.[0];
+        e.target.value = ''; // allow re-selecting the same file
+        if (!file)
+            return;
+        setImporting(true);
+        setImportMsg(null);
+        try {
+            const text = await file.text();
+            let manifest;
+            try {
+                manifest = JSON.parse(text);
+            }
+            catch {
+                throw new Error(t('engine.packages.import.invalidJson', locale));
+            }
+            if (!manifest || typeof manifest !== 'object' || (!manifest.id && !manifest.name)) {
+                throw new Error(t('engine.packages.import.invalidPackage', locale));
+            }
+            const res = await apiJson('/api/v1/marketplace/install-local', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ manifest }),
+            });
+            setImportMsg({
+                kind: 'ok',
+                text: tFormat('engine.packages.import.success', locale, { id: res?.manifestId ?? manifest.id }),
+            });
+            await load();
+        }
+        catch (err) {
+            setImportMsg({ kind: 'err', text: err?.message ?? t('engine.packages.import.failed', locale) });
+        }
+        finally {
+            setImporting(false);
+        }
+    };
+    const kernelCount = packages.filter((p) => p.manifest.scope === 'system' || p.manifest.scope === 'cloud').length;
+    return (_jsxs("div", { className: "mx-auto w-full max-w-5xl px-6 py-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "rounded-lg bg-primary/10 p-2 text-primary", children: _jsx(PackageIcon, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight", children: t('engine.packages.title', locale) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('engine.packages.description', locale) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}` }), t('engine.packages.refresh', locale)] }), _jsx("input", { ref: fileRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onImportFile }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileRef.current?.click(), disabled: importing, children: [_jsx(FileUp, { className: "mr-1.5 h-3.5 w-3.5" }), importing ? t('engine.packages.importing', locale) : t('engine.packages.import', locale)] }), _jsxs(Button, { size: "sm", onClick: () => setCreateOpen(true), children: [_jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }), t('engine.packages.new', locale)] })] })] }), importMsg && (_jsx("div", { className: `mt-4 rounded-md border p-2 text-sm ${importMsg.kind === 'ok'
+                    ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+                    : 'border-destructive/40 bg-destructive/10 text-destructive'}`, children: importMsg.text })), _jsxs("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-xs", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.packages.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), kernelCount > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-kernel", checked: showKernel, onCheckedChange: setShowKernel }), _jsx(Label, { htmlFor: "show-kernel", className: "text-sm text-muted-foreground", children: tFormat('engine.packages.showPlatform', locale, { count: kernelCount }) })] }))] }), _jsx("div", { className: "mt-4 rounded-lg border", children: loading ? (_jsx("div", { className: "space-y-2 p-4", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })) : error ? (_jsxs("div", { className: "flex items-start gap-2 p-4 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] })) : filtered.length === 0 ? (_jsx("div", { className: "p-8", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('engine.packages.empty', locale) }), _jsx(EmptyDescription, { children: packages.length === 0
+                                    ? t('engine.packages.emptyCreate', locale)
+                                    : t('engine.packages.emptyFiltered', locale) })] }) })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('engine.packages.col.name', locale) }), _jsx(TableHead, { children: "ID" }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.version', locale) }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.scope', locale) }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.status', locale) })] }) }), _jsx(TableBody, { children: filtered.map((p) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => openDetail(p), children: [_jsx(TableCell, { className: "font-medium", children: p.manifest.name || p.manifest.id }), _jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: p.manifest.id }), _jsx(TableCell, { children: p.manifest.version || '—' }), _jsx(TableCell, { children: _jsx(ScopeBadge, { scope: p.manifest.scope }) }), _jsx(TableCell, { children: _jsx(StatusBadge, { pkg: p }) })] }, p.manifest.id))) })] })) }), _jsx(CreatePackageDialog, { open: createOpen, onOpenChange: setCreateOpen, onCreated: async () => {
+                    await load();
+                } }), _jsx(PackageDetailSheet, { pkg: selected, appBase: appBase, open: detailOpen, onOpenChange: setDetailOpen, onChanged: () => void load() })] }));
+}
+export default PackagesPage;

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

@@ -31,4 +31,4 @@ export interface PageShellProps {
     /** Page body. */
     children: React.ReactNode;
 }
-export declare function PageShell({ entry, itemName, subtitle, stats, actions, children, }: PageShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageShell({ entry, itemName, subtitle, stats, actions, children, }: PageShellProps): React.JSX.Element;