@braedonsaunders/appkit-forms 0.2.2

package/production-form-renderer.js

@@ -0,0 +1,2134 @@
+'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 filler runtime.
+//
+// Features:
+//   - Multi-step rendering grouped by `section.step` against `workflow.steps`
+//   - Progress strip with click-to-jump on completed steps
+//   - Per-field visibility via `evaluateLogicRule(field.showIf, ctx)`
+//   - Section visibility via `evaluateLogicRule(section.showIf, ctx)`
+//   - Repeating sections with min/max-rows bounds + row-label-template
+//   - Formula fields rendered read-only, recomputed via evaluateFormulaTree
+//   - Default values resolved via resolveDefaultValue once per first render
+//   - Validation runs on Next and Submit; inline errors per field
+//
+// Storage shape: `data` is `Record<string, unknown>` keyed by field id for
+// top-level fields, plus `data[sectionId]` = `Array<Record<fieldId, value>>`
+// for repeating sections. Same convention the response-viewer already reads.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition, } from 'react';
+import { ProductionFormRuntimeProvider, useProductionLocale as useLocale, useProductionTranslations as useTranslations, useProductionFormRuntime, } from './production-runtime-context.js';
+import { AlertTriangle, Bold, Check, ClipboardList, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cloud, CloudOff, Eye, Italic, Link as LinkIcon, List, MapPin, Minus, Plus, ScanLine, Search, ShieldCheck, Sparkles, Sun, Trash2, X, } from 'lucide-react';
+import { Alert, UiLink as Link, SignaturePad, WizardLayout, toast, AlertDescription, AlertTitle, Badge, Button, DetailHeader, Input, Label, SearchSelect, Select, Textarea, uploadReservedFile, } from '@braedonsaunders/appkit-ui';
+import { evaluateFormulaTree, evaluateLogicRule, resolveDefaultValue, validateFieldValue, validateResponse, entityKindForPicker, } from '@braedonsaunders/appkit-forms-core';
+import { normalizeFormResponseDraftData, normalizeRichTextLinkUrl, } from '@braedonsaunders/appkit-forms-core/response-normalize';
+import { sanitizeDocumentHtml } from '@braedonsaunders/appkit-forms-core/sanitize';
+import { localizeText } from '@braedonsaunders/appkit-i18n';
+import { SketchPad } from './sketch-pad.js';
+import { RiskMatrixField } from './risk-matrix.js';
+import { ProductionFileUpload, dataUrlToFile, } from './production-file-upload.js';
+import { ProductionPremiumSection as PremiumSection } from './production-runtime-layout.js';
+import { ProductionSection as Section } from './production-runtime-layout.js';
+import { canvasCss, columnsCss, gridClass, resolveCanvas } from './canvas-runtime.js';
+import { attachmentIdsEqual, singlePrimaryPhoto } from './photo-field-state.js';
+function RawImage({ optimizationReason: _, ...props }) {
+    return _jsx("img", { ...props });
+}
+function FileUpload(props) {
+    const { adapter } = useProductionFormRuntime();
+    if (!adapter.requestUpload || !adapter.finalizeUpload) {
+        return (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: "File upload is not configured for this form runtime." }) }));
+    }
+    return (_jsx(ProductionFileUpload, { ...props, requestUpload: adapter.requestUpload, finalizeUpload: adapter.finalizeUpload }));
+}
+// Cycle a tasteful tone palette across the dynamic schema sections so the fill
+// page gets the same premium, colorful section cards as the incident /
+// hazard-assessment pages (which assign tones semantically per section).
+const SECTION_TONES = [
+    'teal',
+    'blue',
+    'purple',
+    'amber',
+    'indigo',
+    'emerald',
+    'rose',
+    'slate',
+];
+// Read-only context — when true, custom (non-form-control) inputs that a
+// disabled <fieldset> can't reach (signature/sketch canvases, the rich-text
+// contentEditable) render static. Provided by FormRenderer in record/view mode.
+const FillReadOnlyContext = createContext(false);
+// Per-MOUNT cache of org-unit picker options, keyed by level. Deliberately
+// React state (provided by FormRenderer), never module scope: a tenant switch
+// remounts the page subtree, so a fresh mount refetches instead of serving the
+// previous tenant's org units.
+const OrgUnitOptionsCacheContext = createContext(null);
+function getOrCreateDraftSessionId(ref) {
+    if (ref.current)
+        return ref.current;
+    ref.current = crypto.randomUUID();
+    return ref.current;
+}
+const FIELD_MODE_STORAGE_KEY = 'appkit_form_field_mode';
+const FIELD_MODE_CHANGE_EVENT = 'appkit:form-field-mode-change';
+function readFieldModePreference() {
+    try {
+        return localStorage.getItem(FIELD_MODE_STORAGE_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function subscribeFieldModePreference(onChange) {
+    const onStorage = (event) => {
+        if (event.key === FIELD_MODE_STORAGE_KEY)
+            onChange();
+    };
+    window.addEventListener('storage', onStorage);
+    window.addEventListener(FIELD_MODE_CHANGE_EVENT, onChange);
+    return () => {
+        window.removeEventListener('storage', onStorage);
+        window.removeEventListener(FIELD_MODE_CHANGE_EVENT, onChange);
+    };
+}
+/**
+ * Full production form runtime extracted behind application-owned persistence,
+ * hierarchy, data-source, AI, and storage adapters plus application-owned links.
+ */
+export function ProductionFormRenderer({ adapter, locale, labels, translateGenerated, ...input }) {
+    return (_jsx(ProductionFormRuntimeProvider, { adapter: adapter, locale: locale, labels: labels, translateGenerated: translateGenerated, children: _jsx(ProductionFormRendererBody, { ...input }) }));
+}
+function ProductionFormRendererBody({ templateId, templateName, version, schema, sites, people, entitiesByField: initialEntitiesByField, currentUser, initialResponseId = null, initialValues = {}, initialRows = {}, initialStepIndex = 0, initialDraftRevision = 0, isResumed = false, returnTo = null, recordsHref, readOnly = false, responseStatus = null, reviewHref = null, complianceObligationId = null, inlineAutosave = false, }) {
+    const { adapter } = useProductionFormRuntime();
+    const createDraftResponse = (input) => adapter.createDraft({ templateId: input.templateId, obligationId: input.complianceObligationId });
+    const saveFormResponseDraft = (input) => adapter.saveDraft(input);
+    const submitFormResponse = (input) => adapter.submit({
+        templateId: input.templateId,
+        data: input.data,
+        siteId: input.siteOrgUnitId,
+        obligationId: input.complianceObligationId,
+        responseId: input.responseId,
+        returnTo: input.returnTo,
+    });
+    const updateResponseField = adapter.updateField;
+    const fetchEntityAttrs = adapter.fetchEntityAttributes;
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const locale = useLocale();
+    // Per-step progress so users can click back into completed steps.
+    const [completedSteps, setCompletedSteps] = useState(new Set());
+    // Per-mount org-unit options cache shared by every org-unit picker in this
+    // render tree (see OrgUnitOptionsCacheContext).
+    const [orgUnitOptionsCache] = useState(() => ({}));
+    const [stepIndex, setStepIndex] = useState(initialStepIndex);
+    // Presentational tabs (single-step apps only). activeTabId drives which tab's
+    // sections render; validation still spans every tab.
+    const appTabs = schema.tabs ?? [];
+    const [activeTabId, setActiveTabId] = useState(appTabs[0]?.id ?? '');
+    const normalizedInitial = useMemo(() => normalizeFormResponseDraftData(schema, initialValues, initialRows), [schema, initialValues, initialRows]);
+    const [values, setValues] = useState(normalizedInitial.values);
+    const [rowsByStep, setRowsByStep] = useState(normalizedInitial.rows);
+    const [siteId, setSiteId] = useState('');
+    const [errors, setErrors] = useState(new Map());
+    const [serverError, setServerError] = useState(null);
+    const [pending, start] = useTransition();
+    // High-contrast, large-type "field mode" for direct sunlight. Treat browser
+    // storage as the external source of truth so tabs stay synchronized without
+    // a set-state-on-mount effect.
+    const fieldMode = useSyncExternalStore(subscribeFieldModePreference, readFieldModePreference, () => false);
+    const appliedDefaults = useRef(new Set());
+    const toggleFieldMode = useCallback(() => {
+        try {
+            localStorage.setItem(FIELD_MODE_STORAGE_KEY, readFieldModePreference() ? '0' : '1');
+            window.dispatchEvent(new Event(FIELD_MODE_CHANGE_EVENT));
+        }
+        catch {
+            /* storage unavailable — leave the preference unchanged */
+        }
+    }, []);
+    // --- Autosave state -------------------------------------------------------
+    //
+    // `responseId` is the row we're writing against on each draft save. It's
+    // null until the user makes a content change AND `createDraftResponse`
+    // returns — see the dirty-tracking effect below. Once non-null, every
+    // subsequent save updates the same row.
+    const [responseId, setResponseId] = useState(initialResponseId);
+    // 'idle' before any change; 'pending' during in-flight save; 'saved' on
+    // success; 'error' on failure. Drives the indicator in the header.
+    const [saveStatus, setSaveStatus] = useState('idle');
+    const [lastSavedAt, setLastSavedAt] = useState(null);
+    const [saveError, setSaveError] = useState(null);
+    // Tick state so "Saved Xs ago" updates without us calling render every
+    // change. Bumped every 5s by an effect once a save has happened.
+    const [, setSavedTick] = useState(0);
+    // Tracks whether the user has actually interacted and gives each local edit
+    // a monotonic sequence. State keeps field event handlers ref-free; the
+    // unload path reads the mirrored latestRef below.
+    const [draftEditState, setDraftEditState] = useState({ dirty: false, sequence: 0 });
+    // Every caller awaits the same lazy-create request, so a second edit that
+    // arrives before the first round-trip is not dropped.
+    const creatingRef = useRef(null);
+    // Whole-draft saves are ordered independently of network completion order.
+    // The session id distinguishes tabs; the edit sequence distinguishes local
+    // payload snapshots; the revision detects a stale tab taking over.
+    const draftSessionIdRef = useRef(null);
+    const acknowledgedSequenceRef = useRef(0);
+    const draftRevisionRef = useRef(initialDraftRevision);
+    // The latest values + rows + stepIndex, captured in a ref so the
+    // beforeunload handler can read them synchronously without re-binding.
+    const latestRef = useRef({
+        values: normalizedInitial.values,
+        rows: normalizedInitial.rows,
+        stepIndex: initialStepIndex,
+        responseId: initialResponseId,
+        dirty: false,
+        editSequence: 0,
+    });
+    // Per-picker entity attribute maps, fed into the evaluator on every render
+    // so `entity_attr` formula fields stay live. Refreshed via the
+    // fetchEntityAttrs server action whenever a picker's value changes.
+    const [entitiesByField, setEntitiesByField] = useState(initialEntitiesByField);
+    // Picker field ids currently mid-flight to the fetchEntityAttrs action.
+    // Drives the small "Looking up…" indicator next to the picker.
+    const [pickerLoading, setPickerLoading] = useState(new Set());
+    // Entity lookups run through a small state-backed queue. Replacing a queued
+    // field selection cancels the effect handling the old value, so a slower old
+    // response can never overwrite attributes for the current selection.
+    const [pickerLookupQueue, setPickerLookupQueue] = useState([]);
+    // Group sections by their workflow step. Each step is a "page". Sections
+    // without an explicit `step` fall into the first workflow step.
+    const sectionsByStep = useMemo(() => {
+        const map = new Map();
+        const defaultStepKey = schema.workflow.steps[0]?.key ?? 'submit';
+        for (const sec of schema.sections) {
+            const k = sec.step ?? defaultStepKey;
+            const list = map.get(k) ?? [];
+            list.push(sec);
+            map.set(k, list);
+        }
+        return map;
+    }, [schema]);
+    // The list of *visible* steps, computed from the workflow steps that
+    // actually have sections bound to them. A workflow step with no sections
+    // is still rendered (so reviewers see the post-submit signature step), but
+    // its body becomes a single "ready to submit" pane.
+    const steps = schema.workflow.steps;
+    const totalSteps = steps.length;
+    const step = steps[stepIndex];
+    const stepSections = useMemo(() => sectionsByStep.get(step.key) ?? [], [sectionsByStep, step.key]);
+    // Tabs apply to single-step apps (multi-step wizards keep their own nav). We
+    // filter only the RENDERED sections — validation still spans every tab.
+    const tabbed = appTabs.length >= 2 && totalSteps === 1;
+    const renderedSections = tabbed
+        ? stepSections.filter((s) => (s.tabId ?? appTabs[0].id) === activeTabId)
+        : stepSections;
+    // Build the eval context used by visibility + formula evaluation. Includes
+    // every section's rows under its section id so cross-step sum_section works,
+    // and the per-picker entity-attr maps that `entity_attr` reads from.
+    const evalCtx = useMemo(() => {
+        const requestContext = {
+            now: new Date(),
+            currentUserPersonId: currentUser.personId,
+            currentUserName: currentUser.name,
+        };
+        // Materialize per-row formula fields into the rows the
+        // evaluator sees, so `sum_section` / `avg_section` can roll up a computed
+        // column. Consistent with the read-time-projection model: computed values
+        // are never persisted (buildPayload uses the raw rows) — only derived here
+        // for evaluation + display. Pure derivation, so no setState / loop risk.
+        const materializedRows = {};
+        for (const sec of schema.sections) {
+            if (!sec.repeating)
+                continue;
+            const raw = rowsByStep[sec.id] ?? [];
+            const formulaFields = sec.fields.filter((f) => f.type === 'formula' && f.formula);
+            if (formulaFields.length === 0) {
+                materializedRows[sec.id] = raw;
+                continue;
+            }
+            materializedRows[sec.id] = raw.map((row) => {
+                const rowCtx = {
+                    values: { ...values, ...row },
+                    rows: rowsByStep,
+                    entities: entitiesByField,
+                    requestContext,
+                };
+                const merged = { ...row };
+                for (const f of formulaFields) {
+                    const computed = evaluateFormulaTree(f.formula, rowCtx);
+                    if (computed !== null && computed !== undefined)
+                        merged[f.id] = computed;
+                }
+                return merged;
+            });
+        }
+        // Carry through any rows for sections not in the schema (defensive).
+        for (const [k, v] of Object.entries(rowsByStep)) {
+            if (!(k in materializedRows))
+                materializedRows[k] = v;
+        }
+        return { values, rows: materializedRows, entities: entitiesByField, requestContext };
+    }, [values, rowsByStep, entitiesByField, currentUser, schema]);
+    // Apply default values on first render of a step. Tracked via a ref so we
+    // don't re-apply when the user clears the field intentionally.
+    useEffect(() => {
+        const handle = window.setTimeout(() => {
+            setValues((current) => {
+                let mutated = null;
+                for (const sec of stepSections) {
+                    // Skip repeating sections — defaults are applied per row on row add.
+                    if (sec.repeating)
+                        continue;
+                    for (const f of sec.fields) {
+                        if (!f.defaultValue)
+                            continue;
+                        const key = `${step.key}:${f.id}`;
+                        if (appliedDefaults.current.has(key))
+                            continue;
+                        if (current[f.id] !== undefined && current[f.id] !== '' && current[f.id] !== null) {
+                            appliedDefaults.current.add(key);
+                            continue;
+                        }
+                        const v = resolveDefaultValue(f.defaultValue, {
+                            ...evalCtx,
+                            values: mutated ?? current,
+                        });
+                        if (v !== undefined && v !== null) {
+                            mutated = mutated ?? { ...current };
+                            mutated[f.id] = v;
+                        }
+                        appliedDefaults.current.add(key);
+                    }
+                }
+                return mutated ?? current;
+            });
+        }, 0);
+        return () => window.clearTimeout(handle);
+    }, [evalCtx, step.key, stepSections]);
+    // --- Autosave -------------------------------------------------------------
+    //
+    // Keep the latest values/rows/step in a ref so the beforeunload handler can
+    // read them synchronously when the browser is tearing down.
+    useEffect(() => {
+        latestRef.current = {
+            values,
+            rows: rowsByStep,
+            stepIndex,
+            responseId,
+            dirty: draftEditState.dirty,
+            editSequence: draftEditState.sequence,
+        };
+    }, [draftEditState, values, rowsByStep, stepIndex, responseId]);
+    // Surface a one-shot toast when we resumed from a saved draft so the user
+    // understands they're not on a fresh form.
+    useEffect(() => {
+        if (isResumed) {
+            toast.success(tGenerated('m_0bae7689763970'));
+        }
+    }, [isResumed, tGenerated]);
+    // Tick "Saved Xs ago" every 5s once a save has happened so the label
+    // stays current without re-saving.
+    useEffect(() => {
+        if (!lastSavedAt)
+            return;
+        const t = setInterval(() => setSavedTick((n) => n + 1), 5000);
+        return () => clearInterval(t);
+    }, [lastSavedAt]);
+    // Core save helper. Centralised so the debounced effect, step navigation,
+    // and the retry-on-click path all share one implementation. Returns true
+    // on a successful save.
+    const persistDraft = useCallback(async (args) => {
+        const clientSequence = latestRef.current.editSequence;
+        const clientSessionId = getOrCreateDraftSessionId(draftSessionIdRef);
+        // Lazily create a draft row on the first save. Concurrent saves share
+        // and await the same request, then each submits its ordered snapshot.
+        let id = latestRef.current.responseId;
+        if (!id) {
+            const creation = creatingRef.current ?? createDraftResponse({ templateId, complianceObligationId });
+            creatingRef.current = creation;
+            try {
+                const res = await creation;
+                if (!res.ok) {
+                    setSaveStatus('error');
+                    setSaveError(res.error);
+                    return false;
+                }
+                id = res.responseId;
+                setResponseId(id);
+                latestRef.current.responseId = id;
+            }
+            finally {
+                if (creatingRef.current === creation)
+                    creatingRef.current = null;
+            }
+        }
+        setSaveStatus('pending');
+        setSaveError(null);
+        const res = await saveFormResponseDraft({
+            responseId: id,
+            values: args.values,
+            rows: args.rows,
+            stepIndex: args.stepIndex,
+            clientSessionId,
+            clientSequence,
+            baseRevision: draftRevisionRef.current,
+        });
+        if (!res.ok) {
+            if (clientSequence >= acknowledgedSequenceRef.current) {
+                setSaveStatus('error');
+                setSaveError(res.error);
+            }
+            return false;
+        }
+        draftRevisionRef.current = Math.max(draftRevisionRef.current, res.revision);
+        if (res.sequence >= acknowledgedSequenceRef.current) {
+            acknowledgedSequenceRef.current = res.sequence;
+            setLastSavedAt(new Date(res.savedAt));
+            if (latestRef.current.editSequence > res.sequence) {
+                setSaveStatus('pending');
+            }
+            else {
+                // Clear dirty only when the acknowledged payload includes every
+                // local edit. An older response completing later must not erase a
+                // newer unsaved change.
+                setSaveStatus('saved');
+                setDraftEditState((current) => current.sequence <= res.sequence && current.dirty
+                    ? { ...current, dirty: false }
+                    : current);
+            }
+        }
+        return true;
+    }, [complianceObligationId, templateId]);
+    // Debounced autosave on any values / rows / step change. The 1500ms delay
+    // is the spec; each new change cancels and reschedules. We also gate on
+    // draftEditState so the very first render (just hydrated state) doesn't trigger
+    // a no-op save.
+    useEffect(() => {
+        if (!draftEditState.dirty)
+            return;
+        const handle = setTimeout(() => {
+            void persistDraft({ values, rows: rowsByStep, stepIndex });
+        }, 1500);
+        return () => clearTimeout(handle);
+    }, [draftEditState.dirty, values, rowsByStep, stepIndex, persistDraft]);
+    // Save-on-unload. Uses navigator.sendBeacon — only this API reliably
+    // delivers a POST as the document unloads. Best-effort: failure is
+    // silent (the in-app autosave will have run on the previous keystroke).
+    useEffect(() => {
+        function handleUnload() {
+            const { values: v, rows, stepIndex: si, responseId: rid, dirty, editSequence, } = latestRef.current;
+            if (!dirty)
+                return;
+            if (!rid)
+                return; // No draft row yet — nothing to persist to.
+            try {
+                const clientSessionId = getOrCreateDraftSessionId(draftSessionIdRef);
+                const payload = JSON.stringify({
+                    responseId: rid,
+                    values: v,
+                    rows,
+                    stepIndex: si,
+                    clientSessionId,
+                    clientSequence: editSequence,
+                    baseRevision: draftRevisionRef.current,
+                });
+                const blob = new Blob([payload], { type: 'application/json' });
+                if (adapter.draftBeaconUrl)
+                    navigator.sendBeacon?.(adapter.draftBeaconUrl, blob);
+            }
+            catch {
+                // Swallow — there's nothing we can do mid-unload.
+            }
+        }
+        window.addEventListener('beforeunload', handleUnload);
+        // visibilitychange catches the "switched apps on mobile" case where
+        // beforeunload doesn't fire reliably.
+        function handleVisibility() {
+            if (document.visibilityState === 'hidden')
+                handleUnload();
+        }
+        document.addEventListener('visibilitychange', handleVisibility);
+        return () => {
+            window.removeEventListener('beforeunload', handleUnload);
+            document.removeEventListener('visibilitychange', handleVisibility);
+        };
+    }, [adapter.draftBeaconUrl]);
+    const markDirty = useCallback(() => {
+        // In read-only mode nothing is editable; never flip dirty so autosave +
+        // the unload beacon stay silent.
+        if (readOnly)
+            return;
+        setDraftEditState((current) => ({ dirty: true, sequence: current.sequence + 1 }));
+    }, [readOnly]);
+    // --- Helpers ---------------------------------------------------------------
+    // Top-level picker field ids that can drive entity-attribute formulas. The
+    // server independently proves the field and derives its type from the
+    // published template schema; this set only decides when the client refreshes.
+    const pickerFieldIds = useMemo(() => {
+        const ids = new Set();
+        for (const sec of schema.sections) {
+            if (sec.repeating)
+                continue;
+            for (const f of sec.fields) {
+                if (entityKindForPicker(f.type))
+                    ids.add(f.id);
+            }
+        }
+        return ids;
+    }, [schema]);
+    useEffect(() => {
+        const request = pickerLookupQueue[0];
+        if (!request)
+            return;
+        let active = true;
+        void fetchEntityAttrs({
+            templateId,
+            fieldId: request.fieldId,
+            entityId: request.entityId,
+        })
+            .then((res) => {
+            if (active && res.ok) {
+                setEntitiesByField((current) => ({ ...current, [request.fieldId]: res.attrs }));
+            }
+        })
+            .catch(() => {
+            // Picker selection remains usable; dependent formula fields show “—”.
+        })
+            .finally(() => {
+            if (!active)
+                return;
+            setPickerLookupQueue((current) => current[0]?.requestId === request.requestId ? current.slice(1) : current);
+            setPickerLoading((current) => {
+                const next = new Set(current);
+                next.delete(request.fieldId);
+                return next;
+            });
+        });
+        return () => {
+            active = false;
+        };
+    }, [pickerLookupQueue, templateId]);
+    const setValue = useCallback((fieldId, v) => {
+        markDirty();
+        setValues((s) => ({ ...s, [fieldId]: v }));
+        setErrors((m) => {
+            const next = new Map(m);
+            next.delete(fieldId);
+            return next;
+        });
+        // If this field is a picker, refresh its entity-attr map. We clear any
+        // stale entry immediately (so an `entity_attr` field that no longer
+        // applies stops rendering its old value) before kicking off the async
+        // fetch. Multi-pickers (`multi_person_picker` etc.) aren't supported by
+        // entity_attr — `entityKindForPicker` returns null for them.
+        if (pickerFieldIds.has(fieldId)) {
+            setEntitiesByField((m) => ({ ...m, [fieldId]: null }));
+            if (typeof v === 'string' && v.length > 0) {
+                setPickerLoading((s) => {
+                    const next = new Set(s);
+                    next.add(fieldId);
+                    return next;
+                });
+                setPickerLookupQueue((current) => [
+                    ...current.filter((request) => request.fieldId !== fieldId),
+                    { fieldId, entityId: v, requestId: globalThis.crypto.randomUUID() },
+                ]);
+            }
+            else {
+                setPickerLookupQueue((current) => current.filter((request) => request.fieldId !== fieldId));
+                setPickerLoading((s) => {
+                    if (!s.has(fieldId))
+                        return s;
+                    const next = new Set(s);
+                    next.delete(fieldId);
+                    return next;
+                });
+            }
+        }
+    }, [markDirty, pickerFieldIds]);
+    function setRows(sectionId, rows) {
+        markDirty();
+        setRowsByStep((s) => ({ ...s, [sectionId]: rows }));
+    }
+    function addRow(section) {
+        const existing = rowsByStep[section.id] ?? [];
+        if (section.maxRows !== undefined && existing.length >= section.maxRows)
+            return;
+        // Apply per-field defaults to the new row.
+        const row = {};
+        for (const f of section.fields) {
+            if (!f.defaultValue)
+                continue;
+            const v = resolveDefaultValue(f.defaultValue, evalCtx);
+            if (v !== undefined && v !== null)
+                row[f.id] = v;
+        }
+        setRows(section.id, [...existing, row]);
+    }
+    function removeRow(section, idx) {
+        const rows = rowsByStep[section.id] ?? [];
+        setRows(section.id, rows.filter((_, i) => i !== idx));
+    }
+    function updateRow(section, idx, patch) {
+        const rows = rowsByStep[section.id] ?? [];
+        setRows(section.id, rows.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
+    }
+    // The full payload sent to the server: top-level field values plus repeating
+    // section rows merged in under the section id.
+    function buildPayload() {
+        const data = { ...values };
+        for (const [secId, rows] of Object.entries(rowsByStep)) {
+            data[secId] = rows;
+        }
+        return data;
+    }
+    // Validate everything visible in the current step. Hidden fields skip
+    // validation. Repeating sections check minRows + every visible row.
+    function validateCurrentStep() {
+        const errs = new Map();
+        for (const sec of stepSections) {
+            if (sec.showIf && !evaluateLogicRule(sec.showIf, evalCtx))
+                continue;
+            if (sec.repeating) {
+                const rows = rowsByStep[sec.id] ?? [];
+                if (sec.minRows !== undefined && rows.length < sec.minRows) {
+                    errs.set(`__section_${sec.id}`, `Add at least ${sec.minRows} row${sec.minRows === 1 ? '' : 's'}`);
+                }
+                for (let i = 0; i < rows.length; i++) {
+                    for (const f of sec.fields) {
+                        // Per-row visibility is evaluated against the row's own values.
+                        const rowCtx = { ...evalCtx, values: { ...evalCtx.values, ...rows[i] } };
+                        if (f.showIf && !evaluateLogicRule(f.showIf, rowCtx))
+                            continue;
+                        // Computed fields are derived, never user-validated.
+                        if (f.type === 'formula')
+                            continue;
+                        const error = validateFieldValue(f, rows[i][f.id]);
+                        if (error)
+                            errs.set(`${sec.id}.${i}.${f.id}`, error);
+                    }
+                }
+            }
+            else {
+                for (const f of sec.fields) {
+                    if (f.showIf && !evaluateLogicRule(f.showIf, evalCtx))
+                        continue;
+                    // Formula fields are auto-computed and never validated against the user.
+                    if (f.type === 'formula')
+                        continue;
+                    const error = validateFieldValue(f, values[f.id]);
+                    if (error)
+                        errs.set(f.id, error);
+                }
+            }
+        }
+        return errs;
+    }
+    // Save-before-navigation. Best-effort and time-boxed: the user shouldn't
+    // be blocked by a slow save when they want to switch steps. If the save
+    // hasn't returned in 500ms we proceed anyway — the next debounce tick
+    // will catch up on the new step.
+    async function saveBeforeNavigation(targetStepIndex) {
+        if (!draftEditState.dirty || !responseId)
+            return;
+        const savePromise = persistDraft({
+            values,
+            rows: rowsByStep,
+            stepIndex: targetStepIndex,
+        });
+        const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve('timeout'), 500));
+        const result = await Promise.race([savePromise, timeoutPromise]);
+        if (result === false) {
+            // persistDraft already set saveStatus/saveError; show a toast so the
+            // user knows their navigation succeeded but the save lagged.
+            toast.error(tGenerated('m_1d8a295c4b1d4b'));
+        }
+    }
+    function next() {
+        const errs = validateCurrentStep();
+        if (errs.size > 0) {
+            setErrors(errs);
+            toast.error(tGenerated('m_051735b7305b06', { value0: errs.size, value1: errs.size === 1 ? '' : 's' }));
+            return;
+        }
+        setErrors(new Map());
+        setCompletedSteps((s) => new Set(s).add(step.key));
+        const target = Math.min(totalSteps - 1, stepIndex + 1);
+        void saveBeforeNavigation(target);
+        setStepIndex(target);
+    }
+    function back() {
+        const target = Math.max(0, stepIndex - 1);
+        void saveBeforeNavigation(target);
+        setStepIndex(target);
+        setErrors(new Map());
+    }
+    function jumpTo(i) {
+        // Allow jumping to completed steps + the current step. Anything later is
+        // gated by per-step validation.
+        if (i === stepIndex)
+            return;
+        if (i < stepIndex || completedSteps.has(steps[i].key)) {
+            void saveBeforeNavigation(i);
+            setStepIndex(i);
+            setErrors(new Map());
+        }
+    }
+    // Jump to the tab that owns a field id (so submit errors are never hidden
+    // behind an inactive tab).
+    function switchToFieldTab(fieldId) {
+        if (!tabbed || !fieldId)
+            return;
+        const owner = stepSections.find((s) => s.fields.some((f) => f.id === fieldId));
+        if (owner)
+            setActiveTabId(owner.tabId ?? appTabs[0].id);
+    }
+    function submit() {
+        setServerError(null);
+        const stepErrs = validateCurrentStep();
+        if (stepErrs.size > 0) {
+            setErrors(stepErrs);
+            switchToFieldTab(stepErrs.keys().next().value);
+            return;
+        }
+        const payload = buildPayload();
+        // Full-form revalidation via the shared forms-core validator
+        // against the *combined* payload (so the server sees the same shape).
+        const globalErrs = validateResponse(schema, payload, 'submit');
+        if (globalErrs.length > 0) {
+            const map = new Map();
+            for (const e of globalErrs)
+                map.set(e.fieldId, e.message);
+            setErrors(map);
+            // Walk back to the first step (or tab) with an error.
+            const firstSection = globalErrs[0].sectionId;
+            if (firstSection) {
+                const ownerSec = schema.sections.find((s) => s.id === firstSection);
+                if (ownerSec) {
+                    if (tabbed) {
+                        setActiveTabId(ownerSec.tabId ?? appTabs[0].id);
+                    }
+                    else {
+                        const targetStepKey = ownerSec.step ?? steps[0].key;
+                        const idx = steps.findIndex((s) => s.key === targetStepKey);
+                        if (idx >= 0)
+                            setStepIndex(idx);
+                    }
+                }
+            }
+            return;
+        }
+        start(async () => {
+            const res = await submitFormResponse({
+                templateId,
+                complianceObligationId,
+                data: payload,
+                siteOrgUnitId: siteId || null,
+                // Pass the in-flight draft id (if any) so the server finalizes that
+                // row in-place rather than inserting a duplicate.
+                responseId,
+                returnTo,
+            });
+            if (!res.ok) {
+                if (res.errors) {
+                    setErrors(new Map(res.errors.map((e) => [e.fieldId, e.message])));
+                    toast.error(tGenerated('m_182296d9886284'));
+                }
+                else {
+                    setServerError('Submit failed');
+                    toast.error(tGenerated('m_051fb158550e48'));
+                }
+            }
+            else {
+                // Clear dirty so the unload-handler doesn't try to overwrite our
+                // freshly-submitted row with a stale draft payload.
+                setDraftEditState((current) => (current.dirty ? { ...current, dirty: false } : current));
+                toast.success(tGenerated('m_1de0dacba80c75'));
+            }
+            // ok-path navigates via server redirect.
+        });
+    }
+    const completion = Math.round(((stepIndex + 1) / Math.max(1, totalSteps)) * 100);
+    // --- Inline autosave mode -------------------------------------------------
+    //
+    // An opt-in body that REPLACES the wizard (no stepper, no footer, no
+    // DetailHeader — the parent page owns chrome). Renders every section as a
+    // vertical stack; each visible field saves itself via `updateResponseField`.
+    // Repeating sections + `table` fields persist their WHOLE array on any row
+    // add/remove/cell change. Computed/static elements never save.
+    if (inlineAutosave) {
+        // `initialResponseId` is always present in this mode (the parent page
+        // creates/loads the row). Fall back to live `responseId` defensively.
+        const rid = (initialResponseId ?? responseId);
+        // Persist one top-level field (scalar/array/object) by its id, validating
+        // first. Returns void; the per-field hook owns the status indicator.
+        const saveField = (field, v) => {
+            const err = validateFieldValue(field, v);
+            setErrors((m) => {
+                const next = new Map(m);
+                if (err)
+                    next.set(field.id, err);
+                else
+                    next.delete(field.id);
+                return next;
+            });
+            if (err)
+                return Promise.resolve({ ok: false, error: err });
+            return updateResponseField({ responseId: rid, fieldId: field.id, value: v });
+        };
+        // Persist a whole repeating-section / table array under its id (no
+        // per-field validation — submit-time still runs full validation).
+        const saveArray = (id, arr) => updateResponseField({ responseId: rid, fieldId: id, value: arr });
+        // Presentational content tabs (same model as the wizard/fill path). When
+        // the app authored 2+ tabs, render a tab bar and show only the active
+        // tab's sections. Sections with no `tabId` belong to the first tab —
+        // mirrors the wizard filter exactly.
+        const inlineTabbed = appTabs.length >= 2;
+        const inlineSections = inlineTabbed
+            ? schema.sections.filter((s) => (s.tabId ?? appTabs[0].id) === activeTabId)
+            : schema.sections;
+        return (_jsx(FillReadOnlyContext.Provider, { value: readOnly, children: _jsx(OrgUnitOptionsCacheContext.Provider, { value: orgUnitOptionsCache, children: _jsxs("fieldset", { disabled: readOnly, className: "m-0 min-w-0 space-y-5 border-0 p-0", children: [_jsx(GeneratedValue, { value: inlineTabbed ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-border pb-2", children: _jsx(GeneratedValue, { value: appTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTabId(t.id), className: `rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors ${t.id === activeTabId
+                                            ? 'border-primary bg-primary text-primary-fg'
+                                            : 'border-border bg-surface text-fg hover:border-primary hover:text-primary'}`, children: _jsx(GeneratedValue, { value: localizeText(t.title, locale, t.id) }) }, t.id))) }) })) : null }), _jsx(GeneratedValue, { value: inlineSections.map((sec) => {
+                                if (sec.showIf && !evaluateLogicRule(sec.showIf, evalCtx))
+                                    return null;
+                                return (_jsx(Section, { title: tGeneratedValue(localizeText(sec.title, locale, sec.id)), subtitle: tGeneratedValue(localizeText(sec.description, locale, sec.repeating ? 'Repeatable section' : '') || undefined), children: _jsx("div", { className: "space-y-4", children: _jsx(GeneratedValue, { value: sec.repeating ? (_jsx(RepeatingSection, { section: sec, rows: rowsByStep[sec.id] ?? [], onAdd: () => {
+                                                    addRow(sec);
+                                                    // addRow mutates state async; persist the resulting array.
+                                                    const existing = rowsByStep[sec.id] ?? [];
+                                                    if (sec.maxRows !== undefined && existing.length >= sec.maxRows)
+                                                        return;
+                                                    const next = {};
+                                                    for (const f of sec.fields) {
+                                                        if (!f.defaultValue)
+                                                            continue;
+                                                        const dv = resolveDefaultValue(f.defaultValue, evalCtx);
+                                                        if (dv !== undefined && dv !== null)
+                                                            next[f.id] = dv;
+                                                    }
+                                                    void saveArray(sec.id, [...existing, next]);
+                                                }, onRemove: (i) => {
+                                                    removeRow(sec, i);
+                                                    const arr = (rowsByStep[sec.id] ?? []).filter((_, idx) => idx !== i);
+                                                    void saveArray(sec.id, arr);
+                                                }, onUpdate: (i, patch) => {
+                                                    updateRow(sec, i, patch);
+                                                    const arr = (rowsByStep[sec.id] ?? []).map((r, idx) => idx === i ? { ...r, ...patch } : r);
+                                                    void saveArray(sec.id, arr);
+                                                }, people: people, evalCtx: evalCtx, errors: errors, sectionError: errors.get(`__section_${sec.id}`) ?? null })) : (sec.fields.map((f) => {
+                                                if (f.showIf && !evaluateLogicRule(f.showIf, evalCtx))
+                                                    return null;
+                                                return (_jsx(InlineFieldRow, { field: f, value: values[f.id], onChange: (v) => setValue(f.id, v), onSetFieldValue: setValue, error: errors.get(f.id), people: people, evalCtx: evalCtx, loading: pickerLoading.has(f.id), readOnly: readOnly, saveField: saveField, saveArray: saveArray }, f.id));
+                                            })) }) }) }, sec.id));
+                            }) })] }) }) }));
+    }
+    // Single-step apps + any read-only view render with a native DetailHeader
+    // (like the hazard/incident detail pages). Multi-step editing keeps the
+    // wizard header (with its step progress strip).
+    const recordLayout = readOnly || totalSteps === 1;
+    const reviewLink = reviewHref ? (_jsx(Link, { href: reviewHref, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Eye, { size: 14 }), " ", _jsx(GeneratedText, { id: "m_0e315ebf127b18" })] }) })) : null;
+    return (_jsx(FillReadOnlyContext.Provider, { value: readOnly, children: _jsx(OrgUnitOptionsCacheContext.Provider, { value: orgUnitOptionsCache, children: _jsxs(WizardLayout, { className: `ff-surface ${fieldMode ? 'field-mode' : ''}`, wide: readOnly, header: recordLayout ? (_jsx(DetailHeader, { back: {
+                        href: returnTo ?? recordsHref,
+                        label: returnTo ? 'Back to assessment' : 'Back',
+                    }, title: tGeneratedValue(templateName), subtitle: tGeneratedValue(initialResponseId
+                        ? tGenerated('m_14c3dfbc8a08e9', {
+                            value0: initialResponseId.slice(0, 8),
+                            value1: version,
+                        })
+                        : tGenerated('m_1480a378beafd1', { value0: version })), badge: readOnly ? (responseStatus ? (_jsx(Badge, { variant: "secondary", children: _jsx(GeneratedValue, { value: responseStatus.replace(/_/g, ' ') }) })) : null) : (_jsx(SaveStatus, { status: saveStatus, lastSavedAt: lastSavedAt, error: saveError, onRetry: () => {
+                            void persistDraft({ values, rows: rowsByStep, stepIndex });
+                        } })), actions: _jsxs(_Fragment, { children: [_jsx(GeneratedValue, { value: !readOnly ? (_jsx("button", { type: "button", onClick: toggleFieldMode, "aria-pressed": fieldMode, title: tGenerated('m_0c388e73463aaf'), className: `inline-flex h-8 w-8 items-center justify-center rounded-full border ${fieldMode
+                                        ? 'border-warning bg-warning-subtle text-warning'
+                                        : 'border-border bg-surface text-fg-muted hover:bg-bg-subtle'}`, children: _jsx(Sun, { size: 15 }) })) : null }), _jsx(GeneratedValue, { value: reviewLink })] }) })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs(Link, { href: returnTo ?? recordsHref, className: "inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline", children: [_jsx(ChevronLeft, { size: 13 }), ' ', _jsx(GeneratedValue, { value: returnTo ? (_jsx(GeneratedText, { id: "m_0addbe9f7bc1a1" })) : (_jsx(GeneratedText, { id: "m_1a7cefe5a9894e" })) })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h1", { className: "truncate text-xl font-semibold text-fg", children: _jsx(GeneratedValue, { value: templateName }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: toggleFieldMode, "aria-pressed": fieldMode, title: tGenerated('m_0c388e73463aaf'), className: `inline-flex h-8 w-8 items-center justify-center rounded-full border ${fieldMode
+                                                ? 'border-warning bg-warning-subtle text-warning'
+                                                : 'border-border bg-surface text-fg-muted hover:bg-bg-subtle'}`, children: _jsx(Sun, { size: 15 }) }), _jsx(SaveStatus, { status: saveStatus, lastSavedAt: lastSavedAt, error: saveError, onRetry: () => {
+                                                void persistDraft({ values, rows: rowsByStep, stepIndex });
+                                            } }), _jsxs(Badge, { variant: "outline", children: [_jsx(GeneratedText, { id: "m_1c693e59d64fb2" }), _jsx(GeneratedValue, { value: version })] }), _jsx(GeneratedValue, { value: reviewLink })] })] }), _jsx(GeneratedValue, { value: totalSteps > 1 ? (_jsxs(_Fragment, { children: [_jsx("ol", { className: "flex flex-wrap items-center gap-1 text-xs", children: _jsx(GeneratedValue, { value: steps.map((s, i) => {
+                                                const isCurrent = i === stepIndex;
+                                                const isCompleted = completedSteps.has(s.key);
+                                                const isClickable = i <= stepIndex || isCompleted;
+                                                return (_jsx("li", { children: _jsxs("button", { type: "button", disabled: !isClickable, onClick: () => jumpTo(i), className: `flex items-center gap-1.5 rounded-full border px-2.5 py-1 transition-colors ${isCurrent
+                                                            ? 'border-primary bg-primary text-primary-fg'
+                                                            : isCompleted
+                                                                ? 'border-success bg-success-subtle text-success hover:bg-success-subtle'
+                                                                : 'border-border bg-surface text-fg'} ${!isClickable ? 'cursor-not-allowed opacity-60' : ''}`, children: [_jsx("span", { className: `inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold ${isCurrent
+                                                                    ? 'bg-surface text-primary'
+                                                                    : isCompleted
+                                                                        ? 'bg-success text-success-fg'
+                                                                        : 'bg-bg-subtle text-fg'}`, children: _jsx(GeneratedValue, { value: isCompleted && !isCurrent ? _jsx(Check, { size: 10 }) : i + 1 }) }), _jsx("span", { className: "truncate", children: _jsx(GeneratedValue, { value: localizeText(s.title, locale, s.key) }) })] }) }, s.key));
+                                            }) }) }), _jsx("div", { className: "h-1 overflow-hidden rounded-full bg-bg-subtle", children: _jsx("div", { className: "h-full rounded-full bg-primary transition-all", style: { width: `${Math.max(8, completion)}%` } }) })] })) : null })] })), footer: readOnly ? undefined : (_jsxs("div", { className: "space-y-2", children: [_jsx(GeneratedValue, { value: serverError ? (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: _jsx(GeneratedText, { id: "m_051fb158550e48" }) }), _jsx(AlertDescription, { children: _jsx(GeneratedValue, { value: serverError }) })] })) : null }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "lg", onClick: back, disabled: stepIndex === 0, className: "h-12 px-4", children: [_jsx(ChevronLeft, { size: 16 }), _jsx(GeneratedText, { id: "m_1a7cefe5a9894e" })] }), _jsx(GeneratedValue, { value: stepIndex < totalSteps - 1 ? (_jsxs(Button, { onClick: next, size: "lg", className: "h-12 flex-1 text-base", children: [_jsx(GeneratedText, { id: "m_08b5fa148b2af7" }), " ", _jsx(ChevronRight, { size: 16 })] })) : (_jsxs(Button, { onClick: submit, disabled: pending, size: "lg", className: "h-12 flex-1 text-base", children: [_jsx(Check, { size: 16 }), _jsx(GeneratedValue, { value: pending ? (_jsx(GeneratedText, { id: "m_00cfcb628bc131" })) : (_jsx(GeneratedText, { id: "m_09ee2ce911f04f" })) })] })) })] })] })), children: [_jsx(GeneratedValue, { value: readOnly ? (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: _jsx(GeneratedText, { id: "m_0cd6abb2df6fc8" }) }), _jsx(AlertDescription, { children: _jsx(GeneratedValue, { value: responseStatus ? (_jsx(GeneratedText, { id: "m_05829ac350a185", values: { value0: responseStatus.replace(/_/g, ' ') } })) : (_jsx(GeneratedText, { id: "m_171450f953a653" })) }) })] })) : null }), _jsxs("fieldset", { disabled: readOnly, className: "m-0 min-w-0 space-y-5 border-0 p-0", children: [_jsx(GeneratedValue, { value: stepIndex === 0 ? (_jsx(PremiumSection, { title: tGenerated('m_020146dd3d3d5a'), subtitle: tGenerated('m_16bca608598e31'), icon: _jsx(MapPin, { size: 20 }), tone: "teal", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: _jsx(GeneratedText, { id: "m_020146dd3d3d5a" }) }), _jsxs(Select, { value: siteId, onChange: (e) => setSiteId(e.target.value), children: [_jsx("option", { value: "", children: '— select —' }), sites.map((s) => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })] }) })) : null }), _jsx(GeneratedValue, { value: tabbed ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-border pb-2", children: _jsx(GeneratedValue, { value: appTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTabId(t.id), className: `rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors ${t.id === activeTabId
+                                                ? 'border-primary bg-primary text-primary-fg'
+                                                : 'border-border bg-surface text-fg hover:border-primary hover:text-primary'}`, children: _jsx(GeneratedValue, { value: localizeText(t.title, locale, t.id) }) }, t.id))) }) })) : null }), _jsx(GeneratedValue, { value: renderedSections.length === 0 ? (_jsx(PremiumSection, { title: tGeneratedValue(localizeText(step.title, locale, step.key)), icon: _jsx(ClipboardList, { size: 20 }), tone: "slate", children: _jsx("p", { className: "text-sm text-fg-muted", children: _jsx(GeneratedValue, { value: tabbed ? (_jsx(GeneratedText, { id: "m_04c0e447e102e8" })) : (_jsx(GeneratedText, { id: "m_1fa0b63118d05f" })) }) }) })) : (renderedSections.map((sec, i) => {
+                                    // Section-level visibility — completely hide the section if showIf
+                                    // is false against the current values.
+                                    if (sec.showIf && !evaluateLogicRule(sec.showIf, evalCtx))
+                                        return null;
+                                    return (_jsx(PremiumSection, { title: tGeneratedValue(localizeText(sec.title, locale, sec.id)), subtitle: tGeneratedValue(localizeText(sec.description, locale, sec.repeating ? 'Repeatable section' : '') || undefined), icon: _jsx(ClipboardList, { size: 20 }), tone: SECTION_TONES[i % SECTION_TONES.length], count: sec.repeating ? (rowsByStep[sec.id]?.length ?? 0) : undefined, children: _jsx("div", { className: "space-y-4", children: _jsx(GeneratedValue, { value: sec.repeating ? (_jsx(RepeatingSection, { section: sec, rows: rowsByStep[sec.id] ?? [], onAdd: () => addRow(sec), onRemove: (i) => removeRow(sec, i), onUpdate: (i, patch) => updateRow(sec, i, patch), people: people, evalCtx: evalCtx, errors: errors, sectionError: errors.get(`__section_${sec.id}`) ?? null })) : sec.canvas ? ((() => {
+                                                    const cls = gridClass(sec.id);
+                                                    const canvas = sec.canvas;
+                                                    const visible = sec.fields.filter((f) => !f.showIf || evaluateLogicRule(f.showIf, evalCtx));
+                                                    const { order, byId } = resolveCanvas(visible.map((f) => f.id), canvas.items, canvas.cols);
+                                                    const byField = new Map(visible.map((f) => [f.id, f]));
+                                                    return (_jsxs("div", { className: cls, children: [_jsx("style", { children: canvasCss(cls, canvas.cols, canvas.rowHeight, byId) }), _jsx(GeneratedValue, { value: order.map((id) => {
+                                                                    const f = byField.get(id);
+                                                                    return (_jsx("div", { "data-ci": id, children: _jsx(FieldRow, { field: f, value: values[f.id], onChange: (v) => setValue(f.id, v), onSetFieldValue: setValue, error: errors.get(f.id), people: people, evalCtx: evalCtx, loading: pickerLoading.has(f.id) }) }, id));
+                                                                }) })] }));
+                                                })()) : sec.layout && sec.layout.columns > 1 ? ((() => {
+                                                    const cls = gridClass(sec.id);
+                                                    const cols = sec.layout.columns;
+                                                    const visible = sec.fields.filter((f) => !f.showIf || evaluateLogicRule(f.showIf, evalCtx));
+                                                    const css = columnsCss(cls, cols, visible.map((f) => ({ id: f.id, span: f.colSpan ?? cols })));
+                                                    return (_jsxs("div", { className: cls, children: [_jsx("style", { children: css }), _jsx(GeneratedValue, { value: visible.map((f) => (_jsx("div", { "data-cs": f.id, children: _jsx(FieldRow, { field: f, value: values[f.id], onChange: (v) => setValue(f.id, v), onSetFieldValue: setValue, error: errors.get(f.id), people: people, evalCtx: evalCtx, loading: pickerLoading.has(f.id) }) }, f.id))) })] }));
+                                                })()) : (sec.fields.map((f) => {
+                                                    if (f.showIf && !evaluateLogicRule(f.showIf, evalCtx))
+                                                        return null;
+                                                    return (_jsx(FieldRow, { field: f, value: values[f.id], onChange: (v) => setValue(f.id, v), onSetFieldValue: setValue, error: errors.get(f.id), people: people, evalCtx: evalCtx, loading: pickerLoading.has(f.id) }, f.id));
+                                                })) }) }) }, sec.id));
+                                })) })] })] }) }) }));
+}
+// --- Repeating section -----------------------------------------------------
+function RepeatingSection({ section, rows, onAdd, onRemove, onUpdate, people, evalCtx, errors, sectionError, }) {
+    const tGenerated = useGeneratedTranslations();
+    const max = section.maxRows;
+    const min = section.minRows ?? 0;
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(GeneratedValue, { value: sectionError ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: _jsx(GeneratedValue, { value: sectionError }) }) })) : null }), _jsx(GeneratedValue, { value: rows.length === 0 ? (_jsxs("p", { className: "text-sm text-fg-muted", children: [_jsx(GeneratedText, { id: "m_126f736e7419f7" }), _jsx(GeneratedValue, { value: min > 0 ? _jsx(GeneratedText, { id: "m_1217fe2f6bac7c", values: { value0: min } }) : '' })] })) : (rows.map((row, i) => {
+                    // Per-row eval context merges the row's own values atop the global
+                    // so showIf within the row can compare against its own fields.
+                    const rowCtx = {
+                        ...evalCtx,
+                        values: { ...evalCtx.values, ...row },
+                    };
+                    return (_jsxs("div", { className: "rounded-lg border border-border bg-bg-subtle/60 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-fg-muted uppercase", children: _jsx(GeneratedValue, { value: formatRowLabel(section, i, row) }) }), _jsx("button", { type: "button", onClick: () => onRemove(i), className: "ff-chip flex h-9 w-9 items-center justify-center rounded-md text-fg-muted hover:bg-danger-subtle hover:text-danger disabled:opacity-30", title: tGenerated('m_1a9d8d971b1edb'), disabled: rows.length <= min, children: _jsx(Trash2, { size: 16 }) })] }), _jsx("div", { className: "space-y-3", children: _jsx(GeneratedValue, { value: section.fields.map((f) => {
+                                        if (f.showIf && !evaluateLogicRule(f.showIf, rowCtx))
+                                            return null;
+                                        return (_jsx(FieldRow, { field: f, value: row[f.id], onChange: (v) => onUpdate(i, { [f.id]: v }), onSetFieldValue: (id, v) => onUpdate(i, { [id]: v }), error: errors.get(`${section.id}.${i}.${f.id}`), people: people, evalCtx: rowCtx }, f.id));
+                                    }) }) })] }, i));
+                })) }), _jsxs(Button, { variant: "outline", size: "lg", onClick: onAdd, disabled: max !== undefined && rows.length >= max, className: "ff-chip h-12 w-full border-dashed", children: [_jsx(Plus, { size: 16 }), _jsx(GeneratedText, { id: "m_1eabd71bbc0199" })] })] }));
+}
+// Format the section row header from the optional rowLabelTemplate.
+// Supports `{index}`, `{index+1}`, and `{<fieldKey>}` interpolation.
+function formatRowLabel(section, index, row) {
+    const tmpl = section.rowLabelTemplate ?? `Row {index+1}`;
+    return tmpl
+        .replace(/\{index\+1\}/g, String(index + 1))
+        .replace(/\{index\}/g, String(index))
+        .replace(/\{(\w+)\}/g, (_, key) => {
+        const v = row[key];
+        return v === undefined || v === null ? '' : String(v);
+    });
+}
+// --- Field row + input -----------------------------------------------------
+function FieldRow({ field, value, onChange, error, people, evalCtx, loading, onSetFieldValue, }) {
+    const locale = useLocale();
+    const formT = useTranslations('Forms');
+    const helpText = localizeText(field.helpText, locale, '');
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { children: [_jsx(GeneratedValue, { value: localizeText(field.label, locale, field.id) }), _jsx(GeneratedValue, { value: field.required || field.validation?.required ? (_jsx("span", { className: "text-danger", children: " *" })) : null }), _jsx(GeneratedValue, { value: loading ? (_jsx("span", { className: "ml-2 text-[10px] font-normal text-fg-muted", children: _jsx(GeneratedValue, { value: formT('lookingUp') }) })) : null })] }), _jsx(GeneratedValue, { value: helpText ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedValue, { value: helpText }) })) : null }), _jsx(FieldInput, { field: field, value: value, onChange: onChange, people: people, evalCtx: evalCtx, onSetFieldValue: onSetFieldValue }), _jsx(GeneratedValue, { value: error ? (_jsx("p", { className: "text-xs text-danger", children: _jsx(GeneratedValue, { value: error }) })) : null })] }));
+}
+// --- Inline autosave field (LiveField parity) ------------------------------
+//
+// Render-only element types that hold no value and must never trigger a save
+// in inline mode. Their FieldInput render path is purely presentational.
+const INLINE_NON_SAVING_TYPES = new Set(['formula', 'metric', 'heading', 'paragraph', 'divider']);
+/**
+ * Per-field autosave hook for inline mode — modelled on live-field.tsx
+ * `useAutoSave` but value-agnostic: it accepts any JSON `value: unknown` and
+ * persists it through a caller-supplied saver (which wires the right
+ * `updateResponseField` payload). Coalesces while a save is in flight and
+ * re-saves the latest value when the previous round-trip returns.
+ */
+// Sentinel so the very first save always runs even when the value is undefined.
+const UNSAVED = Symbol('unsaved');
+function useFieldAutosave(saver) {
+    const [state, setState] = useState('idle');
+    const [, start] = useTransition();
+    const latest = useRef(undefined);
+    const saved = useRef(UNSAVED);
+    const inFlight = useRef(false);
+    const saverRef = useRef(saver);
+    useEffect(() => {
+        saverRef.current = saver;
+    }, [saver]);
+    const save = useCallback((value) => {
+        latest.current = value;
+        if (inFlight.current)
+            return;
+        inFlight.current = true;
+        setState('saving');
+        start(async () => {
+            let ok = true;
+            // Drain: keep persisting until the newest value is saved (the user may
+            // have typed more while a round-trip was in flight). A loop, not
+            // recursion, so the callback never references itself before declaration.
+            while (latest.current !== saved.current) {
+                const v = latest.current;
+                try {
+                    const res = await saverRef.current(v);
+                    if (!res.ok) {
+                        ok = false;
+                        break;
+                    }
+                    saved.current = v;
+                }
+                catch {
+                    ok = false;
+                    break;
+                }
+            }
+            inFlight.current = false;
+            if (ok) {
+                setState('saved');
+                setTimeout(() => setState((s) => (s === 'saved' ? 'idle' : s)), 2000);
+            }
+            else {
+                setState('error');
+            }
+        });
+    }, []);
+    return { state, save };
+}
+function InlineSaveDot({ state }) {
+    if (state === 'idle')
+        return null;
+    return (_jsx("span", { className: state === 'saving'
+            ? 'text-[11px] font-medium text-fg-muted'
+            : state === 'saved'
+                ? 'text-[11px] font-medium text-success'
+                : 'text-[11px] font-medium text-danger', children: _jsx(GeneratedValue, { value: state === 'saving' ? (_jsx(GeneratedText, { id: "m_106811f2aac664" })) : state === 'saved' ? (_jsx(GeneratedText, { id: "m_0a3bcf685192f1" })) : (_jsx(GeneratedText, { id: "m_13b78c61dbb517" })) }) }));
+}
+/**
+ * Inline-mode field wrapper. Reuses the exact `FieldInput` control but
+ * autosaves THIS field on its own: debounce ~800ms after a change + save on
+ * blur. `table` fields persist their whole array; render-only element types
+ * never save. The per-field status dot mirrors live-field.tsx.
+ */
+function InlineFieldRow({ field, value, onChange, onSetFieldValue, error, people, evalCtx, loading, readOnly, saveField, saveArray, }) {
+    const locale = useLocale();
+    const formT = useTranslations('Forms');
+    const helpText = localizeText(field.helpText, locale, '');
+    const nonSaving = INLINE_NON_SAVING_TYPES.has(field.type);
+    const isTable = field.type === 'table';
+    const { state, save } = useFieldAutosave(useCallback((v) => (isTable ? saveArray(field.id, v) : saveField(field, v)), [isTable, field, saveField, saveArray]));
+    const timer = useRef(null);
+    function commit(v) {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        if (readOnly || nonSaving)
+            return;
+        save(v);
+    }
+    function handleChange(v) {
+        onChange(v);
+        if (readOnly || nonSaving)
+            return;
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => commit(v), 800);
+    }
+    return (_jsxs("div", { className: "space-y-1", onBlur: () => commit(value), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { children: [_jsx(GeneratedValue, { value: localizeText(field.label, locale, field.id) }), _jsx(GeneratedValue, { value: field.required || field.validation?.required ? (_jsx("span", { className: "text-danger", children: " *" })) : null }), _jsx(GeneratedValue, { value: loading ? (_jsx("span", { className: "ml-2 text-[10px] font-normal text-fg-muted", children: _jsx(GeneratedValue, { value: formT('lookingUp') }) })) : null })] }), _jsx(GeneratedValue, { value: nonSaving ? null : _jsx(InlineSaveDot, { state: state }) })] }), _jsx(GeneratedValue, { value: helpText ? (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedValue, { value: helpText }) })) : null }), _jsx(FieldInput, { field: field, value: value, onChange: handleChange, people: people, evalCtx: evalCtx, onSetFieldValue: onSetFieldValue }), _jsx(GeneratedValue, { value: error ? (_jsx("p", { className: "text-xs text-danger", children: _jsx(GeneratedValue, { value: error }) })) : null })] }));
+}
+function FieldInput({ field, value, onChange, people, evalCtx, onSetFieldValue, }) {
+    const tGenerated = useGeneratedTranslations();
+    const locale = useLocale();
+    // Formula fields are render-only: recompute the value on every render via
+    // the evaluator and pass through to the display input. When the formula
+    // resolves to null (e.g. an `entity_attr` whose picker is empty) we show
+    // the optional `field.config.defaultDisplay` placeholder or an em-dash.
+    if (field.type === 'formula' && field.formula) {
+        const computed = evaluateFormulaTree(field.formula, evalCtx);
+        const fallback = field.config?.defaultDisplay ?? '—';
+        const display = computed === null || computed === undefined || computed === '' ? fallback : String(computed);
+        return (_jsx(Input, { value: display, disabled: true, className: "bg-bg-subtle font-mono text-sm", title: tGenerated('m_030778daefe8eb') }));
+    }
+    switch (field.type) {
+        case 'text':
+        case 'email':
+        case 'phone':
+        case 'url':
+            return (_jsx(Input, { value: value ?? '', onChange: (e) => onChange(e.target.value), type: field.type === 'email'
+                    ? 'email'
+                    : field.type === 'phone'
+                        ? 'tel'
+                        : field.type === 'url'
+                            ? 'url'
+                            : 'text', inputMode: field.type === 'email'
+                    ? 'email'
+                    : field.type === 'phone'
+                        ? 'tel'
+                        : field.type === 'url'
+                            ? 'url'
+                            : 'text', autoComplete: field.type === 'email'
+                    ? 'email'
+                    : field.type === 'phone'
+                        ? 'tel'
+                        : field.type === 'url'
+                            ? 'url'
+                            : 'off', enterKeyHint: "next" }));
+        case 'long_text':
+            return (_jsx(Textarea, { rows: 3, value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+        case 'number':
+            return _jsx(NumberStepper, { field: field, value: value, onChange: onChange });
+        case 'rating':
+            return _jsx(RatingButtons, { field: field, value: value, onChange: onChange });
+        case 'slider': {
+            const c = (field.config ?? {});
+            const min = c.min ?? 0;
+            const max = c.max ?? 10;
+            const step = c.step ?? 1;
+            const v = typeof value === 'number' ? value : min;
+            return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: v, onChange: (e) => onChange(Number(e.target.value)), className: "h-2 flex-1 cursor-pointer appearance-none rounded-full bg-bg-subtle accent-primary" }), _jsxs("span", { className: "w-12 text-right text-sm font-semibold text-fg tabular-nums", children: [_jsx(GeneratedValue, { value: v }), _jsx(GeneratedValue, { value: c.unit ? ` ${c.unit}` : '' })] })] }));
+        }
+        case 'gps': {
+            const loc = value;
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            if (typeof navigator === 'undefined' || !navigator.geolocation) {
+                                toast.error(tGenerated('m_0027988a09362c'));
+                                return;
+                            }
+                            navigator.geolocation.getCurrentPosition((p) => onChange({
+                                lat: p.coords.latitude,
+                                lng: p.coords.longitude,
+                                accuracy: p.coords.accuracy,
+                                capturedAt: new Date().toISOString(),
+                            }), () => toast.error(tGenerated('m_1a66e46e2f8f21')), { enableHighAccuracy: true, timeout: 10_000 });
+                        }, children: [_jsx(MapPin, { size: 14 }), ' ', _jsx(GeneratedValue, { value: loc ? (_jsx(GeneratedText, { id: "m_0bcab596e5288c" })) : (_jsx(GeneratedText, { id: "m_07cd022cc38d60" })) })] }), _jsx(GeneratedValue, { value: loc ? (_jsxs("p", { className: "text-xs text-fg-muted", children: [_jsx(GeneratedValue, { value: loc.lat.toFixed(5) }), ",", ' ', _jsx(GeneratedValue, { value: loc.lng.toFixed(5) }), _jsx(GeneratedValue, { value: loc.accuracy ? (_jsx(GeneratedText, { id: "m_170bba2afbd664", values: { value0: Math.round(loc.accuracy) } })) : ('') })] })) : null })] }));
+        }
+        case 'matrix': {
+            const c = (field.config ?? {});
+            const rows = c.rows ?? [];
+            const scale = c.scale ?? [];
+            const v = value ?? {};
+            if (rows.length === 0 || scale.length === 0) {
+                return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_08ff35b4e882af" }) }));
+            }
+            return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "p-1.5" }), _jsx(GeneratedValue, { value: scale.map((s) => (_jsx("th", { className: "p-1.5 text-center text-xs font-medium text-fg-muted", children: _jsx(GeneratedValue, { value: s.label }) }, s.value))) })] }) }), _jsx("tbody", { children: _jsx(GeneratedValue, { value: rows.map((r) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("td", { className: "py-1.5 pr-2 text-fg", children: _jsx(GeneratedValue, { value: r.label }) }), _jsx(GeneratedValue, { value: scale.map((s) => (_jsx("td", { className: "p-1.5 text-center", children: _jsx("input", { type: "radio", name: `${field.id}_${r.key}`, checked: v[r.key] === s.value, onChange: () => onChange({ ...v, [r.key]: s.value }) }) }, s.value))) })] }, r.key))) }) })] }) }));
+        }
+        case 'risk_matrix': {
+            const current = value && typeof value === 'object' && !Array.isArray(value)
+                ? value
+                : undefined;
+            return (_jsx(RiskMatrixField, { label: tGenerated('m_0a8b09bc1dafbb'), likelihoodName: `${field.id}.likelihood`, severityName: `${field.id}.severity`, defaultLikelihood: typeof current?.likelihood === 'number' ? current.likelihood : undefined, defaultSeverity: typeof current?.severity === 'number' ? current.severity : undefined, onChange: ({ likelihood, severity, score, label }) => onChange(likelihood === null || severity === null || score === null
+                    ? {}
+                    : { likelihood, severity, score, label: label ?? '' }) }));
+        }
+        case 'formula':
+            // No formula configured — fall back to a read-only blank.
+            return _jsx(Input, { disabled: true, placeholder: tGenerated('m_1989eb71707ad3') });
+        case 'date':
+            return (_jsx(Input, { type: "date", value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+        case 'datetime':
+            return (_jsx(Input, { type: "datetime-local", value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+        case 'time':
+            return (_jsx(Input, { type: "time", value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+        case 'select': {
+            const opts = field.validation?.options ?? [];
+            return (_jsxs(Select, { value: value ?? '', onChange: (e) => onChange(e.target.value), children: [_jsx("option", { value: "", children: "\u2014" }), opts.map((o) => (_jsx("option", { value: o.value, children: localizeText(o.label, locale, o.value) }, o.value)))] }));
+        }
+        case 'radio': {
+            // Big tappable chips — far easier than a dropdown with gloves on.
+            const opts = field.validation?.options ?? [];
+            const cur = value ?? '';
+            return (_jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: _jsx(GeneratedValue, { value: opts.map((o) => {
+                        const sel = cur === o.value;
+                        return (_jsxs("button", { type: "button", "aria-pressed": sel, onClick: () => onChange(sel ? '' : o.value), className: `ff-chip flex min-h-[48px] items-center gap-2.5 rounded-md border px-4 text-left text-sm font-medium ${sel
+                                ? 'border-primary bg-primary-subtle text-primary'
+                                : 'border-border bg-surface text-fg hover:bg-bg-subtle'}`, children: [_jsx("span", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${sel ? 'border-primary' : 'border-border'}`, children: _jsx(GeneratedValue, { value: sel ? _jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-primary" }) : null }) }), _jsx(GeneratedValue, { value: localizeText(o.label, locale, o.value) })] }, o.value));
+                    }) }) }));
+        }
+        case 'multi_select':
+        case 'checkbox_group': {
+            const opts = field.validation?.options ?? [];
+            const arr = Array.isArray(value) ? value : [];
+            return (_jsx("div", { className: "space-y-2", children: _jsx(GeneratedValue, { value: opts.map((o) => {
+                        const sel = arr.includes(o.value);
+                        return (_jsxs("button", { type: "button", "aria-pressed": sel, onClick: () => onChange(sel ? arr.filter((v) => v !== o.value) : [...arr, o.value]), className: `ff-chip flex min-h-[48px] w-full items-center gap-3 rounded-md border px-4 text-left text-sm font-medium ${sel
+                                ? 'border-primary bg-primary-subtle text-primary'
+                                : 'border-border bg-surface text-fg hover:bg-bg-subtle'}`, children: [_jsx("span", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 ${sel
+                                        ? 'border-primary bg-primary text-primary-fg'
+                                        : 'border-border'}`, children: _jsx(GeneratedValue, { value: sel ? _jsx(Check, { size: 13 }) : null }) }), _jsx(GeneratedValue, { value: localizeText(o.label, locale, o.value) })] }, o.value));
+                    }) }) }));
+        }
+        case 'pass_fail_na':
+            return (_jsx("div", { className: "grid grid-cols-3 gap-2", children: _jsx(GeneratedValue, { value: [
+                        { v: 'pass', label: 'Pass' },
+                        { v: 'fail', label: 'Fail' },
+                        { v: 'n_a', label: 'N/A' },
+                    ].map(({ v, label }) => {
+                        const sel = value === v;
+                        const tone = sel
+                            ? v === 'pass'
+                                ? 'border-success bg-success-subtle text-success'
+                                : v === 'fail'
+                                    ? 'border-danger bg-danger-subtle text-danger'
+                                    : 'border-border bg-bg-subtle text-fg'
+                            : 'border-border bg-surface text-fg hover:bg-bg-subtle';
+                        return (_jsxs("button", { type: "button", "aria-pressed": sel, onClick: () => onChange(sel ? '' : v), className: `ff-chip flex min-h-[48px] flex-col items-center justify-center gap-0.5 rounded-md border text-sm font-semibold ${tone}`, children: [_jsx(GeneratedValue, { value: v === 'pass' ? _jsx(Check, { size: 18 }) : v === 'fail' ? _jsx(X, { size: 18 }) : null }), _jsx(GeneratedValue, { value: label })] }, v));
+                    }) }) }));
+        case 'yes_no_comment': {
+            const v = value ?? {};
+            return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "grid grid-cols-2 gap-2", children: _jsx(GeneratedValue, { value: [
+                                { opt: 'yes', label: 'Yes' },
+                                { opt: 'no', label: 'No' },
+                            ].map(({ opt, label }) => {
+                                const sel = v.answer === opt;
+                                const tone = sel
+                                    ? opt === 'yes'
+                                        ? 'border-success bg-success-subtle text-success'
+                                        : 'border-danger bg-danger-subtle text-danger'
+                                    : 'border-border bg-surface text-fg hover:bg-bg-subtle';
+                                return (_jsxs("button", { type: "button", "aria-pressed": sel, onClick: () => onChange({ ...v, answer: opt }), className: `ff-chip flex min-h-[48px] items-center justify-center gap-2 rounded-md border text-sm font-semibold ${tone}`, children: [_jsx(GeneratedValue, { value: opt === 'yes' ? _jsx(Check, { size: 18 }) : _jsx(X, { size: 18 }) }), _jsx(GeneratedValue, { value: label })] }, opt));
+                            }) }) }), _jsx(GeneratedValue, { value: v.answer === 'no' ? (_jsx(Textarea, { rows: 2, placeholder: tGenerated('m_03a7728b77e19a'), value: v.comment ?? '', onChange: (e) => onChange({ ...v, comment: e.target.value }) })) : null })] }));
+        }
+        case 'traffic_light':
+            return (_jsx("div", { className: "grid grid-cols-3 gap-2", children: _jsx(GeneratedValue, { value: [
+                        {
+                            v: 'green',
+                            label: 'Green',
+                            dot: 'bg-success',
+                            sel: 'border-success bg-success-subtle',
+                        },
+                        {
+                            v: 'yellow',
+                            label: 'Yellow',
+                            dot: 'bg-warning',
+                            sel: 'border-warning bg-warning-subtle',
+                        },
+                        {
+                            v: 'red',
+                            label: 'Red',
+                            dot: 'bg-danger',
+                            sel: 'border-danger bg-danger-subtle',
+                        },
+                    ].map((opt) => {
+                        const sel = value === opt.v;
+                        return (_jsxs("button", { type: "button", "aria-pressed": sel, onClick: () => onChange(sel ? '' : opt.v), className: `ff-chip flex min-h-[48px] flex-col items-center justify-center gap-1 rounded-md border text-sm font-medium ${sel
+                                ? `${opt.sel} text-fg text-fg`
+                                : 'border-border bg-surface text-fg hover:bg-bg-subtle'}`, children: [_jsx("span", { className: `inline-block h-4 w-4 rounded-full ${opt.dot}` }), _jsx(GeneratedValue, { value: opt.label })] }, opt.v));
+                    }) }) }));
+        case 'person_picker':
+            return (_jsx(SearchSelect, { value: value ?? '', onChange: (v) => onChange(v), options: people.map((p) => ({
+                    value: p.id,
+                    label: `${p.lastName}, ${p.firstName}`,
+                    hint: p.employeeNo ?? undefined,
+                })), placeholder: tGenerated('m_0be39d3a196b5b'), searchPlaceholder: tGenerated('m_0b842b664b4f3b'), sheetTitle: "Select a person", clearable: true, emptyLabel: "\u2014" }));
+        case 'multi_person_picker': {
+            const arr = Array.isArray(value) ? value : [];
+            const byId = new Map(people.map((p) => [p.id, p]));
+            return (_jsxs("div", { className: "space-y-2", children: [_jsx(GeneratedValue, { value: arr.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: _jsx(GeneratedValue, { value: arr.map((id) => {
+                                    const p = byId.get(id);
+                                    const label = p ? `${p.lastName}, ${p.firstName}` : id.slice(0, 8);
+                                    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-primary bg-primary-subtle py-0.5 pr-1 pl-2.5 text-xs text-primary", children: [_jsx(GeneratedValue, { value: label }), _jsx("button", { type: "button", onClick: () => onChange(arr.filter((v) => v !== id)), "aria-label": tGenerated('m_101f98a70352fa', { value0: label }), className: "rounded-full p-0.5 text-primary hover:bg-primary-subtle hover:text-primary", children: _jsx(X, { size: 12 }) })] }, id));
+                                }) }) })) : null }), _jsx(SearchSelect, { value: "", onChange: (id) => {
+                            if (id && !arr.includes(id))
+                                onChange([...arr, id]);
+                        }, options: people
+                            .filter((p) => !arr.includes(p.id))
+                            .map((p) => ({
+                            value: p.id,
+                            label: `${p.lastName}, ${p.firstName}`,
+                            hint: p.employeeNo ?? undefined,
+                        })), placeholder: tGenerated('m_0b3f2e42d2d097'), searchPlaceholder: tGenerated('m_0b842b664b4f3b'), sheetTitle: "Add a person" })] }));
+        }
+        case 'customer_picker':
+            return _jsx(OrgUnitPickerInput, { level: "customer", value: value, onChange: onChange });
+        case 'project_picker':
+            return _jsx(OrgUnitPickerInput, { level: "project", value: value, onChange: onChange });
+        case 'site_picker':
+            return _jsx(OrgUnitPickerInput, { level: "site", value: value, onChange: onChange });
+        case 'area_picker':
+            return _jsx(OrgUnitPickerInput, { level: "area", value: value, onChange: onChange });
+        case 'signature':
+            return _jsx(SignatureField, { value: value ?? null, onChange: onChange });
+        case 'sketch':
+            return _jsx(SketchField, { value: value, onChange: onChange });
+        case 'photo':
+        case 'photo_upload':
+            return (_jsx(FileUpload, { variant: "photo", value: Array.isArray(value) ? value : [], onChange: (files) => onChange(files) }));
+        case 'photo_ai':
+            return _jsx(PhotoAiInput, { value: value, onChange: onChange });
+        case 'photo_annotated':
+            return _jsx(PhotoAnnotateInput, { value: value, onChange: onChange });
+        case 'file':
+            return (_jsx(FileUpload, { variant: "file", value: Array.isArray(value) ? value : [], onChange: (files) => onChange(files) }));
+        case 'video':
+            return (_jsx(FileUpload, { variant: "video", value: Array.isArray(value) ? value : [], onChange: (files) => onChange(files) }));
+        case 'audio':
+            return (_jsx(FileUpload, { variant: "audio", value: Array.isArray(value) ? value : [], onChange: (files) => onChange(files) }));
+        case 'heading':
+            return (_jsx("h3", { className: "text-base font-semibold text-fg", children: _jsx(GeneratedValue, { value: localizeText(field.label, locale, field.id) }) }));
+        case 'paragraph':
+            return (_jsx("p", { className: "text-sm text-fg", children: _jsx(GeneratedValue, { value: localizeText(field.helpText ?? field.label, locale, field.id) }) }));
+        case 'divider':
+            return _jsx("hr", { className: "border-border" });
+        case 'typed_attestation':
+            return _jsx(TypedAttestationField, { field: field, value: value, onChange: onChange });
+        case 'table':
+            return _jsx(TableField, { field: field, value: value, onChange: onChange });
+        case 'lookup':
+            return (_jsx(LookupInput, { field: field, value: value, onChange: onChange, evalCtx: evalCtx, onSetFieldValue: onSetFieldValue }));
+        case 'data_table':
+            return _jsx(DataTableInput, { field: field, value: value, onChange: onChange, evalCtx: evalCtx });
+        case 'metric':
+            return _jsx(MetricBlock, { field: field, evalCtx: evalCtx });
+        case 'qr_scanner':
+            return _jsx(QrScannerInput, { value: value, onChange: onChange });
+        case 'ranking':
+            return _jsx(RankingInput, { field: field, value: value, onChange: onChange });
+        case 'rich_text':
+            return _jsx(RichTextInput, { value: value, onChange: onChange });
+        case 'address':
+            return _jsx(AddressInput, { value: value, onChange: onChange });
+        default:
+            return _jsx(Input, { value: value ?? '', onChange: (e) => onChange(e.target.value) });
+    }
+}
+// --- Number stepper + rating (big touch targets) ---------------------------
+// Numeric entry with −/+ steppers either side of a centred field. The keypad
+// is forced via inputMode='decimal' (we avoid type='number' so custom styling
+// and the steppers behave consistently across iOS Safari).
+function NumberStepper({ field, value, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const c = (field.config ?? {});
+    const step = c.step ?? 1;
+    const num = typeof value === 'number' ? value : value === '' || value == null ? null : Number(value);
+    const clamp = (n) => {
+        let v = n;
+        if (c.min !== undefined)
+            v = Math.max(c.min, v);
+        if (c.max !== undefined)
+            v = Math.min(c.max, v);
+        return Number(v.toFixed(6));
+    };
+    const bump = (dir) => onChange(clamp((num ?? 0) + dir * step));
+    const btn = 'ff-chip flex w-14 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-fg hover:bg-bg-subtle active:scale-95 disabled:opacity-40';
+    return (_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx("button", { type: "button", className: btn, onClick: () => bump(-1), "aria-label": tGenerated('m_1bbb2531ada8ce'), children: _jsx(Minus, { size: 18 }) }), _jsxs("div", { className: "relative flex-1", children: [_jsx(Input, { type: "text", inputMode: "decimal", enterKeyHint: "next", className: "h-full text-center text-lg font-semibold", value: num ?? '', onChange: (e) => {
+                            const raw = e.target.value.replace(/[^0-9.-]/g, '');
+                            if (raw === '' || raw === '-' || raw === '.')
+                                return onChange(raw === '' ? '' : raw);
+                            const n = Number(raw);
+                            onChange(Number.isNaN(n) ? '' : n);
+                        } }), _jsx(GeneratedValue, { value: c.unit ? (_jsx("span", { className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-sm text-fg-muted", children: _jsx(GeneratedValue, { value: c.unit }) })) : null })] }), _jsx("button", { type: "button", className: btn, onClick: () => bump(1), "aria-label": tGenerated('m_12a3f895c3506c'), children: _jsx(Plus, { size: 18 }) })] }));
+}
+// 1..max rating as big tappable buttons. Tap again to clear.
+function RatingButtons({ field, value, onChange, }) {
+    const c = (field.config ?? {});
+    const max = c.max ?? 5;
+    const cur = typeof value === 'number' ? value : null;
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: _jsx(GeneratedValue, { value: Array.from({ length: max }, (_, i) => i + 1).map((n) => {
+                const sel = cur === n;
+                return (_jsx("button", { type: "button", "aria-pressed": sel, onClick: () => onChange(sel ? '' : n), className: `ff-chip flex h-12 min-w-12 flex-1 items-center justify-center rounded-md border text-lg font-semibold ${sel
+                        ? 'border-primary bg-primary text-primary-fg'
+                        : 'border-border bg-surface text-fg hover:bg-bg-subtle'}`, children: _jsx(GeneratedValue, { value: n }) }, n));
+            }) }) }));
+}
+// --- Table field ------------------------------------------------------------
+function TableField({ field, value, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const config = (field.config ?? {});
+    const columns = (config.columns ?? []);
+    const rowMode = config.rowMode === 'fixed' ? 'fixed' : 'addable';
+    const fixedRows = config.rows ?? [];
+    const minRows = config.minRows ?? 0;
+    const maxRows = config.maxRows;
+    const stored = Array.isArray(value) ? value : [];
+    // In fixed mode the row set is defined by the template; pad stored values so
+    // every predefined row renders.
+    const rows = rowMode === 'fixed' ? fixedRows.map((_, i) => stored[i] ?? {}) : stored;
+    function setCell(i, key, v) {
+        onChange(rows.map((r, idx) => (idx === i ? { ...r, [key]: v } : r)));
+    }
+    function addRow() {
+        if (maxRows != null && rows.length >= maxRows)
+            return;
+        onChange([...rows, {}]);
+    }
+    function removeRow(i) {
+        if (rows.length <= minRows)
+            return;
+        onChange(rows.filter((_, idx) => idx !== i));
+    }
+    if (columns.length === 0) {
+        return (_jsx("p", { className: "rounded-md border border-dashed border-border px-3 py-2 text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0e96f06e9f8960" }) }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "hidden overflow-x-auto rounded-md border border-border sm:block", children: [_jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-subtle", children: [_jsx(GeneratedValue, { value: rowMode === 'fixed' ? (_jsx("th", { className: "border-b border-border px-2 py-1.5 text-left text-xs font-semibold text-fg" })) : null }), _jsx(GeneratedValue, { value: columns.map((c) => (_jsx("th", { className: "border-b border-border px-2 py-1.5 text-left text-xs font-semibold text-fg", children: _jsx(GeneratedValue, { value: c.label || c.key }) }, c.key))) }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsx("th", { className: "w-8 border-b border-border" })) : null })] }) }), _jsx("tbody", { children: _jsx(GeneratedValue, { value: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + 1, className: "px-2 py-3 text-center text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_1cee12b0954a84" }) }) })) : (rows.map((row, i) => (_jsxs("tr", { className: "border-b border-border last:border-b-0", children: [_jsx(GeneratedValue, { value: rowMode === 'fixed' ? (_jsx("td", { className: "px-2 py-1 text-xs font-medium whitespace-nowrap text-fg", children: _jsx(GeneratedValue, { value: fixedRows[i]?.label ?? (_jsx(GeneratedText, { id: "m_031b307596badd", values: { value0: i + 1 } })) }) })) : null }), _jsx(GeneratedValue, { value: columns.map((c) => (_jsx("td", { className: "px-1.5 py-1 align-top", children: _jsx(TableCell, { column: c, value: row[c.key], onChange: (v) => setCell(i, c.key, v) }) }, c.key))) }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsx("td", { className: "px-1 py-1 text-center align-middle", children: _jsx("button", { type: "button", onClick: () => removeRow(i), disabled: rows.length <= minRows, title: tGenerated('m_12b310a027b08a'), className: "rounded p-1 text-fg-muted hover:text-danger disabled:cursor-not-allowed disabled:opacity-30", children: _jsx(Trash2, { size: 14 }) }) })) : null })] }, i)))) }) })] }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsx("div", { className: "border-t border-border p-1.5", children: _jsxs("button", { type: "button", onClick: addRow, disabled: maxRows != null && rows.length >= maxRows, className: "flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary-subtle disabled:cursor-not-allowed disabled:opacity-40", children: [_jsx(Plus, { size: 13 }), " ", _jsx(GeneratedText, { id: "m_1eabd71bbc0199" })] }) })) : null })] }), _jsxs("div", { className: "space-y-3 sm:hidden", children: [_jsx(GeneratedValue, { value: rows.length === 0 ? (_jsx("p", { className: "text-sm text-fg-muted", children: _jsx(GeneratedText, { id: "m_119e08753a396f" }) })) : (rows.map((row, i) => (_jsxs("div", { className: "rounded-lg border border-border bg-bg-subtle/60 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold tracking-wide text-fg-muted uppercase", children: _jsx(GeneratedValue, { value: rowMode === 'fixed' ? ((fixedRows[i]?.label ?? (_jsx(GeneratedText, { id: "m_031b307596badd", values: { value0: i + 1 } })))) : (_jsx(GeneratedText, { id: "m_031b307596badd", values: { value0: i + 1 } })) }) }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsx("button", { type: "button", onClick: () => removeRow(i), disabled: rows.length <= minRows, title: tGenerated('m_12b310a027b08a'), className: "ff-chip flex h-9 w-9 items-center justify-center rounded-md text-fg-muted hover:bg-danger-subtle hover:text-danger disabled:opacity-30", children: _jsx(Trash2, { size: 16 }) })) : null })] }), _jsx("div", { className: "space-y-2.5", children: _jsx(GeneratedValue, { value: columns.map((c) => (_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-xs font-medium text-fg-muted", children: _jsx(GeneratedValue, { value: c.label || c.key }) }), _jsx(TableCell, { column: c, value: row[c.key], onChange: (v) => setCell(i, c.key, v), mobile: true })] }, c.key))) }) })] }, i)))) }), _jsx(GeneratedValue, { value: rowMode === 'addable' ? (_jsxs("button", { type: "button", onClick: addRow, disabled: maxRows != null && rows.length >= maxRows, className: "ff-chip flex min-h-[48px] w-full items-center justify-center gap-2 rounded-md border border-dashed border-border text-sm font-medium text-primary hover:bg-primary-subtle disabled:cursor-not-allowed disabled:opacity-40", children: [_jsx(Plus, { size: 16 }), " ", _jsx(GeneratedText, { id: "m_1eabd71bbc0199" })] })) : null })] })] }));
+}
+function TableCell({ column, value, onChange, mobile, }) {
+    const sizeCls = mobile ? '' : 'h-8 text-sm';
+    switch (column.type) {
+        case 'number':
+            return (_jsx(Input, { type: "text", inputMode: "decimal", className: sizeCls, value: value ?? '', onChange: (e) => {
+                    const raw = e.target.value.replace(/[^0-9.-]/g, '');
+                    onChange(raw === '' || Number.isNaN(Number(raw)) ? null : Number(raw));
+                } }));
+        case 'date':
+            return (_jsx(Input, { type: "date", className: sizeCls, value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+        case 'checkbox':
+            return (_jsx("div", { className: `flex items-center ${mobile ? 'h-10' : 'h-8 justify-center'}`, children: _jsx("input", { type: "checkbox", checked: !!value, onChange: (e) => onChange(e.target.checked), className: "h-5 w-5" }) }));
+        case 'select':
+            return (_jsxs(Select, { className: sizeCls, value: value ?? '', onChange: (e) => onChange(e.target.value), children: [_jsx("option", { value: "", children: "\u2014" }), (column.options ?? []).map((o) => (_jsx("option", { value: o.value, children: o.label || o.value }, o.value)))] }));
+        default:
+            return (_jsx(Input, { className: sizeCls, value: value ?? '', onChange: (e) => onChange(e.target.value) }));
+    }
+}
+// --- Typed attestation ------------------------------------------------------
+function TypedAttestationField({ field, value, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const locale = useLocale();
+    const v = (value ?? {});
+    const statement = field.config?.statement ??
+        (localizeText(field.helpText, locale, '') ||
+            'I attest that the information above is true and accurate.');
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Input, { placeholder: tGenerated('m_099ccdb4b80d5d'), value: v.name ?? '', onChange: (e) => onChange({ ...v, name: e.target.value }) }), _jsxs("label", { className: "flex items-start gap-2 text-sm text-fg", children: [_jsx("input", { type: "checkbox", className: "mt-0.5", checked: !!v.agreed, onChange: (e) => onChange({ ...v, agreed: e.target.checked }) }), _jsx("span", { children: _jsx(GeneratedValue, { value: statement }) })] })] }));
+}
+// --- Field-level validation helper -----------------------------------------
+//
+// Mirrors the per-field rules from the forms-core validator so we can
+// show inline errors on Next-button click without re-running the full
+// schema-wide validator.
+// --- Data-bound element runtimes -------------------------------------------
+function labelForRow(row, labelCol) {
+    if (labelCol && row[labelCol] != null && row[labelCol] !== '')
+        return String(row[labelCol]);
+    // Fall back to the first non-meta column with a value.
+    for (const k of Object.keys(row)) {
+        if (!k.startsWith('__') && row[k] != null && row[k] !== '')
+            return String(row[k]);
+    }
+    return String(row.__rowId ?? '—');
+}
+const ORG_PICKER_COPY = {
+    customer: { noun: 'customer', article: 'a' },
+    project: { noun: 'project', article: 'a' },
+    site: { noun: 'site', article: 'a' },
+    area: { noun: 'area', article: 'an' },
+};
+function OrgUnitPickerInput({ level, value, onChange, }) {
+    const { adapter } = useProductionFormRuntime();
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const contextCache = useContext(OrgUnitOptionsCacheContext);
+    // Defensive per-instance fallback for a render outside FormRenderer's
+    // provider. Lazy state (not a ref) so reading it during render is legal.
+    const [fallbackCache] = useState(() => ({}));
+    const cache = contextCache ?? fallbackCache;
+    const [options, setOptions] = useState(() => cache[level] ?? []);
+    const [loading, setLoading] = useState(() => cache[level] === undefined);
+    useEffect(() => {
+        // Cache hit → initial state already correct; no fetch / no setState needed.
+        if (cache[level] !== undefined)
+            return;
+        let alive = true;
+        adapter.listHierarchyOptions(level)
+            .then((rows) => {
+            cache[level] = rows;
+            if (alive) {
+                setOptions(rows);
+                setLoading(false);
+            }
+        })
+            .catch(() => {
+            if (alive)
+                setLoading(false);
+        });
+        return () => {
+            alive = false;
+        };
+        // `cache` is a stable per-mount object (context / lazy state) — safe dep.
+    }, [adapter, level, cache]);
+    const { noun, article } = ORG_PICKER_COPY[level] ?? { noun: level, article: 'a' };
+    return (_jsx(SearchSelect, { value: value ?? '', onChange: (v) => onChange(v), options: options.map((o) => ({
+            value: o.id,
+            label: o.name,
+            hint: o.code ?? undefined,
+        })), placeholder: tGeneratedValue(loading
+            ? tGenerated('m_0e65697ec32c03')
+            : tGenerated('m_1d3baabf618cbd', { value0: article, value1: noun })), searchPlaceholder: tGenerated('m_13a874065f07f8', { value0: noun }), sheetTitle: `Select ${article} ${noun}`, clearable: true, emptyLabel: "\u2014" }));
+}
+// A data-bound dropdown. Fetches rows from its source (optionally cascaded by a
+// parent field's value), and on selection can auto-fill sibling fields.
+function LookupInput({ field, value, onChange, evalCtx, onSetFieldValue, }) {
+    const { adapter } = useProductionFormRuntime();
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const b = field.binding;
+    const parentVal = b?.filterByField ? evalCtx.values[b.filterByField] : undefined;
+    const hasCascade = !!b?.filterByField && !!b?.filterColumn;
+    const sourceKey = b?.sourceKey;
+    const where = b?.where;
+    const filterColumn = hasCascade ? b?.filterColumn : undefined;
+    const filterValue = hasCascade ? parentVal : undefined;
+    const pageSize = b?.limit ?? 50;
+    const valueColumn = b?.valueColumn || '__rowId';
+    const selectedValue = value == null ? '' : String(value);
+    const waitingParent = hasCascade && (parentVal == null || parentVal === '');
+    const [search, setSearch] = useState('');
+    const [debouncedSearch, setDebouncedSearch] = useState('');
+    const requestKey = JSON.stringify([
+        sourceKey,
+        where ?? null,
+        filterColumn,
+        filterValue,
+        pageSize,
+        valueColumn,
+        selectedValue,
+        debouncedSearch,
+    ]);
+    const [queryResult, setQueryResult] = useState({
+        key: '',
+        result: emptyDataQueryResult(1, pageSize),
+        error: false,
+    });
+    const waitingForDebounce = search.trim() !== debouncedSearch;
+    const loading = !!sourceKey && !waitingParent && (waitingForDebounce || queryResult.key !== requestKey);
+    const result = queryResult.key === requestKey ? queryResult.result : emptyDataQueryResult(1, pageSize);
+    const error = queryResult.key === requestKey && queryResult.error;
+    useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedSearch(search.trim()), 250);
+        return () => window.clearTimeout(timer);
+    }, [search]);
+    useEffect(() => {
+        if (!sourceKey || waitingParent)
+            return;
+        let alive = true;
+        adapter.queryData({
+            sourceKey,
+            where,
+            filterColumn,
+            filterValue,
+            search: debouncedSearch,
+            pageSize,
+            valueColumn,
+            selectedValue,
+        })
+            .then((res) => {
+            if (alive)
+                setQueryResult({ key: requestKey, result: res, error: false });
+        })
+            .catch(() => {
+            if (alive) {
+                setQueryResult({
+                    key: requestKey,
+                    result: emptyDataQueryResult(1, pageSize),
+                    error: true,
+                });
+            }
+        });
+        return () => {
+            alive = false;
+        };
+    }, [
+        debouncedSearch,
+        filterColumn,
+        filterValue,
+        pageSize,
+        requestKey,
+        selectedValue,
+        sourceKey,
+        valueColumn,
+        waitingParent,
+        where,
+    ]);
+    if (!sourceKey) {
+        return (_jsx(Select, { disabled: true, children: _jsx("option", { children: 'Configure a data source…' }) }));
+    }
+    const rowByValue = new Map();
+    if (result.selectedRow) {
+        rowByValue.set(String(result.selectedRow[valueColumn] ?? ''), result.selectedRow);
+    }
+    if (!waitingForDebounce) {
+        for (const row of result.rows) {
+            const rowValue = String(row[valueColumn] ?? '');
+            if (rowValue && !rowByValue.has(rowValue))
+                rowByValue.set(rowValue, row);
+        }
+    }
+    const rows = [...rowByValue.values()];
+    const pick = (rowVal) => {
+        onChange(rowVal);
+        if (onSetFieldValue && b.autofill?.length) {
+            const row = rowByValue.get(rowVal);
+            if (row) {
+                for (const m of b.autofill)
+                    onSetFieldValue(m.targetFieldId, row[m.column] ?? null);
+            }
+        }
+    };
+    return (_jsx(SearchSelect, { value: selectedValue, onChange: pick, options: rows.map((row) => ({
+            value: String(row[valueColumn] ?? ''),
+            label: labelForRow(row, b.labelColumn),
+        })), placeholder: tGeneratedValue(waitingParent ? tGenerated('m_071d6ce8114c46') : tGenerated('m_1129f239fbb89a')), searchPlaceholder: tGenerated('m_1d213acef86dbc'), sheetTitle: "Select a record", clearable: true, emptyLabel: "\u2014", disabled: waitingParent, searchable: true, remote: true, loading: loading, statusMessage: error
+            ? 'Could not load records. Change the search to retry.'
+            : result.total > result.rows.length
+                ? 'More results exist. Refine your search.'
+                : undefined, statusTone: error ? 'error' : 'muted', onSearchChange: (next) => setSearch(next.slice(0, 100)) }));
+}
+function emptyDataQueryResult(page, pageSize) {
+    return { columns: [], rows: [], total: 0, page, pageSize, selectedRow: null };
+}
+// A data-bound table — displays (and optionally lets the user select) rows from
+// a source. Selection stores the chosen rows' ids in the response value.
+function DataTableInput({ field, value, onChange, evalCtx, }) {
+    const { adapter } = useProductionFormRuntime();
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const locale = useLocale();
+    const formT = useTranslations('Forms');
+    const b = field.binding;
+    const parentVal = b?.filterByField ? evalCtx.values[b.filterByField] : undefined;
+    const hasCascade = !!b?.filterByField && !!b?.filterColumn;
+    const sourceKey = b?.sourceKey;
+    const where = b?.where;
+    const filterColumn = hasCascade ? b?.filterColumn : undefined;
+    const filterValue = hasCascade ? parentVal : undefined;
+    const pageSize = b?.limit ?? 25;
+    const waitingParent = hasCascade && (parentVal == null || parentVal === '');
+    const [search, setSearch] = useState('');
+    const [debouncedSearch, setDebouncedSearch] = useState('');
+    const contextKey = JSON.stringify([sourceKey, where ?? null, filterColumn, filterValue]);
+    const [pageState, setPageState] = useState({ contextKey, page: 1 });
+    const page = pageState.contextKey === contextKey ? pageState.page : 1;
+    const setCurrentPage = useCallback((next) => {
+        setPageState((current) => {
+            const currentPage = current.contextKey === contextKey ? current.page : 1;
+            return {
+                contextKey,
+                page: typeof next === 'function' ? next(currentPage) : next,
+            };
+        });
+    }, [contextKey]);
+    const requestKey = JSON.stringify([contextKey, debouncedSearch, page, pageSize]);
+    const [queryResult, setQueryResult] = useState({ key: '', result: emptyDataQueryResult(1, pageSize), error: false });
+    const waitingForDebounce = search.trim() !== debouncedSearch;
+    const loading = !!sourceKey && !waitingParent && (waitingForDebounce || queryResult.key !== requestKey);
+    const res = queryResult.key === requestKey ? queryResult.result : emptyDataQueryResult(page, pageSize);
+    const error = queryResult.key === requestKey && queryResult.error;
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            setDebouncedSearch(search.trim());
+            setCurrentPage(1);
+        }, 250);
+        return () => window.clearTimeout(timer);
+    }, [search, setCurrentPage]);
+    useEffect(() => {
+        if (!sourceKey || waitingParent)
+            return;
+        let alive = true;
+        adapter.queryData({
+            sourceKey,
+            where,
+            filterColumn,
+            filterValue,
+            search: debouncedSearch,
+            page,
+            pageSize,
+        })
+            .then((r) => {
+            if (!alive)
+                return;
+            const lastPage = Math.max(1, Math.ceil(r.total / r.pageSize));
+            if (page > lastPage)
+                setCurrentPage(lastPage);
+            setQueryResult({ key: requestKey, result: r, error: false });
+        })
+            .catch(() => {
+            if (alive) {
+                setQueryResult({
+                    key: requestKey,
+                    result: emptyDataQueryResult(page, pageSize),
+                    error: true,
+                });
+            }
+        });
+        return () => {
+            alive = false;
+        };
+    }, [
+        debouncedSearch,
+        filterColumn,
+        filterValue,
+        page,
+        pageSize,
+        requestKey,
+        setCurrentPage,
+        sourceKey,
+        waitingParent,
+        where,
+    ]);
+    if (!sourceKey)
+        return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_08824e0636c702" }) }));
+    const selectable = b.selectable ?? 'none';
+    const showCols = b.columns?.length
+        ? res.columns.filter((c) => b.columns.includes(c.key))
+        : res.columns.filter((c) => !c.key.startsWith('__'));
+    const selected = Array.isArray(value) ? value : [];
+    const toggle = (rowId) => {
+        if (selectable === 'single')
+            onChange([rowId]);
+        else
+            onChange(selected.includes(rowId) ? selected.filter((x) => x !== rowId) : [...selected, rowId]);
+    };
+    if (waitingParent) {
+        return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_1c34ceb10770ab" }) }));
+    }
+    const pageCount = Math.max(1, Math.ceil(res.total / pageSize));
+    const from = res.total === 0 ? 0 : (page - 1) * pageSize + 1;
+    const to = Math.min(res.total, page * pageSize);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "relative max-w-sm", children: [_jsx(Search, { size: 15, className: "pointer-events-none absolute top-2.5 left-2.5 text-fg-muted" }), _jsx(Input, { type: "search", value: search, onChange: (event) => setSearch(event.target.value.slice(0, 100)), placeholder: tGenerated('m_1d213acef86dbc'), "aria-label": tGeneratedValue(formT('searchRecords', {
+                            field: localizeText(field.label, locale, 'data table'),
+                        })), className: "h-9 pr-3 pl-8" })] }), _jsxs("div", { className: "overflow-x-auto rounded border border-border", children: [_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border bg-bg-subtle text-left text-xs text-fg-muted", children: [_jsx(GeneratedValue, { value: selectable !== 'none' ? _jsx("th", { className: "w-8 px-2 py-1.5" }) : null }), _jsx(GeneratedValue, { value: showCols.map((c) => (_jsx("th", { className: "px-2 py-1.5 font-medium", children: _jsx(GeneratedValue, { value: c.label }) }, c.key))) })] }) }), _jsx("tbody", { children: _jsx(GeneratedValue, { value: res.rows.map((r, i) => {
+                                        const rowId = String(r.__rowId ?? i);
+                                        const isSel = selected.includes(rowId);
+                                        return (_jsxs("tr", { className: `border-b border-border ${isSel ? 'bg-primary-subtle' : ''} ${selectable !== 'none' ? 'cursor-pointer hover:bg-bg-subtle' : ''}`, onClick: selectable !== 'none' ? () => toggle(rowId) : undefined, children: [_jsx(GeneratedValue, { value: selectable !== 'none' ? (_jsx("td", { className: "px-2 py-1.5", children: _jsx("input", { type: selectable === 'single' ? 'radio' : 'checkbox', checked: isSel, "aria-label": tGenerated('m_195a8468f60956', {
+                                                                value0: isSel ? 'Deselect' : 'Select',
+                                                                value1: rowId,
+                                                            }), onClick: (event) => event.stopPropagation(), onChange: () => toggle(rowId) }) })) : null }), _jsx(GeneratedValue, { value: showCols.map((c) => (_jsx("td", { className: "px-2 py-1.5 text-fg", children: _jsx(GeneratedValue, { value: r[c.key] == null || r[c.key] === '' ? '—' : String(r[c.key]) }) }, c.key))) })] }, rowId));
+                                    }) }) })] }), _jsx(GeneratedValue, { value: loading ? (_jsx("p", { className: "px-3 py-4 text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0e65697ec32c03" }) })) : null }), _jsx(GeneratedValue, { value: !loading && error ? (_jsx("p", { className: "px-3 py-4 text-xs text-danger", children: _jsx(GeneratedText, { id: "m_1fa9ced82f8b16" }) })) : null }), _jsx(GeneratedValue, { value: !loading && !error && res.rows.length === 0 ? (_jsx("p", { className: "px-3 py-4 text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_02c65c639b006d" }) })) : null })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-fg-muted", children: [_jsx("span", { children: _jsx(GeneratedValue, { value: res.total === 0 ? (_jsx(GeneratedText, { id: "m_0c726da8b78d42" })) : (_jsx(GeneratedText, { id: "m_1f2236b17eb1ef", values: { value0: from, value1: to, value2: res.total } })) }) }), _jsx(GeneratedValue, { value: pageCount > 1 ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", disabled: page <= 1 || loading, onClick: () => setCurrentPage((current) => Math.max(1, current - 1)), className: "rounded border border-border px-2 py-1 disabled:opacity-40", children: _jsx(GeneratedText, { id: "m_0b628e024bdff1" }) }), _jsxs("span", { className: "px-1", children: [_jsx(GeneratedText, { id: "m_1f07a454b7b05b" }), " ", _jsx(GeneratedValue, { value: page }), ' ', _jsx(GeneratedText, { id: "m_00e704d1194796" }), " ", _jsx(GeneratedValue, { value: pageCount })] }), _jsx("button", { type: "button", disabled: page >= pageCount || loading, onClick: () => setCurrentPage((current) => Math.min(pageCount, current + 1)), className: "rounded border border-border px-2 py-1 disabled:opacity-40", children: _jsx(GeneratedText, { id: "m_08b5fa148b2af7" }) })] })) : null })] })] }));
+}
+// A display-only KPI / chart — aggregates its source server-side and renders a
+// single number, a bar/line chart, or a proportion list (pie).
+function MetricBlock({ field, evalCtx }) {
+    const { adapter } = useProductionFormRuntime();
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const b = field.binding;
+    const parentVal = b?.filterByField ? evalCtx.values[b.filterByField] : undefined;
+    const hasCascade = !!b?.filterByField && !!b?.filterColumn;
+    const [res, setRes] = useState(null);
+    const agg = b?.aggregate;
+    useEffect(() => {
+        if (!b?.sourceKey)
+            return;
+        let alive = true;
+        adapter.aggregateData({
+            sourceKey: b.sourceKey,
+            fn: agg?.fn ?? 'count',
+            column: agg?.column,
+            groupBy: agg?.groupBy,
+            where: b.where,
+            filterColumn: hasCascade ? b.filterColumn : undefined,
+            filterValue: hasCascade ? parentVal : undefined,
+            groupLimit: b.limit ?? (b.display === 'pie' ? 8 : 12),
+        })
+            .then((r) => {
+            if (alive)
+                setRes(r);
+        })
+            .catch(() => {
+            if (alive)
+                setRes(null);
+        });
+        return () => {
+            alive = false;
+        };
+    }, [
+        agg?.column,
+        agg?.fn,
+        agg?.groupBy,
+        b?.filterByField,
+        b?.filterColumn,
+        b?.limit,
+        b?.display,
+        b?.sourceKey,
+        b?.where,
+        hasCascade,
+        parentVal,
+    ]);
+    if (!b?.sourceKey)
+        return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_08824e0636c702" }) }));
+    const fmt = (n) => n == null ? '—' : Number.isInteger(n) ? String(n) : n.toFixed(1);
+    if (res?.groups && res.groups.length > 0) {
+        const display = b.display ?? 'bar';
+        if (display === 'pie') {
+            const total = res.groups.reduce((a, g) => a + g.value, 0) || 1;
+            return (_jsx("div", { className: "space-y-1.5", children: _jsx(GeneratedValue, { value: res.groups.map((g) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "w-28 truncate text-fg", children: _jsx(GeneratedValue, { value: g.key }) }), _jsx("div", { className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-subtle", children: _jsx("div", { className: "h-full rounded-full bg-primary", style: { width: `${(g.value / total) * 100}%` } }) }), _jsx("span", { className: "w-10 text-right text-fg-muted tabular-nums", children: _jsx(GeneratedValue, { value: fmt(g.value) }) })] }, g.key))) }) }));
+        }
+        const max = Math.max(...res.groups.map((g) => g.value), 1);
+        return (_jsx("div", { className: "flex items-end gap-1.5", style: { height: 120 }, children: _jsx(GeneratedValue, { value: res.groups.map((g) => (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-end gap-1", children: [_jsx("div", { className: "w-full rounded-t bg-primary", style: { height: `${Math.max((g.value / max) * 100, 3)}%` }, title: tGeneratedValue(`${g.key}: ${fmt(g.value)}`) }), _jsx("span", { className: "w-full truncate text-center text-[9px] text-fg-muted", children: _jsx(GeneratedValue, { value: g.key }) })] }, g.key))) }) }));
+    }
+    return (_jsxs("div", { className: "inline-flex flex-col rounded-lg border border-border bg-surface px-4 py-3", children: [_jsx("span", { className: "text-3xl font-semibold text-fg tabular-nums", children: _jsx(GeneratedValue, { value: fmt(res?.value ?? null) }) }), _jsxs("span", { className: "mt-0.5 text-[10px] tracking-wide text-fg-muted uppercase", children: [_jsx(GeneratedValue, { value: agg?.fn ?? _jsx(GeneratedText, { id: "m_15f748343d3956" }) }), _jsx(GeneratedValue, { value: agg?.column ? ` · ${agg.column}` : '' }), _jsx(GeneratedValue, { value: res ? _jsx(GeneratedText, { id: "m_0e814cfafd9944", values: { value0: res.total } }) : '' })] })] }));
+}
+// --- AI photo analysis element ---------------------------------------------
+function riskTone(risk) {
+    return risk === 'high'
+        ? 'bg-danger-subtle text-danger'
+        : risk === 'medium'
+            ? 'bg-warning-subtle text-warning'
+            : risk === 'low'
+                ? 'bg-warning-subtle text-warning'
+                : 'bg-success-subtle text-success';
+}
+function sevTone(sev) {
+    return sev === 'high' ? 'text-danger' : sev === 'medium' ? 'text-warning' : 'text-warning';
+}
+// Photo capture + on-demand AI safety analysis (missing PPE / hazards). Stores a
+// compound value { attachments, analysis?, analyzedAt? }. Editing the photos
+// clears a stale analysis.
+function PhotoAiInput({ value, onChange }) {
+    const { adapter } = useProductionFormRuntime();
+    const v = (value && typeof value === 'object' && !Array.isArray(value) ? value : {});
+    const attachments = Array.isArray(v.attachments) ? v.attachments : [];
+    const [analyzing, setAnalyzing] = useState(false);
+    const [err, setErr] = useState(null);
+    const a = v.analysis;
+    const setFiles = (files) => {
+        const unchanged = attachmentIdsEqual(attachments, files);
+        onChange({
+            attachments: files,
+            analysis: unchanged ? v.analysis : undefined,
+            analyzedAt: unchanged ? v.analyzedAt : undefined,
+        });
+    };
+    const analyze = () => {
+        if (attachments.length === 0 || analyzing)
+            return;
+        setErr(null);
+        setAnalyzing(true);
+        const analyzePhotos = adapter.analyzePhotos;
+        if (!analyzePhotos) {
+            setErr('Photo analysis is not configured for this form runtime.');
+            setAnalyzing(false);
+            return;
+        }
+        analyzePhotos({ attachmentIds: attachments.map((x) => x.attachmentId) })
+            .then((res) => {
+            if (res.ok)
+                onChange({ attachments, analysis: res.analysis, analyzedAt: new Date().toISOString() });
+            else
+                setErr(res.error);
+        })
+            .catch(() => setErr('Analysis failed'))
+            .finally(() => setAnalyzing(false));
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { variant: "photo", value: attachments, onChange: setFiles }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: attachments.length === 0 || analyzing, onClick: analyze, children: [_jsx(Sparkles, { size: 14 }), _jsx(GeneratedValue, { value: ' ' }), _jsx(GeneratedValue, { value: analyzing ? (_jsx(GeneratedText, { id: "m_03e83706cf8b10" })) : a ? (_jsx(GeneratedText, { id: "m_0535300396f0de" })) : (_jsx(GeneratedText, { id: "m_0fec93e95858fc" })) })] }), _jsx(GeneratedValue, { value: a ? (_jsx("span", { className: `rounded-full px-2 py-0.5 text-xs font-medium ${riskTone(a.overallRisk)}`, children: _jsx(GeneratedValue, { value: a.overallRisk === 'none' ? (_jsx(GeneratedText, { id: "m_01711e3b6ef4b1" })) : (_jsx(GeneratedText, { id: "m_114202332342ab", values: { value0: a.overallRisk } })) }) })) : null })] }), _jsx(GeneratedValue, { value: err ? (_jsx("p", { className: "text-xs text-danger", children: _jsx(GeneratedValue, { value: err }) })) : null }), _jsx(GeneratedValue, { value: a ? (_jsxs("div", { className: "space-y-2 rounded-lg border border-border bg-bg-subtle/60 p-3 text-sm", children: [_jsx(GeneratedValue, { value: a.summary ? (_jsx("p", { className: "text-fg", children: _jsx(GeneratedValue, { value: a.summary }) })) : null }), _jsx(GeneratedValue, { value: a.ppe.length > 0 ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold tracking-wide text-fg-muted uppercase", children: [_jsx(ShieldCheck, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_18391e161b9ed6" })] }), _jsx("ul", { className: "space-y-0.5", children: _jsx(GeneratedValue, { value: a.ppe.map((p, i) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx("span", { className: p.status === 'present' ? 'text-success' : 'text-danger', children: _jsx(GeneratedValue, { value: p.status === 'present' ? '✓' : '✗' }) }), _jsxs("span", { className: "text-fg", children: [_jsx("strong", { className: "capitalize", children: _jsx(GeneratedValue, { value: p.item }) }), _jsxs("span", { className: "text-fg-muted", children: [_jsx(GeneratedValue, { value: ' ' }), "\u2014 ", _jsx(GeneratedValue, { value: p.status }), _jsx(GeneratedValue, { value: p.detail ? `: ${p.detail}` : '' })] })] })] }, i))) }) })] })) : null }), _jsx(GeneratedValue, { value: a.hazards.length > 0 ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold tracking-wide text-fg-muted uppercase", children: [_jsx(AlertTriangle, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_168fba897c5202" })] }), _jsx("ul", { className: "space-y-0.5", children: _jsx(GeneratedValue, { value: a.hazards.map((h, i) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx(AlertTriangle, { size: 13, className: `mt-0.5 shrink-0 ${sevTone(h.severity)}` }), _jsxs("span", { className: "text-fg", children: [_jsx("strong", { className: "capitalize", children: _jsx(GeneratedValue, { value: h.type }) }), _jsx(GeneratedValue, { value: ' ' }), _jsxs("span", { className: `text-xs uppercase ${sevTone(h.severity)}`, children: ["(", _jsx(GeneratedValue, { value: h.severity }), ")"] }), _jsxs("span", { className: "text-fg-muted", children: [' ', "\u2014 ", _jsx(GeneratedValue, { value: h.detail })] })] })] }, i))) }) })] })) : null }), _jsx(GeneratedValue, { value: a.ppe.length === 0 && a.hazards.length === 0 ? (_jsx("p", { className: "text-xs text-success", children: _jsx(GeneratedText, { id: "m_04f68a7a34cfe6" }) })) : null }), _jsx("p", { className: "text-[10px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_05f4e3346f9aec" }) })] })) : null })] }));
+}
+function PhotoAnnotateInput({ value, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const v = (value && typeof value === 'object' && !Array.isArray(value) ? value : {});
+    const attachments = Array.isArray(v.attachments) ? v.attachments : [];
+    const markers = Array.isArray(v.markers) ? v.markers : [];
+    const imgWrapRef = useRef(null);
+    const photo = attachments[0];
+    const setFiles = (files) => {
+        const next = singlePrimaryPhoto(files);
+        const samePrimary = attachments[0]?.attachmentId === next[0]?.attachmentId;
+        onChange({ attachments: next, markers: samePrimary ? markers : [] });
+    };
+    const newId = () => globalThis.crypto?.randomUUID?.() ??
+        `m_${markers.length}_${markers.reduce((a, m) => a + m.x, 0)}`;
+    const addMarker = (e) => {
+        const rect = imgWrapRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return;
+        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+        onChange({ attachments, markers: [...markers, { id: newId(), x, y, label: '' }] });
+    };
+    const setLabel = (id, label) => onChange({ attachments, markers: markers.map((m) => (m.id === id ? { ...m, label } : m)) });
+    const removeMarker = (id) => onChange({ attachments, markers: markers.filter((m) => m.id !== id) });
+    if (attachments.length === 0 || !photo) {
+        return _jsx(FileUpload, { variant: "photo", value: attachments, onChange: setFiles, multiple: false });
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { ref: imgWrapRef, onClick: addMarker, className: "relative inline-block max-w-full cursor-crosshair select-none", children: [_jsx(RawImage, { src: photo.url, alt: tGenerated('m_0fe28938af7e45'), optimizationReason: "authenticated", draggable: false, className: "max-h-80 max-w-full rounded border border-border" }), _jsx(GeneratedValue, { value: markers.map((m, i) => (_jsx("span", { className: "absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-danger text-xs font-bold text-danger-fg ring-2 ring-surface", style: { left: `${m.x * 100}%`, top: `${m.y * 100}%` }, children: _jsx(GeneratedValue, { value: i + 1 }) }, m.id))) })] }), _jsx("p", { className: "text-[11px] text-fg-muted", children: _jsx(GeneratedText, { id: "m_02961df16c552c" }) }), _jsx(GeneratedValue, { value: markers.length > 0 ? (_jsx("ul", { className: "space-y-1", children: _jsx(GeneratedValue, { value: markers.map((m, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-danger text-[10px] font-bold text-danger-fg", children: _jsx(GeneratedValue, { value: i + 1 }) }), _jsx(Input, { value: m.label, placeholder: tGenerated('m_16fb1210fc864b', { value0: i + 1 }), onChange: (e) => setLabel(m.id, e.target.value), className: "h-8 flex-1" }), _jsx("button", { type: "button", onClick: () => removeMarker(m.id), className: "rounded p-1 text-fg-muted hover:bg-danger-subtle hover:text-danger", title: tGenerated('m_0079038e85c06d'), children: _jsx(Trash2, { size: 14 }) })] }, m.id))) }) })) : null }), _jsx("button", { type: "button", onClick: () => setFiles([]), className: "text-xs text-fg-muted hover:underline", children: _jsx(GeneratedText, { id: "m_0b4d2076c64fbb" }) })] }));
+}
+// --- QR / barcode scanner --------------------------------------------------
+function QrScannerInput({ value, onChange }) {
+    const tGenerated = useGeneratedTranslations();
+    const [scanning, setScanning] = useState(false);
+    const [err, setErr] = useState(null);
+    const videoRef = useRef(null);
+    const streamRef = useRef(null);
+    const intervalRef = useRef(null);
+    const stop = useCallback(() => {
+        if (intervalRef.current) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        streamRef.current?.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+        setScanning(false);
+    }, []);
+    useEffect(() => () => stop(), [stop]);
+    const start = async () => {
+        setErr(null);
+        const Detector = window.BarcodeDetector;
+        if (!Detector) {
+            setErr('Scanning isn’t supported on this device — type the code instead.');
+            return;
+        }
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: 'environment' },
+            });
+            streamRef.current = stream;
+            setScanning(true);
+            const v = videoRef.current;
+            if (v) {
+                v.srcObject = stream;
+                await v.play();
+                const detector = new Detector();
+                intervalRef.current = window.setInterval(async () => {
+                    if (!streamRef.current || !videoRef.current)
+                        return;
+                    try {
+                        const codes = await detector.detect(videoRef.current);
+                        const first = codes?.[0];
+                        if (first?.rawValue) {
+                            onChange(first.rawValue);
+                            stop();
+                        }
+                    }
+                    catch {
+                        /* transient detect errors are fine */
+                    }
+                }, 350);
+            }
+        }
+        catch {
+            setErr('Couldn’t access the camera — type the code instead.');
+            setScanning(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: value ?? '', placeholder: tGenerated('m_0a43fb83c91fdf'), onChange: (e) => onChange(e.target.value), className: "flex-1" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: scanning ? stop : start, children: [_jsx(ScanLine, { size: 14 }), ' ', _jsx(GeneratedValue, { value: scanning ? (_jsx(GeneratedText, { id: "m_0889ad146e26ca" })) : (_jsx(GeneratedText, { id: "m_198b8dba5a829c" })) })] })] }), _jsx(GeneratedValue, { value: scanning ? (_jsx("video", { ref: videoRef, muted: true, playsInline: true, className: "w-full max-w-xs rounded border border-border" })) : null }), _jsx(GeneratedValue, { value: err ? (_jsx("p", { className: "text-xs text-warning", children: _jsx(GeneratedValue, { value: err }) })) : null })] }));
+}
+// --- Ranking (reorder options) ---------------------------------------------
+function RankingInput({ field, value, onChange, }) {
+    const tGenerated = useGeneratedTranslations();
+    const locale = useLocale();
+    const opts = field.validation?.options ?? [];
+    const labelOf = (v) => {
+        const o = opts.find((x) => x.value === v);
+        return o ? localizeText(o.label, locale, o.value) : v;
+    };
+    const current = Array.isArray(value) ? value : [];
+    // Start from the saved order, then append any options not yet ranked + drop
+    // any stale values whose option was removed.
+    const ordered = [
+        ...current.filter((v) => opts.some((o) => o.value === v)),
+        ...opts.filter((o) => !current.includes(o.value)).map((o) => o.value),
+    ];
+    const move = (i, dir) => {
+        const j = i + dir;
+        if (j < 0 || j >= ordered.length)
+            return;
+        const next = [...ordered];
+        const tmp = next[i];
+        next[i] = next[j];
+        next[j] = tmp;
+        onChange(next);
+    };
+    if (opts.length === 0)
+        return (_jsx("p", { className: "text-xs text-fg-muted", children: _jsx(GeneratedText, { id: "m_0ca96ade46371f" }) }));
+    return (_jsx("ol", { className: "space-y-1", children: _jsx(GeneratedValue, { value: ordered.map((v, i) => (_jsxs("li", { className: "flex items-center gap-2 rounded-md border border-border bg-surface px-2 py-1.5 text-sm", children: [_jsx("span", { className: "w-5 text-center font-semibold text-fg-muted", children: _jsx(GeneratedValue, { value: i + 1 }) }), _jsx("span", { className: "flex-1 text-fg", children: _jsx(GeneratedValue, { value: labelOf(v) }) }), _jsx("button", { type: "button", disabled: i === 0, onClick: () => move(i, -1), className: "rounded p-1 text-fg-muted enabled:hover:bg-bg-subtle enabled:hover:text-fg disabled:opacity-30", title: tGenerated('m_1ec1460770eaa0'), children: _jsx(ChevronUp, { size: 14 }) }), _jsx("button", { type: "button", disabled: i === ordered.length - 1, onClick: () => move(i, 1), className: "rounded p-1 text-fg-muted enabled:hover:bg-bg-subtle enabled:hover:text-fg disabled:opacity-30", title: tGenerated('m_14ab8cefda3cf9'), children: _jsx(ChevronDown, { size: 14 }) })] }, v))) }) }));
+}
+// --- Rich text (lightweight contentEditable) -------------------------------
+function RichTextInput({ value, onChange }) {
+    const tGenerated = useGeneratedTranslations();
+    const readOnly = useContext(FillReadOnlyContext);
+    const ref = useRef(null);
+    // Capture the sanitized initial document once. React sees the same HTML prop
+    // on later renders and leaves the user's uncontrolled DOM/caret untouched.
+    const [initialHtml] = useState(() => sanitizeDocumentHtml(typeof value === 'string' ? value : ''));
+    const cleanEditorHtml = () => sanitizeDocumentHtml(ref.current?.innerHTML ?? '');
+    const exec = (cmd, arg) => {
+        if (readOnly)
+            return;
+        document.execCommand(cmd, false, arg);
+        onChange(cleanEditorHtml());
+        ref.current?.focus();
+    };
+    const btn = 'flex h-7 w-7 items-center justify-center rounded text-fg-muted enabled:hover:bg-surface enabled:hover:text-fg disabled:cursor-not-allowed disabled:opacity-40';
+    return (_jsxs("div", { className: "rounded-md border border-border", children: [_jsxs("div", { className: "flex gap-0.5 border-b border-border bg-bg-subtle p-1", children: [_jsx("button", { type: "button", className: btn, title: tGenerated('m_1e62e6d69a0d11'), disabled: readOnly, onClick: () => exec('bold'), children: _jsx(Bold, { size: 13 }) }), _jsx("button", { type: "button", className: btn, title: tGenerated('m_1ee96b6856cb45'), disabled: readOnly, onClick: () => exec('italic'), children: _jsx(Italic, { size: 13 }) }), _jsx("button", { type: "button", className: btn, title: tGenerated('m_1eba1a694e67d0'), disabled: readOnly, onClick: () => exec('insertUnorderedList'), children: _jsx(List, { size: 13 }) }), _jsx("button", { type: "button", className: btn, title: tGenerated('m_197fef09772e0d'), disabled: readOnly, onClick: () => {
+                            const url = window.prompt('Link URL');
+                            if (!url)
+                                return;
+                            const safeUrl = normalizeRichTextLinkUrl(url);
+                            if (!safeUrl) {
+                                toast.error(tGenerated('m_19dc719a9038ec'));
+                                return;
+                            }
+                            exec('createLink', safeUrl);
+                        }, children: _jsx(LinkIcon, { size: 13 }) })] }), _jsx("div", { ref: ref, contentEditable: !readOnly, suppressContentEditableWarning: true, dangerouslySetInnerHTML: { __html: initialHtml }, onInput: readOnly ? undefined : () => onChange(cleanEditorHtml()), onPaste: readOnly
+                    ? undefined
+                    : (event) => {
+                        event.preventDefault();
+                        const html = event.clipboardData.getData('text/html');
+                        if (html) {
+                            document.execCommand('insertHTML', false, sanitizeDocumentHtml(html));
+                        }
+                        else {
+                            document.execCommand('insertText', false, event.clipboardData.getData('text'));
+                        }
+                        onChange(cleanEditorHtml());
+                    }, onDrop: readOnly
+                    ? undefined
+                    : (event) => {
+                        event.preventDefault();
+                        document.execCommand('insertText', false, event.dataTransfer.getData('text/plain'));
+                        onChange(cleanEditorHtml());
+                    }, onBlur: readOnly
+                    ? undefined
+                    : () => {
+                        const clean = cleanEditorHtml();
+                        if (ref.current && ref.current.innerHTML !== clean)
+                            ref.current.innerHTML = clean;
+                        onChange(clean);
+                    }, className: "app-scroll prose prose-sm max-h-60 min-h-[80px] max-w-none overflow-auto p-2 text-sm focus:outline-none" })] }));
+}
+function AddressInput({ value, onChange }) {
+    const tGenerated = useGeneratedTranslations();
+    const v = (value && typeof value === 'object' && !Array.isArray(value) ? value : {});
+    const [suggestions, setSuggestions] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const timerRef = useRef(null);
+    const set = (patch) => onChange({ ...v, ...patch });
+    const onQuery = (q) => {
+        set({ query: q });
+        if (timerRef.current)
+            window.clearTimeout(timerRef.current);
+        if (q.trim().length < 4) {
+            setSuggestions([]);
+            return;
+        }
+        timerRef.current = window.setTimeout(async () => {
+            try {
+                setSearching(true);
+                const res = await fetch(`https://nominatim.openstreetmap.org/search?format=jsonv2&addressdetails=1&limit=5&q=${encodeURIComponent(q)}`, { headers: { Accept: 'application/json' } });
+                setSuggestions(res.ok ? (await res.json()) : []);
+            }
+            catch {
+                setSuggestions([]);
+            }
+            finally {
+                setSearching(false);
+            }
+        }, 500);
+    };
+    const choose = (s) => {
+        const a = s.address ?? {};
+        onChange({
+            query: s.display_name,
+            line1: [a.house_number, a.road].filter(Boolean).join(' ') || s.display_name,
+            city: a.city || a.town || a.village || a.hamlet || '',
+            region: a.state || a.province || a.county || '',
+            postal: a.postcode || '',
+            country: a.country || '',
+            lat: Number(s.lat),
+            lng: Number(s.lon),
+        });
+        setSuggestions([]);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Input, { value: v.query ?? '', placeholder: tGenerated('m_178de0c94da150'), onChange: (e) => onQuery(e.target.value) }), _jsx(GeneratedValue, { value: searching ? (_jsx("span", { className: "absolute top-2.5 right-2 text-xs text-fg-muted", children: "\u2026" })) : null }), _jsx(GeneratedValue, { value: suggestions.length > 0 ? (_jsx("ul", { className: "absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md border border-border bg-surface shadow-lg", children: _jsx(GeneratedValue, { value: suggestions.map((s, i) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => choose(s), className: "block w-full px-2 py-1.5 text-left text-xs text-fg hover:bg-bg-subtle", children: _jsx(GeneratedValue, { value: s.display_name }) }) }, i))) }) })) : null })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { value: v.line1 ?? '', placeholder: tGenerated('m_13c9eb2e75e0da'), onChange: (e) => set({ line1: e.target.value }), className: "col-span-2" }), _jsx(Input, { value: v.city ?? '', placeholder: tGenerated('m_0f8706f757eeb9'), onChange: (e) => set({ city: e.target.value }) }), _jsx(Input, { value: v.region ?? '', placeholder: tGenerated('m_09f3fc442fedaf'), onChange: (e) => set({ region: e.target.value }) }), _jsx(Input, { value: v.postal ?? '', placeholder: tGenerated('m_19e342351d140c'), onChange: (e) => set({ postal: e.target.value }) }), _jsx(Input, { value: v.country ?? '', placeholder: tGenerated('m_1bcca98c4d6c29'), onChange: (e) => set({ country: e.target.value }) })] })] }));
+}
+// --- Signature -------------------------------------------------------------
+//
+// The signature pad is supplied by the shared UI package. The runtime stores
+// an {attachmentId, url}
+// pair on the field value (the response viewer reads the url for display,
+// the PDF renderer reads the attachmentId for embed).
+function SignatureField({ value, onChange, }) {
+    const { adapter } = useProductionFormRuntime();
+    const readOnly = useContext(FillReadOnlyContext);
+    const stored = value ?? null;
+    async function persist(dataUrl) {
+        if (!dataUrl) {
+            onChange(null);
+            return;
+        }
+        const file = dataUrlToFile(dataUrl, `signature-${Date.now()}.png`);
+        if (!adapter.requestUpload || !adapter.finalizeUpload)
+            return;
+        const req = await adapter.requestUpload({
+            kind: 'signature',
+            filename: file.name,
+            contentType: file.type,
+            sizeBytes: file.size,
+        });
+        if (!req.ok) {
+            console.warn('[signature] presign failed', req.error);
+            return;
+        }
+        let finalizeInput;
+        try {
+            finalizeInput = await uploadReservedFile(req, file);
+        }
+        catch (error) {
+            console.warn('[signature] upload failed', error);
+            return;
+        }
+        const fin = await adapter.finalizeUpload(finalizeInput);
+        if (!fin.ok)
+            return;
+        onChange({ attachmentId: fin.attachmentId, url: fin.url });
+    }
+    return (_jsx("div", { children: _jsx(SignaturePad, { value: stored?.url ?? null, onChange: persist, disabled: readOnly }) }));
+}
+function SketchField({ value, onChange, }) {
+    const { adapter } = useProductionFormRuntime();
+    const readOnly = useContext(FillReadOnlyContext);
+    const stored = value ?? null;
+    async function persist(dataUrl, scene) {
+        if (!dataUrl) {
+            onChange(null);
+            return;
+        }
+        const file = dataUrlToFile(dataUrl, `sketch-${Date.now()}.png`);
+        if (!adapter.requestUpload || !adapter.finalizeUpload)
+            return;
+        const req = await adapter.requestUpload({
+            kind: 'image',
+            filename: file.name,
+            contentType: file.type,
+            sizeBytes: file.size,
+        });
+        if (!req.ok) {
+            console.warn('[sketch] presign failed', req.error);
+            return;
+        }
+        let finalizeInput;
+        try {
+            finalizeInput = await uploadReservedFile(req, file);
+        }
+        catch (error) {
+            console.warn('[sketch] upload failed', error);
+            return;
+        }
+        const fin = await adapter.finalizeUpload(finalizeInput);
+        if (!fin.ok)
+            return;
+        onChange({ attachmentId: fin.attachmentId, url: fin.url, scene });
+    }
+    return _jsx(SketchPad, { initialScene: stored?.scene ?? null, onChange: persist, readOnly: readOnly });
+}
+// --- Save status indicator -------------------------------------------------
+//
+// Small chip rendered in the top-right of the wizard header. Mirrors the
+// 'idle' | 'pending' | 'saved' | 'error' state machine driven by the
+// autosave hook. Clickable in the error state to manually retry the save.
+function SaveStatus({ status, lastSavedAt, error, onRetry, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    if (status === 'idle')
+        return null;
+    if (status === 'pending') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-bg-subtle px-2 py-0.5 text-[11px] font-medium text-fg", children: [_jsx(Cloud, { size: 11, className: "animate-pulse" }), _jsx(GeneratedText, { id: "m_106811f2aac664" })] }));
+    }
+    if (status === 'error') {
+        return (_jsxs("button", { type: "button", onClick: onRetry, title: tGeneratedValue(error ?? tGenerated('m_0731204fbd1b17')), className: "inline-flex items-center gap-1 rounded-full bg-danger-subtle px-2 py-0.5 text-[11px] font-medium text-danger ring-1 ring-danger hover:bg-danger-subtle", children: [_jsx(CloudOff, { size: 11 }), _jsx(GeneratedText, { id: "m_0f20f0bc8118a7" })] }));
+    }
+    // 'saved'
+    const label = lastSavedAt ? formatSavedAgo(lastSavedAt) : 'Saved';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-success-subtle px-2 py-0.5 text-[11px] font-medium text-success ring-1 ring-success", children: [_jsx(Check, { size: 11 }), _jsx(GeneratedValue, { value: label })] }));
+}
+function formatSavedAgo(at) {
+    const seconds = Math.floor((Date.now() - at.getTime()) / 1000);
+    if (seconds < 5)
+        return 'Saved';
+    if (seconds < 60)
+        return `Saved ${seconds}s ago`;
+    const mins = Math.floor(seconds / 60);
+    if (mins < 60)
+        return `Saved ${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    return `Saved ${hours}h ago`;
+}
+//# sourceMappingURL=production-form-renderer.js.map