{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-resizable-preview",
  "type": "registry:component",
  "registryDependencies": [
    "button",
    "badge",
    "resizable"
  ],
  "files": [
    {
      "path": "components/domain-ui/responsive-resizable-preview/index.tsx",
      "content": "\"use client\";\nimport { useState, useEffect, useRef, useMemo } from \"react\";\nimport type { ImperativePanelHandle } from \"react-resizable-panels\";\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/components/ui/resizable\";\nimport { defaultBreakpoints, getBreakpoint } from \"./breakpoints\";\nimport type { Breakpoint, BreakpointConfig } from \"./breakpoints\";\nimport { Toolbar, ScaleBar, Settings } from \"./settings\";\nimport { cn } from \"@/lib/utils\";\n\n// Types\nexport interface PreviewConfig {\n  darkMode?: boolean;\n  showToolbar?: boolean;\n  showScale?: boolean;\n  showLabels?: boolean;\n}\n\ninterface BasePreviewProps {\n  className?: string;\n  breakpoints?: BreakpointConfig[];\n  config?: PreviewConfig;\n}\n\ninterface ResponsiveResizablePreviewProps extends BasePreviewProps {\n  children?: React.ReactNode;\n}\n\ninterface RRChildPreviewProps extends BasePreviewProps {\n  children?: React.ReactNode;\n}\n\ninterface RRIFramePreviewProps extends BasePreviewProps {\n  srcUrl: string;\n  height?: number;\n}\n\nconst defaultConfig = {\n  darkMode: false,\n  showToolbar: true,\n  showScale: true,\n  showLabels: true,\n};\n\n// PreviewPanel component - the core resizable container\ninterface PreviewPanelProps {\n  children: React.ReactNode;\n  className?: string;\n  panelRef: React.RefObject<ImperativePanelHandle | null>;\n  contentRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction PreviewPanel({\n  children,\n  className,\n  panelRef,\n  contentRef,\n}: PreviewPanelProps) {\n  const [isHandleResizing, setIsHandleResizing] = useState(false);\n\n  const bgPattern = `url(\"data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E\")`;\n\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"!overflow-visible relative z-5 border-0 border-[#0000001f] bg-gray-300 bg-clip-padding dark:bg-gray-600\"\n      style={{ backgroundImage: bgPattern }}\n    >\n      <ResizablePanel\n        ref={panelRef}\n        className={cn(\n          `border ${className}`,\n          !isHandleResizing && \"transition-all duration-200 ease-in-out\"\n        )}\n        defaultSize={100}\n        minSize={20}\n      >\n        <div ref={contentRef} className=\"@container\">{children}</div>\n      </ResizablePanel>\n      <ResizableHandle\n        withHandle\n        className=\"z-50 w-0\"\n        onDragging={(e) => setIsHandleResizing(e)}\n      />\n      <ResizablePanel defaultSize={0} minSize={0} />\n    </ResizablePanelGroup>\n  );\n}\n\nexport function ResponsiveResizablePreview({\n  children,\n  className,\n  breakpoints = defaultBreakpoints,\n  config: initialConfig = defaultConfig,\n}: ResponsiveResizablePreviewProps) {\n  const [config, setConfig] = useState<PreviewConfig>(initialConfig);\n\n  const {\n    darkMode = false,\n    showToolbar = true,\n    showScale = true,\n    showLabels = true,\n  } = config;\n\n  const resizablePanelRef = useRef<ImperativePanelHandle>(null);\n  const [width, setWidth] = useState<number>(0);\n  const [maxWidth, setMaxWidth] = useState<number>(0);\n  const panelContentRef = useRef<HTMLDivElement>(null);\n  const rprRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (width > maxWidth) {\n      setMaxWidth(width);\n    }\n  }, [width, maxWidth]);\n\n  useEffect(() => {\n    if (!panelContentRef.current) {\n      return;\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      if (entries[0]) {\n        const entryWidth = entries[0].contentRect.width;\n        setWidth(Math.round(entryWidth));\n      }\n    });\n\n    observer.observe(panelContentRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    setConfig(initialConfig);\n  }, [initialConfig]);\n\n  const availableBreakpoints = useMemo(() => {\n    return breakpoints.map((breakpoint: Breakpoint) => {\n      breakpoint.percentage = (breakpoint.minWidthPx * 100) / maxWidth;\n\n      if (breakpoint.percentage > 100) {\n        breakpoint.percentage = 100;\n        breakpoint.show = false;\n      } else {\n        breakpoint.show = true;\n      }\n      return breakpoint;\n    });\n  }, [maxWidth, breakpoints]);\n\n  const currentBreakpoint = getBreakpoint(width, breakpoints);\n\n  return (\n    <div>\n      <div\n        className={cn(darkMode && \"dark dark\")}\n        data-theme={darkMode ? \"dark\" : \"light\"}\n      >\n        <div\n          className=\"relative grid w-full gap-4 rounded-md bg-transparent p-0 text-gray-800 dark:bg-transparent dark:text-white\"\n          ref={rprRef}\n        >\n          {showToolbar && (\n            <>\n              <div className=\"flex min-h-9 items-center justify-between space-x-2\">\n                <div className=\"flex-grow\">\n                  <Toolbar\n                    width={width}\n                    maxWidth={maxWidth}\n                    breakpointTitle={currentBreakpoint?.title}\n                    availableBreakpoints={availableBreakpoints}\n                    onBreakpointChange={(value) => {\n                      if (resizablePanelRef?.current) {\n                        resizablePanelRef.current.resize(\n                          Number.parseFloat(value)\n                        );\n                      }\n                    }}\n                    panelRef={panelContentRef} // Add this line\n                  />\n                </div>\n\n                <div className=\"h-7 justify-end p-[2px]\">\n                  <Settings\n                    config={config}\n                    onChange={(newConfig) => {\n                      setConfig(newConfig);\n                    }}\n                    rprRef={rprRef}\n                  />\n                </div>\n              </div>\n\n              <ScaleBar\n                width={width}\n                maxWidth={maxWidth}\n                currentBreakpoint={currentBreakpoint?.title}\n                breakpoints={availableBreakpoints}\n                showLabels={showLabels}\n                showScale={showScale}\n              />\n            </>\n          )}\n\n          <PreviewPanel\n            panelRef={resizablePanelRef}\n            contentRef={panelContentRef}\n            className={className}\n          >\n            {children}\n          </PreviewPanel>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// RRChildPreview component - renders children directly\nexport function RRChildPreview({\n  children,\n  breakpoints,\n  config,\n  className,\n}: RRChildPreviewProps) {\n  return (\n    <ResponsiveResizablePreview\n      breakpoints={breakpoints}\n      config={config}\n      className={className}\n    >\n      {children}\n    </ResponsiveResizablePreview>\n  );\n}\n\n// RRIFramePreview component - renders content in an iframe\nexport function RRIFramePreview({\n  srcUrl,\n  height,\n  breakpoints,\n  config,\n  className,\n}: RRIFramePreviewProps) {\n  return (\n    <ResponsiveResizablePreview\n      breakpoints={breakpoints}\n      config={config}\n      className={className}\n    >\n      <iframe\n        allow=\"cross-origin-isolated\"\n        src={srcUrl}\n        height={height || 930}\n        className=\"relative z-20 hidden w-full bg-gray-50 md:block\"\n        title={`Preview of ${srcUrl}`}\n      />\n    </ResponsiveResizablePreview>\n  );\n}\n\n\n// Export utilities\nexport * from \"./breakpoints\";\n",
      "type": "registry:component"
    },
    {
      "path": "components/domain-ui/responsive-resizable-preview/breakpoints.ts",
      "content": "import {\n  DoorClosedIcon,\n  Monitor,\n  MonitorCheck,\n  MonitorDot,\n  MonitorPlay,\n  MonitorSpeaker,\n  MonitorUp,\n  Smartphone,\n  Tablet,\n  TabletSmartphone,\n  Tv,\n} from \"lucide-react\";\n\ninterface IconProps {\n  className?: string;\n}\n\nexport interface BreakpointConfig {\n  title: string;\n  minWidthRem: number;\n  minWidthPx: number;\n  icon: React.ComponentType<IconProps>;\n}\n\nexport interface Breakpoint extends BreakpointConfig {\n  percentage?: number;\n  show?: boolean;\n}\n\nexport const defaultBreakpoints: BreakpointConfig[] = [\n  {\n    title: \"3xs\",\n    minWidthRem: 16,\n    minWidthPx: 256,\n    icon: DoorClosedIcon,\n  },\n  {\n    title: \"2xs\",\n    minWidthRem: 18,\n    minWidthPx: 288,\n    icon: Smartphone,\n  },\n  {\n    title: \"xs\",\n    minWidthRem: 20,\n    minWidthPx: 320,\n    icon: Smartphone,\n  },\n  {\n    title: \"sm\",\n    minWidthRem: 24,\n    minWidthPx: 384,\n    icon: TabletSmartphone,\n  },\n  {\n    title: \"md\",\n    minWidthRem: 28,\n    minWidthPx: 448,\n    icon: Tablet,\n  },\n  {\n    title: \"lg\",\n    minWidthRem: 32,\n    minWidthPx: 512,\n    icon: Monitor,\n  },\n  {\n    title: \"xl\",\n    minWidthRem: 36,\n    minWidthPx: 576,\n    icon: MonitorUp,\n  },\n  {\n    title: \"2xl\",\n    minWidthRem: 42,\n    minWidthPx: 672,\n    icon: Tv,\n  },\n  {\n    title: \"3xl\",\n    minWidthRem: 48,\n    minWidthPx: 768,\n    icon: MonitorPlay,\n  },\n  {\n    title: \"4xl\",\n    minWidthRem: 56,\n    minWidthPx: 896,\n    icon: Monitor,\n  },\n  {\n    title: \"5xl\",\n    minWidthRem: 64,\n    minWidthPx: 1024,\n    icon: MonitorDot,\n  },\n  {\n    title: \"6xl\",\n    minWidthRem: 72,\n    minWidthPx: 1152,\n    icon: MonitorCheck,\n  },\n  {\n    title: \"7xl\",\n    minWidthRem: 80,\n    minWidthPx: 1280,\n    icon: MonitorSpeaker,\n  },\n];\n\n// export function getBreakpoint(currentWidth: number): Breakpoint | undefined {\n//   // Sort breakpoints from largest to smallest\n//   const sortedBreakpoints = [...breakpoints].sort(\n//     (a, b) => b.minWidthPx - a.minWidthPx\n//   );\n\n//   // Find the first (largest) breakpoint where the current width is greater than or equal to its minimum\n//   return sortedBreakpoints.find(\n//     (breakpoint) => currentWidth >= breakpoint.minWidthPx\n//   );\n// }\n\nexport function getBreakpoint(\n  currentWidth: number,\n  customBreakpoints: BreakpointConfig[] = defaultBreakpoints\n): Breakpoint | undefined {\n  const sortedBreakpoints = [...customBreakpoints].sort(\n    (a, b) => b.minWidthPx - a.minWidthPx\n  );\n\n  return sortedBreakpoints.find(\n    (breakpoint) => currentWidth >= breakpoint.minWidthPx\n  );\n}\n",
      "type": "registry:lib"
    },
    {
      "path": "components/domain-ui/responsive-resizable-preview/settings.tsx",
      "content": "import {\n  LayoutPanelTop,\n  RulerIcon,\n  TextIcon,\n  SettingsIcon,\n  Camera,\n  ChevronLeft,\n  ChevronRight,\n  MaximizeIcon,\n  Pause,\n  Play,\n} from \"lucide-react\";\nimport {\n  Popover,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport type { PreviewConfig } from \"./index\";\nimport type { Breakpoint } from \"../breakpoints\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { domToPng } from \"modern-screenshot\";\n\n// ============ ScaleBar Component ============\ninterface MarkerProps {\n  label: string;\n  sublabel: string;\n  position?: number;\n  isValid?: boolean;\n  isCurrent?: boolean;\n  isDull?: boolean;\n}\n\ninterface ScaleBarProps {\n  width: number;\n  maxWidth: number;\n  currentBreakpoint?: string;\n  breakpoints: Breakpoint[];\n  showLabels?: boolean;\n  showScale?: boolean;\n}\n\ninterface SignProps {\n  position?: number;\n  isCurrent?: boolean;\n  isDull?: boolean;\n}\n\nfunction Marker({\n  label,\n  sublabel,\n  position,\n  isCurrent,\n  isValid,\n  isDull = false,\n}: MarkerProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute flex translate-x-[-50%] flex-col items-center whitespace-nowrap font-normal text-gray-400 text-xs first:translate-x-[0%] first:items-start last:translate-x-[-100%] last:items-end dark:text-gray-200\",\n        isCurrent && \"!font-bold\",\n        isValid && \"font-medium text-gray-500 dark:text-gray-300\",\n        isDull && \"font-thin\"\n      )}\n      style={position !== undefined ? { left: `${position}px` } : undefined}\n    >\n      <span className=\"text-[10px]\">{sublabel}</span>\n      <span>{label}</span>\n    </div>\n  );\n}\n\nfunction MarkerScale({\n  width,\n  maxWidth,\n  currentBreakpoint,\n  breakpoints,\n}: ScaleBarProps) {\n  return (\n    <div className=\"relative h-8 w-full\">\n      <Marker label=\"0\" sublabel=\"0px\" isDull />\n\n      {breakpoints\n        .filter((breakpoint) => breakpoint.show)\n        .map((breakpoint: Breakpoint) => (\n          <Marker\n            key={breakpoint.title}\n            label={breakpoint.title}\n            sublabel={`${breakpoint.minWidthPx}`}\n            position={breakpoint.minWidthPx}\n            isCurrent={currentBreakpoint === breakpoint.title}\n            isValid={width > breakpoint.minWidthPx}\n          />\n        ))}\n\n      <Marker\n        label=\"max\"\n        sublabel={`${maxWidth}px`}\n        position={maxWidth}\n        isDull\n      />\n    </div>\n  );\n}\n\nfunction Sign({ position, isCurrent, isDull = false }: SignProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute h-full border-gray-300 border-l\",\n        isCurrent && \"font-bold\",\n        isDull && \"opacity-50\"\n      )}\n      style={position !== undefined ? { left: `${position}px` } : undefined}\n    />\n  );\n}\n\nfunction SignScale({\n  maxWidth,\n  currentBreakpoint,\n  breakpoints,\n}: ScaleBarProps) {\n  return (\n    <div className=\"relative h-4 w-full\">\n      <div className=\"absolute top-1/2 w-full border-gray-300 border-t\" />\n      <Sign isDull />\n\n      {breakpoints\n        .filter((breakpoint) => breakpoint.show)\n        .map((breakpoint: Breakpoint) => (\n          <Sign\n            key={breakpoint.title}\n            position={breakpoint.minWidthPx}\n            isCurrent={currentBreakpoint === breakpoint.title}\n          />\n        ))}\n\n      <Sign position={maxWidth} isDull />\n    </div>\n  );\n}\n\nexport function ScaleBar({\n  width,\n  maxWidth,\n  currentBreakpoint,\n  breakpoints,\n  showScale,\n  showLabels,\n}: ScaleBarProps) {\n  return (\n    <div className=\"grid gap-1\">\n      {showLabels && (\n        <MarkerScale\n          width={width}\n          maxWidth={maxWidth}\n          currentBreakpoint={currentBreakpoint}\n          breakpoints={breakpoints}\n        />\n      )}\n\n      {showScale && (\n        <SignScale\n          width={width}\n          maxWidth={maxWidth}\n          currentBreakpoint={currentBreakpoint}\n          breakpoints={breakpoints}\n        />\n      )}\n    </div>\n  );\n}\n\n// ============ Toolbar Component ============\ninterface ToolbarProps {\n  width: number;\n  maxWidth: number;\n  breakpointTitle?: string;\n  availableBreakpoints: Breakpoint[];\n  onBreakpointChange: (value: string) => void;\n  panelRef: React.RefObject<HTMLDivElement | null>;\n}\n\nexport function Toolbar({\n  width,\n  maxWidth,\n  breakpointTitle,\n  availableBreakpoints,\n  onBreakpointChange,\n  panelRef,\n}: ToolbarProps) {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const intervalRef = useRef<number | null>(null);\n  const currentIndex = availableBreakpoints.findIndex(\n    (bp) => bp.title === breakpointTitle\n  );\n\n  const handleScreenshot = async () => {\n    if (panelRef.current) {\n      try {\n        const dataUrl = await domToPng(panelRef.current);\n        const link = document.createElement(\"a\");\n        link.download = `preview-${width}px.png`;\n        link.href = dataUrl;\n        link.click();\n      } catch (_err) {\n        // Screenshot failed - error handled silently\n      }\n    }\n  };\n\n  const handlePrevBreakpoint = () => {\n    if (currentIndex > 0) {\n      const prevBp = availableBreakpoints[currentIndex - 1];\n      onBreakpointChange(prevBp?.percentage?.toString() || \"0\");\n    }\n  };\n\n  const handleNextBreakpoint = () => {\n    if (currentIndex < availableBreakpoints.length - 1) {\n      const nextBp = availableBreakpoints[currentIndex + 1];\n      onBreakpointChange(nextBp?.percentage?.toString() || \"0\");\n    }\n  };\n\n  const play = useCallback(() => {\n    let index = 0;\n    const breakpoints = availableBreakpoints;\n\n    const start = () => {\n      intervalRef.current = window.setInterval(() => {\n        const bp = breakpoints[index];\n        onBreakpointChange(bp?.percentage?.toString() || \"100\");\n        //index = (index + 1) % breakpoints.length;\n        index++;\n\n        if (index >= breakpoints.length) {\n          onBreakpointChange(\"100\");\n          stop();\n          setIsPlaying(false);\n        }\n      }, 500);\n    };\n\n    const stop = () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n\n    return { start, stop };\n  }, [availableBreakpoints, onBreakpointChange]);\n\n  const togglePlay = () => {\n    const player = play();\n    if (isPlaying) {\n      player.stop();\n    } else {\n      player.start();\n    }\n    setIsPlaying(!isPlaying);\n  };\n\n  useEffect(() => {\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <div className=\"mr-[12px] flex grow items-center justify-between\">\n      <div className=\"hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex\">\n        <TooltipProvider>\n          <ToggleGroup type=\"multiple\" className=\"flex items-center\">\n            <ToggleGroupItem\n              value=\"play\"\n              onClick={togglePlay}\n              data-state=\"off\"\n              className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n            >\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  {isPlaying ? (\n                    <Pause className=\"h-3.5 w-3.5\" />\n                  ) : (\n                    <Play className=\"h-3.5 w-3.5\" />\n                  )}\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>{isPlaying ? \"Pause\" : \"Play\"}</p>\n                </TooltipContent>\n              </Tooltip>\n            </ToggleGroupItem>\n\n            <ToggleGroupItem\n              value=\"prev\"\n              onClick={handlePrevBreakpoint}\n              disabled={currentIndex <= 0}\n              data-state=\"off\"\n              className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n            >\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <ChevronLeft className=\"h-3.5 w-3.5\" />\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Previous Breakpoint</p>\n                </TooltipContent>\n              </Tooltip>\n            </ToggleGroupItem>\n\n            <ToggleGroupItem\n              value=\"next\"\n              onClick={handleNextBreakpoint}\n              data-state=\"off\"\n              disabled={currentIndex >= availableBreakpoints.length - 1}\n              className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n            >\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <ChevronRight className=\"h-3.5 w-3.5\" />\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Next Breakpoint</p>\n                </TooltipContent>\n              </Tooltip>\n            </ToggleGroupItem>\n\n            <ToggleGroupItem\n              value=\"screenshot\"\n              onClick={handleScreenshot}\n              data-state=\"off\"\n              className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n            >\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Camera className=\"h-3.5 w-3.5\" />\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Take Screenshot</p>\n                </TooltipContent>\n              </Tooltip>\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </TooltipProvider>\n\n        <div className=\"flex w-50 items-center gap-2\">\n          <span className=\"flex items-center gap-1 font-medium text-xs\">\n            Width: <span className=\"font-mono\">{width}px</span>\n          </span>\n\n          <span className=\"text-muted-foreground text-xs\">\n            ({Number((width / maxWidth) * 100).toFixed(0)}%)\n          </span>\n\n          {breakpointTitle && (\n            <span className=\"rounded bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary leading-[16.5px]\">\n              {breakpointTitle}\n            </span>\n          )}\n        </div>\n      </div>\n\n      <div className=\"flex hidden w-50 items-center gap-2 rounded-md bg-muted/40 px-3 py-1.5\">\n        <span className=\"flex items-center gap-1 font-medium text-xs\">\n          Width: <span className=\"font-mono\">{width}px</span>\n        </span>\n\n        <span className=\"text-muted-foreground text-xs\">\n          ({Number((width / maxWidth) * 100).toFixed(1)}%)\n        </span>\n\n        {breakpointTitle && (\n          <span className=\"rounded bg-primary/10 px-1.5 py-0.5 font-medium text-[10px] text-primary\">\n            {breakpointTitle}\n          </span>\n        )}\n      </div>\n\n      <div className=\"hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex\">\n        <TooltipProvider>\n          <ToggleGroup\n            type=\"single\"\n            defaultValue=\"100\"\n            onValueChange={onBreakpointChange}\n            className=\"flex items-center\"\n          >\n            {availableBreakpoints\n              .filter((breakpoint) => breakpoint.show)\n              .map((breakpoint: Breakpoint) => {\n                const Icon = breakpoint.icon;\n                return (\n                  <ToggleGroupItem\n                    data-state={\n                      breakpointTitle === breakpoint.title ? \"on\" : \"off\"\n                    }\n                    value={breakpoint?.percentage?.toString() || \"0\"}\n                    key={breakpoint.title}\n                    className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n                    title={`${breakpoint.title} (${breakpoint.minWidthPx}px)`}\n                  >\n                    {/* {breakpoint?.percentage?.toString() || \"0\"} */}\n\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Icon className=\"h-3.5 w-3.5\" />\n                      </TooltipTrigger>\n                      <TooltipContent>\n                        <p>\n                          {breakpoint.title} ({breakpoint.minWidthPx}px)\n                        </p>\n                      </TooltipContent>\n                    </Tooltip>\n                  </ToggleGroupItem>\n                );\n              })}\n\n            <ToggleGroupItem\n              data-state=\"off\"\n              value=\"100\"\n              className=\"h-[22px] w-[22px] min-w-0 rounded-sm p-0\"\n            >\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <MaximizeIcon className=\"h-3.5 w-3.5\" />\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Full Width</p>\n                </TooltipContent>\n              </Tooltip>\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n\n// ============ Settings Component ============\ninterface SettingsProps {\n  config: PreviewConfig;\n  onChange: (config: PreviewConfig) => void;\n  rprRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  portalRef,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  portalRef?: React.RefObject<HTMLDivElement | null>;\n}) {\n  return (\n    <PopoverPrimitive.Portal container={portalRef?.current}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function Settings({ config, onChange, rprRef }: SettingsProps) {\n  const toggleItems = [\n    { key: \"showToolbar\", icon: LayoutPanelTop },\n    { key: \"showLabels\", icon: TextIcon },\n    { key: \"showScale\", icon: RulerIcon },\n  ] as const;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className=\"h-[22px] w-[22px] rounded-sm p-0\">\n          <SettingsIcon className=\"h-3.5 w-3.5\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent portalRef={rprRef} className=\"w-fit\" data-side=\"top\">\n        <ToggleGroup type=\"multiple\" variant=\"outline\" className=\"flex gap-1\">\n          {toggleItems.map(({ key, icon: Icon }) => (\n            <ToggleGroupItem\n              key={key}\n              value={key}\n              data-state={config[key] ? \"on\" : \"off\"}\n              onClick={() => onChange({ ...config, [key]: !config[key] })}\n              className=\"p-2\"\n            >\n              <Icon className=\"h-4 w-4\" />\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "preview",
      "responsive",
      "resizable",
      "breakpoint",
      "testing",
      "development",
      "layout",
      "viewport"
    ]
  }
}