@xenosystem/elements-react 0.0.1 → 0.0.3

package/src/status/statusindicator.css

@@ -1,65 +1,65 @@
-/*
- * StatusIndicator — an inline square mark + label.
- *
- * CSS-first: the mark's paint is driven by `data-tone`. The mark is a rounded SQUARE (radius-xs),
- * never a circle. `neutral`/`active` stay monochrome (theme greys); `success` colours from the injected
- * `--xeno-status-tone` var (set from the status token by the renderer); `danger` uses `--xeno-danger`.
- * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
- * No literal colours here.
- */
-
-.xeno-statusindicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1;
-  color: var(--xeno-text);
-}
-
-.xeno-statusindicator-mark {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: var(--xeno-radius-xs);
-  background: var(--xeno-muted);
-}
-
-.xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
-  background: var(--xeno-active);
-}
-
-.xeno-statusindicator[data-tone='success'] .xeno-statusindicator-mark {
-  background: var(--xeno-status-tone);
-}
-
-.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-mark {
-  background: var(--xeno-danger);
-}
-
-/* neutral label reads a touch dimmer; the tonal ones keep the mark as the accent */
-.xeno-statusindicator[data-tone='neutral'] .xeno-statusindicator-label {
-  color: var(--xeno-muted);
-}
-
-.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-label {
-  color: var(--xeno-danger);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes xeno-statusindicator-breathe {
-    0%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(0.72);
-      opacity: 0.6;
-    }
-  }
-  .xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
-    animation: xeno-statusindicator-breathe 1.6s var(--xeno-ease) infinite;
-  }
-}
+/*
+ * StatusIndicator — an inline square mark + label.
+ *
+ * CSS-first: the mark's paint is driven by `data-tone`. The mark is a rounded SQUARE (radius-xs),
+ * never a circle. `neutral`/`active` stay monochrome (theme greys); `success` colours from the injected
+ * `--xeno-status-tone` var (set from the status token by the renderer); `danger` uses `--xeno-danger`.
+ * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
+ * No literal colours here.
+ */
+
+.xeno-statusindicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--xeno-text);
+}
+
+.xeno-statusindicator-mark {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--xeno-radius-xs);
+  background: var(--xeno-muted);
+}
+
+.xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
+  background: var(--xeno-active);
+}
+
+.xeno-statusindicator[data-tone='success'] .xeno-statusindicator-mark {
+  background: var(--xeno-status-tone);
+}
+
+.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-mark {
+  background: var(--xeno-danger);
+}
+
+/* neutral label reads a touch dimmer; the tonal ones keep the mark as the accent */
+.xeno-statusindicator[data-tone='neutral'] .xeno-statusindicator-label {
+  color: var(--xeno-muted);
+}
+
+.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-label {
+  color: var(--xeno-danger);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes xeno-statusindicator-breathe {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(0.72);
+      opacity: 0.6;
+    }
+  }
+  .xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
+    animation: xeno-statusindicator-breathe 1.6s var(--xeno-ease) infinite;
+  }
+}

package/src/status/steptimeline.css

@@ -1,137 +1,137 @@
-/*
- * StepTimeline — a vertical run of steps threaded by a hairline spine.
- *
- * CSS-first: paint is driven by `data-status` on each step; the size mark is a rounded SQUARE
- * (radius-xs), never a circle. Monochrome throughout — spine + marks are greys from `xeno-theme.css`.
- * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
- * No literal colours here.
- */
-
-.xeno-steptimeline {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Two columns: the rail (fixed mark width) + the body. Rows stack with no gap so the spine of one
-   step reaches the mark of the next. */
-.xeno-steptimeline-step {
-  display: grid;
-  grid-template-columns: 16px 1fr;
-  column-gap: 12px;
-}
-
-/* ── Rail (mark + spine) — decorative, aria-hidden ───────────────────────────────────── */
-.xeno-steptimeline-rail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* stretch to the row height so the spine's flex fill spans down to the next mark */
-}
-
-.xeno-steptimeline-mark {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-top: 1px;
-  border-radius: var(--xeno-radius-xs);
-}
-
-/* pending — an outline square, not yet reached */
-.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-mark {
-  background: transparent;
-  border: 1.5px solid var(--xeno-muted);
-}
-
-/* active — a filled square, breathing (see reduced-motion gate below) */
-.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
-  background: var(--xeno-active);
-}
-
-/* done — filled to text colour; the check glyph inherits `--xeno-on-accent` via currentColor */
-.xeno-steptimeline-step[data-status='done'] .xeno-steptimeline-mark {
-  background: var(--xeno-text);
-  color: var(--xeno-on-accent);
-}
-
-/* the connecting spine — a 1.5px rounded border-coloured bar filling to the next mark */
-.xeno-steptimeline-spine {
-  flex: 1 1 auto;
-  width: 1.5px;
-  min-height: 12px;
-  margin: 2px 0;
-  background: var(--xeno-border);
-  border-radius: var(--xeno-radius-hair);
-}
-
-/* ── Body (label + optional time) ────────────────────────────────────────────────────── */
-.xeno-steptimeline-body {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  min-height: 18px;
-}
-
-/* space between steps — every step but the last pads its body so the spine has length */
-.xeno-steptimeline-step:not(:last-child) .xeno-steptimeline-body {
-  padding-bottom: 20px;
-}
-
-.xeno-steptimeline-label {
-  flex: 1 1 auto;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.3;
-  color: var(--xeno-text);
-}
-
-.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-label {
-  color: var(--xeno-muted);
-}
-
-.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-label {
-  font-weight: 500;
-}
-
-.xeno-steptimeline-time {
-  flex: none;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.3;
-  font-variant-numeric: tabular-nums;
-  color: var(--xeno-muted);
-}
-
-/* screen-reader-only status word — the visible mark is decorative */
-.xeno-steptimeline-sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes xeno-steptimeline-breathe {
-    0%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(0.78);
-      opacity: 0.6;
-    }
-  }
-  .xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
-    animation: xeno-steptimeline-breathe 1.8s var(--xeno-ease) infinite;
-  }
-}
+/*
+ * StepTimeline — a vertical run of steps threaded by a hairline spine.
+ *
+ * CSS-first: paint is driven by `data-status` on each step; the size mark is a rounded SQUARE
+ * (radius-xs), never a circle. Monochrome throughout — spine + marks are greys from `xeno-theme.css`.
+ * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
+ * No literal colours here.
+ */
+
+.xeno-steptimeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Two columns: the rail (fixed mark width) + the body. Rows stack with no gap so the spine of one
+   step reaches the mark of the next. */
+.xeno-steptimeline-step {
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  column-gap: 12px;
+}
+
+/* ── Rail (mark + spine) — decorative, aria-hidden ───────────────────────────────────── */
+.xeno-steptimeline-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* stretch to the row height so the spine's flex fill spans down to the next mark */
+}
+
+.xeno-steptimeline-mark {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  border-radius: var(--xeno-radius-xs);
+}
+
+/* pending — an outline square, not yet reached */
+.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-mark {
+  background: transparent;
+  border: 1.5px solid var(--xeno-muted);
+}
+
+/* active — a filled square, breathing (see reduced-motion gate below) */
+.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
+  background: var(--xeno-active);
+}
+
+/* done — filled to text colour; the check glyph inherits `--xeno-on-accent` via currentColor */
+.xeno-steptimeline-step[data-status='done'] .xeno-steptimeline-mark {
+  background: var(--xeno-text);
+  color: var(--xeno-on-accent);
+}
+
+/* the connecting spine — a 1.5px rounded border-coloured bar filling to the next mark */
+.xeno-steptimeline-spine {
+  flex: 1 1 auto;
+  width: 1.5px;
+  min-height: 12px;
+  margin: 2px 0;
+  background: var(--xeno-border);
+  border-radius: var(--xeno-radius-hair);
+}
+
+/* ── Body (label + optional time) ────────────────────────────────────────────────────── */
+.xeno-steptimeline-body {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-height: 18px;
+}
+
+/* space between steps — every step but the last pads its body so the spine has length */
+.xeno-steptimeline-step:not(:last-child) .xeno-steptimeline-body {
+  padding-bottom: 20px;
+}
+
+.xeno-steptimeline-label {
+  flex: 1 1 auto;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.3;
+  color: var(--xeno-text);
+}
+
+.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-label {
+  color: var(--xeno-muted);
+}
+
+.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-label {
+  font-weight: 500;
+}
+
+.xeno-steptimeline-time {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+  color: var(--xeno-muted);
+}
+
+/* screen-reader-only status word — the visible mark is decorative */
+.xeno-steptimeline-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes xeno-steptimeline-breathe {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(0.78);
+      opacity: 0.6;
+    }
+  }
+  .xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
+    animation: xeno-steptimeline-breathe 1.8s var(--xeno-ease) infinite;
+  }
+}

package/src/status/thinkingcube.css

@@ -1,75 +1,75 @@
-/*
- * ThinkingCube — the LOCKED branded model avatar. A single rounded SQUARE that either BREATHES
- * (thinking: one continuous rotate + scale loop) or LANDS (settled: a one-shot grow while the fill
- * grows opaque canvas → muted). Monochrome shell: muted hairline outline, canvas/muted fill only.
- * No circles, no coloured glow. Motion is transform/opacity + background-color; a reduced-motion
- * override stills the spin and leaves `settled` as a static filled square.
- */
-
-.xeno-cube {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--xeno-cube-size, 24px);
-  height: var(--xeno-cube-size, 24px);
-  line-height: 0;
-  flex: none;
-}
-
-.xeno-cube-body {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border: 1.5px solid var(--xeno-muted);
-  border-radius: var(--xeno-radius-xs);
-  background-color: var(--xeno-canvas);
-  transform-origin: center;
-  will-change: transform, background-color;
-}
-
-/* thinking — ONE continuous loop: rotate 0→360° while the scale breathes 1 → .52 → 1. */
-.xeno-cube[data-state='thinking'] .xeno-cube-body {
-  background-color: var(--xeno-canvas);
-  animation: xeno-cube-life 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
-}
-
-/* settled — runs ONCE: grow .8 → 1.14 → 1 while the SAME square fills canvas → muted, then holds. */
-.xeno-cube[data-state='settled'] .xeno-cube-body {
-  background-color: var(--xeno-muted);
-  animation: xeno-cube-settle 0.52s var(--xeno-ease) both;
-}
-
-@keyframes xeno-cube-life {
-  0% {
-    transform: rotate(0deg) scale(1);
-  }
-  50% {
-    transform: rotate(180deg) scale(0.52);
-  }
-  100% {
-    transform: rotate(360deg) scale(1);
-  }
-}
-
-@keyframes xeno-cube-settle {
-  0% {
-    transform: scale(0.8);
-    background-color: var(--xeno-canvas);
-  }
-  60% {
-    transform: scale(1.14);
-  }
-  100% {
-    transform: scale(1);
-    background-color: var(--xeno-muted);
-  }
-}
-
-/* Reduced motion: no spin, no grow. `settled` still rests as its filled muted square (base rule above);
-   `thinking` rests as a still, muted-outlined canvas square. */
-@media (prefers-reduced-motion: reduce) {
-  .xeno-cube[data-state='thinking'] .xeno-cube-body,
-  .xeno-cube[data-state='settled'] .xeno-cube-body {
-    animation: none;
-  }
-}
+/*
+ * ThinkingCube — the LOCKED branded model avatar. A single rounded SQUARE that either BREATHES
+ * (thinking: one continuous rotate + scale loop) or LANDS (settled: a one-shot grow while the fill
+ * grows opaque canvas → muted). Monochrome shell: muted hairline outline, canvas/muted fill only.
+ * No circles, no coloured glow. Motion is transform/opacity + background-color; a reduced-motion
+ * override stills the spin and leaves `settled` as a static filled square.
+ */
+
+.xeno-cube {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--xeno-cube-size, 24px);
+  height: var(--xeno-cube-size, 24px);
+  line-height: 0;
+  flex: none;
+}
+
+.xeno-cube-body {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--xeno-muted);
+  border-radius: var(--xeno-radius-xs);
+  background-color: var(--xeno-canvas);
+  transform-origin: center;
+  will-change: transform, background-color;
+}
+
+/* thinking — ONE continuous loop: rotate 0→360° while the scale breathes 1 → .52 → 1. */
+.xeno-cube[data-state='thinking'] .xeno-cube-body {
+  background-color: var(--xeno-canvas);
+  animation: xeno-cube-life 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+/* settled — runs ONCE: grow .8 → 1.14 → 1 while the SAME square fills canvas → muted, then holds. */
+.xeno-cube[data-state='settled'] .xeno-cube-body {
+  background-color: var(--xeno-muted);
+  animation: xeno-cube-settle 0.52s var(--xeno-ease) both;
+}
+
+@keyframes xeno-cube-life {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.52);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes xeno-cube-settle {
+  0% {
+    transform: scale(0.8);
+    background-color: var(--xeno-canvas);
+  }
+  60% {
+    transform: scale(1.14);
+  }
+  100% {
+    transform: scale(1);
+    background-color: var(--xeno-muted);
+  }
+}
+
+/* Reduced motion: no spin, no grow. `settled` still rests as its filled muted square (base rule above);
+   `thinking` rests as a still, muted-outlined canvas square. */
+@media (prefers-reduced-motion: reduce) {
+  .xeno-cube[data-state='thinking'] .xeno-cube-body,
+  .xeno-cube[data-state='settled'] .xeno-cube-body {
+    animation: none;
+  }
+}

package/src/xeno-element.css

@@ -1,60 +1,60 @@
-/*
- * Base presentation for a XENO element. CSS-FIRST, 0 kb JS: an element's discrete state lives in
- * `data-<axis>` attributes on the root, and this stylesheet is where any transition attaches — never a
- * JavaScript animation runtime (SPEC §6, so elements survive sandboxed iframes and web export).
- *
- * Geometry variant swaps (bookmark off↔on) are re-rendered from `state` by the renderer. Channel
- * transitions declared as BINDINGS (opacity/scale/fill over ms) land here as they are added; the axis
- * attributes below are the selectors they will hang off. `currentColor` keeps every glyph monochrome
- * and inheriting the surrounding text colour.
- */
-
-.xeno-element {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 0;
-  color: inherit;
-}
-
-/* An element the product marks unavailable reads as dimmed everywhere, from one rule. */
-.xeno-element[data-availability='disabled'] {
-  opacity: 0.4;
-}
-.xeno-element[data-availability='busy'] {
-  cursor: progress;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .xeno-element,
-  .xeno-element * {
-    transition:
-      opacity 160ms ease,
-      transform 160ms ease,
-      fill 160ms ease,
-      stroke 160ms ease;
-  }
-}
-
-
-/* ── Morphing between geometry variants ───────────────────────────────────────────────
- * When a declaration's active variant is interpolable with `base` — same primitive count, same kind at
- * every index — the renderer marks the icon `data-morph="on"` and hands each path its own `d` a second
- * time, as `--part-d`. That is all the seam needs: `d` is an animatable CSS property, a custom property
- * changing is a computed-value change, so the swap becomes a transition and the icon draws itself from
- * one shape into the other.
- *
- * Still no animation runtime. The renderer never animates; it states that an animation is possible and
- * the stylesheet decides whether to take it — the same division the rest of this system runs on.
- *
- * Behind `@supports` because `d` as a CSS property is not universal. Where it is missing, the `d`
- * ATTRIBUTE is still correct and still swapped on re-render, so the icon changes instantly instead of
- * morphing: the worse animation, never the wrong picture. */
-@supports (d: path('M0 0')) {
-  .xeno-element[data-morph='on'] .xeno-part {
-    d: var(--part-d);
-    transition: d var(--xeno-dur-morph, 320ms) var(--xeno-ease-morph, cubic-bezier(0.22, 0.7, 0.2, 1));
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .xeno-element[data-morph='on'] .xeno-part { transition: none; }
-  }
-}
+/*
+ * Base presentation for a XENO element. CSS-FIRST, 0 kb JS: an element's discrete state lives in
+ * `data-<axis>` attributes on the root, and this stylesheet is where any transition attaches — never a
+ * JavaScript animation runtime (SPEC §6, so elements survive sandboxed iframes and web export).
+ *
+ * Geometry variant swaps (bookmark off↔on) are re-rendered from `state` by the renderer. Channel
+ * transitions declared as BINDINGS (opacity/scale/fill over ms) land here as they are added; the axis
+ * attributes below are the selectors they will hang off. `currentColor` keeps every glyph monochrome
+ * and inheriting the surrounding text colour.
+ */
+
+.xeno-element {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+  color: inherit;
+}
+
+/* An element the product marks unavailable reads as dimmed everywhere, from one rule. */
+.xeno-element[data-availability='disabled'] {
+  opacity: 0.4;
+}
+.xeno-element[data-availability='busy'] {
+  cursor: progress;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-element,
+  .xeno-element * {
+    transition:
+      opacity 160ms ease,
+      transform 160ms ease,
+      fill 160ms ease,
+      stroke 160ms ease;
+  }
+}
+
+
+/* ── Morphing between geometry variants ───────────────────────────────────────────────
+ * When a declaration's active variant is interpolable with `base` — same primitive count, same kind at
+ * every index — the renderer marks the icon `data-morph="on"` and hands each path its own `d` a second
+ * time, as `--part-d`. That is all the seam needs: `d` is an animatable CSS property, a custom property
+ * changing is a computed-value change, so the swap becomes a transition and the icon draws itself from
+ * one shape into the other.
+ *
+ * Still no animation runtime. The renderer never animates; it states that an animation is possible and
+ * the stylesheet decides whether to take it — the same division the rest of this system runs on.
+ *
+ * Behind `@supports` because `d` as a CSS property is not universal. Where it is missing, the `d`
+ * ATTRIBUTE is still correct and still swapped on re-render, so the icon changes instantly instead of
+ * morphing: the worse animation, never the wrong picture. */
+@supports (d: path('M0 0')) {
+  .xeno-element[data-morph='on'] .xeno-part {
+    d: var(--part-d);
+    transition: d var(--xeno-dur-morph, 320ms) var(--xeno-ease-morph, cubic-bezier(0.22, 0.7, 0.2, 1));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .xeno-element[data-morph='on'] .xeno-part { transition: none; }
+  }
+}