@xmesh/system-design 0.0.1

package/dist/lit/components/breadcrumbs/index.css

@@ -0,0 +1,91 @@
+/* ============================================
+   <xm-breadcrumbs> — location trail.
+
+   Surface / ink (AD-13): a transparent trail that traces its host surface.
+   On the desk family: link ink var(--md-sys-color-on-surface-variant), hover
+   var(--md-sys-color-on-surface); the CURRENT (last) item is coral
+   var(--md-sys-color-primary) — the page indicator. The divider glyph is a
+   muted neutral, never a status hue.
+
+   BEM: block `breadcrumbs`; elements `__item` `__link` `__current`
+   `__separator` `__slash`.
+   ============================================ */
+
+.breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+}
+
+.breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  min-width: 0;
+}
+
+.breadcrumbs__link {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-on-surface-variant);
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.breadcrumbs__link:hover {
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+.breadcrumbs__link:focus {
+  outline: none;
+}
+.breadcrumbs__link:focus-visible {
+  outline: none;
+  color: var(--md-sys-color-on-surface);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.breadcrumbs__current {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  color: var(--md-sys-color-primary);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* A non-last item with no href: plain, non-interactive text — NOT the coral
+   current-page treatment (only the last item is the current page). */
+.breadcrumbs__text {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  color: var(--md-sys-color-on-surface-variant);
+  white-space: nowrap;
+}
+
+.breadcrumbs__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.breadcrumbs__slash {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1;
+}

package/dist/lit/components/breadcrumbs/index.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+type BreadcrumbSeparator = "chevron" | "slash";
+declare class XmBreadcrumbs extends LitElement {
+    items: BreadcrumbItem[];
+    separator: BreadcrumbSeparator;
+    render(): TemplateResult;
+    private _separatorGlyph;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-breadcrumbs": XmBreadcrumbs;
+    }
+}
+export {};

package/dist/lit/components/breadcrumbs/index.js

@@ -0,0 +1,104 @@
+/*
+  breadcrumbs/index.ts — <xm-breadcrumbs>, the location trail.
+
+  <xm-breadcrumbs> — a trail of link items separated by a divider glyph,
+  wrapped in a labeled nav landmark with an ordered list. The last item is
+  the current page: not a link, coral-emphasized, aria-current="page".
+
+  API — items are supplied via the `items` PROPERTY (canonical):
+    el.items = [
+      { label: "Workspaces", href: "/workspaces" },
+      { label: "Smart routing", href: "/workspaces/smart-routing" },
+      { label: "domains.yml" },   // last item = current page (no href)
+    ];
+
+  The last entry is always the current page (its href is ignored). Labels
+  render in sentence case; tech identifiers stay caps.
+
+  Properties:
+    items       Array<{ label: string; href?: string }>
+    separator   "chevron" | "slash"   (default "chevron")
+
+  Surface / ink (AD-13): a transparent trail. On the desk family link ink is
+  on-surface-variant, hover on-surface, current is coral primary. The divider
+  glyph is decorative (aria-hidden) and uses muted neutral ink.
+
+  Shadow DOM; Lit from lit; sibling CSS + primitives CSS
+  via the built-file-relative new URL(...). The chevron is the shared
+  primitives line-icon (xm-chevron-right-icon) — never an inlined SVG.
+  BEM block `breadcrumbs`.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/breadcrumbs/index.js → ../...
+const BREADCRUMBS_CSS = new URL("../breadcrumbs/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let XmBreadcrumbs = class XmBreadcrumbs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.separator = "chevron";
+    }
+    render() {
+        const items = Array.isArray(this.items) ? this.items : [];
+        const lastIndex = items.length - 1;
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
+      <link rel="stylesheet" href="${BREADCRUMBS_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <nav aria-label="Breadcrumb">
+        <ol class="breadcrumbs">
+          ${items.map((item, i) => {
+            const isLast = i === lastIndex;
+            return html `
+              <li class="breadcrumbs__item">
+                ${isLast
+                ? html `<span class="breadcrumbs__current" aria-current="page"
+                      >${item.label}</span
+                    >`
+                : item.href
+                    ? html `<a class="breadcrumbs__link" href="${item.href}"
+                        >${item.label}</a
+                      >`
+                    : html `<span class="breadcrumbs__text">${item.label}</span>`}
+                ${isLast
+                ? nothing
+                : html `<span class="breadcrumbs__separator" aria-hidden="true"
+                      >${this._separatorGlyph()}</span
+                    >`}
+              </li>
+            `;
+        })}
+        </ol>
+      </nav>
+    `;
+    }
+    _separatorGlyph() {
+        return this.separator === "slash"
+            ? html `<span class="breadcrumbs__slash">/</span>`
+            : html `<xm-chevron-right-icon size="14"></xm-chevron-right-icon>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], XmBreadcrumbs.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], XmBreadcrumbs.prototype, "separator", void 0);
+XmBreadcrumbs = __decorate([
+    customElement("xm-breadcrumbs")
+], XmBreadcrumbs);

package/dist/lit/components/bubble/index.css

@@ -0,0 +1,182 @@
+/* ============================================================
+   <Bubble /> — chat message vocabulary
+
+   Three exported components share this stylesheet:
+     • .bubble                — the message body itself (--user | --bot)
+     • .bubble-group          — column wrapping bubble + actions, anchored
+                                left for bot, right for user
+     • .bubble-actions        — hover-reveal toolbar (timestamp + icons)
+
+   Pairs with components/bubble/index.jsx. Loaded directly by every preview
+   page that renders a chat thread (bubbles.html, chat.html). No tag
+   selectors — paragraph, list, strong, code content is wrapped by the
+   JSX <BubbleBody> walker into .bubble__paragraph / .bubble__list / etc.
+   ============================================================ */
+
+/* ---------- Bubble body ---------- */
+.bubble {
+  max-width: 640px;
+  font:
+    var(--md-sys-typescale-body-large-weight)
+    var(--md-sys-typescale-body-large-size) /
+    var(--md-sys-typescale-body-large-line-height)
+    var(--md-sys-typescale-body-large-font);
+}
+/* User bubble shares the composer's raised family (surface-container-high)
+   so "your voice" reads as one surface across input and thread.
+   surface-container-lowest was ~black in dark and vanished into the desk;
+   the high container sits a clear step above `surface` in both themes. */
+.bubble--user {
+  padding: 11px var(--s-4-5);
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+}
+/* Bot bubble has no surface of its own — it rides whatever's behind it.
+   In the xmesh chat the thread sits on `surface` (the warm dark "desk"
+   in dark theme, cream in light), so the bot bubble uses on-surface. The
+   primitives flip per theme — a single rule covers both. If a host page
+   puts the thread on `inverse-surface` (a card) instead, override with
+   .bubble--bot { color: var(--md-sys-color-inverse-on-surface) } at the
+   page level. */
+.bubble--bot {
+  padding: 0 var(--s-0-5);
+  color: var(--md-sys-color-on-surface);
+  max-width: 720px;
+  background: transparent;
+}
+
+/* ---------- Bubble body content (BEM-wrapped by <BubbleBody>) ---------- */
+.bubble__paragraph { margin: 0 0 0.75em; }
+.bubble__paragraph:last-child { margin-bottom: 0; }
+
+.bubble__list { margin: var(--s-1) 0 0; padding-left: var(--s-5-5); }
+.bubble__list--ordered { list-style: decimal; }
+.bubble__list--unordered { list-style: none; padding-left: var(--s-5-5); }
+.bubble__list-item { padding-left: var(--s-1-5); margin-bottom: var(--s-1-5); }
+.bubble__list--ordered .bubble__list-item::marker {
+  color: var(--xm-color-on-surface-soft);
+  font-variant-numeric: tabular-nums;
+}
+.bubble__list--unordered .bubble__list-item {
+  position: relative;
+  padding-left: var(--s-3-5);
+  margin-bottom: var(--s-1);
+}
+.bubble__list--unordered .bubble__list-item::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 0.7em;
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: var(--xm-color-on-surface-soft);
+}
+
+.bubble__strong { font-weight: 600; color: var(--md-sys-color-on-surface); }
+
+/* Inline code — flat: monospaced ink shift, no chip background.
+   The page can still override --xm-color-code-ink at :root for accent
+   variants (see bubbles.html for the canonical override). */
+.bubble__code {
+  background: transparent;
+  color: var(--xm-color-code-ink, oklch(0.55 0.16 25));
+  padding: 0;
+  border-radius: 0;
+  font: 500 12.5px/1.4 var(--xm-typescale-mono-font);
+}
+
+/* ---------- Bubble group (column wrapper) ---------- */
+.bubble-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1-5);
+  max-width: 720px;
+}
+.bubble-group--user {
+  align-items: flex-end;
+  max-width: 640px;
+}
+.bubble-group--bot {
+  align-items: flex-start;
+}
+
+/* ---------- Bubble actions (hover-reveal toolbar) ---------- */
+.bubble-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2-5);
+  padding: 0 var(--s-1);
+  background: transparent;
+  border: 0;
+  color: var(--xm-color-on-surface-soft);
+  opacity: 0;
+  transform: translateY(-1px);
+  transition:
+    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  pointer-events: none;
+}
+.bubble-group:hover .bubble-actions,
+.bubble-group:focus-within .bubble-actions {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.bubble-actions__ts {
+  font: 400 12px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  letter-spacing: 0.02em;
+}
+
+.bubble-actions__btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--xm-color-on-surface-soft);
+  padding: var(--s-1);
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.bubble-actions__btn:hover {
+  background: color-mix(in oklch, currentColor 14%, transparent);
+  color: var(--md-sys-color-on-surface);
+}
+.bubble-actions__btn svg {
+  width: 16px; height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---------- Attachment chips (used when user bubble carries files) ---------- */
+.bubble__atts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-1-5);
+  margin-bottom: var(--s-1-5);
+}
+.bubble__att-mini {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  padding: var(--s-1) var(--s-2);
+  border-radius: 6px;
+  background: color-mix(in oklab, currentColor 12%, transparent);
+  font: 500 11px/1 var(--xm-typescale-mono-font);
+}
+.bubble__att-thumb {
+  width: 14px; height: 14px;
+  border-radius: 3px;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+}

package/dist/lit/components/bubble/index.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, nothing } from "lit";
+import type { TemplateResult } from "lit";
+import "../button/index.js";
+export type BubbleVariant = "user" | "bot";
+export interface BubbleAttachment {
+    id?: string;
+    name: string;
+    kind: "image" | "file" | string;
+    dataUrl?: string;
+}
+export interface BubbleArtifact {
+    title: string;
+    sub?: string[];
+    provider?: string;
+}
+declare class LightElement extends LitElement {
+    createRenderRoot(): HTMLElement | DocumentFragment;
+}
+declare class XmBubbleGroup extends LightElement {
+    variant: BubbleVariant;
+    private _authoredChildren;
+    connectedCallback(): void;
+    render(): TemplateResult;
+    updated(): void;
+}
+declare class XmBubble extends LightElement {
+    variant: BubbleVariant;
+    attachments: BubbleAttachment[];
+    artifact: BubbleArtifact | null;
+    download: boolean;
+    text: string;
+    bodyHtml: string;
+    private _authored;
+    connectedCallback(): void;
+    private _onArtifactOpen;
+    private _onArtifactDownload;
+    private _attachmentTemplate;
+    private _artifactTemplate;
+    render(): TemplateResult;
+    updated(): void;
+}
+declare class XmBubbleActions extends LightElement {
+    ts: string;
+    ariaLabel: string;
+    private _authored;
+    private _copyResetTimer;
+    private _stragglerObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _isRenderedShell;
+    private _harvestAuthored;
+    private _onDelegatedClick;
+    private _showCopiedFeedback;
+    render(): TemplateResult;
+    updated(): void;
+}
+declare class XmArtifactChip extends LightElement {
+    artifact: BubbleArtifact | null;
+    download: boolean;
+    private _open;
+    private _download;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-bubble-group": XmBubbleGroup;
+        "xm-bubble": XmBubble;
+        "xm-bubble-actions": XmBubbleActions;
+        "xm-artifact-chip": XmArtifactChip;
+    }
+}
+export {};