@restormel/ui-graph-svelte 0.1.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/LICENSE +21 -0
- package/README.md +81 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +940 -0
- package/dist/lib/GraphCanvas.svelte.d.ts +1 -0
- package/dist/lib/NodeDetail.svelte.d.ts +1 -0
- package/dist/lib/semanticStyles.d.ts +23 -0
- package/dist/ui-graph-svelte.css +1 -0
- package/package.json +48 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Adam Boon
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# `@restormel/ui-graph-svelte`
|
|
2
|
+
|
|
3
|
+
Svelte 5 implementation of the Restormel Graph canvas (`GraphCanvas`, optional `NodeDetail`), aligned with **Contract v0** in `@restormel/graph-core` (`viewModel.ts`). Ported from the SOPHIA app for modular reuse.
|
|
4
|
+
|
|
5
|
+
**SOPHIA / SvelteKit consumers:** follow **[docs/restormel-graph-sophia-consumer.md](../../docs/restormel-graph-sophia-consumer.md)** (npm versions, `pnpm.overrides` + tarballs, peers, Vite `ssr.noExternal`, CSS tokens).
|
|
6
|
+
|
|
7
|
+
## Dependencies
|
|
8
|
+
|
|
9
|
+
- `peerDependencies`: `svelte@^5`
|
|
10
|
+
- `dependencies`: `@restormel/graph-core` (layout, trace, DTO types)
|
|
11
|
+
|
|
12
|
+
There is **no** `@restormel/contracts` dependency.
|
|
13
|
+
|
|
14
|
+
## Install (workspace / monorepo)
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @restormel/ui-graph-svelte @restormel/graph-core
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Build `@restormel/graph-core` before consuming subpath imports in dev toolchains that read `dist/` (`pnpm --filter @restormel/graph-core run build`).
|
|
21
|
+
|
|
22
|
+
## CSS variables
|
|
23
|
+
|
|
24
|
+
The canvas uses SOPHIA design tokens as CSS variables (for example `--color-bg`, `--color-sage`, `--color-text`, `--radius-md`, `--font-ui`, `--text-meta`). Host apps should load a compatible token sheet. The demo app mirrors SOPHIA’s `design-tokens.css` under `apps/restormel-graph-demo/src/lib/graph-demo-tokens.css`.
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
Pass **nodes**, **edges**, and optional **ghost** layers and semantic style maps. Shape matches `GraphRendererProps` in `@restormel/graph-core/viewModel`.
|
|
29
|
+
|
|
30
|
+
```svelte
|
|
31
|
+
<script lang="ts">
|
|
32
|
+
import { GraphCanvas } from "@restormel/ui-graph-svelte";
|
|
33
|
+
import type { GraphData } from "@restormel/graph-core/viewModel";
|
|
34
|
+
|
|
35
|
+
const data: GraphData = {
|
|
36
|
+
nodes: [
|
|
37
|
+
{ id: "s1", type: "source", label: "Source" },
|
|
38
|
+
{ id: "c1", type: "claim", label: "Claim", phase: "analysis" },
|
|
39
|
+
],
|
|
40
|
+
edges: [{ from: "s1", to: "c1", type: "contains" }],
|
|
41
|
+
ghostNodes: [],
|
|
42
|
+
ghostEdges: [],
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<GraphCanvas
|
|
47
|
+
nodes={data.nodes}
|
|
48
|
+
edges={data.edges}
|
|
49
|
+
ghostNodes={data.ghostNodes}
|
|
50
|
+
ghostEdges={data.ghostEdges}
|
|
51
|
+
showGhostLayer={false}
|
|
52
|
+
showInlineDetail={true}
|
|
53
|
+
showStatusChip={true}
|
|
54
|
+
showViewportControls={true}
|
|
55
|
+
nodeSemanticStyles={{}}
|
|
56
|
+
edgeSemanticStyles={{}}
|
|
57
|
+
/>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Edge semantic styles are keyed with `graphCanvasEdgeKey(edge)` exported from this package (`from:type:to`).
|
|
61
|
+
|
|
62
|
+
Optional props: `selectedNodeId`, `onSelectedNodeChange`, `onNodeSelect`, `viewportCommand`, `pinnedNodeIds`, `pathNodeIds`, `pathEdges`, `focusNodeIds`, `focusEdgeIds`, `dimOutOfScope`, `isFullscreen`, `onToggleFullscreen`, `onJumpToReferences`.
|
|
63
|
+
|
|
64
|
+
## Demo
|
|
65
|
+
|
|
66
|
+
`apps/restormel-graph-demo` — route `/dev/graph-portability`.
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
pnpm --filter restormel-graph-demo run dev
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Then open `/dev/graph-portability`.
|
|
73
|
+
|
|
74
|
+
## Build
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
pnpm --filter @restormel/graph-core run build
|
|
78
|
+
pnpm --filter @restormel/ui-graph-svelte run build
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Optional extracted stylesheet (same rules as Vite library build): `dist/ui-graph-svelte.css` (component styles are also bundled into the JS output for typical consumers).
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { default as GraphCanvas } from './lib/GraphCanvas.svelte';
|
|
2
|
+
export { default as NodeDetail } from './lib/NodeDetail.svelte';
|
|
3
|
+
export { graphCanvasEdgeKey, type GraphCanvasEdgeSemanticStyle, type GraphCanvasNodeSemanticStyle, type GraphCanvasNodeShape, } from './lib/semanticStyles';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,940 @@
|
|
|
1
|
+
import "svelte/internal/disclose-version";
|
|
2
|
+
import * as e from "svelte/internal/client";
|
|
3
|
+
import { computeLayout as Lt } from "@restormel/graph-core/layout";
|
|
4
|
+
import { getNodeTraceTags as Nr, formatTraceTag as Ae, getNodeTraceLabel as Tt } from "@restormel/graph-core/trace";
|
|
5
|
+
import { onMount as Er } from "svelte";
|
|
6
|
+
function St(te) {
|
|
7
|
+
return `${te.from}:${te.type}:${te.to}`;
|
|
8
|
+
}
|
|
9
|
+
var Cr = e.from_html('<span class="phase-badge svelte-vs5hf2"> </span>'), Ir = e.from_html('<span class="trace-tag svelte-vs5hf2"> </span>'), Pr = e.from_html('<section class="connections svelte-vs5hf2"><h4 class="connections-heading svelte-vs5hf2">Trace tags</h4> <div class="trace-tag-list svelte-vs5hf2"></div></section>'), Lr = e.from_html('<p class="trace-meta-row svelte-vs5hf2"><strong>Provenance:</strong> </p>'), Tr = e.from_html('<p class="trace-meta-row svelte-vs5hf2"><strong>Tension:</strong> </p>'), Sr = e.from_html('<p class="trace-meta-row svelte-vs5hf2"><strong>Derived from:</strong> </p>'), Yr = e.from_html('<section class="connections svelte-vs5hf2"><h4 class="connections-heading svelte-vs5hf2">Trace metadata</h4> <div class="trace-meta-list svelte-vs5hf2"><!> <!> <!></div></section>'), Gr = e.from_html('<li class="connection-item svelte-vs5hf2"><span class="connection-direction svelte-vs5hf2"> </span> <span class="edge-type svelte-vs5hf2"> </span> <span class="connected-node svelte-vs5hf2"><span class="node-type-indicator svelte-vs5hf2"></span> </span></li>'), Hr = e.from_html('<section class="connections svelte-vs5hf2"><h4 class="connections-heading svelte-vs5hf2"> </h4> <ul class="connection-list svelte-vs5hf2"></ul></section>'), Dr = e.from_html('<button class="jump-button svelte-vs5hf2">Jump to References <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M1 11L11 1M11 1H1M11 1v10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>'), Rr = e.from_html('<div class="node-detail svelte-vs5hf2" role="dialog" aria-labelledby="detail-heading" aria-modal="true" tabindex="-1"><div class="detail-header svelte-vs5hf2"><h3 id="detail-heading" class="detail-title svelte-vs5hf2"><span class="type-badge svelte-vs5hf2"> </span> <!></h3> <button class="close-button svelte-vs5hf2" aria-label="Close detail panel"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg></button></div> <div class="detail-body svelte-vs5hf2"><p class="node-label svelte-vs5hf2"> </p> <!> <!> <!> <!></div></div>');
|
|
10
|
+
function Xr(te, o) {
|
|
11
|
+
e.push(o, !0);
|
|
12
|
+
let Y = e.state(null);
|
|
13
|
+
const z = e.derived(() => Nr(o.node)), ae = e.derived(() => o.edges.filter((a) => a.from === o.node.id || a.to === o.node.id)), oe = e.derived(() => e.get(ae).map((a) => {
|
|
14
|
+
const l = a.from === o.node.id ? a.to : a.from;
|
|
15
|
+
return {
|
|
16
|
+
node: o.nodes.find((w) => w.id === l),
|
|
17
|
+
edge: a,
|
|
18
|
+
direction: a.from === o.node.id ? "outgoing" : "incoming"
|
|
19
|
+
};
|
|
20
|
+
}).filter((a) => a.node !== void 0));
|
|
21
|
+
function re(a) {
|
|
22
|
+
a.key === "Escape" && o.onClose();
|
|
23
|
+
}
|
|
24
|
+
Er(() => {
|
|
25
|
+
e.get(Y) && e.get(Y).focus();
|
|
26
|
+
const a = (l) => {
|
|
27
|
+
l.key === "Escape" && o.onClose();
|
|
28
|
+
};
|
|
29
|
+
return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
|
|
30
|
+
});
|
|
31
|
+
function Ve(a) {
|
|
32
|
+
return {
|
|
33
|
+
contains: "contains",
|
|
34
|
+
supports: "supports",
|
|
35
|
+
contradicts: "contradicts",
|
|
36
|
+
"responds-to": "responds to",
|
|
37
|
+
"depends-on": "depends on",
|
|
38
|
+
defines: "defines",
|
|
39
|
+
qualifies: "qualifies"
|
|
40
|
+
}[a] || a;
|
|
41
|
+
}
|
|
42
|
+
function je(a) {
|
|
43
|
+
switch (a) {
|
|
44
|
+
case "retrieval":
|
|
45
|
+
return "var(--color-amber)";
|
|
46
|
+
case "analysis":
|
|
47
|
+
return "var(--color-sage)";
|
|
48
|
+
case "critique":
|
|
49
|
+
return "var(--color-copper)";
|
|
50
|
+
case "synthesis":
|
|
51
|
+
return "var(--color-blue)";
|
|
52
|
+
default:
|
|
53
|
+
return "var(--color-muted)";
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
var A = Rr();
|
|
57
|
+
let Q;
|
|
58
|
+
var B = e.child(A), me = e.child(B), se = e.child(me);
|
|
59
|
+
let Re;
|
|
60
|
+
var Be = e.child(se, !0);
|
|
61
|
+
e.reset(se);
|
|
62
|
+
var pe = e.sibling(se, 2);
|
|
63
|
+
{
|
|
64
|
+
var J = (a) => {
|
|
65
|
+
var l = Cr();
|
|
66
|
+
let f;
|
|
67
|
+
var w = e.child(l, !0);
|
|
68
|
+
e.reset(l), e.template_effect(
|
|
69
|
+
(P) => {
|
|
70
|
+
f = e.set_style(l, "", f, P), e.set_text(w, o.node.phase);
|
|
71
|
+
},
|
|
72
|
+
[() => ({ color: je(o.node.phase) })]
|
|
73
|
+
), e.append(a, l);
|
|
74
|
+
};
|
|
75
|
+
e.if(pe, (a) => {
|
|
76
|
+
o.node.phase && a(J);
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
e.reset(me);
|
|
80
|
+
var $ = e.sibling(me, 2);
|
|
81
|
+
e.reset(B);
|
|
82
|
+
var be = e.sibling(B, 2), le = e.child(be), Xe = e.child(le, !0);
|
|
83
|
+
e.reset(le);
|
|
84
|
+
var ce = e.sibling(le, 2);
|
|
85
|
+
{
|
|
86
|
+
var We = (a) => {
|
|
87
|
+
var l = Pr(), f = e.sibling(e.child(l), 2);
|
|
88
|
+
e.each(f, 21, () => e.get(z), e.index, (w, P) => {
|
|
89
|
+
var R = Ir(), X = e.child(R, !0);
|
|
90
|
+
e.reset(R), e.template_effect((C) => e.set_text(X, C), [() => Ae(e.get(P))]), e.append(w, R);
|
|
91
|
+
}), e.reset(f), e.reset(l), e.append(a, l);
|
|
92
|
+
};
|
|
93
|
+
e.if(ce, (a) => {
|
|
94
|
+
e.get(z).length > 0 && a(We);
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
var xe = e.sibling(ce, 2);
|
|
98
|
+
{
|
|
99
|
+
var E = (a) => {
|
|
100
|
+
var l = Yr(), f = e.sibling(e.child(l), 2), w = e.child(f);
|
|
101
|
+
{
|
|
102
|
+
var P = (L) => {
|
|
103
|
+
var I = Lr(), O = e.sibling(e.child(I));
|
|
104
|
+
e.reset(I), e.template_effect(() => e.set_text(O, ` ${o.node.provenance_id ?? ""}`)), e.append(L, I);
|
|
105
|
+
};
|
|
106
|
+
e.if(w, (L) => {
|
|
107
|
+
o.node.provenance_id && L(P);
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
var R = e.sibling(w, 2);
|
|
111
|
+
{
|
|
112
|
+
var X = (L) => {
|
|
113
|
+
var I = Tr(), O = e.sibling(e.child(I));
|
|
114
|
+
e.reset(I), e.template_effect(() => e.set_text(O, ` ${o.node.unresolved_tension_id ?? ""}`)), e.append(L, I);
|
|
115
|
+
};
|
|
116
|
+
e.if(R, (L) => {
|
|
117
|
+
o.node.unresolved_tension_id && L(X);
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
var C = e.sibling(R, 2);
|
|
121
|
+
{
|
|
122
|
+
var ge = (L) => {
|
|
123
|
+
var I = Sr(), O = e.sibling(e.child(I));
|
|
124
|
+
e.reset(I), e.template_effect((ue) => e.set_text(O, ` ${ue ?? ""}`), [() => o.node.derived_from.slice(0, 3).join(", ")]), e.append(L, I);
|
|
125
|
+
};
|
|
126
|
+
e.if(C, (L) => {
|
|
127
|
+
o.node.derived_from && o.node.derived_from.length > 0 && L(ge);
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
e.reset(f), e.reset(l), e.append(a, l);
|
|
131
|
+
};
|
|
132
|
+
e.if(xe, (a) => {
|
|
133
|
+
(o.node.provenance_id || o.node.unresolved_tension_id || o.node.derived_from && o.node.derived_from.length > 0) && a(E);
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
var ie = e.sibling(xe, 2);
|
|
137
|
+
{
|
|
138
|
+
var Oe = (a) => {
|
|
139
|
+
var l = Hr(), f = e.child(l), w = e.child(f);
|
|
140
|
+
e.reset(f);
|
|
141
|
+
var P = e.sibling(f, 2);
|
|
142
|
+
e.each(P, 21, () => e.get(oe), e.index, (R, X) => {
|
|
143
|
+
let C = () => e.get(X).node, ge = () => e.get(X).edge, L = () => e.get(X).direction;
|
|
144
|
+
var I = Gr(), O = e.child(I), ue = e.child(O, !0);
|
|
145
|
+
e.reset(O);
|
|
146
|
+
var ne = e.sibling(O, 2), ye = e.child(ne, !0);
|
|
147
|
+
e.reset(ne);
|
|
148
|
+
var W = e.sibling(ne, 2), H = e.child(W);
|
|
149
|
+
let h;
|
|
150
|
+
var ze = e.sibling(H);
|
|
151
|
+
e.reset(W), e.reset(I), e.template_effect(
|
|
152
|
+
(ke) => {
|
|
153
|
+
var T, we, fe;
|
|
154
|
+
e.set_text(ue, L() === "outgoing" ? "→" : "←"), e.set_text(ye, ke), e.set_attribute(H, "aria-label", (T = C()) == null ? void 0 : T.type), h = e.set_style(H, "", h, {
|
|
155
|
+
"background-color": ((we = C()) == null ? void 0 : we.type) === "source" ? "var(--color-sage)" : "var(--color-muted)"
|
|
156
|
+
}), e.set_text(ze, ` ${((fe = C()) == null ? void 0 : fe.label) ?? ""}`);
|
|
157
|
+
},
|
|
158
|
+
[() => Ve(ge().type)]
|
|
159
|
+
), e.append(R, I);
|
|
160
|
+
}), e.reset(P), e.reset(l), e.template_effect(() => e.set_text(w, `Connections (${e.get(oe).length ?? ""})`)), e.append(a, l);
|
|
161
|
+
};
|
|
162
|
+
e.if(ie, (a) => {
|
|
163
|
+
e.get(oe).length > 0 && a(Oe);
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
var de = e.sibling(ie, 2);
|
|
167
|
+
{
|
|
168
|
+
var G = (a) => {
|
|
169
|
+
var l = Dr();
|
|
170
|
+
e.delegated("click", l, function(...f) {
|
|
171
|
+
var w;
|
|
172
|
+
(w = o.onJumpToReferences) == null || w.apply(this, f);
|
|
173
|
+
}), e.append(a, l);
|
|
174
|
+
};
|
|
175
|
+
e.if(de, (a) => {
|
|
176
|
+
o.onJumpToReferences && a(G);
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
e.reset(be), e.reset(A), e.bind_this(A, (a) => e.set(Y, a), () => e.get(Y)), e.template_effect(() => {
|
|
180
|
+
Q = e.set_style(A, "", Q, {
|
|
181
|
+
left: `${o.position.x ?? ""}px`,
|
|
182
|
+
top: `${o.position.y ?? ""}px`
|
|
183
|
+
}), Re = e.set_style(se, "", Re, {
|
|
184
|
+
"background-color": o.node.type === "source" ? "var(--color-sage-bg)" : "var(--color-muted)",
|
|
185
|
+
color: o.node.type === "source" ? "var(--color-sage)" : "var(--color-text)"
|
|
186
|
+
}), e.set_text(Be, o.node.type), e.set_text(Xe, o.node.label);
|
|
187
|
+
}), e.delegated("keydown", A, re), e.delegated("click", A, (a) => a.stopPropagation()), e.delegated("mousedown", A, (a) => a.stopPropagation()), e.delegated("click", $, function(...a) {
|
|
188
|
+
var l;
|
|
189
|
+
(l = o.onClose) == null || l.apply(this, a);
|
|
190
|
+
}), e.append(te, A), e.pop();
|
|
191
|
+
}
|
|
192
|
+
e.delegate(["keydown", "click", "mousedown"]);
|
|
193
|
+
var Wr = e.from_html('<div class="graph-status-chip svelte-7bxg53" aria-live="polite" aria-atomic="true"> </div>'), Or = e.from_html('<button type="button" class="graph-control-btn svelte-7bxg53"> </button>'), zr = e.from_html('<div class="graph-controls svelte-7bxg53" role="toolbar" aria-label="Graph viewport controls"><button type="button" class="graph-control-btn svelte-7bxg53" aria-label="Zoom in">+</button> <button type="button" class="graph-control-btn svelte-7bxg53" aria-label="Zoom out">-</button> <button type="button" class="graph-control-btn svelte-7bxg53">Fit</button> <button type="button" class="graph-control-btn svelte-7bxg53">Reset Layout</button> <!></div>'), Fr = e.from_svg('<line stroke="var(--color-dim)" stroke-dasharray="6 5" role="button" tabindex="0"></line>'), Zr = e.from_svg('<g class="ghost-edges-group" aria-label="Rejected traversal edges"></g>'), Ar = e.from_svg('<line role="button" tabindex="0"></line>'), Vr = e.from_svg('<text y="18" class="ghost-node-label svelte-7bxg53" text-anchor="middle" font-family="var(--font-ui)" font-size="9" fill="var(--color-dim)" pointer-events="none"> </text><text y="30" class="ghost-node-label svelte-7bxg53" text-anchor="middle" font-family="var(--font-ui)" font-size="8" fill="var(--color-dim)" pointer-events="none"> </text>', 1), jr = e.from_svg('<g class="ghost-node svelte-7bxg53" role="presentation"><circle r="8" fill="var(--color-bg)" stroke="var(--color-dim)"></circle><!></g>'), Br = e.from_svg('<g class="ghost-nodes-group" aria-label="Rejected traversal nodes"></g>'), Jr = e.from_svg('<circle class="node-ring" fill="none" stroke-width="2" opacity="0.6"></circle>'), Kr = e.from_svg('<circle class="node-highlight-ring" fill="none" stroke="var(--color-blue)" stroke-width="1.5" opacity="0.5"></circle>'), qr = e.from_svg('<circle class="node-pinned-ring" fill="none" stroke="var(--color-amber)" stroke-width="1.5" opacity="0.55"></circle>'), Ur = e.from_svg('<circle stroke-width="2" tabindex="0" role="button"></circle>'), Qr = e.from_svg('<rect stroke-width="2" tabindex="0" role="button"></rect>'), $r = e.from_svg('<polygon stroke-width="2" tabindex="0" role="button"></polygon>'), ei = e.from_svg('<polygon stroke-width="2" tabindex="0" role="button"></polygon>'), ti = e.from_svg('<rect stroke-width="2" tabindex="0" role="button"></rect>'), ri = e.from_svg('<text y="4" class="node-glyph svelte-7bxg53" text-anchor="middle" font-family="var(--font-ui)" fill="var(--color-text)" pointer-events="none"> </text>'), ii = e.from_svg('<text class="node-trace-label svelte-7bxg53" text-anchor="middle" font-family="var(--font-ui)" font-size="9" fill="var(--color-dim)" pointer-events="none"> </text>'), ni = e.from_svg('<g><!><!><!><!><!><text text-anchor="middle" font-family="var(--font-ui)" font-size="11" fill="var(--color-text)" pointer-events="none"> </text><!></g>'), ai = e.from_html('<div class="detail-backdrop svelte-7bxg53" aria-hidden="true"></div> <!>', 1), oi = e.from_html('<span class="edge-detail-badge svelte-7bxg53">rejected</span>'), si = e.from_html('<span class="edge-chip svelte-7bxg53"> </span>'), li = e.from_html('<span class="edge-chip is-reason svelte-7bxg53"> </span>'), ci = e.from_html('<p class="edge-detail-line svelte-7bxg53"> </p>'), di = e.from_html('<button type="button" class="edge-detail-close svelte-7bxg53">Close</button>'), gi = e.from_html('<div class="edge-detail svelte-7bxg53"><p class="edge-detail-title svelte-7bxg53"> <!></p> <div class="edge-chip-row svelte-7bxg53"><span class="edge-chip svelte-7bxg53"> </span> <!> <!></div> <!> <!></div>'), ui = e.from_html('<div class="graph-canvas-container svelte-7bxg53" role="application" aria-label="Argument graph visualization"><!> <!> <svg class="graph-svg svelte-7bxg53" role="img" aria-label="Interactive graph showing sources and claims"><title>Argument Graph</title><desc> </desc><defs><marker id="arrowblue" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="var(--color-blue)"></path></marker><marker id="arrowteal" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="var(--color-teal)"></path></marker><marker id="arrowcoral" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="var(--color-coral)"></path></marker><marker id="arrowamber" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="var(--color-amber)"></path></marker><marker id="arrowpurple" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="var(--color-purple)"></path></marker></defs><rect fill="var(--color-bg)"></rect><g class="viewport-group"><!><g class="edges-group" aria-label="Graph edges"></g><!><g class="nodes-group" aria-label="Graph nodes"></g></g></svg> <!> <!></div> <div class="sr-only svelte-7bxg53" role="status" aria-live="polite" aria-atomic="true"><!></div>', 1);
|
|
194
|
+
function mi(te, o) {
|
|
195
|
+
e.push(o, !0);
|
|
196
|
+
let Y = e.prop(o, "nodes", 19, () => []), z = e.prop(o, "edges", 19, () => []), ae = e.prop(o, "ghostNodes", 19, () => []), oe = e.prop(o, "ghostEdges", 19, () => []), re = e.prop(o, "showGhostLayer", 3, !0), Ve = e.prop(o, "showInlineDetail", 3, !0), je = e.prop(o, "showStatusChip", 3, !0), A = e.prop(o, "showViewportControls", 3, !0), Q = e.prop(o, "viewportCommand", 3, null), B = e.prop(o, "nodeSemanticStyles", 19, () => ({})), me = e.prop(o, "edgeSemanticStyles", 19, () => ({})), se = e.prop(o, "width", 3, 800), Re = e.prop(o, "height", 3, 600), Be = e.prop(o, "isFullscreen", 3, !1), pe = e.prop(o, "pinnedNodeIds", 19, () => []), J = e.prop(o, "pathNodeIds", 19, () => []), $ = e.prop(o, "pathEdges", 19, () => []), be = e.prop(o, "focusNodeIds", 19, () => []), le = e.prop(o, "focusEdgeIds", 19, () => []), Xe = e.prop(o, "dimOutOfScope", 3, !1), ce = e.prop(o, "selectedNodeId", 3, void 0);
|
|
197
|
+
const We = 0.45, xe = 2.6;
|
|
198
|
+
let E = e.state(null), ie = e.state(null), Oe = e.state(null), de = e.state(null), G = e.state(null), a = e.state(null), l = e.state(e.proxy(/* @__PURE__ */ new Map())), f = e.state(1), w = e.state(0), P = e.state(0), R = e.state(!1), X = e.state(!1), C = e.state(null), ge = 0, L = 0, I = 0, O = 0, ue = e.state(null), ne = e.state(0), ye = e.state(0);
|
|
199
|
+
const W = e.derived(() => Math.max(e.get(ne) > 0 ? e.get(ne) : se(), 320)), H = e.derived(() => Math.max(e.get(ye) > 0 ? e.get(ye) : Re(), 240));
|
|
200
|
+
e.user_effect(() => {
|
|
201
|
+
var r;
|
|
202
|
+
if (Y().length === 0) {
|
|
203
|
+
e.set(l, /* @__PURE__ */ new Map(), !0);
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
const t = Lt(Y(), z(), e.get(W), e.get(H));
|
|
207
|
+
if (re() && ae().length > 0) {
|
|
208
|
+
const n = /* @__PURE__ */ new Map(), s = [];
|
|
209
|
+
for (const v of ae())
|
|
210
|
+
v.anchorNodeId && t.has(v.anchorNodeId) ? (n.has(v.anchorNodeId) || n.set(v.anchorNodeId, []), (r = n.get(v.anchorNodeId)) == null || r.push(v)) : s.push(v);
|
|
211
|
+
for (const [v, x] of n.entries()) {
|
|
212
|
+
const y = t.get(v);
|
|
213
|
+
y && x.forEach((m, p) => {
|
|
214
|
+
const c = p % 8 / 8 * Math.PI * 2 - Math.PI / 2, k = 40 + Math.floor(p / 8) * 16;
|
|
215
|
+
t.set(m.id, {
|
|
216
|
+
x: y.x + Math.cos(c) * k,
|
|
217
|
+
y: y.y + Math.sin(c) * k
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
if (s.length > 0) {
|
|
222
|
+
const v = e.get(W) / 2, x = e.get(H) / 2, y = Math.min(e.get(W), e.get(H)) * 0.42;
|
|
223
|
+
s.forEach((m, p) => {
|
|
224
|
+
const c = p / Math.max(s.length, 1) * Math.PI * 2 - Math.PI / 2;
|
|
225
|
+
t.set(m.id, {
|
|
226
|
+
x: v + Math.cos(c) * y,
|
|
227
|
+
y: x + Math.sin(c) * y
|
|
228
|
+
});
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
e.set(l, t, !0);
|
|
233
|
+
});
|
|
234
|
+
const h = e.derived(() => ce() !== void 0 ? ce() : e.get(Oe)), ze = e.derived(() => e.get(h) ? Y().find((t) => t.id === e.get(h)) : null), ke = e.derived(() => e.get(h) && e.get(l).has(e.get(h)) ? e.get(l).get(e.get(h)) : null), T = e.derived(() => e.get(a) ?? e.get(G)), we = e.derived(() => {
|
|
235
|
+
if (!e.get(ke)) return null;
|
|
236
|
+
const t = 300, r = 280, n = 18, s = e.get(ke).x * e.get(f) + e.get(w), v = e.get(ke).y * e.get(f) + e.get(P);
|
|
237
|
+
return {
|
|
238
|
+
x: Math.min(Math.max(s, t / 2 + n), e.get(W) - t / 2 - n),
|
|
239
|
+
y: Math.min(Math.max(v, r + n), e.get(H) - n)
|
|
240
|
+
};
|
|
241
|
+
}), fe = e.derived(() => {
|
|
242
|
+
if (!e.get(T)) return null;
|
|
243
|
+
const t = e.get(l).get(e.get(T).edge.from), r = e.get(l).get(e.get(T).edge.to);
|
|
244
|
+
if (!t || !r) return null;
|
|
245
|
+
const n = (t.x + r.x) / 2 * e.get(f) + e.get(w), s = (t.y + r.y) / 2 * e.get(f) + e.get(P);
|
|
246
|
+
return {
|
|
247
|
+
x: Math.min(Math.max(n, 160), e.get(W) - 160),
|
|
248
|
+
y: Math.min(Math.max(s, 64), e.get(H) - 64)
|
|
249
|
+
};
|
|
250
|
+
}), rt = e.derived(() => e.get(T) ? Kt(e.get(T).edge) : null), it = e.derived(() => e.get(T) ? Ut(e.get(T).edge) : null), nt = e.derived(() => e.get(T) ? qt(e.get(T).edge) : null), at = e.derived(() => e.get(E) ? z().filter((t) => t.from === e.get(E) || t.to === e.get(E)) : []), Yt = e.derived(() => e.get(h) ? z().filter((t) => t.from === e.get(h) || t.to === e.get(h)) : []);
|
|
251
|
+
e.user_effect(() => {
|
|
252
|
+
e.get(l).size !== 0 && (e.get(X) || qe());
|
|
253
|
+
}), e.user_effect(() => {
|
|
254
|
+
var t, r;
|
|
255
|
+
re() || ((t = e.get(a)) != null && t.isGhost && e.set(a, null), (r = e.get(G)) != null && r.isGhost && e.set(G, null), e.set(ie, null));
|
|
256
|
+
});
|
|
257
|
+
function ot(t, r, n) {
|
|
258
|
+
return Math.min(Math.max(t, r), n);
|
|
259
|
+
}
|
|
260
|
+
function st(t) {
|
|
261
|
+
var r;
|
|
262
|
+
return ((r = B()[t.id]) == null ? void 0 : r.radius) ?? (t.type === "source" ? 20 : 12);
|
|
263
|
+
}
|
|
264
|
+
function ve(t) {
|
|
265
|
+
const r = B()[t.id];
|
|
266
|
+
if (r) return r.fill;
|
|
267
|
+
if (t.type === "source")
|
|
268
|
+
return "var(--color-sage)";
|
|
269
|
+
switch (t.phase) {
|
|
270
|
+
case "retrieval":
|
|
271
|
+
return "var(--color-amber)";
|
|
272
|
+
case "analysis":
|
|
273
|
+
return "var(--color-sage)";
|
|
274
|
+
case "critique":
|
|
275
|
+
return "var(--color-copper)";
|
|
276
|
+
case "synthesis":
|
|
277
|
+
return "var(--color-blue)";
|
|
278
|
+
default:
|
|
279
|
+
return "var(--color-muted)";
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
function he(t) {
|
|
283
|
+
const r = B()[t.id];
|
|
284
|
+
return e.get(h) === t.id || e.get(E) === t.id || J().includes(t.id) ? "var(--color-blue)" : (r == null ? void 0 : r.state) === "verified" ? "var(--color-teal)" : (r == null ? void 0 : r.state) === "unresolved" ? "var(--color-amber)" : (r == null ? void 0 : r.state) === "contradicted" ? "var(--color-coral)" : (r == null ? void 0 : r.state) === "synthesis" ? "var(--color-purple)" : (r == null ? void 0 : r.stroke) ?? ve(t);
|
|
285
|
+
}
|
|
286
|
+
function Gt(t) {
|
|
287
|
+
var r;
|
|
288
|
+
return ((r = B()[t.id]) == null ? void 0 : r.shape) ?? "circle";
|
|
289
|
+
}
|
|
290
|
+
function Ht(t) {
|
|
291
|
+
var r;
|
|
292
|
+
return ((r = B()[t.id]) == null ? void 0 : r.glyph) ?? null;
|
|
293
|
+
}
|
|
294
|
+
function Dt(t) {
|
|
295
|
+
return Xe() && be().length > 0 ? !be().includes(t) : J().length > 0 ? !J().includes(t) : e.get(h) ? !lt(t) : !1;
|
|
296
|
+
}
|
|
297
|
+
function Me(t) {
|
|
298
|
+
return Dt(t) ? 0.24 : e.get(h) === t ? 1 : e.get(E) === t ? 0.98 : J().includes(t) ? 1 : 0.88;
|
|
299
|
+
}
|
|
300
|
+
function Rt(t) {
|
|
301
|
+
return J().includes(t.id) || e.get(h) === t.id ? "var(--color-blue)" : he(t);
|
|
302
|
+
}
|
|
303
|
+
function Fe(t) {
|
|
304
|
+
return me()[St(t)] ?? null;
|
|
305
|
+
}
|
|
306
|
+
function Xt(t) {
|
|
307
|
+
if (e.get(h) && (t.from === e.get(h) || t.to === e.get(h)))
|
|
308
|
+
return "url(#arrowblue)";
|
|
309
|
+
}
|
|
310
|
+
function Wt(t) {
|
|
311
|
+
const r = Fe(t);
|
|
312
|
+
return Ee(t) || Ne(t) || $().some((n) => n.from === t.from && n.to === t.to || n.from === t.to && n.to === t.from) ? "var(--color-blue)" : (r == null ? void 0 : r.stroke) ?? "var(--color-dim)";
|
|
313
|
+
}
|
|
314
|
+
function Ot(t) {
|
|
315
|
+
const r = Fe(t);
|
|
316
|
+
return Ee(t) ? 2.4 : Ne(t) ? 2 : $().some((n) => n.from === t.from && n.to === t.to || n.from === t.to && n.to === t.from) ? 2.2 : (r == null ? void 0 : r.strokeWidth) ?? 1;
|
|
317
|
+
}
|
|
318
|
+
function zt(t) {
|
|
319
|
+
var r;
|
|
320
|
+
return (r = Fe(t)) == null ? void 0 : r.dasharray;
|
|
321
|
+
}
|
|
322
|
+
function Ft(t) {
|
|
323
|
+
const r = Fe(t);
|
|
324
|
+
if (Ee(t) || Ne(t) || $().some((n) => n.from === t.from && n.to === t.to || n.from === t.to && n.to === t.from))
|
|
325
|
+
return "url(#arrow-blue)";
|
|
326
|
+
if (!(!(r != null && r.marker) || r.marker === "none"))
|
|
327
|
+
return `url(#${r.marker.replace("-", "")})`;
|
|
328
|
+
}
|
|
329
|
+
function Zt(t) {
|
|
330
|
+
return Xe() && le().length > 0 ? !le().includes(St(t)) : $().length > 0 ? !$().some((r) => r.from === t.from && r.to === t.to || r.from === t.to && r.to === t.from) : e.get(h) ? !(t.from === e.get(h) || t.to === e.get(h)) : !1;
|
|
331
|
+
}
|
|
332
|
+
function At(t) {
|
|
333
|
+
return Zt(t) ? 0.12 : Ee(t) ? 0.96 : Ne(t) ? 0.86 : 0.58;
|
|
334
|
+
}
|
|
335
|
+
function Vt(t) {
|
|
336
|
+
return `0,-${t} ${t},0 0,${t} -${t},0`;
|
|
337
|
+
}
|
|
338
|
+
function jt(t) {
|
|
339
|
+
const r = t * 0.9;
|
|
340
|
+
return `${-r},0 ${-t * 0.45},-${t} ${t * 0.45},-${t} ${r},0 ${t * 0.45},${t} ${-t * 0.45},${t}`;
|
|
341
|
+
}
|
|
342
|
+
function lt(t) {
|
|
343
|
+
return e.get(E) === t || e.get(h) === t || pe().includes(t) || J().includes(t) ? !0 : !!e.get(at).find((n) => n.from === t || n.to === t);
|
|
344
|
+
}
|
|
345
|
+
function Ne(t) {
|
|
346
|
+
var r;
|
|
347
|
+
return $().some((n) => n.from === t.from && n.to === t.to || n.from === t.to && n.to === t.from) || ((r = e.get(G)) == null ? void 0 : r.isGhost) === !1 && e.get(G).edge.from === t.from && e.get(G).edge.to === t.to && e.get(G).edge.type === t.type ? !0 : e.get(at).some((n) => n.from === t.from && n.to === t.to);
|
|
348
|
+
}
|
|
349
|
+
function Bt(t) {
|
|
350
|
+
var r, n;
|
|
351
|
+
return re() ? e.get(h) && (t.from === e.get(h) || t.to === e.get(h)) || e.get(E) && (t.from === e.get(E) || t.to === e.get(E)) || ((r = e.get(a)) == null ? void 0 : r.isGhost) === !0 && "id" in e.get(a).edge && e.get(a).edge.id === t.id ? !0 : ((n = e.get(G)) == null ? void 0 : n.isGhost) === !0 && "id" in e.get(G).edge && e.get(G).edge.id === t.id : !1;
|
|
352
|
+
}
|
|
353
|
+
function Ee(t) {
|
|
354
|
+
var r;
|
|
355
|
+
return ((r = e.get(a)) == null ? void 0 : r.isGhost) === !1 && e.get(a).edge.from === t.from && e.get(a).edge.to === t.to && e.get(a).edge.type === t.type ? !0 : e.get(Yt).some((n) => n.from === t.from && n.to === t.to);
|
|
356
|
+
}
|
|
357
|
+
function ct(t, r) {
|
|
358
|
+
e.set(G, { edge: t, isGhost: r }, !0);
|
|
359
|
+
}
|
|
360
|
+
function dt() {
|
|
361
|
+
e.set(G, null);
|
|
362
|
+
}
|
|
363
|
+
function Je(t, r) {
|
|
364
|
+
if (e.get(a) && e.get(a).isGhost === r && e.get(a).edge.from === t.from && e.get(a).edge.to === t.to && e.get(a).edge.type === t.type && ("id" in e.get(a).edge ? e.get(a).edge.id : "") === ("id" in t ? t.id : "")) {
|
|
365
|
+
e.set(a, null);
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
e.set(a, { edge: t, isGhost: r }, !0);
|
|
369
|
+
}
|
|
370
|
+
function Ce(t) {
|
|
371
|
+
var r, n;
|
|
372
|
+
ce() === void 0 && e.set(Oe, t, !0), (r = o.onSelectedNodeChange) == null || r.call(o, t), t && ((n = o.onNodeSelect) == null || n.call(o, t));
|
|
373
|
+
}
|
|
374
|
+
function gt(t, r, n) {
|
|
375
|
+
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), Je(r, n)), t.key === "Escape" && ut();
|
|
376
|
+
}
|
|
377
|
+
function ut() {
|
|
378
|
+
e.set(a, null);
|
|
379
|
+
}
|
|
380
|
+
function Jt(t) {
|
|
381
|
+
return t.pass_origin ?? ("phaseOrigin" in t ? t.phaseOrigin ?? "retrieval" : "retrieval");
|
|
382
|
+
}
|
|
383
|
+
function Kt(t) {
|
|
384
|
+
return typeof t.relation_confidence == "number" ? t.relation_confidence : "evidence_strength" in t && typeof t.evidence_strength == "number" ? t.evidence_strength : "weight" in t && typeof t.weight == "number" ? t.weight : null;
|
|
385
|
+
}
|
|
386
|
+
function qt(t) {
|
|
387
|
+
return "rationale_source" in t && t.rationale_source ? t.rationale_source : "evidence_sources" in t && t.evidence_sources && t.evidence_sources.length > 0 ? t.evidence_sources[0] : "relation_rationale" in t && t.relation_rationale ? t.relation_rationale : null;
|
|
388
|
+
}
|
|
389
|
+
function Ut(t) {
|
|
390
|
+
return "reasonCode" in t ? t.reasonCode : null;
|
|
391
|
+
}
|
|
392
|
+
function _e(t) {
|
|
393
|
+
e.get(h) !== t && (e.set(a, null), Ce(t));
|
|
394
|
+
}
|
|
395
|
+
function Ie(t) {
|
|
396
|
+
e.set(E, t, !0);
|
|
397
|
+
}
|
|
398
|
+
function Pe() {
|
|
399
|
+
e.set(E, null);
|
|
400
|
+
}
|
|
401
|
+
function Le(t, r) {
|
|
402
|
+
t.key === "Enter" || t.key === " " ? (t.preventDefault(), _e(r)) : t.key === "Escape" && (Ce(null), e.set(E, null), e.set(a, null));
|
|
403
|
+
}
|
|
404
|
+
function Te(t) {
|
|
405
|
+
e.set(de, t, !0), e.set(E, t, !0);
|
|
406
|
+
}
|
|
407
|
+
function Se() {
|
|
408
|
+
e.set(de, null), e.get(h) === null && e.set(E, null);
|
|
409
|
+
}
|
|
410
|
+
function ft() {
|
|
411
|
+
Ce(null);
|
|
412
|
+
}
|
|
413
|
+
function Qt() {
|
|
414
|
+
var t;
|
|
415
|
+
e.get(h) && ((t = o.onJumpToReferences) == null || t.call(o, e.get(h)));
|
|
416
|
+
}
|
|
417
|
+
function Ke(t, r, n) {
|
|
418
|
+
if (!e.get(C)) return;
|
|
419
|
+
const s = ot(t, We, xe);
|
|
420
|
+
if (Math.abs(s - e.get(f)) < 1e-4) return;
|
|
421
|
+
const v = e.get(C).getBoundingClientRect(), x = r - v.left, y = n - v.top, m = (x - e.get(w)) / e.get(f), p = (y - e.get(P)) / e.get(f);
|
|
422
|
+
e.set(f, s, !0), e.set(w, x - m * e.get(f)), e.set(P, y - p * e.get(f)), e.set(X, !0);
|
|
423
|
+
}
|
|
424
|
+
function $t() {
|
|
425
|
+
if (!e.get(C)) return;
|
|
426
|
+
const t = e.get(C).getBoundingClientRect();
|
|
427
|
+
Ke(e.get(f) * 1.16, t.left + t.width / 2, t.top + t.height / 2);
|
|
428
|
+
}
|
|
429
|
+
function er() {
|
|
430
|
+
if (!e.get(C)) return;
|
|
431
|
+
const t = e.get(C).getBoundingClientRect();
|
|
432
|
+
Ke(e.get(f) / 1.16, t.left + t.width / 2, t.top + t.height / 2);
|
|
433
|
+
}
|
|
434
|
+
function qe() {
|
|
435
|
+
if (e.get(l).size === 0) return;
|
|
436
|
+
const t = Y().filter((k) => e.get(l).has(k.id));
|
|
437
|
+
if (t.length === 0) return;
|
|
438
|
+
let r = Number.POSITIVE_INFINITY, n = Number.POSITIVE_INFINITY, s = Number.NEGATIVE_INFINITY, v = Number.NEGATIVE_INFINITY;
|
|
439
|
+
for (const k of t) {
|
|
440
|
+
const d = e.get(l).get(k.id), g = st(k) + 16;
|
|
441
|
+
r = Math.min(r, d.x - g), n = Math.min(n, d.y - g), s = Math.max(s, d.x + g), v = Math.max(v, d.y + g);
|
|
442
|
+
}
|
|
443
|
+
const x = Math.max(s - r, 1), y = Math.max(v - n, 1), m = 36, p = Math.max(e.get(W) - m * 2, 1), c = Math.max(e.get(H) - m * 2, 1), N = ot(Math.min(p / x, c / y), We, xe);
|
|
444
|
+
e.set(f, N, !0), e.set(w, (e.get(W) - x * e.get(f)) / 2 - r * e.get(f)), e.set(P, (e.get(H) - y * e.get(f)) / 2 - n * e.get(f));
|
|
445
|
+
}
|
|
446
|
+
function vt() {
|
|
447
|
+
e.set(X, !1), qe();
|
|
448
|
+
}
|
|
449
|
+
function ht() {
|
|
450
|
+
e.set(l, Lt(Y(), z(), e.get(W), e.get(H)), !0), Ce(null), e.set(E, null), e.set(de, null), e.set(X, !1), qe();
|
|
451
|
+
}
|
|
452
|
+
function tr(t) {
|
|
453
|
+
t.preventDefault();
|
|
454
|
+
const r = Math.exp(-t.deltaY * 12e-4);
|
|
455
|
+
Ke(e.get(f) * r, t.clientX, t.clientY);
|
|
456
|
+
}
|
|
457
|
+
function rr(t) {
|
|
458
|
+
var n;
|
|
459
|
+
const r = t.target;
|
|
460
|
+
r.closest(".graph-node") || r.closest(".graph-edge") || r.closest(".ghost-edge") || r.closest(".ghost-node") || r.closest(".node-detail") || r.closest(".edge-detail") || r.closest(".graph-controls") || t.button === 0 && (e.set(a, null), e.set(R, !0), ge = t.clientX, L = t.clientY, I = e.get(w), O = e.get(P), (n = e.get(C)) == null || n.setPointerCapture(t.pointerId));
|
|
461
|
+
}
|
|
462
|
+
function ir(t) {
|
|
463
|
+
e.get(R) && (e.set(w, I + (t.clientX - ge)), e.set(P, O + (t.clientY - L)), e.set(X, !0));
|
|
464
|
+
}
|
|
465
|
+
function _t(t) {
|
|
466
|
+
var r;
|
|
467
|
+
e.get(R) && (e.set(R, !1), (r = e.get(C)) == null || r.releasePointerCapture(t.pointerId));
|
|
468
|
+
}
|
|
469
|
+
function Ye(t) {
|
|
470
|
+
const r = z().filter((n) => n.from === t.id || n.to === t.id).length;
|
|
471
|
+
return `${t.type} node: ${t.label}. ${r} connections. ${t.phase ? t.phase + " phase." : ""}`;
|
|
472
|
+
}
|
|
473
|
+
function mt(t) {
|
|
474
|
+
return t.length > 36 ? `${t.slice(0, 36)}...` : t;
|
|
475
|
+
}
|
|
476
|
+
function pt(t) {
|
|
477
|
+
return e.get(h) === t || e.get(E) === t || e.get(de) === t || pe().includes(t) || J().includes(t);
|
|
478
|
+
}
|
|
479
|
+
e.user_effect(() => {
|
|
480
|
+
if (typeof window > "u") return;
|
|
481
|
+
const t = (r) => {
|
|
482
|
+
r.key === "Escape" && (Ce(null), e.set(E, null), e.set(a, null));
|
|
483
|
+
};
|
|
484
|
+
return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
|
|
485
|
+
}), e.user_effect(() => {
|
|
486
|
+
if (Q() && Q().nonce !== e.get(ue)) {
|
|
487
|
+
if (e.set(ue, Q().nonce, !0), Q().type === "fit") {
|
|
488
|
+
vt();
|
|
489
|
+
return;
|
|
490
|
+
}
|
|
491
|
+
Q().type === "reset-layout" && ht();
|
|
492
|
+
}
|
|
493
|
+
});
|
|
494
|
+
var bt = ui(), Ge = e.first_child(bt), xt = e.child(Ge);
|
|
495
|
+
{
|
|
496
|
+
var nr = (t) => {
|
|
497
|
+
var r = Wr(), n = e.child(r);
|
|
498
|
+
e.reset(r), e.template_effect((s) => e.set_text(n, `Zoom ${s ?? ""}%`), [() => Math.round(e.get(f) * 100)]), e.append(t, r);
|
|
499
|
+
};
|
|
500
|
+
e.if(xt, (t) => {
|
|
501
|
+
je() && t(nr);
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
var yt = e.sibling(xt, 2);
|
|
505
|
+
{
|
|
506
|
+
var ar = (t) => {
|
|
507
|
+
var r = zr(), n = e.child(r), s = e.sibling(n, 2), v = e.sibling(s, 2), x = e.sibling(v, 2), y = e.sibling(x, 2);
|
|
508
|
+
{
|
|
509
|
+
var m = (p) => {
|
|
510
|
+
var c = Or(), N = e.child(c, !0);
|
|
511
|
+
e.reset(c), e.template_effect(() => e.set_text(N, Be() ? "Exit Fullscreen" : "Fullscreen")), e.delegated("click", c, function(...k) {
|
|
512
|
+
var d;
|
|
513
|
+
(d = o.onToggleFullscreen) == null || d.apply(this, k);
|
|
514
|
+
}), e.append(p, c);
|
|
515
|
+
};
|
|
516
|
+
e.if(y, (p) => {
|
|
517
|
+
o.onToggleFullscreen && p(m);
|
|
518
|
+
});
|
|
519
|
+
}
|
|
520
|
+
e.reset(r), e.delegated("click", n, $t), e.delegated("click", s, er), e.delegated("click", v, vt), e.delegated("click", x, ht), e.append(t, r);
|
|
521
|
+
};
|
|
522
|
+
e.if(yt, (t) => {
|
|
523
|
+
A() && t(ar);
|
|
524
|
+
});
|
|
525
|
+
}
|
|
526
|
+
var F = e.sibling(yt, 2), Ue = e.sibling(e.child(F)), or = e.child(Ue);
|
|
527
|
+
e.reset(Ue);
|
|
528
|
+
var Qe = e.sibling(Ue, 2), $e = e.sibling(Qe);
|
|
529
|
+
let kt;
|
|
530
|
+
var wt = e.child($e);
|
|
531
|
+
{
|
|
532
|
+
var sr = (t) => {
|
|
533
|
+
var r = Zr();
|
|
534
|
+
e.each(r, 21, oe, e.index, (n, s, v) => {
|
|
535
|
+
var x = e.comment(), y = e.first_child(x);
|
|
536
|
+
{
|
|
537
|
+
var m = (c) => {
|
|
538
|
+
const N = e.derived(() => e.get(l).get(e.get(s).from)), k = e.derived(() => e.get(l).get(e.get(s).to)), d = e.derived(() => Bt(e.get(s)));
|
|
539
|
+
var g = Fr();
|
|
540
|
+
let D;
|
|
541
|
+
e.set_style(g, "", {}, { "animation-delay": `${v * 18}ms` }), e.template_effect(
|
|
542
|
+
(S) => {
|
|
543
|
+
e.set_attribute(g, "x1", e.get(N).x), e.set_attribute(g, "y1", e.get(N).y), e.set_attribute(g, "x2", e.get(k).x), e.set_attribute(g, "y2", e.get(k).y), D = e.set_class(g, 0, "ghost-edge svelte-7bxg53", null, D, { highlighted: e.get(d) }), e.set_attribute(g, "stroke-width", e.get(d) ? 1.8 : 1.1), e.set_attribute(g, "opacity", e.get(d) ? 0.52 : 0.22), e.set_attribute(g, "marker-end", S), e.set_attribute(g, "aria-label", `${e.get(s).type ?? ""} rejected relation (${e.get(s).reasonCode ?? ""})`);
|
|
544
|
+
},
|
|
545
|
+
[() => Xt(e.get(s))]
|
|
546
|
+
), e.event("mouseenter", g, () => ct(e.get(s), !0)), e.event("mouseleave", g, dt), e.delegated("click", g, () => Je(e.get(s), !0)), e.delegated("keydown", g, (S) => gt(S, e.get(s), !0)), e.append(c, g);
|
|
547
|
+
}, p = e.derived(() => e.get(l).has(e.get(s).from) && e.get(l).has(e.get(s).to));
|
|
548
|
+
e.if(y, (c) => {
|
|
549
|
+
e.get(p) && c(m);
|
|
550
|
+
});
|
|
551
|
+
}
|
|
552
|
+
e.append(n, x);
|
|
553
|
+
}), e.reset(r), e.append(t, r);
|
|
554
|
+
};
|
|
555
|
+
e.if(wt, (t) => {
|
|
556
|
+
re() && oe().length > 0 && t(sr);
|
|
557
|
+
});
|
|
558
|
+
}
|
|
559
|
+
var et = e.sibling(wt);
|
|
560
|
+
e.each(et, 21, z, e.index, (t, r, n) => {
|
|
561
|
+
var s = e.comment(), v = e.first_child(s);
|
|
562
|
+
{
|
|
563
|
+
var x = (m) => {
|
|
564
|
+
const p = e.derived(() => e.get(l).get(e.get(r).from)), c = e.derived(() => e.get(l).get(e.get(r).to)), N = e.derived(() => Ne(e.get(r))), k = e.derived(() => Ee(e.get(r)));
|
|
565
|
+
var d = Ar();
|
|
566
|
+
let g;
|
|
567
|
+
e.set_style(d, "", {}, { "animation-delay": `${n * 20}ms` }), e.template_effect(
|
|
568
|
+
(D, S, V, K, _) => {
|
|
569
|
+
e.set_attribute(d, "x1", e.get(p).x), e.set_attribute(d, "y1", e.get(p).y), e.set_attribute(d, "x2", e.get(c).x), e.set_attribute(d, "y2", e.get(c).y), g = e.set_class(d, 0, "graph-edge svelte-7bxg53", null, g, {
|
|
570
|
+
highlighted: e.get(N),
|
|
571
|
+
selected: e.get(k)
|
|
572
|
+
}), e.set_attribute(d, "stroke", D), e.set_attribute(d, "stroke-width", S), e.set_attribute(d, "stroke-dasharray", V), e.set_attribute(d, "marker-end", K), e.set_attribute(d, "opacity", _), e.set_attribute(d, "aria-label", `${e.get(r).type ?? ""} relation`);
|
|
573
|
+
},
|
|
574
|
+
[
|
|
575
|
+
() => Wt(e.get(r)),
|
|
576
|
+
() => Ot(e.get(r)),
|
|
577
|
+
() => zt(e.get(r)),
|
|
578
|
+
() => Ft(e.get(r)),
|
|
579
|
+
() => At(e.get(r))
|
|
580
|
+
]
|
|
581
|
+
), e.event("mouseenter", d, () => ct(e.get(r), !1)), e.event("mouseleave", d, dt), e.delegated("click", d, () => Je(e.get(r), !1)), e.delegated("keydown", d, (D) => gt(D, e.get(r), !1)), e.append(m, d);
|
|
582
|
+
}, y = e.derived(() => e.get(l).has(e.get(r).from) && e.get(l).has(e.get(r).to));
|
|
583
|
+
e.if(v, (m) => {
|
|
584
|
+
e.get(y) && m(x);
|
|
585
|
+
});
|
|
586
|
+
}
|
|
587
|
+
e.append(t, s);
|
|
588
|
+
}), e.reset(et);
|
|
589
|
+
var Mt = e.sibling(et);
|
|
590
|
+
{
|
|
591
|
+
var lr = (t) => {
|
|
592
|
+
var r = Br();
|
|
593
|
+
e.each(r, 21, ae, e.index, (n, s, v) => {
|
|
594
|
+
var x = e.comment(), y = e.first_child(x);
|
|
595
|
+
{
|
|
596
|
+
var m = (c) => {
|
|
597
|
+
const N = e.derived(() => e.get(l).get(e.get(s).id)), k = e.derived(() => e.get(ie) === e.get(s).id);
|
|
598
|
+
var d = jr();
|
|
599
|
+
e.set_style(d, "", {}, { "animation-delay": `${v * 25}ms` });
|
|
600
|
+
var g = e.child(d), D = e.sibling(g);
|
|
601
|
+
{
|
|
602
|
+
var S = (V) => {
|
|
603
|
+
var K = Vr(), _ = e.first_child(K), M = e.child(_, !0);
|
|
604
|
+
e.reset(_);
|
|
605
|
+
var j = e.sibling(_), ee = e.child(j, !0);
|
|
606
|
+
e.reset(j), e.template_effect(
|
|
607
|
+
(tt, Ze) => {
|
|
608
|
+
e.set_text(M, tt), e.set_text(ee, Ze);
|
|
609
|
+
},
|
|
610
|
+
[
|
|
611
|
+
() => mt(e.get(s).label),
|
|
612
|
+
() => Ae(e.get(s).reasonCode)
|
|
613
|
+
]
|
|
614
|
+
), e.append(V, K);
|
|
615
|
+
};
|
|
616
|
+
e.if(D, (V) => {
|
|
617
|
+
e.get(k) && V(S);
|
|
618
|
+
});
|
|
619
|
+
}
|
|
620
|
+
e.reset(d), e.template_effect(() => {
|
|
621
|
+
e.set_attribute(d, "transform", `translate(${e.get(N).x ?? ""}, ${e.get(N).y ?? ""})`), e.set_attribute(g, "stroke-width", e.get(k) ? 1.6 : 1.2), e.set_attribute(g, "opacity", e.get(k) ? 0.66 : 0.4);
|
|
622
|
+
}), e.event("mouseenter", d, () => e.set(ie, e.get(s).id, !0)), e.event("mouseleave", d, () => e.set(ie, null)), e.append(c, d);
|
|
623
|
+
}, p = e.derived(() => e.get(l).has(e.get(s).id));
|
|
624
|
+
e.if(y, (c) => {
|
|
625
|
+
e.get(p) && c(m);
|
|
626
|
+
});
|
|
627
|
+
}
|
|
628
|
+
e.append(n, x);
|
|
629
|
+
}), e.reset(r), e.append(t, r);
|
|
630
|
+
};
|
|
631
|
+
e.if(Mt, (t) => {
|
|
632
|
+
re() && ae().length > 0 && t(lr);
|
|
633
|
+
});
|
|
634
|
+
}
|
|
635
|
+
var Nt = e.sibling(Mt);
|
|
636
|
+
e.each(Nt, 21, Y, e.index, (t, r, n) => {
|
|
637
|
+
var s = e.comment(), v = e.first_child(s);
|
|
638
|
+
{
|
|
639
|
+
var x = (m) => {
|
|
640
|
+
const p = e.derived(() => e.get(l).get(e.get(r).id)), c = e.derived(() => st(e.get(r))), N = e.derived(() => Gt(e.get(r))), k = e.derived(() => Ht(e.get(r))), d = e.derived(() => lt(e.get(r).id)), g = e.derived(() => e.get(h) === e.get(r).id), D = e.derived(() => pe().includes(e.get(r).id));
|
|
641
|
+
var S = ni();
|
|
642
|
+
let V;
|
|
643
|
+
e.set_style(S, "", {}, { "animation-delay": `${n * 30}ms` });
|
|
644
|
+
var K = e.child(S);
|
|
645
|
+
{
|
|
646
|
+
var _ = (u) => {
|
|
647
|
+
var i = Jr();
|
|
648
|
+
e.template_effect(
|
|
649
|
+
(b) => {
|
|
650
|
+
e.set_attribute(i, "r", e.get(c) + 6), e.set_attribute(i, "stroke", b);
|
|
651
|
+
},
|
|
652
|
+
[() => Rt(e.get(r))]
|
|
653
|
+
), e.append(u, i);
|
|
654
|
+
};
|
|
655
|
+
e.if(K, (u) => {
|
|
656
|
+
e.get(g) && u(_);
|
|
657
|
+
});
|
|
658
|
+
}
|
|
659
|
+
var M = e.sibling(K);
|
|
660
|
+
{
|
|
661
|
+
var j = (u) => {
|
|
662
|
+
var i = Kr();
|
|
663
|
+
e.template_effect(() => e.set_attribute(i, "r", e.get(c) + 4)), e.append(u, i);
|
|
664
|
+
};
|
|
665
|
+
e.if(M, (u) => {
|
|
666
|
+
e.get(d) && !e.get(g) && u(j);
|
|
667
|
+
});
|
|
668
|
+
}
|
|
669
|
+
var ee = e.sibling(M);
|
|
670
|
+
{
|
|
671
|
+
var tt = (u) => {
|
|
672
|
+
var i = qr();
|
|
673
|
+
e.template_effect(() => e.set_attribute(i, "r", e.get(c) + 9)), e.append(u, i);
|
|
674
|
+
};
|
|
675
|
+
e.if(ee, (u) => {
|
|
676
|
+
e.get(D) && u(tt);
|
|
677
|
+
});
|
|
678
|
+
}
|
|
679
|
+
var Ze = e.sibling(ee);
|
|
680
|
+
{
|
|
681
|
+
var vr = (u) => {
|
|
682
|
+
var i = Ur();
|
|
683
|
+
e.set_style(i, "", {}, { cursor: "pointer" }), e.template_effect(
|
|
684
|
+
(b, Z, q, U) => {
|
|
685
|
+
e.set_attribute(i, "r", e.get(c)), e.set_attribute(i, "fill", b), e.set_attribute(i, "stroke", Z), e.set_attribute(i, "opacity", q), e.set_attribute(i, "aria-label", U), e.set_attribute(i, "aria-pressed", e.get(g));
|
|
686
|
+
},
|
|
687
|
+
[
|
|
688
|
+
() => ve(e.get(r)),
|
|
689
|
+
() => he(e.get(r)),
|
|
690
|
+
() => Me(e.get(r).id),
|
|
691
|
+
() => Ye(e.get(r))
|
|
692
|
+
]
|
|
693
|
+
), e.delegated("click", i, () => _e(e.get(r).id)), e.event("mouseenter", i, () => Ie(e.get(r).id)), e.event("mouseleave", i, Pe), e.delegated("keydown", i, (b) => Le(b, e.get(r).id)), e.event("focus", i, () => Te(e.get(r).id)), e.event("blur", i, Se), e.append(u, i);
|
|
694
|
+
}, hr = (u) => {
|
|
695
|
+
var i = Qr();
|
|
696
|
+
e.set_style(i, "", {}, { cursor: "pointer" }), e.template_effect(
|
|
697
|
+
(b, Z, q, U) => {
|
|
698
|
+
e.set_attribute(i, "x", -e.get(c)), e.set_attribute(i, "y", -e.get(c)), e.set_attribute(i, "width", e.get(c) * 2), e.set_attribute(i, "height", e.get(c) * 2), e.set_attribute(i, "fill", b), e.set_attribute(i, "stroke", Z), e.set_attribute(i, "opacity", q), e.set_attribute(i, "aria-label", U), e.set_attribute(i, "aria-pressed", e.get(g));
|
|
699
|
+
},
|
|
700
|
+
[
|
|
701
|
+
() => ve(e.get(r)),
|
|
702
|
+
() => he(e.get(r)),
|
|
703
|
+
() => Me(e.get(r).id),
|
|
704
|
+
() => Ye(e.get(r))
|
|
705
|
+
]
|
|
706
|
+
), e.delegated("click", i, () => _e(e.get(r).id)), e.event("mouseenter", i, () => Ie(e.get(r).id)), e.event("mouseleave", i, Pe), e.delegated("keydown", i, (b) => Le(b, e.get(r).id)), e.event("focus", i, () => Te(e.get(r).id)), e.event("blur", i, Se), e.append(u, i);
|
|
707
|
+
}, _r = (u) => {
|
|
708
|
+
var i = $r();
|
|
709
|
+
e.set_style(i, "", {}, { cursor: "pointer" }), e.template_effect(
|
|
710
|
+
(b, Z, q, U, De) => {
|
|
711
|
+
e.set_attribute(i, "points", b), e.set_attribute(i, "fill", Z), e.set_attribute(i, "stroke", q), e.set_attribute(i, "opacity", U), e.set_attribute(i, "aria-label", De), e.set_attribute(i, "aria-pressed", e.get(g));
|
|
712
|
+
},
|
|
713
|
+
[
|
|
714
|
+
() => Vt(e.get(c)),
|
|
715
|
+
() => ve(e.get(r)),
|
|
716
|
+
() => he(e.get(r)),
|
|
717
|
+
() => Me(e.get(r).id),
|
|
718
|
+
() => Ye(e.get(r))
|
|
719
|
+
]
|
|
720
|
+
), e.delegated("click", i, () => _e(e.get(r).id)), e.event("mouseenter", i, () => Ie(e.get(r).id)), e.event("mouseleave", i, Pe), e.delegated("keydown", i, (b) => Le(b, e.get(r).id)), e.event("focus", i, () => Te(e.get(r).id)), e.event("blur", i, Se), e.append(u, i);
|
|
721
|
+
}, mr = (u) => {
|
|
722
|
+
var i = ei();
|
|
723
|
+
e.set_style(i, "", {}, { cursor: "pointer" }), e.template_effect(
|
|
724
|
+
(b, Z, q, U, De) => {
|
|
725
|
+
e.set_attribute(i, "points", b), e.set_attribute(i, "fill", Z), e.set_attribute(i, "stroke", q), e.set_attribute(i, "opacity", U), e.set_attribute(i, "aria-label", De), e.set_attribute(i, "aria-pressed", e.get(g));
|
|
726
|
+
},
|
|
727
|
+
[
|
|
728
|
+
() => jt(e.get(c)),
|
|
729
|
+
() => ve(e.get(r)),
|
|
730
|
+
() => he(e.get(r)),
|
|
731
|
+
() => Me(e.get(r).id),
|
|
732
|
+
() => Ye(e.get(r))
|
|
733
|
+
]
|
|
734
|
+
), e.delegated("click", i, () => _e(e.get(r).id)), e.event("mouseenter", i, () => Ie(e.get(r).id)), e.event("mouseleave", i, Pe), e.delegated("keydown", i, (b) => Le(b, e.get(r).id)), e.event("focus", i, () => Te(e.get(r).id)), e.event("blur", i, Se), e.append(u, i);
|
|
735
|
+
}, pr = (u) => {
|
|
736
|
+
var i = ti();
|
|
737
|
+
e.set_style(i, "", {}, { cursor: "pointer" }), e.template_effect(
|
|
738
|
+
(b, Z, q, U, De, Mr) => {
|
|
739
|
+
e.set_attribute(i, "x", -(e.get(c) * 1.3)), e.set_attribute(i, "y", -(e.get(c) * 0.82)), e.set_attribute(i, "width", e.get(c) * 2.6), e.set_attribute(i, "height", e.get(c) * 1.64), e.set_attribute(i, "rx", b), e.set_attribute(i, "ry", Z), e.set_attribute(i, "fill", q), e.set_attribute(i, "stroke", U), e.set_attribute(i, "opacity", De), e.set_attribute(i, "aria-label", Mr), e.set_attribute(i, "aria-pressed", e.get(g));
|
|
740
|
+
},
|
|
741
|
+
[
|
|
742
|
+
() => Math.max(6, e.get(c) * 0.42),
|
|
743
|
+
() => Math.max(6, e.get(c) * 0.42),
|
|
744
|
+
() => ve(e.get(r)),
|
|
745
|
+
() => he(e.get(r)),
|
|
746
|
+
() => Me(e.get(r).id),
|
|
747
|
+
() => Ye(e.get(r))
|
|
748
|
+
]
|
|
749
|
+
), e.delegated("click", i, () => _e(e.get(r).id)), e.event("mouseenter", i, () => Ie(e.get(r).id)), e.event("mouseleave", i, Pe), e.delegated("keydown", i, (b) => Le(b, e.get(r).id)), e.event("focus", i, () => Te(e.get(r).id)), e.event("blur", i, Se), e.append(u, i);
|
|
750
|
+
};
|
|
751
|
+
e.if(Ze, (u) => {
|
|
752
|
+
e.get(N) === "circle" ? u(vr) : e.get(N) === "square" ? u(hr, 1) : e.get(N) === "diamond" ? u(_r, 2) : e.get(N) === "hexagon" ? u(mr, 3) : u(pr, -1);
|
|
753
|
+
});
|
|
754
|
+
}
|
|
755
|
+
var It = e.sibling(Ze);
|
|
756
|
+
{
|
|
757
|
+
var br = (u) => {
|
|
758
|
+
var i = ri(), b = e.child(i, !0);
|
|
759
|
+
e.reset(i), e.template_effect(() => {
|
|
760
|
+
e.set_attribute(i, "font-size", e.get(k).length > 1 ? 8 : 10), e.set_text(b, e.get(k));
|
|
761
|
+
}), e.append(u, i);
|
|
762
|
+
};
|
|
763
|
+
e.if(It, (u) => {
|
|
764
|
+
e.get(k) && u(br);
|
|
765
|
+
});
|
|
766
|
+
}
|
|
767
|
+
var He = e.sibling(It);
|
|
768
|
+
let Pt;
|
|
769
|
+
var xr = e.child(He, !0);
|
|
770
|
+
e.reset(He);
|
|
771
|
+
var yr = e.sibling(He);
|
|
772
|
+
{
|
|
773
|
+
var kr = (u) => {
|
|
774
|
+
var i = ii(), b = e.child(i, !0);
|
|
775
|
+
e.reset(i), e.template_effect(
|
|
776
|
+
(Z) => {
|
|
777
|
+
e.set_attribute(i, "y", e.get(c) + 31), e.set_text(b, Z);
|
|
778
|
+
},
|
|
779
|
+
[() => Tt(e.get(r))]
|
|
780
|
+
), e.append(u, i);
|
|
781
|
+
}, wr = e.derived(() => pt(e.get(r).id) && Tt(e.get(r)));
|
|
782
|
+
e.if(yr, (u) => {
|
|
783
|
+
e.get(wr) && u(kr);
|
|
784
|
+
});
|
|
785
|
+
}
|
|
786
|
+
e.reset(S), e.template_effect(
|
|
787
|
+
(u, i) => {
|
|
788
|
+
V = e.set_class(S, 0, "graph-node", null, V, {
|
|
789
|
+
highlighted: e.get(d),
|
|
790
|
+
selected: e.get(g),
|
|
791
|
+
pinned: e.get(D)
|
|
792
|
+
}), e.set_attribute(S, "transform", `translate(${e.get(p).x ?? ""}, ${e.get(p).y ?? ""})`), e.set_attribute(He, "y", e.get(c) + 18), Pt = e.set_class(He, 0, "node-label svelte-7bxg53", null, Pt, u), e.set_text(xr, i);
|
|
793
|
+
},
|
|
794
|
+
[
|
|
795
|
+
() => ({ "is-visible": pt(e.get(r).id) }),
|
|
796
|
+
() => mt(e.get(r).label)
|
|
797
|
+
]
|
|
798
|
+
), e.append(m, S);
|
|
799
|
+
}, y = e.derived(() => e.get(l).has(e.get(r).id));
|
|
800
|
+
e.if(v, (m) => {
|
|
801
|
+
e.get(y) && m(x);
|
|
802
|
+
});
|
|
803
|
+
}
|
|
804
|
+
e.append(t, s);
|
|
805
|
+
}), e.reset(Nt), e.reset($e), e.reset(F), e.bind_this(F, (t) => e.set(C, t), () => e.get(C));
|
|
806
|
+
var Et = e.sibling(F, 2);
|
|
807
|
+
{
|
|
808
|
+
var cr = (t) => {
|
|
809
|
+
var r = ai(), n = e.first_child(r), s = e.sibling(n, 2);
|
|
810
|
+
Xr(s, {
|
|
811
|
+
get node() {
|
|
812
|
+
return e.get(ze);
|
|
813
|
+
},
|
|
814
|
+
get edges() {
|
|
815
|
+
return z();
|
|
816
|
+
},
|
|
817
|
+
get nodes() {
|
|
818
|
+
return Y();
|
|
819
|
+
},
|
|
820
|
+
get position() {
|
|
821
|
+
return e.get(we);
|
|
822
|
+
},
|
|
823
|
+
onClose: ft,
|
|
824
|
+
onJumpToReferences: Qt
|
|
825
|
+
}), e.delegated("click", n, ft), e.append(t, r);
|
|
826
|
+
};
|
|
827
|
+
e.if(Et, (t) => {
|
|
828
|
+
Ve() && e.get(ze) && e.get(we) && t(cr);
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
var dr = e.sibling(Et, 2);
|
|
832
|
+
{
|
|
833
|
+
var gr = (t) => {
|
|
834
|
+
var r = gi();
|
|
835
|
+
let n;
|
|
836
|
+
var s = e.child(r), v = e.child(s), x = e.sibling(v);
|
|
837
|
+
{
|
|
838
|
+
var y = (_) => {
|
|
839
|
+
var M = oi();
|
|
840
|
+
e.append(_, M);
|
|
841
|
+
};
|
|
842
|
+
e.if(x, (_) => {
|
|
843
|
+
e.get(T).isGhost && _(y);
|
|
844
|
+
});
|
|
845
|
+
}
|
|
846
|
+
e.reset(s);
|
|
847
|
+
var m = e.sibling(s, 2), p = e.child(m), c = e.child(p);
|
|
848
|
+
e.reset(p);
|
|
849
|
+
var N = e.sibling(p, 2);
|
|
850
|
+
{
|
|
851
|
+
var k = (_) => {
|
|
852
|
+
var M = si(), j = e.child(M);
|
|
853
|
+
e.reset(M), e.template_effect((ee) => e.set_text(j, `confidence ${ee ?? ""}%`), [() => (e.get(rt) * 100).toFixed(0)]), e.append(_, M);
|
|
854
|
+
};
|
|
855
|
+
e.if(N, (_) => {
|
|
856
|
+
e.get(rt) !== null && _(k);
|
|
857
|
+
});
|
|
858
|
+
}
|
|
859
|
+
var d = e.sibling(N, 2);
|
|
860
|
+
{
|
|
861
|
+
var g = (_) => {
|
|
862
|
+
var M = li(), j = e.child(M, !0);
|
|
863
|
+
e.reset(M), e.template_effect((ee) => e.set_text(j, ee), [() => Ae(e.get(it))]), e.append(_, M);
|
|
864
|
+
};
|
|
865
|
+
e.if(d, (_) => {
|
|
866
|
+
e.get(it) && _(g);
|
|
867
|
+
});
|
|
868
|
+
}
|
|
869
|
+
e.reset(m);
|
|
870
|
+
var D = e.sibling(m, 2);
|
|
871
|
+
{
|
|
872
|
+
var S = (_) => {
|
|
873
|
+
var M = ci(), j = e.child(M);
|
|
874
|
+
e.reset(M), e.template_effect(() => e.set_text(j, `source: ${e.get(nt) ?? ""}`)), e.append(_, M);
|
|
875
|
+
};
|
|
876
|
+
e.if(D, (_) => {
|
|
877
|
+
e.get(nt) && _(S);
|
|
878
|
+
});
|
|
879
|
+
}
|
|
880
|
+
var V = e.sibling(D, 2);
|
|
881
|
+
{
|
|
882
|
+
var K = (_) => {
|
|
883
|
+
var M = di();
|
|
884
|
+
e.delegated("click", M, ut), e.append(_, M);
|
|
885
|
+
};
|
|
886
|
+
e.if(V, (_) => {
|
|
887
|
+
e.get(a) && _(K);
|
|
888
|
+
});
|
|
889
|
+
}
|
|
890
|
+
e.reset(r), e.template_effect(
|
|
891
|
+
(_) => {
|
|
892
|
+
n = e.set_style(r, "", n, {
|
|
893
|
+
left: `${e.get(fe).x ?? ""}px`,
|
|
894
|
+
top: `${e.get(fe).y ?? ""}px`
|
|
895
|
+
}), e.set_text(v, `${e.get(T).edge.type ?? ""} `), e.set_text(c, `pass ${_ ?? ""}`);
|
|
896
|
+
},
|
|
897
|
+
[
|
|
898
|
+
() => Ae(Jt(e.get(T).edge))
|
|
899
|
+
]
|
|
900
|
+
), e.append(t, r);
|
|
901
|
+
};
|
|
902
|
+
e.if(dr, (t) => {
|
|
903
|
+
e.get(T) && e.get(fe) && t(gr);
|
|
904
|
+
});
|
|
905
|
+
}
|
|
906
|
+
e.reset(Ge);
|
|
907
|
+
var Ct = e.sibling(Ge, 2), ur = e.child(Ct);
|
|
908
|
+
{
|
|
909
|
+
var fr = (t) => {
|
|
910
|
+
const r = e.derived(() => Y().find((s) => s.id === e.get(h)));
|
|
911
|
+
var n = e.text();
|
|
912
|
+
e.template_effect(() => {
|
|
913
|
+
var s;
|
|
914
|
+
return e.set_text(n, `${((s = e.get(r)) == null ? void 0 : s.label) ?? ""} selected`);
|
|
915
|
+
}), e.append(t, n);
|
|
916
|
+
};
|
|
917
|
+
e.if(ur, (t) => {
|
|
918
|
+
e.get(h) && t(fr);
|
|
919
|
+
});
|
|
920
|
+
}
|
|
921
|
+
e.reset(Ct), e.template_effect(() => {
|
|
922
|
+
e.set_attribute(F, "width", e.get(W)), e.set_attribute(F, "height", e.get(H)), e.set_text(or, `A visualization of ${Y().length ?? ""} nodes and ${z().length ?? ""} edges representing sources and claims.
|
|
923
|
+
Use tab to navigate between nodes, enter to select, and escape to deselect.`), e.set_attribute(Qe, "width", e.get(W)), e.set_attribute(Qe, "height", e.get(H)), kt = e.set_style($e, "", kt, {
|
|
924
|
+
transform: "translate(" + e.get(w) + "px, " + e.get(P) + "px) scale(" + e.get(f) + ")",
|
|
925
|
+
"transform-origin": "0 0"
|
|
926
|
+
});
|
|
927
|
+
}), e.event("wheel", F, tr), e.delegated("pointerdown", F, rr), e.delegated("pointermove", F, ir), e.delegated("pointerup", F, _t), e.event("pointercancel", F, _t), e.bind_element_size(Ge, "clientWidth", (t) => e.set(ne, t)), e.bind_element_size(Ge, "clientHeight", (t) => e.set(ye, t)), e.append(te, bt), e.pop();
|
|
928
|
+
}
|
|
929
|
+
e.delegate([
|
|
930
|
+
"click",
|
|
931
|
+
"pointerdown",
|
|
932
|
+
"pointermove",
|
|
933
|
+
"pointerup",
|
|
934
|
+
"keydown"
|
|
935
|
+
]);
|
|
936
|
+
export {
|
|
937
|
+
mi as GraphCanvas,
|
|
938
|
+
Xr as NodeDetail,
|
|
939
|
+
St as graphCanvasEdgeKey
|
|
940
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SvelteComponent as default } from 'svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SvelteComponent as default } from 'svelte';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export type GraphCanvasNodeShape = 'circle' | 'square' | 'diamond' | 'hexagon' | 'rounded-rect';
|
|
2
|
+
export interface GraphCanvasNodeSemanticStyle {
|
|
3
|
+
kind: string;
|
|
4
|
+
shape: GraphCanvasNodeShape;
|
|
5
|
+
fill: string;
|
|
6
|
+
stroke: string;
|
|
7
|
+
glyph?: string;
|
|
8
|
+
radius?: number;
|
|
9
|
+
state?: 'default' | 'verified' | 'unresolved' | 'contradicted' | 'synthesis';
|
|
10
|
+
}
|
|
11
|
+
export interface GraphCanvasEdgeSemanticStyle {
|
|
12
|
+
kind: string;
|
|
13
|
+
stroke: string;
|
|
14
|
+
strokeWidth?: number;
|
|
15
|
+
dasharray?: string;
|
|
16
|
+
marker?: 'arrow-blue' | 'arrow-teal' | 'arrow-coral' | 'arrow-amber' | 'arrow-purple' | 'none';
|
|
17
|
+
state?: 'default' | 'verified' | 'unresolved' | 'contradicted' | 'synthesis';
|
|
18
|
+
}
|
|
19
|
+
export declare function graphCanvasEdgeKey(edge: {
|
|
20
|
+
from: string;
|
|
21
|
+
to: string;
|
|
22
|
+
type: string;
|
|
23
|
+
}): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.node-detail.svelte-vs5hf2{position:absolute;width:280px;max-height:400px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 8px 24px #0006;z-index:100;overflow:hidden;display:flex;flex-direction:column;transform:translate(-50%,-100%) translateY(-20px);animation:svelte-vs5hf2-detail-enter .25s cubic-bezier(.34,1.56,.64,1) both}@keyframes svelte-vs5hf2-detail-enter{0%{opacity:0;transform:translate(-50%,-100%) translateY(-10px) scale(.95)}to{opacity:1;transform:translate(-50%,-100%) translateY(-20px) scale(1)}}.detail-header.svelte-vs5hf2{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);border-bottom:1px solid var(--color-border);gap:var(--space-2)}.detail-title.svelte-vs5hf2{margin:0;font-size:var(--text-ui);font-family:var(--font-ui);display:flex;align-items:center;gap:var(--space-2);flex:1}.type-badge.svelte-vs5hf2,.phase-badge.svelte-vs5hf2{padding:2px 6px;border-radius:var(--radius-sm);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.phase-badge.svelte-vs5hf2{background:transparent;opacity:.8}.close-button.svelte-vs5hf2{background:transparent;border:none;color:var(--color-muted);cursor:pointer;padding:var(--space-1);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.close-button.svelte-vs5hf2:hover{color:var(--color-text);background:var(--color-surface)}.close-button.svelte-vs5hf2:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.detail-body.svelte-vs5hf2{padding:var(--space-3);overflow-y:auto;flex:1}.node-label.svelte-vs5hf2{margin:0 0 var(--space-3) 0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text)}.connections.svelte-vs5hf2{margin-top:var(--space-3)}.connections-heading.svelte-vs5hf2{margin:0 0 var(--space-2) 0;font-size:var(--text-ui);font-family:var(--font-ui);color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em}.connection-list.svelte-vs5hf2{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.trace-tag-list.svelte-vs5hf2{display:flex;flex-wrap:wrap;gap:6px}.trace-tag.svelte-vs5hf2{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;padding:2px 8px;font-family:var(--font-ui);font-size:.65rem;text-transform:uppercase;letter-spacing:.04em}.trace-meta-list.svelte-vs5hf2{display:flex;flex-direction:column;gap:6px}.trace-meta-row.svelte-vs5hf2{margin:0;font-family:var(--font-ui);font-size:.72rem;color:var(--color-muted);line-height:1.35}.connection-item.svelte-vs5hf2{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;line-height:1.4}.connection-direction.svelte-vs5hf2{color:var(--color-dim);font-family:var(--font-ui);flex-shrink:0}.edge-type.svelte-vs5hf2{color:var(--color-muted);font-size:.75rem;font-family:var(--font-ui);flex-shrink:0}.connected-node.svelte-vs5hf2{display:flex;align-items:center;gap:6px;color:var(--color-text);flex:1;min-width:0}.node-type-indicator.svelte-vs5hf2{width:6px;height:6px;border-radius:50%;flex-shrink:0}.jump-button.svelte-vs5hf2{margin-top:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);background:var(--color-sage-bg);border:1px solid var(--color-sage-border);color:var(--color-sage);font-family:var(--font-ui);font-size:var(--text-ui);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-2);transition:var(--transition-fast)}.jump-button.svelte-vs5hf2:hover{background:var(--color-sage-border)}.jump-button.svelte-vs5hf2:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}html.reduce-motion .node-detail.svelte-vs5hf2{animation:none;transition:none}.graph-canvas-container.svelte-7bxg53{position:relative;width:100%;min-height:400px;height:100%;max-height:100%;overflow:hidden;background:var(--color-bg)}.graph-svg.svelte-7bxg53{display:block;max-width:100%;height:auto;touch-action:none;cursor:grab}.graph-svg.svelte-7bxg53:active{cursor:grabbing}.graph-controls.svelte-7bxg53{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:80}.graph-status-chip.svelte-7bxg53{position:absolute;top:10px;left:10px;z-index:80;border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 90%,transparent);color:var(--color-text);border-radius:var(--radius-sm);padding:5px 8px;font-family:var(--font-ui);font-size:var(--text-meta);letter-spacing:.04em}.graph-control-btn.svelte-7bxg53{border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 88%,transparent);color:var(--color-text);border-radius:var(--radius-sm);padding:5px 8px;font-family:var(--font-ui);font-size:var(--text-meta);letter-spacing:.04em;cursor:pointer}.graph-control-btn.svelte-7bxg53:hover{border-color:var(--color-sage-border)}.graph-edge.svelte-7bxg53,.ghost-edge.svelte-7bxg53{cursor:pointer;transition:opacity .12s ease,stroke-width .12s ease,stroke .12s ease;stroke-linecap:round}.ghost-edge.svelte-7bxg53{stroke-linecap:round}.ghost-node.svelte-7bxg53{cursor:default}.ghost-node-label.svelte-7bxg53{paint-order:stroke;stroke:#07080af2;stroke-width:2px;text-transform:lowercase}.node-label.svelte-7bxg53{opacity:0;transition:opacity .12s ease;-webkit-user-select:none;user-select:none;paint-order:stroke;stroke:#07080af5;stroke-width:3px;font-weight:500;letter-spacing:.02em}.node-glyph.svelte-7bxg53{font-weight:600;letter-spacing:.02em;paint-order:stroke;stroke:#07080ae6;stroke-width:2px;text-transform:uppercase}.node-label.is-visible.svelte-7bxg53{opacity:.95}.node-trace-label.svelte-7bxg53{opacity:.92;-webkit-user-select:none;user-select:none;paint-order:stroke;stroke:#07080af5;stroke-width:2px;letter-spacing:.02em;text-transform:lowercase}.detail-backdrop.svelte-7bxg53{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;z-index:90;-webkit-user-select:none;user-select:none}.edge-detail.svelte-7bxg53{position:absolute;transform:translate(-50%,-110%);z-index:92;border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 96%,transparent);border-radius:var(--radius-sm);padding:8px 10px;min-width:210px;max-width:min(320px,42vw);box-shadow:0 10px 24px #00000059;display:flex;flex-direction:column;gap:6px}.edge-detail-title.svelte-7bxg53{margin:0;font-family:var(--font-ui);font-size:var(--text-ui);color:var(--color-text);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}.edge-detail-badge.svelte-7bxg53{border:1px solid var(--color-border);border-radius:999px;padding:1px 6px;font-size:.62rem;color:var(--color-muted)}.edge-chip-row.svelte-7bxg53{display:flex;flex-wrap:wrap;gap:6px}.edge-chip.svelte-7bxg53{border:1px solid var(--color-border);border-radius:999px;padding:2px 8px;font-family:var(--font-ui);font-size:.66rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}.edge-chip.is-reason.svelte-7bxg53{border-color:var(--color-copper-border);color:var(--color-copper)}.edge-detail-line.svelte-7bxg53{margin:0;font-family:var(--font-ui);font-size:.74rem;color:var(--color-muted);line-height:1.35}.edge-detail-close.svelte-7bxg53{align-self:flex-start;border:1px solid var(--color-border);background:transparent;color:var(--color-text);border-radius:var(--radius-sm);padding:3px 8px;font-family:var(--font-ui);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}.sr-only.svelte-7bxg53{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@restormel/ui-graph-svelte",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Svelte 5 graph canvas for Restormel Graph Contract v0 (ported from SOPHIA).",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/Allotment-Technology-Ltd/restormel-keys.git",
|
|
9
|
+
"directory": "packages/ui-graph-svelte"
|
|
10
|
+
},
|
|
11
|
+
"type": "module",
|
|
12
|
+
"main": "./dist/index.js",
|
|
13
|
+
"module": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"svelte": "./dist/index.js",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.js",
|
|
20
|
+
"svelte": "./dist/index.js"
|
|
21
|
+
},
|
|
22
|
+
"./styles.css": "./dist/ui-graph-svelte.css"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist"
|
|
26
|
+
],
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"svelte": "^5.0.0"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@restormel/graph-core": "0.1.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
35
|
+
"svelte": "^5.0.0",
|
|
36
|
+
"svelte-check": "^4.0.0",
|
|
37
|
+
"typescript": "^5.7.2",
|
|
38
|
+
"vite": "^6.4.2",
|
|
39
|
+
"vite-plugin-dts": "^4.0.0"
|
|
40
|
+
},
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "vite build",
|
|
46
|
+
"typecheck": "svelte-check --tsconfig ./tsconfig.json"
|
|
47
|
+
}
|
|
48
|
+
}
|