published or draft. Default: draft. See status docs.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `await strapi.documents('api::restaurant.restaurant').findOne({
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm'
+})`,
+ },
+ ]}
+ responses={[
+ {
+ status: 200,
+ statusText: 'OK',
+ body: JSON.stringify({
+ documentId: "a1b2c3d4e5f6g7h8i9j0klm",
+ name: "Biscotte Restaurant",
+ publishedAt: null,
+ locale: "en",
+ }, null, 2),
+ },
+ ]}
+/>
### `findFirst()`
-Find the first document matching the parameters.
-
Syntax: `findFirst(parameters: Params) => Document`
-#### Parameters
-
-| Parameter | Description | Default | Type |
-|-----------|-------------|---------|------|
-| [`locale`](/cms/api/document-service/locale#find-first) | Locale of the documents to find. | Default locale | String or `undefined` |
-| [`status`](/cms/api/document-service/status#find-first) | _If [Draft & Publish](/cms/features/draft-and-publish) is enabled for the content-type_:published or draft. Default: draft. See status docs.' },
+ { name: 'filters', type: 'Object', required: false, description: 'Filters to use. Default: null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Generic example',
+ code: `await strapi.documents('api::restaurant.restaurant').findFirst()`,
+ },
+ {
+ label: 'With filters',
+ code: `await strapi.documents('api::restaurant.restaurant').findFirst(
{
filters: {
name: {
@@ -207,238 +161,203 @@ await strapi.documents('api::restaurant.restaurant').findFirst(
}
}
}
-)
-```
-
-published or draft. Default: draft. See status docs.' },
+ { name: 'filters', type: 'Object', required: false, description: 'Filters to use. Default: null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ { name: 'pagination', type: 'Object', required: false, description: 'Paginate results.' },
+ { name: 'sort', type: 'Object', required: false, description: 'Sort results.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Generic example',
+ code: `await strapi.documents('api::restaurant.restaurant').findMany()`,
+ },
+ {
+ label: 'With filters',
+ code: `await strapi.documents('api::restaurant.restaurant').findMany(
{
- filters: {
+ filters: {
name: {
$startsWith: 'Pizzeria'
}
}
}
-)
-```
+)`,
+ },
+ ]}
+ responses={[
+ {
+ status: 200,
+ statusText: 'Generic',
+ body: JSON.stringify([
+ {
+ documentId: "a1b2c3d4e5f6g7h8i9j0klm",
+ name: "Biscotte Restaurant",
+ publishedAt: null,
+ locale: "en",
+ },
+ {
+ documentId: "j9k8l7m6n5o4p3q2r1s0tuv",
+ name: "Pizzeria Arrivederci",
+ publishedAt: null,
+ locale: "en",
+ },
+ ], null, 2),
+ },
+ {
+ status: 200,
+ statusText: 'With filters',
+ body: JSON.stringify([
+ {
+ documentId: "j9k8l7m6n5o4p3q2r1s0tuv",
+ name: "Pizzeria Arrivederci",
+ locale: "en",
+ publishedAt: null,
+ },
+ ], null, 2),
+ },
+ ]}
+>
-published to automatically publish the draft version of a document while creating it. See status docs.' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `await strapi.documents('api::restaurant.restaurant').create({
data: {
name: 'Restaurant B'
}
-})
-```
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'status', type: "'published'", required: false, description: 'If Draft & Publish is enabled: can be set to published to automatically publish the draft version of a document while updating it. See status docs.' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `await strapi.documents('api::restaurant.restaurant').update({
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ data: { name: "New restaurant name" }
+})`,
+ },
+ ]}
+ responses={[
+ {
+ status: 200,
+ statusText: 'OK',
+ body: JSON.stringify({
+ documentId: "a1b2c3d4e5f6g7h8i9j0klm",
+ name: "New restaurant name",
+ locale: "en",
+ publishedAt: null,
+ }, null, 2),
+ },
+ ]}
+>
:::tip
Published versions are read-only, so you can not technically update the published version of a document.
@@ -452,137 +371,74 @@ To update a document and publish the new version right away, you can:
It's not recommended to update repeatable components with the Document Service API (see the related [breaking change entry](/cms/migration/v4-to-v5/breaking-changes/do-not-update-repeatable-components-with-document-service-api.md) for more details).
:::
-#### Example
-
-If no `locale` parameter is passed, `update()` updates the document for the default locale:
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
{
- "documentId": "a1b2c3d4e5f6g7h8i9j0klm",
- "name": "Biscotte Restaurant",
- "publishedAt": "2024-03-14T18:30:48.870Z",
- "locale": "en"
- // …
- }
- ]
-}
-```
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `await strapi.documents('api::restaurant.restaurant').deleteMany({
filters: {
city: {
name: {
@@ -590,210 +446,193 @@ await strapi.documents('api::restaurant.restaurant').deleteMany({
}
}
}
-})
-```
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `await strapi.documents('api::restaurant.restaurant').publish({
documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
-});
-```
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
{
- documentId: "lviw819d5htwvga8s3kovdij",
- name: "Biscotte Restaurant",
- publishedAt: null,
- locale: "en"
- // …
- }
- ]
-}
-```
-
-null.' },
+ { name: 'fields', type: 'Object', required: false, description: 'Select fields to return. Defaults to all fields (except those not populated by default).' },
+ { name: 'populate', type: 'Object', required: false, description: 'Populate results with additional fields. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Request',
+ code: `strapi.documents('api::restaurant.restaurant').discardDraft({
documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
-});
-```
-
-published to count only published documents, draft to count draft documents (returns all documents). Default: draft. See status docs.' },
+ { name: 'filters', type: 'Object', required: false, description: 'Filters to use. Default: null.' },
+ ]}
+ codeTabs={[
+ {
+ label: 'Generic example',
+ code: `await strapi.documents('api::restaurant.restaurant').count()`,
+ },
+ {
+ label: 'Count published',
+ code: `strapi.documents('api::restaurant.restaurant').count({ status: 'published' })`,
+ },
+ {
+ label: 'With filters',
+ code: `/**
+ * Count number of draft documents (default if status is omitted)
+ * in English (default locale)
+ * whose name starts with 'Pizzeria'
+ */
+strapi.documents('api::restaurant.restaurant').count({ filters: { name: { $startsWith: "Pizzeria" }}})`,
+ },
+ ]}
+ isLast={true}
+>
:::note
Since published documents necessarily also have a draft counterpart, a published document is still counted as having a draft version.
@@ -801,50 +640,4 @@ Since published documents necessarily also have a draft counterpart, a published
This means that counting with the `status: 'draft'` parameter still returns the total number of documents matching other parameters, even if some documents have already been published and are not displayed as "draft" or "modified" in the Content Manager anymore. There currently is no way to prevent already published documents from being counted.
:::
-#### Examples
-
-$between[1, 3] will also return 1 and 3).}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
rating: {
$between: [1, 20],
},
},
-});
-```
-
-### `$contains`
-
-Attribute contains the input value (case-sensitive).
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+$containsi is not case-sensitive, while $contains is.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
title: {
$containsi: 'hello',
},
},
-});
-```
-
-### `$notContainsi`
-
-Attribute does not contain the input value. `$notContainsi` is not case-sensitive, while [$notContains](#notcontains) is.
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+$notContainsi is not case-sensitive, while $notContains is.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
title: {
$notContainsi: 'hello',
},
},
-});
-```
-
-### `$startsWith`
-
-Attribute starts with input value (case-sensitive).
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+null.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
title: {
$null: true,
},
},
-});
-```
-
-### `$notNull`
-
-Attribute is not `null`.
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+null.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
title: {
$notNull: true,
},
},
-});
-```
+});`
+ }
+ ]}
+/>
## Logical operators
-### `$and`
-
-All nested conditions must be `true`.
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+true.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
$and: [
{
@@ -447,28 +535,31 @@ const entries = await strapi.documents('api::article.article').findMany({
},
],
},
-});
-```
-
-`$and` will be used implicitly when passing an object with nested conditions:
-
-```js
+});`
+ },
+ {
+ label: 'Implicit $and',
+ code: `// $and will be used implicitly when passing an object with nested conditions:
const entries = await strapi.documents('api::article.article').findMany({
filters: {
title: 'Hello World',
createdAt: { $gt: '2021-11-17T14:28:25.843Z' },
},
-});
-```
-
-### `$or`
-
-One or many nested conditions must be `true`.
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+true.}
+ codeTabs={[
+ {
+ label: 'JavaScript',
+ code: `const entries = await strapi.documents('api::article.article').findMany({
filters: {
$or: [
{
@@ -479,30 +570,36 @@ const entries = await strapi.documents('api::article.article').findMany({
},
],
},
-});
-```
-
-### `$not`
-
-Negates the nested conditions.
-
-**Example**
-
-```js
-const entries = await strapi.documents('api::article.article').findMany({
+});`
+ }
+ ]}
+/>
+
+, etc. by finding the matching quote
+ * through bracket counting instead of simple regex.
+ */
+ extractHtmlDescription(objString, fieldName) {
+ const patterns = [
+ `${fieldName}: '`,
+ `${fieldName}: "`,
+ `${fieldName}:'`,
+ `${fieldName}:"`,
+ ];
+
+ let startIdx = -1;
+ let quote = "'";
+
+ for (const pat of patterns) {
+ const idx = objString.indexOf(pat);
+ if (idx !== -1) {
+ startIdx = idx + pat.length;
+ quote = pat[pat.length - 1];
+ break;
+ }
+ }
+
+ if (startIdx === -1) return '';
+
+ // Find the matching closing quote, accounting for escaped quotes
+ let i = startIdx;
+ const len = objString.length;
+ while (i < len) {
+ if (objString[i] === quote && objString[i - 1] !== '\\') {
+ break;
+ }
+ i++;
+ }
+
+ const raw = objString.substring(startIdx, i);
+
+ // Convert HTML to readable text
+ return raw
+ .replace(/]*>([^<]*)<\/a>/g, '$2 ($1)')
+ .replace(/([^<]*)<\/code>/g, '`$1`')
+ .replace(/<[^>]+>/g, '')
+ .replace(/\s+/g, ' ')
.trim();
}
+ /** Extract a template literal field: field: `value` */
+ extractTemplateLiteral(objString, fieldName) {
+ const marker = `${fieldName}: \``;
+ let idx = objString.indexOf(marker);
+ if (idx === -1) {
+ // Try without space
+ const marker2 = `${fieldName}:\``;
+ idx = objString.indexOf(marker2);
+ if (idx === -1) return null;
+ idx += marker2.length;
+ } else {
+ idx += marker.length;
+ }
+
+ let i = idx;
+ let depth = 0;
+ const len = objString.length;
+
+ while (i < len) {
+ const ch = objString[i];
+ if (ch === '$' && i + 1 < len && objString[i + 1] === '{') {
+ depth++;
+ i += 2;
+ continue;
+ }
+ if (ch === '}' && depth > 0) {
+ depth--;
+ i++;
+ continue;
+ }
+ if (ch === '`' && depth === 0) {
+ return objString.substring(idx, i);
+ }
+ i++;
+ }
+
+ return objString.substring(idx);
+ }
+
+ /** Extract response body — handles JSON.stringify(...) calls and template literals */
+ extractResponseBody(respString) {
+ // Check for JSON.stringify call
+ const stringifyIdx = respString.indexOf('JSON.stringify(');
+ if (stringifyIdx !== -1) {
+ // Extract the first argument to JSON.stringify
+ let i = stringifyIdx + 'JSON.stringify('.length;
+ let depth = 1;
+ let inString = null;
+ const len = respString.length;
+ const start = i;
+
+ while (i < len && depth > 0) {
+ const ch = respString[i];
+ const prev = i > 0 ? respString[i - 1] : '';
+
+ if (inString) {
+ if (ch === inString && prev !== '\\') inString = null;
+ i++; continue;
+ }
+ if (ch === '"' || ch === "'") { inString = ch; i++; continue; }
+ if (ch === '(' || ch === '{' || ch === '[') { depth++; i++; continue; }
+ if (ch === ')' || ch === '}' || ch === ']') {
+ depth--;
+ if (depth === 0) break;
+ i++;
+ continue;
+ }
+ i++;
+ }
+
+ // Get the object literal, try to format it as JSON
+ const objLiteral = respString.substring(start, i).trim();
+ // Remove trailing ", null, 2" args if the closing paren was for stringify
+ const firstArgEnd = this.findFirstArgEnd(objLiteral);
+ const firstArg = firstArgEnd !== -1 ? objLiteral.substring(0, firstArgEnd) : objLiteral;
+
+ // Convert JS object literal to approximate JSON
+ return this.jsObjectToReadableJson(firstArg);
+ }
+
+ // Check for template literal body
+ const body = this.extractTemplateLiteral(respString, 'body');
+ if (body) return body;
+
+ // Check for string body
+ const strBody = this.getObjectField(respString, 'body');
+ if (strBody) return strBody;
+
+ return '(response body)';
+ }
+
+ /** Find end of first argument in a potentially multi-arg string like "obj, null, 2" */
+ findFirstArgEnd(str) {
+ let depth = 0;
+ let inString = null;
+
+ for (let i = 0; i < str.length; i++) {
+ const ch = str[i];
+ const prev = i > 0 ? str[i - 1] : '';
+
+ if (inString) {
+ if (ch === inString && prev !== '\\') inString = null;
+ continue;
+ }
+ if (ch === '"' || ch === "'") { inString = ch; continue; }
+ if (ch === '{' || ch === '[' || ch === '(') { depth++; continue; }
+ if (ch === '}' || ch === ']' || ch === ')') { depth--; continue; }
+ if (ch === ',' && depth === 0) return i;
+ }
+
+ return -1;
+ }
+
+ /** Convert a JS object literal to readable JSON-like text */
+ jsObjectToReadableJson(jsObj) {
+ try {
+ // Simple transforms: unquoted keys -> quoted, single quotes -> double quotes
+ let json = jsObj
+ // Add quotes around unquoted keys
+ .replace(/(\s)(\w+)\s*:/g, '$1"$2":')
+ // Handle keys at start of line
+ .replace(/^(\s*)(\w+)\s*:/gm, '$1"$2":')
+ // Single quotes to double quotes (simple cases)
+ .replace(/:\s*'([^']*)'/g, ': "$1"')
+ // Remove trailing commas
+ .replace(/,(\s*[}\]])/g, '$1');
+
+ // Try to parse and re-format
+ const parsed = JSON.parse(json);
+ return JSON.stringify(parsed, null, 2);
+ } catch {
+ // If parsing fails, return the raw object literal cleaned up
+ return jsObj.trim();
+ }
+ }
+
generateLlmsTxt(pages) {
const lines = [`# ${this.siteName}`, ''];
diff --git a/docusaurus/src/components/ApiDocLayout/ApiDocLayout.jsx b/docusaurus/src/components/ApiDocLayout/ApiDocLayout.jsx
new file mode 100644
index 0000000000..33145bc25d
--- /dev/null
+++ b/docusaurus/src/components/ApiDocLayout/ApiDocLayout.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './ApiDocLayout.module.scss';
+
+function Description({ children }) {
+ return {children};
+}
+
+function Code({ children }) {
+ return {children};
+}
+
+function ApiDocLayout({ children }) {
+ return {children};
+}
+
+ApiDocLayout.Description = Description;
+ApiDocLayout.Code = Code;
+
+export default ApiDocLayout;
diff --git a/docusaurus/src/components/ApiDocLayout/ApiDocLayout.module.scss b/docusaurus/src/components/ApiDocLayout/ApiDocLayout.module.scss
new file mode 100644
index 0000000000..7334ed7367
--- /dev/null
+++ b/docusaurus/src/components/ApiDocLayout/ApiDocLayout.module.scss
@@ -0,0 +1,84 @@
+/** Component: API 2-Column Layout — V3 Redesign */
+@use '../../scss/_mixins.scss' as *;
+
+.layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--strapi-spacing-7);
+ margin: var(--strapi-spacing-7) 0;
+
+ /** Break out of article max-width constraint */
+ width: calc(100% + 200px);
+ margin-left: -100px;
+ max-width: none;
+}
+
+.description {
+ min-width: 0;
+
+ h2, h3, h4 {
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.code {
+ min-width: 0;
+ background: var(--strapi-surface-1);
+ border: 1px solid var(--strapi-border);
+ border-radius: var(--strapi-radius-lg);
+ padding: var(--strapi-spacing-6);
+ position: relative;
+
+ /** Override nested code block styles */
+ .theme-code-block {
+ border: none;
+ margin: 0;
+
+ &[class*="codeBlockContainer"],
+ [class*="codeBlockContainer"] {
+ padding: 0 !important;
+ }
+ }
+
+ pre {
+ margin: 0;
+ border: none;
+ }
+}
+
+/** Responsive: 2-column on desktop */
+@include medium-up {
+ .layout {
+ grid-template-columns: 1fr 1fr;
+ gap: var(--strapi-spacing-9);
+ align-items: start;
+ }
+
+ .code {
+ position: sticky;
+ top: calc(var(--ifm-navbar-height) + 24px);
+ max-height: calc(100vh - var(--ifm-navbar-height) - 48px);
+ overflow-y: auto;
+ }
+}
+
+/** Responsive: reset breakout on small screens */
+@include medium-down {
+ .layout {
+ width: 100%;
+ margin-left: 0;
+ }
+}
+
+/** Dark mode */
+@include dark {
+ .code {
+ background: var(--strapi-surface-2);
+ border-color: var(--strapi-border);
+ }
+}
diff --git a/docusaurus/src/components/ApiExplorer/ApiExplorer.jsx b/docusaurus/src/components/ApiExplorer/ApiExplorer.jsx
new file mode 100644
index 0000000000..4b693ff3ce
--- /dev/null
+++ b/docusaurus/src/components/ApiExplorer/ApiExplorer.jsx
@@ -0,0 +1,511 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import styles from './ApiExplorer.module.scss';
+
+/**
+ * Simulated API data — all responses match actual Strapi v5 behavior.
+ * Status codes, response shapes, and field names are verified against docs.
+ */
+const API_DATA = {
+ rest: {
+ label: 'REST API',
+ docBase: '/cms/api/rest',
+ endpoints: [
+ {
+ method: 'GET',
+ name: 'List entries',
+ path: '/api/restaurants?populate=*',
+ docHash: '#get-all',
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 23,
+ body: {
+ data: [
+ {
+ id: 1,
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'Biscotte Restaurant',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A cozy place for brunch lovers.' }],
+ },
+ ],
+ createdAt: '2026-01-15T09:00:00.000Z',
+ updatedAt: '2026-03-20T14:22:00.000Z',
+ publishedAt: '2026-01-15T09:05:00.000Z',
+ locale: 'en',
+ },
+ ],
+ meta: {
+ pagination: { page: 1, pageSize: 25, pageCount: 1, total: 1 },
+ },
+ },
+ },
+ },
+ {
+ method: 'GET',
+ name: 'Get entry',
+ path: '/api/restaurants/a1b2c3d4e5f6g7h8i9j0klm',
+ docHash: '#get',
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 12,
+ body: {
+ data: {
+ id: 1,
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'Biscotte Restaurant',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A cozy place for brunch lovers.' }],
+ },
+ ],
+ createdAt: '2026-01-15T09:00:00.000Z',
+ updatedAt: '2026-03-20T14:22:00.000Z',
+ publishedAt: '2026-01-15T09:05:00.000Z',
+ locale: 'en',
+ },
+ meta: {},
+ },
+ },
+ },
+ {
+ method: 'POST',
+ name: 'Create entry',
+ path: '/api/restaurants',
+ docHash: '#create',
+ requestBody: {
+ data: {
+ name: 'Restaurant D',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A very short description goes here.' }],
+ },
+ ],
+ },
+ },
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 45,
+ body: {
+ data: {
+ id: 2,
+ documentId: 'f6g7h8i9j0k1l2m3n4o5pqr',
+ name: 'Restaurant D',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A very short description goes here.' }],
+ },
+ ],
+ createdAt: '2026-04-05T14:30:00.000Z',
+ updatedAt: '2026-04-05T14:30:00.000Z',
+ publishedAt: null,
+ locale: 'en',
+ },
+ meta: {},
+ },
+ },
+ },
+ {
+ method: 'PUT',
+ name: 'Update entry',
+ path: '/api/restaurants/a1b2c3d4e5f6g7h8i9j0klm',
+ docHash: '#update',
+ requestBody: {
+ data: {
+ name: 'BMK Paris Bamako',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A very short description goes here.' }],
+ },
+ ],
+ },
+ },
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 31,
+ body: {
+ data: {
+ id: 1,
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'BMK Paris Bamako',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A very short description goes here.' }],
+ },
+ ],
+ createdAt: '2026-01-15T09:00:00.000Z',
+ updatedAt: '2026-04-05T15:00:00.000Z',
+ publishedAt: '2026-01-15T09:05:00.000Z',
+ locale: 'en',
+ },
+ meta: {},
+ },
+ },
+ },
+ {
+ method: 'DELETE',
+ name: 'Delete entry',
+ path: '/api/restaurants/a1b2c3d4e5f6g7h8i9j0klm',
+ docHash: '#delete',
+ response: {
+ status: 204,
+ statusText: 'No Content',
+ time: 18,
+ body: null,
+ },
+ },
+ ],
+ },
+ graphql: {
+ label: 'GraphQL',
+ docBase: '/cms/api/graphql',
+ endpoints: [
+ {
+ method: 'POST',
+ name: 'Query collection',
+ path: '/graphql',
+ docHash: '#queries',
+ requestBody: `{
+ restaurants_connection {
+ nodes {
+ documentId
+ name
+ }
+ pageInfo {
+ page
+ pageSize
+ total
+ }
+ }
+}`,
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 35,
+ body: {
+ data: {
+ restaurants_connection: {
+ nodes: [
+ {
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'Biscotte Restaurant',
+ },
+ ],
+ pageInfo: { page: 1, pageSize: 10, total: 1 },
+ },
+ },
+ },
+ },
+ },
+ {
+ method: 'POST',
+ name: 'Query single',
+ path: '/graphql',
+ docHash: '#queries',
+ requestBody: `{
+ restaurant(documentId: "a1b2c3d4e5f6g7h8i9j0klm") {
+ name
+ description
+ }
+}`,
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 18,
+ body: {
+ data: {
+ restaurant: {
+ name: 'Biscotte Restaurant',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A cozy place for brunch lovers.' }],
+ },
+ ],
+ },
+ },
+ },
+ },
+ },
+ {
+ method: 'POST',
+ name: 'Mutation create',
+ path: '/graphql',
+ docHash: '#mutations',
+ requestBody: `mutation {
+ createRestaurant(data: {
+ name: "Pizzeria Arrivederci"
+ }) {
+ documentId
+ name
+ }
+}`,
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 42,
+ body: {
+ data: {
+ createRestaurant: {
+ documentId: 'f6g7h8i9j0k1l2m3n4o5pqr',
+ name: 'Pizzeria Arrivederci',
+ },
+ },
+ },
+ },
+ },
+ ],
+ },
+ document: {
+ label: 'Document Service',
+ docBase: '/cms/api/document-service',
+ endpoints: [
+ {
+ method: 'GET',
+ name: 'findMany()',
+ path: "await strapi.documents('api::restaurant.restaurant').findMany()",
+ docHash: '#findmany',
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 8,
+ body: [
+ {
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'Biscotte Restaurant',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A cozy place for brunch lovers.' }],
+ },
+ ],
+ locale: 'en',
+ },
+ ],
+ },
+ },
+ {
+ method: 'GET',
+ name: 'findOne()',
+ path: "await strapi.documents('api::restaurant.restaurant').findOne({ documentId: 'a1b2c3d4e5f6g7h8i9j0klm' })",
+ docHash: '#findone',
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 5,
+ body: {
+ documentId: 'a1b2c3d4e5f6g7h8i9j0klm',
+ name: 'Biscotte Restaurant',
+ description: [
+ {
+ type: 'paragraph',
+ children: [{ type: 'text', text: 'A cozy place for brunch lovers.' }],
+ },
+ ],
+ locale: 'en',
+ },
+ },
+ },
+ {
+ method: 'POST',
+ name: 'create()',
+ path: "await strapi.documents('api::restaurant.restaurant').create({ data: { name: 'Restaurant B' } })",
+ docHash: '#create',
+ response: {
+ status: 200,
+ statusText: 'OK',
+ time: 15,
+ body: {
+ documentId: 'f6g7h8i9j0k1l2m3n4o5pqr',
+ name: 'Restaurant B',
+ createdAt: '2026-04-05T14:30:00.000Z',
+ locale: 'en',
+ },
+ },
+ },
+ ],
+ },
+};
+
+const METHOD_COLORS = {
+ GET: 'get',
+ POST: 'post',
+ PUT: 'put',
+ DELETE: 'delete',
+};
+
+/**
+ * Syntax-highlighted JSON renderer
+ */
+function JsonView({ data }) {
+ const json = JSON.stringify(data, null, 2);
+ const highlighted = json
+ .replace(/&/g, '&')
+ .replace(/"$1"')
+ .replace(/:\s*"([^"]*)"/g, ': "$1"')
+ .replace(/:\s*(\d+\.?\d*)/g, ': $1')
+ .replace(/:\s*(true|false|null)/g, ': $1');
+
+ return (
+
+ );
+}
+
+export default function ApiExplorer() {
+ const [activeTab, setActiveTab] = useState('rest');
+ const [activeEndpoint, setActiveEndpoint] = useState(0);
+ const [isLoading, setIsLoading] = useState(false);
+ const [showResponse, setShowResponse] = useState(true);
+ const [showRequest, setShowRequest] = useState(false);
+ const responseRef = useRef(null);
+
+ const apiGroup = API_DATA[activeTab];
+ const endpoint = apiGroup.endpoints[activeEndpoint];
+
+ const handleTabChange = useCallback((tab) => {
+ setActiveTab(tab);
+ setActiveEndpoint(0);
+ setShowResponse(true);
+ setShowRequest(false);
+ }, []);
+
+ const handleEndpointChange = useCallback((index) => {
+ setActiveEndpoint(index);
+ setShowResponse(false);
+ setShowRequest(false);
+ }, []);
+
+ const handleSend = useCallback(() => {
+ setIsLoading(true);
+ setShowResponse(false);
+ setShowRequest(false);
+ setTimeout(() => {
+ setIsLoading(false);
+ setShowResponse(true);
+ }, 300 + Math.random() * 400);
+ }, []);
+
+ useEffect(() => {
+ setShowResponse(true);
+ }, []);
+
+ const docLink = endpoint.docHash
+ ? `${apiGroup.docBase}${endpoint.docHash}`
+ : apiGroup.docBase;
+
+ return (
+
+ API Explorer
+
+ {/* Tabs */}
+
+ {Object.entries(API_DATA).map(([key, group]) => (
+
+ ))}
+
+
+
+ {/* Endpoint sidebar */}
+
+ {apiGroup.endpoints.map((ep, i) => (
+
+ ))}
+
+
+ {/* Request + Response */}
+
+ {/* URL bar */}
+
+
+ {endpoint.method}
+
+ {endpoint.path}
+
+
+
+ {/* Request body (for POST/PUT) */}
+ {endpoint.requestBody && !showResponse && !isLoading && (
+
+ Request Body
+
+ {typeof endpoint.requestBody === 'string'
+ ? {endpoint.requestBody}
+ : No response body
+ }
+
+
+ )}
+
+ {isLoading && (
+
+
+
+
+
+ )}
+
+
+
+
+ {/* Per-endpoint doc link */}
+
+ Read the {apiGroup.label} docs →
+
+
+ );
+}
diff --git a/docusaurus/src/components/ApiExplorer/ApiExplorer.module.scss b/docusaurus/src/components/ApiExplorer/ApiExplorer.module.scss
new file mode 100644
index 0000000000..36f85c1984
--- /dev/null
+++ b/docusaurus/src/components/ApiExplorer/ApiExplorer.module.scss
@@ -0,0 +1,374 @@
+@use '../../scss/mixins' as *;
+
+/* ─── Explorer wrapper ─── */
+.explorer {
+ width: 100%;
+ max-width: 960px;
+ margin: 0 auto;
+}
+
+.explorerLabel {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--strapi-neutral-400);
+ margin-bottom: 16px;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ &::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: var(--strapi-neutral-200);
+ }
+}
+
+/* ─── Dark card container ─── */
+.explorerCard {
+ background: #1a1a2e;
+ border-radius: 16px;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* ─── API Tabs ─── */
+.tabs {
+ display: flex;
+ gap: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ padding: 0 20px;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 14px 20px;
+ border: none;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.4);
+ font-family: var(--strapi-font-family-technical);
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ position: relative;
+ transition: color 0.15s ease;
+ white-space: nowrap;
+
+ &:hover {
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: transparent;
+ transition: background 0.2s ease;
+ }
+}
+
+.tabActive {
+ color: #fff;
+
+ &::after {
+ background: var(--strapi-primary-500);
+ }
+
+ .tabDot {
+ background: #4ade80;
+ }
+}
+
+.tabDot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: transparent;
+ transition: background 0.2s ease;
+}
+
+/* ─── Body: sidebar + request pane ─── */
+.explorerBody {
+ display: flex;
+ min-height: 520px;
+}
+
+/* ─── Endpoint sidebar ─── */
+.endpointList {
+ width: 200px;
+ flex-shrink: 0;
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
+ padding: 12px 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.endpointItem {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ border: none;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.6);
+ font-family: var(--strapi-font-family-body);
+ font-size: 13px;
+ cursor: pointer;
+ border-radius: 8px;
+ transition: background 0.12s ease, color 0.12s ease;
+ text-align: left;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.85);
+ }
+}
+
+.endpointItemActive {
+ background: rgba(255, 255, 255, 0.08);
+ color: #fff;
+}
+
+.endpointName {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* ─── Method badges ─── */
+.methodBadge {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 10px;
+ font-weight: 700;
+ padding: 2px 6px;
+ border-radius: 4px;
+ text-transform: uppercase;
+ flex-shrink: 0;
+ letter-spacing: 0.02em;
+}
+
+.methodget { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
+.methodpost { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
+.methodput { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
+.methoddelete { background: rgba(248, 113, 113, 0.15); color: #f87171; }
+
+/* ─── Request pane ─── */
+.requestPane {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+/* ─── URL bar ─── */
+.urlBar {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ background: rgba(255, 255, 255, 0.02);
+}
+
+.urlMethod {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 12px;
+ font-weight: 700;
+ padding: 4px 10px;
+ border-radius: 6px;
+ flex-shrink: 0;
+}
+
+.urlPath {
+ flex: 1;
+ font-family: var(--strapi-font-family-mono);
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.7);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.sendBtn {
+ flex-shrink: 0;
+ padding: 6px 16px;
+ border: none;
+ border-radius: 8px;
+ background: var(--strapi-primary-600);
+ color: #fff;
+ font-family: var(--strapi-font-family-technical);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.15s ease, transform 0.1s ease;
+ white-space: nowrap;
+
+ &:hover {
+ background: var(--strapi-primary-500);
+ }
+
+ &:active {
+ transform: scale(0.97);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+}
+
+/* ─── Request body ─── */
+.requestBodySection {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.requestBodyHeader {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: rgba(255, 255, 255, 0.35);
+ padding: 8px 16px 0;
+}
+
+/* ─── Response area ─── */
+.response {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.responseHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 16px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.statusDot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+
+.statusOk { background: #4ade80; }
+.statusErr { background: #f87171; }
+
+.statusCode {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 13px;
+ font-weight: 600;
+ color: #4ade80;
+}
+
+.responseTime {
+ margin-left: auto;
+ font-family: var(--strapi-font-family-technical);
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.35);
+}
+
+.responseBody {
+ flex: 1;
+ overflow: auto;
+ padding: 16px;
+ max-height: 480px;
+
+ /* Thin scrollbar */
+ scrollbar-width: thin;
+ scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+ &::-webkit-scrollbar { width: 4px; }
+ &::-webkit-scrollbar-track { background: transparent; }
+ &::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
+}
+
+/* ─── JSON syntax highlighting ─── */
+.jsonPre {
+ margin: 0;
+ font-family: var(--strapi-font-family-mono);
+ font-size: 13px;
+ line-height: 1.6;
+ color: rgba(255, 255, 255, 0.7);
+ background: transparent !important;
+ white-space: pre;
+ tab-size: 2;
+
+ :global(.json-key) { color: #c4b5fd; }
+ :global(.json-string) { color: #fbbf24; }
+ :global(.json-number) { color: #4ade80; }
+ :global(.json-bool) { color: #60a5fa; }
+}
+
+/* ─── Loading animation ─── */
+.loadingBar {
+ height: 2px;
+ background: rgba(255, 255, 255, 0.05);
+ overflow: hidden;
+}
+
+.loadingBarInner {
+ height: 100%;
+ width: 40%;
+ background: var(--strapi-primary-500);
+ border-radius: 2px;
+ animation: loadSlide 0.8s ease-in-out infinite;
+}
+
+@keyframes loadSlide {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(350%); }
+}
+
+/* ─── Doc link ─── */
+.explorerDocLink {
+ display: inline-flex;
+ align-items: center;
+ margin-top: 12px;
+ font-family: var(--strapi-font-family-technical);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--strapi-neutral-400);
+ text-decoration: none;
+ transition: color 0.15s ease;
+
+ &:hover {
+ color: var(--strapi-primary-500);
+ text-decoration: none;
+ }
+}
+
+/* ─── Responsive ─── */
+@media (max-width: 768px) {
+ .explorerBody {
+ flex-direction: column;
+ }
+
+ .endpointList {
+ width: 100%;
+ border-right: none;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ flex-direction: row;
+ overflow-x: auto;
+ padding: 8px;
+ gap: 4px;
+ }
+
+ .endpointItem {
+ white-space: nowrap;
+ }
+}
diff --git a/docusaurus/src/components/ApiReference/ApiHeader.jsx b/docusaurus/src/components/ApiReference/ApiHeader.jsx
new file mode 100644
index 0000000000..8cb3f73fd4
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/ApiHeader.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './api-reference.module.scss';
+
+/**
+ * API page header with gradient accent bar.
+ *
+ * {title}
+ {description && {description}
}
+
+ Base
+ {baseUrl}
+
+
+ );
+}
diff --git a/docusaurus/src/components/ApiReference/ApiReferencePage.jsx b/docusaurus/src/components/ApiReference/ApiReferencePage.jsx
new file mode 100644
index 0000000000..c378e2cbbe
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/ApiReferencePage.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './api-reference.module.scss';
+import ApiSidebar from './ApiSidebar';
+import ApiHeader from './ApiHeader';
+
+/**
+ * Full API reference page layout.
+ * Replaces the standard Docusaurus doc page layout for API reference.
+ *
+ *
+ *
+ */
+export default function ApiReferencePage({
+ title,
+ description,
+ baseUrl = 'http://localhost:1337',
+ sidebarSections = [],
+ children,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/docusaurus/src/components/ApiReference/ApiSidebar.jsx b/docusaurus/src/components/ApiReference/ApiSidebar.jsx
new file mode 100644
index 0000000000..b9fdc42946
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/ApiSidebar.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import styles from './api-reference.module.scss';
+import clsx from 'clsx';
+import { useLocation, useHistory } from '@docusaurus/router';
+
+const METHOD_KEY = {
+ GET: 'get', POST: 'post', PUT: 'put', DELETE: 'del', DEL: 'del', PATCH: 'patch',
+};
+
+/**
+ * Custom API sidebar with method badges.
+ *
+ *
+ {tabs[activeTab]?.code || ''}
+
+
+
+ );
+}
diff --git a/docusaurus/src/components/ApiReference/CopyCodeButton.jsx b/docusaurus/src/components/ApiReference/CopyCodeButton.jsx
new file mode 100644
index 0000000000..50571bdaf8
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/CopyCodeButton.jsx
@@ -0,0 +1,44 @@
+import React, { useState, useCallback } from 'react';
+import styles from './api-reference.module.scss';
+import clsx from 'clsx';
+
+/**
+ * Self-contained copy button for the API reference code/response panels.
+ *
+ * The Docusaurus @theme/CodeBlock/CopyButton only renders correctly inside a
+ * real (it depends on that component's CSS modules for sizing and
+ * icons). Used standalone it collapses to a 0x0 element. This button owns its
+ * own markup and styles, so it works anywhere.
+ */
+export default function CopyCodeButton({ code = '' }) {
+ const [copied, setCopied] = useState(false);
+
+ const onCopy = useCallback(() => {
+ if (!code) return;
+ navigator.clipboard.writeText(code).then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ });
+ }, [code]);
+
+ return (
+
+ );
+}
diff --git a/docusaurus/src/components/ApiReference/Endpoint.jsx b/docusaurus/src/components/ApiReference/Endpoint.jsx
new file mode 100644
index 0000000000..e4dcadf697
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/Endpoint.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import styles from './api-reference.module.scss';
+import MethodPill from './MethodPill';
+import ParamTable from './ParamTable';
+import CodePanel from './CodePanel';
+import ResponsePanel from './ResponsePanel';
+
+/**
+ * Full 2-column endpoint block matching the V3 mockup.
+ *
+ * Usage (HTTP / REST):
+ * {path}
+ ) : (
+ <>
+ {description}
}
+
+
+ {/* 2-column grid: params left, code right */}
+ {hasColumns ? (
+
+
+ {params.length > 0 &&
+ {active.body}
+
+
+
+
+ );
+}
diff --git a/docusaurus/src/components/ApiReference/api-reference.module.scss b/docusaurus/src/components/ApiReference/api-reference.module.scss
new file mode 100644
index 0000000000..7dbc23ced2
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/api-reference.module.scss
@@ -0,0 +1,767 @@
+/** Component: V3 API Reference — Stripe-style 2-column layout */
+@use '../../scss/_mixins.scss' as *;
+
+/* ═══ LAYOUT ═══ */
+.apiLayout {
+ display: flex;
+ min-height: calc(100vh - var(--ifm-navbar-height));
+ margin-top: 0;
+}
+
+.apiMain {
+ flex: 1;
+ min-width: 0;
+}
+
+/* ═══ API SIDEBAR ═══ */
+.apiSidebar {
+ width: 240px;
+ min-width: 240px;
+ border-right: 1px solid var(--strapi-border);
+ height: calc(100vh - var(--ifm-navbar-height));
+ position: sticky;
+ top: var(--ifm-navbar-height);
+ overflow-y: auto;
+ background: var(--strapi-surface-0);
+ padding: 8px 0;
+ scrollbar-width: thin;
+ scrollbar-color: var(--strapi-surface-3) transparent;
+
+ &__section {
+ padding: 0 8px;
+ margin-bottom: 2px;
+ }
+
+ &__sectionTitle {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--strapi-fg-5);
+ padding: 14px 10px 6px;
+ }
+
+ &__divider {
+ height: 1px;
+ background: var(--strapi-border);
+ margin: 4px 12px;
+ }
+}
+
+/* Sidebar items */
+.sItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 10px;
+ border-radius: 7px;
+ font-size: 12.5px;
+ color: var(--strapi-fg-3);
+ text-decoration: none;
+ transition: all 0.12s;
+ cursor: pointer;
+
+ &:hover {
+ background: var(--strapi-surface-3);
+ color: var(--strapi-fg-1);
+ text-decoration: none;
+ }
+
+ &--active {
+ background: rgba(73, 69, 255, 0.08);
+ color: var(--strapi-accent-light);
+ font-weight: 600;
+ }
+
+ &__badge {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 9px;
+ font-weight: 700;
+ padding: 2px 5px;
+ border-radius: 4px;
+ text-transform: uppercase;
+ width: 34px;
+ text-align: center;
+ flex-shrink: 0;
+
+ &--get {
+ background: rgba(52, 211, 153, 0.1);
+ color: var(--strapi-green);
+ }
+ &--post {
+ background: rgba(73, 69, 255, 0.1);
+ color: var(--strapi-accent-light);
+ }
+ &--put {
+ background: rgba(251, 191, 36, 0.1);
+ color: var(--strapi-amber);
+ }
+ &--del {
+ background: rgba(248, 113, 113, 0.1);
+ color: var(--strapi-red);
+ }
+ &--patch {
+ background: rgba(192, 132, 252, 0.1);
+ color: var(--strapi-accent-2);
+ }
+ }
+}
+
+/* ═══ API HEADER ═══ */
+.apiHeader {
+ padding: 40px 48px 32px;
+ border-bottom: 1px solid var(--strapi-border);
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 48px;
+ width: 60px;
+ height: 3px;
+ border-radius: 2px;
+ background: linear-gradient(90deg, var(--strapi-accent), var(--strapi-accent-2));
+ animation: apiLineExpand 0.6s var(--strapi-ease) both;
+ }
+
+ &__title {
+ font-family: var(--strapi-font-family-display);
+ font-size: 34px;
+ font-weight: 800;
+ letter-spacing: -0.03em;
+ margin-bottom: 10px;
+ color: var(--strapi-fg-1);
+ }
+
+ &__desc {
+ font-size: 16px;
+ line-height: 1.6;
+ color: var(--strapi-fg-3);
+ max-width: 560px;
+ }
+
+ &__base {
+ margin-top: 20px;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 14px;
+ border-radius: var(--strapi-radius-md);
+ background: var(--strapi-surface-2);
+ border: 1px solid var(--strapi-border);
+ font-family: var(--strapi-font-family-mono);
+ font-size: 13px;
+ }
+
+ &__baseLabel {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--strapi-fg-5);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ }
+
+ &__baseUrl {
+ color: var(--strapi-fg-2);
+ }
+}
+
+@keyframes apiLineExpand {
+ from { width: 0; opacity: 0; }
+ to { width: 60px; opacity: 1; }
+}
+
+/* ═══ ENDPOINT — 2-column split ═══ */
+.endpoint {
+ border-bottom: 1px solid var(--strapi-border);
+
+ /* Full-width header above the 2-column grid */
+ &__header {
+ padding: 40px 44px 20px;
+ }
+
+ /* 2-column grid: params left, code right */
+ &__columns {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ &__desc {
+ padding: 24px 44px 40px;
+ border-right: 1px solid var(--strapi-border);
+ }
+
+ &__methodRow {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+
+ &__path {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 14px;
+ color: var(--strapi-fg-2);
+ }
+
+ // JS API signature (Document Service etc.): shown instead of a method pill +
+ // URL path, because a JS method call has no HTTP verb. Renders the call
+ // signature (e.g. strapi.documents().findOne()) as the header anchor.
+ &__signature {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--strapi-fg-1);
+ background: var(--strapi-surface-2);
+ border: 1px solid var(--strapi-border);
+ border-radius: var(--strapi-radius-md, 6px);
+ padding: 4px 10px;
+ }
+
+ &__title {
+ font-family: var(--strapi-font-family-display);
+ font-size: 22px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ margin-bottom: 12px;
+ color: var(--strapi-fg-1);
+ border: none;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+
+ &__text {
+ font-size: 15px;
+ line-height: 1.7;
+ color: var(--strapi-fg-3);
+ margin-bottom: 0;
+ }
+
+ &__code {
+ padding: 24px 32px 40px;
+ background: var(--strapi-surface-1);
+ position: sticky;
+ top: var(--ifm-navbar-height);
+ align-self: start;
+ max-height: calc(100vh - var(--ifm-navbar-height));
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: var(--strapi-surface-3) transparent;
+ }
+
+ /* Fallback: code-only layout when there are no params */
+ &__codeOnly {
+ padding: 24px 44px 40px;
+ max-width: 720px;
+ }
+}
+
+/* ═══ METHOD PILL ═══ */
+.methodPill {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 11px;
+ font-weight: 700;
+ padding: 4px 10px;
+ border-radius: 6px;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ position: relative;
+ overflow: hidden;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+ animation: methodShimmer 3s ease-in-out infinite;
+ }
+
+ &--get {
+ background: rgba(52, 211, 153, 0.1);
+ color: var(--strapi-green);
+ }
+ &--post {
+ background: rgba(73, 69, 255, 0.1);
+ color: var(--strapi-accent-light);
+ }
+ &--put {
+ background: rgba(251, 191, 36, 0.1);
+ color: var(--strapi-amber);
+ }
+ &--del {
+ background: rgba(248, 113, 113, 0.1);
+ color: var(--strapi-red);
+ }
+ &--patch {
+ background: rgba(192, 132, 252, 0.1);
+ color: var(--strapi-accent-2);
+ }
+}
+
+@keyframes methodShimmer {
+ 0%, 70% { left: -100%; }
+ 100% { left: 100%; }
+}
+
+/* ═══ PARAMS TABLE ═══ */
+.params {
+ &__header {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--strapi-fg-3);
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--strapi-border);
+ margin-bottom: 0;
+ }
+}
+
+.paramRow {
+ display: grid;
+ grid-template-columns: 1.2fr auto 1.5fr;
+ gap: 12px;
+ padding: 12px 0;
+ border-bottom: 1px solid var(--strapi-border);
+ align-items: start;
+ transition: background 0.15s;
+
+ &:hover {
+ background: var(--strapi-surface-1);
+ margin: 0 -8px;
+ padding: 12px 8px;
+ border-radius: 8px;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+.param {
+ &__name {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--strapi-fg-1);
+ }
+
+ &__type {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 11px;
+ color: var(--strapi-fg-4);
+ margin-top: 2px;
+ }
+
+ &__badge {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 9px;
+ font-weight: 700;
+ padding: 2px 6px;
+ border-radius: 4px;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+
+ &--req {
+ background: rgba(248, 113, 113, 0.1);
+ color: var(--strapi-red);
+ }
+ &--opt {
+ background: var(--strapi-surface-3);
+ color: var(--strapi-fg-3);
+ }
+ }
+
+ &__desc {
+ font-size: 13px;
+ line-height: 1.5;
+ color: var(--strapi-fg-3);
+
+ code {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 12px;
+ padding: 1px 5px;
+ border-radius: 4px;
+ background: var(--strapi-surface-2);
+ color: var(--strapi-accent);
+ border: 1px solid var(--strapi-border);
+ }
+ }
+}
+
+/* ═══ CODE PANEL ═══ */
+.codePanel {
+ border-radius: 12px;
+ border: 1px solid var(--strapi-border-strong);
+ background: var(--strapi-surface-0);
+ overflow: hidden;
+ margin-bottom: 16px;
+ transition: border-color 0.3s;
+
+ &:hover {
+ border-color: rgba(73, 69, 255, 0.12);
+ }
+
+ &__tabs {
+ display: flex;
+ border-bottom: 1px solid var(--strapi-border);
+ padding: 0 4px;
+ background: var(--strapi-surface-2);
+ }
+
+ &__tab {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 11px;
+ font-weight: 500;
+ padding: 9px 12px;
+ color: var(--strapi-fg-4);
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: all 0.15s;
+ user-select: none;
+
+ &:hover {
+ color: var(--strapi-fg-2);
+ }
+
+ &--active {
+ color: var(--strapi-fg-1);
+ border-bottom-color: var(--strapi-accent);
+ }
+ }
+
+ &__url {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--strapi-border);
+ font-family: var(--strapi-font-family-mono);
+ font-size: 12px;
+ }
+
+ &__urlMethod {
+ font-weight: 700;
+ font-size: 10px;
+ padding: 2px 6px;
+ border-radius: 4px;
+ text-transform: uppercase;
+
+ &--get {
+ background: rgba(52, 211, 153, 0.1);
+ color: var(--strapi-green);
+ }
+ &--post {
+ background: rgba(73, 69, 255, 0.1);
+ color: var(--strapi-accent-light);
+ }
+ &--put {
+ background: rgba(251, 191, 36, 0.1);
+ color: var(--strapi-amber);
+ }
+ &--del {
+ background: rgba(248, 113, 113, 0.1);
+ color: var(--strapi-red);
+ }
+ &--patch {
+ background: rgba(192, 132, 252, 0.1);
+ color: var(--strapi-accent-2);
+ }
+ }
+
+ &__urlPath {
+ color: var(--strapi-fg-2);
+ }
+
+ // Wraps the so the copy button can anchor to its top-right corner.
+ // Reveals the copy button on hover.
+ &__codeWrap {
+ position: relative;
+
+ &:hover .copyCodeBtn,
+ .copyCodeBtn:focus-visible {
+ opacity: 1;
+ }
+ }
+
+ &__pre {
+ padding: 14px;
+ margin: 0;
+ overflow-x: auto;
+ background: transparent;
+
+ code {
+ font-family: var(--strapi-font-family-mono);
+ font-size: 12.5px;
+ line-height: 1.65;
+ color: var(--strapi-fg-2);
+ }
+ }
+}
+
+.pathHighlight {
+ color: var(--strapi-accent-light);
+}
+
+/* ═══ COPY BUTTON (self-contained, used by CodePanel + ResponsePanel) ═══ */
+.copyCodeBtn {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ padding: 0;
+ border: 1px solid var(--strapi-border);
+ border-radius: 6px;
+ background: var(--strapi-surface-2);
+ color: var(--strapi-fg-2);
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.15s ease-in-out, color 0.15s, border-color 0.15s;
+
+ &:hover {
+ color: var(--strapi-fg-1);
+ border-color: var(--strapi-border-strong);
+ }
+
+ &--copied {
+ opacity: 1;
+ color: var(--strapi-green);
+ border-color: var(--strapi-green);
+ }
+
+ svg {
+ display: block;
+ }
+}
+
+/* ═══ RESPONSE PANEL ═══ */
+.responsePanel {
+ margin-top: 4px;
+}
+
+.responseTabs {
+ display: flex;
+ gap: 2px;
+ margin-bottom: 8px;
+}
+
+.responseTab {
+ font-family: var(--strapi-font-family-technical);
+ font-size: 10px;
+ font-weight: 600;
+ padding: 3px 8px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.15s;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ border: 1px solid transparent;
+ user-select: none;
+
+ &--2xx {
+ background: rgba(52, 211, 153, 0.1);
+ color: var(--strapi-green);
+ }
+ &--3xx {
+ background: rgba(96, 165, 250, 0.1);
+ color: #60a5fa;
+ }
+ &--4xx {
+ background: rgba(248, 113, 113, 0.1);
+ color: var(--strapi-red);
+ }
+ &--5xx {
+ background: rgba(251, 191, 36, 0.1);
+ color: var(--strapi-amber);
+ }
+
+ &--active {
+ &.responseTab--2xx { border-color: var(--strapi-green); }
+ &.responseTab--4xx { border-color: var(--strapi-red); }
+ &.responseTab--5xx { border-color: var(--strapi-amber); }
+ }
+}
+
+.responseHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+ font-family: var(--strapi-font-family-mono);
+ font-size: 11px;
+}
+
+.responseDot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ animation: apiPulse 2s ease-in-out infinite;
+
+ &--ok {
+ background: var(--strapi-green);
+ box-shadow: 0 0 8px var(--strapi-green);
+ }
+ &--err {
+ background: var(--strapi-red);
+ box-shadow: 0 0 8px var(--strapi-red);
+ }
+}
+
+.responseStatus {
+ font-weight: 600;
+
+ &--ok { color: var(--strapi-green); }
+ &--err { color: var(--strapi-red); }
+}
+
+.responseTime {
+ color: var(--strapi-fg-5);
+ margin-left: auto;
+}
+
+@keyframes apiPulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+/* ═══ RESPONSIVE ═══ */
+@include medium-down {
+ .apiLayout {
+ flex-direction: column;
+ }
+
+ .apiSidebar {
+ width: 100%;
+ min-width: 100%;
+ height: auto;
+ position: static;
+ border-right: none;
+ border-bottom: 1px solid var(--strapi-border);
+ display: flex;
+ overflow-x: auto;
+ padding: 8px;
+ gap: 4px;
+
+ &__section {
+ display: flex;
+ gap: 4px;
+ padding: 0;
+ flex-shrink: 0;
+ }
+
+ &__sectionTitle {
+ display: none;
+ }
+
+ &__divider {
+ width: 1px;
+ height: auto;
+ margin: 0 4px;
+ }
+ }
+
+ .sItem {
+ white-space: nowrap;
+ font-size: 11px;
+ padding: 4px 8px;
+ }
+
+ .endpoint__header {
+ padding: 24px 20px 0;
+ }
+
+ .endpoint__columns {
+ grid-template-columns: 1fr;
+ }
+
+ .endpoint__desc {
+ border-right: none;
+ border-bottom: 1px solid var(--strapi-border);
+ padding: 16px 20px 24px;
+ }
+
+ .endpoint__code {
+ position: static;
+ max-height: none;
+ padding: 16px 20px 24px;
+ }
+
+ .endpoint__codeOnly {
+ padding: 16px 20px 24px;
+ }
+
+ .apiHeader {
+ padding: 24px 20px 20px;
+
+ &::before {
+ left: 20px;
+ }
+
+ &__title {
+ font-size: 24px;
+ }
+ }
+}
+
+/* ═══ LIGHT MODE specifics ═══ */
+.endpoint__code {
+ background: var(--strapi-surface-1);
+}
+
+.codePanel {
+ background: var(--strapi-surface-0);
+}
+
+.codePanel__tabs {
+ background: var(--strapi-surface-2);
+}
+
+/* ═══ DARK MODE ═══ */
+@include dark {
+ .endpoint__code {
+ background: var(--strapi-surface-1);
+ }
+
+ .codePanel {
+ background: var(--strapi-surface-0);
+ }
+
+ .codePanel__tabs {
+ background: var(--strapi-surface-2);
+ }
+
+ .paramRow:hover {
+ background: var(--strapi-surface-1);
+ }
+}
+
+/* ═══ REDUCED MOTION ═══ */
+@media (prefers-reduced-motion: reduce) {
+ .methodPill::after {
+ animation: none;
+ }
+
+ .responseDot {
+ animation: none;
+ }
+
+ .apiHeader::before {
+ animation: none;
+ width: 60px;
+ opacity: 1;
+ }
+}
diff --git a/docusaurus/src/components/ApiReference/index.js b/docusaurus/src/components/ApiReference/index.js
new file mode 100644
index 0000000000..c0e7a8b4e6
--- /dev/null
+++ b/docusaurus/src/components/ApiReference/index.js
@@ -0,0 +1,8 @@
+export { default as ApiReferencePage } from './ApiReferencePage';
+export { default as ApiHeader } from './ApiHeader';
+export { default as ApiSidebar } from './ApiSidebar';
+export { default as Endpoint } from './Endpoint';
+export { default as MethodPill } from './MethodPill';
+export { default as ParamTable } from './ParamTable';
+export { default as CodePanel } from './CodePanel';
+export { default as ResponsePanel } from './ResponsePanel';
diff --git a/docusaurus/src/components/Card/card.module.scss b/docusaurus/src/components/Card/card.module.scss
index ef0ca9933a..c4e53c5a3b 100644
--- a/docusaurus/src/components/Card/card.module.scss
+++ b/docusaurus/src/components/Card/card.module.scss
@@ -6,13 +6,13 @@
--strapi-card-border-color: var(--strapi-neutral-150);
--strapi-card-border-color-dark: var(--strapi-neutral-150);
--strapi-card-border-color-light: var(--strapi-neutral-150);
- --strapi-card-border-radius: 4px;
+ --strapi-card-border-radius: var(--strapi-radius-lg);
--strapi-card-background-dark: linear-gradient(180deg, var(--strapi-neutral-100) 0%, var(--strapi-neutral-0) 100%);
--strapi-card-background-light: var(--strapi-neutral-0);
--strapi-card-box-shadow: 0 0 0 transparent;
--strapi-card-content-delimited: 395px;
--strapi-card-img-border-width: 1px;
- --strapi-card-img-border-radius: 4px;
+ --strapi-card-img-border-radius: var(--strapi-radius-md);
--strapi-card-img-bg-scale: 1;
--strapi-card-justify-content: center;
--strapi-card-position: relative;
@@ -47,11 +47,9 @@
.card {
position: var(--strapi-card-position);
overflow: var(--strapi-card-overflow);
- // background: var(--strapi-card-background);
- background-color: transparent;
+ background: transparent;
border-radius: var(--strapi-card-border-radius);
border: 1px solid var(--strapi-card-border-color-light);
- // box-shadow: var(--strapi-card-box-shadow);
display: flex;
flex-direction: column;
gap: var(--strapi-card-gap);
@@ -60,7 +58,6 @@
text-align: var(--strapi-card-text-align);
padding: var(--strapi-card-py) var(--strapi-card-px);
transition: all 0.2s ease;
- background: var(--strapi-card-background-light);
&:focus, &:hover {
--strapi-card-border-color: var(--strapi-card-hover-border-color);
@@ -68,7 +65,8 @@
--strapi-card-img-bg-scale: var(--strapi-card-hover-img-bg-scale);
cursor: pointer;
transform: translateY(-2px);
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+ border-color: var(--strapi-card-hover-border-color);
+ box-shadow: 0px 1px 4px rgba(33, 33, 52, 0.1);
}
&-category-icon-container {
@@ -90,7 +88,7 @@
font-weight: var(--strapi-card-title-font-weight);
line-height: var(--strapi-card-title-line-height);
margin: 0;
- font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+ font-family: var(--strapi-font-family-body) !important;
font-size: 28px;
font-style: normal;
font-weight: 600;
@@ -114,7 +112,7 @@
--ifm-link-decoration: underline;
color:#A5A5BA;
- font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+ font-family: var(--strapi-font-family-body) !important;
font-size: 16px;
font-style: normal;
font-weight: 400;
@@ -222,7 +220,7 @@
--strapi-card-container-icon-background-color-cloud: var(--strapi-neutral-0);
.card {
- background: var(--strapi-card-background-dark);
+ background: transparent;
&-category-icon-container {
/* Couleur par défaut pour tous les conteneurs d'icônes */
diff --git a/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.jsx b/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.jsx
new file mode 100644
index 0000000000..d24132af80
--- /dev/null
+++ b/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.jsx
@@ -0,0 +1,45 @@
+import React, { useState, useCallback } from 'react';
+import styles from './CollapsibleTOC.module.scss';
+
+const STORAGE_KEY = 'strapi-toc-collapsed';
+
+function getInitialCollapsed() {
+ try {
+ return localStorage.getItem(STORAGE_KEY) === 'true';
+ } catch {
+ return false;
+ }
+}
+
+export default function CollapsibleTOC({ children }) {
+ const [collapsed, setCollapsed] = useState(getInitialCollapsed);
+
+ const toggle = useCallback(() => {
+ setCollapsed(prev => {
+ const next = !prev;
+ try { localStorage.setItem(STORAGE_KEY, String(next)); } catch {}
+ return next;
+ });
+ }, []);
+
+ return (
+
+
+ {!collapsed && On this page}
+
+
+ {!collapsed && (
+
+ {children}
+
+ )}
+
+ );
+}
diff --git a/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.module.scss b/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.module.scss
new file mode 100644
index 0000000000..f9cb4416f2
--- /dev/null
+++ b/docusaurus/src/components/CollapsibleTOC/CollapsibleTOC.module.scss
@@ -0,0 +1,88 @@
+/** V3: Collapsible Table of Contents — Sanity-inspired */
+
+.wrapper {
+ position: sticky;
+ top: var(--ifm-navbar-height, 56px);
+ width: 100%;
+ max-height: calc(100vh - var(--ifm-navbar-height, 56px));
+ overflow-y: auto;
+ border-left: none;
+ padding: 0 8px 28px 20px;
+
+ /* Thin scrollbar when TOC content overflows */
+ scrollbar-width: thin;
+ scrollbar-color: var(--strapi-neutral-200) transparent;
+ &::-webkit-scrollbar { width: 3px; }
+ &::-webkit-scrollbar-track { background: transparent; }
+ &::-webkit-scrollbar-thumb { background-color: var(--strapi-neutral-200); border-radius: 3px; }
+
+ // Hide on mobile/tablet — Docusaurus shows a "On this page" dropdown instead
+ @media (max-width: 996px) {
+ display: none;
+ }
+}
+
+.collapsed {
+ border-left: none;
+ padding: 0;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+/** Header: label + toggle button */
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-bottom: 8px;
+ min-height: 44px;
+}
+
+.collapsed .header {
+ padding-bottom: 0;
+ min-height: auto;
+ padding-top: 4px;
+}
+
+.label {
+ font-family: var(--strapi-font-family-technical, 'JetBrains Mono', monospace);
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--strapi-neutral-400);
+ white-space: nowrap;
+}
+
+.toggle {
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ border: 1px solid var(--strapi-neutral-200);
+ background: transparent;
+ cursor: pointer;
+ display: grid;
+ place-items: center;
+ color: var(--strapi-neutral-400);
+ font-size: 14px;
+ line-height: 1;
+ transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+ flex-shrink: 0;
+ padding: 0;
+
+ &:hover {
+ background: var(--strapi-neutral-100);
+ color: var(--strapi-neutral-800);
+ border-color: var(--strapi-neutral-300);
+ }
+}
+
+.content {
+ /* Override inner Docusaurus TOC sticky — our wrapper handles it */
+ :global(.theme-doc-toc-desktop) {
+ position: static;
+ max-height: none;
+ overflow-y: visible;
+ }
+}
diff --git a/docusaurus/src/components/CustomDocCard.js b/docusaurus/src/components/CustomDocCard.js
index 3a30253f18..2ce93b7787 100644
--- a/docusaurus/src/components/CustomDocCard.js
+++ b/docusaurus/src/components/CustomDocCard.js
@@ -1,9 +1,28 @@
import React from 'react'
import classNames from 'classnames';
import Link from '@docusaurus/Link';
+import { useViewMode } from './ViewMode/ViewModeContext';
export default function CustomDocCard(props) {
const { title, description, link, icon, small = false } = props;
+ const { viewMode } = useViewMode();
+
+ // Markdown mode: render as simple bullet point
+ if (viewMode === 'markdown') {
+ return (
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+ );
+ }
+
const linkClasses = classNames({
card: true,
cardContainer: true,
diff --git a/docusaurus/src/components/CustomDocCardsWrapper.js b/docusaurus/src/components/CustomDocCardsWrapper.js
index 29b5baf059..d32015b0ee 100644
--- a/docusaurus/src/components/CustomDocCardsWrapper.js
+++ b/docusaurus/src/components/CustomDocCardsWrapper.js
@@ -1,6 +1,18 @@
import React from 'react';
+import { useViewMode } from './ViewMode/ViewModeContext';
export default function CustomDocCardsWrapper({ children }) {
+ const { viewMode } = useViewMode();
+
+ // Markdown mode: render as a plain
+ if (viewMode === 'markdown') {
+ return (
+
+ {children}
+
+ );
+ }
+
return (
{children}
diff --git a/docusaurus/src/components/Hero/hero.module.scss b/docusaurus/src/components/Hero/hero.module.scss
index 08cc4980f9..760b2414bf 100644
--- a/docusaurus/src/components/Hero/hero.module.scss
+++ b/docusaurus/src/components/Hero/hero.module.scss
@@ -1,55 +1,115 @@
-/** Component: Hero */
+/** Component: Hero — V3 Redesign */
@use '../../scss/_mixins.scss' as *;
-:root {
- --strapi-hero-py: var(--strapi-spacing-6);
- --strapi-hero-gap: var(--strapi-spacing-4);
- --strapi-hero-title-color: #1D1B84;
- --strapi-hero-title-font-size: var(--strapi-font-size-xl);
- --strapi-hero-title-line-height: 1.25;
- --strapi-hero-description-color: #4E6294;
- --strapi-hero-description-font-size: var(--strapi-font-size-lg);
- --strapi-hero-description-line-height: 1.25;
-}
-
.hero {
- padding-top: var(--strapi-hero-py);
- padding-bottom: var(--strapi-hero-py);
+ position: relative;
+ padding-top: 96px;
+ padding-bottom: 48px;
text-align: center;
+ overflow: hidden;
+
+ /** V3: Mesh gradient orbs */
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(100px);
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ &::before {
+ width: 500px;
+ height: 500px;
+ background: rgba(73, 69, 255, 0.12);
+ top: -100px;
+ left: -100px;
+ animation: meshFloat 20s ease-in-out infinite;
+ }
+
+ &::after {
+ width: 400px;
+ height: 400px;
+ background: rgba(192, 132, 252, 0.08);
+ bottom: -50px;
+ right: -50px;
+ animation: meshFloat 25s ease-in-out infinite reverse;
+ }
&__title {
- color: var(--strapi-hero-title-color);
- font-weight: 700;
- font-size: var(--strapi-hero-title-font-size);
- line-height: var(--strapi-hero-title-line-height);
- letter-spacing: 0.4px;
- margin: 0 0 var(--strapi-hero-gap);
- margin-top: 70px;
+ font-family: var(--strapi-font-family-display);
+ color: var(--strapi-fg-1);
+ font-weight: 800;
+ font-size: 36px;
+ line-height: 1.15;
+ letter-spacing: -0.03em;
+ margin: 0 0 var(--strapi-spacing-5);
+ position: relative;
+ z-index: 1;
}
&__description {
- color: var(--strapi-hero-description-color);
- font-size: var(--strapi-hero-description-font-size);
- line-height: var(--strapi-hero-description-line-height);
+ font-family: var(--strapi-font-family-body);
+ color: var(--strapi-fg-3);
+ font-size: 18px;
+ line-height: 1.6;
margin: 0;
+ position: relative;
+ z-index: 1;
+ max-width: 520px;
+ margin-left: auto;
+ margin-right: auto;
}
}
/** Responsive */
@include medium-up {
- :root {
- --strapi-hero-py: 40px;
- --strapi-hero-title-font-size: 43px;
- --strapi-hero-title-line-height: 56px;
- --strapi-hero-description-font-size: 21px;
- --strapi-hero-description-line-height: 28px;
+ .hero {
+ padding-top: 120px;
+ padding-bottom: 56px;
+
+ &__title {
+ font-size: 56px;
+ line-height: 1.1;
+ }
+
+ &__description {
+ font-size: 20px;
+ }
+
+ &::before {
+ width: 700px;
+ height: 700px;
+ }
+
+ &::after {
+ width: 600px;
+ height: 600px;
+ }
}
}
/** Dark mode */
@include dark {
- :root {
- --strapi-hero-title-color: #FFFFFF;
- --strapi-hero-description-color: #A5A5BA;
+ .hero {
+ &::before {
+ background: rgba(73, 69, 255, 0.15);
+ }
+ &::after {
+ background: rgba(192, 132, 252, 0.1);
+ }
}
-}
\ No newline at end of file
+}
+
+@keyframes meshFloat {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(30px, -20px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-20px, 15px) scale(0.95);
+ }
+}
diff --git a/docusaurus/src/components/HomepageAIButton/HomepageAIButton.js b/docusaurus/src/components/HomepageAIButton/HomepageAIButton.js
index fd4b59cee3..51b794f182 100644
--- a/docusaurus/src/components/HomepageAIButton/HomepageAIButton.js
+++ b/docusaurus/src/components/HomepageAIButton/HomepageAIButton.js
@@ -1,13 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
import styles from './homepageaibutton.module.scss'
-import Icon from '../Icon'
export default function HomepageAIButton() {
return (
);
diff --git a/docusaurus/src/components/HomepageAIButton/homepageaibutton.module.scss b/docusaurus/src/components/HomepageAIButton/homepageaibutton.module.scss
index 9927afe07b..736a1c7b1c 100644
--- a/docusaurus/src/components/HomepageAIButton/homepageaibutton.module.scss
+++ b/docusaurus/src/components/HomepageAIButton/homepageaibutton.module.scss
@@ -1,87 +1,142 @@
+/** Component: Homepage AI Command Bar — V3 matching mockup-v2 exactly */
@use '@site/src/scss/_mixins.scss' as mixins;
-:root {
- --button-hover-border: rgba(255,255,255,.2);
- --button-hover-transition-timing: 0.3s;
-}
-
.homepage-ai-button-container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
- margin-top: 10px;
- margin-bottom: 72px;
z-index: 100;
+ position: relative;
}
.homepage-ai-button {
position: relative;
- background-color: var(--strapi-neutral-0);
- border-radius: 4px;
- border: 1px solid #666687;
+ background: var(--strapi-surface-1);
+ border-radius: 16px;
+ border: 1px solid var(--strapi-border-strong);
display: flex;
align-items: center;
- justify-content: center;
- gap: 10px;
- border: solid 1px #DCDCE4;
- cursor: pointer;
- padding: 26px 34px 26px 26px;
- color: var(--strapi-neutral-500, #8E8EA9);
- font-feature-settings: 'liga' off, 'clig' off;
- font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 20px;
- letter-spacing: -0.36px;
+ gap: 12px;
+ cursor: text;
+ padding: 0 24px;
+ width: 100%;
+ max-width: 580px;
+ height: 56px;
+ color: var(--strapi-fg-5);
+ font-family: var(--strapi-font-family-body);
+ font-size: 15px;
+ font-weight: 400;
overflow: hidden;
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
- > svg {
- fill: #c0c0cf;
- transition: all 0.3s ease-in-out;
- }
- transition: all 0.3s ease-in-out;
+/** Gradient border glow on hover */
+.homepage-ai-button::before {
+ content: '';
+ position: absolute;
+ inset: -1px;
+ border-radius: 17px;
+ background: linear-gradient(135deg, var(--strapi-accent, #4945FF), transparent 40%, transparent 60%, var(--strapi-accent-light, #7B79FF));
+ opacity: 0;
+ transition: opacity 0.3s;
+ z-index: -1;
+}
- p {
- margin-bottom: 0;
- color: var(--strapi-neutral-500);
- }
+.homepage-ai-button:hover::before {
+ opacity: 1;
}
.homepage-ai-button:hover {
- cursor: pointer;
- background-color: #9736E8;
- color: white;
- box-shadow: 0 0px 400px 30px #ac73e6, 0 0px 0px 12px #9736e833;
- border-color: rgba(255, 255, 255, 0.20) !important;
- p {
- color: white;
- }
- > svg {
- fill: white;
+ border-color: transparent;
+ box-shadow: 0 0 40px var(--strapi-accent-glow), 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+/** 4-point star sparkle icon */
+.sparkle {
+ font-size: 22px;
+ background: linear-gradient(135deg, var(--strapi-accent-light, #7B79FF), #c084fc);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ flex-shrink: 0;
+}
+
+.homepage-ai-button:hover .sparkle {
+ animation: sparkleWobble 3s ease-in-out infinite;
+}
+
+@keyframes sparkleWobble {
+ 0% { transform: rotate(0deg); }
+ 25% { transform: rotate(15deg); }
+ 75% { transform: rotate(-15deg); }
+ 100% { transform: rotate(0deg); }
+}
+
+.placeholder {
+ flex: 1;
+ text-align: left;
+ color: var(--strapi-fg-5);
+}
+
+/** Keyboard shortcut pills */
+.keys {
+ display: flex;
+ gap: 4px;
+
+ kbd {
+ font-family: var(--strapi-font-family-mono, 'JetBrains Mono', monospace);
+ font-size: 12px;
+ padding: 4px 8px;
+ border-radius: 6px;
+ background: var(--strapi-surface-2);
+ color: var(--strapi-fg-5);
+ border: 1px solid var(--strapi-border);
+ line-height: 1;
+ min-width: 28px;
+ text-align: center;
}
}
+/** Shimmer sweep on hover */
.homepage-ai-button::after {
content: "";
position: absolute;
- z-index: 1;
- background-color: rgba(255, 255, 255, 0.50);
- height: 200px;
- width: 200px;
+ inset: 0;
+ background: linear-gradient(90deg, transparent, rgba(73, 69, 255, 0.06), transparent);
+ background-size: 200% 100%;
opacity: 0;
- transition: all 0.3s ease-in-out;
- border-radius: 50%;
- filter: blur(80px);
+ transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.homepage-ai-button:hover::after {
opacity: 1;
+ animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+ 0% { background-position: -200% 0; }
+ 100% { background-position: 200% 0; }
}
+/** Dark mode — more visible text, darker surface */
@include mixins.dark {
.homepage-ai-button {
- border-color: #32324D;
+ background: var(--strapi-surface-2);
+ border-color: var(--strapi-border-strong);
+ }
+
+ .placeholder {
+ color: var(--strapi-fg-5);
+ }
+
+ .keys kbd {
+ background: var(--strapi-surface-3);
+ border-color: var(--strapi-border-strong);
+ color: var(--strapi-fg-4);
+ }
+
+ .homepage-ai-button:hover {
+ box-shadow: 0 0 60px var(--strapi-accent-glow), 0 8px 32px rgba(0, 0, 0, 0.3);
}
-}
\ No newline at end of file
+}
diff --git a/docusaurus/src/components/KapaThemeInjector/KapaThemeInjector.jsx b/docusaurus/src/components/KapaThemeInjector/KapaThemeInjector.jsx
new file mode 100644
index 0000000000..e4c6aa54dd
--- /dev/null
+++ b/docusaurus/src/components/KapaThemeInjector/KapaThemeInjector.jsx
@@ -0,0 +1,536 @@
+/**
+ * KapaThemeInjector — Injects theme-aware styles into Kapa's Shadow DOM.
+ *
+ * Kapa renders its modal inside a Shadow DOM (#kapa-widget-container),
+ * which prevents external CSS from reaching its elements. This component
+ * observes the page theme (data-theme on ) and injects matching
+ * styles directly into the shadow root.
+ */
+import { useEffect } from 'react';
+
+const STYLE_ID = 'strapi-kapa-theme';
+
+/** Shared styles applied in both modes */
+const SHARED_STYLES = `
+ .mantine-Paper-root {
+ border-radius: 16px !important;
+ overflow: hidden;
+ font-family: var(--strapi-font-family-body, 'Inter', sans-serif);
+ }
+ .mantine-Modal-header {
+ padding: 20px 24px !important;
+ }
+ .mantine-Modal-header .mantine-Title-root {
+ font-family: var(--strapi-font-family-display, 'Inter Tight', sans-serif);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ }
+ .mantine-CloseButton-root {
+ border-radius: 10px !important;
+ transition: all 0.2s !important;
+ }
+ .mantine-Button-root {
+ border-radius: 10px !important;
+ font-family: var(--strapi-font-family-body, 'Inter', sans-serif) !important;
+ font-size: 13px !important;
+ font-weight: 500 !important;
+ transition: all 0.2s !important;
+ }
+ .mantine-Input-input,
+ .mantine-Textarea-input {
+ font-family: var(--strapi-font-family-body, 'Inter', sans-serif) !important;
+ font-size: 14px !important;
+ transition: border-color 0.2s !important;
+ }
+ .mantine-Input-input:focus,
+ .mantine-Textarea-input:focus {
+ border-color: #4945FF !important;
+ box-shadow: none !important;
+ outline: none !important;
+ }
+ .mantine-ActionIcon-root {
+ background: #4945FF !important;
+ border: none !important;
+ border-radius: 10px !important;
+ transition: all 0.2s !important;
+ }
+ .mantine-ActionIcon-root:hover {
+ background: #7B79FF !important;
+ }
+ .mantine-ActionIcon-root svg,
+ .mantine-ActionIcon-root .mantine-ActionIcon-icon {
+ color: #FFFFFF !important;
+ }
+ .mantine-Overlay-root {
+ backdrop-filter: blur(4px) !important;
+ }
+ .mantine-Popover-dropdown {
+ border-radius: 10px !important;
+ }
+ /* Response links — smooth transition on hover */
+ .mantine-Modal-body a:not(.mantine-Paper-root) {
+ transition: color 0.15s ease !important;
+ }
+ /* Code blocks — add padding-right so copy button doesn't overlap text */
+ div:has(> .mantine-ActionIcon-root) > div {
+ padding-right: 40px !important;
+ }
+`;
+
+const LIGHT_STYLES = `
+ .mantine-Paper-root {
+ background: #FFFFFF !important;
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
+ }
+ .mantine-Modal-header {
+ background: #FFFFFF !important;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
+ }
+ .mantine-Modal-header .mantine-Title-root {
+ color: #09090B !important;
+ }
+ .mantine-CloseButton-root {
+ background: transparent !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ color: #09090B !important;
+ }
+ .mantine-CloseButton-root:hover {
+ background: #F4F4F5 !important;
+ border-color: rgba(0, 0, 0, 0.12) !important;
+ }
+ .mantine-Modal-body {
+ background: #FFFFFF !important;
+ }
+ .mantine-Modal-body .mantine-Text-root {
+ color: #27272A !important;
+ }
+ /* Suggestion buttons (default variant, no icon) */
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]) {
+ background: #FFFFFF !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ color: #27272A !important;
+ }
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]):hover {
+ background: #F4F4F5 !important;
+ border-color: rgba(0, 0, 0, 0.12) !important;
+ }
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]) .mantine-Button-label {
+ color: #27272A !important;
+ }
+ .mantine-Input-input,
+ .mantine-Textarea-input {
+ background: #FFFFFF !important;
+ border-color: rgba(0, 0, 0, 0.08) !important;
+ color: #09090B !important;
+ }
+ .mantine-Input-input::placeholder,
+ .mantine-Textarea-input::placeholder {
+ color: #A1A1AA !important;
+ }
+ .mantine-Anchor-root {
+ color: #A1A1AA !important;
+ }
+ /* Disclaimer banner — remove tinted background */
+ .scrollable-container div:has(> .mantine-Group-root > .mantine-Text-root) {
+ background: transparent !important;
+ border: none !important;
+ }
+ /* Links hover — dark violet in light mode */
+ .mantine-Modal-body a:not(.mantine-Paper-root):hover {
+ color: #4945FF !important;
+ }
+ .mantine-Popover-dropdown {
+ background: #FFFFFF !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
+ }
+`;
+
+const DARK_STYLES = `
+ /* Override Mantine root CSS variables — Kapa forces data-mantine-color-scheme="light",
+ so we must redefine these for dark mode to propagate through var() references */
+ #kapa-widget-root {
+ --mantine-color-gray-light: rgba(255, 255, 255, 0.06) !important;
+ --mantine-color-gray-light-hover: rgba(255, 255, 255, 0.1) !important;
+ --mantine-color-gray-light-color: #A1A1AA !important;
+ }
+ .mantine-Paper-root {
+ background: #111113 !important;
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
+ }
+ .mantine-Modal-header {
+ background: #111113 !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+ }
+ .mantine-Modal-header .mantine-Title-root {
+ color: #FAFAFA !important;
+ }
+ .mantine-CloseButton-root {
+ background: transparent !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ color: #FAFAFA !important;
+ }
+ .mantine-CloseButton-root:hover {
+ background: #1F1F23 !important;
+ }
+ .mantine-CloseButton-root svg {
+ color: #FAFAFA !important;
+ }
+ .mantine-Modal-body {
+ background: #111113 !important;
+ color: #D4D4D8 !important;
+ }
+ .mantine-Modal-body .mantine-Text-root {
+ color: #D4D4D8 !important;
+ }
+ /* Response content — headings, text, tables, links */
+ .mantine-Modal-body h1,
+ .mantine-Modal-body h2,
+ .mantine-Modal-body h3,
+ .mantine-Modal-body h4 {
+ color: #FAFAFA !important;
+ }
+ .mantine-Modal-body p,
+ .mantine-Modal-body li,
+ .mantine-Modal-body td,
+ .mantine-Modal-body span {
+ color: #D4D4D8 !important;
+ }
+ .mantine-Modal-body th {
+ color: #FAFAFA !important;
+ background: rgba(255, 255, 255, 0.04) !important;
+ }
+ .mantine-Modal-body table {
+ border-color: rgba(255, 255, 255, 0.08) !important;
+ }
+ .mantine-Modal-body td,
+ .mantine-Modal-body th {
+ border-color: rgba(255, 255, 255, 0.08) !important;
+ }
+ .mantine-Modal-body a {
+ color: #7B79FF !important;
+ }
+ /* Links hover — brighter violet in dark mode */
+ .mantine-Modal-body a:not(.mantine-Paper-root):hover {
+ color: #A5A3FF !important;
+ }
+ .mantine-Modal-body strong {
+ color: #FAFAFA !important;
+ }
+ /* Source cards (anchor elements styled as Paper) */
+ a.mantine-Paper-root {
+ background: #18181B !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ color: #D4D4D8 !important;
+ }
+ a.mantine-Paper-root:hover {
+ background: #1F1F23 !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+ }
+ a.mantine-Paper-root .mantine-Text-root {
+ color: #A1A1AA !important;
+ }
+ /* Action buttons (New chat, Copy, Good/Bad answer) */
+ .mantine-Modal-body .mantine-UnstyledButton-root {
+ color: #D4D4D8 !important;
+ }
+ .mantine-Modal-body .mantine-UnstyledButton-root:hover {
+ background: rgba(255, 255, 255, 0.05) !important;
+ }
+ /* SVGs in modal body inherit light color */
+ .mantine-Modal-body svg {
+ color: #A1A1AA !important;
+ }
+ /* Disclaimer banner — remove the light bg, keep it transparent */
+ .scrollable-container div:has(> .mantine-Group-root > .mantine-Text-root) {
+ background: transparent !important;
+ border: none !important;
+ }
+ /* Use MCP button in header — dark mode */
+ .mantine-Modal-header .mantine-Group-root:has(> .mantine-Text-root) {
+ background: #18181B !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ color: #D4D4D8 !important;
+ }
+ .mantine-Modal-header .mantine-Group-root:has(> .mantine-Text-root):hover {
+ background: #1F1F23 !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+ }
+ .mantine-Modal-header .mantine-Group-root:has(> .mantine-Text-root) .mantine-Text-root {
+ color: #D4D4D8 !important;
+ }
+ .mantine-Modal-header .mantine-Group-root:has(> .mantine-Text-root) svg {
+ color: #D4D4D8 !important;
+ }
+ /* Suggestion buttons (default variant, no icon) */
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]) {
+ --button-bg: #18181B !important;
+ --button-hover: #1F1F23 !important;
+ --button-color: #D4D4D8 !important;
+ --button-bd: 1px solid rgba(255, 255, 255, 0.06) !important;
+ background: #18181B !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ color: #D4D4D8 !important;
+ }
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]):hover {
+ background: #1F1F23 !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+ }
+ .mantine-Button-root[data-variant="default"]:not([data-with-left-section]) .mantine-Button-label {
+ color: #D4D4D8 !important;
+ }
+ /* Action buttons — New chat, Copy, Good/Bad answer (light variant) */
+ .mantine-Button-root[data-variant="light"] {
+ --button-bg: rgba(255, 255, 255, 0.04) !important;
+ --button-hover: rgba(255, 255, 255, 0.1) !important;
+ --button-color: #71717A !important;
+ --button-bd: 1px solid transparent !important;
+ background: rgba(255, 255, 255, 0.04) !important;
+ border: 1px solid transparent !important;
+ color: #71717A !important;
+ }
+ .mantine-Button-root[data-variant="light"]:hover {
+ background: rgba(255, 255, 255, 0.1) !important;
+ border-color: transparent !important;
+ color: #D4D4D8 !important;
+ }
+ .mantine-Button-root[data-variant="light"] .mantine-Button-label {
+ color: inherit !important;
+ }
+ .mantine-Button-root[data-variant="light"] svg {
+ color: inherit !important;
+ }
+ /* Input wrapper (inner Paper-root) — match modal background */
+ .mantine-Paper-root:has(.mantine-Textarea-input) {
+ background: transparent !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ }
+ .mantine-Input-input,
+ .mantine-Textarea-input {
+ background: transparent !important;
+ border-color: rgba(255, 255, 255, 0.06) !important;
+ color: #FAFAFA !important;
+ }
+ .mantine-Input-input::placeholder,
+ .mantine-Textarea-input::placeholder {
+ color: #71717A !important;
+ }
+ .mantine-Anchor-root {
+ color: #71717A !important;
+ }
+ .mantine-Popover-dropdown {
+ background: #18181B !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
+ color: #FAFAFA !important;
+ }
+ .mantine-Popover-dropdown * {
+ color: #D4D4D8 !important;
+ }
+ .mantine-Popover-dropdown h1,
+ .mantine-Popover-dropdown h2,
+ .mantine-Popover-dropdown h3,
+ .mantine-Popover-dropdown h4,
+ .mantine-Popover-dropdown strong {
+ color: #FAFAFA !important;
+ }
+ .mantine-Popover-dropdown a {
+ color: #7B79FF !important;
+ }
+ .mantine-Popover-dropdown a:hover {
+ color: #A5A3FF !important;
+ }
+ .mantine-Popover-dropdown svg {
+ color: #A1A1AA !important;
+ }
+ .mantine-Popover-dropdown .mantine-Paper-root {
+ background: #1F1F23 !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ }
+ .mantine-Popover-dropdown .mantine-Paper-root:hover {
+ background: #27272A !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+ }
+ /* Deep Thinking button — dark-mode base state (default variant + left section) */
+ .mantine-Button-root[data-variant="default"][data-with-left-section] {
+ background: #18181B !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ color: #D4D4D8 !important;
+ }
+ .mantine-Button-root[data-variant="default"][data-with-left-section] .mantine-Button-label {
+ color: #D4D4D8 !important;
+ }
+ .mantine-Button-root[data-variant="default"][data-with-left-section]:hover {
+ background: #1F1F23 !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+ }
+ /* Deep Thinking active/expanded state — violet accent */
+ .mantine-Button-root[data-variant="default"][data-with-left-section][aria-expanded="true"] {
+ background: rgba(73, 69, 255, 0.12) !important;
+ border-color: rgba(73, 69, 255, 0.4) !important;
+ color: #A5B4FC !important;
+ }
+ .mantine-Button-root[data-variant="default"][data-with-left-section][aria-expanded="true"] .mantine-Button-label {
+ color: #A5B4FC !important;
+ }
+ .mantine-Button-root[data-variant="default"][data-with-left-section][aria-expanded="true"] svg {
+ color: #A5B4FC !important;
+ }
+ .mantine-Alert-root {
+ background: transparent !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ }
+ .mantine-Modal-body code,
+ .mantine-Modal-header code {
+ background: #09090B !important;
+ color: #E4E4E7 !important;
+ }
+ .mantine-Code-root {
+ background: rgba(255, 255, 255, 0.06) !important;
+ color: #E4E4E7 !important;
+ }
+ .mantine-Modal-body pre,
+ .mantine-Modal-header pre {
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ }
+`;
+
+function injectStyles(theme) {
+ const container = document.getElementById('kapa-widget-container');
+ const shadow = container?.shadowRoot;
+ if (!shadow) return;
+
+ let styleEl = shadow.getElementById(STYLE_ID);
+ if (!styleEl) {
+ styleEl = document.createElement('style');
+ styleEl.id = STYLE_ID;
+ shadow.appendChild(styleEl);
+ }
+
+ const themeStyles = theme === 'dark' ? DARK_STYLES : LIGHT_STYLES;
+ styleEl.textContent = SHARED_STYLES + themeStyles;
+}
+
+const DEEP_THINKING_LABEL_DISABLED = 'Enable deep thinking';
+const DEEP_THINKING_LABEL_ENABLED = 'Deep thinking enabled';
+
+/**
+ * Overrides the Deep Thinking button label based on its toggle state.
+ *
+ * Kapa uses data-variant="outline" when enabled, "default" when disabled.
+ * React re-renders the label text on every hover/state change, replacing
+ * any DOM text we set. To counteract this we observe both:
+ * – button attributes (data-variant) to detect toggle state changes
+ * – label childList to catch React text-node replacements
+ *
+ * Returns a cleanup function, or null if the button is not found yet.
+ */
+function setupDeepThinkingLabel(shadow) {
+ if (!shadow) return null;
+
+ const btn = shadow.querySelector(
+ '.mantine-Button-root[data-with-left-section][aria-haspopup="dialog"]'
+ );
+ if (!btn) return null;
+
+ const labelEl = btn.querySelector('.mantine-Button-label');
+ if (!labelEl) return null;
+
+ let updating = false; // guard against infinite recursion
+
+ const update = () => {
+ if (updating) return;
+ updating = true;
+ const isEnabled = btn.getAttribute('data-variant') === 'outline';
+ const desired = isEnabled
+ ? DEEP_THINKING_LABEL_ENABLED
+ : DEEP_THINKING_LABEL_DISABLED;
+ if (labelEl.textContent !== desired) {
+ labelEl.textContent = desired;
+ }
+ updating = false;
+ };
+
+ // Set initial label
+ update();
+
+ // Watch button attributes for state changes (variant, aria-expanded)
+ const btnObs = new MutationObserver(update);
+ btnObs.observe(btn, {
+ attributes: true,
+ attributeFilter: ['data-variant', 'aria-expanded'],
+ });
+
+ // Watch label childList to catch React re-renders that replace our text
+ const labelObs = new MutationObserver(update);
+ labelObs.observe(labelEl, { childList: true, subtree: true });
+
+ return {
+ disconnect() {
+ btnObs.disconnect();
+ labelObs.disconnect();
+ },
+ };
+}
+
+export default function KapaThemeInjector() {
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+
+ const getTheme = () => document.documentElement.dataset.theme || 'light';
+ let deepThinkingObserver = null;
+ let trackedBtn = null; // the DOM node we're currently observing
+
+ function ensureDeepThinkingLabel(shadow) {
+ if (!shadow) return;
+ const btn = shadow.querySelector(
+ '.mantine-Button-root[data-with-left-section][aria-haspopup="dialog"]'
+ );
+ // Re-attach if the button is new (Kapa re-rendered its tree)
+ if (btn && btn !== trackedBtn) {
+ deepThinkingObserver?.disconnect();
+ deepThinkingObserver = setupDeepThinkingLabel(shadow);
+ trackedBtn = btn;
+ }
+ }
+
+ // Inject immediately if container already exists
+ injectStyles(getTheme());
+
+ const container = document.getElementById('kapa-widget-container');
+ if (container?.shadowRoot) {
+ ensureDeepThinkingLabel(container.shadowRoot);
+ }
+
+ // Observe theme changes on
+ const themeObserver = new MutationObserver(() => {
+ injectStyles(getTheme());
+ // Kapa may re-render on theme change — re-attach label observer
+ const c = document.getElementById('kapa-widget-container');
+ if (c?.shadowRoot) ensureDeepThinkingLabel(c.shadowRoot);
+ });
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['data-theme'],
+ });
+
+ // Observe when Kapa container appears or re-renders in the DOM
+ const bodyObserver = new MutationObserver(() => {
+ const c = document.getElementById('kapa-widget-container');
+ if (c?.shadowRoot) {
+ injectStyles(getTheme());
+ ensureDeepThinkingLabel(c.shadowRoot);
+ }
+ });
+ bodyObserver.observe(document.body, { childList: true, subtree: true });
+
+ return () => {
+ themeObserver.disconnect();
+ bodyObserver.disconnect();
+ deepThinkingObserver?.disconnect();
+ };
+ }, []);
+
+ return null;
+}
diff --git a/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.jsx b/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.jsx
new file mode 100644
index 0000000000..1cbfd094d3
--- /dev/null
+++ b/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.jsx
@@ -0,0 +1,132 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import styles from './NavbarBreadcrumbs.module.scss';
+
+const PRODUCTS = {
+ cms: { switchTo: 'cloud', switchHref: '/cloud/intro' },
+ cloud: { switchTo: 'cms', switchHref: '/cms/intro' },
+};
+
+const SEGMENT_REWRITES = {
+ 'cms/api': '/cms/api/content-api',
+};
+
+const ROOT_LINKS = { cms: '/cms/intro', cloud: '/cloud/intro' };
+
+function buildCrumbs(pathname) {
+ const segments = pathname.replace(/^\//, '').replace(/\/$/, '').split('/');
+ if (segments.length === 0) return [];
+
+ return segments.map((segment, index) => {
+ const cumPath = segments.slice(0, index + 1).join('/');
+ let href;
+ if (index === 0 && ROOT_LINKS[segment]) {
+ href = ROOT_LINKS[segment];
+ } else if (SEGMENT_REWRITES[cumPath]) {
+ href = SEGMENT_REWRITES[cumPath];
+ } else {
+ href = '/' + cumPath;
+ }
+ return { label: segment, href, isLast: index === segments.length - 1, isRoot: index === 0 };
+ });
+}
+
+/**
+ * Renders breadcrumbs into the container ref imperatively.
+ * This bypasses React's render cycle which Docusaurus blocks for the navbar.
+ */
+function renderBreadcrumbs(container, pathname) {
+ if (!container) return;
+
+ const isDocPage = pathname.startsWith('/cms/') || pathname.startsWith('/cloud/');
+ container.style.display = '';
+
+ if (!isDocPage) {
+ // Homepage: show product links
+ let html = ``;
+ html += ``;
+ container.innerHTML = html;
+ return;
+ }
+
+ const rootSegment = pathname.split('/')[1]; // 'cms' or 'cloud'
+ const product = PRODUCTS[rootSegment];
+ const crumbs = buildCrumbs(pathname);
+
+ // Build HTML
+ let html = ``;
+ html += ``;
+ container.innerHTML = html;
+}
+
+/**
+ * Mockup-v3 style breadcrumbs that render inside the navbar.
+ * Shows a monospace path-style trail: cms / getting-started / quick-start
+ * The first segment (cms/cloud) shows a subtle switch link on hover.
+ *
+ * Uses imperative DOM updates because Docusaurus memoizes the navbar tree
+ * and prevents React re-renders on client-side navigation.
+ */
+export default function NavbarBreadcrumbs() {
+ const containerRef = useRef(null);
+ const lastPathRef = useRef('');
+
+ const update = useCallback(() => {
+ const current = window.location.pathname;
+ if (current !== lastPathRef.current) {
+ lastPathRef.current = current;
+ renderBreadcrumbs(containerRef.current, current);
+ }
+ }, []);
+
+ useEffect(() => {
+ // Initial render
+ lastPathRef.current = window.location.pathname;
+ renderBreadcrumbs(containerRef.current, window.location.pathname);
+
+ // Listen for all navigation types
+ // 1. popstate (back/forward)
+ window.addEventListener('popstate', update);
+
+ // 2. Patch pushState/replaceState for SPA navigations
+ const origPush = history.pushState;
+ const origReplace = history.replaceState;
+ history.pushState = function (...args) {
+ origPush.apply(this, args);
+ // Defer to next microtask so URL is updated
+ Promise.resolve().then(update);
+ };
+ history.replaceState = function (...args) {
+ origReplace.apply(this, args);
+ Promise.resolve().then(update);
+ };
+
+ return () => {
+ window.removeEventListener('popstate', update);
+ history.pushState = origPush;
+ history.replaceState = origReplace;
+ };
+ }, [update]);
+
+ return ;
+}
diff --git a/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.module.scss b/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.module.scss
new file mode 100644
index 0000000000..6f5a084062
--- /dev/null
+++ b/docusaurus/src/components/NavbarBreadcrumbs/NavbarBreadcrumbs.module.scss
@@ -0,0 +1,127 @@
+@use '../../scss/mixins' as *;
+
+.navbarBreadcrumbs {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ margin-left: 20px;
+}
+
+.separator {
+ width: 1px;
+ height: 20px;
+ background: var(--strapi-neutral-300);
+ flex-shrink: 0;
+}
+
+.crumbs {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-family: var(--strapi-font-family-technical, 'JetBrains Mono', monospace);
+ font-size: 13px;
+ color: var(--strapi-neutral-600);
+}
+
+.slash {
+ color: var(--strapi-neutral-400);
+ user-select: none;
+}
+
+.homeDash {
+ color: var(--strapi-neutral-400);
+ user-select: none;
+ margin: 0 2px;
+}
+
+.crumbLink {
+ color: var(--strapi-neutral-600);
+ text-decoration: none;
+ transition: color 0.15s ease;
+
+ &:hover {
+ color: var(--strapi-primary-600);
+ text-decoration: none;
+ }
+}
+
+.current {
+ color: var(--strapi-primary-600);
+ font-weight: 500;
+}
+
+/* ── Root crumb with inline product switch ── */
+.rootCrumb {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 0;
+
+ &:hover .switchLink {
+ opacity: 1;
+ max-width: 80px;
+ margin-left: 8px;
+ }
+}
+
+.switchLink {
+ display: inline-flex;
+ align-items: center;
+ font-family: var(--strapi-font-family-technical, 'JetBrains Mono', monospace);
+ font-size: 12px;
+ color: var(--strapi-neutral-400);
+ text-decoration: none;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 0;
+ opacity: 0;
+ margin-left: 0;
+ transition: opacity 0.2s ease, max-width 0.25s ease, margin-left 0.25s ease;
+
+ &:hover {
+ color: var(--strapi-primary-600);
+ text-decoration: none;
+ }
+}
+
+/* ── Dark mode ── */
+@include dark {
+ .separator {
+ background: var(--strapi-neutral-400);
+ }
+
+ .slash {
+ color: var(--strapi-neutral-500);
+ }
+
+ .crumbLink {
+ color: var(--strapi-neutral-500);
+
+ &:hover {
+ color: var(--strapi-primary-600);
+ }
+ }
+
+ .current {
+ color: var(--strapi-primary-600);
+ }
+
+ .switchLink {
+ color: var(--strapi-neutral-500);
+
+ &:hover {
+ color: var(--strapi-primary-600);
+ }
+ }
+
+ .homeDash {
+ color: var(--strapi-neutral-500);
+ }
+}
+
+// Hide on mobile — too cluttered
+@include medium-down {
+ .navbarBreadcrumbs {
+ display: none;
+ }
+}
diff --git a/docusaurus/src/components/NavbarSearchAI/NavbarSearchAI.jsx b/docusaurus/src/components/NavbarSearchAI/NavbarSearchAI.jsx
new file mode 100644
index 0000000000..2b2f03f722
--- /dev/null
+++ b/docusaurus/src/components/NavbarSearchAI/NavbarSearchAI.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import SearchBar from '@theme/SearchBar';
+import Icon from '../Icon';
+import styles from './NavbarSearchAI.module.scss';
+
+export default function NavbarSearchAI() {
+ return (
+
+
+
+ *
+ * ```
+ */
+function Step({ title, description, link, index }) {
+ const content = (
+
+
+ {index}
+
+
+ {title}
+ {description && {description}}
+
+ {link && →}
+
+ );
+
+ if (link) {
+ return {content};
+ }
+ return content;
+}
+
+export default function NextSteps({ title = "What's next?", children }) {
+ // Inject index into Step children
+ const steps = React.Children.toArray(children).filter(Boolean);
+
+ return (
+
+ {title && {title}
}
+
+ {steps.map((child, i) => {
+ if (React.isValidElement(child) && child.type === Step) {
+ return React.cloneElement(child, { index: i + 1, key: i });
+ }
+ return child;
+ })}
+
+
+ );
+}
+
+NextSteps.Step = Step;
diff --git a/docusaurus/src/components/NextSteps/next-steps.module.scss b/docusaurus/src/components/NextSteps/next-steps.module.scss
new file mode 100644
index 0000000000..a796c47e7d
--- /dev/null
+++ b/docusaurus/src/components/NextSteps/next-steps.module.scss
@@ -0,0 +1,127 @@
+/** NextSteps — "What's next?" numbered step list
+ * Design matching the v3 quick-start guide screenshot:
+ * - Numbered circles with accent background
+ * - Clean separators between steps
+ * - Generous vertical spacing
+ */
+@use '@site/src/scss/_mixins.scss' as *;
+
+.wrapper {
+ margin: 48px 0 32px;
+ padding: 0;
+}
+
+.title {
+ font-family: var(--strapi-font-family-display, 'Outfit', sans-serif);
+ font-size: 24px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: var(--strapi-fg-1, var(--ifm-font-color-base));
+ margin: 0 0 32px;
+ border: none;
+ padding: 0;
+}
+
+.steps {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+
+.stepLink {
+ text-decoration: none !important;
+ color: inherit;
+
+ &:hover {
+ text-decoration: none !important;
+ color: inherit;
+ }
+
+ &:hover .step {
+ background: var(--strapi-surface-2, #F4F4F5);
+ }
+
+ &:hover .stepArrow {
+ opacity: 1;
+ transform: translateX(0);
+ color: var(--strapi-accent, #4945FF);
+ }
+
+ &:hover .stepTitle {
+ color: var(--strapi-accent, #4945FF);
+ }
+}
+
+.step {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 28px 24px;
+ border-bottom: 1px solid var(--strapi-border, rgba(0, 0, 0, 0.06));
+ transition: background 0.2s;
+ border-radius: 12px;
+ margin: 0 -24px;
+ width: calc(100% + 48px);
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+.stepNumber {
+ width: 40px;
+ height: 40px;
+ border-radius: 10px;
+ background: rgba(73, 69, 255, 0.08);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ span {
+ font-family: var(--strapi-font-family-display, 'Outfit', sans-serif);
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--strapi-accent, #4945FF);
+ }
+}
+
+.stepContent {
+ flex: 1;
+ min-width: 0;
+}
+
+.stepTitle {
+ font-family: var(--strapi-font-family-display, 'Outfit', sans-serif);
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--strapi-fg-1, var(--ifm-font-color-base));
+ margin-bottom: 4px;
+ transition: color 0.2s;
+}
+
+.stepDesc {
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--strapi-fg-4, var(--ifm-font-color-secondary));
+}
+
+.stepArrow {
+ font-size: 18px;
+ color: var(--strapi-fg-5, #A1A1AA);
+ opacity: 0;
+ transform: translateX(-4px);
+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+ flex-shrink: 0;
+}
+
+/* Dark mode */
+@include dark {
+ .stepNumber {
+ background: rgba(73, 69, 255, 0.15);
+ }
+
+ .stepLink:hover .step {
+ background: var(--strapi-surface-2, #18181B);
+ }
+}
diff --git a/docusaurus/src/components/PageFeedback/FeedbackForm.jsx b/docusaurus/src/components/PageFeedback/FeedbackForm.jsx
new file mode 100644
index 0000000000..79a0eea00c
--- /dev/null
+++ b/docusaurus/src/components/PageFeedback/FeedbackForm.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+const MIN_COMMENT_LENGTH = 20;
+const MAX_COMMENT_LENGTH = 2000;
+
+export default function FeedbackForm({
+ onSubmit,
+ onCancel,
+ isSubmitting,
+ required,
+}) {
+ const [comment, setComment] = useState('');
+
+ const trimmed = comment.trim();
+ const isTooLong = trimmed.length > MAX_COMMENT_LENGTH;
+ const canSubmit = required
+ ? trimmed.length >= MIN_COMMENT_LENGTH && !isTooLong && !isSubmitting
+ : !isTooLong && !isSubmitting;
+
+ function handleSubmit(e) {
+ e.preventDefault();
+ if (!canSubmit) return;
+ const hp = e.target.elements._hp?.value || '';
+ onSubmit(trimmed || null, hp);
+ }
+
+ return (
+