@likec4/diagram 1.21.0 → 1.22.0

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

@@ -1,14 +1,15 @@
-import { ActionIconGroup, Badge, Loader, Stack } from '@mantine/core'
-import { openSpotlight } from '@mantine/spotlight'
-import { IconFileSymlink, IconFocusCentered, IconSearch } from '@tabler/icons-react'
+import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
+import { LayoutGroup } from 'framer-motion'
 import { memo } from 'react'
-import { IfNotEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramSyncLayoutState } from '../../../hooks/useDiagramActor'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { stopPropagation } from '../../../utils'
+import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { LayoutDriftNotification } from './LayoutDriftNotification'
@@ -25,41 +26,47 @@ export const Controls = memo(() => {
   const diagram = useDiagram()
   const {
     onOpenSource,
+    onBurgerMenuClick,
   } = useDiagramEventHandlers()
   const {
     enableControls,
     enableSearch,
     enableNavigationButtons,
     enableReadOnly,
-    enableEdgeEditing,
     enableVscode,
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
+
   return (
-    <>
-      <Stack
-        className={clsx(
-          'react-flow__panel',
-          css.panel,
-          'likec4-top-left-panel',
-        )}
-        align="flex-start"
-        onClick={stopPropagation}
-        gap={'xs'}>
-        {enableNavigationButtons && <NavigationButtons />}
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableControls && enableSearch && (
-            <Tooltip label="Search (Ctrl+F or ⌘+F)" {...portalProps}>
+    <Group
+      align="flex-start"
+      className={clsx(
+        'react-flow__panel',
+        css.panel,
+        'likec4-top-left-panel',
+      )}
+      gap="xs"
+      onClick={stopPropagation}
+    >
+      <Stack align="flex-start" gap="xs">
+        <LayoutGroup>
+          <Group
+            className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+            gap={'xs'}>
+            {onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  openSpotlight()
+                  onBurgerMenuClick()
                 }}>
-                <IconSearch />
+                <IconMenu2 />
               </ActionIcon>
-            </Tooltip>
-          )}
+            )}
+            {enableNavigationButtons && <NavigationButtons />}
+          </Group>
+        </LayoutGroup>
+        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
           {enableVscode && (
             <Tooltip label="Open source" {...portalProps}>
               <ActionIcon
@@ -90,9 +97,12 @@ export const Controls = memo(() => {
             </Tooltip>
           )}
         </ActionIconGroup>
-        {notReadOnly && <SyncLayoutBadge />}
       </Stack>
-    </>
+      <Group>
+        {enableSearch && <LikeC4Search />}
+        {notReadOnly && <SyncLayoutBadge />}
+      </Group>
+    </Group>
   )
 })
 

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

@@ -2,19 +2,13 @@ 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 { IconChevronLeft } from '@tabler/icons-react'
 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,
@@ -23,61 +17,45 @@ export const NavigationButtons = () => {
     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 && (
+    <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()
-              onBurgerMenuClick()
+              diagram.navigate('back')
             }}>
-            <IconMenu2 />
+            <IconChevronLeft />
           </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>
+        </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>
   )
 }

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -5,12 +5,14 @@ import { mantine, vars } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
+  ':empty': {
+    display: 'none',
+  },
 })
 
 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,
 })
 

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

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { Link } from '../../../base'
+import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import type { DiagramContext } from '../../state/machine'
 import * as css from './DiagramTitlePanel.css'
@@ -13,10 +13,11 @@ const selector = (s: DiagramContext) => ({
   title: s.view.title ?? 'untitled',
   description: s.view.description,
   links: s.view.links,
+  isNotActiveWalkthrough: s.activeWalkthrough === null,
 })
 
 export function DiagramTitlePanel() {
-  const { id, title, description, links } = useDiagramContext(selector)
+  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,
@@ -41,126 +42,128 @@ export function DiagramTitlePanel() {
         </div>
       </ViewportPortal> */
       }
-      <m.div
-        key={id}
-        initial={{ opacity: 0.05, scale: 0.7 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{
-          opacity: 0.05,
-          scale: 0.6,
-        }}
-        className={clsx('react-flow__panel', css.container)}
-        style={{
-          transformOrigin: 'left center',
-        }}
-      >
-        <Card
-          radius="sm"
-          className={css.card}
-          withBorder={!isCollapsed}
-          p={isCollapsed ? 'sm' : 'md'}
-          onDoubleClick={e => e.stopPropagation()}>
-          {isCollapsed && (
-            <CardSection>
-              <Button
-                fullWidth
-                justify="stretch"
-                size="md"
-                radius={'0'}
-                variant={'subtle'}
-                color="gray"
-                onClick={toggle}
-                fw={500}
-                fz={'sm'}
-                tabIndex={-1}
-              >
-                {title}
-              </Button>
-            </CardSection>
-          )}
-          {!isCollapsed && (
-            <>
-              <CardSection mb={'xs'}>
+      {isNotActiveWalkthrough && (
+        <m.div
+          key={id}
+          initial={{ opacity: 0.05, scale: 0.7 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{
+            opacity: 0.05,
+            scale: 0.6,
+          }}
+          className={clsx('react-flow__panel', css.container)}
+          style={{
+            transformOrigin: 'left center',
+          }}
+        >
+          <Card
+            radius="sm"
+            className={css.card}
+            withBorder={!isCollapsed}
+            p={isCollapsed ? 'sm' : 'md'}
+            onDoubleClick={e => e.stopPropagation()}>
+            {isCollapsed && (
+              <CardSection>
                 <Button
                   fullWidth
-                  size="xs"
-                  h={'sm'}
-                  py={2}
+                  justify="stretch"
+                  size="md"
                   radius={'0'}
                   variant={'subtle'}
                   color="gray"
                   onClick={toggle}
+                  fw={500}
+                  fz={'sm'}
                   tabIndex={-1}
                 >
-                  <IconMenu size={11} opacity={0.7} />
+                  {title}
                 </Button>
               </CardSection>
+            )}
+            {!isCollapsed && (
+              <>
+                <CardSection mb={'xs'}>
+                  <Button
+                    fullWidth
+                    size="xs"
+                    h={'sm'}
+                    py={2}
+                    radius={'0'}
+                    variant={'subtle'}
+                    color="gray"
+                    onClick={toggle}
+                    tabIndex={-1}
+                  >
+                    <IconMenu size={11} opacity={0.7} />
+                  </Button>
+                </CardSection>
 
-              <Group justify="stretch" wrap="nowrap" mb={'sm'}>
-                <Text
-                  component={'div'}
-                  flex={'1'}
-                  size={'md'}
-                  fw={500}
-                  lh={1.1}
-                  className={css.title}
-                >
-                  {title}
-                </Text>
-                <Text
-                  hidden={isCollapsed}
-                  component={'div'}
-                  flex={'0 0 auto'}
-                  inline
-                  size="xs"
-                  fz={9}
-                  fw={500}
-                  c={'dimmed'}
-                  style={{
-                    userSelect: 'all',
-                  }}>
-                  <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                  {id}
-                </Text>
-              </Group>
-              {description && (
-                <Spoiler
-                  maxHeight={42}
-                  showLabel={
-                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
-                  }
-                  hideLabel={
-                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
-                  }>
+                <Group justify="stretch" wrap="nowrap" mb={'sm'}>
                   <Text
                     component={'div'}
-                    size="sm"
-                    className={css.description}>
-                    {description || 'no description'}
+                    flex={'1'}
+                    size={'md'}
+                    fw={500}
+                    lh={1.1}
+                    className={css.title}
+                  >
+                    {title}
                   </Text>
-                </Spoiler>
-              )}
-              {!description && (
-                <Text
-                  component={'div'}
-                  size="xs"
-                  c={'dimmed'}>
-                  no description
-                </Text>
-              )}
-              {links && (
-                <Stack
-                  mt={'xs'}
-                  gap={4}
-                  justify="stretch"
-                  align="stretch">
-                  {links.map((link) => <Link value={link} key={link.url} />)}
-                </Stack>
-              )}
-            </>
-          )}
-        </Card>
-      </m.div>
+                  <Text
+                    hidden={isCollapsed}
+                    component={'div'}
+                    flex={'0 0 auto'}
+                    inline
+                    size="xs"
+                    fz={9}
+                    fw={500}
+                    c={'dimmed'}
+                    style={{
+                      userSelect: 'all',
+                    }}>
+                    <span style={{ userSelect: 'none' }}>id:{' '}</span>
+                    {id}
+                  </Text>
+                </Group>
+                {description && (
+                  <Spoiler
+                    maxHeight={42}
+                    showLabel={
+                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
+                    }
+                    hideLabel={
+                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
+                    }>
+                    <Text
+                      component={'div'}
+                      size="sm"
+                      className={css.description}>
+                      {description || 'no description'}
+                    </Text>
+                  </Spoiler>
+                )}
+                {!description && (
+                  <Text
+                    component={'div'}
+                    size="xs"
+                    c={'dimmed'}>
+                    no description
+                  </Text>
+                )}
+                {links && (
+                  <Stack
+                    mt={'xs'}
+                    gap={4}
+                    justify="stretch"
+                    align="stretch">
+                    {links.map((link) => <Link value={link} key={link.url} />)}
+                  </Stack>
+                )}
+              </>
+            )}
+          </Card>
+        </m.div>
+      )}
     </AnimatePresence>
   )
 }

package/src/likec4diagram/ui/index.ts

@@ -1,2 +1,4 @@
 export { Controls } from './controls/Controls'
 export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel'
+export { NotationPanel } from './notation/NotationPanel'
+export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough'

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
@@ -23,12 +22,12 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'
-// import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import { ElementShape } from '../../../base/primitives'
-import { type DiagramContext, useMantinePortalProps } from '../../../hooks'
+import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useXYStore } from '../../../hooks/useXYFlow'
+import { DiagramContext } from '../../../likec4diagram/state/machine'
 import { vars } from '../../../theme-vars'
 import * as css from './NotationPanel.css'
 

package/src/likec4diagram/ui/search/ElementsColumn.css.ts

@@ -0,0 +1,119 @@
+import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { whereLight } from '../../../theme-vars.css'
+import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
+
+export { focusable } from './_shared.css'
+
+export const treeContainer = createContainer('likec4-elements-tree')
+
+const whenContainerIsNarrow = `${treeContainer} (width < 450px)`
+
+export const treeNode = style({
+  outline: 'none',
+  marginBottom: 8,
+})
+export const treeRoot = style({
+  overflow: 'hidden',
+  containerName: treeContainer,
+  containerType: 'inline-size',
+  height: '100%',
+})
+export const treeLabel = style({
+  display: 'flex',
+  alignItems: 'baseline',
+  outline: 'none !important',
+  gap: 4,
+})
+export const treeSubtree = style({
+  marginTop: 8,
+})
+
+export const iconSize = createGlobalVar('likec4-icon-size')
+export const elementExpandIcon = style({
+  color: mantine.colors.dimmed,
+})
+
+export const elementButton = style([button, {
+  flexGrow: 1,
+  vars: {
+    [iconSize]: '24px',
+  },
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      vars: {
+        [iconSize]: '18px',
+      },
+    },
+  },
+}])
+
+globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
+
+export const elementTitleAndId = style({
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'flex-start',
+      gap: 2,
+    },
+  },
+})
+
+export const elementTitle = style([title])
+export const elementId = style({
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  lineHeight: 1.3,
+  display: 'block',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '1px 5px',
+  borderRadius: 4,
+  background: `color-mix(in srgb, ${mantine.colors.dark[9]}, transparent 70%)`,
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 80%)`,
+    },
+  },
+})
+export const elementDescription = style([description])
+
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  marginTop: 4,
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain',
+})
+globalStyle(`${elementIcon}.likec4-shape-icon svg`, {
+  color: iconColor,
+  width: '90%',
+  strokeWidth: 1.5,
+})
+
+export const elementViewsCount = style({
+  flex: 0,
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  lineHeight: 1.1,
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      display: 'none',
+    },
+  },
+})