@likec4/diagram 1.9.0 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.9.0",
+  "version": "1.12.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -14,83 +14,60 @@
     "package.json",
     "LICENSE",
     "README.md",
-    "dist",
     "src",
-    "!dist/src",
     "!**/*.spec.*",
     "!**/*.d.ts.map"
   ],
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.mjs"
-    },
-    "./style.css": "./dist/style.css"
+    ".": "./src/index.ts"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      },
-      "./style.css": "./dist/style.css"
-    }
-  },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.5.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "prepack": "vite build --mode production",
     "lint": "run -T eslint src/ --fix",
-    "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.9.0",
-    "@lume/kiwi": "^0.4.3",
+    "@likec4/core": "1.12.1",
+    "@lume/kiwi": "^0.4.4",
+    "@mantine/vanilla-extract": "7.13.2",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.14.0",
-    "@vanilla-extract/css": "^1.15.5",
+    "@tabler/icons-react": "^3.19.0",
+    "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.1.1",
-    "@xyflow/system": "0.0.39",
+    "@xyflow/react": "12.3.1",
+    "@xyflow/system": "0.0.43",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.3.30",
+    "framer-motion": "^11.11.1",
     "khroma": "^2.1.0",
-    "remeda": "^2.11.0",
-    "type-fest": "^4.26.0",
+    "remeda": "^2.14.0",
+    "type-fest": "4.26.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
+    "@mantine/core": "^7.13.2",
+    "@mantine/hooks": "^7.13.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.9.0",
-    "@mantine/core": "7.12.2",
-    "@mantine/hooks": "7.12.2",
-    "@mantine/vanilla-extract": "7.12.2",
-    "@total-typescript/ts-reset": "^0.5.1",
+    "@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",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.10",
-    "@vitejs/plugin-react": "^4.3.1",
     "execa": "^9.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.4",
-    "vite": "5.3.4",
-    "vite-plugin-dts": "^3.9.1"
+    "typescript": "^5.6.2"
   }
 }

package/src/LikeC4CustomColors.tsx

@@ -1,7 +1,8 @@
 import { type ThemeColorValues } from '@likec4/core'
 import { entries } from 'remeda'
 import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
-import { vars } from './theme.css'
+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.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars, xyvars } from './theme.css'
+import { vars, xyvars } from './theme-vars'
 
 export const cssReactFlow = style({
   '@supports': {

package/src/LikeC4Diagram.props.ts

@@ -9,69 +9,12 @@ import type {
   WhereOperator
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
-// type EqualOperator<V> = {
-//   eq: V
-//   neq?: never
-// } | {
-//   eq?: never
-//   neq: V
-// }
-
-// type AllNever = {
-//   not?: never
-//   and?: never
-//   or?: never
-//   tag?: never
-//   kind?: never
-// }
-
-// type TagKindOperator<Tag, Kind> =
-//   & Omit<AllNever, 'tag' | 'kind'>
-//   & ({
-//     tag: EqualOperator<Tag>
-//     kind?: never
-//   } | {
-//     tag?: never
-//     kind: EqualOperator<Kind>
-//   })
-
-// type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
-//   not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>
-// }
-
-// type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
-//   and: NonEmptyArray<
-//     | TagKindOperator<Tag, Kind>
-//     | OrOperator<Tag, Kind>
-//     | NotOperator<Tag, Kind>
-//   >
-// }
-
-// type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
-//   or: NonEmptyArray<
-//     | TagKindOperator<Tag, Kind>
-//     | AndOperator<Tag, Kind>
-//     | NotOperator<Tag, Kind>
-//   >
-// }
-
-// // export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
-// //   return 'or' in operator
-// // }
-
-// export type WhereOperator<Tag extends string, Kind extends string> =
-//   | TagKindOperator<Tag, Kind>
-//   | NotOperator<Tag, Kind>
-//   | AndOperator<Tag, Kind>
-//   | OrOperator<Tag, Kind>
-
 export type { WhereOperator }
 
-export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
-  navigateTo: ViewID
+export type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, 'navigateTo'> & {
+  navigateTo: ID
 }
 
 type ElementIconNodeProps = {
@@ -84,28 +27,21 @@ export type ElementIconRenderer = (props: {
   node: ElementIconNodeProps
 }) => ReactNode
 
-export type OnNavigateTo = {
-  (
-    to: ViewID,
-    // These fields present if navigateTo triggered by a node click
-    event?: ReactMouseEvent,
-    element?: DiagramNodeWithNavigate,
-    xynode?: XYFlowNode
-  ): void
-}
+export type OnNavigateTo<ID extends string = ViewID> = (
+  to: ID,
+  // These fields present if navigateTo triggered by a node click
+  event?: ReactMouseEvent,
+  element?: DiagramNodeWithNavigate<ID>
+) => void
+
 export type OnNodeClick = (
-  event: {
-    element: DiagramNode
-    xynode: XYFlowNode
-    event: ReactMouseEvent
-  }
+  node: DiagramNode,
+  event: ReactMouseEvent
 ) => void
+
 export type OnEdgeClick = (
-  event: {
-    edge: DiagramEdge
-    xyedge: XYFlowEdge
-    event: ReactMouseEvent
-  }
+  edge: DiagramEdge,
+  event: ReactMouseEvent
 ) => void
 
 /**
@@ -116,9 +52,8 @@ export type OnCanvasClick = (event: ReactMouseEvent) => void
 export type ChangeEvent = {
   change: ViewChange
 }
-export type OnChange = {
-  (event: ChangeEvent): void
-}
+export type OnChange = (event: ChangeEvent) => void
+
 export type LikeC4ColorScheme = 'light' | 'dark'
 
 export interface LikeC4DiagramProperties {
@@ -127,15 +62,7 @@ export interface LikeC4DiagramProperties {
   className?: string | undefined
 
   /**
-   * Controls color scheme used for styling the flow
-   * By default inherits from system or surrounding MantineProvider
-   *
-   * @example 'light' | 'dark'
-   */
-  // colorScheme?: LikeC4ColorScheme | undefined
-
-  /**
-   * Show/hide controls menu
+   * Show/hide ReactFlow controls menu
    * @default false
    */
   controls?: boolean | undefined
@@ -165,10 +92,13 @@ export interface LikeC4DiagramProperties {
    */
   fitViewPadding?: number | undefined
 
+  /**
+   * @default false if readonly
+   */
   nodesSelectable?: boolean | undefined
 
   /**
-   * @default false
+   * @default false if readonly
    */
   nodesDraggable?: boolean | undefined
 
@@ -194,14 +124,14 @@ export interface LikeC4DiagramProperties {
   showElementLinks?: boolean | undefined
 
   /**
-   * Display panel with diagram title / description
+   * Display webview with diagram title / description
    * @default true
    */
   showDiagramTitle?: boolean | undefined
 
   /**
    * Show back/forward navigation buttons
-   * @default false
+   * @default true if `onNavigateTo` is set
    */
   showNavigationButtons?: undefined | boolean
 
@@ -211,6 +141,12 @@ export interface LikeC4DiagramProperties {
    */
   showNotations?: boolean | undefined
 
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default true
+   */
+  showRelationshipDetails?: boolean | undefined
+
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
    * @default true
@@ -230,11 +166,14 @@ export interface LikeC4DiagramProperties {
   experimentalEdgeEditing?: boolean | undefined
 
   /**
-   * Render custom icon for a node
+   * Render icon for an element, bundled or remote
    * By default, if icon is http:// or https://, it will be rendered as an image
    */
   renderIcon?: ElementIconRenderer | undefined
 
+  /**
+   * Dynamic filter, applies both to nodes and edges
+   */
   where?: WhereOperator<string, string> | undefined
 }
 
@@ -249,8 +188,15 @@ export interface LikeC4DiagramEventHandlers {
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
 
+  // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
+
+  // if set, will render a source code icon in the top left corner
   onOpenSourceView?: null | undefined | (() => void)
+
+  // if set, will render an icon in properties webview for each element
   onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void)
+
+  // if set, will be called on edge click
   onOpenSourceRelation?: null | undefined | ((id: RelationID) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -2,13 +2,14 @@ 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 { memo, useRef } from 'react'
+import { domMax, LazyMotion } from 'framer-motion'
+import { memo, useEffect, useRef } from 'react'
 import { rootClassName } from './globals.css'
 import { useDiagramState } from './hooks/useDiagramState'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
+import { useLikeC4Model } from './likec4model'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
@@ -33,6 +34,7 @@ export function LikeC4Diagram({
   showElementLinks = true,
   showDiagramTitle = true,
   showNotations = true,
+  showRelationshipDetails = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
   initialWidth,
@@ -56,6 +58,7 @@ export function LikeC4Diagram({
   where,
   showNavigationButtons = !!onNavigateTo
 }: LikeC4DiagramProps) {
+  const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef({
     defaultNodes: [] as XYFlowNode[],
     defaultEdges: [] as XYFlowEdge[],
@@ -65,9 +68,15 @@ export function LikeC4Diagram({
   if (readonly !== true && !!where) {
     console.warn('where filter is only supported in readonly mode')
   }
+  useEffect(() => {
+    if (showRelationshipDetails && !hasLikec4model) {
+      console.warn('Relationship details require LikeC4ModelProvider')
+    }
+  }, [showRelationshipDetails, hasLikec4model])
+
   return (
     <EnsureMantine>
-      <LazyMotion features={domAnimation} strict>
+      <LazyMotion features={domMax} strict>
         <XYFlowProvider
           fitView={fitView}
           {...initialRef.current}
@@ -85,6 +94,7 @@ export function LikeC4Diagram({
             showElementLinks={showElementLinks}
             showNavigationButtons={showNavigationButtons}
             showNotations={showNotations}
+            showRelationshipDetails={showRelationshipDetails && hasLikec4model}
             nodesDraggable={nodesDraggable}
             nodesSelectable={nodesSelectable}
             experimentalEdgeEditing={experimentalEdgeEditing}
@@ -124,7 +134,7 @@ type LikeC4DiagramInnerProps = {
   controls: boolean
   showDiagramTitle: boolean
 }
-const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
+const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
   controls,
   showDiagramTitle

package/src/LikeC4ModelProvider.tsx

@@ -0,0 +1,21 @@
+import type { LikeC4Model } from '@likec4/core'
+import { type PropsWithChildren } from 'react'
+import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
+
+export type LikeC4ModelProviderProps = PropsWithChildren<{
+  likec4model: LikeC4Model
+}>
+
+/**
+ * Ensures LikeC4Model context
+ */
+export function LikeC4ModelProvider({
+  children,
+  likec4model
+}: LikeC4ModelProviderProps) {
+  return (
+    <LikeC4ModelContext.Provider value={likec4model}>
+      {children}
+    </LikeC4ModelContext.Provider>
+  )
+}

package/src/StaticLikeC4Diagram.tsx

@@ -35,6 +35,7 @@ export function StaticLikeC4Diagram({
       showElementLinks
       showDiagramTitle={false}
       showNotations={false}
+      showRelationshipDetails={false}
       enableDynamicViewWalkthrough={false}
       enableFocusMode={false}
       nodesSelectable={false}

package/src/globals.css.ts

@@ -2,8 +2,7 @@ import { defaultTheme } from '@likec4/core'
 import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'
 import { keys, omit } from 'remeda'
-import { mantine, whereDark } from './mantine.css'
-import { vars } from './theme.css'
+import { mantine, vars, whereDark } from './theme-vars'
 
 export const rootClassName = 'likec4-diagram-root'
 
@@ -18,7 +17,7 @@ globalStyle(`.${rootClassName}`, {
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
   MozOsxFontSmoothing: mantine.mozFontSmoothing
 })
-globalStyle(`.${rootClassName} .mantine-ActionIcon-icon .tabler-icon`, {
+globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
   width: '75%',
   height: '75%'
 })

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useDiagramState'
+export * from './useMantinePortalProps'
 export * from './useSetState'
 export * from './useUpdateEffect'
 export * from './useXYFlow'

package/src/hooks/useMantinePortalProps.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react'
+
+import { useDiagramState } from './useDiagramState'
+
+export function useMantinePortalProps() {
+  const target = useDiagramState(s => s.getContainer())
+  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
+}

package/src/hooks/useXYFlow.ts

@@ -12,8 +12,7 @@ export function useXYStore<StateSlice = unknown>(
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ): StateSlice {
   return useStore(
-    // @ts-expect-error - types are not correct
-    selector,
+    selector as any,
     equalityFn ?? shallowEqual
   )
 }

package/src/index.ts

@@ -1,11 +1,20 @@
 import '@xyflow/react/dist/style.css'
 
 export { LikeC4Diagram } from './LikeC4Diagram'
+export {
+  useLikeC4DiagramView,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views
+} from './likec4model/useLikeC4Model'
+export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
 export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
+export type * from './LikeC4ModelProvider'
 export type * from './StaticLikeC4Diagram'
 export type * from './xyflow/types'

package/src/likec4model/LikeC4ModelContext.ts

@@ -0,0 +1,4 @@
+import type { LikeC4Model } from '@likec4/core'
+import { createContext } from 'react'
+
+export const LikeC4ModelContext = createContext<LikeC4Model | null>(null)

package/src/likec4model/index.ts

@@ -0,0 +1 @@
+export * from './useLikeC4Model'

package/src/likec4model/useLikeC4Model.ts

@@ -0,0 +1,58 @@
+import { type ComputedView, type DiagramView, type LikeC4Model, type ViewID } from '@likec4/core'
+import { useContext } from 'react'
+import { isDefined, isNonNullish, isString } from 'remeda'
+import type { LiteralUnion } from 'type-fest'
+import { LikeC4ModelContext } from './LikeC4ModelContext'
+
+export function useLikeC4Model(): LikeC4Model | null
+export function useLikeC4Model(strict: true): LikeC4Model
+export function useLikeC4Model(strict: boolean): LikeC4Model | null
+export function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted
+export function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed
+export function useLikeC4Model(strict: true, type: LikeC4Model['type'] | undefined): LikeC4Model
+export function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null
+export function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null
+export function useLikeC4Model(strict: boolean, type: LikeC4Model['type'] | undefined): LikeC4Model | null
+export function useLikeC4Model(strict?: boolean, type?: LikeC4Model['type']) {
+  const model = useContext(LikeC4ModelContext)
+
+  if (isString(type) && isNonNullish(model) && model.type !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`)
+  }
+
+  if (isDefined(strict) && strict === true && !model) {
+    throw new Error('No LikeC4Model found in context')
+  }
+  return model
+}
+
+export function useLikeC4Views(): LikeC4Model.SourceModel['views'] {
+  return useLikeC4Model(true).sourcemodel.views
+}
+
+export function useLikeC4ViewModel(viewId: LiteralUnion<ViewID, string>): LikeC4Model.ViewModel {
+  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.warn(error)
+    return null
+  }
+}
+
+export function useLikeC4DiagramView(viewId: LiteralUnion<ViewID, string>): DiagramView | null {
+  const model = useLikeC4Model(true, 'layouted')
+  try {
+    return model.view(viewId).view
+  } catch (error) {
+    console.warn(error)
+    return null
+  }
+}

package/src/state/diagram-to-xyflow.ts

@@ -1,5 +1,5 @@
-import { extractStep, invariant, nonNullable, whereOperatorAsPredicate } from '@likec4/core'
 import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core'
+import { nonNullable, whereOperatorAsPredicate } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
 import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'
@@ -122,7 +122,6 @@ export function diagramViewToXYFlowData(
       data: {
         edge,
         controlPoints: edge.controlPoints || null,
-        stepNum: isDynamicView ? extractStep(edge.id) : null,
         label: !!edge.labelBBox
           ? {
             bbox: edge.labelBBox,