@likec4/diagram 1.35.0 → 1.36.1

package/src/navigationpanel/controls/BurgerButton.tsx

@@ -1,10 +1,10 @@
 import { IconMenu2 } from '@tabler/icons-react'
-import { useDiagramEventHandlers } from '../../context'
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
 import { PanelActionIcon } from '../_common'
-import { useNavigationActorRef } from '../hooks'
+import { useNavigationActor } from '../hooks'
 
 export const BurgerButton = () => {
-  const actor = useNavigationActorRef()
+  const actor = useNavigationActor()
   const { onBurgerMenuClick } = useDiagramEventHandlers()
   return (
     <PanelActionIcon
@@ -17,14 +17,12 @@ export const BurgerButton = () => {
       }}
       onClick={e => {
         e.stopPropagation()
-        if (onBurgerMenuClick) {
-          actor.send({ type: 'breadcrumbs.mouseLeave.root' })
+        if (onBurgerMenuClick && actor.isOpened()) {
           setTimeout(() => {
             onBurgerMenuClick()
           }, 100)
-        } else {
-          actor.send({ type: 'breadcrumbs.click.root' })
         }
+        actor.send({ type: 'breadcrumbs.click.root' })
       }}
       children={<IconMenu2 style={{ width: '80%', height: '80%' }} />}
     />

package/src/navigationpanel/controls/NavigationButtons.tsx

@@ -14,7 +14,15 @@ export const NavigationButtons = () => {
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
   }))
   return (
-    <m.div layout="position" className={hstack({ gap: 1, mdDown: { display: 'none' } })}>
+    <m.div
+      layout="position"
+      className={hstack({
+        gap: '[1px]',
+        display: {
+          base: 'none',
+          '@likec4-root/sm': 'flex',
+        },
+      })}>
       <PanelActionIcon
         disabled={!hasStepBack}
         onClick={e => {

package/src/navigationpanel/controls/OpenSource.tsx

@@ -21,7 +21,7 @@ export const OpenSource = () => {
           e.stopPropagation()
           onOpenSource?.({ view: viewId })
         }}
-        children={<IconFileSymlink size={12} stroke={1.5} style={{ width: '65%' }} />}
+        children={<IconFileSymlink style={{ width: '60%', height: '60%' }} />}
       />
     </Tooltip>
   )

package/src/navigationpanel/controls/SearchControl.tsx

@@ -24,14 +24,15 @@ export function SearchControl() {
         diagram.openSearch()
       }}
       whileTap={{
+        scale: 0.95,
         translateY: 1,
       }}
       className={cx(
         'group',
         hstack({
-          gap: '2xs',
+          gap: 'xxs',
           paddingInline: 'sm',
-          paddingBlock: '2xs',
+          paddingBlock: 'xxs',
           rounded: 'sm',
           userSelect: 'none',
           cursor: 'pointer',
@@ -43,8 +44,9 @@ export function SearchControl() {
             base: 'likec4.panel.action-icon.bg',
             _hover: 'likec4.panel.action-icon.bg.hover',
           },
-          smDown: {
-            display: 'none',
+          display: {
+            base: 'none',
+            '@/md': 'flex',
           },
         }),
       )}>

package/src/navigationpanel/controls/ToggleReadonly.tsx

@@ -33,9 +33,9 @@ export const ToggleReadonly = () => {
       className={cx(
         'group',
         hstack({
-          gap: '2',
-          paddingInline: '2xs',
-          paddingBlock: '2xs',
+          gap: '0.5',
+          paddingInline: 'xxs',
+          paddingBlock: 'xxs',
           rounded: 'sm',
           userSelect: 'none',
           cursor: 'pointer',

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',