blume 2.0.3 → 2.1.0

package/src/captcha/turnstile.ts

@@ -0,0 +1,38 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+
+/** Options for {@link turnstile}. */
+export interface TurnstileOptions {
+  /** The widget's site key, from the Cloudflare dashboard. */
+  siteKey: string;
+}
+
+export const turnstileOptionsSchema = z.strictObject({
+  siteKey: z.string().min(1),
+});
+
+export type TurnstileAdapter = AdapterDescriptor<"turnstile", TurnstileOptions>;
+
+export const turnstileAdapterSchema = adapterDescriptorSchema(
+  "turnstile",
+  turnstileOptionsSchema
+);
+
+/** Where the assistant's route checks a Turnstile token. */
+export const TURNSTILE_VERIFY_URL =
+  "https://challenges.cloudflare.com/turnstile/v0/siteverify";
+
+/**
+ * Cloudflare Turnstile. The site key is public and goes to the browser; the
+ * secret key the route checks tokens with comes from `TURNSTILE_SECRET_KEY`.
+ * Set the widget to Invisible or Managed in the Cloudflare dashboard: most
+ * readers never see a challenge.
+ */
+export const turnstile = (options: TurnstileOptions): TurnstileAdapter => ({
+  kind: "turnstile",
+  options,
+  requiredSecrets: ["TURNSTILE_SECRET_KEY"],
+  runtimeDeps: [],
+});

package/src/captcha/verify.ts

@@ -0,0 +1,71 @@
+/**
+ * The server half of the bot check: the generated assistant route verifies
+ * the token the browser sent with the question against the provider before
+ * it calls the model. A failed or unreachable check refuses the question
+ * (and logs why), so a server that can't reach the provider shows up as a
+ * refused question rather than a silently unprotected route.
+ */
+import { clientAddressOf } from "../core/client-address.ts";
+import type { ClientContext } from "../core/client-address.ts";
+import { HCAPTCHA_VERIFY_URL } from "./hcaptcha.ts";
+import type { CaptchaAdapter } from "./schema.ts";
+import { TURNSTILE_VERIFY_URL } from "./turnstile.ts";
+
+/** The longest token either provider issues, with room to spare. */
+const MAX_TOKEN_LENGTH = 4096;
+
+/** What the provider answers about a token. */
+interface VerifyReply {
+  "error-codes"?: string[];
+  success?: boolean;
+}
+
+/** What the route hands the check from its runtime. */
+export interface VerifyOptions {
+  /** For tests; defaults to the global `fetch`. */
+  fetch?: typeof fetch;
+  /** The provider's secret key. */
+  secret: string;
+}
+
+/**
+ * Whether the provider confirms `token` came from a person on this site. The
+ * route passes the request body's `captcha` when it's a string.
+ */
+export const verifyCaptcha = async (
+  adapter: CaptchaAdapter,
+  token: string | undefined,
+  context: ClientContext,
+  options: VerifyOptions
+): Promise<boolean> => {
+  if (!token || token.length > MAX_TOKEN_LENGTH) {
+    return false;
+  }
+  const form = new URLSearchParams({ response: token, secret: options.secret });
+  const address = clientAddressOf(context);
+  if (address) {
+    form.set("remoteip", address);
+  }
+  if (adapter.kind === "hcaptcha") {
+    form.set("sitekey", adapter.options.siteKey);
+  }
+  try {
+    const response = await (options.fetch ?? fetch)(
+      adapter.kind === "hcaptcha" ? HCAPTCHA_VERIFY_URL : TURNSTILE_VERIFY_URL,
+      { body: form, method: "POST" }
+    );
+    // SAFETY: both providers answer JSON with a `success` flag; anything
+    // else reads as a failure below.
+    const reply = (await response.json()) as VerifyReply;
+    if (reply.success === true) {
+      return true;
+    }
+    console.warn(
+      `The ${adapter.kind} check refused a question:`,
+      reply["error-codes"] ?? response.status
+    );
+  } catch (error) {
+    console.error(`The ${adapter.kind} check could not be reached:`, error);
+  }
+  return false;
+};

package/src/cli/command-meta.ts

@@ -62,6 +62,11 @@ export const commandMeta = {
     description: "Preview the last production build.",
     name: "preview",
   },
+  skill: {
+    description:
+      "Write the docs site's agent skill with a coding agent, in place of the generated one.",
+    name: "skill",
+  },
   sync: {
     description: "Re-fetch remote content sources and regenerate the runtime.",
     name: "sync",

package/src/cli/commands/doctor.ts

@@ -14,6 +14,7 @@ import {
 import { BlumeError } from "../../core/diagnostics.ts";
 import { packageRoot } from "../../core/package-root.ts";
 import { scanProject } from "../../core/project-graph.ts";
+import type { ResolvedConfig } from "../../core/schema.ts";
 import { serverFeatures } from "../../core/server-features.ts";
 import type { Diagnostic } from "../../core/types.ts";
 import { unregisteredSnapshotDiagnostics } from "../../core/version-cut.ts";
@@ -71,6 +72,25 @@ const supportedNodeRange = (): string => {
   }
 };
 
+/** The adapters a project runs, one line per kind, for the doctor summary. */
+const integrationSummary = (config: ResolvedConfig): string[] => {
+  const { assistant } = config.ai;
+  let assistantSummary = "off";
+  if (assistant?.enabled) {
+    assistantSummary = assistant.endpoint
+      ? "external endpoint"
+      : assistant.provider.kind;
+  }
+  return [
+    `References: ${config.reference.map((adapter) => adapter.kind).join(", ") || "none"}`,
+    `Analytics: ${config.analytics.map((adapter) => adapter.kind).join(", ") || "none"}`,
+    `Consent: ${config.consent?.kind ?? "none"}`,
+    `Rate limiting: ${config.rateLimit?.kind ?? "off"}`,
+    `Sources: ${config.content.sources.map((source) => source.kind).join(", ")}`,
+    `Assistant: ${assistantSummary}`,
+  ];
+};
+
 export const doctorCommand = defineCommand({
   args: {
     json: {
@@ -144,23 +164,9 @@ export const doctorCommand = defineCommand({
         logger.info(`Output: ${config.deployment.options.output}`);
         logger.info(`Adapter: ${config.deployment.kind}`);
         logger.info(`Search: ${config.search.provider.kind}`);
-        logger.info(
-          `References: ${config.reference.map((adapter) => adapter.kind).join(", ") || "none"}`
-        );
-        logger.info(
-          `Analytics: ${config.analytics.map((adapter) => adapter.kind).join(", ") || "none"}`
-        );
-        logger.info(
-          `Sources: ${config.content.sources.map((source) => source.kind).join(", ")}`
-        );
-        const { assistant } = config.ai;
-        let assistantSummary = "off";
-        if (assistant?.enabled) {
-          assistantSummary = assistant.endpoint
-            ? "external endpoint"
-            : assistant.provider.kind;
+        for (const line of integrationSummary(config)) {
+          logger.info(line);
         }
-        logger.info(`Assistant: ${assistantSummary}`);
       }
     } catch (error) {
       if (error instanceof BlumeError) {

package/src/cli/commands/skill.ts

@@ -0,0 +1,96 @@
+import { defineCommand } from "citty";
+import { join } from "pathe";
+
+import {
+  planSkill,
+  WRITE_SKILL_DIR,
+  writeSkillPrompt,
+} from "../../ai/write-skill.ts";
+import { AGENTS, launchInstalledAgent } from "../../audit/agent.ts";
+import type { AgentKind } from "../../audit/agent.ts";
+import { BlumeError } from "../../core/diagnostics.ts";
+import { packageRoot } from "../../core/package-root.ts";
+import { scanProject } from "../../core/project-graph.ts";
+import { getBlumeVersion } from "../../core/version.ts";
+import { commandMeta } from "../command-meta.ts";
+import { reportInternalError } from "../internal-error.ts";
+import { logger, reportDiagnostics } from "../log.ts";
+
+/**
+ * `blume skill` — write the docs site's agent skill with a coding agent. Every
+ * build publishes a generated skill at `/skill.md` (a map of the docs); this
+ * opens Claude Code or Codex on the `blume-write-skill` skill bundled in this
+ * package to write the richer one, grounded in the docs, under the same name
+ * so it takes the generated one's place. The judgment stays in the skill; the
+ * command is the front door, like `blume migrate`. Status lines go straight to
+ * stderr: consola drops info-level lines in test and CI environments.
+ */
+export const skillCommand = defineCommand({
+  args: {
+    claude: {
+      description: "Write the skill with Claude Code.",
+      type: "boolean",
+    },
+    codex: {
+      description: "Write the skill with Codex.",
+      type: "boolean",
+    },
+  },
+  meta: commandMeta.skill,
+  async run({ args }) {
+    const root = process.cwd();
+    // SAFETY: AGENTS is a closed record keyed by AgentKind, so its keys are
+    // exactly the agent kinds.
+    const agents = (Object.keys(AGENTS) as AgentKind[]).filter(
+      (kind) => args[kind]
+    );
+    if (agents.length > 1) {
+      logger.error("Pass at most one of --codex or --claude.");
+      process.exit(1);
+    }
+    const [agent] = agents;
+
+    try {
+      // A scan, not `prepareProject`: the agent reads the content tree and
+      // the runtime isn't touched, so a running dev server is left alone.
+      const plan = planSkill(await scanProject(root, { mode: "build" }));
+      const skillDir = join(packageRoot(), WRITE_SKILL_DIR);
+      process.stderr.write(
+        `  ${plan.exists ? "Updating" : "Writing"} the "${plan.name}" skill at ${plan.file}.\n`
+      );
+
+      // Without an agent flag the command is the pointer for any other agent:
+      // the bundled skill's path, and the install line that puts the skill
+      // where agents look for it.
+      if (!agent) {
+        process.stderr.write(
+          `  blume skill writes it with a coding agent: rerun with --codex or --claude.\n  Using another agent? Point it at ${join(skillDir, "SKILL.md")},\n  or install the skill where your agent looks for skills: npx skills add haydenbleasel/blume --skill blume-write-skill\n`
+        );
+        return;
+      }
+
+      const cli = AGENTS[agent];
+      process.stderr.write(`  Handing it to ${cli.name}…\n\n`);
+      const code = await launchInstalledAgent(
+        cli.bin,
+        writeSkillPrompt(plan, { skillDir, version: getBlumeVersion() })
+      );
+      if (code === null) {
+        logger.error(
+          `${cli.name} (\`${cli.bin}\`) was not found on PATH. Install it with \`${cli.install}\`.`
+        );
+        process.exit(1);
+      }
+      if (code !== 0) {
+        process.exit(code);
+      }
+    } catch (error) {
+      if (error instanceof BlumeError) {
+        reportDiagnostics([error.diagnostic], root);
+        process.exit(1);
+      }
+      reportInternalError(error);
+      process.exit(1);
+    }
+  },
+});

package/src/cli/index.ts

@@ -81,6 +81,11 @@ const main = defineCommand({
       () => import("./commands/preview.ts"),
       "previewCommand"
     ),
+    skill: lazyCommand(
+      commandMeta.skill,
+      () => import("./commands/skill.ts"),
+      "skillCommand"
+    ),
     sync: lazyCommand(
       commandMeta.sync,
       () => import("./commands/sync.ts"),

package/src/cli/required-secrets.ts

@@ -2,6 +2,60 @@ import { resolveAskBackend } from "../ai/ask.ts";
 import type { ResolvedConfig } from "../core/schema.ts";
 import type { Diagnostic } from "../core/types.ts";
 
+/** A feature, and the secrets the adapter behind it reads. */
+interface SecretOwner {
+  feature: string;
+  note?: string;
+  secrets: string[];
+}
+
+/**
+ * The adapters that name their own secrets. The built-ins mostly declare
+ * none: analytics ships public tokens in the page, consent managers load
+ * public scripts, reference adapters read public specs, and host adapters
+ * read platform-injected env.
+ */
+const adapterSecretOwners = (config: ResolvedConfig): SecretOwner[] => {
+  const { consent, deployment, rateLimit } = config;
+  const { provider } = config.search;
+  const owners: SecretOwner[] = [
+    // Each search adapter declares the secrets its generated runtime reads.
+    { feature: `Search (${provider.kind})`, secrets: provider.requiredSecrets },
+    ...config.analytics.map((adapter) => ({
+      feature: `Analytics (${adapter.kind})`,
+      secrets: adapter.requiredSecrets,
+    })),
+    // Each content source adapter declares the env vars its fetch reads.
+    ...config.content.sources.map((source) => ({
+      feature: `Content source (${source.kind})`,
+      secrets: source.requiredSecrets,
+    })),
+    ...config.reference.map((adapter) => ({
+      feature: `API reference (${adapter.kind})`,
+      secrets: adapter.requiredSecrets,
+    })),
+    {
+      feature: `Deployment (${deployment.kind})`,
+      secrets: deployment.requiredSecrets,
+    },
+  ];
+  if (consent) {
+    owners.push({
+      feature: `Consent (${consent.kind})`,
+      secrets: consent.requiredSecrets,
+    });
+  }
+  // Upstash's endpoint and token.
+  if (rateLimit) {
+    owners.push({
+      feature: `Rate limiting (${rateLimit.kind})`,
+      note: "read at request time; without it the routes count in memory",
+      secrets: rateLimit.requiredSecrets,
+    });
+  }
+  return owners;
+};
+
 /**
  * Warn early when an enabled feature needs a secret env var that isn't set, so
  * the failure surfaces at `blume dev`/`build` instead of at the first request in
@@ -26,47 +80,35 @@ export const checkRequiredSecrets = (config: ResolvedConfig): Diagnostic[] => {
 
   if (config.ai.assistant?.enabled && !config.ai.assistant.endpoint) {
     // The adapter descriptor names the env vars its route reads.
-    const { provider } = config.ai.assistant;
+    const { captcha, provider } = config.ai.assistant;
     const backend = resolveAskBackend(provider);
     for (const env of provider.requiredSecrets) {
       requireSecret(`Assistant (${backend.label})`, env, backend.secretNote);
     }
-  }
-
-  // Each search adapter declares the secrets its generated runtime reads.
-  const { provider } = config.search;
-  for (const env of provider.requiredSecrets) {
-    requireSecret(`Search (${provider.kind})`, env);
-  }
-
-  // Adapters name their own secrets; the built-in analytics adapters ship
-  // public tokens in the page and declare none.
-  for (const adapter of config.analytics) {
-    for (const env of adapter.requiredSecrets) {
-      requireSecret(`Analytics (${adapter.kind})`, env);
+    // The bot check's secret key, which the route verifies tokens with.
+    for (const env of captcha?.requiredSecrets ?? []) {
+      requireSecret(`Assistant bot check (${captcha?.kind})`, env);
     }
   }
 
-  // Each content source adapter declares the env vars its fetch reads.
-  for (const source of config.content.sources) {
-    for (const env of source.requiredSecrets) {
-      requireSecret(`Content source (${source.kind})`, env);
+  // Generated narration reads its key at build, not at runtime; without it the
+  // build skips the audio and pages read with browser voices.
+  const { narration } = config;
+  if (narration.enabled && narration.provider) {
+    for (const env of narration.provider.requiredSecrets) {
+      requireSecret(
+        "Narration audio",
+        env,
+        "read at build; without it pages use browser voices"
+      );
     }
   }
 
-  // Adapters name their own secrets; the built-in reference adapters read
-  // public specs and declare none.
-  for (const adapter of config.reference) {
-    for (const env of adapter.requiredSecrets) {
-      requireSecret(`API reference (${adapter.kind})`, env);
+  for (const owner of adapterSecretOwners(config)) {
+    for (const env of owner.secrets) {
+      requireSecret(owner.feature, env, owner.note);
     }
   }
 
-  // The deployment adapter names its own secrets; the built-in host adapters
-  // read platform-injected env and declare none.
-  for (const env of config.deployment.requiredSecrets) {
-    requireSecret(`Deployment (${config.deployment.kind})`, env);
-  }
-
   return diagnostics;
 };

package/src/components/BlumePage.astro

@@ -49,6 +49,7 @@ import TreeRoot from "./content/Tree.astro";
 import TreeFile from "./content/TreeFile.astro";
 import TreeFolder from "./content/TreeFolder.astro";
 import TypeTable from "./content/TypeTable.astro";
+import View from "./content/View.astro";
 import Visibility from "./content/Visibility.astro";
 import YouTube from "./content/YouTube.astro";
 
@@ -96,6 +97,7 @@ const components = {
   Tooltip,
   Tree,
   TypeTable,
+  View,
   Visibility,
   YouTube,
   ...extra,

package/src/components/content/ApiEndpoint.astro

@@ -0,0 +1,18 @@
+---
+// The method and path at the top of a page with `api` frontmatter, as an
+// OpenAPI operation page shows them. `markdown/api-rail.ts` places it.
+import MethodBadge from "../openapi/MethodBadge.astro";
+import { readEndpointSpec } from "./api-page.ts";
+
+interface Props {
+  /** The endpoint, as the page's plugin wrote it. */
+  spec: string;
+}
+
+const { method, target } = readEndpointSpec(Astro.props.spec);
+---
+
+<div class="not-prose mb-6 flex flex-wrap items-center gap-3">
+  <MethodBadge method={method} />
+  <code class="break-all font-mono text-foreground text-sm">{target}</code>
+</div>

package/src/components/content/ApiField.astro

@@ -0,0 +1,79 @@
+---
+// The row behind `<ParamField>` and `<ResponseField>`: the name with its
+// labels, location, type, and flags, the default, then the description from
+// the slot, which may hold any MDX, nested fields in an `<Expandable>`
+// included. Styled like the OpenAPI reference's rows, so a hand-written API
+// page reads like a generated one. Narration skips it, as it does type tables.
+import { defaultLabel, isOn } from "./api-field.ts";
+import type { FieldValue, FlagProp } from "./api-field.ts";
+
+interface Props {
+  default?: FieldValue;
+  deprecated?: FlagProp;
+  location?: string;
+  name?: string;
+  post?: string[];
+  pre?: string[];
+  required?: FlagProp;
+  type?: string;
+}
+
+const {
+  default: value,
+  deprecated,
+  location,
+  name,
+  post = [],
+  pre = [],
+  required,
+  type,
+} = Astro.props;
+const shownDefault = defaultLabel(value);
+const labelClass =
+  "rounded bg-muted px-1.5 py-0.5 font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide";
+---
+
+<div
+  class="border-border border-b py-4"
+  data-blume-field
+  data-blume-narration="skip"
+>
+  <div class="not-prose flex flex-wrap items-baseline gap-x-2 gap-y-1">
+    {pre.map((label) => <span class={labelClass}>{label}</span>)}
+    {name && <code class="font-mono text-foreground text-sm">{name}</code>}
+    {post.map((label) => <span class={labelClass}>{label}</span>)}
+    {location && <span class={labelClass}>{location}</span>}
+    {type && <span class="text-muted-foreground text-xs">{type}</span>}
+    {
+      isOn(required) && (
+        <span class="font-medium text-[0.625rem] text-red-600 uppercase tracking-wide dark:text-red-400">
+          required
+        </span>
+      )
+    }
+    {
+      isOn(deprecated) && (
+        <span class="font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide line-through">
+          deprecated
+        </span>
+      )
+    }
+  </div>
+  {
+    shownDefault !== null && (
+      <div class="not-prose mt-2 text-muted-foreground text-xs">
+        Default:{" "}
+        <code class="rounded bg-muted px-1 py-0.5 text-foreground">
+          {shownDefault}
+        </code>
+      </div>
+    )
+  }
+  {
+    Astro.slots.has("default") && (
+      <div class="mt-2 text-muted-foreground text-sm [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        <slot />
+      </div>
+    )
+  }
+</div>

package/src/components/content/ApiPlayground.astro

@@ -0,0 +1,62 @@
+---
+// A hand-written endpoint's Try it panel and request samples, at the head of
+// its rail: the page's `<ParamField>`s become the parameters and body of an
+// operation model like a spec'd operation's (see `api-page.ts`), so the
+// playground and the samples are the OpenAPI reference's own. A page's own
+// `<RequestExample>` stands in for the generated samples, and its
+// `playground` frontmatter can drop the Try it panel (`simple`).
+import data from "blume:data";
+
+import { operationModel } from "../openapi/operation-model.ts";
+import Playground from "../openapi/Playground.astro";
+import { buildRequest, defaultValues } from "../openapi/request.ts";
+import RequestPanel from "../openapi/RequestPanel.astro";
+import { sampleLanguages } from "../openapi/snippets.ts";
+import {
+  endpointBody,
+  endpointParameters,
+  endpointSecurity,
+  endpointTarget,
+  readEndpointSpec,
+} from "./api-page.ts";
+
+interface Props {
+  /** The endpoint, as the page's plugin wrote it. */
+  spec: string;
+}
+
+const spec = readEndpointSpec(Astro.props.spec);
+const { api } = data.config;
+const { path, servers } = endpointTarget(spec.target, api.server);
+const model = operationModel({
+  method: spec.method,
+  parameters: endpointParameters(spec.fields),
+  path,
+  requestBody: endpointBody(spec.fields),
+  schemas: {},
+  security: endpointSecurity(spec.authMethod, api.auth),
+  servers,
+});
+const tryIt = spec.playground !== "simple" && api.playground.enabled;
+---
+
+{
+  tryIt && (
+    <Playground
+      model={model}
+      operation={`${spec.method} ${spec.target}`}
+      proxy={api.playground.proxy}
+      slug="api-pages"
+    />
+  )
+}
+{
+  !spec.requestExample && (
+    <RequestPanel
+      languages={sampleLanguages([])}
+      responses={{}}
+      sample={buildRequest(model, defaultValues(model))}
+      schemas={{}}
+    />
+  )
+}

package/src/components/content/ApiRail.astro

@@ -0,0 +1,19 @@
+---
+// The column `<RequestExample>` and `<ResponseExample>` pin to, which
+// `markdown/api-rail.ts` gathers at the end of the page. At `xl` it sits
+// beside the page's content, which the layout pads to make room, and sticks
+// under the header like an OpenAPI operation's sample panel; below `xl` it
+// follows the content.
+import OperationPanel from "../openapi/OperationPanel.astro";
+---
+
+<div
+  class="not-prose mt-10 xl:absolute xl:inset-y-0 xl:end-0 xl:mt-0 xl:w-[28rem]"
+  data-blume-api-rail
+>
+  <OperationPanel>
+    <div class="flex flex-col gap-4 [&>*]:my-0">
+      <slot />
+    </div>
+  </OperationPanel>
+</div>

package/src/components/content/Color.astro

@@ -10,6 +10,7 @@ const { variant = "compact" } = Astro.props;
       : "grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-4",
   ]}
   data-blume-color={variant}
+  data-blume-narration="skip"
 >
   <slot />
 </div>

package/src/components/content/FileTree.astro

@@ -3,6 +3,7 @@
 
 <div
   class="not-prose my-6 rounded-blume border border-border p-5 text-sm [&_ul]:m-0! [&_ul]:list-none [&_ul]:ps-4 [&>ul]:ps-0"
+  data-blume-narration="skip"
 >
   <slot />
 </div>

package/src/components/content/GithubInfo.astro

@@ -73,6 +73,7 @@ const { content: strings } = contentStrings(data, Astro.currentLocale);
   owner && repo && (
     <a
       class="not-prose my-6 flex flex-col gap-2 rounded-blume border border-border p-4 no-underline! transition-colors hover:border-foreground/30 hover:bg-muted/40"
+      data-blume-narration="skip"
       href={`${host}/${owner}/${repo}`}
       {...NEW_TAB_ATTRS}
     >

package/src/components/content/Panel.astro

@@ -4,6 +4,7 @@ const { title } = Astro.props;
 
 <aside
   class="not-prose my-6 overflow-hidden rounded-blume border border-border/80 bg-background shadow-sm shadow-border/30"
+  data-blume-narration="skip"
   data-blume-panel
   data-blume-right-rail-item
 >

package/src/components/content/ParamField.astro

@@ -0,0 +1,25 @@
+---
+// `<ParamField query="limit" type="integer" required>`: a request parameter,
+// named by the attribute that says where it goes (`path`, `query`, `header`,
+// or `body`), with its description in the slot. On a page with `api`
+// frontmatter the fields also build that page's playground.
+import ApiField from "./ApiField.astro";
+import { paramField } from "./api-field.ts";
+import type { ParamFieldProps } from "./api-field.ts";
+
+type Props = ParamFieldProps;
+
+const { location, name } = paramField(Astro.props);
+const { default: value, deprecated, required, type } = Astro.props;
+---
+
+<ApiField
+  default={value}
+  deprecated={deprecated}
+  location={location}
+  name={name}
+  required={required}
+  type={type}
+>
+  <slot />
+</ApiField>