@likec4/diagram 1.55.1 → 1.56.0

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 };

package/dist/overlays/element-details/ElementDetails.js

@@ -1,31 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { ElementDetailsActorContext } from './actorContext.js';
-import { ElementDetailsCard } from './ElementDetailsCard.js';
-
-const selector = (s) => ({
-  viewId: s.context.currentView.id,
-  fromNode: s.context.initiatedFrom.node,
-  rectFromNode: s.context.initiatedFrom.clientRect,
-  fqn: s.context.subject
+import "../../_virtual/_rolldown/runtime.js";
+import { ElementDetailsActorContext } from "./actorContext.js";
+import { ElementDetailsCard } from "./ElementDetailsCard.js";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+//#region src/overlays/element-details/ElementDetails.tsx
+var selector = (s) => ({
+	viewId: s.context.currentView.id,
+	fromNode: s.context.initiatedFrom.node,
+	rectFromNode: s.context.initiatedFrom.clientRect,
+	fqn: s.context.subject
 });
-function ElementDetails({
-  actorRef,
-  onClose
-}) {
-  const props = useSelector(
-    actorRef,
-    selector,
-    shallowEqual
-  );
-  return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(
-    ElementDetailsCard,
-    {
-      onClose,
-      ...props
-    }
-  ) });
+function ElementDetails({ actorRef, onClose }) {
+	const props = useSelector(actorRef, selector, shallowEqual);
+	return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsx(ElementDetailsCard, {
+			onClose,
+			...props
+		})
+	});
 }
-
+//#endregion
 export { ElementDetails };