@xmesh/system-design 0.0.1

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

@@ -0,0 +1,302 @@
+/*
+  slider/index.ts — <xm-slider>, a draggable range slider on XmField (Story 2.8).
+
+  Extends XmField for the chrome (label / helper / disabled / form association /
+  focus) and renders a track + active fill + thumb. The bordered text-field
+  control box is wrong for a slider, so this overrides render() for a
+  label-row / track-row / helper-row layout, but reuses the base's state +
+  form-association + ARIA hooks (AD-7).
+
+  Value contract (AD-6 / AD-8a): uncontrolled-first. The live numeric value is
+  owned internally and mirrored into the inherited string `value` (+
+  ElementInternals) so xm-form sees a stable serialization; the events carry the
+  real number. During drag / keyboard stepping it emits `input` (per movement);
+  on commit (pointerup / blur after keyboard) it emits `change` — both with
+  detail.value: number.
+
+  Keyboard (slider APG, AD-9a): ←/↓ step down, →/↑ step up, Home → min, End →
+  max, PageDown/PageUp step by a larger increment. Value is clamped to [min,max]
+  and snapped to step.
+
+  Active fill + thumb are the coral accent (--md-sys-color-primary); the inactive
+  track + thumb size + track height are --xm-slider-* extensions (AD-10). Coral =
+  the filled value, never severity (AD-11).
+
+  Shadow DOM. Lit is a bare `import` (peer dep).
+*/
+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 { html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { XmField } from "../field/index.js";
+const SLIDER_CSS = new URL("../slider/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let XmSlider = class XmSlider extends XmField {
+    constructor() {
+        super(...arguments);
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        /** Show the current numeric value as a label beside the track. */
+        this.showValue = false;
+        /** Optional unit appended to the displayed value (e.g. "%", "px"). */
+        this.unit = "";
+        this._dragging = false;
+        this._onPointerDown = (e) => {
+            if (this.nonInteractive)
+                return;
+            e.preventDefault();
+            this._dragging = true;
+            e.target.setPointerCapture?.(e.pointerId);
+            this._setValue(this._valueFromClientX(e.clientX), true);
+            this._focusThumb();
+        };
+        this._onPointerMove = (e) => {
+            if (!this._dragging)
+                return;
+            this._setValue(this._valueFromClientX(e.clientX), true);
+        };
+        this._onPointerUp = (e) => {
+            if (!this._dragging)
+                return;
+            this._dragging = false;
+            e.target.releasePointerCapture?.(e.pointerId);
+            this._commit();
+        };
+        // ── Keyboard (slider APG) ───────────────────────────────────────────
+        this._onKeydown = (e) => {
+            if (this.nonInteractive)
+                return;
+            const big = Math.max(this.step, (this.max - this.min) / 10);
+            let handled = true;
+            switch (e.key) {
+                case "ArrowLeft":
+                case "ArrowDown":
+                    this._setValue(this._num - this.step, true);
+                    break;
+                case "ArrowRight":
+                case "ArrowUp":
+                    this._setValue(this._num + this.step, true);
+                    break;
+                case "PageDown":
+                    this._setValue(this._num - big, true);
+                    break;
+                case "PageUp":
+                    this._setValue(this._num + big, true);
+                    break;
+                case "Home":
+                    this._setValue(this.min, true);
+                    break;
+                case "End":
+                    this._setValue(this.max, true);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled)
+                e.preventDefault();
+        };
+        this._onBlur = () => {
+            if (!this._dragging)
+                this._commit();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Seed the numeric value from the uncontrolled `value` attribute, snapping
+        // into range. If unset, default to min.
+        const seed = this.initialValue === "" ? this.min : Number(this.initialValue);
+        this._value = String(this._clampSnap(Number.isFinite(seed) ? seed : this.min));
+        this.internals.setFormValue(this._value);
+    }
+    /** Typed live read; the inherited string `value` stays in sync. */
+    get valueAsNumber() {
+        return Number(this._value);
+    }
+    get _num() {
+        const n = Number(this._value);
+        return Number.isFinite(n) ? n : this.min;
+    }
+    get _fraction() {
+        const span = this.max - this.min;
+        if (span <= 0)
+            return 0;
+        return (this._num - this.min) / span;
+    }
+    _clampSnap(v) {
+        const clamped = Math.min(this.max, Math.max(this.min, v));
+        if (this.step <= 0)
+            return clamped;
+        const steps = Math.round((clamped - this.min) / this.step);
+        const snapped = this.min + steps * this.step;
+        // Avoid binary-float drift in the displayed/emitted number.
+        const decimals = (String(this.step).split(".")[1] ?? "").length;
+        return Number(Math.min(this.max, Math.max(this.min, snapped)).toFixed(decimals));
+    }
+    _setValue(v, emitInput) {
+        const next = this._clampSnap(v);
+        if (next === this._num && !emitInput)
+            return;
+        this._value = String(next);
+        this.internals.setFormValue(this._value);
+        if (emitInput) {
+            this.dispatchEvent(new CustomEvent("input", {
+                bubbles: true,
+                composed: true,
+                detail: { value: next },
+            }));
+        }
+    }
+    _commit() {
+        this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this._num },
+        }));
+    }
+    // ── Pointer drag ────────────────────────────────────────────────────
+    _valueFromClientX(clientX) {
+        const track = this._track;
+        if (!track)
+            return this._num;
+        const rect = track.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this._num;
+        const frac = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        return this.min + frac * (this.max - this.min);
+    }
+    _focusThumb() {
+        const thumb = this.renderRoot.querySelector(".slider__thumb");
+        thumb?.focus();
+    }
+    updated(changed) {
+        super.updated?.(changed);
+        // Re-snap if min/max/step change after seed so the value stays valid.
+        if (changed.has("min") || changed.has("max") || changed.has("step")) {
+            const re = this._clampSnap(this._num);
+            if (re !== this._num) {
+                this._value = String(re);
+                this.internals.setFormValue(this._value);
+            }
+        }
+    }
+    get _valueText() {
+        return this.unit ? `${this._num} ${this.unit}` : String(this._num);
+    }
+    render() {
+        const cls = [
+            "slider",
+            this.effectiveDisabled ? "slider--disabled" : "",
+            this.isError ? "slider--error" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const helperText = this.isError ? this.error : this.helper;
+        const ctrl = this.controlAria;
+        const pct = `${(this._fraction * 100).toFixed(2)}%`;
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
+      <link rel="stylesheet" href="${SLIDER_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div class="${cls}">
+        ${this.label
+            ? html `<div class="slider__label-row">
+              <label class="slider__label" id="${ctrl.id}-label">
+                <span class="slider__label-text">${this.label}</span>
+                ${this.required
+                ? html `<span class="slider__required" aria-hidden="true"
+                      >*</span
+                    >`
+                : nothing}
+              </label>
+              ${this.showValue
+                ? html `<span class="slider__value">${this._valueText}</span>`
+                : nothing}
+            </div>`
+            : this.showValue
+                ? html `<div class="slider__label-row">
+              <span class="slider__value">${this._valueText}</span>
+            </div>`
+                : nothing}
+
+        <div
+          class="slider__track"
+          @pointerdown=${this._onPointerDown}
+          @pointermove=${this._onPointerMove}
+          @pointerup=${this._onPointerUp}
+        >
+          <span class="slider__rail" aria-hidden="true"></span>
+          <span class="slider__fill" style="width:${pct}" aria-hidden="true"></span>
+          <span
+            class="slider__thumb"
+            id="${ctrl.id}"
+            role="slider"
+            tabindex="${this.effectiveDisabled ? -1 : 0}"
+            aria-valuemin="${this.min}"
+            aria-valuemax="${this.max}"
+            aria-valuenow="${this._num}"
+            aria-valuetext="${this.unit ? this._valueText : nothing}"
+            aria-labelledby="${this.label ? `${ctrl.id}-label` : nothing}"
+            aria-label="${this.label ? nothing : "Value"}"
+            aria-describedby="${helperText ? ctrl.describedBy : nothing}"
+            aria-invalid="${ctrl.invalid ?? nothing}"
+            aria-disabled="${this.effectiveDisabled ? "true" : nothing}"
+            style="left:${pct}"
+            @keydown=${this._onKeydown}
+            @blur=${this._onBlur}
+          ></span>
+        </div>
+
+        ${helperText
+            ? html `<div
+              class="slider__message ${this.isError
+                ? "slider__message--error"
+                : "slider__message--helper"}"
+              id="${ctrl.describedBy}"
+              role=${this.isError ? "alert" : nothing}
+            >
+              ${this.isError
+                ? html `<span class="slider__error-icon" aria-hidden="true">
+                    <xm-warn-icon size="14"></xm-warn-icon>
+                  </span>`
+                : nothing}
+              <span class="slider__message-text">${helperText}</span>
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], XmSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], XmSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], XmSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-value" })
+], XmSlider.prototype, "showValue", void 0);
+__decorate([
+    property({ type: String })
+], XmSlider.prototype, "unit", void 0);
+__decorate([
+    query(".slider__track")
+], XmSlider.prototype, "_track", void 0);
+XmSlider = __decorate([
+    customElement("xm-slider")
+], XmSlider);
+export { XmSlider };

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

@@ -0,0 +1,279 @@
+/* ============================================
+   Snackbar — backend error surface
+
+   Styles for <Snackbar /> (components/snackbar/index.jsx). Lives at the bottom
+   of the chat pane, above the composer. The host owns placement (an
+   absolute container inside .chat-main); this rule set styles the card
+   itself, its severity variants, the dim backdrop overlay, and the entry
+   animation. The card is neutral; the gradient overlay uses the
+   neutral `--xm-snackbar-scrim*` tokens (no severity hue).
+
+   Note: the .failmode-* picker classes used by chat-shell.jsx are NOT
+   part of this component — they live in ../styles.css as prototype
+   chrome.
+   ============================================ */
+
+.snackbar-stack {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s-2);
+  pointer-events: none;
+  padding: 0 var(--s-6) 116px; /* sits clearly above the chat-shell__composer */
+  z-index: 40;
+}
+.snackbar-stack > * { pointer-events: auto; }
+
+/* Dim backdrop behind the snackbar so the error reads as a focused
+   modal-ish surface, not a passive notification. Sits below the snackbar
+   in the same stack and fades in with the same easing.
+
+   We do NOT use backdrop-filter here — a full-pane blur is expensive on
+   every paint, and the chat behind contains a virtualized scroll list, so
+   it would regress scrolling. Instead we use a denser overlay color
+   (theme-aware) plus a faint vertical gradient so the snackbar still feels
+   "lifted" without any GPU filter work. */
+.snackbar-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      to top,
+      var(--xm-snackbar-scrim-strong) 0%,
+      var(--xm-snackbar-scrim) 60%,
+      var(--xm-snackbar-scrim-soft) 100%
+    );
+  animation: snackbar-overlay-in var(--md-sys-motion-duration-medium1) cubic-bezier(0.32, 0.72, 0.24, 1) both;
+  pointer-events: auto; /* clicks land on the overlay, not the chat behind */
+}
+@keyframes snackbar-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.snackbar {
+  /* Component-local vars — single neutral surface for all severities.
+     Severity is communicated by the icon and body copy, not by hue. */
+  /* The card rides the surface family (--snk-bg = surface-container-high),
+     so ink must come from the on-surface family, not inverse-on-surface —
+     pairing inverse ink (a dark ink) on this dark surface reads dark-on-dark
+     and fails AA (POLICIES 7a). --snk-accent stays the brightest on-surface
+     tone so the reversed primary button keeps high contrast. */
+  --snk-bg: var(--md-sys-color-surface-container-high);
+  --snk-border: var(--md-sys-color-outline-variant);
+  --snk-accent: var(--md-sys-color-on-surface);
+  --snk-ink: var(--md-sys-color-on-surface);
+  --snk-ink-soft: var(--md-sys-color-on-surface-variant);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--s-3-5);
+  width: 100%;
+  max-width: 620px;
+  padding: var(--s-3-5) var(--s-3-5) var(--s-3-5) var(--s-4);
+  background: var(--snk-bg);
+  border: 1px solid var(--snk-border);
+  border-radius: var(--md-sys-shape-corner-medium);
+  box-shadow: var(--xm-elevation-snackbar);
+  color: var(--snk-ink);
+  font-family: var(--md-sys-typescale-body-large-font);
+  animation: snackbar-in 280ms cubic-bezier(0.32, 0.72, 0.24, 1) both;
+}
+.snackbar--static { animation: none; }
+
+@keyframes snackbar-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Severity variants — class hooks kept for JSX/markup compatibility, but
+   they no longer swap colors. The icon and body copy carry the severity. */
+
+.snackbar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  /* Soft on-card highlight chip: stronger contrast in dark, softer in light. */
+  background: color-mix(in oklch, var(--snk-accent) 18%, transparent);
+  color: var(--snk-accent);
+  flex-shrink: 0;
+}
+
+.snackbar__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.snackbar__head {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: 13.5px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--snk-ink);
+}
+.snackbar__code {
+  font-family: var(--xm-typescale-mono-font);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 0;
+  background: transparent;
+  color: var(--snk-accent);
+  flex-shrink: 0;
+}
+.snackbar__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.snackbar__msg {
+  font-size: 13px;
+  color: var(--snk-ink-soft);
+  line-height: 1.45;
+  text-wrap: pretty;
+}
+.snackbar__meta {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s-1-5);
+  margin-top: var(--s-1);
+  font-size: 11px;
+}
+.snackbar__meta-label {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--snk-ink-soft);
+  font-weight: 500;
+  opacity: 0.8;
+}
+.snackbar__meta-id {
+  font-family: var(--xm-typescale-mono-font);
+  color: var(--snk-ink);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: 11px;
+}
+
+.snackbar__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  flex-shrink: 0;
+}
+.snackbar__btn {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 7px 11px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    border-color 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);
+  white-space: nowrap;
+  color: var(--snk-ink);
+}
+.snackbar__btn--primary {
+  background: var(--snk-accent);
+  color: var(--snk-bg);  /* high-contrast inverse against the accent */
+  border-color: var(--snk-accent);
+}
+.snackbar__btn--primary:hover {
+  background: color-mix(in oklab, var(--snk-bg) var(--md-sys-state-hover-state-layer-opacity), var(--snk-accent));
+}
+.snackbar__btn--primary:active { transform: translateY(1px); }
+.snackbar__btn--primary svg { opacity: 0.9; }
+
+.snackbar__btn--ghost {
+  color: var(--snk-ink-soft);
+  border-color: transparent;
+}
+.snackbar__btn--ghost:hover {
+  color: var(--snk-ink);
+  background: color-mix(in oklch, var(--snk-accent) 14%, transparent);
+}
+
+.snackbar__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--snk-ink-soft);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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);
+  flex-shrink: 0;
+}
+.snackbar__close:hover {
+  background: color-mix(in oklch, var(--snk-accent) 14%, transparent);
+  color: var(--snk-ink);
+}
+
+/* When sitting in the bare canvas (state cards on the design surface), the
+   card needs a touch more contrast against the warm canvas background. */
+.snackbar-card-frame {
+  background: var(--md-sys-color-surface);
+  padding: 30px var(--s-7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.snackbar-card-frame .frame-label {
+  position: absolute;
+  top: var(--s-4);
+  left: var(--s-6);
+  margin: 0;
+}
+.snackbar-card-frame .snackbar {
+  max-width: 580px;
+}
+
+/* Compact variant: when the chat shell is narrow, drop the right-side actions
+   below the body so nothing gets cut off. The 640px literal mirrors
+   --xm-breakpoint-md (styles/_layout.css) — @media can't read the token
+   (docs/adr/0001), so the literal is the source-of-truth's echo. */
+@media (max-width: 640px) {
+  .snackbar {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    row-gap: var(--s-2);
+  }
+  .snackbar__actions {
+    grid-column: 1 / -2;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export type SnackKind = "auth" | "server" | "generic";
+export interface SnackPreset {
+    kind: SnackKind;
+    code: string;
+    title: string;
+    message: string;
+    primaryLabel: string;
+    secondaryLabel: string;
+}
+export declare const SNACK_PRESETS: Record<SnackKind, SnackPreset>;
+declare class XmSnackbar extends LitElement {
+    kind: SnackKind;
+    code: string;
+    title: string;
+    message: string;
+    primaryLabel: string;
+    secondaryLabel: string;
+    showDismiss: boolean;
+    static: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    private _onPrimary;
+    private _onDismiss;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-snackbar": XmSnackbar;
+    }
+}
+export {};