@likec4/diagram 1.58.0 → 1.59.1

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -1,7 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { deepEqual } from "fast-equals";
 import { filter, hasAtLeast, map, pipe } from "remeda";
@@ -13,7 +12,7 @@ import { vstack } from "@likec4/styles/patterns";
 var hasDrifts = (item) => {
 	return !!item.drifts && hasAtLeast(item.drifts, 1);
 };
-var selectDrifts = selectDiagramActorContext((ctx) => ({
+var selectDrifts = selectDiagramContext((ctx) => ({
 	view: ctx.view.drifts ?? [],
 	nodes: pipe(ctx.view.nodes, map((node) => ({
 		id: node.id,
@@ -24,7 +23,7 @@ var selectDrifts = selectDiagramActorContext((ctx) => ({
 		edgeId: edge.id,
 		drifts: edge.drifts
 	})), filter(hasDrifts))
-}));
+}), deepEqual);
 var variants = {
 	initial: {
 		opacity: 0,
@@ -45,7 +44,7 @@ var variants = {
 	}
 };
 function DriftsSummary() {
-	const selected = useDiagramSnapshot(selectDrifts, deepEqual);
+	const selected = useDiagramSelector(selectDrifts);
 	const diagram = useDiagram();
 	const onMouseLeaveDebounced = useDebouncedCallback((e) => {
 		e.stopPropagation();

package/dist/navigationpanel/controls/DetailsControls.js

@@ -2,7 +2,7 @@ import "../../_virtual/_rolldown/runtime.js";
 import { useDiagram } from "../../hooks/safeContext.js";
 import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { useNavigationActorSnapshot } from "../hooks.js";
+import { selectNavigationContext, useNavigationActorSelector } from "../hooks.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
 import { ElementTag } from "../../base-primitives/element/ElementTags.js";
 import { Link } from "../../components/Link.js";
@@ -10,15 +10,14 @@ import { css, cx } from "@likec4/styles/css";
 import { IconId, IconLink } from "@tabler/icons-react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
 import { Badge, Popover, Text, UnstyledButton } from "@mantine/core";
 import { Box as Box$1, HStack, styled } from "@likec4/styles/jsx";
+import { RichText } from "@likec4/core/types";
 import { hstack, vstack } from "@likec4/styles/patterns";
 import * as m from "motion/react-m";
-import { RichText } from "@likec4/core/types";
 import { extractViewTitleFromPath } from "@likec4/core/model";
 //#region src/navigationpanel/controls/DetailsControls.tsx
-var selector = ({ context }) => {
+var selector = selectNavigationContext((context) => {
 	const view = context.view;
 	return {
 		id: view.id,
@@ -27,10 +26,10 @@ var selector = ({ context }) => {
 		tags: view.tags ?? [],
 		links: view.links ?? []
 	};
-};
+});
 var DetailsControls = (props) => {
 	const [opened, setOpened] = useState(false);
-	const data = useNavigationActorSnapshot(selector, deepEqual);
+	const data = useNavigationActorSelector(selector);
 	return /* @__PURE__ */ jsxs(Popover, {
 		position: "bottom-end",
 		shadow: "xl",
@@ -199,8 +198,8 @@ var ViewBadge = ({ label, value }) => {
 					overflow: "visible",
 					px: "1",
 					color: {
-						_dark: "mantine.colors.gray[4]",
-						_light: "mantine.colors.gray[8]"
+						_dark: "mantine.gray[4]",
+						_light: "mantine.gray[8]"
 					}
 				}),
 				label: css({ overflow: "visible" }),

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -45,7 +45,7 @@ function WithProjectsMenu({ projects, onProjectChange }) {
 						fontSize: "xxs",
 						height: "auto",
 						lineHeight: 1.1,
-						color: { _light: "mantine.colors.gray[9]" }
+						color: { _light: "mantine.gray[9]" }
 					}),
 					section: css({ "&:is([data-position=\"right\"])": { marginInlineStart: "1" } })
 				},

package/dist/navigationpanel/editorpanel/styles.js

@@ -33,28 +33,28 @@ var autolayoutButton = css({
 	zIndex: 1
 });
 var autolayoutIndicator = css({
-	background: "mantine.colors.gray[2]",
+	background: "mantine.gray[2]",
 	borderRadius: "sm",
 	border: `1px solid`,
-	borderColor: "mantine.colors.gray[4]",
+	borderColor: "mantine.gray[4]",
 	_dark: {
-		background: "mantine.colors.dark[5]",
-		borderColor: "mantine.colors.dark[4]"
+		background: "mantine.dark[5]",
+		borderColor: "mantine.dark[4]"
 	}
 });
 var spacingSliderBody = css({
 	position: "relative",
 	borderRadius: "sm",
-	background: "mantine.colors.gray[3]",
-	boxShadow: "inset 1px 1px 3px 0px #00000024",
-	_dark: { background: "mantine.colors.dark[7]" }
+	background: "mantine.gray[3]",
+	boxShadow: "[inset 1px 1px 3px 0px #00000024]",
+	_dark: { background: "mantine.dark[7]" }
 });
 var spacingSliderThumb = css({
 	position: "absolute",
 	width: "8px",
 	height: "8px",
 	border: `2px solid`,
-	borderColor: "mantine.colors.gray[5]",
+	borderColor: "mantine.gray[5]",
 	borderRadius: "sm",
 	transform: "translate(-50%, -50%)"
 });

package/dist/navigationpanel/hooks.d.ts

@@ -1,10 +1,25 @@
 import { ViewId } from '@likec4/core';
-import { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorRef, NavigationPanelActorSnapshot } from './actor';
+import { NavigationPanelActorEvent, NavigationPanelActorRef } from './actor';
 import { Provider } from 'react';
-export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>;
-export declare const useNavigationActorRef: () => NavigationPanelActorRef;
-export declare function useNavigationActorSnapshot<T = unknown>(selector: (context: NavigationPanelActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useNavigationActorContext<T = unknown>(selector: (context: NavigationPanelActorContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+import { Context } from './actor.setup';
+import { MachineSnapshot } from 'xstate';
+export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>, selectNavigationContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean], selectNavigationSnapshot: <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean], useNavigationActorRef: () => NavigationPanelActorRef, useNavigationActorSelector: {
+    <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T): T;
+    <T>(selectorCompare: [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean]): T;
+    <T>(selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
+        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
+    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean): T;
+};
 export interface NavigationActor {
     readonly actorRef: NavigationPanelActorRef;
     send: (event: NavigationPanelActorEvent) => void;

package/dist/navigationpanel/hooks.js

@@ -1,22 +1,8 @@
 import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext, useMemo } from "react";
-import { shallowEqual } from "fast-equals";
-import { useSelector } from "@xstate/react";
+import { createSafeContextForActor } from "../hooks/safeContext.js";
+import { useMemo } from "react";
 //#region src/navigationpanel/hooks.tsx
-var NavigationPanelActorSafeContext = createContext(null);
-NavigationPanelActorSafeContext.displayName = "NavigationPanelActorSafeContext";
-var NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider;
-var useNavigationActorRef = () => {
-	const ctx = useContext(NavigationPanelActorSafeContext);
-	if (ctx === null) throw new Error("NavigationPanelActorRef is not found in the context");
-	return ctx;
-};
-function useNavigationActorSnapshot(selector, compare = shallowEqual) {
-	return useSelector(useNavigationActorRef(), selector, compare);
-}
-function useNavigationActorContext(selector, compare = shallowEqual) {
-	return useNavigationActorSnapshot((snapshot) => selector(snapshot.context), compare);
-}
+var { ContextProvider: NavigationPanelActorContextProvider, selectContext: selectNavigationContext, selectSnapshot: selectNavigationSnapshot, useActorRef: useNavigationActorRef, useActorSelector: useNavigationActorSelector } = createSafeContextForActor("NavigationPanel");
 function useNavigationActor() {
 	const actorRef = useNavigationActorRef();
 	return useMemo(() => ({
@@ -41,4 +27,4 @@ function useNavigationActor() {
 	}), [actorRef]);
 }
 //#endregion
-export { NavigationPanelActorContextProvider, useNavigationActor, useNavigationActorContext, useNavigationActorRef, useNavigationActorSnapshot };
+export { NavigationPanelActorContextProvider, selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector };

package/dist/navigationpanel/styles.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '../../styled-system';
+import { RecipeRuntimeFn } from '../../styled-system/types';
 export declare const breadcrumbTitle: RecipeRuntimeFn<{
     truncate: {
         true: {

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -44,7 +44,7 @@ function ActiveWalkthroughControls() {
 	const { isParallel, hasNext, hasPrevious, currentStep, totalSteps } = useDiagramContext((s) => {
 		const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
 		return {
-			isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+			isParallel: isTruthy(s.activeWalkthrough?.activeFlow),
 			hasNext: currentStepIndex < s.xyedges.length - 1,
 			hasPrevious: currentStepIndex > 0,
 			currentStep: currentStepIndex + 1,
@@ -69,7 +69,7 @@ function ActiveWalkthroughControls() {
 			}, "stop-walkthrough"),
 			/* @__PURE__ */ jsx(PrevNextButton, {
 				disabled: !hasPrevious,
-				onClick: () => diagram.walkthroughStep("previous"),
+				onClick: () => diagram.walkthroughStep("prev"),
 				leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
 				children: "Previous"
 			}, "prev"),

package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts

@@ -2,6 +2,7 @@ import { ButtonProps } from '@mantine/core';
 import { ForwardRefExoticComponent, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, ChangeEventHandler, InputEventHandler, ReactEventHandler, SubmitEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
+    key?: Key | null | undefined;
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
@@ -12,9 +13,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
     title?: string | undefined;
-    key?: Key | null | undefined;
     dir?: string | undefined;
-    property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -193,7 +192,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
-    enterKeyHint?: "search" | "next" | "previous" | "done" | "send" | "enter" | "go" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
@@ -204,6 +203,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
+    property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;
     rev?: string | undefined;
@@ -229,7 +229,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,7 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
 import { Tooltip as Tooltip$1 } from "../_common.js";
 import { useNavigationActor } from "../hooks.js";
 import { css } from "@likec4/styles/css";
@@ -75,30 +74,29 @@ function StartWalkthroughButton() {
 		})
 	});
 }
-var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
-	return /* @__PURE__ */ jsx(m$1.div, {
-		ref,
-		layout: "position",
-		children: /* @__PURE__ */ jsx(SegmentedControl, {
-			size: "xs",
-			value,
-			onChange: (variant) => {
-				invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
-				onChange(variant);
-			},
-			classNames: { label: css({ fontSize: "xxs" }) },
-			data: [{
-				value: "diagram",
-				label: "Diagram"
-			}, {
-				value: "sequence",
-				label: "Sequence"
-			}]
-		})
-	});
-});
+var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => /* @__PURE__ */ jsx(m$1.div, {
+	ref,
+	layout: "position",
+	children: /* @__PURE__ */ jsx(SegmentedControl, {
+		size: "xs",
+		value,
+		onChange: (variant) => {
+			invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
+			onChange(variant);
+		},
+		classNames: { label: css({ fontSize: "xxs" }) },
+		data: [{
+			value: "diagram",
+			label: "Diagram"
+		}, {
+			value: "sequence",
+			label: "Sequence"
+		}]
+	})
+}));
+var selectDynamicViewVariant = selectDiagramContext((c) => c.dynamicViewVariant);
 function DynamicViewControls() {
-	const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+	const dynamicViewVariant = useDiagramSelector(selectDynamicViewVariant);
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {
 		value: dynamicViewVariant,

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,19 +17,19 @@ var SectionHeader = styled("div", { base: {
 	userSelect: "none",
 	mb: "xxs"
 } });
-function selectWalkthroughNotes(s) {
+var selectWalkthroughNotes = selectDiagramActorContext((s) => {
 	const isActive = isNonNull(s.activeWalkthrough);
 	const activeStepIndex = isActive ? s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) : -1;
 	return {
 		isActive,
-		isParallel: isActive && isTruthy(s.activeWalkthrough?.parallelPrefix),
+		isParallel: isActive && isTruthy(s.activeWalkthrough?.activeFlow),
 		hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
 		hasPrevious: isActive && activeStepIndex > 0,
 		notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? null : null
 	};
-}
+});
 var WalkthroughPanel = memo(() => {
-	const { isActive, notes: _notes } = useDiagramContext(selectWalkthroughNotes);
+	const { isActive, notes: _notes } = useDiagramSnapshot(selectWalkthroughNotes);
 	const notes = _notes ? RichText.from(_notes) : RichText.EMPTY;
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && !notes.isEmpty && /* @__PURE__ */ jsx(m.div, {
 		layout: "position",

package/dist/overlays/Overlays.d.ts

@@ -1,4 +1,6 @@
 import { OverlaysActorRef } from './overlaysActor';
-export declare function Overlays({ overlaysActorRef }: {
+type OverlaysProps = {
     overlaysActorRef: OverlaysActorRef;
-}): import("react").JSX.Element;
+};
+export declare const Overlays: ({ overlaysActorRef }: OverlaysProps) => import("react").JSX.Element;
+export {};

package/dist/overlays/Overlays.js

@@ -4,6 +4,7 @@ import { useDiagram } from "../hooks/safeContext.js";
 import { ErrorBoundary } from "../components/ErrorFallback.js";
 import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
 import { ElementDetails } from "./element-details/ElementDetails.js";
+import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.js";
 import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
 import { useEffect } from "react";
@@ -11,10 +12,13 @@ import { jsx } from "react/jsx-runtime";
 import { isNonNullish } from "remeda";
 import { nonexhaustive } from "@likec4/core";
 import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from "motion/react";
-import { useSelector } from "@xstate/react";
 import { animate } from "motion";
 //#region src/overlays/Overlays.tsx
-var selectOverlays = (s) => {
+var Overlays = ({ overlaysActorRef }) => /* @__PURE__ */ jsx(OverlaysActorContext, {
+	value: overlaysActorRef,
+	children: /* @__PURE__ */ jsx(OverlaysSurface, { overlaysActorRef })
+});
+var selectOverlays = selectOverlaysSnapshot((s) => {
 	return s.context.overlays.map((overlay) => {
 		switch (overlay.type) {
 			case "relationshipsBrowser": return s.children[overlay.id] ? {
@@ -32,15 +36,10 @@ var selectOverlays = (s) => {
 			default: nonexhaustive(overlay);
 		}
 	}).filter(isNonNullish);
-};
-var compareSelectOverlays = (a, b) => {
-	return a.length === b.length && a.every((overlay, i) => {
-		return overlay.actorRef === b[i].actorRef;
-	});
-};
-function Overlays({ overlaysActorRef }) {
+}, (a, b) => !!a && !!b && a.length === b.length && a.every((overlay, i) => overlay.actorRef === b[i].actorRef));
+function OverlaysSurface({ overlaysActorRef }) {
 	const diagram = useDiagram();
-	const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
+	const overlays = useSelectOverlaysActor(selectOverlays);
 	const isMotionReduced = useReducedMotionConfig() ?? false;
 	const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
 	useEffect(() => {
@@ -90,6 +89,7 @@ function Overlays({ overlaysActorRef }) {
 	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, {
 		onReset: () => overlaysActorRef.send({ type: "close.all" }),
 		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+			propagate: true,
 			mode: "popLayout",
 			children: overlaysReact
 		}) })

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -95,21 +95,21 @@ var viewButton = css({
 	transition: "fast",
 	border: `1px dashed`,
 	borderColor: "default.border",
-	[viewTitleColor]: "{colors.mantine.colors.dark[1]}",
+	[viewTitleColor]: "{colors.mantine.dark[1]}",
 	_hover: {
 		background: "default.hover",
-		[iconColor]: "{colors.mantine.colors.dark[1]}",
+		[iconColor]: "{colors.mantine.dark[1]}",
 		[viewTitleColor]: "{colors.default.color}"
 	},
-	_dark: { background: "mantine.colors.dark[6]" },
+	_dark: { background: "mantine.dark[6]" },
 	_light: {
-		[iconColor]: "{colors.mantine.colors.gray[6]}",
-		[viewTitleColor]: "{colors.mantine.colors.gray[7]}",
-		_hover: { [iconColor]: "{colors.mantine.colors.gray[7]}" }
+		[iconColor]: "{colors.mantine.gray[6]}",
+		[viewTitleColor]: "{colors.mantine.gray[7]}",
+		_hover: { [iconColor]: "{colors.mantine.gray[7]}" }
 	},
 	"& .mantine-ThemeIcon-root": {
 		transition: "fast",
-		color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+		color: `[var(${iconColor}, {colors.mantine.dark[2]})]`,
 		"--ti-size": "22px",
 		_hover: { color: "default.color" }
 	},
@@ -121,7 +121,7 @@ var viewButton = css({
 });
 var viewButtonTitle = css({
 	transition: "fast",
-	color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
 	fontSize: "15px",
 	fontWeight: "medium",
 	lineHeight: "1.4"
@@ -135,12 +135,12 @@ var tabsRoot = css({
 	gap: "sm"
 });
 var tabsList = css({
-	background: "mantine.colors.gray[1]",
+	background: "mantine.gray[1]",
 	borderRadius: "sm",
 	flexWrap: "nowrap",
 	gap: "1.5",
 	padding: "1",
-	_dark: { background: "mantine.colors.dark[7]" }
+	_dark: { background: "mantine.dark[7]" }
 });
 var tabsTab = css({
 	fontSize: "xs",
@@ -149,11 +149,11 @@ var tabsTab = css({
 	padding: "[6px 8px]",
 	transition: "fast",
 	borderRadius: "sm",
-	color: "mantine.colors.gray[7]",
+	color: "mantine.gray[7]",
 	_hover: {
 		transitionTimingFunction: "out",
 		color: "default.color",
-		background: "mantine.colors.gray[3]"
+		background: "mantine.gray[3]"
 	},
 	["&[data-active]"]: {
 		transition: "none",
@@ -162,14 +162,14 @@ var tabsTab = css({
 		color: "default.color"
 	},
 	_dark: {
-		color: "mantine.colors.dark[1]",
+		color: "mantine.dark[1]",
 		_hover: {
 			color: "white",
-			background: "mantine.colors.dark[6]"
+			background: "mantine.dark[6]"
 		},
 		[`&:is([data-active])`]: {
 			color: "white",
-			background: "mantine.colors.dark[5]"
+			background: "mantine.dark[5]"
 		}
 	}
 });
@@ -209,7 +209,7 @@ var resizeHandle = css({
 	width: "14px",
 	height: "14px",
 	border: `3.5px solid`,
-	borderColor: "mantine.colors.dark[3]",
+	borderColor: "mantine.dark[3]",
 	borderTop: "none",
 	borderLeft: "none",
 	borderRadius: "xs",
@@ -219,7 +219,7 @@ var resizeHandle = css({
 	cursor: "se-resize",
 	_hover: {
 		borderWidth: "4px",
-		borderColor: "mantine.colors.dark[1]"
+		borderColor: "mantine.dark[1]"
 	}
 });
 //#endregion

package/dist/overlays/element-details/MetadataValue.js

@@ -48,10 +48,10 @@ function MultiValueDisplay({ values, isExpanded }) {
 			children: [/* @__PURE__ */ jsx(Text, {
 				className: css({
 					fontSize: "xs",
-					color: "mantine.colors.gray[5]",
+					color: "mantine.gray[5]",
 					fontWeight: "medium",
 					flexShrink: 0,
-					_dark: { color: "mantine.colors.dark[3]" }
+					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
 			}), /* @__PURE__ */ jsx(Box, {
@@ -91,7 +91,7 @@ function MultiValueDisplay({ values, isExpanded }) {
 					color: "text",
 					borderRadius: "sm",
 					border: "1px solid",
-					borderColor: "mantine.colors.gray[3]",
+					borderColor: "mantine.gray[3]",
 					whiteSpace: "nowrap",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
@@ -100,8 +100,8 @@ function MultiValueDisplay({ values, isExpanded }) {
 					flex: "0 1 auto",
 					userSelect: "all",
 					_dark: {
-						backgroundColor: "mantine.colors.dark[9]",
-						borderColor: "mantine.colors.dark[4]"
+						backgroundColor: "mantine.dark[9]",
+						borderColor: "mantine.dark[4]"
 					}
 				}),
 				title: value,
@@ -109,10 +109,10 @@ function MultiValueDisplay({ values, isExpanded }) {
 			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
 				className: css({
 					fontSize: "xs",
-					color: "mantine.colors.gray[5]",
+					color: "mantine.gray[5]",
 					fontWeight: "medium",
 					flexShrink: 0,
-					_dark: { color: "mantine.colors.dark[3]" }
+					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
 			})]
@@ -143,11 +143,11 @@ function MetadataValue({ label, value }) {
 			whiteSpace: "nowrap",
 			transition: "all 150ms ease",
 			_hover: {
-				backgroundColor: "mantine.colors.gray[1]",
-				color: "mantine.colors.primary[6]",
+				backgroundColor: "mantine.gray[1]",
+				color: "mantine.primary[6]",
 				_dark: {
-					backgroundColor: "mantine.colors.dark[7]",
-					color: "mantine.colors.primary[4]"
+					backgroundColor: "mantine.dark[7]",
+					color: "mantine.primary[4]"
 				}
 			}
 		}),
@@ -166,13 +166,13 @@ function MetadataValue({ label, value }) {
 					className: css({
 						fontSize: "xs",
 						fontWeight: "medium",
-						color: "mantine.colors.gray[6]",
-						backgroundColor: "mantine.colors.gray[1]",
+						color: "mantine.gray[6]",
+						backgroundColor: "mantine.gray[1]",
 						padding: "[1px 4px]",
 						borderRadius: "xs",
 						_dark: {
-							color: "mantine.colors.dark[2]",
-							backgroundColor: "mantine.colors.dark[6]"
+							color: "mantine.dark[2]",
+							backgroundColor: "mantine.dark[6]"
 						}
 					}),
 					children: elements.length

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -8,8 +8,8 @@ var treeNodeLabel = css({
 });
 var label = css({
 	transition: "fast",
-	color: "mantine.colors.gray[7]",
-	_dark: { color: "mantine.colors.dark[1]" },
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.dark[1]" },
 	"& > *": { transition: "fast" },
 	_hover: {
 		transitionTimingFunction: "out",
@@ -30,9 +30,9 @@ var instanceLabel = cx(label, css({
 	paddingInlineEnd: "2.5",
 	borderRadius: "sm",
 	alignItems: "center",
-	color: "mantine.colors.gray[7]",
-	_dark: { color: "mantine.colors.gray.lightColor" },
-	_hover: { background: "mantine.colors.gray.lightHover" },
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.gray.lightColor" },
+	_hover: { background: "mantine.gray.lightHover" },
 	"& .tabler-icon": {
 		transition: "fast",
 		width: "90%",