@repobit/dex-system-design 0.24.18 → 0.24.19

package/src/components/header/header-code.stories.js

@@ -14,53 +14,51 @@ export default {
         component: `
 **HeaderCode** is a hero/header variant pairing marketing copy on the left with a
 terminal-style code/demo window on the right. Unlike \`bd-header\`, it has no pricing —
-just eyebrow, title, description, two CTA buttons, and a slotted terminal.
+just eyebrow, title, description, two CTA buttons, an optional meta row, and a slotted terminal.
 
 The terminal window — including the traffic-light titlebar dots — is owned by
 \`<bd-terminal-message>\`. \`bd-header-code\` additionally renders an optional small
 caption **below** the terminal box via \`terminal-caption\`.
 
+\`variant="tint"\` swaps the plain white background for a light-blue gradient with a
+dot-grid pattern, and gives the \`badge\` slot a bordered pill treatment.
+
 ### Usage
 \`\`\`html
 <bd-header-code
-  eyebrow="Security for autonomous AI agents"
-  title="Bitdefender AI Guardian"
-  description="A security layer between your AI agents and the actions they take."
-  terminal-caption="AI Guardian CLI · first-run setup"
+  variant="tint"
+  eyebrow="Privacy for autonomous AI agents"
+  title="Bitdefender VPN for AI Agents"
+  description="Each prompt gets a fresh, disposable container scoped to a specific location."
+  terminal-caption="// illustrative — every connection closes when the prompt ends"
 >
-  <bd-button-link slot="primary-button" label="Download BETA Today" kind="primary">Download BETA Today</bd-button-link>
+  <span slot="badge">EXTERNAL BETA</span>
+  <bd-button-link slot="primary-button" label="Download for macOS" kind="primary">Download for macOS</bd-button-link>
   <bd-button-link slot="secondary-button" label="See how it works" kind="outline">See how it works</bd-button-link>
 
-  <bd-terminal-message
-    slot="terminal-content"
-    show-titlebar
-    panel-label="Welcome"
-    icon="👋"
-    greeting="Hi, I'm AI Guardian."
-    intro="I keep an eye on what your AI assistant can access and do:"
-    .items=\${["which tools it can use", "which credentials to watch", "which MCP servers to trust"]}
-    footer-bold="Let's get started."
-    footer="It only takes a minute, and nothing changes until you confirm it."
-    show-cursor
-    hint="[Enter] to continue · [esc] to cancel"
-  ></bd-terminal-message>
+  <div slot="meta">…facts row…</div>
+
+  <bd-terminal-message slot="terminal-content" show-titlebar></bd-terminal-message>
 </bd-header-code>
 \`\`\`
 
 ### Attributes
-| Attribute          | Type   | Default | Description                                       |
-|----------------------|--------|---------|-----------------------------------------------------|
-| \`eyebrow\`            | String | \`""\`    | Small label above the title                        |
-| \`title\`              | String | \`""\`    | Main heading (can be overridden via \`title\` slot) |
-| \`description\`        | String | \`""\`    | Supporting paragraph under the title               |
-| \`terminal-caption\`   | String | \`""\`    | Small caption rendered below the terminal box       |
+| Attribute          | Type   | Default     | Description                                          |
+|----------------------|--------|--------------|---------------------------------------------------------|
+| \`eyebrow\`            | String | \`""\`         | Small label above the title                            |
+| \`title\`              | String | \`""\`         | Main heading (can be overridden via \`title\` slot)     |
+| \`description\`        | String | \`""\`         | Supporting paragraph under the title                    |
+| \`terminal-caption\`   | String | \`""\`         | Small caption rendered below the terminal box           |
+| \`variant\`            | String | \`"default"\`  | \`"default"\` or \`"tint"\` — background treatment       |
 
 ### Slots
 | Slot               | Description                                  |
 |---------------------|-----------------------------------------------|
 | \`title\`             | Overrides the \`title\` attribute if content is provided |
+| \`badge\`             | Small pill badge next to the CTAs (e.g. "AVAILABLE", "EXTERNAL BETA") |
 | \`primary-button\`    | The main CTA (typically \`bd-button-link\`)    |
 | \`secondary-button\`  | The secondary CTA                             |
+| \`meta\`              | Freeform row under the CTAs — spec line, facts list, etc. |
 | \`terminal-content\`  | Freeform content rendered on the right (typically a \`bd-terminal-message\`) |
         `
       }
@@ -70,7 +68,8 @@ caption **below** the terminal box via \`terminal-caption\`.
     eyebrow        : { control: "text", table: { category: "Content" } },
     title          : { control: "text", table: { category: "Content" } },
     description    : { control: "text", table: { category: "Content" } },
-    terminalCaption: { control: "text", table: { category: "Terminal" } }
+    terminalCaption: { control: "text", table: { category: "Terminal" } },
+    variant        : { control: { type: "select" }, options: ["default", "tint"], table: { category: "Appearance" } }
   }
 };
 
@@ -92,6 +91,7 @@ const terminalContent = html`
 
 const render = (args) => html`
   <bd-header-code
+    variant=${args.variant}
     eyebrow=${args.eyebrow}
     title=${args.title}
     description=${args.description}
@@ -122,6 +122,7 @@ const render = (args) => html`
 export const Default = {
   name: "Default — AI Guardian",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
@@ -137,9 +138,60 @@ export const Default = {
   }
 };
 
+export const TintVariant = {
+  name: "Tint Variant — VPN",
+  args: {
+    variant        : "tint",
+    eyebrow        : "Privacy for autonomous AI agents",
+    title          : "Bitdefender VPN for AI Agents",
+    description    : "Each prompt gets a fresh, disposable container scoped to a specific location, so your agent's traffic isn't tied to your home connection or your personal IP.",
+    terminalCaption: "// illustrative — every connection closes when the prompt ends"
+  },
+  render: (args) => html`
+    <bd-header-code
+      variant=${args.variant}
+      eyebrow=${args.eyebrow}
+      title=${args.title}
+      description=${args.description}
+      terminal-caption=${args.terminalCaption}
+    >
+      <span slot="breadcrumb">Bitdefender AI</span>
+      <span slot="breadcrumb">vpn-for-agents</span>
+
+      <bd-button-link slot="primary-button" label="Download for macOS" kind="primary" size="md" font-size="18px" font-weight="600">Download for macOS</bd-button-link>
+      <bd-button-link slot="secondary-button" label="See how it works" kind="primary-outline" size="md" font-size="18px" font-weight="600">See how it works</bd-button-link>
+      <span slot="badge">EXTERNAL BETA</span>
+
+      <bd-terminal-message
+        slot="terminal-content"
+        show-titlebar
+        .lines=${[
+          { type: "strong", text: "VPN for AI Agents · connection log" },
+          { type: "sep" },
+          { type: "dim", text: "MCP      vpn_connect(location: frankfurt)               [Open]" },
+          { type: "dim", text: "REQUEST  agent reaches insurer-compare.com          [Server IP]" },
+          { type: "dim", text: "NETWORK  hotel Wi-Fi, unencrypted                    [Protected]" },
+          { type: "dim", text: "MCP      vpn_safefetch(location: frankfurt, url:" },
+          { type: "dim", text: "         insurer-compare.com)                        [Scanned]" },
+          { type: "dim", text: "MCP      vpn_disconnect(location: frankfurt)" },
+          { type: "dim", text: "         — prompt ends              [Closed, session cleared]" }
+        ]}
+      ></bd-terminal-message>
+    </bd-header-code>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "`variant=\"tint\"` swaps the plain background for the light-blue gradient + dot-grid treatment, and the badge slot renders as a bordered pill. The floating annotation callouts seen in the reference design (\"exit: frankfurt · server IP\", \"tunnel closed — session cleared\") aren't reproduced here — they'd need to be a feature of `bd-terminal-message` itself, which isn't in scope for `bd-header-code`."
+      }
+    }
+  }
+};
+
 export const NoEyebrow = {
   name: "No Eyebrow",
   args: {
+    variant        : "default",
     eyebrow        : "",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -158,6 +210,7 @@ export const NoEyebrow = {
 export const SingleButton = {
   name: "Single CTA",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -165,6 +218,7 @@ export const SingleButton = {
   },
   render: (args) => html`
     <bd-header-code
+      variant=${args.variant}
       eyebrow=${args.eyebrow}
       title=${args.title}
       description=${args.description}
@@ -192,6 +246,7 @@ export const SingleButton = {
 export const NoCaption = {
   name: "No Caption",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take.",
@@ -210,6 +265,7 @@ export const NoCaption = {
 export const Playground = {
   name: "Playground",
   args: {
+    variant        : "default",
     eyebrow        : "Security for autonomous AI agents",
     title          : "Bitdefender AI Guardian",
     description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
@@ -219,7 +275,7 @@ export const Playground = {
   parameters: {
     docs: {
       description: {
-        story: "Fully interactive story — use the Controls panel to edit eyebrow, title, description, and terminal caption live."
+        story: "Fully interactive story — use the Controls panel to edit eyebrow, title, description, variant, and terminal caption live."
       }
     }
   }

package/src/components/page-switcher/page-switcher.js

@@ -19,7 +19,7 @@ class BdPageSwitcher extends LitElement {
   render() {
     return html`
       <div class="inner">
-        <bd-ai-icon class="logo" width="126" height="24"></bd-ai-icon>
+        <bd-ai-icon class="logo" width="200" height="24"></bd-ai-icon>
 
         <nav aria-label="Product navigation">
           ${this.items.map(({ title, href, active }) => html`

package/src/components/paragraph/paragraph.js

@@ -10,6 +10,8 @@ export class BdP extends LitElement {
     paddingTop   : { type: String },
     fontFamily   : { type: String, attribute: "font-family" },
     fontWeight   : { type: String, attribute: "font-weight" },
+    fontSize     : { type: String, attribute: "font-size" },
+    letterSpacing: { type: String, attribute: "letter-spacing" },
     color        : { type: String }
   };
 
@@ -21,6 +23,8 @@ export class BdP extends LitElement {
     this.paddingTop = "";
     this.fontFamily = "";
     this.fontWeight = "";
+    this.fontSize = "";
+    this.letterSpacing = "";
     this.color = "";
   }
 
@@ -60,6 +64,8 @@ export class BdP extends LitElement {
     if (this.paddingTop) styles.push(`padding-top: ${this.paddingTop};`);
     if (this.fontFamily) styles.push(`font-family: ${this.fontFamily};`);
     if (this.fontWeight) styles.push(`font-weight: ${this.fontWeight};`);
+    if (this.fontSize) styles.push(`font-size: ${this.fontSize};`);
+    if (this.letterSpacing) styles.push(`letter-spacing: ${this.letterSpacing};`);
 
     const validColor = this._getValidColor(this.color);
     if (validColor) styles.push(`color: ${validColor};`);

package/src/components/quick-answer/quick-answer.css.js

@@ -4,6 +4,8 @@ export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
+        line-height: 1.55;
+    
   }
 
   .bd-quickanswer-container {

package/src/components/quick-answer/quick-answer.js

@@ -30,7 +30,7 @@ class QuickAnswer extends LitElement {
             `
           : nothing}
 
-        <bd-p kind="normal" class="bd-quickanswer-text">
+        <bd-p kind="large" class="bd-quickanswer-text">
           <slot name="text">${this.text}</slot>
         </bd-p>
 

package/src/components/terminal/terminal-message.css.js

@@ -11,6 +11,12 @@ export default css`
     box-sizing: border-box;
   }
 
+  /* Tighter host padding for the "flush" variant, used where the terminal
+     sits over decorative rings/a 3D scene (e.g. the VPN hero). */
+  :host([variant="flush"]) {
+    padding: 18px 20px;
+  }
+
   /* === TITLEBAR (traffic-light dots only, no label) === */
   .bd-terminalmsg-titlebar {
     display: flex;
@@ -47,6 +53,15 @@ export default css`
     padding: var(--spacing-20) var(--spacing-20) calc(var(--spacing-20) + var(--spacing-8));
   }
 
+  /* "flush" variant: the host's own box already reads as the terminal's
+     edge (no titlebar dots above it to visually separate an inner panel),
+     so the inner panel's own border is redundant — drop it and let the
+     panel's padding still apply. */
+  :host([variant="flush"]) .bd-terminalmsg-panel {
+    border: none;
+    padding: 0;
+  }
+
   /* Top "legend": text sitting on the top border line, background matching the
      panel's own bg color masks the border behind the text. */
   .bd-terminalmsg-panel-label {
@@ -107,21 +122,30 @@ export default css`
     font-weight: var(--typography-fontWeight-bold, 700);
   }
 
-  /* === TYPED-LINE API (bd-terminal-message .lines=...) ===
-     A literal sequence of terminal lines, each with its own semantic
-     color/weight — for content like:
-       $ npx skills add bitdefender/agent-skill-scanner   → cmd
-       ✓ agent-skill-scanner installed                     → ok
-       ────────────────────────────────                    → sep
-       > scan the my-skill skill for security risks        → ask
-       ────────────────────────────────                    → sep
-       # Skill Scan: my-skill                               → strong
-       - Severity: CLEAN                                    → dim
-       - Scan Date: 2026-06-15                               → dim
-       No security findings detected.                        → dim
-  */
+  /* === CAPTION — small dim note inside the panel, below everything else
+     (lines/greeting/footer), e.g. "// illustrative — every connection
+     closes when the prompt ends". Sits inside the black box, unlike
+     bd-header-code's terminal-caption which renders below the whole card. */
+  .bd-terminalmsg-caption {
+    color: rgba(255, 255, 255, 0.35);
+    font-size: var(--typography-fontSize-xs);
+    margin-top: var(--spacing-16);
+    padding-top: var(--spacing-12);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  /* === TYPED-LINE API (bd-terminal-message .lines=...) === */
   .bd-terminalmsg-lines {
     display: block;
+    /* Container query context: the row layout below reacts to the
+       terminal's own rendered width, not the viewport's. This matters
+       because the terminal is often much narrower than the screen (e.g.
+       inside the VPN hero's tilted 3D scene) — a viewport-based media
+       query never fires there, even though the row is visually cramped,
+       which was squeezing the text column to near-zero width and
+       breaking it character by character. */
+    container-type: inline-size;
+    container-name: bd-terminalmsg-lines;
   }
 
   .bd-terminalmsg-l-cmd {
@@ -158,4 +182,120 @@ export default css`
     border-top: 1px solid rgba(255, 255, 255, 0.12);
     margin: var(--spacing-8) 0;
   }
+
+  /* === "title" line — bold header row with an optional "● LIVE" indicator,
+     e.g. "VPN for AI Agents · connection log" === */
+  .bd-terminalmsg-l-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-12);
+    color: var(--color-neutral-0, #fff);
+    font-weight: var(--typography-fontWeight-bold, 700);
+    padding-bottom: var(--spacing-16);
+  }
+
+  .bd-terminalmsg-live {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-4, 4px);
+    color: #27c93f;
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-bold, 700);
+    letter-spacing: 0.05em;
+    flex-shrink: 0;
+  }
+
+  .bd-terminalmsg-live-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #27c93f;
+  }
+
+  /* === "row" line — label / text / colored badge, 3-column layout.
+     Text wraps onto further lines while label and badge stay pinned. === */
+  .bd-terminalmsg-l-row {
+    display: grid;
+    grid-template-columns: 72px 1fr auto;
+    align-items: start;
+    column-gap: var(--spacing-12);
+    padding: var(--spacing-8) 0;
+  }
+
+  /* "flush" variant: each row gets its own hairline top border, standing
+     in for the panel border removed above and separating rows from each
+     other. The first row would otherwise show this border flush against
+     the host's own top padding, which reads fine here — no exception
+     needed. */
+  :host([variant="flush"]) .bd-terminalmsg-l-row {
+    border-top: 1px solid #ffffff17;
+  }
+
+  .bd-terminalmsg-l-row-label {
+    color: rgba(255, 255, 255, 0.35);
+    text-transform: uppercase;
+    font-size: var(--typography-fontSize-xs);
+    letter-spacing: 0.05em;
+    padding-top: 2px;
+  }
+
+  .bd-terminalmsg-l-row-text {
+    color: rgba(255, 255, 255, 0.85);
+    word-break: break-word;
+  }
+
+  .bd-terminalmsg-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px var(--spacing-12, 10px);
+    border-radius: var(--radius-full, 999px);
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-bold, 600);
+    white-space: nowrap;
+    margin-top: 1px;
+  }
+
+  .bd-terminalmsg-badge--green {
+    background: rgba(39, 201, 63, 0.15);
+    color: #27c93f;
+  }
+
+  .bd-terminalmsg-badge--blue {
+    background: rgba(122, 184, 255, 0.15);
+    color: #7ab8ff;
+  }
+
+  .bd-terminalmsg-badge--amber {
+    background: rgba(217, 119, 6, 0.2);
+    color: #f5a524;
+  }
+
+  .bd-terminalmsg-badge--neutral {
+    background: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  /* Below ~360px of the terminal's OWN width (not the viewport's), stack
+     label / text / badge vertically instead of forcing three columns into
+     too little space. Uses a container query, keyed to .bd-terminalmsg-lines
+     above, so this triggers based on the terminal's real rendered size,
+     which is what a viewport-based @media query could not do here — the
+     terminal is often much narrower than the screen (e.g. tilted inside
+     the VPN hero's 3D scene), so @media never fired even though the row
+     was visually cramped. */
+  @container bd-terminalmsg-lines (max-width: 360px) {
+    .bd-terminalmsg-l-row {
+      grid-template-columns: 1fr;
+      row-gap: var(--spacing-4, 4px);
+    }
+
+    .bd-terminalmsg-l-row-label {
+      padding-top: 0;
+    }
+
+    .bd-terminalmsg-badge {
+      justify-self: start;
+    }
+  }
 `;

package/src/components/terminal/terminal-message.js

@@ -20,12 +20,16 @@ class TerminalMessage extends LitElement {
     footerBold  : { type: String, attribute: "footer-bold" },
     showCursor  : { type: Boolean, attribute: "show-cursor" },
     hint        : { type: String },
-    // New: raw typed-line API, for terminals that are a literal sequence of
-    // command/result lines (unlike greeting/intro/items, which model a
-    // single chat-style message). Each entry: { type, text }.
-    // type: "cmd" | "ok" | "ask" | "strong" | "dim" | "sep" | "space"
-    // "sep" and "space" ignore `text`.
-    lines       : { type: Array }
+    lines       : { type: Array },
+    caption     : { type: String },
+    // "default" (existing look: optional titlebar dots, bordered panel,
+    // standard host padding) | "flush" — used where the terminal sits over
+    // decorative rings/a 3D scene (e.g. the VPN hero): hides the titlebar
+    // dots regardless of show-titlebar, drops the inner panel's own
+    // border (the host's outer box already reads as the terminal's edge),
+    // gives each "row" line a hairline top border instead, and tightens
+    // the host's own padding.
+    variant     : { type: String, reflect: true }
   };
 
   static styles = [tokens, terminalMessageCSS];
@@ -44,9 +48,12 @@ class TerminalMessage extends LitElement {
     this.showCursor = false;
     this.hint = "";
     this.lines = [];
+    this.caption = "";
+    this.variant = "default";
   }
 
   _renderTitlebar() {
+    if (this.variant === "flush") return nothing;
     if (!this.showTitlebar) return nothing;
     return html`
       <div class="bd-terminalmsg-titlebar">
@@ -57,10 +64,6 @@ class TerminalMessage extends LitElement {
     `;
   }
 
-  // Splits the hint text on bracketed key labels like "[Enter]" or "[esc]" and
-  // wraps each one in a <strong> so it renders bold + white, while the rest of
-  // the text keeps the dim hint color. Works with the plain string prop as-is —
-  // no need to pass markup through `hint`.
   _renderHint() {
     if (!this.hint) return nothing;
 
@@ -82,7 +85,7 @@ class TerminalMessage extends LitElement {
 
     return html`
       <div class="bd-terminalmsg-lines">
-        ${this.lines.map(({ type, text }) => {
+        ${this.lines.map(({ type, text, label, badge, badgeColor, live }) => {
           switch (type) {
             case "sep":
               return html`<hr class="bd-terminalmsg-l-sep" />`;
@@ -98,6 +101,25 @@ class TerminalMessage extends LitElement {
               return html`<div class="bd-terminalmsg-l-strong">${text}</div>`;
             case "dim":
               return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
+            case "title":
+              return html`
+                <div class="bd-terminalmsg-l-title">
+                  <span>${text}</span>
+                  ${live
+                    ? html`<span class="bd-terminalmsg-live"><span class="bd-terminalmsg-live-dot"></span>LIVE</span>`
+                    : nothing}
+                </div>
+              `;
+            case "row":
+              return html`
+                <div class="bd-terminalmsg-l-row">
+                  <span class="bd-terminalmsg-l-row-label">${label}</span>
+                  <span class="bd-terminalmsg-l-row-text">${text}</span>
+                  ${badge
+                    ? html`<span class="bd-terminalmsg-badge bd-terminalmsg-badge--${badgeColor || "neutral"}">${badge}</span>`
+                    : nothing}
+                </div>
+              `;
             default:
               return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
           }
@@ -158,6 +180,10 @@ class TerminalMessage extends LitElement {
             : nothing}
 
           <slot></slot>
+
+          ${this.caption
+            ? html`<div class="bd-terminalmsg-caption">${this.caption}</div>`
+            : nothing}
         </div>
 
         ${this._renderHint()}