@umami/shiso 1.18.0 → 1.19.0

package/src/components/OpenApiOperation.tsx

@@ -1,11 +1,19 @@
+import { ApiPlayground } from '@/components/ApiPlayground';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Badge } from '@/components/docs/Badge';
 import { CodeGroup } from '@/components/docs/CodeGroup';
 import { Expandable } from '@/components/docs/Expandable';
 import { PropertiesTable } from '@/components/docs/PropertiesTable';
 import { useLabels } from '@/lib/label-context';
-import { operationParameterSections, operationSections, statusColor } from '@/lib/openapi';
-import type { NormalizedOperation, SchemaNode, ThemeLabels } from '@/lib/types';
+import {
+  operationParameterSections,
+  operationSections,
+  securityFieldName,
+  securityForLocation,
+  statusColor,
+} from '@/lib/openapi';
+import type { NormalizedOperation, SchemaNode, SecurityScheme, ThemeLabels } from '@/lib/types';
+import { securityPlaceholder } from '../../scripts/lib/request-samples.mjs';
 
 function FieldChildren({ node }: { node: SchemaNode }) {
   const labels = useLabels();
@@ -104,27 +112,63 @@ function HighlightedCode({
   );
 }
 
+/** How a credential is sent, e.g. "Bearer <token>" or "<api-key>". */
+function credentialExample(scheme: SecurityScheme): string {
+  const placeholder = securityPlaceholder(scheme);
+  if (scheme.type === 'apiKey') return placeholder;
+  const prefix =
+    scheme.type === 'http' && scheme.scheme && scheme.scheme !== 'bearer'
+      ? scheme.scheme.charAt(0).toUpperCase() + scheme.scheme.slice(1)
+      : 'Bearer';
+  return `${prefix} ${placeholder}`;
+}
+
 export interface OpenApiOperationProps {
   operation: NormalizedOperation;
+  /** Renders the "Try it" panel ahead of the reference; carries the proxy setting. */
+  playground?: { proxy?: string } | false;
 }
 
 /** The generated reference for one API operation, rendered under the page body. */
-export function OpenApiOperation({ operation }: OpenApiOperationProps) {
+export function OpenApiOperation({
+  operation,
+  playground: requested = false,
+}: OpenApiOperationProps) {
   const labels = useLabels();
-  const sectionEntries = operationSections(operation);
-  const sections = new Map(sectionEntries.map(entry => [entry.name, entry.id]));
+  // Webhooks describe requests the API sends, so there is nothing to try.
+  const playground = operation.webhook ? false : requested;
+  const options = { playground: !!playground };
+  const sectionEntries = operationSections(operation, labels, options);
+  // Ids come from the untranslated names so anchors are stable across locales.
+  const sections = new Map(
+    operationSections(operation, undefined, options).map(entry => [entry.name, entry.id]),
+  );
+  const parameterSections = operationParameterSections(operation, labels);
+  const parameterOffset = playground ? 1 : 0;
 
   return (
     <div className="docs-markdown">
-      {operationParameterSections(operation, labels).map(({ location, name }, index) => (
+      {playground && (
+        <section>
+          <h2 id={sections.get('Try it')}>{labels.apiPlayground}</h2>
+          <ApiPlayground operation={operation} proxy={playground.proxy} />
+        </section>
+      )}
+      {parameterSections.map(({ location, name }, index) => (
         <section key={location}>
-          <h2 id={sectionEntries[index].id}>{name}</h2>
+          <h2 id={sectionEntries[index + parameterOffset].id}>{name}</h2>
           <PropertiesTable>
-            {location === 'header' && operation.security.length > 0 && (
-              <PropertiesTable.Row name="Authorization" type="string" required>
-                {labels.apiCredentials} <code>Bearer &lt;token&gt;</code>.
+            {securityForLocation(operation, location).map(scheme => (
+              <PropertiesTable.Row
+                key={`security:${scheme.name}`}
+                name={securityFieldName(scheme)}
+                type="string"
+                required
+              >
+                {scheme.description || labels.apiCredentials}{' '}
+                <code>{credentialExample(scheme)}</code>.
               </PropertiesTable.Row>
-            )}
+            ))}
             {operation.parameters[location].map(parameter => (
               <PropertiesTable.Row
                 key={parameter.name}
@@ -143,7 +187,9 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       ))}
       {operation.requestBody && (
         <section>
-          <h2 id={sections.get('Request body')}>{labels.apiRequestBody}</h2>
+          <h2 id={sections.get(operation.webhook ? 'Payload' : 'Request body')}>
+            {operation.webhook ? labels.apiPayload : labels.apiRequestBody}
+          </h2>
           <SchemaFields node={operation.requestBody.schema} />
           {operation.requestBody.example && (
             <HighlightedCode

package/src/components/OpenApiSchema.tsx

@@ -0,0 +1,97 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { Expandable } from '@/components/docs/Expandable';
+import { PropertiesTable } from '@/components/docs/PropertiesTable';
+import { useLabels } from '@/lib/label-context';
+import { schemaSections } from '@/lib/openapi';
+import type { SchemaNode, SchemaPage, ThemeLabels } from '@/lib/types';
+
+function FieldChildren({ node }: { node: SchemaNode }) {
+  const labels = useLabels();
+  return (
+    <>
+      {node.description}
+      {node.enum && node.enum.length > 0 && (
+        <div className="mt-1">
+          {labels.fieldOptions}{' '}
+          {node.enum.map((value, index) => (
+            <span key={value}>
+              {index > 0 && ', '}
+              <code>{value}</code>
+            </span>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function SchemaTable({ nodes, labels }: { nodes: SchemaNode[]; labels: ThemeLabels }) {
+  return (
+    <PropertiesTable>
+      {nodes.map(node => (
+        <PropertiesTable.Row
+          key={node.name || node.type}
+          name={node.name || node.type}
+          type={node.type}
+          required={node.required}
+          deprecated={node.deprecated}
+          default={node.default}
+          details={
+            node.children?.length ? (
+              <Expandable
+                title={
+                  node.type === 'oneOf' || node.type === 'anyOf'
+                    ? labels.allowedTypes
+                    : labels.properties
+                }
+              >
+                <SchemaTable nodes={node.children} labels={labels} />
+              </Expandable>
+            ) : undefined
+          }
+        >
+          <FieldChildren node={node} />
+        </PropertiesTable.Row>
+      ))}
+    </PropertiesTable>
+  );
+}
+
+export interface OpenApiSchemaProps {
+  page: SchemaPage;
+}
+
+/** The generated reference for one named component schema. */
+export function OpenApiSchema({ page }: OpenApiSchemaProps) {
+  const labels = useLabels();
+  const sections = new Map(schemaSections(page, labels).map(entry => [entry.id, entry.name]));
+  const properties = sections.get('properties');
+  const example = sections.get('example');
+
+  return (
+    <div className="docs-markdown">
+      {properties && (
+        <section>
+          <h2 id="properties">{properties}</h2>
+          <SchemaTable nodes={page.schema.children ?? []} labels={labels} />
+        </section>
+      )}
+      {example && page.example && (
+        <section>
+          <h2 id="example">{example}</h2>
+          <CodeBlock data-language="json" data-title={page.name}>
+            {page.exampleHtml ? (
+              <code
+                className="language-json"
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: build-time generated markup from the project's own OpenAPI spec.
+                dangerouslySetInnerHTML={{ __html: page.exampleHtml }}
+              />
+            ) : (
+              <code className="language-json">{page.example}</code>
+            )}
+          </CodeBlock>
+        </section>
+      )}
+    </div>
+  );
+}

package/src/components/SideNav.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { flattenNav, isNodeHidden } from '@/lib/docs-config';
-import { methodColor } from '@/lib/openapi';
+import { methodBadgeText, methodColor } from '@/lib/openapi';
 import type { DocsTab, NavGroupNode, NavNode } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
@@ -281,7 +281,7 @@ function NavNodes({
               size="xs"
               className="w-10 shrink-0 justify-center whitespace-nowrap font-mono"
             >
-              {method === 'DELETE' ? 'DEL' : method}
+              {methodBadgeText(method)}
             </MethodBadge>
           ) : null}
           {label}

package/src/lib/openapi.generated.ts

@@ -1,4 +1,5 @@
 // Build-time alias target. Shiso replaces this module with the project's generated operations.
-import type { NormalizedOperation } from '@/lib/types';
+import type { NormalizedOperation, SchemaPage } from '@/lib/types';
 
 export const OPENAPI_OPERATIONS: Record<string, NormalizedOperation> = {};
+export const OPENAPI_SCHEMAS: Record<string, SchemaPage> = {};

package/src/lib/openapi.ts

@@ -6,9 +6,18 @@ import { englishLabels } from '@/lib/labels';
  */
 
 import type { BadgeColor } from '@/components/docs/Badge';
-import { OPENAPI_OPERATIONS } from '@/lib/openapi.generated';
+import { OPENAPI_OPERATIONS, OPENAPI_SCHEMAS } from '@/lib/openapi.generated';
 import { createSlugger } from '@/lib/slug';
-import type { NormalizedOperation, ThemeLabels, TocEntry } from '@/lib/types';
+import type {
+  ApiPlaygroundDisplay,
+  DocFrontmatter,
+  NormalizedOperation,
+  ResolvedApiPlayground,
+  SchemaPage,
+  SecurityScheme,
+  ThemeLabels,
+  TocEntry,
+} from '@/lib/types';
 
 export const METHOD_COLORS: Record<string, BadgeColor> = {
   GET: 'green',
@@ -16,8 +25,33 @@ export const METHOD_COLORS: Record<string, BadgeColor> = {
   PUT: 'orange',
   PATCH: 'purple',
   DELETE: 'red',
+  WEBHOOK: 'yellow',
 };
 
+const HTTP_METHODS = new Set(['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS', 'TRACE']);
+
+/** Short sidebar badge text for a method. */
+export function methodBadgeText(method: string): string {
+  if (method === 'DELETE') return 'DEL';
+  if (method === 'WEBHOOK') return 'HOOK';
+  return method;
+}
+
+/**
+ * Normalizes an `openapi:` frontmatter value into a lookup key. Mirrors
+ * normalizeOperationKey in scripts/lib/openapi.mjs: the method (or "webhook")
+ * is uppercased and an optional leading spec qualifier is kept verbatim.
+ */
+export function normalizeOperationKey(value: unknown): string | undefined {
+  if (typeof value !== 'string' || !value.trim()) return undefined;
+  const [first, ...rest] = value.trim().split(/\s+/);
+  if (!rest.length) return undefined;
+  const upper = first.toUpperCase();
+  if (upper === 'WEBHOOK' || HTTP_METHODS.has(upper)) return `${upper} ${rest.join(' ')}`;
+  const inner = normalizeOperationKey(rest.join(' '));
+  return inner ? `${first} ${inner}` : undefined;
+}
+
 export function methodColor(method?: string): BadgeColor {
   return (method && METHOD_COLORS[method.toUpperCase()]) || 'gray';
 }
@@ -29,14 +63,68 @@ export function statusColor(status: string): BadgeColor {
   return 'gray';
 }
 
+/** Options that change which generated sections an operation page renders. */
+export interface OperationSectionOptions {
+  /** Whether the "Try it" panel renders ahead of the reference sections. */
+  playground?: boolean;
+}
+
+/**
+ * Resolves the effective playground display for a page: the frontmatter
+ * `playground` value wins over `api.playground.display`.
+ */
+export function resolvePlaygroundDisplay(
+  playground: ResolvedApiPlayground,
+  frontmatter?: DocFrontmatter,
+): ApiPlaygroundDisplay {
+  const override = frontmatter?.playground;
+  if (override === 'interactive' || override === 'simple' || override === 'none') {
+    return override;
+  }
+  return playground.display;
+}
+
 /** Looks up the operation bound by an `openapi:` frontmatter value. */
 export function getOperation(key?: unknown): NormalizedOperation | undefined {
-  if (typeof key !== 'string' || !key.trim()) {
-    return undefined;
-  }
+  const normalized = normalizeOperationKey(key);
+  return normalized ? OPENAPI_OPERATIONS[normalized] : undefined;
+}
+
+/** Looks up the schema bound by an `openapi-schema:` frontmatter value. */
+export function getSchema(key?: unknown): SchemaPage | undefined {
+  if (typeof key !== 'string' || !key.trim()) return undefined;
+  return OPENAPI_SCHEMAS[key.trim().split(/\s+/).join(' ')];
+}
+
+/**
+ * Section headings for a schema page, in render order. Mirrors schemaAnchors
+ * in scripts/lib/openapi.mjs.
+ */
+export function schemaSections(page: SchemaPage, labels: ThemeLabels = englishLabels): TocEntry[] {
+  return [
+    ...(page.schema.children?.length
+      ? [{ name: labels.apiSchemaProperties, id: 'properties', size: 2 }]
+      : []),
+    ...(page.example ? [{ name: labels.apiExample, id: 'example', size: 2 }] : []),
+  ];
+}
+
+/** Where a security scheme's credential travels: a header unless it is a query or cookie API key. */
+export function securityLocation(scheme: SecurityScheme): 'header' | 'query' | 'cookie' {
+  return scheme.type === 'apiKey' && scheme.in ? scheme.in : 'header';
+}
+
+/** Security schemes that are sent in the given parameter location. */
+export function securityForLocation(
+  operation: NormalizedOperation,
+  location: 'header' | 'path' | 'query' | 'cookie',
+): SecurityScheme[] {
+  return operation.security.filter(scheme => securityLocation(scheme) === location);
+}
 
-  const [method, ...rest] = key.trim().split(/\s+/);
-  return OPENAPI_OPERATIONS[`${method.toUpperCase()} ${rest.join(' ')}`];
+/** Display name of the header, query, or cookie entry a scheme adds. */
+export function securityFieldName(scheme: SecurityScheme): string {
+  return scheme.type === 'apiKey' ? scheme.paramName || scheme.name : 'Authorization';
 }
 
 export function hasParameters(operation: NormalizedOperation): boolean {
@@ -61,7 +149,7 @@ export function operationParameterSections(
   return groups.filter(
     ({ location }) =>
       operation.parameters[location].length > 0 ||
-      (location === 'header' && operation.security.length > 0),
+      securityForLocation(operation, location).length > 0,
   );
 }
 
@@ -73,18 +161,24 @@ export function operationParameterSections(
 export function operationSections(
   operation: NormalizedOperation,
   labels: ThemeLabels = englishLabels,
+  options: OperationSectionOptions = {},
 ): TocEntry[] {
   const slugger = createSlugger();
+  const playground = options.playground && !operation.webhook;
   const names = [
+    playground ? 'Try it' : undefined,
     ...operationParameterSections(operation).map(section => section.name),
-    operation.requestBody ? 'Request body' : undefined,
+    operation.requestBody ? (operation.webhook ? 'Payload' : 'Request body') : undefined,
     operation.responses.length ? 'Responses' : undefined,
     operation.samples.length ? 'Code samples' : undefined,
   ].filter((name): name is string => Boolean(name));
 
   const translated = [
+    ...(playground ? [labels.apiPlayground] : []),
     ...operationParameterSections(operation, labels).map(section => section.name),
-    ...(operation.requestBody ? [labels.apiRequestBody] : []),
+    ...(operation.requestBody
+      ? [operation.webhook ? labels.apiPayload : labels.apiRequestBody]
+      : []),
     ...(operation.responses.length ? [labels.apiResponses] : []),
     ...(operation.samples.length ? [labels.apiCodeSamples] : []),
   ];

package/src/lib/site-model.ts

@@ -48,6 +48,17 @@ function normalizeNavbar(config: DocsConfig['navbar']): NormalizedNavbar | null
   return links.length || primary ? { links, primary } : null;
 }
 
+function normalizePlayground(config: DocsConfig['api']): SiteModel['api']['playground'] {
+  const playground = config?.playground;
+  const display =
+    playground?.display === 'simple' || playground?.display === 'none'
+      ? playground.display
+      : 'interactive';
+  const proxy = playground?.proxy?.trim() || undefined;
+
+  return proxy ? { display, proxy } : { display };
+}
+
 function normalizeFooter(config: DocsConfig['footer']): NormalizedFooter | null {
   const socials = (config?.socials || []).filter(link => !!link?.href).map(normalizeLink);
   const links = (config?.links || [])
@@ -112,6 +123,7 @@ export function resolveSiteModel(
     drilldown: config.interaction?.drilldown,
     locale: shiso?.locale || 'en-US',
     labels: resolveLabels(shiso?.locale || 'en-US', shiso?.translations),
+    api: { playground: normalizePlayground(config.api) },
     docs,
   };
 }

package/src/lib/translations/de.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "Codebeispiele",
   "apiExampleRequest": "Beispielanfrage",
   "apiExampleResponse": "Beispiel für {status}",
-  "apiCredentials": "Anmeldedaten, z. B."
+  "apiCredentials": "Anmeldedaten, z. B.",
+  "apiPlayground": "Ausprobieren",
+  "apiServer": "Server",
+  "apiAuthorization": "Autorisierung",
+  "apiUsername": "Benutzername",
+  "apiPassword": "Passwort",
+  "apiToken": "Token",
+  "apiApiKey": "API-Schlüssel",
+  "apiBody": "Body",
+  "apiSend": "Anfrage senden",
+  "apiSending": "Wird gesendet...",
+  "apiCancel": "Abbrechen",
+  "apiRequest": "Anfrage",
+  "apiResponse": "Antwort",
+  "apiResponseHeaders": "Antwort-Header",
+  "apiResponseBody": "Antwort-Body",
+  "apiNoResponse": "Senden Sie eine Anfrage, um die Antwort zu sehen.",
+  "apiRequestFailed": "Die Anfrage konnte nicht gesendet werden. Die API blockiert möglicherweise Browser-Anfragen (CORS) oder ist nicht erreichbar; konfigurieren Sie einen Playground-Proxy oder führen Sie das cURL-Beispiel im Terminal aus.",
+  "apiRequestTimedOut": "Zeitüberschreitung der Anfrage.",
+  "apiCookiesUnsupported": "Cookie-Parameter können im Browser nicht gesetzt werden und werden nicht gesendet.",
+  "apiOptional": "optional",
+  "apiElapsed": "{ms} ms",
+  "apiCredentialsStored": "Zugangsdaten bleiben in diesem Browser-Tab und werden nur an die API gesendet.",
+  "apiPayload": "Nutzdaten",
+  "apiSchemaProperties": "Eigenschaften",
+  "apiExample": "Beispiel"
 }

package/src/lib/translations/en.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "Code samples",
   "apiExampleRequest": "Example request",
   "apiExampleResponse": "{status} example",
-  "apiCredentials": "Authentication credentials, e.g."
+  "apiCredentials": "Authentication credentials, e.g.",
+  "apiPlayground": "Try it",
+  "apiServer": "Server",
+  "apiAuthorization": "Authorization",
+  "apiUsername": "Username",
+  "apiPassword": "Password",
+  "apiToken": "Token",
+  "apiApiKey": "API key",
+  "apiBody": "Body",
+  "apiSend": "Send request",
+  "apiSending": "Sending...",
+  "apiCancel": "Cancel",
+  "apiRequest": "Request",
+  "apiResponse": "Response",
+  "apiResponseHeaders": "Response headers",
+  "apiResponseBody": "Response body",
+  "apiNoResponse": "Send a request to see the response.",
+  "apiRequestFailed": "The request could not be sent. The API may block browser requests (CORS) or be unreachable; configure a playground proxy or run the cURL sample from a terminal.",
+  "apiRequestTimedOut": "The request timed out.",
+  "apiCookiesUnsupported": "Cookie parameters cannot be set from the browser and are not sent.",
+  "apiOptional": "optional",
+  "apiElapsed": "{ms} ms",
+  "apiCredentialsStored": "Credentials stay in this browser tab and are never sent anywhere except the API.",
+  "apiPayload": "Payload",
+  "apiSchemaProperties": "Properties",
+  "apiExample": "Example"
 }

package/src/lib/translations/es.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "Ejemplos de código",
   "apiExampleRequest": "Ejemplo de solicitud",
   "apiExampleResponse": "Ejemplo de {status}",
-  "apiCredentials": "Credenciales de autenticación, p. ej."
+  "apiCredentials": "Credenciales de autenticación, p. ej.",
+  "apiPlayground": "Probar",
+  "apiServer": "Servidor",
+  "apiAuthorization": "Autorización",
+  "apiUsername": "Usuario",
+  "apiPassword": "Contraseña",
+  "apiToken": "Token",
+  "apiApiKey": "Clave de API",
+  "apiBody": "Cuerpo",
+  "apiSend": "Enviar solicitud",
+  "apiSending": "Enviando...",
+  "apiCancel": "Cancelar",
+  "apiRequest": "Solicitud",
+  "apiResponse": "Respuesta",
+  "apiResponseHeaders": "Encabezados de respuesta",
+  "apiResponseBody": "Cuerpo de la respuesta",
+  "apiNoResponse": "Envía una solicitud para ver la respuesta.",
+  "apiRequestFailed": "No se pudo enviar la solicitud. Es posible que la API bloquee solicitudes del navegador (CORS) o no esté disponible; configura un proxy para el playground o ejecuta el ejemplo de cURL desde una terminal.",
+  "apiRequestTimedOut": "La solicitud excedió el tiempo de espera.",
+  "apiCookiesUnsupported": "Los parámetros de cookie no se pueden establecer desde el navegador y no se envían.",
+  "apiOptional": "opcional",
+  "apiElapsed": "{ms} ms",
+  "apiCredentialsStored": "Las credenciales permanecen en esta pestaña del navegador y solo se envían a la API.",
+  "apiPayload": "Carga útil",
+  "apiSchemaProperties": "Propiedades",
+  "apiExample": "Ejemplo"
 }

package/src/lib/translations/fr.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "Exemples de code",
   "apiExampleRequest": "Exemple de requête",
   "apiExampleResponse": "Exemple {status}",
-  "apiCredentials": "Identifiants d’authentification, par exemple"
+  "apiCredentials": "Identifiants d’authentification, par exemple",
+  "apiPlayground": "Essayer",
+  "apiServer": "Serveur",
+  "apiAuthorization": "Autorisation",
+  "apiUsername": "Nom d’utilisateur",
+  "apiPassword": "Mot de passe",
+  "apiToken": "Jeton",
+  "apiApiKey": "Clé API",
+  "apiBody": "Corps",
+  "apiSend": "Envoyer la requête",
+  "apiSending": "Envoi...",
+  "apiCancel": "Annuler",
+  "apiRequest": "Requête",
+  "apiResponse": "Réponse",
+  "apiResponseHeaders": "En-têtes de réponse",
+  "apiResponseBody": "Corps de la réponse",
+  "apiNoResponse": "Envoyez une requête pour voir la réponse.",
+  "apiRequestFailed": "La requête n’a pas pu être envoyée. L’API bloque peut-être les requêtes du navigateur (CORS) ou est injoignable ; configurez un proxy pour le playground ou exécutez l’exemple cURL depuis un terminal.",
+  "apiRequestTimedOut": "La requête a expiré.",
+  "apiCookiesUnsupported": "Les paramètres de cookie ne peuvent pas être définis depuis le navigateur et ne sont pas envoyés.",
+  "apiOptional": "facultatif",
+  "apiElapsed": "{ms} ms",
+  "apiCredentialsStored": "Les identifiants restent dans cet onglet du navigateur et ne sont envoyés qu’à l’API.",
+  "apiPayload": "Charge utile",
+  "apiSchemaProperties": "Propriétés",
+  "apiExample": "Exemple"
 }

package/src/lib/translations/ja.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "コードサンプル",
   "apiExampleRequest": "リクエスト例",
   "apiExampleResponse": "{status} の例",
-  "apiCredentials": "認証情報（例）："
+  "apiCredentials": "認証情報（例）：",
+  "apiPlayground": "試してみる",
+  "apiServer": "サーバー",
+  "apiAuthorization": "認証",
+  "apiUsername": "ユーザー名",
+  "apiPassword": "パスワード",
+  "apiToken": "トークン",
+  "apiApiKey": "APIキー",
+  "apiBody": "ボディ",
+  "apiSend": "リクエストを送信",
+  "apiSending": "送信中...",
+  "apiCancel": "キャンセル",
+  "apiRequest": "リクエスト",
+  "apiResponse": "レスポンス",
+  "apiResponseHeaders": "レスポンスヘッダー",
+  "apiResponseBody": "レスポンスボディ",
+  "apiNoResponse": "リクエストを送信するとレスポンスが表示されます。",
+  "apiRequestFailed": "リクエストを送信できませんでした。APIがブラウザーからのリクエストをブロックしている（CORS）か、到達できない可能性があります。プレイグラウンドのプロキシを設定するか、cURLのサンプルをターミナルで実行してください。",
+  "apiRequestTimedOut": "リクエストがタイムアウトしました。",
+  "apiCookiesUnsupported": "Cookieパラメーターはブラウザーから設定できないため送信されません。",
+  "apiOptional": "省略可",
+  "apiElapsed": "{ms} ms",
+  "apiCredentialsStored": "認証情報はこのブラウザータブ内に保持され、API以外には送信されません。",
+  "apiPayload": "ペイロード",
+  "apiSchemaProperties": "プロパティ",
+  "apiExample": "例"
 }

package/src/lib/translations/zh-Hans.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "代码示例",
   "apiExampleRequest": "请求示例",
   "apiExampleResponse": "{status} 示例",
-  "apiCredentials": "身份验证凭据，例如"
+  "apiCredentials": "身份验证凭据，例如",
+  "apiPlayground": "试一试",
+  "apiServer": "服务器",
+  "apiAuthorization": "授权",
+  "apiUsername": "用户名",
+  "apiPassword": "密码",
+  "apiToken": "令牌",
+  "apiApiKey": "API 密钥",
+  "apiBody": "请求体",
+  "apiSend": "发送请求",
+  "apiSending": "发送中...",
+  "apiCancel": "取消",
+  "apiRequest": "请求",
+  "apiResponse": "响应",
+  "apiResponseHeaders": "响应头",
+  "apiResponseBody": "响应体",
+  "apiNoResponse": "发送请求以查看响应。",
+  "apiRequestFailed": "无法发送请求。API 可能阻止了浏览器请求（CORS）或无法访问；请配置 playground 代理，或在终端中运行 cURL 示例。",
+  "apiRequestTimedOut": "请求超时。",
+  "apiCookiesUnsupported": "Cookie 参数无法在浏览器中设置，因此不会发送。",
+  "apiOptional": "可选",
+  "apiElapsed": "{ms} 毫秒",
+  "apiCredentialsStored": "凭据仅保留在此浏览器标签页中，只会发送给该 API。",
+  "apiPayload": "负载",
+  "apiSchemaProperties": "属性",
+  "apiExample": "示例"
 }

package/src/lib/translations/zh-Hant.json

@@ -70,5 +70,30 @@
   "apiCodeSamples": "程式碼範例",
   "apiExampleRequest": "請求範例",
   "apiExampleResponse": "{status} 範例",
-  "apiCredentials": "驗證憑證，例如"
+  "apiCredentials": "驗證憑證，例如",
+  "apiPlayground": "試一試",
+  "apiServer": "伺服器",
+  "apiAuthorization": "授權",
+  "apiUsername": "使用者名稱",
+  "apiPassword": "密碼",
+  "apiToken": "權杖",
+  "apiApiKey": "API 金鑰",
+  "apiBody": "請求主體",
+  "apiSend": "傳送請求",
+  "apiSending": "傳送中...",
+  "apiCancel": "取消",
+  "apiRequest": "請求",
+  "apiResponse": "回應",
+  "apiResponseHeaders": "回應標頭",
+  "apiResponseBody": "回應主體",
+  "apiNoResponse": "傳送請求以檢視回應。",
+  "apiRequestFailed": "無法傳送請求。API 可能封鎖了瀏覽器請求（CORS）或無法連線；請設定 playground 代理，或在終端機中執行 cURL 範例。",
+  "apiRequestTimedOut": "請求逾時。",
+  "apiCookiesUnsupported": "Cookie 參數無法在瀏覽器中設定，因此不會傳送。",
+  "apiOptional": "選填",
+  "apiElapsed": "{ms} 毫秒",
+  "apiCredentialsStored": "憑證僅保留在此瀏覽器分頁中，只會傳送給該 API。",
+  "apiPayload": "酬載",
+  "apiSchemaProperties": "屬性",
+  "apiExample": "範例"
 }