@likec4/diagram 1.34.2 → 1.36.0

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

@@ -4,8 +4,8 @@ const labelBorderRadius = '4px'
 
 export const edgeNoteCloseButton = css({
   position: 'absolute',
-  top: 4,
-  right: 4,
+  top: '1',
+  right: '1',
 })
 
 export const edgeNoteText = css({
@@ -26,8 +26,8 @@ export const translate = {
 } as const
 
 export const edgeLabelContainer = css({
-  top: 0,
-  left: 0,
+  top: '0',
+  left: '0',
   position: 'absolute',
   pointerEvents: 'all',
   cursor: 'pointer',
@@ -62,82 +62,3 @@ export const edgeLabelContainer = css({
     display: 'none',
   },
 })
-
-export const labelsva = sva({
-  slots: ['root', 'stepNumber', 'labelContents', 'labelText', 'labelTechnology'],
-  base: {
-    root: {
-      pointerEvents: 'all',
-      fontFamily: 'likec4.relation',
-      padding: '3px 5px 5px 5px',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'max-content',
-      maxWidth: '100%',
-      gap: '4px',
-    },
-    stepNumber: {
-      alignSelf: 'stretch',
-      flex: '0 0 auto',
-      fontWeight: 600,
-      fontSize: '14px',
-      lineHeight: '1',
-      padding: '5px 5px',
-      textAlign: 'center',
-      minWidth: '22px',
-      borderTopLeftRadius: labelBorderRadius,
-      borderBottomLeftRadius: labelBorderRadius,
-      background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]`,
-      fontVariantNumeric: 'tabular-nums',
-      // _dark: {
-      [':where([data-likec4-color="gray"]) &']: {
-        _dark: {
-          background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]`,
-        },
-      },
-    },
-    labelContents: {
-      display: 'contents',
-      _empty: {
-        display: 'none !important',
-      },
-    },
-    labelText: {
-      whiteSpaceCollapse: 'preserve-breaks',
-      fontSize: '14px',
-      lineHeight: '1.185',
-    },
-    labelTechnology: {
-      textAlign: 'center',
-      whiteSpaceCollapse: 'preserve-breaks',
-      fontSize: '11px',
-      lineHeight: '1',
-      opacity: 0.75,
-    },
-  },
-  variants: {
-    isStepEdge: {
-      false: {},
-      true: {
-        root: {
-          flexDirection: 'row',
-          gap: '4px',
-          padding: '0px',
-        },
-        labelContents: {
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '2px 5px 4px 0px',
-        },
-        labelText: {
-          padding: '2px 6px 4px 0px',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    isStepEdge: false,
-  },
-})

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

@@ -1,13 +1,13 @@
 import { extractStep, isStepEdgeId } from '@likec4/core'
 import type { DiagramEdge } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
+import { css, cx } from '@likec4/styles/css'
 import { type BoxProps, Box } from '@likec4/styles/jsx'
+import { edgeLabel } from '@likec4/styles/recipes'
 import { Text } from '@mantine/core'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
-import { labelsva } from './EdgeLabel.css'
 
 type Data = UndefinedOnPartialDeep<
   Pick<
@@ -40,27 +40,33 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
   ref,
 ) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null
-  const classes = labelsva({
+  const classes = edgeLabel({
     isStepEdge: stepNum !== null,
   })
 
   return (
-    <Box ref={ref} className={cx(classes.root!, className)} {...rest}>
+    <Box ref={ref} className={cx(classes.root, className)} {...rest}>
       {stepNum !== null && (
-        <Box className={classes.stepNumber!}>
+        <Box className={classes.stepNumber}>
           {stepNum}
         </Box>
       )}
-      <Box className={classes.labelContents!}>
+      <Box className={classes.labelContents}>
         {isTruthy(label) && (
-          <Text component="div" className={classes.labelText!} lineClamp={5}>
+          <Box
+            className={cx(
+              classes.labelText,
+              css({
+                lineClamp: 5,
+              }),
+            )}>
             {label}
-          </Text>
+          </Box>
         )}
         {isTruthy(technology) && (
-          <Text component="div" className={classes.labelTechnology!}>
+          <Box className={classes.labelTechnology}>
             {'[ ' + technology + ' ]'}
-          </Text>
+          </Box>
         )}
         {children}
       </Box>

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

@@ -1,12 +1,11 @@
 import type { DiagramEdge } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
+import { 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 { edgeVars } from './edge.css'
 import { edgeLabelContainer, translate as _translate } from './EdgeLabel.css'
 
 type Data = UndefinedOnPartialDeep<
@@ -71,10 +70,6 @@ export function EdgeLabelContainer({
       <div
         key={id}
         className={cx(
-          css({
-            likec4RelationPalette: color,
-          }),
-          edgeVars,
           edgeLabelContainer,
           'nodrag nopan',
           'likec4-edge-label-container',

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

@@ -72,7 +72,7 @@ const OArrow = (props: SVGProps<SVGMarkerElement>) => (
     <path
       d="M 0 0 L 8 3 L 0 6 L 1 3 z"
       stroke="context-stroke"
-      fill="var(--likec4-background-color)"
+      fill="context-stroke"
       strokeWidth={1.25}
       strokeLinejoin="miter"
       strokeLinecap={'square'}
@@ -113,7 +113,7 @@ const ODiamond = (props: SVGProps<SVGMarkerElement>) => (
     <path
       d="M5,0 L10,4 L5,8 L0,4 Z"
       stroke="context-stroke"
-      fill="var(--likec4-background-color)"
+      fill="context-stroke"
       strokeWidth={1.25}
       strokeLinecap={'round'}
     />
@@ -149,7 +149,7 @@ const ODot = (props: SVGProps<SVGMarkerElement>) => (
     <circle
       strokeWidth={1.25}
       stroke="context-stroke"
-      fill="var(--likec4-background-color)"
+      fill="context-stroke"
       cx={4}
       cy={4}
       r={3}

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

@@ -2,31 +2,6 @@ import { css } from '@likec4/styles/css'
 
 const isSelected = '.react-flow__edge.selected'
 
-const edgeStroke = '--xy-edge-stroke'
-const edgeStrokeSelected = '--xy-edge-stroke-selected'
-const labelColor = '--xy-edge-label-color'
-const labelBg = '--xy-edge-label-background-color'
-
-export const edgeVars = css({
-  [edgeStroke]: '{colors.likec4.relation.stroke}',
-  [edgeStrokeSelected]: '{colors.likec4.relation.stroke.selected}',
-  [labelColor]: {
-    base: '{colors.likec4.relation.label}',
-    _light: `color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)`,
-  },
-  [labelBg]: {
-    _light: `{colors.likec4.relation.label.bg/60}`,
-    _dark: `{colors.likec4.relation.label.bg/50}`,
-  },
-  ['--xy-edge-stroke-width']: '3',
-  '&:is([data-likec4-hovered=\'true\'],[data-edge-active=\'true\'])': {
-    [edgeStroke]: '{colors.likec4.relation.stroke.selected}',
-    _whenSelected: {
-      ['--xy-edge-stroke-width']: '4',
-    },
-  },
-})
-
 export const edgeContainer = css({
   _reduceGraphics: {
     transition: 'none',
@@ -98,38 +73,3 @@ export const cssEdgePath = css({
     animationName: 'none',
   },
 })
-
-const aiBg = {
-  var: '--ai-bg',
-  ref: 'var(--ai-bg)',
-} as const
-
-export const actionBtn = css({
-  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  pointerEvents: 'all',
-  // color: `xyedge.label`,
-  cursor: 'pointer',
-  opacity: 0.75,
-  transition: 'fast',
-  // backgroundColor: aiBg.ref,
-  [aiBg.var]: 'var(--xy-edge-label-background-color)',
-  '--ai-hover': `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
-  '--ai-size': `var(--ai-size-sm)`,
-  '--ai-radius': `var(--mantine-radius-sm)`,
-  _hover: {
-    translateY: '1px',
-    scale: 1.15,
-  },
-  _active: {
-    translateY: '-1px',
-    scale: '0.9',
-  },
-  _whenHovered: {
-    opacity: 1,
-  },
-  '& .tabler-icon': {
-    width: '80%',
-    height: '80%',
-    strokeWidth: '2',
-  },
-})

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

@@ -15,9 +15,9 @@ type ElementActionButtonsProps = NodeProps & {
 const container = css({
   position: 'absolute',
   zIndex: 1,
-  top: `calc(100% - 30px)`,
+  top: `[calc(100% - 30px)]`,
   transform: 'translateX(-50%)',
-  left: `50%`,
+  left: `[50%]`,
   width: 'auto',
   minHeight: '30px',
   display: 'flex',

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

@@ -15,20 +15,20 @@ type ElementDetailsButtonProps = NodeProps & {
 
 const container = css({
   position: 'absolute',
-  top: 2,
-  right: 2,
+  top: '0.5',
+  right: '0.5',
   _shapeBrowser: {
-    right: '5px',
+    right: '[5px]',
   },
   _shapeCylinder: {
-    top: '14px',
+    top: '[14px]',
   },
   _shapeStorage: {
-    top: '14px',
+    top: '[14px]',
   },
   _shapeQueue: {
-    top: '1px',
-    right: '12px',
+    top: '[1px]',
+    right: '3', // 12px
   },
   _smallZoom: {
     display: 'none',

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -4,8 +4,8 @@ export const container = style({
   position: 'relative',
   width: '100%',
   height: '100%',
-  padding: 0,
-  margin: 0,
+  padding: '0',
+  margin: '0',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -13,8 +13,8 @@ export const container = style({
   _before: {
     content: '" "',
     position: 'absolute',
-    top: 'calc(100% - 4px)',
-    left: 0,
+    top: '[calc(100% - 4px)]',
+    left: '0',
     width: '100%',
     height: '24px',
     background: '[transparent]',

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

@@ -7,7 +7,7 @@ import {
   DefaultTextSize,
 } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import type { LayoutProps } from 'motion/react'
+import type { MotionNodeLayoutOptions } from 'motion/react'
 import * as m from 'motion/react-m'
 import { type CSSProperties, type ReactNode, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
@@ -27,7 +27,7 @@ export type ElementNodeContainerProps =
     style?: CSSProperties | undefined
     [key: `data-${string}`]: string | undefined
   }
-  & LayoutProps
+  & MotionNodeLayoutOptions
 
 export function nodeSizes({
   size,
@@ -92,9 +92,6 @@ export const ElementNodeContainer = forwardRef<HTMLDivElement, ElementNodeContai
     <m.div
       ref={ref}
       className={cx(
-        css({
-          likec4Palette: data.color,
-        }),
         styles.container,
         'group',
         'likec4-element-node',

package/src/base/primitives/element/ElementShape.css.ts

@@ -4,7 +4,7 @@ export const indicator = css({
   _smallZoom: {
     visibility: 'hidden',
   },
-  stroke: 'likec4.palette.loContrast',
+  stroke: 'var(--likec4-palette-loContrast)',
   fill: '[none]',
 
   strokeWidth: 8,
@@ -12,7 +12,7 @@ export const indicator = css({
   visibility: 'hidden',
   pointerEvents: 'none',
   _light: {
-    stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`,
+    stroke: `[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]`,
   },
   _whenFocused: {
     visibility: 'visible',
@@ -27,29 +27,29 @@ export const indicator = css({
 })
 
 export const fillElementFill = css({
-  fill: 'likec4.palette.fill',
+  fill: 'var(--likec4-palette-fill)',
 })
 
 export const fillElementStroke = css({
-  fill: 'likec4.palette.stroke',
+  fill: 'var(--likec4-palette-stroke)',
 })
 
 export const fillMixStroke = css({
-  fill: '[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]',
+  fill: '[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]',
   '.shape-svg-multiple &': {
-    fill: 'likec4.palette.fill',
+    fill: 'var(--likec4-palette-fill)',
   },
 })
 
 const shapeBase = css.raw({
-  top: 0,
-  left: 0,
+  top: '0',
+  left: '0',
   position: 'absolute',
   width: '100%',
   height: '100%',
   pointerEvents: 'none',
-  fill: 'likec4.palette.fill',
-  stroke: 'likec4.palette.stroke',
+  fill: 'var(--likec4-palette-fill)',
+  stroke: 'var(--likec4-palette-stroke)',
   overflow: 'visible',
   // zIndex is removed to improve rendering performance
   // this forces to keep shape in the same layer as the node
@@ -82,7 +82,7 @@ export const shapeSvg = css(shapeBase, {
   transitionDelay: '0ms',
   filter: `
       drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent))
+      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
       drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
     `,
   _whenHovered: {

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

@@ -15,10 +15,11 @@ import type { NodeProps } from '../../types'
 
 export type ElementTagProps = {
   tag: string
+  cursor?: 'pointer' | 'default'
 } & Omit<BoxProps, 'children'>
 
 export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
-  ({ tag, className, ...props }, ref) => {
+  ({ tag, cursor = 'default', className, ...props }, ref) => {
     const spec = useTagSpecification(tag)
     return (
       <Box
@@ -31,8 +32,9 @@ export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
           className,
         )}
         {...props}
+        style={{ cursor }}
       >
-        <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+        <span>#</span>
         <span>{tag}</span>
       </Box>
     )
@@ -99,23 +101,23 @@ export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }:
           'likec4-element-tags',
           hstack({
             pointerEvents: 'all',
-            gap: 4,
+            gap: '1',
             alignItems: 'flex-end',
             justifyItems: 'stretch',
             position: 'absolute',
             width: '100%',
-            bottom: 0,
-            left: 0,
-            padding: 4,
+            bottom: '0',
+            left: '0',
+            padding: '1',
             _shapeCylinder: {
-              bottom: 5,
+              bottom: '[5px]',
             },
             _shapeStorage: {
-              bottom: 5,
+              bottom: '[5px]',
             },
             _shapeQueue: {
-              bottom: 0,
-              paddingLeft: 14,
+              bottom: '0',
+              paddingLeft: '[14px]',
             },
           }),
         )}
@@ -147,11 +149,12 @@ export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }:
         <HStack
           ref={tagsToolbarRef}
           css={{
-            gap: 4,
+            gap: '0.5',
+            alignItems: 'baseline',
             flexWrap: 'wrap',
             pb: 'sm',
             translate: 'auto',
-            x: -8,
+            x: '[-8px]',
             maxWidth,
           }}
         >
@@ -164,8 +167,8 @@ export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }:
                 cursor: 'pointer',
                 ...(zoomIsLargeEnough && {
                   fontSize: 'lg',
-                  borderRadius: 4,
-                  px: 6,
+                  borderRadius: '[4px]',
+                  px: '1.5', // 6px
                 }),
               })}
               onClick={e => {

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

@@ -1,6 +1,7 @@
 import type { DiagramNode, RichTextOrEmpty } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
+import { elementNodeData, elementNodeIcon as elementIconRecipe } from '@likec4/styles/recipes'
 import { Text } from '@mantine/core'
 import { isEmpty, isNumber, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
@@ -8,7 +9,6 @@ import { IconRenderer } from '../../../context/IconRenderer'
 import type { NodeProps, NonOptional } from '../../types'
 import { MarkdownBlock } from '../MarkdownBlock'
 import { nodeSizes } from './ElementNodeContainer'
-import * as styles from './ElementTitle.css'
 
 type Data = Simplify<
   & NonOptional<
@@ -37,9 +37,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       title: data.title,
       icon: data.icon,
     },
-    className: styles.elementIcon,
+    className: elementIconRecipe(),
   })
-  const classes = styles.elementTitle({
+  const classes = elementNodeData({
     hasIcon: isTruthy(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? ''),
@@ -56,7 +56,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       style={isNumber(iconSize)
         ? {
           // @ts-ignore
-          [styles.iconSize]: `${iconSize}px`,
+          ['--likec4-icon-size']: `${iconSize}px`,
         }
         : undefined}
     >

package/src/bundle/LikeC4View.props.ts

@@ -1,7 +1,12 @@
-import type { WhereOperator } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/_aux'
+import type { aux, WhereOperator } from '@likec4/core/types'
 import type { CSSProperties } from 'react'
-import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type {
+  CustomNodes,
+  ElementIconRenderer,
+  OverrideReactFlowProps,
+  PaddingWithUnit,
+  ViewPadding,
+} from '../LikeC4Diagram.props'
 
 export interface LikeC4ViewProps<A extends aux.Any> {
   /**
@@ -69,8 +74,10 @@ export interface LikeC4ViewProps<A extends aux.Any> {
   /**
    * Padding around the diagram
    * @default '8px'
+   *
+   * @see {@link ViewPadding}
    */
-  fitViewPadding?: PaddingWithUnit | undefined
+  fitViewPadding?: ViewPadding | undefined
 
   /**
    * Display diagram title / description
@@ -182,9 +189,11 @@ export interface LikeC4BrowserProps {
 
   /**
    * Show/hide panel with top left controls,
-   * @default true
+   * - `next` - show navigation panel (Experimental)
+   *
+   * @default `next`
    */
-  controls?: boolean | undefined
+  controls?: boolean | 'next' | undefined
 
   /**
    * Display diagram title / description

package/src/bundle/LikeC4View.tsx

@@ -1,5 +1,4 @@
-import type { Any, DiagramView } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/_aux'
+import type { Any, aux, DiagramView } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Box } from '@mantine/core'
 import { shallowEqual } from '@mantine/hooks'
@@ -8,6 +7,7 @@ import { memo, useState } from 'react'
 import { isBoolean } from 'remeda'
 import { FramerMotionConfig } from '../context/FramerMotionConfig'
 import { LikeC4Diagram } from '../LikeC4Diagram'
+import type { ViewPadding } from '../LikeC4Diagram.props'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { Overlay } from '../overlays/overlay/Overlay'
 import type { LikeC4ViewProps } from './LikeC4View.props'
@@ -37,6 +37,13 @@ export function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
+const DEFAULT_BROWSER_PADDING: ViewPadding = {
+  top: '50px',
+  bottom: '16px',
+  left: '16px',
+  right: '16px',
+}
+
 type LikeC4ViewInnerProps<A extends aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
   view: DiagramView<A>
 }
@@ -69,7 +76,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
   renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model('layouted')
+  const likec4model = useLikeC4Model()
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
@@ -159,10 +166,10 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
                 enableRelationshipDetails
                 enableSearch
                 enableElementTags
-                controls
+                controls="next"
                 readonly
                 fitView
-                fitViewPadding={'32px'}
+                fitViewPadding={DEFAULT_BROWSER_PADDING}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&

package/src/bundle/ReactLikeC4.tsx

@@ -1,5 +1,4 @@
-import type { Any, DiagramView } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/_aux'
+import type { Any, aux, DiagramView } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'

package/src/bundle/ViewNotFound.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react'
 export const ErrorMessage = ({ children }: PropsWithChildren) => (
   <div
     style={{
-      margin: '1rem 0',
+      margin: '[1rem 0]',
     }}>
     <div
       style={{