@likec4/diagram 1.60.0 → 1.61.0

package/dist/utils/defineActors.d.mts

@@ -1,10 +1,8 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ActorRefFromLogic, AnyActorLogic } from "xstate";
-//#region src/utils/defineActors.d.ts
 export type inferChildrenRef<A> = A extends Record<string, AnyActorLogic> ? { [K in keyof A & string]: ActorRefFromLogic<A[K]> | undefined; } : never;
 export type inferProvidedActor<A> = A extends Record<string, AnyActorLogic> ? { [K in keyof A & string]: {
   id: K;
   logic: A[K];
   src: K;
-}; }[keyof A & string] : never;
-//#endregion
+}; }[keyof A & string] : never;

package/dist/utils/defineActors.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 
-//#region src/utils/defineActors.ts
+// src/utils/defineActors.ts
 /**
 * Helper function to define actors for use to mimize type inference issues
 * with XState ActorSystem
@@ -11,5 +11,4 @@ function defineActors(actors) {
 	return actors;
 }
 
-//#endregion
 export { defineActors };

package/dist/utils/edge-corners.mjs

@@ -1,9 +1,9 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { bezierControlPoints } from "./xyflow.mjs";
 import { inDrawingOrder, orthoPolyline } from "./edge-path.mjs";
+import { bezierControlPoints } from "./xyflow.mjs";
 import { isOrthoSpline, nearlyEqual, projectOnSegment, splineToPolyline } from "@likec4/core/geometry";
 
-//#region src/utils/edge-corners.ts
+// src/utils/edge-corners.ts
 /** Interior corners of an orthogonal Graphviz spline. */
 function orthoCorners(points) {
 	const anchors = splineToPolyline(points).map((p) => ({
@@ -122,5 +122,4 @@ function insertCorner({ point, controlPoints, routing, ...edge }) {
 	return result;
 }
 
-//#endregion
 export { initialControlPoints, insertCorner, snapCorner };

package/dist/utils/edge-endpoints.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { nodeToRect } from "./xyflow.mjs";
 
-//#region src/utils/edge-endpoints.ts
+// src/utils/edge-endpoints.ts
 /**
 * Returns an edge endpoint from the node's actual bounds and handle center.
 * Falls back to the node center when handle bounds are unavailable.
@@ -38,5 +38,4 @@ function edgeEndCenters(nodeLookup, edge) {
 	};
 }
 
-//#endregion
 export { edgeEndCenters, edgeEndFromNode };

package/dist/utils/edge-label.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { firstBy } from "remeda";
 import { distanceBetween, placeLabelAlongSegments } from "@likec4/core/geometry";
 
-//#region src/utils/edge-label.ts
+// src/utils/edge-label.ts
 /**
 * Top-left position of the label of an edge being edited: centered at half the path length for
 * splines; beside a straight run for ortho routing, avoiding obstacles unless the label is customized,
@@ -37,5 +37,4 @@ function centredAt(point, size) {
 	};
 }
 
-//#endregion
 export { edgeLabelPosition };

package/dist/utils/edge-path-through-label.mjs

@@ -0,0 +1,51 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Position, getBezierPath } from "@xyflow/system";
+
+// src/utils/edge-path-through-label.ts
+/**
+* Returns the bezier edge path through the label placed by the layout (left to right):
+* a curve to the left side of the label and a curve from its right side to the target,
+* with a gap under the label, so the line does not show through the label background.
+*
+* Without label box, it is a single bezier curve with the label in the middle.
+*/
+function edgePathThroughLabel(params, labelBBox) {
+	if (!labelBBox) {
+		const [path, x, y] = getBezierPath({
+			sourceX: params.sourceX,
+			sourceY: params.sourceY,
+			sourcePosition: params.sourcePosition,
+			targetX: params.targetX,
+			targetY: params.targetY,
+			targetPosition: params.targetPosition
+		});
+		return [path, {
+			x,
+			y,
+			translate: "translate(-50%, 0)"
+		}];
+	}
+	const y = labelBBox.y + labelBBox.height / 2;
+	const [toLabel] = getBezierPath({
+		sourceX: params.sourceX,
+		sourceY: params.sourceY,
+		sourcePosition: params.sourcePosition,
+		targetX: labelBBox.x,
+		targetY: y,
+		targetPosition: Position.Left
+	});
+	const [fromLabel] = getBezierPath({
+		sourceX: labelBBox.x + labelBBox.width,
+		sourceY: y,
+		sourcePosition: Position.Right,
+		targetX: params.targetX,
+		targetY: params.targetY,
+		targetPosition: params.targetPosition
+	});
+	return [`${toLabel} ${fromLabel}`, {
+		x: labelBBox.x,
+		y: labelBBox.y
+	}];
+}
+
+export { edgePathThroughLabel };

package/dist/utils/edge-path.mjs

@@ -5,7 +5,7 @@ import { continuesRun, distanceBetween, isOrthoSpline, nearlyEqual, polylineToSe
 import { nonNullable } from "@likec4/core/utils";
 import { curveCatmullRomOpen, line } from "d3-shape";
 
-//#region src/utils/edge-path.ts
+// src/utils/edge-path.ts
 /** Endpoints in drawing order, reversed for `dir: 'back'`. */
 function inDrawingOrder({ source, target, dir }) {
 	return dir === "back" ? [target, source] : [source, target];
@@ -242,5 +242,4 @@ function layoutedEdgePath({ points, routing, ...edge }) {
 	};
 }
 
-//#endregion
 export { drawnFromRoute, editedEdgePath, editedEdgeRoute, inDrawingOrder, layoutedEdgePath, layoutedEdgeRoute, orthoPolyline };

package/dist/utils/edge-tracks.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { drawnFromRoute, editedEdgePath, editedEdgeRoute } from "./edge-path.mjs";
 import { nearlyEqual } from "@likec4/core/geometry";
 
-//#region src/utils/edge-tracks.ts
+// src/utils/edge-tracks.ts
 const TRACK_SPACING = 12;
 const END_INSET = 8;
 const SAME_TRACK = 4;
@@ -137,5 +137,4 @@ function trackedEdgePath({ id, controlPoints, routing, others, ...endpoints }) {
 	}, [...others]));
 }
 
-//#endregion
 export { keepOwnTrack, trackedEdgePath };

package/dist/utils/filterProjects.d.mts

@@ -0,0 +1,10 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4ProjectData } from "../LikeC4ProjectsProvider.mjs";
+/**
+ * Keeps the projects whose id, title or path match every term of the query.
+ */
+export declare function filterProjects<P extends Pick<LikeC4ProjectData, 'id' | 'title' | 'path'>>(projects: ReadonlyArray<P>, query: string): ReadonlyArray<P>;
+/**
+ * Literal fragments of the query, to highlight in the matching projects.
+ */
+export declare function projectSearchHighlights(query: string): string[];

package/dist/utils/filterProjects.mjs

@@ -0,0 +1,36 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+// src/utils/filterProjects.ts
+function escapeRegExp(value) {
+	return value.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+* Splits a search query into lowercase terms; `*` inside a term matches any characters.
+*/
+function projectSearchTerms(query) {
+	return query.trim().toLowerCase().split(/\s+/).filter((term) => term.replaceAll("*", "").length > 0);
+}
+/**
+* Keeps the projects whose id, title or path match every term of the query.
+*/
+function filterProjects(projects, query) {
+	const terms = projectSearchTerms(query);
+	if (terms.length === 0) return projects;
+	const matchers = terms.map((term) => new RegExp(term.split("*").map(escapeRegExp).join(".*")));
+	return projects.filter(({ id, title, path }) => {
+		const haystack = [
+			id,
+			title,
+			path
+		].filter(Boolean).join("\n").toLowerCase();
+		return matchers.every((matcher) => matcher.test(haystack));
+	});
+}
+/**
+* Literal fragments of the query, to highlight in the matching projects.
+*/
+function projectSearchHighlights(query) {
+	return projectSearchTerms(query).flatMap((term) => term.split("*")).filter(Boolean);
+}
+
+export { filterProjects, projectSearchHighlights, projectSearchTerms };

package/dist/utils/index.mjs

@@ -1,6 +1,7 @@
 import { roundDpr } from "./roundDpr.mjs";
 import { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isSamePoint, nodeToRect, stopPropagation } from "./xyflow.mjs";
 import { readableText } from "./readableText.mjs";
+import { isEventFromSearch } from "./search-event.mjs";
 import { pickViewBounds } from "./view-bounds.mjs";
 import { vector as vector$1 } from "@likec4/core/geometry";
 

package/dist/utils/measure-edge-label.mjs

@@ -0,0 +1,129 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { DefaultFontFamily, EdgeLabelMetrics } from "@likec4/core/styles";
+import { clearCache, layout, layoutWithLines, measureNaturalWidth, prepare, prepareWithSegments } from "@chenglou/pretext";
+
+// src/utils/measure-edge-label.ts
+/**
+* Canvas font of the edge label (see `EdgeLabelMetrics` in the style preset)
+*/
+const edgeLabelFont = (size = EdgeLabelMetrics.label.fontSize) => `${size}px ${DefaultFontFamily}`;
+/**
+* Finds the narrowest width that keeps the same number of lines as at `maxWidth`,
+* so lines are roughly equal (like CSS `text-wrap: balance`)
+*/
+function balancedWidth(paragraph, prepared, { maxWidth, lineHeight, font }) {
+	const lineCount = layout(prepared, maxWidth, lineHeight).lineCount;
+	if (lineCount <= 1) return maxWidth;
+	const longestWord = Math.max(...paragraph.split(/\s+/).map((word) => word ? measureNaturalWidth(prepare(word, font)) : 0));
+	if (longestWord >= maxWidth) return maxWidth;
+	let lo = longestWord;
+	let hi = maxWidth;
+	if (layout(prepared, lo, lineHeight).lineCount === lineCount) return lo;
+	while (hi - lo > 1) {
+		const mid = (lo + hi) / 2;
+		if (layout(prepared, mid, lineHeight).lineCount > lineCount) lo = mid;
+		else hi = mid;
+	}
+	return hi;
+}
+function wrapLabel(label, maxWidth) {
+	const font = edgeLabelFont();
+	const lineHeight = EdgeLabelMetrics.label.fontSize * EdgeLabelMetrics.label.lineHeight;
+	let lines = [];
+	for (const paragraph of label.trim().split(/\r?\n/)) {
+		if (!paragraph.trim()) {
+			lines.push("");
+			continue;
+		}
+		const prepared = prepareWithSegments(paragraph, font);
+		const width = balancedWidth(paragraph, prepared, {
+			maxWidth,
+			lineHeight,
+			font
+		});
+		for (const line of layoutWithLines(prepared, width, lineHeight).lines) lines.push(line.text.trim());
+	}
+	lines = lines.slice(0, EdgeLabelMetrics.label.maxLines);
+	const width = Math.max(0, ...lines.map((line) => line ? measureNaturalWidth(prepare(line, font)) : 0));
+	return {
+		lines,
+		width
+	};
+}
+/**
+* Rough estimate, when there is no canvas to measure text (e.g. jsdom)
+*/
+function estimateLabel(label, maxWidth) {
+	const charWidth = EdgeLabelMetrics.label.fontSize * .55;
+	const maxChars = Math.max(1, Math.floor(maxWidth / charWidth));
+	const lines = [];
+	for (const paragraph of label.trim().split(/\r?\n/)) {
+		let line = "";
+		for (const word of paragraph.split(/\s+/).filter(Boolean)) {
+			if (line && line.length + 1 + word.length > maxChars) {
+				lines.push(line);
+				line = "";
+			}
+			let rest = line ? `${line} ${word}` : word;
+			while (rest.length > maxChars) {
+				lines.push(rest.slice(0, maxChars));
+				rest = rest.slice(maxChars);
+			}
+			line = rest;
+		}
+		lines.push(line);
+	}
+	const visible = lines.slice(0, EdgeLabelMetrics.label.maxLines);
+	return {
+		lines: visible,
+		width: Math.min(maxWidth, Math.max(0, ...visible.map((line) => line.length * charWidth)))
+	};
+}
+/**
+* Wraps and measures the edge label as it is rendered by `EdgeLabel`.
+* Uses canvas of the browser, so the font must be loaded (see {@link loadEdgeLabelFont})
+*/
+function measureEdgeLabel({ label, technology, withActionButton = false, maxWidth = EdgeLabelMetrics.maxTextWidth }) {
+	const { label: labelStyle, technology: techStyle, gap, paddingBlock, paddingInline, actionButtonSize } = EdgeLabelMetrics;
+	let wrapped;
+	let techWidth = 0;
+	try {
+		wrapped = label?.trim() ? wrapLabel(label, maxWidth) : {
+			lines: [],
+			width: 0
+		};
+		if (technology) techWidth = measureNaturalWidth(prepare(`[ ${technology} ]`, edgeLabelFont(techStyle.fontSize)));
+	} catch {
+		wrapped = label?.trim() ? estimateLabel(label, maxWidth) : {
+			lines: [],
+			width: 0
+		};
+		techWidth = technology ? (technology.length + 4) * techStyle.fontSize * .55 : 0;
+	}
+	const rows = [];
+	if (wrapped.lines.length > 0) rows.push(wrapped.lines.length * labelStyle.fontSize * labelStyle.lineHeight);
+	if (technology) rows.push(techStyle.fontSize * techStyle.lineHeight);
+	if (withActionButton) rows.push(actionButtonSize);
+	const width = Math.max(wrapped.width, techWidth, withActionButton ? actionButtonSize : 0);
+	const height = rows.reduce((sum, h) => sum + h, 0) + Math.max(0, rows.length - 1) * gap;
+	return {
+		label: wrapped.lines.length > 0 ? wrapped.lines.join("\n") : null,
+		width: Math.ceil(width + 2 * paddingInline),
+		height: Math.ceil(height + 2 * paddingBlock)
+	};
+}
+/**
+* Loads faces of the edge label font required to render given texts.
+* Resolves to `true` if something was loaded (measurements should be repeated)
+*/
+async function loadEdgeLabelFont(texts) {
+	if (typeof document === "undefined" || !document.fonts) return false;
+	const sample = texts.join(" ");
+	const font = edgeLabelFont();
+	if (document.fonts.check(font, sample)) return false;
+	await document.fonts.load(font, sample);
+	clearCache();
+	return true;
+}
+
+export { edgeLabelFont, loadEdgeLabelFont, measureEdgeLabel };

package/dist/utils/readableText.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { RichText } from "@likec4/core";
 
-//#region src/utils/readableText.ts
+// src/utils/readableText.ts
 const WHITESPACE = /\s+/g;
 /**
 * Flattens a markdown or plain string value into a single line of
@@ -16,5 +16,4 @@ function readableText(value) {
 	return RichText.from(value).text?.replace(WHITESPACE, " ").trim() || null;
 }
 
-//#endregion
 export { readableText };

package/dist/utils/roundDpr.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { clamp } from "remeda";
 
-//#region src/utils/roundDpr.ts
+// src/utils/roundDpr.ts
 /**
 * Returns the current device pixel ratio (DPR) given the passed options
 *
@@ -22,5 +22,4 @@ function roundDpr(v) {
 	return Math.round(v * knownDpr) / knownDpr;
 }
 
-//#endregion
 export { roundDpr };

package/dist/utils/search-event.mjs

@@ -0,0 +1,17 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+// src/utils/search-event.ts
+/**
+* Checks if the event comes from inside the search overlay (marked with `data-likec4-search`).
+*
+* Search can be opened on top of overlays and the diagram (e.g. by clicking a tag or metadata
+* in element details). Global hotkey handlers must leave such events to the search:
+* Escape closes the search, arrows move the caret in the search input.
+*
+* Uses `composedPath`, as the diagram may be rendered in a shadow root.
+*/
+function isEventFromSearch(event) {
+	return event.composedPath().some((target) => "dataset" in target && target.dataset["likec4Search"] === "true");
+}
+
+export { isEventFromSearch };

package/dist/utils/view-bounds.d.mts

@@ -1,10 +1,8 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { BBox } from "@likec4/core/geometry";
 import { DiagramEdge, DynamicViewDisplayVariant, LayoutedView } from "@likec4/core/types";
-//#region src/utils/view-bounds.d.ts
 /**
  * Picks appropriate bounds from the view,
  * depending on its type and dynamic variant
  */
-export declare function pickViewBounds(view: LayoutedView, dynamicVariant?: DynamicViewDisplayVariant): BBox;
-//#endregion
+export declare function pickViewBounds(view: LayoutedView, dynamicVariant?: DynamicViewDisplayVariant): BBox;

package/dist/utils/view-bounds.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { invariant } from "@likec4/core";
 import { BBox as BBox$1 } from "@likec4/core/geometry";
 
-//#region src/utils/view-bounds.ts
+// src/utils/view-bounds.ts
 /**
 * Picks appropriate bounds from the view,
 * depending on its type and dynamic variant
@@ -53,5 +53,4 @@ function calcViewBounds({ nodes, edges }) {
 	return BBox$1.expand(BBox$1.merge(...nodes, ...edges.map(calcEdgeBounds).filter((box) => isFinite(box.x) && isFinite(box.y))), 20);
 }
 
-//#endregion
 export { calcEdgeBounds, calcViewBounds, pickViewBounds };

package/dist/utils/view-routing.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 
-//#region src/utils/view-routing.ts
+// src/utils/view-routing.ts
 /**
 * Returns a view's resolved routing mode, defaulting to `spline` when omitted.
 */
@@ -8,5 +8,4 @@ function viewRouting(view) {
 	return view.routing ?? "spline";
 }
 
-//#endregion
 export { viewRouting };

package/dist/utils/xyflow.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { Position } from "@xyflow/react";
 import { flatMap, hasAtLeast, isArray, isNumber } from "remeda";
+import { getNodeDimensions } from "@xyflow/system";
 import { BBox, vector } from "@likec4/core/geometry";
 import { invariant } from "@likec4/core/utils";
-import { getNodeDimensions } from "@xyflow/system";
 import { Bezier } from "bezier-js";
 
-//#region src/utils/xyflow.ts
+// src/utils/xyflow.ts
 function isEqualRects(a, b) {
 	return Math.trunc(a.x) === Math.trunc(b.x) && Math.trunc(a.y) === Math.trunc(b.y) && Math.trunc(a.width) === Math.trunc(b.width) && Math.trunc(a.height) === Math.trunc(b.height);
 }
@@ -170,5 +170,4 @@ function parsePaddings(padding, width, height) {
 	};
 }
 
-//#endregion
 export { bezierControlPoints, bezierPath, getNodeCenter, getNodeIntersectionFromCenterToPoint, isEqualRects, isLeafNodeType, isSamePoint, leafNodeRects, nodeToRect$1 as nodeToRect, parsePaddings, stopPropagation };

package/dist/webcomponent/defineWebcomponent.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4ViewProps } from "../LikeC4View.mjs";
+import { ProjectId } from "@likec4/core";
+type LikeC4ViewComponent = (props: LikeC4ViewProps) => React.ReactElement;
+/**
+ * Defines a custom element for a LikeC4 view component.
+ * Used by the LikeC4 Vite plugin.
+ *
+ * @internal
+ */
+export declare function defineLikeC4Webcomponent(name: string, viewComponent: LikeC4ViewComponent, projectId: ProjectId): CustomElementConstructor;
+export {};

package/dist/webcomponent/defineWebcomponent.mjs

@@ -0,0 +1,93 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+
+// src/webcomponent/defineWebcomponent.ts
+const ObservedAttributes = [
+	"view-id",
+	"browser",
+	"dynamic-variant",
+	"color-scheme"
+];
+function readProps(element) {
+	function booleanAttribute(name, fallback) {
+		const value = element.getAttribute(name);
+		return value === null ? fallback : value.toLowerCase() !== "false";
+	}
+	function enumAttribute(name, values) {
+		const value = element.getAttribute(name);
+		return value !== null && values.includes(value) ? value : void 0;
+	}
+	const props = {
+		viewId: element.getAttribute("view-id") ?? "index",
+		browser: booleanAttribute("browser", true)
+	};
+	const dynamicViewVariant = enumAttribute("dynamic-variant", ["diagram", "sequence"]);
+	const colorScheme = enumAttribute("color-scheme", ["light", "dark"]);
+	if (dynamicViewVariant) props.dynamicViewVariant = dynamicViewVariant;
+	if (colorScheme) props.colorScheme = colorScheme;
+	return props;
+}
+/**
+* The class is created on demand: this module is also imported where `HTMLElement` does not exist (SSR, node).
+*/
+function createLikeC4ViewElement(component) {
+	return class LikeC4ViewElement extends HTMLElement {
+		static observedAttributes = ObservedAttributes;
+		shadow;
+		mount;
+		root;
+		constructor() {
+			super();
+			this.shadow = this.attachShadow({
+				mode: "open",
+				delegatesFocus: true
+			});
+			const style = document.createElement("style");
+			style.textContent = ":host { display: contents; background-color: transparent; margin: 0; padding: 0; }";
+			this.mount = document.createElement("div");
+			this.mount.style.display = "contents";
+			this.shadow.append(style, this.mount);
+		}
+		connectedCallback() {
+			this.root ??= createRoot(this.mount);
+			this.render();
+		}
+		disconnectedCallback() {
+			this.root?.unmount();
+			this.root = void 0;
+		}
+		attributeChangedCallback() {
+			if (this.root) this.render();
+		}
+		render() {
+			if (!this.root) return;
+			this.root.render(jsx(component, readProps(this)));
+		}
+	};
+}
+const projectIdSymbol = Symbol.for("likec4.webcomponent.projectId");
+/**
+* Defines a custom element for a LikeC4 view component.
+* Used by the LikeC4 Vite plugin.
+*
+* @internal
+*/
+function defineLikeC4Webcomponent(name, viewComponent, projectId) {
+	if (typeof name !== "string" || name.trim().length === 0) throw new Error("name must be a non-empty string");
+	const existing = customElements.get(name);
+	if (existing) {
+		if (existing[projectIdSymbol] === projectId) return existing;
+		throw new Error("Custom element \"" + name + "\" is already defined");
+	}
+	const ViewElement = createLikeC4ViewElement(viewComponent);
+	Object.defineProperty(ViewElement, projectIdSymbol, {
+		enumerable: false,
+		writable: false,
+		value: projectId
+	});
+	customElements.define(name, ViewElement);
+	return ViewElement;
+}
+
+export { defineLikeC4Webcomponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.60.0",
+  "version": "1.61.0",
   "description": "A React component library for rendering software architecture diagrams",
   "homepage": "https://likec4.dev",
   "bugs": "https://github.com/likec4/likec4/issues",
@@ -47,59 +47,62 @@
     "!**/*.d.ts.map"
   ],
   "dependencies": {
+    "@chenglou/pretext": "1.0.0",
     "@dagrejs/dagre": "1.1.8",
     "@floating-ui/dom": "^1.8.0",
-    "@likec4/core": "1.60.0",
-    "@likec4/styles": "1.60.0",
+    "@likec4/core": "1.61.0",
+    "@likec4/styles": "1.61.0",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/core": "9.7.1",
-    "@mantine/hooks": "9.7.1",
+    "@mantine/core": "9.7.4",
+    "@mantine/hooks": "9.7.4",
     "@nanostores/media-query": "0.1.2",
     "@nanostores/react": "2.0.1",
-    "@react-hookz/web": "^25.3.0",
+    "@react-hookz/web": "^26.1.0",
     "@xstate/react": "6.1.0",
     "@xstate/store": "4.3.0",
     "@xstate/store-react": "2.1.0",
-    "@xyflow/react": "12.12.0",
-    "@xyflow/system": "0.0.83",
+    "@xyflow/react": "12.12.1",
+    "@xyflow/system": "0.0.84",
     "bezier-js": "^6.1.4",
     "d3-force": "^3.0.0",
     "d3-shape": "^3.2.0",
     "defu": "^6.1.7",
-    "fast-equals": "^6.1.1",
+    "fast-equals": "^6.2.2",
+    "fuse.js": "^7.5.0",
     "immer": "^11.1.21",
-    "motion": "^12.43.0",
+    "motion": "^14.10.1",
     "nanostores": "1.5.5",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
     "react-error-boundary": "^6.1.6",
-    "remeda": "^2.51.0",
+    "react-resizable-panels": "^4.14.3",
+    "remeda": "^2.52.0",
     "type-fest": "^4.41.0",
-    "xstate": "5.33.2"
+    "xstate": "5.33.3"
   },
   "devDependencies": {
     "@likec4/devops": "1.59.4",
-    "@likec4/tsconfig": "1.60.0",
-    "@pandacss/dev": "^1.12.1",
-    "@statelyai/inspect": "^0.4.0",
+    "@likec4/tsconfig": "1.61.0",
+    "@pandacss/dev": "^1.12.2",
+    "@statelyai/inspect": "^0.7.2",
     "@tabler/icons-react": "3.49.0",
-    "@tsdown/css": "^0.23.0",
+    "@tsdown/css": "^0.23.4",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-force": "^3.0.10",
     "@types/d3-shape": "^3.1.8",
-    "@types/node": "~22.19.19",
+    "@types/node": "~22.20.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
-    "oxc-transform-react": "^0.153.0",
-    "oxlint": "1.87.0",
-    "postcss": "8.5.29",
+    "oxc-transform-react": "^0.156.0",
+    "oxlint": "1.88.0",
+    "postcss": "8.5.30",
     "postcss-import": "^17.0.0",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.4",
     "typescript": "6.0.3",
-    "vite": "^8.3.4",
-    "vite-plugin-dts": "5.0.2",
-    "vitest": "4.1.11",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "5.1.2",
+    "vitest": "4.1.12",
     "zx": "8.8.5"
   },
   "publishConfig": {