-
- API Reference
-
-
-
- Structured results
+## Structured results Structured results let you turn the terminal call evidence into a stable JSON object for your workflow. The schema is an extraction contract: the SDK sends the schema to CALL-E, CALL-E extracts a result from the completed call evidence, and the service validates the result before returning it. @@ -132,7 +187,7 @@ resultSchema: { When a result drives automation, add an evidence field so your system can inspect why CALL-E made the classification. -Sales handoff
+### Sales handoff Use this pattern when a prospect should be routed to a human if they ask for help or show strong interest. @@ -174,7 +229,7 @@ resultSchema: { } ``` -Appointment confirmation
+### Appointment confirmation Use this pattern when calling a business to confirm, reschedule, or cancel an appointment. @@ -204,7 +259,7 @@ resultSchema: { } ``` -Batch recipient result
+### Batch recipient result Use `recipientResultSchema` when each recipient should have their own answer. @@ -229,7 +284,7 @@ recipientResultSchema: { } ``` -Support triage
+### Support triage Use this pattern when a call should determine whether an issue was resolved or needs follow-up. @@ -266,7 +321,7 @@ resultSchema: { } ``` -Pricing or quote request
+### Pricing or quote request Use this pattern when a prospect may ask about pricing, quotes, discounts, or budget. @@ -297,7 +352,7 @@ resultSchema: { } ``` -Best practices
+### Best practices - Keep schemas focused. A small schema with clear fields is more reliable than a large schema with many optional fields. - Put enum selection rules in the field `description`. @@ -307,13 +362,13 @@ resultSchema: { - Add an evidence or summary field when the result triggers workflow automation. - Do not rely on `description` for validation. Use schema constraints for enforceable behavior. -Idempotency
+## Idempotency Pass an idempotency key when a workflow step might retry. The key maps to the `Idempotency-Key` HTTP header and prevents duplicate call creation for the same external operation. Use a stable workflow key, not a random UUID generated at each retry. -Polling and events
+## Polling and events Use `waitForResult` or `wait_for_result` for simple server-side polling. Use events when you need a developer-facing trace of the call lifecycle. diff --git a/content/guides/changelog.mdx b/content/guides/changelog.mdx index e8954e7..6ce00d6 100644 --- a/content/guides/changelog.mdx +++ b/content/guides/changelog.mdx @@ -1,10 +1,13 @@ -# What's New +--- +title: What's New +description: Track CALL-E Developer API and SDK product updates. +--- Product updates for the CALL-E Developer API and server SDKs. -June 8, 2026
+## June 8, 2026 -What's New: Developer API and server SDKs
+### What's New: Developer API and server SDKs 1. Developer API: Create outbound call tasks, retrieve call task details, list call task events, and receive terminal webhook messages from a trusted server environment. diff --git a/content/guides/errors.mdx b/content/guides/errors.mdx index 6b02584..707d65a 100644 --- a/content/guides/errors.mdx +++ b/content/guides/errors.mdx @@ -1,8 +1,11 @@ -# Errors +--- +title: Errors +description: Handle stable API errors and recovery paths. +--- CALL-E returns stable error envelopes for call task API failures. -Error envelope
+## Error envelope ```json { @@ -16,7 +19,7 @@ CALL-E returns stable error envelopes for call task API failures. SDK methods raise typed SDK errors while preserving the stable API error code and response details. -Stable error codes
+## Stable error codes - `invalid_request` - `unauthorized` @@ -38,13 +41,13 @@ SDK methods raise typed SDK errors while preserving the stable API error code an - `internal_error` - `not_found` -Recovery guidance
+## Recovery guidance `unauthorized` means the API key is missing or invalid. Check the `Authorization: Bearer` header. `forbidden` means the key is valid but not allowed to use this resource or capability. -See [Authentication](#/authentication) for API key setup, server-only usage, and environment separation. +See [Authentication](/authentication) for API key setup, server-only usage, and environment separation. `rate_limit_exceeded` means the caller should retry after backoff. diff --git a/content/guides/quickstart.mdx b/content/guides/quickstart.mdx index e7cd8e9..6eecb90 100644 --- a/content/guides/quickstart.mdx +++ b/content/guides/quickstart.mdx @@ -1,12 +1,13 @@ -# Quickstart +--- +title: Quickstart +description: Create one call and read the structured result. +--- Create a CALL-E call task, wait for the terminal result, and read the structured output. -API key -TypeScript -Python +**API key** · **TypeScript** · **Python** -Install
+## Install Install the server SDK package for your runtime: @@ -23,9 +24,9 @@ export CALLE_API_KEY="calle_test_key" You can view your API keys in the [CALL-E dashboard](https://dashboard.heycall-e.com/account/api-keys). -See [Authentication](#/authentication) for API key handling, server-only usage, and webhook secret boundaries. +See [Authentication](/authentication) for API key handling, server-only usage, and webhook secret boundaries. -Create a client
+## Create a client TypeScript: @@ -46,7 +47,7 @@ from calle import CalleClient client = CalleClient(api_key=os.environ["CALLE_API_KEY"]) ``` -Minimum request
+## Minimum request The minimum create request is task-only. Include the phone number directly in the task when CALL-E should infer the recipient from the instruction. Replace `Create and wait
+## Create and wait TypeScript: @@ -88,7 +89,7 @@ call = client.calls.create_and_wait( ) ``` -Read the result
+## Read the result The terminal call task includes a stable status, a schema-valid structured result, and task-level outcome fields from the post-call summary. When CALL-E cannot produce a schema-valid result from the evidence, `structured_result` is `null`. diff --git a/content/guides/sdks.mdx b/content/guides/sdks.mdx index 045d946..a1445ec 100644 --- a/content/guides/sdks.mdx +++ b/content/guides/sdks.mdx @@ -1,8 +1,11 @@ -# SDKs +--- +title: SDKs +description: Install the stable TypeScript and Python server SDKs. +--- CALL-E provides server SDKs for trusted backend services, workers, and automation systems that create and monitor call tasks. -Packages
+## Packages TypeScript package name: @@ -22,45 +25,28 @@ Python imports the package as `calle`: from calle import CalleClient ``` -Package status
+## Package status The current stable server SDK packages are: - TypeScript: `@call-e/calle@0.2.0` - Python: `calle-ai==0.2.0` -Source repositories
+## Source repositories The SDKs are maintained as separate repositories so they can have independent release cadence, CI, package metadata, and language-specific examples. -| Runtime | -Package | -Repository | -
|---|---|---|
| TypeScript | -@call-e/calle |
- CALLE-AI/server-sdk-typescript | -
| Python | -calle-ai |
- CALLE-AI/server-sdk-python | -
Local examples
+## Local examples Each SDK repository includes runnable examples for the server-side call task flow. @@ -86,7 +72,7 @@ uv run python examples/webhook_server.py The webhook examples listen on `POST /calle/webhook` and verify `CALL-E-Timestamp` plus `CALL-E-Signature` before parsing JSON. -Supported methods
+## Supported methods The SDKs expose `context` as a reserved input for future SDK-side workflow data. The current SDKs do not send `context` to the API. @@ -203,7 +189,7 @@ event = client.webhooks.unwrap( ) ``` -Availability
+## Availability Install the stable server SDK package for your runtime: @@ -219,7 +205,7 @@ pnpm add @call-e/calle@0.2.0 pip install calle-ai==0.2.0 ``` -Supported scope
+## Supported scope This release does not include: diff --git a/content/guides/webhooks.mdx b/content/guides/webhooks.mdx index a70b5ef..2072b6e 100644 --- a/content/guides/webhooks.mdx +++ b/content/guides/webhooks.mdx @@ -1,10 +1,13 @@ -# Webhooks +--- +title: Webhooks +description: Verify terminal webhooks and process events safely. +--- Use webhooks when your application needs to react to terminal call task results without polling. Phone values in examples are placeholders. Real webhook payloads echo the phone numbers from your call task. -Terminal events
+## Terminal events CALL-E sends terminal webhook events: @@ -117,7 +120,7 @@ Example payload: } ``` -Signature verification
+## Signature verification Verify the signature against the raw request body before parsing JSON. The SDK helpers return the parsed event only after the timestamp and signature are valid. @@ -148,7 +151,7 @@ if event["type"] == "call.completed": print(event["data"]["id"], event["data"]["recipients"]) ``` -Example servers
+## Example servers The SDK repositories include minimal webhook servers built with runtime standard libraries: @@ -157,7 +160,7 @@ The SDK repositories include minimal webhook servers built with runtime standard Both examples listen on `POST /calle/webhook`, preserve the raw request body for signature verification, and return `200` only after `client.webhooks.unwrap` succeeds. -Idempotent handling
+## Idempotent handling Webhook delivery is at least once. Store the webhook event `id` before processing side effects so duplicate deliveries are ignored safely. diff --git a/index.html b/index.html deleted file mode 100644 index 64cf25d..0000000 --- a/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - -https://docs.heycall-e.com/${guide.slug}`)) {
+ throw new Error(`sitemap.xml does not contain /${guide.slug}.`);
+ }
+}
+
+if (
+ !llms.includes("[API Reference](/api-reference)") ||
+ !llms.includes(
+ "[OpenAPI Specification](/openapi/calle.openapi.yaml)",
+ )
+) {
+ throw new Error(
+ "llms.txt does not expose the API Reference and OpenAPI contract.",
+ );
+}
+
+if (
+ !apiInfoHtml.includes('data-pagefind-body="true"') ||
+ !apiInfoHtml.includes("CALL-E Developer API") ||
+ !apiInfoHtml.includes("Developer API contract")
+) {
+ throw new Error(
+ "API Reference entry is missing prerendered OpenAPI information.",
+ );
+}
+if (
+ apiInfoHtml.includes('window.location.href="/api-reference/') ||
+ apiInfoHtml.includes('window.location.replace("/api-reference/')
+) {
+ throw new Error("API Reference entry must not be a client-side redirect.");
+}
- assertFile(join(distRoot, assetPath.slice(2)), `asset ${assetPath}`);
+if (
+ !apiCallsHtml.includes("Create Call") ||
+ !apiCallsHtml.includes("List Call Events")
+) {
+ throw new Error("Calls API Reference is missing prerendered operations.");
+}
+if (apiCallsHtml.includes(">Try it<") || apiCallsHtml.includes(">Send Request<")) {
+ throw new Error("API Reference unexpectedly exposes a request playground.");
}
-const openApi = readFileSync(openApiPath, "utf8");
+const openApi = readRequired(
+ "openapi/calle.openapi.yaml",
+ "OpenAPI document",
+);
if (!openApi.includes("openapi: 3.1.0")) {
- throw new Error("OpenAPI document does not look like the Phase 1 contract.");
+ throw new Error("OpenAPI document does not look like the public contract.");
}
if (!openApi.includes("/v1/calls") || !openApi.includes("/calle/webhook")) {
- throw new Error("OpenAPI document is missing Phase 1 endpoint paths.");
+ throw new Error("OpenAPI document is missing public endpoint paths.");
+}
+
+if (
+ !robots.includes("User-agent: *") ||
+ !robots.includes("https://docs.heycall-e.com/sitemap.xml")
+) {
+ throw new Error("robots.txt does not allow crawling or link the sitemap.");
}
-console.log(`Verified static docs dist at ${distRoot}.`);
+console.log(`Verified Zudoku static docs dist at ${distRoot}.`);
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index cc17c2f..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { lazy, Suspense, useEffect, useMemo, useState } from "react";
-import { DocsLayout } from "./components/DocsLayout";
-import { PageToc } from "./components/PageToc";
-import { SiteHeader } from "./components/SiteHeader";
-import {
- apiReferenceNavItem,
- getGuideNavItem,
- isGuideSlug,
- type GuideSlug,
-} from "./docs-nav";
-import { GuidePage } from "./routes/GuidePage";
-
-const ApiReferencePage = lazy(() =>
- import("./routes/ApiReferencePage").then((module) => ({
- default: module.ApiReferencePage,
- })),
-);
-
-type DocsRoute =
- | {
- type: "guide";
- slug: GuideSlug;
- href: string;
- sectionId: string | null;
- }
- | {
- type: "api-reference";
- href: string;
- sectionId: string | null;
- };
-
-export function App() {
- const [hash, setHash] = useState(window.location.hash);
-
- useEffect(() => {
- function handleHashChange() {
- setHash(window.location.hash);
- }
-
- window.addEventListener("hashchange", handleHashChange);
- return () => window.removeEventListener("hashchange", handleHashChange);
- }, []);
-
- const route = useMemo(() => parseRoute(hash), [hash]);
-
- useEffect(() => {
- if (route.type !== "api-reference" || !route.sectionId) {
- return;
- }
-
- const canonicalHash = `#/api-reference?section=${encodeURIComponent(
- route.sectionId,
- )}`;
- if (hash === canonicalHash) {
- return;
- }
-
- window.history.replaceState({}, "", canonicalHash);
- setHash(canonicalHash);
- }, [hash, route]);
-
- useEffect(() => {
- if (route.type !== "guide" || !route.sectionId) {
- return;
- }
-
- window.setTimeout(() => {
- document.getElementById(route.sectionId ?? "")?.scrollIntoView({
- block: "start",
- });
- }, 0);
- }, [route]);
-
- if (route.type === "api-reference") {
- return (
-
-
-
-
- );
-}
-
-function parseRoute(hash: string): DocsRoute {
- let value = "";
- if (hash.startsWith("#/")) {
- value = hash.slice(2);
- } else if (hash.startsWith("#")) {
- value = hash.slice(1);
- }
-
- const [path, queryString = ""] = value.split("?", 2);
- const sectionId = new URLSearchParams(queryString).get("section");
-
- if (path === "api-reference") {
- return {
- type: "api-reference",
- href: apiReferenceNavItem.href,
- sectionId,
- };
- }
-
- if (
- path.startsWith("api-1/") ||
- path.startsWith("description/") ||
- path.startsWith("tag/") ||
- path === "models"
- ) {
- return {
- type: "api-reference",
- href: apiReferenceNavItem.href,
- sectionId: path.startsWith("api-1/") ? path : `api-1/${path}`,
- };
- }
-
- if (isGuideSlug(path)) {
- return {
- type: "guide",
- slug: path,
- href: `#/${path}`,
- sectionId,
- };
- }
-
- return {
- type: "guide",
- slug: "quickstart",
- href: "#/quickstart",
- sectionId: null,
- };
-}
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
deleted file mode 100644
index 143409b..0000000
--- a/src/components/CodeBlock.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Children, isValidElement, useMemo, useState } from "react";
-import type { HTMLAttributes, ReactElement, ReactNode } from "react";
-
-type CodeElementProps = {
- className?: string;
- children?: ReactNode;
-};
-
-type HighlightSpec = {
- className: string;
- pattern: RegExp;
-};
-
-const jsonHighlightSpecs: HighlightSpec[] = [
- { className: "token-comment", pattern: /\/\/.*/ },
- { className: "token-key", pattern: /"(?:\\.|[^"\\])*"(?=\s*:)/ },
- { className: "token-string", pattern: /"(?:\\.|[^"\\])*"/ },
- { className: "token-number", pattern: /-?\b\d+(?:\.\d+)?\b/ },
- { className: "token-constant", pattern: /\b(?:true|false|null)\b/ },
- { className: "token-punctuation", pattern: /[{}[\](),:]/ },
-];
-
-const tsHighlightSpecs: HighlightSpec[] = [
- { className: "token-comment", pattern: /\/\/.*/ },
- { className: "token-string", pattern: /`(?:\\.|[^`\\])*`|'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/ },
- { className: "token-keyword", pattern: /\b(?:async|await|const|export|from|function|if|import|let|new|return|type)\b/ },
- { className: "token-constant", pattern: /\b(?:false|null|true|undefined)\b/ },
- { className: "token-number", pattern: /\b\d[\d_]*(?:\.\d+)?\b/ },
- { className: "token-key", pattern: /[A-Za-z_$][\w$]*(?=\s*:)/ },
- { className: "token-function", pattern: /[A-Za-z_$][\w$]*(?=\()/ },
- { className: "token-punctuation", pattern: /[{}[\](),.;:]/ },
-];
-
-const pythonHighlightSpecs: HighlightSpec[] = [
- { className: "token-comment", pattern: /#.*/ },
- { className: "token-string", pattern: /'''[\s\S]*?'''|"""[\s\S]*?"""|'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/ },
- { className: "token-keyword", pattern: /\b(?:False|None|True|def|from|if|import|return)\b/ },
- { className: "token-number", pattern: /\b\d+(?:\.\d+)?\b/ },
- { className: "token-function", pattern: /[A-Za-z_]\w*(?=\()/ },
- { className: "token-punctuation", pattern: /[{}[\](),.:]/ },
-];
-
-const bashHighlightSpecs: HighlightSpec[] = [
- { className: "token-comment", pattern: /#.*/ },
- { className: "token-string", pattern: /'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/ },
- { className: "token-env", pattern: /\$\{?[A-Z_][A-Z0-9_]*\}?/ },
- { className: "token-shell-command", pattern: /\b(?:curl|export|node|pip|pnpm|python)\b/ },
- { className: "token-shell-flag", pattern: /--?[A-Za-z][\w-]*/ },
- { className: "token-punctuation", pattern: /[{}[\](),=]/ },
-];
-
-export function CodeBlock(props: HTMLAttributes) {
- const [copied, setCopied] = useState(false);
- const { children, ...preProps } = props;
- const codeText = useMemo(() => extractCodeText(children), [children]);
- const language = useMemo(() => extractLanguage(children), [children]);
- const highlightedCode = useMemo(
- () => highlightCode(codeText, language),
- [codeText, language],
- );
-
- async function copyCode() {
- if (!navigator.clipboard || !codeText) {
- return;
- }
-
- try {
- await navigator.clipboard.writeText(codeText);
- setCopied(true);
- window.setTimeout(() => setCopied(false), 1200);
- } catch {
- return;
- }
- }
-
- return (
-
-
-
-
- {highlightedCode}
-
-
-
- );
-}
-
-function extractCodeText(children: ReactNode): string {
- const codeElement = extractCodeElement(children);
- return String(codeElement?.props.children ?? "").trimEnd();
-}
-
-function extractLanguage(children: ReactNode): string {
- const codeElement = extractCodeElement(children);
- const languageMatch = codeElement?.props.className?.match(/language-([\w-]+)/);
- return languageMatch?.[1] ?? "";
-}
-
-function extractCodeElement(
- children: ReactNode,
-): ReactElement | null {
- const onlyChild = Children.toArray(children)[0];
- if (!isValidElement(onlyChild)) {
- return null;
- }
-
- return onlyChild as ReactElement;
-}
-
-function highlightCode(codeText: string, language: string): ReactNode[] {
- const specs = getHighlightSpecs(language);
- if (specs.length === 0) {
- return [codeText];
- }
-
- return codeText.split("\n").flatMap((line, lineIndex, lines) => {
- const highlightedLine = highlightLine(line, specs, lineIndex);
- if (lineIndex === lines.length - 1) {
- return highlightedLine;
- }
-
- return [...highlightedLine, "\n"];
- });
-}
-
-function getHighlightSpecs(language: string): HighlightSpec[] {
- if (language === "json") {
- return jsonHighlightSpecs;
- }
-
- if (language === "python" || language === "py") {
- return pythonHighlightSpecs;
- }
-
- if (language === "bash" || language === "sh" || language === "shell") {
- return bashHighlightSpecs;
- }
-
- if (language === "ts" || language === "tsx" || language === "js") {
- return tsHighlightSpecs;
- }
-
- return [];
-}
-
-function highlightLine(
- line: string,
- specs: HighlightSpec[],
- lineIndex: number,
-): ReactNode[] {
- const nodes: ReactNode[] = [];
- let plainText = "";
- let index = 0;
-
- while (index < line.length) {
- const match = findTokenMatch(line.slice(index), specs);
- if (!match) {
- plainText += line[index];
- index += 1;
- continue;
- }
-
- if (plainText) {
- nodes.push(plainText);
- plainText = "";
- }
-
- nodes.push(
-
- {match.text}
- ,
- );
- index += match.text.length;
- }
-
- if (plainText) {
- nodes.push(plainText);
- }
-
- return nodes;
-}
-
-function findTokenMatch(
- source: string,
- specs: HighlightSpec[],
-): { className: string; text: string } | null {
- for (const spec of specs) {
- const regex = new RegExp(`^(?:${spec.pattern.source})`);
- const match = regex.exec(source);
- if (match?.[0]) {
- return { className: spec.className, text: match[0] };
- }
- }
-
- return null;
-}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
deleted file mode 100644
index 8a00a2f..0000000
--- a/src/components/DocsLayout.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { ReactNode } from "react";
-import { docsNavItems, guideNavItems } from "../docs-nav";
-import { SiteHeader, type SiteHeaderSection } from "./SiteHeader";
-
-type DocsLayoutProps = {
- activeHref: string;
- children: ReactNode;
- rightRail: ReactNode;
-};
-
-export function DocsLayout({ activeHref, children, rightRail }: DocsLayoutProps) {
- const activeSection: SiteHeaderSection =
- activeHref === "#/sdks"
- ? "sdks"
- : activeHref === "#/changelog"
- ? "changelog"
- : "guides";
-
- return (
-
- {children}
-
-
-
- );
-}
diff --git a/src/components/PageToc.tsx b/src/components/PageToc.tsx
deleted file mode 100644
index ffac016..0000000
--- a/src/components/PageToc.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { TocItem } from "../docs-nav";
-
-type PageTocProps = {
- baseHref: string;
- items: TocItem[];
-};
-
-export function PageToc({ baseHref, items }: PageTocProps) {
- return (
-
- );
-}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..c1c21bd
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { ArrowUpIcon } from "zudoku/icons";
+import { Button } from "zudoku/ui/Button.js";
+
+export const ScrollToTop = () => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const updateVisibility = () => {
+ setIsVisible(window.scrollY > window.innerHeight);
+ };
+
+ updateVisibility();
+ window.addEventListener("scroll", updateVisibility, { passive: true });
+ window.addEventListener("resize", updateVisibility);
+
+ return () => {
+ window.removeEventListener("scroll", updateVisibility);
+ window.removeEventListener("resize", updateVisibility);
+ };
+ }, []);
+
+ const scrollToTop = () => {
+ const prefersReducedMotion = window.matchMedia(
+ "(prefers-reduced-motion: reduce)",
+ ).matches;
+
+ window.scrollTo({
+ top: 0,
+ behavior: prefersReducedMotion ? "auto" : "smooth",
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
deleted file mode 100644
index 637ef2f..0000000
--- a/src/components/SiteHeader.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import callELogoUrl from "../assets/call-e-logo.svg";
-
-export type SiteHeaderSection =
- | "guides"
- | "api-reference"
- | "sdks"
- | "changelog";
-
-type SiteHeaderProps = {
- activeSection: SiteHeaderSection;
-};
-
-export function SiteHeader({ activeSection }: SiteHeaderProps) {
- return (
-
-
- 
-
-
-
- );
-}
diff --git a/src/components/ThemeMenu.tsx b/src/components/ThemeMenu.tsx
new file mode 100644
index 0000000..0659f3f
--- /dev/null
+++ b/src/components/ThemeMenu.tsx
@@ -0,0 +1,112 @@
+import { forwardRef } from "react";
+import { ClientOnly } from "zudoku/components";
+import {
+ ChevronDownIcon,
+ MonitorIcon,
+ MoonIcon,
+ SunIcon,
+} from "zudoku/icons";
+import { useTheme } from "zudoku/hooks";
+import { Button, type ButtonProps } from "zudoku/ui/Button.js";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+
+const themeOptions = [
+ { value: "system", label: "System", Icon: MonitorIcon },
+ { value: "light", label: "Light", Icon: SunIcon },
+ { value: "dark", label: "Dark", Icon: MoonIcon },
+] as const;
+
+type ThemeValue = (typeof themeOptions)[number]["value"];
+
+type ThemeMenuProps = {
+ className?: string;
+ testId?: string;
+};
+
+type ThemeTriggerProps = ButtonProps & {
+ selected: ThemeValue;
+ testId?: string;
+};
+
+const ThemeTrigger = forwardRef(
+ ({ selected, testId, ...props }, ref) => {
+ const activeOption =
+ themeOptions.find(({ value }) => value === selected) ?? themeOptions[0];
+ const ActiveIcon = activeOption.Icon;
+
+ return (
+
+ );
+ },
+);
+
+ThemeTrigger.displayName = "ThemeTrigger";
+
+const ThemeMenuClient = ({ testId }: Pick) => {
+ const { theme, setTheme } = useTheme();
+ const selected: ThemeValue =
+ theme === "light" || theme === "dark" ? theme : "system";
+
+ return (
+
+
+
+
+ Appearance
+
+ {themeOptions.map(({ value, label, Icon }) => (
+
+
+ {label}
+
+ ))}
+
+
+
+ );
+};
+
+export const ThemeMenu = ({ className, testId }: ThemeMenuProps) => (
+
+ = {
- quickstart: QuickstartGuide,
- authentication: AuthenticationGuide,
- calls: CallsGuide,
- webhooks: WebhooksGuide,
- errors: ErrorsGuide,
- sdks: SdksGuide,
- changelog: ChangelogGuide,
-};
diff --git a/src/main.tsx b/src/main.tsx
deleted file mode 100644
index 489d4a4..0000000
--- a/src/main.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App";
-import "./styles/globals.css";
-
-const rootElement = document.getElementById("root");
-
-if (!rootElement) {
- throw new Error("Root element #root was not found.");
-}
-
-createRoot(rootElement).render(
-
- ,
-);
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
deleted file mode 100644
index b9014aa..0000000
--- a/src/mdx-components.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CodeBlock } from "./components/CodeBlock";
-
-export const mdxComponents = {
- pre: CodeBlock,
-};
diff --git a/src/routes/ApiReferencePage.tsx b/src/routes/ApiReferencePage.tsx
deleted file mode 100644
index a470e90..0000000
--- a/src/routes/ApiReferencePage.tsx
+++ /dev/null
@@ -1,456 +0,0 @@
-import {
- ApiReferenceReact,
- type AnyApiReferenceConfiguration,
-} from "@scalar/api-reference-react";
-import "@scalar/api-reference-react/style.css";
-import "../styles/api-reference.css";
-import { useEffect, type MouseEvent } from "react";
-import { SiteHeader } from "../components/SiteHeader";
-
-type ScalarConfiguration = AnyApiReferenceConfiguration & {
- showToolbar: "never";
-};
-
-const scalarConfiguration = {
- url: new URL("openapi/calle.openapi.yaml", document.baseURI).toString(),
- layout: "modern",
- forceDarkModeState: "light",
- hideClientButton: true,
- hideDarkModeToggle: true,
- hideTestRequestButton: true,
- showDeveloperTools: "never",
- showToolbar: "never",
- showOperationId: true,
- defaultOpenAllTags: true,
- defaultOpenFirstTag: true,
- hiddenClients: [],
- agent: {
- disabled: true,
- },
-} satisfies ScalarConfiguration;
-
-type ApiReferencePageProps = {
- activeSectionId: string | null;
-};
-
-type ApiReferenceNavGroup = {
- title: string;
- items: ApiReferenceNavItem[];
-};
-
-type ApiReferenceNavItem = {
- endpointDisplay?: string;
- title: string;
- method: "GET" | "POST" | null;
- path: string | null;
- sectionId: string;
-};
-
-const apiReferenceNavGroups: ApiReferenceNavGroup[] = [
- {
- title: "Overview",
- items: [
- {
- title: "Introduction",
- method: null,
- path: null,
- sectionId: "api-1/description/introduction",
- },
- ],
- },
- {
- title: "Calls",
- items: [
- {
- title: "Create Call",
- method: "POST",
- path: "/v1/calls",
- sectionId: "api-1/tag/calls/POST/v1/calls",
- },
- {
- title: "Get Call",
- method: "GET",
- path: "/v1/calls/{call_id}",
- sectionId: "api-1/tag/calls/GET/v1/calls/{call_id}",
- },
- {
- title: "List Call Events",
- method: "GET",
- path: "/v1/calls/{call_id}/events",
- sectionId: "api-1/tag/calls/GET/v1/calls/{call_id}/events",
- },
- ],
- },
- {
- title: "Webhooks",
- items: [
- {
- endpointDisplay: "https://{yourserver}.com/calle/webhook",
- title: "Server Message",
- method: "POST",
- path: "/calle/webhook",
- sectionId: "api-1/tag/webhooks/POST/calle/webhook",
- },
- ],
- },
-];
-
-const defaultApiReferenceSectionId =
- apiReferenceNavGroups[1]?.items[0]?.sectionId ?? null;
-
-export function ApiReferencePage({ activeSectionId }: ApiReferencePageProps) {
- const selectedSectionId = isVisibleApiReferenceSectionId(activeSectionId)
- ? activeSectionId
- : defaultApiReferenceSectionId;
-
- useEffect(() => {
- if (!selectedSectionId) {
- return;
- }
-
- const stopVisibleSection = syncVisibleApiSection(selectedSectionId);
- const stopScrolling = scrollToApiSection(selectedSectionId);
- const stopOpeningResponse = openSuccessResponseInSection(selectedSectionId);
- const stopEndpointLines = renderEndpointLines();
-
- return () => {
- stopVisibleSection();
- stopScrolling();
- stopOpeningResponse();
- stopEndpointLines();
- };
- }, [selectedSectionId]);
-
- function handleNavigationClick(
- event: MouseEvent,
- sectionId: string,
- ) {
- event.preventDefault();
- window.history.pushState(
- {},
- "",
- `#/api-reference?section=${encodeURIComponent(sectionId)}`,
- );
- window.dispatchEvent(new HashChangeEvent("hashchange"));
- scrollToApiSection(sectionId);
- }
-
- return (
-
-
-
-
-
- );
-}
-
-function isVisibleApiReferenceSectionId(
- sectionId: string | null,
-): sectionId is string {
- if (!sectionId) {
- return false;
- }
-
- return apiReferenceNavGroups.some((group) =>
- group.items.some((item) => item.sectionId === sectionId),
- );
-}
-
-function scrollToApiSection(sectionId: string) {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (scrollToSection() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (scrollToSection()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, { childList: true, subtree: true });
- }
-
- window.requestAnimationFrame(() => {
- if (scrollToSection()) {
- stop();
- }
- });
-
- function scrollToSection() {
- const element = document.getElementById(sectionId);
- if (element) {
- element.scrollIntoView({ block: "start" });
- return true;
- }
-
- return false;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
-
-function syncVisibleApiSection(sectionId: string) {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
- const sectionIds = apiReferenceNavGroups.flatMap((group) =>
- group.items.map((item) => item.sectionId),
- );
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (syncSections() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (syncSections()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, {
- attributes: false,
- childList: true,
- subtree: true,
- });
- }
-
- window.requestAnimationFrame(() => {
- if (syncSections()) {
- stop();
- }
- });
-
- function syncSections() {
- let renderedCount = 0;
-
- for (const currentSectionId of sectionIds) {
- const section = document.getElementById(currentSectionId);
- if (!section) {
- continue;
- }
-
- renderedCount += 1;
- const isSelected = currentSectionId === sectionId;
- const shouldHide = !isSelected;
- if (section.hidden !== shouldHide) {
- section.hidden = shouldHide;
- }
- }
-
- return renderedCount === sectionIds.length;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
-
-function renderEndpointLines() {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
- const items = apiReferenceNavGroups.flatMap((group) => group.items);
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (syncEndpointLines() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (syncEndpointLines()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, { childList: true, subtree: true });
- }
-
- window.requestAnimationFrame(() => {
- if (syncEndpointLines()) {
- stop();
- }
- });
-
- function syncEndpointLines() {
- let renderedCount = 0;
- const renderableItems = items.filter((item) => item.method && item.path);
-
- for (const item of items) {
- if (!item.method || !item.path) {
- continue;
- }
-
- const section = document.getElementById(item.sectionId);
- const header = section?.querySelector(".operation-header");
- if (!header) {
- continue;
- }
-
- const endpoint = item.endpointDisplay ?? item.path;
- const existing = section?.querySelector(
- ".calle-endpoint-line",
- );
- if (existing) {
- const method = existing.querySelector(".method-badge");
- const path = existing.querySelector("code");
- if (!method || !path) {
- existing.remove();
- } else {
- if (method.textContent !== item.method) {
- method.textContent = item.method;
- }
- if (path.textContent !== endpoint) {
- path.textContent = endpoint;
- }
- renderedCount += 1;
- continue;
- }
- }
-
- const line = document.createElement("div");
- line.className = "calle-endpoint-line";
-
- const method = document.createElement("span");
- method.className = `method-badge method-${item.method.toLowerCase()}`;
- method.textContent = item.method;
-
- const path = document.createElement("code");
- path.textContent = endpoint;
-
- line.append(method, path);
- header.after(line);
- renderedCount += 1;
- }
-
- return renderedCount === renderableItems.length;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
-
-function openSuccessResponseInSection(sectionId: string) {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (openSuccessResponse() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (openSuccessResponse()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, { childList: true, subtree: true });
- }
-
- window.requestAnimationFrame(() => {
- if (openSuccessResponse()) {
- stop();
- }
- });
-
- function openSuccessResponse() {
- const section = document.getElementById(sectionId);
- if (!section) {
- return false;
- }
-
- const responseButton = section.querySelector(
- 'ul[aria-label="Responses"] > li:first-child > button',
- );
- if (!responseButton) {
- return false;
- }
-
- if (responseButton.getAttribute("aria-expanded") === "true") {
- return true;
- }
-
- if (!responseButton.textContent?.includes("200")) {
- return false;
- }
-
- responseButton.click();
- return true;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
diff --git a/src/routes/GuidePage.tsx b/src/routes/GuidePage.tsx
deleted file mode 100644
index f21093d..0000000
--- a/src/routes/GuidePage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { guideComponents } from "../guide-content";
-import { mdxComponents } from "../mdx-components";
-import type { ComponentType } from "react";
-import type { GuideSlug } from "../docs-nav";
-
-type GuidePageProps = {
- slug: GuideSlug;
-};
-
-export function GuidePage({ slug }: GuidePageProps) {
- const GuideComponent = guideComponents[slug] as ComponentType<{
- components?: typeof mdxComponents;
- }>;
-
- return (
-
-
-
-
- );
-}
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..738893a
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,546 @@
+:root {
+ --top-header-height: 4.5rem;
+ --top-nav-height: 3rem;
+ --side-nav-width: 18.75rem;
+ --padding-content-top: 2.5rem;
+ --sidecar-grid-cols: minmax(0, 42rem) minmax(13rem, 15rem);
+ --call-signal: #0a9f90;
+ --code-background: #0b0f14;
+ --code-chrome: #11161d;
+ --code-border: #242b35;
+ --code-foreground: #e6edf3;
+ --code-muted: #a4afbd;
+}
+
+.dark {
+ --call-signal: #35c9b8;
+}
+
+body {
+ min-width: 320px;
+ color: var(--foreground);
+ font-family:
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+ "Segoe UI", sans-serif;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family:
+ "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas,
+ "Liberation Mono", monospace;
+}
+
+header[data-pagefind-ignore="all"] {
+ background: color-mix(in srgb, var(--background) 96%, transparent);
+}
+
+header[data-pagefind-ignore="all"]::after {
+ display: none;
+}
+
+header[data-pagefind-ignore="all"] img {
+ object-fit: contain;
+}
+
+.theme-menu {
+ display: flex;
+ align-items: center;
+}
+
+.theme-menu__trigger {
+ height: 2.25rem;
+ min-width: 2.5rem;
+ padding-inline: 0.625rem;
+ gap: 0.3rem;
+ border-radius: 999px;
+ color: var(--muted-foreground);
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 7%, transparent);
+}
+
+.theme-menu__trigger:hover,
+.theme-menu__trigger[aria-expanded="true"] {
+ border-color: color-mix(in srgb, var(--call-signal) 34%, var(--border));
+ color: var(--foreground);
+}
+
+.theme-menu__trigger > svg:first-child {
+ color: var(--call-signal);
+}
+
+.theme-menu__chevron {
+ width: 0.75rem;
+ height: 0.75rem;
+ opacity: 0.6;
+}
+
+.theme-menu__label {
+ display: none;
+ font-size: 0.75rem;
+}
+
+.theme-menu__content {
+ min-width: 10rem;
+}
+
+.theme-menu__content [role="menuitemradio"] {
+ min-height: 2rem;
+}
+
+.theme-menu--mobile .theme-menu__label {
+ display: inline;
+}
+
+div:has(> .theme-menu--mobile) {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+div:has(> .theme-menu--mobile)
+ > [aria-label="Toggle table of contents"] {
+ min-width: 0;
+}
+
+.scroll-to-top {
+ position: fixed;
+ right: max(1.5rem, calc((100vw - 96rem) / 2 + 1.5rem));
+ bottom: calc(1.5rem + env(safe-area-inset-bottom));
+ z-index: 30;
+ display: none;
+ width: 2.75rem;
+ height: 2.75rem;
+ border-color: color-mix(in srgb, var(--call-signal) 30%, var(--border));
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--background) 92%, transparent);
+ color: var(--foreground);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transform: translateY(0.5rem);
+ box-shadow:
+ 0 0 0 1px color-mix(in srgb, var(--background) 70%, transparent),
+ 0 0.75rem 2rem color-mix(in srgb, var(--foreground) 13%, transparent);
+ backdrop-filter: blur(0.75rem);
+ transition:
+ opacity 160ms ease,
+ visibility 160ms ease,
+ transform 160ms ease,
+ border-color 160ms ease,
+ color 160ms ease;
+}
+
+.scroll-to-top[data-visible="true"] {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ transform: translateY(0);
+}
+
+.scroll-to-top[data-visible="true"]:hover {
+ border-color: var(--call-signal);
+ color: var(--call-signal);
+ transform: translateY(-0.125rem);
+}
+
+.dark header a.shrink-0 img {
+ filter: invert(1);
+}
+
+header[data-pagefind-ignore="all"] nav[aria-label="Main"] a {
+ color: var(--muted-foreground);
+ font-weight: 500;
+}
+
+header[data-pagefind-ignore="all"]
+ nav[aria-label="Main"]
+ a[href="https://dashboard.heycall-e.com/"] {
+ height: 2.25rem;
+ padding-inline: 1rem;
+ border-radius: 999px;
+ background: var(--primary);
+ color: var(--primary-foreground);
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 24%, transparent);
+}
+
+header[data-pagefind-ignore="all"]
+ nav[aria-label="Main"]
+ a[href="https://dashboard.heycall-e.com/"]:hover {
+ background: color-mix(in srgb, var(--primary) 88%, black);
+ color: var(--primary-foreground);
+}
+
+nav[class*="overflow-y-auto"][class*="shrink-0"] {
+ padding-top: 1.5rem;
+}
+
+nav[class*="overflow-y-auto"][class*="shrink-0"] a {
+ min-height: 2rem;
+ color: var(--muted-foreground);
+}
+
+nav[class*="overflow-y-auto"][class*="shrink-0"] a:hover {
+ color: var(--foreground);
+}
+
+nav[class*="overflow-y-auto"][class*="shrink-0"] a[aria-current="page"] {
+ color: var(--foreground);
+ box-shadow: inset 2px 0 0 var(--call-signal);
+}
+
+@media (min-width: 64rem) {
+ .scroll-to-top {
+ display: inline-flex;
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ :is(
+ a[href="/quickstart"],
+ a[href="/authentication"],
+ a[href="/calls"],
+ a[href="/webhooks"],
+ a[href="/errors"],
+ a[href="/sdks"],
+ a[href="/changelog"]
+ ) {
+ display: grid;
+ min-height: 3.5rem;
+ margin-block: 0.1875rem;
+ padding: 0.625rem 0.75rem;
+ align-content: center;
+ gap: 0.125rem;
+ border: 1px solid transparent;
+ color: color-mix(in srgb, var(--foreground) 86%, transparent);
+ font-size: 0.875rem;
+ font-weight: 700;
+ line-height: 1.3;
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ :is(
+ a[href="/quickstart"],
+ a[href="/authentication"],
+ a[href="/calls"],
+ a[href="/webhooks"],
+ a[href="/errors"],
+ a[href="/sdks"],
+ a[href="/changelog"]
+ )
+ > span {
+ width: 100%;
+ overflow: visible;
+ white-space: normal;
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ :is(
+ a[href="/quickstart"],
+ a[href="/authentication"],
+ a[href="/calls"],
+ a[href="/webhooks"],
+ a[href="/errors"],
+ a[href="/sdks"],
+ a[href="/changelog"]
+ )::after {
+ color: var(--muted-foreground);
+ font-size: 0.75rem;
+ font-weight: 400;
+ line-height: 1.35;
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ :is(
+ a[href="/quickstart"],
+ a[href="/authentication"],
+ a[href="/calls"],
+ a[href="/webhooks"],
+ a[href="/errors"],
+ a[href="/sdks"],
+ a[href="/changelog"]
+ )[aria-current="page"] {
+ border-color: color-mix(
+ in srgb,
+ var(--call-signal) 24%,
+ var(--border)
+ );
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ a[href="/quickstart"]::after {
+ content: "Create your first call.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ a[href="/authentication"]::after {
+ content: "Secure API key setup.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"] a[href="/calls"]::after {
+ content: "Create, track, and read calls.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"] a[href="/webhooks"]::after {
+ content: "Receive terminal call events.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"] a[href="/errors"]::after {
+ content: "Recover from stable API errors.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"] a[href="/sdks"]::after {
+ content: "TypeScript and Python packages.";
+ }
+
+ nav[class*="overflow-y-auto"][class*="shrink-0"]
+ a[href="/changelog"]::after {
+ content: "Product and SDK updates.";
+ }
+}
+
+[data-pagefind-filter="section:markdown"] > .typography {
+ max-width: 42rem;
+ margin-inline: 0;
+}
+
+[data-pagefind-filter="section:markdown"] {
+ justify-content: start;
+}
+
+.typography {
+ color: color-mix(in srgb, var(--foreground) 92%, transparent);
+ font-size: 1rem;
+ line-height: 1.75;
+}
+
+.typography > header.flow-root > .text-sm.font-semibold.text-primary {
+ display: none;
+}
+
+.typography h1 {
+ color: var(--foreground);
+ font-size: 2.25rem;
+ font-weight: 800;
+ line-height: 1.25;
+ letter-spacing: -0.025em;
+}
+
+.typography h2 {
+ margin-top: 2.5rem;
+ color: var(--foreground);
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.34;
+ letter-spacing: -0.02em;
+}
+
+.typography h3 {
+ margin-top: 2rem;
+ color: var(--foreground);
+ font-size: 1.125rem;
+ font-weight: 700;
+ line-height: 1.45;
+ letter-spacing: -0.01em;
+}
+
+.typography p,
+.typography li {
+ line-height: 1.75;
+}
+
+.typography :where(p, li, td, blockquote) a {
+ color: color-mix(in srgb, var(--primary) 82%, var(--foreground));
+ text-decoration-color: color-mix(in srgb, var(--primary) 38%, transparent);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.18em;
+}
+
+.typography :where(p, li, td, blockquote) a:hover {
+ color: var(--primary);
+ text-decoration-color: var(--primary);
+}
+
+.typography code.inline {
+ border-color: transparent;
+ border-radius: 0.25rem;
+ background: var(--muted);
+ color: var(--foreground);
+}
+
+.typography pre > .code-block-wrapper {
+ overflow: hidden;
+ border-color: var(--code-border);
+ border-radius: 0.5rem;
+ background: var(--code-background);
+ color: var(--code-foreground);
+ box-shadow: none;
+}
+
+.typography pre > .code-block-wrapper > div:first-child {
+ border-bottom: 1px solid var(--code-border);
+ background: var(--code-chrome);
+ color: var(--code-muted);
+}
+
+.typography .code-block,
+.typography code.shiki {
+ background-color: var(--code-background) !important;
+}
+
+code.shiki.not-inline {
+ --shiki-light-bg: var(--code-background) !important;
+ --shiki-dark-bg: var(--code-background) !important;
+}
+
+.typography pre > .code-block-wrapper .fill-foreground {
+ fill: var(--code-foreground);
+}
+
+.typography pre > .code-block-wrapper button:hover {
+ background: #1b222c;
+ color: var(--code-foreground);
+}
+
+.typography pre > .code-block-wrapper button:focus-visible {
+ outline: 2px solid var(--call-signal);
+ outline-offset: -2px;
+}
+
+.typography .code-block {
+ font-size: 0.8125rem;
+ line-height: 1.6;
+}
+
+aside[class*="overflow-y-auto"] {
+ color: var(--muted-foreground);
+}
+
+aside[class*="overflow-y-auto"] a:hover {
+ color: var(--foreground);
+}
+
+.docs-index {
+ display: grid;
+ width: min(42rem, calc(100% - 2rem));
+ min-height: 100vh;
+ margin: 0 auto;
+ align-content: center;
+ gap: 1rem;
+}
+
+.docs-index__eyebrow {
+ margin: 0;
+ color: var(--primary);
+ font-size: 0.75rem;
+ font-weight: 750;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.docs-index h1,
+.docs-index p {
+ margin: 0;
+}
+
+.docs-index h1 {
+ color: var(--foreground);
+ font-size: clamp(2.25rem, 8vw, 4.5rem);
+ line-height: 0.98;
+ letter-spacing: -0.04em;
+}
+
+.docs-index > p:not(.docs-index__eyebrow) {
+ max-width: 34rem;
+ color: var(--muted-foreground);
+ font-size: 1.125rem;
+}
+
+.docs-index nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
+}
+
+.docs-index a {
+ padding: 0.65rem 0.9rem;
+ border: 1px solid var(--primary);
+ border-radius: 0.5rem;
+ color: var(--primary);
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.docs-index a:first-child {
+ background: var(--primary);
+ color: var(--primary-foreground);
+}
+
+.docs-index a:focus-visible {
+ outline: 2px solid var(--ring);
+ outline-offset: 2px;
+}
+
+@media (min-width: 64rem) {
+ header[data-pagefind-ignore="all"] button:has(.lucide-search) {
+ width: min(43vw, 34rem);
+ height: 2.25rem;
+ border-color: var(--border);
+ background: var(--background);
+ font-weight: 500;
+ }
+}
+
+@media (max-width: 63.999rem) {
+ :root {
+ --top-header-height: 4rem;
+ --padding-content-top: 2rem;
+ }
+
+ .typography h1 {
+ font-size: 2rem;
+ }
+
+ .typography .code-block {
+ font-size: 0.75rem;
+ }
+}
+
+@media (max-width: 22.5rem) {
+ .theme-menu--mobile .theme-menu__label {
+ display: none;
+ }
+
+ .typography [aria-label="Page actions"] button:first-of-type span {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .scroll-to-top,
+ .scroll-to-top[data-visible="true"],
+ .scroll-to-top[data-visible="true"]:hover {
+ transform: none;
+ transition: none;
+ }
+
+ *,
+ *::before,
+ *::after {
+ scroll-behavior: auto !important;
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
diff --git a/src/styles/api-reference.css b/src/styles/api-reference.css
deleted file mode 100644
index 5a7332a..0000000
--- a/src/styles/api-reference.css
+++ /dev/null
@@ -1,283 +0,0 @@
-.api-reference-page .scalar-app {
- --refs-sidebar-width: 0px;
- --scalar-color-accent: #0f766e;
- --scalar-radius: 6px;
- --scalar-radius-lg: 8px;
- --scalar-radius-xl: 10px;
- --scalar-font:
- Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
- "Segoe UI", sans-serif;
- --scalar-font-code:
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- border: 0;
- border-radius: 0;
- min-height: calc(100vh - 56px);
- overflow: visible;
-}
-
-.api-reference-page .t-doc__sidebar,
-.api-reference-page .t-doc__header {
- display: none !important;
-}
-
-.api-reference-page .references-rendered {
- grid-area: rendered;
- min-width: 0;
- width: 100%;
-}
-
-.api-reference-page .section-container {
- padding-right: 0;
- padding-left: 0;
-}
-
-.api-reference-page .section {
- border-bottom: 1px solid #f0f2f4;
- width: 100%;
- max-width: none;
- padding-right: 0;
- padding-left: 0;
-}
-
-.api-reference-page .section[hidden] {
- display: none !important;
-}
-
-.api-reference-page .section-content {
- width: 100%;
- max-width: none;
- margin: 0;
- padding: 42px clamp(28px, 3vw, 56px) 58px;
-}
-
-.api-reference-page .operation-header {
- align-items: flex-start;
- margin-bottom: 12px;
-}
-
-.api-reference-page .section-header-label {
- color: #202124;
- font-size: 38px;
- line-height: 1.1;
- letter-spacing: 0;
-}
-
-.calle-endpoint-line {
- display: flex;
- align-items: center;
- gap: 10px;
- min-width: 0;
- margin-bottom: 34px;
- color: #6b7280;
-}
-
-.calle-endpoint-line code {
- overflow: hidden;
- color: #6b7280;
- font-family:
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- font-size: 15px;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.api-reference-page .section-columns {
- align-items: flex-start;
- gap: clamp(32px, 3vw, 64px);
- justify-content: stretch;
-}
-
-.api-reference-page .section-column:first-child {
- flex: 1 1 520px;
- min-width: 0;
- max-width: 760px;
-}
-
-.api-reference-page .section-column:last-child {
- flex: 1.1 1 520px;
- min-width: min(480px, 100%);
- max-width: none;
- max-height: calc(100vh - 88px);
- overflow-y: auto;
- overscroll-behavior: contain;
- position: sticky;
- scrollbar-color: #cbd5e1 transparent;
- scrollbar-gutter: stable;
- scrollbar-width: thin;
- top: 72px;
-}
-
-.api-reference-page .scalar-card {
- border-color: #e5e7eb;
- border-radius: 12px;
- box-shadow: none;
-}
-
-.api-reference-page .scalar-card.dark-mode {
- overflow: hidden;
- border-color: #111827;
- background: #111827;
- box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
-}
-
-.api-reference-page .scalar-card.dark-mode pre,
-.api-reference-page .scalar-card.dark-mode code {
- font-family:
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- font-size: 12px;
- line-height: 1.65;
-}
-
-.api-reference-page .response-card {
- overflow: hidden;
- border-color: #111827;
- background: #111827;
- color: #d1d5db;
- box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
-}
-
-.api-reference-page .response-card .scalar-card-header {
- border-color: #1f2937;
- background: #151923;
- color: #cbd5e1;
-}
-
-.api-reference-page .response-card .scalar-card-footer {
- border-color: #1f2937;
- background: #111827;
- color: #cbd5e1;
-}
-
-.api-reference-page .response-card .tab {
- color: #94a3b8;
-}
-
-.api-reference-page .response-card .tab-selected {
- color: #34d399;
- font-weight: 800;
-}
-
-.api-reference-page .response-card .tab:not(.tab-selected),
-.api-reference-page .response-card .scalar-card-checkbox {
- display: none;
-}
-
-.api-reference-page
- ul[aria-label="Responses"]
- > .parameter-item:not(:first-child) {
- display: none;
-}
-
-.api-reference-page .response-card .scalar-code-block {
- background: #0b0f19;
- color: #cbd5e1;
-}
-
-.api-reference-page .response-card pre,
-.api-reference-page .response-card code,
-.api-reference-page .scalar-card.dark-mode pre,
-.api-reference-page .scalar-card.dark-mode code {
- color: #cbd5e1;
-}
-
-.api-reference-page .response-card .hljs,
-.api-reference-page .scalar-card.dark-mode .hljs {
- color: #cbd5e1;
-}
-
-.api-reference-page .response-card .hljs-attr,
-.api-reference-page .scalar-card.dark-mode .hljs-attr {
- color: #7dd3fc;
-}
-
-.api-reference-page .response-card .hljs-string,
-.api-reference-page .scalar-card.dark-mode .hljs-string {
- color: #86efac;
-}
-
-.api-reference-page .response-card .hljs-number,
-.api-reference-page .scalar-card.dark-mode .hljs-number {
- color: #facc15;
-}
-
-.api-reference-page .response-card .hljs-literal,
-.api-reference-page .response-card .hljs-keyword,
-.api-reference-page .scalar-card.dark-mode .hljs-literal,
-.api-reference-page .scalar-card.dark-mode .hljs-keyword {
- color: #f0abfc;
-}
-
-.api-reference-page .response-card .hljs-punctuation,
-.api-reference-page .scalar-card.dark-mode .hljs-punctuation {
- color: #94a3b8;
-}
-
-.api-reference-page .response-card .scalar-code-copy {
- background: #1f2937;
- color: #cbd5e1;
-}
-
-.api-reference-page .parameter-item-trigger,
-.api-reference-page .schema-card-title {
- border-radius: 8px;
-}
-
-.api-reference-page #api-1\/models {
- display: none;
-}
-
-.api-reference-page #api-1\/tag\/calls,
-.api-reference-page #api-1\/tag\/webhooks {
- display: none;
-}
-
-.api-reference-page .security-requirement-badge {
- color: #202124;
-}
-
-/* Hide interactive API client controls while keeping read-only endpoint docs visible. */
-.api-reference-page [data-addressbar-action="send"],
-.api-reference-page .response-section-content {
- display: none;
-}
-
-@media (max-width: 1180px) {
- .api-reference-page .section-columns {
- flex-direction: column;
- }
-
- .api-reference-page .section-column,
- .api-reference-page .section-column:last-child {
- width: 100%;
- min-width: 0;
- max-width: 100%;
- max-height: none;
- overflow: visible;
- position: static;
- scrollbar-gutter: auto;
- }
-
- .api-reference-page .section-column:first-child {
- max-width: 100%;
- }
-}
-
-@media (max-width: 1080px) {
- .api-reference-page .section-content {
- padding: 34px 32px 50px;
- }
-
- .api-reference-page .section-header-label {
- font-size: 30px;
- }
-
- .api-reference-page .section-columns {
- gap: 24px;
- }
-}
-
-@media (max-width: 760px) {
- .api-reference-page .section-content {
- padding: 28px 18px 44px;
- }
-}
diff --git a/src/styles/globals.css b/src/styles/globals.css
deleted file mode 100644
index 76d7e5e..0000000
--- a/src/styles/globals.css
+++ /dev/null
@@ -1,581 +0,0 @@
-:root {
- color: #171717;
- background: #ffffff;
- font-family:
- Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- sans-serif;
- font-size: 16px;
- line-height: 1.5;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- --color-border: #e5e7eb;
- --color-muted: #6b7280;
- --color-accent: #0f766e;
- --color-accent-soft: #ecfdf5;
- --color-warning: #b45309;
- --content-width: 820px;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
- min-width: 320px;
-}
-
-a {
- color: inherit;
-}
-
-.docs-app {
- min-height: 100vh;
- background: #ffffff;
-}
-
-.topbar {
- position: sticky;
- top: 0;
- z-index: 20;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- height: 56px;
- padding: 0 28px;
- border-bottom: 1px solid var(--color-border);
- background: rgba(255, 255, 255, 0.96);
- backdrop-filter: blur(12px);
-}
-
-.brand,
-.topnav,
-.topnav a {
- display: flex;
- align-items: center;
-}
-
-.brand {
- flex: 0 0 auto;
- text-decoration: none;
-}
-
-.brand-logo {
- display: block;
- width: auto;
- height: 32px;
-}
-
-.topnav {
- align-self: stretch;
- gap: 2px;
- margin-left: 28px;
-}
-
-.topnav a {
- position: relative;
- height: 56px;
- padding: 0 12px;
- border-bottom: 2px solid transparent;
- color: #404040;
- font-size: 15px;
- font-weight: 600;
- text-decoration: none;
- white-space: nowrap;
-}
-
-.topnav a:hover {
- color: #171717;
-}
-
-.topnav a.active {
- border-bottom-color: var(--color-accent);
- color: var(--color-accent);
-}
-
-.docs-frame {
- display: grid;
- grid-template-columns: 280px minmax(0, 1fr) 220px;
- gap: 32px;
- width: min(1440px, 100%);
- margin: 0 auto;
- padding: 28px 28px 64px;
-}
-
-.sidebar,
-.right-rail {
- position: sticky;
- top: 84px;
- align-self: start;
- max-height: calc(100vh - 104px);
- overflow: auto;
-}
-
-.sidebar-section + .sidebar-section {
- margin-top: 28px;
-}
-
-.sidebar-label,
-.page-toc-title {
- margin-bottom: 8px;
- color: var(--color-muted);
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 0;
- text-transform: uppercase;
-}
-
-.sidebar a {
- display: block;
- padding: 9px 10px;
- border: 1px solid transparent;
- border-radius: 8px;
- color: #262626;
- text-decoration: none;
-}
-
-.sidebar a:hover,
-.sidebar a.active {
- border-color: #99f6e4;
- background: var(--color-accent-soft);
-}
-
-.sidebar span {
- display: block;
- font-size: 14px;
- font-weight: 700;
-}
-
-.sidebar small {
- display: block;
- margin-top: 2px;
- color: var(--color-muted);
- font-size: 12px;
-}
-
-.content-shell {
- min-width: 0;
-}
-
-.guide-article {
- width: min(var(--content-width), 100%);
-}
-
-.guide-article h1 {
- margin: 0 0 16px;
- color: #111827;
- font-size: 40px;
- line-height: 1.1;
- letter-spacing: 0;
-}
-
-.guide-article h2 {
- margin: 40px 0 12px;
- color: #111827;
- font-size: 24px;
- letter-spacing: 0;
-}
-
-.guide-article h3 {
- margin: 28px 0 10px;
- color: #111827;
- font-size: 18px;
- letter-spacing: 0;
-}
-
-.guide-article h2[id],
-.guide-article h3[id] {
- scroll-margin-top: 84px;
-}
-
-.guide-article p,
-.guide-article li {
- color: #404040;
-}
-
-.guide-article p {
- margin: 0 0 16px;
-}
-
-.guide-article ul {
- padding-left: 22px;
-}
-
-.guide-article table {
- width: 100%;
- margin: 16px 0 24px;
- border-collapse: collapse;
- border: 1px solid var(--color-border);
- border-radius: 8px;
- overflow: hidden;
- font-size: 14px;
-}
-
-.guide-article th,
-.guide-article td {
- padding: 12px 14px;
- border-bottom: 1px solid var(--color-border);
- text-align: left;
- vertical-align: top;
-}
-
-.guide-article th {
- background: #f9fafb;
- color: #111827;
- font-size: 12px;
- font-weight: 700;
- text-transform: uppercase;
-}
-
-.guide-article tr:last-child td {
- border-bottom: 0;
-}
-
-.guide-article td {
- color: #404040;
-}
-
-.guide-article td a {
- color: var(--color-accent);
- font-weight: 700;
- text-decoration-thickness: 1px;
- text-underline-offset: 3px;
-}
-
-.lead {
- color: var(--color-muted);
- font-size: 18px;
-}
-
-.doc-badge {
- display: inline-flex;
- align-items: center;
- margin: 0 8px 8px 0;
- padding: 4px 8px;
- border: 1px solid #99f6e4;
- border-radius: 999px;
- background: var(--color-accent-soft);
- color: #115e59;
- font-size: 12px;
- font-weight: 700;
-}
-
-.code-block {
- position: relative;
- margin: 16px 0 24px;
-}
-
-.code-block pre {
- overflow-x: auto;
- margin: 0;
- padding: 20px 18px;
- border: 1px solid #1f2937;
- border-radius: 8px;
- background: #111827;
- color: #d1d5db;
- font-size: 13px;
- line-height: 1.6;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-}
-
-.code-block code {
- font-family:
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-}
-
-.code-token {
- color: inherit;
-}
-
-.token-keyword,
-.token-shell-command {
- color: #67e8f9;
-}
-
-.token-string {
- color: #86efac;
-}
-
-.token-key {
- color: #fca5a5;
-}
-
-.token-function {
- color: #c4b5fd;
-}
-
-.token-number,
-.token-shell-flag {
- color: #facc15;
-}
-
-.token-constant,
-.token-env {
- color: #f0abfc;
-}
-
-.token-comment {
- color: #94a3b8;
-}
-
-.token-punctuation {
- color: #cbd5e1;
-}
-
-.code-copy-button {
- position: absolute;
- top: 8px;
- right: 8px;
- border: 1px solid #525252;
- border-radius: 6px;
- background: #262626;
- color: #f5f5f5;
- cursor: pointer;
- font-size: 12px;
- font-weight: 700;
- padding: 4px 8px;
-}
-
-.page-toc {
- display: grid;
- gap: 8px;
- font-size: 13px;
-}
-
-.page-toc a {
- color: #525252;
- text-decoration: none;
-}
-
-.page-toc a:hover {
- color: var(--color-accent);
-}
-
-.api-reference-shell {
- display: grid;
- grid-template-columns: 316px minmax(0, 1fr);
- min-height: calc(100vh - 56px);
- border-top: 1px solid var(--color-border);
- background: #ffffff;
-}
-
-.api-reference-sidebar {
- position: sticky;
- top: 56px;
- height: calc(100vh - 56px);
- overflow: auto;
- border-right: 1px solid var(--color-border);
- background: #ffffff;
- padding: 34px 16px 48px;
-}
-
-.api-reference-nav-group + .api-reference-nav-group {
- margin-top: 30px;
-}
-
-.api-reference-nav-label {
- margin: 0 0 12px;
- color: #262626;
- font-size: 13px;
- font-weight: 800;
- letter-spacing: 0;
-}
-
-.api-reference-nav-group a {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr);
- gap: 4px 12px;
- align-items: center;
- min-height: 42px;
- padding: 8px 12px;
- border: 1px solid transparent;
- border-radius: 8px;
- color: #262626;
- text-decoration: none;
- transition:
- background 120ms ease,
- border-color 120ms ease,
- color 120ms ease;
-}
-
-.api-reference-nav-group a:hover {
- border-color: #99f6e4;
- background: #f0fdfa;
-}
-
-.api-reference-nav-group a.active {
- border-color: #7dd3c7;
- background: #dff8ef;
- color: #04786c;
-}
-
-.api-reference-nav-title {
- overflow: hidden;
- font-size: 14px;
- font-weight: 700;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.api-reference-nav-path {
- grid-column: 2;
- overflow: hidden;
- color: var(--color-muted);
- font-family:
- "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
- font-size: 12px;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.method-badge {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 38px;
- height: 22px;
- border-radius: 5px;
- font-size: 11px;
- font-weight: 800;
- line-height: 1;
-}
-
-.method-get {
- background: #dcfce7;
- color: #15803d;
-}
-
-.method-post {
- background: #dbeafe;
- color: #1d4ed8;
-}
-
-.api-reference-page {
- min-width: 0;
- background: #ffffff;
-}
-
-.api-reference-loading-row,
-.api-reference-loading-title,
-.api-reference-loading-line,
-.api-reference-loading-card {
- border-radius: 8px;
- background: linear-gradient(90deg, #f3f4f6, #e5e7eb, #f3f4f6);
- background-size: 180% 100%;
- animation: loading-pulse 1.3s ease-in-out infinite;
-}
-
-.api-reference-loading-row {
- height: 42px;
- margin-bottom: 8px;
-}
-
-.api-reference-loading-panel {
- width: min(820px, calc(100vw - 380px));
- padding: 72px 48px;
-}
-
-.api-reference-loading-kicker {
- margin-bottom: 14px;
- color: var(--color-accent);
- font-size: 14px;
- font-weight: 700;
-}
-
-.api-reference-loading-title {
- width: min(420px, 80%);
- height: 44px;
- margin-bottom: 20px;
-}
-
-.api-reference-loading-line {
- width: min(620px, 92%);
- height: 18px;
- margin-bottom: 40px;
-}
-
-.api-reference-loading-card {
- width: min(760px, 100%);
- height: 260px;
-}
-
-@keyframes loading-pulse {
- from {
- background-position: 120% 0;
- }
-
- to {
- background-position: -80% 0;
- }
-}
-
-@media (max-width: 1080px) {
- .docs-frame {
- grid-template-columns: 240px minmax(0, 1fr);
- }
-
- .api-reference-shell {
- grid-template-columns: 278px minmax(0, 1fr);
- }
-
- .right-rail {
- display: none;
- }
-}
-
-@media (max-width: 760px) {
- .topbar {
- align-items: flex-start;
- flex-direction: column;
- height: auto;
- gap: 0;
- padding: 14px 18px 0;
- }
-
- .topnav {
- width: 100%;
- margin-left: 0;
- overflow-x: auto;
- }
-
- .topnav a {
- height: 44px;
- }
-
- .docs-frame {
- display: block;
- padding: 20px 18px 48px;
- }
-
- .api-reference-shell {
- display: block;
- }
-
- .sidebar {
- position: static;
- max-height: none;
- margin-bottom: 28px;
- }
-
- .api-reference-sidebar {
- position: static;
- height: auto;
- border-bottom: 1px solid var(--color-border);
- border-right: 0;
- padding: 18px;
- }
-
- .api-reference-nav-group {
- min-width: 220px;
- }
-
- .api-reference-sidebar nav {
- display: flex;
- gap: 18px;
- overflow-x: auto;
- }
-
- .guide-article h1 {
- font-size: 32px;
- }
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index ced3661..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// [^"]*"/,
- }).first();
- await expect(taskOnlyJson).toBeVisible();
- await expect(taskOnlyJson).not.toContainText('"recipient"');
- await expect(taskOnlyJson).not.toContainText('"recipients"');
-
- await expect(page.locator(".code-block", {
- hasText: /task:\s*"[^"]*[^"]*"/,
- }).first()).toBeVisible();
- await expect(page.locator(".code-block", {
- hasText: /task="[^"]*[^"]*"/,
- }).first()).toBeVisible();
- await expect(page.getByText("call task").first()).toBeVisible();
- await expect(page.getByText('region: "US"')).toHaveCount(0);
- await expect(page.getByText('locale: "en-US"')).toHaveCount(0);
- await expect(page.getByText("workflow_run_id")).toHaveCount(0);
- await expect(page.getByText("idempotencyKey")).toHaveCount(0);
- await expect(page.getByText("idempotency_key")).toHaveCount(0);
- await expect(page.getByText("additionalProperties")).toHaveCount(0);
+ const activeGuideHeight = await activeGuide.evaluate((element) => {
+ return element.getBoundingClientRect().height;
+ });
+ const descriptionContent = await activeGuide.evaluate((element) => {
+ return window.getComputedStyle(element, "::after").content;
+ });
+
+ expect(activeGuideHeight).toBeGreaterThanOrEqual(56);
+ expect(descriptionContent).not.toBe("none");
+ expect(descriptionContent).not.toBe('""');
});
-test("shows quickstart result examples", async ({ page }) => {
- await page.goto("/");
+test("offers system, light, and dark appearance modes", async ({ page }) => {
+ await page.emulateMedia({ colorScheme: "dark" });
+ await page.goto("/quickstart");
- await expect(
- page.locator(".code-block", {
- hasText: /"status": "completed"[\s\S]*"structuredResult"[\s\S]*"can_hear_clearly"/,
- }),
- ).toBeVisible();
- await expect(
- page.locator(".code-block", {
- hasText: /"status": "completed"[\s\S]*"taskCompleted"[\s\S]*"completionConfidence"[\s\S]*"evidence"/,
- }),
- ).toBeVisible();
- await expect(
- page.locator(".code-block", {
- hasText: /"status": "completed"[\s\S]*"structured_result"[\s\S]*"can_hear_clearly"/,
- }),
- ).toBeVisible();
- await expect(
- page.locator(".code-block", {
- hasText: /"status": "completed"[\s\S]*"task_completed"[\s\S]*"completion_confidence"[\s\S]*"evidence"/,
- }),
- ).toBeVisible();
- await expect(page.getByText("resultValidation")).toHaveCount(0);
- await expect(page.getByText("result_validation")).toHaveCount(0);
-});
+ const html = page.locator("html");
+ const trigger = page.getByTestId("theme-menu-trigger");
-test("positions the primary navigation beside the brand", async ({ page }) => {
- await page.goto("/");
+ await expect(trigger).toHaveAttribute("data-theme", "system");
+ await expect(html).toHaveClass("dark");
- const brandRight = await page.locator(".brand").evaluate((element) => {
- return element.getBoundingClientRect().right;
+ await trigger.click();
+ const lightOption = page.getByRole("menuitemradio", {
+ name: "Light",
+ exact: true,
});
- const navigationLeft = await page.locator(".topnav").evaluate((element) => {
- return element.getBoundingClientRect().left;
+ await lightOption.click();
+ await expect(trigger).toHaveAttribute("data-theme", "light");
+ await expect(html).toHaveClass("light");
+ await expect(lightOption).toBeHidden();
+
+ await trigger.click();
+ const darkOption = page.getByRole("menuitemradio", {
+ name: "Dark",
+ exact: true,
});
- const activeBottom = await page.locator(".topnav a.active").evaluate((element) => {
- const style = window.getComputedStyle(element);
- return {
- borderBottomColor: style.borderBottomColor,
- borderBottomWidth: style.borderBottomWidth,
- };
+ await darkOption.click();
+ await expect(trigger).toHaveAttribute("data-theme", "dark");
+ await expect(html).toHaveClass("dark");
+ await expect(darkOption).toBeHidden();
+
+ await trigger.click();
+ const systemOption = page.getByRole("menuitemradio", {
+ name: "System",
+ exact: true,
});
+ await systemOption.click();
+ await expect(trigger).toHaveAttribute("data-theme", "system");
+ await expect(html).toHaveClass("dark");
- expect(navigationLeft).toBeLessThan(brandRight + 40);
- expect(activeBottom.borderBottomColor).toBe("rgb(15, 118, 110)");
- expect(activeBottom.borderBottomWidth).toBe("2px");
+ await page.emulateMedia({ colorScheme: "light" });
+ await expect(html).toHaveClass("light");
});
-test("renders syntax-colored guide code blocks", async ({ page }) => {
- await page.goto("/");
-
- const codeBlock = page.locator(".code-block").filter({
- hasText: 'import { CalleClient } from "@call-e/calle";',
- }).first();
-
- const keyword = codeBlock.locator(".token-keyword", { hasText: "import" })
- .first();
- const stringToken = codeBlock.locator(".token-string", {
- hasText: "@call-e/calle",
- }).first();
+test("shows a desktop scroll-to-top control after one viewport", async ({
+ page,
+}) => {
+ await page.setViewportSize({ width: 1280, height: 720 });
+ await page.emulateMedia({ reducedMotion: "reduce" });
+ await page.goto("/calls");
- await expect(keyword).toBeVisible();
- await expect(stringToken).toBeVisible();
+ const scrollToTop = page.getByTestId("scroll-to-top");
+ await expect(scrollToTop).toBeHidden();
- const defaultCodeColor = await codeBlock.locator("pre").evaluate((element) => {
- return window.getComputedStyle(element).color;
- });
- const keywordColor = await keyword.evaluate((element) => {
- return window.getComputedStyle(element).color;
+ await page.evaluate(() => {
+ window.scrollTo(0, document.documentElement.scrollHeight);
});
+ await expect(scrollToTop).toBeVisible();
+ await expect(scrollToTop).toHaveCSS("transform", "none");
- expect(keywordColor).not.toBe(defaultCodeColor);
-});
-
-test("keeps guide examples US-specific", async ({ page }) => {
- const guideHashes = ["/#/calls", "/#/sdks"];
- const nonUsExampleFragments = [
- "+8613800000000",
- 'region: "CN"',
- '"region": "CN"',
- 'locale: "zh-CN"',
- '"locale": "zh-CN"',
- ];
-
- for (const guideHash of guideHashes) {
- await page.goto(guideHash);
- await expect(page.getByText("").first()).toBeVisible();
- await expect(page.getByText("en-US").first()).toBeVisible();
-
- for (const fragment of nonUsExampleFragments) {
- await expect(page.getByText(fragment)).toHaveCount(0);
- }
- }
+ await scrollToTop.click();
+ await expect.poll(() => page.evaluate(() => window.scrollY)).toBe(0);
});
-test("uses phone placeholders instead of copy-pasteable example numbers", async ({
- page,
+test("publishes non-empty Markdown and LLM discovery files", async ({
+ request,
}) => {
- const guideHashes = ["/", "/#/calls", "/#/webhooks", "/#/errors", "/#/sdks"];
- const realLookingExampleNumbers = [
- "+14155550100",
- "+14155550101",
- "+8618585062540",
- ];
-
- for (const guideHash of guideHashes) {
- await page.goto(guideHash);
- await expect(page.getByText("").or(
- page.getByText(""),
- ).first()).toBeVisible();
-
- for (const phone of realLookingExampleNumbers) {
- await expect(page.getByText(phone)).toHaveCount(0);
- }
- }
-});
+ const markdown = await request.get("/quickstart.md");
+ expect(markdown.status()).toBe(200);
+ expect(markdown.headers()["content-type"]).toContain("text/markdown");
+ expect(await markdown.text()).toMatch(
+ /^# Quickstart[\s\S]+pnpm add @call-e\/calle/,
+ );
-test("documents call tasks with plural recipients and no legacy recipient field", async ({
- page,
-}) => {
- const guideHashes = ["/", "/#/calls", "/#/webhooks", "/#/sdks"];
+ const llms = await request.get("/llms.txt");
+ expect(llms.status()).toBe(200);
+ const llmsText = await llms.text();
- for (const guideHash of guideHashes) {
- await page.goto(guideHash);
- await expect(page.getByText("call task").first()).toBeVisible();
- await expect(
- page.locator(".code-block").filter({ hasText: /"recipient"\s*:\s*\{/ }),
- ).toHaveCount(0);
- await expect(
- page.locator(".code-block").filter({ hasText: /recipient:\s*\{/ }),
- ).toHaveCount(0);
- await expect(
- page.locator(".code-block").filter({ hasText: /recipient=\s*\{/ }),
- ).toHaveCount(0);
- }
+ const llmsFull = await request.get("/llms-full.txt");
+ expect(llmsFull.status()).toBe(200);
+ const llmsFullText = await llmsFull.text();
- for (const guideHash of ["/#/calls", "/#/webhooks", "/#/sdks"]) {
- await page.goto(guideHash);
- await expect(page.getByText("recipients").first()).toBeVisible();
+ for (const guide of guides) {
+ expect(llmsText).toContain(`${guide.path}.md`);
+ expect(llmsFullText).toContain(`# ${guide.heading}`);
}
+ expect(llmsText).toContain("[API Reference](/api-reference)");
+ expect(llmsText).toContain(
+ "[OpenAPI Specification](/openapi/calle.openapi.yaml)",
+ );
+
+ const missingMarkdown = await request.get("/does-not-exist.md");
+ expect(missingMarkdown.status()).toBe(404);
});
-test("documents webhook recipient attempts", async ({ page }) => {
- await page.goto("/#/webhooks");
+test("publishes crawler and OpenAPI artifacts", async ({ request }) => {
+ const robots = await request.get("/robots.txt");
+ expect(robots.status()).toBe(200);
+ expect(await robots.text()).toContain(
+ "Sitemap: https://docs.heycall-e.com/sitemap.xml",
+ );
+
+ const sitemap = await request.get("/sitemap.xml");
+ expect(sitemap.status()).toBe(200);
+ const sitemapText = await sitemap.text();
+ expect(sitemapText).toContain(
+ "https://docs.heycall-e.com/quickstart ",
+ );
+ expect(sitemapText).toContain(
+ "https://docs.heycall-e.com/api-reference/calls ",
+ );
+
+ const openApi = await request.get("/openapi/calle.openapi.yaml");
+ expect(openApi.status()).toBe(200);
+ const openApiText = await openApi.text();
+ expect(openApiText).toContain("openapi: 3.1.0");
+ expect(openApiText).toContain("/v1/calls");
+ expect(openApiText).toContain("/calle/webhook");
+
+ const apiReference = await request.get("/api-reference");
+ expect(apiReference.status()).toBe(200);
+ const apiReferenceText = await apiReference.text();
+ expect(apiReferenceText).toContain('data-pagefind-body="true"');
+ expect(apiReferenceText).toContain("CALL-E Developer API");
+ expect(apiReferenceText).toContain("Developer API contract");
+ expect(apiReferenceText).not.toContain(
+ 'window.location.href="/api-reference/',
+ );
+});
+test("bridges legacy hash routes to clean URLs", async ({ page }) => {
+ await page.goto("/#/authentication");
+ await expect(page).toHaveURL(/\/authentication$/);
await expect(
- page.locator(".code-block").filter({
- hasText: /"recipients"[\s\S]*"attempts"[\s\S]*"provider_call_id"/,
- }).first(),
+ page.getByRole("heading", { name: "Authentication" }),
).toBeVisible();
- await expect(page.getByText("transcript_turns").first()).toBeVisible();
+
+ await page.goto("/#/calls?section=idempotency");
+ await expect(page).toHaveURL(/\/calls#idempotency$/);
await expect(
- page.locator(".code-block").filter({
- hasText: /"transcript_turns"[\s\S]*"offset_seconds"[\s\S]*"speaker"[\s\S]*"text"/,
- }).first(),
+ page.getByRole("heading", { name: "Idempotency" }),
).toBeVisible();
-});
-test("renders all guide pages from navigation", async ({ page }) => {
- const guides = [
- {
- hash: "#/authentication",
- heading: "Authentication",
- text: "Authorization: Bearer",
- },
- { hash: "#/calls", heading: "Calls", text: "result_schema" },
- { hash: "#/webhooks", heading: "Webhooks", text: "structured_result" },
- { hash: "#/errors", heading: "Errors", text: "idempotency_conflict" },
- { hash: "#/sdks", heading: "SDKs", text: "server-sdk-typescript" },
- {
- hash: "#/changelog",
- heading: "What's New",
- text: "What's New: Developer API and server SDKs",
- },
- ];
+ await page.goto("/#/api-reference");
+ await expect(page).toHaveURL(/\/api-reference(?:\/calls)?$/);
+});
+test("renders every migrated guide from its file route", async ({ page }) => {
for (const guide of guides) {
- await page.goto(`/${guide.hash}`);
+ await page.goto(guide.path);
await expect(
- page.getByRole("heading", { exact: true, name: guide.heading }),
+ page.locator("h1").filter({ hasText: guide.heading }),
).toBeVisible();
- await expect(page.getByText(guide.text).first()).toBeVisible();
}
});
-test("documents API key authentication and server-only boundaries", async ({
- page,
-}) => {
- await page.goto("/#/authentication");
+test("preserves CALL-E brand and favicon metadata", async ({ page }) => {
+ await page.goto("/quickstart");
- await expect(
- page.getByRole("heading", { name: "Authentication" }),
- ).toBeVisible();
- await expect(page.getByText('export CALLE_API_KEY="calle_test_key"'))
- .toBeVisible();
- await expect(
- page.getByRole("link", { name: "CALL-E dashboard", exact: true }),
- ).toHaveAttribute("href", "https://dashboard.heycall-e.com/account/api-keys");
- await expect(
- page.getByText("Authorization: Bearer $CALLE_API_KEY"),
- ).toBeVisible();
- await expect(
- page.getByText("Do not commit API keys, print them in logs"),
- ).toBeVisible();
- await expect(page.getByText("The CALL-E SDKs are server SDKs"))
+ const brand = page
+ .locator('header a[href="https://www.heycall-e.com/"]')
+ .first();
+ await expect(brand.getByRole("img", { name: "CALL-E" }).first())
.toBeVisible();
- await expect(page.getByText("CALLE_WEBHOOK_SECRET")).toBeVisible();
await expect(
- page.getByRole("link", { name: "Webhooks", exact: true }),
- ).toHaveAttribute("href", "#/webhooks");
+ page.getByRole("link", { name: "Dashboard", exact: true }),
+ ).toHaveAttribute("href", "https://dashboard.heycall-e.com/");
+ await expect(page.locator('link[rel="icon"]')).toHaveAttribute(
+ "href",
+ "/favicon.svg",
+ );
});
-test("documents public What's New updates", async ({ page }) => {
- await page.goto("/#/changelog");
+test("keeps quickstart requests minimal and safe to copy", async ({ page }) => {
+ await page.goto("/quickstart");
- await expect(
- page.getByRole("heading", { exact: true, name: "What's New" }),
- ).toBeVisible();
- await expect(page.getByText("Product updates for the CALL-E Developer API"))
- .toBeVisible();
- await expect(page.getByRole("heading", { name: "June 8, 2026" }))
+ const minimumRequest = page
+ .locator("pre")
+ .filter({ hasText: /"task":\s*"[^"]*[^"]*"/ })
+ .first();
+ await expect(minimumRequest).toBeVisible();
+ await expect(minimumRequest).not.toContainText('"recipient"');
+ await expect(minimumRequest).not.toContainText('"recipients"');
+ await expect(page.getByText("+14155550100")).toHaveCount(0);
+ await expect(page.getByText("+8613800000000")).toHaveCount(0);
+});
+
+test("preserves authentication, webhook, and SDK guidance", async ({
+ page,
+}) => {
+ await page.goto("/authentication");
+ await expect(page.getByText("Authorization: Bearer $CALLE_API_KEY"))
.toBeVisible();
await expect(
- page.getByRole("heading", {
- name: "What's New: Developer API and server SDKs",
- }),
- ).toBeVisible();
+ page.getByRole("link", { name: "CALL-E dashboard", exact: true }),
+ ).toHaveAttribute("href", "https://dashboard.heycall-e.com/account/api-keys");
await expect(
- page.locator(".code-block").filter({ hasText: "pnpm add @call-e/calle" })
- .first(),
- ).toBeVisible();
+ page.getByRole("link", { name: "Webhooks", exact: true }).first(),
+ ).toHaveAttribute("href", "/webhooks");
+
+ await page.goto("/webhooks");
await expect(
- page.locator(".code-block").filter({ hasText: "pip install calle-ai" })
- .first(),
+ page.locator("pre").filter({
+ hasText: /"recipients"[\s\S]*"attempts"[\s\S]*"provider_call_id"/,
+ }).first(),
).toBeVisible();
- await expect(page.getByText("@call-e/calle@beta")).toHaveCount(0);
- await expect(page.getByText("Python SDK support is in preparation."))
- .toHaveCount(0);
- await expect(page.getByText("Create outbound call tasks")).toBeVisible();
- await expect(page.getByText("Phase 1")).toHaveCount(0);
- await expect(page.getByText(["pend", "ing", " publisher"].join("")))
- .toHaveCount(0);
- await expect(page.getByText(["release", " run", "book"].join("")))
- .toHaveCount(0);
- await expect(page.getByText(`publish-${"npm"}.yml`)).toHaveCount(0);
- await expect(page.locator(".topnav a", { hasText: "What's New" })).toHaveClass(
- /active/,
- );
-});
-
-test("documents SDK source repositories and stable package availability", async ({
- page,
-}) => {
- await page.goto("/#/sdks");
+ await expect(page.getByText("transcript_turns").first()).toBeVisible();
+ await page.goto("/sdks");
await expect(
page.getByRole("link", { name: "CALLE-AI/server-sdk-typescript" }),
).toHaveAttribute(
@@ -348,623 +276,83 @@ test("documents SDK source repositories and stable package availability", async
"href",
"https://github.com/CALLE-AI/server-sdk-python",
);
- await expect(page.locator("li code", { hasText: "@call-e/calle@0.2.0" }))
- .toBeVisible();
- await expect(page.locator("li code", { hasText: "calle-ai==0.2.0" }))
- .toBeVisible();
- await expect(page.getByText("Phase 1")).toHaveCount(0);
- await expect(
- page.locator(".code-block").filter({ hasText: "pnpm add @call-e/calle" })
- .first(),
- ).toBeVisible();
- await expect(
- page.locator(".code-block").filter({ hasText: "pip install calle-ai" })
- .first(),
- ).toBeVisible();
- await expect(page.getByText("@call-e/calle@beta")).toHaveCount(0);
- await expect(page.getByText("Python SDK support is in preparation."))
- .toHaveCount(0);
- await expect(page.getByText(["Test", "Py", "PI"].join(""))).toHaveCount(0);
- await expect(page.getByText(["Py", "PI", " packages"].join("")))
- .toHaveCount(0);
- await expect(page.getByText(["rehe", "arsal"].join(""))).toHaveCount(0);
- await expect(page.getByText(["pend", "ing"].join(""))).toHaveCount(0);
- await expect(page.getByText("Each repository includes public source code"))
- .toBeVisible();
- await expect(page.getByText(["release", "checklist"].join(" ")))
- .toHaveCount(0);
- await expect(page.getByText(["SDK", "release", "run", "book"].join(" ")))
- .toHaveCount(0);
- await expect(
- page.getByRole("link", { name: "Python security policy" }),
- ).toHaveAttribute(
- "href",
- "https://github.com/CALLE-AI/server-sdk-python/blob/main/SECURITY.md",
- );
- await expect(page.getByText("pnpm run example:webhook")).toBeVisible();
- await expect(page.getByText("uv run python examples/webhook_server.py"))
- .toBeVisible();
-
- const tableBackground = await page
- .locator(".guide-article table th")
- .first()
- .evaluate((element) => window.getComputedStyle(element).backgroundColor);
- expect(tableBackground).toBe("rgb(249, 250, 251)");
-});
-
-test("links webhook guides to runnable SDK webhook server examples", async ({
- page,
-}) => {
- await page.goto("/#/webhooks");
-
- await expect(
- page.getByRole("link", { name: "TypeScript webhook server" }),
- ).toHaveAttribute(
- "href",
- "https://github.com/CALLE-AI/server-sdk-typescript/blob/main/examples/webhook-server.ts",
- );
- await expect(
- page.getByRole("link", { name: "Python webhook server" }),
- ).toHaveAttribute(
- "href",
- "https://github.com/CALLE-AI/server-sdk-python/blob/main/examples/webhook_server.py",
- );
- await expect(page.getByText("POST /calle/webhook")).toBeVisible();
- await expect(
- page.locator("p code", { hasText: "client.webhooks.unwrap" }),
- ).toBeVisible();
});
-test("renders the read-only Scalar API Reference from the OpenAPI contract", async ({
+test("connects the Calls guide to HTTP and related references", async ({
page,
}) => {
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
+ await page.goto("/calls");
- await page.goto("/#/api-reference");
- await openApiResponse;
-
- await expect(
- page.getByRole("navigation", { name: "API Reference navigation" }),
- ).toBeVisible();
+ const callsBody = page.locator('[data-pagefind-body="true"]');
await expect(
- page.getByRole("link", { name: "POST Create Call /v1/calls" }),
+ callsBody.locator('p a[href="/api-reference/calls"]'),
).toBeVisible();
await expect(
- page.getByRole("link", { name: "POST Create Call /v1/calls" }),
- ).toHaveClass(/active/);
- await expect(
- page.getByRole("link", {
- name: "GET List Call Events /v1/calls/{call_id}/events",
- }),
+ callsBody.locator('p a[href="/errors"]'),
).toBeVisible();
await expect(
- page.getByRole("link", {
- name: "POST Server Message /calle/webhook",
- }),
+ callsBody.locator('p a[href="/webhooks"]'),
).toBeVisible();
- await expect(page.getByRole("link", { name: "Models" })).toHaveCount(0);
- await expect(
- page.locator(".api-reference-nav-label", { hasText: "Schemas" }),
- ).toHaveCount(0);
- await expect
- .poll(() =>
- page
- .locator(".api-reference-page .references-rendered")
- .evaluate((element) => element.getBoundingClientRect().width),
- )
- .toBeGreaterThan(400);
- await expect(page.locator(".api-reference-page .t-doc__header"))
- .toHaveCSS("display", "none");
- await page.setViewportSize({ width: 835, height: 700 });
- await expect
- .poll(() =>
- page
- .locator(".api-reference-page .references-rendered")
- .evaluate((element) => element.getBoundingClientRect().width),
- )
- .toBeGreaterThan(300);
- await expect(page.getByLabel("Docs navigation")).toHaveCount(0);
- await expect(page.getByText("Create one call and read the structured result."))
- .toHaveCount(0);
- await page.getByRole("link", { name: "POST Create Call /v1/calls" }).click();
- await expect(page).toHaveURL(/section=api-1%2Ftag%2Fcalls%2FPOST%2Fv1%2Fcalls/);
- const createCallRegion = page.getByRole("region", {
- name: "Create Call",
- });
- await expect
- .poll(() =>
- createCallRegion.evaluate((element) => element.getBoundingClientRect().top),
- )
- .toBeLessThanOrEqual(70);
- await expectNoVisibleText(page, "CALL-E Developer API");
- await expect(
- createCallRegion.getByRole("heading", {
- name: "Create Call",
- }),
- ).toBeVisible();
- await expect(
- createCallRegion.getByText("Stable caller-provided key", { exact: false })
- .first(),
- ).toBeVisible();
- await expect(
- createCallRegion.getByText("Natural-language instruction for the call task", {
- exact: false,
- }).first(),
- ).toBeVisible();
- await expect(
- createCallRegion.getByText("Optional explicit recipients for this call task", {
- exact: false,
- }).first(),
- ).toBeVisible();
- await expect(
- createCallRegion.getByText("JSON Schema object that defines", {
- exact: false,
- }).first(),
- ).toBeVisible();
- const responseToggle = createCallRegion.locator(
- 'ul[aria-label="Responses"] > li:first-child > button',
- );
- if ((await responseToggle.getAttribute("aria-expanded")) === "false") {
- await responseToggle.click();
- }
- await expect(responseToggle).toHaveAttribute("aria-expanded", "true");
- await expect(
- createCallRegion.getByText("Public CALL-E call task identifier", {
- exact: false,
- }).first(),
- ).toBeVisible();
- await expect(
- createCallRegion.getByText("Structured result object extracted", {
- exact: false,
- }).first(),
- ).toBeVisible();
- await expectNoVisibleText(page, "400 Stable API error.");
- await expectNoVisibleText(page, "401 Stable API error.");
- await expect(createCallRegion.getByRole("tab", { name: "Status: 201" }))
- .toBeVisible();
- const narrowRenderedWidth = await page
- .locator(".api-reference-page .references-rendered")
- .evaluate((element) => element.getBoundingClientRect().width);
- const narrowDarkCardWidth = await page
- .locator(".api-reference-page .scalar-card.dark-mode")
- .first()
- .evaluate((element) => element.getBoundingClientRect().width);
- expect(narrowDarkCardWidth).toBeLessThanOrEqual(narrowRenderedWidth);
- await expect(page.getByText("Try it")).toHaveCount(0);
- await expectNoVisibleText(page, "Test Request");
- await expectNoVisibleText(page, "Send Request");
- await expectNoVisibleText(page, "Developer Tools");
- await expectNoVisibleText(page, "Configure");
- await expectNoVisibleText(page, "Share");
- await expectNoVisibleText(page, "Deploy");
- await expect(
- page.locator('[data-addressbar-action="send"]:visible'),
- ).toHaveCount(0);
+});
- await page.goto("/#tag/calls/POST/v1/calls");
+test("renders a read-only OpenAPI reference", async ({ page }) => {
+ await page.goto("/api-reference");
await expect(
- page.getByRole("navigation", { name: "API Reference navigation" }),
+ page.getByRole("heading", { name: "CALL-E Developer API" }),
).toBeVisible();
- await expect(page).toHaveURL(
- /#\/api-reference\?section=api-1%2Ftag%2Fcalls%2FPOST%2Fv1%2Fcalls/,
- );
- await expect
- .poll(() =>
- page
- .getByRole("region", { name: "Create Call" })
- .evaluate((element) => element.getBoundingClientRect().top),
- )
- .toBeLessThanOrEqual(70);
await expect(
- page.getByRole("region", { name: "Create Call" })
- .getByText("Natural-language instruction for the call", {
- exact: false,
- }),
+ page.getByText(
+ "Developer API contract used by the CALL-E TypeScript and Python SDKs.",
+ ),
).toBeVisible();
- await page.waitForTimeout(2000);
- await expect(page.getByRole("region", { name: "Get Call" })).toHaveCount(0);
- await expect(
- page.getByRole("region", { name: "List Call Events" }),
- ).toHaveCount(0);
- await expect(
- page.getByRole("region", { name: "Server Message" }),
- ).toHaveCount(0);
-});
-test("loads the OpenAPI document relative to the published page path", async ({
- page,
-}) => {
- await page.route("**/calle-docs-site/**", async (route) => {
- const url = new URL(route.request().url());
- const relativePath =
- url.pathname.replace(/^\/calle-docs-site\/?/, "") || "index.html";
- await route.fulfill({
- path: path.join(process.cwd(), "dist", relativePath),
- });
- });
-
- const openApiResponse = page.waitForResponse((response) => {
- return (
- new URL(response.url()).pathname ===
- "/calle-docs-site/openapi/calle.openapi.yaml" &&
- response.status() === 200
- );
- });
-
- await page.goto("/calle-docs-site/#/api-reference");
- await openApiResponse;
-
- await expect(
- page.getByRole("link", { name: "POST Create Call /v1/calls" }),
- ).toBeVisible();
-});
+ await page.goto("/api-reference/calls");
-test("renders the webhook Server Message reference like an inbound endpoint", async ({
- page,
-}) => {
- await page.setViewportSize({ width: 1920, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
-
- await page.goto("/#/api-reference");
- await openApiResponse;
- await page.getByRole("link", {
- name: "POST Server Message /calle/webhook",
- }).click();
-
- await expect(page).toHaveURL(
- /section=api-1%2Ftag%2Fwebhooks%2FPOST%2Fcalle%2Fwebhook/,
- );
-
- const webhookRegion = page.getByRole("region", {
- name: "Server Message",
- });
- await expect(
- webhookRegion.getByRole("heading", { name: "Server Message" }),
- ).toBeVisible();
- await expect(
- webhookRegion.getByText("https://{yourserver}.com/calle/webhook"),
- ).toBeVisible();
- await expect(webhookRegion.getByText("Auth Required")).toHaveCount(0);
- await expect(
- webhookRegion.locator(".property-name", { hasText: "CALL-E-Event-Id" }),
- ).toBeVisible();
- await expect(
- webhookRegion.locator(".property-name", { hasText: "CALL-E-Timestamp" }),
- ).toBeVisible();
- await expect(
- webhookRegion.locator(".property-name", { hasText: "CALL-E-Signature" }),
- ).toBeVisible();
- await expect(
- webhookRegion.getByText("Event payload CALL-E sends", { exact: false }),
- ).toBeVisible();
await expect(
- webhookRegion.getByText("Terminal call task snapshot", { exact: false }),
+ page.locator("h2#create-call"),
).toBeVisible();
await expect(
- webhookRegion.getByText("curl https://example.com/calle/webhook", {
- exact: false,
- }),
+ page.locator("h2#list-call-events"),
).toBeVisible();
+ await expect(page.getByText("POST").first()).toBeVisible();
+ await expect(page.getByText("Try it", { exact: true })).toHaveCount(0);
+ await expect(page.getByText("Send Request", { exact: true })).toHaveCount(0);
+
+ await page.goto("/api-reference/webhooks");
await expect(
- webhookRegion.locator(
- 'ul[aria-label="Responses"] > li:first-child > button',
- ),
- ).toHaveAttribute("aria-expanded", "true");
- await expect(
- webhookRegion.getByText("CALL-E treats any 2xx response as delivered", {
- exact: false,
- }),
+ page.locator("h2#server-message"),
).toBeVisible();
});
-test("keeps the API Reference pinned to the selected API", async ({ page }) => {
- await page.setViewportSize({ width: 1440, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
-
- await page.goto("/#/api-reference");
- await openApiResponse;
-
- await page.getByRole("link", {
- name: "GET List Call Events /v1/calls/{call_id}/events",
- }).click();
+test("keeps the guide usable on a narrow screen", async ({ page }) => {
+ await page.setViewportSize({ width: 390, height: 844 });
+ await page.goto("/quickstart");
await expect(
- page.getByRole("region", { name: "List Call Events" }),
+ page.getByRole("heading", { name: "Quickstart" }),
).toBeVisible();
await expect(
- page.getByRole("region", { name: "Create Call" }),
- ).toHaveCount(0);
- await expect(page.getByRole("region", { name: "Get Call" })).toHaveCount(0);
- await expect(
- page.getByRole("region", { name: "Server Message" }),
- ).toHaveCount(0);
-
- const scrollHeight = await page.evaluate(() => document.body.scrollHeight);
- await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
- await expect
- .poll(() =>
- page
- .getByRole("region", { name: "List Call Events" })
- .evaluate((element) => element.getBoundingClientRect().top),
- )
- .toBeLessThanOrEqual(56);
- await expect(
- page.getByRole("region", { name: "Server Message" }),
- ).toHaveCount(0);
- expect(scrollHeight).toBeLessThan(2200);
-});
-
-test("allows immediate scrolling after selecting an API", async ({ page }) => {
- await page.setViewportSize({ width: 1440, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
-
- await page.goto("/#/api-reference");
- await openApiResponse;
- await page.getByRole("link", { name: "POST Create Call /v1/calls" }).click();
-
- await expect(page.getByRole("region", { name: "Create Call" }))
- .toBeVisible();
- await page.mouse.wheel(0, 900);
- await page.waitForTimeout(350);
-
- await expect
- .poll(() => page.evaluate(() => window.scrollY))
- .toBeGreaterThan(200);
-});
-
-test("keeps the API sample column within one viewport", async ({
- page,
-}) => {
- await page.setViewportSize({ width: 1920, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
-
- await page.goto("/#/api-reference");
- await openApiResponse;
- await page.getByRole("link", { name: "POST Create Call /v1/calls" }).click();
-
- const rightColumn = page
- .locator("#api-1\\/tag\\/calls\\/POST\\/v1\\/calls .section-columns")
- .locator(":scope > .section-column")
- .nth(1);
- await expect(rightColumn).toBeVisible();
-
- const initialBox = await rightColumn.evaluate((element) => {
- const rect = element.getBoundingClientRect();
- return {
- bottom: rect.bottom,
- height: rect.height,
- top: rect.top,
- };
- });
- expect(initialBox.height).toBeLessThanOrEqual(812);
-
- await page.evaluate((top) => {
- window.scrollBy(0, top - 80);
- }, initialBox.top);
- await page.waitForTimeout(200);
-
- const visibleBox = await rightColumn.evaluate((element) => {
- const rect = element.getBoundingClientRect();
- return {
- bottom: rect.bottom,
- height: rect.height,
- top: rect.top,
- };
- });
- expect(visibleBox.top).toBeGreaterThanOrEqual(68);
- expect(visibleBox.top).toBeLessThanOrEqual(120);
- expect(visibleBox.bottom).toBeLessThanOrEqual(900);
- expect(visibleBox.height).toBeLessThanOrEqual(812);
-});
-
-test("renders API Reference with a Vapi-like desktop endpoint layout", async ({
- page,
-}) => {
- await page.setViewportSize({ width: 1920, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
+ page.getByRole("button", { name: "Open navigation menu" }),
+ ).toBeVisible();
+ const mobileTheme = page.getByTestId("theme-menu-trigger-mobile");
+ const mobileToc = page.getByRole("button", {
+ name: "Toggle table of contents",
});
+ await expect(mobileTheme).toBeVisible();
+ await expect(mobileToc).toBeVisible();
- await page.goto("/#/api-reference");
- await openApiResponse;
- await page.getByRole("link", { name: "POST Create Call /v1/calls" }).click();
-
- const sidebarWidth = await page.locator(".api-reference-sidebar").evaluate(
- (element) => element.getBoundingClientRect().width,
- );
- expect(sidebarWidth).toBeGreaterThanOrEqual(300);
-
- const contentBox = await page
- .locator("#api-1\\/tag\\/calls\\/POST\\/v1\\/calls .section-content")
- .evaluate((element) => {
- const rect = element.getBoundingClientRect();
- return {
- rightGap: window.innerWidth - rect.right,
- width: rect.width,
- };
- });
- expect(contentBox.width).toBeGreaterThan(1400);
- expect(contentBox.rightGap).toBeLessThan(2);
-
- const sectionColumns = page
- .locator("#api-1\\/tag\\/calls\\/POST\\/v1\\/calls .section-columns")
- .locator(":scope > .section-column");
- await expect(sectionColumns).toHaveCount(2);
-
- const leftColumnBox = await sectionColumns.nth(0).evaluate((element) => {
+ const themeCenterY = await mobileTheme.evaluate((element) => {
const rect = element.getBoundingClientRect();
- return { x: rect.x, y: rect.y, width: rect.width };
+ return rect.top + rect.height / 2;
});
- const rightColumnBox = await sectionColumns.nth(1).evaluate((element) => {
+ const tocCenterY = await mobileToc.evaluate((element) => {
const rect = element.getBoundingClientRect();
- return { x: rect.x, y: rect.y, width: rect.width };
+ return rect.top + rect.height / 2;
});
- expect(rightColumnBox.x).toBeGreaterThan(leftColumnBox.x + leftColumnBox.width);
- expect(Math.abs(rightColumnBox.y - leftColumnBox.y)).toBeLessThan(80);
- expect(rightColumnBox.width).toBeGreaterThan(600);
-
- const darkCardBackground = await page
- .locator(".api-reference-page .scalar-card.dark-mode")
- .first()
- .evaluate((element) => window.getComputedStyle(element).backgroundColor);
- expect(darkCardBackground).toBe("rgb(17, 24, 39)");
-
- const responseCard = page.locator(
- "#api-1\\/tag\\/calls\\/POST\\/v1\\/calls .response-card",
- );
- const visibleResponseRows = await page
- .locator(
- '#api-1\\/tag\\/calls\\/POST\\/v1\\/calls ul[aria-label="Responses"] > li',
- )
- .evaluateAll((items) => {
- return items.flatMap((item) => {
- const style = window.getComputedStyle(item);
- const rect = item.getBoundingClientRect();
- if (
- style.display === "none" ||
- style.visibility === "hidden" ||
- rect.width === 0 ||
- rect.height === 0
- ) {
- return [];
- }
-
- return [item.textContent?.replace(/\s+/g, " ").trim() ?? ""];
- });
- });
- expect(visibleResponseRows).toHaveLength(1);
- const visibleResponseRow = visibleResponseRows[0] ?? "";
- expect(visibleResponseRow).toContain("201 Call task accepted.");
- await expect(responseCard).toHaveCSS("background-color", "rgb(17, 24, 39)");
- await expect(responseCard.locator(".scalar-code-block"))
- .toHaveCSS("background-color", "rgb(11, 15, 25)");
- const visibleResponseControls = await responseCard.evaluate((element) => {
- return Array.from(
- element.querySelectorAll(".tab, .scalar-card-checkbox"),
- ).flatMap((control) => {
- const style = window.getComputedStyle(control);
- const rect = control.getBoundingClientRect();
- if (
- style.display === "none" ||
- style.visibility === "hidden" ||
- rect.width === 0 ||
- rect.height === 0
- ) {
- return [];
- }
-
- return [control.textContent?.replace(/\s+/g, " ").trim() ?? ""];
- });
- });
- expect(visibleResponseControls).toEqual(["Status: 201"]);
-
- const responseCodeDefaultColor = await responseCard
- .locator("code")
- .evaluate((element) => window.getComputedStyle(element).color);
- const responseKeyColor = await responseCard
- .locator(".hljs-attr", { hasText: '"id"' })
- .first()
- .evaluate((element) => window.getComputedStyle(element).color);
- const responseStringColor = await responseCard
- .locator(".hljs-string", { hasText: "call_123" })
- .first()
- .evaluate((element) => window.getComputedStyle(element).color);
-
- expect(responseKeyColor).not.toBe(responseCodeDefaultColor);
- expect(responseStringColor).not.toBe(responseKeyColor);
-});
+ expect(Math.abs(themeCenterY - tocCenterY)).toBeLessThan(4);
-test("omits API Reference schemas from navigation and rendered content", async ({
- page,
-}) => {
- await page.setViewportSize({ width: 1440, height: 900 });
- const openApiResponse = page.waitForResponse((response) => {
- return (
- response.url().endsWith("/openapi/calle.openapi.yaml") &&
- response.status() === 200
- );
- });
-
- await page.goto("/#/api-reference?section=api-1%2Fmodels");
- await openApiResponse;
-
- await expect(
- page.getByRole("link", { name: "POST Create Call /v1/calls" }),
- ).toHaveClass(/active/);
- await expect(page.getByRole("link", { name: "Models" })).toHaveCount(0);
- await expect(
- page.locator(".api-reference-nav-label", { hasText: "Schemas" }),
- ).toHaveCount(0);
- await expect(page.getByRole("heading", { name: "Models" })).toHaveCount(0);
- await expect(page.locator("#api-1\\/models:visible")).toHaveCount(0);
-});
-
-test("page toc links preserve the guide route and scroll to sections", async ({
- page,
-}) => {
- await page.goto("/");
-
- const scrollYBeforeClick = await page.evaluate(() => window.scrollY);
-
- await page.getByRole("navigation", { name: "On this page" })
- .getByRole("link", { name: "Read the result" })
- .click();
-
- await expect(page).toHaveURL(/#\/quickstart\?section=read-the-result$/);
-
- await expect
- .poll(() => page.evaluate(() => window.scrollY))
- .toBeGreaterThan(scrollYBeforeClick);
-
- const headingTop = await page.locator("#read-the-result").evaluate((element) => {
- return element.getBoundingClientRect().top;
+ await page.evaluate(() => {
+ window.scrollTo(0, document.documentElement.scrollHeight);
});
- expect(headingTop).toBeGreaterThanOrEqual(56);
+ await expect(page.getByTestId("scroll-to-top")).toHaveCSS("display", "none");
});
-
-async function expectNoVisibleText(page: Page, text: string) {
- await expect
- .poll(async () => {
- return page.getByText(text).evaluateAll((elements) => {
- return elements.filter((element) => {
- const style = window.getComputedStyle(element);
- const rect = element.getBoundingClientRect();
- return (
- style.display !== "none" &&
- style.visibility !== "hidden" &&
- rect.width > 0 &&
- rect.height > 0
- );
- }).length;
- });
- })
- .toBe(0);
-}
diff --git a/tsconfig.json b/tsconfig.json
index 73f6ff5..2e0b8b1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,20 +1,25 @@
{
"compilerOptions": {
"target": "ES2022",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ES2022"],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
+ "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
"module": "ESNext",
"moduleResolution": "Bundler",
+ "useDefineForClassFields": true,
+ "skipLibCheck": true,
+ "skipDefaultLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
+ "useUnknownInCatchVariables": false,
+ "strict": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "types": ["zudoku/client"]
},
- "include": ["src", "content", "tests", "vite.config.ts", "playwright.config.ts"]
+ "include": [
+ "src",
+ "content",
+ "tests",
+ "zudoku.config.tsx",
+ "playwright.config.ts"
+ ]
}
diff --git a/vite.config.ts b/vite.config.ts
deleted file mode 100644
index ca73100..0000000
--- a/vite.config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import mdx from "@mdx-js/rollup";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
- base: "./",
- plugins: [mdx(), react()],
- server: {
- host: "127.0.0.1",
- port: 5174,
- },
- preview: {
- host: "127.0.0.1",
- port: 4174,
- },
-});
diff --git a/zudoku.config.tsx b/zudoku.config.tsx
new file mode 100644
index 0000000..dabe3f4
--- /dev/null
+++ b/zudoku.config.tsx
@@ -0,0 +1,236 @@
+import type { ZudokuConfig } from "zudoku";
+import { ScrollToTop } from "./src/components/ScrollToTop.js";
+import { ThemeMenu } from "./src/components/ThemeMenu.js";
+import "./src/styles.css";
+
+const legacyHashRedirect = `
+(() => {
+ if (window.location.pathname !== "/") return;
+
+ const [route, query = ""] = window.location.hash.slice(1).split("?", 2);
+ const guideRoutes = new Set([
+ "/quickstart",
+ "/authentication",
+ "/calls",
+ "/webhooks",
+ "/errors",
+ "/sdks",
+ "/changelog",
+ ]);
+
+ if (guideRoutes.has(route)) {
+ const section = new URLSearchParams(query).get("section");
+ window.location.replace(
+ section ? \`\${route}#\${encodeURIComponent(section)}\` : route,
+ );
+ return;
+ }
+
+ if (
+ route === "/api-reference" ||
+ route.startsWith("/api-1/") ||
+ route.startsWith("tag/") ||
+ route.startsWith("description/") ||
+ route === "models"
+ ) {
+ window.location.replace("/api-reference");
+ return;
+ }
+
+ window.location.replace("/quickstart");
+})();
+`;
+
+const config = {
+ port: 5174,
+ canonicalUrlOrigin: "https://docs.heycall-e.com",
+ metadata: {
+ title: "%s | CALL-E Developer Docs",
+ defaultTitle: "CALL-E Developer Docs",
+ description:
+ "Guides and API reference for building server-side CALL-E integrations.",
+ favicon: "/favicon.svg",
+ applicationName: "CALL-E Developer Docs",
+ },
+ site: {
+ logo: {
+ src: {
+ light: "/call-e-logo.svg",
+ dark: "/call-e-logo.svg",
+ },
+ alt: "CALL-E",
+ width: "100px",
+ href: "https://www.heycall-e.com/",
+ reloadDocument: true,
+ },
+ showPoweredBy: false,
+ },
+ header: {
+ themeSwitcher: {
+ enabled: false,
+ },
+ navigation: [
+ {
+ label: "Website",
+ to: "https://www.heycall-e.com/",
+ target: "_blank",
+ },
+ {
+ label: "Dashboard",
+ to: "https://dashboard.heycall-e.com/",
+ target: "_blank",
+ },
+ ],
+ placements: {
+ navigation: "end",
+ search: "center",
+ },
+ },
+ slots: {
+ "head-navigation-end": () => (
+
+ CALL-E Developer API
+ CALL-E Developer Docs
+
+ Start with the Quickstart or browse the machine-readable API
+ contract.
+
+
+
+ ),
+ },
+ {
+ type: "category",
+ label: "Guides",
+ collapsible: false,
+ items: [
+ { type: "doc", file: "quickstart", label: "Quickstart" },
+ { type: "doc", file: "authentication", label: "Authentication" },
+ { type: "doc", file: "calls", label: "Calls" },
+ { type: "doc", file: "webhooks", label: "Webhooks" },
+ { type: "doc", file: "errors", label: "Errors" },
+ { type: "doc", file: "sdks", label: "SDKs" },
+ { type: "doc", file: "changelog", label: "What's New" },
+ ],
+ },
+ {
+ type: "link",
+ label: "API Reference",
+ to: "/api-reference",
+ },
+ ],
+ apis: [
+ {
+ type: "file",
+ input: "./openapi/calle.openapi.yaml",
+ path: "/api-reference",
+ options: {
+ disablePlayground: true,
+ disableSecurity: false,
+ showInfoPage: true,
+ expandAllTags: true,
+ schemaDownload: {
+ enabled: true,
+ fileName: "calle-openapi",
+ },
+ },
+ },
+ ],
+ defaults: {
+ apis: {
+ disablePlayground: true,
+ },
+ },
+ aiAssistants: ["claude", "chatgpt"],
+ search: {
+ type: "pagefind",
+ },
+ syntaxHighlighting: {
+ themes: {
+ light: "github-dark",
+ dark: "github-dark",
+ },
+ },
+ sitemap: {
+ siteUrl: "https://docs.heycall-e.com",
+ },
+ enableStatusPages: true,
+ plugins: [
+ {
+ getHead: () => ,
+ },
+ ],
+ theme: {
+ light: {
+ background: "#ffffff",
+ foreground: "#2a2a2a",
+ card: "#ffffff",
+ cardForeground: "#2a2a2a",
+ primary: "#087f75",
+ primaryForeground: "#ffffff",
+ muted: "#f5f6f7",
+ mutedForeground: "#666b73",
+ accent: "#e2f7f3",
+ accentForeground: "#07766d",
+ border: "#e6e8eb",
+ input: "#dfe3e6",
+ ring: "#0a9f90",
+ radius: "0.5rem",
+ },
+ dark: {
+ background: "#0f1217",
+ foreground: "#f3f4f6",
+ card: "#151920",
+ cardForeground: "#f3f4f6",
+ primary: "#35c9b8",
+ primaryForeground: "#08110f",
+ muted: "#1b2028",
+ mutedForeground: "#a4a9b1",
+ accent: "#163c38",
+ accentForeground: "#91e8dd",
+ border: "#2b3038",
+ input: "#343a44",
+ ring: "#35c9b8",
+ radius: "0.5rem",
+ },
+ },
+} satisfies ZudokuConfig;
+
+export default config;
-
-
-
-
-
-
-
- );
-}
-
-function extractCodeText(children: ReactNode): string {
- const codeElement = extractCodeElement(children);
- return String(codeElement?.props.children ?? "").trimEnd();
-}
-
-function extractLanguage(children: ReactNode): string {
- const codeElement = extractCodeElement(children);
- const languageMatch = codeElement?.props.className?.match(/language-([\w-]+)/);
- return languageMatch?.[1] ?? "";
-}
-
-function extractCodeElement(
- children: ReactNode,
-): ReactElement
-
- {highlightedCode}
-
-
-
-
- );
-}
diff --git a/src/components/PageToc.tsx b/src/components/PageToc.tsx
deleted file mode 100644
index ffac016..0000000
--- a/src/components/PageToc.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { TocItem } from "../docs-nav";
-
-type PageTocProps = {
- baseHref: string;
- items: TocItem[];
-};
-
-export function PageToc({ baseHref, items }: PageTocProps) {
- return (
-
- );
-}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..c1c21bd
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { ArrowUpIcon } from "zudoku/icons";
+import { Button } from "zudoku/ui/Button.js";
+
+export const ScrollToTop = () => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const updateVisibility = () => {
+ setIsVisible(window.scrollY > window.innerHeight);
+ };
+
+ updateVisibility();
+ window.addEventListener("scroll", updateVisibility, { passive: true });
+ window.addEventListener("resize", updateVisibility);
+
+ return () => {
+ window.removeEventListener("scroll", updateVisibility);
+ window.removeEventListener("resize", updateVisibility);
+ };
+ }, []);
+
+ const scrollToTop = () => {
+ const prefersReducedMotion = window.matchMedia(
+ "(prefers-reduced-motion: reduce)",
+ ).matches;
+
+ window.scrollTo({
+ top: 0,
+ behavior: prefersReducedMotion ? "auto" : "smooth",
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
deleted file mode 100644
index 637ef2f..0000000
--- a/src/components/SiteHeader.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import callELogoUrl from "../assets/call-e-logo.svg";
-
-export type SiteHeaderSection =
- | "guides"
- | "api-reference"
- | "sdks"
- | "changelog";
-
-type SiteHeaderProps = {
- activeSection: SiteHeaderSection;
-};
-
-export function SiteHeader({ activeSection }: SiteHeaderProps) {
- return (
-
-
-
- {children}
-
-
-
+
+);
diff --git a/src/docs-nav.ts b/src/docs-nav.ts
deleted file mode 100644
index 029121d..0000000
--- a/src/docs-nav.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-export type GuideSlug =
- | "quickstart"
- | "authentication"
- | "calls"
- | "webhooks"
- | "errors"
- | "sdks"
- | "changelog";
-
-export type TocItem = {
- id: string;
- title: string;
-};
-
-export type GuideNavItem = {
- type: "guide";
- slug: GuideSlug;
- title: string;
- href: string;
- description: string;
- toc: TocItem[];
-};
-
-export type ApiReferenceNavItem = {
- type: "api-reference";
- title: string;
- href: string;
- description: string;
-};
-
-export type DocsNavItem = GuideNavItem | ApiReferenceNavItem;
-
-export const guideNavItems: GuideNavItem[] = [
- {
- type: "guide",
- slug: "quickstart",
- title: "Quickstart",
- href: "#/quickstart",
- description: "Create one call and read the structured result.",
- toc: [
- { id: "install", title: "Install" },
- { id: "create-a-client", title: "Create a client" },
- { id: "create-and-wait", title: "Create and wait" },
- { id: "read-the-result", title: "Read the result" },
- ],
- },
- {
- type: "guide",
- slug: "authentication",
- title: "Authentication",
- href: "#/authentication",
- description: "Use API keys safely from trusted server environments.",
- toc: [
- { id: "api-keys", title: "API keys" },
- { id: "authorization-header", title: "Authorization header" },
- { id: "environments", title: "Environments" },
- { id: "server-only", title: "Server-only usage" },
- { id: "webhook-secrets", title: "Webhook secrets" },
- { id: "auth-errors", title: "Auth errors" },
- ],
- },
- {
- type: "guide",
- slug: "calls",
- title: "Calls",
- href: "#/calls",
- description: "Understand the call creation contract and event flow.",
- toc: [
- { id: "call-inputs", title: "Call inputs" },
- { id: "structured-results", title: "Structured results" },
- { id: "idempotency", title: "Idempotency" },
- { id: "polling-and-events", title: "Polling and events" },
- ],
- },
- {
- type: "guide",
- slug: "webhooks",
- title: "Webhooks",
- href: "#/webhooks",
- description: "Verify terminal webhooks and process events safely.",
- toc: [
- { id: "terminal-events", title: "Terminal events" },
- { id: "signature-verification", title: "Signature verification" },
- { id: "example-servers", title: "Example servers" },
- { id: "idempotent-handling", title: "Idempotent handling" },
- ],
- },
- {
- type: "guide",
- slug: "errors",
- title: "Errors",
- href: "#/errors",
- description: "Handle stable API errors and recovery paths.",
- toc: [
- { id: "error-envelope", title: "Error envelope" },
- { id: "stable-error-codes", title: "Stable error codes" },
- { id: "recovery-guidance", title: "Recovery guidance" },
- ],
- },
- {
- type: "guide",
- slug: "sdks",
- title: "SDKs",
- href: "#/sdks",
- description: "Install the stable TypeScript and Python server SDKs.",
- toc: [
- { id: "packages", title: "Packages" },
- { id: "package-status", title: "Package status" },
- { id: "source-repositories", title: "Source repositories" },
- { id: "local-examples", title: "Local examples" },
- { id: "supported-methods", title: "Supported methods" },
- { id: "availability", title: "Availability" },
- { id: "supported-scope", title: "Supported scope" },
- ],
- },
- {
- type: "guide",
- slug: "changelog",
- title: "What's New",
- href: "#/changelog",
- description: "Track CALL-E Developer API and SDK product updates.",
- toc: [
- { id: "june-8-2026", title: "June 8, 2026" },
- {
- id: "developer-api-and-server-sdks",
- title: "What's New: Developer API and server SDKs",
- },
- ],
- },
-];
-
-export const apiReferenceNavItem: ApiReferenceNavItem = {
- type: "api-reference",
- title: "API Reference",
- href: "#/api-reference",
- description: "Read the OpenAPI-powered endpoint reference.",
-};
-
-export const docsNavItems: DocsNavItem[] = [
- ...guideNavItems,
- apiReferenceNavItem,
-];
-
-export function getGuideNavItem(slug: GuideSlug): GuideNavItem {
- const item = guideNavItems.find((navItem) => navItem.slug === slug);
- if (!item) {
- throw new Error(`Unknown guide slug: ${slug}`);
- }
- return item;
-}
-
-export function isGuideSlug(value: string): value is GuideSlug {
- return guideNavItems.some((item) => item.slug === value);
-}
diff --git a/src/guide-content.tsx b/src/guide-content.tsx
deleted file mode 100644
index e296f48..0000000
--- a/src/guide-content.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import AuthenticationGuide from "../content/guides/authentication.mdx";
-import CallsGuide from "../content/guides/calls.mdx";
-import ChangelogGuide from "../content/guides/changelog.mdx";
-import ErrorsGuide from "../content/guides/errors.mdx";
-import QuickstartGuide from "../content/guides/quickstart.mdx";
-import SdksGuide from "../content/guides/sdks.mdx";
-import WebhooksGuide from "../content/guides/webhooks.mdx";
-import type { ComponentType } from "react";
-import type { GuideSlug } from "./docs-nav";
-
-export const guideComponents: Record
-
- );
-}
-
-function isVisibleApiReferenceSectionId(
- sectionId: string | null,
-): sectionId is string {
- if (!sectionId) {
- return false;
- }
-
- return apiReferenceNavGroups.some((group) =>
- group.items.some((item) => item.sectionId === sectionId),
- );
-}
-
-function scrollToApiSection(sectionId: string) {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (scrollToSection() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (scrollToSection()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, { childList: true, subtree: true });
- }
-
- window.requestAnimationFrame(() => {
- if (scrollToSection()) {
- stop();
- }
- });
-
- function scrollToSection() {
- const element = document.getElementById(sectionId);
- if (element) {
- element.scrollIntoView({ block: "start" });
- return true;
- }
-
- return false;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
-
-function syncVisibleApiSection(sectionId: string) {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
- const sectionIds = apiReferenceNavGroups.flatMap((group) =>
- group.items.map((item) => item.sectionId),
- );
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (syncSections() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (syncSections()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, {
- attributes: false,
- childList: true,
- subtree: true,
- });
- }
-
- window.requestAnimationFrame(() => {
- if (syncSections()) {
- stop();
- }
- });
-
- function syncSections() {
- let renderedCount = 0;
-
- for (const currentSectionId of sectionIds) {
- const section = document.getElementById(currentSectionId);
- if (!section) {
- continue;
- }
-
- renderedCount += 1;
- const isSelected = currentSectionId === sectionId;
- const shouldHide = !isSelected;
- if (section.hidden !== shouldHide) {
- section.hidden = shouldHide;
- }
- }
-
- return renderedCount === sectionIds.length;
- }
-
- function stop() {
- window.clearInterval(timer);
- observer.disconnect();
- }
-
- return stop;
-}
-
-function renderEndpointLines() {
- let attempts = 0;
- const root = document.querySelector(".api-reference-page");
- const items = apiReferenceNavGroups.flatMap((group) => group.items);
-
- const timer = window.setInterval(() => {
- attempts += 1;
- if (syncEndpointLines() || attempts >= 20) {
- stop();
- }
- }, 100);
-
- const observer = new MutationObserver(() => {
- if (syncEndpointLines()) {
- stop();
- }
- });
-
- if (root) {
- observer.observe(root, { childList: true, subtree: true });
- }
-
- window.requestAnimationFrame(() => {
- if (syncEndpointLines()) {
- stop();
- }
- });
-
- function syncEndpointLines() {
- let renderedCount = 0;
- const renderableItems = items.filter((item) => item.method && item.path);
-
- for (const item of items) {
- if (!item.method || !item.path) {
- continue;
- }
-
- const section = document.getElementById(item.sectionId);
- const header = section?.querySelector(".operation-header");
- if (!header) {
- continue;
- }
-
- const endpoint = item.endpointDisplay ?? item.path;
- const existing = section?.querySelector
-
-
-
-
- CALL-E Developer API
+CALL-E Developer Docs
++ Start with the Quickstart or browse the machine-readable API + contract. +
+ +