@likec4/diagram 1.56.0 → 1.58.0

package/dist/likec4diagram/state/machine.actions.js

@@ -207,14 +207,15 @@ var emitEdgeClick = () => machine.emit(({ context, event }) => {
 	};
 });
 var triggerChange = (viewChange) => machine.enqueueActions(({ event, enqueue }) => {
-	let change = viewChange;
-	if (!change) {
+	let change;
+	if (viewChange) change = { ...viewChange };
+	else {
 		assertEvent(event, "trigger.change");
 		change = event.change;
 	}
 	enqueue.assign({ viewportChangedManually: true });
 	enqueue.sendTo(typedSystem.editorActor, {
-		type: "change",
+		type: "change.view",
 		change
 	});
 });
@@ -388,14 +389,13 @@ var ensureEditorActor = () => machine.enqueueActions(({ enqueue, context, system
 	});
 });
 var startEditing = (subject = "node") => machine.sendTo(typedSystem.editorActor, {
-	type: "edit.start",
+	type: "edit.move.start",
 	subject
 });
-var sendSynced = () => machine.sendTo(typedSystem.editorActor, { type: "synced" });
-var stopEditing = (wasChanged = false) => machine.sendTo(typedSystem.editorActor, {
-	type: "edit.finish",
-	wasChanged
-});
+var sendSynced = () => {
+	return machine.sendTo(typedSystem.editorActor, { type: "view.synched" });
+};
+var stopEditing = (wasChanged = false) => machine.sendTo(typedSystem.editorActor, { type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 var cancelEditing = () => machine.sendTo(typedSystem.editorActor, { type: "cancel" });
 var hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 var openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
@@ -591,7 +591,7 @@ var stopHotKeyActor = () => machine.stopChild("hotkey");
 */
 var AUTO_UNFOCUS_DELAY = 3e3;
 var startAutoUnfocusTimer = () => machine.enqueueActions(({ context, enqueue }) => {
-	if (context.autoUnfocusTimer && AUTO_UNFOCUS_DELAY > 0) enqueue.raise({ type: "focus.autoUnfocus" }, {
+	if (context.autoUnfocusTimer && true) enqueue.raise({ type: "focus.autoUnfocus" }, {
 		delay: AUTO_UNFOCUS_DELAY,
 		id: "autoUnfocusTimer"
 	});

package/dist/likec4diagram/state/machine.d.ts

@@ -1,5 +1,5 @@
 import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Input } from './machine.setup';

package/dist/likec4diagram/state/machine.setup.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { editorActorLogic } from "../../editor/editorActor.states.js";
+import { editorActorLogic } from "../../editor/actor/machine.js";
 import { overlaysActorLogic } from "../../overlays/overlaysActor.js";
 import { searchActorLogic } from "../../search/searchActor.js";
 import { hotkeyActorLogic } from "./hotkeyActor.js";

package/dist/likec4diagram/state/types.d.ts

@@ -1,5 +1,5 @@
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineRef } from './machine';

package/dist/likec4diagram/state/utils.d.ts

@@ -2,7 +2,7 @@ import { BBox } from '@likec4/core/geometry';
 import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types';
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';

package/dist/likec4diagram/types.d.ts

@@ -113,12 +113,14 @@ export declare namespace Types {
     type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
         notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
+        isLabelCustomized?: boolean | undefined;
         controlPoints: XYPosition[] | undefined | null;
     }>;
     type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
         notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;
+        isLabelCustomized?: boolean | undefined;
         controlPoints: XYPosition[] | undefined | null;
     }>;
     type RelationshipEdge = BaseEdge<RelationshipEdgeData, 'relationship'>;

package/dist/likec4diagram/ui/LayoutDriftFrame.d.ts

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

package/dist/likec4diagram/ui/notation/NotationPanel.d.ts

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

package/dist/likec4diagram/useLayoutConstraints.js

@@ -85,6 +85,7 @@ var Rect = class {
 	}
 };
 var CompoundRect = class extends Rect {
+	parent;
 	children = [];
 	constructor(xynode, parent = null) {
 		super(xynode, parent);
@@ -92,6 +93,7 @@ var CompoundRect = class extends Rect {
 	}
 };
 var Leaf = class extends Rect {
+	parent;
 	constructor(xynode, parent = null) {
 		super(xynode, parent);
 		this.parent = parent;

package/dist/likec4diagram/xyflow-diagram/diagram-view.js

@@ -17,6 +17,7 @@ function diagramToXY(opts) {
 	const xyedges = [];
 	const nodeLookup = /* @__PURE__ */ new Map();
 	const viewLayoutDir = view.autoLayout?.direction ?? "TB";
+	const deletable = view._type !== "dynamic";
 	const queue = Queue.from(view.nodes.reduce((acc, node) => {
 		nodeLookup.set(node.id, node);
 		if (!node.parent) acc.push({
@@ -56,7 +57,7 @@ function diagramToXY(opts) {
 		}
 		const base = {
 			id: ns + node.id,
-			deletable: false,
+			deletable,
 			position,
 			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
 			style: {
@@ -188,7 +189,7 @@ function diagramToXY(opts) {
 			target: ns + target,
 			zIndex: ZIndexes.Edge,
 			hidden: !visiblePredicate(edge),
-			deletable: false,
+			deletable,
 			data: {
 				id: edge.id,
 				label: edge.label,
@@ -197,6 +198,7 @@ function diagramToXY(opts) {
 				navigateTo: edge.navigateTo,
 				controlPoints: edge.controlPoints ?? null,
 				labelBBox: edge.labelBBox ?? null,
+				isLabelCustomized: edge.isLabelCustomized ?? false,
 				labelXY: null,
 				points: edge.points,
 				color: edge.color ?? "gray",

package/dist/likec4diagram/xyflow-sequence/sequence-layout.js

@@ -174,6 +174,7 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, curr
 			astPath: edge.astPath,
 			drifts: edge.drifts ?? null
 		},
+		deletable: false,
 		selectable: true,
 		focusable: false,
 		zIndex: 20,

package/dist/navigationpanel/NavigationPanel.d.ts

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

package/dist/navigationpanel/NavigationPanelControls.d.ts

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

package/dist/navigationpanel/NavigationPanelDropdown.d.ts

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

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMountEffect } from "@react-hookz/web";
 import { deepEqual, shallowEqual } from "fast-equals";
 import { isArray, isEmpty, pipe, sort } from "remeda";
-import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler, rem } from "@mantine/core";
+import { Breadcrumbs, Button, Divider, Highlight, Input, PopoverDropdown, ScrollAreaAutosize, UnstyledButton, createScopedKeydownHandler } from "@mantine/core";
 import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from "@likec4/core/utils";
 import { useSelector } from "@xstate/react";
 import { useThrottledCallback, useUncontrolled } from "@mantine/hooks";
@@ -342,7 +342,7 @@ function SearchInput(props) {
 		size: "xs",
 		placeholder: "Search by title or id",
 		variant: "unstyled",
-		height: rem(26),
+		height: 26,
 		value: _value,
 		onKeyDown: scopedKeydownHandler,
 		onChange: (e) => handleChange(e.currentTarget.value),

package/dist/navigationpanel/_common.d.ts

@@ -1,9 +1,9 @@
-import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
+import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
 import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
 import { NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
 export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
-export declare const BreadcrumbsSeparator: () => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbsSeparator: () => import("react").JSX.Element;
 export declare const Breadcrumbs: NamedExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & Omit<HTMLMotionProps<'button'>, keyof NavigationPanelActionIconVariant>;
 export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts

@@ -2,4 +2,4 @@ export declare function CompareActionsMenu({ disabled, onApplyLatestToManual, on
     disabled?: boolean;
     onApplyLatestToManual?: undefined | (() => void);
     onResetManualLayout: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/ComparePanel.d.ts

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

package/dist/navigationpanel/comparepanel/ComparePanelControls.d.ts

@@ -1 +1 @@
-export declare function ComparePanelControls(): import("react/jsx-runtime").JSX.Element;
+export declare function ComparePanelControls(): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/DriftsSummary.d.ts

@@ -1 +1 @@
-export declare function DriftsSummary(): import("react/jsx-runtime").JSX.Element | null;
+export declare function DriftsSummary(): import("react").JSX.Element | null;

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.d.ts

@@ -2,4 +2,4 @@ import { LayoutType } from '@likec4/core';
 export declare function LayoutTypeSwitcher({ value, onChange, }: {
     value: LayoutType;
     onChange: (layout: LayoutType) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/navigationpanel/controls/DetailsControls.d.ts

@@ -1,2 +1,2 @@
 import { PopoverProps } from '@mantine/core';
-export declare const DetailsControls: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsControls: (props: PopoverProps) => import("react").JSX.Element;

package/dist/navigationpanel/controls/LayoutWarning.d.ts

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

package/dist/navigationpanel/controls/LogoButton.d.ts

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

package/dist/navigationpanel/controls/NavigationButtons.d.ts

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

package/dist/navigationpanel/controls/OpenSource.d.ts

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

package/dist/navigationpanel/controls/SearchControl.d.ts

@@ -1 +1 @@
-export declare function SearchControl(): import("react/jsx-runtime").JSX.Element;
+export declare function SearchControl(): import("react").JSX.Element;

package/dist/navigationpanel/controls/ToggleReadonly.d.ts

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

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -14,10 +14,12 @@ import * as m$1 from "motion/react-m";
 var selector = (ctx) => {
 	const comparingLatest = deriveToggledFeatures(ctx).enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
 	const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
+	const hasEditor = ctx.features.enableEditor;
+	const isReadOnly = ctx.toggledFeatures.enableReadOnly ?? false;
 	return {
-		visible: ctx.features.enableEditor && noActiveWalkthrough,
+		visible: hasEditor && noActiveWalkthrough,
 		disabled: comparingLatest,
-		isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
+		isReadOnly
 	};
 };
 var ToggleReadonly = () => {

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.d.ts

@@ -0,0 +1,4 @@
+import { NamedExoticComponent } from 'react';
+export declare const ApplySemanticLayout: NamedExoticComponent<{
+    visible?: boolean;
+}>;

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js

@@ -0,0 +1,36 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { PanelActionIcon } from "../_common.js";
+import { useEditorActorStateHasTag } from "../../hooks/useEditorActor.js";
+import { Tooltip } from "./_common.js";
+import { IconSparkles } from "@tabler/icons-react";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
+var ApplySemanticLayout = memo(({ visible = true }) => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Semantic Layout with AI",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			loading: useEditorActorStateHasTag("ai-semantic-layout"),
+			initial: { display: visible ? "block" : "none" },
+			animate: {
+				display: visible ? "block" : "none",
+				opacity: visible ? 1 : .2,
+				x: visible ? 0 : -5,
+				y: visible ? 0 : -8
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.editorActor().send({ type: "change.semantic-layout" });
+			},
+			children: /* @__PURE__ */ jsx(IconSparkles, {
+				size: 14,
+				stroke: 2
+			})
+		})
+	});
+});
+ApplySemanticLayout.displayName = "ApplySemanticLayout";
+//#endregion
+export { ApplySemanticLayout };

package/dist/navigationpanel/editorpanel/CenterCamera.d.ts

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

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.d.ts

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

package/dist/navigationpanel/editorpanel/EditorPanel.d.ts

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

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -1,5 +1,6 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { ApplySemanticLayout } from "./ApplySemanticLayout.js";
 import { CenterCamera } from "./CenterCamera.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
@@ -10,41 +11,52 @@ import { AnimatePresence } from "motion/react";
 import { vstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 //#region src/navigationpanel/editorpanel/EditorPanel.tsx
+var variants = {
+	hidden: {
+		opacity: 0,
+		translateX: -20
+	},
+	visible: {
+		opacity: 1,
+		translateX: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -20
+	}
+};
 function EditorPanel() {
-	const { enableReadOnly } = useEnabledFeatures();
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
-		layout: "position",
-		className: vstack({
-			gap: "xs",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			cursor: "pointer",
-			padding: "xxs",
-			pointerEvents: "all"
-		}),
-		initial: {
-			opacity: 0,
-			translateX: -20
-		},
-		animate: {
-			opacity: 1,
-			translateX: 0
-		},
-		exit: {
-			opacity: 0,
-			translateX: -20
-		},
-		children: /* @__PURE__ */ jsxs(TooltipGroup, {
-			openDelay: 600,
-			closeDelay: 120,
-			children: [
-				/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
-				/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
-				/* @__PURE__ */ jsx(CenterCamera, {}),
-				/* @__PURE__ */ jsx(ToggleReadonly, {})
-			]
+	const { enableReadOnly, enableCompareWithLatest, enableAISemanticLayout } = useEnabledFeatures();
+	const showAiSemanticLayoutButton = !enableCompareWithLatest && !enableReadOnly && enableAISemanticLayout;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		propagate: true,
+		children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
+			layout: "position",
+			className: vstack({
+				gap: "xs",
+				layerStyle: "likec4.panel",
+				position: "relative",
+				cursor: "pointer",
+				padding: "xxs",
+				pointerEvents: "all"
+			}),
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			variants,
+			children: /* @__PURE__ */ jsxs(TooltipGroup, {
+				openDelay: 600,
+				closeDelay: 120,
+				children: [
+					/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
+					/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
+					/* @__PURE__ */ jsx(CenterCamera, {}),
+					/* @__PURE__ */ jsx(ToggleReadonly, {}),
+					/* @__PURE__ */ jsx(ApplySemanticLayout, { visible: showAiSemanticLayoutButton })
+				]
+			})
 		})
-	}) });
+	});
 }
 //#endregion
 export { EditorPanel };

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts

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

package/dist/navigationpanel/editorpanel/ToggleReadonly.d.ts

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

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

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

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

@@ -1 +1 @@
-export declare function ActiveWalkthroughControls(): import("react/jsx-runtime").JSX.Element;
+export declare function ActiveWalkthroughControls(): import("react").JSX.Element;