@likec4/diagram 1.19.1 → 1.20.0

package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx

@@ -0,0 +1,46 @@
+import {
+  type PopoverProps,
+  Code,
+  HoverCard,
+  HoverCardDropdown,
+  HoverCardTarget,
+  Notification,
+  Overlay,
+  Text,
+} from '@mantine/core'
+import {
+  IconAlertTriangle,
+} from '@tabler/icons-react'
+
+import { mantine } from '../../../theme-vars'
+import { ActionIcon } from './_shared'
+
+export const LayoutDriftNotification = (props: PopoverProps) => (
+  <HoverCard
+    position="right-start"
+    openDelay={200}
+    closeDelay={100}
+    {...props}>
+    <HoverCardTarget>
+      <ActionIcon c="orange">
+        <Overlay color={mantine.colors.orange.lightHover} backgroundOpacity={1} />
+        <IconAlertTriangle />
+      </ActionIcon>
+    </HoverCardTarget>
+    <HoverCardDropdown p={'0'}>
+      <Notification
+        color="orange"
+        withBorder={false}
+        withCloseButton={false}
+        title="Manual layout issues">
+        <Text mt={2} size="sm" lh="xs">
+          View contains new elements or their sizes have changed,<br />
+          last manual layout can not be applied.
+        </Text>
+        <Text mt={'xs'} size="sm" lh="xs">
+          Update view predicates or remove <Code>@likec4-generated</Code>
+        </Text>
+      </Notification>
+    </HoverCardDropdown>
+  </HoverCard>
+)

package/src/{ui/top-left → likec4diagram/ui/controls}/ManualLayoutToolsButton.tsx

@@ -1,4 +1,4 @@
-import { ActionIconGroup, Group, Popover, PopoverDropdown, type PopoverProps, PopoverTarget } from '@mantine/core'
+import { type PopoverProps, ActionIconGroup, Group, Popover, PopoverDropdown, PopoverTarget } from '@mantine/core'
 import {
   IconLayoutAlignBottom,
   IconLayoutAlignCenter,
@@ -8,15 +8,15 @@ import {
   IconLayoutAlignTop,
   IconLayoutBoardSplit,
   IconLayoutCollage,
-  IconRouteOff
+  IconRouteOff,
 } from '@tabler/icons-react'
-import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useDiagram } from '../../../hooks/useDiagram'
 import { ActionIcon, Tooltip } from './_shared'
 
 const Action = ({
   label,
   icon,
-  onClick
+  onClick,
 }: {
   label: string
   icon: React.ReactNode
@@ -30,18 +30,18 @@ const Action = ({
 )
 
 export const ManualLayoutToolsButton = (props: PopoverProps) => {
-  const store = useDiagramStoreApi()
+  const diagram = useDiagram()
 
   return (
     <Popover
       position="right-start"
       clickOutsideEvents={[
-        'pointerdown'
+        'pointerdown',
       ]}
       radius="xs"
       shadow="lg"
       offset={{
-        mainAxis: 10
+        mainAxis: 10,
       }}
       {...props}>
       <PopoverTarget>
@@ -59,56 +59,56 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
               icon={<IconLayoutBoardSplit />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Column')
+                diagram.align('Column')
               }} />
             <Action
               label="Align left"
               icon={<IconLayoutAlignLeft />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Left')
+                diagram.align('Left')
               }} />
             <Action
               label="Align center"
               icon={<IconLayoutAlignCenter />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Center')
+                diagram.align('Center')
               }} />
             <Action
               label="Align right"
               icon={<IconLayoutAlignRight />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Right')
+                diagram.align('Right')
               }} />
             <Action
               label="Align in rows"
               icon={<IconLayoutBoardSplit style={{ transform: 'rotate(90deg)' }} />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Row')
+                diagram.align('Row')
               }} />
             <Action
               label="Align top"
               icon={<IconLayoutAlignTop />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Top')
+                diagram.align('Top')
               }} />
             <Action
               label="Align middle"
               icon={<IconLayoutAlignMiddle />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Middle')
+                diagram.align('Middle')
               }} />
             <Action
               label="Align bottom"
               icon={<IconLayoutAlignBottom />}
               onClick={e => {
                 e.stopPropagation()
-                store.getState().align('Bottom')
+                diagram.align('Bottom')
               }} />
           </ActionIconGroup>
           <Action
@@ -116,7 +116,7 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
             icon={<IconRouteOff />}
             onClick={e => {
               e.stopPropagation()
-              store.getState().resetEdgeControlPoints()
+              diagram.resetEdgeControlPoints()
             }} />
         </Group>
       </PopoverDropdown>

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -0,0 +1,83 @@
+import { IconChevronRight } from '@tabler/icons-react'
+
+import { AnimatePresence, m } from 'framer-motion'
+
+import { Group } from '@mantine/core'
+import { IconChevronLeft, IconMenu2 } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { LayoutGroup } from 'framer-motion'
+import { useDiagramEventHandlers } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { ActionIcon } from './_shared'
+import * as css from './styles.css'
+
+export const NavigationButtons = () => {
+  const diagram = useDiagram()
+  const { onBurgerMenuClick } = useDiagramEventHandlers()
+  const {
+    hasStepBack,
+    hasStepForward,
+  } = useDiagramContext(s => ({
+    hasStepBack: s.navigationHistory.currentIndex > 0,
+    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
+  }))
+  return (
+    <LayoutGroup>
+      <Group
+        className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+        align="flex-start"
+        gap={'xs'}>
+        {onBurgerMenuClick && (
+          <ActionIcon
+            onClick={e => {
+              e.stopPropagation()
+              onBurgerMenuClick()
+            }}>
+            <IconMenu2 />
+          </ActionIcon>
+        )}
+        <AnimatePresence>
+          {hasStepBack && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0.05,
+                transform: 'translateX(-10px)',
+              }}
+              key={'back'}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.navigate('back')
+                }}>
+                <IconChevronLeft />
+              </ActionIcon>
+            </m.div>
+          )}
+          {hasStepForward && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0,
+                transform: 'translateX(10px)',
+              }}
+              key={'forward'}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.navigate('forward')
+                }}>
+                <IconChevronRight />
+              </ActionIcon>
+            </m.div>
+          )}
+        </AnimatePresence>
+      </Group>
+    </LayoutGroup>
+  )
+}

package/src/{ui/top-left → likec4diagram/ui/controls}/_shared.ts

@@ -8,13 +8,14 @@ export const Tooltip = MantineTooltip.withProps({
   closeDelay: 120,
   label: '',
   children: null,
-  offset: 8
+  offset: 8,
+  withinPortal: false,
 })
 
 export const ActionIcon = MantineActionIcon.withProps({
   classNames: {
-    root: 'action-icon'
+    root: 'action-icon',
   },
   variant: 'default',
-  color: 'gray'
+  color: 'gray',
 })

package/src/{ui/top-left → likec4diagram/ui/controls}/styles.css.ts

@@ -1,38 +1,38 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars } from '../../theme-vars'
+import { mantine, vars } from '../../../theme-vars'
 
-export const backwardForwardButtons = style({
-  gap: calc(mantine.spacing.xs).divide(1.5).toString()
+export const navigationButtons = style({
+  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
 })
 
 export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.left, '1rem'),
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
-  margin: 0
+  margin: 0,
 })
 
 globalStyle(`.likec4-top-left-panel .action-icon`, {
   vars: {
-    ['--ai-size']: '2rem'
-  }
+    ['--ai-size']: '2rem',
+  },
 })
 globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
   width: '65%',
-  height: '65%'
+  height: '65%',
 })
 
 export const actionIconGroup = style({
-  boxShadow: mantine.shadows.md
+  boxShadow: mantine.shadows.md,
 })
 
 export const autolayoutIcon = style({})
 
 globalStyle(`${autolayoutIcon} .tabler-icon`, {
   width: '65%',
-  height: '65%'
+  height: '65%',
 })
 
 export const autolayoutButton = style({
@@ -41,7 +41,7 @@ export const autolayoutButton = style({
   fontWeight: 500,
   padding: '4px 6px',
   fontSize: rem(11),
-  zIndex: 1
+  zIndex: 1,
 })
 
 export const autolayoutIndicator = style({
@@ -51,9 +51,9 @@ export const autolayoutIndicator = style({
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) &`]: {
       background: mantine.colors.dark[5],
-      borderColor: mantine.colors.dark[4]
-    }
-  }
+      borderColor: mantine.colors.dark[4],
+    },
+  },
 })
 
 export const spacingSliderBody = style({
@@ -63,9 +63,9 @@ export const spacingSliderBody = style({
   boxShadow: 'inset 1px 1px 3px 0px #00000024',
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      background: mantine.colors.dark[7]
-    }
-  }
+      background: mantine.colors.dark[7],
+    },
+  },
 })
 
 export const spacingSliderThumb = style({
@@ -74,5 +74,5 @@ export const spacingSliderThumb = style({
   height: 8,
   border: `2px solid ${mantine.colors.gray[5]}`,
   borderRadius: 3,
-  transform: 'translate(-50%, -50%)'
+  transform: 'translate(-50%, -50%)',
 })

package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.css.ts

@@ -1,11 +1,11 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark } from '../theme-vars'
+import { mantine, vars, whereDark } from '../../../theme-vars'
 
 export const container = style({
   bottom: 0,
   left: 0,
   padding: 8,
-  margin: 0
+  margin: 0,
 })
 
 export const card = style({
@@ -18,18 +18,18 @@ export const card = style({
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 250,
-      maxWidth: '90vw'
+      maxWidth: '90vw',
     },
     [mantine.largerThan('md')]: {
       minWidth: 350,
-      maxWidth: '70vw'
-    }
+      maxWidth: '70vw',
+    },
   },
   selectors: {
     [`${whereDark} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
-    }
-  }
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
+    },
+  },
 })
 
 export const title = style({})
@@ -39,7 +39,7 @@ export const description = style({
   color: mantine.colors.gray[7],
   selectors: {
     [`${whereDark} &`]: {
-      color: mantine.colors.gray[5]
-    }
-  }
+      color: mantine.colors.gray[5],
+    },
+  },
 })

package/src/{ui → likec4diagram/ui/diagram-title}/DiagramTitlePanel.tsx

@@ -1,21 +1,22 @@
-import { Anchor, Box, Button, Card, CardSection, CopyButton, Group, Spoiler, Stack, Text } from '@mantine/core'
+import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../hooks'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import type { DiagramContext } from '../../state/machine'
 import * as css from './DiagramTitlePanel.css'
 import { Link } from './Link'
 
-const selector = (s: DiagramState) => ({
+const selector = (s: DiagramContext) => ({
   id: s.view.id,
   title: s.view.title ?? 'untitled',
   description: s.view.description,
   links: s.view.links,
 })
 
-export default function DiagramTitlePanel() {
-  const { id, title, description, links } = useDiagramState(selector)
+export function DiagramTitlePanel() {
+  const { id, title, description, links } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,

package/src/likec4diagram/ui/diagram-title/Link.tsx

@@ -0,0 +1,40 @@
+import type { Link } from '@likec4/core'
+import { Anchor, Box, Button, CopyButton, Group } from '@mantine/core'
+
+export function Link({ link }: { link: Link }) {
+  return (
+    <>
+      <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
+        <Box flex={'1'} style={{ overflow: 'hidden' }}>
+          <Anchor
+            href={link.url}
+            target="_blank"
+            fz="xs"
+            truncate="end"
+            display={'inline-block'}
+            w={'100%'}
+            onClick={(e) => e.stopPropagation()}>
+            {link.title || link.url}
+          </Anchor>
+        </Box>
+        <CopyButton value={link.url}>
+          {({ copied, copy }) => (
+            <Button
+              size="compact-xs"
+              fz={'10'}
+              variant="light"
+              onClick={(e) => {
+                e.stopPropagation()
+                copy()
+              }}
+              color={copied
+                ? 'teal'
+                : 'gray'}>
+              {copied ? 'copied' : 'copy'}
+            </Button>
+          )}
+        </CopyButton>
+      </Group>
+    </>
+  )
+}

package/src/likec4diagram/ui/index.ts

@@ -0,0 +1,2 @@
+export { Controls } from './controls/Controls'
+export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel'

package/src/{ui → likec4diagram/ui}/notation/NotationPanel.css.ts

@@ -1,13 +1,13 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereDark } from '../../theme-vars'
-import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
+import { mantine, vars, whereDark } from '../../../theme-vars'
+// import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = style({
   bottom: 0,
   right: 0,
   padding: 8,
-  margin: 0
+  margin: 0,
 })
 
 export const card = style({
@@ -21,22 +21,22 @@ export const card = style({
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 300,
-      maxWidth: `65vw`
+      maxWidth: `65vw`,
     },
     [mantine.largerThan('md')]: {
       // minWidth: 350,
-      maxWidth: `40vw`
-    }
+      maxWidth: `40vw`,
+    },
   },
   selectors: {
     [`${whereDark} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
-    }
-  }
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
+    },
+  },
 })
 
 export const tabPanel = style({
-  padding: calc(mantine.spacing.xs).divide(2).toString()
+  padding: calc(mantine.spacing.xs).divide(2).toString(),
 })
 
 // export const description = style({
@@ -55,18 +55,18 @@ export const elementNotation = style({
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   vars: {
-    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+    // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
   },
   ':hover': {
     transition: 'all 120ms ease-out',
     // backgroundColor:
-    backgroundColor: `color-mix(in srgb, ${mantine.colors.primaryColors[2]}, transparent 50%)`
+    backgroundColor: `color-mix(in srgb, ${mantine.colors.primaryColors[2]}, transparent 50%)`,
   },
   selectors: {
     [`${whereDark} &:hover`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[3]}, transparent 60%)`
-    }
-  }
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[3]}, transparent 60%)`,
+    },
+  },
 })
 
 export const shapeSvg = style({
@@ -79,7 +79,7 @@ export const shapeSvg = style({
   filter: `
     drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
-  `
+  `,
 })
 
 export const shapeBadge = style({
@@ -95,8 +95,8 @@ export const shapeBadge = style({
     ['--badge-fz']: '9.5px',
     ['--badge-padding-x']: '3px',
     ['--badge-height']: '13.5px',
-    ['--badge-lh']: '1'
+    ['--badge-lh']: '1',
     // ['--badge-bg']: vars.element.fill,
     // ['--badge-color']: vars.element.hiContrast
-  }
+  },
 })