@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,8 @@
+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";
+
+export { pickViewBounds, readableText, roundDpr, stopPropagation, vector$1 as vector };

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

@@ -0,0 +1,19 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { RichText } from "@likec4/core";
+
+// src/utils/readableText.ts
+const WHITESPACE = /\s+/g;
+/**
+* Flattens a markdown or plain string value into a single line of
+* screen-reader friendly text: renders markdown to plain text, collapses
+* runs of whitespace and trims. Returns `null` when the value yields no text.
+*
+* Use this whenever model text (titles, labels, descriptions, notes) is
+* surfaced to assistive technologies, so that markdown syntax and stray
+* whitespace never leak into an `aria-label`.
+*/
+function readableText(value) {
+	return RichText.from(value).text?.replace(WHITESPACE, " ").trim() || null;
+}
+
+export { readableText };

package/dist/utils/roundDpr.mjs

@@ -0,0 +1,25 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { clamp } from "remeda";
+
+// src/utils/roundDpr.ts
+/**
+* Returns the current device pixel ratio (DPR) given the passed options
+*
+* @param options
+* @returns current device pixel ratio
+*/
+function getDevicePixelRatio() {
+	const dpr = typeof window !== "undefined" && typeof window.devicePixelRatio === "number" ? window.devicePixelRatio : 1;
+	return clamp(Math.floor(dpr), {
+		min: 1,
+		max: 4
+	});
+}
+let knownDpr;
+function roundDpr(v) {
+	knownDpr ??= getDevicePixelRatio();
+	if (knownDpr < 2) return Math.round(v);
+	return Math.round(v * knownDpr) / knownDpr;
+}
+
+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

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

package/dist/utils/view-bounds.mjs

@@ -0,0 +1,56 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { invariant } from "@likec4/core";
+import { BBox as BBox$1 } from "@likec4/core/geometry";
+
+// src/utils/view-bounds.ts
+/**
+* Picks appropriate bounds from the view,
+* depending on its type and dynamic variant
+*/
+function pickViewBounds(view, dynamicVariant) {
+	if (view._type === "dynamic") try {
+		if ((dynamicVariant ?? view.variant) === "sequence") {
+			invariant(view.sequenceLayout, "Sequence layout is not available");
+			invariant(view.sequenceLayout.bounds, "Sequence layout bounds are not available");
+			return view.sequenceLayout.bounds;
+		}
+	} catch (error) {
+		console.error(error);
+	}
+	return view.bounds;
+}
+function calcEdgeBounds({ points, controlPoints, labelBBox }) {
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	if (controlPoints) for (const p of controlPoints) {
+		minX = Math.min(minX, p.x);
+		minY = Math.min(minY, p.y);
+		maxX = Math.max(maxX, p.x);
+		maxY = Math.max(maxY, p.y);
+	}
+	else for (const [x, y] of points) {
+		minX = Math.min(minX, x);
+		minY = Math.min(minY, y);
+		maxX = Math.max(maxX, x);
+		maxY = Math.max(maxY, y);
+	}
+	if (labelBBox) {
+		minX = Math.min(minX, labelBBox.x);
+		minY = Math.min(minY, labelBBox.y);
+		maxX = Math.max(maxX, labelBBox.x + labelBBox.width);
+		maxY = Math.max(maxY, labelBBox.y + labelBBox.height);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function calcViewBounds({ nodes, edges }) {
+	return BBox$1.expand(BBox$1.merge(...nodes, ...edges.map(calcEdgeBounds).filter((box) => isFinite(box.x) && isFinite(box.y))), 20);
+}
+
+export { calcEdgeBounds, calcViewBounds, pickViewBounds };

package/dist/utils/view-routing.mjs

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

package/dist/utils/xyflow.mjs

@@ -0,0 +1,173 @@
+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 { Bezier } from "bezier-js";
+
+// 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);
+}
+function isLeafNodeType(type) {
+	return type !== "compound-element" && type !== "compound-deployment" && type !== "view-group";
+}
+function leafNodeRects(nodes) {
+	const rects = [];
+	for (const node of nodes) if (isLeafNodeType(node.type)) rects.push(nodeToRect$1(node));
+	return rects;
+}
+function nodeToRect$1(nd) {
+	return {
+		x: Math.trunc(nd.internals.positionAbsolute.x),
+		y: Math.trunc(nd.internals.positionAbsolute.y),
+		width: Math.round(nd.measured?.width ?? nd.width ?? nd.initialWidth ?? 0),
+		height: Math.round(nd.measured?.height ?? nd.height ?? nd.initialHeight ?? 0)
+	};
+}
+__name(nodeToRect$1, "nodeToRect");
+function getNodeCenter(node) {
+	const { width, height } = getNodeDimensions(node);
+	const { x, y } = node.internals.positionAbsolute;
+	return {
+		x: Math.round(x + width / 2),
+		y: Math.round(y + height / 2)
+	};
+}
+/**
+* Helper function returns the intersection point
+* of the line between the center of the intersectionNode and the target
+*
+* @param intersectionNode the node that is the center of the line
+* @param target position of the target
+* @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
+* @returns coordinates of the intersection point
+*/
+function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
+	const { width, height } = intersectionNode;
+	const nodeCenter = BBox.center(intersectionNode);
+	const v = vector(target.x, target.y).subtract(nodeCenter);
+	const xScale = (nodeMargin + width / 2) / v.x;
+	const yScale = (nodeMargin + height / 2) / v.y;
+	const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+	return vector(v).multiply(scale).add(nodeCenter).trunc().toObject();
+}
+function bezierControlPoints(points) {
+	let [start, ...bezierPoints] = points;
+	invariant(start, "start should be defined");
+	const handles = [];
+	while (hasAtLeast(bezierPoints, 3)) {
+		const [cp1, cp2, end, ...rest] = bezierPoints;
+		const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
+		const inflections = bezier.inflections();
+		if (inflections.length === 0) inflections.push(.5);
+		inflections.forEach((t) => {
+			const { x, y } = bezier.get(t);
+			handles.push({
+				x: Math.trunc(x),
+				y: Math.trunc(y)
+			});
+		});
+		bezierPoints = rest;
+		start = end;
+	}
+	invariant(bezierPoints.length === 0, "all points should be consumed");
+	invariant(hasAtLeast(handles, 1), "at least one control point should be generated");
+	return handles;
+}
+/**
+* Checks if two points are the same, considering both XYPoint (object ) and Point (tuple) formats.
+* @returns `true` If points are within 2px
+*/
+function isSamePoint(a, b) {
+	if (a === b) return true;
+	const [ax, ay] = isArray(a) ? a : [a.x, a.y];
+	const [bx, by] = isArray(b) ? b : [b.x, b.y];
+	return Math.hypot(bx - ax, by - ay) < 2.1;
+}
+function stopPropagation(e) {
+	e.nativeEvent.stopImmediatePropagation();
+	e.stopPropagation();
+}
+const printPoint = (point) => {
+	return `${Math.trunc(point[0])},${Math.trunc(point[1])}`;
+};
+function bezierPath(bezierSpline) {
+	let [start, ...points] = bezierSpline;
+	invariant(start, "start should be defined");
+	let path = `M ${printPoint(start)}`;
+	while (hasAtLeast(points, 3)) {
+		const [cp1, cp2, end, ...rest] = points;
+		path = path + ` C ${printPoint(cp1)} ${printPoint(cp2)} ${printPoint(end)}`;
+		points = rest;
+	}
+	invariant(points.length === 0, "all points should be consumed");
+	return path;
+}
+/**
+* Parses a single padding value to a number
+* @internal
+* @param padding - Padding to parse
+* @param viewport - Width or height of the viewport
+* @returns The padding in pixels
+*/
+function parsePadding(padding, viewport) {
+	if (typeof padding === "number") return Math.floor((viewport - viewport / (1 + padding)) * .5);
+	if (typeof padding === "string" && padding.endsWith("px")) {
+		const paddingValue = parseFloat(padding);
+		if (!Number.isNaN(paddingValue)) return Math.floor(paddingValue);
+	}
+	if (typeof padding === "string" && padding.endsWith("%")) {
+		const paddingValue = parseFloat(padding);
+		if (!Number.isNaN(paddingValue)) return Math.floor(viewport * paddingValue * .01);
+	}
+	console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
+	return 0;
+}
+/**
+* Parses the paddings to an object with top, right, bottom, left, x and y paddings
+* @internal
+* @param padding - Padding to parse
+* @param width - Width of the viewport
+* @param height - Height of the viewport
+* @returns An object with the paddings in pixels
+*/
+function parsePaddings(padding, width, height) {
+	if (typeof padding === "string" || typeof padding === "number") {
+		const paddingY = parsePadding(padding, height);
+		const paddingX = parsePadding(padding, width);
+		return {
+			top: paddingY,
+			right: paddingX,
+			bottom: paddingY,
+			left: paddingX,
+			x: paddingX * 2,
+			y: paddingY * 2
+		};
+	}
+	if (typeof padding === "object") {
+		const top = parsePadding(padding.top ?? padding.y ?? 0, height);
+		const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
+		const left = parsePadding(padding.left ?? padding.x ?? 0, width);
+		const right = parsePadding(padding.right ?? padding.x ?? 0, width);
+		return {
+			top,
+			right,
+			bottom,
+			left,
+			x: left + right,
+			y: top + bottom
+		};
+	}
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		x: 0,
+		y: 0
+	};
+}
+
+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 };