;\n}\n\nexport function ExpressionRuleItem({\n rule,\n parentId,\n store,\n}: ExpressionRuleItemProps) {\n const availableFields = useAvailableFields();\n\n const selectedField = availableFields.find((f) => f.id === rule.fieldId);\n const fieldCategory = getFieldTypeCategory(selectedField?.type);\n const applicableOperators = getOperatorsForFieldType(selectedField?.type);\n\n const selectedOperator = EXPRESSION_OPERATORS.find(\n (op) => op.value === rule.operator,\n );\n const requiresValue = selectedOperator?.requiresValue ?? true;\n\n const selectedValueField = availableFields.find((f) => f.id === rule.value);\n\n const { updateRule, removeNode, duplicateRule } = store.getState();\n\n const handleFieldChange = (newFieldId: string) => {\n const newField = availableFields.find((f) => f.id === newFieldId);\n const newCategory = getFieldTypeCategory(newField?.type);\n const newOps = getOperatorsForFieldType(newField?.type);\n\n // Reset operator if not applicable to new field type\n const currentOpApplicable = newOps.some((op) => op.value === rule.operator);\n const newOperator = currentOpApplicable ? rule.operator : \"equals\";\n\n // Reset value for type changes\n let newValue = rule.value;\n if (newCategory === \"boolean\") {\n newValue = \"true\";\n } else if (newCategory !== fieldCategory) {\n newValue = \"\";\n }\n\n updateRule(parentId, rule.id, {\n fieldId: newFieldId,\n operator: newOperator,\n value: newValue,\n valueType: newCategory === \"boolean\" ? \"custom\" : rule.valueType,\n });\n };\n\n // Render value input based on field type category\n const renderValueInput = () => {\n if (!requiresValue) return null;\n\n // Field reference mode\n if (rule.valueType !== \"custom\") {\n return (\n \n \n \n updateRule(parentId, rule.id, {\n valueType: \"custom\",\n value: selectedField?.options?.[0]?.value ?? \"\",\n })\n }\n >\n \n \n }\n />\n Use Custom Value\n \n {\n if (val)\n updateRule(parentId, rule.id, {\n value: val as string,\n });\n }}\n >\n \n {selectedValueField?.label}\n \n \n {availableFields\n .filter((f) => f.id !== rule.fieldId)\n .map((field) => (\n \n {field.label}\n \n ))}\n \n \n
\n );\n }\n\n const fieldRefButton = (\n \n \n updateRule(parentId, rule.id, {\n valueType: \"field\",\n value: \"\",\n })\n }\n >\n \n \n }\n />\n Use Field Reference\n \n );\n\n // Fields with options (boolean, select, radio, checkbox-group): render Select dropdown\n if (selectedField?.options && selectedField.options.length > 0) {\n const matchedOption = selectedField.options.find(\n (o) => o.value === rule.value,\n );\n return (\n \n {fieldRefButton}\n {\n if (val) updateRule(parentId, rule.id, { value: val as string });\n }}\n >\n \n {matchedOption?.label ?? rule.value}\n \n \n {selectedField.options.map((opt) => (\n \n {opt.label}\n \n ))}\n \n \n
\n );\n }\n\n // Number fields: render number input\n if (fieldCategory === \"number\") {\n return (\n \n {fieldRefButton}\n \n updateRule(parentId, rule.id, { value: e.target.value })\n }\n />\n
\n );\n }\n\n // Default: text input\n return (\n \n {fieldRefButton}\n \n updateRule(parentId, rule.id, { value: e.target.value })\n }\n />\n
\n );\n };\n\n return (\n \n
{\n if (val) handleFieldChange(val as string);\n }}\n >\n \n {selectedField?.label}\n \n \n {availableFields.map((field) => (\n \n {field.label}\n \n ))}\n \n \n\n {\n if (val)\n updateRule(parentId, rule.id, {\n operator: val as ExpressionOperator,\n });\n }}\n >\n \n {selectedOperator?.label}\n \n \n {applicableOperators.map((op) => (\n \n {op.label}\n \n ))}\n \n \n\n {renderValueInput()}\n\n \n
\n duplicateRule(parentId, rule.id)}\n >\n \n \n }\n />\n Duplicate Rule\n \n\n
\n\n
\n removeNode(parentId, rule.id)}\n >\n \n \n }\n />\n Delete Rule\n \n
{children}
\n \n );\n}\n",
"type": "registry:component",
"target": "components/buzzform/builder/expression-builder/sortable-item.tsx"
},
{
"path": "registry/shadcn/builder/field-icon.tsx",
"content": "\"use client\";\n\nimport React from \"react\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\n\ninterface FieldIconProps extends React.ComponentProps<\"svg\"> {\n type: string;\n size?: number;\n}\n\n/**\n * A statically-analyzable icon picker for the form builder.\n *\n * IMPORTANT: We use a switch statement with literal string props for IconPlaceholder\n * so that the shadcn CLI transformer can identify and replace these with the\n * user's local icon library components during installation.\n */\nexport const FieldIcon = ({ type, size = 16, ...props }: FieldIconProps) => {\n switch (type) {\n case \"text\":\n return (\n \n );\n case \"email\":\n return (\n \n );\n case \"password\":\n return (\n \n );\n case \"textarea\":\n return (\n \n );\n case \"number\":\n return (\n \n );\n case \"checkbox\":\n return (\n \n );\n case \"switch\":\n return (\n \n );\n case \"select\":\n return (\n \n );\n case \"radio\":\n return (\n \n );\n case \"date\":\n return (\n \n );\n case \"tags\":\n return (\n \n );\n case \"group\":\n return (\n \n );\n case \"array\":\n return (\n \n );\n case \"row\":\n return (\n \n );\n case \"tabs\":\n return (\n \n );\n case \"collapsible\":\n return (\n \n );\n case \"upload\":\n return (\n \n );\n\n\n // Contextual icons\n case \"plus\":\n return (\n \n );\n case \"move\":\n return (\n \n );\n\n default:\n return (\n \n );\n }\n};\n",
"type": "registry:component",
"target": "components/buzzform/builder/field-icon.tsx"
},
{
"path": "registry/shadcn/builder/field-sidebar.tsx",
"content": "\"use client\";\n\nimport React from \"react\";\nimport {\n BuilderSidebar,\n DraggableSidebarItem,\n} from \"@buildnbuzz/form-builder-react\";\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n} from \"@/components/ui/sidebar\";\nimport { FieldIcon } from \"./field-icon\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Visual field palette for the form builder.\n * Grouped by category and draggable into the canvas.\n */\nexport const FieldSidebar = () => {\n return (\n \n \n (\n <>\n {Object.entries(groups).map(([category, items]) => (\n \n \n {category}\n \n \n \n {items.map((item) => (\n {\n const disabled = item.disabled;\n\n return (\n \n \n \n {item.label}\n {disabled && (\n \n Coming Soon\n \n )}\n \n \n );\n }}\n />\n ))}\n \n \n \n ))}\n \n )}\n />\n \n \n );\n};\n",
"type": "registry:component",
"target": "components/buzzform/builder/field-sidebar.tsx"
},
{
"path": "registry/shadcn/builder/form-builder.tsx",
"content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n BuilderDndProvider,\n BuilderCanvas as HeadlessCanvas,\n useBuilderStore,\n DefaultBuilderProvider,\n BuilderFormProvider,\n getBrowserLocalStorageProvider,\n} from \"@buildnbuzz/form-builder-react\";\nimport { type BuilderStorageProvider } from \"@buildnbuzz/form-builder-core\";\nimport { SHADCN_BUILDER_REGISTRY } from \"./registry\";\nimport { SiteHeader } from \"./header\";\n\nimport { FieldSidebar } from \"./field-sidebar\";\nimport { NodeWrapper } from \"./node-wrapper\";\nimport { PropertyPanel } from \"./property-panel\";\nimport { DragOverlayItem } from \"./drag-overlay\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Button } from \"@/components/ui/button\";\nimport { useDroppable } from \"@dnd-kit/core\";\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { cn } from \"@/lib/utils\";\nimport { SidebarProvider } from \"@/components/ui/sidebar\";\nimport { CanvasToolbar } from \"./canvas/canvas-toolbar\";\nimport { MobileOverlay } from \"./mobile-overlay\";\nimport { toast } from \"sonner\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyMedia,\n EmptyTitle,\n} from \"@/components/ui/empty\";\n\n// Inline SubmitToastContent\nfunction SubmitToastContent({ data }: { data: Record }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n
\n {copied ? (\n \n ) : (\n \n )}\n \n \n {JSON.stringify(data, null, 2)}\n
\n \n
\n
\n {mode === \"preview\" ? \"Preview Mode\" : \"Edit Mode\"}\n
\n
\n
\n \n (\n {content}\n )}\n />\n \n
\n )}\n \n \n \n );\n};\n\n/**\n * Main Form Builder component that orchestrates the entire UI.\n */\nconst NEW_BUILDER_STORAGE_NAMESPACE = \"buzzform-builder:v2:forms\";\n\nexport const FormBuilder = () => {\n const storageProvider = React.useMemo(() => {\n if (typeof window === \"undefined\") return null;\n try {\n return getBrowserLocalStorageProvider(NEW_BUILDER_STORAGE_NAMESPACE);\n } catch {\n return null;\n }\n }, []);\n\n return (\n \n \n \n );\n};\n\n/**\n * Inner component that uses builder hooks.\n */\nconst FormBuilderContent = ({\n storageProvider,\n}: {\n storageProvider: BuilderStorageProvider | null;\n}) => {\n const mounted = React.useSyncExternalStore(\n () => () => {},\n () => true,\n () => false,\n );\n const containerRef = useRef(null);\n const zoom = useBuilderStore((state) => state.zoom);\n const setZoom = useBuilderStore((state) => state.setZoom);\n const mode = useBuilderStore((s) => s.mode);\n\n const onSubmit = async (data: Record) => {\n await new Promise((r) => setTimeout(r, 500));\n toast(\"Form Submitted!\", {\n description: ,\n duration: 10000,\n });\n };\n\n // Handle Ctrl+Wheel zoom\n useEffect(() => {\n if (!mounted) return;\n const container = containerRef.current;\n if (!container) return;\n\n const handleWheel = (e: WheelEvent) => {\n if (e.ctrlKey) {\n e.preventDefault();\n const delta = e.deltaY * -0.002;\n const nextZoom = Math.round((zoom + delta) * 100) / 100;\n // Clamp zoom between 0.25 and 2\n const clampedZoom = Math.max(0.25, Math.min(2, nextZoom));\n setZoom(clampedZoom);\n }\n };\n\n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n return () => container.removeEventListener(\"wheel\", handleWheel);\n }, [zoom, setZoom, mounted]);\n\n if (!mounted) return null;\n\n return (\n (\n \n )}\n >\n \n \n \n {/* Top Header */}\n
\n\n {/* Main Layout */}\n
\n \n {/* Left Sidebar: Components */}\n
\n \n \n
\n \n
\n
\n \n
\n\n
\n
\n {pendingImport.formName}\n
\n
\n {pendingImport.sourceName}\n
\n
\n \n {pendingImport.nodeCount} nodes\n \n
\n
\n
\n\n
\n {pendingImport.warnings && pendingImport.warnings.length > 0 && (\n
\n \n
\n
\n Legacy Schema Migrated\n \n
\n {pendingImport.warnings.map((warning, idx) => (\n - {warning}
\n ))}\n
\n \n \n )}\n\n
\n
\n \n
\n
\n
\n Replace current workspace?\n
\n
\n Continuing will overwrite any unsaved changes.\n
\n
\n
\n\n
\n \n Cancel\n \n \n
\n
\n
\n
\n
Import JSON
\n
\n Paste a BuzzForm schema or Builder backup JSON.\n
\n
\n\n
\n onChangeValue(event.target.value)}\n placeholder='[\\n { \"type\": \"text\", \"name\": \"email\", \"label\": \"Email\" }\\n]'\n wrap=\"off\"\n className=\"h-full min-h-0 resize-none overflow-x-auto overflow-y-auto border-0 bg-transparent font-mono text-xs whitespace-pre shadow-none field-sizing-fixed focus-visible:ring-0\"\n />\n \n \n \n \n Paste from Clipboard\n \n \n {isImporting ? (\n \n ) : (\n \n )}\n Validate JSON\n \n
\n \n );\n}\n\nexport function FormManagerNewPanel({ onDone }: FormManagerNewPanelProps) {\n const [isImporting, setIsImporting] = React.useState(false);\n const [pendingImport, setPendingImport] =\n React.useState(null);\n const [importError, setImportError] = React.useState(null);\n const [isPasteMode, setIsPasteMode] = React.useState(false);\n const [pastedJson, setPastedJson] = React.useState(\"\");\n\n const fileInputRef = React.useRef(null);\n const clearState = useBuilderStore((state) => state.clearState);\n const loadDocumentState = useBuilderStore((state) => state.loadDocumentState);\n\n const resetImportState = React.useCallback(() => {\n setIsImporting(false);\n setPendingImport(null);\n setImportError(null);\n }, []);\n\n const handleNewForm = () => {\n clearState();\n onDone();\n };\n\n const handleConfirmImport = () => {\n if (!pendingImport) return;\n loadDocumentState(\n pendingImport.state as Parameters[0],\n );\n toast.success(`Imported \"${pendingImport.formName}\"`);\n onDone();\n };\n\n const handleImportClick = () => {\n if (isImporting) return;\n fileInputRef.current?.click();\n };\n\n const handleOpenPasteMode = () => {\n if (isImporting) return;\n setImportError(null);\n setIsPasteMode(true);\n };\n\n const handleClosePasteMode = () => {\n if (isImporting) return;\n setImportError(null);\n setIsPasteMode(false);\n };\n\n const processImportJson = React.useCallback(\n async ({\n json,\n sourceName,\n schemaFileNameHint,\n closePasteModeOnSuccess,\n }: {\n json: string;\n sourceName: string;\n schemaFileNameHint?: string;\n closePasteModeOnSuccess: boolean;\n }) => {\n const startedAt = Date.now();\n setImportError(null);\n setPendingImport(null);\n setIsImporting(true);\n\n try {\n const parsed = parseImportedFormJson(json);\n const importedState =\n schemaFileNameHint && parsed.state.formName === \"Imported Form\"\n ? {\n ...parsed.state,\n formName: schemaFileNameHint,\n }\n : parsed.state;\n\n setPendingImport({\n sourceName,\n formName: importedState.formName,\n nodeCount: Object.keys(importedState.nodes).length,\n state: importedState,\n warnings: parsed.warnings,\n });\n\n if (closePasteModeOnSuccess) {\n setIsPasteMode(false);\n }\n } catch (error) {\n const rawMessage =\n error instanceof Error ? error.message : \"Failed to import JSON.\";\n const message = `Invalid import JSON: ${rawMessage}`;\n setImportError(message);\n toast.error(message);\n } finally {\n const elapsed = Date.now() - startedAt;\n if (elapsed < MIN_IMPORT_FEEDBACK_MS) {\n await new Promise((resolve) =>\n setTimeout(resolve, MIN_IMPORT_FEEDBACK_MS - elapsed),\n );\n }\n setIsImporting(false);\n }\n },\n [],\n );\n\n const handleFileImport = async (\n event: React.ChangeEvent,\n ) => {\n const file = event.target.files?.[0];\n event.target.value = \"\";\n if (!file) return;\n\n const contents = await file.text();\n await processImportJson({\n json: contents,\n sourceName: file.name,\n schemaFileNameHint: toFormNameHint(file.name),\n closePasteModeOnSuccess: false,\n });\n };\n\n const handleImportPastedJson = async () => {\n const trimmedJson = pastedJson.trim();\n if (!trimmedJson) {\n const message = \"Paste JSON content before importing.\";\n setImportError(message);\n toast.error(message);\n return;\n }\n\n await processImportJson({\n json: trimmedJson,\n sourceName: \"Pasted JSON\",\n closePasteModeOnSuccess: true,\n });\n };\n\n const handlePasteFromClipboard = async () => {\n if (typeof navigator === \"undefined\" || !navigator.clipboard?.readText) {\n toast.error(\"Clipboard access is not available. Paste manually.\");\n return;\n }\n\n try {\n const clipboardText = await navigator.clipboard.readText();\n if (!clipboardText.trim()) {\n toast.error(\"Clipboard is empty.\");\n return;\n }\n\n setPastedJson(clipboardText);\n setImportError(null);\n toast.success(\"Pasted JSON from clipboard\");\n } catch {\n toast.error(\"Clipboard access was denied. Paste JSON manually.\");\n }\n };\n\n const handlePasteDropZoneDragOver = (\n event: React.DragEvent,\n ) => {\n event.preventDefault();\n };\n\n const handlePasteDropZoneDrop = async (\n event: React.DragEvent,\n ) => {\n event.preventDefault();\n if (isImporting) return;\n\n const file = event.dataTransfer.files?.[0];\n if (file) {\n try {\n const droppedContents = await file.text();\n if (!droppedContents.trim()) {\n toast.error(\"Dropped file is empty.\");\n return;\n }\n setPastedJson(droppedContents);\n setImportError(null);\n toast.success(`Loaded JSON from \"${file.name}\"`);\n } catch {\n toast.error(\"Failed to read dropped file.\");\n }\n return;\n }\n\n const droppedText = event.dataTransfer.getData(\"text/plain\");\n if (!droppedText.trim()) {\n toast.error(\"Dropped content is empty.\");\n return;\n }\n\n setPastedJson(droppedText);\n setImportError(null);\n toast.success(\"Loaded dropped text\");\n };\n\n React.useEffect(() => resetImportState, [resetImportState]);\n\n const hasPendingImport =\n pendingImport !== null && !isImporting && !importError;\n\n return (\n \n
\n {hasPendingImport ? (\n
\n ) : isPasteMode ? (\n
\n ) : (\n
\n
\n \n \n \n \n Start Blank\n Create a fresh empty form\n \n \n\n \n \n {isImporting ? (\n \n \n
\n ) : (\n \n )}\n \n \n \n {isImporting ? \"Validating File\" : \"Import File\"}\n \n \n {isImporting\n ? \"Checking JSON before import\"\n : \"Load .json from disk\"}\n \n \n \n\n \n \n \n \n \n Import JSON\n Paste schema from clipboard\n \n \n \n )}\n
\n\n {importError && (\n
\n \n Import Failed\n {importError}\n \n )}\n\n
\n
\n {isLoading ? (\n
\n \n Loading saved forms...\n
\n ) : loadError ? (\n
\n
{loadError}
\n
\n
\n ) : forms.length === 0 ? (\n
\n \n \n \n \n No saved forms yet\n \n Forms appear here after you edit and save them locally.\n \n \n \n ) : (\n <>\n
\n
\n \n {forms.map((form) => {\n const isOpening = openingFormId === form.formId;\n const isRemoving = removingFormId === form.formId;\n const isDownloading = downloadingFormId === form.formId;\n const isBusy = isOpening || isRemoving || isDownloading;\n const isCurrent = currentFormId === form.formId;\n\n return (\n
\n \n \n
\n\n \n
\n
\n {form.formName}\n
\n {isCurrent && (\n
Current\n )}\n
\n\n
\n \n {dateFormatter.format(form.updatedAt)}\n
\n
\n handleOpenForm(form.formId)}\n >\n {isOpening ? (\n \n ) : (\n \n )}\n Open\n \n\n \n handleDownloadForm(form)}\n className=\"text-muted-foreground\"\n >\n {isDownloading ? (\n \n ) : (\n \n )}\n \n Download saved form\n \n \n }\n />\n Download\n \n\n \n handleRemoveForm(form)}\n className=\"text-muted-foreground hover:text-destructive\"\n >\n {isRemoving ? (\n \n ) : (\n \n )}\n \n Remove saved form\n \n \n }\n />\n Delete\n \n
\n \n \n
\n \n \n Refresh\n \n
\n \n )}\n \n );\n}\n",
"type": "registry:component",
"target": "components/buzzform/builder/header/form-manager-saved-panel.tsx"
},
{
"path": "registry/shadcn/builder/header/index.tsx",
"content": "\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ThemeToggle } from \"@/components/theme-toggle\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { useBuilderStore } from \"@buildnbuzz/form-builder-react\";\n\nimport { SaveIndicator } from \"./save-indicator\";\nimport { FormManagerDialog } from \"./form-manager-dialog\";\nimport { CloudSaveDialog } from \"./cloud-save-dialog\";\nimport { ExportSheet } from \"../export-sheet\";\nimport type { BuilderStorageProvider } from \"@buildnbuzz/form-builder-core\";\n\nexport function SiteHeader({\n storageProvider,\n}: {\n storageProvider: BuilderStorageProvider | null;\n}) {\n const hasContent = useBuilderStore((state) => state.rootIds.length > 0);\n\n return (\n \n \n
\n
\n
\n \n
\n
\n BuzzForm\n \n
\n Preview\n \n \n \n\n
\n
\n {hasContent && (\n
\n )}\n
\n \n \n \n \n
\n
\n
{renderSlot(DEFAULT_SLOT)}
\n )}\n \n );\n\n return (\n toggleCollapsed(id)}>\n \n \n \n \n \n \n {(rawField.label as string) || \"Array\"}\n \n \n {childrenIds.length}{\" \"}\n {childrenIds.length === 1 ? \"field\" : \"fields\"}\n \n {typeof minItems === \"number\" && (\n \n min {minItems}\n \n )}\n {typeof maxItems === \"number\" && (\n \n max {maxItems}\n \n )}\n
\n\n \n \n \n\n \n \n {!!rawField.description && (\n \n {rawField.description as string}\n
\n )}\n {renderDropZone()}\n \n \n \n \n );\n};\n",
"type": "registry:component",
"target": "components/buzzform/builder/layout/array-renderer.tsx"
},
{
"path": "registry/shadcn/builder/layout/collapsible-renderer.tsx",
"content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { useDroppable } from \"@dnd-kit/core\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\nimport {\n DEFAULT_SLOT,\n useBuilderStore,\n type BuilderNodeRendererProps,\n} from \"@buildnbuzz/form-builder-react\";\n\nconst spacingMap = {\n sm: \"space-y-2\",\n md: \"space-y-3\",\n lg: \"space-y-4\",\n};\n\n/**\n * Visual renderer for 'collapsible' container fields.\n * Includes multiple UI variants natively integrated with builder store state tracking.\n */\nexport const CollapsibleRenderer = ({\n id,\n field,\n childrenIds,\n renderSlot,\n}: BuilderNodeRendererProps) => {\n const rawField = field as unknown as Record;\n const uiConfig = (rawField.ui as Record | undefined) ?? {};\n\n const label = rawField.label as string | undefined;\n const variant =\n (uiConfig.variant as \"ghost\" | \"bordered\" | \"card\" | \"flat\" | undefined) ??\n \"bordered\";\n const spacingConfig = uiConfig.spacing as string | undefined;\n const spacingExtracted =\n spacingConfig && spacingConfig in spacingMap\n ? (spacingConfig as keyof typeof spacingMap)\n : \"md\";\n\n const defaultCollapsed = (rawField.collapsed as boolean | undefined) ?? false;\n\n const isCollapsed = useBuilderStore(\n (s) => s.collapsedNodes[id] ?? defaultCollapsed,\n );\n const toggleCollapsed = useBuilderStore((s) => s.toggleCollapsed);\n const setCollapsed = useBuilderStore((s) => s.setCollapsed);\n\n const initializedRef = useRef(false);\n useEffect(() => {\n if (!initializedRef.current) {\n initializedRef.current = true;\n if (defaultCollapsed) {\n setCollapsed(id, true);\n }\n }\n }, [id, defaultCollapsed, setCollapsed]);\n\n const { setNodeRef, isOver } = useDroppable({\n id: `${id}-dropzone`,\n data: { type: \"collapsible\", parentId: id, parentSlot: DEFAULT_SLOT },\n });\n\n const isEmpty = childrenIds.length === 0;\n\n const renderDropZone = () => (\n \n {isEmpty ? (\n \n \n Drop fields here\n \n \n ) : (\n \n {renderSlot(DEFAULT_SLOT)}\n
\n )}\n \n );\n\n const renderHeaderContent = () => (\n \n \n \n {label || \"Collapsible\"}\n \n {!isEmpty && (\n \n ({childrenIds.length} {childrenIds.length === 1 ? \"field\" : \"fields\"})\n \n )}\n
\n );\n\n const renderChevron = (size: number = 16) => (\n \n );\n\n // === GHOST VARIANT ===\n if (variant === \"ghost\") {\n return (\n toggleCollapsed(id)}>\n \n
\n {renderHeaderContent()}\n {renderChevron(14)}\n \n
\n {renderDropZone()}
\n \n
\n
\n {renderHeaderContent()}\n {renderChevron(14)}\n \n
\n {renderDropZone()}
\n \n
\n {renderSlot(DEFAULT_SLOT)}\n
\n )}\n \n );\n\n // === FLAT VARIANT ===\n if (variant === \"flat\") {\n return (\n \n {label && (\n
\n \n {label as string}\n
\n )}\n
{renderDropZone()}
\n
\n {label && (\n
\n \n {label as string}\n
\n )}\n {renderDropZone()}\n
\n {label && (\n
\n \n \n \n {label as string}\n \n
\n \n \n )}\n
\n {renderDropZone()}
\n \n
\n \n {label as string}\n
\n \n \n \n )}\n \n {renderDropZone()}\n \n \n \n );\n};\n",
"type": "registry:component",
"target": "components/buzzform/builder/layout/group-renderer.tsx"
},
{
"path": "registry/shadcn/builder/layout/row-renderer.tsx",
"content": "\"use client\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\nimport { horizontalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { cn } from \"@/lib/utils\";\nimport { IconPlaceholder } from \"@/components/icon-placeholder\";\nimport {\n DEFAULT_SLOT,\n type BuilderNodeRendererProps,\n} from \"@buildnbuzz/form-builder-react\";\n\n/**\n * Visual renderer for 'row' layout fields.\n * Displays children in a horizontal grid.\n */\nexport const RowRenderer = ({\n id,\n renderSlot,\n childrenIds,\n}: BuilderNodeRendererProps) => {\n const { setNodeRef, isOver } = useDroppable({\n id: `${id}-dropzone`,\n data: { type: \"row\", parentId: id, parentSlot: DEFAULT_SLOT },\n });\n\n const isEmpty = childrenIds.length === 0;\n\n return (\n \n {/* Header */}\n
\n \n Row\n
\n\n {/* Drop zone container */}\n
\n {isEmpty ? (\n \n Drop fields here\n
\n ) : (\n renderSlot(DEFAULT_SLOT, horizontalListSortingStrategy)\n )}\n {description}
\n )}\n\n {isEmpty ? (\n \n \n Drop fields in this tab\n \n \n ) : (\n renderSlot(slot)\n )}\n \n );\n}\n\n/**\n * Visual renderer for 'tabs' fields.\n * Orchestrates multiple slots as tabs.\n */\nexport const TabsRenderer = ({\n id,\n field,\n renderSlot,\n}: BuilderNodeRendererProps) => {\n const tabsField = field as TabsField;\n const tabs = useMemo(() => tabsField.tabs ?? [], [tabsField.tabs]);\n const slots = useMemo(() => getTabSlotKeys(tabs), [tabs]);\n\n const activeSlotFromStore = useBuilderStore(\n (state) => state.activeTabs[id] ?? null,\n );\n const setActiveTab = useBuilderStore((state) => state.setActiveTab);\n const tabChildren = useBuilderStore(\n (state) => state.nodes[id]?.children ?? {},\n );\n\n const defaultSlot = useMemo(() => {\n if (slots.length === 0) return \"\";\n const configuredDefault = tabsField.ui?.defaultTab;\n const enabledSlots = slots.filter(\n (_, index) => tabs[index]?.disabled !== true,\n );\n const enabledFallbackSlot = enabledSlots[0] ?? slots[0];\n\n if (typeof configuredDefault === \"number\") {\n const index = Math.max(0, Math.min(slots.length - 1, configuredDefault));\n return tabs[index]?.disabled === true\n ? enabledFallbackSlot\n : slots[index];\n }\n\n if (typeof configuredDefault === \"string\") {\n const index = tabs.findIndex((tab) => tab.name === configuredDefault);\n if (index >= 0 && tabs[index]?.disabled !== true) {\n return slots[index];\n }\n }\n\n return enabledFallbackSlot;\n }, [tabsField.ui?.defaultTab, tabs, slots]);\n\n const activeSlot =\n activeSlotFromStore && slots.includes(activeSlotFromStore)\n ? activeSlotFromStore\n : defaultSlot;\n\n useEffect(() => {\n if (!activeSlot) return;\n if (activeSlotFromStore !== activeSlot) {\n setActiveTab(id, activeSlot);\n }\n }, [activeSlot, activeSlotFromStore, id, setActiveTab]);\n\n if (tabs.length === 0) {\n return (\n \n
\n \n Tabs\n
\n
\n Add at least one tab in the properties panel.\n
\n
\n
\n \n Tabs\n
\n\n
val && setActiveTab(id, val)}\n className=\"w-full\"\n >\n \n {tabs.map((tab, index) => {\n const slot = slots[index];\n const childCount = tabChildren[slot]?.length ?? 0;\n\n return (\n \n \n {getTabDisplayLabel(tab, index)}\n \n {childCount}\n \n {tab.disabled && (\n \n )}\n \n \n );\n })}\n \n\n {tabs.map((tab, index) => {\n const slot = slots[index];\n const childrenIdsForSlot = tabChildren[slot] || [];\n\n return (\n \n {tab.name && (\n \n Key: {tab.name}\n {tab.disabled && (\n \n \n Disabled\n \n )}\n
\n )}\n \n \n );\n })}\n \n \n
\n
\n
\n\n
\n
\n \n
\n
\n
\n Best on Desktop\n
\n
\n BuzzForm Builder requires a larger screen to provide the best\n editing experience. Please switch to a desktop or tablet.\n
\n
\n
\n
\n
\n
{\n const entry = node\n ? getRegistryEntry(registry, node.field.type)\n : null;\n const label =\n entry?.sidebar.label ??\n (id === \"form\" ? \"Form Settings\" : \"Properties\");\n\n const defaultValues = flattenFieldToFormValues(\n data as unknown as Field,\n schema,\n );\n\n return (\n <>\n \n {node && entry ? (\n
\n
\n {node && (\n \n )}\n
\n
\n \n {label}\n \n \n Properties\n \n
\n
\n ) : (\n
\n
\n \n
\n
\n \n Form Settings\n \n \n Configuration\n \n
\n
\n )}\n
\n
\n \n {schema.length > 0 ? (\n
\n \n \n \n \n ) : (\n \n \n No properties available\n \n
\n )}\n \n