@likec4/diagram 1.59.3 → 1.60.0

package/dist/navigationpanel/actor.d.ts

@@ -1,38 +0,0 @@
-import { ActorRef, SnapshotFrom, StateMachine, StateValueFrom, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
-import { Context as NavigationPanelActorContextFactory, Context as NavigationPanelActorContext, Events as NavigationPanelActorEvent, Input as NavigationPanelActorInput, Tags } from './actor.setup';
-export type { NavigationPanelActorContext, NavigationPanelActorEvent, NavigationPanelActorInput, };
-export type { BreadcrumbItem, DropdownColumnItem } from './actor.setup';
-declare const _actorLogic: StateMachine<NavigationPanelActorContextFactory, NavigationPanelActorEvent, {}, never, never, {
-    type: "was opened on hover";
-    params: unknown;
-} | {
-    type: "has search query";
-    params: unknown;
-} | {
-    type: "search query is empty";
-    params: unknown;
-}, "open timeout" | "close timeout", "pending" | "idle" | {
-    active: "search" | "opened" | "decide" | "closing";
-}, "active", NavigationPanelActorInput, NonReducibleUnknown, EventObject, MetaObject, {
-    id: "navigationPanel";
-    states: {
-        readonly idle: {
-            id: "idle";
-        };
-        readonly pending: {};
-        readonly active: {
-            states: {
-                readonly decide: {};
-                readonly opened: {};
-                readonly search: {};
-                readonly closing: {};
-            };
-        };
-    };
-}>;
-export interface NavigationPanelActorLogic extends StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, any, any, any, any, any, StateValueFrom<typeof _actorLogic>, Tags, NavigationPanelActorInput, any, any, any, any> {
-}
-export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
-export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
-export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, NavigationPanelActorEvent, never> {
-}

package/dist/navigationpanel/actor.js

@@ -1,93 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { Context, actor } from "./actor.setup.js";
-import { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder } from "./actor.actions.js";
-import { raise } from "xstate";
-var navigationPanelActorLogic = actor.createMachine({
-	id: "navigationPanel",
-	context: ({ input }) => Context({ input }),
-	initial: "idle",
-	entry: [updateActivatedBy(), resetSelectedFolder()],
-	on: {
-		"update.inputs": { actions: updateInputs() },
-		"searchQuery.change": { actions: [updateSearchQuery(), raise({ type: "searchQuery.changed" })] }
-	},
-	states: {
-		idle: {
-			id: "idle",
-			on: {
-				"breadcrumbs.mouseEnter.*": {
-					target: "pending",
-					actions: updateActivatedBy()
-				},
-				"breadcrumbs.click.*": {
-					target: "active",
-					actions: updateActivatedBy()
-				}
-			}
-		},
-		pending: {
-			on: {
-				"breadcrumbs.mouseEnter.*": { actions: updateActivatedBy() },
-				"breadcrumbs.mouseLeave.*": { target: "idle" },
-				"breadcrumbs.click.*": {
-					target: "active",
-					actions: updateActivatedBy()
-				}
-			},
-			after: { "open timeout": { target: "active" } }
-		},
-		active: {
-			tags: ["active"],
-			initial: "decide",
-			on: {
-				"dropdown.dismiss": { target: "#idle" },
-				"breadcrumbs.mouseLeave": {
-					guard: "was opened on hover",
-					target: ".closing"
-				},
-				"dropdown.mouseLeave": {
-					guard: "was opened on hover",
-					target: ".closing"
-				},
-				"searchQuery.changed": { target: ".decide" }
-			},
-			states: {
-				decide: { always: [{
-					guard: "has search query",
-					target: "search"
-				}, { target: "opened" }] },
-				opened: { on: {
-					"searchQuery.changed": {
-						guard: "has search query",
-						actions: keepDropdownOpen(),
-						target: "search"
-					},
-					"breadcrumbs.click.viewtitle": { actions: resetSelectedFolder() },
-					"breadcrumbs.click.*": { actions: updateSelectedFolder() },
-					"select.folder": { actions: [keepDropdownOpen(), updateSelectedFolder()] },
-					"select.view": { actions: emitNavigateTo() }
-				} },
-				search: { on: {
-					"breadcrumbs.click.viewtitle": {
-						actions: [resetSearchQuery(), resetSelectedFolder()],
-						target: "opened"
-					},
-					"breadcrumbs.click.*": {
-						actions: [resetSearchQuery(), updateSelectedFolder()],
-						target: "opened"
-					},
-					"select.view": { actions: emitNavigateTo() }
-				} },
-				closing: {
-					on: {
-						"breadcrumbs.mouseEnter.*": { target: "decide" },
-						"dropdown.mouseEnter": { target: "decide" }
-					},
-					after: { "close timeout": { target: "#idle" } }
-				}
-			}
-		}
-	}
-});
-//#endregion
-export { navigationPanelActorLogic };

package/dist/navigationpanel/actor.setup.d.ts

@@ -1,98 +0,0 @@
-import { LayoutedView, ViewId } from '@likec4/core/types';
-import { CurrentViewModel } from '../hooks/useCurrentViewModel';
-import { SetupReturn, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
-export interface Input {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
-}
-export type Events = {
-    type: 'update.inputs';
-    inputs: Input;
-} | {
-    type: 'searchQuery.change';
-    value: string;
-} | {
-    type: 'searchQuery.changed';
-} | {
-    type: 'select.folder';
-    folderPath: string;
-} | {
-    type: 'select.view';
-    viewId: ViewId;
-} | {
-    type: 'breadcrumbs.mouseLeave';
-} | {
-    type: 'breadcrumbs.mouseEnter.root';
-} | {
-    type: 'breadcrumbs.mouseLeave.root';
-} | {
-    type: 'breadcrumbs.mouseEnter.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.mouseLeave.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.mouseEnter.viewtitle';
-} | {
-    type: 'breadcrumbs.mouseLeave.viewtitle';
-} | {
-    type: 'breadcrumbs.click.root';
-} | {
-    type: 'breadcrumbs.click.folder';
-    folderPath: string;
-} | {
-    type: 'breadcrumbs.click.viewtitle';
-} | {
-    type: 'dropdown.mouseEnter';
-} | {
-    type: 'dropdown.mouseLeave';
-} | {
-    type: 'dropdown.dismiss';
-};
-export type Emitted = unknown;
-export type BreadcrumbItem = {
-    type: 'folder';
-    folderPath: string;
-    title: string;
-} | {
-    type: 'viewtitle';
-    title: string;
-};
-export type DropdownColumnItem = {
-    type: 'folder';
-    folderPath: string;
-    title: string;
-    selected: boolean;
-} | {
-    type: 'view';
-    viewType: 'element' | 'deployment' | 'dynamic' | 'index';
-    viewId: string;
-    title: string;
-    description: string | null;
-    selected: boolean;
-};
-export interface Context {
-    view: LayoutedView;
-    viewModel: CurrentViewModel | null;
-    /**
-     * Who activated the dropdown
-     * (if `click` then the dropdown is always open until dismissed)
-     * @default 'hover'
-     */
-    activatedBy: 'hover' | 'click';
-    /**
-     * The folder that is currently selected in the dropdown
-     * By default it is the root
-     */
-    selectedFolder: string;
-    searchQuery: string;
-}
-export type Tags = 'active';
-export declare function Context({ input }: {
-    input: Input;
-}): Context;
-export declare const actor: SetupReturn<Context, Events, {}, {}, {}, {
-    'was opened on hover': unknown;
-    'has search query': unknown;
-    'search query is empty': unknown;
-}, "open timeout" | "close timeout", "active", Input, NonReducibleUnknown, EventObject, MetaObject>;

package/dist/navigationpanel/actor.setup.js

@@ -1,31 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { isEmpty } from "remeda";
-import { setup } from "xstate";
-//#region src/navigationpanel/actor.setup.ts
-function Context({ input }) {
-	return {
-		...input,
-		activatedBy: "hover",
-		selectedFolder: "",
-		searchQuery: ""
-	};
-}
-var actor = setup({
-	types: {
-		context: {},
-		events: {},
-		tags: "",
-		input: {}
-	},
-	delays: {
-		"open timeout": 500,
-		"close timeout": 350
-	},
-	guards: {
-		"was opened on hover": ({ context }) => context.activatedBy === "hover",
-		"has search query": ({ context }) => !isEmpty(context.searchQuery),
-		"search query is empty": ({ context }) => isEmpty(context.searchQuery)
-	}
-});
-//#endregion
-export { Context, actor };

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

@@ -1,5 +0,0 @@
-export declare function CompareActionsMenu({ disabled, onApplyLatestToManual, onResetManualLayout, }: {
-    disabled?: boolean;
-    onApplyLatestToManual?: undefined | (() => void);
-    onResetManualLayout: () => void;
-}): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -1,68 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { cx } from "@likec4/styles/css";
-import { IconChevronDown, IconInfoCircle } from "@tabler/icons-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Menu, Tooltip, UnstyledButton } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/navigationpanel/comparepanel/CompareActionsMenu.tsx
-function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetManualLayout }) {
-	return /* @__PURE__ */ jsxs(Menu, {
-		withinPortal: false,
-		floatingStrategy: "absolute",
-		shadow: "lg",
-		position: "bottom-start",
-		offset: { mainAxis: 4 },
-		disabled,
-		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
-			disabled,
-			className: cx("mantine-active", hstack({
-				gap: "2",
-				py: "1.5",
-				px: "2",
-				lineHeight: "1",
-				textStyle: "xs",
-				fontWeight: "medium",
-				layerStyle: "likec4.panel.action",
-				userSelect: "none"
-			})),
-			children: [/* @__PURE__ */ jsx(Box$1, { children: "Actions" }), /* @__PURE__ */ jsx(IconChevronDown, {
-				size: 12,
-				stroke: 2,
-				opacity: .7
-			})]
-		}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsxs(Menu.Item, {
-			disabled: !onApplyLatestToManual,
-			onClick: onApplyLatestToManual,
-			rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(Tooltip, {
-				onClick: stopPropagation,
-				position: "right-start",
-				label: /* @__PURE__ */ jsxs(Fragment, { children: [
-					"Applies changes from the latest auto-layouted",
-					/* @__PURE__ */ jsx("br", {}),
-					"to saved snapshot, preserving (as possible)",
-					/* @__PURE__ */ jsx("br", {}),
-					"manual adjustments.",
-					/* @__PURE__ */ jsx("br", {}),
-					/* @__PURE__ */ jsx("br", {}),
-					"You can undo this action."
-				] }),
-				children: /* @__PURE__ */ jsx(IconInfoCircle, {
-					size: 14,
-					stroke: 1.7,
-					opacity: .5
-				})
-			}),
-			children: ["Sync with latest", !onApplyLatestToManual && /* @__PURE__ */ jsx(Box$1, {
-				textStyle: "xs",
-				children: "view type is changed"
-			})]
-		}), /* @__PURE__ */ jsx(Menu.Item, {
-			onClick: onResetManualLayout,
-			children: "Remove manual layout"
-		})] })]
-	});
-}
-//#endregion
-export { CompareActionsMenu };

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

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

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -1,139 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../hooks/useCallbackRef.js";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
-import { Tooltip as Tooltip$1 } from "../_common.js";
-import { ComparePanelControls } from "./ComparePanelControls.js";
-import { DriftsSummary } from "./DriftsSummary.js";
-import { css } from "@likec4/styles/css";
-import { memo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIsMounted } from "@react-hookz/web";
-import { Button, Divider } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
-import { HStack } from "@likec4/styles/jsx";
-import { hstack, vstack } from "@likec4/styles/patterns";
-import * as m$1 from "motion/react-m";
-//#region src/navigationpanel/comparepanel/ComparePanel.tsx
-var variants = {
-	initial: {
-		opacity: 0,
-		translateX: -20
-	},
-	animate: {
-		opacity: 1,
-		translateX: 0
-	},
-	exit: {
-		opacity: 0,
-		translateX: -20
-	}
-};
-var ComparePanel = memo(() => {
-	const portalProps = useMantinePortalProps();
-	const isMounted = useIsMounted();
-	const { enableCompareWithLatest } = useEnabledFeatures();
-	const [ctx, ops] = useDiagramCompareLayout();
-	const [isProcessing, setIsProcessing] = useState(false);
-	const resetProcessing = () => {
-		setTimeout(() => {
-			if (isMounted()) setIsProcessing(false);
-		}, 500);
-	};
-	const onApplyLatest = useCallbackRef((e) => {
-		if (!ctx.canApplyLatest || ctx.layout === "auto") {
-			window.alert("Cannot apply changes from latest version when using auto layout. Please switch to manual layout first.");
-			return;
-		}
-		e.stopPropagation();
-		setIsProcessing(true);
-		setTimeout(() => {
-			ops.applyLatestToManual();
-			resetProcessing();
-		}, 200);
-	});
-	const onResetManualLayout = useCallbackRef((e) => {
-		e.stopPropagation();
-		setIsProcessing(true);
-		setTimeout(() => {
-			ops.resetManualLayout();
-			resetProcessing();
-		}, 200);
-	});
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(m$1.div, {
-		layout: "size",
-		layoutDependency: ctx.drifts || ctx.layout,
-		className: hstack({
-			gap: "2",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			px: "2",
-			py: "1",
-			pl: "3",
-			pointerEvents: "all"
-		}),
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		children: /* @__PURE__ */ jsx(ComparePanelControls, {})
-	}, "ComparePanel"), /* @__PURE__ */ jsxs(m$1.div, {
-		layout: "size",
-		layoutDependency: ctx.drifts || ctx.layout,
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		className: vstack({
-			gap: "4",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			p: "4",
-			pointerEvents: "all",
-			height: "auto",
-			overflow: "hidden",
-			maxHeight: "calc(100cqh - 180px)",
-			"@/md": { minWidth: "200px" }
-		}),
-		children: [/* @__PURE__ */ jsx(DriftsSummary, {}), ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(m$1.div, {
-			layout: "position",
-			className: css({ flex: "0" }),
-			children: [/* @__PURE__ */ jsx(Divider, {
-				orientation: "horizontal",
-				size: "xs",
-				mb: "xs"
-			}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Tooltip$1, {
-				openDelay: 100,
-				disabled: ctx.layout !== "auto",
-				label: "Switch to manual layout to apply changes.",
-				...portalProps,
-				children: /* @__PURE__ */ jsx(Button, {
-					loading: isProcessing,
-					size: "xs",
-					color: "orange",
-					variant: "light",
-					onClick: onApplyLatest,
-					disabled: ctx.layout === "auto",
-					children: "Apply changes"
-				})
-			}), !isProcessing && /* @__PURE__ */ jsx(Tooltip$1, {
-				openDelay: 100,
-				disabled: ctx.layout !== "manual",
-				label: "Reset manual layout",
-				...portalProps,
-				children: /* @__PURE__ */ jsx(Button, {
-					hidden: isProcessing,
-					size: "xs",
-					color: "orange",
-					variant: "subtle",
-					onClick: onResetManualLayout,
-					children: "Reset"
-				})
-			})] })]
-		}) })]
-	}, "ListOfDrifts")] }) });
-});
-ComparePanel.displayName = "ComparePanel";
-//#endregion
-export { ComparePanel };

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

@@ -1 +0,0 @@
-export declare function ComparePanelControls(): import("react").JSX.Element;

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -1,54 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
-import { PanelActionIcon } from "../_common.js";
-import { CompareActionsMenu } from "./CompareActionsMenu.js";
-import { LayoutTypeSwitcher } from "./LayoutTypeSwitcher.js";
-import { IconX } from "@tabler/icons-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Divider } from "@mantine/core";
-import { Box as Box$1, HStack } from "@likec4/styles/jsx";
-//#region src/navigationpanel/comparepanel/ComparePanelControls.tsx
-var Divider$1 = Divider.withProps({
-	mx: 2,
-	size: "xs",
-	orientation: "vertical"
-});
-function ComparePanelControls() {
-	const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Box$1, {
-			css: {
-				textStyle: "xs",
-				color: "likec4.panel.text",
-				userSelect: "none"
-			},
-			children: "Compare"
-		}),
-		/* @__PURE__ */ jsx(LayoutTypeSwitcher, {
-			value: ctx.layout,
-			onChange: switchLayout
-		}),
-		ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, {
-			gap: "1",
-			children: [
-				/* @__PURE__ */ jsx(Divider$1, {}),
-				/* @__PURE__ */ jsx(CompareActionsMenu, {
-					disabled: ctx.layout === "auto",
-					onResetManualLayout: resetManualLayout,
-					onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
-				}),
-				/* @__PURE__ */ jsx(Divider$1, {})
-			]
-		}),
-		/* @__PURE__ */ jsx(PanelActionIcon, {
-			size: "sm",
-			onClick: (e) => {
-				e.stopPropagation();
-				toggleCompare();
-			},
-			children: /* @__PURE__ */ jsx(IconX, {})
-		})
-	] });
-}
-//#endregion
-export { ComparePanelControls };

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

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