@likec4/diagram 1.35.0 → 1.36.0

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -9,6 +9,7 @@ import {
   type ViewId,
 } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
+import { HStack } from '@likec4/styles/jsx'
 import {
   type TextProps,
   ActionIcon,
@@ -266,12 +267,8 @@ export function ElementDetailsCard({
           dragElastic={0}
           dragMomentum={false}
           dragListener={false}
-          className={cx(
-            css({
-              likec4Palette: nodeModel?.color ?? elementModel.color,
-            }),
-            styles.card,
-          )}
+          data-likec4-color={nodeModel?.color ?? elementModel.color}
+          className={styles.card}
           initial={{
             top,
             left,
@@ -349,9 +346,7 @@ export function ElementDetailsCard({
                     <ElementTag
                       key={tag}
                       tag={tag}
-                      css={{
-                        cursor: 'pointer',
-                      }}
+                      cursor="pointer"
                       onClick={e => {
                         e.stopPropagation()
                         diagram.openSearch(`#${tag}`)
@@ -446,9 +441,9 @@ export function ElementDetailsCard({
                   {elementModel.links.length > 0 && (
                     <>
                       <PropertyLabel>links</PropertyLabel>
-                      <Stack gap={'xs'} align="flex-start">
+                      <HStack gap={'xs'} flexWrap="wrap">
                         {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
-                      </Stack>
+                      </HStack>
                     </>
                   )}
                   {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
@@ -609,7 +604,7 @@ function ElementMetata({
           gap: `[4px 4px]`,
           alignItems: 'baseline',
           justifyItems: 'stretch',
-          paddingRight: '2xs',
+          paddingRight: 'xxs',
         })}>
         {entries(metadata).map(([key, value]) => (
           <div
@@ -654,7 +649,7 @@ function ElementMetata({
                 <div
                   className={css({
                     fontSize: 'sm',
-                    padding: '2xs',
+                    padding: 'xxs',
                     whiteSpace: 'pre',
                     fontFamily: '[var(--mantine-font-family-monospace)]',
                     userSelect: 'all',

package/src/overlays/element-details/TabPanelDeployments.css.ts

@@ -8,8 +8,8 @@ export const treeNode = css({
 
 export const treeNodeLabel = css({
   cursor: 'default',
-  marginTop: 0,
-  marginBottom: 0,
+  marginTop: '0',
+  marginBottom: '0',
 })
 
 const label = css({
@@ -44,8 +44,8 @@ export const instanceLabel = cx(
     justifyContent: 'stretch',
     flexWrap: 'nowrap',
     height: '36px',
-    paddingInlineStart: '16px',
-    paddingInlineEnd: '10px',
+    paddingInlineStart: '[16px]',
+    paddingInlineEnd: '2.5', // 10px
     borderRadius: 'sm',
     alignItems: 'center',
     color: 'mantine.colors.gray[7]',

package/src/overlays/element-details/TabPanelRelationships.css.ts

@@ -5,11 +5,11 @@ export const fqn = css({
   fontSize: 'sm',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '3px 6px',
+  padding: '[3px 6px]',
   borderRadius: 3,
-  background: `likec4.palette.fill/75`,
+  background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
-  color: 'likec4.palette.hiContrast',
+  color: 'var(--likec4-palette-hiContrast)',
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -55,9 +55,9 @@ export const panelScope = css({
   _before: {
     content: '"scope:"',
     position: 'absolute',
-    top: 0,
-    left: 8,
-    fontSize: '2xs',
+    top: '0',
+    left: '2',
+    fontSize: 'xxs',
     fontWeight: 500,
     lineHeight: '1',
     color: 'mantine.colors.dimmed',
@@ -75,7 +75,7 @@ export const edgeNum = css({
   display: 'inline-block',
   fontSize: 'xl',
   fontWeight: 600,
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   minWidth: 24,
   textAlign: 'center',
   borderRadius: 'sm',

package/src/overlays/overlay/Overlay.css.ts

@@ -10,7 +10,7 @@ const inset = '--_inset'
 const borderRadius = '--_border-radius'
 const dialog = css.raw({
   boxSizing: 'border-box',
-  margin: 0,
+  margin: '0',
   position: 'fixed',
   width: '100vw',
   height: '100vh',
@@ -30,13 +30,13 @@ const dialog = css.raw({
   _backdrop: {
     cursor: 'zoom-out',
   },
-  inset: 0,
-  padding: 0,
+  inset: '0',
+  padding: '0',
 })
 
 const body = css.raw({
   position: 'relative',
-  containerName: 'overlay-dialog',
+  containerName: 'likec4-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
   overflow: 'hidden',
@@ -60,7 +60,7 @@ export const overlay = sva({
             width: 'calc(100vw - 2 * var(--_inset))',
             height: 'calc(100vh - var(--_offset) - var(--_inset))',
             [borderRadius]: '6px',
-            padding: '6px',
+            padding: '1.5', // 6px
             [offset]: '1rem',
           },
           md: {
@@ -81,8 +81,8 @@ export const overlay = sva({
       },
       true: {
         dialog: {
-          inset: 0,
-          padding: 0,
+          inset: '0',
+          padding: '0',
         },
       },
     },

package/src/overlays/relationship-details/SelectEdge.css.ts

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css'
 const edgeEnpoint = css.raw({
   display: 'inline-flex',
   alignItems: 'center',
-  padding: '6px 2px 0 2px',
+  padding: '[6px 2px 0 2px]',
   '& .mantine-Text-root': {
     color: 'mantine.colors.text/90',
     fontSize: 'xs',
@@ -13,7 +13,7 @@ const edgeEnpoint = css.raw({
 })
 
 export const edgeSource = css({
-  paddingLeft: 4,
+  paddingLeft: '1',
   gridColumn: 1,
 }, edgeEnpoint)
 
@@ -23,7 +23,7 @@ export const edgeArrow = css({
 
 export const edgeTarget = css({
   gridColumn: 3,
-  paddingRight: 4,
+  paddingRight: '1',
 }, edgeEnpoint)
 
 const edgeLabelclass = 'likec4-edge-label'
@@ -35,8 +35,8 @@ export const edgeLabel = cx(
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
     borderBottomColor: 'mantine.colors.defaultBorder',
-    marginBottom: '0px',
-    padding: '0 4px 5px 4px',
+    marginBottom: '0',
+    padding: '[0 4px 5px 4px]',
     width: '100%',
     '& .mantine-Text-root': {
       fontSize: 'xxs',
@@ -51,7 +51,7 @@ export const edgeRow = css({
   display: 'contents',
   [`&:last-child .${edgeLabelclass}`]: {
     borderBottom: 'none',
-    marginBottom: 0,
+    marginBottom: '0',
   },
   '& > *': {
     transition: 'all 0.15s ease-in',
@@ -67,7 +67,7 @@ export const edgeGrid = css({
   display: 'grid',
   gridTemplateColumns: '1fr 30px 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: 0,
+  gap: '0',
   alignItems: 'stretch',
 })
 
@@ -75,7 +75,7 @@ export const edgeDataGrid = css({
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: '10px 12px',
+  gap: '[10px 12px]',
   alignItems: 'baseline',
   justifyItems: 'start',
 })

package/src/overlays/relationships-browser/SelectElement.css.ts

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css'
 
 export const node = css({
-  margin: 0,
+  margin: '0',
 })
 
 export const label = css({

package/src/search/Search.tsx

@@ -40,8 +40,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: '100%',
   height: '100%',
   maxHeight: '100vh',
@@ -50,10 +50,10 @@ const body = css({
   flexDirection: 'column',
   justifyContent: 'stretch',
   gap: 'sm',
-  paddingTop: 20,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 8,
+  paddingTop: '[20px]',
+  paddingLeft: 'md',
+  paddingRight: 'md',
+  paddingBottom: 'sm',
   background: '[transparent]',
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,

package/src/search/components/ElementsColumn.css.ts

@@ -7,7 +7,7 @@ const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`
 
 export const treeNode = css({
   outline: 'none',
-  marginBottom: '8px',
+  marginBottom: '2',
 })
 export const treeRoot = css(
   container.raw({
@@ -22,10 +22,10 @@ export const treeLabel = css({
   display: 'flex',
   alignItems: 'baseline',
   outline: 'none !important',
-  gap: '4px',
+  gap: '1',
 })
 export const treeSubtree = css({
-  marginTop: '8px',
+  marginTop: '2',
 })
 
 // const iconSize = '--likec4-icon-size'
@@ -44,7 +44,7 @@ export const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: 'column-reverse',
     alignItems: 'flex-start',
-    gap: 2,
+    gap: '0.5',
   },
 })
 
@@ -56,7 +56,7 @@ export const elementId = css({
   display: 'block',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   borderRadius: '4px',
   background: `mantine.colors.dark[9]/30`,
   _light: {

package/src/search/components/SearchByTags.tsx

@@ -29,13 +29,13 @@ export function SearchByTags() {
       ref={ref}
       css={{
         gap: 'md',
-        paddingLeft: 48,
+        paddingLeft: '[48px]',
         flexWrap: 'nowrap',
       }}
     >
       <HStack
         css={{
-          gap: 6,
+          gap: '1.5', // 6px
           flexWrap: 'wrap',
           opacity: isFiltered ? 1 : .3,
           grayscale: isFiltered ? 0 : .9,

package/src/search/components/ViewsColum.tsx

@@ -43,7 +43,7 @@ export const ViewsColumn = memo(() => {
         if (search.startsWith('#')) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
-        return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
+        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search)
       })
     }
   }

package/src/search/components/ViewsColumn.css.ts

@@ -23,7 +23,7 @@ export const viewButton = cx(
 // export const viewDescription = css(description)
 
 export const viewButtonDescription = css({
-  marginTop: '4px',
+  marginTop: '1',
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: '13px',

package/src/search/components/_shared.css.ts

@@ -17,9 +17,9 @@ const button = css.raw({
   width: '100%',
   background: 'mantine.colors.body',
   rounded: 'sm',
-  padding: `12px 8px 12px 14px`,
+  padding: `[12px 8px 12px 14px]`,
   minHeight: '60px',
-  gap: 8,
+  gap: '2',
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -139,7 +139,7 @@ const descriptionColor = css.raw({
 })
 
 const description = css.raw(descriptionColor, {
-  marginTop: '4px',
+  marginTop: '1',
   fontSize: '12px',
   lineHeight: '1.4',
 

package/src/search/components/styles.css.ts

@@ -18,7 +18,7 @@ export const input = css({
 
 export const pickviewBackdrop = css({
   position: 'absolute',
-  inset: 0,
+  inset: '0',
   width: '100%',
   height: '100%',
   backgroundColor: '[rgb(34 34 34 / 0.7)]',
@@ -31,8 +31,8 @@ export const pickviewBackdrop = css({
 })
 export const pickview = css({
   position: 'absolute',
-  top: '2rem',
-  left: '50%',
+  top: '[2rem]',
+  left: '[50%]',
   width: '100%',
   maxWidth: '600px',
   minWidth: '200px',
@@ -41,9 +41,9 @@ export const pickview = css({
 })
 
 export const pickviewGroup = css({
-  marginTop: '8px',
+  marginTop: '2',
   '& + &': {
-    marginTop: '32px',
+    marginTop: '[32px]',
   },
 })
 

package/src/state/DiagramActorProvider.tsx

@@ -1,11 +1,11 @@
 import type { DiagramView, WhereOperator } from '@likec4/core/types'
-import { useCustomCompareEffect, useDeepCompareEffect } from '@react-hookz/web'
+import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
 import { useCurrentViewId } from '../hooks/useCurrentViewId'
@@ -16,7 +16,7 @@ import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorSnapshot } from './types'
+import type { DiagramActorRef, DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => {
   if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
@@ -44,28 +44,12 @@ export function DiagramActorProvider({
   nodesSelectable: boolean
   where: WhereOperator | null
 }>) {
-  const handlersRef = useDiagramEventHandlersRef()
+  const { handlersRef } = useDiagramEventHandlers()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
   const machineRef = useRef<DiagramMachine | null>(null)
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        'trigger:NavigateTo': ((_, { viewId }) => {
-          // Slightly defer callback for better responsiveness
-          setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId)
-          }, 40)
-        }),
-
-        'trigger:OnChange': ((_, params) => {
-          handlersRef.current.onChange?.(params)
-        }),
-
-        'trigger:OpenSource': ((_, params) => {
-          handlersRef.current.onOpenSource?.(params)
-        }),
-      },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
@@ -95,6 +79,8 @@ export function DiagramActorProvider({
     },
   )
 
+  useActorEventHandlers(actorRef)
+
   const features = useEnabledFeatures()
   useCustomCompareEffect(
     () => {
@@ -167,3 +153,42 @@ function CurrentViewModelProvider({
     </CurrentViewModelContext.Provider>
   )
 }
+
+function useActorEventHandlers(
+  actorRef: DiagramActorRef,
+) {
+  const {
+    onChange,
+    onNavigateTo,
+    onOpenSource,
+  } = useDiagramEventHandlers()
+
+  useEffect(() => {
+    if (!onChange) return
+    const subscription = actorRef.on('viewChange', ({ change }) => onChange({ change }))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onChange])
+
+  useEffect(() => {
+    if (!onNavigateTo) return
+    let frame: number
+
+    const subscription = actorRef.on('navigateTo', ({ viewId }) => {
+      cancelAnimationFrame(frame)
+      // Slightly defer callback for better responsiveness
+      frame = requestAnimationFrame(() => {
+        onNavigateTo(viewId)
+      })
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+      subscription.unsubscribe()
+    }
+  }, [actorRef, onNavigateTo])
+
+  useEffect(() => {
+    if (!onOpenSource) return
+    const subscription = actorRef.on('openSource', ({ params }) => onOpenSource(params))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onOpenSource])
+}

package/src/state/diagram-machine.ts

@@ -35,6 +35,7 @@ import {
   assertEvent,
   assign,
   cancel,
+  emit,
   enqueueActions,
   or,
   raise,
@@ -179,6 +180,11 @@ export type Events =
   | { type: 'tag.unhighlight' }
   | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
+export type EmittedEvents =
+  | { type: 'navigateTo'; viewId: ViewId }
+  | { type: 'viewChange'; change: ViewChange }
+  | { type: 'openSource'; params: OpenSourceParams }
+
 export type ActionArg = { context: Context; event: Events }
 
 // TODO: naming convention for actors
@@ -193,6 +199,7 @@ const _diagramMachine = setup({
       search: 'searchActorLogic'
     },
     events: {} as Events,
+    emitted: {} as EmittedEvents,
   },
   actors: {
     syncManualLayoutActorLogic,
@@ -241,14 +248,20 @@ const _diagramMachine = setup({
     },
   },
   actions: {
-    'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
-      // navigate to view
-    },
-    'trigger:OnChange': (_, _params: { change: ViewChange }) => {
-      // apply change
-    },
-    'trigger:OpenSource': (_, _params: OpenSourceParams) => {
-    },
+    'trigger:NavigateTo': emit(({ context }) => ({
+      type: 'navigateTo',
+      viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
+    })),
+
+    'trigger:OnChange': emit((_, _params: { change: ViewChange }) => ({
+      type: 'viewChange',
+      change: _params.change,
+    })),
+
+    'trigger:OpenSource': emit((_, _params: OpenSourceParams) => ({
+      type: 'openSource',
+      params: _params,
+    })),
 
     'assign lastClickedNode': assign(({ context, event }) => {
       assertEvent(event, 'xyflow.nodeClick')
@@ -1023,14 +1036,7 @@ const _diagramMachine = setup({
         'closeAllOverlays',
         'closeSearch',
         'stopSyncLayout',
-        enqueueActions(({ enqueue, context }) => {
-          enqueue({
-            type: 'trigger:NavigateTo',
-            params: {
-              viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
-            },
-          })
-        }),
+        'trigger:NavigateTo',
       ],
       on: {
         'update.view': {

package/dist/LikeC4CustomColors.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LikeC4CustomColors: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/LikeC4CustomColors.js

@@ -1,45 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import '@likec4/core';
-import { useMantineStyleNonce } from '@mantine/core';
-import { memo, useState } from 'react';
-import { isEmpty, entries } from 'remeda';
-import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
-import { useUpdateEffect } from './hooks/useUpdateEffect.js';
-
-function toStyle(name, colors) {
-  const darken = (color) => `color-mix(in srgb, ${color} 80%, black)`;
-  return `
-:where([data-likec4-color=${name}]) {
-  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
-  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
-  --colors-likec4-palette-fill: ${colors.elements.fill};
-  --colors-likec4-palette-stroke: ${colors.elements.stroke};
-  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
-  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
-  --colors-likec4-relation-label: ${colors.relationships.labelColor};
-  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
-}
-:where(.likec4-compound-node[data-likec4-color=${name}]) {
-  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
-  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
-}
-  `;
-}
-function generateCustomColorStyles(customColors) {
-  return entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n").trim();
-}
-const LikeC4CustomColors = memo(() => {
-  const customColors = useLikeC4Specification().customColors ?? {};
-  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors));
-  useUpdateEffect(() => {
-    setStyles(generateCustomColorStyles(customColors));
-  }, [customColors]);
-  const nonce = useMantineStyleNonce()?.();
-  if (isEmpty(customColors)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
-});
-LikeC4CustomColors.displayName = "LikeC4CustomColors";
-
-export { LikeC4CustomColors };

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,45 +0,0 @@
-import { NodeProps } from '../../../base';
-import { RelationshipsBrowserTypes } from '../_types';
-import { MemoExoticComponent } from 'react';
-import { Dimmed } from '../../../base/types.Base';
-import { ElementStyle, Color, Any, ViewId, Fqn, RichTextOrEmpty, IconUrl } from '@likec4/core';
-import { Tags } from '@likec4/core/types/_aux';
-export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
-    hovered?: boolean;
-    dimmed?: Dimmed;
-    width: number;
-    height: number;
-    style: ElementStyle;
-    color: Color;
-    title: string;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-    tags: Tags<Any>;
-    technology: string | null | undefined;
-    navigateTo: ViewId<string> | null | undefined;
-    column: RelationshipsBrowserTypes.Column;
-    fqn: Fqn;
-    icon: string | null;
-    ports: RelationshipsBrowserTypes.Ports;
-    existsInCurrentView: boolean;
-    description: RichTextOrEmpty;
-}, string>) => import("react/jsx-runtime").JSX.Element>;
-export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
-    hovered?: boolean;
-    dimmed?: Dimmed;
-    style: ElementStyle;
-    color: Color;
-    title: string;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-    column: RelationshipsBrowserTypes.Column;
-    fqn: Fqn;
-    depth: number;
-    icon: IconUrl;
-    ports: RelationshipsBrowserTypes.Ports;
-    existsInCurrentView: boolean;
-}, string>) => import("react/jsx-runtime").JSX.Element>;
-export declare const EmptyNode: MemoExoticComponent<(props: NodeProps<RelationshipsBrowserTypes.EmptyNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
-type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
-type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
-export {};