@xenosystem/elements-react 0.0.3 → 0.0.5

package/src/chrome-unified.css

@@ -1,72 +1,72 @@
-/*
- * ══════════════════════════════════════════════════════════════════════════════════════════════
- *  OWNED FILE — SOFT (`unified`)
- * ══════════════════════════════════════════════════════════════════════════════════════════════
- *
- * One construction, one file, one owner, so the two can be worked on in parallel without either
- * side touching the other's values. Everything a construction decides lives HERE — colours, box
- * metrics, typography, radii. Nothing construction-specific belongs in a component stylesheet or
- * in `xeno-theme.css`, because those are shared and a change there hits BOTH looks.
- *
- * THE CONTRACT BETWEEN THE TWO FILES, enforced by `theme.test.ts`:
- *   1. Every token declared in `chrome-separated.css` must also be declared here, and vice versa.
- *      Adding one on your side and not telling the other side is the failure mode — the missing
- *      one silently inherits the other construction's value and half-renders.
- *   2. Every token must actually DIFFER between the two files. If a value is the same in both, it
- *      is not a construction decision: move it to the shared base.
- *
- * So adding a token is a two-file change and the suite will say so. That is deliberate: it is the
- * cheapest possible coordination between two people editing in parallel.
- */
-
-/* ── UNIFIED chrome ────────────────────────────────────────────────────────────────────────────
- * One clipped surface with hairline dividers — the construction this set shipped before the chrome
- * axis existed, preserved deliberately rather than corrected away.
- *
- * It is expressed ENTIRELY as values. Collapsing the gap to 0, painting the shell with the surface
- * colour and making the plates transparent reproduces a single card exactly — same DOM, same
- * components, no second implementation. That is the whole test for whether something may be a theme.
- */
-[data-chrome='unified'] {
-  --xeno-chrome-gap: 0px;
-  --xeno-chrome-inset: 0px;
-  --xeno-chrome-shell: var(--xeno-surface);
-  --xeno-chrome-plate: transparent;
-  --xeno-chrome-body: transparent;
-  --xeno-chrome-divider: 1px solid var(--xeno-border);
-  --xeno-chrome-shadow: 0 12px 48px -16px rgba(0, 0, 0, 0.55);
-  --xeno-chrome-radius: var(--xeno-radius-card);
-  --xeno-chrome-radius-plate: 0px;
-  /* No glass: a single clipped surface has nothing behind a plate to blur. */
-  --xeno-chrome-plate-filter: none;
-  /* The inverted primary this set already shipped — preserved, not corrected. */
-  /* The soft card this set shipped — surface, big radius, hairline, and a real shadow. */
-  --xeno-chrome-card-bg: var(--xeno-surface);
-  --xeno-chrome-card-border: 1px solid var(--xeno-border);
-  --xeno-chrome-card-radius: var(--xeno-radius-card);
-  --xeno-chrome-card-pad: 13px 15px;
-  --xeno-chrome-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
-  --xeno-chrome-card-lift: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
-
-  /* Restores every pre-axis value exactly. Verified against the baseline, not eyeballed. */
-  --xeno-chrome-border: var(--xeno-border);
-  --xeno-chrome-panel-header-pad: 11px 15px;
-  --xeno-chrome-panel-header-min-h: auto;
-  --xeno-chrome-panel-body-pad: 15px;
-  --xeno-chrome-title-size: 14px;
-  --xeno-chrome-title-color: var(--xeno-text);
-  --xeno-chrome-title-transform: none;
-  --xeno-chrome-title-spacing: normal;
-  --xeno-chrome-dialog-header-pad: 16px 16px 12px 20px;
-  --xeno-chrome-dialog-title-size: 16px;
-  --xeno-chrome-dialog-title-weight: 600;
-  --xeno-chrome-dialog-body-pad: 4px 20px 20px;
-  --xeno-chrome-dialog-body-size: 14px;
-  --xeno-chrome-dialog-footer-pad: 12px 20px;
-  --xeno-chrome-dialog-footer-gap: 8px;
-  --xeno-chrome-card-elevated-bg: var(--xeno-elevated);
-
-  --xeno-chrome-btn-primary-bg: var(--xeno-text);
-  --xeno-chrome-btn-primary-fg: var(--xeno-on-accent);
-  --xeno-chrome-btn-radius: var(--xeno-radius-control);
-}
+/*
+ * ══════════════════════════════════════════════════════════════════════════════════════════════
+ *  OWNED FILE — SOFT (`unified`)
+ * ══════════════════════════════════════════════════════════════════════════════════════════════
+ *
+ * One construction, one file, one owner, so the two can be worked on in parallel without either
+ * side touching the other's values. Everything a construction decides lives HERE — colours, box
+ * metrics, typography, radii. Nothing construction-specific belongs in a component stylesheet or
+ * in `xeno-theme.css`, because those are shared and a change there hits BOTH looks.
+ *
+ * THE CONTRACT BETWEEN THE TWO FILES, enforced by `theme.test.ts`:
+ *   1. Every token declared in `chrome-separated.css` must also be declared here, and vice versa.
+ *      Adding one on your side and not telling the other side is the failure mode — the missing
+ *      one silently inherits the other construction's value and half-renders.
+ *   2. Every token must actually DIFFER between the two files. If a value is the same in both, it
+ *      is not a construction decision: move it to the shared base.
+ *
+ * So adding a token is a two-file change and the suite will say so. That is deliberate: it is the
+ * cheapest possible coordination between two people editing in parallel.
+ */
+
+/* ── UNIFIED chrome ────────────────────────────────────────────────────────────────────────────
+ * One clipped surface with hairline dividers — the construction this set shipped before the chrome
+ * axis existed, preserved deliberately rather than corrected away.
+ *
+ * It is expressed ENTIRELY as values. Collapsing the gap to 0, painting the shell with the surface
+ * colour and making the plates transparent reproduces a single card exactly — same DOM, same
+ * components, no second implementation. That is the whole test for whether something may be a theme.
+ */
+[data-chrome='unified'] {
+  --xeno-chrome-gap: 0px;
+  --xeno-chrome-inset: 0px;
+  --xeno-chrome-shell: var(--xeno-surface);
+  --xeno-chrome-plate: transparent;
+  --xeno-chrome-body: transparent;
+  --xeno-chrome-divider: 1px solid var(--xeno-border);
+  --xeno-chrome-shadow: 0 12px 48px -16px rgba(0, 0, 0, 0.55);
+  --xeno-chrome-radius: var(--xeno-radius-card);
+  --xeno-chrome-radius-plate: 0px;
+  /* No glass: a single clipped surface has nothing behind a plate to blur. */
+  --xeno-chrome-plate-filter: none;
+  /* The inverted primary this set already shipped — preserved, not corrected. */
+  /* The soft card this set shipped — surface, big radius, hairline, and a real shadow. */
+  --xeno-chrome-card-bg: var(--xeno-surface);
+  --xeno-chrome-card-border: 1px solid var(--xeno-border);
+  --xeno-chrome-card-radius: var(--xeno-radius-card);
+  --xeno-chrome-card-pad: 13px 15px;
+  --xeno-chrome-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --xeno-chrome-card-lift: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
+
+  /* Restores every pre-axis value exactly. Verified against the baseline, not eyeballed. */
+  --xeno-chrome-border: var(--xeno-border);
+  --xeno-chrome-panel-header-pad: 11px 15px;
+  --xeno-chrome-panel-header-min-h: auto;
+  --xeno-chrome-panel-body-pad: 15px;
+  --xeno-chrome-title-size: 14px;
+  --xeno-chrome-title-color: var(--xeno-text);
+  --xeno-chrome-title-transform: none;
+  --xeno-chrome-title-spacing: normal;
+  --xeno-chrome-dialog-header-pad: 16px 16px 12px 20px;
+  --xeno-chrome-dialog-title-size: 16px;
+  --xeno-chrome-dialog-title-weight: 600;
+  --xeno-chrome-dialog-body-pad: 4px 20px 20px;
+  --xeno-chrome-dialog-body-size: 14px;
+  --xeno-chrome-dialog-footer-pad: 12px 20px;
+  --xeno-chrome-dialog-footer-gap: 8px;
+  --xeno-chrome-card-elevated-bg: var(--xeno-elevated);
+
+  --xeno-chrome-btn-primary-bg: var(--xeno-text);
+  --xeno-chrome-btn-primary-fg: var(--xeno-on-accent);
+  --xeno-chrome-btn-radius: var(--xeno-radius-control);
+}

package/src/containers/Badges.css

@@ -1,116 +1,116 @@
-/*
- * Badges — inline monochrome markers (Badge / StatusPill / CountBadge / CitationBadge).
- *
- * CSS-first, driven by the theme custom properties from `xeno-theme.css`. These elements are STATIC
- * (no interaction), so the only state seam is `data-tone` on the tonal members. Colours stay in the
- * monochrome shell; the sole exception is the StatusPill status hue — `success`/`warning` arrive as
- * the inline `--xeno-pill-tone` var (set from the status token by the renderer) and `danger` maps to
- * `--xeno-danger`. Grammar: rounded squares, never circles. No literal colours here.
- */
-
-/* ── Badge ─────────────────────────────────────────────────────────────────────────── */
-.xeno-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 16px;
-  padding: 0 6px;
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  color: var(--xeno-muted);
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-sm);
-}
-
-/* ── StatusPill ────────────────────────────────────────────────────────────────────── */
-.xeno-statuspill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 16px;
-  padding: 0 6px;
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  color: var(--xeno-muted);
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-sm);
-}
-
-/* leading dot — a rounded SQUARE (never a circle), inheriting the pill tone via currentColor */
-.xeno-statuspill-dot {
-  flex: none;
-  width: 5px;
-  height: 5px;
-  background: currentColor;
-  border-radius: var(--xeno-radius-hair);
-}
-
-/* success / warning: colour text + border from the injected status-token var */
-.xeno-statuspill[data-tone='success'],
-.xeno-statuspill[data-tone='warning'] {
-  color: var(--xeno-pill-tone);
-  border-color: color-mix(in srgb, var(--xeno-pill-tone) 45%, transparent);
-}
-
-/* danger: the one status hue that IS a theme token */
-.xeno-statuspill[data-tone='danger'] {
-  color: var(--xeno-danger);
-  border-color: color-mix(in srgb, var(--xeno-danger) 45%, transparent);
-}
-
-/* ── CountBadge ────────────────────────────────────────────────────────────────────── */
-.xeno-countbadge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  color: var(--xeno-text);
-  background: var(--xeno-control);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-sm);
-}
-
-/* ── CitationBadge ─────────────────────────────────────────────────────────────────── */
-.xeno-citation {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  height: 16px;
-  padding: 0 4px;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  vertical-align: baseline;
-  color: var(--xeno-muted);
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-sm);
-}
-
-/* the index reads brighter than its muted brackets */
-.xeno-citation-index {
-  color: var(--xeno-text);
-}
+/*
+ * Badges — inline monochrome markers (Badge / StatusPill / CountBadge / CitationBadge).
+ *
+ * CSS-first, driven by the theme custom properties from `xeno-theme.css`. These elements are STATIC
+ * (no interaction), so the only state seam is `data-tone` on the tonal members. Colours stay in the
+ * monochrome shell; the sole exception is the StatusPill status hue — `success`/`warning` arrive as
+ * the inline `--xeno-pill-tone` var (set from the status token by the renderer) and `danger` maps to
+ * `--xeno-danger`. Grammar: rounded squares, never circles. No literal colours here.
+ */
+
+/* ── Badge ─────────────────────────────────────────────────────────────────────────── */
+.xeno-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 16px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* ── StatusPill ────────────────────────────────────────────────────────────────────── */
+.xeno-statuspill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 16px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* leading dot — a rounded SQUARE (never a circle), inheriting the pill tone via currentColor */
+.xeno-statuspill-dot {
+  flex: none;
+  width: 5px;
+  height: 5px;
+  background: currentColor;
+  border-radius: var(--xeno-radius-hair);
+}
+
+/* success / warning: colour text + border from the injected status-token var */
+.xeno-statuspill[data-tone='success'],
+.xeno-statuspill[data-tone='warning'] {
+  color: var(--xeno-pill-tone);
+  border-color: color-mix(in srgb, var(--xeno-pill-tone) 45%, transparent);
+}
+
+/* danger: the one status hue that IS a theme token */
+.xeno-statuspill[data-tone='danger'] {
+  color: var(--xeno-danger);
+  border-color: color-mix(in srgb, var(--xeno-danger) 45%, transparent);
+}
+
+/* ── CountBadge ────────────────────────────────────────────────────────────────────── */
+.xeno-countbadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--xeno-text);
+  background: var(--xeno-control);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* ── CitationBadge ─────────────────────────────────────────────────────────────────── */
+.xeno-citation {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 16px;
+  padding: 0 4px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* the index reads brighter than its muted brackets */
+.xeno-citation-index {
+  color: var(--xeno-text);
+}

package/src/containers/avatar.css

@@ -1,70 +1,70 @@
-/*
- * Avatar + AvatarStack — a person/agent tile and its overlapping cluster. CSS-first: the square edge is
- * an inline `--xeno-avatar-size` var (set by the component from `size`), so metrics never drift from the
- * data. Rounded SQUARES only (`radius-xs`), never circles. Monochrome shell; depth is a hairline border
- * plus, in the stack, a flat canvas ring. No literal colours — theme tokens only.
- */
-
-.xeno-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  box-sizing: border-box;
-  width: var(--xeno-avatar-size, 24px);
-  height: var(--xeno-avatar-size, 24px);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-xs);
-  background: var(--xeno-control);
-  color: var(--xeno-muted);
-  overflow: hidden;
-  user-select: none;
-  vertical-align: middle;
-}
-
-/* Image fill — cover the square, clipped to its rounded corners. */
-.xeno-avatar-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: inherit;
-}
-
-/* Initials + '+N' overflow text — centred, uppercase, muted, scaled off the edge length. */
-.xeno-avatar-initials {
-  font-family: inherit;
-  font-size: calc(var(--xeno-avatar-size, 24px) * 0.4);
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  color: var(--xeno-muted);
-  text-transform: uppercase;
-}
-
-/* Glyph fallback inherits the tile's muted ink via currentColor. */
-.xeno-avatar[data-variant='icon'] {
-  color: var(--xeno-muted);
-}
-
-/* ── AvatarStack ─────────────────────────────────────────────────────────────────── */
-.xeno-avatar-stack {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-/* Overlap: pull each tile left and ring it in the canvas so the stack reads as separated squares. */
-.xeno-avatar-stack > .xeno-avatar {
-  position: relative;
-  margin-left: -8px;
-  box-shadow: 0 0 0 2px var(--xeno-canvas);
-}
-.xeno-avatar-stack > .xeno-avatar:first-child {
-  margin-left: 0;
-}
-
-/* The '+N' tile sits on the elevated surface to distinguish it from the people tiles. */
-.xeno-avatar-more {
-  background: var(--xeno-elevated);
-}
+/*
+ * Avatar + AvatarStack — a person/agent tile and its overlapping cluster. CSS-first: the square edge is
+ * an inline `--xeno-avatar-size` var (set by the component from `size`), so metrics never drift from the
+ * data. Rounded SQUARES only (`radius-xs`), never circles. Monochrome shell; depth is a hairline border
+ * plus, in the stack, a flat canvas ring. No literal colours — theme tokens only.
+ */
+
+.xeno-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--xeno-avatar-size, 24px);
+  height: var(--xeno-avatar-size, 24px);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-xs);
+  background: var(--xeno-control);
+  color: var(--xeno-muted-text);
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+}
+
+/* Image fill — cover the square, clipped to its rounded corners. */
+.xeno-avatar-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* Initials + '+N' overflow text — centred, uppercase, muted, scaled off the edge length. */
+.xeno-avatar-initials {
+  font-family: inherit;
+  font-size: calc(var(--xeno-avatar-size, 24px) * 0.4);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--xeno-muted-text);
+  text-transform: uppercase;
+}
+
+/* Glyph fallback inherits the tile's muted ink via currentColor. */
+.xeno-avatar[data-variant='icon'] {
+  color: var(--xeno-muted-text);
+}
+
+/* ── AvatarStack ─────────────────────────────────────────────────────────────────── */
+.xeno-avatar-stack {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+/* Overlap: pull each tile left and ring it in the canvas so the stack reads as separated squares. */
+.xeno-avatar-stack > .xeno-avatar {
+  position: relative;
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px var(--xeno-canvas);
+}
+.xeno-avatar-stack > .xeno-avatar:first-child {
+  margin-left: 0;
+}
+
+/* The '+N' tile sits on the elevated surface to distinguish it from the people tiles. */
+.xeno-avatar-more {
+  background: var(--xeno-elevated);
+}