@capillaryjs/capillary-devtools 1.1.0 → 1.2.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.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 1.2.0 - 2026-09-19
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Distinguish flow graph node kinds with themeable accents and shape families,
|
|
10
|
+
and expose each node's raw diagnostic kind as a `data-kind` styling hook.
|
|
11
|
+
- Show flow-edge states in the graph legend with representative arrow samples.
|
|
12
|
+
|
|
5
13
|
## 1.1.0 - 2026-09-18
|
|
6
14
|
|
|
7
15
|
### Changed
|
package/README.md
CHANGED
|
@@ -155,9 +155,14 @@ attempt start/duration/outcome table; it does not infer background work.
|
|
|
155
155
|
Use runtime style registration for just the selected component dependencies, or
|
|
156
156
|
import `@capillaryjs/capillary-devtools/styles/structural.css` for all views.
|
|
157
157
|
CSS uses `--cap-trace-text`, `-surface`, `-line`, `-accent`, `-selected`, `-muted`,
|
|
158
|
-
and `-warning` variables (all with neutral fallbacks).
|
|
159
|
-
|
|
160
|
-
|
|
158
|
+
and `-warning` variables (all with neutral fallbacks). Flow graph nodes also use
|
|
159
|
+
`--cap-trace-kind-ui`, `-query`, `-command`, `-derived`, `-subscriber`,
|
|
160
|
+
`-interaction`, and `-external` for their default accents. Each flow node exposes
|
|
161
|
+
its raw diagnostic kind as `data-kind`, allowing a host page to provide additional
|
|
162
|
+
kind-specific styling. Shape and accent are supplementary cues: the native node
|
|
163
|
+
label and kind text remain the authoritative accessible identification. Controls
|
|
164
|
+
are native and keyboard-operable; the scrollable graph has an equivalent textual
|
|
165
|
+
outline and leaf list. There is no implicit animation or reduced-motion exception.
|
|
161
166
|
|
|
162
167
|
The public model also exports `filterTrace`, `traceRoots`, `causalOutline`,
|
|
163
168
|
`projectFlow`, `traceAttempts`, `captureLimitations`, `TraceRecording`, and their
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowGraphView.d.ts","sourceRoot":"","sources":["../../src/views/FlowGraphView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AAErC,qBAAa,aAAc,SAAQ,SAAS;IACxC,OAAgB,QAAQ,SAAc;IACtC,OAAgB,GAAG,
|
|
1
|
+
{"version":3,"file":"FlowGraphView.d.ts","sourceRoot":"","sources":["../../src/views/FlowGraphView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AAErC,qBAAa,aAAc,SAAQ,SAAS;IACxC,OAAgB,QAAQ,SAAc;IACtC,OAAgB,GAAG,SAiClB;IACQ,MAAM;CAqDlB"}
|
|
@@ -7,21 +7,34 @@ export class FlowGraphView extends TraceView {
|
|
|
7
7
|
& .trace-flow-surface { position: relative; min-width: 0; min-height: 0; }
|
|
8
8
|
& .trace-flow-surface > .trace-scroll { height: 100%; min-height: 0; }
|
|
9
9
|
& .trace-canvas { position: relative; }
|
|
10
|
-
& .trace-node { box-sizing: border-box; position: absolute; width: ${flowLayout.nodeWidth}px; min-height: 0; padding: .5rem
|
|
10
|
+
& .trace-node { --_node-accent: var(--cap-trace-accent, #005bb8); --_node-radius-start: .45rem; --_node-radius-end: .45rem; --_node-padding-inline: .6rem; box-sizing: border-box; position: absolute; width: ${flowLayout.nodeWidth}px; min-height: 0; padding: .5rem var(--_node-padding-inline); z-index: 1; border-inline-start: 4px solid var(--_node-accent); border-start-start-radius: var(--_node-radius-start); border-end-start-radius: var(--_node-radius-start); border-start-end-radius: var(--_node-radius-end); border-end-end-radius: var(--_node-radius-end); line-height: 1.35; }
|
|
11
|
+
& .trace-node[data-kind="component"], & .trace-node[data-kind="binding"] { --_node-accent: var(--cap-trace-kind-ui, #6d28d9); --_node-radius-start: 1rem; --_node-radius-end: 1rem; }
|
|
12
|
+
& .trace-node[data-kind="query"] { --_node-accent: var(--cap-trace-kind-query, #0e7490); --_node-radius-start: 999px; --_node-radius-end: 999px; --_node-padding-inline: 1.05rem; }
|
|
13
|
+
& .trace-node[data-kind="command"] { --_node-accent: var(--cap-trace-kind-command, #b45309); --_node-radius-start: .15rem; --_node-radius-end: .15rem; }
|
|
14
|
+
& .trace-node[data-kind="derived"] { --_node-accent: var(--cap-trace-kind-derived, #0f766e); }
|
|
15
|
+
& .trace-node[data-kind="subscriber"] { --_node-accent: var(--cap-trace-kind-subscriber, #4d7c0f); --_node-radius-start: .35rem; --_node-radius-end: 1rem; }
|
|
16
|
+
& .trace-node[data-kind="interaction"] { --_node-accent: var(--cap-trace-kind-interaction, #be185d); --_node-radius-start: 1rem; --_node-radius-end: .35rem; }
|
|
17
|
+
& .trace-node[data-kind="emitter"] { --_node-radius-start: 1rem; --_node-radius-end: .35rem; }
|
|
18
|
+
& .trace-node[data-kind="external"] { --_node-accent: var(--cap-trace-kind-external, #526477); }
|
|
11
19
|
& .trace-node[data-observed="false"] { border-style: dashed; border-inline-start-color: var(--cap-trace-muted, #526477); }
|
|
12
20
|
& .trace-node[data-observed="true"][data-reached="false"] { border-inline-start-color: var(--cap-trace-line, #cad4de); }
|
|
13
|
-
& .trace-node[aria-current="step"] { box-shadow: 0 0 0 3px var(--
|
|
21
|
+
& .trace-node[aria-current="step"] { box-shadow: 0 0 0 3px var(--_node-accent); }
|
|
14
22
|
& .trace-node strong { display: block; overflow-wrap: anywhere; line-height: 1.35; }
|
|
15
23
|
& .trace-node small, & .trace-node span { line-height: 1.35; }
|
|
16
24
|
& .trace-node span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
17
|
-
& .trace-edge { position: absolute; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); transform-origin: left center; }
|
|
18
|
-
& .trace-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); }
|
|
25
|
+
& .trace-edge { position: absolute; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); color: var(--cap-trace-accent, #005bb8); transform-origin: left center; }
|
|
26
|
+
& .trace-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); color: var(--cap-trace-muted, #526477); }
|
|
19
27
|
& .trace-edge[data-observed="true"][data-reached="false"] { border-top-color: var(--cap-trace-line, #cad4de); color: var(--cap-trace-line, #cad4de); }
|
|
20
|
-
& .trace-edge::after { content: ''; position: absolute; right: 0; top: -5px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
|
|
28
|
+
& .trace-edge::after, & .trace-legend-edge::after { content: ''; position: absolute; right: 0; top: -5px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
|
|
21
29
|
& .trace-flow-help { position: absolute; inset-inline-start: .75rem; inset-block-end: 1rem; z-index: 2; box-sizing: border-box; max-inline-size: min(28rem, calc(100% - 1.5rem)); margin: 0; overflow: hidden; border: 1px solid var(--cap-trace-line, #cad4de); border-radius: .5rem; background: var(--cap-trace-surface, #fff); box-shadow: 0 .25rem .75rem rgb(0 0 0 / .18); }
|
|
22
30
|
& .trace-flow-help summary { padding: .4rem .6rem; cursor: pointer; font-weight: 600; user-select: none; }
|
|
23
31
|
& .trace-flow-help[open] summary { border-block-end: 1px solid var(--cap-trace-line, #cad4de); }
|
|
24
32
|
& .trace-flow-help p { margin: .5rem .6rem; }
|
|
33
|
+
& .trace-flow-legend { display: grid; gap: .35rem; margin: .5rem .6rem; padding: 0; list-style: none; }
|
|
34
|
+
& .trace-flow-legend li { display: flex; align-items: center; gap: .65rem; }
|
|
35
|
+
& .trace-legend-edge { position: relative; flex: 0 0 2.75rem; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); color: var(--cap-trace-accent, #005bb8); }
|
|
36
|
+
& .trace-legend-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); color: var(--cap-trace-muted, #526477); }
|
|
37
|
+
& .trace-legend-edge[data-observed="true"][data-reached="false"] { border-top-color: var(--cap-trace-line, #cad4de); color: var(--cap-trace-line, #cad4de); }
|
|
25
38
|
& .trace-leaves { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
|
|
26
39
|
`;
|
|
27
40
|
render() {
|
|
@@ -32,7 +45,10 @@ export class FlowGraphView extends TraceView {
|
|
|
32
45
|
const byId = new Map(events.map((event) => [event.id, event]));
|
|
33
46
|
const reachedEdges = new Set(events.filter((event) => reached.has(event.id) && event.parentId)
|
|
34
47
|
.map((event) => `${byId.get(event.parentId)?.nodeId}:${event.nodeId}`));
|
|
35
|
-
return this.host({ role: 'region', 'aria-label': 'Propagation graph' }, h('h2', null, 'Propagation graph'), h('div', { className: 'trace-flow-surface' }, h('details', { className: 'trace-flow-help', open: true }, h('summary', null, 'Legend'), h('
|
|
48
|
+
return this.host({ role: 'region', 'aria-label': 'Propagation graph' }, h('h2', null, 'Propagation graph'), h('div', { className: 'trace-flow-surface' }, h('details', { className: 'trace-flow-help', open: true }, h('summary', null, 'Legend'), h('ul', { className: 'trace-flow-legend' }, h('li', null, h('span', { className: 'trace-legend-edge', 'aria-hidden': true,
|
|
49
|
+
'data-observed': 'true', 'data-reached': 'true' }), 'Recorded propagation'), h('li', null, h('span', { className: 'trace-legend-edge', 'aria-hidden': true,
|
|
50
|
+
'data-observed': 'false', 'data-reached': 'false' }), 'Known connection with no observed hop in this trace'), h('li', null, h('span', { className: 'trace-legend-edge', 'aria-hidden': true,
|
|
51
|
+
'data-observed': 'true', 'data-reached': 'false' }), 'Recorded path not yet reached at this step')), h('p', null, 'Node shape and accent color reflect node kind.'), h('p', null, 'Renders count executions, not visible changes. Own DOM writes exclude nested consumers; UI consumers can also have downstream children.')), !events.length ? h('p', { className: 'trace-empty' }, 'Select a recorded root to follow its flow.')
|
|
36
52
|
: h('div', { className: 'trace-scroll', tabIndex: 0, 'aria-label': 'Scrollable flow graph' }, h('div', { className: 'trace-canvas', style: { width: `${flow.width}px`, height: `${flow.height}px` } }, ...flow.edges.map((edge) => {
|
|
37
53
|
const from = positions.get(edge.from), to = positions.get(edge.to);
|
|
38
54
|
const x = from.x + flowLayout.nodeWidth, y = from.y + flowLayout.edgeY;
|
|
@@ -46,7 +62,7 @@ export class FlowGraphView extends TraceView {
|
|
|
46
62
|
const kind = node.kind === 'component' || node.kind === 'binding' ? 'UI' : node.kind;
|
|
47
63
|
const kindLabel = node.kind === 'component' || node.kind === 'binding' ? 'UI consumer' : node.kind;
|
|
48
64
|
return h('button', { key: node.id, type: 'button', className: 'trace-node',
|
|
49
|
-
'data-node-id': node.id, 'data-observed': String(occurrences.length > 0),
|
|
65
|
+
'data-node-id': node.id, 'data-kind': node.kind, 'data-observed': String(occurrences.length > 0),
|
|
50
66
|
'data-reached': String(Boolean(current)),
|
|
51
67
|
'aria-current': events[this.cursor]?.nodeId === node.id ? 'step' : undefined,
|
|
52
68
|
'aria-pressed': this.props.selection.state.get().nodeId === node.id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowGraphView.js","sourceRoot":"","sources":["../../src/views/FlowGraphView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,2BAA2B,CAAA;AAC3C,OAAO,EAAC,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,wBAAwB,CAAA;AAC5G,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,OAAO,aAAc,SAAQ,SAAS;IACxC,MAAM,CAAU,QAAQ,GAAG,WAAW,CAAA;IACtC,MAAM,CAAU,GAAG,GAAG;;;;
|
|
1
|
+
{"version":3,"file":"FlowGraphView.js","sourceRoot":"","sources":["../../src/views/FlowGraphView.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillaryjs/capillary-devtools",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Bounded causal recordings and composable Capillary flow inspection tools.",
|
|
@@ -58,12 +58,12 @@
|
|
|
58
58
|
"prepack": "pnpm typecheck && pnpm test && pnpm build && pnpm test:types:consumer"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@capillaryjs/capillary": "^1.
|
|
62
|
-
"@capillaryjs/capillary-ui": "^1.
|
|
61
|
+
"@capillaryjs/capillary": "^1.4.0",
|
|
62
|
+
"@capillaryjs/capillary-ui": "^1.4.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@capillaryjs/capillary": "^1.
|
|
66
|
-
"@capillaryjs/capillary-ui": "^1.
|
|
65
|
+
"@capillaryjs/capillary": "^1.4.0",
|
|
66
|
+
"@capillaryjs/capillary-ui": "^1.4.0"
|
|
67
67
|
},
|
|
68
68
|
"engines": {
|
|
69
69
|
"node": ">=22",
|
package/styles/structural.css
CHANGED
|
@@ -365,21 +365,34 @@ cap-traceinspector .trace-workbench { display: grid; grid-template-columns: minm
|
|
|
365
365
|
cap-traceflow .trace-flow-surface { position: relative; min-width: 0; min-height: 0; }
|
|
366
366
|
cap-traceflow .trace-flow-surface > .trace-scroll { height: 100%; min-height: 0; }
|
|
367
367
|
cap-traceflow .trace-canvas { position: relative; }
|
|
368
|
-
cap-traceflow .trace-node { box-sizing: border-box; position: absolute; width: 192px; min-height: 0; padding: .5rem
|
|
368
|
+
cap-traceflow .trace-node { --_node-accent: var(--cap-trace-accent, #005bb8); --_node-radius-start: .45rem; --_node-radius-end: .45rem; --_node-padding-inline: .6rem; box-sizing: border-box; position: absolute; width: 192px; min-height: 0; padding: .5rem var(--_node-padding-inline); z-index: 1; border-inline-start: 4px solid var(--_node-accent); border-start-start-radius: var(--_node-radius-start); border-end-start-radius: var(--_node-radius-start); border-start-end-radius: var(--_node-radius-end); border-end-end-radius: var(--_node-radius-end); line-height: 1.35; }
|
|
369
|
+
cap-traceflow .trace-node[data-kind="component"], cap-traceflow .trace-node[data-kind="binding"] { --_node-accent: var(--cap-trace-kind-ui, #6d28d9); --_node-radius-start: 1rem; --_node-radius-end: 1rem; }
|
|
370
|
+
cap-traceflow .trace-node[data-kind="query"] { --_node-accent: var(--cap-trace-kind-query, #0e7490); --_node-radius-start: 999px; --_node-radius-end: 999px; --_node-padding-inline: 1.05rem; }
|
|
371
|
+
cap-traceflow .trace-node[data-kind="command"] { --_node-accent: var(--cap-trace-kind-command, #b45309); --_node-radius-start: .15rem; --_node-radius-end: .15rem; }
|
|
372
|
+
cap-traceflow .trace-node[data-kind="derived"] { --_node-accent: var(--cap-trace-kind-derived, #0f766e); }
|
|
373
|
+
cap-traceflow .trace-node[data-kind="subscriber"] { --_node-accent: var(--cap-trace-kind-subscriber, #4d7c0f); --_node-radius-start: .35rem; --_node-radius-end: 1rem; }
|
|
374
|
+
cap-traceflow .trace-node[data-kind="interaction"] { --_node-accent: var(--cap-trace-kind-interaction, #be185d); --_node-radius-start: 1rem; --_node-radius-end: .35rem; }
|
|
375
|
+
cap-traceflow .trace-node[data-kind="emitter"] { --_node-radius-start: 1rem; --_node-radius-end: .35rem; }
|
|
376
|
+
cap-traceflow .trace-node[data-kind="external"] { --_node-accent: var(--cap-trace-kind-external, #526477); }
|
|
369
377
|
cap-traceflow .trace-node[data-observed="false"] { border-style: dashed; border-inline-start-color: var(--cap-trace-muted, #526477); }
|
|
370
378
|
cap-traceflow .trace-node[data-observed="true"][data-reached="false"] { border-inline-start-color: var(--cap-trace-line, #cad4de); }
|
|
371
|
-
cap-traceflow .trace-node[aria-current="step"] { box-shadow: 0 0 0 3px var(--
|
|
379
|
+
cap-traceflow .trace-node[aria-current="step"] { box-shadow: 0 0 0 3px var(--_node-accent); }
|
|
372
380
|
cap-traceflow .trace-node strong { display: block; overflow-wrap: anywhere; line-height: 1.35; }
|
|
373
381
|
cap-traceflow .trace-node small, cap-traceflow .trace-node span { line-height: 1.35; }
|
|
374
382
|
cap-traceflow .trace-node span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
375
|
-
cap-traceflow .trace-edge { position: absolute; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); transform-origin: left center; }
|
|
376
|
-
cap-traceflow .trace-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); }
|
|
383
|
+
cap-traceflow .trace-edge { position: absolute; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); color: var(--cap-trace-accent, #005bb8); transform-origin: left center; }
|
|
384
|
+
cap-traceflow .trace-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); color: var(--cap-trace-muted, #526477); }
|
|
377
385
|
cap-traceflow .trace-edge[data-observed="true"][data-reached="false"] { border-top-color: var(--cap-trace-line, #cad4de); color: var(--cap-trace-line, #cad4de); }
|
|
378
|
-
cap-traceflow .trace-edge::after { content: ''; position: absolute; right: 0; top: -5px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
|
|
386
|
+
cap-traceflow .trace-edge::after, cap-traceflow .trace-legend-edge::after { content: ''; position: absolute; right: 0; top: -5px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
|
|
379
387
|
cap-traceflow .trace-flow-help { position: absolute; inset-inline-start: .75rem; inset-block-end: 1rem; z-index: 2; box-sizing: border-box; max-inline-size: min(28rem, calc(100% - 1.5rem)); margin: 0; overflow: hidden; border: 1px solid var(--cap-trace-line, #cad4de); border-radius: .5rem; background: var(--cap-trace-surface, #fff); box-shadow: 0 .25rem .75rem rgb(0 0 0 / .18); }
|
|
380
388
|
cap-traceflow .trace-flow-help summary { padding: .4rem .6rem; cursor: pointer; font-weight: 600; user-select: none; }
|
|
381
389
|
cap-traceflow .trace-flow-help[open] summary { border-block-end: 1px solid var(--cap-trace-line, #cad4de); }
|
|
382
390
|
cap-traceflow .trace-flow-help p { margin: .5rem .6rem; }
|
|
391
|
+
cap-traceflow .trace-flow-legend { display: grid; gap: .35rem; margin: .5rem .6rem; padding: 0; list-style: none; }
|
|
392
|
+
cap-traceflow .trace-flow-legend li { display: flex; align-items: center; gap: .65rem; }
|
|
393
|
+
cap-traceflow .trace-legend-edge { position: relative; flex: 0 0 2.75rem; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); color: var(--cap-trace-accent, #005bb8); }
|
|
394
|
+
cap-traceflow .trace-legend-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); color: var(--cap-trace-muted, #526477); }
|
|
395
|
+
cap-traceflow .trace-legend-edge[data-observed="true"][data-reached="false"] { border-top-color: var(--cap-trace-line, #cad4de); color: var(--cap-trace-line, #cad4de); }
|
|
383
396
|
cap-traceflow .trace-leaves { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
|
|
384
397
|
|
|
385
398
|
cap-causaltrace ol { list-style: none; padding: 0; margin: 0; } cap-causaltrace li { margin: .25rem 0; } cap-causaltrace summary { cursor: pointer; } cap-causaltrace button { max-width: 100%; overflow-wrap: anywhere; }
|