@likec4/diagram 1.41.0 → 1.42.1

package/dist/likec4diagram/xyflow-sequence/sequence-view.js

@@ -1,273 +0,0 @@
-import { isStepEdgeId, getParallelStepsPrefix, RichText } from '@likec4/core/types';
-import { DefaultMap, nonNullable, invariant } from '@likec4/core/utils';
-import { hasAtLeast } from 'remeda';
-import { CONTINUOUS_OFFSET, SeqZIndex, SeqParallelAreaColor } from './const.js';
-import { SequenceViewLayouter } from './layouter.js';
-import { buildCompounds } from './utils.js';
-
-function sequenceViewToXY(view) {
-  const actors = [];
-  const actorPorts = new DefaultMap(() => []);
-  const steps = [];
-  const getNode = (id) => nonNullable(view.nodes.find((n) => n.id === id));
-  const parentsLookup = new DefaultMap(
-    (key) => {
-      const parent = key.parent ? getNode(key.parent) : null;
-      if (parent) {
-        return [parent, ...parentsLookup.get(parent)];
-      }
-      return [];
-    }
-  );
-  const addActor = (...[source, target]) => {
-    if (!actors.includes(source)) {
-      const indexOfTarget = actors.indexOf(target);
-      if (indexOfTarget > 0) {
-        actors.splice(indexOfTarget, 0, source);
-      } else {
-        actors.push(source);
-      }
-    }
-    if (!actors.includes(target)) {
-      actors.push(target);
-    }
-  };
-  let row = 0;
-  for (const edge of view.edges.filter((e) => isStepEdgeId(e.id))) {
-    const prevStep = steps.at(-1);
-    const source = getNode(edge.source);
-    const target = getNode(edge.target);
-    if (source.children.length || target.children.length) {
-      console.error("Sequence view does not support nested actors");
-      continue;
-    }
-    let sourceColumn = actors.indexOf(source);
-    let targetColumn = actors.indexOf(target);
-    const alreadyAdded = sourceColumn >= 0 && targetColumn >= 0;
-    if (!alreadyAdded) {
-      if (edge.dir === "back") {
-        addActor(target, source);
-      } else {
-        addActor(source, target);
-      }
-      sourceColumn = actors.indexOf(source);
-      targetColumn = actors.indexOf(target);
-    }
-    const isSelfLoop = source === target;
-    const isBack = sourceColumn > targetColumn;
-    const parallelPrefix = getParallelStepsPrefix(edge.id);
-    let isContinuing = false;
-    if (prevStep && prevStep.target == source && prevStep.parallelPrefix === parallelPrefix) {
-      isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack;
-    }
-    if (!isContinuing) {
-      row++;
-    }
-    const step = {
-      id: edge.id,
-      from: {
-        column: sourceColumn,
-        row
-      },
-      to: {
-        column: targetColumn,
-        row: isSelfLoop ? ++row : row
-      },
-      edge,
-      isSelfLoop,
-      isBack,
-      parallelPrefix,
-      offset: isContinuing ? (prevStep?.offset ?? 0) + CONTINUOUS_OFFSET : 0,
-      source,
-      target,
-      label: edge.labelBBox ? {
-        height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
-        width: edge.labelBBox.width + 16,
-        text: edge.label
-      } : null
-    };
-    steps.push(step);
-    actorPorts.get(source).push({ step, row, type: "source", position: isBack && !isSelfLoop ? "left" : "right" });
-    actorPorts.get(target).push({ step, row, type: "target", position: isBack || isSelfLoop ? "right" : "left" });
-  }
-  for (const step of steps) {
-    step.from.column = actors.indexOf(step.source);
-    step.to.column = actors.indexOf(step.target);
-  }
-  invariant(hasAtLeast(actors, 1), "actors array must not be empty");
-  const layout = new SequenceViewLayouter({
-    actors,
-    steps,
-    compounds: buildCompounds(actors, view.nodes)
-  });
-  const bounds = layout.getViewBounds();
-  return {
-    bounds,
-    xynodes: [
-      ...layout.getCompoundBoxes().map((box, i) => toCompoundArea(box, i, view)),
-      ...layout.getParallelBoxes().map((box) => toSeqParallelArea(box, view)),
-      ...actors.map(
-        (actor) => toSeqActorNode({
-          actor,
-          ports: actorPorts.get(actor),
-          bounds,
-          layout,
-          view
-        })
-      )
-    ],
-    xyedges: steps.map(({ id, edge, ...step }) => ({
-      id,
-      type: "seq-step",
-      data: {
-        id,
-        label: step.label?.text ?? null,
-        technology: edge.technology,
-        notes: RichText.from(edge.notes),
-        navigateTo: edge.navigateTo,
-        controlPoints: edge.controlPoints ?? null,
-        labelBBox: {
-          x: 0,
-          y: 0,
-          width: step.label?.width ?? edge.labelBBox?.width ?? 32,
-          height: step.label?.height ?? edge.labelBBox?.height ?? 32
-        },
-        labelXY: null,
-        points: edge.points,
-        color: edge.color ?? "gray",
-        line: edge.line ?? "solid",
-        dir: "forward",
-        head: "normal",
-        tail: "none"
-      },
-      selectable: true,
-      focusable: false,
-      zIndex: 20,
-      interactionWidth: 40,
-      source: step.source.id,
-      sourceHandle: id + "_source",
-      target: step.target.id,
-      targetHandle: id + "_target"
-    }))
-  };
-}
-function toCompoundArea({ node, x, y, width, height, depth }, index, view) {
-  return {
-    id: `${node.id}-${index}`,
-    type: "view-group",
-    data: {
-      id: node.id,
-      title: node.title,
-      color: node.color ?? "gray",
-      shape: node.shape,
-      style: node.style,
-      tags: node.tags,
-      position: [x, y],
-      viewId: view.id,
-      depth,
-      isViewGroup: true
-    },
-    // zIndex: SeqZIndex.compound,
-    position: {
-      x,
-      y
-    },
-    draggable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: "none"
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
-}
-function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
-  return {
-    id: `seq-parallel-${parallelPrefix}`,
-    type: "seq-parallel",
-    data: {
-      id: `seq-parallel-${parallelPrefix}`,
-      title: "PARALLEL",
-      technology: null,
-      color: SeqParallelAreaColor.default,
-      shape: "rectangle",
-      style: {},
-      tags: [],
-      position: [x, y],
-      level: 0,
-      icon: null,
-      width,
-      height,
-      description: RichText.EMPTY,
-      viewId: view.id,
-      parallelPrefix
-    },
-    zIndex: SeqZIndex.parallel,
-    position: {
-      x,
-      y
-    },
-    draggable: false,
-    deletable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: "none"
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
-}
-function toSeqActorNode({ actor, ports, bounds, layout, view }) {
-  const { x, y, width, height } = layout.getActorBox(actor);
-  return {
-    id: actor.id,
-    type: "seq-actor",
-    data: {
-      id: actor.id,
-      position: [x, y],
-      level: 0,
-      icon: actor.icon ?? null,
-      isMultiple: actor.style.multiple ?? false,
-      title: actor.title,
-      width,
-      height,
-      color: actor.color,
-      navigateTo: actor.navigateTo ?? null,
-      shape: actor.shape,
-      style: actor.style,
-      tags: actor.tags,
-      modelFqn: actor.modelRef ?? null,
-      technology: actor.technology,
-      description: RichText.from(actor.description),
-      viewHeight: bounds.height,
-      viewId: view.id,
-      ports: ports.map((p) => {
-        const bbox = layout.getPortCenter(p.step, p.type);
-        return {
-          id: p.step.id + "_" + p.type,
-          cx: bbox.cx - x,
-          cy: bbox.cy - y,
-          height: bbox.height,
-          type: p.type,
-          position: p.position
-        };
-      })
-    },
-    deletable: false,
-    selectable: true,
-    zIndex: SeqZIndex.actor,
-    position: { x, y },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height
-  };
-}
-
-export { sequenceViewToXY };

package/dist/likec4diagram/xyflow-sequence/utils.js

@@ -1,92 +0,0 @@
-import { Stack, isAncestor, nonNullable } from '@likec4/core/utils';
-import { pipe, groupBy, mapValues, values } from 'remeda';
-
-function findParallelRects(steps) {
-  return pipe(
-    steps,
-    groupBy((s) => s.parallelPrefix ?? void 0),
-    mapValues((steps2, parallelPrefix) => {
-      return steps2.reduce(
-        (acc, step) => {
-          acc.min.column = Math.min(acc.min.column, step.from.column, step.to.column);
-          acc.min.row = Math.min(acc.min.row, step.from.row, step.to.row);
-          acc.max.column = Math.max(acc.max.column, step.from.column, step.to.column);
-          acc.max.row = Math.max(acc.max.row, step.from.row, step.to.row);
-          return acc;
-        },
-        {
-          parallelPrefix,
-          min: {
-            column: Infinity,
-            row: Infinity
-          },
-          max: {
-            column: -Infinity,
-            row: -Infinity
-          }
-        }
-      );
-    }),
-    values()
-  );
-}
-function buildCompounds(actors, nodes) {
-  if (actors.length === 0 || actors.length === nodes.length) {
-    return [];
-  }
-  const getNode = (id) => nonNullable(nodes.find((n) => n.id === id));
-  function parentsLookup(node) {
-    const parent = node.parent ? getNode(node.parent) : null;
-    if (parent) {
-      return [parent, ...parentsLookup(parent)];
-    }
-    return [];
-  }
-  const stack = new Stack();
-  const result = [];
-  actors.forEach((actor) => {
-    const _ancestors = parentsLookup(actor);
-    if (_ancestors.length === 0) {
-      stack.clear();
-      return;
-    }
-    const ancestors = Stack.from(_ancestors);
-    let compound;
-    let parent;
-    while (true) {
-      compound = stack.peek()?.node;
-      parent = ancestors.peek();
-      if (!parent || !compound) {
-        break;
-      }
-      if (isAncestor(parent.id, compound.id) || parent.id === compound.id) {
-        ancestors.pop();
-        continue;
-      }
-      if (!isAncestor(compound.id, parent.id)) {
-        stack.pop();
-        continue;
-      }
-      break;
-    }
-    while (parent = ancestors.pop()) {
-      const parentAsCompound = {
-        node: parent,
-        from: actor,
-        to: actor,
-        nested: []
-      };
-      let compound2 = stack.peek();
-      if (!compound2) {
-        result.push(parentAsCompound);
-      } else {
-        compound2.nested.push(parentAsCompound);
-      }
-      stack.push(parentAsCompound);
-    }
-    stack.forEach((c) => c.to = actor);
-  });
-  return result;
-}
-
-export { buildCompounds, findParallelRects };

package/dist/likec4model/index.d.ts

@@ -1,4 +0,0 @@
-export { useCurrentViewModel, } from './useCurrentViewModel';
-export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './useLikeC4Model';
-export { useChangeLikeC4Project, useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';

package/dist/likec4model/useCurrentViewModel.js

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

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.34.1 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M4 8l16 0", "key": "svg-0" }], ["path", { "d": "M4 16l16 0", "key": "svg-1" }]];
-const IconMenu = createReactComponent("outline", "menu", "Menu", __iconNode);
-
-export { __iconNode, IconMenu as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.34.1 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M4 6l16 0", "key": "svg-0" }], ["path", { "d": "M4 12l16 0", "key": "svg-1" }], ["path", { "d": "M4 18l16 0", "key": "svg-2" }]];
-const IconMenu2 = createReactComponent("outline", "menu-2", "Menu2", __iconNode);
-
-export { __iconNode, IconMenu2 as default };

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -1,60 +0,0 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
-export declare const backdropBlur = "--_blur";
-export declare const backdropOpacity = "--_opacity";
-export declare const level = "--_level";
-export declare const overlay: SlotRecipeRuntimeFn<"dialog" | "body", {
-    fullscreen: {
-        false: {
-            dialog: {
-                sm: {
-                    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]";
-                    width: "calc(100vw - 2 * var(--_inset))";
-                    height: "calc(100vh - var(--_offset) - var(--_inset))";
-                    "--_border-radius": "6px";
-                    padding: "1.5";
-                    "--_offset": "1rem";
-                };
-                md: {
-                    "--_offset": "1rem";
-                };
-                lg: {
-                    "--_offset": "2rem";
-                };
-                xl: {
-                    "--_offset": "4rem";
-                };
-            };
-            body: {
-                sm: {
-                    borderRadius: "calc(var(--_border-radius) - 2px)";
-                };
-            };
-        };
-        true: {
-            dialog: {
-                inset: "0";
-                padding: "0";
-            };
-        };
-    };
-    withBackdrop: {
-        false: {
-            dialog: {
-                _backdrop: {
-                    display: "none";
-                };
-            };
-        };
-        true: {
-            dialog: {
-                _backdrop: {
-                    backdropFilter: "blur(var(--_blur))";
-                    backgroundColor: {
-                        _dark: "[rgb(34 34 34 / var(--_opacity))]";
-                        _light: "[rgb(15 15 15/ var(--_opacity))]";
-                    };
-                };
-            };
-        };
-    };
-}>;

package/dist/overlays/overlay/Overlay.css.js

@@ -1,122 +0,0 @@
-import { sva, css } from '@likec4/styles/css';
-
-const backdropBlur = "--_blur";
-const backdropOpacity = "--_opacity";
-const level = "--_level";
-const offset = "--_offset";
-const inset = "--_inset";
-const borderRadius = "--_border-radius";
-const dialog = css.raw({
-  boxSizing: "border-box",
-  margin: "0",
-  position: "fixed",
-  width: "100vw",
-  height: "100vh",
-  maxWidth: "100vw",
-  maxHeight: "100vh",
-  background: `mantine.colors.defaultBorder/50`,
-  shadow: "xl",
-  border: "transparent",
-  outline: "none",
-  borderRadius: `var(${borderRadius})`,
-  [backdropBlur]: "0px",
-  [level]: "0",
-  [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
-  [backdropOpacity]: "0%",
-  [borderRadius]: "0px",
-  _backdrop: {
-    cursor: "zoom-out"
-  },
-  inset: "0",
-  padding: "0"
-});
-const body = css.raw({
-  position: "relative",
-  containerName: "likec4-dialog",
-  containerType: "size",
-  border: `0 solid transparent`,
-  overflow: "hidden",
-  width: "100%",
-  height: "100%",
-  background: "mantine.colors.body"
-});
-const overlay = sva({
-  slots: ["dialog", "body"],
-  base: {
-    dialog,
-    body
-  },
-  variants: {
-    fullscreen: {
-      false: {
-        dialog: {
-          sm: {
-            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
-            width: "calc(100vw - 2 * var(--_inset))",
-            height: "calc(100vh - var(--_offset) - var(--_inset))",
-            [borderRadius]: "6px",
-            padding: "1.5",
-            // 6px
-            [offset]: "1rem"
-          },
-          md: {
-            [offset]: "1rem"
-          },
-          lg: {
-            [offset]: "2rem"
-          },
-          xl: {
-            [offset]: "4rem"
-          }
-        },
-        body: {
-          sm: {
-            borderRadius: `calc(var(${borderRadius}) - 2px)`
-          }
-        }
-      },
-      true: {
-        dialog: {
-          inset: "0",
-          padding: "0"
-        }
-      }
-    },
-    // transparent: {
-    //   false: {
-    //   },
-    //   true: {
-    //     dialog: {
-    //       background: 'transparent',
-    //     },
-    //   },
-    // },
-    withBackdrop: {
-      false: {
-        dialog: {
-          _backdrop: {
-            display: "none"
-          }
-        }
-      },
-      true: {
-        dialog: {
-          _backdrop: {
-            backdropFilter: `blur(var(${backdropBlur}))`,
-            backgroundColor: {
-              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
-            }
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    fullscreen: false,
-    withBackdrop: true
-  }
-});
-
-export { backdropBlur, backdropOpacity, level, overlay };

package/dist/src/index.ts.d.ts

@@ -1,2 +0,0 @@
-export * from '../index'
-export {}