@sntlr/registry-shell 1.0.0

package/src/next-app/components/preview-canvas.tsx

@@ -0,0 +1,368 @@
+"use client"
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+import { Crosshair, SlidersHorizontal, Maximize, X } from "lucide-react"
+import { Button } from "@shell/components/shell-ui/button"
+
+const DOT_SPACING = 24
+const DOT_RADIUS = 1
+const PROXIMITY_RADIUS = 120
+const MIN_ZOOM = 0.25
+const MAX_ZOOM = 3
+const ZOOM_STEP = 0.1
+
+export interface CameraState {
+  x: number
+  y: number
+  zoom: number
+}
+
+export interface CanvasPosition {
+  x: number
+  y: number
+}
+
+export function PreviewCanvas({
+  children,
+  showControls,
+  onToggleControls,
+  fullscreen,
+  onToggleFullscreen,
+  camera: cameraProp,
+  onCameraChange,
+  position: posProp,
+  onPositionChange,
+}: {
+  children: ReactNode
+  showControls?: boolean
+  onToggleControls?: () => void
+  fullscreen?: boolean
+  onToggleFullscreen?: () => void
+  camera?: CameraState
+  onCameraChange?: (camera: CameraState) => void
+  position?: CanvasPosition
+  onPositionChange?: (pos: CanvasPosition) => void
+}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animRef = useRef<number>(0)
+
+  // Use controlled state if provided, otherwise internal
+  const [internalCamera, setInternalCamera] = useState({ x: 0, y: 0, zoom: 1 })
+  const [internalPos, setInternalPos] = useState({ x: 0, y: 0 })
+  const camera = cameraProp ?? internalCamera
+  const pos = posProp ?? internalPos
+  const cameraRef = useRef(camera)
+  const posRef = useRef(pos)
+  useEffect(() => { cameraRef.current = camera }, [camera])
+  useEffect(() => { posRef.current = pos }, [pos])
+
+  const setCamera: React.Dispatch<React.SetStateAction<CameraState>> = useCallback((v) => {
+    const next = typeof v === "function" ? v(cameraRef.current) : v
+    if (onCameraChange) onCameraChange(next)
+    else setInternalCamera(next)
+  }, [onCameraChange])
+
+  const setPos: React.Dispatch<React.SetStateAction<CanvasPosition>> = useCallback((v) => {
+    const next = typeof v === "function" ? v(posRef.current) : v
+    if (onPositionChange) onPositionChange(next)
+    else setInternalPos(next)
+  }, [onPositionChange])
+
+  const mouseRef = useRef({ x: -1000, y: -1000 })
+  const dragging = useRef<"pan" | "move" | null>(null)
+  const dragStart = useRef({ mx: 0, my: 0, cx: 0, cy: 0 })
+
+  // Draw dot grid — use a ref so the rAF loop always calls the latest version
+  const drawDotsRef = useRef<() => void>(() => {})
+
+  const drawDots = useCallback(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+
+    const rect = container.getBoundingClientRect()
+    const dpr = window.devicePixelRatio || 1
+    canvas.width = rect.width * dpr
+    canvas.height = rect.height * dpr
+    canvas.style.width = `${rect.width}px`
+    canvas.style.height = `${rect.height}px`
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    ctx.scale(dpr, dpr)
+    ctx.clearRect(0, 0, rect.width, rect.height)
+
+    const { x: camX, y: camY, zoom } = camera
+    // Keep spacing constant in screen space — never denser than base
+    const spacing = DOT_SPACING
+    const mx = mouseRef.current.x
+    const my = mouseRef.current.y
+
+    // Offset for panning (dots scroll with camera)
+    const offsetX = ((camX * zoom) % spacing + spacing) % spacing
+    const offsetY = ((camY * zoom) % spacing + spacing) % spacing
+
+    const isDark = document.documentElement.classList.contains("dark")
+    const dotColor = isDark ? "255,255,255" : "0,0,0"
+    const dotRadius = Math.max(DOT_RADIUS, DOT_RADIUS * zoom)
+
+    for (let x = offsetX - spacing; x < rect.width + spacing; x += spacing) {
+      for (
+        let y = offsetY - spacing;
+        y < rect.height + spacing;
+        y += spacing
+      ) {
+        const dist = Math.sqrt((x - mx) ** 2 + (y - my) ** 2)
+        const proximity = Math.max(0, 1 - dist / PROXIMITY_RADIUS)
+        const alpha = 0.08 + proximity * 0.35
+        ctx.fillStyle = `rgba(${dotColor}, ${alpha})`
+        ctx.beginPath()
+        ctx.arc(x, y, dotRadius, 0, Math.PI * 2)
+        ctx.fill()
+      }
+    }
+
+    animRef.current = requestAnimationFrame(() => drawDotsRef.current())
+  }, [camera])
+
+  useEffect(() => {
+    drawDotsRef.current = drawDots
+  }, [drawDots])
+
+  useEffect(() => {
+    animRef.current = requestAnimationFrame(() => drawDotsRef.current())
+    return () => cancelAnimationFrame(animRef.current)
+  }, [drawDots])
+
+  // Track mouse for dot proximity
+  const onMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      const rect = containerRef.current?.getBoundingClientRect()
+      if (rect) {
+        mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+      }
+
+      if (dragging.current === "pan") {
+        const dx = (e.clientX - dragStart.current.mx) / camera.zoom
+        const dy = (e.clientY - dragStart.current.my) / camera.zoom
+        setCamera((c) => ({
+          ...c,
+          x: dragStart.current.cx + dx,
+          y: dragStart.current.cy + dy,
+        }))
+      } else if (dragging.current === "move") {
+        const dx = (e.clientX - dragStart.current.mx) / camera.zoom
+        const dy = (e.clientY - dragStart.current.my) / camera.zoom
+        setPos({
+          x: dragStart.current.cx + dx,
+          y: dragStart.current.cy + dy,
+        })
+      }
+    },
+    [camera.zoom, setCamera, setPos]
+  )
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Only pan on background (canvas) clicks
+      if (e.target === canvasRef.current) {
+        dragging.current = "pan"
+        dragStart.current = {
+          mx: e.clientX,
+          my: e.clientY,
+          cx: camera.x,
+          cy: camera.y,
+        }
+        e.preventDefault()
+      }
+    },
+    [camera.x, camera.y]
+  )
+
+  const componentWrapperRef = useRef<HTMLDivElement>(null)
+
+  const onComponentMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Only start move-drag when clicking the wrapper itself (the padding
+      // area), not on interactive children inside the component.
+      if (e.target !== componentWrapperRef.current) return
+
+      dragging.current = "move"
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        cx: pos.x,
+        cy: pos.y,
+      }
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    [pos.x, pos.y]
+  )
+
+  const onMouseUp = useCallback(() => {
+    dragging.current = null
+  }, [])
+
+  const onMouseLeave = useCallback(() => {
+    mouseRef.current = { x: -1000, y: -1000 }
+    dragging.current = null
+  }, [])
+
+  // Pinch zoom on touch devices
+  const lastTouchDist = useRef<number | null>(null)
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    function handleTouchMove(e: TouchEvent) {
+      if (e.touches.length === 2) {
+        e.preventDefault()
+        const dx = e.touches[0].clientX - e.touches[1].clientX
+        const dy = e.touches[0].clientY - e.touches[1].clientY
+        const dist = Math.sqrt(dx * dx + dy * dy)
+        if (lastTouchDist.current !== null) {
+          const delta = (dist - lastTouchDist.current) * 0.005
+          setCamera((c) => ({
+            ...c,
+            zoom: Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, c.zoom + delta)),
+          }))
+        }
+        lastTouchDist.current = dist
+      }
+    }
+    function handleTouchEnd() { lastTouchDist.current = null }
+    el.addEventListener("touchmove", handleTouchMove, { passive: false })
+    el.addEventListener("touchend", handleTouchEnd)
+    return () => {
+      el.removeEventListener("touchmove", handleTouchMove)
+      el.removeEventListener("touchend", handleTouchEnd)
+    }
+  }, [setCamera])
+
+  // Native wheel listener with { passive: false } to actually prevent page scroll
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    function handleWheel(e: WheelEvent) {
+      e.preventDefault()
+      e.stopPropagation()
+      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP
+      setCamera((c) => ({
+        ...c,
+        zoom: Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, c.zoom + delta)),
+      }))
+    }
+    el.addEventListener("wheel", handleWheel, { passive: false })
+    return () => el.removeEventListener("wheel", handleWheel)
+  }, [setCamera])
+
+  const recenter = useCallback(() => {
+    setCamera({ x: 0, y: 0, zoom: 1 })
+    setPos({ x: 0, y: 0 })
+  }, [setCamera, setPos])
+
+  const zoomIn = useCallback(() => {
+    setCamera((c) => ({
+      ...c,
+      zoom: Math.min(MAX_ZOOM, c.zoom + ZOOM_STEP),
+    }))
+  }, [setCamera])
+
+  const zoomOut = useCallback(() => {
+    setCamera((c) => ({
+      ...c,
+      zoom: Math.max(MIN_ZOOM, c.zoom - ZOOM_STEP),
+    }))
+  }, [setCamera])
+
+  return (
+    <div className={
+      fullscreen
+        ? "relative w-full h-full select-none"
+        : "relative w-full h-full overflow-hidden select-none"
+    }>
+      <div
+        ref={containerRef}
+        tabIndex={0}
+        className="absolute inset-0 cursor-grab active:cursor-grabbing outline-none"
+        onMouseMove={onMouseMove}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onMouseLeave={onMouseLeave}
+        onKeyDown={(e) => {
+          // Don't intercept arrows when an input/textarea/contenteditable is focused
+          const tag = (e.target as HTMLElement).tagName
+          const editable = tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).isContentEditable
+          if (editable) return
+
+          const PAN_STEP = 20
+          if (e.key === "ArrowUp") { e.preventDefault(); setCamera((c) => ({ ...c, y: c.y + PAN_STEP })) }
+          else if (e.key === "ArrowDown") { e.preventDefault(); setCamera((c) => ({ ...c, y: c.y - PAN_STEP })) }
+          else if (e.key === "ArrowLeft") { e.preventDefault(); setCamera((c) => ({ ...c, x: c.x + PAN_STEP })) }
+          else if (e.key === "ArrowRight") { e.preventDefault(); setCamera((c) => ({ ...c, x: c.x - PAN_STEP })) }
+          else if (e.key === "=" || e.key === "+") { e.preventDefault(); zoomIn() }
+          else if (e.key === "-") { e.preventDefault(); zoomOut() }
+          else if (e.key === "0") { e.preventDefault(); recenter() }
+        }}
+      >
+        <canvas ref={canvasRef} className="absolute inset-0" />
+
+        {/* Component layer */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            transform: `translate(${camera.x * camera.zoom}px, ${camera.y * camera.zoom}px) scale(${camera.zoom})`,
+            transformOrigin: "center",
+          }}
+        >
+          {/* Move handle — fills the entire transform layer, behind the component */}
+          <div
+            ref={componentWrapperRef}
+            className="absolute inset-0 pointer-events-auto cursor-move"
+            onMouseDown={onComponentMouseDown}
+          />
+          {/* Component — sits above the move handle, uses its own cursors */}
+          <div
+            className="absolute inset-0 flex items-center justify-center pointer-events-none"
+          >
+            <div
+              className="pointer-events-auto cursor-default"
+              style={{
+                transform: `translate(${pos.x}px, ${pos.y}px)`,
+              }}
+            >
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Toolbar — top-right: recenter + props toggle + fullscreen */}
+      <div className="absolute top-3 right-3 flex items-center gap-0.5 bg-background/80 backdrop-blur-sm border rounded-md p-0.5 pointer-events-auto z-10">
+        <Button variant="ghost" size="icon-xs" className="max-md:min-h-11 max-md:min-w-11" onClick={recenter} aria-label="Recenter">
+          <Crosshair />
+        </Button>
+        <Button
+          variant={showControls && onToggleControls ? "default" : "ghost"}
+          size="icon-xs"
+          className="max-md:min-h-11 max-md:min-w-11"
+          onClick={onToggleControls}
+          disabled={!onToggleControls}
+          aria-label="Toggle controls"
+        >
+          <SlidersHorizontal />
+        </Button>
+        <Button variant="ghost" size="icon-xs" className="max-md:min-h-11 max-md:min-w-11" onClick={onToggleFullscreen} aria-label="Toggle fullscreen">
+          {fullscreen ? <X /> : <Maximize />}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/next-app/components/preview-controls.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import type { ControlEntry } from "@shell/hooks/use-controls"
+import { Label } from "@shell/components/shell-ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@shell/components/shell-ui/select"
+import { Input } from "@shell/components/shell-ui/input"
+
+export function PreviewControls({ entries }: { entries: ControlEntry[] }) {
+  if (entries.length === 0) return null
+
+  return (
+    <div className="space-y-3">
+      {entries.map((entry) => (
+        <div key={entry.name} className="space-y-1">
+          <Label className="text-xs text-muted-foreground capitalize">
+            {entry.name}
+          </Label>
+          <ControlInput entry={entry} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ControlInput({ entry }: { entry: ControlEntry }) {
+  const { def, value, onChange } = entry
+
+  switch (def.type) {
+    case "select":
+      return (
+        <Select value={value as string} onValueChange={(v) => onChange(v)}>
+          <SelectTrigger className="w-full h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {def.options.map((opt) => (
+              <SelectItem key={opt} value={opt} className="text-xs">
+                {opt}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )
+
+    case "boolean":
+      return (
+        <button
+          onClick={() => onChange(!value)}
+          className={`flex h-8 w-full items-center justify-between rounded-md border px-2 text-xs cursor-pointer transition-colors ${
+            value
+              ? "border-primary bg-primary/5 text-foreground"
+              : "border-input text-muted-foreground"
+          }`}
+        >
+          <span>{value ? "true" : "false"}</span>
+          <div
+            className={`h-4 w-7 rounded-full transition-colors ${value ? "bg-primary" : "bg-muted"}`}
+          >
+            <div
+              className={`h-4 w-4 rounded-full bg-background border shadow-sm transition-transform ${value ? "translate-x-3" : "translate-x-0"}`}
+            />
+          </div>
+        </button>
+      )
+
+    case "text":
+      return (
+        <Input
+          type="text"
+          value={value as string}
+          onChange={(e) => onChange(e.target.value)}
+          className="h-8 text-xs"
+        />
+      )
+
+    case "number":
+      return (
+        <Input
+          type="number"
+          value={value as number}
+          min={def.min}
+          max={def.max}
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="h-8 text-xs"
+        />
+      )
+  }
+}

package/src/next-app/components/preview-layout.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"
+import type { ControlEntry } from "@shell/hooks/use-controls"
+import type { CameraState, CanvasPosition } from "@shell/components/preview-canvas"
+import { PreviewControls } from "@shell/components/preview-controls"
+import { PreviewCanvas } from "@shell/components/preview-canvas"
+import { useTranslations } from "@shell/lib/i18n"
+import { useMobileSidebar } from "@shell/components/sidebar-provider"
+
+const SnapshotModeContext = createContext(false)
+
+/** Wrap children in this to render PreviewLayout without the canvas chrome. */
+export function SnapshotModeProvider({ children }: { children: React.ReactNode }) {
+  return <SnapshotModeContext.Provider value={true}>{children}</SnapshotModeContext.Provider>
+}
+
+function useIsMobile() {
+  const [mobile, setMobile] = useState<boolean | null>(null)
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 767px)")
+    const handler = (e: MediaQueryListEvent) => setMobile(e.matches)
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync with external matchMedia API
+    setMobile(mq.matches)
+    mq.addEventListener("change", handler)
+    return () => mq.removeEventListener("change", handler)
+  }, [])
+  return mobile
+}
+
+export function PreviewLayout({
+  children,
+  controls,
+}: {
+  children: React.ReactNode
+  controls?: ControlEntry[]
+}) {
+  const isSnapshot = useContext(SnapshotModeContext)
+  const hasControls = controls && controls.length > 0
+  const isMobile = useIsMobile()
+
+  const [showControls, setShowControls] = useState(() => {
+    if (typeof window === "undefined") return false
+    return sessionStorage.getItem("preview-controls") === "true"
+  })
+  const [restoredFullscreen] = useState(() => {
+    if (typeof window === "undefined") return false
+    return sessionStorage.getItem("preview-fullscreen") === "true"
+  })
+  const [fullscreen, setFullscreen] = useState(restoredFullscreen)
+  const [fsVisible, setFsVisible] = useState(restoredFullscreen)
+  const t = useTranslations()
+  const { setCollapsed } = useMobileSidebar()
+
+  // Shared camera state between inline and fullscreen canvases
+  const [camera, setCamera] = useState<CameraState>({ x: 0, y: 0, zoom: 1 })
+  const [position, setPosition] = useState<CanvasPosition>({ x: 0, y: 0 })
+
+  // Ref to the inline preview container — used to capture its position
+  const inlineRef = useRef<HTMLDivElement>(null)
+  // The captured rect of the inline preview when entering/exiting fullscreen
+  const [originRect, setOriginRect] = useState({ top: 0, bottom: 0, left: 0, right: 0 })
+
+  // Sync state on mount / mobile change
+  useEffect(() => {
+    if (isMobile === null) return
+    // Restore fullscreen sidebar collapse
+    if (fullscreen && !isMobile) setCollapsed(true)
+  }, [isMobile]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally run only on mount/mobile change
+
+  // Animate fullscreen in
+  useEffect(() => {
+    if (fullscreen) {
+      requestAnimationFrame(() => setFsVisible(true))
+    }
+  }, [fullscreen])
+
+  const enterFullscreen = useCallback(() => {
+    if (inlineRef.current) {
+      const rect = inlineRef.current.getBoundingClientRect()
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      setOriginRect({
+        top: rect.top,
+        bottom: vh - rect.bottom,
+        left: rect.left,
+        right: vw - rect.right,
+      })
+    }
+    if (!isMobile) setCollapsed(true)
+    setCamera({ x: 0, y: 0, zoom: 1 })
+    setPosition({ x: 0, y: 0 })
+    setFullscreen(true)
+    sessionStorage.setItem("preview-fullscreen", "true")
+  }, [isMobile, setCollapsed])
+
+  // In snapshot mode, render children directly — no canvas, no controls
+  if (isSnapshot) {
+    return <>{children}</>
+  }
+
+  function toggleControls() {
+    if (isMobile) {
+      if (fullscreen) {
+        setShowControls((s) => {
+          sessionStorage.setItem("preview-controls", String(!s))
+          return !s
+        })
+      } else {
+        setFullscreen(true)
+        setShowControls(true)
+        sessionStorage.setItem("preview-controls", "true")
+      }
+    } else {
+      setShowControls((s) => {
+        sessionStorage.setItem("preview-controls", String(!s))
+        return !s
+      })
+    }
+  }
+
+  function exitFullscreen() {
+    // Animate sidebar open + preview shrink simultaneously
+    if (!isMobile) {
+      setCollapsed(false)
+      // Set origin to where the inline preview will land (sidebar width = 16rem = 256px on md+)
+      setOriginRect((prev) => ({ ...prev, left: 256 }))
+    }
+    setFsVisible(false)
+    setCamera({ x: 0, y: 0, zoom: 1 })
+    setPosition({ x: 0, y: 0 })
+    sessionStorage.setItem("preview-fullscreen", "false")
+    // After animation, switch to relative
+    setTimeout(() => {
+      setFullscreen(false)
+      if (isMobile) {
+        setShowControls(false)
+        sessionStorage.setItem("preview-controls", "false")
+      }
+    }, 300)
+  }
+
+  return (
+    <>
+      {/* Inline placeholder — reserves space in the document flow when fullscreen */}
+      {fullscreen && (
+        <div ref={inlineRef} className="border-y border-border h-full" />
+      )}
+
+      {/* Single preview container — animates between inline and fullscreen */}
+      <div
+        ref={!fullscreen ? inlineRef : undefined}
+        className={`
+          bg-background border-y border-border overflow-hidden flex flex-col
+          ${fullscreen ? "fixed z-40 transition-[top,bottom,left,right] duration-300 ease-in-out motion-reduce:transition-none" : "relative h-full"}
+        `}
+        style={fullscreen ? {
+          top: fsVisible ? "3.5rem" : originRect.top,
+          bottom: fsVisible ? 0 : originRect.bottom,
+          left: fsVisible ? 0 : originRect.left,
+          right: fsVisible ? 0 : originRect.right,
+        } : undefined}
+      >
+        <div className="flex-1 min-h-0 relative">
+          <PreviewCanvas
+            showControls={showControls}
+            onToggleControls={hasControls ? toggleControls : undefined}
+            fullscreen={fullscreen}
+            onToggleFullscreen={fullscreen ? exitFullscreen : enterFullscreen}
+            camera={camera}
+            onCameraChange={setCamera}
+            position={position}
+            onPositionChange={setPosition}
+          >
+            {children}
+          </PreviewCanvas>
+
+          {/* Desktop props panel — floating card top-right */}
+          {hasControls && (
+            <aside
+              className={`
+                hidden md:flex flex-col absolute top-14 right-3 z-50 w-56 rounded-lg border border-border bg-background shadow-xl overflow-hidden transition-all duration-300 ease-in-out motion-reduce:transition-none
+                ${showControls ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2 pointer-events-none"}
+              `}
+              style={{ maxHeight: fullscreen ? "calc(100vh - 10rem)" : "calc(100% - 4.5rem)" }}
+            >
+              <div className="shrink-0 px-4 pt-4 pb-3">
+                <p className="text-xs font-semibold text-foreground">
+                  {t("controls.title")}
+                </p>
+              </div>
+              <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+                <PreviewControls entries={controls} />
+              </div>
+            </aside>
+          )}
+        </div>
+
+        {/* Mobile props panel — inline, pushes preview up */}
+        {hasControls && (
+          <div
+            className="md:hidden shrink-0 border-t border-border bg-background transition-[max-height] duration-300 ease-in-out motion-reduce:transition-none overflow-hidden flex flex-col"
+            style={{ maxHeight: showControls ? "50vh" : 0 }}
+          >
+            <div className="shrink-0 px-4 pt-4 pb-3">
+              <p className="text-xs font-semibold text-foreground">
+                {t("controls.title")}
+              </p>
+            </div>
+            <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-8">
+              <PreviewControls entries={controls} />
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}