@likec4/diagram 1.30.0 → 1.31.0

package/dist/base/types.d.ts

@@ -29,7 +29,7 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<RFNode<Base.NodeData & T, any>>;
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>;
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
@@ -38,7 +38,7 @@ export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
 export declare namespace Base {
     export type Dimmed = 'immediate' | boolean;
-    export type NodeData<Data extends Record<string, unknown> = {}> = Simplify<Data & {
+    export type NodeData = {
         /**
          * Whether the cursor is hovering over the node
          */
@@ -48,10 +48,10 @@ export declare namespace Base {
          * 'immediate' means that the node is dimmed without delay
          */
         dimmed?: Dimmed;
-    }>;
+    };
     export type Node = RFNode<NodeData>;
     export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>;
-    export type EdgeData<Data extends Record<string, unknown> = {}> = Simplify<Data & {
+    export type EdgeData = {
         /**
          * Whether the cursor is hovering over the edge
          */
@@ -65,7 +65,7 @@ export declare namespace Base {
          * 'immediate' means that the edge is dimmed without delay
          */
         dimmed?: Dimmed;
-    }>;
+    };
     export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>;
     type WithDimmed = {
         data: {

package/dist/bundle/LikeC4View.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { r as reactExports } from '../_virtual/index.js';
+import { memo, useState } from 'react';
 import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { Box, ActionIcon } from '@mantine/core';
@@ -30,7 +30,7 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
-const LikeC4ViewInner = reactExports.memo(({
+const LikeC4ViewInner = memo(({
   view,
   className,
   pannable = false,
@@ -56,12 +56,13 @@ const LikeC4ViewInner = reactExports.memo(({
   styleNonce,
   style,
   reactFlowProps = {},
+  renderNodes,
   ...props
 }) => {
   const likec4model = useLikeC4Model(true, "layouted");
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const [browserViewId, onNavigateTo] = reactExports.useState(null);
+  const [browserViewId, onNavigateTo] = useState(null);
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
   const notations = view.notation?.elements ?? [];
   const hasNotations = notations.length > 0;
@@ -128,6 +129,7 @@ const LikeC4ViewInner = reactExports.memo(({
                 onNodeClick: () => onNavigateTo(view.id)
               },
               reactFlowProps,
+              renderNodes,
               ...props
             }
           ),
@@ -148,6 +150,7 @@ const LikeC4ViewInner = reactExports.memo(({
                 readonly: true,
                 fitView: true,
                 fitViewPadding: "16px",
+                renderNodes,
                 ...props,
                 ...browserProps,
                 showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.elements.length ?? 0) > 0

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,6 +1,6 @@
 import { WhereOperator } from '@likec4/core';
 import { CSSProperties } from 'react';
-import { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
+import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
 export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
     /**
      * View to display.
@@ -122,6 +122,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
+    /**
+     * Override node renderers
+     */
+    renderNodes?: CustomNodes | undefined;
     /**
      * Render custom icon for a node
      * By default, if icon is http:// or https://, it will be rendered as an image

package/dist/bundle/ReactLikeC4.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import '../_virtual/index.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { isString, isFunction } from 'remeda';
@@ -85,6 +84,6 @@ function ReactLikeC4Inner({
     )
   ] });
 }
-ReactLikeC4.displayName = "GenericReactLikeC4";
+ReactLikeC4.displayName = "ReactLikeC4";
 
 export { ReactLikeC4 };

package/dist/bundle/ShadowRoot.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { MantineProvider } from '@mantine/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { useBundledStyleSheet, DefaultTheme } from './styles.css.js';
@@ -15,9 +15,9 @@ function ShadowRoot({
   colorScheme,
   ...props
 }) {
-  const rootRef = reactExports.useRef(null);
+  const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = reactExports.useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
   let getStyleNonce;
   if (isDefined(styleNonce)) {
     getStyleNonce = typeof styleNonce === "function" ? styleNonce : () => styleNonce;

package/dist/bundle/custom.d.ts

@@ -0,0 +1 @@
+export * from '../custom';

package/dist/bundle/index.d.ts

@@ -1,5 +1,7 @@
+export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from '../LikeC4Diagram.props';
 export { LikeC4View } from './LikeC4View';
-export type { LikeC4ViewProps } from './LikeC4View.props';
+export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { ViewNotFound } from './ViewNotFound';
+export * from '../custom/hooks';

package/dist/bundle/index.js

@@ -2,3 +2,12 @@ export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { ViewNotFound } from './ViewNotFound.js';
+export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+export { useEnabledFeatures } from '../context/DiagramFeatures.js';
+export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
+export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
+export { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+export { useSetState } from '../hooks/useSetState.js';
+export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/bundle/styles.css.js

@@ -2,10 +2,10 @@ import { css } from '@likec4/styles/css';
 import { createTheme, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback, useId } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
-import { r as reactExports } from '../_virtual/index.js';
+import { useState } from 'react';
 import { first, isString, isFunction } from 'remeda';
-import inlinedStyles from '../styles.css.js';
-import fontsCss from './font.css.js';
+import fontsCss from '../styles-font.css2.js';
+import inlinedStyles from '../styles.css2.js';
 
 const DefaultTheme = createTheme({
   autoContrast: true,
@@ -42,7 +42,7 @@ const cssInteractive = css({
   }
 });
 function useBundledStyleSheet(injectFontCss, styleNonce) {
-  const [styleSheets, setStyleSheets] = reactExports.useState([]);
+  const [styleSheets, setStyleSheets] = useState([]);
   useIsomorphicLayoutEffect(() => {
     if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
       const style = document.createElement("style");
@@ -83,7 +83,7 @@ const getComputedColorScheme = () => {
 };
 function useColorScheme(explicit) {
   const preferred = useColorScheme$1();
-  const [computed, setComputed] = reactExports.useState(getComputedColorScheme);
+  const [computed, setComputed] = useState(getComputedColorScheme);
   useMutationObserver(
     useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
     {

package/dist/components/SearchControl.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { UnstyledButton, Group, Text } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { isMacOs } from '@xyflow/system';
-import clsx from 'clsx';
 import { placeholder, shortcut, root } from './SearchControl.css.js';
 
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
     /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })

package/dist/context/ControlsCustomLayout.js

@@ -1,5 +1,4 @@
 import { createOptionalContext } from '@mantine/core';
-import '../_virtual/index.js';
 
 const [
   ControlsCustomLayoutProvider,

package/dist/context/DiagramEventHandlers.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
-import { r as reactExports } from '../_virtual/index.js';
+import { useContext, createContext, useMemo } from 'react';
 import { isFunction, mapToObj } from 'remeda';
 
 const HandlerNames = [
@@ -16,7 +16,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = reactExports.createContext({
+const DiagramEventHandlersContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
@@ -28,7 +28,7 @@ function DiagramEventHandlers({
 }) {
   const handlersRef = useSyncedRef(handlers);
   const deps = HandlerNames.map((name) => isFunction(handlers[name]));
-  const value = reactExports.useMemo(() => ({
+  const value = useMemo(() => ({
     ...mapToObj(HandlerNames, (name) => {
       if (handlersRef.current[name]) {
         return [name, (...args) => handlersRef.current[name]?.(...args)];
@@ -40,10 +40,10 @@ function DiagramEventHandlers({
   return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
-  return reactExports.useContext(DiagramEventHandlersContext);
+  return useContext(DiagramEventHandlersContext);
 }
 function useDiagramEventHandlersRef() {
-  return reactExports.useContext(DiagramEventHandlersContext).handlersRef;
+  return useContext(DiagramEventHandlersContext).handlersRef;
 }
 
 export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.d.ts

@@ -1,4 +1,4 @@
-import { ExclusiveUnion, NonEmptyArray } from '@likec4/core';
+import { ExclusiveUnion } from '@likec4/core';
 import { PropsWithChildren } from 'react';
 declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
 export type FeatureName = typeof FeatureNames[number];
@@ -17,9 +17,6 @@ export declare function DiagramFeatures({ children, features, overrides, }: Prop
 export declare namespace DiagramFeatures {
     var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 }
-export declare function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(...names: F): {
-    [P in `enable${F[number]}`]: boolean;
-};
 export declare function useEnabledFeatures(): EnabledFeatures;
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
@@ -28,4 +25,5 @@ export declare function IfEnabled({ feature, children, and, }: PropsWithChildren
 export declare function IfNotEnabled({ feature, children, }: PropsWithChildren<{
     feature: FeatureName;
 }>): import("react/jsx-runtime").JSX.Element | null;
+export declare function IfNotReadOnly({ children, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/context/DiagramFeatures.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
-import { mapToObj, pick, map } from 'remeda';
+import { useContext, createContext, useState, useEffect } from 'react';
+import { mapToObj } from 'remeda';
 
 const FeatureNames = [
   "Controls",
@@ -31,7 +31,7 @@ const AllDisabled = mapToObj(
   FeatureNames,
   (name) => [`enable${name}`, false]
 );
-const DiagramFeaturesContext = reactExports.createContext(AllDisabled);
+const DiagramFeaturesContext = createContext(AllDisabled);
 const validate = (features) => {
   let {
     enableReadOnly,
@@ -68,9 +68,9 @@ function DiagramFeatures({
   features,
   overrides
 }) {
-  const outerScope = reactExports.useContext(DiagramFeaturesContext);
-  const [scope, setScope] = reactExports.useState(outerScope);
-  reactExports.useEffect(
+  const outerScope = useContext(DiagramFeaturesContext);
+  const [scope, setScope] = useState(outerScope);
+  useEffect(
     () => {
       setScope((current) => {
         const next = validate({
@@ -98,26 +98,25 @@ DiagramFeatures.Overlays = ({ children }) => {
     }
   );
 };
-function useEnabledFeature(...names) {
-  return pick(reactExports.useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}`));
-}
 function useEnabledFeatures() {
-  return reactExports.useContext(DiagramFeaturesContext);
+  return useContext(DiagramFeaturesContext);
 }
 function IfEnabled({
   feature,
   children,
   and = true
 }) {
-  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true;
+  const enabled = useEnabledFeatures()[`enable${feature}`] === true;
   return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
-function IfNotEnabled({
-  feature,
+function IfNotReadOnly({
   children
 }) {
-  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true;
-  return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
+  if (isReadOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures };
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotReadOnly, useEnabledFeatures };

package/dist/context/EnsureMantine.js

@@ -1,11 +1,16 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext } from '@mantine/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { MantineContext, MantineProvider } from '@mantine/core';
+import { useContext, useEffect } from 'react';
 
 function EnsureMantine({ children }) {
-  const mantineCtx = reactExports.useContext(MantineContext);
+  const mantineCtx = useContext(MantineContext);
+  useEffect(() => {
+    if (!mantineCtx) {
+      console.warn("LikeC4Diagram must be a child of MantineProvider");
+    }
+  }, []);
   if (!mantineCtx) {
-    throw new Error("LikeC4Diagram must be a child of MantineProvider");
+    return /* @__PURE__ */ jsx(MantineProvider, { children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }

package/dist/context/FramerMotionConfig.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
 import { LazyMotion, domMax, MotionConfig } from 'motion/react';
-import '../_virtual/index.js';
 
 const FramerMotionConfig = ({
   reducedMotion = "user",

package/dist/context/IconRenderer.js

@@ -1,14 +1,14 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from '@tabler/icons-react';
-import clsx from 'clsx';
-import { r as reactExports } from '../_virtual/index.js';
+import { useContext, createContext } from 'react';
 
-const IconRendererContext = reactExports.createContext(null);
+const IconRendererContext = createContext(null);
 function IconRendererProvider({
   value,
   children
 }) {
-  const outerScope = reactExports.useContext(IconRendererContext);
+  const outerScope = useContext(IconRendererContext);
   if (outerScope) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
@@ -18,7 +18,7 @@ function IconRenderer({
   element,
   className
 }) {
-  const RenderIcon = reactExports.useContext(IconRendererContext);
+  const RenderIcon = useContext(IconRendererContext);
   if (!element || !element.icon || element.icon === "none") {
     return null;
   }
@@ -34,7 +34,7 @@ function IconRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(
+      className: cx(
         className,
         "likec4-element-icon"
       ),
@@ -67,7 +67,7 @@ function IconOrShapeRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(
+      className: cx(
         className,
         "likec4-shape-icon"
       ),

package/dist/context/ReduceGraphics.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { createSafeContext, createOptionalContext } from '@mantine/core';
+import { createSafeContext } from '@mantine/core';
 import { useStore } from '@nanostores/react';
 import { atom } from 'nanostores';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, createContext, useContext } from 'react';
 
-const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
+const ReduceGraphicsModeCtx = createContext(null);
 function useIsReducedGraphics() {
-  const isReduced = useReducedGraphics();
+  const isReduced = useContext(ReduceGraphicsModeCtx);
   if (isReduced === null) {
     console.warn("ReduceGraphicsMode is not provided");
   }
@@ -16,11 +16,11 @@ const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
 function ReduceGraphicsContext({ reduceGraphics, children }) {
-  const $isPanningRef = reactExports.useRef(null);
+  const $isPanningRef = useRef(null);
   if (!$isPanningRef.current) {
     $isPanningRef.current = atom(reduceGraphics);
   }
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) });
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children }) });
 }
 function useIsPanning() {
   return useStore(usePanningAtom());

package/dist/context/RootContainer.js

@@ -1,18 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useEffect, createContext, useContext, createRef } from 'react';
 import { usePanningAtom } from './ReduceGraphics.js';
 
-const RootContainerContext = reactExports.createContext(reactExports.createRef());
+const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
   reduceGraphics = false,
   children
 }) {
-  const ref = reactExports.useRef(null);
+  const ref = useRef(null);
   const $isPanning = usePanningAtom();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     return $isPanning.listen((isPanning) => {
       if (isPanning) {
         ref.current?.setAttribute("data-likec4-diagram-panning", "true");
@@ -34,7 +34,7 @@ function RootContainer({
   );
 }
 function useRootContainer() {
-  return reactExports.useContext(RootContainerContext).current;
+  return useContext(RootContainerContext).current;
 }
 
 export { RootContainer, useRootContainer };

package/dist/context/index.d.ts

@@ -1,5 +1,5 @@
 export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers';
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures, } from './DiagramFeatures';
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
 export type { EnabledFeatures } from './DiagramFeatures';
 export { EnsureMantine } from './EnsureMantine';
 export { FramerMotionConfig } from './FramerMotionConfig';

package/dist/custom/components.d.ts

@@ -0,0 +1,5 @@
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTitle, } from '../base/primitives';
+export { IconOrShapeRenderer, IconRenderer, IconRendererProvider, } from '../context/IconRenderer';
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';
+export { IfEnabled, IfNotEnabled, IfNotReadOnly, } from '../context/DiagramFeatures';
+export { Overlay, type OverlayProps, } from '../overlays/overlay/Overlay';