feat: blocks toolbar and theme

.nvmrc

@@ -1 +1 @@
-v22.12.0
+v23.0.0

apps/www/app/blocks/[[...slug]]/page.tsx

@@ -4,15 +4,16 @@ import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock"
 import { DocsLayout } from "fumadocs-ui/layouts/docs"
 import { notFound } from "next/navigation"
 
-import { BlockInfoPane } from "@/components/blocks/block-info-pane"
-import { BlockPreviewPane } from "@/components/blocks/block-preview-pane"
+import { getBlockShowcase } from "@/components/blocks/block-showcase"
+import { BlockTopBar } from "@/components/blocks/breadcrumbs"
+import { BlockInfoPane } from "@/components/blocks/info-pane"
+import { BlockPreviewPane } from "@/components/blocks/preview-background"
 import { getMDXComponents } from "@/components/mdx-components"
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { getBlockShowcase } from "@/lib/block-showcase"
 import { blocksSource } from "@/lib/blocks-source"
 
 export const revalidate = false
@@ -57,7 +58,7 @@ export default async function BlockPage(props: BlockPageProps) {
         tree={blocksSource.getPageTree()}
       >
         <main className="relative min-h-screen bg-background">
-          <div className="flex h-full w-full">
+          <div className="flex size-full">
             <div
               className={`
                 w-full
@@ -71,7 +72,6 @@ export default async function BlockPage(props: BlockPageProps) {
                 content={content}
                 description={page.data.description}
                 title={page.data.title}
-                url={page.url}
               />
             </div>
 
@@ -81,20 +81,45 @@ export default async function BlockPage(props: BlockPageProps) {
                 lg:block
               `}
             >
-              <ResizablePanelGroup>
-                <ResizablePanel defaultSize="35%">
-                  <BlockInfoPane
-                    content={content}
-                    description={page.data.description}
-                    title={page.data.title}
-                    url={page.url}
-                  />
+              <ResizablePanelGroup orientation="horizontal">
+                <ResizablePanel defaultSize={"35%"} minSize={"30%"}>
+                  <div className="relative h-full overflow-hidden bg-transparent">
+                    <BlockTopBar title={page.data.title} />
+                    <div
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-x-0 bottom-0 z-10"
+                      style={{
+                        backdropFilter: "blur(2px)",
+                        background:
+                          "linear-gradient(to top, color-mix(in oklch, var(--background) 100%, transparent) 0%, transparent 100%)",
+                        height: "92px",
+                        maskImage:
+                          "linear-gradient(to top, black 50%, transparent 100%)",
+                        WebkitBackdropFilter: "blur(2px)",
+                        WebkitMaskImage:
+                          "linear-gradient(to top, black 50%, transparent 100%)",
+                        willChange: "backdrop-filter",
+                      }}
+                    />
+
+                    <div className="h-full min-w-0 overflow-x-hidden overflow-y-auto pt-16">
+                      <BlockInfoPane
+                        content={content}
+                        description={page.data.description}
+                        title={page.data.title}
+                      />
+                    </div>
+                  </div>
                 </ResizablePanel>
+
                 <ResizableHandle className="z-20" withHandle />
-                <ResizablePanel defaultSize="65%">
-                  <BlockPreviewPane>
-                    <PreviewComponent />
-                  </BlockPreviewPane>
+
+                <ResizablePanel
+                  className="relative"
+                  defaultSize={"65%"}
+                  minSize={"40%"}
+                >
+                  <PreviewComponent />
                 </ResizablePanel>
               </ResizablePanelGroup>
             </div>

apps/www/app/blocks/layout.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react"
 
 import { RootProvider } from "fumadocs-ui/provider/next"
 
-import { BlocksSidebar } from "@/components/blocks/blocks-sidebar"
+import { BlocksSidebar } from "@/components/blocks/sidebar"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 import { blocksSource } from "@/lib/blocks-source"
 
@@ -19,7 +19,7 @@ export default function BlocksLayout({ children }: { children: ReactNode }) {
   return (
     <RootProvider
       theme={{
-        forcedTheme: "light",
+        defaultTheme: "dark",
       }}
     >
       <SidebarProvider

apps/www/app/shadcn.css

@@ -3,6 +3,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
   --font-sans: var(--font-sans);
   /* --font-mono: var(--font-mono); */
   --color-sidebar-ring: var(--sidebar-ring);
@@ -46,21 +47,22 @@
 :root,
 .light {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --foreground: #333;
+  --surface: #f7f7f7;
+  --card: #f5f5f5;
+  --card-foreground: #333;
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: #333;
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: #f7f7f7;
   --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
+  --muted: #f7f7f7;
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.58 0.22 27);
-  --border: oklch(0.9 0.003 63.23);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.809 0.105 251.813);
@@ -80,19 +82,20 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
+  --background: #121212;
+  --foreground: #e5e5e5;
+  --surface: #171717;
+  --card: #191919;
+  --card-foreground: #e5e5e5;
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.87 0 0);
+  --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: #232323;
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
+  --accent: #232323;
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);

apps/www/lib/block-showcase.tsx → apps/www/components/blocks/block-showcase.tsx

@@ -3,20 +3,35 @@ import type { ReactNode } from "react"
 import { LinearMediaPlayer } from "@/registry/default/blocks/linear-player/components/media-player"
 import { YouTubeMusicPlayer } from "@/registry/pro/blocks/youtube-music/components/media-player"
 
+import { BlockPreviewPane } from "./preview-background"
+import { BlockPreviewWithToolbar } from "./preview-pane"
+
 type BlockShowcaseDefinition = {
   component: () => ReactNode
 }
 
 const blockShowcaseRegistry = {
   "linear-player": {
     component: () => (
-      <section className="dark flex h-dvh w-dvw bg-black">
-        <LinearMediaPlayer as="video" />
-      </section>
+      <BlockPreviewWithToolbar>
+        <div className="flex size-full">
+          <BlockPreviewPane>
+            <LinearMediaPlayer as="video" />
+          </BlockPreviewPane>
+        </div>
+      </BlockPreviewWithToolbar>
     ),
   },
   "youtube-music": {
-    component: () => <YouTubeMusicPlayer />,
+    component: () => (
+      <BlockPreviewWithToolbar>
+        <div className="flex size-full items-end">
+          <BlockPreviewPane>
+            <YouTubeMusicPlayer />
+          </BlockPreviewPane>
+        </div>
+      </BlockPreviewWithToolbar>
+    ),
   },
 } satisfies Record<string, BlockShowcaseDefinition>