{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-interactive-api-curl-builder",
  "title": "Feature Interactive Api Curl Builder",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-interactive-api-curl-builder/FeatureInteractiveApiCurlBuilder.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Copy, Globe, Play, Terminal } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface FeatureInteractiveApiCurlBuilderProps {\n  title?: string\n  description?: string\n  className?: string\n}\n\nexport function FeatureInteractiveApiCurlBuilder({\n  title = 'Composable REST APIs designed for programmatic automation.',\n  description = 'Synthesize type-safe HTTP payloads, test endpoints in real time, and export snippets directly to your production workflow.',\n  className,\n}: FeatureInteractiveApiCurlBuilderProps) {\n  const [selectedMethod, setSelectedMethod] = React.useState<'GET' | 'POST'>('POST')\n  const [selectedEndpoint, setSelectedEndpoint] = React.useState('/v1/components/bundle')\n  const [selectedLanguage, setSelectedLanguage] = React.useState<'curl' | 'javascript' | 'python' | 'go'>('curl')\n  const [enableAstTree, setEnableAstTree] = React.useState(true)\n  const [enableOklchTokens, setEnableOklchTokens] = React.useState(true)\n  const [copiedSnippet, setCopiedSnippet] = React.useState(false)\n  const [isExecuting, setIsExecuting] = React.useState(false)\n  const [executionResult, setExecutionResult] = React.useState<any>({\n    status: 200,\n    latencyMs: 14,\n    data: {\n      bundleId: 'pkg_9981x2',\n      name: 'button',\n      frameworks: ['vue', 'react'],\n      astCompiled: true,\n      sizeBytes: 1480,\n      oklchTokensInlined: 48,\n      edgeDeliveryTime: '0.8ms',\n    },\n  })\n\n  const generatedCode = React.useMemo(() => {\n    const payload = JSON.stringify(\n      {\n        component: 'button',\n        framework: 'vue',\n        astTree: enableAstTree,\n        inlineTokens: enableOklchTokens,\n      },\n      null,\n      2,\n    )\n\n    if (selectedLanguage === 'curl') {\n      return `curl -X ${selectedMethod} https://api.uipkge.dev${selectedEndpoint} \\\\\n  -H \"Authorization: Bearer uipkge_sec_89201\" \\\\\n  -H \"Content-Type: application/json\" \\\\\n  -d '${payload.replace(/\\n/g, '\\n  ')}'`\n    }\n\n    if (selectedLanguage === 'javascript') {\n      return `const res = await fetch(\"https://api.uipkge.dev${selectedEndpoint}\", {\n  method: \"${selectedMethod}\",\n  headers: {\n    \"Authorization\": \"Bearer uipkge_sec_89201\",\n    \"Content-Type\": \"application/json\"\n  },\n  body: JSON.stringify(${payload})\n});\nconst data = await res.json();`\n    }\n\n    if (selectedLanguage === 'python') {\n      return `import requests\n\nres = requests.${selectedMethod.toLowerCase()}(\n    \"https://api.uipkge.dev${selectedEndpoint}\",\n    headers={\"Authorization\": \"Bearer uipkge_sec_89201\"},\n    json=${payload.replace(/true/g, 'True').replace(/false/g, 'False')}\n)\ndata = res.json()`\n    }\n\n    return `// Go HTTP Request\nreq, _ := http.NewRequest(\"${selectedMethod}\", \"https://api.uipkge.dev${selectedEndpoint}\", payload)\nreq.Header.Set(\"Authorization\", \"Bearer uipkge_sec_89201\")\nres, _ := client.Do(req)`\n  }, [selectedMethod, selectedEndpoint, selectedLanguage, enableAstTree, enableOklchTokens])\n\n  async function copySnippet() {\n    try {\n      await navigator.clipboard.writeText(generatedCode)\n      setCopiedSnippet(true)\n      setTimeout(() => {\n        setCopiedSnippet(false)\n      }, 2000)\n    } catch {\n      // fallback\n    }\n  }\n\n  function executeRequest() {\n    setIsExecuting(true)\n    setTimeout(() => {\n      setIsExecuting(false)\n      setExecutionResult({\n        status: 200,\n        latencyMs: Math.floor(Math.random() * 8) + 11,\n        data: {\n          bundleId: `pkg_${Math.random().toString(36).substring(2, 8)}`,\n          name: selectedEndpoint.includes('bundle') ? 'button' : 'tokens',\n          frameworks: ['vue', 'react'],\n          astCompiled: enableAstTree,\n          sizeBytes: enableAstTree ? 1480 : 1120,\n          oklchTokensInlined: enableOklchTokens ? 48 : 0,\n          edgeDeliveryTime: '0.8ms',\n        },\n      })\n    }, 350)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-interactive-api-curl-builder\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#api-builder\"\n            className=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n          >\n            <Globe className=\"text-primary size-3.5\" />\n            <span>Interactive Edge API Console</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n        </div>\n\n        {/* API Builder Workbench */}\n        <div className=\"mt-12 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n          {/* Left Config Parameters (5 cols) */}\n          <div className=\"space-y-4 lg:col-span-5\">\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardContent className=\"space-y-5 p-6\">\n                <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                  <span className=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n                    Request Parameters\n                  </span>\n                  <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success font-mono text-xs\">\n                    Edge v1\n                  </Badge>\n                </div>\n\n                {/* Endpoint Selector */}\n                <div className=\"space-y-2\">\n                  <label className=\"text-foreground text-xs font-bold\">Endpoint Path</label>\n                  <div className=\"border-border bg-muted/40 flex rounded-lg border p-1\">\n                    {['/v1/components/bundle', '/v1/tokens/compile'].map((ep) => (\n                      <button\n                        key={ep}\n                        type=\"button\"\n                        className={cn(\n                          'flex-1 rounded-md py-1 font-mono text-xs transition-colors',\n                          selectedEndpoint === ep\n                            ? 'bg-background text-foreground font-bold shadow-2xs'\n                            : 'text-muted-foreground hover:text-foreground',\n                        )}\n                        onClick={() => setSelectedEndpoint(ep)}\n                      >\n                        {ep}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Payload Toggles */}\n                <div className=\"space-y-2.5 pt-2\">\n                  <label className=\"text-foreground text-xs font-bold\">Payload Flags</label>\n                  <div className=\"space-y-2\">\n                    <label className=\"border-border/80 bg-background hover:bg-muted/20 flex cursor-pointer items-center justify-between rounded-lg border p-3 text-xs\">\n                      <span className=\"text-muted-foreground\">Emit AST Syntax Tree</span>\n                      <input\n                        type=\"checkbox\"\n                        checked={enableAstTree}\n                        onChange={(e) => setEnableAstTree(e.target.checked)}\n                        className=\"accent-primary size-4 cursor-pointer\"\n                      />\n                    </label>\n                    <label className=\"border-border/80 bg-background hover:bg-muted/20 flex cursor-pointer items-center justify-between rounded-lg border p-3 text-xs\">\n                      <span className=\"text-muted-foreground\">Inline OKLCH CSS Tokens</span>\n                      <input\n                        type=\"checkbox\"\n                        checked={enableOklchTokens}\n                        onChange={(e) => setEnableOklchTokens(e.target.checked)}\n                        className=\"accent-primary size-4 cursor-pointer\"\n                      />\n                    </label>\n                  </div>\n                </div>\n\n                <Button className=\"w-full gap-2 shadow-xs\" disabled={isExecuting} onClick={executeRequest}>\n                  <Play className=\"fill-primary-foreground size-3.5\" />\n                  <span>{isExecuting ? 'Executing Edge Call...' : 'Send Live HTTP Request'}</span>\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Right Code Preview & Simulated Response (7 cols) */}\n          <div className=\"space-y-4 lg:col-span-7\">\n            <Card className=\"border-border bg-card overflow-hidden font-mono text-xs shadow-xs\">\n              {/* Language Selector Tabs */}\n              <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2\">\n                <div className=\"flex items-center gap-1\">\n                  {[\n                    { id: 'curl', label: 'cURL' },\n                    { id: 'javascript', label: 'Fetch' },\n                    { id: 'python', label: 'Python' },\n                    { id: 'go', label: 'Go' },\n                  ].map((lang) => (\n                    <button\n                      key={lang.id}\n                      type=\"button\"\n                      className={cn(\n                        'rounded px-2.5 py-1 text-xs transition-colors',\n                        selectedLanguage === lang.id\n                          ? 'bg-background text-foreground font-bold shadow-2xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                      )}\n                      onClick={() => setSelectedLanguage(lang.id as any)}\n                    >\n                      {lang.label}\n                    </button>\n                  ))}\n                </div>\n\n                <button\n                  type=\"button\"\n                  className=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs transition-colors\"\n                  onClick={copySnippet}\n                >\n                  {copiedSnippet ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copiedSnippet ? 'Copied' : 'Copy'}</span>\n                </button>\n              </div>\n\n              <CardContent className=\"bg-muted/10 p-4\">\n                <pre className=\"text-foreground overflow-x-auto text-xs leading-relaxed\">\n                  <code>{generatedCode}</code>\n                </pre>\n              </CardContent>\n            </Card>\n\n            {/* Simulated Live HTTP Response */}\n            <div className=\"border-border bg-muted/30 space-y-2 rounded-xl border p-4 font-mono text-xs\">\n              <div className=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                <div className=\"flex items-center gap-2\">\n                  <Terminal className=\"text-primary size-3.5\" />\n                  <span className=\"text-foreground font-bold\">Response Payload</span>\n                </div>\n                <div className=\"flex items-center gap-3 text-xs\">\n                  <span className=\"text-success font-bold\">HTTP {executionResult.status} OK</span>\n                  <span className=\"text-muted-foreground\">{executionResult.latencyMs}ms</span>\n                </div>\n              </div>\n              <pre className=\"text-muted-foreground overflow-x-auto text-xs leading-relaxed\">\n                <code>{JSON.stringify(executionResult.data, null, 2)}</code>\n              </pre>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-interactive-api-curl-builder/FeatureInteractiveApiCurlBuilder.tsx"
    },
    {
      "path": "packages/registry-react/blocks/feature-interactive-api-curl-builder/index.ts",
      "content": "export { FeatureInteractiveApiCurlBuilder } from './FeatureInteractiveApiCurlBuilder'\nexport type { FeatureInteractiveApiCurlBuilderProps } from './FeatureInteractiveApiCurlBuilder'\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-interactive-api-curl-builder/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Interactive API cURL builder and live payload testing sandbox with multi-language code export.",
  "categories": [
    "feature",
    "marketing"
  ]
}