From 64c0371280a0a50b22e3cc653bd25e17d0b34e52 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 22 Oct 2024 12:46:09 +0200
Subject: [PATCH] docs: fix block preview

---
 .../theme/components/BlockContainer.vue       | 237 +++++++++++++++++
 .../.vitepress/theme/components/BlockPage.vue |   4 +-
 .../theme/components/BlockPreview.vue         | 251 ++----------------
 .../.vitepress/theme/components/Blocks.vue    |   4 +-
 apps/www/.vitepress/theme/components/index.ts |   1 +
 apps/www/.vitepress/theme/style.css           |  47 ++--
 apps/www/__registry__/index.ts                |  28 ++
 apps/www/scripts/build-registry.ts            | 101 +++----
 apps/www/tailwind.config.js                   |  10 +
 9 files changed, 379 insertions(+), 304 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/BlockContainer.vue

diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
new file mode 100644
index 00000000..b3ad339b
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { useConfigStore } from '@/stores/config'
+import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import MagicString from 'magic-string'
+import { codeToHtml } from 'shiki'
+import { reactive, ref, watch } from 'vue'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
+import { cssVariables } from '../config/shiki'
+import BlockCopyButton from './BlockCopyButton.vue'
+import StyleSwitcher from './StyleSwitcher.vue'
+
+// import { V0Button } from '@/components/v0-button'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import BlockPreview from './BlockPreview.vue'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { style, codeConfig } = useConfigStore()
+
+const isLoading = ref(true)
+const tabValue = ref('preview')
+const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
+
+const rawString = ref('')
+const codeHtml = ref('')
+const metadata = reactive({
+  description: null as string | null,
+  iframeHeight: null as string | null,
+  containerClass: null as string | null,
+})
+
+function removeScript(code: string) {
+  const s = new MagicString(code)
+  const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
+  let match
+  // eslint-disable-next-line no-cond-assign
+  while ((match = scriptTagRegex.exec(code)) !== null) {
+    const start = match.index
+    const end = match.index + match[0].length
+    s.overwrite(start, end, '') // Replace the script tag with an empty string
+  }
+  return s.trimStart().toString()
+}
+
+function transformImportPath(code: string) {
+  const s = new MagicString(code)
+  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
+  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
+  return s.toString()
+}
+
+watch([style, codeConfig], async () => {
+  try {
+    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
+    rawString.value = transformImportPath(removeScript(baseRawString))
+
+    if (!metadata.description) {
+      const { descriptor } = parse(baseRawString)
+      const ast = compileScript(descriptor, { id: '' })
+      walk(ast.scriptAst, {
+        enter(node: any) {
+          const declaration = node.declaration
+          // Check if the declaration is a variable declaration
+          if (declaration?.type === 'VariableDeclaration') {
+            // Extract variable names and their values
+            declaration.declarations.forEach((decl: any) => {
+              // @ts-expect-error ignore missing type
+              metadata[decl.id.name] = decl.init ? decl.init.value : null
+            })
+          }
+        },
+      })
+    }
+
+    codeHtml.value = await codeToHtml(rawString.value, {
+      lang: 'vue',
+      theme: cssVariables,
+    })
+  }
+  catch (err) {
+    console.error(err)
+  }
+}, { immediate: true, deep: true })
+</script>
+
+<template>
+  <Tabs
+    :id="name"
+    v-model="tabValue"
+    class="relative grid w-full scroll-m-20 gap-4"
+    :style=" {
+      '--container-height': metadata.iframeHeight ?? '600px',
+    }"
+  >
+    <div class="flex flex-col items-center gap-4 sm:flex-row">
+      <div class="flex items-center gap-2">
+        <TabsList class="hidden sm:flex">
+          <TabsTrigger value="preview">
+            Preview
+          </TabsTrigger>
+          <TabsTrigger value="code">
+            Code
+          </TabsTrigger>
+        </TabsList>
+        <div class="hidden items-center gap-2 sm:flex">
+          <Separator
+            orientation="vertical"
+            class="mx-2 hidden h-4 md:flex"
+          />
+          <div class="flex items-center gap-2">
+            <a :href="`#${name}`">
+              <Badge variant="outline">{{ name }}</Badge>
+            </a>
+            <Popover>
+              <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
+                <Info class="h-3.5 w-3.5" />
+                <span class="sr-only">Block description</span>
+              </PopoverTrigger>
+              <PopoverContent
+                side="right"
+                :side-offset="10"
+                class="text-sm"
+              >
+                {{ metadata.description }}
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
+        <div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
+          <ToggleGroup
+            type="single"
+            default-value="100"
+            @update:model-value="(value) => {
+              resizableRef?.resize(parseInt(value as string))
+            }"
+          >
+            <ToggleGroupItem
+              value="100"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Monitor class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="60"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Tablet class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="30"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Smartphone class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <StyleSwitcher class="h-7" />
+        <Popover>
+          <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
+            <CircleHelp class="h-3.5 w-3.5" />
+            <span class="sr-only">Block description</span>
+          </PopoverTrigger>
+          <PopoverContent
+            side="top"
+            :side-offset="20"
+            class="space-y-3 rounded-[0.5rem] text-sm"
+          >
+            <p class="font-medium">
+              What is the difference between the New York and Default style?
+            </p>
+            <p>
+              A style comes with its own set of components, animations,
+              icons and more.
+            </p>
+            <p>
+              The <span class="font-medium">Default</span> style has
+              larger inputs, uses lucide-vue-next for icons and
+              tailwindcss-animate for animations.
+            </p>
+            <p>
+              The <span class="font-medium">New York</span> style ships
+              with smaller buttons and inputs. It also uses shadows on cards
+              and buttons.
+            </p>
+          </PopoverContent>
+        </Popover>
+        <Separator orientation="vertical" class="mx-2 h-4" />
+        <BlockCopyButton :code="rawString" />
+        <!-- <V0Button
+          name="{block.name}"
+          description="{block.description" || "Edit in v0"}
+          code="{block.code}"
+          style="{block.style}"
+        /> -->
+      </div>
+    </div>
+    <TabsContent
+      v-show="tabValue === 'preview'"
+      force-mount
+      value="preview"
+      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
+    >
+      <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
+        <ResizablePanel
+          id="block-resizable-panel-1"
+          ref="resizableRef"
+          :default-size="100"
+          :min-size="30"
+          :as-child="true"
+        >
+          <BlockPreview :name="name" styles="default" :container-class="metadata.containerClass ?? ''" container />
+        </ResizablePanel>
+        <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
+        <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
+      </ResizablePanelGroup>
+    </TabsContent>
+    <TabsContent value="code" class="h-[--container-height]">
+      <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 83c757f0..be644b62 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -2,11 +2,11 @@
 import { useUrlSearchParams } from '@vueuse/core'
 import ComponentLoader from './ComponentLoader.vue'
 
-const params = useUrlSearchParams('hash-params')
+const params = useUrlSearchParams('history')
 </script>
 
 <template>
-  <div v-if="params.name && params.style" :class="params.containerClass">
+  <div v-if="params.name" :class="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 ccfcc04a..d94b2786 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -1,245 +1,40 @@
 <script setup lang="ts">
-import { useConfigStore } from '@/stores/config'
-import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import MagicString from 'magic-string'
-import { codeToHtml } from 'shiki'
-import { reactive, ref, watch } from 'vue'
-import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import { cssVariables } from '../config/shiki'
-import BlockCopyButton from './BlockCopyButton.vue'
+import { computed, ref } from 'vue'
 import Spinner from './Spinner.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
-
-// import { V0Button } from '@/components/v0-button'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 
 const props = defineProps<{
   name: string
+  styles?: string
+  containerClass?: string
+  container?: boolean
 }>()
 
-const { style, codeConfig } = useConfigStore()
-
 const isLoading = ref(true)
-const tabValue = ref('preview')
-const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
 
-const rawString = ref('')
-const codeHtml = ref('')
-const metadata = reactive({
-  description: null as string | null,
-  iframeHeight: null as string | null,
-  containerClass: null as string | null,
+const iframeURL = computed(() => {
+  const url = new URL(`${window.location.origin}/blocks/renderer`)
+  Object.entries(props).forEach(([key, value]) => {
+    if (value)
+      url.searchParams.append(key, value as string)
+  })
+  return url.href
 })
-
-function removeScript(code: string) {
-  const s = new MagicString(code)
-  const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
-  let match
-  // eslint-disable-next-line no-cond-assign
-  while ((match = scriptTagRegex.exec(code)) !== null) {
-    const start = match.index
-    const end = match.index + match[0].length
-    s.overwrite(start, end, '') // Replace the script tag with an empty string
-  }
-  return s.trimStart().toString()
-}
-
-function transformImportPath(code: string) {
-  const s = new MagicString(code)
-  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
-  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
-  return s.toString()
-}
-
-watch([style, codeConfig], async () => {
-  try {
-    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
-    rawString.value = transformImportPath(removeScript(baseRawString))
-
-    if (!metadata.description) {
-      const { descriptor } = parse(baseRawString)
-      const ast = compileScript(descriptor, { id: '' })
-      walk(ast.scriptAst, {
-        enter(node: any) {
-          const declaration = node.declaration
-          // Check if the declaration is a variable declaration
-          if (declaration?.type === 'VariableDeclaration') {
-            // Extract variable names and their values
-            declaration.declarations.forEach((decl: any) => {
-              // @ts-expect-error ignore missing type
-              metadata[decl.id.name] = decl.init ? decl.init.value : null
-            })
-          }
-        },
-      })
-    }
-
-    codeHtml.value = await codeToHtml(rawString.value, {
-      lang: 'vue',
-      theme: cssVariables,
-    })
-  }
-  catch (err) {
-    console.error(err)
-  }
-}, { immediate: true, deep: true })
 </script>
 
 <template>
-  <Tabs
-    :id="name"
-    v-model="tabValue"
-    class="relative grid w-full scroll-m-20 gap-4"
-    :style=" {
-      '--container-height': metadata.iframeHeight ?? '600px',
-    }"
-  >
-    <div class="flex flex-col items-center gap-4 sm:flex-row">
-      <div class="flex items-center gap-2">
-        <TabsList class="hidden sm:flex">
-          <TabsTrigger value="preview">
-            Preview
-          </TabsTrigger>
-          <TabsTrigger value="code">
-            Code
-          </TabsTrigger>
-        </TabsList>
-        <div class="hidden items-center gap-2 sm:flex">
-          <Separator
-            orientation="vertical"
-            class="mx-2 hidden h-4 md:flex"
-          />
-          <div class="flex items-center gap-2">
-            <a :href="`#${name}`">
-              <Badge variant="outline">{{ name }}</Badge>
-            </a>
-            <Popover>
-              <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-                <Info class="h-3.5 w-3.5" />
-                <span class="sr-only">Block description</span>
-              </PopoverTrigger>
-              <PopoverContent
-                side="right"
-                :side-offset="10"
-                class="text-sm"
-              >
-                {{ metadata.description }}
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
-        <div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
-          <ToggleGroup
-            type="single"
-            default-value="100"
-            @update:model-value="(value) => {
-              resizableRef?.resize(parseInt(value))
-            }"
-          >
-            <ToggleGroupItem
-              value="100"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Monitor class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="60"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Tablet class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="30"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Smartphone class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-        <Separator
-          orientation="vertical"
-          class="mx-2 hidden h-4 md:flex"
-        />
-        <StyleSwitcher class="h-7" />
-        <Popover>
-          <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-            <CircleHelp class="h-3.5 w-3.5" />
-            <span class="sr-only">Block description</span>
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            :side-offset="20"
-            class="space-y-3 rounded-[0.5rem] text-sm"
-          >
-            <p class="font-medium">
-              What is the difference between the New York and Default style?
-            </p>
-            <p>
-              A style comes with its own set of components, animations,
-              icons and more.
-            </p>
-            <p>
-              The <span class="font-medium">Default</span> style has
-              larger inputs, uses lucide-vue-next for icons and
-              tailwindcss-animate for animations.
-            </p>
-            <p>
-              The <span class="font-medium">New York</span> style ships
-              with smaller buttons and inputs. It also uses shadows on cards
-              and buttons.
-            </p>
-          </PopoverContent>
-        </Popover>
-        <Separator orientation="vertical" class="mx-2 h-4" />
-        <BlockCopyButton :code="rawString" />
-        <!-- <V0Button
-          name="{block.name}"
-          description="{block.description" || "Edit in v0"}
-          code="{block.code}"
-          style="{block.style}"
-        /> -->
-      </div>
+  <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">
+      <Spinner />
     </div>
-    <TabsContent
-      v-show="tabValue === 'preview'"
-      force-mount
-      value="preview"
-      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
+    <div
+      :class="[container ? 'w-full' : 'absolute inset-0 hidden w-[1600px] bg-background md:block']"
     >
-      <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
-        <ResizablePanel
-          id="block-resizable-panel-1"
-          ref="resizableRef"
-          class="relative rounded-lg border bg-background transition-all "
-          :default-size="100"
-          :min-size="30"
-        >
-          <div v-if="isLoading" class="flex items-center justify-center h-full">
-            <Spinner />
-          </div>
-          <iframe
-            v-show="!isLoading"
-            :src="`/blocks/renderer#name=${name}&style=${style}&containerClass=${encodeURIComponent(metadata.containerClass ?? '')}`"
-            class="relative z-20 w-full bg-background h-[--container-height]"
-            @load="isLoading = false"
-          />
-        </ResizablePanel>
-        <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
-        <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
-      </ResizablePanelGroup>
-    </TabsContent>
-    <TabsContent value="code" class="h-[--container-height]">
-      <div
-        class="language-vue !h-full !max-h-[none] !mt-0"
-        v-html="codeHtml"
+      <iframe
+        v-show="!isLoading"
+        :src="iframeURL"
+        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
+        @load="isLoading = false"
       />
-    </TabsContent>
-  </Tabs>
+    </div>
+  </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 61b33a9b..f78a7e74 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -9,7 +9,7 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import BlockPreview from './BlockPreview.vue'
+import BlockContainer from './BlockContainer.vue'
 
 const blocks = ref<string[]>([])
 
@@ -48,6 +48,6 @@ import('../../../__registry__/index').then((res) => {
   </PageHeader>
 
   <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
-    <BlockPreview v-for="block in blocks" :key="block" :name="block" />
+    <BlockContainer v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
index 5ab35ce6..776e690a 100644
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -1,4 +1,5 @@
 export { default as APITable } from './APITable.vue'
+export { default as BlockPreview } from './BlockPreview.vue'
 export { default as Callout } from './Callout.vue'
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index 48376839..f139ec55 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -6,7 +6,7 @@
 	:root {
 		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-			
+
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
 		--card: 0 0% 100%;
@@ -28,6 +28,16 @@
 		--ring: 240 5% 64.9%;
 		--radius: 0.5rem;
 
+    --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%;
+
+
 		--vis-primary-color: var(--primary);
     --vis-secondary-color: 160 81% 40%;
     --vis-text-color: var(--muted-foreground);
@@ -64,6 +74,15 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+
+    --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%;
   }
 
 
@@ -97,19 +116,6 @@
 		src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2");
 	}
 
-	/* === Scrollbars === */
-
-	::-webkit-scrollbar {
-		@apply w-2;
-		@apply h-2;
-	}
-
-	::-webkit-scrollbar-track {
-		@apply !bg-muted;
-	}
-	::-webkit-scrollbar-thumb {
-		@apply rounded-sm !bg-muted-foreground/30;
-	}
 
 	/* Firefox */
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
@@ -121,15 +127,6 @@
 		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
 	}
 
-	.hide-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
-	.hide-scrollbar {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
 	.antialised {
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
@@ -147,7 +144,7 @@
 		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 		@apply -ml-[50px] -mt-1;
 		content: counter(step);
-	}	
+	}
 }
 
 @media (max-width: 640px) {
@@ -177,7 +174,7 @@ pre code {
 
 pre code .line {
 	@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
-} 
+}
 
 .line-number {
 	@apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index fbcb0e4a..6ee3d395 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1501,6 +1501,20 @@ export const Index = {
       component: () => import("../src/lib/registry/default/block/Dashboard07.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Dashboard07.vue"],
     },
+    "Sidebar01": {
+      name: "Sidebar01",
+      type: "components:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      component: () => import("../src/lib/registry/default/block/Sidebar01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Sidebar01.vue"],
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      type: "components:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      component: () => import("../src/lib/registry/default/block/Sidebar07.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Sidebar07.vue"],
+    },
   },  "new-york": {
     "AccordionDemo": {
       name: "AccordionDemo",
@@ -3000,5 +3014,19 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Dashboard07.vue"],
     },
+    "Sidebar01": {
+      name: "Sidebar01",
+      type: "components:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      component: () => import("../src/lib/registry/new-york/block/Sidebar01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Sidebar01.vue"],
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      type: "components:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      component: () => import("../src/lib/registry/new-york/block/Sidebar07.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Sidebar07.vue"],
+    },
   },
 }
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 25c23fed..e974cf36 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -80,10 +80,17 @@ for (const style of styles) {
       continue
 
     const files = item.files?.map((file) => {
-      let content = fs.readFileSync(
-        path.join(process.cwd(), 'src/lib/registry', style.name, file),
-        'utf8',
-      )
+      let content: string = ''
+
+      try {
+        content = fs.readFileSync(
+          path.join(process.cwd(), 'src/lib/registry', style.name, file),
+          'utf8',
+        )
+      }
+      catch (err) {
+        console.log(`'${file}' is missing`)
+      }
 
       // Replace Windows-style newlines with Unix-style newlines
       content = content.replace(/\r\n/g, newLine)
@@ -99,7 +106,7 @@ for (const style of styles) {
       files,
     }
 
-    const payloadStr = JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)
+    const payloadStr = `${JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)}\n`
 
     fs.writeFileSync(
       path.join(targetPath, `${item.name}.json`),
@@ -195,73 +202,73 @@ export const BASE_STYLES = `@tailwind base;
 export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
- 
+
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
- 
+
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
- 
+
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
- 
+
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
- 
+
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
- 
+
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
- 
+
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
- 
+
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
- 
+
     --ring: <%- colors.light["ring"] %>;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
- 
+
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
- 
+
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
- 
+
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
- 
+
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
- 
+
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
- 
+
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
- 
+
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
- 
+
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
- 
+
     --ring: <%- colors.dark["ring"] %>;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -319,64 +326,64 @@ export const THEME_STYLES_WITH_VARIABLES = `
   .theme-<%- theme %> {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
- 
+
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
- 
+
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
- 
+
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
- 
+
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
- 
+
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
- 
+
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
- 
+
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
- 
+
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
- 
+
     --ring: <%- colors.light["ring"] %>;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark .theme-<%- theme %> {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
- 
+
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
- 
+
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
- 
+
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
- 
+
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
- 
+
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
- 
+
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
- 
+
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
- 
+
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
- 
+
     --ring: <%- colors.dark["ring"] %>;
   }`
 
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 0d33cc00..85bc30fa 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -51,6 +51,16 @@ export default {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        sidebar: {
+          'DEFAULT': 'hsl(var(--sidebar-background))',
+          'foreground': 'hsl(var(--sidebar-foreground))',
+          'primary': 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          'accent': 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          'border': 'hsl(var(--sidebar-border))',
+          'ring': 'hsl(var(--sidebar-ring))',
+        },
       },
       borderRadius: {
         xl: 'calc(var(--radius) + 4px)',