@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/types.d.ts

@@ -1,190 +0,0 @@
-import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, DynamicViewFlow, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, StepPath, ViewId } from '@likec4/core/types';
-import { XYPosition } from '@xyflow/system';
-import { FunctionComponent } from 'react';
-import { Simplify } from 'type-fest';
-import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
-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;
-    }>;
-    type ElementNode = BaseNode<ElementNodeData, 'element'>;
-    type DeploymentElementNode = BaseNode<DeploymentElementNodeData, 'deployment'>;
-    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;
-    type NodeType = AnyNode['type'];
-    type NodeData = ExclusiveUnion<{
-        ElementNodeData: ElementNodeData;
-        DeploymentElementNodeData: DeploymentElementNodeData;
-        CompoundElementNodeData: CompoundElementNodeData;
-        CompoundDeploymentNodeData: CompoundDeploymentNodeData;
-        ViewGroupNodeData: ViewGroupNodeData;
-        SequenceActorNodeData: SequenceActorNodeData;
-        SequenceParallelAreaData: SequenceParallelAreaData;
-        SequenceSubflowAreaData: SequenceSubflowData;
-    }>;
-    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>;
-    };
-}

package/dist/likec4diagram/ui/FloatingSequenceActors.d.ts

@@ -1,6 +0,0 @@
-/**
- * Shows sequence actors at the top of the diagram, if current viewport does not fit them
- */
-export declare function FloatingSequenceActors({ isActiveWalkthrough }: {
-    isActiveWalkthrough: boolean;
-}): import("react").JSX.Element;

package/dist/likec4diagram/ui/FloatingSequenceActors.js

@@ -1,156 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { selectXYStore, useXYStore } from "../../hooks/useXYFlow.js";
-import { roundDpr } from "../../utils/roundDpr.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { ElementData } from "../../base-primitives/element/ElementData.js";
-import { ElementShape } from "../../base-primitives/element/ElementShape.js";
-import { css, cx } from "@likec4/styles/css";
-import { useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useNodesData } from "@xyflow/react";
-import "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.
-*/
-var 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))
-	}) });
-}
-var 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, { 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.d.ts

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

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -1,61 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
-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
-var borderColors = {
-	manual: css({ borderColor: "likec4.compare.manual" }),
-	auto: css({ borderColor: "likec4.compare.latest" })
-};
-var bgColors = {
-	manual: css({ backgroundColor: "likec4.compare.manual" }),
-	auto: css({ backgroundColor: "likec4.compare.latest" })
-};
-var 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"
-		})
-	});
-});
-var 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/index.d.ts

@@ -1,4 +0,0 @@
-export { FloatingSequenceActors } from './FloatingSequenceActors';
-export { LayoutDriftFrame } from './LayoutDriftFrame';
-export { NotationPanel } from './notation/NotationPanel';
-export { SequenceOutlinePanel } from './sequence-outline';

package/dist/likec4diagram/ui/notation/NotationPanel.css.d.ts

@@ -1,7 +0,0 @@
-export declare const container: string;
-export declare const icon: string;
-export declare const card: string;
-export declare const tabPanel: string;
-export declare const elementNotation: string;
-export declare const shapeSvg: string;
-export declare const shapeBadge: string;

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

@@ -1,67 +0,0 @@
-import { css } from "@likec4/styles/css";
-//#region src/likec4diagram/ui/notation/NotationPanel.css.ts
-var container = css({
-	position: "absolute",
-	bottom: "0",
-	right: "0",
-	padding: "2",
-	margin: "0",
-	width: "min-content",
-	height: "min-content",
-	_print: { display: "none" }
-});
-var icon = css({
-	["--ai-radius"]: "0px",
-	_noReduceGraphics: { ["--ai-radius"]: "{radii.md}" }
-});
-var card = css({
-	cursor: "default",
-	userSelect: "none",
-	minWidth: "[200px]",
-	maxWidth: "[calc(100vw - 20px)]",
-	backgroundColor: `surface.default/80`,
-	sm: {
-		minWidth: "[300px]",
-		maxWidth: `[65vw]`
-	},
-	md: { maxWidth: `[40vw]` }
-});
-var tabPanel = css({ padding: "xxs" });
-var elementNotation = css({
-	backgroundColor: "transparent",
-	transition: "[all 100ms ease-in]",
-	_hover: {
-		transition: "[all 120ms ease-out]",
-		backgroundColor: `surface.hover`
-	}
-});
-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%))
-  ]`
-});
-var 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 };

package/dist/likec4diagram/ui/notation/NotationPanel.d.ts

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

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,187 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useXYStore } from "../../../hooks/useXYFlow.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
-import { card, container, elementNotation, icon, shapeBadge, tabPanel } from "./NotationPanel.css.js";
-import { cx } from "@likec4/styles/css";
-import { IconArrowDownRight, IconHelpCircle } from "@tabler/icons-react";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
-import { ceil, isNonNullish } from "remeda";
-import { ActionIcon, Badge, Box, Card, Group, Paper, ScrollAreaAutosize, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, Tooltip } from "@mantine/core";
-import { AnimatePresence, m } from "motion/react";
-import { useLocalStorage } from "@mantine/hooks";
-//#region src/likec4diagram/ui/notation/NotationPanel.tsx
-var ElementNotation = ({ value }) => {
-	const { title, color = "primary", shape = "rectangle" } = value;
-	const [onlyKind, setOnlyKind] = useState(null);
-	const diagram = useDiagram();
-	const w = 300;
-	const h = 200;
-	return /* @__PURE__ */ jsx(Card, {
-		shadow: "none",
-		px: "xs",
-		py: "sm",
-		className: cx(elementNotation),
-		"data-likec4-color": color,
-		onMouseEnter: () => {
-			setOnlyKind(null);
-			diagram.highlightNotation(value);
-		},
-		onMouseLeave: () => {
-			setOnlyKind(null);
-			diagram.unhighlightNotation();
-		},
-		children: /* @__PURE__ */ jsxs(Group, {
-			gap: "sm",
-			align: "stretch",
-			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(Box, {
-				flex: "0 0 70px",
-				style: {
-					position: "relative",
-					width: 70,
-					height: ceil(70 * (h / w), 0)
-				},
-				children: /* @__PURE__ */ jsx(ElementShape, { data: {
-					shape,
-					width: w,
-					height: h
-				} })
-			}), /* @__PURE__ */ jsxs(Stack, {
-				gap: 4,
-				flex: 1,
-				children: [/* @__PURE__ */ jsx(Group, {
-					gap: 4,
-					flex: "0 0 auto",
-					children: value.kinds.map((kind) => /* @__PURE__ */ jsx(Badge, {
-						className: cx(shapeBadge),
-						onMouseEnter: () => {
-							setOnlyKind(kind);
-							diagram.highlightNotation(value, kind);
-						},
-						onMouseLeave: () => {
-							setOnlyKind(null);
-							diagram.highlightNotation(value);
-						},
-						opacity: isNonNullish(onlyKind) && onlyKind !== kind ? .25 : 1,
-						children: kind
-					}, kind))
-				}), /* @__PURE__ */ jsx(Text, {
-					component: "div",
-					fz: "sm",
-					fw: 500,
-					lh: "1.25",
-					style: { textWrap: "pretty" },
-					children: title
-				})]
-			})]
-		})
-	});
-};
-var selector = selectDiagramContext((s) => ({
-	id: s.view.id,
-	notations: s.view.notation?.nodes ?? []
-}), deepEqual);
-var NotationPanel = memo(() => {
-	const height = useXYStore((s) => s.height);
-	const { id, notations } = useDiagramSelector(selector);
-	const [isCollapsed, setCollapsed] = useLocalStorage({
-		key: "notation-webview-collapsed",
-		defaultValue: true
-	});
-	const hasNotations = notations.length > 0;
-	const portalProps = useMantinePortalProps();
-	if (!hasNotations) return null;
-	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [isCollapsed && /* @__PURE__ */ jsx(m.div, {
-		initial: {
-			opacity: .75,
-			translateX: "50%"
-		},
-		animate: {
-			opacity: 1,
-			translateX: 0
-		},
-		exit: {
-			translateX: "100%",
-			opacity: .6
-		},
-		className: container,
-		children: /* @__PURE__ */ jsx(Tooltip, {
-			label: "Show notation",
-			...portalProps,
-			children: /* @__PURE__ */ jsx(ActionIcon, {
-				size: "lg",
-				variant: "default",
-				className: icon,
-				onClick: () => setCollapsed(false),
-				children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
-			})
-		})
-	}, "collapsed"), !isCollapsed && /* @__PURE__ */ jsx(m.div, {
-		initial: {
-			opacity: .75,
-			scale: .2
-		},
-		animate: {
-			opacity: 1,
-			scale: 1
-		},
-		exit: {
-			opacity: 0,
-			scale: .25
-		},
-		className: cx("react-flow__panel", container),
-		style: { transformOrigin: "bottom right" },
-		children: /* @__PURE__ */ jsx(Paper, {
-			radius: "sm",
-			withBorder: true,
-			shadow: "lg",
-			className: card,
-			children: /* @__PURE__ */ jsxs(Tabs, {
-				defaultValue: "first",
-				radius: "xs",
-				children: [/* @__PURE__ */ jsxs(TabsList, { children: [
-					/* @__PURE__ */ jsx(ActionIcon, {
-						size: "md",
-						variant: "subtle",
-						color: "gray",
-						ml: 2,
-						style: {
-							alignSelf: "center",
-							opacity: .7
-						},
-						onClick: () => setCollapsed(true),
-						children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
-					}),
-					/* @__PURE__ */ jsx(TabsTab, {
-						value: "first",
-						fz: "xs",
-						children: "Elements"
-					}),
-					/* @__PURE__ */ jsx(TabsTab, {
-						value: "second",
-						fz: "xs",
-						disabled: true,
-						children: "Relationships"
-					})
-				] }), /* @__PURE__ */ jsx(TabsPanel, {
-					value: "first",
-					className: tabPanel,
-					hidden: isCollapsed,
-					children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
-						viewportProps: { style: { maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)` } },
-						children: /* @__PURE__ */ jsx(Stack, {
-							gap: 0,
-							children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i))
-						})
-					})
-				})]
-			})
-		})
-	}, id)] });
-});
-//#endregion
-export { NotationPanel };