@likec4/diagram 1.55.1 → 1.57.0

package/dist/likec4diagram/relationship-popover/actor.js

@@ -1,155 +1,116 @@
-import { setup, assign, assertEvent } from 'xstate';
-
-const _actorLogic = setup({
-  types: {
-    context: {},
-    events: {},
-    tags: "opened"
-  },
-  delays: {
-    "open timeout": ({ context }) => context.openTimeout,
-    "close timeout": 600,
-    "long idle": 1500
-  },
-  actions: {
-    "update edgeId": assign(({ context, event }) => {
-      assertEvent(event, ["xyedge.select", "xyedge.mouseEnter"]);
-      return {
-        edgeId: event.edgeId,
-        edgeSelected: context.edgeSelected || event.type === "xyedge.select"
-      };
-    }),
-    "increase open timeout": assign(() => ({
-      openTimeout: 800
-    })),
-    "decrease open timeout": assign(() => ({
-      openTimeout: 300
-    })),
-    "reset edgeId": assign({
-      edgeId: null,
-      edgeSelected: false
-    })
-  },
-  guards: {
-    "edge was selected": ({ context }) => context.edgeSelected,
-    "edge was hovered": ({ context }) => !context.edgeSelected
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { assertEvent, assign, setup } from "xstate";
+var RelationshipPopoverActorLogic = setup({
+	types: {
+		context: {},
+		events: {},
+		tags: "opened"
+	},
+	delays: {
+		"open timeout": ({ context }) => context.openTimeout,
+		"close timeout": 600,
+		"long idle": 1500
+	},
+	actions: {
+		"update edgeId": assign(({ context, event }) => {
+			assertEvent(event, ["xyedge.select", "xyedge.mouseEnter"]);
+			return {
+				edgeId: event.edgeId,
+				edgeSelected: context.edgeSelected || event.type === "xyedge.select"
+			};
+		}),
+		"increase open timeout": assign(() => ({ openTimeout: 800 })),
+		"decrease open timeout": assign(() => ({ openTimeout: 300 })),
+		"reset edgeId": assign({
+			edgeId: null,
+			edgeSelected: false
+		})
+	},
+	guards: {
+		"edge was selected": ({ context }) => context.edgeSelected,
+		"edge was hovered": ({ context }) => !context.edgeSelected
+	}
 }).createMachine({
-  id: "breadcrumbs",
-  context: () => ({
-    edgeId: null,
-    edgeSelected: false,
-    openTimeout: 800
-  }),
-  initial: "idle",
-  on: {
-    "close": {
-      target: "#idle",
-      actions: [
-        "reset edgeId",
-        "increase open timeout"
-      ]
-    }
-  },
-  states: {
-    idle: {
-      id: "idle",
-      on: {
-        "xyedge.mouseEnter": {
-          target: "opening",
-          actions: "update edgeId"
-        },
-        "xyedge.select": {
-          target: "active",
-          actions: "update edgeId"
-        }
-      },
-      after: {
-        "long idle": {
-          actions: "increase open timeout"
-        }
-      }
-    },
-    opening: {
-      on: {
-        "xyedge.mouseLeave": {
-          target: "idle"
-        },
-        "xyedge.select": {
-          target: "active",
-          actions: "update edgeId"
-        }
-      },
-      after: {
-        "open timeout": {
-          actions: "decrease open timeout",
-          target: "active"
-        }
-      }
-    },
-    active: {
-      tags: ["opened"],
-      initial: "opened",
-      exit: "reset edgeId",
-      on: {
-        "xyedge.unselect": {
-          target: "idle",
-          actions: "increase open timeout"
-        },
-        "xyedge.select": {
-          actions: "update edgeId"
-        }
-      },
-      states: {
-        opened: {
-          on: {
-            "dropdown.mouseEnter": {
-              target: "hovered"
-            },
-            "xyedge.mouseLeave": {
-              guard: "edge was hovered",
-              target: "closing"
-            }
-          }
-        },
-        hovered: {
-          on: {
-            "dropdown.mouseLeave": [
-              {
-                guard: "edge was selected",
-                target: "opened"
-              },
-              {
-                target: "closing"
-              }
-            ]
-          }
-        },
-        closing: {
-          on: {
-            "xyedge.mouseEnter": {
-              guard: "edge was hovered",
-              target: "opened",
-              actions: "update edgeId"
-            },
-            "xyedge.select": {
-              target: "opened",
-              actions: "update edgeId"
-            },
-            "dropdown.mouseEnter": {
-              target: "hovered"
-            }
-          },
-          after: {
-            "close timeout": {
-              target: "#idle"
-            }
-          }
-        }
-      }
-    }
-  }
+	id: "breadcrumbs",
+	context: () => ({
+		edgeId: null,
+		edgeSelected: false,
+		openTimeout: 800
+	}),
+	initial: "idle",
+	on: { "close": {
+		target: "#idle",
+		actions: ["reset edgeId", "increase open timeout"]
+	} },
+	states: {
+		idle: {
+			id: "idle",
+			on: {
+				"xyedge.mouseEnter": {
+					target: "opening",
+					actions: "update edgeId"
+				},
+				"xyedge.select": {
+					target: "active",
+					actions: "update edgeId"
+				}
+			},
+			after: { "long idle": { actions: "increase open timeout" } }
+		},
+		opening: {
+			on: {
+				"xyedge.mouseLeave": { target: "idle" },
+				"xyedge.select": {
+					target: "active",
+					actions: "update edgeId"
+				}
+			},
+			after: { "open timeout": {
+				actions: "decrease open timeout",
+				target: "active"
+			} }
+		},
+		active: {
+			tags: ["opened"],
+			initial: "opened",
+			exit: "reset edgeId",
+			on: {
+				"xyedge.unselect": {
+					target: "idle",
+					actions: "increase open timeout"
+				},
+				"xyedge.select": { actions: "update edgeId" }
+			},
+			states: {
+				opened: { on: {
+					"dropdown.mouseEnter": { target: "hovered" },
+					"xyedge.mouseLeave": {
+						guard: "edge was hovered",
+						target: "closing"
+					}
+				} },
+				hovered: { on: { "dropdown.mouseLeave": [{
+					guard: "edge was selected",
+					target: "opened"
+				}, { target: "closing" }] } },
+				closing: {
+					on: {
+						"xyedge.mouseEnter": {
+							guard: "edge was hovered",
+							target: "opened",
+							actions: "update edgeId"
+						},
+						"xyedge.select": {
+							target: "opened",
+							actions: "update edgeId"
+						},
+						"dropdown.mouseEnter": { target: "hovered" }
+					},
+					after: { "close timeout": { target: "#idle" } }
+				}
+			}
+		}
+	}
 });
-const RelationshipPopoverActorLogic = _actorLogic;
-
+//#endregion
 export { RelationshipPopoverActorLogic };

package/dist/likec4diagram/relationship-popover/components.js

@@ -1,45 +1,41 @@
-import { jsx } from 'react/jsx-runtime';
-import { styled } from '@likec4/styles/jsx';
-import { txt } from '@likec4/styles/patterns';
-
-const Endpoint = ({ children, likec4color }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-likec4-color": likec4color,
-      className: txt({
-        size: "xxs",
-        fontWeight: "medium",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        maxWidth: "160px",
-        paddingX: "1",
-        paddingY: "0.5",
-        rounded: "xs",
-        background: {
-          _light: "var(--likec4-palette-fill)/90",
-          _dark: "var(--likec4-palette-fill)/60"
-        },
-        color: {
-          _light: "var(--likec4-palette-hiContrast)",
-          _dark: "var(--likec4-palette-loContrast)"
-        }
-      }),
-      children
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@likec4/styles/jsx";
+import { txt } from "@likec4/styles/patterns";
+//#region src/likec4diagram/relationship-popover/components.tsx
+var Endpoint = ({ children, likec4color }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-likec4-color": likec4color,
+		className: txt({
+			size: "xxs",
+			fontWeight: "medium",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			maxWidth: "160px",
+			paddingX: "1",
+			paddingY: "0.5",
+			rounded: "xs",
+			background: {
+				_light: "var(--likec4-palette-fill)/90",
+				_dark: "var(--likec4-palette-fill)/60"
+			},
+			color: {
+				_light: "var(--likec4-palette-hiContrast)",
+				_dark: "var(--likec4-palette-loContrast)"
+			}
+		}),
+		children
+	});
 };
-const RelationshipTitle = styled("div", {
-  base: {
-    whiteSpaceCollapse: "preserve-breaks",
-    fontSize: "sm",
-    lineHeight: "sm",
-    userSelect: "all",
-    overflowWrap: "anywhere",
-    wordBreak: "break-word",
-    minWidth: 0
-  }
-});
-
+var RelationshipTitle = styled("div", { base: {
+	whiteSpaceCollapse: "preserve-breaks",
+	fontSize: "sm",
+	lineHeight: "sm",
+	userSelect: "all",
+	overflowWrap: "anywhere",
+	wordBreak: "break-word",
+	minWidth: 0
+} });
+//#endregion
 export { Endpoint, RelationshipTitle };

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,142 +1,141 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useActorRef } from '@xstate/react';
-import { useStoreApi } from '@xyflow/react';
-import { useRef, useState, useEffect, memo } from 'react';
-import { isNullish } from 'remeda';
-import { ErrorBoundary } from '../../components/ErrorFallback.js';
-import { useDiagramEventHandlersRef } from '../../context/DiagramEventHandlers.js';
-import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import { useEditorActorLogic } from '../../editor/useEditorActorLogic.js';
-import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from '../../hooks/safeContext.js';
-import { useDiagramSnapshot, useOnDiagramEvent, selectDiagramActorContext } from '../../hooks/useDiagram.js';
-import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
-import { makeDiagramApi } from './diagram-api.js';
-import { diagramMachine } from './machine.js';
-import { DiagramToggledFeaturesPersistence } from './persistence.js';
-
-function DiagramActorProvider({
-  id,
-  view,
-  zoomable,
-  pannable,
-  nodesDraggable,
-  nodesSelectable,
-  fitViewPadding,
-  where = null,
-  children,
-  dynamicViewVariant: _defaultVariant
-}) {
-  const xystore = useStoreApi();
-  const editorActor = useEditorActorLogic();
-  const features = useEnabledFeatures();
-  const actor = useActorRef(
-    diagramMachine.provide({
-      actors: {
-        editorActor
-      }
-    }),
-    {
-      id: `diagram-${id}`,
-      systemId: "diagram",
-      // ...inspector,
-      input: {
-        xystore,
-        view,
-        zoomable,
-        pannable,
-        fitViewPadding,
-        nodesDraggable,
-        nodesSelectable,
-        where,
-        features,
-        dynamicViewVariant: _defaultVariant
-      }
-    }
-  );
-  const actorRef = useRef(actor);
-  if (actorRef.current !== actor) {
-    console.warn("DiagramMachine actor instance changed", {
-      previous: actorRef.current.getSnapshot().context,
-      current: actor.getSnapshot().context
-    });
-    actorRef.current = actor;
-  }
-  const [api, setApi] = useState(() => makeDiagramApi(actorRef));
-  useEffect(() => {
-    setApi((api2) => {
-      if (api2.ref === actorRef) {
-        return api2;
-      }
-      console.error(
-        "DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor"
-      );
-      return makeDiagramApi(actorRef);
-    });
-  }, [actorRef]);
-  useEffect(() => {
-    actor.send({ type: "update.features", features });
-  }, [actor, features]);
-  useUpdateEffect(
-    () => actor.send({
-      type: "update.inputs",
-      inputs: { zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
-    }),
-    [actor, zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable]
-  );
-  useUpdateEffect(() => {
-    if (!_defaultVariant) return;
-    actor.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
-  }, [actor, _defaultVariant]);
-  useEffect(
-    () => actor.send({ type: "update.view", view, source: "external" }),
-    [actor, view]
-  );
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actor, children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ToggledFeatures, { children }) }),
-    /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})
-  ] }) });
+import "../../_virtual/_rolldown/runtime.js";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
+import { useDiagramEventHandlersRef } from "../../context/DiagramEventHandlers.js";
+import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from "../../hooks/safeContext.js";
+import { selectDiagramActorContext, useDiagramSnapshot, useOnDiagramEvent } from "../../hooks/useDiagram.js";
+import { ErrorBoundary } from "../../components/ErrorFallback.js";
+import { useEditorActorLogic } from "../../editor/useEditorActorLogic.js";
+import { makeDiagramApi } from "./diagram-api.js";
+import { DiagramToggledFeaturesPersistence } from "./persistence.js";
+import { diagramMachine } from "./machine.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStoreApi } from "@xyflow/react";
+import { isNullish } from "remeda";
+import { useActorRef } from "@xstate/react";
+//#region src/likec4diagram/state/DiagramActorProvider.tsx
+function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where = null, children, dynamicViewVariant: _defaultVariant }) {
+	const xystore = useStoreApi();
+	const editorActor = useEditorActorLogic();
+	const features = useEnabledFeatures();
+	const actor = useActorRef(diagramMachine.provide({ actors: { editorActor } }), {
+		id: `diagram-${id}`,
+		systemId: "diagram",
+		input: {
+			xystore,
+			view,
+			zoomable,
+			pannable,
+			fitViewPadding,
+			nodesDraggable,
+			nodesSelectable,
+			where,
+			features,
+			dynamicViewVariant: _defaultVariant
+		}
+	});
+	const actorRef = useRef(actor);
+	if (actorRef.current !== actor) {
+		console.warn("DiagramMachine actor instance changed", {
+			previous: actorRef.current.getSnapshot().context,
+			current: actor.getSnapshot().context
+		});
+		actorRef.current = actor;
+	}
+	const [api, setApi] = useState(() => makeDiagramApi(actorRef));
+	useEffect(() => {
+		setApi((api) => {
+			if (api.ref === actorRef) return api;
+			console.error("DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor");
+			return makeDiagramApi(actorRef);
+		});
+	}, [actorRef]);
+	useEffect(() => {
+		actor.send({
+			type: "update.features",
+			features
+		});
+	}, [actor, features]);
+	useUpdateEffect(() => actor.send({
+		type: "update.inputs",
+		inputs: {
+			zoomable,
+			where,
+			pannable,
+			fitViewPadding,
+			nodesDraggable,
+			nodesSelectable
+		}
+	}), [
+		actor,
+		zoomable,
+		where,
+		pannable,
+		fitViewPadding,
+		nodesDraggable,
+		nodesSelectable
+	]);
+	useUpdateEffect(() => {
+		if (!_defaultVariant) return;
+		actor.send({
+			type: "switch.dynamicViewVariant",
+			variant: _defaultVariant
+		});
+	}, [actor, _defaultVariant]);
+	useEffect(() => actor.send({
+		type: "update.view",
+		view,
+		source: "external"
+	}), [actor, view]);
+	return /* @__PURE__ */ jsx(DiagramActorContextProvider, {
+		value: actor,
+		children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, {
+			value: api,
+			children: [/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ToggledFeatures, { children }) }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
+		})
+	});
 }
-const selectToggledFeatures = selectDiagramActorContext((context) => {
-  let toggledFeatures = context.toggledFeatures;
-  const hasDrifts = context.view.drifts != null && context.view.drifts.length > 0;
-  const enableCompareWithLatest = hasDrifts && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
-  const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
-  if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) {
-    toggledFeatures = {
-      ...toggledFeatures,
-      enableCompareWithLatest,
-      enableReadOnly
-    };
-  }
-  return toggledFeatures;
+var selectToggledFeatures = selectDiagramActorContext((context) => {
+	let toggledFeatures = context.toggledFeatures;
+	const enableCompareWithLatest = context.view.drifts != null && context.view.drifts.length > 0 && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
+	const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
+	if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) toggledFeatures = {
+		...toggledFeatures,
+		enableCompareWithLatest,
+		enableReadOnly
+	};
+	return toggledFeatures;
 });
 function ToggledFeatures({ children }) {
-  const toggledFeatures = useDiagramSnapshot(selectToggledFeatures);
-  useUpdateEffect(() => {
-    DiagramToggledFeaturesPersistence.write(toggledFeatures);
-  }, [toggledFeatures]);
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
+	const toggledFeatures = useDiagramSnapshot(selectToggledFeatures);
+	useUpdateEffect(() => {
+		DiagramToggledFeaturesPersistence.write(toggledFeatures);
+	}, [toggledFeatures]);
+	return /* @__PURE__ */ jsx(DiagramFeatures, {
+		overrides: toggledFeatures,
+		children
+	});
 }
-const PropagateDiagramActorEvents = memo(() => {
-  const diagram = useDiagram();
-  const handlers = useDiagramEventHandlersRef();
-  useOnDiagramEvent("openSource", ({ params }) => handlers.current.onOpenSource?.(params));
-  useOnDiagramEvent("navigateTo", ({ viewId }) => handlers.current.onNavigateTo?.(viewId));
-  useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
-    handlers.current.onLayoutTypeChange?.(layoutType);
-  });
-  useOnDiagramEvent(
-    "initialized",
-    ({ instance: xyflow }) => {
-      try {
-        handlers.current.onInitialized?.({ diagram, xyflow });
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    { once: true }
-  );
-  return null;
+var PropagateDiagramActorEvents = memo(() => {
+	const diagram = useDiagram();
+	const handlers = useDiagramEventHandlersRef();
+	useOnDiagramEvent("openSource", ({ params }) => handlers.current.onOpenSource?.(params));
+	useOnDiagramEvent("navigateTo", ({ viewId }) => handlers.current.onNavigateTo?.(viewId));
+	useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
+		handlers.current.onLayoutTypeChange?.(layoutType);
+	});
+	useOnDiagramEvent("initialized", ({ instance: xyflow }) => {
+		try {
+			handlers.current.onInitialized?.({
+				diagram,
+				xyflow
+			});
+		} catch (error) {
+			console.error(error);
+		}
+	}, { once: true });
+	return null;
 });
-
+//#endregion
 export { DiagramActorProvider };