{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "api-documentation-page",
  "title": "Api Documentation Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/api-documentation-page/ApiDocumentationPage.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { Check, Copy, CornerDownRight, Globe, Server, ShieldCheck, Terminal, Zap } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\ntype LanguageKey = 'curl' | 'node' | 'python' | 'go' | 'ruby'\ntype StatusKey = '200' | '400' | '401'\n\nconst selectedLang = ref<LanguageKey>('curl')\nconst selectedStatus = ref<StatusKey>('200')\nconst copiedEndpoint = ref(false)\nconst copiedRequest = ref(false)\nconst copiedResponse = ref(false)\n\nconst endpointUrl = 'https://api.acme.com/v1/customers/subscriptions'\nconst endpointPath = '/v1/customers/subscriptions'\n\ninterface HeaderItem {\n  name: string\n  type: string\n  required: boolean\n  sample: string\n  description: string\n}\n\nconst headersList: HeaderItem[] = [\n  {\n    name: 'Authorization',\n    type: 'string',\n    required: true,\n    sample: 'Bearer uipkge_live_51Msz...',\n    description: 'Secret API key prefixed with uipkge_live_ or sk_test_. Pass in the HTTP Authorization header.',\n  },\n  {\n    name: 'Content-Type',\n    type: 'string',\n    required: true,\n    sample: 'application/json',\n    description: 'Specifies the media type of the request body. Must be application/json.',\n  },\n  {\n    name: 'Idempotency-Key',\n    type: 'string (UUID)',\n    required: false,\n    sample: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',\n    description: 'Unique client-generated key that prevents duplicate executions if a request is retried.',\n  },\n]\n\ninterface NestedParam {\n  name: string\n  type: string\n  required: boolean\n  description: string\n  example?: string\n}\n\ninterface BodyParam {\n  name: string\n  type: string\n  required: boolean\n  description: string\n  example?: string\n  nested?: NestedParam[]\n}\n\nconst bodyParams: BodyParam[] = [\n  {\n    name: 'customer_id',\n    type: 'string',\n    required: true,\n    description: 'Unique customer identifier for the subscriber. Must begin with the prefix cus_.',\n    example: '\"cus_N63vKZbI8O8yWp\"',\n  },\n  {\n    name: 'plan_id',\n    type: 'string',\n    required: true,\n    description: 'Identifier of the subscription tier to enroll the customer into.',\n    example: '\"plan_pro_monthly\"',\n  },\n  {\n    name: 'items',\n    type: 'array of objects',\n    required: true,\n    description: 'List of subscription line items defining the base plan and any optional recurring addons.',\n    nested: [\n      {\n        name: 'items[].price_id',\n        type: 'string',\n        required: true,\n        description: 'Unique price object identifier corresponding to a catalog product.',\n        example: '\"price_1Msz82eZvKYlo2C\"',\n      },\n      {\n        name: 'items[].quantity',\n        type: 'integer',\n        required: false,\n        description: 'Unit quantity of the specified price item. Defaults to 1 if omitted.',\n        example: '1',\n      },\n    ],\n  },\n  {\n    name: 'payment_method_id',\n    type: 'string',\n    required: false,\n    description: 'Attached payment method ID (pm_...) to charge. If omitted, uses the customer default payment source.',\n    example: '\"pm_1OdVq82eZvKYlo2C\"',\n  },\n  {\n    name: 'billing_cycle_anchor',\n    type: 'integer (timestamp)',\n    required: false,\n    description: 'Future Unix timestamp that marks the beginning of recurring billing cycles.',\n    example: '1717200000',\n  },\n  {\n    name: 'trial_period_days',\n    type: 'integer',\n    required: false,\n    description: 'Number of zero-charge trial days before regular billing begins (1 to 90).',\n    example: '14',\n  },\n  {\n    name: 'coupon_code',\n    type: 'string',\n    required: false,\n    description: 'Valid discount or promotional coupon applied to initial invoices.',\n    example: '\"LAUNCH2026\"',\n  },\n  {\n    name: 'metadata',\n    type: 'object',\n    required: false,\n    description: 'Arbitrary key-value map for attribution and custom IDs. Supports up to 50 keys, max 500 chars/value.',\n    example: '{\"referrer\": \"onboarding_flow\"}',\n  },\n]\n\ninterface ResponseAttr {\n  name: string\n  type: string\n  description: string\n  example: string\n}\n\nconst responseAttributes: ResponseAttr[] = [\n  {\n    name: 'id',\n    type: 'string',\n    description: 'Unique identifier for the subscription entity, prefixed with sub_.',\n    example: '\"sub_1Om48B2eZvKYlo2CqO8k2\"',\n  },\n  {\n    name: 'object',\n    type: 'string',\n    description: 'String representing the object type. Always subscription.',\n    example: '\"subscription\"',\n  },\n  {\n    name: 'customer',\n    type: 'string',\n    description: 'Customer identifier associated with this subscription record.',\n    example: '\"cus_N63vKZbI8O8yWp\"',\n  },\n  {\n    name: 'status',\n    type: 'string',\n    description: 'Current lifecycle status: trialing, active, past_due, canceled, unpaid, or incomplete.',\n    example: '\"trialing\"',\n  },\n  {\n    name: 'current_period_start',\n    type: 'integer (timestamp)',\n    description: 'Unix timestamp marking the start of the current active billing cycle.',\n    example: '1717200000',\n  },\n  {\n    name: 'current_period_end',\n    type: 'integer (timestamp)',\n    description: 'Unix timestamp marking the end of the current cycle and scheduled renewal date.',\n    example: '1719792000',\n  },\n  {\n    name: 'trial_end',\n    type: 'integer (timestamp) | null',\n    description: 'Unix timestamp when the free trial period concludes and billing begins.',\n    example: '1718409600',\n  },\n  {\n    name: 'cancel_at_period_end',\n    type: 'boolean',\n    description: 'If true, the subscription will terminate automatically at the end of the current period.',\n    example: 'false',\n  },\n  {\n    name: 'latest_invoice',\n    type: 'string',\n    description: 'Identifier of the most recent invoice generated for this subscription (in_...).',\n    example: '\"in_1Om48B2eZvKYlo2Cj891\"',\n  },\n]\n\ninterface StatusPill {\n  code: StatusKey\n  label: string\n  summary: string\n  dotColor: string\n}\n\nconst statusPills: StatusPill[] = [\n  {\n    code: '200',\n    label: '200 OK',\n    summary: 'Subscription created successfully. Returns full subscription entity.',\n    dotColor: 'bg-success',\n  },\n  {\n    code: '400',\n    label: '400 Bad Request',\n    summary: 'Missing required parameters or malformed JSON payload.',\n    dotColor: 'bg-warning',\n  },\n  {\n    code: '401',\n    label: '401 Unauthorized',\n    summary: 'Missing, expired, or invalid Bearer secret API key.',\n    dotColor: 'bg-destructive',\n  },\n]\n\nconst requestSnippets: Record<LanguageKey, string> = {\n  curl: `curl -X POST https://api.acme.com/v1/customers/subscriptions \\\\\n  -H \"Authorization: Bearer uipkge_live_51Msz...\" \\\\\n  -H \"Content-Type: application/json\" \\\\\n  -H \"Idempotency-Key: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\" \\\\\n  -d '{\n    \"customer_id\": \"cus_N63vKZbI8O8yWp\",\n    \"plan_id\": \"plan_pro_monthly\",\n    \"payment_method_id\": \"pm_1OdVq82eZvKYlo2C\",\n    \"billing_cycle_anchor\": 1717200000,\n    \"items\": [\n      {\n        \"price_id\": \"price_1Msz82eZvKYlo2C\",\n        \"quantity\": 1\n      },\n      {\n        \"price_id\": \"price_addon_seats_pro\",\n        \"quantity\": 5\n      }\n    ],\n    \"trial_period_days\": 14,\n    \"coupon_code\": \"LAUNCH2026\",\n    \"metadata\": {\n      \"referrer\": \"onboarding_flow\",\n      \"account_manager\": \"priya.raman\"\n    }\n  }'`,\n  node: `import Acme from '@acme/sdk'\n\nconst acme = new Acme({\n  apiKey: process.env.ACME_SECRET_KEY,\n})\n\nconst subscription = await acme.subscriptions.create({\n  customerId: 'cus_N63vKZbI8O8yWp',\n  planId: 'plan_pro_monthly',\n  paymentMethodId: 'pm_1OdVq82eZvKYlo2C',\n  billingCycleAnchor: 1717200000,\n  items: [\n    { priceId: 'price_1Msz82eZvKYlo2C', quantity: 1 },\n    { priceId: 'price_addon_seats_pro', quantity: 5 },\n  ],\n  trialPeriodDays: 14,\n  couponCode: 'LAUNCH2026',\n  metadata: {\n    referrer: 'onboarding_flow',\n    accountManager: 'priya.raman',\n  },\n}, {\n  idempotencyKey: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',\n})\n\nconsole.log(subscription.id)`,\n  python: `import os\nimport acme\n\nacme.api_key = os.environ.get(\"ACME_SECRET_KEY\")\n\nsubscription = acme.Subscription.create(\n    customer_id=\"cus_N63vKZbI8O8yWp\",\n    plan_id=\"plan_pro_monthly\",\n    payment_method_id=\"pm_1OdVq82eZvKYlo2C\",\n    billing_cycle_anchor=1717200000,\n    items=[\n        {\"price_id\": \"price_1Msz82eZvKYlo2C\", \"quantity\": 1},\n        {\"price_id\": \"price_addon_seats_pro\", \"quantity\": 5},\n    ],\n    trial_period_days=14,\n    coupon_code=\"LAUNCH2026\",\n    metadata={\n        \"referrer\": \"onboarding_flow\",\n        \"account_manager\": \"priya.raman\",\n    },\n    idempotency_key=\"9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\",\n)\n\nprint(subscription.id)`,\n  go: `package main\n\nimport (\n\t\"context\"\n\t\"fmt\"\n\t\"os\"\n\n\t\"github.com/acme/acme-go\"\n)\n\nfunc main() {\n\tclient := acme.NewClient(os.Getenv(\"ACME_SECRET_KEY\"))\n\n\tparams := &acme.SubscriptionCreateParams{\n\t\tCustomerID:      acme.String(\"cus_N63vKZbI8O8yWp\"),\n\t\tPlanID:          acme.String(\"plan_pro_monthly\"),\n\t\tPaymentMethodID: acme.String(\"pm_1OdVq82eZvKYlo2C\"),\n\t\tItems: []*acme.SubscriptionItemParams{\n\t\t\t{PriceID: acme.String(\"price_1Msz82eZvKYlo2C\"), Quantity: acme.Int64(1)},\n\t\t\t{PriceID: acme.String(\"price_addon_seats_pro\"), Quantity: acme.Int64(5)},\n\t\t},\n\t\tTrialPeriodDays: acme.Int64(14),\n\t\tCouponCode:      acme.String(\"LAUNCH2026\"),\n\t\tMetadata: map[string]string{\n\t\t\t\"referrer\":        \"onboarding_flow\",\n\t\t\t\"account_manager\": \"priya.raman\",\n\t\t},\n\t}\n\n\tsub, err := client.Subscriptions.New(context.Background(), params)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\n\tfmt.Printf(\"Created subscription: %s\\\\n\", sub.ID)\n}`,\n  ruby: `require \"acme\"\n\nAcme.api_key = ENV[\"ACME_SECRET_KEY\"]\n\nsubscription = Acme::Subscription.create(\n  {\n    customer_id: \"cus_N63vKZbI8O8yWp\",\n    plan_id: \"plan_pro_monthly\",\n    payment_method_id: \"pm_1OdVq82eZvKYlo2C\",\n    billing_cycle_anchor: 1717200000,\n    items: [\n      { price_id: \"price_1Msz82eZvKYlo2C\", quantity: 1 },\n      { price_id: \"price_addon_seats_pro\", quantity: 5 }\n    ],\n    trial_period_days: 14,\n    coupon_code: \"LAUNCH2026\",\n    metadata: {\n      referrer: \"onboarding_flow\",\n      account_manager: \"priya.raman\"\n    }\n  },\n  { idempotency_key: \"9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\" }\n)\n\nputs subscription.id`,\n}\n\nconst responseSnippets: Record<StatusKey, string> = {\n  '200': `{\n  \"id\": \"sub_1Om48B2eZvKYlo2CqO8k2\",\n  \"object\": \"subscription\",\n  \"customer\": \"cus_N63vKZbI8O8yWp\",\n  \"status\": \"trialing\",\n  \"plan\": {\n    \"id\": \"plan_pro_monthly\",\n    \"name\": \"Pro Tier Monthly\",\n    \"amount\": 4900,\n    \"currency\": \"usd\",\n    \"interval\": \"month\"\n  },\n  \"items\": {\n    \"object\": \"list\",\n    \"data\": [\n      {\n        \"id\": \"si_98f12a3bc4d5\",\n        \"price\": \"price_1Msz82eZvKYlo2C\",\n        \"quantity\": 1\n      },\n      {\n        \"id\": \"si_98f12a3bc4d6\",\n        \"price\": \"price_addon_seats_pro\",\n        \"quantity\": 5\n      }\n    ],\n    \"total_count\": 2\n  },\n  \"current_period_start\": 1717200000,\n  \"current_period_end\": 1719792000,\n  \"trial_start\": 1717200000,\n  \"trial_end\": 1718409600,\n  \"cancel_at_period_end\": false,\n  \"latest_invoice\": \"in_1Om48B2eZvKYlo2Cj891\",\n  \"metadata\": {\n    \"account_manager\": \"priya.raman\",\n    \"referrer\": \"onboarding_flow\"\n  },\n  \"created_at\": 1717200000\n}`,\n  '400': `{\n  \"error\": {\n    \"type\": \"invalid_request_error\",\n    \"code\": \"parameter_missing\",\n    \"param\": \"customer_id\",\n    \"message\": \"Missing required param: customer_id. Please provide a valid customer identifier.\",\n    \"doc_url\": \"https://api.acme.com/docs/errors#parameter_missing\"\n  }\n}`,\n  '401': `{\n  \"error\": {\n    \"type\": \"authentication_error\",\n    \"code\": \"invalid_api_key\",\n    \"message\": \"Invalid API Key provided: uipkge_live_51Msz... Check your secret key in dashboard.\",\n    \"doc_url\": \"https://api.acme.com/docs/errors#authentication\"\n  }\n}`,\n}\n\nfunction copyEndpoint() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(endpointUrl)\n    copiedEndpoint.value = true\n    setTimeout(() => {\n      copiedEndpoint.value = false\n    }, 2000)\n  }\n}\n\nfunction copyRequestSnippet() {\n  const code = requestSnippets[selectedLang.value]\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(code)\n    copiedRequest.value = true\n    setTimeout(() => {\n      copiedRequest.value = false\n    }, 2000)\n  }\n}\n\nfunction copyResponseSnippet() {\n  const json = responseSnippets[selectedStatus.value]\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(json)\n    copiedResponse.value = true\n    setTimeout(() => {\n      copiedResponse.value = false\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"api-documentation-page\"\n    :class=\"\n      cn('bg-background text-foreground border-border w-full overflow-hidden rounded-xl border shadow-xs', props.class)\n    \"\n  >\n    <!-- Top Reference Navigation Bar -->\n    <header\n      class=\"border-border bg-card/60 flex flex-wrap items-center justify-between gap-4 border-b px-4 py-3 sm:px-6\"\n    >\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n          <Server class=\"size-4\" />\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"text-foreground text-xs font-semibold\">Acme Billing API</span>\n          <span class=\"text-muted-foreground text-xs\">/</span>\n          <span class=\"text-muted-foreground text-xs\">Subscriptions</span>\n          <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">v2026-03-01</Badge>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <div class=\"border-border bg-background/80 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n          <span class=\"bg-success size-2 rounded-full\" />\n          <span class=\"text-muted-foreground font-mono text-xs\">Base:</span>\n          <span class=\"font-mono font-medium\">https://api.acme.com/v1</span>\n        </div>\n        <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1.5 text-xs\" @click=\"copyEndpoint\">\n          <Check v-if=\"copiedEndpoint\" class=\"text-success size-3\" />\n          <Copy v-else class=\"size-3\" />\n          {{ copiedEndpoint ? 'Copied URL' : 'Copy Base URL' }}\n        </Button>\n      </div>\n    </header>\n\n    <!-- Two-Column Reference Layout -->\n    <div class=\"grid grid-cols-1 lg:grid-cols-12\">\n      <!-- Left Main Column: Documentation Prose & Schema Tables (approx 58-60%) -->\n      <main class=\"border-border space-y-8 p-4 sm:p-6 lg:col-span-7 lg:border-r lg:p-8\">\n        <!-- Endpoint Section Header -->\n        <section class=\"space-y-4\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <span\n              class=\"border-success/30 bg-success/10 text-success inline-flex items-center rounded-md border px-2.5 py-0.5 font-mono text-xs font-bold tracking-wider\"\n            >\n              POST\n            </span>\n            <span class=\"text-foreground font-mono text-sm font-semibold tracking-tight sm:text-base\">\n              {{ endpointPath }}\n            </span>\n          </div>\n\n          <div>\n            <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">Create a subscription</h1>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              Creates a new recurring subscription contract for an existing customer account. If a default payment\n              method is attached, initial recurring invoices are calculated and charged upon trial conclusion or cycle\n              anchor date.\n            </p>\n          </div>\n\n          <!-- Metadata Badges -->\n          <div class=\"flex flex-wrap items-center gap-2 pt-1\">\n            <div\n              class=\"border-border bg-card text-muted-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\"\n            >\n              <Zap class=\"text-warning size-3.5\" />\n              <span>Idempotent:</span>\n              <span class=\"text-foreground font-medium\">Yes (via Idempotency-Key)</span>\n            </div>\n\n            <div\n              class=\"border-border bg-card text-muted-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\"\n            >\n              <ShieldCheck class=\"text-success size-3.5\" />\n              <span>Auth:</span>\n              <span class=\"text-foreground font-medium\">Bearer Secret Key</span>\n            </div>\n\n            <div\n              class=\"border-border bg-card text-muted-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\"\n            >\n              <Globe class=\"text-foreground/70 size-3.5\" />\n              <span>Rate Limit:</span>\n              <span class=\"text-foreground font-medium\">100 req/min</span>\n            </div>\n          </div>\n        </section>\n\n        <Separator />\n\n        <!-- Request Headers -->\n        <section class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <h2 class=\"text-foreground text-xs font-semibold tracking-wider uppercase\">Request Headers</h2>\n            <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">HTTP/1.1 & HTTP/2</Badge>\n          </div>\n\n          <Card class=\"border-border overflow-hidden border shadow-none\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow class=\"bg-muted/40 hover:bg-muted/40\">\n                    <TableHead class=\"text-xs font-semibold\">Header</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Type</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Requirement</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Description</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow v-for=\"header in headersList\" :key=\"header.name\" class=\"text-xs\">\n                    <TableCell class=\"text-foreground font-mono font-medium\">\n                      {{ header.name }}\n                    </TableCell>\n                    <TableCell>\n                      <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                        {{ header.type }}\n                      </Badge>\n                    </TableCell>\n                    <TableCell>\n                      <Badge\n                        v-if=\"header.required\"\n                        class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs\"\n                      >\n                        REQUIRED\n                      </Badge>\n                      <span v-else class=\"text-muted-foreground text-xs\">optional</span>\n                    </TableCell>\n                    <TableCell class=\"text-muted-foreground\">\n                      <p>{{ header.description }}</p>\n                      <code class=\"text-foreground/80 mt-1 inline-block font-mono text-xs\"\n                        >Sample: {{ header.sample }}</code\n                      >\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </Card>\n        </section>\n\n        <!-- Request Body Parameters -->\n        <section class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"space-y-0.5\">\n              <h2 class=\"text-foreground text-xs font-semibold tracking-wider uppercase\">Request Body Parameters</h2>\n              <p class=\"text-muted-foreground text-xs\">Provide arguments in a standard JSON payload format.</p>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs font-normal\">application/json</Badge>\n          </div>\n\n          <Card class=\"border-border overflow-hidden border shadow-none\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow class=\"bg-muted/40 hover:bg-muted/40\">\n                    <TableHead class=\"text-xs font-semibold\">Parameter</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Type</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Requirement</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Description & Constraints</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <template v-for=\"param in bodyParams\" :key=\"param.name\">\n                    <TableRow class=\"text-xs\">\n                      <TableCell class=\"text-foreground font-mono font-medium\">\n                        {{ param.name }}\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                          {{ param.type }}\n                        </Badge>\n                      </TableCell>\n                      <TableCell>\n                        <Badge\n                          v-if=\"param.required\"\n                          class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs\"\n                        >\n                          REQUIRED\n                        </Badge>\n                        <span v-else class=\"text-muted-foreground text-xs\">optional</span>\n                      </TableCell>\n                      <TableCell class=\"text-muted-foreground\">\n                        <p>{{ param.description }}</p>\n                        <div v-if=\"param.example\" class=\"mt-1\">\n                          <span class=\"text-muted-foreground text-xs\">Example: </span>\n                          <code class=\"text-foreground font-mono text-xs\">{{ param.example }}</code>\n                        </div>\n                      </TableCell>\n                    </TableRow>\n\n                    <!-- Nested Schema Rows -->\n                    <template v-if=\"param.nested\">\n                      <TableRow v-for=\"child in param.nested\" :key=\"child.name\" class=\"bg-muted/15 text-xs\">\n                        <TableCell class=\"text-foreground pl-6 font-mono text-xs font-medium\">\n                          <div class=\"flex items-center gap-1.5\">\n                            <CornerDownRight class=\"text-muted-foreground size-3 shrink-0\" />\n                            <span>{{ child.name }}</span>\n                          </div>\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\" class=\"font-mono text-xs font-normal\">\n                            {{ child.type }}\n                          </Badge>\n                        </TableCell>\n                        <TableCell>\n                          <Badge\n                            v-if=\"child.required\"\n                            class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs\"\n                          >\n                            REQUIRED\n                          </Badge>\n                          <span v-else class=\"text-muted-foreground text-xs\">optional</span>\n                        </TableCell>\n                        <TableCell class=\"text-muted-foreground\">\n                          <p>{{ child.description }}</p>\n                          <div v-if=\"child.example\" class=\"mt-1\">\n                            <span class=\"text-muted-foreground text-xs\">Example: </span>\n                            <code class=\"text-foreground font-mono text-xs\">{{ child.example }}</code>\n                          </div>\n                        </TableCell>\n                      </TableRow>\n                    </template>\n                  </template>\n                </TableBody>\n              </Table>\n            </div>\n          </Card>\n        </section>\n\n        <!-- Response Schema Attributes -->\n        <section class=\"space-y-3\">\n          <div class=\"space-y-0.5\">\n            <h2 class=\"text-foreground text-xs font-semibold tracking-wider uppercase\">Response Object Attributes</h2>\n            <p class=\"text-muted-foreground text-xs\">\n              Properties returned in the 200 OK HTTP JSON payload representation.\n            </p>\n          </div>\n\n          <Card class=\"border-border overflow-hidden border shadow-none\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow class=\"bg-muted/40 hover:bg-muted/40\">\n                    <TableHead class=\"text-xs font-semibold\">Attribute</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Type</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Description</TableHead>\n                    <TableHead class=\"text-xs font-semibold\">Sample Value</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow v-for=\"attr in responseAttributes\" :key=\"attr.name\" class=\"text-xs\">\n                    <TableCell class=\"text-foreground font-mono font-medium\">\n                      {{ attr.name }}\n                    </TableCell>\n                    <TableCell>\n                      <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                        {{ attr.type }}\n                      </Badge>\n                    </TableCell>\n                    <TableCell class=\"text-muted-foreground\">\n                      {{ attr.description }}\n                    </TableCell>\n                    <TableCell class=\"text-foreground/90 font-mono text-xs\">\n                      {{ attr.example }}\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </Card>\n        </section>\n      </main>\n\n      <!-- Right Column: Interactive Code & Response Inspector (approx 40-42%, Dark Slate) -->\n      <aside class=\"bg-muted/20 space-y-6 p-4 sm:p-6 lg:col-span-5\">\n        <div class=\"space-y-6 lg:sticky lg:top-6\">\n          <!-- Request Code Card -->\n          <div class=\"overflow-hidden rounded-xl border border-neutral-800 bg-neutral-950 text-neutral-100 shadow-md\">\n            <!-- Language Selector Tabs Header -->\n            <div\n              class=\"flex flex-wrap items-center justify-between border-b border-neutral-800 bg-neutral-900/90 px-3 py-2\"\n            >\n              <div class=\"flex items-center gap-1 overflow-x-auto\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedLang === 'curl'\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedLang = 'curl'\"\n                >\n                  cURL\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedLang === 'node'\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedLang = 'node'\"\n                >\n                  Node.js\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedLang === 'python'\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedLang = 'python'\"\n                >\n                  Python\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedLang === 'go'\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedLang = 'go'\"\n                >\n                  Go\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedLang === 'ruby'\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedLang = 'ruby'\"\n                >\n                  Ruby\n                </button>\n              </div>\n\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"h-7 shrink-0 gap-1.5 text-xs text-neutral-300 hover:bg-neutral-800 hover:text-neutral-100\"\n                @click=\"copyRequestSnippet\"\n              >\n                <Check v-if=\"copiedRequest\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                {{ copiedRequest ? 'Copied' : 'Copy' }}\n              </Button>\n            </div>\n\n            <!-- Subheader Bar -->\n            <div class=\"flex items-center justify-between border-b border-neutral-800/60 bg-neutral-950/60 px-4 py-1.5\">\n              <div class=\"flex items-center gap-2\">\n                <Terminal class=\"size-3.5 text-neutral-400\" />\n                <span class=\"font-mono text-xs text-neutral-400\">Request Example</span>\n              </div>\n              <span class=\"font-mono text-xs text-neutral-500 uppercase\">{{ selectedLang }}</span>\n            </div>\n\n            <!-- Code Body -->\n            <div class=\"max-h-[360px] overflow-auto p-4 font-mono text-xs leading-relaxed text-neutral-200\">\n              <pre class=\"whitespace-pre\"><code>{{ requestSnippets[selectedLang] }}</code></pre>\n            </div>\n          </div>\n\n          <!-- Response Code Card -->\n          <div class=\"overflow-hidden rounded-xl border border-neutral-800 bg-neutral-950 text-neutral-100 shadow-md\">\n            <!-- Response Status Tabs Header -->\n            <div\n              class=\"flex flex-wrap items-center justify-between border-b border-neutral-800 bg-neutral-900/90 px-3 py-2\"\n            >\n              <div class=\"flex items-center gap-1.5 overflow-x-auto\">\n                <span class=\"mr-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase\">Response</span>\n\n                <button\n                  v-for=\"pill in statusPills\"\n                  :key=\"pill.code\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                      selectedStatus === pill.code\n                        ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n                        : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n                    )\n                  \"\n                  @click=\"selectedStatus = pill.code\"\n                >\n                  <span :class=\"cn('size-2 rounded-full', pill.dotColor)\" />\n                  <span>{{ pill.label }}</span>\n                </button>\n              </div>\n\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"h-7 shrink-0 gap-1.5 text-xs text-neutral-300 hover:bg-neutral-800 hover:text-neutral-100\"\n                @click=\"copyResponseSnippet\"\n              >\n                <Check v-if=\"copiedResponse\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                {{ copiedResponse ? 'Copied' : 'Copy' }}\n              </Button>\n            </div>\n\n            <!-- Subheader Status Description -->\n            <div class=\"border-b border-neutral-800/60 bg-neutral-950/60 px-4 py-2 text-xs text-neutral-400\">\n              <span>{{ statusPills.find((p) => p.code === selectedStatus)?.summary }}</span>\n            </div>\n\n            <!-- JSON Response Payload -->\n            <div class=\"max-h-[380px] overflow-auto p-4 font-mono text-xs leading-relaxed text-neutral-200\">\n              <pre class=\"whitespace-pre\"><code>{{ responseSnippets[selectedStatus] }}</code></pre>\n            </div>\n          </div>\n        </div>\n      </aside>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/ApiDocumentationPage.vue"
    }
  ],
  "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",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Stripe and Mintlify style two-pane API documentation reference page with HTTP method badge, endpoint path, headers, request parameter tables with nested schema hints, response attributes, interactive multi-language code snippets (cURL, Node.js, Python, Go, Ruby), and status response tabs with copy actions.",
  "categories": [
    "devops",
    "app"
  ]
}