likec4 1.59.3 → 1.59.4

package/__app__/src/chunks/ProjectsOverview.mjs

@@ -1,8 +1,8 @@
 import "./rolldown-runtime.mjs";
 import { D as e, j as t } from "./hooks.mjs";
-import { A as n, D as r, F as i, H as a, L as o, O as s, R as c, a as l, at as u, c as d, d as f, f as p, h as m, l as h, m as g, n as _, o as v, p as y, pt as b, s as x, t as S, tt as C, u as w, x as T, z as E } from "./LikeC4Styles.mjs";
-import { on as ee } from "./libs/@mantine.mjs";
-import { M as te } from "./styled-system.mjs";
+import { A as n, D as r, F as i, I as a, O as o, Q as s, a as c, c as l, d as u, f as d, h as f, i as p, l as m, mt as h, n as g, nt as _, o as v, ot as y, r as b, s as x, t as S, tt as C, u as w, x as T, z as E } from "./LikeC4Styles.mjs";
+import { fn as ee } from "./libs/@mantine.mjs";
+import { I as te } from "./styled-system.mjs";
 import { C as ne, c as re, d as ie, g as ae, u as oe } from "./libs/@xyflow/react.mjs";
 import { n as D } from "./libs/fast-equals.mjs";
 import { _ as O, g as k, o as A, p as j, v as M, y as N } from "./libs/framer.mjs";
@@ -31,7 +31,7 @@ function projectNodeToXY({ id: e, x: t, y: n, width: r, height: i, ...a }) {
 		initialHeight: i,
 		draggable: !1,
 		deletable: !1,
-		zIndex: c.Element,
+		zIndex: _.Element,
 		style: {
 			width: r,
 			height: i
@@ -50,7 +50,7 @@ function projectEdgeToXY({ id: e, source: t, target: n, ...r }) {
 		source: t,
 		target: n,
 		type: "relationship",
-		zIndex: c.Edge,
+		zIndex: _.Edge,
 		deletable: !1,
 		data: {
 			id: e,
@@ -110,12 +110,12 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 		case "xyflow.mouse.enter.edge":
 		case "xyflow.mouse.leave.edge": {
 			let r = t.edge.id;
-			return { xyedges: e.xyedges.map((e) => e.id === r ? E.setHovered(e, n) : e) };
+			return { xyedges: e.xyedges.map((e) => e.id === r ? a.setHovered(e, n) : e) };
 		}
 		case "xyflow.mouse.enter.node":
 		case "xyflow.mouse.leave.node": {
 			let r = t.node.id;
-			return { xynodes: e.xynodes.map((e) => e.id === r ? E.setHovered(e, n) : e) };
+			return { xynodes: e.xynodes.map((e) => e.id === r ? a.setHovered(e, n) : e) };
 		}
 		default: ce(t);
 	}
@@ -130,13 +130,13 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 }), fitDiagram = (e) => Z.enqueueActions(({ context: t, event: n }) => {
 	let r = t.view.bounds, i;
 	e ? (r = e.bounds ?? t.view.bounds, i = e.duration) : n.type === "xyflow.fitDiagram" && (r = n.bounds ?? t.view.bounds, i = n.duration), i ??= 450;
-	let { width: a, height: s, panZoom: c, transform: l } = J(t.xystore).getState(), u = Math.max(1, l[2]), d = ne(r, a, s, o, u, t.fitViewPadding);
-	d.x = Math.round(d.x), d.y = Math.round(d.y);
-	let f = i > 0 ? {
+	let { width: a, height: o, panZoom: s, transform: c } = J(t.xystore).getState(), l = Math.max(1, c[2]), u = ne(r, a, o, C, l, t.fitViewPadding);
+	u.x = Math.round(u.x), u.y = Math.round(u.y);
+	let d = i > 0 ? {
 		duration: i,
 		interpolate: "smooth"
 	} : void 0;
-	c?.setViewport(d, f).catch((e) => {
+	s?.setViewport(u, d).catch((e) => {
 		console.error("Error during fitDiagram panZoom setViewport", { err: e });
 	}), X.write(null);
 }), restoreViewport = () => Z.enqueueActions(({ context: e, enqueue: t }) => {
@@ -234,20 +234,20 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 				I({ xyedges: [] }),
 				({ context: { navigateTo: e, xyflow: t, xystore: n }, self: r }) => {
 					se(t && e, "Invalid state, xyflow is undefined");
-					let { width: i, domNode: a } = J(n).getState(), s = b(Math.min(i * 7 / 9 / e.data.width), {
-						min: o,
+					let { width: i, domNode: a } = J(n).getState(), o = h(Math.min(i * 7 / 9 / e.data.width), {
+						min: C,
 						max: 2.5
-					}), c = {
-						x: Math.round(-s * e.position.x + (i - s * e.data.width) / 2),
-						y: Math.round(-s * e.position.y) + 50
-					}, l = t.getViewport(), u = a.querySelectorAll(`.react-flow__node-project:not([data-id="${e.id}"]) > *`), d = A(u, {
+					}), s = {
+						x: Math.round(-o * e.position.x + (i - o * e.data.width) / 2),
+						y: Math.round(-o * e.position.y) + 50
+					}, c = t.getViewport(), l = a.querySelectorAll(`.react-flow__node-project:not([data-id="${e.id}"]) > *`), u = A(l, {
 						opacity: 0,
 						scale: .9
 					}, {
 						visualDuration: .25,
 						delay: O(.08, { from: "center" })
-					}), f = N(1), p = k(f, [1, 0], [`translate(${l.x}px, ${l.y}px) scale(${l.zoom})`, `translate(${c.x}px, ${c.y}px) scale(${s})`]), m = M(a.querySelector(".xyflow__viewport"), { transform: p }), h = M(a.querySelector(`.react-flow__node-project:is([data-id="${e.id}"]) > *`), { opacity: f }), g = A(f, 0, {
-						delay: u.length > 3 ? .25 : 0,
+					}), d = N(1), f = k(d, [1, 0], [`translate(${c.x}px, ${c.y}px) scale(${c.zoom})`, `translate(${s.x}px, ${s.y}px) scale(${o})`]), p = M(a.querySelector(".xyflow__viewport"), { transform: f }), m = M(a.querySelector(`.react-flow__node-project:is([data-id="${e.id}"]) > *`), { opacity: d }), g = A(d, 0, {
+						delay: l.length > 3 ? .25 : 0,
 						type: "spring",
 						stiffness: 350,
 						damping: 40,
@@ -255,7 +255,7 @@ var Y = "likec4:projects-overview:lastViewport", X = {
 						visualDuration: .55
 					});
 					Promise.race([g.finished, sleep(750)]).then(() => {
-						m(), h(), g.stop(), d.stop(), r.send({
+						p(), m(), g.stop(), u.stop(), r.send({
 							type: "emit.navigate.to",
 							projectId: e.data.projectId
 						});
@@ -288,17 +288,17 @@ function useProjectsOverviewActor() {
 //#region ../diagram/src/projects-overview/panel/ProjectsOverviewPanel.tsx
 var ProjectsOverviewPanel = () => {
 	let e = G(1), t;
-	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ K(_.Root, { children: /* @__PURE__ */ q(_.Body, { children: [/* @__PURE__ */ K(_.Logo, {}), /* @__PURE__ */ K(_.Label, { children: "Projects Overview" })] }) }), e[0] = t) : t = e[0], t;
-}, fe = v((e) => {
-	let t = a(e.data.points);
-	return /* @__PURE__ */ q(g, {
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ K(g.Root, { children: /* @__PURE__ */ q(g.Body, { children: [/* @__PURE__ */ K(g.Logo, {}), /* @__PURE__ */ K(g.Label, { children: "Projects Overview" })] }) }), e[0] = t) : t = e[0], t;
+}, fe = p((e) => {
+	let t = E(e.data.points);
+	return /* @__PURE__ */ q(d, {
 		...e,
-		children: [/* @__PURE__ */ K(f, {
+		children: [/* @__PURE__ */ K(m, {
 			edgeProps: e,
 			svgPath: t
-		}), /* @__PURE__ */ K(p, {
+		}), /* @__PURE__ */ K(w, {
 			edgeProps: e,
-			children: /* @__PURE__ */ K(y, { edgeProps: e })
+			children: /* @__PURE__ */ K(u, { edgeProps: e })
 		})]
 	});
 });
@@ -314,33 +314,33 @@ function ProjectNode(e) {
 		});
 	}, t[0] = n, t[1] = e.data.id, t[2] = e.data.projectId, t[3] = t0) : t0 = t[3];
 	let r = ee(t0), i, a;
-	t[4] === e ? (i = t[5], a = t[6]) : (i = /* @__PURE__ */ K(x, { ...e }), a = /* @__PURE__ */ K(h, { ...e }), t[4] = e, t[5] = i, t[6] = a);
+	t[4] === e ? (i = t[5], a = t[6]) : (i = /* @__PURE__ */ K(c, { ...e }), a = /* @__PURE__ */ K(x, { ...e }), t[4] = e, t[5] = i, t[6] = a);
 	let o;
-	t[7] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ K(u, {}), t[7] = o) : o = t[7];
+	t[7] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ K(y, {}), t[7] = o) : o = t[7];
 	let s;
 	t[8] === r ? s = t[9] : (s = [{
 		key: "navigate",
 		icon: o,
 		onClick: r
 	}], t[8] = r, t[9] = s);
-	let c;
-	t[10] !== e || t[11] !== s ? (c = /* @__PURE__ */ K(w, {
+	let u;
+	t[10] !== e || t[11] !== s ? (u = /* @__PURE__ */ K(l, {
 		...e,
 		buttons: s
-	}), t[10] = e, t[11] = s, t[12] = c) : c = t[12];
+	}), t[10] = e, t[11] = s, t[12] = u) : u = t[12];
+	let d;
+	t[13] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ K(b, {}), t[13] = d) : d = t[13];
 	let f;
-	t[13] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ K(l, {}), t[13] = f) : f = t[13];
-	let p;
-	return t[14] !== e || t[15] !== i || t[16] !== a || t[17] !== c ? (p = /* @__PURE__ */ q(d, {
+	return t[14] !== e || t[15] !== i || t[16] !== a || t[17] !== u ? (f = /* @__PURE__ */ q(v, {
 		layout: !0,
 		nodeProps: e,
 		children: [
 			i,
 			a,
-			c,
-			f
+			u,
+			d
 		]
-	}, e.id), t[14] = e, t[15] = i, t[16] = a, t[17] = c, t[18] = p) : p = t[18], p;
+	}, e.id), t[14] = e, t[15] = i, t[16] = a, t[17] = u, t[18] = f) : f = t[18], f;
 }
 //#endregion
 //#region ../diagram/src/projects-overview/hooks.ts
@@ -360,8 +360,8 @@ var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) =>
 }), selectorEq = (e, t) => e.isActive === t.isActive && D(e.nodes, t.nodes) && D(e.edges, t.edges), $ = V((e) => {
 	let t = G(45), n, r;
 	t[0] === e ? (n = t[1], r = t[2]) : ({background: r, ...n} = e, t[0] = e, t[1] = n, t[2] = r);
-	let a = r === void 0 ? "dots" : r, o = useProjectsOverviewActor(), { isActive: s, nodes: c, edges: l } = useProjectsOverviewState(selector, selectorEq), u = useProjectsOverviewXYStoreApi(), d = s ? "initialized" : "not-initialized", f;
-	t[3] === d ? f = t[4] : (f = te(d, "projects-overview"), t[3] = d, t[4] = f);
+	let a = r === void 0 ? "dots" : r, o = useProjectsOverviewActor(), { isActive: c, nodes: l, edges: u } = useProjectsOverviewState(selector, selectorEq), d = useProjectsOverviewXYStoreApi(), f = c ? "initialized" : "not-initialized", p;
+	t[3] === f ? p = t[4] : (p = te(f, "projects-overview"), t[3] = f, t[4] = p);
 	let t4;
 	t[5] === o ? t4 = t[6] : (t4 = (e, t) => {
 		e.stopPropagation(), o.send({
@@ -369,36 +369,36 @@ var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) =>
 			node: t
 		});
 	}, t[5] = o, t[6] = t4);
-	let p = C(t4), t6;
+	let m = s(t4), t6;
 	t[7] === o ? t6 = t[8] : (t6 = (e, t) => {
 		e.stopPropagation(), o.send({
 			type: "xyflow.click.edge",
 			edge: t
 		});
 	}, t[7] = o, t[8] = t6);
-	let m = C(t6), t8;
+	let h = s(t6), t8;
 	t[9] === o ? t8 = t[10] : (t8 = (e) => {
 		e.stopPropagation(), o.send({ type: "xyflow.click.pane" });
 	}, t[9] = o, t[10] = t8);
-	let h = C(t8), t10;
+	let g = s(t8), t10;
 	t[11] === o ? t10 = t[12] : (t10 = (e) => {
 		e.stopPropagation(), o.send({ type: "xyflow.click.double" });
 	}, t[11] = o, t[12] = t10);
-	let g = C(t10), t12;
+	let _ = s(t10), t12;
 	t[13] === o ? t12 = t[14] : (t12 = (e) => {
 		o.send({
 			type: "xyflow.applyNodeChanges",
 			changes: e
 		});
 	}, t[13] = o, t[14] = t12);
-	let _ = C(t12), t14;
+	let v = s(t12), t14;
 	t[15] === o ? t14 = t[16] : (t14 = (e) => {
 		o.send({
 			type: "xyflow.applyEdgeChanges",
 			changes: e
 		});
 	}, t[15] = o, t[16] = t14);
-	let v = C(t14), t16;
+	let y = s(t14), t16;
 	t[17] === o ? t16 = t[18] : (t16 = (e, t) => {
 		o.send({
 			type: "xyflow.mouse.enter.edge",
@@ -406,7 +406,7 @@ var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) =>
 			event: e
 		});
 	}, t[17] = o, t[18] = t16);
-	let y = C(t16), t18;
+	let b = s(t16), t18;
 	t[19] === o ? t18 = t[20] : (t18 = (e, t) => {
 		o.send({
 			type: "xyflow.mouse.leave.edge",
@@ -414,46 +414,46 @@ var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) =>
 			event: e
 		});
 	}, t[19] = o, t[20] = t18);
-	let b = C(t18), t20;
+	let x = s(t18), t20;
 	t[21] === o ? t20 = t[22] : (t20 = (e, t) => {
 		o.send({
 			type: "xyflow.mouse.enter.node",
 			node: t
 		});
 	}, t[21] = o, t[22] = t20);
-	let x = C(t20), t22;
+	let S = s(t20), t22;
 	t[23] === o ? t22 = t[24] : (t22 = (e, t) => {
 		o.send({
 			type: "xyflow.mouse.leave.node",
 			node: t
 		});
 	}, t[23] = o, t[24] = t22);
-	let S = C(t22), t24;
-	t[25] !== o || t[26] !== u ? (t24 = (e) => {
+	let C = s(t22), t24;
+	t[25] !== o || t[26] !== d ? (t24 = (e) => {
 		o.send({
 			type: "xyflow.init",
 			xyflow: e,
-			xystore: u
+			xystore: d
 		});
-	}, t[25] = o, t[26] = u, t[27] = t24) : t24 = t[27];
-	let w = C(t24), T;
-	return t[28] !== a || t[29] !== l || t[30] !== c || t[31] !== n || t[32] !== g || t[33] !== _ || t[34] !== v || t[35] !== y || t[36] !== b || t[37] !== x || t[38] !== S || t[39] !== w || t[40] !== f || t[41] !== p || t[42] !== m || t[43] !== h ? (T = /* @__PURE__ */ K(i, {
-		nodes: c,
-		edges: l,
-		className: f,
+	}, t[25] = o, t[26] = d, t[27] = t24) : t24 = t[27];
+	let w = s(t24), T;
+	return t[28] !== a || t[29] !== u || t[30] !== l || t[31] !== n || t[32] !== _ || t[33] !== v || t[34] !== y || t[35] !== b || t[36] !== x || t[37] !== S || t[38] !== C || t[39] !== w || t[40] !== p || t[41] !== m || t[42] !== h || t[43] !== g ? (T = /* @__PURE__ */ K(i, {
+		nodes: l,
+		edges: u,
+		className: p,
 		nodeTypes: pe,
 		edgeTypes: me,
 		fitView: !1,
-		onNodeClick: p,
-		onEdgeClick: m,
-		onPaneClick: h,
-		onDoubleClick: g,
-		onNodesChange: _,
-		onEdgesChange: v,
-		onEdgeMouseEnter: y,
-		onEdgeMouseLeave: b,
-		onNodeMouseEnter: x,
-		onNodeMouseLeave: S,
+		onNodeClick: m,
+		onEdgeClick: h,
+		onPaneClick: g,
+		onDoubleClick: _,
+		onNodesChange: v,
+		onEdgesChange: y,
+		onEdgeMouseEnter: b,
+		onEdgeMouseLeave: x,
+		onNodeMouseEnter: S,
+		onNodeMouseLeave: C,
 		onInit: w,
 		nodesDraggable: !1,
 		nodesSelectable: !0,
@@ -461,7 +461,7 @@ var pe = { project: ProjectNode }, me = { relationship: fe }, selector = (e) =>
 		zoomable: !0,
 		background: a,
 		...n
-	}), t[28] = a, t[29] = l, t[30] = c, t[31] = n, t[32] = g, t[33] = _, t[34] = v, t[35] = y, t[36] = b, t[37] = x, t[38] = S, t[39] = w, t[40] = f, t[41] = p, t[42] = m, t[43] = h, t[44] = T) : T = t[44], T;
+	}), t[28] = a, t[29] = u, t[30] = l, t[31] = n, t[32] = _, t[33] = v, t[34] = y, t[35] = b, t[36] = x, t[37] = S, t[38] = C, t[39] = w, t[40] = p, t[41] = m, t[42] = h, t[43] = g, t[44] = T) : T = t[44], T;
 });
 $.displayName = "ProjectsOverviewXY";
 //#endregion
@@ -513,8 +513,8 @@ function ProjectsOverview({ view: t, onNavigateToProject: n, fitViewPadding: r =
 //#endregion
 //#region ../diagram/src/LikeC4ProjectsOverview.tsx
 function LikeC4ProjectsOverview({ view: e, className: t, onNavigateToProject: i, ...a }) {
-	let o = m(), c = T();
-	return i ??= o, /* @__PURE__ */ K(s, { children: /* @__PURE__ */ q(r, { children: [/* @__PURE__ */ K(S, { id: c }), /* @__PURE__ */ K(n, {
+	let s = f(), c = T();
+	return i ??= s, /* @__PURE__ */ K(o, { children: /* @__PURE__ */ q(r, { children: [/* @__PURE__ */ K(S, { rootSelector: `#${c}` }), /* @__PURE__ */ K(n, {
 		id: c,
 		className: t,
 		children: /* @__PURE__ */ K(ProjectsOverview, {
@@ -527,7 +527,7 @@ function LikeC4ProjectsOverview({ view: e, className: t, onNavigateToProject: i,
 //#endregion
 //#region src/pages/ProjectsOverview.tsx
 function ProjectsOverviewPage() {
-	let e = G(3), t = m(), n = le(), r;
+	let e = G(3), t = f(), n = le(), r;
 	return e[0] !== t || e[1] !== n ? (r = /* @__PURE__ */ K(LikeC4ProjectsOverview, {
 		view: n,
 		onNavigateToProject: t

package/__app__/src/chunks/es.mjs

@@ -297,7 +297,7 @@ async function embedBackground(e, t) {
 }
 async function embedImageNode(e, t) {
 	let n = isInstanceOfElement(e, HTMLImageElement);
-	if (!(n && !isDataUrl(e.src)) && !(isInstanceOfElement(e, SVGImageElement) && !isDataUrl(e.href.baseVal))) return;
+	if ((!n || isDataUrl(e.src)) && (!isInstanceOfElement(e, SVGImageElement) || isDataUrl(e.href.baseVal))) return;
 	let r = n ? e.src : e.href.baseVal, i = await resourceToDataURL(r, getMimeType(r), t);
 	await new Promise((t, r) => {
 		e.onload = t, e.onerror = r;