4b: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"] 4c: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"] 4d:T7ae5,"use client"; import * as React from "react"; import type { ArrayFieldDef, CoreField } from "@buildnbuzz/form-react"; import { useDataField, RenderFields, useNestedErrorCount, } from "@buildnbuzz/form-react"; import { resolveExpr } from "@buildnbuzz/form-react"; import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core"; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Field, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSet, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // UI options // --------------------------------------------------------------------------- interface ArrayUi { /** Visual style for the array container. Defaults to `"default"`. */ variant?: "default" | "minimal"; /** Row header label — use `{ $data: "fieldName" }` to show a field value. Falls back to `"Item #N"`. */ rowLabel?: unknown; /** Enable drag-to-reorder. Defaults to `true`. */ isSortable?: boolean; /** Show error-count badge in the container header. Defaults to `true`. */ showErrorBadge?: boolean; /** Show a duplicate button per row. Defaults to `false`. */ allowDuplicate?: boolean; /** Require confirmation before deleting all items. Defaults to `true`. */ confirmDelete?: boolean; /** Text and label overrides. */ labels?: { /** Label for the add button. Defaults to `"Add Item"`. */ add?: React.ReactNode; /** Empty state message. Defaults to `"No items added yet."`. */ empty?: React.ReactNode; /** Fallback row label when dynamic path is missing or empty. Defaults to `"Item #N"`. */ rowFallback?: string; /** Title for the delete confirmation dialog. */ confirmDeleteTitle?: React.ReactNode; /** Description for the delete confirmation dialog. */ confirmDeleteDescription?: React.ReactNode; /** Label for the cancel button in delete confirmation. */ confirmDeleteCancelLabel?: string; /** Label for the confirm button in delete confirmation. */ confirmDeleteActionLabel?: string; }; /** Controls required asterisk visibility. */ asterisk?: boolean; } // --------------------------------------------------------------------------- // ArrayItem props type // --------------------------------------------------------------------------- interface ArrayItemProps { id: string; index: number; field: ArrayFieldDef; form: ReturnType["form"]; fieldApiName: string; rowLabel: unknown; rowFallback?: string; contextData: unknown; isSortable: boolean; isDisabled: boolean; isReadOnly: boolean; canRemove: boolean; canDuplicate: boolean; allowDuplicate: boolean; onRemove: (index: number) => void; onDuplicate: (index: number) => void; } // --------------------------------------------------------------------------- // ArrayItem // --------------------------------------------------------------------------- function ArrayItem({ id, index, field, form, fieldApiName, rowLabel, rowFallback, contextData, isSortable, isDisabled, isReadOnly, canRemove, canDuplicate, allowDuplicate, onRemove, onDuplicate, }: ArrayItemProps) { const [isOpen, setIsOpen] = React.useState(true); const rowPath = `${fieldApiName}.${index}`; const rowData = form.getFieldValue(rowPath as never); const rowFormData = rowData && typeof rowData === "object" ? (rowData as Record) : { value: rowData }; const defaultRowLabel = rowFallback ?? `Item ${index + 1}`; const resolvedLabel = rowLabel ? String( resolveExpr( rowLabel as string, { data: rowFormData, context: (contextData ?? {}) as Record }, ) ?? "", ).trim() || defaultRowLabel : field.primitive === true && rowData !== undefined && rowData !== null ? String(rowData) : defaultRowLabel; const errorCount = useNestedErrorCount(field.fields as CoreField[], rowPath); const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id, disabled: !isSortable || isDisabled }); return (

{isSortable && !isDisabled && ( )} {resolvedLabel} {errorCount > 0 && ( {errorCount} )} {!isReadOnly && (

{allowDuplicate && ( )}

)}

); } function MinimalArrayItem({ id, index, field, form, fieldApiName, rowLabel, rowFallback, contextData, isSortable, isDisabled, isReadOnly, canRemove, canDuplicate, allowDuplicate, onRemove, onDuplicate, }: ArrayItemProps) { const rowPath = `${fieldApiName}.${index}`; const rowData = form.getFieldValue(rowPath as never); const rowFormData = rowData && typeof rowData === "object" ? (rowData as Record) : { value: rowData }; const defaultRowLabel = rowFallback ?? `Item ${index + 1}`; const resolvedLabel = rowLabel ? String( resolveExpr( rowLabel as string, { data: rowFormData, context: (contextData ?? {}) as Record }, ) ?? "", ).trim() || defaultRowLabel : ""; const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id, disabled: !isSortable || isDisabled }); return (

{resolvedLabel && field.primitive !== true && (

{resolvedLabel}

)}

{!isReadOnly && (

{isSortable && !isDisabled && ( )} {allowDuplicate && ( )}

)}

); } interface ArrayFieldState { fieldApi: ReturnType["fieldApi"]; field: ArrayFieldDef; form: ReturnType["form"]; isDisabled: boolean; isReadOnly: boolean; isRequired: boolean; label?: React.ReactNode; description?: React.ReactNode; errors: ReturnType["errors"]; isInvalid: boolean; descriptionId?: string; errorId?: string; contextData: unknown; } function DefaultArrayField(state: ArrayFieldState) { const { fieldApi, field, form, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, contextData, } = state; const ui = field.ui as ArrayUi | undefined; const labels = ui?.labels; const addLabel = labels?.add ?? "Add Item"; const emptyMessage = labels?.empty ?? "No items added yet."; const isSortable = ui?.isSortable !== false; const showErrorBadge = ui?.showErrorBadge !== false; const allowDuplicate = ui?.allowDuplicate ?? false; const confirmDelete = ui?.confirmDelete !== false; const items = Array.isArray(fieldApi.state.value) ? fieldApi.state.value : []; const confirmDeleteTitle = labels?.confirmDeleteTitle ?? "Delete all items?"; const confirmDeleteDescription = labels?.confirmDeleteDescription ?? (items.length === 1 ? "This will remove the item. This cannot be undone." : `This will remove all ${items.length} items. This cannot be undone.`); const confirmDeleteCancelLabel = labels?.confirmDeleteCancelLabel ?? "Cancel"; const confirmDeleteActionLabel = labels?.confirmDeleteActionLabel ?? "Delete All"; const [showDeleteAllDialog, setShowDeleteAllDialog] = React.useState(false); const canAddMore = field.maxItems === undefined || items.length < field.maxItems; const canRemoveAny = field.minItems === undefined || items.length > field.minItems; // Stable DnD IDs keyed by position — sufficient since we reorder in-place const dndId = React.useId(); const itemIds = items.map((_, i) => `${fieldApi.name}-${i}`); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ); const handleDragEnd = ({ active, over }: DragEndEvent) => { if (!over || active.id === over.id) return; const from = itemIds.indexOf(active.id as string); const to = itemIds.indexOf(over.id as string); if (from !== -1 && to !== -1) fieldApi.moveValue(from, to); }; const handleAdd = () => { if (!isDisabled && !isReadOnly && canAddMore) fieldApi.pushValue(undefined as never); }; const handleRemove = (index: number) => fieldApi.removeValue(index); const handleDuplicate = (index: number) => { if (canAddMore) fieldApi.insertValue(index + 1, items[index] as never); }; const handleDeleteAll = () => { if (confirmDelete) { setShowDeleteAllDialog(true); } else { for (let i = items.length - 1; i >= 0; i--) fieldApi.removeValue(i); } }; const totalErrorCount = useNestedErrorCount( field.fields as CoreField[], fieldApi.name, ); const isEffectivelyRequired = isRequired || (typeof field.minItems === "number" && field.minItems >= 1); return ( <> {confirmDeleteTitle} {confirmDeleteDescription} {confirmDeleteCancelLabel} { for (let i = items.length - 1; i >= 0; i--) fieldApi.removeValue(i); setShowDeleteAllDialog(false); }} > {confirmDeleteActionLabel}

{/* Header */}

{label && ( {label} {isEffectivelyRequired && ui?.asterisk !== false && ( * )} )} {items.length > 0 && ( {items.length} )} {showErrorBadge && totalErrorCount > 0 && ( {totalErrorCount} )}

{!isReadOnly && (

{items.length > 0 && canRemoveAny && ( )}

)} {description && !isInvalid && ( {description} )} {isInvalid && ( )} {items.length === 0 ? (

{emptyMessage}

{!isReadOnly && ( )}

) : ( <>

{items.map((_, index) => ( ))}

{!isReadOnly && ( )} )}

); } function MinimalArrayField(state: ArrayFieldState) { const { fieldApi, field, form, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, contextData, } = state; const ui = field.ui as ArrayUi | undefined; const labels = ui?.labels; const addLabel = labels?.add ?? "Add Item"; const emptyMessage = labels?.empty ?? "No items added yet."; const isSortable = ui?.isSortable !== false; const showErrorBadge = ui?.showErrorBadge !== false; const allowDuplicate = ui?.allowDuplicate ?? false; const items = Array.isArray(fieldApi.state.value) ? fieldApi.state.value : []; const canAddMore = field.maxItems === undefined || items.length < field.maxItems; const canRemoveAny = field.minItems === undefined || items.length > field.minItems; // Stable DnD IDs keyed by position — sufficient since we reorder in-place const dndId = React.useId(); const itemIds = items.map((_, i) => `${fieldApi.name}-${i}`); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ); const handleDragEnd = ({ active, over }: DragEndEvent) => { if (!over || active.id === over.id) return; const from = itemIds.indexOf(active.id as string); const to = itemIds.indexOf(over.id as string); if (from !== -1 && to !== -1) fieldApi.moveValue(from, to); }; const handleAdd = () => { if (!isDisabled && !isReadOnly && canAddMore) fieldApi.pushValue(undefined as never); }; const handleRemove = (index: number) => fieldApi.removeValue(index); const handleDuplicate = (index: number) => { if (canAddMore) fieldApi.insertValue(index + 1, items[index] as never); }; const totalErrorCount = useNestedErrorCount( field.fields as CoreField[], fieldApi.name, ); const isEffectivelyRequired = isRequired || (typeof field.minItems === "number" && field.minItems >= 1); return (

{label && ( {label} {isEffectivelyRequired && ui?.asterisk !== false && ( * )} )} {items.length > 0 && ( {items.length} )} {showErrorBadge && totalErrorCount > 0 && ( {totalErrorCount} )} {!isReadOnly && (

)}

{description && !isInvalid && ( {description} )} {isInvalid && } {items.length === 0 ? (

{emptyMessage}

{!isReadOnly && ( )}

) : (

{items.map((_, index) => ( ))}

)}

); } export function ArrayField() { const { fieldApi, field, form, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, contextData, } = useDataField(); const state: ArrayFieldState = { fieldApi, field, form, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, contextData, }; const ui = field.ui as ArrayUi | undefined; const variant = ui?.variant ?? "default"; if (variant === "minimal") return ; return ; } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","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/core"}]]}]}],["$","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L4b",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","card","collapsible","badge","alert-dialog"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/fields/array.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/fields/array.tsx"}],"className":"h-[70svh] min-h-80"}]]}]