@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/state/utils.mjs

@@ -0,0 +1,169 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { pickViewBounds } from "../../utils/view-bounds.mjs";
+import { BBox } from "@likec4/core/geometry";
+import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
+import { getEdgePosition, getNodesBounds, getViewportForBounds } from "@xyflow/system";
+import { isDynamicView } from "@likec4/core/types";
+
+//#region src/likec4diagram/state/utils.ts
+const findNodeByModelFqn = (xynodes, elementFqn) => {
+	const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
+	return node ? node : null;
+};
+function typedSystem(system) {
+	const sys = system;
+	return {
+		get overlaysActorRef() {
+			return sys.get("overlays") ?? null;
+		},
+		get diagramActorRef() {
+			return nonNullable(sys.get("diagram"), "Diagram actor not found");
+		},
+		get searchActorRef() {
+			return sys.get("search") ?? null;
+		},
+		get editorActorRef() {
+			return sys.get("editor") ?? null;
+		},
+		get navigationActorRef() {
+			return sys.get("navigationPanel") ?? null;
+		}
+	};
+}
+typedSystem.editorActor = ({ system }) => {
+	return system.get("editor");
+};
+typedSystem.overlaysActor = ({ system }) => {
+	return system.get("overlays");
+};
+typedSystem.diagramActor = ({ system }) => {
+	return system.get("diagram");
+};
+typedSystem.searchActor = ({ system }) => {
+	return system.get("search");
+};
+typedSystem.navigationActor = ({ system }) => {
+	return system.get("navigationPanel");
+};
+function findDiagramNode(ctx, xynodeId) {
+	return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
+}
+function findDiagramEdge(ctx, xyedgeId) {
+	return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
+}
+/**
+* Returns the bounds of the current view from the context.
+* If {@link nextView} is provided, returns the bounds of the next view.
+*/
+function viewBounds(ctx, nextView) {
+	const view = nextView ?? ctx.view;
+	return pickViewBounds(view, ctx.dynamicViewVariant);
+}
+function focusedBounds(params) {
+	const b = params.context.xynodes.reduce((acc, node) => {
+		let position = node.data;
+		if (node.hidden || node.data.dimmed) return acc;
+		const width = node.measured?.width ?? node.width ?? node.initialWidth;
+		const height = node.measured?.height ?? node.height ?? node.initialHeight;
+		acc.minX = Math.min(acc.minX, position.x);
+		acc.minY = Math.min(acc.minY, position.y);
+		acc.maxX = Math.max(acc.maxX, position.x + width);
+		acc.maxY = Math.max(acc.maxY, position.y + height);
+		return acc;
+	}, {
+		minX: Infinity,
+		minY: Infinity,
+		maxX: -Infinity,
+		maxY: -Infinity
+	});
+	if (b.minX === Infinity) return { bounds: viewBounds(params.context) };
+	return {
+		duration: 350,
+		bounds: {
+			x: b.minX - 10,
+			y: b.minY - 10,
+			width: b.maxX - b.minX + 20,
+			height: b.maxY - b.minY + 20
+		}
+	};
+}
+const MARGIN = 32;
+function activeSequenceBounds(params) {
+	const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
+	const view = params.context.view;
+	invariant(isDynamicView(view));
+	const stepEdge = nonNullable(params.context.xyedges.find((e) => e.data.id === activeWalkthrough.stepId));
+	const xystate = params.context.xystore.getState();
+	const edgeBounds = getEdgeBounds(stepEdge, xystate);
+	if (edgeBounds && params.context.dynamicViewVariant === "sequence") {
+		const h = stepEdge.data.labelBBox?.height ?? 80;
+		const [top, bottom] = stepEdge.data.dir !== "back" ? [20, h] : [h, 20];
+		return {
+			duration: 500,
+			bounds: BBox.expand(edgeBounds, {
+				left: 100,
+				right: 100,
+				top,
+				bottom
+			})
+		};
+	}
+	const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
+	const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
+	const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
+	let stepBounds = edgeBounds ? BBox.merge(edgeBounds, actorsBounds) : actorsBounds;
+	return {
+		duration: 500,
+		bounds: BBox.expand(stepBounds, MARGIN)
+	};
+}
+function getEdgeBounds(edge, store) {
+	const sourceNode = store.nodeLookup.get(edge.source);
+	const targetNode = store.nodeLookup.get(edge.target);
+	if (!sourceNode || !targetNode) return null;
+	const edgePosition = getEdgePosition({
+		id: edge.id,
+		sourceNode,
+		targetNode,
+		sourceHandle: edge.sourceHandle || null,
+		targetHandle: edge.targetHandle || null,
+		connectionMode: store.connectionMode
+	});
+	if (!edgePosition) return edge.data.labelBBox ?? null;
+	return BBox.fromPoints([[edgePosition.sourceX, edgePosition.sourceY], [edgePosition.targetX, edgePosition.targetY]]);
+}
+function nodeRef(node) {
+	switch (node.type) {
+		case "element":
+		case "compound-element":
+		case "seq-actor": return node.data.modelFqn;
+		case "deployment":
+		case "compound-deployment":
+		case "graph-element": return node.data.modelFqn ?? node.data.deploymentFqn;
+		case "seq-parallel":
+		case "seq-subflow":
+		case "view-group": return null;
+		default: nonexhaustive(node);
+	}
+}
+function findCorrespondingNode(context, event) {
+	const fromNodeId = context.lastOnNavigate?.fromNode;
+	const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
+	const fromRef = fromNode && nodeRef(fromNode);
+	if (!fromNode || !fromRef) return {
+		fromNode: null,
+		toNode: null
+	};
+	return {
+		fromNode,
+		toNode: event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null
+	};
+}
+function calcViewportForBounds(context, bounds) {
+	let { width, height, transform } = context.xystore.getState();
+	const maxZoom = Math.max(transform[2], 1);
+	return getViewportForBounds(bounds, width, height, context.minZoom, maxZoom, context.fitViewPadding);
+}
+
+//#endregion
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/types.d.mts

@@ -0,0 +1,202 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from "../base/types.mjs";
+import { FunctionComponent } from "react";
+import { XYPosition } from "@xyflow/system";
+import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, DynamicViewFlow, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, StepPath, ViewId } from "@likec4/core/types";
+import { Simplify } from "type-fest";
+//#region src/likec4diagram/types.d.ts
+export declare namespace Types {
+  type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'notes' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
+    /**
+     * View layout direction, used by DefaultHandles to position node handles
+     */
+    viewLayoutDir?: AutoLayoutDirection | undefined;
+    /**
+     * View this node belongs to
+     */
+    viewId: ViewId;
+    isMultiple?: boolean | undefined;
+    icon: string | null;
+    drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
+  }>;
+  /**
+   * Represents element from logical model
+   */
+  type ElementNodeData = Simplify<LeafNodeData & {
+    modelFqn: Fqn;
+    deploymentFqn?: never;
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null;
+  }>;
+  /**
+   * Represents element from deployment model
+   */
+  type DeploymentElementNodeData = Simplify<LeafNodeData & {
+    navigateTo: ViewId | null;
+    deploymentFqn: DeploymentFqn;
+    modelFqn: Fqn | null;
+  }>;
+  type SequenceActorNodePort = {
+    id: string;
+    cx: number;
+    cy: number;
+    height: number;
+    type: 'target' | 'source';
+    position: 'left' | 'right' | 'top' | 'bottom';
+    hidden?: boolean;
+  };
+  type SequenceActorNodeData = Simplify<LeafNodeData & {
+    navigateTo: ViewId | null;
+    modelFqn: Fqn | null;
+    ports: Array<SequenceActorNodePort>;
+    viewHeight: number;
+  }>;
+  /**
+   * Represents subflow area in the diagram
+   * `try` and `alt` flows have special handling in the diagram
+   */
+  type SequenceSubflowData = LeafNodeData & {
+    flowId: StepPath;
+    title: string | undefined;
+    /**
+     * This is first subflow in current flow
+     */
+    isFirst?: boolean | undefined;
+    /**
+     * This is last subflow in current flow
+     */
+    isLast?: boolean | undefined;
+    collapsed: boolean;
+  } & ({
+    flowType: Exclude<DynamicViewFlow.SubFlowType, 'try' | 'alt'>;
+  } | SequenceSubflowData.AltOrTry);
+  namespace SequenceSubflowData {
+    type AltOrTry = {
+      flowType: 'try' | 'alt';
+      headerHeight: number;
+    };
+  }
+  /**
+   * @deprecated Use {@link SequenceSubflowData} instead
+   */
+  type SequenceParallelAreaData = Simplify<LeafNodeData & {
+    parallelPrefix: string;
+  }>;
+  type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'notes' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
+    /**
+     * View layout direction, used by DefaultHandles to position node handles
+     */
+    viewLayoutDir?: AutoLayoutDirection | undefined;
+    /**
+     * View this node belongs to
+     */
+    viewId: ViewId;
+    depth: number;
+    icon?: IconUrl;
+    drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
+  }>;
+  type CompoundElementNodeData = Simplify<CompoundNodeData & {
+    modelFqn: Fqn;
+    deploymentFqn?: never;
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null;
+  }>;
+  type CompoundDeploymentNodeData = Simplify<CompoundNodeData & {
+    deploymentFqn: DeploymentFqn;
+    /**
+     * If set - this node refers to a model element
+     */
+    modelFqn: Fqn | null;
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null;
+  }>;
+  type ViewGroupNodeData = Simplify<CompoundNodeData & {
+    isViewGroup: true;
+  }>;
+  /**
+   * Represents a leaf element rendered as a compact circle in "graph" display variant.
+   * Shares {@link LeafNodeData}'s geometry fields (x/y/width/height/style) with the other
+   * leaf node types, even though "graph" mode renders a fixed-size circle instead - this
+   * keeps generic node utilities (bounds, drifts, notes, etc.) working across all node types.
+   */
+  type GraphElementNodeData = Simplify<LeafNodeData & {
+    modelFqn: Fqn | null;
+    deploymentFqn: DeploymentFqn | null;
+    navigateTo: ViewId | null;
+  }>;
+  type ElementNode = BaseNode<ElementNodeData, 'element'>;
+  type DeploymentElementNode = BaseNode<DeploymentElementNodeData, 'deployment'>;
+  type GraphElementNode = BaseNode<GraphElementNodeData, 'graph-element'>;
+  type SequenceActorNode = BaseNode<SequenceActorNodeData, 'seq-actor'>;
+  type SequenceParallelArea = BaseNode<SequenceParallelAreaData, 'seq-parallel'>;
+  type SequenceSubflowArea = BaseNode<SequenceSubflowData, 'seq-subflow'>;
+  type CompoundElementNode = BaseNode<CompoundElementNodeData, 'compound-element'>;
+  type CompoundDeploymentNode = BaseNode<CompoundDeploymentNodeData, 'compound-deployment'>;
+  type ViewGroupNode = BaseNode<ViewGroupNodeData, 'view-group'>;
+  type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea | SequenceSubflowArea | GraphElementNode;
+  type NodeType = AnyNode['type'];
+  type NodeData = ExclusiveUnion<{
+    ElementNodeData: ElementNodeData;
+    DeploymentElementNodeData: DeploymentElementNodeData;
+    CompoundElementNodeData: CompoundElementNodeData;
+    CompoundDeploymentNodeData: CompoundDeploymentNodeData;
+    ViewGroupNodeData: ViewGroupNodeData;
+    SequenceActorNodeData: SequenceActorNodeData;
+    SequenceParallelAreaData: SequenceParallelAreaData;
+    SequenceSubflowAreaData: SequenceSubflowData;
+    GraphElementNodeData: GraphElementNodeData;
+  }>;
+  type Node<Type extends NodeType = NodeType> = Extract<AnyNode, {
+    type: Type;
+  }>;
+  type NodeProps<Type extends NodeType = NodeType> = BaseNodeProps<Node<Type>>;
+  type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+    notes: MarkdownOrString | null;
+    labelXY: XYPosition | null;
+    isLabelCustomized?: boolean | undefined;
+    controlPoints: XYPosition[] | undefined | null;
+    /**
+     * When dynamic view in "diagram" variant
+     * Edges are RelationshipEdgeData - stepnum is used to determine the step number
+     * (backward compatibility)
+     */
+    stepnum?: number;
+  }>;
+  type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+    id: StepPath;
+    state?: 'processed' | 'active' | 'skipped' | 'pending' | null;
+    stepnum: number;
+    parentFlow: null | {
+      id: StepPath;
+      type: DynamicViewFlow.SubFlowType;
+    };
+    notes: MarkdownOrString | null;
+    labelXY: XYPosition | null;
+    labelBBox: BBox;
+    isLabelCustomized?: boolean | undefined;
+    controlPoints: XYPosition[] | undefined | null;
+  }>;
+  type RelationshipEdge = BaseEdge<RelationshipEdgeData, 'relationship'>;
+  type SequenceStepEdge = BaseEdge<SequenceStepEdgeData, 'seq-step'>;
+  type AnyEdge = RelationshipEdge | SequenceStepEdge;
+  type EdgeType = AnyEdge['type'];
+  type Edge<Type extends EdgeType = EdgeType> = Extract<AnyEdge, {
+    type: Type;
+  }>;
+  type EdgeProps<Type extends EdgeType = EdgeType> = BaseEdgeProps<Edge<Type>>;
+  type EdgeData = ExclusiveUnion<{
+    RelationshipEdgeData: RelationshipEdgeData;
+    SequenceStepEdgeData: SequenceStepEdgeData;
+  }>;
+  type NodeRenderer<T extends NodeType> = FunctionComponent<NodeProps<T>>;
+  type NodeRenderers = { [T in NodeType]: NodeRenderer<T>; };
+  type EdgeRenderer<T extends EdgeType> = FunctionComponent<EdgeProps<T>>;
+  type EdgeRenderers = { [T in EdgeType]: EdgeRenderer<T>; };
+}
+//#endregion

package/dist/likec4diagram/ui/FloatingSequenceActors.mjs

@@ -0,0 +1,158 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { selectXYStore, useXYStore } from "../../hooks/useXYFlow.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { ElementData } from "../../base-primitives/element/ElementData.mjs";
+import { ElementShape as ElementShape$1 } from "../../base-primitives/element/ElementShape.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNodesData } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { clamp, omit, pipe } from "remeda";
+import { ensureSizes } from "@likec4/core";
+import { ifilter, imap, invariant as invariant$1, toArray } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import * as m$1 from "motion/react-m";
+import { elementNode } from "@likec4/styles/recipes";
+
+//#region src/likec4diagram/ui/FloatingSequenceActors.tsx
+/**
+* Returns actor nodes from the current XY node list.
+* Only re-runs when xynodes reference changes.
+*/
+const selectActorNodes = selectXYStore((state) => {
+	const [tx, ty, tScale] = state.transform;
+	const x1 = -tx / tScale;
+	const y1 = -ty / tScale;
+	const x2 = x1 + state.width / tScale;
+	return pipe(state.nodeLookup.values(), ifilter((node) => {
+		const xynode = node.internals.userNode;
+		if (xynode.type !== "seq-actor" || !!node.data.dimmed) return false;
+		const { width, height } = getNodeDimensions(node);
+		const centerX = xynode.data.x + width / 2;
+		if (xynode.data.y + height - 8 < y1 && centerX - 30 > x1 && centerX + 30 < x2) return true;
+		return false;
+	}), imap((node) => node.id), toArray());
+});
+/**
+* Shows sequence actors at the top of the diagram, if current viewport does not fit them
+*/
+function FloatingSequenceActors({ isActiveWalkthrough }) {
+	const ids = useXYStore(selectActorNodes);
+	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		anchorY: "top",
+		children: ids.map((id) => /* @__PURE__ */ jsx(SequenceActor, {
+			id,
+			top: isActiveWalkthrough ? 24 : 64
+		}, id))
+	}) });
+}
+const variants = {
+	initial: {
+		opacity: .7,
+		scale: .9
+	},
+	normal: {
+		opacity: .95,
+		scale: 1
+	},
+	hovered: {
+		opacity: 1,
+		scale: 1.07
+	},
+	tap: {
+		opacity: 1,
+		scale: .98
+	},
+	exit: {
+		opacity: 0,
+		scale: .9
+	}
+};
+function SequenceActor({ id, top }) {
+	const node = useNodesData(id);
+	const diagram = useDiagram();
+	let { centerX, scale, width, height } = useXYStore(useCallback((state) => {
+		const node = state.nodeLookup.get(id);
+		if (!node) return {
+			centerX: 0,
+			scale: 1
+		};
+		const { width, height } = getNodeDimensions(node);
+		const [tx, , tScale] = state.transform;
+		const xynode = node.internals.userNode;
+		invariant$1(xynode.type === "seq-actor");
+		const scale = clamp(.6 * tScale, {
+			min: .2,
+			max: .6
+		});
+		return {
+			centerX: roundDpr((node.position.x + width / 2) * tScale + tx),
+			scale,
+			width,
+			height
+		};
+	}, [id]));
+	if (!node) return null;
+	const { data } = node;
+	const isHovered = data.hovered === true;
+	const { size, padding, textSize } = ensureSizes(data.style ?? {});
+	return /* @__PURE__ */ jsx("div", {
+		"data-likec4-color": data.color,
+		"data-likec4-shape": data.shape,
+		"data-likec4-shape-size": size,
+		"data-likec4-spacing": padding,
+		"data-likec4-text-size": textSize,
+		"data-likec4-hovered": data.hovered === true,
+		className: css({
+			position: "absolute",
+			pointerEvents: "none",
+			left: "0",
+			top: "0"
+		}),
+		style: {
+			width,
+			height,
+			transformOrigin: "50% 0%",
+			transform: `translate(-50%, ${top}px) translateX(${centerX}px) scale(${scale})`
+		},
+		children: /* @__PURE__ */ jsxs(m$1.div, {
+			className: cx(elementNode(), css({
+				pointerEvents: "all",
+				userSelect: "none"
+			})),
+			variants,
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 30
+			},
+			initial: "initial",
+			animate: isHovered ? "hovered" : "normal",
+			exit: "exit",
+			whileTap: "tap",
+			onHoverStart: () => {
+				diagram.send({
+					type: "xyflow.nodeMouseEnter",
+					node: node.data.id
+				});
+			},
+			onHoverEnd: () => {
+				diagram.send({
+					type: "xyflow.nodeMouseLeave",
+					node: node.data.id
+				});
+			},
+			children: [/* @__PURE__ */ jsx(ElementShape$1, { data: {
+				width: data.width,
+				height: data.height,
+				shape: data.shape
+			} }), /* @__PURE__ */ jsx(ElementData, { data: omit(data, ["technology"]) })]
+		})
+	});
+}
+
+//#endregion
+export { FloatingSequenceActors };

package/dist/likec4diagram/ui/LayoutDriftFrame.mjs

@@ -0,0 +1,63 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { UnstyledButton } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+//#region src/likec4diagram/ui/LayoutDriftFrame.tsx
+const borderColors = {
+	manual: css({ borderColor: "likec4.compare.manual" }),
+	auto: css({ borderColor: "likec4.compare.latest" })
+};
+const bgColors = {
+	manual: css({ backgroundColor: "likec4.compare.manual" }),
+	auto: css({ backgroundColor: "likec4.compare.latest" })
+};
+const LayoutDriftFrame = memo(() => {
+	const [{ layout, state }, { toggleCompare }] = useDiagramCompareLayout();
+	return /* @__PURE__ */ jsx(Box$1, {
+		className: cx(hstack({
+			position: "absolute",
+			top: "0",
+			left: "0",
+			width: "full",
+			height: "full",
+			border: `default`,
+			borderWidth: "4",
+			pointerEvents: "none",
+			alignItems: "flex-start",
+			justifyContent: "center"
+		}), borderColors[layout]),
+		style: {
+			zIndex: "9999",
+			display: state == "inactive" ? "none" : void 0
+		},
+		children: /* @__PURE__ */ jsx(Btn, {
+			className: bgColors[layout],
+			onClick: (e) => {
+				e.stopPropagation();
+				toggleCompare();
+			},
+			children: "Close compare"
+		})
+	});
+});
+const Btn = UnstyledButton.withProps({ classNames: { root: css({
+	fontSize: "xs",
+	fontWeight: "medium",
+	py: "1.5",
+	lineHeight: "1",
+	borderBottomLeftRadius: "sm",
+	borderBottomRightRadius: "sm",
+	transform: "translateY(-4px)",
+	px: "4",
+	color: "mantine.gray[9]",
+	pointerEvents: "all",
+	_active: { transform: "translateY(-3px)" }
+}) } });
+
+//#endregion
+export { LayoutDriftFrame };

package/dist/likec4diagram/ui/notation/NotationPanel.css.mjs

@@ -0,0 +1,69 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/likec4diagram/ui/notation/NotationPanel.css.ts
+const container = css({
+	position: "absolute",
+	bottom: "0",
+	right: "0",
+	padding: "2",
+	margin: "0",
+	width: "min-content",
+	height: "min-content",
+	_print: { display: "none" }
+});
+const icon = css({
+	["--ai-radius"]: "0px",
+	_noReduceGraphics: { ["--ai-radius"]: "{radii.md}" }
+});
+const card = css({
+	cursor: "default",
+	userSelect: "none",
+	minWidth: "[200px]",
+	maxWidth: "[calc(100vw - 20px)]",
+	backgroundColor: `surface.default/80`,
+	sm: {
+		minWidth: "[300px]",
+		maxWidth: `[65vw]`
+	},
+	md: { maxWidth: `[40vw]` }
+});
+const tabPanel = css({ padding: "xxs" });
+const elementNotation = css({
+	backgroundColor: "transparent",
+	transition: "[all 100ms ease-in]",
+	_hover: {
+		transition: "[all 120ms ease-out]",
+		backgroundColor: `surface.hover`
+	}
+});
+const shapeSvg = css({
+	fill: "var(--likec4-palette-fill)",
+	stroke: "var(--likec4-palette-stroke)",
+	strokeWidth: "[1px]",
+	overflow: "visible",
+	width: "100%",
+	height: "auto",
+	filter: `[
+    drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
+  ]`
+});
+const shapeBadge = css({
+	fontWeight: "medium",
+	letterSpacing: "tight",
+	paddingTop: "0",
+	paddingBottom: "0",
+	textTransform: "lowercase",
+	transition: "[all 150ms ease-in-out]",
+	cursor: "pointer",
+	["--badge-radius"]: "2px",
+	["--badge-fz"]: "9.5px",
+	["--badge-padding-x"]: "3px",
+	["--badge-height"]: "13.5px",
+	["--badge-lh"]: "1",
+	["--badge-bg"]: "var(--likec4-palette-fill)",
+	["--badge-color"]: "var(--likec4-palette-hiContrast)"
+});
+
+//#endregion
+export { card, container, elementNotation, icon, shapeBadge, tabPanel };