{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "jsonforms-array-layout",
  "description": "JSONForms accordion-based renderer for arrays of objects. Each item renders in a collapsible panel with add, remove, and reorder controls.",
  "dependencies": [
    "@jsonforms/core",
    "@jsonforms/react"
  ],
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "files": [
    {
      "path": "registry/forms/renderers/array-layout.tsx",
      "content": "'use client';\n\nimport {\n    ArrayLayoutProps,\n    composePaths,\n    createDefaultValue,\n    findUISchema,\n    isObjectArrayWithNesting,\n    rankWith,\n} from '@jsonforms/core';\nimport { JsonFormsDispatch, withJsonFormsArrayLayoutProps } from '@jsonforms/react';\nimport { useMemo } from 'react';\n\nimport {\n    Accordion,\n    AccordionContent,\n    AccordionItem,\n    AccordionTrigger,\n} from '~/components/ui/accordion';\nimport { Button } from '~/components/ui/button';\n\nconst ArrayLayoutRenderer = (props: ArrayLayoutProps) => {\n    const {\n        data,\n        path,\n        schema,\n        uischema,\n        uischemas,\n        renderers,\n        cells,\n        visible,\n        enabled,\n        label,\n        addItem,\n        removeItems,\n        moveUp,\n        moveDown,\n        rootSchema,\n    } = props;\n\n    const childUiSchema = useMemo(\n        () => findUISchema(uischemas ?? [], schema, uischema.scope, path, undefined, uischema, rootSchema),\n        [uischemas, schema, uischema, path, rootSchema]\n    );\n\n    if (!visible) return null;\n\n    return (\n        <div className=\"flex flex-col gap-3\">\n            <div className=\"flex items-center justify-between\">\n                {label && <label className=\"text-xs font-medium text-foreground\">{label}</label>}\n                {enabled && (\n                    <Button\n                        type=\"button\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => addItem(path, createDefaultValue(schema, rootSchema))()}\n                        className=\"text-xs\"\n                    >\n                        + Add\n                    </Button>\n                )}\n            </div>\n\n            {data > 0 && (\n                <Accordion multiple>\n                    {Array.from({ length: data }).map((_, index) => (\n                        <AccordionItem key={index} value={String(index)}>\n                            <AccordionTrigger>\n                                <div className=\"flex items-center gap-2\">\n                                    <span className=\"flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] text-muted-foreground\">\n                                        {index + 1}\n                                    </span>\n                                    <span className=\"text-xs\">{label} {index + 1}</span>\n                                </div>\n                            </AccordionTrigger>\n                            <AccordionContent>\n                                <div className=\"flex flex-col gap-2 pt-1\">\n                                    <JsonFormsDispatch\n                                        schema={schema}\n                                        uischema={childUiSchema}\n                                        path={composePaths(path, `${index}`)}\n                                        renderers={renderers}\n                                        cells={cells}\n                                    />\n                                    {enabled && (\n                                        <div className=\"flex items-center gap-1 pt-1\">\n                                            {moveUp && index > 0 && (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"ghost\"\n                                                    size=\"sm\"\n                                                    onClick={() => moveUp(path, index)()}\n                                                    className=\"h-7 text-xs\"\n                                                >\n                                                    ↑ Up\n                                                </Button>\n                                            )}\n                                            {moveDown && index < data - 1 && (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"ghost\"\n                                                    size=\"sm\"\n                                                    onClick={() => moveDown(path, index)()}\n                                                    className=\"h-7 text-xs\"\n                                                >\n                                                    ↓ Down\n                                                </Button>\n                                            )}\n                                            <Button\n                                                type=\"button\"\n                                                variant=\"ghost\"\n                                                size=\"sm\"\n                                                onClick={() => removeItems && removeItems(path, [index])()}\n                                                className=\"h-7 text-xs text-destructive hover:text-destructive\"\n                                            >\n                                                Remove\n                                            </Button>\n                                        </div>\n                                    )}\n                                </div>\n                            </AccordionContent>\n                        </AccordionItem>\n                    ))}\n                </Accordion>\n            )}\n        </div>\n    );\n};\n\nexport const arrayLayoutTester = rankWith(4, isObjectArrayWithNesting);\nexport default withJsonFormsArrayLayoutProps(ArrayLayoutRenderer);\n",
      "type": "registry:component",
      "target": "components/forms/renderers/array-layout.tsx"
    }
  ],
  "type": "registry:component"
}