@xenosystem/elements-react 0.0.1 → 0.0.3

package/src/containers/tile.css

@@ -1,17 +1,17 @@
-/*
- * Tile — a square icon tile. Rounded square (radius-md), a surface ground, a hairline border, and a
- * centred glyph in muted ink. The box edge arrives as an inline `--xeno-tile-size` var. No literal
- * colours; monochrome shell.
- */
-.xeno-tile {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: var(--xeno-tile-size, 32px);
-  height: var(--xeno-tile-size, 32px);
-  color: var(--xeno-muted);
-  background: var(--xeno-surface);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-md);
-}
+/*
+ * Tile — a square icon tile. Rounded square (radius-md), a surface ground, a hairline border, and a
+ * centred glyph in muted ink. The box edge arrives as an inline `--xeno-tile-size` var. No literal
+ * colours; monochrome shell.
+ */
+.xeno-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--xeno-tile-size, 32px);
+  height: var(--xeno-tile-size, 32px);
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-md);
+}

package/src/content/callout.css

@@ -1,77 +1,77 @@
-/*
- * <Callout> — a left-ruled blockquote. Monochrome by default (muted italic ink, hairline rule); the
- * `danger` tone is the sole exception, swapping the rule and the glyph to `--xeno-danger`. Tokens only.
- *
- * The rule is a pseudo-element rather than a `border-left` for one reason: a border cannot be scaled
- * from its top edge, and the entrance below is the rule DRAWING DOWN. Everything else about it is
- * identical — 2px wide, flush left, the same total 14px inset to the text.
- */
-.xeno-callout {
-  position: relative;
-  margin: 0;
-  padding-left: 14px;
-  color: var(--xeno-muted);
-  font-style: italic;
-}
-.xeno-callout::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--xeno-border);
-  /* Square: at 2px wide a 1.5px radius is 75% of the width, which is a capsule, not a corner. */
-  border-radius: 0;
-  transform-origin: top center;
-}
-.xeno-callout[data-tone='danger']::before {
-  background: var(--xeno-danger);
-}
-
-/* The flex row exists ONLY when there is a glyph. Without one the children stay direct descendants of
-   the blockquote, so a run of `<p>`s lays out as prose rather than as a row of flex items. */
-.xeno-callout[data-icon] {
-  display: flex;
-  align-items: flex-start;
-  gap: 9px;
-}
-.xeno-callout-icon {
-  display: inline-flex;
-  flex: none;
-  margin-top: 1px; /* optical: the glyph's box sits a hair above the italic x-height */
-  color: var(--xeno-muted);
-}
-.xeno-callout[data-tone='danger'] .xeno-callout-icon {
-  color: var(--xeno-danger);
-}
-.xeno-callout-body {
-  min-width: 0;
-}
-
-/* ── Entrance ─────────────────────────────────────────────────────────────────────────
- * The rule leads and the text follows it in. Two tracks rather than one fade, because the rule IS the
- * callout's form — a block that simply fades up could be any block, while a rule drawing down from the
- * top is unmistakably this one. The rule takes longer than the text on purpose: it is still arriving
- * as the words settle, so the two read as one gesture instead of two. */
-.xeno-callout[data-enter] {
-  animation: xeno-callout-in var(--xeno-dur-entrance, 240ms) var(--xeno-ease) both;
-}
-.xeno-callout[data-enter]::before {
-  animation: xeno-callout-rule 320ms var(--xeno-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-@keyframes xeno-callout-in {
-  from { opacity: 0; translate: 5px 0; }
-  to { opacity: 1; translate: 0 0; }
-}
-@keyframes xeno-callout-rule {
-  from { scale: 1 0; }
-  to { scale: 1 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-callout[data-enter],
-  .xeno-callout[data-enter]::before {
-    animation: none;
-  }
-}
+/*
+ * <Callout> — a left-ruled blockquote. Monochrome by default (muted italic ink, hairline rule); the
+ * `danger` tone is the sole exception, swapping the rule and the glyph to `--xeno-danger`. Tokens only.
+ *
+ * The rule is a pseudo-element rather than a `border-left` for one reason: a border cannot be scaled
+ * from its top edge, and the entrance below is the rule DRAWING DOWN. Everything else about it is
+ * identical — 2px wide, flush left, the same total 14px inset to the text.
+ */
+.xeno-callout {
+  position: relative;
+  margin: 0;
+  padding-left: 14px;
+  color: var(--xeno-muted);
+  font-style: italic;
+}
+.xeno-callout::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--xeno-border);
+  /* Square: at 2px wide a 1.5px radius is 75% of the width, which is a capsule, not a corner. */
+  border-radius: 0;
+  transform-origin: top center;
+}
+.xeno-callout[data-tone='danger']::before {
+  background: var(--xeno-danger);
+}
+
+/* The flex row exists ONLY when there is a glyph. Without one the children stay direct descendants of
+   the blockquote, so a run of `<p>`s lays out as prose rather than as a row of flex items. */
+.xeno-callout[data-icon] {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+}
+.xeno-callout-icon {
+  display: inline-flex;
+  flex: none;
+  margin-top: 1px; /* optical: the glyph's box sits a hair above the italic x-height */
+  color: var(--xeno-muted);
+}
+.xeno-callout[data-tone='danger'] .xeno-callout-icon {
+  color: var(--xeno-danger);
+}
+.xeno-callout-body {
+  min-width: 0;
+}
+
+/* ── Entrance ─────────────────────────────────────────────────────────────────────────
+ * The rule leads and the text follows it in. Two tracks rather than one fade, because the rule IS the
+ * callout's form — a block that simply fades up could be any block, while a rule drawing down from the
+ * top is unmistakably this one. The rule takes longer than the text on purpose: it is still arriving
+ * as the words settle, so the two read as one gesture instead of two. */
+.xeno-callout[data-enter] {
+  animation: xeno-callout-in var(--xeno-dur-entrance, 240ms) var(--xeno-ease) both;
+}
+.xeno-callout[data-enter]::before {
+  animation: xeno-callout-rule 320ms var(--xeno-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+@keyframes xeno-callout-in {
+  from { opacity: 0; translate: 5px 0; }
+  to { opacity: 1; translate: 0 0; }
+}
+@keyframes xeno-callout-rule {
+  from { scale: 1 0; }
+  to { scale: 1 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-callout[data-enter],
+  .xeno-callout[data-enter]::before {
+    animation: none;
+  }
+}

package/src/content/caret.css

@@ -1,30 +1,30 @@
-/*
- * <Caret> — a thin streaming caret. A hairline `--xeno-text` block, `radius-hair` corners, sized to the
- * line via `1em`. It blinks only under `prefers-reduced-motion: no-preference`; otherwise it holds solid.
- */
-.xeno-caret {
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  margin-left: 1px;
-  vertical-align: text-bottom;
-  background: var(--xeno-text);
-  border-radius: var(--xeno-radius-hair);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .xeno-caret {
-    animation: xeno-caret-blink 1s steps(1, end) infinite;
-  }
-}
-
-@keyframes xeno-caret-blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  50.01%,
-  100% {
-    opacity: 0;
-  }
-}
+/*
+ * <Caret> — a thin streaming caret. A hairline `--xeno-text` block, `radius-hair` corners, sized to the
+ * line via `1em`. It blinks only under `prefers-reduced-motion: no-preference`; otherwise it holds solid.
+ */
+.xeno-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-caret {
+    animation: xeno-caret-blink 1s steps(1, end) infinite;
+  }
+}
+
+@keyframes xeno-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}

package/src/content/code-block.css

@@ -1,159 +1,159 @@
-/*
- * CodeBlock — a monochrome code surface. Shell is greyscale (canvas card + hairline border); the code is
- * the ink. State is CSS-first: `data-collapsed` on the root swaps body↔summary and rotates the chevron;
- * `data-selection` on the copy button reflects the transient copied state. Tokens only — the sole hue is
- * `--xeno-danger`, and only on an error output. Motion is transform/opacity, behind the reduce guard.
- */
-.xeno-code {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  background: var(--xeno-canvas);
-  border: 1px solid var(--xeno-border);
-  border-radius: var(--xeno-radius-card);
-  color: var(--xeno-text);
-  overflow: hidden;
-}
-
-/* ── Header: language label + action row ─────────────────────────────────────────── */
-.xeno-code-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 5px 6px 5px 12px;
-  background: var(--xeno-surface);
-  border-bottom: 1px solid var(--xeno-border);
-}
-
-.xeno-code-lang {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--xeno-muted);
-  white-space: nowrap;
-  user-select: none;
-}
-
-.xeno-code-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-/* Copy button reflects the ~1.5s copied confirmation (icon swaps to Check; ink lifts to full text). */
-.xeno-code-copy.is-copied {
-  color: var(--xeno-text);
-}
-
-/* Collapse chevron: points down when open, rotates to point right when collapsed. */
-.xeno-code-collapse .xeno-element {
-  transition: transform var(--xeno-dur) var(--xeno-ease);
-}
-.xeno-code[data-collapsed='true'] .xeno-code-collapse .xeno-element {
-  transform: rotate(-90deg);
-}
-
-/* ── Body: <pre><code>, monospace, horizontally scrollable ───────────────────────── */
-.xeno-code-body {
-  margin: 0;
-  padding: 12px 14px;
-  overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--xeno-text);
-  tab-size: 2;
-}
-.xeno-code-body:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--xeno-border);
-}
-.xeno-code-code {
-  display: block;
-  font: inherit;
-  color: inherit;
-  white-space: pre;
-}
-
-/* Collapsed ↔ expanded: swap body for the summary line. */
-.xeno-code[data-collapsed='true'] .xeno-code-body {
-  display: none;
-}
-.xeno-code[data-collapsed='false'] .xeno-code-summary {
-  display: none;
-}
-
-.xeno-code-summary {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 10px 14px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12px;
-  color: var(--xeno-muted);
-  text-align: left;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition:
-    color var(--xeno-dur) ease,
-    background var(--xeno-dur) ease;
-}
-.xeno-code-summary:hover {
-  color: var(--xeno-text);
-  background: var(--xeno-hover);
-}
-.xeno-code-summary:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--xeno-border);
-}
-
-/* ── Output panel: Running… / result / error ─────────────────────────────────────── */
-.xeno-code-output {
-  padding: 10px 14px;
-  background: var(--xeno-elevated);
-  border-top: 1px solid var(--xeno-border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 12.5px;
-  line-height: 1.5;
-}
-.xeno-code-output-running {
-  color: var(--xeno-muted);
-}
-.xeno-code-output-text {
-  margin: 0;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  color: var(--xeno-text);
-}
-.xeno-code-output[data-status='error'] {
-  border-top-color: var(--xeno-danger);
-}
-.xeno-code-output[data-status='error'] .xeno-code-output-text {
-  color: var(--xeno-danger);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .xeno-code-output[data-status='running'] .xeno-code-output-running {
-    animation: xeno-code-pulse 1.2s var(--xeno-ease) infinite;
-  }
-}
-@keyframes xeno-code-pulse {
-  0%,
-  100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .xeno-code-collapse .xeno-element,
-  .xeno-code-summary {
-    transition: none;
-  }
-}
+/*
+ * CodeBlock — a monochrome code surface. Shell is greyscale (canvas card + hairline border); the code is
+ * the ink. State is CSS-first: `data-collapsed` on the root swaps body↔summary and rotates the chevron;
+ * `data-selection` on the copy button reflects the transient copied state. Tokens only — the sole hue is
+ * `--xeno-danger`, and only on an error output. Motion is transform/opacity, behind the reduce guard.
+ */
+.xeno-code {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-card);
+  color: var(--xeno-text);
+  overflow: hidden;
+}
+
+/* ── Header: language label + action row ─────────────────────────────────────────── */
+.xeno-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px 6px 5px 12px;
+  background: var(--xeno-surface);
+  border-bottom: 1px solid var(--xeno-border);
+}
+
+.xeno-code-lang {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--xeno-muted);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.xeno-code-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Copy button reflects the ~1.5s copied confirmation (icon swaps to Check; ink lifts to full text). */
+.xeno-code-copy.is-copied {
+  color: var(--xeno-text);
+}
+
+/* Collapse chevron: points down when open, rotates to point right when collapsed. */
+.xeno-code-collapse .xeno-element {
+  transition: transform var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-code[data-collapsed='true'] .xeno-code-collapse .xeno-element {
+  transform: rotate(-90deg);
+}
+
+/* ── Body: <pre><code>, monospace, horizontally scrollable ───────────────────────── */
+.xeno-code-body {
+  margin: 0;
+  padding: 12px 14px;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--xeno-text);
+  tab-size: 2;
+}
+.xeno-code-body:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-code-code {
+  display: block;
+  font: inherit;
+  color: inherit;
+  white-space: pre;
+}
+
+/* Collapsed ↔ expanded: swap body for the summary line. */
+.xeno-code[data-collapsed='true'] .xeno-code-body {
+  display: none;
+}
+.xeno-code[data-collapsed='false'] .xeno-code-summary {
+  display: none;
+}
+
+.xeno-code-summary {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--xeno-muted);
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color var(--xeno-dur) ease,
+    background var(--xeno-dur) ease;
+}
+.xeno-code-summary:hover {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+}
+.xeno-code-summary:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+
+/* ── Output panel: Running… / result / error ─────────────────────────────────────── */
+.xeno-code-output {
+  padding: 10px 14px;
+  background: var(--xeno-elevated);
+  border-top: 1px solid var(--xeno-border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+.xeno-code-output-running {
+  color: var(--xeno-muted);
+}
+.xeno-code-output-text {
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  color: var(--xeno-text);
+}
+.xeno-code-output[data-status='error'] {
+  border-top-color: var(--xeno-danger);
+}
+.xeno-code-output[data-status='error'] .xeno-code-output-text {
+  color: var(--xeno-danger);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-code-output[data-status='running'] .xeno-code-output-running {
+    animation: xeno-code-pulse 1.2s var(--xeno-ease) infinite;
+  }
+}
+@keyframes xeno-code-pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-code-collapse .xeno-element,
+  .xeno-code-summary {
+    transition: none;
+  }
+}