@xenosystem/elements-react 0.0.1 → 0.0.3

package/src/containers/message-bubble.css

@@ -1,112 +1,112 @@
-/*
- * MessageBubble — the chat message container. Monochrome SHELL: the container carries no colour of its
- * own; only `children` may bring content colour. A `user` turn is a right-aligned bubble; an `assistant`
- * turn is a bare left-aligned prose block (the locked design). State rides the root as `data-role` and,
- * while a turn is still being written, `data-streaming`. Only the theme custom properties are used here.
- */
-
-.xeno-message {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-width: 100%;
-  /* How wide a user bubble may run before it wraps. A knob rather than a prop, because the answer is
-     usually a MEDIA QUERY — a bubble that reads well at 80% on a desktop column is cramped at 80% of
-     a phone — and a breakpoint belongs in the product's stylesheet, not threaded through React state.
-     Override it on the turn, on the transcript, or in an `@media` block; the default stands alone. */
-  --xeno-message-max: 80%;
-}
-
-/* Sides: user hugs the right rail, assistant the left. */
-.xeno-message[data-role='user'] {
-  align-items: flex-end;
-}
-.xeno-message[data-role='assistant'] {
-  align-items: flex-start;
-}
-
-.xeno-message-body {
-  min-width: 0;
-  color: var(--xeno-text);
-  font-size: 15px;
-  line-height: 1.55;
-  overflow-wrap: anywhere;
-}
-
-/* Attachments — what was sent WITH the message, above the body and outside the bubble. They share the
-   turn's alignment and take no fill of their own: an image already has edges, and wrapping it in a
-   border plus 12px of surface only draws a second frame around the first. */
-.xeno-message-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  max-width: var(--xeno-message-max);
-  min-width: 0;
-}
-.xeno-message[data-role='user'] .xeno-message-attachments {
-  justify-content: flex-end;
-}
-
-/* User: a bubble — surface fill, hairline border, card radius with the bottom-right corner squared. */
-.xeno-message[data-role='user'] .xeno-message-body {
-  max-width: var(--xeno-message-max);
-  /* A person's own words keep the shape they were typed in — the blank line they left between two
-     thoughts is part of the message. Only on this side: an assistant turn is rendered prose, where
-     the source newlines are markup and honouring them would double every paragraph break. */
-  white-space: pre-wrap;
-  padding: 12px;
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-card);
-  border-bottom-right-radius: var(--xeno-radius-xs);
-}
-
-/* Assistant: no bubble, just prose (locked design). */
-.xeno-message[data-role='assistant'] .xeno-message-body {
-  max-width: 100%;
-}
-
-/* Meta row: timestamp + hover action bar, aligned under the turn. */
-.xeno-message-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 20px;
-}
-
-.xeno-message-time {
-  font-size: 12px;
-  line-height: 1;
-  color: var(--xeno-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Hover action bar — fades in on hover/focus of the whole turn. */
-.xeno-message-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  opacity: 0;
-  /* Transparent is not gone. At `opacity: 0` these buttons still take the pointer, so the strip of
-     nothing under a message swallowed clicks and — worse — sometimes ran Copy or Regenerate on a turn
-     whose bar the reader could not see. Faded out means out of reach; hover puts it back. */
-  pointer-events: none;
-  transition: opacity 0.18s var(--xeno-ease);
-}
-.xeno-message:hover .xeno-message-actions,
-.xeno-message:focus-within .xeno-message-actions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* While streaming the bar stays hidden and inert, even on hover/focus (this rule wins by source order). */
-.xeno-message[data-streaming] .xeno-message-actions {
-  opacity: 0;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-message-actions {
-    transition: none;
-  }
-}
+/*
+ * MessageBubble — the chat message container. Monochrome SHELL: the container carries no colour of its
+ * own; only `children` may bring content colour. A `user` turn is a right-aligned bubble; an `assistant`
+ * turn is a bare left-aligned prose block (the locked design). State rides the root as `data-role` and,
+ * while a turn is still being written, `data-streaming`. Only the theme custom properties are used here.
+ */
+
+.xeno-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 100%;
+  /* How wide a user bubble may run before it wraps. A knob rather than a prop, because the answer is
+     usually a MEDIA QUERY — a bubble that reads well at 80% on a desktop column is cramped at 80% of
+     a phone — and a breakpoint belongs in the product's stylesheet, not threaded through React state.
+     Override it on the turn, on the transcript, or in an `@media` block; the default stands alone. */
+  --xeno-message-max: 80%;
+}
+
+/* Sides: user hugs the right rail, assistant the left. */
+.xeno-message[data-role='user'] {
+  align-items: flex-end;
+}
+.xeno-message[data-role='assistant'] {
+  align-items: flex-start;
+}
+
+.xeno-message-body {
+  min-width: 0;
+  color: var(--xeno-text);
+  font-size: 15px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+/* Attachments — what was sent WITH the message, above the body and outside the bubble. They share the
+   turn's alignment and take no fill of their own: an image already has edges, and wrapping it in a
+   border plus 12px of surface only draws a second frame around the first. */
+.xeno-message-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: var(--xeno-message-max);
+  min-width: 0;
+}
+.xeno-message[data-role='user'] .xeno-message-attachments {
+  justify-content: flex-end;
+}
+
+/* User: a bubble — surface fill, hairline border, card radius with the bottom-right corner squared. */
+.xeno-message[data-role='user'] .xeno-message-body {
+  max-width: var(--xeno-message-max);
+  /* A person's own words keep the shape they were typed in — the blank line they left between two
+     thoughts is part of the message. Only on this side: an assistant turn is rendered prose, where
+     the source newlines are markup and honouring them would double every paragraph break. */
+  white-space: pre-wrap;
+  padding: 12px;
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-card);
+  border-bottom-right-radius: var(--xeno-radius-xs);
+}
+
+/* Assistant: no bubble, just prose (locked design). */
+.xeno-message[data-role='assistant'] .xeno-message-body {
+  max-width: 100%;
+}
+
+/* Meta row: timestamp + hover action bar, aligned under the turn. */
+.xeno-message-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 20px;
+}
+
+.xeno-message-time {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--xeno-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Hover action bar — fades in on hover/focus of the whole turn. */
+.xeno-message-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  /* Transparent is not gone. At `opacity: 0` these buttons still take the pointer, so the strip of
+     nothing under a message swallowed clicks and — worse — sometimes ran Copy or Regenerate on a turn
+     whose bar the reader could not see. Faded out means out of reach; hover puts it back. */
+  pointer-events: none;
+  transition: opacity 0.18s var(--xeno-ease);
+}
+.xeno-message:hover .xeno-message-actions,
+.xeno-message:focus-within .xeno-message-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* While streaming the bar stays hidden and inert, even on hover/focus (this rule wins by source order). */
+.xeno-message[data-streaming] .xeno-message-actions {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-message-actions {
+    transition: none;
+  }
+}

package/src/containers/panel.css

@@ -1,120 +1,120 @@
-/*
- * Panel — a chrome stack: heading, body, footer.
- *
- * Every construction value comes from the `--xeno-chrome-*` tokens, so the SAME DOM renders as either
- * chrome. Under `separated` (the default, required by DESIGN_SYSTEM.md §"Panel Structure") the wrapper
- * paints the page colour and the three plates float on it with a 2px gap. Under `unified` the gap
- * collapses to 0, the plates go transparent, the wrapper paints the surface and clips them, and the
- * dividers come back — one card, exactly as this set rendered before the chrome axis existed.
- *
- * Nothing here knows a theme exists. That is the point: no component is built twice.
- *
- * Scrolling is chrome-independent — give the panel a bounded height and the body scrolls on its own
- * (`min-height: 0` lets a flex child shrink below its content).
- */
-.xeno-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--xeno-chrome-gap);
-  padding: var(--xeno-chrome-inset);
-  min-height: 0;
-  background: var(--xeno-chrome-shell);
-  /* `separated` draws no border on the wrapper — the plates carry their own. `unified` needs one,
-     and gets it because the shell is painted and clipped. Both read the same token. */
-  border: 1px solid var(--xeno-chrome-border);
-  border-radius: var(--xeno-chrome-radius);
-  overflow: hidden;
-  color: var(--xeno-text);
-}
-
-/*
- * Heading plate. §"Panel Structure" fixes it at 34px so headings line up with sidebar navigation
- * across a product; the padding sets the text inside that rather than defining the height.
- */
-.xeno-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex: 0 0 auto;
-  min-height: var(--xeno-chrome-panel-header-min-h);
-  padding: var(--xeno-chrome-panel-header-pad);
-  background: var(--xeno-chrome-plate);
-  -webkit-backdrop-filter: var(--xeno-chrome-plate-filter);
-  backdrop-filter: var(--xeno-chrome-plate-filter);
-  border-bottom: var(--xeno-chrome-divider);
-}
-
-/*
- * §"Headers and Footers": the header text is "small, uppercase, with letter-spacing. It functions as
- * a label, not a headline." Matches the convention the code-block language chip already uses.
- */
-.xeno-panel-title {
-  min-width: 0;
-  color: var(--xeno-chrome-title-color);
-  font-size: var(--xeno-chrome-title-size);
-  font-weight: 600;
-  letter-spacing: var(--xeno-chrome-title-spacing);
-  text-transform: var(--xeno-chrome-title-transform);
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.xeno-panel-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex: 0 0 auto;
-}
-
-/* Body plate — the scroll region. */
-.xeno-panel-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: var(--xeno-chrome-panel-body-pad);
-  overflow: auto;
-  background: var(--xeno-chrome-body);
-  color: var(--xeno-text);
-}
-
-/*
- * Footer plate — §"Headers and Footers": "Footer padding matches header padding exactly. Headers and
- * footers are visually symmetric." Every box metric below is the header's, duplicated deliberately
- * rather than shared through a common class: the symmetry is a design rule a future change must break
- * on purpose, and a shared class would let one drift silently while the other did not.
- *
- * `space-between` gives the dismiss-left / confirm-right arrangement the products already use.
- */
-.xeno-panel-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex: 0 0 auto;
-  min-height: var(--xeno-chrome-panel-header-min-h);
-  padding: var(--xeno-chrome-panel-header-pad);
-  background: var(--xeno-chrome-plate);
-  border-top: var(--xeno-chrome-divider);
-}
-
-/*
- * §4 "Radius Is Per-Corner, Not Per-Element": a corner is rounded only where the surface meets
- * NOTHING. Each plate faces its neighbour across the 2px gap, so the facing corners are SQUARE — a
- * uniform radius on every plate is the tell that this section was skipped, and it was.
- *
- * Declared on first/last child rather than per plate so a stack with no header, or no footer, still
- * presents a rounded outer edge instead of a square one against the rounded shell.
- */
-.xeno-panel > * {
-  border-radius: 0;
-}
-.xeno-panel > :first-child {
-  border-top-left-radius: var(--xeno-chrome-radius-plate);
-  border-top-right-radius: var(--xeno-chrome-radius-plate);
-}
-.xeno-panel > :last-child {
-  border-bottom-left-radius: var(--xeno-chrome-radius-plate);
-  border-bottom-right-radius: var(--xeno-chrome-radius-plate);
-}
+/*
+ * Panel — a chrome stack: heading, body, footer.
+ *
+ * Every construction value comes from the `--xeno-chrome-*` tokens, so the SAME DOM renders as either
+ * chrome. Under `separated` (the default, required by DESIGN_SYSTEM.md §"Panel Structure") the wrapper
+ * paints the page colour and the three plates float on it with a 2px gap. Under `unified` the gap
+ * collapses to 0, the plates go transparent, the wrapper paints the surface and clips them, and the
+ * dividers come back — one card, exactly as this set rendered before the chrome axis existed.
+ *
+ * Nothing here knows a theme exists. That is the point: no component is built twice.
+ *
+ * Scrolling is chrome-independent — give the panel a bounded height and the body scrolls on its own
+ * (`min-height: 0` lets a flex child shrink below its content).
+ */
+.xeno-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xeno-chrome-gap);
+  padding: var(--xeno-chrome-inset);
+  min-height: 0;
+  background: var(--xeno-chrome-shell);
+  /* `separated` draws no border on the wrapper — the plates carry their own. `unified` needs one,
+     and gets it because the shell is painted and clipped. Both read the same token. */
+  border: 1px solid var(--xeno-chrome-border);
+  border-radius: var(--xeno-chrome-radius);
+  overflow: hidden;
+  color: var(--xeno-text);
+}
+
+/*
+ * Heading plate. §"Panel Structure" fixes it at 34px so headings line up with sidebar navigation
+ * across a product; the padding sets the text inside that rather than defining the height.
+ */
+.xeno-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+  min-height: var(--xeno-chrome-panel-header-min-h);
+  padding: var(--xeno-chrome-panel-header-pad);
+  background: var(--xeno-chrome-plate);
+  -webkit-backdrop-filter: var(--xeno-chrome-plate-filter);
+  backdrop-filter: var(--xeno-chrome-plate-filter);
+  border-bottom: var(--xeno-chrome-divider);
+}
+
+/*
+ * §"Headers and Footers": the header text is "small, uppercase, with letter-spacing. It functions as
+ * a label, not a headline." Matches the convention the code-block language chip already uses.
+ */
+.xeno-panel-title {
+  min-width: 0;
+  color: var(--xeno-chrome-title-color);
+  font-size: var(--xeno-chrome-title-size);
+  font-weight: 600;
+  letter-spacing: var(--xeno-chrome-title-spacing);
+  text-transform: var(--xeno-chrome-title-transform);
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xeno-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+/* Body plate — the scroll region. */
+.xeno-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--xeno-chrome-panel-body-pad);
+  overflow: auto;
+  background: var(--xeno-chrome-body);
+  color: var(--xeno-text);
+}
+
+/*
+ * Footer plate — §"Headers and Footers": "Footer padding matches header padding exactly. Headers and
+ * footers are visually symmetric." Every box metric below is the header's, duplicated deliberately
+ * rather than shared through a common class: the symmetry is a design rule a future change must break
+ * on purpose, and a shared class would let one drift silently while the other did not.
+ *
+ * `space-between` gives the dismiss-left / confirm-right arrangement the products already use.
+ */
+.xeno-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+  min-height: var(--xeno-chrome-panel-header-min-h);
+  padding: var(--xeno-chrome-panel-header-pad);
+  background: var(--xeno-chrome-plate);
+  border-top: var(--xeno-chrome-divider);
+}
+
+/*
+ * §4 "Radius Is Per-Corner, Not Per-Element": a corner is rounded only where the surface meets
+ * NOTHING. Each plate faces its neighbour across the 2px gap, so the facing corners are SQUARE — a
+ * uniform radius on every plate is the tell that this section was skipped, and it was.
+ *
+ * Declared on first/last child rather than per plate so a stack with no header, or no footer, still
+ * presents a rounded outer edge instead of a square one against the rounded shell.
+ */
+.xeno-panel > * {
+  border-radius: 0;
+}
+.xeno-panel > :first-child {
+  border-top-left-radius: var(--xeno-chrome-radius-plate);
+  border-top-right-radius: var(--xeno-chrome-radius-plate);
+}
+.xeno-panel > :last-child {
+  border-bottom-left-radius: var(--xeno-chrome-radius-plate);
+  border-bottom-right-radius: var(--xeno-chrome-radius-plate);
+}

package/src/containers/table.css

@@ -1,102 +1,102 @@
-/*
- * Dense table styles — the locked grammar for Table / DataTable. CSS-first: appearance is driven by
- * the `xeno-*` classes plus the `data-align` / `data-selection` seams, reading only the theme custom
- * properties from `xeno-theme.css`. Border-collapse with hairline BOTTOM row rules only — no vertical
- * rules, no zebra striping. Monochrome throughout; no literal colours.
- */
-
-.xeno-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9em;
-  color: var(--xeno-text);
-}
-
-.xeno-th,
-.xeno-td {
-  padding: 6px 11px;
-  text-align: left;
-  vertical-align: middle;
-}
-
-.xeno-th {
-  color: var(--xeno-muted);
-  font-weight: 600;
-  font-size: 0.85em;
-}
-
-/* Bottom border only on rows — the sole rule; header row divider comes for free. */
-.xeno-tr {
-  border-bottom: 1px solid var(--xeno-border);
-}
-
-/* ── Tracking a row ───────────────────────────────────────────────────────────────────
- * A dense table is READ by running your eye along a line, and until now nothing under the pointer
- * answered — which is what makes a table feel like a picture of data instead of data.
- *
- * The restraint here is deliberate and is the opposite of the choice made for the toggles: no flood,
- * no travel. You cross a dozen rows in a second while scanning, and anything with a 300ms gesture
- * would still be arriving when you have already left. A wash that is simply THERE is the correct
- * answer; the only thing that moves is a hairline on the leading edge, and it moves in 140ms.
- *
- * Body rows only. The header is not a row you track, and neither is the empty-state row — there is
- * nothing under the pointer there to answer for. */
-.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) {
-  background: var(--xeno-hover);
-}
-
-/* Selection axis — a step ABOVE the hover wash, not the same token. They used to share
-   `--xeno-hover`, so once rows answered the pointer a hovered row and a selected row were the same
-   colour, and the selection stopped meaning anything. */
-.xeno-tr[data-selection='on'] {
-  background: var(--xeno-control);
-}
-
-/* The leading-edge mark: a hairline that grows from the middle of the row, on hover and on selection.
-   It lives on the first cell rather than the row, because a `<tr>` is not a reliable containing block
-   under `border-collapse` — cells are. */
-.xeno-tbody .xeno-tr > :first-child {
-  position: relative;
-}
-.xeno-tbody .xeno-tr > :first-child::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--xeno-text);
-  border-radius: var(--xeno-radius-hair, 1.5px);
-  transform: scaleY(0);
-  transform-origin: center;
-}
-.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) > :first-child::before,
-.xeno-tbody .xeno-tr[data-selection='on'] > :first-child::before {
-  transform: scaleY(1);
-}
-
-/* Alignment overrides (data-* seam). */
-.xeno-th[data-align='center'],
-.xeno-td[data-align='center'] {
-  text-align: center;
-}
-.xeno-th[data-align='right'],
-.xeno-td[data-align='right'] {
-  text-align: right;
-}
-
-/* Empty state — muted, roomy, column-spanning. */
-.xeno-table-empty {
-  padding: 18px 11px;
-  color: var(--xeno-muted);
-  text-align: center;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .xeno-tr {
-    transition: background var(--xeno-dur) var(--xeno-ease);
-  }
-  .xeno-tbody .xeno-tr > :first-child::before {
-    transition: transform var(--xeno-dur) var(--xeno-ease);
-  }
-}
+/*
+ * Dense table styles — the locked grammar for Table / DataTable. CSS-first: appearance is driven by
+ * the `xeno-*` classes plus the `data-align` / `data-selection` seams, reading only the theme custom
+ * properties from `xeno-theme.css`. Border-collapse with hairline BOTTOM row rules only — no vertical
+ * rules, no zebra striping. Monochrome throughout; no literal colours.
+ */
+
+.xeno-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  color: var(--xeno-text);
+}
+
+.xeno-th,
+.xeno-td {
+  padding: 6px 11px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.xeno-th {
+  color: var(--xeno-muted);
+  font-weight: 600;
+  font-size: 0.85em;
+}
+
+/* Bottom border only on rows — the sole rule; header row divider comes for free. */
+.xeno-tr {
+  border-bottom: 1px solid var(--xeno-border);
+}
+
+/* ── Tracking a row ───────────────────────────────────────────────────────────────────
+ * A dense table is READ by running your eye along a line, and until now nothing under the pointer
+ * answered — which is what makes a table feel like a picture of data instead of data.
+ *
+ * The restraint here is deliberate and is the opposite of the choice made for the toggles: no flood,
+ * no travel. You cross a dozen rows in a second while scanning, and anything with a 300ms gesture
+ * would still be arriving when you have already left. A wash that is simply THERE is the correct
+ * answer; the only thing that moves is a hairline on the leading edge, and it moves in 140ms.
+ *
+ * Body rows only. The header is not a row you track, and neither is the empty-state row — there is
+ * nothing under the pointer there to answer for. */
+.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) {
+  background: var(--xeno-hover);
+}
+
+/* Selection axis — a step ABOVE the hover wash, not the same token. They used to share
+   `--xeno-hover`, so once rows answered the pointer a hovered row and a selected row were the same
+   colour, and the selection stopped meaning anything. */
+.xeno-tr[data-selection='on'] {
+  background: var(--xeno-control);
+}
+
+/* The leading-edge mark: a hairline that grows from the middle of the row, on hover and on selection.
+   It lives on the first cell rather than the row, because a `<tr>` is not a reliable containing block
+   under `border-collapse` — cells are. */
+.xeno-tbody .xeno-tr > :first-child {
+  position: relative;
+}
+.xeno-tbody .xeno-tr > :first-child::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair, 1.5px);
+  transform: scaleY(0);
+  transform-origin: center;
+}
+.xeno-tbody .xeno-tr:hover:not(:has(.xeno-table-empty)) > :first-child::before,
+.xeno-tbody .xeno-tr[data-selection='on'] > :first-child::before {
+  transform: scaleY(1);
+}
+
+/* Alignment overrides (data-* seam). */
+.xeno-th[data-align='center'],
+.xeno-td[data-align='center'] {
+  text-align: center;
+}
+.xeno-th[data-align='right'],
+.xeno-td[data-align='right'] {
+  text-align: right;
+}
+
+/* Empty state — muted, roomy, column-spanning. */
+.xeno-table-empty {
+  padding: 18px 11px;
+  color: var(--xeno-muted);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-tr {
+    transition: background var(--xeno-dur) var(--xeno-ease);
+  }
+  .xeno-tbody .xeno-tr > :first-child::before {
+    transition: transform var(--xeno-dur) var(--xeno-ease);
+  }
+}