{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-569",
  "type": "registry:component",
  "title": "Comp 569",
  "description": "Comp 569",
  "files": [
    {
      "path": "registry/ui-basic/comp-569.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState } from \"react\";\r\n\r\nimport {\r\n\tTree,\r\n\tTreeDragLine,\r\n\tTreeItem,\r\n\tTreeItemLabel,\r\n} from \"@/components/ui/tree\";\r\nimport {\r\n\tcreateOnDropHandler,\r\n\tdragAndDropFeature,\r\n\thotkeysCoreFeature,\r\n\tkeyboardDragAndDropFeature,\r\n\tselectionFeature,\r\n\tsyncDataLoaderFeature,\r\n} from \"@headless-tree/core\";\r\nimport { AssistiveTreeDescription, useTree } from \"@headless-tree/react\";\r\nimport { FolderIcon, FolderOpenIcon } from \"lucide-react\";\r\n\r\ninterface Item {\r\n\tname: string;\r\n\tchildren?: string[];\r\n}\r\n\r\nconst initialItems: Record<string, Item> = {\r\n\tcompany: {\r\n\t\tname: \"Company\",\r\n\t\tchildren: [\"engineering\", \"marketing\", \"operations\"],\r\n\t},\r\n\tengineering: {\r\n\t\tname: \"Engineering\",\r\n\t\tchildren: [\"frontend\", \"backend\", \"platform-team\"],\r\n\t},\r\n\tfrontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\r\n\t\"design-system\": {\r\n\t\tname: \"Design System\",\r\n\t\tchildren: [\"components\", \"tokens\", \"guidelines\"],\r\n\t},\r\n\tcomponents: { name: \"Components\" },\r\n\ttokens: { name: \"Tokens\" },\r\n\tguidelines: { name: \"Guidelines\" },\r\n\t\"web-platform\": { name: \"Web Platform\" },\r\n\tbackend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\r\n\tapis: { name: \"APIs\" },\r\n\tinfrastructure: { name: \"Infrastructure\" },\r\n\t\"platform-team\": { name: \"Platform Team\" },\r\n\tmarketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\r\n\tcontent: { name: \"Content\" },\r\n\tseo: { name: \"SEO\" },\r\n\toperations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\r\n\thr: { name: \"HR\" },\r\n\tfinance: { name: \"Finance\" },\r\n};\r\n\r\nconst indent = 20;\r\n\r\nexport default function Component() {\r\n\tconst [items, setItems] = useState(initialItems);\r\n\r\n\tconst tree = useTree<Item>({\r\n\t\tinitialState: {\r\n\t\t\texpandedItems: [\"engineering\", \"frontend\", \"design-system\"],\r\n\t\t\tselectedItems: [\"components\"],\r\n\t\t},\r\n\t\tindent,\r\n\t\trootItemId: \"company\",\r\n\t\tgetItemName: (item) => item.getItemData().name,\r\n\t\tisItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\r\n\t\tcanReorder: true,\r\n\t\tonDrop: createOnDropHandler((parentItem, newChildrenIds) => {\r\n\t\t\tsetItems((prevItems) => ({\r\n\t\t\t\t...prevItems,\r\n\t\t\t\t[parentItem.getId()]: {\r\n\t\t\t\t\t...prevItems[parentItem.getId()],\r\n\t\t\t\t\tchildren: newChildrenIds,\r\n\t\t\t\t},\r\n\t\t\t}));\r\n\t\t}),\r\n\t\tdataLoader: {\r\n\t\t\tgetItem: (itemId) => items[itemId],\r\n\t\t\tgetChildren: (itemId) => items[itemId].children ?? [],\r\n\t\t},\r\n\t\tfeatures: [\r\n\t\t\tsyncDataLoaderFeature,\r\n\t\t\tselectionFeature,\r\n\t\t\thotkeysCoreFeature,\r\n\t\t\tdragAndDropFeature,\r\n\t\t\tkeyboardDragAndDropFeature,\r\n\t\t],\r\n\t});\r\n\r\n\treturn (\r\n\t\t<div className=\"flex h-full flex-col gap-2 first:*:grow\">\r\n\t\t\t<Tree indent={indent} tree={tree}>\r\n\t\t\t\t<AssistiveTreeDescription tree={tree} />\r\n\t\t\t\t{tree.getItems().map((item) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<TreeItem key={item.getId()} item={item}>\r\n\t\t\t\t\t\t\t<TreeItemLabel>\r\n\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t\t\t{item.isFolder() &&\r\n\t\t\t\t\t\t\t\t\t\t(item.isExpanded() ? (\r\n\t\t\t\t\t\t\t\t\t\t\t<FolderOpenIcon className=\"text-muted-foreground pointer-events-none size-4\" />\r\n\t\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\t<FolderIcon className=\"text-muted-foreground pointer-events-none size-4\" />\r\n\t\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t\t{item.getItemName()}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t</TreeItemLabel>\r\n\t\t\t\t\t\t</TreeItem>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t\t<TreeDragLine />\r\n\t\t\t</Tree>\r\n\r\n\t\t\t<p\r\n\t\t\t\taria-live=\"polite\"\r\n\t\t\t\trole=\"region\"\r\n\t\t\t\tclassName=\"text-muted-foreground mt-2 text-xs\"\r\n\t\t\t>\r\n\t\t\t\tTree with multi-select and drag and drop ∙{\" \"}\r\n\t\t\t\t<a\r\n\t\t\t\t\thref=\"https://headless-tree.lukasbach.com\"\r\n\t\t\t\t\tclassName=\"hover:text-foreground underline\"\r\n\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t>\r\n\t\t\t\t\tAPI\r\n\t\t\t\t</a>\r\n\t\t\t</p>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}