@likec4/diagram 1.36.0 → 1.36.1

package/dist/likec4diagram/DiagramUI.js

@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
+import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
@@ -22,7 +23,7 @@ const DiagramUI = memo(() => {
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    enableControls === "next" ? /* @__PURE__ */ jsx(NavigationPanel, {}) : /* @__PURE__ */ jsx(Controls, {}),
+    enableControls === "next" ? /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }) : /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableControls !== "next" && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -5,8 +5,8 @@ import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
+import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
-import { useCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
 import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
 
@@ -20,15 +20,15 @@ function selector(context) {
   };
 }
 function DiagramTitlePanel() {
-  const view = useCurrentViewModel();
+  const view = useOptionalCurrentViewModel();
   const { isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
-  const title$1 = view.title ?? "untitled";
+  const title$1 = view?.title ?? "untitled";
   const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: view && isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0.05, scale: 0.7 },

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,6 +1,7 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
 import { aux, DiagramView } from '@likec4/core/types';
-import { Context } from 'react';
+import { PropsWithChildren, Context } from 'react';
 export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
 export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>;
 export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;
+export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,6 +1,14 @@
-import { createContext } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
 const CurrentViewModelContext = createContext(null);
+function EnsureCurrentViewModel({ children }) {
+  const viewmodel = useContext(CurrentViewModelContext);
+  if (!viewmodel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 
-export { CurrentViewModelContext, LikeC4ModelContext };
+export { CurrentViewModelContext, EnsureCurrentViewModel, LikeC4ModelContext };

package/dist/likec4model/useCurrentViewModel.d.ts

@@ -1,2 +1,3 @@
 import { CurrentViewModel } from './LikeC4ModelContext';
+export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
 export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/likec4model/useCurrentViewModel.js

@@ -1,6 +1,9 @@
 import { useContext } from 'react';
 import { CurrentViewModelContext } from './LikeC4ModelContext.js';
 
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
 function useCurrentViewModel() {
   const vm = useContext(CurrentViewModelContext);
   if (!vm) {
@@ -9,4 +12,4 @@ function useCurrentViewModel() {
   return vm;
 }
 
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/navigationpanel/controls/OpenSource.js

@@ -19,7 +19,7 @@ const OpenSource = () => {
         e.stopPropagation();
         onOpenSource?.({ view: viewId });
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5, style: { width: "65%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { style: { width: "60%", height: "60%" } })
     }
   ) });
 };

package/dist/state/DiagramActorProvider.js

@@ -8,7 +8,6 @@ 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';
@@ -90,31 +89,31 @@ 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: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { viewId: view.id, children }) }) }) });
 }
 function CurrentViewModelProvider({
-  children
+  children,
+  viewId
 }) {
-  const viewId = useCurrentViewId();
   const likec4model = useLikeC4Model();
-  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId));
+  const [viewmodel, setViewmodel] = useState(() => likec4model.findView(viewId));
   useEffect(() => {
     setViewmodel((current) => {
       const nextviewmodel = likec4model.findView(viewId);
       if (!nextviewmodel) {
-        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current?.id}`, {
           currentViewModel: current,
           likec4model
         });
         return current;
       }
+      if (!nextviewmodel.isDiagram()) {
+        console.warn(`View "${viewId}" is not diagram.
+Make sure you have LikeC4ModelProvider with layouted model.`);
+      }
       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) {