@xenosystem/agent-interface-ui 0.1.68 → 0.1.69

package/dist/agent.css

@@ -1804,6 +1804,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
@@ -2655,6 +2686,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; }
@@ -12097,6 +12147,11 @@ img.xa-fav { padding: 1px; background: #fff; }
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/dist/components/agent/AgentInterface.js

@@ -12,7 +12,7 @@ import { holdParityTurnAtItsFirstBeat, seedParityConversation } from '@xenosyste
  */
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ArrowUpRight, BookOpen, Bot, Building2, Check, CheckCircle2, CheckSquare, ChevronDown, ChevronRight, Clock, Code2, Copy, Edit2, File, FileCode, Folder, FolderOpen, FolderPlus, GitBranch, GitCompareArrows, Globe2, Layers, Loader2, MessageSquare, Monitor, MoreHorizontal, Move, Package, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Pause, Pin, Play, Plus, Search, Settings, Share2, Sparkles, Terminal, Trash2, Users, X } from 'lucide-react';
+import { ArrowUpRight, BookOpen, Bot, Building2, Check, CheckCircle2, CheckSquare, ChevronDown, ChevronRight, Clock, Code2, Copy, Edit2, File, FileCode, Folder, FolderOpen, FolderPlus, GitBranch, GitCompareArrows, Globe2, Layers, Loader2, MessageSquare, Monitor, MoreHorizontal, Move, Package, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Pause, Pin, Play, Plus, Search, Settings, Share2, Sparkles, Terminal, Trash2, Users, X } from '@xenosystem/agent-conversation/icons';
 import { EntitySettingsLayout } from './settings/EntitySettingsLayout.js';
 import { WorkspacePersistenceNotice } from './WorkspacePersistenceNotice.js';
 import { EditorOperationAuthority, acknowledgeEditorSave, editorRecoveryFiles, editorSaveFailure, reconcileEditorRefresh, resolveEditorPaneMode } from '@xenosystem/agent-conversation/components/agent/editorOperationAuthority';