@likec4/diagram 1.26.2 → 1.27.0

package/src/bundle/styles.css.ts

@@ -0,0 +1,168 @@
+import type { DiagramView } from '@likec4/core'
+import { css } from '@likec4/styles/css'
+import { type MantineThemeOverride, createTheme, Portal } from '@mantine/core'
+import { useColorScheme as usePreferredColorScheme, useDebouncedCallback, useMutationObserver } from '@mantine/hooks'
+import { useIsomorphicLayoutEffect } from '@react-hookz/web'
+import { useId, useState } from 'react'
+import { first, isFunction, isString } from 'remeda'
+import inlinedStyles from '../styles.css?inline'
+import fontsCss from './font.css?inline'
+
+export const DefaultTheme = createTheme({
+  autoContrast: true,
+  primaryColor: 'indigo',
+  cursorType: 'pointer',
+  defaultRadius: 'sm',
+  fontFamily: 'var(--fonts-likec4)',
+  headings: {
+    fontWeight: '500',
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: '600',
+      },
+      h2: {
+        fontWeight: '500',
+        // fontSize: '1.85rem',
+      },
+    },
+  },
+  components: {
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: true,
+      },
+    }),
+  },
+}) as MantineThemeOverride
+
+export const cssInteractive = css({
+  cursor: 'pointer',
+  ['--mantine-cursor-pointer']: 'pointer',
+  '& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)': {
+    cursor: 'pointer',
+  },
+})
+
+export function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined) {
+  const [styleSheets, setStyleSheets] = useState([] as CSSStyleSheet[])
+
+  useIsomorphicLayoutEffect(() => {
+    if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
+      const style = document.createElement('style')
+      style.setAttribute('type', 'text/css')
+      style.setAttribute('data-likec4-font', '')
+      if (isString(styleNonce)) {
+        style.setAttribute('nonce', styleNonce)
+      }
+      if (isFunction(styleNonce)) {
+        style.setAttribute('nonce', styleNonce())
+      }
+      style.appendChild(document.createTextNode(fontsCss))
+      document.head.appendChild(style)
+    }
+  }, [injectFontCss])
+
+  useIsomorphicLayoutEffect(() => {
+    const css = new CSSStyleSheet()
+    css.replaceSync(
+      inlinedStyles
+        .replaceAll(':where(:root, :host)', `.likec4-shadow-root`)
+        .replaceAll(':where(:host, :root)', `.likec4-shadow-root`)
+        .replaceAll(':root', `.likec4-shadow-root`)
+        .replaceAll('body {', `.likec4-shadow-root{`)
+        .replaceAll('body{', `.likec4-shadow-root{`),
+    )
+    setStyleSheets([css])
+    return () => {
+      css.replaceSync('')
+    }
+  }, [inlinedStyles])
+
+  return styleSheets
+}
+
+const getComputedColorScheme = (): ColorScheme | null => {
+  try {
+    const htmlScheme = window.getComputedStyle(document.documentElement).colorScheme ?? ''
+    const colorScheme = first(htmlScheme.split(' '))
+    if (colorScheme === 'light' || colorScheme === 'dark') {
+      return colorScheme
+    }
+  } catch (_e) {
+    // noop
+  }
+  return null
+}
+
+export type ColorScheme = 'light' | 'dark'
+export function useColorScheme(explicit?: ColorScheme): ColorScheme {
+  const preferred = usePreferredColorScheme()
+  const [computed, setComputed] = useState(getComputedColorScheme)
+  useMutationObserver(
+    useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
+    {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    },
+    () => document.documentElement,
+  )
+
+  return explicit ?? computed ?? preferred
+}
+
+export function useShadowRootStyle(
+  keepAspectRatio: boolean,
+  view: DiagramView,
+): [{ 'data-likec4-instance': string }, style: string] {
+  const id = useId()
+
+  if (keepAspectRatio === false) {
+    return [
+      { 'data-likec4-instance': id },
+      `
+:where([data-likec4-instance="${id}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: 80px;
+  min-height: 80px;
+}
+  `.trim(),
+    ]
+  }
+
+  const isLandscape = view.bounds.width > view.bounds.height
+
+  return [
+    { 'data-likec4-instance': id },
+    `
+:where([data-likec4-instance="${id}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  ${
+      isLandscape ? '' : `
+  max-width: var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px);
+  margin-left: auto;
+  margin-right: auto;`
+    }
+  width: ${isLandscape ? '100%' : 'auto'};
+  height: ${isLandscape ? 'auto' : '100%'};
+  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
+  aspect-ratio: ${Math.ceil(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
+  max-height: var(--likec4-view-max-height, ${Math.ceil(view.bounds.height)}px);
+}
+`.trim(),
+  ]
+}

package/src/components/Link.tsx

@@ -1,8 +1,55 @@
 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 { IconCheck, IconCopy } from '@tabler/icons-react'
 import { stopPropagation } from '../utils'
-import * as css from './Link.css'
+
+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 titleBox = css({
+  flex: '1 1 100%',
+  transition: `transform 100ms {easings.inOut}`,
+  _groupHover: {
+    transitionTimingFunction: 'out',
+    transitionDelay: '50ms',
+    transform: 'translateX(1px)',
+  },
+})
 
 export function Link({
   value,
@@ -20,11 +67,15 @@ export function Link({
           href={url}
           target="_blank"
           underline="never"
-          className={css.elementLink}
-          data-size={size}
+          className={cx(
+            'group',
+            link({ size }),
+          )}
           onClick={stopPropagation}>
           <ActionIcon
-            className={css.linkIcon}
+            className={css({
+              flex: '0',
+            })}
             tabIndex={-1}
             size={isNormalSize ? 24 : 20}
             variant={copied ? 'light' : 'subtle'}
@@ -37,7 +88,7 @@ export function Link({
           >
             {copied ? <IconCheck /> : <IconCopy style={{ width: '65%', opacity: 0.65 }} />}
           </ActionIcon>
-          <Box className={css.linkTitleBox}>
+          <Box className={titleBox}>
             <Text
               component="div"
               fz={isNormalSize ? 'xs' : 11}

package/src/components/SearchControl.css.ts

@@ -1,62 +1,53 @@
-import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
+import { css as style } from '@likec4/styles/css'
+// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+// import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
 
-const transparent = createVar('transparent')
-const bgColor = createVar('bgcolor')
+// const transparent = createVar('transparent')
+// const bgColor = createVar('bgcolor')
 export const root = style({
   height: '30px',
-  paddingLeft: mantine.spacing.sm,
+  paddingLeft: 'sm',
   paddingRight: '4px',
-  borderRadius: '0px',
-  color: fallbackVar('var(--search-color)', mantine.colors.placeholder),
+  borderRadius: 'sm',
+  // TODO
+  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
   border: '1px solid',
+  borderColor: {
+    base: 'mantine.colors.defaultBorder',
+    _light: 'mantine.colors.gray[4]',
+    _dark: 'mantine.colors.dark[4]',
+    _hover: 'mantine.colors.defaultBorder',
+  },
   cursor: 'pointer',
-  backgroundColor: bgColor,
+  background: {
+    base: 'mantine.colors.default',
+    _light: 'mantine.colors.white',
+    _dark: 'mantine.colors.dark[6]',
+    _hover: 'mantine.colors.defaultHover',
+  },
+
   width: '100%',
-  vars: {
-    [transparent]: '20%',
-    [bgColor]: mantine.colors.default,
+  '& .tabler-icon': {
+    color: 'mantine.colors.text',
   },
-  selectors: {
-    [`${whereLight} &`]: {
-      borderColor: mantine.colors.gray[4],
-      vars: {
-        [bgColor]: mantine.colors.white,
-      },
-    },
-    [`${whereDark} &`]: {
-      borderColor: mantine.colors.dark[4],
-      vars: {
-        [bgColor]: mantine.colors.dark[6],
-      },
-    },
-    [`${whereNotReducedGraphics} &`]: {
-      transition: transitions.fast,
-      borderRadius: fallbackVar('var(--search-border-radius)', mantine.radius.sm),
-      backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
-      boxShadow: mantine.shadows.xs,
-      WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-      backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-    },
+
+  transition: {
+    base: 'fast',
+    _whenPanning: 'none !important',
   },
-  ':hover': {
-    borderColor: mantine.colors.defaultBorder,
-    boxShadow: mantine.shadows.sm,
-    vars: {
-      [transparent]: '10%',
-      [bgColor]: mantine.colors.defaultHover,
-    },
+  boxShadow: {
+    base: 'xs',
+    _hover: 'sm',
+    _whenPanning: 'none !important',
   },
 })
-globalStyle(`${root} .tabler-icon`, {
-  color: mantine.colors.text,
-})
 
 export const placeholder = style({
-  fontSize: mantine.fontSizes.sm,
+  fontSize: 'sm', // mantine.fontSizes.sm,
   fontWeight: 500,
-  paddingRight: 50,
-  flex: 1,
+  paddingRight: '50px',
+  color: 'mantine.colors.placeholder',
+  flex: '1',
 })
 
 export const shortcut = style({
@@ -64,21 +55,23 @@ export const shortcut = style({
   fontWeight: 600,
   lineHeight: 1,
   padding: '4px 7px',
-  borderRadius: mantine.radius.sm,
+  borderRadius: 'sm',
   border: '1px solid',
-  selectors: {
-    [`${whereLight} &`]: {
-      color: mantine.colors.gray[7],
-      borderColor: mantine.colors.gray[2],
-      backgroundColor: mantine.colors.gray[2],
-    },
-    [`${whereLight} ${whereNotReducedGraphics} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[2]}, transparent 20%)`,
-    },
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[0],
-      borderColor: mantine.colors.dark[7],
-      backgroundColor: mantine.colors.dark[8],
+  transition: 'fast',
+  _light: {
+    color: 'mantine.colors.gray[7]',
+    borderColor: 'mantine.colors.gray[2]',
+  },
+  _dark: {
+    color: 'mantine.colors.dark[0]',
+    borderColor: 'mantine.colors.dark[7]',
+  },
+  backgroundColor: {
+    _light: 'mantine.colors.gray[2]/70',
+    _dark: 'mantine.colors.dark[8]/70',
+    _groupHover: {
+      _light: 'mantine.colors.gray[2]',
+      _dark: 'mantine.colors.dark[8]',
     },
   },
 })

package/src/components/SearchControl.tsx

@@ -1,10 +1,7 @@
 import {
-  type BoxProps,
   type ElementProps,
   type UnstyledButtonProps,
-  Box,
   Group,
-  rem,
   Text,
   UnstyledButton,
 } from '@mantine/core'
@@ -18,9 +15,9 @@ interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'>
 export function SearchControl({ className, ...others }: SearchControlProps) {
   const isMac = isMacOs()
   return (
-    <UnstyledButton {...others} className={cx(classes.root, className)}>
+    <UnstyledButton {...others} className={cx('group', classes.root, className)}>
       <Group gap="xs">
-        <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={2} />
+        <IconSearch style={{ width: '15px', height: '15px' }} stroke={2} />
         <Text component="div" className={classes.placeholder}>
           Search
         </Text>

package/src/context/ReduceGraphics.tsx

@@ -1,9 +1,7 @@
 import { createOptionalContext, createSafeContext } from '@mantine/core'
-import { useDebouncedCallback, useTimeout } from '@mantine/hooks'
 import { useStore } from '@nanostores/react'
-import { useStoreApi } from '@xyflow/react'
-import { type Atom, type WritableAtom, atom } from 'nanostores'
-import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { type WritableAtom, atom } from 'nanostores'
+import { type PropsWithChildren, useRef } from 'react'
 
 const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext<boolean>()
 /**
@@ -20,61 +18,25 @@ export function useIsReducedGraphics() {
 const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext<WritableAtom<boolean>>(
   'PanningAtomSafeCtx is not provided',
 )
-const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext<Atom<boolean>>()
 
-const $defaultLooseReduceGraphics = atom(false)
-/**
- * Reduce graphics when reduced mode is enabled and pan/zoom is active.
- */
-export function useLooseReducedGraphics() {
-  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics
-  return useStore($isPanning)
+export {
+  usePanningAtom,
 }
 
 export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{ reduceGraphics: boolean }>) {
-  // const isEnabledRef = useSyncedRef(reduceGraphics)
-
   const $isPanningRef = useRef<WritableAtom<boolean>>(null)
   if (!$isPanningRef.current) {
     $isPanningRef.current = atom(reduceGraphics)
   }
-
-  const looseReduceGraphics = useMemo(() => {
-    return reduceGraphics ? $isPanningRef.current! : atom(false)
-  }, [reduceGraphics, $isPanningRef.current])
-
   return (
     <PanningAtomSafeCtx value={$isPanningRef.current}>
-      <LooseReduceGraphicsAtomCtx value={looseReduceGraphics}>
-        <ReduceGraphicsModeCtx value={reduceGraphics}>
-          {children}
-        </ReduceGraphicsModeCtx>
-      </LooseReduceGraphicsAtomCtx>
+      <ReduceGraphicsModeCtx value={reduceGraphics}>
+        {children}
+      </ReduceGraphicsModeCtx>
     </PanningAtomSafeCtx>
   )
 }
 
-export function ReduceGraphicsViewportListener() {
-  const store = useStoreApi()
-  const $isPanning = usePanningAtom()
-
-  const notPanning = useTimeout(() => {
-    $isPanning.set(false)
-  }, 150)
-
-  useEffect(() => {
-    store.setState({
-      onViewportChangeStart: () => {
-        notPanning.clear()
-      },
-      onViewportChange: () => {
-        $isPanning.set(true)
-      },
-      onViewportChangeEnd: () => {
-        notPanning.start()
-      },
-    })
-  }, [$isPanning, store])
-
-  return null
+export function useIsPanning() {
+  return useStore(usePanningAtom())
 }

package/src/context/RootContainer.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@mantine/core'
-import clsx from 'clsx'
-import { type PropsWithChildren, createContext, createRef, useContext, useRef } from 'react'
-import { rootClassName } from '../theme-vars'
+import { cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
+import { type PropsWithChildren, createContext, createRef, useContext, useEffect, useRef } from 'react'
+import { usePanningAtom } from './ReduceGraphics'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
@@ -14,9 +14,25 @@ export function RootContainer({
   reduceGraphics?: boolean
 }>) {
   const ref = useRef<HTMLDivElement>(null)
+  const $isPanning = usePanningAtom()
+
+  useEffect(() => {
+    return $isPanning.listen((isPanning) => {
+      if (isPanning) {
+        ref.current?.setAttribute('data-likec4-diagram-panning', 'true')
+      } else {
+        ref.current?.removeAttribute('data-likec4-diagram-panning')
+      }
+    })
+  }, [$isPanning])
+
   return (
     <Box
-      className={clsx(rootClassName, className)}
+      className={cx('likec4-root', className)}
+      css={{
+        // '--likec4-background-color': 'mantine.colors.body',
+        // '--colors-likec4-background': 'var(--mantine-color-body)',
+      }}
       ref={ref}
       {...reduceGraphics && {
         ['data-likec4-reduced-graphics']: true,

package/src/hooks/safeContext.tsx

@@ -1,5 +1,4 @@
-import { createSafeContext } from '@mantine/core'
-import { createContext, use, useContext } from 'react'
+import { createContext, useContext } from 'react'
 import type { DiagramActorRef } from '../state/types'
 
 /**
@@ -9,7 +8,7 @@ export const DiagramActorSafeContext = createContext<DiagramActorRef>(null as an
 DiagramActorSafeContext.displayName = 'DiagramActorSafeContext'
 
 export const useDiagramActorRef = () => {
-  const ctx = use(DiagramActorSafeContext)
+  const ctx = useContext(DiagramActorSafeContext)
   if (ctx === null) {
     throw new Error('DiagramActorRef is not provided')
   }

package/src/hooks/useCurrentViewId.ts

@@ -1,8 +1,8 @@
 import type { ViewId } from '@likec4/core'
-import type { DiagramContext } from '../state/types'
-import { useDiagramContext } from './useDiagram'
+import type { DiagramActorSnapshot } from '../state/types'
+import { useDiagramActorSnapshot } from './useDiagram'
 
-const selectViewId = (state: DiagramContext) => state.view.id
+const selectViewId = (s: DiagramActorSnapshot) => s.context.view.id
 export function useCurrentViewId(): ViewId {
-  return useDiagramContext(selectViewId)
+  return useDiagramActorSnapshot(selectViewId)
 }

package/src/hooks/useDiagram.ts

@@ -155,8 +155,9 @@ export function useDiagramSyncLayoutState<T = unknown>(
 }
 
 export function useDiagramContext<T = unknown>(
-  selector: (state: DiagramContext) => T,
+  selector: (context: DiagramContext) => T,
   compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-) {
-  return useDiagramActorSnapshot(useCallbackRef(s => selector(s.context)), compare)
+): T {
+  const actorRef = useDiagramActorRef()
+  return useXstateSelector(actorRef, useCallbackRef(s => selector(s.context)), compare)
 }

package/src/hooks/useOverlaysActor.ts

@@ -0,0 +1,11 @@
+import type { OverlaysActorRef } from '../overlays/overlaysActor'
+import type { DiagramActorSnapshot } from '../state/types'
+import { useDiagramActorSnapshot } from './useDiagram'
+
+const select = (s: DiagramActorSnapshot) => {
+  return s.children.overlays
+}
+
+export function useOverlaysActorRef(): OverlaysActorRef {
+  return useDiagramActorSnapshot(select, Object.is)!
+}

package/src/hooks/useReducedGraphics.ts

@@ -1 +1,8 @@
-export { useIsReducedGraphics, useLooseReducedGraphics } from '../context/ReduceGraphics'
+// import { useStore } from '@nanostores/react'
+// import { usePanningAtom } from '../context/ReduceGraphics'
+export { useIsPanning, useIsReducedGraphics } from '../context/ReduceGraphics'
+
+// export function useIsPanning() {
+//   const $isPanning = usePanningAtom()
+//   return useStore($isPanning)
+// }

package/src/hooks/useXYFlow.ts

@@ -20,7 +20,7 @@ export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
 
-const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.25
-export function useIsZoomTooSmall() {
+const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
+export function useIsZoomTooSmall(): boolean {
   return useStore(selectZoom)
 }

package/src/index.ts

@@ -1,5 +1,3 @@
-import '@xyflow/react/dist/style.css'
-
 export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { IconRendererProvider } from './context/IconRenderer'
@@ -16,7 +14,7 @@ export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
 export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
-export { vars, xyvars } from './theme-vars'
+// export { vars, xyvars } from './theme-vars'
 
 export type {
   ChangeEvent,

package/src/likec4diagram/DiagramUI.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
-import { useDiagramActorSnapshot } from '../hooks/useDiagram'
+import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
@@ -11,7 +11,7 @@ export const DiagramUI = memo(() => {
     enableDynamicViewWalkthrough,
   } = useEnabledFeatures()
 
-  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays, Object.is)
+  const overlaysActorRef = useOverlaysActorRef()
 
   return (
     <>