@xenosystem/elements-react 0.0.3 → 0.0.5

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,125 @@
-/*
- * 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);
+}
+
+.xeno-panel-body:focus-visible {
+  outline: 1px solid var(--xeno-text);
+  outline-offset: -1px;
+}