@likec4/diagram 1.55.1 → 1.57.0

package/dist/components/SearchControl.css.js

@@ -1,79 +1,69 @@
-import { css } from '@likec4/styles/css';
-
-const root = css({
-  height: "30px",
-  paddingLeft: "sm",
-  paddingRight: "1",
-  borderRadius: "sm",
-  // TODO
-  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
-  border: "1px solid",
-  borderColor: {
-    base: "default.border",
-    _light: "mantine.colors.gray[4]",
-    _dark: "mantine.colors.dark[4]",
-    _hover: "default.border"
-  },
-  cursor: "pointer",
-  background: {
-    base: "default",
-    _light: "white",
-    _dark: "mantine.colors.dark[6]",
-    _hover: "default.hover"
-  },
-  width: "100%",
-  "& .tabler-icon": {
-    color: "text"
-  },
-  transition: {
-    base: "fast",
-    _whenPanning: "none !important"
-  },
-  boxShadow: {
-    base: "xs",
-    _hover: "sm",
-    _whenPanning: "none !important"
-  }
+import { css } from "@likec4/styles/css";
+//#region src/components/SearchControl.css.ts
+var root = css({
+	height: "30px",
+	paddingLeft: "sm",
+	paddingRight: "1",
+	borderRadius: "sm",
+	border: "1px solid",
+	borderColor: {
+		base: "default.border",
+		_light: "mantine.colors.gray[4]",
+		_dark: "mantine.colors.dark[4]",
+		_hover: "default.border"
+	},
+	cursor: "pointer",
+	background: {
+		base: "default",
+		_light: "white",
+		_dark: "mantine.colors.dark[6]",
+		_hover: "default.hover"
+	},
+	width: "100%",
+	"& .tabler-icon": { color: "text" },
+	transition: {
+		base: "fast",
+		_whenPanning: "none !important"
+	},
+	boxShadow: {
+		base: "xs",
+		_hover: "sm",
+		_whenPanning: "none !important"
+	}
 });
-const placeholder = css({
-  fontSize: "sm",
-  // mantine.fontSizes.sm,
-  fontWeight: "medium",
-  paddingRight: "2.5",
-  // 10px
-  color: "text.placeholder",
-  flex: "1",
-  sm: {
-    paddingRight: "[30px]"
-  },
-  md: {
-    paddingRight: "[50px]"
-  }
+var placeholder = css({
+	fontSize: "sm",
+	fontWeight: "medium",
+	paddingRight: "2.5",
+	color: "text.placeholder",
+	flex: "1",
+	sm: { paddingRight: "[30px]" },
+	md: { paddingRight: "[50px]" }
 });
-const shortcut = css({
-  fontSize: "11px",
-  fontWeight: "bold",
-  lineHeight: 1,
-  padding: "[4px 7px]",
-  borderRadius: "sm",
-  border: "1px solid",
-  transition: "fast",
-  _light: {
-    color: "mantine.colors.gray[7]",
-    borderColor: "mantine.colors.gray[2]"
-  },
-  _dark: {
-    color: "mantine.colors.dark[0]",
-    borderColor: "mantine.colors.dark[7]"
-  },
-  backgroundColor: {
-    _light: "mantine.colors.gray[2]/70",
-    _dark: "mantine.colors.dark[8]/70",
-    _groupHover: {
-      _light: "mantine.colors.gray[2]",
-      _dark: "mantine.colors.dark[8]"
-    }
-  }
+var shortcut = css({
+	fontSize: "11px",
+	fontWeight: "bold",
+	lineHeight: 1,
+	padding: "[4px 7px]",
+	borderRadius: "sm",
+	border: "1px solid",
+	transition: "fast",
+	_light: {
+		color: "mantine.colors.gray[7]",
+		borderColor: "mantine.colors.gray[2]"
+	},
+	_dark: {
+		color: "mantine.colors.dark[0]",
+		borderColor: "mantine.colors.dark[7]"
+	},
+	backgroundColor: {
+		_light: "mantine.colors.gray[2]/70",
+		_dark: "mantine.colors.dark[8]/70",
+		_groupHover: {
+			_light: "mantine.colors.gray[2]",
+			_dark: "mantine.colors.dark[8]"
+		}
+	}
 });
-
+//#endregion
 export { placeholder, root, shortcut };

package/dist/components/SearchControl.js

@@ -1,17 +1,39 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { UnstyledButton, Group, Text } from '@mantine/core';
-import { isMacOs } from '@xyflow/system';
-import { placeholder, shortcut, root } from './SearchControl.css.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { placeholder, root, shortcut } from "./SearchControl.css.js";
+import { cx } from "@likec4/styles/css";
+import { IconSearch } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Group, Text, UnstyledButton } from "@mantine/core";
+import { isMacOs } from "@xyflow/system";
+//#region src/components/SearchControl.tsx
 function SearchControl({ className, ...others }) {
-  const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
-    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
-    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
-  ] }) });
+	const isMac = isMacOs();
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		...others,
+		className: cx("group", root, className),
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(IconSearch, {
+					style: {
+						width: "15px",
+						height: "15px"
+					},
+					stroke: 2
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: placeholder,
+					children: "Search"
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: shortcut,
+					children: isMac ? "⌘ + K" : "Ctrl + K"
+				})
+			]
+		})
+	});
 }
-
+//#endregion
 export { SearchControl };

package/dist/components/ViewNotFound.js

@@ -1,34 +1,27 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-
+import "../_virtual/_rolldown/runtime.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ViewNotFound.tsx
 function ErrorMessage({ children }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        margin: "1em 0"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            margin: "0 auto",
-            display: "inline-block",
-            padding: "2em",
-            background: "rgba(250,82,82,.15)",
-            color: "#ffa8a8"
-          },
-          children
-        }
-      )
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		style: { margin: "1em 0" },
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				margin: "0 auto",
+				display: "inline-block",
+				padding: "2em",
+				background: "rgba(250,82,82,.15)",
+				color: "#ffa8a8"
+			},
+			children
+		})
+	});
 }
 function ViewNotFound({ viewId }) {
-  return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-    "View ",
-    /* @__PURE__ */ jsx("code", { children: viewId }),
-    " not found"
-  ] });
+	return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found"
+	] });
 }
-
+//#endregion
 export { ErrorMessage, ViewNotFound };

package/dist/context/CurrentViewModelProvider.js

@@ -1,12 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCurrentViewId } from '../hooks/useCurrentView.js';
-import { useOptionalLikeC4Model, CurrentViewModelContext } from './LikeC4ModelContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useCurrentViewId } from "../hooks/useCurrentView.js";
+import { CurrentViewModelContext, useOptionalLikeC4Model } from "./LikeC4ModelContext.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/context/CurrentViewModelProvider.tsx
 function CurrentViewModelProvider({ children }) {
-  const viewId = useCurrentViewId();
-  const likec4model = useOptionalLikeC4Model();
-  const viewmodel = likec4model?.findView(viewId) ?? null;
-  return /* @__PURE__ */ jsx(CurrentViewModelContext, { value: viewmodel, children });
+	const viewId = useCurrentViewId();
+	return /* @__PURE__ */ jsx(CurrentViewModelContext, {
+		value: useOptionalLikeC4Model()?.findView(viewId) ?? null,
+		children
+	});
 }
-
+//#endregion
 export { CurrentViewModelProvider };

package/dist/context/DefaultMantineProvider.js

@@ -1,75 +1,48 @@
-import { jsx } from 'react/jsx-runtime';
-import { MantineProvider, createTheme, Tooltip, Portal, SegmentedControl } from '@mantine/core';
-
-const DefaultTheme = createTheme({
-  autoContrast: true,
-  primaryColor: "indigo",
-  cursorType: "pointer",
-  defaultRadius: "sm",
-  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
-  headings: {
-    fontWeight: "medium",
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: "bold"
-      },
-      h2: {
-        fontWeight: "medium"
-        // fontSize: '1.85rem',
-      }
-    }
-  },
-  fontSizes: {
-    xxs: "var(--font-sizes-xxs)",
-    xs: "var(--font-sizes-xs)",
-    sm: "var(--font-sizes-sm)",
-    md: "var(--font-sizes-md)",
-    lg: "var(--font-sizes-lg)",
-    xl: "var(--font-sizes-xl)"
-  },
-  spacing: {
-    xs: "var(--spacing-xs)",
-    sm: "var(--spacing-sm)",
-    md: "var(--spacing-md)",
-    lg: "var(--spacing-lg)",
-    xl: "var(--spacing-xl)"
-  },
-  components: {
-    SegmentedControl: SegmentedControl.extend({
-      vars: (theme, props) => ({
-        root: {
-          // @ts-expect-error
-          "--sc-font-size": theme.fontSizes[props.fz ?? props.size]
-        }
-      })
-    }),
-    Portal: Portal.extend({
-      defaultProps: {
-        reuseTargetNode: true
-      }
-    }),
-    Tooltip: Tooltip.extend({
-      defaultProps: {
-        color: "dark"
-      }
-    })
-  }
+import "../_virtual/_rolldown/runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { MantineProvider, Portal, SegmentedControl, Tooltip, createTheme } from "@mantine/core";
+//#region src/context/DefaultMantineProvider.tsx
+var DefaultTheme = createTheme({
+	autoContrast: true,
+	primaryColor: "indigo",
+	cursorType: "pointer",
+	defaultRadius: "sm",
+	fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
+	headings: {
+		fontWeight: "medium",
+		sizes: {
+			h1: { fontWeight: "bold" },
+			h2: { fontWeight: "medium" }
+		}
+	},
+	fontSizes: {
+		xxs: "var(--font-sizes-xxs)",
+		xs: "var(--font-sizes-xs)",
+		sm: "var(--font-sizes-sm)",
+		md: "var(--font-sizes-md)",
+		lg: "var(--font-sizes-lg)",
+		xl: "var(--font-sizes-xl)"
+	},
+	spacing: {
+		xs: "var(--spacing-xs)",
+		sm: "var(--spacing-sm)",
+		md: "var(--spacing-md)",
+		lg: "var(--spacing-lg)",
+		xl: "var(--spacing-xl)"
+	},
+	components: {
+		SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
+		Portal: Portal.extend({ defaultProps: { reuseTargetNode: true } }),
+		Tooltip: Tooltip.extend({ defaultProps: { color: "dark" } })
+	}
 });
-function DefaultMantineProvider({
-  children,
-  theme,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    MantineProvider,
-    {
-      defaultColorScheme: "auto",
-      theme: theme ?? DefaultTheme,
-      ...props,
-      children
-    }
-  );
+function DefaultMantineProvider({ children, theme, ...props }) {
+	return /* @__PURE__ */ jsx(MantineProvider, {
+		defaultColorScheme: "auto",
+		theme: theme ?? DefaultTheme,
+		...props,
+		children
+	});
 }
-
+//#endregion
 export { DefaultMantineProvider };

package/dist/context/DiagramEventHandlers.js

@@ -1,56 +1,51 @@
-import { jsx } from 'react/jsx-runtime';
-import { useSyncedRef } from '@react-hookz/web';
-import { useContext, useMemo, createContext } from 'react';
-import { isFunction, mapToObj, keys } from 'remeda';
-
-const defaultHandlers = {
-  onNavigateTo: null,
-  onNodeClick: null,
-  onNodeContextMenu: null,
-  onCanvasContextMenu: null,
-  onEdgeClick: null,
-  onEdgeContextMenu: null,
-  onCanvasClick: null,
-  onCanvasDblClick: null,
-  onLogoClick: null,
-  onOpenSource: null,
-  onInitialized: null,
-  onLayoutTypeChange: null
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useSyncedRef } from "@react-hookz/web";
+import { isFunction, keys, mapToObj } from "remeda";
+//#region src/context/DiagramEventHandlers.tsx
+var defaultHandlers = {
+	onNavigateTo: null,
+	onNodeClick: null,
+	onNodeContextMenu: null,
+	onCanvasContextMenu: null,
+	onEdgeClick: null,
+	onEdgeContextMenu: null,
+	onCanvasClick: null,
+	onCanvasDblClick: null,
+	onLogoClick: null,
+	onOpenSource: null,
+	onInitialized: null,
+	onLayoutTypeChange: null
 };
-const HandlerNames = keys(defaultHandlers);
-const DiagramEventHandlersRefContext = createContext({
-  current: defaultHandlers
+var HandlerNames = keys(defaultHandlers);
+var DiagramEventHandlersRefContext = createContext({ current: defaultHandlers });
+var DiagramEventHandlersReactContext = createContext({
+	...mapToObj(HandlerNames, (name) => [name, null]),
+	handlersRef: { current: defaultHandlers }
 });
-const DiagramEventHandlersReactContext = createContext({
-  ...mapToObj(HandlerNames, (name) => [name, null]),
-  handlersRef: {
-    current: defaultHandlers
-  }
-});
-function DiagramEventHandlers({
-  handlers,
-  children
-}) {
-  const handlersRef = useSyncedRef(
-    handlers
-  );
-  const deps = HandlerNames.map((name) => isFunction(handlers[name]));
-  const value = useMemo(() => ({
-    ...mapToObj(HandlerNames, (name) => {
-      if (handlersRef.current[name]) {
-        return [name, (...args) => handlersRef.current[name]?.(...args)];
-      }
-      return [name, null];
-    }),
-    handlersRef
-  }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, { value: handlersRef, children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children }) });
+function DiagramEventHandlers({ handlers, children }) {
+	const handlersRef = useSyncedRef(handlers);
+	const value = useMemo(() => ({
+		...mapToObj(HandlerNames, (name) => {
+			if (handlersRef.current[name]) return [name, (...args) => handlersRef.current[name]?.(...args)];
+			return [name, null];
+		}),
+		handlersRef
+	}), [handlersRef, ...HandlerNames.map((name) => isFunction(handlers[name]))]);
+	return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, {
+		value: handlersRef,
+		children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, {
+			value,
+			children
+		})
+	});
 }
 function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersReactContext);
+	return useContext(DiagramEventHandlersReactContext);
 }
 function useDiagramEventHandlersRef() {
-  return useContext(DiagramEventHandlersRefContext);
+	return useContext(DiagramEventHandlersRefContext);
 }
-
+//#endregion
 export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.d.ts

@@ -1,7 +1,7 @@
 import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { JSX } from 'react/jsx-runtime';
-declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "Editor", "AISemanticLayout", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {