@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/compatibility-table/compatibility-table.css.js

@@ -0,0 +1,243 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  :host([background="blue"]) {
+    background: var(--color-blue-50);
+  }
+
+  .bd-compattable-wrapper {
+    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;
+  }
+
+  .bd-compattable-title {
+    display: block;
+    margin: 0 0 var(--spacing-12);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-compattable-description {
+    display: block;
+    margin: 0 0 var(--spacing-32);
+    color: var(--color-neutral-700);
+    max-width: 60ch;
+  }
+
+  /* === TABLE CONTAINER (default / outcome / risk) === */
+  .bd-compattable-table-container {
+    display: table;
+    width: 100%;
+    background: var(--color-neutral-0, #fff);
+    border: 1px solid var(--color-neutral-100, #e5e7eb);
+    border-radius: var(--radius-xl, 12px);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  /* === HEADER ROW === */
+  .bd-compattable-header {
+    display: grid;
+    grid-template-columns: 1.4fr 1.2fr 2.4fr;
+    background: var(--color-neutral-50);
+    border-bottom: 1px solid var(--color-neutral-200);
+  }
+
+  :host([variant="outcome"]) .bd-compattable-header {
+    grid-template-columns: 1.2fr 1.6fr 1.6fr;
+  }
+
+  :host([variant="risk"]) .bd-compattable-header {
+    grid-template-columns: 1fr 1.6fr;
+  }
+
+  .bd-compattable-header-cell {
+    padding: var(--spacing-16) var(--spacing-24);
+    color: var(--color-neutral-700);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-sm);
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: var(--font-weight-mono-semibold);
+  }
+
+  :host([variant="outcome"]) .bd-compattable-header-cell,
+  :host([variant="risk"]) .bd-compattable-header-cell {
+    font-size: var(--typography-fontSize-xs);
+    color: var(--color-neutral-600);
+  }
+
+  /* === BODY === */
+  .bd-compattable-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-compattable-row {
+    display: grid;
+    grid-template-columns: 1.4fr 1.2fr 2.4fr;
+    border-bottom: 1px solid var(--color-neutral-50, #f3f4f6);
+  }
+
+  :host([variant="outcome"]) .bd-compattable-row {
+    grid-template-columns: 1.2fr 1.6fr 1.6fr;
+  }
+
+  :host([variant="risk"]) .bd-compattable-row {
+    grid-template-columns: 1fr 1.6fr;
+  }
+
+  .bd-compattable-row:last-child {
+    border-bottom: none;
+  }
+
+  .bd-compattable-cell {
+    padding: var(--spacing-20) var(--spacing-24);
+    display: flex;
+    align-items: center;
+    color: var(--color-neutral-800);
+    font-size: var(--typography-fontSize-base);
+  }
+
+  .bd-compattable-cell--environment {
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .bd-compattable-cell--notes {
+    color: var(--color-neutral-800);
+    gap: var(--spacing-8);
+  }
+
+  .bd-compattable-cell--notes ::slotted(*) {
+    vertical-align: middle;
+  }
+
+  .bd-compattable-cell--event {
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .bd-compattable-cell--without {
+    color: var(--color-red-600, #dc2626);
+  }
+
+  .bd-compattable-cell--with {
+    color: var(--color-green-600, #16a34a);
+  }
+
+  .bd-compattable-cell--category {
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .bd-compattable-cell--riskcoverage {
+    color: var(--color-blue-700, #1d4ed8);
+  }
+
+  /* === LIGHT VARIANT === */
+  .bd-compattable-lightgrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--spacing-48);
+    row-gap: 0;
+  }
+
+  .bd-compattable-lightrow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--spacing-16);
+    padding: var(--spacing-16) 0;
+    border-bottom: 1px solid var(--color-neutral-100, #e5e7eb);
+  }
+
+  .bd-compattable-lightlabel {
+    color: var(--color-neutral-500);
+    font-size: var(--typography-fontSize-base);
+    flex-shrink: 0;
+  }
+
+  .bd-compattable-lightvalue {
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-semibold);
+    text-align: right;
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 767px) {
+    .bd-compattable-header {
+      display: none;
+    }
+
+    .bd-compattable-row {
+      grid-template-columns: 1fr;
+      padding: var(--spacing-16) var(--spacing-20);
+      gap: var(--spacing-4);
+    }
+
+    .bd-compattable-cell {
+      padding: var(--spacing-4) 0;
+    }
+
+    .bd-compattable-cell--coverage::before {
+      content: "Coverage: ";
+      color: var(--color-neutral-500);
+      font-size: var(--typography-fontSize-xs);
+      text-transform: uppercase;
+    }
+
+    .bd-compattable-cell--notes::before {
+      content: "Notes: ";
+      color: var(--color-neutral-500);
+      font-size: var(--typography-fontSize-xs);
+      text-transform: uppercase;
+    }
+
+    .bd-compattable-cell--without::before {
+      content: "Without AI Guardian: ";
+      color: var(--color-neutral-500);
+      font-size: var(--typography-fontSize-xs);
+      text-transform: uppercase;
+    }
+
+    .bd-compattable-cell--with::before {
+      content: "With AI Guardian: ";
+      color: var(--color-neutral-500);
+      font-size: var(--typography-fontSize-xs);
+      text-transform: uppercase;
+    }
+
+    .bd-compattable-cell--riskcoverage::before {
+      content: "AI Guardian coverage: ";
+      color: var(--color-neutral-500);
+      font-size: var(--typography-fontSize-xs);
+      text-transform: uppercase;
+    }
+
+    .bd-compattable-lightgrid {
+      grid-template-columns: 1fr;
+    }
+
+    .bd-compattable-lightrow {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-4);
+    }
+
+    .bd-compattable-lightvalue {
+      text-align: left;
+    }
+
+    .bd-compattable-wrapper {
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+  }
+`;

package/src/components/compatibility-table/compatibility-table.js

@@ -0,0 +1,123 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import compatibilityTableCSS from "./compatibility-table.css.js";
+
+class CompatibilityTable extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    variant    : { type: String, reflect: true }, // "default" | "outcome" | "risk" | "light"
+    background : { type: String, reflect: true }, // "default" | "blue"
+    columns    : { type: Array },
+    rows       : { type: Array }
+  };
+
+  static styles = [tokens, compatibilityTableCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.variant = "default";
+    this.background = "default";
+    this.columns = null;
+    this.rows = [];
+  }
+
+  _defaultColumns() {
+    if (this.columns) return this.columns;
+    if (this.variant === "outcome") return ["Agent event", "Without AI Guardian", "With AI Guardian"];
+    if (this.variant === "risk") return ["Risk category", "AI Guardian coverage"];
+    if (this.variant === "light") return null;
+    return ["Environment", "Coverage", "Notes"];
+  }
+
+  _renderRow(row) {
+    if (this.variant === "outcome") {
+      return html`
+        <div class="bd-compattable-row" role="row">
+          <span class="bd-compattable-cell bd-compattable-cell--event" role="cell">${row.event}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--without" role="cell">${row.without}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--with" role="cell">${row.with}</span>
+        </div>
+      `;
+    }
+
+    if (this.variant === "risk") {
+      return html`
+        <div class="bd-compattable-row" role="row">
+          <span class="bd-compattable-cell bd-compattable-cell--category" role="cell">${row.category}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--riskcoverage" role="cell">${row.coverage}</span>
+        </div>
+      `;
+    }
+
+    if (this.variant === "light") {
+      return html`
+        <div class="bd-compattable-lightrow" role="row">
+          <span class="bd-compattable-lightlabel" role="cell">${row.label}</span>
+          <span class="bd-compattable-lightvalue" role="cell">${row.value}</span>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="bd-compattable-row" role="row">
+        <span class="bd-compattable-cell bd-compattable-cell--environment" role="cell">${row.environment}</span>
+        <span class="bd-compattable-cell bd-compattable-cell--coverage" role="cell">${row.coverage}</span>
+        <span class="bd-compattable-cell bd-compattable-cell--notes" role="cell">${row.notes}</span>
+      </div>
+    `;
+  }
+
+  render() {
+    const columns = this._defaultColumns();
+
+    return html`
+      <div class="bd-compattable-wrapper">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-compattable-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="regular" class="bd-compattable-description">
+                <slot name="description">${this.description}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        ${this.variant === "light"
+          ? html`
+              <div class="bd-compattable-lightgrid" role="table">
+                ${this.rows.map((row) => this._renderRow(row))}
+                <slot name="rows"></slot>
+              </div>
+            `
+          : html`
+              <div class="bd-compattable-table-container" role="table">
+                <div class="bd-compattable-header" role="row">
+                  ${columns.map(
+                    (col) => html`<span class="bd-compattable-header-cell" role="columnheader">${col}</span>`
+                  )}
+                </div>
+
+                <div class="bd-compattable-body">
+                  ${this.rows.map((row) => this._renderRow(row))}
+                </div>
+
+                <slot name="rows"></slot>
+              </div>
+            `}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-compatibility-table", CompatibilityTable);

package/src/components/compatibility-table/compatibility-table.stories.js

@@ -0,0 +1,189 @@
+import { html } from "lit";
+import "./compatibility-table.js";
+
+export default {
+  title     : "Components/Compatibility Table",
+  component : "bd-compatibility-table",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**CompatibilityTable** displays a title, description, and a 3-column table inside a
+bordered, rounded card. It has two variants:
+
+- **default** (\`variant="default"\`, the default): Environment / Coverage / Notes —
+  used for platform/runtime compatibility matrices. \`notes\` accepts plain strings or
+  Lit \`html\` templates for inline badges/icons.
+- **outcome** (\`variant="outcome"\`): Agent event / Without AI Guardian / With AI
+  Guardian — the "without" column renders in red, the "with" column in green, for
+  before/after risk comparisons.
+
+### Usage
+\`\`\`html
+<!-- default variant -->
+<bd-compatibility-table
+  title="What does AI Guardian work with?"
+  .rows=\${[
+    { environment: "MCP clients and servers", coverage: "Supported in BETA", notes: "Tool inspection at the Model Context Protocol layer" }
+  ]}
+></bd-compatibility-table>
+
+<!-- outcome variant -->
+<bd-compatibility-table
+  variant="outcome"
+  title="The same agent, with and without AI Guardian"
+  .rows=\${[
+    { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" }
+  ]}
+></bd-compatibility-table>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default        | Description                                    |
+|------------------|--------|-----------------|---------------------------------------------------|
+| \`title\`          | String | \`""\`            | Heading above the table (or the \`title\` slot)   |
+| \`description\`    | String | \`""\`            | Paragraph under the title (or the \`description\` slot) |
+| \`variant\`        | String | \`"default"\`     | \`"default"\` or \`"outcome"\` — determines row shape, columns, and coloring |
+| \`columns\`        | Array  | variant default | Overrides the 3 header labels for either variant   |
+| \`rows\`           | Array  | \`[]\`            | default: \`{ environment, coverage, notes }\` — outcome: \`{ event, without, with }\` |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|----------------------------------------------------------|
+| \`title\`         | Overrides the \`title\` attribute if content is provided   |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| \`rows\`          | Extra freeform rows appended after the ones from \`rows\`   |
+        `
+      }
+    }
+  },
+  argTypes: {
+    variant    : { control: { type: "select" }, options: ["default", "outcome"], table: { category: "Appearance" } },
+    title      : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } },
+    rows       : { control: "object", table: { category: "Content" } }
+  }
+};
+
+// ─── Default variant ────────────────────────────────────────────────────────
+
+export const Default = {
+  name: "1. Default Variant — Compatibility",
+  args: {
+    variant    : "default",
+    title      : "What does AI Guardian work with?",
+    description: "AI Guardian attaches to the agent runtime on macOS, so coverage follows what an agent does on the machine rather than which vendor built it.",
+    rows       : [
+      { environment: "MCP clients and servers", coverage: "Supported in BETA", notes: "Tool inspection at the Model Context Protocol layer" },
+      { environment: "Agent skills and plugins", coverage: "Supported in BETA", notes: "Skill vetting before a skill executes" },
+      { environment: "macOS", coverage: "Supported in BETA", notes: "Initial platform" },
+      { environment: "Windows and Linux", coverage: "Planned", notes: "Not available in BETA" }
+    ]
+  },
+  render: (args) => html`
+    <bd-compatibility-table
+      variant=${args.variant}
+      title=${args.title}
+      description=${args.description}
+      .rows=${args.rows}
+    ></bd-compatibility-table>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The original variant: Environment / Coverage / Notes."
+      }
+    }
+  }
+};
+
+// ─── Outcome variant — new iteration ────────────────────────────────────────
+
+export const Outcome = {
+  name: "2. Outcome Variant — With/Without",
+  args: {
+    variant    : "outcome",
+    title      : "The same agent, with and without AI Guardian",
+    description: "",
+    rows       : [
+      { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" },
+      { event: "Malicious MCP tool", without: "Tool runs and can steer the agent", with: "Blocked before the agent calls it" },
+      { event: "API key in a prompt", without: "Secret can leave the machine", with: "Credential exposure is detected" },
+      { event: "Access to ~/.ssh/id_rsa", without: "Sensitive files readable by the agent", with: "Unauthorised access is blocked" },
+      { event: "Unreviewed skill", without: "Runs without inspection", with: "Vetted before it runs" }
+    ]
+  },
+  render: (args) => html`
+    <bd-compatibility-table
+      variant=${args.variant}
+      title=${args.title}
+      description=${args.description}
+      .rows=${args.rows}
+    ></bd-compatibility-table>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The new outcome variant: Agent event / Without AI Guardian (red) / With AI Guardian (green) — matches the reference screenshot exactly."
+      }
+    }
+  }
+};
+
+export const OutcomeWithDescription = {
+  name: "3. Outcome Variant — With Description",
+  args: {
+    variant    : "outcome",
+    title      : "The same agent, with and without AI Guardian",
+    description: "A side-by-side look at how common risky events play out with AI Guardian active versus not.",
+    rows       : [
+      { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" },
+      { event: "Malicious MCP tool", without: "Tool runs and can steer the agent", with: "Blocked before the agent calls it" }
+    ]
+  },
+  render: (args) => html`
+    <bd-compatibility-table
+      variant=${args.variant}
+      title=${args.title}
+      description=${args.description}
+      .rows=${args.rows}
+    ></bd-compatibility-table>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Outcome variant with an optional description paragraph under the title."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    variant    : "outcome",
+    title      : "The same agent, with and without AI Guardian",
+    description: "",
+    rows       : [
+      { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" },
+      { event: "Malicious MCP tool", without: "Tool runs and can steer the agent", with: "Blocked before the agent calls it" }
+    ]
+  },
+  render: (args) => html`
+    <bd-compatibility-table
+      variant=${args.variant}
+      title=${args.title}
+      description=${args.description}
+      .rows=${args.rows}
+    ></bd-compatibility-table>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive — switch `variant` in Controls to see both table shapes."
+      }
+    }
+  }
+};

package/src/components/cta-banner/cta-banner.css.js

@@ -0,0 +1,60 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-ctabanner-container {
+    background: radial-gradient(1200px 600px at 78% -10%, var(--color-blue-400) 0%, transparent 55%), linear-gradient(160deg, var(--color-blue-500) 0%, var(--color-blue-700) 48%, var(--color-blue-950) 100%);
+    padding: var(--spacing-64) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--spacing-16);
+  }
+
+  .bd-ctabanner-title {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+    max-width: 800px;
+  }
+
+  .bd-ctabanner-description {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+    color: rgba(255, 255, 255, 0.85);
+    max-width: 640px;
+  }
+
+  .bd-ctabanner-cta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--spacing-16);
+  }
+
+  .bd-ctabanner-caption {
+    display: block;
+    margin: var(--spacing-8) 0 0;
+    color: rgba(255, 255, 255, 0.6);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+  }
+
+  @media (max-width: 599px) {
+    .bd-ctabanner-container {
+      padding: var(--spacing-48) var(--spacing-24);
+    }
+
+    .bd-ctabanner-cta {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+`;

package/src/components/cta-banner/cta-banner.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 ctaBannerCSS from "./cta-banner.css.js";
+
+class CtaBanner extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    caption    : { type: String }
+  };
+
+  static styles = [tokens, ctaBannerCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.caption = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-ctabanner-container">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-ctabanner-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="large" class="bd-ctabanner-description">
+                <slot name="description">${this.description}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <div class="bd-ctabanner-cta">
+          <slot name="primary-button"></slot>
+          <slot name="secondary-button"></slot>
+        </div>
+
+        ${this.caption
+          ? html`
+             <bd-p
+  kind="small"
+  class="bd-ctabanner-caption"
+  font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+>
+  <slot name="caption">${this.caption}</slot>
+</bd-p>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-cta-banner", CtaBanner);

package/src/components/dropdown/dropdown.css.js

@@ -78,7 +78,7 @@ export default css`
   }
 
   .input-md {
-    padding: var(--spacing-12) var(--spacing-16);
+    padding: var(--spacing-8) var(--spacing-16);
     font-size: var(--typography-fontSize-base);
     height: var(--dimension-45px);
     border-radius: var(--form-input-large-borderRadius);

package/src/components/footer/footer.css.js

@@ -9,7 +9,6 @@ export default css`
     font-size: var(--typography-body-small-fontSize);
     line-height: var(--typography-lineHeight-normal); 
   }
-/* Stiluri de accesibilitate pentru toate link-urile din footer */
 .footer-nav-main a:focus,
 .footer-links a:focus,
 .footer-countries-container a:focus,