@xmesh/system-design 0.0.1

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

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type CardSize = "xs" | "sm" | "md" | "lg";
+type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
+declare class XmCard extends LitElement {
+    elevation: CardElevation;
+    size: CardSize;
+    private _mo;
+    render(): TemplateResult;
+    private _slotEmpty;
+    private _onSlot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-card": XmCard;
+    }
+}
+export {};

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

@@ -0,0 +1,133 @@
+/*
+  card/index.ts — <xm-card>, the general-purpose containment surface.
+
+  <xm-card> — a card-stack container for non-chat screens. Belongs to the
+  INVERSE-SURFACE family (like the drawer), the opposite of the app bar:
+  background var(--md-sys-color-inverse-surface), ink
+  var(--md-sys-color-inverse-on-surface). The card tier is theme-following
+  (ADR 0006): a lifted dark surface in dark theme, white in light — ink follows.
+
+  Authoring:
+    <xm-card elevation="2">
+      <span slot="header">Routing pipeline</span>
+      Body content goes in the default slot.
+      <span slot="footer">3 agents · updated 2 minutes ago</span>
+      <xm-button slot="action" variant="ghost" size="sm">Edit</xm-button>
+      <xm-button slot="action" variant="primary" size="sm">Run</xm-button>
+    </xm-card>
+
+  Properties:
+    elevation   0–5 — selects --md-sys-elevation-level*  (default 2)
+    size        "xs" | "sm" | "md" | "lg"   (default "md")
+
+  Slots:
+    header   leading region (split from body by a 1px rule)
+    default  body content
+    footer   trailing region (split from body by a 1px rule)
+    action   SINGULAR trailing-action region in the footer row
+
+  Shadow DOM; Lit from lit; sibling CSS via the
+  built-file-relative new URL(...). BEM block `card`.
+*/
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/card/index.js → ../card/index.css.
+const CARD_CSS = new URL("../card/index.css", import.meta.url).href;
+let XmCard = class XmCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.elevation = 2;
+        this.size = "md";
+        this._mo = null;
+        this._onSlot = () => {
+            this.requestUpdate();
+        };
+    }
+    render() {
+        const elevation = [0, 1, 2, 3, 4, 5].includes(this.elevation)
+            ? this.elevation
+            : 2;
+        const size = ["xs", "sm", "md", "lg"].includes(this.size)
+            ? this.size
+            : "md";
+        const headerEmpty = this._slotEmpty("header");
+        const footerEmpty = this._slotEmpty("footer");
+        const actionEmpty = this._slotEmpty("action");
+        const footerHidden = footerEmpty && actionEmpty;
+        return html `
+      <link rel="stylesheet" href="${CARD_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <article class="card card--elevation-${elevation} card--${size}">
+        <div class="card__header ${headerEmpty ? "is-empty" : ""}">
+          <slot name="header" @slotchange=${this._onSlot}></slot>
+        </div>
+        <div class="card__body">
+          <slot @slotchange=${this._onSlot}></slot>
+        </div>
+        <div class="card__footer ${footerHidden ? "is-empty" : ""}">
+          <div class="card__footer-content ${footerEmpty ? "is-empty" : ""}">
+            <slot name="footer" @slotchange=${this._onSlot}></slot>
+          </div>
+          <div class="card__action ${actionEmpty ? "is-empty" : ""}">
+            <slot name="action" @slotchange=${this._onSlot}></slot>
+          </div>
+        </div>
+      </article>
+    `;
+    }
+    _slotEmpty(name) {
+        for (const node of this.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const slotName = node.getAttribute("slot");
+                const target = name || null;
+                const matches = (target === null && !slotName) || slotName === target;
+                if (matches)
+                    return false;
+            }
+            else if (node.nodeType === Node.TEXT_NODE && !name) {
+                if (node.textContent?.trim())
+                    return false;
+            }
+        }
+        return true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._mo) {
+            this._mo = new MutationObserver(() => this.requestUpdate());
+            this._mo.observe(this, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._mo?.disconnect();
+        this._mo = null;
+    }
+};
+__decorate([
+    property({ type: Number })
+], XmCard.prototype, "elevation", void 0);
+__decorate([
+    property({ type: String })
+], XmCard.prototype, "size", void 0);
+XmCard = __decorate([
+    customElement("xm-card")
+], XmCard);

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

@@ -0,0 +1,292 @@
+/* ============================================================
+   <ChatShell /> — full-viewport interactive chat layout.
+
+   Three-region grid (sidebar | top / center) that grows a fourth
+   region (artifact) when the artifact viewer opens. Owns the
+   layout, scroll regions, and composer overlay only — every
+   visual element (Bubble, Composer, BrandMark, SidebarItem,
+   Artifact) lives in its own components/<name>/index.css.
+
+   Two BEM blocks live here:
+     .chat-shell       — the grid + top-bar + thread + composer overlay
+     .chat-sidebar     — the left column (conversations list, search)
+                         promoted to its own block so descendant names
+                         stay readable.
+     .chat-empty       — alternate empty-state body used in place of
+                         .chat-shell__thread + chat-shell__composer.
+
+   Pairs with components/chat/index.jsx.
+   ============================================================ */
+
+/* ============================================================
+   Chat shell — three-region grid (sidebar | top / center).
+   Full-viewport: fills the window edge-to-edge.
+   ============================================================ */
+.chat-shell {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 272px) 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "sidebar top"
+    "sidebar center";
+  height: 100%;
+  width: 100%;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  transition: grid-template-columns var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
+}
+/* Opt-in: pin the shell to the viewport. Used by full-bleed previews
+   (chat.html, chat-empty.html). Embedded hosts omit this and size the
+   shell via their own container. */
+.chat-shell--full-viewport { height: 100vh; }
+.chat-shell--collapsed { --sidebar-w: 56px; }
+
+/* ---------- Lit shadow-boundary fixes ----------
+   In the React port these selectors had a single direct-child selector
+   in the parent's CSS (`.chat-shell__composer > .composer-shell`). In
+   the Lit port, <xm-composer> wraps .composer-shell with display:contents,
+   so the selector still walks the real DOM and .composer-shell is now a
+   *grand*child. The descendant variants below restore the intended sizing
+   and re-enable pointer-events on the composer (the overlay sets
+   pointer-events:none so it doesn't swallow clicks above the composer —
+   without re-enabling on .composer-shell, the textarea is unclickable).
+   Same shape for the artifact slot. */
+.chat-shell__composer .composer-shell {
+  width: 100%;
+  max-width: 720px;
+  pointer-events: auto;
+}
+.chat-shell__artifact-slot .artifact { flex: 1; min-height: 0; }
+
+/* When the artifact viewer is open, a third column appears on the
+   right and spans both rows — pushing top + center to the left.
+   Sidebar stays put. */
+.chat-shell--has-artifact {
+  grid-template-columns: var(--sidebar-w, 272px) 3fr 2fr;
+  grid-template-areas:
+    "sidebar top    artifact"
+    "sidebar center artifact";
+}
+
+.chat-shell__top { grid-area: top; }
+
+.chat-shell__center {
+  grid-area: center;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-shell__artifact-slot {
+  grid-area: artifact;
+  min-height: 0;
+  display: flex;
+}
+.chat-shell__artifact-slot > .artifact { flex: 1; min-height: 0; }
+
+/* ---------- Sidebar block ----------
+   Transparent — inherits the chat-shell surface. Only the
+   right-edge hairline marks the seam to the thread. */
+.chat-sidebar {
+  grid-area: sidebar;
+  background: transparent;
+  border-right: 1px solid var(--md-sys-color-outline);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-sidebar__top {
+  margin: var(--s-3) var(--s-3) var(--s-2);
+}
+/* Pin the right-slot icon to the brand-mark chip's 24px height so both
+   children present the same box for the button's `align-items: center`,
+   keeping the X chip and panel-toggle icon on a single centerline. */
+.chat-sidebar__top [slot="icon-right"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+.chat-shell--collapsed .chat-sidebar__top {
+  margin: var(--s-3) auto var(--s-2);
+}
+
+/* New chat — xm-button host. Margin matches the sidebar column gutter. */
+.chat-sidebar__new {
+  margin: var(--s-1) var(--s-3) var(--s-2);
+}
+.chat-shell--collapsed .chat-sidebar__new {
+  align-self: center;
+}
+
+/* Search */
+.chat-sidebar__search { padding: 0 var(--s-3) var(--s-2); }
+.chat-shell--collapsed .chat-sidebar__search--full { display: none; }
+.chat-sidebar__search--icon-only {
+  display: none;
+  margin: 0 auto var(--s-2);
+}
+.chat-shell--collapsed .chat-sidebar__search--icon-only { display: inline-flex; }
+
+/* Section labels + chat list */
+.chat-sidebar__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--s-1) var(--s-2) var(--s-3-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+}
+.chat-shell--collapsed .chat-sidebar__list { padding: var(--s-2) 0 var(--s-3-5); align-items: center; gap: var(--s-4); }
+.chat-shell--collapsed .sidebar-item--eyebrow { display: none; }
+
+.chat-sidebar__divider {
+  width: 28px;
+  height: 1px;
+  background: var(--md-sys-color-outline);
+  margin: var(--s-2) auto;
+  display: none;
+}
+.chat-shell--collapsed .chat-sidebar__divider { display: block; }
+
+/* ---------- Top panel ---------- */
+.chat-shell__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-5);
+  min-height: 56px;
+  box-sizing: border-box;
+  background: var(--md-sys-color-surface);
+  z-index: 2;
+}
+.chat-shell__top-left { display: flex; flex-direction: column; gap: var(--s-0-5); min-width: 0; }
+.chat-shell__top-title {
+  font: 600 14.5px/1.2 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-shell__top-sub {
+  font: 400 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  font-feature-settings: "tnum";
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.chat-shell__top-sub > span { white-space: nowrap; }
+.chat-shell__top-right { display: inline-flex; align-items: center; gap: var(--s-1-5); }
+
+/* ---------- Center panel — scrollable thread ---------- */
+.chat-shell__thread {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+  padding: var(--s-6) var(--s-5) 132px;  /* bottom padding clears the composer */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.chat-shell__thread-inner {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  /* Base gap is the tight, same-speaker rhythm; a speaker change adds
+     extra margin below so turns read as grouped utterances, not a flat
+     evenly-spaced list. */
+  gap: var(--s-2-5);
+}
+
+/* Bubble row alignment is page layout — the Bubble component owns
+   the visuals of each turn. */
+.chat-shell__row { display: flex; }
+.chat-shell__row--user { justify-content: flex-end; }
+.chat-shell__row--bot  { justify-content: flex-start; }
+
+/* Speaker-change rhythm: when the author flips, open up the gap. */
+.chat-shell__row--user + .chat-shell__row--bot,
+.chat-shell__row--bot + .chat-shell__row--user {
+  margin-top: var(--s-3);
+}
+
+/* ---------- Empty state — centered serif greeting + composer ----------
+   Used by the chat-empty variant (passed in via the `empty` prop).
+   The shell renders a .chat-empty block in place of .chat-shell__thread +
+   .chat-shell__composer; the caller owns its own composer and any
+   suggestion chips. */
+.chat-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-6);
+  padding: var(--s-6) var(--s-5) var(--s-10);
+}
+.chat-empty__hero {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-1-5);
+  text-align: center;
+}
+.chat-empty__title {
+  font:
+    var(--md-sys-typescale-headline-medium-weight)
+    var(--md-sys-typescale-headline-medium-size) /
+    var(--md-sys-typescale-headline-medium-line-height)
+    var(--md-sys-typescale-headline-medium-font);
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.chat-empty__sub {
+  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);
+  color: var(--xm-color-on-surface-soft);
+  margin: 0;
+}
+.chat-empty__composer {
+  width: 100%;
+  max-width: 720px;
+}
+
+/* ---------- Bottom panel — composer overlay ----------
+   Transparent — the thread already pads its bottom by 132px so
+   bubbles never sit underneath the composer card. */
+.chat-shell__composer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  padding: var(--s-2) var(--s-5) 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.chat-shell__composer > .composer-shell {
+  pointer-events: auto;
+  width: 100%;
+  max-width: 720px;
+  padding-bottom: var(--s-5);
+}

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

@@ -0,0 +1,74 @@
+import { LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import "../primitives/index.js";
+import "../brand-mark/index.js";
+import "../button/index.js";
+import "../sidebar-item/index.js";
+import "../bubble/index.js";
+import "../composer/index.js";
+import "../artifact/index.js";
+import type { BubbleArtifact, BubbleAttachment } from "../bubble/index.js";
+export interface ConversationItem {
+    id: string;
+    title: string;
+    active?: boolean;
+}
+export interface ConversationGroup {
+    group: string;
+    items: ConversationItem[];
+}
+export interface ThreadMessage {
+    from: "user" | "bot";
+    text?: string;
+    html?: string;
+    ts?: string;
+    atts?: BubbleAttachment[];
+    artifact?: BubbleArtifact | null;
+}
+declare class XmChatShell extends LitElement {
+    conversations: ConversationGroup[];
+    thread: ThreadMessage[];
+    processing: boolean;
+    thinkingLabel: string;
+    topTitle: string;
+    /** Pin the shell to the viewport (height: 100vh). Default is height: 100%
+        so the shell sizes to its container — embedded hosts get correct
+        sizing for free. Full-bleed previews opt in via the `full-viewport`
+        attribute. */
+    fullViewport: boolean;
+    private _collapsed;
+    private _activeId;
+    private _openArtifact;
+    private _hasEmpty;
+    private _searchValue;
+    private _copiedIdx;
+    private _copiedTimer;
+    private _artifactBodyNodes;
+    private _artifactCodeNodes;
+    private _emptyNodes;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    updated(): void;
+    private _toggleCollapsed;
+    private _selectConv;
+    private _onSearchInput;
+    private _onSearchClear;
+    private _onArtifactOpen;
+    private _onArtifactClose;
+    private _onComposerSend;
+    private _onComposerCancel;
+    private _onCopyMessage;
+    private _renderSidebar;
+    private _renderCollapsedList;
+    private _renderExpandedList;
+    private _renderTopBar;
+    private _renderBubbleRow;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-chat-shell": XmChatShell;
+    }
+}
+export {};