@object-ui/app-shell 6.2.2 → 7.0.0

package/dist/views/metadata-admin/datasource/DatasourceResourcePage.js

@@ -0,0 +1,327 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DatasourceResourcePage — the `datasource` metadata type's custom ListPage,
+ * registered into the metadata-admin engine (`registerMetadataResource`) and
+ * reached via the engine route `…/component/metadata/resource?type=datasource`
+ * (and the setup left-nav "Datasources" item → `system/metadata/datasource`).
+ *
+ * datasource is a *side-effectful* metadata type: its records are managed by
+ * the framework `datasource-admin` service (secret encryption + connection-pool
+ * registration + origin gating), so create/edit/delete + test go through that
+ * service's REST (`/api/v1/datasources/*`) rather than the generic sys_metadata
+ * write path. The engine still owns the route, shell, and registry slot.
+ *
+ * Capabilities:
+ *  - **List** datasources (driver/status/origin).
+ *  - **Create / edit** a connection with a typed form generated from the
+ *    selected driver's JSON-Schema `configSchema` (`GET /datasources/drivers`).
+ *    Credential fields (`format: 'password'`) are routed to the top-level
+ *    `secret` so they are encrypted into `sys_secret` and never persisted in
+ *    `config` metadata. Edit prefills from `GET /datasources/:name` (which
+ *    returns `config` + a `hasSecret` flag, never the credential itself).
+ *  - **Test** a connection (saved → `POST …/:name/test`; draft in the editor →
+ *    `POST …/test`).
+ *  - **Sync objects**: introspect remote tables (`GET …/remote-tables`), pick
+ *    which to import, generate an object definition for each (`POST …/object-draft`),
+ *    and create it through the normal metadata channel (`MetadataClient.save('object', …)`).
+ *  - **Delete** a runtime datasource (`DELETE …/:name`; blocked by the backend
+ *    while objects are still bound).
+ *
+ * Code-defined (`origin: 'code'`) datasources are read-only: edit/delete are
+ * hidden for them.
+ */
+import * as React from 'react';
+import { toast } from 'sonner';
+import { Loader2, Database, RefreshCw, Plug, Boxes, Plus, Pencil, Trash2, CheckCircle2, XCircle, } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Input, Label, Switch, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, } from '@object-ui/components';
+import { createAuthenticatedFetch } from '@object-ui/auth';
+import { useMetadataClient } from '../useMetadata';
+const SCHEMA_MODES = [
+    { value: 'managed', label: 'Managed (ObjectStack owns the schema)' },
+    { value: 'external', label: 'External (read existing schema as-is)' },
+    { value: 'validate-only', label: 'Validate only' },
+];
+const SERVER = (import.meta.env?.VITE_SERVER_URL || '').replace(/\/+$/, '');
+const isPassword = (p) => p.format === 'password';
+/** Build the default config (password props excluded — they live in `secret`). */
+function defaultConfig(driver) {
+    const props = driver?.configSchema?.properties ?? {};
+    const cfg = {};
+    for (const [key, prop] of Object.entries(props)) {
+        if (isPassword(prop))
+            continue;
+        if (prop.default !== undefined)
+            cfg[key] = prop.default;
+    }
+    return cfg;
+}
+export function DatasourceResourcePage(_props) {
+    const authFetch = React.useMemo(() => createAuthenticatedFetch(), []);
+    const metaClient = useMetadataClient();
+    const [rows, setRows] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [busy, setBusy] = React.useState(null);
+    const api = React.useCallback(async (path, init) => {
+        const res = await authFetch(`${SERVER}${path}`, { credentials: 'include', headers: { 'Content-Type': 'application/json' }, ...init });
+        const text = await res.text();
+        let body = text;
+        try {
+            body = JSON.parse(text);
+        }
+        catch { /* keep text */ }
+        if (!res.ok)
+            throw new Error((body && (body.message || body.error)) || `HTTP ${res.status}`);
+        return body;
+    }, [authFetch]);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        try {
+            const data = await api('/api/v1/datasources');
+            setRows(Array.isArray(data?.datasources) ? data.datasources : []);
+        }
+        catch (err) {
+            toast.error(`Load datasources: ${err.message}`);
+            setRows([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [api]);
+    React.useEffect(() => { void load(); }, [load]);
+    const test = async (name) => {
+        setBusy(`test:${name}`);
+        try {
+            const r = await api(`/api/v1/datasources/${encodeURIComponent(name)}/test`, { method: 'POST', body: '{}' });
+            toast.success(r?.ok === false ? `${name}: ${r?.error ?? 'failed'}` : `${name}: connection ok${r?.latencyMs != null ? ` (${r.latencyMs}ms)` : ''}`);
+            void load();
+        }
+        catch (err) {
+            toast.error(`${name}: ${err.message}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const remove = async (name) => {
+        if (!window.confirm(`Delete datasource “${name}”? This cannot be undone.`))
+            return;
+        setBusy(`del:${name}`);
+        try {
+            await api(`/api/v1/datasources/${encodeURIComponent(name)}`, { method: 'DELETE' });
+            toast.success(`Deleted ${name}.`);
+            void load();
+        }
+        catch (err) {
+            toast.error(`Delete ${name}: ${err.message}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    // ── Connection editor (create / edit) ─────────────────────────────────────
+    const [drivers, setDrivers] = React.useState([]);
+    const [editorOpen, setEditorOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [form, setForm] = React.useState(null);
+    const [hasSecret, setHasSecret] = React.useState(false);
+    const [savingEditor, setSavingEditor] = React.useState(false);
+    const [testMsg, setTestMsg] = React.useState(null);
+    const [testingDraft, setTestingDraft] = React.useState(false);
+    const ensureDrivers = React.useCallback(async () => {
+        if (drivers.length)
+            return drivers;
+        try {
+            const data = await api('/api/v1/datasources/drivers');
+            const list = Array.isArray(data?.drivers) ? data.drivers : [];
+            setDrivers(list);
+            return list;
+        }
+        catch (err) {
+            toast.error(`Load drivers: ${err.message}`);
+            return [];
+        }
+    }, [api, drivers]);
+    const selectedDriver = React.useMemo(() => drivers.find((d) => d.id === form?.driver), [drivers, form?.driver]);
+    const openCreate = async () => {
+        const list = await ensureDrivers();
+        const first = list.find((d) => d.id !== 'memory') ?? list[0];
+        setEditing(null);
+        setHasSecret(false);
+        setTestMsg(null);
+        setForm({
+            name: '',
+            label: '',
+            driver: first?.id ?? '',
+            schemaMode: 'managed',
+            config: defaultConfig(first),
+            secret: '',
+        });
+        setEditorOpen(true);
+    };
+    const openEdit = async (row) => {
+        const list = await ensureDrivers();
+        setBusy(`edit:${row.name}`);
+        try {
+            const data = await api(`/api/v1/datasources/${encodeURIComponent(row.name)}`);
+            const ds = data?.datasource ?? {};
+            setEditing(row.name);
+            setHasSecret(Boolean(ds.hasSecret));
+            setTestMsg(null);
+            setForm({
+                name: ds.name ?? row.name,
+                label: ds.label ?? '',
+                driver: ds.driver ?? row.driver ?? (list[0]?.id ?? ''),
+                schemaMode: ds.schemaMode ?? 'managed',
+                config: { ...(ds.config ?? {}) },
+                secret: '',
+            });
+            setEditorOpen(true);
+        }
+        catch (err) {
+            toast.error(`Open ${row.name}: ${err.message}`);
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const onDriverChange = (id) => {
+        setForm((f) => (f ? { ...f, driver: id, config: defaultConfig(drivers.find((d) => d.id === id)), secret: '' } : f));
+        setTestMsg(null);
+    };
+    const setConfigValue = (key, value) => setForm((f) => (f ? { ...f, config: { ...f.config, [key]: value } } : f));
+    /** Assemble the request body, splitting the credential into `secret`. */
+    const draftBody = (f) => {
+        const body = {
+            label: f.label || undefined,
+            driver: f.driver,
+            schemaMode: f.schemaMode,
+            config: f.config,
+        };
+        if (f.secret)
+            body.secret = f.secret;
+        return body;
+    };
+    const testDraft = async () => {
+        if (!form)
+            return;
+        setTestingDraft(true);
+        setTestMsg(null);
+        try {
+            const r = await api('/api/v1/datasources/test', { method: 'POST', body: JSON.stringify({ driver: form.driver, config: form.config, ...(form.secret ? { secret: form.secret } : {}) }) });
+            const res = r?.result ?? r;
+            if (res?.ok === false)
+                setTestMsg({ ok: false, text: res?.error ?? 'Connection failed' });
+            else
+                setTestMsg({ ok: true, text: `Connection ok${res?.latencyMs != null ? ` (${res.latencyMs}ms)` : ''}` });
+        }
+        catch (err) {
+            setTestMsg({ ok: false, text: err.message });
+        }
+        finally {
+            setTestingDraft(false);
+        }
+    };
+    const saveEditor = async () => {
+        if (!form)
+            return;
+        setSavingEditor(true);
+        try {
+            if (editing) {
+                await api(`/api/v1/datasources/${encodeURIComponent(editing)}`, { method: 'PATCH', body: JSON.stringify(draftBody(form)) });
+                toast.success(`Updated ${editing}.`);
+            }
+            else {
+                await api('/api/v1/datasources', { method: 'POST', body: JSON.stringify({ name: form.name, ...draftBody(form) }) });
+                toast.success(`Created ${form.name}.`);
+            }
+            setEditorOpen(false);
+            void load();
+        }
+        catch (err) {
+            toast.error(`Save: ${err.message}`);
+        }
+        finally {
+            setSavingEditor(false);
+        }
+    };
+    const nameValid = editing ? true : /^[a-z_][a-z0-9_]*$/.test(form?.name ?? '');
+    const canSave = !!form && !!form.driver && nameValid && !savingEditor;
+    // ── Sync dialog ──────────────────────────────────────────────────────────
+    const [syncName, setSyncName] = React.useState(null);
+    const [tables, setTables] = React.useState(null);
+    const [selected, setSelected] = React.useState(new Set());
+    const [syncing, setSyncing] = React.useState(false);
+    const openSync = async (name) => {
+        setSyncName(name);
+        setTables(null);
+        setSelected(new Set());
+        try {
+            const data = await api(`/api/v1/datasources/${encodeURIComponent(name)}/remote-tables`);
+            setTables(Array.isArray(data?.tables) ? data.tables : []);
+        }
+        catch (err) {
+            toast.error(`Introspect ${name}: ${err.message}`);
+            setTables([]);
+        }
+    };
+    const toggle = (t) => setSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(t))
+            next.delete(t);
+        else
+            next.add(t);
+        return next;
+    });
+    const runSync = async () => {
+        if (!syncName || selected.size === 0)
+            return;
+        setSyncing(true);
+        let ok = 0;
+        const failures = [];
+        for (const table of selected) {
+            try {
+                const { draft } = await api(`/api/v1/datasources/${encodeURIComponent(syncName)}/object-draft`, {
+                    method: 'POST',
+                    body: JSON.stringify({ table }),
+                });
+                await metaClient.save('object', draft.name, draft.definition);
+                ok += 1;
+            }
+            catch (err) {
+                failures.push(`${table}: ${err.message}`);
+            }
+        }
+        setSyncing(false);
+        if (ok)
+            toast.success(`Synced ${ok} object${ok > 1 ? 's' : ''} from ${syncName}.`);
+        if (failures.length)
+            toast.error(`Failed: ${failures.join('; ')}`);
+        setSyncName(null);
+    };
+    const renderField = (key, prop) => {
+        const label = prop.title || key;
+        const required = (selectedDriver?.configSchema?.required ?? []).includes(key);
+        if (isPassword(prop)) {
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [label, required && !editing ? ' *' : ''] }), _jsx(Input, { type: "password", value: form?.secret ?? '', placeholder: editing && hasSecret ? '•••••••• (leave blank to keep)' : '', onChange: (e) => setForm((f) => (f ? { ...f, secret: e.target.value } : f)) }), prop.description && _jsx("p", { className: "text-[11px] text-muted-foreground", children: prop.description })] }, key));
+        }
+        const value = form?.config[key];
+        if (prop.type === 'boolean') {
+            return (_jsxs("div", { className: "flex items-center justify-between gap-2 py-1", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: label }), prop.description && _jsx("p", { className: "text-[11px] text-muted-foreground", children: prop.description })] }), _jsx(Switch, { checked: Boolean(value), onCheckedChange: (c) => setConfigValue(key, c) })] }, key));
+        }
+        if (Array.isArray(prop.enum)) {
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [label, required ? ' *' : ''] }), _jsxs(Select, { value: value != null ? String(value) : '', onValueChange: (v) => setConfigValue(key, v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: prop.enum.map((opt) => _jsx(SelectItem, { value: String(opt), children: String(opt) }, String(opt))) })] })] }, key));
+        }
+        const isNum = prop.type === 'number' || prop.type === 'integer';
+        return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [label, required ? ' *' : ''] }), _jsx(Input, { type: isNum ? 'number' : 'text', value: value != null ? String(value) : '', onChange: (e) => setConfigValue(key, isNum ? (e.target.value === '' ? undefined : Number(e.target.value)) : e.target.value) }), prop.description && _jsx("p", { className: "text-[11px] text-muted-foreground", children: prop.description })] }, key));
+    };
+    return (_jsxs("div", { className: "mx-auto max-w-4xl px-6 py-8", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h1", { className: "flex items-center gap-2 text-xl font-semibold", children: [_jsx(Database, { className: "h-5 w-5" }), " Datasources"] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Connect external databases and sync their tables in as objects." })] }), _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-4 w-4' + (loading ? ' animate-spin' : '') }), " Refresh"] }), _jsxs(Button, { size: "sm", onClick: () => void openCreate(), children: [_jsx(Plus, { className: "mr-1.5 h-4 w-4" }), " New datasource"] })] })] }), loading ? (_jsxs("div", { className: "flex items-center gap-2 py-12 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading\u2026"] })) : rows.length === 0 ? (_jsxs("div", { className: "rounded-lg border border-dashed bg-muted/20 py-16 text-center text-sm text-muted-foreground", children: ["No datasources yet. Click ", _jsx("span", { className: "font-medium", children: "New datasource" }), " to connect one."] })) : (_jsx("div", { className: "divide-y rounded-lg border bg-card", children: rows.map((ds) => {
+                    const isCode = ds.origin === 'code';
+                    return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(Database, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: ds.label || ds.name }), _jsx("code", { className: "text-[11px] text-muted-foreground", children: ds.name })] }), _jsxs("div", { className: "mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono", children: ds.driver }), ds.status && _jsxs("span", { children: ["\u00B7 ", ds.status] }), ds.origin && _jsxs("span", { children: ["\u00B7 ", ds.origin] })] })] }), _jsxs(Button, { variant: "ghost", size: "sm", disabled: busy === `test:${ds.name}`, onClick: () => void test(ds.name), children: [busy === `test:${ds.name}` ? _jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : _jsx(Plug, { className: "mr-1.5 h-4 w-4" }), " Test"] }), _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => void openSync(ds.name), children: [_jsx(Boxes, { className: "mr-1.5 h-4 w-4" }), " Sync objects"] }), !isCode && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", title: "Edit", disabled: busy === `edit:${ds.name}`, onClick: () => void openEdit(ds), children: busy === `edit:${ds.name}` ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-destructive hover:text-destructive", title: "Delete", disabled: busy === `del:${ds.name}`, onClick: () => void remove(ds.name), children: busy === `del:${ds.name}` ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : _jsx(Trash2, { className: "h-4 w-4" }) })] }))] }, ds.name));
+                }) })), _jsx(Dialog, { open: editorOpen, onOpenChange: (o) => { if (!o)
+                    setEditorOpen(false); }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: editing ? `Edit “${editing}”` : 'New datasource' }), _jsx(DialogDescription, { children: editing ? 'Update the connection. Leave the credential blank to keep the current one.' : 'Connect an external database. Credentials are encrypted and never stored in metadata.' })] }), form && (_jsxs("div", { className: "max-h-[60vh] space-y-3 overflow-y-auto pr-1", children: [!editing && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Name *" }), _jsx(Input, { value: form.name, placeholder: "my_database", onChange: (e) => setForm((f) => (f ? { ...f, name: e.target.value } : f)) }), !nameValid && form.name.length > 0 && (_jsx("p", { className: "text-[11px] text-destructive", children: "Lowercase letters, digits, and underscores; must not start with a digit." }))] })), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Label" }), _jsx(Input, { value: form.label, placeholder: "Human-friendly name", onChange: (e) => setForm((f) => (f ? { ...f, label: e.target.value } : f)) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Driver *" }), _jsxs(Select, { value: form.driver, onValueChange: onDriverChange, disabled: !!editing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Choose a driver" }) }), _jsx(SelectContent, { children: drivers.map((d) => _jsx(SelectItem, { value: d.id, children: d.label }, d.id)) })] }), selectedDriver?.description && _jsx("p", { className: "text-[11px] text-muted-foreground", children: selectedDriver.description })] }), Object.entries(selectedDriver?.configSchema?.properties ?? {}).map(([k, p]) => renderField(k, p)), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Schema mode" }), _jsxs(Select, { value: form.schemaMode, onValueChange: (v) => setForm((f) => (f ? { ...f, schemaMode: v } : f)), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SCHEMA_MODES.map((m) => _jsx(SelectItem, { value: m.value, children: m.label }, m.value)) })] })] }), testMsg && (_jsxs("div", { className: 'flex items-center gap-1.5 text-xs ' + (testMsg.ok ? 'text-emerald-600' : 'text-destructive'), children: [testMsg.ok ? _jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) : _jsx(XCircle, { className: "h-3.5 w-3.5" }), testMsg.text] }))] })), _jsxs(DialogFooter, { className: "gap-2 sm:justify-between", children: [_jsxs(Button, { variant: "ghost", size: "sm", disabled: !form?.driver || testingDraft, onClick: () => void testDraft(), children: [testingDraft ? _jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : _jsx(Plug, { className: "mr-1.5 h-4 w-4" }), " Test connection"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setEditorOpen(false), children: "Cancel" }), _jsxs(Button, { size: "sm", disabled: !canSave, onClick: () => void saveEditor(), children: [savingEditor && _jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }), editing ? 'Save changes' : 'Create datasource'] })] })] })] }) }), _jsx(Dialog, { open: !!syncName, onOpenChange: (o) => { if (!o)
+                    setSyncName(null); }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Sync objects from \u201C", syncName, "\u201D"] }), _jsx(DialogDescription, { children: "Pick the remote tables to import as objects. Each becomes an object definition." })] }), tables == null ? (_jsxs("div", { className: "flex items-center gap-2 py-8 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Introspecting\u2026"] })) : tables.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No remote tables found on this datasource." })) : (_jsx("div", { className: "max-h-[50vh] space-y-1 overflow-y-auto", children: tables.map((t) => {
+                                const key = t.schema ? `${t.schema}.${t.name}` : t.name;
+                                return (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-accent", children: [_jsx("input", { type: "checkbox", checked: selected.has(t.name), onChange: () => toggle(t.name), className: "h-4 w-4" }), _jsx("span", { className: "flex-1", children: key }), t.columnCount != null && _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [t.columnCount, " cols"] })] }, key));
+                            }) })), _jsxs("div", { className: "mt-2 flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSyncName(null), children: "Cancel" }), _jsxs(Button, { size: "sm", disabled: syncing || selected.size === 0, onClick: () => void runSync(), children: [syncing ? _jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : _jsx(Boxes, { className: "mr-1.5 h-4 w-4" }), "Create ", selected.size || '', " object", selected.size === 1 ? '' : 's'] })] })] }) })] }));
+}

package/dist/views/metadata-admin/datasource/register.d.ts

@@ -0,0 +1 @@
+export declare function registerDatasourceResource(): void;

package/dist/views/metadata-admin/datasource/register.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Registers the `datasource` metadata type as a custom-rendered resource in the
+ * metadata-admin engine. datasource is a *side-effectful* type (secret +
+ * connection pool + introspection), so it ships a bespoke ListPage that talks
+ * to the framework `datasource-admin` REST — but it lives inside the engine
+ * (engine route + registry slot + shell), reachable from the setup left-nav
+ * "Datasources" item and the `…/component/metadata/resource?type=datasource`
+ * route, instead of a separate hand-written System page.
+ */
+import { registerMetadataResource } from '../registry';
+import { DatasourceResourcePage } from './DatasourceResourcePage';
+let registered = false;
+export function registerDatasourceResource() {
+    if (registered)
+        return;
+    registered = true;
+    registerMetadataResource({
+        type: 'datasource',
+        label: 'Datasources',
+        domain: 'data',
+        ListPage: DatasourceResourcePage,
+    });
+}

package/dist/views/metadata-admin/default-inspector-registry.d.ts

@@ -0,0 +1,49 @@
+/**
+ * MetadataDefaultInspectorRegistry — "home" inspectors shown when the
+ * preview has NO active selection.
+ *
+ * The scoped {@link MetadataInspectorRegistry} only kicks in once the
+ * preview emits a selection. Before that, the right panel falls back to
+ * the generic whole-draft `SchemaForm`. For some types that generic form
+ * is a poor authoring surface (e.g. a View, where authors want a curated
+ * "pick a view type, manage which fields show" panel — Airtable style).
+ *
+ * Registering a default inspector here lets the host render a curated,
+ * selection-less panel instead of the generic form. Selecting a
+ * sub-element (a column) still swaps in the scoped inspector.
+ */
+import type { ComponentType } from 'react';
+import type { SupportedLocale } from './i18n';
+import type { MetadataSelection } from './preview-registry';
+export interface MetadataDefaultInspectorProps {
+    /** Metadata type, e.g. 'view'. */
+    type: string;
+    /** Item primary-key name (may be empty in create mode). */
+    name: string;
+    /** Current draft from the editor. Treat as immutable. */
+    draft: Record<string, unknown>;
+    /** Apply a shallow patch to the draft. */
+    onPatch: (patch: Record<string, unknown>) => void;
+    /**
+     * Emit a selection. The default inspector uses this to drill into a
+     * sub-element (e.g. focus one column), which makes the host swap in the
+     * scoped inspector for that selection.
+     */
+    onSelectionChange?: (next: MetadataSelection | null) => void;
+    /** Whether the host is in edit mode. False → disable inputs. */
+    readOnly: boolean;
+    /** Active UI locale for i18n. */
+    locale: SupportedLocale;
+    /**
+     * The live server JSONSchema for this type (`RichMetadataTypeEntry.schema`,
+     * from `/meta/types`). Curated inspectors graft any server-only top-level
+     * fields onto the bundled-spec form so new server fields (e.g. a report's
+     * `dataset`/`rows`/`values`) are directly editable even when objectui's
+     * bundled `@objectstack/spec` lags the running server. Undefined when no
+     * server schema is available (offline / older server).
+     */
+    serverSchema?: Record<string, unknown>;
+}
+export type MetadataDefaultInspector = ComponentType<MetadataDefaultInspectorProps>;
+export declare function registerMetadataDefaultInspector(type: string, component: MetadataDefaultInspector): void;
+export declare function getMetadataDefaultInspector(type: string): MetadataDefaultInspector | undefined;

package/dist/views/metadata-admin/default-inspector-registry.js

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+const REGISTRY = new Map();
+export function registerMetadataDefaultInspector(type, component) {
+    REGISTRY.set(type, component);
+}
+export function getMetadataDefaultInspector(type) {
+    return REGISTRY.get(type);
+}

package/dist/views/metadata-admin/default-schemas.js

@@ -73,13 +73,60 @@ const SCHEMAS = {
     },
     permission: {
         type: 'object',
-        title: 'Permission Set',
-        required: ['name'],
+        title: 'Permission',
+        required: ['id', 'resource', 'actions', 'description'],
         properties: {
-            ...headerProps,
-            isProfile: { type: 'boolean', title: 'Is profile' },
-            objects: { type: 'object', title: 'Object Permissions' },
-            fields: { type: 'object', title: 'Field Permissions' },
+            id: {
+                type: 'string',
+                title: 'ID',
+                description: 'Stable identifier (e.g. crm.account.read).',
+            },
+            resource: {
+                type: 'string',
+                title: 'Resource',
+                description: 'What this permission applies to.',
+                enum: [
+                    'data.object', 'data.record', 'data.field',
+                    'ui.view', 'ui.dashboard', 'ui.report',
+                    'system.config', 'system.plugin', 'system.api', 'system.service',
+                    'storage.file', 'storage.database',
+                    'network.http', 'network.websocket',
+                    'process.spawn', 'process.env',
+                ],
+            },
+            actions: {
+                type: 'array',
+                title: 'Actions',
+                description: 'Permitted operations on the resource.',
+                items: {
+                    type: 'string',
+                    enum: [
+                        'create', 'read', 'update', 'delete',
+                        'execute', 'admin', 'manage', 'configure',
+                        'import', 'export', 'share',
+                    ],
+                },
+            },
+            description: {
+                type: 'string',
+                title: 'Description',
+                description: 'Why this permission exists (shown in admin UIs).',
+            },
+            scope: {
+                type: 'string',
+                title: 'Scope',
+                enum: ['tenant', 'user', 'plugin', 'global', 'resource'],
+                default: 'tenant',
+            },
+            required: {
+                type: 'boolean',
+                title: 'Required',
+                description: 'Must be present for the holder to function.',
+            },
+            justification: {
+                type: 'string',
+                title: 'Justification',
+            },
         },
     },
     translation: {
@@ -179,15 +226,73 @@ const SCHEMAS = {
             filters: { type: 'array', title: 'Filters', items: { type: 'object' } },
         },
     },
+    book: {
+        type: 'object',
+        title: 'Documentation Book',
+        required: ['name', 'groups'],
+        properties: {
+            ...headerProps,
+            slug: {
+                type: 'string',
+                title: 'Slug',
+                description: 'Portal URL segment; defaults to the name without its package prefix.',
+            },
+            icon: { type: 'string', title: 'Icon' },
+            order: {
+                type: 'number',
+                title: 'Order',
+                description: 'Orders books within the portal.',
+            },
+            audience: {
+                title: 'Audience',
+                description: "Access audience. 'org' (default) inherits the package grant; 'public' is anonymously readable; { profile } gates by role.",
+                // Union of the two scalar literals and the { profile } object — kept lax
+                // so the role-gated object form round-trips untouched through the form.
+                oneOf: [
+                    { type: 'string', enum: ['org', 'public'] },
+                    { type: 'object', title: 'Role-gated', properties: { profile: { type: 'string', title: 'Profile' } }, required: ['profile'] },
+                ],
+            },
+            groups: {
+                type: 'array',
+                title: 'Groups (spine)',
+                description: 'Ordered sections. Membership is derived from each group\'s include rule — edit the structure visually in the Preview tab.',
+                items: {
+                    type: 'object',
+                    required: ['key', 'label'],
+                    properties: {
+                        key: { type: 'string', title: 'Key', pattern: '^[a-z][a-z0-9_]*$' },
+                        label: { type: 'string', title: 'Label' },
+                        order: { type: 'number', title: 'Order' },
+                        include: { title: 'Include rule', description: 'Glob over doc names (e.g. crm_guide_*) or { tag }.' },
+                        package: { type: 'string', title: 'Package scope' },
+                        pages: { type: 'array', title: 'Explicit pages (override)', items: {} },
+                    },
+                },
+            },
+        },
+    },
     email_template: {
         type: 'object',
         title: 'Email Template',
-        required: ['name'],
+        required: ['name', 'label', 'subject', 'bodyHtml'],
         properties: {
             ...headerProps,
-            subject: { type: 'string', title: 'Subject' },
-            body: { type: 'string', title: 'Body (HTML / text)', format: 'multiline' },
-            from: { type: 'string', title: 'From address' },
+            category: {
+                type: 'string',
+                title: 'Category',
+                enum: ['auth', 'notification', 'workflow', 'marketing', 'custom'],
+                default: 'custom',
+            },
+            locale: { type: 'string', title: 'Locale', default: 'en-US', description: 'BCP-47 tag (en-US, zh-CN, …)' },
+            subject: { type: 'string', title: 'Subject', description: 'Supports {{var.path}} interpolation' },
+            bodyHtml: { type: 'string', title: 'HTML Body', format: 'multiline' },
+            bodyText: { type: 'string', title: 'Plain-Text Body', format: 'multiline' },
+            variables: { type: 'array', title: 'Variables', items: { type: 'object' } },
+            fromOverride: { type: 'object', title: 'From Override' },
+            replyTo: { type: 'string', title: 'Reply-To' },
+            active: { type: 'boolean', title: 'Active', default: true },
+            isSystem: { type: 'boolean', title: 'System Template', default: false },
         },
     },
 };

package/dist/views/metadata-admin/external/ExternalDatasourcePanel.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ExternalDatasourcePanel — the Studio home for an External Datasource
+ * Federation datasource (ADR-0015 §6.4).
+ *
+ * Rendered inside `DatasourcePreview` whenever a datasource is federated
+ * (`schemaMode !== 'managed'`). It groups the buildable P5 surfaces:
+ *
+ *   • Tables      — browse remote tables + import them as Objects.
+ *   • Validation  — check declared objects against the live remote schema
+ *                   (doubles as on-demand drift detection).
+ *
+ * A header strip offers "Refresh catalog" (re-introspect + persist the
+ * `external_catalog` snapshot) and shows when the snapshot was last taken.
+ *
+ * The connection wizard (drivers / credentials / secrets) intentionally lives
+ * in System Settings, not here — this surface is metadata-design work.
+ */
+import * as React from 'react';
+export interface ExternalDatasourcePanelProps {
+    /** The datasource's saved name. Empty while the datasource is unsaved. */
+    datasource: string;
+    /** The datasource's `schemaMode` (only `external` / `validate-only` here). */
+    schemaMode?: string;
+    /** Whether the datasource permits writes (`external.allowWrites`). */
+    allowWrites?: boolean;
+}
+export declare function ExternalDatasourcePanel({ datasource, schemaMode, allowWrites, }: ExternalDatasourcePanelProps): React.JSX.Element;