@opendocsdev/cli 0.2.0

package/src/engine/src/components/Tabs.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * Tabs - Content tabs component
+ * Server-renders tab buttons to eliminate FOUC
+ * Uses Web Components for click handlers
+ */
+interface TabInfo {
+  label: string;
+  icon?: string;
+}
+
+interface Props {
+  "data-tabs"?: string;
+  class?: string;
+}
+
+const { "data-tabs": tabsJson, class: className } = Astro.props;
+
+// Parse tabs from remark plugin (or empty array for fallback)
+const tabs: TabInfo[] = tabsJson ? JSON.parse(tabsJson) : [];
+const showTabs = tabs.length > 1;
+---
+
+<content-tabs
+  class:list={["tabs-container my-6 block", className]}
+  data-tabs={tabsJson}
+>
+  {showTabs && (
+    <nav
+      class="tabs-nav flex border-b border-[var(--color-border)]"
+      role="tablist"
+      aria-label="Content tabs"
+    >
+      {tabs.map((tab, i) => (
+        <button
+          type="button"
+          role="tab"
+          class:list={[
+            "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
+            i === 0
+              ? "border-[var(--color-primary)] text-[var(--color-primary)]"
+              : "border-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]",
+          ]}
+          aria-selected={i === 0 ? "true" : "false"}
+          tabindex={i === 0 ? 0 : -1}
+          data-index={i}
+        >
+          {tab.icon && (
+            <span class="mr-2" aria-hidden="true">
+              {tab.icon}
+            </span>
+          )}
+          {tab.label}
+        </button>
+      ))}
+    </nav>
+  )}
+  <div class="tabs-panels pt-4">
+    <slot />
+  </div>
+</content-tabs>
+
+<script>
+  class ContentTabsElement extends HTMLElement {
+    private panels: HTMLElement[] = [];
+
+    connectedCallback() {
+      const panelsContainer = this.querySelector(".tabs-panels");
+      if (!panelsContainer) return;
+
+      this.panels = Array.from(
+        panelsContainer.querySelectorAll(":scope > .tab-panel")
+      );
+
+      if (this.panels.length === 0) return;
+
+      // Initialize panels with data-active attribute
+      this.initPanels();
+
+      // If only one panel, just mark it active
+      if (this.panels.length === 1) {
+        this.panels[0].setAttribute("data-active", "true");
+        return;
+      }
+
+      // Add click handlers to server-rendered buttons
+      this.attachClickHandlers();
+    }
+
+    private initPanels() {
+      this.panels.forEach((panel, index) => {
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("data-active", String(index === 0));
+      });
+    }
+
+    private attachClickHandlers() {
+      const buttons = this.querySelectorAll<HTMLButtonElement>(
+        ".tabs-nav button"
+      );
+      buttons.forEach((btn, index) => {
+        btn.addEventListener("click", () => this.setActiveTab(index));
+      });
+    }
+
+    private setActiveTab(index: number) {
+      // Update buttons
+      const buttons = this.querySelectorAll<HTMLButtonElement>(
+        ".tabs-nav button"
+      );
+      buttons.forEach((btn, i) => {
+        const isActive = i === index;
+        btn.className = this.getTabClass(isActive);
+        btn.setAttribute("aria-selected", String(isActive));
+        btn.tabIndex = isActive ? 0 : -1;
+      });
+
+      // Update panels
+      this.panels.forEach((panel, i) => {
+        panel.setAttribute("data-active", String(i === index));
+      });
+    }
+
+    private getTabClass(isActive: boolean): string {
+      const base =
+        "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px";
+      const active = "border-[var(--color-primary)] text-[var(--color-primary)]";
+      const inactive =
+        "border-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]";
+      return `${base} ${isActive ? active : inactive}`;
+    }
+  }
+
+  customElements.define("content-tabs", ContentTabsElement);
+</script>

package/src/engine/src/components/index.ts

@@ -0,0 +1,107 @@
+/**
+ * MDX Components for opendocs
+ *
+ * These Astro components are available for use in MDX files:
+ *
+ * - Callout: Info, warning, error, and tip callouts
+ *   Props: type?: "info" | "warning" | "error" | "tip"
+ *
+ * - CodeGroup: Tabbed code blocks
+ *   Props: labels?: string[]
+ *
+ * - Card: Linked content cards with title and description
+ *   Props: title: string, description?: string, href?: string, icon?: string
+ *
+ * - CardGroup: Grid layout wrapper for Card components
+ *   Props: cols?: 1 | 2 | 3 | 4 (default: 2)
+ *
+ * - Steps: Numbered step lists with vertical line connector
+ *   Props: title?: string
+ *
+ * - Tabs: Tabbed content sections for organizing related content
+ *   Usage: <Tabs><Tab label="First" icon="🚀">Content</Tab></Tabs>
+ *
+ * Usage in MDX:
+ * ```mdx
+ * import { Callout, CodeGroup, Card, Steps } from '../components';
+ *
+ * <Callout type="info">This is an info callout</Callout>
+ *
+ * <CodeGroup labels={["npm", "yarn", "pnpm"]}>
+ *   ```bash
+ *   npm install
+ *   ```
+ *   ```bash
+ *   yarn
+ *   ```
+ *   ```bash
+ *   pnpm install
+ *   ```
+ * </CodeGroup>
+ *
+ * <Card title="Getting Started" description="Learn how to get started" href="/getting-started" />
+ *
+ * <Steps>
+ *   ### Step 1
+ *   First, do this...
+ *
+ *   ### Step 2
+ *   Then, do that...
+ * </Steps>
+ * ```
+ */
+
+// Component type definitions for documentation
+export interface CalloutProps {
+  type?: "info" | "warning" | "error" | "tip";
+}
+
+export interface CodeGroupProps {
+  labels?: string[];
+}
+
+export interface CardProps {
+  title: string;
+  description?: string;
+  href?: string;
+  icon?: string;
+}
+
+export interface CardGroupProps {
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export interface StepsProps {
+  title?: string;
+}
+
+export interface TabsProps {
+  // Tabs container has no props, it wraps Tab children
+}
+
+export interface TabProps {
+  label: string;
+  icon?: string;
+}
+
+/**
+ * Analytics Component Props
+ * Tracks pageviews to the backend analytics endpoint
+ */
+export interface AnalyticsProps {
+  path?: string;
+}
+
+// Export component names for reference (actual components are .astro files)
+export const componentNames = [
+  "Callout",
+  "CodeGroup",
+  "Card",
+  "CardGroup",
+  "Steps",
+  "Tabs",
+  "Tab",
+  "Sidebar",
+  "TableOfContents",
+  "Analytics",
+] as const;

package/src/engine/src/components/react/ApiPlayground/AuthSection.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import type { AuthState } from "./types";
+import { DEFAULT_AUTH_STATE } from "./constants";
+
+interface AuthSectionProps {
+  authState: AuthState;
+  onAuthChange: (auth: AuthState) => void;
+}
+
+export function AuthSection({ authState, onAuthChange }: AuthSectionProps) {
+  return (
+    <div className="space-y-3 max-w-full overflow-hidden">
+      <select
+        value={authState.type}
+        onChange={(e) => onAuthChange({ ...authState, type: e.target.value as AuthState["type"] })}
+        className="w-full px-3 py-2 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+      >
+        <option value="none">No Authentication</option>
+        <option value="bearer">Bearer Token</option>
+        <option value="apikey">API Key</option>
+        <option value="basic">Basic Auth</option>
+      </select>
+
+      {authState.type === "bearer" && (
+        <input
+          type="password"
+          value={authState.bearer.token}
+          onChange={(e) => onAuthChange({ ...authState, bearer: { token: e.target.value } })}
+          placeholder="Enter token"
+          className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+        />
+      )}
+
+      {authState.type === "apikey" && (
+        <div className="space-y-2">
+          <input
+            type="text"
+            value={authState.apikey.name}
+            onChange={(e) => onAuthChange({ ...authState, apikey: { ...authState.apikey, name: e.target.value } })}
+            placeholder="Key name (e.g., X-API-Key)"
+            className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+          <input
+            type="password"
+            value={authState.apikey.value}
+            onChange={(e) => onAuthChange({ ...authState, apikey: { ...authState.apikey, value: e.target.value } })}
+            placeholder="Key value"
+            className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+          <select
+            value={authState.apikey.location}
+            onChange={(e) => onAuthChange({ ...authState, apikey: { ...authState.apikey, location: e.target.value as "header" | "query" } })}
+            className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+          >
+            <option value="header">Header</option>
+            <option value="query">Query Parameter</option>
+          </select>
+        </div>
+      )}
+
+      {authState.type === "basic" && (
+        <div className="space-y-2">
+          <input
+            type="text"
+            value={authState.basic.username}
+            onChange={(e) => onAuthChange({ ...authState, basic: { ...authState.basic, username: e.target.value } })}
+            placeholder="Username"
+            className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+          <input
+            type="password"
+            value={authState.basic.password}
+            onChange={(e) => onAuthChange({ ...authState, basic: { ...authState.basic, password: e.target.value } })}
+            placeholder="Password"
+            className="w-full px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+        </div>
+      )}
+
+      {authState.type !== "none" && (
+        <button
+          type="button"
+          onClick={() => onAuthChange(DEFAULT_AUTH_STATE)}
+          className="text-sm text-[var(--color-muted)] hover:text-[var(--color-error)]"
+        >
+          Clear Saved Auth
+        </button>
+      )}
+    </div>
+  );
+}

package/src/engine/src/components/react/ApiPlayground/CodeBlock.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect, useRef } from "react";
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+  className?: string;
+}
+
+// Cache for highlighted code to avoid re-highlighting same content
+const highlightCache = new Map<string, string>();
+
+export function CodeBlock({ code, language, className = "" }: CodeBlockProps) {
+  const [html, setHtml] = useState<string>("");
+  const shikiRef = useRef<typeof import("shiki") | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const cacheKey = `${language}:${code}`;
+
+    // Check cache first
+    const cached = highlightCache.get(cacheKey);
+    if (cached) {
+      setHtml(cached);
+      return;
+    }
+
+    // Dynamically import shiki only when needed (bundle-dynamic-imports)
+    const highlight = async () => {
+      if (!shikiRef.current) {
+        shikiRef.current = await import("shiki");
+      }
+      const result = await shikiRef.current.codeToHtml(code, {
+        lang: language,
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        defaultColor: false,
+      });
+      if (!cancelled) {
+        highlightCache.set(cacheKey, result);
+        setHtml(result);
+      }
+    };
+
+    highlight();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language]);
+
+  if (!html) {
+    return (
+      <pre className={`text-sm font-mono bg-[var(--color-surface-raised)] text-[var(--color-foreground)] p-3 sm:p-4 rounded-xl overflow-x-auto border border-[var(--color-border)] max-w-full ${className}`}>
+        <code className="break-all whitespace-pre-wrap sm:whitespace-pre">{code}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className={`max-w-full overflow-hidden [&>pre]:!m-0 [&>pre]:!rounded-xl [&>pre]:!p-3 [&>pre]:sm:!p-4 [&>pre]:text-sm [&>pre]:overflow-x-auto [&>pre]:!bg-[var(--color-surface-raised)] [&>pre]:border [&>pre]:border-[var(--color-border)] [&>pre]:max-w-full [&_code]:break-all [&_code]:whitespace-pre-wrap [&_code]:sm:whitespace-pre ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/engine/src/components/react/ApiPlayground/CodeSnippets.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import type { CodeLanguage } from "./types";
+import { CodeBlock } from "./CodeBlock";
+import { getLanguageForHighlighter } from "./generators";
+
+interface CodeSnippetsProps {
+  codeSnippet: string;
+  currentLang: CodeLanguage;
+  onLangChange: (lang: CodeLanguage) => void;
+}
+
+const LANGUAGES: { value: CodeLanguage; label: string }[] = [
+  { value: "curl", label: "curl" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "python", label: "Python" },
+];
+
+export function CodeSnippets({ codeSnippet, currentLang, onLangChange }: CodeSnippetsProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(codeSnippet);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.debug("Failed to copy to clipboard:", err);
+    }
+  };
+
+  return (
+    <div className="p-3 sm:p-4 border-b border-[var(--color-border)] max-w-full overflow-hidden">
+      <h4 className="text-xs font-semibold text-[var(--color-muted)] uppercase tracking-wider mb-3">
+        Code Snippets
+      </h4>
+
+      <div className="flex flex-wrap gap-1 mb-3 max-w-full">
+        {LANGUAGES.map(({ value, label }) => (
+          <button
+            key={value}
+            type="button"
+            onClick={() => onLangChange(value)}
+            className={`px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium rounded-md transition-colors ${
+              currentLang === value
+                ? "bg-[var(--color-primary-light)] text-[var(--color-primary)]"
+                : "text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface-raised)]"
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      <div className="relative max-w-full overflow-hidden">
+        <CodeBlock code={codeSnippet} language={getLanguageForHighlighter(currentLang)} />
+        <button
+          type="button"
+          onClick={copyCode}
+          className="absolute top-2 right-2 px-1.5 sm:px-2 py-0.5 sm:py-1 text-[10px] sm:text-xs font-medium text-[var(--color-muted)] hover:text-[var(--color-foreground)] bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded z-10"
+        >
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/engine/src/components/react/ApiPlayground/CollapsibleSection.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ChevronDown } from "lucide-react";
+
+interface CollapsibleSectionProps {
+  title: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CollapsibleSection({ title, expanded, onToggle, children, className = "" }: CollapsibleSectionProps) {
+  return (
+    <div className={`mt-4 border-t border-[var(--color-border)] pt-4 max-w-full overflow-hidden ${className}`}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex items-center justify-between w-full text-left py-2 text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-muted)]"
+      >
+        <span className="truncate mr-2">{title}</span>
+        <ChevronDown className={`w-4 h-4 flex-shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`} />
+      </button>
+      {expanded && <div className="mt-2 max-w-full overflow-hidden">{children}</div>}
+    </div>
+  );
+}

package/src/engine/src/components/react/ApiPlayground/KeyValueEditor.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { X, Plus } from "lucide-react";
+import type { KeyValue } from "./types";
+
+interface KeyValueEditorProps {
+  items: KeyValue[];
+  onChange: (items: KeyValue[]) => void;
+  keyPlaceholder: string;
+  valuePlaceholder: string;
+}
+
+export function KeyValueEditor({ items, onChange, keyPlaceholder, valuePlaceholder }: KeyValueEditorProps) {
+  const updateItem = (index: number, field: "key" | "value", value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [field]: value };
+    onChange(newItems);
+  };
+
+  const removeItem = (index: number) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  const addItem = () => {
+    onChange([...items, { key: "", value: "" }]);
+  };
+
+  return (
+    <div className="space-y-3 max-w-full overflow-hidden">
+      {items.map((item, index) => (
+        <div key={index} className="flex flex-col sm:flex-row gap-2 max-w-full">
+          <input
+            type="text"
+            value={item.key}
+            onChange={(e) => updateItem(index, "key", e.target.value)}
+            placeholder={keyPlaceholder}
+            className="w-full sm:flex-1 sm:w-auto min-w-0 px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+          />
+          <div className="flex gap-2 max-w-full">
+            <input
+              type="text"
+              value={item.value}
+              onChange={(e) => updateItem(index, "value", e.target.value)}
+              placeholder={valuePlaceholder}
+              className="flex-1 min-w-0 px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-surface)] text-[var(--color-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] font-mono"
+            />
+            <button type="button" onClick={() => removeItem(index)} className="p-1.5 text-[var(--color-muted)] hover:text-[var(--color-error)] flex-shrink-0" title="Remove">
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      ))}
+      <button type="button" onClick={addItem} className="flex items-center gap-1 text-sm text-[var(--color-primary)] hover:opacity-80">
+        <Plus className="w-4 h-4" />
+        Add
+      </button>
+    </div>
+  );
+}

package/src/engine/src/components/react/ApiPlayground/ResponseDisplay.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useMemo } from "react";
+import type { ResponseState, ErrorState } from "./types";
+import { CodeBlock } from "./CodeBlock";
+import { CollapsibleSection } from "./CollapsibleSection";
+import { Spinner } from "./Spinner";
+
+interface ResponseDisplayProps {
+  response: ResponseState | null;
+  error: ErrorState | null;
+  isLoading: boolean;
+}
+
+const getStatusColor = (status: number) => {
+  if (status >= 200 && status < 300) return "bg-[var(--color-success-light)] text-[var(--color-success)]";
+  if (status >= 400 && status < 500) return "bg-[var(--color-warning-light)] text-[var(--color-warning)]";
+  if (status >= 500) return "bg-[var(--color-error-light)] text-[var(--color-error)]";
+  return "bg-[var(--color-surface-raised)] text-[var(--color-muted)]";
+};
+
+export function ResponseDisplay({ response, error, isLoading }: ResponseDisplayProps) {
+  const [showHeaders, setShowHeaders] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const formattedBody = useMemo(() => {
+    if (!response?.body) return "";
+    try {
+      // Attempt to pretty-print JSON responses
+      return JSON.stringify(JSON.parse(response.body), null, 2);
+    } catch {
+      // Not valid JSON, return raw response body
+      return response.body;
+    }
+  }, [response?.body]);
+
+  const copyResponse = async () => {
+    try {
+      await navigator.clipboard.writeText(formattedBody);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.debug("Failed to copy to clipboard:", err);
+    }
+  };
+
+  return (
+    <div className="p-3 sm:p-4 max-w-full overflow-hidden">
+      <h4 className="text-xs font-semibold text-[var(--color-muted)] uppercase tracking-wider mb-3">Response</h4>
+      <div className="min-h-[100px] rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-3 sm:p-4 max-w-full overflow-hidden">
+        {/* Use ternary for cleaner conditional rendering */}
+        {!response && !error && !isLoading ? (
+          <p className="text-sm text-[var(--color-muted)] italic">Click "Send Request" to see the response</p>
+        ) : null}
+
+        {isLoading ? (
+          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+            <Spinner />
+            <span>Sending request...</span>
+          </div>
+        ) : null}
+
+        {error ? (
+          <div className="p-3 rounded-md bg-[var(--color-error-light)] border border-[var(--color-error)]">
+            <p className="text-sm font-medium text-[var(--color-error)]">{error.title}</p>
+            <p className="text-sm text-[var(--color-error)] mt-1 opacity-80">{error.message}</p>
+          </div>
+        ) : null}
+
+        {response ? (
+          <div>
+            <div className="flex flex-wrap items-center gap-3 mb-3">
+              <span className={`px-2 py-1 text-xs font-mono font-bold rounded ${getStatusColor(response.status)}`}>
+                {response.status}
+              </span>
+              <span className="text-sm text-[var(--color-muted)]">{response.statusText}</span>
+              <span className="text-xs text-[var(--color-muted)]">{response.time}ms</span>
+            </div>
+
+            <div className="relative max-w-full overflow-hidden">
+              <CodeBlock code={formattedBody} language="json" className="max-h-[400px]" />
+              <button
+                type="button"
+                onClick={copyResponse}
+                className="absolute top-2 right-2 px-1.5 sm:px-2 py-0.5 sm:py-1 text-[10px] sm:text-xs font-medium text-[var(--color-muted)] hover:text-[var(--color-foreground)] bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-sunken)] border border-[var(--color-border)] rounded z-10"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+
+            <CollapsibleSection
+              title="Response Headers"
+              expanded={showHeaders}
+              onToggle={() => setShowHeaders(!showHeaders)}
+              className="mt-4 border-t border-[var(--color-border)] pt-4"
+            >
+              <div className="text-xs sm:text-sm font-mono space-y-1 overflow-x-auto max-w-full">
+                {Object.entries(response.headers).map(([key, value]) => (
+                  <div key={key} className="flex flex-col sm:flex-row sm:gap-2 py-1">
+                    <span className="text-[var(--color-muted)] flex-shrink-0">{key}:</span>
+                    <span className="text-[var(--color-foreground)] break-all">{value}</span>
+                  </div>
+                ))}
+              </div>
+            </CollapsibleSection>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/engine/src/components/react/ApiPlayground/Spinner.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+
+export function Spinner() {
+  return <Loader2 className="w-4 h-4 animate-spin" />;
+}

package/src/engine/src/components/react/ApiPlayground/constants.ts

@@ -0,0 +1,16 @@
+export const METHOD_COLORS: Record<string, string> = {
+  GET: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+  POST: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+  PUT: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+  PATCH: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
+  DELETE: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+};
+
+export const AUTH_STORAGE_PREFIX = "opendocs_playground_auth_";
+
+export const DEFAULT_AUTH_STATE = {
+  type: "none" as const,
+  bearer: { token: "" },
+  apikey: { name: "", value: "", location: "header" as const },
+  basic: { username: "", password: "" },
+};