@party-stack/ontology-devtools 0.6.2 → 0.7.0

package/lib/Tracing.js

@@ -0,0 +1,344 @@
+import { diagnosticSpans } from "./replicationActivity.js";
+import { diagnosticTargets, ms, useReplicaStatus, useTraceSpans } from "./diagnostics.js";
+import { QueryPills } from "./QueryPills.js";
+import { traceWaterfall } from "./traceWaterfall.js";
+import { isSubscription, operationRows, spanKey, spanSubtree, traceStatus } from "./traceTimeline.js";
+import { Box, ChevronDown, Database, Filter, Layers, Plug, Radio, RefreshCw, Send, Trash2, Workflow, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+//#region src/Tracing.tsx
+function Tracing({ ontology }) {
+	const targets = diagnosticTargets(ontology.diagnostics);
+	const [index, setIndex] = useState(() => ontology.diagnostics?.parent ? 1 : 0);
+	const target = targets[index] ?? targets[0];
+	return /* @__PURE__ */ jsx("div", {
+		className: "ps-diagnostics-screen",
+		"aria-label": "Tracing inspector",
+		children: /* @__PURE__ */ jsx(Timeline, {
+			diagnostics: target?.value,
+			traces: target ? target.value.traces : ontology.traces,
+			ontology,
+			source: targets.length > 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "ps-trace-source-select",
+				children: [/* @__PURE__ */ jsx("select", {
+					"aria-label": "Trace source",
+					value: index,
+					onChange: (event) => setIndex(Number(event.target.value)),
+					children: targets.map((item, key) => /* @__PURE__ */ jsx("option", {
+						value: key,
+						children: item.label
+					}, key))
+				}), /* @__PURE__ */ jsx(ChevronDown, {
+					size: 12,
+					"aria-hidden": true
+				})]
+			}) : /* @__PURE__ */ jsx("strong", { children: target?.label ?? "This tab" })
+		}, index)
+	});
+}
+function Timeline({ diagnostics, traces, ontology, source }) {
+	const { status, error } = useReplicaStatus(diagnostics);
+	const recorded = useTraceSpans(traces);
+	const incoming = useMemo(() => diagnosticSpans(recorded, status?.loads ?? []), [recorded, status?.loads]);
+	const [paused, pause] = useState();
+	const [now, setNow] = useState(() => Date.now());
+	const [selected, select] = useState();
+	const [all, showAll] = useState(false);
+	const [sort, setSort] = useState({
+		by: "startedAt",
+		desc: true
+	});
+	useEffect(() => {
+		if (paused) return;
+		const timer = setInterval(() => setNow(Date.now()), 250);
+		return () => clearInterval(timer);
+	}, [paused]);
+	const spans = paused?.spans ?? incoming;
+	const clock = paused?.now ?? now;
+	const loads = paused?.loads ?? status?.loads ?? [];
+	const requests = new Map(loads.filter((load) => load.spanId && load.traceId).map((load) => [`${load.traceId}:${load.spanId}`, load]));
+	const chart = useMemo(() => operationRows(spans, clock), [spans, clock]);
+	const groups = [];
+	for (const row of chart) {
+		if (!row.depth || !groups.length) groups.push([]);
+		groups[groups.length - 1].push(row);
+	}
+	groups.sort((a, b) => {
+		const left = a[0], right = b[0];
+		const diff = sort.by === "name" ? left.span.name.localeCompare(right.span.name) : sort.by === "status" ? left.span.outcome.localeCompare(right.span.outcome) : sort.by === "duration" ? left.durationMs - right.durationMs : left.span.startedAt - right.span.startedAt;
+		return (sort.desc ? -1 : 1) * diff;
+	});
+	const rows = groups.flatMap((group) => all ? group : group.slice(0, 1));
+	const current = selected ? spans.find((span) => spanKey(span) === spanKey(selected)) ?? selected : void 0;
+	const sortHeader = (by, title) => /* @__PURE__ */ jsx("th", {
+		className: by === "duration" ? "ps-trace-numeric" : void 0,
+		"aria-sort": sort.by === by ? sort.desc ? "descending" : "ascending" : "none",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setSort({
+				by,
+				desc: sort.by === by ? !sort.desc : by !== "name"
+			}),
+			children: [
+				by === "duration" && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: sort.by === by ? sort.desc ? "↓" : "↑" : "↕"
+				}),
+				/* @__PURE__ */ jsx("span", { children: title }),
+				by !== "duration" && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: sort.by === by ? sort.desc ? "↓" : "↑" : "↕"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("header", {
+			className: "ps-diagnostics-toolbar ps-trace-toolbar",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "ps-trace-source",
+					children: [/* @__PURE__ */ jsx("span", { children: "Source" }), source]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ps-trace-toolbar-separator",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: all,
+					onChange: (event) => showAll(event.target.checked)
+				}), "Child spans"] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "ps-trace-toolbar-separator",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-pressed": Boolean(paused),
+					onClick: () => {
+						if (paused) {
+							setNow(Date.now());
+							pause(void 0);
+						} else pause({
+							spans: incoming,
+							loads,
+							now: Date.now()
+						});
+					},
+					children: paused ? "Resume live" : "Pause"
+				})
+			]
+		}),
+		error && /* @__PURE__ */ jsxs("p", {
+			role: "alert",
+			className: "ps-replication-error",
+			children: [error, " · trace data may be stale"]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "ps-timeline-scroll ps-object-table-scroll",
+			"aria-label": "Tracing timeline viewport",
+			children: [/* @__PURE__ */ jsxs("table", {
+				className: "ps-timeline",
+				"aria-label": "Tracing timeline",
+				children: [
+					/* @__PURE__ */ jsxs("colgroup", { children: [
+						/* @__PURE__ */ jsx("col", { style: { width: 330 } }),
+						/* @__PURE__ */ jsx("col", { style: { width: 100 } }),
+						/* @__PURE__ */ jsx("col", { style: { width: 110 } }),
+						/* @__PURE__ */ jsx("col", { style: { width: 110 } }),
+						/* @__PURE__ */ jsx("col", { style: { width: 85 } }),
+						/* @__PURE__ */ jsx("col", {})
+					] }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						sortHeader("name", "Operation"),
+						sortHeader("status", "Status"),
+						sortHeader("startedAt", "Started"),
+						sortHeader("duration", "Duration"),
+						/* @__PURE__ */ jsx("th", {
+							className: "ps-trace-numeric",
+							title: "Recorded subscription lifecycle and invalidation events; not row updates, network frames or consumer counts",
+							children: "Events"
+						}),
+						/* @__PURE__ */ jsx("th", { "aria-hidden": true })
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+						const id = spanKey(row.span), subscription = isSubscription(row.span);
+						const request = requests.get(id);
+						return /* @__PURE__ */ jsxs("tr", {
+							"data-selected": current && spanKey(current) === id,
+							children: [
+								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "ps-timeline-name",
+									style: { paddingLeft: 10 + Math.min(row.depth, 8) * 12 },
+									title: row.span.name,
+									"aria-label": row.span.name,
+									onClick: () => select(row.span),
+									children: [
+										/* @__PURE__ */ jsx(ActivityIcon, { span: row.span }),
+										row.depth > 0 && /* @__PURE__ */ jsx("span", {
+											className: "ps-timeline-branch",
+											children: "↳"
+										}),
+										row.span.name,
+										request?.subset && /* @__PURE__ */ jsxs("small", { children: [" · ", request.subset.objectType] })
+									]
+								}) }),
+								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", {
+									className: "ps-trace-status",
+									"data-outcome": row.span.outcome,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "ps-trace-status-dot",
+										"aria-hidden": true
+									}), traceStatus(row.span)]
+								}) }),
+								/* @__PURE__ */ jsx("td", {
+									className: "ps-timeline-time",
+									children: new Date(row.span.startedAt).toLocaleTimeString()
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "ps-timeline-duration",
+									children: ms(row.durationMs)
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "ps-timeline-messages",
+									children: subscription && row.span.eventCount !== void 0 ? row.span.eventCount : "—"
+								}),
+								/* @__PURE__ */ jsx("td", { "aria-hidden": true })
+							]
+						}, id);
+					}) })
+				]
+			}), !rows.length && /* @__PURE__ */ jsx("p", {
+				className: "ps-replication-empty",
+				children: "No recorded operations."
+			})]
+		}),
+		current && /* @__PURE__ */ jsx(TraceDetails, {
+			span: current,
+			spans,
+			load: requests.get(spanKey(current)),
+			now: clock,
+			ontology,
+			onClose: () => select(void 0)
+		})
+	] });
+}
+function ActivityIcon({ span }) {
+	const operation = span.name.split(".").at(-1)?.toLowerCase() ?? "";
+	const Icon = operation === "collectgarbage" ? Trash2 : operation === "sync" || operation === "syncparent" ? RefreshCw : operation === "demand" ? Filter : operation.startsWith("watch") || isSubscription(span) ? Radio : operation.startsWith("connect") ? Plug : operation === "replay" || operation === "rebase" ? Layers : operation === "dispatch" || operation.startsWith("submit") || operation === "enqueue" ? Send : operation.startsWith("load") || operation.startsWith("read") || operation === "pullchanges" ? Database : operation === "make" || operation === "open" || operation === "view" ? Box : Workflow;
+	return /* @__PURE__ */ jsx(Icon, {
+		className: "ps-trace-icon",
+		"data-outcome": span.outcome,
+		"aria-hidden": true,
+		size: 13
+	});
+}
+function TraceDetails({ span, spans, load, now, ontology, onClose }) {
+	const object = ontology.ir.objectTypes.find((type) => type.name === load?.subset?.objectType);
+	const subscription = isSubscription(span);
+	const subtree = spanSubtree(spans, span);
+	const chart = traceWaterfall(subtree, now);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "ps-timeline-details",
+		"aria-label": "Trace details",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "ps-timeline-details-heading",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close trace details",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, { size: 14 })
+				}),
+				/* @__PURE__ */ jsx(ActivityIcon, { span }),
+				/* @__PURE__ */ jsx("strong", { children: span.name })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "ps-trace-detail-body",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "ps-timeline-attributes",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "ps-trace-status",
+							"data-outcome": span.outcome,
+							children: traceStatus(span)
+						}),
+						/* @__PURE__ */ jsx("span", { children: ms(span.outcome === "running" ? Math.max(0, now - span.startedAt) : span.durationMs) }),
+						load?.fetchedRows !== void 0 && /* @__PURE__ */ jsxs("span", { children: [load.fetchedRows, " fetched"] }),
+						load?.rows !== void 0 && /* @__PURE__ */ jsxs("span", { children: [load.rows, " returned"] }),
+						Object.entries(span.attributes).filter(([key]) => key !== "activity").map(([key, value]) => /* @__PURE__ */ jsxs("span", { children: [
+							key,
+							": ",
+							String(value)
+						] }, key))
+					]
+				}),
+				span.outcome === "interrupted" && /* @__PURE__ */ jsxs("p", {
+					className: "ps-trace-note",
+					children: [subscription ? "Subscription stopped" : "Operation cancelled", ": Effect was interrupted, for example when its consumer unsubscribes or its scope closes. No error was reported."]
+				}),
+				span.outcome === "failure" && /* @__PURE__ */ jsxs("p", {
+					className: "ps-replication-error",
+					children: [load?.error?.message ?? span.error?.message ?? "Effect failed; no error message was captured for this span.", span.error?.kind === "Defect" && " (unexpected defect)"]
+				}),
+				load?.subset && /* @__PURE__ */ jsx(QueryPills, {
+					query: load.subset.query,
+					object,
+					objectType: load.subset.objectType
+				}),
+				subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("h4", { children: ["Events ", /* @__PURE__ */ jsx("span", { children: span.eventCount ?? 0 })] }),
+					(span.eventCount ?? 0) > (span.events?.length ?? 0) && /* @__PURE__ */ jsxs("p", {
+						className: "ps-trace-note",
+						children: [
+							"Latest ",
+							span.events?.length,
+							" events"
+						]
+					}),
+					/* @__PURE__ */ jsxs("table", {
+						className: "ps-trace-messages",
+						"aria-label": "Subscription events",
+						children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", { children: "Time" }), /* @__PURE__ */ jsx("th", { children: "Event" })] }) }), /* @__PURE__ */ jsx("tbody", { children: span.events?.map((event, index) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { children: new Date(event.at).toLocaleTimeString() }), /* @__PURE__ */ jsx("td", { children: event.name.replace("replica.", "") })] }, index)) })]
+					}),
+					!span.events?.length && /* @__PURE__ */ jsx("p", {
+						className: "ps-trace-note",
+						children: "No events recorded."
+					})
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h4", { children: "Waterfall" }), /* @__PURE__ */ jsx("table", {
+					className: "ps-trace-waterfall",
+					"aria-label": "Operation waterfall",
+					children: /* @__PURE__ */ jsx("tbody", { children: chart.rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("td", {
+							style: { paddingLeft: row.depth * 10 },
+							title: row.span.name,
+							children: row.span.name
+						}),
+						/* @__PURE__ */ jsx("td", {
+							"aria-label": `${ms(row.offset)} after start, ${ms(row.duration)} duration`,
+							children: /* @__PURE__ */ jsx("div", {
+								className: "ps-timeline-hit",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "ps-timeline-bar",
+									"data-outcome": row.span.outcome,
+									style: {
+										left: `${row.offset / chart.duration * 100}%`,
+										width: `${row.duration / chart.duration * 100}%`
+									}
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("td", { children: ms(row.duration) })
+					] }, row.span.id)) })
+				})] })
+			]
+		})]
+	});
+}
+//#endregion
+export { Tracing };
+
+//# sourceMappingURL=Tracing.js.map

package/lib/Tracing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tracing.js","names":[],"sources":["../src/Tracing.tsx"],"sourcesContent":["import {\n    Box,\n    ChevronDown,\n    Database,\n    Filter,\n    Layers,\n    Plug,\n    Radio,\n    RefreshCw,\n    Send,\n    Trash2,\n    Workflow,\n    X,\n} from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { diagnosticTargets, ms, useReplicaStatus, useTraceSpans } from \"./diagnostics.js\";\nimport { QueryPills } from \"./QueryPills.js\";\nimport { diagnosticSpans } from \"./replicationActivity.js\";\nimport { operationRows, spanKey, spanSubtree, isSubscription, traceStatus } from \"./traceTimeline.js\";\nimport { traceWaterfall } from \"./traceWaterfall.js\";\nimport type { Diagnostics, Load } from \"./diagnostics.js\";\nimport type { PerformanceSpan } from \"./traceWaterfall.js\";\nimport type { LiveOntology } from \"@party-stack/ontology\";\n\ntype Sort = \"name\" | \"startedAt\" | \"duration\" | \"status\";\nexport function Tracing({ ontology }: { ontology: LiveOntology }) {\n    const targets = diagnosticTargets(ontology.diagnostics);\n    const [index, setIndex] = useState(() => (ontology.diagnostics?.parent ? 1 : 0));\n    const target = targets[index] ?? targets[0];\n    return (\n        <div className=\"ps-diagnostics-screen\" aria-label=\"Tracing inspector\">\n            <Timeline\n                key={index}\n                diagnostics={target?.value}\n                traces={target ? target.value.traces : ontology.traces}\n                ontology={ontology}\n                source={\n                    targets.length > 1 ? (\n                        <span className=\"ps-trace-source-select\">\n                            <select\n                                aria-label=\"Trace source\"\n                                value={index}\n                                onChange={(event) => setIndex(Number(event.target.value))}\n                            >\n                                {targets.map((item, key) => (\n                                    <option value={key} key={key}>\n                                        {item.label}\n                                    </option>\n                                ))}\n                            </select>\n                            <ChevronDown size={12} aria-hidden />\n                        </span>\n                    ) : (\n                        <strong>{target?.label ?? \"This tab\"}</strong>\n                    )\n                }\n            />\n        </div>\n    );\n}\nfunction Timeline({\n    diagnostics,\n    traces,\n    ontology,\n    source,\n}: {\n    diagnostics?: Diagnostics;\n    traces?: LiveOntology[\"traces\"];\n    ontology: LiveOntology;\n    source: React.ReactNode;\n}) {\n    const { status, error } = useReplicaStatus(diagnostics);\n    const recorded = useTraceSpans(traces);\n    const incoming = useMemo(() => diagnosticSpans(recorded, status?.loads ?? []), [recorded, status?.loads]);\n    const [paused, pause] = useState<{\n        spans: readonly PerformanceSpan[];\n        loads: readonly Load[];\n        now: number;\n    }>();\n    const [now, setNow] = useState(() => Date.now());\n    const [selected, select] = useState<PerformanceSpan>();\n    const [all, showAll] = useState(false);\n    const [sort, setSort] = useState<{ by: Sort; desc: boolean }>({ by: \"startedAt\", desc: true });\n    useEffect(() => {\n        if (paused) return;\n        const timer = setInterval(() => setNow(Date.now()), 250);\n        return () => clearInterval(timer);\n    }, [paused]);\n    const spans = paused?.spans ?? incoming;\n    const clock = paused?.now ?? now;\n    const loads = paused?.loads ?? status?.loads ?? [];\n    const requests = new Map(\n        loads\n            .filter((load) => load.spanId && load.traceId)\n            .map((load) => [`${load.traceId}:${load.spanId}`, load])\n    );\n    const chart = useMemo(() => operationRows(spans, clock), [spans, clock]);\n    const groups: (typeof chart)[] = [];\n    for (const row of chart) {\n        if (!row.depth || !groups.length) groups.push([]);\n        groups[groups.length - 1]!.push(row);\n    }\n    groups.sort((a, b) => {\n        const left = a[0]!,\n            right = b[0]!;\n        const diff =\n            sort.by === \"name\"\n                ? left.span.name.localeCompare(right.span.name)\n                : sort.by === \"status\"\n                  ? left.span.outcome.localeCompare(right.span.outcome)\n                  : sort.by === \"duration\"\n                    ? left.durationMs - right.durationMs\n                    : left.span.startedAt - right.span.startedAt;\n        return (sort.desc ? -1 : 1) * diff;\n    });\n    const rows = groups.flatMap((group) => (all ? group : group.slice(0, 1)));\n    const current = selected\n        ? (spans.find((span) => spanKey(span) === spanKey(selected)) ?? selected)\n        : undefined;\n    const sortHeader = (by: Sort, title: string) => (\n        <th\n            className={by === \"duration\" ? \"ps-trace-numeric\" : undefined}\n            aria-sort={sort.by === by ? (sort.desc ? \"descending\" : \"ascending\") : \"none\"}\n        >\n            <button\n                type=\"button\"\n                onClick={() => setSort({ by, desc: sort.by === by ? !sort.desc : by !== \"name\" })}\n            >\n                {by === \"duration\" && (\n                    <span aria-hidden>{sort.by === by ? (sort.desc ? \"↓\" : \"↑\") : \"↕\"}</span>\n                )}\n                <span>{title}</span>\n                {by !== \"duration\" && (\n                    <span aria-hidden>{sort.by === by ? (sort.desc ? \"↓\" : \"↑\") : \"↕\"}</span>\n                )}\n            </button>\n        </th>\n    );\n    return (\n        <>\n            <header className=\"ps-diagnostics-toolbar ps-trace-toolbar\">\n                <div className=\"ps-trace-source\">\n                    <span>Source</span>\n                    {source}\n                </div>\n                <span className=\"ps-trace-toolbar-separator\" aria-hidden />\n                <label>\n                    <input\n                        type=\"checkbox\"\n                        checked={all}\n                        onChange={(event) => showAll(event.target.checked)}\n                    />\n                    Child spans\n                </label>\n                <span className=\"ps-trace-toolbar-separator\" aria-hidden />\n                <button\n                    type=\"button\"\n                    aria-pressed={Boolean(paused)}\n                    onClick={() => {\n                        if (paused) {\n                            setNow(Date.now());\n                            pause(undefined);\n                        } else pause({ spans: incoming, loads, now: Date.now() });\n                    }}\n                >\n                    {paused ? \"Resume live\" : \"Pause\"}\n                </button>\n            </header>\n            {error && (\n                <p role=\"alert\" className=\"ps-replication-error\">\n                    {error} · trace data may be stale\n                </p>\n            )}\n            <div className=\"ps-timeline-scroll ps-object-table-scroll\" aria-label=\"Tracing timeline viewport\">\n                <table className=\"ps-timeline\" aria-label=\"Tracing timeline\">\n                    <colgroup>\n                        <col style={{ width: 330 }} />\n                        <col style={{ width: 100 }} />\n                        <col style={{ width: 110 }} />\n                        <col style={{ width: 110 }} />\n                        <col style={{ width: 85 }} />\n                        <col />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            {sortHeader(\"name\", \"Operation\")}\n                            {sortHeader(\"status\", \"Status\")}\n                            {sortHeader(\"startedAt\", \"Started\")}\n                            {sortHeader(\"duration\", \"Duration\")}\n                            <th\n                                className=\"ps-trace-numeric\"\n                                title=\"Recorded subscription lifecycle and invalidation events; not row updates, network frames or consumer counts\"\n                            >\n                                Events\n                            </th>\n                            <th aria-hidden />\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {rows.map((row) => {\n                            const id = spanKey(row.span),\n                                subscription = isSubscription(row.span);\n                            const request = requests.get(id);\n                            return (\n                                <tr key={id} data-selected={current && spanKey(current) === id}>\n                                    <td>\n                                        <button\n                                            type=\"button\"\n                                            className=\"ps-timeline-name\"\n                                            style={{ paddingLeft: 10 + Math.min(row.depth, 8) * 12 }}\n                                            title={row.span.name}\n                                            aria-label={row.span.name}\n                                            onClick={() => select(row.span)}\n                                        >\n                                            <ActivityIcon span={row.span} />\n                                            {row.depth > 0 && <span className=\"ps-timeline-branch\">↳</span>}\n                                            {row.span.name}\n                                            {request?.subset && <small> · {request.subset.objectType}</small>}\n                                        </button>\n                                    </td>\n                                    <td>\n                                        <span className=\"ps-trace-status\" data-outcome={row.span.outcome}>\n                                            <span className=\"ps-trace-status-dot\" aria-hidden />\n                                            {traceStatus(row.span)}\n                                        </span>\n                                    </td>\n                                    <td className=\"ps-timeline-time\">\n                                        {new Date(row.span.startedAt).toLocaleTimeString()}\n                                    </td>\n                                    <td className=\"ps-timeline-duration\">{ms(row.durationMs)}</td>\n                                    <td className=\"ps-timeline-messages\">\n                                        {subscription && row.span.eventCount !== undefined\n                                            ? row.span.eventCount\n                                            : \"—\"}\n                                    </td>\n                                    <td aria-hidden />\n                                </tr>\n                            );\n                        })}\n                    </tbody>\n                </table>\n                {!rows.length && <p className=\"ps-replication-empty\">No recorded operations.</p>}\n            </div>\n            {current && (\n                <TraceDetails\n                    span={current}\n                    spans={spans}\n                    load={requests.get(spanKey(current))}\n                    now={clock}\n                    ontology={ontology}\n                    onClose={() => select(undefined)}\n                />\n            )}\n        </>\n    );\n}\nfunction ActivityIcon({ span }: { span: PerformanceSpan }) {\n    const operation = span.name.split(\".\").at(-1)?.toLowerCase() ?? \"\";\n    const Icon =\n        operation === \"collectgarbage\"\n            ? Trash2\n            : operation === \"sync\" || operation === \"syncparent\"\n              ? RefreshCw\n              : operation === \"demand\"\n                ? Filter\n                : operation.startsWith(\"watch\") || isSubscription(span)\n                  ? Radio\n                  : operation.startsWith(\"connect\")\n                    ? Plug\n                    : operation === \"replay\" || operation === \"rebase\"\n                      ? Layers\n                      : operation === \"dispatch\" || operation.startsWith(\"submit\") || operation === \"enqueue\"\n                        ? Send\n                        : operation.startsWith(\"load\") ||\n                            operation.startsWith(\"read\") ||\n                            operation === \"pullchanges\"\n                          ? Database\n                          : operation === \"make\" || operation === \"open\" || operation === \"view\"\n                            ? Box\n                            : Workflow;\n    return <Icon className=\"ps-trace-icon\" data-outcome={span.outcome} aria-hidden size={13} />;\n}\nfunction TraceDetails({\n    span,\n    spans,\n    load,\n    now,\n    ontology,\n    onClose,\n}: {\n    span: PerformanceSpan;\n    spans: readonly PerformanceSpan[];\n    load?: Load;\n    now: number;\n    ontology: LiveOntology;\n    onClose: () => void;\n}) {\n    const object = ontology.ir.objectTypes.find((type) => type.name === load?.subset?.objectType);\n    const subscription = isSubscription(span);\n    const subtree = spanSubtree(spans, span);\n    const chart = traceWaterfall(subtree, now);\n    return (\n        <aside className=\"ps-timeline-details\" aria-label=\"Trace details\">\n            <div className=\"ps-timeline-details-heading\">\n                <button type=\"button\" aria-label=\"Close trace details\" onClick={onClose}>\n                    <X size={14} />\n                </button>\n                <ActivityIcon span={span} />\n                <strong>{span.name}</strong>\n            </div>\n            <div className=\"ps-trace-detail-body\">\n                <div className=\"ps-timeline-attributes\">\n                    <span className=\"ps-trace-status\" data-outcome={span.outcome}>\n                        {traceStatus(span)}\n                    </span>\n                    <span>\n                        {ms(span.outcome === \"running\" ? Math.max(0, now - span.startedAt) : span.durationMs)}\n                    </span>\n                    {load?.fetchedRows !== undefined && <span>{load.fetchedRows} fetched</span>}\n                    {load?.rows !== undefined && <span>{load.rows} returned</span>}\n                    {Object.entries(span.attributes)\n                        .filter(([key]) => key !== \"activity\")\n                        .map(([key, value]) => (\n                            <span key={key}>\n                                {key}: {String(value)}\n                            </span>\n                        ))}\n                </div>\n                {span.outcome === \"interrupted\" && (\n                    <p className=\"ps-trace-note\">\n                        {subscription ? \"Subscription stopped\" : \"Operation cancelled\"}: Effect was\n                        interrupted, for example when its consumer unsubscribes or its scope closes. No error\n                        was reported.\n                    </p>\n                )}\n                {span.outcome === \"failure\" && (\n                    <p className=\"ps-replication-error\">\n                        {load?.error?.message ??\n                            span.error?.message ??\n                            \"Effect failed; no error message was captured for this span.\"}\n                        {span.error?.kind === \"Defect\" && \" (unexpected defect)\"}\n                    </p>\n                )}\n                {load?.subset && (\n                    <QueryPills\n                        query={load.subset.query}\n                        object={object}\n                        objectType={load.subset.objectType}\n                    />\n                )}\n                {subscription ? (\n                    <>\n                        <h4>\n                            Events <span>{span.eventCount ?? 0}</span>\n                        </h4>\n                        {(span.eventCount ?? 0) > (span.events?.length ?? 0) && (\n                            <p className=\"ps-trace-note\">Latest {span.events?.length} events</p>\n                        )}\n                        <table className=\"ps-trace-messages\" aria-label=\"Subscription events\">\n                            <thead>\n                                <tr>\n                                    <th>Time</th>\n                                    <th>Event</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                {span.events?.map((event, index) => (\n                                    <tr key={index}>\n                                        <td>{new Date(event.at).toLocaleTimeString()}</td>\n                                        <td>{event.name.replace(\"replica.\", \"\")}</td>\n                                    </tr>\n                                ))}\n                            </tbody>\n                        </table>\n                        {!span.events?.length && <p className=\"ps-trace-note\">No events recorded.</p>}\n                    </>\n                ) : (\n                    <>\n                        <h4>Waterfall</h4>\n                        <table className=\"ps-trace-waterfall\" aria-label=\"Operation waterfall\">\n                            <tbody>\n                                {chart.rows.map((row) => (\n                                    <tr key={row.span.id}>\n                                        <td style={{ paddingLeft: row.depth * 10 }} title={row.span.name}>\n                                            {row.span.name}\n                                        </td>\n                                        <td\n                                            aria-label={`${ms(row.offset)} after start, ${ms(row.duration)} duration`}\n                                        >\n                                            <div className=\"ps-timeline-hit\">\n                                                <span\n                                                    className=\"ps-timeline-bar\"\n                                                    data-outcome={row.span.outcome}\n                                                    style={{\n                                                        left: `${(row.offset / chart.duration) * 100}%`,\n                                                        width: `${(row.duration / chart.duration) * 100}%`,\n                                                    }}\n                                                />\n                                            </div>\n                                        </td>\n                                        <td>{ms(row.duration)}</td>\n                                    </tr>\n                                ))}\n                            </tbody>\n                        </table>\n                    </>\n                )}\n            </div>\n        </aside>\n    );\n}\n"],"mappings":"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"}

package/lib/attribution/Highlight.d.ts

@@ -0,0 +1,9 @@
+import { DemandOwner } from "./registry.js";
+//#region src/attribution/Highlight.d.ts
+export declare function ownerElements(owners: readonly DemandOwner[], root?: ParentNode): HTMLElement[];
+export declare function revealDemandOwners(owners: readonly DemandOwner[]): void;
+export declare function DemandHighlight({ owners }: {
+  owners: readonly DemandOwner[];
+}): import("react").ReactPortal | null;
+//#endregion
+//# sourceMappingURL=Highlight.d.ts.map

package/lib/attribution/Highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.d.ts","names":[],"sources":["../../src/attribution/Highlight.tsx"],"mappings":";;wBAKgB,cAAc,iBAAiB,eAAe,OAAM,aAAwB;wBAgB5E,mBAAmB,iBAAiB;wBAqBpC,kBAAkB;EAAY,iBAAiB;oBAAe"}

package/lib/attribution/Highlight.js

@@ -0,0 +1,73 @@
+import { usePanelPortal } from "../PanelBoundary.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/attribution/Highlight.tsx
+function ownerElements(owners, root = document) {
+	const ids = new Set(owners.map((owner) => owner.id));
+	const panels = [...root.querySelectorAll("[data-ps-devtools]")];
+	const candidates = [...root.querySelectorAll("[data-ps-demand-owner]")].filter((element) => ids.has(element.dataset.psDemandOwner ?? "") && !element.closest("[data-ps-devtools]") && !panels.some((panel) => element.contains(panel)));
+	const selected = new Set(candidates);
+	return candidates.filter((element) => {
+		for (let parent = element.parentElement; parent; parent = parent.parentElement) if (selected.has(parent)) return false;
+		return true;
+	});
+}
+function revealDemandOwners(owners) {
+	const elements = ownerElements(owners);
+	(elements.find((element) => {
+		const rect = element.getBoundingClientRect();
+		return rect.bottom < 0 || rect.top > window.innerHeight;
+	}) ?? elements[0])?.scrollIntoView({
+		block: "center",
+		inline: "nearest",
+		behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+	});
+}
+function DemandHighlight({ owners }) {
+	const portal = usePanelPortal();
+	const [boxes, setBoxes] = useState([]);
+	useEffect(() => {
+		if (!owners.length) return;
+		let frame;
+		const measure = () => {
+			const next = ownerElements(owners).flatMap((element, index) => {
+				const rect = element.getBoundingClientRect();
+				if (!rect.width || !rect.height || rect.bottom <= 0 || rect.top >= window.innerHeight) return [];
+				return [{
+					id: `${element.dataset.psDemandOwner}:${index}`,
+					name: owners.find((owner) => owner.id === element.dataset.psDemandOwner).name,
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				}];
+			});
+			setBoxes((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+			frame = requestAnimationFrame(measure);
+		};
+		frame = requestAnimationFrame(measure);
+		return () => cancelAnimationFrame(frame);
+	}, [owners]);
+	if (!owners.length || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "ps-demand-highlights",
+		"data-ps-demand-highlights": true,
+		"aria-hidden": true,
+		children: boxes.map((box) => /* @__PURE__ */ jsx("div", {
+			className: "ps-demand-highlight",
+			"data-owner-id": box.id,
+			style: {
+				left: box.left,
+				top: box.top,
+				width: box.width,
+				height: box.height
+			},
+			children: /* @__PURE__ */ jsx("span", { children: box.name })
+		}, box.id))
+	}), portal ?? document.body);
+}
+//#endregion
+export { DemandHighlight, ownerElements, revealDemandOwners };
+
+//# sourceMappingURL=Highlight.js.map

package/lib/attribution/Highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.js","names":[],"sources":["../../src/attribution/Highlight.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePanelPortal } from \"../PanelBoundary.js\";\nimport type { DemandOwner } from \"./registry.js\";\n\nexport function ownerElements(owners: readonly DemandOwner[], root: ParentNode = document): HTMLElement[] {\n    const ids = new Set(owners.map((owner) => owner.id));\n    const panels = [...root.querySelectorAll(\"[data-ps-devtools]\")];\n    const candidates = [...root.querySelectorAll<HTMLElement>(\"[data-ps-demand-owner]\")].filter(\n        (element) =>\n            ids.has(element.dataset.psDemandOwner ?? \"\") &&\n            !element.closest(\"[data-ps-devtools]\") &&\n            !panels.some((panel) => element.contains(panel))\n    );\n    const selected = new Set(candidates);\n    return candidates.filter((element) => {\n        for (let parent = element.parentElement; parent; parent = parent.parentElement)\n            if (selected.has(parent)) return false;\n        return true;\n    });\n}\nexport function revealDemandOwners(owners: readonly DemandOwner[]) {\n    const elements = ownerElements(owners);\n    const target =\n        elements.find((element) => {\n            const rect = element.getBoundingClientRect();\n            return rect.bottom < 0 || rect.top > window.innerHeight;\n        }) ?? elements[0];\n    target?.scrollIntoView({\n        block: \"center\",\n        inline: \"nearest\",\n        behavior: window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"instant\" : \"smooth\",\n    });\n}\ninterface Box {\n    id: string;\n    name: string;\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n}\nexport function DemandHighlight({ owners }: { owners: readonly DemandOwner[] }) {\n    const portal = usePanelPortal();\n    const [boxes, setBoxes] = useState<readonly Box[]>([]);\n    useEffect(() => {\n        if (!owners.length) return;\n        let frame: number;\n        const measure = () => {\n            const next = ownerElements(owners).flatMap((element, index) => {\n                const rect = element.getBoundingClientRect();\n                if (!rect.width || !rect.height || rect.bottom <= 0 || rect.top >= window.innerHeight)\n                    return [];\n                return [\n                    {\n                        id: `${element.dataset.psDemandOwner}:${index}`,\n                        name: owners.find((owner) => owner.id === element.dataset.psDemandOwner)!.name,\n                        left: rect.left,\n                        top: rect.top,\n                        width: rect.width,\n                        height: rect.height,\n                    },\n                ];\n            });\n            setBoxes((current) => (JSON.stringify(current) === JSON.stringify(next) ? current : next));\n            frame = requestAnimationFrame(measure);\n        };\n        frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [owners]);\n    if (!owners.length || typeof document === \"undefined\") return null;\n    return createPortal(\n        <div className=\"ps-demand-highlights\" data-ps-demand-highlights aria-hidden>\n            {boxes.map((box) => (\n                <div\n                    className=\"ps-demand-highlight\"\n                    key={box.id}\n                    data-owner-id={box.id}\n                    style={{ left: box.left, top: box.top, width: box.width, height: box.height }}\n                >\n                    <span>{box.name}</span>\n                </div>\n            ))}\n        </div>,\n        portal ?? document.body\n    );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,QAAgC,OAAmB,UAAyB;CACtG,MAAM,MAAM,IAAI,IAAI,OAAO,KAAK,UAAU,MAAM,EAAE,CAAC;CACnD,MAAM,SAAS,CAAC,GAAG,KAAK,iBAAiB,oBAAoB,CAAC;CAC9D,MAAM,aAAa,CAAC,GAAG,KAAK,iBAA8B,wBAAwB,CAAC,CAAC,CAAC,QAChF,YACG,IAAI,IAAI,QAAQ,QAAQ,iBAAiB,EAAE,KAC3C,CAAC,QAAQ,QAAQ,oBAAoB,KACrC,CAAC,OAAO,MAAM,UAAU,QAAQ,SAAS,KAAK,CAAC,CACvD;CACA,MAAM,WAAW,IAAI,IAAI,UAAU;CACnC,OAAO,WAAW,QAAQ,YAAY;EAClC,KAAK,IAAI,SAAS,QAAQ,eAAe,QAAQ,SAAS,OAAO,eAC7D,IAAI,SAAS,IAAI,MAAM,GAAG,OAAO;EACrC,OAAO;CACX,CAAC;AACL;AACA,SAAgB,mBAAmB,QAAgC;CAC/D,MAAM,WAAW,cAAc,MAAM;CAMrC,CAJI,SAAS,MAAM,YAAY;EACvB,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,OAAO,KAAK,SAAS,KAAK,KAAK,MAAM,OAAO;CAChD,CAAC,KAAK,SAAS,GAAA,EACX,eAAe;EACnB,OAAO;EACP,QAAQ;EACR,UAAU,OAAO,WAAW,kCAAkC,CAAC,CAAC,UAAU,YAAY;CAC1F,CAAC;AACL;AASA,SAAgB,gBAAgB,EAAE,UAA8C;CAC5E,MAAM,SAAS,eAAe;CAC9B,MAAM,CAAC,OAAO,YAAY,SAAyB,CAAC,CAAC;CACrD,gBAAgB;EACZ,IAAI,CAAC,OAAO,QAAQ;EACpB,IAAI;EACJ,MAAM,gBAAgB;GAClB,MAAM,OAAO,cAAc,MAAM,CAAC,CAAC,SAAS,SAAS,UAAU;IAC3D,MAAM,OAAO,QAAQ,sBAAsB;IAC3C,IAAI,CAAC,KAAK,SAAS,CAAC,KAAK,UAAU,KAAK,UAAU,KAAK,KAAK,OAAO,OAAO,aACtE,OAAO,CAAC;IACZ,OAAO,CACH;KACI,IAAI,GAAG,QAAQ,QAAQ,cAAc,GAAG;KACxC,MAAM,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,QAAQ,aAAa,CAAC,CAAE;KAC1E,MAAM,KAAK;KACX,KAAK,KAAK;KACV,OAAO,KAAK;KACZ,QAAQ,KAAK;IACjB,CACJ;GACJ,CAAC;GACD,UAAU,YAAa,KAAK,UAAU,OAAO,MAAM,KAAK,UAAU,IAAI,IAAI,UAAU,IAAK;GACzF,QAAQ,sBAAsB,OAAO;EACzC;EACA,QAAQ,sBAAsB,OAAO;EACrC,aAAa,qBAAqB,KAAK;CAC3C,GAAG,CAAC,MAAM,CAAC;CACX,IAAI,CAAC,OAAO,UAAU,OAAO,aAAa,aAAa,OAAO;CAC9D,OAAO,aACH,oBAAC,OAAD;EAAK,WAAU;EAAuB,6BAAA;EAA0B,eAAA;EAC3D,UAAA,MAAM,KAAK,QACR,oBAAC,OAAD;GACI,WAAU;GAEV,iBAAe,IAAI;GACnB,OAAO;IAAE,MAAM,IAAI;IAAM,KAAK,IAAI;IAAK,OAAO,IAAI;IAAO,QAAQ,IAAI;GAAO;GAE5E,UAAA,oBAAC,QAAD,EAAA,UAAO,IAAI,KAAW,CAAA;EACrB,GALI,IAAI,EAKR,CACR;CACA,CAAA,GACL,UAAU,SAAS,IACvB;AACJ"}

package/lib/attribution/index.d.ts

@@ -0,0 +1,12 @@
+import { DemandOwner } from "./registry.js";
+//#region src/attribution/index.d.ts
+/** Injected by the development-only Vite plugin. IDs distinguish mounted instances. */
+export declare function useDemandOwner(name: string, source: string): DemandOwner;
+/** Preserve the hook's result and query identity; register only committed consumers. */
+export declare function useDemandQuery<A extends {
+  readonly collection?: object;
+}>(owner: DemandOwner, result: A): A;
+/** Singular fragments return their selected value, including an absent row. */
+export declare function useDemandFragment<A>(owner: DemandOwner, result: A, collection: object): A;
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/lib/attribution/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/attribution/index.ts"],"mappings":";;;wBAIgB,eAAe,cAAc,iBAAiB;;wBAK9C,eAAe;WAAqB;GAAuB,OAAO,aAAa,QAAQ,IAAI;;wBAO3F,kBAAkB,GAAG,OAAO,aAAa,QAAQ,GAAG,qBAAqB"}

package/lib/attribution/index.js

@@ -0,0 +1,31 @@
+import { registerQueryConsumer } from "./registry.js";
+import { useEffect, useId, useMemo } from "react";
+//#region src/attribution/index.ts
+/** Injected by the development-only Vite plugin. IDs distinguish mounted instances. */
+function useDemandOwner(name, source) {
+	const id = useId();
+	return useMemo(() => ({
+		id,
+		name,
+		source
+	}), [
+		id,
+		name,
+		source
+	]);
+}
+/** Preserve the hook's result and query identity; register only committed consumers. */
+function useDemandQuery(owner, result) {
+	const collection = result.collection;
+	useEffect(() => collection ? registerQueryConsumer(owner, collection) : void 0, [owner, collection]);
+	return result;
+}
+/** Singular fragments return their selected value, including an absent row. */
+function useDemandFragment(owner, result, collection) {
+	useEffect(() => registerQueryConsumer(owner, collection), [owner, collection]);
+	return result;
+}
+//#endregion
+export { useDemandFragment, useDemandOwner, useDemandQuery };
+
+//# sourceMappingURL=index.js.map

package/lib/attribution/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/attribution/index.ts"],"sourcesContent":["import { useEffect, useId, useMemo } from \"react\";\nimport { registerQueryConsumer, type DemandOwner } from \"./registry.js\";\n\n/** Injected by the development-only Vite plugin. IDs distinguish mounted instances. */\nexport function useDemandOwner(name: string, source: string): DemandOwner {\n    const id = useId();\n    return useMemo(() => ({ id, name, source }), [id, name, source]);\n}\n/** Preserve the hook's result and query identity; register only committed consumers. */\nexport function useDemandQuery<A extends { readonly collection?: object }>(owner: DemandOwner, result: A): A {\n    const collection = result.collection;\n    useEffect(() => (collection ? registerQueryConsumer(owner, collection) : undefined), [owner, collection]);\n    return result;\n}\n\n/** Singular fragments return their selected value, including an absent row. */\nexport function useDemandFragment<A>(owner: DemandOwner, result: A, collection: object): A {\n    useEffect(() => registerQueryConsumer(owner, collection), [owner, collection]);\n    return result;\n}\n"],"mappings":";;;;AAIA,SAAgB,eAAe,MAAc,QAA6B;CACtE,MAAM,KAAK,MAAM;CACjB,OAAO,eAAe;EAAE;EAAI;EAAM;CAAO,IAAI;EAAC;EAAI;EAAM;CAAM,CAAC;AACnE;;AAEA,SAAgB,eAA2D,OAAoB,QAAc;CACzG,MAAM,aAAa,OAAO;CAC1B,gBAAiB,aAAa,sBAAsB,OAAO,UAAU,IAAI,KAAA,GAAY,CAAC,OAAO,UAAU,CAAC;CACxG,OAAO;AACX;;AAGA,SAAgB,kBAAqB,OAAoB,QAAW,YAAuB;CACvF,gBAAgB,sBAAsB,OAAO,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC;CAC7E,OAAO;AACX"}

package/lib/attribution/registry.d.ts

@@ -0,0 +1,16 @@
+//#region src/attribution/registry.d.ts
+export interface DemandOwner {
+  readonly id: string;
+  readonly name: string;
+  readonly source: string;
+}
+export interface QueryConsumer {
+  readonly owner: DemandOwner;
+  readonly collection: object;
+}
+export declare function registerQueryConsumer(owner: DemandOwner, collection: object): () => void;
+export declare const queryConsumers: () => QueryConsumer[];
+export declare const attributionRevision: () => number;
+export declare function subscribeAttribution(listener: () => void): () => void;
+//#endregion
+//# sourceMappingURL=registry.d.ts.map

package/lib/attribution/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","names":[],"sources":["../../src/attribution/registry.ts"],"mappings":";iBAAiB;WACJ;WACA;WACA;;iBAEI;WACJ,OAAO;WACP;;wBASG,sBAAsB,OAAO,aAAa;qBAQ7C,sBAAc;qBACd;wBACG,qBAAqB"}

package/lib/attribution/registry.js

@@ -0,0 +1,31 @@
+//#region src/attribution/registry.ts
+const consumers = /* @__PURE__ */ new Set();
+const listeners = /* @__PURE__ */ new Set();
+let revision = 0;
+const changed = () => {
+	revision++;
+	for (const listener of listeners) listener();
+};
+function registerQueryConsumer(owner, collection) {
+	const consumer = {
+		owner,
+		collection
+	};
+	consumers.add(consumer);
+	changed();
+	return () => {
+		if (consumers.delete(consumer)) changed();
+	};
+}
+const queryConsumers = () => [...consumers];
+const attributionRevision = () => revision;
+function subscribeAttribution(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+//#endregion
+export { attributionRevision, queryConsumers, registerQueryConsumer, subscribeAttribution };
+
+//# sourceMappingURL=registry.js.map

package/lib/attribution/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../../src/attribution/registry.ts"],"sourcesContent":["export interface DemandOwner {\n    readonly id: string;\n    readonly name: string;\n    readonly source: string;\n}\nexport interface QueryConsumer {\n    readonly owner: DemandOwner;\n    readonly collection: object;\n}\nconst consumers = new Set<QueryConsumer>();\nconst listeners = new Set<() => void>();\nlet revision = 0;\nconst changed = () => {\n    revision++;\n    for (const listener of listeners) listener();\n};\nexport function registerQueryConsumer(owner: DemandOwner, collection: object) {\n    const consumer = { owner, collection };\n    consumers.add(consumer);\n    changed();\n    return () => {\n        if (consumers.delete(consumer)) changed();\n    };\n}\nexport const queryConsumers = () => [...consumers];\nexport const attributionRevision = () => revision;\nexport function subscribeAttribution(listener: () => void) {\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n    };\n}\n"],"mappings":";AASA,MAAM,4BAAY,IAAI,IAAmB;AACzC,MAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,WAAW;AACf,MAAM,gBAAgB;CAClB;CACA,KAAK,MAAM,YAAY,WAAW,SAAS;AAC/C;AACA,SAAgB,sBAAsB,OAAoB,YAAoB;CAC1E,MAAM,WAAW;EAAE;EAAO;CAAW;CACrC,UAAU,IAAI,QAAQ;CACtB,QAAQ;CACR,aAAa;EACT,IAAI,UAAU,OAAO,QAAQ,GAAG,QAAQ;CAC5C;AACJ;AACA,MAAa,uBAAuB,CAAC,GAAG,SAAS;AACjD,MAAa,4BAA4B;AACzC,SAAgB,qBAAqB,UAAsB;CACvD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;CAC7B;AACJ"}

package/lib/attribution/tanstack.d.ts

@@ -0,0 +1,11 @@
+import { ReplicationDemand } from "../replicationActivity.js";
+import { DemandOwner } from "./registry.js";
+import { CollectionDemandDiagnostic } from "@party-stack/ontology/tanstack";
+//#region src/attribution/tanstack.d.ts
+export declare function queryDemandGraph(collection: object): readonly (CollectionDemandDiagnostic & {
+  collection: object;
+})[];
+export declare function demandOwners(demand: Pick<ReplicationDemand, "objectType" | "query">, sources: readonly object[]): readonly DemandOwner[];
+export declare function demandRequests(demand: Pick<ReplicationDemand, "objectType" | "query">, sources: readonly object[]): CollectionDemandDiagnostic[];
+//#endregion
+//# sourceMappingURL=tanstack.d.ts.map

package/lib/attribution/tanstack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstack.d.ts","names":[],"sources":["../../src/attribution/tanstack.ts"],"mappings":";;;;wBA4BgB,iBACZ,+BACS;EAA+B;;wBAyC5B,aACZ,QAAQ,KAAK,4CACb,sCACQ;wBAcI,eACZ,QAAQ,KAAK,4CACb,6BAA0B"}