@likec4/diagram 1.59.3 → 1.59.4

package/dist/search/components/SearchByTags.js

@@ -35,16 +35,16 @@ function SearchByTags() {
 			css: {
 				gap: "1.5",
 				flexWrap: "wrap",
-				opacity: isFiltered ? 1 : .3,
+				opacity: isFiltered ? "1" : "0.3",
 				grayscale: isFiltered ? 0 : .9,
 				filter: "auto",
 				transition: "fast",
 				_groupHover: {
-					opacity: 1,
+					opacity: "1",
 					grayscale: 0
 				},
 				_groupFocusWithin: {
-					opacity: 1,
+					opacity: "1",
 					grayscale: 0
 				}
 			},

package/dist/search/components/ViewsColum.js

@@ -1,22 +1,25 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { EmptyBox } from "../../components/EmptyBox.js";
+import { ViewIcon } from "../../components/ViewIcon.js";
 import { useSearchContext } from "../SearchContext.js";
 import { useNormalizedSearch } from "../hooks.js";
-import { buttonsva, emptyBoX, focusable } from "./_shared.css.js";
+import { buttonsva, focusable } from "./_shared.css.js";
 import { centerY, moveFocusToSearchInput, queryAllFocusable } from "./utils.js";
 import { viewButton } from "./ViewsColumn.css.js";
 import { cx } from "@likec4/styles/css";
-import { IconStack2, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { first } from "remeda";
-import { Badge, Group, Highlight, Stack, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
+import { Badge, Group, Highlight, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
+import { m } from "motion/react";
 import { preferSummary } from "@likec4/core/types";
-import * as m from "motion/react-m";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
 //#region src/search/components/ViewsColum.tsx
-var NothingFound = () => /* @__PURE__ */ jsx(Box$1, {
-	className: emptyBoX,
+var NothingFound = () => /* @__PURE__ */ jsx(EmptyBox, {
+	fullsize: true,
+	as: m.div,
 	children: "Nothing found"
 });
 var useFoundViews = () => {
@@ -50,13 +53,11 @@ var useFoundViews = () => {
 var ViewsColumn = memo(() => {
 	const ref = useRef(null);
 	const [views, search, currentViewId] = useFoundViews();
-	return /* @__PURE__ */ jsxs(Stack, {
+	if (views.length === 0) return /* @__PURE__ */ jsx(NothingFound, {}, "nothing-found");
+	return /* @__PURE__ */ jsxs(m.div, {
 		ref,
-		renderRoot: (props) => /* @__PURE__ */ jsx(m.div, {
-			layout: true,
-			...props
-		}),
-		gap: 8,
+		layout: true,
+		className: vstack({ gap: "2" }),
 		"data-likec4-search-views": true,
 		onKeyDown: (e) => {
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -71,27 +72,23 @@ var ViewsColumn = memo(() => {
 				return;
 			}
 		},
-		children: [
-			views.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
-			views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(UnstyledButton, {
-				"data-likec4-view": true,
-				tabIndex: -1,
-				onFocus: (e) => {
-					e.stopPropagation();
-					moveFocusToSearchInput(ref.current);
-				}
-			}) }),
-			views.map((view, i) => /* @__PURE__ */ jsx(m.div, {
-				layoutId: `@view${view.id}`,
-				children: /* @__PURE__ */ jsx(ViewButton, {
-					view,
-					currentViewId: currentViewId ?? "",
-					search,
-					tabIndex: i === 0 ? 0 : -1
-				})
-			}, view.id))
-		]
-	});
+		children: [views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+			"data-likec4-view": true,
+			tabIndex: -1,
+			onFocus: (e) => {
+				e.stopPropagation();
+				moveFocusToSearchInput(ref.current);
+			}
+		}) }), views.map((view, i) => /* @__PURE__ */ jsx(m.div, {
+			layout: "position",
+			children: /* @__PURE__ */ jsx(ViewButton, {
+				view,
+				currentViewId: currentViewId ?? "",
+				search,
+				tabIndex: i === 0 ? 0 : -1
+			})
+		}, `@view${view.id}`))]
+	}, "views-column");
 });
 var btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
@@ -126,7 +123,10 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, cur
 		children: [/* @__PURE__ */ jsx(ThemeIcon, {
 			variant: "transparent",
 			className: btn.icon,
-			children: view.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
+			children: /* @__PURE__ */ jsx(ViewIcon, {
+				type: view._type,
+				size: 16
+			})
 		}), /* @__PURE__ */ jsxs(Box$1, {
 			style: { flexGrow: 1 },
 			children: [/* @__PURE__ */ jsxs(Group, {
@@ -137,6 +137,7 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, cur
 					component: "div",
 					highlight: search,
 					className: btn.title,
+					lineClamp: 1,
 					children: view.titleOrUntitled
 				}), isCurrentView && /* @__PURE__ */ jsx(Badge, {
 					size: "xs",

package/dist/search/components/ViewsColumn.css.js

@@ -3,13 +3,13 @@ import { css, cx } from "@likec4/styles/css";
 var viewButton = cx(css({
 	flexWrap: "nowrap",
 	display: "flex",
-	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: .45 }
+	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: "0.45" }
 }), "likec4-view-btn");
 css({
 	marginTop: "1",
-	fontSize: "13px",
-	lineHeight: "1.4",
-	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: .85 }
+	fontSize: "sm",
+	lineHeight: "md",
+	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: "0.85" }
 });
 //#endregion
 export { viewButton };

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system/types';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"icon" | "title" | "description" | "root" | "descriptionColor", SlotRecipeVariantRecord<"icon" | "title" | "description" | "root" | "descriptionColor">>;

package/dist/search/components/_shared.css.js

@@ -1,9 +1,10 @@
 import { css, sva } from "@likec4/styles/css";
+import { emptyBox } from "@likec4/styles/recipes";
 //#region src/search/components/_shared.css.ts
 var buttonFocused = css.raw({
 	outline: "none",
-	background: "mantine.primary[8]",
-	borderColor: "mantine.primary[9]"
+	background: "likec4.accent.8",
+	borderColor: "likec4.accent.9"
 });
 var _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 var button = css.raw({
@@ -12,14 +13,13 @@ var button = css.raw({
 	background: "surface.default",
 	rounded: "sm",
 	padding: `[12px 8px 12px 14px]`,
-	minHeight: "60px",
+	minHeight: "[60px]",
 	gap: "2",
-	border: `1px solid`,
-	borderColor: "default.border",
+	border: `default`,
 	_hover: {
 		...buttonFocused,
-		borderColor: "mantine.primary[9]",
-		background: `mantine.primary[8]/60`
+		borderColor: "likec4.accent.9",
+		background: `likec4.accent.8/60`
 	},
 	_focus: buttonFocused,
 	[_treenodefocus]: buttonFocused,
@@ -28,26 +28,24 @@ var button = css.raw({
 		background: `mantine.dark[6]/80`
 	},
 	_light: {
-		background: `mantine.white/80`,
+		background: `white/80`,
 		_hover: {
-			borderColor: "mantine.primary[6]",
-			backgroundColor: "mantine.primary[5]"
+			borderColor: "likec4.accent.6",
+			backgroundColor: "likec4.accent.5"
 		}
 	}
 });
 var focusable = "likec4-focusable";
-var iconSize = { ref: "var(--likec4-icon-size, 24px)" };
+var iconSize = { ref: "24px" };
 var icon = css.raw({
 	color: {
 		base: "text.dimmed",
-		_light: "mantine.gray[5]",
-		_groupHover: "mantine.primary[0]",
-		_groupFocus: "mantine.primary[0]"
+		_groupHover: "likec4.accent.0",
+		_groupFocus: "likec4.accent.0"
 	},
-	[_treenodefocus]: { color: "mantine.primary[0]" },
-	flex: `0 0 ${iconSize.ref}`,
-	height: iconSize.ref,
-	width: iconSize.ref,
+	[_treenodefocus]: { color: "likec4.accent.0" },
+	flex: `[0 0 ${iconSize.ref}]`,
+	boxSize: `[${iconSize.ref}]`,
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -63,24 +61,24 @@ var icon = css.raw({
 	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
 });
 var title = css.raw({
-	fontSize: "16px",
+	fontSize: "lg",
 	fontWeight: "medium",
-	lineHeight: "1.1",
-	[`:where([data-disabled]) &`]: { opacity: .4 },
+	lineHeight: "snug",
+	[`:where([data-disabled]) &`]: { opacity: "[0.4]" },
 	color: {
 		base: "mantine.dark[1]",
 		_light: "mantine.gray[7]",
 		_groupHover: {
-			base: "mantine.primary[1]",
+			base: "likec4.accent.1",
 			_light: "white"
 		},
 		_groupFocus: {
-			base: "mantine.primary[1]",
+			base: "likec4.accent.1",
 			_light: "white"
 		}
 	},
 	[_treenodefocus]: { color: {
-		base: "mantine.primary[1]",
+		base: "likec4.accent.1",
 		_light: "white"
 	} }
 });
@@ -88,33 +86,20 @@ var descriptionColor = css.raw({
 	color: {
 		base: "text.dimmed",
 		_groupHover: {
-			base: "mantine.primary[1]",
-			_light: "mantine.primary[0]"
+			base: "likec4.accent.1",
+			_light: "likec4.accent.0"
 		},
-		_groupFocus: "mantine.primary[0]"
+		_groupFocus: "likec4.accent.0"
 	},
-	[_treenodefocus]: { color: "mantine.primary[0]" }
+	[_treenodefocus]: { color: "likec4.accent.0" }
 });
 var description = css.raw(descriptionColor, {
 	marginTop: "1",
-	fontSize: "12px",
-	lineHeight: "1.4",
-	[`:where([data-disabled]) &`]: { opacity: .85 }
-});
-var emptyBoX = css({
-	width: "100%",
-	height: "100%",
-	border: `2px dashed`,
-	borderColor: "default.border",
-	rounded: "md",
-	display: "flex",
-	justifyContent: "center",
-	alignItems: "center",
-	fontSize: "md",
-	color: "text.dimmed",
-	padding: "md",
-	paddingBlock: "xl"
+	fontSize: "sm",
+	lineHeight: "sm",
+	[`:where([data-disabled]) &`]: { opacity: "[0.85]" }
 });
+emptyBox({ fullsize: true });
 var buttonsva = sva({
 	slots: [
 		"root",
@@ -133,4 +118,4 @@ var buttonsva = sva({
 	}
 });
 //#endregion
-export { buttonsva, emptyBoX, focusable };
+export { buttonsva, focusable };

package/dist/search/components/styles.css.js

@@ -21,7 +21,7 @@ var pickviewBackdrop = css({
 	width: "100%",
 	height: "100%",
 	backgroundColor: "[rgb(34 34 34 / 0.7)]",
-	zIndex: 902,
+	zIndex: "[902]",
 	backdropFilter: "auto",
 	backdropBlur: "10px",
 	_light: { backgroundColor: "[rgb(255 255 255 / 0.6)]" }
@@ -31,10 +31,10 @@ var pickview = css({
 	top: "[2rem]",
 	left: "[50%]",
 	width: "100%",
-	maxWidth: "600px",
-	minWidth: "200px",
+	maxWidth: "[600px]",
+	minWidth: "[200px]",
 	transform: "translateX(-50%)",
-	zIndex: 903
+	zIndex: "[903]"
 });
 var pickviewGroup = css({
 	marginTop: "2",

package/dist/shadowroot/ShadowRoot.js

@@ -1,13 +1,12 @@
 import { __name } from "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
-import { DefaultMantineProvider } from "../context/DefaultMantineProvider.js";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.js";
 import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import styles_font_default from "../styles-font2.js";
 import styles_default from "../styles2.js";
 import { memo, useEffectEvent, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import "fast-equals";
 import { first, isDefined, isFunction, isString, once } from "remeda";
 import { useColorScheme, useMutationObserverTarget } from "@mantine/hooks";
 import { createPortal } from "react-dom";
@@ -89,7 +88,7 @@ function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorSc
 			ref: mantineRootRef,
 			"data-mantine-color-scheme": colorScheme,
 			className: "likec4-shadow-root",
-			children: /* @__PURE__ */ jsx(DefaultMantineProvider, {
+			children: /* @__PURE__ */ jsx(LikeC4MantineProvider, {
 				defaultColorScheme: colorScheme,
 				getRootElement,
 				cssVariablesSelector: ".likec4-shadow-root",