@likec4/diagram 1.35.0 → 1.36.0

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -0,0 +1,244 @@
+import { css, cx } from '@likec4/styles/css'
+import { Box, HStack, styled } from '@likec4/styles/jsx'
+import { hstack, vstack } from '@likec4/styles/patterns'
+import {
+  type PopoverProps,
+  Badge,
+  Popover,
+  Text,
+  UnstyledButton,
+} from '@mantine/core'
+import { IconId, IconLink } from '@tabler/icons-react'
+import * as m from 'motion/react-m'
+import { ElementTag, MarkdownBlock } from '../../base/primitives'
+import { Link } from '../../components/Link'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
+import type { NavigationPanelActorSnapshot } from '../actor'
+import { useNavigationActorSnapshot } from '../hooks'
+
+const selector = ({ context }: NavigationPanelActorSnapshot) => {
+  const view = context.viewModel
+  return {
+    id: view.id,
+    title: view.titleOrUntitled,
+    description: view.description,
+    tags: view.tags,
+    links: view.links,
+    relativePath: view.$view.relativePath,
+  }
+}
+
+type ViewDetailsCardData = ReturnType<typeof selector>
+
+export const ViewDetailsCard = (props: PopoverProps) => {
+  const data = useNavigationActorSnapshot(selector)
+  const portalProps = useMantinePortalProps()
+
+  return (
+    <Popover
+      position="bottom-end"
+      shadow="xl"
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      trapFocus
+      {...portalProps}
+      {...props}
+    >
+      <ViewDetailsCardTrigger linksCount={data.links.length} />
+      <ViewDetailsCardDropdown data={data} />
+    </Popover>
+  )
+}
+
+const ViewDetailsCardTrigger = ({ linksCount }: { linksCount: number }) => (
+  <Popover.Target>
+    <UnstyledButton
+      component={m.button}
+      layout="position"
+      whileTap={{
+        scale: 0.95,
+        translateY: 1,
+      }}
+      className={cx(
+        'group',
+        hstack({
+          gap: '2',
+          paddingInline: 'xxs',
+          paddingBlock: 'xxs',
+          rounded: 'sm',
+          userSelect: 'none',
+          cursor: 'pointer',
+          color: {
+            base: 'likec4.panel.action-icon.text',
+            _hover: 'likec4.panel.action-icon.text.hover',
+          },
+          backgroundColor: {
+            _hover: 'likec4.panel.action-icon.bg.hover',
+          },
+          display: {
+            base: 'none',
+            '@/xs': 'flex',
+          },
+        }),
+        ``,
+      )}>
+      <IconId size={16} stroke={1.8} />
+      {linksCount > 0 && (
+        <HStack gap={'[1px]'}>
+          <IconLink size={14} stroke={2} />
+          <Box
+            css={{
+              fontSize: '11px',
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8,
+            }}>
+            {linksCount}
+          </Box>
+        </HStack>
+      )}
+    </UnstyledButton>
+  </Popover.Target>
+)
+
+const SectionHeader = styled('div', {
+  base: {
+    fontSize: 'xs',
+    color: 'mantine.colors.dimmed',
+    fontWeight: 500,
+    userSelect: 'none',
+    mb: 'xxs',
+  },
+})
+
+const ViewDetailsCardDropdown = ({
+  data: {
+    id,
+    title,
+    description,
+    tags,
+    links,
+    relativePath,
+  },
+}: { data: ViewDetailsCardData }) => {
+  const diagram = useDiagram()
+  return (
+    <Popover.Dropdown
+      className={cx(
+        'nowheel nopan nodrag',
+        vstack({
+          margin: 'xs',
+          layerStyle: 'likec4.dropdown',
+          gap: 'md',
+          padding: 'md',
+          pointerEvents: 'all',
+          maxWidth: 'calc(100cqw - 32px)',
+          minWidth: 'calc(100cqw - 50px)',
+          maxHeight: 'calc(100cqh - 100px)',
+          width: 'max-content',
+          cursor: 'default',
+          '@/sm': {
+            minWidth: 400,
+            maxWidth: 550,
+          },
+          '@/lg': {
+            maxWidth: 700,
+          },
+        }),
+      )}>
+      <section>
+        <Text component="div" fw={500} size="xl">{title}</Text>
+        <HStack alignItems={'flex-start'} mt="1">
+          <ViewBadge label="id" value={id} />
+          {/* {relativePath && <ViewBadge label="source" value={relativePath} />} */}
+          <HStack gap="xs" flexWrap="wrap">
+            {tags.map((tag, i) => (
+              <ElementTag
+                key={tag}
+                tag={tag}
+                cursor="pointer"
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.openSearch(`#${tag}`)
+                }} />
+            ))}
+          </HStack>
+        </HStack>
+      </section>
+      {links.length > 0 && (
+        <section className={hstack({ alignItems: 'baseline' })}>
+          <SectionHeader>Links</SectionHeader>
+          <HStack gap="xs" flexWrap="wrap">
+            {links.map((link, i) => <Link key={`${i}-${link.url}`} value={link} />)}
+          </HStack>
+        </section>
+      )}
+      {description.isEmpty && (
+        <Text component="div" fw={500} size="xs" c="dimmed" my="md" style={{ userSelect: 'none' }}>No description</Text>
+      )}
+      {description.nonEmpty && (
+        <section>
+          <SectionHeader>Description</SectionHeader>
+          <MarkdownBlock
+            value={description}
+            fontSize="sm"
+            emptyText="No description"
+            className={css({
+              userSelect: 'all',
+            })}
+          />
+        </section>
+      )}
+    </Popover.Dropdown>
+  )
+}
+
+const ViewBadge = ({
+  label,
+  value,
+}: {
+  label: string
+  value: string
+}) => {
+  return (
+    <HStack gap="0.5">
+      <ViewBadgeLabel>{label}</ViewBadgeLabel>
+      <Badge
+        size="sm"
+        radius="sm"
+        variant="light"
+        color="gray"
+        tt="none"
+        fw={500}
+        classNames={{
+          root: css({
+            width: 'max-content',
+            overflow: 'visible',
+            px: '1',
+            color: {
+              _light: 'mantine.colors.gray[8]',
+            },
+          }),
+          label: css({
+            overflow: 'visible',
+          }),
+          section: css({
+            opacity: 0.5,
+            userSelect: 'none',
+            marginInlineEnd: '0.5',
+          }),
+        }}>
+        {value}
+      </Badge>
+    </HStack>
+  )
+}
+
+const ViewBadgeLabel = styled('div', {
+  base: {
+    color: 'mantine.colors.dimmed',
+    fontWeight: 500,
+    fontSize: 'xxs',
+    userSelect: 'none',
+  },
+})

package/src/navigationpanel/controls/index.ts

@@ -3,3 +3,4 @@ export { NavigationButtons } from './NavigationButtons'
 export { OpenSource } from './OpenSource'
 export { SearchControl } from './SearchControl'
 export { ToggleReadonly } from './ToggleReadonly'
+export { ViewDetailsCard } from './ViewDetailsCard'

package/src/navigationpanel/dropdown/ProjectsMenu.tsx

@@ -0,0 +1,74 @@
+import { css } from '@likec4/styles/css'
+import { Box, HStack } from '@likec4/styles/jsx'
+import { type ButtonProps, Button, Menu, MenuDropdown, MenuItem, MenuTarget } from '@mantine/core'
+import { IconChevronDown } from '@tabler/icons-react'
+import { useLikeC4ProjectId, useLikeC4ProjectsContext } from '../../likec4model/useLikeC4Project'
+
+export function ProjectsMenu(props: ButtonProps) {
+  const { projects, onProjectChange } = useLikeC4ProjectsContext()
+  const projectId = useLikeC4ProjectId()
+
+  if (projects.length <= 1) {
+    return null
+  }
+
+  return (
+    <HStack gap="0.5" alignItems="baseline">
+      <Box
+        css={{
+          fontWeight: '400',
+          fontSize: 'xxs',
+          color: 'mantine.colors.dimmed',
+          userSelect: 'none',
+        }}>
+        Project
+      </Box>
+      <Menu shadow="md" position="bottom-start" offset={{ mainAxis: 2 }} closeOnItemClick>
+        <MenuTarget>
+          <Button
+            tabIndex={-1}
+            autoFocus={false}
+            variant="subtle"
+            size="compact-xs"
+            color="gray"
+            classNames={{
+              root: css({
+                fontWeight: '400',
+                fontSize: 'xxs',
+                height: 'auto',
+                lineHeight: 1.1,
+                color: {
+                  _light: 'mantine.colors.gray[9]',
+                },
+              }),
+              section: css({
+                '&:is([data-position="right"])': {
+                  marginInlineStart: '1',
+                },
+              }),
+            }}
+            rightSection={<IconChevronDown opacity={0.5} size={12} stroke={1.5} />}
+            {...props}>
+            {projectId}
+          </Button>
+        </MenuTarget>
+
+        <MenuDropdown>
+          {projects.map(({ id, title }) => (
+            <MenuItem
+              key={id}
+              onClick={(e) => {
+                if (projectId === id) {
+                  e.stopPropagation()
+                  return
+                }
+                onProjectChange(id)
+              }}>
+              {title ?? id}
+            </MenuItem>
+          ))}
+        </MenuDropdown>
+      </Menu>
+    </HStack>
+  )
+}

package/src/navigationpanel/editorpanel/EditorPanel.tsx

@@ -16,11 +16,11 @@ export function EditorPanel() {
         <m.div
           layout="position"
           className={vstack({
-            gap: 'sm',
+            gap: 'xs',
             layerStyle: 'likec4.panel',
             position: 'relative',
             cursor: 'pointer',
-            padding: '4',
+            padding: 'xxs',
             pointerEvents: 'all',
           })}
           initial={{
@@ -36,7 +36,7 @@ export function EditorPanel() {
             translateX: -20,
           }}
         >
-          <TooltipGroup>
+          <TooltipGroup openDelay={600} closeDelay={120}>
             <ChangeAutoLayoutButton />
             <ManualLayoutToolsButton />
             <LayoutDriftNotification />

package/src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx

@@ -2,7 +2,6 @@ import { css } from '@likec4/styles/css'
 import { hstack } from '@likec4/styles/patterns'
 import {
   type PopoverProps,
-  ActionIcon,
   Popover,
   PopoverDropdown,
   PopoverTarget,
@@ -20,6 +19,7 @@ import {
   IconRouteOff,
 } from '@tabler/icons-react'
 import { useDiagram } from '../../hooks/useDiagram'
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
 import { PanelActionIcon } from '../_common'
 import { Tooltip } from './_common'
 
@@ -33,7 +33,7 @@ const Action = ({
   onClick: React.MouseEventHandler
 }) => (
   <Tooltip label={label} withinPortal={false} position="top">
-    <ActionIcon
+    <PanelActionIcon
       classNames={{
         root: 'action-icon',
         icon: css({
@@ -43,29 +43,25 @@ const Action = ({
           },
         }),
       }}
-      variant="subtle"
-      color="gray"
       onClick={onClick}>
       {icon}
-    </ActionIcon>
+    </PanelActionIcon>
   </Tooltip>
 )
 
 export const ManualLayoutToolsButton = (props: PopoverProps) => {
   const diagram = useDiagram()
-
+  const portalProps = useMantinePortalProps()
   return (
     <Popover
-      position="right-start"
+      position="right"
       offset={{
-        mainAxis: 10,
-        crossAxis: -2,
+        mainAxis: 12,
       }}
       clickOutsideEvents={[
         'pointerdown',
       ]}
-      radius="sm"
-      shadow="lg"
+      {...portalProps}
       {...props}>
       <PopoverTarget>
         <Tooltip label="Manual layouting tools">
@@ -76,70 +72,71 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
       </PopoverTarget>
       <PopoverDropdown
         className={hstack({
-          gap: 1,
+          gap: '0.5',
           layerStyle: 'likec4.panel',
-          p: '2',
+          padding: '1',
+          pointerEvents: 'all',
         })}>
         <TooltipGroup>
           <Action
             label="Align in columns"
-            icon={<IconLayoutBoardSplit stroke={1.2} />}
+            icon={<IconLayoutBoardSplit />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Column')
             }} />
           <Action
             label="Align left"
-            icon={<IconLayoutAlignLeft stroke={1.5} />}
+            icon={<IconLayoutAlignLeft />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Left')
             }} />
           <Action
             label="Align center"
-            icon={<IconLayoutAlignCenter stroke={1.5} />}
+            icon={<IconLayoutAlignCenter />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Center')
             }} />
           <Action
             label="Align right"
-            icon={<IconLayoutAlignRight stroke={1.5} />}
+            icon={<IconLayoutAlignRight />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Right')
             }} />
           <Action
             label="Align in rows"
-            icon={<IconLayoutBoardSplit stroke={1.5} style={{ transform: 'rotate(90deg)' }} />}
+            icon={<IconLayoutBoardSplit style={{ transform: 'rotate(90deg)' }} />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Row')
             }} />
           <Action
             label="Align top"
-            icon={<IconLayoutAlignTop stroke={1.5} />}
+            icon={<IconLayoutAlignTop />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Top')
             }} />
           <Action
             label="Align middle"
-            icon={<IconLayoutAlignMiddle stroke={1.5} />}
+            icon={<IconLayoutAlignMiddle />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Middle')
             }} />
           <Action
             label="Align bottom"
-            icon={<IconLayoutAlignBottom stroke={1.5} />}
+            icon={<IconLayoutAlignBottom />}
             onClick={e => {
               e.stopPropagation()
               diagram.align('Bottom')
             }} />
           <Action
             label="Reset all control points"
-            icon={<IconRouteOff stroke={1.5} />}
+            icon={<IconRouteOff />}
             onClick={e => {
               e.stopPropagation()
               diagram.resetEdgeControlPoints()

package/src/navigationpanel/editorpanel/styles.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/navigationpanel/hooks.tsx

@@ -14,7 +14,7 @@ NavigationPanelActorSafeContext.displayName = 'NavigationPanelActorSafeContext'
 
 export const NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider
 
-export const useNavigationActorRef = () => {
+export const useNavigationActorRef = (): NavigationPanelActorRef => {
   const ctx = useContext(NavigationPanelActorSafeContext)
   if (ctx === null) {
     throw new Error('NavigationPanelActorRef is not found in the context')
@@ -39,7 +39,7 @@ export function useNavigationActorContext<T = unknown>(
   return useNavigationActorSnapshot(snapshot => selector(snapshot.context), compare, deps)
 }
 
-export type NavigationActor = {
+export interface NavigationActor {
   readonly actorRef: NavigationPanelActorRef
   send: (event: NavigationPanelActorEvent) => void
   selectFolder: (folderPath: string) => void

package/src/navigationpanel/styles.css.ts

@@ -5,8 +5,6 @@ export const breadcrumbTitle = cva({
     fontSize: 'sm',
     fontWeight: '500',
     transition: 'fast',
-    // width: 'max-content',
-    alignSelf: 'stretch',
     color: {
       base: 'mantine.colors.text/90',
       _hover: 'mantine.colors.text',

package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx

@@ -23,6 +23,9 @@ const TriggerWalkthroughButton = Button.withProps({
   variant: 'filled',
   size: 'xs',
   fw: '500',
+  className: css({
+    flexShrink: 0,
+  }),
 })
 
 export const StartWalkthroughButton = () => {
@@ -59,10 +62,10 @@ const ParallelFrame = () => {
       <Box
         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`,
@@ -100,6 +103,7 @@ export const ActiveWalkthroughControls = () => {
   return (
     <AnimatePresence propagate>
       <TriggerWalkthroughButton
+        key="trigger-dynamic-walkthrough"
         variant="light"
         color="orange"
         mr={'sm'}
@@ -122,6 +126,7 @@ export const ActiveWalkthroughControls = () => {
       </PrevNextButton>
 
       <Badge
+        key="step-badge"
         component={m.div}
         size="md"
         radius="sm"

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -5,10 +5,10 @@ export const backdropOpacity = '--_opacity'
 
 export const dialog = css({
   boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
+  margin: '0',
+  padding: '0',
   position: 'fixed',
-  inset: 0,
+  inset: '0',
   width: '100vw',
   height: '100vh',
   maxWidth: '100vw',
@@ -34,12 +34,12 @@ export const card = css({
   border: `none`,
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
-      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
-      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
+      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
+      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
       transparent 80px
     ),
-    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
   `,
   '& .react-flow__attribution': {
     display: 'none',
@@ -99,7 +99,7 @@ export const viewButton = css({
   width: '100%',
   background: 'mantine.colors.body',
   borderRadius: 'sm',
-  padding: `10px 8px`,
+  padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: 'fast',
@@ -163,8 +163,8 @@ export const tabsList = css({
   background: 'mantine.colors.gray[1]',
   borderRadius: 'sm',
   flexWrap: 'nowrap',
-  gap: '6px',
-  padding: '4px',
+  gap: '1.5', // 6px
+  padding: '1',
   _dark: {
     background: 'mantine.colors.dark[7]',
   },
@@ -174,7 +174,7 @@ export const tabsTab = css({
   fontSize: 'xs',
   fontWeight: 500,
   flexGrow: 1,
-  padding: '6px 8px',
+  padding: '[6px 8px]',
   transition: 'fast',
   borderRadius: 'sm',
   color: 'mantine.colors.gray[7]',
@@ -208,15 +208,15 @@ export const tabsPanel = css({
   overflow: 'hidden',
   position: 'relative',
   '&:not(:has(.mantine-ScrollArea-root))': {
-    paddingLeft: '4px',
-    paddingRight: '4px',
+    paddingLeft: '1',
+    paddingRight: '1',
   },
   '& .mantine-ScrollArea-root': {
     width: '100%',
     height: '100%',
     '& > div': {
-      paddingLeft: '4px',
-      paddingRight: '4px',
+      paddingLeft: '1',
+      paddingRight: '1',
     },
   },
 })
@@ -246,8 +246,8 @@ export const resizeHandle = css({
   borderTop: 'none',
   borderLeft: 'none',
   borderRadius: '2px',
-  bottom: '2px',
-  right: '2px',
+  bottom: '0.5',
+  right: '0.5',
   transition: 'fast',
   cursor: 'se-resize',
   _hover: {