@xmesh/system-design 0.0.3 → 0.0.5

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

@@ -0,0 +1,562 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/composer/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 {
+/* ============================================
+   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; }
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/data-table/index.css

@@ -127,6 +127,24 @@
   color: var(--md-sys-color-on-surface-variant);
 }
 
+/* Monospace/tabular cells (per-column `mono`) — IDs, hashes, code-like values. */
+.data-table__cell--mono {
+  font-family: var(--xm-typescale-mono-font);
+  font-size: var(--xm-typescale-mono-size);
+  font-weight: var(--xm-typescale-mono-weight);
+  line-height: var(--xm-typescale-mono-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Clickable rows (row-click, AD-15) — keyboard-focusable; pointer + focus ring. */
+.data-table__row--clickable {
+  cursor: pointer;
+}
+.data-table__row--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
 /* Numeric — right-aligned, tabular figures so digits line up; the unit carries
    a space in the value ("412 KB"). Matches xm-table (NFR-22 / UX-DR4). */
 .data-table__header-cell--end,

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

@@ -9,6 +9,12 @@ export interface DataTableColumn extends TableColumn {
         for comparison; the displayed cell (`row[key]`) is unchanged. Without it,
         number cells sort by magnitude and string cells sort lexically. */
     sortValue?: (row: TableRow) => string | number | null | undefined;
+    /** Per-column formatter → the displayed cell TEXT (data-only, ADR 0008; the
+        output is rendered as text, never markup). The raw `row[key]` is unchanged
+        and still used for sorting (or `sortValue`). */
+    format?: (value: unknown, row: TableRow) => string;
+    /** Render this column's cells in the monospace/tabular typescale. */
+    mono?: boolean;
 }
 export type { TableRow };
 export type SortDirection = "asc" | "desc";
@@ -19,13 +25,34 @@ export interface DataTableSortChangeDetail {
 export interface DataTablePageChangeDetail {
     page: number;
 }
+export interface DataTableRowClickDetail {
+    row: TableRow;
+    index: number;
+}
+/**
+ * @fires xm-data-table-page-change - Fired when the page changes (`detail.page`).
+ * @fires xm-data-table-sort-change - Fired when the sort changes (`detail.key`, `detail.direction`).
+ * @fires xm-data-table-row-click - Fired when a clickable row is activated (`detail.row`, `detail.index`).
+ */
 export declare class XmDataTable extends LitElement {
+    static styles: CSSStyleSheet[];
     columns: DataTableColumn[];
     rows: TableRow[];
     loading: boolean;
     pageSize: number;
     emptyHeading: string;
     emptyText: string;
+    /** Server/controlled mode (AD-14): the consumer owns sort + paging. The table
+        renders `rows` verbatim, never sorts/slices a copy, derives the page count
+        from `total-items` (not `rows.length`), and emits intents only. */
+    server: boolean;
+    /** Total item count for server-mode paging (pages = ceil(total-items/page-size)). */
+    totalItems: number;
+    /** Controlled sort indicator for server mode (`{ key, direction }`); reflected,
+        never reordered locally. */
+    sort: DataTableSortChangeDetail | null;
+    /** Make rows clickable — emits xm-data-table-row-click (AD-15). */
+    rowClick: boolean;
     private _sortKey;
     private _sortDirection;
     private _currentPage;
@@ -45,6 +72,9 @@ export declare class XmDataTable extends LitElement {
     private _pagedRows;
     private _compare;
     private _toggleSort;
+    private _onRowClick;
+    private _onRowKey;
+    private _emitRowClick;
     private _onHeaderKey;
     private _onPageChange;
 }