@likec4/diagram 1.35.0 → 1.36.0

package/src/components/Link.tsx

@@ -1,119 +1,108 @@
 import type { Link as LinkData } from '@likec4/core'
-import { css, cva, cx } from '@likec4/styles/css'
-import { ActionIcon, Anchor, Box, CopyButton, Text } from '@mantine/core'
+import { css, cx } from '@likec4/styles/css'
+import { type BadgeProps, ActionIcon, Badge, CopyButton } from '@mantine/core'
 import { IconCheck, IconCopy } from '@tabler/icons-react'
-import { stopPropagation } from '../utils'
+import { forwardRef } from 'react'
+import { GithubIcon } from './GithubIcon'
 
-const link = cva({
-  base: {
-    display: 'flex',
-    overflow: 'hidden',
-    alignItems: 'center',
-    gap: 'micro',
-    justifyContent: 'stretch',
-    transitionProperty: 'all',
-    transitionDuration: 'fast',
-    transitionTimingFunction: 'inOut',
-    border: `1px dashed {colors.mantine.colors.defaultBorder}`,
-    rounded: 'sm',
-    cursor: 'pointer',
-    color: 'mantine.colors.gray[7]',
-    _dark: {
-      color: 'mantine.colors.dark[1]',
-    },
-    _hover: {
-      transitionTimingFunction: 'out',
-      color: 'mantine.colors.defaultColor',
-      background: 'mantine.colors.defaultHover',
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        minHeight: '22px',
-        padding: '2px 8px 2px 2px',
-      },
-      md: {
-        minHeight: '30px',
-        padding: '3px 16px 3px 3px',
-      },
-    },
-  },
-})
+const GITHUB_PREFIX = 'https://github.com/'
 
-const titleBox = css({
-  flex: '1 1 100%',
-  transition: `transform 100ms {easings.inOut}`,
-  _groupHover: {
-    transitionTimingFunction: 'out',
-    transitionDelay: '50ms',
-    transform: 'translateX(1px)',
-  },
-})
+export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'classNames'> & { value: LinkData }>(
+  ({ value, className, ...props }, ref) => {
+    // If the url is already a full url, use it as is.
+    // Otherwise, it's a relative url and we need to make it absolute.
+    const url = value.url.includes('://') ? value.url : new window.URL(value.url, window.location.href).toString()
+    let isGithub = url.startsWith(GITHUB_PREFIX)
 
-export function Link({
-  value,
-  size = 'md',
-}: {
-  size?: 'sm' | 'md'
-  value: LinkData
-}) {
-  const isNormalSize = size === 'md'
-  // If the url is already a full url, use it as is.
-  // Otherwise, it's a relative url and we need to make it absolute.
-  const url = value.url.includes('://') ? value.url : new window.URL(value.url, window.location.href).toString()
-  return (
-    <CopyButton value={url}>
-      {({ copied, copy }) => (
-        <Anchor
-          href={url}
-          target="_blank"
-          underline="never"
-          className={cx(
-            'group',
-            link({ size }),
-          )}
-          onClick={stopPropagation}>
-          <ActionIcon
-            className={css({
-              flex: '0',
-            })}
-            tabIndex={-1}
-            size={isNormalSize ? 24 : 20}
-            variant={copied ? 'light' : 'subtle'}
-            color={copied ? 'teal' : 'gray'}
-            onClick={e => {
-              e.stopPropagation()
-              e.preventDefault()
-              copy()
-            }}
-          >
-            {copied ? <IconCheck /> : <IconCopy style={{ width: '65%', opacity: 0.65 }} />}
-          </ActionIcon>
-          <Box className={titleBox}>
-            <Text
-              component="div"
-              fz={isNormalSize ? 'xs' : 11}
-              truncate
-              lh={isNormalSize ? 1.3 : 1.2}
-              fw={value.title ? 500 : 400}>
-              {value.title || url}
-            </Text>
-            {value.title && (
-              <Text component="div" fz={isNormalSize ? 10 : 9} c={'dimmed'} lh={isNormalSize ? 1.2 : 1.1} truncate>
-                {url}
-              </Text>
+    return (
+      <Badge
+        ref={ref}
+        variant="default"
+        radius="sm"
+        size="sm"
+        tt="none"
+        leftSection={value.title ? <>{value.title}</> : null}
+        rightSection={
+          <CopyButton value={url} timeout={1500}>
+            {({ copy, copied }) => (
+              <ActionIcon
+                className={css({
+                  opacity: copied ? 1 : 0.45,
+                  transition: 'fast',
+                  _hover: {
+                    opacity: 1,
+                  },
+                })}
+                tabIndex={-1}
+                size={'20'}
+                variant={copied ? 'light' : 'transparent'}
+                color={copied ? 'teal' : 'gray'}
+                data-active={copied}
+                onClick={e => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  copy()
+                }}
+              >
+                {copied ? <IconCheck /> : <IconCopy stroke={2.5} />}
+              </ActionIcon>
             )}
-          </Box>
-        </Anchor>
-      )}
-    </CopyButton>
-  )
-  // <Anchor href={value.url} fz={'sm'}>
-  //   {value.title || url}
-  // </Anchor><Button variant='default' size='sm'>
-  //     {value.title || value.url}
-  //   </Button>
-  //  </Box>
-  // )
-}
+          </CopyButton>
+        }
+        {...props}
+        className={cx(className, 'group')}
+        classNames={{
+          root: css({
+            flexWrap: 'nowrap',
+            minHeight: 24,
+            maxWidth: 500,
+            userSelect: 'all',
+            pr: '0',
+            _hover: {
+              backgroundColor: {
+                base: 'mantine.colors.gray[1]',
+                _dark: 'mantine.colors.dark[5]',
+              },
+            },
+          }),
+          section: css({
+            '&:is([data-position="left"])': {
+              color: 'mantine.colors.dimmed',
+              userSelect: 'none',
+              pointerEvents: 'none',
+              _groupHover: {
+                color: '[inherit]',
+                opacity: .7,
+              },
+            },
+          }),
+          label: css({
+            '& > a': {
+              color: '[inherit]',
+              cursor: 'pointer',
+              transition: 'fast',
+              opacity: {
+                base: 0.7,
+                _hover: 1,
+              },
+              textDecoration: {
+                base: 'none',
+                _hover: 'underline',
+              },
+            },
+          }),
+        }}
+      >
+        <a href={url} target="_blank">
+          {isGithub && (
+            <GithubIcon
+              height="12"
+              width="12"
+              style={{ verticalAlign: 'middle', marginRight: '4px' }} />
+          )}
+          {isGithub ? url.replace(GITHUB_PREFIX, '') : url}
+        </a>
+      </Badge>
+    )
+  },
+)

package/src/components/NavigationLink.tsx

@@ -2,9 +2,10 @@ import { cx } from '@likec4/styles/css'
 import { navigationLink } from '@likec4/styles/recipes'
 import { type NavLinkProps, NavLink } from '@mantine/core'
 import { forwardRef } from 'react'
+import { type ComponentPropsWithoutRef } from 'react'
 
 export interface NavigationLinkProps
-  extends NavLinkProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof NavLinkProps>
+  extends Omit<NavLinkProps, 'classNames'>, Omit<ComponentPropsWithoutRef<'button'>, keyof NavLinkProps>
 {
   truncateLabel?: boolean
 }

package/src/components/SearchControl.css.ts

@@ -3,7 +3,7 @@ import { css } from '@likec4/styles/css'
 export const root = css({
   height: '30px',
   paddingLeft: 'sm',
-  paddingRight: '4px',
+  paddingRight: '1',
   borderRadius: 'sm',
   // TODO
   // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
@@ -41,14 +41,14 @@ export const root = css({
 export const placeholder = css({
   fontSize: 'sm', // mantine.fontSizes.sm,
   fontWeight: 500,
-  paddingRight: '10px',
+  paddingRight: '2.5', // 10px
   color: 'mantine.colors.placeholder',
   flex: '1',
   sm: {
-    paddingRight: '30px',
+    paddingRight: '[30px]',
   },
   md: {
-    paddingRight: '50px',
+    paddingRight: '[50px]',
   },
 })
 
@@ -56,7 +56,7 @@ export const shortcut = css({
   fontSize: '11px',
   fontWeight: 600,
   lineHeight: 1,
-  padding: '4px 7px',
+  padding: '[4px 7px]',
   borderRadius: 'sm',
   border: '1px solid',
   transition: 'fast',

package/src/context/DiagramEventHandlers.tsx

@@ -1,4 +1,4 @@
-import type { Any } from '@likec4/core/types'
+import type { aux } from '@likec4/core/types'
 import { useSyncedRef } from '@react-hookz/web'
 import { type PropsWithChildren, type RefObject, createContext, useContext, useMemo } from 'react'
 import { isFunction, mapToObj } from 'remeda'
@@ -22,18 +22,18 @@ const HandlerNames = [
   'onCanvasDblClick',
 ] as const
 
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
-  handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>
+export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers<aux.Any>> & {
+  handlersRef: RefObject<LikeC4DiagramEventHandlers<aux.Any>>
 }
 
-const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextValue>({
+const DiagramEventHandlersReactContext = createContext<DiagramEventHandlersContext>({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {},
   },
 })
 
-export function DiagramEventHandlers<A extends Any>({
+export function DiagramEventHandlers<A extends aux.Any>({
   handlers,
   children,
 }: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers<A> }>) {
@@ -41,7 +41,7 @@ export function DiagramEventHandlers<A extends Any>({
 
   const deps = HandlerNames.map((name) => isFunction(handlers[name]))
 
-  const value = useMemo((): DiagramEventHandlersContextValue => ({
+  const value = useMemo((): DiagramEventHandlersContext => ({
     ...mapToObj(HandlerNames, (name) => {
       if (handlersRef.current[name]) {
         // @ts-expect-error TODO: fix this
@@ -53,16 +53,16 @@ export function DiagramEventHandlers<A extends Any>({
   }), [handlersRef, ...deps])
 
   return (
-    <DiagramEventHandlersContext.Provider value={value}>
+    <DiagramEventHandlersReactContext.Provider value={value}>
       {children}
-    </DiagramEventHandlersContext.Provider>
+    </DiagramEventHandlersReactContext.Provider>
   )
 }
 
-export function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersContext)
+export function useDiagramEventHandlers(): DiagramEventHandlersContext {
+  return useContext(DiagramEventHandlersReactContext)
 }
 
-export function useDiagramEventHandlersRef() {
-  return useContext(DiagramEventHandlersContext).handlersRef
+export function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>> {
+  return useContext(DiagramEventHandlersReactContext).handlersRef
 }

package/src/globals.css

@@ -0,0 +1,71 @@
+.likec4-root {
+  overflow: hidden;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  border: 0px solid transparent;
+  container-name: likec4-root;
+  container-type: size;
+}
+.likec4-root .react-flow:is(.not-initialized) {
+  opacity: 0;
+}
+:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon {
+  width: 75%;
+  height: 75%;
+}
+
+.likec4-root :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+  opacity: 0.25;
+}
+
+.likec4-root:not([data-likec4-reduced-graphics])
+  :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+  filter: grayscale(85%) blur(3px);
+}
+
+.likec4-root:not([data-likec4-reduced-graphics])
+  :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed="true"]) {
+  transition-property: opacity, filter;
+  transition-timing-function: cubic-bezier(0.50, 0, 0.2, 1);
+  transition-duration: 600ms;
+}
+
+[data-mantine-color-scheme="dark"]
+  .likec4-root:not([data-likec4-reduced-graphics])
+  :where(.react-flow__edges, .react-flow__edgelabel-renderer)
+  > svg {
+  mix-blend-mode: plus-lighter;
+}
+
+[data-mantine-color-scheme="light"]
+  .likec4-root:not([data-likec4-reduced-graphics])
+  :where(.react-flow__edges, .react-flow__edgelabel-renderer)
+  > svg {
+  mix-blend-mode: screen;
+}
+
+.likec4-root :where(.likec4-edge-container, .likec4-edge-label-container) {
+  --xy-edge-stroke-width: 3;
+  --xy-edge-stroke: var(--likec4-palette-relation-stroke);
+  --xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);
+  --xy-edge-label-color: var(--likec4-palette-relation-label);
+  --xy-edge-label-background-color: var(--likec4-palette-relation-label-bg);
+}
+
+.likec4-root
+  :where(.likec4-edge-container, .likec4-edge-label-container):is([data-likec4-hovered="true"], [data-edge-active="true"]) {
+  --xy-edge-stroke-width: 4;
+  --xy-edge-stroke: var(--likec4-palette-relation-stroke-selected);
+}
+
+[data-mantine-color-scheme="dark"] .likec4-root :where(.likec4-edge-container, .likec4-edge-label-container) {
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent);
+}
+
+[data-mantine-color-scheme="light"] .likec4-root :where(.likec4-edge-container, .likec4-edge-label-container) {
+  --xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / 0.85) 40%);
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent);
+}

package/src/index.ts

@@ -17,6 +17,11 @@ export {
   type LikeC4ModelProviderProps,
 } from './LikeC4ModelProvider'
 
+export {
+  LikeC4ProjectsProvider,
+  type LikeC4ProjectsProviderProps,
+} from './LikeC4ProjectsProvider'
+
 export * from './custom/hooks'
 
 export type {

package/src/likec4diagram/custom/edges/NotePopover.css.ts

@@ -3,8 +3,8 @@ import { css } from '@likec4/styles/css'
 
 export const edgeNoteCloseButton = css({
   position: 'absolute',
-  top: 1,
-  right: 1,
+  top: '[1px]',
+  right: '[1px]',
   zIndex: 9,
 })
 

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -324,7 +324,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     const notes = props.data.notes
     if (notes && activeWalkthroughStep === props.id) {
       edgeLabel = (
-        <NotePopover notes={notes}>
+        <NotePopover notes={notes.txt ?? notes.md}>
           {edgeLabel}
         </NotePopover>
       )

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -7,7 +7,7 @@ export const menuDropdown = css({
 })
 
 export const menuItemRelationship = css({
-  gap: 4,
+  gap: '1',
 })
 
 export const endpoint = css({
@@ -15,17 +15,17 @@ export const endpoint = css({
   fontSize: 'xxs',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '2px 4px',
-  borderRadius: 2,
-  background: `likec4.palette.fill/30`,
+  padding: '[2px 4px]',
+  borderRadius: '[2px]',
+  background: `var(--likec4-palette-fill)/30`,
   lineHeight: '[1.11]',
   mixBlendMode: 'hard-light',
   color: {
-    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
-    _dark: 'likec4.palette.loContrast',
+    _light: `[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]`,
+    _dark: 'var(--likec4-palette-loContrast)',
   },
   // _dark: {
-  //   background: `likec4.palette.fill/60`,
+  //   background: `var(--likec4-palette-fill)/60`,
   // },
 })
 

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -5,7 +5,7 @@ import {
   nameFromFqn,
 } from '@likec4/core'
 import type { LikeC4Model } from '@likec4/core/model'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import {
   type StackProps,
   ActionIcon,
@@ -203,11 +203,11 @@ const Relationship = forwardRef<
   return (
     <Stack ref={ref} className={cx(styles.menuItemRelationship, className)} {...props}>
       <Group gap={4}>
-        <Text component="div" className={cx(css({ likec4Palette: sourceNode.color }), styles.endpoint)}>
+        <Text component="div" data-likec4-color={sourceNode.color} className={styles.endpoint}>
           {sourceId}
         </Text>
         <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
-        <Text component="div" className={cx(css({ likec4Palette: targetNode.color }), styles.endpoint)}>
+        <Text component="div" data-likec4-color={targetNode.color} className={styles.endpoint}>
           {targetId}
         </Text>
         {(navigateTo || !!onOpenSource) && (

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -6,14 +6,14 @@ export const controlPointsContainer = css({
   overflow: 'visible',
   position: 'absolute',
   pointerEvents: 'none',
-  top: 0,
-  left: 0,
+  top: '0',
+  left: '0',
   mixBlendMode: 'normal',
 })
 
 export const controlPoint = css({
-  fill: `likec4.relation.stroke`,
-  stroke: `likec4.relation.stroke`,
+  fill: `var(--likec4-palette-relation-stroke)`,
+  stroke: `var(--likec4-palette-relation-stroke)`,
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: 'grab',

package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx

@@ -105,8 +105,8 @@ function BorderStyleOption({
         }}
         styles={{
           label: {
-            paddingTop: 2,
-            paddingBottom: 2,
+            paddingTop: '0.5',
+            paddingBottom: '0.5',
           },
         }}
         data={[

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -1,16 +1,16 @@
 import { css } from '@likec4/styles/css'
 
 export const navigationButtons = css({
-  gap: 'micro',
+  gap: 'xxs',
   _empty: {
     display: 'none',
   },
 })
 
 export const panel = css({
-  top: '1rem',
-  left: '1rem',
-  margin: 0,
+  top: 'md',
+  left: 'md',
+  margin: '0',
   pointerEvents: 'none',
   '& :where(button, .action-icon, [role=\'dialog\'])': {
     pointerEvents: 'all',
@@ -47,7 +47,7 @@ export const autolayoutButton = css({
   flex: '1 1 40%',
   textAlign: 'center',
   fontWeight: 500,
-  padding: '4px 6px',
+  padding: '[4px 6px]',
   fontSize: '11px',
   zIndex: 1,
 })

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,10 +1,10 @@
 import { css } from '@likec4/styles/css'
 
 export const container = css({
-  bottom: 0,
-  right: 0,
-  padding: 8,
-  margin: 0,
+  bottom: '0',
+  right: '0',
+  padding: '2',
+  margin: '0',
 })
 
 export const icon = css({
@@ -35,7 +35,7 @@ export const card = css({
 })
 
 export const tabPanel = css({
-  padding: '2xs',
+  padding: 'xxs',
 })
 
 // export const description = css({
@@ -69,8 +69,8 @@ export const elementNotation = css({
 })
 
 export const shapeSvg = css({
-  fill: 'likec4.palette.fill',
-  stroke: 'likec4.palette.stroke',
+  fill: 'var(--likec4-palette-fill)',
+  stroke: 'var(--likec4-palette-stroke)',
   strokeWidth: 1,
   overflow: 'visible',
   width: '100%',
@@ -84,8 +84,8 @@ export const shapeSvg = css({
 export const shapeBadge = css({
   fontWeight: 500,
   letterSpacing: '0.2px',
-  paddingTop: 0,
-  paddingBottom: 0,
+  paddingTop: '0',
+  paddingBottom: '0',
   textTransform: 'lowercase',
   transition: 'all 150ms ease-in-out',
   cursor: 'pointer',
@@ -94,6 +94,6 @@ export const shapeBadge = css({
   ['--badge-padding-x']: '3px',
   ['--badge-height']: '13.5px',
   ['--badge-lh']: '1',
-  ['--badge-bg']: '{colors.likec4.palette.fill}',
-  ['--badge-color']: '{colors.likec4.palette.hiContrast}',
+  ['--badge-bg']: 'var(--likec4-palette-fill)',
+  ['--badge-color']: 'var(--likec4-palette-hiContrast)',
 })

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,5 +1,5 @@
 import { type ComputedNode, type NodeNotation as ElementNotationData } from '@likec4/core'
-import { css, cx, cx as clsx } from '@likec4/styles/css'
+import { cx, cx as clsx } from '@likec4/styles/css'
 import {
   ActionIcon,
   Badge,
@@ -48,9 +48,6 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
       py={'sm'}
       className={cx(
         styles.elementNotation,
-        css({
-          likec4Palette: color,
-        }),
       )}
       data-likec4-color={color}
       onMouseEnter={() => {

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts

@@ -3,17 +3,17 @@ import type { SystemStyleObject } from '@likec4/styles/types'
 
 export const container = css({
   position: 'absolute',
-  bottom: '0.5rem',
-  left: '50%',
+  bottom: 'xxs',
+  left: '[50%]',
   transform: 'translateX(-50%)',
-  padding: 0,
-  margin: 0,
+  padding: '[0px]',
+  margin: '[0px]',
   display: 'flex',
   flexDirection: 'column',
-  gap: '0.4rem',
+  gap: '[0.4rem]',
   alignItems: 'center',
   md: {
-    gap: '0.6rem',
+    gap: '[0.6rem]',
   },
 })
 
@@ -55,10 +55,10 @@ export const btn = css({
 
 export const parallelStateFrame = css({
   position: 'absolute',
-  margin: 0,
-  padding: 0,
-  top: 0,
-  left: 0,
+  margin: '0',
+  padding: '0',
+  top: '0',
+  left: '0',
   width: '100%',
   height: '100%',
   border: `2px solid`,