@object-ui/app-shell 6.2.3 → 7.0.0

package/dist/views/metadata-admin/previews/ViewPreview.js

@@ -1,50 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 /**
- * ViewPreview — renders a View metadata draft using the same
- * `object-view` SchemaRenderer the runtime ObjectView route uses,
- * with the current draft's variants injected as `listViews` so the
- * draft drives what authors see (not the saved version).
+ * ViewPreview — renders a View metadata draft using the same `object-view`
+ * SchemaRenderer the runtime ObjectView route uses, with the draft's own
+ * `config` body injected as a named `listView` so the preview reflects the
+ * unsaved edit (not the last saved version).
  *
- * If the draft is a "single-schema legacy" view (no list/form/kanban
- * wrappers, just one top-level `type`), we pass the schema straight
- * to SchemaRenderer.
+ * A view is the canonical first-class **ViewItem** ({ viewKind, config }):
+ * one view, one `config` body — there are no in-document variant tabs. An
+ * object's *other* views are independent ViewItems surfaced by the view
+ * switcher (a query), not nested here.
+ *
+ * The render path forks on `viewKind`:
+ *   - list-family (grid / kanban / calendar / …) → `object-view`, with the
+ *     draft body injected as a named listView (below);
+ *   - form-family (simple / drawer / …) → `object-form`, with the draft's
+ *     sections mapped onto the form schema (a form view binds a record layout,
+ *     not a list, so the list renderer would just fall back to a bare grid).
+ *
+ * A raw single-schema draft (a bare `{ type, … }` with no `config` wrapper,
+ * e.g. an ad-hoc preview) is rendered straight through SchemaRenderer.
  */
 import * as React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, PreviewModeProvider } from '@object-ui/react';
+import { toInlineFormType } from './form-preview';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
-const VIEW_VARIANT_KEYS = [
-    'list',
-    'form',
-    'kanban',
-    'calendar',
-    'gantt',
-    'map',
-    'gallery',
-    'timeline',
-    'feed',
-    'detail',
-];
-function detectVariants(draft) {
-    const out = [];
-    for (const k of VIEW_VARIANT_KEYS) {
-        const v = draft[k];
-        if (v && typeof v === 'object' && !Array.isArray(v)) {
-            out.push({ key: k, schema: v });
-        }
-    }
-    return out;
-}
-function resolveObjectName(draft, variantSchema) {
+import { primaryVariantBinding } from '../view-variant-model';
+function resolveObjectName(draft, body) {
     const candidates = [
-        variantSchema?.object,
-        variantSchema?.data?.object,
-        variantSchema?.objectName,
+        body?.object,
+        body?.data?.object,
+        body?.objectName,
         draft.object,
         draft.objectName,
         draft.data?.object,
-        draft.list?.data?.object,
-        draft.list?.object,
     ];
     for (const c of candidates) {
         if (typeof c === 'string' && c)
@@ -52,47 +41,90 @@ function resolveObjectName(draft, variantSchema) {
     }
     return undefined;
 }
-export function ViewPreview({ name, draft }) {
-    const variants = React.useMemo(() => detectVariants(draft), [draft]);
-    const objectName = React.useMemo(() => resolveObjectName(draft, variants[0]?.schema), [draft, variants]);
-    // Compose the listViews map: the draft IS the "default" — surface it as a
-    // primary named view FIRST so the view switcher picks it as default. Then
-    // append any saved sibling named listViews.
-    const { listViews, defaultViewId } = React.useMemo(() => {
-        const out = {};
-        const primaryVariant = variants.find((v) => v.key === 'list') ?? variants[0];
-        const primaryId = String(name) || primaryVariant?.key || 'default';
-        if (primaryVariant) {
-            out[primaryId] = {
-                ...primaryVariant.schema,
-                label: primaryVariant.schema.label ?? draft.label ?? name,
-            };
-        }
-        const saved = draft.listViews;
-        if (saved && typeof saved === 'object' && !Array.isArray(saved)) {
-            for (const [k, v] of Object.entries(saved)) {
-                if (v && typeof v === 'object' && k !== primaryId)
-                    out[k] = v;
-            }
+// A ViewItem form section uses the spec's `{ field, readonly, … }` shape, but
+// `object-form` selects fields by `name` and reads `readOnly`. Normalize so the
+// section's fields resolve (otherwise every section comes up empty).
+function toFormFieldEntry(f) {
+    if (typeof f === 'string')
+        return f;
+    if (f && typeof f === 'object') {
+        const o = f;
+        const name = (o.field ?? o.name);
+        if (!name)
+            return o;
+        return { ...o, name, readOnly: o.readOnly ?? o.readonly };
+    }
+    return String(f);
+}
+function buildFormPreviewSchema(objectName, body) {
+    const rawType = typeof body.type === 'string' ? body.type : 'simple';
+    const formType = toInlineFormType(rawType);
+    const sections = Array.isArray(body.sections)
+        ? body.sections.map((s) => ({
+            ...s,
+            fields: Array.isArray(s?.fields) ? s.fields.map(toFormFieldEntry) : [],
+        }))
+        : undefined;
+    return {
+        type: 'object-form',
+        objectName,
+        // A blank create-mode form: the preview shows the layout without needing a
+        // sample record to be selected.
+        mode: 'create',
+        formType,
+        sections,
+        fields: Array.isArray(body.fields) ? body.fields : undefined,
+        showSubmit: false,
+        showCancel: false,
+    };
+}
+export function ViewPreview({ name, draft, editing }) {
+    // The single ViewItem body (`draft.config`), or undefined for a raw schema.
+    const body = React.useMemo(() => primaryVariantBinding(draft)?.schema, [draft]);
+    const objectName = React.useMemo(() => resolveObjectName(draft, body), [draft, body]);
+    const designMode = !!editing;
+    // Surface the draft body as a named listView so the preview renders THIS
+    // view (with unsaved edits) rather than the object's saved default.
+    const { listViews, defaultViewId, defaultViewType } = React.useMemo(() => {
+        if (!body) {
+            return { listViews: {}, defaultViewId: undefined, defaultViewType: 'grid' };
         }
-        return { listViews: out, defaultViewId: primaryVariant ? primaryId : undefined };
-    }, [draft, variants, name]);
+        const id = String(name) || 'default';
+        return {
+            listViews: {
+                [id]: {
+                    ...body,
+                    label: body.label ?? draft.label ?? name,
+                },
+            },
+            defaultViewId: id,
+            defaultViewType: body.type ?? 'grid',
+        };
+    }, [body, draft, name]);
     // -------------------------------------------------------------------------
-    // Path A — single-schema legacy view: render directly.
+    // Raw single-schema draft (no ViewItem `config` wrapper): render directly.
     // -------------------------------------------------------------------------
-    if (!variants.length && draft.type) {
+    if (!body && draft.type) {
         const schema = { ...draft };
-        return (_jsx(PreviewShell, { hint: `view · ${schema.type}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view's `type` may not be registered, or required fields are missing.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+        return (_jsx(PreviewShell, { hint: `view · ${schema.type}${designMode ? ' · design' : ''}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view's `type` may not be registered, or required fields are missing.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(PreviewModeProvider, { children: _jsx(SchemaRenderer, { schema: schema }) }) }) }) }));
     }
     if (!objectName) {
-        return (_jsx(PreviewShell, { hint: "view", children: _jsxs(PreviewMessage, { tone: "warn", children: ["This view has no object binding yet. Set ", _jsx("code", { children: "list.data.object" }), " in the Form tab to fetch live data."] }) }));
+        return (_jsx(PreviewShell, { hint: `view${designMode ? ' · design' : ''}`, children: _jsxs(PreviewMessage, { tone: "warn", children: ["This view has no object binding yet. Set the bound ", _jsx("code", { children: "Object" }), " in the right panel to fetch live data and field options."] }) }));
+    }
+    // -------------------------------------------------------------------------
+    // Form-family view (`viewKind: 'form'`): render the record form layout via
+    // `object-form`. The list renderer (`object-view`) has no form layout, so a
+    // form view routed through it just falls back to a bare grid.
+    // -------------------------------------------------------------------------
+    if (draft.viewKind === 'form' && body) {
+        const rawType = String(body.type ?? 'simple');
+        const formSchema = buildFormPreviewSchema(objectName, body);
+        return (_jsx(PreviewShell, { hint: `view · ${rawType} · form${designMode ? ' · design' : ''}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The form view references an object or field that doesn't resolve.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(PreviewModeProvider, { children: _jsx(SchemaRenderer, { schema: formSchema }) }) }) }) }));
     }
     // -------------------------------------------------------------------------
-    // Path B — multi-variant view: delegate to `object-view`, which is what
-    // the runtime route uses. Inject the draft's listViews so the preview
-    // reflects unsaved edits.
+    // Delegate to `object-view` — the same renderer the runtime route uses —
+    // with the draft body injected so the preview reflects unsaved edits.
     // -------------------------------------------------------------------------
-    const defaultViewType = variants[0]?.schema?.type ?? 'grid';
     const schema = React.useMemo(() => ({
         type: 'object-view',
         objectName,
@@ -105,9 +137,5 @@ export function ViewPreview({ name, draft }) {
         showRefresh: true,
         showViewSwitcher: true,
     }), [objectName, defaultViewType, defaultViewId, listViews]);
-    const variantHint = variants
-        .map((v) => v.key)
-        .slice(0, 3)
-        .join(' · ');
-    return (_jsx(PreviewShell, { hint: `view · ${variantHint || 'list'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view references an object or field that doesn't resolve.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+    return (_jsx(PreviewShell, { hint: `view · ${defaultViewType}${designMode ? ' · design' : ''}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view references an object or field that doesn't resolve.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(PreviewModeProvider, { children: _jsx(SchemaRenderer, { schema: schema }) }) }) }) }));
 }

package/dist/views/metadata-admin/previews/block-config.d.ts

@@ -0,0 +1,82 @@
+/**
+ * block-config — per-block configurable property schemas for the page editor.
+ *
+ * The page block inspector renders these as typed fields that edit the block's
+ * `properties` (the spec convention; the renderer hoists `properties.*` to the
+ * top level). Keep each field `name` aligned with the property name the
+ * corresponding renderer reads. Add block types here as they are needed.
+ *
+ * Field kinds:
+ *   text | number | boolean | select  — scalar props
+ *   string-list                       — an array of strings (e.g. field names)
+ *   array (+ itemFields)              — an array of objects (e.g. tab items)
+ */
+/** Where a field/field-list picker resolves its object from:
+ *  - 'page' — the record page's bound object (draft.object)
+ *  - 'self' — a sibling property on the same block (objectProp) */
+export type ObjectSource = {
+    objectFrom: 'page';
+} | {
+    objectFrom: 'self';
+    objectProp: string;
+};
+export type BlockPropField = {
+    name: string;
+    label: string;
+    kind: 'text';
+    placeholder?: string;
+} | {
+    name: string;
+    label: string;
+    kind: 'number';
+    placeholder?: string;
+} | {
+    name: string;
+    label: string;
+    kind: 'boolean';
+} | {
+    name: string;
+    label: string;
+    kind: 'select';
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+} | {
+    name: string;
+    label: string;
+    kind: 'string-list';
+    placeholder?: string;
+} | {
+    name: string;
+    label: string;
+    kind: 'array';
+    itemFields: BlockPropField[];
+    addLabel?: string;
+} | {
+    name: string;
+    label: string;
+    kind: 'color';
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+} | {
+    name: string;
+    label: string;
+    kind: 'object-picker';
+    placeholder?: string;
+} | ({
+    name: string;
+    label: string;
+    kind: 'field-picker';
+    placeholder?: string;
+} & ObjectSource) | ({
+    name: string;
+    label: string;
+    kind: 'field-list';
+    placeholder?: string;
+} & ObjectSource);
+export declare const BLOCK_CONFIG: Record<string, BlockPropField[]>;
+/** Block types that expose a configurable property panel. */
+export declare function blockHasConfig(type: string | undefined): boolean;

package/dist/views/metadata-admin/previews/block-config.js

@@ -0,0 +1,324 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+const ALIGN_OPTS = [
+    { value: 'left', label: 'Left' },
+    { value: 'center', label: 'Center' },
+    { value: 'right', label: 'Right' },
+];
+export const BLOCK_CONFIG = {
+    // ── Data-bound blocks (the high-traffic ones on app pages) ────────────────
+    // These were previously absent, so selecting a table/form/metric on the
+    // canvas opened an inspector with only type/id/className — every binding
+    // (object, columns, filters) lived in source with no UI. Curated fields
+    // cover the common props; anything else surfaces in the generic "Advanced"
+    // section of PageBlockInspector so the panel is never out of sync with source.
+    'object-grid': [
+        { name: 'objectName', label: 'Object', kind: 'object-picker' },
+        { name: 'columns', label: 'Columns', kind: 'field-list', objectFrom: 'self', objectProp: 'objectName' },
+        { name: 'pageSize', label: 'Page size', kind: 'number', placeholder: '20' },
+        { name: 'striped', label: 'Striped rows', kind: 'boolean' },
+        { name: 'bordered', label: 'Bordered', kind: 'boolean' },
+    ],
+    'object-form': [
+        { name: 'objectName', label: 'Object', kind: 'object-picker' },
+        {
+            name: 'mode', label: 'Mode', kind: 'select',
+            options: [
+                { value: 'create', label: 'Create' },
+                { value: 'edit', label: 'Edit' },
+                { value: 'view', label: 'View' },
+            ],
+        },
+        {
+            name: 'formType', label: 'Form type', kind: 'select',
+            options: [
+                { value: 'simple', label: 'Simple' },
+                { value: 'tabbed', label: 'Tabbed' },
+                { value: 'wizard', label: 'Wizard' },
+                { value: 'split', label: 'Split' },
+                { value: 'drawer', label: 'Drawer' },
+                { value: 'modal', label: 'Modal' },
+            ],
+        },
+        {
+            name: 'layout', label: 'Layout', kind: 'select',
+            options: [
+                { value: 'vertical', label: 'Vertical' },
+                { value: 'horizontal', label: 'Horizontal' },
+                { value: 'inline', label: 'Inline' },
+                { value: 'grid', label: 'Grid' },
+            ],
+        },
+        { name: 'columns', label: 'Columns (grid layout)', kind: 'number', placeholder: '2' },
+        { name: 'fields', label: 'Fields', kind: 'field-list', objectFrom: 'self', objectProp: 'objectName' },
+        { name: 'title', label: 'Title', kind: 'text' },
+        { name: 'description', label: 'Description', kind: 'text' },
+    ],
+    'object-metric': [
+        { name: 'objectName', label: 'Object', kind: 'object-picker' },
+        { name: 'label', label: 'Label', kind: 'text' },
+        { name: 'description', label: 'Description', kind: 'text' },
+        { name: 'icon', label: 'Icon', kind: 'text', placeholder: 'lucide icon name' },
+        {
+            name: 'colorVariant', label: 'Color', kind: 'color',
+            options: [
+                { value: 'default', label: 'Default' },
+                { value: 'blue', label: 'Blue' },
+                { value: 'teal', label: 'Teal' },
+                { value: 'orange', label: 'Orange' },
+                { value: 'purple', label: 'Purple' },
+                { value: 'success', label: 'Success' },
+                { value: 'warning', label: 'Warning' },
+                { value: 'danger', label: 'Danger' },
+            ],
+        },
+        {
+            name: 'format', label: 'Format', kind: 'select',
+            options: [
+                { value: 'number', label: 'Number' },
+                { value: 'currency', label: 'Currency' },
+                { value: 'percent', label: 'Percent' },
+            ],
+        },
+        { name: 'prefix', label: 'Prefix', kind: 'text' },
+        { name: 'suffix', label: 'Suffix', kind: 'text' },
+        // `aggregate` ({ field, function }) and `filter` are nested/complex — they
+        // render in the generic Advanced section as editable JSON.
+    ],
+    'object-kanban': [
+        { name: 'objectName', label: 'Object', kind: 'object-picker' },
+        { name: 'groupField', label: 'Group by field', kind: 'field-picker', objectFrom: 'self', objectProp: 'objectName' },
+        { name: 'titleField', label: 'Title field', kind: 'field-picker', objectFrom: 'self', objectProp: 'objectName' },
+        { name: 'cardFields', label: 'Card fields', kind: 'field-list', objectFrom: 'self', objectProp: 'objectName' },
+    ],
+    // ── Layout grid ───────────────────────────────────────────────────────────
+    grid: [
+        { name: 'columns', label: 'Columns', kind: 'number', placeholder: '3' },
+        { name: 'gap', label: 'Gap', kind: 'number', placeholder: '4' },
+    ],
+    // ── Content elements ──────────────────────────────────────────────────────
+    'element:text': [
+        { name: 'content', label: 'Content', kind: 'text', placeholder: 'Text…' },
+        {
+            name: 'variant',
+            label: 'Variant',
+            kind: 'select',
+            options: [
+                { value: 'heading', label: 'Heading' },
+                { value: 'subheading', label: 'Subheading' },
+                { value: 'body', label: 'Body' },
+                { value: 'caption', label: 'Caption' },
+            ],
+        },
+        { name: 'align', label: 'Align', kind: 'select', options: ALIGN_OPTS },
+    ],
+    'element:image': [
+        { name: 'src', label: 'Source URL', kind: 'text', placeholder: 'https://…' },
+        { name: 'alt', label: 'Alt text', kind: 'text' },
+        {
+            name: 'fit',
+            label: 'Fit',
+            kind: 'select',
+            options: [
+                { value: 'cover', label: 'Cover' },
+                { value: 'contain', label: 'Contain' },
+                { value: 'fill', label: 'Fill' },
+            ],
+        },
+    ],
+    // ── Lightweight lists (compact, for simple data) ──────────────────────────
+    'element:definition-list': [
+        {
+            name: 'items',
+            label: 'Items',
+            kind: 'array',
+            addLabel: 'Add item',
+            itemFields: [
+                { name: 'label', label: 'Label', kind: 'text' },
+                { name: 'value', label: 'Value', kind: 'text' },
+            ],
+        },
+        { name: 'columns', label: 'Columns (1 or 2)', kind: 'number', placeholder: '1' },
+        { name: 'inline', label: 'Inline (label · value)', kind: 'boolean' },
+    ],
+    'element:repeater': [
+        { name: 'object', label: 'Object', kind: 'object-picker' },
+        { name: 'titleField', label: 'Title field', kind: 'field-picker', objectFrom: 'self', objectProp: 'object' },
+        { name: 'fields', label: 'Fields', kind: 'field-list', objectFrom: 'self', objectProp: 'object' },
+        { name: 'limit', label: 'Limit', kind: 'number', placeholder: '10' },
+        { name: 'emptyText', label: 'Empty text', kind: 'text' },
+        { name: 'divided', label: 'Dividers between rows', kind: 'boolean' },
+    ],
+    'element:number': [
+        { name: 'object', label: 'Object', kind: 'object-picker' },
+        { name: 'field', label: 'Field', kind: 'field-picker', objectFrom: 'self', objectProp: 'object' },
+        {
+            name: 'aggregate',
+            label: 'Aggregate',
+            kind: 'select',
+            options: [
+                { value: 'count', label: 'Count' },
+                { value: 'sum', label: 'Sum' },
+                { value: 'avg', label: 'Average' },
+                { value: 'min', label: 'Min' },
+                { value: 'max', label: 'Max' },
+            ],
+        },
+        {
+            name: 'format',
+            label: 'Format',
+            kind: 'select',
+            options: [
+                { value: 'number', label: 'Number' },
+                { value: 'currency', label: 'Currency' },
+                { value: 'percent', label: 'Percent' },
+            ],
+        },
+        { name: 'prefix', label: 'Prefix', kind: 'text' },
+        { name: 'suffix', label: 'Suffix', kind: 'text' },
+    ],
+    'element:button': [
+        { name: 'label', label: 'Label', kind: 'text' },
+        {
+            name: 'variant',
+            label: 'Variant',
+            kind: 'select',
+            options: [
+                { value: 'primary', label: 'Primary' },
+                { value: 'secondary', label: 'Secondary' },
+                { value: 'danger', label: 'Danger' },
+                { value: 'ghost', label: 'Ghost' },
+                { value: 'link', label: 'Link' },
+            ],
+        },
+        {
+            name: 'size',
+            label: 'Size',
+            kind: 'select',
+            options: [
+                { value: 'small', label: 'Small' },
+                { value: 'medium', label: 'Medium' },
+                { value: 'large', label: 'Large' },
+            ],
+        },
+        { name: 'icon', label: 'Icon', kind: 'text', placeholder: 'lucide icon name' },
+    ],
+    // ── Layout containers ─────────────────────────────────────────────────────
+    'page:header': [
+        { name: 'title', label: 'Title', kind: 'text' },
+        { name: 'subtitle', label: 'Subtitle', kind: 'text' },
+        { name: 'icon', label: 'Icon', kind: 'text', placeholder: 'lucide icon name' },
+        { name: 'breadcrumb', label: 'Show breadcrumb', kind: 'boolean' },
+    ],
+    'page:card': [
+        { name: 'title', label: 'Title', kind: 'text' },
+        { name: 'bordered', label: 'Bordered', kind: 'boolean' },
+    ],
+    'page:tabs': [
+        {
+            name: 'items',
+            label: 'Tabs',
+            kind: 'array',
+            addLabel: 'Add tab',
+            itemFields: [
+                { name: 'key', label: 'Key', kind: 'text' },
+                { name: 'label', label: 'Label', kind: 'text' },
+            ],
+        },
+    ],
+    'page:accordion': [
+        { name: 'title', label: 'Title', kind: 'text' },
+        {
+            name: 'items',
+            label: 'Sections',
+            kind: 'array',
+            addLabel: 'Add section',
+            itemFields: [
+                { name: 'value', label: 'Key', kind: 'text' },
+                { name: 'label', label: 'Label', kind: 'text' },
+            ],
+        },
+    ],
+    // ── Record context ────────────────────────────────────────────────────────
+    'record:related_list': [
+        { name: 'objectName', label: 'Object', kind: 'object-picker' },
+        { name: 'relationshipField', label: 'Relationship field', kind: 'field-picker', objectFrom: 'self', objectProp: 'objectName' },
+        { name: 'title', label: 'Title', kind: 'text' },
+        { name: 'limit', label: 'Limit', kind: 'number', placeholder: '10' },
+    ],
+    'record:highlights': [
+        { name: 'fields', label: 'Fields', kind: 'field-list', objectFrom: 'page' },
+    ],
+    'record:details': [
+        {
+            name: 'sections',
+            label: 'Sections',
+            kind: 'array',
+            addLabel: 'Add section',
+            itemFields: [
+                { name: 'label', label: 'Label', kind: 'text' },
+                { name: 'columns', label: 'Columns', kind: 'number', placeholder: '2' },
+                { name: 'fields', label: 'Fields', kind: 'field-list', objectFrom: 'page' },
+            ],
+        },
+    ],
+    'record:alert': [
+        {
+            name: 'severity',
+            label: 'Severity',
+            kind: 'select',
+            options: [
+                { value: 'info', label: 'Info' },
+                { value: 'warning', label: 'Warning' },
+                { value: 'error', label: 'Error' },
+                { value: 'success', label: 'Success' },
+            ],
+        },
+        { name: 'title', label: 'Title', kind: 'text' },
+        { name: 'body', label: 'Body', kind: 'text' },
+        { name: 'icon', label: 'Icon', kind: 'text', placeholder: 'lucide icon name' },
+        { name: 'dismissible', label: 'Dismissible', kind: 'boolean' },
+    ],
+    'record:path': [
+        { name: 'statusField', label: 'Status field', kind: 'field-picker', objectFrom: 'page' },
+        {
+            name: 'stages',
+            label: 'Stages',
+            kind: 'array',
+            addLabel: 'Add stage',
+            itemFields: [
+                { name: 'value', label: 'Value', kind: 'text' },
+                { name: 'label', label: 'Label', kind: 'text' },
+            ],
+        },
+    ],
+    'record:quick_actions': [
+        { name: 'actionNames', label: 'Action names', kind: 'string-list', placeholder: 'action name' },
+        {
+            name: 'location',
+            label: 'Location',
+            kind: 'select',
+            options: [
+                { value: 'record_header', label: 'Record header' },
+                { value: 'record_more', label: 'Record more menu' },
+                { value: 'record_section', label: 'Record section' },
+                { value: 'record_related', label: 'Record related' },
+                { value: 'list_toolbar', label: 'List toolbar' },
+                { value: 'list_item', label: 'List item' },
+                { value: 'global_nav', label: 'Global nav' },
+            ],
+        },
+    ],
+    // ── AI ────────────────────────────────────────────────────────────────────
+    'ai:chat_window': [
+        { name: 'agentName', label: 'Agent', kind: 'text', placeholder: 'agent name' },
+        { name: 'placeholder', label: 'Input placeholder', kind: 'text' },
+    ],
+    'ai:input': [
+        { name: 'agentName', label: 'Agent', kind: 'text', placeholder: 'agent name' },
+        { name: 'placeholder', label: 'Input placeholder', kind: 'text' },
+    ],
+};
+/** Block types that expose a configurable property panel. */
+export function blockHasConfig(type) {
+    return !!type && Array.isArray(BLOCK_CONFIG[type]) && BLOCK_CONFIG[type].length > 0;
+}

package/dist/views/metadata-admin/previews/block-types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Catalog of Page-block types, mirrored from the framework's Page
+ * schema (`regions[].components[].type` enum). Grouped + iconified
+ * for the picker UI in PageBlockCanvas.
+ *
+ * Source of truth: keep the IDs in sync with
+ * `@objectstack/spec`'s page protocol. New block types appear in the
+ * `Other` category by default — add a META entry to give them an icon.
+ */
+import { type LucideIcon } from 'lucide-react';
+export type BlockTypeId = 'grid' | 'object-grid' | 'object-form' | 'object-metric' | 'object-kanban' | 'page:header' | 'page:footer' | 'page:sidebar' | 'page:tabs' | 'page:accordion' | 'page:card' | 'page:section' | 'record:details' | 'record:highlights' | 'record:related_list' | 'record:activity' | 'record:chatter' | 'record:path' | 'record:alert' | 'record:quick_actions' | 'record:reference_rail' | 'record:history' | 'nav:menu' | 'nav:breadcrumb' | 'global:search' | 'ai:chat_window' | 'ai:suggestion' | 'element:text' | 'element:number' | 'element:image' | 'element:divider' | 'element:button' | 'element:definition-list' | 'element:repeater';
+export type BlockCategory = 'data' | 'layout' | 'record' | 'navigation' | 'element' | 'ai' | 'misc';
+export interface BlockTypeMeta {
+    id: BlockTypeId;
+    label: string;
+    category: BlockCategory;
+    Icon: LucideIcon;
+}
+export declare const BLOCK_TYPE_META: Record<BlockTypeId, Omit<BlockTypeMeta, 'id'>>;
+export declare const CATEGORY_LABEL_EN: Record<BlockCategory, string>;
+export declare const TYPES_BY_CATEGORY: Array<{
+    category: BlockCategory;
+    types: BlockTypeId[];
+}>;
+/** Fallback icon for unknown block types. */
+export declare const UnknownBlockIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Per-category color tone — keeps block kinds scannable in the page
+ * canvas and picker, mirroring the field-type / nav-kind / node-type
+ * tinting used across the other Studio designers. Class strings are
+ * written out in full so Tailwind's JIT emits them, with light + dark
+ * variants (the app defaults to dark).
+ */
+export interface BlockCategoryTone {
+    icon: string;
+    badge: string;
+}
+export declare const BLOCK_CATEGORY_TONE: Record<BlockCategory, BlockCategoryTone>;
+/** Resolve a category tone for any block `type` string (handles unknowns). */
+export declare function resolveBlockTone(type: string): BlockCategoryTone;