@xenosystem/elements-react 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/elements-react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "UNLICENSED",
   "description": "The XENO web renderer — interprets element declarations as React/SVG. CSS-first, 0 kb runtime.",
   "author": "XENO Corporation <emilian@bnkrsys.com>",
@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "prebuild": "npm run build -w @xenosystem/elements && npm run build -w @xenosystem/generate",
-    "build": "tsc -p tsconfig.json",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json",
     "pretypecheck": "npm run build -w @xenosystem/elements && npm run build -w @xenosystem/generate",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit",
     "test": "vitest run"
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.3.0",
-    "@xenosystem/elements": "0.0.7",
-    "@xenosystem/generate": "0.0.7"
+    "@xenosystem/elements": "0.0.9",
+    "@xenosystem/generate": "0.0.9"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/icon-motion.css

@@ -1052,6 +1052,37 @@
   vector-effect: var(--part-vfx, none);
 }
 
+/* ---- The third trigger: LIVE ------------------------------------------------ */
+
+/* Hover and selection both answer to a GESTURE, and both play the animation ONCE. A glyph that stands for
+ * something the machine is doing right now — a search that is searching, a pencil that is writing, a
+ * terminal with a command in it — has no gesture to answer to and no single moment to mark. It is live for
+ * as long as the step runs, and the motion has to run with it.
+ *
+ * `data-motion="live"`, on the element itself or on a host that wraps it, plays the glyph's OWN animation on
+ * a loop — the same keyframes hover would play, so a live pencil writes the way a hovered pencil writes, only
+ * without stopping. Nothing is re-authored per glyph: the meaning of each animation was decided once, above.
+ *
+ * It exists because the XENO Agent transcript (`XENO AGENT PANEL - SPEC.md` D10) draws every step's
+ * marker as its family's glyph, bare and breathing while the step runs, and had to reproduce the two
+ * trigger lists locally to get a loop — a copy of a copy, which is what this file was written to end.
+ *
+ * Specificity zero, like the other two, so a consumer rule still wins; and a live loop is still switched
+ * off entirely under prefers-reduced-motion, by the rule at the end of this file.
+ */
+:where(
+  .xeno-element[data-glyph][data-motion='live'],
+  [data-motion='live'] .xeno-element[data-glyph]
+) { animation: var(--xeno-icon-anim) var(--xeno-icon-dur) var(--xeno-icon-ease) infinite; }
+
+:where(
+  .xeno-element[data-glyph][data-motion='live'],
+  [data-motion='live'] .xeno-element[data-glyph]
+) .xeno-part {
+  animation: var(--part-anim) var(--part-dur) var(--xeno-icon-ease) infinite;
+  vector-effect: var(--part-vfx, none);
+}
+
 /* ── The transport set: play / pause / stop ──────────────────────────────────────────
    One control in three states, so the three animations are one idea told three ways: play LEANS the way
    it is going, pause takes the weight on both feet, stop lands. Same 460ms for all three, because they
@@ -1903,6 +1934,25 @@
 }
 
 /* ---- Accessibility: honor reduced-motion ----------------------------------- */
+/* keyboard (parts) — three keys go down one after another, left to right, and the space bar last: typing,
+   as a hand does it. Part[0] is the frame and holds still; a keyboard that bounced would be a key. */
+.xeno-element[data-glyph='keyboard'] .xeno-part[data-part='1'] { --part-anim: xeno-pt-key-1; --part-dur: 640ms; }
+.xeno-element[data-glyph='keyboard'] .xeno-part[data-part='2'] { --part-anim: xeno-pt-key-2; --part-dur: 640ms; }
+.xeno-element[data-glyph='keyboard'] .xeno-part[data-part='3'] { --part-anim: xeno-pt-key-3; --part-dur: 640ms; }
+.xeno-element[data-glyph='keyboard'] .xeno-part[data-part='4'] { --part-anim: xeno-pt-key-4; --part-dur: 640ms; }
+@keyframes xeno-pt-key-1 { 0%, 10% { transform: translateY(0); } 22% { transform: translateY(0.9px); } 36%, 100% { transform: translateY(0); } }
+@keyframes xeno-pt-key-2 { 0%, 26% { transform: translateY(0); } 38% { transform: translateY(0.9px); } 52%, 100% { transform: translateY(0); } }
+@keyframes xeno-pt-key-3 { 0%, 42% { transform: translateY(0); } 54% { transform: translateY(0.9px); } 68%, 100% { transform: translateY(0); } }
+@keyframes xeno-pt-key-4 { 0%, 60% { transform: translateY(0); } 74% { transform: translateY(0.9px); } 90%, 100% { transform: translateY(0); } }
+
+/* cursor-click (parts) — the pointer presses (a nudge down and to the right, the way it is pointing) and the
+   ticks at its tip flare once at the bottom of the press: the click is the moment the ticks appear. */
+.xeno-element[data-glyph='cursor-click'] .xeno-part[data-part='0'] { --part-anim: xeno-pt-click-press; --part-dur: 560ms; }
+.xeno-element[data-glyph='cursor-click'] .xeno-part[data-part='1'],
+.xeno-element[data-glyph='cursor-click'] .xeno-part[data-part='2'] { --part-anim: xeno-pt-click-tick; --part-dur: 560ms; transform-box: view-box; transform-origin: 8px 8px; }
+@keyframes xeno-pt-click-press { 0% { transform: translate(0, 0); } 30% { transform: translate(0.6px, 0.6px); } 60%, 100% { transform: translate(0, 0); } }
+@keyframes xeno-pt-click-tick { 0%, 24% { opacity: 0.35; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1.15); } 70%, 100% { opacity: 1; transform: scale(1); } }
+
 @media (prefers-reduced-motion: reduce) {
   .xeno-element[data-glyph],
   .xeno-element[data-glyph] .xeno-part { animation: none !important; }