diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
index 2cd1fa29..532c1e8f 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -9,7 +9,7 @@ const params = useUrlSearchParams('history')
 <template>
   <div
     v-if="params.name"
-    :class="cn('preview flex h-screen w-full justify-center p-10 items-center', params.containerClass)"
+    :class="cn('preview flex h-screen w-full justify-center items-center', params.containerClass)"
   >
     <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index a5c51531..b8024762 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1561,7 +1561,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -7405,7 +7405,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -13265,7 +13265,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -19109,7 +19109,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index ce9989f0..9b55e7bc 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -1558,15 +1558,12 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
@@ -3625,15 +3622,12 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarFooter.json b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
index 1b0e09ca..63287869 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
index 0e547328..d78b37b2 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/DemoSidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarHeader.json b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
index d24fffae..1b253a56 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
index 82c453db..5670deaa 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarMenuCollapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/Login01.json b/apps/www/src/public/r/styles/default/Login01.json
index 9e7d8cb2..13ca2097 100644
--- a/apps/www/src/public/r/styles/default/Login01.json
+++ b/apps/www/src/public/r/styles/default/Login01.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "block/Login01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Login01/components/LoginForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar03.json b/apps/www/src/public/r/styles/default/Sidebar03.json
index 51ef75c7..37ce2eb8 100644
--- a/apps/www/src/public/r/styles/default/Sidebar03.json
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "block/Sidebar03/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar04.json b/apps/www/src/public/r/styles/default/Sidebar04.json
index 4fdfff4d..e9677153 100644
--- a/apps/www/src/public/r/styles/default/Sidebar04.json
+++ b/apps/www/src/public/r/styles/default/Sidebar04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "block/Sidebar04/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar04/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar05.json b/apps/www/src/public/r/styles/default/Sidebar05.json
index 7cb2478e..93a29d15 100644
--- a/apps/www/src/public/r/styles/default/Sidebar05.json
+++ b/apps/www/src/public/r/styles/default/Sidebar05.json
@@ -14,19 +14,19 @@
   "files": [
     {
       "path": "block/Sidebar05/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar05/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar05/components/SearchForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
index 9958c7cf..d7961756 100644
--- a/apps/www/src/public/r/styles/default/Sidebar11.json
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -19,13 +19,13 @@
     },
     {
       "path": "block/Sidebar11/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar11/components/Tree.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index bfc51e81..885fed12 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -6,20 +6,17 @@
   ],
   "registryDependencies": [
     "utils",
-    "Sheet.vue",
-    "SheetContent.vue",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
+    "sheet",
+    "input",
+    "tooltip",
+    "skeleton",
+    "separator",
+    "button"
   ],
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +64,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -97,7 +94,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuButton.vue"
     },
@@ -115,7 +112,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +148,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
index b1ac6972..45302e89 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
index 0ba7c82c..0ed12b34 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/DemoSidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
index fe279ba1..65482668 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarMenuCollapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index 89148bf6..3bfb6139 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -6,20 +6,17 @@
   ],
   "registryDependencies": [
     "utils",
-    "Sheet.vue",
-    "SheetContent.vue",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
+    "sheet",
+    "input",
+    "tooltip",
+    "skeleton",
+    "separator",
+    "button"
   ],
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +64,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -97,7 +94,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuButton.vue"
     },
@@ -115,7 +112,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +148,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 831834bd..4811471f 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -2284,20 +2284,17 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2345,7 +2342,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -2375,7 +2372,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuButton.vue"
       },
@@ -2393,7 +2390,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -2429,13 +2426,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -6761,7 +6758,7 @@
     "files": [
       {
         "path": "block/DemoSidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -6795,7 +6792,7 @@
     "files": [
       {
         "path": "block/DemoSidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -6895,7 +6892,7 @@
     "files": [
       {
         "path": "block/DemoSidebarMenuCollapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -9701,20 +9698,17 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -9762,7 +9756,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -9792,7 +9786,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuButton.vue"
       },
@@ -9810,7 +9804,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -9846,13 +9840,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -14179,7 +14173,7 @@
     "files": [
       {
         "path": "block/DemoSidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14213,7 +14207,7 @@
     "files": [
       {
         "path": "block/DemoSidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14247,7 +14241,7 @@
     "files": [
       {
         "path": "block/DemoSidebarHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14313,7 +14307,7 @@
     "files": [
       {
         "path": "block/DemoSidebarMenuCollapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14349,13 +14343,13 @@
     "files": [
       {
         "path": "block/Login01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Login01/components/LoginForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14457,7 +14451,7 @@
     "files": [
       {
         "path": "block/Sidebar03/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
@@ -14482,13 +14476,13 @@
     "files": [
       {
         "path": "block/Sidebar04/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar04/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14510,19 +14504,19 @@
     "files": [
       {
         "path": "block/Sidebar05/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar05/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar05/components/SearchForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14616,7 +14610,7 @@
       },
       {
         "path": "block/Sidebar07/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14666,7 +14660,7 @@
       },
       {
         "path": "block/Sidebar08/components/NavProjects.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14743,49 +14737,49 @@
     "files": [
       {
         "path": "block/Sidebar10/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar10/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavActions.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavFavorites.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavSecondary.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/TeamSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14806,19 +14800,19 @@
     "files": [
       {
         "path": "block/Sidebar11/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar11/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar11/components/Tree.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
diff --git a/apps/www/src/registry/default/ui/sidebar/Sidebar.vue b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
index bdd7db03..043bfdda 100644
--- a/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Sheet from '@/registry/default/ui/sheet/Sheet.vue'
-import SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'
+import { Sheet, SheetContent } from '@/registry/default/ui/sheet'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
index 250df2cd..684d653c 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Input from '@/registry/default/ui/input/Input.vue'
+import { Input } from '@/registry/default/ui/input'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
index d9ba7286..86f160b6 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
index a91f0b2d..6017622f 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'
+import { Skeleton } from '@/registry/default/ui/skeleton'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
index ff778e87..d5f46d1b 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Separator from '@/registry/default/ui/separator/Separator.vue'
+import { Separator } from '@/registry/default/ui/separator'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
index 7ce9886d..527465a2 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Button from '@/registry/default/ui/button/Button.vue'
+import { Button } from '@/registry/default/ui/button'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
index 4b4e5577..efbc5ce6 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { SidebarProps } from '.'
 import { cn } from '@/lib/utils'
-import Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'
-import SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'
+import { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
index 8c79b34e..6032b457 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Input from '@/registry/new-york/ui/input/Input.vue'
+import { Input } from '@/registry/new-york/ui/input'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
index 2540af84..80f08930 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
index 72161218..a31e9913 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'
+import { Skeleton } from '@/registry/new-york/ui/skeleton'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
index 89905371..7277d24e 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Separator from '@/registry/new-york/ui/separator/Separator.vue'
+import { Separator } from '@/registry/new-york/ui/separator'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
index 7f7c4321..692f53b8 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Button from '@/registry/new-york/ui/button/Button.vue'
+import { Button } from '@/registry/new-york/ui/button'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index 9c03d9d8..500ccc42 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -132,7 +132,6 @@ export async function getTailwindConfigFile(cwd: string) {
 
 export async function getTsConfigAliasPrefix(cwd: string) {
   const tsConfig = await loadConfig(cwd)
-
   if (
     tsConfig?.resultType === 'failed'
     || !Object.entries(tsConfig?.paths).length
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 2a96ef98..8093d9aa 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -19,7 +19,7 @@ import { HttpsProxyAgent } from 'https-proxy-agent'
 import { ofetch } from 'ofetch'
 import { z } from 'zod'
 
-const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://shadcn-vue.com/r'
+const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://next.shadcn-vue.com/r'
 
 const agent = process.env.https_proxy
   ? new HttpsProxyAgent(process.env.https_proxy)
@@ -182,6 +182,7 @@ async function fetchRegistry(paths: string[]) {
     const results = await Promise.all(
       paths.map(async (path) => {
         const url = getRegistryUrl(path)
+        console.log(url)
         const response = await ofetch(url, { agent, parseResponse: JSON.parse })
           .catch((error) => {
             throw new Error(error.data)