@likec4/diagram 1.34.2 → 1.36.0

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

@@ -1,12 +1,16 @@
 import { Box } from '@likec4/styles/jsx'
 import { Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
-import type { FallbackProps } from 'react-error-boundary'
+import {
+  type ErrorBoundaryProps,
+  type FallbackProps,
+  ErrorBoundary as ErrorBoundaryComponent,
+} from 'react-error-boundary'
 
 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={{
@@ -28,3 +32,14 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
     </Box>
   )
 }
+
+export function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>) {
+  return (
+    <ErrorBoundaryComponent
+      FallbackComponent={ErrorFallback}
+      onError={(err, info) => {
+        console.error(err, info)
+      }}
+      {...props} />
+  )
+}

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>
+))

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

@@ -0,0 +1,32 @@
+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 Omit<NavLinkProps, 'classNames'>, Omit<ComponentPropsWithoutRef<'button'>, keyof NavLinkProps>
+{
+  truncateLabel?: boolean
+}
+
+export const NavigationLink = forwardRef<HTMLButtonElement, NavigationLinkProps>((
+  { className, truncateLabel = true, ...others },
+  ref,
+) => (
+  <NavLink
+    {...others}
+    component="button"
+    classNames={navigationLink({
+      truncateLabel,
+    })}
+    className={cx(
+      'group',
+      'mantine-active',
+      className,
+    )}
+    ref={ref}
+  />
+))
+
+NavigationLink.displayName = 'NavigationLink'

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/ControlsCustomLayout.ts

@@ -6,7 +6,6 @@ export type ControlsCustomLayoutProps = {
   navigationButtons: ReactNode
   search: ReactNode
   actionsGroup: ReactNode
-  syncInProgressBadge: ReactNode
 }
 export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
 

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/context/DiagramFeatures.tsx

@@ -25,8 +25,13 @@ const FeatureNames = [
   'ElementTags',
 ] as const
 export type FeatureName = typeof FeatureNames[number]
+
+type CustomFeatures = {
+  enableControls: 'next' | boolean
+}
+
 export type EnabledFeatures = {
-  [P in `enable${FeatureName}`]: boolean
+  [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean
 }
 
 export const AllDisabled: EnabledFeatures = mapToObj(

package/src/custom/customNodes.tsx

@@ -1,10 +1,11 @@
 import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
 import type { Any } from '@likec4/core/types'
+import { DEV } from 'esm-env'
 import type { ReactNode } from 'react'
 import { customNode } from '../base/primitives'
 import type { NodeProps } from '../base/types'
 import type { Types } from '../likec4diagram/types'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model'
 
 function customDiagramNode<
   P extends {
@@ -15,7 +16,14 @@ function customDiagramNode<
   Node: (props: P) => ReactNode,
 ): (props: P['nodeProps']) => ReactNode {
   return customNode((props) => {
-    const viewModel = useLikeC4Model().view(props.data.viewId)
+    const viewModel = useLikeC4ViewModel(props.data.viewId)
+    if (!viewModel) {
+      if (DEV) {
+        throw new Error(`View "${props.data.viewId}" not found, requested by customNode "${props.id}"`)
+      }
+      console.error(`View "${props.data.viewId}" not found in likec4model`, { props })
+      return null
+    }
     const model = viewModel.node(props.id)
     // @ts-ignore
     return <Node nodeProps={props} nodeModel={model} />

package/src/custom/hooks.ts

@@ -31,6 +31,9 @@ export {
   type XYStoreApi,
 } from '../hooks/useXYFlow'
 
+export {
+  useCurrentViewModel,
+} from '../likec4model/useCurrentViewModel'
 export {
   useLikeC4Model,
   useLikeC4Specification,

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/hooks/useDiagram.ts

@@ -252,14 +252,6 @@ export function useDiagramActorSnapshot<T = unknown>(
   return useXstateSelector(actorRef, useCallbackRef(selector), compare)
 }
 
-export function useDiagramSyncLayoutState<T = unknown>(
-  selector: (state: SyncLayoutActorSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-): T {
-  const syncLayoutActorRef = useDiagramActorSnapshot(s => s.context.syncLayoutActorRef as SyncLayoutActorRef)
-  return useXstateSelector(syncLayoutActorRef, useCallbackRef(selector), compare)
-}
-
 /**
  * Read diagram context
  */

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/DiagramUI.tsx

@@ -2,12 +2,14 @@ import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
 import { useSearchActorRef } from '../hooks/useSearchActor'
+import { NavigationPanel } from '../navigationpanel'
 import { Overlays } from '../overlays/Overlays'
 import { Search } from '../search/Search'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export const DiagramUI = memo(() => {
   const {
+    enableControls,
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
@@ -19,11 +21,15 @@ export const DiagramUI = memo(() => {
 
   return (
     <>
-      <Controls />
+      {enableControls === 'next' ? <NavigationPanel /> : <Controls />}
       {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
-      {enableViewTitle && <DiagramTitlePanel />}
       {enableNotations && <NotationPanel />}
-      {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {enableControls !== 'next' && (
+        <>
+          {enableViewTitle && <DiagramTitlePanel />}
+          {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+        </>
+      )}
       {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
     </>
   )

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -39,9 +39,9 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.initialized === b.initialized &&
   a.pannable === b.pannable &&
   a.zoomable === b.zoomable &&
-  a.fitViewPadding === b.fitViewPadding &&
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
+  shallowEqual(a.fitViewPadding, b.fitViewPadding) &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
   shallowEqual(a.viewport ?? null, b.viewport ?? null)

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>
       )