@likec4/diagram 1.60.0 → 1.61.0

package/dist/base-primitives/edge/EdgeLabelContainer.mjs

@@ -4,12 +4,12 @@ import { jsx } from "react/jsx-runtime";
 import { EdgeLabelRenderer } from "@xyflow/react";
 import { isNumber } from "remeda";
 
-//#region src/base-primitives/edge/EdgeLabelContainer.tsx
+// src/base-primitives/edge/EdgeLabelContainer.tsx
 const toCssVarValue = (value) => {
 	if (value === void 0) return "";
 	return isNumber(value) ? `${Math.trunc(value)}px` : value;
 };
-function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, labelBBox, color = "gray" }, animated }, labelPosition: labelXY, className, style: contentStyle, children, ...rest }) {
+function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, labelBBox, color }, animated }, labelPosition: labelXY, className, style: contentStyle, children, ...rest }) {
 	let labelX = labelXY?.x ?? labelBBox?.x;
 	let labelY = labelXY?.y ?? labelBBox?.y;
 	if (labelX === void 0 || labelY === void 0) return null;
@@ -36,5 +36,4 @@ function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered
 	}, id) });
 }
 
-//#endregion
 export { EdgeLabelContainer };

package/dist/base-primitives/edge/EdgeMarkers.mjs

@@ -2,7 +2,7 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 
-//#region src/base-primitives/edge/EdgeMarkers.tsx
+// src/base-primitives/edge/EdgeMarkers.tsx
 const Open = (props) => /* @__PURE__ */ jsx("marker", {
 	viewBox: "-4 -4 14 16",
 	refX: 5,
@@ -159,5 +159,4 @@ function arrowTypeToMarker(arrowType) {
 	}
 }
 
-//#endregion
 export { EdgeMarkers, arrowTypeToMarker };

package/dist/base-primitives/edge/EdgePath.mjs

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { edgePath } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/edge/EdgePath.tsx
+// src/base-primitives/edge/EdgePath.tsx
 const EdgePath = forwardRef(({ edgeProps: { id, data: { line, dir, tail, head }, selectable = true, style, interactionWidth }, isDragging = false, onEdgePointerDown, strokeWidth, svgPath }, svgPathRef) => {
 	let markerStartName = arrowTypeToMarker(tail);
 	let markerEndName = arrowTypeToMarker(head ?? "normal");
@@ -63,5 +63,4 @@ const EdgePath = forwardRef(({ edgeProps: { id, data: { line, dir, tail, head },
 });
 EdgePath.displayName = "EdgePath";
 
-//#endregion
 export { EdgePath };

package/dist/base-primitives/element/ElementActionButtons.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { MouseEvent, ReactNode } from "react";
-//#region src/base-primitives/element/ElementActionButtons.d.ts
 type ElementActionButtonsProps = {
   selected?: boolean;
   data: {
@@ -42,4 +41,4 @@ export declare namespace ElementActionButtons {
     onClick: (e: MouseEvent) => void;
   };
 }
-//#endregion
+export {};

package/dist/base-primitives/element/ElementActionButtons.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconBolt from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs";
+import IconBolt from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ import { useId } from "@mantine/hooks";
 import * as m from "motion/react-m";
 import { actionBtn, actionButtons } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementActionButtons.tsx
+// src/base-primitives/element/ElementActionButtons.tsx
 const variants = {
 	normal: {
 		originY: 0,
@@ -96,5 +96,4 @@ function ElementActionButtons({ selected = false, data: { hovered: isHovered = f
 	});
 }
 
-//#endregion
 export { ElementActionButtons };

package/dist/base-primitives/element/ElementData.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from "react";
 import { ComputedNodeStyle, ElementShape, MarkdownOrString, NodeId } from "@likec4/core";
 import { Color } from "@likec4/core/types";
-//#region src/base-primitives/element/ElementData.d.ts
 type RequiredData = {
   id: NodeId;
   title: string;
@@ -69,4 +68,4 @@ export declare namespace ElementData {
   }, SlotProps> & SlotProps)) & import("react").RefAttributes<HTMLDivElement>>;
   var Description: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
 }
-//#endregion
+export {};

package/dist/base-primitives/element/ElementData.mjs

@@ -9,7 +9,7 @@ import { isTruthy } from "remeda";
 import { RichText } from "@likec4/core/types";
 import { elementNodeData } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementData.tsx
+// src/base-primitives/element/ElementData.tsx
 /**
 * Resolve the icon color based on the node's style and color.
 *
@@ -131,5 +131,4 @@ ElementData.Title = Title;
 ElementData.Technology = Technology;
 ElementData.Description = Description;
 
-//#endregion
 export { ElementData };

package/dist/base-primitives/element/ElementDetailsButton.d.mts

@@ -1,7 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodeData } from "../../base/types.mjs";
 import { MouseEvent, ReactNode } from "react";
-//#region src/base-primitives/element/ElementDetailsButton.d.ts
 type ElementDetailsButtonProps = {
   selected?: boolean;
   data: BaseNodeData;
@@ -10,4 +9,4 @@ type ElementDetailsButtonProps = {
   onClick: (e: MouseEvent) => void;
 };
 export declare function ElementDetailsButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: ElementDetailsButtonProps): import("react").JSX.Element;
-//#endregion
+export {};

package/dist/base-primitives/element/ElementDetailsButton.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
+import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ import { Box as Box$1 } from "@likec4/styles/jsx";
 import * as m from "motion/react-m";
 import { actionBtn } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementDetailsButton.tsx
+// src/base-primitives/element/ElementDetailsButton.tsx
 const variants = {
 	normal: {
 		originX: .4,
@@ -83,5 +83,4 @@ function ElementDetailsButton({ selected = false, data: { hovered: isHovered = f
 	});
 }
 
-//#endregion
 export { ElementDetailsButton };

package/dist/base-primitives/element/ElementNodeContainer.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodePropsWithData } from "../../base/types.mjs";
 import { MotionNodeLayoutOptions, MotionStyle } from "motion/react";
 import { Color, ComputedNodeStyle, ElementShape } from "@likec4/core/types";
-//#region src/base-primitives/element/ElementNodeContainer.d.ts
 type RequiredData = {
   color: Color;
   shape: ElementShape;
@@ -20,4 +19,4 @@ export declare const ElementNodeContainer: import("react").ForwardRefExoticCompo
 } & MotionNodeLayoutOptions & {
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-//#endregion
+export {};

package/dist/base-primitives/element/ElementNodeContainer.mjs

@@ -6,7 +6,7 @@ import { ensureSizes } from "@likec4/core/types";
 import * as m from "motion/react-m";
 import { elementNode } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementNodeContainer.tsx
+// src/base-primitives/element/ElementNodeContainer.tsx
 const variants = {
 	normal: { scale: 1 },
 	hovered: { scale: 1.05 },
@@ -17,7 +17,7 @@ const variants = {
 * Top-level primitive to compose leaf nodes renderers.
 * This container provides the state via data-* attributes
 */
-const ElementNodeContainer = forwardRef(({ nodeProps: { selected = false, selectable = false, data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, style, children, ...rest }, ref) => {
+const ElementNodeContainer = forwardRef(({ nodeProps: { selected, selectable, data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, style, children, ...rest }, ref) => {
 	let variant;
 	switch (true) {
 		case isHovered:
@@ -54,5 +54,4 @@ const ElementNodeContainer = forwardRef(({ nodeProps: { selected = false, select
 });
 ElementNodeContainer.displayName = "ElementNodeContainer";
 
-//#endregion
 export { ElementNodeContainer };

package/dist/base-primitives/element/ElementShape.d.mts

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { ComputedNodeStyle, ElementShape as ElementShape$1 } from "@likec4/core/types";
-//#region src/base-primitives/element/ElementShape.d.ts
+import { Customizable } from "../../customization/customization-types.mjs";
+import { ComputedNodeStyle, ElementShape } from "@likec4/core/types";
 type RequiredData = {
-  shape: ElementShape$1;
+  shape: ElementShape;
   width: number;
   height: number;
   style?: ComputedNodeStyle;
 };
-type ElementShapeProps = {
+export type ElementShapeProps = {
   data: RequiredData;
   width?: number | undefined;
   height?: number | undefined;
@@ -16,6 +16,11 @@ type ElementShapeProps = {
    */
   showSelectionOutline?: boolean | undefined;
 };
-declare function ElementShape$1({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
-//#endregion
+/**
+ * Shape of the element node.
+ *
+ * Customizable slot `ElementShape`: the replacement is rendered for every node
+ * (and wherever else the shape is shown), so keep it cheap and memoize heavy computations.
+ */
+declare const ElementShape$1: Customizable<({ data, width, height, showSelectionOutline }: ElementShapeProps) => import("react").JSX.Element, "ElementShape">;
 export { ElementShape$1 as ElementShape };

package/dist/base-primitives/element/ElementShape.mjs

@@ -1,10 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { customizable } from "../../customization/customizable.mjs";
 import { roundDpr } from "../../utils/roundDpr.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import { elementShapeRecipe } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementShape.tsx
+// src/base-primitives/element/ElementShape.tsx
 function cylinderSVGPath(diameter, height, tilt = .07) {
 	const radius = Math.round(diameter / 2);
 	const rx = radius;
@@ -415,7 +416,13 @@ function ShapeSvgOutline({ shape, w, h }) {
 		children: svg
 	});
 }
-function ElementShape$1({ data, width, height, showSelectionOutline = true }) {
+/**
+* Shape of the element node.
+*
+* Customizable slot `ElementShape`: the replacement is rendered for every node
+* (and wherever else the shape is shown), so keep it cheap and memoize heavy computations.
+*/
+const ElementShape$1 = customizable("ElementShape")(function ElementShape({ data, width, height, showSelectionOutline = true }) {
 	let w = !!width && width > 10 ? width : data.width;
 	let h = !!height && height > 10 ? height : data.height;
 	const isMultiple = data.style?.multiple ?? false;
@@ -462,8 +469,6 @@ function ElementShape$1({ data, width, height, showSelectionOutline = true }) {
 			h
 		})]
 	})] });
-}
-__name(ElementShape$1, "ElementShape");
+});
 
-//#endregion
 export { ElementShape$1 as ElementShape };

package/dist/base-primitives/element/ElementTags.d.mts

@@ -1,7 +1,10 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodePropsWithData } from "../../base/types.mjs";
-import "react";
-//#region src/base-primitives/element/ElementTags.d.ts
+import { ComponentPropsWithoutRef } from "react";
+export type ElementTagProps = {
+  tag: string;
+  cursor?: 'pointer' | 'default';
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'translate'>;
 export declare const ElementTag: import("react").ForwardRefExoticComponent<{
   tag: string;
   cursor?: "pointer" | "default";
@@ -16,4 +19,4 @@ export type ElementTagsProps = BaseNodePropsWithData<Data> & {
   onTagMouseLeave?: (tag: `#${string}`) => void;
 };
 export declare const ElementTags: import("react").MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react").JSX.Element | null>;
-//#endregion
+export {};

package/dist/base-primitives/element/ElementTags.mjs

@@ -12,7 +12,7 @@ import { Box, HStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 import { likec4tag } from "@likec4/styles/recipes";
 
-//#region src/base-primitives/element/ElementTags.tsx
+// src/base-primitives/element/ElementTags.tsx
 const ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) => {
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
@@ -96,8 +96,7 @@ function WithElementTags({ id, tags, width, hovered, onTagClick, onTagMouseEnter
 				transition: "fast"
 			})
 		}, id + "#" + tag))
-	}), /* @__PURE__ */ jsx(NodeToolbar, {
-		isVisible,
+	}), isVisible && /* @__PURE__ */ jsx(NodeToolbar, {
 		align: "start",
 		position: Position.Bottom,
 		children: /* @__PURE__ */ jsx(HStack, {
@@ -133,5 +132,4 @@ function WithElementTags({ id, tags, width, hovered, onTagClick, onTagMouseEnter
 	})] });
 }
 
-//#endregion
 export { ElementTag, ElementTags };

package/dist/base-primitives/index.d.mts

@@ -12,10 +12,10 @@ import { ElementActionButtons } from "./element/ElementActionButtons.mjs";
 import { ElementData } from "./element/ElementData.mjs";
 import { ElementDetailsButton } from "./element/ElementDetailsButton.mjs";
 import { ElementNodeContainer } from "./element/ElementNodeContainer.mjs";
-import { ElementShape } from "./element/ElementShape.mjs";
-import { ElementTag, ElementTags, ElementTagsProps } from "./element/ElementTags.mjs";
+import { ElementShape, ElementShapeProps } from "./element/ElementShape.mjs";
+import { ElementTag, ElementTagProps, ElementTags, ElementTagsProps } from "./element/ElementTags.mjs";
 import { Markdown } from "./Markdown.mjs";
-import { memoEdge } from "./memoEdge.mjs";
-import { memoNode } from "./memoNode.mjs";
+import "./memoEdge.mjs";
+import "./memoNode.mjs";
 import { DefaultHandles } from "./NodeHandles.mjs";
-export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementTag, ElementTags, Markdown, memoEdge, memoNode };
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, type ElementShapeProps, ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps, Markdown };

package/dist/base-primitives/memoEdge.d.mts

@@ -1,6 +1,2 @@
-import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { BaseEdgeProps } from "../base/types.mjs";
-import { FunctionComponent } from "react";
-//#region src/base-primitives/memoEdge.d.ts
-export declare function memoEdge<P extends BaseEdgeProps>(Edge: FunctionComponent<P>): FunctionComponent<P>;
-//#endregion
+import "../base/types.mjs";
+import { FunctionComponent } from "react";

package/dist/base-primitives/memoEdge.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { memo } from "react";
 import { deepEqual } from "fast-equals";
 
-//#region src/base-primitives/memoEdge.ts
+// src/base-primitives/memoEdge.ts
 const isSame = (a, b) => {
 	return Math.abs(a - b) < 2.5;
 };
@@ -13,5 +13,4 @@ function memoEdge(Edge) {
 	return Memo;
 }
 
-//#endregion
 export { memoEdge };

package/dist/base-primitives/memoNode.d.mts

@@ -1,6 +1,2 @@
-import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { BaseNodeProps } from "../base/types.mjs";
-import { FunctionComponent } from "react";
-//#region src/base-primitives/memoNode.d.ts
-export declare function memoNode<P extends BaseNodeProps>(Node: FunctionComponent<P>, displayName?: string): FunctionComponent<P>;
-//#endregion
+import "../base/types.mjs";
+import { FunctionComponent } from "react";

package/dist/components/EmptyBox.mjs

@@ -2,10 +2,9 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { isCssProperty, styled } from "@likec4/styles/jsx";
 import { emptyBox } from "@likec4/styles/recipes";
 
-//#region src/components/EmptyBox.tsx
+// src/components/EmptyBox.tsx
 const EmptyBox = styled("div", emptyBox, { shouldForwardProp(prop, variantKeys) {
 	return !variantKeys.includes(prop) && !isCssProperty(prop);
 } });
 
-//#endregion
 export { EmptyBox };

package/dist/components/ErrorFallback.d.mts

@@ -1,7 +1,8 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ErrorBoundaryProps, FallbackProps } from "react-error-boundary";
-//#region src/components/ErrorFallback.d.ts
 export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react").JSX.Element;
-declare function ErrorBoundary$1(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react").JSX.Element;
-//#endregion
+declare function ErrorBoundary$1({ variant, ...props }: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'> & {
+  /** @default 'dialog' */
+  variant?: 'dialog' | 'message';
+}): import("react").JSX.Element;
 export { ErrorBoundary$1 as ErrorBoundary };

package/dist/components/ErrorFallback.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconX from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import IconX from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
 import { css } from "@likec4/styles/css";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,9 +7,8 @@ import { Button, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
 import { HStack, VStack } from "@likec4/styles/jsx";
 import { ErrorBoundary } from "react-error-boundary";
 
-//#region src/components/ErrorFallback.tsx
+// src/components/ErrorFallback.tsx
 function ErrorFallback({ error, resetErrorBoundary }) {
-	const errorString = error instanceof Error ? error.message : "Unknown error";
 	const dialogRef = useRef(null);
 	return /* @__PURE__ */ jsx("dialog", {
 		open: true,
@@ -47,62 +46,69 @@ function ErrorFallback({ error, resetErrorBoundary }) {
 			e.stopPropagation();
 			resetErrorBoundary();
 		},
-		children: /* @__PURE__ */ jsxs(HStack, {
-			p: "xl",
-			gap: "lg",
-			alignItems: "flex-start",
-			flexWrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(ThemeIcon, {
-				size: "md",
-				radius: "xl",
-				color: "red",
-				children: /* @__PURE__ */ jsx(IconX, { style: {
-					width: 20,
-					height: 20
-				} })
-			}), /* @__PURE__ */ jsxs(VStack, {
-				flex: "1",
-				children: [
-					/* @__PURE__ */ jsx(Text, {
+		children: /* @__PURE__ */ jsx(ErrorFallbackMessage, {
+			error,
+			resetErrorBoundary
+		})
+	});
+}
+function ErrorFallbackMessage({ error, resetErrorBoundary }) {
+	const errorString = error instanceof Error ? error.message : "Unknown error";
+	return /* @__PURE__ */ jsxs(HStack, {
+		p: "xl",
+		gap: "lg",
+		alignItems: "flex-start",
+		flexWrap: "nowrap",
+		children: [/* @__PURE__ */ jsx(ThemeIcon, {
+			size: "md",
+			radius: "xl",
+			color: "red",
+			children: /* @__PURE__ */ jsx(IconX, { style: {
+				width: 20,
+				height: 20
+			} })
+		}), /* @__PURE__ */ jsxs(VStack, {
+			flex: "1",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					fz: "md",
+					children: "Oops, something went wrong"
+				}),
+				/* @__PURE__ */ jsx(ScrollAreaAutosize, {
+					maw: "100%",
+					mah: 400,
+					type: "auto",
+					children: /* @__PURE__ */ jsx(Text, {
 						fz: "md",
-						children: "Oops, something went wrong"
-					}),
-					/* @__PURE__ */ jsx(ScrollAreaAutosize, {
-						maw: "100%",
-						mah: 400,
-						type: "auto",
-						children: /* @__PURE__ */ jsx(Text, {
-							fz: "md",
-							c: "red",
-							style: {
-								whiteSpace: "pre-wrap",
-								userSelect: "all"
-							},
-							children: errorString
-						})
-					}),
-					/* @__PURE__ */ jsxs(HStack, {
-						gap: "md",
-						mt: "md",
-						children: [/* @__PURE__ */ jsx(Button, {
-							size: "sm",
-							variant: "default",
-							onClick: () => resetErrorBoundary(),
-							children: "Reset"
-						}), /* @__PURE__ */ jsx(Text, {
-							fz: "sm",
-							c: "dimmed",
-							children: "See console for more details and report the issue if it persists."
-						})]
+						c: "red",
+						style: {
+							whiteSpace: "pre-wrap",
+							userSelect: "all"
+						},
+						children: errorString
 					})
-				]
-			})]
-		})
+				}),
+				/* @__PURE__ */ jsxs(HStack, {
+					gap: "md",
+					mt: "md",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "default",
+						onClick: () => resetErrorBoundary(),
+						children: "Reset"
+					}), /* @__PURE__ */ jsx(Text, {
+						fz: "sm",
+						c: "dimmed",
+						children: "See console for more details and report the issue if it persists."
+					})]
+				})
+			]
+		})]
 	});
 }
-function ErrorBoundary$1(props) {
+function ErrorBoundary$1({ variant = "dialog", ...props }) {
 	return /* @__PURE__ */ jsx(ErrorBoundary, {
-		FallbackComponent: ErrorFallback,
+		FallbackComponent: variant === "dialog" ? ErrorFallback : ErrorFallbackMessage,
 		onError: (err, info) => {
 			console.error(err, info);
 		},
@@ -111,5 +117,4 @@ function ErrorBoundary$1(props) {
 }
 __name(ErrorBoundary$1, "ErrorBoundary");
 
-//#endregion
-export { ErrorBoundary$1 as ErrorBoundary, ErrorFallback };
+export { ErrorBoundary$1 as ErrorBoundary, ErrorFallback, ErrorFallbackMessage };

package/dist/components/FloatingWindow.mjs

@@ -1,5 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useId as useId$1 } from "../hooks/useId.mjs";
+import { useId as useId$2 } from "../hooks/useId.mjs";
 import { useMantinePortalProps } from "../hooks/useMantinePortalProps.mjs";
 import { cx } from "@likec4/styles/css";
 import { useRef } from "react";
@@ -10,10 +10,10 @@ import { useSessionStorage } from "@mantine/hooks";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { floatingWindow } from "@likec4/styles/recipes";
 
-//#region src/components/FloatingWindow.tsx
+// src/components/FloatingWindow.tsx
 function FloatingWindow$1({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable = false, ...props }) {
 	const portalProps = useMantinePortalProps();
-	const id = useId$1();
+	const id = useId$2();
 	const [windowState, setWindowState] = useSessionStorage({
 		key: `likec4:window:${windowId ?? id}`,
 		getInitialValueInEffect: false,
@@ -87,5 +87,4 @@ function FloatingWindow$1({ children, windowId, onClose, dimensions, initialPosi
 }
 __name(FloatingWindow$1, "FloatingWindow");
 
-//#endregion
 export { FloatingWindow$1 as FloatingWindow };

package/dist/components/GithubIcon.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/GithubIcon.tsx
+// src/components/GithubIcon.tsx
 const GithubIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx("svg", {
 	height: "24",
 	width: "24",
@@ -13,5 +13,4 @@ const GithubIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z" })
 }));
 
-//#endregion
 export { GithubIcon };

package/dist/components/Link.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconCheck from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
-import IconCopy from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs";
+import IconCheck from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconCopy from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs";
 import { GithubIcon } from "./GithubIcon.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Badge, CopyButton } from "@mantine/core";
 import { styled } from "@likec4/styles/jsx";
 
-//#region src/components/Link.tsx
+// src/components/Link.tsx
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(({ value, className, ...props }, ref) => {
 	const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
@@ -99,5 +99,4 @@ const Link = forwardRef(({ value, className, ...props }, ref) => {
 	});
 });
 
-//#endregion
 export { Link };

package/dist/components/Logo.d.mts

@@ -1,7 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "../customization/customization-types.mjs";
 import { SVGProps } from "react";
-//#region src/components/Logo.d.ts
-type LogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'>;
-export declare const Logo: import("react").ForwardRefExoticComponent<Omit<LogoProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const LogoIcon: import("react").ForwardRefExoticComponent<Omit<LogoProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//#endregion
+export declare const Logo: Customizable<(props: SVGProps<SVGSVGElement>) => import("react").JSX.Element, "LogoSvg">;
+export declare const LogoIcon: Customizable<(props: SVGProps<SVGSVGElement>) => import("react").JSX.Element, "LogoIconSvg">;