likec4 1.27.1 → 1.27.3

package/dist/shared/{likec4.C0T-ybr5.d.mts → likec4.QmEWuoHf.d.mts}

@@ -8665,10 +8665,10 @@ const a=super.elementToSubgraph(e,o);return e.children.length>1&&a.set(attribute
 set(c?attribute.xlabel:attribute.label,f),e.color){const l=this.getRelationshipColorValues(e.color);r.attributes.apply({[attribute.color]:l.lineColor,[attribute.fontcolor]:l.labelColor});}let[i,u]=[e.head??DefaultArrowType,e.tail??"none"];return i==="none"&&u==="none"?(r.attributes.apply({[attribute.arrowtail]:"none",[attribute.arrowhead]:"none",[attribute.dir]:"none"}),r):e.dir==="both"?(r.attributes.apply({[attribute.arrowhead]:toArrowType(i),[attribute.arrowtail]:toArrowType(e.tail??i),[attribute.dir]:"both"}),!c&&ComputedNode$1.modelRef(w)!==ComputedNode$1.modelRef(v)&&r.attributes.set(attribute.constraint,false),r):(i!==DefaultArrowType&&r.attributes.set(
 attribute.arrowhead,toArrowType(i)),u!=="none"&&r.attributes.set(attribute.arrowtail,toArrowType(u)),r)}}
 
-class DynamicViewPrinter extends DotPrinter{static toDot(t){return new DynamicViewPrinter(t).print()}postBuild(t){t.set(attribute.TBbalance,"max");}addEdge(t,b){const{nodes:n}=this.
-view,[s,p]=t.dir==="back"?[t.target,t.source]:[t.source,t.target],[T,h,c]=this.edgeEndpoint(s,e=>last(e)),[V,f,d]=this.edgeEndpoint(p,first),r=b.edge([h,f],{[attribute.likec4_id]:t.id,[attribute.style]:t.line??DefaultEdgeStyle});if(d&&r.attributes.set(attribute.lhead,d),c&&r.attributes.set(attribute.ltail,c),t.color&&t.color!==DefaultRelationshipColor){const e=this.getRelationshipColorValues(t.color);r.attributes.apply({[attribute.color]:e.lineColor,[attribute.fontcolor]:e.labelColor});}const y=[t.label?.trim(),t.technology?.trim()].filter(isTruthy).join(`
-`),w=extractStep(t.id),x=stepEdgeLabel(w,y);r.attributes.set(attribute.label,x);const u=this.graphology.getEdgeAttribute(t.id,"weight");t.source!==t.target&&u>1&&r.attributes.set(attribute.weight,u);const D=n.findIndex(e=>e.id===s);n.findIndex(e=>e.id===p)<D&&t.dir!=="back"&&r.attributes.apply({[attribute.constraint]:false});let[i,a]=[t.head??DefaultArrowType,t.tail??"none"];return t.dir==="back"?(r.attributes.apply({[attribute.arrowtail]:toArrowType(i),[attribute.minlen]:0,[attribute.dir]:"back"}),a!=="none"&&r.attributes.apply({[attribute.arrowhead]:toArrowType(a),[attribute.dir]:"both"}),r):i==="none"&&a==="none"||
-i!=="none"&&a!=="none"?(r.attributes.apply({[attribute.arrowhead]:toArrowType(i),[attribute.arrowtail]:toArrowType(a),[attribute.dir]:"both"}),r):i==="none"?(r.attributes.delete(attribute.arrowhead),r.attributes.apply({[attribute.arrowtail]:toArrowType(a),[attribute.minlen]:0,[attribute.dir]:"back"}),r):(i!==DefaultArrowType&&r.attributes.set(attribute.arrowhead,toArrowType(i)),r)}}
+class DynamicViewPrinter extends DotPrinter{static toDot(t){return new DynamicViewPrinter(t).print()}postBuild(t){t.delete(attribute.TBbalance);}addEdge(t,b){const{nodes:n}=this.
+view,[s,p]=t.dir==="back"?[t.target,t.source]:[t.source,t.target],[T,h,d]=this.edgeEndpoint(s,r=>last(r)),[V,f,c]=this.edgeEndpoint(p,first),e=b.edge([h,f],{[attribute.likec4_id]:t.id,[attribute.style]:t.line??DefaultEdgeStyle});if(c&&e.attributes.set(attribute.lhead,c),d&&e.attributes.set(attribute.ltail,d),t.color&&t.color!==DefaultRelationshipColor){const r=this.getRelationshipColorValues(t.color);e.attributes.apply({[attribute.color]:r.lineColor,[attribute.fontcolor]:r.labelColor});}const y=[t.label?.trim(),t.technology?.trim()].filter(isTruthy).join(`
+`),w=extractStep(t.id),D=stepEdgeLabel(w,y);e.attributes.set(attribute.label,D);const u=this.graphology.getEdgeAttribute(t.id,"weight");t.source!==t.target&&u>1&&e.attributes.set(attribute.weight,u);const E=n.findIndex(r=>r.id===s);n.findIndex(r=>r.id===p)<E&&t.dir!=="back"&&e.attributes.apply({[attribute.constraint]:false});let[i,a]=[t.head??DefaultArrowType,t.tail??"none"];return t.dir==="back"?(e.attributes.apply({[attribute.arrowtail]:toArrowType(i),[attribute.minlen]:0,[attribute.dir]:"back"}),a!=="none"&&e.attributes.apply({[attribute.arrowhead]:toArrowType(a),[attribute.dir]:"both"}),e):i==="none"&&a==="none"||
+i!=="none"&&a!=="none"?(e.attributes.apply({[attribute.arrowhead]:toArrowType(i),[attribute.arrowtail]:toArrowType(a),[attribute.dir]:"both"}),e):i==="none"?(e.attributes.delete(attribute.arrowhead),e.attributes.apply({[attribute.arrowtail]:toArrowType(a),[attribute.minlen]:0,[attribute.dir]:"back"}),e):(i!==DefaultArrowType&&e.attributes.set(attribute.arrowhead,toArrowType(i)),e)}}
 
 class ElementViewPrinter extends DotPrinter{postBuild(t){this.assignGroups();const b=new Set,w=this.view.nodes.reduce((l,i)=>(isCompound(i)&&(b.add(
 i.id),l.push(i)),l),[]);let h=false;for(const l of w){const i=pipe(l.children,filter(n=>!this.compoundIds.has(n)),map(n=>this.computedNode(n)),filter(n=>n.inEdges.length===0&&n.outEdges.length===0));if(i.length<=2)continue;let s=2;switch(true){case i.length>11:s=4;break;case i.length>4:s=3;break}const g=nonNullable(this.getSubgraph(l.id),`Subgraph not found for ${l.id}`);let f=null;chunk(i,s).forEach(n=>{const a=n.length>1?g.createSubgraph({[attribute.rank]:"same"}):null;n.forEach((m,r)=>{const d=this.getGraphNode(m.id);d&&(a?.node(d.id),

package/dist/shared/{likec4.D_ELXBwW.mjs → likec4.sbYSTpRI.mjs}

@@ -1,4 +1,4 @@
-import{relative as Z}from"node:path";import{f as ee,g as x,T as te,N as U,i as ne,n as _,j as S,u as m,l as ie,C as re,a as oe,b as D,c as ae,t as se,d as P,m as de,p as ce,e as O,L as le}from"./likec4.CcbefjP5.mjs";function pe(t){var e,i;if(t){if("astNode"in t)return ge(t);if(Array.isArray(t))return t.reduce(A,void 0);{const n=t,r=ue(n)?fe((i=(e=n?.root)===null||e===void 0?void 0:e.astNode)!==null&&i!==void 0?i:n?.astNode):void 0;return v(n,r)}}else return}function ue(t){return typeof t<"u"&&"e\
+import{relative as Z}from"node:path";import{f as ee,g as x,T as te,N as U,i as ne,n as _,j as S,u as m,l as ie,C as re,a as oe,b as D,c as ae,t as se,d as P,m as de,p as ce,e as O,L as le}from"./likec4.CY1x3B5z.mjs";function pe(t){var e,i;if(t){if("astNode"in t)return ge(t);if(Array.isArray(t))return t.reduce(A,void 0);{const n=t,r=ue(n)?fe((i=(e=n?.root)===null||e===void 0?void 0:e.astNode)!==null&&i!==void 0?i:n?.astNode):void 0;return v(n,r)}}else return}function ue(t){return typeof t<"u"&&"e\
 lement"in t&&"text"in t}function fe(t){try{return x(t).uri.toString()}catch{return}}function ge(t){var e,i;const{astNode:n,property:r,index:a}=t??{},o=(e=n?.$cstNode)!==null&&e!==void 0?e:n?.$textRegion;if(!(n===void 0||o===void 0)){if(r===void 0)return v(o,T(n));{const s=d=>a!==void 0&&a>-1&&Array.isArray(n[r])?a<d.length?d[a]:void 0:d.reduce(A,void 0);if(!((i=o.assignments)===null||i===void 0)&&i[r]){const d=s(o.assignments[r]);return d&&v(d,T(n))}else if(n.$cstNode){const d=s(ee(n.$cstNode,r));
 return d&&v(d,T(n))}else return}}}function T(t){var e,i,n,r;return t.$cstNode?(i=(e=x(t))===null||e===void 0?void 0:e.uri)===null||i===void 0?void 0:i.toString():t.$textRegion?t.$textRegion.documentURI||((r=(n=new te(t,a=>a.$container?[a.$container]:[]).find(a=>{var o;return(o=a.$textRegion)===null||o===void 0?void 0:o.documentURI}))===null||n===void 0?void 0:n.$textRegion)===null||r===void 0?void 0:r.documentURI):void 0}function v(t,e){var i,n;const r={offset:t.offset,end:(i=t.end)!==null&&i!==
 void 0?i:t.offset+t.length,length:(n=t.length)!==null&&n!==void 0?n:t.end-t.offset};return t.range&&(r.range=t.range),e??(e=t.fileURI),e&&(r.fileURI=e),r}function A(t,e){var i,n;if(t){if(!e)return t&&v(t)}else return e&&v(e);const r=(i=t.end)!==null&&i!==void 0?i:t.offset+t.length,a=(n=e.end)!==null&&n!==void 0?n:e.offset+e.length,o=Math.min(t.offset,e.offset),s=Math.max(r,a),d=s-o,c={offset:o,end:s,length:d};if(t.range&&e.range&&(c.range={start:e.range.start.line<t.range.start.line||e.range.start.

package/dist/vite-plugin/index.d.mts

@@ -1,4 +1,4 @@
-import { L as LikeC4LanguageServices } from '../shared/likec4.C0T-ybr5.mjs';
+import { L as LikeC4LanguageServices } from '../shared/likec4.QmEWuoHf.mjs';
 import '@likec4/core';
 import 'type-fest';
 import '@likec4/core/types';

package/dist/vite-plugin/index.mjs

@@ -1,2 +1,2 @@
-export{L as LikeC4VitePlugin}from"../shared/likec4.D_ELXBwW.mjs";import"node:path";import"../shared/likec4.CcbefjP5.mjs";import"node:fs";import"node:url";import"tty";import"node:util";import"util";import"path";import"os";import"crypto";import"net";import"url";import"fs";import"child_process";import"@likec4/core";import"@likec4/core/types";import"events";import"buffer";import"@hpcc-js/wasm-graphviz";import"@likec4/core/compute-view";import"@likec4/core/utils";import"node:process";import"boxen";import"node:child_process";
+export{L as LikeC4VitePlugin}from"../shared/likec4.sbYSTpRI.mjs";import"node:path";import"../shared/likec4.CY1x3B5z.mjs";import"node:fs";import"node:url";import"tty";import"node:util";import"util";import"path";import"os";import"crypto";import"net";import"url";import"fs";import"child_process";import"@likec4/core";import"@likec4/core/types";import"events";import"buffer";import"@hpcc-js/wasm-graphviz";import"@likec4/core/compute-view";import"@likec4/core/utils";import"node:process";import"boxen";import"node:child_process";
 import"node:events";import"node:fs/promises";import"node:stream/promises";import"node:os";import"fs/promises";import"@likec4/core/model";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -77,31 +77,31 @@
     "playwright": "^1.51.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "rollup": "^4.37.0",
+    "rollup": "^4.38.0",
     "type-fest": "^4.38.0",
-    "vite": "^6.2.3",
-    "@likec4/core": "1.27.1"
+    "vite": "^6.2.4",
+    "@likec4/core": "1.27.3"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
     "@dagrejs/dagre": "1.1.4",
     "@fontsource/ibm-plex-sans": "^5.2.5",
-    "@mantine/core": "7.17.2",
-    "@mantine/hooks": "7.17.2",
+    "@mantine/core": "7.17.3",
+    "@mantine/hooks": "7.17.3",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.1.0",
     "@tabler/icons-react": "3.31.0",
     "@tanstack/react-router": "^1.114.13",
     "@tanstack/router-cli": "^1.114.13",
     "@tanstack/router-vite-plugin": "^1.114.13",
-    "@types/node": "^20.17.27",
+    "@types/node": "^20.17.28",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@types/semver": "^7.5.8",
+    "@types/semver": "^7.7.0",
     "@types/yargs": "^17.0.33",
-    "@xyflow/react": "^12.4.4",
-    "@xyflow/system": "^0.0.52",
+    "@xyflow/react": "^12.5.2",
+    "@xyflow/system": "^0.0.53",
     "dts-bundle-generator": "^9.5.1",
     "autoprefixer": "^10.4.21",
     "classnames": "^2.5.1",
@@ -114,14 +114,14 @@
     "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
     "fdir": "^6.4.3",
-    "framer-motion": "^12.5.0",
+    "framer-motion": "^12.6.2",
     "get-port": "^7.1.0",
     "glob": "^11.0.1",
     "html-to-image": "^1.11.13",
     "json5": "^2.2.3",
     "ky": "^1.7.5",
     "langium": "3.4.0",
-    "merge-error-cause": "^5.0.1",
+    "merge-error-cause": "^5.0.2",
     "mkdirp": "^3.0.1",
     "nano-spawn": "^0.2.0",
     "nanostores": "0.11.4",
@@ -156,15 +156,15 @@
     "wireit": "^0.14.11",
     "which": "^5.0.0",
     "yargs": "17.7.2",
-    "@likec4/style-preset": "1.27.1",
-    "@likec4/styles": "1.27.1",
-    "@likec4/diagram": "1.27.1",
-    "@likec4/generators": "1.27.1",
-    "@likec4/icons": "1.27.1",
-    "@likec4/language-server": "1.27.1",
-    "@likec4/layouts": "1.27.1",
-    "@likec4/log": "1.27.1",
-    "@likec4/tsconfig": "1.27.1"
+    "@likec4/style-preset": "1.27.3",
+    "@likec4/styles": "1.27.3",
+    "@likec4/diagram": "1.27.3",
+    "@likec4/icons": "1.27.3",
+    "@likec4/generators": "1.27.3",
+    "@likec4/language-server": "1.27.3",
+    "@likec4/log": "1.27.3",
+    "@likec4/tsconfig": "1.27.3",
+    "@likec4/layouts": "1.27.3"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/react/index.d.mts

@@ -655,12 +655,12 @@ interface DiagramNode extends ComputedNode {
 	labelBBox: BBox;
 }
 declare namespace DiagramNode {
-	function modelRef(node: DiagramNode): Fqn | null;
-	function deploymentRef(node: DiagramNode): Fqn | null;
+	function modelRef(node: Pick<DiagramNode, "id" | "modelRef">): Fqn | null;
+	function deploymentRef(node: Pick<DiagramNode, "id" | "deploymentRef">): Fqn | null;
 	/**
 	 * Nodes group is a special kind of node, exisiting only in view
 	 */
-	function isNodesGroup(node: DiagramNode): boolean;
+	function isNodesGroup(node: Pick<DiagramNode, "kind">): boolean;
 }
 interface DiagramEdge extends ComputedEdge {
 	points: NonEmptyArray<Point>;
@@ -945,8 +945,18 @@ type OnConnectStartParams = {
 type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
 type OnConnect = (connection: Connection) => void;
 type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
+type PaddingUnit = "px" | "%";
+type PaddingWithUnit = `${number}${PaddingUnit}` | number;
+type Padding = PaddingWithUnit | {
+	top?: PaddingWithUnit;
+	right?: PaddingWithUnit;
+	bottom?: PaddingWithUnit;
+	left?: PaddingWithUnit;
+	x?: PaddingWithUnit;
+	y?: PaddingWithUnit;
+};
 type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
-	padding?: number;
+	padding?: Padding;
 	includeHiddenNodes?: boolean;
 	minZoom?: number;
 	maxZoom?: number;
@@ -979,7 +989,7 @@ type SetCenterOptions = ViewportHelperFunctionOptions & {
 type FitBoundsOptions = ViewportHelperFunctionOptions & {
 	padding?: number;
 };
-type PanelPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type PanelPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
 type ProOptions = {
 	account?: string;
 	hideAttribution: boolean;
@@ -1117,7 +1127,7 @@ type OnSelectionChangeParams<NodeType extends Node$1 = Node$1, EdgeType extends
 };
 type OnSelectionChangeFunc<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = (params: OnSelectionChangeParams<NodeType, EdgeType>) => void;
 type FitViewOptions<NodeType extends Node$1 = Node$1> = FitViewOptionsBase<NodeType>;
-type FitView = (fitViewOptions?: FitViewOptions) => Promise<boolean>;
+type FitView<NodeType extends Node$1 = Node$1> = (fitViewOptions?: FitViewOptions<NodeType>) => Promise<boolean>;
 type OnInit<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = (reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>) => void;
 type ViewportHelperFunctions = {
 	/**
@@ -1158,17 +1168,6 @@ type ViewportHelperFunctions = {
 	 * @returns Viewport
 	 */
 	getViewport: GetViewport;
-	/**
-	 * Fits the view.
-	 *
-	 * @param options.padding - optional padding
-	 * @param options.includeHiddenNodes - optional includeHiddenNodes
-	 * @param options.minZoom - optional minZoom
-	 * @param options.maxZoom - optional maxZoom
-	 * @param options.duration - optional duration. If set, a transition will be applied
-	 * @param options.nodes - optional nodes to fit the view to
-	 */
-	fitView: FitView;
 	/**
 	 * Sets the center of the view to the given position.
 	 *
@@ -1222,7 +1221,14 @@ type SelectionDragHandler<NodeType extends Node$1 = Node$1> = (event: ReactMouse
 type OnNodeDrag<NodeType extends Node$1 = Node$1> = (event: ReactMouseEvent, node: NodeType, nodes: NodeType[]) => void;
 type NodeProps$1<NodeType extends Node$1 = Node$1> = NodeProps<NodeType>;
 type EdgeLabelOptions = {
-	label?: string | ReactNode;
+	/**
+	 * The label or custom element to render along the edge. This is commonly a text label or some
+	 * custom controls.
+	 */
+	label?: ReactNode;
+	/**
+	 * Custom styles to apply to the label.
+	 */
 	labelStyle?: CSSProperties;
 	labelShowBg?: boolean;
 	labelBgStyle?: CSSProperties;
@@ -1988,6 +1994,7 @@ type GeneralHelpers<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Ed
 		nodeId: string;
 		handleId?: string | null;
 	}) => NodeConnection[];
+	fitView: FitView<NodeType>;
 };
 type ReactFlowInstance<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = GeneralHelpers<NodeType, EdgeType> & Omit<ViewportHelperFunctions, "initialized"> & {
 	viewportInitialized: boolean;
@@ -2020,6 +2027,8 @@ type ChangeEvent = {
 };
 type OnChange = (event: ChangeEvent) => void;
 type OverrideReactFlowProps = Pick<ReactFlowProps, "paneClickDistance" | "nodeClickDistance" | "selectionKeyCode" | "panActivationKeyCode" | "multiSelectionKeyCode" | "zoomActivationKeyCode" | "snapToGrid" | "snapGrid" | "onlyRenderVisibleElements" | "nodesDraggable" | "nodesFocusable" | "elementsSelectable" | "selectNodesOnDrag" | "panOnDrag" | "preventScrolling" | "zoomOnScroll" | "zoomOnPinch" | "panOnScroll" | "panOnScrollSpeed" | "panOnScrollMode" | "zoomOnDoubleClick" | "nodeDragThreshold">;
+type PaddingUnit$1 = "px" | "%";
+type PaddingWithUnit$1 = `${number}${PaddingUnit$1}` | number;
 interface LikeC4DiagramProperties {
 	view: DiagramView;
 	className?: string | undefined;
@@ -2050,10 +2059,10 @@ interface LikeC4DiagramProperties {
 	 */
 	fitView?: boolean | undefined;
 	/**
-	 * Seems like this is percentage of the view size
-	 * @default 0
+	 * Padding around the diagram
+	 * @default '8px'
 	 */
-	fitViewPadding?: number | undefined;
+	fitViewPadding?: PaddingWithUnit$1 | undefined;
 	/**
 	 * @default false if readonly
 	 */
@@ -2222,10 +2231,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
 	 */
 	fitView?: boolean | undefined;
 	/**
-	 * Seems like this is percentage of the view size
-	 * @default 0.1
+	 * Padding around the diagram
+	 * @default '8px'
 	 */
-	fitViewPadding?: number | undefined;
+	fitViewPadding?: PaddingWithUnit$1 | undefined;
 	/**
 	 * Display diagram title / description
 	 *
@@ -2302,10 +2311,10 @@ interface LikeC4BrowserProps {
 	 */
 	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
 	/**
-	 * Seems like this is percentage of the view size
-	 * @default 0.1
+	 * Padding around the diagram
+	 * @default '16px'
 	 */
-	fitViewPadding?: number | undefined;
+	fitViewPadding?: PaddingWithUnit$1 | undefined;
 	/**
 	 * Show/hide panel with top left controls,
 	 * @default true