Docs primitives

<script lang="ts">
  import { Callout, Steps } from '@codeatlasdev/ui';
</script>

<div class="ca-prose prose">
  <h2 id="demo-prerequisites">Prerequisites</h2>
  <p>
    You need an <strong>API key</strong> and a connected session. The <code>x-api-key</code> header
    identifies the organization and <code>x-instance</code> picks the session.
  </p>
  <h2 id="demo-auth">Authentication</h2>
  <h3 id="demo-header">The x-api-key header</h3>
  <p>Send the key in the <code>x-api-key</code> header on every request.</p>
  <Callout type="tip">Use one key per environment so you can revoke one without touching production.</Callout>
  <Callout type="caution">Never expose the key in front-end code.</Callout>
  <Steps>
    <ol>
      <li><p><strong>Create a session</strong></p><p><code>POST /sessions</code> returns the session <code>id</code>.</p></li>
      <li><p><strong>Connect with a QR code</strong></p><p>Scan it from Linked devices in the mobile app.</p></li>
    </ol>
  </Steps>
  <h2 id="demo-send">Send a message</h2>
  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
  <div class="ca-table-wrap" tabindex="0" role="region" aria-label="Request fields">
    <table>
      <thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead>
      <tbody>
        <tr><td><code>to</code></td><td>string</td><td>Number with country code, no symbols. Example: 5511999990000</td></tr>
        <tr><td><code>text</code></td><td>string</td><td>Message body, up to 4096 characters.</td></tr>
      </tbody>
    </table>
  </div>
</div>

<style>
  .prose { width: 100%; max-width: 100%; }
</style>

<script lang="ts">
  import { CodeTab, CodeTabs } from '@codeatlasdev/ui';

  const curl = `curl -X POST https://api.example.com/messages/text \\
  -H "x-api-key: YOUR_API_KEY" \\
  -H "x-instance: my-session" \\
  -d '{"to":"5511999990000","text":"Hello"}'`;
  const node = `await fetch("https://api.example.com/messages/text", {
  method: "POST",
  headers: { "x-api-key": process.env.API_KEY, "x-instance": "my-session" },
  body: JSON.stringify({ to: "5511999990000", text: "Hello" }),
});`;
  const curlList = `curl https://api.example.com/sessions -H "x-api-key: YOUR_API_KEY"`;
  const nodeList = `await fetch("https://api.example.com/sessions", { headers: { "x-api-key": KEY } });`;
</script>

<div class="ca-prose wrap">
  <CodeTabs sync="demo-lang">
    <CodeTab label="cURL">
      <div class="ca-code"><pre><code>{curl}</code></pre></div>
    </CodeTab>
    <CodeTab label="Node.js">
      <div class="ca-code"><pre><code>{node}</code></pre></div>
    </CodeTab>
  </CodeTabs>
  <CodeTabs sync="demo-lang">
    <CodeTab label="cURL">
      <div class="ca-code"><pre><code>{curlList}</code></pre></div>
    </CodeTab>
    <CodeTab label="Node.js">
      <div class="ca-code"><pre><code>{nodeList}</code></pre></div>
    </CodeTab>
  </CodeTabs>
</div>

<style>
  .wrap { width: 100%; max-width: 100%; }
</style>

<script lang="ts">
  import { CardGrid, LinkCard, MethodBadge } from '@codeatlasdev/ui';
</script>

<div class="wrap">
  <CardGrid>
    <LinkCard title="Quick start" description="From install to your first request in two minutes." href="#top" />
    <LinkCard title="Webhooks" description="Real-time events with retries and signatures." href="#top" />
  </CardGrid>
  <div class="methods">
    <MethodBadge method="GET" />
    <MethodBadge method="POST" />
    <MethodBadge method="PUT" />
    <MethodBadge method="PATCH" />
    <MethodBadge method="DELETE" />
  </div>
</div>

<style>
  .wrap { width: 100%; display: grid; gap: 16px; }
  .methods { display: flex; flex-wrap: wrap; gap: 12px; }
</style>

<script lang="ts">
  import { DocsNav, TableOfContents, type DocsHeading, type DocsNavGroup } from '@codeatlasdev/ui';

  const headings: DocsHeading[] = [
    { id: 'demo-prerequisites', text: 'Prerequisites', depth: 2 },
    { id: 'demo-auth', text: 'Authentication', depth: 2 },
    { id: 'demo-header', text: 'The x-api-key header', depth: 3 },
    { id: 'demo-send', text: 'Send a message', depth: 2 },
  ];

  const groups: DocsNavGroup[] = [
    {
      label: 'Get started',
      items: [
        { href: '/docs/docs-kit/docs/', title: 'Introduction' },
        { href: '/x/quick-start', title: 'Quick start' },
      ],
    },
    {
      label: 'Messages',
      items: [
        { href: '/x/send-text', title: 'Send text', badge: 'POST' },
        { href: '/x/list', title: 'List messages', badge: 'GET' },
        { href: '/x/edit', title: 'Edit message', badge: 'PUT' },
        { href: '/x/delete', title: 'Delete message', badge: 'DELETE' },
      ],
    },
  ];
</script>

<div class="pair">
  <DocsNav {groups} pathname="/docs/docs-kit/docs/" onNavigate={() => {}} />
  <TableOfContents {headings} variant="inline" />
</div>

<style>
  .pair {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    align-items: start;
  }
</style>

<script lang="ts">
  import { Button, DocsSearch, type DocsSearchEntry } from '@codeatlasdev/ui';

  let open = $state(false);
  let picked = $state('');

  const index: DocsSearchEntry[] = [
    {
      href: '/x/send-text',
      title: 'Send text',
      section: 'API',
      description: 'Sends a text message to a number or group.',
      headings: [{ text: 'Request body', id: 'body' }],
      text: 'POST /messages/text with x-api-key and x-instance.',
    },
    {
      href: '/x/webhooks',
      title: 'Webhooks',
      section: 'Guide',
      description: 'Receive events in real time.',
      headings: [{ text: 'HMAC signature', id: 'hmac-signature' }],
      text: 'Retries with backoff and an HMAC signature.',
    },
  ];
</script>

<Button variant="outlined" onclick={() => (open = true)}>Open search</Button>
{#if picked}<span class="picked" aria-live="polite">Selected: <code>{picked}</code></span>{/if}
<DocsSearch bind:open {index} onselect={(href) => (picked = href)} />

<style>
  .picked { font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
  .picked code { font-family: var(--ca-font-mono); color: var(--ca-brand-text); }
</style>