{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-interactive-api-curl-builder",
  "title": "Feature Interactive Api Curl Builder",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-interactive-api-curl-builder/FeatureInteractiveApiCurlBuilder.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Check, Copy, Globe, Play, Terminal } from 'lucide-vue-next'\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  class?: string\n}\n\nconst props = withDefaults(defineProps<FeatureInteractiveApiCurlBuilderProps>(), {\n  title: 'Composable REST APIs designed for programmatic automation.',\n  description:\n    'Synthesize type-safe HTTP payloads, test endpoints in real time, and export snippets directly to your production workflow.',\n})\n\nconst selectedMethod = ref<'GET' | 'POST'>('POST')\nconst selectedEndpoint = ref('/v1/components/bundle')\nconst selectedLanguage = ref<'curl' | 'javascript' | 'python' | 'go'>('curl')\nconst enableAstTree = ref(true)\nconst enableOklchTokens = ref(true)\nconst copiedSnippet = ref(false)\nconst isExecuting = ref(false)\nconst executionResult = ref<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\nconst generatedCode = computed(() => {\n  const payload = JSON.stringify(\n    {\n      component: 'button',\n      framework: 'vue',\n      astTree: enableAstTree.value,\n      inlineTokens: enableOklchTokens.value,\n    },\n    null,\n    2,\n  )\n\n  if (selectedLanguage.value === 'curl') {\n    return `curl -X ${selectedMethod.value} https://api.uipkge.dev${selectedEndpoint.value} \\\\\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.value === 'javascript') {\n    return `const res = await fetch(\"https://api.uipkge.dev${selectedEndpoint.value}\", {\n  method: \"${selectedMethod.value}\",\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.value === 'python') {\n    return `import requests\n\nres = requests.${selectedMethod.value.toLowerCase()}(\n    \"https://api.uipkge.dev${selectedEndpoint.value}\",\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.value}\", \"https://api.uipkge.dev${selectedEndpoint.value}\", payload)\nreq.Header.Set(\"Authorization\", \"Bearer uipkge_sec_89201\")\nres, _ := client.Do(req)`\n})\n\nasync function copySnippet() {\n  try {\n    await navigator.clipboard.writeText(generatedCode.value)\n    copiedSnippet.value = true\n    setTimeout(() => {\n      copiedSnippet.value = false\n    }, 2000)\n  } catch {\n    // fallback\n  }\n}\n\nfunction executeRequest() {\n  isExecuting.value = true\n  setTimeout(() => {\n    isExecuting.value = false\n    executionResult.value = {\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.value.includes('bundle') ? 'button' : 'tokens',\n        frameworks: ['vue', 'react'],\n        astCompiled: enableAstTree.value,\n        sizeBytes: enableAstTree.value ? 1480 : 1120,\n        oklchTokensInlined: enableOklchTokens.value ? 48 : 0,\n        edgeDeliveryTime: '0.8ms',\n      },\n    }\n  }, 350)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-interactive-api-curl-builder\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#api-builder\"\n          class=\"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 class=\"text-primary size-3.5\" />\n          <span>Interactive Edge API Console</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n      </div>\n\n      <!-- API Builder Workbench -->\n      <div class=\"mt-12 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        <!-- Left Config Parameters (5 cols) -->\n        <div class=\"space-y-4 lg:col-span-5\">\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardContent class=\"space-y-5 p-6\">\n              <div class=\"border-border flex items-center justify-between border-b pb-3\">\n                <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">Request Parameters</span>\n                <Badge variant=\"outline\" class=\"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 class=\"space-y-2\">\n                <label class=\"text-foreground text-xs font-bold\">Endpoint Path</label>\n                <div class=\"border-border bg-muted/40 flex rounded-lg border p-1\">\n                  <button\n                    v-for=\"ep in ['/v1/components/bundle', '/v1/tokens/compile']\"\n                    :key=\"ep\"\n                    type=\"button\"\n                    :class=\"\n                      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                    \"\n                    @click=\"selectedEndpoint = ep\"\n                  >\n                    {{ ep }}\n                  </button>\n                </div>\n              </div>\n\n              <!-- Payload Toggles -->\n              <div class=\"space-y-2.5 pt-2\">\n                <label class=\"text-foreground text-xs font-bold\">Payload Flags</label>\n                <div class=\"space-y-2\">\n                  <label\n                    class=\"border-border/80 bg-background hover:bg-muted/20 flex cursor-pointer items-center justify-between rounded-lg border p-3 text-xs\"\n                  >\n                    <span class=\"text-muted-foreground\">Emit AST Syntax Tree</span>\n                    <input v-model=\"enableAstTree\" type=\"checkbox\" class=\"accent-primary size-4 cursor-pointer\" />\n                  </label>\n                  <label\n                    class=\"border-border/80 bg-background hover:bg-muted/20 flex cursor-pointer items-center justify-between rounded-lg border p-3 text-xs\"\n                  >\n                    <span class=\"text-muted-foreground\">Inline OKLCH CSS Tokens</span>\n                    <input v-model=\"enableOklchTokens\" type=\"checkbox\" class=\"accent-primary size-4 cursor-pointer\" />\n                  </label>\n                </div>\n              </div>\n\n              <Button class=\"w-full gap-2 shadow-xs\" :disabled=\"isExecuting\" @click=\"executeRequest\">\n                <Play class=\"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 class=\"space-y-4 lg:col-span-7\">\n          <Card class=\"border-border bg-card overflow-hidden font-mono text-xs shadow-xs\">\n            <!-- Language Selector Tabs -->\n            <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2\">\n              <div class=\"flex items-center gap-1\">\n                <button\n                  v-for=\"lang in [\n                    { id: 'curl', label: 'cURL' },\n                    { id: 'javascript', label: 'Fetch' },\n                    { id: 'python', label: 'Python' },\n                    { id: 'go', label: 'Go' },\n                  ]\"\n                  :key=\"lang.id\"\n                  type=\"button\"\n                  :class=\"\n                    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                  \"\n                  @click=\"selectedLanguage = lang.id as any\"\n                >\n                  {{ lang.label }}\n                </button>\n              </div>\n\n              <button\n                type=\"button\"\n                class=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs transition-colors\"\n                @click=\"copySnippet\"\n              >\n                <Check v-if=\"copiedSnippet\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copiedSnippet ? 'Copied' : 'Copy' }}</span>\n              </button>\n            </div>\n\n            <CardContent class=\"bg-muted/10 p-4\">\n              <pre\n                class=\"text-foreground overflow-x-auto text-xs leading-relaxed\"\n              ><code>{{ generatedCode }}</code></pre>\n            </CardContent>\n          </Card>\n\n          <!-- Simulated Live HTTP Response -->\n          <div class=\"border-border bg-muted/30 space-y-2 rounded-xl border p-4 font-mono text-xs\">\n            <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n              <div class=\"flex items-center gap-2\">\n                <Terminal class=\"text-primary size-3.5\" />\n                <span class=\"text-foreground font-bold\">Response Payload</span>\n              </div>\n              <div class=\"flex items-center gap-3 text-xs\">\n                <span class=\"text-success font-bold\">HTTP {{ executionResult.status }} OK</span>\n                <span class=\"text-muted-foreground\">{{ executionResult.latencyMs }}ms</span>\n              </div>\n            </div>\n            <pre\n              class=\"text-muted-foreground overflow-x-auto text-xs leading-relaxed\"\n            ><code>{{ JSON.stringify(executionResult.data, null, 2) }}</code></pre>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-interactive-api-curl-builder/FeatureInteractiveApiCurlBuilder.vue"
    },
    {
      "path": "packages/registry-vue/blocks/feature-interactive-api-curl-builder/index.ts",
      "content": "export { default as FeatureInteractiveApiCurlBuilder } from './FeatureInteractiveApiCurlBuilder.vue'\nexport type { FeatureInteractiveApiCurlBuilderProps } from './FeatureInteractiveApiCurlBuilder.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-interactive-api-curl-builder/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Interactive API cURL builder and live payload testing sandbox with multi-language code export.",
  "categories": [
    "feature",
    "marketing"
  ]
}