@likec4/diagram 1.34.2 → 1.36.0

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -7,7 +7,7 @@ export const menuDropdown = css({
 })
 
 export const menuItemRelationship = css({
-  gap: 4,
+  gap: '1',
 })
 
 export const endpoint = css({
@@ -15,17 +15,17 @@ export const endpoint = css({
   fontSize: 'xxs',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '2px 4px',
-  borderRadius: 2,
-  background: `likec4.palette.fill/30`,
+  padding: '[2px 4px]',
+  borderRadius: '[2px]',
+  background: `var(--likec4-palette-fill)/30`,
   lineHeight: '[1.11]',
   mixBlendMode: 'hard-light',
   color: {
-    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
-    _dark: 'likec4.palette.loContrast',
+    _light: `[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]`,
+    _dark: 'var(--likec4-palette-loContrast)',
   },
   // _dark: {
-  //   background: `likec4.palette.fill/60`,
+  //   background: `var(--likec4-palette-fill)/60`,
   // },
 })
 

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -5,7 +5,7 @@ import {
   nameFromFqn,
 } from '@likec4/core'
 import type { LikeC4Model } from '@likec4/core/model'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import {
   type StackProps,
   ActionIcon,
@@ -203,11 +203,11 @@ const Relationship = forwardRef<
   return (
     <Stack ref={ref} className={cx(styles.menuItemRelationship, className)} {...props}>
       <Group gap={4}>
-        <Text component="div" className={cx(css({ likec4Palette: sourceNode.color }), styles.endpoint)}>
+        <Text component="div" data-likec4-color={sourceNode.color} className={styles.endpoint}>
           {sourceId}
         </Text>
         <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
-        <Text component="div" className={cx(css({ likec4Palette: targetNode.color }), styles.endpoint)}>
+        <Text component="div" data-likec4-color={targetNode.color} className={styles.endpoint}>
           {targetId}
         </Text>
         {(navigateTo || !!onOpenSource) && (

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -6,14 +6,14 @@ export const controlPointsContainer = css({
   overflow: 'visible',
   position: 'absolute',
   pointerEvents: 'none',
-  top: 0,
-  left: 0,
+  top: '0',
+  left: '0',
   mixBlendMode: 'normal',
 })
 
 export const controlPoint = css({
-  fill: `likec4.relation.stroke`,
-  stroke: `likec4.relation.stroke`,
+  fill: `var(--likec4-palette-relation-stroke)`,
+  stroke: `var(--likec4-palette-relation-stroke)`,
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: 'grab',

package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx

@@ -105,8 +105,8 @@ function BorderStyleOption({
         }}
         styles={{
           label: {
-            paddingTop: 2,
-            paddingBottom: 2,
+            paddingTop: '0.5',
+            paddingBottom: '0.5',
           },
         }}
         data={[

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/controls/styles.css.ts

@@ -1,16 +1,16 @@
 import { css } from '@likec4/styles/css'
 
 export const navigationButtons = css({
-  gap: 'micro',
+  gap: 'xxs',
   _empty: {
     display: 'none',
   },
 })
 
 export const panel = css({
-  top: '1rem',
-  left: '1rem',
-  margin: 0,
+  top: 'md',
+  left: 'md',
+  margin: '0',
   pointerEvents: 'none',
   '& :where(button, .action-icon, [role=\'dialog\'])': {
     pointerEvents: 'all',
@@ -47,7 +47,7 @@ export const autolayoutButton = css({
   flex: '1 1 40%',
   textAlign: 'center',
   fontWeight: 500,
-  padding: '4px 6px',
+  padding: '[4px 6px]',
   fontSize: '11px',
   zIndex: 1,
 })

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/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,10 +1,10 @@
 import { css } from '@likec4/styles/css'
 
 export const container = css({
-  bottom: 0,
-  right: 0,
-  padding: 8,
-  margin: 0,
+  bottom: '0',
+  right: '0',
+  padding: '2',
+  margin: '0',
 })
 
 export const icon = css({
@@ -35,7 +35,7 @@ export const card = css({
 })
 
 export const tabPanel = css({
-  padding: '2xs',
+  padding: 'xxs',
 })
 
 // export const description = css({
@@ -69,8 +69,8 @@ export const elementNotation = css({
 })
 
 export const shapeSvg = css({
-  fill: 'likec4.palette.fill',
-  stroke: 'likec4.palette.stroke',
+  fill: 'var(--likec4-palette-fill)',
+  stroke: 'var(--likec4-palette-stroke)',
   strokeWidth: 1,
   overflow: 'visible',
   width: '100%',
@@ -84,8 +84,8 @@ export const shapeSvg = css({
 export const shapeBadge = css({
   fontWeight: 500,
   letterSpacing: '0.2px',
-  paddingTop: 0,
-  paddingBottom: 0,
+  paddingTop: '0',
+  paddingBottom: '0',
   textTransform: 'lowercase',
   transition: 'all 150ms ease-in-out',
   cursor: 'pointer',
@@ -94,6 +94,6 @@ export const shapeBadge = css({
   ['--badge-padding-x']: '3px',
   ['--badge-height']: '13.5px',
   ['--badge-lh']: '1',
-  ['--badge-bg']: '{colors.likec4.palette.fill}',
-  ['--badge-color']: '{colors.likec4.palette.hiContrast}',
+  ['--badge-bg']: 'var(--likec4-palette-fill)',
+  ['--badge-color']: 'var(--likec4-palette-hiContrast)',
 })

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,5 +1,5 @@
 import { type ComputedNode, type NodeNotation as ElementNotationData } from '@likec4/core'
-import { css, cx, cx as clsx } from '@likec4/styles/css'
+import { cx, cx as clsx } from '@likec4/styles/css'
 import {
   ActionIcon,
   Badge,
@@ -48,9 +48,6 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
       py={'sm'}
       className={cx(
         styles.elementNotation,
-        css({
-          likec4Palette: color,
-        }),
       )}
       data-likec4-color={color}
       onMouseEnter={() => {

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts

@@ -3,17 +3,17 @@ import type { SystemStyleObject } from '@likec4/styles/types'
 
 export const container = css({
   position: 'absolute',
-  bottom: '0.5rem',
-  left: '50%',
+  bottom: 'xxs',
+  left: '[50%]',
   transform: 'translateX(-50%)',
-  padding: 0,
-  margin: 0,
+  padding: '[0px]',
+  margin: '[0px]',
   display: 'flex',
   flexDirection: 'column',
-  gap: '0.4rem',
+  gap: '[0.4rem]',
   alignItems: 'center',
   md: {
-    gap: '0.6rem',
+    gap: '[0.6rem]',
   },
 })
 
@@ -55,10 +55,10 @@ export const btn = css({
 
 export const parallelStateFrame = css({
   position: 'absolute',
-  margin: 0,
-  padding: 0,
-  top: 0,
-  left: 0,
+  margin: '0',
+  padding: '0',
+  top: '0',
+  left: '0',
   width: '100%',
   height: '100%',
   border: `2px solid`,

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/LikeC4ProjectsContext.ts

@@ -0,0 +1,9 @@
+import type { LikeC4Project, ProjectId } from '@likec4/core/types'
+import { createContext } from 'react'
+
+export type LikeC4ProjectsContext = {
+  projects: ReadonlyArray<LikeC4Project>
+  onProjectChange: (id: ProjectId) => void
+}
+
+export const LikeC4ProjectsContext = createContext<LikeC4ProjectsContext | null>(null)

package/src/likec4model/index.ts

@@ -1,3 +1,6 @@
+export {
+  useCurrentViewModel,
+} from './useCurrentViewModel'
 export {
   useLikeC4ElementsTree,
 } from './useLikeC4ElementsTree'
@@ -6,3 +9,11 @@ export {
   useLikeC4Specification,
   useLikeC4ViewModel,
 } from './useLikeC4Model'
+
+export {
+  useChangeLikeC4Project,
+  useHasProjects,
+  useLikeC4ProjectId,
+  useLikeC4Projects,
+  useLikeC4ProjectsContext,
+} from './useLikeC4Project'

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
+}

package/src/likec4model/useLikeC4Model.ts

@@ -1,42 +1,32 @@
 import type { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
-import { useContext } from 'react'
-import { isString } from 'remeda'
+import { deepEqual } from 'fast-equals'
+import { useContext, useEffect, useState } from 'react'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>
-// dprint-ignore
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>
-export function useLikeC4Model(type?: 'layouted' | 'computed') {
+export function useLikeC4Model<A extends aux.Any = aux.UnknownLayouted>(): LikeC4Model<A> {
   const model = useContext(LikeC4ModelContext)
-
   if (!model) {
     throw new Error('LikeC4Model not found. Make sure you have LikeC4ModelProvider.')
   }
-
-  if (isString(type) && model.stage !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`)
-  }
-
   return model
 }
 
-export function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(
-  viewId: aux.LooseViewId<A>,
-): LikeC4ViewModel<aux.toLayouted<A>> | null {
-  const model = useLikeC4Model<A>('layouted')
-  const view = model.findView(viewId)
-  if (!view) {
-    return null
-  }
-  if (!view.isDiagram()) {
-    throw new Error(`View "${viewId}" is not layouted`)
-  }
-  return view as any
+export function useLikeC4ViewModel<A extends aux.Any = aux.UnknownLayouted>(
+  viewId: aux.ViewId<A>,
+): LikeC4ViewModel<A> {
+  const model = useLikeC4Model<A>()
+  // const [view, setView] = useState(() => model.findView(viewId))
+  // useEffect(() => {
+  //   setView(model.findView(viewId))
+  // }, [model, viewId])
+  return model.view(viewId)
 }
 
 export function useLikeC4Specification() {
   const model = useLikeC4Model()
-  return model.$data.specification
+  const [specification, setSpecification] = useState(model.$data.specification)
+  useEffect(() => {
+    setSpecification(current => deepEqual(current, model.$data.specification) ? current : model.$data.specification)
+  }, [model])
+  return specification
 }

package/src/likec4model/useLikeC4Project.ts

@@ -0,0 +1,61 @@
+import { type LikeC4Project, type ProjectId } from '@likec4/core/types'
+import { useContext } from 'react'
+import { LikeC4ModelContext } from './LikeC4ModelContext'
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext'
+
+const emptyProjects: ReadonlyArray<LikeC4Project> = []
+/**
+ * @returns The list of available projects, or empty array if no projects are available.
+ */
+export function useLikeC4Projects(): ReadonlyArray<LikeC4Project> {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return emptyProjects
+  }
+  return ctx.projects
+}
+
+const emptyOnProjectChange: (id: ProjectId) => void = () => {}
+/**
+ * @returns The callback to change current project.
+ */
+export function useChangeLikeC4Project(): (id: ProjectId) => void {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return emptyOnProjectChange
+  }
+  return ctx.onProjectChange
+}
+
+const emptyContext: LikeC4ProjectsContext = {
+  projects: emptyProjects,
+  onProjectChange: emptyOnProjectChange,
+}
+/**
+ * @returns The callback to change current project.
+ */
+export function useLikeC4ProjectsContext(): LikeC4ProjectsContext {
+  return useContext(LikeC4ProjectsContext) ?? emptyContext
+}
+
+/**
+ * @returns True if there are more than one project available in the context.
+ */
+export function useHasProjects(): boolean {
+  const ctx = useContext(LikeC4ProjectsContext)
+  if (!ctx) {
+    return false
+  }
+  return ctx.projects.length > 1
+}
+
+/**
+ * @returns The current project id.
+ */
+export function useLikeC4ProjectId(): ProjectId {
+  const ctx = useContext(LikeC4ModelContext)
+  if (!ctx) {
+    throw new Error('No LikeC4ModelContext found')
+  }
+  return ctx.projectId as ProjectId
+}