@likec4/diagram 1.59.3 → 1.60.0

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.mjs

@@ -0,0 +1,117 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconPlayerSkipBackFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
+import IconPlayerSkipForwardFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
+import IconPlayerStopFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useDiagramContext } from "../../hooks/useDiagram.mjs";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import { TriggerWalkthroughButton } from "./DynamicViewControls.mjs";
+import { css } from "@likec4/styles/css";
+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
+const PrevNextButton = Button.withProps({
+	component: m$1.button,
+	layout: "position",
+	whileTap: { scale: .95 },
+	variant: "light",
+	size: "xs",
+	fw: "500"
+});
+const 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%",
+			borderWidth: "strong",
+			borderStyle: "solid",
+			borderColor: "likec4.walkthrough.parallelFrame",
+			pointerEvents: "none",
+			md: { borderWidth: "extra" }
+		} })
+	});
+};
+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 };

package/dist/navigationpanel/walkthrough/DynamicViewControls.mjs

@@ -0,0 +1,82 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconPlayerPlayFilled from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { Tooltip as Tooltip$1 } from "../_common.mjs";
+import { useNavigationActor } from "../hooks.mjs";
+import { DynamicViewModeSwitcher } from "./DynamicViewModeSwitcher.mjs";
+import { css } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { Button } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import * as m$1 from "motion/react-m";
+
+//#region src/navigationpanel/walkthrough/DynamicViewControls.tsx
+const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button, {
+	variant: "filled",
+	size: "xs",
+	fw: "500",
+	...props,
+	ref,
+	component: m$1.button,
+	whileTap: { scale: .95 },
+	layout: "position",
+	layoutId: "trigger-dynamic-walkthrough",
+	className: css({ flexShrink: 0 })
+}));
+function StartWalkthroughButton() {
+	const { enableCompareWithLatest } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const actor = useNavigationActor();
+	let tooltipLabel = "Start Dynamic View Walkthrough";
+	switch (true) {
+		case enableCompareWithLatest: tooltipLabel = "Walkthrough not available when Compare is active";
+	}
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: tooltipLabel,
+		children: /* @__PURE__ */ jsx(TriggerWalkthroughButton, {
+			onClick: (e) => {
+				e.stopPropagation();
+				actor.closeDropdown();
+				diagram.startWalkthrough();
+			},
+			initial: {
+				opacity: 0,
+				scale: .9,
+				translateX: -10
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				translateX: 0
+			},
+			exit: {
+				opacity: 0,
+				translateX: -20
+			},
+			size: "compact-xs",
+			h: 26,
+			disabled: enableCompareWithLatest,
+			classNames: {
+				label: css({ display: {
+					base: "none",
+					"@/md": "inherit"
+				} }),
+				section: css({ marginInlineStart: {
+					base: "0",
+					"@/md": "2"
+				} })
+			},
+			rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
+			children: "Start"
+		})
+	});
+}
+function DynamicViewControls() {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {}), /* @__PURE__ */ jsx(StartWalkthroughButton, {})] });
+}
+
+//#endregion
+export { DynamicViewControls, StartWalkthroughButton, TriggerWalkthroughButton };

package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.mjs

@@ -0,0 +1,51 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { css } from "@likec4/styles/css";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SegmentedControl } from "@mantine/core";
+import { m } from "motion/react";
+
+//#region src/navigationpanel/walkthrough/DynamicViewModeSwitcher.tsx
+const dynamicViewModes = [{
+	value: "diagram",
+	label: "Diagram"
+}, {
+	value: "sequence",
+	label: "Sequence"
+}];
+const selectDynamicViewVariant = selectDiagramContext((c) => c.dynamicViewVariant);
+function DynamicViewModeSwitcher() {
+	const value = useDiagramSelector(selectDynamicViewVariant);
+	const diagram = useDiagram();
+	const controlAnimation = useRef({
+		initial: {
+			opacity: 0,
+			translateX: -10
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -10
+		}
+	});
+	return /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		...controlAnimation.current,
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			value,
+			data: dynamicViewModes,
+			onChange: (variant) => {
+				diagram.switchDynamicViewVariant(variant);
+			},
+			size: "xs",
+			classNames: { label: css({ fontSize: "xxs" }) }
+		})
+	});
+}
+
+//#endregion
+export { DynamicViewModeSwitcher };

package/dist/navigationpanel/walkthrough/WalkthroughPanel.mjs

@@ -0,0 +1,81 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { selectDiagramContext, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { Markdown } from "../../base-primitives/Markdown.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isNonNull, isTruthy } from "remeda";
+import { RichText } from "@likec4/core";
+import { ScrollAreaAutosize } from "@mantine/core";
+import { AnimatePresence, m } from "motion/react";
+import { styled } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
+
+//#region src/navigationpanel/walkthrough/WalkthroughPanel.tsx
+const SectionHeader = styled("div", { base: {
+	fontSize: "xs",
+	color: "text.dimmed",
+	fontWeight: "medium",
+	userSelect: "none",
+	mb: "xxs"
+} });
+const selectWalkthroughNotes = selectDiagramContext((s) => {
+	const isActive = isNonNull(s.activeWalkthrough);
+	const activeStepIndex = isActive ? s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) : -1;
+	return {
+		isActive,
+		isParallel: isActive && isTruthy(s.activeWalkthrough?.activeFlow),
+		hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
+		hasPrevious: isActive && activeStepIndex > 0,
+		notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? null : null
+	};
+});
+const WalkthroughPanel = memo(() => {
+	const { isActive, notes: _notes } = useDiagramSelector(selectWalkthroughNotes);
+	const notes = _notes ? RichText.from(_notes) : RichText.EMPTY;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && !notes.isEmpty && /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		className: vstack({
+			position: "relative",
+			layerStyle: "likec4.dropdown",
+			gap: "sm",
+			padding: "md",
+			paddingTop: "xxs",
+			pointerEvents: "all",
+			maxWidth: "[300px]",
+			height: "max-content",
+			maxHeight: "[calc(100cqh - 100px)]",
+			width: "max-content",
+			cursor: "default",
+			overflow: "hidden",
+			"@/sm": {
+				minWidth: "[400px]",
+				maxWidth: "[550px]"
+			},
+			"@/lg": { maxWidth: "[700px]" }
+		}),
+		initial: {
+			opacity: 0,
+			translateX: -20
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -20
+		},
+		children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, {
+			type: "scroll",
+			overscrollBehavior: "contain",
+			children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }), /* @__PURE__ */ jsx(Markdown, {
+				value: notes,
+				fontSize: "sm",
+				emptyText: "No description"
+			})]
+		})
+	}) });
+});
+
+//#endregion
+export { WalkthroughPanel };