@tangle-network/charts 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/figure.css +8 -8
  3. package/dist/{flow-trace-D6RDkVrJ.d.ts → flow-trace-Sr8GtLm0.d.ts} +29 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +49 -39
  6. package/dist/react/flow-waterfall.css +67 -24
  7. package/dist/react/index.d.ts +13 -3
  8. package/dist/react/index.js +392 -202
  9. package/dist/{timeline-CVXBpZzt.js → timeline-B7c-cede.js} +13 -13
  10. package/package.json +1 -1
package/dist/react/flow-waterfall.css CHANGED
@@ -2,7 +2,11 @@
2
2
  * Geometry reads three variables the clock writes every frame: --fw-t (clock ms), --fw-v0 (window start ms)
3
3
  * and --fw-k (px per ms). A mark carries --s and --e (its start and end ms), so growth, playback and zoom
4
4
  * move marks without a React render.
5
- * Type uses four sizes (11, 13, 14, 20 px); spacing sits on a 4 px grid. */
5
+ * Type uses the 12/14/18 px scale; spacing sits on a 4 px grid. */
6
+ /* light-dark() follows the host's Brand theme (data-theme or the light/dark class), not the OS: a light page
7
+ on a dark OS otherwise resolves the dark fallbacks and muted text drops to 2.4:1. */
8
+ :is(:root[data-theme="light"], .light) .fw-root { color-scheme: light; }
9
+ :is(:root[data-theme="dark"], .dark) .fw-root { color-scheme: dark; }
6
10
  .fw-root {
7
11
  --fw-text: var(--text-primary, light-dark(#23232b, #ececf1));
8
12
  --fw-muted: var(--text-muted, light-dark(#5d5d68, #a4a4b0));
@@ -28,7 +32,8 @@
28
32
  --fw-h4: light-dark(#b0418a, #dc72bb);
29
33
  --fw-h5: light-dark(#6d44c7, #ab8cf7);
30
34
  --fw-ease: cubic-bezier(.2, .8, .2, 1);
31
- --fw-bar-h: 16px;
35
+ /* Bar height = row height - 16, so a centered bar sits 8 px from the row edge: 20 px in a 36 px step row. */
36
+ --fw-bar-h: 20px;
32
37
  /* One label column for rows, axis and every lane layer; the agent view caps it lower and drops it on phones. */
33
38
  --fw-label-col: min(var(--fw-name-w), 42%);
34
39
  --fw-bar-shift: 0px;
@@ -45,7 +50,7 @@
45
50
  font-feature-settings: "tnum" 1, "cv11" 1;
46
51
  -webkit-font-smoothing: antialiased;
47
52
  }
48
- .fw-root-agents { --fw-bar-h: 20px; --fw-label-col: min(var(--fw-name-w), 28%); border-radius: 16px; }
53
+ .fw-root-agents { --fw-bar-h: 24px; --fw-label-col: min(var(--fw-name-w), 28%); border-radius: 16px; }
49
54
  .fw-root *, .fw-root *::before, .fw-root *::after { box-sizing: border-box; }
50
55
  .fw-root :is(p, dl, dd, h3, ul) { margin: 0; padding: 0; }
51
56
  .fw-root :is(button, input, select) { font: inherit; color: inherit; }
@@ -57,11 +62,13 @@
57
62
  .fw-root [data-tone="3"] { --tone: var(--fw-h3); }
58
63
  .fw-root [data-tone="4"] { --tone: var(--fw-h4); }
59
64
  .fw-root [data-tone="5"] { --tone: var(--fw-h5); }
65
+ /* Light fills carry enough of the hue to tell agents apart on white (round 8: 24% read as "pale mint on gray"); the outline is
66
+ the full hue, which passes 3:1 against the surface, so every mark keeps its edge. */
60
67
  .fw-root [data-tone] {
61
- --fill: light-dark(color-mix(in oklab, var(--tone) 24%, #fff), color-mix(in oklab, var(--tone) 86%, #000));
62
- --line: light-dark(color-mix(in oklab, var(--tone) 62%, #fff), var(--tone));
63
- --dim: light-dark(color-mix(in oklab, var(--tone) 12%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
64
- --dim-line: light-dark(color-mix(in oklab, var(--tone) 36%, #fff), color-mix(in oklab, var(--tone) 55%, #17171d));
68
+ --fill: light-dark(color-mix(in oklab, var(--tone) 42%, #fff), color-mix(in oklab, var(--tone) 86%, #000));
69
+ --line: light-dark(var(--tone), var(--tone));
70
+ --dim: light-dark(color-mix(in oklab, var(--tone) 22%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
71
+ --dim-line: light-dark(color-mix(in oklab, var(--tone) 70%, #fff), color-mix(in oklab, var(--tone) 55%, #17171d));
65
72
  }
66
73
 
67
74
  /* Header */
@@ -79,7 +86,8 @@
79
86
  .fw-root .fw-tools { display: flex; align-items: center; gap: 8px; }
80
87
  .fw-root .fw-views { display: inline-flex; padding: 4px; border-radius: 8px; background: var(--fw-well); border: 1px solid var(--fw-border); }
81
88
  .fw-root .fw-view-button { appearance: none; border: 0; background: transparent; height: 24px; padding: 0 12px; border-radius: 6px; font-size: 14px; color: var(--fw-muted); cursor: pointer; transition: background-color 120ms var(--fw-ease), color 120ms var(--fw-ease); }
82
- .fw-root .fw-view-button[aria-checked="true"] { background: var(--fw-surface); color: var(--fw-text); box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--fw-border); }
89
+ /* The shown view is a state, not a control: no click target, no pointer. */
90
+ .fw-root .fw-view-button[aria-checked="true"] { opacity: 1; cursor: default; background: var(--fw-surface); color: var(--fw-text); box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--fw-border); }
83
91
  .fw-root .fw-search { position: relative; display: flex; align-items: center; }
84
92
  .fw-root .fw-search-glyph { position: absolute; left: 8px; display: inline-flex; color: var(--fw-muted); pointer-events: none; }
85
93
  .fw-root .fw-search-input { appearance: none; width: 200px; height: 32px; padding: 0 12px 0 28px; border: 1px solid var(--fw-border); border-radius: 8px; background: var(--fw-well); font-size: 14px; }
@@ -97,9 +105,7 @@
97
105
  /* Axis */
98
106
  .fw-root .fw-axis { display: grid; grid-template-columns: var(--fw-label-col) minmax(0, 1fr); height: 32px; color: var(--fw-muted); font-size: 12px; }
99
107
  .fw-root .fw-axis-top { border-bottom: 1px solid var(--fw-border); }
100
- .fw-root .fw-axis-bottom { height: 28px; border-top: 1px solid var(--fw-border); }
101
108
  .fw-root .fw-axis-label { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-right: 1px solid var(--fw-border); min-width: 0; }
102
- .fw-root .fw-axis-bottom .fw-axis-label { border-right-color: transparent; }
103
109
  .fw-root .fw-branch-controls { margin-left: auto; display: flex; gap: 4px; }
104
110
  .fw-root .fw-text-button { appearance: none; border: 0; background: transparent; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; color: var(--fw-muted); cursor: pointer; white-space: nowrap; }
105
111
  .fw-root .fw-text-button:hover { background: var(--fw-hover); color: var(--fw-text); }
@@ -108,7 +114,6 @@
108
114
  .fw-root .fw-axis-track { position: relative; overflow: hidden; cursor: ew-resize; touch-action: none; }
109
115
  .fw-root .fw-tick { position: absolute; top: 50%; transform: translate(4px, -50%); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 16px; }
110
116
  .fw-root .fw-cursor-handle { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--fw-text); box-shadow: 0 0 0 2px var(--fw-surface); left: calc(var(--fw-pad) + (var(--fw-t) - var(--fw-v0)) * var(--fw-k) * 1px - 4.5px); bottom: -5px; z-index: 3; }
111
- .fw-root .fw-axis-bottom .fw-cursor-handle { top: -5px; bottom: auto; }
112
117
 
113
118
  /* Body */
114
119
  .fw-root .fw-viewport { position: relative; }
@@ -121,8 +126,20 @@
121
126
  .fw-root .fw-marker { --fw-marker: var(--fw-muted); position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--fw-marker); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
122
127
  .fw-root .fw-marker[data-tone="ok"] { --fw-marker: var(--fw-ok); }
123
128
  .fw-root .fw-marker[data-tone="failed"] { --fw-marker: var(--fw-failed); }
129
+ /* A pause: the run stood still. A hatched band across every row with its reason on top, never blank space. */
130
+ .fw-root .fw-pause { position: absolute; top: 0; bottom: 0; left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); width: calc(max(0, var(--e) - var(--s)) * var(--fw-k) * 1px);
131
+ background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--fw-text) 9%, transparent) 0 1px, transparent 1px 6px), color-mix(in oklab, var(--fw-text) 4%, transparent);
132
+ border-inline: 1px dashed color-mix(in oklab, var(--fw-text) 24%, transparent); }
133
+ .fw-root .fw-pause-label { position: sticky; top: 4px; display: block; width: max-content; max-width: calc(100% - 8px); margin: 4px auto 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
134
+ border-radius: 4px; font-size: 12px; line-height: 20px; color: var(--fw-muted); background: var(--fw-surface); box-shadow: inset 0 0 0 1px var(--fw-border); }
124
135
  .fw-root .fw-marker-label { position: absolute; top: 2px; left: 3px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--fw-marker); background: var(--fw-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-marker) 40%, transparent); }
125
136
  .fw-root .fw-marker-label-left { left: auto; right: 3px; }
137
+ .fw-root .fw-marker[data-tone="warn"], .fw-root .fw-event[data-tone="warn"] { --fw-marker: var(--fw-amber); }
138
+ /* The event track: one dot per marker on the axis; click or N/P moves the cursor there. */
139
+ .fw-root .fw-event { --fw-marker: var(--fw-muted); position: absolute; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%; background: var(--fw-marker); box-shadow: 0 0 0 2px var(--fw-surface); cursor: pointer; z-index: 4; left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
140
+ .fw-root .fw-event[data-tone="ok"] { --fw-marker: var(--fw-ok); }
141
+ .fw-root .fw-event[data-tone="failed"] { --fw-marker: var(--fw-failed); }
142
+ .fw-root .fw-event:hover, .fw-root .fw-event:focus-visible { transform: scale(1.4); outline: 0; }
126
143
  .fw-root .fw-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--fw-text) 70%, transparent); left: calc(var(--fw-pad) + (var(--fw-t) - var(--fw-v0)) * var(--fw-k) * 1px); }
127
144
  .fw-root .fw-empty { padding: 40px 16px; text-align: center; color: var(--fw-muted); }
128
145
  .fw-root .fw-sticky { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--fw-surface); box-shadow: 0 1px 0 var(--fw-border), 0 6px 12px -8px rgb(0 0 0 / .35); }
@@ -132,6 +149,10 @@
132
149
  .fw-root .fw-row:hover { background: var(--fw-hover); }
133
150
  .fw-root .fw-row.fw-active { background: color-mix(in oklab, var(--fw-accent) 7%, transparent); }
134
151
  .fw-root .fw-row[aria-selected="true"] { background: color-mix(in oklab, var(--fw-accent) 11%, transparent); }
152
+ /* A selected agent lifts: an accent edge on its row, and its peers recede so the reader sees what the panels below follow. */
153
+ .fw-root-agents[data-selection] .fw-row[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--fw-accent); }
154
+ .fw-root-agents[data-selection] .fw-row:not([aria-selected="true"]) > [role="gridcell"] { opacity: .45; transition: opacity 160ms var(--fw-ease); }
155
+ .fw-root-agents[data-selection] .fw-row:not([aria-selected="true"]):hover > [role="gridcell"] { opacity: .8; }
135
156
  .fw-root .fw-row:focus-visible { box-shadow: inset 2px 0 0 var(--fw-accent); }
136
157
  .fw-root .fw-sticky-row { background: var(--fw-surface); }
137
158
  .fw-root .fw-label { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 calc(12px + var(--depth) * 16px); border-right: 1px solid var(--fw-border); }
@@ -162,12 +183,12 @@
162
183
  .fw-root .fw-view-agents .fw-span-name { font-weight: 600; line-height: 18px; }
163
184
  .fw-root .fw-view-agents .fw-subtitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
164
185
  .fw-root .fw-view-agents .fw-detail { font-size: 12px; line-height: 16px; }
165
- .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); align-self: flex-start; margin-top: calc((var(--fw-row-h) - 34px) / 2 + 8px); }
186
+ .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); }
166
187
 
167
188
  /* Lanes and marks */
168
189
  .fw-root .fw-lane { position: relative; overflow: hidden; min-width: 0; }
169
190
  .fw-root .fw-invalid { position: absolute; left: var(--fw-pad); top: 50%; transform: translateY(-50%); color: var(--fw-muted); }
170
- .fw-root :is(.fw-bar, .fw-seg, .fw-end) {
191
+ .fw-root :is(.fw-bar, .fw-seg, .fw-end, .fw-mark) {
171
192
  --x0: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px);
172
193
  --w: calc(max(0, min(var(--e), var(--fw-t)) - var(--s)) * var(--fw-k) * 1px);
173
194
  --on: clamp(0, (var(--fw-t) - var(--s)) * 1000, 1);
@@ -176,19 +197,32 @@
176
197
  left: var(--x0);
177
198
  opacity: var(--on);
178
199
  }
179
- .fw-root :is(.fw-bar, .fw-seg) { height: var(--fw-bar-h); margin-top: calc(var(--fw-bar-h) / -2 + var(--fw-bar-shift)); width: max(var(--w), calc(var(--on) * 3px)); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
200
+ .fw-root .fw-enter > [role="gridcell"] { animation: fw-unfold 220ms var(--fw-ease) var(--fw-enter-delay) both; }
201
+ .fw-root .fw-enter :is(.fw-bar, .fw-seg) { animation: fw-grow 420ms var(--fw-ease) var(--fw-enter-delay) both; }
202
+ .fw-root .fw-enter .fw-end { animation: fw-land 220ms var(--fw-ease) calc(var(--fw-enter-delay) + 300ms) both; }
203
+ .fw-root .fw-settle :is(.fw-bar, .fw-seg) { animation: fw-settle 600ms var(--fw-ease); }
204
+ .fw-root .fw-settle .fw-end { animation: fw-land 260ms var(--fw-ease); }
205
+ /* A live bar grows with the clock instead of stepping each tick. */
206
+ .fw-root .fw-row[data-running] .fw-bar { transition: width 120ms linear; }
207
+ /* A restart: an amber notch through the bar at that moment; the bar keeps its own state. */
208
+ .fw-root .fw-mark { position: absolute; z-index: 2; left: calc(var(--x0) - 1px); width: 2px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2 - 4px); height: calc(var(--fw-bar-h) + 8px);
209
+ border-radius: 2px; background: var(--fw-amber); box-shadow: 0 0 0 1px var(--fw-surface); opacity: var(--on); pointer-events: auto; }
210
+ /* Centered by top, not a negative margin, so measured spacing stays on the grid. */
211
+ .fw-root :is(.fw-bar, .fw-seg) { top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); width: max(var(--w), calc(var(--on) * 3px)); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
180
212
  .fw-root .fw-bar { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
181
213
  /* The mark under the pointer lifts: a brighter fill and a ring in its own tone. */
182
214
  .fw-root :is(.fw-bar, .fw-seg):hover { filter: brightness(1.18); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px color-mix(in oklab, var(--line) 55%, transparent); z-index: 1; }
183
215
  .fw-root .fw-bar.fw-k-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
184
216
  /* A handoff is a moment: a slim pill in the receiving tone, not a block of work. */
185
- .fw-root .fw-bar.fw-k-handoff { background: var(--line); height: 6px; margin-top: -4px; box-shadow: none; }
217
+ .fw-root .fw-bar.fw-k-handoff { background: var(--line); height: 8px; top: calc(50% + var(--fw-bar-shift) - 4px); box-shadow: none; }
186
218
  .fw-root .fw-bar.fw-k-waiting { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
187
219
  .fw-root .fw-bar.fw-k-failed { background: color-mix(in oklab, var(--fw-failed) 22%, var(--fw-surface)); box-shadow: inset 0 0 0 1px var(--fw-failed); color: var(--fw-failed); }
188
220
  .fw-root .fw-bar.fw-k-pipeline { background: linear-gradient(90deg, var(--fw-neutral-bar), color-mix(in oklab, var(--fw-neutral-bar) 55%, var(--fw-surface))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
189
221
  .fw-root .fw-bar.fw-k-pipeline.fw-has-marks { background: color-mix(in oklab, var(--tone) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 18%, transparent); }
190
222
  .fw-root .fw-bar.fw-k-pipeline.fw-has-agents { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px), color-mix(in oklab, var(--fw-text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
191
223
  /* An agent bar with no child marks says who it is by its lane color, never a neutral grey. */
224
+ /* In the agent view the bar's own extent between steps is waiting: hatched in the outcome tone, under the step segments. */
225
+ .fw-root .fw-view-agents .fw-bar.fw-k-pipeline.fw-has-marks { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--tone) 28%, transparent) 0 1px, transparent 1px 5px), color-mix(in oklab, var(--tone) 9%, transparent); }
192
226
  .fw-root .fw-view-agents .fw-bar.fw-k-pipeline:not(.fw-has-marks, .fw-has-agents) { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
193
227
  /* A host outcome re-tones the whole lane: dot, bar and marks. */
194
228
  .fw-root [data-outcome="ok"], .fw-root [data-outcome="ok"] [data-tone] { --tone: var(--fw-ok); }
@@ -211,7 +245,7 @@
211
245
  .fw-root .fw-glyph { display: inline-flex; color: currentColor; }
212
246
  .fw-root .fw-glyph svg { width: 11px; height: 11px; stroke-width: 2; }
213
247
  .fw-root .fw-seg-model .fw-glyph, .fw-root .fw-k-model .fw-glyph { color: light-dark(var(--tone), #fff); }
214
- .fw-root .fw-end { display: inline-flex; align-items: center; gap: 8px; margin-top: -12px; height: 20px; left: calc(var(--x0) + max(var(--w), 3px) + 8px); white-space: nowrap; pointer-events: none; }
248
+ .fw-root .fw-end { display: inline-flex; align-items: center; gap: 8px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); left: calc(var(--x0) + max(var(--w), 3px) + 8px); white-space: nowrap; pointer-events: none; }
215
249
  .fw-root .fw-duration { font-size: 12px; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
216
250
  .fw-root .fw-k-failed ~ .fw-end .fw-duration { color: var(--fw-failed); }
217
251
  .fw-root .fw-badge { height: 18px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--fw-amber); background: color-mix(in oklab, var(--fw-amber) 13%, transparent); border: 1px solid color-mix(in oklab, var(--fw-amber) 28%, transparent); }
@@ -241,7 +275,7 @@
241
275
  .fw-root .fw-card[role="tooltip"] { pointer-events: none; }
242
276
  .fw-root .fw-card-above .fw-card { transform: translateY(-100%); animation-name: fw-arrive-above; }
243
277
  .fw-root .fw-card-agent { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
244
- .fw-root .fw-card-agent .fw-agent-dot { margin-top: 0; align-self: center; }
278
+ .fw-root .fw-card-agent .fw-agent-dot { align-self: center; }
245
279
  .fw-root .fw-card-head { display: flex; align-items: flex-start; gap: 8px; }
246
280
  .fw-root .fw-card-head .fw-icon-tile { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
247
281
  .fw-root .fw-card-head .fw-icon-tile :is(svg, img) { width: 16px; height: 16px; }
@@ -262,12 +296,13 @@
262
296
  .fw-root .fw-card-text { margin-top: 12px; }
263
297
  .fw-root .fw-card-compact { width: 280px; padding: 12px; }
264
298
  .fw-root .fw-card-compact .fw-card-agent { margin-bottom: 8px; font-size: 14px; line-height: 20px; }
265
- .fw-root .fw-card-who { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
299
+ .fw-root .fw-card-who { min-width: 0; flex: 1; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
266
300
  .fw-root .fw-card-detail { margin: -4px 0 8px 16px; color: var(--fw-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
267
301
  .fw-root .fw-pill-outcome { color: var(--line); background: color-mix(in oklab, var(--tone) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 35%, transparent); }
268
302
  .fw-root .fw-card-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--fw-well); }
269
303
  .fw-root .fw-card-cells dt { font-size: 12px; line-height: 16px; color: var(--fw-muted); }
270
304
  .fw-root .fw-card-cells dd { font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
305
+ .fw-root .fw-card-step { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fw-border); color: var(--fw-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
271
306
  .fw-root .fw-card-result { margin-top: 8px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
272
307
  .fw-root .fw-card-text p { margin-top: 4px; color: var(--fw-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
273
308
 
@@ -292,6 +327,12 @@
292
327
  .fw-root .fw-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
293
328
 
294
329
  @keyframes fw-spin { to { transform: rotate(360deg); } }
330
+ /* Motion verbs. Grow: an arriving bar extends from its start. Unfold: an arriving row's cells slide in, staggered by
331
+ --fw-enter-delay. Settle: a bar that just finished eases its edge and lands its end label. */
332
+ @keyframes fw-grow { from { clip-path: inset(0 100% 0 0 round 4px); } }
333
+ @keyframes fw-unfold { from { opacity: 0; translate: 0 -4px; } }
334
+ @keyframes fw-land { from { opacity: 0; translate: -6px 0; } }
335
+ @keyframes fw-settle { 40% { filter: brightness(1.3); } }
295
336
  @keyframes fw-pulse { 50% { opacity: .35; } }
296
337
  @keyframes fw-arrive { from { opacity: 0; transform: translateY(4px); } }
297
338
  @keyframes fw-arrive-above { from { opacity: 0; transform: translateY(calc(-100% - 4px)); } }
@@ -319,10 +360,12 @@
319
360
  .fw-root .fw-heading, .fw-root .fw-playback { padding-left: 12px; padding-right: 12px; }
320
361
  }
321
362
 
322
- /* The agent timeline is one quiet surface: no inner rules, more air, the axis under the lanes. */
363
+ /* The agent timeline is one quiet surface: no inner rules; controls and axis sit above the lanes. */
323
364
  .fw-root-agents .fw-heading { border-bottom: 0; padding: 20px 24px 12px; }
324
- .fw-root-agents .fw-axis-bottom { border-top: 0; }
325
- .fw-root-agents .fw-playback { border-top: 0; padding: 8px 24px 20px; }
365
+ .fw-root-agents .fw-axis-top { border-bottom: 0; }
366
+ .fw-root-agents .fw-axis-top .fw-axis-label { border-right-color: transparent; }
367
+ .fw-root-agents .fw-playback { border-top: 0; padding: 0 24px 8px; }
368
+ .fw-root-agents .fw-body { padding-bottom: 12px; }
326
369
  .fw-root-agents .fw-view-agents .fw-label { padding-left: 24px; }
327
370
  .fw-root-agents .fw-zoom, .fw-root-agents .fw-time { display: none; }
328
371
  /* The agent view keeps scrubbing on a hairline track; the lanes above already show the activity. */
@@ -336,13 +379,13 @@
336
379
  (At 768 px a 28% column cut 15 of 17 names on a real 17-agent run.) */
337
380
  @container (max-width: 899px) {
338
381
  /* The root is the queried container, so the variables go on its children. */
339
- .fw-root-agents > * { --fw-label-col: 0px; --fw-bar-shift: 8px; }
382
+ /* In a 40 px row: the name on 0-20 px, a 16 px bar on 20-36 px. */
383
+ .fw-root-agents > * { --fw-label-col: 0px; --fw-bar-shift: 8px; --fw-bar-h: 16px; }
340
384
  .fw-root-agents .fw-view-agents .fw-names { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
341
- .fw-root-agents .fw-view-agents .fw-agent-dot { align-self: center; margin-top: 0; }
342
385
  /* The label leaves the grid flow, so the lane must claim the track column itself. */
343
386
  .fw-root-agents .fw-view-agents .fw-lane { grid-column: 2; }
344
387
  /* Elbows pass behind the name, not through its letters. A transform or layout containment would make each row
345
388
  its own stacking context and trap the name under the connector layer, so stacked rows place by top instead. */
346
389
  .fw-root-agents .fw-view-agents .fw-row { transform: none; top: var(--row-y); contain: style; }
347
- .fw-root-agents .fw-view-agents .fw-label { position: absolute; z-index: 3; top: 4px; left: 0; height: 18px; max-width: calc(100% - var(--fw-pad)); padding: 0 8px 0 var(--fw-pad); gap: 8px; align-items: center; pointer-events: none; overflow: hidden; border-radius: 0 4px 4px 0; background: var(--fw-surface); }
390
+ .fw-root-agents .fw-view-agents .fw-label { position: absolute; z-index: 3; top: 0; left: 0; height: 20px; max-width: calc(100% - var(--fw-pad)); padding: 0 8px 0 var(--fw-pad); gap: 8px; align-items: center; pointer-events: none; overflow: hidden; border-radius: 0 4px 4px 0; background: var(--fw-surface); }
348
391
  }
package/dist/react/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-D6RDkVrJ.js";
1
+ import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-Sr8GtLm0.js";
2
2
  import { CSSProperties, ReactElement, ReactNode } from "react";
3
3
  //#region src/react/sparkline.d.ts
4
4
  type SparklineDirection = "rising" | "falling" | "flat";
@@ -369,11 +369,21 @@ interface FlowWaterfallProps {
369
369
  maxHeight?: number;
370
370
  /** Called when a row is opened or a bar is pinned, with that row's span; the built-in behavior still runs. */
371
371
  onSelect?: (span: FlowSpan) => void;
372
- /** Labelled instants, such as releases, drawn across the rows on the trace clock. */
372
+ /** Labelled instants, such as releases, drawn across the rows and as event dots on the axis; click or N/P jumps to one. */
373
373
  markers?: FlowMarker[];
374
+ /** The time the reader moved to, in trace ms; `null` when following live or showing the whole trace. */
375
+ onTimeChange?: (t: number | null) => void;
376
+ /** What a bar's color means: the agent (default), whose hue its steps and handoffs share, with the outcome on the row dot, legend and
377
+ * crash glyph; or its `outcome`. */
378
+ agentFill?: 'outcome' | 'agent';
379
+ /** The row the host has selected, such as the agent whose transcript is open: it lifts and, in the agent view, its peers dim.
380
+ * A pinned card alone only highlights its row, so the rest of the run stays readable around it. */
381
+ selectedId?: string;
382
+ /** Escape clears the host's selection, after closing any open card. */
383
+ onDeselect?: () => void;
374
384
  }
375
385
  /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
376
386
  * Data remains producer-owned; playback, zoom and folding change presentation only. */
377
- export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers }: FlowWaterfallProps): import("react").JSX.Element;
387
+ export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect }: FlowWaterfallProps): import("react").JSX.Element;
378
388
  //#endregion
379
389
  export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };