prosekit-registry 0.0.13 → 0.0.15

package/dist/r/solid-ui-table-handle.json

@@ -20,7 +20,7 @@
       "path": "registry/src/solid/ui/table-handle/table-handle.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/table-handle/table-handle.tsx",
-      "content": "import type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/solid'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/solid/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/solid/table-handle'\nimport { Show, type JSX } from 'solid-js'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function TableHandle(props: Props): JSX.Element {\n  const state = useEditorDerivedValue(getTableHandleState)\n\n  return (\n    <TableHandleRoot>\n      <TableHandleDragPreview />\n      <TableHandleDropIndicator />\n      <TableHandleColumnPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n          <TableHandleColumnMenuRoot>\n            <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleColumnMenuTrigger>\n            <MenuPositioner class=\"overflow-visible bg-transparent\">\n              <MenuPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableColumnBefore.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnBefore.command()}\n                  >\n                    <span>Insert Left</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableColumnAfter.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnAfter.command()}\n                  >\n                    <span>Insert Right</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableColumn.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableColumn.command()}\n                  >\n                    <span>Delete Column</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleColumnMenuRoot>\n        </TableHandleColumnPopup>\n      </TableHandleColumnPositioner>\n      <TableHandleRowPositioner\n        placement={props.dir === 'rtl' ? 'right' : 'left'}\n        class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n      >\n        <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n          <TableHandleRowMenuRoot>\n            <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleRowMenuTrigger>\n            <MenuPositioner class=\"overflow-visible bg-transparent\">\n              <MenuPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableRowAbove.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowAbove.command()}\n                  >\n                    <span>Insert Above</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableRowBelow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowBelow.command()}\n                  >\n                    <span>Insert Below</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableRow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableRow.command()}\n                  >\n                    <span>Delete Row</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleRowMenuRoot>\n        </TableHandleRowPopup>\n      </TableHandleRowPositioner>\n    </TableHandleRoot>\n  )\n}\n"
+      "content": "import type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/solid'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/solid/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/solid/table-handle'\nimport { Show, type JSX } from 'solid-js'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function TableHandle(props: Props): JSX.Element {\n  const state = useEditorDerivedValue(getTableHandleState)\n\n  return (\n    <TableHandleRoot>\n      <TableHandleDragPreview />\n      <TableHandleDropIndicator />\n      <TableHandleColumnPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition 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          <TableHandleColumnMenuRoot>\n            <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleColumnMenuTrigger>\n            <MenuPositioner class=\"overflow-visible bg-transparent\">\n              <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableColumnBefore.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnBefore.command()}\n                  >\n                    <span>Insert Left</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableColumnAfter.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableColumnAfter.command()}\n                  >\n                    <span>Insert Right</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableColumn.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableColumn.command()}\n                  >\n                    <span>Delete Column</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleColumnMenuRoot>\n        </TableHandleColumnPopup>\n      </TableHandleColumnPositioner>\n      <TableHandleRowPositioner\n        placement={props.dir === 'rtl' ? 'right' : 'left'}\n        class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition 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          <TableHandleRowMenuRoot>\n            <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n              <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n            </TableHandleRowMenuTrigger>\n            <MenuPositioner class=\"overflow-visible bg-transparent\">\n              <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                <Show when={state().addTableRowAbove.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowAbove.command()}\n                  >\n                    <span>Insert Above</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().addTableRowBelow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().addTableRowBelow.command()}\n                  >\n                    <span>Insert Below</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteCellSelection.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteCellSelection.command()}\n                  >\n                    <span>Clear Contents</span>\n                    <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTableRow.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    onSelect={() => state().deleteTableRow.command()}\n                  >\n                    <span>Delete Row</span>\n                  </MenuItem>\n                </Show>\n                <Show when={state().deleteTable.canExec}>\n                  <MenuItem\n                    class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                    attr:data-danger=\"\"\n                    onSelect={() => state().deleteTable.command()}\n                  >\n                    <span>Delete Table</span>\n                  </MenuItem>\n                </Show>\n              </MenuPopup>\n            </MenuPositioner>\n          </TableHandleRowMenuRoot>\n        </TableHandleRowPopup>\n      </TableHandleRowPositioner>\n    </TableHandleRoot>\n  )\n}\n"
     }
   ],
   "meta": {

package/dist/r/solid-ui-tag-menu.json

@@ -18,7 +18,7 @@
       "path": "registry/src/solid/ui/tag-menu/tag-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/tag-menu/tag-menu.tsx",
-      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\nconst regex = /#[\\da-z]*$/i\n\nexport default function TagMenu(props: { tags: { id: number; label: string }[] }): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleTagInsert = (id: number, label: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '#' + label,\n      kind: 'tag',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot regex={regex}>\n      <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n            No results\n          </AutocompleteEmpty>\n\n          <For each={props.tags}>\n            {(tag) => (\n              <AutocompleteItem\n                class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={() => handleTagInsert(tag.id, tag.label)}\n              >\n                #{tag.label}\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\nconst regex = /#[\\da-z]*$/i\n\nexport default function TagMenu(props: { tags: { id: number; label: string }[] }): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleTagInsert = (id: number, label: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '#' + label,\n      kind: 'tag',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot regex={regex}>\n      <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n            No results\n          </AutocompleteEmpty>\n\n          <For each={props.tags}>\n            {(tag) => (\n              <AutocompleteItem\n                class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={() => handleTagInsert(tag.id, tag.label)}\n              >\n                #{tag.label}\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     }
   ],
   "meta": {

package/dist/r/solid-ui-user-menu.json

@@ -18,7 +18,7 @@
       "path": "registry/src/solid/ui/user-menu/user-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/ui/user-menu/user-menu.tsx",
-      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n\nexport default function UserMenu(props: {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleUserInsert = (id: number, username: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '@' + username,\n      kind: 'user',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n      onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n    >\n      <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n            {props.loading ? 'Loading...' : 'No results'}\n          </AutocompleteEmpty>\n\n          <For each={props.users}>\n            {(user) => (\n              <AutocompleteItem\n                class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={() => handleUserInsert(user.id, user.name)}\n              >\n                <span class={props.loading ? 'opacity-50' : undefined}>\n                  {user.name}\n                </span>\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/solid'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/solid/autocomplete'\nimport { For, type JSX } from 'solid-js'\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n\nexport default function UserMenu(props: {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}): JSX.Element {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleUserInsert = (id: number, username: string) => {\n    editor().commands.insertMention({\n      id: id.toString(),\n      value: '@' + username,\n      kind: 'user',\n    })\n    editor().commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n      onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n    >\n      <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n            {props.loading ? 'Loading...' : 'No results'}\n          </AutocompleteEmpty>\n\n          <For each={props.users}>\n            {(user) => (\n              <AutocompleteItem\n                class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={() => handleUserInsert(user.id, user.name)}\n              >\n                <span class={props.loading ? 'opacity-50' : undefined}>\n                  {user.name}\n                </span>\n              </AutocompleteItem>\n            )}\n          </For>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
     }
   ],
   "meta": {

package/dist/r/svelte-example-text-color.json

@@ -33,7 +33,7 @@
       "path": "registry/src/svelte/examples/text-color/inline-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\nimport { toStore } from 'svelte/store'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n\nlet open = $state(false)\n\nconst keymap = $derived({\n  Escape: () => {\n    if (open) {\n      open = false\n      return true\n    }\n    return false\n  },\n})\n\nuseKeymap(toStore(() => keymap))\n</script>\n\n<InlinePopoverRoot\n  {open}\n  onOpenChange={(event) => open = event.detail}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <InlinePopoverPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Text color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $textColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Text: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <span class=\"text-base font-medium\" style:color={color.value}>\n                  A\n                </span>\n              </Button>\n            {/each}\n          </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Background color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $backgroundColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Background: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  style:background-color={color.value}\n                >\n                </div>\n              </Button>\n            {/each}\n          </div>\n        </div>\n      </div>\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\nimport { toStore } from 'svelte/store'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n\nlet open = $state(false)\n\nconst keymap = $derived({\n  Escape: () => {\n    if (open) {\n      open = false\n      return true\n    }\n    return false\n  },\n})\n\nuseKeymap(toStore(() => keymap))\n</script>\n\n<InlinePopoverRoot\n  {open}\n  onOpenChange={(event) => open = event.detail}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <InlinePopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n      <div class=\"flex flex-col gap-4 p-4\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Text color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $textColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Text: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <span class=\"text-base font-medium\" style:color={color.value}>\n                  A\n                </span>\n              </Button>\n            {/each}\n          </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"text-sm\">Background color</div>\n          <div class=\"grid grid-cols-5 gap-1\">\n            {#each $backgroundColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Background: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  style:background-color={color.value}\n                >\n                </div>\n              </Button>\n            {/each}\n          </div>\n        </div>\n      </div>\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
     }
   ],
   "meta": {

package/dist/r/svelte-ui-block-handle.json

@@ -14,7 +14,7 @@
       "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 bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <BlockHandlePopup class=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\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"
+      "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 bg-transparent 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 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",

package/dist/r/svelte-ui-button.json

@@ -12,7 +12,7 @@
       "path": "registry/src/svelte/ui/button/button.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/button/button.svelte",
-      "content": "<script lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/svelte/tooltip'\n\ninterface Props {\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n  children?: import('svelte').Snippet\n}\n\nconst props: Props = $props()\nconst pressed = $derived(props.pressed ?? false)\nconst disabled = $derived(props.disabled ?? false)\n</script>\n\n<TooltipRoot>\n  <TooltipTrigger class=\"block\">\n    <button\n      data-state={pressed ? 'on' : 'off'}\n      {disabled}\n      class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n      onclick={props.onClick}\n      onmousedown={(e) => e.preventDefault()}\n    >\n      {@render props.children?.()}\n      {#if props.tooltip}\n        <span class=\"sr-only\">{props.tooltip}</span>\n      {/if}\n    </button>\n  </TooltipTrigger>\n  {#if props.tooltip}\n    <TooltipPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n      <TooltipPopup class=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {props.tooltip}\n      </TooltipPopup>\n    </TooltipPositioner>\n  {/if}\n</TooltipRoot>\n"
+      "content": "<script lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/svelte/tooltip'\n\ninterface Props {\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n  children?: import('svelte').Snippet\n}\n\nconst props: Props = $props()\nconst pressed = $derived(props.pressed ?? false)\nconst disabled = $derived(props.disabled ?? false)\n</script>\n\n<TooltipRoot>\n  <TooltipTrigger class=\"block\">\n    <button\n      data-state={pressed ? 'on' : 'off'}\n      {disabled}\n      class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n      onclick={props.onClick}\n      onmousedown={(e) => e.preventDefault()}\n    >\n      {@render props.children?.()}\n      {#if props.tooltip}\n        <span class=\"sr-only\">{props.tooltip}</span>\n      {/if}\n    </button>\n  </TooltipTrigger>\n  {#if props.tooltip}\n    <TooltipPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TooltipPopup class=\"flex box-border origin-(--transform-origin) transition 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 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {props.tooltip}\n      </TooltipPopup>\n    </TooltipPositioner>\n  {/if}\n</TooltipRoot>\n"
     },
     {
       "path": "registry/src/svelte/ui/button/index.ts",

package/dist/r/svelte-ui-image-upload-popover.json

@@ -14,7 +14,7 @@
       "path": "registry/src/svelte/ui/image-upload-popover/image-upload-popover.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/image-upload-popover/image-upload-popover.svelte",
-      "content": "<script lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/svelte'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/svelte/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\n\nimport { Button } from '../button'\n\ninterface Props {\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n  children?: import('svelte').Snippet\n}\n\nconst props: Props = $props()\n\nlet open = $state(false)\nlet url = $state('')\nlet file = $state<File | null>(null)\nconst ariaId = $props.id()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file = selectedFile\n    url = ''\n  } else {\n    file = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url = inputUrl\n    file = null\n  } else {\n    url = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url = ''\n    file = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url) {\n    $editor.commands.insertImage({ src: url })\n  } else if (file) {\n    $editor.commands.uploadImage({ file, uploader: props.uploader })\n  }\n  open = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open = event.detail\n}\n</script>\n\n<PopoverRoot {open} onOpenChange={handleOpenChange}>\n  <PopoverTrigger>\n    <Button pressed={open} disabled={props.disabled} tooltip={props.tooltip}>\n      {@render props.children?.()}\n    </Button>\n  </PopoverTrigger>\n\n  <PopoverPositioner\n    placement=\"bottom\"\n    class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n  ><PopoverPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col gap-y-4 p-6 text-sm w-sm\">\n      {#if !file}\n        <label for=\"id-link-{ariaId}\">Embed Link</label>\n        <input\n          id=\"id-link-{ariaId}\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          value={url}\n          oninput={handleUrlChange}\n        />\n      {/if}\n\n      {#if !url}\n        <label for=\"id-upload-{ariaId}\">Upload</label>\n        <input\n          id=\"id-upload-{ariaId}\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          onchange={handleFileChange}\n        />\n      {/if}\n\n      {#if url}\n        <button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onclick={handleSubmit}>\n          Insert Image\n        </button>\n      {/if}\n\n      {#if file}\n        <button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onclick={handleSubmit}>\n          Upload Image\n        </button>\n      {/if}\n    </PopoverPopup></PopoverPositioner>\n</PopoverRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/svelte'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/svelte/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\n\nimport { Button } from '../button'\n\ninterface Props {\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n  children?: import('svelte').Snippet\n}\n\nconst props: Props = $props()\n\nlet open = $state(false)\nlet url = $state('')\nlet file = $state<File | null>(null)\nconst ariaId = $props.id()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file = selectedFile\n    url = ''\n  } else {\n    file = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url = inputUrl\n    file = null\n  } else {\n    url = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url = ''\n    file = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url) {\n    $editor.commands.insertImage({ src: url })\n  } else if (file) {\n    $editor.commands.uploadImage({ file, uploader: props.uploader })\n  }\n  open = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open = event.detail\n}\n</script>\n\n<PopoverRoot {open} onOpenChange={handleOpenChange}>\n  <PopoverTrigger>\n    <Button pressed={open} disabled={props.disabled} tooltip={props.tooltip}>\n      {@render props.children?.()}\n    </Button>\n  </PopoverTrigger>\n\n  <PopoverPositioner\n    placement=\"bottom\"\n    class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n  ><PopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col gap-y-4 p-6 text-sm w-sm\">\n      {#if !file}\n        <label for=\"id-link-{ariaId}\">Embed Link</label>\n        <input\n          id=\"id-link-{ariaId}\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          value={url}\n          oninput={handleUrlChange}\n        />\n      {/if}\n\n      {#if !url}\n        <label for=\"id-upload-{ariaId}\">Upload</label>\n        <input\n          id=\"id-upload-{ariaId}\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          onchange={handleFileChange}\n        />\n      {/if}\n\n      {#if url}\n        <button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onclick={handleSubmit}>\n          Insert Image\n        </button>\n      {/if}\n\n      {#if file}\n        <button class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onclick={handleSubmit}>\n          Upload Image\n        </button>\n      {/if}\n    </PopoverPopup></PopoverPositioner>\n</PopoverRoot>\n"
     },
     {
       "path": "registry/src/svelte/ui/image-upload-popover/index.ts",

package/dist/r/svelte-ui-inline-menu.json

@@ -22,7 +22,7 @@
       "path": "registry/src/svelte/ui/inline-menu/inline-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/inline-menu/inline-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { LinkAttrs } from 'prosekit/extensions/link'\nimport type { EditorState } from 'prosekit/pm/state'\nimport { useEditor, useEditorDerivedValue } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\n\nimport { Button } from '../button'\n\nfunction getInlineMenuItems(editor: Editor<BasicExtension>) {\n  return {\n    bold: editor.commands.toggleBold\n      ? {\n        isActive: editor.marks.bold.isActive(),\n        canExec: editor.commands.toggleBold.canExec(),\n        command: () => editor.commands.toggleBold(),\n      }\n      : undefined,\n    italic: editor.commands.toggleItalic\n      ? {\n        isActive: editor.marks.italic.isActive(),\n        canExec: editor.commands.toggleItalic.canExec(),\n        command: () => editor.commands.toggleItalic(),\n      }\n      : undefined,\n    underline: editor.commands.toggleUnderline\n      ? {\n        isActive: editor.marks.underline.isActive(),\n        canExec: editor.commands.toggleUnderline.canExec(),\n        command: () => editor.commands.toggleUnderline(),\n      }\n      : undefined,\n    strike: editor.commands.toggleStrike\n      ? {\n        isActive: editor.marks.strike.isActive(),\n        canExec: editor.commands.toggleStrike.canExec(),\n        command: () => editor.commands.toggleStrike(),\n      }\n      : undefined,\n    code: editor.commands.toggleCode\n      ? {\n        isActive: editor.marks.code.isActive(),\n        canExec: editor.commands.toggleCode.canExec(),\n        command: () => editor.commands.toggleCode(),\n      }\n      : undefined,\n    link: editor.commands.addLink\n      ? {\n        isActive: editor.marks.link.isActive(),\n        canExec: editor.commands.addLink.canExec({ href: '' }),\n        command: () => editor.commands.expandLink(),\n        currentLink: getCurrentLink(editor.state) || '',\n      }\n      : undefined,\n  }\n}\n\nfunction getCurrentLink(state: EditorState): string | undefined {\n  const from = state.selection.$from\n  const marks = from.marksAcross(from)\n  if (!marks) {\n    return\n  }\n  for (const mark of marks) {\n    if (mark.type.name === 'link') {\n      return (mark.attrs as LinkAttrs).href\n    }\n  }\n}\n\nconst editor = useEditor<BasicExtension>()\nconst items = useEditorDerivedValue(getInlineMenuItems)\n\nlet linkMenuOpen = $state(false)\nfunction toggleLinkMenuOpen() {\n  linkMenuOpen = !linkMenuOpen\n}\n\nfunction handleLinkUpdate(href?: string) {\n  if (href) {\n    $editor.commands.addLink({ href })\n  } else {\n    $editor.commands.removeLink()\n  }\n\n  linkMenuOpen = false\n  $editor.focus()\n}\n</script>\n\n<InlinePopoverRoot\n  onOpenChange={(event) => {\n    if (!event.detail) linkMenuOpen = false\n  }}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <InlinePopoverPopup\n      data-testid=\"inline-menu-main\"\n      class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\"\n    >\n      {#if $items.bold}\n        <Button\n          pressed={$items.bold.isActive}\n          disabled={!$items.bold.canExec}\n          onClick={$items.bold.command}\n          tooltip=\"Bold\"\n        >\n          <div class=\"i-lucide-bold size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.italic}\n        <Button\n          pressed={$items.italic.isActive}\n          disabled={!$items.italic.canExec}\n          onClick={$items.italic.command}\n          tooltip=\"Italic\"\n        >\n          <div class=\"i-lucide-italic size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.underline}\n        <Button\n          pressed={$items.underline.isActive}\n          disabled={!$items.underline.canExec}\n          onClick={$items.underline.command}\n          tooltip=\"Underline\"\n        >\n          <div class=\"i-lucide-underline size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.strike}\n        <Button\n          pressed={$items.strike.isActive}\n          disabled={!$items.strike.canExec}\n          onClick={$items.strike.command}\n          tooltip=\"Strikethrough\"\n        >\n          <div class=\"i-lucide-strikethrough size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.code}\n        <Button\n          pressed={$items.code.isActive}\n          disabled={!$items.code.canExec}\n          onClick={$items.code.command}\n          tooltip=\"Code\"\n        >\n          <div class=\"i-lucide-code size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.link?.canExec && $items.link}\n        <Button\n          pressed={$items.link.isActive}\n          onClick={() => {\n            $items.link!.command()\n            toggleLinkMenuOpen()\n          }}\n          tooltip=\"Link\"\n        >\n          <div class=\"i-lucide-link size-5 block\"></div>\n        </Button>\n      {/if}\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n\n<InlinePopoverRoot\n  defaultOpen={false}\n  open={linkMenuOpen}\n  onOpenChange={(event) => {\n    linkMenuOpen = event.detail\n  }}\n>\n  <InlinePopoverPositioner placement=\"bottom\" class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <InlinePopoverPopup\n      data-testid=\"inline-menu-link\"\n      class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch\"\n    >\n      {#if linkMenuOpen && $items.link}\n        <form\n          onsubmit={(event) => {\n            event.preventDefault()\n            const target = event.target as HTMLFormElement | null\n            const href = target?.querySelector('input')?.value?.trim()\n            handleLinkUpdate(href)\n          }}\n        >\n          <input\n            placeholder=\"Paste the link...\"\n            value={$items.link.currentLink || ''}\n            class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          />\n        </form>\n      {/if}\n      {#if $items.link?.isActive}\n        <button\n          class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-9 px-3\"\n          onclick={() => handleLinkUpdate()}\n          onmousedown={(e) => e.preventDefault()}\n        >\n          Remove link\n        </button>\n      {/if}\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { LinkAttrs } from 'prosekit/extensions/link'\nimport type { EditorState } from 'prosekit/pm/state'\nimport { useEditor, useEditorDerivedValue } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\n\nimport { Button } from '../button'\n\nfunction getInlineMenuItems(editor: Editor<BasicExtension>) {\n  return {\n    bold: editor.commands.toggleBold\n      ? {\n        isActive: editor.marks.bold.isActive(),\n        canExec: editor.commands.toggleBold.canExec(),\n        command: () => editor.commands.toggleBold(),\n      }\n      : undefined,\n    italic: editor.commands.toggleItalic\n      ? {\n        isActive: editor.marks.italic.isActive(),\n        canExec: editor.commands.toggleItalic.canExec(),\n        command: () => editor.commands.toggleItalic(),\n      }\n      : undefined,\n    underline: editor.commands.toggleUnderline\n      ? {\n        isActive: editor.marks.underline.isActive(),\n        canExec: editor.commands.toggleUnderline.canExec(),\n        command: () => editor.commands.toggleUnderline(),\n      }\n      : undefined,\n    strike: editor.commands.toggleStrike\n      ? {\n        isActive: editor.marks.strike.isActive(),\n        canExec: editor.commands.toggleStrike.canExec(),\n        command: () => editor.commands.toggleStrike(),\n      }\n      : undefined,\n    code: editor.commands.toggleCode\n      ? {\n        isActive: editor.marks.code.isActive(),\n        canExec: editor.commands.toggleCode.canExec(),\n        command: () => editor.commands.toggleCode(),\n      }\n      : undefined,\n    link: editor.commands.addLink\n      ? {\n        isActive: editor.marks.link.isActive(),\n        canExec: editor.commands.addLink.canExec({ href: '' }),\n        command: () => editor.commands.expandLink(),\n        currentLink: getCurrentLink(editor.state) || '',\n      }\n      : undefined,\n  }\n}\n\nfunction getCurrentLink(state: EditorState): string | undefined {\n  const from = state.selection.$from\n  const marks = from.marksAcross(from)\n  if (!marks) {\n    return\n  }\n  for (const mark of marks) {\n    if (mark.type.name === 'link') {\n      return (mark.attrs as LinkAttrs).href\n    }\n  }\n}\n\nconst editor = useEditor<BasicExtension>()\nconst items = useEditorDerivedValue(getInlineMenuItems)\n\nlet linkMenuOpen = $state(false)\nfunction toggleLinkMenuOpen() {\n  linkMenuOpen = !linkMenuOpen\n}\n\nfunction handleLinkUpdate(href?: string) {\n  if (href) {\n    $editor.commands.addLink({ href })\n  } else {\n    $editor.commands.removeLink()\n  }\n\n  linkMenuOpen = false\n  $editor.focus()\n}\n</script>\n\n<InlinePopoverRoot\n  onOpenChange={(event) => {\n    if (!event.detail) linkMenuOpen = false\n  }}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <InlinePopoverPopup\n      data-testid=\"inline-menu-main\"\n      class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\"\n    >\n      {#if $items.bold}\n        <Button\n          pressed={$items.bold.isActive}\n          disabled={!$items.bold.canExec}\n          onClick={$items.bold.command}\n          tooltip=\"Bold\"\n        >\n          <div class=\"i-lucide-bold size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.italic}\n        <Button\n          pressed={$items.italic.isActive}\n          disabled={!$items.italic.canExec}\n          onClick={$items.italic.command}\n          tooltip=\"Italic\"\n        >\n          <div class=\"i-lucide-italic size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.underline}\n        <Button\n          pressed={$items.underline.isActive}\n          disabled={!$items.underline.canExec}\n          onClick={$items.underline.command}\n          tooltip=\"Underline\"\n        >\n          <div class=\"i-lucide-underline size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.strike}\n        <Button\n          pressed={$items.strike.isActive}\n          disabled={!$items.strike.canExec}\n          onClick={$items.strike.command}\n          tooltip=\"Strikethrough\"\n        >\n          <div class=\"i-lucide-strikethrough size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.code}\n        <Button\n          pressed={$items.code.isActive}\n          disabled={!$items.code.canExec}\n          onClick={$items.code.command}\n          tooltip=\"Code\"\n        >\n          <div class=\"i-lucide-code size-5 block\"></div>\n        </Button>\n      {/if}\n      {#if $items.link?.canExec && $items.link}\n        <Button\n          pressed={$items.link.isActive}\n          onClick={() => {\n            $items.link!.command()\n            toggleLinkMenuOpen()\n          }}\n          tooltip=\"Link\"\n        >\n          <div class=\"i-lucide-link size-5 block\"></div>\n        </Button>\n      {/if}\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n\n<InlinePopoverRoot\n  defaultOpen={false}\n  open={linkMenuOpen}\n  onOpenChange={(event) => {\n    linkMenuOpen = event.detail\n  }}\n>\n  <InlinePopoverPositioner placement=\"bottom\" class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <InlinePopoverPopup\n      data-testid=\"inline-menu-link\"\n      class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch\"\n    >\n      {#if linkMenuOpen && $items.link}\n        <form\n          onsubmit={(event) => {\n            event.preventDefault()\n            const target = event.target as HTMLFormElement | null\n            const href = target?.querySelector('input')?.value?.trim()\n            handleLinkUpdate(href)\n          }}\n        >\n          <input\n            placeholder=\"Paste the link...\"\n            value={$items.link.currentLink || ''}\n            class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          />\n        </form>\n      {/if}\n      {#if $items.link?.isActive}\n        <button\n          class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-9 px-3\"\n          onclick={() => handleLinkUpdate()}\n          onmousedown={(e) => e.preventDefault()}\n        >\n          Remove link\n        </button>\n      {/if}\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
     }
   ],
   "meta": {

package/dist/r/svelte-ui-slash-menu.json

@@ -30,7 +30,7 @@
       "path": "registry/src/svelte/ui/slash-menu/slash-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/slash-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/svelte'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/svelte/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty.svelte'\nimport SlashMenuItem from './slash-menu-item.svelte'\n\nconst editor = useEditor<BasicExtension>()\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n</script>\n\n<AutocompleteRoot {regex}>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <SlashMenuItem\n        label=\"Text\"\n        onSelect={() => $editor.commands.setParagraph()}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 1\"\n        kbd=\"#\"\n        onSelect={() => $editor.commands.setHeading({ level: 1 })}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 2\"\n        kbd=\"##\"\n        onSelect={() => $editor.commands.setHeading({ level: 2 })}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 3\"\n        kbd=\"###\"\n        onSelect={() => $editor.commands.setHeading({ level: 3 })}\n      />\n\n      <SlashMenuItem\n        label=\"Bullet list\"\n        kbd=\"-\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'bullet' })}\n      />\n\n      <SlashMenuItem\n        label=\"Ordered list\"\n        kbd=\"1.\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'ordered' })}\n      />\n\n      <SlashMenuItem\n        label=\"Task list\"\n        kbd=\"[]\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'task' })}\n      />\n\n      <SlashMenuItem\n        label=\"Toggle list\"\n        kbd=\">>\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'toggle' })}\n      />\n\n      <SlashMenuItem\n        label=\"Quote\"\n        kbd=\">\"\n        onSelect={() => $editor.commands.setBlockquote()}\n      />\n\n      <SlashMenuItem\n        label=\"Table\"\n        onSelect={() => $editor.commands.insertTable({ row: 3, col: 3 })}\n      />\n\n      <SlashMenuItem\n        label=\"Divider\"\n        kbd=\"---\"\n        onSelect={() => $editor.commands.insertHorizontalRule()}\n      />\n\n      <SlashMenuItem\n        label=\"Code\"\n        kbd=\"```\"\n        onSelect={() => $editor.commands.setCodeBlock()}\n      />\n\n      <SlashMenuEmpty />\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/svelte'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/svelte/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty.svelte'\nimport SlashMenuItem from './slash-menu-item.svelte'\n\nconst editor = useEditor<BasicExtension>()\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n</script>\n\n<AutocompleteRoot {regex}>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <SlashMenuItem\n        label=\"Text\"\n        onSelect={() => $editor.commands.setParagraph()}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 1\"\n        kbd=\"#\"\n        onSelect={() => $editor.commands.setHeading({ level: 1 })}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 2\"\n        kbd=\"##\"\n        onSelect={() => $editor.commands.setHeading({ level: 2 })}\n      />\n\n      <SlashMenuItem\n        label=\"Heading 3\"\n        kbd=\"###\"\n        onSelect={() => $editor.commands.setHeading({ level: 3 })}\n      />\n\n      <SlashMenuItem\n        label=\"Bullet list\"\n        kbd=\"-\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'bullet' })}\n      />\n\n      <SlashMenuItem\n        label=\"Ordered list\"\n        kbd=\"1.\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'ordered' })}\n      />\n\n      <SlashMenuItem\n        label=\"Task list\"\n        kbd=\"[]\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'task' })}\n      />\n\n      <SlashMenuItem\n        label=\"Toggle list\"\n        kbd=\">>\"\n        onSelect={() => $editor.commands.wrapInList({ kind: 'toggle' })}\n      />\n\n      <SlashMenuItem\n        label=\"Quote\"\n        kbd=\">\"\n        onSelect={() => $editor.commands.setBlockquote()}\n      />\n\n      <SlashMenuItem\n        label=\"Table\"\n        onSelect={() => $editor.commands.insertTable({ row: 3, col: 3 })}\n      />\n\n      <SlashMenuItem\n        label=\"Divider\"\n        kbd=\"---\"\n        onSelect={() => $editor.commands.insertHorizontalRule()}\n      />\n\n      <SlashMenuItem\n        label=\"Code\"\n        kbd=\"```\"\n        onSelect={() => $editor.commands.setCodeBlock()}\n      />\n\n      <SlashMenuEmpty />\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
     }
   ],
   "meta": {

package/dist/r/svelte-ui-table-handle.json

@@ -20,7 +20,7 @@
       "path": "registry/src/svelte/ui/table-handle/table-handle.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/table-handle/table-handle.svelte",
-      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/svelte'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/svelte/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/svelte/table-handle'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props: Props = $props()\n\nconst state = useEditorDerivedValue(getTableHandleState)\n</script>\n\n<TableHandleRoot>\n  <TableHandleDragPreview />\n  <TableHandleDropIndicator />\n  <TableHandleColumnPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n      <TableHandleColumnMenuRoot>\n        <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n          <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n        </TableHandleColumnMenuTrigger>\n        <MenuPositioner class=\"overflow-visible bg-transparent\">\n          <MenuPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n            {#if $state.addTableColumnBefore.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableColumnBefore.command}\n              >\n                <span>Insert Left</span>\n              </MenuItem>\n            {/if}\n            {#if $state.addTableColumnAfter.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableColumnAfter.command}\n              >\n                <span>Insert Right</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteCellSelection.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteCellSelection.command}\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTableColumn.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteTableColumn.command}\n              >\n                <span>Delete Column</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTable.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger=\"\"\n                onSelect={$state.deleteTable.command}\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            {/if}\n          </MenuPopup>\n        </MenuPositioner>\n      </TableHandleColumnMenuRoot>\n    </TableHandleColumnPopup>\n  </TableHandleColumnPositioner>\n  <TableHandleRowPositioner\n    placement={props.dir === 'rtl' ? 'right' : 'left'}\n    class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n  >\n    <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n      <TableHandleRowMenuRoot>\n        <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n          <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n        </TableHandleRowMenuTrigger>\n        <MenuPositioner class=\"overflow-visible bg-transparent\">\n          <MenuPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n            {#if $state.addTableRowAbove.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableRowAbove.command}\n              >\n                <span>Insert Above</span>\n              </MenuItem>\n            {/if}\n            {#if $state.addTableRowBelow.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableRowBelow.command}\n              >\n                <span>Insert Below</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteCellSelection.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteCellSelection.command}\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTableRow.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteTableRow.command}\n              >\n                <span>Delete Row</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTable.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger=\"\"\n                onSelect={$state.deleteTable.command}\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            {/if}\n          </MenuPopup>\n        </MenuPositioner>\n      </TableHandleRowMenuRoot>\n    </TableHandleRowPopup>\n  </TableHandleRowPositioner>\n</TableHandleRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\nimport { useEditorDerivedValue } from 'prosekit/svelte'\nimport { MenuItem, MenuPopup, MenuPositioner } from 'prosekit/svelte/menu'\nimport {\n  TableHandleColumnMenuRoot,\n  TableHandleColumnMenuTrigger,\n  TableHandleColumnPopup,\n  TableHandleColumnPositioner,\n  TableHandleDragPreview,\n  TableHandleDropIndicator,\n  TableHandleRoot,\n  TableHandleRowMenuRoot,\n  TableHandleRowMenuTrigger,\n  TableHandleRowPopup,\n  TableHandleRowPositioner,\n} from 'prosekit/svelte/table-handle'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props: Props = $props()\n\nconst state = useEditorDerivedValue(getTableHandleState)\n</script>\n\n<TableHandleRoot>\n  <TableHandleDragPreview />\n  <TableHandleDropIndicator />\n  <TableHandleColumnPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <TableHandleColumnPopup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition 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      <TableHandleColumnMenuRoot>\n        <TableHandleColumnMenuTrigger class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n          <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n        </TableHandleColumnMenuTrigger>\n        <MenuPositioner class=\"overflow-visible bg-transparent\">\n          <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n            {#if $state.addTableColumnBefore.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableColumnBefore.command}\n              >\n                <span>Insert Left</span>\n              </MenuItem>\n            {/if}\n            {#if $state.addTableColumnAfter.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableColumnAfter.command}\n              >\n                <span>Insert Right</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteCellSelection.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteCellSelection.command}\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTableColumn.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteTableColumn.command}\n              >\n                <span>Delete Column</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTable.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger=\"\"\n                onSelect={$state.deleteTable.command}\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            {/if}\n          </MenuPopup>\n        </MenuPositioner>\n      </TableHandleColumnMenuRoot>\n    </TableHandleColumnPopup>\n  </TableHandleColumnPositioner>\n  <TableHandleRowPositioner\n    placement={props.dir === 'rtl' ? 'right' : 'left'}\n    class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n  >\n    <TableHandleRowPopup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition 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      <TableHandleRowMenuRoot>\n        <TableHandleRowMenuTrigger class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\">\n          <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n        </TableHandleRowMenuTrigger>\n        <MenuPositioner class=\"overflow-visible bg-transparent\">\n          <MenuPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n            {#if $state.addTableRowAbove.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableRowAbove.command}\n              >\n                <span>Insert Above</span>\n              </MenuItem>\n            {/if}\n            {#if $state.addTableRowBelow.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.addTableRowBelow.command}\n              >\n                <span>Insert Below</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteCellSelection.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteCellSelection.command}\n              >\n                <span>Clear Contents</span>\n                <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTableRow.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                onSelect={$state.deleteTableRow.command}\n              >\n                <span>Delete Row</span>\n              </MenuItem>\n            {/if}\n            {#if $state.deleteTable.canExec}\n              <MenuItem\n                class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                data-danger=\"\"\n                onSelect={$state.deleteTable.command}\n              >\n                <span>Delete Table</span>\n              </MenuItem>\n            {/if}\n          </MenuPopup>\n        </MenuPositioner>\n      </TableHandleRowMenuRoot>\n    </TableHandleRowPopup>\n  </TableHandleRowPositioner>\n</TableHandleRoot>\n"
     }
   ],
   "meta": {

package/dist/r/svelte-ui-tag-menu.json

@@ -18,7 +18,7 @@
       "path": "registry/src/svelte/ui/tag-menu/tag-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/tag-menu/tag-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  tags: { id: number; label: string }[]\n}\n\nconst props: Props = $props()\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleTagInsert(id: number, label: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '#' + label,\n    kind: 'tag',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\nconst regex = /#[\\da-z]*$/i\n</script>\n\n<AutocompleteRoot {regex}>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n        No results\n      </AutocompleteEmpty>\n\n      {#each props.tags as tag (tag.id)}\n        <AutocompleteItem\n          class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n          onSelect={() => handleTagInsert(tag.id, tag.label)}\n        >\n          #{tag.label}\n        </AutocompleteItem>\n      {/each}\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  tags: { id: number; label: string }[]\n}\n\nconst props: Props = $props()\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleTagInsert(id: number, label: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '#' + label,\n    kind: 'tag',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\nconst regex = /#[\\da-z]*$/i\n</script>\n\n<AutocompleteRoot {regex}>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n        No results\n      </AutocompleteEmpty>\n\n      {#each props.tags as tag (tag.id)}\n        <AutocompleteItem\n          class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n          onSelect={() => handleTagInsert(tag.id, tag.label)}\n        >\n          #{tag.label}\n        </AutocompleteItem>\n      {/each}\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
     }
   ],
   "meta": {

package/dist/r/svelte-ui-user-menu.json

@@ -18,7 +18,7 @@
       "path": "registry/src/svelte/ui/user-menu/user-menu.svelte",
       "type": "registry:component",
       "target": "components/editor/ui/user-menu/user-menu.svelte",
-      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}\n\nconst props: Props = $props()\nconst loading = $derived(props.loading ?? false)\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleUserInsert(id: number, username: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '@' + username,\n    kind: 'user',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n</script>\n\n<AutocompleteRoot\n  {regex}\n  onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n  onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <AutocompletePopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n        {loading ? 'Loading...' : 'No results'}\n      </AutocompleteEmpty>\n\n      {#each props.users as user (user.id)}\n        <AutocompleteItem\n          class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n          onSelect={() => handleUserInsert(user.id, user.name)}\n        >\n          {#if loading}\n            <span class=\"opacity-50\">\n              {user.name}\n            </span>\n          {:else}\n            <span>\n              {user.name}\n            </span>\n          {/if}\n        </AutocompleteItem>\n      {/each}\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
+      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}\n\nconst props: Props = $props()\nconst loading = $derived(props.loading ?? false)\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleUserInsert(id: number, username: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '@' + username,\n    kind: 'user',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n</script>\n\n<AutocompleteRoot\n  {regex}\n  onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n  onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n>\n  <AutocompletePositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <AutocompletePopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n      <AutocompleteEmpty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n        {loading ? 'Loading...' : 'No results'}\n      </AutocompleteEmpty>\n\n      {#each props.users as user (user.id)}\n        <AutocompleteItem\n          class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n          onSelect={() => handleUserInsert(user.id, user.name)}\n        >\n          {#if loading}\n            <span class=\"opacity-50\">\n              {user.name}\n            </span>\n          {:else}\n            <span>\n              {user.name}\n            </span>\n          {/if}\n        </AutocompleteItem>\n      {/each}\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
     }
   ],
   "meta": {

package/dist/r/vanilla-ui-slash-menu.json

@@ -30,7 +30,7 @@
       "path": "registry/src/vanilla/ui/slash-menu/slash-menu.ts",
       "type": "registry:component",
       "target": "components/editor/ui/slash-menu/slash-menu.ts",
-      "content": "import 'prosekit/web/autocomplete'\n\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport type { AutocompletePopupElement, AutocompletePositionerElement, AutocompleteRootElement } from 'prosekit/web/autocomplete'\n\nimport { renderSlashMenuEmpty } from './slash-menu-empty'\nimport { renderSlashMenuItem } from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\nexport function renderSlashMenu(\n  editor: Editor<BasicExtension>,\n) {\n  const root = document.createElement('prosekit-autocomplete-root') as AutocompleteRootElement\n  root.editor = editor\n  root.regex = regex\n\n  const positioner = document.createElement('prosekit-autocomplete-positioner') as AutocompletePositionerElement\n  positioner.className = 'block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100'\n\n  const popup = document.createElement('prosekit-autocomplete-popup') as AutocompletePopupElement\n  popup.className = 'box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1'\n\n  popup.append(renderSlashMenuItem({ label: 'Text', kbd: undefined, onSelect: () => editor.commands.setParagraph() }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 1', kbd: '#', onSelect: () => editor.commands.setHeading({ level: 1 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 2', kbd: '##', onSelect: () => editor.commands.setHeading({ level: 2 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 3', kbd: '###', onSelect: () => editor.commands.setHeading({ level: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Bullet list', kbd: '-', onSelect: () => editor.commands.wrapInList({ kind: 'bullet' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Ordered list', kbd: '1.', onSelect: () => editor.commands.wrapInList({ kind: 'ordered' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Task list', kbd: '[]', onSelect: () => editor.commands.wrapInList({ kind: 'task' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Toggle list', kbd: '>>', onSelect: () => editor.commands.wrapInList({ kind: 'toggle' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Quote', kbd: '>', onSelect: () => editor.commands.setBlockquote() }))\n  popup.append(renderSlashMenuItem({ label: 'Table', onSelect: () => editor.commands.insertTable({ row: 3, col: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Divider', kbd: '---', onSelect: () => editor.commands.insertHorizontalRule() }))\n  popup.append(renderSlashMenuItem({ label: 'Code', kbd: '```', onSelect: () => editor.commands.setCodeBlock() }))\n  popup.append(renderSlashMenuEmpty())\n\n  positioner.append(popup)\n  root.append(positioner)\n\n  return root\n}\n"
+      "content": "import 'prosekit/web/autocomplete'\n\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport type { AutocompletePopupElement, AutocompletePositionerElement, AutocompleteRootElement } from 'prosekit/web/autocomplete'\n\nimport { renderSlashMenuEmpty } from './slash-menu-empty'\nimport { renderSlashMenuItem } from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\nexport function renderSlashMenu(\n  editor: Editor<BasicExtension>,\n) {\n  const root = document.createElement('prosekit-autocomplete-root') as AutocompleteRootElement\n  root.editor = editor\n  root.regex = regex\n\n  const positioner = document.createElement('prosekit-autocomplete-positioner') as AutocompletePositionerElement\n  positioner.className = 'block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none'\n\n  const popup = document.createElement('prosekit-autocomplete-popup') as AutocompletePopupElement\n  popup.className = 'box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1'\n\n  popup.append(renderSlashMenuItem({ label: 'Text', kbd: undefined, onSelect: () => editor.commands.setParagraph() }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 1', kbd: '#', onSelect: () => editor.commands.setHeading({ level: 1 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 2', kbd: '##', onSelect: () => editor.commands.setHeading({ level: 2 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Heading 3', kbd: '###', onSelect: () => editor.commands.setHeading({ level: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Bullet list', kbd: '-', onSelect: () => editor.commands.wrapInList({ kind: 'bullet' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Ordered list', kbd: '1.', onSelect: () => editor.commands.wrapInList({ kind: 'ordered' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Task list', kbd: '[]', onSelect: () => editor.commands.wrapInList({ kind: 'task' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Toggle list', kbd: '>>', onSelect: () => editor.commands.wrapInList({ kind: 'toggle' }) }))\n  popup.append(renderSlashMenuItem({ label: 'Quote', kbd: '>', onSelect: () => editor.commands.setBlockquote() }))\n  popup.append(renderSlashMenuItem({ label: 'Table', onSelect: () => editor.commands.insertTable({ row: 3, col: 3 }) }))\n  popup.append(renderSlashMenuItem({ label: 'Divider', kbd: '---', onSelect: () => editor.commands.insertHorizontalRule() }))\n  popup.append(renderSlashMenuItem({ label: 'Code', kbd: '```', onSelect: () => editor.commands.setCodeBlock() }))\n  popup.append(renderSlashMenuEmpty())\n\n  positioner.append(popup)\n  root.append(positioner)\n\n  return root\n}\n"
     }
   ],
   "meta": {

package/dist/r/vue-example-text-color.json

@@ -33,7 +33,7 @@
       "path": "registry/src/vue/examples/text-color/inline-menu.vue",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\nconst open = ref(false)\n\nuseKeymap({\n  Escape: () => {\n    if (open.value) {\n      open.value = false\n      return true\n    }\n    return false\n  },\n})\n</script>\n\n<template>\n  <InlinePopoverRoot\n    :open=\"open\"\n    @open-change=\"(event) => open = event.detail\"\n  >\n    <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n      <InlinePopoverPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n        <div class=\"flex flex-col gap-4 p-4\">\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Text color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in textColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Text: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <span\n                  class=\"text-base font-medium\"\n                  :style=\"{ color: color.value }\"\n                >\n                  A\n                </span>\n              </Button>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Background color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in backgroundColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Background: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  :style=\"{ backgroundColor: color.value }\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/vue'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/vue/inline-popover'\nimport { ref } from 'vue'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(textColors.map((color) => ({\n    label: color.label,\n    value: color.value,\n    isActive: editor.marks.textColor.isActive({ color: color.value }),\n    onClick: () => editor.commands.addTextColor({ color: color.value }),\n  })))\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\n  }].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\nconst open = ref(false)\n\nuseKeymap({\n  Escape: () => {\n    if (open.value) {\n      open.value = false\n      return true\n    }\n    return false\n  },\n})\n</script>\n\n<template>\n  <InlinePopoverRoot\n    :open=\"open\"\n    @open-change=\"(event) => open = event.detail\"\n  >\n    <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <InlinePopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n        <div class=\"flex flex-col gap-4 p-4\">\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Text color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in textColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Text: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <span\n                  class=\"text-base font-medium\"\n                  :style=\"{ color: color.value }\"\n                >\n                  A\n                </span>\n              </Button>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"text-sm\">\n              Background color\n            </div>\n            <div class=\"grid grid-cols-5 gap-1\">\n              <Button\n                v-for=\"color in backgroundColorState\"\n                :key=\"color.label\"\n                :pressed=\"color.isActive\"\n                :tooltip=\"`Background: ${color.label}`\"\n                @click=\"color.onClick\"\n              >\n                <div\n                  class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                  :style=\"{ backgroundColor: color.value }\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </InlinePopoverPopup>\n    </InlinePopoverPositioner>\n  </InlinePopoverRoot>\n</template>\n"
     }
   ],
   "meta": {

package/dist/r/vue-ui-block-handle.json

@@ -14,7 +14,7 @@
       "path": "registry/src/vue/ui/block-handle/block-handle.vue",
       "type": "registry:component",
       "target": "components/editor/ui/block-handle/block-handle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/vue/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <BlockHandleRoot>\n    <BlockHandlePositioner :placement=\"props.dir === 'rtl' ? 'right' : 'left'\" class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n      <BlockHandlePopup class=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\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\" />\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\" />\n        </BlockHandleDraggable>\n      </BlockHandlePopup>\n    </BlockHandlePositioner>\n  </BlockHandleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from 'prosekit/vue/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <BlockHandleRoot>\n    <BlockHandlePositioner :placement=\"props.dir === 'rtl' ? 'right' : 'left'\" class=\"block overflow-visible bg-transparent 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 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\" />\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\" />\n        </BlockHandleDraggable>\n      </BlockHandlePopup>\n    </BlockHandlePositioner>\n  </BlockHandleRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/block-handle/index.ts",

package/dist/r/vue-ui-button.json

@@ -12,7 +12,7 @@
       "path": "registry/src/vue/ui/button/button.vue",
       "type": "registry:component",
       "target": "components/editor/ui/button/button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/vue/tooltip'\n\nconst props = defineProps<{\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n}>()\n</script>\n\n<template>\n  <TooltipRoot>\n    <TooltipTrigger class=\"block\">\n      <button\n        :data-state=\"props.pressed ? 'on' : 'off'\"\n        :disabled=\"props.disabled\"\n        class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n        @click=\"props.onClick\"\n        @mousedown.prevent\n      >\n        <slot />\n        <span v-if=\"props.tooltip\" class=\"sr-only\">{{ props.tooltip }}</span>\n      </button>\n    </TooltipTrigger>\n    <TooltipPositioner v-if=\"props.tooltip\" class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n      <TooltipPopup class=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {{ props.tooltip }}\n      </TooltipPopup>\n    </TooltipPositioner>\n  </TooltipRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/vue/tooltip'\n\nconst props = defineProps<{\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: () => void\n  tooltip?: string\n}>()\n</script>\n\n<template>\n  <TooltipRoot>\n    <TooltipTrigger class=\"block\">\n      <button\n        :data-state=\"props.pressed ? 'on' : 'off'\"\n        :disabled=\"props.disabled\"\n        class=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n        @click=\"props.onClick\"\n        @mousedown.prevent\n      >\n        <slot />\n        <span v-if=\"props.tooltip\" class=\"sr-only\">{{ props.tooltip }}</span>\n      </button>\n    </TooltipTrigger>\n    <TooltipPositioner v-if=\"props.tooltip\" class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n      <TooltipPopup class=\"flex box-border origin-(--transform-origin) transition 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 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n        {{ props.tooltip }}\n      </TooltipPopup>\n    </TooltipPositioner>\n  </TooltipRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/button/index.ts",

package/dist/r/vue-ui-image-upload-popover.json

@@ -14,7 +14,7 @@
       "path": "registry/src/vue/ui/image-upload-popover/image-upload-popover.vue",
       "type": "registry:component",
       "target": "components/editor/ui/image-upload-popover/image-upload-popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/vue'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/vue/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\nimport { ref, useId } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n}>()\n\nconst open = ref(false)\nconst url = ref('')\nconst file = ref<File | null>(null)\nconst ariaId = useId()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file.value = selectedFile\n    url.value = ''\n  } else {\n    file.value = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url.value = inputUrl\n    file.value = null\n  } else {\n    url.value = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url.value = ''\n    file.value = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url.value) {\n    editor.value.commands.insertImage({ src: url.value })\n  } else if (file.value) {\n    editor.value.commands.uploadImage({ file: file.value, uploader: props.uploader })\n  }\n  open.value = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open.value = event.detail\n}\n</script>\n\n<template>\n  <PopoverRoot :open=\"open\" @open-change=\"handleOpenChange\">\n    <PopoverTrigger>\n      <Button :pressed=\"open\" :disabled=\"props.disabled\" :tooltip=\"props.tooltip\">\n        <slot />\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverPositioner\n      placement=\"bottom\"\n      class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n    ><PopoverPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col gap-y-4 p-6 text-sm w-sm\">\n        <label v-if=\"!file\" :for=\"`id-link-${ariaId}`\">Embed Link</label>\n        <input\n          v-if=\"!file\"\n          :id=\"`id-link-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          :value=\"url\"\n          @input=\"handleUrlChange\"\n        />\n\n        <label v-if=\"!url\" :for=\"`id-upload-${ariaId}`\">Upload</label>\n        <input\n          v-if=\"!url\"\n          :id=\"`id-upload-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          @change=\"handleFileChange\"\n        />\n\n        <button v-if=\"url\" class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" @click=\"handleSubmit\">\n          Insert Image\n        </button>\n\n        <button v-if=\"file\" class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" @click=\"handleSubmit\">\n          Upload Image\n        </button>\n      </PopoverPopup></PopoverPositioner>\n  </PopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/vue'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/vue/popover'\nimport type { OpenChangeEvent } from 'prosekit/web/popover'\nimport { ref, useId } from 'vue'\n\nimport { Button } from '../button'\n\nconst props = defineProps<{\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n}>()\n\nconst open = ref(false)\nconst url = ref('')\nconst file = ref<File | null>(null)\nconst ariaId = useId()\n\nconst editor = useEditor<ImageExtension>()\n\nfunction handleFileChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const selectedFile = target.files?.[0]\n\n  if (selectedFile) {\n    file.value = selectedFile\n    url.value = ''\n  } else {\n    file.value = null\n  }\n}\n\nfunction handleUrlChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const inputUrl = target.value\n\n  if (inputUrl) {\n    url.value = inputUrl\n    file.value = null\n  } else {\n    url.value = ''\n  }\n}\n\nfunction deferResetState() {\n  setTimeout(() => {\n    url.value = ''\n    file.value = null\n  }, 300)\n}\n\nfunction handleSubmit() {\n  if (url.value) {\n    editor.value.commands.insertImage({ src: url.value })\n  } else if (file.value) {\n    editor.value.commands.uploadImage({ file: file.value, uploader: props.uploader })\n  }\n  open.value = false\n  deferResetState()\n}\n\nfunction handleOpenChange(event: OpenChangeEvent) {\n  if (!event.detail) {\n    deferResetState()\n  }\n  open.value = event.detail\n}\n</script>\n\n<template>\n  <PopoverRoot :open=\"open\" @open-change=\"handleOpenChange\">\n    <PopoverTrigger>\n      <Button :pressed=\"open\" :disabled=\"props.disabled\" :tooltip=\"props.tooltip\">\n        <slot />\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverPositioner\n      placement=\"bottom\"\n      class=\"block overflow-visible bg-transparent w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n    ><PopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col gap-y-4 p-6 text-sm w-sm\">\n        <label v-if=\"!file\" :for=\"`id-link-${ariaId}`\">Embed Link</label>\n        <input\n          v-if=\"!file\"\n          :id=\"`id-link-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"Paste the image link...\"\n          type=\"url\"\n          :value=\"url\"\n          @input=\"handleUrlChange\"\n        />\n\n        <label v-if=\"!url\" :for=\"`id-upload-${ariaId}`\">Upload</label>\n        <input\n          v-if=\"!url\"\n          :id=\"`id-upload-${ariaId}`\"\n          class=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n          accept=\"image/*\"\n          type=\"file\"\n          @change=\"handleFileChange\"\n        />\n\n        <button v-if=\"url\" class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" @click=\"handleSubmit\">\n          Insert Image\n        </button>\n\n        <button v-if=\"file\" class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" @click=\"handleSubmit\">\n          Upload Image\n        </button>\n      </PopoverPopup></PopoverPositioner>\n  </PopoverRoot>\n</template>\n"
     },
     {
       "path": "registry/src/vue/ui/image-upload-popover/index.ts",