@braedonsaunders/appkit-forms 0.2.2

package/production-form-designer.js

@@ -0,0 +1,1124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GeneratedText, useGeneratedTranslations, GeneratedValue, useGeneratedValueTranslations, } from './generated-copy.js';
+// Form designer.
+//
+// Three-pane layout:
+//   - Left: field palette (categorized, with icons), section list + workflow step editor
+//   - Middle: canvas — sections and fields, palette drops, drag reorder, click-to-select
+//   - Right: properties panel for the current selection (form / section / field) with
+//            tabs for Basic / Validation / Logic / Default / Calc
+//
+// All edits mutate a local copy of FormSchemaV1. Publishing writes a new
+// immutable version through the host adapter.
+import { useEffect, useRef, useState, useTransition, useMemo } from 'react';
+import { AlignLeft, ArrowDown, ArrowUp, Calculator, Calendar, Check, CheckCircle2, CheckSquare, ChevronDown, ClipboardCheck, Eye, FileText, Globe2, GripVertical, Hash, Image as ImageIcon, ListChecks, Mail, MapPin, Mic, Minus, Pencil, Pin, PinOff, Phone, Plus, Radio, Save, ShieldCheck, Signal, Sliders, Star, ToggleLeft, Table2, Trash2, Type, Upload, User, Users, Video, } from 'lucide-react';
+import { Reorder, useDragControls } from 'framer-motion';
+import { Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent, CardHeader, CardTitle, Drawer, Input, Label, Select, Textarea, toast, } from '@braedonsaunders/appkit-ui';
+import { FIELD_TYPES, entityKindForPicker, storesResponseValue, } from '@braedonsaunders/appkit-forms-core';
+import { localizeText } from '@braedonsaunders/appkit-i18n';
+import { RecordBehaviorPanel } from './record-behavior-panel.js';
+import { RecordActionsPanel } from './record-actions-panel.js';
+import { RecordListPanel } from './record-list-panel.js';
+import { readText, writeText } from './text.js';
+import { LogicBuilder } from './logic-builder.js';
+import { FormulaBuilder } from './formula-builder.js';
+import { CanvasEditor, defaultBox } from './canvas-editor.js';
+import { BarChart3, Bold, Briefcase, Building2, Database, Info, LayoutGrid, ListOrdered, Map as MapIcon, MapPinned, MousePointerClick, PanelLeft, PenTool, RefreshCw, ScanLine, Send, SlidersHorizontal, Sparkles, Workflow as WorkflowIcon, } from 'lucide-react';
+// --- Palette ---------------------------------------------------------------
+// Field-type icon registry. Falls back to a generic Type icon for unknowns.
+const FIELD_ICONS = {
+    text: Type,
+    long_text: AlignLeft,
+    number: Hash,
+    currency: Calculator,
+    percentage: Hash,
+    slider: Sliders,
+    gps: MapPin,
+    matrix: LayoutGrid,
+    date: Calendar,
+    datetime: Calendar,
+    time: Calendar,
+    email: Mail,
+    phone: Phone,
+    url: FileText,
+    radio: Radio,
+    checkbox_group: CheckSquare,
+    select: ChevronDown,
+    multi_select: ListChecks,
+    pass_fail_na: ShieldCheck,
+    rating: Star,
+    yes_no_comment: ToggleLeft,
+    traffic_light: Signal,
+    person_picker: User,
+    multi_person_picker: Users,
+    customer_picker: Building2,
+    project_picker: Briefcase,
+    site_picker: MapPin,
+    area_picker: MapIcon,
+    gl_account: Database,
+    party: Building2,
+    photo: ImageIcon,
+    photo_upload: ImageIcon,
+    photo_ai: Sparkles,
+    photo_annotated: MapPinned,
+    file: Upload,
+    video: Video,
+    audio: Mic,
+    sketch: PenTool,
+    signature: Pencil,
+    typed_attestation: CheckCircle2,
+    formula: Calculator,
+    risk_matrix: Sliders,
+    heading: Type,
+    paragraph: AlignLeft,
+    divider: Minus,
+    table: Table2,
+    lookup: Database,
+    data_table: Table2,
+    metric: BarChart3,
+    qr_scanner: ScanLine,
+    ranking: ListOrdered,
+    rich_text: Bold,
+    address: MapPin,
+};
+// One element per concept — no duplicates across groups.
+const PALETTE_PRIMARY = [
+    {
+        label: 'Common',
+        types: [
+            'text',
+            'long_text',
+            'number',
+            'currency',
+            'percentage',
+            'slider',
+            'date',
+            'table',
+            'select',
+            'checkbox_group',
+            'pass_fail_na',
+            'signature',
+            'photo',
+            'file',
+            'person_picker',
+            'formula',
+        ],
+    },
+];
+const PALETTE_MORE = [
+    {
+        label: 'Date & contact',
+        types: ['datetime', 'time', 'gps', 'address', 'email', 'phone', 'url', 'qr_scanner'],
+    },
+    { label: 'Choice', types: ['radio', 'multi_select', 'ranking', 'matrix'] },
+    { label: 'Scoring', types: ['rating', 'yes_no_comment', 'traffic_light'] },
+    {
+        label: 'Pickers',
+        types: [
+            'multi_person_picker',
+            'customer_picker',
+            'project_picker',
+            'site_picker',
+            'area_picker',
+            'gl_account',
+            'party',
+        ],
+    },
+    { label: 'Media', types: ['photo_ai', 'photo_annotated', 'sketch', 'video', 'audio'] },
+    { label: 'Computed', types: ['risk_matrix', 'typed_attestation'] },
+    { label: 'Data', types: ['lookup', 'data_table', 'metric'] },
+    { label: 'Display', types: ['heading', 'paragraph', 'rich_text', 'divider'] },
+];
+function newId(prefix) {
+    return `${prefix}_${globalThis.crypto.randomUUID()}`;
+}
+function emptyField(type) {
+    return {
+        id: newId('f'),
+        type,
+        label: { en: FIELD_TYPES[type].label },
+        required: false,
+    };
+}
+function emptyStep() {
+    return {
+        key: newId('step'),
+        title: { en: 'New step' },
+        assignee: { type: 'expression', expr: '$submitter' },
+    };
+}
+const KIND_META = {
+    form: { label: 'Form', cls: 'bg-primary-subtle text-primary' },
+    wizard: {
+        label: 'Wizard',
+        cls: 'bg-primary-subtle text-primary',
+    },
+    checklist: {
+        label: 'Checklist',
+        cls: 'bg-success-subtle text-success',
+    },
+    register: {
+        label: 'Register',
+        cls: 'bg-warning-subtle text-warning',
+    },
+    mini_app: {
+        label: 'Mini-app',
+        cls: 'bg-primary-subtle text-primary',
+    },
+};
+function normalizeDesignerSchema(schema) {
+    return {
+        ...structuredClone(schema),
+        workflow: schema.workflow ?? {
+            steps: [{ key: 'submit', title: 'Submit', assignee: { type: 'expression', expr: '$submitter' } }],
+        },
+    };
+}
+export function ProductionFormDesigner({ adapter, templateId, templateName, templateKind = 'form', initialSchema, currentVersion, initialSurface = 'build', overview, recordConfig, allowedRoles = [], roles = [], flows = [], recordActionAdapter, dataSources = [], dataSourcesLoading = false, onRefreshDataSources, renderFlows, renderAssistant, backHref, recordsHref, assignmentCreateHref, assignmentsHref, dataSourcesHref, publishedHref, canPin = false, pinned = false, onSchemaChange, locale, defaultLocale, enabledLocales, localeLabels, className, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const languages = (value) => localeLabels?.[value] ?? value.toUpperCase();
+    const [schema, setSchema] = useState(() => normalizeDesignerSchema(initialSchema));
+    const [appName, setAppName] = useState(templateName);
+    const [recordConfiguration, setRecordConfiguration] = useState(recordConfig ?? {});
+    const [isPinned, setIsPinned] = useState(pinned);
+    // Unified editor: left rail tab + right surface.
+    const [leftTab, setLeftTab] = useState('build');
+    const [surface, setSurface] = useState(initialSurface === 'flows' && renderFlows ? 'flows' : 'build');
+    const [designerTab, setDesignerTab] = useState(() => initialSchema.tabs?.[0]?.id ?? '');
+    const [showAiAssistant, setShowAiAssistant] = useState(false);
+    // The element type currently being dragged from the left palette — read by the
+    // canvas on drop. (HTML5 dataTransfer is also set, for the browser's drag UX.)
+    const dragElementRef = useRef(null);
+    const [dropSectionId, setDropSectionId] = useState(null);
+    const [selection, setSelection] = useState({ kind: 'form' });
+    // Which right-hand flyout is open. Preview + properties used to be permanent
+    // columns (too cramped); now they slide in on demand.
+    const [rightPanel, setRightPanel] = useState('none');
+    const [showPublish, setShowPublish] = useState(false);
+    const [pending, start] = useTransition();
+    const [error, setError] = useState(null);
+    const [changelog, setChangelog] = useState('');
+    const [contentLocale, setContentLocale] = useState(locale);
+    useEffect(() => onSchemaChange?.(schema), [onSchemaChange, schema]);
+    // Selectable fields for the records-list "List" tab — real answer fields only
+    // (content-only display elements carry no data to show in a column).
+    const listFields = useMemo(() => {
+        const skip = new Set(['heading', 'paragraph', 'divider', 'metric']);
+        const out = [];
+        for (const sec of schema.sections)
+            for (const f of sec.fields) {
+                if (skip.has(f.type))
+                    continue;
+                out.push({
+                    id: f.id,
+                    label: localizeText(f.label, contentLocale, f.id, defaultLocale),
+                });
+            }
+        return out;
+    }, [contentLocale, defaultLocale, schema]);
+    // Current records-list config lives under recordConfig.list (the page passes
+    // the full recordConfig jsonb; its type omits `list`, but it's there at runtime).
+    const listConfig = recordConfiguration.list;
+    let selectedField = null;
+    if (selection.kind === 'field') {
+        for (const sec of schema.sections) {
+            const f = sec.fields.find((x) => x.id === selection.fieldId);
+            if (f) {
+                selectedField = { section: sec, field: f };
+                break;
+            }
+        }
+    }
+    const selectedSection = useMemo(() => {
+        if (selection.kind !== 'section')
+            return null;
+        return schema.sections.find((s) => s.id === selection.sectionId) ?? null;
+    }, [schema, selection]);
+    function update(fn) {
+        setSchema((s) => fn(structuredClone(s)));
+    }
+    // Selecting something opens the properties flyout; workflow is edited in the
+    // canvas so it just switches the canvas view.
+    function selectField(sectionId, fieldId) {
+        setSelection({ kind: 'field', sectionId, fieldId });
+        setRightPanel('props');
+    }
+    function selectSection(sectionId) {
+        setSelection({ kind: 'section', sectionId });
+        setRightPanel('props');
+    }
+    function openWorkflow() {
+        setSelection({ kind: 'workflow' });
+        setRightPanel('none');
+    }
+    function addSection() {
+        const id = newId('sec');
+        update((draft) => {
+            draft.sections.push({
+                id,
+                title: { en: 'New section' },
+                fields: [],
+                // New sections land in the active designer tab (if the app uses tabs).
+                ...(draft.tabs?.length ? { tabId: designerTab || draft.tabs[0].id } : {}),
+            });
+            return draft;
+        });
+        selectSection(id);
+    }
+    // --- Tabs (presentational app pages) -------------------------------------
+    function addTab() {
+        const id = newId('tab');
+        update((draft) => {
+            const tabs = draft.tabs ?? [];
+            const title = { en: `Tab ${tabs.length + 1}` };
+            if (tabs.length === 0) {
+                // First tab: pull every existing section into it so nothing is orphaned.
+                draft.tabs = [{ id, title }];
+                for (const s of draft.sections)
+                    s.tabId = id;
+            }
+            else {
+                draft.tabs = [...tabs, { id, title }];
+            }
+            return draft;
+        });
+        setDesignerTab(id);
+    }
+    function renameTab(id, title) {
+        update((draft) => {
+            const t = draft.tabs?.find((x) => x.id === id);
+            if (t)
+                t.title = writeText(t.title, title, contentLocale);
+            return draft;
+        });
+    }
+    function deleteTab(id) {
+        update((draft) => {
+            const remaining = (draft.tabs ?? []).filter((t) => t.id !== id);
+            const fallback = remaining[0]?.id;
+            for (const s of draft.sections)
+                if (s.tabId === id)
+                    s.tabId = fallback;
+            draft.tabs = remaining.length ? remaining : undefined;
+            return draft;
+        });
+        setDesignerTab((cur) => (cur === id ? (schema.tabs?.find((t) => t.id !== id)?.id ?? '') : cur));
+    }
+    function addField(sectionId, type) {
+        const f = emptyField(type);
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec)
+                return draft;
+            sec.fields.push(f);
+            // If the section is in canvas mode, also place the new element on the grid
+            // (append below everything) — otherwise a clicked element would be invisible.
+            if (sec.canvas) {
+                const box = defaultBox(type);
+                const bottomY = sec.canvas.items.reduce((m, it) => Math.max(m, it.y + it.h), 0);
+                sec.canvas = {
+                    ...sec.canvas,
+                    items: [
+                        ...sec.canvas.items,
+                        { i: f.id, x: 0, y: bottomY, w: Math.min(box.w * 2, 12), h: box.h },
+                    ],
+                };
+            }
+            return draft;
+        });
+        selectField(sectionId, f.id);
+    }
+    function deleteField(sectionId, fieldId) {
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec)
+                return draft;
+            sec.fields = sec.fields.filter((f) => f.id !== fieldId);
+            // Keep the canvas layout in sync — drop the deleted field's box.
+            if (sec.canvas)
+                sec.canvas = { ...sec.canvas, items: sec.canvas.items.filter((it) => it.i !== fieldId) };
+            return draft;
+        });
+        if (selection.kind === 'field' && selection.fieldId === fieldId) {
+            setSelection({ kind: 'section', sectionId });
+        }
+    }
+    function deleteSection(sectionId) {
+        update((draft) => {
+            draft.sections = draft.sections.filter((s) => s.id !== sectionId);
+            return draft;
+        });
+        setSelection({ kind: 'form' });
+    }
+    function moveField(sectionId, fieldId, delta) {
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec)
+                return draft;
+            const i = sec.fields.findIndex((f) => f.id === fieldId);
+            const j = i + delta;
+            if (i < 0 || j < 0 || j >= sec.fields.length)
+                return draft;
+            [sec.fields[i], sec.fields[j]] = [sec.fields[j], sec.fields[i]];
+            return draft;
+        });
+    }
+    // Drag-to-reorder fields within a section (framer-motion Reorder). Replaces
+    // the schema's field order with the dragged order; the up/down arrows remain
+    // as a keyboard-accessible fallback.
+    function reorderFields(sectionId, fields) {
+        setSchema((s) => ({
+            ...s,
+            sections: s.sections.map((sec) => (sec.id === sectionId ? { ...sec, fields } : sec)),
+        }));
+    }
+    function moveSection(sectionId, delta) {
+        update((draft) => {
+            const i = draft.sections.findIndex((s) => s.id === sectionId);
+            const j = i + delta;
+            if (i < 0 || j < 0 || j >= draft.sections.length)
+                return draft;
+            [draft.sections[i], draft.sections[j]] = [draft.sections[j], draft.sections[i]];
+            return draft;
+        });
+    }
+    function updateField(sectionId, fieldId, patch) {
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec)
+                return draft;
+            const idx = sec.fields.findIndex((f) => f.id === fieldId);
+            if (idx < 0)
+                return draft;
+            sec.fields[idx] = { ...sec.fields[idx], ...patch };
+            return draft;
+        });
+    }
+    function updateSection(sectionId, patch) {
+        update((draft) => {
+            const i = draft.sections.findIndex((s) => s.id === sectionId);
+            if (i < 0)
+                return draft;
+            draft.sections[i] = { ...draft.sections[i], ...patch };
+            return draft;
+        });
+    }
+    // --- Canvas (free-form positioned layout) --------------------------------
+    function canvasBoxFor(type) {
+        return defaultBox(type);
+    }
+    // Free-form CANVAS layout is a GLOBAL, app-level mode (advanced) — not a
+    // per-section toggle. Turning it on auto-places every section's fields in a
+    // column so nothing is lost; turning it off drops the positioning back to a
+    // stacked layout.
+    function setAllCanvas(on) {
+        update((draft) => {
+            for (const sec of draft.sections) {
+                if (on && !sec.canvas) {
+                    let y = 0;
+                    sec.canvas = {
+                        cols: 12,
+                        rowHeight: 40,
+                        items: sec.fields.map((f) => {
+                            const box = canvasBoxFor(f.type);
+                            const item = { i: f.id, x: 0, y, w: Math.min(box.w * 2, 12), h: box.h };
+                            y += box.h;
+                            return item;
+                        }),
+                    };
+                }
+                else if (!on && sec.canvas) {
+                    delete sec.canvas;
+                }
+            }
+            return draft;
+        });
+    }
+    const canvasMode = schema.sections.length > 0 && schema.sections.every((s) => !!s.canvas);
+    // When the app uses tabs, the build surface shows one tab's sections at a time.
+    const appTabs = schema.tabs ?? [];
+    const visibleSections = appTabs.length
+        ? schema.sections.filter((s) => (s.tabId ?? appTabs[0].id) === designerTab)
+        : schema.sections;
+    function setCanvasItems(sectionId, items) {
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec || !sec.canvas)
+                return draft;
+            sec.canvas = { ...sec.canvas, items };
+            return draft;
+        });
+    }
+    function addWidgetToCanvas(sectionId, type, box) {
+        const f = emptyField(type);
+        update((draft) => {
+            const sec = draft.sections.find((s) => s.id === sectionId);
+            if (!sec)
+                return draft;
+            sec.fields.push(f);
+            const canvas = sec.canvas ?? { cols: 12, rowHeight: 40, items: [] };
+            sec.canvas = {
+                ...canvas,
+                items: [...canvas.items, { i: f.id, x: box.x, y: box.y, w: box.w, h: box.h }],
+            };
+            return draft;
+        });
+        selectField(sectionId, f.id);
+    }
+    function publish() {
+        setError(tGeneratedValue(null));
+        start(async () => {
+            const result = await adapter.publish({
+                templateId,
+                schema,
+                changelog: changelog.trim(),
+            });
+            if (!result.ok) {
+                setError(tGeneratedValue(result.error ?? tGenerated('m_16c73b6230c543')));
+                toast.error(tGeneratedValue(result.error ?? tGenerated('m_16c73b6230c543')));
+                return;
+            }
+            toast.success(tGenerated('m_165fbf2bc8254b', { value0: result.version }));
+            setShowPublish(false);
+            if (publishedHref)
+                adapter.navigate?.(publishedHref);
+        });
+    }
+    // Sections grouped by their workflow step assignment, used for the step
+    // chips in the canvas header.
+    const stepsCount = schema.workflow.steps.length;
+    return (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className ?? ''}`, children: [_jsxs("header", { className: "flex shrink-0 items-center justify-between border-b border-border bg-surface px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("a", { href: backHref, className: "shrink-0 text-sm text-primary hover:underline", children: _jsx(GeneratedText, { id: "m_07f039d1ce81ec" }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-semibold", children: _jsx(GeneratedValue, { value: appName }) }), _jsx("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase ${KIND_META[templateKind].cls}`, children: _jsx(GeneratedValue, { value: KIND_META[templateKind].label }) })] }), _jsxs("div", { className: "text-xs text-fg-muted", children: [_jsx(GeneratedText, { id: "m_1d76a1713fe585" }), _jsx(GeneratedValue, { value: currentVersion }), " \u00B7", ' ', _jsx(GeneratedValue, { value: schema.sections.length }), ' ', _jsx(GeneratedText, { id: "m_02f67a0e8ba5ce" }), _jsx(GeneratedValue, { value: schema.sections.length === 1 ? '' : _jsx(GeneratedText, { id: "m_00ded356f0f424" }) })] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-xs text-fg-muted", children: [_jsx(Globe2, { size: 14 }), _jsx(Select, { value: contentLocale, onChange: (event) => setContentLocale(event.target.value), className: "h-8 min-w-28 text-xs", "aria-label": tGenerated('m_104e7b02f49d5e'), children: enabledLocales.map((enabledLocale) => (_jsx("option", { value: enabledLocale, children: languages(enabledLocale) }, enabledLocale))) })] }), _jsx(GeneratedValue, { value: renderAssistant ? (_jsxs(Button, { size: "sm", onClick: () => setShowAiAssistant(true), className: "bg-primary text-primary-fg hover:bg-primary-hover", children: [_jsx(Sparkles, { size: 14 }), " ", _jsx(GeneratedText, { id: "m_1e0a86199c09df" })] })) : null }), _jsx("a", { href: recordsHref, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(ClipboardCheck, { size: 14 }), " ", _jsx(GeneratedText, { id: "m_0d06d42b0344eb" })] }) }), _jsxs(Button, { variant: rightPanel === 'preview' ? 'secondary' : 'outline', size: "sm", onClick: () => setRightPanel((p) => (p === 'preview' ? 'none' : 'preview')), children: [_jsx(Eye, { size: 14 }), _jsx(GeneratedText, { id: "m_11d37007232de5" })] }), _jsxs(Button, { size: "sm", onClick: () => setShowPublish(true), disabled: pending, children: [_jsx(Save, { size: 14 }), _jsx(GeneratedText, { id: "m_01b66d9dba6889" }), _jsx(GeneratedValue, { value: currentVersion + 1 })] })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsxs("aside", { className: "flex w-1/3 min-w-72 max-w-[30rem] shrink-0 flex-col border-r border-border bg-surface", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-0.5 border-b border-border px-2 py-1.5", children: [_jsx(LeftTab, { active: leftTab === 'overview', onClick: () => setLeftTab('overview'), icon: _jsx(Info, { size: 16 }), label: tGenerated('m_102c6abe56e4d5') }), _jsx(LeftTab, { active: leftTab === 'build', onClick: () => setLeftTab('build'), icon: _jsx(PanelLeft, { size: 16 }), label: tGenerated('m_0adae4a94c7be3') }), _jsx(LeftTab, { active: leftTab === 'record', onClick: () => setLeftTab('record'), icon: _jsx(SlidersHorizontal, { size: 16 }), label: tGenerated('m_1c1250c8c10a42') }), _jsx(LeftTab, { active: leftTab === 'list', onClick: () => setLeftTab('list'), icon: _jsx(Table2, { size: 16 }), label: tGenerated('m_02ec964c87acae') }), _jsx(LeftTab, { active: leftTab === 'actions', onClick: () => setLeftTab('actions'), icon: _jsx(MousePointerClick, { size: 16 }), label: tGenerated('m_13f79ee70f138d') }), _jsx(LeftTab, { active: leftTab === 'assignments', onClick: () => setLeftTab('assignments'), icon: _jsx(Send, { size: 16 }), label: tGenerated('m_0444d7da46d928') }), _jsx(LeftTab, { active: leftTab === 'permissions', onClick: () => setLeftTab('permissions'), icon: _jsx(ShieldCheck, { size: 16 }), label: tGenerated('m_128e83250b7fc0') })] }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto p-3", children: _jsx(GeneratedValue, { value: leftTab === 'overview' ? (_jsx(OverviewPanel, { name: appName, overview: overview, onSaved: setAppName, onSave: (input) => adapter.saveOverview({ templateId, ...input }), canPin: canPin, pinned: isPinned, onPin: adapter.setPinned ? async (next) => {
+                                            const result = await adapter.setPinned({ templateId, pinned: next });
+                                            if (result.ok)
+                                                setIsPinned(next);
+                                            return result;
+                                        } : undefined })) : leftTab === 'record' ? (_jsx(RecordBehaviorPanel, { value: recordConfiguration, roles: roles, onChange: setRecordConfiguration, onSave: async (next) => {
+                                            const result = await adapter.saveRecordConfig({ templateId, recordConfig: next });
+                                            if (!result.ok)
+                                                throw new Error(result.error ?? 'Record behavior could not be saved.');
+                                        } })) : leftTab === 'list' ? (_jsx(RecordListPanel, { value: listConfig, fields: listFields, onChange: (list) => setRecordConfiguration((current) => ({ ...current, list })), onSave: async (list) => {
+                                            const result = await adapter.saveListConfig({ templateId, listConfig: list });
+                                            if (!result.ok)
+                                                throw new Error(result.error ?? 'Record list could not be saved.');
+                                        } })) : leftTab === 'actions' ? (_jsx(RecordActionsPanel, { flows: flows, adapter: recordActionAdapter })) : leftTab === 'assignments' ? (_jsx(AssignmentsPanel, { createHref: assignmentCreateHref, listHref: assignmentsHref })) : leftTab === 'permissions' ? (_jsx(PermissionsPanel, { roles: roles, initial: allowedRoles, onSave: (next) => adapter.savePermissions({ templateId, allowedRoles: next }) })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: openWorkflow, title: tGenerated('m_037b62ee03b335'), className: `mb-3 block w-full rounded px-2 py-1 text-left text-xs font-semibold ${selection.kind === 'workflow'
+                                                    ? 'bg-primary-subtle text-primary'
+                                                    : 'text-fg hover:bg-surface-hover'}`, children: [_jsx(GeneratedText, { id: "m_001f1bfc6e0cd8" }), _jsx(GeneratedValue, { value: stepsCount }), ")"] }), _jsx("h3", { className: "mb-1 text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_1a19ebd22b2247" }) }), _jsx("p", { className: "mb-2 text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_02043182fe57f9" }) }), _jsx(GeneratedValue, { value: [...PALETTE_PRIMARY, ...PALETTE_MORE].map((group) => (_jsx(FieldPaletteGroup, { group: group, onDragType: (t) => {
+                                                        dragElementRef.current = t;
+                                                    }, onDragEnd: () => {
+                                                        dragElementRef.current = null;
+                                                        setDropSectionId(null);
+                                                    }, onAdd: (t) => {
+                                                        const targetSection = selection.kind === 'section' || selection.kind === 'field'
+                                                            ? selection.sectionId
+                                                            : schema.sections[schema.sections.length - 1]?.id;
+                                                        if (targetSection)
+                                                            addField(targetSection, t);
+                                                    } }, group.label))) })] })) }) })] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col bg-bg-subtle bg-bg", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border bg-surface px-3 py-1.5", children: [_jsx(SurfaceTab, { active: surface === 'build', onClick: () => setSurface('build'), icon: _jsx(LayoutGrid, { size: 13 }), label: tGenerated('m_0b120bda8434d5') }), renderFlows ? (_jsx(SurfaceTab, { active: surface === 'flows', onClick: () => setSurface('flows'), icon: _jsx(WorkflowIcon, { size: 13 }), label: tGenerated('m_1a4786daa752b1') })) : null, _jsx(GeneratedValue, { value: surface === 'build' ? (_jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx("span", { className: "hidden text-[10px] font-semibold tracking-wider text-fg-muted uppercase sm:block", title: tGenerated('m_0342c212db3a34'), children: _jsx(GeneratedText, { id: "m_174bcc6db92052" }) }), _jsxs("div", { className: "flex items-center rounded-md border border-border p-0.5", children: [_jsx("button", { type: "button", onClick: () => setAllCanvas(false), className: `rounded px-2 py-0.5 text-xs font-medium transition ${!canvasMode
+                                                                ? 'bg-fg text-bg'
+                                                                : 'text-fg-muted hover:bg-surface-hover'}`, children: _jsx(GeneratedText, { id: "m_1e888eaf9e8eed" }) }), _jsxs("button", { type: "button", onClick: () => setAllCanvas(true), className: `flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium transition ${canvasMode
+                                                                ? 'bg-primary text-primary-fg'
+                                                                : 'text-fg-muted hover:bg-surface-hover'}`, children: [_jsx(LayoutGrid, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_0627e4bbe74939" })] })] })] })) : null })] }), _jsx(GeneratedValue, { value: surface === 'flows' ? (_jsx("div", { className: "min-h-0 flex-1", children: renderFlows?.({ templateId, name: appName, schema, flows }) })) : (_jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto p-4 lg:p-6", children: _jsx("div", { className: "w-full", children: _jsxs("div", { className: "space-y-3", children: [_jsx(GeneratedValue, { value: selection.kind === 'workflow' ? (_jsx(WorkflowEditor, { schema: schema, locale: contentLocale, defaultLocale: defaultLocale, onChange: (steps) => setSchema((s) => ({ ...s, workflow: { steps } })) })) : null }), _jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1.5", children: [_jsx(GeneratedValue, { value: appTabs.map((t) => (_jsxs("button", { type: "button", onClick: () => setDesignerTab(t.id), onDoubleClick: () => {
+                                                                    const next = window.prompt('Rename tab', localizeText(t.title, contentLocale, '', defaultLocale));
+                                                                    if (next != null)
+                                                                        renameTab(t.id, next.trim() || 'Tab');
+                                                                }, title: tGenerated('m_0d31ecacb5b2ee'), className: `group flex items-center gap-1 rounded-md px-3 py-1 text-xs font-medium transition ${designerTab === t.id
+                                                                    ? 'bg-primary text-primary-fg'
+                                                                    : 'text-fg-muted hover:bg-surface-hover'}`, children: [_jsx(GeneratedValue, { value: localizeText(t.title, contentLocale, 'Tab', defaultLocale) }), _jsx(GeneratedValue, { value: appTabs.length > 1 ? (_jsx(Trash2, { size: 11, className: designerTab === t.id
+                                                                                ? 'text-primary-fg/70 hover:text-primary-fg'
+                                                                                : 'text-fg-subtle hover:text-danger', onClick: (e) => {
+                                                                                e.stopPropagation();
+                                                                                deleteTab(t.id);
+                                                                            } })) : null })] }, t.id))) }), _jsxs("button", { type: "button", onClick: addTab, className: "flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary-subtle hover:bg-primary-subtle/40", title: tGeneratedValue(appTabs.length === 0
+                                                                ? tGenerated('m_1b7cb35c4f57dd')
+                                                                : tGenerated('m_1e7fd6a7c790fe')), children: [_jsx(Plus, { size: 12 }), ' ', _jsx(GeneratedValue, { value: appTabs.length === 0 ? (_jsx(GeneratedText, { id: "m_0cfeced513f8d1" })) : (_jsx(GeneratedText, { id: "m_1457c1cce0b63c" })) })] })] }), _jsx(GeneratedValue, { value: visibleSections.map((sec, i) => {
+                                                        const active = selection.kind === 'section' && selection.sectionId === sec.id;
+                                                        return (_jsxs(Card, { onDragEnter: sec.canvas
+                                                                ? undefined
+                                                                : (event) => {
+                                                                    if (!dragElementRef.current)
+                                                                        return;
+                                                                    event.preventDefault();
+                                                                    setDropSectionId(sec.id);
+                                                                }, onDragOver: sec.canvas
+                                                                ? undefined
+                                                                : (event) => {
+                                                                    if (!dragElementRef.current)
+                                                                        return;
+                                                                    event.preventDefault();
+                                                                    event.dataTransfer.dropEffect = 'copy';
+                                                                }, onDrop: sec.canvas
+                                                                ? undefined
+                                                                : (event) => {
+                                                                    event.preventDefault();
+                                                                    event.stopPropagation();
+                                                                    const type = dragElementRef.current;
+                                                                    dragElementRef.current = null;
+                                                                    setDropSectionId(null);
+                                                                    if (type)
+                                                                        addField(sec.id, type);
+                                                                }, className: `border transition-colors ${dropSectionId === sec.id
+                                                                ? 'border-primary bg-primary-subtle/70 ring-2 ring-primary/40'
+                                                                : active
+                                                                    ? 'border-primary ring-1 ring-primary'
+                                                                    : 'border-border'}`, children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between gap-2 pb-2", children: [_jsx("button", { type: "button", onClick: () => selectSection(sec.id), className: "flex-1 text-left", children: _jsxs(CardTitle, { className: "text-base", children: [_jsx(GeneratedValue, { value: localizeText(sec.title, contentLocale, 'Untitled section', defaultLocale) }), _jsx(GeneratedValue, { value: ' ' }), _jsx(GeneratedValue, { value: sec.repeating ? (_jsx(Badge, { variant: "secondary", children: _jsx(GeneratedText, { id: "m_06e1ca227aca9b" }) })) : null }), _jsx(GeneratedValue, { value: sec.showIf ? (_jsx(Badge, { variant: "outline", className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_02529c1532db7a" }) })) : null }), _jsx(GeneratedValue, { value: sec.step ? (_jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [_jsx(GeneratedText, { id: "m_11933adf482cac" }), ' ', _jsx(GeneratedValue, { value: stepLabel(schema, sec.step, contentLocale, defaultLocale) })] })) : null })] }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { title: tGenerated('m_1ec1460770eaa0'), onClick: () => moveSection(sec.id, -1), disabled: i === 0, children: _jsx(ArrowUp, { size: 14 }) }), _jsx(IconButton, { title: tGenerated('m_14ab8cefda3cf9'), onClick: () => moveSection(sec.id, 1), disabled: i === visibleSections.length - 1, children: _jsx(ArrowDown, { size: 14 }) }), _jsx(IconButton, { title: tGenerated('m_1e97527af4024b'), onClick: () => deleteSection(sec.id), children: _jsx(Trash2, { size: 14, className: "text-danger" }) })] })] }), _jsx(CardContent, { className: "pt-0", children: _jsx(GeneratedValue, { value: sec.canvas ? (_jsx(CanvasEditor, { section: sec, locale: contentLocale, defaultLocale: defaultLocale, selectedFieldId: selection.kind === 'field' &&
+                                                                                selection.sectionId === sec.id
+                                                                                ? selection.fieldId
+                                                                                : null, dragTypeRef: dragElementRef, onLayout: (items) => setCanvasItems(sec.id, items), onAddWidget: (type, box) => addWidgetToCanvas(sec.id, type, box), onSelect: (fieldId) => selectField(sec.id, fieldId), onDelete: (fieldId) => deleteField(sec.id, fieldId) })) : sec.fields.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed border-border-strong p-4 text-center text-xs text-fg-muted border-border", children: _jsx(GeneratedText, { id: "m_0d6735f83b77a3" }) })) : (_jsx(Reorder.Group, { axis: "y", values: sec.fields, onReorder: (fields) => reorderFields(sec.id, fields), as: "ul", className: "divide-y divide-border-subtle", children: _jsx(GeneratedValue, { value: sec.fields.map((f, j) => (_jsx(FieldRow, { field: f, locale: contentLocale, defaultLocale: defaultLocale, isSelected: selection.kind === 'field' &&
+                                                                                        selection.fieldId === f.id, typeLabel: FIELD_TYPES[f.type]?.label ?? f.type, onSelect: () => selectField(sec.id, f.id), onMoveUp: () => moveField(sec.id, f.id, -1), onMoveDown: () => moveField(sec.id, f.id, 1), onDelete: () => deleteField(sec.id, f.id), canUp: j > 0, canDown: j < sec.fields.length - 1 }, f.id))) }) })) }) })] }, sec.id));
+                                                    }) }), _jsxs(Button, { variant: "outline", onClick: addSection, className: "w-full", children: [_jsx(Plus, { size: 14 }), _jsx(GeneratedText, { id: "m_0cfd5e4e441158" })] })] }) }) })) })] })] }), _jsx(Drawer, { open: rightPanel === 'props', onClose: () => setRightPanel('none'), title: tGeneratedValue(selection.kind === 'field'
+                    ? tGenerated('m_0478595ea3a2da')
+                    : tGenerated('m_0d513924d97753')), size: "sm", children: _jsx(GeneratedValue, { value: selection.kind === 'field' && selectedField ? (_jsx(FieldProperties, { sectionId: selectedField.section.id, field: selectedField.field, schema: schema, locale: contentLocale, defaultLocale: defaultLocale, dataSources: dataSources, dataSourcesLoading: dataSourcesLoading, onRefreshDataSources: onRefreshDataSources, dataSourcesHref: dataSourcesHref, onChange: (patch) => updateField(selectedField.section.id, selectedField.field.id, patch) }, selectedField.field.id)) : selection.kind === 'section' && selectedSection ? (_jsx(SectionProperties, { section: selectedSection, schema: schema, locale: contentLocale, defaultLocale: defaultLocale, onChange: (patch) => updateSection(selectedSection.id, patch) }, selectedSection.id)) : null }) }), _jsx(Drawer, { open: rightPanel === 'preview', onClose: () => setRightPanel('none'), title: tGenerated('m_11d37007232de5'), description: tGenerated('m_1e28aaa8e490af'), size: "lg", children: _jsx(Preview, { schema: schema, locale: contentLocale, defaultLocale: defaultLocale }) }), _jsx(Drawer, { open: showPublish, onClose: () => setShowPublish(false), title: tGenerated('m_04073463647168', { value0: currentVersion + 1 }), description: tGenerated('m_0eced645981830'), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setShowPublish(false), children: _jsx(GeneratedText, { id: "m_112e2e8ecda428" }) }), _jsxs(Button, { onClick: publish, disabled: pending, children: [_jsx(Check, { size: 14 }), _jsx(GeneratedValue, { value: pending ? (_jsx(GeneratedText, { id: "m_12b32266eec3e2" })) : (_jsx(GeneratedText, { id: "m_0c072fb8baf115" })) })] })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: _jsx(GeneratedText, { id: "m_1c2ad488291a89" }) }), _jsxs(AlertDescription, { children: [_jsx(GeneratedText, { id: "m_16d04782fa275d" }), _jsx(GeneratedValue, { value: currentVersion + 1 }), _jsx(GeneratedText, { id: "m_025b2e6dff2c41" })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: _jsx(GeneratedText, { id: "m_155fd3bdb6e009" }) }), _jsx(Textarea, { rows: 3, value: changelog, placeholder: tGenerated('m_061739b5f07deb'), onChange: (e) => setChangelog(e.target.value) })] }), _jsx(GeneratedValue, { value: error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: _jsx(GeneratedValue, { value: error }) }) })) : null })] }) }), renderAssistant?.({
+                open: showAiAssistant,
+                onClose: () => setShowAiAssistant(false),
+                templateId,
+                schema,
+                apply: (next) => {
+                    const normalized = normalizeDesignerSchema(next);
+                    setSchema(normalized);
+                    if (normalized.tabs?.length)
+                        setDesignerTab(normalized.tabs[0].id);
+                    toast.success(tGenerated('m_180fea01504577'));
+                },
+            })] }));
+}
+function stepLabel(schema, stepKey, locale, defaultLocale) {
+    const step = schema.workflow?.steps.find((s) => s.key === stepKey);
+    return localizeText(step?.title, locale, stepKey, defaultLocale);
+}
+function FieldPaletteGroup({ group, onAdd, onDragType, onDragEnd, }) {
+    const tGenerated = useGeneratedTranslations();
+    return (_jsxs("div", { className: "mb-3", children: [_jsx("div", { className: "px-1 pb-1 text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedValue, { value: group.label }) }), _jsx("div", { className: "grid grid-cols-1 gap-1", children: _jsx(GeneratedValue, { value: group.types.map((t) => {
+                        const Icon = FIELD_ICONS[t] ?? Type;
+                        return (_jsxs("button", { type: "button", draggable: true, onDragStart: (e) => {
+                                onDragType?.(t);
+                                e.dataTransfer.setData('text/plain', t);
+                                e.dataTransfer.effectAllowed = 'copy';
+                            }, onDragEnd: onDragEnd, onClick: () => onAdd(t), className: "flex cursor-grab items-center gap-2 rounded border border-border px-2 py-1 text-left text-xs hover:border-primary hover:bg-primary-subtle active:cursor-grabbing hover:bg-primary-subtle/40", title: tGenerated('m_1b1fa20684f949'), children: [_jsx(Icon, { size: 12 }), _jsx(GeneratedValue, { value: FIELD_TYPES[t].label })] }, t));
+                    }) }) })] }));
+}
+function IconButton({ title, onClick, disabled, children, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    return (_jsx("button", { type: "button", title: tGeneratedValue(title), onClick: onClick, disabled: disabled, className: "rounded p-1 text-fg-muted hover:bg-surface-hover hover:text-fg disabled:cursor-not-allowed disabled:opacity-40", children: _jsx(GeneratedValue, { value: children }) }));
+}
+// One draggable field row in the designer canvas. Drag is handle-only (via
+// framer-motion dragControls) so clicking the row still selects the field; the
+// up/down arrows remain as a keyboard-accessible fallback.
+function FieldRow({ field, locale, defaultLocale, isSelected, typeLabel, onSelect, onMoveUp, onMoveDown, onDelete, canUp, canDown, }) {
+    const tGenerated = useGeneratedTranslations();
+    const controls = useDragControls();
+    const Icon = FIELD_ICONS[field.type] ?? Type;
+    return (_jsxs(Reorder.Item, { value: field, dragListener: false, dragControls: controls, as: "li", className: `flex items-center justify-between gap-2 rounded px-1 py-2 ${isSelected ? 'bg-primary-subtle' : 'bg-surface'}`, children: [_jsx("button", { type: "button", "aria-label": tGenerated('m_0b04b904ce4f9a'), onPointerDown: (e) => controls.start(e), className: "cursor-grab touch-none rounded p-0.5 text-fg-subtle hover:text-fg-muted active:cursor-grabbing", children: _jsx(GripVertical, { size: 14 }) }), _jsxs("button", { type: "button", onClick: onSelect, className: "flex flex-1 items-center gap-2 text-left", children: [_jsx(Icon, { size: 14 }), _jsx("span", { className: "w-24 truncate text-xs text-fg-muted", children: _jsx(GeneratedValue, { value: typeLabel }) }), _jsxs("span", { className: "text-sm font-medium", children: [_jsx(GeneratedValue, { value: localizeText(field.label, locale, field.id, defaultLocale) }), _jsx(GeneratedValue, { value: field.required || field.validation?.required ? (_jsx("span", { className: "text-danger", children: " *" })) : null })] }), _jsx(GeneratedValue, { value: field.showIf ? (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_02529c1532db7a" }) })) : null }), _jsx(GeneratedValue, { value: field.formula ? (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_194bb13d821775" }) })) : null })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { title: tGenerated('m_1ec1460770eaa0'), onClick: onMoveUp, disabled: !canUp, children: _jsx(ArrowUp, { size: 12 }) }), _jsx(IconButton, { title: tGenerated('m_14ab8cefda3cf9'), onClick: onMoveDown, disabled: !canDown, children: _jsx(ArrowDown, { size: 12 }) }), _jsx(IconButton, { title: tGenerated('m_11773f3c3f7558'), onClick: onDelete, children: _jsx(Trash2, { size: 12, className: "text-danger" }) })] })] }));
+}
+// --- Form-level properties -------------------------------------------------
+// --- Workflow editor -------------------------------------------------------
+function WorkflowEditor({ schema, locale, defaultLocale, onChange, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const steps = schema.workflow?.steps ?? [];
+    function setStep(i, patch) {
+        onChange(steps.map((s, j) => (j === i ? { ...s, ...patch } : s)));
+    }
+    function add() {
+        onChange([...steps, emptyStep()]);
+    }
+    function remove(i) {
+        if (steps.length === 1)
+            return;
+        onChange(steps.filter((_, j) => j !== i));
+    }
+    function move(i, delta) {
+        const j = i + delta;
+        if (j < 0 || j >= steps.length)
+            return;
+        const next = [...steps];
+        [next[i], next[j]] = [next[j], next[i]];
+        onChange(next);
+    }
+    return (_jsxs(Card, { className: "border-2 border-primary/40", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: _jsx(GeneratedText, { id: "m_1c75ba367ef317" }) }) }), _jsxs(CardContent, { className: "space-y-2", children: [_jsxs("p", { className: "text-xs text-fg-muted", children: [_jsx(GeneratedText, { id: "m_1a11f78c7d99d8" }), ' ', _jsx("em", { children: _jsx(GeneratedText, { id: "m_02b0a83932da4a" }) }), ' ', "\u2192", _jsx(GeneratedValue, { value: ' ' }), _jsx("em", { children: _jsx(GeneratedText, { id: "m_14efdd0bff7d70" }) }), ' ', "\u2192", ' ', _jsx("em", { children: _jsx(GeneratedText, { id: "m_1cc0241831296d" }) }), _jsx(GeneratedText, { id: "m_17833f54b99d38" }), _jsx(GeneratedValue, { value: ' ' }), _jsx("strong", { children: _jsx(GeneratedText, { id: "m_1c8658eb9347b4" }) }), ' ', _jsx(GeneratedText, { id: "m_0bf548b271dbc1" }), ' ', _jsx("strong", { children: _jsx(GeneratedText, { id: "m_1a4786daa752b1" }) }), ' ', _jsx(GeneratedText, { id: "m_003ae75549476b" })] }), _jsx("ul", { className: "space-y-2", children: _jsx(GeneratedValue, { value: steps.map((s, i) => (_jsx("li", { className: "rounded-md border border-border bg-surface p-2", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-primary-subtle text-xs font-semibold text-primary bg-primary-subtle/40", children: _jsx(GeneratedValue, { value: i + 1 }) }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_0decefd558c355" }) }), _jsx(Input, { className: "h-7 text-xs", value: readText(s.title, locale), placeholder: tGeneratedValue(localizeText(s.title, locale, s.key, defaultLocale)), onChange: (e) => setStep(i, {
+                                                                        title: writeText(s.title, e.target.value, locale),
+                                                                    }) })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_147b61c2aef29b" }) }), _jsx(Input, { className: "h-7 font-mono text-xs", value: s.key, disabled: true })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_160787e531bffd" }) }), _jsxs(Select, { className: "h-7 text-xs", value: s.assignee.type, onChange: (e) => {
+                                                                        const t = e.target.value;
+                                                                        const assignee = t === 'literal'
+                                                                            ? { type: 'literal', userId: '' }
+                                                                            : t === 'role'
+                                                                                ? { type: 'role', role: '' }
+                                                                                : { type: 'expression', expr: '$submitter' };
+                                                                        setStep(i, { assignee });
+                                                                    }, children: [_jsx("option", { value: "expression", children: 'Expression' }), _jsx("option", { value: "role", children: 'Role' }), _jsx("option", { value: "literal", children: 'Specific user' })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_078d7e637546f9" }) }), _jsx(Input, { className: "h-7 text-xs", value: s.assignee.type === 'literal'
+                                                                        ? s.assignee.userId
+                                                                        : s.assignee.type === 'role'
+                                                                            ? s.assignee.role
+                                                                            : s.assignee.expr, onChange: (e) => {
+                                                                        const v = e.target.value;
+                                                                        if (s.assignee.type === 'literal')
+                                                                            setStep(i, { assignee: { type: 'literal', userId: v } });
+                                                                        else if (s.assignee.type === 'role')
+                                                                            setStep(i, { assignee: { type: 'role', role: v } });
+                                                                        else
+                                                                            setStep(i, { assignee: { type: 'expression', expr: v } });
+                                                                    } })] })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs", children: [_jsx("input", { type: "checkbox", checked: s.signatureRequired ?? false, onChange: (e) => setStep(i, { signatureRequired: e.target.checked }) }), _jsx(GeneratedText, { id: "m_02ffe91f500dc8" })] })] }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(IconButton, { title: tGenerated('m_1ec1460770eaa0'), onClick: () => move(i, -1), disabled: i === 0, children: _jsx(ArrowUp, { size: 12 }) }), _jsx(IconButton, { title: tGenerated('m_14ab8cefda3cf9'), onClick: () => move(i, 1), disabled: i === steps.length - 1, children: _jsx(ArrowDown, { size: 12 }) }), _jsx(IconButton, { title: tGenerated('m_09aebdb43a47c7'), onClick: () => remove(i), disabled: steps.length === 1, children: _jsx(Trash2, { size: 12, className: "text-danger" }) })] })] }) }, s.key))) }) }), _jsxs(Button, { variant: "outline", onClick: add, className: "w-full", children: [_jsx(Plus, { size: 14 }), " ", _jsx(GeneratedText, { id: "m_0ce705b8fa979c" })] })] })] }));
+}
+function FieldProperties({ sectionId, field, schema, locale, defaultLocale, dataSources, dataSourcesLoading, onRefreshDataSources, dataSourcesHref, onChange, }) {
+    const [tab, setTab] = useState('basic');
+    const isCalcField = field.type === 'formula';
+    const storesValue = storesResponseValue(field);
+    const ownerSection = schema.sections.find((section) => section.id === sectionId);
+    const otherFields = schema.sections
+        .flatMap((section) => {
+        if (section.repeating && section.id !== sectionId)
+            return [];
+        if (!ownerSection?.repeating && section.repeating)
+            return [];
+        return section.fields;
+    })
+        .filter((candidate) => candidate.id !== field.id && storesResponseValue(candidate))
+        .map((f) => ({ id: f.id, label: localizeText(f.label, locale, f.id, defaultLocale) }));
+    const repeatingSections = schema.sections
+        .filter((s) => s.repeating)
+        .map((s) => ({
+        id: s.id,
+        label: localizeText(s.title, locale, s.id, defaultLocale),
+        fields: s.fields
+            .filter((candidate) => storesResponseValue(candidate) ||
+            (!ownerSection?.repeating &&
+                candidate.type === 'formula' &&
+                candidate.formula !== undefined))
+            .map((f) => ({
+            id: f.id,
+            label: localizeText(f.label, locale, f.id, defaultLocale),
+        })),
+    }));
+    // Single-entity picker fields the formula builder's entity_attr operator
+    // can target. Multi-pickers are excluded because entity_attr resolves one
+    // entity per picker, not a list.
+    const pickerFields = schema.sections
+        .filter((s) => !s.repeating)
+        .flatMap((s) => s.fields)
+        .filter((f) => entityKindForPicker(f.type) !== null)
+        .map((f) => ({
+        id: f.id,
+        label: localizeText(f.label, locale, f.id, defaultLocale),
+        kind: entityKindForPicker(f.type),
+    }));
+    const tabs = [
+        { value: 'basic', label: 'Basic', show: true },
+        { value: 'validation', label: 'Validation', show: storesValue },
+        { value: 'logic', label: 'Logic', show: true },
+        { value: 'default', label: 'Default', show: storesValue },
+        { value: 'formula', label: 'Formula', show: isCalcField },
+    ];
+    return (_jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("h3", { className: "text-sm font-semibold text-fg", children: [_jsx(GeneratedText, { id: "m_0bff3b64e15427" }), ' ', _jsx(GeneratedValue, { value: FIELD_TYPES[field.type]?.label ?? field.type })] }), _jsx("div", { className: "flex gap-1 border-b border-border", children: _jsx(GeneratedValue, { value: tabs
+                        .filter((t) => t.show)
+                        .map((t) => (_jsx("button", { type: "button", onClick: () => setTab(t.value), className: `-mb-px border-b-2 px-2 py-1 text-xs ${tab === t.value
+                            ? 'border-primary font-semibold text-primary'
+                            : 'border-transparent text-fg-muted hover:text-fg'}`, children: _jsx(GeneratedValue, { value: t.label }) }, t.value))) }) }), _jsx(GeneratedValue, { value: tab === 'basic' ? (_jsx(FieldBasicTab, { sectionId: sectionId, field: field, schema: schema, locale: locale, defaultLocale: defaultLocale, dataSources: dataSources, dataSourcesLoading: dataSourcesLoading, onRefreshDataSources: onRefreshDataSources, dataSourcesHref: dataSourcesHref, onChange: onChange })) : null }), _jsx(GeneratedValue, { value: tab === 'validation' && storesValue ? (_jsx(FieldValidationTab, { field: field, onChange: onChange })) : null }), _jsx(GeneratedValue, { value: tab === 'logic' ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_024d5ac76425dc" }) }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_0db2c879ad4429" }) }), _jsx(LogicBuilder, { rule: field.showIf, availableFields: otherFields, onChange: (rule) => onChange({ showIf: rule }) })] })) : null }), _jsx(GeneratedValue, { value: tab === 'default' && storesValue ? (_jsx(FieldDefaultTab, { field: field, onChange: onChange })) : null }), _jsx(GeneratedValue, { value: tab === 'formula' && isCalcField ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1f15a1cd1a64c4" }) }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_0cd91fbbd3fca0" }) }), _jsx(FormulaBuilder, { value: field.formula, allFields: otherFields, repeatingSections: repeatingSections, pickerFields: pickerFields, onChange: (next) => onChange({ formula: next }) })] })) : null })] }));
+}
+function FieldBasicTab({ sectionId, field, schema, locale, defaultLocale, dataSources, dataSourcesLoading, onRefreshDataSources, dataSourcesHref, onChange, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    // Other fields in the app — targets for cascade filters + lookup auto-fill.
+    const ownerSection = schema.sections.find((section) => section.id === sectionId);
+    const otherFields = schema.sections
+        .flatMap((section) => {
+        if (section.repeating && section.id !== sectionId)
+            return [];
+        if (!ownerSection?.repeating && section.repeating)
+            return [];
+        return section.fields;
+    })
+        .filter((candidate) => candidate.id !== field.id && storesResponseValue(candidate))
+        .map((f) => ({ id: f.id, label: localizeText(f.label, locale, f.id, defaultLocale) }));
+    const autofillFields = (ownerSection?.repeating
+        ? ownerSection.fields
+        : schema.sections.filter((section) => !section.repeating).flatMap((section) => section.fields))
+        .filter((candidate) => candidate.id !== field.id && storesResponseValue(candidate))
+        .map((candidate) => ({
+        id: candidate.id,
+        label: localizeText(candidate.label, locale, candidate.id, defaultLocale),
+    }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_13d7101bd1f531" }) }), _jsx(Input, { value: field.id, disabled: true, className: "font-mono text-xs" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [_jsx(GeneratedText, { id: "m_1d4f77715c6f3d" }), _jsx(GeneratedValue, { value: locale.toUpperCase() }), ")"] }), _jsx(Input, { value: readText(field.label, locale), placeholder: tGeneratedValue(localizeText(field.label, locale, field.id, defaultLocale)), onChange: (e) => onChange({ label: writeText(field.label, e.target.value, locale) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0d04877b1a742b" }) }), _jsx(Textarea, { rows: 2, value: readText(field.helpText, locale), placeholder: tGeneratedValue(localizeText(field.helpText, locale, '', defaultLocale)), onChange: (e) => {
+                            onChange({
+                                helpText: e.target.value
+                                    ? writeText(field.helpText, e.target.value, locale)
+                                    : undefined,
+                            });
+                        } })] }), _jsx(GeneratedValue, { value: storesResponseValue(field) ? (_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: field.required ?? false, onChange: (e) => onChange({ required: e.target.checked }) }), _jsx(GeneratedText, { id: "m_12fe2fe7a9ddad" })] })) : null }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_14ea5fb193bdaf" }) }), _jsxs(Select, { className: "h-8 text-xs", value: String(field.colSpan ?? ''), onChange: (e) => onChange({ colSpan: e.target.value ? Number(e.target.value) : undefined }), children: [_jsx("option", { value: "", children: 'Full width' }), _jsx("option", { value: "1", children: '1 column' }), _jsx("option", { value: "2", children: '2 columns' }), _jsx("option", { value: "3", children: '3 columns' }), _jsx("option", { value: "4", children: '4 columns' })] }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_0f334abe43e80f" }) })] }), _jsx(GeneratedValue, { value: field.type === 'select' ||
+                    field.type === 'radio' ||
+                    field.type === 'multi_select' ||
+                    field.type === 'checkbox_group' ||
+                    field.type === 'ranking' ? (_jsx(ChoiceOptionsEditor, { field: field, locale: locale, onChange: onChange })) : null }), _jsx(GeneratedValue, { value: field.type === 'table' ? _jsx(TableConfigEditor, { field: field, onChange: onChange }) : null }), _jsx(GeneratedValue, { value: field.type === 'slider' ? _jsx(SliderConfigEditor, { field: field, onChange: onChange }) : null }), _jsx(GeneratedValue, { value: field.type === 'matrix' ? _jsx(MatrixConfigEditor, { field: field, onChange: onChange }) : null }), _jsx(GeneratedValue, { value: field.type === 'lookup' || field.type === 'data_table' || field.type === 'metric' ? (_jsx(DataBindingEditor, { field: field, otherFields: otherFields, autofillFields: autofillFields, sources: dataSources, loading: dataSourcesLoading, onRefresh: onRefreshDataSources, dataSourcesHref: dataSourcesHref, onChange: onChange })) : null })] }));
+}
+function SliderConfigEditor({ field, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const c = (field.config ?? {});
+    const set = (patch) => onChange({ config: { ...field.config, ...patch } });
+    return (_jsxs("div", { className: "space-y-2 rounded-md border border-border p-2", children: [_jsx("div", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_03363edf51ed99" }) }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_100639ca393959" }) }), _jsx(Input, { type: "number", value: c.min ?? 0, onChange: (e) => set({ min: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1929e34b445f83" }) }), _jsx(Input, { type: "number", value: c.max ?? 10, onChange: (e) => set({ max: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0cff7e37da2b3f" }) }), _jsx(Input, { type: "number", value: c.step ?? 1, onChange: (e) => set({ step: Number(e.target.value) }) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_19241615edae92" }) }), _jsx(Input, { value: c.unit ?? '', placeholder: tGenerated('m_075f330b972a3b'), onChange: (e) => set({ unit: e.target.value }) })] })] }));
+}
+function MatrixConfigEditor({ field, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const c = (field.config ?? {});
+    const rows = c.rows ?? [];
+    const scale = c.scale ?? [];
+    const setRows = (next) => onChange({ config: { ...field.config, rows: next } });
+    const setScale = (next) => onChange({ config: { ...field.config, scale: next } });
+    return (_jsxs("div", { className: "space-y-3 rounded-md border border-border p-2", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_03be2202673df4" }) }), _jsx("button", { type: "button", className: "text-xs text-primary hover:underline", onClick: () => setRows([...rows, { key: newId('row'), label: `Row ${rows.length + 1}` }]), children: _jsx(GeneratedText, { id: "m_0d067cf371aad1" }) })] }), _jsx("div", { className: "space-y-1", children: _jsx(GeneratedValue, { value: rows.map((r, i) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { value: r.label, onChange: (e) => setRows(rows.map((x, j) => (j === i ? { ...x, label: e.target.value } : x))) }), _jsx(IconButton, { title: tGenerated('m_12b310a027b08a'), onClick: () => setRows(rows.filter((_, j) => j !== i)), children: _jsx(Trash2, { size: 13, className: "text-danger" }) })] }, r.key))) }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_1bd1bb813826dc" }) }), _jsx("button", { type: "button", className: "text-xs text-primary hover:underline", onClick: () => setScale([
+                                    ...scale,
+                                    { value: String(scale.length + 1), label: String(scale.length + 1) },
+                                ]), children: _jsx(GeneratedText, { id: "m_0f92f0f3b0d515" }) })] }), _jsx("div", { className: "space-y-1", children: _jsx(GeneratedValue, { value: scale.map((s, i) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { className: "w-16 font-mono text-xs", value: s.value, onChange: (e) => setScale(scale.map((x, j) => (j === i ? { ...x, value: e.target.value } : x))) }), _jsx(Input, { value: s.label, onChange: (e) => setScale(scale.map((x, j) => (j === i ? { ...x, label: e.target.value } : x))) }), _jsx(IconButton, { title: tGenerated('m_095b70fae90c39'), onClick: () => setScale(scale.filter((_, j) => j !== i)), children: _jsx(Trash2, { size: 13, className: "text-danger" }) })] }, i))) }) })] })] }));
+}
+function DataBindingEditor({ field, otherFields, autofillFields, sources, loading, onRefresh, dataSourcesHref, onChange, }) {
+    const b = field.binding;
+    const source = sources.find((s) => s.key === b?.sourceKey);
+    const cols = source?.columns ?? [];
+    // Persist a binding patch — but drop the binding entirely if no source is
+    // chosen, so the schema never carries an invalid empty sourceKey.
+    const patch = (p) => {
+        const next = { ...(b ?? {}), ...p };
+        if (!next.sourceKey) {
+            onChange({ binding: undefined });
+            return;
+        }
+        onChange({
+            binding: next,
+            ...(field.type === 'data_table' && p.selectable === 'none'
+                ? { required: undefined, validation: undefined, defaultValue: undefined }
+                : {}),
+        });
+    };
+    return (_jsxs("div", { className: "space-y-2.5 rounded-md border border-primary bg-primary-subtle/30 p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] font-semibold tracking-wider text-primary uppercase", children: _jsx(GeneratedText, { id: "m_0d523c82eb812b" }) }), dataSourcesHref ? (_jsx("a", { href: dataSourcesHref, target: "_blank", rel: "noreferrer", className: "text-[11px] text-primary hover:underline", children: _jsx(GeneratedText, { id: "m_1154a02825ffe0" }) })) : null, onRefresh ? (_jsxs("button", { type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1 text-[11px] text-primary hover:underline", children: [_jsx(RefreshCw, { size: 11 }), _jsx(GeneratedText, { id: "m_16f11d7bc7b7b4" })] })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1e51e17fccd721" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.sourceKey ?? '', onChange: (e) => onChange({
+                            binding: e.target.value ? { sourceKey: e.target.value } : undefined,
+                            ...(field.type === 'data_table'
+                                ? { required: undefined, validation: undefined, defaultValue: undefined }
+                                : {}),
+                        }), children: [_jsx("option", { value: "", children: loading ? 'Loading…' : '— pick a data source —' }), sources.map((s) => (_jsx("option", { value: s.key, children: s.name }, s.id)))] }), _jsx(GeneratedValue, { value: !loading && sources.length === 0 ? (_jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_19589d12bcbbf9" }) })) : null })] }), _jsx(GeneratedValue, { value: source ? (_jsxs(_Fragment, { children: [_jsx(GeneratedValue, { value: field.type === 'lookup' ? (_jsx(LookupBindingFields, { b: b, cols: cols, otherFields: otherFields, autofillFields: autofillFields, patch: patch })) : null }), _jsx(GeneratedValue, { value: field.type === 'data_table' ? (_jsx(DataTableBindingFields, { b: b, cols: cols, otherFields: otherFields, patch: patch })) : null }), _jsx(GeneratedValue, { value: field.type === 'metric' ? (_jsx(MetricBindingFields, { b: b, cols: cols, otherFields: otherFields, patch: patch })) : null })] })) : null })] }));
+}
+function LookupBindingFields({ b, cols, otherFields, autofillFields, patch, }) {
+    const tGenerated = useGeneratedTranslations();
+    const autofill = b?.autofill ?? [];
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_16ba74a70fdc2f" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.labelColumn ?? '', onChange: (e) => patch({ labelColumn: e.target.value || undefined }), children: [_jsx("option", { value: "", children: 'First column' }), cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key)))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_01c681f83ca98e" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.valueColumn ?? '', onChange: (e) => patch({ valueColumn: e.target.value || undefined }), children: [_jsx("option", { value: "", children: 'Row id' }), cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key)))] })] })] }), _jsx(CascadeBindingFields, { b: b, cols: cols, otherFields: otherFields, patch: patch }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0d55cb5819a8ab" }) }), _jsx(Input, { type: "number", min: 1, max: 1000, className: "h-8 text-xs", value: b?.limit ?? '', placeholder: "50", onChange: (e) => patch({ limit: e.target.value ? Number(e.target.value) : undefined }) }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_1c39dfb38ad051" }) })] }), _jsxs("div", { className: "space-y-1.5 rounded border border-border bg-surface p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_1aa941e2f78dc5" }) }), _jsx("button", { type: "button", className: "text-xs text-primary hover:underline", onClick: () => patch({
+                                    autofill: [
+                                        ...autofill,
+                                        { column: cols[0]?.key ?? '', targetFieldId: autofillFields[0]?.id ?? '' },
+                                    ],
+                                }), children: _jsx(GeneratedText, { id: "m_0e2a97913eb84b" }) })] }), _jsx(GeneratedValue, { value: autofill.length === 0 ? (_jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_125586069a681f" }) })) : (autofill.map((m, i) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Select, { className: "h-8 text-xs", value: m.column, onChange: (e) => patch({
+                                        autofill: autofill.map((x, j) => j === i ? { ...x, column: e.target.value } : x),
+                                    }), children: cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key))) }), _jsx("span", { className: "text-fg-muted", children: "\u2192" }), _jsx(Select, { className: "h-8 text-xs", value: m.targetFieldId, onChange: (e) => patch({
+                                        autofill: autofill.map((x, j) => j === i ? { ...x, targetFieldId: e.target.value } : x),
+                                    }), children: autofillFields.map((f) => (_jsx("option", { value: f.id, children: f.label }, f.id))) }), _jsx(IconButton, { title: tGenerated('m_1d82f43c88df4c'), onClick: () => patch({ autofill: autofill.filter((_, j) => j !== i) }), children: _jsx(Trash2, { size: 13, className: "text-danger" }) })] }, i)))) })] })] }));
+}
+function CascadeBindingFields({ b, cols, otherFields, patch, }) {
+    return (_jsxs("div", { className: "space-y-1.5 rounded border border-border bg-surface p-2", children: [_jsx("div", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_171519729cccb4" }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0bb347c23433ea" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.filterByField ?? '', onChange: (e) => patch(e.target.value
+                                    ? { filterByField: e.target.value }
+                                    : { filterByField: undefined, filterColumn: undefined }), children: [_jsx("option", { value: "", children: '— none —' }), otherFields.map((f) => (_jsx("option", { value: f.id, children: f.label }, f.id)))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0fdf1d8380c89b" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.filterColumn ?? '', disabled: !b?.filterByField, onChange: (e) => patch({ filterColumn: e.target.value || undefined }), children: [_jsx("option", { value: "", children: "\u2014" }), cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key)))] })] })] }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_03f068cc4e9384" }) })] }));
+}
+function DataTableBindingFields({ b, cols, otherFields, patch, }) {
+    const allShown = !b?.columns;
+    const shown = b?.columns ?? cols.map((c) => c.key);
+    const toggle = (key) => {
+        const base = b?.columns ?? cols.map((c) => c.key);
+        const next = base.includes(key) ? base.filter((k) => k !== key) : [...base, key];
+        patch({ columns: next });
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(CascadeBindingFields, { b: b, cols: cols, otherFields: otherFields, patch: patch }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_16f13907f8a65a" }) }), _jsx("div", { className: "flex flex-wrap gap-1.5 rounded border border-border bg-surface p-1.5", children: _jsx(GeneratedValue, { value: cols.map((c) => {
+                                const on = allShown || shown.includes(c.key);
+                                return (_jsx("button", { type: "button", onClick: () => toggle(c.key), className: `rounded px-1.5 py-0.5 text-[11px] ${on ? 'bg-primary-subtle text-primary' : 'bg-surface-hover text-fg-muted line-through'}`, children: _jsx(GeneratedValue, { value: c.label }) }, c.key));
+                            }) }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_14b18c80af7bd4" }) }), _jsxs(Select, { className: "h-8 text-xs", value: b?.selectable ?? 'none', onChange: (e) => patch({ selectable: e.target.value }), children: [_jsx("option", { value: "none", children: 'Display only' }), _jsx("option", { value: "single", children: 'Pick one row' }), _jsx("option", { value: "multi", children: 'Pick many rows' })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1ab6807a4e8f9e" }) }), _jsx(Input, { type: "number", min: 1, max: 1000, className: "h-8 text-xs", value: b?.limit ?? '', placeholder: "25", onChange: (e) => patch({ limit: e.target.value ? Number(e.target.value) : undefined }) })] })] })] }));
+}
+function MetricBindingFields({ b, cols, otherFields, patch, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const agg = b?.aggregate ?? { fn: 'count' };
+    const setAgg = (p) => patch({ aggregate: { ...agg, ...p } });
+    const needsColumn = agg.fn !== 'count';
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(CascadeBindingFields, { b: b, cols: cols, otherFields: otherFields, patch: patch }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_102bef82722058" }) }), _jsxs(Select, { className: "h-8 text-xs", value: agg.fn, onChange: (e) => {
+                                    const fn = e.target.value;
+                                    setAgg(fn === 'count' ? { fn, column: undefined } : { fn });
+                                }, children: [_jsx("option", { value: "count", children: 'Count' }), _jsx("option", { value: "sum", children: 'Sum' }), _jsx("option", { value: "avg", children: 'Average' }), _jsx("option", { value: "min", children: 'Min' }), _jsx("option", { value: "max", children: 'Max' })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_166da8c01a8107" }) }), _jsxs(Select, { className: "h-8 text-xs", value: agg.column ?? '', disabled: !needsColumn, onChange: (e) => setAgg({ column: e.target.value || undefined }), children: [_jsx("option", { value: "", children: needsColumn ? '— pick —' : 'n/a' }), cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key)))] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_175ee59112fb66" }) }), _jsxs(Select, { className: "h-8 text-xs", value: agg.groupBy ?? '', onChange: (e) => {
+                                    const groupBy = e.target.value || undefined;
+                                    patch({
+                                        aggregate: { ...agg, groupBy },
+                                        display: groupBy ? (b?.display === 'pie' ? 'pie' : 'bar') : 'number',
+                                    });
+                                }, children: [_jsx("option", { value: "", children: '— no grouping —' }), cols.map((c) => (_jsx("option", { value: c.key, children: c.label }, c.key)))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_06b9949f5fa1bc" }) }), _jsx(Select, { className: "h-8 text-xs", value: b?.display ?? (agg.groupBy ? 'bar' : 'number'), onChange: (e) => patch({ display: e.target.value }), children: agg.groupBy ? (_jsxs(_Fragment, { children: [_jsx("option", { value: "bar", children: 'Bar chart' }), _jsx("option", { value: "pie", children: 'Pie chart' })] })) : (_jsx("option", { value: "number", children: 'Number' })) })] })] }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_067480a82419f2" }) }), _jsx(GeneratedValue, { value: agg.groupBy ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_147c46b5f494d3" }) }), _jsx(Input, { type: "number", min: 1, max: 1000, className: "h-8 text-xs", value: b?.limit ?? '', placeholder: tGeneratedValue(b?.display === 'pie' ? '8' : '12'), onChange: (e) => patch({ limit: e.target.value ? Number(e.target.value) : undefined }) }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_018f962bfee661" }) })] })) : null })] }));
+}
+function FieldValidationTab({ field, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const v = field.validation ?? {};
+    function set(patch) {
+        const next = { ...v, ...patch };
+        // Strip undefineds so the JSON stays tight.
+        for (const k of Object.keys(next)) {
+            if (next[k] === undefined || next[k] === '')
+                delete next[k];
+        }
+        onChange({ validation: Object.keys(next).length ? next : undefined });
+    }
+    const isNumeric = field.type === 'number' || field.type === 'rating';
+    const isText = field.type === 'text' ||
+        field.type === 'long_text' ||
+        field.type === 'email' ||
+        field.type === 'phone' ||
+        field.type === 'url';
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: v.required ?? field.required ?? false, onChange: (e) => set({ required: e.target.checked }) }), _jsx(GeneratedText, { id: "m_0316664a18ded7" })] }), _jsx(GeneratedValue, { value: isNumeric ? (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_100639ca393959" }) }), _jsx(Input, { type: "number", value: v.min ?? '', onChange: (e) => set({ min: e.target.value === '' ? undefined : Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1929e34b445f83" }) }), _jsx(Input, { type: "number", value: v.max ?? '', onChange: (e) => set({ max: e.target.value === '' ? undefined : Number(e.target.value) }) })] })] })) : null }), _jsx(GeneratedValue, { value: isText ? (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_141aeed76d15ff" }) }), _jsx(Input, { type: "number", value: v.minLength ?? '', onChange: (e) => set({ minLength: e.target.value === '' ? undefined : Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0806911c39f2f6" }) }), _jsx(Input, { type: "number", value: v.maxLength ?? '', onChange: (e) => set({ maxLength: e.target.value === '' ? undefined : Number(e.target.value) }) })] })] })) : null }), _jsx(GeneratedValue, { value: isText ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1357113b889d93" }) }), _jsx(Input, { value: v.pattern ?? '', onChange: (e) => set({ pattern: e.target.value || undefined }), placeholder: tGenerated('m_16907e8a555a15') }), _jsxs("p", { className: "text-[11px] text-fg-muted", children: [_jsx(GeneratedText, { id: "m_1653ad0a199171" }), ' ', _jsx(GeneratedValue, { value: _jsx(GeneratedText, { id: "m_1a3262f89c2c42" }) }), ' ', _jsx(GeneratedText, { id: "m_00b3d8649525da" })] })] })) : null }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1a014cc338576c" }) }), _jsx(Input, { value: v.message ?? '', onChange: (e) => set({ message: e.target.value || undefined }), placeholder: tGenerated('m_1737e921e5c6c6') })] })] }));
+}
+function FieldDefaultTab({ field, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const d = field.defaultValue;
+    const kind = d?.kind ?? '';
+    function setKind(next) {
+        if (!next)
+            return onChange({ defaultValue: undefined });
+        switch (next) {
+            case 'literal':
+                onChange({ defaultValue: { kind: 'literal', value: '' } });
+                break;
+            case 'today':
+                onChange({ defaultValue: { kind: 'today' } });
+                break;
+            case 'now':
+                onChange({ defaultValue: { kind: 'now' } });
+                break;
+            case 'current_user_person_id':
+                onChange({ defaultValue: { kind: 'current_user_person_id' } });
+                break;
+            case 'current_user_name':
+                onChange({ defaultValue: { kind: 'current_user_name' } });
+                break;
+        }
+    }
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0de21bd4fd99e9" }) }), _jsxs(Select, { className: "h-8 text-xs", value: kind, onChange: (e) => setKind(e.target.value), children: [_jsx("option", { value: "", children: '— No default —' }), _jsx("option", { value: "literal", children: 'Literal value' }), _jsx("option", { value: "today", children: "Today's date" }), _jsx("option", { value: "now", children: 'Right now' }), _jsx("option", { value: "current_user_person_id", children: "Current user's person id" }), _jsx("option", { value: "current_user_name", children: "Current user's name" })] }), _jsx(GeneratedValue, { value: d?.kind === 'literal' ? (_jsx(Input, { value: String(d.value ?? ''), onChange: (e) => onChange({ defaultValue: { kind: 'literal', value: e.target.value } }), placeholder: tGenerated('m_0776e7f56fd55a') })) : null })] }));
+}
+function ChoiceOptionsEditor({ field, locale, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const options = field.validation?.options ?? [];
+    const update = (next) => onChange({ validation: { ...field.validation, options: next } });
+    return (_jsxs("div", { className: "space-y-2 rounded-md border border-border bg-bg-subtle/50 p-2", children: [_jsx("div", { className: "text-xs font-semibold text-fg", children: _jsx(GeneratedText, { id: "m_0e69ebb67d27c2" }) }), _jsx(GeneratedValue, { value: options.length === 0 ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_06a6b6820d522d" }) })) : (_jsx("ul", { className: "space-y-1", children: _jsx(GeneratedValue, { value: options.map((opt, i) => (_jsxs("li", { className: "flex items-center gap-1", children: [_jsx(Input, { className: "h-8 flex-1 text-xs", value: opt.value, placeholder: tGenerated('m_1ed2cc27e05841'), onChange: (e) => {
+                                        const next = [...options];
+                                        next[i] = { ...opt, value: e.target.value };
+                                        update(next);
+                                    } }), _jsx(Input, { className: "h-8 flex-1 text-xs", value: readText(opt.label, locale), placeholder: tGenerated('m_02a6c587f3d3fb'), onChange: (e) => {
+                                        const next = [...options];
+                                        next[i] = {
+                                            ...opt,
+                                            label: writeText(opt.label, e.target.value, locale),
+                                        };
+                                        update(next);
+                                    } }), _jsx("button", { onClick: () => update(options.filter((_, j) => j !== i)), className: "text-fg-muted hover:text-danger", children: _jsx(Trash2, { size: 12 }) })] }, i))) }) })) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => update([
+                    ...options,
+                    {
+                        value: `opt_${options.length + 1}`,
+                        label: { [locale]: 'New option' },
+                    },
+                ]), children: [_jsx(Plus, { size: 12 }), _jsx(GeneratedText, { id: "m_157bc1fc2157b9" })] })] }));
+}
+// --- Table config (column + row editor for `table` fields) ------------------
+function TableConfigEditor({ field, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const config = (field.config ?? {});
+    const columns = (config.columns ?? []);
+    const rowMode = config.rowMode === 'fixed' ? 'fixed' : 'addable';
+    const fixedRows = config.rows ?? [];
+    function setConfig(patch) {
+        onChange({ config: { ...config, ...patch } });
+    }
+    const setColumns = (next) => setConfig({ columns: next });
+    const setRows = (next) => setConfig({ rows: next });
+    return (_jsxs("div", { className: "space-y-3 rounded-md border border-border bg-bg-subtle/50 p-2", children: [_jsx("div", { className: "text-xs font-semibold text-fg", children: _jsx(GeneratedText, { id: "m_0d25e53152dc0a" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_03be2202673df4" }) }), _jsxs(Select, { className: "h-8 text-xs", value: rowMode, onChange: (e) => {
+                            const nextMode = e.target.value;
+                            setConfig(nextMode === 'fixed'
+                                ? { rowMode: nextMode, minRows: undefined, maxRows: undefined }
+                                : { rowMode: nextMode, rows: undefined });
+                        }, children: [_jsx("option", { value: "addable", children: 'Addable — user adds / removes rows' }), _jsx("option", { value: "fixed", children: 'Predefined — fixed list of rows' })] })] }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_00c5b5a40a72f6" }) }), _jsx(Input, { type: "number", className: "h-8 text-xs", value: config.minRows ?? '', onChange: (e) => setConfig({
+                                        minRows: e.target.value === '' ? undefined : Number(e.target.value),
+                                    }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_199de632ae64e0" }) }), _jsx(Input, { type: "number", className: "h-8 text-xs", value: config.maxRows ?? '', onChange: (e) => setConfig({
+                                        maxRows: e.target.value === '' ? undefined : Number(e.target.value),
+                                    }) })] })] })) : null }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_04eacfda3069db" }) }), _jsx(GeneratedValue, { value: columns.length === 0 ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_09750de58b1490" }) })) : (_jsx("ul", { className: "space-y-2", children: _jsx(GeneratedValue, { value: columns.map((c, i) => (_jsxs("li", { className: "space-y-1 rounded border border-border bg-surface p-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { className: "h-7 flex-1 text-xs", value: c.label, placeholder: tGenerated('m_1e2be77312c5b8'), onChange: (e) => setColumns(columns.map((x, idx) => idx === i ? { ...x, label: e.target.value } : x)) }), _jsxs(Select, { className: "h-7 w-24 text-xs", value: c.type, onChange: (e) => {
+                                                        const type = e.target.value;
+                                                        setColumns(columns.map((x, idx) => idx === i
+                                                            ? {
+                                                                ...x,
+                                                                type,
+                                                                options: type === 'select' ? (x.options ?? []) : undefined,
+                                                            }
+                                                            : x));
+                                                    }, children: [_jsx("option", { value: "text", children: 'Text' }), _jsx("option", { value: "number", children: 'Number' }), _jsx("option", { value: "select", children: 'Dropdown' }), _jsx("option", { value: "checkbox", children: 'Checkbox' }), _jsx("option", { value: "date", children: 'Date' })] }), _jsx("button", { type: "button", onClick: () => setColumns(columns.filter((_, idx) => idx !== i)), className: "rounded p-1 text-fg-muted hover:text-danger", title: tGenerated('m_0605fd789eea1e'), children: _jsx(Trash2, { size: 12 }) })] }), _jsx(Input, { className: "h-7 font-mono text-[11px]", value: c.key, placeholder: tGenerated('m_1d19a02fd2872f'), onChange: (e) => setColumns(columns.map((x, idx) => idx === i ? { ...x, key: e.target.value.replace(/\s+/g, '_') } : x)) }), _jsx(GeneratedValue, { value: c.type === 'select' ? (_jsx(TableColumnOptions, { options: c.options ?? [], onChange: (opts) => setColumns(columns.map((x, idx) => idx === i ? { ...x, options: opts } : x)) })) : null })] }, i))) }) })) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            const n = columns.length + 1;
+                            setColumns([...columns, { key: `col_${n}`, label: `Column ${n}`, type: 'text' }]);
+                        }, children: [_jsx(Plus, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_059cd549852b55" })] })] }), _jsx(GeneratedValue, { value: rowMode === 'fixed' ? (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_159e1e93b7e19d" }) }), _jsx(GeneratedValue, { value: fixedRows.length === 0 ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_126f736e7419f7" }) })) : (_jsx("ul", { className: "space-y-1", children: _jsx(GeneratedValue, { value: fixedRows.map((r, i) => (_jsxs("li", { className: "flex items-center gap-1", children: [_jsx(Input, { className: "h-7 flex-1 text-xs", value: r.label, placeholder: tGenerated('m_0f24da1a05270a'), onChange: (e) => setRows(fixedRows.map((x, idx) => idx === i ? { label: e.target.value } : x)) }), _jsx("button", { type: "button", onClick: () => setRows(fixedRows.filter((_, idx) => idx !== i)), className: "rounded p-1 text-fg-muted hover:text-danger", title: tGenerated('m_12b310a027b08a'), children: _jsx(Trash2, { size: 12 }) })] }, i))) }) })) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setRows([...fixedRows, { label: `Row ${fixedRows.length + 1}` }]), children: [_jsx(Plus, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_1eabd71bbc0199" })] })] })) : null })] }));
+}
+function TableColumnOptions({ options, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    return (_jsxs("div", { className: "space-y-1 rounded border border-border bg-bg-subtle p-1.5", children: [_jsx("div", { className: "text-[10px] font-semibold tracking-wider text-fg-muted uppercase", children: _jsx(GeneratedText, { id: "m_0e69ebb67d27c2" }) }), _jsx(GeneratedValue, { value: options.map((o, i) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { className: "h-6 flex-1 text-[11px]", value: o.label, placeholder: tGenerated('m_044a5abd7d3ad4'), onChange: (e) => onChange(options.map((x, idx) => idx === i
+                                ? {
+                                    value: x.value || e.target.value.toLowerCase().replace(/\s+/g, '_'),
+                                    label: e.target.value,
+                                }
+                                : x)) }), _jsx("button", { type: "button", onClick: () => onChange(options.filter((_, idx) => idx !== i)), className: "rounded p-0.5 text-fg-muted hover:text-danger", children: _jsx(Trash2, { size: 11 }) })] }, i))) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => onChange([
+                    ...options,
+                    { value: `opt_${options.length + 1}`, label: `Option ${options.length + 1}` },
+                ]), children: [_jsx(Plus, { size: 11 }), " ", _jsx(GeneratedText, { id: "m_00f78a864ff266" })] })] }));
+}
+// --- Section properties ----------------------------------------------------
+function SectionProperties({ section, schema, locale, defaultLocale, onChange, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const allFields = schema.sections
+        .filter((candidate) => !candidate.repeating)
+        .flatMap((candidate) => candidate.fields)
+        .filter(storesResponseValue)
+        .map((field) => ({
+        id: field.id,
+        label: localizeText(field.label, locale, field.id, defaultLocale),
+    }));
+    return (_jsxs("div", { className: "space-y-3 text-sm", children: [_jsx("h3", { className: "text-sm font-semibold text-fg", children: _jsx(GeneratedText, { id: "m_0d513924d97753" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_089e71eb771aca" }) }), _jsx(Input, { value: section.id, disabled: true, className: "font-mono text-xs" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [_jsx(GeneratedText, { id: "m_1ea646f0dcd3d5" }), _jsx(GeneratedValue, { value: locale.toUpperCase() }), ")"] }), _jsx(Input, { value: readText(section.title, locale), placeholder: tGeneratedValue(localizeText(section.title, locale, section.id, defaultLocale)), onChange: (e) => onChange({ title: writeText(section.title, e.target.value, locale) }) })] }), _jsx(GeneratedValue, { value: schema.tabs?.length ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1457c1cce0b63c" }) }), _jsx(Select, { value: section.tabId ?? schema.tabs[0].id, onChange: (e) => onChange({ tabId: e.target.value }), children: schema.tabs.map((t) => (_jsx("option", { value: t.id, children: localizeText(t.title, locale, t.id, defaultLocale) }, t.id))) })] })) : null }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_14d923495cf14c" }) }), _jsx(Textarea, { rows: 2, value: readText(section.description, locale), placeholder: tGeneratedValue(localizeText(section.description, locale, '', defaultLocale)), onChange: (e) => {
+                            onChange({
+                                description: e.target.value
+                                    ? writeText(section.description, e.target.value, locale)
+                                    : undefined,
+                            });
+                        } })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_0664f38791aed8" }) }), _jsxs(Select, { className: "h-8 text-xs", value: section.step ?? '', onChange: (e) => onChange({ step: e.target.value || undefined }), children: [_jsx("option", { value: "", children: '— first step (default) —' }), (schema.workflow?.steps ?? []).map((s) => (_jsx("option", { value: s.key, children: localizeText(s.title, locale, s.key, defaultLocale) }, s.key)))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1ee65e14915cf1" }) }), _jsxs(Select, { className: "h-8 text-xs", value: String(section.layout?.columns ?? 1), onChange: (e) => {
+                            const n = Number(e.target.value);
+                            onChange({ layout: n > 1 ? { columns: n, gap: section.layout?.gap } : undefined });
+                        }, children: [_jsx("option", { value: "1", children: '1 column' }), _jsx("option", { value: "2", children: '2 columns' }), _jsx("option", { value: "3", children: '3 columns' }), _jsx("option", { value: "4", children: '4 columns' })] }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_1e0a540071af99" }) })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: section.repeating ?? false, onChange: (e) => onChange({ repeating: e.target.checked }) }), _jsx(GeneratedText, { id: "m_10a741ad57253f" })] }), _jsx(GeneratedValue, { value: section.repeating ? (_jsxs("div", { className: "space-y-2 rounded border border-border bg-bg-subtle/50 p-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_00c5b5a40a72f6" }) }), _jsx(Input, { type: "number", value: section.minRows ?? '', onChange: (e) => onChange({
+                                                minRows: e.target.value === '' ? undefined : Number(e.target.value),
+                                            }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_199de632ae64e0" }) }), _jsx(Input, { type: "number", value: section.maxRows ?? '', onChange: (e) => onChange({
+                                                maxRows: e.target.value === '' ? undefined : Number(e.target.value),
+                                            }) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_1c4a359175c7fa" }) }), _jsx(Input, { value: section.rowLabelTemplate ?? '', placeholder: tGenerated('m_02890419bf69c5'), onChange: (e) => onChange({ rowLabelTemplate: e.target.value || undefined }) }), _jsxs("p", { className: "text-[10px] text-fg-muted", children: [_jsx(GeneratedText, { id: "m_0ea6ba70f4dcd9" }), ' ', _jsx(GeneratedValue, { value: _jsx(GeneratedText, { id: "m_126c7eab8ac9fd" }) }), ",", ' ', _jsx(GeneratedValue, { value: _jsx(GeneratedText, { id: "m_1ed8de977a458a" }) }), _jsx(GeneratedText, { id: "m_1e018b65c95ffd" }), ' ', _jsx(GeneratedValue, { value: _jsx(GeneratedText, { id: "m_1fad56c24b22ed" }) }), ' ', _jsx(GeneratedText, { id: "m_02193054995990" })] })] })] })) : null }), _jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedText, { id: "m_024d5ac76425dc" }) }), _jsx(LogicBuilder, { rule: section.showIf, availableFields: allFields, onChange: (rule) => onChange({ showIf: rule }) })] })] }));
+}
+// --- Preview pane ----------------------------------------------------------
+function Preview({ schema, locale, defaultLocale, }) {
+    const sections = schema.sections;
+    const groupedByStep = useMemo(() => {
+        const out = new Map();
+        const defaultStep = schema.workflow?.steps[0]?.key ?? '';
+        for (const sec of sections) {
+            const k = sec.step ?? defaultStep;
+            const list = out.get(k) ?? [];
+            list.push(sec);
+            out.set(k, list);
+        }
+        return out;
+    }, [sections, schema.workflow?.steps]);
+    return (_jsxs(Card, { className: "border-2 border-dashed border-border-strong bg-surface border-border", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-base", children: [_jsx(GeneratedText, { id: "m_07c67e89962d16" }), ' ', _jsx(GeneratedValue, { value: localizeText(schema.title, locale, 'Form', defaultLocale) })] }), _jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_045d47c21e1cdf" }) })] }), _jsx(CardContent, { className: "space-y-4 text-sm", children: _jsx(GeneratedValue, { value: (schema.workflow?.steps ?? []).map((step) => {
+                        const stepSections = groupedByStep.get(step.key) ?? [];
+                        if (stepSections.length === 0)
+                            return null;
+                        return (_jsxs("div", { className: "rounded-md border border-border", children: [_jsxs("div", { className: "border-b border-border bg-bg-subtle px-3 py-1.5 text-xs font-semibold text-fg bg-bg-subtle/40", children: [_jsx(GeneratedText, { id: "m_1acffe9b7aa3dd" }), ' ', _jsx(GeneratedValue, { value: localizeText(step.title, locale, step.key, defaultLocale) })] }), _jsx("div", { className: "space-y-3 p-3", children: _jsx(GeneratedValue, { value: stepSections.map((sec) => (_jsxs("div", { children: [_jsxs("h3", { className: "mb-1 text-sm font-semibold text-fg", children: [_jsx(GeneratedValue, { value: localizeText(sec.title, locale, sec.id, defaultLocale) }), _jsx(GeneratedValue, { value: ' ' }), _jsx(GeneratedValue, { value: sec.repeating ? (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: _jsx(GeneratedText, { id: "m_06e1ca227aca9b" }) })) : null })] }), _jsx(GeneratedValue, { value: localizeText(sec.description, locale, '', defaultLocale) ? (_jsx("p", { className: "mb-1 text-xs text-fg-muted", children: _jsx(GeneratedValue, { value: localizeText(sec.description, locale, '', defaultLocale) }) })) : null }), _jsx("div", { className: "space-y-2", children: _jsx(GeneratedValue, { value: sec.fields.map((f) => (_jsxs("div", { children: [_jsxs("label", { className: "block text-xs font-medium text-fg", children: [_jsx(GeneratedValue, { value: localizeText(f.label, locale, f.id, defaultLocale) }), _jsx(GeneratedValue, { value: ' ' }), _jsx(GeneratedValue, { value: f.required || f.validation?.required ? (_jsx("span", { className: "text-danger", children: "*" })) : null }), _jsx(GeneratedValue, { value: f.showIf ? (_jsx(Badge, { variant: "outline", className: "ml-1 text-[10px]", children: _jsx(GeneratedText, { id: "m_02529c1532db7a" }) })) : null })] }), _jsx(PreviewField, { type: f.type })] }, f.id))) }) })] }, sec.id))) }) })] }, step.key));
+                    }) }) })] }));
+}
+function PreviewField({ type }) {
+    const tGenerated = useGeneratedTranslations();
+    switch (type) {
+        case 'long_text':
+            return _jsx(Textarea, { rows: 2, disabled: true, placeholder: tGenerated('m_11d37007232de5') });
+        case 'select':
+        case 'radio':
+            return (_jsx(Select, { disabled: true, children: _jsx("option", { children: "\u2014" }) }));
+        case 'checkbox_group':
+        case 'multi_select':
+            return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0a31fefe8144a2" }) }));
+        case 'signature':
+            return _jsx("div", { className: "h-16 rounded border border-dashed border-border-strong bg-bg-subtle" });
+        case 'photo':
+        case 'photo_upload':
+        case 'file':
+        case 'video':
+        case 'audio':
+            return (_jsx("div", { className: "rounded border border-dashed border-border-strong p-3 text-center text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_1411910c3561c0" }) }));
+        case 'heading':
+            return (_jsx("h4", { className: "text-base font-semibold", children: _jsx(GeneratedText, { id: "m_0f8b37ea44adb6" }) }));
+        case 'paragraph':
+            return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0131c1cfaf2d5c" }) }));
+        case 'divider':
+            return _jsx("hr", { className: "border-border" });
+        case 'formula':
+            return _jsx(Input, { disabled: true, value: "(computed)" });
+        case 'pass_fail_na':
+            return (_jsx("div", { className: "flex gap-1", children: _jsx(GeneratedValue, { value: ['PASS', 'FAIL', 'N/A'].map((v) => (_jsx("span", { className: "rounded border border-border px-2 py-1 text-[10px]", children: _jsx(GeneratedValue, { value: v }) }, v))) }) }));
+        case 'traffic_light':
+            return (_jsx("div", { className: "flex gap-1", children: _jsx(GeneratedValue, { value: [
+                        ['bg-success', 'Green'],
+                        ['bg-warning', 'Yellow'],
+                        ['bg-danger', 'Red'],
+                    ].map(([tone, label]) => (_jsxs("span", { className: "flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px]", children: [_jsx("span", { className: `inline-block h-2 w-2 rounded-full ${tone}` }), _jsx(GeneratedValue, { value: label })] }, label))) }) }));
+        default:
+            return _jsx(Input, { disabled: true, placeholder: tGenerated('m_11d37007232de5') });
+    }
+}
+// --- Unified editor: rail tabs + left-pane panels ---------------------------
+function LabeledField({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: _jsx(GeneratedValue, { value: label }) }), _jsx(GeneratedValue, { value: children })] }));
+}
+function LeftTab({ active, onClick, icon, label, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    return (_jsx("button", { type: "button", onClick: onClick, title: tGeneratedValue(label), "aria-label": tGeneratedValue(label), className: `flex flex-1 items-center justify-center rounded-md px-1.5 py-2 transition ${active
+            ? 'bg-primary-subtle text-primary'
+            : 'text-fg-muted hover:bg-surface-hover hover:text-fg'}`, children: _jsx(GeneratedValue, { value: icon }) }));
+}
+function SurfaceTab({ active, onClick, icon, label, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: `flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition ${active
+            ? 'bg-fg text-bg'
+            : 'text-fg-muted hover:bg-surface-hover'}`, children: [_jsx(GeneratedValue, { value: icon }), " ", _jsx(GeneratedValue, { value: label })] }));
+}
+function OverviewPanel({ name, overview, onSaved, onSave, canPin = false, pinned = false, onPin, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const [n, setN] = useState(name);
+    const [description, setDescription] = useState(overview?.description ?? '');
+    const [surfaceAsTool, setSurfaceAsTool] = useState(overview?.surfaceAsTool ?? false);
+    const [pending, start] = useTransition();
+    const save = () => {
+        if (n.trim().length < 2) {
+            toast.error(tGenerated('m_0aa48682b14c95'));
+            return;
+        }
+        start(async () => {
+            const res = await onSave({
+                name: n.trim(),
+                description,
+                surfaceAsTool,
+            });
+            if (!res.ok) {
+                toast.error(tGeneratedValue(res.error ?? tGenerated('m_0af1983403d12e')));
+                return;
+            }
+            onSaved(n.trim());
+            toast.success(tGenerated('m_0964f6e2cc4375'));
+        });
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_08114bb9803f7d" }) }), _jsx(LabeledField, { label: tGenerated('m_18a30dc84d2a64'), children: _jsx(Input, { value: n, onChange: (e) => setN(e.target.value) }) }), _jsx(LabeledField, { label: tGenerated('m_14d923495cf14c'), children: _jsx(Textarea, { rows: 4, value: description, placeholder: tGenerated('m_074251897a5932'), onChange: (e) => setDescription(e.target.value) }) }), _jsxs("label", { className: "flex items-start gap-2 rounded-md border border-border p-3 text-sm", children: [_jsx("input", { type: "checkbox", checked: surfaceAsTool, onChange: (e) => setSurfaceAsTool(e.target.checked), className: "mt-0.5 h-4 w-4" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium text-fg", children: _jsx(GeneratedText, { id: "m_1f008c56f09179" }) }), _jsxs("span", { className: "block text-xs text-fg-muted", children: [_jsx(GeneratedText, { id: "m_160f2c28b65229" }), ' ', _jsx("span", { className: "font-mono", children: _jsx(GeneratedText, { id: "m_1ddad1532de2e3" }) }), ' ', _jsx(GeneratedText, { id: "m_186d665b9052f3" })] })] })] }), _jsx(Button, { onClick: save, disabled: pending, className: "w-full", children: _jsx(GeneratedValue, { value: pending ? (_jsx(GeneratedText, { id: "m_106811f2aac664" })) : (_jsx(GeneratedText, { id: "m_16f4ae27da8dbb" })) }) }), _jsx(GeneratedValue, { value: canPin ? (_jsxs("div", { className: "space-y-2 rounded-md border border-border p-3", children: [_jsx("div", { className: "text-sm font-medium text-fg", children: _jsx(GeneratedText, { id: "m_0cc4443595b87e" }) }), _jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_1dadff0d2c2898" }) }), onPin ? (_jsxs(Button, { variant: pinned ? 'secondary' : 'outline', size: "sm", disabled: pending, onClick: () => start(async () => {
+                                const result = await onPin(!pinned);
+                                if (!result.ok)
+                                    toast.error(tGeneratedValue(result.error ?? tGenerated('m_09249e0e6a801e')));
+                            }), children: [pinned ? _jsx(PinOff, { size: 14 }) : _jsx(Pin, { size: 14 }), pinned ? _jsx(GeneratedText, { id: "m_09eea65fa736d3" }) : _jsx(GeneratedText, { id: "m_16b0d6e1ba7d5e" })] })) : null] })) : null })] }));
+}
+function AssignmentsPanel({ createHref, listHref }) {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("p", { className: "text-xs text-fg-muted", children: [_jsx(GeneratedText, { id: "m_0976c514f311fb" }), ' ', _jsx("span", { className: "font-medium text-fg", children: _jsx(GeneratedText, { id: "m_096d47f60747b3" }) }), ' ', _jsx(GeneratedText, { id: "m_1bac81ba078d96" })] }), _jsx("a", { href: createHref, className: "block", children: _jsxs(Button, { className: "w-full", children: [_jsx(Send, { size: 14 }), " ", _jsx(GeneratedText, { id: "m_0b60657b166b0e" })] }) }), _jsx("a", { href: listHref, className: "block", children: _jsx(Button, { variant: "outline", className: "w-full", children: _jsx(GeneratedText, { id: "m_0c528a939be441" }) }) }), _jsx("p", { className: "text-[11px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_0ad38d3d51d13e" }) })] }));
+}
+function PermissionsPanel({ roles, initial, onSave, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const [sel, setSel] = useState(new Set(initial));
+    const [pending, start] = useTransition();
+    const toggle = (key) => setSel((s) => {
+        const n = new Set(s);
+        if (n.has(key))
+            n.delete(key);
+        else
+            n.add(key);
+        return n;
+    });
+    const save = () => start(async () => {
+        const res = await onSave(Array.from(sel));
+        if (!res.ok) {
+            toast.error(tGeneratedValue(res.error ?? tGenerated('m_0af1983403d12e')));
+            return;
+        }
+        toast.success(tGenerated('m_1e42ea374d7063'));
+    });
+    const restricted = sel.size > 0;
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_14c557ff352d60" }) }), _jsx("div", { className: `rounded-md border px-3 py-2 text-xs ${restricted
+                    ? 'border-warning bg-warning-subtle text-warning'
+                    : 'border-success bg-success-subtle text-success'}`, children: _jsx(GeneratedValue, { value: restricted ? (_jsx(GeneratedText, { id: "m_1f688129a274f7", values: { value0: sel.size, value1: sel.size === 1 ? '' : 's' } })) : (_jsx(GeneratedText, { id: "m_1452f24ba8370a" })) }) }), _jsx(GeneratedValue, { value: roles.length === 0 ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_008f5a3d7812ab" }) })) : (_jsx("ul", { className: "space-y-1", children: _jsx(GeneratedValue, { value: roles.map((r) => (_jsx("li", { children: _jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-bg-subtle", children: [_jsx("input", { type: "checkbox", checked: sel.has(r.key), onChange: () => toggle(r.key) }), _jsx("span", { className: "flex-1", children: _jsx(GeneratedValue, { value: r.name }) }), _jsx("span", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedValue, { value: r.key }) })] }) }, r.key))) }) })) }), _jsx(Button, { onClick: save, disabled: pending, className: "w-full", children: _jsx(GeneratedValue, { value: pending ? (_jsx(GeneratedText, { id: "m_106811f2aac664" })) : (_jsx(GeneratedText, { id: "m_044b4d57bb99ce" })) }) })] }));
+}
+//# sourceMappingURL=production-form-designer.js.map