@likec4/diagram 1.35.0 → 1.36.0

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

@@ -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/bundle/LikeC4View.props.ts

@@ -1,5 +1,4 @@
-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,

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>
 }
@@ -162,7 +169,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
                 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={{

package/src/bundle/index.ts

@@ -19,7 +19,8 @@ export { LikeC4View } from './LikeC4View'
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props'
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4'
 
-export { LikeC4ModelProvider } from './LikeC4ModelProvider'
+export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps } from '../LikeC4ProjectsProvider'
+export { LikeC4ModelProvider, type LikeC4ModelProviderProps } from './LikeC4ModelProvider'
 
 export { ViewNotFound } from './ViewNotFound'
 

package/src/bundle/styles.css.ts

@@ -18,7 +18,7 @@ export const DefaultTheme = createTheme({
   primaryColor: 'indigo',
   cursorType: 'pointer',
   defaultRadius: 'sm',
-  fontFamily: 'var(--fonts-likec4)',
+  fontFamily: 'var(--likec4-app-font, var(--likec4-app-font-default))',
   headings: {
     fontWeight: '500',
     sizes: {

package/src/components/ErrorFallback.tsx

@@ -10,7 +10,7 @@ import {
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const errorString = error instanceof Error ? error.message : 'Unknown error'
   return (
-    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
+    <Box pos={'fixed'} top={'0'} left={'0'} w={'100%'} p={'0'} style={{ zIndex: 1000 }}>
       <Notification
         icon={<IconX style={{ width: 16, height: 16 }} />}
         styles={{

package/src/components/GithubIcon.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+import { forwardRef } from 'react'
+
+export const GithubIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+  <svg
+    height="24"
+    width="24"
+    fill="currentColor"
+    {...props}
+    viewBox="0 0 24 24"
+    ref={ref}
+  >
+    <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z">
+    </path>
+  </svg>
+))