@tangle-network/charts 0.21.19 → 0.21.21

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 (3) hide show
  1. package/dist/react/flow-waterfall.css +27 -22
  2. package/dist/react/index.js +1 -6
  3. package/package.json +1 -1
package/dist/react/flow-waterfall.css CHANGED
@@ -26,14 +26,15 @@
26
26
  --fw-kind-tool: var(--tone-cyan-icon);
27
27
  --fw-neutral-bar: color-mix(in oklab, var(--fw-text) 15%, var(--fw-surface));
28
28
  --fw-hatch: color-mix(in oklab, var(--fw-text) 22%, transparent);
29
- /* Root agent neutral, then five of Brand's categorical hues, each 3:1 or more against the card in both modes. No warm hue
30
- among the agents (amber is kept for the slowest and red for failure), and neighbours alternate cool and warm-leaning. */
29
+ /* Bar identity, not status: the root neutral, then an identity ring at one lightness and a moderate chroma, so no lane
30
+ outshouts another (critique P0 #3, round 29: Brand's icon-strength teal, pink and violet "compete", lime and pink read
31
+ olive and maroon). Blue, violet, pink, cyan, slate: no green, teal, lime, amber or red, so no lane is mistaken for a status. */
31
32
  --fw-h0: var(--chart-muted);
32
- --fw-h1: var(--tone-blue-icon);
33
- --fw-h2: var(--tone-teal-icon);
34
- --fw-h3: var(--tone-pink-icon);
35
- --fw-h4: var(--tone-violet-icon);
36
- --fw-h5: var(--tone-lime-icon);
33
+ --fw-h1: light-dark(oklch(0.55 0.11 255), oklch(0.70 0.11 255));
34
+ --fw-h2: light-dark(oklch(0.55 0.11 300), oklch(0.70 0.11 300));
35
+ --fw-h3: light-dark(oklch(0.55 0.11 335), oklch(0.70 0.11 335));
36
+ --fw-h4: light-dark(oklch(0.55 0.11 215), oklch(0.70 0.11 215));
37
+ --fw-h5: light-dark(oklch(0.55 0.03 255), oklch(0.70 0.03 255));
37
38
  --fw-ease: cubic-bezier(.2, .8, .2, 1);
38
39
  /* Bar height = row height - 16, so a centered bar sits 8 px from the row edge: 20 px in a 36 px step row. */
39
40
  --fw-bar-h: 20px;
@@ -205,6 +206,8 @@
205
206
  .fw-root .fw-view-agents .fw-detail-icon { flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; overflow: hidden; }
206
207
  .fw-root .fw-view-agents .fw-detail { font-size: 12px; line-height: 16px; }
207
208
  .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); }
209
+ /* The dot is outcome only (critique P0 #3): an agent with no recorded outcome gets a hollow ring, never its lane hue. */
210
+ .fw-root .fw-row:not([data-outcome]) .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
208
211
 
209
212
  /* Lanes and marks */
210
213
  .fw-root .fw-lane { position: relative; overflow: hidden; min-width: 0; }
@@ -272,13 +275,13 @@
272
275
  .fw-root .fw-kinds { margin: 0; padding: 0; justify-content: flex-start; color: var(--fw-muted); }
273
276
  .fw-root .fw-kinds .fw-swatch-model { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-model); }
274
277
  /* With per-agent hues the key shows kind as shade, as the bars do: darker for a model call, lighter for a tool call. */
275
- .fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: color-mix(in oklab, var(--fw-text) 58%, var(--fw-surface)); }
276
- .fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: color-mix(in oklab, var(--fw-text) 24%, var(--fw-surface)); }
278
+ .fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: light-dark(oklch(0.50 0 0), oklch(0.82 0 0)); }
279
+ .fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: light-dark(oklch(0.80 0 0), oklch(0.64 0 0)); }
277
280
  .fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-tool); }
278
281
  .fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 18%, transparent); }
279
282
  .fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
280
283
  .fw-root .fw-description { margin: 0; color: var(--fw-muted); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
281
- .fw-root .fw-legend .fw-swatch { width: 12px; height: 8px; border-radius: 2px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
284
+ .fw-root .fw-legend .fw-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
282
285
  .fw-root .fw-legend b { color: var(--fw-text); font-weight: 600; font-variant-numeric: tabular-nums; }
283
286
  .fw-root .fw-legend .fw-swatch-step { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 3px; background: var(--fw-well); color: var(--fw-failed); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 50%, transparent); }
284
287
  .fw-root .fw-legend .fw-swatch-step svg { width: 8px; height: 8px; }
@@ -287,22 +290,24 @@
287
290
  .fw-root .fw-view-agents .fw-seg { pointer-events: auto; }
288
291
  .fw-root .fw-seg-model { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
289
292
  .fw-root .fw-seg-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
290
- /* Without per-agent hues (muted or outcome fill), a step's kind owns its color; with them, kind is the darker and lighter shade of the
291
- agent's own hue (the rules above), so each agent stays one color. */
293
+ /* Without per-agent hues (muted or outcome fill), a step's kind owns its color; with them, kind is a fixed lightness on the agent's own
294
+ hue (the rules below), so each agent stays one color. */
292
295
  .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-model { background: var(--fw-kind-model); box-shadow: none; }
293
296
  .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-tool { background: var(--fw-kind-tool); box-shadow: none; }
294
- /* Per-agent hues at full saturation (blind round 26: muted per-agent bars "blur together", "wash out on white"): kind is a darker or
295
- lighter step of the agent's own saturated hue; waiting stays the only pale fill. Light theme sits one step softer (round 27: the
296
- saturated light bars read "heavy"). */
297
- .fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 88%, var(--fw-text)), var(--tone)); box-shadow: none; }
298
- .fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: none; }
299
- /* A failed turn is still the agent's work: it keeps the agent's saturated hue, and the red cross on the ending turn says it failed. */
300
- .fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
297
+ /* Per-agent hues: a step's kind is a fixed lightness on its agent's hue, the same for every hue, so kind reads by lightness
298
+ against the surface and never contradicts the key (critique P0 #4: dark tool steps were lighter than model steps, and the
299
+ step varied with hue). On dark both steps are light pastels, model 0.82 and tool 0.64: round 27's pastel dark fills scored
300
+ 39/252, and the critique's darker 0.72/0.46 read muddy to round 29's judges. Model is the stronger step on either surface; chroma is capped at 0.10, never raised, so a neutral (the root's grey) stays
301
+ neutral instead of taking a red cast from its undefined hue. */
302
+ .fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(oklch(from var(--tone) 0.50 min(c, 0.10) h), oklch(from var(--tone) 0.82 min(c, 0.10) h)); box-shadow: none; }
303
+ .fw-root.fw-fill-agent .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { background: light-dark(oklch(from var(--tone) 0.80 min(c, 0.10) h), oklch(from var(--tone) 0.64 min(c, 0.10) h)); box-shadow: none; }
304
+ /* A failed turn is still the agent's work: it keeps the agent's hue, and the red cross on the ending turn says it failed. */
305
+ .fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
301
306
  .fw-root .fw-view-agents .fw-seg { container-type: inline-size; justify-content: flex-start; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--fw-seg-ink); }
302
- /* Label ink holds 4.5:1 on its fill: light text on the darker model step, a near-black of the agent's hue on the lighter tool step
303
- (round 28: white on the pale light-theme fills failed); on dark the steps are bright, so ink is the page's dark. */
307
+ /* Label ink holds 4.5:1 on its fill: page-light on the dark light-theme model step (L 0.50), page-dark on every other step
308
+ (light tool 0.80, dark pastels 0.82 and 0.64). */
304
309
  .fw-root .fw-view-agents .fw-seg-model { --fw-seg-ink: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
305
- .fw-root .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { --fw-seg-ink: light-dark(color-mix(in oklab, var(--tone) 18%, black), hsl(var(--hsl-background))); }
310
+ .fw-root .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { --fw-seg-ink: light-dark(var(--fw-text), hsl(var(--hsl-background))); }
306
311
  .fw-root .fw-view-agents .fw-seg > * { pointer-events: none; }
307
312
  /* One line, 6 px in from each end; a part that does not fit whole wraps to the hidden second line, so trailing parts drop first. */
308
313
  .fw-root .fw-seg-label { flex: 1; min-width: 0; height: 16px; margin: 0 6px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; overflow: hidden; }
package/dist/react/index.js CHANGED
@@ -3411,7 +3411,7 @@ function Segment({ mark, events, agentView, ending }) {
3411
3411
  className: "fw-seg-name",
3412
3412
  children: name
3413
3413
  }),
3414
- mark.count > 1 && /* @__PURE__ */ jsxs("span", {
3414
+ mark.count > 1 && name && /* @__PURE__ */ jsxs("span", {
3415
3415
  className: "fw-seg-chip",
3416
3416
  children: ["×", mark.count]
3417
3417
  }),
@@ -3586,11 +3586,6 @@ const FlowRow = memo(function FlowRow(props) {
3586
3586
  "aria-label": `${row.descendants} hidden steps`,
3587
3587
  children: ["+", row.descendants]
3588
3588
  }),
3589
- family && !props.expanded && /* @__PURE__ */ jsxs("span", {
3590
- className: "fw-count",
3591
- "aria-label": `${row.descendants} agents folded`,
3592
- children: ["+", row.descendants]
3593
- }),
3594
3589
  !row.ok && !agentView && /* @__PURE__ */ jsx("span", {
3595
3590
  className: "fw-alert",
3596
3591
  children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/charts",
3
- "version": "0.21.19",
3
+ "version": "0.21.21",
4
4
  "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
5
5
  "type": "module",
6
6
  "license": "MIT",