@likec4/diagram 1.59.4 → 1.60.0

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

package/dist/search/Search.js

@@ -1,199 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../hooks/safeContext.js";
-import { Overlay } from "../overlays/overlay/Overlay.js";
-import { useSearchContext } from "./SearchContext.js";
-import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.js";
-import { ViewsColumn } from "./components/ViewsColum.js";
-import { ElementsColumn } from "./components/ElementsColumn.js";
-import { PickView } from "./components/PickView.js";
-import { SearchByTags } from "./components/SearchByTags.js";
-import { LikeC4SearchInput } from "./components/SearchInput.js";
-import { XStateSearchAdapter } from "./XStateSearchAdapter.js";
-import { css } from "@likec4/styles/css";
-import { forwardRef, memo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTimeoutEffect } from "@react-hookz/web";
-import { isTruthy } from "remeda";
-import { Grid, GridCol, Group, ScrollArea, Title } from "@mantine/core";
-import { AnimatePresence, LayoutGroup } from "motion/react";
-import { useSelector } from "@xstate/react";
-import { useHotkeys, useMergedRef } from "@mantine/hooks";
-import { Box as Box$1, VStack } from "@likec4/styles/jsx";
-//#region src/search/Search.tsx
-var dialogCss = css({
-	backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
-	_light: { backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]` },
-	backdropFilter: "auto",
-	backdropBlur: "var(--_blur, 10px)"
-});
-var bodyCss = css({
-	width: "100%",
-	height: "100%",
-	maxHeight: "100vh",
-	overflow: "hidden",
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "stretch",
-	gap: "sm",
-	paddingTop: "[20px]",
-	paddingLeft: "md",
-	paddingRight: "md",
-	paddingBottom: "sm",
-	background: "transparent"
-});
-var scrollAreaCss = css({
-	height: ["100%", "100cqh"],
-	"& .mantine-ScrollArea-viewport": {
-		minHeight: "100%",
-		"& > div": {
-			minHeight: "100%",
-			height: "100%"
-		}
-	}
-});
-var selectIsOpened = (s) => {
-	try {
-		return s.status === "active" && (s.value === "opened" || s.value === "pickView");
-	} catch (e) {
-		console.error(e);
-		return false;
-	}
-};
-var Search = memo(({ searchActorRef }) => {
-	const diagram = useDiagram();
-	const isOpened = useSelector(searchActorRef, selectIsOpened);
-	const close = () => {
-		diagram.searchActor().send({ type: "close" });
-	};
-	const open = (event) => {
-		event.stopPropagation();
-		diagram.searchActor().send({ type: "open" });
-	};
-	useHotkeys(isOpened ? [] : [[
-		"mod+k",
-		open,
-		{ preventDefault: true }
-	], [
-		"mod+f",
-		open,
-		{ preventDefault: true }
-	]]);
-	return /* @__PURE__ */ jsx(AnimatePresence, {
-		onExitComplete: () => {
-			searchActorRef.send({ type: "animation.presence.end" });
-		},
-		children: isOpened && /* @__PURE__ */ jsx(Overlay, {
-			fullscreen: true,
-			withBackdrop: false,
-			backdrop: { opacity: .9 },
-			classes: {
-				dialog: dialogCss,
-				body: bodyCss
-			},
-			openDelay: 100,
-			onClose: close,
-			"data-likec4-search": "true",
-			children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
-				searchActorRef,
-				children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
-			})
-		})
-	});
-});
-Search.displayName = "Search";
-function SearchOverlayBody({ searchActorRef }) {
-	const ref = useRef(null);
-	useTimeoutEffect(() => {
-		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
-	}, 150);
-	return /* @__PURE__ */ jsx(SearchPanelContent, { ref });
-}
-/**
-* The shared search panel content used by both diagram and overview search.
-* Must be rendered inside a SearchContext.Provider.
-*/
-var SearchPanelContent = forwardRef((_, ref) => {
-	const contentRef = useRef(null);
-	const { pickViewFor } = useSearchContext();
-	return /* @__PURE__ */ jsxs(Box$1, {
-		ref: useMergedRef(ref, contentRef),
-		display: "contents",
-		children: [
-			/* @__PURE__ */ jsx(Group, {
-				className: "group",
-				wrap: "nowrap",
-				onClick: (e) => {
-					e.stopPropagation();
-					moveFocusToSearchInput(contentRef.current);
-				},
-				children: /* @__PURE__ */ jsxs(VStack, {
-					flex: "1",
-					px: "sm",
-					children: [/* @__PURE__ */ jsx(LikeC4SearchInput, {}), /* @__PURE__ */ jsx(SearchByTags, {})]
-				})
-			}),
-			/* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridCol, {
-				span: 6,
-				children: /* @__PURE__ */ jsx(Title, {
-					component: "div",
-					order: 6,
-					c: "dimmed",
-					pl: "md",
-					children: "Elements"
-				})
-			}), /* @__PURE__ */ jsx(GridCol, {
-				span: 6,
-				children: /* @__PURE__ */ jsx(Title, {
-					component: "div",
-					order: 6,
-					c: "dimmed",
-					pl: "sm",
-					children: "Views"
-				})
-			})] }),
-			/* @__PURE__ */ jsxs(Grid, {
-				className: css({
-					containerName: "likec4-search-elements",
-					containerType: "size",
-					overflow: "hidden",
-					flexGrow: 1
-				}),
-				children: [/* @__PURE__ */ jsx(GridCol, {
-					span: 6,
-					children: /* @__PURE__ */ jsx(ScrollArea, {
-						type: "scroll",
-						className: scrollAreaCss,
-						pr: "xs",
-						scrollbars: "y",
-						children: /* @__PURE__ */ jsx(LayoutGroup, {
-							id: "likec4-search-elements",
-							children: /* @__PURE__ */ jsx(AnimatePresence, {
-								initial: false,
-								children: /* @__PURE__ */ jsx(ElementsColumn, {})
-							})
-						})
-					})
-				}), /* @__PURE__ */ jsx(GridCol, {
-					span: 6,
-					children: /* @__PURE__ */ jsx(ScrollArea, {
-						type: "scroll",
-						className: scrollAreaCss,
-						pr: "xs",
-						scrollbars: "y",
-						children: /* @__PURE__ */ jsx(LayoutGroup, {
-							id: "likec4-search-views",
-							children: /* @__PURE__ */ jsx(AnimatePresence, {
-								initial: false,
-								children: /* @__PURE__ */ jsx(ViewsColumn, {})
-							})
-						})
-					})
-				})]
-			}),
-			pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
-		]
-	});
-});
-SearchPanelContent.displayName = "SearchPanelContent";
-//#endregion
-export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/SearchContext.d.ts

@@ -1,21 +0,0 @@
-import { Fqn, ViewId } from '@likec4/core/types';
-import { Context } from 'react';
-export interface SearchContextValue {
-    searchValue: string;
-    setSearchValue: (value: string) => void;
-    normalizedSearch: string;
-    navigateTo: (viewId: ViewId, focusOnElement?: Fqn) => void;
-    openPickView: (elementFqn: Fqn) => void;
-    closePickView: () => void;
-    pickViewFor: Fqn | null;
-    close: () => void;
-    currentViewId: string | null;
-    openedWithSearch: string | null;
-}
-export declare const SearchContext: Context<SearchContextValue | null>;
-export declare function useSearchContext(): SearchContextValue;
-/**
- * Normalize a raw search string for comparison.
- * Extracted as a pure function so both XState and standalone adapters can reuse it.
- */
-export declare function normalizeSearch(value: string): string;

package/dist/search/SearchContext.js

@@ -1,21 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext } from "react";
-//#region src/search/SearchContext.tsx
-var SearchContext = createContext(null);
-function useSearchContext() {
-	const ctx = useContext(SearchContext);
-	if (!ctx) throw new Error("useSearchContext must be used within a SearchContext.Provider");
-	return ctx;
-}
-/**
-* Normalize a raw search string for comparison.
-* Extracted as a pure function so both XState and standalone adapters can reuse it.
-*/
-function normalizeSearch(value) {
-	if (value === "") return value;
-	const v = value.trim().toLowerCase();
-	if (v.startsWith("#") && v.length <= 2) return "";
-	return v.length > 1 ? v : "";
-}
-//#endregion
-export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { SearchActorRef } from './searchActor';
-export declare function XStateSearchAdapter({ searchActorRef, children, }: PropsWithChildren<{
-    searchActorRef: SearchActorRef;
-}>): import("react").JSX.Element;

package/dist/search/XStateSearchAdapter.js

@@ -1,70 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../hooks/useCallbackRef.js";
-import { useCurrentViewId } from "../hooks/useCurrentView.js";
-import { SearchContext, normalizeSearch } from "./SearchContext.js";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { useSelector } from "@xstate/react";
-//#region src/search/XStateSearchAdapter.tsx
-var selectSearchValue = (s) => s.context.searchValue;
-var selectPickViewFor = (s) => s.context.pickViewFor;
-var selectOpenedWithSearch = (s) => s.context.openedWithSearch;
-function XStateSearchAdapter({ searchActorRef, children }) {
-	const searchValue = useSelector(searchActorRef, selectSearchValue);
-	const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
-	const openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch);
-	const currentViewId = useCurrentViewId();
-	const setSearchValue = useCallbackRef((search) => {
-		searchActorRef.send({
-			type: "change.search",
-			search
-		});
-	});
-	const navigateTo = useCallbackRef((viewId, focusOnElement) => {
-		searchActorRef.send({
-			type: "navigate.to",
-			viewId,
-			focusOnElement
-		});
-	});
-	const openPickView = useCallbackRef((elementFqn) => {
-		searchActorRef.send({
-			type: "pickview.open",
-			elementFqn
-		});
-	});
-	const closePickView = useCallbackRef(() => {
-		searchActorRef.send({ type: "pickview.close" });
-	});
-	const close = useCallbackRef(() => {
-		searchActorRef.send({ type: "close" });
-	});
-	const value = useMemo(() => ({
-		searchValue,
-		setSearchValue,
-		normalizedSearch: normalizeSearch(searchValue),
-		navigateTo,
-		openPickView,
-		closePickView,
-		pickViewFor,
-		close,
-		currentViewId,
-		openedWithSearch
-	}), [
-		searchValue,
-		pickViewFor,
-		currentViewId,
-		openedWithSearch,
-		setSearchValue,
-		navigateTo,
-		openPickView,
-		closePickView,
-		close
-	]);
-	return /* @__PURE__ */ jsx(SearchContext.Provider, {
-		value,
-		children
-	});
-}
-//#endregion
-export { XStateSearchAdapter };

package/dist/search/components/ElementsColumn.css.d.ts

@@ -1,10 +0,0 @@
-export { focusable } from './_shared.css';
-export declare const treeNode: string;
-export declare const treeRoot: string;
-export declare const treeLabel: string;
-export declare const treeSubtree: string;
-export declare const elementExpandIcon: string;
-export declare const elementTitleAndId: string;
-export declare const elementId: string;
-export declare const elementIcon: string;
-export declare const elementViewsCount: string;

package/dist/search/components/ElementsColumn.css.js

@@ -1,52 +0,0 @@
-import "./_shared.css.js";
-import { css } from "@likec4/styles/css";
-import { container } from "@likec4/styles/patterns";
-//#region src/search/components/ElementsColumn.css.ts
-var whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
-var treeNode = css({
-	outline: "none",
-	marginBottom: "2"
-});
-var treeRoot = css(container.raw({ containerName: "likec4-tree" }), {
-	containerType: "inline-size",
-	px: "4",
-	height: "100%"
-});
-var treeLabel = css({
-	display: "flex",
-	alignItems: "baseline",
-	outline: "none !important",
-	gap: "1"
-});
-var treeSubtree = css({ marginTop: "2" });
-var elementExpandIcon = css({ color: "text.dimmed" });
-var elementTitleAndId = css({ [whenContainerIsNarrow]: {
-	flexDirection: "column-reverse",
-	alignItems: "flex-start",
-	gap: "0.5"
-} });
-var elementId = css({
-	fontSize: "xxs",
-	lineHeight: "sm",
-	display: "block",
-	fontWeight: "medium",
-	whiteSpace: "nowrap",
-	padding: "[1px 5px]",
-	borderRadius: "sm",
-	background: `mantine.dark[9]/30`,
-	_light: { background: `mantine.gray[3]/20` }
-});
-var elementIcon = css({
-	["--likec4-icon-size"]: "24px",
-	[whenContainerIsNarrow]: { ["--likec4-icon-size"]: "18px" }
-});
-var elementViewsCount = css({
-	flex: "[0]",
-	fontSize: "xxs",
-	fontWeight: "medium",
-	whiteSpace: "nowrap",
-	lineHeight: "[1.1]",
-	[whenContainerIsNarrow]: { display: "none" }
-});
-//#endregion
-export { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree };

package/dist/search/components/ElementsColumn.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const ElementsColumn: MemoExoticComponent<() => import("react").JSX.Element>;