@likec4/diagram 1.26.1 → 1.27.0

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 { useReducedMotion, 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,7 +67,7 @@ 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);
@@ -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;

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -1,35 +1,237 @@
-/* empty css                                      */
-var backdropBlur = "var(--paikoy2)";
-var backdropOpacity = "var(--paikoy3)";
-var dialog = "paikoy4";
-var card = "paikoy5";
-var cardHeader = "paikoy6";
-var title = "paikoy7";
-var elementIcon = "paikoy8";
-var viewButton = "paikoyb";
-var viewButtonTitle = "paikoyc";
-var tabsRoot = "paikoyd";
-var tabsList = "paikoye";
-var tabsTab = "paikoyf";
-var tabsPanel = "paikoyg";
-var propertiesGrid = "paikoyh";
-var propertyLabel = "paikoyi";
-var resizeHandle = "paikoyj";
-export {
-  backdropBlur,
-  backdropOpacity,
-  card,
-  cardHeader,
-  dialog,
-  elementIcon,
-  propertiesGrid,
-  propertyLabel,
-  resizeHandle,
-  tabsList,
-  tabsPanel,
-  tabsRoot,
-  tabsTab,
-  title,
-  viewButton,
-  viewButtonTitle
-};
+import { css } from '@likec4/styles/css';
+
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const dialog = css({
+  boxSizing: "border-box",
+  margin: 0,
+  padding: 0,
+  position: "fixed",
+  inset: 0,
+  width: "100vw",
+  height: "100vh",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  background: "[transparent]",
+  border: "transparent",
+  _backdrop: {
+    // WebkitBackdropFilter: `blur(${backdropBlur})`,
+    backdropFilter: "auto",
+    backdropBlur: `var(${backdropBlur})`,
+    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
+  }
+});
+const card = css({
+  position: "absolute",
+  pointerEvents: "all",
+  gap: "lg",
+  justifyContent: "stretch",
+  backgroundColor: "mantine.colors.body",
+  backgroundImage: `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
+  borderTopColor: "likec4.palette.fill",
+  _dark: {
+    backgroundColor: `mantine.colors.dark[6]`,
+    backgroundImage: `
+          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
+          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+        `
+  },
+  "& .react-flow__attribution": {
+    display: "none"
+  }
+});
+const cardHeader = css({
+  flex: 0,
+  cursor: "move"
+});
+const title = css({
+  display: "block",
+  fontFamily: "likec4.element",
+  fontOpticalSizing: "auto",
+  fontStyle: "normal",
+  fontWeight: 600,
+  fontSize: "24px",
+  // lineHeight: 1.15,
+  lineHeight: "xs"
+  // color: vars.element.hiContrast
+});
+const iconSize = "40px";
+const elementIcon = css({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  alignSelf: "flex-start",
+  cursor: "move",
+  _dark: {
+    mixBlendMode: "hard-light"
+  },
+  "& :where(svg, img)": {
+    width: "100%",
+    height: "auto",
+    maxHeight: "100%",
+    pointerEvents: "none",
+    filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
+  `
+  },
+  "& img": {
+    objectFit: "contain"
+  }
+});
+const viewTitleColor = "--view-title-color";
+const iconColor = "--icon-color";
+const viewButton = css({
+  // display: 'flex',
+  width: "100%",
+  background: "mantine.colors.body",
+  borderRadius: "sm",
+  padding: `10px 8px`,
+  // gap: 6,
+  // alignItems: 'flex-start',
+  transition: "fast",
+  border: `1px dashed`,
+  borderColor: "mantine.colors.defaultBorder",
+  [viewTitleColor]: "{colors.mantine.colors.dark[1]}",
+  _hover: {
+    background: "mantine.colors.defaultHover",
+    [iconColor]: "{colors.mantine.colors.dark[1]}",
+    [viewTitleColor]: "{colors.mantine.colors.defaultColor}"
+  },
+  _dark: {
+    background: "mantine.colors.dark[6]"
+  },
+  _light: {
+    [iconColor]: "{colors.mantine.colors.gray[6]}",
+    [viewTitleColor]: "{colors.mantine.colors.gray[7]}",
+    _hover: {
+      [iconColor]: "{colors.mantine.colors.gray[7]}"
+    }
+  },
+  "& .mantine-ThemeIcon-root": {
+    transition: "fast",
+    // color: fallbackVar(iconColor, 'mantine.colors.dark[2])',
+    color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+    "--ti-size": "22px",
+    _hover: {
+      color: "mantine.colors.defaultColor"
+    }
+  },
+  "& > *": {
+    transition: `all 130ms {easings.inOut}`
+  },
+  "&:hover > *": {
+    transitionTimingFunction: "out",
+    transform: "translateX(1.6px)"
+  }
+});
+const viewButtonTitle = css({
+  transition: "fast",
+  color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+  fontSize: "15px",
+  fontWeight: 500,
+  lineHeight: "1.4"
+});
+const tabsRoot = css({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch",
+  overflow: "hidden",
+  gap: "sm"
+});
+const tabsList = css({
+  // flex: '0',
+  background: "mantine.colors.gray[1]",
+  borderRadius: "sm",
+  flexWrap: "nowrap",
+  gap: "6px",
+  padding: "4px",
+  _dark: {
+    background: "mantine.colors.dark[7]"
+  }
+});
+const tabsTab = css({
+  fontSize: "xs",
+  fontWeight: 500,
+  flexGrow: 1,
+  padding: "6px 8px",
+  transition: "fast",
+  borderRadius: "sm",
+  color: "mantine.colors.gray[7]",
+  _hover: {
+    transitionTimingFunction: "out",
+    color: "mantine.colors.defaultColor",
+    background: "mantine.colors.gray[3]"
+  },
+  ["&[data-active]"]: {
+    transition: "none",
+    background: "mantine.colors.white",
+    shadow: "xs",
+    color: "mantine.colors.defaultColor"
+  },
+  _dark: {
+    color: "mantine.colors.dark[1]",
+    _hover: {
+      color: "mantine.colors.white",
+      background: "mantine.colors.dark[6]"
+    },
+    [`&:is([data-active])`]: {
+      color: "mantine.colors.white",
+      background: "mantine.colors.dark[5]"
+    }
+  }
+});
+const tabsPanel = css({
+  flex: 1,
+  overflow: "hidden",
+  position: "relative",
+  "&:not(:has(.mantine-ScrollArea-root))": {
+    paddingLeft: "4px",
+    paddingRight: "4px"
+  },
+  "& .mantine-ScrollArea-root": {
+    width: "100%",
+    height: "100%",
+    "& > div": {
+      paddingLeft: "4px",
+      paddingRight: "4px"
+    }
+  }
+});
+const propertiesGrid = css({
+  flex: 1,
+  display: "grid",
+  gridTemplateColumns: "min-content 1fr",
+  gridAutoRows: "min-content max-content",
+  gap: `[20px 16px]`,
+  alignItems: "baseline",
+  justifyItems: "stretch"
+});
+const propertyLabel = css({
+  justifySelf: "end"
+});
+const resizeHandle = css({
+  position: "absolute",
+  width: "14px",
+  height: "14px",
+  border: `3.5px solid`,
+  borderColor: "mantine.colors.dark[3]",
+  borderTop: "none",
+  borderLeft: "none",
+  borderRadius: "2px",
+  bottom: "2px",
+  right: "2px",
+  transition: "fast",
+  cursor: "se-resize",
+  _hover: {
+    borderWidth: "4px",
+    borderColor: "mantine.colors.dark[1]"
+  }
+});
+
+export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };