@likec4/diagram 1.12.0 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -30,9 +30,9 @@
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.12.0",
+    "@likec4/core": "1.12.1",
     "@lume/kiwi": "^0.4.4",
-    "@mantine/vanilla-extract": "7.12.2",
+    "@mantine/vanilla-extract": "7.13.2",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.19.0",
     "@vanilla-extract/css": "^1.16.0",
@@ -45,22 +45,22 @@
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.11.1",
     "khroma": "^2.1.0",
     "remeda": "^2.14.0",
     "type-fest": "4.26.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.12.2",
-    "@mantine/hooks": "^7.12.2",
+    "@mantine/core": "^7.13.2",
+    "@mantine/hooks": "^7.13.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.12.0",
-    "@mantine/core": "7.12.2",
-    "@mantine/hooks": "7.12.2",
+    "@likec4/tsconfig": "1.12.1",
+    "@mantine/core": "7.13.2",
+    "@mantine/hooks": "7.13.2",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.4",

package/src/LikeC4CustomColors.tsx

@@ -2,6 +2,7 @@ import { type ThemeColorValues } from '@likec4/core'
 import { entries } from 'remeda'
 import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
+import { useMantineStyleNonce } from '@mantine/core'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
@@ -28,10 +29,12 @@ export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsPropertie
   const styles = entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')
+  
+  const nonce = useMantineStyleNonce()?.()
 
   return (
     <>
-      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} />
+      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} {...(nonce && { nonce })} />
     </>
   )
 }

package/src/LikeC4Diagram.tsx

@@ -2,7 +2,7 @@ import type { DiagramView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { domAnimation, LazyMotion } from 'framer-motion'
+import { domMax, LazyMotion } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { rootClassName } from './globals.css'
 import { useDiagramState } from './hooks/useDiagramState'
@@ -76,7 +76,7 @@ export function LikeC4Diagram({
 
   return (
     <EnsureMantine>
-      <LazyMotion features={domAnimation} strict>
+      <LazyMotion features={domMax} strict>
         <XYFlowProvider
           fitView={fitView}
           {...initialRef.current}

package/src/LikeC4ModelProvider.tsx

@@ -1,48 +1,20 @@
-import { LikeC4Model } from '@likec4/core'
-import { useCustomCompareMemo } from '@react-hookz/web'
+import type { LikeC4Model } from '@likec4/core'
 import { type PropsWithChildren } from 'react'
-import type { RequireExactlyOne } from 'type-fest'
-import { depsShallowEqual } from './hooks/useUpdateEffect'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
-import { useLikeC4Model } from './likec4model/useLikeC4Model'
 
-export type LikeC4ModelProviderProps = PropsWithChildren<
-  RequireExactlyOne<{
-    likec4model: LikeC4Model
-    layouted: LikeC4Model.Layouted.SourceModel
-    computed: LikeC4Model.Computed.SourceModel
-  }>
->
+export type LikeC4ModelProviderProps = PropsWithChildren<{
+  likec4model: LikeC4Model
+}>
 
 /**
  * Ensures LikeC4Model context
  */
 export function LikeC4ModelProvider({
   children,
-  ...props
+  likec4model
 }: LikeC4ModelProviderProps) {
-  const model = useLikeC4Model()
-
-  if (model) {
-    return <>{children}</>
-  }
-
-  const value = useCustomCompareMemo(
-    () => {
-      if (props.likec4model) {
-        return props.likec4model
-      }
-      if (props.layouted) {
-        return LikeC4Model.layouted(props.layouted)
-      }
-      return LikeC4Model.computed(props.computed)
-    },
-    [props.likec4model ?? props.layouted ?? props.computed],
-    depsShallowEqual
-  )
-
   return (
-    <LikeC4ModelContext.Provider value={value}>
+    <LikeC4ModelContext.Provider value={likec4model}>
       {children}
     </LikeC4ModelContext.Provider>
   )

package/src/index.ts

@@ -1,7 +1,13 @@
 import '@xyflow/react/dist/style.css'
 
 export { LikeC4Diagram } from './LikeC4Diagram'
-export * from './likec4model/useLikeC4Model'
+export {
+  useLikeC4DiagramView,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views
+} from './likec4model/useLikeC4Model'
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 

package/src/likec4model/useLikeC4Model.ts

@@ -34,12 +34,15 @@ export function useLikeC4ViewModel(viewId: LiteralUnion<ViewID, string>): LikeC4
   return useLikeC4Model(true).view(viewId)
 }
 
+/**
+ * Parsed view, computed or layouted
+ */
 export function useLikeC4View(viewId: LiteralUnion<ViewID, string>): ComputedView | DiagramView | null {
   const model = useLikeC4Model(true)
   try {
     return model.view(viewId).view
   } catch (error) {
-    console.error(error)
+    console.warn(error)
     return null
   }
 }
@@ -49,7 +52,7 @@ export function useLikeC4DiagramView(viewId: LiteralUnion<ViewID, string>): Diag
   try {
     return model.view(viewId).view
   } catch (error) {
-    console.error(error)
+    console.warn(error)
     return null
   }
 }

package/src/ui/DiagramTitlePanel.tsx

@@ -70,6 +70,7 @@ export default function DiagramTitlePanel() {
                 onClick={toggle}
                 fw={500}
                 fz={'sm'}
+                tabIndex={-1}
               >
                 {title}
               </Button>
@@ -87,6 +88,7 @@ export default function DiagramTitlePanel() {
                   variant={'subtle'}
                   color="gray"
                   onClick={toggle}
+                  tabIndex={-1}
                 >
                   <IconMenu size={11} opacity={0.7} />
                 </Button>
@@ -122,8 +124,12 @@ export default function DiagramTitlePanel() {
               {description && (
                 <Spoiler
                   maxHeight={42}
-                  showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
-                  hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
+                  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"

package/src/ui/OptionsPanel.tsx

@@ -8,7 +8,10 @@ import { useDiagramState } from '../hooks/useDiagramState'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-export default function OptionsPanel() {
+/**
+ * @deprecated
+ */
+export function OptionsPanel() {
   const { isFocused, viewId } = useDiagramState(s => ({
     viewId: s.view.id,
     isFocused: s.focusedNodeId !== null || s.activeWalkthrough !== null

package/src/ui/notation/NotationPanel.tsx

@@ -176,7 +176,7 @@ export function NotationPanel() {
           <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
             <ActionIcon
               size={'lg'}
-              variant="light"
+              variant="default"
               color="gray"
               radius={'md'}
               onClick={() => setCollapsed(false)}

package/src/ui/options/NodeOptions.tsx

@@ -57,6 +57,9 @@ export type ColorKey = typeof colors[0]['key']
 
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
+/**
+ * @deprecated
+ */
 export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeIds }) => {
   // export function NodeOptions(props: { nodes: XYFlowNode[] }) {
   const diagramApi = useDiagramStoreApi()

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

@@ -1,46 +1,64 @@
 import type { AutoLayoutDirection } from '@likec4/core'
 import {
-  ActionIcon as MantineActionIcon,
   Box,
+  Flex,
   FloatingIndicator,
-  Group,
   Popover,
   PopoverDropdown,
   type PopoverProps,
   PopoverTarget,
-  Stack,
   Text,
-  TooltipGroup
+  UnstyledButton
 } from '@mantine/core'
-import { IconArrowBigDownLines, IconLayoutDashboard } from '@tabler/icons-react'
+import { clampUseMovePosition, useMove, type UseMovePosition, useUncontrolled } from '@mantine/hooks'
+import { useDebouncedCallback } from '@react-hookz/web'
+import { IconLayoutDashboard } from '@tabler/icons-react'
 import { useState } from 'react'
-import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
 
-const DirectionActionIcon = MantineActionIcon.withProps({
-  size: 'md',
-  variant: 'subtle',
-  color: 'gray'
+const selector = (state: DiagramState) => ({
+  viewId: state.view.id,
+  autoLayout: state.view.autoLayout
 })
 
 export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   const store = useDiagramStoreApi()
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
   const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
-  const autoLayout = useDiagramState(s => s.view.autoLayout)
+  const {
+    autoLayout,
+    viewId
+  } = useDiagramState(selector)
 
   const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
     controlsRefs[name] = node
     setControlsRefs(controlsRefs)
   }
 
-  const setAutoLayout = (layout: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
+  const setAutoLayout = (direction: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
     store.getState().onChange?.({
       change: {
         op: 'change-autolayout',
-        layout
+        layout: {
+          ...autoLayout,
+          direction
+        }
+      }
+    })
+  }
+
+  const setSpacing = (nodeSep: number, rankSep: number) => {
+    store.getState().onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout: {
+          ...autoLayout,
+          nodeSep,
+          rankSep
+        }
       }
     })
   }
@@ -64,7 +82,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
           </ActionIcon>
         </Tooltip>
       </PopoverTarget>
-      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={4}>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6}>
         <Box pos={'relative'} ref={setRootRef}>
           <FloatingIndicator
             target={controlsRefs[autoLayout.direction]}
@@ -74,46 +92,91 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
           <Box mb={10}>
             <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
           </Box>
-          <TooltipGroup openDelay={100}>
-            <Stack align="center" gap={1}>
-              <Tooltip label="Top to Bottom">
-                <DirectionActionIcon
-                  className={css.autolayoutIcon}
-                  ref={setControlRef('TB')}
-                  onClick={setAutoLayout('TB')}>
-                  <IconArrowBigDownLines />
-                </DirectionActionIcon>
-              </Tooltip>
-              <Group gap={30}>
-                <Tooltip label="Left to Right">
-                  <DirectionActionIcon
-                    className={css.autolayoutIcon}
-                    ref={setControlRef('LR')}
-                    onClick={setAutoLayout('LR')}>
-                    <IconArrowBigDownLines style={{ rotate: '270deg' }} />
-                  </DirectionActionIcon>
-                </Tooltip>
-                <Tooltip label="Right to Left">
-                  <DirectionActionIcon
-                    className={css.autolayoutIcon}
-                    ref={setControlRef('RL')}
-                    onClick={setAutoLayout('RL')}>
-                    <IconArrowBigDownLines style={{ rotate: '90deg' }} />
-                  </DirectionActionIcon>
-                </Tooltip>
-              </Group>
-              <Tooltip label="Bottom to Top">
-                <DirectionActionIcon
-                  className={css.autolayoutIcon}
-                  ref={setControlRef('BT')}
-                  onClick={setAutoLayout('BT')}>
-                  <IconArrowBigDownLines style={{ rotate: '180deg' }} />
-                </DirectionActionIcon>
-              </Tooltip>
-            </Stack>
-          </TooltipGroup>
+          <Flex gap={2} wrap={'wrap'} justify={'stretch'} maw={160}>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('TB')} onClick={setAutoLayout('TB')}>
+              Top-Bottom
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('BT')} onClick={setAutoLayout('BT')}>
+              Bottom-Top
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('LR')} onClick={setAutoLayout('LR')}>
+              Left-Right
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('RL')} onClick={setAutoLayout('RL')}>
+              Right-Left
+            </UnstyledButton>
+          </Flex>
+          <Box my={10}>
+            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Spacing:</Text>
+          </Box>
+          <SpacingSliders
+            isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
+            key={viewId}
+            nodeSep={autoLayout.nodeSep}
+            rankSep={autoLayout.rankSep}
+            onChange={setSpacing}
+          />
         </Box>
       </PopoverDropdown>
     </Popover>
   )
 }
+
+const SpacingSliders = ({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange
+}: {
+  isVertical: boolean
+  nodeSep: number | undefined
+  rankSep: number | undefined
+  onChange: (nodeSep: number, rankSep: number) => void
+}) => {
+  if (!isVertical) {
+    ;[nodeSep, rankSep] = [rankSep, nodeSep]
+  }
+
+  const propagateChange = useDebouncedCallback(
+    ({ x, y }: UseMovePosition) => {
+      if (!isVertical) {
+        ;[x, y] = [y, x]
+      }
+      onChange(Math.round(x * 500), Math.round(y * 500))
+    },
+    [onChange, isVertical],
+    150,
+    2000
+  )
+
+  const [value, setValue] = useUncontrolled({
+    defaultValue: clampUseMovePosition({
+      x: (nodeSep ?? 250) / 500,
+      y: (rankSep ?? 250) / 500
+    }),
+    onChange: propagateChange
+  })
+
+  const { ref } = useMove(setValue)
+
+  let nodeSepValue = Math.round(value.x * 500)
+  let rankSepValue = Math.round(value.y * 500)
+  if (!isVertical) {
+    ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
+  }
+
+  return (
+    <Box ref={ref} className={css.spacingSliderBody} pt={'100%'}>
+      <Box
+        className={css.spacingSliderThumb}
+        style={{
+          left: `${value.x * 100}%`,
+          top: `${value.y * 100}%`
+        }}
+      />
+      <Box pos={'absolute'} left={2} bottom={2}>
+        <Text component="div" fz={8} c={'dimmed'} fw={500}>{rankSepValue}, {nodeSepValue}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/ui/top-left/styles.css.ts

@@ -1,3 +1,4 @@
+import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
 import { mantine, vars } from '../../theme-vars'
@@ -34,6 +35,15 @@ globalStyle(`${autolayoutIcon} .tabler-icon`, {
   height: '65%'
 })
 
+export const autolayoutButton = style({
+  flex: '1 1 40%',
+  textAlign: 'center',
+  fontWeight: 500,
+  padding: '4px 6px',
+  fontSize: rem(11),
+  zIndex: 1
+})
+
 export const autolayoutIndicator = style({
   background: mantine.colors.gray[2],
   borderRadius: mantine.radius.sm,
@@ -45,3 +55,24 @@ export const autolayoutIndicator = style({
     }
   }
 })
+
+export const spacingSliderBody = style({
+  position: 'relative',
+  borderRadius: mantine.radius.sm,
+  background: mantine.colors.gray[3],
+  boxShadow: 'inset 1px 1px 3px 0px #00000024',
+  selectors: {
+    [`:where([data-mantine-color-scheme="dark"]) &`]: {
+      background: mantine.colors.dark[7]
+    }
+  }
+})
+
+export const spacingSliderThumb = style({
+  position: 'absolute',
+  width: 8,
+  height: 8,
+  border: `2px solid ${mantine.colors.gray[5]}`,
+  borderRadius: 3,
+  transform: 'translate(-50%, -50%)'
+})

package/src/xyflow/XYFlow.tsx

@@ -1,6 +1,6 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useEffect, useMemo, useState } from 'react'
+import { type CSSProperties, type PropsWithChildren, useMemo } from 'react'
 import { useDiagramState } from '../hooks/useDiagramState'
 import { useXYStoreApi } from '../hooks/useXYFlow'
 import type { DiagramState } from '../state/diagramStore'
@@ -46,8 +46,8 @@ const selector = (s: DiagramState) => ({
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
-  hasOnNavigateTo: !!s.onNavigateTo,
-  hasOnNodeClick: !!s.onNodeClick,
+  // hasOnNavigateTo: !!s.onNavigateTo,
+  // hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
   hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
@@ -79,15 +79,13 @@ export function XYFlow({
     fitViewPadding,
     pannable,
     zoomable,
-    hasOnNodeClick,
-    hasOnNavigateTo,
     hasOnNodeContextMenu,
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
     translateX,
     translateY
   } = useDiagramState(selector, shallowEqual)
-  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
+  // const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
   const layoutConstraints = useLayoutConstraints()
   const handlers = useXYFlowEvents()
 
@@ -104,14 +102,14 @@ export function XYFlow({
       if (x !== roundedX || y !== roundedY) {
         xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
-      setZoomOnDoubleClick(zoomable && zoom < 0.75)
+      // setZoomOnDoubleClick(zoomable && zoom < 0.75)
     }
   })
 
-  useEffect(() => {
-    const zoom = xyflowApi.getState().transform[2]
-    setZoomOnDoubleClick(zoomable && zoom < 0.75)
-  }, [])
+  // useEffect(() => {
+  //   const zoom = xyflowApi.getState().transform[2]
+  //   setZoomOnDoubleClick(zoomable && zoom < 0.75)
+  // }, [])
 
   return (
     <ReactFlow<XYFlowNode, XYFlowEdge>
@@ -127,7 +125,7 @@ export function XYFlow({
       {...(!zoomable && {
         zoomActivationKeyCode: null
       })}
-      zoomOnDoubleClick={zoomOnDoubleClick}
+      zoomOnDoubleClick={false}
       maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
@@ -154,7 +152,7 @@ export function XYFlow({
         selectionKeyCode: null
       })}
       elementsSelectable={nodesSelectable}
-      nodesFocusable={nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo}
+      nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
       nodesDraggable={nodesDraggable}
       {...nodesDraggable && {

package/src/xyflow/XYFlowEvents.tsx

@@ -116,7 +116,6 @@ export function useXYFlowEvents() {
         )
       },
       onNodeClick: (event, xynode) => {
-        console.log('onNodeClick')
         const {
           focusedNodeId,
           fitDiagram,
@@ -137,6 +136,9 @@ export function useXYFlowEvents() {
 
         if (clickedRecently && !!onOpenSourceElement) {
           onOpenSourceElement(xynode.data.element.id)
+          if (!onNodeClick) {
+            event.stopPropagation()
+          }
         }
 
         if (enableFocusMode || nodesSelectable) {
@@ -156,10 +158,9 @@ export function useXYFlowEvents() {
               break
             }
           }
-        }
-        if (!onNodeClick) {
-          // user did not provide a custom handler, stop propagation
-          event.stopPropagation()
+          if (!onNodeClick) {
+            event.stopPropagation()
+          }
         }
         onNodeClick?.(
           xynode.data.element,

package/src/xyflow/XYFlowInner.tsx

@@ -7,7 +7,6 @@ import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import NotationPanel from '../ui/notation'
-import OptionsPanel from '../ui/OptionsPanel'
 import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
@@ -27,12 +26,10 @@ export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
     showNotations,
     isDynamicView,
     isDynamicViewActive,
-    readonly,
     enableDynamicViewWalkthrough
   } = useDiagramState(s => ({
     showNotations: s.showNotations,
     isDynamicView: s.isDynamicView,
-    readonly: s.readonly,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
     isDynamicViewActive: isNonNullish(s.activeWalkthrough)
   }))
@@ -45,7 +42,6 @@ export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
       {isBgWithPattern && <XYFlowBackground background={background} />}
       {controls && <Controls showInteractive={false} position={'top-center'} />}
       <TopLeftPanel />
-      {!readonly && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
       {showNotations && <NotationPanel />}

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -1,13 +1,16 @@
+import type { ThemeColor } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { clamp } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { CompoundToolbar } from '../shared/Toolbar'
 import * as css from './CompoundNode.css'
 
 type CompoundNodeProps = Pick<
@@ -17,7 +20,7 @@ type CompoundNodeProps = Pick<
 
 const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   prev.id === next.id
-  // && prev.selected === next.selected
+  && eq(prev.selected ?? false, next.selected ?? false)
   // && eq(prev.width, next.width)
   // && eq(prev.height, next.height)
   && eq(prev.data.element, next.data.element)
@@ -25,6 +28,7 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
 
 export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
   id,
+  selected = false,
   data: {
     element
   }
@@ -41,15 +45,28 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     max: 50
   })
 
-  const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
+  const { isEditable, isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
+    isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
+
+  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
+
   return (
     <>
+      {isToolbarVisible && (
+        <CompoundToolbar
+          isVisible={isToolbarVisible}
+          element={element}
+          align="start"
+          onColorPreview={setPreviewColor} />
+      )}
       <Handle
         type="target"
         position={Position.Top}
@@ -64,7 +81,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
         )}
         mod={{
           'compound-depth': depth,
-          'likec4-color': color,
+          'likec4-color': previewColor ?? color,
           hovered: isHovered
         }}
       >

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

@@ -52,6 +52,7 @@ export function ElementLink({
         }}>
         <HoverCardTarget>
           <UnstyledButton
+            tabIndex={-1}
             className={clsx('nodrag nopan', trigger)}
             autoFocus={false}>
             <IconLink size={12} />

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

@@ -1,19 +1,42 @@
-import type { DiagramNode } from '@likec4/core'
+import { defaultTheme, type DiagramNode, type ThemeColor } from '@likec4/core'
 import { Text as MantineText } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
-import { memo } from 'react'
-import { isNumber, isTruthy } from 'remeda'
+import { memo, useState } from 'react'
+import { isNumber, isTruthy, keys } from 'remeda'
 import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { ElementToolbar } from '../shared/Toolbar'
 import * as css from './element.css'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements
+
+export const themedColors = [
+  { key: 'primary', value: primary.fill },
+  { key: 'secondary', value: secondary.fill },
+  { key: 'muted', value: muted.fill }
+] satisfies Array<{ key: ThemeColor; value: string }>
+
+export const colors = keys(otherColors).map(key => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}))
+
+export type ThemeColorKey = typeof themedColors[0]['key']
+export type ColorKey = typeof colors[0]['key']
+
 const Text = MantineText.withProps({
   component: 'div'
 })
@@ -89,15 +112,21 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   height
 }) {
   const store = useDiagramStoreApi()
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState(s => ({
+  const { isEditable, isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+    isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
+    isInteractive: s.nodesDraggable || s.nodesSelectable || (!!s.onNavigateTo && !!element.navigateTo),
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo,
-    hasGoToSource: !!s.onOpenSourceElement
+    hasOnNavigateTo: !!s.onNavigateTo
+    // hasGoToSource: !!s.onOpenSourceElement
   }))
   const isNavigable = hasOnNavigateTo && !!element.navigateTo
+  // const isIdle = useIdle(300)
+  // const [isToolbarVisible] = useDebouncedValue(isEditable && (isHovered || (import.meta.env.DEV && selected)), isIdle ? 50 : 350)
+  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
@@ -120,52 +149,17 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
 
   const elementIcon = ElementIcon({ node: element, store })
 
+  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
+
   return (
     <>
-      {
-        /* <NodeToolbar isVisible={isTollbarVisible} offset={0}>
-        <ActionIconGroup>
-          <ActionIcon
-            size={'md'}
-            variant="default"
-            color="dark"
-            onClick={e => {
-              e.stopPropagation()
-              store.getState().onOpenSourceElement?.(element.id)
-            }}>
-            <IconFileSymlink
-              // stroke={1.2}
-              style={{
-                width: '70%',
-                height: '70%'
-              }} />
-          </ActionIcon>
-          <ActionIcon
-          size={'md'}
-            variant="default"
-            color="dark"
-          >
-              <ColorSwatch
-                color={defaultTheme.elements[element.color as ThemeColor]?.fill}
-                size={16}
-                withShadow
-                style={{ color: '#fff', cursor: 'pointer' }}
-              />
-            </ActionIcon>
-            <ActionIcon
-          size={'md'}
-            variant="default"
-            color="dark"
-            w={'fit-content'}
-            fz={'xs'}
-          >
-              {element.shape}
-            </ActionIcon>
-
-        </ActionIconGroup>
-      </NodeToolbar> */
-      }
-
+      {isToolbarVisible && (
+        <ElementToolbar
+          element={element}
+          isVisible={isToolbarVisible}
+          onColorPreview={setPreviewColor}
+        />
+      )}
       <Handle
         type="target"
         position={Position.Top}
@@ -180,11 +174,12 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           'likec4-element-node'
         ])}
         data-hovered={!dragging && isHovered}
-        data-likec4-color={element.color}
+        data-likec4-color={previewColor ?? element.color}
         data-likec4-shape={element.shape}
         variants={variants}
         initial={false}
         animate={animate}
+        tabIndex={-1}
         {...(isInteractive && {
           whileTap: dragging ? animate : 'tap'
         })}

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -0,0 +1,426 @@
+import {
+  type BorderStyle,
+  defaultTheme,
+  type Element,
+  ElementShapes,
+  type Fqn,
+  type NonEmptyArray,
+  type ThemeColor,
+  type ViewChange
+} from '@likec4/core'
+import {
+  ActionIcon,
+  Box,
+  Button,
+  CheckIcon,
+  ColorSwatch,
+  Divider,
+  Flex,
+  Group,
+  keys,
+  Menu,
+  MenuDropdown,
+  MenuItem,
+  MenuTarget,
+  Paper,
+  Popover,
+  PopoverDropdown,
+  type PopoverProps,
+  PopoverTarget,
+  rem,
+  SegmentedControl,
+  Slider,
+  Space,
+  Stack,
+  Text,
+  Tooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconCheck, IconFileSymlink, IconSelector } from '@tabler/icons-react'
+import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useUpdateEffect } from '../../../hooks'
+
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements
+
+const themedColors = [
+  { key: 'primary', value: primary.fill },
+  { key: 'secondary', value: secondary.fill },
+  { key: 'muted', value: muted.fill }
+] satisfies Array<{ key: ThemeColor; value: string }>
+
+const colors = keys(otherColors).map(key => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}))
+
+type ThemeColorKey = typeof themedColors[0]['key']
+type ColorKey = typeof colors[0]['key']
+
+const stopEventPropagation = (e: React.MouseEvent) => e.stopPropagation()
+
+type ToolbarProps = NodeToolbarProps & {
+  element: Element
+  onColorPreview: (color: ThemeColor | null) => void
+}
+
+type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void
+
+export function CompoundToolbar({
+  element,
+  onColorPreview,
+  ...props
+}: ToolbarProps) {
+  const targets = [element.id] as NonEmptyArray<Fqn>
+  const diagramApi = useDiagramStoreApi()
+  const { hasGoToSource } = useDiagramState(s => ({
+    hasGoToSource: !!s.onOpenSourceElement
+  }))
+
+  const onChange: OnStyleChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: 'change-element-style',
+      style,
+      targets
+    })
+  }
+
+  return (
+    <Toolbar element={element} {...props}>
+      <ColorButton
+        element={element}
+        isOpacityEditable
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="left-start"
+      />
+      <BorderStyleOption
+        elementBorderStyle={element.style?.border}
+        onChange={onChange}
+      />
+      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+    </Toolbar>
+  )
+}
+
+function Toolbar({ element, children, ...props }: Omit<ToolbarProps, 'onColorPreview'>) {
+  return (
+    <NodeToolbar {...props}>
+      <Paper
+        className={clsx('nodrag', 'nopan')}
+        px={5}
+        pb={8}
+        pt={4}
+        radius={'sm'}
+        shadow="xl"
+        onDoubleClickCapture={stopEventPropagation}
+        onPointerDown={stopEventPropagation}
+        onClick={stopEventPropagation}
+        onDoubleClick={stopEventPropagation}
+        withBorder>
+        <Stack gap={4}>
+          <Box pl={2}>
+            <Text c="dimmed" fz={10} fw={500}>{element.id}</Text>
+          </Box>
+          <Group gap={3}>
+            {children}
+          </Group>
+        </Stack>
+      </Paper>
+    </NodeToolbar>
+  )
+}
+
+export function ElementToolbar({
+  element,
+  onColorPreview,
+  ...props
+}: ToolbarProps) {
+  const targets = [element.id] as NonEmptyArray<Fqn>
+  const diagramApi = useDiagramStoreApi()
+  const { hasGoToSource } = useDiagramState(s => ({
+    hasGoToSource: !!s.onOpenSourceElement
+  }))
+  const portalProps = useMantinePortalProps()
+
+  const onChange: OnStyleChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: 'change-element-style',
+      style,
+      targets
+    })
+  }
+
+  return (
+    <Toolbar element={element} {...props}>
+      <Menu
+        openDelay={300}
+        closeDelay={450}
+        floatingStrategy={'fixed'}
+        closeOnClickOutside
+        clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+        closeOnEscape
+        closeOnItemClick={false}
+        position="bottom-start"
+        offset={2}
+        styles={{
+          item: {
+            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)'
+          }
+        }}
+        {...portalProps}
+      >
+        <MenuTarget>
+          <Button
+            variant="light"
+            color="gray"
+            size="compact-xs"
+            rightSection={<IconSelector size={12} />}
+          >
+            {element.shape}
+          </Button>
+        </MenuTarget>
+        <MenuDropdown
+          // className={css.menuDropdown}
+          // onPointerDownCapture={stopEventPropagation}
+          // onPointerDown={stopEventPropagation}
+          onDoubleClick={stopEventPropagation}
+          onClick={stopEventPropagation}
+        >
+          {ElementShapes.map(shape => (
+            <MenuItem
+              fz={12}
+              fw={500}
+              key={shape}
+              value={shape}
+              rightSection={element.shape === shape ? <IconCheck size={12} /> : undefined}
+              onClick={e => {
+                e.stopPropagation()
+                onChange({ shape })
+              }}
+            >
+              {shape}
+            </MenuItem>
+          ))}
+        </MenuDropdown>
+      </Menu>
+      <ColorButton
+        element={element}
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="right-end"
+      />
+      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+    </Toolbar>
+  )
+}
+
+type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
+  element: Element
+  isOpacityEditable?: boolean
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: OnStyleChange
+}
+
+function GoToSourceButton({ elementId }: { elementId: Fqn }) {
+  const diagramApi = useDiagramStoreApi()
+  return (
+    <ActionIcon
+      size={'sm'}
+      variant="subtle"
+      color="gray"
+      onClick={e => {
+        e.stopPropagation()
+        diagramApi.getState().onOpenSourceElement?.(elementId)
+      }}>
+      <IconFileSymlink size={'70%'} stroke={1.8} />
+    </ActionIcon>
+  )
+}
+
+function ColorButton({
+  element,
+  onColorPreview,
+  isOpacityEditable = false,
+  onChange,
+  ...props
+}: ColorButtonProps) {
+  const elementColor: ThemeColor = (element.color as ThemeColor) ?? 'primary'
+  return (
+    <Popover
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      position="right-end"
+      offset={2}
+      {...props}
+    >
+      <PopoverTarget>
+        <Button variant="subtle" color="gray" size="compact-xs" px={3}>
+          <ColorSwatch
+            color={defaultTheme.elements[elementColor]?.fill}
+            size={14}
+            withShadow
+            style={{ color: '#fff', cursor: 'pointer' }}
+          />
+        </Button>
+      </PopoverTarget>
+      <PopoverDropdown p={'xs'}>
+        <ColorSwatches
+          elementColor={elementColor}
+          onColorPreview={onColorPreview}
+          onChange={(color) => onChange({ color })}
+        />
+        {isOpacityEditable && (
+          <>
+            <Space h={'xs'} />
+            <Divider label="opacity" labelPosition="left" />
+            <Space h={'xs'} />
+            <OpacityOption
+              elementOpacity={element.style?.opacity}
+              onOpacityChange={(opacity) => {
+                onChange({ opacity })
+              }} />
+          </>
+        )}
+      </PopoverDropdown>
+    </Popover>
+  )
+}
+
+function ColorSwatches({
+  elementColor,
+  onColorPreview,
+  onChange
+}: {
+  elementColor: ThemeColor
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: (color: ThemeColor) => void
+}) {
+  const changeColor = (color: ColorKey | ThemeColorKey) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onColorPreview(null)
+    if (elementColor === color) {
+      return
+    }
+    onChange(color)
+  }
+  return (
+    <Stack gap={2} onMouseLeave={() => onColorPreview(null)}>
+      <TooltipGroup openDelay={1000} closeDelay={300}>
+        <Flex maw={120} gap="6" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
+          {themedColors.map(({ key, value }) => (
+            <Tooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                withShadow
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+
+        <Flex
+          mt="sm"
+          maw={110}
+          gap="6"
+          justify="flex-start"
+          align="flex-start"
+          direction="row"
+          wrap="wrap">
+          {colors.map(({ key, value }) => (
+            <Tooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+      </TooltipGroup>
+    </Stack>
+  )
+}
+
+function BorderStyleOption({
+  elementBorderStyle = 'dashed',
+  onChange
+}: {
+  elementBorderStyle: BorderStyle | undefined
+  onChange: OnStyleChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle)
+  useEffect(() => {
+    setValue(elementBorderStyle)
+  }, [elementBorderStyle])
+
+  return (
+    <Box>
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        withItemsBorders={false}
+        value={value}
+        onChange={v => {
+          const border = v as BorderStyle
+          setValue(border)
+          onChange({ border })
+        }}
+        data={[
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dashed', value: 'dashed' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'None', value: 'none' }
+        ]}
+      />
+    </Box>
+  )
+}
+
+function OpacityOption({
+  elementOpacity = 100,
+  onOpacityChange
+}: {
+  elementOpacity: number | undefined
+  onOpacityChange: (opacity: number) => void
+}) {
+  const [value, setValue] = useState(elementOpacity)
+  useUpdateEffect(() => {
+    setValue(elementOpacity)
+  }, [elementOpacity])
+
+  return (
+    <Slider
+      size={'sm'}
+      color={'dark'}
+      value={value}
+      onChange={setValue}
+      onChangeEnd={onOpacityChange} />
+  )
+}