@likec4/diagram 1.31.0 → 1.32.0

package/src/bundle/ReactLikeC4.tsx

@@ -1,21 +1,16 @@
-import type { DiagramView, WhereOperator } from '@likec4/core'
-import { type CSSProperties } from 'react'
-import { ShadowRoot } from './ShadowRoot'
-
+import type { Any, DiagramView } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import { cx } from '@likec4/styles/css'
+import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'
 import { type LikeC4DiagramProps, LikeC4Diagram } from '../LikeC4Diagram'
-import type { OnNavigateTo } from '../LikeC4Diagram.props'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { ShadowRoot } from './ShadowRoot'
 import { useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export type ReactLikeC4Props<
-  ViewId = string,
-  Tag = string,
-  Kind = string,
-> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
-  viewId: ViewId
+export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+  viewId: aux.ViewId<A>
 
   /**
    * Keep aspect ratio of the diagram
@@ -41,24 +36,16 @@ export type ReactLikeC4Props<
 
   style?: CSSProperties | undefined
 
-  where?: WhereOperator<Tag, Kind> | undefined
-
-  onNavigateTo?: OnNavigateTo<ViewId> | undefined
-
   mantineTheme?: any
 
   /** Function to generate nonce attribute added to all generated `<style />` tags */
   styleNonce?: string | (() => string) | undefined
 }
 
-export function ReactLikeC4<
-  ViewId extends string = string,
-  Tag = string,
-  Kind = string,
->({
+export function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({
   viewId,
   ...props
-}: ReactLikeC4Props<ViewId, Tag, Kind>) {
+}: ReactLikeC4Props<A>) {
   const likec4model = useLikeC4Model()
   const view = likec4model?.findView(viewId)
 
@@ -85,10 +72,10 @@ export function ReactLikeC4<
   return <ReactLikeC4Inner view={view.$view} {...props} />
 }
 
-type ReactLikeC4InnerProps = Omit<ReactLikeC4Props<any, any, any>, 'viewId'> & {
-  view: DiagramView
+type ReactLikeC4InnerProps<A extends Any> = Omit<ReactLikeC4Props<A>, 'viewId'> & {
+  view: DiagramView<A>
 }
-function ReactLikeC4Inner({
+function ReactLikeC4Inner<A extends Any>({
   className,
   view,
   colorScheme: explicitColorScheme,
@@ -101,12 +88,12 @@ function ReactLikeC4Inner({
   mantineTheme,
   styleNonce,
   ...props
-}: ReactLikeC4InnerProps) {
+}: ReactLikeC4InnerProps<A>) {
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
 
-  const notations = view.notation?.elements ?? []
+  const notations = view.notation?.nodes ?? []
   const hasNotations = notations.length > 0
 
   let nonce
@@ -139,6 +126,7 @@ function ReactLikeC4Inner({
           showNotations={showNotations && hasNotations}
           onNavigateTo={onNavigateTo as any}
           background={background}
+          enableElementTags={false}
           {...props}
         />
       </ShadowRoot>

package/src/components/ErrorFallback.tsx

@@ -0,0 +1,30 @@
+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'
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  const errorString = error instanceof Error ? error.message : 'Unknown error'
+  return (
+    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
+      <Notification
+        icon={<IconX style={{ width: 16, height: 16 }} />}
+        styles={{
+          icon: {
+            alignSelf: 'flex-start',
+          },
+        }}
+        color={'red'}
+        title={'Oops, something went wrong'}
+        p={'xl'}
+        withCloseButton={false}>
+        <ScrollAreaAutosize maw={'100%'} mah={400}>
+          <Code block>{errorString}</Code>
+        </ScrollAreaAutosize>
+        <Group gap={'xs'} mt="xl">
+          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
+        </Group>
+      </Notification>
+    </Box>
+  )
+}

package/src/context/DiagramEventHandlers.tsx

@@ -1,3 +1,4 @@
+import type { Any } from '@likec4/core/types'
 import { useSyncedRef } from '@react-hookz/web'
 import { type PropsWithChildren, type RefObject, createContext, useContext, useMemo } from 'react'
 import { isFunction, mapToObj } from 'remeda'
@@ -21,8 +22,8 @@ const HandlerNames = [
   'onCanvasDblClick',
 ] as const
 
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-  handlersRef: RefObject<LikeC4DiagramEventHandlers>
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
+  handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>
 }
 
 const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextValue>({
@@ -32,10 +33,10 @@ const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextVal
   },
 })
 
-export function DiagramEventHandlers({
+export function DiagramEventHandlers<A extends Any>({
   handlers,
   children,
-}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers }>) {
+}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers<A> }>) {
   const handlersRef = useSyncedRef(handlers)
 
   const deps = HandlerNames.map((name) => isFunction(handlers[name]))

package/src/context/DiagramFeatures.tsx

@@ -1,7 +1,7 @@
-import type { ExclusiveUnion, NonEmptyArray } from '@likec4/core'
+import type { ExclusiveUnion } from '@likec4/core/types'
 import { shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
-import { map, mapToObj, pick } from 'remeda'
+import { mapToObj } from 'remeda'
 
 const FeatureNames = [
   'Controls',
@@ -18,14 +18,11 @@ const FeatureNames = [
   'EdgeEditing',
   'ViewTitle',
   'FitView',
-  /**
-   * LikeC4Model is available in context
-   */
-  'LikeC4Model',
   /**
    * Running in VSCode
    */
   'Vscode',
+  'ElementTags',
 ] as const
 export type FeatureName = typeof FeatureNames[number]
 export type EnabledFeatures = {
@@ -41,20 +38,9 @@ const DiagramFeaturesContext = createContext<EnabledFeatures>(AllDisabled)
 const validate = (features: EnabledFeatures) => {
   let {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   } = features
-  if (!enableLikeC4Model) {
-    enableElementDetails = false
-    enableRelationshipDetails = false
-    enableRelationshipBrowser = false
-    enableSearch = false
-  }
 
   if (enableReadOnly) {
     enableEdgeEditing = false
@@ -62,11 +48,6 @@ const validate = (features: EnabledFeatures) => {
 
   return {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest,
   }

package/src/context/EnsureMantine.tsx

@@ -14,7 +14,7 @@ export function EnsureMantine({ children }: EnsureMantineProps) {
 
   if (!mantineCtx) {
     return (
-      <MantineProvider>
+      <MantineProvider defaultColorScheme="auto">
         {children}
       </MantineProvider>
     )

package/src/context/IconRenderer.tsx

@@ -99,10 +99,7 @@ export function IconOrShapeRenderer({
   }
   className: string
 }) {
-  const icon = IconRenderer({
-    element,
-    className,
-  })
+  const icon = <IconRenderer element={element} className={className} />
   if (icon) {
     return icon
   }

package/src/context/RootContainer.tsx

@@ -1,7 +1,9 @@
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
+import { useId } from '@mantine/hooks'
 import { type PropsWithChildren, createContext, createRef, useContext, useEffect, useRef } from 'react'
 import { usePanningAtom } from './ReduceGraphics'
+import { TagStylesProvider } from './TagStylesContext'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
@@ -13,6 +15,7 @@ export function RootContainer({
   className?: string | undefined
   reduceGraphics?: boolean
 }>) {
+  const id = useId()
   const ref = useRef<HTMLDivElement>(null)
   const $isPanning = usePanningAtom()
 
@@ -28,14 +31,17 @@ export function RootContainer({
 
   return (
     <Box
+      id={id}
       className={cx('likec4-root', className)}
       ref={ref}
       {...reduceGraphics && {
         ['data-likec4-reduced-graphics']: true,
       }}>
-      <RootContainerContext.Provider value={ref}>
-        {children}
-      </RootContainerContext.Provider>
+      <TagStylesProvider rootSelector={`#${id}`}>
+        <RootContainerContext.Provider value={ref}>
+          {children}
+        </RootContainerContext.Provider>
+      </TagStylesProvider>
     </Box>
   )
 }

package/src/context/TagStylesContext.tsx

@@ -0,0 +1,96 @@
+import { type TagSpecification, isTagColorSpecified } from '@likec4/core'
+import { useMantineStyleNonce } from '@mantine/core'
+import { useDeepCompareMemo } from '@react-hookz/web'
+import { type PropsWithChildren, createContext, useContext } from 'react'
+import { entries, flatMap, join, pipe } from 'remeda'
+import { useLikeC4Specification } from '../likec4model/useLikeC4Model'
+
+const TagStylesContext = createContext<Record<string, TagSpecification>>({})
+
+const radixColors = [
+  'yellow',
+  'orange',
+  'amber',
+  'tomato',
+  'red',
+  'ruby',
+  'crimson',
+  'pink',
+  'pink',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'teal',
+  'grass',
+  'lime',
+]
+
+const generateColorVars = (spec: TagSpecification) => {
+  const color = spec.color
+  if (isTagColorSpecified(spec)) {
+    return `
+      --colors-likec4-tag-bg: ${color};
+      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+    `
+  }
+  if (!radixColors.includes(color)) {
+    return ''
+  }
+  let textcolor = '12'
+  if (['mint', 'grass', 'lime', 'yellow', 'amber'].includes(color)) {
+    textcolor = 'dark-2'
+  }
+  return `
+  --colors-likec4-tag-border: var(--colors-${color}-8);
+  --colors-likec4-tag-bg: var(--colors-${color}-9);
+  --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
+  --colors-likec4-tag-text: var(--colors-${color}-${textcolor});
+  `
+}
+
+export function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{ rootSelector: string }>) {
+  const tags = useLikeC4Specification().tags
+  const { specs, stylesheet } = useDeepCompareMemo(() => {
+    if (!tags) {
+      return { specs: {}, stylesheet: '' }
+    }
+    return {
+      specs: tags,
+      stylesheet: pipe(
+        entries(tags),
+        flatMap(([tag, spec]) => [
+          `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+          generateColorVars(spec),
+          '}',
+        ]),
+        join('\n'),
+      ),
+    }
+  }, [tags, rootSelector])
+
+  return (
+    <TagStylesContext.Provider value={specs}>
+      {stylesheet !== '' && <TagStylesheet stylesheet={stylesheet} />}
+      {children}
+    </TagStylesContext.Provider>
+  )
+}
+
+function TagStylesheet({ stylesheet }: { stylesheet: string }) {
+  const nonce = useMantineStyleNonce()?.()
+  return (
+    <style data-likec4-tag-stylesheet type="text/css" dangerouslySetInnerHTML={{ __html: stylesheet }} nonce={nonce} />
+  )
+}
+
+export function useTagSpecifications() {
+  return useContext(TagStylesContext)
+}
+
+export function useTagSpecification(tag: string): TagSpecification {
+  const specs = useContext(TagStylesContext)
+  return specs[tag] ?? {
+    color: 'tomato' as any,
+  }
+}

package/src/custom/components.ts

@@ -8,6 +8,8 @@ export {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTag,
+  ElementTags,
   ElementTitle,
 } from '../base/primitives'
 

package/src/custom/customNodes.tsx

@@ -1,5 +1,5 @@
-import type { AnyAux, DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
-import type { DiagramView } from '@likec4/core/types'
+import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
+import type { Any } from '@likec4/core/types'
 import type { ReactNode } from 'react'
 import { customNode } from '../base/primitives'
 import type { NodeProps } from '../base/types'
@@ -9,22 +9,22 @@ import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 function customDiagramNode<
   P extends {
     nodeProps: NodeProps<Types.NodeData>
-    nodeModel: NodeModel<AnyAux>
+    nodeModel: NodeModel
   },
 >(
   Node: (props: P) => ReactNode,
 ): (props: P['nodeProps']) => ReactNode {
   return customNode((props) => {
-    const viewModel = useLikeC4Model(true).view(props.data.viewId)
+    const viewModel = useLikeC4Model().view(props.data.viewId)
     const model = viewModel.node(props.id)
     // @ts-ignore
     return <Node nodeProps={props} nodeModel={model} />
   }) as (props: P['nodeProps']) => ReactNode
 }
 
-export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomElementNodeProps<M extends Any = Any> = {
   nodeProps: NodeProps<Types.ElementNodeData, 'element'>
-  nodeModel: NodeModel.WithElement<M, DiagramView>
+  nodeModel: NodeModel.WithElement<M>
 }
 /**
  * Node that will be used to render the element from the model.
@@ -34,6 +34,8 @@ export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -74,9 +76,9 @@ export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
  */
 export const elementNode = customDiagramNode<CustomElementNodeProps>
 
-export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomDeploymentNodeProps<M extends Any = Any> = {
   nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>
+  nodeModel: NodeModel.WithDeploymentElement<M>
 }
 /**
  * Node that will be used to render the element from deployment model.
@@ -87,6 +89,8 @@ export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -126,9 +130,9 @@ export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  */
 export const deploymentNode = customDiagramNode<CustomDeploymentNodeProps>
 
-export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomCompoundElementNodeProps<M extends Any = Any> = {
   nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
-  nodeModel: NodeModel.WithElement<M, DiagramView>
+  nodeModel: NodeModel.WithElement<M>
 }
 /**
  * Node that will be used to render the compound element from the model.
@@ -138,6 +142,8 @@ export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -168,9 +174,9 @@ export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
  */
 export const compoundElementNode = customDiagramNode<CustomCompoundElementNodeProps>
 
-export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
   nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>
+  nodeModel: NodeModel.WithDeploymentElement<M>
 }
 /**
  * Node that will be used to render the compound from the deployment model.
@@ -180,6 +186,8 @@ export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -204,9 +212,9 @@ export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  */
 export const compoundDeploymentNode = customDiagramNode<CustomCompoundDeploymentNodeProps>
 
-export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomViewGroupNodeProps<M extends Any = Any> = {
   nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
-  nodeModel: NodeModel.IsGroup<M, DiagramView>
+  nodeModel: NodeModel.IsGroup<M>
 }
 /**
  * Node that will be used to render the view group from the model.
@@ -215,6 +223,8 @@ export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {

package/src/custom/hooks.ts

@@ -28,6 +28,7 @@ export {
 
 export {
   useLikeC4Model,
+  useLikeC4Specification,
 } from '../likec4model/useLikeC4Model'
 
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps'

package/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
 export type { XYStoreApi } from './useXYFlow'

package/src/hooks/useCurrentViewId.ts

@@ -1,8 +1,5 @@
-import { invariant } from '@likec4/core'
-import type { AnyAux, LikeC4ViewModel } from '@likec4/core/model'
-import type { DiagramView, ViewId } from '@likec4/core/types'
+import type { ViewId } from '@likec4/core/types'
 import { useSelector } from '@xstate/react'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import type { DiagramActorSnapshot } from '../state/types'
 import { useDiagramActorRef } from './useDiagram'