@likec4/diagram 1.35.0 → 1.36.0

package/src/likec4model/LikeC4ProjectsContext.ts

@@ -0,0 +1,9 @@
+import type { LikeC4Project, ProjectId } from '@likec4/core/types'
+import { createContext } from 'react'
+
+export type LikeC4ProjectsContext = {
+  projects: ReadonlyArray<LikeC4Project>
+  onProjectChange: (id: ProjectId) => void
+}
+
+export const LikeC4ProjectsContext = createContext<LikeC4ProjectsContext | null>(null)

package/src/likec4model/index.ts

@@ -9,3 +9,11 @@ export {
   useLikeC4Specification,
   useLikeC4ViewModel,
 } from './useLikeC4Model'
+
+export {
+  useChangeLikeC4Project,
+  useHasProjects,
+  useLikeC4ProjectId,
+  useLikeC4Projects,
+  useLikeC4ProjectsContext,
+} from './useLikeC4Project'

package/src/likec4model/useLikeC4Project.ts

@@ -0,0 +1,61 @@
+import { type LikeC4Project, type ProjectId } from '@likec4/core/types'
+import { useContext } from 'react'
+import { LikeC4ModelContext } from './LikeC4ModelContext'
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext'
+
+const emptyProjects: ReadonlyArray<LikeC4Project> = []
+/**
+ * @returns The list of available projects, or empty array if no projects are available.
+ */
+export function useLikeC4Projects(): ReadonlyArray<LikeC4Project> {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return emptyProjects
+  }
+  return ctx.projects
+}
+
+const emptyOnProjectChange: (id: ProjectId) => void = () => {}
+/**
+ * @returns The callback to change current project.
+ */
+export function useChangeLikeC4Project(): (id: ProjectId) => void {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return emptyOnProjectChange
+  }
+  return ctx.onProjectChange
+}
+
+const emptyContext: LikeC4ProjectsContext = {
+  projects: emptyProjects,
+  onProjectChange: emptyOnProjectChange,
+}
+/**
+ * @returns The callback to change current project.
+ */
+export function useLikeC4ProjectsContext(): LikeC4ProjectsContext {
+  return useContext(LikeC4ProjectsContext) ?? emptyContext
+}
+
+/**
+ * @returns True if there are more than one project available in the context.
+ */
+export function useHasProjects(): boolean {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return false
+  }
+  return ctx.projects.length > 1
+}
+
+/**
+ * @returns The current project id.
+ */
+export function useLikeC4ProjectId(): ProjectId {
+  const ctx = useContext(LikeC4ModelContext)
+  if (!ctx) {
+    throw new Error('No LikeC4ModelContext found')
+  }
+  return ctx.projectId as ProjectId
+}

package/src/navigationpanel/NavigationPanel.tsx

@@ -35,7 +35,7 @@ export const NavigationPanel = memo(() => {
     },
   )
   useEffect(() => {
-    const subscription = actorRef.on('trigger.navigateTo', (event) => {
+    const subscription = actorRef.on('navigateTo', (event) => {
       if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
         diagramActor.send({ type: 'navigate.to', viewId: event.viewId })
       }
@@ -52,25 +52,25 @@ export const NavigationPanel = memo(() => {
       <VStack
         className="react-flow__panel"
         css={{
-          gap: 'sm',
-          margin: 'sm',
           alignItems: 'flex-start',
           pointerEvents: 'none',
-          top: 0,
-          left: 0,
+
+          top: '0',
+          left: '0',
+          margin: '0',
+          width: '100%',
+          gap: 'xxs',
           maxWidth: [
-            'calc(100vw - 2 * {spacing.sm})',
-            'calc(100cqw - 2 * {spacing.sm})',
+            'calc(100vw)',
+            'calc(100cqw)',
           ],
-          width: 'max-content',
-          overflow: 'hidden',
-          smDown: {
-            margin: 0,
-            width: '100%',
-            gap: '2xs',
+          '@/sm': {
+            margin: 'xs',
+            gap: 'xs',
+            width: 'max-content',
             maxWidth: [
-              'calc(100vw)',
-              'calc(100cqw)',
+              'calc(100vw - 2 * {spacing.md})',
+              'calc(100cqw - 2 * {spacing.md})',
             ],
           },
         }}>
@@ -91,11 +91,10 @@ const NavigationPanelImpl = ({ actor }: { actor: NavigationPanelActorRef }) => {
   return (
     <Popover
       offset={{
-        mainAxis: 4,
+        mainAxis: 2,
       }}
       middlewares={{ flip: false }}
       opened={opened}
-      shadow="md"
       position="bottom-start"
       trapFocus
       {...portalProps}

package/src/navigationpanel/NavigationPanelControls.tsx

@@ -10,8 +10,8 @@ import * as m from 'motion/react-m'
 import { useEnabledFeatures } from '../context/DiagramFeatures'
 import { BreadcrumbsSeparator } from './_common'
 import { type NavigationPanelActorSnapshot } from './actor'
-import { BurgerButton, NavigationButtons, OpenSource, SearchControl, ToggleReadonly } from './controls'
-import { useNavigationActorRef } from './hooks'
+import { BurgerButton, NavigationButtons, OpenSource, SearchControl, ToggleReadonly, ViewDetailsCard } from './controls'
+import { useNavigationActor } from './hooks'
 import { breadcrumbTitle } from './styles.css'
 import { StartWalkthroughButton } from './walkthrough'
 
@@ -25,12 +25,11 @@ const selectBreadcrumbs = ({ context }: NavigationPanelActorSnapshot) => {
     viewId: context.viewModel.id,
     viewTitle: context.viewModel.titleOrUntitled,
     isDynamicView: context.viewModel.isDynamicView(),
-    hasLinks: context.viewModel.links.length > 0,
   }
 }
 
 export const NavigationPanelControls = () => {
-  const actor = useNavigationActorRef()
+  const actor = useNavigationActor()
   const {
     enableSearch,
     enableNavigationButtons,
@@ -41,7 +40,7 @@ export const NavigationPanelControls = () => {
     folders,
     viewTitle,
     isDynamicView,
-  } = useSelector(actor, selectBreadcrumbs, deepEqual)
+  } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual)
 
   const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [
     <UnstyledButton
@@ -51,10 +50,14 @@ export const NavigationPanelControls = () => {
         breadcrumbTitle({ dimmed: true, truncate: true }),
         'mantine-active',
         css({
+          userSelect: 'none',
           maxWidth: '200px',
+          display: {
+            base: 'none',
+            '@/md': 'block',
+          },
         }),
       )}
-      visibleFrom="sm"
       title={title}
       onMouseEnter={() => actor.send({ type: 'breadcrumbs.mouseEnter.folder', folderPath })}
       onMouseLeave={() => actor.send({ type: 'breadcrumbs.mouseLeave.folder', folderPath })}
@@ -75,6 +78,9 @@ export const NavigationPanelControls = () => {
       className={cx(
         'mantine-active',
         breadcrumbTitle({ truncate: true }),
+        css({
+          userSelect: 'none',
+        }),
       )}
       title={viewTitle}
       onMouseEnter={() => actor.send({ type: 'breadcrumbs.mouseEnter.viewtitle' })}
@@ -90,66 +96,38 @@ export const NavigationPanelControls = () => {
 
   return (
     <AnimatePresence propagate>
-      <BurgerButton />
-      {enableNavigationButtons && <NavigationButtons />}
+      <BurgerButton key="burger-button" />
+      {enableNavigationButtons && <NavigationButtons key="nav-buttons" />}
       <m.div
+        key="breadcrumbs"
         layout="position"
         className={hstack({
-          gap: 3,
+          gap: '[3px]',
           flexShrink: 1,
           flexGrow: 1,
           overflow: 'hidden',
-          md: {
-            marginRight: 'md',
-          },
         })}>
         {folderBreadcrumbs}
         {viewBreadcrumb}
       </m.div>
-      {
-        /* <HStack gap={1}>
-          <PanelActionIcon
-            variant="subtle"
-            size={24}
-            component={m.button}
-            whileHover={{
-              scale: 1.085,
-            }}
-            whileTap={{
-              scale: 1,
-              translateY: 1,
-            }}
-            children={<IconInfoCircleFilled style={{ width: '85%', height: '85%' }} />}
-          />
-          <PanelActionIcon
-            variant="subtle"
-            size={24}
-            component={m.button}
-            whileHover={{
-              scale: 1.085,
-            }}
-            whileTap={{
-              scale: 1,
-              translateY: 1,
-            }}
-            children={<IconLink style={{ width: '85%', height: '85%' }} />}
-          />
-        </HStack> */
-      }
-
-      {enableDynamicViewWalkthrough && isDynamicView && <StartWalkthroughButton />}
       <m.div
+        key="actions"
         layout="position"
         className={hstack({
-          gap: 1,
+          gap: '[1px]',
+          flexGrow: 0,
           _empty: {
             display: 'none',
           },
         })}>
+        <ViewDetailsCard
+          onOpen={() => actor.closeDropdown()}
+        />
         <OpenSource />
         <ToggleReadonly />
       </m.div>
-      {enableSearch && <SearchControl />}
+      {enableDynamicViewWalkthrough && isDynamicView && <StartWalkthroughButton key="walkthrough-button" />}
+      {enableSearch && <SearchControl key="search-control" />}
     </AnimatePresence>
   )
 }

package/src/navigationpanel/NavigationPanelDropdown.tsx

@@ -32,6 +32,7 @@ import { isArray, isEmpty, pipe, sort } from 'remeda'
 import { type NavigationLinkProps, NavigationLink } from '../components/NavigationLink'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import type { NavigationPanelActorContext } from './actor'
+import { ProjectsMenu } from './dropdown/ProjectsMenu'
 import { useNavigationActor, useNavigationActorContext, useNavigationActorRef } from './hooks'
 import { breadcrumbTitle } from './styles.css'
 
@@ -59,7 +60,7 @@ export function NavigationPanelDropdown() {
         'nowheel',
         vstack({
           layerStyle: 'likec4.dropdown',
-          gap: 'sm',
+          gap: 'xs',
           pointerEvents: 'all',
         }),
       )}
@@ -67,6 +68,7 @@ export function NavigationPanelDropdown() {
       onMouseLeave={() => actor.send({ type: 'dropdown.mouseLeave' })}
       onMouseEnter={() => actor.send({ type: 'dropdown.mouseEnter' })}
     >
+      <ProjectsMenu />
       <HStack gap="xs">
         <SearchInput
           value={searchQuery}
@@ -94,8 +96,8 @@ export function NavigationPanelDropdown() {
         classNames={{
           root: css({
             maxWidth: [
-              'calc(100vw - 20px)',
-              'calc(100cqw - 20px)',
+              'calc(100vw - 50px)',
+              'calc(100cqw - 50px)',
             ],
           }),
         }}
@@ -138,15 +140,15 @@ function SearchResults({ searchQuery }: { searchQuery: string }) {
       className={css({
         width: '100%',
         maxWidth: [
-          '70vw',
+          'calc(100vw - 250px)',
           'calc(100cqw - 250px)',
         ],
         maxHeight: [
-          '70vh',
-          'calc(100cqh - 250px)',
+          'calc(100vh - 200px)',
+          'calc(100cqh - 200px)',
         ],
       })}>
-      <VStack gap={1}>
+      <VStack gap="[1px]">
         {found.map(v => (
           <FoundedView
             key={v.id}
@@ -171,10 +173,10 @@ interface FoundedViewProps {
 }
 
 const foundedViewClass = hstack({
-  gap: '2xs',
+  gap: 'xxs',
   rounded: 'sm',
   px: 'xs',
-  py: '2xs',
+  py: 'xxs',
   _hover: {
     backgroundColor: {
       base: 'mantine.colors.gray[1]',
@@ -207,6 +209,18 @@ function FoundedView(
       className={cx(
         inheritColor,
         breadcrumbTitle({ truncate: true }),
+        css({
+          '& > mark': {
+            backgroundColor: {
+              base: 'mantine.colors.yellow[2]/90',
+              _dark: 'mantine.colors.yellow[5]/80',
+              _groupFocus: '[transparent]',
+            },
+            color: {
+              _groupFocus: '[inherit!]',
+            },
+          },
+        }),
       )}
       maw={350}
       highlight={highlight}
@@ -252,7 +266,7 @@ function FoundedView(
     </Highlight>
   ))
   breadcrumbs.push(
-    <HStack gap={4}>
+    <HStack gap="[4px]">
       {viewIcon}
       {viewLabel}
     </HStack>,
@@ -281,6 +295,7 @@ const folderIcon = (
         base: 0.3,
         _groupHover: 0.5,
         _groupActive: 0.5,
+        _groupFocus: 0.5,
       },
     })} />
 )
@@ -289,8 +304,9 @@ const viewTypeIconCss = css({
   opacity: {
     base: 0.3,
     _dark: 0.5,
-    _groupHover: 0.7,
-    _groupActive: 0.7,
+    _groupHover: 0.8,
+    _groupActive: 0.8,
+    _groupFocus: 0.8,
   },
 })
 const ViewTypeIcon = {
@@ -309,8 +325,8 @@ const ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: 'y',
   className: css({
     maxHeight: [
-      'calc(100vh - 50px)',
-      'calc(100cqh - 50px)',
+      'calc(100vh - 160px)',
+      'calc(100cqh - 160px)',
     ],
   }),
 })
@@ -400,9 +416,9 @@ function FolderColumn({ data }: { data: FolderColumnData }) {
   }
 
   return (
-    <Box pb={'4'}>
+    <Box mb={'1'}>
       <ColumnScrollArea>
-        <VStack gap={1}>
+        <VStack gap="[1px]">
           {data.items.map((item, i) => (
             <FolderColumnItem
               key={`${data.folderPath}/${item.type}/${i}`}

package/src/navigationpanel/_common.tsx

@@ -28,10 +28,13 @@ export const Tooltip = MantineTooltip.withProps({
 
 export const BreadcrumbsSeparator = () => (
   <ThemeIcon
-    visibleFrom="sm"
     variant="transparent"
     size={16}
     className={css({
+      display: {
+        base: 'none',
+        '@/md': 'flex',
+      },
       color: {
         base: 'mantine.colors.gray[5]',
         _dark: 'mantine.colors.dark[3]',

package/src/navigationpanel/actor.ts

@@ -40,7 +40,7 @@ export type NavigationPanelActorEvent =
   | { type: 'dropdown.mouseLeave' }
   | { type: 'dropdown.dismiss' }
 
-export type NavigationPanelActorEmitted = { type: 'trigger.navigateTo'; viewId: ViewId }
+export type NavigationPanelActorEmitted = { type: 'navigateTo'; viewId: ViewId }
 
 export type BreadcrumbItem =
   | { type: 'folder'; folderPath: string; title: string }
@@ -109,6 +109,9 @@ const _actorLogic = setup({
       activatedBy: 'click',
     }),
     'update selected folder': assign(({ event }) => {
+      if (event.type === 'breadcrumbs.click.root') {
+        return { selectedFolder: '' } // reset to root
+      }
       assertEvent(event, ['breadcrumbs.click.folder', 'select.folder'])
       return { selectedFolder: event.folderPath }
     }),
@@ -136,10 +139,10 @@ const _actorLogic = setup({
       assertEvent(event, 'searchQuery.change')
       return { searchQuery: event.value ?? '' }
     }),
-    'emit trigger.navigateTo': emit(({ event }) => {
+    'emit navigateTo': emit(({ event }) => {
       assertEvent(event, 'select.view')
       return {
-        type: 'trigger.navigateTo' as const,
+        type: 'navigateTo' as const,
         viewId: ViewId(event.viewId),
       }
     }),
@@ -248,15 +251,11 @@ const _actorLogic = setup({
               actions: 'keep dropdown open',
               target: 'search',
             },
-            'breadcrumbs.click.folder': {
-              actions: 'update selected folder',
-              target: 'opened',
-              reenter: true,
-            },
             'breadcrumbs.click.viewtitle': {
               actions: 'reset selected folder',
-              reenter: true,
-              target: 'opened',
+            },
+            'breadcrumbs.click.*': {
+              actions: 'update selected folder',
             },
             'select.folder': {
               actions: [
@@ -266,30 +265,30 @@ const _actorLogic = setup({
             },
             'select.view': {
               actions: [
-                'emit trigger.navigateTo',
+                'emit navigateTo',
               ],
             },
           },
         },
         search: {
           on: {
-            'breadcrumbs.click.folder': {
+            'breadcrumbs.click.viewtitle': {
               actions: [
                 'reset search query',
-                'update selected folder',
+                'reset selected folder',
               ],
               target: 'opened',
             },
             'breadcrumbs.click.*': {
               actions: [
                 'reset search query',
-                'reset selected folder',
+                'update selected folder',
               ],
               target: 'opened',
             },
             'select.view': {
               actions: [
-                'emit trigger.navigateTo',
+                'emit navigateTo',
               ],
             },
           },

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 stroke={1.5} style={{ width: '65%' }} />}
       />
     </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',