@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/example/docs-queue-demos.ts

@@ -1,113 +1,73 @@
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
-import {
-  DOCS_MOCK_GEO_SERVICE,
-  DOCS_MOCK_REQRES_SERVICE,
-} from "../mock-api/urls";
-import { docsQueueUsersFilterKey } from "./docs-provider-keys";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsFlight } from "../mock-api/flights";
 import { tailwind } from "../tailwind";
 
 import "../../core/components/functional/queue/queue";
-import "../../core/components/ui/image/image";
+import "../../core/components/ui/badge/badge";
 import "../../core/components/ui/form/input/input";
 
-type CommuneRow = { nom: string; code?: string };
+const flightFilter = new DataProviderKey<{ q?: string }>("queueFlightFilter");
 
-type UserRow = {
-  first_name: string;
-  last_name: string;
-  email: string;
-  avatar: string;
-};
-
-const userRow = ({ first_name, last_name, email, avatar }: UserRow) =>
-  html`<div class="flex items-center gap-3 rounded-md p-2 hover:bg-neutral-50">
-    <sonic-image
-      src=${avatar}
-      rounded="md"
-      ratio="1/1"
-      class="w-12 block"
-    ></sonic-image>
-    <div>
-      <div>${first_name} <span class="font-bold">${last_name}</span></div>
-      <div class="text-sm text-neutral-500">${email}</div>
-    </div>
+const flightRow = ({ time, code, city, airport, gate, status }: DocsFlight) =>
+  html`<div
+    class="grid grid-cols-[3.5rem_4.5rem_1fr_3rem_auto] items-center gap-3 border-0 border-b border-dotted border-neutral-300 py-2 text-sm"
+  >
+    <span class="font-mono">${time}</span>
+    <span class="font-mono">${code}</span>
+    <span>${city} <span class="text-neutral-500">(${airport})</span></span>
+    <span class="font-mono text-neutral-500">${gate}</span>
+    <sonic-badge size="xs">${status}</sonic-badge>
   </div>`;
 
-/** Communes — one batch (`limit` only, no `$offset` in the expression). */
+/** Lazy load: batches of 4 departures, the next one loads on scroll. */
 @customElement("docs-queue-geo-demo")
 export class DocsQueueGeoDemo extends LitElement {
-  private items = (item: CommuneRow) =>
-    html`<div class="rounded bg-neutral-100 p-2 text-sm">
-      <div class="font-medium">${item.nom}</div>
-      ${item.code
-        ? html`<div class="text-neutral-500">${item.code}</div>`
-        : null}
-    </div>`;
+  static styles = [tailwind];
 
   render() {
     return html`
       <sonic-queue
-        class="grid grid-cols-3 gap-3"
-        dataProviderExpression="communes?limit=$limit"
-        limit="6"
-        serviceURL=${DOCS_MOCK_GEO_SERVICE}
-        .items=${this.items}
-        debug
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit&direction=departures"
+        key="flights"
+        limit="4"
+        class="block max-h-48 overflow-y-auto"
+        .items=${flightRow}
       ></sonic-queue>
     `;
   }
 }
 
-/**
- * Users — lazy load + search (`q`), aligned with create-concorde-ts-starter demo-queue.
- * Mock: `filterDocsUsers` + `paginateUsers` in `src/docs/mock-api/`.
- */
+/** Filter: the `q` field is added to every request; a change reloads from offset 0. */
 @customElement("docs-queue-users-demo")
 export class DocsQueueUsersDemo extends LitElement {
   static styles = [tailwind];
 
-  private items = userRow;
-
-  private separator = () => html`
-    <div class="my-1 border-t border-dashed border-neutral-200"></div>
-  `;
-
   private noItems = () => html`
-    <p class="p-4 text-center text-sm italic text-neutral-500">
-      No users — try another search (e.g. <code>zzz</code>)
-    </p>
+    <p class="p-4 text-center text-sm text-neutral-500">No flight found.</p>
   `;
 
   render() {
     return html`
-      <div formDataProvider=${docsQueueUsersFilterKey.path} class="mb-3 max-w-md">
-        <sonic-input
-          name="q"
-          type="search"
-          label="Search"
-          placeholder="First name, last name, or email"
-          size="sm"
-        ></sonic-input>
-      </div>
-      <p class="mb-3 text-sm text-neutral-500">
-        Typing updates <code>?q=…</code> on each request. Scroll inside the box
-        to load the next batch (<code>offset</code> += <code>limit</code>).
-      </p>
+      <sonic-input
+        formDataProvider=${flightFilter.path}
+        name="q"
+        type="search"
+        label="Search flights"
+        placeholder="City, airport or flight number"
+      ></sonic-input>
       <sonic-queue
-        lazyload
-        dataProviderExpression="api/users?offset=$offset&limit=$limit"
-        dataFilterProvider="filter"
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit"
+        dataFilterProvider=${flightFilter.path}
+        key="flights"
         limit="4"
-        offset="0"
-        idKey="id"
-        serviceURL=${DOCS_MOCK_REQRES_SERVICE}
-        key="data"
-        class="grid max-h-96 max-w-md gap-2 overflow-y-auto"
-        .items=${this.items}
-        .separator=${this.separator}
+        class="mt-4 block max-h-48 overflow-y-auto"
+        .items=${flightRow}
         .noItems=${this.noItems}
-        debug
       ></sonic-queue>
     `;
   }

package/src/docs/example/docs-router-demos.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { tailwind } from "../tailwind";
-import { DOC_ROUTER_PAGE_HASH, setDocsDemoSubHash } from "../docs-location";
+import { DOC_ROUTER_PAGE_PATH, setDocsDemoSubHash } from "../docs-location";
 
 import "../../core/components/functional/router/router";
 import "../../core/components/ui/button/button";
@@ -16,7 +16,7 @@ const panel = (title: string, body?: string) => html`
 `;
 
 function navButton(label: string, subRoute: string, variant?: string) {
-  const href = `${DOC_ROUTER_PAGE_HASH}#${subRoute.replace(/^#/, "")}`;
+  const href = `${DOC_ROUTER_PAGE_PATH}#${subRoute.replace(/^#/, "")}`;
   return html`<sonic-button
     size="xs"
     variant=${variant ?? "default"}
@@ -24,7 +24,7 @@ function navButton(label: string, subRoute: string, variant?: string) {
     href=${href}
     @click=${(e: Event) => {
       e.preventDefault();
-      setDocsDemoSubHash(subRoute, DOC_ROUTER_PAGE_HASH);
+      setDocsDemoSubHash(subRoute, DOC_ROUTER_PAGE_PATH);
     }}
     >${label}</sonic-button
   >`;
@@ -36,21 +36,21 @@ export class DocsRouterBasicDemo extends LitElement {
 
   @state()
   private routes = {
-    "#home": () => panel("Home"),
-    "#about": () => panel("About"),
-    "#work": () => panel("Work"),
-    "#contact": () => panel("Contact"),
+    "#departures": () => panel("Departures", "CN 001 to New York boards at B12."),
+    "#arrivals": () => panel("Arrivals", "CN 002 from New York has landed."),
+    "#fleet": () => panel("Fleet", "Seven aircraft, cruising at Mach 2.04."),
+    "#crew": () => panel("Crew", "Captain Leo Marchand is on duty."),
     fallback: () =>
-      panel("404", "No route matched — `routes.fallback` is rendered."),
+      panel("404", "No route matched: routes.fallback is rendered."),
   };
 
   render() {
     return html`
       <div class="mb-4 flex flex-wrap gap-2">
-        ${navButton("Home", "home")}
-        ${navButton("About", "about")}
-        ${navButton("Work", "work")}
-        ${navButton("Contact", "contact")}
+        ${navButton("Departures", "departures")}
+        ${navButton("Arrivals", "arrivals")}
+        ${navButton("Fleet", "fleet")}
+        ${navButton("Crew", "crew")}
         ${navButton("Unknown", "unknown", "outline")}
       </div>
       <sonic-router .routes=${this.routes}></sonic-router>
@@ -64,24 +64,19 @@ export class DocsRouterParamsDemo extends LitElement {
 
   @state()
   private routes = {
-    "#couleur/:id": ({ id }: { id: string }) =>
-      panel("Url-pattern", `Param :id = ${id}`),
-    "#products/(\\d+)/(\\w+)": ([productId, slug]: [string, string]) =>
-      panel("RegExp", `productId = ${productId}, slug = ${slug}`),
-    fallback: () => panel("No match", "Try a link below."),
+    "#flights/:code": ({ code }: { code: string }) =>
+      panel(`Flight ${code}`, "url-pattern: params is { code }"),
+    "#gates/([A-Z])(\\d+)": ([terminal, gate]: [string, string]) =>
+      panel(`Terminal ${terminal}, gate ${gate}`, "RegExp: params is [terminal, gate]"),
+    fallback: () => panel("No flight selected", "Pick a link above."),
   };
 
   render() {
     return html`
-      <p class="mb-3 text-sm text-neutral-500">
-        Dynamic segments are passed to the route function (object for
-        <code>url-pattern</code>, array for capturing groups). Navigation uses
-        <code>history.replaceState</code> with a second hash segment so the doc
-        page does not reload.
-      </p>
       <div class="mb-4 flex flex-wrap gap-2">
-        ${navButton("#couleur/3", "couleur/3")}
-        ${navButton("#products/42/widget", "products/42/widget")}
+        ${navButton("#flights/CN001", "flights/CN001")}
+        ${navButton("#flights/CN102", "flights/CN102")}
+        ${navButton("#gates/B12", "gates/B12")}
       </div>
       <sonic-router .routes=${this.routes}></sonic-router>
     `;

package/src/docs/example/docs-submit-demos.ts

@@ -96,7 +96,7 @@ export class DocsSubmitDemo extends LitElement {
     if (!r || (!r.id && !r.token && !r.error && !r.messages?.length)) {
       return html`
         <p class="mt-4 text-sm text-neutral-500">
-          Submit the form to see <code>id</code> and <code>token</code> here.
+          Sign up to see the crew <code>id</code> and <code>token</code> here.
         </p>
       `;
     }
@@ -120,19 +120,19 @@ export class DocsSubmitDemo extends LitElement {
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
         </sonic-submit>
         <sonic-submit onClick>
-          <sonic-button type="success" class="w-full">Submit</sonic-button>
+          <sonic-button type="success" class="w-full">Join the crew</sonic-button>
         </sonic-submit>
       </sonic-scope>
       ${this.resultBlock()}
@@ -159,28 +159,28 @@ export class DocsSubmitClearDemo extends LitElement {
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
-          <sonic-button type="success" class="w-full">Submit and clear form</sonic-button>
+          <sonic-button type="success" class="w-full">Check in and clear form</sonic-button>
         </sonic-submit>
       </sonic-scope>
       <p class="mt-3 text-sm text-neutral-500">
-        After submit, <code>clearedDataOnSuccess="submit-clear-form"</code> resets
-        the publisher (inputs should empty).
+        After check-in, <code>clearedDataOnSuccess="submit-clear-form"</code> resets
+        the publisher and empties the fields.
       </p>
     `;
   }
 }
 
-/** `submit-result-key` keeps only a nested part of the JSON before writing the result publisher. */
+/** `submitResultKey` keeps only a nested part of the JSON before writing the result publisher. */
 @customElement("docs-submit-result-key-demo")
 export class DocsSubmitResultKeyDemo extends LitElement {
   static styles = [tailwind];
@@ -199,29 +199,29 @@ export class DocsSubmitResultKeyDemo extends LitElement {
         submitResultDataProvider=${submitNestedResultKey.path}
         class="max-w-lg block"
       >
-        <sonic-submit onClick submit-result-key="data">
+        <sonic-submit onClick submitResultKey="data">
           <div class="mb-4 grid grid-cols-2 gap-4">
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
-          <sonic-button type="primary" class="w-full">Submit (nested JSON)</sonic-button>
+          <sonic-button type="primary" class="w-full">Check in (nested JSON)</sonic-button>
         </sonic-submit>
       </sonic-scope>
       <sonic-divider align="left" class="mt-4">Stored in publisher</sonic-divider>
       <div class="mt-2 text-sm">
         ${r?.id != null
           ? html`<div>id from <code>data</code> : ${r.id}</div>`
-          : html`<p class="text-neutral-500">Submit to extract <code>data.id</code> / <code>data.token</code>.</p>`}
+          : html`<p class="text-neutral-500">Check in to extract <code>data.id</code> and <code>data.token</code>.</p>`}
       </div>
     `;
   }
@@ -250,23 +250,23 @@ export class DocsSubmitFormDataDemo extends LitElement {
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
-          <sonic-button type="primary" class="w-full">Submit as FormData</sonic-button>
+          <sonic-button type="primary" class="w-full">Send passenger details as FormData</sonic-button>
         </sonic-submit>
       </sonic-scope>
       <div class="mt-3 text-sm">
         ${this.result?.token
           ? html`Token received: <span class="font-mono">${this.result.token}</span>`
-          : html`<p class="text-neutral-500">Mock accepts JSON and multipart for <code>/api/register</code>.</p>`}
+          : html`<p class="text-neutral-500">The mock accepts JSON and multipart on <code>/api/register</code>.</p>`}
       </div>
     `;
   }
@@ -292,10 +292,10 @@ export class DocsSubmitGetDemo extends LitElement {
       >
         <sonic-submit onClick method="get">
           <div class="mb-4 grid grid-cols-2 gap-4">
-            <sonic-input name="email" type="email" value="demo@example.com"></sonic-input>
-            <sonic-input name="password" type="password" value="secret"></sonic-input>
+            <sonic-input name="email" type="email" label="Crew email" value="leo.marchand@example.com"></sonic-input>
+            <sonic-input name="password" type="password" label="Crew code" value="mach2"></sonic-input>
           </div>
-          <sonic-button type="neutral" class="w-full">GET with query string</sonic-button>
+          <sonic-button type="neutral" class="w-full">Look up crew member (GET)</sonic-button>
         </sonic-submit>
       </sonic-scope>
       <div class="mt-3 space-y-1 text-sm">${resultLines(this.result)}</div>
@@ -324,25 +324,25 @@ export class DocsSubmitNativeDemo extends LitElement {
               <sonic-input
                 required
                 name="email"
-                type="email"
-                value="eve.holt@reqres.in"
+                type="email" label="Email"
+                value="ada.lindqvist@example.com"
               ></sonic-input>
               <sonic-input
                 required
-                type="password"
+                type="password" label="Password"
                 name="password"
-                value="pistol"
+                value="concorde"
               ></sonic-input>
             </div>
             <sonic-button type="success" class="w-full"
-              >Native form POST</sonic-button
+              >Check in (native form POST)</sonic-button
             >
           </sonic-submit>
         </sonic-scope>
       </form>
       <p class="mt-2 text-sm text-neutral-500">
-        Response loads in the iframe below (full page navigation is avoided via
-        <code>target</code>).
+        The response loads in the iframe below: <code>target</code> avoids a
+        full page navigation.
       </p>
       <iframe
         name="docs-submit-native-frame"
@@ -381,23 +381,23 @@ export class DocsSubmitEventDemo extends LitElement {
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
-          <sonic-button type="primary" class="w-full">Submit (listen event)</sonic-button>
+          <sonic-button type="primary" class="w-full">Board (listen to event)</sonic-button>
         </sonic-submit>
       </sonic-scope>
       <p class="mt-3 text-sm">
         ${this.lastEvent
           ? html`Last <code>submit</code> event: <span class="font-mono">${this.lastEvent}</span>`
-          : html`<span class="text-neutral-500">Click submit — handler reads <code>event.detail</code>.</span>`}
+          : html`<span class="text-neutral-500">Click Board: the handler reads <code>event.detail</code>.</span>`}
       </p>
     `;
   }
@@ -426,14 +426,14 @@ export class DocsSubmitEndpointDemo extends LitElement {
             <sonic-input
               required
               name="email"
-              type="email"
-              value="eve.holt@reqres.in"
+              type="email" label="Email"
+              value="ada.lindqvist@example.com"
             ></sonic-input>
             <sonic-input
               required
-              type="password"
+              type="password" label="Password"
               name="password"
-              value="pistol"
+              value="concorde"
             ></sonic-input>
           </div>
           <sonic-button type="primary" class="w-full"
@@ -443,7 +443,7 @@ export class DocsSubmitEndpointDemo extends LitElement {
       </sonic-scope>
       <div class="mt-3 text-sm">
         ${this.result?.token
-          ? html`Registered (scope <code>dataProvider</code> is <code>api/users</code>, request went to <code>api/register</code>).`
+          ? html`Signed up: the scope <code>dataProvider</code> is <code>api/users</code> but the request went to <code>api/register</code>.`
           : html`<p class="text-neutral-500">
               <code>dataProvider=${usersListEndpoint.path}</code> but
               <code>endPoint=${registerEndpoint.path}</code> on

package/src/docs/example/docs-toggle-demos.ts

@@ -28,7 +28,7 @@ export class DocsToggleIfDemo extends LitElement {
     return html`
       <div formDataProvider=${docsToggleVisibilityKey.path}>
         <sonic-checkbox
-          label="Show evacuation plan"
+          label="Show aircraft"
           name="togglePlan"
           unique
           checked
@@ -36,9 +36,10 @@ export class DocsToggleIfDemo extends LitElement {
         ></sonic-checkbox>
         <sonic-if .condition=${show} class="mt-4 block">
           <sonic-image
-            src="https://www.thebaron.info/assets/mail/concorde-evacuation.jpg"
+            src="img/concorde/plane_07.jpg"
+            alt="Crowd gathered around Concorde at night"
             rounded="md"
-            ratio="654/463"
+            ratio="3/2"
           ></sonic-image>
         </sonic-if>
       </div>

package/src/docs/getting-started/ai-agents.md

@@ -0,0 +1,76 @@
+# AI agents (skills & AGENTS.md)
+
+Concorde ships **skills**, **rules**, and a root **`AGENTS.md`** so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migrations).
+
+On a [starter](/docs/getting-started/installation) project, run `yarn ai:sync` after install. On an existing project, install Concorde first, then use `ai-init` below.
+
+## Dedicated commands
+
+| Context | Command |
+|---------|---------|
+| [create-concorde-ts-starter](https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter) project | `yarn ai:sync` |
+| Any consumer app (after `yarn add @supersoniks/concorde`) | `node node_modules/@supersoniks/concorde/scripts/ai-init.mjs` |
+| Concorde repo (contributors) | `yarn ai-init` |
+
+<sonic-code language="shell">
+  <template>
+# Starter (from project root)
+yarn ai:sync
+
+# Manual / existing project
+node node_modules/@supersoniks/concorde/scripts/ai-init.mjs
+  </template>
+</sonic-code>
+
+## Useful flags
+
+| Flag | Effect |
+|------|--------|
+| `--skip-agents` | Never write `AGENTS.md` (skills / rules only) |
+| `--merge-agents` | Opt-in: keep the project preamble and append / refresh the Concorde block |
+| `--force-agents` | Opt-in: **replace** the whole `AGENTS.md` (destructive) |
+| `--overlay <dir>` | Extra rules/skills + optional `AGENTS.concorde.md` for project-only Concorde agent notes |
+| `--cursor-only` | Install only `.cursor/skills` and `.cursor/rules` |
+| `--jetbrains-only` | Install only `.aiassistant/rules/` |
+
+## `AGENTS.md` policy (non-invasive)
+
+| Situation | Default |
+|-----------|---------|
+| No `AGENTS.md` | Create the Concorde guide |
+| File with `<!-- concorde-ai -->` | Refresh the managed zone only |
+| File **without** marker (project notes) | **Left untouched** — skills / rules are enough |
+| `--merge-agents` / `--force-agents` / `--skip-agents` | See flags above |
+
+```text
+[optional project preamble — short, project-only]
+<!-- concorde-ai -->
+<package ai/AGENTS.md>
+[--- + overlay AGENTS.concorde.md]
+```
+
+Everything **after** `<!-- concorde-ai -->` is replaced on each `ai-init` run (idempotent). Do not paste a full copy of the Concorde guide above the marker — put project-specific notes in `AGENTS.concorde.md` (overlay). If the preamble duplicates package `AGENTS.md`, `ai-init` slims or drops it and prints a warning. Legacy filenames `AGENTS.overlay.md` / `AGENTS.starter.md` are still accepted with a deprecation warning.
+
+## What gets installed
+
+| Path | Role |
+|------|------|
+| `AGENTS.md` | Created only if missing; existing project-owned files are left alone unless `--merge-agents` / `--force-agents` |
+| `.cursor/skills/concorde/` | Core Lit + DataProvider patterns |
+| `.cursor/skills/concorde-imports/` | Short `@supersoniks/concorde/…` import paths |
+| `.cursor/skills/concorde-scope/` | `serviceURL`, `formDataProvider`, API configuration |
+| `.cursor/skills/concorde-theme/` | `sonic-theme` and `--sc-*` tokens |
+| `.cursor/skills/concorde-menu/` | `sonic-menu` navigation |
+| `.cursor/skills/concorde-get-set-dp/` | `get` / `set` / `dp` and `DataProviderKey` migration |
+| `.cursor/rules/concorde.mdc` | Cursor rules (always-on patterns) |
+| `.aiassistant/rules/concorde.md` | JetBrains AI Assistant rules |
+
+## Workflow
+
+1. **Starter project:** [Installation](/docs/getting-started/installation) — `yarn ai:sync` is wired in the kit.
+2. **Existing project:** run **`ai-init`** after `yarn add @supersoniks/concorde`.
+3. Commit `.cursor/` and `.aiassistant/` (and `AGENTS.md` only if you opted in / it was created) if your team shares agent settings.
+4. Re-run the same command when you bump `@supersoniks/concorde` to refresh skills from `node_modules/@supersoniks/concorde/ai/`.
+5. In Cursor, skills under `.cursor/skills/` are picked up automatically; mention a skill in chat for focused tasks (e.g. migration → `concorde-get-set-dp`).
+
+Source files in the npm package: `node_modules/@supersoniks/concorde/ai/` (see also `ai/README.md` in the [Concorde repository](https://github.com/supersoniks/concorde)).

package/src/docs/getting-started/components.md

@@ -0,0 +1,5 @@
+# Components
+
+Every Concorde web component, grouped like the sidebar. Pick one to see its live demos, attributes and import path.
+
+<docs-components-index></docs-components-index>