feat: blocks revamp, registry cleanup

README.md

@@ -25,7 +25,7 @@ npx shadcn add @limeplay/video-player
 Use it anywhere in your app:
 
 ```tsx
-import { VideoPlayer } from "@/components/limeplay/video-player/components/media-player"
+import { VideoPlayer } from "@/components/limeplay/video-player/player"
 
 export function Player() {
   return (

apps/www/app/(home)/layout.tsx

@@ -18,9 +18,10 @@ export default function RootLayout({
         />
       )}
       <main
-        className={
-          "light w-dvw overscroll-contain bg-linear-to-br from-white to-neutral-200"
-        }
+        className={`
+          light w-dvw scrollbar-gutter-auto overscroll-contain bg-linear-to-br from-white to-neutral-200
+          md:scrollbar-gutter-stable
+        `}
       >
         <VideoBackground />
         <Header />

apps/www/app/(home)/page.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from "react"
-
 import { FeatureTrailSection } from "@/components/feature-trail-section"
 import { FeatureGrid } from "@/components/features"
 import { Hero } from "@/components/hero"
@@ -13,16 +11,7 @@ export default function Home() {
     <>
       <Hero />
       <ImmersiveScrollPlayer>
-        <Suspense
-          fallback={
-            <div
-              aria-hidden="true"
-              className="aspect-video w-full animate-pulse"
-            />
-          }
-        >
-          <VideoPlayerContainer />
-        </Suspense>
+        <VideoPlayerContainer />
       </ImmersiveScrollPlayer>
       <ScrollIndicator />
       <FeatureTrailSection>

apps/www/app/docs/docs.css

@@ -1,7 +1,6 @@
 @import "tailwindcss";
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
-@import "../global.css";
 
 @theme {
   --spacing-fd-container: 1436px;

apps/www/app/eslint.css

@@ -0,0 +1,5 @@
+@import "./global.css";
+@import "./docs/docs.css";
+@import "./blocks/blocks.css";
+@import "../registry/default/blocks/video-player/styles.css";
+@import "../registry/default/blocks/audio-player/styles.css";

apps/www/app/global.css

@@ -2,16 +2,9 @@
 @import "tw-animate-css";
 
 @import "./shadcn.css";
-@import "./limeplay.css";
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  --page-padding-inline: 1rem;
-  --page-padding: max(env(safe-area-inset-left), var(--page-padding-inline))
-    max(env(safe-area-inset-right), var(--page-padding-inline));
-}
-
 @theme inline {
   --animate-blur-fade-slide-in: blur-fade-slide-in 0.6s ease-out forwards;
   --padding-page: var(--page-padding);
@@ -46,3 +39,148 @@
 @utility focus-ring {
   @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary/50;
 }
+
+@utility hit-area-debug {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+    @apply border border-dashed border-blue-500 bg-blue-500/10;
+  }
+  &:hover::before {
+    @apply border border-dashed border-green-500 bg-green-500/10;
+  }
+}
+
+@utility hit-area {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-l-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-r-* {
+  position: relative;
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-t-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-b-* {
+  position: relative;
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-x-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-y-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}

apps/www/components/blocks/block-page-shell.tsx

@@ -94,7 +94,7 @@ export function BlockPageShell({ info, preview, title }: BlockPageShellProps) {
         <ResizablePanel
           className="relative"
           defaultSize={"65%"}
-          minSize={"40%"}
+          minSize={"30%"}
         >
           {preview}
         </ResizablePanel>

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react"
 
 import { AudioPlayerDemo } from "@/components/players/audio-player/demo-player"
-import { VideoPlayer } from "@/registry/default/blocks/video-player/components/media-player"
+import { VideoPlayer } from "@/registry/default/blocks/video-player/player"
 
-import { BlockStreamSync } from "./block-toolbar"
+import { BlockStreamSync } from "./block-stream-sync"
 import { BlockPreviewPane } from "./preview-background"
 import { BlockPreviewWithToolbar } from "./preview-pane"
 
@@ -30,7 +30,7 @@ const blockShowcaseRegistry = {
       <BlockPreviewWithToolbar>
         <div className="flex size-full">
           <BlockPreviewPane>
-            <VideoPlayer>
+            <VideoPlayer layout="fill">
               <BlockStreamSync playerType="video" />
             </VideoPlayer>
           </BlockPreviewPane>

apps/www/components/blocks/block-stream-sync.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useEffect, useMemo } from "react"
+
+import type { StreamPanelPlayerType } from "@/components/stream-panel/use-stream-panel"
+
+import { useStreamPanel } from "@/components/stream-panel"
+import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
+
+export function BlockStreamSync({
+  playerType = "video",
+}: {
+  playerType?: StreamPanelPlayerType
+}) {
+  const { registerController } = useStreamPanel()
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType })
+
+  const controller = useMemo(
+    () => ({
+      onLoadStream: handleLoadStream,
+      onPlaylistChange: handlePlaylistPresetChange,
+      onPresetChange: handlePresetChange,
+      playerType,
+    }),
+    [
+      handleLoadStream,
+      handlePlaylistPresetChange,
+      handlePresetChange,
+      playerType,
+    ]
+  )
+
+  useEffect(
+    () => registerController(controller),
+    [controller, registerController]
+  )
+
+  return null
+}