@object-ui/app-shell 6.2.2 → 7.0.0

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

@@ -0,0 +1,22 @@
+/**
+ * StudioHomePage — the landing page for the metadata-admin ("Studio")
+ * app root (`/apps/:appName/`).
+ *
+ * Previously the app root resolved to an empty `<Navigate>` target and
+ * rendered a blank content area. This page replaces that blank space
+ * with a real, data-driven overview built on the same hooks the
+ * directory uses:
+ *
+ *   • Hero band with a time-of-day greeting + headline KPIs.
+ *   • KPI cards (types / writable / packages / health) — health card
+ *     deep-links to diagnostics when issues exist.
+ *   • "Explore" grid — one card per metadata domain, each listing its
+ *     top types as count-badged chips that link straight into the list.
+ *   • Quick actions — one-click "New …" buttons for writable types.
+ *   • Recently viewed — pulls from the shared RecentItemsProvider.
+ *
+ * All data comes from `/meta/types` + the diagnostics sweep, so the page
+ * stays correct regardless of which packages are installed.
+ */
+import * as React from 'react';
+export declare function StudioHomePage(): React.JSX.Element;

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

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * StudioHomePage — the landing page for the metadata-admin ("Studio")
+ * app root (`/apps/:appName/`).
+ *
+ * Previously the app root resolved to an empty `<Navigate>` target and
+ * rendered a blank content area. This page replaces that blank space
+ * with a real, data-driven overview built on the same hooks the
+ * directory uses:
+ *
+ *   • Hero band with a time-of-day greeting + headline KPIs.
+ *   • KPI cards (types / writable / packages / health) — health card
+ *     deep-links to diagnostics when issues exist.
+ *   • "Explore" grid — one card per metadata domain, each listing its
+ *     top types as count-badged chips that link straight into the list.
+ *   • Quick actions — one-click "New …" buttons for writable types.
+ *   • Recently viewed — pulls from the shared RecentItemsProvider.
+ *
+ * All data comes from `/meta/types` + the diagnostics sweep, so the page
+ * stays correct regardless of which packages are installed.
+ */
+import * as React from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Search, Database, Layers, Workflow, Sparkles, Settings, ShieldCheck, Box, Package as PackageIcon, AlertTriangle, CheckCircle2, ArrowRight, Plus, Clock, LayoutDashboard, FileText, BarChart3, Table2, } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { useRecentItems } from '../../context/RecentItemsProvider';
+import { useMetadataClient, useMetadataTypes, useGlobalDiagnostics, } from './useMetadata';
+import { MetadataQuickFind } from './QuickFind';
+import { translateMetadataType, translateMetadataDomain, t, tFormat, detectLocale, } from './i18n';
+const HIDDEN_TYPES = new Set(['field', 'package']);
+const DOMAIN_ICONS = {
+    data: Database,
+    ui: Layers,
+    automation: Workflow,
+    ai: Sparkles,
+    system: Settings,
+    platform: Settings,
+    identity: ShieldCheck,
+    security: ShieldCheck,
+};
+/** Per-domain accent gradients — used for icon chips + chip hover rings. */
+const DOMAIN_ACCENT = {
+    data: { from: 'from-sky-500', to: 'to-blue-600', ring: 'hover:ring-sky-400/40', text: 'text-sky-600 dark:text-sky-400' },
+    ui: { from: 'from-violet-500', to: 'to-fuchsia-600', ring: 'hover:ring-violet-400/40', text: 'text-violet-600 dark:text-violet-400' },
+    automation: { from: 'from-amber-500', to: 'to-orange-600', ring: 'hover:ring-amber-400/40', text: 'text-amber-600 dark:text-amber-400' },
+    ai: { from: 'from-pink-500', to: 'to-rose-600', ring: 'hover:ring-pink-400/40', text: 'text-pink-600 dark:text-pink-400' },
+    identity: { from: 'from-emerald-500', to: 'to-teal-600', ring: 'hover:ring-emerald-400/40', text: 'text-emerald-600 dark:text-emerald-400' },
+    security: { from: 'from-emerald-500', to: 'to-teal-600', ring: 'hover:ring-emerald-400/40', text: 'text-emerald-600 dark:text-emerald-400' },
+    system: { from: 'from-slate-500', to: 'to-slate-700', ring: 'hover:ring-slate-400/40', text: 'text-slate-600 dark:text-slate-300' },
+    platform: { from: 'from-slate-500', to: 'to-slate-700', ring: 'hover:ring-slate-400/40', text: 'text-slate-600 dark:text-slate-300' },
+    other: { from: 'from-slate-400', to: 'to-slate-600', ring: 'hover:ring-slate-400/40', text: 'text-slate-600 dark:text-slate-300' },
+};
+const DOMAIN_ORDER = ['data', 'ui', 'automation', 'ai', 'identity', 'security', 'system', 'platform', 'other'];
+/** Types that are most useful to surface as one-click "New …" actions. */
+const QUICK_CREATE_ORDER = ['object', 'view', 'page', 'dashboard', 'report', 'flow', 'action', 'agent'];
+const RECENT_ICONS = {
+    object: Table2,
+    dashboard: LayoutDashboard,
+    page: FileText,
+    report: BarChart3,
+    record: Box,
+    metadata: Layers,
+};
+function greetingKey() {
+    const h = new Date().getHours();
+    if (h < 12)
+        return 'engine.home.greetingMorning';
+    if (h < 18)
+        return 'engine.home.greetingAfternoon';
+    return 'engine.home.greetingEvening';
+}
+function relativeTime(iso, locale) {
+    const then = new Date(iso).getTime();
+    if (Number.isNaN(then))
+        return '';
+    const diff = Date.now() - then;
+    const zh = locale.startsWith('zh');
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1)
+        return zh ? '刚刚' : 'just now';
+    if (mins < 60)
+        return zh ? `${mins} 分钟前` : `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24)
+        return zh ? `${hrs} 小时前` : `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    if (days < 7)
+        return zh ? `${days} 天前` : `${days}d ago`;
+    const weeks = Math.floor(days / 7);
+    return zh ? `${weeks} 周前` : `${weeks}w ago`;
+}
+export function StudioHomePage() {
+    const client = useMetadataClient();
+    const { loading, entries } = useMetadataTypes(client);
+    const { recentItems } = useRecentItems();
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [projectPackages, setProjectPackages] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = await client.list('package');
+                if (cancelled)
+                    return;
+                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
+                const rows = (list ?? [])
+                    .map((raw) => {
+                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
+                    const m = (item?.manifest ?? item ?? {});
+                    return {
+                        id: m.id,
+                        scope: m.scope,
+                        name: m.name || m.id,
+                    };
+                })
+                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
+                rows.sort((a, b) => a.name.localeCompare(b.name));
+                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+            }
+            catch {
+                if (!cancelled)
+                    setProjectPackages([]);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    const urlPackage = searchParams.get('package');
+    const activePackage = React.useMemo(() => {
+        if (!projectPackages)
+            return null;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return urlPackage;
+        return projectPackages[0]?.id ?? null;
+    }, [projectPackages, urlPackage]);
+    React.useEffect(() => {
+        if (!projectPackages || projectPackages.length === 0)
+            return;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return;
+        const next = new URLSearchParams(searchParams);
+        next.set('package', projectPackages[0].id);
+        setSearchParams(next, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectPackages, urlPackage]);
+    const packageSuffix = activePackage ? `?package=${encodeURIComponent(activePackage)}` : '';
+    const metadataHref = `metadata${packageSuffix}`;
+    const packagesHref = `component/developer/packages${packageSuffix}`;
+    const { summary: diagSummary, countsByType, packagesByType, loading: diagLoading, } = useGlobalDiagnostics(client, 'warning', activePackage ?? undefined);
+    const visible = React.useMemo(() => entries.filter((e) => {
+        if (HIDDEN_TYPES.has(e.type))
+            return false;
+        if (!activePackage)
+            return false;
+        return (packagesByType[e.type] ?? []).includes(activePackage);
+    }), [activePackage, entries, packagesByType]);
+    const writable = React.useMemo(() => visible.filter((e) => e.allowOrgOverride || e.allowRuntimeCreate), [visible]);
+    // Group visible types by domain, sorted by count desc within each group.
+    const grouped = React.useMemo(() => {
+        var _a;
+        const map = {};
+        for (const e of visible)
+            (map[_a = e.domain ?? 'other'] ?? (map[_a] = [])).push(e);
+        for (const list of Object.values(map)) {
+            list.sort((a, b) => (countsByType[b.type] ?? 0) - (countsByType[a.type] ?? 0));
+        }
+        return Object.entries(map).sort(([a], [b]) => (DOMAIN_ORDER.indexOf(a) === -1 ? 99 : DOMAIN_ORDER.indexOf(a)) -
+            (DOMAIN_ORDER.indexOf(b) === -1 ? 99 : DOMAIN_ORDER.indexOf(b)));
+    }, [visible, countsByType]);
+    const quickCreate = React.useMemo(() => {
+        const byType = new Map(writable.map((e) => [e.type, e]));
+        return QUICK_CREATE_ORDER.map((ty) => byType.get(ty)).filter(Boolean);
+    }, [writable]);
+    const issues = diagSummary.total;
+    const healthy = !loading && !diagLoading && issues === 0;
+    if (loading || projectPackages === null || (activePackage && diagLoading)) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-8 text-sm text-muted-foreground", children: t('engine.home.loading', locale) }));
+    }
+    return (_jsxs("div", { className: "h-full overflow-auto bg-gradient-to-b from-muted/40 to-background", children: [_jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 py-6 space-y-6", children: [_jsxs("section", { className: "relative overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-600 via-violet-600 to-fuchsia-600 px-7 py-8 text-white shadow-xl shadow-violet-500/20", children: [_jsx("div", { className: "pointer-events-none absolute -right-16 -top-20 h-64 w-64 rounded-full bg-white/15 blur-3xl" }), _jsx("div", { className: "pointer-events-none absolute -bottom-24 left-1/3 h-56 w-56 rounded-full bg-fuchsia-300/20 blur-3xl" }), _jsx("div", { className: "pointer-events-none absolute inset-0 opacity-[0.12]", style: {
+                                    backgroundImage: 'radial-gradient(currentColor 1px, transparent 1px)',
+                                    backgroundSize: '18px 18px',
+                                } }), _jsxs("div", { className: "relative flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { className: "max-w-xl", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-white/80", children: [_jsx(Sparkles, { className: "h-4 w-4" }), t(greetingKey(), locale)] }), _jsx("h1", { className: "mt-2 text-3xl font-bold tracking-tight sm:text-4xl", children: "Studio" }), _jsx("p", { className: "mt-2 text-sm leading-relaxed text-white/85 sm:text-base", children: t('engine.home.subtitle', locale) }), _jsxs("div", { className: "mt-5 flex flex-wrap items-center gap-2.5", children: [_jsx(Button, { asChild: true, size: "sm", variant: "ghost", className: "bg-white/10 text-white shadow-sm ring-1 ring-white/25 hover:bg-white/20 hover:text-white", children: _jsxs(Link, { to: metadataHref, children: [_jsx(Layers, { className: "mr-1.5 h-4 w-4" }), t('engine.home.browseAll', locale)] }) }), _jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-xs font-medium text-white/90 backdrop-blur-sm", children: [_jsx(Search, { className: "h-3.5 w-3.5" }), t('engine.directory.quickFind', locale), " \u2318\u21E7M"] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsx(HeroPill, { value: visible.length, label: t('engine.home.statTypes', locale) }), _jsx(HeroPill, { value: writable.length, label: t('engine.home.statWritable', locale) }), _jsx(HeroPill, { value: projectPackages.length, label: t('engine.home.statPackages', locale) })] })] })] }), _jsxs("section", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: [_jsx(StatCard, { icon: Layers, from: "from-indigo-500", to: "to-violet-600", value: visible.length, label: t('engine.home.statTypes', locale), to_link: metadataHref }), _jsx(StatCard, { icon: CheckCircle2, from: "from-sky-500", to: "to-blue-600", value: writable.length, label: t('engine.home.statWritable', locale), to_link: metadataHref }), _jsx(StatCard, { icon: PackageIcon, from: "from-emerald-500", to: "to-teal-600", value: projectPackages.length, label: t('engine.home.statPackages', locale), to_link: packagesHref }), _jsxs(Link, { to: healthy ? metadataHref : `metadata/_diagnostics${packageSuffix}`, className: 'group relative flex flex-col justify-between overflow-hidden rounded-2xl border p-4 transition-all hover:-translate-y-0.5 hover:shadow-lg ' +
+                                    (healthy
+                                        ? 'border-emerald-200 bg-emerald-50/60 dark:border-emerald-900/50 dark:bg-emerald-950/30'
+                                        : 'border-amber-300 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/30'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: 'flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-sm ' +
+                                                    (healthy ? 'from-emerald-500 to-teal-600' : 'from-amber-500 to-orange-600'), children: healthy ? _jsx(CheckCircle2, { className: "h-5 w-5" }) : _jsx(AlertTriangle, { className: "h-5 w-5" }) }), _jsx(ArrowRight, { className: "h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" })] }), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-2xl font-bold tabular-nums", children: healthy ? t('engine.home.allHealthy', locale) : issues }), _jsx("div", { className: "text-xs text-muted-foreground", children: healthy
+                                                    ? t('engine.home.allHealthyHint', locale)
+                                                    : t('engine.home.statIssues', locale) })] })] })] }), quickCreate.length > 0 && (_jsxs("section", { children: [_jsx(SectionHeader, { icon: Plus, title: t('engine.home.quickActions', locale), hint: t('engine.home.quickActionsHint', locale) }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2.5", children: quickCreate.map((e) => (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "group rounded-full border-transparent bg-muted hover:bg-primary/10 hover:text-primary", children: _jsxs(Link, { to: `metadata/${encodeURIComponent(e.type)}/new${packageSuffix}`, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5 text-primary transition-transform group-hover:rotate-90" }), tFormat('engine.home.newItem', locale, {
+                                                label: translateMetadataType(e.type, locale, e.label),
+                                            })] }) }, e.type))) })] })), _jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [_jsxs("section", { className: "lg:col-span-2", children: [_jsx(SectionHeader, { icon: Layers, title: t('engine.home.explore', locale), hint: t('engine.home.exploreHint', locale) }), _jsx("div", { className: "mt-3 grid gap-4 sm:grid-cols-2", children: grouped.map(([domain, group]) => (_jsx(DomainCard, { domain: domain, group: group, countsByType: countsByType, locale: locale, packageSuffix: packageSuffix }, domain))) })] }), _jsxs("section", { children: [_jsx(SectionHeader, { icon: Clock, title: t('engine.home.recent', locale) }), _jsx("div", { className: "mt-3 rounded-2xl border bg-card p-2", children: recentItems.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: t('engine.home.recentEmpty', locale) })) : (_jsx("ul", { className: "space-y-0.5", children: recentItems.slice(0, 8).map((item) => {
+                                                const Icon = RECENT_ICONS[item.type] ?? Box;
+                                                return (_jsx("li", { children: _jsxs(Link, { to: item.href, className: "group flex items-center gap-3 rounded-xl px-3 py-2 transition-colors hover:bg-accent", children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: item.label }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: relativeTime(item.visitedAt, locale) })] }), _jsx(ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" })] }) }, item.id));
+                                            }) })) })] })] })] }), _jsx(MetadataQuickFind, {})] }));
+}
+function HeroPill({ value, label }) {
+    return (_jsxs("div", { className: "rounded-2xl bg-white/15 px-4 py-3 text-center backdrop-blur-sm ring-1 ring-white/20", children: [_jsx("div", { className: "text-2xl font-bold tabular-nums leading-none", children: value }), _jsx("div", { className: "mt-1 text-[11px] font-medium text-white/80", children: label })] }));
+}
+function StatCard({ icon: Icon, from, to, value, label, to_link, }) {
+    return (_jsxs(Link, { to: to_link, className: "group relative flex flex-col justify-between overflow-hidden rounded-2xl border bg-card p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${from} ${to} text-white shadow-sm`, children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsx(ArrowRight, { className: "h-4 w-4 text-muted-foreground opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" })] }), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-2xl font-bold tabular-nums", children: value }), _jsx("div", { className: "text-xs text-muted-foreground", children: label })] })] }));
+}
+function SectionHeader({ icon: Icon, title, hint, }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-2.5", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }), title] }), hint && _jsx("p", { className: "text-xs text-muted-foreground", children: hint })] }));
+}
+function DomainCard({ domain, group, countsByType, locale, packageSuffix, }) {
+    const Icon = DOMAIN_ICONS[domain] ?? Box;
+    const accent = DOMAIN_ACCENT[domain] ?? DOMAIN_ACCENT.other;
+    const top = group.slice(0, 6);
+    const more = group.length - top.length;
+    return (_jsxs("div", { className: `group rounded-2xl border bg-card p-4 ring-1 ring-transparent transition-all hover:-translate-y-0.5 hover:shadow-lg ${accent.ring}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br ${accent.from} ${accent.to} text-white shadow-sm`, children: _jsx(Icon, { className: "h-[18px] w-[18px]" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-semibold", children: translateMetadataDomain(domain, locale) }), _jsxs("div", { className: "text-[11px] text-muted-foreground", children: [group.length, " ", t('engine.home.typesLower', locale)] })] })] }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [top.map((e) => (_jsxs(Link, { to: `metadata/${encodeURIComponent(e.type)}${packageSuffix}`, className: "inline-flex items-center gap-1.5 rounded-lg border bg-background px-2 py-1 text-xs transition-colors hover:border-primary/50 hover:bg-accent", children: [_jsx("span", { className: "truncate max-w-[10rem]", children: translateMetadataType(e.type, locale, e.label) }), _jsx("span", { className: "tabular-nums text-[10px] text-muted-foreground", children: countsByType[e.type] ?? 0 })] }, e.type))), more > 0 && (_jsxs(Link, { to: `metadata${packageSuffix}`, className: `inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium ${accent.text} hover:underline`, children: ["+", more] }))] })] }));
+}

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

@@ -88,17 +88,15 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Hooks',
                 order: 20,
             }],
+        createFields: ['label', 'name', 'object', 'description'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createDefaults: { events: [] },
     });
-    // approval.object → object (approval processes targeting this object)
-    registerMetadataResource({
-        type: 'approval',
-        anchors: [{
-                anchorType: 'object',
-                match: anchorByField('object'),
-                groupLabel: 'Approval Processes',
-                order: 70,
-            }],
-    });
+    // Approval is no longer a standalone metadata type (ADR-0019) — it is a flow
+    // node (`type: 'approval'`). Approvals therefore surface on an object through
+    // the Flows it belongs to, not a separate "Approval Processes" group.
     // page.object → object (auto-generated record pages, etc.)
     registerMetadataResource({
         type: 'page',
@@ -108,23 +106,144 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Pages',
                 order: 40,
             }],
+        // Mirror `view`'s create form: a page (esp. a *record* page) must be able to
+        // bind an `object` and pick its page `type` / `kind` at creation — the
+        // identity-only form (label/name/icon/description) couldn't make a record
+        // page. The block layout is then composed in the editor's PagePreview canvas.
+        createFields: ['label', 'name', 'object', 'type', 'kind'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createSchema: {
+            type: 'object',
+            required: ['label', 'name', 'type'],
+            properties: {
+                label: { type: 'string', title: 'Label', description: 'Human-readable page title.' },
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    description: 'Page key (snake_case).',
+                    pattern: '^[a-z_][a-z0-9_]*$',
+                },
+                type: {
+                    type: 'string',
+                    title: 'Page type',
+                    // 'list' (interface page) is the primary, most-built page type — offer
+                    // it first and as the default. 'dashboard' is roadmap (no distinct
+                    // renderer yet), so it's omitted here, matching the edit form.
+                    enum: ['list', 'record', 'home', 'app', 'utility'],
+                    default: 'list',
+                    description: 'List / Interface page = a data view (Airtable-style: columns, filters, visualizations). Record page renders one object record.',
+                },
+                object: {
+                    type: 'string',
+                    title: 'Object',
+                    widget: 'ref:object',
+                    description: 'The object this page reads from — the data source for a list page, or the record object for a record page.',
+                },
+                kind: {
+                    type: 'string',
+                    title: 'Kind',
+                    enum: ['full', 'slotted'],
+                    default: 'full',
+                    description: 'full = the whole page; slotted = override only named slots of the default.',
+                },
+            },
+        },
+        createDefaults: { type: 'list', kind: 'full', regions: [] },
+        // Seed a record page's regions from the bound object's synthesized default
+        // detail page, so authoring starts from the auto-generated layout (the same
+        // one the runtime renders by default) instead of a blank canvas.
+        createSeed: async (draft, { client }) => {
+            // List/interface page: pre-bind the chosen object as the data source so
+            // the new page renders immediately (the author then curates columns,
+            // filters, visualizations in the editor).
+            if (draft?.type === 'list') {
+                return draft?.object ? { interfaceConfig: { source: String(draft.object) } } : {};
+            }
+            if (draft?.type !== 'record' || !draft?.object)
+                return {};
+            try {
+                const objectDef = await client.get('object', String(draft.object));
+                if (!objectDef || typeof objectDef !== 'object')
+                    return {};
+                const { buildDefaultPageSchema } = await import('@object-ui/plugin-detail');
+                const synth = buildDefaultPageSchema(objectDef);
+                const seed = {};
+                if (Array.isArray(synth?.regions) && synth.regions.length)
+                    seed.regions = synth.regions;
+                if (synth?.template)
+                    seed.template = synth.template;
+                return seed;
+            }
+            catch {
+                return {};
+            }
+        },
     });
-    // view binds to an object via data.object (list view / form view variants)
+    // A view is the canonical first-class ViewItem ({ viewKind, config }),
+    // bound to its object by the top-level `object` foreign key.
     registerMetadataResource({
         type: 'view',
         anchors: [{
                 anchorType: 'object',
                 match: anchorByField([
-                    'data.object',
-                    'list.data.object',
-                    'form.data.object',
                     'object',
+                    'config.data.object',
                 ]),
                 groupLabel: 'Views',
                 order: 30,
             }],
+        createFields: ['label', 'name', 'object', 'kind'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createSchema: {
+            type: 'object',
+            required: ['label', 'name', 'object', 'kind'],
+            properties: {
+                label: { type: 'string', title: 'Label', description: 'Human-readable view name.' },
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    description: 'View key (snake_case). Qualified to <object>.<key> on save.',
+                    pattern: '^[a-z_][a-z0-9_]*$',
+                },
+                object: {
+                    type: 'string',
+                    title: 'Object',
+                    description: 'The object this view displays.',
+                },
+                kind: {
+                    type: 'string',
+                    title: 'View kind',
+                    enum: ['grid', 'kanban', 'gallery', 'calendar', 'timeline', 'gantt', 'chart'],
+                    default: 'grid',
+                    description: 'Pick a starter layout. Switch later in the designer.',
+                },
+            },
+        },
+        // Emit a canonical ViewItem. `name` is the globally-unique qualified id
+        // `<object>.<key>`; the layout `kind` (grid/kanban/…) is all list-family,
+        // so `viewKind` is 'list' and the chosen layout lives at `config.type`.
+        createBuildBody: (draft) => {
+            const object = String(draft.object ?? '');
+            const key = String(draft.name ?? '');
+            const qualifiedName = key.includes('.') || !object ? key : `${object}.${key}`;
+            return {
+                name: qualifiedName,
+                object,
+                viewKind: 'list',
+                label: draft.label,
+                config: {
+                    type: draft.kind || 'grid',
+                    columns: [],
+                    data: { provider: 'object', object },
+                },
+            };
+        },
     });
-    // flow / workflow may reference an object at the root or under `on`
+    // flow may reference an object at the root or under `on`
     registerMetadataResource({
         type: 'flow',
         anchors: [{
@@ -133,16 +252,14 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Flows',
                 order: 50,
             }],
+        createFields: ['label', 'name', 'type', 'description'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createDefaults: { nodes: [], edges: [] },
     });
-    registerMetadataResource({
-        type: 'workflow',
-        anchors: [{
-                anchorType: 'object',
-                match: anchorByField(['object', 'on.object']),
-                groupLabel: 'Workflow Rules',
-                order: 51,
-            }],
-    });
+    // ADR-0020: `workflow` retired as a metadata type — record state machines
+    // are a `state_machine` validation rule on the object (no separate anchor).
     // trigger.object → object (low-level DB-style triggers)
     registerMetadataResource({
         type: 'trigger',
@@ -152,6 +269,10 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Triggers',
                 order: 52,
             }],
+        createFields: ['label', 'name', 'object'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
     });
     // validation: usually embedded in the object, but standalone variants
     // do exist. Match anything whose `object` points back at us.
@@ -163,6 +284,36 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Validations',
                 order: 25,
             }],
+        createFields: ['label', 'name', 'message'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createSchema: {
+            type: 'object',
+            required: ['label', 'name', 'message'],
+            properties: {
+                label: { type: 'string', title: 'Label', description: 'Human-readable rule name.' },
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    description: 'Machine name (snake_case). Used in URLs.',
+                    pattern: '^[a-z_][a-z0-9_]*$',
+                },
+                message: {
+                    type: 'string',
+                    title: 'Error message',
+                    description: 'Shown to the user when the rule blocks save.',
+                },
+            },
+        },
+        createDefaults: {
+            type: 'script',
+            active: true,
+            events: ['insert', 'update'],
+            priority: 10,
+            severity: 'error',
+            condition: 'false',
+        },
     });
     // permission has a sparse object-keyed map under `objects`. Match by
     // membership of the parent name in that map.
@@ -177,6 +328,11 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Permissions',
                 order: 60,
             }],
+        createFields: ['label', 'name', 'isProfile'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createDefaults: { objects: {} },
     });
     // action — both record-scoped and object-scoped actions live here.
     // Schemas vary, so accept any of the three common shapes.
@@ -192,6 +348,10 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Actions',
                 order: 55,
             }],
+        createFields: ['label', 'name', 'objectName', 'icon'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
     });
     // dashboard / report — surface ones bound to a specific object.
     // Many will not have an explicit anchor; those simply don't appear.
@@ -203,6 +363,11 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Dashboards',
                 order: 80,
             }],
+        createFields: ['label', 'name', 'description'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createDefaults: { widgets: [] },
     });
     registerMetadataResource({
         type: 'report',
@@ -212,6 +377,54 @@ export function registerBuiltinAnchors() {
                 groupLabel: 'Reports',
                 order: 81,
             }],
+        createFields: ['label', 'name', 'objectName', 'description'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+        ],
+        createDefaults: { columns: [] },
+    });
+    // Cosmetic defaults for the `object` type list page — gives Object the
+    // same look as every other metadata type while still surfacing the
+    // fields/columns developers care about most.
+    registerMetadataResource({
+        type: 'object',
+        iconName: 'database',
+        domain: 'data',
+        // Protocol-driven create form: ask for identity only. The rest of
+        // the object (fields, validations, indexes, hooks, …) is added
+        // through the bespoke designer that takes over on the edit page,
+        // so requiring it up-front would just front-load 30 inputs with
+        // no payoff.
+        createFields: ['label', 'pluralLabel', 'name', 'description'],
+        createDerive: [
+            { from: 'label', to: 'name', transform: 'slugify', untilUserEdits: true },
+            { from: 'label', to: 'pluralLabel', transform: 'plural-en', untilUserEdits: true },
+        ],
+        // `fields` is the only other required key on the ObjectSchema —
+        // seed it as an empty record so the saved body validates.
+        createDefaults: { fields: {} },
+        searchableFields: ['name', 'label', 'pluralLabel', 'description'],
+        listColumns: [
+            { key: 'name', label: 'Name', width: '24%' },
+            { key: 'label', label: 'Label', width: '22%' },
+            { key: 'pluralLabel', label: 'Plural', width: '22%' },
+            {
+                key: 'fields',
+                label: 'Fields',
+                width: '90px',
+                render: (value) => {
+                    if (value == null)
+                        return '—';
+                    const count = Array.isArray(value)
+                        ? value.length
+                        : typeof value === 'object'
+                            ? Object.keys(value).length
+                            : 0;
+                    return count;
+                },
+            },
+            { key: 'description', label: 'Description' },
+        ],
     });
 }
 /**

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

@@ -0,0 +1,50 @@
+/**
+ * Live client-side Zod validation for metadata drafts.
+ *
+ * Unblocked by `@objectstack/spec@7.x` — the spec package now ships
+ * per-metadata-type Zod schemas under its kernel/data/ui/automation/
+ * ai/system subpaths, so we no longer have to wait for the next save
+ * round-trip to learn the draft is invalid.
+ *
+ * Usage (from ResourceEditPage):
+ *
+ *   const { issues } = await validateMetadataDraft(type, draft);
+ *   setIssues(issues);
+ *
+ * Schemas are loaded lazily — the first call for a given type kicks
+ * off a dynamic `import()` of the relevant spec subpath, then caches
+ * the result. Types we don't have a client-side schema for (e.g.
+ * `validation`, `trigger`, `connector`, etc.) return an empty issue list;
+ * the user still gets server-side diagnostics on save.
+ */
+import type { SchemaFormIssue } from './SchemaForm';
+/**
+ * Returns true if a client-side schema exists for the given metadata
+ * type. Useful for deciding whether to skip the debounce in caller.
+ */
+export declare function hasClientValidator(type: string): boolean;
+export interface ValidateResult {
+    /** Whether a client schema was available and the draft conforms. */
+    ok: boolean;
+    /** Issues to render in SchemaForm + Monaco. Empty on success or unsupported type. */
+    issues: SchemaFormIssue[];
+}
+/**
+ * Run Zod validation for the given metadata draft. Returns `{ok: true,
+ * issues: []}` for types without a registered schema so callers can
+ * fall back to server-side diagnostics without special-casing.
+ */
+export declare function validateMetadataDraft(type: string, draft: unknown, 
+/**
+ * The live server JSON schema for this type (from `/meta/types`, i.e.
+ * `RichMetadataTypeEntry.schema`). When provided it ROOT-CURES cross-repo
+ * spec skew: the bundled `@objectstack/spec` may lag the running server, so
+ * we never let the client be STRICTER than the server — a "missing required
+ * field" flagged by the (possibly stale) bundled Zod is suppressed when the
+ * server marks that field optional. The server's own validation on save
+ * stays authoritative. This makes the editor track the live schema without a
+ * per-change shim (cf. `FORWARD_COMPAT_FLOW_NODE_TYPES`).
+ */
+serverSchema?: {
+    required?: unknown;
+}): Promise<ValidateResult>;