@likec4/diagram 1.18.0 → 1.19.1

package/dist/xyflow/utils.js

@@ -0,0 +1,72 @@
+import { invariant, hasAtLeast } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
+import { Bezier } from "../node_modules/bezier-js/src/bezier.js";
+import { isArray } from "remeda";
+function toDomPrecision(v) {
+  if (v === null) {
+    return 0.01;
+  }
+  return Math.round(v * 100) / 100;
+}
+const nodeToRect = (nd) => ({
+  x: nd.internals.positionAbsolute.x,
+  y: nd.internals.positionAbsolute.y,
+  width: nd.measured.width ?? nd.width ?? nd.data.element.width,
+  height: nd.measured.height ?? nd.height ?? nd.data.element.height
+});
+const isInside = (test, target) => {
+  return test.x >= target.x && test.y >= target.y && test.x + test.width <= target.x + target.width && test.y + test.height <= target.y + target.height;
+};
+function bezierControlPoints(diagramEdge) {
+  let [start, ...bezierPoints] = diagramEdge.points;
+  invariant(start, "start should be defined");
+  const handles = [
+    // start
+  ];
+  while (hasAtLeast(bezierPoints, 3)) {
+    const [cp1, cp2, end, ...rest] = bezierPoints;
+    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
+    const inflections = bezier.inflections();
+    if (inflections.length === 0) {
+      inflections.push(0.5);
+    }
+    inflections.forEach((t) => {
+      const { x, y } = bezier.get(t);
+      handles.push({
+        x: Math.round(x),
+        y: Math.round(y)
+      });
+    });
+    bezierPoints = rest;
+    start = end;
+  }
+  invariant(bezierPoints.length === 0, "all points should be consumed");
+  return handles;
+}
+const isClose = (a, b) => {
+  return Math.abs(a - b) < 3.1;
+};
+function isSamePoint(a, b) {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y];
+  const [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return isClose(ax, bx) && isClose(ay, by);
+}
+function stopPropagation(e) {
+  return e.stopPropagation();
+}
+function centerXYInternalNode(nd) {
+  const { width, height } = getNodeDimensions(nd);
+  return {
+    x: nd.internals.positionAbsolute.x + width / 2,
+    y: nd.internals.positionAbsolute.y + height / 2
+  };
+}
+export {
+  bezierControlPoints,
+  centerXYInternalNode,
+  isInside,
+  isSamePoint,
+  nodeToRect,
+  stopPropagation,
+  toDomPrecision
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -11,9 +11,7 @@
     "directory": "packages/diagram"
   },
   "files": [
-    "package.json",
-    "LICENSE",
-    "README.md",
+    "dist",
     "src",
     "!**/*.spec.*",
     "!**/*.d.ts.map"
@@ -21,28 +19,32 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "sources": "./src/index.ts",
+      "default": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      }
+    },
+    "./style.css": "./dist/style.css"
   },
   "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "",
+    "build": "vite build",
     "lint": "run -T eslint src/ --fix",
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
     "test": "vitest run --no-isolate"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.18.0",
-    "@mantine/vanilla-extract": "7.15.1",
+    "@dagrejs/dagre": "1.1.4",
+    "@likec4/core": "1.19.1",
+    "@mantine/vanilla-extract": "7.15.2",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.5",
-    "@xyflow/system": "0.0.46",
-    "bezier-js": "^6.1.4",
+    "@xyflow/react": "12.3.6",
+    "@xyflow/system": "0.0.47",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.2.1",
@@ -55,25 +57,30 @@
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.15.1",
-    "@mantine/hooks": "^7.15.1",
-    "@mantine/spotlight": "^7.15.1",
+    "@mantine/core": "^7.15.2",
+    "@mantine/hooks": "^7.15.2",
+    "@mantine/spotlight": "^7.15.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.18.0",
-    "@mantine/core": "7.15.1",
-    "@mantine/hooks": "7.15.1",
-    "@mantine/spotlight": "7.15.1",
+    "@likec4/tsconfig": "1.19.1",
+    "@mantine/core": "7.15.2",
+    "@mantine/hooks": "7.15.2",
+    "@mantine/spotlight": "7.15.2",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "execa": "^9.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "bezier-js": "^6.1.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "^5.7.2",
+    "vite": "5.4.11",
+    "vite-plugin-dts": "^4.4.0",
     "vitest": "^2.1.8"
   }
 }

package/src/LikeC4Diagram.tsx

@@ -1,4 +1,4 @@
-import { ComputedView, isDeploymentView } from '@likec4/core'
+import { isDeploymentView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
@@ -17,7 +17,7 @@ import { EnsureMantine } from './ui/EnsureMantine'
 import { FramerMotionConfig } from './ui/FramerMotionConfig'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { DiagramFlowTypes } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
 import { XYFlowInner } from './xyflow/XYFlowInner'
 
@@ -63,8 +63,8 @@ export function LikeC4Diagram({
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef({
-    defaultNodes: [] as XYFlowNode[],
-    defaultEdges: [] as XYFlowEdge[],
+    defaultNodes: [] as DiagramFlowTypes.Node[],
+    defaultEdges: [] as DiagramFlowTypes.Edge[],
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   })

package/src/LikeC4Search.css.ts

@@ -0,0 +1,12 @@
+import { rem } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const actionSection = style({
+  marginInlineEnd: 4
+})
+
+globalStyle(`:where(${actionSection}) .tabler-icon`, {
+  opacity: 0.8,
+  width: '70%',
+  height: '70%'
+})

package/src/LikeC4Search.tsx

@@ -1,77 +1,16 @@
-import { Center, Group, Highlight, Text } from '@mantine/core'
-import { Spotlight, type SpotlightActionData, SpotlightActionsGroup } from '@mantine/spotlight'
-import { IconRectangularPrism, IconSearch, IconSitemap } from '@tabler/icons-react'
-import { memo, useMemo, useState } from 'react'
+import { rem } from '@mantine/core'
+import { Spotlight, type SpotlightActionData } from '@mantine/spotlight'
+import { IconRectangularPrism, IconSearch, IconSitemap, IconStack2 } from '@tabler/icons-react'
+import { memo, useMemo } from 'react'
 import { filter, map, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
 import { useLikeC4Model } from './likec4model'
-
-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 key={matchedAction.data.id} 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>
-  )
-}
+import * as css from './LikeC4Search.css'
 
 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()
@@ -82,6 +21,9 @@ export const LikeC4Search = memo(() => {
       map(n => ({
         id: n.id,
         label: n.title,
+        ...(n.description && {
+          description: n.description
+        }),
         keywords: [
           n.title,
           ...(n.tags ?? []).map(t => `#${t}`),
@@ -94,12 +36,14 @@ export const LikeC4Search = memo(() => {
   }
 
   const getViewActionsData = (): SpotlightActionData[] => {
-    const { onNavigateTo } = store.getState()
-    const views = model.views().toArray()
+    const views = [...model.views()]
 
     return map(views, v => ({
       id: v.id,
       label: v.title ?? v.id,
+      ...(v.$view.description && {
+        description: v.$view.description
+      }),
       keywords: [
         v.title ?? v.id,
         ...(v.tags ?? []),
@@ -107,43 +51,48 @@ export const LikeC4Search = memo(() => {
       ],
       onClick: () => {
         store.setState({
-          hoveredNodeId: null,
           lastOnNavigate: {
             fromView: view.id,
             toView: v.id,
             fromNode: null
           }
         })
-        onNavigateTo?.(v.id)
+        store.getState().onNavigateTo?.(v.id)
       },
-      leftSection: <IconSitemap />
+      leftSection: v.isDeploymentView()
+        ? <IconStack2 />
+        : <IconSitemap />
     }))
   }
 
-  const { nodeActions, viewActions } = useMemo(() => ({
-    nodeActions: buildFilteredActions(getNodeActionsData(), query),
-    viewActions: buildFilteredActions(getViewActionsData(), query)
-  }), [model, store, view, query])
+  const actions = useMemo(() => [
+    {
+      group: 'Elements',
+      actions: getNodeActionsData()
+    },
+    {
+      group: 'Views',
+      actions: getViewActionsData()
+    }
+  ], [model, store, view])
 
   const portalProps = useMantinePortalProps()
   return (
-    <Spotlight.Root
+    <Spotlight
       {...portalProps}
+      actions={actions}
+      nothingFound="Nothing found..."
       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>
+      highlightQuery
+      maxHeight={350}
+      classNames={{
+        actionSection: css.actionSection
+      }}
+      searchProps={{
+        leftSection: <IconSearch style={{ width: rem(18), height: rem(18) }} stroke={1.5} />,
+        placeholder: 'Search elements and views...'
+      }}
+    />
   )
 })

package/src/controls/Text.ts

@@ -0,0 +1,5 @@
+import { Text as MantineText } from '@mantine/core'
+
+export const Text = MantineText.withProps({
+  component: 'div'
+})

package/src/controls/action-button-bar/ActionButtonBar.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  zIndex: 100,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  gap: 2,
+  justifyContent: 'center',
+  pointerEvents: 'none',
+})

package/src/controls/action-button-bar/ActionButtonBar.tsx

@@ -0,0 +1,138 @@
+import { Box } from '@mantine/core'
+import { useId } from '@mantine/hooks'
+import clsx from 'clsx'
+import { type Variants } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
+import * as css from './ActionButtonBar.css'
+import { ActionButtonBarContext } from './useActionButtonBarCtx'
+
+const TRANSLATE_DIFF = 5
+
+type ShiftX = 'left' | 'spread' | 'right'
+type ShiftY = 'top' | 'spread' | 'bottom'
+type ShiftMode = number | 'spread'
+
+type ActionButtonBarProps = PropsWithChildren<{
+  shiftX?: ShiftX
+  shiftY?: ShiftY
+}>
+
+const elementVariants = (prefix: string, index: number, count: number, shiftX: ShiftMode, shiftY: ShiftMode) => {
+  const name = `${prefix}${index + 1}`
+  const translation = count > 1
+    ? {
+      x: shiftX === 'spread' ? 1 - count + index * 2 : shiftX,
+      y: shiftY === 'spread' ? 1 - count + index * 2 : shiftY,
+    }
+    : {
+      x: 0,
+      y: 1,
+    }
+
+  const variants = {
+    idle: {
+      '--icon-scale': 'scale(1)',
+      '--ai-bg': 'var(--ai-bg-idle)',
+      scale: 1,
+      opacity: 0.8,
+      translateX: 0,
+      translateY: 0,
+      originX: 0.5,
+      originY: 0.5,
+      // translateY: 0,
+      // ...align === 'left' && {
+      //   originX: 0.75,
+      //   translateX: -1
+      // },
+      // ...align === 'right' && {
+      //   originX: 0.25,
+      //   translateX: 1
+      // }
+    },
+    hovered: {
+      '--ai-bg': 'var(--ai-bg-hover)',
+      '--icon-scale': 'scale(1)',
+      // translateY: 3,
+      scale: 1.28,
+      opacity: 1,
+      translateX: translation.x * TRANSLATE_DIFF,
+      translateY: translation.y * TRANSLATE_DIFF,
+      // ...align === 'left' && {
+      //   translateX: -4
+      // },
+      // ...align === 'right' && {
+      //   translateX: 4
+      // }
+    },
+    [`hovered:${name}`]: {
+      '--ai-bg': 'var(--ai-hover)',
+      '--icon-scale': 'scale(1.08)',
+      scale: 1.45,
+    },
+    [`tap:${name}`]: {
+      '--icon-scale': 'scale(1)',
+      scale: 1.15,
+    },
+    selected: {},
+  } satisfies Variants
+  variants['selected'] = variants['hovered']
+  variants['hovered:details'] = variants['idle']
+  return {
+    variants,
+    ['data-animate-target']: name,
+  }
+}
+
+export const ActionButtonBar = ({
+  shiftX = 'spread',
+  shiftY = 'spread',
+  children,
+}: ActionButtonBarProps) => {
+  const id = useId()
+  const childrenArray = Array.isArray(children) ? children : [children]
+
+  // determine offsets for shifting
+  let shiftDiffX: ShiftMode = 'spread'
+  if (shiftX == 'left') {
+    shiftDiffX = -1
+  }
+  else if (shiftX == 'right') {
+    shiftDiffX = 1
+  }
+
+  let shiftDiffY: ShiftMode = 'spread'
+  if (shiftY == 'top') {
+    shiftDiffY = -1
+  }
+  else if (shiftY == 'bottom') {
+    shiftDiffY = 1
+  }
+
+  return (
+    <Box className={clsx(css.container)}>
+      {childrenArray.map((child, i, all) => (
+        <ActionButtonBarContext.Provider
+          value={elementVariants(id, i, all.length, shiftDiffX, shiftDiffY)}>
+          {child}
+        </ActionButtonBarContext.Provider>
+        // <>{cloneElement(child, {
+        //   key: i,
+        //   variants: elementVariants(i, all.length, shiftDiffX, shiftDiffY),
+        //   ['data-animate-target']: `i${i + 1}`,
+        //   ...props
+        // })}</>
+      ))}
+      {
+        /* {childrenArray.filter(child => !!child).map((child, i) => (
+        <m.div
+          key={i}
+          variants={elementVariants(i, childrenArray.length, shiftDiffX, shiftDiffY)}
+          {...props}
+          >
+          {child}
+        </m.div>
+      ))} */
+      }
+    </Box>
+  )
+}

package/src/controls/action-button-bar/useActionButtonBarCtx.ts

@@ -0,0 +1,13 @@
+import type { Variants } from 'framer-motion'
+import { createContext, useContext } from 'react'
+
+export const ActionButtonBarContext = createContext<
+  {
+    variants: Variants
+    ['data-animate-target']?: string
+  } | null
+>(null)
+
+export function useActionButtonBarCtx() {
+  return useContext(ActionButtonBarContext)
+}

package/src/controls/action-buttons/ActionButton.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css'
+import { mantine, vars, whereLight } from '../../theme-vars'
+
+export const btn = style({
+  pointerEvents: 'all',
+  color: vars.element.loContrast,
+  cursor: 'pointer',
+  backgroundColor: 'var(--ai-bg)',
+  'vars': {
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg': `var(--ai-bg-idle)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.md,
+  },
+  selectors: {
+    [`${whereLight} .likec4-compound-transparent &`]: {
+      color: vars.element.stroke,
+      opacity: 0.85,
+      vars: {
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+      },
+    },
+  },
+})

package/src/controls/action-buttons/ActionButton.tsx

@@ -0,0 +1,66 @@
+import { type ActionIconProps, ActionIcon, Tooltip } from '@mantine/core'
+import clsx from 'clsx'
+import { type HTMLMotionProps, type Variants, m } from 'framer-motion'
+import type { PropsWithoutRef } from 'react'
+import { stopPropagation } from '../../xyflow/utils'
+import { useActionButtonBarCtx } from '../action-button-bar/useActionButtonBarCtx'
+import * as css from './ActionButton.css'
+
+export type ActionButtonProps = PropsWithoutRef<
+  Omit<ActionIconProps & HTMLMotionProps<'div'>, 'onClick' | 'children'> & {
+    onClick: (e: React.MouseEvent) => void
+    IconComponent: React.ComponentType<any>
+    tooltipLabel?: string
+  }
+>
+
+const variants = {
+  idle: {
+    '--icon-scale': 'scale(1)',
+    '--ai-bg': 'var(--ai-bg-idle)',
+  },
+  hovered: {
+    '--icon-scale': 'scale(1)',
+    '--ai-bg': 'var(--ai-bg-hover)',
+  },
+  selected: {},
+} satisfies Variants
+variants['selected'] = variants['hovered']
+
+export const ActionButton = ({
+  onClick: action,
+  IconComponent,
+  tooltipLabel,
+  ...props
+}: ActionButtonProps) => {
+  const ctx = useActionButtonBarCtx() ?? {
+    variants: variants,
+  }
+  return (
+    <Tooltip
+      fz="xs"
+      color="dark"
+      label={tooltipLabel ?? ''}
+      disabled={!tooltipLabel}
+      withinPortal={false}
+      offset={2}
+      openDelay={600}>
+      <ActionIcon
+        component={m.div}
+        className={clsx('nodrag nopan', css.btn)}
+        radius="md"
+        role="button"
+        onClick={action}
+        onDoubleClick={stopPropagation}
+        {...ctx}
+        {...props}
+      >
+        <IconComponent
+          style={{
+            width: '70%',
+            transform: 'var(--icon-scale)',
+          }} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}