@likec4/diagram 1.60.0 → 1.61.0

package/dist/context/TagStylesContext.mjs

@@ -6,10 +6,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { entries, flatMap, isEmpty, join, pipe } from "remeda";
 import { isTagColorSpecified } from "@likec4/core";
 import { useMantineStyleNonce } from "@mantine/core";
-import { DefaultTagColors, LikeC4Styles, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
+import { LikeC4Styles, getContrastedColorsAPCA, isDefaultTagColor, isValidColor } from "@likec4/core/styles";
 
-//#region src/context/TagStylesContext.tsx
-const radixColors = DefaultTagColors;
+// src/context/TagStylesContext.tsx
 function generateColorVars(spec, styles = LikeC4Styles.DEFAULT) {
 	const color = spec.color;
 	if (isTagColorSpecified(spec) && isValidColor(color)) return `
@@ -17,22 +16,12 @@ function generateColorVars(spec, styles = LikeC4Styles.DEFAULT) {
   --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
   --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
     `;
-	if (radixColors.includes(color)) {
-		let textcolor = `var(--colors-${color}-12)`;
-		if ([
-			"mint",
-			"grass",
-			"lime",
-			"yellow",
-			"amber"
-		].includes(color)) textcolor = "rgba(0 0 0 / 0.85)";
-		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: ${textcolor};
+	if (isDefaultTagColor(color)) return `
+  --colors-likec4-tag-border: var(--colors-likec4-tag-${color}-border);
+  --colors-likec4-tag-bg: var(--colors-likec4-tag-${color}-bg);
+  --colors-likec4-tag-bg-hover: var(--colors-likec4-tag-${color}-bg-hover);
+  --colors-likec4-tag-text: var(--colors-likec4-tag-${color}-text);
     `;
-	}
 	if (styles.isThemeColor(color)) {
 		const { fill, hiContrast } = styles.tagColor(color);
 		return `
@@ -74,5 +63,4 @@ const TagStylesheet = memo(({ stylesheet, nonce }) => {
 	});
 });
 
-//#endregion
 export { TagStylesProvider, generateColorVars };

package/dist/custom/builtins.d.mts

@@ -1,9 +1,12 @@
 import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.mjs";
 import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.mjs";
+import { GraphElementNode } from "../likec4diagram/custom/nodes/GraphElementNode.mjs";
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.mjs";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.mjs";
+import { SequenceSubflowArea } from "../likec4diagram/custom/nodes/SequenceSubFlow.mjs";
+import { NodeDrifts } from "../likec4diagram/custom/nodes/NodeDrifts.mjs";
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs";
 import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.mjs";
 import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.mjs";
 import "../likec4diagram/custom/nodes/index.mjs";
-export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode };
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, GraphElementNode, NodeDrifts, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, Toolbar, ViewGroupNode };

package/dist/custom/customNodes.d.mts

@@ -1,9 +1,9 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { NodeRenderers } from "../LikeC4Diagram.props.mjs";
 import { Types } from "../likec4diagram/types.mjs";
 import { FC } from "react";
 import { aux } from "@likec4/core/types";
 import { NodeModel } from "@likec4/core/model";
-//#region src/custom/customNodes.d.ts
 type Any$1 = aux.Any;
 type Unknown = aux.UnknownLayouted;
 /**
@@ -30,7 +30,7 @@ type Unknown = aux.UnknownLayouted;
  *   ElementToolbar,
  *   DefaultHandles,
  *   ElementTags
- * } from '@likec4/diagram/custom'
+ * } from 'likec4/react'
  *
  * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
@@ -60,6 +60,10 @@ type Unknown = aux.UnknownLayouted;
  * ```
  */
 export declare function elementNode<A extends Any$1 = Unknown>(component: FC<ElementNodeProps<A>>): Types.NodeRenderer<'element'>;
+/**
+ * Props passed to custom element node renderers
+ * @template A - The aux type for the model
+ */
 export type ElementNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'element'>;
   nodeModel: NodeModel.WithElement<A>;
@@ -87,7 +91,7 @@ export type ElementNodeProps<A extends Any$1 = Unknown> = {
  *   IfNotReadOnly,
  *   DeploymentElementToolbar,
  *   DefaultHandles,
- * } from '@likec4/diagram/custom'
+ * } from 'likec4/react'
  *
  * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
@@ -113,6 +117,10 @@ export type ElementNodeProps<A extends Any$1 = Unknown> = {
  * ```
  */
 export declare function deploymentNode<A extends Any$1 = Unknown>(component: FC<DeploymentNodeProps<A>>): Types.NodeRenderer<'deployment'>;
+/**
+ * Props passed to custom deployment node renderers
+ * @template A - The aux type for the model
+ */
 export type DeploymentNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'deployment'>;
   nodeModel: NodeModel.WithDeploymentElement<A>;
@@ -138,7 +146,7 @@ export type DeploymentNodeProps<A extends Any$1 = Unknown> = {
  *   IfEnabled,
  *   CompoundElementToolbar,
  *   DefaultHandles,
- * } from '@likec4/diagram/custom'
+ * } from 'likec4/react'
  *
  * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
  *   <CompoundNodeContainer nodeProps={props}>
@@ -156,6 +164,10 @@ export type DeploymentNodeProps<A extends Any$1 = Unknown> = {
  * ```
  */
 export declare function compoundElementNode<A extends Any$1 = Unknown>(component: FC<CompoundElementNodeProps<A>>): Types.NodeRenderer<'compound-element'>;
+/**
+ * Props passed to custom compound element node renderers
+ * @template A - The aux type for the model
+ */
 export type CompoundElementNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'compound-element'>;
   nodeModel: NodeModel.WithElement<A>;
@@ -179,7 +191,7 @@ export type CompoundElementNodeProps<A extends Any$1 = Unknown> = {
  *   CompoundActions,
  *   CompoundDeploymentToolbar,
  *   DefaultHandles,
- * } from '@likec4/diagram/custom'
+ * } from 'likec4/react'
  *
  * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
  *   <CompoundNodeContainer nodeProps={nodeProps}>
@@ -193,6 +205,10 @@ export type CompoundElementNodeProps<A extends Any$1 = Unknown> = {
  * ```
  */
 export declare function compoundDeploymentNode<A extends Any$1 = Unknown>(component: FC<CompoundDeploymentNodeProps<A>>): Types.NodeRenderer<'compound-deployment'>;
+/**
+ * Props passed to custom compound deployment node renderers
+ * @template A - The aux type for the model
+ */
 export type CompoundDeploymentNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'compound-deployment'>;
   nodeModel: NodeModel.WithDeploymentElement<A>;
@@ -213,7 +229,7 @@ export type CompoundDeploymentNodeProps<A extends Any$1 = Unknown> = {
  *   CompoundNodeContainer,
  *   CompoundTitle,
  *   DefaultHandles,
- * } from '@likec4/diagram/custom'
+ * } from 'likec4/react'
  *
  * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
  *   <CompoundNodeContainer nodeProps={nodeProps}>
@@ -223,13 +239,154 @@ export type CompoundDeploymentNodeProps<A extends Any$1 = Unknown> = {
  * ```
  */
 export declare function viewGroupNode<A extends Any$1 = Unknown>(component: FC<ViewGroupNodeProps<A>>): Types.NodeRenderer<'view-group'>;
+/**
+ * Props passed to custom view group node renderers
+ * @template A - The aux type for the model
+ */
 export type ViewGroupNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'view-group'>;
   nodeModel: NodeModel.IsGroup<A>;
 };
+/**
+ * Node that will be used to render the sequence actor from the model.
+ *
+ * Custom node renderer receives these props:
+ * - `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)
+ */
 export declare function sequenceActorNode<A extends Any$1 = Unknown>(component: FC<SequenceActorNodeProps<A>>): Types.NodeRenderer<'seq-actor'>;
+/**
+ * Props passed to custom sequence actor node renderers
+ * @template A - The aux type for the model
+ */
 export type SequenceActorNodeProps<A extends Any$1 = Unknown> = {
   nodeProps: Types.NodeProps<'seq-actor'>;
   nodeModel: NodeModel.WithElement<A>;
 };
-//#endregion
+/**
+ * Helper function to define custom node renderers
+ *
+ * @example
+ * ```tsx
+ * import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+ *
+ * const CustomElementNode = defineNode('element', (nodeProps) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementData {...nodeProps} />
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ * Or using bound methods:
+ *
+ * @example
+ * ```tsx
+ * import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+ *
+ * const CustomElementNode = defineNode.element((nodeProps) => (
+ *   <ElementNodeContainer {...nodeProps}>
+ *     <ElementData {...nodeProps} />
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+declare function defineNode<T extends Types.NodeType>(nodeType: T, renderer: Types.NodeRenderer<T>): Types.NodeRenderer<T>;
+declare namespace defineNode {
+  var element: NodeRendererFactory<"element">;
+  var deploymentNode: NodeRendererFactory<"deployment">;
+  var compoundElement: NodeRendererFactory<"compound-element">;
+  var compoundDeployment: NodeRendererFactory<"compound-deployment">;
+  var viewGroup: NodeRendererFactory<"view-group">;
+  var seqActor: NodeRendererFactory<"seq-actor">;
+  var seqSubflow: NodeRendererFactory<"seq-subflow">;
+}
+/**
+ * Factory type for creating bound node renderers for a specific node type
+ * @template T - The node type
+ */
+type NodeRendererFactory<T extends Types.NodeType> = (renderer: Types.NodeRenderer<T>) => Types.NodeRenderer<T>;
+/**
+ * Helper function to define custom node renderers
+ *
+ * @example
+ * ```tsx
+ * import { defineNodes, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+ *
+ * const CustomNodes = defineNodes({
+ *   element: (nodeProps) => (
+ *     <ElementNodeContainer {...nodeProps}>
+ *       <ElementData {...nodeProps} />
+ *       <DefaultHandles />
+ *     </ElementNodeContainer>
+ *   ),
+ *   deployment: (nodeProps) => (
+ *     <DeploymentNodeContainer {...nodeProps}>
+ *       <DeploymentTitle {...nodeProps} />
+ *       <DefaultHandles />
+ *     </DeploymentNodeContainer>
+ *   ),
+ * })
+ * ```
+ *
+ * {@link defineNode}
+ */
+export declare function defineNodes<T extends NodeRenderers>(renderers: T): T;
+/**
+ * Helper function to get the default node renderer for a given node type
+ *
+ * @param type - The node type to get the default renderer for
+ * @returns The default node renderer for the specified type
+ */
+export declare function defaultNodeRenderer<T extends Types.NodeType>(type: T): Types.NodeRenderer<T>;
+/**
+ * Component type for wrapping node renderers
+ * @template P - The node props type
+ */
+type NodeWrapper<P extends Types.NodeProps<any>> = FC<{
+  /**
+   * Original node props
+   */
+  props: P;
+  /**
+   * Node renderer to wrap
+   */
+  Node: Types.NodeRenderer<P['type']>;
+}>;
+/**
+ * Helper function to wrap a node renderer with a custom wrapper component
+ *
+ * @example
+ * ```tsx
+ * import { wrapNode } from 'likec4/react'
+ *
+ * const WrappedElementNode = wrapNode('element', ({ props, Node }) => (
+ *   <div className="custom-wrapper">
+ *     <Node {...props} />
+ *   </div>
+ * ))
+ * ```
+ *
+ * @param nodeType - The node type to wrap
+ * @param Wrapper - The wrapper component
+ * @returns A wrapped node renderer
+ */
+export declare function wrapNode<T extends Types.NodeType>(nodeType: T, Wrapper: NodeWrapper<Types.NodeProps<T>>): Types.NodeRenderer<T>;
+export declare namespace wrapNode {
+  var element: BoundWrapper<"element">;
+  var deployment: BoundWrapper<"deployment">;
+  var compoundElement: BoundWrapper<"compound-element">;
+  var compoundDeployment: BoundWrapper<"compound-deployment">;
+  var viewGroup: BoundWrapper<"view-group">;
+  var seqActor: BoundWrapper<"seq-actor">;
+  var seqSubflow: BoundWrapper<"seq-subflow">;
+  var graphElement: BoundWrapper<"graph-element">;
+}
+/**
+ * Factory type for creating bound node wrappers for a specific node type
+ * @template T - The node type
+ */
+type BoundWrapper<T extends Types.NodeType> = (wrapper: NodeWrapper<Types.NodeProps<T>>) => Types.NodeRenderer<T>;
+export { defineNode };