likec4 1.49.0 → 1.51.0

package/__app__/src/likec4.js

@@ -1307,7 +1307,7 @@ function useOptionalLikeC4Editor() {
 function useId() {
   return useId$1().replace("mantine-", "likec4-");
 }
-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,WebkitTextFillColor,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,_shapeBucket,_shapeDocument,_shapeComponent,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,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));
+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,WebkitTextFillColor,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,_shapeBucket,_shapeDocument,_shapeComponent,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,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,cornerShape,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, shouldForwardProp2) => tag.__shouldForwardProps__ && shouldForwardProp2 ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp2(propName) : shouldForwardProp2, composeCvaFn = (cvaA, cvaB) => {
   if (cvaA && !cvaB) return cvaA;
   if (!cvaA && cvaB) return cvaB;
@@ -1983,7 +1983,7 @@ const hotkeyActorLogic$1 = fromCallback(({ sendBack }) => {
 ), machine$5 = setup({
   delays: {
     "500ms": 500,
-    waitBeforeSync: 2e3
+    waitBeforeSync: 1e3
   },
   actors: {
     applyLatest,
@@ -5034,7 +5034,7 @@ function DriftsSummary() {
     onMouseLeave: onMouseLeaveDebounced,
     onClick
   }, { view, nodes, edges } = selected;
-  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { propagate: !0, mode: "wait", children: /* @__PURE__ */ jsxs(
+  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     m$1.div,
     {
       layout: "size",
@@ -5053,16 +5053,16 @@ function DriftsSummary() {
       }),
       children: [
         t$1(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Elements:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(
             nodes,
             (node2) => /* @__PURE__ */ jsx(NodeDrifts$1, { ...node2, ...handlers }, node2.id)
           ) })
         ] }, "nodes-drifts"),
-        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Relationships:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
         ] }, "edges-drifts")
       ]
     },
@@ -5086,6 +5086,7 @@ function ViewDrifts({ drifts }) {
   ) });
 }
 function NodeDrifts$1({ id, name, drifts, ...handlers }) {
+  const key2 = `node-drifts-${id}`;
   return /* @__PURE__ */ jsxs(
     DriftsGroup,
     {
@@ -5111,28 +5112,29 @@ function NodeDrifts$1({ id, name, drifts, ...handlers }) {
             children: name
           }
         ),
-        t$a(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+        t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key2 + drift + i))
       ]
     },
-    `node-drifts-${id}`
+    key2
   );
 }
 function EdgeDrifts$1({ edgeId, drifts, ...handlers }) {
+  const key2 = `edge-drifts-${edgeId}`;
   return /* @__PURE__ */ jsx(
     DriftsGroup,
     {
       "data-drift-type": "edge",
       "data-drift-id": edgeId,
       ...handlers,
-      children: t$a(drifts, (drift) => /* @__PURE__ */ jsx(
+      children: t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(
         DriftLabel,
         {
           children: drift
         },
-        edgeId + drift
+        key2 + drift + i
       ))
     },
-    `edge-drifts-${edgeId}`
+    key2
   );
 }
 const DriftsGroup = styled(m$1.div, {
@@ -5153,7 +5155,7 @@ const DriftsGroup = styled(m$1.div, {
   defaultProps: {
     className: "group",
     variants: variants$7,
-    layout: "size",
+    layout: !0,
     initial: "initial",
     animate: "animate",
     exit: "exit"
@@ -6171,7 +6173,7 @@ const Open = (props) => /* @__PURE__ */ jsx(
       {
         d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         strokeWidth: 1.25,
         strokeLinejoin: "miter",
         strokeLinecap: "square"
@@ -6215,7 +6217,7 @@ const Open = (props) => /* @__PURE__ */ jsx(
       {
         d: "M5,0 L10,4 L5,8 L0,4 Z",
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         strokeWidth: 1.25,
         strokeLinecap: "round"
       }
@@ -6255,7 +6257,7 @@ const Open = (props) => /* @__PURE__ */ jsx(
       {
         strokeWidth: 1.25,
         stroke: "context-stroke",
-        fill: "context-stroke",
+        fill: "var(--likec4-background-color)",
         cx: 4,
         cy: 4,
         r: 3
@@ -7057,7 +7059,7 @@ function ShapeSvgOutline({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
-function ElementShape({ data: data2, width, height, showSeletionOutline = !0 }) {
+function ElementShape({ data: data2, width, height, showSelectionOutline = !0 }) {
   let w = width && width > 10 ? width : data2.width, h = height && height > 10 ? height : data2.height;
   const isMultiple = data2.style?.multiple ?? !1, borderStyle = data2.style?.border ?? "none", withBorder = borderStyle !== "none";
   if (data2.shape === "rectangle")
@@ -7070,7 +7072,7 @@ function ElementShape({ data: data2, width, height, showSeletionOutline = !0 })
         className: elementShapeRecipe({
           shapetype: "html",
           withBorder,
-          withOutline: showSeletionOutline
+          withOutline: showSelectionOutline
         }),
         children: [
           isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
@@ -7080,7 +7082,7 @@ function ElementShape({ data: data2, width, height, showSeletionOutline = !0 })
     );
   const className = elementShapeRecipe({
     shapetype: "svg",
-    withOutline: showSeletionOutline
+    withOutline: showSelectionOutline
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data2.shape, size: data2.style?.size, w, h }) }),
@@ -8014,17 +8016,9 @@ const selector$5 = (ctx) => {
   }
 ));
 function StartWalkthroughButton() {
-  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
+  const { enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
   let tooltipLabel = "Start Dynamic View Walkthrough";
-  switch (!0) {
-    case !enableReadOnly:
-      tooltipLabel = "Walkthrough not available in Edit mode";
-      break;
-    case enableCompareWithLatest:
-      tooltipLabel = "Walkthrough not available when Compare is active";
-      break;
-  }
-  return /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
+  return !0 === enableCompareWithLatest && (tooltipLabel = "Walkthrough not available when Compare is active"), /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
     TriggerWalkthroughButton,
     {
       onClick: (e2) => {
@@ -8035,7 +8029,7 @@ function StartWalkthroughButton() {
       exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
-      disabled: !enableReadOnly || enableCompareWithLatest,
+      disabled: enableCompareWithLatest,
       classNames: {
         label: css({
           display: {
@@ -10791,26 +10785,26 @@ function ElementDetailsCard({
   );
   let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
   defaultView?.id === viewId && (defaultView = null);
-  const defaultLink = t$f(elementModel.links), controls = useDragControls(), isCompound = (nodeModel?.$node.children?.length ?? 0) > 0, _width = Math.min(700, windowWidth - MIN_PADDING * 2), _height = Math.min(650, windowHeight - MIN_PADDING * 2), fromPositon = rectFromNode ? {
+  const defaultLink = t$f(elementModel.links), controls = useDragControls(), isCompound = (nodeModel?.$node.children?.length ?? 0) > 0, _width = Math.min(700, windowWidth - MIN_PADDING * 2), _height = Math.min(650, windowHeight - MIN_PADDING * 2), fromPosition = rectFromNode ? {
     x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
     y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
   } : {
     x: windowWidth / 2,
     y: windowHeight / 2
   }, fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1, left = Math.round(
-    t(fromPositon.x - _width / 2, {
+    t(fromPosition.x - _width / 2, {
       min: MIN_PADDING,
       max: windowWidth - _width - MIN_PADDING
     })
   ), top = Math.round(
-    t(fromPositon.y - (isCompound ? 0 : 60), {
+    t(fromPosition.y - (isCompound ? 0 : 60), {
       min: MIN_PADDING,
       max: windowHeight - _height - MIN_PADDING
     })
-  ), originX = t((fromPositon.x - left) / _width, {
+  ), originX = t((fromPosition.x - left) / _width, {
     min: 0.1,
     max: 0.9
-  }), originY = t((fromPositon.y - top) / _height, {
+  }), originY = t((fromPosition.y - top) / _height, {
     min: 0.1,
     max: 0.9
   }), width = useMotionValue(_width), height = useMotionValue(_height);
@@ -14297,31 +14291,8 @@ const shapeBadge = css({
     key: "notation-webview-collapsed",
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
-      m$1.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: container,
-        children: /* @__PURE__ */ jsx(Tooltip$7, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
-          ThemeIcon,
-          {
-            size: "lg",
-            variant: "light",
-            color: "orange",
-            radius: "md",
-            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-          }
-        ) })
-      },
-      "empty"
-    ),
-    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
+  return hasNotations ? /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    isCollapsed && /* @__PURE__ */ jsx(
       m$1.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -14345,7 +14316,7 @@ const shapeBadge = css({
       },
       "collapsed"
     ),
-    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
+    !isCollapsed && /* @__PURE__ */ jsx(
       m$1.div,
       {
         initial: {
@@ -14405,7 +14376,7 @@ const shapeBadge = css({
       },
       id
     )
-  ] });
+  ] }) : null;
 }), LikeC4DiagramUI = memo$1(() => {
   const {
     enableControls,

package/__app__/src/main.js

@@ -1,61 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { R as Routes } from "./routes/index.js";
-import { A as createTheme, T as Tooltip, P as Portal, S as SegmentedControl, M as MantineProvider } from "./vendors.js";
-const theme = createTheme({
-  autoContrast: !0,
-  primaryColor: "indigo",
-  cursorType: "pointer",
-  fontFamily: "var(--likec4-app-font)",
-  headings: {
-    fontWeight: "500",
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: "600"
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  },
-  fontSizes: {
-    xxs: "var(--font-sizes-xxs)",
-    xs: "var(--font-sizes-xs)",
-    sm: "var(--font-sizes-sm)",
-    md: "var(--font-sizes-md)",
-    lg: "var(--font-sizes-lg)",
-    xl: "var(--font-sizes-xl)"
-  },
-  spacing: {
-    xs: "var(--spacing-xs)",
-    sm: "var(--spacing-sm)",
-    md: "var(--spacing-md)",
-    lg: "var(--spacing-lg)",
-    xl: "var(--spacing-xl)"
-  },
-  components: {
-    SegmentedControl: SegmentedControl.extend({
-      vars: (theme2, props, ctx) => ({
-        root: {
-          // @ts-ignore
-          "--sc-font-size": theme2.fontSizes[props.fz ?? props.size]
-        }
-      })
-    }),
-    Portal: Portal.extend({
-      defaultProps: {
-        reuseTargetNode: !0
-      }
-    }),
-    Tooltip: Tooltip.extend({
-      defaultProps: {
-        color: "dark"
-      }
-    })
-  }
-});
+import { a as Routes } from "./routes/index.js";
 createRoot(document.getElementById("likec4-root")).render(
-  /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(MantineProvider, { theme, defaultColorScheme: "auto", children: /* @__PURE__ */ jsx(Routes, {}) }) })
+  /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(Routes, {}) })
 );

package/__app__/src/routes/index.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { cY as useNavigate, bS as useCallbackRef, cZ as z, c_ as createRootRouteWithContext, a0 as t, c$ as stripSearchParams, d0 as Outlet, k as useMantineColorScheme, d1 as createFileRoute, d2 as redirect, d3 as useDocumentTitle, d4 as createRouter, d5 as createHashHistory, d6 as createBrowserHistory, d7 as RouterProvider } from "../vendors.js";
+import { jsx } from "react/jsx-runtime";
+import { cY as useNavigate, bS as useCallbackRef, cZ as z, A as createTheme, T as Tooltip, P as Portal, S as SegmentedControl, c_ as createRootRouteWithContext, a0 as t, c$ as stripSearchParams, M as MantineProvider, d0 as Outlet, d1 as createFileRoute, d2 as redirect, d3 as useDocumentTitle, d4 as createRouter, d5 as createHashHistory, d6 as createBrowserHistory, d7 as RouterProvider } from "../vendors.js";
 import { useLikeC4Projects, projects } from "likec4:projects";
 import { R as Route$3, a as Route$4, b as Route$5, c as Route$9, d as Route$a, e as Route$b, f as Route$c, g as Route$d, h as Route$h, i as Route$i, j as Route$j, k as Route$k, F as Fallback, N as NotFound } from "./single.js";
 import { pageTitle, useHashHistory, basepath } from "../const.js";
 import { L as LikeC4ProjectsProvider, B as Box } from "../likec4.js";
-import { useEffect, lazy } from "react";
+import { lazy } from "react";
 import { R as Route$6, a as Route$7, b as Route$8, c as Route$e, d as Route$f, e as Route$g, f as Route$l, g as Route$m, h as Route$n, i as Route$o, j as Route$p } from "./projects.js";
 function LikeC4ProjectsContext({ children }) {
   const projects2 = useLikeC4Projects(), navigate = useNavigate(), onProjectChange = useCallbackRef((projectId) => {
@@ -20,17 +20,79 @@ function LikeC4ProjectsContext({ children }) {
   );
 }
 const searchParamsSchema = z.object({
-  theme: z.literal(["light", "dark", "auto"]).default("auto").catch("auto"),
+  theme: z.literal(["light", "dark", "auto"]).optional().catch(void 0),
   dynamic: z.enum(["diagram", "sequence"]).default("diagram").catch("diagram"),
   padding: z.number().min(0).default(20).catch(20),
   relationships: z.string().nonempty().optional().catch(void 0).transform((v) => v)
+});
+function resolveForceColorScheme(theme2) {
+  switch (theme2) {
+    case "light":
+    case "dark":
+      return theme2;
+    default:
+      return;
+  }
+}
+const theme = createTheme({
+  autoContrast: !0,
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  fontFamily: "var(--likec4-app-font)",
+  headings: {
+    fontWeight: "500",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "600"
+      },
+      h2: {
+        // fontSize: '1.85rem',
+      }
+    }
+  },
+  fontSizes: {
+    xxs: "var(--font-sizes-xxs)",
+    xs: "var(--font-sizes-xs)",
+    sm: "var(--font-sizes-sm)",
+    md: "var(--font-sizes-md)",
+    lg: "var(--font-sizes-lg)",
+    xl: "var(--font-sizes-xl)"
+  },
+  spacing: {
+    xs: "var(--spacing-xs)",
+    sm: "var(--spacing-sm)",
+    md: "var(--spacing-md)",
+    lg: "var(--spacing-lg)",
+    xl: "var(--spacing-xl)"
+  },
+  components: {
+    SegmentedControl: SegmentedControl.extend({
+      vars: (theme2, props, ctx) => ({
+        root: {
+          // @ts-ignore
+          "--sc-font-size": theme2.fontSizes[props.fz ?? props.size]
+        }
+      })
+    }),
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: !0
+      }
+    }),
+    Tooltip: Tooltip.extend({
+      defaultProps: {
+        color: "dark"
+      }
+    })
+  }
 }), Route$2 = createRootRouteWithContext()({
   validateSearch: searchParamsSchema,
   search: {
     middlewares: [
       stripSearchParams({
         padding: 20,
-        theme: "auto",
+        theme: void 0,
         dynamic: "diagram",
         relationships: void 0
       })
@@ -46,17 +108,18 @@ const searchParamsSchema = z.object({
   component: RootComponent
 });
 function RootComponent() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(ThemeSync, {})
-  ] });
+  const { theme: theme$1 } = Route$2.useSearch(), forceColorScheme = resolveForceColorScheme(theme$1);
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme,
+      defaultColorScheme: "auto",
+      ...forceColorScheme && { forceColorScheme },
+      children: /* @__PURE__ */ jsx(Outlet, {})
+    }
+  );
 }
-const ThemeSync = () => {
-  const { theme } = Route$2.useSearch(), mantineColorScheme = useMantineColorScheme();
-  return useEffect(() => {
-    theme && mantineColorScheme.setColorScheme(theme);
-  }, [theme]), null;
-}, ProjectsOverviewPage = lazy(async () => {
+const ProjectsOverviewPage = lazy(async () => {
   const { ProjectsOverviewPage: ProjectsOverviewPage2 } = await import("../ProjectsOverview.js");
   return {
     default: ProjectsOverviewPage2
@@ -246,5 +309,7 @@ function Routes() {
   return /* @__PURE__ */ jsx(RouterProvider, { router });
 }
 export {
-  Routes as R
+  Route$2 as R,
+  Routes as a,
+  resolveForceColorScheme as r
 };