diff --git a/apps/www/app/blocks/[[...slug]]/page.tsx b/apps/www/app/blocks/[[...slug]]/page.tsx
index 884c4c06..1dcd4375 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,85 +42,42 @@ 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">
-      <DocsLayout
-        sidebar={{
-          enabled: false,
-        }}
-        tree={blocksSource.getPageTree()}
-      >
-        <main className="relative min-h-screen bg-background">
-          <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 defaultSize={"35%"} minSize={"30%"}>
-                  <div className="relative h-full overflow-hidden bg-transparent">
-                    <BlockTopBar title={page.data.title} />
-                    <div
-                      aria-hidden="true"
-                      className="pointer-events-none absolute inset-x-0 bottom-0 z-10"
-                      style={{
-                        backdropFilter: "blur(2px)",
-                        background:
-                          "linear-gradient(to top, color-mix(in oklch, var(--background) 100%, transparent) 0%, transparent 100%)",
-                        height: "92px",
-                        maskImage:
-                          "linear-gradient(to top, black 50%, transparent 100%)",
-                        WebkitBackdropFilter: "blur(2px)",
-                        WebkitMaskImage:
-                          "linear-gradient(to top, black 50%, transparent 100%)",
-                        willChange: "backdrop-filter",
-                      }}
-                    />
-
-                    <div className="h-full min-w-0 overflow-x-hidden overflow-y-auto pt-16">
-                      <BlockInfoPane
-                        content={content}
-                        description={page.data.description}
-                        title={page.data.title}
-                      />
-                    </div>
-                  </div>
-                </ResizablePanel>
-
-                <ResizableHandle className="z-20" withHandle />
-
-                <ResizablePanel
-                  className="relative"
-                  defaultSize={"65%"}
-                  minSize={"40%"}
-                >
-                  <PreviewComponent />
-                </ResizablePanel>
-              </ResizablePanelGroup>
-            </div>
-          </div>
-        </main>
-      </DocsLayout>
-    </div>
+    <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>
   )
 }
 
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..1b9c5f63
--- /dev/null
+++ b/apps/www/components/blocks/block-page-shell.tsx
@@ -0,0 +1,140 @@
+"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)"
+const STACKED_QUERY = "(min-width: 768px)"
+
+type BlockPageLayout = "desktop" | "mobile" | "stacked"
+
+type BlockPageShellProps = {
+  info: ReactNode
+  preview: ReactNode
+  title: string
+}
+
+export function BlockPageShell({ info, preview, title }: BlockPageShellProps) {
+  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 (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 (
+    <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 getBlockPageLayoutSnapshot(): BlockPageLayout {
+  if (window.matchMedia(DESKTOP_QUERY).matches) return "desktop"
+  if (window.matchMedia(STACKED_QUERY).matches) return "stacked"
+
+  return "mobile"
+}
+
+function getServerBlockPageLayoutSnapshot(): BlockPageLayout {
+  return "desktop"
+}
+
+function subscribeToBlockPageLayoutChange(onStoreChange: () => void) {
+  const mediaQueryLists = [
+    window.matchMedia(DESKTOP_QUERY),
+    window.matchMedia(STACKED_QUERY),
+  ]
+
+  mediaQueryLists.forEach((mediaQueryList) => {
+    mediaQueryList.addEventListener("change", onStoreChange)
+  })
+
+  return () => {
+    mediaQueryLists.forEach((mediaQueryList) => {
+      mediaQueryList.removeEventListener("change", onStoreChange)
+    })
+  }
+}
+
+function useBlockPageLayout() {
+  return useSyncExternalStore(
+    subscribeToBlockPageLayoutChange,
+    getBlockPageLayoutSnapshot,
+    getServerBlockPageLayoutSnapshot
+  )
+}
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..dbf4dd57 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -1,13 +1,17 @@
 "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, useSearchParams } from "next/navigation"
+import React, { useCallback, useLayoutEffect, useState } from "react"
 
-import { StreamPanel, StreamPanelProvider } from "@/components/stream-panel"
+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"
+
 export function BlockPreviewWithToolbar({
   children,
   codeUrl,
@@ -15,7 +19,12 @@ export function BlockPreviewWithToolbar({
   children: React.ReactNode
   codeUrl?: string
 }) {
-  const [expanded, setExpanded] = useState(false)
+  const pathname = usePathname()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [expanded, setExpanded] = useState(() => {
+    return searchParams.get(EXPANDED_QUERY_PARAM) === "true"
+  })
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
     start: "top-right",
@@ -23,57 +32,42 @@ export function BlockPreviewWithToolbar({
   })
   const theme = isDark ? "dark" : "light"
   const [reloadKey, setReloadKey] = useState(0)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const [panelRect, setPanelRect] = useState({
-    height: "100%",
-    left: "100%",
-    top: 0,
-    width: 0,
-  })
 
-  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,
+  const updateExpandedQuery = useCallback(
+    (nextExpanded: boolean) => {
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
+      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,
       })
-    }
-    update()
-    const ro = new ResizeObserver(update)
-    ro.observe(panelRef.current)
-    window.addEventListener("resize", update)
-    return () => {
-      ro.disconnect()
-      window.removeEventListener("resize", update)
-    }
-  }, [])
+    },
+    [pathname, router, searchParams]
+  )
 
   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 })
-
-  useEffect(() => {
-    const update = () =>
-      setWindowSize({ height: window.innerHeight, width: window.innerWidth })
-    update()
-    window.addEventListener("resize", update)
-    return () => window.removeEventListener("resize", update)
-  }, [])
+  useLayoutEffect(() => {
+    setExpanded(searchParams.get(EXPANDED_QUERY_PARAM) === "true")
+  }, [pathname, searchParams])
 
-  // DEV: This controls the breadcumbs to be hidden when preview is expanded
-  useEffect(() => {
+  // DEV: This controls the left doc section to be hidden when preview is expanded
+  useLayoutEffect(() => {
     document.documentElement.dataset.blockPreviewExpanded = expanded
       ? "true"
       : "false"
@@ -82,55 +76,52 @@ 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={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">
+      <LazyMotion features={domAnimation}>
+        <m.div
+          animate={{ opacity: 1, scale: 1 }}
+          className={cn(
+            `
+              z-40 overflow-hidden
+              lg: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" }}
+        >
+          <div className="flex size-full flex-col">
             <div
-              className="relative flex flex-1 items-center justify-center overflow-hidden"
-              key={reloadKey}
+              className="
+                relative flex flex-1 flex-col overflow-hidden bg-muted
+                lg:rounded-2xl
+              "
             >
-              {children}
-            </div>
+              <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>
   )
 }
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/audio-player/demo-player.tsx b/apps/www/components/players/audio-player/demo-player.tsx
index 5735e53f..b52d23d2 100644
--- a/apps/www/components/players/audio-player/demo-player.tsx
+++ b/apps/www/components/players/audio-player/demo-player.tsx
@@ -1,9 +1,15 @@
 "use client"
 
+import type { ReactNode } from "react"
+
 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 {
@@ -12,13 +18,19 @@ 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[]>([])
+  const storeHydrated = useStreamPanelStoreHydrated()
+  const hasPersistedAudioSelection = useStreamPanelStore((s) =>
+    Boolean(s.contentSelections.audio)
+  )
 
   useEffect(() => {
     const abortController = new AbortController()
@@ -39,5 +51,12 @@ export function AudioPlayerDemo({
     }
   }, [playlistId])
 
-  return <AudioPlayer playlist={playlist} />
+  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 60abefd6..d0d0c71d 100644
--- a/apps/www/components/players/audio-player/hover-player.tsx
+++ b/apps/www/components/players/audio-player/hover-player.tsx
@@ -1,17 +1,65 @@
 "use client"
 
-import { AudioLinesIcon, 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 {
+  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="closed"
+      animate={open ? "open" : "closed"}
       className="isolate"
       initial="closed"
       whileHover="open"
@@ -32,14 +80,13 @@ 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>
+            <IconVoiceHigh 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>
+          <AudioHoverStreamTrigger />
           <Button asChild size="xs">
             <Link
               className="text-sm font-semibold tracking-tight"
@@ -51,7 +98,9 @@ export function AudioPlayerHover() {
           </Button>
         </div>
       </motion.div>
-      <AudioPlayerDemo />
+      <AudioPlayerDemo>
+        <AudioHoverStreamPanel />
+      </AudioPlayerDemo>
     </motion.div>
   )
 }
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..9d4af1d2 100644
--- a/apps/www/components/players/video-player/player-container.tsx
+++ b/apps/www/components/players/video-player/player-container.tsx
@@ -2,18 +2,26 @@
 
 import type { RefObject } from "react"
 
-import { RotateCw } from "lucide-react"
+import { ChevronDownIcon, MonitorPlayIcon, RotateCwIcon } 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"
 
-import { VIDEO_PLAYER_DEMO_ASSETS } from "./demo-assets"
-
 export function VideoPlayerContainer() {
   const isMobile = useIsMobile()
   const { isPortrait } = useOrientation()
@@ -21,27 +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 &&
+      <div className="relative w-full">
+        <VideoPlayer
+          className={cn(
             `
-              bg-black/90
-              **:data-[layout-type='player-container']:hidden
-            `
-        )}
-        mediaProps={{
-          autoPlay: false,
-          muted: true,
-        }}
-        playlist={VIDEO_PLAYER_DEMO_ASSETS}
-        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"
       />
     </>
   )
@@ -89,10 +143,28 @@ function RotateMessage({
           size="sm"
           variant="outline"
         >
-          <RotateCw className={`mr-2 size-3`} />
+          <RotateCwIcon className={`mr-2 size-3`} />
           Rotate
         </Button>
       </div>
     </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
new file mode 100644
index 00000000..654a8536
--- /dev/null
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -0,0 +1,394 @@
+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
+  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 AppleMusicChartItem {
+  albumName?: string
+  artistName?: string
+  artwork?: AppleMusicArtwork
+  durationMs?: number
+  id: string
+  previewUrl?: string
+  title: string
+  url?: string
+}
+
+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
+}
+
+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 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(),
+  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[] = [
+  {
+    count: 17,
+    description: "Open movies from Blender Studio",
+    id: BLENDER_OPEN_FILMS_PLAYLIST_ID,
+    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(
+  player: shaka.Player,
+  stream: BlenderStreamResponse
+): Promise<void> {
+  if (!stream.captions || stream.captions.length === 0) return
+
+  const captionResults = await Promise.allSettled(
+    stream.captions.map((caption) =>
+      player.addTextTrackAsync(
+        caption.url,
+        caption.language,
+        caption.kind ?? "subtitles",
+        caption.mimeType ?? "text/vtt",
+        undefined,
+        caption.label
+      )
+    )
+  )
+
+  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: combinedSignal,
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch Blender stream: ${response.statusText}`)
+  }
+
+  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}`)
+  }
+
+  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 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 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: combinedSignal,
+  })
+  throwIfAborted(combinedSignal)
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch Apple Music charts: ${response.statusText}`
+    )
+  }
+
+  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)
+}
+
+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 throwIfAborted(signal?: AbortSignal): void {
+  if (!signal?.aborted) return
+
+  throw new DOMException("Aborted", "AbortError")
+}
+
+function toAppleMusicChartAsset(
+  item: AppleMusicChartItem
+): AppleMusicChartAsset {
+  return {
+    albumName: item.albumName,
+    artistName: item.artistName,
+    description: item.albumName,
+    duration: item.durationMs,
+    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 {
+  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..849dc843
--- /dev/null
+++ b/apps/www/components/stream-panel/content-overview-overlay.tsx
@@ -0,0 +1,144 @@
+"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 "@/components/stream-panel/use-stream-panel"
+
+import { cn } from "@/lib/utils"
+
+import { Separator } from "../ui/separator"
+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
+}
+
+type IconComponent = ComponentType<
+  SVGProps<SVGSVGElement> & {
+    size?: number | string
+  }
+>
+
+const rows: {
+  description: string
+  Icon: IconComponent
+  kind: StreamPanelContentKind
+  label: string
+}[] = [
+  {
+    description: "Adaptive and progressive test content",
+    Icon: IconVideoClip,
+    kind: "stream",
+    label: "Streams",
+  },
+  {
+    description: "Curated multi-item queues",
+    Icon: IconVideos,
+    kind: "playlist",
+    label: "Playlists",
+  },
+  {
+    description: "Time-based live manifests",
+    Icon: IconSatellite1,
+    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..1821a2e1 100644
--- a/apps/www/components/stream-panel/custom-overlay.tsx
+++ b/apps/www/components/stream-panel/custom-overlay.tsx
@@ -1,31 +1,41 @@
 "use client"
 
-import { AnimatePresence, motion } from "motion/react"
+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 { useDocsDialStore } 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 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)
@@ -33,10 +43,10 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
     } 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)
@@ -44,13 +54,13 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
     } 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())
@@ -64,7 +74,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
   }
 
   const handleConfigChange = (value: string) => {
-    store.setCustomConfig(value)
+    setCustomConfig(value)
     if (value.trim()) {
       try {
         JSON.parse(value.trim())
@@ -82,7 +92,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
     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
@@ -91,38 +101,47 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
 
   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)
   }
 
   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-lg text-sm"
+            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">
@@ -130,14 +149,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,11 +171,12 @@ 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-32 resize-none rounded-lg font-mono text-sm"
+            id="custom-stream-config"
             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>
@@ -162,23 +185,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-lg 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 +213,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
           {showSave ? (
             <>
               <Button
-                className="h-8 flex-1 text-sm"
+                className="h-9 flex-1 rounded-lg text-sm"
                 disabled={!canSave}
                 onClick={handleSave}
                 size="sm"
@@ -194,7 +221,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
                 Save
               </Button>
               <Button
-                className="h-8 text-sm"
+                className="h-9 rounded-lg text-sm"
                 onClick={() => {
                   setShowSave(false)
                   setSaveName("")
@@ -208,7 +235,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
           ) : (
             <>
               <Button
-                className="h-8 flex-1 text-sm"
+                className="h-9 flex-1 rounded-lg text-sm"
                 disabled={!canLoad}
                 onClick={handleLoad}
                 size="sm"
@@ -216,7 +243,7 @@ export function CustomOverlay({ onBack, onLoad, show }: CustomOverlayProps) {
                 Load Stream
               </Button>
               <Button
-                className="h-8 text-sm"
+                className="h-9 rounded-lg text-sm"
                 disabled={!canLoad}
                 onClick={() => setShowSave(true)}
                 size="sm"
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..68e450b6 100644
--- a/apps/www/components/stream-panel/overlay-shell.tsx
+++ b/apps/www/components/stream-panel/overlay-shell.tsx
@@ -1,50 +1,114 @@
 "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(
+          "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}
+        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-lg 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-lg
+              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="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>
+    </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..dabaeff2
--- /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 "@/components/stream-panel/use-stream-panel"
+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..ecbef359 100644
--- a/apps/www/components/stream-panel/panel-popover.tsx
+++ b/apps/www/components/stream-panel/panel-popover.tsx
@@ -1,294 +1,429 @@
 "use client"
 
-import { ChevronRight, PlusIcon, XIcon } from "lucide-react"
+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 "@/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,
-  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 { 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 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 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"),
+    [presets]
+  )
+  const livePresets = useMemo(
+    () => presets.filter((preset) => preset.group === "Live"),
+    [presets]
+  )
+  const playlistPresets = useMemo(
+    () => getPlaylistPresetsForType(playerType),
+    [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
+
+    setContentSelection(playerType, { id: presetId, index: 0, 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()
   }
 
-  return (
-    <Popover handle={handle} onOpenChange={onOpenChange} open={open}>
-      <PopoverContent
-        align={align}
+  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 grid max-h-(--stream-panel-max-height,100dvh) min-h-0 w-full overflow-hidden rounded-lg"
+      data-stream-panel-root=""
+    >
+      <div
         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]
+          "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"
         )}
-        positionMethod={variant === "floating" ? "fixed" : undefined}
-        side={side}
+        inert={activeOverlay !== STREAM_PANEL_OVERLAY.NONE ? true : undefined}
       >
-        <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
+        <Field className="gap-0">
+          <FieldLabel className="mx-2 text-[10px] text-muted-foreground/70 uppercase">
+            Media Settings
           </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>
+          <PanelToggleRow onValueChange={setMuted} value={muted}>
+            Muted
+          </PanelToggleRow>
+          <PanelToggleRow onValueChange={setAutoplay} value={autoplay}>
+            Autoplay
+          </PanelToggleRow>
         </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>
+        <Separator className="h-px bg-border/45" />
 
-        <PresetsOverlay
-          groupedPresets={groupedPresets}
-          onBack={() => setActiveOverlay("none")}
-          onSelect={(presetId) => {
-            handlePresetChange(presetId)
-            setActiveOverlay("none")
-          }}
-          show={activeOverlay === "presets"}
+        <PanelActionRow
+          detail={selectedContentName}
+          Icon={IconProjects}
+          label="Presets"
+          onClick={() => openOverlay(STREAM_PANEL_OVERLAY.CONTENT)}
         />
 
-        <SavedOverlay
-          onBack={() => setActiveOverlay("none")}
-          onSelect={handleLoadSaved}
-          show={activeOverlay === "saved"}
+        <PanelActionRow
+          detail={
+            savedStreams.length > 0
+              ? `${savedStreams.length} saved stream${
+                  savedStreams.length > 1 ? "s" : ""
+                }`
+              : "Add a custom stream"
+          }
+          Icon={IconBookmarkPlus}
+          label="Saved Streams"
+          onClick={() => openOverlay(STREAM_PANEL_OVERLAY.SAVED)}
         />
+      </div>
 
-        <CustomOverlay
-          onBack={() => setActiveOverlay("none")}
-          onLoad={handleLoadCustom}
-          show={activeOverlay === "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) => {
+              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>
+  )
+
+  if (variant === "children") return content
+
+  return (
+    <Popover handle={handle} onOpenChange={onOpenChange} open={open}>
+      <PopoverContent
+        align={align}
+        className={cn(
+          `
+            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>
     </Popover>
   )
 }
+
+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[]>
+}
+
+function PanelActionRow({
+  detail,
+  Icon,
+  label,
+  onClick,
+}: {
+  detail?: string
+  Icon?: React.FC<CentralIconBaseProps>
+  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>
+  )
+}
+
+function PanelToggleRow({
+  children,
+  onValueChange,
+  value,
+}: {
+  children: React.ReactNode
+  onValueChange: (value: boolean) => void
+  value: boolean
+}) {
+  return (
+    <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) => {
+          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..97ac70fb
--- /dev/null
+++ b/apps/www/components/stream-panel/playlists-overlay.tsx
@@ -0,0 +1,111 @@
+"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 "@/components/stream-panel/use-stream-panel"
+
+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-lg 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..ee498464 100644
--- a/apps/www/components/stream-panel/presets-overlay.tsx
+++ b/apps/www/components/stream-panel/presets-overlay.tsx
@@ -2,16 +2,14 @@
 
 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 { 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 +61,61 @@ 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 [, setProbed] = useState(false)
 
-  const allPresets = Object.values(groupedPresets).flat()
+  const allPresets = useMemo(
+    () => Object.values(groupedPresets).flat(),
+    [groupedPresets]
+  )
   useEffect(() => {
     void initStreamSupport(allPresets).then(() => setProbed(true))
-  }, [])
+  }, [allPresets])
 
-  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}>
-            {Object.entries(groupedPresets).map(([group, items], index) => (
-              <MenuPrimitive.Group key={group}>
-                {index > 0 && (
-                  <MenuPrimitive.Separator className="-mx-1 my-1 h-px bg-border" />
-                )}
+  const menuOpen = placement ? placement !== "idle" : show
 
-                <MenuPrimitive.GroupLabel className="px-2 py-1.5 text-[11px] font-medium tracking-[0.14em] text-muted-foreground/80 uppercase">
-                  {group}
+  return (
+    <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={selectedPresetId ?? ""}
+          >
+            {Object.entries(groupedPresets).map(([group, items]) => (
+              <MenuPrimitive.Group className="space-y-1" key={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) => {
                   const support = getStreamSupport(preset)
-                  const displayFeatures = getDisplayFeatures(preset.features)
+                  const displayFeatures = getDisplayFeatures(
+                    preset.features,
+                    preset.group === "Live"
+                  )
 
                   return (
                     <span
@@ -107,46 +125,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-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 === presetId &&
-                            "bg-accent/85 font-medium text-accent-foreground",
+                          preset.id === selectedPresetId && "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-[11px] 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.5 flex flex-wrap gap-1">
+                              {displayFeatures.map((feature) => (
+                                <span
+                                  className="rounded-xs 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 +184,13 @@ 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..5a4b7dd0 100644
--- a/apps/www/components/stream-panel/provider.tsx
+++ b/apps/www/components/stream-panel/provider.tsx
@@ -1,17 +1,37 @@
 "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 "@/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
+  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 +39,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 +53,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..1a98f517 100644
--- a/apps/www/components/stream-panel/saved-overlay.tsx
+++ b/apps/www/components/stream-panel/saved-overlay.tsx
@@ -1,39 +1,56 @@
 "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 "@/components/stream-panel/use-stream-panel"
 import { cn } from "@/lib/utils"
 
 import { Button } from "../ui/button"
-import { OverlayShell } from "./overlay-shell"
+import { Separator } from "../ui/separator"
+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">
         {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-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]
               `,
-              stream.src === customSrc &&
-                "bg-accent/85 font-medium text-accent-foreground"
+              stream.src === customSrc && "font-medium"
             )}
             key={stream.id}
           >
@@ -46,15 +63,47 @@ export function SavedOverlay({ onBack, onSelect, show }: SavedOverlayProps) {
             </button>
             <Button
               aria-label={`Remove ${stream.name}`}
-              className={`size-3.5`}
+              className="
+                size-7 rounded-lg 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>
         ))}
+        <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 9f70d9fd..d49ac601 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -2,46 +2,137 @@
 
 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"
 
-import { useDocsDialStore } from "@/lib/docs-dial-store"
-import { getPresetById } from "@/lib/stream-presets"
+import {
+  addBlenderCaptions,
+  APPLE_MUSIC_CHARTS_PLAYLIST_ID,
+  type BlenderStreamResponse,
+  fetchBlenderStream,
+  fetchPlaylistPresetAssets,
+  isBlenderOpenFilmAsset,
+  type StreamPanelPlaylistPreset,
+} from "@/components/stream-panel/content-catalog"
+import {
+  type StreamPanelContentKind,
+  type StreamPanelPlayerType,
+  type StreamPanelSelection,
+  useStreamPanelStore,
+  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 { useMediaApi, useMediaStore } from "@/registry/default/internal/media"
+import { useMediaFeatureApi } from "@/registry/default/ui/media-provider"
 
-export function useStreamPanelSync() {
-  const store = useMediaApi()
-  const mediaElement = useMediaStore((state) => state.media.mediaElement)
-  const player = useMediaStore((state) => state.player.instance)
+const DEFAULT_VIDEO_PRESET_ID = "mux-big-buck-bunny"
 
-  const volume = useDocsDialStore((s) => s.volume)
-  const muted = useDocsDialStore((s) => s.muted)
-  const autoplay = useDocsDialStore((s) => s.autoplay)
-  const presetId = useDocsDialStore((s) => s.presetId)
+export function useStreamPanelSync({
+  playerType = "video",
+}: {
+  playerType?: StreamPanelPlayerType
+} = {}) {
+  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 setVolume = useVolumeStore((s) => s.setVolume)
   const setMuted = useVolumeStore((s) => s.setMuted)
+  const playlistAbortRef = useRef<AbortController | null>(null)
+  const restoredSelectionRef = useRef(false)
+  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>>(
     () => ({
-      onLoadError: (_asset, error) => {
-        store.setState(({ playback }) => {
-          playback.status = "error"
-          playback.error = error
+      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,
+          })
+        },
+      },
+      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.getState().playback.setError(error)
         return "stop"
       },
     }),
-    [store]
+    [blenderStreamCache, playbackApi, playerType, setContentSelection]
   )
 
   const { loadPlaylist } = useAsset(assetOptions)
 
-  const prevPresetId = useRef(presetId)
-  const initialLoadDone = useRef(false)
-
   useEffect(() => {
     if (!mediaElement) return
     setVolume(volume / 100)
@@ -57,63 +148,232 @@ export function useStreamPanelSync() {
     mediaElement.autoplay = autoplay
   }, [autoplay, mediaElement])
 
-  useEffect(() => {
-    if (!player || !mediaElement) return
-    if (presetId === prevPresetId.current && initialLoadDone.current) return
+  const abortPlaylistRequest = useCallback(() => {
+    playlistAbortRef.current?.abort()
+  }, [])
 
-    initialLoadDone.current = true
-    prevPresetId.current = presetId
+  useEffect(() => abortPlaylistRequest, [abortPlaylistRequest])
 
-    const preset = getPresetById(presetId)
-    if (preset) {
-      loadPlaylist([preset as unknown as Asset])
-    }
-  }, [presetId, player, mediaElement, loadPlaylist])
-
-  const handlePresetChange = useCallback(
-    (preset: StreamPreset) => {
-      loadPlaylist([preset as unknown as Asset])
-    },
-    [loadPlaylist]
-  )
-
-  const handleLoadStream = useCallback(
-    (src: string, config?: string) => {
+  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) {
-          store.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
+          return null
         }
         parsedConfig = parseResult.value
       }
+
       const asset: StreamPreset = {
         config: parsedConfig,
         features: [],
         format: "progressive",
         group: "Special",
-        id: `custom-${Date.now()}`,
+        id,
         name: "Custom Stream",
         src,
-        type: "video",
+        type: playerType,
       }
       loadPlaylist([asset as unknown as Asset])
+      return asset
+    },
+    [loadPlaylist, playbackApi, playerType]
+  )
+
+  const loadPlaylistPreset = useCallback(
+    (playlistId: string, startIndex = 0) => {
+      playlistAbortRef.current?.abort()
+      const abortController = new AbortController()
+      playlistAbortRef.current = abortController
+
+      void fetchPlaylistPresetAssets(playlistId, abortController.signal)
+        .then((assets) => {
+          if (abortController.signal.aborted) return
+
+          const index = normalizePlaylistIndex(startIndex, assets.length)
+          setContentSelection(playerType, {
+            id: playlistId,
+            index,
+            kind: "playlist",
+          })
+          loadPlaylist(assets, index)
+        })
+        .catch((error: unknown) => {
+          if (error instanceof DOMException && error.name === "AbortError")
+            return
+
+          playbackApi.getState().playback.setError(error)
+        })
+    },
+    [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 defaultSelection = getDefaultSelectionForType(playerType)
+    if (!defaultSelection) return
+
+    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) => {
+      abortPlaylistRequest()
+      const asset = loadCustomStream(src, config)
+      if (!asset) return
+
+      setContentSelection(playerType, {
+        config,
+        id: asset.id,
+        index: 0,
+        kind: "stream",
+        src,
+      })
     },
-    [loadPlaylist, store]
+    [abortPlaylistRequest, loadCustomStream, 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 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 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
+  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/components/stream-panel/use-stream-panel.ts b/apps/www/components/stream-panel/use-stream-panel.ts
new file mode 100644
index 00000000..f6e88ce2
--- /dev/null
+++ b/apps/www/components/stream-panel/use-stream-panel.ts
@@ -0,0 +1,142 @@
+"use client"
+
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+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
+  setHasHydrated: (hasHydrated: boolean) => void
+  setMuted: (muted: boolean) => void
+  setVolume: (volume: number) => void
+}
+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>
+  >
+  customConfig: string
+  customSrc: string
+  hasHydrated: boolean
+  muted: boolean
+  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) => ({
+      autoplay: false,
+      contentSelections: {},
+      customConfig: "",
+      customSrc: "",
+      hasHydrated: false,
+      muted: true,
+      removeSavedStream: (id) =>
+        set((state) => ({
+          savedStreams: state.savedStreams.filter((s) => s.id !== id),
+        })),
+      savedStreams: [],
+      saveStream: (stream) =>
+        set((state) => ({
+          savedStreams: [
+            ...state.savedStreams,
+            { ...stream, id: crypto.randomUUID() },
+          ],
+        })),
+      setAutoplay: (autoplay) => set({ autoplay }),
+      setContentSelection: (playerType, selection) =>
+        set((state) => ({
+          contentSelections: {
+            ...state.contentSelections,
+            [playerType]: selection,
+          },
+        })),
+
+      setCustomConfig: (customConfig) => set({ customConfig }),
+      setCustomSrc: (customSrc) => set({ customSrc }),
+      setHasHydrated: (hasHydrated) => set({ hasHydrated }),
+      setMuted: (muted) => set({ muted }),
+      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/docs-dial-store.ts b/apps/www/lib/docs-dial-store.ts
deleted file mode 100644
index cca7c0fc..00000000
--- a/apps/www/lib/docs-dial-store.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { create } from "zustand"
-import { persist } from "zustand/middleware"
-
-export interface DocsDialActions {
-  removeSavedStream: (id: string) => void
-  saveStream: (stream: Omit<SavedStream, "id">) => void
-  setAutoplay: (autoplay: boolean) => void
-  setCustomConfig: (config: string) => void
-  setCustomSrc: (src: string) => void
-  setMuted: (muted: boolean) => void
-  setPresetId: (id: string) => void
-  setVolume: (volume: number) => void
-}
-
-export interface DocsDialState {
-  autoplay: boolean
-  customConfig: string
-  customSrc: string
-  muted: boolean
-  presetId: string
-  savedStreams: SavedStream[]
-  volume: number
-}
-
-export type DocsDialStore = DocsDialActions & DocsDialState
-
-export interface SavedStream {
-  config?: string
-  id: string
-  name: string
-  src: string
-}
-
-export const useDocsDialStore = create<DocsDialStore>()(
-  persist(
-    (set) => ({
-      autoplay: false,
-      customConfig: "",
-      customSrc: "",
-      muted: true,
-      presetId: "mux-big-buck-bunny",
-      removeSavedStream: (id) =>
-        set((state) => ({
-          savedStreams: state.savedStreams.filter((s) => s.id !== id),
-        })),
-      savedStreams: [],
-      saveStream: (stream) =>
-        set((state) => ({
-          savedStreams: [
-            ...state.savedStreams,
-            { ...stream, id: crypto.randomUUID() },
-          ],
-        })),
-      setAutoplay: (autoplay) => set({ autoplay }),
-
-      setCustomConfig: (customConfig) => set({ customConfig }),
-      setCustomSrc: (customSrc) => set({ customSrc }),
-      setMuted: (muted) => set({ muted }),
-      setPresetId: (presetId) => set({ presetId }),
-      setVolume: (volume) => set({ volume }),
-      volume: 80,
-    }),
-    {
-      name: "limeplay-docs-dial",
-    }
-  )
-)
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..939b3d89 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",
@@ -40,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.10",
     "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",
@@ -68,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/collection/registry-ui.ts b/apps/www/registry/collection/registry-ui.ts
index dca97eb5..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,7 @@ export const ui: Registry["items"] = [
       },
     ],
     name: "error-screen",
-    registryDependencies: ["media-provider"],
+    registryDependencies: ["media-provider", "item"],
     type: "registry:ui",
   },
   {
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/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/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 37dd3721..068e832d 100644
--- a/apps/www/registry/default/examples/player-root-demo.tsx
+++ b/apps/www/registry/default/examples/player-root-demo.tsx
@@ -239,7 +239,8 @@ export function PlayerLayoutDemo({
 }
 
 function DemoStreamSync({ children }: React.PropsWithChildren) {
-  const { handleLoadStream } = useStreamPanelSync()
+  const { handleLoadStream, handlePlaylistPresetChange, handlePresetChange } =
+    useStreamPanelSync({ playerType: "video" })
 
   return (
     <>
@@ -247,8 +248,10 @@ function DemoStreamSync({ children }: React.PropsWithChildren) {
       <StreamPanel
         align="end"
         onLoadStream={handleLoadStream}
+        onPlaylistChange={handlePlaylistPresetChange}
+        onPresetChange={handlePresetChange}
         playerType="video"
-        side="top"
+        side="right"
         variant="anchored"
       />
     </>
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/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)
       }
diff --git a/bun.lock b/bun.lock
index a4c1bbcc..e21a0bc2 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",
@@ -40,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.10",
         "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",
@@ -68,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",
       },
@@ -176,6 +176,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=="],
@@ -536,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=="],
 
@@ -1088,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.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=="],
 
-    "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=="],
 
@@ -1324,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=="],
 
@@ -1424,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=="],
 
@@ -1622,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=="],
 
@@ -1738,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=="],
 
@@ -1840,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=="],
 
@@ -1938,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=="],
 
@@ -2014,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=="],
 
@@ -2114,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=="],
@@ -2186,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=="],
@@ -2204,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=="],
@@ -2232,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=="],
@@ -2246,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=="],
@@ -2268,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=="],
@@ -2298,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=="],
@@ -2348,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=="],
@@ -2380,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=="],
@@ -2426,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=="],
@@ -2436,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=="],