@likec4/diagram 1.59.3 → 1.60.0

package/dist/projects-overview/actor.js

@@ -1,266 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { Base } from "../base/Base.js";
-import { MinZoom } from "../base/const.js";
-import { layoutedProjectsViewToXYFlow } from "./layouted-to-xyflow.js";
-import { ProjectsOverviewViewportPersistence } from "./persistence.js";
-import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
-import { clamp } from "remeda";
-import { invariant, nonNullable, nonexhaustive } from "@likec4/core";
-import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
-import { assertEvent, setup } from "xstate";
-import { assign as assign$1, emit } from "xstate/actions";
-//#region src/projects-overview/actor.ts
-var machine = setup({
-	types: {
-		context: {},
-		tags: "",
-		input: {},
-		events: {},
-		emitted: {}
-	},
-	guards: {
-		isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
-		"click: selected node": ({ event }) => {
-			return event.type === "xyflow.click.node" && event.node.selected === true;
-		}
-	}
-});
-var updateView = () => machine.assign(({ event }) => {
-	assertEvent(event, "update.view");
-	const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
-	return {
-		view: event.view,
-		xynodes,
-		xyedges
-	};
-});
-var xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
-	assertEvent(event, "xyflow.applyNodeChanges");
-	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
-});
-var xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
-	assertEvent(event, "xyflow.applyEdgeChanges");
-	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
-});
-var onMouseEnterOrLeave = () => machine.assign(({ context, event }) => {
-	assertEvent(event, [
-		"xyflow.mouse.enter.edge",
-		"xyflow.mouse.leave.edge",
-		"xyflow.mouse.enter.node",
-		"xyflow.mouse.leave.node"
-	]);
-	const isEnter = event.type.startsWith("xyflow.mouse.enter");
-	switch (event.type) {
-		case "xyflow.mouse.enter.edge":
-		case "xyflow.mouse.leave.edge": {
-			const edgeId = event.edge.id;
-			return { xyedges: context.xyedges.map((e) => {
-				if (e.id === edgeId) return Base.setHovered(e, isEnter);
-				return e;
-			}) };
-		}
-		case "xyflow.mouse.enter.node":
-		case "xyflow.mouse.leave.node": {
-			const nodeId = event.node.id;
-			return { xynodes: context.xynodes.map((n) => {
-				if (n.id === nodeId) return Base.setHovered(n, isEnter);
-				return n;
-			}) };
-		}
-		default: nonexhaustive(event);
-	}
-});
-var saveViewport = () => machine.createAction(({ context }) => {
-	const xyflow = context.xyflow;
-	if (xyflow) ProjectsOverviewViewportPersistence.write(xyflow.getViewport());
-});
-var handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
-	if (event.type === "xyflow.click.double") {
-		enqueue(fitDiagram());
-		return;
-	}
-});
-var fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
-	let bounds = context.view.bounds;
-	let duration;
-	if (params) {
-		bounds = params.bounds ?? context.view.bounds;
-		duration = params.duration;
-	} else if (event.type === "xyflow.fitDiagram") {
-		bounds = event.bounds ?? context.view.bounds;
-		duration = event.duration;
-	}
-	duration ??= 450;
-	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-	const maxZoom = Math.max(1, transform[2]);
-	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
-	viewport.x = Math.round(viewport.x);
-	viewport.y = Math.round(viewport.y);
-	const animationProps = duration > 0 ? {
-		duration,
-		interpolate: "smooth"
-	} : void 0;
-	panZoom?.setViewport(viewport, animationProps).catch((err) => {
-		console.error("Error during fitDiagram panZoom setViewport", { err });
-	});
-	ProjectsOverviewViewportPersistence.write(null);
-});
-var restoreViewport = () => machine.enqueueActions(({ context, enqueue }) => {
-	const viewport = ProjectsOverviewViewportPersistence.read();
-	if (viewport) {
-		nonNullable(context.xyflow).setViewport(viewport, { duration: 0 });
-		return;
-	}
-	enqueue(fitDiagram({ duration: 0 }));
-});
-var dispose = () => machine.assign({
-	xyflow: null,
-	xystore: null,
-	initialized: {
-		xyflow: false,
-		xydata: false
-	},
-	xyedges: [],
-	xynodes: []
-});
-var assignNavigateTo = () => machine.assign(({ event, context }) => {
-	let navigateTo;
-	switch (event.type) {
-		case "xyflow.click.node":
-			navigateTo = event.node;
-			break;
-		case "navigate.to":
-			navigateTo = nonNullable(context.xynodes.find((n) => n.id === event.fromNode), `Node ${event.fromNode} not found`);
-			break;
-		default:
-			console.warn(`Unexpected event ${event.type} in assignNavigateTo`);
-			return {};
-	}
-	return { navigateTo };
-});
-var projectOverviewLogic = machine.createMachine({
-	id: "projects-overview",
-	context: ({ input }) => ({
-		...input,
-		initialized: {
-			xydata: false,
-			xyflow: false
-		},
-		xyflow: null,
-		xystore: null,
-		xynodes: [],
-		xyedges: []
-	}),
-	initial: "init",
-	on: { "close": { target: ".closed" } },
-	states: {
-		init: { on: {
-			"update.view": {
-				actions: [updateView(), assign$1(({ context }) => ({ initialized: {
-					...context.initialized,
-					xydata: true
-				} }))],
-				target: "isReady"
-			},
-			"xyflow.init": {
-				actions: [assign$1(({ context, event }) => ({
-					initialized: {
-						...context.initialized,
-						xyflow: true
-					},
-					xyflow: event.xyflow,
-					xystore: event.xystore
-				}))],
-				target: "isReady"
-			}
-		} },
-		isReady: { always: [{
-			guard: "isReady",
-			target: "active"
-		}, { target: "init" }] },
-		active: {
-			tags: "active",
-			entry: [restoreViewport()],
-			on: {
-				"navigate.to": {
-					actions: assignNavigateTo(),
-					target: "navigate"
-				},
-				"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
-				"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() },
-				"xyflow.mouse.*": { actions: onMouseEnterOrLeave() },
-				"xyflow.click.*": [{
-					guard: "click: selected node",
-					actions: assignNavigateTo(),
-					target: "navigate"
-				}, { actions: handleClick() }],
-				"xyflow.fitDiagram": { actions: fitDiagram() },
-				"update.view": { actions: updateView() }
-			}
-		},
-		navigate: {
-			tags: "active",
-			entry: [
-				saveViewport(),
-				assign$1({ xyedges: [] }),
-				({ context: { navigateTo, xyflow, xystore }, self }) => {
-					invariant(xyflow && navigateTo, "Invalid state, xyflow is undefined");
-					const { width, domNode } = nonNullable(xystore).getState();
-					const nextZoom = clamp(Math.min(width * 7 / 9 / navigateTo.data.width), {
-						min: MinZoom,
-						max: 2.5
-					});
-					const next = {
-						x: Math.round(-nextZoom * navigateTo.position.x + (width - nextZoom * navigateTo.data.width) / 2),
-						y: Math.round(-nextZoom * navigateTo.position.y) + 50
-					};
-					const current = xyflow.getViewport();
-					const otherNodes = domNode.querySelectorAll(`.react-flow__node-project:not([data-id="${navigateTo.id}"]) > *`);
-					const otherNodesAnimation = animate(otherNodes, {
-						opacity: 0,
-						scale: .9
-					}, {
-						visualDuration: .25,
-						delay: stagger(.08, { from: "center" })
-					});
-					const v = motionValue(1);
-					const transform = mapValue(v, [1, 0], [`translate(${current.x}px, ${current.y}px) scale(${current.zoom})`, `translate(${next.x}px, ${next.y}px) scale(${nextZoom})`]);
-					const cancelViewportAnimation = styleEffect(domNode.querySelector(".xyflow__viewport"), { transform });
-					const cancelOpacityAnimation = styleEffect(domNode.querySelector(`.react-flow__node-project:is([data-id="${navigateTo.id}"]) > *`), { opacity: v });
-					const targetAnimation = animate(v, 0, {
-						delay: otherNodes.length > 3 ? .25 : 0,
-						type: "spring",
-						stiffness: 350,
-						damping: 40,
-						mass: 1.5,
-						visualDuration: .55
-					});
-					Promise.race([targetAnimation.finished, sleep(750)]).then(() => {
-						cancelViewportAnimation();
-						cancelOpacityAnimation();
-						targetAnimation.stop();
-						otherNodesAnimation.stop();
-						self.send({
-							type: "emit.navigate.to",
-							projectId: navigateTo.data.projectId
-						});
-					});
-				}
-			],
-			on: { "emit.navigate.to": { actions: emit(({ event }) => ({
-				...event,
-				type: "navigate.to"
-			})) } }
-		},
-		closed: {
-			id: "closed",
-			type: "final",
-			entry: dispose()
-		}
-	}
-});
-function sleep(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-//#endregion
-export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/context.d.ts

@@ -1,4 +0,0 @@
-import { ProjectsOverviewActorRef } from './actor';
-import { Provider } from 'react';
-export declare const ProjectsOverviewActorContextProvider: Provider<ProjectsOverviewActorRef | null>;
-export declare function useProjectsOverviewActor(): ProjectsOverviewActorRef;

package/dist/projects-overview/context.js

@@ -1,11 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext } from "react";
-import { nonNullable } from "@likec4/core";
-//#region src/projects-overview/context.ts
-var ProjectsOverviewActorContext = createContext(null);
-var ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
-function useProjectsOverviewActor() {
-	return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
-}
-//#endregion
-export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };

package/dist/projects-overview/custom/edgeTypes.d.ts

@@ -1,3 +0,0 @@
-import { ProjectsOverviewTypes } from '../_types';
-import { FunctionComponent } from 'react';
-export declare const RelationshipEdge: FunctionComponent<ProjectsOverviewTypes.EdgeProps>;

package/dist/projects-overview/custom/edgeTypes.js

@@ -1,24 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { bezierPath } from "../../utils/xyflow.js";
-import { EdgeContainer } from "../../base-primitives/edge/EdgeContainer.js";
-import { EdgeLabel } from "../../base-primitives/edge/EdgeLabel.js";
-import { EdgeLabelContainer } from "../../base-primitives/edge/EdgeLabelContainer.js";
-import { EdgePath } from "../../base-primitives/edge/EdgePath.js";
-import { memoEdge } from "../../base-primitives/memoEdge.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/projects-overview/custom/edgeTypes.tsx
-var RelationshipEdge = memoEdge((edgeProps) => {
-	const path = bezierPath(edgeProps.data.points);
-	return /* @__PURE__ */ jsxs(EdgeContainer, {
-		...edgeProps,
-		children: [/* @__PURE__ */ jsx(EdgePath, {
-			edgeProps,
-			svgPath: path
-		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
-			edgeProps,
-			children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps })
-		})]
-	});
-});
-//#endregion
-export { RelationshipEdge };

package/dist/projects-overview/custom/index.d.ts

@@ -1,2 +0,0 @@
-export { RelationshipEdge } from './edgeTypes';
-export { ProjectNode } from './nodeTypes';

package/dist/projects-overview/custom/nodeTypes.d.ts

@@ -1,2 +0,0 @@
-import { ProjectsOverviewTypes } from '../_types';
-export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react").JSX.Element;

package/dist/projects-overview/custom/nodeTypes.js

@@ -1,41 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { ElementActionButtons } from "../../base-primitives/element/ElementActionButtons.js";
-import { ElementData } from "../../base-primitives/element/ElementData.js";
-import { ElementNodeContainer } from "../../base-primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../base-primitives/element/ElementShape.js";
-import { DefaultHandles } from "../../base-primitives/NodeHandles.js";
-import { useProjectsOverviewActor } from "../context.js";
-import { IconZoomScan } from "@tabler/icons-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallbackRef } from "@mantine/hooks";
-//#region src/projects-overview/custom/nodeTypes.tsx
-function ProjectNode(props) {
-	const actor = useProjectsOverviewActor();
-	const navigateTo = useCallbackRef((e) => {
-		e.stopPropagation();
-		actor.send({
-			type: "navigate.to",
-			fromNode: props.data.id,
-			projectId: props.data.projectId
-		});
-	});
-	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
-		layout: true,
-		nodeProps: props,
-		children: [
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
-			/* @__PURE__ */ jsx(ElementActionButtons, {
-				...props,
-				buttons: [{
-					key: "navigate",
-					icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-					onClick: navigateTo
-				}]
-			}),
-			/* @__PURE__ */ jsx(DefaultHandles, {})
-		]
-	}, props.id);
-}
-//#endregion
-export { ProjectNode };

package/dist/projects-overview/custom/styles.css.d.ts

@@ -1 +0,0 @@
-export declare const emptyNode: string;

package/dist/projects-overview/hooks.d.ts

@@ -1,5 +0,0 @@
-import { ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
-import { ProjectsOverviewSnapshot } from './actor';
-export declare function useProjectsOverviewState<T>(selector: (state: ProjectsOverviewSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
-export declare function useProjectsOverviewXYFlow(): ProjectsOverviewXYFLowInstance;
-export declare function useProjectsOverviewXYStoreApi(): ProjectsOverviewXYStoreApi;

package/dist/projects-overview/hooks.js

@@ -1,15 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useProjectsOverviewActor } from "./context.js";
-import { useStoreApi } from "@xyflow/react";
-import { shallowEqual } from "fast-equals";
-import { useSelector } from "@xstate/react";
-//#region src/projects-overview/hooks.ts
-function useProjectsOverviewState(selector, compare = shallowEqual) {
-	const actor = useProjectsOverviewActor();
-	return useSelector(actor, selector, compare);
-}
-function useProjectsOverviewXYStoreApi() {
-	return useStoreApi();
-}
-//#endregion
-export { useProjectsOverviewState, useProjectsOverviewXYStoreApi };

package/dist/projects-overview/index.d.ts

@@ -1 +0,0 @@
-export { ProjectsOverview, type ProjectsOverviewProps, } from './ProjectsOverview';

package/dist/projects-overview/layouted-to-xyflow.d.ts

@@ -1,6 +0,0 @@
-import { LayoutedProjectsView } from '@likec4/core/compute-view';
-import { ProjectsOverviewTypes } from './_types';
-export declare function layoutedProjectsViewToXYFlow(view: LayoutedProjectsView): {
-    xynodes: ProjectsOverviewTypes.Node[];
-    xyedges: ProjectsOverviewTypes.Edge[];
-};

package/dist/projects-overview/layouted-to-xyflow.js

@@ -1,53 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { ZIndexes } from "../base/const.js";
-import { map } from "remeda";
-//#region src/projects-overview/layouted-to-xyflow.ts
-function layoutedProjectsViewToXYFlow(view) {
-	return {
-		xynodes: map(view.nodes, projectNodeToXY),
-		xyedges: map(view.edges, projectEdgeToXY)
-	};
-}
-function projectNodeToXY({ id, x, y, width, height, ...node }) {
-	return {
-		id,
-		position: {
-			x,
-			y
-		},
-		type: "project",
-		initialWidth: width,
-		initialHeight: height,
-		draggable: false,
-		deletable: false,
-		zIndex: ZIndexes.Element,
-		style: {
-			width,
-			height
-		},
-		data: {
-			id,
-			width,
-			height,
-			...node
-		}
-	};
-}
-function projectEdgeToXY({ id, source, target, ...edge }) {
-	return {
-		id,
-		source,
-		target,
-		type: "relationship",
-		zIndex: ZIndexes.Edge,
-		deletable: false,
-		data: {
-			id,
-			technology: null,
-			labelBBox: null,
-			...edge
-		}
-	};
-}
-//#endregion
-export { layoutedProjectsViewToXYFlow };

package/dist/projects-overview/panel/ProjectsOverviewPanel.d.ts

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

package/dist/projects-overview/panel/ProjectsOverviewPanel.js

@@ -1,9 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { NavigationPanel } from "../../components/NavigationPanel.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/projects-overview/panel/ProjectsOverviewPanel.tsx
-var ProjectsOverviewPanel = () => {
-	return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [/* @__PURE__ */ jsx(NavigationPanel.Logo, {}), /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })] }) });
-};
-//#endregion
-export { ProjectsOverviewPanel };

package/dist/projects-overview/persistence.d.ts

@@ -1,5 +0,0 @@
-import { Viewport } from '@xyflow/react';
-export declare const ProjectsOverviewViewportPersistence: {
-    read(): Viewport | null;
-    write(viewport: Viewport | null): void;
-};

package/dist/projects-overview/persistence.js

@@ -1,24 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-//#region src/projects-overview/persistence.ts
-var key = `likec4:projects-overview:lastViewport`;
-var ProjectsOverviewViewportPersistence = {
-	read() {
-		try {
-			let fromStorage = sessionStorage.getItem(key);
-			if (fromStorage) return JSON.parse(fromStorage);
-			return null;
-		} catch (e) {
-			console.error(`Error reading fromStorage ${key}:`, e);
-			return null;
-		}
-	},
-	write(viewport) {
-		if (!viewport) {
-			sessionStorage.removeItem(key);
-			return;
-		}
-		sessionStorage.setItem(key, JSON.stringify(viewport));
-	}
-};
-//#endregion
-export { ProjectsOverviewViewportPersistence };

package/dist/search/Search.d.ts

@@ -1,13 +0,0 @@
-import { SearchActorRef } from './searchActor';
-import { MemoExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
-export declare const dialogCss: string;
-export declare const bodyCss: string;
-export declare const scrollAreaCss: string;
-export declare const Search: MemoExoticComponent<({ searchActorRef }: {
-    searchActorRef: SearchActorRef;
-}) => import("react").JSX.Element>;
-/**
- * The shared search panel content used by both diagram and overview search.
- * Must be rendered inside a SearchContext.Provider.
- */
-export declare const SearchPanelContent: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>;