@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/overview/overview.stories.js

@@ -0,0 +1,193 @@
+import { html } from "lit";
+import "./overview.js";
+
+export default {
+  title     : "Components/Overview",
+  component : "bd-info-panel",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**InfoPanel** pairs a large title + description on the left with a stacked list of
+labeled facts on the right, each row separated by a thin top border line — a
+"spec sheet" style layout, e.g. for a product's key facts.
+
+### Usage
+\`\`\`html
+<bd-info-panel
+  title="What is AI Guardian?"
+  description="AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows."
+  .facts=\${[
+    { label: "CATEGORY", value: "AI agent security" },
+    { label: "PLATFORM", value: "macOS (initial)" },
+    { label: "RUNS AS", value: "Background service" },
+    { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+  ]}
+></bd-info-panel>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                             |
+|------------------|--------|---------|-------------------------------------------------------------|
+| \`title\`          | String | \`""\`    | Large heading on the left (or use the \`title\` slot)         |
+| \`description\`    | String | \`""\`    | Supporting paragraph under the title (or the \`description\` slot) |
+| \`facts\`          | Array  | \`[]\`    | Right-column rows: \`{ label, value }\`                       |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|--------------------------------------------------------------|
+| \`title\`         | Overrides the \`title\` attribute if content is provided       |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| \`facts\`         | Extra freeform fact rows appended after the ones from \`facts\` |
+| (default)       | Extra freeform content appended after the description on the left |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title      : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } },
+    facts      : { control: "object", table: { category: "Content" } }
+  }
+};
+
+const render = (args) => html`
+  <bd-info-panel
+    title=${args.title}
+    description=${args.description}
+    .facts=${args.facts}
+  ></bd-info-panel>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: title + description on the left, 4 labeled fact rows on the right, each preceded by a thin blue divider line."
+      }
+    }
+  }
+};
+
+export const TwoFacts = {
+  name: "Two Facts",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "A shorter description paired with just two fact rows on the right.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only 2 facts — the right column is simply shorter, no extra spacing added to compensate."
+      }
+    }
+  }
+};
+
+export const ManyFacts = {
+  name: "Many Facts",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "A longer fact list demonstrates the row/divider pattern repeating cleanly.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" },
+      { label: "PRICING", value: "Free during open BETA" },
+      { label: "LANGUAGE", value: "Swift" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "6 fact rows — the pattern of divider + label + value repeats consistently regardless of count."
+      }
+    }
+  }
+};
+
+export const NoDescription = {
+  name: "No Description",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`description` omitted — no paragraph rendered under the title, no leftover gap."
+      }
+    }
+  }
+};
+
+export const SlottedContent = {
+  name  : "Slotted Title, Description, and Extra Facts",
+  render: () => html`
+    <bd-info-panel>
+      <span slot="title">Custom <em>slotted</em> title</span>
+      <span slot="description">Custom slotted description with <strong>inline markup</strong>.</span>
+
+      <div slot="facts" class="bd-infopanel-row" style="display:flex; flex-direction:column; gap:4px; padding-top:16px;">
+        <div style="border-top: 1px solid #3b82f6; margin-bottom:16px;"></div>
+        <span style="text-transform:uppercase; letter-spacing:0.06em; font-size:12px; color:#60a5fa;">EXTRA</span>
+        <strong>A manually slotted fact row</strong>
+      </div>
+    </bd-info-panel>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates overriding `title`/`description` via slots (for inline markup) and appending an extra fact row via the `facts` slot alongside the ones generated from the `facts` array."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    title      : "What is AI Guardian?",
+    description: "AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents.",
+    facts      : [
+      { label: "CATEGORY", value: "AI agent security" },
+      { label: "PLATFORM", value: "macOS (initial)" },
+      { label: "RUNS AS", value: "Background service" },
+      { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit title, description, and the facts array live."
+      }
+    }
+  }
+};

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

@@ -0,0 +1,100 @@
+import { css } from "lit";
+
+export const pageSwitcherStyles = css`
+  :host {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    background: var(--color-neutral-0);
+    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
+    --bd-accesibility-focus: var(--color-blue-500);
+  }
+
+  .inner {
+    max-width: 1200px;
+    margin-inline: auto;
+    padding-block: var(--spacing-16);
+    padding-inline: var(--spacing-24);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-32);
+  }
+
+  .logo {
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  .logo span {
+    color: var(--color-blue-500);
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-16) var(--spacing-32);
+  }
+
+  .page-link {
+    position: relative;
+    text-decoration: none !important;
+    color: var(--color-neutral-900);
+    font-weight: var(--typography-fontWeight-normal);
+    padding: var(--spacing-10) var(--spacing-0);
+    display: inline-block;
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-body-regular-fontFamily);
+    transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .page-link.active {
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  .page-link:hover,
+  .page-link.bd-link--primary:hover {
+    color: var(--color-blue-500) !important;
+    text-decoration: none !important;
+  }
+
+  .page-link.bd-link--secondary:hover {
+    color: var(--color-neutral-900) !important;
+    text-decoration: none !important;
+  }
+
+  .page-link.active:hover {
+    color: var(--color-neutral-900) !important;
+  }
+
+  .page-link::after {
+    content: "";
+    position: absolute;
+    left: var(--spacing-0);
+    bottom: calc(-1 * var(--spacing-14));
+    width: 0%;
+    height: var(--border-width-3);
+    background-color: var(--color-blue-500);
+    transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
+  }
+
+  .page-link.active::after {
+    width: 100%;
+  }
+
+  .page-link:focus-visible {
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
+    border-radius: var(--space-2xs);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .page-link::after {
+      transition: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,42 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../icons/bd-ai-icon.js";
+import "../link/link.js";
+import { pageSwitcherStyles } from "./page-switcher.css.js";
+
+class BdPageSwitcher extends LitElement {
+  static properties = {
+    items: { type: Array } // [{ title, href, active }]
+  };
+
+  static styles = [tokens, pageSwitcherStyles];
+
+  constructor() {
+    super();
+    this.items = [];
+  }
+
+  render() {
+    return html`
+      <div class="inner">
+        <bd-ai-icon class="logo" width="126" height="24"></bd-ai-icon>
+
+        <nav aria-label="Product navigation">
+          ${this.items.map(({ title, href, active }) => html`
+            <bd-link
+              href=${href}
+              kind=${active ? "primary" : "secondary"}
+              no-underline
+              color="var(--color-neutral-900)"
+              ?active=${active}
+              aria-current=${active ? "true" : nothing}
+              class="page-link ${active ? "active" : ""}"
+            >${title || nothing}</bd-link>
+          `)}
+        </nav>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-page-switcher", BdPageSwitcher);

package/src/components/paragraph/paragraph.css.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   :host {
     display: block;
-    color: var(--color-neutral-1000);
+    color: var(--bd-paragraph-color, var(--color-neutral-1000));
   }
 
   p {
@@ -47,8 +47,4 @@ export default css`
     line-height: var(--typography-body-lead-lineHeight);
     letter-spacing: var(--typography-body-lead-letterSpacing);
   }
-
-
-  
-
 `;

package/src/components/paragraph/paragraph.js

@@ -7,8 +7,9 @@ export class BdP extends LitElement {
     kind         : { type: String, reflect: true },
     padding      : { type: String },
     paddingBottom: { type: String },
-    paddingTop   : { type: String }
-
+    paddingTop   : { type: String },
+    fontFamily   : { type: String, attribute: "font-family" },
+    fontWeight   : { type: String, attribute: "font-weight" }
   };
 
   constructor() {
@@ -17,7 +18,8 @@ export class BdP extends LitElement {
     this.padding = "";
     this.paddingBottom = "";
     this.paddingTop = "";
-
+    this.fontFamily = "";
+    this.fontWeight = "";
   }
 
   _getKindClass() {
@@ -38,6 +40,8 @@ export class BdP extends LitElement {
     if (this.padding) styles.push(`padding: ${this.padding};`);
     if (this.paddingBottom) styles.push(`padding-bottom: ${this.paddingBottom};`);
     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};`);
 
     const kindClass = this._getKindClass();
 

package/src/components/process-steps/process-steps.css.js

@@ -0,0 +1,95 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-processsteps-container {
+        color: var(--color-neutral-0);
+    background: linear-gradient(160deg, var(--color-neutral-800) 0%, #0b1626 100%);
+    padding: var(--spacing-64) var(--spacing-24) var(--spacing-64) var(--spacing-24);
+    box-sizing: border-box;
+  }
+
+  .bd-processsteps-title {
+    display: block;
+    margin: 0 0 var(--spacing-12);
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .bd-processsteps-description {
+    display: block;
+    margin: 0 0 var(--spacing-40);
+    color: var(--color-neutral-300, #d1d5db);
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    --typography-body-regular-fontWeight: var(--typography-fontWeight-bold, 700);
+
+  }
+
+  /* === GRID === */
+  .bd-processsteps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-32);
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .bd-processsteps-step {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-processsteps-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-processsteps-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    margin-bottom: var(--spacing-16);
+    color: var(--color-blue-400, #60a5fa);
+  }
+
+  .bd-processsteps-icon-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .bd-processsteps-step-title {
+    display: block;
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-neutral-0, #fff);
+  }
+
+  .bd-processsteps-step-description {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-300, #d1d5db);
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-processsteps-grid {
+      grid-template-columns: 1fr;
+      gap: var(--spacing-32);
+    }
+
+    .bd-processsteps-container {
+      padding: var(--spacing-48) var(--spacing-24);
+    }
+  }
+`;

package/src/components/process-steps/process-steps.js

@@ -0,0 +1,72 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../icons/close-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/guide-icon.js";
+import "../paragraph/paragraph.js";
+import processStepsCSS from "./process-steps.css.js";
+
+class ProcessSteps extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String },
+    steps      : { type: Array } // [{ icon: TemplateResult|String, title: String, description: String }]
+  };
+
+  static styles = [tokens, processStepsCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.steps = [];
+  }
+
+  _renderIcon(icon) {
+    if (!icon) return nothing;
+    if (typeof icon === "string") {
+      return html`<img src="${icon}" alt="" class="bd-processsteps-icon-img" />`;
+    }
+    return icon;
+  }
+
+  render() {
+    return html`
+      <div class="bd-processsteps-container">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-processsteps-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="regular" class="bd-processsteps-description">
+                <slot name="description">${this.description}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <div class="bd-processsteps-grid">
+          ${this.steps.map(
+            (step) => html`
+              <div class="bd-processsteps-step">
+                <div class="bd-processsteps-divider"></div>
+                <div class="bd-processsteps-icon-wrap">${this._renderIcon(step.icon)}</div>
+                <bd-h as="h4" class="bd-processsteps-step-title">${step.title}</bd-h>
+                <bd-p kind="regular" class="bd-processsteps-step-description">${step.description}</bd-p>
+              </div>
+            `
+          )}
+        </div>
+
+        <slot name="steps"></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-process-steps", ProcessSteps);

package/src/components/process-steps/process-steps.stories.js

@@ -0,0 +1,144 @@
+import { html } from "lit";
+import "../icons/close-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/guide-icon.js";
+import "./process-steps.js";
+
+export default {
+  title     : "Components/Process Steps",
+  component : "bd-process-steps",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**ProcessSteps** is a dark-background section showing a title, description, and a
+3-column row of steps — each with a top divider line, icon, title, and description —
+used to explain a sequential process or workflow.
+
+Icons are rendered via the \`icon\` field in each step object, using real icon
+components from \`components/icons\` (e.g. \`<bd-guide-icon>\`), not inline SVGs.
+
+### Usage
+\`\`\`html
+<bd-process-steps
+  title="Policy, guardrail, verdict"
+  description="AI Guardian works in three stages: you set a policy baseline, it enforces guardrails at execution, and it monitors and responds to what happens."
+  .steps=\${[
+    { icon: html\`<bd-guide-icon width="40" height="40"></bd-guide-icon>\`, title: "Set a policy baseline", description: "..." },
+    { icon: html\`<bd-close-icon width="40" height="40"></bd-close-icon>\`, title: "Guardrails at execution", description: "..." },
+    { icon: html\`<bd-globe-icon width="40" height="40"></bd-globe-icon>\`, title: "Monitor and respond", description: "..." }
+  ]}
+></bd-process-steps>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                                   |
+|------------------|--------|---------|------------------------------------------------------------------|
+| \`title\`          | String | \`""\`    | Heading above the description (or the \`title\` slot)               |
+| \`description\`    | String | \`""\`    | Paragraph under the title (or the \`description\` slot)             |
+| \`steps\`          | Array  | \`[]\`    | \`{ icon, title, description }\` — \`icon\` can be a URL string or a Lit template (real icon component) |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|--------------------------------------------------------------|
+| \`title\`         | Overrides the \`title\` attribute if content is provided       |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| \`steps\`         | Extra freeform steps appended after the ones from \`steps\`     |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title      : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } }
+  }
+};
+
+const iconGuide = html`<bd-guide-icon width="40" height="40" color="#60a5fa"></bd-guide-icon>`;
+const iconClose = html`<bd-close-icon width="40" height="40" color="#60a5fa"></bd-close-icon>`;
+const iconGlobe = html`<bd-globe-icon width="40" height="40" color="#60a5fa"></bd-globe-icon>`;
+
+const render = (args) => html`
+  <bd-process-steps
+    title=${args.title}
+    description=${args.description}
+    .steps=${[
+      { icon: iconGuide, title: "Set a policy baseline", description: "Define what agents are allowed to do — permissions, policies, and auditing for tools, files, and actions." },
+      { icon: iconClose, title: "Guardrails at execution", description: "Every tool call and action is checked against policy in real time and gets a verdict: allowed, flagged, or blocked." },
+      { icon: iconGlobe, title: "Monitor and respond", description: "Security events feed monitoring and response workflows, so teams can review what agents did and why." }
+    ]}
+  ></bd-process-steps>
+`;
+
+export const Default = {
+  name: "Default — Policy, Guardrail, Verdict",
+  args: {
+    title      : "Policy, guardrail, verdict",
+    description: "AI Guardian works in three stages: you set a policy baseline, it enforces guardrails at execution, and it monitors and responds to what happens."
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design: dark gradient background, title + description, and a 3-column row of steps using real icon components from the icons folder."
+      }
+    }
+  }
+};
+
+export const FourSteps = {
+  name  : "Four Steps",
+  render: () => html`
+    <bd-process-steps
+      title="How it works"
+      description="A four-stage version, demonstrating the grid with more than three items."
+      .steps=${[
+        { icon: iconGuide, title: "Define policy", description: "Set the rules agents must follow." },
+        { icon: iconClose, title: "Enforce at runtime", description: "Every action is checked live." },
+        { icon: iconGlobe, title: "Monitor", description: "Track what happened and why." },
+        { icon: iconGuide, title: "Respond", description: "Act on flagged or blocked events." }
+      ]}
+    ></bd-process-steps>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "4 steps — the grid stays 3 columns wide on desktop, wrapping the 4th onto a new row."
+      }
+    }
+  }
+};
+
+export const NoDescription = {
+  name: "No Description",
+  args: {
+    title      : "Policy, guardrail, verdict",
+    description: ""
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`description` omitted — no paragraph rendered under the title, no leftover gap."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    title      : "Policy, guardrail, verdict",
+    description: "AI Guardian works in three stages: you set a policy baseline, it enforces guardrails at execution, and it monitors and responds to what happens."
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit title and description live."
+      }
+    }
+  }
+};