@likec4/diagram 1.34.2 → 1.36.0

package/src/overlays/element-details/TabPanelRelationships.css.ts

@@ -5,11 +5,11 @@ export const fqn = css({
   fontSize: 'sm',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '3px 6px',
+  padding: '[3px 6px]',
   borderRadius: 3,
-  background: `likec4.palette.fill/75`,
+  background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
-  color: 'likec4.palette.hiContrast',
+  color: 'var(--likec4-palette-hiContrast)',
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -55,9 +55,9 @@ export const panelScope = css({
   _before: {
     content: '"scope:"',
     position: 'absolute',
-    top: 0,
-    left: 8,
-    fontSize: '2xs',
+    top: '0',
+    left: '2',
+    fontSize: 'xxs',
     fontWeight: 500,
     lineHeight: '1',
     color: 'mantine.colors.dimmed',
@@ -75,7 +75,7 @@ export const edgeNum = css({
   display: 'inline-block',
   fontSize: 'xl',
   fontWeight: 600,
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   minWidth: 24,
   textAlign: 'center',
   borderRadius: 'sm',

package/src/overlays/overlay/Overlay.css.ts

@@ -10,7 +10,7 @@ const inset = '--_inset'
 const borderRadius = '--_border-radius'
 const dialog = css.raw({
   boxSizing: 'border-box',
-  margin: 0,
+  margin: '0',
   position: 'fixed',
   width: '100vw',
   height: '100vh',
@@ -30,13 +30,13 @@ const dialog = css.raw({
   _backdrop: {
     cursor: 'zoom-out',
   },
-  inset: 0,
-  padding: 0,
+  inset: '0',
+  padding: '0',
 })
 
 const body = css.raw({
   position: 'relative',
-  containerName: 'overlay-dialog',
+  containerName: 'likec4-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
   overflow: 'hidden',
@@ -60,7 +60,7 @@ export const overlay = sva({
             width: 'calc(100vw - 2 * var(--_inset))',
             height: 'calc(100vh - var(--_offset) - var(--_inset))',
             [borderRadius]: '6px',
-            padding: '6px',
+            padding: '1.5', // 6px
             [offset]: '1rem',
           },
           md: {
@@ -81,8 +81,8 @@ export const overlay = sva({
       },
       true: {
         dialog: {
-          inset: 0,
-          padding: 0,
+          inset: '0',
+          padding: '0',
         },
       },
     },

package/src/overlays/relationship-details/SelectEdge.css.ts

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css'
 const edgeEnpoint = css.raw({
   display: 'inline-flex',
   alignItems: 'center',
-  padding: '6px 2px 0 2px',
+  padding: '[6px 2px 0 2px]',
   '& .mantine-Text-root': {
     color: 'mantine.colors.text/90',
     fontSize: 'xs',
@@ -13,7 +13,7 @@ const edgeEnpoint = css.raw({
 })
 
 export const edgeSource = css({
-  paddingLeft: 4,
+  paddingLeft: '1',
   gridColumn: 1,
 }, edgeEnpoint)
 
@@ -23,7 +23,7 @@ export const edgeArrow = css({
 
 export const edgeTarget = css({
   gridColumn: 3,
-  paddingRight: 4,
+  paddingRight: '1',
 }, edgeEnpoint)
 
 const edgeLabelclass = 'likec4-edge-label'
@@ -35,8 +35,8 @@ export const edgeLabel = cx(
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
     borderBottomColor: 'mantine.colors.defaultBorder',
-    marginBottom: '0px',
-    padding: '0 4px 5px 4px',
+    marginBottom: '0',
+    padding: '[0 4px 5px 4px]',
     width: '100%',
     '& .mantine-Text-root': {
       fontSize: 'xxs',
@@ -51,7 +51,7 @@ export const edgeRow = css({
   display: 'contents',
   [`&:last-child .${edgeLabelclass}`]: {
     borderBottom: 'none',
-    marginBottom: 0,
+    marginBottom: '0',
   },
   '& > *': {
     transition: 'all 0.15s ease-in',
@@ -67,7 +67,7 @@ export const edgeGrid = css({
   display: 'grid',
   gridTemplateColumns: '1fr 30px 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: 0,
+  gap: '0',
   alignItems: 'stretch',
 })
 
@@ -75,7 +75,7 @@ export const edgeDataGrid = css({
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: '10px 12px',
+  gap: '[10px 12px]',
   alignItems: 'baseline',
   justifyItems: 'start',
 })

package/src/overlays/relationships-browser/SelectElement.css.ts

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css'
 
 export const node = css({
-  margin: 0,
+  margin: '0',
 })
 
 export const label = css({

package/src/search/Search.tsx

@@ -40,8 +40,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: '100%',
   height: '100%',
   maxHeight: '100vh',
@@ -50,10 +50,10 @@ const body = css({
   flexDirection: 'column',
   justifyContent: 'stretch',
   gap: 'sm',
-  paddingTop: 20,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 8,
+  paddingTop: '[20px]',
+  paddingLeft: 'md',
+  paddingRight: 'md',
+  paddingBottom: 'sm',
   background: '[transparent]',
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,

package/src/search/components/ElementsColumn.css.ts

@@ -7,7 +7,7 @@ const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`
 
 export const treeNode = css({
   outline: 'none',
-  marginBottom: '8px',
+  marginBottom: '2',
 })
 export const treeRoot = css(
   container.raw({
@@ -22,10 +22,10 @@ export const treeLabel = css({
   display: 'flex',
   alignItems: 'baseline',
   outline: 'none !important',
-  gap: '4px',
+  gap: '1',
 })
 export const treeSubtree = css({
-  marginTop: '8px',
+  marginTop: '2',
 })
 
 // const iconSize = '--likec4-icon-size'
@@ -44,7 +44,7 @@ export const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: 'column-reverse',
     alignItems: 'flex-start',
-    gap: 2,
+    gap: '0.5',
   },
 })
 
@@ -56,7 +56,7 @@ export const elementId = css({
   display: 'block',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   borderRadius: '4px',
   background: `mantine.colors.dark[9]/30`,
   _light: {

package/src/search/components/SearchByTags.tsx

@@ -29,13 +29,13 @@ export function SearchByTags() {
       ref={ref}
       css={{
         gap: 'md',
-        paddingLeft: 48,
+        paddingLeft: '[48px]',
         flexWrap: 'nowrap',
       }}
     >
       <HStack
         css={{
-          gap: 6,
+          gap: '1.5', // 6px
           flexWrap: 'wrap',
           opacity: isFiltered ? 1 : .3,
           grayscale: isFiltered ? 0 : .9,

package/src/search/components/ViewsColum.tsx

@@ -43,7 +43,7 @@ export const ViewsColumn = memo(() => {
         if (search.startsWith('#')) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
-        return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
+        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search)
       })
     }
   }

package/src/search/components/ViewsColumn.css.ts

@@ -23,7 +23,7 @@ export const viewButton = cx(
 // export const viewDescription = css(description)
 
 export const viewButtonDescription = css({
-  marginTop: '4px',
+  marginTop: '1',
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: '13px',

package/src/search/components/_shared.css.ts

@@ -17,9 +17,9 @@ const button = css.raw({
   width: '100%',
   background: 'mantine.colors.body',
   rounded: 'sm',
-  padding: `12px 8px 12px 14px`,
+  padding: `[12px 8px 12px 14px]`,
   minHeight: '60px',
-  gap: 8,
+  gap: '2',
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -139,7 +139,7 @@ const descriptionColor = css.raw({
 })
 
 const description = css.raw(descriptionColor, {
-  marginTop: '4px',
+  marginTop: '1',
   fontSize: '12px',
   lineHeight: '1.4',
 

package/src/search/components/styles.css.ts

@@ -18,7 +18,7 @@ export const input = css({
 
 export const pickviewBackdrop = css({
   position: 'absolute',
-  inset: 0,
+  inset: '0',
   width: '100%',
   height: '100%',
   backgroundColor: '[rgb(34 34 34 / 0.7)]',
@@ -31,8 +31,8 @@ export const pickviewBackdrop = css({
 })
 export const pickview = css({
   position: 'absolute',
-  top: '2rem',
-  left: '50%',
+  top: '[2rem]',
+  left: '[50%]',
   width: '100%',
   maxWidth: '600px',
   minWidth: '200px',
@@ -41,9 +41,9 @@ export const pickview = css({
 })
 
 export const pickviewGroup = css({
-  marginTop: '8px',
+  marginTop: '2',
   '& + &': {
-    marginTop: '32px',
+    marginTop: '[32px]',
   },
 })
 

package/src/state/DiagramActorProvider.tsx

@@ -1,20 +1,25 @@
 import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef } from 'react'
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { ErrorBoundary } from '../components/ErrorFallback'
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import type { PaddingWithUnit } from '../LikeC4Diagram.props'
+import { useCurrentViewId } from '../hooks/useCurrentViewId'
+import type { ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
+import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorSnapshot } from './types'
+import type { DiagramActorRef, DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => {
-  if (state.context.features.enableReadOnly) {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
     return {
       ...state.context.toggledFeatures,
       enableReadOnly: true,
@@ -35,32 +40,16 @@ export function DiagramActorProvider({
   view: DiagramView
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: PaddingWithUnit
+  fitViewPadding: ViewPadding
   nodesSelectable: boolean
   where: WhereOperator | null
 }>) {
-  const handlersRef = useDiagramEventHandlersRef()
+  const { handlersRef } = useDiagramEventHandlers()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
   const machineRef = useRef<DiagramMachine | null>(null)
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        'trigger:NavigateTo': ((_, { viewId }) => {
-          // Slightly defer callback for better responsiveness
-          setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId)
-          }, 40)
-        }),
-
-        'trigger:OnChange': ((_, params) => {
-          handlersRef.current.onChange?.(params)
-        }),
-
-        'trigger:OpenSource': ((_, params) => {
-          handlersRef.current.onOpenSource?.(params)
-        }),
-      },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
@@ -90,14 +79,24 @@ export function DiagramActorProvider({
     },
   )
 
+  useActorEventHandlers(actorRef)
+
   const features = useEnabledFeatures()
-  useEffect(() => {
-    actorRef.send({ type: 'update.features', features })
-  }, [features])
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: 'update.features', features })
+    },
+    [features],
+    shallowEqual,
+  )
 
-  useEffect(() => {
-    actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
-  }, [zoomable, pannable, fitViewPadding, nodesSelectable])
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
+    },
+    [zoomable, pannable, fitViewPadding, nodesSelectable],
+    deepEqual,
+  )
 
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
@@ -114,8 +113,82 @@ export function DiagramActorProvider({
   return (
     <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
-        {children}
+        <ErrorBoundary>
+          <CurrentViewModelProvider>
+            {children}
+          </CurrentViewModelProvider>
+        </ErrorBoundary>
       </DiagramFeatures>
     </DiagramActorContextProvider>
   )
 }
+
+function CurrentViewModelProvider({
+  children,
+}: PropsWithChildren) {
+  const viewId = useCurrentViewId()
+  const likec4model = useLikeC4Model()
+  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId))
+
+  useEffect(() => {
+    setViewmodel(current => {
+      const nextviewmodel = likec4model.findView(viewId)
+      if (!nextviewmodel) {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+          currentViewModel: current,
+          likec4model,
+        })
+        return current
+      }
+      return nextviewmodel
+    })
+  }, [likec4model, viewId])
+
+  if (!viewmodel.isDiagram()) {
+    console.warn(`View "${viewId}" is not diagram.\nMake sure you have LikeC4ModelProvider with layouted model.`)
+  }
+  return (
+    <CurrentViewModelContext.Provider value={viewmodel}>
+      {children}
+    </CurrentViewModelContext.Provider>
+  )
+}
+
+function useActorEventHandlers(
+  actorRef: DiagramActorRef,
+) {
+  const {
+    onChange,
+    onNavigateTo,
+    onOpenSource,
+  } = useDiagramEventHandlers()
+
+  useEffect(() => {
+    if (!onChange) return
+    const subscription = actorRef.on('viewChange', ({ change }) => onChange({ change }))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onChange])
+
+  useEffect(() => {
+    if (!onNavigateTo) return
+    let frame: number
+
+    const subscription = actorRef.on('navigateTo', ({ viewId }) => {
+      cancelAnimationFrame(frame)
+      // Slightly defer callback for better responsiveness
+      frame = requestAnimationFrame(() => {
+        onNavigateTo(viewId)
+      })
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+      subscription.unsubscribe()
+    }
+  }, [actorRef, onNavigateTo])
+
+  useEffect(() => {
+    if (!onOpenSource) return
+    const subscription = actorRef.on('openSource', ({ params }) => onOpenSource(params))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onOpenSource])
+}

package/src/state/diagram-machine.ts

@@ -35,6 +35,7 @@ import {
   assertEvent,
   assign,
   cancel,
+  emit,
   enqueueActions,
   or,
   raise,
@@ -46,7 +47,7 @@ import {
 import { MinZoom } from '../base/const'
 import { Base } from '../base/types'
 import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/DiagramFeatures'
-import type { OpenSourceParams, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints'
 import { overlaysActorLogic } from '../overlays/overlaysActor'
@@ -85,7 +86,7 @@ export interface Input {
   xystore: XYStoreApi
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: PaddingWithUnit
+  fitViewPadding: ViewPadding
   nodesSelectable: boolean
 }
 
@@ -179,6 +180,11 @@ export type Events =
   | { type: 'tag.unhighlight' }
   | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
+export type EmittedEvents =
+  | { type: 'navigateTo'; viewId: ViewId }
+  | { type: 'viewChange'; change: ViewChange }
+  | { type: 'openSource'; params: OpenSourceParams }
+
 export type ActionArg = { context: Context; event: Events }
 
 // TODO: naming convention for actors
@@ -193,6 +199,7 @@ const _diagramMachine = setup({
       search: 'searchActorLogic'
     },
     events: {} as Events,
+    emitted: {} as EmittedEvents,
   },
   actors: {
     syncManualLayoutActorLogic,
@@ -241,14 +248,20 @@ const _diagramMachine = setup({
     },
   },
   actions: {
-    'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
-      // navigate to view
-    },
-    'trigger:OnChange': (_, _params: { change: ViewChange }) => {
-      // apply change
-    },
-    'trigger:OpenSource': (_, _params: OpenSourceParams) => {
-    },
+    'trigger:NavigateTo': emit(({ context }) => ({
+      type: 'navigateTo',
+      viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
+    })),
+
+    'trigger:OnChange': emit((_, _params: { change: ViewChange }) => ({
+      type: 'viewChange',
+      change: _params.change,
+    })),
+
+    'trigger:OpenSource': emit((_, _params: OpenSourceParams) => ({
+      type: 'openSource',
+      params: _params,
+    })),
 
     'assign lastClickedNode': assign(({ context, event }) => {
       assertEvent(event, 'xyflow.nodeClick')
@@ -1023,14 +1036,7 @@ const _diagramMachine = setup({
         'closeAllOverlays',
         'closeSearch',
         'stopSyncLayout',
-        enqueueActions(({ enqueue, context }) => {
-          enqueue({
-            type: 'trigger:NavigateTo',
-            params: {
-              viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
-            },
-          })
-        }),
+        'trigger:NavigateTo',
       ],
       on: {
         'update.view': {

package/dist/LikeC4CustomColors.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LikeC4CustomColors: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/LikeC4CustomColors.js

@@ -1,45 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import '@likec4/core';
-import { useMantineStyleNonce } from '@mantine/core';
-import { memo, useState } from 'react';
-import { isEmpty, entries } from 'remeda';
-import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
-import { useUpdateEffect } from './hooks/useUpdateEffect.js';
-
-function toStyle(name, colors) {
-  const darken = (color) => `color-mix(in srgb, ${color} 80%, black)`;
-  return `
-:where([data-likec4-color=${name}]) {
-  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
-  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
-  --colors-likec4-palette-fill: ${colors.elements.fill};
-  --colors-likec4-palette-stroke: ${colors.elements.stroke};
-  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
-  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
-  --colors-likec4-relation-label: ${colors.relationships.labelColor};
-  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
-}
-:where(.likec4-compound-node[data-likec4-color=${name}]) {
-  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
-  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
-}
-  `;
-}
-function generateCustomColorStyles(customColors) {
-  return entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n").trim();
-}
-const LikeC4CustomColors = memo(() => {
-  const customColors = useLikeC4Specification().customColors ?? {};
-  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors));
-  useUpdateEffect(() => {
-    setStyles(generateCustomColorStyles(customColors));
-  }, [customColors]);
-  const nonce = useMantineStyleNonce()?.();
-  if (isEmpty(customColors)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
-});
-LikeC4CustomColors.displayName = "LikeC4CustomColors";
-
-export { LikeC4CustomColors };

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -1,34 +0,0 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
-export declare const iconSize = "--icon-size";
-export declare const elementIcon: string;
-export declare const elementTitle: SlotRecipeRuntimeFn<"root" | "title" | "technology" | "description" | "textContainer", {
-    hasIcon: {
-        false: {};
-        true: {
-            root: {
-                gap: "16px";
-            };
-            textContainer: {
-                minWidth: "calc(50% + var(--icon-size))";
-                alignItems: "flex-start";
-            };
-            title: {
-                textAlign: "left";
-            };
-            description: {
-                textAlign: "left";
-            };
-            technology: {
-                textAlign: "left";
-            };
-        };
-    };
-    hasDescription: {
-        false: {};
-        true: {};
-    };
-    hasTechnology: {
-        false: {};
-        true: {};
-    };
-}>;