@ydtb/tk-scope-capture 0.22.0 → 0.23.6

package/dist/src/client/pages/CaptureBuilderPage.js

@@ -1,80 +1,311 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { useLocation, useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { formatRelativeTime } from "@ydtb/tk-scope-lib/date";
-import { AlignLeft, CheckCircle2, Eye, FileText, GitBranch, Info, GripVertical, Inbox, LayoutPanelTop, PanelRight, ListTree, Mail, Palette, Phone, Plus, Save, Search, Send, Sparkles, Star, Type, } from "lucide-react";
+import { AlertCircle, ArrowLeft, ArrowRight, CheckCheck, CheckCircle2, ChevronLeft, ChevronRight, Columns3, Copy, Eye, Filter, ExternalLink, FileText, GitBranch, ImageIcon, Info, Inbox, Mail, Monitor, PanelRight, ListTree, Plus, Save, Search, Settings2, Send, Smartphone, Sparkles, Trash2, UserRound, } from "lucide-react";
+import { StorageAssetPicker, useAssetPickerHooks } from "@ydtb/tk-scope-asset-picker";
+import { WorkbenchColumnPanel, WorkbenchFilterPanel, WorkbenchSaveResetControls, WorkbenchTable, adaptWorkbenchColumns, fieldsToFilterFields, isWorkbenchStateDirty, persistWorkbenchColumns, useWorkbenchOffsetPagination, } from "@ydtb/tk-scope-data-workbench";
 import { useMutation, useQuery, useQueryClient } from "@ydtb/tk-scope-query-client";
-import { HeaderPortal, SidebarPortal, useContributions, useScopeLink } from "@ydtb/tk-scope/client";
+import { HeaderPortal, useContributions, useScopeLink } from "@ydtb/tk-scope/client";
 import { ToolPageHeader } from "@ydtb/tk-scope-shell";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@ydtb/tk-scope-ui/components/alert-dialog";
+import { BulkActionBar, BulkActionButton } from "@ydtb/tk-scope-ui/components/bulk-action-bar";
 import { Button } from "@ydtb/tk-scope-ui/components/button";
+import { InlineCellEditor } from "@ydtb/tk-scope-ui/components/data-table";
+import { FilterPanel } from "@ydtb/tk-scope-ui/components/filter-panel";
+import { AvatarPreview, COLORS, ICON_LIST, getColorStyle } from "@ydtb/tk-scope-ui/components/icon-picker";
+import { InlineEditableText } from "@ydtb/tk-scope-ui/components/inline-edit";
 import { Input } from "@ydtb/tk-scope-ui/components/input";
 import { Label } from "@ydtb/tk-scope-ui/components/label";
 import { TabbedPanel } from "@ydtb/tk-scope-ui/components/tabbed-panel";
+import { Skeleton } from "@ydtb/tk-scope-ui/components/skeleton";
 import { Switch } from "@ydtb/tk-scope-ui/components/switch";
 import { Textarea } from "@ydtb/tk-scope-ui/components/textarea";
 import { toast } from "@ydtb/tk-scope-ui/components/sonner";
 import { cn } from "@ydtb/tk-scope-ui/lib/utils";
 import { captureApi } from "../../client.js";
+import { createCapturePageHeaderItem, createCapturePageProgressItem, deriveCaptureDocumentFromFields, extractCaptureAnswerFields, extractCaptureAnswerItems, resolveCaptureDocument, } from "../../shared/document.js";
 import { BASE_CAPTURE_FIELD_TYPES, getCaptureFieldType } from "../../shared/field-types.js";
-import { CAPTURE_FORM_TEMPLATES } from "../../shared/templates.js";
+import { CAPTURE_RATING_COLORS, CaptureFormSurface, getFieldLayout, getFieldPlaceholder, getImageClassName, getRatingAlign, getRatingColor, getRatingIcon } from "../components/CaptureFormSurface.js";
+import { CaptureSidebar } from "../components/CaptureSidebar.js";
 const CAPTURE_BUILDER_DRAG_TYPE = "application/vnd.ydtb.capture.palette-item+json";
-const FIELD_ICON_MAP = { AlignLeft, ListTree, Mail, Phone, Star, Type };
+const CAPTURE_BUILDER_CONTENT_DRAG_TYPE = "application/vnd.ydtb.capture.content-kind";
 const FORM_PANEL_TABS = [
     { id: "outline", icon: ListTree, label: "Outline" },
     { id: "inspector", icon: CheckCircle2, label: "Inspector" },
-    { id: "submissions", icon: Inbox, label: "Submissions" },
-    { id: "actions", icon: GitBranch, label: "Actions" },
-    { id: "publish", icon: Send, label: "Publish" },
-    { id: "theme", icon: Palette, label: "Theme", position: "bottom" },
+    { id: "conditions", icon: GitBranch, label: "Conditional Visibility" },
+    { id: "validation", icon: CheckCheck, label: "Validation" },
+];
+const CAPTURE_LEAD_ACTIONS = [
+    { id: "contacts", label: "Contact update", description: "Create or update a Contact from answers.", icon: UserRound },
+    { id: "email", label: "Email send", description: "Send operator or respondent notifications.", icon: Mail },
 ];
-const CAPTURE_LIST_PANEL_TABS = [
+const CAPTURE_LIST_BASE_PANEL_TABS = [
     { id: "overview", icon: Info, label: "Overview" },
     { id: "submissions", icon: Inbox, label: "Submissions" },
     { id: "publish", icon: Send, label: "Publish" },
-    { id: "actions", icon: GitBranch, label: "Actions" },
+    { id: "actions", icon: GitBranch, label: "Lead actions" },
 ];
+function buildCaptureListPanelTabs(config) {
+    return [
+        ...CAPTURE_LIST_BASE_PANEL_TABS,
+        ...CAPTURE_LEAD_ACTIONS.filter((action) => Boolean(config[action.id]?.enabled)).map((action) => ({
+            id: action.id,
+            icon: action.icon,
+            label: action.label,
+        })),
+    ];
+}
+const HONEYPOT_FIELD_KEYS = ["email", "name", "phone", "company", "website"];
+function createDefaultFieldKey(tile, items) {
+    const suffix = Date.now().toString(36);
+    if (tile.defaultField.type !== "honeypot")
+        return `${tile.id}_${suffix}`;
+    const existingKeys = new Set(items.filter((item) => item.kind === "input").map((item) => item.key));
+    const availableKey = HONEYPOT_FIELD_KEYS.find((key) => !existingKeys.has(key));
+    return availableKey ?? `website_${suffix}`;
+}
+const CAPTURE_CONDITION_OPERATORS = {
+    text: ["is", "is_not", "contains", "does_not_contain", "starts_with", "ends_with", "regex", "is_empty", "is_not_empty"],
+    email: ["is", "is_not", "contains", "does_not_contain", "regex", "is_empty", "is_not_empty"],
+    phone: ["is", "is_not", "contains", "does_not_contain", "is_empty", "is_not_empty"],
+    textarea: ["contains", "does_not_contain", "regex", "is_empty", "is_not_empty"],
+    select: ["is", "is_not", "is_empty", "is_not_empty"],
+    rating: ["is", "is_not", "greater_than", "less_than", "greater_than_or_equal", "less_than_or_equal", "is_empty", "is_not_empty"],
+};
+function isConditionGroup(value) {
+    return Boolean(value && "conditions" in value);
+}
+function toConditionGroup(value) {
+    if (!value)
+        return undefined;
+    if (isConditionGroup(value))
+        return value;
+    const operator = value.operator === "notEquals"
+        ? "is_not"
+        : value.operator === "isEmpty"
+            ? "is_empty"
+            : value.operator === "isNotEmpty"
+                ? "is_not_empty"
+                : "is";
+    return {
+        id: crypto.randomUUID().slice(0, 12),
+        logic: "and",
+        conditions: [{
+                id: crypto.randomUUID().slice(0, 12),
+                fieldKey: value.fieldKey,
+                operator,
+                value: value.value == null ? undefined : String(value.value),
+            }],
+    };
+}
+function createDefaultValidationRule(field) {
+    return {
+        id: crypto.randomUUID().slice(0, 12),
+        message: `${field.label} is invalid`,
+        expression: {
+            id: crypto.randomUUID().slice(0, 12),
+            logic: "and",
+            conditions: [],
+        },
+    };
+}
 export function CaptureBuilderPage() {
     const { id } = useParams({ strict: false });
     const navigate = useNavigate();
+    const location = useLocation();
+    const search = useSearch({ strict: false });
     const sl = useScopeLink();
     const queryClient = useQueryClient();
+    const urlSubmissionViewId = typeof search.view === "string" && search.view.trim().length > 0 ? search.view : undefined;
     const [newFormName] = useState("Lead capture form");
     const [landingSearch, setLandingSearch] = useState("");
     const [selectedLandingDefinition, setSelectedLandingDefinition] = useState(null);
     const [activeLandingDetailTab, setActiveLandingDetailTab] = useState("overview");
+    const [activeWorkbenchViewId, setActiveWorkbenchViewId] = useState("all");
+    const [activeWorkbenchPanel, setActiveWorkbenchPanel] = useState(null);
+    const [captureItemsFilters, setCaptureItemsFilters] = useState(undefined);
+    const [captureItemsColumns, setCaptureItemsColumns] = useState(() => adaptWorkbenchColumns({
+        fields: CAPTURE_ITEMS_FIELDS,
+        persisted: DEFAULT_CAPTURE_ITEMS_COLUMNS,
+    }).configs);
+    const [savedCaptureItemsColumns, setSavedCaptureItemsColumns] = useState(captureItemsColumns);
+    const [captureItemsSort, setCaptureItemsSort] = useState({ field: "updatedAt", direction: "desc" });
+    const [savedCaptureItemsSort, setSavedCaptureItemsSort] = useState(captureItemsSort);
+    const [savedCaptureItemsFilters, setSavedCaptureItemsFilters] = useState(undefined);
+    const [activeSubmissionViewId, setActiveSubmissionViewId] = useState("all");
+    const [activeSubmissionPanel, setActiveSubmissionPanel] = useState(null);
+    const [submissionViewName, setSubmissionViewName] = useState("New submission view");
+    const [submissionViewNameError, setSubmissionViewNameError] = useState(null);
+    const [submissionFilters, setSubmissionFilters] = useState(undefined);
+    const [submissionColumns, setSubmissionColumns] = useState(() => adaptWorkbenchColumns({
+        fields: CAPTURE_SUBMISSION_SYSTEM_FIELDS,
+        persisted: DEFAULT_CAPTURE_SUBMISSION_COLUMNS,
+    }).configs);
+    const [savedSubmissionColumns, setSavedSubmissionColumns] = useState(submissionColumns);
+    const [submissionSort, setSubmissionSort] = useState({ field: "submittedAt", direction: "desc" });
+    const [savedSubmissionSort, setSavedSubmissionSort] = useState(submissionSort);
+    const [savedSubmissionFilters, setSavedSubmissionFilters] = useState(undefined);
     const [formName, setFormName] = useState("Untitled form");
-    const [fields, setFields] = useState([]);
+    const [formDocument, setFormDocument] = useState(() => deriveCaptureDocumentFromFields([]));
     const [actionConfig, setActionConfig] = useState({ contacts: { enabled: false, customFieldMappings: {} } });
     const [selectedId, setSelectedId] = useState(null);
-    const [isDragOver, setIsDragOver] = useState(false);
+    const [selectedItemIds, setSelectedItemIds] = useState(() => new Set());
+    const [currentPageId, setCurrentPageId] = useState("page-1");
     const [detailsOpen, setDetailsOpen] = useState(true);
     const [activePanel, setActivePanel] = useState("outline");
+    const [previewDevice, setPreviewDevice] = useState("desktop");
+    const [savedFieldIds, setSavedFieldIds] = useState(() => new Set());
     const captureContributions = useContributions("capture");
     const fieldTypes = useMemo(() => [...BASE_CAPTURE_FIELD_TYPES, ...captureContributions.flatMap((contribution) => contribution.fieldTypes ?? [])], [captureContributions]);
     const definitionsQuery = useQuery(captureApi.definitions.list.queryOptions({ input: {} }));
+    const itemViewsQuery = useQuery(captureApi.definitions.views.list.queryOptions({ input: {} }));
+    const submissionViewsQuery = useQuery({
+        ...captureApi.submissions.views.list.queryOptions({ input: { definitionId: id ?? "" } }),
+        enabled: Boolean(id),
+    });
     const definitionQuery = useQuery({
         ...captureApi.definitions.get.queryOptions({ input: { id: id ?? "" } }),
         enabled: Boolean(id),
     });
     const submissionsQuery = useQuery(captureApi.submissions.list.queryOptions({ input: {} }));
-    const workflowsQuery = useQuery({
-        ...captureApi.definitions.listWorkflows.queryOptions({ input: {} }),
-        enabled: Boolean(id),
-    });
+    const workflowsQuery = useQuery(captureApi.definitions.listWorkflows.queryOptions({ input: {} }));
+    const contactCustomFieldsQuery = useQuery(captureApi.definitions.listContactCustomFields.queryOptions({ input: {} }));
     useEffect(() => {
         const definition = definitionQuery.data;
         if (!definition)
             return;
+        const nextDocument = resolveCaptureDocument(definition.fields, definition.document);
         setFormName(definition.name);
-        setFields(definition.fields);
+        setFormDocument(nextDocument);
+        const firstPageId = nextDocument.pages[0]?.id ?? "page-1";
         setActionConfig(definition.actionConfig ?? { contacts: { enabled: false, customFieldMappings: {} } });
-        setSelectedId(definition.fields[0]?.id ?? null);
+        setSavedFieldIds(new Set(extractCaptureAnswerItems(nextDocument).map((field) => field.id)));
+        setCurrentPageId(firstPageId);
+        const firstItemId = nextDocument.items.find((item) => item.pageId === firstPageId)?.id ?? null;
+        setSelectedId(firstItemId);
+        setSelectedItemIds(firstItemId ? new Set([firstItemId]) : new Set());
     }, [definitionQuery.data]);
-    const selectedField = useMemo(() => fields.find((field) => field.id === selectedId) ?? null, [fields, selectedId]);
+    useEffect(() => {
+        if (!selectedLandingDefinition)
+            return;
+        const freshDefinition = definitionsQuery.data?.find((definition) => definition.id === selectedLandingDefinition.id);
+        if (freshDefinition && freshDefinition !== selectedLandingDefinition)
+            setSelectedLandingDefinition(freshDefinition);
+    }, [definitionsQuery.data, selectedLandingDefinition]);
+    const fields = useMemo(() => extractCaptureAnswerFields(formDocument), [formDocument]);
+    const submissionFields = useMemo(() => buildSubmissionWorkbenchFields(fields), [fields]);
+    const sortedPages = useMemo(() => [...formDocument.pages].sort((a, b) => a.order - b.order), [formDocument.pages]);
+    const currentPage = useMemo(() => sortedPages.find((page) => page.id === currentPageId) ?? sortedPages[0] ?? null, [currentPageId, sortedPages]);
+    const currentPageIndex = Math.max(0, sortedPages.findIndex((page) => page.id === currentPage?.id));
+    const currentPageItems = useMemo(() => formDocument.items
+        .filter((item) => item.pageId === currentPage?.id)
+        .sort((a, b) => a.order - b.order), [currentPage?.id, formDocument.items]);
+    const selectedPageId = selectedId?.startsWith("page:") ? selectedId.slice("page:".length) : null;
+    const selectedPage = selectedPageId ? sortedPages.find((page) => page.id === selectedPageId) ?? null : null;
+    const selectedItem = useMemo(() => formDocument.items.find((item) => item.id === selectedId) ?? null, [formDocument.items, selectedId]);
+    const selectedItems = useMemo(() => formDocument.items.filter((item) => selectedItemIds.has(item.id)), [formDocument.items, selectedItemIds]);
+    const selectedInputItems = useMemo(() => selectedItems.filter((item) => item.kind === "input"), [selectedItems]);
+    const hasMultiSelection = selectedItems.length > 1;
+    const selectedField = !hasMultiSelection && selectedItem?.kind === "input" ? selectedItem : null;
+    const selectedTextBlock = !hasMultiSelection && selectedItem?.kind === "content.text" ? selectedItem : null;
+    const selectedIconBlock = !hasMultiSelection && selectedItem?.kind === "content.icon" ? selectedItem : null;
+    const selectedImageBlock = !hasMultiSelection && selectedItem?.kind === "content.image" ? selectedItem : null;
+    const selectedDivider = !hasMultiSelection && selectedItem?.kind === "content.divider" ? selectedItem : null;
+    const selectedPageHeader = !hasMultiSelection && selectedItem?.kind === "content.page-header" ? selectedItem : null;
+    const selectedPageProgress = !hasMultiSelection && selectedItem?.kind === "content.page-progress" ? selectedItem : null;
+    const selectedVisibilityTarget = selectedPage ?? selectedField ?? selectedTextBlock ?? selectedIconBlock ?? selectedImageBlock ?? selectedDivider ?? selectedPageHeader ?? selectedPageProgress;
+    const selectedIsStaticallyHidden = Boolean(selectedVisibilityTarget?.hidden);
+    const showValidationPanel = Boolean(selectedField?.required);
+    const showConditionsPanel = Boolean(selectedVisibilityTarget && !selectedIsStaticallyHidden);
+    const formPanelTabs = useMemo(() => FORM_PANEL_TABS.filter((tab) => {
+        if (tab.id === "validation")
+            return showValidationPanel;
+        if (tab.id === "conditions")
+            return showConditionsPanel;
+        return true;
+    }), [showConditionsPanel, showValidationPanel]);
+    useEffect(() => {
+        if (((!showValidationPanel && activePanel === "validation") || (!showConditionsPanel && activePanel === "conditions")))
+            setActivePanel("inspector");
+    }, [activePanel, showConditionsPanel, showValidationPanel]);
+    useEffect(() => {
+        const availableKeys = new Set(submissionFields.map((field) => field.key));
+        setSubmissionColumns((current) => adaptWorkbenchColumns({
+            fields: submissionFields,
+            persisted: persistWorkbenchColumns(current).filter((column) => availableKeys.has(column.fieldKey)),
+        }).configs);
+        setSavedSubmissionColumns((current) => adaptWorkbenchColumns({
+            fields: submissionFields,
+            persisted: persistWorkbenchColumns(current).filter((column) => availableKeys.has(column.fieldKey)),
+        }).configs);
+    }, [submissionFields]);
+    const selectedFieldKeyDuplicate = selectedField
+        ? fields.some((field) => field.id !== selectedField.id && field.key.trim() === selectedField.key.trim())
+        : false;
+    const selectedItemDeleteLabel = selectedField
+        ? "Delete field"
+        : selectedTextBlock
+            ? "Delete text block"
+            : selectedIconBlock
+                ? "Delete icon"
+                : selectedImageBlock
+                    ? "Delete image"
+                    : selectedDivider
+                        ? "Delete divider"
+                        : selectedPageHeader
+                            ? "Delete page header"
+                            : selectedPageProgress
+                                ? "Delete page progress"
+                                : null;
+    const selectedContextLabel = selectedPage
+        ? (selectedPage.title || "Page")
+        : selectedField
+            ? selectedField.label
+            : selectedTextBlock
+                ? (selectedTextBlock.title || "Text")
+                : selectedIconBlock
+                    ? "Icon"
+                    : selectedImageBlock
+                        ? "Image"
+                        : selectedDivider
+                            ? "Divider"
+                            : selectedPageHeader
+                                ? "Page header"
+                                : selectedPageProgress
+                                    ? "Page progress"
+                                    : null;
+    const detailsPanelTitle = activePanel === "conditions" && selectedContextLabel
+        ? `Conditional Visibility - ${selectedContextLabel}`
+        : activePanel === "validation" && selectedContextLabel
+            ? `Validation - ${selectedContextLabel}`
+            : formPanelTabs.find((tab) => tab.id === activePanel)?.label;
     const invalidateCapture = useCallback(() => {
         queryClient.invalidateQueries({ queryKey: captureApi.definitions.key() });
         queryClient.invalidateQueries({ queryKey: captureApi.submissions.key() });
     }, [queryClient]);
+    const invalidateItemViews = useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: captureApi.definitions.views.list.key() });
+    }, [queryClient]);
+    const createItemViewMutation = useMutation(captureApi.definitions.views.create.mutationOptions({ onSuccess: invalidateItemViews }));
+    const updateItemViewMutation = useMutation(captureApi.definitions.views.update.mutationOptions({ onSuccess: invalidateItemViews }));
+    const invalidateSubmissionViews = useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: captureApi.submissions.views.list.key() });
+    }, [queryClient]);
+    const createSubmissionViewMutation = useMutation(captureApi.submissions.views.create.mutationOptions({ onSuccess: invalidateSubmissionViews }));
+    const updateSubmissionViewMutation = useMutation(captureApi.submissions.views.update.mutationOptions({ onSuccess: invalidateSubmissionViews }));
+    const updateTagsMutation = useMutation(captureApi.definitions.updateTags.mutationOptions({
+        onSuccess: invalidateCapture,
+        onError: () => toast.error("Failed to update tags"),
+    }));
+    const updateActionConfigMutation = useMutation(captureApi.definitions.updateActionConfig.mutationOptions({
+        onSuccess: (definition) => {
+            invalidateCapture();
+            setSelectedLandingDefinition((current) => current?.id === definition.id ? { ...current, ...definition } : current);
+            toast.success("Capture actions saved");
+        },
+        onError: () => toast.error("Failed to update capture actions"),
+    }));
     const createMutation = useMutation(captureApi.definitions.create.mutationOptions({
         onSuccess: (definition) => {
             invalidateCapture();
@@ -97,73 +328,812 @@ export function CaptureBuilderPage() {
         },
         onError: () => toast.error("Failed to publish form"),
     }));
-    const applyFormTemplate = useCallback((templateId) => {
-        const template = CAPTURE_FORM_TEMPLATES.find((item) => item.id === templateId);
-        if (!template)
-            return;
-        setFormName(template.title);
-        setFields(template.fields.map((field) => ({ ...field, metadata: field.metadata ? { ...field.metadata } : undefined, options: field.options ? [...field.options] : undefined })));
-        setActionConfig(template.actionConfig ?? { contacts: { enabled: false, customFieldMappings: {} } });
-        setSelectedId(template.fields[0]?.id ?? null);
-        toast.success(`Applied ${template.label}`);
+    const setSingleSelectedItem = useCallback((itemId) => {
+        setSelectedId(itemId);
+        setSelectedItemIds(itemId ? new Set([itemId]) : new Set());
     }, []);
     const insertField = useCallback((tile) => {
         const fieldId = `field-${Date.now().toString(36)}`;
-        const newField = {
-            id: fieldId,
-            key: `${tile.id}_${Date.now().toString(36)}`,
-            label: tile.defaultField.label,
-            type: tile.defaultField.type,
-            required: tile.defaultField.required ?? false,
-            ...(tile.defaultField.options ? { options: tile.defaultField.options } : {}),
-            ...(tile.defaultField.metadata ? { metadata: tile.defaultField.metadata } : {}),
-        };
-        setFields((current) => [...current, newField]);
-        setSelectedId(fieldId);
-    }, []);
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const newField = {
+                id: fieldId,
+                key: createDefaultFieldKey(tile, current.items),
+                label: tile.defaultField.label,
+                type: tile.defaultField.type,
+                required: tile.defaultField.required ?? false,
+                ...(tile.defaultField.options ? { options: tile.defaultField.options } : {}),
+                ...(tile.defaultField.metadata ? { metadata: tile.defaultField.metadata } : {}),
+                kind: "input",
+                pageId,
+                order: current.items.filter((item) => item.pageId === pageId).length,
+            };
+            return { ...current, items: [...current.items, newField] };
+        });
+        setSingleSelectedItem(fieldId);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertTextBlock = useCallback(() => {
+        const blockId = `text-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const textBlock = {
+                id: blockId,
+                kind: "content.text",
+                pageId,
+                order: current.items.filter((item) => item.pageId === pageId).length,
+                title: "Section intro",
+                body: "Add helpful context before respondents answer the next question.",
+            };
+            return { ...current, items: [...current.items, textBlock] };
+        });
+        setSingleSelectedItem(blockId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertImageBlock = useCallback(() => {
+        const imageId = `image-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const imageBlock = {
+                id: imageId,
+                kind: "content.image",
+                pageId,
+                order: current.items.filter((item) => item.pageId === pageId).length,
+                imageUrl: "",
+                shape: "square",
+                align: "center",
+                size: "medium",
+                fit: "cover",
+                source: { type: "upload" },
+            };
+            return { ...current, items: [...current.items, imageBlock] };
+        });
+        setSingleSelectedItem(imageId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertIconBlock = useCallback(() => {
+        const iconId = `icon-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const iconBlock = {
+                id: iconId,
+                kind: "content.icon",
+                pageId,
+                order: current.items.filter((item) => item.pageId === pageId).length,
+                icon: "sparkles",
+                iconColor: "indigo",
+                align: "center",
+            };
+            return { ...current, items: [...current.items, iconBlock] };
+        });
+        setSingleSelectedItem(iconId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertDivider = useCallback(() => {
+        const dividerId = `divider-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const divider = {
+                id: dividerId,
+                kind: "content.divider",
+                pageId,
+                order: current.items.filter((item) => item.pageId === pageId).length,
+            };
+            return { ...current, items: [...current.items, divider] };
+        });
+        setSingleSelectedItem(dividerId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertPageHeader = useCallback(() => {
+        const headerId = `header-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const page = current.pages.find((candidate) => candidate.id === pageId);
+            const header = {
+                ...createCapturePageHeaderItem(pageId, current.items.filter((item) => item.pageId === pageId).length, {
+                    preHeading: page?.preHeading,
+                    title: page?.title,
+                    description: page?.description,
+                }),
+                id: headerId,
+            };
+            return { ...current, items: [...current.items, header] };
+        });
+        setSingleSelectedItem(headerId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const insertPageProgress = useCallback(() => {
+        const progressId = `progress-${Date.now().toString(36)}`;
+        const targetPageId = currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const pageId = current.pages.some((page) => page.id === targetPageId) ? targetPageId : (current.pages[0]?.id ?? "page-1");
+            const progress = {
+                ...createCapturePageProgressItem(pageId, current.items.filter((item) => item.pageId === pageId).length),
+                id: progressId,
+            };
+            return { ...current, items: [...current.items, progress] };
+        });
+        setSingleSelectedItem(progressId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
+    const handleCanvasItemSelect = useCallback((item, event) => {
+        const additive = Boolean(event?.metaKey || event?.ctrlKey || event?.shiftKey);
+        if (!additive) {
+            setSingleSelectedItem(item.id);
+            setActivePanel("inspector");
+            setDetailsOpen(true);
+            return;
+        }
+        setSelectedItemIds((current) => {
+            const next = new Set(current);
+            if (next.has(item.id) && next.size > 1)
+                next.delete(item.id);
+            else
+                next.add(item.id);
+            const nextIds = formDocument.items.filter((candidate) => next.has(candidate.id)).map((candidate) => candidate.id);
+            setSelectedId(nextIds[0] ?? null);
+            if (nextIds.length > 1) {
+                setActivePanel("outline");
+                setDetailsOpen(true);
+            }
+            return new Set(nextIds);
+        });
+    }, [formDocument.items, setSingleSelectedItem]);
     const updateSelectedField = useCallback((patch) => {
         if (!selectedId)
             return;
-        setFields((current) => current.map((field) => (field.id === selectedId ? { ...field, ...patch } : field)));
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "input" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedTextBlock = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.text" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedIconBlock = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.icon" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedImageBlock = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.image" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedDivider = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.divider" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedPageHeader = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.page-header" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
+    }, [selectedId]);
+    const updateSelectedPageProgress = useCallback((patch) => {
+        if (!selectedId)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => (item.kind === "content.page-progress" && item.id === selectedId ? { ...item, ...patch } : item)),
+        }));
     }, [selectedId]);
+    const deleteSelectedItem = useCallback(() => {
+        if (!selectedItem)
+            return;
+        const pageId = selectedItem.pageId;
+        setFormDocument((current) => {
+            const remainingItems = current.items.filter((item) => item.id !== selectedItem.id);
+            const reorderedPageItems = remainingItems
+                .filter((item) => item.pageId === pageId)
+                .sort((a, b) => a.order - b.order)
+                .map((item, order) => ({ ...item, order }));
+            const reorderedIds = new Set(reorderedPageItems.map((item) => item.id));
+            return {
+                ...current,
+                items: remainingItems.map((item) => reorderedIds.has(item.id)
+                    ? reorderedPageItems.find((pageItem) => pageItem.id === item.id) ?? item
+                    : item),
+            };
+        });
+        const nextItem = formDocument.items
+            .filter((item) => item.pageId === pageId && item.id !== selectedItem.id)
+            .sort((a, b) => a.order - b.order)[0];
+        setSingleSelectedItem(nextItem?.id ?? `page:${pageId}`);
+        setActivePanel("inspector");
+    }, [formDocument.items, selectedItem, setSingleSelectedItem]);
+    const updateSelectedInputItems = useCallback((update) => {
+        if (selectedInputItems.length === 0)
+            return;
+        const inputIds = new Set(selectedInputItems.map((item) => item.id));
+        setFormDocument((current) => ({
+            ...current,
+            items: current.items.map((item) => item.kind === "input" && inputIds.has(item.id) ? update(item) : item),
+        }));
+    }, [selectedInputItems]);
+    const updateSelectedInputLayout = useCallback((patch) => {
+        updateSelectedInputItems((field) => ({
+            ...field,
+            metadata: {
+                ...(field.metadata ?? {}),
+                layout: {
+                    ...getFieldLayout(field),
+                    ...patch,
+                },
+            },
+        }));
+    }, [updateSelectedInputItems]);
+    const updateSelectedInputRequired = useCallback((required) => {
+        updateSelectedInputItems((field) => ({ ...field, required }));
+    }, [updateSelectedInputItems]);
+    const deleteSelectedItems = useCallback(() => {
+        if (selectedItems.length === 0)
+            return;
+        const idsToDelete = new Set(selectedItems.map((item) => item.id));
+        const touchedPageIds = new Set(selectedItems.map((item) => item.pageId));
+        const fallbackPageId = selectedItems[0]?.pageId ?? currentPage?.id ?? currentPageId;
+        setFormDocument((current) => {
+            const remainingItems = current.items.filter((item) => !idsToDelete.has(item.id));
+            const reorderedById = new Map();
+            for (const pageId of touchedPageIds) {
+                remainingItems
+                    .filter((item) => item.pageId === pageId)
+                    .sort((a, b) => a.order - b.order)
+                    .forEach((item, order) => reorderedById.set(item.id, { ...item, order }));
+            }
+            return {
+                ...current,
+                items: remainingItems.map((item) => reorderedById.get(item.id) ?? item),
+            };
+        });
+        const nextItem = formDocument.items
+            .filter((item) => !idsToDelete.has(item.id) && touchedPageIds.has(item.pageId))
+            .sort((a, b) => a.order - b.order)[0];
+        setSingleSelectedItem(nextItem?.id ?? `page:${fallbackPageId}`);
+        setActivePanel("inspector");
+    }, [currentPage?.id, currentPageId, formDocument.items, selectedItems, setSingleSelectedItem]);
+    useEffect(() => {
+        if (selectedItems.length === 0)
+            return;
+        const handleDeleteKey = (event) => {
+            if (event.key !== "Delete" || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey)
+                return;
+            const target = event.target instanceof HTMLElement ? event.target : null;
+            const isEditableTarget = target
+                ? target.isContentEditable
+                    || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)
+                    || target.getAttribute("role") === "textbox"
+                : false;
+            if (isEditableTarget)
+                return;
+            event.preventDefault();
+            if (selectedItems.length > 1)
+                deleteSelectedItems();
+            else
+                deleteSelectedItem();
+        };
+        window.addEventListener("keydown", handleDeleteKey);
+        return () => window.removeEventListener("keydown", handleDeleteKey);
+    }, [deleteSelectedItem, deleteSelectedItems, selectedItems]);
+    const addPage = useCallback(() => {
+        const pageId = `page-${Date.now().toString(36)}`;
+        setFormDocument((current) => {
+            const pageNumber = current.pages.length + 1;
+            const page = {
+                id: pageId,
+                title: `Page ${pageNumber}`,
+                preHeading: "Capture Form",
+                headerContentInitialized: true,
+                order: current.pages.length,
+            };
+            return {
+                ...current,
+                pages: [...current.pages, page],
+                items: [
+                    ...current.items,
+                    createCapturePageHeaderItem(pageId, 0, {
+                        preHeading: page.preHeading,
+                        title: page.title,
+                        description: page.description,
+                    }),
+                    createCapturePageProgressItem(pageId, 1),
+                ],
+            };
+        });
+        setCurrentPageId(pageId);
+        setSingleSelectedItem(null);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [setSingleSelectedItem]);
+    const selectBuilderPage = useCallback((pageId) => {
+        setCurrentPageId(pageId);
+        const firstItem = formDocument.items
+            .filter((item) => item.pageId === pageId)
+            .sort((a, b) => a.order - b.order)[0];
+        setSingleSelectedItem(firstItem?.id ?? null);
+    }, [formDocument.items, setSingleSelectedItem]);
+    const selectPageForInspection = useCallback((pageId) => {
+        setCurrentPageId(pageId);
+        setSingleSelectedItem(`page:${pageId}`);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [setSingleSelectedItem]);
+    const goToPreviousPage = useCallback(() => {
+        const previousPage = sortedPages[currentPageIndex - 1];
+        if (previousPage)
+            selectBuilderPage(previousPage.id);
+    }, [currentPageIndex, selectBuilderPage, sortedPages]);
+    const goToNextPage = useCallback(() => {
+        const nextPage = sortedPages[currentPageIndex + 1];
+        if (nextPage)
+            selectBuilderPage(nextPage.id);
+    }, [currentPageIndex, selectBuilderPage, sortedPages]);
+    const updateCurrentPage = useCallback((patch) => {
+        if (!currentPage)
+            return;
+        setFormDocument((current) => ({
+            ...current,
+            pages: current.pages.map((page) => (page.id === currentPage.id ? { ...page, ...patch } : page)),
+        }));
+    }, [currentPage]);
+    const deleteCurrentPage = useCallback(() => {
+        if (!currentPage || formDocument.pages.length <= 1)
+            return;
+        const sorted = [...formDocument.pages].sort((a, b) => a.order - b.order);
+        const currentIndex = sorted.findIndex((page) => page.id === currentPage.id);
+        const fallbackPage = sorted[currentIndex + 1] ?? sorted[currentIndex - 1] ?? sorted.find((page) => page.id !== currentPage.id);
+        setFormDocument((current) => {
+            const remainingPages = current.pages
+                .filter((page) => page.id !== currentPage.id)
+                .sort((a, b) => a.order - b.order)
+                .map((page, index) => ({ ...page, order: index }));
+            return {
+                ...current,
+                pages: remainingPages,
+                items: current.items.filter((item) => item.pageId !== currentPage.id),
+            };
+        });
+        if (fallbackPage) {
+            setCurrentPageId(fallbackPage.id);
+            setSingleSelectedItem(`page:${fallbackPage.id}`);
+        }
+        else {
+            setSingleSelectedItem(null);
+        }
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage, formDocument.pages, setSingleSelectedItem]);
+    const reorderItems = useCallback((draggedItemId, targetItemId, placement) => {
+        if (draggedItemId === targetItemId)
+            return;
+        setFormDocument((current) => {
+            const draggedItem = current.items.find((item) => item.id === draggedItemId);
+            const targetItem = current.items.find((item) => item.id === targetItemId);
+            if (!draggedItem || !targetItem || draggedItem.pageId !== targetItem.pageId)
+                return current;
+            const pageItems = current.items
+                .filter((item) => item.pageId === targetItem.pageId)
+                .sort((a, b) => a.order - b.order)
+                .filter((item) => item.id !== draggedItemId);
+            const targetIndex = pageItems.findIndex((item) => item.id === targetItemId);
+            if (targetIndex === -1)
+                return current;
+            const insertIndex = placement === "before" ? targetIndex : targetIndex + 1;
+            const reorderedPageItems = [
+                ...pageItems.slice(0, insertIndex),
+                draggedItem,
+                ...pageItems.slice(insertIndex),
+            ].map((item, order) => ({ ...item, order }));
+            const reorderedIds = new Set(reorderedPageItems.map((item) => item.id));
+            return {
+                ...current,
+                items: current.items.map((item) => reorderedIds.has(item.id)
+                    ? reorderedPageItems.find((pageItem) => pageItem.id === item.id) ?? item
+                    : item),
+            };
+        });
+    }, []);
     const handleDragStart = useCallback((event, tile) => {
         event.dataTransfer.effectAllowed = "copy";
         event.dataTransfer.setData(CAPTURE_BUILDER_DRAG_TYPE, JSON.stringify(tile));
         event.dataTransfer.setData("text/plain", tile.label);
     }, []);
+    const handleContentDragStart = useCallback((event, kind) => {
+        event.dataTransfer.effectAllowed = "copy";
+        event.dataTransfer.setData(CAPTURE_BUILDER_CONTENT_DRAG_TYPE, kind);
+        event.dataTransfer.setData("text/plain", kind === "text" ? "Text block" : kind === "icon" ? "Icon" : kind === "image" ? "Image" : kind === "divider" ? "Divider" : kind === "page-header" ? "Page header" : "Page progress");
+    }, []);
+    const insertPaletteItemAt = useCallback((event, target) => {
+        const contentKind = event.dataTransfer.getData(CAPTURE_BUILDER_CONTENT_DRAG_TYPE);
+        const raw = event.dataTransfer.getData(CAPTURE_BUILDER_DRAG_TYPE);
+        if (!contentKind && !raw)
+            return;
+        const newId = `${contentKind || "field"}-${Date.now().toString(36)}`;
+        setFormDocument((current) => {
+            const targetItem = current.items.find((item) => item.id === target.itemId);
+            const pageId = targetItem?.pageId ?? currentPage?.id ?? currentPageId;
+            if (!current.pages.some((page) => page.id === pageId))
+                return current;
+            const order = 0;
+            const page = current.pages.find((candidate) => candidate.id === pageId);
+            let newItem = null;
+            if (contentKind === "text") {
+                newItem = { id: newId, kind: "content.text", pageId, order, title: "Section intro", body: "Add helpful context before respondents answer the next question." };
+            }
+            else if (contentKind === "icon") {
+                newItem = { id: newId, kind: "content.icon", pageId, order, icon: "sparkles", iconColor: "indigo", align: "center" };
+            }
+            else if (contentKind === "image") {
+                newItem = { id: newId, kind: "content.image", pageId, order, imageUrl: "", shape: "square", align: "center", size: "medium", fit: "cover", source: { type: "upload" } };
+            }
+            else if (contentKind === "divider") {
+                newItem = { id: newId, kind: "content.divider", pageId, order };
+            }
+            else if (contentKind === "page-header") {
+                newItem = { ...createCapturePageHeaderItem(pageId, order, { preHeading: page?.preHeading, title: page?.title, description: page?.description }), id: newId };
+            }
+            else if (contentKind === "page-progress") {
+                newItem = { ...createCapturePageProgressItem(pageId, order), id: newId };
+            }
+            else if (raw) {
+                const tile = JSON.parse(raw);
+                newItem = {
+                    id: newId,
+                    key: createDefaultFieldKey(tile, current.items),
+                    label: tile.defaultField.label,
+                    type: tile.defaultField.type,
+                    required: tile.defaultField.required ?? false,
+                    ...(tile.defaultField.options ? { options: tile.defaultField.options } : {}),
+                    ...(tile.defaultField.metadata ? { metadata: tile.defaultField.metadata } : {}),
+                    kind: "input",
+                    pageId,
+                    order,
+                };
+            }
+            if (!newItem)
+                return current;
+            const pageItems = current.items.filter((item) => item.pageId === pageId).sort((a, b) => a.order - b.order);
+            const targetIndex = Math.max(0, pageItems.findIndex((item) => item.id === target.itemId));
+            const insertIndex = target.placement === "before" ? targetIndex : targetIndex + 1;
+            const reorderedPageItems = [
+                ...pageItems.slice(0, insertIndex),
+                newItem,
+                ...pageItems.slice(insertIndex),
+            ].map((item, nextOrder) => ({ ...item, order: nextOrder }));
+            const reorderedIds = new Set(reorderedPageItems.map((item) => item.id));
+            return {
+                ...current,
+                items: [
+                    ...current.items.filter((item) => item.pageId !== pageId),
+                    ...reorderedPageItems,
+                ].map((item) => reorderedIds.has(item.id) ? reorderedPageItems.find((pageItem) => pageItem.id === item.id) ?? item : item),
+            };
+        });
+        setSingleSelectedItem(newId);
+        setActivePanel("inspector");
+        setDetailsOpen(true);
+    }, [currentPage?.id, currentPageId, setSingleSelectedItem]);
     const handleDragOver = useCallback((event) => {
-        if (event.dataTransfer.types.includes(CAPTURE_BUILDER_DRAG_TYPE)) {
+        if (event.dataTransfer.types.includes(CAPTURE_BUILDER_DRAG_TYPE) || event.dataTransfer.types.includes(CAPTURE_BUILDER_CONTENT_DRAG_TYPE)) {
             event.preventDefault();
             event.dataTransfer.dropEffect = "copy";
-            setIsDragOver(true);
         }
     }, []);
     const handleDrop = useCallback((event) => {
+        const contentKind = event.dataTransfer.getData(CAPTURE_BUILDER_CONTENT_DRAG_TYPE);
+        if (contentKind === "text" || contentKind === "icon" || contentKind === "image" || contentKind === "divider" || contentKind === "page-header" || contentKind === "page-progress") {
+            event.preventDefault();
+            if (contentKind === "text")
+                insertTextBlock();
+            else if (contentKind === "icon")
+                insertIconBlock();
+            else if (contentKind === "image")
+                insertImageBlock();
+            else if (contentKind === "divider")
+                insertDivider();
+            else if (contentKind === "page-header")
+                insertPageHeader();
+            else
+                insertPageProgress();
+            return;
+        }
         const raw = event.dataTransfer.getData(CAPTURE_BUILDER_DRAG_TYPE);
         if (!raw)
             return;
         event.preventDefault();
-        setIsDragOver(false);
         const parsed = JSON.parse(raw);
         insertField(parsed);
-    }, [insertField]);
+    }, [insertDivider, insertField, insertIconBlock, insertImageBlock, insertPageHeader, insertPageProgress, insertTextBlock]);
+    const validateUniqueFieldKeys = useCallback(() => {
+        const seen = new Set();
+        for (const field of fields) {
+            const key = field.key.trim();
+            if (!key) {
+                toast.error("Field keys cannot be blank");
+                return false;
+            }
+            if (seen.has(key)) {
+                toast.error(`Field key “${key}” is already used in this form`);
+                return false;
+            }
+            seen.add(key);
+        }
+        return true;
+    }, [fields]);
+    const markFieldsSaved = useCallback(() => {
+        setSavedFieldIds(new Set(extractCaptureAnswerItems(formDocument).map((field) => field.id)));
+    }, [formDocument]);
     const saveForm = useCallback(async () => {
-        if (!id)
+        if (!id || !validateUniqueFieldKeys())
             return;
-        await updateMutation.mutateAsync({ id, name: formName, fields, actionConfig });
-    }, [actionConfig, fields, formName, id, updateMutation]);
+        await updateMutation.mutateAsync({ id, name: formName, fields, document: formDocument, actionConfig });
+        markFieldsSaved();
+    }, [actionConfig, fields, formDocument, formName, id, markFieldsSaved, updateMutation, validateUniqueFieldKeys]);
     const publishForm = useCallback(async () => {
-        if (!id)
+        if (!id || !validateUniqueFieldKeys())
             return;
-        await updateMutation.mutateAsync({ id, name: formName, fields, actionConfig });
+        await updateMutation.mutateAsync({ id, name: formName, fields, document: formDocument, actionConfig });
+        markFieldsSaved();
         await publishMutation.mutateAsync({ id });
-    }, [actionConfig, fields, formName, id, publishMutation, updateMutation]);
+    }, [actionConfig, fields, formDocument, formName, id, markFieldsSaved, publishMutation, updateMutation, validateUniqueFieldKeys]);
     const definitionSubmissions = useMemo(() => {
         const rows = (submissionsQuery.data ?? []);
         return id ? rows.filter((submission) => submission.definitionId === id) : rows;
     }, [id, submissionsQuery.data]);
+    const publicationId = definitionQuery.data?.publicationId ?? undefined;
     const publicationSlug = definitionQuery.data?.publicationSlug ?? undefined;
+    const formStatus = definitionQuery.data?.status ?? definitionsQuery.data?.find((definition) => definition.id === id)?.status ?? "draft";
     const publicPath = publicationSlug ? `/forms/${publicationSlug}` : null;
+    const publicUrl = publicPath ? buildPublicUrl(publicPath) : null;
+    const builderSubView = location.pathname.endsWith("/submissions")
+        ? "submissions"
+        : location.pathname.endsWith("/share")
+            ? "share"
+            : "build";
+    const isCreating = createMutation.isPending;
+    const itemViews = useMemo(() => (itemViewsQuery.data ?? []), [itemViewsQuery.data]);
+    const isCaptureItemsViewDirty = isWorkbenchStateDirty({
+        current: { columns: persistWorkbenchColumns(captureItemsColumns), filters: captureItemsFilters, sort: captureItemsSort },
+        saved: { columns: persistWorkbenchColumns(savedCaptureItemsColumns), filters: savedCaptureItemsFilters, sort: savedCaptureItemsSort },
+    });
+    const saveCaptureItemsView = useCallback(() => {
+        const state = {
+            filters: captureItemsFilters ?? null,
+            sorts: [captureItemsSort],
+            columns: persistWorkbenchColumns(captureItemsColumns),
+        };
+        const existing = itemViews.find((view) => view.id === activeWorkbenchViewId);
+        if (existing) {
+            updateItemViewMutation.mutate({ id: existing.id, ...state }, {
+                onSuccess: () => {
+                    setSavedCaptureItemsColumns(captureItemsColumns);
+                    setSavedCaptureItemsFilters(captureItemsFilters);
+                    setSavedCaptureItemsSort(captureItemsSort);
+                    toast.success("View saved");
+                },
+                onError: () => toast.error("Failed to save view"),
+            });
+            return;
+        }
+        const name = window.prompt("Name this view", "New Capture view")?.trim();
+        if (!name)
+            return;
+        createItemViewMutation.mutate({ name, ...state }, {
+            onSuccess: (view) => {
+                if (!view)
+                    return;
+                setActiveWorkbenchViewId(view.id);
+                setSavedCaptureItemsColumns(captureItemsColumns);
+                setSavedCaptureItemsFilters(captureItemsFilters);
+                setSavedCaptureItemsSort(captureItemsSort);
+                toast.success("View created");
+            },
+            onError: () => toast.error("Failed to create view"),
+        });
+    }, [activeWorkbenchViewId, captureItemsColumns, captureItemsFilters, captureItemsSort, createItemViewMutation, itemViews, updateItemViewMutation]);
+    const resetCaptureItemsView = useCallback(() => {
+        setCaptureItemsColumns(savedCaptureItemsColumns);
+        setCaptureItemsFilters(savedCaptureItemsFilters);
+        setCaptureItemsSort(savedCaptureItemsSort);
+    }, [savedCaptureItemsColumns, savedCaptureItemsFilters, savedCaptureItemsSort]);
+    const workbenchViews = useMemo(() => [
+        ...BUILT_IN_CAPTURE_ITEMS_WORKBENCH_VIEWS,
+        ...itemViews.map((view) => ({ id: view.id, name: view.name, icon: _jsx(ListTree, { className: "h-4 w-4" }) })),
+    ], [itemViews]);
+    const applyCaptureItemsView = useCallback((viewId) => {
+        setActiveWorkbenchViewId(viewId);
+        const view = itemViews.find((candidate) => candidate.id === viewId);
+        if (!view) {
+            setCaptureItemsFilters(undefined);
+            setSavedCaptureItemsFilters(undefined);
+            const defaultSort = { field: "updatedAt", direction: "desc" };
+            setCaptureItemsSort(defaultSort);
+            setSavedCaptureItemsSort(defaultSort);
+            const defaultColumns = adaptWorkbenchColumns({ fields: CAPTURE_ITEMS_FIELDS, persisted: DEFAULT_CAPTURE_ITEMS_COLUMNS }).configs;
+            setCaptureItemsColumns(defaultColumns);
+            setSavedCaptureItemsColumns(defaultColumns);
+            return;
+        }
+        setCaptureItemsFilters(view.filters ?? undefined);
+        setSavedCaptureItemsFilters(view.filters ?? undefined);
+        const nextSort = view.sorts?.[0] ?? { field: "updatedAt", direction: "desc" };
+        setCaptureItemsSort(nextSort);
+        setSavedCaptureItemsSort(nextSort);
+        const nextColumns = adaptWorkbenchColumns({
+            fields: CAPTURE_ITEMS_FIELDS,
+            persisted: view.columns ?? DEFAULT_CAPTURE_ITEMS_COLUMNS,
+        }).configs;
+        setCaptureItemsColumns(nextColumns);
+        setSavedCaptureItemsColumns(nextColumns);
+    }, [itemViews]);
+    const submissionViews = useMemo(() => (submissionViewsQuery.data ?? []), [submissionViewsQuery.data]);
+    const activeSubmissionSavedView = useMemo(() => submissionViews.find((view) => view.id === activeSubmissionViewId) ?? null, [activeSubmissionViewId, submissionViews]);
+    useEffect(() => {
+        const builtInView = BUILT_IN_CAPTURE_SUBMISSION_WORKBENCH_VIEWS.find((view) => view.id === activeSubmissionViewId);
+        setSubmissionViewName(activeSubmissionSavedView?.name ?? (builtInView ? `${builtInView.name} copy` : "New submission view"));
+        setSubmissionViewNameError(null);
+    }, [activeSubmissionSavedView, activeSubmissionViewId]);
+    const isSubmissionViewDirty = isWorkbenchStateDirty({
+        current: { columns: persistWorkbenchColumns(submissionColumns), filters: submissionFilters, sort: submissionSort },
+        saved: { columns: persistWorkbenchColumns(savedSubmissionColumns), filters: savedSubmissionFilters, sort: savedSubmissionSort },
+    });
+    const writeSubmissionViewToUrl = useCallback((viewId, options) => {
+        void navigate({
+            to: ".",
+            search: (previous) => ({ ...previous, view: viewId }),
+            replace: options?.replace,
+        });
+    }, [navigate]);
+    const getSubmissionViewState = useCallback(() => ({
+        filters: submissionFilters ?? null,
+        sorts: [submissionSort],
+        columns: persistWorkbenchColumns(submissionColumns),
+    }), [submissionColumns, submissionFilters, submissionSort]);
+    const markSubmissionViewSaved = useCallback(() => {
+        setSavedSubmissionColumns(submissionColumns);
+        setSavedSubmissionFilters(submissionFilters);
+        setSavedSubmissionSort(submissionSort);
+    }, [submissionColumns, submissionFilters, submissionSort]);
+    const saveSubmissionView = useCallback(() => {
+        if (!id)
+            return;
+        if (!activeSubmissionSavedView) {
+            setActiveSubmissionPanel("details");
+            setSubmissionViewNameError(null);
+            return;
+        }
+        updateSubmissionViewMutation.mutate({ id: activeSubmissionSavedView.id, ...getSubmissionViewState() }, {
+            onSuccess: () => {
+                markSubmissionViewSaved();
+                toast.success("Submission view saved");
+            },
+            onError: () => toast.error("Failed to save submission view"),
+        });
+    }, [activeSubmissionSavedView, getSubmissionViewState, id, markSubmissionViewSaved, updateSubmissionViewMutation]);
+    const saveSubmissionViewDetails = useCallback(() => {
+        if (!id)
+            return;
+        const name = submissionViewName.trim();
+        if (!name) {
+            setSubmissionViewNameError("Name is required");
+            return;
+        }
+        setSubmissionViewNameError(null);
+        const state = getSubmissionViewState();
+        if (activeSubmissionSavedView) {
+            updateSubmissionViewMutation.mutate({ id: activeSubmissionSavedView.id, name, ...state }, {
+                onSuccess: () => {
+                    markSubmissionViewSaved();
+                    toast.success("Submission view saved");
+                },
+                onError: () => toast.error("Failed to save submission view"),
+            });
+            return;
+        }
+        createSubmissionViewMutation.mutate({ definitionId: id, name, ...state }, {
+            onSuccess: (view) => {
+                if (!view)
+                    return;
+                setActiveSubmissionViewId(view.id);
+                setSubmissionViewName(view.name);
+                writeSubmissionViewToUrl(view.id);
+                markSubmissionViewSaved();
+                toast.success("Submission view created");
+            },
+            onError: () => toast.error("Failed to create submission view"),
+        });
+    }, [activeSubmissionSavedView, createSubmissionViewMutation, getSubmissionViewState, id, markSubmissionViewSaved, submissionViewName, updateSubmissionViewMutation, writeSubmissionViewToUrl]);
+    const resetSubmissionView = useCallback(() => {
+        setSubmissionColumns(savedSubmissionColumns);
+        setSubmissionFilters(savedSubmissionFilters);
+        setSubmissionSort(savedSubmissionSort);
+    }, [savedSubmissionColumns, savedSubmissionFilters, savedSubmissionSort]);
+    const submissionWorkbenchViews = useMemo(() => [
+        ...BUILT_IN_CAPTURE_SUBMISSION_WORKBENCH_VIEWS,
+        ...submissionViews.map((view) => ({ id: view.id, name: view.name, icon: _jsx(Inbox, { className: "h-4 w-4" }) })),
+    ], [submissionViews]);
+    const applySubmissionViewState = useCallback((viewId) => {
+        setActiveSubmissionViewId(viewId);
+        const view = submissionViews.find((candidate) => candidate.id === viewId);
+        if (!view) {
+            const builtInFilters = viewId === "with-actions" ? createSubmissionActionStatusFilter() : undefined;
+            setSubmissionFilters(builtInFilters);
+            setSavedSubmissionFilters(builtInFilters);
+            const defaultSort = { field: "submittedAt", direction: "desc" };
+            setSubmissionSort(defaultSort);
+            setSavedSubmissionSort(defaultSort);
+            const defaultColumns = adaptWorkbenchColumns({ fields: submissionFields, persisted: DEFAULT_CAPTURE_SUBMISSION_COLUMNS }).configs;
+            setSubmissionColumns(defaultColumns);
+            setSavedSubmissionColumns(defaultColumns);
+            return;
+        }
+        setSubmissionFilters(view.filters ?? undefined);
+        setSavedSubmissionFilters(view.filters ?? undefined);
+        const nextSort = view.sorts?.[0] ?? { field: "submittedAt", direction: "desc" };
+        setSubmissionSort(nextSort);
+        setSavedSubmissionSort(nextSort);
+        const nextColumns = adaptWorkbenchColumns({ fields: submissionFields, persisted: view.columns ?? DEFAULT_CAPTURE_SUBMISSION_COLUMNS }).configs;
+        setSubmissionColumns(nextColumns);
+        setSavedSubmissionColumns(nextColumns);
+    }, [submissionFields, submissionViews]);
+    const applySubmissionView = useCallback((viewId) => {
+        applySubmissionViewState(viewId);
+        writeSubmissionViewToUrl(viewId);
+    }, [applySubmissionViewState, writeSubmissionViewToUrl]);
+    useEffect(() => {
+        if (builderSubView !== "submissions")
+            return;
+        if (!urlSubmissionViewId) {
+            if (activeSubmissionViewId !== "all")
+                applySubmissionViewState("all");
+            writeSubmissionViewToUrl("all", { replace: true });
+            return;
+        }
+        const nextViewId = urlSubmissionViewId;
+        if (nextViewId === activeSubmissionViewId)
+            return;
+        const knownBuiltIn = BUILT_IN_CAPTURE_SUBMISSION_WORKBENCH_VIEWS.some((view) => view.id === nextViewId);
+        const knownSaved = submissionViews.some((view) => view.id === nextViewId);
+        if (!knownBuiltIn && !knownSaved) {
+            if (!urlSubmissionViewId || submissionViewsQuery.isLoading)
+                return;
+            writeSubmissionViewToUrl("all", { replace: true });
+            return;
+        }
+        if (nextViewId !== activeSubmissionViewId)
+            applySubmissionViewState(nextViewId);
+    }, [activeSubmissionViewId, applySubmissionViewState, builderSubView, submissionViews, submissionViewsQuery.isLoading, urlSubmissionViewId, writeSubmissionViewToUrl]);
+    const isSaving = updateMutation.isPending;
+    const isPublishing = publishMutation.isPending;
+    const isBuilderActionPending = isSaving || isPublishing;
     const openDefinition = useCallback((definitionId) => {
         const definition = definitionsQuery.data?.find((item) => item.id === definitionId);
         if (definition?.surface === "quiz") {
@@ -172,77 +1142,660 @@ export function CaptureBuilderPage() {
         }
         void navigate({ to: sl("/capture/forms/$id/builder"), params: { id: definitionId } });
     }, [definitionsQuery.data, navigate, sl]);
-    return (_jsxs(_Fragment, { children: [_jsx(HeaderPortal, { children: _jsx(ToolPageHeader, { title: id ? "Forms builder" : "Capture Items", description: id ? "Create a Capture-backed Form, publish it, and review submitted responses." : "Manage forms, quizzes, and other Capture-backed intake surfaces.", actions: id ? (_jsxs(_Fragment, { children: [publicPath && (_jsx(Button, { variant: "outline", size: "sm", type: "button", asChild: true, children: _jsxs("a", { href: publicPath, target: "_blank", rel: "noreferrer", children: [_jsx(Eye, { className: "h-4 w-4" }), "Public form"] }) })), _jsx(Button, { variant: "outline", size: "icon", type: "button", className: cn("h-9 w-9", detailsOpen && "bg-muted"), onClick: () => setDetailsOpen((open) => !open), "aria-label": detailsOpen ? "Hide details panel" : "Show details panel", "aria-pressed": detailsOpen, title: detailsOpen ? "Hide details panel" : "Show details panel", children: _jsx(PanelRight, { className: "h-4 w-4" }) }), _jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void saveForm(), children: [_jsx(Save, { className: "h-4 w-4" }), "Save"] }), _jsxs(Button, { size: "sm", type: "button", onClick: () => void publishForm(), children: [_jsx(Send, { className: "h-4 w-4" }), "Publish"] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative w-64", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { type: "search", placeholder: "Search capture items...", value: landingSearch, onChange: (event) => setLandingSearch(event.target.value), className: "h-9 pl-9" })] }), selectedLandingDefinition && (_jsx(Button, { variant: "outline", size: "icon", type: "button", className: "h-9 w-9 bg-muted", onClick: () => setSelectedLandingDefinition(null), "aria-label": "Hide details panel", "aria-pressed": "true", title: "Hide details panel", children: _jsx(PanelRight, { className: "h-4 w-4" }) })), _jsxs(Button, { size: "sm", type: "button", onClick: () => createMutation.mutate({ name: newFormName }), children: [_jsx(Plus, { className: "h-4 w-4" }), "New Form"] })] })) }) }), _jsx(CaptureBuilderSidebar, { definitions: definitionsQuery.data ?? [], currentId: id, fields: fields, fieldTypes: fieldTypes, publicationSlug: publicationSlug, onOpen: openDefinition, onCreate: () => createMutation.mutate({ name: newFormName }), onApplyTemplate: applyFormTemplate, onInsertField: insertField, onDragStart: handleDragStart, onSave: () => void saveForm(), onPublish: () => void publishForm() }), _jsx("main", { className: "flex h-full min-h-0 flex-1 flex-col gap-4 p-4 sm:p-6", "data-testid": "capture-builder-shell", children: !id ? (_jsx(StartPanel, { definitions: definitionsQuery.data ?? [], isLoading: definitionsQuery.isLoading, search: landingSearch, selectedDefinition: selectedLandingDefinition, activeDetailTab: activeLandingDetailTab, onSelectDefinition: (definition) => {
+    const builderSaveAction = (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void saveForm(), disabled: isBuilderActionPending, children: [_jsx(Save, { className: "h-4 w-4" }), isSaving ? "Saving…" : "Save"] }), _jsxs(Button, { size: "sm", type: "button", onClick: () => void publishForm(), disabled: isBuilderActionPending, children: [_jsx(Send, { className: "h-4 w-4" }), isPublishing ? "Publishing…" : "Publish"] })] }));
+    const copyToClipboard = useCallback(async (value, label) => {
+        if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+            toast.error("Clipboard is not available");
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(value);
+            toast.success(`${label} copied`);
+        }
+        catch {
+            toast.error(`Could not copy ${label.toLowerCase()}`);
+        }
+    }, []);
+    const publicFormAction = publicPath ? (_jsx(Button, { variant: "outline", size: "icon", type: "button", className: "h-9 w-9", asChild: true, children: _jsx("a", { href: publicPath, target: "_blank", rel: "noreferrer", "aria-label": "Preview public form", title: "Preview public form", children: _jsx(Eye, { className: "h-4 w-4" }) }) })) : (_jsx(Button, { variant: "outline", size: "icon", type: "button", className: "h-9 w-9", disabled: true, "aria-label": "Preview public form", title: "Publish this form to enable public preview", children: _jsx(Eye, { className: "h-4 w-4" }) }));
+    const builderHeaderLabel = builderSubView === "submissions" ? "Submissions" : "Share / Embed";
+    const builderHeaderDescription = builderSubView === "build"
+        ? "Build the public form canvas. Add fields from the sidebar and inspect details in the right panel."
+        : builderSubView === "submissions"
+            ? `Review public responses for ${formName || "this form"}. Detail rows open the existing Capture submission route.`
+            : "Manage public links and embed modes for this form. Publish from the header to enable public access.";
+    const goBackToCaptureItems = useCallback(() => {
+        void navigate({ to: sl("/capture/builder") });
+    }, [navigate, sl]);
+    const builderHeaderTitle = (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "-ml-1 h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground", onClick: goBackToCaptureItems, "aria-label": "Back to Capture Items", title: "Back to Capture Items", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [builderSubView === "build" ? (_jsx(InlineEditableText, { value: formName, onCommit: setFormName, ariaLabel: "Form name", variant: "headerTitle", placeholder: "Untitled form", required: true })) : (_jsx("h1", { className: "text-lg font-bold text-foreground", children: builderHeaderLabel })), _jsx(CaptureStatusBadge, { status: formStatus })] }), _jsx("p", { className: "mt-0.5 truncate text-sm text-muted-foreground", children: builderHeaderDescription })] })] }));
+    const previewDeviceControl = (_jsxs("div", { className: "flex rounded-lg border border-border bg-muted/40 p-0.5", "aria-label": "Preview device width", children: [_jsx(Button, { type: "button", variant: previewDevice === "desktop" ? "secondary" : "ghost", size: "icon", className: "h-8 w-9", onClick: () => setPreviewDevice("desktop"), "aria-label": "Desktop preview", title: "Desktop preview", children: _jsx(Monitor, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { type: "button", variant: previewDevice === "mobile" ? "secondary" : "ghost", size: "icon", className: "h-8 w-9", onClick: () => setPreviewDevice("mobile"), "aria-label": "Mobile preview", title: "Mobile preview", children: _jsx(Smartphone, { className: "h-3.5 w-3.5" }) })] }));
+    const builderHeaderActions = builderSubView === "build" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground", children: [currentPageItems.length, " item", currentPageItems.length === 1 ? "" : "s", " on this page"] }), previewDeviceControl, publicFormAction, _jsx(Button, { variant: "outline", size: "icon", type: "button", className: cn("h-9 w-9", detailsOpen && "bg-muted"), onClick: () => setDetailsOpen((open) => !open), "aria-label": detailsOpen ? "Hide details panel" : "Show details panel", "aria-pressed": detailsOpen, title: detailsOpen ? "Hide details panel" : "Show details panel", children: _jsx(PanelRight, { className: "h-4 w-4" }) }), builderSaveAction] })) : builderSubView === "submissions" ? (_jsxs(_Fragment, { children: [!submissionsQuery.isLoading && !submissionsQuery.isError && (_jsxs("span", { className: "rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground", children: [definitionSubmissions.length, " response", definitionSubmissions.length === 1 ? "" : "s"] })), _jsx(WorkbenchSaveResetControls, { isDirty: isSubmissionViewDirty, isSaving: createSubmissionViewMutation.isPending || updateSubmissionViewMutation.isPending, onSave: saveSubmissionView, onReset: resetSubmissionView }), _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", title: "Filters", "aria-label": "Filters", onClick: () => setActiveSubmissionPanel("filters"), children: _jsx(Filter, { className: "h-4 w-4" }) }), publicFormAction] })) : (_jsxs(_Fragment, { children: [publicUrl && (_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void copyToClipboard(publicUrl, "Public link"), children: [_jsx(Copy, { className: "h-4 w-4" }), "Copy link"] })), publicFormAction, builderSaveAction] }));
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderPortal, { children: _jsx(ToolPageHeader, { title: id ? builderHeaderTitle : "Capture Items", description: id ? undefined : "Manage forms, quizzes, and other Capture-backed intake surfaces.", actions: id ? builderHeaderActions : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative w-64", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { type: "search", placeholder: "Search capture items...", value: landingSearch, onChange: (event) => setLandingSearch(event.target.value), className: "h-9 pl-9" })] }), _jsx(WorkbenchSaveResetControls, { isDirty: isCaptureItemsViewDirty, onSave: saveCaptureItemsView, onReset: resetCaptureItemsView }), _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", title: "Filters", "aria-label": "Filters", onClick: () => setActiveWorkbenchPanel("filters"), children: _jsx(Filter, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", title: "Columns", "aria-label": "Columns", onClick: () => setActiveWorkbenchPanel("columns"), children: _jsx(Columns3, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", title: "Save as named view", "aria-label": "Save as named view", onClick: saveCaptureItemsView, children: _jsx(Settings2, { className: "h-4 w-4" }) }), selectedLandingDefinition && (_jsx(Button, { variant: "outline", size: "icon", type: "button", className: "h-9 w-9 bg-muted", onClick: () => setSelectedLandingDefinition(null), "aria-label": "Hide details panel", "aria-pressed": "true", title: "Hide details panel", children: _jsx(PanelRight, { className: "h-4 w-4" }) })), _jsxs(Button, { size: "sm", type: "button", onClick: () => createMutation.mutate({ name: newFormName }), disabled: isCreating, children: [_jsx(Plus, { className: "h-4 w-4" }), isCreating ? "Creating…" : "New Form"] })] })) }) }), _jsx(CaptureSidebar, { currentId: id, fieldTypes: fieldTypes, builderSubView: builderSubView, workbenchViews: workbenchViews, activeWorkbenchViewId: activeWorkbenchViewId, onWorkbenchViewSelect: applyCaptureItemsView, submissionWorkbenchViews: submissionWorkbenchViews, activeSubmissionViewId: activeSubmissionViewId, onSubmissionViewSelect: applySubmissionView, onInsertField: insertField, onInsertTextBlock: insertTextBlock, onInsertIconBlock: insertIconBlock, onInsertImageBlock: insertImageBlock, onInsertDivider: insertDivider, onInsertPageHeader: insertPageHeader, onInsertPageProgress: insertPageProgress, onDragStart: handleDragStart, onContentDragStart: handleContentDragStart }), _jsx("main", { className: cn("flex h-full min-h-0 flex-1 flex-col gap-4 p-4 sm:p-6", builderSubView === "build" && id && "bg-muted/40"), "data-testid": "capture-builder-shell", children: !id ? (_jsx(StartPanel, { definitions: definitionsQuery.data ?? [], isLoading: definitionsQuery.isLoading, isError: definitionsQuery.isError, onRetryDefinitions: () => void definitionsQuery.refetch(), search: landingSearch, selectedDefinition: selectedLandingDefinition, activeDetailTab: activeLandingDetailTab, activeWorkbenchViewId: activeWorkbenchViewId, activeWorkbenchPanel: activeWorkbenchPanel, onActiveWorkbenchPanelChange: setActiveWorkbenchPanel, filters: captureItemsFilters, onFiltersChange: setCaptureItemsFilters, columns: captureItemsColumns, onColumnsChange: setCaptureItemsColumns, sort: captureItemsSort, onSortChange: setCaptureItemsSort, onSelectDefinition: (definition) => {
                         setSelectedLandingDefinition(definition);
                         setActiveLandingDetailTab("overview");
-                    }, onCloseDetails: () => setSelectedLandingDefinition(null), onDetailTabChange: setActiveLandingDetailTab, onCreate: () => createMutation.mutate({ name: newFormName }), onOpen: openDefinition })) : (_jsxs(_Fragment, { children: [_jsx("section", { className: "rounded-2xl border border-border bg-card p-4 shadow-sm", children: _jsxs("div", { className: "max-w-xl", children: [_jsx(Label, { htmlFor: "capture-form-name", children: "Form name" }), _jsx(Input, { id: "capture-form-name", className: "mt-1", value: formName, onChange: (event) => setFormName(event.target.value) })] }) }), _jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [_jsxs("section", { className: "flex min-h-0 min-w-0 flex-1 flex-col rounded-2xl border border-border bg-card shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPanelTop, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Vertical form canvas" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Fields render in respondent order. Add fields from the sidebar; tune details in the right panel." })] })] }), _jsxs("span", { className: "rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground", children: [fields.length, " field", fields.length === 1 ? "" : "s"] })] }), _jsx("div", { className: cn("m-4 flex min-h-[560px] flex-1 flex-col gap-3 rounded-2xl border border-dashed border-border bg-muted/25 p-4 transition", isDragOver && "border-primary bg-primary/5 ring-2 ring-primary/20"), onDragEnter: handleDragOver, onDragOver: handleDragOver, onDragLeave: () => setIsDragOver(false), onDrop: handleDrop, "data-testid": "capture-builder-canvas", children: fields.length === 0 ? (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border bg-background/80 p-8 text-center", children: [_jsx(Plus, { className: "mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Add the first form field" }), _jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: "Use the sidebar palette to add Capture-owned or contributed fields to the public form body." })] })) : (fields.map((field, index) => (_jsxs("button", { type: "button", onClick: () => { setSelectedId(field.id); setActivePanel("inspector"); setDetailsOpen(true); }, className: cn("flex items-start gap-3 rounded-xl border bg-background p-4 text-left shadow-sm transition", selectedId === field.id
-                                                    ? "border-primary ring-2 ring-primary/20"
-                                                    : "border-border hover:border-primary/50"), children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground", children: index + 1 }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [field.label, _jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary", children: getCaptureFieldType(field.type, fieldTypes).label }), field.required && _jsx("span", { className: "text-xs text-destructive", children: "Required" }), field.visibleWhen && _jsx("span", { className: "text-xs text-muted-foreground", children: "Conditional" })] }), _jsxs("span", { className: "mt-1 block text-sm text-muted-foreground", children: ["Key: ", field.key] })] })] }, field.id)))) })] }), _jsx(TabbedPanel, { open: detailsOpen, onClose: () => setDetailsOpen(false), tabs: FORM_PANEL_TABS, activeTab: activePanel, onTabChange: setActivePanel, width: "380px", inline: true, flush: true, className: "self-stretch rounded-2xl border shadow-sm", header: _jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: FORM_PANEL_TABS.find((tab) => tab.id === activePanel)?.label }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Builder context and selected-field controls." })] }), children: _jsx(FormDetailsPanel, { activePanel: activePanel, fields: fields, fieldTypes: fieldTypes, selectedField: selectedField, selectedId: selectedId, setSelectedId: (fieldId) => { setSelectedId(fieldId); setActivePanel("inspector"); }, updateSelectedField: updateSelectedField, submissions: definitionSubmissions, actionConfig: actionConfig, workflows: workflowsQuery.data ?? [], setActionConfig: setActionConfig }) })] })] })) })] }));
+                    }, onCloseDetails: () => setSelectedLandingDefinition(null), onDetailTabChange: setActiveLandingDetailTab, onCreate: () => createMutation.mutate({ name: newFormName }), isCreating: isCreating, onOpen: openDefinition, onTagsChange: (definitionId, tags) => updateTagsMutation.mutate({ id: definitionId, tags }), workflows: workflowsQuery.data ?? [], workflowsLoading: workflowsQuery.isLoading, workflowsError: workflowsQuery.isError, onRetryWorkflows: () => void workflowsQuery.refetch(), contactCustomFields: (contactCustomFieldsQuery.data ?? []), contactCustomFieldsLoading: contactCustomFieldsQuery.isLoading, contactCustomFieldsError: contactCustomFieldsQuery.isError, onRetryContactCustomFields: () => void contactCustomFieldsQuery.refetch(), onActionConfigChange: (definitionId, actionConfig) => updateActionConfigMutation.mutate({ id: definitionId, actionConfig }), isActionConfigSaving: updateActionConfigMutation.isPending })) : definitionQuery.isLoading ? (_jsx(BuilderWorkspaceSkeleton, {})) : definitionQuery.isError || !definitionQuery.data ? (_jsx(QueryErrorState, { title: "Could not load this form", description: "The form may have moved, been deleted, or failed to load. Try again or return to Capture Items.", onRetry: () => void definitionQuery.refetch() })) : (_jsx(_Fragment, { children: builderSubView === "build" ? (_jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [_jsx("section", { className: "min-h-0 min-w-0 flex-1 overflow-auto p-4", children: _jsxs("div", { className: "flex min-h-[560px] items-center justify-center gap-3", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-9 w-9 shrink-0 rounded-full bg-background/90 shadow-sm", onClick: goToPreviousPage, disabled: currentPageIndex === 0, "aria-label": "Previous page", title: "Previous page", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("div", { className: cn("flex min-h-[560px] flex-1 flex-col rounded-[2rem] border border-border bg-card p-4 shadow-sm transition", previewDevice === "mobile" ? "max-w-sm" : "max-w-3xl"), onDragEnter: currentPageItems.length === 0 ? handleDragOver : undefined, onDragOver: currentPageItems.length === 0 ? handleDragOver : undefined, onDrop: currentPageItems.length === 0 ? handleDrop : undefined, "data-testid": "capture-builder-canvas", children: _jsx(CaptureFormSurface, { title: formName || "Untitled form", pages: sortedPages, items: formDocument.items, currentPageId: currentPage?.id ?? currentPageId, fieldTypes: fieldTypes, mode: "builder", selectedItemId: selectedId, selectedItemIds: selectedItemIds, className: "flex min-h-full flex-1 flex-col gap-4 space-y-0", onSelectItem: handleCanvasItemSelect, onReorderItem: reorderItems, paletteDragTypes: [CAPTURE_BUILDER_DRAG_TYPE, CAPTURE_BUILDER_CONTENT_DRAG_TYPE], onPaletteDrop: insertPaletteItemAt, emptyContent: (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/25 p-8 text-center", children: [_jsx(Plus, { className: "mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Add the first item to this page" }), _jsxs("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: ["Use the sidebar palette to add fields or explainer text to ", currentPage?.title ?? "the selected page", "."] })] })), footer: sortedPages.length > 1 ? (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs(Button, { type: "button", variant: "outline", className: "h-11 rounded-xl sm:w-auto", disabled: currentPageIndex === 0, onClick: goToPreviousPage, children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back"] }), _jsxs(Button, { type: "button", className: "h-11 rounded-xl sm:w-auto", disabled: currentPageIndex >= sortedPages.length - 1, onClick: goToNextPage, children: ["Next", _jsx(ArrowRight, { className: "h-4 w-4" })] })] })) : null }) }), _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-9 w-9 shrink-0 rounded-full bg-background/90 shadow-sm", onClick: currentPageIndex >= sortedPages.length - 1 ? addPage : goToNextPage, "aria-label": currentPageIndex >= sortedPages.length - 1 ? "Add page" : "Next page", title: currentPageIndex >= sortedPages.length - 1 ? "Add page" : "Next page", children: currentPageIndex >= sortedPages.length - 1 ? _jsx(Plus, { className: "h-4 w-4" }) : _jsx(ChevronRight, { className: "h-4 w-4" }) })] }) }), _jsx(TabbedPanel, { open: detailsOpen, onClose: () => setDetailsOpen(false), tabs: formPanelTabs, activeTab: activePanel, onTabChange: setActivePanel, width: "380px", inline: true, flush: true, className: "self-stretch rounded-2xl border shadow-sm", header: _jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: detailsPanelTitle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: activePanel === "validation"
+                                                ? "When the validation expression matches, respondents are blocked and see the failure message."
+                                                : "Builder context and selected-field controls." })] }), footer: selectedItemDeleteLabel ? (_jsx("div", { className: "border-t border-border p-3", children: _jsx(DeleteSelectedItemButton, { onDelete: deleteSelectedItem, label: selectedItemDeleteLabel }) })) : null, children: _jsx(FormDetailsPanel, { activePanel: activePanel, pages: sortedPages, items: formDocument.items, currentPage: currentPage, selectedPage: selectedPage, fieldTypes: fieldTypes, selectedField: selectedField, selectedTextBlock: selectedTextBlock, selectedIconBlock: selectedIconBlock, selectedImageBlock: selectedImageBlock, selectedDivider: selectedDivider, selectedPageHeader: selectedPageHeader, selectedPageProgress: selectedPageProgress, selectedId: selectedId, selectedItemIds: selectedItemIds, savedFieldIds: savedFieldIds, selectedFieldKeyDuplicate: selectedFieldKeyDuplicate, onSelectItem: handleCanvasItemSelect, onOpenInspector: (itemId) => { setSingleSelectedItem(itemId); setActivePanel("inspector"); setDetailsOpen(true); }, onSelectPage: selectPageForInspection, updateSelectedField: updateSelectedField, updateSelectedTextBlock: updateSelectedTextBlock, updateSelectedIconBlock: updateSelectedIconBlock, updateSelectedImageBlock: updateSelectedImageBlock, updateSelectedDivider: updateSelectedDivider, updateSelectedPageHeader: updateSelectedPageHeader, updateSelectedPageProgress: updateSelectedPageProgress, updateCurrentPage: updateCurrentPage, deleteCurrentPage: deleteCurrentPage }) })] })) : builderSubView === "submissions" ? (_jsx(BuilderSubmissionsView, { submissions: definitionSubmissions, fields: submissionFields, columns: submissionColumns, filters: submissionFilters, sort: submissionSort, onFiltersChange: setSubmissionFilters, onSortChange: setSubmissionSort, onOpenColumns: () => setActiveSubmissionPanel("columns"), isLoading: submissionsQuery.isLoading, isError: submissionsQuery.isError, onRetry: () => void submissionsQuery.refetch() })) : (_jsx(BuilderShareView, { publicationId: publicationId, publicationSlug: publicationSlug, onCopy: copyToClipboard })) })) }), _jsx(TabbedPanel, { open: builderSubView === "submissions" && activeSubmissionPanel != null, onClose: () => setActiveSubmissionPanel(null), tabs: [
+                    { id: "details", icon: Settings2, label: "View details" },
+                    { id: "filters", icon: Filter, label: "Filters" },
+                    { id: "columns", icon: Columns3, label: "Columns" },
+                ], activeTab: activeSubmissionPanel ?? "filters", onTabChange: (tabId) => setActiveSubmissionPanel(tabId), width: "420px", header: (_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Submission view" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Name, save, and adjust this form\u2019s submission view." })] })), footer: activeSubmissionPanel === "details" ? (_jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border px-4 py-3", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setActiveSubmissionPanel(null), disabled: createSubmissionViewMutation.isPending || updateSubmissionViewMutation.isPending, children: "Cancel" }), _jsxs(Button, { type: "button", onClick: saveSubmissionViewDetails, disabled: createSubmissionViewMutation.isPending || updateSubmissionViewMutation.isPending, children: [_jsx(Save, { className: "h-4 w-4" }), createSubmissionViewMutation.isPending || updateSubmissionViewMutation.isPending ? "Saving…" : activeSubmissionSavedView ? "Save view" : "Create view"] })] })) : undefined, children: activeSubmissionPanel === "details" ? (_jsx(SubmissionViewDetailsPanel, { name: submissionViewName, error: submissionViewNameError, isExisting: Boolean(activeSubmissionSavedView), isDirty: isSubmissionViewDirty, onNameChange: (name) => { setSubmissionViewName(name); setSubmissionViewNameError(null); } })) : activeSubmissionPanel === "columns" ? (_jsx(WorkbenchColumnPanel, { columns: submissionColumns, onColumnsChange: setSubmissionColumns })) : (_jsx(WorkbenchFilterPanel, { filters: submissionFilters, onFiltersChange: setSubmissionFilters, fields: fieldsToFilterFields(submissionFields), operatorsByFieldType: CAPTURE_SUBMISSION_FILTER_OPERATORS, resultCount: filterSubmissions(definitionSubmissions, submissionFilters).length })) }), builderSubView === "build" && selectedItems.length > 1 && (_jsx(CaptureBuilderBulkActionBar, { selectedCount: selectedItems.length, selectedFields: selectedInputItems, onDeselectAll: () => setSingleSelectedItem(null), onSetLabelVisible: (labelVisible) => updateSelectedInputLayout({ labelVisible }), onSetWidth: (width) => updateSelectedInputLayout({ width }), onSetWrapAfter: (wrapAfter) => updateSelectedInputLayout({ wrapAfter }), onSetRequired: updateSelectedInputRequired, onDelete: deleteSelectedItems }))] }));
 }
-function CaptureBuilderSidebar({ definitions, currentId, fields, fieldTypes, publicationSlug, onOpen, onCreate, onApplyTemplate, onInsertField, onDragStart, onSave, onPublish, }) {
-    const navigate = useNavigate();
-    const sl = useScopeLink();
-    const currentDefinition = definitions.find((definition) => definition.id === currentId);
-    const itemClass = (active) => `w-full flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${active
-        ? "bg-muted text-foreground font-medium"
-        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"}`;
-    return (_jsx(SidebarPortal, { children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [_jsxs("div", { children: [_jsx("div", { className: "px-3 mb-1", children: _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Navigate" }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsxs("button", { type: "button", className: itemClass(true), onClick: () => currentId ? onOpen(currentId) : undefined, children: [_jsx(FileText, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left", children: "Forms" })] }), _jsxs("button", { type: "button", className: itemClass(false), onClick: () => void navigate({ to: sl("/capture/quizzes/builder") }), children: [_jsx(Sparkles, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left", children: "Quizzes" })] }), _jsxs("button", { type: "button", className: itemClass(false), onClick: () => void navigate({ to: sl("/capture/submissions") }), children: [_jsx(Inbox, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left", children: "Submissions" })] })] })] }), _jsx("div", { className: "my-3 border-t border-border" }), currentId && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 mb-1", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Current Form" }), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: fields.length })] }), _jsxs("div", { className: "rounded-lg bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: [_jsx("p", { className: "font-medium text-foreground", children: currentDefinition?.name ?? "Untitled form" }), _jsxs("p", { className: "mt-1", children: [currentDefinition?.status ?? "draft", publicationSlug ? ` · /forms/${publicationSlug}` : ""] })] })] })), definitions.length > 0 && (_jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex items-center justify-between px-3 mb-1", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Capture Items" }), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: definitions.length })] }), _jsx("div", { className: "space-y-0.5", children: definitions.map((definition) => (_jsxs("button", { type: "button", className: itemClass(definition.id === currentId), onClick: () => onOpen(definition.id), children: [definition.surface === "quiz" ? _jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0" }) : _jsx(FileText, { className: "h-3.5 w-3.5 shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx("span", { className: "block truncate", children: definition.name }), _jsx("span", { className: "block text-[11px] capitalize text-muted-foreground", children: definition.surface })] })] }, definition.id))) })] })), currentId && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-4", children: [_jsx("div", { className: "px-3 mb-1", children: _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Templates" }) }), _jsx("div", { className: "space-y-1", children: CAPTURE_FORM_TEMPLATES.map((template) => (_jsxs("button", { type: "button", onClick: () => onApplyTemplate(template.id), className: "w-full rounded-lg px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground", children: [_jsx("span", { className: "block font-medium", children: template.label }), _jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: template.description })] }, template.id))) })] }), _jsxs("div", { className: "mt-4", children: [_jsx("div", { className: "px-3 mb-1", children: _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Palette" }) }), _jsx("div", { className: "space-y-1", children: fieldTypes.map((tile) => {
-                                                const Icon = FIELD_ICON_MAP[tile.icon] ?? Type;
-                                                return (_jsxs("button", { type: "button", draggable: true, onClick: () => onInsertField(tile), onDragStart: (event) => onDragStart(event, tile), className: "group flex w-full items-start gap-2 rounded-lg px-3 py-2 text-left text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground", children: [_jsx(Icon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-sm font-medium", children: tile.label }), _jsx("span", { className: "block text-xs text-muted-foreground", children: tile.description })] }), _jsx(GripVertical, { className: "mt-0.5 h-3.5 w-3.5 opacity-40 transition group-hover:opacity-80" })] }, tile.id));
-                                            }) })] })] }))] }), _jsxs("div", { className: "space-y-1.5 border-t border-border px-3 py-3", children: [currentId && (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "w-full justify-center", onClick: onSave, children: [_jsx(Save, { className: "h-4 w-4" }), "Save"] }), _jsxs(Button, { type: "button", size: "sm", className: "w-full justify-center", onClick: onPublish, children: [_jsx(Send, { className: "h-4 w-4" }), "Publish"] })] })), _jsxs(Button, { type: "button", variant: currentId ? "ghost" : "default", size: "sm", className: "w-full justify-center", onClick: onCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), "New form"] })] })] }) }));
-}
-function FormDetailsPanel({ activePanel, fields, fieldTypes, selectedField, selectedId, setSelectedId, updateSelectedField, submissions, actionConfig, workflows, setActionConfig, }) {
+function CaptureBuilderBulkActionBar({ selectedCount, selectedFields, onDeselectAll, onSetLabelVisible, onSetWidth, onSetWrapAfter, onSetRequired, onDelete, }) {
+    const fieldLayouts = selectedFields.map(getFieldLayout);
+    const allLabelsVisible = selectedFields.length > 0 && fieldLayouts.every((layout) => layout.labelVisible);
+    const allWrapAfter = selectedFields.length > 0 && fieldLayouts.every((layout) => layout.wrapAfter);
+    const allRequired = selectedFields.length > 0 && selectedFields.every((field) => field.required);
+    return (_jsxs(BulkActionBar, { selectedCount: selectedCount, onDeselectAll: onDeselectAll, children: [selectedFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(BulkActionButton, { onClick: () => onSetLabelVisible(!allLabelsVisible), children: allLabelsVisible ? "Hide labels" : "Show labels" }), _jsx("div", { className: "flex items-center gap-1 rounded-lg bg-zinc-950/40 p-1 dark:bg-zinc-900/50", "aria-label": "Set field width", children: [
+                            ["1/3", "⅓"],
+                            ["1/2", "½"],
+                            ["full", "Full"],
+                        ].map(([width, label]) => (_jsx(BulkActionButton, { className: "px-2 py-1", onClick: () => onSetWidth(width), children: label }, width))) }), _jsx(BulkActionButton, { onClick: () => onSetWrapAfter(!allWrapAfter), children: allWrapAfter ? "Unwrap" : "Wrap" }), _jsx(BulkActionButton, { onClick: () => onSetRequired(!allRequired), children: allRequired ? "Optional" : "Required" })] })), _jsx(BulkActionButton, { variant: "destructive", onClick: onDelete, "aria-label": "Delete selected", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }));
+}
+function FormDetailsPanel({ activePanel, pages, items, selectedPage, fieldTypes, selectedField, selectedTextBlock, selectedIconBlock, selectedImageBlock, selectedDivider, selectedPageHeader, selectedPageProgress, selectedId, selectedItemIds, savedFieldIds, selectedFieldKeyDuplicate, onSelectItem, onOpenInspector, onSelectPage, updateSelectedField, updateSelectedTextBlock, updateSelectedIconBlock, updateSelectedImageBlock, updateSelectedDivider, updateSelectedPageHeader, updateSelectedPageProgress, updateCurrentPage, deleteCurrentPage, }) {
+    const [confirmDeletePageOpen, setConfirmDeletePageOpen] = useState(false);
+    const selectedVisibilityTarget = selectedPage ?? selectedField ?? selectedTextBlock ?? selectedIconBlock ?? selectedImageBlock ?? selectedDivider ?? selectedPageHeader ?? selectedPageProgress;
+    const updateStaticVisibility = (hidden) => {
+        const patch = { hidden: hidden || undefined, ...(hidden ? { visibleWhen: undefined } : {}) };
+        if (selectedPage)
+            updateCurrentPage(patch);
+        else if (selectedField)
+            updateSelectedField(patch);
+        else if (selectedTextBlock)
+            updateSelectedTextBlock(patch);
+        else if (selectedIconBlock)
+            updateSelectedIconBlock(patch);
+        else if (selectedImageBlock)
+            updateSelectedImageBlock(patch);
+        else if (selectedDivider)
+            updateSelectedDivider(patch);
+        else if (selectedPageHeader)
+            updateSelectedPageHeader(patch);
+        else if (selectedPageProgress)
+            updateSelectedPageProgress(patch);
+    };
+    const staticVisibilityControl = selectedVisibilityTarget ? (_jsx(StaticVisibilityControl, { hidden: Boolean(selectedVisibilityTarget.hidden), onHiddenChange: updateStaticVisibility })) : null;
     if (activePanel === "outline") {
-        return (_jsx("div", { className: "p-3", children: fields.length === 0 ? _jsx(EmptyPanelText, { children: "No form fields yet." }) : (_jsx("div", { className: "space-y-1", children: fields.map((field, index) => (_jsxs("button", { type: "button", onClick: () => setSelectedId(field.id), className: cn("flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition", selectedId === field.id
-                        ? "bg-muted text-foreground"
-                        : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"), children: [_jsx("span", { className: "text-xs font-semibold tabular-nums", children: index + 1 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: field.label }), _jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: getCaptureFieldType(field.type, fieldTypes).label })] }, field.id))) })) }));
+        return (_jsx("div", { className: "p-3", children: pages.length === 0 ? _jsx(EmptyPanelText, { children: "No pages yet." }) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Pages" }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [items.length, " total item", items.length === 1 ? "" : "s"] })] }), _jsx("div", { className: "space-y-3", children: pages.map((page, pageIndex) => {
+                            const pageItems = items
+                                .filter((item) => item.pageId === page.id)
+                                .sort((a, b) => a.order - b.order);
+                            const pageSelected = selectedId === `page:${page.id}`;
+                            return (_jsxs("section", { children: [_jsxs("button", { type: "button", onClick: () => onSelectPage(page.id), className: cn("group flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition", pageSelected
+                                            ? "bg-primary/10 text-foreground"
+                                            : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: page.title || `Page ${pageIndex + 1}` }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [pageItems.length, " item", pageItems.length === 1 ? "" : "s"] })] }), pageItems.length > 0 ? (_jsx("div", { className: "mt-1 space-y-0.5 pl-3", children: pageItems.map((item) => (_jsxs("button", { type: "button", onClick: (event) => onSelectItem(item, event), onDoubleClick: () => onOpenInspector(item.id), className: cn("group/item flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition", selectedItemIds.has(item.id)
+                                                ? "bg-muted text-foreground"
+                                                : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"), children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40 group-hover/item:bg-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.kind === "content.text" ? (item.title || "Explainer text") : item.kind === "content.icon" ? "Icon" : item.kind === "content.image" ? "Image" : item.kind === "content.divider" ? "Divider" : item.kind === "content.page-header" ? "Page header" : item.kind === "content.page-progress" ? "Page progress" : item.kind === "input" ? item.label : "Content" }), _jsx("span", { className: "text-[10px] text-muted-foreground group-hover/item:text-foreground", children: item.kind === "content.text" ? "Text" : item.kind === "content.icon" ? "Icon" : item.kind === "content.image" ? "Image" : item.kind === "content.divider" ? "Divider" : item.kind === "content.page-header" ? "Header" : item.kind === "content.page-progress" ? "Progress" : item.kind === "input" ? getCaptureFieldType(item.type, fieldTypes).label : "Content" })] }, item.id))) })) : (_jsx("p", { className: "px-2 py-1 pl-5 text-xs text-muted-foreground", children: "No items yet." }))] }, page.id));
+                        }) })] })) }));
     }
     if (activePanel === "inspector") {
-        return (_jsx("div", { className: "p-3", children: selectedField ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "field-label", children: "Label" }), _jsx(Input, { id: "field-label", value: selectedField.label, onChange: (event) => updateSelectedField({ label: event.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "field-key", children: "Key" }), _jsx(Input, { id: "field-key", value: selectedField.key, onChange: (event) => updateSelectedField({ key: event.target.value }) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border p-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Required respondent answer" }), _jsx(Switch, { checked: selectedField.required, onCheckedChange: (checked) => updateSelectedField({ required: checked }) })] }), _jsxs("div", { className: "space-y-2 rounded-lg border border-border p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Show condition" }), _jsx(Switch, { checked: Boolean(selectedField.visibleWhen), onCheckedChange: (checked) => {
-                                            const source = fields.find((field) => field.id !== selectedField.id);
-                                            updateSelectedField({
-                                                visibleWhen: checked && source
-                                                    ? { fieldId: source.id, fieldKey: source.key, operator: "equals", value: "" }
-                                                    : undefined,
-                                            });
-                                        }, disabled: fields.every((field) => field.id === selectedField.id) })] }), selectedField.visibleWhen && (_jsxs("div", { className: "space-y-2", children: [_jsx("select", { className: "h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", value: selectedField.visibleWhen.fieldId, onChange: (event) => {
-                                            const source = fields.find((field) => field.id === event.target.value);
-                                            if (!source)
-                                                return;
-                                            updateSelectedField({ visibleWhen: { ...selectedField.visibleWhen, fieldId: source.id, fieldKey: source.key } });
-                                        }, children: fields.filter((field) => field.id !== selectedField.id).map((field) => (_jsxs("option", { value: field.id, children: [field.label, " (", field.key, ")"] }, field.id))) }), _jsx(Input, { placeholder: "Show when answer equals\u2026", value: String(selectedField.visibleWhen.value ?? ""), onChange: (event) => updateSelectedField({ visibleWhen: { ...selectedField.visibleWhen, value: event.target.value } }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Uses stable field ID plus key so future renames keep a fallback." })] }))] }), selectedField.type === "select" && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "field-options", children: "Options, one per line" }), _jsx(Textarea, { id: "field-options", value: (selectedField.options ?? []).join("\n"), onChange: (event) => updateSelectedField({
+        return (_jsx("div", { className: "h-full p-3", children: selectedPage ? (_jsxs("div", { className: "flex h-full flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Page details" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "This label identifies the page in the builder, progress indicators, and conditional visibility groups. Header copy lives on Page header content blocks." })] }), staticVisibilityControl, _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "page-title", children: "Page label" }), _jsx(Input, { id: "page-title", value: selectedPage.title, placeholder: "Page label", onChange: (event) => updateCurrentPage({ title: event.target.value || "Untitled page" }) })] }), _jsx("div", { className: "mt-auto rounded-lg border border-destructive/20 bg-destructive/5 p-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Delete page" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Removes this page and all items on it." })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "shrink-0 border-destructive/30 text-destructive hover:bg-destructive/10", disabled: pages.length <= 1, onClick: () => setConfirmDeletePageOpen(true), children: [_jsx(Trash2, { className: "mr-1.5 h-3.5 w-3.5" }), "Delete"] })] }) }), _jsx(AlertDialog, { open: confirmDeletePageOpen, onOpenChange: setConfirmDeletePageOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { children: ["Delete \u201C", selectedPage.title || "Untitled page", "\u201D?"] }), _jsxs(AlertDialogDescription, { children: ["This will permanently remove the page and ", items.filter((item) => item.pageId === selectedPage.id).length, " item", items.filter((item) => item.pageId === selectedPage.id).length === 1 ? "" : "s", " on it. This cannot be undone after you save the form."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", onClick: () => {
+                                                deleteCurrentPage();
+                                                setConfirmDeletePageOpen(false);
+                                            }, children: "Delete page" })] })] }) })] })) : selectedTextBlock ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-lg border border-primary/20 bg-primary/5 p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-primary", children: [_jsx(FileText, { className: "h-3.5 w-3.5" }), " Explainer text"] }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Content blocks render in the form body but are ignored by answer validation and actions." })] }), staticVisibilityControl, _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "text-block-title", children: "Title" }), _jsx(Input, { id: "text-block-title", value: selectedTextBlock.title ?? "", placeholder: "Optional heading", onChange: (event) => updateSelectedTextBlock({ title: event.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "text-block-body", children: "Body" }), _jsx(Textarea, { id: "text-block-body", value: selectedTextBlock.body, placeholder: "Add explanatory copy for respondents.", rows: 6, onChange: (event) => updateSelectedTextBlock({ body: event.target.value }) })] })] })) : selectedField ? (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "field-label", children: "Label" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: "Show" }), _jsx(Switch, { checked: getFieldLayout(selectedField).labelVisible, onCheckedChange: (checked) => updateSelectedField({
+                                                    metadata: {
+                                                        ...(selectedField.metadata ?? {}),
+                                                        layout: {
+                                                            ...getFieldLayout(selectedField),
+                                                            labelVisible: checked,
+                                                        },
+                                                    },
+                                                }) })] })] }), _jsx(Input, { id: "field-label", value: selectedField.label, onChange: (event) => updateSelectedField({ label: event.target.value }) })] }), _jsx(FieldLayoutControls, { field: selectedField, onChange: (patch) => updateSelectedField({
+                            metadata: {
+                                ...(selectedField.metadata ?? {}),
+                                layout: {
+                                    ...getFieldLayout(selectedField),
+                                    ...patch,
+                                },
+                            },
+                        }) }), supportsPlaceholder(selectedField) && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "field-placeholder", children: "Placeholder" }), _jsx(Input, { id: "field-placeholder", value: getFieldPlaceholder(selectedField), placeholder: "Sample answer shown before typing", onChange: (event) => {
+                                    const value = event.target.value;
+                                    updateSelectedField({
+                                        metadata: {
+                                            ...(selectedField.metadata ?? {}),
+                                            ...(value.trim() ? { placeholder: value } : { placeholder: undefined }),
+                                        },
+                                    });
+                                } }, selectedField.id), _jsx("p", { className: "text-xs text-muted-foreground", children: "Shown in the respondent preview and public form inputs." })] })), selectedField.type === "rating" && (_jsx(RatingFieldControls, { field: selectedField, onChange: (patch) => updateSelectedField({
+                            metadata: {
+                                ...(selectedField.metadata ?? {}),
+                                ...patch,
+                            },
+                        }) })), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [staticVisibilityControl, _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: "Required" }), _jsx(Switch, { checked: selectedField.required, onCheckedChange: (checked) => updateSelectedField({ required: checked }) })] })] }), selectedField.type === "select" && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "field-options", children: "Options, one per line" }), _jsx(Textarea, { id: "field-options", value: (selectedField.options ?? []).join("\n"), onChange: (event) => updateSelectedField({
                                     options: event.target.value.split("\n").map((option) => option.trim()).filter(Boolean),
-                                }) })] }))] })) : _jsx(EmptyPanelText, { children: "Select a field to edit its basics." }) }));
+                                }) })] })), _jsx(FieldKeyControl, { field: selectedField, locked: savedFieldIds.has(selectedField.id), duplicate: selectedFieldKeyDuplicate, onChange: (key) => updateSelectedField({ key }) })] })) : selectedIconBlock ? (_jsxs("div", { className: "space-y-4", children: [staticVisibilityControl, _jsx(IconBlockControls, { item: selectedIconBlock, onChange: updateSelectedIconBlock })] })) : selectedImageBlock ? (_jsxs("div", { className: "space-y-4", children: [staticVisibilityControl, _jsx(ImageBlockControls, { item: selectedImageBlock, onChange: updateSelectedImageBlock })] })) : selectedDivider ? (_jsxs("div", { className: "space-y-3", children: [staticVisibilityControl, _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Divider" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "A visual divider between form items. Drag it on the canvas to reorder it." })] })] })) : selectedPageHeader ? (_jsxs("div", { className: "space-y-3", children: [staticVisibilityControl, _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Page header" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Shows heading copy in the form body. Each header block owns its own text, so multiple headers on one page can differ." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "page-header-pre-heading", children: "Pre-heading" }), _jsx(Input, { id: "page-header-pre-heading", value: selectedPageHeader.preHeading ?? "", placeholder: "Capture Form", onChange: (event) => updateSelectedPageHeader({ preHeading: event.target.value || undefined }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "page-header-title", children: "Title" }), _jsx(Input, { id: "page-header-title", value: selectedPageHeader.title, placeholder: "Header title", onChange: (event) => updateSelectedPageHeader({ title: event.target.value || "Untitled page" }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "page-header-description", children: "Description" }), _jsx(Textarea, { id: "page-header-description", value: selectedPageHeader.description ?? "", placeholder: "Optional page intro shown in the form.", rows: 4, onChange: (event) => updateSelectedPageHeader({ description: event.target.value || undefined }) })] })] })) : selectedPageProgress ? (_jsxs("div", { className: "space-y-3", children: [staticVisibilityControl, _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Page progress" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Shows the respondent which page they are on. Drag it on the canvas to move it, or delete it if this page should not show progress." })] })] })) : _jsx(EmptyPanelText, { children: "Select a page, field, or content block to edit its basics." }) }));
     }
-    if (activePanel === "submissions") {
-        return _jsx("div", { className: "p-3", children: _jsx(SubmissionPreview, { submissions: submissions }) });
+    if (activePanel === "conditions") {
+        const selectedConditionItem = selectedPage ?? selectedField ?? selectedTextBlock ?? selectedIconBlock ?? selectedImageBlock ?? selectedDivider ?? selectedPageHeader ?? selectedPageProgress;
+        const selectedPageOrder = selectedPage
+            ? selectedPage.order
+            : selectedConditionItem && "pageId" in selectedConditionItem
+                ? pages.find((page) => page.id === selectedConditionItem.pageId)?.order ?? 0
+                : 0;
+        const conditionFields = items
+            .filter((item) => item.kind === "input")
+            .filter((item) => item.id !== selectedConditionItem?.id)
+            .filter((item) => (pages.find((page) => page.id === item.pageId)?.order ?? 0) <= selectedPageOrder)
+            .sort((a, b) => {
+            const pageDiff = (pages.find((page) => page.id === a.pageId)?.order ?? 0) - (pages.find((page) => page.id === b.pageId)?.order ?? 0);
+            return pageDiff || a.order - b.order;
+        })
+            .map((field) => {
+            const contribution = fieldTypes.find((type) => type.id === field.type) ?? getCaptureFieldType(field.type);
+            const renderer = contribution?.renderer ?? "text";
+            const page = pages.find((candidate) => candidate.id === field.pageId);
+            return {
+                key: field.key,
+                label: field.label,
+                type: renderer === "rating" ? "rating" : renderer === "select" ? "select" : renderer,
+                group: page?.title ?? "Prior page",
+                options: field.options?.map((option) => ({ value: option, label: option })),
+            };
+        });
+        const filters = toConditionGroup(selectedConditionItem?.visibleWhen);
+        const updateSelectedCondition = (visibleWhen) => {
+            if (selectedPage)
+                updateCurrentPage({ visibleWhen });
+            else if (selectedField)
+                updateSelectedField({ visibleWhen });
+            else if (selectedTextBlock)
+                updateSelectedTextBlock({ visibleWhen });
+            else if (selectedIconBlock)
+                updateSelectedIconBlock({ visibleWhen });
+            else if (selectedImageBlock)
+                updateSelectedImageBlock({ visibleWhen });
+            else if (selectedDivider)
+                updateSelectedDivider({ visibleWhen });
+            else if (selectedPageHeader)
+                updateSelectedPageHeader({ visibleWhen });
+            else if (selectedPageProgress)
+                updateSelectedPageProgress({ visibleWhen });
+        };
+        return (_jsx("div", { className: "space-y-4 p-3", children: selectedConditionItem ? (_jsx("div", { className: "space-y-3", children: conditionFields.length === 0 ? (_jsx("p", { className: "rounded-lg border border-dashed border-border bg-muted/20 p-4 text-sm text-muted-foreground", children: "Add a field on this page or an earlier page before creating a show condition." })) : (_jsx("div", { className: "[&>div>div:first-child]:hidden", children: _jsx(FilterPanel, { filters: filters, onFiltersChange: (nextFilters) => updateSelectedCondition(nextFilters ?? undefined), fields: conditionFields, operatorsByFieldType: CAPTURE_CONDITION_OPERATORS, constrainWorkspaceHeight: false, labels: {
+                            title: "Conditional Visibility",
+                            helpText: "Use answers from this page or earlier pages to decide whether this item appears.",
+                            emptyText: "Use answers from this page or earlier pages to decide whether this item appears.",
+                            addFilter: "Add condition",
+                            addGroup: "Add group",
+                            addNestedFilter: "add condition",
+                            clearAllTitle: "Clear all conditions",
+                        } }) })) })) : _jsx(EmptyPanelText, { children: "Select a page, field, or content block to configure its show condition." }) }));
     }
-    if (activePanel === "actions") {
-        return _jsx("div", { className: "p-3", children: _jsx(ActionsPanel, { fields: fields, config: actionConfig, workflows: workflows, onChange: setActionConfig }) });
+    if (activePanel === "validation") {
+        const selectedPageOrder = selectedField
+            ? pages.find((page) => page.id === selectedField.pageId)?.order ?? 0
+            : 0;
+        const validationFields = items
+            .filter((item) => item.kind === "input")
+            .filter((item) => (pages.find((page) => page.id === item.pageId)?.order ?? 0) <= selectedPageOrder)
+            .sort((a, b) => {
+            const pageDiff = (pages.find((page) => page.id === a.pageId)?.order ?? 0) - (pages.find((page) => page.id === b.pageId)?.order ?? 0);
+            return pageDiff || a.order - b.order;
+        })
+            .map((field) => {
+            const contribution = fieldTypes.find((type) => type.id === field.type) ?? getCaptureFieldType(field.type);
+            const renderer = contribution?.renderer ?? "text";
+            const page = pages.find((candidate) => candidate.id === field.pageId);
+            return {
+                key: field.key,
+                label: field.id === selectedField?.id ? `${field.label} (this field)` : field.label,
+                type: renderer === "rating" ? "rating" : renderer === "select" ? "select" : renderer,
+                group: page?.title ?? "Prior page",
+                options: field.options?.map((option) => ({ value: option, label: option })),
+            };
+        });
+        const rule = selectedField?.validationRules?.[0];
+        const filters = rule?.expression;
+        const updateValidation = (nextFilters, message = rule?.message) => {
+            if (!selectedField)
+                return;
+            if (!nextFilters) {
+                updateSelectedField({ validationRules: [] });
+                return;
+            }
+            updateSelectedField({
+                validationRules: [{
+                        id: rule?.id ?? crypto.randomUUID().slice(0, 12),
+                        message: message || `${selectedField.label} is invalid`,
+                        expression: nextFilters,
+                    }],
+            });
+        };
+        return (_jsx("div", { className: "space-y-4 p-3", children: selectedField ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `validation-message-${selectedField.id}`, children: "Failure message" }), _jsx(Input, { id: `validation-message-${selectedField.id}`, value: rule?.message ?? `${selectedField.label} is invalid`, onChange: (event) => {
+                                    const nextMessage = event.target.value || `${selectedField.label} is invalid`;
+                                    updateValidation((filters ?? createDefaultValidationRule(selectedField).expression), nextMessage);
+                                } })] }), _jsx("div", { className: "[&>div>div:first-child]:hidden", children: _jsx(FilterPanel, { filters: filters, onFiltersChange: (nextFilters) => updateValidation(nextFilters), fields: validationFields, operatorsByFieldType: CAPTURE_CONDITION_OPERATORS, constrainWorkspaceHeight: false, labels: {
+                                title: "Validation",
+                                helpText: "Add conditions that should fail this field when they match.",
+                                emptyText: "Add conditions that should fail this field when they match.",
+                                addFilter: "Add condition",
+                                addGroup: "Add group",
+                                addNestedFilter: "add condition",
+                                clearAllTitle: "Clear validation",
+                            } }) })] })) : _jsx(EmptyPanelText, { children: "Select a field to configure validation rules." }) }));
     }
-    return (_jsx("div", { className: "p-3", children: _jsxs("div", { className: "rounded-2xl border border-dashed border-border bg-muted/25 p-8 text-center", children: [_jsx(Send, { className: "mx-auto mb-3 h-8 w-8 text-muted-foreground" }), _jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [activePanel === "publish" ? "Publish" : "Theme", " placeholder"] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Reserved for the next Capture builder refinement pass." })] }) }));
+    return null;
+}
+function SubmissionViewDetailsPanel({ name, error, isExisting, isDirty, onNameChange, }) {
+    return (_jsxs("div", { className: "space-y-5 p-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-submission-view-name", children: "View name" }), _jsx(Input, { id: "capture-submission-view-name", value: name, onChange: (event) => onNameChange(event.target.value), placeholder: "New submission view", "aria-invalid": Boolean(error) }), error ? (_jsx("p", { className: "text-xs font-medium text-destructive", children: error })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: isExisting ? "Rename this saved view or save current filter, sort, and column changes." : "Create a named saved view from the current filter, sort, and column setup." }))] }), _jsxs("div", { className: "rounded-lg border border-border bg-muted/30 p-3 text-xs text-muted-foreground", children: [_jsx("p", { className: "font-medium text-foreground", children: "Current view state" }), _jsx("p", { className: "mt-1", children: isDirty ? "This view has unsaved workbench changes." : "Current workbench settings match the saved view." })] })] }));
+}
+function BuilderSubmissionsView({ submissions, fields, columns, filters, sort, onFiltersChange: _onFiltersChange, onSortChange, onOpenColumns, isLoading, isError, onRetry, }) {
+    const navigate = useNavigate();
+    const sl = useScopeLink();
+    const filteredSubmissions = useMemo(() => filterSubmissions(submissions, filters).sort((a, b) => compareSubmissions(a, b, sort)), [filters, sort, submissions]);
+    const pagination = useWorkbenchOffsetPagination({
+        pageSize: 25,
+        total: filteredSubmissions.length,
+        resetKeys: [filters, sort, columns],
+    });
+    const pageSubmissions = filteredSubmissions.slice(pagination.offset, pagination.offset + pagination.pageSize);
+    const tableColumns = useMemo(() => [
+        ...columns,
+        { fieldKey: "__spacer", label: "", visible: true, position: Number.MAX_SAFE_INTEGER - 1, unavailable: true },
+        { fieldKey: "__manage", label: "", visible: true, position: Number.MAX_SAFE_INTEGER, unavailable: true },
+    ], [columns]);
+    const renderCell = (submission, column) => renderSubmissionCell(submission, column);
+    const renderHeader = (column) => column.fieldKey === "__spacer" ? null : column.fieldKey === "__manage" ? (_jsx("button", { type: "button", onClick: (event) => { event.stopPropagation(); onOpenColumns(); }, className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": "Add columns", title: "Add columns", children: _jsx(Plus, { className: "h-4 w-4" }) })) : column.label;
+    return (_jsx("section", { className: "min-h-0 flex-1 overflow-auto", children: isError ? (_jsx(QueryErrorState, { title: "Could not load form submissions", description: "Responses for this form could not be loaded. Try again to refresh the submissions list.", onRetry: onRetry })) : isLoading ? (_jsx(BuilderSubmissionsSkeleton, {})) : submissions.length === 0 ? (_jsx(BuilderSubmissionsEmptyState, {})) : (_jsx(WorkbenchTable, { data: pageSubmissions, columns: tableColumns, getRowId: (submission) => submission.id, renderCell: renderCell, renderHeader: renderHeader, isColumnSortable: (column) => !column.fieldKey.startsWith("__") && fields.some((field) => field.key === column.fieldKey && field.sortable !== false), getColumnClassName: (column) => column.fieldKey === "submittedAt" ? "w-[220px]" : column.fieldKey === "__spacer" ? "w-full px-0" : column.fieldKey === "__manage" ? "w-10 px-3" : "w-[180px]", onRowClick: (submission) => void navigate({ to: sl("/capture/submissions/$id"), params: { id: submission.id } }), sorts: [sort], onSortChange: (nextSorts) => {
+                const next = nextSorts[0];
+                if (next && !next.field.startsWith("__"))
+                    onSortChange({ field: next.field, direction: next.direction });
+            }, total: filteredSubmissions.length, page: pagination.page, pageSize: pagination.pageSize, onPageChange: pagination.setPage, className: "h-full" })) }));
 }
-function StartPanel({ definitions, isLoading, search, selectedDefinition, activeDetailTab, onSelectDefinition, onCloseDetails, onDetailTabChange, onCreate, onOpen, }) {
+function BuilderSubmissionsSkeleton() {
+    return (_jsxs("div", { className: "rounded-2xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-32" })] }) }), _jsx("div", { className: "divide-y divide-border", children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-3 w-36" })] }), _jsx("div", { className: "mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 3 }).map((__, cell) => (_jsx(Skeleton, { className: "h-12 rounded-lg" }, cell))) })] }, index))) })] }));
+}
+function BuilderSubmissionsEmptyState() {
+    return (_jsxs("div", { className: "flex min-h-[320px] flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-muted/25 p-8 text-center", children: [_jsx(Inbox, { className: "mb-3 h-10 w-10 text-muted-foreground/60" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "No submissions yet" }), _jsx("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: "Once this form is published and respondents submit answers, they will appear here for review." })] }));
+}
+function BuilderShareView({ publicationId, publicationSlug, onCopy, }) {
+    const publicPath = publicationSlug ? `/forms/${publicationSlug}` : null;
+    const embedPath = publicationId ? `/forms/embed/${publicationId}` : null;
+    const publicUrl = publicPath ? buildPublicUrl(publicPath) : null;
+    const embedUrl = embedPath ? buildPublicUrl(embedPath) : null;
+    const productionBaseUrl = "https://ydtb.app";
+    const sdkInstallSnippet = "npm install @ydtb/public-sdk @ydtb/public-capture react";
+    const sdkComponentSnippet = publicationId ? `import { CaptureForm } from "@ydtb/public-capture/react"
+
+export function YdtbCaptureForm() {
+  return (
+    <CaptureForm
+      apiBaseUrl="${productionBaseUrl}"
+      lookup={{ publishId: "${publicationId}" }}
+      source="external"
+    />
+  )
+}` : null;
+    const iframeSnippet = embedUrl ? `<iframe src="${embedUrl}" title="Capture form" style="width:100%;min-height:640px;border:0;"></iframe>` : null;
+    if (!publicationSlug || !publicationId) {
+        return (_jsx("section", { className: "min-h-0 flex-1 overflow-auto", children: _jsxs("div", { className: "flex min-h-[360px] flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-muted/25 p-8 text-center", children: [_jsx(AlertCircle, { className: "mb-3 h-10 w-10 text-muted-foreground/60" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Publish to enable sharing" }), _jsx("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: "Public links and embed snippets are created after this form is published. Use Publish in the page header when the form is ready." })] }) }));
+    }
+    return (_jsx("section", { className: "min-h-0 flex-1 overflow-auto", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Direct public link" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Share this respondent-safe public form route." })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [publicUrl && (_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void onCopy(publicUrl, "Public link"), children: [_jsx(Copy, { className: "h-4 w-4" }), "Copy"] })), publicPath && (_jsx(Button, { variant: "outline", size: "icon", type: "button", asChild: true, "aria-label": "Open public form", children: _jsx("a", { href: publicPath, target: "_blank", rel: "noreferrer", children: _jsx(ExternalLink, { className: "h-4 w-4" }) }) }))] })] }), publicUrl && (_jsx("p", { className: "mt-3 break-all rounded-lg bg-muted/50 px-3 py-2 font-mono text-xs text-muted-foreground", children: publicUrl }))] }), _jsxs("div", { className: "rounded-xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Iframe embed" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Embed the public form in an external page with the current public embed route." })] }), iframeSnippet && (_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void onCopy(iframeSnippet, "Embed snippet"), children: [_jsx(Copy, { className: "h-4 w-4" }), "Copy"] }))] }), iframeSnippet && (_jsx("pre", { className: "mt-3 overflow-auto rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground", children: _jsx("code", { children: iframeSnippet }) }))] }), _jsxs("div", { className: "rounded-xl border border-border bg-card p-4 shadow-sm lg:col-span-2", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "React SDK / external app" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Use this in Replit, Lovable, or a custom React site. No scope id is needed \u2014 the publish id resolves the form and owning scope on YDTB." })] }), _jsxs("div", { className: "flex shrink-0 flex-wrap gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void onCopy(sdkInstallSnippet, "SDK install command"), children: [_jsx(Copy, { className: "h-4 w-4" }), "Copy install"] }), sdkComponentSnippet && (_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void onCopy(sdkComponentSnippet, "SDK component snippet"), children: [_jsx(Copy, { className: "h-4 w-4" }), "Copy component"] }))] })] }), _jsxs("div", { className: "mt-3 grid gap-3 lg:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)]", children: [_jsxs("div", { className: "space-y-2 rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground", children: [_jsxs("p", { children: [_jsx("span", { className: "font-semibold text-foreground", children: "Production API:" }), " ", _jsx("span", { className: "font-mono", children: productionBaseUrl })] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold text-foreground", children: "Publish ID:" }), " ", _jsx("span", { className: "font-mono", children: publicationId })] }), _jsx("p", { className: "leading-5", children: "Backend routing resolves the owning scope from this public publication. Do not expose or send internal scope ids from the external page." })] }), sdkComponentSnippet && (_jsx("pre", { className: "overflow-auto rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground", children: _jsxs("code", { children: [sdkInstallSnippet, "\n\n", sdkComponentSnippet] }) }))] })] }), _jsxs("div", { className: "rounded-xl border border-dashed border-border bg-muted/25 p-4", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Embed constraints" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Allowed-origin controls and advanced completion behavior are not configured in this slice. Treat the iframe snippet as the current public embed mode." })] })] }) }));
+}
+function buildPublicUrl(path) {
+    if (typeof window === "undefined")
+        return path;
+    return new URL(path, window.location.origin).toString();
+}
+const BUILT_IN_CAPTURE_ITEMS_WORKBENCH_VIEWS = [
+    { id: "all", name: "All items", icon: _jsx(Inbox, { className: "h-4 w-4" }) },
+    { id: "forms", name: "Forms", icon: _jsx(FileText, { className: "h-4 w-4" }) },
+    { id: "quizzes", name: "Quizzes", icon: _jsx(Sparkles, { className: "h-4 w-4" }) },
+    { id: "published", name: "Published", icon: _jsx(CheckCircle2, { className: "h-4 w-4" }) },
+    { id: "drafts", name: "Drafts", icon: _jsx(FileText, { className: "h-4 w-4" }) },
+];
+const CAPTURE_SUBMISSION_SYSTEM_FIELDS = [
+    { key: "submittedAt", label: "Submitted", type: "date", group: "Submission", sortable: true, filterable: true, system: true },
+    { key: "definitionName", label: "Form", type: "text", group: "Submission", sortable: true, filterable: true, system: true },
+    { key: "actionStatus", label: "Action Status", type: "dropdown", group: "Submission", sortable: true, filterable: true, system: true, options: [{ value: "pending", label: "Pending" }, { value: "running", label: "Running" }, { value: "success", label: "Success" }, { value: "failed", label: "Failed" }] },
+    { key: "contactId", label: "Contact", type: "text", group: "Submission", sortable: true, filterable: true, system: true },
+];
+const DEFAULT_CAPTURE_SUBMISSION_COLUMNS = persistWorkbenchColumns([
+    { fieldKey: "submittedAt", visible: true, position: 0 },
+    { fieldKey: "actionStatus", visible: true, position: 1 },
+]);
+const BUILT_IN_CAPTURE_SUBMISSION_WORKBENCH_VIEWS = [
+    { id: "all", name: "All submissions", icon: _jsx(Inbox, { className: "h-4 w-4" }) },
+    { id: "with-actions", name: "With actions", icon: _jsx(GitBranch, { className: "h-4 w-4" }) },
+];
+const CAPTURE_ITEMS_FIELDS = [
+    { key: "name", label: "Name", type: "text", group: "Capture Item", sortable: true, filterable: true, system: true },
+    { key: "surface", label: "Type", type: "dropdown", group: "Capture Item", sortable: true, filterable: true, system: true, options: [{ value: "form", label: "Form" }, { value: "quiz", label: "Quiz" }] },
+    { key: "status", label: "Status", type: "dropdown", group: "Capture Item", sortable: true, filterable: true, system: true, options: [{ value: "draft", label: "Draft" }, { value: "published", label: "Published" }] },
+    { key: "tags", label: "Tags", type: "labels", group: "Capture Item", sortable: true, filterable: true, system: true },
+    { key: "fieldCount", label: "Fields", type: "number", group: "Metrics", sortable: true, filterable: true, system: true },
+    { key: "submissionCount", label: "Submissions", type: "number", group: "Metrics", sortable: true, filterable: true, system: true },
+    { key: "updatedAt", label: "Last Modified", type: "date", group: "Timestamps", sortable: true, filterable: true, system: true },
+];
+const DEFAULT_CAPTURE_ITEMS_COLUMNS = persistWorkbenchColumns([
+    { fieldKey: "name", visible: true, position: 0 },
+    { fieldKey: "surface", visible: true, position: 1 },
+    { fieldKey: "status", visible: true, position: 2 },
+    { fieldKey: "tags", visible: true, position: 3 },
+    { fieldKey: "fieldCount", visible: true, position: 4 },
+    { fieldKey: "submissionCount", visible: true, position: 5 },
+    { fieldKey: "updatedAt", visible: true, position: 6 },
+]);
+const CAPTURE_ITEMS_FILTER_OPERATORS = {
+    text: ["contains", "does_not_contain", "is", "is_not", "starts_with", "ends_with", "is_empty", "is_not_empty"],
+    dropdown: ["is", "is_not", "is_empty", "is_not_empty"],
+    labels: ["contains", "does_not_contain", "is_empty", "is_not_empty"],
+    number: ["is", "is_not", "greater_than", "less_than", "greater_than_or_equal", "less_than_or_equal", "is_empty", "is_not_empty"],
+    date: ["is_before", "is_after", "is_on_or_before", "is_on_or_after", "is_empty", "is_not_empty"],
+};
+const CAPTURE_SUBMISSION_FILTER_OPERATORS = CAPTURE_ITEMS_FILTER_OPERATORS;
+function createSubmissionActionStatusFilter() {
+    return {
+        id: "with-actions",
+        logic: "and",
+        conditions: [{ id: "action-status-present", fieldKey: "actionStatus", operator: "is_not_empty" }],
+    };
+}
+function buildSubmissionWorkbenchFields(fields) {
+    return [
+        ...CAPTURE_SUBMISSION_SYSTEM_FIELDS,
+        ...fields
+            .filter((field) => field.type !== "honeypot")
+            .map((field) => ({
+            key: field.key,
+            label: field.label || field.key,
+            type: field.type === "rating" ? "number" : field.type === "select" ? "dropdown" : "text",
+            group: "Answers",
+            sortable: true,
+            filterable: true,
+            system: false,
+            options: field.options?.map((option) => ({ value: option, label: option })),
+        })),
+    ];
+}
+function getSubmissionFieldValue(submission, field) {
+    if (field === "submittedAt")
+        return new Date(submission.submittedAt).getTime();
+    if (field === "definitionName")
+        return submission.definitionName;
+    if (field === "actionStatus")
+        return submission.actionStatus ?? "";
+    if (field === "contactId")
+        return submission.contactId ?? "";
+    const value = submission.answers[field];
+    if (typeof value === "number")
+        return value;
+    if (Array.isArray(value))
+        return value.join(", ");
+    return String(value ?? "");
+}
+function compareSubmissions(a, b, sort) {
+    const aValue = getSubmissionFieldValue(a, sort.field);
+    const bValue = getSubmissionFieldValue(b, sort.field);
+    const comparison = typeof aValue === "number" && typeof bValue === "number"
+        ? aValue - bValue
+        : String(aValue).localeCompare(String(bValue), undefined, { sensitivity: "base", numeric: true });
+    return sort.direction === "asc" ? comparison : -comparison;
+}
+function filterSubmissions(submissions, filters) {
+    if (!filters || filters.conditions.length === 0)
+        return submissions;
+    return submissions.filter((submission) => evaluateWorkbenchFilter((fieldKey) => getSubmissionFieldValue(submission, fieldKey), filters));
+}
+function evaluateWorkbenchFilter(resolveValue, filter) {
+    const evaluate = (node) => {
+        if ("conditions" in node) {
+            const results = node.conditions.map(evaluate);
+            return node.logic === "and" ? results.every(Boolean) : results.some(Boolean);
+        }
+        const value = resolveValue(node.fieldKey);
+        const raw = String(value ?? "");
+        const expected = String(node.value ?? "");
+        const numericValue = Number(value);
+        const numericExpected = Number(expected);
+        if (node.operator === "is_empty")
+            return raw.length === 0;
+        if (node.operator === "is_not_empty")
+            return raw.length > 0;
+        if (node.operator === "is")
+            return raw.toLowerCase() === expected.toLowerCase();
+        if (node.operator === "is_not")
+            return raw.toLowerCase() !== expected.toLowerCase();
+        if (node.operator === "contains")
+            return raw.toLowerCase().includes(expected.toLowerCase());
+        if (node.operator === "does_not_contain")
+            return !raw.toLowerCase().includes(expected.toLowerCase());
+        if (node.operator === "starts_with")
+            return raw.toLowerCase().startsWith(expected.toLowerCase());
+        if (node.operator === "ends_with")
+            return raw.toLowerCase().endsWith(expected.toLowerCase());
+        if (node.operator === "greater_than")
+            return numericValue > numericExpected;
+        if (node.operator === "less_than")
+            return numericValue < numericExpected;
+        if (node.operator === "greater_than_or_equal")
+            return numericValue >= numericExpected;
+        if (node.operator === "less_than_or_equal")
+            return numericValue <= numericExpected;
+        if (node.operator === "is_before")
+            return numericValue < new Date(expected).getTime();
+        if (node.operator === "is_after")
+            return numericValue > new Date(expected).getTime();
+        if (node.operator === "is_on_or_before")
+            return numericValue <= new Date(expected).getTime();
+        if (node.operator === "is_on_or_after")
+            return numericValue >= new Date(expected).getTime();
+        return true;
+    };
+    const results = filter.conditions.map(evaluate);
+    return filter.logic === "and" ? results.every(Boolean) : results.some(Boolean);
+}
+function renderSubmissionCell(submission, column) {
+    if (column.fieldKey.startsWith("__"))
+        return null;
+    if (column.fieldKey === "submittedAt")
+        return _jsx("span", { className: "block text-sm whitespace-nowrap text-muted-foreground", children: new Date(submission.submittedAt).toLocaleString() });
+    if (column.fieldKey === "definitionName")
+        return _jsx("span", { className: "text-sm font-medium text-foreground", children: submission.definitionName });
+    if (column.fieldKey === "actionStatus")
+        return _jsx("span", { className: "text-sm capitalize text-muted-foreground", children: submission.actionStatus ?? "—" });
+    const value = getSubmissionFieldValue(submission, column.fieldKey);
+    return _jsx("span", { className: "text-sm text-muted-foreground", children: String(value || "—") });
+}
+function matchesCaptureItemsView(definition, viewId) {
+    if (viewId === "forms")
+        return definition.surface === "form";
+    if (viewId === "quizzes")
+        return definition.surface === "quiz";
+    if (viewId === "published")
+        return definition.status === "published";
+    if (viewId === "drafts")
+        return definition.status === "draft";
+    return true;
+}
+function getCaptureItemFieldValue(definition, field) {
+    if (field === "tags")
+        return (definition.tags ?? []).join(" ");
+    if (field === "fieldCount")
+        return definition.fieldCount;
+    if (field === "submissionCount")
+        return definition.submissionCount;
+    if (field === "updatedAt")
+        return new Date(definition.updatedAt ?? definition.createdAt ?? 0).getTime();
+    return String(definition[field] ?? "");
+}
+function parseCaptureTagsValue(value) {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        if (Array.isArray(parsed))
+            return normalizeCaptureTagValues(parsed.map(String));
+    }
+    catch {
+        return normalizeCaptureTagValues(value.split(","));
+    }
+    return [];
+}
+function normalizeCaptureTagValues(tags) {
+    const seen = new Set();
+    const normalized = [];
+    for (const tag of tags) {
+        const value = tag.trim().replace(/\s+/g, " ").slice(0, 60);
+        const key = value.toLowerCase();
+        if (!value || seen.has(key))
+            continue;
+        seen.add(key);
+        normalized.push(value);
+    }
+    return normalized;
+}
+function buildCaptureTagOptions(definitions) {
+    const tags = normalizeCaptureTagValues(definitions.flatMap((definition) => definition.tags ?? []));
+    return tags.map((tag) => ({ value: tag, label: tag, color: captureTagColor(tag) }));
+}
+function withCaptureTagOptions(fields, tagOptions) {
+    return fields.map((field) => field.key === "tags" ? { ...field, options: tagOptions } : field);
+}
+function captureTagColor(tag) {
+    const palette = ["#64748b", "#2563eb", "#7c3aed", "#db2777", "#dc2626", "#ea580c", "#16a34a", "#0891b2"];
+    let hash = 0;
+    for (const char of tag)
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    return palette[hash % palette.length];
+}
+function CaptureTagBadge({ tag }) {
+    return (_jsx("span", { className: "inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white", style: { backgroundColor: captureTagColor(tag) }, children: tag }));
+}
+function compareCaptureItems(a, b, sort) {
+    const aValue = getCaptureItemFieldValue(a, sort.field);
+    const bValue = getCaptureItemFieldValue(b, sort.field);
+    const comparison = typeof aValue === "number" && typeof bValue === "number"
+        ? aValue - bValue
+        : String(aValue).localeCompare(String(bValue), undefined, { sensitivity: "base", numeric: true });
+    return sort.direction === "asc" ? comparison : -comparison;
+}
+function evaluateCaptureItemsFilter(definition, filter) {
+    if (!filter || filter.conditions.length === 0)
+        return true;
+    const evaluate = (node) => {
+        if ("conditions" in node) {
+            const results = node.conditions.map(evaluate);
+            return node.logic === "and" ? results.every(Boolean) : results.some(Boolean);
+        }
+        const value = getCaptureItemFieldValue(definition, node.fieldKey);
+        const raw = String(value ?? "");
+        const expected = String(node.value ?? "");
+        const numericValue = Number(value);
+        const numericExpected = Number(expected);
+        if (node.operator === "is_empty")
+            return raw.length === 0;
+        if (node.operator === "is_not_empty")
+            return raw.length > 0;
+        if (node.operator === "is")
+            return raw.toLowerCase() === expected.toLowerCase();
+        if (node.operator === "is_not")
+            return raw.toLowerCase() !== expected.toLowerCase();
+        if (node.operator === "contains")
+            return raw.toLowerCase().includes(expected.toLowerCase());
+        if (node.operator === "does_not_contain")
+            return !raw.toLowerCase().includes(expected.toLowerCase());
+        if (node.operator === "starts_with")
+            return raw.toLowerCase().startsWith(expected.toLowerCase());
+        if (node.operator === "ends_with")
+            return raw.toLowerCase().endsWith(expected.toLowerCase());
+        if (node.operator === "greater_than")
+            return numericValue > numericExpected;
+        if (node.operator === "less_than")
+            return numericValue < numericExpected;
+        if (node.operator === "greater_than_or_equal")
+            return numericValue >= numericExpected;
+        if (node.operator === "less_than_or_equal")
+            return numericValue <= numericExpected;
+        if (node.operator === "is_before")
+            return numericValue < new Date(expected).getTime();
+        if (node.operator === "is_after")
+            return numericValue > new Date(expected).getTime();
+        if (node.operator === "is_on_or_before")
+            return numericValue <= new Date(expected).getTime();
+        if (node.operator === "is_on_or_after")
+            return numericValue >= new Date(expected).getTime();
+        return true;
+    };
+    const results = filter.conditions.map(evaluate);
+    return filter.logic === "and" ? results.every(Boolean) : results.some(Boolean);
+}
+function StartPanel({ definitions, isLoading, isError, onRetryDefinitions, search, selectedDefinition, activeDetailTab, activeWorkbenchViewId, activeWorkbenchPanel, onActiveWorkbenchPanelChange, filters, onFiltersChange, columns, onColumnsChange, sort, onSortChange, onSelectDefinition, onCloseDetails, onDetailTabChange, onCreate, isCreating, onOpen, onTagsChange, workflows, workflowsLoading, workflowsError, onRetryWorkflows, contactCustomFields, contactCustomFieldsLoading, contactCustomFieldsError, onRetryContactCustomFields, onActionConfigChange, isActionConfigSaving, }) {
     const filteredDefinitions = useMemo(() => {
         const query = search.trim().toLowerCase();
-        if (!query)
-            return definitions;
-        return definitions.filter((definition) => [definition.name, definition.surface, definition.status, definition.slug]
-            .some((value) => value.toLowerCase().includes(query)));
-    }, [definitions, search]);
-    const showEmptyState = !isLoading && definitions.length === 0;
-    const showNoResults = !isLoading && definitions.length > 0 && filteredDefinitions.length === 0;
-    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [showEmptyState && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-border bg-card py-20 text-center shadow-sm", children: [_jsx(Inbox, { className: "mb-4 h-12 w-12 text-muted-foreground/40" }), _jsx("h3", { className: "mb-1 text-sm font-semibold text-foreground", children: "No capture items yet" }), _jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Create your first form to get started." }), _jsxs(Button, { onClick: onCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), "Create your first form"] })] })), showNoResults && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-border bg-card py-20 text-center shadow-sm", children: [_jsx(Search, { className: "mb-3 h-10 w-10 text-muted-foreground/40" }), _jsx("h3", { className: "mb-1 text-sm font-semibold text-foreground", children: "No capture items match your search" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Try adjusting your search." })] })), isLoading && (_jsx("div", { className: "rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm", children: "Loading capture items\u2026" })), !isLoading && filteredDefinitions.length > 0 && (_jsxs("div", { className: "flex min-h-0 flex-1 items-stretch gap-4", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden min-h-0 flex-1 overflow-auto sm:block", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Name" }), _jsx("th", { className: "px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Type" }), _jsx("th", { className: "px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Status" }), _jsx("th", { className: "px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Fields" }), _jsx("th", { className: "px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Last Modified" })] }) }), _jsx("tbody", { className: "divide-y divide-border/50", children: filteredDefinitions.map((definition) => {
-                                                const SurfaceIcon = definition.surface === "quiz" ? Sparkles : FileText;
-                                                return (_jsxs("tr", { className: cn("cursor-pointer transition-colors hover:bg-muted/50", selectedDefinition?.id === definition.id && "bg-muted/60"), onClick: () => onSelectDefinition(definition), children: [_jsx("td", { className: "px-5 py-3.5", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10", children: _jsx(SurfaceIcon, { className: "h-4 w-4 text-primary" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: definition.name }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: ["/", definition.slug] })] })] }) }), _jsx("td", { className: "px-5 py-3.5 text-sm capitalize text-muted-foreground", children: definition.surface }), _jsx("td", { className: "px-5 py-3.5", children: _jsx(CaptureStatusBadge, { status: definition.status }) }), _jsx("td", { className: "px-5 py-3.5 text-right text-sm tabular-nums text-muted-foreground", children: definition.fieldCount }), _jsx("td", { className: "px-5 py-3.5 text-right text-sm whitespace-nowrap text-muted-foreground", children: formatRelativeTime(definition.updatedAt ?? definition.createdAt ?? new Date()) })] }, definition.id));
-                                            }) })] }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/50 overflow-auto sm:hidden", children: filteredDefinitions.map((definition) => {
+        return definitions
+            .filter((definition) => matchesCaptureItemsView(definition, activeWorkbenchViewId))
+            .filter((definition) => evaluateCaptureItemsFilter(definition, filters))
+            .filter((definition) => {
+            if (!query)
+                return true;
+            return [definition.name, definition.surface, definition.status, definition.slug]
+                .some((value) => value.toLowerCase().includes(query));
+        })
+            .sort((a, b) => compareCaptureItems(a, b, sort));
+    }, [activeWorkbenchViewId, definitions, filters, search, sort]);
+    const pagination = useWorkbenchOffsetPagination({
+        pageSize: 25,
+        total: filteredDefinitions.length,
+        resetKeys: [activeWorkbenchViewId, filters, search, sort],
+    });
+    const pageDefinitions = filteredDefinitions.slice(pagination.offset, pagination.offset + pagination.pageSize);
+    const tagOptions = useMemo(() => buildCaptureTagOptions(definitions), [definitions]);
+    const tagField = useMemo(() => ({ id: "tags", name: "Tags", type: "labels", options: tagOptions }), [tagOptions]);
+    const [actionDraftConfig, setActionDraftConfig] = useState(selectedDefinition?.actionConfig ?? {});
+    useEffect(() => {
+        setActionDraftConfig(selectedDefinition?.actionConfig ?? {});
+    }, [selectedDefinition?.id, selectedDefinition?.actionConfig]);
+    const actionTabs = useMemo(() => buildCaptureListPanelTabs(actionDraftConfig), [actionDraftConfig]);
+    useEffect(() => {
+        if (!selectedDefinition)
+            return;
+        if (!actionTabs.some((tab) => tab.id === activeDetailTab))
+            onDetailTabChange("actions");
+    }, [activeDetailTab, actionTabs, onDetailTabChange, selectedDefinition]);
+    const toggleLeadAction = useCallback((kind, enabled) => {
+        setActionDraftConfig((current) => {
+            const actionConfig = current[kind] ?? defaultActionConfigFor(kind);
+            return { ...current, [kind]: { ...actionConfig, enabled } };
+        });
+        if (enabled)
+            onDetailTabChange(kind);
+    }, [onDetailTabChange]);
+    const showEmptyState = !isLoading && !isError && definitions.length === 0;
+    const showNoResults = !isLoading && !isError && definitions.length > 0 && filteredDefinitions.length === 0;
+    const renderCell = (definition, column) => {
+        const fieldKey = column.fieldKey;
+        if (fieldKey === "name") {
+            const SurfaceIcon = definition.surface === "quiz" ? Sparkles : FileText;
+            return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10", children: _jsx(SurfaceIcon, { className: "h-4 w-4 text-primary" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: definition.name }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: ["/", definition.slug] })] })] }));
+        }
+        if (fieldKey === "status")
+            return _jsx(CaptureStatusBadge, { status: definition.status });
+        if (fieldKey === "surface")
+            return _jsx("span", { className: "text-sm capitalize text-muted-foreground", children: definition.surface });
+        if (fieldKey === "tags") {
+            return (_jsx("div", { className: "group/cell relative min-w-40", children: _jsx(InlineCellEditor, { field: tagField, value: JSON.stringify(definition.tags ?? []), onChange: (value) => onTagsChange(definition.id, parseCaptureTagsValue(value)), onCreateOption: (option) => onTagsChange(definition.id, [...(definition.tags ?? []), option.label]) }) }));
+        }
+        if (fieldKey === "fieldCount")
+            return _jsx("span", { className: "block text-right text-sm tabular-nums text-muted-foreground", children: definition.fieldCount });
+        if (fieldKey === "submissionCount")
+            return _jsx("span", { className: "block text-right text-sm tabular-nums text-muted-foreground", children: definition.submissionCount });
+        return _jsx("span", { className: "block text-right text-sm whitespace-nowrap text-muted-foreground", children: formatRelativeTime(definition.updatedAt ?? definition.createdAt ?? new Date()) });
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [isError && (_jsx(QueryErrorState, { title: "Could not load capture items", description: "Capture Items could not be loaded. Try again to refresh the list.", onRetry: onRetryDefinitions })), showEmptyState && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-border bg-card py-20 text-center shadow-sm", children: [_jsx(Inbox, { className: "mb-4 h-12 w-12 text-muted-foreground/40" }), _jsx("h3", { className: "mb-1 text-sm font-semibold text-foreground", children: "No capture items yet" }), _jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Create your first form to get started." }), _jsxs(Button, { onClick: onCreate, disabled: isCreating, children: [_jsx(Plus, { className: "h-4 w-4" }), isCreating ? "Creating…" : "Create your first form"] })] })), showNoResults && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-border bg-card py-20 text-center shadow-sm", children: [_jsx(Search, { className: "mb-3 h-10 w-10 text-muted-foreground/40" }), _jsx("h3", { className: "mb-1 text-sm font-semibold text-foreground", children: "No capture items match your search" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Try adjusting your search." })] })), isLoading && _jsx(CaptureItemsSkeleton, {}), !isLoading && !isError && filteredDefinitions.length > 0 && (_jsxs("div", { className: "flex min-h-0 flex-1 items-stretch gap-4", children: [_jsxs("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "hidden h-full min-h-0 sm:block", children: _jsx(WorkbenchTable, { data: pageDefinitions, columns: columns, getRowId: (definition) => definition.id, renderCell: renderCell, getColumnClassName: (column) => ["fieldCount", "submissionCount", "updatedAt"].includes(column.fieldKey) ? "text-right" : undefined, onRowClick: onSelectDefinition, onRowDoubleClick: (definition) => onOpen(definition.id), sorts: [{ field: sort.field, direction: sort.direction }], onSortChange: (nextSorts) => {
+                                        const next = nextSorts[0];
+                                        if (next)
+                                            onSortChange({ field: next.field, direction: next.direction });
+                                    }, total: filteredDefinitions.length, page: pagination.page, pageSize: pagination.pageSize, onPageChange: pagination.setPage, className: "h-full" }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/50 overflow-auto rounded-xl border border-border bg-card shadow-sm sm:hidden", children: pageDefinitions.map((definition) => {
                                     const SurfaceIcon = definition.surface === "quiz" ? Sparkles : FileText;
-                                    return (_jsxs("button", { type: "button", onClick: () => onSelectDefinition(definition), className: "flex w-full items-center gap-3 px-4 py-3 text-left active:bg-muted/50", children: [_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10", children: _jsx(SurfaceIcon, { className: "h-4 w-4 text-primary" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: definition.name }), _jsxs("span", { className: "block text-xs capitalize text-muted-foreground", children: [definition.surface, " \u00B7 ", definition.fieldCount, " fields \u00B7 ", definition.status] })] })] }, definition.id));
-                                }) })] }), _jsx(TabbedPanel, { open: selectedDefinition != null, onClose: onCloseDetails, tabs: CAPTURE_LIST_PANEL_TABS, activeTab: activeDetailTab, onTabChange: onDetailTabChange, width: "380px", inline: true, flush: true, className: "self-stretch rounded-xl border shadow-sm", header: selectedDefinition ? (_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: selectedDefinition.name }), _jsxs("p", { className: "mt-1 text-xs capitalize text-muted-foreground", children: [selectedDefinition.surface, " \u00B7 ", selectedDefinition.status] })] })) : undefined, footer: selectedDefinition ? (_jsx("div", { className: "flex items-center justify-end gap-2 border-t border-border px-4 py-3", children: _jsx(Button, { size: "sm", onClick: () => onOpen(selectedDefinition.id), children: "Open builder" }) })) : undefined, children: selectedDefinition ? (_jsx(CaptureListDetailPanel, { definition: selectedDefinition, activeTab: activeDetailTab })) : null })] }))] }));
+                                    return (_jsxs("button", { type: "button", onClick: () => onSelectDefinition(definition), onDoubleClick: () => onOpen(definition.id), className: "flex w-full items-center gap-3 px-4 py-3 text-left active:bg-muted/50", children: [_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10", children: _jsx(SurfaceIcon, { className: "h-4 w-4 text-primary" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: definition.name }), _jsxs("span", { className: "block text-xs capitalize text-muted-foreground", children: [definition.surface, " \u00B7 ", definition.fieldCount, " fields \u00B7 ", definition.submissionCount, " submissions \u00B7 ", definition.status] }), (definition.tags?.length ?? 0) > 0 && (_jsx("span", { className: "mt-1 flex flex-wrap gap-1", children: definition.tags?.slice(0, 3).map((tag) => _jsx(CaptureTagBadge, { tag: tag }, tag)) }))] })] }, definition.id));
+                                }) })] }), _jsx(TabbedPanel, { open: selectedDefinition != null, onClose: onCloseDetails, tabs: actionTabs, activeTab: activeDetailTab, onTabChange: onDetailTabChange, width: "456px", inline: true, flush: true, className: "self-stretch rounded-xl border shadow-sm", header: selectedDefinition ? (_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: selectedDefinition.name }), _jsxs("p", { className: "mt-1 text-xs capitalize text-muted-foreground", children: [selectedDefinition.surface, " \u00B7 ", selectedDefinition.status] })] })) : undefined, footer: selectedDefinition ? (_jsx("div", { className: "flex items-center justify-end gap-2 border-t border-border px-4 py-3", children: _jsx(Button, { size: "sm", onClick: () => onOpen(selectedDefinition.id), children: "Open builder" }) })) : undefined, children: selectedDefinition ? (_jsx(CaptureListDetailPanel, { definition: selectedDefinition, activeTab: activeDetailTab, actionConfig: actionDraftConfig, persistedActionConfig: selectedDefinition.actionConfig ?? {}, workflows: workflows, workflowsLoading: workflowsLoading, workflowsError: workflowsError, onRetryWorkflows: onRetryWorkflows, contactCustomFields: contactCustomFields, contactCustomFieldsLoading: contactCustomFieldsLoading, contactCustomFieldsError: contactCustomFieldsError, onRetryContactCustomFields: onRetryContactCustomFields, onActionConfigChange: setActionDraftConfig, onToggleLeadAction: toggleLeadAction, onSaveActionConfig: (actionConfig) => onActionConfigChange(selectedDefinition.id, actionConfig), isActionConfigSaving: isActionConfigSaving })) : null }), _jsx(TabbedPanel, { open: activeWorkbenchPanel != null, onClose: () => onActiveWorkbenchPanelChange(null), tabs: [
+                            { id: "filters", icon: Filter, label: "Filters" },
+                            { id: "columns", icon: Columns3, label: "Columns" },
+                        ], activeTab: activeWorkbenchPanel ?? "filters", onTabChange: (tabId) => onActiveWorkbenchPanelChange(tabId), width: "420px", header: (_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Capture Items view" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Adjust filters and visible columns for this workbench." })] })), children: activeWorkbenchPanel === "columns" ? (_jsx(WorkbenchColumnPanel, { columns: columns, onColumnsChange: onColumnsChange })) : (_jsx(WorkbenchFilterPanel, { filters: filters, onFiltersChange: onFiltersChange, fields: fieldsToFilterFields(withCaptureTagOptions(CAPTURE_ITEMS_FIELDS, tagOptions)), operatorsByFieldType: CAPTURE_ITEMS_FILTER_OPERATORS, resultCount: filteredDefinitions.length })) })] }))] }));
 }
-function CaptureListDetailPanel({ definition, activeTab, }) {
+function CaptureListDetailPanel({ definition, activeTab, actionConfig, persistedActionConfig, workflows, workflowsLoading, workflowsError, onRetryWorkflows, contactCustomFields, contactCustomFieldsLoading, contactCustomFieldsError, onRetryContactCustomFields, onActionConfigChange, onToggleLeadAction, onSaveActionConfig, isActionConfigSaving, }) {
     if (activeTab === "overview") {
-        return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Summary" }), _jsxs("dl", { className: "mt-3 grid gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Type" }), _jsx("dd", { className: "font-medium capitalize text-foreground", children: definition.surface })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Status" }), _jsx("dd", { children: _jsx(CaptureStatusBadge, { status: definition.status }) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Fields" }), _jsx("dd", { className: "font-medium tabular-nums text-foreground", children: definition.fieldCount })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Last modified" }), _jsx("dd", { className: "font-medium text-foreground", children: formatRelativeTime(definition.updatedAt ?? definition.createdAt ?? new Date()) })] })] })] }), _jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Slug" }), _jsxs("p", { className: "mt-2 break-all rounded-lg bg-muted/50 px-2 py-1.5 font-mono text-xs text-muted-foreground", children: ["/", definition.slug] })] })] }));
+        return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Summary" }), _jsxs("dl", { className: "mt-3 grid gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Type" }), _jsx("dd", { className: "font-medium capitalize text-foreground", children: definition.surface })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Status" }), _jsx("dd", { children: _jsx(CaptureStatusBadge, { status: definition.status }) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Submissions" }), _jsx("dd", { className: "font-medium tabular-nums text-foreground", children: definition.submissionCount })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Fields" }), _jsx("dd", { className: "font-medium tabular-nums text-foreground", children: definition.fieldCount })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: "Last modified" }), _jsx("dd", { className: "font-medium text-foreground", children: formatRelativeTime(definition.updatedAt ?? definition.createdAt ?? new Date()) })] })] })] }), _jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Slug" }), _jsxs("p", { className: "mt-2 break-all rounded-lg bg-muted/50 px-2 py-1.5 font-mono text-xs text-muted-foreground", children: ["/", definition.slug] })] })] }));
     }
     if (activeTab === "publish") {
         return (_jsx("div", { className: "space-y-4 p-4", children: _jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Publication" }), definition.publicationSlug ? (_jsxs("p", { className: "mt-2 break-all text-sm text-foreground", children: ["/", definition.surface === "quiz" ? "quizzes" : "forms", "/", definition.publicationSlug] })) : (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "This capture item has not been published yet." }))] }) }));
@@ -250,19 +1803,54 @@ function CaptureListDetailPanel({ definition, activeTab, }) {
     if (activeTab === "submissions") {
         return (_jsx("div", { className: "p-4", children: _jsxs("div", { className: "rounded-xl border border-dashed border-border bg-muted/25 p-6 text-center", children: [_jsx(Inbox, { className: "mx-auto mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Submission rollup" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Submission counts and recent responses will live here once the list endpoint returns per-item metrics." })] }) }));
     }
-    return (_jsx("div", { className: "p-4", children: _jsxs("div", { className: "rounded-xl border border-dashed border-border bg-muted/25 p-6 text-center", children: [_jsx(GitBranch, { className: "mx-auto mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Actions overview" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Action health, workflow hooks, and destination status will be summarized here." })] }) }));
+    if (activeTab === "actions") {
+        return (_jsx(LeadCaptureActionsSection, { config: actionConfig, persistedConfig: persistedActionConfig, onToggle: onToggleLeadAction, onReset: () => onActionConfigChange(persistedActionConfig), onSave: () => onSaveActionConfig(actionConfig), isSaving: isActionConfigSaving }));
+    }
+    if (isLeadActionKind(activeTab)) {
+        return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsx(ActionsPanel, { fields: definition.fields ?? [], config: actionConfig, workflows: workflows, workflowsLoading: workflowsLoading, workflowsError: workflowsError, onRetryWorkflows: onRetryWorkflows, contactCustomFields: contactCustomFields, contactCustomFieldsLoading: contactCustomFieldsLoading, contactCustomFieldsError: contactCustomFieldsError, onRetryContactCustomFields: onRetryContactCustomFields, onChange: onActionConfigChange, visibleActions: [activeTab], showSectionSwitches: false, compact: true }), _jsx(ActionConfigFooter, { isDirty: isActionConfigDirty(actionConfig, persistedActionConfig), isSaving: isActionConfigSaving, onReset: () => onActionConfigChange(persistedActionConfig), onSave: () => onSaveActionConfig(actionConfig) })] }));
+    }
+    return null;
+}
+function QueryErrorState({ title, description, onRetry, }) {
+    return (_jsxs("div", { className: "flex min-h-[320px] flex-col items-center justify-center rounded-2xl border border-border bg-card p-8 text-center shadow-sm", children: [_jsx(AlertCircle, { className: "mb-3 h-10 w-10 text-destructive" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }), _jsx("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: description }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "mt-4", onClick: onRetry, children: "Try again" })] }));
+}
+function CaptureItemsSkeleton() {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 items-stretch gap-4", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "border-b border-border px-5 py-3", children: _jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_120px_120px_80px_140px] gap-4", children: Array.from({ length: 5 }).map((_, index) => _jsx(Skeleton, { className: "h-4" }, index)) }) }), _jsx("div", { className: "divide-y divide-border/50", children: Array.from({ length: 6 }).map((_, row) => (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_120px_120px_80px_140px] items-center gap-4 px-5 py-3.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-8 w-8 rounded-lg" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/3" })] })] }), _jsx(Skeleton, { className: "h-4" }), _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }), _jsx(Skeleton, { className: "h-4 w-8 justify-self-end" }), _jsx(Skeleton, { className: "h-4" })] }, row))) })] }), _jsx(Skeleton, { className: "hidden w-[380px] rounded-xl lg:block" })] }));
+}
+function BuilderWorkspaceSkeleton() {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [_jsxs("section", { className: "rounded-2xl border border-border bg-card p-4 shadow-sm", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "mt-2 h-9 max-w-xl" })] }), _jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [_jsxs("section", { className: "flex min-h-0 min-w-0 flex-1 flex-col rounded-2xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-72" })] }), _jsx(Skeleton, { className: "h-6 w-16 rounded-full" })] }), _jsx("div", { className: "flex flex-1 flex-col gap-3 rounded-2xl border border-dashed border-border bg-muted/25 p-4", children: Array.from({ length: 4 }).map((_, index) => _jsx(Skeleton, { className: "h-20 rounded-xl" }, index)) })] }), _jsx(Skeleton, { className: "hidden w-[380px] rounded-2xl lg:block" })] })] }));
 }
 function CaptureStatusBadge({ status }) {
     const isPublished = status === "published";
     return (_jsx("span", { className: cn("inline-block rounded-full px-1.5 py-0.5 text-[10px] font-medium capitalize", isPublished ? "bg-success/10 text-success-foreground" : "bg-muted text-muted-foreground"), children: status }));
 }
-function ActionsPanel({ fields, config, workflows, onChange, }) {
+function isLeadActionKind(value) {
+    return value === "contacts" || value === "email" || value === "workflow";
+}
+function isActionConfigDirty(current, saved) {
+    return JSON.stringify(current) !== JSON.stringify(saved);
+}
+function LeadCaptureActionsSection({ config, persistedConfig, onToggle, onReset, onSave, isSaving, }) {
+    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("section", { className: "space-y-3 rounded-xl border border-border bg-background p-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Lead capture actions" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Toggle the actions this form should run after each submission. Active actions get their own configuration tabs." })] }), _jsx("div", { className: "space-y-2", children: CAPTURE_LEAD_ACTIONS.map((action) => {
+                            const Icon = action.icon;
+                            const enabled = Boolean(config[action.id]?.enabled);
+                            return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-lg border border-border bg-muted/20 p-3", children: [_jsxs("div", { className: "flex min-w-0 gap-3", children: [_jsx("span", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: action.label }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: action.description })] })] }), _jsx(Switch, { checked: enabled, onCheckedChange: (checked) => onToggle(action.id, checked), disabled: isSaving })] }, action.id));
+                        }) })] }), _jsx(ActionConfigFooter, { isDirty: isActionConfigDirty(config, persistedConfig), isSaving: isSaving, onReset: onReset, onSave: onSave })] }));
+}
+function ActionConfigFooter({ isDirty, isSaving, onReset, onSave, }) {
+    return (_jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border pt-3", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onReset, disabled: !isDirty || isSaving, children: "Reset" }), _jsxs(Button, { type: "button", size: "sm", onClick: onSave, disabled: !isDirty || isSaving, children: [_jsx(Save, { className: "h-4 w-4" }), isSaving ? "Saving…" : "Save actions"] })] }));
+}
+function defaultActionConfigFor(kind) {
+    if (kind === "contacts")
+        return { enabled: false, customFieldMappings: {} };
+    if (kind === "email")
+        return { enabled: false, subjectTemplate: "New Capture submission", bodyTemplate: "A new Capture submission was received.\n\n{{answers}}" };
+    return { enabled: false, execute: true };
+}
+function ActionsPanel({ fields, config, workflows, workflowsLoading, workflowsError, onRetryWorkflows, contactCustomFields, contactCustomFieldsLoading, contactCustomFieldsError, onRetryContactCustomFields, onChange, visibleActions, showSectionSwitches = true, compact = false, }) {
     const contacts = config.contacts ?? { enabled: false, customFieldMappings: {} };
     const email = config.email ?? { enabled: false, subjectTemplate: "New Capture submission", bodyTemplate: "A new Capture submission was received.\n\n{{answers}}" };
     const workflow = config.workflow ?? { enabled: false, execute: true };
-    const customMappingsText = Object.entries(contacts.customFieldMappings ?? {})
-        .map(([contactField, answerField]) => `${contactField}=${answerField}`)
-        .join("\n");
     const patchContacts = (patch) => {
         onChange({ ...config, contacts: { ...contacts, ...patch } });
     };
@@ -280,27 +1868,179 @@ function ActionsPanel({ fields, config, workflows, onChange, }) {
             answers: Object.fromEntries(fields.map((field) => [field.key, `<${field.label}>`])),
         },
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("section", { className: "rounded-2xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Contacts create/update action" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "After a public submission is stored, map answers into Contacts. Failures are recorded as action runs without deleting the canonical submission." })] }), _jsx(Switch, { checked: contacts.enabled, onCheckedChange: (enabled) => patchContacts({ enabled }) })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-3", children: [_jsx(FieldSelect, { label: "Name answer", value: contacts.nameFieldKey ?? "", fields: fields, onChange: (nameFieldKey) => patchContacts({ nameFieldKey }) }), _jsx(FieldSelect, { label: "Email answer", value: contacts.emailFieldKey ?? "", fields: fields, onChange: (emailFieldKey) => patchContacts({ emailFieldKey }) }), _jsx(FieldSelect, { label: "Phone answer", value: contacts.phoneFieldKey ?? "", fields: fields, onChange: (phoneFieldKey) => patchContacts({ phoneFieldKey }) })] }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Label, { htmlFor: "contact-custom-field-mappings", children: "Custom field mappings" }), _jsx(Textarea, { id: "contact-custom-field-mappings", placeholder: "contact_custom_slug=capture_field_key\nlead_source=source_field", value: customMappingsText, onChange: (event) => {
-                                    const customFieldMappings = {};
-                                    for (const line of event.target.value.split("\n")) {
-                                        const [contactField, answerField] = line.split("=").map((part) => part?.trim());
-                                        if (contactField && answerField)
-                                            customFieldMappings[contactField] = answerField;
-                                    }
-                                    patchContacts({ customFieldMappings });
-                                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Use one mapping per line: Contacts custom field slug/key on the left, Capture field key on the right. Quiz virtual keys include outcome.label, outcome.key, outcome.bucket, and outcome.score." })] })] }), _jsxs("section", { className: "rounded-2xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Email action" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Send an operator email, respondent email, or both after the canonical submission is stored. Templates can include outcomeLabel, outcomeBucket, and outcomeScore." })] }), _jsx(Switch, { checked: email.enabled, onCheckedChange: (enabled) => patchEmail({ enabled }) })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-from", children: "From override" }), _jsx(Input, { id: "capture-email-from", placeholder: "Forms <forms@example.com>", value: email.from ?? "", onChange: (event) => patchEmail({ from: event.target.value || undefined }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-internal", children: "Operator recipient" }), _jsx(Input, { id: "capture-email-internal", type: "email", placeholder: "ops@example.com", value: email.internalRecipientEmail ?? "", onChange: (event) => patchEmail({ internalRecipientEmail: event.target.value || undefined }) })] }), _jsx(FieldSelect, { label: "Respondent email answer", value: email.respondentEmailFieldKey ?? "", fields: fields, onChange: (respondentEmailFieldKey) => patchEmail({ respondentEmailFieldKey }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-subject", children: "Subject template" }), _jsx(Input, { id: "capture-email-subject", value: email.subjectTemplate ?? "", onChange: (event) => patchEmail({ subjectTemplate: event.target.value || undefined }) })] })] }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-body", children: "Body template" }), _jsx(Textarea, { id: "capture-email-body", value: email.bodyTemplate ?? "", onChange: (event) => patchEmail({ bodyTemplate: event.target.value || undefined }) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Template tokens can reference field keys like ", "{{email_ab12}}", "; ", "{{answers}}", " inserts all answers."] })] })] }), _jsxs("section", { className: "rounded-2xl border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GitBranch, { className: "h-4 w-4 text-primary" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Workflow trigger action" })] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Start a current-scope workflow after submission. API trigger-compatible workflows receive answers plus quiz outcome summary." })] }), _jsx(Switch, { checked: workflow.enabled, onCheckedChange: (enabled) => patchWorkflow({ enabled }) })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Workflow definition" }), _jsxs("select", { className: "h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", value: workflow.workflowDefinitionId ?? "", onChange: (event) => {
-                                            const next = workflows.find((candidate) => candidate.id === event.target.value);
-                                            patchWorkflow({
-                                                workflowDefinitionId: next?.id,
-                                                triggerNodeId: next?.apiTriggerNodeId,
-                                            });
-                                        }, children: [_jsx("option", { value: "", children: "Select workflow\u2026" }), workflows.map((candidate) => (_jsxs("option", { value: candidate.id, children: [candidate.name, " \u00B7 ", candidate.compatible ? "API trigger" : "not API-ready"] }, candidate.id)))] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border p-3", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Execute immediately" }), _jsx(Switch, { checked: workflow.execute ?? true, onCheckedChange: (execute) => patchWorkflow({ execute }) })] })] }), _jsxs("div", { className: "mt-4 grid gap-4 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Compatibility" }), _jsx("p", { className: cn("mt-2 text-sm", selectedWorkflow?.compatible ? "text-foreground" : "text-destructive"), children: selectedWorkflow?.summary ?? "Select a workflow to inspect trigger compatibility." }), selectedWorkflow && (_jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Version ", selectedWorkflow.currentVersion, " \u00B7 Status ", selectedWorkflow.status, " \u00B7 Triggers ", selectedWorkflow.triggerTypes.join(", ") || "none"] }))] }), _jsxs("div", { className: "rounded-xl border border-border bg-muted/30 p-3", children: [_jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Payload preview" }), _jsx("pre", { className: "mt-2 max-h-48 overflow-auto rounded-lg bg-background p-2 text-xs text-muted-foreground", children: JSON.stringify(workflowPreview, null, 2) })] })] })] })] }));
+    const visible = new Set(visibleActions ?? ["contacts", "email", "workflow"]);
+    const sectionClassName = compact ? "rounded-xl border border-border bg-background p-3" : "rounded-2xl border border-border bg-card p-4 shadow-sm";
+    const gridClassName = compact ? "mt-4 grid gap-4" : "mt-4 grid gap-4 md:grid-cols-3";
+    const twoColumnGridClassName = compact ? "mt-4 grid gap-4" : "mt-4 grid gap-4 md:grid-cols-2";
+    return (_jsxs("div", { className: "space-y-4", children: [visible.has("contacts") && _jsxs("section", { className: sectionClassName, children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Contacts create/update action" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "After a public submission is stored, map answers into Contacts. Failures are recorded as action runs without deleting the canonical submission." })] }), showSectionSwitches && _jsx(Switch, { checked: contacts.enabled, onCheckedChange: (enabled) => patchContacts({ enabled }) })] }), _jsxs("div", { className: gridClassName, children: [_jsx(FieldSelect, { label: "Name answer", value: contacts.nameFieldKey ?? "", fields: fields, onChange: (nameFieldKey) => patchContacts({ nameFieldKey }) }), _jsx(FieldSelect, { label: "Email answer", value: contacts.emailFieldKey ?? "", fields: fields, onChange: (emailFieldKey) => patchContacts({ emailFieldKey }) }), _jsx(FieldSelect, { label: "Phone answer", value: contacts.phoneFieldKey ?? "", fields: fields, onChange: (phoneFieldKey) => patchContacts({ phoneFieldKey }) })] }), _jsx(CustomFieldMappingsEditor, { fields: fields, contactFields: contactCustomFields, isLoading: contactCustomFieldsLoading, isError: contactCustomFieldsError, mappings: contacts.customFieldMappings ?? {}, onRetry: onRetryContactCustomFields, onChange: (customFieldMappings) => patchContacts({ customFieldMappings }) })] }), visible.has("email") && _jsxs("section", { className: sectionClassName, children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Email action" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Send an operator email, respondent email, or both after the canonical submission is stored. Templates can include outcomeLabel, outcomeBucket, and outcomeScore." })] }), showSectionSwitches && _jsx(Switch, { checked: email.enabled, onCheckedChange: (enabled) => patchEmail({ enabled }) })] }), _jsxs("div", { className: twoColumnGridClassName, children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-from", children: "From override" }), _jsx(Input, { id: "capture-email-from", placeholder: "Forms <forms@example.com>", value: email.from ?? "", onChange: (event) => patchEmail({ from: event.target.value || undefined }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-internal", children: "Operator recipient" }), _jsx(Input, { id: "capture-email-internal", type: "email", placeholder: "ops@example.com", value: email.internalRecipientEmail ?? "", onChange: (event) => patchEmail({ internalRecipientEmail: event.target.value || undefined }) })] }), _jsx(FieldSelect, { label: "Respondent email answer", value: email.respondentEmailFieldKey ?? "", fields: fields, onChange: (respondentEmailFieldKey) => patchEmail({ respondentEmailFieldKey }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-subject", children: "Subject template" }), _jsx(Input, { id: "capture-email-subject", value: email.subjectTemplate ?? "", onChange: (event) => patchEmail({ subjectTemplate: event.target.value || undefined }) })] })] }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Label, { htmlFor: "capture-email-body", children: "Body template" }), _jsx(Textarea, { id: "capture-email-body", value: email.bodyTemplate ?? "", onChange: (event) => patchEmail({ bodyTemplate: event.target.value || undefined }) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Template tokens can reference field keys like ", "{{email_ab12}}", "; ", "{{answers}}", " inserts all answers."] })] })] }), visible.has("workflow") && _jsxs("section", { className: sectionClassName, children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GitBranch, { className: "h-4 w-4 text-primary" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Workflow trigger action" })] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Start a current-scope workflow after submission. API trigger-compatible workflows receive answers plus quiz outcome summary." })] }), showSectionSwitches && _jsx(Switch, { checked: workflow.enabled, onCheckedChange: (enabled) => patchWorkflow({ enabled }) })] }), workflowsError ? (_jsx("div", { className: "mt-4 rounded-xl border border-destructive/30 bg-destructive/5 p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Could not load workflows" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Workflow actions are optional. Retry to select a workflow trigger, or keep this action disabled and save other settings." }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "mt-3", onClick: onRetryWorkflows, children: "Try again" })] })] }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: compact ? "mt-4 grid gap-4" : "mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Workflow definition" }), _jsxs("select", { className: "h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50", value: workflow.workflowDefinitionId ?? "", disabled: workflowsLoading || workflows.length === 0, onChange: (event) => {
+                                                    const next = workflows.find((candidate) => candidate.id === event.target.value);
+                                                    patchWorkflow({
+                                                        workflowDefinitionId: next?.id,
+                                                        triggerNodeId: next?.apiTriggerNodeId,
+                                                    });
+                                                }, children: [_jsx("option", { value: "", children: workflowsLoading ? "Loading workflows…" : workflows.length === 0 ? "No compatible workflows available" : "Select workflow…" }), workflows.map((candidate) => (_jsxs("option", { value: candidate.id, children: [candidate.name, " \u00B7 ", candidate.compatible ? "API trigger" : "not API-ready"] }, candidate.id)))] }), !workflowsLoading && workflows.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Workflow triggering is optional. Create an API-trigger-compatible workflow to enable this action." }))] }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border p-3", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Execute immediately" }), _jsx(Switch, { checked: workflow.execute ?? true, onCheckedChange: (execute) => patchWorkflow({ execute }), disabled: workflowsLoading || workflows.length === 0 })] })] }), _jsxs("div", { className: compact ? "mt-4 grid gap-4" : "mt-4 grid gap-4 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [_jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Compatibility" }), workflowsLoading ? (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: cn("mt-2 text-sm", selectedWorkflow?.compatible ? "text-foreground" : selectedWorkflow ? "text-destructive" : "text-muted-foreground"), children: selectedWorkflow?.summary ?? "Select a workflow to inspect trigger compatibility." }), selectedWorkflow && (_jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Version ", selectedWorkflow.currentVersion, " \u00B7 Status ", selectedWorkflow.status, " \u00B7 Triggers ", selectedWorkflow.triggerTypes.join(", ") || "none"] }))] }))] }), _jsxs("div", { className: "rounded-xl border border-border bg-muted/30 p-3", children: [_jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Payload preview" }), _jsx("pre", { className: "mt-2 max-h-48 overflow-auto rounded-lg bg-background p-2 text-xs text-muted-foreground", children: JSON.stringify(workflowPreview, null, 2) })] })] })] }))] })] }));
+}
+function CustomFieldMappingsEditor({ fields, contactFields, mappings, isLoading, isError, onRetry, onChange, }) {
+    const mappedKeys = Object.keys(mappings);
+    const availableContactFields = contactFields.filter((field) => !mappedKeys.includes(field.key));
+    const updateMapping = (contactFieldKey, answerFieldKey) => {
+        const next = { ...mappings };
+        if (answerFieldKey)
+            next[contactFieldKey] = answerFieldKey;
+        else
+            delete next[contactFieldKey];
+        onChange(next);
+    };
+    const renameMapping = (previousKey, nextKey) => {
+        if (!nextKey || nextKey === previousKey)
+            return;
+        const next = { ...mappings };
+        const answerFieldKey = next[previousKey];
+        delete next[previousKey];
+        if (answerFieldKey)
+            next[nextKey] = answerFieldKey;
+        onChange(next);
+    };
+    return (_jsxs("div", { className: "mt-4 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Custom field mappings" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Map Contacts custom fields to Capture answers. Add as many mappings as this form needs." })] }), isError ? (_jsxs("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-3", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Could not load Contacts custom fields." }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "mt-2", onClick: onRetry, children: "Try again" })] })) : isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-9 w-full" }), _jsx(Skeleton, { className: "h-9 w-full" })] })) : contactFields.length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed border-border bg-muted/25 p-3 text-sm text-muted-foreground", children: "No Contacts custom fields are available yet." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-2", children: mappedKeys.length === 0 ? (_jsx("p", { className: "rounded-lg border border-dashed border-border bg-muted/25 p-3 text-sm text-muted-foreground", children: "No custom fields mapped." })) : mappedKeys.map((contactFieldKey) => {
+                            const selectedContactField = contactFields.find((field) => field.key === contactFieldKey);
+                            const selectableContactFields = [
+                                ...(selectedContactField ? [selectedContactField] : [{ id: contactFieldKey, key: contactFieldKey, label: contactFieldKey, type: "text" }]),
+                                ...availableContactFields,
+                            ];
+                            return (_jsxs("div", { className: "grid gap-2 rounded-lg border border-border bg-muted/20 p-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Contact field" }), _jsx("select", { className: "h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", value: contactFieldKey, onChange: (event) => renameMapping(contactFieldKey, event.target.value), children: selectableContactFields.map((field) => _jsx("option", { value: field.key, children: field.label }, field.key)) })] }), _jsx(FieldSelect, { label: "Capture answer", value: mappings[contactFieldKey] ?? "", fields: fields, onChange: (answerFieldKey) => updateMapping(contactFieldKey, answerFieldKey) }), _jsx("div", { className: "flex items-end", children: _jsx(Button, { type: "button", variant: "outline", size: "icon-sm", onClick: () => updateMapping(contactFieldKey, undefined), "aria-label": "Remove mapping", title: "Remove mapping", children: _jsx(Trash2, { className: "h-4 w-4" }) }) })] }, contactFieldKey));
+                        }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            const nextField = availableContactFields[0];
+                            const firstAnswerField = fields[0];
+                            if (nextField && firstAnswerField)
+                                updateMapping(nextField.key, firstAnswerField.key);
+                        }, disabled: availableContactFields.length === 0 || fields.length === 0, children: [_jsx(Plus, { className: "h-4 w-4" }), "Add custom field mapping"] })] }))] }));
 }
 function FieldSelect({ label, value, fields, onChange, }) {
     return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsxs("select", { className: "h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", value: value, onChange: (event) => onChange(event.target.value || undefined), children: [_jsx("option", { value: "", children: "Not mapped" }), fields.map((field) => _jsxs("option", { value: field.key, children: [field.label, " (", field.key, ")"] }, field.id))] })] }));
 }
-function SubmissionPreview({ submissions }) {
-    return (_jsxs("div", { className: "rounded-2xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Inbox, { className: "h-4 w-4 text-primary" }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Recent submissions" })] }) }), submissions.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "No public form submissions yet." })) : (_jsx("div", { className: "divide-y divide-border", children: submissions.map((submission) => (_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: submission.definitionName }), _jsx("p", { className: "text-xs text-muted-foreground", children: new Date(submission.submittedAt).toLocaleString() })] }), submission.actionStatus && (_jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Contacts action: ", submission.actionStatus, submission.contactId ? ` · Contact ${submission.contactId}` : ""] })), _jsx("dl", { className: "mt-2 grid gap-2 sm:grid-cols-2", children: Object.entries(submission.answers).map(([key, value]) => (_jsxs("div", { className: "rounded-lg bg-muted/50 p-2 text-xs", children: [_jsx("dt", { className: "font-semibold text-muted-foreground", children: key }), _jsx("dd", { className: "mt-0.5 text-foreground", children: String(value ?? "—") })] }, key))) })] }, submission.id))) }))] }));
+function ImageBlockControls({ item, onChange, }) {
+    const resolveStorageImageMutation = useMutation(captureApi.definitions.resolveStorageImageUrl.mutationOptions());
+    const handleUpload = (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            if (typeof reader.result === "string")
+                onChange({ imageUrl: reader.result, source: { type: "upload" } });
+        };
+        reader.readAsDataURL(file);
+        event.target.value = "";
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Image" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Upload a standalone image and choose its shape." })] }), _jsx("div", { className: "flex justify-center", children: item.imageUrl ? (_jsx("img", { src: item.imageUrl, alt: item.altText ?? "", className: getImageClassName(item) })) : (_jsx("div", { className: cn("flex items-center justify-center border border-dashed border-border bg-muted/30 text-sm text-muted-foreground", getImageClassName(item)), children: "No image" })) }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: "Image source" }), _jsx(AttachImageButton, { hasImage: !!item.imageUrl || item.source?.type === "storage", onUpload: handleUpload, onSelect: (picked) => {
+                            if (picked.kind === "external") {
+                                onChange({ imageUrl: picked.url, source: { type: "url" } });
+                                return;
+                            }
+                            const patch = {
+                                altText: item.altText || picked.name,
+                                source: { type: "storage", storageItemId: picked.itemId },
+                            };
+                            onChange(patch);
+                            void resolveStorageImageMutation.mutateAsync({ itemId: picked.itemId })
+                                .then((result) => {
+                                onChange({ ...patch, imageUrl: result.url });
+                                toast.success("Storage image selected");
+                            })
+                                .catch(() => {
+                                toast.error("Image selected, but preview URL could not be loaded");
+                            });
+                        } })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "image-alt", children: "Alt text" }), _jsx(Input, { id: "image-alt", value: item.altText ?? "", placeholder: "Describe the image", onChange: (event) => onChange({ altText: event.target.value || undefined }) })] }), _jsx(SegmentedControl, { label: "Size", value: item.size ?? "medium", options: [["small", "Small"], ["medium", "Medium"], ["large", "Large"], ["full", "Full"]], onChange: (value) => onChange({ size: value }) }), _jsx(SegmentedControl, { label: "Fit", value: item.fit ?? "cover", options: [["cover", "Fill frame"], ["contain", "Fit image"]], onChange: (value) => onChange({ fit: value }) }), _jsx(SegmentedControl, { label: "Shape", value: item.shape ?? "square", options: [["square", "Square"], ["circle", "Circle"]], onChange: (value) => onChange({ shape: value }) }), _jsx(SegmentedControl, { label: "Alignment", value: item.align ?? "center", options: [["left", "Left"], ["center", "Center"], ["right", "Right"]], onChange: (value) => onChange({ align: value }) })] }));
+}
+function AttachImageButton({ hasImage, onSelect, onUpload, }) {
+    const [open, setOpen] = useState(false);
+    const inputId = useMemo(() => `capture-local-image-${Math.random().toString(36).slice(2)}`, []);
+    let hasStoragePicker = true;
+    try {
+        useAssetPickerHooks();
+    }
+    catch {
+        hasStoragePicker = false;
+    }
+    const buttonLabel = hasImage ? "Replace image" : "Attach image";
+    if (!hasStoragePicker) {
+        return (_jsxs("div", { children: [_jsx("input", { id: inputId, type: "file", accept: "image/*", className: "sr-only", onChange: onUpload }), _jsx(Button, { type: "button", variant: "outline", className: "w-full justify-start", asChild: true, children: _jsxs("label", { htmlFor: inputId, className: "cursor-pointer", children: [_jsx(ImageIcon, { className: "h-4 w-4" }), buttonLabel] }) }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Uses local upload when storage is not configured." })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-start", onClick: () => setOpen(true), children: [_jsx(ImageIcon, { className: "h-4 w-4" }), buttonLabel] }), _jsx(StorageAssetPicker, { open: open, onOpenChange: setOpen, mode: "upload-or-pick", initialDestination: ["capture-images"], ensureInitialDestination: true, mimePrefix: "image/", allowExternalUrl: true, onSelect: (item) => {
+                    onSelect(item);
+                    setOpen(false);
+                } })] }));
+}
+function IconBlockControls({ item, onChange, }) {
+    const [iconSearch, setIconSearch] = useState("");
+    const pickerData = {
+        icon: item.icon,
+        iconType: "lucide",
+        iconColor: item.iconColor ?? "indigo",
+        backgroundColor: "slate",
+    };
+    const filteredIcons = ICON_LIST.filter((icon) => icon.name.toLowerCase().includes(iconSearch.toLowerCase()));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Icon" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Add a standalone visual marker between form items." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(AvatarPreview, { data: pickerData, size: "md" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: item.icon }), _jsx("p", { className: "text-xs text-muted-foreground", children: item.iconColor ?? "indigo" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Icon color" }), _jsx("div", { className: "grid grid-cols-10 gap-2", children: COLORS.map((color) => (_jsx("button", { type: "button", onClick: () => onChange({ iconColor: color.value }), style: { backgroundColor: getColorStyle(color.value).hex }, className: cn("h-6 w-6 rounded-full border border-border transition-all", (item.iconColor ?? "indigo") === color.value
+                                ? "scale-110 ring-2 ring-muted-foreground ring-offset-2"
+                                : "opacity-90 hover:scale-110 hover:opacity-100"), title: color.name, "aria-label": color.name, "aria-pressed": (item.iconColor ?? "indigo") === color.value }, color.value))) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "icon-search", className: "text-sm font-medium text-foreground", children: "Choose icon" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "icon-search", value: iconSearch, onChange: (event) => setIconSearch(event.target.value), placeholder: "Search icons...", className: "h-9 pl-9" })] }), _jsx("div", { className: "max-h-64 overflow-y-auto rounded-lg border border-border p-2", children: _jsxs("div", { className: "grid grid-cols-5 gap-2", children: [filteredIcons.map((icon) => {
+                                    const IconComponent = icon.icon;
+                                    const selected = item.icon === icon.name;
+                                    return (_jsx("button", { type: "button", onClick: () => onChange({ icon: icon.name }), className: cn("flex aspect-square items-center justify-center rounded-lg border transition-colors", selected ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground"), title: icon.name, "aria-label": icon.name, "aria-pressed": selected, children: _jsx(IconComponent, { className: "h-5 w-5" }) }, icon.name));
+                                }), filteredIcons.length === 0 && _jsx("p", { className: "col-span-full py-4 text-center text-sm text-muted-foreground", children: "No icons found" })] }) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Alignment" }), _jsx("div", { className: "grid grid-cols-3 gap-1 rounded-md border border-input bg-muted/40 p-1", role: "group", "aria-label": "Icon alignment", children: [
+                            ["left", "Left"],
+                            ["center", "Center"],
+                            ["right", "Right"],
+                        ].map(([value, label]) => (_jsx("button", { type: "button", className: cn("h-8 rounded-sm px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", item.align === value
+                                ? "bg-background text-foreground shadow-sm"
+                                : "text-muted-foreground hover:bg-background/60 hover:text-foreground"), onClick: () => onChange({ align: value }), "aria-pressed": item.align === value, children: label }, value))) })] })] }));
+}
+function SegmentedControl({ label, value, options, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: label }), _jsx("div", { className: "grid gap-1 rounded-md border border-input bg-muted/40 p-1", style: { gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }, role: "group", "aria-label": label, children: options.map(([optionValue, optionLabel]) => (_jsx("button", { type: "button", className: cn("h-8 rounded-sm px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", value === optionValue
+                        ? "bg-background text-foreground shadow-sm"
+                        : "text-muted-foreground hover:bg-background/60 hover:text-foreground"), onClick: () => onChange(optionValue), "aria-pressed": value === optionValue, children: optionLabel }, optionValue))) })] }));
+}
+function DeleteSelectedItemButton({ onDelete, label }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-start text-destructive hover:text-destructive", onClick: onDelete, children: [_jsx(Trash2, { className: "h-4 w-4" }), label] }));
+}
+function FieldKeyControl({ field, locked, duplicate, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "field-key", children: "Key" }), _jsx("span", { className: "text-xs text-muted-foreground", children: locked ? "Locked after save" : duplicate ? "Must be unique" : "Unique in this form" })] }), _jsx(Input, { id: "field-key", value: field.key, disabled: locked, "aria-invalid": duplicate || undefined, onChange: (event) => onChange(event.target.value) }), duplicate && _jsx("p", { className: "text-xs text-destructive", children: "This key is already used by another field in this form." })] }));
+}
+function RatingFieldControls({ field, onChange, }) {
+    const icon = getRatingIcon(field);
+    const align = getRatingAlign(field);
+    const color = getRatingColor(field);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Rating icon" }), _jsx("div", { className: "grid grid-cols-4 gap-1 rounded-md border border-input bg-muted/40 p-1", role: "group", "aria-label": "Rating icon", children: [
+                            ["star", "Star"],
+                            ["circle", "Circle"],
+                            ["square", "Square"],
+                            ["heart", "Heart"],
+                        ].map(([value, label]) => (_jsx("button", { type: "button", className: cn("h-8 rounded-sm px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", icon === value
+                                ? "bg-background text-foreground shadow-sm"
+                                : "text-muted-foreground hover:bg-background/60 hover:text-foreground"), onClick: () => onChange({ ratingIcon: value }), "aria-pressed": icon === value, children: label }, value))) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Color" }), _jsx("div", { className: "grid grid-cols-9 gap-2", role: "group", "aria-label": "Rating color", children: CAPTURE_RATING_COLORS.map((option) => (_jsx("button", { type: "button", onClick: () => onChange({ ratingColor: option.value }), style: { backgroundColor: option.hex }, className: cn("h-6 w-6 rounded-full border border-border transition-all", color === option.value
+                                ? "scale-110 ring-2 ring-muted-foreground ring-offset-2"
+                                : "opacity-90 hover:scale-110 hover:opacity-100"), title: option.name, "aria-label": option.name, "aria-pressed": color === option.value }, option.value))) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Alignment" }), _jsx("div", { className: "grid grid-cols-3 gap-1 rounded-md border border-input bg-muted/40 p-1", role: "group", "aria-label": "Rating alignment", children: [
+                            ["left", "Left"],
+                            ["center", "Center"],
+                            ["right", "Right"],
+                        ].map(([value, label]) => (_jsx("button", { type: "button", className: cn("h-8 rounded-sm px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", align === value
+                                ? "bg-background text-foreground shadow-sm"
+                                : "text-muted-foreground hover:bg-background/60 hover:text-foreground"), onClick: () => onChange({ ratingAlign: value }), "aria-pressed": align === value, children: label }, value))) })] })] }));
+}
+function FieldLayoutControls({ field, onChange, }) {
+    const layout = getFieldLayout(field);
+    return (_jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { className: "text-sm font-medium text-foreground", children: "Width" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: "Wrap" }), _jsx(Switch, { checked: layout.wrapAfter, onCheckedChange: (checked) => onChange({ wrapAfter: checked }) })] })] }), _jsx("div", { className: "grid grid-cols-3 gap-1 rounded-md border border-input bg-muted/40 p-1", role: "group", "aria-label": "Field width", children: [
+                        ["1/3", "⅓"],
+                        ["1/2", "½"],
+                        ["full", "Full"],
+                    ].map(([value, label]) => (_jsx("button", { type: "button", className: cn("h-8 rounded-sm px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", layout.width === value
+                            ? "bg-background text-foreground shadow-sm"
+                            : "text-muted-foreground hover:bg-background/60 hover:text-foreground"), onClick: () => onChange({ width: value }), "aria-pressed": layout.width === value, children: label }, value))) })] }) }));
+}
+function supportsPlaceholder(field) {
+    return field.type === "text" || field.type === "email" || field.type === "phone" || field.type === "textarea";
+}
+function StaticVisibilityControl({ hidden, onHiddenChange, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: "Visible" }), _jsx(Switch, { checked: !hidden, onCheckedChange: (checked) => onHiddenChange(!checked) })] }));
 }
 function EmptyPanelText({ children }) {
     return _jsx("p", { className: "rounded-xl bg-muted/40 p-3 text-sm text-muted-foreground", children: children });