@likec4/diagram 1.30.0 → 1.31.0

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

@@ -28,7 +28,7 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, memo, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../../components/Link'
-import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
+import { IfEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useLikeC4Model } from '../../../likec4model'
@@ -62,11 +62,13 @@ export const RelationshipsDropdownMenu = memo((
     disabled?: boolean | undefined
   }>,
 ) => {
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
-    diagramEdge: findDiagramEdge(ctx, edgeId),
-    sourceNode: findDiagramNode(ctx, source),
-    targetNode: findDiagramNode(ctx, target),
-  }))
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
+    useCallback(ctx => ({
+      diagramEdge: findDiagramEdge(ctx, edgeId),
+      sourceNode: findDiagramNode(ctx, source),
+      targetNode: findDiagramNode(ctx, target),
+    }), [edgeId, source, target]),
+  )
   const likec4model = useLikeC4Model(true)
   const diagram = useDiagram()
 
@@ -188,7 +190,7 @@ const Relationship = forwardRef<
   ...props
 }, ref) => {
   const diagram = useDiagram()
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const { onOpenSource } = useDiagramEventHandlers()
   const viewId = diagram.currentView.id
 

package/src/likec4diagram/custom/{index.tsx → index.ts}

@@ -6,9 +6,9 @@ import {
   DeploymentNode,
   ElementNode,
   ViewGroupNode,
-} from './nodes/nodeTypes'
+} from './nodes/nodes'
 
-export const nodeTypes = {
+export const BuiltinNodes = {
   element: ElementNode,
   deployment: DeploymentNode,
   'compound-element': CompoundElementNode,

package/src/likec4diagram/custom/nodes/CompoundActions.tsx

@@ -1,14 +1,14 @@
 import type { NodeId } from '@likec4/core'
 import { CompoundActionButton } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
 type CompoundActionsProps = NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>
 
 export const CompoundActions = (props: CompoundActionsProps) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const diagram = useDiagram()
 
   const { navigateTo } = props.data

package/src/likec4diagram/custom/nodes/ElementActions.tsx

@@ -1,74 +1,117 @@
-import type { NodeId } from '@likec4/core'
+import { type NodeId, hasAtLeast } from '@likec4/core'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { useMemo } from 'react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
-type ElementActionsProps = NodeProps<Types.ElementNodeData>
-export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'NavigateTo')
-  const diagram = useDiagram()
+type WithExtraButtons = {
+  /**
+   * Add extra action buttons
+   * @example
+   * ```tsx
+   * <ElementActions
+   *   extraButtons={[
+   *     {
+   *       key: 'extra',
+   *       icon: <IconZoomScan />,
+   *       onClick: (e) => {
+   *         e.stopPropagation()
+   *         console.log('extra action clicked')
+   *       },
+   *       },
+   *     },
+   *   ]}
+   * />
+   * ```
+   */
+  extraButtons?: ElementActionButtons.Item[]
+}
 
-  const buttons = [] as ElementActionButtons.Item[]
+export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons
 
+export const ElementActions = ({
+  extraButtons,
+  ...props
+}: ElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures()
+  const diagram = useDiagram()
   const { navigateTo, modelFqn } = props.data
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: 'navigate',
-      icon: <IconZoomScan />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.navigateTo(navigateTo, props.id as NodeId)
-      },
-    })
-  }
-  if (enableRelationshipBrowser) {
-    buttons.push({
-      key: 'relationships',
-      icon: <IconTransform />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openRelationshipsBrowser(modelFqn)
-      },
-    })
+  let buttons = useMemo(() => {
+    const buttons = [] as ElementActionButtons.Item[]
+
+    if (navigateTo && enableNavigateTo) {
+      buttons.push({
+        key: 'navigate',
+        icon: <IconZoomScan />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.navigateTo(navigateTo, props.id as NodeId)
+        },
+      })
+    }
+    if (enableRelationshipBrowser) {
+      buttons.push({
+        key: 'relationships',
+        icon: <IconTransform />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.openRelationshipsBrowser(modelFqn)
+        },
+      })
+    }
+    return buttons
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id])
+
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons]
   }
-  return (
-    <ElementActionButtons
-      buttons={buttons}
-      {...props}
-    />
-  )
+
+  // Spread all ReactFlow node props and override buttons with our computed buttons
+  return <ElementActionButtons {...props} buttons={buttons} />
 }
 
-type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData>
-export const DeploymentElementActions = (props: DeploymentElementActionsProps) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('NavigateTo', 'RelationshipBrowser')
+export type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData> & WithExtraButtons
+export const DeploymentElementActions = ({
+  extraButtons,
+  ...props
+}: DeploymentElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures()
   const diagram = useDiagram()
+  const { navigateTo, modelFqn } = props.data
 
-  const buttons = [] as ElementActionButtons.Item[]
+  let buttons = useMemo(() => {
+    const buttons = [] as ElementActionButtons.Item[]
 
-  const { navigateTo, modelFqn } = props.data
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: 'navigate',
-      icon: <IconZoomScan />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.navigateTo(navigateTo, props.id as NodeId)
-      },
-    })
-  }
-  if (enableRelationshipBrowser && !!modelFqn) {
-    buttons.push({
-      key: 'relationships',
-      icon: <IconTransform />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openRelationshipsBrowser(modelFqn)
-      },
-    })
+    if (navigateTo && enableNavigateTo) {
+      buttons.push({
+        key: 'navigate',
+        icon: <IconZoomScan />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.navigateTo(navigateTo, props.id as NodeId)
+        },
+      })
+    }
+    if (enableRelationshipBrowser && !!modelFqn) {
+      buttons.push({
+        key: 'relationships',
+        icon: <IconTransform />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.openRelationshipsBrowser(modelFqn)
+        },
+      })
+    }
+    return buttons
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id])
+
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons]
   }
-  return <ElementActionButtons buttons={buttons} {...props} />
+
+  // Spread all ReactFlow node props and override buttons with our computed buttons
+  return <ElementActionButtons {...props} buttons={buttons} />
 }

package/src/likec4diagram/custom/nodes/index.ts

@@ -0,0 +1,17 @@
+export { CompoundActions } from './CompoundActions'
+export { DeploymentElementActions, ElementActions } from './ElementActions'
+export {
+  CompoundDeploymentNode,
+  CompoundDetailsButtonWithHandler,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementDetailsButtonWithHandler,
+  ElementNode,
+  ViewGroupNode,
+} from './nodes'
+
+export * from './CompoundActions'
+export * from './ElementActions'
+export * from './toolbar/CompoundToolbar'
+export * from './toolbar/ElementToolbar'
+export * from './toolbar/Toolbar'

package/src/likec4diagram/custom/nodes/{nodeTypes.tsx → nodes.tsx}

@@ -1,4 +1,4 @@
-import { type Fqn, type NodeId } from '@likec4/core'
+import { type NodeId } from '@likec4/core'
 import type { NodeProps } from '../../../base'
 import {
   CompoundDetailsButton,
@@ -11,7 +11,7 @@ import {
   ElementShape,
   ElementTitle,
 } from '../../../base/primitives'
-import { IfEnabled, IfNotEnabled, useEnabledFeature } from '../../../context'
+import { IfEnabled, IfNotReadOnly, useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 import { CompoundActions } from './CompoundActions'
@@ -19,11 +19,14 @@ import { DeploymentElementActions, ElementActions } from './ElementActions'
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
 
-const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.NodeData> & { fqn: Fqn }) => {
-  const { enableElementDetails } = useEnabledFeature('ElementDetails')
+export function ElementDetailsButtonWithHandler(
+  props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>,
+) {
+  const { enableElementDetails } = useEnabledFeatures()
   const diagram = useDiagram()
+  const fqn = props.data.modelFqn
 
-  if (!enableElementDetails) return null
+  if (!enableElementDetails || !fqn) return null
 
   return (
     <ElementDetailsButton
@@ -31,79 +34,92 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
       onClick={e => {
         e.stopPropagation()
         diagram.openElementDetails(fqn, props.id as NodeId)
-      }}
-    />
+      }} />
   )
 }
 
-export const ElementNode = customNode<Types.ElementNodeData>((props) => (
+export function CompoundDetailsButtonWithHandler(
+  props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>,
+) {
+  const { enableElementDetails } = useEnabledFeatures()
+  const diagram = useDiagram()
+  const fqn = props.data.modelFqn
+
+  if (!enableElementDetails || !fqn) return null
+
+  return (
+    <CompoundDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(fqn, props.id as NodeId)
+      }} />
+  )
+}
+
+export const ElementNode = customNode<Types.ElementNodeData, 'element'>((props) => (
   <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} />
+    <ElementShape {...props} />
     <ElementTitle {...props} />
     <ElementActions {...props} />
-    <ElementDetailsButtonWithHandler
-      fqn={props.data.modelFqn}
-      {...props} />
-    <IfNotEnabled feature="ReadOnly">
+    <ElementDetailsButtonWithHandler {...props} />
+    <IfNotReadOnly>
       <ElementToolbar {...props} />
-    </IfNotEnabled>
+    </IfNotReadOnly>
     <DefaultHandles />
   </ElementNodeContainer>
 ))
+ElementNode.displayName = 'ElementNode'
 
-export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData, 'deployment'>((props) => (
   <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} />
+    <ElementShape {...props} />
     <ElementTitle {...props} />
     <DeploymentElementActions {...props} />
-    {!!props.data.modelFqn && (
-      <ElementDetailsButtonWithHandler
-        fqn={props.data.modelFqn}
-        {...props} />
-    )}
-    <IfNotEnabled feature="ReadOnly">
+    <ElementDetailsButtonWithHandler {...props} />
+    <IfNotReadOnly>
       <DeploymentElementToolbar {...props} />
-    </IfNotEnabled>
+    </IfNotReadOnly>
     <DefaultHandles />
   </ElementNodeContainer>
 ))
+DeploymentNode.displayName = 'DeploymentNode'
 
-export const CompoundElementNode = customNode<Types.CompoundElementNodeData>((props) => {
+export const CompoundElementNode = customNode<Types.CompoundElementNodeData, 'compound-element'>((props) => {
   const diagram = useDiagram()
+
   return (
     <CompoundNodeContainer nodeProps={props}>
       <CompoundTitle {...props} />
       <CompoundActions {...props} />
       <IfEnabled feature="ElementDetails">
-        <CompoundDetailsButton
-          {...props}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
-          }} />
+        <CompoundDetailsButtonWithHandler {...props} />
       </IfEnabled>
-      <IfNotEnabled feature="ReadOnly">
+      <IfNotReadOnly>
         <CompoundElementToolbar {...props} />
-      </IfNotEnabled>
+      </IfNotReadOnly>
       <DefaultHandles />
     </CompoundNodeContainer>
   )
 })
+CompoundElementNode.displayName = 'CompoundElementNode'
 
-export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData>((props) => (
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData, 'compound-deployment'>((props) => (
   <CompoundNodeContainer nodeProps={props}>
     <CompoundTitle {...props} />
     <CompoundActions {...props} />
-    <IfNotEnabled feature="ReadOnly">
+    <IfNotReadOnly>
       <CompoundDeploymentToolbar {...props} />
-    </IfNotEnabled>
+    </IfNotReadOnly>
     <DefaultHandles />
   </CompoundNodeContainer>
 ))
+CompoundDeploymentNode.displayName = 'CompoundDeploymentNode'
 
-export const ViewGroupNode = customNode<Types.ViewGroupNodeData>((props) => (
+export const ViewGroupNode = customNode<Types.ViewGroupNodeData, 'view-group'>((props) => (
   <CompoundNodeContainer nodeProps={props}>
     <CompoundTitle {...props} />
     <DefaultHandles />
   </CompoundNodeContainer>
 ))
+ViewGroupNode.displayName = 'ViewGroupNode'

package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx

@@ -2,7 +2,7 @@ import { type BorderStyle } from '@likec4/core'
 import { Box, SegmentedControl } from '@mantine/core'
 import { useEffect, useState } from 'react'
 import type { NodeProps } from '../../../../base/types'
-import { useEnabledFeature } from '../../../../context'
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures'
 import type { Types } from '../../../types'
 import type { OnStyleChange } from './_shared'
 import { BrowseRelationshipsButton, GoToSourceButton, useHandlers } from './_shared'
@@ -11,7 +11,7 @@ import { Toolbar } from './Toolbar'
 
 type CompoundElementToolbarProps = NodeProps<Types.CompoundElementNodeData>
 export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       style,
@@ -20,7 +20,6 @@ export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
   } = props
 
   const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props)
-
   return (
     <Toolbar
       nodeProps={props}
@@ -46,7 +45,7 @@ export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
 
 type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>
 export function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       deploymentFqn,

package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx

@@ -2,7 +2,7 @@ import { type ElementShape, ElementShapes } from '@likec4/core'
 import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from '@mantine/core'
 import { IconCheck, IconSelector } from '@tabler/icons-react'
 import type { NodeProps } from '../../../../base/types'
-import { useEnabledFeature } from '../../../../context'
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures'
 import { stopPropagation } from '../../../../utils/xyflow'
 import type { Types } from '../../../types'
 import type { OnStyleChange } from './_shared'
@@ -12,7 +12,7 @@ import { Toolbar } from './Toolbar'
 
 type ElementToolbarProps = NodeProps<Types.ElementNodeData>
 export function ElementToolbar(props: ElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       shape,
@@ -45,7 +45,7 @@ export function ElementToolbar(props: ElementToolbarProps) {
 
 type DeploymentElementToolbarProps = NodeProps<Types.DeploymentElementNodeData>
 export function DeploymentElementToolbar(props: DeploymentElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       shape,

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -1,15 +1,16 @@
-import { Box, Group, Paper, Stack, Text, Tooltip } from '@mantine/core'
+import { cx as clsx } from '@likec4/styles/css'
+import { Box, Group, Paper, Stack, Text } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
-import clsx from 'clsx'
 import type { ReactNode } from 'react'
-import type { Base } from '../../../../base'
+import type { NodeProps } from '../../../../base/types'
 import { useDiagramContext } from '../../../../hooks/useDiagram'
 import { stopPropagation } from '../../../../utils/xyflow'
+import type { Types } from '../../../types'
 import * as styles from './styles.css'
 
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-  nodeProps: Base.NodeProps
+  nodeProps: NodeProps<Types.NodeData>
   title: ReactNode
 }
 

package/src/likec4diagram/types.ts

@@ -1,8 +1,7 @@
 import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
-import type { Base } from '../base'
-import type { ReactFlowEdge, ReactFlowNode } from '../base/types'
+import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
 
 type NonOptional<T extends object> = Simplify<
   & {
@@ -14,7 +13,8 @@ type NonOptional<T extends object> = Simplify<
 >
 
 export namespace Types {
-  export type LeafNodeData = Base.NodeData<
+  export type LeafNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -32,10 +32,13 @@ export namespace Types {
       >
     >
     & {
+      /**
+       * View this node belongs to
+       */
+      viewId: ViewId
       isMultiple?: boolean | undefined
       icon: string | null
     }
-  >
 
   /**
    * Represents element from logical model
@@ -61,7 +64,8 @@ export namespace Types {
       modelFqn: Fqn | null
     }
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -74,10 +78,13 @@ export namespace Types {
       >
     >
     & {
+      /**
+       * View this node belongs to
+       */
+      viewId: ViewId
       depth: number
       icon?: IconUrl
     }
-  >
 
   export type CompoundElementNodeData = CompoundNodeData & {
     modelFqn: Fqn
@@ -116,8 +123,9 @@ export namespace Types {
 
   export type NodeData = Node['data']
 
-  export type RelationshipEdgeData = Base.EdgeData<
-    NonOptional<
+  export type RelationshipEdgeData = Simplify<
+    & Base.EdgeData
+    & NonOptional<
       Pick<
         DiagramEdge,
         | 'id'
@@ -133,7 +141,8 @@ export namespace Types {
         | 'navigateTo'
         | 'notes'
       >
-    > & {
+    >
+    & {
       labelXY: XYPosition | null
       controlPoints: XYPosition[] | undefined | null
     }
@@ -142,4 +151,5 @@ export namespace Types {
   export type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>
 
   export type Edge = RelationshipEdge
+  export type EdgeData = RelationshipEdgeData
 }

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

@@ -1,7 +1,7 @@
+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 clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'

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

@@ -1,5 +1,5 @@
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
-import { css, cx } from '@likec4/styles/css'
+import { css, cx, cx as clsx } from '@likec4/styles/css'
 import {
   ActionIcon,
   Badge,
@@ -19,7 +19,6 @@ import {
 } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'

package/src/likec4diagram/ui/search/ElementsColumn.tsx

@@ -5,9 +5,8 @@ import {
   isAncestor,
   nameFromFqn,
   sortParentsFirst,
-  toArray,
 } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
+import { cx, cx as clsx } from '@likec4/styles/css'
 import {
   type RenderTreeNodePayload,
   ActionIcon,
@@ -22,10 +21,9 @@ import {
 } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconChevronRight } from '@tabler/icons-react'
-import clsx from 'clsx'
 import * as m from 'motion/react-m'
 import { type KeyboardEventHandler, useCallback, useEffect, useMemo } from 'react'
-import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 'remeda'
+import { first, isEmpty, only, partition, pipe, reduce } from 'remeda'
 import { IconOrShapeRenderer } from '../../../context/IconRenderer'
 import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -1,3 +1,4 @@
+import { cx as clsx } from '@likec4/styles/css'
 import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
 import {
   IconPlayerPlayFilled,
@@ -5,7 +6,6 @@ import {
   IconPlayerSkipForwardFilled,
   IconPlayerStopFilled,
 } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'