@likec4/diagram 1.36.0 → 1.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -87,8 +87,8 @@
     "remeda": "^2.23.1",
     "type-fest": "^4.41.0",
     "xstate": "^5.20.1",
-    "@likec4/core": "1.36.0",
-    "@likec4/styles": "1.36.0"
+    "@likec4/core": "1.36.1",
+    "@likec4/styles": "1.36.1"
   },
   "peerDependencies": {
     "@pandacss/dev": "^0.54.0",
@@ -118,7 +118,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.36.0"
+    "@likec4/tsconfig": "1.36.1"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/src/likec4diagram/DiagramUI.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
 import { useSearchActorRef } from '../hooks/useSearchActor'
+import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext'
 import { NavigationPanel } from '../navigationpanel'
 import { Overlays } from '../overlays/Overlays'
 import { Search } from '../search/Search'
@@ -15,13 +16,18 @@ export const DiagramUI = memo(() => {
     enableDynamicViewWalkthrough,
     enableSearch,
   } = useEnabledFeatures()
-
   const overlaysActorRef = useOverlaysActorRef()
   const searchActorRef = useSearchActorRef()
 
   return (
     <>
-      {enableControls === 'next' ? <NavigationPanel /> : <Controls />}
+      {enableControls === 'next'
+        ? (
+          <EnsureCurrentViewModel>
+            <NavigationPanel />
+          </EnsureCurrentViewModel>
+        )
+        : <Controls />}
       {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
       {enableNotations && <NotationPanel />}
       {enableControls !== 'next' && (

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -1,4 +1,3 @@
-import { RichText } from '@likec4/core/types'
 import { cx as clsx } from '@likec4/styles/css'
 import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
@@ -7,7 +6,7 @@ import { AnimatePresence, m } from 'motion/react'
 import { MarkdownBlock } from '../../../base/primitives'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
-import { useCurrentViewModel } from '../../../likec4model'
+import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel'
 import type { DiagramContext } from '../../../state/types'
 import * as styles from './DiagramTitlePanel.css'
 
@@ -22,13 +21,13 @@ function selector(context: DiagramContext) {
 }
 
 export 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 = view.title ?? 'untitled'
+  const title = view?.title ?? 'untitled'
   const toggle = () => setCollapsed(v => !v)
 
   return (
@@ -49,7 +48,7 @@ export function DiagramTitlePanel() {
         </div>
       </ViewportPortal> */
       }
-      {isNotActiveWalkthrough && (
+      {view && isNotActiveWalkthrough && (
         <m.div
           initial={{ opacity: 0.05, scale: 0.7 }}
           animate={{ opacity: 1, scale: 1 }}

package/src/likec4model/{LikeC4ModelContext.ts → LikeC4ModelContext.tsx}

@@ -1,8 +1,16 @@
 import type { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
 import type { aux, DiagramView } from '@likec4/core/types'
-import { createContext } from 'react'
+import { type PropsWithChildren, createContext, useContext } from 'react'
 
 export const LikeC4ModelContext = createContext<LikeC4Model<any> | null>(null)
 
 export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>
 export const CurrentViewModelContext = createContext<CurrentViewModel | null>(null)
+
+export function EnsureCurrentViewModel({ children }: PropsWithChildren) {
+  const viewmodel = useContext(CurrentViewModelContext)
+  if (!viewmodel) {
+    return null
+  }
+  return <>{children}</>
+}

package/src/likec4model/useCurrentViewModel.ts

@@ -1,6 +1,10 @@
 import { useContext } from 'react'
 import { type CurrentViewModel, CurrentViewModelContext } from './LikeC4ModelContext'
 
+export function useOptionalCurrentViewModel(): CurrentViewModel | null {
+  return useContext(CurrentViewModelContext)
+}
+
 export function useCurrentViewModel(): CurrentViewModel {
   const vm = useContext(CurrentViewModelContext)
   if (!vm) {

package/src/navigationpanel/controls/OpenSource.tsx

@@ -21,7 +21,7 @@ export const OpenSource = () => {
           e.stopPropagation()
           onOpenSource?.({ view: viewId })
         }}
-        children={<IconFileSymlink stroke={1.5} style={{ width: '65%' }} />}
+        children={<IconFileSymlink style={{ width: '60%', height: '60%' }} />}
       />
     </Tooltip>
   )

package/src/state/DiagramActorProvider.tsx

@@ -1,4 +1,4 @@
-import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import type { DiagramView, ViewId, WhereOperator } from '@likec4/core/types'
 import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
@@ -8,7 +8,6 @@ import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
@@ -114,7 +113,7 @@ export function DiagramActorProvider({
     <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
         <ErrorBoundary>
-          <CurrentViewModelProvider>
+          <CurrentViewModelProvider viewId={view.id}>
             {children}
           </CurrentViewModelProvider>
         </ErrorBoundary>
@@ -125,28 +124,30 @@ export function DiagramActorProvider({
 
 function CurrentViewModelProvider({
   children,
-}: PropsWithChildren) {
-  const viewId = useCurrentViewId()
+  viewId,
+}: PropsWithChildren<{
+  viewId: ViewId
+}>) {
   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.\nMake sure you have LikeC4ModelProvider with layouted model.`)
+      }
       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}