@likec4/diagram 1.34.2 → 1.36.0

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -12,9 +12,9 @@ import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode, CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

package/dist/overlays/relationships-browser/SelectElement.css.js

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

package/dist/overlays/relationships-browser/SelectElement.js

@@ -7,8 +7,8 @@ import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useLikeC4ElementsTree } from '../../likec4model/useLikeC4ElementsTree.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -4,9 +4,9 @@ import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/search/Search.js

@@ -36,8 +36,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: "100%",
   height: "100%",
   maxHeight: "100vh",
@@ -46,10 +46,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/dist/search/components/ElementsColumn.css.js

@@ -4,7 +4,7 @@ import { container } from '@likec4/styles/patterns';
 const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
 const treeNode = css({
   outline: "none",
-  marginBottom: "8px"
+  marginBottom: "2"
 });
 const treeRoot = css(
   container.raw({
@@ -19,10 +19,10 @@ const treeLabel = css({
   display: "flex",
   alignItems: "baseline",
   outline: "none !important",
-  gap: "4px"
+  gap: "1"
 });
 const treeSubtree = css({
-  marginTop: "8px"
+  marginTop: "2"
 });
 const elementExpandIcon = css({
   color: "mantine.colors.dimmed"
@@ -31,7 +31,7 @@ const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: "column-reverse",
     alignItems: "flex-start",
-    gap: 2
+    gap: "0.5"
   }
 });
 const elementId = css({
@@ -41,7 +41,7 @@ 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/dist/search/components/ElementsColumn.js

@@ -15,7 +15,7 @@ import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {

package/dist/search/components/PickView.js

@@ -6,7 +6,7 @@ import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base/primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);
@@ -29,7 +29,7 @@ function SearchByTags() {
       ref,
       css: {
         gap: "md",
-        paddingLeft: 48,
+        paddingLeft: "[48px]",
         flexWrap: "nowrap"
       },
       children: [
@@ -37,7 +37,8 @@ function SearchByTags() {
           HStack,
           {
             css: {
-              gap: 6,
+              gap: "1.5",
+              // 6px
               flexWrap: "wrap",
               opacity: isFiltered ? 1 : 0.3,
               grayscale: isFiltered ? 0 : 0.9,

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.js

@@ -12,8 +12,8 @@ import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -28,7 +28,7 @@ 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/dist/search/components/ViewsColumn.css.js

@@ -16,7 +16,7 @@ const viewButton = cx(
   _viewBtn
 );
 css({
-  marginTop: "4px",
+  marginTop: "1",
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: "13px",

package/dist/search/components/_shared.css.js

@@ -11,9 +11,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`,
@@ -126,7 +126,7 @@ const descriptionColor = css.raw({
   }
 });
 const description = css.raw(descriptionColor, {
-  marginTop: "4px",
+  marginTop: "1",
   fontSize: "12px",
   lineHeight: "1.4",
   [`:where([data-disabled]) &`]: {

package/dist/search/components/styles.css.js

@@ -16,7 +16,7 @@ const input = css({
 });
 const pickviewBackdrop = css({
   position: "absolute",
-  inset: 0,
+  inset: "0",
   width: "100%",
   height: "100%",
   backgroundColor: "[rgb(34 34 34 / 0.7)]",
@@ -29,8 +29,8 @@ const pickviewBackdrop = css({
 });
 const pickview = css({
   position: "absolute",
-  top: "2rem",
-  left: "50%",
+  top: "[2rem]",
+  left: "[50%]",
   width: "100%",
   maxWidth: "600px",
   minWidth: "200px",
@@ -38,9 +38,9 @@ const pickview = css({
   zIndex: 903
 });
 const pickviewGroup = css({
-  marginTop: "8px",
+  marginTop: "2",
   "& + &": {
-    marginTop: "32px"
+    marginTop: "[32px]"
   }
 });
 css({

package/dist/state/DiagramActorProvider.d.ts

@@ -1,11 +1,11 @@
 import { DiagramView, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { PaddingWithUnit } from '../LikeC4Diagram.props';
+import { ViewPadding } from '../LikeC4Diagram.props';
 export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
-    fitViewPadding: PaddingWithUnit;
+    fitViewPadding: ViewPadding;
     nodesSelectable: boolean;
     where: WhereOperator | null;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/state/DiagramActorProvider.js

@@ -1,17 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
+import { useCustomCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
-import { shallowEqual } from 'fast-equals';
-import { useRef, useEffect } from 'react';
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
+import { shallowEqual, deepEqual } from 'fast-equals';
+import { useRef, useEffect, useState } from 'react';
+import { ErrorBoundary } from '../components/ErrorFallback.js';
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
+import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
+import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
 const selectToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly) {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
     return {
       ...state.context.toggledFeatures,
       enableReadOnly: true
@@ -28,24 +33,11 @@ function DiagramActorProvider({
   where,
   children
 }) {
-  const handlersRef = useDiagramEventHandlersRef();
+  const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
   const machineRef = useRef(null);
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        "trigger:NavigateTo": (_, { viewId }) => {
-          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: {
@@ -73,13 +65,22 @@ function DiagramActorProvider({
       }
     }
   );
+  useActorEventHandlers(actorRef);
   const features = useEnabledFeatures();
-  useEffect(() => {
-    actorRef.send({ type: "update.features", features });
-  }, [features]);
-  useEffect(() => {
-    actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
-  }, [zoomable, pannable, fitViewPadding, nodesSelectable]);
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: "update.features", features });
+    },
+    [features],
+    shallowEqual
+  );
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
+    },
+    [zoomable, pannable, fitViewPadding, nodesSelectable],
+    deepEqual
+  );
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
     where,
@@ -89,7 +90,63 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }) });
+}
+function CurrentViewModelProvider({
+  children
+}) {
+  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.
+Make sure you have LikeC4ModelProvider with layouted model.`);
+  }
+  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
+}
+function useActorEventHandlers(actorRef) {
+  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;
+    const subscription = actorRef.on("navigateTo", ({ viewId }) => {
+      cancelAnimationFrame(frame);
+      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]);
 }
 
 export { DiagramActorProvider };