@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/review/review.stories.js

@@ -0,0 +1,228 @@
+import { html } from "lit";
+import "./review-grid.js";
+import "./review.js";
+
+export default {
+  title     : "Components/Review",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+Testimonial / review card (\`bd-review\`) plus a responsive grid wrapper
+(\`bd-review-grid\`) that auto-sizes columns from how many cards are
+slotted in.
+
+\`\`\`html
+<bd-review-grid title="What They Say">
+  <bd-review variant="tint">
+    <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+    <span slot="source">PCMag</span>
+    <span slot="date">February 3, 2026</span>
+  </bd-review>
+
+  <bd-review variant="tint">
+    <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+    <span slot="source">PCMag</span>
+    <span slot="date">April 20, 2026</span>
+  </bd-review>
+</bd-review-grid>
+\`\`\`
+
+### Column count (bd-review-grid)
+Derived automatically from how many \`bd-review\` children are slotted in,
+capped at 3 per row — extra cards wrap onto further rows at 3-per-row:
+
+| Cards | Columns | Each card |
+|---|---|---|
+| 1 | 1 | full width ("col-md-12") |
+| 2 | 2 | half each ("col-md-6") |
+| 3+ | 3 | third each ("col-md-4") |
+
+Below the md breakpoint (899px), every count collapses to a single column.
+
+### Attributes \`bd-review\`
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| \`variant\` | String | \`"tint"\` | \`"tint"\` (light blue) or \`"neutral"\` (light grey, #fafafa) |
+
+### Slots \`bd-review\`
+| Slot | Description |
+|---|---|
+| \`quote\` | The testimonial text |
+| \`source\` | Publication / attribution (bold) |
+| \`date\` | Date line, under the source |
+
+### Attributes \`bd-review-grid\`
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| \`title\` | String | — | Optional centred heading above the grid |
+        `
+      }
+    }
+  }
+};
+
+// ─── Un singur card (full width) ──────────────────────────────────────────
+
+export const OneCard = {
+  name  : "1 card — full width",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Doua carduri (jumatate fiecare) ──────────────────────────────────────
+
+export const TwoCards = {
+  name  : "2 carduri — jumătate fiecare",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Trei carduri (o treime fiecare) ──────────────────────────────────────
+
+export const ThreeCards = {
+  name  : "3 carduri — o treime fiecare",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Consistently top-ranked by the world's leading independent testing labs and tech publications.</span>
+        <span slot="source">AV-Comparatives</span>
+        <span slot="date">June 12, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Cinci carduri (wrap la 3 pe rand) ────────────────────────────────────
+
+export const FiveCardsWrapping = {
+  name      : "5 carduri — se leagă la maxim 3 pe rând",
+  parameters: {
+    docs: {
+      description: {
+        story: "Peste 3 carduri, grid-ul rămâne la 3 coloane și cardurile suplimentare trec pe rândul următor, tot la o treime fiecare — regula \"maxim 3 pe rând\" se aplică indiferent de câte carduri sunt slotate."
+      }
+    }
+  },
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      ${[1, 2, 3, 4, 5].map(
+        (n) => html`
+          <bd-review variant=${n % 2 === 0 ? "neutral" : "tint"}>
+            <span slot="quote">Review number ${n} — placeholder testimonial text to show how the grid wraps once more than three cards are slotted in.</span>
+            <span slot="source">Publication ${n}</span>
+            <span slot="date">2026</span>
+          </bd-review>
+        `
+      )}
+    </bd-review-grid>
+  `
+};
+
+// ─── Text mai lung (verifica wrapping și înălțimea egală pe rând) ─────────
+
+export const LongQuotes = {
+  name      : "Text mai lung — wrapping și înălțime egală",
+  parameters: {
+    docs: {
+      description: {
+        story: "Citate mult mai lungi decât în exemplele scurte, ca să se vadă comportarea reală a cardurilor: textul se leagă pe mai multe rânduri, iar cardurile de pe același rând rămân la aceeași înălțime (citatul se întinde cu flex-grow, meta-ul rămâne lipit de jos)."
+      }
+    }
+  },
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice. It combines consistently excellent malware protection with a surprisingly light footprint on system performance, and the extras — VPN, password manager, parental controls — are genuinely useful rather than bolted-on filler.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits. In our testing across three months and multiple platforms, it caught every real-world threat we threw at it without a single false positive on legitimate software.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Consistently top-ranked by the world's leading independent testing labs and tech publications, year after year, across every category we measure: protection, performance, usability, and — increasingly relevant for households with kids — how well it handles parental controls without becoming a nuisance to manage.</span>
+        <span slot="source">AV-Comparatives</span>
+        <span slot="date">June 12, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Text mai lung, doar doua carduri (verifica jumatate-jumatate) ────────
+
+export const LongQuotesTwoCards = {
+  name  : "Text mai lung — 2 carduri",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice. It combines consistently excellent malware protection with a surprisingly light footprint on system performance.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits — a genuinely complete package rather than a marketing checklist.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+export const NoTitle = {
+  name  : "Fără titlu",
+  render: () => html`
+    <bd-review-grid>
+      <bd-review variant="neutral">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};

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

@@ -0,0 +1,49 @@
+import { LitElement, css, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+
+class TerminalCursor extends LitElement {
+  static properties = {
+    color: { type: String }
+  };
+
+  static styles = [
+    tokens,
+    css`
+      :host {
+        display: inline-block;
+        width: 8px;
+        height: 16px;
+        vertical-align: middle;
+      }
+
+      .bd-terminal-cursor {
+        width: 100%;
+        height: 100%;
+        background: var(--bd-terminal-cursor-color, var(--color-blue-400));
+        animation: bd-terminal-cursor-blink 1s steps(1) infinite;
+        display: block;
+      }
+
+      @keyframes bd-terminal-cursor-blink {
+        0%, 50% {
+          opacity: 1;
+        }
+        50.01%, 100% {
+          opacity: 0;
+        }
+      }
+    `
+  ];
+
+  constructor() {
+    super();
+    this.color = "";
+  }
+
+  render() {
+    const style = this.color ? `background: ${this.color};` : "";
+    return html`<span class="bd-terminal-cursor" style="${style}"></span>`;
+  }
+}
+
+customElements.define("bd-terminal-cursor", TerminalCursor);

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

@@ -0,0 +1,161 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--color-neutral-0, #fff);
+    background: #151719;
+    border-radius: var(--radius-xl, 12px);
+    padding: var(--spacing-14) var(--spacing-16) var(--spacing-32);
+    box-sizing: border-box;
+  }
+
+  /* === TITLEBAR (traffic-light dots only, no label) === */
+  .bd-terminalmsg-titlebar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding-bottom: var(--spacing-16);
+  }
+
+  .bd-terminalmsg-dot {
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .bd-terminalmsg-dot--red {
+    background: #ff5f56;
+  }
+
+  .bd-terminalmsg-dot--yellow {
+    background: #ffbd2e;
+  }
+
+  .bd-terminalmsg-dot--green {
+    background: #27c93f;
+  }
+
+  /* === PANEL === */
+  .bd-terminalmsg-panel {
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: var(--radius-lg, 10px);
+    padding: var(--spacing-20) var(--spacing-20) calc(var(--spacing-20) + var(--spacing-8));
+  }
+
+  /* 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 {
+    position: absolute;
+    top: 0;
+    left: var(--spacing-16);
+    transform: translateY(-50%);
+    background: #151719;
+    padding: 0 var(--spacing-8);
+    color: rgba(255, 255, 255, 0.4);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+  }
+
+  .bd-terminalmsg-body {
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  .bd-terminalmsg-greeting-text {
+    color: var(--color-blue-400, #7ab8ff);
+    font-weight: var(--typography-fontWeight-bold);
+  }
+
+  .bd-terminalmsg-intro {
+    color: var(--color-neutral-0, #fff);
+  }
+
+  .bd-terminalmsg-list {
+    display: block;
+    padding-left: var(--spacing-16);
+    margin: 0 0 var(--spacing-12);
+  }
+
+  .bd-terminalmsg-footer {
+    color: var(--color-neutral-0, #fff);
+    margin: 0;
+  }
+
+  /* === HINT ("legend" sitting on the bottom border line, mirrors panel-label) === */
+  .bd-terminalmsg-hint {
+    position: absolute;
+    bottom: 0;
+    left: var(--spacing-16);
+    transform: translateY(50%);
+    background: #151719;
+    padding: 0 var(--spacing-8);
+    color: rgba(255, 255, 255, 0.5);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    white-space: nowrap;
+  }
+
+  /* Bracketed key labels inside the hint (e.g. "[Enter]", "[esc]") — bold + white,
+     standing out from the rest of the dimmer hint text. */
+  .bd-terminalmsg-hint-key {
+    color: #fff;
+    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
+  */
+  .bd-terminalmsg-lines {
+    display: block;
+  }
+
+  .bd-terminalmsg-l-cmd {
+    color: var(--color-neutral-0, #fff);
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
+  .bd-terminalmsg-l-ok {
+    color: #27c93f;
+    padding-bottom: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-ask {
+    color: var(--color-blue-400, #7ab8ff);
+    padding: var(--spacing-12) 0;
+  }
+
+  .bd-terminalmsg-l-strong {
+    color: var(--color-neutral-0, #fff);
+    font-weight: var(--typography-fontWeight-bold, 700);
+    padding-top: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-dim {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .bd-terminalmsg-l-space {
+    height: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-sep {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: var(--spacing-8) 0;
+  }
+`;

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

@@ -0,0 +1,169 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
+import "./terminal-cursor.js";
+import terminalMessageCSS from "./terminal-message.css.js";
+
+class TerminalMessage extends LitElement {
+  static properties = {
+    showTitlebar: { type: Boolean, attribute: "show-titlebar" },
+    panelLabel  : { type: String, attribute: "panel-label" },
+    dimText     : { type: String, attribute: "dim-text" },
+    greeting    : { type: String },
+    icon        : { type: String },
+    intro       : { type: String },
+    items       : { type: Array },
+    footer      : { type: String },
+    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 }
+  };
+
+  static styles = [tokens, terminalMessageCSS];
+
+  constructor() {
+    super();
+    this.showTitlebar = false;
+    this.panelLabel = "";
+    this.dimText = "";
+    this.greeting = "";
+    this.icon = "";
+    this.intro = "";
+    this.items = [];
+    this.footer = "";
+    this.footerBold = "";
+    this.showCursor = false;
+    this.hint = "";
+    this.lines = [];
+  }
+
+  _renderTitlebar() {
+    if (!this.showTitlebar) return nothing;
+    return html`
+      <div class="bd-terminalmsg-titlebar">
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--red"></span>
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--yellow"></span>
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--green"></span>
+      </div>
+    `;
+  }
+
+  // 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;
+
+    const parts = this.hint.split(/(\[[^\]]+\])/g);
+
+    return html`
+      <span class="bd-terminalmsg-hint">
+        ${parts.map((part) =>
+          /^\[[^\]]+\]$/.test(part)
+            ? html`<strong class="bd-terminalmsg-hint-key">${part}</strong>`
+            : part
+        )}
+      </span>
+    `;
+  }
+
+  _renderLines() {
+    if (!this.lines || !this.lines.length) return nothing;
+
+    return html`
+      <div class="bd-terminalmsg-lines">
+        ${this.lines.map(({ type, text }) => {
+          switch (type) {
+            case "sep":
+              return html`<hr class="bd-terminalmsg-l-sep" />`;
+            case "space":
+              return html`<div class="bd-terminalmsg-l-space" aria-hidden="true">&nbsp;</div>`;
+            case "cmd":
+              return html`<div class="bd-terminalmsg-l-cmd">${text}</div>`;
+            case "ok":
+              return html`<div class="bd-terminalmsg-l-ok">${text}</div>`;
+            case "ask":
+              return html`<div class="bd-terminalmsg-l-ask">${text}</div>`;
+            case "strong":
+              return html`<div class="bd-terminalmsg-l-strong">${text}</div>`;
+            case "dim":
+              return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
+            default:
+              return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
+          }
+        })}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this._renderTitlebar()}
+
+      <div class="bd-terminalmsg-panel">
+        ${this.panelLabel
+          ? html`<span class="bd-terminalmsg-panel-label">${this.panelLabel}</span>`
+          : nothing}
+
+        <div class="bd-terminalmsg-body">
+          ${this._renderLines()}
+
+          ${this.dimText
+            ? html`<bd-p kind="small" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-dim">${this.dimText}</bd-p>`
+            : nothing}
+
+          ${this.greeting
+            ? html`
+                <bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-greeting">
+                  ${this.icon ? html`${this.icon} ` : nothing}
+                  <span class="bd-terminalmsg-greeting-text">${this.greeting}</span>
+                </bd-p>
+              `
+            : nothing}
+
+          ${this.intro
+            ? html`<bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-intro">${this.intro}</bd-p>`
+            : nothing}
+
+          ${this.items && this.items.length
+            ? html`
+                <bd-list class="bd-terminalmsg-list">
+                  ${this.items.map((item) => html`<bd-li kind="bullet" size="sm" color="#fff">${item}</bd-li>`)}
+                </bd-list>
+              `
+            : nothing}
+
+          ${this.footer || this.footerBold
+            ? html`
+                <bd-p kind="regular" font-family="var(--font-family-mono)" class="bd-terminalmsg-footer">
+                  ${this.footerBold
+                    ? html`<strong>${this.footerBold}</strong> `
+                    : nothing}
+                  ${this.footer}
+                  ${this.showCursor
+                    ? html`<bd-terminal-cursor></bd-terminal-cursor>`
+                    : nothing}
+                </bd-p>
+              `
+            : nothing}
+
+          <slot></slot>
+        </div>
+
+        ${this._renderHint()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-terminal-message", TerminalMessage);