@likec4/diagram 1.26.2 → 1.27.1

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,32 +1,21 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { nonNullable } from "@likec4/core";
-import "@xyflow/react";
-import { getNodeDimensions } from "@xyflow/system";
-import { useRef, useMemo } from "react";
-import { pipe, filter, map, hasAtLeast, isNullish } from "remeda";
-import { useDiagram } from "../hooks/useDiagram.js";
-import { useXYStoreApi } from "../hooks/useXYFlow.js";
+import { nonNullable } from '@likec4/core';
+import '@xyflow/react';
+import { getNodeDimensions } from '@xyflow/system';
+import { useRef, useMemo } from 'react';
+import { pipe, filter, hasAtLeast, map } from 'remeda';
+import { useDiagram } from '../hooks/useDiagram.js';
+import { useXYStoreApi } from '../hooks/useXYFlow.js';
+
 class Rect {
-  constructor(xynode, parent = null) {
-    __publicField(this, "id");
-    __publicField(this, "minX", Infinity);
-    __publicField(this, "minY", Infinity);
-    __publicField(this, "maxX", -Infinity);
-    __publicField(this, "maxY", -Infinity);
-    this.id = xynode.id;
-    this.positionAbsolute = !parent ? xynode.position : {
-      x: xynode.position.x + parent.minX,
-      y: xynode.position.y + parent.minY
-    };
-    const { width, height } = getNodeDimensions(xynode);
-    this.maxX = this.minX + Math.ceil(width);
-    this.maxY = this.minY + Math.ceil(height);
-    if (parent) {
-      parent.children.push(this);
-    }
-  }
+  static LeftPadding = 40;
+  static RightPadding = 40;
+  static TopPadding = 55;
+  static BottomPadding = 40;
+  id;
+  minX = Infinity;
+  minY = Infinity;
+  maxX = -Infinity;
+  maxY = -Infinity;
   get positionAbsolute() {
     return {
       x: this.minX,
@@ -59,17 +48,26 @@ class Rect {
       y: positionAbsolute.y - parentPosition.y
     };
   }
+  constructor(xynode, parent = null) {
+    this.id = xynode.id;
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY
+    };
+    const { width, height } = getNodeDimensions(xynode);
+    this.maxX = this.minX + Math.ceil(width);
+    this.maxY = this.minY + Math.ceil(height);
+    if (parent) {
+      parent.children.push(this);
+    }
+  }
 }
-__publicField(Rect, "LeftPadding", 40);
-__publicField(Rect, "RightPadding", 40);
-__publicField(Rect, "TopPadding", 55);
-__publicField(Rect, "BottomPadding", 40);
-class Compound extends Rect {
+class CompoundRect extends Rect {
   constructor(xynode, parent = null) {
     super(xynode, parent);
-    __publicField(this, "children", []);
     this.parent = parent;
   }
+  children = [];
 }
 class Leaf extends Rect {
   constructor(xynode, parent = null) {
@@ -78,13 +76,12 @@ class Leaf extends Rect {
   }
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
-  var _a;
   const { parentLookup, nodeLookup } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
   const ancestorsOf = (nodeId) => {
     const ancestors = [];
     const xynode = nodeLookup.get(nodeId);
-    let parent = xynode == null ? void 0 : xynode.parentId;
+    let parent = xynode?.parentId;
     let parentNode;
     while (parent && (parentNode = nodeLookup.get(parent))) {
       ancestors.push(parentNode.id);
@@ -95,51 +92,51 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const ancestorsOfDraggingNodes = new Set(
     editingNodeIds.flatMap(ancestorsOf)
   );
-  const traverse = new Array();
-  for (const [, xynode] of nodeLookup) {
-    if (isNullish(xynode.parentId)) {
-      traverse.push({
-        xynode,
-        parent: null
-      });
-    }
-  }
+  const traverse = [...nodeLookup.values()].flatMap(
+    (x) => !x.parentId ? { xynode: x, parent: null } : []
+  );
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && (xynode.type === "compound-element" || xynode.type === "compound-deployment" || xynode.type === "view-group") && ancestorsOfDraggingNodes.has(xynode.id);
-    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
-    rects.set(xynode.id, rect);
+    const shouldTraverse = !isEditing && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id);
     if (shouldTraverse) {
-      (_a = parentLookup.get(xynode.id)) == null ? void 0 : _a.forEach((child) => {
+      const rect = new CompoundRect(xynode, parent);
+      rects.set(xynode.id, rect);
+      parentLookup.get(xynode.id)?.forEach((child) => {
         traverse.push({
           xynode: child,
           parent: rect
         });
       });
+    } else {
+      rects.set(xynode.id, new Leaf(xynode, parent));
     }
   }
   const rectsToUpdate = [...rects.values()];
   applyConstraints(rectsToUpdate);
   function applyConstraints(targets) {
-    targets.filter((x) => x instanceof Compound).forEach((r) => {
+    for (const r of targets) {
+      if (!(r instanceof CompoundRect)) {
+        continue;
+      }
       applyConstraints(r.children);
-      const childrenBB = r.children.reduce((acc, r2) => ({
-        minX: Math.min(acc.minX, r2.minX),
-        minY: Math.min(acc.minY, r2.minY),
-        maxX: Math.max(acc.maxX, r2.maxX),
-        maxY: Math.max(acc.maxY, r2.maxY)
-      }), {
+      const childrenBB = {
         minX: Infinity,
         minY: Infinity,
         maxX: -Infinity,
         maxY: -Infinity
-      });
+      };
+      for (const child of r.children) {
+        childrenBB.minX = Math.min(childrenBB.minX, child.minX);
+        childrenBB.minY = Math.min(childrenBB.minY, child.minY);
+        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
+        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
+      }
       r.minX = childrenBB.minX - Rect.LeftPadding;
       r.minY = childrenBB.minY - Rect.TopPadding;
       r.maxX = childrenBB.maxX + Rect.RightPadding;
       r.maxY = childrenBB.maxY + Rect.BottomPadding;
-    });
+    }
   }
   function updateXYFlowNodes() {
     applyConstraints(rectsToUpdate);
@@ -152,7 +149,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
           position: r.position,
           positionAbsolute: r.positionAbsolute
         });
-        if (r instanceof Compound) {
+        if (r instanceof CompoundRect) {
           acc.push({
             id: r.id,
             type: "dimensions",
@@ -165,26 +162,23 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     );
   }
   let animationFrameId = null;
-  function onMove(updater) {
+  function onMove() {
     if (rectsToUpdate.length === 0) {
       return;
     }
-    animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
+    animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      updater(
-        pipe(
-          editingNodeIds,
-          filter((id) => rects.has(id) && nodeLookup.has(id)),
-          map((id) => ({
-            rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id))
-          }))
-        )
-      );
+      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
+      for (const id of editingNodeIds) {
+        const rect = nonNullable(rects.get(id));
+        const node = nonNullable(nodeLookup2.get(id));
+        rect.positionAbsolute = node.internals.positionAbsolute;
+      }
       updateXYFlowNodes();
-    }));
+    });
   }
   return {
+    rects,
     updateXYFlowNodes,
     onMove
   };
@@ -193,37 +187,39 @@ function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
   const solverRef = useRef(void 0);
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout();
-      const { nodeLookup } = xystore.getState();
-      const draggingNodes = pipe(
-        Array.from(nodeLookup.values()),
-        filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
-        filter((n) => n.draggable !== false),
-        map((x) => x.id)
-      );
-      if (hasAtLeast(draggingNodes, 1)) {
-        solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+  return useMemo(() => {
+    let wasPending = false;
+    const initial = { x: 0, y: 0 };
+    let moved = false;
+    return {
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout();
+        const { nodeLookup } = xystore.getState();
+        const draggingNodes = pipe(
+          Array.from(nodeLookup.values()),
+          filter((n) => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true))
+        );
+        if (hasAtLeast(draggingNodes, 1)) {
+          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
+        }
+        initial.x = _event.clientX;
+        initial.y = _event.clientY;
+        moved = false;
+      },
+      onNodeDrag: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        solverRef.current?.onMove();
+      },
+      onNodeDragStop: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        console.log("moved", moved);
+        if (wasPending || moved) {
+          diagram.scheduleSaveManualLayout();
+        }
+        solverRef.current = void 0;
       }
-    },
-    onNodeDrag: () => {
-      var _a;
-      (_a = solverRef.current) == null ? void 0 : _a.onMove((nodes) => {
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = node.internals.positionAbsolute;
-        });
-      });
-    },
-    onNodeDragStop: () => {
-      var _a;
-      (_a = solverRef.current) == null ? void 0 : _a.updateXYFlowNodes();
-      diagram.scheduleSaveManualLayout();
-      solverRef.current = void 0;
-    }
-  }), [xystore, diagram]);
+    };
+  }, [xystore, diagram]);
 }
-export {
-  createLayoutConstraints,
-  useLayoutConstraints
-};
+
+export { createLayoutConstraints, useLayoutConstraints };

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -1,15 +1,14 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from "@likec4/core";
-import { useDeepCompareMemo } from "@react-hookz/web";
-import { pick, hasAtLeast } from "remeda";
-import { ZIndexes } from "../base/const.js";
+import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from '@likec4/core';
+import { useDeepCompareMemo } from '@react-hookz/web';
+import { pick, hasAtLeast } from 'remeda';
+import { ZIndexes } from '../base/const.js';
+
 function viewToNodesEdge(opts) {
-  var _a;
   const {
     view,
     nodesSelectable: selectable
   } = opts;
-  view.__ === "dynamic";
-  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  view.__ === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -56,7 +55,7 @@ function viewToNodesEdge(opts) {
     const base = {
       id,
       selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && !isCompound,
+      focusable: selectable && node.kind !== ElementKind.Group,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -94,7 +93,7 @@ function viewToNodesEdge(opts) {
       style: node.style,
       icon: node.icon ?? null,
       position: node.position,
-      isMultiple: ((_a = node.style) == null ? void 0 : _a.multiple) ?? false
+      isMultiple: node.style?.multiple ?? false
     };
     if (node.kind === ElementKind.Group) {
       xynodes.push({
@@ -126,7 +125,8 @@ function viewToNodesEdge(opts) {
               ...navigateTo,
               deploymentFqn,
               modelFqn
-            }
+            },
+            dragHandle: ".likec4-compound-title"
           }
         );
         break;
@@ -240,6 +240,5 @@ function useViewToNodesEdges({
     });
   }, [id, __, nodes, edges, opts]);
 }
-export {
-  useViewToNodesEdges
-};
+
+export { useViewToNodesEdges };

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,5 @@
-import { createContext } from "react";
+import { createContext } from 'react';
+
 const LikeC4ModelContext = createContext(null);
-export {
-  LikeC4ModelContext
-};
+
+export { LikeC4ModelContext };

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,6 +1,7 @@
-import { compareNatural } from "@likec4/core";
-import { useMemo } from "react";
-import { useLikeC4Model } from "./useLikeC4Model.js";
+import { compareNatural } from '@likec4/core';
+import { useMemo } from 'react';
+import { useLikeC4Model } from './useLikeC4Model.js';
+
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
   return {
@@ -20,7 +21,5 @@ function useLikeC4ElementsTree(viewId) {
     }
   }, [model, viewId ?? null]);
 }
-export {
-  sortByLabel,
-  useLikeC4ElementsTree
-};
+
+export { sortByLabel, useLikeC4ElementsTree };

package/dist/likec4model/useLikeC4Model.js

@@ -1,6 +1,7 @@
-import { useContext } from "react";
-import { isString, isNonNullish, isDefined } from "remeda";
-import { LikeC4ModelContext } from "./LikeC4ModelContext.js";
+import { useContext } from 'react';
+import { isString, isNonNullish, isDefined } from 'remeda';
+import { LikeC4ModelContext } from './LikeC4ModelContext.js';
+
 function useLikeC4Model(strict, type) {
   const model = useContext(LikeC4ModelContext);
   if (isString(type) && isNonNullish(model) && model.type !== type) {
@@ -11,6 +12,5 @@ function useLikeC4Model(strict, type) {
   }
   return model;
 }
-export {
-  useLikeC4Model
-};
+
+export { useLikeC4Model };

package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/default-map.js

@@ -0,0 +1,172 @@
+/**
+ * Mnemonist DefaultMap
+ * =====================
+ *
+ * JavaScript implementation of a default map that will return a constructed
+ * value any time one tries to access an inexisting key. It's quite similar
+ * to python's defaultdict.
+ */
+
+var defaultMap;
+var hasRequiredDefaultMap;
+
+function requireDefaultMap () {
+	if (hasRequiredDefaultMap) return defaultMap;
+	hasRequiredDefaultMap = 1;
+	/**
+	 * DefaultMap.
+	 *
+	 * @constructor
+	 */
+	function DefaultMap(factory) {
+	  if (typeof factory !== 'function')
+	    throw new Error('mnemonist/DefaultMap.constructor: expecting a function.');
+
+	  this.items = new Map();
+	  this.factory = factory;
+	  this.size = 0;
+	}
+
+	/**
+	 * Method used to clear the structure.
+	 *
+	 * @return {undefined}
+	 */
+	DefaultMap.prototype.clear = function() {
+
+	  // Properties
+	  this.items.clear();
+	  this.size = 0;
+	};
+
+	/**
+	 * Method used to get the value set for given key. If the key does not exist,
+	 * the value will be created using the provided factory.
+	 *
+	 * @param  {any} key - Target key.
+	 * @return {any}
+	 */
+	DefaultMap.prototype.get = function(key) {
+	  var value = this.items.get(key);
+
+	  if (typeof value === 'undefined') {
+	    value = this.factory(key, this.size);
+	    this.items.set(key, value);
+	    this.size++;
+	  }
+
+	  return value;
+	};
+
+	/**
+	 * Method used to get the value set for given key. If the key does not exist,
+	 * a value won't be created.
+	 *
+	 * @param  {any} key - Target key.
+	 * @return {any}
+	 */
+	DefaultMap.prototype.peek = function(key) {
+	  return this.items.get(key);
+	};
+
+	/**
+	 * Method used to set a value for given key.
+	 *
+	 * @param  {any} key   - Target key.
+	 * @param  {any} value - Value.
+	 * @return {DefaultMap}
+	 */
+	DefaultMap.prototype.set = function(key, value) {
+	  this.items.set(key, value);
+	  this.size = this.items.size;
+
+	  return this;
+	};
+
+	/**
+	 * Method used to test the existence of a key in the map.
+	 *
+	 * @param  {any} key   - Target key.
+	 * @return {boolean}
+	 */
+	DefaultMap.prototype.has = function(key) {
+	  return this.items.has(key);
+	};
+
+	/**
+	 * Method used to delete target key.
+	 *
+	 * @param  {any} key   - Target key.
+	 * @return {boolean}
+	 */
+	DefaultMap.prototype.delete = function(key) {
+	  var deleted = this.items.delete(key);
+
+	  this.size = this.items.size;
+
+	  return deleted;
+	};
+
+	/**
+	 * Method used to iterate over each of the key/value pairs.
+	 *
+	 * @param  {function}  callback - Function to call for each item.
+	 * @param  {object}    scope    - Optional scope.
+	 * @return {undefined}
+	 */
+	DefaultMap.prototype.forEach = function(callback, scope) {
+	  scope = arguments.length > 1 ? scope : this;
+
+	  this.items.forEach(callback, scope);
+	};
+
+	/**
+	 * Iterators.
+	 */
+	DefaultMap.prototype.entries = function() {
+	  return this.items.entries();
+	};
+
+	DefaultMap.prototype.keys = function() {
+	  return this.items.keys();
+	};
+
+	DefaultMap.prototype.values = function() {
+	  return this.items.values();
+	};
+
+	/**
+	 * Attaching the #.entries method to Symbol.iterator if possible.
+	 */
+	if (typeof Symbol !== 'undefined')
+	  DefaultMap.prototype[Symbol.iterator] = DefaultMap.prototype.entries;
+
+	/**
+	 * Convenience known methods.
+	 */
+	DefaultMap.prototype.inspect = function() {
+	  return this.items;
+	};
+
+	if (typeof Symbol !== 'undefined')
+	  DefaultMap.prototype[Symbol.for('nodejs.util.inspect.custom')] = DefaultMap.prototype.inspect;
+
+	/**
+	 * Typical factories.
+	 */
+	DefaultMap.autoIncrement = function() {
+	  var i = 0;
+
+	  return function() {
+	    return i++;
+	  };
+	};
+
+	/**
+	 * Exporting.
+	 */
+	defaultMap = DefaultMap;
+	return defaultMap;
+}
+
+export { requireDefaultMap as __require };

package/dist/overlays/Overlays.js

@@ -1,19 +1,20 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { nonexhaustive } from "@likec4/core";
-import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
-import { useSelector } from "@xstate/react";
-import { useReducedMotion, AnimatePresence } from "framer-motion";
-import { animate } from "framer-motion/dom";
-import { memo, useMemo, useEffect } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { isNonNullish } from "remeda";
-import { ElementDetails } from "./element-details/ElementDetails.js";
-import { Overlay } from "./overlay/Overlay.js";
-import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
-import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
-import { useXYStore } from "../hooks/useXYFlow.js";
-import { DiagramFeatures } from "../context/DiagramFeatures.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
+import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+import { useSelector } from '@xstate/react';
+import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'framer-motion';
+import { animate } from 'framer-motion/dom';
+import { memo, useMemo, useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { isNonNullish } from 'remeda';
+import { ElementDetails } from './element-details/ElementDetails.js';
+import { Overlay } from './overlay/Overlay.js';
+import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
+import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser.js';
+import { useXYStore } from '../hooks/useXYFlow.js';
+import { DiagramFeatures } from '../context/DiagramFeatures.js';
+
 function Fallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
   return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
@@ -66,11 +67,11 @@ const compareSelectOverlays = (a, b) => {
 };
 const Overlays = memo(({ overlaysActorRef }) => {
   const xyflowDomNode = useXYStore((s) => s.domNode);
-  const xyflowRendererDom = useMemo(() => (xyflowDomNode == null ? void 0 : xyflowDomNode.querySelector(".react-flow__renderer")) ?? null, [
+  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
     xyflowDomNode
   ]);
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
-  const isMotionReduced = useReducedMotion() ?? false;
+  const isMotionReduced = useReducedMotionConfig() ?? false;
   const isActiveOverlay = overlays.length > 0;
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
@@ -118,9 +119,8 @@ const Overlays = memo(({ overlaysActorRef }) => {
         nonexhaustive(overlay);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
 });
 Overlays.displayName = "Overlays";
-export {
-  Overlays
-};
+
+export { Overlays };

package/dist/overlays/element-details/ElementDetails.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallbackRef } from "@mantine/hooks";
-import { useSelector } from "@xstate/react";
-import { shallowEqual } from "fast-equals";
-import { ElementDetailsActorContext } from "./actorContext.js";
-import { ElementDetailsCard } from "./ElementDetailsCard.js";
+import { jsx } from 'react/jsx-runtime';
+import { useCallbackRef } from '@mantine/hooks';
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { ElementDetailsActorContext } from './actorContext.js';
+import { ElementDetailsCard } from './ElementDetailsCard.js';
+
 function ElementDetails({
   actorRef,
   onClose
@@ -26,6 +27,5 @@ function ElementDetails({
     }
   ) });
 }
-export {
-  ElementDetails
-};
+
+export { ElementDetails };

package/dist/overlays/element-details/ElementDetailsCard.css.d.ts

@@ -1,6 +1,5 @@
-export declare const cardBg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const backdropBlur: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const backdropOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const backdropBlur = "--_blur";
+export declare const backdropOpacity = "--_opacity";
 export declare const dialog: string;
 export declare const card: string;
 export declare const cardHeader: string;