@repobit/dex-system-design 0.24.18 → 0.24.20

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()}