@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,528 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { IconRenderer } from "../../context/IconRenderer.js";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
-import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { DiagramFeatures, IfEnabled } from "../../context/DiagramFeatures.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.js";
-import { Markdown } from "../../base-primitives/Markdown.js";
-import { ElementTag } from "../../base-primitives/element/ElementTags.js";
-import { Link } from "../../components/Link.js";
-import { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
-import { MetadataProvider, MetadataValue } from "./MetadataValue.js";
-import { TabPanelDeployments } from "./TabPanelDeployments.js";
-import { TabPanelRelationships } from "./TabPanelRelationships.js";
-import { TabPanelStructure } from "./TabPanelStructure.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from "@tabler/icons-react";
-import { useCallback, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
-import { clamp, entries, isNullish, map, only, partition, pipe } from "remeda";
-import { ActionIcon, ActionIconGroup, Badge, Box, CloseButton, Divider, Flex, Group, RemoveScroll, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, ThemeIcon, Tooltip, UnstyledButton } from "@mantine/core";
-import { m, useDragControls, useMotionValue } from "motion/react";
-import { useSessionStorage, useViewportSize } from "@mantine/hooks";
-import { HStack } from "@likec4/styles/jsx";
-//#region src/overlays/element-details/ElementDetailsCard.tsx
-var Divider$1 = Divider.withProps({
-	mb: 8,
-	labelPosition: "left",
-	variant: "dashed"
-});
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	openDelay: 400,
-	closeDelay: 150,
-	label: "",
-	children: null,
-	offset: 4
-});
-var SmallLabel = Text.withProps({
-	component: "div",
-	fz: 11,
-	fw: 500,
-	c: "dimmed",
-	lh: 1
-});
-var PropertyLabel = Text.withProps({
-	component: "div",
-	fz: "xs",
-	c: "dimmed",
-	className: propertyLabel
-});
-var MIN_PADDING = 24;
-var TABS = [
-	"Properties",
-	"Relationships",
-	"Views",
-	"Structure",
-	"Deployments"
-];
-function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
-	const [opened, setOpened] = useState(false);
-	const windowSize = useViewportSize();
-	const windowWidth = windowSize.width || window.innerWidth || 1200;
-	const windowHeight = windowSize.height || window.innerHeight || 800;
-	const [activeTab, setActiveTab] = useSessionStorage({
-		key: `likec4:element-details:active-tab`,
-		defaultValue: "Properties"
-	});
-	const diagram = useDiagram();
-	const viewModel = useCurrentViewModel();
-	const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
-	const elementModel = viewModel.$model.element(fqn);
-	const [viewsOf, otherViews] = pipe([...elementModel.views()], map((v) => v.$view), partition((v) => v._type === "element" && v.viewOf === fqn));
-	let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
-	if (defaultView?.id === viewId) defaultView = null;
-	const defaultLink = only(elementModel.links);
-	const controls = useDragControls();
-	const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
-	const _width = Math.min(700, windowWidth - 48);
-	const _height = Math.min(650, windowHeight - 48);
-	const fromPosition = rectFromNode ? {
-		x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
-		y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
-	} : {
-		x: windowWidth / 2,
-		y: windowHeight / 2
-	};
-	const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, .9) : 1;
-	const left = Math.round(clamp(fromPosition.x - _width / 2, {
-		min: MIN_PADDING,
-		max: windowWidth - _width - MIN_PADDING
-	}));
-	const top = Math.round(clamp(fromPosition.y - (isCompound ? 0 : 60), {
-		min: MIN_PADDING,
-		max: windowHeight - _height - MIN_PADDING
-	}));
-	const originX = clamp((fromPosition.x - left) / _width, {
-		min: .1,
-		max: .9
-	});
-	const originY = clamp((fromPosition.y - top) / _height, {
-		min: .1,
-		max: .9
-	});
-	const width = useMotionValue(_width);
-	const height = useMotionValue(_height);
-	useUpdateEffect$1(() => {
-		width.set(_width);
-		height.set(_height);
-	}, [_width, _height]);
-	const handleDrag = useCallback((_, info) => {
-		width.set(Math.max(width.get() + info.delta.x, 320));
-		height.set(Math.max(height.get() + info.delta.y, 300));
-	}, [width, height]);
-	const ref = useRef(null);
-	const close = useDebouncedCallback(useCallbackRef$1(onClose), [], 50);
-	const triggerClose = useCallbackRef$1((event) => {
-		event?.stopPropagation();
-		close();
-	});
-	const notation = nodeModel?.$node.notation ?? null;
-	const elementIcon$1 = IconRenderer({
-		element: {
-			id: fqn,
-			title: elementModel.title,
-			icon: nodeModel?.icon ?? elementModel.icon
-		},
-		className: elementIcon
-	});
-	useTimeoutEffect(() => {
-		if (!ref.current?.open) ref.current?.showModal();
-	}, 20);
-	/**
-	* This delay improves "enter" animations,
-	* if  current tab is "Relationships"
-	*/
-	useTimeoutEffect(() => {
-		setOpened(true);
-	}, 220);
-	return /* @__PURE__ */ jsx(m.dialog, {
-		ref,
-		className: cx(dialog, RemoveScroll.classNames.fullWidth),
-		layout: true,
-		initial: {
-			[backdropBlur]: "0px",
-			[backdropOpacity]: "5%"
-		},
-		animate: {
-			[backdropBlur]: "3px",
-			[backdropOpacity]: "60%"
-		},
-		exit: {
-			[backdropBlur]: "0px",
-			[backdropOpacity]: "0%",
-			transition: { duration: .1 }
-		},
-		onClick: (e) => {
-			e.stopPropagation();
-			if (e.target?.nodeName?.toUpperCase() === "DIALOG") ref.current?.close();
-		},
-		onDoubleClick: stopPropagation,
-		onPointerDown: stopPropagation,
-		onClose: triggerClose,
-		children: /* @__PURE__ */ jsx(RemoveScroll, {
-			forwardProps: true,
-			removeScrollBar: false,
-			children: /* @__PURE__ */ jsxs(m.div, {
-				layout: true,
-				layoutRoot: true,
-				drag: true,
-				dragControls: controls,
-				dragElastic: 0,
-				dragMomentum: false,
-				dragListener: false,
-				"data-likec4-color": nodeModel?.color ?? elementModel.color,
-				className: card,
-				initial: {
-					top,
-					left,
-					width: _width,
-					height: _height,
-					opacity: 0,
-					originX,
-					originY,
-					scale: Math.max(fromScale, .65)
-				},
-				animate: {
-					opacity: 1,
-					scale: 1
-				},
-				exit: {
-					opacity: 0,
-					scale: .9,
-					translateY: -10,
-					transition: { duration: .1 }
-				},
-				style: {
-					width,
-					height
-				},
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: cardHeader,
-						onPointerDown: (e) => controls.start(e),
-						children: [/* @__PURE__ */ jsxs(HStack, {
-							alignItems: "start",
-							justify: "space-between",
-							gap: "sm",
-							mb: "sm",
-							flexWrap: "nowrap",
-							children: [/* @__PURE__ */ jsxs(HStack, {
-								alignItems: "start",
-								gap: "sm",
-								style: {
-									cursor: "default",
-									minWidth: 0,
-									overflow: "hidden"
-								},
-								flexWrap: "nowrap",
-								children: [elementIcon$1, /* @__PURE__ */ jsxs("div", {
-									style: {
-										minWidth: 0,
-										overflow: "hidden"
-									},
-									children: [/* @__PURE__ */ jsx(Tooltip$1, {
-										label: elementModel.title,
-										openDelay: 600,
-										position: "bottom-start",
-										children: /* @__PURE__ */ jsx(Text, {
-											component: "div",
-											className: title,
-											children: elementModel.title
-										})
-									}), notation && /* @__PURE__ */ jsx(Text, {
-										component: "div",
-										c: "dimmed",
-										fz: "sm",
-										fw: 500,
-										lh: 1.3,
-										lineClamp: 1,
-										children: notation
-									})]
-								})]
-							}), /* @__PURE__ */ jsx(CloseButton, {
-								size: "lg",
-								onClick: triggerClose
-							})]
-						}), /* @__PURE__ */ jsxs(HStack, {
-							alignItems: "baseline",
-							gap: "sm",
-							flexWrap: "nowrap",
-							children: [
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SmallLabel, { children: "kind" }), /* @__PURE__ */ jsx(Badge, {
-									radius: "sm",
-									size: "sm",
-									fw: 600,
-									color: "gray",
-									style: { cursor: "pointer" },
-									onClick: (e) => {
-										e.stopPropagation();
-										diagram.openSearch(`kind:${elementModel.kind}`);
-									},
-									children: elementModel.kind
-								})] }),
-								/* @__PURE__ */ jsxs("div", {
-									style: {
-										flex: 1,
-										minWidth: 0,
-										overflow: "hidden"
-									},
-									children: [/* @__PURE__ */ jsx(SmallLabel, { children: "tags" }), /* @__PURE__ */ jsx(ElementTags, {
-										tags: elementModel.tags,
-										onClick: (tag) => diagram.openSearch(`#${tag}`)
-									})]
-								}),
-								/* @__PURE__ */ jsxs(ActionIconGroup, {
-									style: { alignSelf: "flex-start" },
-									children: [
-										defaultLink && /* @__PURE__ */ jsx(ActionIcon, {
-											component: "a",
-											href: defaultLink.url,
-											target: "_blank",
-											size: "lg",
-											variant: "default",
-											radius: "sm",
-											children: /* @__PURE__ */ jsx(IconExternalLink, {
-												stroke: 1.6,
-												style: { width: "65%" }
-											})
-										}),
-										/* @__PURE__ */ jsx(IfEnabled, {
-											feature: "Vscode",
-											children: /* @__PURE__ */ jsx(Tooltip$1, {
-												label: "Open source",
-												children: /* @__PURE__ */ jsx(ActionIcon, {
-													size: "lg",
-													variant: "default",
-													radius: "sm",
-													onClick: (e) => {
-														e.stopPropagation();
-														diagram.openSource({ element: elementModel.id });
-													},
-													children: /* @__PURE__ */ jsx(IconFileSymlink, {
-														stroke: 1.8,
-														style: { width: "62%" }
-													})
-												})
-											})
-										}),
-										defaultView && /* @__PURE__ */ jsx(Tooltip$1, {
-											label: "Open default view",
-											children: /* @__PURE__ */ jsx(ActionIcon, {
-												size: "lg",
-												variant: "default",
-												radius: "sm",
-												onClick: (e) => {
-													e.stopPropagation();
-													diagram.navigateTo(defaultView.id, fromNode ?? void 0);
-												},
-												children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
-											})
-										})
-									]
-								})
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Tabs, {
-						value: activeTab,
-						onChange: (v) => setActiveTab(v),
-						variant: "none",
-						classNames: {
-							root: tabsRoot,
-							list: tabsList,
-							tab: tabsTab,
-							panel: tabsPanel
-						},
-						children: [
-							/* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
-								value: tab,
-								children: tab
-							}, tab)) }),
-							/* @__PURE__ */ jsx(TabsPanel, {
-								value: "Properties",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "scroll",
-									offsetScrollbars: true,
-									children: /* @__PURE__ */ jsxs(Box, {
-										className: propertiesGrid,
-										pt: "xs",
-										children: [
-											elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }), /* @__PURE__ */ jsx(Markdown, { value: elementModel.summary })] }),
-											/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "description" }), /* @__PURE__ */ jsx(Markdown, {
-												value: elementModel.description,
-												emptyText: "no description"
-											})] }),
-											elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, {
-												title: "technology",
-												children: elementModel.technology
-											}),
-											elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "links" }), /* @__PURE__ */ jsx(HStack, {
-												gap: "xs",
-												flexWrap: "wrap",
-												children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i))
-											})] }),
-											elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
-										]
-									})
-								})
-							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
-								value: "Relationships",
-								children: /* @__PURE__ */ jsx(DiagramFeatures, {
-									overrides: {
-										enableRelationshipBrowser: false,
-										enableNavigateTo: false
-									},
-									children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(TabPanelRelationships, {
-										element: elementModel,
-										node: nodeModel ?? null
-									})
-								})
-							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
-								value: "Views",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "auto",
-									children: /* @__PURE__ */ jsxs(Stack, {
-										gap: "lg",
-										children: [viewsOf.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views of the element (scoped)" }), /* @__PURE__ */ jsx(Stack, {
-											gap: "sm",
-											children: viewsOf.map((view) => /* @__PURE__ */ jsx(ViewButton, {
-												view,
-												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-											}, view.id))
-										})] }), otherViews.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views including this element" }), /* @__PURE__ */ jsx(Stack, {
-											gap: "sm",
-											children: otherViews.map((view) => /* @__PURE__ */ jsx(ViewButton, {
-												view,
-												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-											}, view.id))
-										})] })]
-									})
-								})
-							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
-								value: "Structure",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "auto",
-									children: /* @__PURE__ */ jsx(TabPanelStructure, { element: elementModel })
-								})
-							}),
-							/* @__PURE__ */ jsx(TabsPanel, {
-								value: "Deployments",
-								children: /* @__PURE__ */ jsx(ScrollArea, {
-									scrollbars: "y",
-									type: "auto",
-									children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id })
-								})
-							})
-						]
-					}) }),
-					/* @__PURE__ */ jsx(m.div, {
-						className: resizeHandle,
-						drag: true,
-						dragElastic: 0,
-						dragMomentum: false,
-						onDrag: handleDrag,
-						dragConstraints: {
-							top: 0,
-							left: 0,
-							right: 0,
-							bottom: 0
-						}
-					})
-				]
-			})
-		})
-	});
-}
-var ViewButton = ({ view, onNavigateTo }) => {
-	return /* @__PURE__ */ jsx(UnstyledButton, {
-		className: viewButton,
-		onClick: (e) => onNavigateTo(view.id, e),
-		children: /* @__PURE__ */ jsxs(Group, {
-			gap: 6,
-			align: "start",
-			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(ThemeIcon, {
-				size: "sm",
-				variant: "transparent",
-				children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
-			}), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
-				component: "div",
-				className: viewButtonTitle,
-				lineClamp: 1,
-				children: view.title || "untitled"
-			}) })]
-		})
-	});
-};
-function ElementProperty({ title, emptyValue = `undefined`, children, style, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: title }), /* @__PURE__ */ jsx(Text, {
-		component: "div",
-		...isNullish(children) && { c: "dimmed" },
-		fz: "md",
-		style: {
-			whiteSpace: "preserve-breaks",
-			userSelect: "all",
-			...style
-		},
-		...props,
-		children: children || emptyValue
-	})] });
-}
-function ElementMetata({ value: metadata }) {
-	const metadataEntries = entries(metadata).sort(([a], [b]) => a.localeCompare(b));
-	return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, {
-		style: {
-			justifySelf: "end",
-			textAlign: "right"
-		},
-		children: "metadata"
-	}), /* @__PURE__ */ jsx(Box, {
-		className: css({
-			display: "grid",
-			gridTemplateColumns: "min-content 1fr",
-			gridAutoRows: "min-content",
-			gap: `[12px 16px]`,
-			alignItems: "baseline",
-			justifyItems: "stretch"
-		}),
-		children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, {
-			label: key,
-			value
-		}, key))
-	})] }) });
-}
-function ElementTags({ tags, onClick }) {
-	return /* @__PURE__ */ jsxs(Flex, {
-		gap: 4,
-		flex: 1,
-		mt: 6,
-		wrap: "wrap",
-		children: [tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
-			tag,
-			cursor: "pointer",
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick(tag);
-			}
-		}, tag)), tags.length === 0 && /* @__PURE__ */ jsx(Badge, {
-			radius: "sm",
-			size: "sm",
-			fw: 600,
-			color: "gray",
-			children: "—"
-		})]
-	});
-}
-//#endregion
-export { ElementDetailsCard };

package/dist/overlays/element-details/MetadataValue.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export declare function MetadataProvider({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-interface MetadataValueProps {
-    label: string;
-    value: string | string[];
-}
-export declare function MetadataValue({ label, value }: MetadataValueProps): import("react").JSX.Element;
-export {};