likec4 1.59.4 → 1.60.0

package/__app__/src/chunks/hooks.mjs

@@ -1,119 +1,139 @@
-import { i as o } from "./rolldown-runtime.mjs";
-import { i as s, u as c } from "./libs/@tanstack.mjs";
-import { ut as l } from "./libs/@mantine.mjs";
-import { I as u, k as d, o as f } from "./styled-system.mjs";
-import { n as p, t as m } from "./libs/fast-equals.mjs";
-import { b as h } from "./libs/framer.mjs";
-import { n as g } from "./libs/@xstate/react.mjs";
-import { createContext as _, createElement as v, forwardRef as y, use as b, useCallback as x, useContext as S, useEffect as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D, useSyncExternalStore as O } from "react";
-import { c as k } from "react/compiler-runtime";
-import { jsx as A } from "react/jsx-runtime";
-import { useLikeC4Projects as j } from "likec4:projects";
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/lazyDataLastImpl--3B10z3s.js
-function e$2(o, s, c) {
-	let r = (c) => o(c, ...s);
-	return c === void 0 ? r : Object.assign(r, {
-		lazy: c,
-		lazyArgs: s
+import { i as __name } from "./rolldown-runtime.mjs";
+import { i as useMatches, u as useParams } from "./libs/@tanstack.mjs";
+import { ut as Text } from "./libs/@mantine.mjs";
+import { I as cx, k as Box, o as markdownBlock } from "./styled-system.mjs";
+import { n as shallowEqual, t as deepEqual } from "./libs/fast-equals.mjs";
+import { t as listenKeys } from "./libs/nanostores.mjs";
+import { b as invariant } from "./libs/framer.mjs";
+import { n as useSelector } from "./libs/@xstate/react.mjs";
+import { createContext, createElement, forwardRef, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useLikeC4Projects } from "likec4:projects";
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/lazyDataLastImpl--3B10z3s.js
+function e$2(e, t, n) {
+	let r = (n) => e(n, ...t);
+	return n === void 0 ? r : Object.assign(r, {
+		lazy: n,
+		lazyArgs: t
 	});
 }
-o(e$2, "e");
+__name(e$2, "e");
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/purry.js
-function t$3(o, s, c) {
-	let l = o.length - s.length;
-	if (l === 0) return o(...s);
-	if (l === 1) return e$2(o, s, c);
-	throw Error("Wrong number of arguments");
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/purry.js
+function t$3(t, n, r) {
+	let i = t.length - n.length;
+	if (i === 0) return t(...n);
+	if (i === 1) return e$2(t, n, r);
+	throw Error(`Wrong number of arguments`);
 }
-o(t$3, "t");
+__name(t$3, "t");
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/utilityEvaluators-IxVD3t2o.js
-var M = {
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/utilityEvaluators-IxVD3t2o.js
+var t$2 = {
 	done: !1,
 	hasNext: !1
-}, N = /* @__PURE__ */ o((o) => ({
+};
+var r$3 = /* @__PURE__ */ __name((e) => ({
 	hasNext: !0,
-	next: o,
+	next: e,
 	done: !1
 }), "r");
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/pipe.js
-function t$1(o, ...s) {
-	let c = o, l = s.map((o) => "lazy" in o ? {
-		lazyEvaluator: o.lazy(...o.lazyArgs),
-		isSingle: o.lazy.single ?? !1,
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/pipe.js
+function t$1(e, ...t) {
+	let i = e;
+	let o = t.map((e) => `lazy` in e ? {
+		lazyEvaluator: e.lazy(...e.lazyArgs),
+		isSingle: e.lazy.single ?? !1,
 		index: 0,
 		items: []
-	} : void 0), u = 0;
-	for (; u < s.length;) {
-		if (l[u] === void 0 || !a$1(c)) {
-			let o = s[u];
-			c = o(c), u += 1;
+	} : void 0);
+	let s = 0;
+	for (; s < t.length;) {
+		if (o[s] === void 0 || !a$1(i)) {
+			let e = t[s];
+			i = e(i), s += 1;
 			continue;
 		}
-		let o = n$1(l, u), d = r$2(c, o), { isSingle: f } = o.at(-1);
-		c = f ? d[0] : d, u += o.length;
+		let e = n$1(o, s), c = r$2(i, e), { isSingle: l } = e.at(-1);
+		i = l ? c[0] : c, s += e.length;
 	}
-	return c;
+	return i;
 }
-o(t$1, "t");
-function n$1(o, s) {
-	let c = [];
-	for (let l = s; l < o.length; l++) {
-		let s = o[l];
-		if (s === void 0 || (c.push(s), s.isSingle)) break;
+__name(t$1, "t");
+function n$1(e, t) {
+	let n = [];
+	for (let r = t; r < e.length; r++) {
+		let t = e[r];
+		if (t === void 0 || (n.push(t), t.isSingle)) break;
 	}
-	return c;
+	return n;
 }
-o(n$1, "n");
-function r$2(o, s) {
-	let c = [];
-	for (let l of o) if (i$1(l, c, s)) break;
-	return c;
+__name(n$1, "n");
+function r$2(e, t) {
+	let n = [];
+	for (let r of e) if (i$1(r, n, t)) break;
+	return n;
 }
-o(r$2, "r");
-function i$1(o, s, c) {
-	if (c.length === 0) return s.push(o), !1;
-	let l = o, u = M, d = !1;
-	for (let [o, { items: f, lazyEvaluator: p }] of c.entries()) if (f.push(l), u = p(l, f.length - 1, f), u.done && (d = !0), u.hasNext) {
-		if (u.hasMany ?? !1) {
-			for (let l of u.next) if (i$1(l, s, c.slice(o + 1))) return !0;
-			return d;
+__name(r$2, "r");
+function i$1(t, n, r) {
+	if (r.length === 0) return n.push(t), !1;
+	let a = t;
+	let o = t$2;
+	let s = !1;
+	for (let [e, { items: t, lazyEvaluator: c }] of r.entries()) if (t.push(a), o = c(a, t.length - 1, t), o.done && (s = !0), o.hasNext) {
+		if (o.hasMany ?? !1) {
+			for (let t of o.next) if (i$1(t, n, r.slice(e + 1))) return !0;
+			return s;
 		}
-		l = u.next;
+		a = o.next;
 	} else break;
-	return u.hasNext && s.push(l), d;
+	return o.hasNext && n.push(a), s;
 }
-o(i$1, "i");
-function a$1(o) {
-	return typeof o == "string" || typeof o == "object" && !!o && Symbol.iterator in o;
+__name(i$1, "i");
+function a$1(e) {
+	return typeof e == `string` || typeof e == `object` && !!e && Symbol.iterator in e;
 }
-o(a$1, "a");
+__name(a$1, "a");
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/toSingle-DiQSixar.js
-var P = /* @__PURE__ */ o((o) => Object.assign(o, { single: !0 }), "e");
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/toSingle-DiQSixar.js
+var e$1 = /* @__PURE__ */ __name((e) => Object.assign(e, { single: !0 }), "e");
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/find.js
-function r$1(...o) {
-	return t$3(i, o, P(a));
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/find.js
+function r$1(...t) {
+	return t$3(i, t, e$1(a));
 }
-o(r$1, "r");
-var i = (o, s) => o.find(s), a = (o) => (s, c, l) => o(s, c, l) ? {
+__name(r$1, "r");
+var i = (e, t) => e.find(t);
+var a = (e) => (n, r, i) => e(n, r, i) ? {
 	done: !0,
 	hasNext: !0,
-	next: s
-} : M, e = (o) => typeof o == "function";
+	next: n
+} : t$2;
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/isFunction.js
+var e = (e) => typeof e == `function`;
 //#endregion
-//#region ../../node_modules/.pnpm/remeda@2.45.0/node_modules/remeda/dist/map.js
-function t(...o) {
-	return t$3(n, o, r);
+//#region ../../node_modules/.pnpm/remeda@2.51.0/node_modules/remeda/dist/map.js
+function t(...t) {
+	return t$3(n, t, r);
 }
-var n = (o, s) => o.map(s), r = (o) => (s, c, l) => ({
+var n = (e, t) => e.map(t);
+var r = (e) => (t, n, r) => ({
 	done: !1,
 	hasNext: !0,
-	next: o(s, c, l)
-}), F = {
+	next: e(t, n, r)
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
+/**
+* @license @tabler/icons-react v3.49.0 - MIT
+*
+* This source code is licensed under the MIT license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var defaultAttributes = {
 	outline: {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 24,
@@ -133,355 +153,544 @@ var n = (o, s) => o.map(s), r = (o) => (s, c, l) => ({
 		fill: "currentColor",
 		stroke: "none"
 	}
-}, createReactComponent = (o, s, c, l) => {
-	let u = y(({ color: c = "currentColor", size: u = 24, stroke: d = 2, title: f, className: p, children: m, ...h }, g) => v("svg", {
-		ref: g,
-		...F[o],
-		width: u,
-		height: u,
+};
+//#endregion
+//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
+/**
+* @license @tabler/icons-react v3.49.0 - MIT
+*
+* This source code is licensed under the MIT license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+	const Component = forwardRef(({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement("svg", {
+		ref,
+		...defaultAttributes[type],
+		width: size,
+		height: size,
 		className: [
-			"tabler-icon",
-			`tabler-icon-${s}`,
-			p
-		].join(" "),
-		...o === "filled" ? { fill: c } : {
-			strokeWidth: d,
-			stroke: c
+			`tabler-icon`,
+			`tabler-icon-${iconName}`,
+			className
+		].filter(Boolean).join(" "),
+		...type === "filled" ? { fill: color } : {
+			strokeWidth: stroke,
+			stroke: color
 		},
-		...h
+		...rest
 	}, [
-		f && v("title", { key: "svg-title" }, f),
-		...l.map(([o, s]) => v(o, s)),
-		...Array.isArray(m) ? m : [m]
+		title && createElement("title", { key: "svg-title" }, title),
+		...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+		...Array.isArray(children) ? children : [children]
 	]));
-	return u.displayName = `${c}`, u;
-}, I = createReactComponent("outline", "sparkles", "Sparkles", [["path", {
-	d: "M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6",
-	key: "svg-0"
-}]]), L = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", [["path", {
-	d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z",
-	key: "svg-0"
+	Component.displayName = `${iconNamePascal}`;
+	return Component;
+};
+/**
+* @license @tabler/icons-react v3.49.0 - MIT
+*
+* This source code is licensed under the MIT license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var IconSparkles = createReactComponent("outline", "sparkles", "Sparkles", [["path", {
+	"d": "M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6",
+	"key": "svg-0"
+}]]);
+/**
+* @license @tabler/icons-react v3.49.0 - MIT
+*
+* This source code is licensed under the MIT license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", [["path", {
+	"d": "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z",
+	"key": "svg-0"
 }]]);
 //#endregion
-//#region ../../node_modules/.pnpm/@react-hookz+web@25.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@react-hookz/web/dist/useSyncedRef/index.js
-function useSyncedRef(o) {
-	let s = E(o);
-	return s.current = o, T(() => Object.freeze({ get current() {
-		return s.current;
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/useSyncedRef/index.js
+/**
+* Like `useRef`, but it returns immutable ref that contains actual value.
+*
+* @param value
+*/
+function useSyncedRef(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return useMemo(() => Object.freeze({ get current() {
+		return ref.current;
 	} }), []);
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@react-hookz+web@25.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@react-hookz/web/dist/util/const.js
-var R = /* @__PURE__ */ o(() => {}, "noop"), z = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u", basicDepsComparator = (o, s) => {
-	if (o === s) return !0;
-	if (o.length !== s.length) return !1;
-	for (let [c, l] of o.entries()) if (l !== s[c]) return !1;
-	return !0;
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/util/const.js
+var noop$1 = /* @__PURE__ */ __name(() => {}, "noop");
+var isBrowser = typeof globalThis !== "undefined" && typeof navigator !== "undefined" && typeof document !== "undefined";
+//#endregion
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/util/misc.js
+var basicDepsComparator = (d1, d2) => {
+	if (d1 === d2) return true;
+	if (d1.length !== d2.length) return false;
+	for (const [i, element] of d1.entries()) if (element !== d2[i]) return false;
+	return true;
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@react-hookz+web@25.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@react-hookz/web/dist/useCustomCompareEffect/index.js
-function useCustomCompareEffect(o, s, c = basicDepsComparator, l = C, ...u) {
-	let d = E(void 0);
-	(d.current === void 0 || z && !c(d.current, s)) && (d.current = s), l(o, d.current, ...u);
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/useCustomCompareEffect/index.js
+/**
+* Like `useEffect` but uses provided comparator function to validate dependency changes.
+*
+* @param callback Function that will be passed to the underlying effect hook.
+* @param deps Dependency list like the one passed to `useEffect`.
+* @param comparator Function that compares two dependency arrays,
+* and returns `true` if they're equal.
+* @param effectHook Effect hook that will be used to run
+* `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+* placed as the first argument and the dependency list as second.
+* @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+* after the `callback` and the dependency list.
+*/
+function useCustomCompareEffect(callback, deps, comparator = basicDepsComparator, effectHook = useEffect, ...effectHookRestArgs) {
+	const dependencies = useRef(void 0);
+	if (dependencies.current === void 0 || isBrowser && !comparator(dependencies.current, deps)) dependencies.current = deps;
+	effectHook(callback, dependencies.current, ...effectHookRestArgs);
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@react-hookz+web@25.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@react-hookz/web/dist/useFirstMountState/index.js
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/useFirstMountState/index.js
+/**
+* Returns a boolean that is `true` only on first render.
+*/
 function useFirstMountState() {
-	let o = E(!0);
-	return C(() => {
-		o.current = !1;
-	}, []), o.current;
+	const isFirstMount = useRef(true);
+	useEffect(() => {
+		isFirstMount.current = false;
+	}, []);
+	return isFirstMount.current;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@react-hookz+web@25.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@react-hookz/web/dist/useIsomorphicLayoutEffect/index.js
-var B = z ? w : C, cancelTimeout = (o) => {
-	o && clearTimeout(o);
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/useIsomorphicLayoutEffect/index.js
+/**
+* Alias for `useLayoutEffect` in browser, but for `useEffect` at server side. Helps to avoid
+* warning shown during SSR.
+*/
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+//#endregion
+//#region ../../node_modules/.pnpm/@react-hookz+web@25.3.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@react-hookz/web/dist/useTimeoutEffect/index.js
+var cancelTimeout = (id) => {
+	if (id) clearTimeout(id);
 };
-function useTimeoutEffect(o, s) {
-	let c = useSyncedRef(o), l = useSyncedRef(s), u = E(null), d = x(() => {
-		cancelTimeout(u.current);
-	}, []), f = x(() => {
-		l.current !== void 0 && (d(), u.current = setTimeout(() => {
-			c.current();
-		}, l.current));
+/**
+* Like `setTimeout` but in the form of a react hook.
+*
+* @param callback Callback to be called after the timeout. Changing this
+* will not reset the timeout.
+* @param ms Timeout delay in milliseconds. `undefined` disables the timeout.
+* Keep in mind, that changing this parameter will re-set timeout, meaning
+* that it will be set as new after the change.
+*/
+function useTimeoutEffect(callback, ms) {
+	const cbRef = useSyncedRef(callback);
+	const msRef = useSyncedRef(ms);
+	const timeoutIdRef = useRef(null);
+	const cancel = useCallback(() => {
+		cancelTimeout(timeoutIdRef.current);
+	}, []);
+	const reset = useCallback(() => {
+		if (msRef.current === void 0) return;
+		cancel();
+		timeoutIdRef.current = setTimeout(() => {
+			cbRef.current();
+		}, msRef.current);
 	}, []);
-	return C(() => (f(), d), [s]), [d, f];
+	useEffect(() => {
+		reset();
+		return cancel;
+	}, [ms]);
+	return [cancel, reset];
 }
 //#endregion
 //#region ../diagram/src/hooks/useUpdateEffect.ts
-var noop = () => {}, depsShallowEqual = (o, s) => {
-	if (o === s) return !0;
-	if (o.length !== s.length) return !1;
-	for (let [c, l] of o.entries()) if (!(l === s[c] || p(l, s[c]))) return !1;
-	return !0;
-};
-function useUpdateEffect(o, s, c, l) {
-	useCustomCompareEffect(useFirstMountState() ? noop : o, s, c ?? depsShallowEqual, l);
-}
-//#endregion
-//#region ../../node_modules/.pnpm/nanostores@1.5.3/node_modules/nanostores/atom/index.js
-var V = [], H = 0, U = null, W = 4, G = globalThis.nanostoresGlobal ||= { epoch: 0 }, drainQueue = () => {
-	let o, s;
-	for (; H < V.length;) {
-		s = H, H += W;
-		try {
-			V[s](V[s + 1].value, V[s + 2], V[s + 3]);
-		} catch (s) {
-			o = s;
-		}
+var noop = () => {};
+var depsShallowEqual = (d1, d2) => {
+	if (d1 === d2) return true;
+	if (d1.length !== d2.length) return false;
+	for (const [i, element] of d1.entries()) {
+		if (element === d2[i] || shallowEqual(element, d2[i])) continue;
+		return false;
 	}
-	if (V.length = H = 0, o) throw o;
-}, atom = /* @__NO_SIDE_EFFECTS__ */ (o) => {
-	let s = [], c = {
-		eq: Object.is,
-		get() {
-			return c.lc || c.listen(() => {})(), c.value;
-		},
-		init: o,
-		lc: 0,
-		listen(o) {
-			return c.lc = s.push(o), () => {
-				for (let s = H; s < V.length;) V[s] === o ? V.splice(s, W) : s += W;
-				let l = s.indexOf(o);
-				~l && (s.splice(l, 1), --c.lc || c.off());
-			};
-		},
-		notify(o, l) {
-			G.epoch++;
-			let u = !V.length && !0;
-			for (let u of s) U?.has(u) || (U?.add(u), V.push(u, c, o, l));
-			u && drainQueue();
-		},
-		off() {},
-		set(o) {
-			let s = c.value;
-			c.eq(s, o) || (c.value = o, c.notify(s));
-		},
-		subscribe(o) {
-			let s = c.listen(o);
-			return o(c.value), s;
-		},
-		value: o
-	};
-	return c;
-}, K = 5, q = 6, J = 10, on = (o, s, c, l) => (o.events = o.events || {}, o.events[c + J] || (o.events[c + J] = l((s) => {
-	o.events[c].reduceRight((o, s) => (s(o), o), {
-		shared: {},
-		...s
-	});
-})), o.events[c] = o.events[c] || [], o.events[c].push(s), () => {
-	let l = o.events[c], u = l.indexOf(s);
-	~u && (l.splice(u, 1), l.length || (o.events[c + J](), delete o.events[c + J]));
-}), Y = 1e3, onMount = (o, s) => {
-	let listener = (c) => {
-		let l = s(c);
-		l && o.events[q].push(l);
-	};
-	return on(o, listener, K, (s) => {
-		let c = o.listen;
-		o.listen = (...l) => (!o.lc && !o.active && (o.active = !0, s()), c(...l));
-		let l = o.off;
-		return o.events[q] = [], o.off = () => {
-			l(), setTimeout(() => {
-				if (o.active && !o.lc) {
-					o.active = !1;
-					for (let s of o.events[q]) s();
-					o.events[q] = [];
-				}
-			}, Y);
-		}, () => {
-			o.listen = c, o.off = l;
-		};
-	});
+	return true;
 };
-//#endregion
-//#region ../../node_modules/.pnpm/nanostores@1.5.3/node_modules/nanostores/deep-map/path.js
-function getPath(o, s) {
-	let c = getAllKeysFromPath(s), l = o;
-	for (let o of c) {
-		if (l == null) return;
-		l = l[o];
-	}
-	return l;
-}
-var X = /(.*)\[(\d+)\]/;
-function getAllKeysFromPath(o) {
-	return o.split(".").flatMap((o) => getKeyAndIndicesFromKey(o));
-}
-function getKeyAndIndicesFromKey(o) {
-	if (X.test(o)) {
-		let [, s, c] = o.match(X);
-		return [...getKeyAndIndicesFromKey(s), c];
-	}
-	return [o];
+function useUpdateEffect(callback, deps, equalityFn, effectHook) {
+	useCustomCompareEffect(useFirstMountState() ? noop : callback, deps, equalityFn ?? depsShallowEqual, effectHook);
 }
 //#endregion
-//#region ../../node_modules/.pnpm/nanostores@1.5.3/node_modules/nanostores/listen-keys/index.js
-function listenKeys(o, s, c) {
-	let l = new Set(s);
-	return o.listen((o, u, d) => {
-		(d === void 0 ? s.some((s) => u === void 0 || o[s] !== u[s] || getPath(o, s) !== getPath(u, s)) : l.has(d) || l.has(d.split(/\.|\[/)[0])) && c(o, u, d);
-	});
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@nanostores+react@1.1.0_nanostores@1.5.3_react@19.2.8/node_modules/@nanostores/react/index.js
-var emit = (o, s) => (c) => {
-	o.current !== c && (o.current = c, s());
+//#region ../../node_modules/.pnpm/@nanostores+react@2.0.1_nanostores@1.5.5_react@19.3.0/node_modules/@nanostores/react/index.js
+var emit = (snapshotRef, onChange) => (value) => {
+	if (snapshotRef.current === value) return;
+	snapshotRef.current = value;
+	onChange();
 };
-function useStore(o, { keys: s, deps: c = [o, s], ssr: l } = {}) {
-	let u = E();
-	u.current = o.get();
-	let d = x((c) => (emit(u, c)(o.value), s?.length > 0 ? listenKeys(o, s, emit(u, c)) : o.listen(emit(u, c))), c), get = () => u.current, f = get;
-	return l && "init" in o && (f = l === "initial" ? () => o.init : l), O(d, get, f);
+function useStore(store, { keys, deps = [store, keys], ssr } = {}) {
+	let snapshotRef = useRef();
+	snapshotRef.current = store.get();
+	let subscribe = useCallback((onChange) => {
+		emit(snapshotRef, onChange)(store.value);
+		return keys?.length > 0 ? listenKeys(store, keys, emit(snapshotRef, onChange)) : store.listen(emit(snapshotRef, onChange));
+	}, deps);
+	let get = () => snapshotRef.current;
+	let server = get;
+	if (ssr && "init" in store) server = ssr === "initial" ? () => store.init : ssr;
+	return useSyncExternalStore(subscribe, get, server);
 }
 //#endregion
 //#region ../diagram/src/hooks/safeContext.tsx
-var Z = _(null);
-Z.displayName = "DiagramApiSafeContext";
-var ee = Z.Provider;
+var DiagramApiSafeContext = createContext(null);
+DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
+var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
 function useDiagram() {
-	let o = b(Z);
-	if (o === null) throw Error("DiagramApi is not provided");
-	return o;
+	const ctx = use(DiagramApiSafeContext);
+	if (ctx === null) throw new Error("DiagramApi is not provided");
+	return ctx;
 }
-function createSafeContextForActor(o) {
-	let s = _(null);
-	function selectSnapshot(o, s) {
-		return [o, s ?? p];
+/**
+* Helper to create a safe context for an actor
+* @example
+* ```tsx
+* const {
+*   ContextProvider: MyActorContext,
+*   useActorRef,
+*   selectSnapshot,
+*   useActorSelector
+* } = createSafeContextForActor<MyActorRef>()
+*
+* const select = selectSnapshot(
+*   s => ....,
+*   (a, b) => a === b
+* )
+*
+* // Later in component:
+* const value = useActorSelector(select)
+* ```
+*/
+function createSafeContextForActor(name) {
+	const Ctx = createContext(null);
+	function selectSnapshot(selector, compare) {
+		return [selector, compare ?? shallowEqual];
 	}
-	function selectContext(o, s) {
-		return [(s) => o(s.context), s ?? p];
+	function selectContext(selector, compare) {
+		return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
 	}
 	function useActorRef() {
-		let c = S(s);
-		if (c === null) throw Error(`${o}SafeContext is not provided `);
-		return c;
+		const actorRef = useContext(Ctx);
+		if (actorRef === null) throw new Error(`${name}SafeContext is not provided `);
+		return actorRef;
 	}
-	function useActorSelector(o, s) {
-		let c, l;
-		return s === void 0 ? Array.isArray(o) ? [c, l] = o : (c = o, l = p) : [c, l] = [o, s], l ??= p, h(e(c), "selector must be a function"), g(useActorRef(), c, l);
+	function useActorSelector(arg1, arg2) {
+		let selector;
+		let compare;
+		if (arg2 !== void 0) [selector, compare] = [arg1, arg2];
+		else if (Array.isArray(arg1)) [selector, compare] = arg1;
+		else {
+			selector = arg1;
+			compare = shallowEqual;
+		}
+		compare ??= shallowEqual;
+		invariant(e(selector), "selector must be a function");
+		return useSelector(useActorRef(), selector, compare);
 	}
 	return {
-		ContextProvider: s.Provider,
+		ContextProvider: Ctx.Provider,
 		selectSnapshot,
 		selectContext,
 		useActorSelector,
 		useActorRef
 	};
 }
-var { ContextProvider: te, selectSnapshot: ne, selectContext: re, useActorSelector: ie, useActorRef: ae } = createSafeContextForActor("DiagramActor"), Q = y((o, s) => {
-	let c = k(34), p, m, h, g, _, v, y, b, x;
-	c[0] === o ? (p = c[1], m = c[2], h = c[3], g = c[4], _ = c[5], v = c[6], y = c[7], b = c[8], x = c[9]) : ({value: x, textScale: _, uselikec4palette: v, hideIfEmpty: y, emptyText: b, className: p, style: g, fontSize: m, ...h} = o, c[0] = o, c[1] = p, c[2] = m, c[3] = h, c[4] = g, c[5] = _, c[6] = v, c[7] = y, c[8] = b, c[9] = x);
-	let S = _ === void 0 ? 1 : _, C = v !== void 0 && v, w = y !== void 0 && y, T = b === void 0 ? "no content" : b;
-	if (x.isEmpty && w) return null;
-	let E;
-	c[10] !== T || c[11] !== x.html || c[12] !== x.isMarkdown || c[13] !== x.nonEmpty || c[14] !== x.text ? (E = x.nonEmpty ? x.isMarkdown ? { dangerouslySetInnerHTML: { __html: x.html } } : { children: /* @__PURE__ */ A("p", { children: x.text }) } : { children: /* @__PURE__ */ A(l, {
-		component: "span",
-		fz: "xs",
-		c: "dimmed",
-		style: { userSelect: "none" },
-		children: T
-	}) }, c[10] = T, c[11] = x.html, c[12] = x.isMarkdown, c[13] = x.nonEmpty, c[14] = x.text, c[15] = E) : E = c[15];
-	let D = E, O;
-	c[16] !== p || c[17] !== C || c[18] !== x.isMarkdown ? (O = u(f({
-		uselikec4palette: C,
-		value: x.isMarkdown ? "markdown" : "plaintext"
-	}), p), c[16] = p, c[17] = C, c[18] = x.isMarkdown, c[19] = O) : O = c[19];
-	let j;
-	c[20] === m ? j = c[21] : (j = m && { "--text-fz": `var(--font-sizes-${m}, var(--font-sizes-md))` }, c[20] = m, c[21] = j);
-	let M;
-	c[22] === S ? M = c[23] : (M = S !== 1 && { "--mantine-scale": S }, c[22] = S, c[23] = M);
-	let N;
-	c[24] !== g || c[25] !== j || c[26] !== M ? (N = {
-		...g,
-		...j,
-		...M
-	}, c[24] = g, c[25] = j, c[26] = M, c[27] = N) : N = c[27];
-	let P;
-	return c[28] !== D || c[29] !== h || c[30] !== s || c[31] !== O || c[32] !== N ? (P = /* @__PURE__ */ A(d, {
-		...h,
-		ref: s,
-		className: O,
-		style: N,
-		...D
-	}), c[28] = D, c[29] = h, c[30] = s, c[31] = O, c[32] = N, c[33] = P) : P = c[33], P;
+var { ContextProvider: DiagramActorContextProvider, selectSnapshot: selectDiagramSnapshot, selectContext: selectDiagramContext, useActorSelector: useDiagramSelector, useActorRef: useDiagramActorRef } = createSafeContextForActor("DiagramActor");
+//#endregion
+//#region ../diagram/src/base-primitives/Markdown.tsx
+var Markdown = forwardRef((t0, ref) => {
+	const $ = c(34);
+	let className;
+	let fontSize;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let value;
+	if ($[0] !== t0) {
+		({value, textScale: t1, uselikec4palette: t2, hideIfEmpty: t3, emptyText: t4, className, style, fontSize, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = fontSize;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = value;
+	} else {
+		className = $[1];
+		fontSize = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		value = $[9];
+	}
+	const textScale = t1 === void 0 ? 1 : t1;
+	const uselikec4palette = t2 === void 0 ? false : t2;
+	const hideIfEmpty = t3 === void 0 ? false : t3;
+	const emptyText = t4 === void 0 ? "no content" : t4;
+	if (value.isEmpty && hideIfEmpty) return null;
+	let t5;
+	if ($[10] !== emptyText || $[11] !== value.html || $[12] !== value.isMarkdown || $[13] !== value.nonEmpty || $[14] !== value.text) {
+		t5 = value.nonEmpty ? value.isMarkdown ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx("p", { children: value.text }) } : { children: /* @__PURE__ */ jsx(Text, {
+			component: "span",
+			fz: "xs",
+			c: "dimmed",
+			style: { userSelect: "none" },
+			children: emptyText
+		}) };
+		$[10] = emptyText;
+		$[11] = value.html;
+		$[12] = value.isMarkdown;
+		$[13] = value.nonEmpty;
+		$[14] = value.text;
+		$[15] = t5;
+	} else t5 = $[15];
+	const content = t5;
+	let t6;
+	if ($[16] !== className || $[17] !== uselikec4palette || $[18] !== value.isMarkdown) {
+		t6 = cx(markdownBlock({
+			uselikec4palette,
+			value: value.isMarkdown ? "markdown" : "plaintext"
+		}), className);
+		$[16] = className;
+		$[17] = uselikec4palette;
+		$[18] = value.isMarkdown;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== fontSize) {
+		t7 = fontSize && { "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))` };
+		$[20] = fontSize;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== textScale) {
+		t8 = textScale !== 1 && { "--mantine-scale": textScale };
+		$[22] = textScale;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== style || $[25] !== t7 || $[26] !== t8) {
+		t9 = {
+			...style,
+			...t7,
+			...t8
+		};
+		$[24] = style;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== content || $[29] !== props || $[30] !== ref || $[31] !== t6 || $[32] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Box, {
+			...props,
+			ref,
+			className: t6,
+			style: t9,
+			...content
+		});
+		$[28] = content;
+		$[29] = props;
+		$[30] = ref;
+		$[31] = t6;
+		$[32] = t9;
+		$[33] = t10;
+	} else t10 = $[33];
+	return t10;
 });
-Q.displayName = "Markdown";
+Markdown.displayName = "Markdown";
 //#endregion
 //#region src/context/safeCtx.ts
-var $ = _(null), oe = $.Provider, useLikeC4ModelAtom = () => {
-	let o = S($);
-	if (o === null) throw Error("LikeC4ModelAtom is not provided");
-	return o;
+/**
+* To improve experience with HMR, we move context to separate files and use as a boundary for hooks
+*/
+var LikeC4ModelDataContext = createContext(null);
+var LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider;
+var useLikeC4ModelAtom = () => {
+	const ctx = useContext(LikeC4ModelDataContext);
+	if (ctx === null) throw new Error("LikeC4ModelAtom is not provided");
+	return ctx;
 };
 //#endregion
 //#region src/hooks.ts
-function useTransparentBackground(o) {
-	let s = k(3), c = o === void 0 || o, t1, l;
-	s[0] === c ? (t1 = s[1], l = s[2]) : (t1 = () => {
-		let o = document.body.parentElement;
-		if (o && c === !0) return o.classList.add("transparent-bg"), () => {
-			o.classList.remove("transparent-bg");
+function useTransparentBackground(t0) {
+	const $ = c(3);
+	const enabled = t0 === void 0 ? true : t0;
+	let t1;
+	let t2;
+	if ($[0] !== enabled) {
+		t1 = () => {
+			const htmlEl = document.body.parentElement;
+			if (!htmlEl || enabled !== true) return;
+			htmlEl.classList.add("transparent-bg");
+			return () => {
+				htmlEl.classList.remove("transparent-bg");
+			};
 		};
-	}, l = [c], s[0] = c, s[1] = t1, s[2] = l), B(t1, l);
+		t2 = [enabled];
+		$[0] = enabled;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useIsomorphicLayoutEffect(t1, t2);
 }
 function useLikeC4Views() {
-	let o = k(4), s = useLikeC4ModelAtom(), c;
-	o[0] === Symbol.for("react.memo_cache_sentinel") ? (c = [], o[0] = c) : c = o[0];
-	let [l, u] = D(c), t1, d;
-	return o[1] === s ? (t1 = o[2], d = o[3]) : (t1 = () => s.subscribe((o) => {
-		u((s) => {
-			let c = [...o.views()].map((o) => {
-				let c = o.$layouted, l = s.find((s) => s.id === o.id);
-				return l && m(c, l) ? l : c;
+	const $ = c(4);
+	const $likec4model = useLikeC4ModelAtom();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [views, setViews] = useState(t0);
+	let t1;
+	let t2;
+	if ($[1] !== $likec4model) {
+		t1 = () => $likec4model.subscribe((next) => {
+			setViews((prev) => {
+				const nextViews = [...next.views()].map((v) => {
+					const n = v.$layouted;
+					const p = prev.find((_) => _.id === v.id);
+					return !!p && deepEqual(n, p) ? p : n;
+				});
+				if (shallowEqual(prev, nextViews)) return prev;
+				return nextViews;
 			});
-			return p(s, c) ? s : c;
 		});
-	}), d = [s], o[1] = s, o[2] = t1, o[3] = d), C(t1, d), l;
+		t2 = [$likec4model];
+		$[1] = $likec4model;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	return views;
 }
 function useCurrentViewId() {
-	let o = k(1), s;
-	return o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = {
-		select: _temp,
-		strict: !1
-	}, o[0] = s) : s = o[0], c(s) ?? "index";
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			select: _temp,
+			strict: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	return useParams(t0) ?? "index";
 }
-function _temp(o) {
-	return o.viewId;
+function _temp(params) {
+	return params.viewId;
 }
+/**
+* Returns the current view and a function to set the layout type.
+*/
 function useCurrentView() {
-	let o = k(13), s = useCurrentViewId(), c = useLikeC4ModelAtom(), [l, u] = D("manual"), t0;
-	o[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
-		u("manual");
-	}, o[0] = t0) : t0 = o[0];
-	let d;
-	o[1] === s ? d = o[2] : (d = [s], o[1] = s, o[2] = d), useUpdateEffect(t0, d);
+	const $ = c(13);
+	const viewId = useCurrentViewId();
+	const $likec4model = useLikeC4ModelAtom();
+	const [layoutType, setLayoutType] = useState("manual");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			setLayoutType("manual");
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== viewId) {
+		t1 = [viewId];
+		$[1] = viewId;
+		$[2] = t1;
+	} else t1 = $[2];
+	useUpdateEffect(t0, t1);
 	let t2;
-	o[3] !== c || o[4] !== s ? (t2 = () => c.get().findView(s)?.$layouted ?? null, o[3] = c, o[4] = s, o[5] = t2) : t2 = o[5];
-	let [f, p] = D(t2), t3, h;
-	o[6] !== c || o[7] !== l || o[8] !== s ? (t3 = () => c.subscribe((o, c) => {
-		p((c) => {
-			let u = o.findView(s);
-			if (!u) return c?.id === s ? c : null;
-			let d = l === "auto" ? u.$view : u.$layouted;
-			return m(c, d) ? c : d;
+	if ($[3] !== $likec4model || $[4] !== viewId) {
+		t2 = () => $likec4model.get().findView(viewId)?.$layouted ?? null;
+		$[3] = $likec4model;
+		$[4] = viewId;
+		$[5] = t2;
+	} else t2 = $[5];
+	const [view, setView] = useState(t2);
+	let t3;
+	let t4;
+	if ($[6] !== $likec4model || $[7] !== layoutType || $[8] !== viewId) {
+		t3 = () => $likec4model.subscribe((next, old) => {
+			setView((current) => {
+				const vm = next.findView(viewId);
+				if (!vm) return current?.id === viewId ? current : null;
+				const nextView = layoutType === "auto" ? vm.$view : vm.$layouted;
+				if (deepEqual(current, nextView)) return current;
+				return nextView;
+			});
 		});
-	}), h = [
-		c,
-		s,
-		l
-	], o[6] = c, o[7] = l, o[8] = s, o[9] = t3, o[10] = h) : (t3 = o[9], h = o[10]), C(t3, h);
-	let g;
-	return o[11] === f ? g = o[12] : (g = [f, u], o[11] = f, o[12] = g), g;
+		t4 = [
+			$likec4model,
+			viewId,
+			layoutType
+		];
+		$[6] = $likec4model;
+		$[7] = layoutType;
+		$[8] = viewId;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t3 = $[9];
+		t4 = $[10];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[11] !== view) {
+		t5 = [view, setLayoutType];
+		$[11] = view;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 }
 function useCurrentProject() {
-	let o = k(4), c = j(), l;
-	o[0] === Symbol.for("react.memo_cache_sentinel") ? (l = { select: selectProjectIdFromContext }, o[0] = l) : l = o[0];
-	let u = s(l), d;
-	return o[1] !== u || o[2] !== c ? (d = u && c.find((o) => o.id === u) || c[0], o[1] = u, o[2] = c, o[3] = d) : d = o[3], d;
+	const $ = c(4);
+	const projects = useLikeC4Projects();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			select: selectProjectIdFromContext,
+			structuralSharing: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const projectId = useMatches(t0);
+	let t1;
+	if ($[1] !== projectId || $[2] !== projects) {
+		t1 = projectId && projects.find((p) => p.id === projectId) || projects[0];
+		$[1] = projectId;
+		$[2] = projects;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
 }
-function selectProjectIdFromContext(o) {
-	return o.find((o) => o.routeId === "/project/$projectId")?.params?.projectId ?? o.at(-1)?.context.projectId ?? void 0;
+function selectProjectIdFromContext(matches) {
+	return matches.find((m) => m.routeId === "/project/$projectId")?.params?.projectId ?? matches.at(-1)?.context.projectId ?? void 0;
 }
 //#endregion
-export { createReactComponent as A, useTimeoutEffect as C, useSyncedRef as D, R as E, t$1 as F, N as I, M as L, e as M, r$1 as N, L as O, P, t$3 as R, useUpdateEffect as S, z as T, useStore as _, useTransparentBackground as a, G as b, Q as c, createSafeContextForActor as d, re as f, ie as g, ae as h, useLikeC4Views as i, t as j, I as k, te as l, useDiagram as m, useCurrentView as n, oe as o, ne as p, useCurrentViewId as r, useLikeC4ModelAtom as s, useCurrentProject as t, ee as u, onMount as v, useFirstMountState as w, depsShallowEqual as x, atom as y, e$2 as z };
+export { r$1 as A, noop$1 as C, createReactComponent as D, IconSparkles as E, t$3 as F, e$2 as I, t$1 as M, r$3 as N, t as O, t$2 as P, isBrowser as S, IconPlayerStopFilled as T, useStore as _, useTransparentBackground as a, useTimeoutEffect as b, Markdown as c, createSafeContextForActor as d, selectDiagramContext as f, useDiagramSelector as g, useDiagramActorRef as h, useLikeC4Views as i, e$1 as j, e as k, DiagramActorContextProvider as l, useDiagram as m, useCurrentView as n, LikeC4ModelDataContextProvider as o, selectDiagramSnapshot as p, useCurrentViewId as r, useLikeC4ModelAtom as s, useCurrentProject as t, DiagramApiContextProvider as u, depsShallowEqual as v, useSyncedRef as w, useFirstMountState as x, useUpdateEffect as y };