@object-ui/app-shell 11.2.0 → 11.4.0

package/dist/views/studio-design/BuilderLanding.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * BuilderLanding — the application builder's front door.
+ *
+ * The journey from login: Home → Studio app → 「应用构建」 (this page, embedded
+ * in the app chrome via the `studio:builder` component ref) → pick or create a
+ * writable base package → the full-screen pillar builder
+ * (`/studio/:packageId/:tab`). Also served standalone at bare `/studio` so the
+ * builder is bookmarkable.
+ *
+ * Writable bases (where authoring happens) lead; read-only code packages are
+ * listed secondary for browsing. Writability is the shared display heuristic
+ * from packages-io — the ADR-0070 D4 gate stays the server-side authority.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Boxes, Hammer, Lock, Plus, Loader2, Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { toFieldNameLoose } from '../metadata-admin/previews/object-fields-io';
+import { fetchPackages, createBasePackage, duplicatePackage, PACKAGE_ID_RE } from './packages-io';
+export function BuilderLanding() {
+    const navigate = useNavigate();
+    const [pkgs, setPkgs] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [creating, setCreating] = React.useState(false);
+    const [newName, setNewName] = React.useState('');
+    const [newId, setNewId] = React.useState('');
+    const [idTouched, setIdTouched] = React.useState(false);
+    const [busy, setBusy] = React.useState(false);
+    React.useEffect(() => {
+        let cancelled = false;
+        fetchPackages()
+            .then((list) => {
+            if (!cancelled)
+                setPkgs(list);
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setError(e instanceof Error ? e.message : String(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const open = (id) => navigate(`/studio/${encodeURIComponent(id)}/data`);
+    const doCreate = async () => {
+        const name = newName.trim();
+        const id = newId.trim();
+        if (!name || !PACKAGE_ID_RE.test(id))
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await createBasePackage(id, name);
+            open(id);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const writable = pkgs?.filter((p) => p.writable) ?? [];
+    const readonly = pkgs?.filter((p) => !p.writable) ?? [];
+    // 复制为可写副本 (ADR-0070 D4): a read-only code package is a STARTING POINT,
+    // not a dead end — duplicate re-namespaces it into a new writable base and
+    // drops the user straight into its builder. This is also the real substance
+    // behind Home's "Start with a template".
+    const [dupFor, setDupFor] = React.useState(null);
+    const [dupName, setDupName] = React.useState('');
+    const [dupId, setDupId] = React.useState('');
+    const [dupBusy, setDupBusy] = React.useState(false);
+    const [dupErr, setDupErr] = React.useState(null);
+    const startDup = (p) => {
+        setDupFor(p.id);
+        setDupName(`${p.name} 副本`);
+        setDupId(`${p.id}-copy`);
+        setDupErr(null);
+    };
+    const doDup = async () => {
+        if (!dupFor)
+            return;
+        const id = dupId.trim();
+        const name = dupName.trim();
+        if (!PACKAGE_ID_RE.test(id) || !name)
+            return;
+        setDupBusy(true);
+        setDupErr(null);
+        try {
+            await duplicatePackage(dupFor, id, name);
+            toast.success(`已复制为可写软件包「${name}」`);
+            open(id);
+        }
+        catch (e) {
+            setDupErr(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setDupBusy(false);
+        }
+    };
+    return (_jsxs("div", { className: "mx-auto w-full max-w-3xl p-6", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(Hammer, { className: "h-5 w-5 text-primary" }), _jsx("h1", { className: "text-lg font-semibold", children: "\u5E94\u7528\u6784\u5EFA" })] }), _jsxs("p", { className: "mb-5 text-xs leading-5 text-muted-foreground", children: ["\u5728\u4E00\u4E2A", _jsx("b", { children: "\u53EF\u5199\u8F6F\u4EF6\u5305" }), "\u91CC\u8BBE\u8BA1\u5BF9\u8C61\u3001\u8868\u5355\u3001\u81EA\u52A8\u5316\u4E0E\u754C\u9762;\u7F16\u8F91\u5B58\u4E3A\u8349\u7A3F,\u6574\u5305\u4E00\u6B21\u53D1\u5E03\u3002 \u6E90\u7801\u52A0\u8F7D\u7684\u8F6F\u4EF6\u5305\u4E3A\u53EA\u8BFB(\u4EC5\u53EF\u6D4F\u89C8)\u3002"] }), error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive", children: error })), _jsx("h2", { className: "mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "\u6211\u7684\u8F6F\u4EF6\u5305(\u53EF\u5199)" }), _jsxs("div", { className: "mb-6 grid grid-cols-1 gap-2 sm:grid-cols-2", children: [pkgs === null && _jsx("p", { className: "text-[11px] text-muted-foreground", children: "\u52A0\u8F7D\u4E2D\u2026" }), pkgs !== null && writable.length === 0 && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "\u8FD8\u6CA1\u6709\u53EF\u5199\u8F6F\u4EF6\u5305 \u2014 \u4ECE\u53F3\u4FA7\u65B0\u5EFA\u4E00\u4E2A\u5F00\u59CB\u3002" })), writable.map((p) => (_jsxs("div", { className: "rounded-lg border bg-background", children: [_jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5", children: [_jsxs("button", { type: "button", onClick: () => open(p.id), className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [_jsx(Boxes, { className: "h-4 w-4 shrink-0 text-primary" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: p.name }), _jsx("span", { className: "block truncate font-mono text-[10px] text-muted-foreground", children: p.id })] })] }), _jsx("span", { className: "rounded bg-emerald-400/15 px-1.5 py-0.5 text-[10px] text-emerald-600 dark:text-emerald-300", children: "\u53EF\u5199" }), _jsxs("button", { type: "button", onClick: () => (dupFor === p.id ? setDupFor(null) : startDup(p)), title: "\u590D\u5236\u8FD9\u4E2A\u8F6F\u4EF6\u5305\u4E3A\u65B0\u7684\u53EF\u5199\u526F\u672C(Airtable \u7684 duplicate base)", className: "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Copy, { className: "h-3 w-3" }), " \u590D\u5236"] })] }), dupFor === p.id && (_jsxs("div", { className: "flex flex-col gap-1.5 border-t px-3 py-2.5", children: [_jsx("input", { autoFocus: true, value: dupName, onChange: (e) => setDupName(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                void doDup();
+                                            if (e.key === 'Escape')
+                                                setDupFor(null);
+                                        }, placeholder: "\u526F\u672C\u540D\u79F0", className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: dupId, onChange: (e) => setDupId(e.target.value.toLowerCase().replace(/[^a-z0-9_.-]/g, '')), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                void doDup();
+                                            if (e.key === 'Escape')
+                                                setDupFor(null);
+                                        }, placeholder: "\u526F\u672C\u5305 ID", className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), dupErr && _jsx("p", { className: "text-[10px] text-destructive", children: dupErr }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doDup(), disabled: dupBusy || !dupName.trim() || !PACKAGE_ID_RE.test(dupId.trim()), className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [dupBusy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Copy, { className: "h-3 w-3" }), "\u590D\u5236\u5E76\u8FDB\u5165\u6784\u5EFA\u5668"] }), _jsx("button", { type: "button", onClick: () => setDupFor(null), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: "\u53D6\u6D88" })] })] }))] }, p.id))), creating ? (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-lg border border-dashed bg-muted/20 px-3 py-2.5", children: [_jsx("input", { autoFocus: true, value: newName, onChange: (e) => {
+                                    setNewName(e.target.value);
+                                    if (!idTouched) {
+                                        const slug = toFieldNameLoose(e.target.value).replace(/_/g, '-');
+                                        setNewId(slug ? `com.example.${slug}` : '');
+                                    }
+                                }, onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        void doCreate();
+                                    if (e.key === 'Escape')
+                                        setCreating(false);
+                                }, placeholder: "\u540D\u79F0(\u5982:\u7EF4\u4FEE\u4E2D\u5FC3)", className: "h-7 w-full rounded-md border bg-background px-2 text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsx("input", { value: newId, onChange: (e) => {
+                                    setIdTouched(true);
+                                    setNewId(e.target.value.toLowerCase().replace(/[^a-z0-9_.-]/g, ''));
+                                }, onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        void doCreate();
+                                    if (e.key === 'Escape')
+                                        setCreating(false);
+                                }, placeholder: "\u5305 ID(\u5982:com.example.repairs)", className: "h-7 w-full rounded-md border bg-background px-2 font-mono text-[11px] outline-none focus:ring-1 focus:ring-primary" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: () => void doCreate(), disabled: busy || !newName.trim() || !PACKAGE_ID_RE.test(newId.trim()), className: "inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground disabled:opacity-50", children: [busy ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Plus, { className: "h-3 w-3" }), "\u521B\u5EFA\u5E76\u5F00\u59CB\u6784\u5EFA"] }), _jsx("button", { type: "button", onClick: () => setCreating(false), className: "rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted", children: "\u53D6\u6D88" })] })] })) : (_jsxs("button", { type: "button", onClick: () => setCreating(true), className: "flex items-center justify-center gap-1.5 rounded-lg border border-dashed px-3 py-2.5 text-xs text-muted-foreground hover:border-primary/50 hover:text-foreground", children: [_jsx(Plus, { className: "h-4 w-4" }), " \u65B0\u5EFA\u8F6F\u4EF6\u5305"] }))] }), readonly.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "\u5DF2\u5B89\u88C5(\u53EA\u8BFB \u00B7 \u53EF\u6D4F\u89C8)" }), _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: readonly.map((p) => (_jsxs("button", { type: "button", onClick: () => open(p.id), className: "flex items-center gap-2.5 rounded-lg border bg-muted/20 px-3 py-2.5 text-left hover:bg-muted/40", children: [_jsx(Boxes, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px]", children: p.name }), _jsx("span", { className: "block truncate font-mono text-[10px] text-muted-foreground", children: p.id })] }), _jsxs("span", { className: "inline-flex items-center gap-0.5 rounded bg-amber-400/15 px-1.5 py-0.5 text-[10px] text-amber-600 dark:text-amber-300", children: [_jsx(Lock, { className: "h-2.5 w-2.5" }), " \u53EA\u8BFB"] })] }, p.id))) })] }))] }));
+}

package/dist/views/studio-design/ObjectFormDesigner.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ObjectFormDesigner — the WYSIWYG form-layout designer for the Studio Data
+ * pillar's Form view. An admin arranges the object's default form exactly as
+ * end users will see it: fields grouped into **sections** (the object's
+ * `fieldGroups`), drag-reordered within a section and dragged **across**
+ * sections, with per-field selection opening the same protocol field inspector
+ * the grid uses.
+ *
+ * Build boundary: this component is only the drag/section CHROME. The data
+ * model + all mutations are the existing, tested `object-fields-io` helpers
+ * (readFields/writeFields · readGroups/addGroup/renameGroup/removeGroup/
+ * moveGroup · clearFieldGroup · groupEntries), and section membership +
+ * in-group order persist to the object draft (`fields[].group` + `fieldGroups`)
+ * via the pillar's existing draft → publish. No new metadata shape.
+ */
+import * as React from 'react';
+export interface ObjectFormDesignerProps {
+    /** Object metadata draft (reads `fields` + `fieldGroups`). */
+    draft: Record<string, unknown>;
+    /** Field names to hide from the layout (system/audit) but preserve on write. */
+    systemFieldNames: Set<string>;
+    /** Persist a partial object-draft patch (fields / fieldGroups) + mark dirty. */
+    onChange: (patch: Record<string, unknown>) => void;
+    /** Currently selected field name (highlighted). */
+    selectedField?: string | null;
+    /** Select a field → opens the shared field inspector. */
+    onSelectField: (name: string) => void;
+    /** Append a new field (reuses the pillar's add-field). */
+    onAddField: () => void;
+}
+export declare function ObjectFormDesigner({ draft, systemFieldNames, onChange, selectedField, onSelectField, onAddField, }: ObjectFormDesignerProps): React.ReactElement;

package/dist/views/studio-design/ObjectFormDesigner.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ObjectFormDesigner — the WYSIWYG form-layout designer for the Studio Data
+ * pillar's Form view. An admin arranges the object's default form exactly as
+ * end users will see it: fields grouped into **sections** (the object's
+ * `fieldGroups`), drag-reordered within a section and dragged **across**
+ * sections, with per-field selection opening the same protocol field inspector
+ * the grid uses.
+ *
+ * Build boundary: this component is only the drag/section CHROME. The data
+ * model + all mutations are the existing, tested `object-fields-io` helpers
+ * (readFields/writeFields · readGroups/addGroup/renameGroup/removeGroup/
+ * moveGroup · clearFieldGroup · groupEntries), and section membership +
+ * in-group order persist to the object draft (`fields[].group` + `fieldGroups`)
+ * via the pillar's existing draft → publish. No new metadata shape.
+ */
+import * as React from 'react';
+import { DndContext, DragOverlay, PointerSensor, KeyboardSensor, useSensor, useSensors, useDroppable, pointerWithin, } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove, sortableKeyboardCoordinates, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, Plus, Trash2, ChevronUp, ChevronDown, Rows3 } from 'lucide-react';
+import { readFields, writeFields, readGroups, addGroup, renameGroup, removeGroup, moveGroup, clearFieldGroup, } from '../metadata-admin/previews/object-fields-io';
+const UNGROUPED = '__ungrouped__';
+const cid = (key) => `g:${key}`; // container (section) droppable id
+const fid = (name) => `f:${name}`; // sortable field id
+const unCid = (id) => id.slice(2);
+const unFid = (id) => id.slice(2);
+/** A faithful, non-interactive preview of a field's control (by type). */
+function FieldControlPreview({ type }) {
+    const box = 'mt-1 flex items-center rounded-md border bg-muted/30 px-2 text-[11px] text-muted-foreground';
+    switch (type) {
+        case 'select':
+        case 'radio':
+        case 'lookup':
+        case 'reference':
+        case 'user':
+        case 'multiselect':
+            return (_jsxs("div", { className: `${box} h-7 justify-between`, children: [_jsx("span", { children: type === 'lookup' || type === 'reference' || type === 'user' ? '搜索…' : '请选择…' }), _jsx("span", { children: "\u25BE" })] }));
+        case 'textarea':
+        case 'html':
+        case 'markdown':
+        case 'json':
+        case 'code':
+            return _jsx("div", { className: `${box} h-14 items-start pt-1.5`, children: "\u2026" });
+        case 'boolean':
+        case 'checkbox':
+        case 'switch':
+            return (_jsx("div", { className: "mt-1 flex items-center", children: _jsx("span", { className: "h-4 w-7 rounded-full bg-muted" }) }));
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return _jsx("div", { className: `${box} h-7`, children: "0.00" });
+        case 'date':
+        case 'datetime':
+        case 'time':
+            return _jsx("div", { className: `${box} h-7`, children: "\u9009\u62E9\u65E5\u671F\u2026" });
+        default:
+            return _jsx("div", { className: `${box} h-7`, children: "\u00A0" });
+    }
+}
+/** One draggable field card inside a section. */
+function SortableField({ entry, selected, onSelect, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: fid(entry.name) });
+    const type = String(entry.def.type ?? 'text');
+    const label = String(entry.def.label ?? entry.name);
+    const required = !!entry.def.required;
+    return (_jsxs("div", { ref: setNodeRef, style: { transform: CSS.Transform.toString(transform), transition }, onClick: onSelect, ...attributes, ...listeners, "aria-label": `${label} — 点选改属性,拖动排序`, className: 'group relative flex cursor-grab touch-none select-none items-start gap-1.5 rounded-md border bg-background px-2 py-2 active:cursor-grabbing ' +
+            (selected ? 'ring-2 ring-primary' : 'hover:border-foreground/25') +
+            (isDragging ? ' opacity-40' : ''), children: [_jsx("span", { className: "mt-0.5 text-muted-foreground opacity-0 group-hover:opacity-100", children: _jsx(GripVertical, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1 text-xs font-medium", children: [_jsx("span", { className: "truncate", children: label }), required && _jsx("span", { className: "text-destructive", children: "*" }), _jsx("span", { className: "ml-1 rounded bg-muted px-1 py-px text-[9px] uppercase text-muted-foreground", children: type })] }), _jsx(FieldControlPreview, { type: type })] })] }));
+}
+/** A section (declared group or the implicit ungrouped bucket) = a drop zone. */
+function Section({ containerId, title, fieldIds, isDeclared, canMoveUp, canMoveDown, entryByName, selectedField, onSelectField, onRename, onDelete, onMove, }) {
+    const { setNodeRef, isOver } = useDroppable({ id: containerId });
+    return (_jsxs("div", { className: 'rounded-lg border ' + (isOver ? 'border-primary bg-primary/5' : 'bg-muted/20'), children: [_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-1.5", children: [isDeclared ? (_jsx("input", { defaultValue: title, onBlur: (e) => e.target.value.trim() && e.target.value !== title && onRename(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                e.target.blur();
+                        }, className: "min-w-0 flex-1 rounded bg-transparent px-1 py-0.5 text-[13px] font-medium outline-none hover:bg-muted focus:bg-background focus:ring-1 focus:ring-primary" })) : (_jsx("span", { className: "flex-1 px-1 text-[13px] font-medium text-muted-foreground", children: title })), isDeclared && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: !canMoveUp, onClick: () => onMove(-1), "aria-label": "\u4E0A\u79FB\u5206\u7EC4", className: "rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30", children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", disabled: !canMoveDown, onClick: () => onMove(1), "aria-label": "\u4E0B\u79FB\u5206\u7EC4", className: "rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: onDelete, "aria-label": "\u5220\u9664\u5206\u7EC4", title: "\u5220\u9664\u5206\u7EC4(\u5B57\u6BB5\u5F52\u4E3A\u672A\u5206\u7EC4)", className: "rounded p-0.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }))] }), _jsx(SortableContext, { items: fieldIds, strategy: verticalListSortingStrategy, children: _jsxs("div", { ref: setNodeRef, className: "grid min-h-[52px] grid-cols-2 gap-2 p-2.5", children: [fieldIds.length === 0 && (_jsx("div", { className: "col-span-2 flex items-center justify-center rounded-md border border-dashed py-3 text-[11px] text-muted-foreground", children: "\u62D6\u5B57\u6BB5\u5230\u8FD9\u91CC" })), fieldIds.map((id) => {
+                            const name = unFid(id);
+                            const entry = entryByName.get(name);
+                            if (!entry)
+                                return null;
+                            return (_jsx(SortableField, { entry: entry, selected: selectedField === name, onSelect: () => onSelectField(name) }, id));
+                        })] }) })] }));
+}
+export function ObjectFormDesigner({ draft, systemFieldNames, onChange, selectedField, onSelectField, onAddField, }) {
+    const view = React.useMemo(() => readFields(draft.fields), [draft.fields]);
+    const groups = React.useMemo(() => readGroups(draft.fieldGroups), [draft.fieldGroups]);
+    const entryByName = React.useMemo(() => new Map(view.entries.map((e) => [e.name, e])), [view]);
+    // Container order: declared groups (in order) then the ungrouped bucket.
+    const containerOrder = React.useMemo(() => [...groups.map((g) => cid(g.key)), cid(UNGROUPED)], [groups]);
+    const labelOf = React.useMemo(() => {
+        const m = new Map();
+        for (const g of groups)
+            m.set(cid(g.key), g.label || g.key);
+        m.set(cid(UNGROUPED), '未分组');
+        return m;
+    }, [groups]);
+    // Derive container → ordered field ids from the draft (editable fields only;
+    // system/audit fields are preserved on write but never shown in the layout).
+    const derived = React.useMemo(() => {
+        const map = {};
+        for (const c of containerOrder)
+            map[c] = [];
+        for (const e of view.entries) {
+            if (systemFieldNames.has(e.name))
+                continue;
+            const g = typeof e.def.group === 'string' ? e.def.group : '';
+            const target = g && map[cid(g)] ? cid(g) : cid(UNGROUPED);
+            map[target].push(fid(e.name));
+        }
+        return map;
+    }, [view.entries, containerOrder, systemFieldNames]);
+    const [items, setItems] = React.useState(derived);
+    const [activeId, setActiveId] = React.useState(null);
+    // Re-sync from the draft whenever it changes and we are not mid-drag.
+    React.useEffect(() => {
+        if (!activeId)
+            setItems(derived);
+    }, [derived, activeId]);
+    // Latest items snapshot for drag-end math — robust whether or not onDragOver
+    // fired (e.g. synthetic/automated drags that skip intermediate move events).
+    const itemsRef = React.useRef(items);
+    React.useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const findContainer = React.useCallback((id) => {
+        if (id.startsWith('g:'))
+            return id;
+        return Object.keys(items).find((k) => items[k].includes(id));
+    }, [items]);
+    /** Flatten the container map back to `fields` (stamping group + order) and persist. */
+    const commit = React.useCallback((next) => {
+        const editable = [];
+        for (const c of containerOrder) {
+            const groupKey = unCid(c);
+            for (const id of next[c] ?? []) {
+                const e = entryByName.get(unFid(id));
+                if (!e)
+                    continue;
+                const def = { ...e.def };
+                if (groupKey === UNGROUPED)
+                    delete def.group;
+                else
+                    def.group = groupKey;
+                editable.push({ name: e.name, def });
+            }
+        }
+        const system = view.entries.filter((e) => systemFieldNames.has(e.name));
+        const finalView = { shape: view.shape, entries: [...system, ...editable] };
+        onChange({ fields: writeFields(finalView) });
+    }, [containerOrder, entryByName, view, systemFieldNames, onChange]);
+    const onDragStart = (e) => setActiveId(String(e.active.id));
+    const onDragOver = (e) => {
+        const activeIdStr = String(e.active.id);
+        const overId = e.over ? String(e.over.id) : null;
+        if (!overId)
+            return;
+        const from = findContainer(activeIdStr);
+        const to = findContainer(overId);
+        if (!from || !to || from === to)
+            return;
+        setItems((prev) => {
+            const fromItems = prev[from] ?? [];
+            const toItems = prev[to] ?? [];
+            const overIndex = overId.startsWith('g:') ? toItems.length : toItems.indexOf(overId);
+            const insertAt = overIndex < 0 ? toItems.length : overIndex;
+            return {
+                ...prev,
+                [from]: fromItems.filter((i) => i !== activeIdStr),
+                [to]: [...toItems.slice(0, insertAt), activeIdStr, ...toItems.slice(insertAt)],
+            };
+        });
+    };
+    const onDragEnd = (e) => {
+        setActiveId(null);
+        const activeIdStr = String(e.active.id);
+        const overId = e.over ? String(e.over.id) : null;
+        if (!overId)
+            return;
+        const prev = itemsRef.current;
+        const inContainer = (id) => id.startsWith('g:') && id in prev ? id : Object.keys(prev).find((k) => prev[k].includes(id));
+        const from = inContainer(activeIdStr);
+        const to = inContainer(overId);
+        if (!from || !to)
+            return;
+        let next;
+        if (from === to) {
+            const list = prev[from];
+            const oldIndex = list.indexOf(activeIdStr);
+            const newIndex = overId.startsWith('g:') ? list.length - 1 : list.indexOf(overId);
+            if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) {
+                commit(prev);
+                return;
+            }
+            next = { ...prev, [from]: arrayMove(list, oldIndex, newIndex) };
+        }
+        else {
+            const fromItems = prev[from].filter((i) => i !== activeIdStr);
+            const toItems = prev[to];
+            const overIndex = overId.startsWith('g:') ? toItems.length : toItems.indexOf(overId);
+            const insertAt = overIndex < 0 ? toItems.length : overIndex;
+            next = {
+                ...prev,
+                [from]: fromItems,
+                [to]: [...toItems.slice(0, insertAt), activeIdStr, ...toItems.slice(insertAt)],
+            };
+        }
+        setItems(next);
+        commit(next);
+    };
+    const addSection = () => onChange({ fieldGroups: addGroup(groups, '新分组') });
+    const renameSection = (key, label) => onChange({ fieldGroups: renameGroup(groups, key, label) });
+    const moveSection = (key, dir) => onChange({ fieldGroups: moveGroup(groups, key, dir) });
+    const deleteSection = (key) => onChange({ fieldGroups: removeGroup(groups, key), fields: writeFields(clearFieldGroup(view, key)) });
+    const activeEntry = activeId && !activeId.startsWith('g:') ? entryByName.get(unFid(activeId)) : null;
+    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-auto rounded-lg border bg-background p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground", children: [_jsx(Rows3, { className: "h-3.5 w-3.5" }), " \u62D6\u52A8\u5B57\u6BB5\u6392\u5E8F / \u62D6\u5230\u5176\u5B83\u5206\u7EC4 \u00B7 \u70B9\u9009\u5B57\u6BB5\u6539\u5C5E\u6027"] }), _jsxs("button", { type: "button", onClick: addSection, className: "ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " \u6DFB\u52A0\u5206\u7EC4"] }), _jsxs("button", { type: "button", onClick: onAddField, className: "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " \u6DFB\u52A0\u5B57\u6BB5"] })] }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: () => setActiveId(null), children: [_jsx("div", { className: "mx-auto flex max-w-3xl flex-col gap-3", children: containerOrder.map((c) => {
+                            const isUngrouped = c === cid(UNGROUPED);
+                            // Hide the ungrouped bucket only when it is empty AND groups exist.
+                            if (isUngrouped && (items[c]?.length ?? 0) === 0 && groups.length > 0)
+                                return null;
+                            const declaredIdx = groups.findIndex((g) => cid(g.key) === c);
+                            return (_jsx(Section, { containerId: c, title: labelOf.get(c) ?? '未分组', fieldIds: items[c] ?? [], isDeclared: !isUngrouped, canMoveUp: declaredIdx > 0, canMoveDown: declaredIdx >= 0 && declaredIdx < groups.length - 1, entryByName: entryByName, selectedField: selectedField, onSelectField: onSelectField, onRename: (label) => renameSection(unCid(c), label), onDelete: () => deleteSection(unCid(c)), onMove: (dir) => moveSection(unCid(c), dir) }, c));
+                        }) }), _jsx(DragOverlay, { children: activeEntry ? (_jsxs("div", { className: "flex items-center gap-1.5 rounded-md border bg-background px-2 py-2 shadow-lg", children: [_jsx(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "text-xs font-medium", children: String(activeEntry.def.label ?? activeEntry.name) })] })) : null })] })] }));
+}

package/dist/views/studio-design/ObjectSettingsPanel.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Data pillar — object Settings view (builder-ui Phase B).
+ *
+ * Two stacked cards:
+ *  1. Basics — hosts the SAME default inspector metadata-admin uses
+ *     (`getMetadataDefaultInspector('object')` → ObjectDefaultInspector):
+ *     label / pluralLabel / icon / description, one implementation for both
+ *     surfaces.
+ *  2. Semantic roles (ADR-0085) — the cross-surface presentation roles:
+ *     `nameField`, `stageField` (string | false | unset), `highlightFields`.
+ *     These are the ONLY presentation knobs the protocol carries, so the
+ *     builder must make them directly editable — otherwise designers fall
+ *     back to guessing which heuristic picked their title/stepper/columns.
+ */
+import React from 'react';
+import type { SupportedLocale } from '../metadata-admin/i18n';
+export declare function ObjectSettingsPanel({ name, draft, onPatch, disabled, locale, }: {
+    name: string;
+    draft: Record<string, unknown>;
+    onPatch: (patch: Record<string, unknown>) => void;
+    disabled?: boolean;
+    locale: SupportedLocale;
+}): React.JSX.Element;

package/dist/views/studio-design/ObjectSettingsPanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Data pillar — object Settings view (builder-ui Phase B).
+ *
+ * Two stacked cards:
+ *  1. Basics — hosts the SAME default inspector metadata-admin uses
+ *     (`getMetadataDefaultInspector('object')` → ObjectDefaultInspector):
+ *     label / pluralLabel / icon / description, one implementation for both
+ *     surfaces.
+ *  2. Semantic roles (ADR-0085) — the cross-surface presentation roles:
+ *     `nameField`, `stageField` (string | false | unset), `highlightFields`.
+ *     These are the ONLY presentation knobs the protocol carries, so the
+ *     builder must make them directly editable — otherwise designers fall
+ *     back to guessing which heuristic picked their title/stepper/columns.
+ */
+import React from 'react';
+import { Settings2, Sparkles, X } from 'lucide-react';
+import { getMetadataDefaultInspector } from '../metadata-admin/default-inspector-registry';
+import { readFields } from '../metadata-admin/previews/object-fields-io';
+export function ObjectSettingsPanel({ name, draft, onPatch, disabled, locale, }) {
+    const DefaultInspector = getMetadataDefaultInspector('object');
+    const fields = React.useMemo(() => readFields(draft.fields).entries, [draft.fields]);
+    const selectFields = fields.filter((e) => (e.def.type ?? 'text') === 'select');
+    const nameField = typeof draft.nameField === 'string' ? draft.nameField : '';
+    const stageField = draft.stageField;
+    const highlightFields = Array.isArray(draft.highlightFields)
+        ? draft.highlightFields.filter((f) => typeof f === 'string')
+        : [];
+    const highlightCandidates = fields.filter((e) => e.def.hidden !== true && !highlightFields.includes(e.name));
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto", children: [_jsxs("section", { className: "rounded-lg border", children: [_jsxs("header", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(Settings2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u57FA\u7840\u4FE1\u606F" })] }), _jsx("div", { className: "max-w-xl p-3", children: DefaultInspector ? (_jsx(DefaultInspector, { type: "object", name: name, draft: draft, onPatch: onPatch, readOnly: !!disabled, locale: locale })) : (_jsx("p", { className: "text-[12px] text-muted-foreground", children: "\u672A\u6CE8\u518C\u5BF9\u8C61\u9ED8\u8BA4\u68C0\u67E5\u5668\u3002" })) })] }), _jsxs("section", { className: "rounded-lg border", children: [_jsxs("header", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u8BED\u4E49\u89D2\u8272" }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: "\u8DE8\u8868\u5355 / \u5217\u8868 / \u8BE6\u60C5\u7EDF\u4E00\u751F\u6548(ADR-0085)" })] }), _jsxs("div", { className: "grid max-w-xl gap-4 p-3", children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u8BB0\u5F55\u540D\u79F0\u5B57\u6BB5(nameField)\u2014\u2014 \u6807\u9898\u3001\u94FE\u63A5\u3001\u5F15\u7528\u5904\u663E\u793A\u7684\u5B57\u6BB5" }), _jsxs("select", { value: nameField, disabled: disabled, onChange: (e) => onPatch(e.target.value ? { nameField: e.target.value } : { nameField: undefined }), className: "w-full rounded border bg-background px-2 py-1 text-[12px]", children: [_jsx("option", { value: "", children: "(\u81EA\u52A8\u63A8\u5BFC)" }), fields.map((e) => (_jsx("option", { value: e.name, children: typeof e.def.label === 'string' ? `${e.def.label} (${e.name})` : e.name }, e.name)))] })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u751F\u547D\u5468\u671F\u5B57\u6BB5(stageField)\u2014\u2014 \u8BE6\u60C5\u9875\u9876\u90E8\u8FDB\u5EA6\u6761\u6309\u5B83\u7684\u9009\u9879\u6E32\u67D3" }), _jsxs("select", { value: stageField === false ? '__none__' : (stageField ?? ''), disabled: disabled, onChange: (e) => {
+                                            const v = e.target.value;
+                                            onPatch({ stageField: v === '__none__' ? false : v === '' ? undefined : v });
+                                        }, className: "w-full rounded border bg-background px-2 py-1 text-[12px]", children: [_jsx("option", { value: "", children: "(\u81EA\u52A8\u63A2\u6D4B status/stage \u7B49\u5B57\u6BB5\u540D)" }), _jsx("option", { value: "__none__", children: "\u65E0 \u2014\u2014 \u8FD9\u4E2A\u5BF9\u8C61\u6CA1\u6709\u7EBF\u6027\u6D41\u7A0B,\u4E0D\u663E\u793A\u8FDB\u5EA6\u6761" }), selectFields.map((e) => (_jsx("option", { value: e.name, children: typeof e.def.label === 'string' ? `${e.def.label} (${e.name})` : e.name }, e.name)))] })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u91CD\u70B9\u5B57\u6BB5(highlightFields)\u2014\u2014 \u9ED8\u8BA4\u5217\u8868\u5217\u3001\u5361\u7247\u3001\u8BE6\u60C5\u9876\u680F\u53D6\u524D 4;\u987A\u5E8F\u5373\u5C55\u793A\u987A\u5E8F" }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [highlightFields.map((f) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: [f, !disabled && (_jsx("button", { type: "button", "aria-label": `移除 ${f}`, onClick: () => onPatch({ highlightFields: highlightFields.filter((x) => x !== f) }), className: "rounded-full hover:bg-primary/20", children: _jsx(X, { className: "h-3 w-3" }) }))] }, f))), !disabled && highlightCandidates.length > 0 && (_jsxs("select", { value: "", onChange: (e) => {
+                                                    if (!e.target.value)
+                                                        return;
+                                                    onPatch({ highlightFields: [...highlightFields, e.target.value] });
+                                                }, className: "rounded border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground", children: [_jsx("option", { value: "", children: "+ \u6DFB\u52A0\u5B57\u6BB5\u2026" }), highlightCandidates.map((e) => (_jsx("option", { value: e.name, children: typeof e.def.label === 'string' ? `${e.def.label} (${e.name})` : e.name }, e.name)))] })), highlightFields.length === 0 && (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "(\u672A\u58F0\u660E \u2014\u2014 \u5404\u5904\u6309\u542F\u53D1\u5F0F\u81EA\u52A8\u6311\u9009)" }))] })] })] })] })] }));
+}

package/dist/views/studio-design/ObjectValidationsPanel.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Data pillar — Validations view (builder-ui Phase B).
+ *
+ * Edits `ObjectSchema.validations` (spec `ValidationRuleSchema`, a
+ * discriminated union on `type`). The no-code surface targets the `script`
+ * rule — `{ type: 'script', name, message, condition }` where the CEL
+ * `condition` is a FAIL predicate (TRUE ⇒ the write is rejected with
+ * `message`). The condition editor reuses the metadata-admin
+ * `ConditionBuilder`, fed with the DRAFT field list so unpublished fields
+ * are pickable.
+ *
+ * Non-`script` rule types (state_machine / format / cross_field / json /
+ * conditional) are surfaced read-only with their type badge — they carry
+ * structures a row editor can't honestly express; authoring them stays in
+ * code for now. Showing them (rather than hiding) keeps the list a truthful
+ * inventory of everything that will run on save.
+ */
+import React from 'react';
+export declare function ObjectValidationsPanel({ draft, onPatch, disabled, }: {
+    draft: Record<string, unknown>;
+    onPatch: (patch: Record<string, unknown>) => void;
+    disabled?: boolean;
+}): React.JSX.Element;

package/dist/views/studio-design/ObjectValidationsPanel.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Data pillar — Validations view (builder-ui Phase B).
+ *
+ * Edits `ObjectSchema.validations` (spec `ValidationRuleSchema`, a
+ * discriminated union on `type`). The no-code surface targets the `script`
+ * rule — `{ type: 'script', name, message, condition }` where the CEL
+ * `condition` is a FAIL predicate (TRUE ⇒ the write is rejected with
+ * `message`). The condition editor reuses the metadata-admin
+ * `ConditionBuilder`, fed with the DRAFT field list so unpublished fields
+ * are pickable.
+ *
+ * Non-`script` rule types (state_machine / format / cross_field / json /
+ * conditional) are surfaced read-only with their type badge — they carry
+ * structures a row editor can't honestly express; authoring them stays in
+ * code for now. Showing them (rather than hiding) keeps the list a truthful
+ * inventory of everything that will run on save.
+ */
+import React from 'react';
+import { Plus, Trash2, ShieldAlert } from 'lucide-react';
+import { ConditionBuilder } from '../metadata-admin/inspectors/ConditionBuilder';
+import { readFields } from '../metadata-admin/previews/object-fields-io';
+function readRules(input) {
+    if (!Array.isArray(input))
+        return [];
+    return input.filter((r) => !!r && typeof r === 'object');
+}
+function nextRuleName(existing) {
+    let i = existing.length + 1;
+    let name = `validation_${i}`;
+    const taken = new Set(existing);
+    while (taken.has(name))
+        name = `validation_${++i}`;
+    return name;
+}
+export function ObjectValidationsPanel({ draft, onPatch, disabled, }) {
+    const rules = readRules(draft.validations);
+    const [selected, setSelected] = React.useState(null);
+    const fields = React.useMemo(() => readFields(draft.fields).entries.map((e) => ({
+        name: e.name,
+        label: typeof e.def.label === 'string' ? e.def.label : undefined,
+        hidden: e.def.hidden === true,
+    })), [draft.fields]);
+    const commit = (next) => onPatch({ validations: next });
+    const patchRule = (name, patch) => commit(rules.map((r) => (r.name === name ? { ...r, ...patch } : r)));
+    const addRule = () => {
+        const name = nextRuleName(rules.map((r) => r.name ?? ''));
+        // `condition: 'false'` — a VALID never-failing CEL placeholder. An empty
+        // condition is rejected by the spec's ExpressionInputSchema, which would
+        // 422 the whole draft save and dead-end the create flow (the same
+        // required-field-blocks-authoring class as dashboard `layout` / page
+        // `regions`). A rule that never fires is safe to save mid-authoring.
+        commit([...rules, { type: 'script', name, message: '', condition: 'false', severity: 'error' }]);
+        setSelected(name);
+    };
+    const removeRule = (name) => {
+        commit(rules.filter((r) => r.name !== name));
+        if (selected === name)
+            setSelected(null);
+    };
+    const sel = rules.find((r) => r.name === selected) ?? null;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [_jsxs("div", { className: "flex w-72 shrink-0 flex-col rounded-lg border", children: [_jsxs("header", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(ShieldAlert, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[13px] font-medium", children: "\u9A8C\u8BC1\u89C4\u5219" }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["(", rules.length, ")"] }), !disabled && (_jsxs("button", { type: "button", onClick: addRule, className: "ml-auto inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted", children: [_jsx(Plus, { className: "h-3 w-3" }), " \u65B0\u589E"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: rules.length === 0 ? (_jsxs("p", { className: "px-3 py-6 text-center text-[11px] leading-5 text-muted-foreground", children: ["\u8FD8\u6CA1\u6709\u9A8C\u8BC1\u89C4\u5219\u3002", _jsx("br", {}), "\u89C4\u5219\u5728\u4FDD\u5B58\u8BB0\u5F55\u65F6\u6267\u884C:\u6761\u4EF6\u4E3A\u771F \u21D2 \u62D2\u7EDD\u4FDD\u5B58\u5E76\u63D0\u793A\u6D88\u606F\u3002"] })) : (rules.map((r) => (_jsxs("button", { type: "button", onClick: () => setSelected(r.name ?? null), className: 'flex w-full items-start gap-2 border-b px-3 py-2 text-left text-[12px] ' +
+                                (selected === r.name ? 'bg-muted' : 'hover:bg-muted/50'), children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: r.label || r.name }), _jsx("span", { className: "block truncate text-[11px] text-muted-foreground", children: r.message || '(无消息)' })] }), _jsx("span", { className: 'shrink-0 rounded-full px-1.5 py-0.5 text-[10px] ' +
+                                        (r.type === 'script'
+                                            ? 'bg-primary/10 text-primary'
+                                            : 'bg-muted text-muted-foreground'), children: r.type ?? 'script' })] }, r.name)))) })] }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col rounded-lg border", children: !sel ? (_jsx("div", { className: "flex flex-1 items-center justify-center p-6 text-center text-[12px] text-muted-foreground", children: "\u9009\u62E9\u5DE6\u4FA7\u7684\u89C4\u5219\u8FDB\u884C\u7F16\u8F91,\u6216\u70B9\u300C\u65B0\u589E\u300D\u521B\u5EFA\u4E00\u6761\u3002" })) : sel.type !== 'script' ? (_jsxs("div", { className: "flex flex-1 flex-col gap-2 p-4", children: [_jsxs("p", { className: "text-[13px] font-medium", children: [sel.label || sel.name, _jsx("span", { className: "ml-2 rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: sel.type })] }), _jsxs("p", { className: "text-[12px] leading-5 text-muted-foreground", children: ["\u300C", sel.type, "\u300D\u7C7B\u578B\u7684\u89C4\u5219\u5E26\u6709\u7ED3\u6784\u5316\u914D\u7F6E(\u72B6\u6001\u673A\u8F6C\u79FB\u8868 / \u683C\u5F0F\u7EA6\u675F\u7B49),\u6682\u4E0D\u652F\u6301\u5728\u6B64\u7F16\u8F91 \u2014\u2014 \u8BF7\u5728\u4EE3\u7801\u5305\u4E2D\u7EF4\u62A4\u3002\u6D88\u606F:", sel.message || '(无)'] }), !disabled && (_jsxs("button", { type: "button", onClick: () => removeRule(sel.name), className: "mt-auto inline-flex w-fit items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10", children: [_jsx(Trash2, { className: "h-3 w-3" }), " \u5220\u9664\u89C4\u5219"] }))] })) : (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-4", children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u89C4\u5219\u540D(snake_case,\u552F\u4E00)" }), _jsx("input", { value: sel.name ?? '', disabled: disabled, onChange: (e) => {
+                                        const name = e.target.value;
+                                        patchRule(sel.name, { name });
+                                        setSelected(name);
+                                    }, className: "w-full rounded border bg-background px-2 py-1 text-[12px]" })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: "\u9519\u8BEF\u6D88\u606F(\u6821\u9A8C\u5931\u8D25\u65F6\u5C55\u793A\u7ED9\u7528\u6237)" }), _jsx("input", { value: sel.message ?? '', disabled: disabled, onChange: (e) => patchRule(sel.name, { message: e.target.value }), placeholder: "\u4F8B\u5982:\u5B8C\u6210\u65E5\u671F\u5728\u72B6\u6001\u4E3A\u5DF2\u5B8C\u6210\u65F6\u5FC5\u586B", className: "w-full rounded border bg-background px-2 py-1 text-[12px]" })] }), _jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-[11px] text-muted-foreground", children: ["\u5931\u8D25\u6761\u4EF6(CEL)\u2014\u2014 \u6761\u4EF6\u4E3A ", _jsx("b", { children: "\u771F" }), " \u65F6,\u62D2\u7EDD\u4FDD\u5B58\u5E76\u663E\u793A\u4E0A\u9762\u7684\u6D88\u606F;\u65B0\u89C4\u5219\u9ED8\u8BA4", ' ', _jsx("code", { className: "rounded bg-muted px-1", children: "false" }), "(\u6C38\u4E0D\u89E6\u53D1),\u8BF7\u6539\u4E3A\u771F\u5B9E\u6761\u4EF6"] }), _jsx(ConditionBuilder, { value: typeof sel.condition === 'string' ? sel.condition : '', onCommit: (cel) => patchRule(sel.name, { condition: cel }), fields: fields, disabled: disabled })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-[12px]", children: [_jsx("span", { className: "text-muted-foreground", children: "\u4E25\u91CD\u5EA6" }), _jsxs("select", { value: sel.severity ?? 'error', disabled: disabled, onChange: (e) => patchRule(sel.name, { severity: e.target.value }), className: "rounded border bg-background px-1.5 py-0.5 text-[12px]", children: [_jsx("option", { value: "error", children: "error(\u62D2\u7EDD\u4FDD\u5B58)" }), _jsx("option", { value: "warning", children: "warning" }), _jsx("option", { value: "info", children: "info" })] })] }), _jsxs("label", { className: "flex items-center gap-1.5 text-[12px]", children: [_jsx("input", { type: "checkbox", checked: sel.active !== false, disabled: disabled, onChange: (e) => patchRule(sel.name, { active: e.target.checked }) }), "\u542F\u7528"] }), !disabled && (_jsxs("button", { type: "button", onClick: () => removeRule(sel.name), className: "ml-auto inline-flex items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10", children: [_jsx(Trash2, { className: "h-3 w-3" }), " \u5220\u9664"] }))] })] })) })] }));
+}

package/dist/views/studio-design/StudioDesignSurface.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StudioDesignSurface — the open-source WYSIWYG design surface (ADR-0080).
+ *
+ * Routed as /studio/:packageId/{data|automations|interfaces} — three pillars,
+ * each composed AROUND existing renderers (no new editor code):
+ *   - Interfaces: the real App navigation tree → live canvas (getMetadataPreview)
+ *     + inspector (getMetadataInspector), edits persisting via draft → publish.
+ *   - Data: the package's objects → fields + record grid.
+ *   - Automations: flows → FlowPreview (default OFF / review-then-enable).
+ *
+ * Open-core boundary: the left AI copilot is NOT part of the open-source
+ * surface — it is an injected slot (`aiSlot`) the cloud edition fills.
+ */
+import * as React from 'react';
+export interface StudioDesignSurfaceProps {
+    /** Open-core slot — the cloud edition injects its AI copilot panel here. */
+    aiSlot?: React.ReactNode;
+}
+export declare function StudioDesignSurface({ aiSlot }: StudioDesignSurfaceProps): React.ReactElement;
+export default StudioDesignSurface;