{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "balloon",
  "title": "Balloon",
  "description": "Speech-balloon callout annotation with mitered tail and marker target dot.",
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json"
  ],
  "files": [
    {
      "path": "ui/balloon.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nexport interface BalloonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Tail horizontal offset in pixels relative to the balloon center (-36 to +36) */\n  tailOffset?: number;\n  /** Whether to show the marker-yellow target dot at the tip of the tail */\n  showDot?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * Standalone speech-balloon annotation with mitered tail and seam cover.\n * Uses the same geometry as ToneAreaChart's peak callout.\n */\nexport function Balloon({\n  tailOffset = 0,\n  showDot = true,\n  className = '',\n  children,\n  ...rest\n}: BalloonProps) {\n  const clamped = Math.max(-36, Math.min(36, tailOffset));\n  const svgW = 120;\n  const svgH = 26;\n  const tailX = svgW / 2 + clamped * 0.4;\n  const px = svgW / 2 + clamped;\n  const py = svgH - 5;\n\n  return (\n    <div className={`f12-balloon-standalone${className ? ` ${className}` : ''}`} {...rest}>\n      <div className=\"f12-balloon\">\n        <span\n          className=\"f12-balloon-gap\"\n          aria-hidden=\"true\"\n          style={{ left: `calc(50% + ${clamped * 0.4 - 5}px)` }}\n        />\n        {children}\n      </div>\n      <svg\n        width={svgW}\n        height={svgH}\n        className=\"f12-balloon-standalone-svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          className=\"f12-tail\"\n          d={`M${tailX - 6},0 L${px - (px - tailX) * 0.15},${py - 7} L${tailX + 6},0`}\n        />\n        {showDot && <circle className=\"f12-peak-dot\" cx={px} cy={py} r=\"4\" />}\n      </svg>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/frame12/balloon.tsx"
    }
  ],
  "type": "registry:ui"
}