diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f364cb7ea3..93b2410194 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -34,7 +34,7 @@ module.exports = {
     '.out',
     '**/*.mdx',
     '**/__registry__',
-    '**/scripts/build-registry.mts',
+    '**/scripts/*.mts',
   ],
   overrides: [
     {
diff --git a/apps/www/content/docs/components/cloud.mdx b/apps/www/content/docs/components/cloud.mdx
deleted file mode 100644
index 13e822cad7..0000000000
--- a/apps/www/content/docs/components/cloud.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Cloud
-description: Integrate cloud functionality to enable seamless access to cloud-based resources.
-component: true
-docs:
-  - route: /docs/cloud
-    title: Cloud
----
-
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-<TabsTrigger value="cli">CLI</TabsTrigger>
-<TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcx@latest add cloud -r plate-ui
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>
-
-Install the following dependencies:
-
-- [Cloud](/docs/cloud)
-
-</Step>
-
-<Step>
-
-Copy and paste the following code into your project.
-
-</Step>
-
-<ComponentSource name="cloud-attachment-element" />
-<ComponentSource name="cloud-image-element" />
-<ComponentSource name="cloud-resize-controls" />
-<ComponentSource name="cloud-status-bar" />
-<ComponentSource name="cloud-toolbar-buttons" />
-
-<Step>
-
-Update the import paths to match your project setup.
-
-</Step>
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
-## Examples
-
-<ComponentPreview name="cloud-demo" padding="md" />
-
-### Usage
-
-```tsx
-const plugins = createMyPlugins(
-  [
-    ...basicNodesPlugins,
-    createCloudPlugin({
-      options: {},
-    }),
-    createCloudAttachmentPlugin(),
-    createCloudImagePlugin({
-      options: {
-        maxInitialWidth: 320,
-        maxInitialHeight: 320,
-        minResizeWidth: 100,
-        maxResizeWidth: 720,
-      },
-    }),
-  ],
-  {
-    components: {
-      ...plateUI,
-      [CloudAttachmentPlugin.key]: CloudAttachmentElement,
-      [CloudImagePlugin.key]: CloudImageElement,
-    },
-  }
-);
-```
-
-### Demo
-
-```tsx
-export default function CloudDemo() {
-  return (
-    <Plate<MyValue> plugins={plugins} initialValue={cloudValue}>
-      <FixedToolbar>
-        <CloudToolbarButtons />
-      </FixedToolbar>
-      <Editor />
-    </Plate>
-  );
-}
-```
diff --git a/apps/www/content/docs/components/code-block-element.mdx b/apps/www/content/docs/components/code-block-element.mdx
index 735374ef33..ab837ebde6 100644
--- a/apps/www/content/docs/components/code-block-element.mdx
+++ b/apps/www/content/docs/components/code-block-element.mdx
@@ -45,7 +45,8 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="code-block-element" />
-<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/code-block-element.css" />
+<ComponentSource name="code-block-element.css" src="src/registry/default/plate-ui/code-block-element.css" />
+<ComponentSource name="code-block-combobox.tsx" src="src/registry/default/plate-ui/code-block-combobox.tsx" />
 
 <Step>
 
diff --git a/apps/www/content/docs/components/color-dropdown-menu.mdx b/apps/www/content/docs/components/color-dropdown-menu.mdx
index 0d8d615e8b..697360de59 100644
--- a/apps/www/content/docs/components/color-dropdown-menu.mdx
+++ b/apps/www/content/docs/components/color-dropdown-menu.mdx
@@ -56,11 +56,11 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="color-dropdown-menu" />
-<ComponentSource name="color-dropdown-menu-items" />
-<ComponentSource name="color-constants" />
-<ComponentSource name="color-input" />
-<ComponentSource name="color-picker" />
-<ComponentSource name="colors-custom" />
+<ComponentSource name="color-dropdown-menu-items" src="src/registry/default/plate-ui/color-dropdown-menu-items.tsx" />
+<ComponentSource name="color-constants" src="src/registry/default/plate-ui/color-constants.ts" />
+<ComponentSource name="color-input" src="src/registry/default/plate-ui/color-input.tsx" />
+<ComponentSource name="color-picker" src="src/registry/default/plate-ui/color-picker.tsx" />
+<ComponentSource name="colors-custom" src="src/registry/default/plate-ui/colors-custom.tsx" />
 
 <Step>
 
diff --git a/apps/www/content/docs/components/comments-popover.mdx b/apps/www/content/docs/components/comments-popover.mdx
index 107b4e7e71..9c8ac6b1da 100644
--- a/apps/www/content/docs/components/comments-popover.mdx
+++ b/apps/www/content/docs/components/comments-popover.mdx
@@ -51,14 +51,15 @@ Copy and paste the following code into your project.
 
 </Step>
 
-<ComponentSource name="comment-avatar" />
-<ComponentSource name="comment-create-form" />
-<ComponentSource name="comment-item" />
-<ComponentSource name="comment-more-dropdown" />
-<ComponentSource name="comment-reply-items" />
-<ComponentSource name="comment-resolve-button" />
-<ComponentSource name="comment-value" />
 <ComponentSource name="comments-popover" />
+<ComponentSource name="comment-avatar" src="src/registry/default/plate-ui/comment-avatar.tsx" />
+<ComponentSource name="comment-create-form" src="src/registry/default/plate-ui/comment-create-form.tsx" />
+<ComponentSource name="comment-item" src="src/registry/default/plate-ui/comment-item.tsx" />
+<ComponentSource name="comment-more-dropdown" src="src/registry/default/plate-ui/comment-more-dropdown.tsx" />
+<ComponentSource name="comment-reply-items" src="src/registry/default/plate-ui/comment-reply-items.tsx" />
+<ComponentSource name="comment-resolve-button" src="src/registry/default/plate-ui/comment-resolve-button.tsx" />
+<ComponentSource name="comment-value" src="src/registry/default/plate-ui/comment-value.tsx" />
+
 
 <Step>
 
diff --git a/apps/www/content/docs/components/emoji-dropdown-menu.mdx b/apps/www/content/docs/components/emoji-dropdown-menu.mdx
index 752483bf62..de64eaa4ec 100644
--- a/apps/www/content/docs/components/emoji-dropdown-menu.mdx
+++ b/apps/www/content/docs/components/emoji-dropdown-menu.mdx
@@ -49,13 +49,13 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="emoji-dropdown-menu" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-icons.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-content.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-navigation.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-preview.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-search-bar.tsx" />
+<ComponentSource name="emoji-icons" src="src/registry/default/plate-ui/emoji-icons.tsx" />
+<ComponentSource name="emoji-picker" src="src/registry/default/plate-ui/emoji-picker.tsx" />
+<ComponentSource name="emoji-picker-content" src="src/registry/default/plate-ui/emoji-picker-content.tsx" />
+<ComponentSource name="emoji-picker-navigation" src="src/registry/default/plate-ui/emoji-picker-navigation.tsx" />
+<ComponentSource name="emoji-picker-preview" src="src/registry/default/plate-ui/emoji-picker-preview.tsx" />
+<ComponentSource name="emoji-picker-search-and-clear" src="src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx" />
+<ComponentSource name="emoji-picker-search-bar" src="src/registry/default/plate-ui/emoji-picker-search-bar.tsx" />
 
 <Step>
 
diff --git a/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx b/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx
index b00166407b..367447e887 100644
--- a/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx
+++ b/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx
@@ -40,7 +40,7 @@ Copy and paste the following code into your project.
 
 </Step>
 
-<ComponentSource name="emoji-toolbar-dropdown" />
+<ComponentSource name="emoji-toolbar-dropdown" src="src/registry/default/plate-ui/emoji-toolbar-dropdown.tsx" />
 
 <Step>
 
diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js
index cce45c5605..94dc5fae42 100644
--- a/apps/www/contentlayer.config.js
+++ b/apps/www/contentlayer.config.js
@@ -1,10 +1,9 @@
-import { getHighlighter, loadTheme } from '@shikijs/compat';
+import { getHighlighter } from '@shikijs/compat';
 import {
   defineDocumentType,
   defineNestedType,
   makeSource,
 } from 'contentlayer2/source-files';
-import path from 'node:path';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
@@ -130,13 +129,8 @@ export default makeSource({
       [
         rehypePrettyCode,
         {
-          getHighlighter: async () => {
-            const theme = await loadTheme(
-              path.join(process.cwd(), '/src/lib/highlighter-theme.json')
-            );
-
-            return await getHighlighter({ theme });
-          },
+          getHighlighter,
+          theme: 'github-dark',
           onVisitHighlightedLine(node) {
             node.properties.className.push('line--highlighted');
           },
diff --git a/apps/www/package.json b/apps/www/package.json
index 688e0b0b88..2d47c49b38 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -178,6 +178,7 @@
     "glob": "^11.0.0",
     "mdast-util-toc": "^7.1.0",
     "postcss": "^8.4.45",
+    "puppeteer": "^23.6.0",
     "rehype": "^12.0.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-pretty-code": "^0.6.0",
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index fcfdd4ebd0..b527c62e39 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -39,40 +39,6 @@
     ],
     "type": "registry:ui"
   },
-  {
-    "dependencies": [
-      "@udecode/plate-cloud"
-    ],
-    "files": [
-      {
-        "path": "plate-ui/cloud.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-attachment-element.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-image-element.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-resize-controls.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-status-bar.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-toolbar-buttons.tsx",
-        "type": "registry:ui"
-      }
-    ],
-    "name": "cloud",
-    "registryDependencies": [],
-    "type": "registry:ui"
-  },
   {
     "dependencies": [
       "@udecode/plate-code-block"
diff --git a/apps/www/public/r/styles/default/align-dropdown-menu.json b/apps/www/public/r/styles/default/align-dropdown-menu.json
index c7021beead..f0df4bc6ae 100644
--- a/apps/www/public/r/styles/default/align-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/align-dropdown-menu.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useAlignDropdownMenu,\n  useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    icon: Icons.alignLeft,\n    value: 'left',\n  },\n  {\n    icon: Icons.alignCenter,\n    value: 'center',\n  },\n  {\n    icon: Icons.alignRight,\n    value: 'right',\n  },\n  {\n    icon: Icons.alignJustify,\n    value: 'justify',\n  },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n  const state = useAlignDropdownMenuState();\n  const { radioGroupProps } = useAlignDropdownMenu(state);\n\n  const openState = useOpenState();\n  const IconValue =\n    items.find((item) => item.value === radioGroupProps.value)?.icon ??\n    Icons.alignLeft;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n          <IconValue />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {items.map(({ icon: Icon, value: itemValue }) => (\n            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n              <Icon className={iconVariants({ variant: 'toolbar' })} />\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/align-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/align-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/avatar.json b/apps/www/public/r/styles/default/avatar.json
index 70bcfc351e..3d3afc6d89 100644
--- a/apps/www/public/r/styles/default/avatar.json
+++ b/apps/www/public/r/styles/default/avatar.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { withCn } from '@udecode/cn';\n\nexport const Avatar = withCn(\n  AvatarPrimitive.Root,\n  'relative flex size-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n  AvatarPrimitive.Image,\n  'aspect-square size-full'\n);\n\nexport const AvatarFallback = withCn(\n  AvatarPrimitive.Fallback,\n  'flex size-full items-center justify-center rounded-full bg-muted'\n);\n",
       "path": "plate-ui/avatar.tsx",
-      "target": "",
+      "target": "components/plate-ui/avatar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/basic-editor-default-demo.json b/apps/www/public/r/styles/default/basic-editor-default-demo.json
new file mode 100644
index 0000000000..52c8118a84
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-editor-default-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport {\n  Plate,\n  PlateContent,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport default function BasicEditorDefaultDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <PlateContent placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-default-demo.tsx",
+      "target": "components/basic-editor-default-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-default-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/basic-editor-handler-demo.json b/apps/www/public/r/styles/default/basic-editor-handler-demo.json
new file mode 100644
index 0000000000..219a4083f7
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-editor-handler-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useState } from 'react';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = [\n  {\n    children: [\n      {\n        text: 'This is editable plain text with react and history plugins, just like a textarea!',\n      },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function BasicEditorHandlerDemo() {\n  const [debugValue, setDebugValue] = useState<Value>(value);\n\n  const localValue =\n    typeof window !== 'undefined' && localStorage.getItem('editorContent');\n\n  const editor = usePlateEditor({\n    value: localValue ? JSON.parse(localValue) : value,\n  });\n\n  return (\n    <Plate\n      onChange={({ value }) => {\n        localStorage.setItem('editorContent', JSON.stringify(value));\n        setDebugValue(value);\n      }}\n      editor={editor}\n    >\n      <Editor {...editableProps} />\n\n      <Accordion type=\"single\" collapsible>\n        <AccordionItem value=\"manual-installation\">\n          <AccordionTrigger>Debug Value</AccordionTrigger>\n          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-handler-demo.tsx",
+      "target": "components/basic-editor-handler-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-handler-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/basic-editor-styling-demo.json b/apps/www/public/r/styles/default/basic-editor-styling-demo.json
new file mode 100644
index 0000000000..60cc9f6608
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-editor-styling-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function BasicEditorStylingDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <Editor placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-styling-demo.tsx",
+      "target": "components/basic-editor-styling-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-styling-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/basic-editor-value-demo.json b/apps/www/public/r/styles/default/basic-editor-value-demo.json
new file mode 100644
index 0000000000..0e6cddbfb7
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-editor-value-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = [\n  {\n    children: [\n      {\n        text: 'This is editable plain text with react and history plugins, just like a <textarea>!',\n      },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function BasicEditorValueDemo() {\n  const editor = usePlateEditor({ value });\n\n  return (\n    <Plate editor={editor}>\n      <Editor {...editableProps} />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-value-demo.tsx",
+      "target": "components/basic-editor-value-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-value-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/basic-plugins-components-demo.json b/apps/www/public/r/styles/default/basic-plugins-components-demo.json
new file mode 100644
index 0000000000..74e0d01f01
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-plugins-components-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { HeadingPlugin } from '@udecode/plate-heading/react';\nimport Prism from 'prismjs';\n\nimport { createPlateUI } from '@/lib/plate/create-plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function BasicPluginsComponentsDemo() {\n  const editor = usePlateEditor({\n    override: { components: createPlateUI() },\n    plugins: [\n      BlockquotePlugin,\n      CodeBlockPlugin.configure({ options: { prism: Prism } }),\n      HeadingPlugin,\n      BoldPlugin,\n      ItalicPlugin,\n      UnderlinePlugin,\n      StrikethroughPlugin,\n      CodePlugin,\n    ],\n    value: basicEditorValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Editor placeholder=\"Type...\" autoFocus={false} spellCheck={false} />\n    </Plate>\n  );\n}\n\nexport const basicEditorValue = [\n  {\n    id: '1',\n    children: [\n      {\n        text: '🌳 Blocks',\n      },\n    ],\n    type: 'h1',\n  },\n  {\n    id: '2',\n    children: [\n      {\n        text: 'Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '3',\n    children: [\n      {\n        text: 'Create blockquotes to emphasize important information or highlight quotes from external sources.',\n      },\n    ],\n    type: 'blockquote',\n  },\n  {\n    id: '4',\n    children: [\n      {\n        children: [\n          {\n            text: '// Use code blocks to showcase code snippets',\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: 'function greet() {',\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: \"  console.info('Hello World!');\",\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: '}',\n          },\n        ],\n        type: 'code_line',\n      },\n    ],\n    lang: 'javascript',\n    type: 'code_block',\n  },\n  {\n    id: '1',\n    children: [\n      {\n        text: '🌱 Marks',\n      },\n    ],\n    type: 'h1',\n  },\n  {\n    id: '2',\n    children: [\n      {\n        text: 'Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '3',\n    children: [\n      {\n        text: 'Make text ',\n      },\n      {\n        bold: true,\n        text: 'bold',\n      },\n      {\n        text: ', ',\n      },\n      {\n        italic: true,\n        text: 'italic',\n      },\n      {\n        text: ', ',\n      },\n      {\n        text: 'underlined',\n        underline: true,\n      },\n      {\n        text: ', or apply a ',\n      },\n      {\n        bold: true,\n        italic: true,\n        text: 'combination',\n        underline: true,\n      },\n      {\n        text: ' of these styles for a visually striking effect.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '4',\n    children: [\n      {\n        text: 'Add ',\n      },\n      {\n        strikethrough: true,\n        text: 'strikethrough',\n      },\n      {\n        text: ' to indicate deleted or outdated content.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '5',\n    children: [\n      {\n        text: 'Write code snippets with inline ',\n      },\n      {\n        code: true,\n        text: 'code',\n      },\n      {\n        text: ' formatting for easy readability.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '6',\n    children: [\n      {\n        text: 'Press ',\n      },\n      {\n        kbd: true,\n        text: '⌘+B',\n      },\n      {\n        text: ' to apply bold mark or ',\n      },\n      {\n        kbd: true,\n        text: '⌘+I',\n      },\n      {\n        text: ' for italic mark.',\n      },\n    ],\n    type: 'p',\n  },\n];\n",
+      "path": "example/basic-plugins-components-demo.tsx",
+      "target": "components/basic-plugins-components-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-plugins-components-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/basic-plugins-default-demo.json b/apps/www/public/r/styles/default/basic-plugins-default-demo.json
new file mode 100644
index 0000000000..c047fda158
--- /dev/null
+++ b/apps/www/public/r/styles/default/basic-plugins-default-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useState } from 'react';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { HeadingPlugin } from '@udecode/plate-heading/react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nimport { basicEditorValue } from './basic-plugins-components-demo';\n\nexport default function BasicPluginsDefaultDemo() {\n  const [debugValue, setDebugValue] = useState<Value>(basicEditorValue);\n  const editor = usePlateEditor({\n    plugins: [\n      BlockquotePlugin,\n      CodeBlockPlugin,\n      HeadingPlugin,\n      BoldPlugin,\n      ItalicPlugin,\n      UnderlinePlugin,\n      StrikethroughPlugin,\n      CodePlugin,\n    ],\n    value: basicEditorValue,\n  });\n\n  return (\n    <Plate\n      onChange={({ value }) => {\n        setDebugValue(value);\n        // save newValue...\n      }}\n      editor={editor}\n    >\n      <Editor {...editableProps} />\n\n      <Accordion type=\"single\" collapsible>\n        <AccordionItem value=\"manual-installation\">\n          <AccordionTrigger>Debug Value</AccordionTrigger>\n          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-plugins-default-demo.tsx",
+      "target": "components/basic-plugins-default-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-plugins-default-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/block-selection.json b/apps/www/public/r/styles/default/block-selection.json
index b0f71815c7..d9d9958255 100644
--- a/apps/www/public/r/styles/default/block-selection.json
+++ b/apps/www/public/r/styles/default/block-selection.json
@@ -6,7 +6,7 @@
     {
       "content": "import { useBlockSelected } from '@udecode/plate-selection/react';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nconst blockSelectionVariants = cva(\n  'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity',\n  {\n    defaultVariants: {\n      active: false,\n    },\n    variants: {\n      active: {\n        false: 'opacity-0',\n        true: 'opacity-100',\n      },\n    },\n  }\n);\n\nexport function BlockSelection({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof blockSelectionVariants>) {\n  const isBlockSelected = useBlockSelected();\n\n  if (!isBlockSelected) return null;\n\n  return (\n    <div\n      className={blockSelectionVariants({\n        active: isBlockSelected,\n        className,\n      })}\n      {...props}\n    />\n  );\n}\n",
       "path": "plate-ui/block-selection.tsx",
-      "target": "",
+      "target": "components/plate-ui/block-selection.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/blockquote-element.json b/apps/www/public/r/styles/default/blockquote-element.json
index 6577256e16..95505aba46 100644
--- a/apps/www/public/r/styles/default/blockquote-element.json
+++ b/apps/www/public/r/styles/default/blockquote-element.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"blockquote\"\n        className={cn('my-1 border-l-2 pl-6 italic', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/blockquote-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/blockquote-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json
index 7beeda0cdc..dde5b94c11 100644
--- a/apps/www/public/r/styles/default/button.json
+++ b/apps/www/public/r/styles/default/button.json
@@ -4,9 +4,9 @@
   ],
   "files": [
     {
-      "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    defaultVariants: {\n      size: 'default',\n      variant: 'default',\n    },\n    variants: {\n      isMenu: {\n        true: 'h-auto w-full cursor-pointer justify-start',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        icon: 'size-10',\n        lg: 'h-11 rounded-md px-8',\n        none: '',\n        sm: 'h-9 rounded-md px-3',\n        sms: 'size-9 rounded-md px-0',\n        xs: 'h-8 rounded-md px-3',\n      },\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        inlineLink: 'text-base text-primary underline underline-offset-4',\n        link: 'text-primary underline-offset-4 hover:underline',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      },\n    },\n  }\n);\n\nexport const Button = withRef<\n  'button',\n  {\n    asChild?: boolean;\n  } & VariantProps<typeof buttonVariants>\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(buttonVariants({ className, isMenu, size, variant }))}\n      {...props}\n    />\n  );\n});\n",
+      "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    defaultVariants: {\n      size: 'default',\n      variant: 'default',\n    },\n    variants: {\n      isMenu: {\n        true: 'h-auto w-full cursor-pointer justify-start',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        icon: 'size-10',\n        lg: 'h-11 rounded-md px-8',\n        none: '',\n        sm: 'h-9 rounded-md px-3',\n        sms: 'size-9 rounded-md px-0',\n        xs: 'h-8 rounded-md px-3',\n      },\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        inlineLink: 'text-base text-primary underline underline-offset-4',\n        link: 'text-primary underline-offset-4 hover:underline',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      },\n    },\n  }\n);\n\nexport const Button = withRef<\n  'button',\n  {\n    asChild?: boolean;\n  } & VariantProps<typeof buttonVariants>\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(buttonVariants({ className, isMenu, size, variant }))}\n      {...props}\n    />\n  );\n});\n",
       "path": "plate-ui/button.tsx",
-      "target": "",
+      "target": "components/plate-ui/button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json
index 1b6e34ceec..c86a5ce66c 100644
--- a/apps/www/public/r/styles/default/calendar.json
+++ b/apps/www/public/r/styles/default/calendar.json
@@ -7,7 +7,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\n\nimport { cn } from '@udecode/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { buttonVariants } from './button';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      className={cn('p-3', className)}\n      classNames={{\n        caption: 'flex justify-center pt-1 relative items-center',\n        caption_label: 'text-sm font-medium',\n        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',\n        day: cn(\n          buttonVariants({ variant: 'ghost' }),\n          'size-9 p-0 font-normal aria-selected:opacity-100'\n        ),\n        day_disabled: 'text-muted-foreground opacity-50',\n        day_hidden: 'invisible',\n        day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n        day_range_end: 'day-range-end',\n        day_range_middle:\n          'aria-selected:bg-accent aria-selected:text-accent-foreground',\n        day_selected:\n          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',\n        day_today: 'bg-accent text-accent-foreground',\n        head_cell:\n          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',\n        head_row: 'flex',\n        month: 'space-y-4',\n        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',\n        nav: 'space-x-1 flex items-center',\n        nav_button: cn(\n          buttonVariants({ variant: 'outline' }),\n          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'\n        ),\n        nav_button_next: 'absolute right-1',\n        nav_button_previous: 'absolute left-1',\n        row: 'flex w-full mt-2',\n        table: 'w-full border-collapse space-y-1',\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeft className=\"size-4\" />,\n        IconRight: () => <ChevronRight className=\"size-4\" />,\n      }}\n      showOutsideDays={showOutsideDays}\n      {...props}\n    />\n  );\n}\n\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n",
       "path": "plate-ui/calendar.tsx",
-      "target": "",
+      "target": "components/plate-ui/calendar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/caption.json b/apps/www/public/r/styles/default/caption.json
index 0b54b6daeb..7b7afc1926 100644
--- a/apps/www/public/r/styles/default/caption.json
+++ b/apps/www/public/r/styles/default/caption.json
@@ -6,7 +6,7 @@
     {
       "content": "import {\n  cn,\n  createPrimitiveComponent,\n  withCn,\n  withVariants,\n} from '@udecode/cn';\nimport {\n  Caption as CaptionPrimitive,\n  CaptionTextarea as CaptionTextareaPrimitive,\n  useCaptionButton,\n  useCaptionButtonState,\n} from '@udecode/plate-caption/react';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\n\nconst captionVariants = cva('max-w-full', {\n  defaultVariants: {\n    align: 'center',\n  },\n  variants: {\n    align: {\n      center: 'mx-auto',\n      left: 'mr-auto',\n      right: 'ml-auto',\n    },\n  },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n  'align',\n]);\n\nexport const CaptionTextarea = withCn(\n  CaptionTextareaPrimitive,\n  cn(\n    'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n    'focus:outline-none focus:[&::placeholder]:opacity-0',\n    'text-center print:placeholder:text-transparent'\n  )\n);\n\nexport const CaptionButton = createPrimitiveComponent(Button)({\n  propsHook: useCaptionButton,\n  stateHook: useCaptionButtonState,\n});\n",
       "path": "plate-ui/caption.tsx",
-      "target": "",
+      "target": "components/plate-ui/caption.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/checkbox.json b/apps/www/public/r/styles/default/checkbox.json
index fa82dd5000..55cefc96cd 100644
--- a/apps/www/public/r/styles/default/checkbox.json
+++ b/apps/www/public/r/styles/default/checkbox.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Checkbox = withRef<typeof CheckboxPrimitive.Root>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn('flex items-center justify-center text-current')}\n      >\n        <Icons.check className=\"size-4\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n);\n",
       "path": "plate-ui/checkbox.tsx",
-      "target": "",
+      "target": "components/plate-ui/checkbox.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/cloud.json b/apps/www/public/r/styles/default/cloud.json
deleted file mode 100644
index e0bdc07c42..0000000000
--- a/apps/www/public/r/styles/default/cloud.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "dependencies": [
-    "@udecode/plate-cloud"
-  ],
-  "files": [
-    {
-      "content": "export * from './cloud-attachment-element';\n\nexport * from './cloud-image-element';\n\nexport * from './cloud-resize-controls';\n\nexport * from './cloud-status-bar';\n\nexport * from './cloud-toolbar-buttons';\n",
-      "path": "plate-ui/cloud.tsx",
-      "target": "",
-      "type": "registry:ui"
-    },
-    {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  type TCloudAttachmentElement,\n  useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport {\n  type PlateElementProps,\n  PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n  extends PlateElementProps<TCloudAttachmentElement> {}\n\nexport function CloudAttachmentElement({\n  className,\n  ...props\n}: CloudAttachmentElementProps) {\n  const { children, element } = props;\n\n  const { focused, selected, upload } = useCloudAttachmentElementState({\n    element,\n  });\n\n  return (\n    <PlateElement\n      className={cn(\n        'relative my-4 flex h-10 max-w-sm items-center gap-2 rounded-lg border border-border bg-background p-4',\n        focused && selected && 'border-blue-400 shadow-[0_0_1px_3px_#60a5fa]',\n        className\n      )}\n      draggable\n      {...props}\n    >\n      <div className=\"shrink-0 text-muted-foreground\" contentEditable={false}>\n        <Icons.attachment height={24} width={24} />\n      </div>\n      <div className=\"grow\" contentEditable={false}>\n        <div className=\"text-base\">{element.filename}</div>\n        <StatusBar upload={upload}>\n          <div className=\"text-sm text-muted-foreground\">\n            {element.bytes} bytes\n          </div>\n        </StatusBar>\n      </div>\n      <div\n        className=\"ml-4 size-8 shrink-0 duration-200\"\n        contentEditable={false}\n      >\n        {upload.status === 'success' && (\n          <a href={element.url} rel=\"noreferrer\" target=\"_blank\">\n            <Icons.downloadCloud\n              className=\"cursor-pointer text-muted-foreground hover:text-foreground\"\n              height={24}\n              width={24}\n            />\n          </a>\n        )}\n      </div>\n      {children}\n    </PlateElement>\n  );\n}\n",
-      "path": "plate-ui/cloud-attachment-element.tsx",
-      "target": "",
-      "type": "registry:ui"
-    },
-    {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  type TCloudImageElement,\n  useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n  type PlateElementProps,\n  PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n  extends PlateElementProps<TCloudImageElement> {}\n\nexport function CloudImageElement({\n  className,\n  ...props\n}: CloudImageElementProps) {\n  const { children, element } = props;\n\n  const { focused, selected, setSize, size, src, srcSet, upload } =\n    useCloudImageElementState({ element });\n\n  return (\n    <PlateElement\n      className={cn('relative my-4', className)}\n      draggable\n      {...props}\n    >\n      <span\n        style={{\n          display: 'inline-block',\n          /**\n           * NOTE: This code pretty much needs to be this way or things stop\n           * working so this cannot be overrided in the `.styles.ts` file.\n           */\n          position: 'relative',\n          /** Disable user select. We use our own selection display. */\n          userSelect: 'none',\n          /**\n           * This is required so that we don't get an extra gap at the bottom.\n           * When display is 'inline-block' we get some extra space at the\n           * bottom for the descenders because the content is expected to\n           * co-exist with text.\n           *\n           * Setting vertical-align to top, bottom or middle fixes this because\n           * it is no longer baseline which causes the issue.\n           *\n           * This is usually an issue with 'img' but also affects this scenario.\n           *\n           * https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image\n           *\n           * Also, make sure that <img> on the inside is display: 'block'.\n           */\n          verticalAlign: 'top',\n        }}\n        contentEditable={false}\n      >\n        {src === '' ? (\n          <div\n            className={cn(\n              'block rounded-lg',\n              focused && selected && 'shadow-[0_0_1px_3px_#60a5fa]'\n            )}\n            style={{\n              background: '#e0e0e0',\n              height: size.height,\n              width: size.width,\n            }}\n          />\n        ) : (\n          <img\n            className={cn(\n              'block rounded-lg',\n              focused && selected && 'shadow-[0_0_1px_3px_#60a5fa]'\n            )}\n            alt=\"\"\n            height={size.height}\n            src={src}\n            srcSet={srcSet}\n            width={size.width}\n          />\n        )}\n        <div className=\"absolute inset-x-2 top-1/2 -mt-2\">\n          <StatusBar upload={upload} />\n        </div>\n        {selected && focused && (\n          <ResizeControls size={size} element={element} setSize={setSize} />\n        )}\n      </span>\n      {children}\n    </PlateElement>\n  );\n}\n",
-      "path": "plate-ui/cloud-image-element.tsx",
-      "target": "",
-      "type": "registry:ui"
-    },
-    {
-      "content": "'use client';\n\nimport React, {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\n\nimport { resizeInWidth } from '@portive/client';\nimport {\n  type TCloudImageElement,\n  CloudImagePlugin,\n} from '@udecode/plate-cloud';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath, useEditorRef } from '@udecode/plate-common/react';\n\ntype ImageSize = { height: number; width: number };\n\ntype SetImageSize = Dispatch<SetStateAction<ImageSize>>;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n  const isBelow = size.width < 100 || size.height < 100;\n  const bottom = isBelow ? -24 : 4;\n\n  return (\n    <div\n      style={{\n        background: '#404040',\n        borderRadius: 3,\n        bottom,\n        boxShadow: '0px 0px 2px 1px rgba(255, 255, 255, 0.5)',\n        color: 'white',\n        font: '10px/20px sans-serif',\n        left: 4,\n        minWidth: 50,\n        padding: '0 7px',\n        position: 'absolute',\n        textAlign: 'center',\n        transition: 'bottom 250ms',\n        zIndex: 100,\n      }}\n    >\n      {size.width} &times; {size.height}\n    </div>\n  );\n}\n\n/** The little divets on the resize handle bar. */\nconst barStyle = {\n  background: 'rgba(255,255,255,0.75)',\n  height: 16,\n  position: 'absolute',\n  top: 8,\n  width: 1,\n} as const;\n\n/** The handle used to drag resize an image */\nfunction ResizeHandles({\n  onMouseDown,\n}: {\n  onMouseDown: React.MouseEventHandler;\n}) {\n  return (\n    <>\n      {/* Invisible Handle */}\n      <div\n        style={{\n          background: 'rgba(127,127,127,0.01)',\n          bottom: 0,\n          cursor: 'ew-resize',\n          position: 'absolute',\n          right: -8,\n          top: 0,\n          width: 16,\n        }}\n        onMouseDown={onMouseDown}\n      >\n        {/* Visible Handle */}\n        <div\n          style={{\n            background: 'DodgerBlue',\n            borderRadius: 4,\n            height: 32,\n            left: 0,\n            marginTop: -16,\n            position: 'absolute',\n            top: '50%',\n            width: 16,\n          }}\n        >\n          <div style={{ ...barStyle, left: 3.5 }} />\n          <div style={{ ...barStyle, left: 7.5 }} />\n          <div style={{ ...barStyle, left: 11.5 }} />\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport function ResizeControls({\n  element,\n  setSize,\n  size,\n}: {\n  element: TCloudImageElement;\n  setSize: SetImageSize;\n  size: ImageSize;\n}) {\n  const editor = useEditorRef();\n  const [isResizing, setIsResizing] = useState(false);\n\n  const { maxResizeWidth, minResizeWidth } =\n    editor.getOptions(CloudImagePlugin);\n\n  const currentSizeRef = useRef<{ height: number; width: number }>();\n\n  const onMouseDown = useCallback(\n    (mouseDownEvent: React.MouseEvent) => {\n      setIsResizing(true);\n      const startX = mouseDownEvent.clientX;\n      const startWidth = size.width;\n      const minWidth = minResizeWidth;\n      const maxWidth = Math.min(element.maxWidth, maxResizeWidth);\n\n      /**\n       * Handle resize dragging through an event handler on mouseMove on the\n       * document.\n       */\n      function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {\n        mouseMoveEvent.preventDefault();\n        mouseMoveEvent.stopPropagation();\n        /** Calculate the proposed width based on drag position */\n        const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;\n\n        /** Constrain the proposed with between min, max and original width */\n        const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));\n\n        const currentSize = resizeInWidth(\n          { height: element.maxHeight, width: element.maxWidth },\n          nextWidth\n        );\n\n        currentSizeRef.current = currentSize;\n        setSize(currentSize);\n      }\n\n      const originalCursor = document.body.style.cursor;\n\n      /** When the user releases the mouse, remove all the event handlers */\n      function onDocumentMouseUp() {\n        setIsResizing(false);\n        document.removeEventListener('mousemove', onDocumentMouseMove);\n        document.removeEventListener('mouseup', onDocumentMouseUp);\n        document.body.style.cursor = originalCursor;\n\n        const at = findNodePath(editor, element);\n\n        if (!currentSizeRef.current) return;\n\n        setNodes<TCloudImageElement>(editor, currentSizeRef.current, { at });\n      }\n\n      /** Attach document event listeners */\n      document.addEventListener('mousemove', onDocumentMouseMove);\n      document.addEventListener('mouseup', onDocumentMouseUp);\n\n      /**\n       * While dragging, we want the cursor to be `ew-resize` (left-right arrow)\n       * even if the cursor happens to not be exactly on the handle at the\n       * moment due to a delay in the cursor moving to a location and the image\n       * resizing to it.\n       *\n       * Also, image has max width/height and the cursor can fall outside of it.\n       */\n      document.body.style.cursor = 'ew-resize';\n    },\n    [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]\n  );\n\n  if (element.width < minResizeWidth) return null;\n\n  return (\n    <>\n      {isResizing ? <ResizeLabel size={size} /> : null}\n      <ResizeHandles onMouseDown={onMouseDown} />\n    </>\n  );\n}\n",
-      "path": "plate-ui/cloud-resize-controls.tsx",
-      "target": "",
-      "type": "registry:ui"
-    },
-    {
-      "content": "'use client';\n\nimport React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';\n\nimport type { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@udecode/cn';\n\nexport function ProgressBar({\n  className,\n  upload,\n  ...props\n}: {\n  upload: UploadProgress;\n} & HTMLAttributes<HTMLDivElement>) {\n  const [width, setWidth] = useState<number | null>(null);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (ref.current) setWidth(ref.current.offsetWidth);\n  }, []);\n\n  /**\n   * This formula looks a little funny because we want the `0` value of the\n   * progress bar to have a width that is still the height of the progress bar.\n   *\n   * This is for a few reasons:\n   *\n   * 1. We want the zero point to start with the progress bar being a circle\n   * 2. If we want rounded edges, if the width is shorter than the height, we get\n   *    an oval instead of a circle\n   * 3. The halfway point looks visually wrong because of the circle progress bar\n   *    when it is technically at the halfway point.\n   */\n  const progressWidth =\n    width == null\n      ? 0\n      : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n  return (\n    <div\n      ref={ref}\n      className={cn('h-4 rounded-lg bg-gray-100 shadow-md', className)}\n      {...props}\n    >\n      <div\n        className=\"h-4 rounded-lg bg-blue-500 duration-100\"\n        style={{\n          width: progressWidth,\n        }}\n      />\n    </div>\n  );\n}\n\nexport function FailBar({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        'h-4 rounded-lg border bg-red-700 text-center text-xs font-bold uppercase leading-tight text-white shadow-md',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function StatusBar(props: {\n  upload: Upload;\n  children?: React.ReactNode;\n}) {\n  const { children, upload } = props;\n\n  switch (upload.status) {\n    case 'progress': {\n      return <ProgressBar upload={upload} />;\n    }\n    case 'error': {\n      return <FailBar>Upload Failed</FailBar>;\n    }\n    case 'not-found': {\n      return <FailBar>Uploading...</FailBar>;\n    }\n    case 'success': {\n      return children || null;\n    }\n    default: {\n      throw new Error(`Should be unreachable`);\n    }\n  }\n}\n",
-      "path": "plate-ui/cloud-status-bar.tsx",
-      "target": "",
-      "type": "registry:ui"
-    },
-    {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { CloudPlugin } from '@udecode/plate-cloud';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nconst buttonStyle: React.CSSProperties = {\n  background: '#f0f0f0',\n  border: 'none',\n  cursor: 'pointer',\n  marginRight: 4,\n  padding: 8,\n};\n\nexport function CloudToolbarButtons() {\n  const { api, editor } = useEditorPlugin(CloudPlugin);\n\n  const getSaveValue = () => {\n    console.info('editor.children', editor.children);\n    console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());\n  };\n\n  const finishUploads = async () => {\n    await api.cloud.finishUploads();\n  };\n\n  return (\n    <>\n      <button style={buttonStyle} onClick={getSaveValue} type=\"button\">\n        Get Save Value\n      </button>\n      <button style={buttonStyle} onClick={finishUploads} type=\"button\">\n        Await Finish Uploads\n      </button>\n      <span>\n        Note: After clicking a button, output will be shown in console.\n      </span>\n    </>\n  );\n}\n",
-      "path": "plate-ui/cloud-toolbar-buttons.tsx",
-      "target": "",
-      "type": "registry:ui"
-    }
-  ],
-  "name": "cloud",
-  "registryDependencies": [],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/code-block-element.json b/apps/www/public/r/styles/default/code-block-element.json
index 259938b53b..6815b0d84c 100644
--- a/apps/www/public/r/styles/default/code-block-element.json
+++ b/apps/www/public/r/styles/default/code-block-element.json
@@ -6,19 +6,19 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n    const state = useCodeBlockElementState({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative py-1', state.className, className)}\n        {...props}\n      >\n        <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n          <code>{children}</code>\n        </pre>\n\n        {state.syntax && (\n          <div\n            className=\"absolute right-2 top-2 z-10 select-none\"\n            contentEditable={false}\n          >\n            <CodeBlockCombobox />\n          </div>\n        )}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/code-block-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/code-block-element.tsx",
       "type": "registry:ui"
     },
     {
       "content": ".slate-code_block code[class*='language-'],\n.slate-code_block pre[class*='language-'] {\n  background: hsl(230, 1%, 98%);\n  color: hsl(230, 8%, 24%);\n  font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',\n    monospace;\n  direction: ltr;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  line-height: 1.5;\n  -moz-tab-size: 2;\n  -o-tab-size: 2;\n  tab-size: 2;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n}\n\n/* Selection */\n.slate-code_block code[class*='language-']::-moz-selection,\n.slate-code_block code[class*='language-'] *::-moz-selection,\n.slate-code_block pre[class*='language-'] *::-moz-selection {\n  background: hsl(230, 1%, 90%);\n  color: inherit;\n}\n\n.slate-code_block code[class*='language-']::selection,\n.slate-code_block code[class*='language-'] *::selection,\n.slate-code_block pre[class*='language-'] *::selection {\n  background: hsl(230, 1%, 90%);\n  color: inherit;\n}\n\n/* Code blocks */\n.slate-code_block pre[class*='language-'] {\n  padding: 1em;\n  margin: 0.5em 0;\n  overflow: auto;\n  border-radius: 0.3em;\n}\n\n/* Inline code */\n.slate-code_block :not(pre) > code[class*='language-'] {\n  padding: 0.2em 0.3em;\n  border-radius: 0.3em;\n  white-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.cdata {\n  color: hsl(230, 4%, 64%);\n}\n\n.token.doctype,\n.token.punctuation,\n.token.entity {\n  color: hsl(230, 8%, 24%);\n}\n\n.token.attr-name,\n.token.class-name,\n.token.boolean,\n.token.constant,\n.token.number,\n.token.atrule {\n  color: hsl(35, 99%, 36%);\n}\n\n.token.keyword {\n  color: hsl(301, 63%, 40%);\n}\n\n.token.property,\n.token.tag,\n.token.symbol,\n.token.deleted,\n.token.important {\n  color: hsl(5, 74%, 59%);\n}\n\n.token.selector,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted,\n.token.regex,\n.token.attr-value,\n.token.attr-value > .token.punctuation {\n  color: hsl(119, 34%, 47%);\n}\n\n.token.variable,\n.token.operator,\n.token.function {\n  color: hsl(221, 87%, 60%);\n}\n\n.token.url {\n  color: hsl(198, 99%, 37%);\n}\n\n/* HTML overrides */\n.token.attr-value > .token.punctuation.attr-equals,\n.token.special-attr > .token.attr-value > .token.value.css {\n  color: hsl(230, 8%, 24%);\n}\n\n/* CSS overrides */\n.language-css .token.selector {\n  color: hsl(5, 74%, 59%);\n}\n\n.language-css .token.property {\n  color: hsl(230, 8%, 24%);\n}\n\n.language-css .token.function,\n.language-css .token.url > .token.function {\n  color: hsl(198, 99%, 37%);\n}\n\n.language-css .token.url > .token.string.url {\n  color: hsl(119, 34%, 47%);\n}\n\n.language-css .token.important,\n.language-css .token.atrule .token.rule {\n  color: hsl(301, 63%, 40%);\n}\n\n/* JS overrides */\n.language-javascript .token.operator {\n  color: hsl(301, 63%, 40%);\n}\n\n.language-javascript\n  .token.template-string\n  > .token.interpolation\n  > .token.interpolation-punctuation.punctuation {\n  color: hsl(344, 84%, 43%);\n}\n\n/* JSON overrides */\n.language-json .token.operator {\n  color: hsl(230, 8%, 24%);\n}\n\n.language-json .token.null.keyword {\n  color: hsl(35, 99%, 36%);\n}\n\n/* MD overrides */\n.language-markdown .token.url,\n.language-markdown .token.url > .token.operator,\n.language-markdown .token.url-reference.url > .token.string {\n  color: hsl(230, 8%, 24%);\n}\n\n.language-markdown .token.url > .token.content {\n  color: hsl(221, 87%, 60%);\n}\n\n.language-markdown .token.url > .token.url,\n.language-markdown .token.url-reference.url {\n  color: hsl(198, 99%, 37%);\n}\n\n.language-markdown .token.blockquote.punctuation,\n.language-markdown .token.hr.punctuation {\n  color: hsl(230, 4%, 64%);\n  font-style: italic;\n}\n\n.language-markdown .token.code-snippet {\n  color: hsl(119, 34%, 47%);\n}\n\n.language-markdown .token.bold .token.content {\n  color: hsl(35, 99%, 36%);\n}\n\n.language-markdown .token.italic .token.content {\n  color: hsl(301, 63%, 40%);\n}\n\n.language-markdown .token.strike .token.content,\n.language-markdown .token.strike .token.punctuation,\n.language-markdown .token.list.punctuation,\n.language-markdown .token.title.important > .token.punctuation {\n  color: hsl(5, 74%, 59%);\n}\n\n/* General */\n.token.bold {\n  font-weight: bold;\n}\n\n.token.comment,\n.token.italic {\n  font-style: italic;\n}\n\n.token.entity {\n  cursor: help;\n}\n\n.token.namespace {\n  opacity: 0.8;\n}\n\n/* Plugin overrides */\n/* Selectors should have higher specificity than those in the plugins' default stylesheets */\n\n/* Show Invisibles plugin overrides */\n.token.token.tab:not(:empty):before,\n.token.token.cr:before,\n.token.token.lf:before,\n.token.token.space:before {\n  color: hsla(230, 8%, 24%, 0.2);\n}\n\n/* Toolbar plugin overrides */\n/* Space out all buttons and move them away from the right edge of the code block */\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item {\n  margin-right: 0.4em;\n}\n\n/* Styling the buttons */\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span {\n  background: hsl(230, 1%, 90%);\n  color: hsl(230, 6%, 44%);\n  padding: 0.1em 0.4em;\n  border-radius: 0.3em;\n}\n\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {\n  background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */\n  color: hsl(230, 8%, 24%);\n}\n\n/* Line Highlight plugin overrides */\n/* The highlighted line itself */\n.line-highlight.line-highlight {\n  background: hsla(230, 8%, 24%, 0.05);\n}\n\n/* Default line numbers in Line Highlight plugin */\n.line-highlight.line-highlight:before,\n.line-highlight.line-highlight[data-end]:after {\n  background: hsl(230, 1%, 90%);\n  color: hsl(230, 8%, 24%);\n  padding: 0.1em 0.6em;\n  border-radius: 0.3em;\n  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */\n}\n\n/* Hovering over a linkable line number (in the gutter area) */\n/* Requires Line Numbers plugin as well */\npre[id].linkable-line-numbers.linkable-line-numbers\n  span.line-numbers-rows\n  > span:hover:before {\n  background-color: hsla(230, 8%, 24%, 0.05);\n}\n\n/* Line Numbers and Command Line plugins overrides */\n/* Line separating gutter from coding area */\n.line-numbers.line-numbers .line-numbers-rows,\n.command-line .command-line-prompt {\n  border-right-color: hsla(230, 8%, 24%, 0.2);\n}\n\n/* Stuff in the gutter */\n.line-numbers .line-numbers-rows > span:before,\n.command-line .command-line-prompt > span:before {\n  color: hsl(230, 1%, 62%);\n}\n\n/* Match Braces plugin overrides */\n/* Note: Outline colour is inherited from the braces */\n.rainbow-braces .token.token.punctuation.brace-level-1,\n.rainbow-braces .token.token.punctuation.brace-level-5,\n.rainbow-braces .token.token.punctuation.brace-level-9 {\n  color: hsl(5, 74%, 59%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-2,\n.rainbow-braces .token.token.punctuation.brace-level-6,\n.rainbow-braces .token.token.punctuation.brace-level-10 {\n  color: hsl(119, 34%, 47%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-3,\n.rainbow-braces .token.token.punctuation.brace-level-7,\n.rainbow-braces .token.token.punctuation.brace-level-11 {\n  color: hsl(221, 87%, 60%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-4,\n.rainbow-braces .token.token.punctuation.brace-level-8,\n.rainbow-braces .token.token.punctuation.brace-level-12 {\n  color: hsl(301, 63%, 40%);\n}\n\n/* Diff Highlight plugin overrides */\n/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */\npre.diff-highlight > code .token.token.deleted:not(.prefix),\npre > code.diff-highlight .token.token.deleted:not(.prefix) {\n  background-color: hsla(353, 100%, 66%, 0.15);\n}\n\npre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,\npre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {\n  background-color: hsla(353, 95%, 66%, 0.25);\n}\n\npre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,\npre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {\n  background-color: hsla(353, 95%, 66%, 0.25);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix),\npre > code.diff-highlight .token.token.inserted:not(.prefix) {\n  background-color: hsla(137, 100%, 55%, 0.15);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,\npre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {\n  background-color: hsla(135, 73%, 55%, 0.25);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,\npre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {\n  background-color: hsla(135, 73%, 55%, 0.25);\n}\n\n/* Previewers plugin overrides */\n/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */\n/* Border around popup */\n.prism-previewer.prism-previewer:before,\n.prism-previewer-gradient.prism-previewer-gradient div {\n  border-color: hsl(0, 0, 95%);\n}\n\n/* Angle and time should remain as circles and are hence not included */\n.prism-previewer-color.prism-previewer-color:before,\n.prism-previewer-gradient.prism-previewer-gradient div,\n.prism-previewer-easing.prism-previewer-easing:before {\n  border-radius: 0.3em;\n}\n\n/* Triangles pointing to the code */\n.prism-previewer.prism-previewer:after {\n  border-top-color: hsl(0, 0, 95%);\n}\n\n.prism-previewer-flipped.prism-previewer-flipped.after {\n  border-bottom-color: hsl(0, 0, 95%);\n}\n\n/* Background colour within the popup */\n.prism-previewer-angle.prism-previewer-angle:before,\n.prism-previewer-time.prism-previewer-time:before,\n.prism-previewer-easing.prism-previewer-easing {\n  background: hsl(0, 0%, 100%);\n}\n\n/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */\n/* For time, this is the alternate colour */\n.prism-previewer-angle.prism-previewer-angle circle,\n.prism-previewer-time.prism-previewer-time circle {\n  stroke: hsl(230, 8%, 24%);\n  stroke-opacity: 1;\n}\n\n/* Stroke colours of the handle, direction point, and vector itself */\n.prism-previewer-easing.prism-previewer-easing circle,\n.prism-previewer-easing.prism-previewer-easing path,\n.prism-previewer-easing.prism-previewer-easing line {\n  stroke: hsl(230, 8%, 24%);\n}\n\n/* Fill colour of the handle */\n.prism-previewer-easing.prism-previewer-easing circle {\n  fill: transparent;\n}\n",
       "path": "plate-ui/code-block-element.css",
-      "target": "",
+      "target": "components/plate-ui/code-block-element.css",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\n/* eslint-disable unicorn/prefer-export-from */\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useCodeBlockCombobox,\n  useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n  { label: 'Plain Text', value: 'text' },\n  { label: 'Bash', value: 'bash' },\n  { label: 'CSS', value: 'css' },\n  { label: 'Git', value: 'git' },\n  { label: 'GraphQL', value: 'graphql' },\n  { label: 'HTML', value: 'html' },\n  { label: 'JavaScript', value: 'javascript' },\n  { label: 'JSON', value: 'json' },\n  { label: 'JSX', value: 'jsx' },\n  { label: 'Markdown', value: 'markdown' },\n  { label: 'SQL', value: 'sql' },\n  { label: 'SVG', value: 'svg' },\n  { label: 'TSX', value: 'tsx' },\n  { label: 'TypeScript', value: 'typescript' },\n  { label: 'WebAssembly', value: 'wasm' },\n  { label: 'ANTLR4', value: 'antlr4' },\n  { label: 'C', value: 'c' },\n  { label: 'CMake', value: 'cmake' },\n  { label: 'CoffeeScript', value: 'coffeescript' },\n  { label: 'C#', value: 'csharp' },\n  { label: 'Dart', value: 'dart' },\n  { label: 'Django', value: 'django' },\n  { label: 'Docker', value: 'docker' },\n  { label: 'EJS', value: 'ejs' },\n  { label: 'Erlang', value: 'erlang' },\n  { label: 'Go', value: 'go' },\n  { label: 'Groovy', value: 'groovy' },\n  { label: 'Java', value: 'java' },\n  { label: 'Kotlin', value: 'kotlin' },\n  { label: 'LaTeX', value: 'latex' },\n  { label: 'Less', value: 'less' },\n  { label: 'Lua', value: 'lua' },\n  { label: 'Makefile', value: 'makefile' },\n  { label: 'Markup', value: 'markup' },\n  { label: 'MATLAB', value: 'matlab' },\n  { label: 'Mermaid', value: 'mermaid' },\n  { label: 'Objective-C', value: 'objectivec' },\n  { label: 'Perl', value: 'perl' },\n  { label: 'PHP', value: 'php' },\n  { label: 'PowerShell', value: 'powershell' },\n  { label: '.properties', value: 'properties' },\n  { label: 'Protocol Buffers', value: 'protobuf' },\n  { label: 'Python', value: 'python' },\n  { label: 'R', value: 'r' },\n  { label: 'Ruby', value: 'ruby' },\n  { label: 'Sass (Sass)', value: 'sass' },\n  // FIXME: Error with current scala grammar\n  { label: 'Scala', value: 'scala' },\n  { label: 'Scheme', value: 'scheme' },\n  { label: 'Sass (Scss)', value: 'scss' },\n  { label: 'Shell', value: 'shell' },\n  { label: 'Swift', value: 'swift' },\n  { label: 'XML', value: 'xml' },\n  { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n  const state = useCodeBlockComboboxState();\n  const { commandItemProps } = useCodeBlockCombobox(state);\n\n  const [open, setOpen] = useState(false);\n  const [value, setValue] = useState('');\n\n  if (state.readOnly) return null;\n\n  const items = languages.filter(\n    (language) =>\n      !value ||\n      language.label.toLowerCase().includes(value.toLowerCase()) ||\n      language.value.toLowerCase().includes(value.toLowerCase())\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          size=\"xs\"\n          variant=\"ghost\"\n          className=\"h-5 justify-between px-1 text-xs\"\n          aria-expanded={open}\n          role=\"combobox\"\n        >\n          {state.value\n            ? languages.find((language) => language.value === state.value)\n                ?.label\n            : 'Plain Text'}\n          <Icons.chevronsUpDown className=\"ml-2 size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command shouldFilter={false}>\n          <CommandInput\n            value={value}\n            onValueChange={(value) => setValue(value)}\n            placeholder=\"Search language...\"\n          />\n          <CommandEmpty>No language found.</CommandEmpty>\n\n          <CommandList>\n            {items.map((language) => (\n              <CommandItem\n                key={language.value}\n                className=\"cursor-pointer\"\n                value={language.value}\n                onSelect={(_value) => {\n                  commandItemProps.onSelect(_value);\n                  setOpen(false);\n                }}\n              >\n                <Icons.check\n                  className={cn(\n                    'mr-2 size-4',\n                    state.value === language.value ? 'opacity-100' : 'opacity-0'\n                  )}\n                />\n                {language.label}\n              </CommandItem>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
       "path": "plate-ui/code-block-combobox.tsx",
-      "target": "",
+      "target": "components/plate-ui/code-block-combobox.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/code-leaf.json b/apps/www/public/r/styles/default/code-leaf.json
index 8bad418f95..01fb59bc3d 100644
--- a/apps/www/public/r/styles/default/code-leaf.json
+++ b/apps/www/public/r/styles/default/code-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateLeaf\n        ref={ref}\n        asChild\n        className={cn(\n          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',\n          className\n        )}\n        {...props}\n      >\n        <code>{children}</code>\n      </PlateLeaf>\n    );\n  }\n);\n",
       "path": "plate-ui/code-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/code-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/code-line-element.json b/apps/www/public/r/styles/default/code-line-element.json
index 123f4d63eb..a17060bf2e 100644
--- a/apps/www/public/r/styles/default/code-line-element.json
+++ b/apps/www/public/r/styles/default/code-line-element.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n  <PlateElement ref={ref} {...props} />\n));\n",
       "path": "plate-ui/code-line-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/code-line-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/code-syntax-leaf.json b/apps/www/public/r/styles/default/code-syntax-leaf.json
index aee34edf07..c62e657eaf 100644
--- a/apps/www/public/r/styles/default/code-syntax-leaf.json
+++ b/apps/www/public/r/styles/default/code-syntax-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useCodeSyntaxLeaf } from '@udecode/plate-code-block/react';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeSyntaxLeaf = withRef<typeof PlateLeaf>(\n  ({ children, ...props }, ref) => {\n    const { leaf } = props;\n\n    const { tokenProps } = useCodeSyntaxLeaf({ leaf });\n\n    return (\n      <PlateLeaf ref={ref} {...props}>\n        <span {...tokenProps}>{children}</span>\n      </PlateLeaf>\n    );\n  }\n);\n",
       "path": "plate-ui/code-syntax-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/code-syntax-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/color-dropdown-menu.json b/apps/www/public/r/styles/default/color-dropdown-menu.json
index c86e1eff83..c398dcf76b 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -4,37 +4,37 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useColorDropdownMenu,\n  useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuProps = {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n  children,\n  nodeType,\n  tooltip,\n}: ColorDropdownMenuProps) {\n  const state = useColorDropdownMenuState({\n    closeOnSelect: true,\n    colors: DEFAULT_COLORS,\n    customColors: DEFAULT_CUSTOM_COLORS,\n    nodeType,\n  });\n\n  const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...menuProps}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip} {...buttonProps}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          color={state.selectedColor || state.color}\n          clearColor={state.clearColor}\n          colors={state.colors}\n          customColors={state.customColors}\n          updateColor={state.updateColorAndClose}\n          updateCustomColor={state.updateColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/color-dropdown-menu.tsx",
       "type": "registry:ui"
     },
     {
       "content": "export const DEFAULT_COLORS = [\n  {\n    isBrightColor: false,\n    name: 'black',\n    value: '#000000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 4',\n    value: '#434343',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 3',\n    value: '#666666',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 2',\n    value: '#999999',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 1',\n    value: '#B7B7B7',\n  },\n  {\n    isBrightColor: false,\n    name: 'grey',\n    value: '#CCCCCC',\n  },\n  {\n    isBrightColor: false,\n    name: 'light grey 1',\n    value: '#D9D9D9',\n  },\n  {\n    isBrightColor: true,\n    name: 'light grey 2',\n    value: '#EFEFEF',\n  },\n  {\n    isBrightColor: true,\n    name: 'light grey 3',\n    value: '#F3F3F3',\n  },\n  {\n    isBrightColor: true,\n    name: 'white',\n    value: '#FFFFFF',\n  },\n  {\n    isBrightColor: false,\n    name: 'red berry',\n    value: '#980100',\n  },\n  {\n    isBrightColor: false,\n    name: 'red',\n    value: '#FE0000',\n  },\n  {\n    isBrightColor: false,\n    name: 'orange',\n    value: '#FE9900',\n  },\n  {\n    isBrightColor: true,\n    name: 'yellow',\n    value: '#FEFF00',\n  },\n  {\n    isBrightColor: false,\n    name: 'green',\n    value: '#00FF00',\n  },\n  {\n    isBrightColor: false,\n    name: 'cyan',\n    value: '#00FFFF',\n  },\n  {\n    isBrightColor: false,\n    name: 'cornflower blue',\n    value: '#4B85E8',\n  },\n  {\n    isBrightColor: false,\n    name: 'blue',\n    value: '#1300FF',\n  },\n  {\n    isBrightColor: false,\n    name: 'purple',\n    value: '#9900FF',\n  },\n  {\n    isBrightColor: false,\n    name: 'magenta',\n    value: '#FF00FF',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 3',\n    value: '#E6B8AF',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 3',\n    value: '#F4CCCC',\n  },\n  {\n    isBrightColor: true,\n    name: 'light orange 3',\n    value: '#FCE4CD',\n  },\n  {\n    isBrightColor: true,\n    name: 'light yellow 3',\n    value: '#FFF2CC',\n  },\n  {\n    isBrightColor: true,\n    name: 'light green 3',\n    value: '#D9EAD3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 3',\n    value: '#D0DFE3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 3',\n    value: '#C9DAF8',\n  },\n  {\n    isBrightColor: true,\n    name: 'light blue 3',\n    value: '#CFE1F3',\n  },\n  {\n    isBrightColor: true,\n    name: 'light purple 3',\n    value: '#D9D2E9',\n  },\n  {\n    isBrightColor: true,\n    name: 'light magenta 3',\n    value: '#EAD1DB',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 2',\n    value: '#DC7E6B',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 2',\n    value: '#EA9999',\n  },\n  {\n    isBrightColor: false,\n    name: 'light orange 2',\n    value: '#F9CB9C',\n  },\n  {\n    isBrightColor: true,\n    name: 'light yellow 2',\n    value: '#FFE598',\n  },\n  {\n    isBrightColor: false,\n    name: 'light green 2',\n    value: '#B7D6A8',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 2',\n    value: '#A1C4C9',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 2',\n    value: '#A4C2F4',\n  },\n  {\n    isBrightColor: false,\n    name: 'light blue 2',\n    value: '#9FC5E8',\n  },\n  {\n    isBrightColor: false,\n    name: 'light purple 2',\n    value: '#B5A7D5',\n  },\n  {\n    isBrightColor: false,\n    name: 'light magenta 2',\n    value: '#D5A6BD',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 1',\n    value: '#CC4125',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 1',\n    value: '#E06666',\n  },\n  {\n    isBrightColor: false,\n    name: 'light orange 1',\n    value: '#F6B26B',\n  },\n  {\n    isBrightColor: false,\n    name: 'light yellow 1',\n    value: '#FFD966',\n  },\n  {\n    isBrightColor: false,\n    name: 'light green 1',\n    value: '#93C47D',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 1',\n    value: '#76A5AE',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 1',\n    value: '#6C9EEB',\n  },\n  {\n    isBrightColor: false,\n    name: 'light blue 1',\n    value: '#6FA8DC',\n  },\n  {\n    isBrightColor: false,\n    name: 'light purple 1',\n    value: '#8D7CC3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light magenta 1',\n    value: '#C27BA0',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 1',\n    value: '#A61B00',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 1',\n    value: '#CC0000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 1',\n    value: '#E59138',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 1',\n    value: '#F1C231',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 1',\n    value: '#6AA74F',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 1',\n    value: '#45818E',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 1',\n    value: '#3B78D8',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 1',\n    value: '#3E84C6',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 1',\n    value: '#664EA6',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 1',\n    value: '#A64D78',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 2',\n    value: '#84200D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 2',\n    value: '#990001',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 2',\n    value: '#B45F05',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 2',\n    value: '#BF9002',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 2',\n    value: '#38761D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 2',\n    value: '#124F5C',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 2',\n    value: '#1155CB',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 2',\n    value: '#0C5394',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 2',\n    value: '#351C75',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 2',\n    value: '#741B47',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 3',\n    value: '#5B0F00',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 3',\n    value: '#660000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 3',\n    value: '#783F04',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 3',\n    value: '#7E6000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 3',\n    value: '#274E12',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 3',\n    value: '#0D343D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 3',\n    value: '#1B4487',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 3',\n    value: '#083763',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 3',\n    value: '#1F124D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 3',\n    value: '#4C1130',\n  },\n];\n\nexport const DEFAULT_CUSTOM_COLORS = [\n  {\n    isBrightColor: false,\n    name: 'dark orange 3',\n    value: '#783F04',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 3',\n    value: '#666666',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 2',\n    value: '#999999',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 1',\n    value: '#6C9EEB',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 3',\n    value: '#4C1130',\n  },\n];\n",
       "path": "plate-ui/color-constants.ts",
-      "target": "",
+      "target": "components/plate-ui/color-constants.ts",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'size-6 border border-solid border-muted p-0',\n        !isBrightColor && 'border-transparent text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Icons.check /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent>{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu-items.tsx",
-      "target": "",
+      "target": "components/plate-ui/color-dropdown-menu-items.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useComposedRef } from '@udecode/plate-common/react';\nimport { useColorInput } from '@udecode/plate-font/react';\n\nexport const ColorInput = withRef<'input'>(\n  ({ children, className, value = '#000000', ...props }, ref) => {\n    const { childProps, inputRef } = useColorInput();\n\n    return (\n      <div className=\"flex flex-col items-center\">\n        {React.Children.map(children, (child) => {\n          if (!child) return child;\n\n          return React.cloneElement(child as React.ReactElement, childProps);\n        })}\n\n        <input\n          ref={useComposedRef(ref, inputRef)}\n          className={cn('size-0 overflow-hidden border-0 p-0', className)}\n          value={value}\n          type=\"color\"\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n",
       "path": "plate-ui/color-input.tsx",
-      "target": "",
+      "target": "components/plate-ui/color-input.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col gap-4 p-4', className)}\n        {...props}\n      >\n        <ColorsCustom\n          color={color}\n          colors={colors}\n          customColors={customColors}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n        />\n\n        <Separator />\n\n        <ColorDropdownMenuItems\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n        {color && (\n          <DropdownMenuItem\n            className={buttonVariants({\n              isMenu: true,\n              variant: 'outline',\n            })}\n            onClick={clearColor}\n          >\n            Clear\n          </DropdownMenuItem>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
       "path": "plate-ui/color-picker.tsx",
-      "target": "",
+      "target": "components/plate-ui/color-picker.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n};\n\nexport function ColorsCustom({\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n}: ColorsCustomProps) {\n  const state = useColorsCustomState({\n    color,\n    colors,\n    customColors,\n    updateCustomColor,\n  });\n  const { inputProps, menuItemProps } = useColorsCustom(state);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <ColorInput {...inputProps}>\n        <DropdownMenuItem\n          className={buttonVariants({\n            isMenu: true,\n            variant: 'outline',\n          })}\n          {...menuItemProps}\n        >\n          CUSTOM\n        </DropdownMenuItem>\n      </ColorInput>\n\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      />\n    </div>\n  );\n}\n",
       "path": "plate-ui/colors-custom.tsx",
-      "target": "",
+      "target": "components/plate-ui/colors-custom.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/column-element.json b/apps/www/public/r/styles/default/column-element.json
index 7cd90b1b7b..89c25170e4 100644
--- a/apps/www/public/r/styles/default/column-element.json
+++ b/apps/www/public/r/styles/default/column-element.json
@@ -6,13 +6,13 @@
     {
       "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ColumnElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const readOnly = useReadOnly();\n    const { width } = useElement<TColumnElement>();\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn(\n          className,\n          !readOnly && 'rounded-lg border border-dashed p-1.5'\n        )}\n        style={{ width }}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  })\n);\n",
       "path": "plate-ui/column-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/column-element.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n  ColumnItemPlugin,\n  useColumnState,\n  useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement ref={ref} className={cn(className, 'my-2')} {...props}>\n        <ColumnFloatingToolbar>\n          <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n        </ColumnFloatingToolbar>\n      </PlateElement>\n    );\n  }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n  const readOnly = useReadOnly();\n\n  const {\n    setDoubleColumn,\n    setDoubleSideDoubleColumn,\n    setLeftSideDoubleColumn,\n    setRightSideDoubleColumn,\n    setThreeColumn,\n  } = useColumnState();\n\n  const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const isOpen = useDebouncePopoverOpen();\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        align=\"center\"\n        side=\"top\"\n        sideOffset={10}\n      >\n        <div className=\"box-content flex h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n          <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n            <Icons.doubleColumn />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n            <Icons.threeColumn />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n            <Icons.rightSideDoubleColumn />\n          </Button>\n          <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n            <Icons.leftSideDoubleColumn />\n          </Button>\n          <Button\n            size=\"sms\"\n            variant=\"ghost\"\n            onClick={setDoubleSideDoubleColumn}\n          >\n            <Icons.doubleSideDoubleColumn />\n          </Button>\n\n          <Separator orientation=\"vertical\" className=\"my-1\" />\n          <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n            <Icons.delete />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
       "path": "plate-ui/column-group-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/column-group-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/command.json b/apps/www/public/r/styles/default/command.json
index 27e905e3d3..ffb7e4b93e 100644
--- a/apps/www/public/r/styles/default/command.json
+++ b/apps/www/public/r/styles/default/command.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n  CommandPrimitive,\n  'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const CommandInput = withRef<typeof CommandPrimitive.Input>(\n  ({ className, ...props }, ref) => (\n    <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Icons.search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n);\n\nexport const CommandList = withCn(\n  CommandPrimitive.List,\n  'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n  CommandPrimitive.Empty,\n  'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n  CommandPrimitive.Group,\n  'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n  CommandPrimitive.Separator,\n  '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n  CommandPrimitive.Item,\n  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n",
       "path": "plate-ui/command.tsx",
-      "target": "",
+      "target": "components/plate-ui/command.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/comment-leaf.json b/apps/www/public/r/styles/default/comment-leaf.json
index 7ce05e7376..032961970e 100644
--- a/apps/www/public/r/styles/default/comment-leaf.json
+++ b/apps/www/public/r/styles/default/comment-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useCommentLeaf,\n  useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n  className,\n  ...props\n}: PlateLeafProps<TCommentText>) {\n  const { children, leaf, nodeProps } = props;\n\n  const state = useCommentLeafState({ leaf });\n  const { props: rootProps } = useCommentLeaf(state);\n\n  if (!state.commentCount) return <>{children}</>;\n\n  let aboveChildren = <>{children}</>;\n\n  if (!state.isActive) {\n    for (let i = 1; i < state.commentCount; i++) {\n      aboveChildren = <span className=\"bg-highlight/25\">{aboveChildren}</span>;\n    }\n  }\n\n  return (\n    <PlateLeaf\n      {...props}\n      className={cn(\n        'border-b-2 border-b-highlight/35 hover:bg-highlight/25',\n        state.isActive ? 'bg-highlight/25' : 'bg-highlight/15',\n        className\n      )}\n      nodeProps={{\n        ...rootProps,\n        ...nodeProps,\n      }}\n    >\n      {aboveChildren}\n    </PlateLeaf>\n  );\n}\n",
       "path": "plate-ui/comment-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/comment-toolbar-button.json b/apps/www/public/r/styles/default/comment-toolbar-button.json
index eac032483c..0dd8b9e883 100644
--- a/apps/www/public/r/styles/default/comment-toolbar-button.json
+++ b/apps/www/public/r/styles/default/comment-toolbar-button.json
@@ -4,7 +4,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { useCommentAddButton } from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function CommentToolbarButton() {\n  const { hidden, props } = useCommentAddButton();\n\n  if (hidden) return null;\n\n  return (\n    <ToolbarButton tooltip=\"Comment (⌘+⇧+M)\" {...props}>\n      <Icons.commentAdd />\n    </ToolbarButton>\n  );\n}\n",
       "path": "plate-ui/comment-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/comments-popover.json b/apps/www/public/r/styles/default/comments-popover.json
index 1886c715e0..4ad7543f34 100644
--- a/apps/www/public/r/styles/default/comments-popover.json
+++ b/apps/www/public/r/styles/default/comments-popover.json
@@ -6,49 +6,49 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  CommentProvider,\n  CommentsPositioner,\n  SCOPE_ACTIVE_COMMENT,\n  useFloatingCommentsContentState,\n  useFloatingCommentsState,\n} from '@udecode/plate-comments/react';\nimport { PortalBody } from '@udecode/plate-common/react';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\nimport { popoverVariants } from './popover';\n\nexport type FloatingCommentsContentProps = {\n  disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n  const { disableForm } = props;\n\n  const { activeCommentId, hasNoComment, myUserId, ref } =\n    useFloatingCommentsContentState();\n\n  return (\n    <CommentProvider\n      id={activeCommentId!}\n      key={activeCommentId}\n      scope={SCOPE_ACTIVE_COMMENT}\n    >\n      <div ref={ref} className={cn(popoverVariants(), 'relative w-[310px]')}>\n        {!hasNoComment && (\n          <>\n            <CommentItem key={activeCommentId} commentId={activeCommentId!} />\n\n            <CommentReplyItems />\n          </>\n        )}\n\n        {!!myUserId && !disableForm && <CommentCreateForm />}\n      </div>\n    </CommentProvider>\n  );\n}\n\nexport function CommentsPopover() {\n  const { activeCommentId, loaded } = useFloatingCommentsState();\n\n  if (!loaded || !activeCommentId) return null;\n\n  return (\n    <PortalBody>\n      <CommentsPositioner className=\"absolute z-50 w-[418px] pb-4\" data-popover>\n        <CommentsPopoverContent />\n      </CommentsPositioner>\n    </PortalBody>\n  );\n}\n",
       "path": "plate-ui/comments-popover.tsx",
-      "target": "",
+      "target": "components/plate-ui/comments-popover.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from './avatar';\n\nexport function CommentAvatar({ userId }: { userId: string | null }) {\n  const { useOption } = useEditorPlugin(CommentsPlugin);\n  const user = useOption('userById', userId);\n\n  if (!user) return null;\n\n  return (\n    <Avatar className=\"size-5\">\n      <AvatarImage alt={user.name} src={user.avatarUrl} />\n      <AvatarFallback>{user.name?.[0]}</AvatarFallback>\n    </Avatar>\n  );\n}\n",
       "path": "plate-ui/comment-avatar.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-avatar.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  CommentNewSubmitButton,\n  CommentNewTextarea,\n  CommentsPlugin,\n} from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { buttonVariants } from './button';\nimport { CommentAvatar } from './comment-avatar';\nimport { inputVariants } from './input';\n\nexport function CommentCreateForm() {\n  const { useOption } = useEditorPlugin(CommentsPlugin);\n\n  const myUserId = useOption('myUserId');\n\n  return (\n    <div className=\"flex w-full space-x-2\">\n      <CommentAvatar userId={myUserId} />\n\n      <div className=\"flex grow flex-col items-end gap-2\">\n        <CommentNewTextarea className={inputVariants()} />\n\n        <CommentNewSubmitButton\n          className={cn(buttonVariants({ size: 'sm' }), 'w-[90px]')}\n        >\n          Comment\n        </CommentNewSubmitButton>\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/comment-create-form.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-create-form.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  CommentProvider,\n  CommentsPlugin,\n  useCommentItemContentState,\n} from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\nimport { formatDistance } from 'date-fns';\n\nimport { CommentAvatar } from './comment-avatar';\nimport { CommentMoreDropdown } from './comment-more-dropdown';\nimport { CommentResolveButton } from './comment-resolve-button';\nimport { CommentValue } from './comment-value';\n\ntype PlateCommentProps = {\n  commentId: string;\n};\n\nfunction CommentItemContent() {\n  const {\n    comment,\n    commentText,\n    editingValue,\n    isMyComment,\n    isReplyComment,\n    user,\n  } = useCommentItemContentState();\n\n  return (\n    <div>\n      <div className=\"relative flex items-center gap-2\">\n        <CommentAvatar userId={comment.userId} />\n\n        <h4 className=\"text-sm font-semibold leading-none\">{user?.name}</h4>\n\n        <div className=\"text-xs leading-none text-muted-foreground\">\n          {formatDistance(comment.createdAt, Date.now())} ago\n        </div>\n\n        {isMyComment && (\n          <div className=\"absolute -right-0.5 -top-0.5 flex space-x-1\">\n            {isReplyComment ? null : <CommentResolveButton />}\n\n            <CommentMoreDropdown />\n          </div>\n        )}\n      </div>\n\n      <div className=\"mb-4 pl-7 pt-0.5\">\n        {editingValue ? (\n          <CommentValue />\n        ) : (\n          <div className=\"whitespace-pre-wrap text-sm\">{commentText}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function CommentItem({ commentId }: PlateCommentProps) {\n  const { useOption } = useEditorPlugin(CommentsPlugin);\n  const comment = useOption('commentById', commentId);\n\n  if (!comment) return null;\n\n  return (\n    <CommentProvider id={commentId} key={commentId}>\n      <CommentItemContent />\n    </CommentProvider>\n  );\n}\n",
       "path": "plate-ui/comment-item.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-item.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useCommentDeleteButton,\n  useCommentDeleteButtonState,\n  useCommentEditButton,\n  useCommentEditButtonState,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport function CommentMoreDropdown() {\n  const editButtonState = useCommentEditButtonState();\n  const { props: editProps } = useCommentEditButton(editButtonState);\n  const deleteButtonState = useCommentDeleteButtonState();\n  const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" className={cn('h-6 p-1 text-muted-foreground')}>\n          <Icons.more className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem {...editProps}>Edit comment</DropdownMenuItem>\n        <DropdownMenuItem {...deleteProps}>Delete comment</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/comment-more-dropdown.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-more-dropdown.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  SCOPE_ACTIVE_COMMENT,\n  useCommentReplies,\n} from '@udecode/plate-comments/react';\n\nimport { CommentItem } from './comment-item';\n\nexport function CommentReplyItems() {\n  const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);\n\n  return (\n    <>\n      {Object.keys(commentReplies).map((id) => (\n        <CommentItem key={id} commentId={id} />\n      ))}\n    </>\n  );\n}\n",
       "path": "plate-ui/comment-reply-items.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-reply-items.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  CommentResolveButton as CommentResolveButtonPrimitive,\n  useComment,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\n\nexport function CommentResolveButton() {\n  const comment = useComment()!;\n\n  return (\n    <CommentResolveButtonPrimitive\n      className={cn(\n        buttonVariants({ variant: 'ghost' }),\n        'h-6 p-1 text-muted-foreground'\n      )}\n    >\n      {comment.isResolved ? (\n        <Icons.refresh className=\"size-4\" />\n      ) : (\n        <Icons.check className=\"size-4\" />\n      )}\n    </CommentResolveButtonPrimitive>\n  );\n}\n",
       "path": "plate-ui/comment-resolve-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-resolve-button.tsx",
       "type": "registry:ui"
     },
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  CommentEditActions,\n  CommentEditTextarea,\n} from '@udecode/plate-comments/react';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\n\nexport function CommentValue() {\n  return (\n    <div className=\"my-2 flex flex-col items-end gap-2\">\n      <CommentEditTextarea className={cn(inputVariants(), 'min-h-[60px]')} />\n\n      <div className=\"flex space-x-2\">\n        <CommentEditActions.CancelButton\n          className={buttonVariants({ size: 'xs', variant: 'outline' })}\n        >\n          Cancel\n        </CommentEditActions.CancelButton>\n\n        <CommentEditActions.SaveButton\n          className={buttonVariants({ size: 'xs', variant: 'default' })}\n        >\n          Save\n        </CommentEditActions.SaveButton>\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/comment-value.tsx",
-      "target": "",
+      "target": "components/plate-ui/comment-value.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/controlled-demo.json b/apps/www/public/r/styles/default/controlled-demo.json
new file mode 100644
index 0000000000..3ea6500c0e
--- /dev/null
+++ b/apps/www/public/r/styles/default/controlled-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport {\n  Plate,\n  focusEditor,\n  focusEditorEdge,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nimport { Button } from '@/components/plate-ui/button';\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function ControlledEditorDemo() {\n  const editor = usePlateEditor({\n    value: [\n      {\n        children: [{ text: 'Initial Value' }],\n        type: 'p',\n      },\n    ],\n  });\n\n  return (\n    <div>\n      <Plate editor={editor}>\n        <Editor />\n      </Plate>\n\n      <div className=\"mt-4 flex flex-col gap-2\">\n        <Button\n          onClick={() => {\n            // Replace with HTML string\n            editor.tf.setValue([\n              {\n                children: [{ text: 'Replaced Value' }],\n                type: 'p',\n              },\n            ]);\n\n            focusEditorEdge(editor, { edge: 'end' });\n          }}\n        >\n          Replace Value\n        </Button>\n\n        <Button\n          onClick={() => {\n            editor.tf.reset();\n\n            focusEditor(editor);\n          }}\n        >\n          Reset Editor\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
+      "path": "example/controlled-demo.tsx",
+      "target": "components/controlled-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "controlled-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/cursor-overlay.json b/apps/www/public/r/styles/default/cursor-overlay.json
index 353b337305..bcd01a5ad1 100644
--- a/apps/www/public/r/styles/default/cursor-overlay.json
+++ b/apps/www/public/r/styles/default/cursor-overlay.json
@@ -4,7 +4,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  createPlatePlugin,\n  findEventRange,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n  type CursorData,\n  type CursorOverlayProps,\n  type CursorProps,\n  type CursorState,\n  CursorOverlay as CursorOverlayPrimitive,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\n\nexport function Cursor({\n  caretPosition,\n  classNames,\n  data,\n  disableCaret,\n  disableSelection,\n  selectionRects,\n}: CursorProps<CursorData>) {\n  const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n  return (\n    <>\n      {!disableSelection &&\n        selectionRects.map((position, i) => (\n          <div\n            key={i}\n            className={cn(\n              'pointer-events-none absolute z-10 opacity-30',\n              classNames?.selectionRect\n            )}\n            style={{\n              ...selectionStyle,\n              ...position,\n            }}\n          />\n        ))}\n      {!disableCaret && caretPosition && (\n        <div\n          className={cn(\n            'pointer-events-none absolute z-10 w-0.5',\n            classNames?.caret\n          )}\n          style={{ ...caretPosition, ...style }}\n        />\n      )}\n    </>\n  );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n  const editor = useEditorRef();\n  const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n  const allCursors = { ...cursors, ...dynamicCursors };\n\n  return (\n    <CursorOverlayPrimitive\n      {...props}\n      onRenderCursor={Cursor}\n      cursors={allCursors}\n    />\n  );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n  key: 'dragOverCursor',\n  options: { cursors: {} as Record<string, CursorState<CursorData>> },\n  handlers: {\n    onDragEnd: ({ editor, plugin }) => {\n      editor.setOption(plugin, 'cursors', {});\n    },\n    onDragLeave: ({ editor, plugin }) => {\n      editor.setOption(plugin, 'cursors', {});\n    },\n    onDragOver: ({ editor, event, plugin }) => {\n      if (editor.getOptions(DndPlugin).isDragging) return;\n\n      const range = findEventRange(editor, event);\n\n      if (!range) return;\n\n      editor.setOption(plugin, 'cursors', {\n        drag: {\n          key: 'drag',\n          data: {\n            style: {\n              backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n              width: 3,\n            },\n          },\n          selection: range,\n        },\n      });\n    },\n    onDrop: ({ editor, plugin }) => {\n      editor.setOption(plugin, 'cursors', {});\n    },\n  },\n});\n",
       "path": "plate-ui/cursor-overlay.tsx",
-      "target": "",
+      "target": "components/plate-ui/cursor-overlay.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/date-element.json b/apps/www/public/r/styles/default/date-element.json
index f41f1aa0cf..a871218de2 100644
--- a/apps/www/public/r/styles/default/date-element.json
+++ b/apps/www/public/r/styles/default/date-element.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('inline-block', className)}\n        contentEditable={false}\n        {...props}\n      >\n        <Popover>\n          <PopoverTrigger asChild>\n            <span\n              className={cn(\n                'w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground'\n              )}\n              contentEditable={false}\n            >\n              {element.date ? (\n                (() => {\n                  const today = new Date();\n                  const elementDate = new Date(element.date as string);\n                  const isToday =\n                    elementDate.getDate() === today.getDate() &&\n                    elementDate.getMonth() === today.getMonth() &&\n                    elementDate.getFullYear() === today.getFullYear();\n\n                  const isYesterday =\n                    new Date(\n                      today.setDate(today.getDate() - 1)\n                    ).toDateString() === elementDate.toDateString();\n                  const isTomorrow =\n                    new Date(\n                      today.setDate(today.getDate() + 2)\n                    ).toDateString() === elementDate.toDateString();\n\n                  if (isToday) return 'Today';\n                  if (isYesterday) return 'Yesterday';\n                  if (isTomorrow) return 'Tomorrow';\n\n                  return elementDate.toLocaleDateString(undefined, {\n                    day: 'numeric',\n                    month: 'long',\n                    year: 'numeric',\n                  });\n                })()\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </span>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\">\n            <Calendar\n              selected={new Date(element.date as string)}\n              onSelect={(date) => {\n                if (!date) return;\n\n                setNodes(\n                  editor,\n                  { date: date.toDateString() },\n                  { at: findNodePath(editor, element) }\n                );\n              }}\n              mode=\"single\"\n              initialFocus\n            />\n          </PopoverContent>\n        </Popover>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/date-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/date-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/dialog.json b/apps/www/public/r/styles/default/dialog.json
index 5cdad6293d..2bd94ebc5f 100644
--- a/apps/www/public/r/styles/default/dialog.json
+++ b/apps/www/public/r/styles/default/dialog.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Dialog = DialogPrimitive.Root;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = withCn(\n  DialogPrimitive.Overlay,\n  'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n);\n\nexport const DialogContent = withRef<typeof DialogPrimitive.Content>(\n  ({ children, className, ...props }, ref) => (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n          <Icons.close className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n);\n\nexport const DialogHeader = withCn(\n  createPrimitiveElement('div'),\n  'flex flex-col space-y-1.5 text-center sm:text-left'\n);\n\nexport const DialogFooter = withCn(\n  createPrimitiveElement('div'),\n  'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'\n);\n\nexport const DialogTitle = withCn(\n  DialogPrimitive.Title,\n  'text-lg font-semibold leading-none tracking-tight'\n);\n\nexport const DialogDescription = withCn(\n  DialogPrimitive.Description,\n  'text-sm text-muted-foreground'\n);\n",
       "path": "plate-ui/dialog.tsx",
-      "target": "",
+      "target": "components/plate-ui/dialog.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json
index 6422636d15..55168938c8 100644
--- a/apps/www/public/r/styles/default/draggable.json
+++ b/apps/www/public/r/styles/default/draggable.json
@@ -9,13 +9,13 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  type PlateElementProps,\n  MemoizedChildren,\n  useEditorPlugin,\n  useEditorRef,\n  withHOC,\n} from '@udecode/plate-common/react';\nimport {\n  type DragItemNode,\n  DraggableProvider,\n  useDraggable,\n  useDraggableGutter,\n  useDraggableState,\n  useDropLine,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps extends PlateElementProps {\n  /**\n   * Intercepts the drop handling. If `false` is returned, the default drop\n   * behavior is called after. If `true` is returned, the default behavior is\n   * not called.\n   */\n  onDropHandler?: (\n    editor: TEditor,\n    props: {\n      id: string;\n      dragItem: DragItemNode;\n      monitor: DropTargetMonitor<DragItemNode, unknown>;\n      nodeRef: any;\n    }\n  ) => boolean;\n}\n\nexport const Draggable = withHOC(\n  DraggableProvider,\n  withRef<'div', DraggableProps>(\n    ({ className, onDropHandler, ...props }, ref) => {\n      const { children, element } = props;\n\n      const state = useDraggableState({ element, onDropHandler });\n      const { isDragging } = state;\n      const { previewRef, handleRef } = useDraggable(state);\n\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'relative',\n            isDragging && 'opacity-50',\n            'group',\n            className\n          )}\n        >\n          <Gutter>\n            <div className={cn('slate-blockToolbarWrapper', 'flex h-[1.5em]')}>\n              <div\n                className={cn(\n                  'slate-blockToolbar',\n                  'pointer-events-auto mr-1 flex items-center'\n                )}\n              >\n                <div\n                  ref={handleRef}\n                  className=\"size-4\"\n                  data-key={element.id as string}\n                >\n                  <DragHandle />\n                </div>\n              </div>\n            </div>\n          </Gutter>\n\n          <div ref={previewRef} className=\"slate-blockWrapper\">\n            <MemoizedChildren>{children}</MemoizedChildren>\n\n            <DropLine />\n          </div>\n        </div>\n      );\n    }\n  )\n);\n\nconst Gutter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n  const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n  const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n  const gutter = useDraggableGutter();\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'slate-gutterLeft',\n        'absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 hover:opacity-100 group-hover:opacity-100',\n        isSelectionAreaVisible && 'hidden',\n        className\n      )}\n      {...props}\n      {...gutter.props}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst DragHandle = React.memo(() => {\n  const editor = useEditorRef();\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger type=\"button\">\n          <Icons.dragHandle\n            className=\"size-4 text-muted-foreground\"\n            onClick={(event) => {\n              event.stopPropagation();\n              event.preventDefault();\n            }}\n            onMouseDown={() => {\n              editor\n                .getApi(BlockSelectionPlugin)\n                .blockSelection?.resetSelectedIds();\n            }}\n          />\n        </TooltipTrigger>\n        <TooltipPortal>\n          <TooltipContent>Drag to move</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    </TooltipProvider>\n  );\n});\n\nconst DropLine = React.memo(\n  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ children, className, ...props }, ref) => {\n      const state = useDropLine();\n\n      if (!state.dropLine) return null;\n\n      return (\n        <div\n          ref={ref}\n          {...props}\n          {...state.props}\n          className={cn(\n            'slate-dropLine',\n            'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n            'bg-brand/50',\n            state.dropLine === 'top' && '-top-px',\n            state.dropLine === 'bottom' && '-bottom-px',\n            className\n          )}\n        >\n          {children}\n        </div>\n      );\n    }\n  )\n);\n",
       "path": "plate-ui/draggable.tsx",
-      "target": "",
+      "target": "components/plate-ui/draggable.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n  ParagraphPlugin,\n  createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n  type WithDraggableOptions,\n  withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { type DraggableProps, Draggable } from './draggable';\n\nexport const withDraggable = (\n  Component: FC,\n  options?: WithDraggableOptions<\n    Partial<Omit<DraggableProps, 'children' | 'editor' | 'element'>>\n  >\n) =>\n  withDraggablePrimitive<DraggableProps>(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n  return withDraggablesPrimitive(components, [\n    {\n      keys: [\n        ParagraphPlugin.key,\n        BulletedListPlugin.key,\n        NumberedListPlugin.key,\n      ],\n      level: 0,\n    },\n    {\n      key: HEADING_KEYS.h1,\n      draggableProps: {\n        className:\n          '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.875em]',\n      },\n    },\n    {\n      key: HEADING_KEYS.h2,\n      draggableProps: {\n        className:\n          '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.5em]',\n      },\n    },\n    {\n      key: HEADING_KEYS.h3,\n      draggableProps: {\n        className:\n          '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[2px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.25em]',\n      },\n    },\n    {\n      keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n      draggableProps: {\n        className:\n          '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0 [&_.slate-gutterLeft]:text-[1.1em]',\n      },\n    },\n    {\n      keys: [ParagraphPlugin.key],\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n      draggableProps: {\n        className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: BlockquotePlugin.key,\n      draggableProps: {\n        className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: CodeBlockPlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-6 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: ImagePlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: MediaEmbedPlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: ExcalidrawPlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: TogglePlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: ColumnPlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: PlaceholderPlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n    {\n      key: TablePlugin.key,\n      draggableProps: {\n        className:\n          '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n      },\n    },\n  ]);\n};\n",
       "path": "plate-ui/with-draggables.tsx",
-      "target": "",
+      "target": "components/plate-ui/with-draggables.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/dropdown-menu.json b/apps/www/public/r/styles/default/dropdown-menu.json
index b05c6f1e7e..f3d706744c 100644
--- a/apps/www/public/r/styles/default/dropdown-menu.json
+++ b/apps/www/public/r/styles/default/dropdown-menu.json
@@ -4,9 +4,9 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n  cn,\n  createPrimitiveElement,\n  withCn,\n  withProps,\n  withRef,\n  withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ children, className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icons.chevronRight className=\"ml-auto size-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n  className: cn(\n    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n  ),\n  sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants\n      ref={ref}\n      onCloseAutoFocus={(e) => {\n        e.preventDefault();\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  cn(\n    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n  ),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuItem = withVariants(\n  DropdownMenuPrimitive.Item,\n  menuItemVariants,\n  ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n  typeof DropdownMenuPrimitive.CheckboxItem\n>(({ children, className, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icons.check className=\"size-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\n\nexport const DropdownMenuRadioItem = withRef<\n  typeof DropdownMenuPrimitive.RadioItem,\n  {\n    hideIcon?: boolean;\n  }\n>(({ children, className, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icons.check className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn('select-none px-2 py-1.5 text-sm font-semibold'),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuLabel = withVariants(\n  DropdownMenuPrimitive.Label,\n  dropdownMenuLabelVariants,\n  ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n  DropdownMenuPrimitive.Separator,\n  '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (_value = !open) => {\n      setOpen(_value);\n    },\n    [open]\n  );\n\n  return {\n    open,\n    onOpenChange,\n  };\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n  cn,\n  createPrimitiveElement,\n  withCn,\n  withProps,\n  withRef,\n  withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n  typeof DropdownMenuPrimitive.SubTrigger,\n  {\n    inset?: boolean;\n  }\n>(({ children, className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <Icons.chevronRight className=\"ml-auto size-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\n\nexport const DropdownMenuSubContent = withCn(\n  DropdownMenuPrimitive.SubContent,\n  'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n  className: cn(\n    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n  ),\n  sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuContentVariants\n      ref={ref}\n      onCloseAutoFocus={(e) => {\n        e.preventDefault();\n      }}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst menuItemVariants = cva(\n  cn(\n    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n  ),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuItem = withVariants(\n  DropdownMenuPrimitive.Item,\n  menuItemVariants,\n  ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n  typeof DropdownMenuPrimitive.CheckboxItem\n>(({ children, className, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'cursor-pointer',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icons.check className=\"size-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\n\nexport const DropdownMenuRadioItem = withRef<\n  typeof DropdownMenuPrimitive.RadioItem,\n  {\n    hideIcon?: boolean;\n  }\n>(({ children, className, hideIcon, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',\n      className\n    )}\n    {...props}\n  >\n    {!hideIcon && (\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icons.check className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n    )}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\n\nconst dropdownMenuLabelVariants = cva(\n  cn('select-none px-2 py-1.5 text-sm font-semibold'),\n  {\n    variants: {\n      inset: {\n        true: 'pl-8',\n      },\n    },\n  }\n);\n\nexport const DropdownMenuLabel = withVariants(\n  DropdownMenuPrimitive.Label,\n  dropdownMenuLabelVariants,\n  ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n  DropdownMenuPrimitive.Separator,\n  '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (_value = !open) => {\n      setOpen(_value);\n    },\n    [open]\n  );\n\n  return {\n    open,\n    onOpenChange,\n  };\n};\n",
       "path": "plate-ui/dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/editable-voids-demo.json b/apps/www/public/r/styles/default/editable-voids-demo.json
new file mode 100644
index 0000000000..8e05ee4522
--- /dev/null
+++ b/apps/www/public/r/styles/default/editable-voids-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { ExitBreakPlugin } from '@udecode/plate-break/react';\nimport {\n  Plate,\n  createPlatePlugin,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { editableVoidsValue } from '@/plate/demo/values/editableVoidsValue';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { Input } from '@/components/plate-ui/input';\n\nexport const EditableVoidPlugin = createPlatePlugin({\n  key: 'editable-void',\n  node: {\n    component: EditableVoidElement,\n    isElement: true,\n    isVoid: true,\n  },\n});\n\nexport function EditableVoidElement({\n  attributes,\n  children,\n}: PlateRenderElementProps) {\n  const [inputValue, setInputValue] = useState('');\n\n  const editor = usePlateEditor({\n    id: 'editable-void-basic-elements',\n    override: { components: PlateUI },\n    plugins: [\n      BasicElementsPlugin,\n      resetBlockTypePlugin,\n      softBreakPlugin,\n      ExitBreakPlugin,\n    ],\n  });\n\n  return (\n    // Need contentEditable=false or Firefox has issues with certain input types.\n    <div {...attributes} contentEditable={false}>\n      <div className=\"mt-2 grid gap-6 rounded-md border p-6 shadow\">\n        <Input\n          id=\"name\"\n          className=\"my-2\"\n          value={inputValue}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n          }}\n          placeholder=\"Name\"\n          type=\"text\"\n        />\n\n        <div className=\"grid w-full max-w-sm items-center gap-2\">\n          <Label htmlFor=\"handed\">Left or right handed:</Label>\n\n          <RadioGroup id=\"handed\" defaultValue=\"r1\">\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r1\" value=\"r1\" />\n              <Label htmlFor=\"r1\">Left</Label>\n            </div>\n            <div className=\"flex items-center space-x-2\">\n              <RadioGroupItem id=\"r2\" value=\"r2\" />\n              <Label htmlFor=\"r2\">Right</Label>\n            </div>\n          </RadioGroup>\n        </div>\n\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"editable-void-basic-elements\">\n            Tell us about yourself:\n          </Label>\n\n          <Plate\n            editor={editor}\n            // initialValue={basicElementsValue}\n          >\n            <Editor {...editableProps} />\n          </Plate>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n\nexport default function EditableVoidsDemo() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin, EditableVoidPlugin],\n    value: editableVoidsValue,\n  });\n\n  return (\n    <div className=\"p-10\">\n      <Plate editor={editor}>\n        <Editor {...editableProps} />\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editable-voids-demo.tsx",
+      "target": "components/editable-voids-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editable-voids-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-button.json b/apps/www/public/r/styles/default/editor-button.json
new file mode 100644
index 0000000000..bc98a9633a
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-button.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Button } from '@/components/plate-ui/button';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorButton() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] grid w-full gap-2 p-10\">\n      <Plate editor={editor}>\n        <Editor placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n\n        <Button>Send message</Button>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-button.tsx",
+      "target": "components/editor-button.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-button",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-default.json b/apps/www/public/r/styles/default/editor-default.json
new file mode 100644
index 0000000000..d975fd20c5
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-default.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorDefault() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] p-10\">\n      <Plate editor={editor}>\n        <Editor placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-default.tsx",
+      "target": "components/editor-default.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-default",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-disabled.json b/apps/www/public/r/styles/default/editor-disabled.json
new file mode 100644
index 0000000000..e6c50e1614
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-disabled.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function EditorDisabled() {\n  const editor = usePlateEditor();\n\n  return (\n    <div className=\"mt-[72px] p-10\">\n      <Plate editor={editor}>\n        <Editor disabled placeholder=\"Type your message here.\" />\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-disabled.tsx",
+      "target": "components/editor-disabled.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-disabled",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-form.json b/apps/www/public/r/styles/default/editor-form.json
new file mode 100644
index 0000000000..060b74e641
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-form.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorForm() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] p-10\">\n      <Plate editor={editor}>\n        <Editor placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-form.tsx",
+      "target": "components/editor-form.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-form",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-ghost.json b/apps/www/public/r/styles/default/editor-ghost.json
new file mode 100644
index 0000000000..9eba51d69e
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-ghost.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorGhost() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] p-10\">\n      <Plate editor={editor}>\n        <Editor variant=\"ghost\" placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-ghost.tsx",
+      "target": "components/editor-ghost.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-ghost",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-label.json b/apps/www/public/r/styles/default/editor-label.json
new file mode 100644
index 0000000000..6e32f9d942
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-label.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/ui/label';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorLabel() {\n  const editor = usePlateEditor({\n    id: 'message',\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] grid gap-1.5 p-10\">\n      <Plate editor={editor}>\n        <Label htmlFor=\"message\">Your message</Label>\n        <Editor id=\"message\" placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-label.tsx",
+      "target": "components/editor-label.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-label",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor-text.json b/apps/www/public/r/styles/default/editor-text.json
new file mode 100644
index 0000000000..3949af1396
--- /dev/null
+++ b/apps/www/public/r/styles/default/editor-text.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/ui/label';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorText() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n  });\n\n  return (\n    <div className=\"mt-[72px] grid gap-1.5 p-10\">\n      <Plate editor={editor}>\n        <Label htmlFor=\"message-2\">Your Message</Label>\n        <Editor id=\"message-2\" placeholder=\"Type your message here.\" />\n\n        <FloatingToolbar>\n          <FloatingToolbarButtons />\n        </FloatingToolbar>\n\n        <p className=\"text-sm text-muted-foreground\">\n          Your message will be copied to the support team.\n        </p>\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/editor-text.tsx",
+      "target": "components/editor-text.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "editor-text",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/editor.json b/apps/www/public/r/styles/default/editor.json
index fe33ac37e5..fb9b1fa831 100644
--- a/apps/www/public/r/styles/default/editor.json
+++ b/apps/www/public/r/styles/default/editor.json
@@ -4,7 +4,7 @@
     {
       "content": "import React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport { PlateContent } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorVariants = cva(\n  cn(\n    'relative overflow-x-auto whitespace-pre-wrap break-words text-foreground',\n    'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      focusRing: true,\n      size: 'sm',\n      variant: 'outline',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focusRing: {\n        false: '',\n        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      size: {\n        md: 'text-base',\n        sm: 'text-sm',\n      },\n      variant: {\n        ghost: '',\n        outline: 'border border-input',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  (\n    {\n      className,\n      disabled,\n      focusRing,\n      focused,\n      readOnly,\n      size,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({\n              disabled,\n              focusRing,\n              focused,\n              size,\n              variant,\n            }),\n            className\n          )}\n          readOnly={disabled ?? readOnly}\n          aria-disabled={disabled}\n          data-plate-selectable\n          disableDefaultStyles\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n",
       "path": "plate-ui/editor.tsx",
-      "target": "",
+      "target": "components/plate-ui/editor.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/emoji-dropdown-menu.json b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
index 4753db7388..fe47924a05 100644
--- a/apps/www/public/r/styles/default/emoji-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
@@ -6,55 +6,55 @@
     {
       "content": "import React from 'react';\n\nimport {\n  type EmojiDropdownMenuOptions,\n  useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\nimport { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';\nimport { ToolbarButton } from './toolbar';\n\ntype EmojiDropdownMenuProps = {\n  options?: EmojiDropdownMenuOptions;\n} & React.ComponentPropsWithoutRef<typeof ToolbarButton>;\n\nexport function EmojiDropdownMenu({\n  options,\n  ...props\n}: EmojiDropdownMenuProps) {\n  const { emojiPickerState, isOpen, setIsOpen } =\n    useEmojiDropdownMenuState(options);\n\n  return (\n    <EmojiToolbarDropdown\n      control={\n        <ToolbarButton pressed={isOpen} tooltip=\"Emoji\" isDropdown {...props}>\n          <Icons.emoji className=\"size-4\" />\n        </ToolbarButton>\n      }\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n    >\n      <EmojiPicker\n        {...emojiPickerState}\n        icons={{\n          categories: emojiCategoryIcons,\n          search: emojiSearchIcons,\n        }}\n        isOpen={isOpen}\n        setIsOpen={setIsOpen}\n        settings={options?.settings}\n      />\n    </EmojiToolbarDropdown>\n  );\n}\n",
       "path": "plate-ui/emoji-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-dropdown-menu.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import React, { type ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n  children: ReactNode;\n  control: ReactNode;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n  children,\n  control,\n  isOpen,\n  setIsOpen,\n}: EmojiToolbarDropdownProps) {\n  return (\n    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n      <Popover.Trigger asChild>{control}</Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content className=\"z-[100]\">{children}</Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n",
       "path": "plate-ui/emoji-toolbar-dropdown.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-toolbar-dropdown.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import type React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\n\nimport {\n  AppleIcon,\n  ClockIcon,\n  CompassIcon,\n  FlagIcon,\n  LeafIcon,\n  LightbulbIcon,\n  MusicIcon,\n  SearchIcon,\n  SmileIcon,\n  StarIcon,\n  XIcon,\n} from 'lucide-react';\n\nexport const emojiCategoryIcons: Record<\n  EmojiCategoryList,\n  {\n    outline: React.ReactElement;\n    solid: React.ReactElement; // Needed to add another solid variant - outline will be used for now\n  }\n> = {\n  activity: {\n    outline: (\n      <svg\n        className=\"size-full\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1\" />\n        <path d=\"m5 4.9 14 14.2\" />\n        <path d=\"M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3\" />\n      </svg>\n    ),\n    solid: (\n      <svg\n        className=\"size-full\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1\" />\n        <path d=\"m5 4.9 14 14.2\" />\n        <path d=\"M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3\" />\n      </svg>\n    ),\n  },\n\n  custom: {\n    outline: <StarIcon className=\"size-full\" />,\n    solid: <StarIcon className=\"size-full\" />,\n  },\n\n  flags: {\n    outline: <FlagIcon className=\"size-full\" />,\n    solid: <FlagIcon className=\"size-full\" />,\n  },\n\n  foods: {\n    outline: <AppleIcon className=\"size-full\" />,\n    solid: <AppleIcon className=\"size-full\" />,\n  },\n\n  frequent: {\n    outline: <ClockIcon className=\"size-full\" />,\n    solid: <ClockIcon className=\"size-full\" />,\n  },\n\n  nature: {\n    outline: <LeafIcon className=\"size-full\" />,\n    solid: <LeafIcon className=\"size-full\" />,\n  },\n\n  objects: {\n    outline: <LightbulbIcon className=\"size-full\" />,\n    solid: <LightbulbIcon className=\"size-full\" />,\n  },\n\n  people: {\n    outline: <SmileIcon className=\"size-full\" />,\n    solid: <SmileIcon className=\"size-full\" />,\n  },\n\n  places: {\n    outline: <CompassIcon className=\"size-full\" />,\n    solid: <CompassIcon className=\"size-full\" />,\n  },\n\n  symbols: {\n    outline: <MusicIcon className=\"size-full\" />,\n    solid: <MusicIcon className=\"size-full\" />,\n  },\n};\n\nexport const emojiSearchIcons = {\n  delete: <XIcon className=\"size-4 text-current\" />,\n  loupe: <SearchIcon className=\"size-4 text-current\" />,\n};\n",
       "path": "plate-ui/emoji-icons.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-icons.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import React from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n  clearSearch,\n  emoji,\n  emojiLibrary,\n  focusedCategory,\n  hasFound,\n  i18n,\n  icons,\n  isSearching,\n  refs,\n  searchResult,\n  searchValue,\n  setSearch,\n  settings = EmojiSettings,\n  visibleCategories,\n  handleCategoryClick,\n  onMouseOver,\n  onSelectEmoji,\n}: UseEmojiPickerType) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col rounded-xl bg-popover text-popover-foreground',\n        'h-[23rem] w-80 border shadow-md'\n      )}\n    >\n      <EmojiPickerNavigation\n        onClick={handleCategoryClick}\n        emojiLibrary={emojiLibrary}\n        focusedCategory={focusedCategory}\n        i18n={i18n}\n        icons={icons}\n      />\n      <EmojiPickerSearchBar\n        i18n={i18n}\n        searchValue={searchValue}\n        setSearch={setSearch}\n      >\n        <EmojiPickerSearchAndClear\n          clearSearch={clearSearch}\n          i18n={i18n}\n          searchValue={searchValue}\n        />\n      </EmojiPickerSearchBar>\n      <EmojiPickerContent\n        onMouseOver={onMouseOver}\n        onSelectEmoji={onSelectEmoji}\n        emojiLibrary={emojiLibrary}\n        i18n={i18n}\n        isSearching={isSearching}\n        refs={refs}\n        searchResult={searchResult}\n        settings={settings}\n        visibleCategories={visibleCategories}\n      />\n      <EmojiPickerPreview\n        emoji={emoji}\n        hasFound={hasFound}\n        i18n={i18n}\n        isSearching={isSearching}\n      />\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span style={{ position: 'relative' }} data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-content.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker-content.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import { useMemo } from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n  IEmojiFloatingLibrary,\n  UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n  emojiLibrary: IEmojiFloatingLibrary,\n  focusedCategory?: EmojiCategoryList\n) => {\n  let width = 0;\n  let position = 0;\n\n  if (focusedCategory) {\n    width = 100 / emojiLibrary.getGrid().size;\n    position = focusedCategory\n      ? emojiLibrary.indexOf(focusedCategory) * 100\n      : 0;\n  }\n\n  return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  const { position, width } = useMemo(\n    () => getBarProperty(emojiLibrary, focusedCategory),\n    [emojiLibrary, focusedCategory]\n  );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"size-5\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          />\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-navigation.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker-navigation.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerPreviewProps = Pick<\n  UseEmojiPickerType,\n  'emoji' | 'hasFound' | 'i18n' | 'isSearching'\n>;\n\nexport type EmojiPreviewProps = Pick<UseEmojiPickerType, 'emoji'>;\n\nexport type NoEmojiPreviewProps = Pick<UseEmojiPickerType, 'i18n'>;\n\nexport type PickAnEmojiPreviewProps = NoEmojiPreviewProps;\n\nfunction EmojiPreview({ emoji }: EmojiPreviewProps) {\n  return (\n    <div className=\"flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2\">\n      <div className=\"flex items-center justify-center text-2xl\">\n        {emoji?.skins[0].native}\n      </div>\n      <div className=\"overflow-hidden pl-2\">\n        <div className=\"truncate text-sm font-semibold\">{emoji?.name}</div>\n        <div className=\"truncate text-sm\">{`:${emoji?.id}:`}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction NoEmoji({ i18n }: NoEmojiPreviewProps) {\n  return (\n    <div className=\"flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2\">\n      <div className=\"flex items-center justify-center text-2xl\">😢</div>\n      <div className=\"overflow-hidden pl-2\">\n        <div className=\"truncate text-sm font-bold\">\n          {i18n.searchNoResultsTitle}\n        </div>\n        <div className=\"truncate text-sm\">{i18n.searchNoResultsSubtitle}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {\n  return (\n    <div className=\"flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2\">\n      <div className=\"flex items-center justify-center text-2xl\">☝️</div>\n      <div className=\"overflow-hidden pl-2\">\n        <div className=\"truncate text-sm font-semibold\">{i18n.pick}</div>\n      </div>\n    </div>\n  );\n}\n\nexport function EmojiPickerPreview({\n  emoji,\n  hasFound = true,\n  i18n,\n  isSearching = false,\n  ...props\n}: EmojiPickerPreviewProps) {\n  const showPickEmoji = !emoji && (!isSearching || hasFound);\n  const showNoEmoji = isSearching && !hasFound;\n  const showPreview = emoji && !showNoEmoji && !showNoEmoji;\n\n  return (\n    <>\n      {showPreview && <EmojiPreview emoji={emoji} {...props} />}\n      {showPickEmoji && <PickAnEmoji i18n={i18n} {...props} />}\n      {showNoEmoji && <NoEmoji i18n={i18n} {...props} />}\n    </>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-preview.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker-preview.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport { emojiSearchIcons } from './emoji-icons';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n  UseEmojiPickerType,\n  'clearSearch' | 'i18n' | 'searchValue'\n>;\n\nexport function EmojiPickerSearchAndClear({\n  clearSearch,\n  i18n,\n  searchValue,\n}: EmojiPickerSearchAndClearProps) {\n  return (\n    <div className=\"flex items-center text-foreground\">\n      <div\n        className={cn(\n          'absolute left-2.5 top-1/2 z-10 flex size-5 -translate-y-1/2 items-center justify-center text-foreground'\n        )}\n      >\n        {emojiSearchIcons.loupe}\n      </div>\n      {searchValue && (\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className={cn(\n            'absolute right-0.5 top-1/2 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-popover-foreground hover:bg-transparent'\n          )}\n          onClick={clearSearch}\n          title={i18n.clear}\n          aria-label=\"Clear\"\n          type=\"button\"\n        >\n          {emojiSearchIcons.delete}\n        </Button>\n      )}\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-search-and-clear.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker-search-and-clear.tsx",
       "type": "registry:ui"
     },
     {
       "content": "import type { ReactNode } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerSearchBarProps = {\n  children: ReactNode;\n} & Pick<UseEmojiPickerType, 'i18n' | 'searchValue' | 'setSearch'>;\n\nexport function EmojiPickerSearchBar({\n  children,\n  i18n,\n  searchValue,\n  setSearch,\n}: EmojiPickerSearchBarProps) {\n  return (\n    <div className=\"flex items-center px-2\">\n      <div className=\"relative flex grow items-center\">\n        <input\n          className=\"block w-full appearance-none rounded-full border-0 bg-muted px-10 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:outline-none\"\n          value={searchValue}\n          onChange={(event) => setSearch(event.target.value)}\n          placeholder={i18n.search}\n          aria-label=\"Search\"\n          autoComplete=\"off\"\n          type=\"text\"\n        />\n        {children}\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-search-bar.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-picker-search-bar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/emoji-input-element.json b/apps/www/public/r/styles/default/emoji-input-element.json
index bdca2c1528..f70007616e 100644
--- a/apps/www/public/r/styles/default/emoji-input-element.json
+++ b/apps/www/public/r/styles/default/emoji-input-element.json
@@ -4,9 +4,9 @@
   ],
   "files": [
     {
-      "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/registry/default/hooks/use-debounce';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n    const [value, setValue] = useState('');\n    const debouncedValue = useDebounce(value, 100);\n    const isPending = value !== debouncedValue;\n\n    const filteredEmojis = useMemo(() => {\n      if (debouncedValue.trim().length === 0) return [];\n\n      return EmojiInlineIndexSearch.getInstance()\n        .search(debouncedValue.replace(/:$/, ''))\n        .get();\n    }, [debouncedValue]);\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox\n          value={value}\n          element={element}\n          filter={false}\n          setValue={setValue}\n          trigger=\":\"\n          hideWhenNoValue\n        >\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            {!isPending && (\n              <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n            )}\n\n            {filteredEmojis.map((emoji) => (\n              <InlineComboboxItem\n                key={emoji.id}\n                value={emoji.name}\n                onClick={() => insertEmoji(editor, emoji)}\n              >\n                {emoji.skins[0].native} {emoji.name}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/hooks/use-debounce';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n    const [value, setValue] = useState('');\n    const debouncedValue = useDebounce(value, 100);\n    const isPending = value !== debouncedValue;\n\n    const filteredEmojis = useMemo(() => {\n      if (debouncedValue.trim().length === 0) return [];\n\n      return EmojiInlineIndexSearch.getInstance()\n        .search(debouncedValue.replace(/:$/, ''))\n        .get();\n    }, [debouncedValue]);\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox\n          value={value}\n          element={element}\n          filter={false}\n          setValue={setValue}\n          trigger=\":\"\n          hideWhenNoValue\n        >\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            {!isPending && (\n              <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n            )}\n\n            {filteredEmojis.map((emoji) => (\n              <InlineComboboxItem\n                key={emoji.id}\n                value={emoji.name}\n                onClick={() => insertEmoji(editor, emoji)}\n              >\n                {emoji.skins[0].native} {emoji.name}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/emoji-input-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/emoji-input-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/excalidraw-element.json b/apps/www/public/r/styles/default/excalidraw-element.json
index 1c46cf946d..d99e5622b7 100644
--- a/apps/www/public/r/styles/default/excalidraw-element.json
+++ b/apps/www/public/r/styles/default/excalidraw-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ExcalidrawElement = withRef<typeof PlateElement>(\n  ({ nodeProps, ...props }, ref) => {\n    const { children, element } = props;\n\n    const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n      element,\n    });\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div contentEditable={false}>\n          <div className=\"h-[600px]\">\n            {Excalidraw && (\n              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />\n            )}\n          </div>\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/excalidraw-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/excalidraw-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/find-replace-demo.json b/apps/www/public/r/styles/default/find-replace-demo.json
new file mode 100644
index 0000000000..75f6d2f250
--- /dev/null
+++ b/apps/www/public/r/styles/default/find-replace-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useState } from 'react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate } from '@udecode/plate-common/react';\nimport { usePlateEditor } from '@udecode/plate-core/react';\nimport { FindReplacePlugin } from '@udecode/plate-find-replace';\n\nimport { Icons } from '@/components/icons';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { findReplaceValue } from '@/plate/demo/values/findReplaceValue';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\n\nexport interface SearchHighlightToolbarProps {\n  icon: any;\n  setSearch: any;\n}\n\nexport function SearchHighlightToolbar({\n  icon: Icon,\n  setSearch,\n}: SearchHighlightToolbarProps) {\n  return (\n    <FixedToolbar className=\"h-[38px]\">\n      <div\n        style={{\n          marginBottom: '10px',\n          paddingBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <Icon\n          size={18}\n          style={{\n            color: '#ccc',\n            left: '0.5em',\n            position: 'absolute',\n            top: '0.5em',\n          }}\n        />\n        <input\n          data-testid=\"ToolbarSearchHighlightInput\"\n          style={{\n            background: '#fafafa',\n            border: '2px solid #ddd',\n            boxSizing: 'border-box',\n            fontSize: '0.85em',\n            padding: '0.5em',\n            paddingLeft: '2em',\n            width: '100%',\n          }}\n          onChange={(e) => setSearch(e.target.value)}\n          placeholder=\"Search the text...\"\n          type=\"search\"\n        />\n      </div>\n    </FixedToolbar>\n  );\n}\n\nexport default function FindReplaceDemo() {\n  const [search, setSearch] = useState('');\n\n  const editor = usePlateEditor(\n    {\n      override: {\n        components: PlateUI,\n      },\n      plugins: [\n        BasicElementsPlugin,\n        BasicMarksPlugin,\n        FindReplacePlugin.configure({ options: { search } }),\n      ],\n      value: findReplaceValue,\n    },\n    [search]\n  );\n\n  return (\n    <>\n      <SearchHighlightToolbar icon={Icons.search} setSearch={setSearch} />\n\n      <Plate editor={editor}>\n        <Editor {...editableProps} />\n      </Plate>\n    </>\n  );\n}\n",
+      "path": "example/find-replace-demo.tsx",
+      "target": "components/find-replace-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "find-replace-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index c124afefcf..b7c858254e 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"w-full overflow-hidden\">\n      <div\n        className=\"flex flex-wrap\"\n        style={{\n          transform: 'translateX(calc(-1px))',\n        }}\n      >\n        {!readOnly && (\n          <>\n            <ToolbarGroup noSeparator>\n              <InsertDropdownMenu />\n              <TurnIntoDropdownMenu />\n            </ToolbarGroup>\n\n            <ToolbarGroup>\n              <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n                <Icons.bold />\n              </MarkToolbarButton>\n              <MarkToolbarButton\n                nodeType={ItalicPlugin.key}\n                tooltip=\"Italic (⌘+I)\"\n              >\n                <Icons.italic />\n              </MarkToolbarButton>\n              <MarkToolbarButton\n                nodeType={UnderlinePlugin.key}\n                tooltip=\"Underline (⌘+U)\"\n              >\n                <Icons.underline />\n              </MarkToolbarButton>\n\n              <MarkToolbarButton\n                nodeType={StrikethroughPlugin.key}\n                tooltip=\"Strikethrough (⌘+⇧+M)\"\n              >\n                <Icons.strikethrough />\n              </MarkToolbarButton>\n              <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n                <Icons.code />\n              </MarkToolbarButton>\n            </ToolbarGroup>\n          </>\n        )}\n\n        <div className=\"grow\" />\n\n        <ToolbarGroup noSeparator>\n          <ModeDropdownMenu />\n        </ToolbarGroup>\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
-      "target": "",
+      "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/fixed-toolbar.json b/apps/www/public/r/styles/default/fixed-toolbar.json
index 4b3a2201a1..4d671871ce 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar.json
@@ -4,7 +4,7 @@
     {
       "content": "import { withCn } from '@udecode/cn';\n\nimport { Toolbar } from './toolbar';\n\nexport const FixedToolbar = withCn(\n  Toolbar,\n  'supports-backdrop-blur:bg-background/60 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur'\n);\n",
       "path": "plate-ui/fixed-toolbar.tsx",
-      "target": "",
+      "target": "components/plate-ui/fixed-toolbar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/floating-toolbar-buttons.json b/apps/www/public/r/styles/default/floating-toolbar-buttons.json
index a82d31fcd1..816d375ffd 100644
--- a/apps/www/public/r/styles/default/floating-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/floating-toolbar-buttons.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <>\n      {!readOnly && (\n        <>\n          <TurnIntoDropdownMenu />\n\n          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n            <Icons.bold />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip=\"Italic (⌘+I)\">\n            <Icons.italic />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={UnderlinePlugin.key}\n            tooltip=\"Underline (⌘+U)\"\n          >\n            <Icons.underline />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={StrikethroughPlugin.key}\n            tooltip=\"Strikethrough (⌘+⇧+M)\"\n          >\n            <Icons.strikethrough />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n            <Icons.code />\n          </MarkToolbarButton>\n        </>\n      )}\n    </>\n  );\n}\n",
       "path": "plate-ui/floating-toolbar-buttons.tsx",
-      "target": "",
+      "target": "components/plate-ui/floating-toolbar-buttons.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/floating-toolbar.json b/apps/www/public/r/styles/default/floating-toolbar.json
index 64cc6af03d..4e6e5628e0 100644
--- a/apps/www/public/r/styles/default/floating-toolbar.json
+++ b/apps/www/public/r/styles/default/floating-toolbar.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useComposedRef,\n  useEditorId,\n  useEditorRef,\n  useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n  type FloatingToolbarState,\n  flip,\n  offset,\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\nimport { LinkPlugin } from '@udecode/plate-link/react';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n  typeof Toolbar,\n  {\n    state?: FloatingToolbarState;\n  }\n>(({ children, state, ...props }, componentRef) => {\n  const editor = useEditorRef();\n  const editorId = useEditorId();\n  const focusedEditorId = useEventEditorSelectors.focus();\n  const isFloatingLinkOpen = !!editor.useOption(LinkPlugin, 'mode');\n\n  const floatingToolbarState = useFloatingToolbarState({\n    editorId,\n    focusedEditorId,\n    hideToolbar: isFloatingLinkOpen,\n    ...state,\n    floatingOptions: {\n      middleware: [\n        offset(12),\n        flip({\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n          padding: 12,\n        }),\n      ],\n      placement: 'top',\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    clickOutsideRef,\n    hidden,\n    props: rootProps,\n    ref: floatingRef,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <div ref={clickOutsideRef}>\n      <Toolbar\n        ref={ref}\n        className={cn(\n          'absolute z-50 whitespace-nowrap rounded-md border bg-popover px-1 opacity-100 shadow-md print:hidden'\n        )}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </div>\n  );\n});\n",
       "path": "plate-ui/floating-toolbar.tsx",
-      "target": "",
+      "target": "components/plate-ui/floating-toolbar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/heading-element.json b/apps/www/public/r/styles/default/heading-element.json
index 63cebfbfe0..3b0b7b58db 100644
--- a/apps/www/public/r/styles/default/heading-element.json
+++ b/apps/www/public/r/styles/default/heading-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { PlateElement } from './plate-element';\n\nconst headingVariants = cva('relative mb-1', {\n  variants: {\n    variant: {\n      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',\n      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',\n      h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',\n      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n    },\n  },\n});\n\nconst blockVariants = cva('', {\n  variants: {\n    isFirstBlock: {\n      false: '',\n      true: 'mt-0',\n    },\n  },\n});\n\nconst HeadingElementVariants = withVariants(\n  withVariants(PlateElement, headingVariants, ['variant']),\n  blockVariants,\n  ['isFirstBlock']\n);\n\nexport const HeadingElement = withRef<typeof HeadingElementVariants>(\n  ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n    const { editor, element } = props;\n\n    return (\n      <HeadingElementVariants\n        ref={ref}\n        as={variant!}\n        variant={variant}\n        isFirstBlock={element === editor.children[0]}\n        {...props}\n      >\n        {children}\n      </HeadingElementVariants>\n    );\n  }\n);\n",
       "path": "plate-ui/heading-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/heading-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/highlight-leaf.json b/apps/www/public/r/styles/default/highlight-leaf.json
index b00103bc32..d451b699f2 100644
--- a/apps/www/public/r/styles/default/highlight-leaf.json
+++ b/apps/www/public/r/styles/default/highlight-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => (\n    <PlateLeaf\n      ref={ref}\n      asChild\n      className={cn('bg-highlight/30 text-inherit', className)}\n      {...props}\n    >\n      <mark>{children}</mark>\n    </PlateLeaf>\n  )\n);\n",
       "path": "plate-ui/highlight-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/highlight-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/hr-element.json b/apps/www/public/r/styles/default/hr-element.json
index e5eb2ddbc0..47fddd3e2e 100644
--- a/apps/www/public/r/styles/default/hr-element.json
+++ b/apps/www/public/r/styles/default/hr-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { PlateElement } from './plate-element';\n\nexport const HrElement = withRef<typeof PlateElement>(\n  ({ className, nodeProps, ...props }, ref) => {\n    const { children } = props;\n\n    const selected = useSelected();\n    const focused = useFocused();\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div className=\"py-6\" contentEditable={false}>\n          <hr\n            {...nodeProps}\n            className={cn(\n              'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content',\n              selected && focused && 'ring-2 ring-ring ring-offset-2',\n              className\n            )}\n          />\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/hr-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/hr-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/hundreds-blocks-demo.json b/apps/www/public/r/styles/default/hundreds-blocks-demo.json
new file mode 100644
index 0000000000..b57ee85a56
--- /dev/null
+++ b/apps/www/public/r/styles/default/hundreds-blocks-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useCallback, useMemo, useState } from 'react';\n\nimport type { TElement, Value } from '@udecode/plate-common';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { createEditor } from 'slate';\nimport {\n  type ReactEditor,\n  type RenderElementProps,\n  Editable,\n  Slate,\n  withReact,\n} from 'slate-react';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { createHugeDocumentValue } from '@/plate/demo/values/createHugeDocumentValue';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = createHugeDocumentValue();\n\nfunction WithPlate() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Editor {...editableProps} />\n    </Plate>\n  );\n}\n\nfunction Element({ attributes, children, element }: RenderElementProps) {\n  switch ((element as TElement).type) {\n    case 'h1': {\n      return <h1 {...attributes}>{children}</h1>;\n    }\n    default: {\n      return <p {...attributes}>{children}</p>;\n    }\n  }\n}\n\nfunction WithoutPlate() {\n  const [initialValue, setValue] = useState(value);\n  const renderElement = useCallback((p: any) => <Element {...p} />, []);\n  const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n  const onChange = useCallback((newValue: Value) => setValue(newValue), []);\n\n  return (\n    <Slate\n      onChange={onChange as any}\n      editor={editor}\n      initialValue={initialValue}\n    >\n      <Editable renderElement={renderElement} {...(editableProps as any)} />\n    </Slate>\n  );\n}\n\nexport default function HundredsBlocksDemo() {\n  return (\n    <div className=\"flex\">\n      <div className=\"w-1/2 p-4\">\n        <WithPlate />\n      </div>\n      <div className=\"w-1/2 p-4\">\n        <WithoutPlate />\n      </div>\n    </div>\n  );\n}\n",
+      "path": "example/hundreds-blocks-demo.tsx",
+      "target": "components/hundreds-blocks-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "hundreds-blocks-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/hundreds-editors-demo.json b/apps/www/public/r/styles/default/hundreds-editors-demo.json
new file mode 100644
index 0000000000..699db7fe0f
--- /dev/null
+++ b/apps/www/public/r/styles/default/hundreds-editors-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { createMultiEditorsValue } from '@/plate/demo/values/createMultiEditorsValue';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst values = createMultiEditorsValue();\n\nfunction WithPlate({ id, value }: any) {\n  const editor = usePlateEditor({\n    id,\n    // override: { components: PlateUI },\n    // plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Editor {...editableProps} />\n    </Plate>\n  );\n}\n\n// function Element({ attributes, children, element }: any) {\n//   switch (element.type) {\n//     case 'h1':\n//       return <h1 {...attributes}>{children}</h1>;\n//     default:\n//       return <p {...attributes}>{children}</p>;\n//   }\n// }\n\n// function WithoutPlate({ initialValue }: any) {\n//   const [value, setValue] = useState(initialValue);\n//   const renderElement = useCallback((p) => <Element {...p} />, []);\n//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n//\n//   return (\n//     <Slate\n//       editor={editor}\n//       value={value}\n//       onChange={useCallback((v) => setValue(v), [])}\n//     >\n//       <Editable renderElement={renderElement} />\n//     </Slate>\n//   );\n// }\n\nexport default function HundredsEditorsDemo() {\n  return (\n    <div className=\"flex flex-col\">\n      {values.map((value, idx) => {\n        return (\n          <div key={idx} className=\"p-10\">\n            <h3 className=\"mb-2 font-semibold\">#{idx + 1}</h3>\n            <WithPlate id={idx + 1} value={value} />\n            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
+      "path": "example/hundreds-editors-demo.tsx",
+      "target": "components/hundreds-editors-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "hundreds-editors-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/iframe-demo.json b/apps/www/public/r/styles/default/iframe-demo.json
new file mode 100644
index 0000000000..1bc8f8ee95
--- /dev/null
+++ b/apps/www/public/r/styles/default/iframe-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { iframeValue } from '@/plate/demo/values/iframeValue';\nimport { Editor } from '@/components/plate-ui/editor';\n\nimport { EditableVoidPlugin } from './editable-voids-demo';\n\nexport function IFrame({ children, ...props }: any) {\n  const [contentRef, setContentRef] = useState<any>(null);\n  const mountNode = contentRef?.contentWindow?.document.body;\n\n  return (\n    // eslint-disable-next-line jsx-a11y/iframe-has-title\n    <iframe {...props} ref={setContentRef}>\n      {mountNode && createPortal(React.Children.only(children), mountNode)}\n    </iframe>\n  );\n}\n\nexport default function IframeDemo() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin, EditableVoidPlugin],\n    value: iframeValue,\n  });\n\n  return (\n    <IFrame className=\"p-10\">\n      <Plate editor={editor}>\n        <Editor {...editableProps} />\n      </Plate>\n    </IFrame>\n  );\n}\n",
+      "path": "example/iframe-demo.tsx",
+      "target": "components/iframe-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "iframe-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/image-element.json b/apps/www/public/r/styles/default/image-element.json
index 251cc06fa7..86a6f71b29 100644
--- a/apps/www/public/r/styles/default/image-element.json
+++ b/apps/www/public/r/styles/default/image-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, nodeProps, ...props }, ref) => {\n      const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n      const width = useResizableStore().get.width();\n\n      return (\n        <MediaPopover plugin={ImagePlugin}>\n          <PlateElement\n            ref={ref}\n            className={cn('py-2.5', className)}\n            {...props}\n          >\n            <figure className=\"group relative m-0\" contentEditable={false}>\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  readOnly,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n                <Image\n                  className={cn(\n                    'block w-full max-w-full cursor-pointer object-cover px-0',\n                    'rounded-sm',\n                    focused && selected && 'ring-2 ring-ring ring-offset-2'\n                  )}\n                  alt=\"\"\n                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({\n                    direction: 'right',\n                  })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption style={{ width }} align={align}>\n                <CaptionTextarea\n                  readOnly={readOnly}\n                  placeholder=\"Write a caption...\"\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
       "path": "plate-ui/image-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/image-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/indent-list-toolbar-button.json b/apps/www/public/r/styles/default/indent-list-toolbar-button.json
index 23b6684f0b..b19a93df96 100644
--- a/apps/www/public/r/styles/default/indent-list-toolbar-button.json
+++ b/apps/www/public/r/styles/default/indent-list-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  useIndentListToolbarButton,\n  useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentListToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType?: ListStyleType;\n  }\n>(({ nodeType = ListStyleType.Disc }, ref) => {\n  const state = useIndentListToolbarButtonState({ nodeType });\n  const { props } = useIndentListToolbarButton(state);\n\n  return (\n    <ToolbarButton\n      ref={ref}\n      tooltip={\n        nodeType === ListStyleType.Disc ? 'Bulleted List' : 'Numbered List'\n      }\n      {...props}\n    >\n      {nodeType === ListStyleType.Disc ? <Icons.ul /> : <Icons.ol />}\n    </ToolbarButton>\n  );\n});\n",
       "path": "plate-ui/indent-list-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/indent-list-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/indent-todo-marker-component.json b/apps/www/public/r/styles/default/indent-todo-marker-component.json
index 1e59cbea8b..dbc8fd0044 100644
--- a/apps/www/public/r/styles/default/indent-todo-marker-component.json
+++ b/apps/www/public/r/styles/default/indent-todo-marker-component.json
@@ -6,7 +6,7 @@
     {
       "content": "import type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useIndentTodoListElement,\n  useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n  element,\n}: Omit<PlateRenderElementProps, 'children'>) => {\n  const state = useIndentTodoListElementState({ element });\n  const { checkboxProps } = useIndentTodoListElement(state);\n\n  return (\n    <div contentEditable={false}>\n      <Checkbox\n        style={{ left: -24, position: 'absolute', top: 4 }}\n        {...checkboxProps}\n      />\n    </div>\n  );\n};\n\nexport const TodoLi = (props: PlateRenderElementProps) => {\n  const { children, element } = props;\n\n  return (\n    <span\n      className={cn(\n        (element.checked as boolean) && 'text-muted-foreground line-through'\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n",
       "path": "plate-ui/indent-todo-marker-component.tsx",
-      "target": "",
+      "target": "components/plate-ui/indent-todo-marker-component.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/indent-todo-toolbar-button.json b/apps/www/public/r/styles/default/indent-todo-toolbar-button.json
index a8e9da877a..5ed5c0d2b6 100644
--- a/apps/www/public/r/styles/default/indent-todo-toolbar-button.json
+++ b/apps/www/public/r/styles/default/indent-todo-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import { withRef } from '@udecode/cn';\nimport {\n  useIndentTodoToolBarButton,\n  useIndentTodoToolBarButtonState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentTodoToolbarButton = withRef<typeof ToolbarButton>(\n  (rest, ref) => {\n    const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });\n    const { props } = useIndentTodoToolBarButton(state);\n\n    return (\n      <ToolbarButton ref={ref} tooltip=\"Todo\" {...props} {...rest}>\n        <Icons.todo />\n      </ToolbarButton>\n    );\n  }\n);\n",
       "path": "plate-ui/indent-todo-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/indent-todo-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/indent-toolbar-button.json b/apps/www/public/r/styles/default/indent-toolbar-button.json
index c2ad89f8f7..1ba607f593 100644
--- a/apps/www/public/r/styles/default/indent-toolbar-button.json
+++ b/apps/www/public/r/styles/default/indent-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useIndentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentToolbarButton = withRef<typeof ToolbarButton>(\n  (rest, ref) => {\n    const { props } = useIndentButton();\n\n    return (\n      <ToolbarButton ref={ref} tooltip=\"Indent\" {...props} {...rest}>\n        <Icons.indent />\n      </ToolbarButton>\n    );\n  }\n);\n",
       "path": "plate-ui/indent-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/indent-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/inline-combobox.json b/apps/www/public/r/styles/default/inline-combobox.json
index bc19d2a5cd..e75ce0a50d 100644
--- a/apps/www/public/r/styles/default/inline-combobox.json
+++ b/apps/www/public/r/styles/default/inline-combobox.json
@@ -7,7 +7,7 @@
     {
       "content": "import React, {\n  type HTMLAttributes,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  forwardRef,\n  startTransition,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport type { PointRef } from 'slate';\n\nimport {\n  type ComboboxItemProps,\n  Combobox,\n  ComboboxItem,\n  ComboboxPopover,\n  ComboboxProvider,\n  Portal,\n  useComboboxContext,\n  useComboboxStore,\n} from '@ariakit/react';\nimport { cn } from '@udecode/cn';\nimport { filterWords } from '@udecode/plate-combobox';\nimport {\n  type UseComboboxInputResult,\n  useComboboxInput,\n  useHTMLInputCursorState,\n} from '@udecode/plate-combobox/react';\nimport {\n  type TElement,\n  createPointRef,\n  getPointBefore,\n  insertText,\n  moveSelection,\n} from '@udecode/plate-common';\nimport {\n  findNodePath,\n  useComposedRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\ntype FilterFn = (\n  item: { value: string; keywords?: string[] },\n  search: string\n) => boolean;\n\ninterface InlineComboboxContextValue {\n  filter: FilterFn | false;\n  inputProps: UseComboboxInputResult['props'];\n  inputRef: RefObject<HTMLInputElement>;\n  removeInput: UseComboboxInputResult['removeInput'];\n  setHasEmpty: (hasEmpty: boolean) => void;\n  showTrigger: boolean;\n  trigger: string;\n}\n\nconst InlineComboboxContext = createContext<InlineComboboxContextValue>(\n  null as any\n);\n\nexport const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>\n  [value, ...keywords].some((keyword) => filterWords(keyword, search));\n\ninterface InlineComboboxProps {\n  children: ReactNode;\n  element: TElement;\n  trigger: string;\n  filter?: FilterFn | false;\n  hideWhenNoValue?: boolean;\n  setValue?: (value: string) => void;\n  showTrigger?: boolean;\n  value?: string;\n}\n\nconst InlineCombobox = ({\n  children,\n  element,\n  filter = defaultFilter,\n  hideWhenNoValue = false,\n  setValue: setValueProp,\n  showTrigger = true,\n  trigger,\n  value: valueProp,\n}: InlineComboboxProps) => {\n  const editor = useEditorRef();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const cursorState = useHTMLInputCursorState(inputRef);\n\n  const [valueState, setValueState] = useState('');\n  const hasValueProp = valueProp !== undefined;\n  const value = hasValueProp ? valueProp : valueState;\n\n  const setValue = useCallback(\n    (newValue: string) => {\n      setValueProp?.(newValue);\n\n      if (!hasValueProp) {\n        setValueState(newValue);\n      }\n    },\n    [setValueProp, hasValueProp]\n  );\n\n  /**\n   * Track the point just before the input element so we know where to\n   * insertText if the combobox closes due to a selection change.\n   */\n  const [insertPoint, setInsertPoint] = useState<PointRef | null>(null);\n\n  useEffect(() => {\n    const path = findNodePath(editor, element);\n\n    if (!path) return;\n\n    const point = getPointBefore(editor, path);\n\n    if (!point) return;\n\n    const pointRef = createPointRef(editor, point);\n    setInsertPoint(pointRef);\n\n    return () => {\n      pointRef.unref();\n    };\n  }, [editor, element]);\n\n  const { props: inputProps, removeInput } = useComboboxInput({\n    cancelInputOnBlur: false,\n    cursorState,\n    ref: inputRef,\n    onCancelInput: (cause) => {\n      if (cause !== 'backspace') {\n        insertText(editor, trigger + value, {\n          at: insertPoint?.current ?? undefined,\n        });\n      }\n      if (cause === 'arrowLeft' || cause === 'arrowRight') {\n        moveSelection(editor, {\n          distance: 1,\n          reverse: cause === 'arrowLeft',\n        });\n      }\n    },\n  });\n\n  const [hasEmpty, setHasEmpty] = useState(false);\n\n  const contextValue: InlineComboboxContextValue = useMemo(\n    () => ({\n      filter,\n      inputProps,\n      inputRef,\n      removeInput,\n      setHasEmpty,\n      showTrigger,\n      trigger,\n    }),\n    [\n      trigger,\n      showTrigger,\n      filter,\n      inputRef,\n      inputProps,\n      removeInput,\n      setHasEmpty,\n    ]\n  );\n\n  const store = useComboboxStore({\n    // open: ,\n    setValue: (newValue) => startTransition(() => setValue(newValue)),\n  });\n\n  const items = store.useState('items');\n\n  /**\n   * If there is no active ID and the list of items changes, select the first\n   * item.\n   */\n  useEffect(() => {\n    if (!store.getState().activeId) {\n      store.setActiveId(store.first());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, store]);\n\n  return (\n    <span contentEditable={false}>\n      <ComboboxProvider\n        open={\n          (items.length > 0 || hasEmpty) &&\n          (!hideWhenNoValue || value.length > 0)\n        }\n        store={store}\n      >\n        <InlineComboboxContext.Provider value={contextValue}>\n          {children}\n        </InlineComboboxContext.Provider>\n      </ComboboxProvider>\n    </span>\n  );\n};\n\nconst InlineComboboxInput = forwardRef<\n  HTMLInputElement,\n  HTMLAttributes<HTMLInputElement>\n>(({ className, ...props }, propRef) => {\n  const {\n    inputProps,\n    inputRef: contextRef,\n    showTrigger,\n    trigger,\n  } = useContext(InlineComboboxContext);\n\n  const store = useComboboxContext()!;\n  const value = store.useState('value');\n\n  const ref = useComposedRef(propRef, contextRef);\n\n  /**\n   * To create an auto-resizing input, we render a visually hidden span\n   * containing the input value and position the input element on top of it.\n   * This works well for all cases except when input exceeds the width of the\n   * container.\n   */\n\n  return (\n    <>\n      {showTrigger && trigger}\n\n      <span className=\"relative min-h-[1lh]\">\n        <span\n          className=\"invisible overflow-hidden text-nowrap\"\n          aria-hidden=\"true\"\n        >\n          {value || '\\u200B'}\n        </span>\n\n        <Combobox\n          ref={ref}\n          className={cn(\n            'absolute left-0 top-0 size-full bg-transparent outline-none',\n            className\n          )}\n          value={value}\n          autoSelect\n          {...inputProps}\n          {...props}\n        />\n      </span>\n    </>\n  );\n});\n\nInlineComboboxInput.displayName = 'InlineComboboxInput';\n\nconst InlineComboboxContent: typeof ComboboxPopover = ({\n  className,\n  ...props\n}) => {\n  // Portal prevents CSS from leaking into popover\n  return (\n    <Portal>\n      <ComboboxPopover\n        className={cn(\n          'z-[500] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md',\n          className\n        )}\n        {...props}\n      />\n    </Portal>\n  );\n};\n\nconst comboboxItemVariants = cva(\n  'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n  {\n    defaultVariants: {\n      interactive: true,\n    },\n    variants: {\n      interactive: {\n        false: '',\n        true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',\n      },\n    },\n  }\n);\n\nexport type InlineComboboxItemProps = {\n  keywords?: string[];\n} & ComboboxItemProps &\n  Required<Pick<ComboboxItemProps, 'value'>>;\n\nconst InlineComboboxItem = ({\n  className,\n  keywords,\n  onClick,\n  ...props\n}: InlineComboboxItemProps) => {\n  const { value } = props;\n\n  const { filter, removeInput } = useContext(InlineComboboxContext);\n\n  const store = useComboboxContext()!;\n\n  // Optimization: Do not subscribe to value if filter is false\n  const search = filter && store.useState('value');\n\n  const visible = useMemo(\n    () => !filter || filter({ keywords, value }, search as string),\n    [filter, value, keywords, search]\n  );\n\n  if (!visible) return null;\n\n  return (\n    <ComboboxItem\n      className={cn(comboboxItemVariants(), className)}\n      onClick={(event) => {\n        removeInput(true);\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n};\n\nconst InlineComboboxEmpty = ({\n  children,\n  className,\n}: HTMLAttributes<HTMLDivElement>) => {\n  const { setHasEmpty } = useContext(InlineComboboxContext);\n  const store = useComboboxContext()!;\n  const items = store.useState('items');\n\n  useEffect(() => {\n    setHasEmpty(true);\n\n    return () => {\n      setHasEmpty(false);\n    };\n  }, [setHasEmpty]);\n\n  if (items.length > 0) return null;\n\n  return (\n    <div\n      className={cn(comboboxItemVariants({ interactive: false }), className)}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n};\n",
       "path": "plate-ui/inline-combobox.tsx",
-      "target": "",
+      "target": "components/plate-ui/inline-combobox.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json
index 6f913b7f35..72ee17464c 100644
--- a/apps/www/public/r/styles/default/input.json
+++ b/apps/www/public/r/styles/default/input.json
@@ -4,7 +4,7 @@
     {
       "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    defaultVariants: {\n      h: 'md',\n      variant: 'default',\n    },\n    variants: {\n      h: {\n        md: 'h-10 px-3 py-2',\n        sm: 'h-9 px-3 py-2',\n      },\n      variant: {\n        default:\n          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        ghost: 'border-none focus-visible:ring-transparent',\n      },\n    },\n  }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n",
       "path": "plate-ui/input.tsx",
-      "target": "",
+      "target": "components/plate-ui/input.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json
index e4574215c1..ba930b672a 100644
--- a/apps/www/public/r/styles/default/insert-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json
@@ -7,7 +7,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    items: [\n      {\n        description: 'Paragraph',\n        icon: Icons.paragraph,\n        label: 'Paragraph',\n        value: ParagraphPlugin.key,\n      },\n      {\n        description: 'Heading 1',\n        icon: Icons.h1,\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        description: 'Heading 2',\n        icon: Icons.h2,\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        description: 'Heading 3',\n        icon: Icons.h3,\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        description: 'Quote (⌘+⇧+.)',\n        icon: Icons.blockquote,\n        label: 'Quote',\n        value: BlockquotePlugin.key,\n      },\n      // {\n      //   value: TablePlugin.key,\n      //   label: 'Table',\n      //   description: 'Table',\n      //   icon: Icons.table,\n      // },\n      // {\n      //   value: 'ul',\n      //   label: 'Bulleted list',\n      //   description: 'Bulleted list',\n      //   icon: Icons.ul,\n      // },\n      // {\n      //   value: 'ol',\n      //   label: 'Numbered list',\n      //   description: 'Numbered list',\n      //   icon: Icons.ol,\n      // },\n      // {\n      //   value: HorizontalRulePlugin.key,\n      //   label: 'Divider',\n      //   description: 'Divider (---)',\n      //   icon: Icons.hr,\n      // },\n    ],\n    label: 'Basic blocks',\n  },\n  // {\n  //   label: 'Media',\n  //   items: [\n  //     {\n  //       value: CodeBlockPlugin.key,\n  //       label: 'Code',\n  //       description: 'Code (```)',\n  //       icon: Icons.codeblock,\n  //     },\n  //     {\n  //       value: ImagePlugin.key,\n  //       label: 'Image',\n  //       description: 'Image',\n  //       icon: Icons.image,\n  //     },\n  //     {\n  //       value: MediaEmbedPlugin.key,\n  //       label: 'Embed',\n  //       description: 'Embed',\n  //       icon: Icons.embed,\n  //     },\n  //     {\n  //       value: ExcalidrawPlugin.key,\n  //       label: 'Excalidraw',\n  //       description: 'Excalidraw',\n  //       icon: Icons.excalidraw,\n  //     },\n  //   ],\n  // },\n  // {\n  //   label: 'Inline',\n  //   items: [\n  //     {\n  //       value: LinkPlugin.key,\n  //       label: 'Link',\n  //       description: 'Link',\n  //       icon: Icons.link,\n  //     },\n  //   ],\n  // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\" isDropdown>\n          <Icons.add />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto\"\n        align=\"start\"\n      >\n        {items.map(({ items: nestedItems, label }, index) => (\n          <React.Fragment key={label}>\n            {index !== 0 && <DropdownMenuSeparator />}\n\n            <DropdownMenuLabel>{label}</DropdownMenuLabel>\n            {nestedItems.map(\n              ({ icon: Icon, label: itemLabel, value: type }) => (\n                <DropdownMenuItem\n                  key={type}\n                  className=\"min-w-[180px]\"\n                  onSelect={() => {\n                    switch (type) {\n                      // case CodeBlockPlugin.key: {\n                      //   insertEmptyCodeBlock(editor);\n                      //\n                      //   break;\n                      // }\n                      // case ImagePlugin.key: {\n                      //   await insertMedia(editor, { type: ImagePlugin.key });\n                      //\n                      //   break;\n                      // }\n                      // case MediaEmbedPlugin.key: {\n                      //   await insertMedia(editor, {\n                      //     type: MediaEmbedPlugin.key,\n                      //   });\n                      //\n                      //   break;\n                      // }\n                      // case 'ul':\n                      // case 'ol': {\n                      //   insertEmptyElement(editor, ParagraphPlugin.key, {\n                      //     select: true,\n                      //     nextBlock: true,\n                      //   });\n                      //\n                      //   if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n                      //     toggleIndentList(editor, {\n                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',\n                      //     });\n                      //   } else if (settingsStore.get.checkedId('list')) {\n                      //     toggleList(editor, { type });\n                      //   }\n                      //\n                      //   break;\n                      // }\n                      // case TablePlugin.key: {\n                      //   insertTable(editor);\n                      //\n                      //   break;\n                      // }\n                      // case LinkPlugin.key: {\n                      //   triggerFloatingLink(editor, { focused: true });\n                      //\n                      //   break;\n                      // }\n                      default: {\n                        insertEmptyElement(editor, type, {\n                          nextBlock: true,\n                          select: true,\n                        });\n                      }\n                    }\n\n                    focusEditor(editor);\n                  }}\n                >\n                  <Icon className=\"mr-2 size-5\" />\n                  {itemLabel}\n                </DropdownMenuItem>\n              )\n            )}\n          </React.Fragment>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/insert-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/insert-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/kbd-leaf.json b/apps/www/public/r/styles/default/kbd-leaf.json
index c0591669d6..54dfd7cb10 100644
--- a/apps/www/public/r/styles/default/kbd-leaf.json
+++ b/apps/www/public/r/styles/default/kbd-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const KbdLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => (\n    <PlateLeaf\n      ref={ref}\n      asChild\n      className={cn(\n        'rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]',\n        className\n      )}\n      {...props}\n    >\n      <kbd>{children}</kbd>\n    </PlateLeaf>\n  )\n);\n",
       "path": "plate-ui/kbd-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/kbd-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/line-height-dropdown-menu.json b/apps/www/public/r/styles/default/line-height-dropdown-menu.json
index c5206046b0..7c1b6a5314 100644
--- a/apps/www/public/r/styles/default/line-height-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/line-height-dropdown-menu.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useLineHeightDropdownMenu,\n  useLineHeightDropdownMenuState,\n} from '@udecode/plate-line-height/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {\n  const openState = useOpenState();\n  const state = useLineHeightDropdownMenuState();\n  const { radioGroupProps } = useLineHeightDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton\n          pressed={openState.open}\n          tooltip=\"Line height\"\n          isDropdown\n        >\n          <Icons.lineHeight />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {state.values.map((_value) => (\n            <DropdownMenuRadioItem\n              key={_value}\n              className=\"min-w-[180px]\"\n              value={_value}\n            >\n              {_value}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/line-height-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/line-height-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/link-element.json b/apps/www/public/r/styles/default/link-element.json
index 8f9c8ee646..1a123a4268 100644
--- a/apps/www/public/r/styles/default/link-element.json
+++ b/apps/www/public/r/styles/default/link-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const LinkElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const element = useElement<TLinkElement>();\n    const { props: linkProps } = useLink({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"a\"\n        className={cn(\n          'font-medium text-primary underline decoration-primary underline-offset-4',\n          className\n        )}\n        {...(linkProps as any)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/link-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/link-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/link-floating-toolbar.json b/apps/www/public/r/styles/default/link-floating-toolbar.json
index 8b9ff6eb19..ed0d9a74e0 100644
--- a/apps/www/public/r/styles/default/link-floating-toolbar.json
+++ b/apps/www/public/r/styles/default/link-floating-toolbar.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { useFormInputProps } from '@udecode/plate-common/react';\nimport {\n  type UseVirtualFloatingOptions,\n  flip,\n  offset,\n} from '@udecode/plate-floating';\nimport {\n  type LinkFloatingToolbarState,\n  FloatingLinkUrlInput,\n  LinkOpenButton,\n  useFloatingLinkEdit,\n  useFloatingLinkEditState,\n  useFloatingLinkInsert,\n  useFloatingLinkInsertState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n  middleware: [\n    offset(12),\n    flip({\n      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n      padding: 12,\n    }),\n  ],\n  placement: 'bottom-start',\n};\n\nexport interface LinkFloatingToolbarProps {\n  state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n  const insertState = useFloatingLinkInsertState({\n    ...state,\n    floatingOptions: {\n      ...floatingOptions,\n      ...state?.floatingOptions,\n    },\n  });\n  const {\n    hidden,\n    props: insertProps,\n    ref: insertRef,\n    textInputProps,\n  } = useFloatingLinkInsert(insertState);\n\n  const editState = useFloatingLinkEditState({\n    ...state,\n    floatingOptions: {\n      ...floatingOptions,\n      ...state?.floatingOptions,\n    },\n  });\n  const {\n    editButtonProps,\n    props: editProps,\n    ref: editRef,\n    unlinkButtonProps,\n  } = useFloatingLinkEdit(editState);\n  const inputProps = useFormInputProps({\n    preventDefaultOnEnterKeydown: true,\n  });\n\n  if (hidden) return null;\n\n  const input = (\n    <div className=\"flex w-[330px] flex-col\" {...inputProps}>\n      <div className=\"flex items-center\">\n        <div className=\"flex items-center pl-3 text-muted-foreground\">\n          <Icons.link className=\"size-4\" />\n        </div>\n\n        <FloatingLinkUrlInput\n          className={inputVariants({ h: 'sm', variant: 'ghost' })}\n          placeholder=\"Paste link\"\n        />\n      </div>\n      <Separator />\n      <div className=\"flex items-center\">\n        <div className=\"flex items-center pl-3 text-muted-foreground\">\n          <Icons.text className=\"size-4\" />\n        </div>\n        <input\n          className={inputVariants({ h: 'sm', variant: 'ghost' })}\n          placeholder=\"Text to display\"\n          {...textInputProps}\n        />\n      </div>\n    </div>\n  );\n\n  const editContent = editState.isEditing ? (\n    input\n  ) : (\n    <div className=\"box-content flex h-9 items-center gap-1\">\n      <button\n        className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n        type=\"button\"\n        {...editButtonProps}\n      >\n        Edit link\n      </button>\n\n      <Separator orientation=\"vertical\" />\n\n      <LinkOpenButton\n        className={buttonVariants({\n          size: 'sms',\n          variant: 'ghost',\n        })}\n      >\n        <Icons.externalLink width={18} />\n      </LinkOpenButton>\n\n      <Separator orientation=\"vertical\" />\n\n      <button\n        className={buttonVariants({\n          size: 'sms',\n          variant: 'ghost',\n        })}\n        type=\"button\"\n        {...unlinkButtonProps}\n      >\n        <Icons.unlink width={18} />\n      </button>\n    </div>\n  );\n\n  return (\n    <>\n      <div\n        ref={insertRef}\n        className={cn(popoverVariants(), 'w-auto p-1')}\n        {...insertProps}\n      >\n        {input}\n      </div>\n\n      <div\n        ref={editRef}\n        className={cn(popoverVariants(), 'w-auto p-1')}\n        {...editProps}\n      >\n        {editContent}\n      </div>\n    </>\n  );\n}\n",
       "path": "plate-ui/link-floating-toolbar.tsx",
-      "target": "",
+      "target": "components/plate-ui/link-floating-toolbar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/link-toolbar-button.json b/apps/www/public/r/styles/default/link-toolbar-button.json
index 8b5c675a42..b91f68a212 100644
--- a/apps/www/public/r/styles/default/link-toolbar-button.json
+++ b/apps/www/public/r/styles/default/link-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  useLinkToolbarButton,\n  useLinkToolbarButtonState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const LinkToolbarButton = withRef<typeof ToolbarButton>((rest, ref) => {\n  const state = useLinkToolbarButtonState();\n  const { props } = useLinkToolbarButton(state);\n\n  return (\n    <ToolbarButton ref={ref} tooltip=\"Link\" {...props} {...rest}>\n      <Icons.link />\n    </ToolbarButton>\n  );\n});\n",
       "path": "plate-ui/link-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/link-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/list-element.json b/apps/www/public/r/styles/default/list-element.json
index d82a2ec45c..c3ee2ea445 100644
--- a/apps/www/public/r/styles/default/list-element.json
+++ b/apps/www/public/r/styles/default/list-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { PlateElement } from './plate-element';\n\nconst listVariants = cva('m-0 ps-6', {\n  variants: {\n    variant: {\n      ol: 'list-decimal',\n      ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n    },\n  },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n  'variant',\n]);\n\nexport const ListElement = withRef<typeof ListElementVariants>(\n  ({ children, variant = 'ul', ...props }, ref) => {\n    return (\n      <ListElementVariants ref={ref} as={variant!} variant={variant} {...props}>\n        {children}\n      </ListElementVariants>\n    );\n  }\n);\n",
       "path": "plate-ui/list-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/list-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/list-toolbar-button.json b/apps/www/public/r/styles/default/list-toolbar-button.json
index c7adf0008d..31bb3ce6f9 100644
--- a/apps/www/public/r/styles/default/list-toolbar-button.json
+++ b/apps/www/public/r/styles/default/list-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  BulletedListPlugin,\n  useListToolbarButton,\n  useListToolbarButtonState,\n} from '@udecode/plate-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ListToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType?: string;\n  }\n>(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {\n  const state = useListToolbarButtonState({ nodeType });\n  const { props } = useListToolbarButton(state);\n\n  return (\n    <ToolbarButton\n      ref={ref}\n      tooltip={\n        nodeType === BulletedListPlugin.key ? 'Bulleted List' : 'Numbered List'\n      }\n      {...props}\n      {...rest}\n    >\n      {nodeType === BulletedListPlugin.key ? <Icons.ul /> : <Icons.ol />}\n    </ToolbarButton>\n  );\n});\n",
       "path": "plate-ui/list-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/list-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/mark-toolbar-button.json b/apps/www/public/r/styles/default/mark-toolbar-button.json
index c5e554328d..ec2f175cc4 100644
--- a/apps/www/public/r/styles/default/mark-toolbar-button.json
+++ b/apps/www/public/r/styles/default/mark-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  useMarkToolbarButton,\n  useMarkToolbarButtonState,\n} from '@udecode/plate-common/react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType: string;\n    clear?: string[] | string;\n  }\n>(({ clear, nodeType, ...rest }, ref) => {\n  const state = useMarkToolbarButtonState({ clear, nodeType });\n  const { props } = useMarkToolbarButton(state);\n\n  return <ToolbarButton ref={ref} {...props} {...rest} />;\n});\n",
       "path": "plate-ui/mark-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/mark-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/media-embed-element.json b/apps/www/public/r/styles/default/media-embed-element.json
index 8cd87c466c..ad86494145 100644
--- a/apps/www/public/r/styles/default/media-embed-element.json
+++ b/apps/www/public/r/styles/default/media-embed-element.json
@@ -8,7 +8,7 @@
     {
       "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const {\n      align = 'center',\n      embed,\n      focused,\n      isTweet,\n      isVideo,\n      isYoutube,\n      readOnly,\n      selected,\n    } = useMediaState({\n      urlParsers: [parseTwitterUrl, parseVideoUrl],\n    });\n    const width = useResizableStore().get.width();\n    const provider = embed?.provider;\n\n    return (\n      <MediaPopover plugin={MediaEmbedPlugin}>\n        <PlateElement\n          ref={ref}\n          className={cn('relative py-2.5', className)}\n          {...props}\n        >\n          <figure className=\"group relative m-0 w-full\" contentEditable={false}>\n            <Resizable\n              align={align}\n              options={{\n                align,\n                maxWidth: isTweet ? 550 : '100%',\n                minWidth: isTweet ? 300 : 100,\n              }}\n            >\n              <ResizeHandle\n                className={mediaResizeHandleVariants({ direction: 'left' })}\n                options={{ direction: 'left' }}\n              />\n\n              {isVideo ? (\n                isYoutube ? (\n                  <LiteYouTubeEmbed\n                    id={embed!.id!}\n                    title=\"youtube\"\n                    wrapperClass={cn(\n                      'rounded-sm',\n                      focused && selected && 'ring-2 ring-ring ring-offset-2',\n                      'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',\n                      '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n                      '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',\n                      'after:block after:pb-[var(--aspect-ratio)] after:content-[\"\"]',\n                      '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n                      '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n                      '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n                      '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n                      '[&.lyt-activated]:cursor-[unset]',\n                      '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n                      '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n                    )}\n                  />\n                ) : (\n                  <div\n                    className={cn(\n                      provider === 'vimeo' && 'pb-[75%]',\n                      provider === 'youku' && 'pb-[56.25%]',\n                      provider === 'dailymotion' && 'pb-[56.0417%]',\n                      provider === 'coub' && 'pb-[51.25%]'\n                    )}\n                  >\n                    <iframe\n                      className={cn(\n                        'absolute left-0 top-0 size-full rounded-sm',\n                        isVideo && 'border-0',\n                        focused && selected && 'ring-2 ring-ring ring-offset-2'\n                      )}\n                      title=\"embed\"\n                      src={embed!.url}\n                      allowFullScreen\n                    />\n                  </div>\n                )\n              ) : null}\n\n              {isTweet && (\n                <div\n                  className={cn(\n                    '[&_.react-tweet-theme]:my-0',\n                    !readOnly &&\n                      selected &&\n                      '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'\n                  )}\n                >\n                  <Tweet id={embed!.id!} />\n                </div>\n              )}\n\n              <ResizeHandle\n                className={mediaResizeHandleVariants({ direction: 'right' })}\n                options={{ direction: 'right' }}\n              />\n            </Resizable>\n\n            <Caption style={{ width }} align={align}>\n              <CaptionTextarea placeholder=\"Write a caption...\" />\n            </Caption>\n          </figure>\n\n          {children}\n        </PlateElement>\n      </MediaPopover>\n    );\n  })\n);\n",
       "path": "plate-ui/media-embed-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/media-embed-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/media-popover.json b/apps/www/public/r/styles/default/media-popover.json
index 41bfb7c992..e7218f66e5 100644
--- a/apps/www/public/r/styles/default/media-popover.json
+++ b/apps/www/public/r/styles/default/media-popover.json
@@ -6,7 +6,7 @@
     {
       "content": "import React, { useEffect } from 'react';\n\nimport {\n  type WithRequiredKey,\n  isSelectionExpanded,\n} from '@udecode/plate-common';\nimport {\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n  FloatingMedia as FloatingMediaPrimitive,\n  floatingMediaActions,\n  useFloatingMediaSelectors,\n} from '@udecode/plate-media/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n  children: React.ReactNode;\n  plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n\n  const selectionCollapsed = useEditorSelector(\n    (editor) => !isSelectionExpanded(editor),\n    []\n  );\n  const isOpen = !readOnly && selected && selectionCollapsed;\n  const isEditing = useFloatingMediaSelectors().isEditing();\n\n  useEffect(() => {\n    if (!isOpen && isEditing) {\n      floatingMediaActions.isEditing(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const element = useElement();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        {isEditing ? (\n          <div className=\"flex w-[330px] flex-col\">\n            <div className=\"flex items-center\">\n              <div className=\"flex items-center pl-3 text-muted-foreground\">\n                <Icons.link className=\"size-4\" />\n              </div>\n\n              <FloatingMediaPrimitive.UrlInput\n                className={inputVariants({ h: 'sm', variant: 'ghost' })}\n                placeholder=\"Paste the embed link...\"\n                options={{ plugin }}\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"box-content flex h-9 items-center gap-1\">\n            <FloatingMediaPrimitive.EditButton\n              className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n            >\n              Edit link\n            </FloatingMediaPrimitive.EditButton>\n\n            <CaptionButton variant=\"ghost\">Caption</CaptionButton>\n\n            <Separator orientation=\"vertical\" className=\"my-1\" />\n\n            <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n              <Icons.delete className=\"size-4\" />\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
       "path": "plate-ui/media-popover.tsx",
-      "target": "",
+      "target": "components/plate-ui/media-popover.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index 32f49e291d..bfd7827586 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  type ImagePlugin,\n  type MediaEmbedPlugin,\n  useMediaToolbarButton,\n} from '@udecode/plate-media/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;\n  }\n>(({ nodeType, ...rest }, ref) => {\n  const { props } = useMediaToolbarButton({ nodeType });\n\n  return (\n    <ToolbarButton ref={ref} {...props} {...rest}>\n      <Icons.image />\n    </ToolbarButton>\n  );\n});\n",
       "path": "plate-ui/media-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/mention-element.json b/apps/www/public/r/styles/default/mention-element.json
index 5051c11cb6..e06fc07c7b 100644
--- a/apps/www/public/r/styles/default/mention-element.json
+++ b/apps/www/public/r/styles/default/mention-element.json
@@ -4,9 +4,9 @@
   ],
   "files": [
     {
-      "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { IS_APPLE, getHandler } from '@udecode/plate-common';\nimport { useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { useMounted } from '@/registry/default/hooks/use-mounted';\n\nimport { PlateElement } from './plate-element';\n\nexport const MentionElement = withRef<\n  typeof PlateElement,\n  {\n    prefix?: string;\n    renderLabel?: (mentionable: TMentionElement) => string;\n    onClick?: (mentionNode: any) => void;\n  }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n  const element = useElement<TMentionElement>();\n  const selected = useSelected();\n  const focused = useFocused();\n  const mounted = useMounted();\n\n  return (\n    <PlateElement\n      ref={ref}\n      className={cn(\n        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',\n        selected && focused && 'ring-2 ring-ring',\n        element.children[0].bold === true && 'font-bold',\n        element.children[0].italic === true && 'italic',\n        element.children[0].underline === true && 'underline',\n        className\n      )}\n      onClick={getHandler(onClick, element)}\n      data-slate-value={element.value}\n      contentEditable={false}\n      {...props}\n    >\n      {mounted && IS_APPLE ? (\n        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490\n        <React.Fragment>\n          {children}\n          {prefix}\n          {renderLabel ? renderLabel(element) : element.value}\n        </React.Fragment>\n      ) : (\n        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360\n        <React.Fragment>\n          {prefix}\n          {renderLabel ? renderLabel(element) : element.value}\n          {children}\n        </React.Fragment>\n      )}\n    </PlateElement>\n  );\n});\n",
+      "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { IS_APPLE, getHandler } from '@udecode/plate-common';\nimport { useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { useMounted } from '@/hooks/use-mounted';\n\nimport { PlateElement } from './plate-element';\n\nexport const MentionElement = withRef<\n  typeof PlateElement,\n  {\n    prefix?: string;\n    renderLabel?: (mentionable: TMentionElement) => string;\n    onClick?: (mentionNode: any) => void;\n  }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n  const element = useElement<TMentionElement>();\n  const selected = useSelected();\n  const focused = useFocused();\n  const mounted = useMounted();\n\n  return (\n    <PlateElement\n      ref={ref}\n      className={cn(\n        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',\n        selected && focused && 'ring-2 ring-ring',\n        element.children[0].bold === true && 'font-bold',\n        element.children[0].italic === true && 'italic',\n        element.children[0].underline === true && 'underline',\n        className\n      )}\n      onClick={getHandler(onClick, element)}\n      data-slate-value={element.value}\n      contentEditable={false}\n      {...props}\n    >\n      {mounted && IS_APPLE ? (\n        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490\n        <React.Fragment>\n          {children}\n          {prefix}\n          {renderLabel ? renderLabel(element) : element.value}\n        </React.Fragment>\n      ) : (\n        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360\n        <React.Fragment>\n          {prefix}\n          {renderLabel ? renderLabel(element) : element.value}\n          {children}\n        </React.Fragment>\n      )}\n    </PlateElement>\n  );\n});\n",
       "path": "plate-ui/mention-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/mention-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/mention-input-element.json b/apps/www/public/r/styles/default/mention-input-element.json
index 92e3464db5..c60210648b 100644
--- a/apps/www/public/r/styles/default/mention-input-element.json
+++ b/apps/www/public/r/styles/default/mention-input-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n    const [search, setSearch] = useState('');\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox\n          value={search}\n          element={element}\n          setValue={setSearch}\n          showTrigger={false}\n          trigger=\"@\"\n        >\n          <span\n            className={cn(\n              'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm ring-ring focus-within:ring-2',\n              className\n            )}\n          >\n            <InlineComboboxInput />\n          </span>\n\n          <InlineComboboxContent className=\"my-1.5\">\n            <InlineComboboxEmpty>No results found</InlineComboboxEmpty>\n\n            {MENTIONABLES.map((item) => (\n              <InlineComboboxItem\n                key={item.key}\n                value={item.text}\n                onClick={() => onSelectItem(editor, item, search)}\n              >\n                {item.text}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n\nexport const MENTIONABLES = [\n  { key: '0', text: 'Aayla Secura' },\n  { key: '1', text: 'Adi Gallia' },\n  {\n    key: '2',\n    text: 'Admiral Dodd Rancit',\n  },\n  {\n    key: '3',\n    text: 'Admiral Firmus Piett',\n  },\n  {\n    key: '4',\n    text: 'Admiral Gial Ackbar',\n  },\n  { key: '5', text: 'Admiral Ozzel' },\n  { key: '6', text: 'Admiral Raddus' },\n  {\n    key: '7',\n    text: 'Admiral Terrinald Screed',\n  },\n  { key: '8', text: 'Admiral Trench' },\n  {\n    key: '9',\n    text: 'Admiral U.O. Statura',\n  },\n  { key: '10', text: 'Agen Kolar' },\n  { key: '11', text: 'Agent Kallus' },\n  {\n    key: '12',\n    text: 'Aiolin and Morit Astarte',\n  },\n  { key: '13', text: 'Aks Moe' },\n  { key: '14', text: 'Almec' },\n  { key: '15', text: 'Alton Kastle' },\n  { key: '16', text: 'Amee' },\n  { key: '17', text: 'AP-5' },\n  { key: '18', text: 'Armitage Hux' },\n  { key: '19', text: 'Artoo' },\n  { key: '20', text: 'Arvel Crynyd' },\n  { key: '21', text: 'Asajj Ventress' },\n  { key: '22', text: 'Aurra Sing' },\n  { key: '23', text: 'AZI-3' },\n  { key: '24', text: 'Bala-Tik' },\n  { key: '25', text: 'Barada' },\n  { key: '26', text: 'Bargwill Tomder' },\n  { key: '27', text: 'Baron Papanoida' },\n  { key: '28', text: 'Barriss Offee' },\n  { key: '29', text: 'Baze Malbus' },\n  { key: '30', text: 'Bazine Netal' },\n  { key: '31', text: 'BB-8' },\n  { key: '32', text: 'BB-9E' },\n  { key: '33', text: 'Ben Quadinaros' },\n  { key: '34', text: 'Berch Teller' },\n  { key: '35', text: 'Beru Lars' },\n  { key: '36', text: 'Bib Fortuna' },\n  {\n    key: '37',\n    text: 'Biggs Darklighter',\n  },\n  { key: '38', text: 'Black Krrsantan' },\n  { key: '39', text: 'Bo-Katan Kryze' },\n  { key: '40', text: 'Boba Fett' },\n  { key: '41', text: 'Bobbajo' },\n  { key: '42', text: 'Bodhi Rook' },\n  { key: '43', text: 'Borvo the Hutt' },\n  { key: '44', text: 'Boss Nass' },\n  { key: '45', text: 'Bossk' },\n  {\n    key: '46',\n    text: 'Breha Antilles-Organa',\n  },\n  { key: '47', text: 'Bren Derlin' },\n  { key: '48', text: 'Brendol Hux' },\n  { key: '49', text: 'BT-1' },\n];\n",
       "path": "plate-ui/mention-input-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/mention-input-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/mode-dropdown-menu.json b/apps/www/public/r/styles/default/mode-dropdown-menu.json
index 4f581a36ec..736795610b 100644
--- a/apps/www/public/r/styles/default/mode-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/mode-dropdown-menu.json
@@ -4,7 +4,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  focusEditor,\n  useEditorReadOnly,\n  useEditorRef,\n  usePlateStore,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const setReadOnly = usePlateStore().set.readOnly();\n  const readOnly = useEditorReadOnly();\n  const openState = useOpenState();\n\n  let value = 'editing';\n\n  if (readOnly) value = 'viewing';\n\n  const item: any = {\n    editing: (\n      <>\n        <Icons.editing className=\"mr-2 size-5\" />\n        <span className=\"hidden lg:inline\">Editing</span>\n      </>\n    ),\n    viewing: (\n      <>\n        <Icons.viewing className=\"mr-2 size-5\" />\n        <span className=\"hidden lg:inline\">Viewing</span>\n      </>\n    ),\n  };\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton\n          className=\"min-w-[auto] lg:min-w-[130px]\"\n          pressed={openState.open}\n          tooltip=\"Editing mode\"\n          isDropdown\n        >\n          {item[value]}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-[180px]\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          value={value}\n          onValueChange={(newValue) => {\n            if (newValue !== 'viewing') {\n              setReadOnly(false);\n            }\n            if (newValue === 'viewing') {\n              setReadOnly(true);\n\n              return;\n            }\n            if (newValue === 'editing') {\n              focusEditor(editor);\n\n              return;\n            }\n          }}\n        >\n          <DropdownMenuRadioItem value=\"editing\">\n            {item.editing}\n          </DropdownMenuRadioItem>\n\n          <DropdownMenuRadioItem value=\"viewing\">\n            {item.viewing}\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/mode-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/mode-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/mode-toggle.json b/apps/www/public/r/styles/default/mode-toggle.json
new file mode 100644
index 0000000000..52956389a4
--- /dev/null
+++ b/apps/www/public/r/styles/default/mode-toggle.json
@@ -0,0 +1,12 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { useTheme } from 'next-themes';\n\nimport { Icons } from '@/components/icons';\nimport { Button } from '@/components/plate-ui/button';\n\nexport default function ModeToggle() {\n  const { setTheme, theme } = useTheme();\n\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"ghost\"\n      className=\"size-8 px-0\"\n      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}\n    >\n      {theme === 'dark' ? (\n        <Icons.moon className=\"size-[1.2rem]\" />\n      ) : (\n        <Icons.sun className=\"size-[1.2rem]\" />\n      )}\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n",
+      "path": "example/mode-toggle.tsx",
+      "target": "components/mode-toggle.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "mode-toggle",
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/more-dropdown-menu.json b/apps/www/public/r/styles/default/more-dropdown-menu.json
index 2d094658c8..5895af94da 100644
--- a/apps/www/public/r/styles/default/more-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/more-dropdown-menu.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  SubscriptPlugin,\n  SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\">\n          <Icons.more />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex max-h-[500px] min-w-[180px] flex-col gap-0.5 overflow-y-auto\"\n        align=\"start\"\n      >\n        <DropdownMenuItem\n          onSelect={() => {\n            editor.tf.toggle.mark({\n              key: SuperscriptPlugin.key,\n              clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n            });\n            focusEditor(editor);\n          }}\n        >\n          <Icons.superscript className=\"mr-2 size-5\" />\n          Superscript\n          {/* (⌘+,) */}\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          onSelect={() => {\n            editor.tf.toggle.mark({\n              key: SubscriptPlugin.key,\n              clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n            });\n            focusEditor(editor);\n          }}\n        >\n          <Icons.subscript className=\"mr-2 size-5\" />\n          Subscript\n          {/* (⌘+.) */}\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/more-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/more-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/multiple-editors-demo.json b/apps/www/public/r/styles/default/multiple-editors-demo.json
new file mode 100644
index 0000000000..fe1f70768d
--- /dev/null
+++ b/apps/www/public/r/styles/default/multiple-editors-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport { SelectOnBackspacePlugin } from '@udecode/plate-select';\n\nimport { PlaygroundTurnIntoDropdownMenu } from '@/components/plate-ui/playground-turn-into-dropdown-menu';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { basicElementsValue } from '@/plate/demo/values/basicElementsValue';\nimport { basicMarksValue } from '@/plate/demo/values/basicMarksValue';\nimport { imageValue } from '@/plate/demo/values/mediaValue';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Separator } from '@/components/plate-ui/separator';\n\nexport default function MultipleEditorsDemo() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicElementsValue,\n  });\n\n  const editorMarks = usePlateEditor({\n    id: 'marks',\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin],\n    value: basicMarksValue,\n  });\n\n  const editorImage = usePlateEditor({\n    id: 'marks',\n    override: { components: PlateUI },\n    plugins: [\n      BasicElementsPlugin,\n      BasicMarksPlugin,\n      ImagePlugin,\n      SelectOnBackspacePlugin.configure({\n        options: {\n          query: {\n            allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n          },\n        },\n      }),\n    ],\n    value: imageValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Plate editor={editorMarks}>\n        <Plate editor={editorImage}>\n          <FixedToolbar>\n            <PlaygroundTurnIntoDropdownMenu />\n          </FixedToolbar>\n\n          <div>\n            <Editor />\n            <Separator />\n            <Editor id=\"marks\" />\n            <Separator />\n            <Editor id=\"image\" />\n          </div>\n        </Plate>\n      </Plate>\n    </Plate>\n  );\n}\n",
+      "path": "example/multiple-editors-demo.tsx",
+      "target": "components/multiple-editors-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "multiple-editors-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/outdent-toolbar-button.json b/apps/www/public/r/styles/default/outdent-toolbar-button.json
index 1613701961..01bf3d8894 100644
--- a/apps/www/public/r/styles/default/outdent-toolbar-button.json
+++ b/apps/www/public/r/styles/default/outdent-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useOutdentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const OutdentToolbarButton = withRef<typeof ToolbarButton>(\n  (rest, ref) => {\n    const { props } = useOutdentButton();\n\n    return (\n      <ToolbarButton ref={ref} tooltip=\"Outdent\" {...props} {...rest}>\n        <Icons.outdent />\n      </ToolbarButton>\n    );\n  }\n);\n",
       "path": "plate-ui/outdent-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/outdent-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/paragraph-element.json b/apps/www/public/r/styles/default/paragraph-element.json
index 0f796c8209..35b0587a2a 100644
--- a/apps/www/public/r/styles/default/paragraph-element.json
+++ b/apps/www/public/r/styles/default/paragraph-element.json
@@ -3,7 +3,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { withRef } from '@udecode/plate-common/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ParagraphElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('m-0 px-0 py-1', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/paragraph-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/paragraph-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/placeholder.json b/apps/www/public/r/styles/default/placeholder.json
index 7c6f98d460..19d5a90f78 100644
--- a/apps/www/public/r/styles/default/placeholder.json
+++ b/apps/www/public/r/styles/default/placeholder.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport {\n  type PlaceholderProps,\n  createNodeHOC,\n  createNodesHOC,\n  usePlaceholderState,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n  const { children, nodeProps, placeholder } = props;\n\n  const { enabled } = usePlaceholderState(props);\n\n  return React.Children.map(children, (child) => {\n    return React.cloneElement(child, {\n      className: child.props.className,\n      nodeProps: {\n        ...nodeProps,\n        className: cn(\n          enabled &&\n            'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n        ),\n        placeholder,\n      },\n    });\n  });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\n\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n  withPlaceholdersPrimitive(components, [\n    {\n      key: ParagraphPlugin.key,\n      hideOnBlur: true,\n      placeholder: 'Type a paragraph',\n      query: {\n        maxLevel: 1,\n      },\n    },\n    {\n      key: HEADING_KEYS.h1,\n      hideOnBlur: false,\n      placeholder: 'Untitled',\n    },\n  ]);\n",
       "path": "plate-ui/placeholder.tsx",
-      "target": "",
+      "target": "components/plate-ui/placeholder.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/plate-element.json b/apps/www/public/r/styles/default/plate-element.json
index 2d276ff66d..06d726ecd2 100644
--- a/apps/www/public/r/styles/default/plate-element.json
+++ b/apps/www/public/r/styles/default/plate-element.json
@@ -4,7 +4,7 @@
     {
       "content": "import React from 'react';\n\nimport type { PlateElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport { PlateElement as PlateElementPrimitive } from '@udecode/plate-common/react';\nimport { useBlockSelectableStore } from '@udecode/plate-selection/react';\n\nimport { BlockSelection } from './block-selection';\n\nexport const PlateElement = React.forwardRef<HTMLDivElement, PlateElementProps>(\n  ({ children, className, ...props }: PlateElementProps, ref) => {\n    const selectable = useBlockSelectableStore().get.selectable();\n\n    return (\n      <PlateElementPrimitive\n        ref={ref}\n        className={cn('relative', className)}\n        {...props}\n      >\n        {children}\n\n        {selectable && <BlockSelection />}\n      </PlateElementPrimitive>\n    );\n  }\n);\n",
       "path": "plate-ui/plate-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/plate-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/plate-types.json b/apps/www/public/r/styles/default/plate-types.json
index 728d50626b..588114433d 100644
--- a/apps/www/public/r/styles/default/plate-types.json
+++ b/apps/www/public/r/styles/default/plate-types.json
@@ -4,7 +4,7 @@
     {
       "content": "import type React from 'react';\n\nimport type { usePlaygroundEditor } from '@/registry/default/example/playground-demo';\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { ElementOf, TElement, TText } from '@udecode/plate-common';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n  BulletedListPlugin,\n  ListItemPlugin,\n  NumberedListPlugin,\n  TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n  TMentionElement,\n  TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n  MentionInputPlugin,\n  MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport {\n  type ParagraphPlugin,\n  useEditorRef,\n} from '@udecode/plate-common/react';\n\n/** Text */\n\nexport type EmptyText = {\n  text: '';\n};\n\nexport type PlainText = {\n  text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n  backgroundColor?: React.CSSProperties['backgroundColor'];\n  bold?: boolean;\n  code?: boolean;\n  color?: React.CSSProperties['color'];\n  fontFamily?: React.CSSProperties['fontFamily'];\n  fontSize?: React.CSSProperties['fontSize'];\n  fontWeight?: React.CSSProperties['fontWeight'];\n  italic?: boolean;\n  kbd?: boolean;\n  strikethrough?: boolean;\n  subscript?: boolean;\n  underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n  children: RichText[];\n  type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n  children: [PlainText];\n  type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n  children: [EmptyText];\n  type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n  | MyLinkElement\n  | MyMentionElement\n  | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n  indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n  listRestart?: number;\n  listStart?: number;\n  listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n  lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n  align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n  extends TElement,\n    MyIndentListProps,\n    MyLineHeightProps {\n  id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n  children: MyCodeLineElement[];\n  type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n  children: PlainText[];\n  type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n  children: MyTableRowElement[];\n  type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n  children: MyTableCellElement[];\n  type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n  children: MyNestableBlock[];\n  type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n  children: MyListItemElement[];\n  type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n  children: MyListItemElement[];\n  type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n  extends TTodoListItemElement,\n    MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n  children: [EmptyText];\n  type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n  extends TMediaEmbedElement,\n    MyBlockElement {\n  children: [EmptyText];\n  type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n  children: [EmptyText];\n  type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n  extends TExcalidrawElement,\n    MyBlockElement {\n  children: [EmptyText];\n  type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyElement = ElementOf<MyEditor>;\n\nexport type MyBlock = Exclude<MyElement, MyInlineElement>;\n\nexport type MyRootBlock =\n  | MyBlockquoteElement\n  | MyBulletedListElement\n  | MyCodeBlockElement\n  | MyExcalidrawElement\n  | MyH1Element\n  | MyH2Element\n  | MyH3Element\n  | MyH4Element\n  | MyH5Element\n  | MyH6Element\n  | MyHrElement\n  | MyImageElement\n  | MyMediaEmbedElement\n  | MyNumberedListElement\n  | MyParagraphElement\n  | MyTableElement\n  | MyTodoListElement\n  | MyToggleElement;\n\n/** Editor types */\n\nexport type MyValue = MyRootBlock[];\n\nexport type MyEditor = ReturnType<typeof usePlaygroundEditor>;\n\nexport const useMyEditorRef = () => useEditorRef<MyEditor>();\n",
       "path": "lib/plate-types.ts",
-      "target": "",
+      "target": "lib/plate-types.ts",
       "type": "registry:lib"
     }
   ],
diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json
new file mode 100644
index 0000000000..8f4a70f721
--- /dev/null
+++ b/apps/www/public/r/styles/default/playground-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport React, { useRef } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker-component';\nimport {\n  TodoLi,\n  TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker-component';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n  const enabledPlugins = settingsStore.use.checkedPlugins();\n  const overridePlugins = usePlaygroundEnabled(id);\n  const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n\n  const editorId = id || 'playground-' + key;\n\n  const a = usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins: [\n        // Nodes\n        HeadingPlugin,\n        TocPlugin.configure({\n          options: {\n            isScroll: true,\n            scrollContainerSelector: `#${scrollSelector}`,\n            topOffset: 80,\n          },\n        }),\n        BlockquotePlugin,\n        CodeBlockPlugin.configure({\n          options: {\n            prism: Prism,\n          },\n        }),\n        HorizontalRulePlugin,\n        LinkPlugin.extend({\n          render: { afterEditable: () => <LinkFloatingToolbar /> },\n        }),\n        ListPlugin,\n        ImagePlugin.extend({\n          render: { afterEditable: ImagePreview },\n        }),\n        MediaEmbedPlugin,\n        CaptionPlugin.configure({\n          options: {\n            plugins: [ImagePlugin, MediaEmbedPlugin],\n          },\n        }),\n        DatePlugin,\n        MentionPlugin.configure({\n          options: {\n            triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n          },\n        }),\n        SlashPlugin,\n        TablePlugin.configure({\n          options: {\n            enableMerging: id === 'tableMerge',\n          },\n        }),\n        TodoListPlugin,\n        TogglePlugin,\n        ExcalidrawPlugin,\n\n        // Marks\n        BoldPlugin,\n        ItalicPlugin,\n        UnderlinePlugin,\n        StrikethroughPlugin,\n        CodePlugin,\n        SubscriptPlugin,\n        SuperscriptPlugin,\n        FontColorPlugin,\n        FontBackgroundColorPlugin,\n        FontSizePlugin,\n        HighlightPlugin,\n        KbdPlugin,\n\n        // Block Style\n        AlignPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              MediaEmbedPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              ImagePlugin.key,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n        IndentPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n        }),\n        IndentListPlugin.extend({\n          inject: {\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n              BlockquotePlugin.key,\n              CodeBlockPlugin.key,\n              TogglePlugin.key,\n            ],\n          },\n          options: {\n            listStyleTypes: {\n              fire: {\n                liComponent: FireLiComponent,\n                markerComponent: FireMarker,\n                type: 'fire',\n              },\n              todo: {\n                liComponent: TodoLi,\n                markerComponent: TodoMarker,\n                type: 'todo',\n              },\n            },\n          },\n        }),\n        LineHeightPlugin.extend({\n          inject: {\n            nodeProps: {\n              defaultNodeValue: 1.5,\n              validNodeValues: [1, 1.2, 1.5, 2, 3],\n            },\n            targetPlugins: [\n              ParagraphPlugin.key,\n              HEADING_KEYS.h1,\n              HEADING_KEYS.h2,\n              HEADING_KEYS.h3,\n              HEADING_KEYS.h4,\n              HEADING_KEYS.h5,\n              HEADING_KEYS.h6,\n            ],\n          },\n        }),\n\n        // Functionality\n        AutoformatPlugin.configure({ options: autoformatOptions }),\n        BlockSelectionPlugin.configure({\n          enabled: !!scrollSelector,\n          options: {\n            areaOptions: {\n              boundaries: `#${scrollSelector}`,\n              container: `#${scrollSelector}`,\n              selectables: [`#${scrollSelector} .slate-selectable`],\n              selectionAreaClass: 'slate-selection-area',\n            },\n            enableContextMenu: false,\n          },\n        }),\n        DndPlugin.configure({ options: { enableScroller: true } }),\n        EmojiPlugin,\n        exitBreakPlugin,\n        NodeIdPlugin,\n        NormalizeTypesPlugin.configure({\n          options: {\n            rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n          },\n        }),\n        resetBlockTypePlugin,\n        SelectOnBackspacePlugin.configure({\n          options: {\n            query: {\n              allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n            },\n          },\n        }),\n        DeletePlugin,\n        SingleLinePlugin,\n        softBreakPlugin,\n        tabbablePlugin,\n        TrailingBlockPlugin.configure({\n          options: { type: ParagraphPlugin.key },\n        }),\n        DragOverCursorPlugin,\n\n        // Collaboration\n        CommentsPlugin.configure({\n          options: {\n            comments: commentsData,\n            myUserId: '1',\n            users: usersData,\n          },\n        }),\n\n        // Deserialization\n        DocxPlugin,\n        MarkdownPlugin,\n        JuicePlugin,\n        ColumnPlugin,\n\n        // Testing\n        PlaywrightPlugin.configure({\n          enabled: process.env.NODE_ENV !== 'production',\n        }),\n      ],\n      value: value,\n    },\n    []\n  );\n\n  return a;\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n  scrollSelector,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const containerRef = useRef(null);\n  const enabled = settingsStore.use.checkedComponents();\n\n  const editor = usePlaygroundEditor(id, scrollSelector);\n\n  return (\n    <DemoId id={id}>\n      <DndProvider backend={HTML5Backend}>\n        <Plate editor={editor}>\n          <CheckPlugin componentId=\"fixed-toolbar\">\n            <FixedToolbar className=\"no-scrollbar\">\n              <CheckPlugin componentId=\"fixed-toolbar-buttons\">\n                <PlaygroundFixedToolbarButtons />\n              </CheckPlugin>\n            </FixedToolbar>\n          </CheckPlugin>\n\n          <div\n            id=\"editor-playground\"\n            className=\"flex w-full\"\n            style={\n              {\n                '--editor-px': 'max(5%,24px)',\n              } as any\n            }\n          >\n            <div\n              id={scrollSelector}\n              ref={containerRef}\n              className={cn(\n                'relative flex max-h-[800px] w-full overflow-x-auto',\n                // block selection area\n                '[&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n                className\n              )}\n              data-plate-selectable\n            >\n              <Editor\n                {...editableProps}\n                size=\"md\"\n                variant=\"ghost\"\n                className={cn(\n                  editableProps.className,\n                  'overflow-x-auto rounded-none px-[var(--editor-px)]',\n                  !id && 'pb-[20vh] pt-4',\n                  id && 'pb-8 pt-2'\n                )}\n                placeholder=\"\"\n                focusRing={false}\n              />\n\n              <CheckPlugin componentId=\"floating-toolbar\">\n                <FloatingToolbar\n                  state={{\n                    showWhenReadOnly: isEnabled(\n                      'comment',\n                      id,\n                      enabled[CommentsPlugin.key]\n                    ),\n                  }}\n                >\n                  <CheckPlugin componentId=\"floating-toolbar-buttons\">\n                    <PlaygroundFloatingToolbarButtons />\n                  </CheckPlugin>\n                </FloatingToolbar>\n              </CheckPlugin>\n\n              <CheckPlugin id=\"cursoroverlay\" plugin={DragOverCursorPlugin}>\n                <CursorOverlay containerRef={containerRef} />\n              </CheckPlugin>\n            </div>\n\n            <CheckPlugin\n              id=\"comment\"\n              componentId=\"comments-popover\"\n              plugin={CommentsPlugin}\n            >\n              <CommentsPopover />\n            </CheckPlugin>\n          </div>\n        </Plate>\n      </DndProvider>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "path": "example/playground-demo.tsx",
+      "target": "components/playground-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "playground-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/popover.json b/apps/www/public/r/styles/default/popover.json
index 05f59cbf2f..b9e9e66200 100644
--- a/apps/www/public/r/styles/default/popover.json
+++ b/apps/www/public/r/styles/default/popover.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n  'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef<typeof PopoverPrimitive.Content>(\n  ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        className={cn(popoverVariants(), className)}\n        style={{ zIndex: 1000, ...style }}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n);\n",
       "path": "plate-ui/popover.tsx",
-      "target": "",
+      "target": "components/plate-ui/popover.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/preview-md-demo.json b/apps/www/public/r/styles/default/preview-md-demo.json
new file mode 100644
index 0000000000..d8cc0da7d8
--- /dev/null
+++ b/apps/www/public/r/styles/default/preview-md-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BasicElementsPlugin } from \"@udecode/plate-basic-elements/react\";\nimport { BasicMarksPlugin } from \"@udecode/plate-basic-marks/react\";\nimport {\n  type Decorate,\n  type TText, createSlatePlugin, isText\n} from \"@udecode/plate-common\";\nimport { type TRenderLeafProps, Plate , usePlateEditor } from \"@udecode/plate-common/react\";\nimport Prism from 'prismjs';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { previewMdValue } from '@/plate/demo/values/previewMdValue';\nimport { Editor } from '@/components/plate-ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/**\n * Decorate texts with markdown preview.\n */\nconst decoratePreview: Decorate =\n  ({entry: [node, path]}) => {\n    const ranges: any[] = [];\n\n    if (!isText(node)) {\n      return ranges;\n    }\n\n    const getLength = (token: any) => {\n      if (typeof token === 'string') {\n        return token.length;\n      }\n      if (typeof token.content === 'string') {\n        return token.content.length;\n      }\n\n      return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n    };\n\n    const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n    let start = 0;\n\n    for (const token of tokens) {\n      const length = getLength(token);\n      const end = start + length;\n\n      if (typeof token !== 'string') {\n        ranges.push({\n          anchor: { offset: start, path },\n          focus: { offset: end, path },\n          [token.type]: true,\n        });\n      }\n\n      start = end;\n    }\n\n    return ranges;\n  };\n\nfunction PreviewLeaf({\n  attributes,\n  children,\n  leaf,\n}: TRenderLeafProps<\n  {\n    blockquote?: boolean;\n    bold?: boolean;\n    code?: boolean;\n    hr?: boolean;\n    italic?: boolean;\n    list?: boolean;\n    title?: boolean;\n  } & TText\n>) {\n  const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n  return (\n    <span\n      {...attributes}\n      className={cn(\n        bold && 'font-bold',\n        italic && 'italic',\n        title && 'mx-0 mb-2.5 mt-5 inline-block text-[20px] font-bold',\n        list && 'pl-2.5 text-[20px] leading-[10px]',\n        hr && 'block border-b-2 border-[#ddd] text-center',\n        blockquote &&\n          'inline-block border-l-2 border-[#ddd] pl-2.5 italic text-[#aaa]',\n        code && 'bg-[#eee] p-[3px] font-mono'\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nconst _editableProps = {\n  ...editableProps,\n  renderLeaf: PreviewLeaf,\n};\n\nexport default function PreviewMdDemo() {\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins: [BasicElementsPlugin, BasicMarksPlugin, createSlatePlugin({\n      key: 'preview-md',\n      decorate: decoratePreview,\n    })],\n    value: previewMdValue,\n  })\n  \n  return (\n    <div className=\"p-10\">\n      <Plate editor={editor}>\n        <Editor {..._editableProps} />\n      </Plate>\n    </div>\n  );\n}\n",
+      "path": "example/preview-md-demo.tsx",
+      "target": "components/preview-md-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "preview-md-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/resizable.json b/apps/www/public/r/styles/default/resizable.json
index bef4ba55a8..3e01313de6 100644
--- a/apps/www/public/r/styles/default/resizable.json
+++ b/apps/www/public/r/styles/default/resizable.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n  Resizable as ResizablePrimitive,\n  ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n  cn(\n    'top-0 flex w-6 select-none flex-col justify-center',\n    \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n  ),\n  {\n    variants: {\n      direction: {\n        left: '-left-3 -ml-3 pl-3',\n        right: '-right-3 -mr-3 items-end pr-3',\n      },\n    },\n  }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n  variants: {\n    direction: {\n      bottom: 'w-full cursor-row-resize',\n      left: 'h-full cursor-col-resize',\n      right: 'h-full cursor-col-resize',\n      top: 'w-full cursor-row-resize',\n    },\n  },\n});\n\nconst ResizeHandleVariants = withVariants(\n  ResizeHandlePrimitive,\n  resizeHandleVariants,\n  ['direction']\n);\n\nexport const ResizeHandle = withRef<typeof ResizeHandlePrimitive>(\n  (props, ref) => (\n    <ResizeHandleVariants\n      ref={ref}\n      direction={props.options?.direction}\n      {...props}\n    />\n  )\n);\n\nconst resizableVariants = cva('', {\n  variants: {\n    align: {\n      center: 'mx-auto',\n      left: 'mr-auto',\n      right: 'ml-auto',\n    },\n  },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n  'align',\n]);\n",
       "path": "plate-ui/resizable.tsx",
-      "target": "",
+      "target": "components/plate-ui/resizable.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/search-highlight-leaf.json b/apps/www/public/r/styles/default/search-highlight-leaf.json
index 27c4a5f165..95008718d6 100644
--- a/apps/www/public/r/styles/default/search-highlight-leaf.json
+++ b/apps/www/public/r/styles/default/search-highlight-leaf.json
@@ -6,7 +6,7 @@
     {
       "content": "import { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n",
       "path": "plate-ui/search-highlight-leaf.tsx",
-      "target": "",
+      "target": "components/plate-ui/search-highlight-leaf.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/separator.json b/apps/www/public/r/styles/default/separator.json
index cc5ff32e73..d230bcfed0 100644
--- a/apps/www/public/r/styles/default/separator.json
+++ b/apps/www/public/r/styles/default/separator.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { withProps, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nconst separatorVariants = cva('shrink-0 bg-border', {\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-full',\n      vertical: 'h-full w-px',\n    },\n  },\n});\n\nexport const Separator = withVariants(\n  withProps(SeparatorPrimitive.Root, {\n    decorative: true,\n    orientation: 'horizontal',\n  }),\n  separatorVariants\n);\n",
       "path": "plate-ui/separator.tsx",
-      "target": "",
+      "target": "components/plate-ui/separator.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json
index 331ca91a7f..d3b8e0138c 100644
--- a/apps/www/public/r/styles/default/slash-input-element.json
+++ b/apps/www/public/r/styles/default/slash-input-element.json
@@ -7,7 +7,7 @@
     {
       "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { withRef } from '@udecode/cn';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ninterface SlashCommandRule {\n  icon: ComponentType<SVGProps<SVGSVGElement>>;\n  onSelect: (editor: PlateEditor) => void;\n  value: string;\n  keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n  {\n    icon: Icons.h1,\n    value: 'Heading 1',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n    },\n  },\n  {\n    icon: Icons.h2,\n    value: 'Heading 2',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n    },\n  },\n  {\n    icon: Icons.h3,\n    value: 'Heading 3',\n    onSelect: (editor) => {\n      editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n    },\n  },\n  {\n    icon: Icons.ul,\n    keywords: ['ul', 'unordered list'],\n    value: 'Bulleted list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Disc,\n      });\n    },\n  },\n  {\n    icon: Icons.ol,\n    keywords: ['ol', 'ordered list'],\n    value: 'Numbered list',\n    onSelect: (editor) => {\n      toggleIndentList(editor, {\n        listStyleType: ListStyleType.Decimal,\n      });\n    },\n  },\n  {\n    icon: Icons.add,\n    keywords: ['inline', 'date'],\n    value: 'Date',\n    onSelect: (editor) => {\n      editor.getTransforms(DatePlugin).insert.date();\n    },\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>\n              No matching commands found\n            </InlineComboboxEmpty>\n\n            {rules.map(({ icon: Icon, keywords, value, onSelect }) => (\n              <InlineComboboxItem\n                key={value}\n                value={value}\n                onClick={() => onSelect(editor)}\n                keywords={keywords}\n              >\n                <Icon className=\"mr-2 size-4\" aria-hidden />\n                {value}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/slash-input-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/slash-input-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/table-cell-element.json b/apps/www/public/r/styles/default/table-cell-element.json
index f5e6565552..48301120b2 100644
--- a/apps/www/public/r/styles/default/table-cell-element.json
+++ b/apps/www/public/r/styles/default/table-cell-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport {\n  useTableCellElement,\n  useTableCellElementResizable,\n  useTableCellElementResizableState,\n  useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { PlateElement } from './plate-element';\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n  typeof PlateElement,\n  {\n    hideBorder?: boolean;\n    isHeader?: boolean;\n  }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n  const { element } = props;\n\n  const {\n    borders,\n    colIndex,\n    colSpan,\n    hovered,\n    hoveredLeft,\n    isSelectingCell,\n    readOnly,\n    rowIndex,\n    rowSize,\n    selected,\n  } = useTableCellElementState();\n  const { props: cellProps } = useTableCellElement({ element: props.element });\n  const resizableState = useTableCellElementResizableState({\n    colIndex,\n    colSpan,\n    rowIndex,\n  });\n\n  const { bottomProps, hiddenLeft, leftProps, rightProps } =\n    useTableCellElementResizable(resizableState);\n\n  return (\n    <PlateElement\n      ref={ref}\n      as={isHeader ? 'th' : 'td'}\n      className={cn(\n        'relative h-full overflow-visible border-none bg-background p-0',\n        hideBorder && 'before:border-none',\n        element.background ? 'bg-[--cellBackground]' : 'bg-background',\n        !hideBorder &&\n          cn(\n            isHeader && 'text-left [&_>_*]:m-0',\n            'before:size-full',\n            selected && 'before:z-10 before:bg-muted',\n            \"before:absolute before:box-border before:select-none before:content-['']\",\n            borders &&\n              cn(\n                borders.bottom?.size &&\n                  `before:border-b before:border-b-border`,\n                borders.right?.size && `before:border-r before:border-r-border`,\n                borders.left?.size && `before:border-l before:border-l-border`,\n                borders.top?.size && `before:border-t before:border-t-border`\n              )\n          ),\n        className\n      )}\n      {...cellProps}\n      {...props}\n      style={\n        {\n          '--cellBackground': element.background,\n          ...style,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className=\"relative z-20 box-border h-full px-3 py-2\"\n        style={{\n          minHeight: rowSize,\n        }}\n      >\n        {children}\n      </div>\n\n      {!isSelectingCell && (\n        <div\n          className=\"group absolute top-0 size-full select-none\"\n          contentEditable={false}\n          suppressContentEditableWarning={true}\n        >\n          {!readOnly && (\n            <>\n              <ResizeHandle\n                {...rightProps}\n                className=\"-top-3 right-[-5px] w-[10px]\"\n              />\n              <ResizeHandle\n                {...bottomProps}\n                className=\"bottom-[-5px] h-[10px]\"\n              />\n              {!hiddenLeft && (\n                <ResizeHandle\n                  {...leftProps}\n                  className=\"-top-3 left-[-5px] w-[10px]\"\n                />\n              )}\n\n              {hovered && (\n                <div\n                  className={cn(\n                    'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                    'right-[-1.5px]'\n                  )}\n                />\n              )}\n              {hoveredLeft && (\n                <div\n                  className={cn(\n                    'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',\n                    'left-[-1.5px]'\n                  )}\n                />\n              )}\n            </>\n          )}\n        </div>\n      )}\n    </PlateElement>\n  );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n  isHeader: true,\n});\n",
       "path": "plate-ui/table-cell-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/table-cell-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/table-dropdown-menu.json b/apps/www/public/r/styles/default/table-dropdown-menu.json
index 785f1650b1..6a6ab79b06 100644
--- a/apps/www/public/r/styles/default/table-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/table-dropdown-menu.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { someNode } from '@udecode/plate-common';\nimport {\n  focusEditor,\n  useEditorPlugin,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n  TablePlugin,\n  deleteColumn,\n  deleteRow,\n  insertTable,\n} from '@udecode/plate-table/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n  const tableSelected = useEditorSelector(\n    (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n    []\n  );\n\n  const { editor, tf } = useEditorPlugin(TablePlugin);\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Table\" isDropdown>\n          <Icons.table />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"flex w-[180px] min-w-0 flex-col gap-0.5\"\n        align=\"start\"\n      >\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <Icons.table className={iconVariants({ variant: 'menuItem' })} />\n            <span>Table</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              onSelect={() => {\n                insertTable(editor, {}, { select: true });\n                focusEditor(editor);\n              }}\n            >\n              <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n              Insert table\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                deleteTable(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Icons.trash className={iconVariants({ variant: 'menuItem' })} />\n              Delete table\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <Icons.column className={iconVariants({ variant: 'menuItem' })} />\n            <span>Column</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                tf.insert.tableColumn();\n                focusEditor(editor);\n              }}\n            >\n              <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n              Insert column after\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                deleteColumn(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n              Delete column\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger disabled={!tableSelected}>\n            <Icons.row className={iconVariants({ variant: 'menuItem' })} />\n            <span>Row</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                insertTableRow(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n              Insert row after\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              className=\"min-w-[180px]\"\n              disabled={!tableSelected}\n              onSelect={() => {\n                deleteRow(editor);\n                focusEditor(editor);\n              }}\n            >\n              <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n              Delete row\n            </DropdownMenuItem>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/table-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/table-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/table-element.json b/apps/www/public/r/styles/default/table-element.json
index 4284ed0b9e..7427164d5c 100644
--- a/apps/www/public/r/styles/default/table-element.json
+++ b/apps/www/public/r/styles/default/table-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n  useEditorRef,\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n  withHOC,\n} from '@udecode/plate-common/react';\nimport {\n  TableProvider,\n  mergeTableCells,\n  unmergeTableCells,\n  useTableBordersDropdownMenuContentState,\n  useTableElement,\n  useTableElementState,\n  useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n  typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n  const {\n    getOnSelectTableBorder,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasOuterBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      className={cn('min-w-[220px]')}\n      align=\"start\"\n      side=\"right\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuCheckboxItem\n        checked={hasBottomBorder}\n        onCheckedChange={getOnSelectTableBorder('bottom')}\n      >\n        <Icons.borderBottom className={iconVariants({ size: 'sm' })} />\n        <div>Bottom Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasTopBorder}\n        onCheckedChange={getOnSelectTableBorder('top')}\n      >\n        <Icons.borderTop className={iconVariants({ size: 'sm' })} />\n        <div>Top Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasLeftBorder}\n        onCheckedChange={getOnSelectTableBorder('left')}\n      >\n        <Icons.borderLeft className={iconVariants({ size: 'sm' })} />\n        <div>Left Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasRightBorder}\n        onCheckedChange={getOnSelectTableBorder('right')}\n      >\n        <Icons.borderRight className={iconVariants({ size: 'sm' })} />\n        <div>Right Border</div>\n      </DropdownMenuCheckboxItem>\n\n      <Separator />\n\n      <DropdownMenuCheckboxItem\n        checked={hasNoBorders}\n        onCheckedChange={getOnSelectTableBorder('none')}\n      >\n        <Icons.borderNone className={iconVariants({ size: 'sm' })} />\n        <div>No Border</div>\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        checked={hasOuterBorders}\n        onCheckedChange={getOnSelectTableBorder('outer')}\n      >\n        <Icons.borderAll className={iconVariants({ size: 'sm' })} />\n        <div>Outside Borders</div>\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  );\n});\n\nexport const TableFloatingToolbar = withRef<typeof PopoverContent>(\n  ({ children, ...props }, ref) => {\n    const element = useElement<TTableElement>();\n    const { props: buttonProps } = useRemoveNodeButton({ element });\n\n    const selectionCollapsed = useEditorSelector(\n      (editor) => !isSelectionExpanded(editor),\n      []\n    );\n\n    const readOnly = useReadOnly();\n    const selected = useSelected();\n    const editor = useEditorRef();\n\n    const collapsed = !readOnly && selected && selectionCollapsed;\n    const open = !readOnly && selected;\n\n    const { canMerge, canUnmerge } = useTableMergeState();\n\n    const mergeContent = canMerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => mergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Icons.combine className=\"mr-2 size-4\" />\n        Merge\n      </Button>\n    );\n\n    const unmergeButton = canUnmerge && (\n      <Button\n        variant=\"ghost\"\n        onClick={() => unmergeTableCells(editor)}\n        contentEditable={false}\n        isMenu\n      >\n        <Icons.ungroup className=\"mr-2 size-4\" />\n        Unmerge\n      </Button>\n    );\n\n    const bordersContent = collapsed && (\n      <>\n        <DropdownMenu modal={false}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" isMenu>\n              <Icons.borderAll className=\"mr-2 size-4\" />\n              Borders\n            </Button>\n          </DropdownMenuTrigger>\n\n          <DropdownMenuPortal>\n            <TableBordersDropdownMenuContent />\n          </DropdownMenuPortal>\n        </DropdownMenu>\n\n        <Button variant=\"ghost\" contentEditable={false} isMenu {...buttonProps}>\n          <Icons.delete className=\"mr-2 size-4\" />\n          Delete\n        </Button>\n      </>\n    );\n\n    return (\n      <Popover open={open} modal={false}>\n        <PopoverAnchor asChild>{children}</PopoverAnchor>\n        {(canMerge || canUnmerge || collapsed) && (\n          <PopoverContent\n            ref={ref}\n            className={cn(\n              popoverVariants(),\n              'flex w-[220px] flex-col gap-1 p-1'\n            )}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            {...props}\n          >\n            {unmergeButton}\n            {mergeContent}\n            {bordersContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport const TableElement = withHOC(\n  TableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n      useTableElementState();\n    const { colGroupProps, props: tableProps } = useTableElement();\n\n    return (\n      <TableFloatingToolbar>\n        <div style={{ paddingLeft: marginLeft }}>\n          <PlateElement\n            ref={ref}\n            as=\"table\"\n            className={cn(\n              'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',\n              isSelectingCell && '[&_*::selection]:bg-none',\n              className\n            )}\n            {...tableProps}\n            {...props}\n          >\n            <colgroup {...colGroupProps}>\n              {colSizes.map((width, index) => (\n                <col\n                  key={index}\n                  style={{\n                    minWidth: minColumnWidth,\n                    width: width || undefined,\n                  }}\n                />\n              ))}\n            </colgroup>\n\n            <tbody className=\"min-w-full\">{children}</tbody>\n          </PlateElement>\n        </div>\n      </TableFloatingToolbar>\n    );\n  })\n);\n",
       "path": "plate-ui/table-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/table-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/table-row-element.json b/apps/www/public/r/styles/default/table-row-element.json
index db11efadb8..5c5ef6d474 100644
--- a/apps/www/public/r/styles/default/table-row-element.json
+++ b/apps/www/public/r/styles/default/table-row-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const TableRowElement = withRef<\n  typeof PlateElement,\n  {\n    hideBorder?: boolean;\n  }\n>(({ children, hideBorder, ...props }, ref) => {\n  return (\n    <PlateElement\n      ref={ref}\n      as=\"tr\"\n      className={cn('h-full', hideBorder && 'border-none')}\n      {...props}\n    >\n      {children}\n    </PlateElement>\n  );\n});\n",
       "path": "plate-ui/table-row-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/table-row-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/todo-list-element.json b/apps/www/public/r/styles/default/todo-list-element.json
index 6d075256e4..fdf30a39c8 100644
--- a/apps/www/public/r/styles/default/todo-list-element.json
+++ b/apps/www/public/r/styles/default/todo-list-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useTodoListElement,\n  useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\nimport { PlateElement } from './plate-element';\n\nexport const TodoListElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n    const state = useTodoListElementState({ element });\n    const { checkboxProps } = useTodoListElement(state);\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('flex flex-row py-1', className)}\n        {...props}\n      >\n        <div\n          className=\"mr-1.5 flex select-none items-center justify-center\"\n          contentEditable={false}\n        >\n          <Checkbox {...checkboxProps} />\n        </div>\n        <span\n          className={cn(\n            'flex-1 focus:outline-none',\n            state.checked && 'text-muted-foreground line-through'\n          )}\n          contentEditable={!state.readOnly}\n          suppressContentEditableWarning\n        >\n          {children}\n        </span>\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/todo-list-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/todo-list-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/toggle-element.json b/apps/www/public/r/styles/default/toggle-element.json
index 26d6334dd5..c2e65e89b4 100644
--- a/apps/www/public/r/styles/default/toggle-element.json
+++ b/apps/www/public/r/styles/default/toggle-element.json
@@ -6,7 +6,7 @@
     {
       "content": "import { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n  useToggleButton,\n  useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const element = useElement();\n    const state = useToggleButtonState(element.id as string);\n    const { buttonProps, open } = useToggleButton(state);\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative pl-6', className)}\n        {...props}\n      >\n        <span\n          className=\"absolute -left-0.5 -top-0.5 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-colors hover:bg-slate-200\"\n          contentEditable={false}\n          {...buttonProps}\n        >\n          {open ? <Icons.chevronDown /> : <Icons.chevronRight />}\n        </span>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/toggle-element.tsx",
-      "target": "",
+      "target": "components/plate-ui/toggle-element.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/toggle-toolbar-button.json b/apps/www/public/r/styles/default/toggle-toolbar-button.json
index 511152b3e7..d5375efda6 100644
--- a/apps/www/public/r/styles/default/toggle-toolbar-button.json
+++ b/apps/www/public/r/styles/default/toggle-toolbar-button.json
@@ -6,7 +6,7 @@
     {
       "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  useToggleToolbarButton,\n  useToggleToolbarButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ToggleToolbarButton = withRef<typeof ToolbarButton>(\n  (rest, ref) => {\n    const state = useToggleToolbarButtonState();\n    const { props } = useToggleToolbarButton(state);\n\n    return (\n      <ToolbarButton ref={ref} tooltip=\"Toggle\" {...props} {...rest}>\n        <Icons.chevronDown />\n      </ToolbarButton>\n    );\n  }\n);\n",
       "path": "plate-ui/toggle-toolbar-button.tsx",
-      "target": "",
+      "target": "components/plate-ui/toggle-toolbar-button.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 9197df6d92..6314b41734 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n    '[&_svg:not([data-icon])]:size-5'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-9 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'my-1 justify-between pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1\">{children}</div>\n                <div>\n                  <Icons.arrowDown className=\"ml-0.5 size-4\" data-icon />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n  'div',\n  {\n    noSeparator?: boolean;\n  }\n>(({ children, className, noSeparator }, ref) => {\n  const childArr = React.Children.map(children, (c) => c);\n\n  if (!childArr || childArr.length === 0) return null;\n\n  return (\n    <div ref={ref} className={cn('flex', className)}>\n      {!noSeparator && (\n        <div className=\"h-full py-1\">\n          <Separator orientation=\"vertical\" />\n        </div>\n      )}\n\n      <div className=\"mx-1 flex items-center gap-1\">{children}</div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
-      "target": "",
+      "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/tooltip.json b/apps/www/public/r/styles/default/tooltip.json
index 357e4999fd..ce06a7d530 100644
--- a/apps/www/public/r/styles/default/tooltip.json
+++ b/apps/www/public/r/styles/default/tooltip.json
@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = withProps(TooltipPrimitive.Provider, {\n  delayDuration: 0,\n  disableHoverableContent: true,\n  skipDelayDuration: 0,\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n  withProps(TooltipPrimitive.Content, {\n    sideOffset: 4,\n  }),\n  'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md'\n);\n\nexport function withTooltip<\n  T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,\n>(Component: T) {\n  return React.forwardRef<\n    React.ElementRef<T>,\n    {\n      tooltipContentProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n        'children'\n      >;\n      tooltipProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,\n        'children'\n      >;\n      tooltip?: React.ReactNode;\n    } & React.ComponentPropsWithoutRef<T> &\n      Omit<TooltipPrimitive.TooltipProviderProps, 'children'>\n  >(function ExtendComponent(\n    {\n      delayDuration = 0,\n      disableHoverableContent = true,\n      skipDelayDuration = 0,\n      tooltip,\n      tooltipContentProps,\n      tooltipProps,\n      ...props\n    },\n    ref\n  ) {\n    const [mounted, setMounted] = React.useState(false);\n\n    React.useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    const component = <Component ref={ref} {...(props as any)} />;\n\n    if (tooltip && mounted) {\n      return (\n        <TooltipProvider\n          delayDuration={delayDuration}\n          disableHoverableContent={disableHoverableContent}\n          skipDelayDuration={skipDelayDuration}\n        >\n          <Tooltip {...tooltipProps}>\n            <TooltipTrigger asChild>{component}</TooltipTrigger>\n\n            <TooltipPortal>\n              <TooltipContent {...tooltipContentProps}>\n                {tooltip}\n              </TooltipContent>\n            </TooltipPortal>\n          </Tooltip>\n        </TooltipProvider>\n      );\n    }\n\n    return component;\n  });\n}\n",
       "path": "plate-ui/tooltip.tsx",
-      "target": "",
+      "target": "components/plate-ui/tooltip.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
index 57bfebd012..502b986c06 100644
--- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
@@ -7,7 +7,7 @@
     {
       "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { getNodeEntries, isBlock } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n  useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    description: 'Paragraph',\n    icon: Icons.paragraph,\n    label: 'Paragraph',\n    value: ParagraphPlugin.key,\n  },\n  {\n    description: 'Heading 1',\n    icon: Icons.h1,\n    label: 'Heading 1',\n    value: HEADING_KEYS.h1,\n  },\n  {\n    description: 'Heading 2',\n    icon: Icons.h2,\n    label: 'Heading 2',\n    value: HEADING_KEYS.h2,\n  },\n  {\n    description: 'Heading 3',\n    icon: Icons.h3,\n    label: 'Heading 3',\n    value: HEADING_KEYS.h3,\n  },\n  {\n    description: 'Quote (⌘+⇧+.)',\n    icon: Icons.blockquote,\n    label: 'Quote',\n    value: BlockquotePlugin.key,\n  },\n  {\n    description: 'Bulleted list',\n    icon: Icons.ul,\n    label: 'Bulleted list',\n    value: ListStyleType.Disc,\n  },\n  {\n    description: 'Numbered list',\n    icon: Icons.ol,\n    label: 'Numbered list',\n    value: ListStyleType.Decimal,\n  },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n  const value: string = useEditorSelector((editor) => {\n    let initialNodeType: string = ParagraphPlugin.key;\n    let allNodesMatchInitialNodeType = false;\n    const codeBlockEntries = getNodeEntries(editor, {\n      match: (n) => isBlock(editor, n),\n      mode: 'highest',\n    });\n    const nodes = Array.from(codeBlockEntries);\n\n    if (nodes.length > 0) {\n      initialNodeType = nodes[0][0].type as string;\n      allNodesMatchInitialNodeType = nodes.every(([node]) => {\n        const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n        return type === initialNodeType;\n      });\n    }\n\n    return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n  }, []);\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const selectedItem =\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n    items.find((item) => item.value === value) ?? defaultItem;\n  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton\n          className=\"lg:min-w-[130px]\"\n          pressed={openState.open}\n          tooltip=\"Turn into\"\n          isDropdown\n        >\n          <SelectedItemIcon className=\"size-5 lg:hidden\" />\n          <span className=\"max-lg:hidden\">{selectedItemLabel}</span>\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar min-w-0\"\n        align=\"start\"\n      >\n        <DropdownMenuLabel>Turn into</DropdownMenuLabel>\n\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          value={value}\n          onValueChange={(type: any) => {\n            if (type === ListStyleType.Disc || type === ListStyleType.Decimal) {\n              toggleIndentList(editor, {\n                listStyleType: type,\n              });\n            }\n\n            editor.tf.toggle.block({ type });\n\n            focusEditor(editor);\n          }}\n        >\n          {items.map(({ icon: Icon, label, value: itemValue }) => (\n            <DropdownMenuRadioItem\n              key={itemValue}\n              className=\"min-w-[180px]\"\n              value={itemValue}\n            >\n              <Icon className=\"mr-2 size-5\" />\n              {label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/turn-into-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/turn-into-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/www/public/r/styles/default/use-debounce.json b/apps/www/public/r/styles/default/use-debounce.json
index 9fb7aafb2b..baecef0fb7 100644
--- a/apps/www/public/r/styles/default/use-debounce.json
+++ b/apps/www/public/r/styles/default/use-debounce.json
@@ -3,6 +3,7 @@
     {
       "content": "import * as React from 'react';\n\nexport const useDebounce = <T>(value: T, delay = 500) => {\n  const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n  React.useEffect(() => {\n    const handler: NodeJS.Timeout = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cancel the timeout if value changes (also on delay change or unmount)\n    return () => {\n      clearTimeout(handler);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n",
       "path": "hooks/use-debounce.ts",
+      "target": "hooks/use-debounce.ts",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/www/public/r/styles/default/use-mounted.json b/apps/www/public/r/styles/default/use-mounted.json
index 700e40dfd5..ff44f21dc7 100644
--- a/apps/www/public/r/styles/default/use-mounted.json
+++ b/apps/www/public/r/styles/default/use-mounted.json
@@ -3,6 +3,7 @@
     {
       "content": "import * as React from 'react';\n\nexport function useMounted() {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return mounted;\n}\n",
       "path": "hooks/use-mounted.ts",
+      "target": "hooks/use-mounted.ts",
       "type": "registry:hook"
     }
   ],
diff --git a/apps/www/public/r/styles/default/utils.json b/apps/www/public/r/styles/default/utils.json
index 9f9205a62a..6dd6a39ab4 100644
--- a/apps/www/public/r/styles/default/utils.json
+++ b/apps/www/public/r/styles/default/utils.json
@@ -7,6 +7,7 @@
     {
       "content": "import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
       "path": "lib/utils.ts",
+      "target": "lib/utils.ts",
       "type": "registry:lib"
     }
   ],
diff --git a/apps/www/public/r/styles/default/version-history-demo.json b/apps/www/public/r/styles/default/version-history-demo.json
new file mode 100644
index 0000000000..bbc33b06aa
--- /dev/null
+++ b/apps/www/public/r/styles/default/version-history-demo.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BoldPlugin, ItalicPlugin } from '@udecode/plate-basic-marks/react';\nimport { SoftBreakPlugin } from '@udecode/plate-break/react';\nimport { type Value, createSlatePlugin, isInline } from '@udecode/plate-common';\nimport {\n  ParagraphPlugin,\n  createPlatePlugin,\n  toPlatePlugin,\n} from '@udecode/plate-common/react';\nimport {\n  type PlateElementProps,\n  type PlateLeafProps,\n  type PlateProps,\n  Plate,\n  PlateContent,\n  PlateElement,\n  PlateLeaf,\n  createPlateEditor,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport {\n  type DiffOperation,\n  type DiffUpdate,\n  computeDiff,\n  withGetFragmentExcludeDiff,\n} from '@udecode/plate-diff';\nimport { cloneDeep } from 'lodash';\nimport { useSelected } from 'slate-react';\n\nimport { PlateUI } from '@/lib/plate/demo/plate-ui';\nimport { Button } from '@/components/plate-ui/button';\n\nconst InlinePlugin = createPlatePlugin({\n  key: 'inline',\n  node: { isElement: true, isInline: true },\n});\n\nconst InlineVoidPlugin = createPlatePlugin({\n  key: 'inline-void',\n  node: { isElement: true, isInline: true, isVoid: true },\n});\n\nconst diffOperationColors: Record<DiffOperation['type'], string> = {\n  delete: 'bg-red-200',\n  insert: 'bg-green-200',\n  update: 'bg-blue-200',\n};\n\nconst describeUpdate = ({ newProperties, properties }: DiffUpdate) => {\n  const addedProps: string[] = [];\n  const removedProps: string[] = [];\n  const updatedProps: string[] = [];\n\n  Object.keys(newProperties).forEach((key) => {\n    const oldValue = properties[key];\n    const newValue = newProperties[key];\n\n    if (oldValue === undefined) {\n      addedProps.push(key);\n\n      return;\n    }\n    if (newValue === undefined) {\n      removedProps.push(key);\n\n      return;\n    }\n\n    updatedProps.push(key);\n  });\n\n  const descriptionParts = [];\n\n  if (addedProps.length > 0) {\n    descriptionParts.push(`Added ${addedProps.join(', ')}`);\n  }\n  if (removedProps.length > 0) {\n    descriptionParts.push(`Removed ${removedProps.join(', ')}`);\n  }\n  if (updatedProps.length > 0) {\n    updatedProps.forEach((key) => {\n      descriptionParts.push(\n        `Updated ${key} from ${properties[key]} to ${newProperties[key]}`\n      );\n    });\n  }\n\n  return descriptionParts.join('\\n');\n};\n\nconst InlineElement = ({ children, ...props }: PlateElementProps) => {\n  return (\n    <PlateElement\n      {...props}\n      as=\"span\"\n      className=\"rounded-sm bg-slate-200/50 p-1\"\n    >\n      {children}\n    </PlateElement>\n  );\n};\n\nconst InlineVoidElement = ({ children, ...props }: PlateElementProps) => {\n  const selected = useSelected();\n\n  return (\n    <PlateElement {...props} as=\"span\">\n      <span\n        className={cn(\n          'rounded-sm bg-slate-200/50 p-1',\n          selected && 'bg-blue-500 text-white'\n        )}\n        contentEditable={false}\n      >\n        Inline void\n      </span>\n      {children}\n    </PlateElement>\n  );\n};\n\nconst DiffPlugin = toPlatePlugin(\n  createSlatePlugin({\n    key: 'diff',\n    extendEditor: withGetFragmentExcludeDiff,\n    node: { isLeaf: true },\n  }),\n  {\n    render: {\n      aboveNodes:\n        () =>\n        ({ children, editor, element }) => {\n          if (!element.diff) return children;\n\n          const diffOperation = element.diffOperation as DiffOperation;\n\n          const label = (\n            {\n              delete: 'deletion',\n              insert: 'insertion',\n              update: 'update',\n            } as any\n          )[diffOperation.type];\n\n          const Component = isInline(editor, element) ? 'span' : 'div';\n\n          return (\n            <Component\n              className={diffOperationColors[diffOperation.type]}\n              title={\n                diffOperation.type === 'update'\n                  ? describeUpdate(diffOperation)\n                  : undefined\n              }\n              aria-label={label}\n            >\n              {children}\n            </Component>\n          );\n        },\n      node: DiffLeaf,\n    },\n  }\n);\n\nfunction DiffLeaf({ children, ...props }: PlateLeafProps) {\n  const diffOperation = props.leaf.diffOperation as DiffOperation;\n\n  const Component = (\n    {\n      delete: 'del',\n      insert: 'ins',\n      update: 'span',\n    } as any\n  )[diffOperation.type];\n\n  return (\n    <PlateLeaf {...props} asChild>\n      <Component\n        className={diffOperationColors[diffOperation.type]}\n        title={\n          diffOperation.type === 'update'\n            ? describeUpdate(diffOperation)\n            : undefined\n        }\n      >\n        {children}\n      </Component>\n    </PlateLeaf>\n  );\n}\n\nconst initialValue: Value = [\n  {\n    children: [{ text: 'This is a version history demo.' }],\n    type: ParagraphPlugin.key,\n  },\n  {\n    children: [\n      { text: 'Try editing the ' },\n      { bold: true, text: 'text and see what' },\n      { text: ' happens.' },\n    ],\n    type: ParagraphPlugin.key,\n  },\n  {\n    children: [\n      { text: 'This is an ' },\n      { children: [{ text: '' }], type: InlineVoidPlugin.key },\n      { text: '. Try removing it.' },\n    ],\n    type: ParagraphPlugin.key,\n  },\n  {\n    children: [\n      { text: 'This is an ' },\n      { children: [{ text: 'editable inline' }], type: InlinePlugin.key },\n      { text: '. Try editing it.' },\n    ],\n    type: ParagraphPlugin.key,\n  },\n];\n\nconst plugins = [\n  InlinePlugin.withComponent(InlineElement),\n  InlineVoidPlugin.withComponent(InlineVoidElement),\n  BoldPlugin,\n  ItalicPlugin,\n  DiffPlugin,\n  SoftBreakPlugin,\n];\n\nfunction VersionHistoryPlate(props: Omit<PlateProps, 'children'>) {\n  return (\n    <Plate {...props}>\n      <PlateContent className=\"rounded-md border p-3\" />\n    </Plate>\n  );\n}\n\ninterface DiffProps {\n  current: Value;\n  previous: Value;\n}\n\nfunction Diff({ current, previous }: DiffProps) {\n  const diffValue = React.useMemo(() => {\n    const editor = createPlateEditor({\n      plugins,\n    });\n\n    return computeDiff(previous, cloneDeep(current), {\n      isInline: editor.isInline,\n      lineBreakChar: '¶',\n    }) as Value;\n  }, [previous, current]);\n\n  const editor = usePlateEditor(\n    {\n      override: { components: PlateUI },\n      plugins,\n      value: diffValue,\n    },\n    [diffValue]\n  );\n\n  return (\n    <>\n      <VersionHistoryPlate\n        key={JSON.stringify(diffValue)}\n        readOnly\n        editor={editor}\n      />\n\n      <pre>{JSON.stringify(diffValue, null, 2)}</pre>\n    </>\n  );\n}\n\nexport default function VersionHistoryDemo() {\n  const [revisions, setRevisions] = React.useState<Value[]>([initialValue]);\n  const [selectedRevisionIndex, setSelectedRevisionIndex] =\n    React.useState<number>(0);\n  const [value, setValue] = React.useState<Value>(initialValue);\n\n  const selectedRevisionValue = React.useMemo(\n    () => revisions[selectedRevisionIndex],\n    [revisions, selectedRevisionIndex]\n  );\n\n  const saveRevision = () => {\n    setRevisions([...revisions, value]);\n  };\n\n  const editor = usePlateEditor({\n    override: { components: PlateUI },\n    plugins,\n    value: initialValue,\n  });\n\n  const editorRevision = usePlateEditor(\n    {\n      override: { components: PlateUI },\n      plugins,\n      value: selectedRevisionValue,\n    },\n    [selectedRevisionValue]\n  );\n\n  return (\n    <div className=\"flex flex-col gap-3 p-3\">\n      <Button onClick={saveRevision}>Save revision</Button>\n\n      <VersionHistoryPlate\n        onChange={({ value }) => setValue(value)}\n        editor={editor}\n      />\n\n      <label>\n        Revision to compare:\n        <select\n          className=\"rounded-md border p-1\"\n          onChange={(e) => setSelectedRevisionIndex(Number(e.target.value))}\n        >\n          {revisions.map((_, i) => (\n            <option key={i} value={i}>\n              Revision {i + 1}\n            </option>\n          ))}\n        </select>\n      </label>\n\n      <div className=\"grid gap-3 md:grid-cols-2\">\n        <div>\n          <h2>Revision {selectedRevisionIndex + 1}</h2>\n          <VersionHistoryPlate\n            key={selectedRevisionIndex}\n            readOnly\n            editor={editorRevision}\n          />\n        </div>\n\n        <div>\n          <h2>Diff</h2>\n          <Diff current={value} previous={selectedRevisionValue} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "path": "example/version-history-demo.tsx",
+      "target": "components/version-history-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "version-history-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index 353058c98b..678f106a9e 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -19,6 +19,7 @@ import {
   registryItemTypeSchema,
   registrySchema,
 } from "../src/registry/schema"
+import { fixImport } from "./fix-import.mts"
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/r")
 
@@ -28,6 +29,7 @@ const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
   "registry:hook",
   "registry:theme",
   "registry:block",
+  "registry:example",
 ]
 
 const project = new Project({
@@ -73,11 +75,23 @@ export const Index: Record<string, any> = {
       if (item.type === "registry:block") {
         const file = resolveFiles[0]
         const filename = path.basename(file)
-        const raw = await fs.readFile(file, "utf8")
+        let raw: string
+        try {
+          raw = await fs.readFile(file, "utf8")
+        } catch (error) {
+          continue
+        }
         const tempFile = await createTempSourceFile(filename)
         const sourceFile = project.createSourceFile(tempFile, raw, {
           scriptKind: ScriptKind.TSX,
         })
+        
+        const description = sourceFile
+          .getVariableDeclaration("description")
+          ?.getInitializerOrThrow()
+          .asKindOrThrow(SyntaxKind.StringLiteral)
+          .getLiteralValue()
+        item.description = description ?? ""
 
         // Find all imports.
         const imports = new Map<
@@ -268,13 +282,14 @@ export const Index: Record<string, any> = {
       index += `
     "${item.name}": {
       name: "${item.name}",
+      description: "${item.description ?? ""}",
       type: "${item.type}",
       registryDependencies: ${JSON.stringify(item.registryDependencies)},
       files: [${resolveFiles.map((file) => `"${file}"`)}],
       component: React.lazy(() => import("${componentPath}")),
       source: "${sourceFilename}",
-      category: "${item.category}",
-      subcategory: "${item.subcategory}",
+      category: "${item.category ?? ''}",
+      subcategory: "${item.subcategory ?? ''}",
       chunks: [${chunks.map(
         (chunk: any) => `{
         name: "${chunk.name}",
@@ -366,10 +381,17 @@ async function buildStyles(registry: Registry) {
                   }
                 : _file
 
-            const content = await fs.readFile(
-              path.join(process.cwd(), "src/registry", style.name, file.path),
-              "utf8"
-            )
+                let content: string
+                
+            try {
+              content = await fs.readFile(
+                path.join(process.cwd(), "src/registry", style.name, file.path),
+                "utf8"
+              )
+              content = fixImport(content)
+            } catch (error) {
+              return
+            }
 
             const tempFile = await createTempSourceFile(file.path)
             const sourceFile = project.createSourceFile(tempFile, content, {
@@ -380,11 +402,32 @@ async function buildStyles(registry: Registry) {
             sourceFile.getVariableDeclaration("containerClassName")?.remove()
             sourceFile.getVariableDeclaration("description")?.remove()
 
+            let target = file.target
+            if (!target || target === "") {
+              const fileName = file.path.split("/").pop()
+              if (
+                file.type === "registry:block" ||
+                file.type === "registry:component" ||
+                file.type === "registry:example"
+              ) {
+                target = `components/${fileName}`
+              }
+              if (file.type === "registry:ui") {
+                target = `components/plate-ui/${fileName}`
+              }
+              if (file.type === "registry:hook") {
+                target = `hooks/${fileName}`
+              }
+              if (file.type === "registry:lib") {
+                target = `lib/${fileName}`
+              }
+            }
+            
             return {
               path: file.path,
               type: file.type,
               content: sourceFile.getText(),
-              target: file.target,
+              target,
             }
           })
         )
diff --git a/apps/www/scripts/capture-screenshots.mts b/apps/www/scripts/capture-screenshots.mts
new file mode 100644
index 0000000000..5728eec8a6
--- /dev/null
+++ b/apps/www/scripts/capture-screenshots.mts
@@ -0,0 +1,72 @@
+import puppeteer from "puppeteer"
+
+const BLOCKS = [
+  // "demo-sidebar",
+]
+
+try {
+  const browser = await puppeteer.launch({
+    defaultViewport: {
+      width: 1440,
+      height: 900,
+      deviceScaleFactor: 2,
+    },
+  })
+
+  console.log("☀️ Capturing screenshots for light theme")
+  for (const block of BLOCKS) {
+    const pageUrl = `http://localhost:3000/blocks/default/${block}`
+    console.log(`- ${block}`)
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    // Hide Tailwind indicator
+    await page.evaluate(() => {
+      const indicator = document.querySelector("[data-tailwind-indicator]")
+      if (indicator) {
+        indicator.remove()
+      }
+    })
+
+    await page.screenshot({
+      path: `./public/images/blocks/${block}.png`,
+    })
+  }
+
+  console.log("🌙 Capturing screenshots for dark theme")
+  for (const block of BLOCKS) {
+    const pageUrl = `http://localhost:3000/blocks/default/${block}`
+    console.log(`- ${block}`)
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    // Hide Tailwind indicator
+    await page.evaluate(() => {
+      const indicator = document.querySelector("[data-tailwind-indicator]")
+      if (indicator) {
+        indicator.remove()
+      }
+    })
+
+    // Set theme to dark
+    await page.evaluate(() => {
+      localStorage.setItem("theme", "dark")
+    })
+
+    await page.screenshot({
+      path: `./public/images/blocks/${block}-dark.png`,
+    })
+  }
+
+  await browser.close()
+  console.log("✅ Done!")
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
\ No newline at end of file
diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts
new file mode 100644
index 0000000000..19da908e49
--- /dev/null
+++ b/apps/www/scripts/fix-import.mts
@@ -0,0 +1,24 @@
+export function fixImport(content: string) {
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    } else if (type.endsWith("plate-ui")) {
+      return `@/components/plate-ui/${component}`
+    } else if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    } else if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
\ No newline at end of file
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index 05e1589a64..8a65836fb5 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -7,1168 +7,1250 @@ export const Index: Record<string, any> = {
   "default": {
     "editor": {
       name: "editor",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/editor.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/editor.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "block-selection": {
       name: "block-selection",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/block-selection.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/block-selection.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "plate-element": {
       name: "plate-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["block-selection"],
       files: ["registry/default/plate-ui/plate-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/plate-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "cloud": {
-      name: "cloud",
-      type: "registry:ui",
-      registryDependencies: [],
-      files: ["registry/default/plate-ui/cloud.tsx","registry/default/plate-ui/cloud-attachment-element.tsx","registry/default/plate-ui/cloud-image-element.tsx","registry/default/plate-ui/cloud-resize-controls.tsx","registry/default/plate-ui/cloud-status-bar.tsx","registry/default/plate-ui/cloud-toolbar-buttons.tsx"],
-      component: React.lazy(() => import("@/registry/default/plate-ui/cloud.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "code-block-element": {
       name: "code-block-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["command","plate-element"],
       files: ["registry/default/plate-ui/code-block-element.tsx","registry/default/plate-ui/code-block-element.css","registry/default/plate-ui/code-block-combobox.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/code-block-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "column-element": {
       name: "column-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["command","resizable","plate-element"],
       files: ["registry/default/plate-ui/column-element.tsx","registry/default/plate-ui/column-group-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/column-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "color-dropdown-menu": {
       name: "color-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"],
       files: ["registry/default/plate-ui/color-dropdown-menu.tsx","registry/default/plate-ui/color-constants.ts","registry/default/plate-ui/color-dropdown-menu-items.tsx","registry/default/plate-ui/color-input.tsx","registry/default/plate-ui/color-picker.tsx","registry/default/plate-ui/colors-custom.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/color-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "comments-popover": {
       name: "comments-popover",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["popover","avatar"],
       files: ["registry/default/plate-ui/comments-popover.tsx","registry/default/plate-ui/comment-avatar.tsx","registry/default/plate-ui/comment-create-form.tsx","registry/default/plate-ui/comment-item.tsx","registry/default/plate-ui/comment-more-dropdown.tsx","registry/default/plate-ui/comment-reply-items.tsx","registry/default/plate-ui/comment-resolve-button.tsx","registry/default/plate-ui/comment-value.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/comments-popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "draggable": {
       name: "draggable",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["tooltip"],
       files: ["registry/default/plate-ui/draggable.tsx","registry/default/plate-ui/with-draggables.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/draggable.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "emoji-dropdown-menu": {
       name: "emoji-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/emoji-dropdown-menu.tsx","registry/default/plate-ui/emoji-toolbar-dropdown.tsx","registry/default/plate-ui/emoji-icons.tsx","registry/default/plate-ui/emoji-picker.tsx","registry/default/plate-ui/emoji-picker-content.tsx","registry/default/plate-ui/emoji-picker-navigation.tsx","registry/default/plate-ui/emoji-picker-preview.tsx","registry/default/plate-ui/emoji-picker-search-and-clear.tsx","registry/default/plate-ui/emoji-picker-search-bar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/emoji-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "emoji-input-element": {
       name: "emoji-input-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["inline-combobox","plate-element","use-debounce"],
       files: ["registry/default/plate-ui/emoji-input-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/emoji-input-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "align-dropdown-menu": {
       name: "align-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/align-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/align-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "avatar": {
       name: "avatar",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/avatar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/avatar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "blockquote-element": {
       name: "blockquote-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/blockquote-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/blockquote-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "date-element": {
       name: "date-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["calendar","plate-element"],
       files: ["registry/default/plate-ui/date-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/date-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "calendar": {
       name: "calendar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
       files: ["registry/default/plate-ui/calendar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/calendar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "button": {
       name: "button",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "caption": {
       name: "caption",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/caption.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/caption.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "checkbox": {
       name: "checkbox",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/checkbox.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/checkbox.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "code-leaf": {
       name: "code-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/code-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/code-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "code-line-element": {
       name: "code-line-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/code-line-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/code-line-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "code-syntax-leaf": {
       name: "code-syntax-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/code-syntax-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/code-syntax-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "command": {
       name: "command",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dialog"],
       files: ["registry/default/plate-ui/command.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/command.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "comment-leaf": {
       name: "comment-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/comment-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/comment-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "comment-toolbar-button": {
       name: "comment-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/comment-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/comment-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "cursor-overlay": {
       name: "cursor-overlay",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/cursor-overlay.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/cursor-overlay.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "dialog": {
       name: "dialog",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/dialog.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/dialog.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "dropdown-menu": {
       name: "dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "excalidraw-element": {
       name: "excalidraw-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/excalidraw-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/excalidraw-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "fixed-toolbar": {
       name: "fixed-toolbar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/fixed-toolbar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "fixed-toolbar-buttons": {
       name: "fixed-toolbar-buttons",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar","insert-dropdown-menu","mark-toolbar-button","mode-dropdown-menu","turn-into-dropdown-menu"],
       files: ["registry/default/plate-ui/fixed-toolbar-buttons.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar-buttons.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "floating-toolbar": {
       name: "floating-toolbar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/floating-toolbar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "floating-toolbar-buttons": {
       name: "floating-toolbar-buttons",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["mark-toolbar-button","more-dropdown-menu","turn-into-dropdown-menu"],
       files: ["registry/default/plate-ui/floating-toolbar-buttons.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar-buttons.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "heading-element": {
       name: "heading-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/heading-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/heading-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "highlight-leaf": {
       name: "highlight-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/highlight-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/highlight-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "hr-element": {
       name: "hr-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/hr-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/hr-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "image-element": {
       name: "image-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["media-popover","caption","resizable","plate-element"],
       files: ["registry/default/plate-ui/image-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/image-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "indent-list-toolbar-button": {
       name: "indent-list-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/indent-list-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/indent-list-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "indent-toolbar-button": {
       name: "indent-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/indent-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/indent-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "indent-todo-toolbar-button": {
       name: "indent-todo-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/indent-todo-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/indent-todo-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "indent-todo-marker-component": {
       name: "indent-todo-marker-component",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["checkbox"],
       files: ["registry/default/plate-ui/indent-todo-marker-component.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/indent-todo-marker-component.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "inline-combobox": {
       name: "inline-combobox",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/inline-combobox.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/inline-combobox.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "input": {
       name: "input",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/input.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/input.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "insert-dropdown-menu": {
       name: "insert-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/insert-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/insert-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "kbd-leaf": {
       name: "kbd-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/kbd-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/kbd-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "line-height-dropdown-menu": {
       name: "line-height-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar","dropdown-menu"],
       files: ["registry/default/plate-ui/line-height-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/line-height-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "link-element": {
       name: "link-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/link-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/link-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "link-floating-toolbar": {
       name: "link-floating-toolbar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button","input","popover","separator"],
       files: ["registry/default/plate-ui/link-floating-toolbar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/link-floating-toolbar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "link-toolbar-button": {
       name: "link-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/link-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/link-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "list-element": {
       name: "list-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/list-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/list-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "list-toolbar-button": {
       name: "list-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/list-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/list-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "mark-toolbar-button": {
       name: "mark-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/mark-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/mark-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "media-embed-element": {
       name: "media-embed-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["media-popover","caption","resizable","plate-element"],
       files: ["registry/default/plate-ui/media-embed-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/media-embed-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "media-popover": {
       name: "media-popover",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["button","input","popover","separator"],
       files: ["registry/default/plate-ui/media-popover.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/media-popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "media-toolbar-button": {
       name: "media-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/media-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/media-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "mention-element": {
       name: "mention-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element","use-mounted"],
       files: ["registry/default/plate-ui/mention-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/mention-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "mention-input-element": {
       name: "mention-input-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["inline-combobox","plate-element"],
       files: ["registry/default/plate-ui/mention-input-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/mention-input-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "mode-dropdown-menu": {
       name: "mode-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/mode-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/mode-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "more-dropdown-menu": {
       name: "more-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/more-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/more-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "outdent-toolbar-button": {
       name: "outdent-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/outdent-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/outdent-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "paragraph-element": {
       name: "paragraph-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/paragraph-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/paragraph-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "placeholder": {
       name: "placeholder",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["paragraph-element"],
       files: ["registry/default/plate-ui/placeholder.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/placeholder.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "popover": {
       name: "popover",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/popover.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/popover.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "search-highlight-leaf": {
       name: "search-highlight-leaf",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/search-highlight-leaf.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/search-highlight-leaf.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "separator": {
       name: "separator",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/separator.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/separator.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "slash-input-element": {
       name: "slash-input-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["inline-combobox","plate-element"],
       files: ["registry/default/plate-ui/slash-input-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/slash-input-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "table-cell-element": {
       name: "table-cell-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["resizable","plate-element"],
       files: ["registry/default/plate-ui/table-cell-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/table-cell-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "table-dropdown-menu": {
       name: "table-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/table-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/table-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "table-element": {
       name: "table-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","plate-element"],
       files: ["registry/default/plate-ui/table-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/table-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "table-row-element": {
       name: "table-row-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/table-row-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/table-row-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "todo-list-element": {
       name: "todo-list-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["checkbox","plate-element"],
       files: ["registry/default/plate-ui/todo-list-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/todo-list-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "toggle-element": {
       name: "toggle-element",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["plate-element"],
       files: ["registry/default/plate-ui/toggle-element.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/toggle-element.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "toggle-toolbar-button": {
       name: "toggle-toolbar-button",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
       files: ["registry/default/plate-ui/toggle-toolbar-button.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/toggle-toolbar-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "toolbar": {
       name: "toolbar",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["tooltip","separator"],
       files: ["registry/default/plate-ui/toolbar.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/toolbar.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "tooltip": {
       name: "tooltip",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/tooltip.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/tooltip.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "turn-into-dropdown-menu": {
       name: "turn-into-dropdown-menu",
+      description: "",
       type: "registry:ui",
       registryDependencies: ["dropdown-menu","toolbar"],
       files: ["registry/default/plate-ui/turn-into-dropdown-menu.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/turn-into-dropdown-menu.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "resizable": {
       name: "resizable",
+      description: "",
       type: "registry:ui",
       registryDependencies: [],
       files: ["registry/default/plate-ui/resizable.tsx"],
       component: React.lazy(() => import("@/registry/default/plate-ui/resizable.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-default": {
       name: "editor-default",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-default.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-default.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-disabled": {
       name: "editor-disabled",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-disabled.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-disabled.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-ghost": {
       name: "editor-ghost",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-ghost.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-ghost.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-label": {
       name: "editor-label",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-label.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-label.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-text": {
       name: "editor-text",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-text.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-text.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-button": {
       name: "editor-button",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-button.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-button.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editor-form": {
       name: "editor-form",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editor-form.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editor-form.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-editor-default-demo": {
       name: "basic-editor-default-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-editor-default-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-editor-default-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "controlled-demo": {
       name: "controlled-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/controlled-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/controlled-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-editor-styling-demo": {
       name: "basic-editor-styling-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-editor-styling-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-editor-styling-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-editor-handler-demo": {
       name: "basic-editor-handler-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-editor-handler-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-editor-handler-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-editor-value-demo": {
       name: "basic-editor-value-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-editor-value-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-editor-value-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-plugins-components-demo": {
       name: "basic-plugins-components-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-plugins-components-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-plugins-components-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "basic-plugins-default-demo": {
       name: "basic-plugins-default-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/basic-plugins-default-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/basic-plugins-default-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "cloud-demo": {
-      name: "cloud-demo",
-      type: "registry:example",
-      registryDependencies: [],
-      files: ["registry/default/example/cloud-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/cloud-demo.tsx")),
-      source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "editable-voids-demo": {
       name: "editable-voids-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/editable-voids-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/editable-voids-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "find-replace-demo": {
       name: "find-replace-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/find-replace-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/find-replace-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "hundreds-blocks-demo": {
       name: "hundreds-blocks-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/hundreds-blocks-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/hundreds-blocks-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "hundreds-editors-demo": {
       name: "hundreds-editors-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/hundreds-editors-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/hundreds-editors-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "iframe-demo": {
       name: "iframe-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/iframe-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/iframe-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "mode-toggle": {
       name: "mode-toggle",
+      description: "",
       type: "registry:example",
       registryDependencies: undefined,
       files: ["registry/default/example/mode-toggle.tsx"],
       component: React.lazy(() => import("@/registry/default/example/mode-toggle.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "multiple-editors-demo": {
       name: "multiple-editors-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/multiple-editors-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/multiple-editors-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "version-history-demo": {
       name: "version-history-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/version-history-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/version-history-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "playground-demo": {
       name: "playground-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/playground-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/playground-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "preview-md-demo": {
       name: "preview-md-demo",
+      description: "",
       type: "registry:example",
       registryDependencies: [],
       files: ["registry/default/example/preview-md-demo.tsx"],
       component: React.lazy(() => import("@/registry/default/example/preview-md-demo.tsx")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "plate-types": {
       name: "plate-types",
+      description: "",
       type: "registry:lib",
       registryDependencies: undefined,
       files: ["registry/default/lib/plate-types.ts"],
       component: React.lazy(() => import("@/registry/default/lib/plate-types.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "utils": {
       name: "utils",
+      description: "",
       type: "registry:lib",
       registryDependencies: undefined,
       files: ["registry/default/lib/utils.ts"],
       component: React.lazy(() => import("@/registry/default/lib/utils.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "use-debounce": {
       name: "use-debounce",
+      description: "",
       type: "registry:hook",
       registryDependencies: undefined,
       files: ["registry/default/hooks/use-debounce.ts"],
       component: React.lazy(() => import("@/registry/default/hooks/use-debounce.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
     "use-mounted": {
       name: "use-mounted",
+      description: "",
       type: "registry:hook",
       registryDependencies: undefined,
       files: ["registry/default/hooks/use-mounted.ts"],
       component: React.lazy(() => import("@/registry/default/hooks/use-mounted.ts")),
       source: "",
-      category: "undefined",
-      subcategory: "undefined",
+      category: "",
+      subcategory: "",
       chunks: []
     },
   },
diff --git a/apps/www/src/components/block-preview.tsx b/apps/www/src/components/block-preview.tsx
index cb50066238..76f33efa9b 100644
--- a/apps/www/src/components/block-preview.tsx
+++ b/apps/www/src/components/block-preview.tsx
@@ -23,6 +23,7 @@ const block: any = {
   name: 'playground',
 };
 
+// TODO: sync
 export function BlockPreview({
   children,
   className,
diff --git a/apps/www/src/components/block-toolbar.tsx b/apps/www/src/components/block-toolbar.tsx
index ff76e33fcb..8fc1cfc4a0 100644
--- a/apps/www/src/components/block-toolbar.tsx
+++ b/apps/www/src/components/block-toolbar.tsx
@@ -17,6 +17,7 @@ import { BlockCopyButton } from './block-copy-button';
 import { Label } from './ui/label';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
 
+// TODO: sync
 export function BlockToolbar({
   block,
   fullScreen,
diff --git a/apps/www/src/components/component-preview.tsx b/apps/www/src/components/component-preview.tsx
index 9dc1716301..b29e40f8ce 100644
--- a/apps/www/src/components/component-preview.tsx
+++ b/apps/www/src/components/component-preview.tsx
@@ -21,6 +21,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   extractedClassNames?: string;
   hideCode?: boolean;
   padding?: 'md';
+  type?: 'block' | 'component' | 'example';
 }
 
 export function ComponentPreview({
@@ -33,6 +34,7 @@ export function ComponentPreview({
   hideCode = false,
   name,
   padding,
+  type,
   ...props
 }: ComponentPreviewProps) {
   const [config] = useConfig();
@@ -69,6 +71,19 @@ export function ComponentPreview({
     }
   }, [Code]);
 
+  // if (type === 'block') {
+  //   return (
+  //     <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
+  //                <div className="absolute inset-0 hidden w-[1600px] bg-background md:block">
+  //         <iframe
+  //           className="size-full"
+  //           src={`/blocks/${config.style}/${name}`}
+  //         />
+  //       </div>
+  //     </div>
+  //   );
+  // }
+
   return (
     <div
       className={cn('relative my-4 flex flex-col space-y-2', className)}
diff --git a/apps/www/src/components/component-source.tsx b/apps/www/src/components/component-source.tsx
index cbfafa1ca5..69a4775579 100644
--- a/apps/www/src/components/component-source.tsx
+++ b/apps/www/src/components/component-source.tsx
@@ -1,30 +1,56 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
 'use client';
 
 import * as React from 'react';
 
 import { cn } from '@udecode/cn';
 
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
+import { Button } from '@/registry/default/plate-ui/button';
+
 import { CodeBlockWrapper } from './code-block-wrapper';
 
 interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string;
   name?: string;
   open?: boolean;
+  title?: string;
 }
 
 export function ComponentSource({
   children,
   className,
   name,
+  title,
   ...props
 }: ComponentSourceProps) {
+  const displaySrc = title ?? props.src?.split('/').pop() ?? name + '.tsx';
+  const { copyToClipboard } = useCopyToClipboard();
+
   return (
-    <CodeBlockWrapper
-      className={cn('my-6 overflow-hidden rounded-md', className)}
-      expandButtonTitle={name || 'Expand'}
-      {...props}
-    >
-      {children}
-    </CodeBlockWrapper>
+    <div className="mb-6 mt-4">
+      {displaySrc && (
+        <Button
+          size="none"
+          variant="ghost"
+          className="mb-1 w-fit select-auto px-4 py-1 text-sm font-medium text-foreground"
+          onClick={() => {
+            copyToClipboard(displaySrc, {
+              tooltip: 'Copied to clipboard',
+            });
+          }}
+        >
+          {displaySrc}
+        </Button>
+      )}
+
+      <CodeBlockWrapper
+        className={cn('overflow-hidden rounded-md', className)}
+        expandButtonTitle="Expand"
+        {...props}
+      >
+        {children}
+      </CodeBlockWrapper>
+    </div>
   );
 }
diff --git a/apps/www/src/components/tailwind-indicator.tsx b/apps/www/src/components/tailwind-indicator.tsx
index d9d5c663fe..45e1410627 100644
--- a/apps/www/src/components/tailwind-indicator.tsx
+++ b/apps/www/src/components/tailwind-indicator.tsx
@@ -2,7 +2,10 @@ export function TailwindIndicator() {
   if (process.env.NODE_ENV === 'production') return null;
 
   return (
-    <div className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+    <div
+      className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+      data-tailwind-indicator=""
+    >
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
         sm
diff --git a/apps/www/src/components/typography.tsx b/apps/www/src/components/typography.tsx
index d8f83a5cf1..e1721157b3 100644
--- a/apps/www/src/components/typography.tsx
+++ b/apps/www/src/components/typography.tsx
@@ -157,7 +157,10 @@ export const Table = ({
 }: React.HTMLAttributes<HTMLTableElement>) => (
   <div className="my-6 w-full overflow-y-auto rounded-lg">
     <table
-      className={cn('w-full overflow-hidden rounded-lg', className)}
+      className={cn(
+        'relative w-full overflow-hidden text-sm after:absolute after:inset-0 after:rounded-lg after:ring-1 after:ring-border',
+        className
+      )}
       {...props}
     />
   </div>
@@ -167,7 +170,7 @@ export const TR = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLTableRowElement>) => (
-  <tr className={cn('m-0 border-t p-0', className)} {...props} />
+  <tr className={cn('m-0 border-t', className)} {...props} />
 );
 
 export const TH = ({
diff --git a/apps/www/src/lib/_blocks.ts b/apps/www/src/lib/_blocks.ts
index b6a0cc008f..9b9aec2f6d 100644
--- a/apps/www/src/lib/_blocks.ts
+++ b/apps/www/src/lib/_blocks.ts
@@ -32,6 +32,7 @@ export async function getAllBlockIds(
   return blocks.map((block) => block.name);
 }
 
+// TODO: sync
 export async function getBlock(
   name: string,
   style: Style['name'] = DEFAULT_BLOCKS_STYLE
diff --git a/apps/www/src/lib/highlighter-theme.json b/apps/www/src/lib/highlighter-theme.json
deleted file mode 100644
index d1a46c3b7d..0000000000
--- a/apps/www/src/lib/highlighter-theme.json
+++ /dev/null
@@ -1,380 +0,0 @@
-{
-  "name": "Lambda Studio — Blackout",
-  "semanticHighlighting": true,
-  "colors": {
-    "editorLink.activeForeground": "#ca8a0488",
-    "foreground": "#fff8",
-    "button.background": "#fff",
-    "button.foreground": "#000",
-    "button.hoverBackground": "#fffb",
-    "list.highlightForeground": "#fff",
-    "textLink.foreground": "#fff",
-    "scrollbar.shadow": "#000",
-    "textLink.activeForeground": "#fff8",
-    "editor.lineHighlightBackground": "#8881",
-    "editor.lineHighlightBorder": "#8882",
-    "editorCursor.foreground": "#fff",
-    "editor.findMatchBackground": "#fff8",
-    "editor.findMatchHighlightBackground": "#fff2",
-    "list.activeSelectionForeground": "#fff",
-    "list.focusForeground": "#fff",
-    "list.hoverForeground": "#fff",
-    "list.inactiveSelectionForeground": "#fff",
-    "list.inactiveSelectionBackground": "#000",
-    "list.focusBackground": "#000",
-    "list.focusAndSelectionOutline": "#000",
-    "list.focusHighlightForeground": "#fff",
-    "list.hoverBackground": "#000",
-    "list.focusOutline": "#000",
-    "list.activeSelectionBackground": "#000",
-    "editorIndentGuide.background": "#fff2",
-    "editor.background": "#000",
-    "editor.foreground": "#fff",
-    "editor.foldBackground": "#000",
-    "editor.hoverHighlightBackground": "#000",
-    "editor.selectionBackground": "#8888",
-    "editor.inactiveSelectionBackground": "#8882",
-    "gitDecoration.modifiedResourceForeground": "#fff",
-    "gitDecoration.untrackedResourceForeground": "#a7cb7b",
-    "gitDecoration.conflictingResourceForeground": "#ca8a04",
-    "gitDecoration.deletedResourceForeground": "#c97b89",
-    "listFilterWidget.background": "#000",
-    "input.background": "#fff1",
-    "titleBar.activeForeground": "#fff",
-    "editorWidget.background": "#000",
-    "editorGutter.background": "#000",
-    "debugToolBar.background": "#000",
-    "commandCenter.background": "#000",
-    "sideBarSectionHeader.background": "#000",
-    "focusBorder": "#fff8",
-    "titleBar.activeBackground": "#000",
-    "titleBar.inactiveBackground": "#000",
-    "breadcrumb.background": "#000",
-    "activityBar.background": "#000",
-    "activityBar.foreground": "#fff8",
-    "panel.background": "#000",
-    "sideBar.background": "#000",
-    "sideBarTitle.foreground": "#fff8",
-    "tab.hoverBackground": "#000",
-    "terminal.background": "#000",
-    "statusBar.background": "#000",
-    "statusBar.foreground": "#fff8",
-    "selection.background": "#fff2",
-    "editorPane.background": "#000",
-    "badge.background": "#000",
-    "banner.background": "#000",
-    "menu.background": "#000",
-    "activityBarBadge.background": "#000",
-    "activityBarBadge.foreground": "#fff8",
-    "editorLineNumber.foreground": "#fff2",
-    "editorLineNumber.activeForeground": "#fff8",
-    "statusBarItem.errorBackground": "#f43f5e"
-  },
-  "semanticTokenColors": {
-    "comment": {
-      "foreground": "#fff4"
-    },
-    "keyword": {
-      "foreground": "#fff8"
-    },
-    "string": {
-      "foreground": "#fff8"
-    },
-    "selfKeyword": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "method.declaration": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "method.definition": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "method": {
-      "foreground": "#fff",
-      "bold": false
-    },
-    "function.declaration": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "function.definition": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "function": {
-      "foreground": "#fff",
-      "bold": false
-    },
-    "property": {
-      "foreground": "#fff"
-    },
-    "enumMember": {
-      "foreground": "#fff8",
-      "bold": false
-    },
-    "enum": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "boolean": {
-      "foreground": "#fff8"
-    },
-    "number": {
-      "foreground": "#fff8"
-    },
-    "type": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "typeAlias": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "class": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "selfTypeKeyword": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "builtinType": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "interface": {
-      "foreground": "#fff8",
-      "bold": false
-    },
-    "typeParameter": {
-      "foreground": "#fff",
-      "bold": true
-    },
-    "lifetime": {
-      "foreground": "#fff8",
-      "italic": false,
-      "bold": false
-    },
-    "namespace": {
-      "foreground": "#fff"
-    },
-    "macro": {
-      "foreground": "#fff",
-      "bold": false
-    },
-    "decorator": {
-      "foreground": "#fff",
-      "bold": false
-    },
-    "builtinAttribute": {
-      "foreground": "#fff",
-      "bold": false
-    },
-    "generic.attribute": {
-      "foreground": "#fff"
-    },
-    "derive": {
-      "foreground": "#fff"
-    },
-    "operator": {
-      "foreground": "#fff8"
-    },
-    "variable": {
-      "foreground": "#fff"
-    },
-    "variable.readonly": {
-      "foreground": "#fff8"
-    },
-    "parameter": {
-      "foreground": "#fff"
-    },
-    "variable.mutable": {
-      "underline": true
-    },
-    "parameter.mutable": {
-      "underline": true
-    },
-    "selfKeyword.mutable": {
-      "underline": true
-    },
-    "variable.constant": {
-      "foreground": "#fff8"
-    },
-    "struct": {
-      "foreground": "#fff",
-      "bold": true
-    }
-  },
-  "tokenColors": [
-    {
-      "name": "Fallback Operator",
-      "scope": ["keyword.operator"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "Fallback keywords",
-      "scope": [
-        "storage.type.ts",
-        "keyword",
-        "keyword.other",
-        "keyword.control",
-        "storage.type",
-        "storage.modifier"
-      ],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "Fallback strings",
-      "scope": ["string"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "Fallback JSON Properties",
-      "scope": ["support.type.property-name.json"],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "Fallback string variables",
-      "scope": ["string variable", "string meta.interpolation"],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "Fallback comments",
-      "scope": ["comment"],
-      "settings": {
-        "foreground": "#fff4"
-      }
-    },
-    {
-      "name": "Fallback constants",
-      "scope": ["constant"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "Fallback self/this",
-      "scope": ["variable.language.this"],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "Fallback types",
-      "scope": [
-        "entity.other.alias",
-        "source.php support.class",
-        "entity.name.type",
-        "meta.function-call support.class",
-        "keyword.other.type",
-        "entity.other.inherited-class"
-      ],
-      "settings": {
-        "foreground": "#fff",
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "name": "Fallback method calls",
-      "scope": ["meta.method-call entity.name.function"],
-      "settings": {
-        "foreground": "#fff",
-        "fontStyle": ""
-      }
-    },
-    {
-      "name": "Fallback function calls",
-      "scope": [
-        "meta.function-call entity.name.function",
-        "meta.function-call support.function",
-        "meta.function.call entity.name.function"
-      ],
-      "settings": {
-        "foreground": "#fff",
-        "fontStyle": ""
-      }
-    },
-    {
-      "name": "Fallback enums & constants",
-      "scope": ["constant.enum", "constant.other"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "Fallback Properties & func arguments",
-      "scope": [
-        "variable.other.property",
-        "entity.name.goto-label",
-        "entity.name.variable.parameter"
-      ],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "Fallback functions & methods declarations",
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "support.function.constructor",
-        "entity.name.function meta.function-call meta.method-call"
-      ],
-      "settings": {
-        "foreground": "#fff",
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "name": "HTML Tags",
-      "scope": [
-        "meta.tag entity.name.tag.html",
-        "entity.name.tag.template.html"
-      ],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "HTML Attributes",
-      "scope": ["entity.other.attribute-name.html"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    },
-    {
-      "name": "HTML Custom Tag",
-      "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "HTML Keywords",
-      "scope": ["text.html keyword"],
-      "settings": {
-        "foreground": "#fff"
-      }
-    },
-    {
-      "name": "Punctuations",
-      "scope": ["punctuation", "meta.brace"],
-      "settings": {
-        "foreground": "#fff8"
-      }
-    }
-  ]
-}
diff --git a/apps/www/src/lib/plate/demo/values/cloudValue.tsx b/apps/www/src/lib/plate/demo/values/cloudValue.tsx
deleted file mode 100644
index db5335bf78..0000000000
--- a/apps/www/src/lib/plate/demo/values/cloudValue.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
-
-jsx;
-
-export const cloudValue: any = (
-  <fragment>
-    <hh2>☁️ Plate Cloud Uploads - Images and Attachments</hh2>
-    <hp>
-      Plate Cloud is Plate's official cloud upload service with support for
-      attachments, images and image resizing. Includes server-side image
-      resizing which delivers optimized images to each user. Supports high DPI
-      files for retina devices and smaller files for faster delivery for
-      non-high DPI devices.
-    </hp>
-    <hp>
-      To upload a file, paste any file into this editor, or drag and drop the
-      file into the editor. Images are automatically inserted as images and
-      other files are inserted as attachments.
-    </hp>
-    <hh3>Resizing Images</hh3>
-    <hp>
-      Click an image and it will display a resize handle that you can drag to
-      resize. Images are resized on the server saving bandwidth and improving
-      download times for your users.
-    </hp>
-    <hh3>Local Setup</hh3>
-    <hp>
-      If you are running the examples locally, get a free Portive API Key from
-      https://portive.com/, add a file at `/apps/www/.env.local` with one line
-      in it like `PORTIVE_API_KEY=PRTV_xxxx_xxxx` substituting your API key for
-      `PRTV_xxxx_xxxx`.
-    </hp>
-    <hh3>Cloud Images</hh3>
-    <hp>Samples of cloud images in various upload states.</hp>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="https://files.portive.com/f/demo/6hndj3bdag7eqbpb2794s--1920x1440.jpg"
-      width={160}
-    >
-      <htext />
-    </element>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="#image-none"
-      width={160}
-    >
-      <htext />
-    </element>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="#image-half"
-      width={160}
-    >
-      <htext />
-    </element>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="#image-full"
-      width={160}
-    >
-      <htext />
-    </element>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="#image-error"
-      width={160}
-    >
-      <htext />
-    </element>
-    <element
-      bytes={654_196}
-      height={120}
-      maxHeight={1440}
-      maxWidth={1920}
-      type="cloud_image"
-      url="#image-state-not-found"
-      width={160}
-    >
-      <htext />
-    </element>
-    <hh3>Cloud Attachments</hh3>
-    <hp>Samples of cloud attachments in various upload states.</hp>
-    <element
-      bytes={8}
-      filename="hello.txt"
-      type="cloud_attachment"
-      url="https://gist.githubusercontent.com/prabansal/115387/raw/0e5911c791c03f2ffb9708d98cac70dd2c1bf0ba/HelloWorld.txt"
-    >
-      <htext />
-    </element>
-    <element bytes={1024} filename="hello.txt" type="cloud_attachment" url="#a">
-      <htext />
-    </element>
-    <element bytes={1024} filename="hello.txt" type="cloud_attachment" url="#b">
-      <htext />
-    </element>
-    <element bytes={1024} filename="hello.txt" type="cloud_attachment" url="#c">
-      <htext />
-    </element>
-    <element bytes={1024} filename="hello.txt" type="cloud_attachment" url="#d">
-      <htext />
-    </element>
-    <element bytes={1024} filename="hello.txt" type="cloud_attachment" url="#e">
-      <htext />
-    </element>
-    <element
-      bytes={1024}
-      filename="hello.txt"
-      type="cloud_attachment"
-      url="#state-not-found"
-    >
-      <htext />
-    </element>
-  </fragment>
-);
diff --git a/apps/www/src/registry/default/example/cloud-demo.tsx b/apps/www/src/registry/default/example/cloud-demo.tsx
deleted file mode 100644
index 2bb2e9102f..0000000000
--- a/apps/www/src/registry/default/example/cloud-demo.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';
-import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';
-import {
-  CloudAttachmentPlugin,
-  CloudImagePlugin,
-  CloudPlugin,
-} from '@udecode/plate-cloud';
-import { Plate } from '@udecode/plate-common/react';
-import { usePlateEditor } from '@udecode/plate-core/react';
-
-import { uploadStoreInitialValue } from '@/plate/demo/cloud/uploadStoreInitialValue';
-import { editableProps } from '@/plate/demo/editableProps';
-import { PlateUI } from '@/plate/demo/plate-ui';
-import { cloudValue } from '@/plate/demo/values/cloudValue';
-import { CloudAttachmentElement } from '@/registry/default/plate-ui/cloud-attachment-element';
-import { CloudImageElement } from '@/registry/default/plate-ui/cloud-image-element';
-import { CloudToolbarButtons } from '@/registry/default/plate-ui/cloud-toolbar-buttons';
-import { Editor } from '@/registry/default/plate-ui/editor';
-import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
-
-export default function CloudDemo() {
-  const editor = usePlateEditor({
-    override: { components: PlateUI },
-    plugins: [
-      BasicElementsPlugin,
-      BasicMarksPlugin,
-      CloudPlugin.configure({
-        options: {
-          authToken:
-            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InB1UFoyZTdlN0tUVzh0MjQifQ.eyJpYXQiOjE2Njg0NTUxMDksImV4cCI6MTcwMDAxMjcwOX0.xEznN3Wl6GqN57wsDGq0Z6giI4TvU32gvmMJUzcg2No',
-          uploadStoreInitialValue,
-        },
-      }),
-      CloudAttachmentPlugin.withComponent(CloudAttachmentElement),
-      CloudImagePlugin.configure({
-        options: {
-          maxInitialHeight: 320,
-          maxInitialWidth: 320,
-          maxResizeWidth: 720,
-          minResizeWidth: 100,
-        },
-      }).withComponent(CloudImageElement),
-    ],
-    value: cloudValue,
-  });
-
-  return (
-    <Plate editor={editor}>
-      <FixedToolbar>
-        <CloudToolbarButtons />
-      </FixedToolbar>
-
-      <Editor className="mt-2" {...editableProps} />
-    </Plate>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/button.tsx b/apps/www/src/registry/default/plate-ui/button.tsx
index c118b04bd3..d01df9d609 100644
--- a/apps/www/src/registry/default/plate-ui/button.tsx
+++ b/apps/www/src/registry/default/plate-ui/button.tsx
@@ -5,7 +5,7 @@ import { cn, withRef } from '@udecode/cn';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     defaultVariants: {
       size: 'default',
diff --git a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx
deleted file mode 100644
index 90e071c35a..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  type TCloudAttachmentElement,
-  useCloudAttachmentElementState,
-} from '@udecode/plate-cloud';
-import {
-  type PlateElementProps,
-  PlateElement,
-} from '@udecode/plate-common/react';
-
-import { Icons } from '@/components/icons';
-
-import { StatusBar } from './cloud-status-bar';
-
-export interface CloudAttachmentElementProps
-  extends PlateElementProps<TCloudAttachmentElement> {}
-
-export function CloudAttachmentElement({
-  className,
-  ...props
-}: CloudAttachmentElementProps) {
-  const { children, element } = props;
-
-  const { focused, selected, upload } = useCloudAttachmentElementState({
-    element,
-  });
-
-  return (
-    <PlateElement
-      className={cn(
-        'relative my-4 flex h-10 max-w-sm items-center gap-2 rounded-lg border border-border bg-background p-4',
-        focused && selected && 'border-blue-400 shadow-[0_0_1px_3px_#60a5fa]',
-        className
-      )}
-      draggable
-      {...props}
-    >
-      <div className="shrink-0 text-muted-foreground" contentEditable={false}>
-        <Icons.attachment height={24} width={24} />
-      </div>
-      <div className="grow" contentEditable={false}>
-        <div className="text-base">{element.filename}</div>
-        <StatusBar upload={upload}>
-          <div className="text-sm text-muted-foreground">
-            {element.bytes} bytes
-          </div>
-        </StatusBar>
-      </div>
-      <div
-        className="ml-4 size-8 shrink-0 duration-200"
-        contentEditable={false}
-      >
-        {upload.status === 'success' && (
-          <a href={element.url} rel="noreferrer" target="_blank">
-            <Icons.downloadCloud
-              className="cursor-pointer text-muted-foreground hover:text-foreground"
-              height={24}
-              width={24}
-            />
-          </a>
-        )}
-      </div>
-      {children}
-    </PlateElement>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx
deleted file mode 100644
index 539c45d408..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@udecode/cn';
-import {
-  type TCloudImageElement,
-  useCloudImageElementState,
-} from '@udecode/plate-cloud';
-import {
-  type PlateElementProps,
-  PlateElement,
-} from '@udecode/plate-common/react';
-
-import { ResizeControls } from './cloud-resize-controls';
-import { StatusBar } from './cloud-status-bar';
-
-export interface CloudImageElementProps
-  extends PlateElementProps<TCloudImageElement> {}
-
-export function CloudImageElement({
-  className,
-  ...props
-}: CloudImageElementProps) {
-  const { children, element } = props;
-
-  const { focused, selected, setSize, size, src, srcSet, upload } =
-    useCloudImageElementState({ element });
-
-  return (
-    <PlateElement
-      className={cn('relative my-4', className)}
-      draggable
-      {...props}
-    >
-      <span
-        style={{
-          display: 'inline-block',
-          /**
-           * NOTE: This code pretty much needs to be this way or things stop
-           * working so this cannot be overrided in the `.styles.ts` file.
-           */
-          position: 'relative',
-          /** Disable user select. We use our own selection display. */
-          userSelect: 'none',
-          /**
-           * This is required so that we don't get an extra gap at the bottom.
-           * When display is 'inline-block' we get some extra space at the
-           * bottom for the descenders because the content is expected to
-           * co-exist with text.
-           *
-           * Setting vertical-align to top, bottom or middle fixes this because
-           * it is no longer baseline which causes the issue.
-           *
-           * This is usually an issue with 'img' but also affects this scenario.
-           *
-           * https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
-           *
-           * Also, make sure that <img> on the inside is display: 'block'.
-           */
-          verticalAlign: 'top',
-        }}
-        contentEditable={false}
-      >
-        {src === '' ? (
-          <div
-            className={cn(
-              'block rounded-lg',
-              focused && selected && 'shadow-[0_0_1px_3px_#60a5fa]'
-            )}
-            style={{
-              background: '#e0e0e0',
-              height: size.height,
-              width: size.width,
-            }}
-          />
-        ) : (
-          <img
-            className={cn(
-              'block rounded-lg',
-              focused && selected && 'shadow-[0_0_1px_3px_#60a5fa]'
-            )}
-            alt=""
-            height={size.height}
-            src={src}
-            srcSet={srcSet}
-            width={size.width}
-          />
-        )}
-        <div className="absolute inset-x-2 top-1/2 -mt-2">
-          <StatusBar upload={upload} />
-        </div>
-        {selected && focused && (
-          <ResizeControls size={size} element={element} setSize={setSize} />
-        )}
-      </span>
-      {children}
-    </PlateElement>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/cloud-resize-controls.tsx b/apps/www/src/registry/default/plate-ui/cloud-resize-controls.tsx
deleted file mode 100644
index 7b07f6a8c7..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud-resize-controls.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-'use client';
-
-import React, {
-  type Dispatch,
-  type SetStateAction,
-  useCallback,
-  useRef,
-  useState,
-} from 'react';
-
-import { resizeInWidth } from '@portive/client';
-import {
-  type TCloudImageElement,
-  CloudImagePlugin,
-} from '@udecode/plate-cloud';
-import { setNodes } from '@udecode/plate-common';
-import { findNodePath, useEditorRef } from '@udecode/plate-common/react';
-
-type ImageSize = { height: number; width: number };
-
-type SetImageSize = Dispatch<SetStateAction<ImageSize>>;
-
-/** The resize label that shows the width/height of the image */
-function ResizeLabel({ size }: { size: { height: number; width: number } }) {
-  const isBelow = size.width < 100 || size.height < 100;
-  const bottom = isBelow ? -24 : 4;
-
-  return (
-    <div
-      style={{
-        background: '#404040',
-        borderRadius: 3,
-        bottom,
-        boxShadow: '0px 0px 2px 1px rgba(255, 255, 255, 0.5)',
-        color: 'white',
-        font: '10px/20px sans-serif',
-        left: 4,
-        minWidth: 50,
-        padding: '0 7px',
-        position: 'absolute',
-        textAlign: 'center',
-        transition: 'bottom 250ms',
-        zIndex: 100,
-      }}
-    >
-      {size.width} &times; {size.height}
-    </div>
-  );
-}
-
-/** The little divets on the resize handle bar. */
-const barStyle = {
-  background: 'rgba(255,255,255,0.75)',
-  height: 16,
-  position: 'absolute',
-  top: 8,
-  width: 1,
-} as const;
-
-/** The handle used to drag resize an image */
-function ResizeHandles({
-  onMouseDown,
-}: {
-  onMouseDown: React.MouseEventHandler;
-}) {
-  return (
-    <>
-      {/* Invisible Handle */}
-      <div
-        style={{
-          background: 'rgba(127,127,127,0.01)',
-          bottom: 0,
-          cursor: 'ew-resize',
-          position: 'absolute',
-          right: -8,
-          top: 0,
-          width: 16,
-        }}
-        onMouseDown={onMouseDown}
-      >
-        {/* Visible Handle */}
-        <div
-          style={{
-            background: 'DodgerBlue',
-            borderRadius: 4,
-            height: 32,
-            left: 0,
-            marginTop: -16,
-            position: 'absolute',
-            top: '50%',
-            width: 16,
-          }}
-        >
-          <div style={{ ...barStyle, left: 3.5 }} />
-          <div style={{ ...barStyle, left: 7.5 }} />
-          <div style={{ ...barStyle, left: 11.5 }} />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function ResizeControls({
-  element,
-  setSize,
-  size,
-}: {
-  element: TCloudImageElement;
-  setSize: SetImageSize;
-  size: ImageSize;
-}) {
-  const editor = useEditorRef();
-  const [isResizing, setIsResizing] = useState(false);
-
-  const { maxResizeWidth, minResizeWidth } =
-    editor.getOptions(CloudImagePlugin);
-
-  const currentSizeRef = useRef<{ height: number; width: number }>();
-
-  const onMouseDown = useCallback(
-    (mouseDownEvent: React.MouseEvent) => {
-      setIsResizing(true);
-      const startX = mouseDownEvent.clientX;
-      const startWidth = size.width;
-      const minWidth = minResizeWidth;
-      const maxWidth = Math.min(element.maxWidth, maxResizeWidth);
-
-      /**
-       * Handle resize dragging through an event handler on mouseMove on the
-       * document.
-       */
-      function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {
-        mouseMoveEvent.preventDefault();
-        mouseMoveEvent.stopPropagation();
-        /** Calculate the proposed width based on drag position */
-        const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;
-
-        /** Constrain the proposed with between min, max and original width */
-        const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));
-
-        const currentSize = resizeInWidth(
-          { height: element.maxHeight, width: element.maxWidth },
-          nextWidth
-        );
-
-        currentSizeRef.current = currentSize;
-        setSize(currentSize);
-      }
-
-      const originalCursor = document.body.style.cursor;
-
-      /** When the user releases the mouse, remove all the event handlers */
-      function onDocumentMouseUp() {
-        setIsResizing(false);
-        document.removeEventListener('mousemove', onDocumentMouseMove);
-        document.removeEventListener('mouseup', onDocumentMouseUp);
-        document.body.style.cursor = originalCursor;
-
-        const at = findNodePath(editor, element);
-
-        if (!currentSizeRef.current) return;
-
-        setNodes<TCloudImageElement>(editor, currentSizeRef.current, { at });
-      }
-
-      /** Attach document event listeners */
-      document.addEventListener('mousemove', onDocumentMouseMove);
-      document.addEventListener('mouseup', onDocumentMouseUp);
-
-      /**
-       * While dragging, we want the cursor to be `ew-resize` (left-right arrow)
-       * even if the cursor happens to not be exactly on the handle at the
-       * moment due to a delay in the cursor moving to a location and the image
-       * resizing to it.
-       *
-       * Also, image has max width/height and the cursor can fall outside of it.
-       */
-      document.body.style.cursor = 'ew-resize';
-    },
-    [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]
-  );
-
-  if (element.width < minResizeWidth) return null;
-
-  return (
-    <>
-      {isResizing ? <ResizeLabel size={size} /> : null}
-      <ResizeHandles onMouseDown={onMouseDown} />
-    </>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/cloud-status-bar.tsx b/apps/www/src/registry/default/plate-ui/cloud-status-bar.tsx
deleted file mode 100644
index d9cd891256..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud-status-bar.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client';
-
-import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
-
-import type { Upload, UploadProgress } from '@udecode/plate-cloud';
-
-import { cn } from '@udecode/cn';
-
-export function ProgressBar({
-  className,
-  upload,
-  ...props
-}: {
-  upload: UploadProgress;
-} & HTMLAttributes<HTMLDivElement>) {
-  const [width, setWidth] = useState<number | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current) setWidth(ref.current.offsetWidth);
-  }, []);
-
-  /**
-   * This formula looks a little funny because we want the `0` value of the
-   * progress bar to have a width that is still the height of the progress bar.
-   *
-   * This is for a few reasons:
-   *
-   * 1. We want the zero point to start with the progress bar being a circle
-   * 2. If we want rounded edges, if the width is shorter than the height, we get
-   *    an oval instead of a circle
-   * 3. The halfway point looks visually wrong because of the circle progress bar
-   *    when it is technically at the halfway point.
-   */
-  const progressWidth =
-    width == null
-      ? 0
-      : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;
-
-  return (
-    <div
-      ref={ref}
-      className={cn('h-4 rounded-lg bg-gray-100 shadow-md', className)}
-      {...props}
-    >
-      <div
-        className="h-4 rounded-lg bg-blue-500 duration-100"
-        style={{
-          width: progressWidth,
-        }}
-      />
-    </div>
-  );
-}
-
-export function FailBar({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'h-4 rounded-lg border bg-red-700 text-center text-xs font-bold uppercase leading-tight text-white shadow-md',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export function StatusBar(props: {
-  upload: Upload;
-  children?: React.ReactNode;
-}) {
-  const { children, upload } = props;
-
-  switch (upload.status) {
-    case 'progress': {
-      return <ProgressBar upload={upload} />;
-    }
-    case 'error': {
-      return <FailBar>Upload Failed</FailBar>;
-    }
-    case 'not-found': {
-      return <FailBar>Uploading...</FailBar>;
-    }
-    case 'success': {
-      return children || null;
-    }
-    default: {
-      throw new Error(`Should be unreachable`);
-    }
-  }
-}
diff --git a/apps/www/src/registry/default/plate-ui/cloud-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/cloud-toolbar-buttons.tsx
deleted file mode 100644
index 54151bfee6..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud-toolbar-buttons.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { CloudPlugin } from '@udecode/plate-cloud';
-import { useEditorPlugin } from '@udecode/plate-common/react';
-
-const buttonStyle: React.CSSProperties = {
-  background: '#f0f0f0',
-  border: 'none',
-  cursor: 'pointer',
-  marginRight: 4,
-  padding: 8,
-};
-
-export function CloudToolbarButtons() {
-  const { api, editor } = useEditorPlugin(CloudPlugin);
-
-  const getSaveValue = () => {
-    console.info('editor.children', editor.children);
-    console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());
-  };
-
-  const finishUploads = async () => {
-    await api.cloud.finishUploads();
-  };
-
-  return (
-    <>
-      <button style={buttonStyle} onClick={getSaveValue} type="button">
-        Get Save Value
-      </button>
-      <button style={buttonStyle} onClick={finishUploads} type="button">
-        Await Finish Uploads
-      </button>
-      <span>
-        Note: After clicking a button, output will be shown in console.
-      </span>
-    </>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/cloud.tsx b/apps/www/src/registry/default/plate-ui/cloud.tsx
deleted file mode 100644
index bfea4d3178..0000000000
--- a/apps/www/src/registry/default/plate-ui/cloud.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './cloud-attachment-element';
-
-export * from './cloud-image-element';
-
-export * from './cloud-resize-controls';
-
-export * from './cloud-status-bar';
-
-export * from './cloud-toolbar-buttons';
diff --git a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
index ba3ae7b40f..8374f0440e 100644
--- a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
@@ -78,6 +78,7 @@ export const DropdownMenuContent = withRef<
 const menuItemVariants = cva(
   cn(
     'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
   ),
   {
diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
index cab7b60df8..01f8277b33 100644
--- a/apps/www/src/registry/registry-examples.ts
+++ b/apps/www/src/registry/registry-examples.ts
@@ -85,12 +85,6 @@ export const examples: Registry = [
     registryDependencies: [],
     type: 'registry:example',
   },
-  {
-    files: ['example/cloud-demo.tsx'],
-    name: 'cloud-demo',
-    registryDependencies: [],
-    type: 'registry:example',
-  },
   {
     files: ['example/editable-voids-demo.tsx'],
     name: 'editable-voids-demo',
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
index 3535749ded..7678e8fe36 100644
--- a/apps/www/src/registry/registry-ui.ts
+++ b/apps/www/src/registry/registry-ui.ts
@@ -22,20 +22,6 @@ export const ui: Registry = [
     registryDependencies: ['block-selection'],
     type: 'registry:ui',
   },
-  {
-    dependencies: ['@udecode/plate-cloud'],
-    files: [
-      'plate-ui/cloud.tsx',
-      'plate-ui/cloud-attachment-element.tsx',
-      'plate-ui/cloud-image-element.tsx',
-      'plate-ui/cloud-resize-controls.tsx',
-      'plate-ui/cloud-status-bar.tsx',
-      'plate-ui/cloud-toolbar-buttons.tsx',
-    ],
-    name: 'cloud',
-    registryDependencies: [],
-    type: 'registry:ui',
-  },
   {
     dependencies: ['@udecode/plate-code-block'],
     files: [
diff --git a/yarn.lock b/yarn.lock
index 1a00484f75..8a550f3e79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3199,6 +3199,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@puppeteer/browsers@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@puppeteer/browsers@npm:2.4.0"
+  dependencies:
+    debug: "npm:^4.3.6"
+    extract-zip: "npm:^2.0.1"
+    progress: "npm:^2.0.3"
+    proxy-agent: "npm:^6.4.0"
+    semver: "npm:^7.6.3"
+    tar-fs: "npm:^3.0.6"
+    unbzip2-stream: "npm:^1.4.3"
+    yargs: "npm:^17.7.2"
+  bin:
+    browsers: lib/cjs/main-cli.js
+  checksum: 10c0/62227a4e3104d8bc8fbd6cd008ff82d63d8b8747ee6bba544d905c86d86b0ff005a1dfb6abbe1db80723733f338a55dd5719b12333f4332c0c7a1f6b007ed660
+  languageName: node
+  linkType: hard
+
 "@radix-ui/colors@npm:3.0.0":
   version: 3.0.0
   resolution: "@radix-ui/colors@npm:3.0.0"
@@ -5256,6 +5274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tootallnate/quickjs-emscripten@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "@tootallnate/quickjs-emscripten@npm:0.23.0"
+  checksum: 10c0/2a939b781826fb5fd3edd0f2ec3b321d259d760464cf20611c9877205aaca3ccc0b7304dea68416baa0d568e82cd86b17d29548d1e5139fa3155a4a86a2b4b49
+  languageName: node
+  linkType: hard
+
 "@ts-morph/common@npm:~0.19.0":
   version: 0.19.0
   resolution: "@ts-morph/common@npm:0.19.0"
@@ -5850,6 +5875,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/yauzl@npm:^2.9.1":
+  version: 2.10.3
+  resolution: "@types/yauzl@npm:2.10.3"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10c0/f1b7c1b99fef9f2fe7f1985ef7426d0cebe48cd031f1780fcdc7451eec7e31ac97028f16f50121a59bcf53086a1fc8c856fd5b7d3e00970e43d92ae27d6b43dc
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
   version: 7.2.0
   resolution: "@typescript-eslint/eslint-plugin@npm:7.2.0"
@@ -7706,6 +7740,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types@npm:^0.13.4":
+  version: 0.13.4
+  resolution: "ast-types@npm:0.13.4"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10c0/3a1a409764faa1471601a0ad01b3aa699292991aa9c8a30c7717002cabdf5d98008e7b53ae61f6e058f757fc6ba965e147967a93c13e62692c907d79cfb245f8
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:^0.16.1":
   version: 0.16.1
   resolution: "ast-types@npm:0.16.1"
@@ -7812,6 +7855,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"b4a@npm:^1.6.4":
+  version: 1.6.7
+  resolution: "b4a@npm:1.6.7"
+  checksum: 10c0/ec2f004d1daae04be8c5a1f8aeb7fea213c34025e279db4958eb0b82c1729ee25f7c6e89f92a5f65c8a9cf2d017ce27e3dda912403341d1781bd74528a4849d4
+  languageName: node
+  linkType: hard
+
 "babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -7922,6 +7972,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bare-events@npm:^2.0.0, bare-events@npm:^2.2.0":
+  version: 2.5.0
+  resolution: "bare-events@npm:2.5.0"
+  checksum: 10c0/afbeec4e8be4d93fb4a3be65c3b4a891a2205aae30b5a38fafd42976cc76cf30dad348963fe330a0d70186e15dc507c11af42c89af5dddab2a54e5aff02e2896
+  languageName: node
+  linkType: hard
+
+"bare-fs@npm:^2.1.1":
+  version: 2.3.5
+  resolution: "bare-fs@npm:2.3.5"
+  dependencies:
+    bare-events: "npm:^2.0.0"
+    bare-path: "npm:^2.0.0"
+    bare-stream: "npm:^2.0.0"
+  checksum: 10c0/ff18cc9be7c557c38e0342681ba3672ae4b01e5696b567d4035e5995255dc6bc7d4df88ed210fa4d3eb940eb29512e924ebb42814c87fc59a2bee8cf83b7c2f9
+  languageName: node
+  linkType: hard
+
+"bare-os@npm:^2.1.0":
+  version: 2.4.4
+  resolution: "bare-os@npm:2.4.4"
+  checksum: 10c0/e7d1a7b2100c05da8d25b60d0d48cf850c6f57064577a3f2f51cf18d417fbcfd6967ed2d8314320914ed69e0f2ebcf54eb1b36092dd172d8e8f969cf8cccf041
+  languageName: node
+  linkType: hard
+
+"bare-path@npm:^2.0.0, bare-path@npm:^2.1.0":
+  version: 2.1.3
+  resolution: "bare-path@npm:2.1.3"
+  dependencies:
+    bare-os: "npm:^2.1.0"
+  checksum: 10c0/35587e177fc8fa5b13fb90bac8779b5ce49c99016d221ddaefe2232d02bd4295d79b941e14ae19fda75ec42a6fe5fb66c07d83ae7ec11462178e66b7be65ca74
+  languageName: node
+  linkType: hard
+
+"bare-stream@npm:^2.0.0":
+  version: 2.3.1
+  resolution: "bare-stream@npm:2.3.1"
+  dependencies:
+    streamx: "npm:^2.20.0"
+  checksum: 10c0/45714dc65df9c59d4b0f366e462c44869652a10073965328bc8340261fd6aba841e96babcf17e304090e1d46239ee2f6816e9b07c971b30447bfa199d6e3dcd1
+  languageName: node
+  linkType: hard
+
 "barrelsby@npm:^2.8.1":
   version: 2.8.1
   resolution: "barrelsby@npm:2.8.1"
@@ -7949,6 +8042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"basic-ftp@npm:^5.0.2":
+  version: 5.0.5
+  resolution: "basic-ftp@npm:5.0.5"
+  checksum: 10c0/be983a3997749856da87b839ffce6b8ed6c7dbf91ea991d5c980d8add275f9f2926c19f80217ac3e7f353815be879371d636407ca72b038cea8cab30e53928a6
+  languageName: node
+  linkType: hard
+
 "better-path-resolve@npm:1.0.0":
   version: 1.0.0
   resolution: "better-path-resolve@npm:1.0.0"
@@ -8094,6 +8194,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer-crc32@npm:~0.2.3":
+  version: 0.2.13
+  resolution: "buffer-crc32@npm:0.2.13"
+  checksum: 10c0/cb0a8ddf5cf4f766466db63279e47761eb825693eeba6a5a95ee4ec8cb8f81ede70aa7f9d8aeec083e781d47154290eb5d4d26b3f7a465ec57fb9e7d59c47150
+  languageName: node
+  linkType: hard
+
 "buffer-from@npm:^1.0.0":
   version: 1.1.2
   resolution: "buffer-from@npm:1.1.2"
@@ -8101,6 +8208,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer@npm:^5.2.1":
+  version: 5.7.1
+  resolution: "buffer@npm:5.7.1"
+  dependencies:
+    base64-js: "npm:^1.3.1"
+    ieee754: "npm:^1.1.13"
+  checksum: 10c0/27cac81cff434ed2876058d72e7c4789d11ff1120ef32c9de48f59eab58179b66710c488987d295ae89a228f835fc66d088652dffeb8e3ba8659f80eb091d55e
+  languageName: node
+  linkType: hard
+
 "buffer@npm:^6.0.3":
   version: 6.0.3
   resolution: "buffer@npm:6.0.3"
@@ -8417,6 +8534,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromium-bidi@npm:0.8.0":
+  version: 0.8.0
+  resolution: "chromium-bidi@npm:0.8.0"
+  dependencies:
+    mitt: "npm:3.0.1"
+    urlpattern-polyfill: "npm:10.0.0"
+    zod: "npm:3.23.8"
+  peerDependencies:
+    devtools-protocol: "*"
+  checksum: 10c0/d69bcf6eebe8026aae19ef383a7ba35e84bed38be00c5f4cd9700542653e628c528b21b68da10c4de76fc46ee18d186765843b0eb428428eb7e360ff3a6641c8
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^3.2.0, ci-info@npm:^3.7.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
@@ -8844,6 +8974,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "cosmiconfig@npm:9.0.0"
+  dependencies:
+    env-paths: "npm:^2.2.1"
+    import-fresh: "npm:^3.3.0"
+    js-yaml: "npm:^4.1.0"
+    parse-json: "npm:^5.2.0"
+  peerDependencies:
+    typescript: ">=4.9.5"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/1c1703be4f02a250b1d6ca3267e408ce16abfe8364193891afc94c2d5c060b69611fdc8d97af74b7e6d5d1aac0ab2fb94d6b079573146bc2d756c2484ce5f0ee
+  languageName: node
+  linkType: hard
+
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -9014,6 +9161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-uri-to-buffer@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "data-uri-to-buffer@npm:6.0.2"
+  checksum: 10c0/f76922bf895b3d7d443059ff278c9cc5efc89d70b8b80cd9de0aa79b3adc6d7a17948eefb8692e30398c43635f70ece1673d6085cc9eba2878dbc6c6da5292ac
+  languageName: node
+  linkType: hard
+
 "data-urls@npm:^3.0.2":
   version: 3.0.2
   resolution: "data-urls@npm:3.0.2"
@@ -9093,7 +9247,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^4.3.5":
+"debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:^4.3.7":
   version: 4.3.7
   resolution: "debug@npm:4.3.7"
   dependencies:
@@ -9204,6 +9358,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"degenerator@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "degenerator@npm:5.0.1"
+  dependencies:
+    ast-types: "npm:^0.13.4"
+    escodegen: "npm:^2.1.0"
+    esprima: "npm:^4.0.1"
+  checksum: 10c0/e48d8a651edeb512a648711a09afec269aac6de97d442a4bb9cf121a66877e0eec11b9727100a10252335c0666ae1c84a8bc1e3a3f47788742c975064d2c7b1c
+  languageName: node
+  linkType: hard
+
 "delay@npm:5.0.0":
   version: 5.0.0
   resolution: "delay@npm:5.0.0"
@@ -9283,6 +9448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devtools-protocol@npm:0.0.1354347":
+  version: 0.0.1354347
+  resolution: "devtools-protocol@npm:0.0.1354347"
+  checksum: 10c0/c3b6106eca257d870aca6f56ec6520b25c970051c5dcf847091201f4a635d12ba3821171de966f65beaa9b06c9dc1a77b43b6e4c5533eb1a5a7ef0b8b2972491
+  languageName: node
+  linkType: hard
+
 "didyoumean@npm:^1.2.2":
   version: 1.2.2
   resolution: "didyoumean@npm:1.2.2"
@@ -9555,6 +9727,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"end-of-stream@npm:^1.1.0":
+  version: 1.4.4
+  resolution: "end-of-stream@npm:1.4.4"
+  dependencies:
+    once: "npm:^1.4.0"
+  checksum: 10c0/870b423afb2d54bb8d243c63e07c170409d41e20b47eeef0727547aea5740bd6717aca45597a9f2745525667a6b804c1e7bede41f856818faee5806dd9ff3975
+  languageName: node
+  linkType: hard
+
 "engine.io-client@npm:~6.5.2":
   version: 6.5.3
   resolution: "engine.io-client@npm:6.5.3"
@@ -9619,7 +9800,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-paths@npm:^2.2.0":
+"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
   checksum: 10c0/285325677bf00e30845e330eec32894f5105529db97496ee3f598478e50f008c5352a41a30e5e72ec9de8a542b5a570b85699cd63bd2bc646dbcb9f311d83bc4
@@ -10116,7 +10297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escodegen@npm:^2.0.0":
+"escodegen@npm:^2.0.0, escodegen@npm:^2.1.0":
   version: 2.1.0
   resolution: "escodegen@npm:2.1.0"
   dependencies:
@@ -11019,6 +11200,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"extract-zip@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "extract-zip@npm:2.0.1"
+  dependencies:
+    "@types/yauzl": "npm:^2.9.1"
+    debug: "npm:^4.1.1"
+    get-stream: "npm:^5.1.0"
+    yauzl: "npm:^2.10.0"
+  dependenciesMeta:
+    "@types/yauzl":
+      optional: true
+  bin:
+    extract-zip: cli.js
+  checksum: 10c0/9afbd46854aa15a857ae0341a63a92743a7b89c8779102c3b4ffc207516b2019337353962309f85c66ee3d9092202a83cdc26dbf449a11981272038443974aee
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -11033,6 +11231,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-fifo@npm:^1.2.0, fast-fifo@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "fast-fifo@npm:1.3.2"
+  checksum: 10c0/d53f6f786875e8b0529f784b59b4b05d4b5c31c651710496440006a398389a579c8dbcd2081311478b5bf77f4b0b21de69109c5a4eabea9d8e8783d1eb864e4c
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -11112,6 +11317,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fd-slicer@npm:~1.1.0":
+  version: 1.1.0
+  resolution: "fd-slicer@npm:1.1.0"
+  dependencies:
+    pend: "npm:~1.2.0"
+  checksum: 10c0/304dd70270298e3ffe3bcc05e6f7ade2511acc278bc52d025f8918b48b6aa3b77f10361bddfadfe2a28163f7af7adbdce96f4d22c31b2f648ba2901f0c5fc20e
+  languageName: node
+  linkType: hard
+
 "fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4":
   version: 3.2.0
   resolution: "fetch-blob@npm:3.2.0"
@@ -11352,7 +11566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1":
+"fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
   dependencies:
@@ -11550,6 +11764,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-stream@npm:^5.1.0":
+  version: 5.2.0
+  resolution: "get-stream@npm:5.2.0"
+  dependencies:
+    pump: "npm:^3.0.0"
+  checksum: 10c0/43797ffd815fbb26685bf188c8cfebecb8af87b3925091dd7b9a9c915993293d78e3c9e1bce125928ff92f2d0796f3889b92b5ec6d58d1041b574682132e0a80
+  languageName: node
+  linkType: hard
+
 "get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
@@ -11586,6 +11809,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-uri@npm:^6.0.1":
+  version: 6.0.3
+  resolution: "get-uri@npm:6.0.3"
+  dependencies:
+    basic-ftp: "npm:^5.0.2"
+    data-uri-to-buffer: "npm:^6.0.2"
+    debug: "npm:^4.3.4"
+    fs-extra: "npm:^11.2.0"
+  checksum: 10c0/8d801c462cd5b9c171d4d9e5f17afce3d9ebfbbfb006a88e3e768ce0071a8e2e59ee1ce822915fc43b9d6b83fde7b8d1c9648330ae89778fa41ad774df8ee0ac
+  languageName: node
+  linkType: hard
+
 "git-hooks-list@npm:^3.0.0":
   version: 3.1.0
   resolution: "git-hooks-list@npm:3.1.0"
@@ -12327,7 +12562,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-agent@npm:^7.0.0":
+"http-proxy-agent@npm:^7.0.0, http-proxy-agent@npm:^7.0.1":
   version: 7.0.2
   resolution: "http-proxy-agent@npm:7.0.2"
   dependencies:
@@ -12367,6 +12602,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^7.0.3, https-proxy-agent@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "https-proxy-agent@npm:7.0.5"
+  dependencies:
+    agent-base: "npm:^7.0.2"
+    debug: "npm:4"
+  checksum: 10c0/2490e3acec397abeb88807db52cac59102d5ed758feee6df6112ab3ccd8325e8a1ce8bce6f4b66e5470eca102d31e425ace904242e4fa28dbe0c59c4bafa7b2c
+  languageName: node
+  linkType: hard
+
 "human-id@npm:^1.0.2":
   version: 1.0.2
   resolution: "human-id@npm:1.0.2"
@@ -12413,7 +12658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.2.1":
+"ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
   checksum: 10c0/b0782ef5e0935b9f12883a2e2aa37baa75da6e66ce6515c168697b42160807d9330de9a32ec1ed73149aea02e0d822e572bca6f1e22bdcbd2149e13b050b17bb
@@ -14407,6 +14652,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^7.14.1":
+  version: 7.18.3
+  resolution: "lru-cache@npm:7.18.3"
+  checksum: 10c0/b3a452b491433db885beed95041eb104c157ef7794b9c9b4d647be503be91769d11206bb573849a16b4cc0d03cbd15ffd22df7960997788b74c1d399ac7a4fed
+  languageName: node
+  linkType: hard
+
 "lucide-react@npm:^0.441.0":
   version: 0.441.0
   resolution: "lucide-react@npm:0.441.0"
@@ -15807,7 +16059,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mitt@npm:^3.0.1":
+"mitt@npm:3.0.1, mitt@npm:^3.0.1":
   version: 3.0.1
   resolution: "mitt@npm:3.0.1"
   checksum: 10c0/3ab4fdecf3be8c5255536faa07064d05caa3dd332bd318ff02e04621f7b3069ca1de9106cfe8e7ced675abfc2bec2ce4c4ef321c4a1bb1fb29df8ae090741913
@@ -15936,6 +16188,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"netmask@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "netmask@npm:2.0.2"
+  checksum: 10c0/cafd28388e698e1138ace947929f842944d0f1c0b87d3fa2601a61b38dc89397d33c0ce2c8e7b99e968584b91d15f6810b91bef3f3826adf71b1833b61d4bf4f
+  languageName: node
+  linkType: hard
+
 "next-contentlayer2@npm:^0.4.6":
   version: 0.4.6
   resolution: "next-contentlayer2@npm:0.4.6"
@@ -16307,7 +16566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.0":
+"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.4.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -16521,6 +16780,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pac-proxy-agent@npm:^7.0.1":
+  version: 7.0.2
+  resolution: "pac-proxy-agent@npm:7.0.2"
+  dependencies:
+    "@tootallnate/quickjs-emscripten": "npm:^0.23.0"
+    agent-base: "npm:^7.0.2"
+    debug: "npm:^4.3.4"
+    get-uri: "npm:^6.0.1"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.5"
+    pac-resolver: "npm:^7.0.1"
+    socks-proxy-agent: "npm:^8.0.4"
+  checksum: 10c0/1ef0812bb860d2c695aa3a8604acdb4239b8074183c9fdb9bdf3747b8b28bbb88f22269d3ca95cae825c8ed0ca82681e6692c0e304c961fe004231e579d1ca91
+  languageName: node
+  linkType: hard
+
+"pac-resolver@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "pac-resolver@npm:7.0.1"
+  dependencies:
+    degenerator: "npm:^5.0.0"
+    netmask: "npm:^2.0.2"
+  checksum: 10c0/5f3edd1dd10fded31e7d1f95776442c3ee51aa098c28b74ede4927d9677ebe7cebb2636750c24e945f5b84445e41ae39093d3a1014a994e5ceb9f0b1b88ebff5
+  languageName: node
+  linkType: hard
+
 "package-json-from-dist@npm:^1.0.0":
   version: 1.0.0
   resolution: "package-json-from-dist@npm:1.0.0"
@@ -16792,6 +17077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pend@npm:~1.2.0":
+  version: 1.2.0
+  resolution: "pend@npm:1.2.0"
+  checksum: 10c0/8a87e63f7a4afcfb0f9f77b39bb92374afc723418b9cb716ee4257689224171002e07768eeade4ecd0e86f1fa3d8f022994219fb45634f2dbd78c6803e452458
+  languageName: node
+  linkType: hard
+
 "performance-now@npm:^2.1.0":
   version: 2.1.0
   resolution: "performance-now@npm:2.1.0"
@@ -17372,6 +17664,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"progress@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "progress@npm:2.0.3"
+  checksum: 10c0/1697e07cb1068055dbe9fe858d242368ff5d2073639e652b75a7eb1f2a1a8d4afd404d719de23c7b48481a6aa0040686310e2dac2f53d776daa2176d3f96369c
+  languageName: node
+  linkType: hard
+
 "promise-retry@npm:^2.0.1":
   version: 2.0.1
   resolution: "promise-retry@npm:2.0.1"
@@ -17459,6 +17758,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proxy-agent@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "proxy-agent@npm:6.4.0"
+  dependencies:
+    agent-base: "npm:^7.0.2"
+    debug: "npm:^4.3.4"
+    http-proxy-agent: "npm:^7.0.1"
+    https-proxy-agent: "npm:^7.0.3"
+    lru-cache: "npm:^7.14.1"
+    pac-proxy-agent: "npm:^7.0.1"
+    proxy-from-env: "npm:^1.1.0"
+    socks-proxy-agent: "npm:^8.0.2"
+  checksum: 10c0/0c5b85cacf67eec9d8add025a5e577b2c895672e4187079ec41b0ee2a6dacd90e69a837936cb3ac141dd92b05b50a325b9bfe86ab0dc3b904011aa3bcf406fc0
+  languageName: node
+  linkType: hard
+
 "proxy-compare@npm:2.6.0":
   version: 2.6.0
   resolution: "proxy-compare@npm:2.6.0"
@@ -17466,6 +17781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proxy-from-env@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "proxy-from-env@npm:1.1.0"
+  checksum: 10c0/fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
+  languageName: node
+  linkType: hard
+
 "ps-tree@npm:^1.2.0":
   version: 1.2.0
   resolution: "ps-tree@npm:1.2.0"
@@ -17491,6 +17813,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pump@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "pump@npm:3.0.2"
+  dependencies:
+    end-of-stream: "npm:^1.1.0"
+    once: "npm:^1.3.1"
+  checksum: 10c0/5ad655cb2a7738b4bcf6406b24ad0970d680649d996b55ad20d1be8e0c02394034e4c45ff7cd105d87f1e9b96a0e3d06fd28e11fae8875da26e7f7a8e2c9726f
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -17498,6 +17830,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"puppeteer-core@npm:23.6.0":
+  version: 23.6.0
+  resolution: "puppeteer-core@npm:23.6.0"
+  dependencies:
+    "@puppeteer/browsers": "npm:2.4.0"
+    chromium-bidi: "npm:0.8.0"
+    debug: "npm:^4.3.7"
+    devtools-protocol: "npm:0.0.1354347"
+    typed-query-selector: "npm:^2.12.0"
+    ws: "npm:^8.18.0"
+  checksum: 10c0/98a31610ac221391ea374ed746a0f9eae6a2f343f3817f0fc3712a7b8f867197aed2c5888d3e1d17de97c01bde289fc88d804784f68eb35d9ed816a5cfe20005
+  languageName: node
+  linkType: hard
+
+"puppeteer@npm:^23.6.0":
+  version: 23.6.0
+  resolution: "puppeteer@npm:23.6.0"
+  dependencies:
+    "@puppeteer/browsers": "npm:2.4.0"
+    chromium-bidi: "npm:0.8.0"
+    cosmiconfig: "npm:^9.0.0"
+    devtools-protocol: "npm:0.0.1354347"
+    puppeteer-core: "npm:23.6.0"
+    typed-query-selector: "npm:^2.12.0"
+  bin:
+    puppeteer: lib/cjs/puppeteer/node/cli.js
+  checksum: 10c0/b7ab5044254de9ded422adc337e8c582eb251ae0689b03c030b3eb3f5b5e4d8df54672daadd0828b4b162cb650b4b33dc43f50efa7d5b12a298cb5ca4a99ab94
+  languageName: node
+  linkType: hard
+
 "pure-rand@npm:^6.0.0":
   version: 6.1.0
   resolution: "pure-rand@npm:6.1.0"
@@ -17519,6 +17881,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"queue-tick@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "queue-tick@npm:1.0.1"
+  checksum: 10c0/0db998e2c9b15215317dbcf801e9b23e6bcde4044e115155dae34f8e7454b9a783f737c9a725528d677b7a66c775eb7a955cf144fe0b87f62b575ce5bfd515a9
+  languageName: node
+  linkType: hard
+
 "raf@npm:^3.4.1":
   version: 3.4.1
   resolution: "raf@npm:3.4.1"
@@ -19168,6 +19537,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socks-proxy-agent@npm:^8.0.2, socks-proxy-agent@npm:^8.0.4":
+  version: 8.0.4
+  resolution: "socks-proxy-agent@npm:8.0.4"
+  dependencies:
+    agent-base: "npm:^7.1.1"
+    debug: "npm:^4.3.4"
+    socks: "npm:^2.8.3"
+  checksum: 10c0/345593bb21b95b0508e63e703c84da11549f0a2657d6b4e3ee3612c312cb3a907eac10e53b23ede3557c6601d63252103494caa306b66560f43af7b98f53957a
+  languageName: node
+  linkType: hard
+
 "socks-proxy-agent@npm:^8.0.3":
   version: 8.0.3
   resolution: "socks-proxy-agent@npm:8.0.3"
@@ -19189,6 +19569,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socks@npm:^2.8.3":
+  version: 2.8.3
+  resolution: "socks@npm:2.8.3"
+  dependencies:
+    ip-address: "npm:^9.0.5"
+    smart-buffer: "npm:^4.2.0"
+  checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7
+  languageName: node
+  linkType: hard
+
 "sonner@npm:^1.5.0":
   version: 1.5.0
   resolution: "sonner@npm:1.5.0"
@@ -19430,6 +19820,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"streamx@npm:^2.15.0, streamx@npm:^2.20.0":
+  version: 2.20.1
+  resolution: "streamx@npm:2.20.1"
+  dependencies:
+    bare-events: "npm:^2.2.0"
+    fast-fifo: "npm:^1.3.2"
+    queue-tick: "npm:^1.0.1"
+    text-decoder: "npm:^1.1.0"
+  dependenciesMeta:
+    bare-events:
+      optional: true
+  checksum: 10c0/34ffa2ee9465d70e18c7e2ba70189720c166d150ab83eb7700304620fa23ff42a69cb37d712ea4b5fc6234d8e74346a88bb4baceb873c6b05e52ac420f8abb4d
+  languageName: node
+  linkType: hard
+
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"
@@ -19875,6 +20280,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar-fs@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "tar-fs@npm:3.0.6"
+  dependencies:
+    bare-fs: "npm:^2.1.1"
+    bare-path: "npm:^2.1.0"
+    pump: "npm:^3.0.0"
+    tar-stream: "npm:^3.1.5"
+  dependenciesMeta:
+    bare-fs:
+      optional: true
+    bare-path:
+      optional: true
+  checksum: 10c0/207b7c0f193495668bd9dbad09a0108ce4ffcfec5bce2133f90988cdda5c81fad83c99f963d01e47b565196594f7a17dbd063ae55b97b36268fcc843975278ee
+  languageName: node
+  linkType: hard
+
+"tar-stream@npm:^3.1.5":
+  version: 3.1.7
+  resolution: "tar-stream@npm:3.1.7"
+  dependencies:
+    b4a: "npm:^1.6.4"
+    fast-fifo: "npm:^1.2.0"
+    streamx: "npm:^2.15.0"
+  checksum: 10c0/a09199d21f8714bd729993ac49b6c8efcb808b544b89f23378ad6ffff6d1cb540878614ba9d4cfec11a64ef39e1a6f009a5398371491eb1fda606ffc7f70f718
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
@@ -19907,6 +20340,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-decoder@npm:^1.1.0":
+  version: 1.2.1
+  resolution: "text-decoder@npm:1.2.1"
+  checksum: 10c0/deea9e3f4bde3b8990439e59cd52b2e917a416e29fbaf607052c89117c7148f1831562c099e9dd49abea0839cffdeb75a3c8f1f137f1686afd2808322f8e3f00
+  languageName: node
+  linkType: hard
+
 "text-table@npm:^0.2.0":
   version: 0.2.0
   resolution: "text-table@npm:0.2.0"
@@ -19955,7 +20395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:2, through@npm:~2.3, through@npm:~2.3.1":
+"through@npm:2, through@npm:^2.3.8, through@npm:~2.3, through@npm:~2.3.1":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
   checksum: 10c0/4b09f3774099de0d4df26d95c5821a62faee32c7e96fb1f4ebd54a2d7c11c57fe88b0a0d49cf375de5fee5ae6bf4eb56dbbf29d07366864e2ee805349970d3cc
@@ -20638,6 +21078,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-query-selector@npm:^2.12.0":
+  version: 2.12.0
+  resolution: "typed-query-selector@npm:2.12.0"
+  checksum: 10c0/069509887ecfff824a470f5f93d300cc9223cb059a36c47ac685f2812c4c9470340e07615893765e4264cef1678507532fa78f642fd52f276b589f7f5d791f79
+  languageName: node
+  linkType: hard
+
 "typedarray@npm:^0.0.6":
   version: 0.0.6
   resolution: "typedarray@npm:0.0.6"
@@ -20697,6 +21144,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unbzip2-stream@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "unbzip2-stream@npm:1.4.3"
+  dependencies:
+    buffer: "npm:^5.2.1"
+    through: "npm:^2.3.8"
+  checksum: 10c0/2ea2048f3c9db3499316ccc1d95ff757017ccb6f46c812d7c42466247e3b863fb178864267482f7f178254214247779daf68e85f50bd7736c3c97ba2d58b910a
+  languageName: node
+  linkType: hard
+
 "undici-types@npm:~5.26.4":
   version: 5.26.5
   resolution: "undici-types@npm:5.26.5"
@@ -21023,6 +21480,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"urlpattern-polyfill@npm:10.0.0":
+  version: 10.0.0
+  resolution: "urlpattern-polyfill@npm:10.0.0"
+  checksum: 10c0/43593f2a89bd54f2d5b5105ef4896ac5c5db66aef723759fbd15cd5eb1ea6cdae9d112e257eda9bbc3fb0cd90be6ac6e9689abe4ca69caa33114f42a27363531
+  languageName: node
+  linkType: hard
+
 "use-callback-ref@npm:^1.3.0":
   version: 1.3.2
   resolution: "use-callback-ref@npm:1.3.2"
@@ -21635,7 +22099,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.17.1":
+"ws@npm:^8.17.1, ws@npm:^8.18.0":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
   peerDependencies:
@@ -21786,6 +22250,7 @@ __metadata:
     nuqs: "npm:^1.19.1"
     postcss: "npm:^8.4.45"
     prismjs: "npm:^1.29.0"
+    puppeteer: "npm:^23.6.0"
     react: "npm:^18.3.1"
     react-day-picker: "npm:^8.10.1"
     react-dnd: "npm:16.0.1"
@@ -21932,6 +22397,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yauzl@npm:^2.10.0":
+  version: 2.10.0
+  resolution: "yauzl@npm:2.10.0"
+  dependencies:
+    buffer-crc32: "npm:~0.2.3"
+    fd-slicer: "npm:~1.1.0"
+  checksum: 10c0/f265002af7541b9ec3589a27f5fb8f11cf348b53cc15e2751272e3c062cd73f3e715bc72d43257de71bbaecae446c3f1b14af7559e8ab0261625375541816422
+  languageName: node
+  linkType: hard
+
 "yjs@npm:^13.6.19":
   version: 13.6.19
   resolution: "yjs@npm:13.6.19"
@@ -21962,7 +22437,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:^3.20.2":
+"zod@npm:3.23.8, zod@npm:^3.20.2":
   version: 3.23.8
   resolution: "zod@npm:3.23.8"
   checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69