@capillaryjs/capillary-devtools 1.0.0

package/dist/views/shared.js

@@ -0,0 +1,52 @@
+import { Component } from '@capillaryjs/capillary-ui';
+import { TraceRecorder } from '../model/TraceRecorder.js';
+import { devtoolsDiagnosticScope } from '../model/scope.js';
+import { filterTrace } from '../model/projection.js';
+/** Shared view lifecycle; importing a view does not import sibling views. */
+export class TraceView extends Component {
+    static diagnosticScope = devtoolsDiagnosticScope;
+    static css = `
+        & { display: block; min-width: 0; color: var(--cap-trace-text, #192c3d); font: 13px/1.5 system-ui, sans-serif; }
+        & button, & select, & input { font: inherit; }
+        & button, & select { color: inherit; background: var(--cap-trace-surface, #fff); border: 1px solid var(--cap-trace-line, #cad4de); border-radius: 5px; padding: .35rem .55rem; }
+        & button { cursor: pointer; text-align: start; }
+        & button:disabled { cursor: default; opacity: .55; }
+        & :focus-visible { outline: 3px solid var(--cap-trace-accent, #005bb8); outline-offset: 2px; }
+        & button[aria-pressed="true"], & button[aria-current="step"] { outline: 2px solid var(--cap-trace-accent, #005bb8); outline-offset: -2px; background: var(--cap-trace-selected, #eaf3ff); }
+        & h2, & h3 { font: 650 1rem/1.4 system-ui, sans-serif; margin: 0 0 .75rem; }
+        & p { margin: .4rem 0; }
+        & small { display: block; color: var(--cap-trace-muted, #526477); }
+        & .trace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+        & .trace-pane { padding: 1rem; border: 1px solid var(--cap-trace-line, #cad4de); border-radius: 8px; background: var(--cap-trace-surface, #fff); min-width: 0; }
+        & .trace-scroll { overflow: auto; max-height: 32rem; }
+        & .trace-empty { padding: 1rem 0; color: var(--cap-trace-muted, #526477); }
+        & table { width: 100%; border-collapse: collapse; text-align: start; }
+        & th, & td { padding: .4rem; border-bottom: 1px solid var(--cap-trace-line, #cad4de); vertical-align: top; }
+        & dl { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: .4rem 1rem; }
+        & dt { font-weight: 600; } & dd { margin: 0; overflow-wrap: anywhere; }
+        & .trace-limit { border-inline-start: 3px solid var(--cap-trace-warning, #ae6500); padding-inline-start: .7rem; }
+    `;
+    initialize() {
+        if (this.props.recording instanceof TraceRecorder)
+            this.watch(this.props.recording.revision);
+        this.watch(this.props.selection.state);
+        if (this.props.playback)
+            this.watch(this.props.playback.state);
+    }
+    get recording() {
+        return this.props.recording instanceof TraceRecorder ? this.props.recording.snapshot() : this.props.recording;
+    }
+    get events() {
+        const state = this.props.selection.state.get();
+        return state.rootId ? filterTrace(this.recording, state) : [];
+    }
+    get cursor() {
+        return Math.min(this.events.length - 1, this.props.playback?.state.get().cursor ?? this.events.length - 1);
+    }
+    label(nodeId) { return this.recording.nodes.find((node) => node.id === nodeId)?.label ?? nodeId; }
+    choose(event) {
+        this.props.selection.selectEvent(event.id, event.nodeId);
+        this.props.playback?.seek(this.events.findIndex((candidate) => candidate.id === event.id), this.events.length);
+    }
+}
+//# sourceMappingURL=shared.js.map

package/dist/views/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/views/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAC,uBAAuB,EAAC,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAC,WAAW,EAAC,MAAM,wBAAwB,CAAA;AAWlD,6EAA6E;AAC7E,MAAM,OAAgB,SAAU,SAAQ,SAAyB;IAC7D,MAAM,CAAU,eAAe,GAAG,uBAAuB,CAAA;IACzD,MAAM,CAAU,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;KAoBrB,CAAA;IACQ,UAAU;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,YAAY,aAAa;YAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC5F,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACtC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAClE,CAAC;IACD,IAAc,SAAS;QACnB,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,YAAY,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAA;IACjH,CAAC;IACD,IAAc,MAAM;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;QAC9C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACjE,CAAC;IACD,IAAc,MAAM;QAChB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAC9G,CAAC;IACS,KAAK,CAAC,MAAc,IAAY,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,KAAK,IAAI,MAAM,CAAA,CAAC,CAAC;IACjH,MAAM,CAAC,KAAiB;QAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACxD,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAClH,CAAC"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@capillaryjs/capillary-devtools",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "description": "Bounded causal recordings and composable Capillary flow inspection tools.",
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Sylwell Software",
+    "email": "npm@sylwellsoftware.com",
+    "url": "https://sylwellsoftware.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/capillaryjs/capillaryjs.git",
+    "directory": "packages/capillary-devtools"
+  },
+  "homepage": "https://github.com/capillaryjs/capillaryjs#readme",
+  "bugs": {
+    "url": "https://github.com/capillaryjs/capillaryjs/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./model": {
+      "types": "./dist/model/index.d.ts",
+      "import": "./dist/model/index.js"
+    },
+    "./views/*": {
+      "types": "./dist/views/*.d.ts",
+      "import": "./dist/views/*.js"
+    },
+    "./styles/structural.css": "./styles/structural.css"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "CHANGELOG.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "sideEffects": [
+    "./styles/*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node --import tsx scripts/build-structural-css.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --import tsx --test test/*.test.ts",
+    "test:types:consumer": "tsc -p test-types/consumer/tsconfig.json --noEmit",
+    "prepack": "pnpm typecheck && pnpm test && pnpm build && pnpm test:types:consumer"
+  },
+  "peerDependencies": {
+    "@capillaryjs/capillary": "^1.2.0",
+    "@capillaryjs/capillary-ui": "^1.2.0"
+  },
+  "devDependencies": {
+    "@capillaryjs/capillary": "^1.2.0",
+    "@capillaryjs/capillary-ui": "^1.2.0"
+  },
+  "engines": {
+    "node": ">=22",
+    "pnpm": ">=10"
+  },
+  "packageManager": "pnpm@10.11.0"
+}

package/styles/structural.css

@@ -0,0 +1,331 @@
+/* Generated by scripts/build-structural-css.mjs. */
+.cap-fill-horizontal,
+        .cap-fill-vertical {
+            box-sizing: border-box;
+            background: var(--application-background);
+            color: var(--ui-color);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+        }
+
+        .cap-fill-horizontal {
+            width: 100vw;
+            max-width: 100vw;
+            min-width: 0;
+            overflow-x: auto;
+        }
+
+        .cap-fill-vertical {
+            height: 100vh;
+            max-height: 100vh;
+            min-height: 0;
+            overflow-y: auto;
+        }
+
+        .cap-layout-horizontal,
+        .cap-layout-vertical {
+            display: flex;
+            align-items: stretch;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .cap-layout-horizontal {
+            flex-direction: row;
+        }
+
+        .cap-layout-vertical {
+            flex-direction: column;
+        }
+
+        .cap-size-natural {
+            flex: 0 0 auto;
+        }
+
+        .cap-size-flexible {
+            flex: 1 1 0;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .cap-scroll {
+            overflow: auto;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .colored {
+            --colored-base-bg:
+                    linear-gradient(
+                            15deg,
+                            var(--c1) 0%,
+                            var(--c2) 65%,
+                            var(--c2) 65%,
+                            var(--c3) 100%
+                    );
+
+            background: var(--colored-base-bg);
+            box-shadow: var(--colored-shadow);
+            border-radius: var(--ui-border-radius);
+        }
+
+        .app-footer.island,
+        .island {
+            box-sizing: border-box;
+            min-width: 0;
+            min-height: 0;
+            margin: var(--island-margin);
+            padding: var(--island-padding);
+            background: var(--island-background);
+            border: var(--island-border);
+            border-radius: var(--island-radius);
+            box-shadow: var(--island-shadow);
+        }
+
+        .cap-fill-horizontal.island,
+        .cap-fill-horizontal .island {
+            max-width: calc(100% - (2 * var(--island-margin)));
+            overflow-x: auto;
+        }
+
+        .cap-fill-vertical.island,
+        .cap-fill-vertical .island {
+            max-height: calc(100% - (2 * var(--island-margin)));
+            overflow-y: auto;
+        }
+
+        label[data-cap] {
+            user-select: none;
+        }
+
+cap-traceinspector,
+cap-traceflow,
+cap-causaltrace,
+cap-chronologicaltrace,
+cap-tracedetails,
+cap-tracetimeline,
+cap-traceplayback,
+cap-traceactivity { display: block; min-width: 0; color: var(--cap-trace-text, #192c3d); font: 13px/1.5 system-ui, sans-serif; }
+        cap-traceinspector button,
+        cap-traceflow button,
+        cap-causaltrace button,
+        cap-chronologicaltrace button,
+        cap-tracedetails button,
+        cap-tracetimeline button,
+        cap-traceplayback button,
+        cap-traceactivity button,
+        cap-traceinspector select,
+        cap-traceflow select,
+        cap-causaltrace select,
+        cap-chronologicaltrace select,
+        cap-tracedetails select,
+        cap-tracetimeline select,
+        cap-traceplayback select,
+        cap-traceactivity select,
+        cap-traceinspector input,
+        cap-traceflow input,
+        cap-causaltrace input,
+        cap-chronologicaltrace input,
+        cap-tracedetails input,
+        cap-tracetimeline input,
+        cap-traceplayback input,
+        cap-traceactivity input { font: inherit; }
+        cap-traceinspector button,
+        cap-traceflow button,
+        cap-causaltrace button,
+        cap-chronologicaltrace button,
+        cap-tracedetails button,
+        cap-tracetimeline button,
+        cap-traceplayback button,
+        cap-traceactivity button,
+        cap-traceinspector select,
+        cap-traceflow select,
+        cap-causaltrace select,
+        cap-chronologicaltrace select,
+        cap-tracedetails select,
+        cap-tracetimeline select,
+        cap-traceplayback select,
+        cap-traceactivity select { color: inherit; background: var(--cap-trace-surface, #fff); border: 1px solid var(--cap-trace-line, #cad4de); border-radius: 5px; padding: .35rem .55rem; }
+        cap-traceinspector button,
+        cap-traceflow button,
+        cap-causaltrace button,
+        cap-chronologicaltrace button,
+        cap-tracedetails button,
+        cap-tracetimeline button,
+        cap-traceplayback button,
+        cap-traceactivity button { cursor: pointer; text-align: start; }
+        cap-traceinspector button:disabled,
+        cap-traceflow button:disabled,
+        cap-causaltrace button:disabled,
+        cap-chronologicaltrace button:disabled,
+        cap-tracedetails button:disabled,
+        cap-tracetimeline button:disabled,
+        cap-traceplayback button:disabled,
+        cap-traceactivity button:disabled { cursor: default; opacity: .55; }
+        cap-traceinspector :focus-visible,
+        cap-traceflow :focus-visible,
+        cap-causaltrace :focus-visible,
+        cap-chronologicaltrace :focus-visible,
+        cap-tracedetails :focus-visible,
+        cap-tracetimeline :focus-visible,
+        cap-traceplayback :focus-visible,
+        cap-traceactivity :focus-visible { outline: 3px solid var(--cap-trace-accent, #005bb8); outline-offset: 2px; }
+        cap-traceinspector button[aria-pressed="true"],
+        cap-traceflow button[aria-pressed="true"],
+        cap-causaltrace button[aria-pressed="true"],
+        cap-chronologicaltrace button[aria-pressed="true"],
+        cap-tracedetails button[aria-pressed="true"],
+        cap-tracetimeline button[aria-pressed="true"],
+        cap-traceplayback button[aria-pressed="true"],
+        cap-traceactivity button[aria-pressed="true"],
+        cap-traceinspector button[aria-current="step"],
+        cap-traceflow button[aria-current="step"],
+        cap-causaltrace button[aria-current="step"],
+        cap-chronologicaltrace button[aria-current="step"],
+        cap-tracedetails button[aria-current="step"],
+        cap-tracetimeline button[aria-current="step"],
+        cap-traceplayback button[aria-current="step"],
+        cap-traceactivity button[aria-current="step"] { outline: 2px solid var(--cap-trace-accent, #005bb8); outline-offset: -2px; background: var(--cap-trace-selected, #eaf3ff); }
+        cap-traceinspector h2,
+        cap-traceflow h2,
+        cap-causaltrace h2,
+        cap-chronologicaltrace h2,
+        cap-tracedetails h2,
+        cap-tracetimeline h2,
+        cap-traceplayback h2,
+        cap-traceactivity h2,
+        cap-traceinspector h3,
+        cap-traceflow h3,
+        cap-causaltrace h3,
+        cap-chronologicaltrace h3,
+        cap-tracedetails h3,
+        cap-tracetimeline h3,
+        cap-traceplayback h3,
+        cap-traceactivity h3 { font: 650 1rem/1.4 system-ui, sans-serif; margin: 0 0 .75rem; }
+        cap-traceinspector p,
+        cap-traceflow p,
+        cap-causaltrace p,
+        cap-chronologicaltrace p,
+        cap-tracedetails p,
+        cap-tracetimeline p,
+        cap-traceplayback p,
+        cap-traceactivity p { margin: .4rem 0; }
+        cap-traceinspector small,
+        cap-traceflow small,
+        cap-causaltrace small,
+        cap-chronologicaltrace small,
+        cap-tracedetails small,
+        cap-tracetimeline small,
+        cap-traceplayback small,
+        cap-traceactivity small { display: block; color: var(--cap-trace-muted, #526477); }
+        cap-traceinspector .trace-actions,
+        cap-traceflow .trace-actions,
+        cap-causaltrace .trace-actions,
+        cap-chronologicaltrace .trace-actions,
+        cap-tracedetails .trace-actions,
+        cap-tracetimeline .trace-actions,
+        cap-traceplayback .trace-actions,
+        cap-traceactivity .trace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+        cap-traceinspector .trace-pane,
+        cap-traceflow .trace-pane,
+        cap-causaltrace .trace-pane,
+        cap-chronologicaltrace .trace-pane,
+        cap-tracedetails .trace-pane,
+        cap-tracetimeline .trace-pane,
+        cap-traceplayback .trace-pane,
+        cap-traceactivity .trace-pane { padding: 1rem; border: 1px solid var(--cap-trace-line, #cad4de); border-radius: 8px; background: var(--cap-trace-surface, #fff); min-width: 0; }
+        cap-traceinspector .trace-scroll,
+        cap-traceflow .trace-scroll,
+        cap-causaltrace .trace-scroll,
+        cap-chronologicaltrace .trace-scroll,
+        cap-tracedetails .trace-scroll,
+        cap-tracetimeline .trace-scroll,
+        cap-traceplayback .trace-scroll,
+        cap-traceactivity .trace-scroll { overflow: auto; max-height: 32rem; }
+        cap-traceinspector .trace-empty,
+        cap-traceflow .trace-empty,
+        cap-causaltrace .trace-empty,
+        cap-chronologicaltrace .trace-empty,
+        cap-tracedetails .trace-empty,
+        cap-tracetimeline .trace-empty,
+        cap-traceplayback .trace-empty,
+        cap-traceactivity .trace-empty { padding: 1rem 0; color: var(--cap-trace-muted, #526477); }
+        cap-traceinspector table,
+        cap-traceflow table,
+        cap-causaltrace table,
+        cap-chronologicaltrace table,
+        cap-tracedetails table,
+        cap-tracetimeline table,
+        cap-traceplayback table,
+        cap-traceactivity table { width: 100%; border-collapse: collapse; text-align: start; }
+        cap-traceinspector th,
+        cap-traceflow th,
+        cap-causaltrace th,
+        cap-chronologicaltrace th,
+        cap-tracedetails th,
+        cap-tracetimeline th,
+        cap-traceplayback th,
+        cap-traceactivity th,
+        cap-traceinspector td,
+        cap-traceflow td,
+        cap-causaltrace td,
+        cap-chronologicaltrace td,
+        cap-tracedetails td,
+        cap-tracetimeline td,
+        cap-traceplayback td,
+        cap-traceactivity td { padding: .4rem; border-bottom: 1px solid var(--cap-trace-line, #cad4de); vertical-align: top; }
+        cap-traceinspector dl,
+        cap-traceflow dl,
+        cap-causaltrace dl,
+        cap-chronologicaltrace dl,
+        cap-tracedetails dl,
+        cap-tracetimeline dl,
+        cap-traceplayback dl,
+        cap-traceactivity dl { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: .4rem 1rem; }
+        cap-traceinspector dt,
+        cap-traceflow dt,
+        cap-causaltrace dt,
+        cap-chronologicaltrace dt,
+        cap-tracedetails dt,
+        cap-tracetimeline dt,
+        cap-traceplayback dt,
+        cap-traceactivity dt { font-weight: 600; } cap-traceinspector dd,
+ cap-traceflow dd,
+ cap-causaltrace dd,
+ cap-chronologicaltrace dd,
+ cap-tracedetails dd,
+ cap-tracetimeline dd,
+ cap-traceplayback dd,
+ cap-traceactivity dd { margin: 0; overflow-wrap: anywhere; }
+        cap-traceinspector .trace-limit,
+        cap-traceflow .trace-limit,
+        cap-causaltrace .trace-limit,
+        cap-chronologicaltrace .trace-limit,
+        cap-tracedetails .trace-limit,
+        cap-tracetimeline .trace-limit,
+        cap-traceplayback .trace-limit,
+        cap-traceactivity .trace-limit { border-inline-start: 3px solid var(--cap-trace-warning, #ae6500); padding-inline-start: .7rem; }
+
+cap-traceinspector .trace-workbench { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: 1rem; }
+        cap-traceinspector .trace-stack { display: grid; gap: 1rem; min-width: 0; }
+        cap-traceinspector .trace-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .7fr); gap: 1rem; }
+        cap-traceinspector .trace-roots { display: grid; gap: .4rem; padding: 0; list-style: none; }
+        cap-traceinspector .trace-roots button { width: 100%; }
+        cap-traceinspector select { max-width: 18rem; }
+        @media (max-width: 900px) { cap-traceinspector .trace-workbench, cap-traceinspector .trace-columns { grid-template-columns: minmax(0, 1fr); } cap-traceinspector .trace-roots { max-height: 12rem; overflow: auto; } }
+
+cap-traceflow .trace-canvas { position: relative; }
+        cap-traceflow .trace-node { position: absolute; width: 218px; min-height: 100px; padding: .7rem; z-index: 1; border-inline-start: 4px solid var(--cap-trace-accent, #005bb8); }
+        cap-traceflow .trace-node[data-observed="false"] { border-style: dashed; border-inline-start-color: var(--cap-trace-muted, #526477); }
+        cap-traceflow .trace-node[data-observed="true"][data-reached="false"] { border-inline-start-color: var(--cap-trace-line, #cad4de); }
+        cap-traceflow .trace-node[aria-current="step"] { box-shadow: 0 0 0 3px var(--cap-trace-accent, #005bb8); }
+        cap-traceflow .trace-node strong { display: block; overflow-wrap: anywhere; }
+        cap-traceflow .trace-node span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        cap-traceflow .trace-edge { position: absolute; height: 0; border-top: 2px solid var(--cap-trace-accent, #005bb8); transform-origin: left center; }
+        cap-traceflow .trace-edge[data-observed="false"] { border-top-style: dashed; border-top-color: var(--cap-trace-muted, #526477); }
+        cap-traceflow .trace-edge[data-observed="true"][data-reached="false"] { border-top-color: var(--cap-trace-line, #cad4de); color: var(--cap-trace-line, #cad4de); }
+        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); }
+        cap-traceflow .trace-leaves { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
+
+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; }