@likec4/diagram 1.40.0 → 1.42.0

package/dist/context/IconRenderer.d.ts

@@ -1,16 +1,17 @@
 import { ElementShape } from '@likec4/core';
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function IconRenderer({ element, className, }: {
+export declare function IconRenderer({ element, className, style, }: {
     element?: {
         id: string;
         title: string;
         icon?: string | null | undefined;
     };
-    className: string;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
 export declare function IconOrShapeRenderer({ element, className, }: {
     element: {

package/dist/context/IconRenderer.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { useContext, createContext } from 'react';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import { createContext, useContext } from 'react';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -21,7 +21,8 @@ function IconRendererProvider({
 }
 function IconRenderer({
   element,
-  className
+  className,
+  style
 }) {
   const RenderIcon = useContext(IconRendererContext);
   if (!element || !element.icon || element.icon === "none") {
@@ -44,6 +45,7 @@ function IconRenderer({
         "likec4-element-icon"
       ),
       "data-likec4-icon": element.icon,
+      style,
       children: icon
     }
   );

package/dist/context/RootContainerContext.d.ts

@@ -0,0 +1,11 @@
+import { RefObject, Context } from 'react';
+export declare const RootContainerContext: Context<{
+    id: string;
+    ref: RefObject<HTMLDivElement | null>;
+} | null>;
+export declare function useRootContainer(): {
+    id: string;
+    ref: RefObject<HTMLDivElement | null>;
+};
+export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
+export declare function useRootContainerElement(): HTMLDivElement | null;

package/dist/context/RootContainerContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+const RootContainerContext = createContext(null);
+function useRootContainer() {
+  const ctx = useContext(RootContainerContext);
+  if (!ctx) {
+    throw new Error("useRootContainer must be used within a RootContainer");
+  }
+  return ctx;
+}
+function useRootContainerRef() {
+  return useRootContainer().ref;
+}
+function useRootContainerElement() {
+  return useRootContainer().ref.current;
+}
+
+export { RootContainerContext, useRootContainer, useRootContainerElement, useRootContainerRef };

package/dist/context/TagStylesContext.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
 import { useMantineStyleNonce } from '@mantine/core';
-import { useDeepCompareMemo } from '@react-hookz/web';
-import { useContext, createContext } from 'react';
-import { pipe, entries, flatMap, join } from 'remeda';
-import { useLikeC4Specification } from '../likec4model/useLikeC4Model.js';
+import { createContext, memo, useContext } from 'react';
+import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
+import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
 
 const TagStylesContext = createContext({});
 const radixColors = [
@@ -47,34 +46,32 @@ const generateColorVars = (spec) => {
   --colors-likec4-tag-text: var(--colors-${color}-${textcolor});
   `;
 };
+function generateStylesheet(tags, rootSelector) {
+  if (!tags || isEmpty(tags)) {
+    return "";
+  }
+  return pipe(
+    entries(tags),
+    flatMap(([tag, spec]) => [
+      `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+      generateColorVars(spec),
+      "}"
+    ]),
+    join("\n")
+  );
+}
 function TagStylesProvider({ children, rootSelector }) {
   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 /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: specs, children: [
+  const stylesheet = generateStylesheet(tags, rootSelector);
+  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: tags, children: [
     stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
     children
   ] });
 }
-function TagStylesheet({ stylesheet }) {
+const TagStylesheet = memo(({ stylesheet }) => {
   const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx("style", { "data-likec4-tag-stylesheet": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
-}
+  return /* @__PURE__ */ jsx("style", { "data-likec4-tags": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+});
 function useTagSpecification(tag) {
   const specs = useContext(TagStylesContext);
   return specs[tag] ?? {

package/dist/context/index.d.ts

@@ -4,4 +4,4 @@ export type { EnabledFeatures } from './DiagramFeatures';
 export { EnsureMantine } from './EnsureMantine';
 export { FramerMotionConfig } from './FramerMotionConfig';
 export { IconRenderer, IconRendererProvider } from './IconRenderer';
-export { RootContainer, useRootContainer, useRootContainerRef } from './RootContainer';
+export { useRootContainer, useRootContainerElement, useRootContainerRef } from './RootContainerContext';

package/dist/custom/builtins.d.ts

@@ -0,0 +1 @@
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';

package/dist/custom/customNodes.d.ts

@@ -1,14 +1,9 @@
 import { NodeModel } from '@likec4/core/model';
 import { aux } from '@likec4/core/types';
-import { FunctionComponent } from 'react';
-import { NodeProps } from '../base/types';
+import { FC } from 'react';
 import { Types } from '../likec4diagram/types';
 type Any = aux.Any;
-type CustomDiagramNodeProps = {
-    nodeProps: NodeProps<Types.NodeData, string>;
-    nodeModel: NodeModel;
-};
-type CustomNodeComponent<P extends CustomDiagramNodeProps> = (impl: FunctionComponent<P>) => FunctionComponent<P['nodeProps']>;
+type Unknown = aux.UnknownLayouted;
 /**
  * Node that will be used to render the element from the model.
  * It is a leaf node, i.e. it does not have children.
@@ -25,7 +20,7 @@ type CustomNodeComponent<P extends CustomDiagramNodeProps> = (impl: FunctionComp
  *   elementNode,
  *   ElementNodeContainer,
  *   ElementShape,
- *   ElementTitle,
+ *   ElementData,
  *   ElementActions,
  *   ElementDetailsButtonWithHandler,
  *   IfEnabled,
@@ -38,7 +33,7 @@ type CustomNodeComponent<P extends CustomDiagramNodeProps> = (impl: FunctionComp
  * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
  *     <ElementShape {...nodeProps} />
- *     <ElementTitle {...nodeProps} />
+ *     <ElementData {...nodeProps} />
  *     <IfEnabled feature="ElementTags">
  *       <ElementTags {...nodeProps} />
  *     </IfEnabled>
@@ -62,10 +57,10 @@ type CustomNodeComponent<P extends CustomDiagramNodeProps> = (impl: FunctionComp
  * ))
  * ```
  */
-export declare const elementNode: CustomNodeComponent<CustomElementNodeProps>;
-export type CustomElementNodeProps = {
-    nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
-    nodeModel: NodeModel.WithElement<Any>;
+export declare function elementNode<A extends Any = Unknown>(component: FC<ElementNodeProps<A>>): Types.NodeRenderer<'element'>;
+export type ElementNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'element'>;
+    nodeModel: NodeModel.WithElement<A>;
 };
 /**
  * Node that will be used to render the element from deployment model.
@@ -84,7 +79,7 @@ export type CustomElementNodeProps = {
  *   deploymentNode,
  *   ElementNodeContainer,
  *   ElementShape,
- *   ElementTitle,
+ *   ElementData,
  *   DeploymentElementActions,
  *   ElementDetailsButtonWithHandler,
  *   IfNotReadOnly,
@@ -95,7 +90,7 @@ export type CustomElementNodeProps = {
  * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
  *     <ElementShape {...nodeProps} />
- *     <ElementTitle {...nodeProps} />
+ *     <ElementData {...nodeProps} />
  *     <DeploymentElementActions
  *       {...nodeProps}
  *       extraButtons={[
@@ -115,10 +110,10 @@ export type CustomElementNodeProps = {
  * ))
  * ```
  */
-export declare const deploymentNode: CustomNodeComponent<CustomDeploymentNodeProps>;
-export type CustomDeploymentNodeProps = {
-    nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<Any>;
+export declare function deploymentNode<A extends Any = Unknown>(component: FC<DeploymentNodeProps<A>>): Types.NodeRenderer<'deployment'>;
+export type DeploymentNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<A>;
 };
 /**
  * Node that will be used to render the compound element from the model.
@@ -158,10 +153,10 @@ export type CustomDeploymentNodeProps = {
  * ))
  * ```
  */
-export declare const compoundElementNode: CustomNodeComponent<CustomCompoundElementNodeProps>;
-export type CustomCompoundElementNodeProps = {
-    nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
-    nodeModel: NodeModel.WithElement<Any>;
+export declare function compoundElementNode<A extends Any = Unknown>(component: FC<CompoundElementNodeProps<A>>): Types.NodeRenderer<'compound-element'>;
+export type CompoundElementNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'compound-element'>;
+    nodeModel: NodeModel.WithElement<A>;
 };
 /**
  * Node that will be used to render the compound from the deployment model.
@@ -195,10 +190,10 @@ export type CustomCompoundElementNodeProps = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const compoundDeploymentNode: CustomNodeComponent<CustomCompoundDeploymentNodeProps>;
-export type CustomCompoundDeploymentNodeProps = {
-    nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<Any>;
+export declare function compoundDeploymentNode<A extends Any = Unknown>(component: FC<CompoundDeploymentNodeProps<A>>): Types.NodeRenderer<'compound-deployment'>;
+export type CompoundDeploymentNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'compound-deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<A>;
 };
 /**
  * Node that will be used to render the view group from the model.
@@ -225,22 +220,14 @@ export type CustomCompoundDeploymentNodeProps = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const viewGroupNode: CustomNodeComponent<CustomViewGroupNodeProps>;
-export type CustomViewGroupNodeProps = {
-    nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
-    nodeModel: NodeModel.IsGroup<Any>;
+export declare function viewGroupNode<A extends Any = Unknown>(component: FC<ViewGroupNodeProps<A>>): Types.NodeRenderer<'view-group'>;
+export type ViewGroupNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'view-group'>;
+    nodeModel: NodeModel.IsGroup<A>;
 };
-export declare const sequenceActorNode: CustomNodeComponent<CustomSequenceActorNodeProps>;
-export type CustomSequenceActorNodeProps = {
-    nodeProps: NodeProps<Types.SequenceActorNodeData, 'seq-actor'>;
-    nodeModel: NodeModel.WithElement<Any>;
+export declare function sequenceActorNode<A extends Any = Unknown>(component: FC<SequenceActorNodeProps<A>>): Types.NodeRenderer<'seq-actor'>;
+export type SequenceActorNodeProps<A extends Any = Unknown> = {
+    nodeProps: Types.NodeProps<'seq-actor'>;
+    nodeModel: NodeModel.WithElement<A>;
 };
-export interface CustomNodes {
-    element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>;
-    deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>;
-    compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>;
-    compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>;
-    viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>;
-    sequenceActor?: FunctionComponent<NodeProps<Types.SequenceActorNodeData, 'seq-actor'>>;
-}
 export {};

package/dist/custom/customNodes.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
-import { customNode } from '../base/primitives/customNode.js';
+import { useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
 
 function customDiagramNode(Node) {
-  return customNode((props) => {
+  return ((props) => {
     const viewId = props.data.viewId;
     const viewModel = useLikeC4ViewModel(viewId);
     if (!viewModel) {
@@ -18,14 +17,26 @@ function customDiagramNode(Node) {
       );
       return null;
     }
-    return jsx(Node, { nodeProps: props, nodeModel: model });
+    return /* @__PURE__ */ jsx(Node, { nodeProps: props, nodeModel: model });
   });
 }
-const elementNode = customDiagramNode;
-const deploymentNode = customDiagramNode;
-const compoundElementNode = customDiagramNode;
-const compoundDeploymentNode = customDiagramNode;
-const viewGroupNode = customDiagramNode;
-const sequenceActorNode = customDiagramNode;
+function elementNode(component) {
+  return customDiagramNode(component);
+}
+function deploymentNode(component) {
+  return customDiagramNode(component);
+}
+function compoundElementNode(component) {
+  return customDiagramNode(component);
+}
+function compoundDeploymentNode(component) {
+  return customDiagramNode(component);
+}
+function viewGroupNode(component) {
+  return customDiagramNode(component);
+}
+function sequenceActorNode(component) {
+  return customDiagramNode(component);
+}
 
 export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode };

package/dist/custom/hooks.d.ts

@@ -1,12 +1,11 @@
-export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../state/types';
+export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../likec4diagram/state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, type XYFlowInstance, type XYStoreApi, } from '../hooks/useXYFlow';
-export { useCurrentViewModel, } from '../likec4model/useCurrentViewModel';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../likec4model/useLikeC4Project';
-export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
+export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
+export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.d.ts

@@ -1,4 +1,14 @@
-export * from './components';
+export * from './builtins';
 export * from './customNodes';
 export * from './hooks';
+export * from './primitives';
+export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
+export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
+export { Base } from '../base/types';
 export type { Types } from '../likec4diagram/types';
+export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';
+export { Overlay } from '../overlays/overlay/Overlay';
+export type { OverlayProps } from '../overlays/overlay/Overlay';
+export { PortalToContainer } from '../components/PortalToContainer';
+export { ShadowRoot } from '../shadowroot/ShadowRoot';
+export { FramerMotionConfig } from '../context/FramerMotionConfig';

package/dist/custom/index.js

@@ -1,33 +1,38 @@
 export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from './customNodes.js';
-export { CompoundActionButton } from '../base/primitives/compound/CompoundActionButton.js';
-export { CompoundDetailsButton } from '../base/primitives/compound/CompoundDetailsButton.js';
-export { CompoundNodeContainer } from '../base/primitives/compound/CompoundNodeContainer.js';
-export { CompoundTitle } from '../base/primitives/compound/CompoundTitle.js';
-export { DefaultHandles } from '../base/primitives/NodeHandles.js';
-export { ElementActionButtons } from '../base/primitives/element/ElementActionButtons.js';
-export { ElementDetailsButton } from '../base/primitives/element/ElementDetailsButton.js';
-export { ElementNodeContainer } from '../base/primitives/element/ElementNodeContainer.js';
-export { ElementShape } from '../base/primitives/element/ElementShape.js';
-export { ElementTag, ElementTags } from '../base/primitives/element/ElementTags.js';
-export { ElementTitle } from '../base/primitives/element/ElementTitle.js';
-export { MarkdownBlock } from '../base/primitives/MarkdownBlock.js';
-export { IconOrShapeRenderer, IconRenderer, IconRendererProvider } from '../context/IconRenderer.js';
+export { Base } from '../base/types.js';
+export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
+export { Overlay } from '../overlays/overlay/Overlay.js';
+export { PortalToContainer } from '../components/PortalToContainer.js';
+export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
+export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
 export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
 export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
 export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
+export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
 export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
-export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
-export { Overlay } from '../overlays/overlay/Overlay.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
-export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
-export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';
+export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
+export { CompoundDetailsButton } from '../base-primitives/compound/CompoundDetailsButton.js';
+export { CompoundNodeContainer } from '../base-primitives/compound/CompoundNodeContainer.js';
+export { CompoundTitle } from '../base-primitives/compound/CompoundTitle.js';
+export { DefaultHandles } from '../base-primitives/NodeHandles.js';
+export { ElementActionButtons } from '../base-primitives/element/ElementActionButtons.js';
+export { ElementData } from '../base-primitives/element/ElementData.js';
+export { ElementDetailsButton } from '../base-primitives/element/ElementDetailsButton.js';
+export { ElementNodeContainer } from '../base-primitives/element/ElementNodeContainer.js';
+export { ElementShape } from '../base-primitives/element/ElementShape.js';
+export { ElementTag, ElementTags } from '../base-primitives/element/ElementTags.js';
+export { Markdown } from '../base-primitives/Markdown.js';
+export { memoEdge } from '../base-primitives/memoEdge.js';
+export { memoNode } from '../base-primitives/memoNode.js';

package/dist/custom/primitives.d.ts

@@ -0,0 +1 @@
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, Markdown, memoEdge, memoNode, } from '../base-primitives';

package/dist/hooks/index.d.ts

@@ -4,3 +4,9 @@ export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
 export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';
+export { useCurrentViewId } from './useCurrentViewId';
+export { useCurrentViewModel } from './useCurrentViewModel';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './useLikeC4Model';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
+export { useLikeC4Styles } from './useLikeC4Styles';
+export * from './useDiagram';

package/dist/hooks/safeContext.d.ts

@@ -1,4 +1,4 @@
-import { DiagramActorRef } from '../state/types';
+import { DiagramActorRef } from '../likec4diagram/state/types';
 import { Provider } from 'react';
 export declare const DiagramActorContextProvider: Provider<DiagramActorRef>;
 export declare const useDiagramActorRef: () => DiagramActorRef;

package/dist/{likec4model → hooks}/useCurrentViewModel.d.ts

@@ -1,3 +1,4 @@
-import { CurrentViewModel } from './LikeC4ModelContext';
+import { CurrentViewModel } from '../context/LikeC4ModelContext';
+export type { CurrentViewModel };
 export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
 export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/hooks/useCurrentViewModel.js

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

package/dist/hooks/useDiagram.d.ts

@@ -1,19 +1,27 @@
-import { aux, DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, NodeId, NodeNotation as ElementNotation, scalar } from '@likec4/core/types';
+import { DynamicViewDisplayVariant, NodeNotation as ElementNotation } from '@likec4/core/types';
 import { DependencyList } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
+import { AlignmentMode } from '../likec4diagram/state/aligners';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../likec4diagram/state/types';
 import { Types } from '../likec4diagram/types';
-import { AlignmentMode } from '../state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../state/types';
 import { useDiagramActorRef } from './safeContext';
+import type * as t from '@likec4/core/types';
+type Any = t.aux.Any;
+type Unknown = t.aux.UnknownLayouted;
+type ViewId<A> = t.aux.ViewId<A>;
+type Fqn<A> = t.aux.Fqn<A>;
+type NodeId = t.aux.NodeId;
+type EdgeId = t.aux.EdgeId;
 export { useDiagramActorRef };
-export interface DiagramApi {
+export type { DiagramContext };
+export interface DiagramApi<A extends Any = Unknown> {
     readonly actor: DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
-    readonly currentView: DiagramView;
+    readonly currentView: t.DiagramView<A>;
     /**
      * Send event to diagram actor
      */
@@ -21,7 +29,7 @@ export interface DiagramApi {
     /**
      * Navigate to view
      */
-    navigateTo(viewId: scalar.ViewId, fromNode?: scalar.NodeId): void;
+    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
     /**
      * Navigate back or forward in history
      */
@@ -33,18 +41,18 @@ export interface DiagramApi {
     /**
      * Open relationships browser
      */
-    openRelationshipsBrowser(fqn: scalar.Fqn): void;
+    openRelationshipsBrowser(fqn: Fqn<A>): void;
     /**
      * If running in editor, trigger opening source file
      */
-    openSource(params: OpenSourceParams<aux.Unknown>): void;
+    openSource(params: OpenSourceParams<A>): void;
     /**
      * Open element details card
      */
-    openElementDetails(fqn: scalar.Fqn, fromNode?: scalar.NodeId): void;
-    openRelationshipDetails(...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]): void;
-    updateNodeData(nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>): void;
-    updateEdgeData(edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>): void;
+    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
+    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
+    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
+    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
     /**
      * Schedule save manual layout
      */
@@ -76,7 +84,7 @@ export interface DiagramApi {
     /**
      * @warning Do not use in render phase
      */
-    findDiagramNode(xynodeId: string): DiagramNode | null;
+    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
     /**
      * @warning Do not use in render phase
      */
@@ -84,7 +92,7 @@ export interface DiagramApi {
     /**
      * @warning Do not use in render phase
      */
-    findDiagramEdge(xyedgeId: string): DiagramEdge | null;
+    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
     startWalkthrough(): void;
     walkthroughStep(direction?: 'next' | 'previous'): void;
     stopWalkthrough(): void;
@@ -101,7 +109,7 @@ export interface DiagramApi {
  * Diagram API
  * Mostly for internal use
  */
-export declare function useDiagram(): DiagramApi;
+export declare function useDiagram<A extends Any = Unknown>(): DiagramApi<A>;
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context

package/dist/hooks/useDiagram.js

@@ -2,7 +2,7 @@ import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
+import { findDiagramEdge, findDiagramNode } from '../likec4diagram/state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {

package/dist/{likec4model → hooks}/useLikeC4Model.d.ts

@@ -1,6 +1,7 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
 import type * as t from '@likec4/core/types';
 type Any = t.aux.Any;
+export declare function useOptionalLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A> | null;
 export declare function useLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A>;
 export declare function useLikeC4ViewModel<A extends Any = t.aux.UnknownLayouted>(viewId: t.aux.ViewId<A>): LikeC4ViewModel<A>;
 export declare function useLikeC4Specification(): t.Specification<t.aux.UnknownLayouted>;

package/dist/{likec4model → hooks}/useLikeC4Model.js

@@ -1,7 +1,10 @@
 import { deepEqual } from 'fast-equals';
 import { useContext, useState, useEffect } from 'react';
-import { LikeC4ModelContext } from './LikeC4ModelContext.js';
+import { LikeC4ModelContext } from '../context/LikeC4ModelContext.js';
 
+function useOptionalLikeC4Model() {
+  return useContext(LikeC4ModelContext);
+}
 function useLikeC4Model() {
   const model = useContext(LikeC4ModelContext);
   if (!model) {
@@ -22,4 +25,4 @@ function useLikeC4Specification() {
   return specification;
 }
 
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model };