@likec4/diagram 1.56.0 → 1.58.0

package/dist/LikeC4Diagram.js

@@ -36,7 +36,8 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 	const optionalLikeC4Model = useOptionalLikeC4Model();
 	enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
 	const hasLikeC4Model = !!optionalLikeC4Model;
-	const hasEditor = !!useOptionalLikeC4Editor();
+	const editor = useOptionalLikeC4Editor();
+	const hasEditor = !!editor;
 	const readonly = !hasEditor;
 	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
 	const bounds = pickViewBounds(view, dynamicViewVariant);
@@ -66,6 +67,7 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 					features: {
 						enableFitView: fitView,
 						enableEditor: hasEditor,
+						enableAISemanticLayout: hasEditor && !!editor.applySemanticLayout,
 						enableReadOnly: readonly,
 						enableFocusMode,
 						enableNavigateTo: !!onNavigateTo,

package/dist/LikeC4View.js

@@ -1,5 +1,4 @@
 import "./_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "./hooks/useCallbackRef.js";
 import { stopPropagation } from "./utils/xyflow.js";
 import { FitViewPaddings } from "./base/const.js";
 import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
@@ -10,11 +9,10 @@ import { ErrorMessage } from "./components/ViewNotFound.js";
 import { ShadowRoot } from "./shadowroot/ShadowRoot.js";
 import { css, cx } from "@likec4/styles/css";
 import { IconX } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isBoolean } from "remeda";
 import { ActionIcon } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 //#region src/LikeC4View.tsx
 var cssInteractive = css({
@@ -31,20 +29,19 @@ var cssInteractive = css({
 * Component is wrapped in ShadowRoot to isolate styles.
 */
 function LikeC4View({ viewId, className, pannable = false, zoomable = false, keepAspectRatio = true, colorScheme, injectFontCss = true, controls = false, layoutType: initialLayoutType = "manual", background = "transparent", browser = true, showNavigationButtons = false, enableNotations, enableFocusMode = false, enableDynamicViewWalkthrough = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, enableNotes = false, reduceGraphics = "auto", mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }) {
-	const rootRef = useRef(null);
 	const likec4model = useOptionalLikeC4Model();
 	const [layoutType, setLayoutType] = useState(initialLayoutType);
 	const [browserViewId, _onNavigateTo] = useState(null);
-	const onNavigateTo = useCallbackRef((viewId) => {
+	const onNavigateTo = (viewId) => {
 		if (viewId && viewId !== browserViewId) setLayoutType(initialLayoutType);
 		_onNavigateTo(viewId);
-	});
-	const onNavigateToThisView = useCallbackRef(() => {
+	};
+	const onNavigateToThisView = () => {
 		onNavigateTo(viewId);
-	});
-	const closeBrowser = useCallbackRef(() => {
+	};
+	const closeBrowser = () => {
 		onNavigateTo(null);
-	});
+	};
 	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
 	const viewModel = likec4model.findView(viewId);
 	if (!viewModel) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
@@ -70,9 +67,7 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 	const isBrowserEnabled = browser !== false;
 	const browserProps = isBoolean(browser) ? {} : browser;
 	const bounds = pickViewBounds(view, props.dynamicViewVariant);
-	const root = rootRef.current ? { root: rootRef.current } : void 0;
 	return /* @__PURE__ */ jsxs(ShadowRoot, {
-		ref: rootRef,
 		injectFontCss,
 		theme: mantineTheme,
 		colorScheme,
@@ -109,49 +104,46 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 			renderNodes,
 			...props,
 			children
-		}), /* @__PURE__ */ jsx(AnimatePresence, {
-			...root,
-			children: browserView && /* @__PURE__ */ jsxs(Overlay, {
-				openDelay: 0,
-				onClose: closeBrowser,
-				children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
-					view: browserView,
-					pannable: true,
-					zoomable: true,
-					background: "dots",
-					onNavigateTo,
-					showNavigationButtons: true,
-					enableDynamicViewWalkthrough: true,
-					enableFocusMode: true,
-					enableRelationshipBrowser: true,
-					enableElementDetails: true,
-					enableRelationshipDetails: true,
-					enableSearch: true,
-					enableElementTags: true,
-					enableNotes: true,
-					enableCompareWithLatest: true,
-					controls: true,
-					fitView: true,
-					...props,
-					fitViewPadding: FitViewPaddings.withControls,
-					...browserProps,
-					enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
-					renderNodes,
-					onLayoutTypeChange: setLayoutType
-				}), /* @__PURE__ */ jsx(Box$1, {
-					pos: "absolute",
-					top: "4",
-					right: "4",
-					zIndex: "999",
-					onClick: stopPropagation,
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "default",
-						color: "gray",
-						onClick: closeBrowser,
-						children: /* @__PURE__ */ jsx(IconX, {})
-					})
-				})]
-			})
+		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
+			openDelay: 0,
+			onClose: closeBrowser,
+			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+				view: browserView,
+				pannable: true,
+				zoomable: true,
+				background: "dots",
+				onNavigateTo,
+				showNavigationButtons: true,
+				enableDynamicViewWalkthrough: true,
+				enableFocusMode: true,
+				enableRelationshipBrowser: true,
+				enableElementDetails: true,
+				enableRelationshipDetails: true,
+				enableSearch: true,
+				enableElementTags: true,
+				enableNotes: true,
+				enableCompareWithLatest: true,
+				controls: true,
+				fitView: true,
+				...props,
+				fitViewPadding: FitViewPaddings.withControls,
+				...browserProps,
+				enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+				renderNodes,
+				onLayoutTypeChange: setLayoutType
+			}), /* @__PURE__ */ jsx(Box$1, {
+				pos: "absolute",
+				top: "4",
+				right: "4",
+				zIndex: "999",
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					color: "gray",
+					onClick: closeBrowser,
+					children: /* @__PURE__ */ jsx(IconX, {})
+				})
+			})]
 		})]
 	});
 }

package/dist/adhoc-editor/EditorPanel.d.ts

@@ -1 +1 @@
-export declare const EditorPanel: () => import("react/jsx-runtime").JSX.Element;
+export declare const EditorPanel: () => import("react").JSX.Element;

package/dist/adhoc-editor/ElementsTree.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ElementsTree: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ElementsTree: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/adhoc-editor/ElementsTree.js

@@ -39,12 +39,8 @@ var ElementsTree = memo(() => {
 					}
 					break;
 				}
-				case "ArrowUp":
-					console.log("ArrowUp", { selected: api.selectedValue });
-					break;
-				default:
-					console.log(e.key);
-					return;
+				case "ArrowUp": break;
+				default: return;
 			}
 		} }),
 		children: /* @__PURE__ */ jsxs(Tree$1.Root, {

package/dist/adhoc-editor/LikeC4AdHocViewEditor.d.ts

@@ -1,4 +1,4 @@
 import { AdhocViewService } from './state/actor.types';
 export declare function LikeC4AdHocViewEditor({ service }: {
     service: AdhocViewService;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/adhoc-editor/components/Tree.d.ts

@@ -1,10 +1,10 @@
-import { RecipeVariantProps } from '@likec4/styles/css';
+import { RecipeVariantProps } from '../../../styled-system/css';
 import { MouseEventHandler, PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { IconOrShapeRenderer } from '../../context/IconRenderer';
 import { TreeNodeData } from '../useElementsTree';
-import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '@likec4/styles';
-import { StyleContextRootProvider, StyleContextConsumer } from '@likec4/styles/jsx';
-import { IconProps } from '../../../@tabler/icons-react/dist/esm/icons/index.mjs';
+import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '../../../styled-system';
+import { StyleContextRootProvider, StyleContextConsumer } from '../../../styled-system/jsx';
+import { IconProps } from '@tabler/icons-react';
 declare const statebtn: RecipeRuntimeFn<{
     state: {
         "include-explicit": {
@@ -39,7 +39,7 @@ export declare const Tree: {
         node: TreeNodeData;
         className?: string;
         onClick?: MouseEventHandler<HTMLElement>;
-    }>) => import("react/jsx-runtime").JSX.Element;
+    }>) => import("react").JSX.Element;
     Icon: typeof IconOrShapeRenderer;
     Label: StyleContextConsumer<"div">;
     Content: StyleContextConsumer<"div">;

package/dist/adhoc-editor/state/ActorProvider.d.ts

@@ -2,4 +2,4 @@ import { PropsWithChildren } from 'react';
 import { AdhocViewService } from './actor.types';
 export declare function AdhocEditorActorProvider({ children, service }: PropsWithChildren<{
     service: AdhocViewService;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/adhoc-editor/state/panel.d.ts

@@ -30,7 +30,7 @@ declare const createEditorPanelStore: ({ initial, sideEffects, }: {
     type: "inputKeyDown";
 }>;
 export type EditorPanelStore = ReturnType<typeof createEditorPanelStore>;
-export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react").JSX.Element;
 export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T): [
     selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
     compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean

package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts

@@ -3,4 +3,4 @@ export declare function ViewRulesPanel({ rules, onToggle, onDelete, }: {
     rules: AdhocRule[];
     onToggle: (rule: AdhocRule) => void;
     onDelete: (rule: AdhocRule) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/base/BaseXYFlow.d.ts

@@ -12,4 +12,4 @@ export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;
+export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;

package/dist/base-primitives/Markdown.d.ts

@@ -1,5 +1,5 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '@likec4/styles/types';
+import { JsxStyleProps } from '../../styled-system/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
 export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;

package/dist/base-primitives/NodeHandles.d.ts

@@ -4,4 +4,4 @@ import { AutoLayoutDirection } from '@likec4/core/types';
  */
 export declare function DefaultHandles({ direction }: {
     direction?: AutoLayoutDirection | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -5,5 +5,5 @@ type CompoundActionButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -5,5 +5,5 @@ type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundNodeContainer.d.ts

@@ -11,5 +11,5 @@ type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElemen
     layoutId?: string | undefined;
     nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
-export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundTitle.d.ts

@@ -9,5 +9,5 @@ type RequiredData = {
 type CompoundTitleProps = {
     data: RequiredData;
 };
-export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundTitle({ data }: CompoundTitleProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles';
+import { RecipeRuntimeFn } from '../../../styled-system';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/edge/EdgeActionButton.d.ts

@@ -3,5 +3,5 @@ type EdgeActionBtnProps = {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -15,5 +15,5 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     edgeProps: BaseEdgePropsWithData<Data>;
 };
 export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: contentStyle, // applied to inner content div, not the positioned container
-children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+children, ...rest }: EdgeLabelContainerProps): import("react").JSX.Element | null;
 export {};

package/dist/base-primitives/edge/EdgeMarkers.d.ts

@@ -1,14 +1,14 @@
 import { RelationshipArrowType } from '@likec4/core/types';
 import { SVGProps } from 'react';
 export declare const EdgeMarkers: {
-    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Crow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Open: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Dot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Crow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Open: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Dot: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    ODot: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
 };
 export type EdgeMarkerType = keyof typeof EdgeMarkers;
 export declare function arrowTypeToMarker(arrowType?: RelationshipArrowType): EdgeMarkerType | undefined;

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

@@ -31,7 +31,7 @@ type ElementActionButtonsProps = {
  * />
  * ```
  */
-export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react").JSX.Element | null;
 export declare namespace ElementActionButtons {
     type Item = {
         key?: string;

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

@@ -47,10 +47,10 @@ type SlotProps = {
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementData({ data }: ElementDataProps): import("react").JSX.Element;
 export declare namespace ElementData {
     var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
-    var Icon: ({ data, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    var Icon: ({ data, ...props }: IconProps) => import("react").JSX.Element;
     var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
     var Technology: import("react").ForwardRefExoticComponent<((import("type-fest/source/merge-exclusive").Without<SlotProps, {

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

@@ -6,5 +6,5 @@ type ElementDetailsButtonProps = {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
 export {};

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

@@ -14,5 +14,5 @@ type ElementShapeProps = {
      */
     showSelectionOutline?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
 export {};

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

@@ -17,5 +17,5 @@ export type ElementTagsProps = BaseNodePropsWithData<Data> & {
     onTagMouseEnter?: (tag: `#${string}`) => void;
     onTagMouseLeave?: (tag: `#${string}`) => void;
 };
-export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react").JSX.Element | null>;
 export {};

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

@@ -1,14 +1,12 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCurrentZoomAtLeast } from "../../hooks/useXYFlow.js";
 import { stopPropagation } from "../../utils/xyflow.js";
-import { useTagSpecification } from "../../context/TagStylesContext.js";
 import { css, cx } from "@likec4/styles/css";
 import { forwardRef, memo, useCallback, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { NodeToolbar, Position, useStore } from "@xyflow/react";
 import { deepEqual } from "fast-equals";
 import { hasAtLeast } from "remeda";
-import { isTagColorSpecified } from "@likec4/core";
 import { useDebouncedState, useHover } from "@mantine/hooks";
 import { Box, HStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
@@ -18,7 +16,7 @@ var ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) =
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
 		"data-likec4-tag": tag,
-		className: cx(likec4tag({ autoTextColor: isTagColorSpecified(useTagSpecification(tag)) }), className),
+		className: cx(likec4tag(), className),
 		...props,
 		style: {
 			cursor,

package/dist/components/ErrorFallback.d.ts

@@ -1,3 +1,3 @@
 import { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';
-export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;
-export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react").JSX.Element;
+export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react").JSX.Element;

package/dist/components/NavigationPanel.d.ts

@@ -1,7 +1,7 @@
 import { ForwardRefComponent, HTMLMotionProps } from 'motion/react';
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { StyleContextProvider, StyleContextConsumer } from '@likec4/styles/jsx';
-import { NavigationPanelRecipe } from '@likec4/styles/recipes';
+import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
+import { NavigationPanelRecipe } from '../../styled-system/recipes';
 export declare const NavigationPanel: {
     Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
     Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;

package/dist/components/PortalToContainer.d.ts

@@ -3,4 +3,4 @@ import { PropsWithChildren } from 'react';
  * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
  * It is used internally by the library.
  */
-export declare function PortalToContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/components/RootContainer.d.ts

@@ -3,4 +3,4 @@ export declare function RootContainer({ id, className, reduceGraphics, children,
     id: string;
     className?: string | undefined;
     reduceGraphics?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/components/RootContainer.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider } from "../context/RootContainerContext.js";
+import { RootContainerContextProvider } from "../context/RootContainerContext.js";
 import { cx } from "@likec4/styles/css";
 import { useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -13,23 +13,24 @@ function RootContainer({ id, className, reduceGraphics = false, children }) {
 	const ctx = useMemo(() => ({
 		id,
 		ref,
-		selector: `#${id}`
-	}), [id, ref]);
-	return /* @__PURE__ */ jsx(ReduceGraphicsModeProvider, {
-		value: reduceGraphics,
-		children: /* @__PURE__ */ jsx(PanningAtomSafeCtx, {
-			value: $isPanning,
-			children: /* @__PURE__ */ jsx("div", {
-				id,
-				className: cx("likec4-root", className),
-				ref,
-				"data-likec4-diagram-panning": isPanning,
-				...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
-				children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
-					value: ctx,
-					children
-				})
-			})
+		selector: `#${id}`,
+		reducedGraphics: reduceGraphics,
+		$panning: $isPanning
+	}), [
+		id,
+		ref,
+		reduceGraphics,
+		$isPanning
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx("likec4-root", className),
+		ref,
+		"data-likec4-diagram-panning": isPanning,
+		...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
+		children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
+			value: ctx,
+			children
 		})
 	});
 }

package/dist/components/SearchControl.d.ts

@@ -1,5 +1,5 @@
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
-interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+interface SearchControlProps extends Omit<UnstyledButtonProps, 'className'>, ElementProps<'button'> {
 }
-export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react").JSX.Element;
 export {};

package/dist/components/ViewNotFound.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare function ErrorMessage({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorMessage({ children }: PropsWithChildren): import("react").JSX.Element;
 export declare function ViewNotFound({ viewId }: {
     viewId: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/CurrentViewModelProvider.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/context/DefaultMantineProvider.d.ts

@@ -1,2 +1,2 @@
 import { MantineProviderProps } from '@mantine/core';
-export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react").JSX.Element;

package/dist/context/DiagramEventHandlers.d.ts

@@ -9,7 +9,7 @@ export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandl
 };
 export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
     handlers: Required<LikeC4DiagramEventHandlers>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
 export declare function useDiagramEventHandlersRef(): DiagramEventHandlersRef;
 export {};

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 = {

package/dist/context/DiagramFeatures.js

@@ -6,6 +6,10 @@ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/context/DiagramFeatures.tsx
 var DefaultFeatures = {
 	enableEditor: false,
+	/**
+	* Enabled if editor has `applySemanticLayout` method
+	*/
+	enableAISemanticLayout: false,
 	enableReadOnly: true,
 	enableCompareWithLatest: false,
 	enableControls: false,
@@ -51,6 +55,7 @@ function DiagramFeatures({ children, features, overrides }) {
 var overridesForOverlays = {
 	enableControls: false,
 	enableReadOnly: true,
+	enableAISemanticLayout: false,
 	enableCompareWithLatest: false
 };
 DiagramFeatures.Overlays = ({ children }) => {

package/dist/context/EnsureMantine.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 type EnsureMantineProps = PropsWithChildren<{}>;
-export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
+export declare function EnsureMantine({ children }: EnsureMantineProps): import("react").JSX.Element;
 export {};

package/dist/context/FramerMotionConfig.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWithChildren<{
+export declare function FramerMotionConfig({ reducedMotion, children, }: PropsWithChildren<{
     /**
      * If true, will respect the device prefersReducedMotion setting by switching
      * transform animations off.
      */
-    reducedMotion?: "always" | "never" | "user" | undefined;
-}>) => import("react/jsx-runtime").JSX.Element;
+    reducedMotion?: 'always' | 'never' | 'user' | undefined;
+}>): import("react").JSX.Element;