@likec4/diagram 1.32.2 → 1.33.0

package/src/custom/hooks.ts

@@ -10,13 +10,16 @@ export {
 
 export {
   type EnabledFeatures,
+  type FeatureName,
   useEnabledFeatures,
 } from '../context/DiagramFeatures'
 export {
   useCurrentViewId,
 } from '../hooks/useCurrentViewId'
 export {
+  type DiagramApi,
   useDiagram,
+  useDiagramActorRef,
   useDiagramContext,
 } from '../hooks/useDiagram'
 export {
@@ -24,6 +27,8 @@ export {
   useXYInternalNode,
   useXYStore,
   useXYStoreApi,
+  type XYFlowInstance,
+  type XYStoreApi,
 } from '../hooks/useXYFlow'
 
 export {

package/src/hooks/useXYFlow.ts

@@ -1,9 +1,17 @@
 import { useCallbackRef } from '@mantine/hooks'
-import { type ReactFlowState, useInternalNode, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
+import {
+  type ReactFlowInstance,
+  type ReactFlowState,
+  useInternalNode,
+  useReactFlow,
+  useStore,
+  useStoreApi,
+} from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import type { Types } from '../likec4diagram/types'
 
 export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
+export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>
 
 export function useXYStore<StateSlice = unknown>(
   selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice,

package/src/index.ts

@@ -1,11 +1,21 @@
 export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { IconRendererProvider } from './context/IconRenderer'
-export { LikeC4Diagram } from './LikeC4Diagram'
-export type { LikeC4DiagramProps } from './LikeC4Diagram'
-export { Overlay } from './overlays/overlay/Overlay'
 
-export { LikeC4ModelProvider } from './LikeC4ModelProvider'
+export {
+  LikeC4Diagram,
+  type LikeC4DiagramProps,
+} from './LikeC4Diagram'
+
+export {
+  Overlay,
+  type OverlayProps,
+} from './overlays/overlay/Overlay'
+
+export {
+  LikeC4ModelProvider,
+  type LikeC4ModelProviderProps,
+} from './LikeC4ModelProvider'
 
 export * from './custom/hooks'
 
@@ -28,5 +38,7 @@ export type {
   WhereOperator,
 } from './LikeC4Diagram.props'
 
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
-export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'
+export {
+  StaticLikeC4Diagram,
+  type StaticLikeC4DiagramProps,
+} from './StaticLikeC4Diagram'

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

@@ -253,7 +253,7 @@ const Relationship = forwardRef<
         )}
       </Group>
       <Box className={styles.title}>{r.title || 'untitled'}</Box>
-      {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
+      {r.description.nonEmpty && <Text size="xs" c="dimmed">{r.description.text}</Text>}
       {links.length > 0 && (
         <Stack
           gap={3}

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types'
+import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
@@ -21,7 +21,6 @@ export namespace Types {
         | 'id'
         | 'title'
         | 'technology'
-        | 'description'
         | 'color'
         | 'shape'
         | 'width'
@@ -33,6 +32,7 @@ export namespace Types {
       >
     >
     & {
+      description: RichTextOrEmpty
       /**
        * View this node belongs to
        */

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

@@ -1,20 +1,27 @@
+import { RichText } from '@likec4/core/types'
 import { cx as clsx } from '@likec4/styles/css'
 import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import { AnimatePresence, m } from 'motion/react'
+import { MarkdownBlock } from '../../../base/primitives'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
+import type { DiagramContext } from '../../../state/types'
 import * as styles from './DiagramTitlePanel.css'
 
+function selector(context: DiagramContext) {
+  return {
+    id: context.view.id,
+    title: context.view.title ?? 'untitled',
+    description: RichText.from(context.view.description),
+    links: context.view.links,
+    isNotActiveWalkthrough: context.activeWalkthrough === null,
+  }
+}
+
 export function DiagramTitlePanel() {
-  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(s => ({
-    id: s.view.id,
-    title: s.view.title ?? 'untitled',
-    description: s.view.description,
-    links: s.view.links,
-    isNotActiveWalkthrough: s.activeWalkthrough === null,
-  }))
+  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,
@@ -120,9 +127,9 @@ export function DiagramTitlePanel() {
                     {id}
                   </Text>
                 </Group>
-                {description && (
+                {description.nonEmpty && (
                   <Spoiler
-                    maxHeight={42}
+                    maxHeight={60}
                     showLabel={
                       <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
                         show more
@@ -133,15 +140,13 @@ export function DiagramTitlePanel() {
                         hide
                       </Button>
                     }>
-                    <Text
-                      component={'div'}
-                      size="sm"
-                      className={styles.description}>
-                      {description || 'no description'}
-                    </Text>
+                    <MarkdownBlock
+                      className={styles.description}
+                      textScale={0.9}
+                      value={description} />
                   </Spoiler>
                 )}
-                {!description && (
+                {description.isEmpty && (
                   <Text
                     component={'div'}
                     size="xs"

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -10,6 +10,7 @@ import {
   invariant,
   nonNullable,
   Queue,
+  RichText,
   whereOperatorAsPredicate,
 } from '@likec4/core'
 import { useCustomCompareMemo } from '@react-hookz/web'
@@ -129,7 +130,7 @@ function viewToNodesEdge(opts: {
       id: node.id,
       title: node.title,
       technology: node.technology,
-      description: node.description,
+      description: RichText.from(node.description),
       height: node.height,
       width: node.width,
       level: node.level,

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

@@ -226,13 +226,15 @@ export const propertiesGrid = css({
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: `[20px 16px]`,
+  gap: `[24px 20px]`,
   alignItems: 'baseline',
   justifyItems: 'stretch',
 })
 
 export const propertyLabel = css({
   justifySelf: 'end',
+  textAlign: 'right',
+  userSelect: 'none',
 })
 
 export const resizeHandle = css({

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

@@ -17,12 +17,12 @@ import {
   Box,
   Card,
   CloseButton,
-  Code,
   Divider as MantineDivider,
   Flex,
   Group,
   RemoveScroll,
   ScrollArea,
+  ScrollAreaAutosize,
   Stack,
   Tabs,
   TabsList,
@@ -39,7 +39,8 @@ import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@ta
 import type { Rect } from '@xyflow/system'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'motion/react'
 import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
-import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
+import { clamp, entries, isNullish, map, only, partition, pipe } from 'remeda'
+import { MarkdownBlock } from '../../base/primitives'
 import { ElementTag } from '../../base/primitives/element/ElementTags'
 import { Link } from '../../components/Link'
 import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
@@ -126,6 +127,7 @@ export function ElementDetailsCard({
   )
 
   let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null
+  // Ignore default view if it's the current view
   if (defaultView?.id === viewId) {
     defaultView = null
   }
@@ -324,7 +326,21 @@ export function ElementDetailsCard({
             <Group align="baseline" gap={'sm'} wrap="nowrap">
               <div>
                 <SmallLabel>kind</SmallLabel>
-                <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
+                <Badge
+                  radius={'sm'}
+                  size="sm"
+                  fw={600}
+                  color="gray"
+                  style={{
+                    cursor: 'pointer',
+                  }}
+                  onClick={e => {
+                    e.stopPropagation()
+                    diagram.openSearch(`kind:${elementModel.kind}`)
+                  }}
+                >
+                  {elementModel.kind}
+                </Badge>
               </div>
               <div style={{ flex: 1 }}>
                 <SmallLabel>tags</SmallLabel>
@@ -369,9 +385,9 @@ export function ElementDetailsCard({
                       radius="sm"
                       onClick={e => {
                         e.stopPropagation()
-                        // diagram.openSource({
-                        //   element: elementModel.id,
-                        // })
+                        diagram.openSource({
+                          element: elementModel.id,
+                        })
                       }}>
                       <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
                     </ActionIcon>
@@ -413,11 +429,15 @@ export function ElementDetailsCard({
             </TabsList>
 
             <TabsPanel value="Properties">
-              <ScrollArea scrollbars="y" type="auto">
+              <ScrollArea scrollbars="y" type="scroll" offsetScrollbars>
                 <Box className={styles.propertiesGrid} pt={'xs'}>
-                  <ElementProperty title="description" emptyValue="no description">
-                    {elementModel.description}
-                  </ElementProperty>
+                  <>
+                    <PropertyLabel>description</PropertyLabel>
+                    <MarkdownBlock
+                      value={elementModel.description}
+                      emptyText="no description"
+                    />
+                  </>
                   {elementModel.technology && (
                     <ElementProperty title="technology">
                       {elementModel.technology}
@@ -527,11 +547,13 @@ const ViewButton = <A extends Any>({
           <Text component="div" className={styles.viewButtonTitle} lineClamp={1}>
             {view.title || 'untitled'}
           </Text>
-          {view.description && (
+          {
+            /* {view.description && (
             <Text component="div" mt={2} fz={'xs'} c={'dimmed'} lh={1.4} lineClamp={1}>
               {view.description}
             </Text>
-          )}
+          )} */
+          }
         </Box>
       </Group>
     </UnstyledButton>
@@ -559,6 +581,7 @@ function ElementProperty({
         fz={'md'}
         style={{
           whiteSpace: 'preserve-breaks',
+          userSelect: 'all',
           ...style,
         }}
         {...props}
@@ -570,17 +593,78 @@ function ElementProperty({
 }
 
 function ElementMetata({
-  value,
+  value: metadata,
 }: {
   value: NonNullable<Element['metadata']>
 }) {
   return (
     <>
       <PropertyLabel>metadata</PropertyLabel>
-      <Box>
-        <Code block>
-          {JSON.stringify(value, null, 2)}
-        </Code>
+      <Box
+        className={css({
+          flex: 1,
+          display: 'grid',
+          gridTemplateColumns: 'min-content 1fr',
+          gridAutoRows: 'min-content max-content',
+          gap: `[4px 4px]`,
+          alignItems: 'baseline',
+          justifyItems: 'stretch',
+          paddingRight: '2xs',
+        })}>
+        {entries(metadata).map(([key, value]) => (
+          <div
+            key={key}
+            className={cx(
+              'group',
+              css({
+                display: 'contents',
+              }),
+            )}
+          >
+            <div
+              className={css({
+                fontSize: 'sm',
+                fontWeight: 500,
+                justifySelf: 'end',
+                whiteSpace: 'nowrap',
+              })}>
+              {key}:
+            </div>
+            <div
+              className={css({})}>
+              <ScrollAreaAutosize
+                type="auto"
+                mah={200}
+                overscrollBehavior="none"
+                className={css({
+                  transitionProperty: 'all',
+                  transitionDuration: 'fast',
+                  transitionTimingFunction: 'inOut',
+                  rounded: 'sm',
+                  color: 'mantine.colors.gray[8]',
+                  _dark: {
+                    color: 'mantine.colors.dark[1]',
+                  },
+                  _groupHover: {
+                    transitionTimingFunction: 'out',
+                    color: 'mantine.colors.defaultColor',
+                    background: 'mantine.colors.defaultHover',
+                  },
+                })}>
+                <div
+                  className={css({
+                    fontSize: 'sm',
+                    padding: '2xs',
+                    whiteSpace: 'pre',
+                    fontFamily: '[var(--mantine-font-family-monospace)]',
+                    userSelect: 'all',
+                  })}>
+                  {value}
+                </div>
+              </ScrollAreaAutosize>
+            </div>
+          </div>
+        ))}
       </Box>
     </>
   )

package/src/overlays/relationship-details/_types.ts

@@ -1,4 +1,13 @@
-import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types'
+import type {
+  Color,
+  DiagramNode,
+  Fqn,
+  IconUrl,
+  RelationId,
+  RelationshipLineType,
+  RichTextOrEmpty,
+  ViewId,
+} from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
@@ -19,7 +28,6 @@ export namespace RelationshipDetailsTypes {
         DiagramNode,
         | 'title'
         | 'technology'
-        | 'description'
         | 'color'
         | 'shape'
         | 'width'
@@ -34,6 +42,7 @@ export namespace RelationshipDetailsTypes {
       fqn: Fqn
       icon: IconUrl
       ports: Ports
+      description: RichTextOrEmpty
     }
 
   export type CompoundNodeData =
@@ -69,9 +78,9 @@ export namespace RelationshipDetailsTypes {
       color: Color | undefined
       label: string | null
       technology?: string | undefined
-      description?: string | undefined
       navigateTo: ViewId | null
       line: RelationshipLineType
+      description: RichTextOrEmpty
     }
   >
 

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -2,6 +2,7 @@ import {
   type Fqn,
   nonNullable,
   Queue,
+  RichText,
 } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
 import { ZIndexes } from '../../base/const'
@@ -111,7 +112,7 @@ export function layoutResultToXYFlow(
               fqn,
               title: node.title,
               technology: node.technology,
-              description: node.description,
+              description: RichText.from(node.description),
               height: node.height,
               width: node.width,
               color: node.color,
@@ -159,8 +160,8 @@ export function layoutResultToXYFlow(
         color,
         navigateTo,
         line,
+        description: RichText.from(description),
         ...(technology && { technology }),
-        ...(description && { description }),
       },
     })
   }

package/src/overlays/relationship-details/layout.ts

@@ -12,10 +12,11 @@ import type {
   NonEmptyArray,
   Point,
   RelationId,
+  RichTextOrEmpty,
 } from '@likec4/core/types'
 
 import dagre, { type EdgeConfig, type GraphLabel } from '@dagrejs/dagre'
-import { invariant } from '@likec4/core'
+import { invariant, RichText } from '@likec4/core'
 import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   DefaultMap,
@@ -216,16 +217,18 @@ export type LayoutResult = {
 }
 
 export namespace LayoutResult {
-  export type Node = Omit<DiagramNode, 'modelRef' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+  export type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    description: RichTextOrEmpty
     modelRef: Fqn
     column: RelationshipDetailsTypes.Column
     ports: RelationshipDetailsTypes.Ports
     // existsInCurrentView: boolean
   }
-  export type Edge = Omit<DiagramEdge, 'relations'> & {
+  export type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
     relationId: RelationId
     sourceHandle: string
     targetHandle: string
+    description: RichTextOrEmpty
     // existsInCurrentView: boolean
     // column: RelationshipsBrowserTypes.Column
   }
@@ -398,7 +401,7 @@ export function layoutRelationshipDetails(
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: element.description,
+      description: RichText.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/src/overlays/relationships-browser/_types.ts

@@ -6,6 +6,7 @@ import type {
   NonEmptyArray,
   RelationId,
   RelationshipLineType,
+  RichTextOrEmpty,
   ViewId,
 } from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
@@ -29,7 +30,6 @@ export namespace RelationshipsBrowserTypes {
         DiagramNode,
         | 'title'
         | 'technology'
-        | 'description'
         | 'color'
         | 'shape'
         | 'style'
@@ -45,6 +45,7 @@ export namespace RelationshipsBrowserTypes {
       icon: string | null
       ports: Ports
       existsInCurrentView: boolean
+      description: RichTextOrEmpty
     }
   >
 

package/src/overlays/relationships-browser/layout.ts

@@ -14,6 +14,7 @@ import type {
   NodeId,
   NonEmptyArray,
   Point,
+  RichTextOrEmpty,
   ViewId,
 } from '@likec4/core/types'
 import { useMemo } from 'react'
@@ -24,6 +25,7 @@ import {
   ifind,
   invariant,
   nonNullable,
+  RichText,
   toArray,
 } from '@likec4/core'
 import type { ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
@@ -200,12 +202,13 @@ export type LayoutRelationshipsViewResult = {
 export namespace LayoutRelationshipsViewResult {
   export const Empty = '@empty' as ElementKind
 
-  export type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+  export type Node = Omit<DiagramNode, 'deploymentRef' | 'description' | 'inEdges' | 'outEdges'> & {
+    description: RichTextOrEmpty
     column: RelationshipsBrowserTypes.Column
     ports: RelationshipsBrowserTypes.Ports
     existsInCurrentView: boolean
   }
-  export type Edge = DiagramEdge & {
+  export type Edge = Omit<DiagramEdge, 'description'> & {
     sourceFqn: Fqn
     targetFqn: Fqn
     sourceHandle: string
@@ -464,7 +467,7 @@ export function layoutRelationshipsView(
         y: position.y,
         position: [position.x, position.y],
         title: 'empty node',
-        description: null,
+        description: RichText.EMPTY,
         technology: null,
         tags: [],
         links: [],
@@ -515,7 +518,7 @@ export function layoutRelationshipsView(
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: element.description,
+      description: RichText.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/src/search/components/ElementsColumn.tsx

@@ -279,7 +279,7 @@ function ElementTreeNode(
             </Tooltip>
           </Group>
           <Highlight component="div" highlight={searchTerms} className={btn.description!} lineClamp={1}>
-            {element.description || 'No description'}
+            {element.description.text || 'No description'}
           </Highlight>
         </Box>
 

package/src/search/components/ViewsColum.tsx

@@ -155,11 +155,11 @@ export function ViewButton(
           {isCurrentView && <Badge size="xs" fz={9} radius={'sm'}>current</Badge>}
         </Group>
         <Highlight
-          highlight={view.$view.description ? search : ''}
+          highlight={view.description.nonEmpty ? search : ''}
           component="div"
           className={btn.description!}
           lineClamp={1}>
-          {view.$view.description || 'No description'}
+          {view.description.text || 'No description'}
         </Highlight>
       </Box>
     </UnstyledButton>

package/src/state/DiagramActorProvider.tsx

@@ -1,5 +1,4 @@
 import type { DiagramView, WhereOperator } from '@likec4/core/types'
-import { useLogger } from '@mantine/hooks'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
@@ -14,7 +13,16 @@ import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorSnapshot } from './types'
 
-const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
+const selectToggledFeatures = (state: DiagramActorSnapshot) => {
+  if (state.context.features.enableReadOnly) {
+    return {
+      ...state.context.toggledFeatures,
+      enableReadOnly: true,
+    }
+  }
+  return state.context.toggledFeatures
+}
+
 export function DiagramActorProvider({
   view,
   zoomable,

package/src/state/diagram-machine.ts

@@ -499,7 +499,7 @@ const _diagramMachine = setup({
           if (n.data.tags?.includes(event.tag)) {
             return Base.setDimmed(n, false)
           }
-          return Base.setDimmed(n, 'immediate')
+          return Base.setDimmed(n, true)
         }),
       }
     }),