From 41d836335fc0d4a5d6ebe42e890714e875a34944 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 25 Nov 2024 18:01:47 +0800
Subject: [PATCH] docs: sidebar

---
 .../theme/components/BlockContainer.vue       |    4 -
 .../.vitepress/theme/components/BlockPage.vue |    6 +-
 .../theme/components/BlockPreview.vue         |    2 +-
 .../.vitepress/theme/components/Blocks.vue    |    4 +-
 .../theme/components/TableOfContent.vue       |    4 +-
 apps/www/.vitepress/theme/style.css           |    6 +-
 apps/www/.vitepress/theme/styles/vp-doc.css   |   35 +-
 apps/www/__registry__/block.ts                |  904 ++++++++++++++
 apps/www/__registry__/index.ts                |  796 +++++++++++++
 .../src/content/docs/components/sidebar.md    | 1054 ++++++++++++++++-
 .../public/r/styles/default/DemoSidebar.json  |   16 +
 .../styles/default/DemoSidebarControlled.json |   17 +
 .../r/styles/default/DemoSidebarFooter.json   |   17 +
 .../r/styles/default/DemoSidebarGroup.json    |   16 +
 .../default/DemoSidebarGroupAction.json       |   18 +
 .../default/DemoSidebarGroupCollapsible.json  |   17 +
 .../r/styles/default/DemoSidebarHeader.json   |   17 +
 .../r/styles/default/DemoSidebarMenu.json     |   16 +
 .../styles/default/DemoSidebarMenuAction.json |   17 +
 .../styles/default/DemoSidebarMenuBadge.json  |   16 +
 .../default/DemoSidebarMenuCollapsible.json   |   17 +
 .../r/styles/default/DemoSidebarMenuSub.json  |   16 +
 .../src/public/r/styles/default/Login01.json  |   26 +
 .../public/r/styles/default/Sidebar01.json    |    8 +-
 .../public/r/styles/default/Sidebar02.json    |    2 +-
 .../public/r/styles/default/Sidebar03.json    |    2 +-
 .../public/r/styles/default/Sidebar06.json    |    8 +-
 .../public/r/styles/default/Sidebar07.json    |   12 +-
 .../public/r/styles/default/Sidebar08.json    |   12 +-
 .../public/r/styles/default/Sidebar09.json    |    6 +-
 .../public/r/styles/default/Sidebar10.json    |   16 +-
 .../public/r/styles/default/Sidebar11.json    |    2 +-
 .../public/r/styles/default/Sidebar12.json    |   10 +-
 .../public/r/styles/default/Sidebar13.json    |    4 +-
 .../public/r/styles/default/Sidebar14.json    |    4 +-
 .../public/r/styles/default/Sidebar15.json    |   24 +-
 .../public/r/styles/new-york/DemoSidebar.json |   16 +
 .../new-york/DemoSidebarControlled.json       |   17 +
 .../r/styles/new-york/DemoSidebarFooter.json  |   17 +
 .../r/styles/new-york/DemoSidebarGroup.json   |   16 +
 .../new-york/DemoSidebarGroupAction.json      |   18 +
 .../new-york/DemoSidebarGroupCollapsible.json |   17 +
 .../r/styles/new-york/DemoSidebarHeader.json  |   17 +
 .../r/styles/new-york/DemoSidebarMenu.json    |   16 +
 .../new-york/DemoSidebarMenuAction.json       |   17 +
 .../styles/new-york/DemoSidebarMenuBadge.json |   16 +
 .../new-york/DemoSidebarMenuCollapsible.json  |   17 +
 .../r/styles/new-york/DemoSidebarMenuSub.json |   16 +
 .../src/public/r/styles/new-york/Login01.json |   26 +
 .../public/r/styles/new-york/Sidebar01.json   |    2 +-
 .../public/r/styles/new-york/Sidebar02.json   |    2 +-
 .../public/r/styles/new-york/Sidebar07.json   |    4 +-
 .../public/r/styles/new-york/Sidebar08.json   |    2 +-
 .../public/r/styles/new-york/Sidebar09.json   |    2 +-
 .../public/r/styles/new-york/Sidebar10.json   |    2 +-
 .../public/r/styles/new-york/Sidebar12.json   |    2 +-
 .../public/r/styles/new-york/Sidebar13.json   |    2 +-
 .../public/r/styles/new-york/Sidebar14.json   |    2 +-
 .../public/r/styles/new-york/Sidebar15.json   |    8 +-
 apps/www/src/public/r/temp.json               |  572 ++++++++-
 .../registry/default/block/DemoSidebar.vue    |   75 ++
 .../default/block/DemoSidebarControlled.vue   |   93 ++
 .../default/block/DemoSidebarFooter.vue       |   64 +
 .../default/block/DemoSidebarGroup.vue        |   43 +
 .../default/block/DemoSidebarGroupAction.vue  |   74 ++
 .../block/DemoSidebarGroupCollapsible.vue     |   60 +
 .../default/block/DemoSidebarHeader.vue       |   54 +
 .../default/block/DemoSidebarMenu.vue         |   67 ++
 .../default/block/DemoSidebarMenuAction.vue   |  100 ++
 .../default/block/DemoSidebarMenuBadge.vue    |   77 ++
 .../block/DemoSidebarMenuCollapsible.vue      |  191 +++
 .../default/block/DemoSidebarMenuSub.vue      |  174 +++
 .../block/Login01/components/LoginForm.vue    |   59 +
 .../registry/default/block/Login01/page.vue   |   16 +
 .../block/Sidebar01/components/AppSidebar.vue |    6 +-
 .../block/Sidebar01/components/SearchForm.vue |    4 +-
 .../Sidebar01/components/VersionSwitcher.vue  |    4 +-
 .../registry/default/block/Sidebar01/page.vue |    8 +-
 .../block/Sidebar03/components/AppSidebar.vue |    2 +-
 .../registry/default/block/Sidebar03/page.vue |    8 +-
 .../block/Sidebar04/components/AppSidebar.vue |    2 +-
 .../registry/default/block/Sidebar04/page.vue |    8 +-
 .../block/Sidebar05/components/AppSidebar.vue |    6 +-
 .../block/Sidebar05/components/SearchForm.vue |    4 +-
 .../registry/default/block/Sidebar05/page.vue |    8 +-
 .../block/Sidebar06/components/AppSidebar.vue |    6 +-
 .../block/Sidebar06/components/NavMain.vue    |    4 +-
 .../Sidebar06/components/SidebarOptInForm.vue |    6 +-
 .../registry/default/block/Sidebar06/page.vue |    8 +-
 .../block/Sidebar07/components/AppSidebar.vue |   12 +-
 .../block/Sidebar07/components/NavMain.vue    |    4 +-
 .../Sidebar07/components/NavProjects.vue      |    4 +-
 .../block/Sidebar07/components/NavUser.vue    |    6 +-
 .../Sidebar07/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar07/page.vue |    8 +-
 .../block/Sidebar08/components/AppSidebar.vue |   10 +-
 .../block/Sidebar08/components/NavMain.vue    |    4 +-
 .../Sidebar08/components/NavProjects.vue      |    4 +-
 .../Sidebar08/components/NavSecondary.vue     |    2 +-
 .../block/Sidebar08/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar08/page.vue |    8 +-
 .../block/Sidebar09/components/AppSidebar.vue |    8 +-
 .../block/Sidebar09/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar09/page.vue |    8 +-
 .../block/Sidebar10/components/AppSidebar.vue |   12 +-
 .../block/Sidebar10/components/NavActions.vue |    6 +-
 .../Sidebar10/components/NavFavorites.vue     |    4 +-
 .../block/Sidebar10/components/NavMain.vue    |    2 +-
 .../Sidebar10/components/NavSecondary.vue     |    2 +-
 .../Sidebar10/components/NavWorkspaces.vue    |    4 +-
 .../Sidebar10/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar10/page.vue |   10 +-
 .../block/Sidebar11/components/AppSidebar.vue |    4 +-
 .../block/Sidebar11/components/Tree.vue       |    4 +-
 .../registry/default/block/Sidebar11/page.vue |    8 +-
 .../block/Sidebar12/components/AppSidebar.vue |    8 +-
 .../block/Sidebar12/components/Calendars.vue  |    4 +-
 .../block/Sidebar12/components/DatePicker.vue |    4 +-
 .../block/Sidebar12/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar12/page.vue |    8 +-
 .../Sidebar13/components/SettingsDialog.vue   |    8 +-
 .../registry/default/block/Sidebar13/page.vue |    2 +-
 .../block/Sidebar14/components/AppSidebar.vue |    4 +-
 .../registry/default/block/Sidebar14/page.vue |    6 +-
 .../block/Sidebar15/components/AppSidebar.vue |    4 +-
 .../block/Sidebar15/components/Calendars.vue  |    4 +-
 .../block/Sidebar15/components/DatePicker.vue |    4 +-
 .../Sidebar15/components/NavFavorites.vue     |    4 +-
 .../block/Sidebar15/components/NavMain.vue    |    2 +-
 .../Sidebar15/components/NavSecondary.vue     |    2 +-
 .../block/Sidebar15/components/NavUser.vue    |    6 +-
 .../Sidebar15/components/NavWorkspaces.vue    |    4 +-
 .../Sidebar15/components/SidebarLeft.vue      |   12 +-
 .../Sidebar15/components/SidebarRight.vue     |    8 +-
 .../Sidebar15/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar15/page.vue |   10 +-
 .../registry/new-york/block/DemoSidebar.vue   |   75 ++
 .../new-york/block/DemoSidebarControlled.vue  |   93 ++
 .../new-york/block/DemoSidebarFooter.vue      |   64 +
 .../new-york/block/DemoSidebarGroup.vue       |   43 +
 .../new-york/block/DemoSidebarGroupAction.vue |   74 ++
 .../block/DemoSidebarGroupCollapsible.vue     |   60 +
 .../new-york/block/DemoSidebarHeader.vue      |   54 +
 .../new-york/block/DemoSidebarMenu.vue        |   67 ++
 .../new-york/block/DemoSidebarMenuAction.vue  |  100 ++
 .../new-york/block/DemoSidebarMenuBadge.vue   |   77 ++
 .../block/DemoSidebarMenuCollapsible.vue      |  191 +++
 .../new-york/block/DemoSidebarMenuSub.vue     |  174 +++
 .../block/Login01/components/LoginForm.vue    |   59 +
 .../registry/new-york/block/Login01/page.vue  |   16 +
 150 files changed, 6280 insertions(+), 343 deletions(-)
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebar.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarControlled.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarFooter.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroup.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarHeader.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenu.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
 create mode 100644 apps/www/src/public/r/styles/default/Login01.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Login01.json
 create mode 100644 apps/www/src/registry/default/block/DemoSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarControlled.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarFooter.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroup.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarHeader.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenu.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
 create mode 100644 apps/www/src/registry/default/block/Login01/components/LoginForm.vue
 create mode 100644 apps/www/src/registry/default/block/Login01/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
 create mode 100644 apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Login01/page.vue

diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 358b2b19..ba0f3142 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -220,10 +220,6 @@ watch([style, codeConfig], async () => {
     </TabsContent>
     <TabsContent value="code" class="h-[--height]">
       <BlockViewerCode v-if="componentRegistry" :item="componentRegistry" />
-      <!-- <div
-        class="language-vue !h-full !max-h-[none] !mt-0"
-        v-html="codeHtml"
-      /> -->
     </TabsContent>
   </Tabs>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
index be644b62..2cd1fa29 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import { useUrlSearchParams } from '@vueuse/core'
 import ComponentLoader from './ComponentLoader.vue'
 
@@ -6,7 +7,10 @@ const params = useUrlSearchParams('history')
 </script>
 
 <template>
-  <div v-if="params.name" :class="params.containerClass">
+  <div
+    v-if="params.name"
+    :class="cn('preview flex h-screen w-full justify-center p-10 items-center', params.containerClass)"
+  >
     <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 6aee8eb0..cdcf184b 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -12,7 +12,7 @@ const isLoading = ref(true)
 
 <template>
   <div class="relative rounded-lg border overflow-hidden bg-background" :class="[container ? '' : 'aspect-[4/2.5]']">
-    <div v-if="isLoading" class="flex items-center justify-center h-full">
+    <div v-if="isLoading" class="flex items-center justify-center h-full w-full z-10 relative">
       <Spinner />
     </div>
     <div
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index c2cdb529..323a8888 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { Index } from '../../../__registry__'
 import Announcement from '../components/Announcement.vue'
 import PageAction from '../components/PageAction.vue'
 
@@ -10,8 +9,7 @@ import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
-// const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
-const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block' && i.name.includes('Sidebar')).map((i: any) => i.name)
+const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index d441caac..11bf210f 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -60,8 +60,8 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="hidden text-sm xl:block">
-    <div class="no-scrollbar h-full overflow-auto pb-10 space-y-2">
+  <div class="hidden xl:block no-scrollbar h-full overflow-auto pb-16">
+    <div class="space-y-2">
       <p class="font-medium">
         On This Page
       </p>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index 770d7d6c..e8f3635b 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -223,7 +223,7 @@ pre code {
 }
 
 .line-numbers-wrapper {
-	@apply font-mono;
+  @apply !font-mono;
 }
 
 pre code .line {
@@ -231,7 +231,9 @@ pre code .line {
 }
 
 .line-number {
-	@apply !text-sm !inline-block text-muted-foreground leading-[--vp-code-line-height];
+  font-size: .75rem ;
+  color: hsla(0, 0%, 98%, .4) ;
+	@apply !inline-block leading-[--vp-code-line-height];
 }
 
 ::view-transition-old(root),
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 00813715..2a8cc5dc 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -171,39 +171,26 @@
  * Table
  * -------------------------------------------------------------------------- */
 
-/* .vp-doc table {
-  display: block;
-  border-collapse: collapse;
-  margin: 20px 0;
-  overflow-x: auto;
+.vp-doc table {
+  @apply relative w-full overflow-hidden border-none text-sm;
 }
 
 .vp-doc tr {
-  border-top: 1px solid var(--vp-c-divider);
-  transition: background-color 0.5s;
+  @apply m-0 border-b;
 }
-
-.vp-doc tr:nth-child(2n) {
-  background-color: var(--vp-c-bg-soft);
-}
-
-.vp-doc th,
-.vp-doc td {
-  border: 1px solid var(--vp-c-divider);
-  padding: 8px 16px;
+.vp-doc tbody tr:last-child {
+  @apply border-b-0;
 }
 
 .vp-doc th {
-  text-align: left;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  background-color: var(--vp-c-bg-soft);
+  @apply px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
 }
 
 .vp-doc td {
-  font-size: 14px;
-} */
+@apply px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
+}
+
+
 
 /**
  * Decorational elements
@@ -427,7 +414,7 @@
   z-index: 3;
   border-right: 1px solid var(--vp-code-block-divider-color);
   padding-top: 14px;
-  padding-left: 8px;
+  padding-left: 20px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
index a651fdf7..ae32f0e2 100644
--- a/apps/www/__registry__/block.ts
+++ b/apps/www/__registry__/block.ts
@@ -191,6 +191,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -888,6 +1114,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -1586,6 +2038,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -2283,6 +2961,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6ad46cbc..a5c51531 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5235,6 +5235,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -10880,6 +11079,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -16541,6 +16939,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -22186,6 +22783,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
diff --git a/apps/www/src/content/docs/components/sidebar.md b/apps/www/src/content/docs/components/sidebar.md
index 41157d56..4b8100f4 100644
--- a/apps/www/src/content/docs/components/sidebar.md
+++ b/apps/www/src/content/docs/components/sidebar.md
@@ -3,10 +3,1062 @@ title: Sidebar
 description: A composable, themeable and customizable sidebar component.
 ---
 
-<BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar that collapses to icons.
+  </figcaption>
+</figure>
+
+Sidebars are one of the most complex components to build. They are central
+to any application and often contain a lot of moving parts.
+
+I don't like building sidebars. So I built 30+ of them. All kinds of
+configurations. Then I extracted the core components into `Sidebar*.vue`.
+
+We now have a solid foundation to build on top of. Composable. Themeable.
+Customizable.
+
+[Browse the Blocks Library](/blocks).
 
 ## Installation
 
+<Steps>
+
+### Run the following command to install `sidebar`
+
 ```bash
 npx shadcn-vue@latest add sidebar
 ```
+
+### Add the following colors to your CSS file
+
+The command above should install the colors for you. If not, copy and paste the following in your CSS file.
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+</Steps>
+
+## Structure
+
+A `Sidebar` component is composed of the following parts:
+
+- `SidebarProvider` - Handles collapsible state.
+- `Sidebar` - The sidebar container.
+- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
+- `SidebarContent` - Scrollable content.
+- `SidebarGroup` - Section within the `SidebarContent`.
+- `SidebarTrigger` - Trigger for the `Sidebar`.
+
+<img
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  class="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<img
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  class="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+## Usage
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot></slot>
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+```vue:line-numbers
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarGroup />
+    </SidebarContent>
+    <SidebarFooter />
+  </Sidebar>
+</template>
+```
+
+## Your First Sidebar
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+<Steps>
+
+###  Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+### Create a new sidebar component at `components/AppSidebar.vue`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent />
+  </Sidebar>
+</template>
+```
+
+### Now, let's add a `SidebarMenu` to the sidebar.
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  { title: 'Home', url: '#', icon: Home },
+  { title: 'Inbox', url: '#', icon: Inbox },
+  { title: 'Calendar', url: '#', icon: Calendar },
+  { title: 'Search', url: '#', icon: Search },
+  { title: 'Settings', url: '#', icon: Settings },
+]
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in items" :key="item.title">
+              <SidebarMenuButton asChild>
+                <a :href="item.url">
+                  <component :is="item.icon" />
+                  <span>{{item.title}}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+### You've created your first sidebar.
+
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebar&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    Your first sidebar.
+  </figcaption>
+</figure>
+
+</Steps>
+
+## Components
+
+The components in `Sidebar*` are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn/ui components such as `DropdownMenu`, `Collapsible` or `Dialog` etc.
+
+**If you need to change the code in `Sidebar*.vue`, you are encouraged to do so. The code is yours. Use `Sidebar.vue` as a starting point and build your own.**
+
+In the next sections, we'll go over each component and how to use them.
+
+## SidebarProvider
+
+The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
+
+### Props
+
+| Name           | Type                      | Description                                  |
+| -------------- | ------------------------- | -------------------------------------------- |
+| `defaultOpen`  | `boolean`                 | Default open state of the sidebar.           |
+| `open`         | `boolean`                 | Open state of the sidebar (controlled).      |
+| `onOpenChange` | `(open: boolean) => void` | Sets open state of the sidebar (controlled). |
+
+### Width
+
+If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar/utils` to set the width of the sidebar.
+
+```ts:line-numbers
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+```
+
+For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
+
+To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
+
+```vue:line-numbers
+<template>
+  <SidebarProvider
+    :style="{
+      '--sidebar-width': '20rem',
+      '--sidebar-width-mobile': '20rem',
+    }"
+  >
+    <Sidebar />
+  </SidebarProvider>
+</template>
+```
+
+This will handle the width of the sidebar but also the layout spacing.
+
+### Keyboard Shortcut
+
+The `SIDEBAR_KEYBOARD_SHORTCUT` variable is used to set the keyboard shortcut used to open and close the sidebar.
+
+To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b` on Windows.
+
+You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
+
+```ts:line-numbers
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+```
+
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar:state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Nuxt, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+const sidebarState = useCookie('sidebar:state')
+
+const defaultOpen = computed(() => sidebarState.value === 'true')
+</script>
+
+<template>
+  <SidebarProvider :defaultOpen="defaultOpen">
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar/utils`.
+
+```ts:line-numbers
+const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+```
+
+## Sidebar
+
+The main `Sidebar` component used to render a collapsible sidebar.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar />
+</template>
+```
+
+### Props
+
+| Property      | Type                              | Description                       |
+| ------------- | --------------------------------- | --------------------------------- |
+| `side`        | `left` or `right`                 | The side of the sidebar.          |
+| `variant`     | `sidebar`, `floating`, or `inset` | The variant of the sidebar.       |
+| `collapsible` | `offcanvas`, `icon`, or `none`    | Collapsible state of the sidebar. |
+
+### side
+
+Use the `side` prop to change the side of the sidebar.
+
+Available options are `left` and `right`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar side="left | right" />
+</template>
+```
+
+### variant
+
+Use the `variant` prop to change the variant of the sidebar.
+
+Available options are `sidebar`, `floating` and `inset`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar variant="sidebar | floating | inset" />
+</template>
+```
+
+<Callout>
+
+  **Note:** If you use the `inset` variant, remember to wrap your main content
+  in a `SidebarInset` component.
+
+</Callout>
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar variant="inset" />
+    <SidebarInset>
+      <main><slot /></main>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
+```
+
+### collapsible
+
+Use the `collapsible` prop to make the sidebar collapsible.
+
+Available options are `offcanvas`, `icon` and `none`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar collapsible="offcanvas | icon | none" />
+</template>
+```
+
+| Prop        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `offcanvas` | A collapsible sidebar that slides in from the left or right. |
+| `icon`      | A sidebar that collapses to icons.                           |
+| `none`      | A non-collapsible sidebar.                                   |
+
+## useSidebar
+
+The `useSidebar` hook is used to control the sidebar.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { useSidebar } from '@/components/ui/sidebar'
+
+const {
+  state,
+  open,
+  setOpen,
+  openMobile,
+  setOpenMobile,
+  isMobile,
+  toggleSidebar,
+} = useSidebar()
+</script>
+
+```
+
+| Property        | Type                      | Description                                   |
+| --------------- | ------------------------- | --------------------------------------------- |
+| `state`         | `expanded` or `collapsed` | The current state of the sidebar.             |
+| `open`          | `boolean`                 | Whether the sidebar is open.                  |
+| `setOpen`       | `(open: boolean) => void` | Sets the open state of the sidebar.           |
+| `openMobile`    | `boolean`                 | Whether the sidebar is open on mobile.        |
+| `setOpenMobile` | `(open: boolean) => void` | Sets the open state of the sidebar on mobile. |
+| `isMobile`      | `boolean`                 | Whether the sidebar is on mobile.             |
+| `toggleSidebar` | `() => void`              | Toggles the sidebar. Desktop and mobile.      |
+
+## SidebarHeader
+
+Use the `SidebarHeader` component to add a sticky header to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarHeader`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarHeader&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar header with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton>
+                Select Workspace
+                <ChevronDown class="ml-auto" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+              <DropdownMenuItem>
+                <span>Acme Inc</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>Acme Corp.</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+  </Sidebar>
+</template>
+```
+
+## SidebarFooter
+
+Use the `SidebarFooter` component to add a sticky footer to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarFooter`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarFooter&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar footer with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton>
+                  <User2 />
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  </SidebarProvider>
+</template>
+```
+
+## SidebarContent
+
+The `SidebarContent` component is used to wrap the content of the sidebar. This is where you add your `SidebarGroup` components. It is scrollable.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarGroup />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarGroup
+
+Use the `SidebarGroup` component to create a section within the sidebar.
+
+A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optional `SidebarGroupAction`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroup&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar group.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent, SidebarGroup } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupAction>
+          <Plus />
+          <span class="sr-only">Add Project</span>
+        </SidebarGroupAction>
+        <SidebarGroupContent></SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## Collapsible SidebarGroup
+
+To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroupCollapsible&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A collapsible sidebar group.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Collapsible defaultOpen class="group/collapsible">
+    <SidebarGroup>
+      <SidebarGroupLabel asChild>
+        <CollapsibleTrigger>
+          Help
+          <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+        </CollapsibleTrigger>
+      </SidebarGroupLabel>
+      <CollapsibleContent>
+        <SidebarGroupContent />
+      </CollapsibleContent>
+    </SidebarGroup>
+  </Collapsible>
+</template>
+```
+
+<Callout>
+
+  **Note:** We wrap the `CollapsibleTrigger` in a `SidebarGroupLabel` to render
+  a button.
+
+</Callout>
+
+## SidebarGroupAction
+
+Use the `SidebarGroupAction` component to add an action button to the `SidebarGroup`.
+
+```vue:line-numbers {5-7}
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
+    <SidebarGroupAction title="Add Project">
+      <Plus />
+      <span class="sr-only">Add Project</span>
+    </SidebarGroupAction>
+    <SidebarGroupContent />
+  </SidebarGroup>
+</template>
+```
+
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroupAction&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar group with an action button.
+  </figcaption>
+</figure>
+
+## SidebarMenu
+
+The `SidebarMenu` component is used for building a menu within a `SidebarGroup`.
+
+A `SidebarMenu` component is composed of `SidebarMenuItem`, `SidebarMenuButton`, `<SidebarMenuAction />` and `<SidebarMenuSub />` components.
+
+<img
+  src="/images/sidebar-menu.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  class="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<img
+  src="/images/sidebar-menu-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  class="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+Here's an example of a `SidebarMenu` component rendering a list of projects.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenu&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a list of projects.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Projects</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton asChild>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{project.name}}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarMenuButton
+
+The `SidebarMenuButton` component is used to render a menu button within a `SidebarMenuItem`.
+
+### Link or Anchor
+
+By default, the `SidebarMenuButton` renders a button but you can use the `asChild` prop to render a different component such as a `Link` or an `a` tag.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild>
+    <a href="#">Home</a>
+  </SidebarMenuButton>
+</template>
+```
+
+### Icon and Label
+
+You can render an icon and a truncated label inside the button. Remember to wrap the label in a `<span>`.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+</template>
+```
+
+### isActive
+
+Use the `isActive` prop to mark a menu item as active.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild isActive>
+    <a href="#">Home</a>
+  </SidebarMenuButton>
+</template>
+```
+
+## SidebarMenuAction
+
+The `SidebarMenuAction` component is used to render a menu action within a `SidebarMenuItem`.
+
+This button works independently of the `SidebarMenuButton` i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton asChild>
+      <a href="#">
+        <Home />
+        <span>Home</span>
+      </a>
+    </SidebarMenuButton>
+    <SidebarMenuAction>
+      <Plus />
+      <span class="sr-only">Add Project</span>
+    </SidebarMenuAction>
+  </SidebarMenuItem>
+</template>
+```
+
+### DropdownMenu
+
+Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuAction&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu action with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton asChild>
+      <a href="#">
+        <Home />
+        <span>Home</span>
+      </a>
+    </SidebarMenuButton>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuAction>
+          <MoreHorizontal />
+        </SidebarMenuAction>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" align="start">
+        <DropdownMenuItem>
+          <span>Edit Project</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Delete Project</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </SidebarMenuItem>
+</template>
+```
+
+## SidebarMenuSub
+
+The `SidebarMenuSub` component is used to render a submenu within a `SidebarMenu`.
+
+Use `<SidebarMenuSubItem />` and `<SidebarMenuSubButton />` to render a submenu item.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuSub&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a submenu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuSub>
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton />
+      </SidebarMenuSubItem>
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton />
+      </SidebarMenuSubItem>
+    </SidebarMenuSub>
+  </SidebarMenuItem>
+</template>
+```
+
+## Collapsible SidebarMenu
+
+To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub` components in a `Collapsible`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuCollapsible&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A collapsible sidebar menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenu>
+    <Collapsible defaultOpen class="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton />
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <SidebarMenuSubItem />
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  </SidebarMenu>
+</template>
+```
+
+## SidebarMenuBadge
+
+The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenuItem`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuBadge&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a badge.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuBadge>24</SidebarMenuBadge>
+  </SidebarMenuItem>
+</template>
+```
+
+## SidebarMenuSkeleton
+
+The `SidebarMenuSkeleton` component is used to render a skeleton within a `SidebarMenuItem`. You can use this to show a loading state while waiting for data to load.
+
+```vue:line-numbers
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="i in 5" :key="i">
+      <SidebarMenuSkeleton />
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
+```
+
+## SidebarSeparator
+
+The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarSeparator />
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarSeparator />
+      <SidebarGroup />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarTrigger
+
+Use the `SidebarTrigger` component to render a button that toggles the sidebar.
+
+The `SidebarTrigger` component must be used within a `SidebarProvider`.
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar />
+    <main>
+      <SidebarTrigger />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+### Custom Trigger
+
+To create a custom trigger, you can use the `useSidebar` hook.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { useSidebar } from '@/components/ui/sidebar'
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button @click="toggleSidebar">Toggle Sidebar</button>
+</template>
+```
+
+## SidebarRail
+
+The `SidebarRail` component is used to render a rail within a `Sidebar`. This rail can be used to toggle the sidebar.
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarContent>
+      <SidebarGroup />
+    </SidebarContent>
+    <SidebarFooter />
+    <SidebarRail />
+  </Sidebar>
+</template>
+```
+
+## Controlled Sidebar
+
+Use the `open` and `onOpenChange` props to control the sidebar.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarControlled&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A controlled sidebar.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar />
+  </SidebarProvider>
+</template>
+```
+
+## Theming
+
+We use the following CSS variables to theme the sidebar.
+
+```css
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 240 5.9% 10%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+**We intentionally use different variables for the sidebar and the rest of the application** to make it easy to have a sidebar that is styled differently from the rest of the application. Think a sidebar with a darker shade from the main application.
+
+## Styling
+
+Here are some tips for styling the sidebar based on different states.
+
+- **Styling an element based on the sidebar collapsible state.** The following will hide the `SidebarGroup` when the sidebar is in `icon` mode.
+
+```vue
+<template>
+  <Sidebar collapsible="icon">
+    <SidebarContent>
+      <SidebarGroup class="group-data-[collapsible=icon]:hidden" />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+- **Styling a menu action based on the menu button active state.** The following will force the menu action to be visible when the menu button is active.
+
+```vue
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuAction class="peer-data-[active=true]/menu-button:opacity-100" />
+  </SidebarMenuItem>
+</template>
+```
+
+You can find more tips on using states for styling in this [Twitter thread](https://x.com/shadcn/status/1842329158879420864).
diff --git a/apps/www/src/public/r/styles/default/DemoSidebar.json b/apps/www/src/public/r/styles/default/DemoSidebar.json
new file mode 100644
index 00000000..087fa87b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebar.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebar",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\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/DemoSidebarControlled.json b/apps/www/src/public/r/styles/default/DemoSidebarControlled.json
new file mode 100644
index 00000000..b831f485
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarControlled.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarControlled",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\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/DemoSidebarFooter.json b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
new file mode 100644
index 00000000..1b0e09ca
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarFooter",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroup.json b/apps/www/src/public/r/styles/default/DemoSidebarGroup.json
new file mode 100644
index 00000000..2dae19a4
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroup.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarGroup",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\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/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
new file mode 100644
index 00000000..0e547328
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "DemoSidebarGroupAction",
+  "type": "registry:block",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
new file mode 100644
index 00000000..2aab4e5e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarGroupCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupCollapsible.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  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\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
new file mode 100644
index 00000000..d24fffae
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarHeader",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenu.json b/apps/www/src/public/r/styles/default/DemoSidebarMenu.json
new file mode 100644
index 00000000..a479108d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenu.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenu",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</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/DemoSidebarMenuAction.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
new file mode 100644
index 00000000..61d1924b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuAction",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuAction.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  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\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/DemoSidebarMenuBadge.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
new file mode 100644
index 00000000..a166ee8b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuBadge",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\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/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
new file mode 100644
index 00000000..82c453db
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
new file mode 100644
index 00000000..99806a37
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuSub",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\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'\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              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\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              </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/Login01.json b/apps/www/src/public/r/styles/default/Login01.json
new file mode 100644
index 00000000..9e7d8cb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Login01.json
@@ -0,0 +1,26 @@
+{
+  "name": "Login01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "LoginForm.vue",
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "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",
+      "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",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index f86687c6..dcb2eb2e 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -15,25 +15,25 @@
   "files": [
     {
       "path": "block/Sidebar01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\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\n  = 'A simple sidebar with navigation grouped by section.'\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/Sidebar01/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\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}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\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}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar01/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": ""
     },
     {
       "path": "block/Sidebar01/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
index 4e8921b3..6df2d906 100644
--- a/apps/www/src/public/r/styles/default/Sidebar02.json
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\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 12881329..51ef75c7 100644
--- a/apps/www/src/public/r/styles/default/Sidebar03.json
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -17,7 +17,7 @@
     },
     {
       "path": "block/Sidebar03/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  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } 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    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\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    <SidebarRail />\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  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } 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    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\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    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar06.json b/apps/www/src/public/r/styles/default/Sidebar06.json
index 55621009..c1924b2e 100644
--- a/apps/www/src/public/r/styles/default/Sidebar06.json
+++ b/apps/www/src/public/r/styles/default/Sidebar06.json
@@ -18,25 +18,25 @@
   "files": [
     {
       "path": "block/Sidebar06/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/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 submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar06/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/Sidebar06/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } 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}\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      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd } 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}\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      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar06/components/NavMain.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  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\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  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar06/components/SidebarOptInForm.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 { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\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 { SidebarInput } from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index d2d01970..e29dcd9b 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -18,37 +18,37 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/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 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex 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        </div>\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 description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/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 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex 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        </div>\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/Sidebar07/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\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: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\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: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/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": ""
     },
     {
       "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-[--radix-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": ""
     },
     {
       "path": "block/Sidebar07/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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar08.json b/apps/www/src/public/r/styles/default/Sidebar08.json
index b24f1354..41372362 100644
--- a/apps/www/src/public/r/styles/default/Sidebar08.json
+++ b/apps/www/src/public/r/styles/default/Sidebar08.json
@@ -18,37 +18,37 @@
   "files": [
     {
       "path": "block/Sidebar08/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/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\">\n        <div class=\"flex 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        </div>\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 description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar08/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\">\n        <div class=\"flex 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        </div>\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/Sidebar08/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\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                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\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                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\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, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "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": ""
     },
     {
       "path": "block/Sidebar08/components/NavSecondary.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\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 size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\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 {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\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 size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/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-[--radix-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": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar09.json b/apps/www/src/public/r/styles/default/Sidebar09.json
index 4e6aa941..bf028c2f 100644
--- a/apps/www/src/public/r/styles/default/Sidebar09.json
+++ b/apps/www/src/public/r/styles/default/Sidebar09.json
@@ -16,19 +16,19 @@
   "files": [
     {
       "path": "block/Sidebar09/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/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    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar09/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    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar09/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\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                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\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                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar09/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 md:h-8 md:p-0\"\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-[--radix-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 md:h-8 md:p-0\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar10.json b/apps/www/src/public/r/styles/default/Sidebar10.json
index 987027a1..0baa4546 100644
--- a/apps/www/src/public/r/styles/default/Sidebar10.json
+++ b/apps/www/src/public/r/styles/default/Sidebar10.json
@@ -21,49 +21,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 type { Component } from 'vue'\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": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
index 6545b1e0..9958c7cf 100644
--- a/apps/www/src/public/r/styles/default/Sidebar11.json
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -13,7 +13,7 @@
   "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"
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar12.json b/apps/www/src/public/r/styles/default/Sidebar12.json
index 13238b69..b737597e 100644
--- a/apps/www/src/public/r/styles/default/Sidebar12.json
+++ b/apps/www/src/public/r/styles/default/Sidebar12.json
@@ -18,31 +18,31 @@
   "files": [
     {
       "path": "block/Sidebar12/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.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=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</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-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.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=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</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-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar12/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/components/Calendars.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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/components/DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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=\"start\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar13.json b/apps/www/src/public/r/styles/default/Sidebar13.json
index 45e00031..7f9c6076 100644
--- a/apps/www/src/public/r/styles/default/Sidebar13.json
+++ b/apps/www/src/public/r/styles/default/Sidebar13.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "block/Sidebar13/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar13/components/SettingsDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar14.json b/apps/www/src/public/r/styles/default/Sidebar14.json
index 61f86f01..0a8e09e2 100644
--- a/apps/www/src/public/r/styles/default/Sidebar14.json
+++ b/apps/www/src/public/r/styles/default/Sidebar14.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "block/Sidebar14/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-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        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\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    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-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        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\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    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar14/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar15.json b/apps/www/src/public/r/styles/default/Sidebar15.json
index d72f6be0..5a63ea70 100644
--- a/apps/www/src/public/r/styles/default/Sidebar15.json
+++ b/apps/www/src/public/r/styles/default/Sidebar15.json
@@ -24,73 +24,73 @@
   "files": [
     {
       "path": "block/Sidebar15/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.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    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\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      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.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    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\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      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar15/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/Calendars.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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/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/Sidebar15/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/Sidebar15/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/Sidebar15/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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=\"start\"\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": ""
     },
     {
       "path": "block/Sidebar15/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/Sidebar15/components/SidebarLeft.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/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/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar15/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/Sidebar15/components/SidebarRight.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/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'\n\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\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\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'\n\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\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\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": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebar.json b/apps/www/src/public/r/styles/new-york/DemoSidebar.json
new file mode 100644
index 00000000..8452491f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebar.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebar",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\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/DemoSidebarControlled.json b/apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
new file mode 100644
index 00000000..f6882b6c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarControlled",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\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/DemoSidebarFooter.json b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
new file mode 100644
index 00000000..b1ac6972
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarFooter",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
new file mode 100644
index 00000000..bf6a3398
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarGroup",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\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/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
new file mode 100644
index 00000000..0ba7c82c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "DemoSidebarGroupAction",
+  "type": "registry:block",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
new file mode 100644
index 00000000..6c6ded41
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarGroupCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupCollapsible.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  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\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/DemoSidebarHeader.json b/apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
new file mode 100644
index 00000000..d24fffae
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarHeader",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
new file mode 100644
index 00000000..7394fcba
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenu",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</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/DemoSidebarMenuAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
new file mode 100644
index 00000000..dcdf84f4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuAction",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuAction.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  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\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/DemoSidebarMenuBadge.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
new file mode 100644
index 00000000..fbe86a35
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuBadge",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\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
new file mode 100644
index 00000000..fe279ba1
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "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",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
new file mode 100644
index 00000000..516e0678
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuSub",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\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'\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              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\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              </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/Login01.json b/apps/www/src/public/r/styles/new-york/Login01.json
new file mode 100644
index 00000000..9e7d8cb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Login01.json
@@ -0,0 +1,26 @@
+{
+  "name": "Login01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "LoginForm.vue",
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "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",
+      "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",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index f86687c6..86432ecb 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -33,7 +33,7 @@
     },
     {
       "path": "block/Sidebar01/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
index a4c37bbf..5ab8ce36 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar02.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index d2d01970..62acb276 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -42,13 +42,13 @@
     },
     {
       "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-[--radix-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/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",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar08.json b/apps/www/src/public/r/styles/new-york/Sidebar08.json
index b24f1354..472f743c 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar08.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar08.json
@@ -48,7 +48,7 @@
     },
     {
       "path": "block/Sidebar08/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-[--radix-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/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",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar09.json b/apps/www/src/public/r/styles/new-york/Sidebar09.json
index 88f206b6..3fb1bbff 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar09.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar09.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "block/Sidebar09/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 md:h-8 md:p-0\"\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-[--radix-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/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 md:h-8 md:p-0\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar10.json b/apps/www/src/public/r/styles/new-york/Sidebar10.json
index 987027a1..8efa072b 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar10.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar10.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "block/Sidebar10/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/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",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar12.json b/apps/www/src/public/r/styles/new-york/Sidebar12.json
index 13238b69..63f7acf8 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar12.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar12.json
@@ -42,7 +42,7 @@
     },
     {
       "path": "block/Sidebar12/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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/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=\"start\"\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": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar13.json b/apps/www/src/public/r/styles/new-york/Sidebar13.json
index 45e00031..a7af5177 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar13.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar13.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "block/Sidebar13/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar14.json b/apps/www/src/public/r/styles/new-york/Sidebar14.json
index 61f86f01..a599da02 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar14.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar14.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "block/Sidebar14/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar15.json b/apps/www/src/public/r/styles/new-york/Sidebar15.json
index d72f6be0..1f830957 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar15.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar15.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "block/Sidebar15/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
@@ -66,13 +66,13 @@
     },
     {
       "path": "block/Sidebar15/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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/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=\"start\"\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": ""
     },
     {
       "path": "block/Sidebar15/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/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",
       "type": "registry:component",
       "target": ""
     },
@@ -84,7 +84,7 @@
     },
     {
       "path": "block/Sidebar15/components/SidebarRight.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 3db7b0c3..831834bd 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -6717,6 +6717,232 @@
       }
     ]
   },
+  {
+    "name": "DemoSidebar",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarControlled",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarFooter",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroup",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupAction",
+    "type": "registry:block",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupCollapsible.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  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarHeader",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenu",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuAction",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuAction.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  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuBadge",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuSub",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\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'\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              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Login01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "LoginForm.vue",
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "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",
+        "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",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "Sidebar01",
     "type": "registry:block",
@@ -6752,7 +6978,7 @@
       },
       {
         "path": "block/Sidebar01/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -6794,7 +7020,7 @@
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -6972,13 +7198,13 @@
       },
       {
         "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-[--radix-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/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",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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": ""
       }
@@ -7034,7 +7260,7 @@
       },
       {
         "path": "block/Sidebar08/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-[--radix-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/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",
         "type": "registry:component",
         "target": ""
       }
@@ -7070,7 +7296,7 @@
       },
       {
         "path": "block/Sidebar09/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 md:h-8 md:p-0\"\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-[--radix-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/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 md:h-8 md:p-0\"\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": ""
       }
@@ -7135,7 +7361,7 @@
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/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",
         "type": "registry:component",
         "target": ""
       },
@@ -7224,7 +7450,7 @@
       },
       {
         "path": "block/Sidebar12/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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/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=\"start\"\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": ""
       }
@@ -7244,7 +7470,7 @@
     "files": [
       {
         "path": "block/Sidebar13/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
@@ -7274,7 +7500,7 @@
       },
       {
         "path": "block/Sidebar14/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7312,7 +7538,7 @@
       },
       {
         "path": "block/Sidebar15/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -7348,13 +7574,13 @@
       },
       {
         "path": "block/Sidebar15/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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/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=\"start\"\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": ""
       },
       {
         "path": "block/Sidebar15/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/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",
         "type": "registry:component",
         "target": ""
       },
@@ -7366,7 +7592,7 @@
       },
       {
         "path": "block/Sidebar15/components/SidebarRight.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -13909,6 +14135,232 @@
       }
     ]
   },
+  {
+    "name": "DemoSidebar",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarControlled",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarFooter",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroup",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupAction",
+    "type": "registry:block",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupCollapsible.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  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarHeader",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenu",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuAction",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuAction.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  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuBadge",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\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"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "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",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuSub",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\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'\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              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\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              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Login01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "LoginForm.vue",
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "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",
+        "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",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "Sidebar01",
     "type": "registry:block",
@@ -13926,25 +14378,25 @@
     "files": [
       {
         "path": "block/Sidebar01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\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\n  = 'A simple sidebar with navigation grouped by section.'\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/Sidebar01/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\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}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\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}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar01/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": ""
       },
       {
         "path": "block/Sidebar01/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -13986,7 +14438,7 @@
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.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  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\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  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14011,7 +14463,7 @@
       },
       {
         "path": "block/Sidebar03/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  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } 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    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\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    <SidebarRail />\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  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } 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    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\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    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14096,25 +14548,25 @@
     "files": [
       {
         "path": "block/Sidebar06/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/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 submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar06/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/Sidebar06/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } 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}\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      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd } 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}\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      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar06/components/NavMain.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  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\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  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar06/components/SidebarOptInForm.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 { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\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 { SidebarInput } from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14140,37 +14592,37 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/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 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex 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        </div>\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 description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/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 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex 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        </div>\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/Sidebar07/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\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: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\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: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/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": ""
       },
       {
         "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-[--radix-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/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",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, 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 { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\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": ""
       }
@@ -14196,19 +14648,19 @@
     "files": [
       {
         "path": "block/Sidebar08/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/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\">\n        <div class=\"flex 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        </div>\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 description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar08/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\">\n        <div class=\"flex 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        </div>\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/Sidebar08/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\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                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\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                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar08/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\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, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\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          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14220,13 +14672,13 @@
       },
       {
         "path": "block/Sidebar08/components/NavSecondary.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\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 size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\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 {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\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 size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar08/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-[--radix-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": ""
       }
@@ -14250,19 +14702,19 @@
     "files": [
       {
         "path": "block/Sidebar09/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/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    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar09/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    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar09/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\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                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\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                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar09/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 md:h-8 md:p-0\"\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-[--radix-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 md:h-8 md:p-0\"\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": ""
       }
@@ -14327,7 +14779,7 @@
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/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",
         "type": "registry:component",
         "target": ""
       },
@@ -14392,31 +14844,31 @@
     "files": [
       {
         "path": "block/Sidebar12/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.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=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</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-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.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=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</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-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar12/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/components/Calendars.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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/components/DatePicker.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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=\"start\"\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": ""
       }
@@ -14436,13 +14888,13 @@
     "files": [
       {
         "path": "block/Sidebar13/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar13/components/SettingsDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14460,13 +14912,13 @@
     "files": [
       {
         "path": "block/Sidebar14/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-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        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\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    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-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        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\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    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar14/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14498,73 +14950,73 @@
     "files": [
       {
         "path": "block/Sidebar15/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.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    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\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      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.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    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\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      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar15/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\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    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\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=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/Calendars.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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\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  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/DatePicker.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/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/Sidebar15/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/Sidebar15/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/Sidebar15/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-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\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=\"start\"\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": ""
       },
       {
         "path": "block/Sidebar15/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\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/Sidebar15/components/SidebarLeft.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/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/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar15/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/Sidebar15/components/SidebarRight.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/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'\n\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\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\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'\n\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\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\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": ""
       }
diff --git a/apps/www/src/registry/default/block/DemoSidebar.vue b/apps/www/src/registry/default/block/DemoSidebar.vue
new file mode 100644
index 00000000..09d6c358
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in items" :key="item.title">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <component :is="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarControlled.vue b/apps/www/src/registry/default/block/DemoSidebarControlled.vue
new file mode 100644
index 00000000..1bc2d806
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarControlled.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+
+const open = ref(true)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header className="flex items-center h-12 px-4 justify-between">
+        <Button
+          size="sm"
+          variant="ghost"
+          @click="open = !open"
+        >
+          <PanelLeftClose v-if="open" />
+          <PanelLeftOpen v-else />
+          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>
+        </Button>
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarFooter.vue b/apps/www/src/registry/default/block/DemoSidebarFooter.vue
new file mode 100644
index 00000000..f7579504
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarFooter.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+import { ChevronUp } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroup.vue b/apps/www/src/registry/default/block/DemoSidebarGroup.vue
new file mode 100644
index 00000000..5af07634
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroup.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Help</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <LifeBuoy />
+                  Support
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Send />
+                  Feedback
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue b/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
new file mode 100644
index 00000000..c033c07c
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  Map,
+  PieChart,
+  Plus,
+} from 'lucide-vue-next'
+
+import { toast, Toaster } from 'vue-sonner'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Toaster
+      position="bottom-left"
+      :toast-options="{
+        class: 'ml-[160px]',
+      }"
+    />
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupAction
+            title="Add Project"
+            @click="() => toast('You clicked the group action!')"
+          >
+            <Plus /> <span class="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Frame />
+                    <span>Design Engineering</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <PieChart />
+                    <span>Sales & Marketing</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Map />
+                    <span>Travel</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue b/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
new file mode 100644
index 00000000..cb07ec35
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <Collapsible :default-open="true" class="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel
+              as-child
+              class="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <CollapsibleTrigger>
+                Help
+                <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+              </CollapsibleTrigger>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <LifeBuoy />
+                      Support
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <Send />
+                      Feedback
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarHeader.vue b/apps/www/src/registry/default/block/DemoSidebarHeader.vue
new file mode 100644
index 00000000..edb2bd33
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarHeader.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+import { ChevronDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Select Workspace
+                  <ChevronDown class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+                <DropdownMenuItem>
+                  <span>Acme Inc</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Acme Corp.</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenu.vue b/apps/www/src/registry/default/block/DemoSidebarMenu.vue
new file mode 100644
index 00000000..59c791f9
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue b/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
new file mode 100644
index 00000000..c2ef7463
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue b/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
new file mode 100644
index 00000000..5fd743b4
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+    badge: '24',
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+    badge: '12',
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+    badge: '3',
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+    badge: '21',
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+    badge: '8',
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue b/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
new file mode 100644
index 00000000..86a76fbc
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Collapsible
+                v-for="(item, index) in items"
+                :key="index"
+                class="group/collapsible"
+                :default-open="index === 0"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger as-child>
+                    <SidebarMenuButton>
+                      <span>{{ item.title }}</span>
+                      <ChevronRight class="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                        <SidebarMenuSubButton as-child>
+                          <a :href="subItem.url">
+                            <span>{{ subItem.title }}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue b/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
new file mode 100644
index 00000000..a7e97fec
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in items" :key="index">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                    <SidebarMenuSubButton as-child>
+                      <a :href="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Login01/components/LoginForm.vue b/apps/www/src/registry/default/block/Login01/components/LoginForm.vue
new file mode 100644
index 00000000..41d6d566
--- /dev/null
+++ b/apps/www/src/registry/default/block/Login01/components/LoginForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/default/block/Login01/page.vue b/apps/www/src/registry/default/block/Login01/page.vue
new file mode 100644
index 00000000..4ded98e3
--- /dev/null
+++ b/apps/www/src/registry/default/block/Login01/page.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '870px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'
+</script>
+
+<template>
+  <div className="flex h-screen w-full items-center justify-center px-4">
+    <LoginForm />
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
index 81f5e639..ffdc80d1 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'
-import VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'
+import SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'
 
 import {
   Sidebar,
@@ -14,7 +14,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
index bc39a8f4..b88fa9e3 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarInput,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
index 2fe6c8f1..5a6d3e02 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
@@ -4,13 +4,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
 
 import { ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar01/page.vue b/apps/www/src/registry/default/block/Sidebar01/page.vue
index 33adc1de..cff5022c 100644
--- a/apps/www/src/registry/default/block/Sidebar01/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/page.vue
@@ -5,7 +5,7 @@ export const description
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -13,13 +13,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
index e8eb4805..9911908b 100644
--- a/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
@@ -12,7 +12,7 @@ import {
   SidebarMenuSubItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar03/page.vue b/apps/www/src/registry/default/block/Sidebar03/page.vue
index fc0cce1b..d0a87c41 100644
--- a/apps/www/src/registry/default/block/Sidebar03/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar03/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
index 74342c74..0fa3b157 100644
--- a/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
@@ -11,7 +11,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   type SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar04/page.vue b/apps/www/src/registry/default/block/Sidebar04/page.vue
index 80bfa222..bb77458f 100644
--- a/apps/www/src/registry/default/block/Sidebar04/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar04/page.vue
@@ -4,7 +4,7 @@ export const description = 'A floating sidebar with submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
index b1aeec8d..0ebeac4c 100644
--- a/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'
+import SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   Sidebar,
   SidebarContent,
@@ -18,7 +18,7 @@ import {
   SidebarMenuSubItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
index bc39a8f4..b88fa9e3 100644
--- a/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarInput,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/src/registry/default/block/Sidebar05/page.vue b/apps/www/src/registry/default/block/Sidebar05/page.vue
index 9cd24191..97e1e043 100644
--- a/apps/www/src/registry/default/block/Sidebar05/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with collapsible submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
index 757100bb..e9d9bc3e 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'
-import SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'
+import NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'
+import SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'
 
 import {
   Sidebar,
@@ -12,7 +12,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
index 13d0fd2f..6a2c6478 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
@@ -4,14 +4,14 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { useMediaQuery } from '@vueuse/core'
 import { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
index 8311df11..fbfeaa7b 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/registry/new-york/ui/card'
-import { SidebarInput } from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/card'
+import { SidebarInput } from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/page.vue b/apps/www/src/registry/default/block/Sidebar06/page.vue
index 0e6d0b7a..adcef703 100644
--- a/apps/www/src/registry/default/block/Sidebar06/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with submenus as dropdowns.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar06/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
index ed8dc8a4..dfdb5932 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { SidebarProps } from '@/registry/new-york/ui/sidebar'
+import type { SidebarProps } from '@/registry/default/ui/sidebar'
 
-import NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'
-import NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'
-import NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'
+import NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'
+import NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import {
   AudioWaveform,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
index a2c4b664..94564337 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -13,7 +13,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
index b33a3196..b482f4e4 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Folder,
   Forward,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
index b6f1b624..ca163b1c 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
index 0a207994..3e69d3bb 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
@@ -7,14 +7,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronsUpDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar07/page.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
index 8482f770..83c8f540 100644
--- a/apps/www/src/registry/default/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/page.vue
@@ -6,7 +6,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -14,13 +14,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
index d80b5c56..c7784427 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'
+import NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'
 
-import NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'
-import NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'
+import NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'
+import NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'
+import NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   type SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BookOpen,
   Bot,
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
index d17a748b..db439924 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -14,7 +14,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
index b33a3196..b482f4e4 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Folder,
   Forward,
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
index 22c14698..60cfece5 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
@@ -7,7 +7,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
index b6f1b624..ca163b1c 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar08/page.vue b/apps/www/src/registry/default/block/Sidebar08/page.vue
index cee439ec..d187e95e 100644
--- a/apps/www/src/registry/default/block/Sidebar08/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar08/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
index fb09e799..1a4ef28f 100644
--- a/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'
+import NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'
 
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   Sidebar,
   SidebarContent,
@@ -15,8 +15,8 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
-import { Switch } from '@/registry/new-york/ui/switch'
+} from '@/registry/default/ui/sidebar'
+import { Switch } from '@/registry/default/ui/switch'
 import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
index 4a31d47c..84242afe 100644
--- a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar09/page.vue b/apps/www/src/registry/default/block/Sidebar09/page.vue
index 88430634..02b94f09 100644
--- a/apps/www/src/registry/default/block/Sidebar09/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar09/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
index 15a15803..acd484c2 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
+import NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'
 
-import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
-import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'
+import NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarHeader,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   AudioWaveform,
   Blocks,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
index a3b303d3..d414a617 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
+} from '@/registry/default/ui/popover'
 import {
   Sidebar,
   SidebarContent,
@@ -14,7 +14,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowDown,
   ArrowUp,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
index 97a99afc..dbfffc2f 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowUpRight,
   Link,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
index 3fb44bcd..5d4907b7 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
@@ -5,7 +5,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
index 3d728239..7dde7a3a 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
@@ -9,7 +9,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
index b768426d..a046bddf 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -16,7 +16,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
index 125caaa3..b9b27e43 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
@@ -7,12 +7,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar10/page.vue b/apps/www/src/registry/default/block/Sidebar10/page.vue
index a48f2226..8140e773 100644
--- a/apps/www/src/registry/default/block/Sidebar10/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/page.vue
@@ -4,20 +4,20 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
-import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
+import AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'
+import NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
index 0039f959..c44c17c4 100644
--- a/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
+import Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -12,7 +12,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { File } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
index f8fce337..62c1be16 100644
--- a/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
@@ -3,13 +3,13 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, File, Folder } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar11/page.vue b/apps/www/src/registry/default/block/Sidebar11/page.vue
index baa2bdb0..da8b520c 100644
--- a/apps/www/src/registry/default/block/Sidebar11/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar11/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
index 1425cc45..972a2d95 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
+import Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'
 
-import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
-import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
+import DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'
+import NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -14,7 +14,7 @@ import {
   type SidebarProps,
   SidebarRail,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Plus } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
index 09a713c5..c845894e 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
index ec51c38b..dcc555d5 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   SidebarGroup,
   SidebarGroupContent,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
index 42bd13bd..55fd8461 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar12/page.vue b/apps/www/src/registry/default/block/Sidebar12/page.vue
index 00d25430..53fac029 100644
--- a/apps/www/src/registry/default/block/Sidebar12/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/page.vue
@@ -4,19 +4,19 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
index ab6e23be..af901d4d 100644
--- a/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
+++ b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
@@ -6,16 +6,16 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
   DialogTrigger,
-} from '@/registry/new-york/ui/dialog'
+} from '@/registry/default/ui/dialog'
 import {
   Sidebar,
   SidebarContent,
@@ -25,7 +25,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Bell,
   Check,
diff --git a/apps/www/src/registry/default/block/Sidebar13/page.vue b/apps/www/src/registry/default/block/Sidebar13/page.vue
index 1b5220cd..f7145052 100644
--- a/apps/www/src/registry/default/block/Sidebar13/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar13/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
+import SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
index 6c72d051..065f7c13 100644
--- a/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type {
   SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Sidebar,
   SidebarContent,
@@ -15,7 +15,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar14/page.vue b/apps/www/src/registry/default/block/Sidebar14/page.vue
index ee75a15b..583d3e39 100644
--- a/apps/www/src/registry/default/block/Sidebar14/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar14/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar on the right.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,12 +12,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
index 6c72d051..065f7c13 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type {
   SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Sidebar,
   SidebarContent,
@@ -15,7 +15,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
index 09a713c5..c845894e 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
index ec51c38b..dcc555d5 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   SidebarGroup,
   SidebarGroupContent,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
index 97a99afc..dbfffc2f 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowUpRight,
   Link,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
index 3fb44bcd..5d4907b7 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
@@ -5,7 +5,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
index 3d728239..7dde7a3a 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
@@ -9,7 +9,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
index 42bd13bd..55fd8461 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
index b768426d..a046bddf 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -16,7 +16,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
index 0a30d620..83ea44a7 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
+import NavFavorites from '@/registry/default/block/Sidebar15/components/NavFavorites.vue'
 
-import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
-import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'
+import NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar15/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarHeader,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   AudioWaveform,
   Blocks,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
index 840c9457..3be823fa 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
+import Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'
 
-import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
-import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
+import DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'
+import NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -13,7 +13,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Plus } from 'lucide-vue-next'
 
 const props = withDefaults(defineProps<SidebarProps>(), {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
index 341074cd..ad0ba82b 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
@@ -7,13 +7,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar15/page.vue b/apps/www/src/registry/default/block/Sidebar15/page.vue
index 2ff6b9cb..ef05b175 100644
--- a/apps/www/src/registry/default/block/Sidebar15/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/page.vue
@@ -4,20 +4,20 @@ export const description = 'A left and right sidebar.'
 </script>
 
 <script setup lang="ts">
-import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
-import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
+import SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'
+import SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebar.vue b/apps/www/src/registry/new-york/block/DemoSidebar.vue
new file mode 100644
index 00000000..0d4d0909
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in items" :key="item.title">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <component :is="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue b/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
new file mode 100644
index 00000000..048c4500
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+
+const open = ref(true)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header className="flex items-center h-12 px-4 justify-between">
+        <Button
+          size="sm"
+          variant="ghost"
+          @click="open = !open"
+        >
+          <PanelLeftClose v-if="open" />
+          <PanelLeftOpen v-else />
+          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>
+        </Button>
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue b/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
new file mode 100644
index 00000000..a4017dcc
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronUp } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
new file mode 100644
index 00000000..dbf85ff6
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Help</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <LifeBuoy />
+                  Support
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Send />
+                  Feedback
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
new file mode 100644
index 00000000..20feb71b
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  Map,
+  PieChart,
+  Plus,
+} from 'lucide-vue-next'
+
+import { toast, Toaster } from 'vue-sonner'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Toaster
+      position="bottom-left"
+      :toast-options="{
+        class: 'ml-[160px]',
+      }"
+    />
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupAction
+            title="Add Project"
+            @click="() => toast('You clicked the group action!')"
+          >
+            <Plus /> <span class="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Frame />
+                    <span>Design Engineering</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <PieChart />
+                    <span>Sales & Marketing</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Map />
+                    <span>Travel</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
new file mode 100644
index 00000000..31722eb0
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <Collapsible :default-open="true" class="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel
+              as-child
+              class="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <CollapsibleTrigger>
+                Help
+                <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+              </CollapsibleTrigger>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <LifeBuoy />
+                      Support
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <Send />
+                      Feedback
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue b/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
new file mode 100644
index 00000000..89ed10d4
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Select Workspace
+                  <ChevronDown class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+                <DropdownMenuItem>
+                  <span>Acme Inc</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Acme Corp.</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
new file mode 100644
index 00000000..c707b3ea
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
new file mode 100644
index 00000000..1c388fb9
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
new file mode 100644
index 00000000..8350bf9f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+    badge: '24',
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+    badge: '12',
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+    badge: '3',
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+    badge: '21',
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+    badge: '8',
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
new file mode 100644
index 00000000..962d6281
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Collapsible
+                v-for="(item, index) in items"
+                :key="index"
+                class="group/collapsible"
+                :default-open="index === 0"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger as-child>
+                    <SidebarMenuButton>
+                      <span>{{ item.title }}</span>
+                      <ChevronRight class="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                        <SidebarMenuSubButton as-child>
+                          <a :href="subItem.url">
+                            <span>{{ subItem.title }}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
new file mode 100644
index 00000000..8dca212b
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in items" :key="index">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                    <SidebarMenuSubButton as-child>
+                      <a :href="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue b/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
new file mode 100644
index 00000000..cefd2669
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Login01/page.vue b/apps/www/src/registry/new-york/block/Login01/page.vue
new file mode 100644
index 00000000..7383b3ab
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Login01/page.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '870px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'
+</script>
+
+<template>
+  <div className="flex h-screen w-full items-center justify-center px-4">
+    <LoginForm />
+  </div>
+</template>