From a6ea57a4bd5c86c3401ed86bf49e9e7f0787af92 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sat, 6 Jun 2026 11:54:11 +0530
Subject: [PATCH 1/7] feat: blocks toolbar and streams control

---
 apps/www/app/blocks/[[...slug]]/page.tsx      |  29 +-
 apps/www/app/layout.tsx                       |   5 +-
 apps/www/components/blocks/block-showcase.tsx |  10 +-
 apps/www/components/blocks/block-toolbar.tsx  | 469 +++++++++-----
 apps/www/components/blocks/preview-pane.tsx   | 159 +++--
 .../players/audio-player/demo-player.tsx      |   6 +-
 .../players/audio-player/hover-player.tsx     | 137 +++--
 .../players/video-player/demo-assets.ts       |  49 --
 .../players/video-player/player-container.tsx |   3 -
 .../stream-panel/content-catalog.ts           | 155 +++++
 .../stream-panel/content-overview-overlay.tsx | 137 +++++
 .../stream-panel/custom-overlay.tsx           |  67 +-
 apps/www/components/stream-panel/icons.tsx    |  88 +++
 apps/www/components/stream-panel/index.ts     |   1 -
 .../components/stream-panel/overlay-shell.tsx | 108 +++-
 .../stream-panel/panel-popover.config.ts      |  57 ++
 .../components/stream-panel/panel-popover.tsx | 570 ++++++++++--------
 .../components/stream-panel/panel-slider.tsx  | 146 -----
 .../stream-panel/playlists-overlay.tsx        | 109 ++++
 .../stream-panel/presets-overlay.tsx          | 113 ++--
 apps/www/components/stream-panel/provider.tsx |  45 +-
 .../components/stream-panel/saved-overlay.tsx |  77 ++-
 .../stream-panel/use-stream-panel-sync.ts     | 187 ++++--
 apps/www/lib/docs-dial-store.ts               |  44 +-
 .../default/examples/player-root-demo.tsx     |   8 +-
 25 files changed, 1940 insertions(+), 839 deletions(-)
 delete mode 100644 apps/www/components/players/video-player/demo-assets.ts
 create mode 100644 apps/www/components/stream-panel/content-catalog.ts
 create mode 100644 apps/www/components/stream-panel/content-overview-overlay.tsx
 create mode 100644 apps/www/components/stream-panel/icons.tsx
 create mode 100644 apps/www/components/stream-panel/panel-popover.config.ts
 delete mode 100644 apps/www/components/stream-panel/panel-slider.tsx
 create mode 100644 apps/www/components/stream-panel/playlists-overlay.tsx

diff --git a/apps/www/app/blocks/[[...slug]]/page.tsx b/apps/www/app/blocks/[[...slug]]/page.tsx
index 884c4c06..a29e80d9 100644
--- a/apps/www/app/blocks/[[...slug]]/page.tsx
+++ b/apps/www/app/blocks/[[...slug]]/page.tsx
@@ -58,6 +58,16 @@ export default async function BlockPage(props: BlockPageProps) {
         tree={blocksSource.getPageTree()}
       >
         <main className="relative min-h-screen bg-background">
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                document.documentElement.dataset.blockPreviewExpanded =
+                  new URLSearchParams(window.location.search).get("expanded") === "true"
+                    ? "true"
+                    : "false";
+              `,
+            }}
+          />
           <div className="flex size-full">
             <div
               className={`
@@ -82,7 +92,15 @@ export default async function BlockPage(props: BlockPageProps) {
               `}
             >
               <ResizablePanelGroup orientation="horizontal">
-                <ResizablePanel defaultSize={"35%"} minSize={"30%"}>
+                <ResizablePanel
+                  className={`
+                    overflow-hidden opacity-100 transition-[opacity,filter,transform] duration-300 ease-out
+                    in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:-translate-x-2
+                    in-data-[block-preview-expanded=true]:opacity-0 in-data-[block-preview-expanded=true]:blur-sm
+                  `}
+                  defaultSize={"35%"}
+                  minSize={"30%"}
+                >
                   <div className="relative h-full overflow-hidden bg-transparent">
                     <BlockTopBar title={page.data.title} />
                     <div
@@ -98,7 +116,6 @@ export default async function BlockPage(props: BlockPageProps) {
                         WebkitBackdropFilter: "blur(2px)",
                         WebkitMaskImage:
                           "linear-gradient(to top, black 50%, transparent 100%)",
-                        willChange: "backdrop-filter",
                       }}
                     />
 
@@ -112,7 +129,13 @@ export default async function BlockPage(props: BlockPageProps) {
                   </div>
                 </ResizablePanel>
 
-                <ResizableHandle className="z-20" withHandle />
+                <ResizableHandle
+                  className={`
+                    z-20 opacity-100 transition-opacity duration-300 ease-out
+                    in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:opacity-0
+                  `}
+                  withHandle
+                />
 
                 <ResizablePanel
                   className="relative"
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 47f1b430..c2e97ce9 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -7,6 +7,7 @@ import { UserJotProvider } from "@userjot/next"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Inter } from "next/font/google"
+import Head from "next/head"
 
 import { JsonLd } from "@/components/json-ld"
 import { PRODUCT_DESCRIPTION, PRODUCT_NAME } from "@/lib/constants"
@@ -72,9 +73,9 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html className={inter.className} lang="en" suppressHydrationWarning>
-      <head>
+      <Head>
         <UserJotProvider projectId="cmjs634l4043b15ldylgedgwi" />
-      </head>
+      </Head>
       <body className="antialiased">
         <JsonLd />
         {children}
diff --git a/apps/www/components/blocks/block-showcase.tsx b/apps/www/components/blocks/block-showcase.tsx
index 712c7061..990d1582 100644
--- a/apps/www/components/blocks/block-showcase.tsx
+++ b/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 { VIDEO_PLAYER_DEMO_ASSETS } from "@/components/players/video-player/demo-assets"
 import { VideoPlayer } from "@/registry/default/blocks/video-player/components/media-player"
 
+import { BlockStreamSync } from "./block-toolbar"
 import { BlockPreviewPane } from "./preview-background"
 import { BlockPreviewWithToolbar } from "./preview-pane"
 
@@ -17,7 +17,9 @@ const blockShowcaseRegistry = {
       <BlockPreviewWithToolbar>
         <div className="flex size-full items-end">
           <BlockPreviewPane>
-            <AudioPlayerDemo />
+            <AudioPlayerDemo>
+              <BlockStreamSync playerType="audio" />
+            </AudioPlayerDemo>
           </BlockPreviewPane>
         </div>
       </BlockPreviewWithToolbar>
@@ -28,7 +30,9 @@ const blockShowcaseRegistry = {
       <BlockPreviewWithToolbar>
         <div className="flex size-full">
           <BlockPreviewPane>
-            <VideoPlayer playlist={VIDEO_PLAYER_DEMO_ASSETS} />
+            <VideoPlayer>
+              <BlockStreamSync playerType="video" />
+            </VideoPlayer>
           </BlockPreviewPane>
         </div>
       </BlockPreviewWithToolbar>
diff --git a/apps/www/components/blocks/block-toolbar.tsx b/apps/www/components/blocks/block-toolbar.tsx
index 68b0bd64..916b7299 100644
--- a/apps/www/components/blocks/block-toolbar.tsx
+++ b/apps/www/components/blocks/block-toolbar.tsx
@@ -2,6 +2,7 @@
 
 import {
   CodeXmlIcon,
+  CogIcon,
   Maximize2Icon,
   Minimize2Icon,
   MoonIcon,
@@ -10,29 +11,32 @@ import {
 } from "lucide-react"
 import {
   AnimatePresence,
+  domAnimation,
   LayoutGroup,
-  motion,
+  LazyMotion,
+  m,
   useAnimationControls,
 } from "motion/react"
-import React, { useCallback, useEffect, useRef, useState } from "react"
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react"
 
-import {
-  StreamPanel,
-  StreamPanelProvider,
-  useStreamPanel,
-} from "@/components/stream-panel"
+import { StreamPanel, useStreamPanel } from "@/components/stream-panel"
 import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
-import { PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 
-const PILL_TRANSITION = { bounce: 0.2, duration: 0.5, type: "spring" } as const
+const PILL_TRANSITION = { bounce: 0, duration: 0.24, type: "spring" } as const
 const CONTENT_TRANSITION = {
   bounce: 0,
   duration: 0.6,
   type: "spring",
 } as const
-
-type ActivePanel = "settings" | null
+const PANEL_CONTENT_MAX_HEIGHT = 420
+const PANEL_CONTENT_MIN_HEIGHT = 168
 
 interface BlockToolbarProps {
   codeUrl?: string
@@ -48,17 +52,31 @@ export function BlockStreamSync({
 }: {
   playerType?: "audio" | "video"
 }) {
-  const { handleLoadStream } = useStreamPanelSync()
+  const { registerController } = useStreamPanel()
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType })
 
-  return (
-    <StreamPanel
-      onLoadStream={handleLoadStream}
-      playerType={playerType}
-      position="bottom-right"
-      side="top"
-      variant="floating"
-    />
+  const controller = React.useMemo(
+    () => ({
+      onLoadStream: handleLoadStream,
+      onPlaylistChange: handlePlaylistPresetChange,
+      onPresetChange: handlePresetChange,
+      playerType,
+    }),
+    [
+      handleLoadStream,
+      handlePlaylistPresetChange,
+      handlePresetChange,
+      playerType,
+    ]
+  )
+
+  useEffect(
+    () => registerController(controller),
+    [controller, registerController]
   )
+
+  return null
 }
 
 export function BlockToolbar({
@@ -69,24 +87,105 @@ export function BlockToolbar({
   onThemeToggle,
   theme,
 }: BlockToolbarProps) {
-  const { handle } = useStreamPanel()
-  const [activePanel, setActivePanel] = useState<ActivePanel>(null)
+  const { controller, open, setOpen } = useStreamPanel()
   const rotateControls = useAnimationControls()
   const rotationRef = useRef(0)
   const contentRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const rootResizeObserverRef = useRef<null | ResizeObserver>(null)
+  const toolbarResizeObserverRef = useRef<null | ResizeObserver>(null)
+  const toolbarRef = useRef<HTMLDivElement>(null)
+  const [availableHeight, setAvailableHeight] = useState(0)
   const [contentHeight, setContentHeight] = useState(0)
+  const [toolbarHeight, setToolbarHeight] = useState<null | number>(null)
 
-  useEffect(() => {
-    if (!contentRef.current) return
-    const ro = new ResizeObserver((entries) => {
+  const handleRootRef = useCallback((node: HTMLDivElement | null) => {
+    rootResizeObserverRef.current?.disconnect()
+    rootRef.current = node
+
+    if (!node) return
+
+    setAvailableHeight(node.getBoundingClientRect().height)
+
+    const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        setContentHeight(entry.contentRect.height)
+        setAvailableHeight(entry.contentRect.height)
       }
     })
-    ro.observe(contentRef.current)
-    return () => ro.disconnect()
-  }, [activePanel])
+    observer.observe(node)
+    rootResizeObserverRef.current = observer
+  }, [])
+
+  const handleToolbarRef = useCallback((node: HTMLDivElement | null) => {
+    toolbarResizeObserverRef.current?.disconnect()
+    toolbarRef.current = node
+
+    if (!node) return
+
+    setToolbarHeight(node.getBoundingClientRect().height)
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setToolbarHeight(entry.target.getBoundingClientRect().height)
+      }
+    })
+    observer.observe(node)
+    toolbarResizeObserverRef.current = observer
+  }, [])
+
+  const updateContentHeight = useCallback(() => {
+    if (!open || !contentRef.current) {
+      setContentHeight(0)
+      return
+    }
+    setContentHeight(getStreamPanelContentHeight(contentRef.current))
+  }, [open])
+
+  useLayoutEffect(() => {
+    if (!open || !contentRef.current) {
+      setContentHeight(0)
+      return
+    }
+
+    const root = contentRef.current
+    let frameId = 0
+    const scheduleResizeUpdate = () => {
+      cancelAnimationFrame(frameId)
+      frameId = requestAnimationFrame(updateContentHeight)
+    }
+    const resizeObserver = new ResizeObserver(scheduleResizeUpdate)
+    const observeTargets = () => {
+      resizeObserver.disconnect()
+      resizeObserver.observe(root)
+      root
+        .querySelectorAll<HTMLElement>(
+          `
+            [data-stream-panel-root],
+            [data-stream-panel-overlay],
+            [data-stream-panel-overlay-header],
+            [data-stream-panel-overlay-body]
+          `
+        )
+        .forEach((target) => resizeObserver.observe(target))
+      updateContentHeight()
+    }
+    const mutationObserver = new MutationObserver(observeTargets)
+
+    observeTargets()
+    mutationObserver.observe(root, {
+      attributeFilter: ["class", "data-stream-panel-overlay", "style"],
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      mutationObserver.disconnect()
+      resizeObserver.disconnect()
+    }
+  }, [open, updateContentHeight])
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
@@ -98,14 +197,14 @@ export function BlockToolbar({
       )
         return
       if (containerRef.current && !containerRef.current.contains(target)) {
-        setActivePanel(null)
+        setOpen(false)
       }
     }
-    if (activePanel !== null) {
+    if (open) {
       document.addEventListener("mousedown", handleClickOutside)
       return () => document.removeEventListener("mousedown", handleClickOutside)
     }
-  }, [activePanel])
+  }, [open, setOpen])
 
   const handleRotateStart = useCallback(() => {
     rotationRef.current -= 20
@@ -124,9 +223,8 @@ export function BlockToolbar({
   }, [rotateControls])
 
   const handleSettingsToggle = useCallback(() => {
-    // No-op: PopoverTrigger opens the StreamPanel popover directly
-    setActivePanel(null)
-  }, [])
+    setOpen((value) => !value)
+  }, [setOpen])
 
   type ToolbarItem = {
     active: boolean
@@ -164,15 +262,15 @@ export function BlockToolbar({
       strokeWidth: 2.5,
       type: "action",
     },
-    // {
-    //   active: activePanel === "settings",
-    //   icon: Settings2Icon,
-    //   iconStyle: "fill-current size-4.5",
-    //   id: "settings",
-    //   label: "Settings",
-    //   strokeWidth: 1.5,
-    //   type: "tab",
-    // },
+    {
+      active: open,
+      icon: CogIcon,
+      iconStyle: "size-4.5 stroke-[2.5]",
+      id: "settings",
+      label: "Settings",
+      strokeWidth: 1.5,
+      type: "tab",
+    },
     ...(codeUrl
       ? [
           {
@@ -200,11 +298,30 @@ export function BlockToolbar({
     4 * Math.max(items.length - 1, 0) +
     (dividerIndex !== -1 ? 9 : 0)
   const pillWidth = baseWidth + labelWidths
+  const expandedPanelWidth = 296
+  const toolbarWidth = open
+    ? Math.max(pillWidth, expandedPanelWidth)
+    : pillWidth
 
-  const pillHeight =
-    activePanel === null ? 52 : contentHeight > 0 ? contentHeight + 52 : 52
+  const measuredToolbarHeight = toolbarHeight ?? 0
+  const availableContentHeight =
+    availableHeight > 0
+      ? Math.max(0, availableHeight - measuredToolbarHeight)
+      : PANEL_CONTENT_MAX_HEIGHT
+  const maxContentHeight = Math.min(
+    PANEL_CONTENT_MAX_HEIGHT,
+    availableContentHeight
+  )
+  const minContentHeight = Math.min(PANEL_CONTENT_MIN_HEIGHT, maxContentHeight)
+  const boundedContentHeight = open
+    ? Math.min(Math.max(contentHeight, minContentHeight), maxContentHeight)
+    : 0
+  const naturalPillHeight = measuredToolbarHeight + boundedContentHeight
+  const pillHeight = toolbarHeight === null ? "auto" : naturalPillHeight
 
   function handleItemClick(item: ToolbarItem) {
+    if (item.type !== "tab") setOpen(false)
+
     if (item.id === "refresh") {
       onReload()
       void handleRotateEnd()
@@ -223,68 +340,112 @@ export function BlockToolbar({
 
   return (
     <div
-      className="absolute top-4 left-1/2 z-20 flex -translate-x-1/2 flex-col items-end"
-      style={{ maxHeight: "calc(100% - 2rem)" }}
+      className="pointer-events-none absolute inset-y-4 left-1/2 z-20 flex -translate-x-1/2 flex-col items-end"
+      ref={handleRootRef}
     >
-      <div ref={containerRef}>
-        <LayoutGroup>
-          <motion.div
-            animate={{ height: pillHeight, width: pillWidth }}
-            className="relative overflow-hidden rounded-3xl bg-background"
-            initial={false}
-            transition={PILL_TRANSITION}
-          >
-            <div ref={contentRef} />
-
-            <div className="absolute bottom-0 w-full bg-background p-2">
-              <div className="flex h-9 items-center justify-center gap-1">
-                {items.map((item, index) => {
-                  const Icon = item.icon
-                  const isActive = item.active
-                  const sharedClassName = cn(
-                    "flex h-9 cursor-pointer items-center rounded-2xl text-sm font-medium transition-colors duration-300",
-                    isActive
-                      ? "bg-foreground/4 text-foreground"
-                      : `
-                        text-muted-foreground
-                        hover:bg-muted hover:text-foreground
-                      `,
-                    item.id === "code" && "hover:bg-accent/10"
-                  )
-                  const sharedAnimate = {
-                    gap: isActive ? ".5rem" : "0",
-                    paddingLeft: isActive ? "1rem" : ".5rem",
-                    paddingRight: isActive ? "1rem" : ".5rem",
-                  }
-
-                  if (item.id === "settings") {
+      <div className="pointer-events-auto max-h-full" ref={containerRef}>
+        <LazyMotion features={domAnimation}>
+          <LayoutGroup>
+            <m.div
+              animate={{ height: pillHeight, width: toolbarWidth }}
+              className="relative flex flex-col overflow-hidden rounded-4xl bg-background shadow-2xl ring-1 shadow-background/35 ring-border/60"
+              initial={false}
+              transition={PILL_TRANSITION}
+            >
+              <div
+                className="w-full bg-background px-0 py-2"
+                ref={handleToolbarRef}
+              >
+                <div className="flex h-9 items-center justify-center gap-1">
+                  {items.map((item, index) => {
+                    const Icon = item.icon
+                    const isActive = item.active
+                    const sharedClassName = cn(
+                      "flex h-9 cursor-pointer items-center rounded-2xl text-sm font-medium transition-colors duration-300",
+                      isActive
+                        ? "bg-foreground/4 text-foreground"
+                        : `
+                          text-muted-foreground
+                          hover:bg-muted hover:text-foreground
+                        `,
+                      item.id === "code" && "hover:bg-accent/10"
+                    )
+                    const sharedAnimate = {
+                      gap: isActive ? ".5rem" : "0",
+                      paddingLeft: isActive ? "1rem" : ".5rem",
+                      paddingRight: isActive ? "1rem" : ".5rem",
+                    }
+
+                    if (item.id === "settings") {
+                      return (
+                        <span className="flex items-center gap-1" key={item.id}>
+                          {dividerIndex === index && (
+                            <div className="mx-0.5 h-5 w-px bg-border/60" />
+                          )}
+                          <m.button
+                            animate={sharedAnimate}
+                            className={sharedClassName}
+                            initial={false}
+                            onClick={handleSettingsToggle}
+                            transition={CONTENT_TRANSITION}
+                            type="button"
+                          >
+                            <m.span className="inline-flex">
+                              <Icon
+                                className={cn("size-4", item.iconStyle)}
+                                strokeWidth={item.strokeWidth}
+                              />
+                            </m.span>
+                            <AnimatePresence initial={false}>
+                              {isActive && (
+                                <m.span
+                                  animate={{ opacity: 1, width: "auto" }}
+                                  className="overflow-hidden text-sm font-medium tracking-tight whitespace-nowrap"
+                                  exit={{ opacity: 0, width: 0 }}
+                                  initial={{ opacity: 0, width: 0 }}
+                                  transition={CONTENT_TRANSITION}
+                                >
+                                  {item.label}
+                                </m.span>
+                              )}
+                            </AnimatePresence>
+                          </m.button>
+                        </span>
+                      )
+                    }
+
                     return (
                       <span className="flex items-center gap-1" key={item.id}>
                         {dividerIndex === index && (
                           <div className="mx-0.5 h-5 w-px bg-border/60" />
                         )}
-                        <PopoverTrigger
-                          handle={handle}
-                          nativeButton={false}
-                          render={
-                            <motion.div
-                              animate={sharedAnimate}
-                              className={sharedClassName}
-                              initial={false}
-                              onClick={() => handleSettingsToggle()}
-                              transition={CONTENT_TRANSITION}
-                            />
+                        <m.button
+                          animate={sharedAnimate}
+                          className={sharedClassName}
+                          initial={false}
+                          onClick={() => handleItemClick(item)}
+                          onTapStart={
+                            item.id === "refresh"
+                              ? handleRotateStart
+                              : undefined
                           }
+                          transition={CONTENT_TRANSITION}
+                          type="button"
                         >
-                          <motion.span className="inline-flex">
+                          <m.span
+                            animate={
+                              item.id === "refresh" ? rotateControls : undefined
+                            }
+                            className="inline-flex"
+                          >
                             <Icon
                               className={cn("size-4", item.iconStyle)}
                               strokeWidth={item.strokeWidth}
                             />
-                          </motion.span>
+                          </m.span>
                           <AnimatePresence initial={false}>
                             {isActive && (
-                              <motion.span
+                              <m.span
                                 animate={{ opacity: 1, width: "auto" }}
                                 className="overflow-hidden text-sm font-medium tracking-tight whitespace-nowrap"
                                 exit={{ opacity: 0, width: 0 }}
@@ -292,65 +453,83 @@ export function BlockToolbar({
                                 transition={CONTENT_TRANSITION}
                               >
                                 {item.label}
-                              </motion.span>
+                              </m.span>
                             )}
                           </AnimatePresence>
-                        </PopoverTrigger>
+                        </m.button>
                       </span>
                     )
-                  }
+                  })}
+                </div>
+              </div>
 
-                  return (
-                    <span className="flex items-center gap-1" key={item.id}>
-                      {dividerIndex === index && (
-                        <div className="mx-0.5 h-5 w-px bg-border/60" />
+              <AnimatePresence initial={false}>
+                {open && (
+                  <m.div
+                    animate={{ opacity: 1, y: 0 }}
+                    className="no-scrollbar min-h-0 min-w-[200px] flex-1 overflow-y-auto overscroll-contain"
+                    exit={{ opacity: 0, y: 4 }}
+                    initial={{ opacity: 0, y: 8 }}
+                    transition={CONTENT_TRANSITION}
+                  >
+                    <div className="px-2 pb-2" ref={contentRef}>
+                      {controller ? (
+                        <StreamPanel
+                          onLoadStream={controller.onLoadStream}
+                          onPlaylistChange={controller.onPlaylistChange}
+                          onPresetChange={controller.onPresetChange}
+                          playerType={controller.playerType}
+                          variant="children"
+                        />
+                      ) : (
+                        <div className="flex h-24 items-center justify-center text-sm text-muted-foreground">
+                          Player settings unavailable
+                        </div>
                       )}
-                      <motion.button
-                        animate={sharedAnimate}
-                        className={sharedClassName}
-                        initial={false}
-                        onClick={() => handleItemClick(item)}
-                        onTapStart={
-                          item.id === "refresh" ? handleRotateStart : undefined
-                        }
-                        transition={CONTENT_TRANSITION}
-                        type="button"
-                      >
-                        <motion.span
-                          animate={
-                            item.id === "refresh" ? rotateControls : undefined
-                          }
-                          className="inline-flex"
-                        >
-                          <Icon
-                            className={cn("size-4", item.iconStyle)}
-                            strokeWidth={item.strokeWidth}
-                          />
-                        </motion.span>
-                        <AnimatePresence initial={false}>
-                          {isActive && (
-                            <motion.span
-                              animate={{ opacity: 1, width: "auto" }}
-                              className="overflow-hidden text-sm font-medium tracking-tight whitespace-nowrap"
-                              exit={{ opacity: 0, width: 0 }}
-                              initial={{ opacity: 0, width: 0 }}
-                              transition={CONTENT_TRANSITION}
-                            >
-                              {item.label}
-                            </motion.span>
-                          )}
-                        </AnimatePresence>
-                      </motion.button>
-                    </span>
-                  )
-                })}
-              </div>
-            </div>
-          </motion.div>
-        </LayoutGroup>
+                    </div>
+                  </m.div>
+                )}
+              </AnimatePresence>
+            </m.div>
+          </LayoutGroup>
+        </LazyMotion>
       </div>
     </div>
   )
 }
 
-export { StreamPanelProvider }
+function getBlockSpacing(element: HTMLElement, axis: "margin" | "padding") {
+  const style = getComputedStyle(element)
+  return parseFloat(style[`${axis}Top`]) + parseFloat(style[`${axis}Bottom`])
+}
+
+function getStreamPanelContentHeight(root: HTMLElement) {
+  const panelRoot = root.querySelector<HTMLElement>("[data-stream-panel-root]")
+  const wrapperSpacing = getBlockSpacing(root, "padding")
+  const panelSpacing = panelRoot ? getBlockSpacing(panelRoot, "margin") : 0
+  const activeOverlay = root.querySelector<HTMLElement>(
+    '[data-stream-panel-overlay="active"]'
+  )
+
+  if (!activeOverlay) {
+    return Math.ceil(
+      wrapperSpacing +
+        panelSpacing +
+        (panelRoot?.scrollHeight ?? root.scrollHeight)
+    )
+  }
+
+  const overlayHeader = activeOverlay.querySelector<HTMLElement>(
+    "[data-stream-panel-overlay-header]"
+  )
+  const overlayBody = activeOverlay.querySelector<HTMLElement>(
+    "[data-stream-panel-overlay-body]"
+  )
+  const headerHeight = overlayHeader
+    ? overlayHeader.getBoundingClientRect().height +
+      getBlockSpacing(overlayHeader, "margin")
+    : 0
+  const bodyHeight = overlayBody?.scrollHeight ?? activeOverlay.scrollHeight
+
+  return Math.ceil(wrapperSpacing + panelSpacing + headerHeight + bodyHeight)
+}
diff --git a/apps/www/components/blocks/preview-pane.tsx b/apps/www/components/blocks/preview-pane.tsx
index 14beda1a..60d363e9 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -1,13 +1,29 @@
 "use client"
 
-import { motion } from "motion/react"
-import React, { useCallback, useEffect, useRef, useState } from "react"
+import { domAnimation, LazyMotion, m } from "motion/react"
+import { usePathname, useRouter } from "next/navigation"
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react"
 
-import { StreamPanel, StreamPanelProvider } from "@/components/stream-panel"
+import { StreamPanelProvider } from "@/components/stream-panel"
 import { useThemeToggle } from "@/components/theme-toggle"
 
 import { BlockToolbar } from "./block-toolbar"
 
+const EXPANDED_QUERY_PARAM = "expanded"
+
+type PreviewRect = {
+  height: number | string
+  left: number | string
+  top: number
+  width: number
+}
+
 export function BlockPreviewWithToolbar({
   children,
   codeUrl,
@@ -15,6 +31,8 @@ export function BlockPreviewWithToolbar({
   children: React.ReactNode
   codeUrl?: string
 }) {
+  const pathname = usePathname()
+  const router = useRouter()
   const [expanded, setExpanded] = useState(false)
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
@@ -24,26 +42,24 @@ export function BlockPreviewWithToolbar({
   const theme = isDark ? "dark" : "light"
   const [reloadKey, setReloadKey] = useState(0)
   const panelRef = useRef<HTMLDivElement>(null)
-  const [panelRect, setPanelRect] = useState({
+  const [panelRect, setPanelRect] = useState<PreviewRect>({
     height: "100%",
     left: "100%",
     top: 0,
     width: 0,
   })
 
+  const handlePanelRef = useCallback((node: HTMLDivElement | null) => {
+    panelRef.current = node
+    if (node) setPanelRect(getElementRect(node))
+  }, [])
+
   useEffect(() => {
     if (!panelRef.current) return
     const update = () => {
       if (!panelRef.current) return
-      const rect = panelRef.current.getBoundingClientRect()
-      setPanelRect({
-        height: rect.height as any,
-        left: rect.left as any,
-        top: rect.top,
-        width: rect.width,
-      })
+      setPanelRect(getElementRect(panelRef.current))
     }
-    update()
     const ro = new ResizeObserver(update)
     ro.observe(panelRef.current)
     window.addEventListener("resize", update)
@@ -53,27 +69,50 @@ export function BlockPreviewWithToolbar({
     }
   }, [])
 
+  const updateExpandedQuery = useCallback(
+    (nextExpanded: boolean) => {
+      const nextSearchParams = new URLSearchParams(window.location.search)
+      if (nextExpanded) {
+        nextSearchParams.set(EXPANDED_QUERY_PARAM, "true")
+      } else {
+        nextSearchParams.delete(EXPANDED_QUERY_PARAM)
+      }
+
+      const queryString = nextSearchParams.toString()
+      router.replace(queryString ? `${pathname}?${queryString}` : pathname, {
+        scroll: false,
+      })
+    },
+    [pathname, router]
+  )
+
   const handleExpandToggle = useCallback(() => {
-    setExpanded((e) => !e)
-  }, [])
+    setExpanded((currentExpanded) => {
+      const nextExpanded = !currentExpanded
+      updateExpandedQuery(nextExpanded)
+      return nextExpanded
+    })
+  }, [updateExpandedQuery])
 
   const handleReload = useCallback(() => {
     setReloadKey((k) => k + 1)
   }, [])
 
   const expandedInset = 16
-  const [windowSize, setWindowSize] = useState({ height: 0, width: 0 })
+  const [windowSize, setWindowSize] = useState(getWindowSize)
 
   useEffect(() => {
-    const update = () =>
-      setWindowSize({ height: window.innerHeight, width: window.innerWidth })
-    update()
+    const update = () => setWindowSize(getWindowSize())
     window.addEventListener("resize", update)
     return () => window.removeEventListener("resize", update)
   }, [])
 
-  // DEV: This controls the breadcumbs to be hidden when preview is expanded
-  useEffect(() => {
+  useLayoutEffect(() => {
+    setExpanded(getExpandedFromUrl())
+  }, [pathname])
+
+  // DEV: This controls the left doc section to be hidden when preview is expanded
+  useLayoutEffect(() => {
     document.documentElement.dataset.blockPreviewExpanded = expanded
       ? "true"
       : "false"
@@ -98,39 +137,57 @@ export function BlockPreviewWithToolbar({
 
   return (
     <StreamPanelProvider>
-      <div className="absolute inset-0" ref={panelRef} />
-      <motion.div
-        animate={expanded ? expandedStyle : collapsedStyle}
-        className="fixed z-40 overflow-hidden bg-transparent p-4"
-        initial={false}
-        transition={{ damping: 35, stiffness: 300, type: "spring" }}
-      >
-        <div className="flex size-full flex-col">
-          <div className="relative flex flex-1 flex-col overflow-hidden rounded-2xl bg-muted">
-            <div
-              className="relative flex flex-1 items-center justify-center overflow-hidden"
-              key={reloadKey}
-            >
-              {children}
-            </div>
+      <div className="absolute inset-0" ref={handlePanelRef} />
+      <LazyMotion features={domAnimation}>
+        <m.div
+          animate={expanded ? expandedStyle : collapsedStyle}
+          className="fixed z-40 overflow-hidden bg-transparent p-4"
+          initial={false}
+          transition={{ damping: 35, stiffness: 300, type: "spring" }}
+        >
+          <div className="flex size-full flex-col">
+            <div className="relative flex flex-1 flex-col overflow-hidden rounded-2xl bg-muted">
+              <div
+                className="relative flex flex-1 items-center justify-center overflow-hidden"
+                key={reloadKey}
+              >
+                {children}
+              </div>
 
-            <BlockToolbar
-              codeUrl={codeUrl}
-              expanded={expanded}
-              onExpandToggle={handleExpandToggle}
-              onReload={handleReload}
-              onThemeToggle={toggleTheme}
-              theme={theme}
-            />
+              <BlockToolbar
+                codeUrl={codeUrl}
+                expanded={expanded}
+                onExpandToggle={handleExpandToggle}
+                onReload={handleReload}
+                onThemeToggle={toggleTheme}
+                theme={theme}
+              />
+            </div>
           </div>
-        </div>
-      </motion.div>
-      <StreamPanel
-        align="end"
-        playerType="video"
-        side="top"
-        variant="anchored"
-      />
+        </m.div>
+      </LazyMotion>
     </StreamPanelProvider>
   )
 }
+
+function getElementRect(element: HTMLElement): PreviewRect {
+  const rect = element.getBoundingClientRect()
+  return {
+    height: rect.height,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+  }
+}
+
+function getExpandedFromUrl() {
+  return (
+    new URLSearchParams(window.location.search).get(EXPANDED_QUERY_PARAM) ===
+    "true"
+  )
+}
+
+function getWindowSize() {
+  if (typeof window === "undefined") return { height: 0, width: 0 }
+  return { height: window.innerHeight, width: window.innerWidth }
+}
diff --git a/apps/www/components/players/audio-player/demo-player.tsx b/apps/www/components/players/audio-player/demo-player.tsx
index 5735e53f..33a5cceb 100644
--- a/apps/www/components/players/audio-player/demo-player.tsx
+++ b/apps/www/components/players/audio-player/demo-player.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import type { ReactNode } from "react"
+
 import { useEffect, useState } from "react"
 
 import type { AudioPlayerAsset } from "@/registry/default/blocks/audio-player/components/media-player"
@@ -12,10 +14,12 @@ import {
 } from "./demo"
 
 export interface AudioPlayerDemoProps {
+  children?: ReactNode
   playlistId?: string
 }
 
 export function AudioPlayerDemo({
+  children,
   playlistId = AUDIO_PLAYER_DEMO_PLAYLIST_ID,
 }: AudioPlayerDemoProps) {
   const [playlist, setPlaylist] = useState<AudioPlayerAsset[]>([])
@@ -39,5 +43,5 @@ export function AudioPlayerDemo({
     }
   }, [playlistId])
 
-  return <AudioPlayer playlist={playlist} />
+  return <AudioPlayer playlist={playlist}>{children}</AudioPlayer>
 }
diff --git a/apps/www/components/players/audio-player/hover-player.tsx b/apps/www/components/players/audio-player/hover-player.tsx
index 60abefd6..302fc96a 100644
--- a/apps/www/components/players/audio-player/hover-player.tsx
+++ b/apps/www/components/players/audio-player/hover-player.tsx
@@ -1,57 +1,114 @@
 "use client"
 
-import { AudioLinesIcon, SquareArrowOutUpRightIcon } from "lucide-react"
+import {
+  AudioLinesIcon,
+  Settings2Icon,
+  SquareArrowOutUpRightIcon,
+} from "lucide-react"
 import { motion } from "motion/react"
 import Link from "next/link"
 
+import {
+  StreamPanel,
+  StreamPanelProvider,
+  useStreamPanel,
+} from "@/components/stream-panel"
+import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
 import { Button } from "@/components/ui/button"
+import { PopoverTrigger } from "@/components/ui/popover"
 
 import { AudioPlayerDemo } from "./demo-player"
 
 export function AudioPlayerHover() {
   return (
-    <motion.div
-      animate="closed"
-      className="isolate"
-      initial="closed"
-      whileHover="open"
-    >
+    <StreamPanelProvider>
       <motion.div
-        className={`mx-auto block max-w-5xl`}
-        style={{ transformOrigin: "bottom left" }}
-        transition={{
-          damping: 28,
-          mass: 0.72,
-          stiffness: 380,
-          type: "spring",
-        }}
-        variants={{
-          closed: { opacity: 0.98, scale: 0.985, y: 48 },
-          open: { opacity: 1, scale: 1, y: 0 },
-        }}
+        animate="closed"
+        className="isolate"
+        initial="closed"
+        whileHover="open"
       >
-        <div className="flex h-14 w-fit flex-row items-center gap-3 rounded-t-3xl bg-black px-4">
-          <div className="flex w-full items-center justify-center gap-1">
-            <span className="flex size-9 items-center justify-center rounded-full bg-white text-black">
-              <AudioLinesIcon className="size-5" />
-            </span>
-            <span className="text-3xl font-semibold tracking-tight text-white">
-              Audio
-            </span>
+        <motion.div
+          className={`mx-auto block max-w-5xl`}
+          style={{ transformOrigin: "bottom left" }}
+          transition={{
+            damping: 28,
+            mass: 0.72,
+            stiffness: 380,
+            type: "spring",
+          }}
+          variants={{
+            closed: { opacity: 0.98, scale: 0.985, y: 48 },
+            open: { opacity: 1, scale: 1, y: 0 },
+          }}
+        >
+          <div className="flex h-14 w-fit flex-row items-center gap-3 rounded-t-3xl bg-black px-4">
+            <div className="flex w-full items-center justify-center gap-1">
+              <span className="flex size-9 items-center justify-center rounded-full bg-white text-black">
+                <AudioLinesIcon className="size-5" />
+              </span>
+              <span className="text-3xl font-semibold tracking-tight text-white">
+                Audio
+              </span>
+            </div>
+            <div className="my-auto h-8 w-0.5 rounded-md bg-muted-foreground"></div>
+            <AudioSettingsTrigger />
+            <Button asChild size="xs">
+              <Link
+                className="text-sm font-semibold tracking-tight"
+                href="/blocks/audio-player"
+              >
+                Install Now
+                <SquareArrowOutUpRightIcon className="ml-1" />
+              </Link>
+            </Button>
           </div>
-          <div className="my-auto h-8 w-0.5 rounded-md bg-muted-foreground"></div>
-          <Button asChild size="xs">
-            <Link
-              className="text-sm font-semibold tracking-tight"
-              href="/blocks/audio-player"
-            >
-              Install Now
-              <SquareArrowOutUpRightIcon className="ml-1" />
-            </Link>
-          </Button>
-        </div>
+        </motion.div>
+        <AudioPlayerDemo>
+          <AudioHoverStreamSync />
+        </AudioPlayerDemo>
       </motion.div>
-      <AudioPlayerDemo />
-    </motion.div>
+    </StreamPanelProvider>
+  )
+}
+
+function AudioHoverStreamSync() {
+  const {
+    handleLoadStream,
+    handlePlaylistPresetChange,
+    handlePresetChange,
+  } = useStreamPanelSync({ playerType: "audio" })
+
+  return (
+    <StreamPanel
+      align="end"
+      onLoadStream={handleLoadStream}
+      onPlaylistChange={handlePlaylistPresetChange}
+      onPresetChange={handlePresetChange}
+      playerType="audio"
+      side="top"
+      variant="anchored"
+    />
+  )
+}
+
+function AudioSettingsTrigger() {
+  const { handle } = useStreamPanel()
+
+  return (
+    <Button
+      aria-label="Audio settings"
+      asChild
+      className="
+        size-8 rounded-full border border-border/40 bg-background/10 text-primary-foreground
+        hover:bg-background/20
+      "
+      size="icon"
+      variant="ghost"
+    >
+      <PopoverTrigger handle={handle}>
+        <Settings2Icon className="size-4" />
+      </PopoverTrigger>
+    </Button>
   )
 }
diff --git a/apps/www/components/players/video-player/demo-assets.ts b/apps/www/components/players/video-player/demo-assets.ts
deleted file mode 100644
index dbdab298..00000000
--- a/apps/www/components/players/video-player/demo-assets.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type shaka from "shaka-player"
-
-import type { VideoPlayerAsset } from "@/registry/default/blocks/video-player/components/media-player"
-
-export const VIDEO_PLAYER_DEMO_ASSETS: VideoPlayerAsset[] = [
-  {
-    config: {
-      drm: {
-        advanced: {
-          "com.widevine.alpha": {
-            serverCertificateUri:
-              "https://cwip-shaka-proxy.appspot.com/service-cert",
-          },
-        },
-        servers: {
-          "com.widevine.alpha": "https://cwip-shaka-proxy.appspot.com/no_auth",
-        },
-      } as unknown as shaka.extern.DrmConfiguration,
-    } as shaka.extern.PlayerConfiguration,
-    description:
-      "A Blender Foundation short film, protected by Widevine encryption",
-    id: "sintel",
-    poster: "https://storage.googleapis.com/shaka-asset-icons/sintel.png",
-    src: "https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd",
-    title: "Blender Foundation - Sintel",
-  },
-  {
-    description: "Media Tailor HLS Stream",
-    id: "sing2",
-    poster: "https://storage.googleapis.com/shaka-asset-icons/sing.png",
-    src: "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8",
-    title: "Sing 2 Trailer",
-  },
-  {
-    description: "A Blender Foundation short film, Media Tailor Live DASH",
-    id: "bbb",
-    poster:
-      "https://storage.googleapis.com/shaka-asset-icons/big_buck_bunny.png",
-    src: "https://d305rncpy6ne2q.cloudfront.net/v1/dash/94063eadf7d8c56e9e2edd84fdf897826a70d0df/SFP-MediaTailor-Live-HLS-DASH/channel/sfp-channel1/dash.mpd",
-    title: "Big Buck Bunny",
-  },
-  {
-    description: "HLS Video",
-    id: "natgeo",
-    poster: "https://demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg",
-    src: "https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8",
-    title: "National Geographic - VR equirectangular",
-  },
-]
diff --git a/apps/www/components/players/video-player/player-container.tsx b/apps/www/components/players/video-player/player-container.tsx
index 308ac5ca..993372bc 100644
--- a/apps/www/components/players/video-player/player-container.tsx
+++ b/apps/www/components/players/video-player/player-container.tsx
@@ -12,8 +12,6 @@ import { useOrientation } from "@/hooks/use-orientation"
 import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/registry/default/blocks/video-player/components/media-player"
 
-import { VIDEO_PLAYER_DEMO_ASSETS } from "./demo-assets"
-
 export function VideoPlayerContainer() {
   const isMobile = useIsMobile()
   const { isPortrait } = useOrientation()
@@ -40,7 +38,6 @@ export function VideoPlayerContainer() {
           autoPlay: false,
           muted: true,
         }}
-        playlist={VIDEO_PLAYER_DEMO_ASSETS}
         ref={playerRef}
       />
     </>
diff --git a/apps/www/components/stream-panel/content-catalog.ts b/apps/www/components/stream-panel/content-catalog.ts
new file mode 100644
index 00000000..67c42ad5
--- /dev/null
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -0,0 +1,155 @@
+import type shaka from "shaka-player"
+
+import type { StreamPanelPlayerType } from "@/lib/docs-dial-store"
+import type { Asset } from "@/registry/default/hooks/use-asset"
+
+export interface BlenderOpenFilmAsset extends Asset {
+  duration?: number
+  images?: BlenderOpenFilmImages
+  source: "blender-open-film"
+  subtitle?: string
+  year?: number
+}
+export interface BlenderOpenFilmImages {
+  backdrop?: string
+  logo?: string
+  poster?: string
+}
+
+export interface BlenderStreamResponse extends BlenderPlaylistItem {
+  captions?: BlenderStreamCaption[]
+  links?: Record<string, string | undefined>
+  playback: {
+    hls: string
+    mimeType?: string
+  }
+}
+
+export interface StreamPanelPlaylistPreset {
+  count?: number
+  description: string
+  id: string
+  name: string
+  type: StreamPanelPlayerType
+}
+
+interface BlenderPlaylistItem {
+  description?: string
+  duration?: number
+  id: string
+  images?: BlenderOpenFilmImages
+  subtitle?: string
+  title: string
+  year?: number
+}
+
+interface BlenderPlaylistResponse {
+  count: number
+  items: BlenderPlaylistItem[]
+  title: string
+}
+
+interface BlenderStreamCaption {
+  kind?: TextTrackKind
+  label: string
+  language: string
+  mimeType?: string
+  url: string
+}
+
+const BLENDER_OPEN_FILMS_PLAYLIST_ID = "blender-open-films"
+
+const BLENDER_API_BASE_URL = "https://limeplay.winoffrg.workers.dev/api/blender"
+
+const STREAM_PANEL_PLAYLIST_PRESETS: StreamPanelPlaylistPreset[] = [
+  {
+    count: 17,
+    description: "Open movies from Blender Studio",
+    id: BLENDER_OPEN_FILMS_PLAYLIST_ID,
+    name: "Blender Open Films",
+    type: "video",
+  },
+]
+
+export async function addBlenderCaptions(
+  player: shaka.Player,
+  stream: BlenderStreamResponse
+): Promise<void> {
+  if (!stream.captions || stream.captions.length === 0) return
+
+  await Promise.all(
+    stream.captions.map((caption) =>
+      player.addTextTrackAsync(
+        caption.url,
+        caption.language,
+        caption.kind ?? "subtitles",
+        caption.mimeType ?? "text/vtt",
+        undefined,
+        caption.label
+      )
+    )
+  )
+}
+
+export async function fetchBlenderStream(
+  assetId: string,
+  signal?: AbortSignal
+): Promise<BlenderStreamResponse> {
+  const response = await fetch(`${BLENDER_API_BASE_URL}/stream/${assetId}`, {
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch Blender stream: ${response.statusText}`)
+  }
+
+  return (await response.json()) as BlenderStreamResponse
+}
+
+export async function fetchPlaylistPresetAssets(
+  playlistId: string,
+  signal?: AbortSignal
+): Promise<Asset[]> {
+  if (playlistId !== BLENDER_OPEN_FILMS_PLAYLIST_ID) {
+    throw new Error(`Unknown playlist preset "${playlistId}".`)
+  }
+
+  const response = await fetch(`${BLENDER_API_BASE_URL}/playlist`, { signal })
+  if (!response.ok) {
+    throw new Error(`Failed to fetch Blender playlist: ${response.statusText}`)
+  }
+
+  const playlist = (await response.json()) as BlenderPlaylistResponse
+
+  return playlist.items.map(toBlenderOpenFilmAsset)
+}
+
+export function getPlaylistPresetsForType(
+  playerType: StreamPanelPlayerType
+): StreamPanelPlaylistPreset[] {
+  return STREAM_PANEL_PLAYLIST_PRESETS.filter(
+    (playlist) => playlist.type === playerType
+  )
+}
+
+export function isBlenderOpenFilmAsset(
+  asset: Asset
+): asset is BlenderOpenFilmAsset {
+  return "source" in asset && asset.source === "blender-open-film"
+}
+
+function toBlenderOpenFilmAsset(
+  item: BlenderPlaylistItem
+): BlenderOpenFilmAsset {
+  return {
+    description: item.description,
+    duration: item.duration,
+    id: item.id,
+    images: item.images,
+    poster: item.images?.backdrop ?? item.images?.poster,
+    source: "blender-open-film",
+    subtitle: item.subtitle,
+    title: item.title,
+    year: item.year,
+  }
+}
diff --git a/apps/www/components/stream-panel/content-overview-overlay.tsx b/apps/www/components/stream-panel/content-overview-overlay.tsx
new file mode 100644
index 00000000..d115ff35
--- /dev/null
+++ b/apps/www/components/stream-panel/content-overview-overlay.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { ChevronRightIcon } from "lucide-react"
+
+import type {
+  StreamPanelContentKind,
+  StreamPanelPlayerType,
+} from "@/lib/docs-dial-store"
+
+import { cn } from "@/lib/utils"
+
+import { Separator } from "../ui/separator"
+import {
+  FilmIcon,
+  type IconProps,
+  RadarIcon,
+  VideoPlaylistIcon,
+} from "./icons"
+import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
+
+interface ContentOverviewOverlayProps {
+  liveCount: number
+  onBack: () => void
+  onSelect: (kind: StreamPanelContentKind) => void
+  placement?: OverlayShellPlacement
+  playerType: StreamPanelPlayerType
+  playlistCount: number
+  show: boolean
+  streamCount: number
+}
+
+const rows: {
+  description: string
+  Icon: React.ComponentType<IconProps>
+  kind: StreamPanelContentKind
+  label: string
+}[] = [
+  {
+    description: "Adaptive and progressive test content",
+    Icon: FilmIcon,
+    kind: "stream",
+    label: "Streams",
+  },
+  {
+    description: "Curated multi-item queues",
+    Icon: VideoPlaylistIcon,
+    kind: "playlist",
+    label: "Playlists",
+  },
+  {
+    description: "Time-based live manifests",
+    Icon: RadarIcon,
+    kind: "live",
+    label: "Live",
+  },
+]
+
+export function ContentOverviewOverlay({
+  liveCount,
+  onBack,
+  onSelect,
+  placement,
+  playerType,
+  playlistCount,
+  show,
+  streamCount,
+}: ContentOverviewOverlayProps) {
+  const counts: Record<StreamPanelContentKind, number> = {
+    live: liveCount,
+    playlist: playlistCount,
+    stream: streamCount,
+  }
+
+  return (
+    <OverlayShell
+      onBack={onBack}
+      placement={placement}
+      show={show}
+      title={playerType === "audio" ? "Audio Presets" : "Video Presets"}
+    >
+      <Separator className="my-1 h-px" />
+      <div className="flex flex-col gap-1.5 p-2 pt-1">
+        <div className="flex flex-col gap-1.5">
+          {rows.map((row) => {
+            const count = counts[row.kind]
+            const disabled = count === 0
+
+            return (
+              <button
+                className={cn(
+                  `
+                    group flex min-h-12 w-full cursor-pointer items-center gap-3 rounded-lg px-2 text-left outline-hidden
+                    transition-[background-color,transform,color]
+                    hover:bg-foreground/4
+                    focus-visible:bg-foreground/4
+                    active:scale-[0.985]
+                  `,
+                  disabled && "pointer-events-none opacity-45"
+                )}
+                disabled={disabled}
+                key={row.kind}
+                onClick={() => onSelect(row.kind)}
+                type="button"
+              >
+                <span
+                  className="
+                    flex size-7 shrink-0 items-center justify-center text-muted-foreground transition-colors
+                    group-hover:text-foreground
+                  "
+                >
+                  <row.Icon aria-hidden="true" className="size-5" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-center gap-2">
+                    <span className="text-sm font-medium tracking-tight">
+                      {row.label}
+                    </span>
+                    <span className="text-[10px] leading-none font-medium text-muted-foreground">
+                      {count}
+                    </span>
+                  </span>
+                  <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                    {row.description}
+                  </span>
+                </span>
+                <ChevronRightIcon className="
+                  size-3.5 shrink-0 text-muted-foreground transition-transform
+                  group-hover:translate-x-0.5
+                " />
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </OverlayShell>
+  )
+}
diff --git a/apps/www/components/stream-panel/custom-overlay.tsx b/apps/www/components/stream-panel/custom-overlay.tsx
index 0a0d874b..500b65fa 100644
--- a/apps/www/components/stream-panel/custom-overlay.tsx
+++ b/apps/www/components/stream-panel/custom-overlay.tsx
@@ -1,24 +1,30 @@
 "use client"
 
-import { AnimatePresence, motion } from "motion/react"
+import { AnimatePresence, m } from "motion/react"
 import React, { useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
-import { useDocsDialStore } from "@/lib/docs-dial-store"
+import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { cn } from "@/lib/utils"
 
-import { OverlayShell } from "./overlay-shell"
+import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
 
 interface CustomOverlayProps {
   onBack: () => void
   onLoad: (src: string, config?: string) => void
+  placement?: OverlayShellPlacement
   show: boolean
 }
 
-export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
-  const store = useDocsDialStore()
+export function CustomOverlay({
+  onBack,
+  onLoad,
+  placement,
+  show,
+}: CustomOverlayProps) {
+  const store = useStreamPanelStore()
   const [urlError, setUrlError] = useState(false)
   const [configError, setConfigError] = useState(false)
   const [showSave, setShowSave] = useState(false)
@@ -106,20 +112,29 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
   }
 
   return (
-    <OverlayShell onBack={onBack} show={show} title="Custom Stream">
+    <OverlayShell
+      onBack={onBack}
+      placement={placement}
+      show={show}
+      title="Custom Stream"
+    >
       <div
         className={cn(
           "no-scrollbar flex-1 overflow-y-auto",
-          "flex flex-col gap-3 p-3"
+          "flex flex-col gap-3 p-2 pt-1"
         )}
       >
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-muted-foreground">
+        <div className="flex flex-col gap-1.5 px-2.5 py-1.5">
+          <label
+            className="px-0.5 text-[10px] leading-none font-semibold tracking-[0.16em] text-muted-foreground/70 uppercase"
+            htmlFor="custom-stream-url"
+          >
             Playback URL
           </label>
           <Input
             aria-invalid={urlError}
-            className="h-8 text-sm"
+            className="h-9 rounded-2xl text-sm"
+            id="custom-stream-url"
             onChange={(e) => handleUrlChange(e.target.value)}
             placeholder="https://example.com/stream.m3u8"
             value={store.customSrc}
@@ -130,14 +145,17 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
             </p>
           )}
         </div>
-        <div className="flex flex-col gap-1.5">
+        <div className="flex flex-col gap-1.5 px-2.5 py-1.5">
           <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-muted-foreground">
+            <label
+              className="px-0.5 text-[10px] leading-none font-semibold tracking-[0.16em] text-muted-foreground/70 uppercase"
+              htmlFor="custom-stream-config"
+            >
               Shaka Config (optional)
             </label>
             <a
               className={`
-                text-sm text-muted-foreground underline-offset-2
+                text-xs font-medium text-muted-foreground underline-offset-2
                 hover:underline
               `}
               href="https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.PlayerConfiguration"
@@ -149,7 +167,8 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
           </div>
           <Textarea
             aria-invalid={configError}
-            className="min-h-24 resize-none font-mono text-sm"
+            className="min-h-24 resize-none rounded-2xl font-mono text-sm"
+            id="custom-stream-config"
             onChange={(e) => handleConfigChange(e.target.value)}
             onPaste={handleConfigPaste}
             placeholder={'{\n  "drm": {\n    "servers": {}\n  }\n}'}
@@ -162,23 +181,27 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
 
         <AnimatePresence>
           {showSave && (
-            <motion.div
+            <m.div
               animate={{ height: "auto", opacity: 1 }}
               className="flex flex-col gap-1.5 overflow-hidden"
               exit={{ height: 0, opacity: 0 }}
               initial={{ height: 0, opacity: 0 }}
               transition={{ bounce: 0, duration: 0.2, type: "spring" }}
             >
-              <label className="text-sm font-medium text-muted-foreground">
+              <label
+                className="px-0.5 text-[10px] leading-none font-semibold tracking-[0.16em] text-muted-foreground/70 uppercase"
+                htmlFor="custom-stream-name"
+              >
                 Stream Name
               </label>
               <Input
-                className="h-8 text-sm"
+                className="h-9 rounded-2xl text-sm"
+                id="custom-stream-name"
                 onChange={(e) => setSaveName(e.target.value)}
                 placeholder="My custom stream"
                 value={saveName}
               />
-            </motion.div>
+            </m.div>
           )}
         </AnimatePresence>
 
@@ -186,7 +209,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
           {showSave ? (
             <>
               <Button
-                className="h-8 flex-1 text-sm"
+                className="h-9 flex-1 rounded-2xl text-sm"
                 disabled={!canSave}
                 onClick={handleSave}
                 size="sm"
@@ -194,7 +217,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
                 Save
               </Button>
               <Button
-                className="h-8 text-sm"
+                className="h-9 rounded-2xl text-sm"
                 onClick={() => {
                   setShowSave(false)
                   setSaveName("")
@@ -208,7 +231,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
           ) : (
             <>
               <Button
-                className="h-8 flex-1 text-sm"
+                className="h-9 flex-1 rounded-2xl text-sm"
                 disabled={!canLoad}
                 onClick={handleLoad}
                 size="sm"
@@ -216,7 +239,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
                 Load Stream
               </Button>
               <Button
-                className="h-8 text-sm"
+                className="h-9 rounded-2xl text-sm"
                 disabled={!canLoad}
                 onClick={() => setShowSave(true)}
                 size="sm"
diff --git a/apps/www/components/stream-panel/icons.tsx b/apps/www/components/stream-panel/icons.tsx
new file mode 100644
index 00000000..68b0e122
--- /dev/null
+++ b/apps/www/components/stream-panel/icons.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const createIcon =
+  (path: React.ReactNode) =>
+  ({ size = 24, ...props }: IconProps) =>
+    (
+      <svg
+        fill="none"
+        height={size}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        {path}
+      </svg>
+    );
+
+export const RadarIcon = createIcon(
+  <>
+    <path
+      d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75C11.25 3.16421 11.5858 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 12.4142 20.8358 12.75 21.25 12.75C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75C14.8995 6.75 17.25 9.10051 17.25 12C17.25 12.4142 17.5858 12.75 18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 8.27208 15.7279 5.25 12 5.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.0347 6.97403C5.95027 5.8896 3.93526 5.81752 3.10831 7.41998C2.39976 8.79299 2 10.3509 2 12C2 17.5228 6.47715 22 12 22C13.6491 22 15.207 21.6002 16.58 20.8917C18.1825 20.0647 18.1104 18.0497 17.026 16.9653L12.5607 12.5L13.5303 11.5303C13.8232 11.2374 13.8232 10.7626 13.5303 10.4697C13.2374 10.1768 12.7626 10.1768 12.4697 10.4697L11.5 11.4393L7.0347 6.97403Z"
+      fill="currentColor"
+    />
+  </>
+);
+
+export const VideoPlaylistIcon = createIcon(
+  <path
+    clipRule="evenodd"
+    d="M4 3.75C4 3.33579 4.33579 3 4.75 3H19.25C19.6642 3 20 3.33579 20 3.75C20 4.16421 19.6642 4.5 19.25 4.5H4.75C4.33579 4.5 4 4.16421 4 3.75ZM2 8.25C2 6.73122 3.23122 5.5 4.75 5.5H19.25C20.7688 5.5 22 6.73122 22 8.25V18.25C22 19.7688 20.7688 21 19.25 21H4.75C3.23122 21 2 19.7688 2 18.25V8.25ZM10.4187 10.0771C10.675 9.95093 10.9808 9.98132 11.2073 10.1555L14.4573 12.6555C14.6418 12.7975 14.75 13.0171 14.75 13.25C14.75 13.4829 14.6418 13.7025 14.4573 13.8445L11.2073 16.3445C10.9808 16.5187 10.675 16.5491 10.4187 16.4229C10.1623 16.2966 10 16.0357 10 15.75V10.75C10 10.4643 10.1623 10.2034 10.4187 10.0771Z"
+    fill="currentColor"
+    fillRule="evenodd"
+  />
+);
+
+export const FilmIcon = createIcon(
+  <path
+    clipRule="evenodd"
+    d="M3 5.75C3 4.23122 4.23122 3 5.75 3H18.25C19.7688 3 21 4.23122 21 5.75V18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75ZM5.75 4.5C5.05964 4.5 4.5 5.05964 4.5 5.75V7.125H7V4.5H5.75ZM17 4.5V7.125H19.5V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5H17ZM19.5 8.625H17V11.25H19.5V8.625ZM19.5 12.75H17V15.8333H19.5V12.75ZM19.5 17.3333H17V19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V17.3333ZM15.5 12.75V11.25H8.5V12.75H15.5ZM7 19.5V16.875H4.5V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H7ZM4.5 15.375H7V12.75H4.5V15.375ZM4.5 11.25H7V8.625H4.5V11.25Z"
+    fill="currentColor"
+    fillRule="evenodd"
+  />
+);
+
+export const PencilEdit = createIcon(
+  <>
+    <path
+      clipRule="evenodd"
+      d="M19.6339 4.19449C19.1457 3.70633 18.3543 3.70633 17.8661 4.19449L13.5 8.5606V10.4999H15.4393L19.8055 6.13383C20.2936 5.64567 20.2936 4.85421 19.8055 4.36606L19.6339 4.19449ZM16.8055 3.13383C17.8794 2.05988 19.6206 2.05988 20.6945 3.13383L20.8661 3.3054C21.9401 4.37934 21.9401 6.12054 20.8661 7.19449L16.2803 11.7803C16.1397 11.9209 15.9489 11.9999 15.75 11.9999H12.75C12.3358 11.9999 12 11.6642 12 11.2499V8.24994C12 8.05103 12.079 7.86026 12.2197 7.71961L16.8055 3.13383Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+    <path
+      d="M14.818 2.99994L11.159 6.65895C10.7371 7.08091 10.5 7.65321 10.5 8.24994V11.2499C10.5 12.4926 11.5074 13.4999 12.75 13.4999H15.75C16.3467 13.4999 16.919 13.2629 17.341 12.8409L21 9.18192V17.0804C21 17.6145 21 18.0604 20.9703 18.4246C20.9392 18.8045 20.8721 19.1612 20.7003 19.4984C20.4366 20.0159 20.0159 20.4366 19.4985 20.7002C19.1612 20.8721 18.8046 20.9392 18.4247 20.9702C18.0604 21 17.6146 21 17.0805 20.9999H6.91955C6.3854 21 5.93956 21 5.57533 20.9702C5.19545 20.9392 4.83879 20.8721 4.50153 20.7002C3.98408 20.4366 3.56338 20.0159 3.29973 19.4984C3.12789 19.1612 3.06078 18.8045 3.02974 18.4246C2.99998 18.0604 2.99999 17.6145 3 17.0804V6.9195C2.99999 6.38535 2.99998 5.9395 3.02974 5.57527C3.06078 5.19539 3.12789 4.83873 3.29973 4.50147C3.56339 3.98402 3.98408 3.56333 4.50153 3.29968C4.83879 3.12783 5.19545 3.06072 5.57533 3.02968C5.93956 2.99992 6.38541 2.99993 6.91955 2.99994H14.818Z"
+      fill="currentColor"
+    />
+  </>
+);
+
+export const StackTemplate = createIcon(
+  <>
+    <path
+      d="M19.1564 10C20.9595 10 22.2754 11.7065 21.8166 13.4502L20.3693 18.9502C20.0513 20.1582 18.9583 21 17.7091 21H6.29313C5.04403 20.9999 3.95095 20.1581 3.63298 18.9502L2.18571 13.4502C1.72688 11.7065 3.04287 10.0001 4.84587 10H19.1564Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.2511 6.5C19.6654 6.5 20.0011 6.83579 20.0011 7.25C20.0011 7.66421 19.6654 8 19.2511 8H4.75114C4.33701 7.9999 4.00114 7.66415 4.00114 7.25C4.00114 6.83585 4.33701 6.5001 4.75114 6.5H19.2511Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.2511 3C17.6654 3 18.0011 3.33579 18.0011 3.75C18.0011 4.16421 17.6654 4.5 17.2511 4.5H6.75114C6.33701 4.4999 6.00114 4.16415 6.00114 3.75C6.00114 3.33585 6.33701 3.0001 6.75114 3H17.2511Z"
+      fill="currentColor"
+    />
+  </>
+);
diff --git a/apps/www/components/stream-panel/index.ts b/apps/www/components/stream-panel/index.ts
index ffdb2024..8dbb31ee 100644
--- a/apps/www/components/stream-panel/index.ts
+++ b/apps/www/components/stream-panel/index.ts
@@ -1,4 +1,3 @@
 export { type PanelPosition, StreamPanel } from "./panel-popover"
-export { PanelSlider } from "./panel-slider"
 export { StreamPanelProvider, useStreamPanel } from "./provider"
 export { useStreamPanelSync } from "./use-stream-panel-sync"
diff --git a/apps/www/components/stream-panel/overlay-shell.tsx b/apps/www/components/stream-panel/overlay-shell.tsx
index 4fabff4f..42bab094 100644
--- a/apps/www/components/stream-panel/overlay-shell.tsx
+++ b/apps/www/components/stream-panel/overlay-shell.tsx
@@ -1,50 +1,108 @@
 "use client"
 
 import { ChevronLeft } from "lucide-react"
-import { motion } from "motion/react"
+import { domAnimation, LazyMotion, m } from "motion/react"
 import * as React from "react"
 
+import { cn } from "@/lib/utils"
+
 import { Button } from "../ui/button"
 
+export type OverlayShellPlacement = "active" | "covered" | "idle"
+
 interface OverlayShellProps {
   children: React.ReactNode
+  description?: string
   onBack: () => void
+  placement?: OverlayShellPlacement
   show: boolean
   title: string
 }
 
 export function OverlayShell({
   children,
+  description,
   onBack,
+  placement: placementProp,
   show,
   title,
 }: OverlayShellProps) {
+  const placement = placementProp ?? (show ? "active" : "idle")
+  const lastVisiblePlacementRef = React.useRef<OverlayShellPlacement>("active")
+  const wasVisibleRef = React.useRef(placement !== "idle")
+  const [, forceRender] = React.useReducer(increment, 0)
+
+  if (placement !== "idle") {
+    lastVisiblePlacementRef.current = placement
+    wasVisibleRef.current = true
+  }
+
+  const shouldRender = placement !== "idle" || wasVisibleRef.current
+  const visiblePlacement =
+    placement === "idle" ? lastVisiblePlacementRef.current : placement
+
+  if (!shouldRender) return null
+
   return (
-    <motion.div
-      animate={{ x: show ? "0%" : "100%" }}
-      className="absolute inset-0 z-10 flex flex-col bg-popover/98 backdrop-blur-[2px]"
-      inert={!show ? true : undefined}
-      initial={{ x: "100%" }}
-      transition={{ bounce: 0, duration: show ? 0.3 : 0.15, type: "spring" }}
-    >
-      <div className="flex items-center gap-2 border-b border-border/60 px-3 py-2.5">
-        <Button
-          className={`
-            flex size-7 items-center justify-center rounded-lg text-muted-foreground outline-hidden transition-[colors,transform]
-            hover:bg-accent hover:text-accent-foreground
-            focus-visible:bg-accent focus-visible:text-accent-foreground
-            active:scale-[0.97]
-          `}
-          onClick={onBack}
-          size="icon"
-          variant="ghost"
+    <LazyMotion features={domAnimation}>
+      <m.div
+        animate={{ x: placement === "idle" ? "100%" : "0%" }}
+        className={cn(
+          "absolute inset-0 flex flex-col bg-background",
+          visiblePlacement === "active" ? "z-20" : "z-10"
+        )}
+        data-stream-panel-overlay={placement}
+        inert={placement !== "active" ? true : undefined}
+        initial={{ x: "100%" }}
+        onAnimationComplete={() => {
+          if (placement === "idle") {
+            wasVisibleRef.current = false
+            forceRender()
+          }
+        }}
+        transition={{
+          bounce: 0,
+          duration: placement === "idle" ? 0.16 : 0.34,
+          type: "spring",
+        }}
+      >
+        <div
+          className="flex min-h-10 items-center gap-2 rounded-[22px] px-1"
+          data-stream-panel-overlay-header=""
         >
-          <ChevronLeft className="size-3.5" />
-        </Button>
-        <span className="text-sm font-semibold tracking-[0.01em]">{title}</span>
-      </div>
+          <Button
+            className={`
+              rounded-xl
+              hover:bg-foreground/4 hover:text-foreground
+              focus-visible:bg-foreground/4 focus-visible:text-foreground
+              active:scale-[0.97]
+            `}
+            onClick={onBack}
+            size="icon"
+            variant="ghost"
+          >
+            <ChevronLeft className="size-3.5" />
+          </Button>
+          <span className="min-w-0">
+            <span className="block truncate text-[13px]/4 font-semibold tracking-tight">
+              {title}
+            </span>
+            {description ? (
+              <span className="mt-2 block truncate text-[11px]/3 text-muted-foreground">
+                {description}
+              </span>
+            ) : null}
+          </span>
+        </div>
 
-      {children}
-    </motion.div>
+        <div className="min-h-0" data-stream-panel-overlay-body="">
+          {children}
+        </div>
+      </m.div>
+    </LazyMotion>
   )
 }
+
+function increment(value: number) {
+  return value + 1
+}
diff --git a/apps/www/components/stream-panel/panel-popover.config.ts b/apps/www/components/stream-panel/panel-popover.config.ts
new file mode 100644
index 00000000..4e8a6380
--- /dev/null
+++ b/apps/www/components/stream-panel/panel-popover.config.ts
@@ -0,0 +1,57 @@
+import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/content-catalog"
+import type {
+  StreamPanelContentKind,
+  StreamPanelPlayerType,
+} from "@/lib/docs-dial-store"
+import type { StreamPreset } from "@/lib/stream-presets"
+
+export const STREAM_PANEL_OVERLAY = {
+  CONTENT: "content",
+  CUSTOM: "custom",
+  LIVE: "live",
+  NONE: "none",
+  PLAYLISTS: "playlists",
+  SAVED: "saved",
+  STREAMS: "streams",
+} as const
+
+export type StreamPanelOverlay =
+  (typeof STREAM_PANEL_OVERLAY)[keyof typeof STREAM_PANEL_OVERLAY]
+
+export const STREAM_PANEL_POSITION_CLASSES = {
+  "bottom-left": "bottom-4 left-4",
+  "bottom-right": "bottom-10 right-4",
+  "top-left": "top-4 left-4",
+  "top-right": "top-4 right-4",
+} as const
+
+export type PanelPosition = keyof typeof STREAM_PANEL_POSITION_CLASSES
+
+export const STREAM_PANEL_ORIGIN_CLASSES = {
+  "bottom-left": "origin-bottom-left",
+  "bottom-right": "origin-bottom-right",
+  "top-left": "origin-top-left",
+  "top-right": "origin-top-right",
+} satisfies Record<PanelPosition, string>
+
+export const STREAM_PANEL_CONTENT_OVERLAYS = {
+  live: STREAM_PANEL_OVERLAY.LIVE,
+  playlist: STREAM_PANEL_OVERLAY.PLAYLISTS,
+  stream: STREAM_PANEL_OVERLAY.STREAMS,
+} satisfies Record<StreamPanelContentKind, StreamPanelOverlay>
+
+export const STREAM_PANEL_EMPTY_CONTENT_LABEL = "Choose content"
+
+export interface StreamPanelProps {
+  align?: "center" | "end" | "start"
+  onLoadStream?: (src: string, config?: string) => void
+  onPlaylistChange?: (playlist: StreamPanelPlaylistPreset) => void
+  onPresetChange?: (
+    preset: StreamPreset,
+    kind?: Extract<StreamPanelContentKind, "live" | "stream">
+  ) => void
+  playerType?: StreamPanelPlayerType
+  position?: PanelPosition
+  side?: "bottom" | "left" | "right" | "top"
+  variant?: "anchored" | "children" | "floating"
+}
diff --git a/apps/www/components/stream-panel/panel-popover.tsx b/apps/www/components/stream-panel/panel-popover.tsx
index 27cdb962..95af042a 100644
--- a/apps/www/components/stream-panel/panel-popover.tsx
+++ b/apps/www/components/stream-panel/panel-popover.tsx
@@ -1,294 +1,390 @@
 "use client"
 
-import { ChevronRight, PlusIcon, XIcon } from "lucide-react"
+import { ChevronRight } from "lucide-react"
 import React, { useMemo, useState } from "react"
 
+import type { StreamPanelContentKind } from "@/lib/docs-dial-store"
+
+import { getPlaylistPresetsForType } from "@/components/stream-panel/content-catalog"
 import { Field, FieldLabel } from "@/components/ui/field"
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTitle,
-} from "@/components/ui/popover"
+import { Popover, PopoverContent } from "@/components/ui/popover"
+import { Separator } from "@/components/ui/separator"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
-import { useDocsDialStore } from "@/lib/docs-dial-store"
+import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { getPresetsForType, type StreamPreset } from "@/lib/stream-presets"
 import { cn } from "@/lib/utils"
 
+import type { OverlayShellPlacement } from "./overlay-shell"
+
+import { ContentOverviewOverlay } from "./content-overview-overlay"
 import { CustomOverlay } from "./custom-overlay"
+import { type IconProps, PencilEdit, StackTemplate } from "./icons"
+import {
+  type PanelPosition,
+  STREAM_PANEL_CONTENT_OVERLAYS,
+  STREAM_PANEL_EMPTY_CONTENT_LABEL,
+  STREAM_PANEL_ORIGIN_CLASSES,
+  STREAM_PANEL_OVERLAY,
+  STREAM_PANEL_POSITION_CLASSES,
+  type StreamPanelOverlay,
+  type StreamPanelProps,
+} from "./panel-popover.config"
+import { PlaylistsOverlay } from "./playlists-overlay"
 import { PresetsOverlay } from "./presets-overlay"
 import { useStreamPanel } from "./provider"
 import { SavedOverlay } from "./saved-overlay"
 
-export type PanelPosition =
-  | "bottom-left"
-  | "bottom-right"
-  | "top-left"
-  | "top-right"
-
-type ActiveOverlay = "custom" | "none" | "presets" | "saved"
-
-interface StreamPanelProps {
-  align?: "center" | "end" | "start"
-  onLoadStream?: (src: string, config?: string) => void
-  onPresetChange?: (preset: StreamPreset) => void
-  playerType?: "audio" | "video"
-  position?: PanelPosition
-  side?: "bottom" | "left" | "right" | "top"
-  variant?: "anchored" | "floating"
-}
-
-const positionClasses: Record<PanelPosition, string> = {
-  "bottom-left": "bottom-4 left-4",
-  "bottom-right": "bottom-10 right-4",
-  "top-left": "top-4 left-4",
-  "top-right": "top-4 right-4",
-}
-
-const originMap: Record<PanelPosition, string> = {
-  "bottom-left": "origin-bottom-left",
-  "bottom-right": "origin-bottom-right",
-  "top-left": "origin-top-left",
-  "top-right": "origin-top-right",
-}
+export type { PanelPosition, StreamPanelProps }
 
 export function StreamPanel({
   align = "center",
   onLoadStream,
+  onPlaylistChange,
   onPresetChange,
   playerType = "video",
   position = "bottom-right",
   side = "bottom",
   variant = "floating",
 }: StreamPanelProps) {
-  const { handle, onOpenChange, open } = useStreamPanel()
-  const [activeOverlay, setActiveOverlay] = useState<ActiveOverlay>("none")
+  const { handle, onOpenChange, open, setOpen } = useStreamPanel()
+  const [overlayStack, setOverlayStack] = useState<StreamPanelOverlay[]>([])
 
   React.useEffect(() => {
-    if (!open) setActiveOverlay("none")
+    if (!open) setOverlayStack([])
   }, [open])
 
-  const store = useDocsDialStore()
+  const store = useStreamPanelStore()
   const presets = getPresetsForType(playerType)
+  const streamPresets = useMemo(
+    () => presets.filter((preset) => preset.group !== "Live"),
+    [presets]
+  )
+  const livePresets = useMemo(
+    () => presets.filter((preset) => preset.group === "Live"),
+    [presets]
+  )
+  const playlistPresets = useMemo(
+    () => getPlaylistPresetsForType(playerType),
+    [playerType]
+  )
+  const contentSelection = store.contentSelections[playerType]
+  const groupedStreamPresets = useMemo(
+    () => groupPresets(streamPresets),
+    [streamPresets]
+  )
+  const groupedLivePresets = useMemo(
+    () => groupPresets(livePresets),
+    [livePresets]
+  )
+
+  const selectedContentName = useMemo(() => {
+    if (!contentSelection) return STREAM_PANEL_EMPTY_CONTENT_LABEL
 
-  const groupedPresets = useMemo(() => {
-    const groups: Partial<Record<string, StreamPreset[]>> = {}
-    for (const preset of presets) {
-      const group = preset.group
-      if (!groups[group]) groups[group] = []
-      groups[group].push(preset)
+    if (contentSelection.kind === "playlist") {
+      return (
+        playlistPresets.find((playlist) => playlist.id === contentSelection.id)
+          ?.name ?? STREAM_PANEL_EMPTY_CONTENT_LABEL
+      )
     }
-    return groups as Record<string, StreamPreset[]>
-  }, [presets])
-
-  const selectedPresetName = useMemo(
-    () =>
-      presets.find((preset) => preset.id === store.presetId)?.name ??
-      "Select a stream",
-    [presets, store.presetId]
-  )
 
-  const handlePresetChange = (presetId: string) => {
-    store.setPresetId(presetId)
+    return (
+      presets.find((preset) => preset.id === contentSelection.id)?.name ??
+      STREAM_PANEL_EMPTY_CONTENT_LABEL
+    )
+  }, [contentSelection, playlistPresets, presets])
+
+  const handlePresetChange = (
+    presetId: string,
+    kind: Extract<StreamPanelContentKind, "live" | "stream">
+  ) => {
     const preset = presets.find((p) => p.id === presetId)
-    if (preset) onPresetChange?.(preset)
+    if (!preset) return
+
+    store.setPresetId(presetId)
+    store.setContentSelection(playerType, { id: presetId, kind })
+    onPresetChange?.(preset, kind)
   }
 
   const handleLoadCustom = (src: string, config?: string) => {
     onLoadStream?.(src, config)
-    setActiveOverlay("none")
+    closeOverlays()
   }
 
   const handleLoadSaved = (stream: { config?: string; src: string }) => {
     onLoadStream?.(stream.src, stream.config)
-    setActiveOverlay("none")
+    closeOverlays()
+  }
+
+  const activeOverlay =
+    overlayStack.length > 0
+      ? overlayStack[overlayStack.length - 1]
+      : STREAM_PANEL_OVERLAY.NONE
+
+  const openOverlay = (overlay: StreamPanelOverlay) => {
+    if (overlay === STREAM_PANEL_OVERLAY.NONE) {
+      setOverlayStack([])
+      return
+    }
+
+    setOverlayStack((currentStack) => {
+      const existingIndex = currentStack.indexOf(overlay)
+      if (existingIndex !== -1) return currentStack.slice(0, existingIndex + 1)
+      return [...currentStack, overlay]
+    })
   }
 
+  const closeOverlays = () => {
+    setOverlayStack([])
+  }
+
+  const getOverlayPlacement = (
+    overlay: StreamPanelOverlay
+  ): OverlayShellPlacement => {
+    const overlayIndex = overlayStack.indexOf(overlay)
+    if (overlayIndex === -1) return "idle"
+    return overlayIndex === overlayStack.length - 1 ? "active" : "covered"
+  }
+
+  const presetOverlays = [
+    {
+      groupedPresets: groupedStreamPresets,
+      kind: "stream",
+      overlay: STREAM_PANEL_OVERLAY.STREAMS,
+      title: "Streams",
+    },
+    {
+      groupedPresets: groupedLivePresets,
+      kind: "live",
+      overlay: STREAM_PANEL_OVERLAY.LIVE,
+      title: "Live",
+    },
+  ] satisfies {
+    groupedPresets: Record<string, StreamPreset[]>
+    kind: Extract<StreamPanelContentKind, "live" | "stream">
+    overlay: StreamPanelOverlay
+    title: string
+  }[]
+
+  const content = (
+    <div
+      className="relative mt-2 flex min-h-0 w-full flex-col gap-2 overflow-visible"
+      data-stream-panel-root=""
+    >
+      <Field className="gap-0">
+        <FieldLabel className="mx-2 text-[10px] text-muted-foreground/70 uppercase">
+          Media Settings
+        </FieldLabel>
+
+        <PanelToggleRow onValueChange={store.setMuted} value={store.muted}>
+          Muted
+        </PanelToggleRow>
+        <PanelToggleRow
+          onValueChange={store.setAutoplay}
+          value={store.autoplay}
+        >
+          Autoplay
+        </PanelToggleRow>
+      </Field>
+
+      <Separator className="h-px bg-border/45" />
+
+      <PanelActionRow
+        detail={selectedContentName}
+        Icon={StackTemplate}
+        label="Presets"
+        onClick={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+      />
+
+      <PanelActionRow
+        detail={
+          store.savedStreams.length > 0
+            ? `${store.savedStreams.length} saved stream${
+                store.savedStreams.length > 1 ? "s" : ""
+              }`
+            : "Add a custom stream"
+        }
+        Icon={PencilEdit}
+        label="Saved Streams"
+        onClick={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
+      />
+
+      {presetOverlays.map((presetOverlay) => (
+        <PresetsOverlay
+          groupedPresets={presetOverlay.groupedPresets}
+          key={presetOverlay.overlay}
+          onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+          onSelect={(presetId) => {
+            handlePresetChange(presetId, presetOverlay.kind)
+            closeOverlays()
+            setOpen(false)
+          }}
+          placement={getOverlayPlacement(presetOverlay.overlay)}
+          selectedPresetId={
+            contentSelection?.kind === presetOverlay.kind
+              ? contentSelection.id
+              : undefined
+          }
+          show={activeOverlay === presetOverlay.overlay}
+          title={presetOverlay.title}
+        />
+      ))}
+
+      <PlaylistsOverlay
+        onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+        onSelect={(playlist) => {
+          store.setContentSelection(playerType, {
+            id: playlist.id,
+            kind: "playlist",
+          })
+          onPlaylistChange?.(playlist)
+          closeOverlays()
+          setOpen(false)
+        }}
+        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.PLAYLISTS)}
+        playlists={playlistPresets}
+        selection={contentSelection}
+        show={activeOverlay === STREAM_PANEL_OVERLAY.PLAYLISTS}
+      />
+
+      <ContentOverviewOverlay
+        liveCount={livePresets.length}
+        onBack={closeOverlays}
+        onSelect={(kind) => {
+          openOverlay(STREAM_PANEL_CONTENT_OVERLAYS[kind])
+        }}
+        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CONTENT)}
+        playerType={playerType}
+        playlistCount={playlistPresets.length}
+        show={activeOverlay === STREAM_PANEL_OVERLAY.CONTENT}
+        streamCount={streamPresets.length}
+      />
+
+      <SavedOverlay
+        onAddCustom={() => openOverlay(STREAM_PANEL_OVERLAY.CUSTOM)}
+        onBack={closeOverlays}
+        onSelect={handleLoadSaved}
+        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.SAVED)}
+        show={activeOverlay === STREAM_PANEL_OVERLAY.SAVED}
+      />
+
+      <CustomOverlay
+        onBack={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
+        onLoad={handleLoadCustom}
+        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CUSTOM)}
+        show={activeOverlay === STREAM_PANEL_OVERLAY.CUSTOM}
+      />
+    </div>
+  )
+
+  if (variant === "children") return content
+
   return (
     <Popover handle={handle} onOpenChange={onOpenChange} open={open}>
       <PopoverContent
         align={align}
         className={cn(
-          `
-            relative min-h-96 gap-4 overflow-hidden rounded-[20px] border border-border/60 bg-popover/90 tracking-wide text-popover-foreground
-            backdrop-blur-lg
-          `,
-          variant === "floating" && originMap[position],
-          variant === "floating" && positionClasses[position]
+          `dark relative w-72 gap-2 overflow-hidden rounded-3xl bg-background/95 p-2 text-foreground shadow-2xl shadow-background/40 backdrop-blur-xl`,
+          variant === "floating" && STREAM_PANEL_ORIGIN_CLASSES[position],
+          variant === "floating" && STREAM_PANEL_POSITION_CLASSES[position]
         )}
         positionMethod={variant === "floating" ? "fixed" : undefined}
         side={side}
       >
-        <div className="flex items-center justify-between">
-          <PopoverTitle className="m-0! text-[13px] font-semibold tracking-[0.01em]">
-            Configuration
-          </PopoverTitle>
-          <PopoverClose
-            className={`
-              flex size-6 items-center justify-center rounded-md text-muted-foreground transition-[colors,transform]
-              hover:bg-muted hover:text-foreground
-              active:scale-[0.97]
-            `}
-          >
-            <XIcon className="size-4" />
-          </PopoverClose>
-        </div>
-
-        <Field className="gap-2.5">
-          <FieldLabel
-            className={`
-              flex items-center gap-2 px-1 text-[10px] leading-none font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase
-              after:h-px after:flex-1 after:bg-border/60 after:content-['']
-            `}
-          >
-            Media
-          </FieldLabel>
-          <div className="flex flex-col gap-1">
-            {/* <PanelSlider
-              label="Volume"
-              max={100}
-              min={0}
-              onChange={store.setVolume}
-              value={store.volume}
-            /> */}
-
-            <div className="flex h-11 items-center justify-between rounded-xl border border-border/50 bg-muted/40 px-3.5 text-sm">
-              <span className="text-muted-foreground">Muted</span>
-              <ToggleGroup
-                className="gap-0"
-                onValueChange={(v) => {
-                  if (v) store.setMuted(v === "on")
-                }}
-                size="sm"
-                type="single"
-                value={store.muted ? "on" : "off"}
-              >
-                <ToggleGroupItem size="sm" value="off">
-                  Off
-                </ToggleGroupItem>
-                <ToggleGroupItem size="sm" value="on">
-                  On
-                </ToggleGroupItem>
-              </ToggleGroup>
-            </div>
-
-            <div className="flex h-11 items-center justify-between rounded-xl border border-border/50 bg-muted/40 px-3.5 text-sm">
-              <span className="text-muted-foreground">Autoplay</span>
-              <ToggleGroup
-                onValueChange={(v) => {
-                  if (v) store.setAutoplay(v === "on")
-                }}
-                size="sm"
-                type="single"
-                value={store.autoplay ? "on" : "off"}
-              >
-                <ToggleGroupItem size="sm" value="off">
-                  Off
-                </ToggleGroupItem>
-                <ToggleGroupItem size="sm" value="on">
-                  On
-                </ToggleGroupItem>
-              </ToggleGroup>
-            </div>
-          </div>
-        </Field>
-
-        <Field className="gap-2.5 pt-1">
-          <FieldLabel
-            className={`
-              flex items-center gap-2 px-1 text-[10px] leading-none font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase
-              after:h-px after:flex-1 after:bg-border/60 after:content-['']
-            `}
-          >
-            Presets
-          </FieldLabel>
-          <button
-            className={`
-              flex h-11 w-full items-center justify-between rounded-xl border border-border/50 bg-muted/40 px-3.5 text-left text-sm text-foreground
-              outline-hidden transition-[colors,transform,border-color]
-              hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground
-              focus-visible:border-border/70 focus-visible:bg-accent/60 focus-visible:text-accent-foreground
-              active:scale-[0.985]
-            `}
-            onClick={() => setActiveOverlay("presets")}
-            type="button"
-          >
-            <span className="text-sm text-muted-foreground">
-              {selectedPresetName}
-            </span>
-            <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
-          </button>
-        </Field>
-
-        <Field className="gap-2.5 pt-1">
-          <FieldLabel
-            className={`
-              flex items-center gap-2 px-1 text-[10px] leading-none font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase
-              after:h-px after:flex-1 after:bg-border/60 after:content-['']
-            `}
-          >
-            Custom Stream
-          </FieldLabel>
-          <div className="flex flex-col gap-1">
-            {store.savedStreams.length > 0 && (
-              <button
-                className={`
-                  flex h-11 w-full items-center justify-between rounded-xl border border-border/50 bg-muted/40 px-3.5 text-left text-sm
-                  text-foreground outline-hidden transition-[colors,transform,border-color]
-                  hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground
-                  focus-visible:border-border/70 focus-visible:bg-accent/60 focus-visible:text-accent-foreground
-                  active:scale-[0.985]
-                `}
-                onClick={() => setActiveOverlay("saved")}
-                type="button"
-              >
-                <span className="text-sm text-muted-foreground">
-                  {`${store.savedStreams.length} saved stream${
-                    store.savedStreams.length > 1 ? "s" : ""
-                  }`}
-                </span>
-                <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
-              </button>
-            )}
-            <button
-              className={`
-                flex h-11 w-full items-center justify-between rounded-xl border border-border/50 bg-muted/40 px-3.5 text-left text-sm text-foreground
-                outline-hidden transition-[colors,transform,border-color]
-                hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground
-                focus-visible:border-border/70 focus-visible:bg-accent/60 focus-visible:text-accent-foreground
-                active:scale-[0.985]
-              `}
-              onClick={() => setActiveOverlay("custom")}
-              type="button"
-            >
-              <span className="text-sm text-muted-foreground">Add Custom</span>
-              <PlusIcon className="size-3.5 shrink-0 text-muted-foreground" />
-            </button>
-          </div>
-        </Field>
+        {content}
+      </PopoverContent>
+    </Popover>
+  )
+}
 
-        <PresetsOverlay
-          groupedPresets={groupedPresets}
-          onBack={() => setActiveOverlay("none")}
-          onSelect={(presetId) => {
-            handlePresetChange(presetId)
-            setActiveOverlay("none")
-          }}
-          show={activeOverlay === "presets"}
-        />
+function groupPresets(presets: StreamPreset[]): Record<string, StreamPreset[]> {
+  const groups: Partial<Record<string, StreamPreset[]>> = {}
+  for (const preset of presets) {
+    const group = preset.group
+    if (!groups[group]) groups[group] = []
+    groups[group].push(preset)
+  }
+  return groups as Record<string, StreamPreset[]>
+}
 
-        <SavedOverlay
-          onBack={() => setActiveOverlay("none")}
-          onSelect={handleLoadSaved}
-          show={activeOverlay === "saved"}
-        />
+function PanelActionRow({
+  detail,
+  Icon,
+  label,
+  onClick,
+}: {
+  detail?: string
+  Icon?: React.ComponentType<IconProps>
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={`
+        group flex min-h-11 w-full items-center gap-3 rounded-lg px-2.5 text-left text-sm text-foreground outline-hidden
+        transition-[background-color,color,transform]
+        hover:bg-foreground/4
+        focus-visible:bg-foreground/4
+        active:scale-[0.985]
+      `}
+      onClick={onClick}
+      type="button"
+    >
+      {Icon ? (
+        <span
+          className="
+            flex size-7 shrink-0 items-center justify-center text-muted-foreground transition-colors
+            group-hover:text-foreground
+          "
+        >
+          <Icon aria-hidden="true" className="size-5" />
+        </span>
+      ) : null}
+      <span className="min-w-0 flex-1">
+        <span className="block truncate font-medium tracking-tight">
+          {label}
+        </span>
+        {detail ? (
+          <span className="block truncate text-xs text-muted-foreground">
+            {detail}
+          </span>
+        ) : null}
+      </span>
+      <ChevronRight
+        className="
+          size-3.5 shrink-0 text-muted-foreground transition-transform
+          group-hover:translate-x-0.5
+        "
+      />
+    </button>
+  )
+}
 
-        <CustomOverlay
-          onBack={() => setActiveOverlay("none")}
-          onLoad={handleLoadCustom}
-          show={activeOverlay === "custom"}
-        />
-      </PopoverContent>
-    </Popover>
+function PanelToggleRow({
+  children,
+  onValueChange,
+  value,
+}: {
+  children: React.ReactNode
+  onValueChange: (value: boolean) => void
+  value: boolean
+}) {
+  return (
+    <div className="flex h-10 items-center justify-between px-2.5 text-sm">
+      <span className="font-medium text-foreground/85">{children}</span>
+      <ToggleGroup
+        onValueChange={(v) => {
+          if (v) onValueChange(v === "on")
+        }}
+        type="single"
+        value={value ? "on" : "off"}
+      >
+        <ToggleGroupItem className="h-7 rounded-lg px-3 text-xs" value="off">
+          Off
+        </ToggleGroupItem>
+        <ToggleGroupItem className="h-7 rounded-lg px-3 text-xs" value="on">
+          On
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
   )
 }
diff --git a/apps/www/components/stream-panel/panel-slider.tsx b/apps/www/components/stream-panel/panel-slider.tsx
deleted file mode 100644
index 47b4ae1e..00000000
--- a/apps/www/components/stream-panel/panel-slider.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-"use client"
-
-import { animate, motion, useMotionValue, useTransform } from "motion/react"
-import React, { useCallback, useEffect, useRef, useState } from "react"
-
-import { cn } from "@/lib/utils"
-
-interface PanelSliderProps {
-  className?: string
-  label: string
-  max?: number
-  min?: number
-  onChange: (value: number) => void
-  step?: number
-  value: number
-}
-
-const CLICK_THRESHOLD = 3
-
-export function PanelSlider({
-  className,
-  label,
-  max = 100,
-  min = 0,
-  onChange,
-  step = 1,
-  value,
-}: PanelSliderProps) {
-  const trackRef = useRef<HTMLDivElement>(null)
-  const [isInteracting, setIsInteracting] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-  const pointerDownPos = useRef<null | { x: number }>(null)
-  const isClickRef = useRef(true)
-  const animRef = useRef<null | ReturnType<typeof animate>>(null)
-
-  const percentage = ((value - min) / (max - min)) * 100
-  const fillPercent = useMotionValue(percentage)
-  const fillWidth = useTransform(fillPercent, (pct) => `${pct}%`)
-
-  useEffect(() => {
-    if (!isInteracting && !animRef.current) {
-      fillPercent.jump(percentage)
-    }
-  }, [percentage, isInteracting, fillPercent])
-
-  const positionToValue = useCallback(
-    (clientX: number) => {
-      const rect = trackRef.current?.getBoundingClientRect()
-      if (!rect) return value
-      const percent = Math.max(
-        0,
-        Math.min(1, (clientX - rect.left) / rect.width)
-      )
-      const raw = min + percent * (max - min)
-      return Math.round(raw / step) * step
-    },
-    [min, max, step, value]
-  )
-
-  const handlePointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
-    pointerDownPos.current = { x: e.clientX }
-    isClickRef.current = true
-    setIsInteracting(true)
-  }, [])
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (!isInteracting || !pointerDownPos.current) return
-
-      const dx = Math.abs(e.clientX - pointerDownPos.current.x)
-      if (isClickRef.current && dx > CLICK_THRESHOLD) {
-        isClickRef.current = false
-      }
-
-      if (!isClickRef.current) {
-        const newValue = positionToValue(e.clientX)
-        const newPct = ((newValue - min) / (max - min)) * 100
-        if (animRef.current) {
-          animRef.current.stop()
-          animRef.current = null
-        }
-        fillPercent.jump(newPct)
-        onChange(Math.max(min, Math.min(max, newValue)))
-      }
-    },
-    [isInteracting, positionToValue, onChange, fillPercent, min, max]
-  )
-
-  const handlePointerUp = useCallback(
-    (e: React.PointerEvent) => {
-      if (!isInteracting) return
-
-      if (isClickRef.current) {
-        const newValue = positionToValue(e.clientX)
-        const newPct = ((newValue - min) / (max - min)) * 100
-
-        if (animRef.current) animRef.current.stop()
-        animRef.current = animate(fillPercent, newPct, {
-          bounce: 0,
-          duration: 0.3,
-          onComplete: () => {
-            animRef.current = null
-          },
-          type: "spring",
-        })
-        onChange(Math.max(min, Math.min(max, newValue)))
-      }
-
-      setIsInteracting(false)
-      pointerDownPos.current = null
-    },
-    [isInteracting, positionToValue, onChange, fillPercent, min, max]
-  )
-
-  const isActive = isInteracting || isHovered
-
-  return (
-    <div
-      className={cn(
-        "relative flex h-11 cursor-pointer items-center rounded-xl border border-border/50 px-3.5",
-        "bg-muted/40 transition-[colors,border-color]",
-        isActive && "border-border/70 bg-accent/60",
-        className
-      )}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      ref={trackRef}
-    >
-      <motion.div
-        className="absolute inset-0 rounded-xl bg-primary/12"
-        style={{ width: fillWidth }}
-      />
-      <span className="relative text-sm text-muted-foreground select-none">
-        {label}
-      </span>
-      <span className="relative ml-auto text-xs font-medium tabular-nums select-none">
-        {Math.round(value)}
-      </span>
-    </div>
-  )
-}
diff --git a/apps/www/components/stream-panel/playlists-overlay.tsx b/apps/www/components/stream-panel/playlists-overlay.tsx
new file mode 100644
index 00000000..1a023dab
--- /dev/null
+++ b/apps/www/components/stream-panel/playlists-overlay.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { CheckIcon } from "lucide-react"
+
+import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/content-catalog"
+import type { StreamPanelSelection } from "@/lib/docs-dial-store"
+
+import { cn } from "@/lib/utils"
+
+import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
+
+interface PlaylistsOverlayProps {
+  onBack: () => void
+  onSelect: (playlist: StreamPanelPlaylistPreset) => void
+  placement?: OverlayShellPlacement
+  playlists: StreamPanelPlaylistPreset[]
+  selection?: StreamPanelSelection
+  show: boolean
+}
+
+export function PlaylistsOverlay({
+  onBack,
+  onSelect,
+  placement,
+  playlists,
+  selection,
+  show,
+}: PlaylistsOverlayProps) {
+  const menuOpen = placement ? placement !== "idle" : show
+
+  return (
+    <MenuPrimitive.Root open={menuOpen}>
+      <OverlayShell
+        onBack={onBack}
+        placement={placement}
+        show={show}
+        title="Playlists"
+      >
+        <div className="no-scrollbar flex-1 overflow-y-auto p-2 pt-1">
+          {playlists.length === 0 ? (
+            <div className="flex h-full min-h-52 flex-col items-center justify-center px-5 text-center">
+              <p className="text-sm font-medium text-foreground">
+                No compatible playlists
+              </p>
+              <p className="mt-1 max-w-52 text-xs text-muted-foreground">
+                This player can still load compatible streams.
+              </p>
+            </div>
+          ) : (
+            <MenuPrimitive.RadioGroup
+              onValueChange={(playlistId) => {
+                const playlist = playlists.find((item) => item.id === playlistId)
+                if (playlist) onSelect(playlist)
+              }}
+              value={selection?.kind === "playlist" ? selection.id : ""}
+            >
+              <MenuPrimitive.Group>
+                {playlists.map((playlist) => {
+                  const selected =
+                    selection?.kind === "playlist" &&
+                    selection.id === playlist.id
+
+                  return (
+                    <MenuPrimitive.RadioItem
+                      className={cn(
+                        `
+                          relative flex w-full items-center gap-3 rounded-[18px] p-2.5 text-sm outline-hidden
+                          transition-[background-color,color,transform] select-none
+                          hover:bg-foreground/4
+                          focus:bg-foreground/4
+                          active:scale-[0.985]
+                        `,
+                        selected && "font-medium"
+                      )}
+                      key={playlist.id}
+                      value={playlist.id}
+                    >
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2 pr-5">
+                          <span className="truncate">{playlist.name}</span>
+                          {playlist.count ? (
+                            <span className="text-[10px] leading-none font-medium text-muted-foreground">
+                              {playlist.count}
+                            </span>
+                          ) : null}
+                        </div>
+                        <span className="mt-1 block truncate text-xs text-muted-foreground">
+                          {playlist.description}
+                        </span>
+                      </div>
+                      <MenuPrimitive.RadioItemIndicator
+                        render={
+                          <span className="pointer-events-none absolute top-3 right-2 flex size-3.5 items-center justify-center text-foreground">
+                            <CheckIcon className="size-4" />
+                          </span>
+                        }
+                      />
+                    </MenuPrimitive.RadioItem>
+                  )
+                })}
+              </MenuPrimitive.Group>
+            </MenuPrimitive.RadioGroup>
+          )}
+        </div>
+      </OverlayShell>
+    </MenuPrimitive.Root>
+  )
+}
diff --git a/apps/www/components/stream-panel/presets-overlay.tsx b/apps/www/components/stream-panel/presets-overlay.tsx
index 642f0035..9e9fabe7 100644
--- a/apps/www/components/stream-panel/presets-overlay.tsx
+++ b/apps/www/components/stream-panel/presets-overlay.tsx
@@ -2,16 +2,15 @@
 
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { CheckIcon } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import type { StreamFeature, StreamPreset } from "@/lib/stream-presets"
 
-import { Badge } from "@/components/ui/badge"
-import { useDocsDialStore } from "@/lib/docs-dial-store"
+import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { getStreamSupport, initStreamSupport } from "@/lib/stream-support"
 import { cn } from "@/lib/utils"
 
-import { OverlayShell } from "./overlay-shell"
+import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
 
 const FEATURE_LABELS: Record<StreamFeature, string> = {
   "4K": "4K",
@@ -63,41 +62,63 @@ interface PresetsOverlayProps {
   groupedPresets: Record<string, StreamPreset[]>
   onBack: () => void
   onSelect: (presetId: string) => void
+  placement?: OverlayShellPlacement
+  selectedPresetId?: string
   show: boolean
+  title?: string
 }
 
 export function PresetsOverlay({
   groupedPresets,
   onBack,
   onSelect,
+  placement,
+  selectedPresetId,
   show,
+  title = "Presets",
 }: PresetsOverlayProps) {
-  const presetId = useDocsDialStore((s) => s.presetId)
+  const presetId = useStreamPanelStore((s) => s.presetId)
   const [, setProbed] = useState(false)
+  const value = selectedPresetId ?? presetId
 
-  const allPresets = Object.values(groupedPresets).flat()
+  const allPresets = useMemo(
+    () => Object.values(groupedPresets).flat(),
+    [groupedPresets]
+  )
   useEffect(() => {
     void initStreamSupport(allPresets).then(() => setProbed(true))
-  }, [])
+  }, [allPresets])
+
+  const menuOpen = placement ? placement !== "idle" : show
 
   return (
-    <MenuPrimitive.Root open={show}>
-      <OverlayShell onBack={onBack} show={show} title="Presets">
-        <div className="no-scrollbar flex-1 overflow-y-auto p-2">
-          <MenuPrimitive.RadioGroup onValueChange={onSelect} value={presetId}>
+    <MenuPrimitive.Root open={menuOpen}>
+      <OverlayShell
+        onBack={onBack}
+        placement={placement}
+        show={show}
+        title={title}
+      >
+        <div className="no-scrollbar flex-1 overflow-y-auto p-2 pt-1">
+          <MenuPrimitive.RadioGroup onValueChange={onSelect} value={value}>
             {Object.entries(groupedPresets).map(([group, items], index) => (
-              <MenuPrimitive.Group key={group}>
+              <MenuPrimitive.Group className="space-y-1" key={group}>
                 {index > 0 && (
-                  <MenuPrimitive.Separator className="-mx-1 my-1 h-px bg-border" />
+                  <MenuPrimitive.Separator className="mx-3 my-2 h-px bg-border/45" />
                 )}
 
-                <MenuPrimitive.GroupLabel className="px-2 py-1.5 text-[11px] font-medium tracking-[0.14em] text-muted-foreground/80 uppercase">
+                <MenuPrimitive.GroupLabel className="
+                  px-2 pt-1 pb-0.5 text-[10px] leading-none font-semibold tracking-[0.16em] text-muted-foreground/70 uppercase
+                ">
                   {group}
                 </MenuPrimitive.GroupLabel>
 
                 {items.map((preset) => {
                   const support = getStreamSupport(preset)
-                  const displayFeatures = getDisplayFeatures(preset.features)
+                  const displayFeatures = getDisplayFeatures(
+                    preset.features,
+                    preset.group === "Live"
+                  )
 
                   return (
                     <span
@@ -107,46 +128,46 @@ export function PresetsOverlay({
                       <MenuPrimitive.RadioItem
                         className={cn(
                           `
-                            relative flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-hidden transition-[colors,transform]
-                            select-none
-                            hover:bg-accent/70 hover:text-accent-foreground
-                            focus:bg-accent/70 focus:text-accent-foreground
+                            relative flex w-full items-center gap-3 rounded-[18px] p-2.5 text-sm outline-hidden
+                            transition-[background-color,color,transform] select-none
+                            hover:bg-foreground/4
+                            focus:bg-foreground/4
                             active:scale-[0.985]
                           `,
-                          preset.id === presetId &&
-                            "bg-accent/85 font-medium text-accent-foreground",
+                          preset.id === value && "font-medium",
                           !support.supported && "pointer-events-none opacity-40"
                         )}
                         value={preset.id}
                       >
-                        <div className="flex min-w-0 flex-1 flex-col gap-1">
-                          <span className="truncate pr-5">{preset.name}</span>
-                          {(displayFeatures.length > 0 ||
-                            !support.supported) && (
-                            <div className="flex flex-wrap gap-1">
-                              {displayFeatures.map((f) => (
-                                <Badge
-                                  className="rounded-md px-1.5 py-0 text-[10px]/4"
-                                  key={f}
-                                  variant="secondary"
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2 pr-5">
+                            <span className="truncate">{preset.name}</span>
+                          </div>
+                          {preset.description ? (
+                            <span className="mt-1 block truncate text-xs text-muted-foreground">
+                              {preset.description}
+                            </span>
+                          ) : null}
+                          {!support.supported ? (
+                            <span className="mt-1 block truncate text-xs text-muted-foreground">
+                              Unsupported
+                            </span>
+                          ) : displayFeatures.length > 0 ? (
+                            <div className="mt-1 flex flex-wrap gap-1">
+                              {displayFeatures.map((feature) => (
+                                <span
+                                  className="rounded-md bg-foreground/5 px-1.5 py-0.5 text-[10px]/3 font-medium text-muted-foreground"
+                                  key={feature}
                                 >
-                                  {FEATURE_LABELS[f]}
-                                </Badge>
+                                  {FEATURE_LABELS[feature]}
+                                </span>
                               ))}
-                              {!support.supported && (
-                                <Badge
-                                  className="gap-0.5 rounded-md px-1.5 py-0 text-[10px]/4"
-                                  variant="destructive"
-                                >
-                                  Unsupported
-                                </Badge>
-                              )}
                             </div>
-                          )}
+                          ) : null}
                         </div>
                         <MenuPrimitive.RadioItemIndicator
                           render={
-                            <span className="pointer-events-none absolute top-2.5 right-2 flex size-3.5 items-center justify-center">
+                            <span className="pointer-events-none absolute top-3 right-2 flex size-3.5 items-center justify-center text-foreground">
                               <CheckIcon className="size-4" />
                             </span>
                           }
@@ -166,9 +187,11 @@ export function PresetsOverlay({
 
 function getDisplayFeatures(
   features: StreamFeature[],
+  omitLive = false,
   max = 3
 ): StreamFeature[] {
-  return [...features]
-    .sort((a, b) => FEATURE_PRIORITY.indexOf(a) - FEATURE_PRIORITY.indexOf(b))
+  return features
+    .filter((feature) => !omitLive || feature !== "LIVE")
+    .toSorted((a, b) => FEATURE_PRIORITY.indexOf(a) - FEATURE_PRIORITY.indexOf(b))
     .slice(0, max)
 }
diff --git a/apps/www/components/stream-panel/provider.tsx b/apps/www/components/stream-panel/provider.tsx
index 48959ba5..40cd8feb 100644
--- a/apps/www/components/stream-panel/provider.tsx
+++ b/apps/www/components/stream-panel/provider.tsx
@@ -1,17 +1,34 @@
 "use client"
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import React, { createContext, useCallback, useContext, useState } from "react"
+import React, { createContext, use, useCallback, useMemo, useState } from "react"
+
+import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/content-catalog"
+import type { StreamPanelPlayerType } from "@/lib/docs-dial-store"
+import type { StreamPreset } from "@/lib/stream-presets"
+
+export interface StreamPanelController {
+  onLoadStream?: (src: string, config?: string) => void
+  onPlaylistChange?: (playlist: StreamPanelPlaylistPreset) => void
+  onPresetChange?: (
+    preset: StreamPreset,
+    kind?: "live" | "stream"
+  ) => void
+  playerType: StreamPanelPlayerType
+}
 
 type PopoverHandle = ReturnType<typeof PopoverPrimitive.createHandle>
 
 interface StreamPanelContextValue {
+  controller: null | StreamPanelController
   handle: PopoverHandle
   onOpenChange: (
     open: boolean,
     eventDetails: PopoverPrimitive.Root.ChangeEventDetails
   ) => void
   open: boolean
+  registerController: (controller: StreamPanelController) => () => void
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const StreamPanelContext = createContext<null | StreamPanelContextValue>(null)
@@ -19,6 +36,9 @@ const StreamPanelContext = createContext<null | StreamPanelContextValue>(null)
 export function StreamPanelProvider({ children }: React.PropsWithChildren) {
   const [handle] = useState(() => PopoverPrimitive.createHandle())
   const [open, setOpen] = useState(false)
+  const [controller, setController] = useState<null | StreamPanelController>(
+    null
+  )
 
   const onOpenChange = useCallback(
     (
@@ -30,15 +50,34 @@ export function StreamPanelProvider({ children }: React.PropsWithChildren) {
     []
   )
 
+  const registerController = useCallback((next: StreamPanelController) => {
+    setController(next)
+    return () => {
+      setController((current) => (current === next ? null : current))
+    }
+  }, [])
+
+  const value = useMemo(
+    () => ({
+      controller,
+      handle,
+      onOpenChange,
+      open,
+      registerController,
+      setOpen,
+    }),
+    [controller, handle, onOpenChange, open, registerController]
+  )
+
   return (
-    <StreamPanelContext.Provider value={{ handle, onOpenChange, open }}>
+    <StreamPanelContext.Provider value={value}>
       {children}
     </StreamPanelContext.Provider>
   )
 }
 
 export function useStreamPanel() {
-  const ctx = useContext(StreamPanelContext)
+  const ctx = use(StreamPanelContext)
   if (!ctx)
     throw new Error("useStreamPanel must be used within StreamPanelProvider")
   return ctx
diff --git a/apps/www/components/stream-panel/saved-overlay.tsx b/apps/www/components/stream-panel/saved-overlay.tsx
index 2cdabe9a..60fa5ccb 100644
--- a/apps/www/components/stream-panel/saved-overlay.tsx
+++ b/apps/www/components/stream-panel/saved-overlay.tsx
@@ -1,39 +1,81 @@
 "use client"
 
-import { XIcon } from "lucide-react"
+import { PlusIcon, XIcon } from "lucide-react"
 
-import { type SavedStream, useDocsDialStore } from "@/lib/docs-dial-store"
+import { type SavedStream, useStreamPanelStore } from "@/lib/docs-dial-store"
 import { cn } from "@/lib/utils"
 
 import { Button } from "../ui/button"
-import { OverlayShell } from "./overlay-shell"
+import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
 
 interface SavedOverlayProps {
+  onAddCustom: () => void
   onBack: () => void
   onSelect: (stream: SavedStream) => void
+  placement?: OverlayShellPlacement
   show: boolean
 }
 
-export function SavedOverlay({ onBack, onSelect, show }: SavedOverlayProps) {
-  const savedStreams = useDocsDialStore((s) => s.savedStreams)
-  const removeSavedStream = useDocsDialStore((s) => s.removeSavedStream)
-  const customSrc = useDocsDialStore((s) => s.customSrc)
+export function SavedOverlay({
+  onAddCustom,
+  onBack,
+  onSelect,
+  placement,
+  show,
+}: SavedOverlayProps) {
+  const savedStreams = useStreamPanelStore((s) => s.savedStreams)
+  const removeSavedStream = useStreamPanelStore((s) => s.removeSavedStream)
+  const customSrc = useStreamPanelStore((s) => s.customSrc)
 
   return (
-    <OverlayShell onBack={onBack} show={show} title="Saved Streams">
-      <div className="no-scrollbar flex-1 overflow-y-auto p-2">
+    <OverlayShell
+      onBack={onBack}
+      placement={placement}
+      show={show}
+      title="Saved Streams"
+    >
+      <div className="no-scrollbar flex-1 overflow-y-auto p-2 pt-1">
+        <button
+          className={`
+            group relative flex w-full items-center gap-3 rounded-[18px] px-2.5 py-2 text-sm outline-hidden
+            transition-[background-color,color,transform] select-none
+            hover:bg-foreground/4
+            focus-visible:bg-foreground/4
+            active:scale-[0.985]
+          `}
+          onClick={onAddCustom}
+          type="button"
+        >
+          <span
+            className="
+              flex size-7 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors
+              group-hover:text-foreground
+            "
+          >
+            <PlusIcon className="size-4" />
+          </span>
+          <span className="min-w-0 flex-1 text-left">
+            <span className="block truncate font-medium tracking-tight">
+              Add Custom
+            </span>
+            <span className="block truncate text-xs text-muted-foreground">
+              Paste a manifest URL
+            </span>
+          </span>
+        </button>
+
         {savedStreams.map((stream) => (
           <div
             className={cn(
               "group",
               `
-                relative flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-hidden transition-[colors,transform] select-none
-                hover:bg-accent/70 hover:text-accent-foreground
-                focus:bg-accent/70 focus:text-accent-foreground
+                relative flex w-full items-center gap-2 rounded-[18px] px-2.5 py-2 text-sm outline-hidden
+                transition-[background-color,color,transform] select-none
+                hover:bg-foreground/4
+                focus:bg-foreground/4
                 active:scale-[0.985]
               `,
-              stream.src === customSrc &&
-                "bg-accent/85 font-medium text-accent-foreground"
+              stream.src === customSrc && "font-medium"
             )}
             key={stream.id}
           >
@@ -46,12 +88,15 @@ export function SavedOverlay({ onBack, onSelect, show }: SavedOverlayProps) {
             </button>
             <Button
               aria-label={`Remove ${stream.name}`}
-              className={`size-3.5`}
+              className="
+                size-7 rounded-xl text-muted-foreground
+                hover:bg-foreground/4 hover:text-foreground
+              "
               onClick={() => removeSavedStream(stream.id)}
               size="icon"
               variant="ghost"
             >
-              <XIcon className="size-3" />
+              <XIcon className="size-3.5" />
             </Button>
           </div>
         ))}
diff --git a/apps/www/components/stream-panel/use-stream-panel-sync.ts b/apps/www/components/stream-panel/use-stream-panel-sync.ts
index 9f70d9fd..d2514b87 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -4,44 +4,115 @@ import { useCallback, useEffect, useMemo, useRef } from "react"
 
 import type { StreamPreset } from "@/lib/stream-presets"
 import type { Asset, UseAssetOptions } from "@/registry/default/hooks/use-asset"
-
-import { useDocsDialStore } from "@/lib/docs-dial-store"
-import { getPresetById } from "@/lib/stream-presets"
+import type { PlaybackStore } from "@/registry/default/hooks/use-playback"
+
+import {
+  addBlenderCaptions,
+  type BlenderStreamResponse,
+  fetchBlenderStream,
+  fetchPlaylistPresetAssets,
+  isBlenderOpenFilmAsset,
+  type StreamPanelPlaylistPreset,
+} from "@/components/stream-panel/content-catalog"
+import {
+  type StreamPanelContentKind,
+  type StreamPanelPlayerType,
+  useStreamPanelStore,
+} from "@/lib/docs-dial-store"
 import { useAsset } from "@/registry/default/hooks/use-asset"
+import { useMediaStore } from "@/registry/default/hooks/use-media"
+import { PLAYBACK_FEATURE_KEY } from "@/registry/default/hooks/use-playback"
 import { useVolumeStore } from "@/registry/default/hooks/use-volume"
-import { useMediaApi, useMediaStore } from "@/registry/default/internal/media"
-
-export function useStreamPanelSync() {
-  const store = useMediaApi()
-  const mediaElement = useMediaStore((state) => state.media.mediaElement)
-  const player = useMediaStore((state) => state.player.instance)
-
-  const volume = useDocsDialStore((s) => s.volume)
-  const muted = useDocsDialStore((s) => s.muted)
-  const autoplay = useDocsDialStore((s) => s.autoplay)
-  const presetId = useDocsDialStore((s) => s.presetId)
+import { useMediaFeatureApi } from "@/registry/default/ui/media-provider"
+
+export function useStreamPanelSync({
+  playerType = "video",
+}: {
+  playerType?: StreamPanelPlayerType
+} = {}) {
+  const playbackApi = useMediaFeatureApi<PlaybackStore>(PLAYBACK_FEATURE_KEY)
+  const mediaElement = useMediaStore((state) => state.mediaElement)
+
+  const volume = useStreamPanelStore((s) => s.volume)
+  const muted = useStreamPanelStore((s) => s.muted)
+  const autoplay = useStreamPanelStore((s) => s.autoplay)
+  const setContentSelection = useStreamPanelStore((s) => s.setContentSelection)
+  const setPresetId = useStreamPanelStore((s) => s.setPresetId)
 
   const setVolume = useVolumeStore((s) => s.setVolume)
   const setMuted = useVolumeStore((s) => s.setMuted)
+  const playlistAbortRef = useRef<AbortController | null>(null)
+  const blenderStreamCacheRef = useRef<Map<string, BlenderStreamResponse> | null>(
+    null
+  )
+  if (blenderStreamCacheRef.current === null) {
+    blenderStreamCacheRef.current = new Map()
+  }
+  const blenderStreamCache = blenderStreamCacheRef.current
 
   const assetOptions = useMemo<UseAssetOptions<Asset>>(
     () => ({
+      getAssetId: (asset) => asset.id ?? asset.src,
+      loader: {
+        load: async (context) => {
+          if (!isBlenderOpenFilmAsset(context.asset)) {
+            await context.loadDefault()
+            return
+          }
+          if (context.signal.aborted) return
+
+          const stream = await getBlenderStream(
+            context.asset.id,
+            context.signal,
+            blenderStreamCache
+          )
+          context.signal.throwIfAborted()
+
+          await context.loadDefault(
+            context.preloadManager ?? {
+              config: context.asset.config,
+              src: stream.playback.hls,
+            }
+          )
+
+          try {
+            await addBlenderCaptions(context.player, stream)
+          } catch (error) {
+            console.error("Failed to add Blender captions:", error)
+          }
+        },
+        preload: async (context) => {
+          if (!isBlenderOpenFilmAsset(context.asset)) {
+            return context.preloadDefault()
+          }
+          if (context.signal.aborted) return null
+
+          const stream = await getBlenderStream(
+            context.asset.id,
+            context.signal,
+            blenderStreamCache
+          )
+          context.signal.throwIfAborted()
+
+          return context.preloadDefault({
+            config: context.asset.config,
+            src: stream.playback.hls,
+          })
+        },
+      },
       onLoadError: (_asset, error) => {
-        store.setState(({ playback }) => {
+        playbackApi.setState(({ playback }) => {
           playback.status = "error"
           playback.error = error
         })
         return "stop"
       },
     }),
-    [store]
+    [blenderStreamCache, playbackApi]
   )
 
   const { loadPlaylist } = useAsset(assetOptions)
 
-  const prevPresetId = useRef(presetId)
-  const initialLoadDone = useRef(false)
-
   useEffect(() => {
     if (!mediaElement) return
     setVolume(volume / 100)
@@ -57,24 +128,48 @@ export function useStreamPanelSync() {
     mediaElement.autoplay = autoplay
   }, [autoplay, mediaElement])
 
-  useEffect(() => {
-    if (!player || !mediaElement) return
-    if (presetId === prevPresetId.current && initialLoadDone.current) return
-
-    initialLoadDone.current = true
-    prevPresetId.current = presetId
+  const abortPlaylistRequest = useCallback(() => {
+    playlistAbortRef.current?.abort()
+  }, [])
 
-    const preset = getPresetById(presetId)
-    if (preset) {
-      loadPlaylist([preset as unknown as Asset])
-    }
-  }, [presetId, player, mediaElement, loadPlaylist])
+  useEffect(() => abortPlaylistRequest, [abortPlaylistRequest])
 
   const handlePresetChange = useCallback(
-    (preset: StreamPreset) => {
+    (preset: StreamPreset, kind: StreamPanelContentKind = "stream") => {
+      setPresetId(preset.id)
+      setContentSelection(playerType, { id: preset.id, kind })
       loadPlaylist([preset as unknown as Asset])
     },
-    [loadPlaylist]
+    [loadPlaylist, playerType, setContentSelection, setPresetId]
+  )
+
+  const handlePlaylistPresetChange = useCallback(
+    (playlist: StreamPanelPlaylistPreset) => {
+      playlistAbortRef.current?.abort()
+      const abortController = new AbortController()
+      playlistAbortRef.current = abortController
+
+      void fetchPlaylistPresetAssets(playlist.id, abortController.signal)
+        .then((assets) => {
+          if (abortController.signal.aborted) return
+
+          setContentSelection(playerType, {
+            id: playlist.id,
+            kind: "playlist",
+          })
+          loadPlaylist(assets)
+        })
+        .catch((error: unknown) => {
+          if (error instanceof DOMException && error.name === "AbortError")
+            return
+
+          playbackApi.setState(({ playback }) => {
+            playback.status = "error"
+            playback.error = error
+          })
+        })
+    },
+    [loadPlaylist, playbackApi, playerType, setContentSelection]
   )
 
   const handleLoadStream = useCallback(
@@ -83,7 +178,7 @@ export function useStreamPanelSync() {
       if (config) {
         const parseResult = safeParseJson(config)
         if (!parseResult.ok) {
-          store.setState(({ playback }) => {
+          playbackApi.setState(({ playback }) => {
             playback.status = "error"
             playback.error = new Error(
               "Invalid JSON config: " + parseResult.error
@@ -101,19 +196,41 @@ export function useStreamPanelSync() {
         id: `custom-${Date.now()}`,
         name: "Custom Stream",
         src,
-        type: "video",
+        type: playerType,
       }
+      setContentSelection(playerType, { id: asset.id, kind: "stream" })
       loadPlaylist([asset as unknown as Asset])
     },
-    [loadPlaylist, store]
+    [loadPlaylist, playbackApi, playerType, setContentSelection]
   )
 
   return {
     handleLoadStream,
+    handlePlaylistPresetChange,
     handlePresetChange,
   }
 }
 
+async function getBlenderStream(
+  assetId: string | undefined,
+  signal: AbortSignal,
+  cache: Map<string, BlenderStreamResponse>
+): Promise<BlenderStreamResponse> {
+  if (!assetId) {
+    throw new Error("Blender playlist asset is missing an id.")
+  }
+
+  const cached = cache.get(assetId)
+  if (cached) return cached
+
+  const stream = await fetchBlenderStream(assetId, signal)
+  if (!signal.aborted) {
+    cache.set(assetId, stream)
+  }
+
+  return stream
+}
+
 function safeParseJson(
   str: string
 ): { error: string; ok: false } | { ok: true; value: Record<string, unknown> } {
diff --git a/apps/www/lib/docs-dial-store.ts b/apps/www/lib/docs-dial-store.ts
index cca7c0fc..314314a3 100644
--- a/apps/www/lib/docs-dial-store.ts
+++ b/apps/www/lib/docs-dial-store.ts
@@ -1,19 +1,39 @@
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 
-export interface DocsDialActions {
+export interface SavedStream {
+  config?: string
+  id: string
+  name: string
+  src: string
+}
+
+export interface StreamPanelActions {
   removeSavedStream: (id: string) => void
   saveStream: (stream: Omit<SavedStream, "id">) => void
   setAutoplay: (autoplay: boolean) => void
+  setContentSelection: (
+    playerType: StreamPanelPlayerType,
+    selection: StreamPanelSelection
+  ) => void
   setCustomConfig: (config: string) => void
   setCustomSrc: (src: string) => void
   setMuted: (muted: boolean) => void
   setPresetId: (id: string) => void
   setVolume: (volume: number) => void
 }
+export type StreamPanelContentKind = "live" | "playlist" | "stream"
+
+export type StreamPanelPlayerType = "audio" | "video"
+
+export interface StreamPanelSelection {
+  id: string
+  kind: StreamPanelContentKind
+}
 
-export interface DocsDialState {
+export interface StreamPanelState {
   autoplay: boolean
+  contentSelections: Partial<Record<StreamPanelPlayerType, StreamPanelSelection>>
   customConfig: string
   customSrc: string
   muted: boolean
@@ -22,19 +42,13 @@ export interface DocsDialState {
   volume: number
 }
 
-export type DocsDialStore = DocsDialActions & DocsDialState
-
-export interface SavedStream {
-  config?: string
-  id: string
-  name: string
-  src: string
-}
+export type StreamPanelStore = StreamPanelActions & StreamPanelState
 
-export const useDocsDialStore = create<DocsDialStore>()(
+export const useStreamPanelStore = create<StreamPanelStore>()(
   persist(
     (set) => ({
       autoplay: false,
+      contentSelections: {},
       customConfig: "",
       customSrc: "",
       muted: true,
@@ -52,6 +66,13 @@ export const useDocsDialStore = create<DocsDialStore>()(
           ],
         })),
       setAutoplay: (autoplay) => set({ autoplay }),
+      setContentSelection: (playerType, selection) =>
+        set((state) => ({
+          contentSelections: {
+            ...state.contentSelections,
+            [playerType]: selection,
+          },
+        })),
 
       setCustomConfig: (customConfig) => set({ customConfig }),
       setCustomSrc: (customSrc) => set({ customSrc }),
@@ -61,6 +82,7 @@ export const useDocsDialStore = create<DocsDialStore>()(
       volume: 80,
     }),
     {
+      // Keep the original key so existing saved streams and preferences survive the rename.
       name: "limeplay-docs-dial",
     }
   )
diff --git a/apps/www/registry/default/examples/player-root-demo.tsx b/apps/www/registry/default/examples/player-root-demo.tsx
index 37dd3721..60df296c 100644
--- a/apps/www/registry/default/examples/player-root-demo.tsx
+++ b/apps/www/registry/default/examples/player-root-demo.tsx
@@ -239,7 +239,11 @@ export function PlayerLayoutDemo({
 }
 
 function DemoStreamSync({ children }: React.PropsWithChildren) {
-  const { handleLoadStream } = useStreamPanelSync()
+  const {
+    handleLoadStream,
+    handlePlaylistPresetChange,
+    handlePresetChange,
+  } = useStreamPanelSync({ playerType: "video" })
 
   return (
     <>
@@ -247,6 +251,8 @@ function DemoStreamSync({ children }: React.PropsWithChildren) {
       <StreamPanel
         align="end"
         onLoadStream={handleLoadStream}
+        onPlaylistChange={handlePlaylistPresetChange}
+        onPresetChange={handlePresetChange}
         playerType="video"
         side="top"
         variant="anchored"

From 9cdac2bd9c43132ce7892bbb66c7805457c863af Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sat, 6 Jun 2026 23:02:20 +0530
Subject: [PATCH 2/7] feat: toolbar improvements, across player integrtion

---
 .../players/audio-player/demo-player.tsx      |  17 +-
 .../players/audio-player/hover-player.tsx     |  59 +---
 .../players/video-player/player-container.tsx | 113 ++++++--
 .../stream-panel/content-catalog.ts           |   2 +-
 .../stream-panel/content-overview-overlay.tsx |  37 +--
 .../stream-panel/custom-overlay.tsx           |  16 +-
 apps/www/components/stream-panel/icons.tsx    |  88 ------
 .../components/stream-panel/overlay-shell.tsx |  14 +-
 .../stream-panel/panel-popover.config.ts      |   2 +-
 .../components/stream-panel/panel-popover.tsx | 251 ++++++++++--------
 .../stream-panel/playlists-overlay.tsx        |   8 +-
 .../stream-panel/presets-overlay.tsx          |  37 ++-
 apps/www/components/stream-panel/provider.tsx |  15 +-
 .../components/stream-panel/saved-overlay.tsx |  70 ++---
 .../stream-panel/use-stream-panel-sync.ts     | 221 ++++++++++++---
 .../stream-panel/use-stream-panel.ts}         |  61 ++++-
 apps/www/content/docs/blocks/video-player.mdx |  24 +-
 apps/www/lib/stream-presets.ts                |  14 +-
 apps/www/package.json                         |   1 +
 .../video-player/components/playlist.tsx      |   2 +
 .../default/blocks/video-player/page.tsx      |  17 +-
 .../default/examples/player-root-demo.tsx     |   9 +-
 bun.lock                                      |   3 +
 23 files changed, 631 insertions(+), 450 deletions(-)
 delete mode 100644 apps/www/components/stream-panel/icons.tsx
 rename apps/www/{lib/docs-dial-store.ts => components/stream-panel/use-stream-panel.ts} (56%)

diff --git a/apps/www/components/players/audio-player/demo-player.tsx b/apps/www/components/players/audio-player/demo-player.tsx
index 33a5cceb..b52d23d2 100644
--- a/apps/www/components/players/audio-player/demo-player.tsx
+++ b/apps/www/components/players/audio-player/demo-player.tsx
@@ -6,6 +6,10 @@ import { useEffect, useState } from "react"
 
 import type { AudioPlayerAsset } from "@/registry/default/blocks/audio-player/components/media-player"
 
+import {
+  useStreamPanelStore,
+  useStreamPanelStoreHydrated,
+} from "@/components/stream-panel/use-stream-panel"
 import { AudioPlayer } from "@/registry/default/blocks/audio-player/components/media-player"
 
 import {
@@ -23,6 +27,10 @@ export function AudioPlayerDemo({
   playlistId = AUDIO_PLAYER_DEMO_PLAYLIST_ID,
 }: AudioPlayerDemoProps) {
   const [playlist, setPlaylist] = useState<AudioPlayerAsset[]>([])
+  const storeHydrated = useStreamPanelStoreHydrated()
+  const hasPersistedAudioSelection = useStreamPanelStore((s) =>
+    Boolean(s.contentSelections.audio)
+  )
 
   useEffect(() => {
     const abortController = new AbortController()
@@ -43,5 +51,12 @@ export function AudioPlayerDemo({
     }
   }, [playlistId])
 
-  return <AudioPlayer playlist={playlist}>{children}</AudioPlayer>
+  return (
+    <AudioPlayer
+      autoLoad={storeHydrated ? !hasPersistedAudioSelection : false}
+      playlist={playlist}
+    >
+      {children}
+    </AudioPlayer>
+  )
 }
diff --git a/apps/www/components/players/audio-player/hover-player.tsx b/apps/www/components/players/audio-player/hover-player.tsx
index 302fc96a..ffa8579e 100644
--- a/apps/www/components/players/audio-player/hover-player.tsx
+++ b/apps/www/components/players/audio-player/hover-player.tsx
@@ -1,21 +1,13 @@
 "use client"
 
-import {
-  AudioLinesIcon,
-  Settings2Icon,
-  SquareArrowOutUpRightIcon,
-} from "lucide-react"
+import { IconPlayCircle } from "@central-icons-react/round-filled-radius-0-stroke-1/IconPlayCircle"
+import { SquareArrowOutUpRightIcon } from "lucide-react"
 import { motion } from "motion/react"
 import Link from "next/link"
 
-import {
-  StreamPanel,
-  StreamPanelProvider,
-  useStreamPanel,
-} from "@/components/stream-panel"
+import { StreamPanelProvider } from "@/components/stream-panel"
 import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
 import { Button } from "@/components/ui/button"
-import { PopoverTrigger } from "@/components/ui/popover"
 
 import { AudioPlayerDemo } from "./demo-player"
 
@@ -44,15 +36,12 @@ export function AudioPlayerHover() {
         >
           <div className="flex h-14 w-fit flex-row items-center gap-3 rounded-t-3xl bg-black px-4">
             <div className="flex w-full items-center justify-center gap-1">
-              <span className="flex size-9 items-center justify-center rounded-full bg-white text-black">
-                <AudioLinesIcon className="size-5" />
-              </span>
+              <IconPlayCircle className="size-8 text-white" />
               <span className="text-3xl font-semibold tracking-tight text-white">
                 Audio
               </span>
             </div>
             <div className="my-auto h-8 w-0.5 rounded-md bg-muted-foreground"></div>
-            <AudioSettingsTrigger />
             <Button asChild size="xs">
               <Link
                 className="text-sm font-semibold tracking-tight"
@@ -73,42 +62,6 @@ export function AudioPlayerHover() {
 }
 
 function AudioHoverStreamSync() {
-  const {
-    handleLoadStream,
-    handlePlaylistPresetChange,
-    handlePresetChange,
-  } = useStreamPanelSync({ playerType: "audio" })
-
-  return (
-    <StreamPanel
-      align="end"
-      onLoadStream={handleLoadStream}
-      onPlaylistChange={handlePlaylistPresetChange}
-      onPresetChange={handlePresetChange}
-      playerType="audio"
-      side="top"
-      variant="anchored"
-    />
-  )
-}
-
-function AudioSettingsTrigger() {
-  const { handle } = useStreamPanel()
-
-  return (
-    <Button
-      aria-label="Audio settings"
-      asChild
-      className="
-        size-8 rounded-full border border-border/40 bg-background/10 text-primary-foreground
-        hover:bg-background/20
-      "
-      size="icon"
-      variant="ghost"
-    >
-      <PopoverTrigger handle={handle}>
-        <Settings2Icon className="size-4" />
-      </PopoverTrigger>
-    </Button>
-  )
+  useStreamPanelSync({ playerType: "audio" })
+  return null
 }
diff --git a/apps/www/components/players/video-player/player-container.tsx b/apps/www/components/players/video-player/player-container.tsx
index 993372bc..a36caca3 100644
--- a/apps/www/components/players/video-player/player-container.tsx
+++ b/apps/www/components/players/video-player/player-container.tsx
@@ -2,13 +2,23 @@
 
 import type { RefObject } from "react"
 
-import { RotateCw } from "lucide-react"
+import { ChevronDownIcon, MonitorPlayIcon, RotateCw } from "lucide-react"
 import { useRef } from "react"
 import { useFullscreen, useToggle } from "react-use"
 
+import {
+  StreamPanel,
+  StreamPanelProvider,
+  useStreamPanel,
+} from "@/components/stream-panel"
+import { getPlaylistPresetsForType } from "@/components/stream-panel/content-catalog"
+import { useStreamPanelStore } from "@/components/stream-panel/use-stream-panel"
+import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
 import { Button } from "@/components/ui/button"
+import { PopoverTrigger } from "@/components/ui/popover"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { useOrientation } from "@/hooks/use-orientation"
+import { getPresetsForType } from "@/lib/stream-presets"
 import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/registry/default/blocks/video-player/components/media-player"
 
@@ -19,26 +29,73 @@ export function VideoPlayerContainer() {
   const playerRef = useRef<HTMLDivElement>(null)
 
   return (
-    <>
+    <StreamPanelProvider>
       {isMobilePortrait && <RotateMessage playerRef={playerRef} />}
-      <VideoPlayer
-        className={cn(
-          `
-            dark mx-auto mt-6 overflow-hidden
-            sm:mx-2 sm:my-0 sm:w-full
-            md:mx-0
-          `,
-          isMobilePortrait &&
-            `
-              bg-black/90
-              **:data-[layout-type='player-container']:hidden
+      <div className="relative w-full">
+        <VideoPlayer
+          className={cn(
             `
-        )}
-        mediaProps={{
-          autoPlay: false,
-          muted: true,
-        }}
-        ref={playerRef}
+              dark mx-auto mt-6 overflow-hidden
+              sm:mx-2 sm:my-0 sm:w-full
+              md:mx-0
+            `,
+            isMobilePortrait &&
+              `
+                bg-black/90
+                **:data-[layout-type='player-container']:hidden
+              `
+          )}
+          mediaProps={{
+            autoPlay: false,
+            muted: true,
+          }}
+          ref={playerRef}
+        >
+          <HomeVideoStreamSelector />
+        </VideoPlayer>
+      </div>
+    </StreamPanelProvider>
+  )
+}
+
+function HomeVideoStreamSelector() {
+  const { handle } = useStreamPanel()
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType: "video" })
+  const selectedStreamName = useSelectedStreamName()
+
+  return (
+    <>
+      <div
+        className={`
+          pointer-events-none absolute inset-x-0 top-4 z-30 flex justify-center px-4
+          sm:top-6
+        `}
+      >
+        <Button
+          asChild
+          className={`
+            pointer-events-auto h-9 max-w-[min(20rem,calc(100vw-2rem))] rounded-full border border-white/12 bg-black/45 px-3 text-xs font-medium
+            text-white shadow-2xl shadow-black/35 backdrop-blur-xl
+          `}
+          variant="ghost"
+        >
+          <PopoverTrigger aria-label="Open stream selector" handle={handle}>
+            <MonitorPlayIcon className="size-3.5" />
+            <span className="truncate">{selectedStreamName}</span>
+            <ChevronDownIcon className="size-3.5 opacity-70" />
+          </PopoverTrigger>
+        </Button>
+      </div>
+
+      <StreamPanel
+        align="center"
+        onLoadStream={handleLoadStream}
+        onPlaylistChange={handlePlaylistPresetChange}
+        onPresetChange={handlePresetChange}
+        playerType="video"
+        side="bottom"
+        variant="anchored"
       />
     </>
   )
@@ -93,3 +150,21 @@ function RotateMessage({
     </div>
   )
 }
+
+function useSelectedStreamName() {
+  const selection = useStreamPanelStore((s) => s.contentSelections.video)
+  if (!selection) return "Choose Stream"
+
+  if (selection.kind === "playlist") {
+    return (
+      getPlaylistPresetsForType("video").find(
+        (playlist) => playlist.id === selection.id
+      )?.name ?? "Choose Stream"
+    )
+  }
+
+  return (
+    getPresetsForType("video").find((preset) => preset.id === selection.id)
+      ?.name ?? "Custom Stream"
+  )
+}
diff --git a/apps/www/components/stream-panel/content-catalog.ts b/apps/www/components/stream-panel/content-catalog.ts
index 67c42ad5..6e5d6bfc 100644
--- a/apps/www/components/stream-panel/content-catalog.ts
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -1,6 +1,6 @@
 import type shaka from "shaka-player"
 
-import type { StreamPanelPlayerType } from "@/lib/docs-dial-store"
+import type { StreamPanelPlayerType } from "@/components/stream-panel/use-stream-panel"
 import type { Asset } from "@/registry/default/hooks/use-asset"
 
 export interface BlenderOpenFilmAsset extends Asset {
diff --git a/apps/www/components/stream-panel/content-overview-overlay.tsx b/apps/www/components/stream-panel/content-overview-overlay.tsx
index d115ff35..849dc843 100644
--- a/apps/www/components/stream-panel/content-overview-overlay.tsx
+++ b/apps/www/components/stream-panel/content-overview-overlay.tsx
@@ -1,21 +1,20 @@
 "use client"
 
+import type { ComponentType, SVGProps } from "react"
+
+import { IconSatellite1 } from "@central-icons-react/round-filled-radius-0-stroke-1/IconSatellite1"
+import { IconVideoClip } from "@central-icons-react/round-filled-radius-0-stroke-1/IconVideoClip"
+import { IconVideos } from "@central-icons-react/round-filled-radius-0-stroke-1/IconVideos"
 import { ChevronRightIcon } from "lucide-react"
 
 import type {
   StreamPanelContentKind,
   StreamPanelPlayerType,
-} from "@/lib/docs-dial-store"
+} from "@/components/stream-panel/use-stream-panel"
 
 import { cn } from "@/lib/utils"
 
 import { Separator } from "../ui/separator"
-import {
-  FilmIcon,
-  type IconProps,
-  RadarIcon,
-  VideoPlaylistIcon,
-} from "./icons"
 import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
 
 interface ContentOverviewOverlayProps {
@@ -29,27 +28,33 @@ interface ContentOverviewOverlayProps {
   streamCount: number
 }
 
+type IconComponent = ComponentType<
+  SVGProps<SVGSVGElement> & {
+    size?: number | string
+  }
+>
+
 const rows: {
   description: string
-  Icon: React.ComponentType<IconProps>
+  Icon: IconComponent
   kind: StreamPanelContentKind
   label: string
 }[] = [
   {
     description: "Adaptive and progressive test content",
-    Icon: FilmIcon,
+    Icon: IconVideoClip,
     kind: "stream",
     label: "Streams",
   },
   {
     description: "Curated multi-item queues",
-    Icon: VideoPlaylistIcon,
+    Icon: IconVideos,
     kind: "playlist",
     label: "Playlists",
   },
   {
     description: "Time-based live manifests",
-    Icon: RadarIcon,
+    Icon: IconSatellite1,
     kind: "live",
     label: "Live",
   },
@@ -123,10 +128,12 @@ export function ContentOverviewOverlay({
                     {row.description}
                   </span>
                 </span>
-                <ChevronRightIcon className="
-                  size-3.5 shrink-0 text-muted-foreground transition-transform
-                  group-hover:translate-x-0.5
-                " />
+                <ChevronRightIcon
+                  className="
+                    size-3.5 shrink-0 text-muted-foreground transition-transform
+                    group-hover:translate-x-0.5
+                  "
+                />
               </button>
             )
           })}
diff --git a/apps/www/components/stream-panel/custom-overlay.tsx b/apps/www/components/stream-panel/custom-overlay.tsx
index 500b65fa..e3de43af 100644
--- a/apps/www/components/stream-panel/custom-overlay.tsx
+++ b/apps/www/components/stream-panel/custom-overlay.tsx
@@ -3,10 +3,10 @@
 import { AnimatePresence, m } from "motion/react"
 import React, { useState } from "react"
 
+import { useStreamPanelStore } from "@/components/stream-panel/use-stream-panel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
-import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { cn } from "@/lib/utils"
 
 import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
@@ -133,7 +133,7 @@ export function CustomOverlay({
           </label>
           <Input
             aria-invalid={urlError}
-            className="h-9 rounded-2xl text-sm"
+            className="h-9 rounded-lg text-sm"
             id="custom-stream-url"
             onChange={(e) => handleUrlChange(e.target.value)}
             placeholder="https://example.com/stream.m3u8"
@@ -167,7 +167,7 @@ export function CustomOverlay({
           </div>
           <Textarea
             aria-invalid={configError}
-            className="min-h-24 resize-none rounded-2xl font-mono text-sm"
+            className="min-h-32 resize-none rounded-lg font-mono text-sm"
             id="custom-stream-config"
             onChange={(e) => handleConfigChange(e.target.value)}
             onPaste={handleConfigPaste}
@@ -195,7 +195,7 @@ export function CustomOverlay({
                 Stream Name
               </label>
               <Input
-                className="h-9 rounded-2xl text-sm"
+                className="h-9 rounded-lg text-sm"
                 id="custom-stream-name"
                 onChange={(e) => setSaveName(e.target.value)}
                 placeholder="My custom stream"
@@ -209,7 +209,7 @@ export function CustomOverlay({
           {showSave ? (
             <>
               <Button
-                className="h-9 flex-1 rounded-2xl text-sm"
+                className="h-9 flex-1 rounded-lg text-sm"
                 disabled={!canSave}
                 onClick={handleSave}
                 size="sm"
@@ -217,7 +217,7 @@ export function CustomOverlay({
                 Save
               </Button>
               <Button
-                className="h-9 rounded-2xl text-sm"
+                className="h-9 rounded-lg text-sm"
                 onClick={() => {
                   setShowSave(false)
                   setSaveName("")
@@ -231,7 +231,7 @@ export function CustomOverlay({
           ) : (
             <>
               <Button
-                className="h-9 flex-1 rounded-2xl text-sm"
+                className="h-9 flex-1 rounded-lg text-sm"
                 disabled={!canLoad}
                 onClick={handleLoad}
                 size="sm"
@@ -239,7 +239,7 @@ export function CustomOverlay({
                 Load Stream
               </Button>
               <Button
-                className="h-9 rounded-2xl text-sm"
+                className="h-9 rounded-lg text-sm"
                 disabled={!canLoad}
                 onClick={() => setShowSave(true)}
                 size="sm"
diff --git a/apps/www/components/stream-panel/icons.tsx b/apps/www/components/stream-panel/icons.tsx
deleted file mode 100644
index 68b0e122..00000000
--- a/apps/www/components/stream-panel/icons.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-  size?: number;
-}
-
-const createIcon =
-  (path: React.ReactNode) =>
-  ({ size = 24, ...props }: IconProps) =>
-    (
-      <svg
-        fill="none"
-        height={size}
-        viewBox="0 0 24 24"
-        width={size}
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        {path}
-      </svg>
-    );
-
-export const RadarIcon = createIcon(
-  <>
-    <path
-      d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75C11.25 3.16421 11.5858 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 12.4142 20.8358 12.75 21.25 12.75C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75C14.8995 6.75 17.25 9.10051 17.25 12C17.25 12.4142 17.5858 12.75 18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 8.27208 15.7279 5.25 12 5.25Z"
-      fill="currentColor"
-    />
-    <path
-      d="M7.0347 6.97403C5.95027 5.8896 3.93526 5.81752 3.10831 7.41998C2.39976 8.79299 2 10.3509 2 12C2 17.5228 6.47715 22 12 22C13.6491 22 15.207 21.6002 16.58 20.8917C18.1825 20.0647 18.1104 18.0497 17.026 16.9653L12.5607 12.5L13.5303 11.5303C13.8232 11.2374 13.8232 10.7626 13.5303 10.4697C13.2374 10.1768 12.7626 10.1768 12.4697 10.4697L11.5 11.4393L7.0347 6.97403Z"
-      fill="currentColor"
-    />
-  </>
-);
-
-export const VideoPlaylistIcon = createIcon(
-  <path
-    clipRule="evenodd"
-    d="M4 3.75C4 3.33579 4.33579 3 4.75 3H19.25C19.6642 3 20 3.33579 20 3.75C20 4.16421 19.6642 4.5 19.25 4.5H4.75C4.33579 4.5 4 4.16421 4 3.75ZM2 8.25C2 6.73122 3.23122 5.5 4.75 5.5H19.25C20.7688 5.5 22 6.73122 22 8.25V18.25C22 19.7688 20.7688 21 19.25 21H4.75C3.23122 21 2 19.7688 2 18.25V8.25ZM10.4187 10.0771C10.675 9.95093 10.9808 9.98132 11.2073 10.1555L14.4573 12.6555C14.6418 12.7975 14.75 13.0171 14.75 13.25C14.75 13.4829 14.6418 13.7025 14.4573 13.8445L11.2073 16.3445C10.9808 16.5187 10.675 16.5491 10.4187 16.4229C10.1623 16.2966 10 16.0357 10 15.75V10.75C10 10.4643 10.1623 10.2034 10.4187 10.0771Z"
-    fill="currentColor"
-    fillRule="evenodd"
-  />
-);
-
-export const FilmIcon = createIcon(
-  <path
-    clipRule="evenodd"
-    d="M3 5.75C3 4.23122 4.23122 3 5.75 3H18.25C19.7688 3 21 4.23122 21 5.75V18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75ZM5.75 4.5C5.05964 4.5 4.5 5.05964 4.5 5.75V7.125H7V4.5H5.75ZM17 4.5V7.125H19.5V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5H17ZM19.5 8.625H17V11.25H19.5V8.625ZM19.5 12.75H17V15.8333H19.5V12.75ZM19.5 17.3333H17V19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V17.3333ZM15.5 12.75V11.25H8.5V12.75H15.5ZM7 19.5V16.875H4.5V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H7ZM4.5 15.375H7V12.75H4.5V15.375ZM4.5 11.25H7V8.625H4.5V11.25Z"
-    fill="currentColor"
-    fillRule="evenodd"
-  />
-);
-
-export const PencilEdit = createIcon(
-  <>
-    <path
-      clipRule="evenodd"
-      d="M19.6339 4.19449C19.1457 3.70633 18.3543 3.70633 17.8661 4.19449L13.5 8.5606V10.4999H15.4393L19.8055 6.13383C20.2936 5.64567 20.2936 4.85421 19.8055 4.36606L19.6339 4.19449ZM16.8055 3.13383C17.8794 2.05988 19.6206 2.05988 20.6945 3.13383L20.8661 3.3054C21.9401 4.37934 21.9401 6.12054 20.8661 7.19449L16.2803 11.7803C16.1397 11.9209 15.9489 11.9999 15.75 11.9999H12.75C12.3358 11.9999 12 11.6642 12 11.2499V8.24994C12 8.05103 12.079 7.86026 12.2197 7.71961L16.8055 3.13383Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-    <path
-      d="M14.818 2.99994L11.159 6.65895C10.7371 7.08091 10.5 7.65321 10.5 8.24994V11.2499C10.5 12.4926 11.5074 13.4999 12.75 13.4999H15.75C16.3467 13.4999 16.919 13.2629 17.341 12.8409L21 9.18192V17.0804C21 17.6145 21 18.0604 20.9703 18.4246C20.9392 18.8045 20.8721 19.1612 20.7003 19.4984C20.4366 20.0159 20.0159 20.4366 19.4985 20.7002C19.1612 20.8721 18.8046 20.9392 18.4247 20.9702C18.0604 21 17.6146 21 17.0805 20.9999H6.91955C6.3854 21 5.93956 21 5.57533 20.9702C5.19545 20.9392 4.83879 20.8721 4.50153 20.7002C3.98408 20.4366 3.56338 20.0159 3.29973 19.4984C3.12789 19.1612 3.06078 18.8045 3.02974 18.4246C2.99998 18.0604 2.99999 17.6145 3 17.0804V6.9195C2.99999 6.38535 2.99998 5.9395 3.02974 5.57527C3.06078 5.19539 3.12789 4.83873 3.29973 4.50147C3.56339 3.98402 3.98408 3.56333 4.50153 3.29968C4.83879 3.12783 5.19545 3.06072 5.57533 3.02968C5.93956 2.99992 6.38541 2.99993 6.91955 2.99994H14.818Z"
-      fill="currentColor"
-    />
-  </>
-);
-
-export const StackTemplate = createIcon(
-  <>
-    <path
-      d="M19.1564 10C20.9595 10 22.2754 11.7065 21.8166 13.4502L20.3693 18.9502C20.0513 20.1582 18.9583 21 17.7091 21H6.29313C5.04403 20.9999 3.95095 20.1581 3.63298 18.9502L2.18571 13.4502C1.72688 11.7065 3.04287 10.0001 4.84587 10H19.1564Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.2511 6.5C19.6654 6.5 20.0011 6.83579 20.0011 7.25C20.0011 7.66421 19.6654 8 19.2511 8H4.75114C4.33701 7.9999 4.00114 7.66415 4.00114 7.25C4.00114 6.83585 4.33701 6.5001 4.75114 6.5H19.2511Z"
-      fill="currentColor"
-    />
-    <path
-      d="M17.2511 3C17.6654 3 18.0011 3.33579 18.0011 3.75C18.0011 4.16421 17.6654 4.5 17.2511 4.5H6.75114C6.33701 4.4999 6.00114 4.16415 6.00114 3.75C6.00114 3.33585 6.33701 3.0001 6.75114 3H17.2511Z"
-      fill="currentColor"
-    />
-  </>
-);
diff --git a/apps/www/components/stream-panel/overlay-shell.tsx b/apps/www/components/stream-panel/overlay-shell.tsx
index 42bab094..68e450b6 100644
--- a/apps/www/components/stream-panel/overlay-shell.tsx
+++ b/apps/www/components/stream-panel/overlay-shell.tsx
@@ -48,7 +48,10 @@ export function OverlayShell({
       <m.div
         animate={{ x: placement === "idle" ? "100%" : "0%" }}
         className={cn(
-          "absolute inset-0 flex flex-col bg-background",
+          "flex max-h-[inherit] min-h-0 flex-col rounded-lg bg-background",
+          visiblePlacement === "active"
+            ? "relative"
+            : "absolute inset-0 h-full",
           visiblePlacement === "active" ? "z-20" : "z-10"
         )}
         data-stream-panel-overlay={placement}
@@ -67,12 +70,12 @@ export function OverlayShell({
         }}
       >
         <div
-          className="flex min-h-10 items-center gap-2 rounded-[22px] px-1"
+          className="flex min-h-10 items-center gap-2 rounded-lg px-1"
           data-stream-panel-overlay-header=""
         >
           <Button
             className={`
-              rounded-xl
+              rounded-lg
               hover:bg-foreground/4 hover:text-foreground
               focus-visible:bg-foreground/4 focus-visible:text-foreground
               active:scale-[0.97]
@@ -95,7 +98,10 @@ export function OverlayShell({
           </span>
         </div>
 
-        <div className="min-h-0" data-stream-panel-overlay-body="">
+        <div
+          className="flex max-h-[calc(var(--stream-panel-max-height,100dvh)-2.5rem)] min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain"
+          data-stream-panel-overlay-body=""
+        >
           {children}
         </div>
       </m.div>
diff --git a/apps/www/components/stream-panel/panel-popover.config.ts b/apps/www/components/stream-panel/panel-popover.config.ts
index 4e8a6380..dabaeff2 100644
--- a/apps/www/components/stream-panel/panel-popover.config.ts
+++ b/apps/www/components/stream-panel/panel-popover.config.ts
@@ -2,7 +2,7 @@ import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/conten
 import type {
   StreamPanelContentKind,
   StreamPanelPlayerType,
-} from "@/lib/docs-dial-store"
+} from "@/components/stream-panel/use-stream-panel"
 import type { StreamPreset } from "@/lib/stream-presets"
 
 export const STREAM_PANEL_OVERLAY = {
diff --git a/apps/www/components/stream-panel/panel-popover.tsx b/apps/www/components/stream-panel/panel-popover.tsx
index 95af042a..458ee868 100644
--- a/apps/www/components/stream-panel/panel-popover.tsx
+++ b/apps/www/components/stream-panel/panel-popover.tsx
@@ -1,16 +1,20 @@
 "use client"
 
+import type { CentralIconBaseProps } from "@central-icons-react/round-filled-radius-0-stroke-1/CentralIconBase"
+
+import { IconBookmarkPlus } from "@central-icons-react/round-filled-radius-0-stroke-1/IconBookmarkPlus"
+import { IconProjects } from "@central-icons-react/round-filled-radius-0-stroke-1/IconProjects"
 import { ChevronRight } from "lucide-react"
 import React, { useMemo, useState } from "react"
 
-import type { StreamPanelContentKind } from "@/lib/docs-dial-store"
+import type { StreamPanelContentKind } from "@/components/stream-panel/use-stream-panel"
 
 import { getPlaylistPresetsForType } from "@/components/stream-panel/content-catalog"
+import { useStreamPanelStore } from "@/components/stream-panel/use-stream-panel"
 import { Field, FieldLabel } from "@/components/ui/field"
 import { Popover, PopoverContent } from "@/components/ui/popover"
 import { Separator } from "@/components/ui/separator"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
-import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { getPresetsForType, type StreamPreset } from "@/lib/stream-presets"
 import { cn } from "@/lib/utils"
 
@@ -18,7 +22,6 @@ import type { OverlayShellPlacement } from "./overlay-shell"
 
 import { ContentOverviewOverlay } from "./content-overview-overlay"
 import { CustomOverlay } from "./custom-overlay"
-import { type IconProps, PencilEdit, StackTemplate } from "./icons"
 import {
   type PanelPosition,
   STREAM_PANEL_CONTENT_OVERLAYS,
@@ -100,8 +103,7 @@ export function StreamPanel({
     const preset = presets.find((p) => p.id === presetId)
     if (!preset) return
 
-    store.setPresetId(presetId)
-    store.setContentSelection(playerType, { id: presetId, kind })
+    store.setContentSelection(playerType, { id: presetId, index: 0, kind })
     onPresetChange?.(preset, kind)
   }
 
@@ -167,112 +169,135 @@ export function StreamPanel({
 
   const content = (
     <div
-      className="relative mt-2 flex min-h-0 w-full flex-col gap-2 overflow-visible"
+      className="relative mt-2 grid max-h-(--stream-panel-max-height,100dvh) min-h-0 w-full overflow-hidden rounded-lg"
       data-stream-panel-root=""
     >
-      <Field className="gap-0">
-        <FieldLabel className="mx-2 text-[10px] text-muted-foreground/70 uppercase">
-          Media Settings
-        </FieldLabel>
-
-        <PanelToggleRow onValueChange={store.setMuted} value={store.muted}>
-          Muted
-        </PanelToggleRow>
-        <PanelToggleRow
-          onValueChange={store.setAutoplay}
-          value={store.autoplay}
-        >
-          Autoplay
-        </PanelToggleRow>
-      </Field>
-
-      <Separator className="h-px bg-border/45" />
-
-      <PanelActionRow
-        detail={selectedContentName}
-        Icon={StackTemplate}
-        label="Presets"
-        onClick={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
-      />
-
-      <PanelActionRow
-        detail={
-          store.savedStreams.length > 0
-            ? `${store.savedStreams.length} saved stream${
-                store.savedStreams.length > 1 ? "s" : ""
-              }`
-            : "Add a custom stream"
-        }
-        Icon={PencilEdit}
-        label="Saved Streams"
-        onClick={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
-      />
+      <div
+        className={cn(
+          "col-start-1 row-start-1 flex min-h-0 w-full flex-col gap-2",
+          activeOverlay !== STREAM_PANEL_OVERLAY.NONE &&
+            "pointer-events-none absolute inset-x-0 top-0 opacity-0"
+        )}
+        inert={activeOverlay !== STREAM_PANEL_OVERLAY.NONE ? true : undefined}
+      >
+        <Field className="gap-0">
+          <FieldLabel className="mx-2 text-[10px] text-muted-foreground/70 uppercase">
+            Media Settings
+          </FieldLabel>
+
+          <PanelToggleRow onValueChange={store.setMuted} value={store.muted}>
+            Muted
+          </PanelToggleRow>
+          <PanelToggleRow
+            onValueChange={store.setAutoplay}
+            value={store.autoplay}
+          >
+            Autoplay
+          </PanelToggleRow>
+        </Field>
+
+        <Separator className="h-px bg-border/45" />
+
+        <PanelActionRow
+          detail={selectedContentName}
+          Icon={IconProjects}
+          label="Presets"
+          onClick={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+        />
 
-      {presetOverlays.map((presetOverlay) => (
-        <PresetsOverlay
-          groupedPresets={presetOverlay.groupedPresets}
-          key={presetOverlay.overlay}
-          onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
-          onSelect={(presetId) => {
-            handlePresetChange(presetId, presetOverlay.kind)
-            closeOverlays()
-            setOpen(false)
-          }}
-          placement={getOverlayPlacement(presetOverlay.overlay)}
-          selectedPresetId={
-            contentSelection?.kind === presetOverlay.kind
-              ? contentSelection.id
-              : undefined
+        <PanelActionRow
+          detail={
+            store.savedStreams.length > 0
+              ? `${store.savedStreams.length} saved stream${
+                  store.savedStreams.length > 1 ? "s" : ""
+                }`
+              : "Add a custom stream"
           }
-          show={activeOverlay === presetOverlay.overlay}
-          title={presetOverlay.title}
+          Icon={IconBookmarkPlus}
+          label="Saved Streams"
+          onClick={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
         />
-      ))}
-
-      <PlaylistsOverlay
-        onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
-        onSelect={(playlist) => {
-          store.setContentSelection(playerType, {
-            id: playlist.id,
-            kind: "playlist",
-          })
-          onPlaylistChange?.(playlist)
-          closeOverlays()
-          setOpen(false)
-        }}
-        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.PLAYLISTS)}
-        playlists={playlistPresets}
-        selection={contentSelection}
-        show={activeOverlay === STREAM_PANEL_OVERLAY.PLAYLISTS}
-      />
-
-      <ContentOverviewOverlay
-        liveCount={livePresets.length}
-        onBack={closeOverlays}
-        onSelect={(kind) => {
-          openOverlay(STREAM_PANEL_CONTENT_OVERLAYS[kind])
-        }}
-        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CONTENT)}
-        playerType={playerType}
-        playlistCount={playlistPresets.length}
-        show={activeOverlay === STREAM_PANEL_OVERLAY.CONTENT}
-        streamCount={streamPresets.length}
-      />
-
-      <SavedOverlay
-        onAddCustom={() => openOverlay(STREAM_PANEL_OVERLAY.CUSTOM)}
-        onBack={closeOverlays}
-        onSelect={handleLoadSaved}
-        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.SAVED)}
-        show={activeOverlay === STREAM_PANEL_OVERLAY.SAVED}
-      />
+      </div>
 
-      <CustomOverlay
-        onBack={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
-        onLoad={handleLoadCustom}
-        placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CUSTOM)}
-        show={activeOverlay === STREAM_PANEL_OVERLAY.CUSTOM}
-      />
+      <div
+        className="
+          relative col-start-1 row-start-1 max-h-[inherit] min-h-0 overflow-hidden rounded-lg
+          data-[empty=true]:pointer-events-none data-[empty=true]:absolute data-[empty=true]:inset-0
+        "
+        data-empty={activeOverlay === STREAM_PANEL_OVERLAY.NONE}
+      >
+        <div
+          className="relative max-h-[inherit] min-h-0 rounded-lg"
+          inert={activeOverlay === STREAM_PANEL_OVERLAY.NONE ? true : undefined}
+        >
+          {presetOverlays.map((presetOverlay) => (
+            <PresetsOverlay
+              groupedPresets={presetOverlay.groupedPresets}
+              key={presetOverlay.overlay}
+              onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+              onSelect={(presetId) => {
+                handlePresetChange(presetId, presetOverlay.kind)
+                closeOverlays()
+                setOpen(false)
+              }}
+              placement={getOverlayPlacement(presetOverlay.overlay)}
+              selectedPresetId={
+                contentSelection?.kind === presetOverlay.kind
+                  ? contentSelection.id
+                  : undefined
+              }
+              show={activeOverlay === presetOverlay.overlay}
+              title={presetOverlay.title}
+            />
+          ))}
+
+          <PlaylistsOverlay
+            onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
+            onSelect={(playlist) => {
+              store.setContentSelection(playerType, {
+                id: playlist.id,
+                index: 0,
+                kind: "playlist",
+              })
+              onPlaylistChange?.(playlist)
+              closeOverlays()
+              setOpen(false)
+            }}
+            placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.PLAYLISTS)}
+            playlists={playlistPresets}
+            selection={contentSelection}
+            show={activeOverlay === STREAM_PANEL_OVERLAY.PLAYLISTS}
+          />
+
+          <ContentOverviewOverlay
+            liveCount={livePresets.length}
+            onBack={closeOverlays}
+            onSelect={(kind) => {
+              openOverlay(STREAM_PANEL_CONTENT_OVERLAYS[kind])
+            }}
+            placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CONTENT)}
+            playerType={playerType}
+            playlistCount={playlistPresets.length}
+            show={activeOverlay === STREAM_PANEL_OVERLAY.CONTENT}
+            streamCount={streamPresets.length}
+          />
+
+          <SavedOverlay
+            onAddCustom={() => openOverlay(STREAM_PANEL_OVERLAY.CUSTOM)}
+            onBack={closeOverlays}
+            onSelect={handleLoadSaved}
+            placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.SAVED)}
+            show={activeOverlay === STREAM_PANEL_OVERLAY.SAVED}
+          />
+
+          <CustomOverlay
+            onBack={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
+            onLoad={handleLoadCustom}
+            placement={getOverlayPlacement(STREAM_PANEL_OVERLAY.CUSTOM)}
+            show={activeOverlay === STREAM_PANEL_OVERLAY.CUSTOM}
+          />
+        </div>
+      </div>
     </div>
   )
 
@@ -283,12 +308,22 @@ export function StreamPanel({
       <PopoverContent
         align={align}
         className={cn(
-          `dark relative w-72 gap-2 overflow-hidden rounded-3xl bg-background/95 p-2 text-foreground shadow-2xl shadow-background/40 backdrop-blur-xl`,
+          `
+            dark relative max-h-(--stream-panel-max-height) w-72 gap-2 overflow-hidden rounded-lg bg-background/95 p-2 text-foreground shadow-2xl
+            shadow-background/40 backdrop-blur-xl
+          `,
           variant === "floating" && STREAM_PANEL_ORIGIN_CLASSES[position],
           variant === "floating" && STREAM_PANEL_POSITION_CLASSES[position]
         )}
         positionMethod={variant === "floating" ? "fixed" : undefined}
         side={side}
+        sideOffset={50}
+        style={
+          {
+            "--stream-panel-max-height":
+              "min(420px, calc(var(--available-height, 100dvh) - 0.5rem))",
+          } as React.CSSProperties
+        }
       >
         {content}
       </PopoverContent>
@@ -313,7 +348,7 @@ function PanelActionRow({
   onClick,
 }: {
   detail?: string
-  Icon?: React.ComponentType<IconProps>
+  Icon?: React.FC<CentralIconBaseProps>
   label: string
   onClick: () => void
 }) {
@@ -369,7 +404,7 @@ function PanelToggleRow({
   value: boolean
 }) {
   return (
-    <div className="flex h-10 items-center justify-between px-2.5 text-sm">
+    <div className="flex h-10 items-center justify-between rounded-lg px-2.5 text-sm">
       <span className="font-medium text-foreground/85">{children}</span>
       <ToggleGroup
         onValueChange={(v) => {
diff --git a/apps/www/components/stream-panel/playlists-overlay.tsx b/apps/www/components/stream-panel/playlists-overlay.tsx
index 1a023dab..97ac70fb 100644
--- a/apps/www/components/stream-panel/playlists-overlay.tsx
+++ b/apps/www/components/stream-panel/playlists-overlay.tsx
@@ -4,7 +4,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { CheckIcon } from "lucide-react"
 
 import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/content-catalog"
-import type { StreamPanelSelection } from "@/lib/docs-dial-store"
+import type { StreamPanelSelection } from "@/components/stream-panel/use-stream-panel"
 
 import { cn } from "@/lib/utils"
 
@@ -50,7 +50,9 @@ export function PlaylistsOverlay({
           ) : (
             <MenuPrimitive.RadioGroup
               onValueChange={(playlistId) => {
-                const playlist = playlists.find((item) => item.id === playlistId)
+                const playlist = playlists.find(
+                  (item) => item.id === playlistId
+                )
                 if (playlist) onSelect(playlist)
               }}
               value={selection?.kind === "playlist" ? selection.id : ""}
@@ -65,7 +67,7 @@ export function PlaylistsOverlay({
                     <MenuPrimitive.RadioItem
                       className={cn(
                         `
-                          relative flex w-full items-center gap-3 rounded-[18px] p-2.5 text-sm outline-hidden
+                          relative flex w-full items-center gap-3 rounded-lg p-2.5 text-sm outline-hidden
                           transition-[background-color,color,transform] select-none
                           hover:bg-foreground/4
                           focus:bg-foreground/4
diff --git a/apps/www/components/stream-panel/presets-overlay.tsx b/apps/www/components/stream-panel/presets-overlay.tsx
index 9e9fabe7..ee498464 100644
--- a/apps/www/components/stream-panel/presets-overlay.tsx
+++ b/apps/www/components/stream-panel/presets-overlay.tsx
@@ -6,7 +6,6 @@ import { useEffect, useMemo, useState } from "react"
 
 import type { StreamFeature, StreamPreset } from "@/lib/stream-presets"
 
-import { useStreamPanelStore } from "@/lib/docs-dial-store"
 import { getStreamSupport, initStreamSupport } from "@/lib/stream-support"
 import { cn } from "@/lib/utils"
 
@@ -77,9 +76,7 @@ export function PresetsOverlay({
   show,
   title = "Presets",
 }: PresetsOverlayProps) {
-  const presetId = useStreamPanelStore((s) => s.presetId)
   const [, setProbed] = useState(false)
-  const value = selectedPresetId ?? presetId
 
   const allPresets = useMemo(
     () => Object.values(groupedPresets).flat(),
@@ -100,17 +97,17 @@ export function PresetsOverlay({
         title={title}
       >
         <div className="no-scrollbar flex-1 overflow-y-auto p-2 pt-1">
-          <MenuPrimitive.RadioGroup onValueChange={onSelect} value={value}>
-            {Object.entries(groupedPresets).map(([group, items], index) => (
+          <MenuPrimitive.RadioGroup
+            onValueChange={onSelect}
+            value={selectedPresetId ?? ""}
+          >
+            {Object.entries(groupedPresets).map(([group, items]) => (
               <MenuPrimitive.Group className="space-y-1" key={group}>
-                {index > 0 && (
-                  <MenuPrimitive.Separator className="mx-3 my-2 h-px bg-border/45" />
-                )}
-
-                <MenuPrimitive.GroupLabel className="
-                  px-2 pt-1 pb-0.5 text-[10px] leading-none font-semibold tracking-[0.16em] text-muted-foreground/70 uppercase
-                ">
-                  {group}
+                <MenuPrimitive.GroupLabel className="flex items-center gap-2 px-2 pt-1 pb-0.5">
+                  <span className="text-[10px] font-semibold text-muted-foreground/70 uppercase">
+                    {group}
+                  </span>
+                  <MenuPrimitive.Separator className="h-px flex-1 bg-border/45" />
                 </MenuPrimitive.GroupLabel>
 
                 {items.map((preset) => {
@@ -128,13 +125,13 @@ export function PresetsOverlay({
                       <MenuPrimitive.RadioItem
                         className={cn(
                           `
-                            relative flex w-full items-center gap-3 rounded-[18px] p-2.5 text-sm outline-hidden
+                            relative flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-hidden
                             transition-[background-color,color,transform] select-none
                             hover:bg-foreground/4
                             focus:bg-foreground/4
                             active:scale-[0.985]
                           `,
-                          preset.id === value && "font-medium",
+                          preset.id === selectedPresetId && "font-medium",
                           !support.supported && "pointer-events-none opacity-40"
                         )}
                         value={preset.id}
@@ -144,7 +141,7 @@ export function PresetsOverlay({
                             <span className="truncate">{preset.name}</span>
                           </div>
                           {preset.description ? (
-                            <span className="mt-1 block truncate text-xs text-muted-foreground">
+                            <span className="mt-1 block truncate text-[11px] text-muted-foreground">
                               {preset.description}
                             </span>
                           ) : null}
@@ -153,10 +150,10 @@ export function PresetsOverlay({
                               Unsupported
                             </span>
                           ) : displayFeatures.length > 0 ? (
-                            <div className="mt-1 flex flex-wrap gap-1">
+                            <div className="mt-1.5 flex flex-wrap gap-1">
                               {displayFeatures.map((feature) => (
                                 <span
-                                  className="rounded-md bg-foreground/5 px-1.5 py-0.5 text-[10px]/3 font-medium text-muted-foreground"
+                                  className="rounded-xs bg-foreground/5 px-1.5 py-0.5 text-[10px]/3 font-medium text-muted-foreground"
                                   key={feature}
                                 >
                                   {FEATURE_LABELS[feature]}
@@ -192,6 +189,8 @@ function getDisplayFeatures(
 ): StreamFeature[] {
   return features
     .filter((feature) => !omitLive || feature !== "LIVE")
-    .toSorted((a, b) => FEATURE_PRIORITY.indexOf(a) - FEATURE_PRIORITY.indexOf(b))
+    .toSorted(
+      (a, b) => FEATURE_PRIORITY.indexOf(a) - FEATURE_PRIORITY.indexOf(b)
+    )
     .slice(0, max)
 }
diff --git a/apps/www/components/stream-panel/provider.tsx b/apps/www/components/stream-panel/provider.tsx
index 40cd8feb..5a4b7dd0 100644
--- a/apps/www/components/stream-panel/provider.tsx
+++ b/apps/www/components/stream-panel/provider.tsx
@@ -1,19 +1,22 @@
 "use client"
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import React, { createContext, use, useCallback, useMemo, useState } from "react"
+import React, {
+  createContext,
+  use,
+  useCallback,
+  useMemo,
+  useState,
+} from "react"
 
 import type { StreamPanelPlaylistPreset } from "@/components/stream-panel/content-catalog"
-import type { StreamPanelPlayerType } from "@/lib/docs-dial-store"
+import type { StreamPanelPlayerType } from "@/components/stream-panel/use-stream-panel"
 import type { StreamPreset } from "@/lib/stream-presets"
 
 export interface StreamPanelController {
   onLoadStream?: (src: string, config?: string) => void
   onPlaylistChange?: (playlist: StreamPanelPlaylistPreset) => void
-  onPresetChange?: (
-    preset: StreamPreset,
-    kind?: "live" | "stream"
-  ) => void
+  onPresetChange?: (preset: StreamPreset, kind?: "live" | "stream") => void
   playerType: StreamPanelPlayerType
 }
 
diff --git a/apps/www/components/stream-panel/saved-overlay.tsx b/apps/www/components/stream-panel/saved-overlay.tsx
index 60fa5ccb..1a98f517 100644
--- a/apps/www/components/stream-panel/saved-overlay.tsx
+++ b/apps/www/components/stream-panel/saved-overlay.tsx
@@ -2,10 +2,14 @@
 
 import { PlusIcon, XIcon } from "lucide-react"
 
-import { type SavedStream, useStreamPanelStore } from "@/lib/docs-dial-store"
+import {
+  type SavedStream,
+  useStreamPanelStore,
+} from "@/components/stream-panel/use-stream-panel"
 import { cn } from "@/lib/utils"
 
 import { Button } from "../ui/button"
+import { Separator } from "../ui/separator"
 import { OverlayShell, type OverlayShellPlacement } from "./overlay-shell"
 
 interface SavedOverlayProps {
@@ -35,42 +39,13 @@ export function SavedOverlay({
       title="Saved Streams"
     >
       <div className="no-scrollbar flex-1 overflow-y-auto p-2 pt-1">
-        <button
-          className={`
-            group relative flex w-full items-center gap-3 rounded-[18px] px-2.5 py-2 text-sm outline-hidden
-            transition-[background-color,color,transform] select-none
-            hover:bg-foreground/4
-            focus-visible:bg-foreground/4
-            active:scale-[0.985]
-          `}
-          onClick={onAddCustom}
-          type="button"
-        >
-          <span
-            className="
-              flex size-7 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors
-              group-hover:text-foreground
-            "
-          >
-            <PlusIcon className="size-4" />
-          </span>
-          <span className="min-w-0 flex-1 text-left">
-            <span className="block truncate font-medium tracking-tight">
-              Add Custom
-            </span>
-            <span className="block truncate text-xs text-muted-foreground">
-              Paste a manifest URL
-            </span>
-          </span>
-        </button>
-
         {savedStreams.map((stream) => (
           <div
             className={cn(
               "group",
               `
-                relative flex w-full items-center gap-2 rounded-[18px] px-2.5 py-2 text-sm outline-hidden
-                transition-[background-color,color,transform] select-none
+                relative flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-hidden transition-[background-color,color,transform]
+                select-none
                 hover:bg-foreground/4
                 focus:bg-foreground/4
                 active:scale-[0.985]
@@ -89,7 +64,7 @@ export function SavedOverlay({
             <Button
               aria-label={`Remove ${stream.name}`}
               className="
-                size-7 rounded-xl text-muted-foreground
+                size-7 rounded-lg text-muted-foreground
                 hover:bg-foreground/4 hover:text-foreground
               "
               onClick={() => removeSavedStream(stream.id)}
@@ -100,6 +75,35 @@ export function SavedOverlay({
             </Button>
           </div>
         ))}
+        <Separator className="my-2 h-px" />
+        <button
+          className={`
+            group relative flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-hidden transition-[background-color,color,transform]
+            select-none
+            hover:bg-foreground/4
+            focus-visible:bg-foreground/4
+            active:scale-[0.985]
+          `}
+          onClick={onAddCustom}
+          type="button"
+        >
+          <span
+            className="
+              flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors
+              group-hover:text-foreground
+            "
+          >
+            <PlusIcon className="size-4" />
+          </span>
+          <span className="min-w-0 flex-1 text-left">
+            <span className="block truncate font-medium tracking-tight">
+              Add Custom
+            </span>
+            <span className="block truncate text-xs text-muted-foreground">
+              Paste a manifest URL
+            </span>
+          </span>
+        </button>
       </div>
     </OverlayShell>
   )
diff --git a/apps/www/components/stream-panel/use-stream-panel-sync.ts b/apps/www/components/stream-panel/use-stream-panel-sync.ts
index d2514b87..873715ff 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useRef } from "react"
 
-import type { StreamPreset } from "@/lib/stream-presets"
 import type { Asset, UseAssetOptions } from "@/registry/default/hooks/use-asset"
 import type { PlaybackStore } from "@/registry/default/hooks/use-playback"
 
@@ -17,14 +16,20 @@ import {
 import {
   type StreamPanelContentKind,
   type StreamPanelPlayerType,
+  type StreamPanelSelection,
   useStreamPanelStore,
-} from "@/lib/docs-dial-store"
+  useStreamPanelStoreHydrated,
+} from "@/components/stream-panel/use-stream-panel"
+import { getPresetsForType, type StreamPreset } from "@/lib/stream-presets"
 import { useAsset } from "@/registry/default/hooks/use-asset"
 import { useMediaStore } from "@/registry/default/hooks/use-media"
 import { PLAYBACK_FEATURE_KEY } from "@/registry/default/hooks/use-playback"
+import { usePlayerStore } from "@/registry/default/hooks/use-player"
 import { useVolumeStore } from "@/registry/default/hooks/use-volume"
 import { useMediaFeatureApi } from "@/registry/default/ui/media-provider"
 
+const DEFAULT_VIDEO_PRESET_ID = "mux-big-buck-bunny"
+
 export function useStreamPanelSync({
   playerType = "video",
 }: {
@@ -32,19 +37,25 @@ export function useStreamPanelSync({
 } = {}) {
   const playbackApi = useMediaFeatureApi<PlaybackStore>(PLAYBACK_FEATURE_KEY)
   const mediaElement = useMediaStore((state) => state.mediaElement)
+  const player = usePlayerStore((state) => state.instance)
 
   const volume = useStreamPanelStore((s) => s.volume)
   const muted = useStreamPanelStore((s) => s.muted)
   const autoplay = useStreamPanelStore((s) => s.autoplay)
+  const contentSelection = useStreamPanelStore(
+    (s) => s.contentSelections[playerType]
+  )
+  const storeHydrated = useStreamPanelStoreHydrated()
   const setContentSelection = useStreamPanelStore((s) => s.setContentSelection)
-  const setPresetId = useStreamPanelStore((s) => s.setPresetId)
 
   const setVolume = useVolumeStore((s) => s.setVolume)
   const setMuted = useVolumeStore((s) => s.setMuted)
   const playlistAbortRef = useRef<AbortController | null>(null)
-  const blenderStreamCacheRef = useRef<Map<string, BlenderStreamResponse> | null>(
-    null
-  )
+  const restoredSelectionRef = useRef(false)
+  const blenderStreamCacheRef = useRef<Map<
+    string,
+    BlenderStreamResponse
+  > | null>(null)
   if (blenderStreamCacheRef.current === null) {
     blenderStreamCacheRef.current = new Map()
   }
@@ -100,6 +111,17 @@ export function useStreamPanelSync({
           })
         },
       },
+      onAssetChange: (event) => {
+        const selection =
+          useStreamPanelStore.getState().contentSelections[playerType]
+        if (!selection || selection.kind !== "playlist") return
+        if (selection.index === event.currentIndex) return
+
+        setContentSelection(playerType, {
+          ...selection,
+          index: event.currentIndex,
+        })
+      },
       onLoadError: (_asset, error) => {
         playbackApi.setState(({ playback }) => {
           playback.status = "error"
@@ -108,7 +130,7 @@ export function useStreamPanelSync({
         return "stop"
       },
     }),
-    [blenderStreamCache, playbackApi]
+    [blenderStreamCache, playbackApi, playerType, setContentSelection]
   )
 
   const { loadPlaylist } = useAsset(assetOptions)
@@ -134,30 +156,56 @@ export function useStreamPanelSync({
 
   useEffect(() => abortPlaylistRequest, [abortPlaylistRequest])
 
-  const handlePresetChange = useCallback(
-    (preset: StreamPreset, kind: StreamPanelContentKind = "stream") => {
-      setPresetId(preset.id)
-      setContentSelection(playerType, { id: preset.id, kind })
-      loadPlaylist([preset as unknown as Asset])
+  const loadCustomStream = useCallback(
+    (src: string, config?: string, id = `custom-${Date.now()}`) => {
+      let parsedConfig: Record<string, unknown> | undefined
+      if (config) {
+        const parseResult = safeParseJson(config)
+        if (!parseResult.ok) {
+          playbackApi.setState(({ playback }) => {
+            playback.status = "error"
+            playback.error = new Error(
+              "Invalid JSON config: " + parseResult.error
+            )
+          })
+          return null
+        }
+        parsedConfig = parseResult.value
+      }
+
+      const asset: StreamPreset = {
+        config: parsedConfig,
+        features: [],
+        format: "progressive",
+        group: "Special",
+        id,
+        name: "Custom Stream",
+        src,
+        type: playerType,
+      }
+      loadPlaylist([asset as unknown as Asset])
+      return asset
     },
-    [loadPlaylist, playerType, setContentSelection, setPresetId]
+    [loadPlaylist, playbackApi, playerType]
   )
 
-  const handlePlaylistPresetChange = useCallback(
-    (playlist: StreamPanelPlaylistPreset) => {
+  const loadPlaylistPreset = useCallback(
+    (playlistId: string, startIndex = 0) => {
       playlistAbortRef.current?.abort()
       const abortController = new AbortController()
       playlistAbortRef.current = abortController
 
-      void fetchPlaylistPresetAssets(playlist.id, abortController.signal)
+      void fetchPlaylistPresetAssets(playlistId, abortController.signal)
         .then((assets) => {
           if (abortController.signal.aborted) return
 
+          const index = normalizePlaylistIndex(startIndex, assets.length)
           setContentSelection(playerType, {
-            id: playlist.id,
+            id: playlistId,
+            index,
             kind: "playlist",
           })
-          loadPlaylist(assets)
+          loadPlaylist(assets, index)
         })
         .catch((error: unknown) => {
           if (error instanceof DOMException && error.name === "AbortError")
@@ -172,36 +220,101 @@ export function useStreamPanelSync({
     [loadPlaylist, playbackApi, playerType, setContentSelection]
   )
 
+  const restoreContentSelection = useCallback(
+    (selection: StreamPanelSelection) => {
+      if (selection.kind === "playlist") {
+        loadPlaylistPreset(selection.id, selection.index)
+        return
+      }
+
+      const preset = getPresetsForType(playerType).find(
+        (item) => item.id === selection.id
+      )
+      if (preset) {
+        abortPlaylistRequest()
+        loadPlaylist([preset as unknown as Asset])
+        return
+      }
+
+      if (!selection.src) return
+      abortPlaylistRequest()
+      loadCustomStream(selection.src, selection.config, selection.id)
+    },
+    [
+      abortPlaylistRequest,
+      loadCustomStream,
+      loadPlaylist,
+      loadPlaylistPreset,
+      playerType,
+    ]
+  )
+
+  useEffect(() => {
+    if (
+      !storeHydrated ||
+      !mediaElement ||
+      !player ||
+      restoredSelectionRef.current
+    )
+      return
+
+    restoredSelectionRef.current = true
+    if (contentSelection) {
+      restoreContentSelection(contentSelection)
+      return
+    }
+
+    const defaultPreset = getDefaultPresetForType(playerType)
+    if (!defaultPreset) return
+
+    const defaultSelection: StreamPanelSelection = {
+      id: defaultPreset.id,
+      index: 0,
+      kind: "stream",
+    }
+    setContentSelection(playerType, defaultSelection)
+    restoreContentSelection(defaultSelection)
+  }, [
+    contentSelection,
+    mediaElement,
+    player,
+    playerType,
+    restoreContentSelection,
+    setContentSelection,
+    storeHydrated,
+  ])
+
+  const handlePresetChange = useCallback(
+    (preset: StreamPreset, kind: StreamPanelContentKind = "stream") => {
+      abortPlaylistRequest()
+      setContentSelection(playerType, { id: preset.id, index: 0, kind })
+      loadPlaylist([preset as unknown as Asset])
+    },
+    [abortPlaylistRequest, loadPlaylist, playerType, setContentSelection]
+  )
+
+  const handlePlaylistPresetChange = useCallback(
+    (playlist: StreamPanelPlaylistPreset) => {
+      loadPlaylistPreset(playlist.id)
+    },
+    [loadPlaylistPreset]
+  )
+
   const handleLoadStream = useCallback(
     (src: string, config?: string) => {
-      let parsedConfig: Record<string, unknown> | undefined
-      if (config) {
-        const parseResult = safeParseJson(config)
-        if (!parseResult.ok) {
-          playbackApi.setState(({ playback }) => {
-            playback.status = "error"
-            playback.error = new Error(
-              "Invalid JSON config: " + parseResult.error
-            )
-          })
-          return
-        }
-        parsedConfig = parseResult.value
-      }
-      const asset: StreamPreset = {
-        config: parsedConfig,
-        features: [],
-        format: "progressive",
-        group: "Special",
-        id: `custom-${Date.now()}`,
-        name: "Custom Stream",
+      abortPlaylistRequest()
+      const asset = loadCustomStream(src, config)
+      if (!asset) return
+
+      setContentSelection(playerType, {
+        config,
+        id: asset.id,
+        index: 0,
+        kind: "stream",
         src,
-        type: playerType,
-      }
-      setContentSelection(playerType, { id: asset.id, kind: "stream" })
-      loadPlaylist([asset as unknown as Asset])
+      })
     },
-    [loadPlaylist, playbackApi, playerType, setContentSelection]
+    [abortPlaylistRequest, loadCustomStream, playerType, setContentSelection]
   )
 
   return {
@@ -231,6 +344,26 @@ async function getBlenderStream(
   return stream
 }
 
+function getDefaultPresetForType(
+  playerType: StreamPanelPlayerType
+): StreamPreset | undefined {
+  const presets = getPresetsForType(playerType)
+  if (playerType === "video") {
+    return (
+      presets.find((preset) => preset.id === DEFAULT_VIDEO_PRESET_ID) ??
+      presets[0]
+    )
+  }
+
+  return presets[0]
+}
+
+function normalizePlaylistIndex(index: number | undefined, itemCount: number) {
+  if (typeof index !== "number" || !Number.isInteger(index) || itemCount <= 0)
+    return 0
+  return Math.min(Math.max(index, 0), itemCount - 1)
+}
+
 function safeParseJson(
   str: string
 ): { error: string; ok: false } | { ok: true; value: Record<string, unknown> } {
diff --git a/apps/www/lib/docs-dial-store.ts b/apps/www/components/stream-panel/use-stream-panel.ts
similarity index 56%
rename from apps/www/lib/docs-dial-store.ts
rename to apps/www/components/stream-panel/use-stream-panel.ts
index 314314a3..8018ee3b 100644
--- a/apps/www/lib/docs-dial-store.ts
+++ b/apps/www/components/stream-panel/use-stream-panel.ts
@@ -18,8 +18,8 @@ export interface StreamPanelActions {
   ) => void
   setCustomConfig: (config: string) => void
   setCustomSrc: (src: string) => void
+  setHasHydrated: (hasHydrated: boolean) => void
   setMuted: (muted: boolean) => void
-  setPresetId: (id: string) => void
   setVolume: (volume: number) => void
 }
 export type StreamPanelContentKind = "live" | "playlist" | "stream"
@@ -27,23 +27,54 @@ export type StreamPanelContentKind = "live" | "playlist" | "stream"
 export type StreamPanelPlayerType = "audio" | "video"
 
 export interface StreamPanelSelection {
+  config?: string
   id: string
+  index?: number
   kind: StreamPanelContentKind
+  src?: string
 }
 
 export interface StreamPanelState {
   autoplay: boolean
-  contentSelections: Partial<Record<StreamPanelPlayerType, StreamPanelSelection>>
+  contentSelections: Partial<
+    Record<StreamPanelPlayerType, StreamPanelSelection>
+  >
   customConfig: string
   customSrc: string
+  hasHydrated: boolean
   muted: boolean
-  presetId: string
   savedStreams: SavedStream[]
   volume: number
 }
 
 export type StreamPanelStore = StreamPanelActions & StreamPanelState
 
+type PersistedStreamPanelState = Pick<
+  StreamPanelState,
+  "autoplay" | "contentSelections" | "muted" | "savedStreams" | "volume"
+>
+
+function stripTransientState(
+  state: unknown
+): Partial<PersistedStreamPanelState> {
+  if (!state || typeof state !== "object") return {}
+
+  const { autoplay, contentSelections, muted, savedStreams, volume } =
+    state as Partial<PersistedStreamPanelState>
+
+  const persistedState: Partial<PersistedStreamPanelState> = {}
+
+  if (autoplay !== undefined) persistedState.autoplay = autoplay
+  if (contentSelections !== undefined) {
+    persistedState.contentSelections = contentSelections
+  }
+  if (muted !== undefined) persistedState.muted = muted
+  if (savedStreams !== undefined) persistedState.savedStreams = savedStreams
+  if (volume !== undefined) persistedState.volume = volume
+
+  return persistedState
+}
+
 export const useStreamPanelStore = create<StreamPanelStore>()(
   persist(
     (set) => ({
@@ -51,8 +82,8 @@ export const useStreamPanelStore = create<StreamPanelStore>()(
       contentSelections: {},
       customConfig: "",
       customSrc: "",
+      hasHydrated: false,
       muted: true,
-      presetId: "mux-big-buck-bunny",
       removeSavedStream: (id) =>
         set((state) => ({
           savedStreams: state.savedStreams.filter((s) => s.id !== id),
@@ -76,14 +107,34 @@ export const useStreamPanelStore = create<StreamPanelStore>()(
 
       setCustomConfig: (customConfig) => set({ customConfig }),
       setCustomSrc: (customSrc) => set({ customSrc }),
+      setHasHydrated: (hasHydrated) => set({ hasHydrated }),
       setMuted: (muted) => set({ muted }),
-      setPresetId: (presetId) => set({ presetId }),
       setVolume: (volume) => set({ volume }),
       volume: 80,
     }),
     {
       // Keep the original key so existing saved streams and preferences survive the rename.
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        ...stripTransientState(persistedState),
+      }),
+      migrate: stripTransientState,
       name: "limeplay-docs-dial",
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true)
+      },
+      partialize: (state) => ({
+        autoplay: state.autoplay,
+        contentSelections: state.contentSelections,
+        muted: state.muted,
+        savedStreams: state.savedStreams,
+        volume: state.volume,
+      }),
+      version: 1,
     }
   )
 )
+
+export function useStreamPanelStoreHydrated() {
+  return useStreamPanelStore((state) => state.hasHydrated)
+}
diff --git a/apps/www/content/docs/blocks/video-player.mdx b/apps/www/content/docs/blocks/video-player.mdx
index 70cad183..4ab680e7 100644
--- a/apps/www/content/docs/blocks/video-player.mdx
+++ b/apps/www/content/docs/blocks/video-player.mdx
@@ -1,6 +1,6 @@
 ---
 title: Video Player
-description: A polished video player with playlist support, captions, picture-in-picture, playback speed, preloading, and smooth overlay controls.
+description: A polished video player with playlist support, captions, picture-in-picture, playback speed, source loading, and smooth overlay controls.
 component: video-player
 preview: video-player
 registry: default
@@ -16,28 +16,20 @@ npx shadcn add @limeplay/video-player
 ## Usage
 
 ```tsx
-import {
-  VideoPlayer,
-  type VideoPlayerAsset,
-} from "@/components/limeplay/video-player/components/media-player"
-
-const playlist: VideoPlayerAsset[] = [
-  {
-    id: "sing-2",
-    src: "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8",
-    title: "Sing 2 Trailer",
-  },
-]
+import { VideoPlayer } from "@/components/limeplay/video-player/components/media-player"
+
+const src =
+  "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8"
 
 export function Player() {
-  return <VideoPlayer playlist={playlist} />
+  return <VideoPlayer mediaProps={{ src }} />
 }
 ```
 
 ## Features
 
-- Playlist queue with active item switching.
-- Asset preloading when users hover playlist items.
+- Single-source and playlist-backed loading APIs.
+- Playlist menu appears only when a multi-item queue is loaded.
 - Timeline scrubbing with buffered progress feedback.
 - Volume, mute, captions, playback rate, and picture-in-picture controls.
 - Shaka-backed playback for HLS, DASH, and DRM-capable streams.
diff --git a/apps/www/lib/stream-presets.ts b/apps/www/lib/stream-presets.ts
index ddbfbbb6..1b550d2d 100644
--- a/apps/www/lib/stream-presets.ts
+++ b/apps/www/lib/stream-presets.ts
@@ -200,7 +200,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-angel-widevine",
-    name: "Angel One (Widevine)",
+    name: "Angel One",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd",
     type: "video",
   },
@@ -218,7 +218,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-angel-clearkey",
-    name: "Angel One (ClearKey)",
+    name: "Angel One",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-clearkey/dash.mpd",
     type: "video",
   },
@@ -235,7 +235,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "DRM",
     id: "shaka-angel-hls-widevine",
-    name: "Angel One (HLS Widevine)",
+    name: "Angel One (HLS)",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine-hls/hls.m3u8",
     type: "video",
   },
@@ -258,7 +258,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-sintel-widevine",
-    name: "Sintel 4K (Widevine)",
+    name: "Sintel 4K",
     src: "https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd",
     type: "video",
   },
@@ -268,7 +268,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "DRM",
     id: "bitmovin-hls-aes128",
-    name: "Art of Motion (AES-128)",
+    name: "Art of Motion",
     src: "https://cdn.bitmovin.com/content/assets/art-of-motion_drm/m3u8s/11331.m3u8",
     type: "video",
   },
@@ -327,7 +327,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Special",
     id: "shaka-sintel-trick",
-    name: "Sintel (Trick Play)",
+    name: "Sintel",
     src: "https://storage.googleapis.com/shaka-demo-assets/sintel-trickplay/dash.mpd",
     type: "video",
   },
@@ -337,7 +337,7 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Special",
     id: "dash-if-thumbnails",
-    name: "Big Buck Bunny (Thumbnails)",
+    name: "Big Buck Bunny",
     src: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_with_tiled_thumbnails.mpd",
     type: "video",
   },
diff --git a/apps/www/package.json b/apps/www/package.json
index 1a513f75..b5311c39 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -17,6 +17,7 @@
     "@ai-sdk/openai-compatible": "^1.0.39",
     "@ai-sdk/react": "^2.0.101",
     "@base-ui/react": "^1.5.0",
+    "@central-icons-react/round-filled-radius-0-stroke-1": "^1.1.257",
     "@lottiefiles/dotlottie-react": "^0.14.4",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-collapsible": "^1.1.12",
diff --git a/apps/www/registry/default/blocks/video-player/components/playlist.tsx b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
index d15b9c0c..81f9e622 100644
--- a/apps/www/registry/default/blocks/video-player/components/playlist.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
@@ -45,6 +45,8 @@ export function Playlist() {
       )
   }, [queue, shuffle, shuffleOrder])
 
+  if (orderedItems.length < 2) return null
+
   const handleAssetSelect = async (assetId: string) => {
     await skipToId(assetId)
   }
diff --git a/apps/www/registry/default/blocks/video-player/page.tsx b/apps/www/registry/default/blocks/video-player/page.tsx
index b96f7e30..16a169ae 100644
--- a/apps/www/registry/default/blocks/video-player/page.tsx
+++ b/apps/www/registry/default/blocks/video-player/page.tsx
@@ -1,21 +1,12 @@
-import {
-  VideoPlayer,
-  type VideoPlayerAsset,
-} from "@/registry/default/blocks/video-player/components/media-player"
+import { VideoPlayer } from "@/registry/default/blocks/video-player/components/media-player"
 
-const playlist: VideoPlayerAsset[] = [
-  {
-    id: "sing2",
-    poster: "https://storage.googleapis.com/shaka-asset-icons/sing.png",
-    src: "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8",
-    title: "Sing 2 Trailer",
-  },
-]
+const src =
+  "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8"
 
 export default function Page() {
   return (
     <section className="flex h-dvh w-dvw bg-black">
-      <VideoPlayer playlist={playlist} />
+      <VideoPlayer mediaProps={{ src }} />
     </section>
   )
 }
diff --git a/apps/www/registry/default/examples/player-root-demo.tsx b/apps/www/registry/default/examples/player-root-demo.tsx
index 60df296c..068e832d 100644
--- a/apps/www/registry/default/examples/player-root-demo.tsx
+++ b/apps/www/registry/default/examples/player-root-demo.tsx
@@ -239,11 +239,8 @@ export function PlayerLayoutDemo({
 }
 
 function DemoStreamSync({ children }: React.PropsWithChildren) {
-  const {
-    handleLoadStream,
-    handlePlaylistPresetChange,
-    handlePresetChange,
-  } = useStreamPanelSync({ playerType: "video" })
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType: "video" })
 
   return (
     <>
@@ -254,7 +251,7 @@ function DemoStreamSync({ children }: React.PropsWithChildren) {
         onPlaylistChange={handlePlaylistPresetChange}
         onPresetChange={handlePresetChange}
         playerType="video"
-        side="top"
+        side="right"
         variant="anchored"
       />
     </>
diff --git a/bun.lock b/bun.lock
index a4c1bbcc..f28db37e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -17,6 +17,7 @@
         "@ai-sdk/openai-compatible": "^1.0.39",
         "@ai-sdk/react": "^2.0.101",
         "@base-ui/react": "^1.5.0",
+        "@central-icons-react/round-filled-radius-0-stroke-1": "^1.1.257",
         "@lottiefiles/dotlottie-react": "^0.14.4",
         "@phosphor-icons/react": "^2.1.10",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -176,6 +177,8 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.9", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw=="],
 
+    "@central-icons-react/round-filled-radius-0-stroke-1": ["@central-icons-react/round-filled-radius-0-stroke-1@1.1.257", "", { "peerDependencies": { "react": ">=14.0.0 <= 19" } }, "sha512-2ardg45gigXlHiMfWg258Q1xYqRy0AoAqf8BRD1r7+JLGIhHy+UrL7kmWp8Ds2azeCCrDxX+CFDhMEgkCZ0kcA=="],
+
     "@dotenvx/dotenvx": ["@dotenvx/dotenvx@1.51.1", "", { "dependencies": { "commander": "^11.1.0", "dotenv": "^17.2.1", "eciesjs": "^0.4.10", "execa": "^5.1.1", "fdir": "^6.2.0", "ignore": "^5.3.0", "object-treeify": "1.1.33", "picomatch": "^4.0.2", "which": "^4.0.0" }, "bin": { "dotenvx": "src/cli/dotenvx.js" } }, "sha512-fqcQxcxC4LOaUlW8IkyWw8x0yirlLUkbxohz9OnWvVWjf73J5yyw7jxWnkOJaUKXZotcGEScDox9MU6rSkcDgg=="],
 
     "@ecies/ciphers": ["@ecies/ciphers@0.2.5", "", { "peerDependencies": { "@noble/ciphers": "^1.0.0" } }, "sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A=="],

From 22c76fcf9ef222ce1579e99e1294fa9527bc3088 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sun, 7 Jun 2026 02:32:19 +0530
Subject: [PATCH 3/7] feat: audio playlist integration

---
 apps/www/app/blocks/[[...slug]]/page.tsx      | 102 ++-------
 apps/www/app/layout.tsx                       |   5 +-
 .../components/blocks/block-page-shell.tsx    | 106 +++++++++
 apps/www/components/blocks/preview-pane.tsx   |  99 ++-------
 .../players/audio-player/hover-player.tsx     | 135 ++++++++----
 .../stream-panel/content-catalog.ts           | 206 +++++++++++++++++-
 .../stream-panel/custom-overlay.tsx           |  32 +--
 .../components/stream-panel/panel-popover.tsx |  28 ++-
 .../stream-panel/use-stream-panel-sync.ts     |  31 ++-
 .../stream-panel/use-stream-panel.ts          |   2 +
 .../components/fixed-timeline-control.tsx     |   6 +-
 apps/www/registry/default/hooks/use-volume.ts |  69 +++++-
 12 files changed, 552 insertions(+), 269 deletions(-)
 create mode 100644 apps/www/components/blocks/block-page-shell.tsx

diff --git a/apps/www/app/blocks/[[...slug]]/page.tsx b/apps/www/app/blocks/[[...slug]]/page.tsx
index a29e80d9..5aab357d 100644
--- a/apps/www/app/blocks/[[...slug]]/page.tsx
+++ b/apps/www/app/blocks/[[...slug]]/page.tsx
@@ -4,16 +4,10 @@ import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock"
 import { DocsLayout } from "fumadocs-ui/layouts/docs"
 import { notFound } from "next/navigation"
 
+import { BlockPageShell } from "@/components/blocks/block-page-shell"
 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 { blocksSource } from "@/lib/blocks-source"
 
 export const revalidate = false
@@ -48,6 +42,14 @@ export default async function BlockPage(props: BlockPageProps) {
       })}
     />
   )
+  const info = (
+    <BlockInfoPane
+      content={content}
+      description={page.data.description}
+      title={page.data.title}
+    />
+  )
+  const preview = <PreviewComponent />
 
   return (
     <div className="w-full">
@@ -57,7 +59,7 @@ export default async function BlockPage(props: BlockPageProps) {
         }}
         tree={blocksSource.getPageTree()}
       >
-        <main className="relative min-h-screen bg-background">
+        <main className="relative min-h-svh overflow-x-hidden bg-background">
           <script
             dangerouslySetInnerHTML={{
               __html: `
@@ -68,85 +70,11 @@ export default async function BlockPage(props: BlockPageProps) {
               `,
             }}
           />
-          <div className="flex size-full">
-            <div
-              className={`
-                w-full
-                lg:hidden
-              `}
-            >
-              <BlockPreviewPane>
-                <PreviewComponent />
-              </BlockPreviewPane>
-              <BlockInfoPane
-                content={content}
-                description={page.data.description}
-                title={page.data.title}
-              />
-            </div>
-
-            <div
-              className={`
-                hidden h-screen w-full
-                lg:block
-              `}
-            >
-              <ResizablePanelGroup orientation="horizontal">
-                <ResizablePanel
-                  className={`
-                    overflow-hidden opacity-100 transition-[opacity,filter,transform] duration-300 ease-out
-                    in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:-translate-x-2
-                    in-data-[block-preview-expanded=true]:opacity-0 in-data-[block-preview-expanded=true]:blur-sm
-                  `}
-                  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%)",
-                      }}
-                    />
-
-                    <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 opacity-100 transition-opacity duration-300 ease-out
-                    in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:opacity-0
-                  `}
-                  withHandle
-                />
-
-                <ResizablePanel
-                  className="relative"
-                  defaultSize={"65%"}
-                  minSize={"40%"}
-                >
-                  <PreviewComponent />
-                </ResizablePanel>
-              </ResizablePanelGroup>
-            </div>
-          </div>
+          <BlockPageShell
+            info={info}
+            preview={preview}
+            title={page.data.title}
+          />
         </main>
       </DocsLayout>
     </div>
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index c2e97ce9..47f1b430 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -7,7 +7,6 @@ import { UserJotProvider } from "@userjot/next"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Inter } from "next/font/google"
-import Head from "next/head"
 
 import { JsonLd } from "@/components/json-ld"
 import { PRODUCT_DESCRIPTION, PRODUCT_NAME } from "@/lib/constants"
@@ -73,9 +72,9 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html className={inter.className} lang="en" suppressHydrationWarning>
-      <Head>
+      <head>
         <UserJotProvider projectId="cmjs634l4043b15ldylgedgwi" />
-      </Head>
+      </head>
       <body className="antialiased">
         <JsonLd />
         {children}
diff --git a/apps/www/components/blocks/block-page-shell.tsx b/apps/www/components/blocks/block-page-shell.tsx
new file mode 100644
index 00000000..4674b464
--- /dev/null
+++ b/apps/www/components/blocks/block-page-shell.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { useSyncExternalStore } from "react"
+
+import { BlockTopBar } from "@/components/blocks/breadcrumbs"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+const DESKTOP_QUERY = "(min-width: 1024px)"
+
+type BlockPageShellProps = {
+  info: ReactNode
+  preview: ReactNode
+  title: string
+}
+
+export function BlockPageShell({ info, preview, title }: BlockPageShellProps) {
+  const isDesktop = useIsDesktop()
+
+  if (!isDesktop) {
+    return <div className="w-full">{info}</div>
+  }
+
+  return (
+    <div className="h-screen w-full">
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel
+          className={`
+            overflow-hidden opacity-100 transition-[opacity,filter,transform] duration-300 ease-out
+            in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:-translate-x-2
+            in-data-[block-preview-expanded=true]:opacity-0 in-data-[block-preview-expanded=true]:blur-sm
+          `}
+          defaultSize={"35%"}
+          minSize={"30%"}
+        >
+          <div className="relative h-full overflow-hidden bg-transparent">
+            <BlockTopBar title={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%)",
+              }}
+            />
+
+            <div className="h-full min-w-0 overflow-x-hidden overflow-y-auto pt-16">
+              {info}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle
+          className={`
+            z-20 opacity-100 transition-opacity duration-300 ease-out
+            in-data-[block-preview-expanded=true]:pointer-events-none in-data-[block-preview-expanded=true]:opacity-0
+          `}
+          withHandle
+        />
+
+        <ResizablePanel
+          className="relative"
+          defaultSize={"65%"}
+          minSize={"40%"}
+        >
+          {preview}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
+
+function getDesktopSnapshot() {
+  return window.matchMedia(DESKTOP_QUERY).matches
+}
+
+function getServerDesktopSnapshot() {
+  return false
+}
+
+function subscribeToDesktopChange(onStoreChange: () => void) {
+  const mediaQueryList = window.matchMedia(DESKTOP_QUERY)
+  mediaQueryList.addEventListener("change", onStoreChange)
+
+  return () => mediaQueryList.removeEventListener("change", onStoreChange)
+}
+
+function useIsDesktop() {
+  return useSyncExternalStore(
+    subscribeToDesktopChange,
+    getDesktopSnapshot,
+    getServerDesktopSnapshot
+  )
+}
diff --git a/apps/www/components/blocks/preview-pane.tsx b/apps/www/components/blocks/preview-pane.tsx
index 60d363e9..dd05462e 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -2,28 +2,16 @@
 
 import { domAnimation, LazyMotion, m } from "motion/react"
 import { usePathname, useRouter } from "next/navigation"
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react"
+import React, { useCallback, useLayoutEffect, useState } from "react"
 
 import { StreamPanelProvider } from "@/components/stream-panel"
 import { useThemeToggle } from "@/components/theme-toggle"
+import { cn } from "@/lib/utils"
 
 import { BlockToolbar } from "./block-toolbar"
 
 const EXPANDED_QUERY_PARAM = "expanded"
 
-type PreviewRect = {
-  height: number | string
-  left: number | string
-  top: number
-  width: number
-}
-
 export function BlockPreviewWithToolbar({
   children,
   codeUrl,
@@ -33,7 +21,10 @@ export function BlockPreviewWithToolbar({
 }) {
   const pathname = usePathname()
   const router = useRouter()
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(() => {
+    if (typeof window === "undefined") return false
+    return getExpandedFromUrl()
+  })
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
     start: "top-right",
@@ -41,33 +32,6 @@ export function BlockPreviewWithToolbar({
   })
   const theme = isDark ? "dark" : "light"
   const [reloadKey, setReloadKey] = useState(0)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const [panelRect, setPanelRect] = useState<PreviewRect>({
-    height: "100%",
-    left: "100%",
-    top: 0,
-    width: 0,
-  })
-
-  const handlePanelRef = useCallback((node: HTMLDivElement | null) => {
-    panelRef.current = node
-    if (node) setPanelRect(getElementRect(node))
-  }, [])
-
-  useEffect(() => {
-    if (!panelRef.current) return
-    const update = () => {
-      if (!panelRef.current) return
-      setPanelRect(getElementRect(panelRef.current))
-    }
-    const ro = new ResizeObserver(update)
-    ro.observe(panelRef.current)
-    window.addEventListener("resize", update)
-    return () => {
-      ro.disconnect()
-      window.removeEventListener("resize", update)
-    }
-  }, [])
 
   const updateExpandedQuery = useCallback(
     (nextExpanded: boolean) => {
@@ -98,15 +62,6 @@ export function BlockPreviewWithToolbar({
     setReloadKey((k) => k + 1)
   }, [])
 
-  const expandedInset = 16
-  const [windowSize, setWindowSize] = useState(getWindowSize)
-
-  useEffect(() => {
-    const update = () => setWindowSize(getWindowSize())
-    window.addEventListener("resize", update)
-    return () => window.removeEventListener("resize", update)
-  }, [])
-
   useLayoutEffect(() => {
     setExpanded(getExpandedFromUrl())
   }, [pathname])
@@ -121,27 +76,20 @@ export function BlockPreviewWithToolbar({
     }
   }, [expanded])
 
-  const collapsedStyle = {
-    height: panelRect.height,
-    left: panelRect.left,
-    top: panelRect.top,
-    width: panelRect.width,
-  }
-
-  const expandedStyle = {
-    height: windowSize.height - expandedInset * 2,
-    left: expandedInset,
-    top: expandedInset,
-    width: windowSize.width - expandedInset * 2,
-  }
-
   return (
     <StreamPanelProvider>
-      <div className="absolute inset-0" ref={handlePanelRef} />
       <LazyMotion features={domAnimation}>
         <m.div
-          animate={expanded ? expandedStyle : collapsedStyle}
-          className="fixed z-40 overflow-hidden bg-transparent p-4"
+          animate={{ opacity: 1, scale: 1 }}
+          className={cn(
+            "z-40 overflow-hidden p-4",
+            expanded
+              ? `
+                fixed inset-0 bg-background
+                lg:inset-4
+              `
+              : "absolute inset-0 bg-transparent"
+          )}
           initial={false}
           transition={{ damping: 35, stiffness: 300, type: "spring" }}
         >
@@ -170,24 +118,9 @@ export function BlockPreviewWithToolbar({
   )
 }
 
-function getElementRect(element: HTMLElement): PreviewRect {
-  const rect = element.getBoundingClientRect()
-  return {
-    height: rect.height,
-    left: rect.left,
-    top: rect.top,
-    width: rect.width,
-  }
-}
-
 function getExpandedFromUrl() {
   return (
     new URLSearchParams(window.location.search).get(EXPANDED_QUERY_PARAM) ===
     "true"
   )
 }
-
-function getWindowSize() {
-  if (typeof window === "undefined") return { height: 0, width: 0 }
-  return { height: window.innerHeight, width: window.innerWidth }
-}
diff --git a/apps/www/components/players/audio-player/hover-player.tsx b/apps/www/components/players/audio-player/hover-player.tsx
index ffa8579e..d0d0c71d 100644
--- a/apps/www/components/players/audio-player/hover-player.tsx
+++ b/apps/www/components/players/audio-player/hover-player.tsx
@@ -1,67 +1,106 @@
 "use client"
 
-import { IconPlayCircle } from "@central-icons-react/round-filled-radius-0-stroke-1/IconPlayCircle"
-import { SquareArrowOutUpRightIcon } from "lucide-react"
+import { IconVoiceHigh } from "@central-icons-react/round-filled-radius-0-stroke-1/IconVoiceHigh"
+import { ListMusicIcon, SquareArrowOutUpRightIcon } from "lucide-react"
 import { motion } from "motion/react"
 import Link from "next/link"
 
-import { StreamPanelProvider } from "@/components/stream-panel"
+import {
+  StreamPanel,
+  StreamPanelProvider,
+  useStreamPanel,
+} from "@/components/stream-panel"
 import { useStreamPanelSync } from "@/components/stream-panel/use-stream-panel-sync"
 import { Button } from "@/components/ui/button"
+import { PopoverTrigger } from "@/components/ui/popover"
 
 import { AudioPlayerDemo } from "./demo-player"
 
 export function AudioPlayerHover() {
   return (
     <StreamPanelProvider>
+      <AudioPlayerHoverContent />
+    </StreamPanelProvider>
+  )
+}
+
+function AudioHoverStreamPanel() {
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType: "audio" })
+
+  return (
+    <StreamPanel
+      align="start"
+      onLoadStream={handleLoadStream}
+      onPlaylistChange={handlePlaylistPresetChange}
+      onPresetChange={handlePresetChange}
+      playerType="audio"
+      side="top"
+      variant="anchored"
+    />
+  )
+}
+
+function AudioHoverStreamTrigger() {
+  const { handle } = useStreamPanel()
+
+  return (
+    <Button asChild size="xs" variant="secondary">
+      <PopoverTrigger aria-label="Open audio library" handle={handle}>
+        <ListMusicIcon className="size-3.5" />
+        Library
+      </PopoverTrigger>
+    </Button>
+  )
+}
+
+function AudioPlayerHoverContent() {
+  const { open } = useStreamPanel()
+
+  return (
+    <motion.div
+      animate={open ? "open" : "closed"}
+      className="isolate"
+      initial="closed"
+      whileHover="open"
+    >
       <motion.div
-        animate="closed"
-        className="isolate"
-        initial="closed"
-        whileHover="open"
+        className={`mx-auto block max-w-5xl`}
+        style={{ transformOrigin: "bottom left" }}
+        transition={{
+          damping: 28,
+          mass: 0.72,
+          stiffness: 380,
+          type: "spring",
+        }}
+        variants={{
+          closed: { opacity: 0.98, scale: 0.985, y: 48 },
+          open: { opacity: 1, scale: 1, y: 0 },
+        }}
       >
-        <motion.div
-          className={`mx-auto block max-w-5xl`}
-          style={{ transformOrigin: "bottom left" }}
-          transition={{
-            damping: 28,
-            mass: 0.72,
-            stiffness: 380,
-            type: "spring",
-          }}
-          variants={{
-            closed: { opacity: 0.98, scale: 0.985, y: 48 },
-            open: { opacity: 1, scale: 1, y: 0 },
-          }}
-        >
-          <div className="flex h-14 w-fit flex-row items-center gap-3 rounded-t-3xl bg-black px-4">
-            <div className="flex w-full items-center justify-center gap-1">
-              <IconPlayCircle className="size-8 text-white" />
-              <span className="text-3xl font-semibold tracking-tight text-white">
-                Audio
-              </span>
-            </div>
-            <div className="my-auto h-8 w-0.5 rounded-md bg-muted-foreground"></div>
-            <Button asChild size="xs">
-              <Link
-                className="text-sm font-semibold tracking-tight"
-                href="/blocks/audio-player"
-              >
-                Install Now
-                <SquareArrowOutUpRightIcon className="ml-1" />
-              </Link>
-            </Button>
+        <div className="flex h-14 w-fit flex-row items-center gap-3 rounded-t-3xl bg-black px-4">
+          <div className="flex w-full items-center justify-center gap-1">
+            <IconVoiceHigh className="size-8 text-white" />
+            <span className="text-3xl font-semibold tracking-tight text-white">
+              Audio
+            </span>
           </div>
-        </motion.div>
-        <AudioPlayerDemo>
-          <AudioHoverStreamSync />
-        </AudioPlayerDemo>
+          <div className="my-auto h-8 w-0.5 rounded-md bg-muted-foreground"></div>
+          <AudioHoverStreamTrigger />
+          <Button asChild size="xs">
+            <Link
+              className="text-sm font-semibold tracking-tight"
+              href="/blocks/audio-player"
+            >
+              Install Now
+              <SquareArrowOutUpRightIcon className="ml-1" />
+            </Link>
+          </Button>
+        </div>
       </motion.div>
-    </StreamPanelProvider>
+      <AudioPlayerDemo>
+        <AudioHoverStreamPanel />
+      </AudioPlayerDemo>
+    </motion.div>
   )
 }
-
-function AudioHoverStreamSync() {
-  useStreamPanelSync({ playerType: "audio" })
-  return null
-}
diff --git a/apps/www/components/stream-panel/content-catalog.ts b/apps/www/components/stream-panel/content-catalog.ts
index 6e5d6bfc..8c8f899f 100644
--- a/apps/www/components/stream-panel/content-catalog.ts
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -1,8 +1,31 @@
 import type shaka from "shaka-player"
 
+import { z } from "zod"
+
 import type { StreamPanelPlayerType } from "@/components/stream-panel/use-stream-panel"
 import type { Asset } from "@/registry/default/hooks/use-asset"
 
+export interface AppleMusicArtwork {
+  bgColor?: string
+  height?: number
+  templateUrl?: string
+  textColor1?: string
+  textColor2?: string
+  textColor3?: string
+  textColor4?: string
+  url?: string
+  width?: number
+}
+
+export interface AppleMusicChartAsset extends Asset {
+  albumName?: string
+  artistName?: string
+  duration?: number
+  genre?: string
+  source: "apple-music-chart"
+  url?: string
+}
+
 export interface BlenderOpenFilmAsset extends Asset {
   duration?: number
   images?: BlenderOpenFilmImages
@@ -33,6 +56,23 @@ export interface StreamPanelPlaylistPreset {
   type: StreamPanelPlayerType
 }
 
+interface AppleMusicChartItem {
+  albumName?: string
+  artistName?: string
+  artwork?: AppleMusicArtwork
+  durationMs?: number
+  id: string
+  previewUrl?: string
+  title: string
+  url?: string
+}
+
+interface AppleMusicChartsResponse {
+  items: AppleMusicChartItem[]
+  nextPage?: number
+  page: number
+}
+
 interface BlenderPlaylistItem {
   description?: string
   duration?: number
@@ -57,9 +97,48 @@ interface BlenderStreamCaption {
   url: string
 }
 
+export const APPLE_MUSIC_CHARTS_PLAYLIST_ID = "apple-music-charts"
+
 const BLENDER_OPEN_FILMS_PLAYLIST_ID = "blender-open-films"
 
 const BLENDER_API_BASE_URL = "https://limeplay.winoffrg.workers.dev/api/blender"
+const APPLE_MUSIC_API_BASE_URL =
+  "https://limeplay.winoffrg.workers.dev/api/catalog/am"
+const BLENDER_STREAM_TIMEOUT_MS = 10_000
+const DEFAULT_APPLE_MUSIC_LOCALE = "en-US"
+const DEFAULT_APPLE_MUSIC_STOREFRONT = "us"
+
+const BlenderOpenFilmImagesSchema = z.object({
+  backdrop: z.string().optional(),
+  logo: z.string().optional(),
+  poster: z.string().optional(),
+})
+
+const BlenderStreamCaptionSchema = z.object({
+  kind: z
+    .enum(["captions", "chapters", "descriptions", "metadata", "subtitles"])
+    .optional(),
+  label: z.string(),
+  language: z.string(),
+  mimeType: z.string().optional(),
+  url: z.string(),
+})
+
+const BlenderStreamResponseSchema = z.object({
+  captions: z.array(BlenderStreamCaptionSchema).optional(),
+  description: z.string().optional(),
+  duration: z.number().optional(),
+  id: z.string(),
+  images: BlenderOpenFilmImagesSchema.optional(),
+  links: z.record(z.string(), z.string().optional()).optional(),
+  playback: z.object({
+    hls: z.string(),
+    mimeType: z.string().optional(),
+  }),
+  subtitle: z.string().optional(),
+  title: z.string(),
+  year: z.number().optional(),
+})
 
 const STREAM_PANEL_PLAYLIST_PRESETS: StreamPanelPlaylistPreset[] = [
   {
@@ -69,6 +148,12 @@ const STREAM_PANEL_PLAYLIST_PRESETS: StreamPanelPlaylistPreset[] = [
     name: "Blender Open Films",
     type: "video",
   },
+  {
+    description: "Top songs from Apple Music for your region",
+    id: APPLE_MUSIC_CHARTS_PLAYLIST_ID,
+    name: "Apple Music Charts",
+    type: "audio",
+  },
 ]
 
 export async function addBlenderCaptions(
@@ -77,7 +162,7 @@ export async function addBlenderCaptions(
 ): Promise<void> {
   if (!stream.captions || stream.captions.length === 0) return
 
-  await Promise.all(
+  const captionResults = await Promise.allSettled(
     stream.captions.map((caption) =>
       player.addTextTrackAsync(
         caption.url,
@@ -89,31 +174,46 @@ export async function addBlenderCaptions(
       )
     )
   )
+
+  captionResults.forEach((result, index) => {
+    if (result.status === "fulfilled") return
+
+    const caption = stream.captions?.[index]
+    console.warn("Failed to add Blender caption track:", {
+      error: result.reason,
+      label: caption?.label,
+      url: caption?.url,
+    })
+  })
 }
 
 export async function fetchBlenderStream(
   assetId: string,
   signal?: AbortSignal
 ): Promise<BlenderStreamResponse> {
+  const combinedSignal = createTimeoutSignal(signal, BLENDER_STREAM_TIMEOUT_MS)
   const response = await fetch(`${BLENDER_API_BASE_URL}/stream/${assetId}`, {
-    signal,
+    signal: combinedSignal,
   })
 
   if (!response.ok) {
     throw new Error(`Failed to fetch Blender stream: ${response.statusText}`)
   }
 
-  return (await response.json()) as BlenderStreamResponse
+  return BlenderStreamResponseSchema.parse(await response.json())
 }
 
 export async function fetchPlaylistPresetAssets(
   playlistId: string,
   signal?: AbortSignal
 ): Promise<Asset[]> {
+  if (playlistId === APPLE_MUSIC_CHARTS_PLAYLIST_ID) {
+    return fetchAppleMusicChartAssets(signal)
+  }
+
   if (playlistId !== BLENDER_OPEN_FILMS_PLAYLIST_ID) {
     throw new Error(`Unknown playlist preset "${playlistId}".`)
   }
-
   const response = await fetch(`${BLENDER_API_BASE_URL}/playlist`, { signal })
   if (!response.ok) {
     throw new Error(`Failed to fetch Blender playlist: ${response.statusText}`)
@@ -138,6 +238,104 @@ export function isBlenderOpenFilmAsset(
   return "source" in asset && asset.source === "blender-open-film"
 }
 
+function createTimeoutSignal(
+  signal: AbortSignal | undefined,
+  timeoutMs: number
+): AbortSignal | undefined {
+  if (typeof AbortSignal.timeout !== "function") return signal
+
+  const timeoutSignal = AbortSignal.timeout(timeoutMs)
+  if (!signal) return timeoutSignal
+  return AbortSignal.any([signal, timeoutSignal])
+}
+
+async function fetchAppleMusicChartAssets(
+  signal?: AbortSignal
+): Promise<AppleMusicChartAsset[]> {
+  const { locale, storefront } = getAppleMusicLocaleHeaders()
+  const response = await fetch(`${APPLE_MUSIC_API_BASE_URL}/charts?page=1`, {
+    headers: {
+      "x-locale": locale,
+      "x-storefront": storefront,
+    },
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch Apple Music charts: ${response.statusText}`
+    )
+  }
+
+  const chart = (await response.json()) as AppleMusicChartsResponse
+  return chart.items
+    .filter((item) => Boolean(item.previewUrl))
+    .map(toAppleMusicChartAsset)
+}
+
+function getAppleMusicLocaleHeaders(): { locale: string; storefront: string } {
+  const locale = getUserLocale()
+  const country = getLocaleCountry(locale)
+
+  return {
+    locale,
+    storefront: country?.toLowerCase() ?? DEFAULT_APPLE_MUSIC_STOREFRONT,
+  }
+}
+
+function getLocaleCountry(locale: string): string | undefined {
+  try {
+    const parsedLocale = new Intl.Locale(locale)
+    return parsedLocale.region ?? parsedLocale.maximize().region
+  } catch {
+    return locale.match(/[-_]([A-Za-z]{2})\b/)?.[1]?.toUpperCase()
+  }
+}
+
+function getUserLocale(): string {
+  const browserLocale =
+    typeof navigator === "undefined"
+      ? undefined
+      : (navigator.languages.find(Boolean) ?? navigator.language)
+
+  const resolvedLocale =
+    browserLocale ?? Intl.DateTimeFormat().resolvedOptions().locale
+
+  return normalizeLocale(resolvedLocale)
+}
+
+function normalizeLocale(locale: string | undefined): string {
+  if (!locale) return DEFAULT_APPLE_MUSIC_LOCALE
+
+  const normalizedLocale = locale.replaceAll("_", "-")
+  try {
+    return (
+      Intl.getCanonicalLocales(normalizedLocale)[0] ??
+      DEFAULT_APPLE_MUSIC_LOCALE
+    )
+  } catch {
+    return DEFAULT_APPLE_MUSIC_LOCALE
+  }
+}
+
+function toAppleMusicChartAsset(
+  item: AppleMusicChartItem
+): AppleMusicChartAsset {
+  return {
+    albumName: item.albumName,
+    artistName: item.artistName,
+    description: item.albumName,
+    duration: item.durationMs,
+    genre: item.artistName,
+    id: item.id,
+    poster: item.artwork?.url,
+    source: "apple-music-chart",
+    src: item.previewUrl,
+    title: item.title,
+    url: item.url,
+  }
+}
+
 function toBlenderOpenFilmAsset(
   item: BlenderPlaylistItem
 ): BlenderOpenFilmAsset {
diff --git a/apps/www/components/stream-panel/custom-overlay.tsx b/apps/www/components/stream-panel/custom-overlay.tsx
index e3de43af..1821a2e1 100644
--- a/apps/www/components/stream-panel/custom-overlay.tsx
+++ b/apps/www/components/stream-panel/custom-overlay.tsx
@@ -24,14 +24,18 @@ export function CustomOverlay({
   placement,
   show,
 }: CustomOverlayProps) {
-  const store = useStreamPanelStore()
+  const customSrc = useStreamPanelStore((s) => s.customSrc)
+  const customConfig = useStreamPanelStore((s) => s.customConfig)
+  const setCustomSrc = useStreamPanelStore((s) => s.setCustomSrc)
+  const setCustomConfig = useStreamPanelStore((s) => s.setCustomConfig)
+  const saveStream = useStreamPanelStore((s) => s.saveStream)
   const [urlError, setUrlError] = useState(false)
   const [configError, setConfigError] = useState(false)
   const [showSave, setShowSave] = useState(false)
   const [saveName, setSaveName] = useState("")
 
   const isValidUrl = React.useMemo(() => {
-    const src = store.customSrc.trim()
+    const src = customSrc.trim()
     if (!src) return false
     try {
       const url = new URL(src)
@@ -39,10 +43,10 @@ export function CustomOverlay({
     } catch {
       return false
     }
-  }, [store.customSrc])
+  }, [customSrc])
 
   const isValidConfig = React.useMemo(() => {
-    const config = store.customConfig.trim()
+    const config = customConfig.trim()
     if (!config) return true
     try {
       JSON.parse(config)
@@ -50,13 +54,13 @@ export function CustomOverlay({
     } catch {
       return false
     }
-  }, [store.customConfig])
+  }, [customConfig])
 
   const canLoad = isValidUrl && isValidConfig
   const canSave = canLoad && saveName.trim().length > 0
 
   const handleUrlChange = (value: string) => {
-    store.setCustomSrc(value)
+    setCustomSrc(value)
     if (value.trim()) {
       try {
         const url = new URL(value.trim())
@@ -70,7 +74,7 @@ export function CustomOverlay({
   }
 
   const handleConfigChange = (value: string) => {
-    store.setCustomConfig(value)
+    setCustomConfig(value)
     if (value.trim()) {
       try {
         JSON.parse(value.trim())
@@ -88,7 +92,7 @@ export function CustomOverlay({
     try {
       const parsed = JSON.parse(pasted)
       e.preventDefault()
-      store.setCustomConfig(JSON.stringify(parsed, null, 2))
+      setCustomConfig(JSON.stringify(parsed, null, 2))
       setConfigError(false)
     } catch {
       // not valid JSON, let default paste happen
@@ -97,15 +101,15 @@ export function CustomOverlay({
 
   const handleLoad = () => {
     if (!canLoad) return
-    onLoad(store.customSrc.trim(), store.customConfig.trim() || undefined)
+    onLoad(customSrc.trim(), customConfig.trim() || undefined)
   }
 
   const handleSave = () => {
     if (!canSave) return
-    store.saveStream({
-      config: store.customConfig.trim() || undefined,
+    saveStream({
+      config: customConfig.trim() || undefined,
       name: saveName.trim(),
-      src: store.customSrc.trim(),
+      src: customSrc.trim(),
     })
     setSaveName("")
     setShowSave(false)
@@ -137,7 +141,7 @@ export function CustomOverlay({
             id="custom-stream-url"
             onChange={(e) => handleUrlChange(e.target.value)}
             placeholder="https://example.com/stream.m3u8"
-            value={store.customSrc}
+            value={customSrc}
           />
           {urlError && (
             <p className="text-sm text-destructive">
@@ -172,7 +176,7 @@ export function CustomOverlay({
             onChange={(e) => handleConfigChange(e.target.value)}
             onPaste={handleConfigPaste}
             placeholder={'{\n  "drm": {\n    "servers": {}\n  }\n}'}
-            value={store.customConfig}
+            value={customConfig}
           />
           {configError && (
             <p className="text-sm text-destructive">Invalid JSON format</p>
diff --git a/apps/www/components/stream-panel/panel-popover.tsx b/apps/www/components/stream-panel/panel-popover.tsx
index 458ee868..ecbef359 100644
--- a/apps/www/components/stream-panel/panel-popover.tsx
+++ b/apps/www/components/stream-panel/panel-popover.tsx
@@ -56,7 +56,15 @@ export function StreamPanel({
     if (!open) setOverlayStack([])
   }, [open])
 
-  const store = useStreamPanelStore()
+  const muted = useStreamPanelStore((s) => s.muted)
+  const autoplay = useStreamPanelStore((s) => s.autoplay)
+  const savedStreams = useStreamPanelStore((s) => s.savedStreams)
+  const contentSelection = useStreamPanelStore(
+    (s) => s.contentSelections[playerType]
+  )
+  const setMuted = useStreamPanelStore((s) => s.setMuted)
+  const setAutoplay = useStreamPanelStore((s) => s.setAutoplay)
+  const setContentSelection = useStreamPanelStore((s) => s.setContentSelection)
   const presets = getPresetsForType(playerType)
   const streamPresets = useMemo(
     () => presets.filter((preset) => preset.group !== "Live"),
@@ -70,7 +78,6 @@ export function StreamPanel({
     () => getPlaylistPresetsForType(playerType),
     [playerType]
   )
-  const contentSelection = store.contentSelections[playerType]
   const groupedStreamPresets = useMemo(
     () => groupPresets(streamPresets),
     [streamPresets]
@@ -103,7 +110,7 @@ export function StreamPanel({
     const preset = presets.find((p) => p.id === presetId)
     if (!preset) return
 
-    store.setContentSelection(playerType, { id: presetId, index: 0, kind })
+    setContentSelection(playerType, { id: presetId, index: 0, kind })
     onPresetChange?.(preset, kind)
   }
 
@@ -185,13 +192,10 @@ export function StreamPanel({
             Media Settings
           </FieldLabel>
 
-          <PanelToggleRow onValueChange={store.setMuted} value={store.muted}>
+          <PanelToggleRow onValueChange={setMuted} value={muted}>
             Muted
           </PanelToggleRow>
-          <PanelToggleRow
-            onValueChange={store.setAutoplay}
-            value={store.autoplay}
-          >
+          <PanelToggleRow onValueChange={setAutoplay} value={autoplay}>
             Autoplay
           </PanelToggleRow>
         </Field>
@@ -207,9 +211,9 @@ export function StreamPanel({
 
         <PanelActionRow
           detail={
-            store.savedStreams.length > 0
-              ? `${store.savedStreams.length} saved stream${
-                  store.savedStreams.length > 1 ? "s" : ""
+            savedStreams.length > 0
+              ? `${savedStreams.length} saved stream${
+                  savedStreams.length > 1 ? "s" : ""
                 }`
               : "Add a custom stream"
           }
@@ -254,7 +258,7 @@ export function StreamPanel({
           <PlaylistsOverlay
             onBack={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
             onSelect={(playlist) => {
-              store.setContentSelection(playerType, {
+              setContentSelection(playerType, {
                 id: playlist.id,
                 index: 0,
                 kind: "playlist",
diff --git a/apps/www/components/stream-panel/use-stream-panel-sync.ts b/apps/www/components/stream-panel/use-stream-panel-sync.ts
index 873715ff..848f4add 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -7,6 +7,7 @@ import type { PlaybackStore } from "@/registry/default/hooks/use-playback"
 
 import {
   addBlenderCaptions,
+  APPLE_MUSIC_CHARTS_PLAYLIST_ID,
   type BlenderStreamResponse,
   fetchBlenderStream,
   fetchPlaylistPresetAssets,
@@ -264,14 +265,9 @@ export function useStreamPanelSync({
       return
     }
 
-    const defaultPreset = getDefaultPresetForType(playerType)
-    if (!defaultPreset) return
+    const defaultSelection = getDefaultSelectionForType(playerType)
+    if (!defaultSelection) return
 
-    const defaultSelection: StreamPanelSelection = {
-      id: defaultPreset.id,
-      index: 0,
-      kind: "stream",
-    }
     setContentSelection(playerType, defaultSelection)
     restoreContentSelection(defaultSelection)
   }, [
@@ -358,6 +354,27 @@ function getDefaultPresetForType(
   return presets[0]
 }
 
+function getDefaultSelectionForType(
+  playerType: StreamPanelPlayerType
+): StreamPanelSelection | undefined {
+  if (playerType === "audio") {
+    return {
+      id: APPLE_MUSIC_CHARTS_PLAYLIST_ID,
+      index: 0,
+      kind: "playlist",
+    }
+  }
+
+  const defaultPreset = getDefaultPresetForType(playerType)
+  if (!defaultPreset) return undefined
+
+  return {
+    id: defaultPreset.id,
+    index: 0,
+    kind: "stream",
+  }
+}
+
 function normalizePlaylistIndex(index: number | undefined, itemCount: number) {
   if (typeof index !== "number" || !Number.isInteger(index) || itemCount <= 0)
     return 0
diff --git a/apps/www/components/stream-panel/use-stream-panel.ts b/apps/www/components/stream-panel/use-stream-panel.ts
index 8018ee3b..f6e88ce2 100644
--- a/apps/www/components/stream-panel/use-stream-panel.ts
+++ b/apps/www/components/stream-panel/use-stream-panel.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 
diff --git a/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx b/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx
index 153e2714..17c25a67 100644
--- a/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx
+++ b/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx
@@ -20,7 +20,7 @@ export function TimeLabels() {
 
 export function TimelineControl() {
   return (
-    <div className="group/timeline absolute -top-2 flex h-4 w-full items-center">
+    <div className="group/timeline absolute -top-2 flex h-4 w-full items-center pr-2">
       <TimelineSlider.Root
         className={cn(
           `
@@ -51,8 +51,8 @@ export function TimelineControl() {
 
         <TimelineSlider.Thumb
           className={`
-            top-auto! bottom-2 flex h-auto w-fit rounded-sm bg-background/90! px-2 py-1 text-xs text-foreground opacity-0 transition-opacity
-            duration-200
+            pointer-events-none top-auto! bottom-2 flex h-auto w-fit rounded-sm bg-background/90! px-2 py-1 text-xs text-foreground opacity-0
+            transition-opacity duration-200
             group-hover/timeline:opacity-100
           `}
           showWithHover
diff --git a/apps/www/registry/default/hooks/use-volume.ts b/apps/www/registry/default/hooks/use-volume.ts
index 83969e1a..4d816791 100644
--- a/apps/www/registry/default/hooks/use-volume.ts
+++ b/apps/www/registry/default/hooks/use-volume.ts
@@ -35,6 +35,12 @@ export interface VolumeStore extends MediaEventSlice<VolumeEvents> {
 
 const BASE_RESET_VOLUME = 0.05
 
+type MediaElementAudioMetadata = HTMLMediaElement & {
+  audioTracks?: { length: number }
+  mozHasAudio?: boolean
+  webkitAudioDecodedByteCount?: number
+}
+
 export function useVolumeStore<TSelected>(
   selector: (state: VolumeStore["volume"]) => TSelected
 ): TSelected {
@@ -111,19 +117,56 @@ export function volumeFeature(): MediaFeature<VolumeStore> {
   }
 }
 
+function getNativeHasAudio(media: HTMLMediaElement): boolean | undefined {
+  const metadata = media as MediaElementAudioMetadata
+
+  if (metadata.audioTracks) {
+    return metadata.audioTracks.length > 0
+  }
+
+  if (typeof metadata.mozHasAudio === "boolean") {
+    return metadata.mozHasAudio
+  }
+
+  if (typeof metadata.webkitAudioDecodedByteCount === "number") {
+    return metadata.webkitAudioDecodedByteCount > 0
+  }
+
+  return undefined
+}
+
 function VolumeSetup() {
   const store = useMediaFeatureApi<VolumeStore>(VOLUME_FEATURE_KEY)
   const events = useMediaEvents<VolumeEvents>()
   const mediaElement = useMediaStore((state) => state.mediaElement)
   const playerInstance = usePlayerStore((state) => state.instance)
 
-  const getHasAudio = React.useCallback(() => {
-    if (!playerInstance) {
-      return true
-    }
+  const getHasAudio = React.useCallback(
+    (media: HTMLMediaElement) => {
+      if (media instanceof HTMLAudioElement) {
+        return true
+      }
+
+      if (!playerInstance) {
+        return true
+      }
+
+      if (playerInstance.getAudioTracks().length > 0) {
+        return true
+      }
 
-    return playerInstance.getAudioTracks().length > 0
-  }, [playerInstance])
+      if (playerInstance.isAudioOnly()) {
+        return true
+      }
+
+      if (playerInstance.isVideoOnly()) {
+        return false
+      }
+
+      return getNativeHasAudio(media) ?? true
+    },
+    [playerInstance]
+  )
 
   React.useEffect(() => {
     if (!mediaElement) return noop
@@ -145,21 +188,31 @@ function VolumeSetup() {
 
     const audioTracksChangedHandler = () => {
       store.setState(({ volume }) => {
-        volume.hasAudio = getHasAudio()
+        volume.hasAudio = getHasAudio(media)
       })
     }
 
     on(media, "volumechange", volumeHandler)
+    on(
+      media,
+      ["loadstart", "loadedmetadata", "loadeddata", "emptied"],
+      audioTracksChangedHandler
+    )
 
     volumeHandler()
+    audioTracksChangedHandler()
 
     if (playerInstance) {
       on(playerInstance, "trackschanged", audioTracksChangedHandler)
-      audioTracksChangedHandler()
     }
 
     return () => {
       off(media, "volumechange", volumeHandler)
+      off(
+        media,
+        ["loadstart", "loadedmetadata", "loadeddata", "emptied"],
+        audioTracksChangedHandler
+      )
       if (playerInstance) {
         off(playerInstance, "trackschanged", audioTracksChangedHandler)
       }

From efaf515105942500deb76fba492e8d1a6f3916c5 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sun, 7 Jun 2026 03:22:54 +0530
Subject: [PATCH 4/7] chore: code cleanups and fix AI comments

---
 apps/www/app/blocks/[[...slug]]/page.tsx      |  42 +-
 .../components/blocks/block-page-shell.tsx    |  64 ++-
 apps/www/components/blocks/preview-pane.tsx   |  33 +-
 apps/www/components/cloud-search.tsx          | 422 ------------------
 apps/www/components/markdown.tsx              | 120 -----
 .../players/video-player/player-container.tsx |   4 +-
 .../stream-panel/content-catalog.ts           |  61 ++-
 .../stream-panel/use-stream-panel-sync.ts     |  19 +-
 apps/www/package.json                         |   7 +-
 .../registry/collection/registry-blocks.ts    |   1 +
 .../video-player/components/media-player.tsx  |  32 +-
 apps/www/registry/default/hooks/use-asset.ts  |   5 +-
 .../registry/default/hooks/use-playback.ts    |  47 +-
 apps/www/registry/default/hooks/use-player.ts |   5 +-
 bun.lock                                      |  97 ++--
 15 files changed, 288 insertions(+), 671 deletions(-)
 delete mode 100644 apps/www/components/cloud-search.tsx
 delete mode 100644 apps/www/components/markdown.tsx

diff --git a/apps/www/app/blocks/[[...slug]]/page.tsx b/apps/www/app/blocks/[[...slug]]/page.tsx
index 5aab357d..1dcd4375 100644
--- a/apps/www/app/blocks/[[...slug]]/page.tsx
+++ b/apps/www/app/blocks/[[...slug]]/page.tsx
@@ -52,32 +52,32 @@ export default async function BlockPage(props: BlockPageProps) {
   const preview = <PreviewComponent />
 
   return (
-    <div className="w-full">
-      <DocsLayout
-        sidebar={{
-          enabled: false,
-        }}
-        tree={blocksSource.getPageTree()}
-      >
-        <main className="relative min-h-svh overflow-x-hidden bg-background">
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
+    <DocsLayout
+      nav={{
+        enabled: false,
+      }}
+      searchToggle={{
+        enabled: false,
+      }}
+      sidebar={{
+        enabled: false,
+      }}
+      tree={blocksSource.getPageTree()}
+    >
+      <main className="relative min-h-svh overflow-x-hidden bg-background">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
                 document.documentElement.dataset.blockPreviewExpanded =
                   new URLSearchParams(window.location.search).get("expanded") === "true"
                     ? "true"
                     : "false";
               `,
-            }}
-          />
-          <BlockPageShell
-            info={info}
-            preview={preview}
-            title={page.data.title}
-          />
-        </main>
-      </DocsLayout>
-    </div>
+          }}
+        />
+        <BlockPageShell info={info} preview={preview} title={page.data.title} />
+      </main>
+    </DocsLayout>
   )
 }
 
diff --git a/apps/www/components/blocks/block-page-shell.tsx b/apps/www/components/blocks/block-page-shell.tsx
index 4674b464..31a0a97d 100644
--- a/apps/www/components/blocks/block-page-shell.tsx
+++ b/apps/www/components/blocks/block-page-shell.tsx
@@ -12,6 +12,9 @@ import {
 } from "@/components/ui/resizable"
 
 const DESKTOP_QUERY = "(min-width: 1024px)"
+const STACKED_QUERY = "(min-width: 768px)"
+
+type BlockPageLayout = "desktop" | "mobile" | "stacked"
 
 type BlockPageShellProps = {
   info: ReactNode
@@ -20,10 +23,28 @@ type BlockPageShellProps = {
 }
 
 export function BlockPageShell({ info, preview, title }: BlockPageShellProps) {
-  const isDesktop = useIsDesktop()
+  const layout = useBlockPageLayout()
+
+  if (layout === "mobile") {
+    return (
+      <div className="w-full">
+        <div className="relative h-[min(70svh,32rem)] min-h-88 w-full overflow-hidden bg-muted">
+          {preview}
+        </div>
+        {info}
+      </div>
+    )
+  }
 
-  if (!isDesktop) {
-    return <div className="w-full">{info}</div>
+  if (layout === "stacked") {
+    return (
+      <div className="w-full">
+        <div className="relative h-[clamp(26rem,70svh,44rem)] min-h-0 w-full overflow-hidden bg-muted">
+          {preview}
+        </div>
+        {info}
+      </div>
+    )
   }
 
   return (
@@ -82,25 +103,38 @@ export function BlockPageShell({ info, preview, title }: BlockPageShellProps) {
   )
 }
 
-function getDesktopSnapshot() {
-  return window.matchMedia(DESKTOP_QUERY).matches
+function getBlockPageLayoutSnapshot(): BlockPageLayout {
+  if (window.matchMedia(DESKTOP_QUERY).matches) return "desktop"
+  if (window.matchMedia(STACKED_QUERY).matches) return "stacked"
+
+  return "mobile"
 }
 
-function getServerDesktopSnapshot() {
-  return false
+function getServerBlockPageLayoutSnapshot(): BlockPageLayout {
+  return "mobile"
 }
 
-function subscribeToDesktopChange(onStoreChange: () => void) {
-  const mediaQueryList = window.matchMedia(DESKTOP_QUERY)
-  mediaQueryList.addEventListener("change", onStoreChange)
+function subscribeToBlockPageLayoutChange(onStoreChange: () => void) {
+  const mediaQueryLists = [
+    window.matchMedia(DESKTOP_QUERY),
+    window.matchMedia(STACKED_QUERY),
+  ]
 
-  return () => mediaQueryList.removeEventListener("change", onStoreChange)
+  mediaQueryLists.forEach((mediaQueryList) => {
+    mediaQueryList.addEventListener("change", onStoreChange)
+  })
+
+  return () => {
+    mediaQueryLists.forEach((mediaQueryList) => {
+      mediaQueryList.removeEventListener("change", onStoreChange)
+    })
+  }
 }
 
-function useIsDesktop() {
+function useBlockPageLayout() {
   return useSyncExternalStore(
-    subscribeToDesktopChange,
-    getDesktopSnapshot,
-    getServerDesktopSnapshot
+    subscribeToBlockPageLayoutChange,
+    getBlockPageLayoutSnapshot,
+    getServerBlockPageLayoutSnapshot
   )
 }
diff --git a/apps/www/components/blocks/preview-pane.tsx b/apps/www/components/blocks/preview-pane.tsx
index dd05462e..dbf4dd57 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { domAnimation, LazyMotion, m } from "motion/react"
-import { usePathname, useRouter } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import React, { useCallback, useLayoutEffect, useState } from "react"
 
 import { StreamPanelProvider } from "@/components/stream-panel"
@@ -21,9 +21,9 @@ export function BlockPreviewWithToolbar({
 }) {
   const pathname = usePathname()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const [expanded, setExpanded] = useState(() => {
-    if (typeof window === "undefined") return false
-    return getExpandedFromUrl()
+    return searchParams.get(EXPANDED_QUERY_PARAM) === "true"
   })
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
@@ -35,7 +35,7 @@ export function BlockPreviewWithToolbar({
 
   const updateExpandedQuery = useCallback(
     (nextExpanded: boolean) => {
-      const nextSearchParams = new URLSearchParams(window.location.search)
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
       if (nextExpanded) {
         nextSearchParams.set(EXPANDED_QUERY_PARAM, "true")
       } else {
@@ -47,7 +47,7 @@ export function BlockPreviewWithToolbar({
         scroll: false,
       })
     },
-    [pathname, router]
+    [pathname, router, searchParams]
   )
 
   const handleExpandToggle = useCallback(() => {
@@ -63,8 +63,8 @@ export function BlockPreviewWithToolbar({
   }, [])
 
   useLayoutEffect(() => {
-    setExpanded(getExpandedFromUrl())
-  }, [pathname])
+    setExpanded(searchParams.get(EXPANDED_QUERY_PARAM) === "true")
+  }, [pathname, searchParams])
 
   // DEV: This controls the left doc section to be hidden when preview is expanded
   useLayoutEffect(() => {
@@ -82,7 +82,10 @@ export function BlockPreviewWithToolbar({
         <m.div
           animate={{ opacity: 1, scale: 1 }}
           className={cn(
-            "z-40 overflow-hidden p-4",
+            `
+              z-40 overflow-hidden
+              lg:p-4
+            `,
             expanded
               ? `
                 fixed inset-0 bg-background
@@ -94,7 +97,12 @@ export function BlockPreviewWithToolbar({
           transition={{ damping: 35, stiffness: 300, type: "spring" }}
         >
           <div className="flex size-full flex-col">
-            <div className="relative flex flex-1 flex-col overflow-hidden rounded-2xl bg-muted">
+            <div
+              className="
+                relative flex flex-1 flex-col overflow-hidden bg-muted
+                lg:rounded-2xl
+              "
+            >
               <div
                 className="relative flex flex-1 items-center justify-center overflow-hidden"
                 key={reloadKey}
@@ -117,10 +125,3 @@ export function BlockPreviewWithToolbar({
     </StreamPanelProvider>
   )
 }
-
-function getExpandedFromUrl() {
-  return (
-    new URLSearchParams(window.location.search).get(EXPANDED_QUERY_PARAM) ===
-    "true"
-  )
-}
diff --git a/apps/www/components/cloud-search.tsx b/apps/www/components/cloud-search.tsx
deleted file mode 100644
index 55ffc992..00000000
--- a/apps/www/components/cloud-search.tsx
+++ /dev/null
@@ -1,422 +0,0 @@
-"use client"
-
-import type { z } from "zod"
-
-import { type UIMessage, useChat, type UseChatHelpers } from "@ai-sdk/react"
-import { Presence } from "@radix-ui/react-presence"
-import { DefaultChatTransport } from "ai"
-import Link from "fumadocs-core/link"
-import { Loader2, MessageCircleIcon, RefreshCw, Send, X } from "lucide-react"
-import {
-  type ComponentProps,
-  createContext,
-  type SyntheticEvent,
-  use,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-
-import type { ProvideLinksToolSchema } from "@/lib/inkeep-qa-schema"
-
-import { Markdown } from "@/components/markdown"
-import { buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-const Context = createContext<null | {
-  chat: UseChatHelpers<UIMessage>
-  open: boolean
-  setOpen: (open: boolean) => void
-}>(null)
-
-function Header() {
-  const { setOpen } = use(Context)!
-
-  return (
-    <div className="sticky top-0 flex items-start gap-2">
-      <div className="flex-1 rounded-xl border bg-fd-card p-3 text-fd-card-foreground">
-        <p className="mb-2 text-sm font-medium">Ask AI</p>
-        <p className="text-xs text-fd-muted-foreground">
-          Powered by{" "}
-          <a
-            href="https://inkeep.com"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            Inkeep AI
-          </a>
-        </p>
-      </div>
-      <button
-        aria-label="Close"
-        className={cn(
-          buttonVariants({
-            className: "rounded-full",
-            size: "icon",
-            variant: "secondary",
-          })
-        )}
-        onClick={() => setOpen(false)}
-        tabIndex={-1}
-      >
-        <X />
-      </button>
-    </div>
-  )
-}
-
-function SearchAIActions() {
-  const { messages, regenerate, setMessages, status } = useChatContext()
-  const isLoading = status === "streaming"
-
-  if (messages.length === 0) return null
-
-  return (
-    <>
-      {!isLoading && messages.at(-1)?.role === "assistant" && (
-        <button
-          className={cn(
-            buttonVariants({
-              className: "rounded-full gap-1.5",
-              size: "sm",
-              variant: "secondary",
-            })
-          )}
-          onClick={() => regenerate()}
-          type="button"
-        >
-          <RefreshCw className="size-4" />
-          Retry
-        </button>
-      )}
-      <button
-        className={cn(
-          buttonVariants({
-            className: "rounded-full",
-            size: "sm",
-            variant: "secondary",
-          })
-        )}
-        onClick={() => setMessages([])}
-        type="button"
-      >
-        Clear Chat
-      </button>
-    </>
-  )
-}
-
-function useChatContext() {
-  return use(Context)!.chat
-}
-
-const StorageKeyInput = "__ai_search_input"
-function Input(props: ComponentProps<"textarea">) {
-  const ref = useRef<HTMLDivElement>(null)
-  const shared = cn("col-start-1 row-start-1", props.className)
-
-  return (
-    <div className="grid flex-1">
-      <textarea
-        id="nd-ai-input"
-        {...props}
-        className={cn(
-          `
-            resize-none bg-transparent
-            placeholder:text-fd-muted-foreground
-            focus-visible:outline-none
-          `,
-          shared
-        )}
-      />
-      <div className={cn(shared, "invisible break-all")} ref={ref}>
-        {`${props.value?.toString() ?? ""}\n`}
-      </div>
-    </div>
-  )
-}
-
-function List(props: Omit<ComponentProps<"div">, "dir">) {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!containerRef.current) return
-    function callback() {
-      const container = containerRef.current
-      if (!container) return
-
-      container.scrollTo({
-        behavior: "instant",
-        top: container.scrollHeight,
-      })
-    }
-
-    const observer = new ResizeObserver(callback)
-    callback()
-
-    const element = containerRef.current.firstElementChild
-
-    if (element) {
-      observer.observe(element)
-    }
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  return (
-    <div
-      ref={containerRef}
-      {...props}
-      className={cn(
-        "fd-scroll-container flex min-w-0 flex-col overflow-y-auto",
-        props.className
-      )}
-    >
-      {props.children}
-    </div>
-  )
-}
-
-function SearchAIInput(props: ComponentProps<"form">) {
-  const { sendMessage, status, stop } = useChatContext()
-  const [input, setInput] = useState(
-    () => localStorage.getItem(StorageKeyInput) ?? ""
-  )
-  const isLoading = status === "streaming" || status === "submitted"
-  const onStart = (e?: SyntheticEvent) => {
-    e?.preventDefault()
-    void sendMessage({ text: input })
-    setInput("")
-  }
-
-  localStorage.setItem(StorageKeyInput, input)
-
-  useEffect(() => {
-    if (isLoading) document.getElementById("nd-ai-input")?.focus()
-  }, [isLoading])
-
-  return (
-    <form
-      {...props}
-      className={cn("flex items-start pe-2", props.className)}
-      onSubmit={onStart}
-    >
-      <Input
-        autoFocus
-        className="p-3"
-        disabled={status === "streaming" || status === "submitted"}
-        onChange={(e) => {
-          setInput(e.target.value)
-        }}
-        onKeyDown={(event) => {
-          if (!event.shiftKey && event.key === "Enter") {
-            onStart(event)
-          }
-        }}
-        placeholder={isLoading ? "AI is answering..." : "Ask a question"}
-        value={input}
-      />
-      {isLoading ? (
-        <button
-          className={cn(
-            buttonVariants({
-              className: "transition-all rounded-full mt-2 gap-2",
-              variant: "secondary",
-            })
-          )}
-          key="bn"
-          onClick={stop}
-          type="button"
-        >
-          <Loader2 className="size-4 animate-spin text-fd-muted-foreground" />
-          Abort Answer
-        </button>
-      ) : (
-        <button
-          className={cn(
-            buttonVariants({
-              className: "transition-all rounded-full mt-2",
-              variant: "secondary",
-            })
-          )}
-          disabled={input.length === 0}
-          key="bn"
-          type="submit"
-        >
-          <Send className="size-4" />
-        </button>
-      )}
-    </form>
-  )
-}
-
-const roleName: Record<string, string> = {
-  assistant: "fumadocs",
-  user: "you",
-}
-
-export function AISearchTrigger() {
-  const [open, setOpen] = useState(false)
-  const chat = useChat({
-    id: "search",
-    transport: new DefaultChatTransport({
-      api: "/api/chat",
-    }),
-  })
-
-  const onKeyPress = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && open) {
-      setOpen(false)
-      e.preventDefault()
-    }
-
-    if (e.key === "/" && (e.metaKey || e.ctrlKey) && !open) {
-      setOpen(true)
-      e.preventDefault()
-    }
-  }
-
-  const onKeyPressRef = useRef(onKeyPress)
-  onKeyPressRef.current = onKeyPress
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => onKeyPressRef.current(e)
-    window.addEventListener("keydown", listener)
-    return () => window.removeEventListener("keydown", listener)
-  }, [])
-
-  return (
-    <Context value={useMemo(() => ({ chat, open, setOpen }), [chat, open])}>
-      <style>
-        {`
-        @keyframes ask-ai-open {
-          from {
-            translate: 100% 0;
-          }
-        }
-
-        @keyframes ask-ai-close {
-          to {
-            translate: 100% 0;
-            opacity: 0;
-          }
-        }`}
-      </style>
-      <Presence present={open}>
-        <div
-          className={cn(
-            `
-              fixed inset-y-2 z-30 flex flex-col rounded-2xl border bg-fd-popover p-2 text-fd-popover-foreground shadow-lg
-              max-sm:inset-x-2
-              sm:inset-e-2 sm:w-[460px]
-            `,
-            open
-              ? "animate-[ask-ai-open_300ms]"
-              : "animate-[ask-ai-close_300ms]"
-          )}
-        >
-          <Header />
-          <List
-            className="flex-1 overscroll-contain px-3 py-4"
-            style={{
-              maskImage:
-                "linear-gradient(to bottom, transparent, white 1rem, white calc(100% - 1rem), transparent 100%)",
-            }}
-          >
-            <div className="flex flex-col gap-4">
-              {chat.messages
-                .filter((msg) => msg.role !== "system")
-                .map((item) => (
-                  <Message key={item.id} message={item} />
-                ))}
-            </div>
-          </List>
-          <div
-            className={`
-              rounded-xl border bg-fd-card text-fd-card-foreground
-              has-focus-visible:ring-2 has-focus-visible:ring-fd-ring
-            `}
-          >
-            <SearchAIInput />
-            <div
-              className={`
-                flex items-center gap-1.5 p-1
-                empty:hidden
-              `}
-            >
-              <SearchAIActions />
-            </div>
-          </div>
-        </div>
-      </Presence>
-      <button
-        className={cn(
-          `
-            fixed bottom-4 z-20 flex h-10 w-24 items-center gap-3 rounded-2xl border bg-fd-secondary px-2 text-sm font-medium text-fd-muted-foreground
-            shadow-lg transition-[translate,opacity]
-          `,
-          "inset-e-[calc(var(--removed-body-scroll-bar-size,0)+var(--fd-layout-offset)+1rem)]",
-          open && "translate-y-10 opacity-0"
-        )}
-        onClick={() => setOpen(true)}
-      >
-        <MessageCircleIcon className="size-4.5" />
-        Ask AI
-      </button>
-    </Context>
-  )
-}
-
-function Message({
-  message,
-  ...props
-}: ComponentProps<"div"> & { message: UIMessage }) {
-  let markdown = ""
-  let links: z.infer<typeof ProvideLinksToolSchema>["links"] = []
-
-  for (const part of message.parts) {
-    if (part.type === "text") {
-      markdown += part.text
-      continue
-    }
-
-    if (part.type === "tool-provideLinks" && part.input) {
-      links = (part.input as z.infer<typeof ProvideLinksToolSchema>).links
-    }
-  }
-
-  return (
-    <div {...props}>
-      <p
-        className={cn(
-          "mb-1 text-sm font-medium text-fd-muted-foreground",
-          message.role === "assistant" && "text-fd-primary"
-        )}
-      >
-        {roleName[message.role]}
-      </p>
-      <div className="prose text-sm">
-        <Markdown text={markdown} />
-      </div>
-      {links && links.length > 0 && (
-        <div className="mt-2 flex flex-row flex-wrap items-center gap-1">
-          {links.map((item, i) => (
-            <Link
-              className={`
-                block rounded-lg border p-3 text-xs
-                hover:bg-fd-accent hover:text-fd-accent-foreground
-              `}
-              href={item.url}
-              key={i}
-            >
-              <p className="font-medium">{item.title}</p>
-              <p className="text-fd-muted-foreground">Reference {item.label}</p>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/www/components/markdown.tsx b/apps/www/components/markdown.tsx
deleted file mode 100644
index fc67fe70..00000000
--- a/apps/www/components/markdown.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { ElementContent, Root, RootContent } from "hast"
-
-import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock"
-import defaultMdxComponents from "fumadocs-ui/mdx"
-import { toJsxRuntime } from "hast-util-to-jsx-runtime"
-import {
-  Children,
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-  Suspense,
-  use,
-  useDeferredValue,
-} from "react"
-import { Fragment, jsx, jsxs } from "react/jsx-runtime"
-import { remark } from "remark"
-import remarkGfm from "remark-gfm"
-import remarkRehype from "remark-rehype"
-import { visit } from "unist-util-visit"
-
-export interface Processor {
-  process: (content: string) => Promise<ReactNode>
-}
-
-export function rehypeWrapWords() {
-  return (tree: Root) => {
-    visit(tree, ["text", "element"], (node, index, parent) => {
-      if (node.type === "element" && node.tagName === "pre") return "skip"
-      if (node.type !== "text" || !parent || index === undefined) return
-
-      const words = node.value.split(/(?=\s)/)
-
-      // Create new span nodes for each word and whitespace
-      const newNodes: ElementContent[] = words.flatMap((word) => {
-        if (word.length === 0) return []
-
-        return {
-          children: [{ type: "text", value: word }],
-          properties: {
-            class: "animate-fd-fade-in",
-          },
-          tagName: "span",
-          type: "element",
-        }
-      })
-
-      Object.assign(node, {
-        children: newNodes,
-        properties: {},
-        tagName: "span",
-        type: "element",
-      } satisfies RootContent)
-      return "skip"
-    })
-  }
-}
-
-function createProcessor(): Processor {
-  const processor = remark()
-    .use(remarkGfm)
-    .use(remarkRehype)
-    .use(rehypeWrapWords)
-
-  return {
-    async process(content) {
-      const nodes = processor.parse({ value: content })
-      const hast = await processor.run(nodes)
-
-      return toJsxRuntime(hast, {
-        components: {
-          ...defaultMdxComponents,
-          img: undefined, // use JSX
-          pre: Pre,
-        },
-        development: false,
-        Fragment,
-        jsx,
-        jsxs,
-      })
-    },
-  }
-}
-
-function Pre(props: ComponentProps<"pre">) {
-  const code = Children.only(props.children) as ReactElement
-  const codeProps = code.props as ComponentProps<"code">
-  const content = codeProps.children
-  if (typeof content !== "string") return null
-
-  let lang =
-    codeProps.className
-      ?.split(" ")
-      .find((v) => v.startsWith("language-"))
-      ?.slice("language-".length) ?? "text"
-
-  if (lang === "mdx") lang = "md"
-
-  return <DynamicCodeBlock code={content.trimEnd()} lang={lang} />
-}
-
-const processor = createProcessor()
-
-export function Markdown({ text }: { text: string }) {
-  const deferredText = useDeferredValue(text)
-
-  return (
-    <Suspense fallback={<p className="invisible">{text}</p>}>
-      <Renderer text={deferredText} />
-    </Suspense>
-  )
-}
-
-const cache = new Map<string, Promise<ReactNode>>()
-
-function Renderer({ text }: { text: string }) {
-  const result = cache.get(text) ?? processor.process(text)
-  cache.set(text, result)
-
-  return use(result)
-}
diff --git a/apps/www/components/players/video-player/player-container.tsx b/apps/www/components/players/video-player/player-container.tsx
index a36caca3..9d4af1d2 100644
--- a/apps/www/components/players/video-player/player-container.tsx
+++ b/apps/www/components/players/video-player/player-container.tsx
@@ -2,7 +2,7 @@
 
 import type { RefObject } from "react"
 
-import { ChevronDownIcon, MonitorPlayIcon, RotateCw } from "lucide-react"
+import { ChevronDownIcon, MonitorPlayIcon, RotateCwIcon } from "lucide-react"
 import { useRef } from "react"
 import { useFullscreen, useToggle } from "react-use"
 
@@ -143,7 +143,7 @@ function RotateMessage({
           size="sm"
           variant="outline"
         >
-          <RotateCw className={`mr-2 size-3`} />
+          <RotateCwIcon className={`mr-2 size-3`} />
           Rotate
         </Button>
       </div>
diff --git a/apps/www/components/stream-panel/content-catalog.ts b/apps/www/components/stream-panel/content-catalog.ts
index 8c8f899f..654a8536 100644
--- a/apps/www/components/stream-panel/content-catalog.ts
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -67,12 +67,6 @@ interface AppleMusicChartItem {
   url?: string
 }
 
-interface AppleMusicChartsResponse {
-  items: AppleMusicChartItem[]
-  nextPage?: number
-  page: number
-}
-
 interface BlenderPlaylistItem {
   description?: string
   duration?: number
@@ -104,10 +98,40 @@ const BLENDER_OPEN_FILMS_PLAYLIST_ID = "blender-open-films"
 const BLENDER_API_BASE_URL = "https://limeplay.winoffrg.workers.dev/api/blender"
 const APPLE_MUSIC_API_BASE_URL =
   "https://limeplay.winoffrg.workers.dev/api/catalog/am"
+const APPLE_MUSIC_CHARTS_TIMEOUT_MS = 10_000
 const BLENDER_STREAM_TIMEOUT_MS = 10_000
 const DEFAULT_APPLE_MUSIC_LOCALE = "en-US"
 const DEFAULT_APPLE_MUSIC_STOREFRONT = "us"
 
+const AppleMusicArtworkSchema = z.object({
+  bgColor: z.string().optional(),
+  height: z.number().optional(),
+  templateUrl: z.string().optional(),
+  textColor1: z.string().optional(),
+  textColor2: z.string().optional(),
+  textColor3: z.string().optional(),
+  textColor4: z.string().optional(),
+  url: z.string().optional(),
+  width: z.number().optional(),
+})
+
+const AppleMusicChartItemSchema = z.object({
+  albumName: z.string().optional(),
+  artistName: z.string().optional(),
+  artwork: AppleMusicArtworkSchema.optional(),
+  durationMs: z.number().optional(),
+  id: z.string(),
+  previewUrl: z.string().optional(),
+  title: z.string(),
+  url: z.string().optional(),
+})
+
+const AppleMusicChartsResponseSchema = z.object({
+  items: z.array(AppleMusicChartItemSchema),
+  nextPage: z.number().optional(),
+  page: z.number(),
+})
+
 const BlenderOpenFilmImagesSchema = z.object({
   backdrop: z.string().optional(),
   logo: z.string().optional(),
@@ -253,13 +277,18 @@ async function fetchAppleMusicChartAssets(
   signal?: AbortSignal
 ): Promise<AppleMusicChartAsset[]> {
   const { locale, storefront } = getAppleMusicLocaleHeaders()
+  const combinedSignal = createTimeoutSignal(
+    signal,
+    APPLE_MUSIC_CHARTS_TIMEOUT_MS
+  )
   const response = await fetch(`${APPLE_MUSIC_API_BASE_URL}/charts?page=1`, {
     headers: {
       "x-locale": locale,
       "x-storefront": storefront,
     },
-    signal,
+    signal: combinedSignal,
   })
+  throwIfAborted(combinedSignal)
 
   if (!response.ok) {
     throw new Error(
@@ -267,8 +296,15 @@ async function fetchAppleMusicChartAssets(
     )
   }
 
-  const chart = (await response.json()) as AppleMusicChartsResponse
-  return chart.items
+  const responseJson: unknown = await response.json()
+  throwIfAborted(combinedSignal)
+
+  const chart = AppleMusicChartsResponseSchema.safeParse(responseJson)
+  if (!chart.success) {
+    throw new Error(`Invalid Apple Music charts response: ${chart.error}`)
+  }
+
+  return chart.data.items
     .filter((item) => Boolean(item.previewUrl))
     .map(toAppleMusicChartAsset)
 }
@@ -318,6 +354,12 @@ function normalizeLocale(locale: string | undefined): string {
   }
 }
 
+function throwIfAborted(signal?: AbortSignal): void {
+  if (!signal?.aborted) return
+
+  throw new DOMException("Aborted", "AbortError")
+}
+
 function toAppleMusicChartAsset(
   item: AppleMusicChartItem
 ): AppleMusicChartAsset {
@@ -326,7 +368,6 @@ function toAppleMusicChartAsset(
     artistName: item.artistName,
     description: item.albumName,
     duration: item.durationMs,
-    genre: item.artistName,
     id: item.id,
     poster: item.artwork?.url,
     source: "apple-music-chart",
diff --git a/apps/www/components/stream-panel/use-stream-panel-sync.ts b/apps/www/components/stream-panel/use-stream-panel-sync.ts
index 848f4add..d49ac601 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -124,10 +124,7 @@ export function useStreamPanelSync({
         })
       },
       onLoadError: (_asset, error) => {
-        playbackApi.setState(({ playback }) => {
-          playback.status = "error"
-          playback.error = error
-        })
+        playbackApi.getState().playback.setError(error)
         return "stop"
       },
     }),
@@ -163,12 +160,11 @@ export function useStreamPanelSync({
       if (config) {
         const parseResult = safeParseJson(config)
         if (!parseResult.ok) {
-          playbackApi.setState(({ playback }) => {
-            playback.status = "error"
-            playback.error = new Error(
-              "Invalid JSON config: " + parseResult.error
+          playbackApi
+            .getState()
+            .playback.setError(
+              new Error("Invalid JSON config: " + parseResult.error)
             )
-          })
           return null
         }
         parsedConfig = parseResult.value
@@ -212,10 +208,7 @@ export function useStreamPanelSync({
           if (error instanceof DOMException && error.name === "AbortError")
             return
 
-          playbackApi.setState(({ playback }) => {
-            playback.status = "error"
-            playback.error = error
-          })
+          playbackApi.getState().playback.setError(error)
         })
     },
     [loadPlaylist, playbackApi, playerType, setContentSelection]
diff --git a/apps/www/package.json b/apps/www/package.json
index b5311c39..d404a4d8 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -41,10 +41,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "fumadocs-core": "16.8.4",
-    "fumadocs-mdx": "14.3.1",
+    "fumadocs-core": "16.9.3",
+    "fumadocs-mdx": "15.0.11",
     "fumadocs-typescript": "^5.2.6",
-    "fumadocs-ui": "16.8.4",
+    "fumadocs-ui": "16.9.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "immer": "^11.1.8",
     "jotai": "^2.20.0",
@@ -69,7 +69,6 @@
     "tailwind-merge": "^3.6.0",
     "ts-morph": "27.0.2",
     "tw-animate-css": "^1.4.0",
-    "unist-util-visit": "^5.1.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.13"
   },
diff --git a/apps/www/registry/collection/registry-blocks.ts b/apps/www/registry/collection/registry-blocks.ts
index 13dee764..54e0fb36 100644
--- a/apps/www/registry/collection/registry-blocks.ts
+++ b/apps/www/registry/collection/registry-blocks.ts
@@ -100,6 +100,7 @@ export const blocks: Registry["items"] = [
       "use-player",
       "use-track-events",
       "utils",
+      "error-screen",
       "fallback-poster",
       "timeline-labels",
       "limeplay-logo",
diff --git a/apps/www/registry/default/blocks/video-player/components/media-player.tsx b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
index 300e7105..ca7f98e3 100644
--- a/apps/www/registry/default/blocks/video-player/components/media-player.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
@@ -1,3 +1,6 @@
+"use client"
+
+import { RotateCwIcon } from "lucide-react"
 import React from "react"
 
 import type {
@@ -9,9 +12,13 @@ import type {
 
 import { cn } from "@/lib/utils"
 import { BottomControls } from "@/registry/default/blocks/video-player/components/bottom-controls"
+import { Button } from "@/registry/default/blocks/video-player/components/button"
 import { MediaProvider } from "@/registry/default/blocks/video-player/lib/media-kit"
+import { useAsset } from "@/registry/default/hooks/use-asset"
+import { usePlaybackStore } from "@/registry/default/hooks/use-playback"
 import { PlaybackSourceController } from "@/registry/default/hooks/use-playback-source"
 import { CaptionsContainer } from "@/registry/default/ui/captions"
+import { ErrorScreen } from "@/registry/default/ui/error-screen"
 import { FallbackPoster } from "@/registry/default/ui/fallback-poster"
 import { LimeplayLogo } from "@/registry/default/ui/limeplay-logo"
 import { Media } from "@/registry/default/ui/media"
@@ -77,6 +84,7 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
         />
         <RootContainer className={cn("m-auto w-full", className)} ref={ref}>
           <Layout.PlayerContainer>
+            <PlayerErrorScreen />
             <FallbackPoster>
               <LimeplayLogo />
             </FallbackPoster>
@@ -87,6 +95,7 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
               as="video"
               className="size-full object-cover"
             />
+            {children}
             <Layout.ControlsOverlayContainer />
             <Layout.ControlsContainer className="pb-6">
               <CaptionsContainer />
@@ -94,10 +103,31 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
             </Layout.ControlsContainer>
           </Layout.PlayerContainer>
         </RootContainer>
-        {children}
       </MediaProvider>
     )
   }
 )
 
 VideoPlayer.displayName = "VideoPlayer"
+
+function PlayerErrorScreen() {
+  const error = usePlaybackStore((s) => s.error)
+  const status = usePlaybackStore((s) => s.status)
+  const { currentItem, loadAsset } = useAsset<VideoPlayerAsset>()
+
+  const retryStream = React.useCallback(() => {
+    if (!currentItem) return
+    void loadAsset(currentItem.properties)
+  }, [currentItem, loadAsset])
+
+  if (status !== "error") return null
+
+  return (
+    <ErrorScreen className="rounded-lg" error={error}>
+      <Button onClick={retryStream} size="sm">
+        <RotateCwIcon />
+        Retry
+      </Button>
+    </ErrorScreen>
+  )
+}
diff --git a/apps/www/registry/default/hooks/use-asset.ts b/apps/www/registry/default/hooks/use-asset.ts
index aba4ad9c..a2ff894f 100644
--- a/apps/www/registry/default/hooks/use-asset.ts
+++ b/apps/www/registry/default/hooks/use-asset.ts
@@ -287,7 +287,7 @@ export function assetFeature(): MediaFeature<
             asset.loadGeneration = generation
           })
 
-          media.pause()
+          get().playback.pause()
 
           try {
             const preloadManagers = get().player.preloadManagers as Map<
@@ -449,6 +449,7 @@ export function assetFeature(): MediaFeature<
                 asset.previousError = null
                 asset.retryCount = 0
               })
+              get().playback.setError(normalizedError)
               return false
             }
 
@@ -458,6 +459,8 @@ export function assetFeature(): MediaFeature<
                 asset.retryCount = 0
               })
               playlist.next()
+            } else {
+              get().playback.setError(normalizedError)
             }
             return false
           }
diff --git a/apps/www/registry/default/hooks/use-playback.ts b/apps/www/registry/default/hooks/use-playback.ts
index 0b350f45..45a17b3b 100644
--- a/apps/www/registry/default/hooks/use-playback.ts
+++ b/apps/www/registry/default/hooks/use-playback.ts
@@ -59,6 +59,7 @@ export interface PlaybackStore extends MediaEventSlice<PlaybackEvents> {
     play: () => Promise<void>
     readyState: MediaReadyState
     restart: () => void
+    setError: (error: unknown) => void
     setLoop: (loop: boolean) => void
     status: MediaStatus
     toggleLoop: () => void
@@ -68,7 +69,7 @@ export interface PlaybackStore extends MediaEventSlice<PlaybackEvents> {
 
 export function playbackFeature(): MediaFeature<PlaybackStore> {
   return {
-    createSlice: (set, get) => ({
+    createSlice: (set, get, _store, events) => ({
       [PLAYBACK_FEATURE_KEY]: {
         canPlay: false,
         canPlayThrough: false,
@@ -99,10 +100,7 @@ export function playbackFeature(): MediaFeature<PlaybackStore> {
             await media.play()
           } catch (error: unknown) {
             console.error("Error playing media", error)
-            set(({ media: mediaState, playback }) => {
-              playback.status = "error"
-              mediaState.idle = false
-            })
+            get().playback.setError(error)
             throw error
           }
         },
@@ -121,6 +119,40 @@ export function playbackFeature(): MediaFeature<PlaybackStore> {
             playback.ended = false
           })
         },
+        setError: (error) => {
+          const media = get().media.mediaElement
+          const prevStatus = get().playback.status
+
+          if (media && !media.paused) {
+            media.pause()
+          }
+
+          set(({ media: mediaState, playback }) => {
+            mediaState.idle = false
+            playback.error = error
+            playback.paused = true
+            playback.status = "error"
+
+            if (media) {
+              playback.canPlay =
+                media.readyState >= MediaReadyState.HAVE_FUTURE_DATA
+              playback.canPlayThrough =
+                media.readyState >= MediaReadyState.HAVE_ENOUGH_DATA
+              playback.ended = media.ended
+              playback.loop = media.loop
+              playback.networkState = media.networkState
+              playback.readyState = media.readyState as MediaReadyState
+            }
+          })
+
+          if (prevStatus === "buffering") {
+            events.emit("buffering", { isBuffering: false })
+          }
+
+          if (prevStatus !== "error") {
+            events.emit("statuschange", { prevStatus, status: "error" })
+          }
+        },
         setLoop: (loop) => {
           const media = get().media.mediaElement
           if (!media) return
@@ -324,10 +356,7 @@ function PlaybackSetup() {
     }
 
     const errorHandler = () => {
-      store.setState(({ playback }) => {
-        playback.error = media.error
-        playback.status = "error"
-      })
+      store.getState().playback.setError(media.error)
     }
 
     on(media, "loadstart", loadStartHandler)
diff --git a/apps/www/registry/default/hooks/use-player.ts b/apps/www/registry/default/hooks/use-player.ts
index 1646bc70..d1c51727 100644
--- a/apps/www/registry/default/hooks/use-player.ts
+++ b/apps/www/registry/default/hooks/use-player.ts
@@ -360,10 +360,7 @@ function PlayerSetup() {
       const detail = (event as CustomEvent).detail as shaka.util.Error
       if (isLoadInterrupted(detail)) return
 
-      store.setState(({ playback }) => {
-        playback.status = "error"
-        playback.error = detail
-      })
+      store.getState().playback.setError(detail)
       events.emit("playbackerror", { error: detail as unknown as Error })
     }
 
diff --git a/bun.lock b/bun.lock
index f28db37e..725c53df 100644
--- a/bun.lock
+++ b/bun.lock
@@ -41,10 +41,10 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
-        "fumadocs-core": "16.8.4",
-        "fumadocs-mdx": "14.3.1",
+        "fumadocs-core": "16.9.3",
+        "fumadocs-mdx": "15.0.11",
         "fumadocs-typescript": "^5.2.6",
-        "fumadocs-ui": "16.8.4",
+        "fumadocs-ui": "16.9.3",
         "hast-util-to-jsx-runtime": "^2.3.6",
         "immer": "^11.1.8",
         "jotai": "^2.20.0",
@@ -69,7 +69,6 @@
         "tailwind-merge": "^3.6.0",
         "ts-morph": "27.0.2",
         "tw-animate-css": "^1.4.0",
-        "unist-util-visit": "^5.1.0",
         "zod": "^4.4.3",
         "zustand": "^5.0.13",
       },
@@ -539,19 +538,19 @@
 
     "@sec-ant/readable-stream": ["@sec-ant/readable-stream@0.4.1", "", {}, "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg=="],
 
-    "@shikijs/core": ["@shikijs/core@4.0.2", "", { "dependencies": { "@shikijs/primitive": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw=="],
+    "@shikijs/core": ["@shikijs/core@4.2.0", "", { "dependencies": { "@shikijs/primitive": "4.2.0", "@shikijs/types": "4.2.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-Hc87Ab1Ld/vEbZRCbwx344I5v+4RU8CVToUTRkqXL1+TjbuOp9U5Xa0M23V4GEWHxVn+yO5otb+HkQVm3ptWQQ=="],
 
-    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag=="],
+    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@4.2.0", "", { "dependencies": { "@shikijs/types": "4.2.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.6" } }, "sha512-fjETeq1k5ffyXqRgS6+3hpvqseLalp1kjNfRbXpUgWR8FpZ1CmQfiNHovc5lncYjt/Vg5JK/WJEmLahjwMa0og=="],
 
-    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg=="],
+    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@4.2.0", "", { "dependencies": { "@shikijs/types": "4.2.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-hTorK1dffPkpbMUk6Z+828PgRo7d07HbnizoP0hNPFjhxMHctj0Px/qoHeGMYafc6ju+u9iMldN4JbVzNQM++g=="],
 
-    "@shikijs/langs": ["@shikijs/langs@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg=="],
+    "@shikijs/langs": ["@shikijs/langs@4.2.0", "", { "dependencies": { "@shikijs/types": "4.2.0" } }, "sha512-bwrVRlJ0wUhZxAbVdvBbv2TTC9yLsh4C/IO5Ofz0T8MQntgDvyVnkbjw9vi50r1kx7RCIJdnJnjZAwmAsXFLZQ=="],
 
-    "@shikijs/primitive": ["@shikijs/primitive@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw=="],
+    "@shikijs/primitive": ["@shikijs/primitive@4.2.0", "", { "dependencies": { "@shikijs/types": "4.2.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-NOq+DtUkVBJtZMVXL5A0vI0Xk8nvDYaXetFHSJFlOqjDZIVhIPRYFdGkSoElDqNuegikcc3A76SNUa8dTqtAYA=="],
 
-    "@shikijs/themes": ["@shikijs/themes@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA=="],
+    "@shikijs/themes": ["@shikijs/themes@4.2.0", "", { "dependencies": { "@shikijs/types": "4.2.0" } }, "sha512-RX8IHYeLv8Cu2W6ruc3RxUqWn0IYCqSrMBzi/uRGAmfyDNOnNO5BF/Px7o97n4XTpmFTo5GbRaazuOWj+2ak2w=="],
 
-    "@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/types": ["@shikijs/types@4.2.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-VT/MKtlpOhEPZloSH3Pb9WCZEBDoQVMa9jedp5UAwmJOar1DVc9DRODAxmYPW9M93IK4ryuqRejFfmlvlVDemw=="],
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
@@ -1091,13 +1090,13 @@
 
     "fs-extra": ["fs-extra@11.3.2", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A=="],
 
-    "fumadocs-core": ["fumadocs-core@16.8.4", "", { "dependencies": { "@orama/orama": "^3.1.18", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^4.0.2", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3" }, "peerDependencies": { "@mdx-js/mdx": "*", "@mixedbread/sdk": "0.x.x", "@orama/core": "1.x.x", "@oramacloud/client": "2.x.x", "@tanstack/react-router": "1.x.x", "@types/estree-jsx": "*", "@types/hast": "*", "@types/mdast": "*", "@types/react": "*", "algoliasearch": "5.x.x", "flexsearch": "*", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "^0.26.0 || ^0.27.0 || ^1.0.0", "zod": "4.x.x" }, "optionalPeers": ["@mdx-js/mdx", "@mixedbread/sdk", "@orama/core", "@oramacloud/client", "@tanstack/react-router", "@types/estree-jsx", "@types/hast", "@types/mdast", "@types/react", "algoliasearch", "flexsearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-o8N7YocCSdoehR7cTSYv9usvE3F5q0rrnoro3hGRnSI1SdolmeuxTbdfQgebaP61E7wAI4hIWgo7CzImGRT2Tw=="],
+    "fumadocs-core": ["fumadocs-core@16.9.3", "", { "dependencies": { "@orama/orama": "^3.1.18", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^4.1.0", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3" }, "peerDependencies": { "@mdx-js/mdx": "*", "@mixedbread/sdk": "0.x.x", "@orama/core": "1.x.x", "@oramacloud/client": "2.x.x", "@tanstack/react-router": "1.x.x", "@types/estree-jsx": "*", "@types/hast": "*", "@types/mdast": "*", "@types/react": "*", "algoliasearch": "5.x.x", "flexsearch": "*", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "*", "zod": "4.x.x" }, "optionalPeers": ["@mdx-js/mdx", "@mixedbread/sdk", "@orama/core", "@oramacloud/client", "@tanstack/react-router", "@types/estree-jsx", "@types/hast", "@types/mdast", "@types/react", "algoliasearch", "flexsearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-8RVzKnzBJR5o+tJCccY28ntekfMQYBoYiz7alnYb/d9YJc+XpnsINzTl63lQ1eBMZ9gdhm2MqRtgUjh/8rUrbw=="],
 
-    "fumadocs-mdx": ["fumadocs-mdx@14.3.1", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.1.0", "chokidar": "^5.0.0", "esbuild": "^0.28.0", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "picocolors": "^1.1.1", "picomatch": "^4.0.4", "tinyexec": "^1.1.1", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3", "zod": "^4.3.6" }, "peerDependencies": { "@types/mdast": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "^15.0.0 || ^16.0.0", "mdast-util-directive": "*", "next": "^15.3.0 || ^16.0.0", "react": "^19.2.0", "vite": "6.x.x || 7.x.x || 8.x.x" }, "optionalPeers": ["@types/mdast", "@types/mdx", "@types/react", "mdast-util-directive", "next", "react", "vite"], "bin": { "fumadocs-mdx": "dist/bin.js" } }, "sha512-0u2eXvYrZtrJB14y6fDhP0hhxLgmH8JOmRv6IVHALt5MqR9JIJxV5LJYlho8g8CJXRE8w12rVNFZN0rtUVAqGw=="],
+    "fumadocs-mdx": ["fumadocs-mdx@15.0.11", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.1.0", "chokidar": "^5.0.0", "esbuild": "^0.28.0", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.2.0", "mdast-util-mdx": "^3.0.0", "picocolors": "^1.1.1", "picomatch": "^4.0.4", "tinyexec": "^1.2.4", "tinyglobby": "^0.2.17", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3", "zod": "^4.4.3" }, "peerDependencies": { "@types/mdast": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "^16.7.0", "mdast-util-directive": "*", "next": "^15.3.0 || ^16.0.0", "react": "^19.2.0", "rolldown": "*", "vite": "7.x.x || 8.x.x" }, "optionalPeers": ["@types/mdast", "@types/mdx", "@types/react", "mdast-util-directive", "next", "react", "rolldown", "vite"], "bin": { "fumadocs-mdx": "./bin.js" } }, "sha512-XDym6obv+VVqA+MUDpaqgmTuTarrwsvo+5F5erMZQQcSqki9W7CFvqlleKOYBsUdOuXh9B3ZW3QFirdTwNpAeQ=="],
 
     "fumadocs-typescript": ["fumadocs-typescript@5.2.6", "", { "dependencies": { "estree-util-value-to-estree": "^3.5.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "remark": "^15.0.1", "remark-rehype": "^11.1.2", "shiki": "^4.0.2", "ts-morph": "^28.0.0", "unified": "^11.0.5", "unist-util-visit": "^5.1.0" }, "peerDependencies": { "@types/estree": "*", "@types/hast": "*", "@types/mdast": "*", "@types/react": "*", "fumadocs-core": "^16.7.0", "fumadocs-ui": "^16.7.0", "react": "^19.2.0", "react-dom": "^19.2.0" }, "optionalPeers": ["@types/estree", "@types/hast", "@types/mdast", "@types/react", "fumadocs-ui"] }, "sha512-kmidpjbjrzlSbppLTW1m4SF87R3CMu3WhvD1VW8/w5A71uC2nARvfMh2o7bNJRLzjJyq/RO9v8NHYHU/cw+QUQ=="],
 
-    "fumadocs-ui": ["fumadocs-ui@16.8.4", "", { "dependencies": { "@fumadocs/tailwind": "0.0.5", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-direction": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-presence": "^1.1.5", "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", "class-variance-authority": "^0.7.1", "lucide-react": "^1.11.0", "motion": "^12.38.0", "next-themes": "^0.4.6", "react-remove-scroll": "^2.7.2", "rehype-raw": "^7.0.0", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^4.0.2", "tailwind-merge": "^3.5.0", "unist-util-visit": "^5.1.0" }, "peerDependencies": { "@takumi-rs/image-response": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "16.8.4", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0" }, "optionalPeers": ["@takumi-rs/image-response", "@types/mdx", "@types/react", "next"] }, "sha512-KnNtGUT54772Rhafq9qK/5oo+77MoVwR9HEEvGfXz14hsBs4XWikkOqMbgm6Jjx45rUUbVIWU9qVMernPSXG0g=="],
+    "fumadocs-ui": ["fumadocs-ui@16.9.3", "", { "dependencies": { "@fumadocs/tailwind": "0.0.5", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-direction": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-presence": "^1.1.5", "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", "class-variance-authority": "^0.7.1", "lucide-react": "^1.17.0", "motion": "^12.40.0", "next-themes": "^0.4.6", "react-remove-scroll": "^2.7.2", "rehype-raw": "^7.0.0", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^4.1.0", "tailwind-merge": "^3.6.0", "unist-util-visit": "^5.1.0" }, "peerDependencies": { "@takumi-rs/image-response": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "16.9.3", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0" }, "optionalPeers": ["@takumi-rs/image-response", "@types/mdx", "@types/react", "next"] }, "sha512-eoVKj1H+ATut0su+WIoPWBLRqzPMGD0hekIBr4GopWvUg1lS997HL4kP+Leyf+3CYlZtFgyXb6ylbvRLFtEj6Q=="],
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
 
@@ -1327,7 +1326,7 @@
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
-    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+    "js-yaml": ["js-yaml@4.2.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
@@ -1427,7 +1426,7 @@
 
     "lru-cache": ["lru-cache@11.2.2", "", {}, "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg=="],
 
-    "lucide-react": ["lucide-react@1.16.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ=="],
+    "lucide-react": ["lucide-react@1.17.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
@@ -1625,9 +1624,9 @@
 
     "onetime": ["onetime@5.1.2", "", { "dependencies": { "mimic-fn": "^2.1.0" } }, "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="],
 
-    "oniguruma-parser": ["oniguruma-parser@0.12.1", "", {}, "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="],
+    "oniguruma-parser": ["oniguruma-parser@0.12.2", "", {}, "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw=="],
 
-    "oniguruma-to-es": ["oniguruma-to-es@4.3.4", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA=="],
+    "oniguruma-to-es": ["oniguruma-to-es@4.3.6", "", { "dependencies": { "oniguruma-parser": "^0.12.2", "regex": "^6.1.0", "regex-recursion": "^6.0.2" } }, "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA=="],
 
     "open": ["open@11.0.0", "", { "dependencies": { "default-browser": "^5.4.0", "define-lazy-prop": "^3.0.0", "is-in-ssh": "^1.0.0", "is-inside-container": "^1.0.0", "powershell-utils": "^0.1.0", "wsl-utils": "^0.3.0" } }, "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw=="],
 
@@ -1741,7 +1740,7 @@
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
-    "regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
+    "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
 
     "regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
 
@@ -1843,7 +1842,7 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
-    "shiki": ["shiki@4.0.2", "", { "dependencies": { "@shikijs/core": "4.0.2", "@shikijs/engine-javascript": "4.0.2", "@shikijs/engine-oniguruma": "4.0.2", "@shikijs/langs": "4.0.2", "@shikijs/themes": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ=="],
+    "shiki": ["shiki@4.2.0", "", { "dependencies": { "@shikijs/core": "4.2.0", "@shikijs/engine-javascript": "4.2.0", "@shikijs/engine-oniguruma": "4.2.0", "@shikijs/langs": "4.2.0", "@shikijs/themes": "4.2.0", "@shikijs/types": "4.2.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-hjNax6o/ylDy9lefQEaSDtzaT3iVNtZ3WmpQnbuQNoG4xvnSKf2kSKbihZVO4JRG1TTMejs7CmNRYlWgAL66pQ=="],
 
     "side-channel": ["side-channel@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3", "side-channel-list": "^1.0.0", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" } }, "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw=="],
 
@@ -1941,9 +1940,9 @@
 
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
-    "tinyexec": ["tinyexec@1.2.2", "", {}, "sha512-M/Q0B2cp4K7kynaT/vnED1j8TlLY+Pp7C6Wl2bl/7u/F0mUVwdyOpwomQb8JpYLitHUssAJRmLZdMCGsrx7i+g=="],
+    "tinyexec": ["tinyexec@1.2.4", "", {}, "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg=="],
 
-    "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
     "tldts": ["tldts@7.0.19", "", { "dependencies": { "tldts-core": "^7.0.19" }, "bin": { "tldts": "bin/cli.js" } }, "sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA=="],
 
@@ -2017,7 +2016,7 @@
 
     "unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ=="],
 
-    "unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+    "unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
 
     "unist-util-visit-parents": ["unist-util-visit-parents@6.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ=="],
 
@@ -2117,12 +2116,12 @@
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@eslint/eslintrc/js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
     "@mdx-js/mdx/acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
     "@mdx-js/mdx/source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
 
-    "@mdx-js/mdx/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
-
     "@modelcontextprotocol/sdk/ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],
 
     "@modelcontextprotocol/sdk/zod": ["zod@4.2.1", "", {}, "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw=="],
@@ -2189,6 +2188,8 @@
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "@typescript-eslint/typescript-estree/tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+
     "@typescript-eslint/utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.59.3", "", { "dependencies": { "@typescript-eslint/project-service": "8.59.3", "@typescript-eslint/tsconfig-utils": "8.59.3", "@typescript-eslint/types": "8.59.3", "@typescript-eslint/visitor-keys": "8.59.3", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-CbRjVRAf7Lr9Kr8RopKcbY45p2VfmmHrm0ygOCYFi7oU8q19m0Fs/6iHS7kNOmwpp+ob07ZVcAqlxUod9lYdmg=="],
 
     "@typescript-eslint/visitor-keys/@typescript-eslint/types": ["@typescript-eslint/types@8.59.4", "", {}, "sha512-F1o7WJcCq+bc8dwcO/YsSEOudAH8RDtaOhM6wcAQhcUsFhnWQl81JKy48q1hoxAU0qrzM89+31GYh1515Zde3Q=="],
@@ -2207,6 +2208,8 @@
 
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
+    "cosmiconfig/js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
     "css-tree/mdn-data": ["mdn-data@2.0.14", "", {}, "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="],
 
     "esast-util-from-js/acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
@@ -2235,12 +2238,24 @@
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
+    "fumadocs-core/unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
+    "fumadocs-mdx/unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
+    "fumadocs-typescript/shiki": ["shiki@4.0.2", "", { "dependencies": { "@shikijs/core": "4.0.2", "@shikijs/engine-javascript": "4.0.2", "@shikijs/engine-oniguruma": "4.0.2", "@shikijs/langs": "4.0.2", "@shikijs/themes": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ=="],
+
     "fumadocs-typescript/ts-morph": ["ts-morph@28.0.0", "", { "dependencies": { "@ts-morph/common": "~0.29.0", "code-block-writer": "^13.0.3" } }, "sha512-Wp3tnZ2bzwxyTZMtgWVzXDfm7lB1Drz+y9DmmYH/L702PQhPyVrp3pkou3yIz4qjS14GY9kcpmLiOOMvl8oG1g=="],
 
+    "fumadocs-typescript/unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
     "fumadocs-ui/react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
+    "fumadocs-ui/unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
     "glob/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
 
+    "hast-util-raw/unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
     "is-bun-module/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
     "log-symbols/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
@@ -2249,10 +2264,6 @@
 
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
-    "mdast-util-to-hast/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
-
-    "mdast-util-to-markdown/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
-
     "micromark-extension-mdxjs/acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
@@ -2271,8 +2282,6 @@
 
     "radix-ui/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
-    "rehype-slug/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
-
     "remark-code-import/unist-util-visit": ["unist-util-visit@4.1.2", "", { "dependencies": { "@types/unist": "^2.0.0", "unist-util-is": "^5.0.0", "unist-util-visit-parents": "^5.1.1" } }, "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg=="],
 
     "restore-cursor/onetime": ["onetime@7.0.0", "", { "dependencies": { "mimic-function": "^5.0.0" } }, "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ=="],
@@ -2301,8 +2310,6 @@
 
     "typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.59.4", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.59.4", "@typescript-eslint/types": "8.59.4", "@typescript-eslint/typescript-estree": "8.59.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-cYXeNAUsG4lJo5dbc1FcKm+JwIWrj1/UpTORsC6tGMjEZ81DYcvIr9/ueikhMa/Y/gDQYGp+YX9/xQrXje5BJw=="],
 
-    "unist-util-remove-position/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
-
     "wrap-ansi/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
     "wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
@@ -2351,6 +2358,8 @@
 
     "@typescript-eslint/utils/@typescript-eslint/typescript-estree/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "@typescript-eslint/utils/@typescript-eslint/typescript-estree/tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+
     "@userjot/next/next/@next/env": ["@next/env@16.1.6", "", {}, "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ=="],
 
     "@userjot/next/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.1.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw=="],
@@ -2383,6 +2392,18 @@
 
     "eslint-plugin-import/tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": { "json5": "lib/cli.js" } }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],
 
+    "fumadocs-typescript/shiki/@shikijs/core": ["@shikijs/core@4.0.2", "", { "dependencies": { "@shikijs/primitive": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw=="],
+
+    "fumadocs-typescript/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag=="],
+
+    "fumadocs-typescript/shiki/@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg=="],
+
+    "fumadocs-typescript/shiki/@shikijs/langs": ["@shikijs/langs@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg=="],
+
+    "fumadocs-typescript/shiki/@shikijs/themes": ["@shikijs/themes@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA=="],
+
+    "fumadocs-typescript/shiki/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+
     "fumadocs-typescript/ts-morph/@ts-morph/common": ["@ts-morph/common@0.29.0", "", { "dependencies": { "minimatch": "^10.0.1", "path-browserify": "^1.0.1", "tinyglobby": "^0.2.14" } }, "sha512-35oUmphHbJvQ/+UTwFNme/t2p3FoKiGJ5auTjjpNTop2dyREspirjMy82PLSC1pnDJ8ah1GU98hwpVt64YXQsg=="],
 
     "glob/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="],
@@ -2429,8 +2450,14 @@
 
     "@userjot/next/next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "fumadocs-typescript/shiki/@shikijs/core/@shikijs/primitive": ["@shikijs/primitive@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw=="],
+
+    "fumadocs-typescript/shiki/@shikijs/engine-javascript/oniguruma-to-es": ["oniguruma-to-es@4.3.4", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA=="],
+
     "fumadocs-typescript/ts-morph/@ts-morph/common/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
 
+    "fumadocs-typescript/ts-morph/@ts-morph/common/tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+
     "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "shadcn/ts-morph/@ts-morph/common/minimatch": ["minimatch@10.1.1", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ=="],
@@ -2439,6 +2466,10 @@
 
     "@typescript-eslint/utils/@typescript-eslint/typescript-estree/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
+    "fumadocs-typescript/shiki/@shikijs/engine-javascript/oniguruma-to-es/oniguruma-parser": ["oniguruma-parser@0.12.1", "", {}, "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="],
+
+    "fumadocs-typescript/shiki/@shikijs/engine-javascript/oniguruma-to-es/regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
+
     "fumadocs-typescript/ts-morph/@ts-morph/common/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="],
 
     "fumadocs-typescript/ts-morph/@ts-morph/common/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],

From 101883d411cec0fdb0848f3becf1b6f11d106970 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sun, 7 Jun 2026 03:24:35 +0530
Subject: [PATCH 5/7] chore: revert mdx version

---
 apps/www/package.json | 2 +-
 bun.lock              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index d404a4d8..939b3d89 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -42,7 +42,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "fumadocs-core": "16.9.3",
-    "fumadocs-mdx": "15.0.11",
+    "fumadocs-mdx": "15.0.10",
     "fumadocs-typescript": "^5.2.6",
     "fumadocs-ui": "16.9.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
diff --git a/bun.lock b/bun.lock
index 725c53df..e21a0bc2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -42,7 +42,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "fumadocs-core": "16.9.3",
-        "fumadocs-mdx": "15.0.11",
+        "fumadocs-mdx": "15.0.10",
         "fumadocs-typescript": "^5.2.6",
         "fumadocs-ui": "16.9.3",
         "hast-util-to-jsx-runtime": "^2.3.6",
@@ -1092,7 +1092,7 @@
 
     "fumadocs-core": ["fumadocs-core@16.9.3", "", { "dependencies": { "@orama/orama": "^3.1.18", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^4.1.0", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3" }, "peerDependencies": { "@mdx-js/mdx": "*", "@mixedbread/sdk": "0.x.x", "@orama/core": "1.x.x", "@oramacloud/client": "2.x.x", "@tanstack/react-router": "1.x.x", "@types/estree-jsx": "*", "@types/hast": "*", "@types/mdast": "*", "@types/react": "*", "algoliasearch": "5.x.x", "flexsearch": "*", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "*", "zod": "4.x.x" }, "optionalPeers": ["@mdx-js/mdx", "@mixedbread/sdk", "@orama/core", "@oramacloud/client", "@tanstack/react-router", "@types/estree-jsx", "@types/hast", "@types/mdast", "@types/react", "algoliasearch", "flexsearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-8RVzKnzBJR5o+tJCccY28ntekfMQYBoYiz7alnYb/d9YJc+XpnsINzTl63lQ1eBMZ9gdhm2MqRtgUjh/8rUrbw=="],
 
-    "fumadocs-mdx": ["fumadocs-mdx@15.0.11", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.1.0", "chokidar": "^5.0.0", "esbuild": "^0.28.0", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.2.0", "mdast-util-mdx": "^3.0.0", "picocolors": "^1.1.1", "picomatch": "^4.0.4", "tinyexec": "^1.2.4", "tinyglobby": "^0.2.17", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3", "zod": "^4.4.3" }, "peerDependencies": { "@types/mdast": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "^16.7.0", "mdast-util-directive": "*", "next": "^15.3.0 || ^16.0.0", "react": "^19.2.0", "rolldown": "*", "vite": "7.x.x || 8.x.x" }, "optionalPeers": ["@types/mdast", "@types/mdx", "@types/react", "mdast-util-directive", "next", "react", "rolldown", "vite"], "bin": { "fumadocs-mdx": "./bin.js" } }, "sha512-XDym6obv+VVqA+MUDpaqgmTuTarrwsvo+5F5erMZQQcSqki9W7CFvqlleKOYBsUdOuXh9B3ZW3QFirdTwNpAeQ=="],
+    "fumadocs-mdx": ["fumadocs-mdx@15.0.10", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.1.0", "chokidar": "^5.0.0", "esbuild": "^0.28.0", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.1.1", "mdast-util-mdx": "^3.0.0", "picocolors": "^1.1.1", "picomatch": "^4.0.4", "tinyexec": "^1.2.2", "tinyglobby": "^0.2.16", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "vfile": "^6.0.3", "zod": "^4.4.3" }, "peerDependencies": { "@types/mdast": "*", "@types/mdx": "*", "@types/react": "*", "fumadocs-core": "^16.7.0", "mdast-util-directive": "*", "next": "^15.3.0 || ^16.0.0", "react": "^19.2.0", "rolldown": "*", "vite": "7.x.x || 8.x.x" }, "optionalPeers": ["@types/mdast", "@types/mdx", "@types/react", "mdast-util-directive", "next", "react", "rolldown", "vite"], "bin": { "fumadocs-mdx": "./bin.js" } }, "sha512-kH3S7ESS9yXTAaCkA8dDugsCK/MbnpgyZ5qBEL7cWoavV0O/T4+4YTYFkvNknz7cw+T/r+OG0p2BvlVhkk4fww=="],
 
     "fumadocs-typescript": ["fumadocs-typescript@5.2.6", "", { "dependencies": { "estree-util-value-to-estree": "^3.5.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "remark": "^15.0.1", "remark-rehype": "^11.1.2", "shiki": "^4.0.2", "ts-morph": "^28.0.0", "unified": "^11.0.5", "unist-util-visit": "^5.1.0" }, "peerDependencies": { "@types/estree": "*", "@types/hast": "*", "@types/mdast": "*", "@types/react": "*", "fumadocs-core": "^16.7.0", "fumadocs-ui": "^16.7.0", "react": "^19.2.0", "react-dom": "^19.2.0" }, "optionalPeers": ["@types/estree", "@types/hast", "@types/mdast", "@types/react", "fumadocs-ui"] }, "sha512-kmidpjbjrzlSbppLTW1m4SF87R3CMu3WhvD1VW8/w5A71uC2nARvfMh2o7bNJRLzjJyq/RO9v8NHYHU/cw+QUQ=="],
 

From e8ed10417e8aa8de55ec4f6308e52efa0ec284f4 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sun, 7 Jun 2026 03:31:31 +0530
Subject: [PATCH 6/7] fix: build errors and server render

---
 apps/www/components/blocks/block-page-shell.tsx | 2 +-
 apps/www/registry/collection/registry-ui.ts     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/www/components/blocks/block-page-shell.tsx b/apps/www/components/blocks/block-page-shell.tsx
index 31a0a97d..1b9c5f63 100644
--- a/apps/www/components/blocks/block-page-shell.tsx
+++ b/apps/www/components/blocks/block-page-shell.tsx
@@ -111,7 +111,7 @@ function getBlockPageLayoutSnapshot(): BlockPageLayout {
 }
 
 function getServerBlockPageLayoutSnapshot(): BlockPageLayout {
-  return "mobile"
+  return "desktop"
 }
 
 function subscribeToBlockPageLayoutChange(onStoreChange: () => void) {
diff --git a/apps/www/registry/collection/registry-ui.ts b/apps/www/registry/collection/registry-ui.ts
index dca97eb5..242e9fe0 100644
--- a/apps/www/registry/collection/registry-ui.ts
+++ b/apps/www/registry/collection/registry-ui.ts
@@ -12,7 +12,8 @@ export const ui: Registry["items"] = [
       },
     ],
     name: "error-screen",
-    registryDependencies: ["media-provider"],
+    dependencies: ["shaka-player@^4"],
+    registryDependencies: ["media-provider", "item"],
     type: "registry:ui",
   },
   {

From 7d6f15a800643f372e14f72402909a82c5ea80c1 Mon Sep 17 00:00:00 2001
From: winoffrg <rohangupta1528@gmail.com>
Date: Sun, 7 Jun 2026 03:39:54 +0530
Subject: [PATCH 7/7] fix: build error in registry

---
 apps/www/registry/collection/registry-ui.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/registry/collection/registry-ui.ts b/apps/www/registry/collection/registry-ui.ts
index 242e9fe0..ca9aef92 100644
--- a/apps/www/registry/collection/registry-ui.ts
+++ b/apps/www/registry/collection/registry-ui.ts
@@ -4,6 +4,7 @@ const TARGET_BASE_PATH = "components/limeplay"
 
 export const ui: Registry["items"] = [
   {
+    dependencies: ["shaka-player@^4"],
     files: [
       {
         path: "ui/error-screen.tsx",
@@ -12,7 +13,6 @@ export const ui: Registry["items"] = [
       },
     ],
     name: "error-screen",
-    dependencies: ["shaka-player@^4"],
     registryDependencies: ["media-provider", "item"],
     type: "registry:ui",
   },