@xmesh/system-design 0.0.4 → 0.0.6

package/dist/lit/components/snackbar/index.styles.js

@@ -0,0 +1,293 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/snackbar/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   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;
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -5,6 +5,7 @@ type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 type StackAlign = "start" | "center" | "end" | "stretch";
 type StackJustify = "start" | "center" | "end" | "between";
 export declare class XmStack extends LitElement {
+    static styles: CSSStyleSheet[];
     direction: StackDirection;
     gap: StackGap;
     align: StackAlign;

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

@@ -38,9 +38,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import stackSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/stack/index.js → ../stack/index.css.
-const STACK_CSS = new URL("../stack/index.css", import.meta.url).href;
 const DIRECTIONS = ["vertical", "horizontal"];
 const GAPS = ["none", "xs", "sm", "md", "lg", "xl"];
 const ALIGNS = ["start", "center", "end", "stretch"];
@@ -54,6 +54,9 @@ let XmStack = class XmStack extends LitElement {
         this.justify = "start";
         this.wrap = false;
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...stackSheets]; }
     render() {
         const direction = DIRECTIONS.includes(this.direction)
             ? this.direction
@@ -66,7 +69,6 @@ let XmStack = class XmStack extends LitElement {
             ? this.justify
             : "start";
         return html `
-      <link rel="stylesheet" href="${STACK_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/stack/index.styles.js

@@ -0,0 +1,55 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/stack/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   <xm-stack> — 1-D flex layout (vertical default).
+
+   The flex-stack primitive behind forms, sidebars, and action rows.
+   Slotted children are flex items (the <slot> is layout-transparent).
+   Gutter via gap="…" → --xm-gutter-* (the --s-N-aliased layout tier).
+
+   BEM block \`stack\`; modifiers --vertical / --horizontal, --gap-*,
+   --align-*, --justify-*. Registered in scripts/check-bem.sh
+   STRICT_BLOCKS.
+   ============================================ */
+
+.stack {
+  display: flex;
+  gap: var(--xm-gutter-md);
+  /* Inherited ink so currentColor in slotted content reads on the desk
+     surface (AD-13) — also satisfies the --md-sys-* token gate. */
+  color: var(--md-sys-color-on-surface);
+}
+
+.stack--vertical   { flex-direction: column; }
+.stack--horizontal { flex-direction: row; flex-wrap: nowrap; }
+
+:host([wrap]) .stack--horizontal { flex-wrap: wrap; }
+
+.stack--gap-none { gap: var(--xm-gutter-none); }
+.stack--gap-xs   { gap: var(--xm-gutter-xs); }
+.stack--gap-sm   { gap: var(--xm-gutter-sm); }
+.stack--gap-md   { gap: var(--xm-gutter-md); }
+.stack--gap-lg   { gap: var(--xm-gutter-lg); }
+.stack--gap-xl   { gap: var(--xm-gutter-xl); }
+
+.stack--align-start   { align-items: flex-start; }
+.stack--align-center  { align-items: center; }
+.stack--align-end     { align-items: flex-end; }
+.stack--align-stretch { align-items: stretch; }
+
+.stack--justify-start   { justify-content: flex-start; }
+.stack--justify-center  { justify-content: center; }
+.stack--justify-end     { justify-content: flex-end; }
+.stack--justify-between { justify-content: space-between; }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
 export declare class XmSwitch extends XmField {
+    static styles: CSSStyleSheet[];
     /** A switch submits checked-state ("on"/null), not text — declare it a toggle
         so the form value is correct from first paint, before any user interaction
         (the base seeds `_checked` from the `checked` attribute and `isToggle`

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

@@ -29,8 +29,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
-const SWITCH_CSS = new URL("../switch/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import switchSheets from "./index.styles.js";
 let XmSwitch = class XmSwitch extends XmField {
     constructor() {
         super(...arguments);
@@ -46,6 +47,10 @@ let XmSwitch = class XmSwitch extends XmField {
             }
         };
     }
+    // Adopted from build-generated sheets (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Lit static styles don't merge on override, so subclasses
+    // re-include the chrome (primitives + field) sheets.
+    static { this.styles = [...primitivesSheets, ...fieldSheets, ...switchSheets]; }
     /** A switch submits checked-state ("on"/null), not text — declare it a toggle
         so the form value is correct from first paint, before any user interaction
         (the base seeds `_checked` from the `checked` attribute and `isToggle`
@@ -65,8 +70,6 @@ let XmSwitch = class XmSwitch extends XmField {
         const helperText = this.isError ? this.error : this.helper;
         const ctrl = this.controlAria;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${SWITCH_CSS}" />
       <style>
         :host {
           display: inline-block;

package/dist/lit/components/switch/index.styles.js

@@ -0,0 +1,140 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/switch/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   xm-switch — binary on/off toggle on XmField (Story 2.7).
+
+   Like xm-checkbox, this is a TOGGLE field: the track sits BESIDE the label, not
+   above it on the bordered text-field chrome. State machinery (disabled / focus /
+   form-association / change) is inherited from XmField; this file styles only the
+   track, the thumb, and the label row.
+
+   Surface & ink (AD-13): the switch rides the inverse-surface card tier shared by
+   every XmField sibling — the label is inverse-on-surface ink. The OFF-track is a
+   muted neutral (--xm-switch-track-off, AD-10 extension); the thumb is the MD3
+   outline ink (legible on the off-track). When ON, the track fills with the
+   single coral accent (--md-sys-color-primary) and the thumb flips to on-primary
+   ink. Coral = on, never severity (AD-11).
+
+   Motion (NFR-19 / UX-DR10): the thumb slides on translateX only — short4
+   standard easing, NO bounce / spring / scale.
+
+   BEM block: \`switch\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   (Distinct from the legacy \`ds-switch\` CSS block.)
+   ============================================ */
+
+.switch {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--s-1);
+}
+
+/* ---------- Control row — track + label, the focusable target ---------- */
+.switch__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+/* ---------- Track ---------- */
+.switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 36px;
+  height: 20px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: var(--s-0-5);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--xm-switch-track-off);
+  transition:
+    background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+
+/* Focus ring — the canonical 3px coral halo on the track. */
+.switch__control:focus-visible .switch__track {
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Thumb — slides on translateX only ---------- */
+.switch__thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-outline);
+  box-shadow: var(--xm-switch-thumb-shadow);
+  transform: translateX(0);
+  transition: transform var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard),
+    background var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* ---------- On — coral track, thumb slides + flips to on-primary ink ---------- */
+.switch--on .switch__track {
+  background: var(--md-sys-color-primary);
+}
+.switch--on .switch__thumb {
+  transform: translateX(16px);
+  background: var(--md-sys-color-on-primary);
+}
+
+/* ---------- Label ---------- */
+.switch__label {
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+  letter-spacing: 0;
+}
+/* Collapse the label gap when no label is slotted. */
+.switch__label:empty {
+  display: none;
+}
+
+/* ---------- Disabled — shared reduced emphasis, no pointer ---------- */
+.switch--disabled .switch__control {
+  cursor: not-allowed;
+}
+.switch--disabled .switch__track {
+  opacity: 0.45;
+  box-shadow: none;
+}
+.switch--disabled .switch__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is copy, not color — the error keeps the helper ink (rule 3a). */
+.switch__message {
+  padding-left: calc(var(--s-9) + var(--s-2));
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+}
+.switch__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.switch__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -9,6 +9,7 @@ export interface TableColumn {
 }
 export type TableRow = Record<string, string | number>;
 export declare class XmTable extends LitElement {
+    static styles: CSSStyleSheet[];
     columns: TableColumn[];
     rows: TableRow[];
     caption: string;

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

@@ -34,7 +34,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const TABLE_CSS = new URL("../table/index.css", import.meta.url).href;
+import tableSheets from "./index.styles.js";
 let XmTable = class XmTable extends LitElement {
     constructor() {
         super(...arguments);
@@ -42,6 +42,9 @@ let XmTable = class XmTable extends LitElement {
         this.rows = [];
         this.caption = "";
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...tableSheets]; }
     willUpdate(changed) {
         // Allow declarative JSON in attributes for static HTML authoring. A malformed
         // string must not throw out of the reactive update and break render — keep
@@ -72,7 +75,6 @@ let XmTable = class XmTable extends LitElement {
     }
     render() {
         return html `
-      <link rel="stylesheet" href="${TABLE_CSS}" />
       <style>
         :host {
           display: block;