@likec4/diagram 1.21.0 → 1.21.1

package/src/base/primitives/element/ElementTitle.tsx

@@ -6,6 +6,7 @@ import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
+import { nodeSizes } from './ElementNodeContainer'
 import * as css from './ElementTitle.css'
 import { iconSize as varIconSize } from './styles.css'
 
@@ -35,6 +36,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
     },
     className: css.elementIcon,
   })
+  const size = nodeSizes(data.style).size
+  const isSm = size === 'sm'
+  const isSmOrXs = isSm || size === 'xs'
   return (
     <Box
       className={clsx(
@@ -53,7 +57,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         <Text
           component="h3"
           className={clsx(css.title, 'likec4-element-title')}
-          lineClamp={3}>
+          lineClamp={isSmOrXs ? 2 : 3}>
           {data.title}
         </Text>
 
@@ -69,7 +73,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
           <Text
             component="div"
             className={clsx(css.description, 'likec4-element-description')}
-            lineClamp={5}>
+            lineClamp={isSmOrXs ? 3 : 5}>
             {data.description}
           </Text>
         )}

package/src/base/primitives/element/styles.css.ts

@@ -25,50 +25,28 @@ globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
     [iconSize]: '36px',
   },
 })
-globalStyle(`${container}[data-likec4-shape-size="lg"], ${container}[data-likec4-shape-size="xl"]`, {
+globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
   vars: {
     [iconSize]: '82px',
   },
 })
-
-globalStyle(`${container}[data-likec4-text-size="xs"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.xs),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="sm"]`, {
+globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
   vars: {
-    [textSize]: rem(defaultTheme.textSizes.sm),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="lg"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.lg),
-  },
-})
-globalStyle(`${container}[data-likec4-text-size="xl"]`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.xl),
+    [iconSize]: '90px',
   },
 })
 
-globalStyle(`${container}[data-likec4-padding="xs"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.xs),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="sm"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.sm),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="lg"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.lg),
-  },
-})
-globalStyle(`${container}[data-likec4-padding="xl"]`, {
-  vars: {
-    [paddingSize]: rem(defaultTheme.spacing.xl),
-  },
+const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+sizes.forEach((size) => {
+  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+    vars: {
+      [textSize]: rem(defaultTheme.textSizes[size]),
+    },
+  })
+
+  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+    vars: {
+      [paddingSize]: rem(defaultTheme.spacing[size]),
+    },
+  })
 })

package/src/globals.css.ts

@@ -7,6 +7,8 @@ import { mantine, vars, whereDark } from './theme-vars'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
+  containerName: 'likec4-diagram-root',
+  containerType: 'size',
   overflow: 'hidden',
   position: 'relative',
   width: '100%',

package/src/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useCurrentViewId } from './useCurrentViewId'
-export type { DiagramContext } from './useDiagramContext'
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'

package/src/index.ts

@@ -16,7 +16,21 @@ export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
 export { vars, xyvars } from './theme-vars'
 
-export type * from './LikeC4Diagram.props'
+export type {
+  ChangeEvent,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4ColorScheme,
+  LikeC4DiagramEventHandlers,
+  LikeC4DiagramProperties,
+  OnCanvasClick,
+  OnChange,
+  OnEdgeClick,
+  OnNavigateTo,
+  OnNodeClick,
+  OpenSourceParams,
+  WhereOperator,
+} from './LikeC4Diagram.props'
 
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4diagram/DiagramUI.tsx

@@ -1,10 +1,7 @@
-import { memo } from 'react'
 import { IfEnabled } from '../context'
 import { LikeC4Search } from '../LikeC4Search'
 import { Overlays } from '../overlays/Overlays'
-import { Controls, DiagramTitlePanel } from './ui'
-import NotationPanel from './ui/notation'
-import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
+import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export function DiagramUI() {
   return (

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -1,6 +1,5 @@
 import {
   type EdgeId,
-  type NodeId,
   isStepEdgeId,
   nonNullable,
 } from '@likec4/core'

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css'
 import { mantine, vars } from '../../../theme-vars'
 
 export const menuDropdown = style({
+  overflowY: 'scroll',
   minWidth: 250,
   maxWidth: 'min(90vw, 500px)',
 })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -130,6 +130,7 @@ export function RelationshipsDropdownMenu({
       closeOnItemClick={false}
       disabled={disabled}
       position="bottom-start"
+      middlewares={{ size: { padding: 8 } }}
       {...portalProps}
     >
       <MenuTarget>

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

@@ -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/overlays/Overlays.tsx

@@ -73,7 +73,7 @@ export const Overlays = memo(() => {
 
   const isMotionReduced = useReducedMotion() ?? false
 
-  const isActiveOverlay = !!activeElementDetailsOf
+  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor
 
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -112,11 +112,8 @@ export function ElementDetailsCard({
   const diagram = useDiagram()
   const likec4model = useLikeC4Model(true)
   const viewModel = likec4model.view(viewId)
-  // const currentView = diagram.currentView()
-  // const diagramNode = currentView.nodes.find(n => n.id === fqn)
-  // invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`)
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn)
-  // invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`)
+
   const elementModel = viewModel.$model.element(fqn)
 
   // const incoming = elementModel.incoming().map(r => r.id).toArray()

package/src/overlays/element-details/TabPanelDeployments.tsx

@@ -2,7 +2,7 @@ import type { Fqn, LikeC4Model } from '@likec4/core'
 import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
 import { type ReactNode, memo, useEffect, useMemo } from 'react'
-import { useCurrentViewId } from '../../hooks/useCurrentViewId'
+import { useDiagram } from '../../hooks/useDiagram'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import { stopPropagation } from '../../utils'
 import * as css from './TabPanelDeployments.css'
@@ -36,8 +36,8 @@ const DeployedInstanceRenderer = (
     instance: LikeC4Model.DeployedInstance
   },
 ) => {
-  const currentViewId = useCurrentViewId()
-  // const diagramApi = useDiagramStoreApi()
+  const diagram = useDiagram()
+  const currentViewId = diagram.currentView().id
   const views = [...instance.views()]
   return (
     (
@@ -91,7 +91,7 @@ const DeployedInstanceRenderer = (
                     }}
                     onClick={e => {
                       e.stopPropagation()
-                      // diagramApi.getState().onNavigateTo?.(view.id)
+                      diagram.navigateTo(view.id)
                     }}>
                     {view.title}
                   </Menu.Item>

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +0,0 @@
-import { useDiagramContext } from "./useDiagramContext.js";
-const selectViewId = (state) => state.view.id;
-function useCurrentViewId() {
-  return useDiagramContext(selectViewId);
-}
-export {
-  useCurrentViewId
-};