@likec4/diagram 1.17.0 → 1.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -23,44 +23,47 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "packageManager": "yarn@4.5.1",
+  "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "test": "vitest run --no-isolate"
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.17.0",
-    "@mantine/vanilla-extract": "7.13.4",
+    "@likec4/core": "1.17.1",
+    "@mantine/vanilla-extract": "7.14.1",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
-    "@vanilla-extract/css": "^1.16.0",
+    "@vanilla-extract/css": "^1.16.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.4",
-    "@xyflow/system": "0.0.45",
+    "@xyflow/react": "12.3.5",
+    "@xyflow/system": "0.0.46",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.1.4",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.11.17",
     "khroma": "^2.1.0",
-    "remeda": "^2.16.0",
-    "type-fest": "4.26.1",
+    "remeda": "^2.17.3",
+    "type-fest": "4.27.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.13.4",
-    "@mantine/hooks": "^7.13.4",
+    "@mantine/core": "^7.14.1",
+    "@mantine/hooks": "^7.14.1",
+    "@mantine/spotlight": "^7.14.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.17.0",
-    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "7.13.4",
+    "@likec4/tsconfig": "1.17.1",
+    "@mantine/core": "7.14.1",
+    "@mantine/hooks": "7.14.1",
+    "@mantine/spotlight": "7.14.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.11",
@@ -68,6 +71,7 @@
     "execa": "^9.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.5"
   }
 }

package/src/LikeC4Diagram.props.ts

@@ -148,6 +148,12 @@ export interface LikeC4DiagramProperties {
    */
   enableFocusMode?: boolean | undefined
 
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined
+
   /**
    * Enable modal with element details
    * @default false

package/src/LikeC4Diagram.tsx

@@ -1,6 +1,6 @@
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
-import { deepEqual, shallowEqual } from 'fast-equals'
+import { deepEqual } from 'fast-equals'
 import { memo, useEffect, useRef } from 'react'
 import { isEmpty } from 'remeda'
 import { rootClassName } from './globals.css'
@@ -9,6 +9,7 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { useLikeC4Model } from './likec4model'
+import { LikeC4Search } from './LikeC4Search'
 import { Overlays } from './overlays'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { EnsureMantine } from './ui/EnsureMantine'
@@ -39,6 +40,7 @@ export function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
+  enableSearch = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -111,6 +113,7 @@ export function LikeC4Diagram({
             showNotations={showNotations}
             enableFocusMode={enableFocusMode}
             enableRelationshipDetails={enableRelationshipDetails && hasLikec4model}
+            enableSearch={hasLikec4model && enableSearch}
             enableElementDetails={enableElementDetails && hasLikec4model}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
@@ -134,6 +137,7 @@ export function LikeC4Diagram({
             <LikeC4DiagramInnerMemo
               background={background}
               showDiagramTitle={showDiagramTitle}
+              enableSearch={hasLikec4model && enableSearch}
             />
           </DiagramContextProvider>
         </XYFlowProvider>
@@ -146,10 +150,12 @@ LikeC4Diagram.displayName = 'LikeC4Diagram'
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
   showDiagramTitle: boolean
+  enableSearch: boolean
 }
 const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
-  showDiagramTitle
+  showDiagramTitle,
+  enableSearch
 }) {
   const {
     isInitialized,
@@ -183,6 +189,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
         />
       </XYFlow>
       {enableOverlays && <Overlays />}
+      {enableSearch && <LikeC4Search />}
       {isInitialized && (
         <>
           {fitView && <FitViewOnDiagramChange />}

package/src/LikeC4Search.tsx

@@ -0,0 +1,146 @@
+import type { DiagramView } from '@likec4/core'
+import { Spotlight, SpotlightActionsGroup, type SpotlightActionData } from '@mantine/spotlight'
+import { IconRectangularPrism, IconSitemap, IconSearch } from '@tabler/icons-react'
+import { memo, useMemo, useState } from 'react'
+import { filter, map, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
+import { useLikeC4Model } from './likec4model'
+import { Center, Group, Highlight, Text } from '@mantine/core'
+
+interface QueryMatch {
+  data: SpotlightActionData,
+  keyword: string,
+  match: string
+}
+
+function filterAction(actionData: SpotlightActionData, query: string) : QueryMatch | undefined {
+  const queryLower = query.toLowerCase();
+  const keywords = Array.isArray(actionData.keywords) ? actionData.keywords : [];
+  const keywordMatch = keywords
+    .map(keyword => {
+      const index = keyword.toLowerCase().indexOf(queryLower);
+      return index !== -1 ? {
+        keyword: keyword,
+        match: keyword.substring(index, index + query.length)
+      } : null;
+    })
+    .find(match => !!match);
+  return !!keywordMatch ? {
+    data: actionData,
+    keyword: keywordMatch.keyword,
+    match: keywordMatch.match
+  } : undefined;
+}
+
+function buildFilteredActions(actionsData: SpotlightActionData[], query: string): JSX.Element[] {
+  return pipe(
+    actionsData,
+    map(a => filterAction(a, query)),
+    filter(qm => !!qm),
+    map(qm => buildSpotlightAction(qm))
+  );
+}
+
+function highlightMatch(match: QueryMatch): JSX.Element {
+  return <Highlight highlight={match.match}>{match.keyword}</Highlight>
+}
+
+function buildSpotlightAction(matchedAction: QueryMatch): JSX.Element {
+  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label;
+  return <Spotlight.Action onClick={matchedAction.data.onClick}>
+    <Center style={{ marginRight: '8px '}}>
+      {matchedAction.data.leftSection}
+    </Center>
+    <Group wrap="nowrap" w="100%">
+      <div style={{ flex: 1 }}>
+        <Text>
+          {isMatchInLabel ? highlightMatch(matchedAction) : matchedAction.data.label}
+        </Text>
+        {!isMatchInLabel && <Text opacity={0.6} size="xs">{highlightMatch(matchedAction)}</Text>}
+      </div>
+    </Group>
+  </Spotlight.Action>
+}
+
+export const LikeC4Search = memo(() => {
+  const view = useDiagramState(s => s.view)
+  const model = useLikeC4Model(true)
+  const store = useDiagramStoreApi()
+  const [ query, setQuery ] = useState('')
+
+  const getNodeActionsData = (): SpotlightActionData[] => {
+    const { focusOnNode } = store.getState()
+
+    return pipe(
+      view.nodes,
+      filter(n => !!n.title),
+      map(n => ({
+        id: n.id,
+        label: n.title,
+        keywords: [
+          n.title,
+          ...(n.tags ?? []).map(t => `#${t}`),
+          ...(n.description ? [n.description] : [])
+        ].filter(k => k.toLowerCase()),
+        onClick: () => focusOnNode(n.id),
+        leftSection: <IconRectangularPrism />
+      }))
+    );
+  }
+
+  const getViewActionsData = (): SpotlightActionData[] => {
+    const { onNavigateTo } = store.getState()
+    const views = model.views()
+
+    return map(views, v => ({
+      id: v.id,
+      label: v.title ?? v.id,
+      keywords: [
+        v.title ?? v.id,
+        ...(v.tags ?? []),
+        ...(v.view.description ? [v.view.description] : [])
+      ],
+      onClick: () => {
+        store.setState({
+          hoveredNodeId: null,
+          lastOnNavigate: {
+            fromView: view.id,
+            toView: v.id,
+            fromNode: null
+          }
+        })
+        onNavigateTo?.(v.id)
+      },
+      leftSection: <IconSitemap />
+    }));
+  }
+
+  const { nodeActions, viewActions } = useMemo(() => ({
+      nodeActions: buildFilteredActions(getNodeActionsData(), query),
+      viewActions: buildFilteredActions(getViewActionsData(), query)
+    }),
+    [model, store, view, query]
+  );
+
+  const portalProps = useMantinePortalProps();
+  return (
+    <Spotlight.Root
+      {...portalProps}
+      shortcut={['mod + f', 'mod + k']}
+      query={query}
+      onQueryChange={setQuery}
+      scrollable
+      maxHeight={'calc(100vh - 100px)'}
+    >
+      <Spotlight.Search
+        placeholder="Search elements in current view and other views..."
+        leftSection={<IconSearch stroke={1.5} />}
+      />
+      <Spotlight.ActionsList>
+      {nodeActions.length > 0 && <SpotlightActionsGroup label="Elements">{nodeActions}</SpotlightActionsGroup> }
+      {viewActions.length > 0 && <SpotlightActionsGroup label="Views">{viewActions}</SpotlightActionsGroup> }
+      {nodeActions.length == 0 && viewActions.length == 0 && <Spotlight.Empty>Nothing found...</Spotlight.Empty> }
+      </Spotlight.ActionsList>
+    </Spotlight.Root>
+  );
+});

package/src/StaticLikeC4Diagram.tsx

@@ -48,6 +48,7 @@ export function StaticLikeC4Diagram({
       enableFocusMode={false}
       nodesSelectable={false}
       nodesDraggable={false}
+      enableSearch={false}
       {...rest}
     />
   )

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

@@ -278,8 +278,8 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
             <Box
               className={css.cardHeader}
               onPointerDown={e => controls.start(e)}>
-              <Group align="start" justify="space-between" gap={'sm'} mb={'sm'}>
-                <Group align="start" gap={'sm'} style={{ cursor: 'default' }}>
+              <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
+                <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
                   {elementIcon}
                   <Box>
                     <Text
@@ -304,7 +304,7 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                   }}
                 />
               </Group>
-              <Group align="baseline" gap={'sm'}>
+              <Group align="baseline" gap={'sm'} wrap="nowrap">
                 <Box>
                   <SmallLabel>kind</SmallLabel>
                   <Badge radius={'sm'} size="sm" fw={600} color="gray">{element.kind}</Badge>

package/src/state/aligners.ts

@@ -0,0 +1,473 @@
+import { invariant, type NonEmptyArray } from '@likec4/core'
+import type { Rect, XYPosition } from '@xyflow/react'
+import { map, pick, pipe, reduce, sortBy } from 'remeda'
+
+export type GridAlignmentMode = 'Column' | 'Row'
+export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
+
+export abstract class Aligner {
+  abstract computeLayout(nodes: NodeRect[]): void
+  abstract applyPosition(node: NodeRect): Partial<XYPosition>
+}
+
+export class LinearAligner extends Aligner {
+  private alignTo: number | undefined
+  constructor(
+    private getEdgePosition: (nodes: NodeRect[]) => number,
+    private computePosition: (alignTo: number, node: NodeRect) => number,
+    private propertyToEdit: keyof XYPosition
+  ) {
+    super()
+  }
+
+  override computeLayout(nodes: NodeRect[]) {
+    this.alignTo = this.getEdgePosition(nodes)
+  }
+
+  override applyPosition(node: NodeRect): Partial<XYPosition> {
+    return {
+      [this.propertyToEdit]: this.computePosition(this.alignTo!, node)
+    }
+  }
+}
+
+export type NodeRect = Rect & { id: string }
+type Layer = {
+  primaryAxisSize: number
+  nodes: NodeRect[]
+  occupiedSpace: number
+  layout: Layout | null
+}
+type Layout = {
+  nodePositions: Map<string, XYPosition>
+  refLayer: Layer | null
+}
+
+export class GridAligner extends Aligner {
+  private layout: Map<string, XYPosition> = new Map()
+  private axisPreset: {
+    primaryAxisDimension: 'height' | 'width'
+    secondaryAxisDimension: 'height' | 'width'
+    primaryAxisCoord: 'x' | 'y'
+    secondaryAxisCoord: 'x' | 'y'
+  }
+
+  private get primaryAxisCoord() {
+    return this.axisPreset.primaryAxisCoord
+  }
+  private get secondaryAxisCoord() {
+    return this.axisPreset.secondaryAxisCoord
+  }
+  private get primaryAxisDimension() {
+    return this.axisPreset.primaryAxisDimension
+  }
+  private get secondaryAxisDimension() {
+    return this.axisPreset.secondaryAxisDimension
+  }
+
+  constructor(alignmentMode: GridAlignmentMode) {
+    super()
+
+    this.axisPreset = alignmentMode === 'Column'
+      ? {
+        primaryAxisDimension: 'width',
+        secondaryAxisDimension: 'height',
+        primaryAxisCoord: 'x',
+        secondaryAxisCoord: 'y'
+      }
+      : {
+        primaryAxisDimension: 'height',
+        secondaryAxisDimension: 'width',
+        primaryAxisCoord: 'y',
+        secondaryAxisCoord: 'x'
+      }
+  }
+
+  override applyPosition(node: NodeRect): Partial<XYPosition> {
+    return this.layout?.get(node.id) ?? {}
+  }
+
+  override computeLayout(nodes: NodeRect[]) {
+    // Sort by primary axis
+    const sortedNodeRects = pipe(
+      nodes,
+      sortBy(r => r[this.primaryAxisCoord])
+    )
+
+    const layoutRect = this.getLayoutRect(sortedNodeRects)
+
+    const layers = this.getLayers(sortedNodeRects)
+
+    this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects)
+  }
+
+  private getLayoutRect(nodeRects: NodeRect[]): Rect {
+    const x = Math.min(...nodeRects.map(n => n.x))
+    const y = Math.min(...nodeRects.map(n => n.y))
+    const right = Math.max(...nodeRects.map(n => n.x + n.width))
+    const bottom = Math.max(...nodeRects.map(n => n.y + n.height))
+
+    return {
+      x,
+      y,
+      width: right - x,
+      height: bottom - y
+    }
+  }
+
+  private getLayers(sortedNodeRects: NodeRect[]): NonEmptyArray<Layer> {
+    const layers: Layer[] = []
+    let layerEnd = 0
+    let layer = null
+
+    for (let node of sortedNodeRects) {
+      if (!!layer && node[this.primaryAxisCoord] < layerEnd) {
+        layer.nodes.push(node)
+        layer.primaryAxisSize = Math.max(layer.primaryAxisSize, node[this.primaryAxisDimension])
+        layer.occupiedSpace += node[this.secondaryAxisDimension]
+        layerEnd = Math.max(
+          node[this.primaryAxisCoord] + node[this.primaryAxisDimension],
+          layerEnd
+        )
+      } else {
+        layer = {
+          primaryAxisSize: node[this.primaryAxisDimension],
+          nodes: [node],
+          occupiedSpace: node[this.secondaryAxisDimension],
+          layout: null
+        }
+        layers.push(layer)
+        layerEnd = node[this.primaryAxisCoord] + node[this.primaryAxisDimension]
+        continue
+      }
+    }
+
+    layers.forEach(l =>
+      l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])
+    )
+
+    return layers as NonEmptyArray<Layer>
+  }
+
+  private buildLayout(layers: NonEmptyArray<Layer>, layoutRect: Rect, nodeRects: NodeRect[]): Map<string, XYPosition> {
+    const nodeMap = new Map(nodeRects.map(n => [n.id, n]))
+    const layout: [string, XYPosition][] = []
+    const occupiedSpace = layers.reduce((a, b) => a + b.primaryAxisSize, 0)
+    const rowMargin = layers.length > 1
+      ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1)
+      : 0
+
+    // Find the widest layer and layout diagram from there
+    const baseLayerIndex = layers.reduce(
+      (widestLayerIndex, layer, i) =>
+        layers[widestLayerIndex]!.occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex,
+      0
+    )
+    const baseLayer = layers[baseLayerIndex]!
+    const baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
+      (a, layer) => a + layer.primaryAxisSize + rowMargin,
+      layoutRect[this.primaryAxisCoord]
+    )
+    const baseLayerLayout = this.buildLayerLayout(
+      baseLayer,
+      layoutRect,
+      baseLayerPosition,
+      nodeMap,
+      null
+    )
+    baseLayer.layout = baseLayerLayout
+    layout.push(...baseLayerLayout.nodePositions)
+
+    // Layout layers after the base layer
+    let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin
+    let refLayer = baseLayer
+    for (let i = baseLayerIndex + 1; i < layers.length; i++) {
+      const layer = layers[i]!
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer)
+
+      layout.push(...layer.layout.nodePositions)
+      refLayer = layer.layout.refLayer ?? layer
+      placeNextLayerAt += layer.primaryAxisSize + rowMargin
+    }
+
+    // Layout layers before the base layer
+    placeNextLayerAt = baseLayerPosition
+    refLayer = baseLayer
+    for (let i = baseLayerIndex - 1; i >= 0; i--) {
+      const layer = layers[i]!
+      placeNextLayerAt -= layer.primaryAxisSize + rowMargin
+
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer)
+
+      layout.push(...layer.layout.nodePositions)
+      refLayer = layer.layout.refLayer ?? layer
+    }
+
+    return new Map(layout)
+  }
+
+  private buildLayerLayout(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number,
+    nodeMap: Map<string, NodeRect>,
+    refLayer: Layer | null
+  ): Layout {
+    let bestLayerLayout = this.scoreLayout(
+      this.spaceAround(layer, layoutRect, placeNextLayerAt),
+      nodeMap
+    )
+
+    if (layer.nodes.length != 1) {
+      const currentlayerLayout = this.scoreLayout(
+        this.spaceBetween(layer, layoutRect, placeNextLayerAt),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInGaps(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInCells(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    return bestLayerLayout[1]
+  }
+
+  private spaceBetween(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number
+  ): Layout {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
+    const margin = freeSpace / (layer.nodes.length - 1)
+
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord]
+    const result = new Map<string, XYPosition>()
+
+    let i = 0
+    for (let node of layer.nodes) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin
+      i++
+    }
+
+    return { nodePositions: result, refLayer: null }
+  }
+
+  private spaceAround(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number
+  ): Layout {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
+    const margin = freeSpace / (layer.nodes.length + 1)
+
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin
+    const result = new Map<string, XYPosition>()
+
+    for (let node of sortBy(layer.nodes, n => n[this.secondaryAxisCoord])) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin
+    }
+
+    return { nodePositions: result, refLayer: null }
+  }
+
+  private placeInGaps(
+    layer: Layer,
+    placeNextLayerAt: number,
+    refLayer: Layer
+  ): Layout {
+    const result = new Map<string, XYPosition>()
+
+    const nodes = layer.nodes
+    const placementOptions = this.getGapsPositions(refLayer)
+
+    let optionIndex = 0
+    for (let i = 0, node = nodes[i]!; i < nodes.length; i++, node = nodes[i]!) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2
+
+      let bestOffset = Infinity
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex]!
+        const offset = position - nodeCenter
+
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset
+
+          optionIndex++
+        }
+        else {
+          break
+        }
+      }
+
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+    }
+
+    return { nodePositions: result, refLayer }
+  }
+
+  private placeInCells(
+    layer: Layer,
+    placeNextLayerAt: number,
+    refLayer: Layer
+  ): Layout {
+    const result = new Map<string, XYPosition>()
+
+    const nodes = layer.nodes
+    const placementOptions = this.getNodePositions(refLayer)
+
+    let optionIndex = 0
+    for (let i = 0, node = nodes[i]!; i < nodes.length; i++, node = nodes[i]!) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2
+
+      let bestOffset = Infinity
+
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex]!
+        const offset = position - nodeCenter
+
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset
+
+          optionIndex++
+        }
+        else {
+          break
+        }
+      }
+
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+    }
+
+    return { nodePositions: result, refLayer }
+  }
+
+  private scoreLayout(
+    layout: Layout,
+    originalRects: Map<string, NodeRect>
+  ): [number, Layout] {
+    return [
+      pipe(
+        Array.from(layout.nodePositions),
+        map(([id, position]) => {
+          const originalRect = originalRects.get(id)
+          invariant(originalRect, `Could not find original rect for node ${id}`)
+          return [pick(originalRect, ['x', 'y']), position]
+        }),
+        map(([original, suggested]) =>
+          Math.abs(original![this.secondaryAxisCoord] - suggested![this.secondaryAxisCoord])
+        ),
+        reduce((a, b) => a + b, 0)
+      ),
+      layout
+    ]
+  }
+
+  private getGapsPositions(layer: Layer): number[] {
+    const result = []
+    const { layout, nodes } = layer
+
+    invariant(layout, 'Layout of the layer must be computed before calling getGapsPositions')
+
+    for (let i = 1; i < nodes.length; i++) {
+      const previousNode = nodes[i - 1]!
+      const currentNode = nodes[i]!
+      const previousNodePosition = layout.nodePositions.get(previousNode.id)!
+      const currentNodePosition = layout.nodePositions.get(currentNode.id)!
+
+      result.push(
+        (currentNodePosition[this.secondaryAxisCoord]
+          + previousNodePosition[this.secondaryAxisCoord]
+          + previousNode[this.secondaryAxisDimension]) / 2
+      )
+    }
+
+    return result
+  }
+
+  private getNodePositions(layer: Layer): number[] {
+    const result = []
+    const { layout, nodes } = layer
+
+    invariant(layout, 'Layout of the layer must be computed before calling getGapsPositions')
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i]!
+      const nodePosition = layout.nodePositions.get(node.id)!
+
+      result.push(
+        nodePosition[this.secondaryAxisCoord]
+          + node[this.secondaryAxisDimension] / 2
+      )
+    }
+
+    return result
+  }
+}
+
+export function getLinearAligner(mode: LinearAlignmentMode): Aligner {
+  switch (mode) {
+    case 'Left':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.x)),
+        (alignTo, _) => Math.floor(alignTo),
+        'x'
+      )
+    case 'Top':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.y)),
+        (alignTo, _) => Math.floor(alignTo),
+        'y'
+      )
+    case 'Right':
+      return new LinearAligner(
+        nodes => Math.max(...nodes.map(n => n.x + n.width)),
+        (alignTo, node) => Math.floor(alignTo - node.width!),
+        'x'
+      )
+    case 'Bottom':
+      return new LinearAligner(
+        nodes => Math.max(...nodes.map(n => n.y + n.height)),
+        (alignTo, node) => Math.floor(alignTo - node.height!),
+        'y'
+      )
+    case 'Center':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.x + n.width / 2)),
+        (alignTo, node) => Math.floor(alignTo - node.width / 2),
+        'x'
+      )
+    case 'Middle':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.y + n.height / 2)),
+        (alignTo, node) => Math.floor(alignTo - node.height / 2),
+        'y'
+      )
+  }
+}

package/src/state/diagramStore.layout.ts

@@ -0,0 +1,67 @@
+import { nonexhaustive } from '@likec4/core'
+import type { InternalNode } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import { hasAtLeast } from 'remeda'
+import type { DiagramState } from '../hooks'
+import type { XYFlowNode } from '../xyflow/types'
+import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
+import { type Aligner, getLinearAligner, GridAligner, type GridAlignmentMode, type LinearAlignmentMode, type NodeRect } from './aligners'
+
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
+
+export function align(get: () => DiagramState) {
+  return (mode: AlignmentMode) => {
+    const { scheduleSaveManualLayout, xystore } = get()
+    const { nodeLookup, parentLookup } = xystore.getState()
+
+    const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
+    const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
+
+    if (!hasAtLeast(nodesToAlign, 2)) {
+      console.warn('At least 2 nodes must be selected to align')
+      return
+    }
+    const constraints = createLayoutConstraints(xystore, nodesToAlign)
+
+    const aligner = getAligner(mode)
+
+    constraints.onMove(nodes => {
+      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
+
+      nodes.forEach(({ rect, node }) => {
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node))
+        }
+      })
+    })
+
+    scheduleSaveManualLayout()
+  }
+}
+
+function toNodeRect(node: InternalNode<XYFlowNode>): NodeRect {
+  return {
+    ...node.internals.positionAbsolute,
+    id: node.id,
+    width: getNodeDimensions(node).width,
+    height: getNodeDimensions(node).height
+  }
+}
+
+function getAligner(mode: AlignmentMode): Aligner {
+  switch (mode) {
+    case 'Left':
+    case 'Right':
+    case 'Top':
+    case 'Bottom':
+    case 'Center':
+    case 'Middle':
+      return getLinearAligner(mode)
+    case 'Column':
+    case 'Row':
+      return new GridAligner(mode)
+    default:
+      nonexhaustive(mode)
+  }
+}

package/src/state/diagramStore.ts

@@ -49,6 +49,7 @@ import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
 import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
+import { align, type AlignmentMode } from './diagramStore.layout'
 
 type RequiredOrNull<T> = {
   [P in keyof T]-?: NonNullable<T[P]> | null
@@ -73,6 +74,7 @@ export type DiagramInitialState = {
   enableElementDetails: boolean
   enableRelationshipBrowser: boolean
   enableRelationshipDetails: boolean
+  enableSearch: boolean
   renderIcon: ElementIconRenderer | null
   whereFilter: WhereOperator<string, string> | null
   // If Dynamic View
@@ -85,8 +87,6 @@ export type DiagramInitialState = {
   getContainer: () => HTMLDivElement | null
 } & RequiredOrNull<LikeC4DiagramEventHandlers>
 
-type AlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
-
 const StringSet = Set<string>
 
 export type DiagramState = Simplify<
@@ -134,7 +134,7 @@ export type DiagramState = Simplify<
     lastOnNavigate: null | {
       fromView: ViewID
       toView: ViewID
-      fromNode: NodeId
+      fromNode: NodeId | null
     }
     navigationHistory: Array<{
       viewId: ViewID
@@ -1068,70 +1068,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               return vector(v).mul(scale).add(nodeCenter)
             }
           },
-          align: (mode: AlignmentMode) => {
-            const { scheduleSaveManualLayout, xystore } = get()
-            const { nodeLookup, parentLookup } = xystore.getState()
-
-            const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
-            const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
-
-            if (!hasAtLeast(nodesToAlign, 2)) {
-              console.warn('At least 2 nodes must be selected to align')
-              return
-            }
-            const constraints = createLayoutConstraints(xystore, nodesToAlign)
-
-            let getEdgePosition: (nodes: InternalNode<XYFlowNode>[]) => number
-            let getPosition: (alignTo: number, node: InternalNode<XYFlowNode>) => number
-            let propertyToEdit: keyof XYPosition
-
-            switch (mode) {
-              case 'Left':
-                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.x))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, _) => Math.floor(alignTo)
-                break
-              case 'Top':
-                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.y))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, _) => Math.floor(alignTo)
-                break
-              case 'Right':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, node) => Math.floor(alignTo - node.width!)
-                break
-              case 'Bottom':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, node) => Math.floor(alignTo - node.height!)
-                break
-              case 'Center':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width / 2))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).width / 2)
-                break
-              case 'Middle':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height / 2))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).height / 2)
-                break
-            }
-
-            constraints.onMove((nodes) => {
-              const alignTo = getEdgePosition(nodes.map(({ node }) => node))
-
-              nodes.forEach(({ rect, node }) => {
-                rect.positionAbsolute = { ...rect.positionAbsolute, [propertyToEdit]: getPosition(alignTo, node) }
-              })
-            })
-
-            scheduleSaveManualLayout()
-          }
+          align: align(get)
         } satisfies DiagramState),
         {
           name: `${storeDevId} - ${props.view.id}`,

package/src/ui/top-left/ManualLayoutToolsButton.tsx

@@ -6,6 +6,7 @@ import {
   IconLayoutAlignMiddle,
   IconLayoutAlignRight,
   IconLayoutAlignTop,
+  IconLayoutBoardSplit,
   IconLayoutCollage,
   IconRouteOff
 } from '@tabler/icons-react'
@@ -53,6 +54,13 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
       <PopoverDropdown p={0}>
         <Group gap={'xs'}>
           <ActionIconGroup pos={'relative'}>
+            <Action
+              label="Align in columns"
+              icon={<IconLayoutBoardSplit />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Column')
+              }} />
             <Action
               label="Align left"
               icon={<IconLayoutAlignLeft />}
@@ -74,6 +82,13 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
                 e.stopPropagation()
                 store.getState().align('Right')
               }} />
+            <Action
+              label="Align in rows"
+              icon={<IconLayoutBoardSplit style={{ transform: 'rotate(90deg)' }} />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Row')
+              }} />
             <Action
               label="Align top"
               icon={<IconLayoutAlignTop />}

package/src/ui/top-left/TopLeftPanel.tsx

@@ -18,7 +18,8 @@ import {
   IconChevronRight,
   IconFileSymlink,
   IconFocusCentered,
-  IconMenu2
+  IconMenu2,
+  IconSearch
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
@@ -30,6 +31,7 @@ import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import * as css from './styles.css'
+import { openSpotlight } from '@mantine/spotlight'
 
 const historySelector = (s: DiagramState) => ({
   showBurgerMenu: !!s.onBurgerMenuClick,
@@ -138,6 +140,7 @@ const LayoutDriftNotification = (props: PopoverProps) => (
 export const TopLeftPanel = () => {
   const store = useDiagramStoreApi()
   const {
+    enableSearch,
     showNavigationButtons,
     showFitDiagram,
     showLayoutDriftWarning,
@@ -150,6 +153,7 @@ export const TopLeftPanel = () => {
     const isNotFocused = isNullish(s.focusedNodeId)
     const isNotActive = isNotWalkthrough && isNotFocused
     return ({
+      enableSearch: s.enableSearch,
       showNavigationButtons: !!s.onBurgerMenuClick || (s.showNavigationButtons && !!s.onNavigateTo),
       showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
       showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
@@ -174,6 +178,15 @@ export const TopLeftPanel = () => {
         gap={'xs'}>
         {showNavigationButtons && <BackwardForwardButtons />}
         <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+          {enableSearch && (
+            <Tooltip label="Search">
+              <ActionIcon
+                onClick={() => openSpotlight()}
+                >
+                <IconSearch />
+              </ActionIcon>
+            </Tooltip>
+          )}
           {showGoToSource && (
             <Tooltip label="Open source" {...portalProps}>
               <ActionIcon

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,7 +1,7 @@
 import { type ThemeColor } from '@likec4/core'
-import { ActionIcon, Box, Text as MantineText, Tooltip } from '@mantine/core'
+import { ActionIcon, Box, Group, Text as MantineText, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconId, IconZoomScan } from '@tabler/icons-react'
+import { IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
@@ -54,21 +54,24 @@ const VariantsRoot = {
   }
 } satisfies Variants
 
-const VariantsNavigate = {
+const VariantsNavigateBtn = {
   idle: {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
     opacity: 0.5,
-    translateX: '-50%',
-    originY: 0.2
+    originY: 0.5
   },
   selected: {},
   hovered: {
     '--ai-bg': 'var(--ai-bg-hover)',
-    translateX: '-50%',
     scale: 1.35,
     opacity: 1
-  },
+  }
+} satisfies Variants
+VariantsNavigateBtn['selected'] = VariantsNavigateBtn['hovered']
+
+const VariantsNavigate = {
+  ...VariantsNavigateBtn,
   'hovered:navigate': {
     scale: 1.42
   },
@@ -76,7 +79,16 @@ const VariantsNavigate = {
     scale: 1.15
   }
 } satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate['hovered']
+
+const VariantRealationships = {
+  ...VariantsNavigateBtn,
+  'hovered:relationships': {
+    scale: 1.42
+  },
+  'tap:relationships': {
+    scale: 1.15
+  }
+} satisfies Variants
 
 const VariantsDetailsBtn = {
   idle: {
@@ -127,6 +139,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     isNavigable,
     isInteractive,
     enableElementDetails,
+    enableRelationshipBrowser,
     triggerOnNavigateTo,
     openOverlay,
     isInActiveOverlay,
@@ -136,10 +149,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails
+    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || s.enableRelationshipBrowser
       || (!!s.onNavigateTo && !!element.navigateTo),
     isNavigable: (!!s.onNavigateTo && !!element.navigateTo),
     enableElementDetails: s.enableElementDetails,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
     triggerOnNavigateTo: s.triggerOnNavigateTo,
     openOverlay: s.openOverlay,
     isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
@@ -195,6 +209,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     openOverlay({ elementDetails: element.id })
   }, [openOverlay, element.id])
 
+  const onOpenRelationships = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ relationshipsOf: element.id })
+  }, [openOverlay, element.id])
+
   return (
     <>
       {isToolbarVisible && (
@@ -266,21 +285,40 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           </Box>
         </Box>
         {/* {isHovercards && element.links && <ElementLink element={element} />} */}
-        {isNavigable && (
-          <ActionIcon
-            component={m.div}
-            variants={VariantsNavigate}
-            data-animate-target="navigate"
-            className={clsx('nodrag nopan', css.navigateBtn)}
-            radius="md"
-            style={{ zIndex: 100 }}
-            role="button"
-            onClick={onNavigateTo}
-            onDoubleClick={stopPropagation}
-            {...isInteractive && animateHandlers}
-          >
-            <IconZoomScan style={{ width: '75%' }} />
-          </ActionIcon>
+
+        {(enableRelationshipBrowser || isNavigable) && (
+          <Group className={css.navigateBtnBox} align="center">
+            {enableRelationshipBrowser && (
+              <ActionIcon
+                component={m.div}
+                variants={VariantRealationships}
+                data-animate-target="relationships"
+                className={clsx('nodrag nopan', css.navigateBtn)}
+                radius="md"
+                role="button"
+                onClick={onOpenRelationships}
+                onDoubleClick={stopPropagation}
+                {...isInteractive && animateHandlers}
+              >
+                <IconTransform style={{ width: '75%' }} />
+              </ActionIcon>
+            )}
+            {isNavigable && (
+              <ActionIcon
+                component={m.div}
+                variants={VariantsNavigate}
+                data-animate-target="navigate"
+                className={clsx('nodrag nopan', css.navigateBtn)}
+                radius="md"
+                role="button"
+                onClick={onNavigateTo}
+                onDoubleClick={stopPropagation}
+                {...isInteractive && animateHandlers}
+              >
+                <IconZoomScan style={{ width: '75%' }} />
+              </ActionIcon>
+            )}
+          </Group>
         )}
         {enableElementDetails && (
           <Tooltip

package/src/xyflow/nodes/element/element.css.ts

@@ -354,16 +354,25 @@ const btn = style({
   }
 })
 
-export const navigateBtn = style([btn, {
+export const navigateBtnBox = style({
+  zIndex: 100,
   position: 'absolute',
   left: '50%',
-  bottom: 0,
+  bottom: 2,
+  transform: 'translate(-50%, 0%)',
+  gap: 0,
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       bottom: 4
     }
   }
-}])
+})
+globalStyle(`:where(.react-flow__node:hover) ${navigateBtnBox}`, {
+  transitionDelay: '20ms',
+  gap: 16
+})
+
+export const navigateBtn = style([btn, {}])
 
 export const detailsBtn = style([btn, {
   position: 'absolute',