@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/install-options/install-options.css.js

@@ -0,0 +1,276 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-installoptions-container {
+    background: var(--color-blue-50);
+    padding: var(--spacing-64) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-installoptions-eyebrow {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-semibold);
+    margin: 0 0 var(--spacing-16);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-description {
+    color: var(--color-neutral-700);
+    max-width: 640px;
+    margin: 0 auto var(--spacing-32);
+  }
+
+  .bd-installoptions-worksin {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-16);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto var(--spacing-40);
+  }
+
+  .bd-installoptions-worksin-label {
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    flex-shrink: 0;
+  }
+
+  .bd-installoptions-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-8) var(--spacing-16);
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-neutral-200);
+    border-radius: var(--radius-full);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  /*
+    Placeholder brand marks: these render an initial letter on a solid
+    background because the real Claude Code / Codex / OpenClaw / opencode /
+    Hermes Agent logos are not in this icon set. Swap the initial+color pairs
+    for real <img>/<svg> marks as soon as brand assets are available.
+  */
+  .bd-installoptions-pill-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-md);
+    color: var(--color-neutral-0);
+    font-size: var(--typography-fontSize-xxs);
+    font-weight: var(--typography-fontWeight-bold);
+    flex-shrink: 0;
+  }
+
+  .bd-installoptions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-24);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-card {
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-neutral-100);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-24);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-card-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-card-title {
+    margin: 0;
+    color: var(--color-neutral-900);
+  }
+
+  .bd-installoptions-badge {
+    flex-shrink: 0;
+    padding: var(--spacing-4) var(--spacing-8);
+    background: var(--color-blue-50);
+    color: var(--color-blue-700);
+    border-radius: var(--radius-md);
+    font-size: var(--typography-fontSize-xxs);
+    font-weight: var(--typography-fontWeight-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+  }
+
+  .bd-installoptions-card-description {
+    color: var(--color-neutral-600);
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .bd-installoptions-code {
+    position: relative;
+    background: var(--color-neutral-900);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16);
+    box-sizing: border-box;
+  }
+
+  .bd-installoptions-code-text {
+    margin: 0;
+    color: var(--color-neutral-0);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-sm);
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding-right: var(--spacing-56);
+  }
+
+  .bd-installoptions-copy {
+    position: absolute;
+    top: var(--spacing-12);
+    right: var(--spacing-12);
+    padding: var(--spacing-4) var(--spacing-10);
+    background: rgba(255, 255, 255, 0.12);
+    color: var(--color-neutral-0);
+    border: none;
+    border-radius: var(--radius-sm);
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-semibold);
+    cursor: pointer;
+    transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-installoptions-copy:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .bd-installoptions-copy:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+  }
+
+  .bd-installoptions-card-link {
+    font-weight: var(--typography-fontWeight-semibold);
+    margin-top: auto;
+  }
+
+  /* === "Then just ask" prompt panel (prompt-panel attribute) === */
+
+  .bd-installoptions-promptpanel {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: var(--spacing-64) auto 0;
+  }
+
+  .bd-installoptions-prompt-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight);
+  }
+
+  .bd-installoptions-prompt-description {
+    color: var(--color-neutral-700);
+    max-width: 640px;
+    margin: 0 0 var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-label {
+    display: block;
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: var(--spacing-8);
+  }
+
+  .bd-installoptions-prompt-code {
+    position: relative;
+    background: var(--color-neutral-900);
+    border: var(--border-width-2) solid var(--color-blue-500);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16);
+    padding-right: var(--spacing-64);
+    box-sizing: border-box;
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-code-text {
+    color: var(--color-neutral-0);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  .bd-installoptions-prompt-code-text ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  .bd-installoptions-copy--prompt {
+    top: var(--spacing-12);
+    right: var(--spacing-12);
+  }
+
+  .bd-installoptions-prompt-note {
+    background: var(--color-yellow-50, #fffbeb);
+    border: var(--border-width-1) solid var(--color-yellow-300, #fcd34d);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16) var(--spacing-20);
+    color: var(--color-yellow-800, #92400e);
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-note ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  .bd-installoptions-prompt-footer {
+    color: var(--color-neutral-600);
+    margin: 0;
+  }
+
+  @media (max-width: 899px) {
+    .bd-installoptions-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;

package/src/components/install-options/install-options.js

@@ -0,0 +1,184 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
+import installOptionsCSS from "./install-options.css.js";
+
+class BdInstallOptions extends LitElement {
+  static properties = {
+    eyebrow    : { type: String },
+    title      : { type: String },
+    description: { type: String },
+    worksIn    : { type: Array },  // [{ label, initial, color }]
+    cards      : { type: Array },  // [{ title, badge, description, code, linkLabel, linkHref }]
+
+    // "Then just ask" sub-panel — rendered only when this is set, so a
+    // consumer of bd-install-options who doesn't need it gets nothing extra.
+    promptPanel: { type: Boolean, reflect: true, attribute: "prompt-panel" },
+    promptLabel: { type: String, attribute: "prompt-label" } // small mono label above the prompt block
+  };
+
+  static styles = [tokens, installOptionsCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.worksIn = [];
+    this.cards = [];
+    this.promptPanel = false;
+    this.promptLabel = "";
+  }
+
+  async _copy(text, btn) {
+    try {
+      await navigator.clipboard.writeText(text);
+      const original = btn.textContent;
+      btn.textContent = "Copied";
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.textContent = original;
+        btn.disabled = false;
+      }, 1500);
+    } catch {
+      // clipboard permission denied or unavailable — button stays as "Copy"
+    }
+  }
+
+  async _copyPromptSlot(btn) {
+    const slot = this.renderRoot?.querySelector('slot[name="prompt"]');
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map((n) => n.textContent || "").join("")
+      .trim();
+    if (!text) return;
+    this._copy(text, btn);
+  }
+
+  _renderWorksIn() {
+    if (!this.worksIn.length) return nothing;
+    return html`
+      <div class="bd-installoptions-worksin">
+        <span class="bd-installoptions-worksin-label">Works in</span>
+        <div class="bd-installoptions-pills">
+          ${this.worksIn.map(
+            ({ label, initial, color }) => html`
+              <span class="bd-installoptions-pill">
+                <span
+                  class="bd-installoptions-pill-icon"
+                  style="background:${color || "var(--color-neutral-800)"}"
+                  aria-hidden="true"
+                >${initial || label?.[0] || "?"}</span>
+                ${label}
+              </span>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  _renderCard(card) {
+    return html`
+      <div class="bd-installoptions-card">
+        <div class="bd-installoptions-card-head">
+          <bd-h as="h3" class="bd-installoptions-card-title">${card.title}</bd-h>
+          ${card.badge
+            ? html`<span class="bd-installoptions-badge">${card.badge}</span>`
+            : nothing}
+        </div>
+
+        ${card.description
+          ? html`<bd-p kind="small" class="bd-installoptions-card-description">${card.description}</bd-p>`
+          : nothing}
+
+        ${card.code
+          ? html`
+              <div class="bd-installoptions-code">
+                <pre class="bd-installoptions-code-text">${card.code}</pre>
+                <button
+                  type="button"
+                  class="bd-installoptions-copy"
+                  @click=${(e) => this._copy(card.code, e.currentTarget)}
+                >Copy</button>
+              </div>
+            `
+          : nothing}
+
+        ${card.linkLabel
+          ? html`
+              <bd-link href=${card.linkHref || "#"} kind="primary" class="bd-installoptions-card-link">
+                ${card.linkLabel} →
+              </bd-link>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  _renderPromptPanel() {
+    if (!this.promptPanel) return nothing;
+
+    return html`
+      <div class="bd-installoptions-promptpanel">
+        <bd-h as="h2" class="bd-installoptions-prompt-title">
+          <slot name="prompt-title"></slot>
+        </bd-h>
+
+        <bd-p kind="regular" class="bd-installoptions-prompt-description">
+          <slot name="prompt-description"></slot>
+        </bd-p>
+
+        ${this.promptLabel
+          ? html`<span class="bd-installoptions-prompt-label">${this.promptLabel}</span>`
+          : nothing}
+
+        <div class="bd-installoptions-prompt-code">
+          <div class="bd-installoptions-prompt-code-text">
+            <slot name="prompt"></slot>
+          </div>
+          <button
+            type="button"
+            class="bd-installoptions-copy bd-installoptions-copy--prompt"
+            @click=${(e) => this._copyPromptSlot(e.currentTarget)}
+          >Copy</button>
+        </div>
+
+        <div class="bd-installoptions-prompt-note">
+          <slot name="prompt-note"></slot>
+        </div>
+
+        <bd-p kind="regular" class="bd-installoptions-prompt-footer">
+          <slot name="prompt-footer"></slot>
+        </bd-p>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="bd-installoptions-container">
+        ${this.eyebrow
+          ? html`<bd-p kind="normal" class="bd-installoptions-eyebrow">${this.eyebrow}</bd-p>`
+          : nothing}
+
+        <bd-h as="h2" class="bd-installoptions-title">${this.title}</bd-h>
+
+        ${this.description
+          ? html`<bd-p kind="regular" class="bd-installoptions-description">${this.description}</bd-p>`
+          : nothing}
+
+        ${this._renderWorksIn()}
+
+        <div class="bd-installoptions-grid">
+          ${this.cards.map((card) => this._renderCard(card))}
+        </div>
+
+        ${this._renderPromptPanel()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-install-options", BdInstallOptions);

package/src/components/list/list-item/list-item.css.js

@@ -11,7 +11,7 @@ export default css`
     gap: var(--spacing-8);
     color: var(--color-neutral-700);
     line-height: var(--typography-lineHeight-normal);
-    font-family: var(--typography-fontFamily-sans);
+    font-family: var(--font-family-mono);
   }
 
   /* === SIZE VARIANTS === */
@@ -47,7 +47,7 @@ export default css`
     --bd-li-marker-size: var(--spacing-6);
     width: var(--bd-li-marker-size);
     height: var(--bd-li-marker-size);
-    background-color: var(--color-neutral-1000);
+    background-color: var(--bd-li-marker-color, var(--color-neutral-1000));
     border-radius: 50%;
   }
 
@@ -63,7 +63,7 @@ export default css`
   .bd-list-item.number .bd-list-item-marker::before {
     content: counter(bd-list-counter) ".";
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-1000);
+    color: var(--bd-li-marker-color, var(--color-neutral-1000));
   }
 
   /* Check List */

package/src/components/list/list-item/list-item.js

@@ -4,9 +4,10 @@ import listItemCSS from "./list-item.css.js";
 
 export class BdListItem extends LitElement {
   static properties = {
-    kind: { type: String }, // bullet, number, check, none
-    size: { type: String }, // sm, md, lg
-    icon: { type: String }  // custom icon URL
+    kind : { type: String }, // bullet, number, check, none
+    size : { type: String }, // sm, md, lg
+    icon : { type: String }, // custom icon URL
+    color: { type: String }  // optional
   };
 
   constructor() {
@@ -14,11 +15,16 @@ export class BdListItem extends LitElement {
     this.kind = "bullet";
     this.size = "md";
     this.icon = "";
+    this.color = "";
   }
 
   render() {
+    const style = this.color
+      ? `color: ${this.color}; --bd-li-marker-color: ${this.color};`
+      : "";
+
     return html`
-      <li class="bd-list-item ${this.kind} ${this.size}">
+      <li class="bd-list-item ${this.kind} ${this.size}" style="${style}">
         ${this._renderMarker()}
         <span class="bd-list-item-content">
           <slot></slot>

package/src/components/overview/overview.css.js

@@ -0,0 +1,121 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-infopanel-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    column-gap: var(--spacing-48);
+    row-gap: 0;
+    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;
+  }
+
+  /* Title spans both columns on its own row */
+  .bd-infopanel-title {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin: 0;
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+    margin-bottom: var(--spacing-48);
+  }
+
+  /* === LEFT COLUMN (description) === */
+  .bd-infopanel-left {
+    grid-column: 1;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+  .bd-infopanel-description {
+    margin: 0;
+    color: var(--color-neutral-900);
+    max-width: 46ch;
+    line-height: 1.5;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  /* === RIGHT COLUMN (facts) === */
+  .bd-infopanel-right {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-infopanel-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-24);
+  }
+
+  .bd-infopanel-row:first-of-type {
+    padding-top: 0;
+  }
+
+  .bd-infopanel-row:last-of-type {
+    padding-bottom: 0;
+  }
+
+  .bd-infopanel-divider {
+    border-top: 2px solid var(--color-blue-500);
+    margin-bottom: var(--spacing-16);
+  }
+
+  .bd-infopanel-label {
+    margin: 0;
+    color: var(--color-neutral-600);
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xxs);
+  }
+
+  .bd-infopanel-value {
+    margin: 0;
+    color: var(--color-neutral-1000);
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-infopanel-container {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto;
+      gap: var(--spacing-32);
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+
+    .bd-infopanel-title {
+      grid-column: 1;
+      grid-row: 1;
+      margin-bottom: var(--spacing-16);
+    }
+
+    .bd-infopanel-left {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .bd-infopanel-right {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .bd-infopanel-description {
+      max-width: none;
+    }
+  }
+`;

package/src/components/overview/overview.js

@@ -0,0 +1,63 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import infoPanelCSS from "./overview.css.js";
+
+class Overview extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    facts      : { type: Array } // [{ label: String, value: String }]
+  };
+
+  static styles = [tokens, infoPanelCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.facts = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-infopanel-container">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-infopanel-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        <div class="bd-infopanel-left">
+          ${this.description
+            ? html`
+                <bd-p kind="large" class="bd-infopanel-description">
+                  <slot name="description">${this.description}</slot>
+                </bd-p>
+              `
+            : nothing}
+
+          <slot></slot>
+        </div>
+
+        <div class="bd-infopanel-right">
+          ${this.facts.map(
+            (fact) => html`
+              <div class="bd-infopanel-row">
+                <div class="bd-infopanel-divider"></div>
+                <bd-p kind="xsmall" class="bd-infopanel-label">${fact.label}</bd-p>
+                <bd-p kind="normal" class="bd-infopanel-value">${fact.value}</bd-p>
+              </div>
+            `
+          )}
+          <slot name="facts"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-overview", Overview);