{
  "name": "lit-ui-block-handle",
  "title": "lit-ui-block-handle",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-editor-context.json"
  ],
  "dependencies": [
    "@egoist/tailwindcss-icons",
    "@iconify-json/lucide",
    "@lit/context",
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/lit/ui/block-handle/block-handle.ts",
      "type": "registry:component",
      "target": "components/editor/ui/block-handle/block-handle.ts",
      "content": "import { ContextConsumer } from '@lit/context'\nimport { html, LitElement } from 'lit'\nimport {\n  registerBlockHandleAddElement,\n  registerBlockHandleDraggableElement,\n  registerBlockHandlePopupElement,\n  registerBlockHandlePositionerElement,\n  registerBlockHandleRootElement,\n} from 'prosekit/lit/block-handle'\n\nimport { editorContext } from '../editor-context.ts'\n\nclass LitBlockHandle extends LitElement {\n  declare dir: 'ltr' | 'rtl' | 'auto'\n\n  private _editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override render() {\n    const placement = this.dir === 'rtl' ? 'right' : 'left'\n    const editor = this._editorConsumer.value ?? null\n\n    return html`<prosekit-block-handle-root .editor=${editor}>\n      <prosekit-block-handle-positioner .placement=${placement} class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <prosekit-block-handle-popup 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          <prosekit-block-handle-add .editor=${editor} 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          </prosekit-block-handle-add>\n          <prosekit-block-handle-draggable .editor=${editor} 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          </prosekit-block-handle-draggable>\n        </prosekit-block-handle-popup>\n      </prosekit-block-handle-positioner>\n    </prosekit-block-handle-root>`\n  }\n}\n\nexport function registerLitEditorBlockHandle() {\n  registerBlockHandleAddElement()\n  registerBlockHandleDraggableElement()\n  registerBlockHandlePopupElement()\n  registerBlockHandlePositionerElement()\n  registerBlockHandleRootElement()\n\n  if (customElements.get('lit-editor-block-handle')) return\n  customElements.define('lit-editor-block-handle', LitBlockHandle)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-block-handle': LitBlockHandle\n  }\n}\n"
    },
    {
      "path": "registry/src/lit/ui/block-handle/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/block-handle/index.ts",
      "content": "export { registerLitEditorBlockHandle } from './block-handle.ts'\n"
    }
  ],
  "meta": {
    "hasIcons": true,
    "hidden": false,
    "story": "",
    "framework": "lit",
    "accumulatedFiles": [
      "registry/src/lit/ui/block-handle/block-handle.ts",
      "registry/src/lit/ui/block-handle/index.ts",
      "registry/src/lit/ui/editor-context.ts"
    ],
    "internalDependencies": [
      "lit-ui-editor-context"
    ]
  },
  "css": {
    "@plugin @egoist/tailwindcss-icons": {}
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}