@likec4/diagram 1.39.5 → 1.41.0

package/bundle/{chunk-CW_KClZe.js → chunk-FGcODVxo.js}

@@ -1,11 +1,11 @@
 import * as React from "react";
 import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, memo as memo$1, createRef } from "react";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { BBox, ensureSizes } from "@likec4/core/types";
+import { invariant, nonNullable } from "@likec4/core/utils";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 import { isTagColorSpecified, nonexhaustive, invariant as invariant$1, defaultTheme, ElementShapes } from "@likec4/core";
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core/types";
-import { invariant } from "@likec4/core/utils";
 function isObject$1(value) {
   return typeof value == "object" && value != null && !Array.isArray(value);
 }
@@ -203,7 +203,7 @@ function sortConditions(paths) {
     return aa && !bb ? 1 : !aa && bb ? -1 : 0;
   });
 }
-const utilities = "aspectRatio:asp,boxDecorationBreak:bx-db,zIndex:z,boxSizing:bx-s,objectPosition:obj-p,objectFit:obj-f,overscrollBehavior:ovs-b,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,position:pos/1,top:top,left:left,inset:inset,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInlineEnd:inset-e/insetEnd/end,insetInlineStart:inset-s/insetStart/start,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:flex-b,flex:flex,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,gridColumn:grid-c,gridRow:grid-r,gridColumnStart:grid-cs,gridColumnEnd:grid-ce,gridAutoFlow:grid-af,gridAutoColumns:grid-ac,gridAutoRows:grid-ar,gap:gap,gridGap:grid-g,gridRowGap:grid-rg,gridColumnGap:grid-cg,rowGap:rg,columnGap:cg,justifyContent:jc,alignContent:ac,alignItems:ai,alignSelf:as,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mbe,marginBlockStart:mbs,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:sx,spaceY:sy,outlineWidth:ring-w/ringWidth,outlineColor:ring-c/ringColor,outline:ring/1,outlineOffset:ring-o/ringOffset,divideX:dvd-x,divideY:dvd-y,divideColor:dvd-c,divideStyle:dvd-s,width:w/1,inlineSize:w-is,minWidth:min-w/minW,minInlineSize:min-w-is,maxWidth:max-w/maxW,maxInlineSize:max-w-is,height:h/1,blockSize:h-bs,minHeight:min-h/minH,minBlockSize:min-h-bs,maxHeight:max-h/maxH,maxBlockSize:max-b,boxSize:size,color:c,fontFamily:ff,fontSize:fs,fontSizeAdjust:fs-a,fontPalette:fp,fontKerning:fk,fontFeatureSettings:ff-s,fontWeight:fw,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariationSettings:fv-s,fontVariantNumeric:fv-num,letterSpacing:ls,lineHeight:lh,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textEmphasisColor:te-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textUnderlineOffset:tu-o,textTransform:tt,textIndent:ti,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,textOverflow:tov,verticalAlign:va,wordBreak:wb,textWrap:tw,truncate:trunc,lineClamp:lc,listStyleType:li-t,listStylePosition:li-pos,listStyleImage:li-img,listStyle:li-s,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundAttachment:bg-a/bgAttachment,backgroundClip:bg-cp/bgClip,background:bg/1,backgroundColor:bg-c/bgColor,backgroundOrigin:bg-o/bgOrigin,backgroundImage:bg-i/bgImage,backgroundRepeat:bg-r/bgRepeat,backgroundBlendMode:bg-bm/bgBlendMode,backgroundSize:bg-s/bgSize,backgroundGradient:bg-grad/bgGradient,backgroundLinear:bg-linear/bgLinear,backgroundRadial:bg-radial/bgRadial,backgroundConic:bg-conic/bgConic,textGradient:txt-grad,gradientFromPosition:grad-from-pos,gradientToPosition:grad-to-pos,gradientFrom:grad-from,gradientTo:grad-to,gradientVia:grad-via,gradientViaPosition:grad-via-pos,borderRadius:bdr/rounded,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRightRadius:bdr-tr/roundedTopRight,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderTopRadius:bdr-t/roundedTop,borderRightRadius:bdr-r/roundedRight,borderBottomRadius:bdr-b/roundedBottom,borderLeftRadius:bdr-l/roundedLeft,borderStartStartRadius:bdr-ss/roundedStartStart,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderEndStartRadius:bdr-es/roundedEndStart,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,border:bd,borderWidth:bd-w,borderTopWidth:bd-t-w,borderLeftWidth:bd-l-w,borderRightWidth:bd-r-w,borderBottomWidth:bd-b-w,borderBlockStartWidth:bd-bs-w,borderBlockEndWidth:bd-be-w,borderColor:bd-c,borderInline:bd-x/borderX,borderInlineWidth:bd-x-w/borderXWidth,borderInlineColor:bd-x-c/borderXColor,borderBlock:bd-y/borderY,borderBlockWidth:bd-y-w/borderYWidth,borderBlockColor:bd-y-c/borderYColor,borderLeft:bd-l,borderLeftColor:bd-l-c,borderInlineStart:bd-s/borderStart,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineStartColor:bd-s-c/borderStartColor,borderRight:bd-r,borderRightColor:bd-r-c,borderInlineEnd:bd-e/borderEnd,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineEndColor:bd-e-c/borderEndColor,borderTop:bd-t,borderTopColor:bd-t-c,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,opacity:op,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,mixBlendMode:mix-bm,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:bkdp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,borderCollapse:bd-cl,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,tableLayout:tbl,transitionTimingFunction:trs-tmf,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transition:transition,animation:anim,animationName:anim-n,animationTimingFunction:anim-tmf,animationDuration:anim-dur,animationDelay:anim-dly,animationPlayState:anim-ps,animationComposition:anim-comp,animationFillMode:anim-fm,animationDirection:anim-dir,animationIterationCount:anim-ic,animationRange:anim-r,animationState:anim-s,animationRangeStart:anim-rs,animationRangeEnd:anim-re,animationTimeline:anim-tl,transformOrigin:trf-o,transformBox:trf-b,transformStyle:trf-s,transform:trf,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:ac-c,caretColor:ca-c,scrollBehavior:scr-bhv,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarWidth:scr-bar-w,scrollMargin:scr-m,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollMarginBottom:scr-mb,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockStart:scr-pbs,scrollPaddingBlockEnd:scr-pbe,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollPaddingBottom:scr-pb,scrollSnapAlign:scr-sa,scrollSnapStop:scrs-s,scrollSnapType:scrs-t,scrollSnapStrictness:scrs-strt,scrollSnapMargin:scrs-m,scrollSnapMarginTop:scrs-mt,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,touchAction:tch-a,userSelect:us,overflow:ov,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overflowAnchor:ov-a,overflowBlock:ov-b,overflowInline:ov-i,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,fill:fill,stroke:stk,strokeWidth:stk-w,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,srOnly:sr,debug:debug,appearance:ap,backfaceVisibility:bfv,clipPath:cp-path,hyphens:hy,mask:msk,maskImage:msk-i,maskSize:msk-s,textSizeAdjust:txt-adj,container:cq,containerName:cq-n,containerType:cq-t,cursor:cursor,textStyle:textStyle,layerStyle:layerStyle,animationStyle:animationStyle", classNameByProp = /* @__PURE__ */ new Map(), shorthands = /* @__PURE__ */ new Map();
+const utilities = "aspectRatio:asp,boxDecorationBreak:bx-db,zIndex:z,boxSizing:bx-s,objectPosition:obj-p,objectFit:obj-f,overscrollBehavior:ovs-b,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,position:pos/1,top:top,left:left,inset:inset,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInlineEnd:inset-e/insetEnd/end,insetInlineStart:inset-s/insetStart/start,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:flex-b,flex:flex,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,gridColumn:grid-c,gridRow:grid-r,gridColumnStart:grid-cs,gridColumnEnd:grid-ce,gridAutoFlow:grid-af,gridAutoColumns:grid-ac,gridAutoRows:grid-ar,gap:gap,gridGap:grid-g,gridRowGap:grid-rg,gridColumnGap:grid-cg,rowGap:rg,columnGap:cg,justifyContent:jc,alignContent:ac,alignItems:ai,alignSelf:as,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mbe,marginBlockStart:mbs,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:sx,spaceY:sy,outlineWidth:ring-w/ringWidth,outlineColor:ring-c/ringColor,outline:ring/1,outlineOffset:ring-o/ringOffset,focusRing:focus-ring,focusVisibleRing:focus-v-ring,focusRingColor:focus-ring-c,focusRingOffset:focus-ring-o,focusRingWidth:focus-ring-w,focusRingStyle:focus-ring-s,divideX:dvd-x,divideY:dvd-y,divideColor:dvd-c,divideStyle:dvd-s,width:w/1,inlineSize:w-is,minWidth:min-w/minW,minInlineSize:min-w-is,maxWidth:max-w/maxW,maxInlineSize:max-w-is,height:h/1,blockSize:h-bs,minHeight:min-h/minH,minBlockSize:min-h-bs,maxHeight:max-h/maxH,maxBlockSize:max-b,boxSize:size,color:c,fontFamily:ff,fontSize:fs,fontSizeAdjust:fs-a,fontPalette:fp,fontKerning:fk,fontFeatureSettings:ff-s,fontWeight:fw,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariationSettings:fv-s,fontVariantNumeric:fv-num,letterSpacing:ls,lineHeight:lh,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textEmphasisColor:te-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textUnderlineOffset:tu-o,textTransform:tt,textIndent:ti,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,textOverflow:tov,verticalAlign:va,wordBreak:wb,textWrap:tw,truncate:trunc,lineClamp:lc,listStyleType:li-t,listStylePosition:li-pos,listStyleImage:li-img,listStyle:li-s,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundAttachment:bg-a/bgAttachment,backgroundClip:bg-cp/bgClip,background:bg/1,backgroundColor:bg-c/bgColor,backgroundOrigin:bg-o/bgOrigin,backgroundImage:bg-i/bgImage,backgroundRepeat:bg-r/bgRepeat,backgroundBlendMode:bg-bm/bgBlendMode,backgroundSize:bg-s/bgSize,backgroundGradient:bg-grad/bgGradient,backgroundLinear:bg-linear/bgLinear,backgroundRadial:bg-radial/bgRadial,backgroundConic:bg-conic/bgConic,textGradient:txt-grad,gradientFromPosition:grad-from-pos,gradientToPosition:grad-to-pos,gradientFrom:grad-from,gradientTo:grad-to,gradientVia:grad-via,gradientViaPosition:grad-via-pos,borderRadius:bdr/rounded,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRightRadius:bdr-tr/roundedTopRight,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderTopRadius:bdr-t/roundedTop,borderRightRadius:bdr-r/roundedRight,borderBottomRadius:bdr-b/roundedBottom,borderLeftRadius:bdr-l/roundedLeft,borderStartStartRadius:bdr-ss/roundedStartStart,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderEndStartRadius:bdr-es/roundedEndStart,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,border:bd,borderWidth:bd-w,borderTopWidth:bd-t-w,borderLeftWidth:bd-l-w,borderRightWidth:bd-r-w,borderBottomWidth:bd-b-w,borderBlockStartWidth:bd-bs-w,borderBlockEndWidth:bd-be-w,borderColor:bd-c,borderInline:bd-x/borderX,borderInlineWidth:bd-x-w/borderXWidth,borderInlineColor:bd-x-c/borderXColor,borderBlock:bd-y/borderY,borderBlockWidth:bd-y-w/borderYWidth,borderBlockColor:bd-y-c/borderYColor,borderLeft:bd-l,borderLeftColor:bd-l-c,borderInlineStart:bd-s/borderStart,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineStartColor:bd-s-c/borderStartColor,borderRight:bd-r,borderRightColor:bd-r-c,borderInlineEnd:bd-e/borderEnd,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineEndColor:bd-e-c/borderEndColor,borderTop:bd-t,borderTopColor:bd-t-c,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,opacity:op,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,mixBlendMode:mix-bm,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:bkdp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,borderCollapse:bd-cl,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,tableLayout:tbl,transitionTimingFunction:trs-tmf,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transition:transition,animation:anim,animationName:anim-n,animationTimingFunction:anim-tmf,animationDuration:anim-dur,animationDelay:anim-dly,animationPlayState:anim-ps,animationComposition:anim-comp,animationFillMode:anim-fm,animationDirection:anim-dir,animationIterationCount:anim-ic,animationRange:anim-r,animationState:anim-s,animationRangeStart:anim-rs,animationRangeEnd:anim-re,animationTimeline:anim-tl,transformOrigin:trf-o,transformBox:trf-b,transformStyle:trf-s,transform:trf,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:ac-c,caretColor:ca-c,scrollBehavior:scr-bhv,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarWidth:scr-bar-w,scrollMargin:scr-m,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollMarginBottom:scr-mb,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockStart:scr-pbs,scrollPaddingBlockEnd:scr-pbe,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollPaddingBottom:scr-pb,scrollSnapAlign:scr-sa,scrollSnapStop:scrs-s,scrollSnapType:scrs-t,scrollSnapStrictness:scrs-strt,scrollSnapMargin:scrs-m,scrollSnapMarginTop:scrs-mt,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,touchAction:tch-a,userSelect:us,overflow:ov,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overflowAnchor:ov-a,overflowBlock:ov-b,overflowInline:ov-i,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,fill:fill,stroke:stk,strokeWidth:stk-w,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,srOnly:sr,debug:debug,appearance:ap,backfaceVisibility:bfv,clipPath:cp-path,hyphens:hy,mask:msk,maskImage:msk-i,maskSize:msk-s,textSizeAdjust:txt-adj,container:cq,containerName:cq-n,containerType:cq-t,cursor:cursor,textStyle:textStyle,layerStyle:layerStyle,animationStyle:animationStyle", classNameByProp = /* @__PURE__ */ new Map(), shorthands = /* @__PURE__ */ new Map();
 utilities.split(",").forEach((utility) => {
   const [prop, meta] = utility.split(":"), [className, ...shorthandList] = meta.split("/");
   classNameByProp.set(prop, className), shorthandList.length && shorthandList.forEach((shorthand) => {
@@ -15827,37 +15827,6 @@ const useCustomCompareMemo = (factory2, deps, comparator) => {
 function useDeepCompareMemo(factory2, deps) {
   return useCustomCompareMemo(factory2, deps, isEqual);
 }
-const HandlerNames = [
-  "onBurgerMenuClick",
-  "onNavigateTo",
-  "onOpenSource",
-  "onCanvasClick",
-  "onCanvasContextMenu",
-  "onEdgeClick",
-  "onEdgeContextMenu",
-  "onNodeClick",
-  "onNodeContextMenu",
-  "onChange",
-  "onCanvasDblClick"
-], DiagramEventHandlersReactContext = createContext({
-  ...t$1(HandlerNames, (name) => [name, null]),
-  handlersRef: {
-    current: {}
-  }
-});
-function DiagramEventHandlers({
-  handlers,
-  children: children2
-}) {
-  const handlersRef = useSyncedRef(handlers), deps = HandlerNames.map((name) => e$2(handlers[name])), value = useMemo(() => ({
-    ...t$1(HandlerNames, (name) => handlersRef.current[name] ? [name, (...args) => handlersRef.current[name]?.(...args)] : [name, null]),
-    handlersRef
-  }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children: children2 });
-}
-function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersReactContext);
-}
 var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty;
 function combineComparators(comparatorA, comparatorB) {
   return function(a, b, state) {
@@ -16120,515 +16089,133 @@ function createCustomEqual(options) {
   var _a = options.circular, circular = _a === void 0 ? !1 : _a, createCustomInternalComparator = options.createInternalComparator, createState = options.createState, _b = options.strict, strict = _b === void 0 ? !1 : _b, config = createEqualityComparatorConfig(options), comparator = createEqualityComparator(config), equals = createCustomInternalComparator ? createCustomInternalComparator(comparator) : createInternalEqualityComparator(comparator);
   return createIsEqual({ circular, comparator, createState, equals, strict });
 }
-const FeatureNames = [
-  "Controls",
-  "ReadOnly",
-  "FocusMode",
-  "NavigateTo",
-  "ElementDetails",
-  "RelationshipDetails",
-  "RelationshipBrowser",
-  "Search",
-  "NavigationButtons",
-  "Notations",
-  "DynamicViewWalkthrough",
-  "EdgeEditing",
-  "ViewTitle",
-  "FitView",
-  /**
-   * Running in VSCode
-   */
-  "Vscode",
-  "ElementTags"
-], AllDisabled = t$1(
-  FeatureNames,
-  (name) => [`enable${name}`, !1]
-), DiagramFeaturesContext = createContext(AllDisabled), validate = (features) => {
-  let {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  } = features;
-  return enableReadOnly && (enableEdgeEditing = !1), {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  };
+const noop = () => {
+}, depsShallowEqual = (d1, d2) => {
+  if (d1 === d2)
+    return !0;
+  if (d1.length !== d2.length)
+    return !1;
+  for (const [i2, element] of d1.entries())
+    if (element !== d2[i2] && !shallowEqual(element, d2[i2]))
+      return !1;
+  return !0;
 };
-function DiagramFeatures({
-  children: children2,
-  features,
-  overrides
-}) {
-  const outerScope = useContext(DiagramFeaturesContext), [scope, setScope] = useState(outerScope);
-  return useEffect(
-    () => {
-      setScope((current) => {
-        const next = validate({
-          ...outerScope,
-          ...features,
-          ...overrides
-        });
-        return shallowEqual(current, next) ? current : next;
-      });
-    },
-    [outerScope, features, overrides]
-  ), /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children: children2 });
+function useUpdateEffect(callback, deps, equalityFn, effectHook) {
+  const isFirstMount = useFirstMountState();
+  useCustomCompareEffect(
+    isFirstMount ? noop : callback,
+    deps,
+    equalityFn ?? depsShallowEqual,
+    effectHook
+  );
 }
-DiagramFeatures.Overlays = ({ children: children2 }) => /* @__PURE__ */ jsx(
-  DiagramFeatures,
-  {
-    overrides: {
-      enableControls: !1,
-      enableReadOnly: !0,
-      enableEdgeEditing: !1
-    },
-    children: children2
-  }
-);
-function useEnabledFeatures() {
-  return useContext(DiagramFeaturesContext);
+const useXYFlow = useReactFlow;
+function useXYStore(selector2, equalityFn) {
+  return useStore(
+    useCallbackRef(selector2),
+    equalityFn ?? shallowEqual
+  );
 }
-function IfEnabled({
-  feature,
-  children: children2,
-  and: and2 = !0
-}) {
-  return useEnabledFeatures()[`enable${feature}`] === !0 && and2 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+const useXYStoreApi = useStoreApi, useXYInternalNode = useInternalNode, selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
+function useCurrentZoom() {
+  return useStore(selectCurrentZoom);
 }
-function IfNotEnabled({ feature, children: children2 }) {
-  return useEnabledFeatures()[`enable${feature}`] !== !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+const selectZoom = (state) => state.transform[2] < 0.2;
+function useIsZoomTooSmall() {
+  return useStore(selectZoom);
 }
-function IfReadOnly({ children: children2 }) {
-  return useEnabledFeatures().enableReadOnly === !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+function getDevicePixelRatio() {
+  const dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : 1;
+  return t$9(Math.floor(dpr), {
+    min: 1,
+    max: 4
+  });
 }
-function IfNotReadOnly({ children: children2 }) {
-  return useEnabledFeatures().enableReadOnly === !0 ? null : /* @__PURE__ */ jsx(Fragment$1, { children: children2 });
+let knownDpr;
+function roundDpr(v) {
+  return knownDpr ??= getDevicePixelRatio(), knownDpr < 2 ? Math.round(v) : Math.round(v * knownDpr) / knownDpr;
 }
-const IconRendererContext = createContext(null);
-function IconRendererProvider({
-  value,
-  children: children2
-}) {
-  return useContext(IconRendererContext) ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children: children2 });
+const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
+function crt(v) {
+  return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
 }
-function IconRenderer({
-  element,
-  className
-}) {
-  const RenderIcon = useContext(IconRendererContext);
-  if (!element || !element.icon || element.icon === "none")
-    return null;
-  let icon;
-  return element.icon.startsWith("http://") || element.icon.startsWith("https://") ? icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title }) : RenderIcon && (icon = /* @__PURE__ */ jsx(RenderIcon, { node: element })), icon ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        className,
-        "likec4-element-icon"
-      ),
-      "data-likec4-icon": element.icon,
-      children: icon
-    }
-  ) : null;
-}
-const ShapeIcons = {
-  browser: IconBrowser,
-  cylinder: IconCylinder,
-  mobile: IconDeviceMobile,
-  person: IconUser,
-  queue: IconReorder,
-  rectangle: IconRectangularPrism,
-  storage: IconCylinder
-};
-function IconOrShapeRenderer({
-  element,
-  className
-}) {
-  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
-  if (icon)
-    return icon;
-  const ShapeIcon = ShapeIcons[element.shape];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        className,
-        "likec4-shape-icon"
-      ),
-      children: /* @__PURE__ */ jsx(ShapeIcon, {})
-    }
-  );
-}
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
-const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop), composeShouldForwardProps = (tag, shouldForwardProp) => tag.__shouldForwardProps__ && shouldForwardProp ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) : shouldForwardProp, composeCvaFn = (cvaA, cvaB) => {
-  if (cvaA && !cvaB) return cvaA;
-  if (!cvaA && cvaB) return cvaB;
-  if (cvaA.__cva__ && cvaB.__cva__ || cvaA.__recipe__ && cvaB.__recipe__) return cvaA.merge(cvaB);
-  const error = new TypeError("Cannot merge cva with recipe. Please use either cva or recipe.");
-  throw TypeError.captureStackTrace?.(error), error;
-}, getDisplayName = (Component) => typeof Component == "string" ? Component : Component?.displayName || Component?.name || "Component";
-function styledFn(Dynamic, configOrCva = {}, options = {}) {
-  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva), forwardFn = options.shouldForwardProp || defaultShouldForwardProp, shouldForwardProp = (prop) => options.forwardProps?.includes(prop) ? !0 : forwardFn(prop, cvaFn.variantKeys), defaultProps2 = Object.assign(
-    options.dataAttr && configOrCva.__name__ ? { "data-recipe": configOrCva.__name__ } : {},
-    options.defaultProps
-  ), __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn), __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp), __base__ = Dynamic.__base__ || Dynamic, StyledComponent = /* @__PURE__ */ forwardRef(function(props, ref) {
-    const { as: Element2 = __base__, children: children2, ...restProps } = props, combinedProps = useMemo(() => Object.assign({}, defaultProps2, restProps), [restProps]), [htmlProps2, forwardedProps, variantProps2, styleProps, elementProps] = useMemo(() => splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty), [combinedProps]);
-    function recipeClass() {
-      const { css: cssStyles, ...propStyles } = styleProps, compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps2);
-      return cx(__cvaFn__(variantProps2, !1), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className);
-    }
-    function cvaClass() {
-      const { css: cssStyles, ...propStyles } = styleProps, cvaStyles = __cvaFn__.raw(variantProps2);
-      return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className);
-    }
-    const classes2 = configOrCva.__recipe__ ? recipeClass : cvaClass;
-    return createElement(Element2, {
-      ref,
-      ...forwardedProps,
-      ...elementProps,
-      ...normalizeHTMLProps(htmlProps2),
-      className: classes2()
-    }, combinedProps.children ?? children2);
-  }), name = getDisplayName(__base__);
-  return StyledComponent.displayName = `styled.${name}`, StyledComponent.__cva__ = __cvaFn__, StyledComponent.__base__ = __base__, StyledComponent.__shouldForwardProps__ = shouldForwardProp, StyledComponent;
-}
-function createJsxFactory() {
-  const cache = /* @__PURE__ */ new Map();
-  return new Proxy(styledFn, {
-    apply(_, __, args) {
-      return styledFn(...args);
-    },
-    get(_, el) {
-      return cache.has(el) || cache.set(el, styledFn(el)), cache.get(el);
-    }
-  });
-}
-const styled = /* @__PURE__ */ createJsxFactory(), boxConfig = {
-  transform(props) {
-    return props;
-  }
-}, getBoxStyle = (styles = {}) => {
-  const _styles = getPatternStyles(boxConfig, styles);
-  return boxConfig.transform(_styles, patternFns);
-}, Box = /* @__PURE__ */ forwardRef(function(props, ref) {
-  const [patternProps, restProps] = splitProps(props, []), styleProps = getBoxStyle(patternProps), mergedProps = { ref, ...styleProps, ...restProps };
-  return createElement(styled.div, mergedProps);
-}), hstackConfig = {
-  transform(props) {
-    const { justify, gap, ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: justify,
-      gap,
-      flexDirection: "row",
-      ...rest
-    };
-  },
-  defaultValues: { gap: "sm" }
-}, getHstackStyle = (styles = {}) => {
-  const _styles = getPatternStyles(hstackConfig, styles);
-  return hstackConfig.transform(_styles, patternFns);
-}, hstack = (styles) => css(getHstackStyle(styles));
-hstack.raw = getHstackStyle;
-const HStack = /* @__PURE__ */ forwardRef(function(props, ref) {
-  const [patternProps, restProps] = splitProps(props, ["justify", "gap"]), styleProps = getHstackStyle(patternProps), mergedProps = { ref, ...styleProps, ...restProps };
-  return createElement(styled.div, mergedProps);
-});
-let listenerQueue = [], lqIndex = 0;
-const QUEUE_ITEMS_PER_LISTENER = 4;
-let atom = (initialValue) => {
-  let listeners = [], $atom = {
-    get() {
-      return $atom.lc || $atom.listen(() => {
-      })(), $atom.value;
-    },
-    lc: 0,
-    listen(listener) {
-      return $atom.lc = listeners.push(listener), () => {
-        for (let i2 = lqIndex + QUEUE_ITEMS_PER_LISTENER; i2 < listenerQueue.length; )
-          listenerQueue[i2] === listener ? listenerQueue.splice(i2, QUEUE_ITEMS_PER_LISTENER) : i2 += QUEUE_ITEMS_PER_LISTENER;
-        let index2 = listeners.indexOf(listener);
-        ~index2 && (listeners.splice(index2, 1), --$atom.lc || $atom.off());
-      };
-    },
-    notify(oldValue, changedKey) {
-      let runListenerQueue = !listenerQueue.length;
-      for (let listener of listeners)
-        listenerQueue.push(listener, $atom.value, oldValue, changedKey);
-      if (runListenerQueue) {
-        for (lqIndex = 0; lqIndex < listenerQueue.length; lqIndex += QUEUE_ITEMS_PER_LISTENER)
-          listenerQueue[lqIndex](
-            listenerQueue[lqIndex + 1],
-            listenerQueue[lqIndex + 2],
-            listenerQueue[lqIndex + 3]
-          );
-        listenerQueue.length = 0;
-      }
-    },
-    /* It will be called on last listener unsubscribing.
-       We will redefine it in onMount and onStop. */
-    off() {
-    },
-    set(newValue) {
-      let oldValue = $atom.value;
-      oldValue !== newValue && ($atom.value = newValue, $atom.notify(oldValue));
-    },
-    subscribe(listener) {
-      let unbind = $atom.listen(listener);
-      return listener($atom.value), unbind;
-    },
-    value: initialValue
-  };
-  return $atom;
-};
-const ReduceGraphicsModeCtx = createContext(null);
-function useIsReducedGraphics() {
-  const isReduced = useContext(ReduceGraphicsModeCtx);
-  return isReduced === null && console.warn("ReduceGraphicsMode is not provided"), isReduced ?? !1;
-}
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
-  "PanningAtomSafeCtx is not provided"
-);
-function ReduceGraphicsContext({ reduceGraphics, children: children2 }) {
-  const $isPanningRef = useRef(null);
-  return $isPanningRef.current || ($isPanningRef.current = atom(reduceGraphics)), /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: children2 }) });
-}
-const LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
-function EnsureCurrentViewModel({ children: children2 }) {
-  return useContext(CurrentViewModelContext) ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
-}
-function useLikeC4Model() {
-  const model = useContext(LikeC4ModelContext);
-  if (!model)
-    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
-  return model;
-}
-function useLikeC4ViewModel(viewId) {
-  return useLikeC4Model().view(viewId);
-}
-function useLikeC4Specification() {
-  const model = useLikeC4Model(), [specification, setSpecification] = useState(model.$data.specification);
-  return useEffect(() => {
-    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
-  }, [model]), specification;
-}
-const TagStylesContext = createContext({}), radixColors = [
-  "yellow",
-  "orange",
-  "amber",
-  "tomato",
-  "red",
-  "ruby",
-  "crimson",
-  "pink",
-  "pink",
-  "purple",
-  "violet",
-  "indigo",
-  "blue",
-  "teal",
-  "grass",
-  "lime"
-], generateColorVars = (spec) => {
-  const color2 = spec.color;
-  if (isTagColorSpecified(spec))
-    return `
-      --colors-likec4-tag-bg: ${color2};
-      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color2}, var(--colors-likec4-mix-color) 20%);
-    `;
-  if (!radixColors.includes(color2))
-    return "";
-  let textcolor = "12";
-  return ["mint", "grass", "lime", "yellow", "amber"].includes(color2) && (textcolor = "dark-2"), `
-  --colors-likec4-tag-border: var(--colors-${color2}-8);
-  --colors-likec4-tag-bg: var(--colors-${color2}-9);
-  --colors-likec4-tag-bg-hover: var(--colors-${color2}-10);
-  --colors-likec4-tag-text: var(--colors-${color2}-${textcolor});
-  `;
-};
-function TagStylesProvider({ children: children2, rootSelector }) {
-  const tags = useLikeC4Specification().tags, { specs, stylesheet } = useDeepCompareMemo(() => tags ? {
-    specs: tags,
-    stylesheet: t$7(
-      t$5(tags),
-      t$4(([tag, spec]) => [
-        `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
-        generateColorVars(spec),
-        "}"
-      ]),
-      t$3(`
-`)
-    )
-  } : { specs: {}, stylesheet: "" }, [tags, rootSelector]);
-  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: specs, children: [
-    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
-    children2
-  ] });
-}
-function TagStylesheet({ stylesheet }) {
-  const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx("style", { "data-likec4-tag-stylesheet": !0, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
-}
-function useTagSpecification(tag) {
-  return useContext(TagStylesContext)[tag] ?? {
-    color: "tomato"
-  };
-}
-const RootContainerContext = createContext(createRef());
-function RootContainer({
-  id: id2,
-  className,
-  reduceGraphics = !1,
-  children: children2
-}) {
-  const ref = useRef(null), $isPanning = usePanningAtom();
-  return useEffect(() => $isPanning.listen((isPanning) => {
-    ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
-  }), [$isPanning]), /* @__PURE__ */ jsx(
-    Box,
-    {
-      id: id2,
-      className: cx("likec4-root", className),
-      ref,
-      ...reduceGraphics && {
-        "data-likec4-reduced-graphics": !0
-      },
-      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id2}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children: children2 }) })
-    }
-  );
-}
-function useRootContainer() {
-  return useContext(RootContainerContext).current;
-}
-const noop = () => {
-}, depsShallowEqual = (d1, d2) => {
-  if (d1 === d2)
-    return !0;
-  if (d1.length !== d2.length)
-    return !1;
-  for (const [i2, element] of d1.entries())
-    if (element !== d2[i2] && !shallowEqual(element, d2[i2]))
-      return !1;
-  return !0;
-};
-function useUpdateEffect(callback, deps, equalityFn, effectHook) {
-  const isFirstMount = useFirstMountState();
-  useCustomCompareEffect(
-    isFirstMount ? noop : callback,
-    deps,
-    equalityFn ?? depsShallowEqual,
-    effectHook
-  );
-}
-const useXYFlow = useReactFlow;
-function useXYStore(selector2, equalityFn) {
-  return useStore(
-    useCallbackRef(selector2),
-    equalityFn ?? shallowEqual
-  );
-}
-const useXYStoreApi = useStoreApi, useXYInternalNode = useInternalNode, selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
-function useCurrentZoom() {
-  return useStore(selectCurrentZoom);
-}
-const selectZoom = (state) => state.transform[2] < 0.2;
-function useIsZoomTooSmall() {
-  return useStore(selectZoom);
-}
-function getDevicePixelRatio() {
-  const dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : 1;
-  return t$9(Math.floor(dpr), {
-    min: 1,
-    max: 4
-  });
-}
-let knownDpr;
-function roundDpr(v) {
-  return knownDpr ??= getDevicePixelRatio(), knownDpr < 2 ? Math.round(v) : Math.round(v * knownDpr) / knownDpr;
-}
-const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
-function crt(v) {
-  return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
-}
-const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = Number.MAX_SAFE_INTEGER || 9007199254740991, nMin = Number.MIN_SAFE_INTEGER || -9007199254740991, ZERO = { x: 0, y: 0, z: 0 }, utils = {
-  // Legendre-Gauss abscissae with n=24 (x_i values, defined at i=n as the roots of the nth order Legendre polynomial Pn(x))
-  Tvalues: [
-    -0.06405689286260563,
-    0.06405689286260563,
-    -0.1911188674736163,
-    0.1911188674736163,
-    -0.3150426796961634,
-    0.3150426796961634,
-    -0.4337935076260451,
-    0.4337935076260451,
-    -0.5454214713888396,
-    0.5454214713888396,
-    -0.6480936519369755,
-    0.6480936519369755,
-    -0.7401241915785544,
-    0.7401241915785544,
-    -0.820001985973903,
-    0.820001985973903,
-    -0.8864155270044011,
-    0.8864155270044011,
-    -0.9382745520027328,
-    0.9382745520027328,
-    -0.9747285559713095,
-    0.9747285559713095,
-    -0.9951872199970213,
-    0.9951872199970213
-  ],
-  // Legendre-Gauss weights with n=24 (w_i values, defined by a function linked to in the Bezier primer article)
-  Cvalues: [
-    0.12793819534675216,
-    0.12793819534675216,
-    0.1258374563468283,
-    0.1258374563468283,
-    0.12167047292780339,
-    0.12167047292780339,
-    0.1155056680537256,
-    0.1155056680537256,
-    0.10744427011596563,
-    0.10744427011596563,
-    0.09761865210411388,
-    0.09761865210411388,
-    0.08619016153195327,
-    0.08619016153195327,
-    0.0733464814110803,
-    0.0733464814110803,
-    0.05929858491543678,
-    0.05929858491543678,
-    0.04427743881741981,
-    0.04427743881741981,
-    0.028531388628933663,
-    0.028531388628933663,
-    0.0123412297999872,
-    0.0123412297999872
-  ],
-  arcfn: function(t2, derivativeFn) {
-    const d = derivativeFn(t2);
-    let l = d.x * d.x + d.y * d.y;
-    return typeof d.z < "u" && (l += d.z * d.z), sqrt$1(l);
-  },
-  compute: function(t2, points, _3d) {
-    if (t2 === 0)
-      return points[0].t = 0, points[0];
-    const order = points.length - 1;
-    if (t2 === 1)
-      return points[order].t = 1, points[order];
-    const mt = 1 - t2;
-    let p = points;
-    if (order === 0)
-      return points[0].t = t2, points[0];
-    if (order === 1) {
-      const ret = {
-        x: mt * p[0].x + t2 * p[1].x,
-        y: mt * p[0].y + t2 * p[1].y,
-        t: t2
-      };
-      return _3d && (ret.z = mt * p[0].z + t2 * p[1].z), ret;
+const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = Number.MAX_SAFE_INTEGER || 9007199254740991, nMin = Number.MIN_SAFE_INTEGER || -9007199254740991, ZERO = { x: 0, y: 0, z: 0 }, utils = {
+  // Legendre-Gauss abscissae with n=24 (x_i values, defined at i=n as the roots of the nth order Legendre polynomial Pn(x))
+  Tvalues: [
+    -0.06405689286260563,
+    0.06405689286260563,
+    -0.1911188674736163,
+    0.1911188674736163,
+    -0.3150426796961634,
+    0.3150426796961634,
+    -0.4337935076260451,
+    0.4337935076260451,
+    -0.5454214713888396,
+    0.5454214713888396,
+    -0.6480936519369755,
+    0.6480936519369755,
+    -0.7401241915785544,
+    0.7401241915785544,
+    -0.820001985973903,
+    0.820001985973903,
+    -0.8864155270044011,
+    0.8864155270044011,
+    -0.9382745520027328,
+    0.9382745520027328,
+    -0.9747285559713095,
+    0.9747285559713095,
+    -0.9951872199970213,
+    0.9951872199970213
+  ],
+  // Legendre-Gauss weights with n=24 (w_i values, defined by a function linked to in the Bezier primer article)
+  Cvalues: [
+    0.12793819534675216,
+    0.12793819534675216,
+    0.1258374563468283,
+    0.1258374563468283,
+    0.12167047292780339,
+    0.12167047292780339,
+    0.1155056680537256,
+    0.1155056680537256,
+    0.10744427011596563,
+    0.10744427011596563,
+    0.09761865210411388,
+    0.09761865210411388,
+    0.08619016153195327,
+    0.08619016153195327,
+    0.0733464814110803,
+    0.0733464814110803,
+    0.05929858491543678,
+    0.05929858491543678,
+    0.04427743881741981,
+    0.04427743881741981,
+    0.028531388628933663,
+    0.028531388628933663,
+    0.0123412297999872,
+    0.0123412297999872
+  ],
+  arcfn: function(t2, derivativeFn) {
+    const d = derivativeFn(t2);
+    let l = d.x * d.x + d.y * d.y;
+    return typeof d.z < "u" && (l += d.z * d.z), sqrt$1(l);
+  },
+  compute: function(t2, points, _3d) {
+    if (t2 === 0)
+      return points[0].t = 0, points[0];
+    const order = points.length - 1;
+    if (t2 === 1)
+      return points[order].t = 1, points[order];
+    const mt = 1 - t2;
+    let p = points;
+    if (order === 0)
+      return points[0].t = t2, points[0];
+    if (order === 1) {
+      const ret = {
+        x: mt * p[0].x + t2 * p[1].x,
+        y: mt * p[0].y + t2 * p[1].y,
+        t: t2
+      };
+      return _3d && (ret.z = mt * p[0].z + t2 * p[1].z), ret;
     }
     if (order < 4) {
       let mt2 = mt * mt, t22 = t2 * t2, a, b, c, d = 0;
@@ -17282,247 +16869,666 @@ class Bezier {
         };
         return p.z && nv.z && (ret.z = p.z + t2 * nv.z), ret;
       });
-      return [new Bezier(coords)];
-    }
-    return this.reduce().map(function(s) {
-      return s._linear ? s.offset(t2)[0] : s.scale(t2);
+      return [new Bezier(coords)];
+    }
+    return this.reduce().map(function(s) {
+      return s._linear ? s.offset(t2)[0] : s.scale(t2);
+    });
+  }
+  simple() {
+    if (this.order === 3) {
+      const a1 = utils.angle(this.points[0], this.points[3], this.points[1]), a2 = utils.angle(this.points[0], this.points[3], this.points[2]);
+      if (a1 > 0 && a2 < 0 || a1 < 0 && a2 > 0) return !1;
+    }
+    const n1 = this.normal(0), n2 = this.normal(1);
+    let s = n1.x * n2.x + n1.y * n2.y;
+    return this._3d && (s += n1.z * n2.z), abs(acos(s)) < pi / 3;
+  }
+  reduce() {
+    let i2, t1 = 0, t2 = 0, step = 0.01, segment, pass1 = [], pass2 = [], extrema = this.extrema().values;
+    for (extrema.indexOf(0) === -1 && (extrema = [0].concat(extrema)), extrema.indexOf(1) === -1 && extrema.push(1), t1 = extrema[0], i2 = 1; i2 < extrema.length; i2++)
+      t2 = extrema[i2], segment = this.split(t1, t2), segment._t1 = t1, segment._t2 = t2, pass1.push(segment), t1 = t2;
+    return pass1.forEach(function(p1) {
+      for (t1 = 0, t2 = 0; t2 <= 1; )
+        for (t2 = t1 + step; t2 <= 1 + step; t2 += step)
+          if (segment = p1.split(t1, t2), !segment.simple()) {
+            if (t2 -= step, abs(t1 - t2) < step)
+              return [];
+            segment = p1.split(t1, t2), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = utils.map(t2, 0, 1, p1._t1, p1._t2), pass2.push(segment), t1 = t2;
+            break;
+          }
+      t1 < 1 && (segment = p1.split(t1, 1), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = p1._t2, pass2.push(segment));
+    }), pass2;
+  }
+  translate(v, d1, d2) {
+    d2 = typeof d2 == "number" ? d2 : d1;
+    const o = this.order;
+    let d = this.points.map((_, i2) => (1 - i2 / o) * d1 + i2 / o * d2);
+    return new Bezier(
+      this.points.map((p, i2) => ({
+        x: p.x + v.x * d[i2],
+        y: p.y + v.y * d[i2]
+      }))
+    );
+  }
+  scale(d) {
+    const order = this.order;
+    let distanceFn = !1;
+    if (typeof d == "function" && (distanceFn = d), distanceFn && order === 2)
+      return this.raise().scale(distanceFn);
+    const clockwise = this.clockwise, points = this.points;
+    if (this._linear)
+      return this.translate(
+        this.normal(0),
+        distanceFn ? distanceFn(0) : d,
+        distanceFn ? distanceFn(1) : d
+      );
+    const r1 = distanceFn ? distanceFn(0) : d, r2 = distanceFn ? distanceFn(1) : d, v = [this.offset(0, 10), this.offset(1, 10)], np = [], o = utils.lli4(v[0], v[0].c, v[1], v[1].c);
+    if (!o)
+      throw new Error("cannot scale this curve. Try reducing it first.");
+    return [0, 1].forEach(function(t2) {
+      const p = np[t2 * order] = utils.copy(points[t2 * order]);
+      p.x += (t2 ? r2 : r1) * v[t2].n.x, p.y += (t2 ? r2 : r1) * v[t2].n.y;
+    }), distanceFn ? ([0, 1].forEach(function(t2) {
+      if (!(order === 2 && t2)) {
+        var p = points[t2 + 1], ov = {
+          x: p.x - o.x,
+          y: p.y - o.y
+        }, rc = distanceFn ? distanceFn((t2 + 1) / order) : d;
+        distanceFn && !clockwise && (rc = -rc);
+        var m2 = sqrt(ov.x * ov.x + ov.y * ov.y);
+        ov.x /= m2, ov.y /= m2, np[t2 + 1] = {
+          x: p.x + rc * ov.x,
+          y: p.y + rc * ov.y
+        };
+      }
+    }), new Bezier(np)) : ([0, 1].forEach((t2) => {
+      if (order === 2 && t2) return;
+      const p = np[t2 * order], d2 = this.derivative(t2), p2 = { x: p.x + d2.x, y: p.y + d2.y };
+      np[t2 + 1] = utils.lli4(p, p2, o, points[t2 + 1]);
+    }), new Bezier(np));
+  }
+  outline(d1, d2, d3, d4) {
+    if (d2 = d2 === void 0 ? d1 : d2, this._linear) {
+      const n2 = this.normal(0), start2 = this.points[0], end = this.points[this.points.length - 1];
+      let s, mid, e2;
+      d3 === void 0 && (d3 = d1, d4 = d2), s = { x: start2.x + n2.x * d1, y: start2.y + n2.y * d1 }, e2 = { x: end.x + n2.x * d3, y: end.y + n2.y * d3 }, mid = { x: (s.x + e2.x) / 2, y: (s.y + e2.y) / 2 };
+      const fline = [s, mid, e2];
+      s = { x: start2.x - n2.x * d2, y: start2.y - n2.y * d2 }, e2 = { x: end.x - n2.x * d4, y: end.y - n2.y * d4 }, mid = { x: (s.x + e2.x) / 2, y: (s.y + e2.y) / 2 };
+      const bline = [e2, mid, s], ls2 = utils.makeline(bline[2], fline[0]), le2 = utils.makeline(fline[2], bline[0]), segments2 = [ls2, new Bezier(fline), le2, new Bezier(bline)];
+      return new PolyBezier(segments2);
+    }
+    const reduced = this.reduce(), len = reduced.length, fcurves = [];
+    let bcurves = [], p, alen = 0, tlen = this.length();
+    const graduated = typeof d3 < "u" && typeof d4 < "u";
+    function linearDistanceFunction(s, e2, tlen2, alen2, slen) {
+      return function(v) {
+        const f1 = alen2 / tlen2, f2 = (alen2 + slen) / tlen2, d = e2 - s;
+        return utils.map(v, 0, 1, s + f1 * d, s + f2 * d);
+      };
+    }
+    reduced.forEach(function(segment) {
+      const slen = segment.length();
+      graduated ? (fcurves.push(
+        segment.scale(linearDistanceFunction(d1, d3, tlen, alen, slen))
+      ), bcurves.push(
+        segment.scale(linearDistanceFunction(-d2, -d4, tlen, alen, slen))
+      )) : (fcurves.push(segment.scale(d1)), bcurves.push(segment.scale(-d2))), alen += slen;
+    }), bcurves = bcurves.map(function(s) {
+      return p = s.points, p[3] ? s.points = [p[3], p[2], p[1], p[0]] : s.points = [p[2], p[1], p[0]], s;
+    }).reverse();
+    const fs = fcurves[0].points[0], fe = fcurves[len - 1].points[fcurves[len - 1].points.length - 1], bs = bcurves[len - 1].points[bcurves[len - 1].points.length - 1], be = bcurves[0].points[0], ls = utils.makeline(bs, fs), le = utils.makeline(fe, be), segments = [ls].concat(fcurves).concat([le]).concat(bcurves);
+    return new PolyBezier(segments);
+  }
+  outlineshapes(d1, d2, curveIntersectionThreshold) {
+    d2 = d2 || d1;
+    const outline = this.outline(d1, d2).curves, shapes = [];
+    for (let i2 = 1, len = outline.length; i2 < len / 2; i2++) {
+      const shape = utils.makeshape(
+        outline[i2],
+        outline[len - i2],
+        curveIntersectionThreshold
+      );
+      shape.startcap.virtual = i2 > 1, shape.endcap.virtual = i2 < len / 2 - 1, shapes.push(shape);
+    }
+    return shapes;
+  }
+  intersects(curve, curveIntersectionThreshold) {
+    return curve ? curve.p1 && curve.p2 ? this.lineIntersects(curve) : (curve instanceof Bezier && (curve = curve.reduce()), this.curveintersects(
+      this.reduce(),
+      curve,
+      curveIntersectionThreshold
+    )) : this.selfintersects(curveIntersectionThreshold);
+  }
+  lineIntersects(line) {
+    const mx = min(line.p1.x, line.p2.x), my = min(line.p1.y, line.p2.y), MX = max(line.p1.x, line.p2.x), MY = max(line.p1.y, line.p2.y);
+    return utils.roots(this.points, line).filter((t2) => {
+      var p = this.get(t2);
+      return utils.between(p.x, mx, MX) && utils.between(p.y, my, MY);
+    });
+  }
+  selfintersects(curveIntersectionThreshold) {
+    const reduced = this.reduce(), len = reduced.length - 2, results = [];
+    for (let i2 = 0, result, left, right; i2 < len; i2++)
+      left = reduced.slice(i2, i2 + 1), right = reduced.slice(i2 + 2), result = this.curveintersects(left, right, curveIntersectionThreshold), results.push(...result);
+    return results;
+  }
+  curveintersects(c1, c2, curveIntersectionThreshold) {
+    const pairs = [];
+    c1.forEach(function(l) {
+      c2.forEach(function(r2) {
+        l.overlaps(r2) && pairs.push({ left: l, right: r2 });
+      });
     });
+    let intersections = [];
+    return pairs.forEach(function(pair) {
+      const result = utils.pairiteration(
+        pair.left,
+        pair.right,
+        curveIntersectionThreshold
+      );
+      result.length > 0 && (intersections = intersections.concat(result));
+    }), intersections;
   }
-  simple() {
-    if (this.order === 3) {
-      const a1 = utils.angle(this.points[0], this.points[3], this.points[1]), a2 = utils.angle(this.points[0], this.points[3], this.points[2]);
-      if (a1 > 0 && a2 < 0 || a1 < 0 && a2 > 0) return !1;
-    }
-    const n1 = this.normal(0), n2 = this.normal(1);
-    let s = n1.x * n2.x + n1.y * n2.y;
-    return this._3d && (s += n1.z * n2.z), abs(acos(s)) < pi / 3;
+  arcs(errorThreshold) {
+    return errorThreshold = errorThreshold || 0.5, this._iterate(errorThreshold, []);
   }
-  reduce() {
-    let i2, t1 = 0, t2 = 0, step = 0.01, segment, pass1 = [], pass2 = [], extrema = this.extrema().values;
-    for (extrema.indexOf(0) === -1 && (extrema = [0].concat(extrema)), extrema.indexOf(1) === -1 && extrema.push(1), t1 = extrema[0], i2 = 1; i2 < extrema.length; i2++)
-      t2 = extrema[i2], segment = this.split(t1, t2), segment._t1 = t1, segment._t2 = t2, pass1.push(segment), t1 = t2;
-    return pass1.forEach(function(p1) {
-      for (t1 = 0, t2 = 0; t2 <= 1; )
-        for (t2 = t1 + step; t2 <= 1 + step; t2 += step)
-          if (segment = p1.split(t1, t2), !segment.simple()) {
-            if (t2 -= step, abs(t1 - t2) < step)
-              return [];
-            segment = p1.split(t1, t2), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = utils.map(t2, 0, 1, p1._t1, p1._t2), pass2.push(segment), t1 = t2;
+  _error(pc, np1, s, e2) {
+    const q = (e2 - s) / 4, c1 = this.get(s + q), c2 = this.get(e2 - q), ref = utils.dist(pc, np1), d1 = utils.dist(pc, c1), d2 = utils.dist(pc, c2);
+    return abs(d1 - ref) + abs(d2 - ref);
+  }
+  _iterate(errorThreshold, circles) {
+    let t_s = 0, t_e = 1, safety;
+    do {
+      safety = 0, t_e = 1;
+      let np1 = this.get(t_s), np2, np3, arc, prev_arc, curr_good = !1, prev_good = !1, done, t_m = t_e, prev_e = 1;
+      do
+        if (prev_good = curr_good, prev_arc = arc, t_m = (t_s + t_e) / 2, np2 = this.get(t_m), np3 = this.get(t_e), arc = utils.getccenter(np1, np2, np3), arc.interval = {
+          start: t_s,
+          end: t_e
+        }, curr_good = this._error(arc, np1, t_s, t_e) <= errorThreshold, done = prev_good && !curr_good, done || (prev_e = t_e), curr_good) {
+          if (t_e >= 1) {
+            if (arc.interval.end = prev_e = 1, prev_arc = arc, t_e > 1) {
+              let d = {
+                x: arc.x + arc.r * cos(arc.e),
+                y: arc.y + arc.r * sin(arc.e)
+              };
+              arc.e += utils.angle({ x: arc.x, y: arc.y }, d, this.get(1));
+            }
             break;
           }
-      t1 < 1 && (segment = p1.split(t1, 1), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = p1._t2, pass2.push(segment));
-    }), pass2;
+          t_e = t_e + (t_e - t_s) / 2;
+        } else
+          t_e = t_m;
+      while (!done && safety++ < 100);
+      if (safety >= 100)
+        break;
+      prev_arc = prev_arc || arc, circles.push(prev_arc), t_s = prev_e;
+    } while (t_e < 1);
+    return circles;
   }
-  translate(v, d1, d2) {
-    d2 = typeof d2 == "number" ? d2 : d1;
-    const o = this.order;
-    let d = this.points.map((_, i2) => (1 - i2 / o) * d1 + i2 / o * d2);
-    return new Bezier(
-      this.points.map((p, i2) => ({
-        x: p.x + v.x * d[i2],
-        y: p.y + v.y * d[i2]
-      }))
-    );
+}
+function bezierControlPoints(diagramEdge) {
+  let [start2, ...bezierPoints] = diagramEdge.points;
+  invariant(start2, "start should be defined");
+  const handles = [
+    // start
+  ];
+  for (; t$6(bezierPoints, 3); ) {
+    const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
+    inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
+      const { x, y } = bezier.get(t2);
+      handles.push({
+        x: Math.round(x),
+        y: Math.round(y)
+      });
+    }), bezierPoints = rest, start2 = end;
   }
-  scale(d) {
-    const order = this.order;
-    let distanceFn = !1;
-    if (typeof d == "function" && (distanceFn = d), distanceFn && order === 2)
-      return this.raise().scale(distanceFn);
-    const clockwise = this.clockwise, points = this.points;
-    if (this._linear)
-      return this.translate(
-        this.normal(0),
-        distanceFn ? distanceFn(0) : d,
-        distanceFn ? distanceFn(1) : d
-      );
-    const r1 = distanceFn ? distanceFn(0) : d, r2 = distanceFn ? distanceFn(1) : d, v = [this.offset(0, 10), this.offset(1, 10)], np = [], o = utils.lli4(v[0], v[0].c, v[1], v[1].c);
-    if (!o)
-      throw new Error("cannot scale this curve. Try reducing it first.");
-    return [0, 1].forEach(function(t2) {
-      const p = np[t2 * order] = utils.copy(points[t2 * order]);
-      p.x += (t2 ? r2 : r1) * v[t2].n.x, p.y += (t2 ? r2 : r1) * v[t2].n.y;
-    }), distanceFn ? ([0, 1].forEach(function(t2) {
-      if (!(order === 2 && t2)) {
-        var p = points[t2 + 1], ov = {
-          x: p.x - o.x,
-          y: p.y - o.y
-        }, rc = distanceFn ? distanceFn((t2 + 1) / order) : d;
-        distanceFn && !clockwise && (rc = -rc);
-        var m2 = sqrt(ov.x * ov.x + ov.y * ov.y);
-        ov.x /= m2, ov.y /= m2, np[t2 + 1] = {
-          x: p.x + rc * ov.x,
-          y: p.y + rc * ov.y
-        };
-      }
-    }), new Bezier(np)) : ([0, 1].forEach((t2) => {
-      if (order === 2 && t2) return;
-      const p = np[t2 * order], d2 = this.derivative(t2), p2 = { x: p.x + d2.x, y: p.y + d2.y };
-      np[t2 + 1] = utils.lli4(p, p2, o, points[t2 + 1]);
-    }), new Bezier(np));
+  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
+}
+const isClose = (a, b) => Math.abs(a - b) < 3.1;
+function isSamePoint(a, b) {
+  const [ax, ay] = e$4(a) ? a : [a.x, a.y], [bx, by] = e$4(b) ? b : [b.x, b.y];
+  return isClose(ax, bx) && isClose(ay, by);
+}
+function stopPropagation(e2) {
+  return e2.stopPropagation();
+}
+function centerXYInternalNode(nd) {
+  const { width, height } = getNodeDimensions(nd);
+  return {
+    x: nd.internals.positionAbsolute.x + width / 2,
+    y: nd.internals.positionAbsolute.y + height / 2
+  };
+}
+function bezierPath(bezierSpline) {
+  let [start2, ...points] = bezierSpline;
+  invariant(start2, "start should be defined");
+  let path = `M ${start2[0]},${start2[1]}`;
+  for (; t$6(points, 3); ) {
+    const [cp1, cp2, end, ...rest] = points;
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
+  }
+  return invariant(points.length === 0, "all points should be consumed"), path;
+}
+const HandlerNames = [
+  "onBurgerMenuClick",
+  "onNavigateTo",
+  "onOpenSource",
+  "onCanvasClick",
+  "onCanvasContextMenu",
+  "onEdgeClick",
+  "onEdgeContextMenu",
+  "onNodeClick",
+  "onNodeContextMenu",
+  "onChange",
+  "onCanvasDblClick"
+], DiagramEventHandlersReactContext = createContext({
+  ...t$1(HandlerNames, (name) => [name, null]),
+  handlersRef: {
+    current: {}
+  }
+});
+function DiagramEventHandlers({
+  handlers,
+  children: children2
+}) {
+  const handlersRef = useSyncedRef(handlers), deps = HandlerNames.map((name) => e$2(handlers[name])), value = useMemo(() => ({
+    ...t$1(HandlerNames, (name) => handlersRef.current[name] ? [name, (...args) => handlersRef.current[name]?.(...args)] : [name, null]),
+    handlersRef
+  }), [handlersRef, ...deps]);
+  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children: children2 });
+}
+function useDiagramEventHandlers() {
+  return useContext(DiagramEventHandlersReactContext);
+}
+const FeatureNames = [
+  "Controls",
+  "ReadOnly",
+  "FocusMode",
+  "NavigateTo",
+  "ElementDetails",
+  "RelationshipDetails",
+  "RelationshipBrowser",
+  "Search",
+  "NavigationButtons",
+  "Notations",
+  "DynamicViewWalkthrough",
+  "EdgeEditing",
+  "ViewTitle",
+  "FitView",
+  /**
+   * Running in VSCode
+   */
+  "Vscode",
+  "ElementTags"
+], AllDisabled = t$1(
+  FeatureNames,
+  (name) => [`enable${name}`, !1]
+), DiagramFeaturesContext = createContext(AllDisabled), validate = (features) => {
+  let {
+    enableReadOnly,
+    enableEdgeEditing,
+    ...rest
+  } = features;
+  return enableReadOnly && (enableEdgeEditing = !1), {
+    enableReadOnly,
+    enableEdgeEditing,
+    ...rest
+  };
+};
+function DiagramFeatures({
+  children: children2,
+  features,
+  overrides
+}) {
+  const outerScope = useContext(DiagramFeaturesContext), [scope, setScope] = useState(outerScope);
+  return useEffect(
+    () => {
+      setScope((current) => {
+        const next = validate({
+          ...outerScope,
+          ...features,
+          ...overrides
+        });
+        return shallowEqual(current, next) ? current : next;
+      });
+    },
+    [outerScope, features, overrides]
+  ), /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children: children2 });
+}
+DiagramFeatures.Overlays = ({ children: children2 }) => /* @__PURE__ */ jsx(
+  DiagramFeatures,
+  {
+    overrides: {
+      enableControls: !1,
+      enableReadOnly: !0,
+      enableEdgeEditing: !1
+    },
+    children: children2
   }
-  outline(d1, d2, d3, d4) {
-    if (d2 = d2 === void 0 ? d1 : d2, this._linear) {
-      const n2 = this.normal(0), start2 = this.points[0], end = this.points[this.points.length - 1];
-      let s, mid, e2;
-      d3 === void 0 && (d3 = d1, d4 = d2), s = { x: start2.x + n2.x * d1, y: start2.y + n2.y * d1 }, e2 = { x: end.x + n2.x * d3, y: end.y + n2.y * d3 }, mid = { x: (s.x + e2.x) / 2, y: (s.y + e2.y) / 2 };
-      const fline = [s, mid, e2];
-      s = { x: start2.x - n2.x * d2, y: start2.y - n2.y * d2 }, e2 = { x: end.x - n2.x * d4, y: end.y - n2.y * d4 }, mid = { x: (s.x + e2.x) / 2, y: (s.y + e2.y) / 2 };
-      const bline = [e2, mid, s], ls2 = utils.makeline(bline[2], fline[0]), le2 = utils.makeline(fline[2], bline[0]), segments2 = [ls2, new Bezier(fline), le2, new Bezier(bline)];
-      return new PolyBezier(segments2);
+);
+function useEnabledFeatures() {
+  return useContext(DiagramFeaturesContext);
+}
+function IfEnabled({
+  feature,
+  children: children2,
+  and: and2 = !0
+}) {
+  return useEnabledFeatures()[`enable${feature}`] === !0 && and2 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+}
+function IfNotEnabled({ feature, children: children2 }) {
+  return useEnabledFeatures()[`enable${feature}`] !== !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+}
+function IfReadOnly({ children: children2 }) {
+  return useEnabledFeatures().enableReadOnly === !0 ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
+}
+function IfNotReadOnly({ children: children2 }) {
+  return useEnabledFeatures().enableReadOnly === !0 ? null : /* @__PURE__ */ jsx(Fragment$1, { children: children2 });
+}
+const IconRendererContext = createContext(null);
+function IconRendererProvider({
+  value,
+  children: children2
+}) {
+  return useContext(IconRendererContext) ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children: children2 });
+}
+function IconRenderer({
+  element,
+  className
+}) {
+  const RenderIcon = useContext(IconRendererContext);
+  if (!element || !element.icon || element.icon === "none")
+    return null;
+  let icon;
+  return element.icon.startsWith("http://") || element.icon.startsWith("https://") ? icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title }) : RenderIcon && (icon = /* @__PURE__ */ jsx(RenderIcon, { node: element })), icon ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        className,
+        "likec4-element-icon"
+      ),
+      "data-likec4-icon": element.icon,
+      children: icon
     }
-    const reduced = this.reduce(), len = reduced.length, fcurves = [];
-    let bcurves = [], p, alen = 0, tlen = this.length();
-    const graduated = typeof d3 < "u" && typeof d4 < "u";
-    function linearDistanceFunction(s, e2, tlen2, alen2, slen) {
-      return function(v) {
-        const f1 = alen2 / tlen2, f2 = (alen2 + slen) / tlen2, d = e2 - s;
-        return utils.map(v, 0, 1, s + f1 * d, s + f2 * d);
-      };
+  ) : null;
+}
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder
+};
+function IconOrShapeRenderer({
+  element,
+  className
+}) {
+  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
+  if (icon)
+    return icon;
+  const ShapeIcon = ShapeIcons[element.shape];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        className,
+        "likec4-shape-icon"
+      ),
+      children: /* @__PURE__ */ jsx(ShapeIcon, {})
     }
-    reduced.forEach(function(segment) {
-      const slen = segment.length();
-      graduated ? (fcurves.push(
-        segment.scale(linearDistanceFunction(d1, d3, tlen, alen, slen))
-      ), bcurves.push(
-        segment.scale(linearDistanceFunction(-d2, -d4, tlen, alen, slen))
-      )) : (fcurves.push(segment.scale(d1)), bcurves.push(segment.scale(-d2))), alen += slen;
-    }), bcurves = bcurves.map(function(s) {
-      return p = s.points, p[3] ? s.points = [p[3], p[2], p[1], p[0]] : s.points = [p[2], p[1], p[0]], s;
-    }).reverse();
-    const fs = fcurves[0].points[0], fe = fcurves[len - 1].points[fcurves[len - 1].points.length - 1], bs = bcurves[len - 1].points[bcurves[len - 1].points.length - 1], be = bcurves[0].points[0], ls = utils.makeline(bs, fs), le = utils.makeline(fe, be), segments = [ls].concat(fcurves).concat([le]).concat(bcurves);
-    return new PolyBezier(segments);
-  }
-  outlineshapes(d1, d2, curveIntersectionThreshold) {
-    d2 = d2 || d1;
-    const outline = this.outline(d1, d2).curves, shapes = [];
-    for (let i2 = 1, len = outline.length; i2 < len / 2; i2++) {
-      const shape = utils.makeshape(
-        outline[i2],
-        outline[len - i2],
-        curveIntersectionThreshold
-      );
-      shape.startcap.virtual = i2 > 1, shape.endcap.virtual = i2 < len / 2 - 1, shapes.push(shape);
+  );
+}
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
+const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop), composeShouldForwardProps = (tag, shouldForwardProp) => tag.__shouldForwardProps__ && shouldForwardProp ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) : shouldForwardProp, composeCvaFn = (cvaA, cvaB) => {
+  if (cvaA && !cvaB) return cvaA;
+  if (!cvaA && cvaB) return cvaB;
+  if (cvaA.__cva__ && cvaB.__cva__ || cvaA.__recipe__ && cvaB.__recipe__) return cvaA.merge(cvaB);
+  const error = new TypeError("Cannot merge cva with recipe. Please use either cva or recipe.");
+  throw TypeError.captureStackTrace?.(error), error;
+}, getDisplayName = (Component) => typeof Component == "string" ? Component : Component?.displayName || Component?.name || "Component";
+function styledFn(Dynamic, configOrCva = {}, options = {}) {
+  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva), forwardFn = options.shouldForwardProp || defaultShouldForwardProp, shouldForwardProp = (prop) => options.forwardProps?.includes(prop) ? !0 : forwardFn(prop, cvaFn.variantKeys), defaultProps2 = Object.assign(
+    options.dataAttr && configOrCva.__name__ ? { "data-recipe": configOrCva.__name__ } : {},
+    options.defaultProps
+  ), __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn), __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp), __base__ = Dynamic.__base__ || Dynamic, StyledComponent = /* @__PURE__ */ forwardRef(function(props, ref) {
+    const { as: Element2 = __base__, unstyled, children: children2, ...restProps } = props, combinedProps = useMemo(() => Object.assign({}, defaultProps2, restProps), [restProps]), [htmlProps2, forwardedProps, variantProps2, styleProps, elementProps] = useMemo(() => splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty), [combinedProps]);
+    function recipeClass() {
+      const { css: cssStyles, ...propStyles } = styleProps, compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps2);
+      return cx(__cvaFn__(variantProps2, !1), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className);
     }
-    return shapes;
-  }
-  intersects(curve, curveIntersectionThreshold) {
-    return curve ? curve.p1 && curve.p2 ? this.lineIntersects(curve) : (curve instanceof Bezier && (curve = curve.reduce()), this.curveintersects(
-      this.reduce(),
-      curve,
-      curveIntersectionThreshold
-    )) : this.selfintersects(curveIntersectionThreshold);
-  }
-  lineIntersects(line) {
-    const mx = min(line.p1.x, line.p2.x), my = min(line.p1.y, line.p2.y), MX = max(line.p1.x, line.p2.x), MY = max(line.p1.y, line.p2.y);
-    return utils.roots(this.points, line).filter((t2) => {
-      var p = this.get(t2);
-      return utils.between(p.x, mx, MX) && utils.between(p.y, my, MY);
-    });
-  }
-  selfintersects(curveIntersectionThreshold) {
-    const reduced = this.reduce(), len = reduced.length - 2, results = [];
-    for (let i2 = 0, result, left, right; i2 < len; i2++)
-      left = reduced.slice(i2, i2 + 1), right = reduced.slice(i2 + 2), result = this.curveintersects(left, right, curveIntersectionThreshold), results.push(...result);
-    return results;
-  }
-  curveintersects(c1, c2, curveIntersectionThreshold) {
-    const pairs = [];
-    c1.forEach(function(l) {
-      c2.forEach(function(r2) {
-        l.overlaps(r2) && pairs.push({ left: l, right: r2 });
-      });
-    });
-    let intersections = [];
-    return pairs.forEach(function(pair) {
-      const result = utils.pairiteration(
-        pair.left,
-        pair.right,
-        curveIntersectionThreshold
-      );
-      result.length > 0 && (intersections = intersections.concat(result));
-    }), intersections;
-  }
-  arcs(errorThreshold) {
-    return errorThreshold = errorThreshold || 0.5, this._iterate(errorThreshold, []);
-  }
-  _error(pc, np1, s, e2) {
-    const q = (e2 - s) / 4, c1 = this.get(s + q), c2 = this.get(e2 - q), ref = utils.dist(pc, np1), d1 = utils.dist(pc, c1), d2 = utils.dist(pc, c2);
-    return abs(d1 - ref) + abs(d2 - ref);
-  }
-  _iterate(errorThreshold, circles) {
-    let t_s = 0, t_e = 1, safety;
-    do {
-      safety = 0, t_e = 1;
-      let np1 = this.get(t_s), np2, np3, arc, prev_arc, curr_good = !1, prev_good = !1, done, t_m = t_e, prev_e = 1;
-      do
-        if (prev_good = curr_good, prev_arc = arc, t_m = (t_s + t_e) / 2, np2 = this.get(t_m), np3 = this.get(t_e), arc = utils.getccenter(np1, np2, np3), arc.interval = {
-          start: t_s,
-          end: t_e
-        }, curr_good = this._error(arc, np1, t_s, t_e) <= errorThreshold, done = prev_good && !curr_good, done || (prev_e = t_e), curr_good) {
-          if (t_e >= 1) {
-            if (arc.interval.end = prev_e = 1, prev_arc = arc, t_e > 1) {
-              let d = {
-                x: arc.x + arc.r * cos(arc.e),
-                y: arc.y + arc.r * sin(arc.e)
-              };
-              arc.e += utils.angle({ x: arc.x, y: arc.y }, d, this.get(1));
-            }
-            break;
-          }
-          t_e = t_e + (t_e - t_s) / 2;
-        } else
-          t_e = t_m;
-      while (!done && safety++ < 100);
-      if (safety >= 100)
-        break;
-      prev_arc = prev_arc || arc, circles.push(prev_arc), t_s = prev_e;
-    } while (t_e < 1);
-    return circles;
+    function cvaClass() {
+      const { css: cssStyles, ...propStyles } = styleProps, cvaStyles = __cvaFn__.raw(variantProps2);
+      return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className);
+    }
+    const classes2 = () => {
+      if (unstyled) {
+        const { css: cssStyles, ...propStyles } = styleProps;
+        return cx(css(propStyles, cssStyles), combinedProps.className);
+      }
+      return configOrCva.__recipe__ ? recipeClass() : cvaClass();
+    };
+    return createElement(Element2, {
+      ref,
+      ...forwardedProps,
+      ...elementProps,
+      ...normalizeHTMLProps(htmlProps2),
+      className: classes2()
+    }, children2 ?? combinedProps.children);
+  }), name = getDisplayName(__base__);
+  return StyledComponent.displayName = `styled.${name}`, StyledComponent.__cva__ = __cvaFn__, StyledComponent.__base__ = __base__, StyledComponent.__shouldForwardProps__ = shouldForwardProp, StyledComponent;
+}
+function createJsxFactory() {
+  const cache = /* @__PURE__ */ new Map();
+  return new Proxy(styledFn, {
+    apply(_, __, args) {
+      return styledFn(...args);
+    },
+    get(_, el) {
+      return cache.has(el) || cache.set(el, styledFn(el)), cache.get(el);
+    }
+  });
+}
+const styled = /* @__PURE__ */ createJsxFactory(), boxConfig = {
+  transform(props) {
+    return props;
   }
+}, getBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(boxConfig, styles);
+  return boxConfig.transform(_styles, patternFns);
+}, Box = /* @__PURE__ */ forwardRef(function(props, ref) {
+  const [patternProps, restProps] = splitProps(props, []), styleProps = getBoxStyle(patternProps), mergedProps = { ref, ...styleProps, ...restProps };
+  return createElement(styled.div, mergedProps);
+}), hstackConfig = {
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "row",
+      ...rest
+    };
+  },
+  defaultValues: { gap: "sm" }
+}, getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles);
+  return hstackConfig.transform(_styles, patternFns);
+}, hstack = (styles) => css(getHstackStyle(styles));
+hstack.raw = getHstackStyle;
+const HStack = /* @__PURE__ */ forwardRef(function(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["justify", "gap"]), styleProps = getHstackStyle(patternProps), mergedProps = { ref, ...styleProps, ...restProps };
+  return createElement(styled.div, mergedProps);
+});
+let listenerQueue = [], lqIndex = 0;
+const QUEUE_ITEMS_PER_LISTENER = 4;
+let atom = (initialValue) => {
+  let listeners = [], $atom = {
+    get() {
+      return $atom.lc || $atom.listen(() => {
+      })(), $atom.value;
+    },
+    lc: 0,
+    listen(listener) {
+      return $atom.lc = listeners.push(listener), () => {
+        for (let i2 = lqIndex + QUEUE_ITEMS_PER_LISTENER; i2 < listenerQueue.length; )
+          listenerQueue[i2] === listener ? listenerQueue.splice(i2, QUEUE_ITEMS_PER_LISTENER) : i2 += QUEUE_ITEMS_PER_LISTENER;
+        let index2 = listeners.indexOf(listener);
+        ~index2 && (listeners.splice(index2, 1), --$atom.lc || $atom.off());
+      };
+    },
+    notify(oldValue, changedKey) {
+      let runListenerQueue = !listenerQueue.length;
+      for (let listener of listeners)
+        listenerQueue.push(listener, $atom.value, oldValue, changedKey);
+      if (runListenerQueue) {
+        for (lqIndex = 0; lqIndex < listenerQueue.length; lqIndex += QUEUE_ITEMS_PER_LISTENER)
+          listenerQueue[lqIndex](
+            listenerQueue[lqIndex + 1],
+            listenerQueue[lqIndex + 2],
+            listenerQueue[lqIndex + 3]
+          );
+        listenerQueue.length = 0;
+      }
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    off() {
+    },
+    set(newValue) {
+      let oldValue = $atom.value;
+      oldValue !== newValue && ($atom.value = newValue, $atom.notify(oldValue));
+    },
+    subscribe(listener) {
+      let unbind = $atom.listen(listener);
+      return listener($atom.value), unbind;
+    },
+    value: initialValue
+  };
+  return $atom;
+};
+const ReduceGraphicsModeCtx = createContext(null);
+function useIsReducedGraphics() {
+  const isReduced = useContext(ReduceGraphicsModeCtx);
+  return isReduced === null && console.warn("ReduceGraphicsMode is not provided"), isReduced ?? !1;
 }
-function bezierControlPoints(diagramEdge) {
-  let [start2, ...bezierPoints] = diagramEdge.points;
-  invariant(start2, "start should be defined");
-  const handles = [
-    // start
-  ];
-  for (; t$6(bezierPoints, 3); ) {
-    const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
-    inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
-      const { x, y } = bezier.get(t2);
-      handles.push({
-        x: Math.round(x),
-        y: Math.round(y)
-      });
-    }), bezierPoints = rest, start2 = end;
-  }
-  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+  "PanningAtomSafeCtx is not provided"
+);
+function ReduceGraphicsContext({ reduceGraphics, children: children2 }) {
+  const $isPanningRef = useRef(null);
+  return $isPanningRef.current || ($isPanningRef.current = atom(reduceGraphics)), /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: children2 }) });
 }
-const isClose = (a, b) => Math.abs(a - b) < 3.1;
-function isSamePoint(a, b) {
-  const [ax, ay] = e$4(a) ? a : [a.x, a.y], [bx, by] = e$4(b) ? b : [b.x, b.y];
-  return isClose(ax, bx) && isClose(ay, by);
+const LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
+function EnsureCurrentViewModel({ children: children2 }) {
+  return useContext(CurrentViewModelContext) ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
 }
-function stopPropagation(e2) {
-  return e2.stopPropagation();
+function useLikeC4Model() {
+  const model = useContext(LikeC4ModelContext);
+  if (!model)
+    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
+  return model;
 }
-function centerXYInternalNode(nd) {
-  const { width, height } = getNodeDimensions(nd);
-  return {
-    x: nd.internals.positionAbsolute.x + width / 2,
-    y: nd.internals.positionAbsolute.y + height / 2
+function useLikeC4ViewModel(viewId) {
+  return useLikeC4Model().view(viewId);
+}
+function useLikeC4Specification() {
+  const model = useLikeC4Model(), [specification, setSpecification] = useState(model.$data.specification);
+  return useEffect(() => {
+    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
+  }, [model]), specification;
+}
+const TagStylesContext = createContext({}), radixColors = [
+  "yellow",
+  "orange",
+  "amber",
+  "tomato",
+  "red",
+  "ruby",
+  "crimson",
+  "pink",
+  "pink",
+  "purple",
+  "violet",
+  "indigo",
+  "blue",
+  "teal",
+  "grass",
+  "lime"
+], generateColorVars = (spec) => {
+  const color2 = spec.color;
+  if (isTagColorSpecified(spec))
+    return `
+      --colors-likec4-tag-bg: ${color2};
+      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color2}, var(--colors-likec4-mix-color) 20%);
+    `;
+  if (!radixColors.includes(color2))
+    return "";
+  let textcolor = "12";
+  return ["mint", "grass", "lime", "yellow", "amber"].includes(color2) && (textcolor = "dark-2"), `
+  --colors-likec4-tag-border: var(--colors-${color2}-8);
+  --colors-likec4-tag-bg: var(--colors-${color2}-9);
+  --colors-likec4-tag-bg-hover: var(--colors-${color2}-10);
+  --colors-likec4-tag-text: var(--colors-${color2}-${textcolor});
+  `;
+};
+function TagStylesProvider({ children: children2, rootSelector }) {
+  const tags = useLikeC4Specification().tags, { specs, stylesheet } = useDeepCompareMemo(() => tags ? {
+    specs: tags,
+    stylesheet: t$7(
+      t$5(tags),
+      t$4(([tag, spec]) => [
+        `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+        generateColorVars(spec),
+        "}"
+      ]),
+      t$3(`
+`)
+    )
+  } : { specs: {}, stylesheet: "" }, [tags, rootSelector]);
+  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: specs, children: [
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    children2
+  ] });
+}
+function TagStylesheet({ stylesheet }) {
+  const nonce = useMantineStyleNonce()?.();
+  return /* @__PURE__ */ jsx("style", { "data-likec4-tag-stylesheet": !0, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+}
+function useTagSpecification(tag) {
+  return useContext(TagStylesContext)[tag] ?? {
+    color: "tomato"
   };
 }
-function bezierPath(bezierSpline) {
-  let [start2, ...points] = bezierSpline;
-  invariant(start2, "start should be defined");
-  let path = `M ${start2[0]},${start2[1]}`;
-  for (; t$6(points, 3); ) {
-    const [cp1, cp2, end, ...rest] = points;
-    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
-  }
-  return invariant(points.length === 0, "all points should be consumed"), path;
+const RootContainerContext = createContext(createRef());
+function RootContainer({
+  id: id2,
+  className,
+  reduceGraphics = !1,
+  children: children2
+}) {
+  const ref = useRef(null), $isPanning = usePanningAtom();
+  return useEffect(() => $isPanning.listen((isPanning) => {
+    ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
+  }), [$isPanning]), /* @__PURE__ */ jsx(
+    Box,
+    {
+      id: id2,
+      className: cx("likec4-root", className),
+      ref,
+      ...reduceGraphics && {
+        "data-likec4-reduced-graphics": !0
+      },
+      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id2}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children: children2 }) })
+    }
+  );
+}
+function useRootContainer() {
+  return useContext(RootContainerContext).current;
 }
 function useMantinePortalProps() {
   const target = useRootContainer();
@@ -19299,12 +19305,7 @@ function focusedBounds(params) {
     if (knownAbsolutes.set(node.id, position), node.hidden || node.data.dimmed)
       return acc;
     const width = node.measured?.width ?? node.width ?? node.initialWidth, height = node.measured?.height ?? node.height ?? node.initialHeight;
-    return {
-      minX: Math.min(acc.minX, position.x),
-      minY: Math.min(acc.minY, position.y),
-      maxX: Math.max(acc.maxX, position.x + width),
-      maxY: Math.max(acc.maxY, position.y + height)
-    };
+    return 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), acc;
   }, {
     minX: 1 / 0,
     minY: 1 / 0,
@@ -19323,6 +19324,45 @@ function focusedBounds(params) {
     }
   };
 }
+const MARGIN = 32;
+function activeSequenceBounds(params) {
+  const activeWalkthrough = nonNullable(params.context.activeWalkthrough), stepEdge = nonNullable(params.context.xyedges.find((e2) => e2.id === activeWalkthrough.stepId)), xystate = params.context.xystore.getState(), sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source)), targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target)), actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
+  let stepBounds;
+  if (activeWalkthrough.parallelPrefix) {
+    const parallelArea = params.context.xynodes.find(
+      (n2) => n2.type === "seq-parallel" && n2.data.parallelPrefix === activeWalkthrough.parallelPrefix
+    );
+    parallelArea && (stepBounds = {
+      x: parallelArea.position.x,
+      y: parallelArea.position.y,
+      ...getNodeDimensions(parallelArea)
+    });
+  }
+  return stepBounds ??= getEdgeBounds(stepEdge, xystate), stepBounds ? stepBounds = BBox.merge(stepBounds, actorsBounds) : stepBounds = actorsBounds, {
+    duration: 350,
+    bounds: BBox.expand(
+      stepBounds,
+      MARGIN
+    )
+  };
+}
+function getEdgeBounds(edge, store) {
+  const sourceNode = store.nodeLookup.get(edge.source), 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
+  });
+  return edgePosition ? BBox.fromPoints([
+    [edgePosition.sourceX, edgePosition.sourceY],
+    [edgePosition.targetX, edgePosition.targetY]
+  ]) : null;
+}
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const DiagramActorContextProvider = DiagramActorSafeContext.Provider, useDiagramActorRef = () => {
@@ -19433,6 +19473,9 @@ function useDiagram() {
     },
     openSearch: (searchValue) => {
       actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
+    },
+    switchDynamicViewVariant: (variant) => {
+      actor.send({ type: "switch.dynamicViewVariant", variant });
     }
   }), [actor]);
 }
@@ -19909,8 +19952,8 @@ function ElementActionButtons({
   },
   buttons
 }) {
-  const id2 = useId$1(), zoomTooSmall = useIsZoomTooSmall();
-  return !buttons.length || zoomTooSmall ? null : /* @__PURE__ */ jsx(Box, { className: container$2, children: /* @__PURE__ */ jsx(
+  const id2 = useId$1();
+  return buttons.length ? /* @__PURE__ */ jsx(Box, { className: container$2, children: /* @__PURE__ */ jsx(
     MotionDiv,
     {
       layoutRoot: !0,
@@ -19944,7 +19987,7 @@ function ElementActionButtons({
       ))
     },
     `${id2}-action-buttons`
-  ) });
+  ) }) : null;
 }
 const container$1 = css({
   position: "absolute",
@@ -20052,19 +20095,7 @@ const container = css({
   ":where(.react-flow__node.selectable:not(.dragging)) &": {
     cursor: "pointer"
   }
-});
-function nodeSizes({
-  size: size2,
-  padding,
-  textSize
-}) {
-  return !size2 && textSize && (size2 = textSize), !textSize && size2 && (textSize = size2), !padding && size2 && (padding = size2), size2 ??= DefaultShapeSize, textSize ??= DefaultTextSize, padding ??= DefaultPaddingSize, {
-    size: size2,
-    padding,
-    textSize
-  };
-}
-const ElementNodeContainer = forwardRef(({
+}), ElementNodeContainer = forwardRef(({
   nodeProps: {
     selected: selected2 = !1,
     selectable = !1,
@@ -20092,7 +20123,7 @@ const ElementNodeContainer = forwardRef(({
     size: size2,
     padding,
     textSize
-  } = nodeSizes(data.style ?? {});
+  } = ensureSizes(data.style ?? {});
   return /* @__PURE__ */ jsx(
     MotionDiv,
     {
@@ -20461,6 +20492,7 @@ const MarkdownBlock = forwardRef(({
   hideIfEmpty = !1,
   emptyText = "no content",
   className,
+  style: style2,
   ...props
 }, ref) => {
   if (value.isEmpty && hideIfEmpty)
@@ -20479,6 +20511,7 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
+        ...style2,
         ...props.fontSize && {
           "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
         },
@@ -20502,7 +20535,7 @@ function ElementTitle({ id: id2, data, iconSize }) {
     hasIcon: e(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !e$3(data.technology ?? "")
-  }), size2 = nodeSizes(data.style).size, isSmOrXs = size2 === "sm" || size2 === "xs";
+  }), { size: size2 } = ensureSizes(data.style), isSmOrXs = size2 === "sm" || size2 === "xs";
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -21219,20 +21252,6 @@ const ViewGroupNode = (props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { n
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] });
 ViewGroupNode.displayName = "ViewGroupNode";
-function useOptionalCurrentViewModel() {
-  return useContext(CurrentViewModelContext);
-}
-function useCurrentViewModel() {
-  const vm = useContext(CurrentViewModelContext);
-  if (!vm)
-    throw new Error("No LikeC4ViewModel in context found");
-  return vm;
-}
-const selectViewId = (s) => s.context.view.id;
-function useCurrentViewId() {
-  const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, selectViewId);
-}
 const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog = css.raw({
   boxSizing: "border-box",
   margin: "0",
@@ -21457,6 +21476,20 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   );
 });
 Overlay.displayName = "Overlay";
+const selectViewId = (s) => s.context.view.id;
+function useCurrentViewId() {
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, selectViewId);
+}
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
+function useCurrentViewModel() {
+  const vm = useContext(CurrentViewModelContext);
+  if (!vm)
+    throw new Error("No LikeC4ViewModel in context found");
+  return vm;
+}
 const LikeC4ProjectsContext = createContext(null), emptyProjects = [];
 function useLikeC4Projects() {
   const ctx = useContext(LikeC4ProjectsContext);
@@ -21510,7 +21543,7 @@ export {
   parseThemeColor as Z,
   createEventHandler as _,
   useMediaQuery as a,
-  useDebouncedCallback as a$,
+  useSyncedRef as a$,
   useDelayGroup as a0,
   useFloating as a1,
   useInteractions as a2,
@@ -21575,236 +21608,239 @@ export {
   LazyContext as ay,
   loadExternalIsValidProp as az,
   useMantineTheme as b,
-  MotionDiv as b$,
+  ActionIcon as b$,
   isBrowser as b0,
-  css as b1,
-  getPatternStyles as b2,
-  patternFns as b3,
-  splitProps as b4,
-  styled as b5,
-  Background as b6,
-  BackgroundVariant as b7,
-  useIsZoomTooSmall as b8,
-  useXYStoreApi as b9,
-  $$ACTOR_TYPE as bA,
-  STATE_DELIMITER as bB,
-  mapValues as bC,
-  toArray as bD,
-  formatTransitions as bE,
-  toTransitionConfigArray as bF,
-  formatTransition as bG,
-  evaluateGuard as bH,
-  getCandidates as bI,
-  NULL_EVENT as bJ,
-  createInvokeId as bK,
-  getDelayedTransitions as bL,
-  formatInitialTransition as bM,
-  createErrorActorEvent as bN,
-  XSTATE_ERROR as bO,
-  cancel as bP,
-  raise as bQ,
-  spawnChild as bR,
-  stopChild as bS,
-  memo as bT,
-  createRecipe as bU,
-  mergeRecipes as bV,
-  compact as bW,
-  getSlotCompoundVariant as bX,
-  deepEqual as bY,
-  ActionIcon as bZ,
-  IconZoomScan as b_,
-  index as ba,
-  stopPropagation as bb,
-  cx as bc,
-  roundDpr as bd,
-  useStore as be,
-  useUpdateEffect as bf,
-  XSTATE_STOP as bg,
-  cloneMachineSnapshot as bh,
-  ProcessingStatus as bi,
-  resolveReferencedActor as bj,
-  createActor as bk,
-  resolveStateValue as bl,
-  getAllStateNodes as bm,
-  getStateNodes as bn,
-  createMachineSnapshot as bo,
-  isInFinalState as bp,
-  macrostep as bq,
-  transitionNode as br,
-  resolveActionsAndContext as bs,
-  createInitEvent as bt,
-  microstep as bu,
-  getInitialStateNodes as bv,
-  toStatePath as bw,
-  isStateId as bx,
-  getStateNodeByPath as by,
-  getPersistedSnapshot as bz,
+  useUnmountEffect as b1,
+  useDebouncedCallback as b2,
+  Background as b3,
+  BackgroundVariant as b4,
+  useIsZoomTooSmall as b5,
+  useXYStoreApi as b6,
+  index as b7,
+  stopPropagation as b8,
+  cx as b9,
+  getStateNodeByPath as bA,
+  getPersistedSnapshot as bB,
+  $$ACTOR_TYPE as bC,
+  STATE_DELIMITER as bD,
+  mapValues as bE,
+  toArray as bF,
+  formatTransitions as bG,
+  toTransitionConfigArray as bH,
+  formatTransition as bI,
+  evaluateGuard as bJ,
+  getCandidates as bK,
+  NULL_EVENT as bL,
+  createInvokeId as bM,
+  getDelayedTransitions as bN,
+  formatInitialTransition as bO,
+  createErrorActorEvent as bP,
+  XSTATE_ERROR as bQ,
+  cancel as bR,
+  raise as bS,
+  spawnChild as bT,
+  stopChild as bU,
+  memo as bV,
+  createRecipe as bW,
+  mergeRecipes as bX,
+  compact as bY,
+  getSlotCompoundVariant as bZ,
+  deepEqual as b_,
+  roundDpr as ba,
+  useStore as bb,
+  useUpdateEffect as bc,
+  css as bd,
+  getPatternStyles as be,
+  patternFns as bf,
+  splitProps as bg,
+  styled as bh,
+  XSTATE_STOP as bi,
+  cloneMachineSnapshot as bj,
+  ProcessingStatus as bk,
+  resolveReferencedActor as bl,
+  createActor as bm,
+  resolveStateValue as bn,
+  getAllStateNodes as bo,
+  getStateNodes as bp,
+  createMachineSnapshot as bq,
+  isInFinalState as br,
+  macrostep as bs,
+  transitionNode as bt,
+  resolveActionsAndContext as bu,
+  createInitEvent as bv,
+  microstep as bw,
+  getInitialStateNodes as bx,
+  toStatePath as by,
+  isStateId as bz,
   useMantineStyleNonce as c,
-  ElementActionButtons as c$,
-  Box as c0,
-  e as c1,
-  EdgeLabelRenderer as c2,
-  e$1 as c3,
-  getNodeDimensions as c4,
-  useXYFlow as c5,
-  useDiagram as c6,
-  useEnabledFeatures as c7,
-  useXYInternalNode as c8,
-  isSamePoint as c9,
-  IconFileSymlink as cA,
-  isMacOs as cB,
-  IconCheck as cC,
-  IconId as cD,
-  HStack as cE,
-  ElementTag as cF,
-  MarkdownBlock as cG,
-  cva as cH,
-  Button as cI,
-  MotionSpan as cJ,
-  Portal as cK,
-  useLikeC4ProjectsContext as cL,
-  useLikeC4ProjectId as cM,
-  Menu as cN,
-  MenuTarget as cO,
-  MenuDropdown as cP,
-  MenuItem as cQ,
-  useOnDiagramEvent as cR,
-  useLikeC4Model as cS,
-  Divider as cT,
-  e$4 as cU,
-  useDiagramActorRef as cV,
-  useCurrentViewModel as cW,
-  useActorRef as cX,
-  useUpdateEffect$1 as cY,
-  Group as cZ,
-  getBezierPath as c_,
-  bezierControlPoints as ca,
-  bezierPath as cb,
-  ViewGroupNode as cc,
-  CompoundDeploymentNode as cd,
-  CompoundElementNode as ce,
-  DeploymentNode as cf,
-  ElementNode as cg,
-  useDiagramActorSnapshot as ch,
-  e$3 as ci,
-  MotionButton as cj,
-  Tooltip$1 as ck,
-  useDiagramEventHandlers as cl,
-  useDiagramContext as cm,
-  useHover$1 as cn,
-  PopoverTarget as co,
-  PopoverDropdown as cp,
-  FloatingIndicator as cq,
-  Flex as cr,
-  clampUseMovePosition as cs,
-  useMove as ct,
-  useMantinePortalProps as cu,
-  hstack as cv,
-  TooltipGroup as cw,
-  shallowEqual as cx,
-  useSelector as cy,
-  useCurrentViewId as cz,
+  MenuTarget as c$,
+  IconZoomScan as c0,
+  MotionDiv as c1,
+  e as c2,
+  Box as c3,
+  useXYStore as c4,
+  EdgeLabelRenderer as c5,
+  e$1 as c6,
+  getNodeDimensions as c7,
+  useXYFlow as c8,
+  useDiagram as c9,
+  PopoverDropdown as cA,
+  FloatingIndicator as cB,
+  Flex as cC,
+  clampUseMovePosition as cD,
+  useMove as cE,
+  useMantinePortalProps as cF,
+  hstack as cG,
+  TooltipGroup as cH,
+  shallowEqual as cI,
+  useSelector as cJ,
+  useCurrentViewId as cK,
+  IconFileSymlink as cL,
+  isMacOs as cM,
+  IconCheck as cN,
+  IconId as cO,
+  HStack as cP,
+  useOnDiagramEvent as cQ,
+  ElementTag as cR,
+  MarkdownBlock as cS,
+  cva as cT,
+  Button as cU,
+  SegmentedControl as cV,
+  MotionSpan as cW,
+  Portal as cX,
+  useLikeC4ProjectsContext as cY,
+  useLikeC4ProjectId as cZ,
+  Menu as c_,
+  useEnabledFeatures as ca,
+  useXYInternalNode as cb,
+  isSamePoint as cc,
+  bezierControlPoints as cd,
+  bezierPath as ce,
+  getSmoothStepPath as cf,
+  ElementNodeContainer as cg,
+  ElementShape as ch,
+  ElementTitle as ci,
+  ElementActions as cj,
+  ElementDetailsButtonWithHandler as ck,
+  Handle as cl,
+  Position as cm,
+  ViewGroupNode as cn,
+  CompoundDeploymentNode as co,
+  CompoundElementNode as cp,
+  DeploymentNode as cq,
+  ElementNode as cr,
+  useDiagramActorSnapshot as cs,
+  e$3 as ct,
+  MotionButton as cu,
+  Tooltip$1 as cv,
+  useDiagramEventHandlers as cw,
+  useDiagramContext as cx,
+  useHover$1 as cy,
+  PopoverTarget as cz,
   alpha$1 as d,
-  getBoundsOfRects as d$,
-  IconTransform as d0,
-  CompoundNodeContainer as d1,
-  CompoundTitle as d2,
-  CompoundDetailsButton as d3,
-  ElementNodeContainer as d4,
-  ElementShape as d5,
-  ElementTitle as d6,
-  ElementTags as d7,
-  Handle as d8,
-  Position as d9,
-  e$2 as dA,
-  VisuallyHidden as dB,
-  IconOrShapeRenderer as dC,
-  FocusTrap as dD,
-  t$2 as dE,
-  findDiagramEdge as dF,
-  findDiagramNode as dG,
-  autoUpdate as dH,
-  computePosition as dI,
-  offset$2 as dJ,
-  autoPlacement as dK,
-  size$1 as dL,
-  hide$1 as dM,
-  useOptionalCurrentViewModel as dN,
-  ButtonGroup as dO,
-  EnsureCurrentViewModel as dP,
-  useIsReducedGraphics as dQ,
-  usePanningAtom as dR,
-  useTimeout as dS,
-  useCustomCompareMemo as dT,
-  useLikeC4Specification as dU,
-  t$3 as dV,
-  applyEdgeChanges as dW,
-  applyNodeChanges as dX,
-  getViewportForBounds as dY,
-  typedSystem as dZ,
-  centerXYInternalNode as d_,
-  ElementDetailsButton as da,
-  getDefaultExportFromCjs as db,
-  t$1 as dc,
-  IconSelector as dd,
-  SegmentedControl as de,
-  ReactFlowProvider as df,
-  useStoreApi as dg,
-  useReactFlow as dh,
-  Panel as di,
-  m as dj,
-  Stack as dk,
-  t$9 as dl,
-  useSyncedRef as dm,
-  IconRenderer as dn,
-  useTimeoutEffect as dp,
-  ReactRemoveScroll as dq,
-  ActionIconGroup as dr,
-  IfEnabled as ds,
-  DiagramFeatures as dt,
-  t$5 as du,
-  customNode as dv,
-  useXYStore as dw,
-  useReducedMotionConfig as dx,
-  Overlay as dy,
-  sva as dz,
+  applyNodeChanges as d$,
+  MenuDropdown as d0,
+  MenuItem as d1,
+  useLikeC4Model as d2,
+  Divider as d3,
+  e$4 as d4,
+  useDiagramActorRef as d5,
+  useCurrentViewModel as d6,
+  useActorRef as d7,
+  useUpdateEffect$1 as d8,
+  Group as d9,
+  customNode as dA,
+  useReducedMotionConfig as dB,
+  Overlay as dC,
+  sva as dD,
+  e$2 as dE,
+  VisuallyHidden as dF,
+  IconOrShapeRenderer as dG,
+  FocusTrap as dH,
+  t$2 as dI,
+  findDiagramEdge as dJ,
+  findDiagramNode as dK,
+  autoUpdate as dL,
+  computePosition as dM,
+  offset$2 as dN,
+  autoPlacement as dO,
+  size$1 as dP,
+  hide$1 as dQ,
+  useOptionalCurrentViewModel as dR,
+  ButtonGroup as dS,
+  EnsureCurrentViewModel as dT,
+  useIsReducedGraphics as dU,
+  usePanningAtom as dV,
+  useTimeout as dW,
+  useCustomCompareMemo as dX,
+  useLikeC4Specification as dY,
+  t$3 as dZ,
+  applyEdgeChanges as d_,
+  getBezierPath as da,
+  ElementActionButtons as db,
+  IconTransform as dc,
+  CompoundNodeContainer as dd,
+  CompoundTitle as de,
+  CompoundDetailsButton as df,
+  ElementTags as dg,
+  ElementDetailsButton as dh,
+  getDefaultExportFromCjs as di,
+  t$1 as dj,
+  IconSelector as dk,
+  ReactFlowProvider as dl,
+  useStoreApi as dm,
+  useReactFlow as dn,
+  Panel as dp,
+  m as dq,
+  Stack as dr,
+  t$9 as ds,
+  IconRenderer as dt,
+  useTimeoutEffect as du,
+  ReactRemoveScroll as dv,
+  ActionIconGroup as dw,
+  IfEnabled as dx,
+  DiagramFeatures as dy,
+  t$5 as dz,
   em as e,
-  boxToRect as e0,
-  and as e1,
-  AllDisabled as e2,
-  focusedBounds as e3,
-  or as e4,
-  nodeToRect as e5,
-  useCustomCompareEffect as e6,
-  DiagramActorContextProvider as e7,
-  CurrentViewModelContext as e8,
-  IconRendererProvider as e9,
-  DiagramEventHandlers as ea,
-  ReduceGraphicsContext as eb,
-  RootContainer as ec,
-  useMutationObserver as ed,
-  shallowEqual$1 as ee,
-  LikeC4ProjectsContext as ef,
-  LikeC4ModelContext as eg,
-  useLikeC4ViewModel as eh,
-  useHasProjects as ei,
-  useLikeC4Projects as ej,
-  useSetState as ek,
-  CompoundActionButton as el,
-  DefaultHandles as em,
-  CompoundActions as en,
-  CompoundDeploymentToolbar as eo,
-  CompoundDetailsButtonWithHandler as ep,
-  CompoundElementToolbar as eq,
-  DeploymentElementActions as er,
-  DeploymentElementToolbar as es,
-  ElementActions as et,
-  ElementDetailsButtonWithHandler as eu,
-  ElementToolbar as ev,
-  Toolbar as ew,
-  IfNotEnabled as ex,
-  IfNotReadOnly as ey,
-  IfReadOnly as ez,
+  getViewportForBounds as e0,
+  typedSystem as e1,
+  centerXYInternalNode as e2,
+  getBoundsOfRects as e3,
+  boxToRect as e4,
+  and as e5,
+  AllDisabled as e6,
+  nodeToRect as e7,
+  activeSequenceBounds as e8,
+  focusedBounds as e9,
+  IfNotEnabled as eA,
+  IfNotReadOnly as eB,
+  IfReadOnly as eC,
+  or as ea,
+  useCustomCompareEffect as eb,
+  DiagramActorContextProvider as ec,
+  CurrentViewModelContext as ed,
+  IconRendererProvider as ee,
+  DiagramEventHandlers as ef,
+  ReduceGraphicsContext as eg,
+  RootContainer as eh,
+  useMutationObserver as ei,
+  shallowEqual$1 as ej,
+  LikeC4ProjectsContext as ek,
+  LikeC4ModelContext as el,
+  useLikeC4ViewModel as em,
+  useHasProjects as en,
+  useLikeC4Projects as eo,
+  useSetState as ep,
+  CompoundActionButton as eq,
+  DefaultHandles as er,
+  CompoundActions as es,
+  CompoundDeploymentToolbar as et,
+  CompoundDetailsButtonWithHandler as eu,
+  CompoundElementToolbar as ev,
+  DeploymentElementActions as ew,
+  DeploymentElementToolbar as ex,
+  ElementToolbar as ey,
+  Toolbar as ez,
   getPrimaryContrastColor as f,
   getPrimaryShade as g,
   deepMerge as h,