{
  "name": "svelte-ui-block-handle",
  "title": "svelte-ui-block-handle",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [],
  "dependencies": [
    "@egoist/tailwindcss-icons",
    "@iconify-json/lucide",
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/svelte/ui/block-handle/block-handle.svelte",
      "type": "registry:component",
      "target": "components/editor/ui/block-handle/block-handle.svelte",
      "content": "<script lang=\"ts\">\nimport {\n  BlockHandleAdd,\n  BlockHandleDraggable,\n  BlockHandlePopup,\n  BlockHandlePositioner,\n  BlockHandleRoot,\n} from 'prosekit/svelte/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props: Props = $props()\n</script>\n\n<BlockHandleRoot>\n  <BlockHandlePositioner placement={props.dir === 'rtl' ? 'right' : 'left'} class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <BlockHandlePopup class=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\n      <BlockHandleAdd class=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n        <div class=\"i-lucide-plus size-5 block\"></div>\n      </BlockHandleAdd>\n      <BlockHandleDraggable class=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n        <div class=\"i-lucide-grip-vertical size-5 block\"></div>\n      </BlockHandleDraggable>\n    </BlockHandlePopup>\n  </BlockHandlePositioner>\n</BlockHandleRoot>\n"
    },
    {
      "path": "registry/src/svelte/ui/block-handle/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/block-handle/index.ts",
      "content": "export { default as BlockHandle } from './block-handle.svelte'\n"
    }
  ],
  "meta": {
    "hasIcons": true,
    "hidden": false,
    "story": "",
    "framework": "svelte",
    "accumulatedFiles": [
      "registry/src/svelte/ui/block-handle/block-handle.svelte",
      "registry/src/svelte/ui/block-handle/index.ts"
    ],
    "internalDependencies": []
  },
  "css": {
    "@plugin @egoist/tailwindcss-icons": {}
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}