54:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 55:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}] 4d:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}] 4e:["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable"}]]}]}] 4f:["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}] 50:["$","li","fumadocs-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/fumadocs-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"fumadocs-ui"}]]}]}] 51:["$","li","zustand",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zustand","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zustand"}]]}]}] 52:["$","$L54",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/all","alert","badge","button","card","checkbox","collapsible","dialog","empty","field","input","scroll-area","select","separator","sheet","sidebar","sonner","spinner","switch","tabs","textarea","tooltip"]}] 56:T2d19,"use client"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useBuilderStore, useUndoRedo } from "@buildnbuzz/form-builder-react"; import { IconPlaceholder } from "@/components/icon-placeholder"; /** * Floating canvas toolbar at bottom-center of the canvas area. * Provides undo/redo, mode toggle, viewport switching, and zoom controls. */ export function CanvasToolbar() { const viewport = useBuilderStore((state) => state.viewport); const setViewport = useBuilderStore((state) => state.setViewport); const zoom = useBuilderStore((state) => state.zoom); const setZoom = useBuilderStore((state) => state.setZoom); const mode = useBuilderStore((state) => state.mode); const setMode = useBuilderStore((state) => state.setMode); const { undo, redo, canUndo, canRedo } = useUndoRedo(); const isPreview = mode === "preview"; return (

{/* Undo/Redo */}

undo()} disabled={!canUndo} className={cn( "h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50", !canUndo && "opacity-50 cursor-not-allowed", )} > } />

Undo

Ctrl+Z

redo()} disabled={!canRedo} className={cn( "h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50", !canRedo && "opacity-50 cursor-not-allowed", )} > } />

Redo

Ctrl+Shift+Z

{/* Mode Toggle */} setMode(isPreview ? "edit" : "preview")} className={cn( "h-8 w-8 rounded-full", !isPreview && "text-muted-foreground hover:text-foreground hover:bg-muted/50", )} > {isPreview ? ( ) : ( )} } />

{isPreview ? "Back to Edit Mode" : "Preview Form"}

{/* Viewport Toggles */}

{/* Desktop */} setViewport("desktop")} className={cn( "h-8 w-8 rounded-full", viewport !== "desktop" && "text-muted-foreground hover:text-foreground hover:bg-muted/50", )} > } />

Desktop (100%)

{/* Tablet */} setViewport("tablet")} className={cn( "h-8 w-8 rounded-full", viewport !== "tablet" && "text-muted-foreground hover:text-foreground hover:bg-muted/50", )} > } />

Tablet (768px)

{/* Mobile */} setViewport("mobile")} className={cn( "h-8 w-8 rounded-full", viewport !== "mobile" && "text-muted-foreground hover:text-foreground hover:bg-muted/50", )} > } />

Mobile (375px)

{/* Zoom Controls */}

setZoom(zoom - 0.1)} > } /> Zoom Out

{Math.round(zoom * 100)}%

setZoom(zoom + 0.1)} > } /> Zoom In {/* Reset Zoom */}

setZoom(0.9)} > } /> Reset Zoom

); } 57:Tb50,"use client"; import { useBuilderStore, useBuilderContext, } from "@buildnbuzz/form-builder-react"; import { FieldIcon } from "./field-icon"; import { cn } from "@/lib/utils"; /** * Rich drag overlay item that provides visual feedback during DnD. * Matches legacy DragOverlayItem but integrates with the new registry pattern. */ export function DragOverlayItem({ activeId, activeData, }: { activeId: string; activeData: Record; }) { const { registry } = useBuilderContext(); const node = useBuilderStore((s) => s.nodes[activeId]); const data = activeData as Record; const isFromSidebar = data?.from === "sidebar"; const type = (isFromSidebar ? data?.type : node?.field?.type) as | string | undefined; const entry = type ? registry[type] : null; const label = entry?.sidebar?.label ?? (typeof type === "string" ? type : "Field"); // Get field name for existing fields let fieldName: string | undefined; if (!isFromSidebar && node && "name" in node.field) { fieldName = node.field.name; } return (

{/* Icon container */}

{type ? ( ) : ( )}

{/* Text content */}

{isFromSidebar ? `New ${label}` : (fieldName ?? label)}

{isFromSidebar ? ( <> Adding new, press Esc to cancel ) : ( "Moving field" )}

); } 58:T2637,"use client"; import * as React from "react"; import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock"; import { toast } from "sonner"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { generateComponentCode, nodesToFields, toSafeFileName, } from "@buildnbuzz/form-builder-core"; import { useBuilderStore, downloadTextFile, } from "@buildnbuzz/form-builder-react"; const starterCommand = "npx shadcn@latest add https://form.buildnbuzz.com/r/all.json"; export function ExportSheet() { const [open, setOpen] = React.useState(false); const nodes = useBuilderStore((state) => state.nodes); const rootIds = useBuilderStore((state) => state.rootIds); const formName = useBuilderStore((state) => state.formName); const outputConfig = useBuilderStore((state) => state.outputConfig); const componentCode = React.useMemo(() => { if (!open) return ""; return generateComponentCode(nodes, rootIds, formName, outputConfig); }, [open, nodes, rootIds, formName, outputConfig]); const schemaJson = React.useMemo(() => { if (!open) return ""; const fields = nodesToFields(nodes, rootIds); const schema = { title: formName || "BuzzForm Export", fields, }; return JSON.stringify(schema, null, 2); }, [open, nodes, rootIds, formName]); const downloadSchema = React.useCallback(() => { if (!schemaJson) return; const fileName = `${toSafeFileName(formName)}.json`; downloadTextFile(schemaJson, fileName, "application/json"); toast.success("BuzzForm schema exported"); }, [schemaJson, formName]); const downloadCode = React.useCallback(() => { if (!componentCode) return; const fileName = `${toSafeFileName(formName)}.tsx`; downloadTextFile(componentCode, fileName, "text/plain;charset=utf-8"); toast.success("Component code exported"); }, [componentCode, formName]); const copyToClipboard = React.useCallback((text: string, label: string) => { navigator.clipboard.writeText(text); toast.success(`${label} copied to clipboard`); }, []); return ( Export } /> Export Form Export production-ready TSX or portable BuzzForm schema JSON. App Code .tsx BuzzForm Schema .json

Required setup

BuzzForm schema

Pure schema JSON for copy/paste import and runtime form generation.

); } 59:T260e,"use client"; import React from "react"; import { useDataField } from "@buildnbuzz/form-react"; import type { ExpressionGroup } from "@buildnbuzz/form-builder-core"; import { Checkbox } from "@/components/ui/checkbox"; import { Switch } from "@/components/ui/switch"; import { Button } from "@/components/ui/button"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; import { ExpressionBuilder } from "./index"; type ExpressionValue = boolean | undefined | ExpressionGroup; function isExpressionGroup(value: unknown): value is ExpressionGroup { return ( typeof value === "object" && value !== null && (value as ExpressionGroup).type === "group" ); } /** * Dual-mode property widget for boolean/expression fields. * * - Static mode: renders a Checkbox or Switch (per `field.type`) with a ⚡ button. * - Expression mode: renders an "Expression active" badge with Edit and Clear buttons. * * Toggling ⚡ opens the ExpressionBuilder dialog. Saving stores an ExpressionGroup. * Clearing reverts to `false` (static boolean). */ export function ExpressionCheckbox() { const { field, fieldApi, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleBlur, handleChange, } = useDataField(); const value = fieldApi.state.value as ExpressionValue; const disabled = isDisabled || isReadOnly; const isExpression = isExpressionGroup(value); const boolValue = isExpression ? false : ((value as boolean | undefined) ?? false); const fieldType = (field as { type?: string }).type; const ui = ( field as { ui?: { alignment?: "start" | "end" | "between"; autoFocus?: boolean; className?: string; expressionMode?: "default" | "only" | "none"; }; } ).ui; const alignment = ui?.alignment ?? "between"; const expressionMode = ui?.expressionMode ?? "default"; const handleSave = (group: ExpressionGroup) => handleChange(group); const handleClear = () => handleChange(expressionMode === "only" ? undefined : false); // 1. The active expression node (replaces the input) const activeControlNode = (

); const expressionBar = isExpression ? (

Dynamic Expression

} />

) : expressionMode === "only" && !isExpression ? (

Set Expression } />

) : null; // 2. The static control node const switchNode = ( { handleChange(checked); handleBlur(); }} disabled={disabled} aria-invalid={isInvalid} aria-describedby={ariaDescribedBy} aria-readonly={isReadOnly} autoFocus={ui?.autoFocus} size="sm" /> ); const checkboxNode = ( { handleChange(!!checked); handleBlur(); }} disabled={disabled} aria-invalid={isInvalid} aria-describedby={ariaDescribedBy} aria-readonly={isReadOnly} autoFocus={ui?.autoFocus} /> ); const emptyControlNode = (

); const controlNode = isExpression ? activeControlNode : expressionMode === "only" ? emptyControlNode : fieldType === "switch" ? switchNode : checkboxNode; // 3. The content element (label, description, error, expression bar) const isSwitchBetween = fieldType === "switch" && alignment === "between"; const contentElement = ( {label && ( {isSwitchBetween && isRequired && *} {label} {!isSwitchBetween && isRequired && *} )} {description && !isInvalid && ( {description} )} {isInvalid && } {expressionBar} ); // 4. Assemble the layout return (

{fieldType === "switch" ? ( alignment === "start" ? ( <> {controlNode} {contentElement} ) : ( <> {contentElement} {controlNode} ) ) : ( // Default Checkbox layout <> {controlNode} {contentElement} )} {/* Lightning bolt trigger (only visible when static mode and default mode) */} {!isExpression && expressionMode === "default" && ( } /> )}

); } 5a:T2485,"use client"; import React from "react"; import type { StoreApi } from "zustand"; import { cn } from "@/lib/utils"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyMedia, } from "@/components/ui/empty"; import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { type ExpressionGroup } from "@buildnbuzz/form-builder-core"; import { type ExpressionStoreState } from "@buildnbuzz/form-builder-react"; import { Card, CardContent, CardFooter } from "@/components/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { SortableItem } from "./sortable-item"; import { ExpressionRuleItem } from "./expression-rule"; interface ExpressionGroupItemProps { group: ExpressionGroup; parentId?: string; isRoot?: boolean; store: StoreApi; } export function ExpressionGroupItem({ group, parentId, isRoot = false, store, }: ExpressionGroupItemProps) { const [isOpen, setIsOpen] = React.useState(true); const { updateGroupOperator, removeNode, addRule, addGroup, duplicateGroup, } = store.getState(); const headerContent = (

{!isRoot && (

{isOpen ? ( ) : ( )}

)}

e.stopPropagation()}>

{isRoot ? "of the following:" : "Expression Group"} {!isRoot && parentId && (

e.stopPropagation()} > { e.stopPropagation(); duplicateGroup(parentId, group.id); }} > } /> Duplicate Expression Group

{ e.stopPropagation(); removeNode(parentId, group.id); }} > } /> Delete Expression Group

)}

); const mainContent = group.children.length === 0 ? ( No rules added Click the buttons below to add rules ) : ( c.id)} strategy={verticalListSortingStrategy} >

{group.children.map((child) => ( {child.type === "group" ? ( ) : ( )} ))}

); const footerActions = (

); if (isRoot) { return (

{headerContent}

{mainContent}

{footerActions}

); } return (

{mainContent} {footerActions}

); } 5b:T292e,"use client"; import type { StoreApi } from "zustand"; import { type ExpressionRule, type ExpressionOperator, EXPRESSION_OPERATORS, getFieldTypeCategory, getOperatorsForFieldType, } from "@buildnbuzz/form-builder-core"; import { useAvailableFields, type ExpressionStoreState, } from "@buildnbuzz/form-builder-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { IconPlaceholder } from "@/components/icon-placeholder"; interface ExpressionRuleItemProps { rule: ExpressionRule; parentId: string; store: StoreApi; } export function ExpressionRuleItem({ rule, parentId, store, }: ExpressionRuleItemProps) { const availableFields = useAvailableFields(); const selectedField = availableFields.find((f) => f.id === rule.fieldId); const fieldCategory = getFieldTypeCategory(selectedField?.type); const applicableOperators = getOperatorsForFieldType(selectedField?.type); const selectedOperator = EXPRESSION_OPERATORS.find( (op) => op.value === rule.operator, ); const requiresValue = selectedOperator?.requiresValue ?? true; const selectedValueField = availableFields.find((f) => f.id === rule.value); const { updateRule, removeNode, duplicateRule } = store.getState(); const handleFieldChange = (newFieldId: string) => { const newField = availableFields.find((f) => f.id === newFieldId); const newCategory = getFieldTypeCategory(newField?.type); const newOps = getOperatorsForFieldType(newField?.type); // Reset operator if not applicable to new field type const currentOpApplicable = newOps.some((op) => op.value === rule.operator); const newOperator = currentOpApplicable ? rule.operator : "equals"; // Reset value for type changes let newValue = rule.value; if (newCategory === "boolean") { newValue = "true"; } else if (newCategory !== fieldCategory) { newValue = ""; } updateRule(parentId, rule.id, { fieldId: newFieldId, operator: newOperator, value: newValue, valueType: newCategory === "boolean" ? "custom" : rule.valueType, }); }; // Render value input based on field type category const renderValueInput = () => { if (!requiresValue) return null; // Field reference mode if (rule.valueType !== "custom") { return (

updateRule(parentId, rule.id, { valueType: "custom", value: selectedField?.options?.[0]?.value ?? "", }) } > } /> Use Custom Value

); } const fieldRefButton = ( updateRule(parentId, rule.id, { valueType: "field", value: "", }) } > } /> Use Field Reference ); // Fields with options (boolean, select, radio, checkbox-group): render Select dropdown if (selectedField?.options && selectedField.options.length > 0) { const matchedOption = selectedField.options.find( (o) => o.value === rule.value, ); return (

{fieldRefButton}

); } // Number fields: render number input if (fieldCategory === "number") { return (

{fieldRefButton} updateRule(parentId, rule.id, { value: e.target.value }) } />

); } // Default: text input return (

{fieldRefButton} updateRule(parentId, rule.id, { value: e.target.value }) } />

); }; return (

{renderValueInput()}

duplicateRule(parentId, rule.id)} > } /> Duplicate Rule

removeNode(parentId, rule.id)} > } /> Delete Rule

); } 5c:Te72,"use client"; import React, { useState } from "react"; import { DndContext, closestCorners } from "@dnd-kit/core"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { IconPlaceholder } from "@/components/icon-placeholder"; import type { ExpressionGroup } from "@buildnbuzz/form-builder-core"; import { useExpressionStore, useExpressionDnd, } from "@buildnbuzz/form-builder-react"; import { ExpressionGroupItem } from "./expression-group"; export { ExpressionGroupItem } from "./expression-group"; export { ExpressionRuleItem } from "./expression-rule"; export { SortableItem } from "./sortable-item"; export interface ExpressionBuilderProps { initialValue?: ExpressionGroup; onSave: (group: ExpressionGroup) => void; trigger?: React.ReactElement; } export function ExpressionBuilder({ initialValue, onSave, trigger, }: ExpressionBuilderProps) { const [open, setOpen] = useState(false); const { store, rootGroup } = useExpressionStore(initialValue, open); const { sensors, handleDragOver, handleDragEnd } = useExpressionDnd(store); const handleSave = () => { onSave(store.getState().rootGroup); setOpen(false); }; return ( ); } 5d:T50f,"use client"; import React from "react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { IconPlaceholder } from "@/components/icon-placeholder"; interface SortableItemProps { id: string; children: React.ReactNode; } export function SortableItem({ id, children }: SortableItemProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id }); const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1, }; return (

{children}

); } 5e:T1888,"use client"; import React from "react"; import { IconPlaceholder } from "@/components/icon-placeholder"; interface FieldIconProps extends React.ComponentProps<"svg"> { type: string; size?: number; } /** * A statically-analyzable icon picker for the form builder. * * IMPORTANT: We use a switch statement with literal string props for IconPlaceholder * so that the shadcn CLI transformer can identify and replace these with the * user's local icon library components during installation. */ export const FieldIcon = ({ type, size = 16, ...props }: FieldIconProps) => { switch (type) { case "text": return ( ); case "email": return ( ); case "password": return ( ); case "textarea": return ( ); case "number": return ( ); case "checkbox": return ( ); case "switch": return ( ); case "select": return ( ); case "radio": return ( ); case "date": return ( ); case "tags": return ( ); case "group": return ( ); case "array": return ( ); case "row": return ( ); case "tabs": return ( ); case "collapsible": return ( ); case "upload": return ( ); // Contextual icons case "plus": return ( ); case "move": return ( ); default: return ( ); } }; 5f:Tcea,"use client"; import React from "react"; import { BuilderSidebar, DraggableSidebarItem, } from "@buildnbuzz/form-builder-react"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, } from "@/components/ui/sidebar"; import { FieldIcon } from "./field-icon"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; /** * Visual field palette for the form builder. * Grouped by category and draggable into the canvas. */ export const FieldSidebar = () => { return ( ( <> {Object.entries(groups).map(([category, items]) => ( {category} {items.map((item) => ( { const disabled = item.disabled; return ( {item.label} {disabled && ( Coming Soon )} ); }} /> ))} ))} )} /> ); }; 60:T2a9b,"use client"; import React, { useEffect, useRef, useState } from "react"; import { BuilderDndProvider, BuilderCanvas as HeadlessCanvas, useBuilderStore, DefaultBuilderProvider, BuilderFormProvider, getBrowserLocalStorageProvider, } from "@buildnbuzz/form-builder-react"; import { type BuilderStorageProvider } from "@buildnbuzz/form-builder-core"; import { SHADCN_BUILDER_REGISTRY } from "./registry"; import { SiteHeader } from "./header"; import { FieldSidebar } from "./field-sidebar"; import { NodeWrapper } from "./node-wrapper"; import { PropertyPanel } from "./property-panel"; import { DragOverlayItem } from "./drag-overlay"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Button } from "@/components/ui/button"; import { useDroppable } from "@dnd-kit/core"; import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { cn } from "@/lib/utils"; import { SidebarProvider } from "@/components/ui/sidebar"; import { CanvasToolbar } from "./canvas/canvas-toolbar"; import { MobileOverlay } from "./mobile-overlay"; import { toast } from "sonner"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Empty, EmptyContent, EmptyDescription, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; // Inline SubmitToastContent function SubmitToastContent({ data }: { data: Record }) { const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(JSON.stringify(data, null, 2)); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (

        {JSON.stringify(data, null, 2)}

); } const EmptyCanvas = () => { return ( Empty Canvas Drag components from the left sidebar to start building your form. ); }; interface WindowFrameProps { children: React.ReactNode; className?: string; } export function WindowFrame({ children, className }: WindowFrameProps) { const viewport = useBuilderStore((state) => state.viewport); const zoom = useBuilderStore((state) => state.zoom); const mode = useBuilderStore((state) => state.mode); const getViewportWidth = () => { switch (viewport) { case "mobile": return "375px"; case "tablet": return "768px"; default: return "100%"; } }; return (

{mode === "preview" ? "Preview Mode" : "Edit Mode"}

{/* Content Area */} {children}

); } import { PreviewForm } from "./preview/preview-form"; /** * Centered frame for the canvas to simulate different viewports. */ const CanvasFrame = () => { const rootIds = useBuilderStore((s) => s.rootIds); const mode = useBuilderStore((s) => s.mode); const selectNode = useBuilderStore((s) => s.selectNode); const isPreviewMode = mode === "preview"; const { setNodeRef } = useDroppable({ id: "root", disabled: isPreviewMode, }); const handleBackgroundClick = () => { if (!isPreviewMode) { selectNode(null); } }; return (

{rootIds.length === 0 ? ( ) : isPreviewMode ? ( ) : (

( {content} )} />

)}

); }; /** * Main Form Builder component that orchestrates the entire UI. */ const NEW_BUILDER_STORAGE_NAMESPACE = "buzzform-builder:v2:forms"; export const FormBuilder = () => { const storageProvider = React.useMemo(() => { if (typeof window === "undefined") return null; try { return getBrowserLocalStorageProvider(NEW_BUILDER_STORAGE_NAMESPACE); } catch { return null; } }, []); return ( ); }; /** * Inner component that uses builder hooks. */ const FormBuilderContent = ({ storageProvider, }: { storageProvider: BuilderStorageProvider | null; }) => { const mounted = React.useSyncExternalStore( () => () => {}, () => true, () => false, ); const containerRef = useRef(null); const zoom = useBuilderStore((state) => state.zoom); const setZoom = useBuilderStore((state) => state.setZoom); const mode = useBuilderStore((s) => s.mode); const onSubmit = async (data: Record) => { await new Promise((r) => setTimeout(r, 500)); toast("Form Submitted!", { description: , duration: 10000, }); }; // Handle Ctrl+Wheel zoom useEffect(() => { if (!mounted) return; const container = containerRef.current; if (!container) return; const handleWheel = (e: WheelEvent) => { if (e.ctrlKey) { e.preventDefault(); const delta = e.deltaY * -0.002; const nextZoom = Math.round((zoom + delta) * 100) / 100; // Clamp zoom between 0.25 and 2 const clampedZoom = Math.max(0.25, Math.min(2, nextZoom)); setZoom(clampedZoom); } }; container.addEventListener("wheel", handleWheel, { passive: false }); return () => container.removeEventListener("wheel", handleWheel); }, [zoom, setZoom, mounted]); if (!mounted) return null; return ( ( )} >

{/* Top Header */} {/* Main Layout */}

{/* Left Sidebar: Components */}

{/* Central Canvas */}

{/* Right Sidebar: Properties */}

); }; 61:Tf61,"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, } from "@/components/ui/dialog"; import { HugeiconsIcon } from "@hugeicons/react"; import { CloudServerIcon } from "@hugeicons/core-free-icons"; import { Sparkles } from "lucide-react"; import { joinWaitlist } from "@/app/(builder)/lib/actions"; import { toast } from "sonner"; import { createSchema, InferType } from "@buildnbuzz/buzzform"; import { Form, FormContent, FormFields, FormSubmit, FormAction, } from "@/registry/base/form"; import Link from "next/link"; const waitlistSchema = createSchema([ { type: "email", name: "email", label: "Email Address", placeholder: "you@example.com", required: true, description: ( By joining, you agree to our{" "} Terms {" "} and{" "} Privacy Policy . ), }, ]); export type WaitlistData = InferType; export function CloudSaveDialog() { const [open, setOpen] = useState(false); const handleSubmit = async (data: WaitlistData) => { try { const result = await joinWaitlist(data.email); if (result.error) { toast.error(result.error); } else { toast.success(result.message || "You've been added to the waitlist!"); setOpen(false); } } catch { toast.error("Something went wrong. Please try again."); } }; return ( ); } 62:Tc05,"use client"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { FormManagerNewPanel } from "./form-manager-new-panel"; import { FormManagerSavedPanel } from "./form-manager-saved-panel"; import type { BuilderStorageProvider } from "@buildnbuzz/form-builder-core"; export function FormManagerDialog({ storageProvider, }: { storageProvider: BuilderStorageProvider | null; }) { const [open, setOpen] = React.useState(false); const handleDone = React.useCallback(() => setOpen(false), []); return ( ); } 63:T49ec,"use client"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Spinner } from "@/components/ui/spinner"; import { Textarea } from "@/components/ui/textarea"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { useBuilderStore } from "@buildnbuzz/form-builder-react"; import { toast } from "sonner"; import { parseImportedFormJson, type ParsedImportPayload, } from "@buildnbuzz/form-builder-core"; const MIN_IMPORT_FEEDBACK_MS = 500; type PendingImport = { sourceName: string; formName: string; nodeCount: number; state: ParsedImportPayload["state"]; warnings?: string[]; }; type FormManagerNewPanelProps = { onDone: () => void; }; type FormManagerPendingImportStateProps = { pendingImport: PendingImport; isImporting: boolean; onConfirmImport: () => void; onClearSelection: () => void; }; type FormManagerPasteImportStateProps = { value: string; isImporting: boolean; onChangeValue: (value: string) => void; onBack: () => void; onPasteFromClipboard: () => void; onImport: () => void; onDragOver: (event: React.DragEvent) => void; onDrop: (event: React.DragEvent) => void; }; function FormManagerPendingImportState({ pendingImport, isImporting, onConfirmImport, onClearSelection, }: FormManagerPendingImportStateProps) { return (

{pendingImport.formName}

{pendingImport.sourceName}

{pendingImport.nodeCount} nodes

{pendingImport.warnings && pendingImport.warnings.length > 0 && (

Legacy Schema Migrated

{warning}

)}

Replace current workspace?

Continuing will overwrite any unsaved changes.

); } function FormManagerPasteImportState({ value, isImporting, onChangeValue, onBack, onPasteFromClipboard, onImport, onDragOver, onDrop, }: FormManagerPasteImportStateProps) { return (

Import JSON

Paste a BuzzForm schema or Builder backup JSON.

onChangeValue(event.target.value)}
          placeholder='[\n  { "type": "text", "name": "email", "label": "Email" }\n]'
          wrap="off"
          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"
        />
      </div>

<div className="mt-auto flex flex-wrap justify-end gap-2">
        <Button variant="ghost" onClick={onBack} disabled={isImporting}>
          Back
        </Button>
        <Button
          variant="outline"
          onClick={onPasteFromClipboard}
          disabled={isImporting}
        >
          <IconPlaceholder
            hugeicons="Copy01Icon"
            lucide="Copy"
            tabler="IconCopy"
            phosphor="Copy"
            remixicon="RiFileCopyLine"
            size={16}
            className="mr-2"
            strokeWidth={2}
          />
          Paste from Clipboard
        </Button>
        <Button
          onClick={onImport}
          disabled={isImporting || value.trim().length === 0}
        >
          {isImporting ? (
            <Spinner className="mr-2 size-4" />
          ) : (
            <IconPlaceholder
              hugeicons="Upload01Icon"
              lucide="Upload"
              tabler="IconUpload"
              phosphor="UploadSimple"
              remixicon="RiUpload2Line"
              size={16}
              className="mr-2"
              strokeWidth={2}
            />
          )}
          Validate JSON
        </Button>
      </div>
    </div>
  );
}

export function FormManagerNewPanel({ onDone }: FormManagerNewPanelProps) {
  const [isImporting, setIsImporting] = React.useState(false);
  const [pendingImport, setPendingImport] =
    React.useState<PendingImport | null>(null);
  const [importError, setImportError] = React.useState<string | null>(null);
  const [isPasteMode, setIsPasteMode] = React.useState(false);
  const [pastedJson, setPastedJson] = React.useState("");

const fileInputRef = React.useRef<HTMLInputElement | null>(null);
  const clearState = useBuilderStore((state) => state.clearState);
  const loadDocumentState = useBuilderStore((state) => state.loadDocumentState);

const resetImportState = React.useCallback(() => {
    setIsImporting(false);
    setPendingImport(null);
    setImportError(null);
  }, []);

const handleNewForm = () => {
    clearState();
    onDone();
  };

const handleConfirmImport = () => {
    if (!pendingImport) return;
    loadDocumentState(
      pendingImport.state as Parameters<typeof loadDocumentState>[0],
    );
    toast.success(`Imported "${pendingImport.formName}"`);
    onDone();
  };

const handleImportClick = () => {
    if (isImporting) return;
    fileInputRef.current?.click();
  };

const handleOpenPasteMode = () => {
    if (isImporting) return;
    setImportError(null);
    setIsPasteMode(true);
  };

const handleClosePasteMode = () => {
    if (isImporting) return;
    setImportError(null);
    setIsPasteMode(false);
  };

const processImportJson = React.useCallback(
    async ({
      json,
      sourceName,
      schemaFileNameHint,
      closePasteModeOnSuccess,
    }: {
      json: string;
      sourceName: string;
      schemaFileNameHint?: string;
      closePasteModeOnSuccess: boolean;
    }) => {
      const startedAt = Date.now();
      setImportError(null);
      setPendingImport(null);
      setIsImporting(true);

try {
        const parsed = parseImportedFormJson(json);
        const importedState =
          schemaFileNameHint && parsed.state.formName === "Imported Form"
            ? {
                ...parsed.state,
                formName: schemaFileNameHint,
              }
            : parsed.state;

setPendingImport({
          sourceName,
          formName: importedState.formName,
          nodeCount: Object.keys(importedState.nodes).length,
          state: importedState,
          warnings: parsed.warnings,
        });

if (closePasteModeOnSuccess) {
          setIsPasteMode(false);
        }
      } catch (error) {
        const rawMessage =
          error instanceof Error ? error.message : "Failed to import JSON.";
        const message = `Invalid import JSON: ${rawMessage}`;
        setImportError(message);
        toast.error(message);
      } finally {
        const elapsed = Date.now() - startedAt;
        if (elapsed < MIN_IMPORT_FEEDBACK_MS) {
          await new Promise((resolve) =>
            setTimeout(resolve, MIN_IMPORT_FEEDBACK_MS - elapsed),
          );
        }
        setIsImporting(false);
      }
    },
    [],
  );

const handleFileImport = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;

const contents = await file.text();
    await processImportJson({
      json: contents,
      sourceName: file.name,
      schemaFileNameHint: toFormNameHint(file.name),
      closePasteModeOnSuccess: false,
    });
  };

const handleImportPastedJson = async () => {
    const trimmedJson = pastedJson.trim();
    if (!trimmedJson) {
      const message = "Paste JSON content before importing.";
      setImportError(message);
      toast.error(message);
      return;
    }

await processImportJson({
      json: trimmedJson,
      sourceName: "Pasted JSON",
      closePasteModeOnSuccess: true,
    });
  };

const handlePasteFromClipboard = async () => {
    if (typeof navigator === "undefined" || !navigator.clipboard?.readText) {
      toast.error("Clipboard access is not available. Paste manually.");
      return;
    }

try {
      const clipboardText = await navigator.clipboard.readText();
      if (!clipboardText.trim()) {
        toast.error("Clipboard is empty.");
        return;
      }

setPastedJson(clipboardText);
      setImportError(null);
      toast.success("Pasted JSON from clipboard");
    } catch {
      toast.error("Clipboard access was denied. Paste JSON manually.");
    }
  };

const handlePasteDropZoneDragOver = (
    event: React.DragEvent<HTMLDivElement>,
  ) => {
    event.preventDefault();
  };

const handlePasteDropZoneDrop = async (
    event: React.DragEvent<HTMLDivElement>,
  ) => {
    event.preventDefault();
    if (isImporting) return;

const droppedText = event.dataTransfer.getData("text/plain");
    if (!droppedText.trim()) {
      toast.error("Dropped content is empty.");
      return;
    }

setPastedJson(droppedText);
    setImportError(null);
    toast.success("Loaded dropped text");
  };

React.useEffect(() => resetImportState, [resetImportState]);

const hasPendingImport =
    pendingImport !== null && !isImporting && !importError;

return (
    <div className="flex min-h-80 flex-col gap-3">
      <div className="flex flex-1 p-4">
        {hasPendingImport ? (
          <FormManagerPendingImportState
            pendingImport={pendingImport}
            isImporting={isImporting}
            onConfirmImport={handleConfirmImport}
            onClearSelection={resetImportState}
          />
        ) : isPasteMode ? (
          <FormManagerPasteImportState
            value={pastedJson}
            isImporting={isImporting}
            onChangeValue={setPastedJson}
            onBack={handleClosePasteMode}
            onPasteFromClipboard={handlePasteFromClipboard}
            onImport={handleImportPastedJson}
            onDragOver={handlePasteDropZoneDragOver}
            onDrop={handlePasteDropZoneDrop}
          />
        ) : (
          <div className="grid w-full flex-1 gap-4 sm:grid-cols-3">
            <Card
              className="group flex cursor-pointer flex-col justify-center transition-all duration-200 hover:ring-1 hover:ring-primary/50"
              onClick={handleNewForm}
            >
              <CardContent className="flex justify-center pb-2 pt-6">
                <IconPlaceholder
                  hugeicons="Add01Icon"
                  lucide="Plus"
                  tabler="IconPlus"
                  phosphor="Plus"
                  remixicon="RiAddLine"
                  size={32}
                  strokeWidth={1.5}
                  className="text-muted-foreground transition-all duration-300 group-hover:scale-110 group-hover:rotate-90 group-hover:text-primary"
                />
              </CardContent>
              <CardHeader className="justify-center text-center">
                <CardTitle className="text-lg">Start Blank</CardTitle>
                <CardDescription>Create a fresh empty form</CardDescription>
              </CardHeader>
            </Card>

<Card
              className="group flex cursor-pointer flex-col justify-center transition-all duration-200 hover:ring-1 hover:ring-primary/50"
              onClick={handleImportClick}
            >
              <CardContent className="flex justify-center pb-2 pt-6">
                {isImporting ? (
                  <div className="flex items-center justify-center p-2 text-muted-foreground transition-colors group-hover:text-primary">
                    <Spinner className="size-10" />
                  </div>
                ) : (
                  <IconPlaceholder
                    hugeicons="Upload01Icon"
                    lucide="Upload"
                    tabler="IconUpload"
                    phosphor="UploadSimple"
                    remixicon="RiUpload2Line"
                    size={32}
                    strokeWidth={1.5}
                    className="text-muted-foreground transition-all duration-300 group-hover:-translate-y-1 group-hover:scale-110 group-hover:text-primary"
                  />
                )}
              </CardContent>
              <CardHeader className="justify-center text-center">
                <CardTitle className="text-lg">
                  {isImporting ? "Validating File" : "Import File"}
                </CardTitle>
                <CardDescription>
                  {isImporting
                    ? "Checking JSON before import"
                    : "Load .json from disk"}
                </CardDescription>
              </CardHeader>
            </Card>

<Card
              className="group flex cursor-pointer flex-col justify-center transition-all duration-200 hover:ring-1 hover:ring-primary/50"
              onClick={handleOpenPasteMode}
            >
              <CardContent className="flex justify-center pb-2 pt-6">
                <IconPlaceholder
                  hugeicons="Copy01Icon"
                  lucide="Copy"
                  tabler="IconCopy"
                  phosphor="Copy"
                  remixicon="RiFileCopyLine"
                  size={32}
                  strokeWidth={1.5}
                  className="text-muted-foreground transition-all duration-300 group-hover:-translate-y-1 group-hover:scale-110 group-hover:text-primary"
                />
              </CardContent>
              <CardHeader className="justify-center text-center">
                <CardTitle className="text-lg">Import JSON</CardTitle>
                <CardDescription>Paste schema from clipboard</CardDescription>
              </CardHeader>
            </Card>
          </div>
        )}
      </div>

{importError && (
        <Alert variant="destructive">
          <IconPlaceholder
            hugeicons="Alert01Icon"
            lucide="AlertCircle"
            tabler="IconAlertCircle"
            phosphor="WarningCircle"
            remixicon="RiAlertLine"
            size={16}
          />
          <AlertTitle>Import Failed</AlertTitle>
          <AlertDescription>{importError}</AlertDescription>
        </Alert>
      )}

<input
        ref={fileInputRef}
        type="file"
        accept=".json,application/json"
        className="hidden"
        onChange={handleFileImport}
      />
    </div>
  );
}

function toFormNameHint(sourceName: string): string | undefined {
  const normalizedBase = sourceName
    .replace(/\.[^/.]+$/, "")
    .replace(/[_-]+/g, " ")
    .replace(/\s+/g, " ")
    .trim();

if (normalizedBase.length === 0) {
    return undefined;
  }

return normalizedBase
    .split(" ")
    .map((segment) => {
      if (segment.length === 0) return segment;
      return segment[0]!.toUpperCase() + segment.slice(1).toLowerCase();
    })
    .join(" ");
}
64:T3357,"use client";

import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { IconPlaceholder } from "@/components/icon-placeholder";
import type {
  FormSummary,
  BuilderStorageProvider,
} from "@buildnbuzz/form-builder-core";
import { toSafeFileName, fieldsToBuilderState } from "@buildnbuzz/form-builder-core";
import { useBuilderStore, downloadTextFile } from "@buildnbuzz/form-builder-react";
import type { Field } from "@buildnbuzz/form-core";
import { toast } from "sonner";

const dateFormatter = new Intl.DateTimeFormat(undefined, {
  dateStyle: "medium",
  timeStyle: "short",
});

type FormManagerSavedPanelProps = {
  onDone: () => void;
  storageProvider: BuilderStorageProvider | null;
};

export function FormManagerSavedPanel({
  onDone,
  storageProvider,
}: FormManagerSavedPanelProps) {
  const [forms, setForms] = React.useState<FormSummary[]>([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const [loadError, setLoadError] = React.useState<string | null>(null);
  const [openingFormId, setOpeningFormId] = React.useState<string | null>(null);
  const [removingFormId, setRemovingFormId] = React.useState<string | null>(
    null,
  );
  const [downloadingFormId, setDownloadingFormId] = React.useState<
    string | null
  >(null);

const loadDocumentState = useBuilderStore((state) => state.loadDocumentState);
  const currentFormId = useBuilderStore((state) => state.formId);

const loadForms = React.useCallback(async () => {
    setIsLoading(true);
    setLoadError(null);

try {
      if (!storageProvider) return;
      const items = await storageProvider.list();
      setForms(items);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Failed to load forms.";
      setLoadError(message);
    } finally {
      setIsLoading(false);
    }
  }, [storageProvider]);

React.useEffect(() => {
    void loadForms();
  }, [loadForms]);

const handleOpenForm = async (formId: string) => {
    setOpeningFormId(formId);

try {
      if (!storageProvider) return;
      const document = await storageProvider.load(formId);
      if (!document) throw new Error("Document not found");
      const { nodes, rootIds } = fieldsToBuilderState(
        document.fields as readonly Field[],
      );

loadDocumentState({
        nodes,
        rootIds,
        formId: document.id || formId,
        formName: document.title || "Untitled",
      });
      onDone();
      toast.success(`Opened "${document.title || "Untitled"}"`);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Failed to open form.";
      toast.error(message);
    } finally {
      setOpeningFormId(null);
    }
  };

const handleRemoveForm = async (form: FormSummary) => {
    if (
      !window.confirm(
        `Remove "${form.formName}" from local saved forms? This does not affect the currently open editor until you switch forms.`,
      )
    ) {
      return;
    }

setRemovingFormId(form.formId);

try {
      if (!storageProvider) return;
      await storageProvider.remove(form.formId);
      setForms((prev) => prev.filter((item) => item.formId !== form.formId));
      toast.success(`Removed "${form.formName}"`);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Failed to remove form.";
      toast.error(message);
    } finally {
      setRemovingFormId(null);
    }
  };

const handleDownloadForm = async (form: FormSummary) => {
    setDownloadingFormId(form.formId);

try {
      if (!storageProvider) return;
      const document = await storageProvider.load(form.formId);
      if (!document) throw new Error("Document not found");
      const fileName = `${toSafeFileName(document.title || "Untitled")}.json`;

downloadTextFile(
        JSON.stringify(document, null, 2),
        fileName,
        "application/json",
      );
      toast.success(`Downloaded "${document.title || "Untitled"}"`);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Failed to download form.";
      toast.error(message);
    } finally {
      setDownloadingFormId(null);
    }
  };

return (
    <div className="flex min-h-80 flex-col gap-3">
      {isLoading ? (
        <div className="flex h-64 items-center justify-center gap-2 text-sm text-muted-foreground">
          <Spinner className="size-4" />
          Loading saved forms...
        </div>
      ) : loadError ? (
        <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
          <p className="text-sm text-destructive">{loadError}</p>
          <Button type="button" variant="outline" size="sm" onClick={loadForms}>
            Retry
          </Button>
        </div>
      ) : forms.length === 0 ? (
        <Empty className="min-h-64">
          <EmptyHeader>
            <EmptyMedia variant="icon">
              <IconPlaceholder
                hugeicons="FolderIcon"
                lucide="Folder"
                tabler="IconFolder"
                phosphor="Folder"
                remixicon="RiFolderLine"
                size={16}
                strokeWidth={2}
              />
            </EmptyMedia>
            <EmptyTitle>No saved forms yet</EmptyTitle>
            <EmptyDescription>
              Forms appear here after you edit and save them locally.
            </EmptyDescription>
          </EmptyHeader>
        </Empty>
      ) : (
        <>
          <div className="rounded-lg border">
            <ScrollArea className="h-72 w-full">
              <div className="space-y-2 p-2">
                {forms.map((form) => {
                  const isOpening = openingFormId === form.formId;
                  const isRemoving = removingFormId === form.formId;
                  const isDownloading = downloadingFormId === form.formId;
                  const isBusy = isOpening || isRemoving || isDownloading;
                  const isCurrent = currentFormId === form.formId;

return (
                    <div
                      key={form.formId}
                      className="flex items-start gap-3 rounded-md border p-3"
                    >
                      <div className="mt-0.5 rounded-md border bg-muted p-1.5">
                        <IconPlaceholder
                          hugeicons="InputShortTextIcon"
                          lucide="Type"
                          tabler="IconLetterT"
                          phosphor="TextT"
                          remixicon="RiText"
                          size={14}
                          strokeWidth={2}
                        />
                      </div>

<div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2">
                          <p className="truncate text-sm font-medium">
                            {form.formName}
                          </p>
                          {isCurrent && (
                            <Badge variant="secondary">Current</Badge>
                          )}
                        </div>

<div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
                          <IconPlaceholder
                            hugeicons="Clock01Icon"
                            lucide="Clock"
                            tabler="IconClock"
                            phosphor="Clock"
                            remixicon="RiTimeLine"
                            size={12}
                            strokeWidth={2}
                          />
                          <span>{dateFormatter.format(form.updatedAt)}</span>
                        </div>
                      </div>

<div className="flex items-center gap-1">
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="gap-1.5"
                          disabled={isBusy}
                          onClick={() => handleOpenForm(form.formId)}
                        >
                          {isOpening ? (
                            <Spinner className="size-3.5" />
                          ) : (
                            <IconPlaceholder
                              hugeicons="ArrowRight01Icon"
                              lucide="ArrowRight"
                              tabler="IconArrowRight"
                              phosphor="ArrowRight"
                              remixicon="RiArrowRightLine"
                              size={14}
                              strokeWidth={2}
                            />
                          )}
                          Open
                        </Button>

<Tooltip>
                          <TooltipTrigger
                            render={
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon-sm"
                                disabled={isBusy}
                                onClick={() => handleDownloadForm(form)}
                                className="text-muted-foreground"
                              >
                                {isDownloading ? (
                                  <Spinner className="size-3.5" />
                                ) : (
                                  <IconPlaceholder
                                    hugeicons="Download02Icon"
                                    lucide="Download"
                                    tabler="IconDownload"
                                    phosphor="DownloadSimple"
                                    remixicon="RiDownload2Line"
                                    size={14}
                                    strokeWidth={2}
                                  />
                                )}
                                <span className="sr-only">
                                  Download saved form
                                </span>
                              </Button>
                            }
                          />
                          <TooltipContent side="top">Download</TooltipContent>
                        </Tooltip>

<Tooltip>
                          <TooltipTrigger
                            render={
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon-sm"
                                disabled={isBusy}
                                onClick={() => handleRemoveForm(form)}
                                className="text-muted-foreground hover:text-destructive"
                              >
                                {isRemoving ? (
                                  <Spinner className="size-3.5" />
                                ) : (
                                  <IconPlaceholder
                                    hugeicons="Delete02Icon"
                                    lucide="Trash2"
                                    tabler="IconTrash"
                                    phosphor="Trash"
                                    remixicon="RiDeleteBinLine"
                                    size={14}
                                    strokeWidth={2}
                                  />
                                )}
                                <span className="sr-only">
                                  Remove saved form
                                </span>
                              </Button>
                            }
                          />
                          <TooltipContent side="top">Delete</TooltipContent>
                        </Tooltip>
                      </div>
                    </div>
                  );
                })}
              </div>
            </ScrollArea>
          </div>

<div className="flex justify-start">
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="gap-2"
              onClick={loadForms}
            >
              <IconPlaceholder
                hugeicons="Refresh01Icon"
                lucide="RefreshCw"
                tabler="IconRefresh"
                phosphor="ArrowsClockwise"
                remixicon="RiRefreshLine"
                size={14}
                strokeWidth={2}
              />
              Refresh
            </Button>
          </div>
        </>
      )}
    </div>
  );
}
65:T887,"use client";

import Image from "next/image";
import Link from "next/link";
import { ThemeToggle } from "@/components/theme-toggle";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { useBuilderStore } from "@buildnbuzz/form-builder-react";

import { SaveIndicator } from "./save-indicator";
import { FormManagerDialog } from "./form-manager-dialog";
import { CloudSaveDialog } from "./cloud-save-dialog";
import { ExportSheet } from "../export-sheet";
import type { BuilderStorageProvider } from "@buildnbuzz/form-builder-core";

export function SiteHeader({
  storageProvider,
}: {
  storageProvider: BuilderStorageProvider | null;
}) {
  const hasContent = useBuilderStore((state) => state.rootIds.length > 0);

return (
    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
      <div className="flex h-header w-full items-center gap-2 px-4 text-foreground">
        <div className="flex min-w-0 items-center gap-2">
          <Link href="/" className="flex items-center gap-2">
            <div className="flex aspect-square size-8 items-center justify-center rounded-lg invert dark:invert-0">
              <Image src="/bb-icon.svg" alt="Logo" width={24} height={24} />
            </div>
            <span className="text-sm font-semibold tracking-tight">
              BuzzForm
            </span>
            <Badge
              variant="secondary"
              className="h-5 rounded-full px-2 text-[10px] font-semibold tracking-wide"
            >
              Preview
            </Badge>
          </Link>
        </div>

<div className="ml-auto flex items-center gap-4">
          <SaveIndicator />
          {hasContent && (
            <Separator
              orientation="vertical"
              className="h-5 data-[orientation=vertical]:self-center"
            />
          )}
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <CloudSaveDialog />
            <ExportSheet />
            <FormManagerDialog storageProvider={storageProvider} />
          </div>
        </div>
      </div>
    </header>
  );
}
66:T66a,"use client";

import { useBuilderStore } from "@buildnbuzz/form-builder-react";
import { IconPlaceholder } from "@/components/icon-placeholder";
import { cn } from "@/lib/utils";

function formatTime(timestamp: number): string {
  return new Date(timestamp).toLocaleTimeString([], {
    hour: "numeric",
    minute: "2-digit",
  });
}

export function SaveIndicator() {
  const saveStatus = useBuilderStore((state) => state.saveStatus);
  const lastSavedAt = useBuilderStore((state) => state.lastSavedAt);
  const hasContent = useBuilderStore((state) => state.rootIds.length > 0);

if (!hasContent) return null;

return (
    <div
      className={cn(
        "flex items-center gap-1.5 text-xs text-muted-foreground transition-opacity duration-200",
        saveStatus === "idle" && !lastSavedAt && "opacity-0",
      )}
    >
      {saveStatus === "saving" ? (
        <>
          <IconPlaceholder
            hugeicons="Loading03Icon"
            lucide="Loader2"
            tabler="IconLoader2"
            phosphor="CircleNotch"
            remixicon="RiLoader2Line"
            size={14}
            className="animate-spin"
          />
          <span>Saving...</span>
        </>
      ) : lastSavedAt ? (
        <>
          <IconPlaceholder
            hugeicons="CheckmarkCircle01Icon"
            lucide="CheckCircle2"
            tabler="IconCircleCheck"
            phosphor="CheckCircle"
            remixicon="RiCheckboxCircleLine"
            size={14}
            className="text-emerald-500"
          />
          <span>Last saved at {formatTime(lastSavedAt)}</span>
        </>
      ) : null}
    </div>
  );
}
67:T13d8,"use client";

import { useEffect, useRef } from "react";
import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Badge } from "@/components/ui/badge";
import { IconPlaceholder } from "@/components/icon-placeholder";
import {
  DEFAULT_SLOT,
  useBuilderStore,
  type BuilderNodeRendererProps,
} from "@buildnbuzz/form-builder-react";
import type { ArrayField } from "@buildnbuzz/form-core";

/**
 * Visual renderer for 'array' layout fields.
 * Wraps repeating items with min/max indicator limits securely resolving DnD sorting wrappers context.
 */
export const ArrayRenderer = ({
  id,
  field,
  childrenIds,
  renderSlot,
}: BuilderNodeRendererProps) => {
  const arrayField = field as ArrayField;
  const rawField = arrayField as unknown as Record<string, unknown>;
  const uiConfig = (arrayField.ui as Record<string, unknown> | undefined) ?? {};
  const defaultCollapsed = (uiConfig.collapsed as boolean | undefined) ?? false;
  const minItems = arrayField.minItems;
  const maxItems = arrayField.maxItems;

const isCollapsed = useBuilderStore(
    (s) => s.collapsedNodes[id] ?? defaultCollapsed,
  );
  const toggleCollapsed = useBuilderStore((s) => s.toggleCollapsed);
  const setCollapsed = useBuilderStore((s) => s.setCollapsed);

const { setNodeRef, isOver } = useDroppable({
    id: `${id}-dropzone`,
    data: { type: "array", parentId: id, parentSlot: DEFAULT_SLOT },
  });

const isEmpty = childrenIds.length === 0;

const renderDropZone = () => (
    <div
      ref={setNodeRef}
      data-container-padding
      className={cn("min-h-16 transition-colors", isOver && "bg-primary/5")}
    >
      {isEmpty ? (
        <div
          className={cn(
            "h-16 flex items-center justify-center rounded-lg border-2 border-dashed transition-colors",
            isOver
              ? "border-primary/50 bg-primary/5"
              : "border-muted-foreground/20 bg-muted/30",
          )}
        >
          <span className="text-muted-foreground text-sm italic">
            Drop fields for each array item
          </span>
        </div>
      ) : (
        <div className="space-y-3">{renderSlot(DEFAULT_SLOT)}</div>
      )}
    </div>
  );

return (
    <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
      <Card className="w-full py-0 gap-0 border-dashed">
        <CardHeader className="p-0 border-b-0">
          <CollapsibleTrigger
            className={cn(
              "w-full px-4 py-3 flex flex-row items-center justify-between",
              "hover:bg-muted/75 bg-muted/50 transition-colors select-none cursor-pointer",
              !isCollapsed && "border-b",
            )}
          >
            <div className="flex min-w-0 flex-1 items-center gap-2">
              <IconPlaceholder
                lucide="Menu"
                hugeicons="Menu01Icon"
                size={16}
                className="text-muted-foreground shrink-0"
              />
              <span className="text-sm font-semibold truncate">
                {(rawField.label as string) || "Array"}
              </span>
              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                {childrenIds.length}{" "}
                {childrenIds.length === 1 ? "field" : "fields"}
              </Badge>
              {typeof minItems === "number" && (
                <Badge
                  variant="outline"
                  className="h-5 px-1.5 text-[10px] text-muted-foreground"
                >
                  min {minItems}
                </Badge>
              )}
              {typeof maxItems === "number" && (
                <Badge
                  variant="outline"
                  className="h-5 px-1.5 text-[10px] text-muted-foreground"
                >
                  max {maxItems}
                </Badge>
              )}
            </div>

<CollapsibleContent>
          <CardContent className="p-4">
            {!!rawField.description && (
              <p className="text-sm text-muted-foreground mb-3">
                {rawField.description as string}
              </p>
            )}
            {renderDropZone()}
          </CardContent>
        </CollapsibleContent>
      </Card>
    </Collapsible>
  );
};
68:T1787,"use client";

import { useEffect, useRef } from "react";
import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { IconPlaceholder } from "@/components/icon-placeholder";
import {
  DEFAULT_SLOT,
  useBuilderStore,
  type BuilderNodeRendererProps,
} from "@buildnbuzz/form-builder-react";

const spacingMap = {
  sm: "space-y-2",
  md: "space-y-3",
  lg: "space-y-4",
};

/**
 * Visual renderer for 'collapsible' container fields.
 * Includes multiple UI variants natively integrated with builder store state tracking.
 */
export const CollapsibleRenderer = ({
  id,
  field,
  childrenIds,
  renderSlot,
}: BuilderNodeRendererProps) => {
  const rawField = field as unknown as Record<string, unknown>;
  const uiConfig = (rawField.ui as Record<string, unknown> | undefined) ?? {};

const label = rawField.label as string | undefined;
  const variant =
    (uiConfig.variant as "ghost" | "bordered" | "card" | "flat" | undefined) ??
    "bordered";
  const spacingConfig = uiConfig.spacing as string | undefined;
  const spacingExtracted =
    spacingConfig && spacingConfig in spacingMap
      ? (spacingConfig as keyof typeof spacingMap)
      : "md";

const defaultCollapsed = (rawField.collapsed as boolean | undefined) ?? false;

const { setNodeRef, isOver } = useDroppable({
    id: `${id}-dropzone`,
    data: { type: "collapsible", parentId: id, parentSlot: DEFAULT_SLOT },
  });

const isEmpty = childrenIds.length === 0;

const renderDropZone = () => (
    <div
      ref={setNodeRef}
      data-container-padding
      className={cn("min-h-16 transition-colors", isOver && "bg-primary/5")}
    >
      {isEmpty ? (
        <div
          className={cn(
            "h-16 flex items-center justify-center rounded-lg border-2 border-dashed transition-colors",
            isOver
              ? "border-primary/50 bg-primary/5"
              : "border-muted-foreground/20 bg-muted/30",
          )}
        >
          <span className="text-muted-foreground text-sm italic">
            Drop fields here
          </span>
        </div>
      ) : (
        <div className={cn(spacingMap[spacingExtracted])}>
          {renderSlot(DEFAULT_SLOT)}
        </div>
      )}
    </div>
  );

const renderHeaderContent = () => (
    <div className="flex-1 min-w-0 flex items-center gap-2">
      <IconPlaceholder
        lucide="FoldVertical"
        hugeicons="ArrowShrink02Icon"
        size={16}
        className="text-muted-foreground shrink-0"
      />
      <span
        className={cn(
          "text-sm truncate",
          variant === "card" ? "font-semibold" : "font-medium",
        )}
      >
        {label || "Collapsible"}
      </span>
      {!isEmpty && (
        <span className="text-xs text-muted-foreground">
          ({childrenIds.length} {childrenIds.length === 1 ? "field" : "fields"})
        </span>
      )}
    </div>
  );

const renderChevron = (size: number = 16) => (
    <IconPlaceholder
      lucide="ChevronDown"
      hugeicons="ArrowDown01Icon"
      size={size}
      className={cn(
        "text-muted-foreground transition-transform duration-200 shrink-0",
        isCollapsed && "-rotate-90",
      )}
    />
  );

// === GHOST VARIANT ===
  if (variant === "ghost") {
    return (
      <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
        <div className="w-full">
          <CollapsibleTrigger className="w-full px-2 py-2 rounded-md flex flex-row items-center justify-between hover:bg-muted/50 transition-colors select-none cursor-pointer">
            {renderHeaderContent()}
            {renderChevron(14)}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="pt-3 pl-2">{renderDropZone()}</div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    );
  }

// === BORDERED VARIANT (DEFAULT) ===
  if (variant === "bordered" || variant === "flat") {
    return (
      <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
        <div className="w-full border border-dashed border-border rounded-lg overflow-hidden">
          <CollapsibleTrigger className="w-full px-4 py-2 flex flex-row items-center justify-between hover:bg-muted/50 transition-colors select-none cursor-pointer">
            {renderHeaderContent()}
            {renderChevron(14)}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="px-4 pt-2 pb-4">{renderDropZone()}</div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    );
  }

// === CARD VARIANT ===
  return (
    <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
      <Card className="w-full py-0 gap-0">
        <CardHeader className="p-0 border-b-0">
          <CollapsibleTrigger
            className={cn(
              "w-full px-4 py-3 flex flex-row items-center justify-between",
              "hover:bg-muted/75 bg-muted/50 transition-colors select-none cursor-pointer",
              !isCollapsed && "border-b",
            )}
          >
            {renderHeaderContent()}
            {renderChevron()}
          </CollapsibleTrigger>
        </CardHeader>
        <CollapsibleContent>
          <CardContent className="p-4">{renderDropZone()}</CardContent>
        </CollapsibleContent>
      </Card>
    </Collapsible>
  );
};
69:T197f,"use client";

import { useEffect, useRef } from "react";
import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { IconPlaceholder } from "@/components/icon-placeholder";
import { DEFAULT_SLOT, useBuilderStore, type BuilderNodeRendererProps } from "@buildnbuzz/form-builder-react";
import type { GroupField } from "@buildnbuzz/form-core";

const spacingMap = {
  sm: "space-y-2",
  md: "space-y-3",
  lg: "space-y-4",
} as const;

/**
 * Visual renderer for 'group' container fields.
 */
export const GroupRenderer = ({ id, field, renderSlot, childrenIds }: BuilderNodeRendererProps) => {
  const groupField = field as GroupField;
  const { label } = groupField;
  const variant = groupField.ui?.variant ?? "card";
  const spacing = (groupField.ui?.spacing as keyof typeof spacingMap) ?? "md";
  const defaultCollapsed = groupField.ui?.collapsed ?? false;

const { setNodeRef, isOver } = useDroppable({
    id: `${id}-dropzone`,
    data: { type: "group", parentId: id, parentSlot: DEFAULT_SLOT },
  });

const isEmpty = childrenIds.length === 0;

const renderDropZone = () => (
    <div
      ref={setNodeRef}
      data-container-padding
      className={cn("min-h-16 transition-colors", isOver && "bg-primary/5")}
    >
      {isEmpty ? (
        <div
          className={cn(
            "h-16 flex items-center justify-center rounded-lg border-2 border-dashed transition-colors",
            isOver
              ? "border-primary/50 bg-primary/5"
              : "border-muted-foreground/20 bg-muted/30",
          )}
        >
          <span className="text-muted-foreground text-sm italic">
            Drop fields here
          </span>
        </div>
      ) : (
        <div className={cn(spacingMap[spacing])}>
          {renderSlot(DEFAULT_SLOT)}
        </div>
      )}
    </div>
  );

// === FLAT VARIANT ===
  if (variant === "flat") {
    return (
      <div className="w-full">
        {label && (
          <div className="flex items-center gap-2 mb-2">
            <IconPlaceholder
              lucide="Folder"
              hugeicons="FolderIcon"
              size={14}
              className="text-muted-foreground"
            />
            <span className="font-medium text-sm text-foreground">{label as string}</span>
          </div>
        )}
        <div className="pl-1">{renderDropZone()}</div>
      </div>
    );
  }

// === GHOST VARIANT ===
  if (variant === "ghost") {
    return (
      <div className="w-full border border-border/50 rounded-lg p-4">
        {label && (
          <div className="flex items-center gap-2 mb-3">
            <IconPlaceholder
              lucide="Folder"
              hugeicons="FolderIcon"
              size={14}
              className="text-muted-foreground"
            />
            <span className="font-medium text-sm text-foreground">{label as string}</span>
          </div>
        )}
        {renderDropZone()}
      </div>
    );
  }

// === BORDERED VARIANT ===
  if (variant === "bordered") {
    return (
      <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
        <div className="w-full border border-dashed border-border rounded-lg overflow-hidden">
          {label && (
            <CollapsibleTrigger className="w-full px-4 py-2 flex flex-row items-center justify-between hover:bg-muted/50 transition-colors select-none cursor-pointer">
              <div className="flex items-center gap-2">
                <IconPlaceholder
                  lucide="Folder"
                  hugeicons="FolderIcon"
                  size={14}
                  className="text-muted-foreground"
                />
                <span className="font-medium text-muted-foreground text-sm">
                  {label as string}
                </span>
              </div>
              <IconPlaceholder
                lucide="ChevronDown"
                hugeicons="ArrowDown01Icon"
                size={14}
                className={cn(
                  "text-muted-foreground transition-transform duration-200",
                  isCollapsed && "-rotate-90",
                )}
              />
            </CollapsibleTrigger>
          )}
          <CollapsibleContent>
            <div className="px-4 pt-2 pb-4">{renderDropZone()}</div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    );
  }

// === CARD VARIANT (DEFAULT) ===
  return (
    <Collapsible open={!isCollapsed} onOpenChange={() => toggleCollapsed(id)}>
      <Card className="w-full py-0 gap-0">
        {label && (
          <CardHeader className="p-0 border-b-0">
            <CollapsibleTrigger
              className={cn(
                "w-full px-4 py-3 flex flex-row items-center justify-between",
                "hover:bg-muted/75 bg-muted/50 transition-colors select-none cursor-pointer",
                !isCollapsed && "border-b",
              )}
            >
              <div className="flex items-center gap-2">
                <IconPlaceholder
                  lucide="Folder"
                  hugeicons="FolderIcon"
                  size={16}
                  className="text-muted-foreground"
                />
                <span className="text-sm font-semibold">{label as string}</span>
              </div>
              <IconPlaceholder
                lucide="ChevronDown"
                hugeicons="ArrowDown01Icon"
                size={16}
                className={cn(
                  "text-muted-foreground transition-transform duration-200",
                  isCollapsed && "-rotate-90",
                )}
              />
            </CollapsibleTrigger>
          </CardHeader>
        )}
        <CollapsibleContent>
          <CardContent className="p-4">{renderDropZone()}</CardContent>
        </CollapsibleContent>
      </Card>
    </Collapsible>
  );
};
6a:T6be,"use client";

import { useDroppable } from "@dnd-kit/core";
import { horizontalListSortingStrategy } from "@dnd-kit/sortable";
import { cn } from "@/lib/utils";
import { IconPlaceholder } from "@/components/icon-placeholder";
import {
  DEFAULT_SLOT,
  type BuilderNodeRendererProps,
} from "@buildnbuzz/form-builder-react";

/**
 * Visual renderer for 'row' layout fields.
 * Displays children in a horizontal grid.
 */
export const RowRenderer = ({
  id,
  renderSlot,
  childrenIds,
}: BuilderNodeRendererProps) => {
  const { setNodeRef, isOver } = useDroppable({
    id: `${id}-dropzone`,
    data: { type: "row", parentId: id, parentSlot: DEFAULT_SLOT },
  });

const isEmpty = childrenIds.length === 0;

return (
    <div className="w-full">
      {/* Header */}
      <div className="flex items-center gap-1.5 mb-2 text-muted-foreground">
        <IconPlaceholder lucide="Columns" hugeicons="InsertRowDownIcon" size={14} />
        <span className="text-xs font-medium">Row</span>
      </div>

{/* Drop zone container */}
      <div
        ref={setNodeRef}
        data-container-padding
        className={cn(
          "flex flex-row gap-3 p-3 min-h-16 rounded-lg border-2 border-dashed transition-colors",
          isEmpty ? "items-center justify-center" : "items-stretch",
          isOver
            ? "border-primary/50 bg-primary/5"
            : "border-muted-foreground/20 bg-muted/30 hover:border-muted-foreground/30",
        )}
      >
        {isEmpty ? (
          <div className="text-muted-foreground text-sm italic">
            Drop fields here
          </div>
        ) : (
          renderSlot(DEFAULT_SLOT, horizontalListSortingStrategy)
        )}
      </div>
    </div>
  );
};
6b:T1d17,"use client";

import React, { useMemo, useEffect } from "react";
import {
  useBuilderStore,
  type BuilderNodeRendererProps,
} from "@buildnbuzz/form-builder-react";
import { getTabSlotKeys } from "@buildnbuzz/form-builder-core";
import { useDroppable } from "@dnd-kit/core";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { IconPlaceholder } from "@/components/icon-placeholder";
import { cn } from "@/lib/utils";
import type { TabsField, Tab } from "@buildnbuzz/form-core";

interface TabDropZoneProps {
  containerId: string;
  slot: string;
  tab: Tab;
  childrenIds: string[];
  renderSlot: (slot: string) => React.ReactNode;
}

function TabDropZone({
  containerId,
  slot,
  tab,
  childrenIds,
  renderSlot,
}: TabDropZoneProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: `${containerId}::tab::${encodeURIComponent(slot)}-dropzone`,
    data: { type: "tabs", parentId: containerId, parentSlot: slot },
  });

const isEmpty = childrenIds.length === 0;
  const description = (tab as unknown as Record<string, unknown>).description;

return (
    <div
      ref={setNodeRef}
      data-container-padding
      className={cn("min-h-16 transition-colors", isOver && "bg-primary/5")}
    >
      {typeof description === "string" && description && (
        <p className="text-sm text-muted-foreground mb-3">{description}</p>
      )}

{isEmpty ? (
        <div
          className={cn(
            "h-16 flex items-center justify-center rounded-lg border-2 border-dashed transition-colors",
            isOver
              ? "border-primary/50 bg-primary/5"
              : "border-muted-foreground/20 bg-muted/30",
          )}
        >
          <span className="text-muted-foreground text-sm italic">
            Drop fields in this tab
          </span>
        </div>
      ) : (
        renderSlot(slot)
      )}
    </div>
  );
}

/**
 * Visual renderer for 'tabs' fields.
 * Orchestrates multiple slots as tabs.
 */
export const TabsRenderer = ({
  id,
  field,
  renderSlot,
}: BuilderNodeRendererProps) => {
  const tabsField = field as TabsField;
  const tabs = useMemo(() => tabsField.tabs ?? [], [tabsField.tabs]);
  const slots = useMemo(() => getTabSlotKeys(tabs), [tabs]);

const activeSlotFromStore = useBuilderStore(
    (state) => state.activeTabs[id] ?? null,
  );
  const setActiveTab = useBuilderStore((state) => state.setActiveTab);
  const tabChildren = useBuilderStore(
    (state) => state.nodes[id]?.children ?? {},
  );

const defaultSlot = useMemo(() => {
    if (slots.length === 0) return "";
    const configuredDefault = tabsField.ui?.defaultTab;
    const enabledSlots = slots.filter(
      (_, index) => tabs[index]?.disabled !== true,
    );
    const enabledFallbackSlot = enabledSlots[0] ?? slots[0];

if (typeof configuredDefault === "number") {
      const index = Math.max(0, Math.min(slots.length - 1, configuredDefault));
      return tabs[index]?.disabled === true
        ? enabledFallbackSlot
        : slots[index];
    }

if (typeof configuredDefault === "string") {
      const index = tabs.findIndex((tab) => tab.name === configuredDefault);
      if (index >= 0 && tabs[index]?.disabled !== true) {
        return slots[index];
      }
    }

return enabledFallbackSlot;
  }, [tabsField.ui?.defaultTab, tabs, slots]);

const activeSlot =
    activeSlotFromStore && slots.includes(activeSlotFromStore)
      ? activeSlotFromStore
      : defaultSlot;

useEffect(() => {
    if (!activeSlot) return;
    if (activeSlotFromStore !== activeSlot) {
      setActiveTab(id, activeSlot);
    }
  }, [activeSlot, activeSlotFromStore, id, setActiveTab]);

if (tabs.length === 0) {
    return (
      <div className="w-full rounded-lg border border-dashed border-muted-foreground/30 bg-muted/20 p-4">
        <div className="flex items-center gap-2 text-muted-foreground mb-2">
          <IconPlaceholder lucide="Layout" hugeicons="Layout01Icon" size={14} />
          <span className="text-xs font-medium">Tabs</span>
        </div>
        <p className="text-sm text-muted-foreground">
          Add at least one tab in the properties panel.
        </p>
      </div>
    );
  }

return (
    <div className="w-full">
      <div className="flex items-center gap-1.5 mb-2 text-muted-foreground">
        <IconPlaceholder lucide="Layout" hugeicons="Layout01Icon" size={14} />
        <span className="text-xs font-medium">Tabs</span>
      </div>

<Tabs
        value={activeSlot}
        onValueChange={(val) => val && setActiveTab(id, val)}
        className="w-full"
      >
        <TabsList
          variant={(tabsField.ui?.variant as "line" | "default") ?? "line"}
          className="w-full justify-start"
        >
          {tabs.map((tab, index) => {
            const slot = slots[index];
            const childCount = tabChildren[slot]?.length ?? 0;

return (
              <TabsTrigger
                key={slot}
                value={slot}
                className={cn(
                  tab.disabled &&
                    "opacity-80 text-muted-foreground data-[state=active]:text-muted-foreground",
                )}
              >
                <span className="inline-flex items-center gap-1.5">
                  <span>{getTabDisplayLabel(tab, index)}</span>
                  <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                    {childCount}
                  </Badge>
                  {tab.disabled && (
                    <IconPlaceholder
                      lucide="Ban"
                      hugeicons="BlockedIcon"
                      size={12}
                      className="text-muted-foreground/70"
                    />
                  )}
                </span>
              </TabsTrigger>
            );
          })}
        </TabsList>

{tabs.map((tab, index) => {
          const slot = slots[index];
          const childrenIdsForSlot = tabChildren[slot] || [];

return (
            <TabsContent key={slot} value={slot} className="mt-4">
              {tab.name && (
                <p className="text-xs text-muted-foreground mb-2">
                  Key: <code className="font-mono">{tab.name}</code>
                  {tab.disabled && (
                    <Badge
                      variant="outline"
                      className="ml-2 h-5 gap-1 border-muted-foreground/20 bg-muted/50 px-1.5 text-[10px] font-normal text-muted-foreground"
                    >
                      <IconPlaceholder
                        lucide="Ban"
                        hugeicons="BlockedIcon"
                        size={12}
                      />
                      Disabled
                    </Badge>
                  )}
                </p>
              )}
              <TabDropZone
                containerId={id}
                slot={slot}
                tab={tab}
                childrenIds={childrenIdsForSlot}
                renderSlot={renderSlot}
              />
            </TabsContent>
          );
        })}
      </Tabs>
    </div>
  );
};
6c:T6de,"use client";

import { useIsMobile } from "@/hooks/use-mobile";
import { IconPlaceholder } from "@/components/icon-placeholder";

/**
 * Overlay shown on mobile devices to prompt users to use a desktop browser.
 */
export function MobileOverlay() {
  const isMobile = useIsMobile();

if (!isMobile) return null;

return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 p-6 backdrop-blur-md lg:hidden">
      <div className="relative w-full max-w-sm overflow-hidden rounded-3xl border border-border/60 bg-card/90 shadow-2xl shadow-black/20">
        <div className="absolute -left-16 -top-16 h-44 w-44 rounded-full bg-primary/20 blur-3xl" />
        <div className="absolute -bottom-20 -right-10 h-48 w-48 rounded-full bg-sky-500/15 blur-3xl" />

<div className="relative space-y-4 p-8 text-center">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-border/60 bg-background/70 shadow-sm">
            <IconPlaceholder
              lucide="Monitor"
              hugeicons="ComputerIcon"
              tabler="IconDeviceDesktop"
              phosphor="Monitor"
              remixicon="RiComputerLine"
              size={24}
              className="text-primary"
            />
          </div>
          <div className="space-y-2">
            <h1 className="text-xl font-bold tracking-tight">
              Best on Desktop
            </h1>
            <p className="text-sm text-muted-foreground leading-relaxed">
              BuzzForm Builder requires a larger screen to provide the best
              editing experience. Please switch to a desktop or tablet.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
6d:T16bd,"use client";

import React, { useState } from "react";
import { useBuilderStore, SortableNode } from "@buildnbuzz/form-builder-react";
import { IconPlaceholder } from "@/components/icon-placeholder";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { Node } from "@buildnbuzz/form-builder-core";
import { isDataField, isContainerType } from "@buildnbuzz/form-core";

interface NodeWrapperProps {
  node: Node;
  children: React.ReactNode;
}

/**
 * Visual frame for canvas nodes.
 * Provides selection states, drag handling, and a contextual toolbar.
 */
export const NodeWrapper = ({ node, children }: NodeWrapperProps) => {
  const selectedId = useBuilderStore((s) => s.selectedId);
  const selectNode = useBuilderStore((s) => s.selectNode);
  const removeNode = useBuilderStore((s) => s.removeNode);
  const duplicateNode = useBuilderStore((s) => s.duplicateNode);

const [isHovered, setIsHovered] = useState(false);
  const isSelected = selectedId === node.id;
  const isHidden = isDataField(node.field) && node.field.hidden === true;

const fieldStyle = "style" in node.field ? node.field.style : undefined;
  const fieldWidth = (fieldStyle as React.CSSProperties | undefined)?.width;

return (
    <SortableNode
      id={node.id}
      render={({ setNodeRef, attributes, listeners, style, isDragging }) => (
        <div
          ref={setNodeRef}
          style={{
            ...style,
            ...(isHidden && {
              backgroundImage:
                "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(128,128,128,0.05) 10px, rgba(128,128,128,0.05) 20px)",
            }),
            ...(fieldWidth && fieldWidth !== "auto"
              ? { width: fieldWidth, flex: "0 0 auto" }
              : { flex: "1 1 0%", minWidth: 0 }),
          }}
          onClick={(e) => {
            e.stopPropagation();
            selectNode(node.id);
          }}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          {...attributes}
          {...listeners}
          className={cn(
            "relative group/node my-2 rounded-xl transition-all duration-200 cursor-default",
            "hover:p-2",
            isSelected
              ? "border-primary/50 ring-2 ring-primary/10 p-2 bg-primary/5"
              : "border-transparent",
            !isSelected && "border hover:border-border/40",
            isDragging && "opacity-30",
            isHidden &&
              "opacity-60 grayscale border-dashed border-muted-foreground/30",
          )}
        >
          {/* Node Toolbar - visible on hover or selection */}
          <TooltipProvider>
            <div
              className={cn(
                "absolute -top-9 right-0 z-50 flex items-center gap-0.5 rounded-lg border border-border/50 bg-card/75 p-1 shadow-lg shadow-black/10 backdrop-blur-md transition-opacity duration-200",
                isSelected || isHovered
                  ? "opacity-100 pointer-events-auto"
                  : "opacity-0 pointer-events-none",
              )}
              onClick={(e) => e.stopPropagation()}
              onPointerDown={(e) => e.stopPropagation()}
            >
              <Tooltip>
                <TooltipTrigger
                  render={
                    <Button
                      variant="ghost"
                      size="icon"
                      className="size-7 text-muted-foreground hover:text-primary"
                      onClick={(e) => {
                        e.stopPropagation();
                        duplicateNode(node.id);
                      }}
                    />
                  }
                >
                  <IconPlaceholder
                    lucide="Copy"
                    hugeicons="Copy01Icon"
                    tabler="IconCopy"
                    phosphor="Copy"
                    remixicon="RiFileCopyLine"
                    size={14}
                  />
                </TooltipTrigger>
                <TooltipContent>Duplicate field</TooltipContent>
              </Tooltip>

<Tooltip>
                <TooltipTrigger
                  render={
                    <Button
                      variant="ghost"
                      size="icon"
                      className="size-7 text-muted-foreground hover:text-destructive"
                      onClick={(e) => {
                        e.stopPropagation();
                        removeNode(node.id);
                      }}
                    />
                  }
                >
                  <IconPlaceholder
                    lucide="Trash2"
                    hugeicons="Delete02Icon"
                    tabler="IconTrash"
                    phosphor="Trash"
                    remixicon="RiDeleteBinLine"
                    size={14}
                  />
                </TooltipTrigger>
                <TooltipContent>Remove field</TooltipContent>
              </Tooltip>
            </div>
          </TooltipProvider>

{/* Node Content */}
          <div
            className={cn(
              "relative w-full transition-all duration-200",
              !isContainerType(node.field.type) && "pointer-events-none",
            )}
          >
            {isHidden && (
              <Badge
                className="absolute bottom-1.5 right-2 z-10 select-none bg-background/80 backdrop-blur-sm pointer-events-auto"
                variant="outline"
              >
                Hidden
              </Badge>
            )}
            {children}
          </div>
        </div>
      )}
    />
  );
};
6e:T1470,"use client";

import React from "react";
import {
  useBuilderContext,
  BuilderProperties,
  useSyncProperty,
  getRegistryEntry,
} from "@buildnbuzz/form-builder-react";
import { Form, FormContent, useFormContext } from "@/registry/shadcn/form";
import { ScrollArea } from "@/components/ui/scroll-area";
import { FieldIcon } from "./field-icon";
import { IconPlaceholder } from "@/components/icon-placeholder";
import { flattenFieldToFormValues } from "@buildnbuzz/form-builder-core";
import type { Field, FormSchema } from "@buildnbuzz/form-core";
import { ExpressionCheckbox } from "./expression-builder/expression-checkbox";
import { registry as shadcnRegistry } from "../registry";

/** Renders nothing — syncs form state ↔ builder store bidirectionally. */
function SyncPropertyState({
  update,
  data,
  schema,
}: {
  update: (data: Record<string, unknown>) => void;
  data: Record<string, unknown>;
  schema: Field[];
}) {
  const { form } = useFormContext();
  useSyncProperty({ form, data, schema, update });
  return null;
}

/**
 * Side panel for editing node or global form properties.
 */
export const PropertyPanel = () => {
  const { registry } = useBuilderContext();

return (
    <div className="flex h-full flex-col bg-background border-l overflow-hidden">
      <BuilderProperties
        render={({ node, id, schema, data, update }) => {
          const entry = node
            ? getRegistryEntry(registry, node.field.type)
            : null;
          const label =
            entry?.sidebar.label ??
            (id === "form" ? "Form Settings" : "Properties");

const defaultValues = flattenFieldToFormValues(
            data as unknown as Field,
            schema,
          );

return (
            <>
              <div className="p-4 border-b h-header flex items-center">
                {node && entry ? (
                  <div className="flex items-center gap-3 w-full">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl border bg-secondary/30 shadow-sm">
                      {node && (
                        <FieldIcon
                          type={node.field.type}
                          size={20}
                          className="text-foreground"
                        />
                      )}
                    </div>
                    <div className="flex flex-col gap-0.5 min-w-0 flex-1">
                      <span className="font-semibold text-sm truncate">
                        {label}
                      </span>
                      <span className="text-[11px] text-muted-foreground/80 truncate">
                        Properties
                      </span>
                    </div>
                  </div>
                ) : (
                  <div className="flex items-center gap-3 w-full">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl border bg-secondary/30 shadow-sm">
                      <IconPlaceholder
                        lucide="Settings"
                        hugeicons="Settings01Icon"
                        size={20}
                        className="text-muted-foreground"
                      />
                    </div>
                    <div className="flex flex-col gap-0.5 min-w-0 flex-1">
                      <span className="font-semibold text-sm">
                        Form Settings
                      </span>
                      <span className="text-[11px] text-muted-foreground/80 truncate">
                        Configuration
                      </span>
                    </div>
                  </div>
                )}
              </div>
              <div className="flex-1 min-h-0">
                <ScrollArea className="h-full">
                  <div className="flex flex-col gap-6 p-4">
                    {schema.length > 0 ? (
                      <Form
                        key={id}
                        schema={{ fields: schema } as unknown as FormSchema}
                        defaultValues={defaultValues}
                        registries={{
                          fields: {
                            ...shadcnRegistry,
                            checkbox: ExpressionCheckbox,
                            switch: ExpressionCheckbox,
                          },
                        }}
                      >
                        <FormContent autoRender as="div" className="gap-6">
                          <SyncPropertyState
                            update={update}
                            data={data}
                            schema={schema}
                          />
                        </FormContent>
                      </Form>
                    ) : (
                      <div className="flex flex-col items-center justify-center gap-2 py-10 text-center opacity-30">
                        <span className="text-[11px]">
                          No properties available
                        </span>
                      </div>
                    )}
                  </div>
                </ScrollArea>
              </div>
            </>
          );
        }}
      />
    </div>
  );
};
6f:T74f,"use client";

import React from "react";
import {
  DEFAULT_FIELD_REGISTRY,
  isDataField,
} from "@buildnbuzz/form-builder-core";
import { Field, type DataField } from "@buildnbuzz/form-react";
import { registry as shadcnRegistry } from "../registry";
import { RowRenderer } from "./layout/row-renderer";
import { GroupRenderer } from "./layout/group-renderer";
import { ArrayRenderer } from "./layout/array-renderer";
import { TabsRenderer } from "./layout/tabs-renderer";
import { CollapsibleRenderer } from "./layout/collapsible-renderer";
import {
  useBuilderFormContext,
  type BuilderNodeRendererProps,
  type BuilderFieldRegistry,
} from "@buildnbuzz/form-builder-react";

/**
 * Generic renderer for data fields that uses the runtime components.
 * Wraps the component in a Field to provide the necessary headless context.
 */
const DataFieldRenderer = ({ field }: BuilderNodeRendererProps) => {
  const { form } = useBuilderFormContext();
  const Component = shadcnRegistry[field.type];

if (!Component || !isDataField(field)) {
    return null;
  }

return (
    <Field field={field as DataField} form={form}>
      <Component />
    </Field>
  );
};

const specializedRenderers: Record<
  string,
  React.ComponentType<BuilderNodeRendererProps>
> = {
  row: RowRenderer,
  group: GroupRenderer,
  array: ArrayRenderer,
  tabs: TabsRenderer,
  collapsible: CollapsibleRenderer,
};

/**
 * Shadcn-specific builder registry.
 * Hydrates the core metadata registry with React renderers.
 */
export const SHADCN_BUILDER_REGISTRY: BuilderFieldRegistry = Object.entries(
  DEFAULT_FIELD_REGISTRY,
).reduce((acc, [type, entry]) => {
  if (!entry) return acc;

acc[type] = {
    ...entry,
    renderer: (specializedRenderers[type] ??
      DataFieldRenderer) as React.ComponentType<BuilderNodeRendererProps>,
  };
  return acc;
}, {} as BuilderFieldRegistry);
53:["$","$L55",null,{"files":[{"path":"registry/shadcn/builder/canvas/canvas-toolbar.tsx","content":"$56","type":"registry:component","target":"components/buzzform/builder/canvas/canvas-toolbar.tsx"},{"path":"registry/shadcn/builder/drag-overlay.tsx","content":"$57","type":"registry:component","target":"components/buzzform/builder/drag-overlay.tsx"},{"path":"registry/shadcn/builder/export-sheet.tsx","content":"$58","type":"registry:component","target":"components/buzzform/builder/export-sheet.tsx"},{"path":"registry/shadcn/builder/expression-builder/expression-checkbox.tsx","content":"$59","type":"registry:component","target":"components/buzzform/builder/expression-builder/expression-checkbox.tsx"},{"path":"registry/shadcn/builder/expression-builder/expression-group.tsx","content":"$5a","type":"registry:component","target":"components/buzzform/builder/expression-builder/expression-group.tsx"},{"path":"registry/shadcn/builder/expression-builder/expression-rule.tsx","content":"$5b","type":"registry:component","target":"components/buzzform/builder/expression-builder/expression-rule.tsx"},{"path":"registry/shadcn/builder/expression-builder/index.tsx","content":"$5c","type":"registry:component","target":"components/buzzform/builder/expression-builder/index.tsx"},{"path":"registry/shadcn/builder/expression-builder/sortable-item.tsx","content":"$5d","type":"registry:component","target":"components/buzzform/builder/expression-builder/sortable-item.tsx"},{"path":"registry/shadcn/builder/field-icon.tsx","content":"$5e","type":"registry:component","target":"components/buzzform/builder/field-icon.tsx"},{"path":"registry/shadcn/builder/field-sidebar.tsx","content":"$5f","type":"registry:component","target":"components/buzzform/builder/field-sidebar.tsx"},{"path":"registry/shadcn/builder/form-builder.tsx","content":"$60","type":"registry:component","target":"components/buzzform/builder/form-builder.tsx"},{"path":"registry/shadcn/builder/header/cloud-save-dialog.tsx","content":"$61","type":"registry:component","target":"components/buzzform/builder/header/cloud-save-dialog.tsx"},{"path":"registry/shadcn/builder/header/form-manager-dialog.tsx","content":"$62","type":"registry:component","target":"components/buzzform/builder/header/form-manager-dialog.tsx"},{"path":"registry/shadcn/builder/header/form-manager-new-panel.tsx","content":"$63","type":"registry:component","target":"components/buzzform/builder/header/form-manager-new-panel.tsx"},{"path":"registry/shadcn/builder/header/form-manager-saved-panel.tsx","content":"$64","type":"registry:component","target":"components/buzzform/builder/header/form-manager-saved-panel.tsx"},{"path":"registry/shadcn/builder/header/index.tsx","content":"$65","type":"registry:component","target":"components/buzzform/builder/header/index.tsx"},{"path":"registry/shadcn/builder/header/save-indicator.tsx","content":"$66","type":"registry:component","target":"components/buzzform/builder/header/save-indicator.tsx"},{"path":"registry/shadcn/builder/layout/array-renderer.tsx","content":"$67","type":"registry:component","target":"components/buzzform/builder/layout/array-renderer.tsx"},{"path":"registry/shadcn/builder/layout/collapsible-renderer.tsx","content":"$68","type":"registry:component","target":"components/buzzform/builder/layout/collapsible-renderer.tsx"},{"path":"registry/shadcn/builder/layout/group-renderer.tsx","content":"$69","type":"registry:component","target":"components/buzzform/builder/layout/group-renderer.tsx"},{"path":"registry/shadcn/builder/layout/row-renderer.tsx","content":"$6a","type":"registry:component","target":"components/buzzform/builder/layout/row-renderer.tsx"},{"path":"registry/shadcn/builder/layout/tabs-renderer.tsx","content":"$6b","type":"registry:component","target":"components/buzzform/builder/layout/tabs-renderer.tsx"},{"path":"registry/shadcn/builder/mobile-overlay.tsx","content":"$6c","type":"registry:component","target":"components/buzzform/builder/mobile-overlay.tsx"},{"path":"registry/shadcn/builder/node-wrapper.tsx","content":"$6d","type":"registry:component","target":"components/buzzform/builder/node-wrapper.tsx"},{"path":"registry/shadcn/builder/preview/preview-form.tsx","content":"\"use client\";\n\nimport { useBuilderFormContext } from \"@buildnbuzz/form-builder-react\";\nimport {\n  Form,\n  FormContent,\n  FormFields,\n  FormActions,\n  FormSubmit,\n} from \"@/registry/shadcn/form\";\n\n/**\n * PreviewForm: Renders the builder's current state as a functional shadcn-based form.\n * Uses the form instance provided by BuilderFormProvider.\n */\nexport function PreviewForm() {\n  const { form, fields } = useBuilderFormContext();\n\n  return (\n    <Form form={form} schema={{ fields }}>\n      <FormContent noValidate className=\"p-0 gap-6\">\n        <FormFields />\n        <FormActions className=\"mt-4\" align=\"start\">\n          <FormSubmit>Submit</FormSubmit>\n        </FormActions>\n      </FormContent>\n    </Form>\n  );\n}\n","type":"registry:component","target":"components/buzzform/builder/preview/preview-form.tsx"},{"path":"registry/shadcn/builder/property-panel.tsx","content":"$6e","type":"registry:component","target":"components/buzzform/builder/property-panel.tsx"},{"path":"registry/shadcn/builder/registry.tsx","content":"$6f","type":"registry:component","target":"components/buzzform/builder/registry.tsx"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>