@likec4/diagram 1.34.1 → 1.35.0

package/src/LikeC4Diagram.props.ts

@@ -86,6 +86,26 @@ export type OverrideReactFlowProps = Pick<
 export type PaddingUnit = 'px' | '%'
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number
 
+/**
+ * Padding around the diagram
+ *
+ * @example
+ * {
+ *   top: '8px',
+ *   right: '8px',
+ *   bottom: '8px',
+ *   left: '8px',
+ * }
+ */
+export type ViewPadding = PaddingWithUnit | {
+  top?: PaddingWithUnit
+  right?: PaddingWithUnit
+  bottom?: PaddingWithUnit
+  left?: PaddingWithUnit
+  x?: PaddingWithUnit
+  y?: PaddingWithUnit
+}
+
 export interface LikeC4DiagramProperties<A extends aux.Any> {
   view: LayoutedView<A>
 
@@ -108,10 +128,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   readonly?: boolean | undefined
   /**
    * Show/hide panel with top left controls,
+   * - `next` - Experimental navigation panel
    *
    * @default true if not readonly
    */
-  controls?: boolean | undefined
+  controls?: boolean | 'next' | undefined
   /**
    * If set, initial viewport will show all nodes & edges
    * @default true
@@ -121,8 +142,29 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   /**
    * Padding around the diagram
    * @default '8px'
+   *
+   * @see {@link ViewPadding}
+   *
+   * @example
+   * ```tsx
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     x: '16px',
+   *     y: '16px',
+   *   }}
+   * />
+   *
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     top: '8px',
+   *     right: '8px',
+   *     bottom: '8px',
+   *     left: '8px',
+   *   }}
+   * />
+   * ```
    */
-  fitViewPadding?: PaddingWithUnit | undefined
+  fitViewPadding?: ViewPadding | undefined
 
   /**
    * @default false if readonly
@@ -223,8 +265,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   /**
    * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
    * Enable it if you have a large or static view
+   * - `auto` - will be `true` if view has more then 3000 * 2000 pixels
    *
-   * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
+   * @default 'auto'
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
@@ -236,6 +279,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
 
   /**
    * Customize layout of the controls on the top left
+   *
+   * @note
+   * Ignored if `controls="next"`
+   *
+   * @see {@link controls}
    */
   renderControls?: ControlsCustomLayout | undefined
 

package/src/LikeC4ModelProvider.tsx

@@ -1,16 +1,16 @@
 import type { LikeC4Model } from '@likec4/core/model'
-import type { Any, Unknown } from '@likec4/core/types'
+import type { aux } from '@likec4/core/types'
 import { type PropsWithChildren } from 'react'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
 
-export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+export type LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> = PropsWithChildren<{
   likec4model: LikeC4Model<A>
 }>
 
 /**
  * Ensures LikeC4Model context
  */
-export function LikeC4ModelProvider<A extends Any = Unknown>({
+export function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({
   children,
   likec4model,
 }: LikeC4ModelProviderProps<A>) {

package/src/base/BaseXYFlow.tsx

@@ -10,7 +10,7 @@ import { Fragment, useMemo } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
-import type { PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { ViewPadding } from '../LikeC4Diagram.props'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
 import { MaxZoom, MinZoom } from './const'
@@ -23,7 +23,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean
     nodesDraggable?: boolean
     background?: 'transparent' | 'solid' | XYBackground
-    fitViewPadding?: PaddingWithUnit | undefined
+    fitViewPadding?: ViewPadding | undefined
     onViewportResize?: undefined | (() => void)
   }
   & SetRequired<
@@ -122,12 +122,12 @@ export const BaseXYFlow = <
       maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
-      fitViewOptions={useMemo(() => ({
+      fitViewOptions={{
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
         includeHiddenNodes: false,
-      }), [fitViewPadding])}
+      }}
       preventScrolling={zoomable || pannable}
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -7,7 +7,7 @@ import {
   DefaultTextSize,
 } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import type { LayoutProps } from 'motion/react'
+import type { MotionNodeLayoutOptions } from 'motion/react'
 import * as m from 'motion/react-m'
 import { type CSSProperties, type ReactNode, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
@@ -27,7 +27,7 @@ export type ElementNodeContainerProps =
     style?: CSSProperties | undefined
     [key: `data-${string}`]: string | undefined
   }
-  & LayoutProps
+  & MotionNodeLayoutOptions
 
 export function nodeSizes({
   size,

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,6 +1,7 @@
 import type { DiagramNode, RichTextOrEmpty } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
+import { elementNodeData, elementNodeIcon as elementIconRecipe } from '@likec4/styles/recipes'
 import { Text } from '@mantine/core'
 import { isEmpty, isNumber, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
@@ -8,7 +9,6 @@ import { IconRenderer } from '../../../context/IconRenderer'
 import type { NodeProps, NonOptional } from '../../types'
 import { MarkdownBlock } from '../MarkdownBlock'
 import { nodeSizes } from './ElementNodeContainer'
-import * as styles from './ElementTitle.css'
 
 type Data = Simplify<
   & NonOptional<
@@ -37,9 +37,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       title: data.title,
       icon: data.icon,
     },
-    className: styles.elementIcon,
+    className: elementIconRecipe(),
   })
-  const classes = styles.elementTitle({
+  const classes = elementNodeData({
     hasIcon: isTruthy(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? ''),
@@ -56,7 +56,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       style={isNumber(iconSize)
         ? {
           // @ts-ignore
-          [styles.iconSize]: `${iconSize}px`,
+          ['--likec4-icon-size']: `${iconSize}px`,
         }
         : undefined}
     >

package/src/bundle/LikeC4View.props.ts

@@ -1,7 +1,13 @@
 import type { WhereOperator } from '@likec4/core/types'
 import type * as aux from '@likec4/core/types/_aux'
 import type { CSSProperties } from 'react'
-import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type {
+  CustomNodes,
+  ElementIconRenderer,
+  OverrideReactFlowProps,
+  PaddingWithUnit,
+  ViewPadding,
+} from '../LikeC4Diagram.props'
 
 export interface LikeC4ViewProps<A extends aux.Any> {
   /**
@@ -69,8 +75,10 @@ export interface LikeC4ViewProps<A extends aux.Any> {
   /**
    * Padding around the diagram
    * @default '8px'
+   *
+   * @see {@link ViewPadding}
    */
-  fitViewPadding?: PaddingWithUnit | undefined
+  fitViewPadding?: ViewPadding | undefined
 
   /**
    * Display diagram title / description
@@ -182,9 +190,11 @@ export interface LikeC4BrowserProps {
 
   /**
    * Show/hide panel with top left controls,
-   * @default true
+   * - `next` - show navigation panel (Experimental)
+   *
+   * @default `next`
    */
-  controls?: boolean | undefined
+  controls?: boolean | 'next' | undefined
 
   /**
    * Display diagram title / description

package/src/bundle/LikeC4View.tsx

@@ -69,7 +69,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
   renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model('layouted')
+  const likec4model = useLikeC4Model()
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
@@ -159,7 +159,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
                 enableRelationshipDetails
                 enableSearch
                 enableElementTags
-                controls
+                controls="next"
                 readonly
                 fitView
                 fitViewPadding={'32px'}

package/src/components/ErrorFallback.tsx

@@ -1,7 +1,11 @@
 import { Box } from '@likec4/styles/jsx'
 import { Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
-import type { FallbackProps } from 'react-error-boundary'
+import {
+  type ErrorBoundaryProps,
+  type FallbackProps,
+  ErrorBoundary as ErrorBoundaryComponent,
+} from 'react-error-boundary'
 
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const errorString = error instanceof Error ? error.message : 'Unknown error'
@@ -28,3 +32,14 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
     </Box>
   )
 }
+
+export function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>) {
+  return (
+    <ErrorBoundaryComponent
+      FallbackComponent={ErrorFallback}
+      onError={(err, info) => {
+        console.error(err, info)
+      }}
+      {...props} />
+  )
+}

package/src/components/NavigationLink.tsx

@@ -0,0 +1,31 @@
+import { cx } from '@likec4/styles/css'
+import { navigationLink } from '@likec4/styles/recipes'
+import { type NavLinkProps, NavLink } from '@mantine/core'
+import { forwardRef } from 'react'
+
+export interface NavigationLinkProps
+  extends NavLinkProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof NavLinkProps>
+{
+  truncateLabel?: boolean
+}
+
+export const NavigationLink = forwardRef<HTMLButtonElement, NavigationLinkProps>((
+  { className, truncateLabel = true, ...others },
+  ref,
+) => (
+  <NavLink
+    {...others}
+    component="button"
+    classNames={navigationLink({
+      truncateLabel,
+    })}
+    className={cx(
+      'group',
+      'mantine-active',
+      className,
+    )}
+    ref={ref}
+  />
+))
+
+NavigationLink.displayName = 'NavigationLink'

package/src/context/ControlsCustomLayout.ts

@@ -6,7 +6,6 @@ export type ControlsCustomLayoutProps = {
   navigationButtons: ReactNode
   search: ReactNode
   actionsGroup: ReactNode
-  syncInProgressBadge: ReactNode
 }
 export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
 

package/src/context/DiagramFeatures.tsx

@@ -25,8 +25,13 @@ const FeatureNames = [
   'ElementTags',
 ] as const
 export type FeatureName = typeof FeatureNames[number]
+
+type CustomFeatures = {
+  enableControls: 'next' | boolean
+}
+
 export type EnabledFeatures = {
-  [P in `enable${FeatureName}`]: boolean
+  [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean
 }
 
 export const AllDisabled: EnabledFeatures = mapToObj(

package/src/custom/customNodes.tsx

@@ -1,10 +1,11 @@
 import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
 import type { Any } from '@likec4/core/types'
+import { DEV } from 'esm-env'
 import type { ReactNode } from 'react'
 import { customNode } from '../base/primitives'
 import type { NodeProps } from '../base/types'
 import type { Types } from '../likec4diagram/types'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model'
 
 function customDiagramNode<
   P extends {
@@ -15,7 +16,14 @@ function customDiagramNode<
   Node: (props: P) => ReactNode,
 ): (props: P['nodeProps']) => ReactNode {
   return customNode((props) => {
-    const viewModel = useLikeC4Model().view(props.data.viewId)
+    const viewModel = useLikeC4ViewModel(props.data.viewId)
+    if (!viewModel) {
+      if (DEV) {
+        throw new Error(`View "${props.data.viewId}" not found, requested by customNode "${props.id}"`)
+      }
+      console.error(`View "${props.data.viewId}" not found in likec4model`, { props })
+      return null
+    }
     const model = viewModel.node(props.id)
     // @ts-ignore
     return <Node nodeProps={props} nodeModel={model} />

package/src/custom/hooks.ts

@@ -31,6 +31,9 @@ export {
   type XYStoreApi,
 } from '../hooks/useXYFlow'
 
+export {
+  useCurrentViewModel,
+} from '../likec4model/useCurrentViewModel'
 export {
   useLikeC4Model,
   useLikeC4Specification,

package/src/hooks/useDiagram.ts

@@ -252,14 +252,6 @@ export function useDiagramActorSnapshot<T = unknown>(
   return useXstateSelector(actorRef, useCallbackRef(selector), compare)
 }
 
-export function useDiagramSyncLayoutState<T = unknown>(
-  selector: (state: SyncLayoutActorSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-): T {
-  const syncLayoutActorRef = useDiagramActorSnapshot(s => s.context.syncLayoutActorRef as SyncLayoutActorRef)
-  return useXstateSelector(syncLayoutActorRef, useCallbackRef(selector), compare)
-}
-
 /**
  * Read diagram context
  */

package/src/likec4diagram/DiagramUI.tsx

@@ -2,12 +2,14 @@ import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
 import { useSearchActorRef } from '../hooks/useSearchActor'
+import { NavigationPanel } from '../navigationpanel'
 import { Overlays } from '../overlays/Overlays'
 import { Search } from '../search/Search'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export const DiagramUI = memo(() => {
   const {
+    enableControls,
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
@@ -19,11 +21,15 @@ export const DiagramUI = memo(() => {
 
   return (
     <>
-      <Controls />
+      {enableControls === 'next' ? <NavigationPanel /> : <Controls />}
       {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
-      {enableViewTitle && <DiagramTitlePanel />}
       {enableNotations && <NotationPanel />}
-      {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {enableControls !== 'next' && (
+        <>
+          {enableViewTitle && <DiagramTitlePanel />}
+          {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+        </>
+      )}
       {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
     </>
   )

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -39,9 +39,9 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.initialized === b.initialized &&
   a.pannable === b.pannable &&
   a.zoomable === b.zoomable &&
-  a.fitViewPadding === b.fitViewPadding &&
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
+  shallowEqual(a.fitViewPadding, b.fitViewPadding) &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
   shallowEqual(a.viewport ?? null, b.viewport ?? null)

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -1,4 +1,5 @@
 import { cx } from '@likec4/styles/css'
+import { hstack } from '@likec4/styles/patterns'
 import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { LayoutGroup, m } from 'motion/react'
@@ -7,7 +8,7 @@ import { SearchControl } from '../../../components/SearchControl'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
@@ -23,9 +24,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
   search,
   actionsGroup,
 }) => (
-  <Group
-    component={m.div}
-    // @ts-expect-error group component not fully polymorphic
+  <m.div
     initial={{
       opacity: 0.05,
       translateX: -30,
@@ -41,13 +40,15 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
       translateX: -30,
       translateY: -10,
     }}
-    align="flex-start"
     className={cx(
+      hstack({
+        gap: 'sm',
+        alignItems: 'flex-start',
+      }),
       'react-flow__panel',
       css.panel,
       'likec4-top-left-panel',
     )}
-    gap="xs"
     onClick={stopPropagation}
   >
     <Stack align="flex-start" gap="xs">
@@ -64,7 +65,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
     <Box>
       {search}
     </Box>
-  </Group>
+  </m.div>
 )
 
 export const Controls = memo(() => {
@@ -110,7 +111,6 @@ export const Controls = memo(() => {
               }}
             />
           )}
-          syncInProgressBadge={<SyncLayoutBadge />}
           actionsGroup={
             <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
               {enableVscode && (
@@ -151,13 +151,3 @@ export const Controls = memo(() => {
     </>
   )
 })
-
-const SyncLayoutBadge = () => {
-  const isPending = useDiagramSyncLayoutState(s => s.hasTag('pending'))
-  if (!isPending) return null
-  return (
-    <Badge color="pink" radius={'xs'} size="xs" variant="light" leftSection={<Loader color={'orange'} size={8} />}>
-      Pending...
-    </Badge>
-  )
-}

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -19,6 +19,7 @@ export const NavigationButtons = () => {
     <AnimatePresence>
       {hasStepBack && (
         <ActionIcon
+          variant="subtle"
           component={m.button}
           onClick={e => {
             e.stopPropagation()
@@ -38,6 +39,7 @@ export const NavigationButtons = () => {
       )}
       {hasStepForward && (
         <ActionIcon
+          variant="subtle"
           component={m.button}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(10px)' }}

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

@@ -7,25 +7,28 @@ 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 type { DiagramContext } from '../../../state/types'
 import * as styles from './DiagramTitlePanel.css'
 
 function selector(context: DiagramContext) {
   return {
-    id: context.view.id,
-    title: context.view.title ?? 'untitled',
-    description: RichText.from(context.view.description),
-    links: context.view.links,
+    // id: context.view.id,
+    // title: context.view.title ?? 'untitled',
+    // description: RichText.from(context.view.description),
+    // links: context.view.links,
     isNotActiveWalkthrough: context.activeWalkthrough === null,
   }
 }
 
 export function DiagramTitlePanel() {
-  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(selector)
+  const view = useCurrentViewModel()
+  const { isNotActiveWalkthrough } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,
   })
+  const title = view.title ?? 'untitled'
   const toggle = () => setCollapsed(v => !v)
 
   return (
@@ -124,10 +127,10 @@ export function DiagramTitlePanel() {
                       userSelect: 'all',
                     }}>
                     <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                    {id}
+                    {view.id}
                   </Text>
                 </Group>
-                {description.nonEmpty && (
+                {view.description.nonEmpty && (
                   <Spoiler
                     maxHeight={60}
                     showLabel={
@@ -143,10 +146,10 @@ export function DiagramTitlePanel() {
                     <MarkdownBlock
                       className={styles.description}
                       textScale={0.9}
-                      value={description} />
+                      value={view.description} />
                   </Spoiler>
                 )}
-                {description.isEmpty && (
+                {view.description.isEmpty && (
                   <Text
                     component={'div'}
                     size="xs"
@@ -154,13 +157,13 @@ export function DiagramTitlePanel() {
                     no description
                   </Text>
                 )}
-                {links && (
+                {view.links.length > 0 && (
                   <Stack
                     mt={'xs'}
                     gap={4}
                     justify="stretch"
                     align="stretch">
-                    {links.map((link) => <Link value={link} key={link.url} />)}
+                    {view.links.map((link) => <Link value={link} key={link.url} />)}
                   </Stack>
                 )}
               </>

package/src/likec4model/LikeC4ModelContext.ts

@@ -1,4 +1,8 @@
-import type { LikeC4Model } from '@likec4/core/model'
+import type { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
+import type { aux, DiagramView } from '@likec4/core/types'
 import { createContext } 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)

package/src/likec4model/index.ts

@@ -1,3 +1,6 @@
+export {
+  useCurrentViewModel,
+} from './useCurrentViewModel'
 export {
   useLikeC4ElementsTree,
 } from './useLikeC4ElementsTree'

package/src/likec4model/useCurrentViewModel.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { type CurrentViewModel, CurrentViewModelContext } from './LikeC4ModelContext'
+
+export function useCurrentViewModel(): CurrentViewModel {
+  const vm = useContext(CurrentViewModelContext)
+  if (!vm) {
+    throw new Error('No LikeC4ViewModel in context found')
+  }
+  return vm
+}