@repobit/dex-system-design 0.24.4 → 0.24.6

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.5...@repobit/dex-system-design@0.24.6) (2026-09-04)
+
+### Bug Fixes
+
+* **DEX-1014:** new review component
+* **DEX-1014:** new review component
+
+
+## [0.24.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.4...@repobit/dex-system-design@0.24.5) (2026-09-01)
+
+### Bug Fixes
+
+* **DEX-1014:** bitdefender AI components and new adjustments for components
+
+
 ## [0.24.4](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.3...@repobit/dex-system-design@0.24.4) (2026-09-01)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.20",
-    "@repobit/dex-store-elements": "2.0.25",
+    "@repobit/dex-store": "1.6.22",
+    "@repobit/dex-store-elements": "2.0.27",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "ce79d0c8b5feaab29ecbb54359d1035221a854b9"
+  "gitHead": "fd22ce80b8bee483acc6ac7739bdd940df5a64a5"
 }

package/src/components/accordion/accordion.css.js

@@ -195,6 +195,46 @@ export const accordionItem = css`
       width: 100%;
     }
   }
+
+  /* === CHEVRON VARIANT (text + arrow icon only, no visible border/pill/background) === */
+  .header--chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    gap: var(--spacing-8);
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: none;
+    margin-bottom: var(--spacing-24);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .header--chevron .title-badge-wrapper {
+    flex: 0 1 auto;
+  }
+
+  .header--chevron .title {
+    color: var(--color-blue-600);
+    white-space: nowrap;
+  }
+
+  .header--chevron:hover .title {
+    text-decoration: underline;
+  }
+
+  .toggle--chevron {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    margin-top: 0;
+  }
+
+  .content--chevron {
+    padding: 0;
+  }
 `;
 
 export const accordionSection = css`

package/src/components/accordion/accordion.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
+import "../icons/arrow-down-icon.js";
+import "../icons/arrow-up-icon.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
 import "../paragraph/paragraph.js";
@@ -12,6 +14,7 @@ export class BdAccordionItem extends LitElement {
   static properties = {
     open    : { type: Boolean, reflect: true },
     title   : { type: String },
+    chevron : { type: Boolean, reflect: true }, // text + arrow icon variant
     _panelId: { type: String, state: true }
   };
 
@@ -19,6 +22,7 @@ export class BdAccordionItem extends LitElement {
     super();
     this.open     = false;
     this.title    = "";
+    this.chevron  = false;
     this._panelId = `acc-panel-${Math.random().toString(36)
       .slice(2, 11)}`;
   }
@@ -46,6 +50,33 @@ export class BdAccordionItem extends LitElement {
   render() {
     const badgeEl = this.querySelector("[slot='badge']");
 
+    if (this.chevron) {
+      return html`
+        <button
+          type="button"
+          class="header header--chevron"
+          aria-expanded="${this.open}"
+          aria-controls="${this._panelId}"
+          @click=${this.toggle}
+          @focusin=${this._onTriggerFocusIn}
+          @focusout=${this._onTriggerFocusOut}
+        >
+          <span class="title-badge-wrapper">
+            <span class="title">${this.title}</span>
+            ${badgeEl ? badgeEl.cloneNode(true) : ""}
+          </span>
+          <span class="toggle toggle--chevron" aria-hidden="true">
+            ${this.open
+              ? html`<bd-arrow-up-icon size="16" color="#006DFF"></bd-arrow-up-icon>`
+              : html`<bd-arrow-down-icon size="16" color="#006DFF"></bd-arrow-down-icon>`}
+          </span>
+        </button>
+        <div id="${this._panelId}" class="content content--chevron" ?hidden=${!this.open}>
+          <slot></slot>
+        </div>
+      `;
+    }
+
     return html`
       <button
         type="button"

package/src/components/accordion/accordion.stories.js

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import "../compatibility-table/compatibility-table.js";
 import "./accordion.js";
 
 export default {
@@ -22,6 +23,12 @@ Two Lit web components for building accordion sections.
 </bd-accordion-section>
 \`\`\`
 
+\`bd-accordion-item\` also supports a \`chevron\` variant — plain blue text with an arrow
+icon (\`bd-arrow-down-icon\`/\`bd-arrow-up-icon\`) on the right, no border or
+background — instead of the default left-side plus/minus icon. Combine it with
+\`bd-compatibility-table\` (\`variant="risk"\`) to build a collapsible risk-mapping
+table, as shown below.
+
 ### Attributes
 
 #### \`bd-accordion-section\`
@@ -34,10 +41,11 @@ Two Lit web components for building accordion sections.
 | \`guide-href\`  | String | \`#\`       | URL for the user guide link                                                 |
 
 #### \`bd-accordion-item\`
-| Attribute | Type    | Default | Description                          |
-|-----------|---------|---------|--------------------------------------|
-| \`title\`   | String  | —       | Trigger label                        |
-| \`open\`    | Boolean | \`false\`| Whether the panel is expanded        |
+| Attribute | Type    | Default | Description                                                        |
+|-----------|---------|---------|-------------------------------------------------------------------------|
+| \`title\`   | String  | —       | Trigger label                                                        |
+| \`open\`    | Boolean | \`false\`| Whether the panel is expanded                                        |
+| \`chevron\` | Boolean | \`false\`| Renders the plain text + arrow-icon style instead of the default left plus/minus icon |
         `
       }
     }
@@ -240,4 +248,139 @@ export const ManyItems = {
       </bd-accordion-item>
     </bd-accordion-section>
   `
+};
+
+
+// ─── Chevron variant — risk mapping (matches reference design) ────────────────
+
+export const RiskMappingAccordion = {
+  name  : "Chevron variant — Risk mapping table",
+  render: () => html`
+    <div style="max-width: 900px;">
+      <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">Coverage against agentic AI risk categories</bd-h>
+      <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        How AI Guardian maps to the risk categories the industry is standardising on for agentic applications.
+      </bd-p>
+
+      <bd-accordion-item chevron title="Show the full mapping (6 categories)">
+        <bd-compatibility-table
+          variant="risk"
+          .rows=${[
+            { category: "Prompt injection", coverage: "Inspects agent inputs and actions; returns allowed, flagged or blocked" },
+            { category: "Tool and MCP misuse", coverage: "Detects and blocks malicious or tampered MCP tools before invocation" },
+            { category: "Excessive or unscoped permissions", coverage: "Policy baseline defines what agents may do with tools, files and actions" },
+            { category: "Sensitive data exposure", coverage: "Detects credential and secret exposure before it leaves the machine" },
+            { category: "Unvetted extensions and skills", coverage: "Scans and validates skills before they run" },
+            { category: "Unmonitored agent activity", coverage: "Real-time tool-call monitoring with an auditable record" }
+          ]}
+        ></bd-compatibility-table>
+      </bd-accordion-item>
+
+      <bd-p kind="small" style="color: var(--color-neutral-500); margin-top: 16px;">
+        Category naming follows OWASP Top 10 for Agentic Applications (2026).
+      </bd-p>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The chevron variant of bd-accordion-item (plain blue text, bd-arrow-down-icon/bd-arrow-up-icon on the right, no border) toggling a bd-compatibility-table in risk variant (2 columns: Risk category / AI Guardian coverage)."
+      }
+    }
+  }
+};
+
+
+// ─── Chevron variant — collapsed state ─────────────────────────────────────────
+
+export const ChevronCollapsed = {
+  name  : "Chevron variant — collapsed",
+  render: () => html`
+    <bd-accordion-item chevron title="Show the full mapping (6 categories)">
+      <bd-compatibility-table
+        variant="risk"
+        .rows=${[
+          { category: "Prompt injection", coverage: "Inspects agent inputs and actions; returns allowed, flagged or blocked" },
+          { category: "Tool and MCP misuse", coverage: "Detects and blocks malicious or tampered MCP tools before invocation" }
+        ]}
+      ></bd-compatibility-table>
+    </bd-accordion-item>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Starts collapsed — click the text to expand and see the icon switch from bd-arrow-down-icon to bd-arrow-up-icon."
+      }
+    }
+  }
+};
+
+
+// ─── Default plus/minus vs chevron, side by side ───────────────────────────────
+
+export const DefaultVsChevron = {
+  name  : "Default plus/minus vs chevron",
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px;">
+      <div>
+        <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">Default (plus/minus, left icon)</bd-p>
+        <bd-accordion-item title="Default accordion item">
+          <p>Regular accordion content, unaffected by the new chevron variant.</p>
+        </bd-accordion-item>
+      </div>
+
+      <div>
+        <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">Chevron (plain text, right arrow icon, no border)</bd-p>
+        <bd-accordion-item chevron title="Chevron accordion item">
+          <p>Same underlying component, opt-in chevron styling via the chevron attribute.</p>
+        </bd-accordion-item>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The two styles side by side, demonstrating that the chevron attribute is purely additive — existing default accordion items are completely unaffected."
+      }
+    }
+  }
+};
+// ─── Chevron variant — operational details (light table variant) ───────────
+
+export const OperationalDetailsAccordion = {
+  name  : "Chevron variant — Operational details (light table)",
+  render: () => html`
+    <div style="max-width: 900px;">
+      <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">How it runs</bd-h>
+      <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        AI Guardian installs from a signed macOS installer and runs as a background service; the rows below list how it installs, where analysis happens, and what the BETA costs.
+      </bd-p>
+
+      <bd-accordion-item chevron title="Show operational details (11 rows)">
+        <bd-compatibility-table
+          variant="light"
+          .rows=${[
+            { label: "Runs as", value: "Background service on the endpoint" },
+            { label: "Install method", value: "Download the macOS installer (.dmg)" },
+            { label: "System permissions required", value: "Granted during install, when the Bitdefender agent asks" },
+            { label: "Installer", value: "Signed with a Bitdefender Apple Developer ID and recognised by macOS" },
+            { label: "Agent version checks", value: "Handled by the installer" },
+            { label: "Where analysis happens", value: "On-device, with some checks (such as URL reputation) using Bitdefender cloud services" },
+            { label: "Prompt data", value: "Analysed on-device — prompts never leave your Mac" },
+            { label: "Offline operation", value: "Some features" },
+            { label: "Performance overhead", value: "Designed to be minimal; not yet measured" },
+            { label: "Availability", value: "Open BETA, free download" },
+            { label: "Price during BETA", value: "Free" }
+          ]}
+        ></bd-compatibility-table>
+      </bd-accordion-item>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Same chevron bd-accordion-item pattern as the risk mapping example, this time revealing a bd-compatibility-table in the new light variant — no outer border/background, just a 2-column grid of label/value rows with thin dividers. Matches the \"How it runs\" reference exactly."
+      }
+    }
+  }
 };

package/src/components/agent-endpoints/agent-endpoints.css.js

@@ -0,0 +1,92 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-agentendpoints-wrapper {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-agentendpoints-eyebrow {
+    display: block;
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-blue-500);
+  }
+
+  .bd-agentendpoints-title {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-agentendpoints-description {
+    display: block;
+    margin: 0 0 var(--spacing-24);
+    color: var(--color-neutral-600);
+    max-width: 70ch;
+  }
+
+  .bd-agentendpoints-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-12);
+    margin-bottom: var(--spacing-12);
+  }
+
+  .bd-agentendpoints-row:last-of-type {
+    margin-bottom: 0;
+  }
+
+  /* === button--outline-white ===
+     White pill button with a thin gray border, rounded corners — used both
+     for the /endpoint links (with a leading arrow, monospace label) and the
+     "Ask <assistant>" links (with a leading brand icon). Reusable class,
+     not scoped to this component only. */
+  .button--outline-white {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-10, 10px) var(--spacing-16);
+    background: var(--color-neutral-0, #fff);
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    border-radius: var(--radius-full, 999px);
+    color: var(--color-neutral-800);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-medium, 500);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: border-color 0.2s ease, background 0.2s ease;
+  }
+
+  .button--outline-white:hover {
+    border-color: var(--color-blue-300, #93c5fd);
+    background: var(--color-blue-50, #eef4ff);
+  }
+
+  .bd-agentendpoints-arrow {
+    color: var(--color-neutral-400, #9ca3af);
+  }
+
+  .bd-agentendpoints-mono {
+    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--color-neutral-700);
+  }
+
+  .bd-agentendpoints-icon {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 599px) {
+    .bd-agentendpoints-wrapper {
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+  }
+`;

package/src/components/agent-endpoints/agent-endpoints.js

@@ -0,0 +1,86 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import agentEndpointsCSS from "./agent-endpoints.css.js";
+
+class AgentEndpoints extends LitElement {
+  static properties = {
+    eyebrow    : { type: String },
+    title      : { type: String },
+    description: { type: String },
+    endpoints  : { type: Array }, // [{ label: String, href: String }]
+    assistants : { type: Array }  // [{ label: String, href: String, icon: String }]
+  };
+
+  static styles = [tokens, agentEndpointsCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.endpoints = [];
+    this.assistants = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-agentendpoints-wrapper">
+        ${this.eyebrow
+          ? html`<bd-p kind="regular" font-weight="var(--typography-fontWeight-semibold, 600)" class="bd-agentendpoints-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
+          : nothing}
+
+        ${this.title
+          ? html`<bd-h as="h2" class="bd-agentendpoints-title"><slot name="title">${this.title}</slot></bd-h>`
+          : nothing}
+
+        ${this.description
+          ? html`<bd-p kind="regular" class="bd-agentendpoints-description"><slot name="description">${this.description}</slot></bd-p>`
+          : nothing}
+
+        ${this.endpoints && this.endpoints.length
+          ? html`
+              <div class="bd-agentendpoints-row">
+                ${this.endpoints.map(
+                  (ep) => html`
+                    <a class="button--outline-white" href=${ep.href} target="_blank" rel="noopener noreferrer">
+                      <span class="bd-agentendpoints-arrow" aria-hidden="true">→</span>
+                      <span class="bd-agentendpoints-mono">${ep.label}</span>
+                    </a>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+
+        ${this.assistants && this.assistants.length
+          ? html`
+              <div class="bd-agentendpoints-row">
+                ${this.assistants.map(
+                  (a) => html`
+    <a
+      class="button--outline-white"
+      href=${a.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="${a.label} (opens in new tab)"
+    >
+      ${a.icon
+        ? html`<img src=${a.icon} alt="" class="bd-agentendpoints-icon" width="20" height="20" loading="lazy" />`
+        : nothing}
+      <span>${a.label}</span>
+    </a>
+  `
+                )}
+              </div>
+            `
+          : nothing}
+
+        <slot name="rows"></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-agent-endpoints", AgentEndpoints);

package/src/components/agent-endpoints/agent-endpoints.stories.js

@@ -0,0 +1,148 @@
+import { html } from "lit";
+import "./agent-endpoints.js";
+
+export default {
+  title     : "Components/Agent Endpoints",
+  component : "bd-agent-endpoints",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**AgentEndpoints** shows an eyebrow/title/description block followed by two rows of
+pill-shaped links: machine-readable endpoint URLs (\`/llms.txt\`, \`/sitemap.xml\`,
+etc.) and "Ask <assistant>" quick links (ChatGPT, Perplexity, Gemini, Copilot).
+
+Both rows share the same \`button--outline-white\` class — a reusable white pill with
+a thin border — so the visual style stays consistent across any future use of that
+class elsewhere.
+
+### Usage
+\`\`\`html
+<bd-agent-endpoints
+  eyebrow="For AI agents and assistants"
+  title="Machine-readable endpoints"
+  description="This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:"
+  .endpoints=\${[
+    { label: "/llms.txt", href: "/llms.txt" },
+    { label: "/llms-full.txt", href: "/llms-full.txt" },
+    { label: "/index.md", href: "/index.md" },
+    { label: "/sitemap.xml", href: "/sitemap.xml" },
+    { label: "/robots.txt", href: "/robots.txt" }
+  ]}
+  .assistants=\${[
+    { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=...", icon: "/openai-brands-solid-full.svg" },
+    { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=...", icon: "/perplexity-icon-dark.svg" }
+  ]}
+></bd-agent-endpoints>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                             |
+|------------------|--------|---------|--------------------------------------------------------------|
+| \`eyebrow\`        | String | \`""\`    | Small blue label above the title                            |
+| \`title\`          | String | \`""\`    | Heading (or the \`title\` slot)                               |
+| \`description\`    | String | \`""\`    | Paragraph under the title (or the \`description\` slot)      |
+| \`endpoints\`      | Array  | \`[]\`    | \`{ label, href }\` — rendered with a leading arrow, monospace label |
+| \`assistants\`     | Array  | \`[]\`    | \`{ label, href, icon }\` — rendered with a leading icon image |
+
+### Slots
+| Slot            | Description                                            |
+|-------------------|------------------------------------------------------------|
+| \`eyebrow\`        | Overrides the \`eyebrow\` attribute                          |
+| \`title\`          | Overrides the \`title\` attribute                            |
+| \`description\`    | Overrides the \`description\` attribute                      |
+| \`rows\`           | Extra freeform pill rows appended after the two generated ones |
+        `
+      }
+    }
+  }
+};
+
+const render = (args) => html`
+  <bd-agent-endpoints
+    eyebrow=${args.eyebrow}
+    title=${args.title}
+    description=${args.description}
+    .endpoints=${args.endpoints}
+    .assistants=${args.assistants}
+  ></bd-agent-endpoints>
+`;
+
+export const Default = {
+  name: "Default — Machine-Readable Endpoints",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/llms-full.txt", href: "/llms-full.txt" },
+      { label: "/index.md", href: "/index.md" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" },
+      { label: "/robots.txt", href: "/robots.txt" }
+    ],
+    assistants: [
+      { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/openai-brands-solid-full.svg" },
+      { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/perplexity-icon-dark.svg" },
+      { label: "Ask Gemini", href: "https://gemini.google.com/app?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/Google_Gemini_icon_2025.svg" },
+      { label: "Ask Copilot", href: "https://copilot.microsoft.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/microsoft-copilot.svg" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: eyebrow, title, description, a row of 5 endpoint pills, and a row of 4 assistant pills, all using button--outline-white."
+      }
+    }
+  }
+};
+
+export const EndpointsOnly = {
+  name: "Endpoints Only",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" }
+    ],
+    assistants: []
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "assistants left empty — only the endpoints row renders."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "This site is built to be read by AI assistants, browsers, and agents.",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" },
+      { label: "/robots.txt", href: "/robots.txt" }
+    ],
+    assistants: [
+      { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=test", icon: "/openai-brands-solid-full.svg" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive — use the Controls panel to edit eyebrow, title, description, and both pill arrays live."
+      }
+    }
+  }
+};