@likec4/diagram 1.27.0 → 1.27.2

package/dist/LikeC4Diagram.js

@@ -6,7 +6,6 @@ import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js'
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
 import { LikeC4CustomColors } from './LikeC4CustomColors.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
-import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges.js';
 import { DiagramActorProvider } from './state/DiagramActorProvider.js';
 import { useLikeC4Model } from './likec4model/useLikeC4Model.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
@@ -31,7 +30,7 @@ function LikeC4Diagram({
   view,
   className,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = "8px",
   readonly = true,
   pannable = true,
   zoomable = true,
@@ -60,11 +59,6 @@ function LikeC4Diagram({
 }) {
   const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
-  const xyNodesEdges = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable
-  });
   const isDynamicView = view.__ === "dynamic";
   if (initialRef.current == null) {
     initialRef.current = {
@@ -130,8 +124,8 @@ function LikeC4Diagram({
                           view,
                           pannable,
                           zoomable,
-                          fitViewPadding,
-                          ...xyNodesEdges
+                          nodesSelectable,
+                          fitViewPadding
                         },
                         children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
                           LikeC4DiagramXYFlow,

package/dist/LikeC4Diagram.props.d.ts

@@ -27,6 +27,8 @@ export type ChangeEvent = {
 export type OnChange = (event: ChangeEvent) => void;
 export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
+export type PaddingUnit = 'px' | '%';
+export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
 export interface LikeC4DiagramProperties {
     view: DiagramView;
     className?: string | undefined;
@@ -57,10 +59,10 @@ export 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 | undefined;
     /**
      * @default false if readonly
      */

package/dist/StaticLikeC4Diagram.js

@@ -4,7 +4,7 @@ import { LikeC4Diagram } from './LikeC4Diagram.js';
 function StaticLikeC4Diagram({
   view,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = "8px",
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,

package/dist/_virtual/set.js

@@ -0,0 +1,5 @@
+import { __require as requireSet } from '../node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/set.js';
+
+var setExports = /*@__PURE__*/ requireSet();
+
+export { setExports as s };

package/dist/_virtual/set2.js

@@ -0,0 +1,3 @@
+var set = {};
+
+export { set as __exports };

package/dist/base/BaseXYFlow.d.ts

@@ -1,5 +1,6 @@
 import { ReactFlowProps } from '@xyflow/react';
 import { SetRequired, Simplify } from 'type-fest';
+import { PaddingWithUnit } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { Base } from './types';
 export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
@@ -8,7 +9,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean;
     nodesDraggable?: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
-    fitViewPadding?: number;
+    fitViewPadding?: PaddingWithUnit | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -2,7 +2,7 @@ import { DiagramNode } from '@likec4/core';
 import { HTMLMotionProps } from 'framer-motion';
 import { PropsWithChildren } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'shape' | 'style'>;
+type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'style'>;
 type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -54,13 +54,12 @@ function CompoundNodeContainer({
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
       "data-compound-depth": depth,
-      "data-likec4-shape": data.shape,
       ...isTransparent && {
         "data-compound-transparent": true,
         "data-compound-title-inverse": opacity < 0.5
       },
       ...isDimmed !== false && {
-        "likec4-dimmed": isDimmed
+        "data-likec4-dimmed": isDimmed
       },
       style: {
         ...style,

package/dist/base/primitives/edge/EdgeLabel.css.js

@@ -42,7 +42,7 @@ const edgeLabelContainer = css({
   },
   _noReduceGraphics: {
     mixBlendMode: {
-      base: "plus-lighter",
+      _dark: "plus-lighter",
       _light: "screen"
     }
   },
@@ -51,9 +51,6 @@ const edgeLabelContainer = css({
   },
   _reduceGraphicsOnPan: {
     display: "none"
-  },
-  _whenPanning: {
-    mixBlendMode: "normal"
   }
 });
 const labelsva = sva({

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -10,7 +10,7 @@ import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
 
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
-  return isNumber(value) ? `${value}px` : value;
+  return isNumber(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {

package/dist/base/primitives/edge/EdgePath.js

@@ -66,9 +66,6 @@ const EdgePath = forwardRef(({
             "react-flow__edge-path",
             "react-flow__edge-interaction",
             cssEdgePath
-            // css({
-            //   strokeDasharray: strokeDasharray,
-            // }),
           ),
           d: svgPath,
           style,

package/dist/base/primitives/edge/edge.css.js

@@ -39,6 +39,7 @@ const _hideOnReducedGraphics = css.raw({
 });
 const hideOnReducedGraphics = css(_hideOnReducedGraphics);
 const edgePathBg = css(_hideOnReducedGraphics, {
+  fill: "[none]",
   strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
   strokeOpacity: 0.08,
   transitionProperty: "stroke-width, stroke-opacity",
@@ -62,6 +63,7 @@ const markerContext = css({
   stroke: "[var(--xy-edge-stroke)]"
 });
 const cssEdgePath = css({
+  fill: "[none]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"

package/dist/base/primitives/element/ElementActionButtons.js

@@ -61,17 +61,12 @@ function ElementActionButtons({
           initial: false,
           whileTap: { scale: 1 },
           whileHover: {
-            scale: 1.35
+            scale: 1.3
           },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: actionBtn({}),
-              onClick: button.onClick,
-              onDoubleClick: stopPropagation,
-              children: button.icon
-            }
-          )
+          onTap: (e) => button.onClick(e),
+          onClick: stopPropagation,
+          onDoubleClick: stopPropagation,
+          children: /* @__PURE__ */ jsx(ActionIcon, { className: actionBtn({}), children: button.icon })
         },
         `action-button-${id}-${button.key ?? index}`
       ))

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -9,12 +9,13 @@ const container = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  _after: {
+  pointerEvents: "none",
+  _before: {
     content: '" "',
     position: "absolute",
-    top: "100%",
+    top: "calc(100% - 4px)",
     left: 0,
-    right: 0,
+    width: "100%",
     height: "24px",
     background: "[transparent]",
     pointerEvents: "all"
@@ -38,7 +39,7 @@ const container = css({
   //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   // },
   _reduceGraphicsOnPan: {
-    _after: {
+    _before: {
       display: "none"
     }
   },

package/dist/base/primitives/element/ElementShape.css.js

@@ -6,7 +6,7 @@ const indicator = css({
   },
   stroke: "likec4.palette.loContrast",
   fill: "[none]",
-  strokeWidth: 6,
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: "hidden",
   pointerEvents: "none",
@@ -14,25 +14,14 @@ const indicator = css({
     stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`
   },
   _whenFocused: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _groupFocusVisible: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _whenSelected: {
     animationStyle: "indicator",
     visibility: "visible"
-  },
-  _shapeQueue: {
-    strokeWidth: 8
-  },
-  _shapeCylinder: {
-    strokeWidth: 8
-  },
-  _shapeStorage: {
-    strokeWidth: 8
   }
 });
 const fillElementFill = css({

package/dist/base/primitives/element/ElementTitle.css.js

@@ -18,7 +18,7 @@ const description = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 });
 const technology = css.raw({
@@ -40,7 +40,7 @@ const technology = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 });
 const varIconSize = `var(${iconSize})`;
@@ -92,6 +92,7 @@ const elementTitle = sva({
       paddingLeft: "calc(var(--likec4-spacing) + 8px)",
       paddingRight: "calc(var(--likec4-spacing) + 8px)",
       overflow: "hidden",
+      pointerEvents: "none",
       gap: "12px",
       _shapeQueue: {
         paddingLeft: "46px",

package/dist/base/types.js

@@ -2,7 +2,7 @@ import { hasSubObject } from 'remeda';
 
 var Base;
 ((Base2) => {
-  const _setDimmed = (v, dimmed) => v.data.dimmed === dimmed ? v : {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
     ...v,
     data: {
       ...v.data,
@@ -16,7 +16,7 @@ var Base;
     return (v) => _setDimmed(v, arg1);
   }
   Base2.setDimmed = setDimmed;
-  const _setHovered = (v, hovered) => v.data.hovered === hovered ? v : {
+  const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
     ...v,
     data: {
       ...v.data,

package/dist/base/updateEdges.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined } from 'remeda';
 
 function _update(current, update) {
   return update.map((next) => {
@@ -8,14 +8,6 @@ function _update(current, update) {
       if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data)) {
         return existing;
       }
-      return {
-        ...omit(existing, ["hidden", "zIndex"]),
-        ...next,
-        data: {
-          ...existing.data,
-          ...next.data
-        }
-      };
     }
     return next;
   });

package/dist/base/updateNodes.js

@@ -1,6 +1,6 @@
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined } from 'remeda';
 
 function _update(current, updated) {
   return updated.map((update) => {
@@ -10,17 +10,6 @@ function _update(current, updated) {
       if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data)) {
         return existing;
       }
-      return {
-        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: {
-          ...existing.data,
-          ...update.data
-        }
-      };
     }
     return update;
   });

package/dist/bundle/LikeC4View.js

@@ -40,7 +40,7 @@ const LikeC4ViewInner = memo(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = 0.1,
+  fitViewPadding = "8px",
   background = "transparent",
   browser = true,
   showDiagramTitle = false,
@@ -147,7 +147,7 @@ const LikeC4ViewInner = memo(({
                 controls: true,
                 readonly: true,
                 fitView: true,
-                fitViewPadding,
+                fitViewPadding: "16px",
                 ...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 } from '../LikeC4Diagram.props';
+import { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
 export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
     /**
      * View to display.
@@ -55,10 +55,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 | undefined;
     /**
      * Display diagram title / description
      *
@@ -135,10 +135,10 @@ export 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 | undefined;
     /**
      * Show/hide panel with top left controls,
      * @default true

package/dist/components/Link.js

@@ -54,7 +54,7 @@ function Link({
   size = "md"
 }) {
   const isNormalSize = size === "md";
-  const url = new URL(value.url, window.location.href).toString();
+  const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
   return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
     Anchor,
     {

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +1,14 @@
-import { useDiagramActorSnapshot } from './useDiagram.js';
+import { useSelector } from '@xstate/react';
+import '@likec4/core';
+import '@mantine/hooks';
+import 'fast-equals';
+import 'react';
+import { useDiagramActorRef } from './safeContext.js';
 
 const selectViewId = (s) => s.context.view.id;
 function useCurrentViewId() {
-  return useDiagramActorSnapshot(selectViewId);
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, selectViewId);
 }
 
 export { useCurrentViewId };