@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,226 +0,0 @@
-import { css } from "@likec4/styles/css";
-//#region src/overlays/element-details/ElementDetailsCard.css.ts
-var backdropBlur = "--_blur";
-var backdropOpacity = "--_opacity";
-var dialog = css({
-	boxSizing: "border-box",
-	margin: "0",
-	padding: "0",
-	position: "fixed",
-	inset: "0",
-	width: "100vw",
-	height: "100vh",
-	maxWidth: "100vw",
-	maxHeight: "100vh",
-	background: "transparent",
-	border: "transparent",
-	_backdrop: {
-		backdropFilter: "auto",
-		backdropBlur: `var(${backdropBlur})`,
-		backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
-	}
-});
-var card = css({
-	position: "absolute",
-	pointerEvents: "all",
-	display: "flex",
-	flexDirection: "column",
-	padding: "4",
-	gap: "lg",
-	justifyContent: "stretch",
-	color: "text",
-	boxShadow: "md",
-	overflow: "hidden",
-	border: "none",
-	background: `[
-    linear-gradient(180deg,
-    color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
-    color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
-    color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
-    transparent 80px
-    ),
-    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px),
-    {colors.likec4.overlay.body}
-  ]`,
-	"& .react-flow__attribution": { display: "none" }
-});
-var cardHeader = css({
-	flex: 0,
-	cursor: "move"
-});
-var title = css({
-	display: "block",
-	fontFamily: "likec4.element",
-	fontOpticalSizing: "auto",
-	fontStyle: "normal",
-	fontWeight: "bold",
-	fontSize: "24px",
-	lineHeight: "xs",
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	wordBreak: "break-word",
-	lineClamp: 2
-});
-var iconSize = "40px";
-var elementIcon = css({
-	flex: `0 0 ${iconSize}`,
-	height: iconSize,
-	width: iconSize,
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	alignSelf: "flex-start",
-	cursor: "move",
-	_dark: { mixBlendMode: "hard-light" },
-	"& :where(svg, img)": {
-		width: "100%",
-		height: "auto",
-		maxHeight: "100%",
-		pointerEvents: "none",
-		filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
-    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
-  `
-	},
-	"& img": { objectFit: "contain" }
-});
-var viewTitleColor = "--view-title-color";
-var iconColor = "--icon-color";
-var viewButton = css({
-	width: "100%",
-	background: "body",
-	borderRadius: "sm",
-	padding: `[10px 8px]`,
-	transition: "fast",
-	border: `1px dashed`,
-	borderColor: "default.border",
-	[viewTitleColor]: "{colors.mantine.dark[1]}",
-	_hover: {
-		background: "default.hover",
-		[iconColor]: "{colors.mantine.dark[1]}",
-		[viewTitleColor]: "{colors.default.color}"
-	},
-	_dark: { background: "mantine.dark[6]" },
-	_light: {
-		[iconColor]: "{colors.mantine.gray[6]}",
-		[viewTitleColor]: "{colors.mantine.gray[7]}",
-		_hover: { [iconColor]: "{colors.mantine.gray[7]}" }
-	},
-	"& .mantine-ThemeIcon-root": {
-		transition: "fast",
-		color: `[var(${iconColor}, {colors.mantine.dark[2]})]`,
-		"--ti-size": "22px",
-		_hover: { color: "default.color" }
-	},
-	"& > *": { transition: `all 130ms {easings.inOut}` },
-	"&:hover > *": {
-		transitionTimingFunction: "out",
-		transform: "translateX(1.6px)"
-	}
-});
-var viewButtonTitle = css({
-	transition: "fast",
-	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
-	fontSize: "15px",
-	fontWeight: "medium",
-	lineHeight: "1.4"
-});
-var tabsRoot = css({
-	flex: 1,
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "stretch",
-	overflow: "hidden",
-	gap: "sm"
-});
-var tabsList = css({
-	background: "mantine.gray[1]",
-	borderRadius: "sm",
-	flexWrap: "nowrap",
-	gap: "1.5",
-	padding: "1",
-	_dark: { background: "mantine.dark[7]" }
-});
-var tabsTab = css({
-	fontSize: "xs",
-	fontWeight: "medium",
-	flexGrow: 1,
-	padding: "[6px 8px]",
-	transition: "fast",
-	borderRadius: "sm",
-	color: "mantine.gray[7]",
-	_hover: {
-		transitionTimingFunction: "out",
-		color: "default.color",
-		background: "mantine.gray[3]"
-	},
-	["&[data-active]"]: {
-		transition: "none",
-		background: "white",
-		shadow: "xs",
-		color: "default.color"
-	},
-	_dark: {
-		color: "mantine.dark[1]",
-		_hover: {
-			color: "white",
-			background: "mantine.dark[6]"
-		},
-		[`&:is([data-active])`]: {
-			color: "white",
-			background: "mantine.dark[5]"
-		}
-	}
-});
-var tabsPanel = css({
-	flex: 1,
-	overflow: "hidden",
-	position: "relative",
-	"&:not(:has(.mantine-ScrollArea-root))": {
-		paddingLeft: "1",
-		paddingRight: "1"
-	},
-	"& .mantine-ScrollArea-root": {
-		width: "100%",
-		height: "100%",
-		"& > div": {
-			paddingLeft: "1",
-			paddingRight: "1"
-		}
-	}
-});
-var propertiesGrid = css({
-	flex: 1,
-	display: "grid",
-	gridTemplateColumns: "min-content 1fr",
-	gridAutoRows: "min-content max-content",
-	gap: `[24px 20px]`,
-	alignItems: "baseline",
-	justifyItems: "stretch"
-});
-var propertyLabel = css({
-	justifySelf: "end",
-	textAlign: "right",
-	userSelect: "none"
-});
-var resizeHandle = css({
-	position: "absolute",
-	width: "14px",
-	height: "14px",
-	border: `3.5px solid`,
-	borderColor: "mantine.dark[3]",
-	borderTop: "none",
-	borderLeft: "none",
-	borderRadius: "xs",
-	bottom: "0.5",
-	right: "0.5",
-	transition: "fast",
-	cursor: "se-resize",
-	_hover: {
-		borderWidth: "4px",
-		borderColor: "mantine.dark[1]"
-	}
-});
-//#endregion
-export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };

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

@@ -1,11 +0,0 @@
-import { Fqn, NodeId, ViewId } from '@likec4/core/types';
-import { Rect } from '@xyflow/system';
-type ElementDetailsCardProps = {
-    viewId: ViewId;
-    fromNode: NodeId | null;
-    rectFromNode: Rect | null;
-    onClose: () => void;
-    fqn: Fqn;
-};
-export declare function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose, }: ElementDetailsCardProps): import("react").JSX.Element;
-export {};