@repobit/dex-system-design 0.24.3 → 0.24.5

package/src/components/bento-grid/bento-grid.css.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* === HEADER (eyebrow / title / description) === */
+  .bd-bentogrid-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    margin-bottom: var(--spacing-48);
+    max-width: 70ch;
+  }
+
+ .bd-bentogrid-eyebrow {
+    display: block;
+    margin: 0;
+    color: var(--color-blue-500);
+    --typography-body-regular-fontWeight: var(--typography-fontWeight-bold, 700);
+  }
+
+  .bd-bentogrid-title {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-bentogrid-description {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-600);
+  }
+
+  /* === GRID === */
+  .bd-bentogrid-track {
+    display: grid;
+    grid-template-columns: repeat(var(--bd-bento-total-units, 24), minmax(0, 1fr));
+    gap: var(--bd-bento-gap, 24px);
+    width: 100%;
+  }
+
+  ::slotted(bd-bento-item) {
+    grid-column: span var(--bd-bento-span, 24);
+    min-width: 0;
+  }
+
+  /* featured items always take the full row width */
+  ::slotted(bd-bento-item[priority="featured"]) {
+    grid-column: span var(--bd-bento-total-units, 24) !important;
+  }
+`;

package/src/components/bento-grid/bento-grid.js

@@ -0,0 +1,186 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import bentoGridCSS from "./bento-grid.css.js";
+import "./bento-item.js";
+
+const BREAKPOINT_WIDTHS = { xl: 1280, lg: 960, md: 640 };
+const DEFAULT_GAP = { xl: 24, lg: 24, md: 20, sm: 16 };
+const TOTAL_UNITS = 24; // fine-grained grid columns used purely for weighted spans
+
+function resolveBreakpoint(width, maxColumns, minCardWidth) {
+  const bp =
+    width >= BREAKPOINT_WIDTHS.xl
+      ? "xl" :
+      width >= BREAKPOINT_WIDTHS.lg
+        ? "lg" :
+        width >= BREAKPOINT_WIDTHS.md ? "md" : "sm";
+
+  let columns = bp === "sm" ? 1 : bp === "md" ? 2 : Math.max(1, Math.min(2, maxColumns));
+  const gap = DEFAULT_GAP[bp];
+
+  while (columns > 1) {
+    const cardWidth = (width - gap * (columns - 1)) / columns;
+    if (cardWidth >= minCardWidth) break;
+    columns -= 1;
+  }
+
+  return { bp, columns, gap };
+}
+
+class BentoGrid extends LitElement {
+  static properties = {
+    eyebrow     : { type: String },
+    title       : { type: String },
+    description : { type: String },
+    maxColumns  : { type: Number, attribute: "max-columns" },
+    minCardWidth: { type: Number, attribute: "min-card-width" },
+    // Fixed wide/narrow ratio applied to every pair, e.g. 0.7 = 70/30.
+    wideShare   : { type: Number, attribute: "wide-share" },
+    _columns    : { state: true },
+    _gap        : { state: true }
+  };
+
+  static styles = [tokens, bentoGridCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.maxColumns = 2;
+    this.minCardWidth = 260;
+    this.wideShare = 0.7;
+    this._columns = 2;
+    this._gap = 24;
+    this._resizeObserver = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this._relayout());
+    this._resizeObserver.observe(this);
+    this._relayout();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+
+  get _items() {
+    return [...this.children].filter((el) => el.tagName === "BD-BENTO-ITEM");
+  }
+
+  // Assigns each item a `grid-column: span N` out of TOTAL_UNITS invisible
+  // grid columns, instead of a flex-basis percentage. CSS Grid subtracts
+  // `gap` from the available track space BEFORE distributing column widths,
+  // so two items whose spans sum to TOTAL_UNITS always fit on the same row
+  // with the gap properly accounted for.
+  //
+  // Rows are formed by walking items in DOM order and consuming exactly 2
+  // "slots" per row UNLESS an item is priority="featured", in which case it
+  // consumes the whole row by itself (span = TOTAL_UNITS) and does not pair
+  // with anything.
+  //
+  // Within a pair, the wide/narrow side follows a repeating 3-pair cycle,
+  // NOT content length: pair 0 (rows 1-2) is wide-then-narrow, pairs 1 and 2
+  // (rows 3-4, 5-6) are narrow-then-wide, then the cycle repeats.
+  _applyWeights() {
+    const items = this._items;
+    let i = 0;
+    let pairIndex = 0; // counts pairs only (featured/solo rows don't affect the pattern)
+
+    const wideSpan = Math.round(this.wideShare * TOTAL_UNITS);
+    const narrowSpan = TOTAL_UNITS - wideSpan;
+
+    while (i < items.length) {
+      const current = items[i];
+
+      if (current.getAttribute("priority") === "featured") {
+        current.style.setProperty("--bd-bento-span", String(TOTAL_UNITS));
+        i += 1;
+        continue;
+      }
+
+      const next = items[i + 1];
+      const nextIsFeatured = next && next.getAttribute("priority") === "featured";
+
+      if (!next || nextIsFeatured) {
+        // odd one out (last item, or blocked by a featured item next) — full width
+        current.style.setProperty("--bd-bento-span", String(TOTAL_UNITS));
+        i += 1;
+        continue;
+      }
+
+      const firstIsWide = pairIndex % 3 === 0;
+
+      current.style.setProperty("--bd-bento-span", String(firstIsWide ? wideSpan : narrowSpan));
+      next.style.setProperty("--bd-bento-span", String(firstIsWide ? narrowSpan : wideSpan));
+
+      i += 2;
+      pairIndex += 1;
+    }
+  }
+
+  _relayout() {
+    const width = this.clientWidth || 960;
+    const { columns, gap } = resolveBreakpoint(width, this.maxColumns, this.minCardWidth);
+    this._columns = columns;
+    this._gap = gap;
+    this.style.setProperty("--bd-bento-gap", `${gap}px`);
+    this.style.setProperty("--bd-bento-total-units", String(TOTAL_UNITS));
+
+    if (columns <= 1) {
+      this._items.forEach((item) => item.style.setProperty("--bd-bento-span", String(TOTAL_UNITS)));
+      return;
+    }
+
+    this._applyWeights();
+  }
+
+  _onSlotChange() {
+    this._relayout();
+  }
+
+  render() {
+    return html`
+      ${this.eyebrow || this.title || this.description
+        ? html`
+            <div class="bd-bentogrid-header">
+              ${this.eyebrow
+                ? html`
+                    <bd-p kind="regular" class="bd-bentogrid-eyebrow">
+                      <slot name="eyebrow">${this.eyebrow}</slot>
+                    </bd-p>
+                  `
+                : nothing}
+
+              ${this.title
+                ? html`
+                    <bd-h as="h2" class="bd-bentogrid-title">
+                      <slot name="title">${this.title}</slot>
+                    </bd-h>
+                  `
+                : nothing}
+
+              ${this.description
+                ? html`
+                    <bd-p kind="regular" class="bd-bentogrid-description">
+                      <slot name="description">${this.description}</slot>
+                    </bd-p>
+                  `
+                : nothing}
+            </div>
+          `
+        : nothing}
+
+      <div class="bd-bentogrid-track" role="list">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-bento-grid", BentoGrid);

package/src/components/bento-grid/bento-grid.stories.js

@@ -0,0 +1,440 @@
+import { html } from "lit";
+import "../icons/analysis-icon.js";
+import "../icons/arrow-up-icon.js";
+import "../icons/family-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/individual-icon.js";
+import "../icons/machine-learning-icon.js";
+import "./bento-grid.js";
+import "./bento-item.js";
+export default {
+  title     : "Components/Bento Grid",
+  component : "bd-bento-grid",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**BentoGrid** is a fully automatic responsive grid of \`bd-bento-item\` cards, matching
+the visual language of \`bd-card-item\` as a standalone component. It can optionally
+render its own header block (eyebrow + title + description) above the cards, so the
+whole "Protection" section — heading and grid — is a single component.
+
+Zero configuration needed for the grid itself:
+- Measures its own width and resolves 1 or 2 columns automatically (2 max, never more).
+- Pairs items two at a time in DOM order; within each pair, the wide/narrow side
+  follows a repeating 3-pair cycle (never a flat 50/50).
+- \`priority="featured"\` always takes the full row width by itself and never pairs.
+- Recalculates automatically on resize and whenever items are added/removed.
+
+### Header block
+
+\`eyebrow\`, \`title\`, and \`description\` are all optional and independent — set any
+combination of them (or none) and only the ones with content render. Each also has a
+matching named slot (\`eyebrow\`, \`title\`, \`description\`) if you need markup instead
+of plain text.
+
+### Usage
+\`\`\`html
+<bd-bento-grid
+  eyebrow="Protection"
+  title="What does AI Guardian protect against?"
+  description="AI Guardian watches how an AI agent behaves and secures six of the highest-risk areas in agentic workflows. Each protection returns a verdict in real time."
+>
+  <bd-bento-item title="MCP tool protection">...</bd-bento-item>
+  <bd-bento-item title="Skill vetting">...</bd-bento-item>
+</bd-bento-grid>
+\`\`\`
+
+### bd-bento-grid Attributes
+| Attribute          | Type   | Default | Description                                                    |
+|----------------------|--------|---------|----------------------------------------------------------------------|
+| \`eyebrow\`           | String | \`""\`    | Small blue label above the title                                   |
+| \`title\`             | String | \`""\`    | Heading above the grid                                              |
+| \`description\`       | String | \`""\`    | Paragraph under the title                                          |
+| \`max-columns\`       | Number | \`2\`     | Hard cap on columns                                                |
+| \`min-card-width\`    | Number | \`260\`   | Minimum px before the grid drops to 1 column                       |
+| \`wide-share\`        | Number | \`0.7\`   | Wide/narrow ratio applied within each pair (0.7 = 70/30)            |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|--------------------------------------------------------------|
+| \`eyebrow\`       | Overrides the \`eyebrow\` attribute if content is provided     |
+| \`title\`         | Overrides the \`title\` attribute if content is provided       |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| (default)       | The \`bd-bento-item\` cards themselves                          |
+
+### bd-bento-item Attributes
+| Attribute      | Type   | Default      | Description                                    |
+|-----------------|--------|---------------|--------------------------------------------------|
+| \`title\`         | String | \`""\`          | Card title                                       |
+| \`body\`          | String | \`""\`          | Card description (or slot a bd-p)                |
+| \`icon\`          | String | \`""\`          | Icon URL (or use the icon slot)                  |
+| \`priority\`      | String | \`"standard"\`  | \`"standard"\` or \`"featured"\` (featured = always full width, never paired) |
+        `
+      }
+    }
+  }
+};
+
+const icons = [
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`,
+  html`<bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>`,
+  html`<bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>`
+];
+
+const titles = [
+  "AI Protection", "Multi-layer Security", "VPN Included", "Parental Controls",
+  "Identity Protection", "Password Manager"
+];
+
+const descriptions = [
+  "Powered by machine learning and behavioral analysis.",
+  "Multiple independent protection layers stop any attack.",
+  "Unlimited encrypted VPN traffic for all your devices.",
+  "Advanced controls to protect your children online.",
+  "Goes beyond credit monitoring to protect your identity.",
+  "Store and autofill passwords securely across all devices."
+];
+
+const makeItems = (count) => Array.from({ length: count }, (_, i) => html`
+  <bd-bento-item title="${titles[i % titles.length]}">
+    ${icons[i % icons.length]}
+    <bd-p>${descriptions[i % descriptions.length]}</bd-p>
+  </bd-bento-item>
+`);
+
+
+// ─── 1. Default — 4 items, zero config ─────────────────────────────────────
+
+export const Default = {
+  name  : "1. Default (4 Items, Zero Config)",
+  render: () => html`
+    <bd-bento-grid>
+      ${makeItems(4)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "No attributes — columns and the wide/narrow split are computed automatically, no header block rendered since eyebrow/title/description are all empty."
+      }
+    }
+  }
+};
+
+
+// ─── 2. With header — matches the reference exactly ────────────────────────
+
+export const WithHeader = {
+  name  : "2. With Header (Matches Reference)",
+  render: () => html`
+    <bd-bento-grid
+      eyebrow="Protection"
+      title="What does AI Guardian protect against?"
+      description="AI Guardian watches how an AI agent behaves and secures six of the highest-risk areas in agentic workflows. Each protection returns a verdict in real time."
+    >
+      <bd-bento-item title="MCP tool protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Detects and blocks malicious MCP tools (tool poisoning) before an agent can call them.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Skill vetting">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Scans and validates agent skills before they run, so unreviewed skills don't execute silently.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Prompt injection detection">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Catches attempts to hijack an agent through crafted inputs and hidden instructions.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Tool-call monitoring">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Watches every tool an agent invokes in real time, building an auditable record of actions.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Credential leak detection">
+        <bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>
+        <bd-p>Detects exposure of secrets such as API keys before they leave the machine.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Sensitive file protection">
+        <bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>
+        <bd-p>Blocks unauthorised access to sensitive files such as SSH keys and system credentials.</bd-p>
+      </bd-bento-item>
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "eyebrow + title + description rendered as the grid's own header block, matching the reference screenshot exactly."
+      }
+    }
+  }
+};
+
+
+// ─── 3. Six items, matches the reference: featured + 2 pairs ──────────────
+
+export const SixItems = {
+  name  : "3. Six Items (Featured + Pairs)",
+  render: () => html`
+    <bd-bento-grid>
+      <bd-bento-item title="AI Guardian" priority="featured">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>A unified security layer for autonomous AI agents — inspects tool calls, file access, prompts, and skills in real time.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="VPN Included">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Parental Controls">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Advanced controls to protect your children online.</bd-p>
+      </bd-bento-item>
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "priority=\"featured\" forces AI Guardian to take the full row width and never pair. The remaining 4 items then pair as (AI Protection, Multi-layer Security) and (VPN Included, Parental Controls)."
+      }
+    }
+  }
+};
+
+
+// ─── 4. Without featured — plain 6-item pairing ────────────────────────────
+
+export const SixItemsNoFeatured = {
+  name  : "4. Six Items — No Featured (All Paired)",
+  render: () => html`
+    <bd-bento-grid>
+      ${makeItems(6)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "All 6 items are standard priority — they pair up as 3 rows of 2, each with an automatic wide/narrow split."
+      }
+    }
+  }
+};
+
+
+// ─── 5. Single column (narrow container) ───────────────────────────────────
+
+export const SingleColumn = {
+  name  : "5. Single Column (Narrow Container)",
+  render: () => html`
+    <div style="max-width: 360px;">
+      <bd-bento-grid eyebrow="Protection" title="Compact view">
+        ${makeItems(3)}
+      </bd-bento-grid>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Wrapped in a 360px-wide container — collapses to a single column automatically, header block wraps naturally too."
+      }
+    }
+  }
+};
+
+
+// ─── 6. Odd item count ───────────────────────────────────────────────────────
+
+export const OddItemCount = {
+  name  : "6. Odd Item Count (Uneven Last Row)",
+  render: () => html`
+    <bd-bento-grid>
+      ${makeItems(5)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "5 items — pairs as (1,2)(3,4), with item 5 alone on the last row at full width."
+      }
+    }
+  }
+};
+
+
+// ─── 7. With CTA button ──────────────────────────────────────────────────────
+
+export const WithCTA = {
+  name  : "7. With CTA Button",
+  render: () => html`
+    <bd-bento-grid>
+      <bd-bento-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+        <bd-button-link href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-bento-item>
+      <bd-bento-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+        <bd-button-link href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-bento-item>
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Uses the default slot to append a bd-button-link after the body paragraph."
+      }
+    }
+  }
+};
+
+
+// ─── 8. Text-only cards (no icons) ─────────────────────────────────────────
+
+export const TextOnly = {
+  name  : "8. Text-Only Cards (No Icons)",
+  render: () => html`
+    <bd-bento-grid>
+      ${Array.from({ length: 4 }, (_, i) => html`
+        <bd-bento-item title="${titles[i]}">
+          <bd-p>${descriptions[i]}</bd-p>
+        </bd-bento-item>
+      `)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "No icon slot content — the icon wrapper collapses to its minimum reserved height."
+      }
+    }
+  }
+};
+
+
+// ─── 9. Nine items ───────────────────────────────────────────────────────────
+
+export const NineItems = {
+  name  : "9. Nine Items",
+  render: () => html`
+    <bd-bento-grid>
+      ${makeItems(9)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "9 items — pairs as (1,2)(3,4)(5,6)(7,8), with item 9 alone at full width on the last row."
+      }
+    }
+  }
+};
+
+
+// ─── 10. Mixed short/long text — shows the automatic asymmetry clearly ────
+
+export const MixedLengths = {
+  name  : "10. Mixed Short/Long Text (Asymmetry Demo)",
+  render: () => html`
+    <bd-bento-grid>
+      <bd-bento-item title="Short">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Brief.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="A much longer title with more to say">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>This card has considerably more text in its description, so it automatically claims more horizontal space in this row than its shorter neighbor.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="Roughly equal length here">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>And this one also has a moderate amount of descriptive text to compare against.</bd-p>
+      </bd-bento-item>
+      <bd-bento-item title="About the same as its neighbor">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Similar text length on both sides of this row, so the minimum forced asymmetry kicks in instead.</bd-p>
+      </bd-bento-item>
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "First row: a clearly longer card claims more width. Second row: near-equal text still produces the minimum-forced split instead of a flat 50/50."
+      }
+    }
+  }
+};
+
+// ─── 11. Twenty-seven items (stress test) ──────────────────────────────────
+
+const bigTitleSet = [
+  "AI Protection", "Multi-layer Security", "VPN Included", "Parental Controls",
+  "Identity Protection", "Password Manager", "Anti-tracker", "Webcam Protection",
+  "Privacy Firewall", "Dark Web Monitor", "Ransomware Shield", "Safe Files",
+  "Wi-Fi Security Advisor", "Anti-theft", "Vulnerability Assessment",
+  "Microphone Monitor", "App Anomaly Detection", "Payment Protection",
+  "Social Network Protection", "Device Optimizer", "Scam Alert",
+  "Digital Identity Protection", "Data Breach Monitor", "Autopilot",
+  "Battery Saver", "OneClick Optimizer", "Rescue Environment"
+];
+
+const bigDescriptionSet = [
+  "Powered by machine learning and behavioral analysis.",
+  "Multiple independent protection layers stop any attack.",
+  "Unlimited encrypted VPN traffic for all your devices.",
+  "Advanced controls to protect your children online.",
+  "Goes beyond credit monitoring to protect your identity.",
+  "Store and autofill passwords securely across all devices.",
+  "Block trackers and keep your browsing activity private.",
+  "Prevent unauthorized access to your webcam.",
+  "Advanced firewall protection for your network.",
+  "Get instant alerts if your data appears on the dark web.",
+  "Blocks encryption attempts and restores affected files automatically.",
+  "Keeps important files safe from unauthorized changes.",
+  "Analyzes your wireless network for security weaknesses.",
+  "Locate, lock, or wipe a lost or stolen device remotely.",
+  "Scans installed apps and the OS for missing patches.",
+  "Alerts you when an app tries to access your microphone.",
+  "Detects unusual app behavior that could signal malware.",
+  "Extra checks for online banking and shopping sessions.",
+  "Flags suspicious links shared on social platforms.",
+  "Cleans up junk files and speeds up your system.",
+  "Recognizes scam attempts across calls, texts, and email.",
+  "Monitors the web for exposure of your personal data.",
+  "Automatically adjusts settings for the best experience.",
+  "Extends battery life during gaming or streaming.",
+  "Runs a full system tune-up in a single click.",
+  "A recovery environment for cleaning severe infections."
+];
+
+const makeBigItems = (count) => Array.from({ length: count }, (_, i) => html`
+  <bd-bento-item title="${bigTitleSet[i % bigTitleSet.length]}">
+    ${icons[i % icons.length]}
+    <bd-p>${bigDescriptionSet[i % bigDescriptionSet.length]}</bd-p>
+  </bd-bento-item>
+`);
+
+export const TwentySevenItems = {
+  name  : "11. Twenty-Seven Items (Stress Test)",
+  render: () => html`
+    <bd-bento-grid eyebrow="Protection" title="All 27 protections">
+      ${makeBigItems(27)}
+    </bd-bento-grid>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "27 items with a header block on top — pairs as 13 rows of 2 with automatic wide/narrow splits, plus a single full-width card on the final (27th, odd) row."
+      }
+    }
+  }
+};