@likec4/diagram 1.36.1 → 1.38.0

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,10 +1,11 @@
 import { extractStep, isStepEdgeId } from '@likec4/core'
 import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import { type BoxProps, Box } from '@likec4/styles/jsx'
+import { Box } from '@likec4/styles/jsx'
 import { edgeLabel } from '@likec4/styles/recipes'
-import { Text } from '@mantine/core'
-import { type PropsWithChildren, forwardRef } from 'react'
+import type { HTMLMotionProps } from 'motion/react'
+import * as m from 'motion/react-m'
+import { forwardRef } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -17,11 +18,12 @@ type Data = UndefinedOnPartialDeep<
   >
 >
 
-type EdgeLabelProps = PropsWithChildren<
-  BoxProps & {
+type EdgeLabelProps =
+  & HTMLMotionProps<'div'>
+  & {
+    children?: React.ReactNode
     edgeProps: EdgeProps<Data>
   }
->
 
 export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
   {
@@ -30,7 +32,10 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
       data: {
         label,
         technology,
+        hovered: isHovered = false,
       },
+      selected = false,
+      selectable = false,
     },
     className,
     style,
@@ -42,10 +47,20 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null
   const classes = edgeLabel({
     isStepEdge: stepNum !== null,
+    cursor: selectable || stepNum !== null ? 'pointer' : 'default',
   })
 
   return (
-    <Box ref={ref} className={cx(classes.root, className)} {...rest}>
+    <m.div
+      ref={ref}
+      className={cx(classes.root, 'likec4-edge-label', className)}
+      data-edge-id={id}
+      animate={{
+        originY: 0.25,
+        scale: isHovered && !selected ? 1.08 : 1,
+      }}
+      {...rest}
+    >
       {stepNum !== null && (
         <Box className={classes.stepNumber}>
           {stepNum}
@@ -70,7 +85,7 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
         )}
         {children}
       </Box>
-    </Box>
+    </m.div>
   )
 })
 EdgeLabel.displayName = 'EdgeLabel'

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -1,12 +1,11 @@
 import type { DiagramEdge } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
+import { css, cx } from '@likec4/styles/css'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import { type HTMLAttributes } from 'react'
 import { isNumber } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import { ZIndexes } from '../../const'
 import type { EdgeProps } from '../../types'
-import { edgeLabelContainer, translate as _translate } from './EdgeLabel.css'
 
 type Data = UndefinedOnPartialDeep<
   Pick<
@@ -70,7 +69,12 @@ export function EdgeLabelContainer({
       <div
         key={id}
         className={cx(
-          edgeLabelContainer,
+          css({
+            display: {
+              _reduceGraphicsOnPan: 'none',
+              _smallZoom: 'none',
+            },
+          }),
           'nodrag nopan',
           'likec4-edge-label-container',
           className,
@@ -83,32 +87,16 @@ export function EdgeLabelContainer({
           'data-likec4-dimmed': isDimmed,
         }}
         style={{
-          top: toCssVarValue(labelY),
-          left: toCssVarValue(labelX),
-          ...(translate && {
-            [_translate.var]: translate,
-          }),
           ...(labelBBox && {
             maxWidth: labelBBox.width + 18,
           }),
           zIndex,
           ...style,
+          transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ''}`,
         }}
         {...rest}
       >
-        <div
-          style={{
-            display: 'contents',
-          }}
-          {
-            // Work around to keep same global selector data-likec4-dimmed
-            ...isDimmed !== false && {
-              'data-likec4-dimmed': isDimmed,
-            }
-          }
-        >
-          {children}
-        </div>
+        {children}
       </div>
     </EdgeLabelRenderer>
   )

package/src/base/primitives/edge/edge.css.ts

@@ -22,9 +22,11 @@ export const edgePathBg = css(_hideOnReducedGraphics, {
   fill: '[none]',
   strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
   strokeOpacity: 0.08,
-  transitionProperty: 'stroke-width, stroke-opacity',
-  transitionDuration: 'fast',
-  transitionTimingFunction: 'inOut',
+  _noReduceGraphics: {
+    transitionProperty: 'stroke-width, stroke-opacity',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'inOut',
+  },
   _whenHovered: {
     transitionTimingFunction: 'out',
     strokeWidth: 'calc(var(--xy-edge-stroke-width) + 4)',
@@ -49,18 +51,24 @@ export const cssEdgePath = css({
   fill: '[none!]',
   strokeDashoffset: 10,
   _noReduceGraphics: {
+    animationStyle: 'xyedgeAnimated',
+    animationPlayState: 'paused',
     transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
   },
+  [`:where([data-edge-dir='back']) &`]: {
+    animationDirection: 'reverse',
+  },
   _whenHovered: {
-    animationStyle: 'xyedgeAnimated',
-    animationDelay: '450ms',
+    _noReduceGraphics: {
+      animationPlayState: 'running',
+      animationDelay: '450ms',
+    },
   },
   [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
-    animationStyle: 'xyedgeAnimated',
-    animationDelay: '0ms',
-  },
-  [`:where([data-edge-dir='back']) &`]: {
-    animationDirection: 'reverse',
+    _noReduceGraphics: {
+      animationPlayState: 'running',
+      animationDelay: '0ms',
+    },
   },
   _whenDimmed: {
     animationPlayState: 'paused',
@@ -70,6 +78,6 @@ export const cssEdgePath = css({
   },
   _whenPanning: {
     strokeDasharray: 'none !important',
-    animationName: 'none',
+    animationPlayState: 'paused',
   },
 })

package/src/base/primitives/element/ElementShape.tsx

@@ -1,14 +1,14 @@
 import { nonexhaustive } from '@likec4/core'
 import type { ElementShape, ElementStyle } from '@likec4/core/types'
-import { cx as clsx } from '@likec4/styles/css'
-import { toDomPrecision } from '../../../utils/xyflow'
-import * as css from './ElementShape.css'
+import { Box } from '@likec4/styles/jsx'
+import { elementShapeRecipe } from '@likec4/styles/recipes'
+import { roundDpr } from '../../../utils'
 
 export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
   const radius = Math.round(diameter / 2)
   // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
   const rx = radius
-  const ry = toDomPrecision(tilt * radius)
+  const ry = roundDpr(tilt * radius)
   const tiltAdjustedHeight = height - 2 * ry
 
   const path = `  M ${diameter},${ry}
@@ -31,7 +31,7 @@ function queueSVGPath(width: number, height: number, tilt = 0.185) {
   const diameter = height
   const radius = Math.round(diameter / 2)
   const ry = radius
-  const rx = toDomPrecision((diameter / 2) * tilt)
+  const rx = roundDpr((diameter / 2) * tilt)
   const tiltAdjustedWidth = width - 2 * rx
 
   const path = `
@@ -62,7 +62,7 @@ type ElementShapeProps = {
   h: number
 }
 
-function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
+function ShapeSvg({ shape, w, h }: ElementShapeProps) {
   switch (shape) {
     case 'mobile': {
       return (
@@ -71,10 +71,10 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
             width={w}
             height={h}
             rx={6}
-            className={css.fillMixStroke}
+            data-likec4-fill="mix-stroke"
             strokeWidth={0}
           />
-          <g className={css.fillElementFill} strokeWidth={0}>
+          <g data-likec4-fill="fill" strokeWidth={0}>
             <circle cx={17} cy={h / 2} r={12} />
             <rect x={33} y={12} width={w - 44} height={h - 24} rx={5} />
           </g>
@@ -88,10 +88,10 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
             width={w}
             height={h}
             rx={6}
-            className={css.fillMixStroke}
+            data-likec4-fill="mix-stroke"
             strokeWidth={0}
           />
-          <g className={css.fillElementFill} strokeWidth={0}>
+          <g data-likec4-fill="fill" strokeWidth={0}>
             <circle cx={16} cy={17} r={7} />
             <circle cx={36} cy={17} r={7} />
             <circle cx={56} cy={17} r={7} />
@@ -115,7 +115,7 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
             width={PersonIcon.width}
             height={PersonIcon.height}
             viewBox={`0 0 ${PersonIcon.width} ${PersonIcon.height}`}
-            className={css.fillMixStroke}
+            data-likec4-fill="mix-stroke"
           >
             <path
               strokeWidth={0}
@@ -129,7 +129,7 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
       return (
         <>
           <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} className={css.fillMixStroke} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} data-likec4-fill="mix-stroke" strokeWidth={2} />
         </>
       )
     }
@@ -139,7 +139,7 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
       return (
         <>
           <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} className={css.fillMixStroke} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} data-likec4-fill="mix-stroke" strokeWidth={2} />
         </>
       )
     }
@@ -158,6 +158,19 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
   }
 }
 
+function ShapeHtml({ multiple, withOutLine }: { multiple: boolean; withOutLine: boolean }) {
+  return (
+    <Box
+      className={elementShapeRecipe({
+        shapetype: 'html',
+      })}
+    >
+      {multiple && <div className={'likec4-shape-multiple'} />}
+      {withOutLine && <div className={'likec4-shape-outline'} />}
+    </Box>
+  )
+}
+
 type Data = {
   shape: ElementShape
   width: number
@@ -183,16 +196,25 @@ export function ElementShape(
   let w = !!width && width > 10 ? width : data.width
   let h = !!height && height > 10 ? height : data.height
   const isMultiple = data.style?.multiple ?? false
+
+  if (data.shape === 'rectangle') {
+    return <ShapeHtml multiple={isMultiple} withOutLine={withSelectedIndicator} />
+  }
+
+  const className = elementShapeRecipe({
+    shapetype: 'svg',
+  })
+
   return (
     <>
       {isMultiple && (
-        <svg className={clsx(css.shapeSvgMultiple)} viewBox={`0 0 ${w} ${h}`}>
-          <ElementShapeSvg shape={data.shape} w={w} h={h} />
+        <svg className={className} data-likec4-shape-multiple="true" viewBox={`0 0 ${w} ${h}`}>
+          <ShapeSvg shape={data.shape} w={w} h={h} />
         </svg>
       )}
-      <svg className={css.shapeSvg} viewBox={`0 0 ${w} ${h}`}>
+      <svg className={className} viewBox={`0 0 ${w} ${h}`}>
         {withSelectedIndicator && <SelectedIndicator shape={data.shape} w={w} h={h} />}
-        <ElementShapeSvg shape={data.shape} w={w} h={h} />
+        <ShapeSvg shape={data.shape} w={w} h={h} />
       </svg>
     </>
   )
@@ -224,5 +246,5 @@ export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
       break
     }
   }
-  return <g className={css.indicator}>{svg}</g>
+  return <g className={'likec4-shape-outline'}>{svg}</g>
 }

package/src/base/primitives/element/ElementTags.tsx

@@ -19,7 +19,7 @@ export type ElementTagProps = {
 } & Omit<BoxProps, 'children'>
 
 export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
-  ({ tag, cursor = 'default', className, ...props }, ref) => {
+  ({ tag, cursor, className, style, ...props }, ref) => {
     const spec = useTagSpecification(tag)
     return (
       <Box
@@ -32,7 +32,10 @@ export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
           className,
         )}
         {...props}
-        style={{ cursor }}
+        style={{
+          cursor,
+          ...style,
+        }}
       >
         <span>#</span>
         <span>{tag}</span>
@@ -129,7 +132,7 @@ export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }:
             data-likec4-tag={tag}
             className={css({
               layerStyle: 'likec4.tag',
-              flex: 1,
+              flex: '1',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -162,9 +165,9 @@ export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }:
             <ElementTag
               key={tag}
               tag={tag}
+              cursor="pointer"
               className={css({
                 userSelect: 'none',
-                cursor: 'pointer',
                 ...(zoomIsLargeEnough && {
                   fontSize: 'lg',
                   borderRadius: '[4px]',

package/src/base/primitives/element/ElementTitle.tsx

@@ -77,17 +77,29 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
           </Text>
         )}
 
-        {data.description && (
-          <MarkdownBlock
-            className={cx(classes.description, 'likec4-element-description')}
-            value={data.description}
-            uselikec4palette
-            hideIfEmpty
-            // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
-            maxHeight={data.description.isMarkdown ? '8rem' : undefined}
-            // textScale={0.95}
-            lineClamp={isSmOrXs ? 3 : 5}
-          />
+        {data.description?.nonEmpty && (
+          data.description.isMarkdown
+            ? (
+              <MarkdownBlock
+                className={cx(classes.description, 'likec4-element-description')}
+                value={data.description}
+                uselikec4palette
+                hideIfEmpty
+                // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
+                maxHeight={data.description.isMarkdown ? '8rem' : undefined}
+                // textScale={0.95}
+                lineClamp={isSmOrXs ? 3 : 5}
+              />
+            )
+            : (
+              <Text
+                component="div"
+                className={cx(classes.description, 'likec4-element-description')}
+                lineClamp={isSmOrXs ? 3 : 5}
+              >
+                {data.description.text}
+              </Text>
+            )
         )}
       </Box>
     </Box>

package/src/base/types.ts

@@ -8,25 +8,21 @@ import type { OptionalKeysOf, SetRequired, Simplify } from 'type-fest'
 import * as Base from './types.Base'
 
 /**
-
-To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
-
-@example
-```
-interface User {
-	name: string;
-	surname?: string;
-	luckyNumber?: number;
-}
-
-type NonOptionalUser = NonOptional<User>
-
-// NonOptionalUser = {
-//   name: string
-//   surname: string | undefined
-//   luckyNumber: number | undefined
-// }
-```
+ * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
+ *
+ * @example
+ * interface User {
+ * 	name: string;
+ * 	surname?: string;
+ * 	luckyNumber?: number;
+ * }
+ *
+ * type NonOptionalUser = NonOptional<User>
+ * // NonOptionalUser = {
+ * //   name: string
+ * //   surname: string | undefined
+ * //   luckyNumber: number | undefined
+ * // }
  */
 export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<
   & {
@@ -40,17 +36,17 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<
-  RFNode<Base.NodeData & T, NodeType>
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<
+  ReactFlowNodeProps<
+    RFNode<Base.NodeData & T, NodeType>
+  >
 >
 
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}> = SetRequired<
-  ReactFlowEdgeProps<
-    RFEdge<Base.EdgeData & T, any>
-  >,
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<
+  Simplify<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, EdgeType>>>,
   'data'
 >
 

package/src/bundle/LikeC4View.props.ts

@@ -1,4 +1,4 @@
-import type { aux, WhereOperator } from '@likec4/core/types'
+import type { Any, aux, WhereOperator } from '@likec4/core/types'
 import type { CSSProperties } from 'react'
 import type {
   CustomNodes,
@@ -8,7 +8,7 @@ import type {
   ViewPadding,
 } from '../LikeC4Diagram.props'
 
-export interface LikeC4ViewProps<A extends aux.Any> {
+export interface LikeC4ViewProps<A extends Any> {
   /**
    * View to display.
    */

package/src/bundle/LikeC4View.tsx

@@ -1,4 +1,4 @@
-import type { Any, aux, DiagramView } from '@likec4/core/types'
+import type { Any, aux, DiagramView, UnknownLayouted } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Box } from '@mantine/core'
 import { shallowEqual } from '@mantine/hooks'
@@ -15,7 +15,7 @@ import { ShadowRoot } from './ShadowRoot'
 import { cssInteractive, useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({
+export function LikeC4View<A extends Any = UnknownLayouted>({
   viewId,
   ...props
 }: LikeC4ViewProps<A>) {
@@ -44,10 +44,10 @@ const DEFAULT_BROWSER_PADDING: ViewPadding = {
   right: '16px',
 }
 
-type LikeC4ViewInnerProps<A extends aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
+type LikeC4ViewInnerProps<A extends Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
   view: DiagramView<A>
 }
-const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
+const LikeC4ViewInner = memo<LikeC4ViewInnerProps<Any>>(({
   view,
   className,
   pannable = false,
@@ -140,7 +140,10 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
             controls={controls}
             nodesDraggable={false}
             reduceGraphics={reduceGraphics}
-            className={cx(isBrowserEnabled && cssInteractive)}
+            className={cx(
+              'likec4-static-view',
+              isBrowserEnabled && cssInteractive,
+            )}
             // We may have multiple embedded views on the same page
             // so we don't want enable search and hotkeys
             enableSearch={false}

package/src/bundle/ReactLikeC4.tsx

@@ -1,4 +1,4 @@
-import type { Any, aux, DiagramView } from '@likec4/core/types'
+import type { Any, aux, DiagramView, UnknownLayouted } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'
@@ -8,7 +8,7 @@ import { ShadowRoot } from './ShadowRoot'
 import { useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
   viewId: aux.ViewId<A>
 
   /**
@@ -41,7 +41,7 @@ export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'v
   styleNonce?: string | (() => string) | undefined
 }
 
-export function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({
+export function ReactLikeC4<A extends Any = UnknownLayouted>({
   viewId,
   ...props
 }: ReactLikeC4Props<A>) {

package/src/components/Link.tsx

@@ -58,8 +58,9 @@ export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'cl
             maxWidth: 500,
             userSelect: 'all',
             pr: '0',
-            _hover: {
-              backgroundColor: {
+            backgroundColor: {
+              base: 'transparent',
+              _hover: {
                 base: 'mantine.colors.gray[1]',
                 _dark: 'mantine.colors.dark[5]',
               },

package/src/context/RootContainer.tsx

@@ -21,11 +21,7 @@ export function RootContainer({
 
   useEffect(() => {
     return $isPanning.listen((isPanning) => {
-      if (isPanning) {
-        ref.current?.setAttribute('data-likec4-diagram-panning', 'true')
-      } else {
-        ref.current?.removeAttribute('data-likec4-diagram-panning')
-      }
+      ref.current?.setAttribute('data-likec4-diagram-panning', isPanning ? 'true' : 'false')
     })
   }, [$isPanning])
 

package/src/context/TagStylesContext.tsx

@@ -7,6 +7,7 @@ import { useLikeC4Specification } from '../likec4model/useLikeC4Model'
 
 const TagStylesContext = createContext<Record<string, TagSpecification>>({})
 
+// TODO: keep this in sync with styled-system/preset/src/const.ts
 const radixColors = [
   'yellow',
   'orange',
@@ -28,6 +29,7 @@ const radixColors = [
 
 const generateColorVars = (spec: TagSpecification) => {
   const color = spec.color
+  // Tag has a color defined in the specification
   if (isTagColorSpecified(spec)) {
     return `
       --colors-likec4-tag-bg: ${color};