@object-ui/app-shell 6.2.3 → 7.1.0

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;

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

@@ -0,0 +1,110 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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 { PanelTop, PanelBottom, PanelLeft, Folders, ChevronsUpDown, Square, Layers, FileText, Tag, ListChecks, Activity, MessageSquare, Compass, AlertTriangle, Zap, BookOpen, History, Menu, Search, Bot, Sparkles, Type, Hash, Image as ImageIcon, Minus, MousePointerClick, List, Rows3, Box, Table, FormInput, Gauge, Columns3, LayoutGrid, } from 'lucide-react';
+export const BLOCK_TYPE_META = {
+    // Data — object-bound views & layout grid
+    'grid': { label: 'Grid', category: 'data', Icon: LayoutGrid },
+    'object-grid': { label: 'Table', category: 'data', Icon: Table },
+    'object-form': { label: 'Form', category: 'data', Icon: FormInput },
+    'object-metric': { label: 'Metric', category: 'data', Icon: Gauge },
+    'object-kanban': { label: 'Kanban', category: 'data', Icon: Columns3 },
+    // Page layout
+    'page:header': { label: 'Header', category: 'layout', Icon: PanelTop },
+    'page:footer': { label: 'Footer', category: 'layout', Icon: PanelBottom },
+    'page:sidebar': { label: 'Sidebar', category: 'layout', Icon: PanelLeft },
+    'page:tabs': { label: 'Tabs', category: 'layout', Icon: Folders },
+    'page:accordion': { label: 'Accordion', category: 'layout', Icon: ChevronsUpDown },
+    'page:card': { label: 'Card', category: 'layout', Icon: Square },
+    'page:section': { label: 'Section', category: 'layout', Icon: Layers },
+    // Record context
+    'record:details': { label: 'Record details', category: 'record', Icon: FileText },
+    'record:highlights': { label: 'Highlights', category: 'record', Icon: Tag },
+    'record:related_list': { label: 'Related list', category: 'record', Icon: ListChecks },
+    'record:activity': { label: 'Activity timeline', category: 'record', Icon: Activity },
+    'record:chatter': { label: 'Chatter feed', category: 'record', Icon: MessageSquare },
+    'record:path': { label: 'Stage path', category: 'record', Icon: Compass },
+    'record:alert': { label: 'Alert banner', category: 'record', Icon: AlertTriangle },
+    'record:quick_actions': { label: 'Quick actions', category: 'record', Icon: Zap },
+    'record:reference_rail': { label: 'Reference rail', category: 'record', Icon: BookOpen },
+    'record:history': { label: 'History', category: 'record', Icon: History },
+    // Navigation (page-content only; shell singletons are not page blocks)
+    'nav:menu': { label: 'Nav menu', category: 'navigation', Icon: Menu },
+    'nav:breadcrumb': { label: 'Breadcrumb', category: 'navigation', Icon: Compass },
+    'global:search': { label: 'Global search', category: 'navigation', Icon: Search },
+    // AI
+    'ai:chat_window': { label: 'AI chat window', category: 'ai', Icon: Bot },
+    'ai:suggestion': { label: 'AI suggestion', category: 'ai', Icon: Sparkles },
+    // Elements
+    'element:text': { label: 'Text', category: 'element', Icon: Type },
+    'element:number': { label: 'Number', category: 'element', Icon: Hash },
+    'element:image': { label: 'Image', category: 'element', Icon: ImageIcon },
+    'element:divider': { label: 'Divider', category: 'element', Icon: Minus },
+    'element:button': { label: 'Button', category: 'element', Icon: MousePointerClick },
+    'element:definition-list': { label: 'Definition list', category: 'element', Icon: List },
+    'element:repeater': { label: 'Repeater', category: 'element', Icon: Rows3 },
+};
+export const CATEGORY_LABEL_EN = {
+    data: 'Data',
+    layout: 'Layout',
+    record: 'Record context',
+    navigation: 'Navigation',
+    element: 'Elements',
+    ai: 'AI',
+    misc: 'Other',
+};
+export const TYPES_BY_CATEGORY = (() => {
+    const out = {
+        data: [], layout: [], record: [], navigation: [], element: [], ai: [], misc: [],
+    };
+    for (const [id, meta] of Object.entries(BLOCK_TYPE_META)) {
+        out[meta.category].push(id);
+    }
+    return ['data', 'layout', 'record', 'element', 'navigation', 'ai', 'misc']
+        .map((c) => ({ category: c, types: out[c] }))
+        .filter((g) => g.types.length > 0);
+})();
+/** Fallback icon for unknown block types. */
+export const UnknownBlockIcon = Box;
+export const BLOCK_CATEGORY_TONE = {
+    data: {
+        icon: 'text-emerald-500 dark:text-emerald-400',
+        badge: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
+    },
+    layout: {
+        icon: 'text-slate-500 dark:text-slate-400',
+        badge: 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300',
+    },
+    record: {
+        icon: 'text-blue-500 dark:text-blue-400',
+        badge: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
+    },
+    navigation: {
+        icon: 'text-indigo-500 dark:text-indigo-400',
+        badge: 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-900 dark:bg-indigo-950/40 dark:text-indigo-300',
+    },
+    element: {
+        icon: 'text-teal-500 dark:text-teal-400',
+        badge: 'border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-900 dark:bg-teal-950/40 dark:text-teal-300',
+    },
+    ai: {
+        icon: 'text-violet-500 dark:text-violet-400',
+        badge: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-300',
+    },
+    misc: {
+        icon: 'text-zinc-500 dark:text-zinc-400',
+        badge: 'border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-400',
+    },
+};
+/** Resolve a category tone for any block `type` string (handles unknowns). */
+export function resolveBlockTone(type) {
+    const meta = BLOCK_TYPE_META[type];
+    return BLOCK_CATEGORY_TONE[meta?.category ?? 'misc'];
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Canonical field-type catalog for the object form designer.
+ *
+ * Mirrors `@objectstack/spec`'s `FieldType` discriminated union (46
+ * entries as of spec 7.1) but grouped into the 9 user-facing
+ * categories used by the type picker and inspector.
+ *
+ * Adding a new type here is enough — the canvas and inspector both
+ * key off `FIELD_TYPE_META` for icon / label / category lookup, and
+ * the picker auto-includes any new entry.
+ */
+import type { LucideIcon } from 'lucide-react';
+export type FieldTypeId = 'text' | 'textarea' | 'email' | 'url' | 'phone' | 'password' | 'markdown' | 'html' | 'richtext' | 'number' | 'currency' | 'percent' | 'date' | 'datetime' | 'time' | 'boolean' | 'toggle' | 'select' | 'multiselect' | 'radio' | 'checkboxes' | 'lookup' | 'master_detail' | 'tree' | 'image' | 'file' | 'avatar' | 'video' | 'audio' | 'formula' | 'summary' | 'autonumber' | 'composite' | 'repeater' | 'location' | 'address' | 'code' | 'json' | 'color' | 'rating' | 'slider' | 'signature' | 'qrcode' | 'progress' | 'tags' | 'vector';
+export type FieldTypeCategory = 'text' | 'number' | 'date' | 'logic' | 'selection' | 'relation' | 'media' | 'calculated' | 'advanced';
+export interface FieldTypeMeta {
+    id: FieldTypeId;
+    label: string;
+    /** Brief Chinese label for the picker / type badge. */
+    labelZh: string;
+    category: FieldTypeCategory;
+    Icon: LucideIcon;
+}
+export declare const FIELD_TYPE_META: Record<FieldTypeId, FieldTypeMeta>;
+export declare const CATEGORY_ORDER: FieldTypeCategory[];
+export declare const CATEGORY_LABEL_EN: Record<FieldTypeCategory, string>;
+/**
+ * Per-category color tone. Lets the canvas, type badges, and type
+ * picker tint a field by its category so the form is scannable at a
+ * glance (text vs number vs relation vs media …) instead of a wall of
+ * neutral-grey rows. Colour is used purely as a category *signal* —
+ * subtle tints, never loud fills — consistent with the console's
+ * content-first visual language.
+ *
+ * Class strings are written out in full (not composed) so Tailwind's
+ * JIT can see and emit every variant.
+ */
+export interface CategoryTone {
+    /** Icon stroke colour. */
+    icon: string;
+    /** Tinted type-badge classes (border + bg + text), light & dark. */
+    badge: string;
+}
+export declare const CATEGORY_TONE: Record<FieldTypeCategory, CategoryTone>;
+/** Resolve the colour tone for any field-type string (unknown → advanced). */
+export declare function resolveCategoryTone(type: unknown): CategoryTone;
+export declare const CATEGORY_LABEL_ZH: Record<FieldTypeCategory, string>;
+/** All type ids grouped by category, in category order. */
+export declare const TYPES_BY_CATEGORY: Array<{
+    category: FieldTypeCategory;
+    types: FieldTypeId[];
+}>;
+/** Resolve metadata for any type string, including unknown values. */
+export declare function resolveFieldTypeMeta(type: unknown): FieldTypeMeta;

package/dist/views/metadata-admin/previews/field-types.js

@@ -0,0 +1,97 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+import { Type, AlignLeft, AtSign, Globe, Phone, Lock, FileText, Code, Sparkles, Hash, DollarSign, Percent, Calendar, Clock, ToggleLeft, ListOrdered, ListChecks, CircleDot, CheckSquare, Link2, Workflow, Network, Image, Paperclip, UserCircle, Video, Music, Calculator, Sigma, Boxes, Repeat2, MapPin, Map, FileJson, Palette, Star, SlidersHorizontal, PenLine, QrCode, BarChart3, Tags, Atom, } from 'lucide-react';
+const M = (id, label, labelZh, category, Icon) => ({ id, label, labelZh, category, Icon });
+export const FIELD_TYPE_META = {
+    text: M('text', 'Text', '单行文本', 'text', Type),
+    textarea: M('textarea', 'Text Area', '多行文本', 'text', AlignLeft),
+    email: M('email', 'Email', '邮箱', 'text', AtSign),
+    url: M('url', 'URL', '网址', 'text', Globe),
+    phone: M('phone', 'Phone', '电话', 'text', Phone),
+    password: M('password', 'Password', '密码', 'text', Lock),
+    markdown: M('markdown', 'Markdown', 'Markdown', 'text', FileText),
+    html: M('html', 'HTML', 'HTML', 'text', Code),
+    richtext: M('richtext', 'Rich Text', '富文本', 'text', Sparkles),
+    number: M('number', 'Number', '数字', 'number', Hash),
+    currency: M('currency', 'Currency', '货币', 'number', DollarSign),
+    percent: M('percent', 'Percent', '百分比', 'number', Percent),
+    date: M('date', 'Date', '日期', 'date', Calendar),
+    datetime: M('datetime', 'Date/Time', '日期时间', 'date', Calendar),
+    time: M('time', 'Time', '时间', 'date', Clock),
+    boolean: M('boolean', 'Checkbox', '复选框', 'logic', CheckSquare),
+    toggle: M('toggle', 'Toggle', '开关', 'logic', ToggleLeft),
+    select: M('select', 'Picklist', '下拉选择', 'selection', ListOrdered),
+    multiselect: M('multiselect', 'Multi-Select', '多选', 'selection', ListChecks),
+    radio: M('radio', 'Radio', '单选', 'selection', CircleDot),
+    checkboxes: M('checkboxes', 'Checkboxes', '复选组', 'selection', ListChecks),
+    lookup: M('lookup', 'Lookup', '查找关系', 'relation', Link2),
+    master_detail: M('master_detail', 'Master-Detail', '主从关系', 'relation', Workflow),
+    tree: M('tree', 'Tree', '树形关系', 'relation', Network),
+    image: M('image', 'Image', '图片', 'media', Image),
+    file: M('file', 'File', '文件', 'media', Paperclip),
+    avatar: M('avatar', 'Avatar', '头像', 'media', UserCircle),
+    video: M('video', 'Video', '视频', 'media', Video),
+    audio: M('audio', 'Audio', '音频', 'media', Music),
+    formula: M('formula', 'Formula', '公式', 'calculated', Calculator),
+    summary: M('summary', 'Rollup', '汇总', 'calculated', Sigma),
+    autonumber: M('autonumber', 'Auto Number', '自动编号', 'calculated', Hash),
+    composite: M('composite', 'Composite', '复合字段', 'advanced', Boxes),
+    repeater: M('repeater', 'Repeater', '重复字段', 'advanced', Repeat2),
+    location: M('location', 'Location', '地理坐标', 'advanced', MapPin),
+    address: M('address', 'Address', '地址', 'advanced', Map),
+    code: M('code', 'Code', '代码', 'advanced', Code),
+    json: M('json', 'JSON', 'JSON', 'advanced', FileJson),
+    color: M('color', 'Color', '颜色', 'advanced', Palette),
+    rating: M('rating', 'Rating', '评分', 'advanced', Star),
+    slider: M('slider', 'Slider', '滑块', 'advanced', SlidersHorizontal),
+    signature: M('signature', 'Signature', '签名', 'advanced', PenLine),
+    qrcode: M('qrcode', 'QR Code', '二维码', 'advanced', QrCode),
+    progress: M('progress', 'Progress', '进度条', 'advanced', BarChart3),
+    tags: M('tags', 'Tags', '标签', 'advanced', Tags),
+    vector: M('vector', 'Vector', '向量', 'advanced', Atom),
+};
+export const CATEGORY_ORDER = [
+    'text', 'number', 'date', 'logic', 'selection', 'relation', 'media', 'calculated', 'advanced',
+];
+export const CATEGORY_LABEL_EN = {
+    text: 'Text', number: 'Number', date: 'Date & Time', logic: 'Logic',
+    selection: 'Selection', relation: 'Relation', media: 'Media',
+    calculated: 'Calculated', advanced: 'Advanced',
+};
+export const CATEGORY_TONE = {
+    text: { icon: 'text-slate-500 dark:text-slate-400', badge: 'border-slate-200 bg-slate-50 text-slate-600 dark:border-slate-700/50 dark:bg-slate-800/40 dark:text-slate-300' },
+    number: { icon: 'text-blue-600 dark:text-blue-400', badge: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800/50 dark:bg-blue-950/40 dark:text-blue-300' },
+    date: { icon: 'text-violet-600 dark:text-violet-400', badge: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800/50 dark:bg-violet-950/40 dark:text-violet-300' },
+    logic: { icon: 'text-amber-600 dark:text-amber-400', badge: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/40 dark:text-amber-300' },
+    selection: { icon: 'text-teal-600 dark:text-teal-400', badge: 'border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-800/50 dark:bg-teal-950/40 dark:text-teal-300' },
+    relation: { icon: 'text-indigo-600 dark:text-indigo-400', badge: 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800/50 dark:bg-indigo-950/40 dark:text-indigo-300' },
+    media: { icon: 'text-pink-600 dark:text-pink-400', badge: 'border-pink-200 bg-pink-50 text-pink-700 dark:border-pink-800/50 dark:bg-pink-950/40 dark:text-pink-300' },
+    calculated: { icon: 'text-emerald-600 dark:text-emerald-400', badge: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/50 dark:bg-emerald-950/40 dark:text-emerald-300' },
+    advanced: { icon: 'text-zinc-500 dark:text-zinc-400', badge: 'border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-700/50 dark:bg-zinc-800/40 dark:text-zinc-300' },
+};
+/** Resolve the colour tone for any field-type string (unknown → advanced). */
+export function resolveCategoryTone(type) {
+    return CATEGORY_TONE[resolveFieldTypeMeta(type).category];
+}
+export const CATEGORY_LABEL_ZH = {
+    text: '文本', number: '数值', date: '日期/时间', logic: '逻辑',
+    selection: '选择', relation: '关系', media: '媒体',
+    calculated: '计算', advanced: '高级',
+};
+/** All type ids grouped by category, in category order. */
+export const TYPES_BY_CATEGORY = CATEGORY_ORDER.map((category) => ({
+    category,
+    types: Object.keys(FIELD_TYPE_META).filter((id) => FIELD_TYPE_META[id].category === category),
+}));
+/** Resolve metadata for any type string, including unknown values. */
+export function resolveFieldTypeMeta(type) {
+    if (typeof type === 'string' && type in FIELD_TYPE_META) {
+        return FIELD_TYPE_META[type];
+    }
+    return {
+        id: 'text',
+        label: typeof type === 'string' ? type : 'unknown',
+        labelZh: typeof type === 'string' ? type : '未知',
+        category: 'advanced',
+        Icon: Type,
+    };
+}