@likec4/diagram 1.55.1 → 1.57.0

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,126 +1,111 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { invariant } from '@likec4/core';
-import { css } from '@likec4/styles/css';
-import { Button, SegmentedControl } from '@mantine/core';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { forwardRef } from 'react';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { Tooltip } from '../_common.js';
-import { useNavigationActor } from '../hooks.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
-
-const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    variant: "filled",
-    size: "xs",
-    fw: "500",
-    ...props,
-    ref,
-    component: m.button,
-    whileTap: {
-      scale: 0.95
-    },
-    layout: "position",
-    layoutId: "trigger-dynamic-walkthrough",
-    className: css({
-      flexShrink: 0
-    })
-  }
-));
+import "../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { Tooltip as Tooltip$1 } from "../_common.js";
+import { useNavigationActor } from "../hooks.js";
+import { css } from "@likec4/styles/css";
+import { IconPlayerPlayFilled } from "@tabler/icons-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { Button, SegmentedControl } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/walkthrough/DynamicViewControls.tsx
+var 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 !enableReadOnly:
-    //   tooltipLabel = 'Walkthrough not available in Edit mode'
-    //   break
-    case enableCompareWithLatest:
-      tooltipLabel = "Walkthrough not available when Compare is active";
-      break;
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
-    TriggerWalkthroughButton,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        actor.closeDropdown();
-        diagram.startWalkthrough();
-      },
-      initial: { opacity: 0, scale: 0.6, 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"
-    }
-  ) });
+	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";
+			break;
+	}
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: tooltipLabel,
+		children: /* @__PURE__ */ jsx(TriggerWalkthroughButton, {
+			onClick: (e) => {
+				e.stopPropagation();
+				actor.closeDropdown();
+				diagram.startWalkthrough();
+			},
+			initial: {
+				opacity: 0,
+				scale: .6,
+				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"
+		})
+	});
 }
-const DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
-  return /* @__PURE__ */ jsx(m.div, { ref, layout: "position", children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      value,
-      component: m.div,
-      onChange: (variant) => {
-        invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
-        onChange(variant);
-      },
-      classNames: {
-        label: css({
-          fontSize: "xxs"
-        })
-      },
-      data: [
-        {
-          value: "diagram",
-          label: "Diagram"
-        },
-        {
-          value: "sequence",
-          label: "Sequence"
-        }
-      ]
-    }
-  ) });
+var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
+	return /* @__PURE__ */ jsx(m$1.div, {
+		ref,
+		layout: "position",
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			size: "xs",
+			value,
+			onChange: (variant) => {
+				invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
+				onChange(variant);
+			},
+			classNames: { label: css({ fontSize: "xxs" }) },
+			data: [{
+				value: "diagram",
+				label: "Diagram"
+			}, {
+				value: "sequence",
+				label: "Sequence"
+			}]
+		})
+	});
 });
 function DynamicViewControls() {
-  const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    /* @__PURE__ */ jsx(
-      DynamicViewModeSwitcher,
-      {
-        value: dynamicViewVariant,
-        onChange: (mode) => {
-          diagram.switchDynamicViewVariant(mode);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")
-  ] });
+	const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {
+		value: dynamicViewVariant,
+		onChange: (mode) => {
+			diagram.switchDynamicViewVariant(mode);
+		}
+	}), /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")] });
 }
-
+//#endregion
 export { DynamicViewControls, TriggerWalkthroughButton };

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,87 +1,79 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { RichText } from '@likec4/core';
-import { styled } from '@likec4/styles/jsx';
-import { vstack } from '@likec4/styles/patterns';
-import { ScrollAreaAutosize } from '@mantine/core';
-import { AnimatePresence, m } from 'motion/react';
-import { memo } from 'react';
-import { isNonNull, isTruthy } from 'remeda';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { Markdown } from '../../base-primitives/Markdown.js';
-
-const SectionHeader = styled("div", {
-  base: {
-    fontSize: "xs",
-    color: "text.dimmed",
-    fontWeight: "medium",
-    userSelect: "none",
-    mb: "xxs"
-  }
-});
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { Markdown } from "../../base-primitives/Markdown.js";
+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
+var SectionHeader = styled("div", { base: {
+	fontSize: "xs",
+	color: "text.dimmed",
+	fontWeight: "medium",
+	userSelect: "none",
+	mb: "xxs"
+} });
 function selectWalkthroughNotes(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?.parallelPrefix),
-    hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
-    hasPrevious: isActive && activeStepIndex > 0,
-    notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? null : null
-  };
+	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?.parallelPrefix),
+		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 } = useDiagramContext(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: 300,
-        height: "max-content",
-        maxHeight: "calc(100cqh - 100px)",
-        width: "max-content",
-        cursor: "default",
-        overflow: "hidden",
-        "@/sm": {
-          minWidth: 400,
-          maxWidth: 550
-        },
-        "@/lg": {
-          maxWidth: 700
-        }
-      }),
-      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"
-          }
-        )
-      ] })
-    }
-  ) });
+var WalkthroughPanel = memo(() => {
+	const { isActive, notes: _notes } = useDiagramContext(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: 300,
+			height: "max-content",
+			maxHeight: "calc(100cqh - 100px)",
+			width: "max-content",
+			cursor: "default",
+			overflow: "hidden",
+			"@/sm": {
+				minWidth: 400,
+				maxWidth: 550
+			},
+			"@/lg": { maxWidth: 700 }
+		}),
+		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 };

package/dist/overlays/Overlays.js

@@ -1,117 +1,99 @@
-import { jsx } from 'react/jsx-runtime';
-import { nonexhaustive } from '@likec4/core';
-import { useSelector } from '@xstate/react';
-import { animate } from 'motion';
-import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'motion/react';
-import { useEffect } from 'react';
-import { isNonNullish } from 'remeda';
-import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { ElementDetails } from './element-details/ElementDetails.js';
-import { Overlay } from './overlay/Overlay.js';
-import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
-import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser.js';
-import { useDiagram } from '../hooks/safeContext.js';
-import 'fast-equals';
-import { DiagramFeatures } from '../context/DiagramFeatures.js';
-
-const selectOverlays = (s) => {
-  return s.context.overlays.map((overlay) => {
-    switch (overlay.type) {
-      case "relationshipsBrowser":
-        return s.children[overlay.id] ? {
-          type: overlay.type,
-          actorRef: s.children[overlay.id]
-        } : null;
-      case "relationshipDetails":
-        return s.children[overlay.id] ? {
-          type: overlay.type,
-          actorRef: s.children[overlay.id]
-        } : null;
-      case "elementDetails":
-        return s.children[overlay.id] ? {
-          type: overlay.type,
-          actorRef: s.children[overlay.id]
-        } : null;
-      default:
-        nonexhaustive(overlay);
-    }
-  }).filter(isNonNullish);
+import "../_virtual/_rolldown/runtime.js";
+import { DiagramFeatures } from "../context/DiagramFeatures.js";
+import { useDiagram } from "../hooks/safeContext.js";
+import { ErrorBoundary } from "../components/ErrorFallback.js";
+import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
+import { ElementDetails } from "./element-details/ElementDetails.js";
+import { Overlay } from "./overlay/Overlay.js";
+import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isNonNullish } from "remeda";
+import { nonexhaustive } from "@likec4/core";
+import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { animate } from "motion";
+//#region src/overlays/Overlays.tsx
+var selectOverlays = (s) => {
+	return s.context.overlays.map((overlay) => {
+		switch (overlay.type) {
+			case "relationshipsBrowser": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			case "relationshipDetails": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			case "elementDetails": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			default: nonexhaustive(overlay);
+		}
+	}).filter(isNonNullish);
 };
-const compareSelectOverlays = (a, b) => {
-  return a.length === b.length && a.every((overlay, i) => {
-    return overlay.actorRef === b[i].actorRef;
-  });
+var compareSelectOverlays = (a, b) => {
+	return a.length === b.length && a.every((overlay, i) => {
+		return overlay.actorRef === b[i].actorRef;
+	});
 };
 function Overlays({ overlaysActorRef }) {
-  const diagram = useDiagram();
-  const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
-  const isMotionReduced = useReducedMotionConfig() ?? false;
-  const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
-  useEffect(() => {
-    const xyflowDomNode = diagram.getContext().xystore.getState().domNode;
-    const xyflowRendererDom = xyflowDomNode?.querySelector(".react-flow__renderer");
-    if (!xyflowRendererDom || isMotionReduced) return;
-    const current = animate(xyflowRendererDom, {
-      opacity: isActiveOverlay ? 0.7 : 1,
-      filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
-      transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
-    }, {
-      duration: isActiveOverlay ? 0.35 : 0.17
-    });
-    let cleanupTm = null;
-    if (!isActiveOverlay) {
-      cleanupTm = setTimeout(() => {
-        xyflowRendererDom.style.transform = "";
-        xyflowRendererDom.style.filter = "";
-        cleanupTm = null;
-      }, 450);
-    }
-    return () => {
-      if (cleanupTm) {
-        clearTimeout(cleanupTm);
-      }
-      current.stop();
-    };
-  }, [isActiveOverlay]);
-  const close = (actorRef) => {
-    overlaysActorRef.send({ type: "close", actorId: actorRef.id });
-  };
-  const overlaysReact = overlays.map((overlay, index) => {
-    switch (overlay.type) {
-      case "relationshipsBrowser":
-        return /* @__PURE__ */ jsx(
-          Overlay,
-          {
-            overlayLevel: index,
-            onClose: () => close(overlay.actorRef),
-            children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
-          },
-          overlay.actorRef.sessionId
-        );
-      case "relationshipDetails":
-        return /* @__PURE__ */ jsx(
-          Overlay,
-          {
-            overlayLevel: index,
-            onClose: () => close(overlay.actorRef),
-            children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
-          },
-          overlay.actorRef.sessionId
-        );
-      case "elementDetails":
-        return /* @__PURE__ */ jsx(
-          ElementDetails,
-          {
-            actorRef: overlay.actorRef,
-            onClose: () => close(overlay.actorRef)
-          },
-          overlay.actorRef.sessionId
-        );
-      default:
-        nonexhaustive(overlay);
-    }
-  });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: overlaysReact }) }) }) });
+	const diagram = useDiagram();
+	const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
+	const isMotionReduced = useReducedMotionConfig() ?? false;
+	const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
+	useEffect(() => {
+		const xyflowRendererDom = diagram.getContext().xystore.getState().domNode?.querySelector(".react-flow__renderer");
+		if (!xyflowRendererDom || isMotionReduced) return;
+		const current = animate(xyflowRendererDom, {
+			opacity: isActiveOverlay ? .7 : 1,
+			filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
+			transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
+		}, { duration: isActiveOverlay ? .35 : .17 });
+		let cleanupTm = null;
+		if (!isActiveOverlay) cleanupTm = setTimeout(() => {
+			xyflowRendererDom.style.transform = "";
+			xyflowRendererDom.style.filter = "";
+			cleanupTm = null;
+		}, 450);
+		return () => {
+			if (cleanupTm) clearTimeout(cleanupTm);
+			current.stop();
+		};
+	}, [isActiveOverlay]);
+	const close = (actorRef) => {
+		overlaysActorRef.send({
+			type: "close",
+			actorId: actorRef.id
+		});
+	};
+	const overlaysReact = overlays.map((overlay, index) => {
+		switch (overlay.type) {
+			case "relationshipsBrowser": return /* @__PURE__ */ jsx(Overlay, {
+				overlayLevel: index,
+				onClose: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
+			}, overlay.actorRef.sessionId);
+			case "relationshipDetails": return /* @__PURE__ */ jsx(Overlay, {
+				overlayLevel: index,
+				onClose: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
+			}, overlay.actorRef.sessionId);
+			case "elementDetails": return /* @__PURE__ */ jsx(ElementDetails, {
+				actorRef: overlay.actorRef,
+				onClose: () => close(overlay.actorRef)
+			}, overlay.actorRef.sessionId);
+			default: nonexhaustive(overlay);
+		}
+	});
+	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, {
+		onReset: () => overlaysActorRef.send({ type: "close.all" }),
+		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			children: overlaysReact
+		}) })
+	}) });
 }
-
+//#endregion
 export { Overlays };