@likec4/diagram 1.7.4 → 1.8.1

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.props.d.ts

@@ -140,6 +140,11 @@ export interface LikeC4DiagramProperties {
      * @default false
      */
     showNavigationButtons?: undefined | boolean;
+    /**
+     * Display notations of the view
+     * @default true
+     */
+    showNotations?: boolean | undefined;
     /**
      * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
      * @default true

package/dist/index.mjs

@@ -12,16 +12,16 @@ import { invariant, hasAtLeast, whereOperatorAsPredicate, extractStep, nonNullab
 import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
 import { getNodeDimensions, getBoundsOfRects, boxToRect, getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
 import { DEV } from "esm-env";
-import { isArray, hasAtLeast as hasAtLeast$1, isNullish, entries, reduce, isTruthy, first, last, clamp, isNumber, isNonNullish, keys, takeWhile } from "remeda";
+import { isArray, hasAtLeast as hasAtLeast$1, isNullish, entries, reduce, map, prop, isTruthy, first, last, clamp, isNumber, isNonNullish, ceil, keys, takeWhile } from "remeda";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
 import { shallow } from "zustand/shallow";
 import { Bezier } from "bezier-js";
-import { MantineContext, Box, ActionIcon as ActionIcon$2, Text as Text$1, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, rem, Divider, Space, TooltipGroup, Flex, Tooltip as Tooltip$2, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl, Popover, PopoverTarget, PopoverDropdown, FloatingIndicator, Notification, Code } from "@mantine/core";
+import { MantineContext, Box, ActionIcon as ActionIcon$2, Text as Text$1, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, Tooltip as Tooltip$2, ThemeIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Badge, rem, Divider, Space, TooltipGroup, Flex, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl, Popover, PopoverTarget, PopoverDropdown, FloatingIndicator, Notification, Code } from "@mantine/core";
 import { useHotkeys, useLocalStorage } from "@mantine/hooks";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { line, curveCatmullRomOpen } from "d3-shape";
 import { Solver, Operator, Expression, Strength, Variable } from "@lume/kiwi";
-import { IconZoomScan, IconLink, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled, IconFileSymlink, IconLayoutDashboard, IconArrowBigDownLines, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight, IconAlertTriangle } from "@tabler/icons-react";
+import { IconZoomScan, IconLink, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled, IconAlertTriangle, IconHelpCircle, IconArrowDownRight, IconFileSymlink, IconLayoutDashboard, IconArrowBigDownLines, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 var rootClassName = "likec4-diagram-root";
 const noop = () => {
 }, depsShallowEqual = (d1, d2) => {
@@ -103,9 +103,9 @@ function diagramViewToXYFlowData(view, opts) {
   const ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   for (; next = traverse.shift(); ) {
-    const { node, parent } = next;
-    node.children.length > 0 && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    const isCompound = hasAtLeast$1(node.children, 1), position = {
+    const { node, parent } = next, isCompound = hasAtLeast$1(node.children, 1);
+    isCompound && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
+    const position = {
       x: node.position[0],
       y: node.position[1]
     };
@@ -120,6 +120,7 @@ function diagramViewToXYFlowData(view, opts) {
       },
       draggable,
       selectable: opts.selectable,
+      focusable: opts.selectable && !isCompound,
       deletable: !1,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -137,7 +138,11 @@ function diagramViewToXYFlowData(view, opts) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id = ns + edge.id;
-    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points"), xyedges.push({
+    if (!hasAtLeast$1(edge.points, 2)) {
+      console.error("edge should have at least 2 points", edge);
+      continue;
+    }
+    xyedges.push({
       id,
       type: "relationship",
       source: ns + source,
@@ -650,6 +655,13 @@ function createDiagramStore(props) {
               noReplace,
               "onInit"
             );
+          },
+          highlightByElementNotation: (notation, onlyOfKind) => {
+            const { xynodes: xynodes2, xyedges: xyedges2 } = get(), dimmed2 = new StringSet(map(xyedges2, prop("id")));
+            xynodes2.forEach(({ id, data }) => {
+              const node = data.element;
+              (node.shape !== notation.shape || node.color !== notation.color || !notation.kinds.includes(node.kind) || onlyOfKind && node.kind !== onlyOfKind) && dimmed2.add(id);
+            }), set({ dimmed: dimmed2 }, noReplace, "highlightByElementNotation");
           }
         }),
         {
@@ -754,7 +766,7 @@ function FitViewOnViewportResize({ diagramApi }) {
     1e3
   ), null;
 }
-function selector$3({ view, viewportChanged, fitViewPadding }) {
+function selector$4({ view, viewportChanged, fitViewPadding }) {
   return {
     layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
     viewportNotMoved: !viewportChanged
@@ -764,7 +776,7 @@ function FitViewOnDiagramChange() {
   const {
     layoutId,
     viewportNotMoved
-  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState(layoutId), requiresFit = layoutId !== currentLayoutId;
+  } = useDiagramState(selector$4, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState(layoutId), requiresFit = layoutId !== currentLayoutId;
   return useDebouncedEffect(
     () => {
       layoutId !== currentLayoutId && (setCurrent(layoutId), diagramApi.getState().fitDiagram(450));
@@ -1012,7 +1024,7 @@ const Open = (props) => /* @__PURE__ */ jsx(
   Dot,
   ODot
 };
-var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", stepEdgeNumber = "bexn7q9", varLabelX = "var(--bexn7qa)", varLabelY = "var(--bexn7qb)", edgeLabel = "bexn7qd", edgeLabelText = "bexn7qe";
+var container$5 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", stepEdgeNumber = "bexn7q9", varLabelX = "var(--bexn7qa)", varLabelY = "var(--bexn7qb)", edgeLabel = "bexn7qd", edgeLabelText = "bexn7qe";
 function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
   const {
     width: intersectionNodeWidth,
@@ -1188,7 +1200,7 @@ const isSame = (a, b) => Math.abs(a - b) < 2.5, isSamePoint = (a, b) => {
     "g",
     {
       className: clsx(
-        container$4,
+        container$5,
         isDimmed && dimmed$2,
         isControlPointDragging && controlDragging
       ),
@@ -1298,7 +1310,7 @@ const isSame = (a, b) => Math.abs(a - b) < 2.5, isSamePoint = (a, b) => {
   {
     className: clsx([
       "nodrag nopan",
-      container$4,
+      container$5,
       edgeLabel,
       isDimmed && dimmed$2
     ]),
@@ -1338,6 +1350,7 @@ function NavigateToBtn({ xynodeId, className }) {
       onClick: (event) => {
         event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
+      role: "button",
       onDoubleClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsx(
         IconZoomScan,
@@ -1351,7 +1364,7 @@ function NavigateToBtn({ xynodeId, className }) {
     }
   );
 }
-var container$3 = "lbtzdo0", nodeHandlerInCenter = "lbtzdo1", dimmed$1 = "lbtzdo2", varOpacity = "var(--lbtzdo3)", varBorderTransparency = "var(--lbtzdo4)", compoundBody = "lbtzdo5", transparent = "lbtzdo7", title$2 = "lbtzdo8", titleWithNavigation = "lbtzdo9", indicator$1 = "lbtzdod", navigateBtn = "lbtzdof";
+var container$4 = "lbtzdo0", nodeHandlerInCenter = "lbtzdo1", dimmed$1 = "lbtzdo2", varOpacity = "var(--lbtzdo3)", varBorderTransparency = "var(--lbtzdo4)", compoundBody = "lbtzdo5", transparent = "lbtzdo7", title$2 = "lbtzdo8", titleWithNavigation = "lbtzdo9", indicator$1 = "lbtzdod", navigateBtn = "lbtzdof";
 const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.data.element, next.data.element), CompoundNodeMemo = /* @__PURE__ */ memo(function({
   id,
   data: {
@@ -1382,7 +1395,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
       Box,
       {
         className: clsx(
-          container$3,
+          container$4,
           "likec4-compound-node",
           opacity < 1 && "likec4-compound-transparent",
           isDimmed && dimmed$1
@@ -1446,8 +1459,8 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
     )
   ] });
 }, isEqualProps$1);
-var container$2 = "_1b6tkn1", handleCenter = "_1b6tkn2", containerAnimated = "_1b6tkn3", dimmed = "_1b6tkn4", indicator = "_1b6tkn7", fillElementFill = "_1b6tkn8", fillMixStroke = "_1b6tkna", hasIcon = "_1b6tknb", title$1 = "_1b6tkne", description$1 = "_1b6tknf", technology = "_1b6tkng", elementDataContainer = "_1b6tknh", elementTextData = "_1b6tkni", elementIcon = "_1b6tknj", cssShapeSvg = "_1b6tknm", cssNavigateBtn = "_1b6tknn", elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
-const selector$2 = (s) => {
+var container$3 = "_1b6tkn1", handleCenter = "_1b6tkn2", containerAnimated = "_1b6tkn3", dimmed = "_1b6tkn4", indicator = "_1b6tkn7", fillElementFill = "_1b6tkn8", fillMixStroke = "_1b6tkna", hasIcon = "_1b6tknb", title$1 = "_1b6tkne", description$1 = "_1b6tknf", technology = "_1b6tkng", elementDataContainer = "_1b6tknh", elementTextData = "_1b6tkni", elementIcon = "_1b6tknj", cssShapeSvg = "_1b6tknm", cssNavigateBtn = "_1b6tknn", elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
+const selector$3 = (s) => {
   const target = s.getContainer();
   return target ? { target } : null;
 };
@@ -1455,7 +1468,7 @@ function ElementLink({
   element
 }) {
   invariant(element.links, "ElementLink: links are required");
-  const id = useId(), portalProps = useDiagramState(selector$2);
+  const id = useId(), portalProps = useDiagramState(selector$3);
   return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id, children: /* @__PURE__ */ jsxs(
     HoverCard,
     {
@@ -1495,8 +1508,8 @@ function ElementLink({
             onClick: (e) => e.stopPropagation(),
             p: "xs",
             children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
-              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", children: link }) }),
-              /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link.url, target: "_blank", fz: "13", truncate: "end", children: link.title || link.url }) }),
+              /* @__PURE__ */ jsx(CopyButton, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
                 Button,
                 {
                   size: "compact-xs",
@@ -1507,7 +1520,7 @@ function ElementLink({
                   children: copied ? "copied" : "copy"
                 }
               ) })
-            ] }, link)) })
+            ] }, link.url)) })
           }
         )
       ]
@@ -1758,7 +1771,7 @@ const Text = Text$1.withProps({
       {
         id,
         className: clsx([
-          container$2,
+          container$3,
           isDimmed && dimmed,
           animate !== "idle" && containerAnimated,
           "likec4-element-node"
@@ -2188,7 +2201,7 @@ const nodeTypes = {
   compound: CompoundNodeMemo
 }, edgeTypes = {
   relationship: RelationshipEdge
-}, selector$1 = (s) => ({
+}, selector$2 = (s) => ({
   nodes: s.xynodes,
   edges: s.xyedges,
   onInit: s.onInit,
@@ -2236,7 +2249,7 @@ function XYFlow({
     hasOnEdgeContextMenu,
     translateX,
     translateY
-  } = useDiagramState(selector$1, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+  } = useDiagramState(selector$2, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x, y, zoom }) => {
       const roundedX = Math.round(x), roundedY = Math.round(y);
@@ -2322,15 +2335,15 @@ function XYFlow({
     }
   );
 }
-var container$1 = "hbkbtj0", card = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
-const selector = (s) => ({
+var container$2 = "hbkbtj0", card$1 = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
+const selector$1 = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
   description: s.view.description,
   links: s.view.links
 });
 function DiagramTitlePanel() {
-  const { id, title: title$12, description: description$12, links } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+  const { id, title: title$12, description: description$12, links } = useDiagramState(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-panel-collapsed",
     defaultValue: !1
   }), toggle = () => setCollapsed((v) => !v);
@@ -2343,7 +2356,7 @@ function DiagramTitlePanel() {
         opacity: 0.05,
         scale: 0.6
       },
-      className: clsx("react-flow__panel", container$1),
+      className: clsx("react-flow__panel", container$2),
       style: {
         transformOrigin: "left center"
       },
@@ -2351,8 +2364,8 @@ function DiagramTitlePanel() {
         Card,
         {
           radius: "sm",
-          className: card,
-          withBorder: !0,
+          className: card$1,
+          withBorder: !isCollapsed,
           p: isCollapsed ? "sm" : "md",
           onDoubleClick: (e) => e.stopPropagation(),
           children: [
@@ -2361,17 +2374,18 @@ function DiagramTitlePanel() {
               {
                 fullWidth: !0,
                 justify: "stretch",
-                size: "sm",
-                py: 2,
+                size: "md",
                 radius: "0",
                 variant: "subtle",
-                color: "dark",
+                color: "gray",
                 onClick: toggle,
-                children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fw: 500, fz: "xs", c: "gray", children: title$12 })
+                fw: 500,
+                fz: "sm",
+                children: title$12
               }
             ) }),
             !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CardSection, { mb: "sm", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(CardSection, { mb: "xs", children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   fullWidth: !0,
@@ -2458,16 +2472,16 @@ function DiagramTitlePanel() {
                     /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
                       Anchor,
                       {
-                        href: link,
+                        href: link.url,
                         target: "_blank",
                         fz: "xs",
                         truncate: "end",
                         display: "inline-block",
                         w: "100%",
-                        children: link
+                        children: link.title || link.url
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(CopyButton, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
                       Button,
                       {
                         size: "compact-xs",
@@ -2478,7 +2492,7 @@ function DiagramTitlePanel() {
                         children: copied ? "copied" : "copy"
                       }
                     ) })
-                  ] }, link))
+                  ] }, link.url))
                 }
               )
             ] })
@@ -2489,7 +2503,7 @@ function DiagramTitlePanel() {
     id
   ) });
 }
-var container = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
+var container$1 = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750), {
     nextDynamicStep,
@@ -2524,7 +2538,7 @@ function DynamicViewWalkthrough() {
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx("react-flow__panel", container),
+      className: clsx("react-flow__panel", container$1),
       onClick: (e) => e.stopPropagation(),
       onDoubleClick: (e) => e.stopPropagation(),
       children: [
@@ -2578,6 +2592,230 @@ function DynamicViewWalkthrough() {
     }
   );
 }
+var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" }, navigationPanel: { top: "var(--likec4-navigation-panel-top)", left: "var(--likec4-navigation-panel-left)" } }, container = "_1ncdyfa0", card = "_1ncdyfa1", tabPanel = "_1ncdyfa2", elementNotation = "_1ncdyfa3", shapeSvg = "_1ncdyfa4", shapeBadge = "_1ncdyfa5";
+const ElementNotation = ({ value }) => {
+  const {
+    title: title2,
+    color = "primary",
+    shape = "rectangle"
+  } = value, [onlyKind, setOnlyKind] = useState(null), diagramStore = useDiagramStoreApi(), w = 300, h = 200;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      shadow: "none",
+      px: "xs",
+      py: "sm",
+      className: elementNotation,
+      mod: {
+        "data-likec4-color": color
+      },
+      onMouseEnter: () => {
+        setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
+      },
+      onMouseLeave: () => {
+        setOnlyKind(null), diagramStore.setState({ dimmed: /* @__PURE__ */ new Set() });
+      },
+      children: /* @__PURE__ */ jsxs(
+        Group,
+        {
+          gap: "sm",
+          align: "stretch",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flex: "0 0 70px",
+                style: {
+                  width: 70,
+                  height: ceil(70 * (h / w), 0)
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: clsx(
+                      shapeSvg
+                    ),
+                    viewBox: `0 0 ${w} ${h}`,
+                    children: /* @__PURE__ */ jsx(
+                      ElementShapeSvg,
+                      {
+                        shape,
+                        w,
+                        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: shapeBadge,
+                  onMouseEnter: () => {
+                    setOnlyKind(kind), diagramStore.getState().highlightByElementNotation(value, kind);
+                  },
+                  onMouseLeave: () => {
+                    setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
+                  },
+                  opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
+                  color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : vars.element.fill,
+                  children: kind
+                },
+                kind
+              )) }),
+              /* @__PURE__ */ jsx(
+                Text$1,
+                {
+                  component: "div",
+                  fz: "sm",
+                  fw: 500,
+                  lh: "1.25",
+                  style: {
+                    textWrap: "pretty"
+                  },
+                  children: title2
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, selector = (s) => {
+  var _a;
+  return {
+    id: s.view.id,
+    notations: ((_a = s.view.notation) == null ? void 0 : _a.elements) ?? [],
+    height: s.xystore.getState().height,
+    isVisible: isNullish(s.focusedNodeId ?? s.activeDynamicViewStep),
+    target: s.getContainer()
+  };
+};
+function NotationPanel() {
+  const {
+    id,
+    notations,
+    isVisible,
+    height,
+    target
+  } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "notation-panel-collapsed",
+    defaultValue: !0
+  }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    !hasNotations && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Diagram has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            size: "xl",
+            variant: "light",
+            color: "orange",
+            radius: "md",
+            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+          }
+        ) })
+      },
+      "empty"
+    ),
+    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon$2,
+          {
+            size: "xl",
+            variant: "light",
+            color: "gray",
+            radius: "md",
+            onClick: () => setCollapsed(!1),
+            children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
+          }
+        ) })
+      },
+      "collapsed"
+    ),
+    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: {
+          opacity: 0.75,
+          // translateX: '50%',
+          scale: 0.2
+        },
+        animate: { opacity: 1, scale: 1 },
+        exit: {
+          opacity: 0,
+          scale: 0.25
+        },
+        className: clsx("react-flow__panel", container),
+        style: {
+          transformOrigin: "bottom right"
+        },
+        children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            radius: "sm",
+            withBorder: !0,
+            shadow: "lg",
+            className: card,
+            children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
+              /* @__PURE__ */ jsxs(TabsList, { children: [
+                /* @__PURE__ */ jsx(
+                  ActionIcon$2,
+                  {
+                    size: "md",
+                    variant: "subtle",
+                    color: "gray",
+                    ml: 2,
+                    style: {
+                      alignSelf: "center"
+                    },
+                    onClick: () => setCollapsed(!0),
+                    children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(TabsTab, { value: "first", fz: "xs", children: "Elements" }),
+                /* @__PURE__ */ jsx(TabsTab, { value: "second", fz: "xs", disabled: !0, children: "Relationships" })
+              ] }),
+              /* @__PURE__ */ jsx(TabsPanel, { value: "first", className: tabPanel, hidden: isCollapsed, children: /* @__PURE__ */ jsx(
+                ScrollAreaAutosize,
+                {
+                  viewportProps: {
+                    style: {
+                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : "40vh"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i)) })
+                }
+              ) })
+            ] })
+          }
+        )
+      },
+      id
+    )
+  ] });
+}
 const {
   primary,
   secondary,
@@ -3108,19 +3346,19 @@ const ActionIcon = ActionIcon$2.withProps({
     showFitDiagram,
     showLayoutDriftWarning,
     showChangeAutoLayout,
-    portalProps: _portalProps,
+    target,
     showGoToSource
   } = useDiagramState((s) => {
-    const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null, target = s.getContainer();
+    const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null;
     return {
       showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
       showFitDiagram: s.fitViewEnabled && s.zoomable && s.viewportChanged,
       showLayoutDriftWarning: s.readonly !== !0 && s.view.hasLayoutDrift === !0 && isNotActive,
       showChangeAutoLayout: s.readonly !== !0 && !!s.onChange && isNotActive,
       showGoToSource: !!s.onOpenSourceView,
-      portalProps: target ? { target } : void 0
+      target: s.getContainer()
     };
-  }), portalProps = _portalProps ? { portalProps: _portalProps } : void 0;
+  }), portalProps = target ? { portalProps: { target } } : void 0;
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -3201,7 +3439,7 @@ function literalToEnum(value) {
 }
 function XYFlowBackground({ background }) {
   if (typeof background == "string")
-    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
+    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background), size: 2, gap: 20 });
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
 }
@@ -3212,11 +3450,13 @@ const XYFlowInner = memo(function({
   showDiagramTitle
 }) {
   const {
+    showNotations,
     isDynamicView,
     isDynamicViewActive,
     readonly,
     enableDynamicViewWalkthrough
   } = useDiagramState((s) => ({
+    showNotations: s.showNotations,
     isDynamicView: s.isDynamicView,
     readonly: s.readonly,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
@@ -3229,6 +3469,7 @@ const XYFlowInner = memo(function({
     readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
     showDiagramTitle === !0 && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    showNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     children
   ] });
 }, shallowEqual);
@@ -3247,6 +3488,7 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNotations = !0,
   enableDynamicViewWalkthrough = !1,
   enableFocusMode = !1,
   initialWidth,
@@ -3294,6 +3536,7 @@ function LikeC4Diagram({
           fitViewPadding,
           showElementLinks,
           showNavigationButtons,
+          showNotations,
           nodesDraggable,
           nodesSelectable,
           experimentalEdgeEditing,
@@ -3391,6 +3634,7 @@ function StaticLikeC4Diagram({
       background,
       showElementLinks: !0,
       showDiagramTitle: !1,
+      showNotations: !1,
       enableDynamicViewWalkthrough: !1,
       enableFocusMode: !1,
       nodesSelectable: !1,

package/dist/mantine.css.d.ts

@@ -1 +1,3 @@
+export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
+export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
 export declare const mantine: import('@mantine/vanilla-extract').MantineVars;