@xmesh/system-design 0.0.1

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

@@ -0,0 +1,548 @@
+/* ============================================
+   Composer — canonical chat composer
+   Visual + behavior matches preview/composer.html
+   Pairs with components/composer/index.jsx.
+   References --md-sys-* / --xm-* tokens only.
+
+   Two BEM blocks live here:
+     .composer        — the input card (toolbar, field, send/stop)
+     .att             — attachment system (chips, cards, tray, bundle)
+                        kept as a separate block because the artifact
+                        chip in <Bubble> reuses .att-card without the
+                        composer chrome.
+   ============================================ */
+
+/* Outer wrap — stacks the composer card and the transparent
+   `.composer-shell__bottom` hint strip beneath it. */
+.composer-shell {
+  display: flex;
+  flex-direction: column;
+  background: var(--md-sys-color-surface);
+}
+
+.composer {
+  background: var(--md-sys-color-surface-container-high);
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  padding: var(--s-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+  min-height: 88px;
+  transition:
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  box-shadow: var(--md-sys-elevation-level0);
+  cursor: text;
+}
+.composer button,
+.composer xm-button,
+.composer a {
+  cursor: pointer;
+}
+.composer button[disabled],
+.composer xm-button[disabled] {
+  cursor: not-allowed;
+}
+.composer:hover {
+  border-color: var(--md-sys-color-outline);
+}
+.composer:focus-within {
+  border-color: var(--md-sys-color-outline);
+  box-shadow: var(--xm-state-focus-ring), var(--md-sys-elevation-level0);
+}
+.composer--dragging {
+  border-color: var(--md-sys-color-primary);
+  box-shadow:
+    0 0 0 3px color-mix(in oklab, var(--md-sys-color-primary) 22%, transparent),
+    var(--md-sys-elevation-level0);
+}
+
+.composer__field {
+  border: 0;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  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);
+  padding: var(--s-0-5) var(--s-0-5) 0;
+  min-height: 22px;
+  max-height: 240px;
+  outline: none;
+  resize: none;
+  width: 100%;
+  overflow-y: auto;
+}
+.composer__field::placeholder { color: var(--xm-color-on-surface-soft); }
+
+.composer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1-5); }
+.composer__toolbar-left,
+.composer__toolbar-right { display: flex; align-items: center; gap: var(--s-1-5); }
+
+/* Inner shape used by the Stop xm-button — a 9px filled square that
+   reads as the universal "stop" affordance inside the button chip. */
+.composer__stop-icon { display: inline-block; width: 9px; height: 9px; background: currentColor; border-radius: 1px; }
+
+.composer__hint {
+  font: 500 10px/1 var(--xm-typescale-mono-font);
+  color: var(--md-sys-color-on-surface);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+}
+.composer__hint kbd {
+  display: inline-block;
+  padding: 1px var(--s-1);
+  font: 600 9px/1 var(--xm-typescale-mono-font);
+  color: var(--md-sys-color-on-surface);
+  background: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-outline);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  margin: 0 1px;
+}
+
+/* Transparent strip that hosts the keyboard-shortcut hint below the
+   composer card. Sits inside the chat shell's `.chat-shell__composer`, but is
+   rendered by <Composer> so standalone previews get it too. */
+.composer-shell__bottom {
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  padding: var(--s-2) var(--s-1) 0;
+}
+
+.composer__counter {
+  font: 500 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  font-feature-settings: "tnum";
+}
+.composer__counter--warn { color: var(--md-sys-color-on-surface); }
+.composer__counter--over { color: var(--md-sys-color-on-surface); font-weight: 700; }
+
+/* Thinking pill */
+.composer__thinking {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2-5) var(--s-3-5);
+  border-radius: 10px;
+  background: color-mix(in oklab, var(--md-sys-color-primary-container) 70%, var(--md-sys-color-surface-container-low) 30%);
+  color: var(--md-sys-color-on-primary-container);
+  font: 500 13px/1 var(--md-sys-typescale-body-large-font);
+}
+.composer__thinking-dots { display: inline-flex; gap: var(--s-1); flex-shrink: 0; }
+.composer__thinking-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: color-mix(in oklab, var(--md-sys-color-primary) 65%, var(--md-sys-color-surface-container-low) 35%);
+  animation: thinkingPulse 1.2s ease-in-out infinite;
+}
+.composer__thinking-dot:nth-child(2) { animation-delay: 0.18s; }
+.composer__thinking-dot:nth-child(3) { animation-delay: 0.36s; }
+@keyframes thinkingPulse {
+  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
+  40%           { opacity: 1;    transform: scale(1.1);  }
+}
+
+/* ============================================
+   Attachments — block: .att
+   ============================================ */
+.att {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  padding: 0 var(--s-0-5) var(--s-0-5);
+}
+
+.att__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-3);
+  font: 500 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0 var(--s-0-5);
+}
+.att__header-left { display: inline-flex; align-items: center; gap: var(--s-2); font-feature-settings: "tnum"; }
+.att__pip {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 18px; min-width: 18px; padding: 0 5px;
+  border-radius: 999px;
+  background: var(--md-sys-color-outline);
+  color: var(--md-sys-color-on-surface);
+  font: 600 10px/1 var(--xm-typescale-mono-font);
+  letter-spacing: 0.04em;
+}
+.att__header-right { display: inline-flex; align-items: center; gap: var(--s-3); }
+
+.att__link {
+  background: none; border: 0; padding: 0;
+  font: 500 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+}
+.att__link:hover { color: var(--md-sys-color-on-surface); }
+
+/* Card grid */
+.att__grid {
+  display: flex;
+  flex-direction: row;
+  gap: var(--s-2-5);
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: var(--s-0-5) var(--s-0-5) var(--s-2);
+  scrollbar-width: thin;
+  scroll-snap-type: x proximity;
+}
+
+.att-card {
+  position: relative;
+  flex-shrink: 0;
+  width: 150px;
+  height: 150px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-inverse-surface);
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition:
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  scroll-snap-align: start;
+}
+.att-card:hover { border-color: var(--md-sys-color-outline); }
+
+.att-card--media .att-card__media {
+  position: absolute; inset: 0;
+  background-size: cover;
+  background-position: top center;
+  background-color: var(--md-sys-color-surface-container-high);
+}
+.att-card--media .att-card__ext {
+  position: absolute;
+  left: var(--s-2); bottom: var(--s-2);
+  padding: 3px 7px;
+  border-radius: 4px;
+  background: var(--xm-photo-overlay);
+  color: var(--xm-photo-overlay-ink);
+  font: 600 10px/1 var(--xm-typescale-mono-font);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  backdrop-filter: blur(4px);
+}
+.att-card--media .att-card__meta {
+  position: absolute;
+  right: var(--s-2); bottom: var(--s-2);
+  padding: 3px 7px;
+  border-radius: 4px;
+  background: var(--xm-photo-overlay);
+  color: var(--xm-photo-overlay-ink);
+  font: 500 10px/1 var(--xm-typescale-mono-font);
+  letter-spacing: 0.04em;
+  backdrop-filter: blur(4px);
+  font-feature-settings: "tnum";
+}
+
+.att-card--text {
+  background: var(--md-sys-color-surface-container-high);
+  padding: var(--s-3-5) var(--s-3) var(--s-3);
+  justify-content: flex-start;
+}
+.att-card--text .att-card__name {
+  font: 500 13px/1.3 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-inverse-on-surface);
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-right: var(--s-5-5);
+}
+.att-card--text .att-card__sub {
+  margin-top: var(--s-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1-5);
+  font: 400 11px/1.2 var(--xm-typescale-mono-font);
+  color: var(--xm-color-inverse-on-surface-muted);
+  font-feature-settings: "tnum";
+}
+.att-card--text .att-card__sub-primary { color: var(--md-sys-color-inverse-on-surface); font-weight: 500; }
+.att-card--text .att-card__sub-secondary { color: var(--xm-color-inverse-on-surface-muted); font-size: 10.5px; }
+.att-card--text .att-card__ext {
+  position: absolute;
+  left: var(--s-2-5); bottom: var(--s-2-5);
+  padding: 3px 7px;
+  border-radius: 4px;
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 8%, transparent);
+  color: var(--md-sys-color-inverse-on-surface);
+  font: 600 10px/1 var(--xm-typescale-mono-font);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ----- Row variant (used in bubbles to reference an artifact) -----
+   Lives inside a bot bubble that rides `surface`, so this variant
+   uses the on-surface family (POLICIES rule 7a) — not the inverse-on-
+   surface ink that .att-card--text uses inside the composer (which
+   sits on inverse-surface). The primitives flip in light theme via
+   _primitives.css, so a single rule covers both modes. */
+.att-card--text-row {
+  width: 100%;
+  height: auto;
+  margin-top: var(--s-2-5);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2-5) var(--s-3);
+  background: var(--md-sys-color-surface-container-low);
+  border: 1px solid var(--md-sys-color-outline);
+  color: var(--md-sys-color-on-surface);
+  /* Reset native <button> chrome — the chip is rendered as a button
+     so it can be activated by keyboard, but it must not paint a UA
+     focus ring that fights the design system. */
+  appearance: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  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);
+}
+.att-card--text-row:hover {
+  background: var(--md-sys-color-surface-container);
+  border-color: var(--xm-color-on-surface-soft);
+}
+.att-card--text-row:focus-visible {
+  border-color: var(--xm-color-on-surface-soft);
+  box-shadow: var(--xm-state-focus-ring);
+}
+.att-card--text-row .att-card__name {
+  margin: 0;
+  -webkit-line-clamp: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--md-sys-color-on-surface);
+}
+/* Folded-corner document tile — a tilted card with a clipped
+   top-right corner so the chip's leading slot reads as a doc icon
+   rather than a generic square. Uses tokens only; the corner is
+   carved with clip-path on the tile and a tiny pseudo-element fold.
+   The translucent on-surface wash auto-flips per theme: lighter than
+   the chip surface in dark, darker than it in light. */
+.att-card--text-row .att-card__icon {
+  position: relative;
+  width: 40px; height: 44px;
+  flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) 18%, transparent);
+  border: 1px solid color-mix(in oklab, var(--md-sys-color-on-surface) 26%, transparent);
+  border-radius: 4px;
+  color: var(--md-sys-color-on-surface);
+  transform: rotate(-4deg);
+  box-shadow: var(--md-sys-elevation-level0);
+  --fold: 10px;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--fold)) 0,
+    100% var(--fold),
+    100% 100%,
+    0 100%
+  );
+}
+.att-card--text-row .att-card__icon::after {
+  content: "";
+  position: absolute;
+  top: 0; right: 0;
+  width: var(--fold);
+  height: var(--fold);
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) 32%, transparent);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+.att-card--text-row .att-card__icon svg {
+  position: relative;
+  z-index: 1;
+}
+.att-card--text-row .att-card__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+}
+.att-card--text-row .att-card__sub {
+  margin-top: 0;
+  flex-direction: row;
+  gap: var(--s-1-5);
+  align-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  color: var(--xm-color-on-surface-soft);
+}
+.att-card--text-row .att-card__sub .ds-sep { opacity: 0.5; }
+.att-card--text-row .att-card__action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+.att-card__x {
+  position: absolute;
+  top: var(--s-1-5); right: var(--s-1-5);
+  width: 22px; height: 22px;
+  border-radius: 999px;
+  border: none;
+  background: color-mix(in oklab, var(--md-sys-color-inverse-surface) 88%, transparent);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
+  backdrop-filter: blur(4px);
+  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);
+}
+.att-card__x:hover { background: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-surface); box-shadow: 0 0 0 1px var(--md-sys-color-inverse-on-surface); }
+
+/* Bundle chip + tray */
+.att__bundle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2-5);
+  height: 44px;
+  padding: 0 var(--s-3);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-surface-container-high);
+  border-radius: 8px;
+  color: var(--md-sys-color-inverse-on-surface);
+  font: 500 12px/1 var(--md-sys-typescale-body-large-font);
+  cursor: pointer;
+  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  align-self: flex-start;
+}
+.att__bundle:hover { border-color: var(--md-sys-color-outline); }
+.att__bundle-stack { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
+.att__bundle-stack span {
+  position: absolute; inset: 0;
+  border-radius: 5px;
+  background: var(--md-sys-color-surface-container-high);
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+.att__bundle-stack span:nth-child(1) { transform: translate(4px, -3px) rotate(6deg); opacity: 0.5; }
+.att__bundle-stack span:nth-child(2) { transform: translate(2px, -1px) rotate(3deg); opacity: 0.75; }
+.att__bundle-stack span:nth-child(3) {
+  background: var(--md-sys-color-surface-container-high);
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+[data-theme="dark"] .att__bundle-stack span:nth-child(3) {
+  background: var(--md-sys-color-surface-container-low);
+  color: var(--md-sys-color-on-surface);
+}
+.att__bundle-meta { display: flex; flex-direction: column; gap: 3px; }
+.att__bundle-name { font: 500 12px/1 var(--md-sys-typescale-body-large-font); color: var(--md-sys-color-inverse-on-surface); }
+.att__bundle-sub  { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--xm-color-inverse-on-surface-muted); font-feature-settings: "tnum"; }
+.att__bundle-caret { color: var(--xm-color-inverse-on-surface-muted); margin-left: var(--s-1); display: inline-flex; }
+.att__bundle[aria-expanded="true"] .att__bundle-caret { transform: rotate(180deg); }
+
+.att__tray {
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 10px;
+  background: var(--md-sys-color-surface-container-high);
+  max-height: 260px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  animation: trayIn 180ms ease;
+}
+@keyframes trayIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.att__row {
+  display: grid;
+  grid-template-columns: 28px 1fr auto auto;
+  align-items: center;
+  gap: var(--s-2-5);
+  padding: var(--s-2) var(--s-2-5);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  font: 500 12px/1 var(--md-sys-typescale-body-large-font);
+}
+.att__row:last-child { border-bottom: 0; }
+.att__row:hover { background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 4%, transparent); }
+.att__row-thumb {
+  width: 28px; height: 28px; border-radius: 5px;
+  background-size: cover; background-position: center;
+  background-color: var(--md-sys-color-primary-container);
+}
+.att__row-icon {
+  width: 28px; height: 28px; border-radius: 5px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+[data-theme="dark"] .att__row-icon {
+  background: var(--md-sys-color-surface-container-low);
+  color: var(--md-sys-color-on-surface);
+}
+.att__row-name {
+  min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.att__row-size {
+  font: 400 10.5px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-inverse-on-surface-muted);
+  font-feature-settings: "tnum";
+}
+.att__row-meta {
+  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
+  font-feature-settings: "tnum"; text-align: right;
+}
+.att__row-meta-primary { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--md-sys-color-inverse-on-surface); }
+.att__row-meta-secondary { font: 400 10.5px/1 var(--xm-typescale-mono-font); color: var(--xm-color-inverse-on-surface-muted); }
+.att__row-x {
+  width: 22px; height: 22px;
+  border-radius: 999px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--xm-color-inverse-on-surface-muted);
+  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);
+}
+.att__row-x:hover { background: var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-surface); border-color: var(--md-sys-color-inverse-on-surface); }
+
+/* Inline warning — neutral surface, severity carried by <WarnIcon /> + bold label */
+.att__warn {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-1-5) var(--s-2-5);
+  border-radius: 8px;
+  background: var(--md-sys-color-surface-container-high);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-inverse-on-surface);
+  font: 600 11px/1.3 var(--xm-typescale-mono-font);
+  letter-spacing: 0.02em;
+}
+[data-theme="dark"] .att__warn {
+  background: var(--md-sys-color-surface-container-low);
+  border-color: var(--md-sys-color-outline);
+  color: var(--md-sys-color-on-surface);
+}
+.att__warn svg { flex-shrink: 0; }

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

@@ -0,0 +1,67 @@
+import { LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import "../button/index.js";
+export interface ComposerAttachment {
+    id: number;
+    name: string;
+    kind: "image" | "file";
+    size: number;
+    ext: string;
+    dataUrl?: string;
+    lines?: number;
+    pages?: number;
+    dims?: string;
+}
+declare class XmComposer extends LitElement {
+    initialValue: string;
+    initialFocus: boolean;
+    processing: boolean;
+    thinkingLabel: string;
+    maxChars: number;
+    counterAt: number;
+    placeholder: string;
+    showAttachments: boolean;
+    value: string | null;
+    attachments: ComposerAttachment[] | null;
+    private _value;
+    private _atts;
+    private _warning;
+    private _trayOpen;
+    private _dragging;
+    private _dragDepth;
+    private _warnTimer;
+    private _didInitialFocus;
+    private _lastValueProp;
+    private _lastAttsProp;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private _flashWarning;
+    private _addFiles;
+    private _removeAtt;
+    private _clearAtts;
+    private _send;
+    private _cancel;
+    private _onInput;
+    private _onKeyDown;
+    private _onPaste;
+    private _onDragEnter;
+    private _onDragOver;
+    private _onDragLeave;
+    private _onDrop;
+    private _onBoxClick;
+    private _onPickFile;
+    private _onFileInput;
+    private _renderAttCard;
+    private _renderAttRow;
+    private _renderAttachments;
+    private _renderHint;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-composer": XmComposer;
+    }
+}
+export {};