@likec4/diagram 1.59.3 → 1.60.0

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -1,133 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip as Tooltip$1 } from "./_common.js";
-import { css } from "@likec4/styles/css";
-import { IconLayoutAlignBottom, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignMiddle, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutBoardSplit, IconLayoutCollage, IconRouteOff } from "@tabler/icons-react";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverDropdown, PopoverTarget, TooltipGroup } from "@mantine/core";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx
-var Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
-	label,
-	withinPortal: false,
-	position: "top",
-	children: /* @__PURE__ */ jsx(PanelActionIcon, {
-		classNames: {
-			root: "action-icon",
-			icon: css({ "& > svg": {
-				width: "70%",
-				height: "70%"
-			} })
-		},
-		onClick,
-		children: icon
-	})
-});
-function manualLayoutTooltipProps(isPopoverOpen) {
-	return isPopoverOpen ? { opened: false } : {};
-}
-var ManualLayoutToolsButton = memo(() => {
-	const diagram = useDiagram();
-	const portalProps = useMantinePortalProps();
-	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(Popover, {
-		opened: isPopoverOpen,
-		onChange: setIsPopoverOpen,
-		position: "right",
-		offset: { mainAxis: 12 },
-		clickOutsideEvents: ["pointerdown"],
-		...portalProps,
-		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
-			label: "Manual layouting tools",
-			...manualLayoutTooltipProps(isPopoverOpen),
-			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) })
-		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
-			className: hstack({
-				gap: "0.5",
-				layerStyle: "likec4.panel",
-				padding: "1",
-				pointerEvents: "all"
-			}),
-			children: /* @__PURE__ */ jsxs(TooltipGroup, { children: [
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align in columns",
-					icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Column");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align left",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Left");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align center",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Center");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align right",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Right");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align in rows",
-					icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Row");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align top",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Top");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align middle",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Middle");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Align bottom",
-					icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.align("Bottom");
-					}
-				}),
-				/* @__PURE__ */ jsx(Action, {
-					label: "Reset all control points",
-					icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.resetEdgeControlPoints();
-					}
-				})
-			] })
-		})]
-	});
-});
-ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
-//#endregion
-export { ManualLayoutToolsButton, manualLayoutTooltipProps };

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

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

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -1,22 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip } from "./_common.js";
-import { IconLockOpen2 } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/navigationpanel/editorpanel/ToggleReadonly.tsx
-var ToggleReadonly = () => {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: "Switch to Read-only",
-		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			onClick: () => diagram.toggleFeature("ReadOnly"),
-			children: /* @__PURE__ */ jsx(IconLockOpen2, {
-				size: 14,
-				stroke: 2
-			})
-		})
-	});
-};
-//#endregion
-export { ToggleReadonly };

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

@@ -1,3 +0,0 @@
-import { NamedExoticComponent, RefAttributes } from 'react';
-import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
-export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;

package/dist/navigationpanel/editorpanel/_common.js

@@ -1,14 +0,0 @@
-import { Tooltip } from "@mantine/core";
-//#region src/navigationpanel/editorpanel/_common.tsx
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	openDelay: 600,
-	closeDelay: 120,
-	label: "",
-	children: null,
-	offset: 8,
-	position: "right"
-});
-//#endregion
-export { Tooltip$1 as Tooltip };

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

@@ -1 +0,0 @@
-export { EditorPanel } from './EditorPanel';

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

@@ -1,8 +0,0 @@
-export declare const navigationButtons: string;
-export declare const panel: string;
-export declare const actionIconGroup: string;
-export declare const autolayoutIcon: string;
-export declare const autolayoutButton: string;
-export declare const autolayoutIndicator: string;
-export declare const spacingSliderBody: string;
-export declare const spacingSliderThumb: string;

package/dist/navigationpanel/editorpanel/styles.js

@@ -1,62 +0,0 @@
-import { css } from "@likec4/styles/css";
-css({
-	gap: "xxs",
-	_empty: { display: "none" }
-});
-css({
-	top: "md",
-	left: "md",
-	margin: "0",
-	pointerEvents: "none",
-	"& :where(button, .action-icon, [role='dialog'])": { pointerEvents: "all" },
-	["& .action-icon"]: { ["--ai-size"]: "2rem" },
-	["& .tabler-icon"]: {
-		width: "65%",
-		height: "65%"
-	},
-	_reduceGraphics: { "& .action-icon": { "--ai-radius": "0px" } }
-});
-css({ shadow: {
-	base: "md",
-	_whenPanning: "none"
-} });
-css({ ["& .tabler-icon"]: {
-	width: "65%",
-	height: "65%"
-} });
-var autolayoutButton = css({
-	flex: "1 1 40%",
-	textAlign: "center",
-	fontWeight: "medium",
-	padding: "[4px 6px]",
-	fontSize: "11px",
-	zIndex: 1
-});
-var autolayoutIndicator = css({
-	background: "mantine.gray[2]",
-	borderRadius: "sm",
-	border: `1px solid`,
-	borderColor: "mantine.gray[4]",
-	_dark: {
-		background: "mantine.dark[5]",
-		borderColor: "mantine.dark[4]"
-	}
-});
-var spacingSliderBody = css({
-	position: "relative",
-	borderRadius: "sm",
-	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.gray[5]",
-	borderRadius: "sm",
-	transform: "translate(-50%, -50%)"
-});
-//#endregion
-export { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb };

package/dist/navigationpanel/hooks.d.ts

@@ -1,35 +0,0 @@
-import { ViewId } from '@likec4/core';
-import { NavigationPanelActorEvent, NavigationPanelActorRef } from './actor';
-import { Provider } from 'react';
-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;
-    selectFolder: (folderPath: string) => void;
-    selectView: (viewId: ViewId) => void;
-    /**
-     * If the navigation dropdown is opened
-     */
-    isOpened: () => boolean;
-    clearSearch: () => void;
-    closeDropdown: () => void;
-}
-export declare function useNavigationActor(): NavigationActor;

package/dist/navigationpanel/hooks.js

@@ -1,30 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { createSafeContextForActor } from "../hooks/safeContext.js";
-import { useMemo } from "react";
-//#region src/navigationpanel/hooks.tsx
-var { ContextProvider: NavigationPanelActorContextProvider, selectContext: selectNavigationContext, selectSnapshot: selectNavigationSnapshot, useActorRef: useNavigationActorRef, useActorSelector: useNavigationActorSelector } = createSafeContextForActor("NavigationPanel");
-function useNavigationActor() {
-	const actorRef = useNavigationActorRef();
-	return useMemo(() => ({
-		actorRef,
-		send: (event) => actorRef.send(event),
-		selectFolder: (folderPath) => actorRef.send({
-			type: "select.folder",
-			folderPath
-		}),
-		selectView: (viewId) => actorRef.send({
-			type: "select.view",
-			viewId
-		}),
-		isOpened: () => {
-			return actorRef.getSnapshot().hasTag("active");
-		},
-		clearSearch: () => actorRef.send({
-			type: "searchQuery.change",
-			value: ""
-		}),
-		closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
-	}), [actorRef]);
-}
-//#endregion
-export { NavigationPanelActorContextProvider, selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector };

package/dist/navigationpanel/index.d.ts

@@ -1 +0,0 @@
-export { NavigationPanel } from './NavigationPanel';

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

@@ -1,16 +0,0 @@
-import { RecipeRuntimeFn } from '../../styled-system/types';
-export declare const breadcrumbTitle: RecipeRuntimeFn<{
-    truncate: {
-        true: {
-            truncate: boolean;
-        };
-    };
-    dimmed: {
-        true: {
-            color: {
-                base: "likec4.panel.text.dimmed";
-                _hover: "likec4.panel.action";
-            };
-        };
-    };
-}>;

package/dist/navigationpanel/styles.css.js

@@ -1,22 +0,0 @@
-import { cva } from "@likec4/styles/css";
-//#region src/navigationpanel/styles.css.ts
-var breadcrumbTitle = cva({
-	base: {
-		fontSize: "sm",
-		fontWeight: "medium",
-		transition: "fast",
-		color: {
-			base: "likec4.panel.action",
-			_hover: "likec4.panel.action.hover"
-		}
-	},
-	variants: {
-		truncate: { "true": { truncate: true } },
-		dimmed: { "true": { color: {
-			base: "likec4.panel.text.dimmed",
-			_hover: "likec4.panel.action"
-		} } }
-	}
-});
-//#endregion
-export { breadcrumbTitle };

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

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

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -1,112 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext } from "../../hooks/useDiagram.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { TriggerWalkthroughButton } from "./DynamicViewControls.js";
-import { css } from "@likec4/styles/css";
-import { IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconPlayerStopFilled } from "@tabler/icons-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isTruthy } from "remeda";
-import { Badge, Button, Portal } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import * as m$1 from "motion/react-m";
-//#region src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx
-var PrevNextButton = Button.withProps({
-	component: m$1.button,
-	layout: "position",
-	whileTap: { scale: .95 },
-	variant: "light",
-	size: "xs",
-	fw: "500"
-});
-var ParallelFrame = () => {
-	const { portalProps } = useMantinePortalProps();
-	return /* @__PURE__ */ jsx(Portal, {
-		...portalProps,
-		children: /* @__PURE__ */ jsx(Box$1, { css: {
-			position: "absolute",
-			margin: "0",
-			padding: "0",
-			top: "0",
-			left: "0",
-			width: "100%",
-			height: "100%",
-			border: `2px solid`,
-			borderColor: "likec4.walkthrough.parallelFrame",
-			pointerEvents: "none",
-			md: { borderWidth: "4" }
-		} })
-	});
-};
-function ActiveWalkthroughControls() {
-	const diagram = useDiagram();
-	const { isParallel, hasNext, hasPrevious, currentStep, totalSteps } = useDiagramContext((s) => {
-		const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
-		return {
-			isParallel: isTruthy(s.activeWalkthrough?.activeFlow),
-			hasNext: currentStepIndex < s.xyedges.length - 1,
-			hasPrevious: currentStepIndex > 0,
-			currentStep: currentStepIndex + 1,
-			totalSteps: s.xyedges.length
-		};
-	});
-	return /* @__PURE__ */ jsxs(AnimatePresence, {
-		propagate: true,
-		mode: "popLayout",
-		children: [
-			/* @__PURE__ */ jsx(TriggerWalkthroughButton, {
-				variant: "light",
-				size: "xs",
-				color: "orange",
-				mr: "sm",
-				onClick: (e) => {
-					e.stopPropagation();
-					diagram.stopWalkthrough();
-				},
-				rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
-				children: "Stop"
-			}, "stop-walkthrough"),
-			/* @__PURE__ */ jsx(PrevNextButton, {
-				disabled: !hasPrevious,
-				onClick: () => diagram.walkthroughStep("prev"),
-				leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
-				children: "Previous"
-			}, "prev"),
-			/* @__PURE__ */ jsxs(Badge, {
-				component: m$1.div,
-				layout: "position",
-				size: "md",
-				radius: "sm",
-				variant: isParallel ? "gradient" : "transparent",
-				gradient: {
-					from: "red",
-					to: "orange",
-					deg: 90
-				},
-				rightSection: /* @__PURE__ */ jsx(m$1.div, {
-					className: css({
-						fontSize: "xxs",
-						display: isParallel ? "block" : "none"
-					}),
-					children: "parallel"
-				}),
-				className: css({ alignItems: "baseline" }),
-				children: [
-					currentStep,
-					" / ",
-					totalSteps
-				]
-			}, "step-badge"),
-			/* @__PURE__ */ jsx(PrevNextButton, {
-				disabled: !hasNext,
-				onClick: () => diagram.walkthroughStep("next"),
-				rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
-				children: "Next"
-			}, "next"),
-			isParallel && /* @__PURE__ */ jsx(ParallelFrame, {}, "parallel-frame")
-		]
-	});
-}
-//#endregion
-export { ActiveWalkthroughControls };