likec4 1.8.0 → 1.8.2-next.0

package/dist/__app__/src/const.js

@@ -13,3 +13,5 @@ export const useHashHistory = __USE_HASH_HISTORY__ === true
 export const basepath = useHashHistory ? '/' : BASE
 
 export const withOverviewGraph = __USE_OVERVIEW_GRAPH__ === true
+
+export const isDevelopment = import.meta.env.DEV

package/dist/__app__/src/main.js

@@ -4,7 +4,7 @@ import { createContext as createContext$1, useLayoutEffect as useLayoutEffect$1,
 import { createRoot } from "react-dom/client";
 import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, u as useRouter, a as createFileRoute, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./chunks/tanstack-router-ma6rQsdz.js";
 import { C as Container, T as Title, a as Text$1, G as Group, B as Button, c as createTheme, M as MantineProvider, b as MantineContext, u as useHotkeys, d as clsx, e as Box, A as ActionIcon$2, H as HoverCard, f as HoverCardTarget, U as UnstyledButton, g as HoverCardDropdown, S as Stack, h as Anchor, i as CopyButton$1, j as useLocalStorage, k as Card, l as CardSection, m as Spoiler, n as ButtonGroup, o as Tooltip$2, p as ThemeIcon, P as Paper, q as Tabs, r as TabsList, s as TabsTab, t as TabsPanel, v as ScrollAreaAutosize, w as Badge, x as rem, D as Divider, y as Space, z as TooltipGroup, F as Flex, E as ColorSwatch, I as CheckIcon, J as Select, K as Slider, L as SegmentedControl, N as Popover, O as PopoverTarget, Q as PopoverDropdown, R as FloatingIndicator, V as Notification, W as Code, X as Center, Y as Image, Z as useMantineColorScheme, _ as SimpleGrid, $ as useTree, a0 as useComputedColorScheme, a1 as Tree, a2 as Drawer, a3 as ScrollArea, a4 as Alert, a5 as ModalRoot, a6 as ModalOverlay, a7 as ModalContent, a8 as ModalBody, a9 as useMantineTheme, aa as useMediaQuery, ab as useDisclosure, ac as Menu, ad as MenuTarget, ae as MenuDropdown, af as MenuLabel, ag as MenuItem, ah as LoadingOverlay, ai as useCallbackRef, aj as Burger, ak as Loader } from "./chunks/mantine-BYr8JSNL.js";
-import { withOverviewGraph, ComponentName, basepath, useHashHistory } from "./const.js";
+import { withOverviewGraph, ComponentName, isDevelopment, basepath, useHashHistory } from "./const.js";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
 import { u as useReactFlow, a as useStoreApi, b as useNodesData, c as useStore, d as createWithEqualityFn, e as applyNodeChanges, f as applyEdgeChanges, g as getViewportForBounds, h as getNodeDimensions, i as getBoundsOfRects, s as shallow$1, j as boxToRect, k as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, l as useOnViewportChange, m as index, n as useOnSelectionChange, B as Background, o as BackgroundVariant, C as Controls, R as ReactFlowProvider, p as BaseEdge, q as useNodesState, r as useEdgesState } from "./chunks/likec4-Blyd4UZO.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
@@ -216,46 +216,19 @@ const blue$1 = {
   font: "Arial",
   shadow: "#0a0a0a"
 };
-function fixProto(target, prototype) {
-  var setPrototypeOf = Object.setPrototypeOf;
-  setPrototypeOf ? setPrototypeOf(target, prototype) : target.__proto__ = prototype;
-}
-function fixStack(target, fn) {
-  fn === void 0 && (fn = target.constructor);
-  var captureStackTrace = Error.captureStackTrace;
-  captureStackTrace && captureStackTrace(target, fn);
-}
-var __extends = /* @__PURE__ */ function() {
-  var _extendStatics = function(d2, b2) {
-    return _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function(d3, b3) {
-      d3.__proto__ = b3;
-    } || function(d3, b3) {
-      for (var p2 in b3)
-        Object.prototype.hasOwnProperty.call(b3, p2) && (d3[p2] = b3[p2]);
-    }, _extendStatics(d2, b2);
-  };
-  return function(d2, b2) {
-    if (typeof b2 != "function" && b2 !== null) throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-    _extendStatics(d2, b2);
-    function __() {
-      this.constructor = d2;
-    }
-    d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
-  };
-}(), CustomError = function(_super) {
-  __extends(CustomError2, _super);
-  function CustomError2(message, options) {
-    var _newTarget = this.constructor, _this = _super.call(this, message, options) || this;
-    return Object.defineProperty(_this, "name", {
-      value: _newTarget.name,
-      enumerable: !1,
-      configurable: !0
-    }), fixProto(_this, _newTarget.prototype), fixStack(_this), _this;
-  }
-  return CustomError2;
-}(Error), s = { done: !1, hasNext: !1 };
+function nonNullable(value, message) {
+  if (typeof value > "u" || value == null)
+    throw new Error(message ?? `Expected defined value, but received ${value}`);
+  return value;
+}
+function invariant$1(condition, message) {
+  if (!condition)
+    throw new Error(message ?? "Invariant failed");
+}
+function nonexhaustive(value) {
+  throw new Error(`NonExhaustive value: ${value}`);
+}
+var s = { done: !1, hasNext: !1 };
 function u$6(t2, n2, a2) {
   let o2 = (r2) => t2(r2, ...n2);
   return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
@@ -366,41 +339,6 @@ function u(...n2) {
   return u$5(i, n2);
 }
 var i = (n2, { min: e2, max: r2 }) => e2 !== void 0 && n2 < e2 ? e2 : r2 !== void 0 && n2 > r2 ? r2 : n2;
-function isString$1(value) {
-  return value != null && typeof value == "string";
-}
-class BaseError extends CustomError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "BaseError" });
-  }
-}
-class NullableError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "NullableError" });
-  }
-}
-class InvariantError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "InvariantError" });
-  }
-}
-function nonNullable(value, message) {
-  if (typeof value > "u" || value == null)
-    throw new NullableError(message ?? `Expected defined value, but received ${value}`);
-  return value;
-}
-function invariant$1(condition, message) {
-  if (!condition)
-    throw new InvariantError(message ?? "Invariant failed");
-}
-class NonExhaustiveError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "NonExhaustiveError" });
-  }
-}
-function nonexhaustive(value) {
-  throw new NonExhaustiveError(`NonExhaustive value: ${value}`);
-}
 const ElementShapes = [
   "rectangle",
   "person",
@@ -409,7 +347,15 @@ const ElementShapes = [
   "cylinder",
   "storage",
   "queue"
-], isTagEqual = (operator) => "tag" in operator, isKindEqual = (operator) => "kind" in operator, isNotOperator = (operator) => "not" in operator, isAndOperator = (operator) => "and" in operator, isOrOperator = (operator) => "or" in operator;
+];
+function isString$1(value) {
+  return value != null && typeof value == "string";
+}
+function isAncestor(...args) {
+  const ancestor = isString$1(args[0]) ? args[0] : args[0].id;
+  return (isString$1(args[1]) ? args[1] : args[1].id).startsWith(ancestor + ".");
+}
+const isTagEqual = (operator) => "tag" in operator, isKindEqual = (operator) => "kind" in operator, isNotOperator = (operator) => "not" in operator, isAndOperator = (operator) => "and" in operator, isOrOperator = (operator) => "or" in operator;
 function whereOperatorAsPredicate(operator) {
   switch (!0) {
     case isTagEqual(operator): {
@@ -466,10 +412,6 @@ function getBBoxCenter({
     y: y2 + height / 2
   };
 }
-function isAncestor(...args) {
-  const ancestor = isString$1(args[0]) ? args[0] : args[0].id;
-  return (isString$1(args[1]) ? args[1] : args[1].id).startsWith(ancestor + ".");
-}
 var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty;
 function combineComparators(comparatorA, comparatorB) {
   return function(a2, b2, state) {
@@ -3037,7 +2979,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.3.29", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "11.3.31", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init), this.owner = options.owner;
@@ -3237,7 +3179,7 @@ function setTarget(visualElement, definition) {
   }
 }
 function getOptimisedAppearId(visualElement) {
-  return visualElement.getProps()[optimizedAppearDataAttribute];
+  return visualElement.props[optimizedAppearDataAttribute];
 }
 class WillChangeMotionValue extends MotionValue {
   constructor() {
@@ -3609,7 +3551,7 @@ class VisualElement {
     this.current = instance, visualElementStore.set(instance, this), this.projection && !this.projection.instance && this.projection.mount(instance), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((value, key) => this.bindToMotionValue(key, value)), hasReducedMotionListener.current || initPrefersReducedMotion(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : prefersReducedMotion.current, this.parent && this.parent.children.add(this), this.update(this.props, this.presenceContext);
   }
   unmount() {
-    visualElementStore.delete(this.current), this.projection && this.projection.unmount(), cancelFrame(this.notifyUpdate), cancelFrame(this.render), this.valueSubscriptions.forEach((remove) => remove()), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
+    visualElementStore.delete(this.current), this.projection && this.projection.unmount(), cancelFrame(this.notifyUpdate), cancelFrame(this.render), this.valueSubscriptions.forEach((remove) => remove()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
     for (const key in this.events)
       this.events[key].clear();
     for (const key in this.features) {
@@ -3619,11 +3561,13 @@ class VisualElement {
     this.current = null;
   }
   bindToMotionValue(key, value) {
+    this.valueSubscriptions.has(key) && this.valueSubscriptions.get(key)();
     const valueIsTransform = transformProps.has(key), removeOnChange = value.on("change", (latestValue) => {
       this.latestValues[key] = latestValue, this.props.onUpdate && frame.preRender(this.notifyUpdate), valueIsTransform && this.projection && (this.projection.isTransformDirty = !0);
     }), removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
-    this.valueSubscriptions.set(key, () => {
-      removeOnChange(), removeOnRenderRequest(), value.owner && value.stop();
+    let removeSyncCheck;
+    window.MotionCheckAppearSync && (removeSyncCheck = window.MotionCheckAppearSync(this, key, value)), this.valueSubscriptions.set(key, () => {
+      removeOnChange(), removeOnRenderRequest(), removeSyncCheck && removeSyncCheck(), value.owner && value.stop();
     });
   }
   sortNodePosition(other) {
@@ -5890,6 +5834,7 @@ function DiagramContextProvider({
     }
   );
 }
+DiagramContextProvider.displayName = "DiagramContextProvider";
 function useDiagramState(selector2, equalityFn) {
   const store = useContext$1(DiagramContext);
   if (store === null)
@@ -5908,6 +5853,7 @@ function EnsureMantine({ children }) {
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
+EnsureMantine.displayName = "EnsureMantine";
 function selectXYFlowSize(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
 }
@@ -6869,7 +6815,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
   }
 ) });
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -6896,7 +6842,7 @@ var defaultAttributes = {
   }
 };
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -6929,210 +6875,210 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   return Component2.displayName = `${iconNamePascal}`, Component2;
 };
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowBigDownLines = createReactComponent("outline", "arrow-big-down-lines", "IconArrowBigDownLines", [["path", { d: "M15 12h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-3h6v3z", key: "svg-0" }], ["path", { d: "M15 3h-6", key: "svg-1" }], ["path", { d: "M15 6h-6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "IconArrowDownRight", [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronDown = createReactComponent("outline", "chevron-down", "IconChevronDown", [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronLeft = createReactComponent("outline", "chevron-left", "IconChevronLeft", [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronRight = createReactComponent("outline", "chevron-right", "IconChevronRight", [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCopy = createReactComponent("outline", "copy", "IconCopy", [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconExternalLink = createReactComponent("outline", "external-link", "IconExternalLink", [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileCode = createReactComponent("outline", "file-code", "IconFileCode", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileSymlink = createReactComponent("outline", "file-symlink", "IconFileSymlink", [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFocusCentered = createReactComponent("outline", "focus-centered", "IconFocusCentered", [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderOpen", [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconHelpCircle = createReactComponent("outline", "help-circle", "IconHelpCircle", [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLink = createReactComponent("outline", "link", "IconLink", [["path", { d: "M9 15l6 -6", key: "svg-0" }], ["path", { d: "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", key: "svg-1" }], ["path", { d: "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu2 = createReactComponent("outline", "menu-2", "IconMenu2", [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconShare = createReactComponent("outline", "share", "IconShare", [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconSun = createReactComponent("outline", "sun", "IconSun", [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconZoomScan = createReactComponent("outline", "zoom-scan", "IconZoomScan", [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileFilled = createReactComponent("filled", "file-filled", "IconFileFilled", [["path", { d: "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z", key: "svg-0" }], ["path", { d: "M19 7h-4l-.001 -4.001z", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderFilled = createReactComponent("filled", "folder-filled", "IconFolderFilled", [["path", { d: "M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.707h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.005h4z", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerPlayFilled = createReactComponent("filled", "player-play-filled", "IconPlayerPlayFilled", [["path", { d: "M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipBackFilled = createReactComponent("filled", "player-skip-back-filled", "IconPlayerSkipBackFilled", [["path", { d: "M19.496 4.136l-12 7a1 1 0 0 0 0 1.728l12 7a1 1 0 0 0 1.504 -.864v-14a1 1 0 0 0 -1.504 -.864z", key: "svg-0" }], ["path", { d: "M4 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipForwardFilled = createReactComponent("filled", "player-skip-forward-filled", "IconPlayerSkipForwardFilled", [["path", { d: "M3 5v14a1 1 0 0 0 1.504 .864l12 -7a1 1 0 0 0 0 -1.728l-12 -7a1 1 0 0 0 -1.504 .864z", key: "svg-0" }], ["path", { d: "M20 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.12.0 - MIT
+ * @license @tabler/icons-react v3.14.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -9241,6 +9187,7 @@ function XYFlow({
     }
   );
 }
+XYFlow.displayName = "XYFlow";
 var container$2 = "_19ci0hj0", card$1 = "_19ci0hj1", title = "_19ci0hj2", description = "_19ci0hj3";
 const selector$1 = (s2) => ({
   id: s2.view.id,
@@ -9610,7 +9557,7 @@ function NotationPanel() {
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
+    !hasNotations && isVisible && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -9620,7 +9567,7 @@ function NotationPanel() {
           opacity: 0.6
         },
         className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Diagram has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
             size: "xl",
@@ -10469,6 +10416,7 @@ function LikeC4Diagram({
     }
   ) }) });
 }
+LikeC4Diagram.displayName = "LikeC4Diagram";
 const LikeC4DiagramInnerMemo = memo$1(function({
   background,
   controls,
@@ -10513,6 +10461,7 @@ const LikeC4DiagramInnerMemo = memo$1(function({
     ] })
   ] });
 }, shallowEqual);
+LikeC4DiagramInnerMemo.displayName = "LikeC4DiagramInnerMemo";
 function StaticLikeC4Diagram({
   view,
   fitView = !0,
@@ -11653,6 +11602,7 @@ function ViewReact() {
   });
   if (!view)
     throw notFound();
+  const hasNotations = (view.notation?.elements ?? []).length > 0;
   return /* @__PURE__ */ jsx(
     LikeC4Diagram,
     {
@@ -11667,6 +11617,7 @@ function ViewReact() {
       showNavigationButtons: !0,
       enableDynamicViewWalkthrough: !0,
       experimentalEdgeEditing: !1,
+      showNotations: isDevelopment || hasNotations,
       enableFocusMode: !0,
       nodesDraggable: !1,
       nodesSelectable: !1,
@@ -12592,7 +12543,7 @@ function validatePanelGroupLayout({
   const nextLayout = [...prevLayout], nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
   if (nextLayout.length !== panelConstraints.length)
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size) => `${size}%`).join(", ")}`);
-  if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100))
+  if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0)
     for (let index2 = 0; index2 < panelConstraints.length; index2++) {
       const unsafeSize = nextLayout[index2];
       assert(unsafeSize != null, `No layout data found for index ${index2}`);
@@ -13237,6 +13188,7 @@ function ViewEditor() {
   });
   if (!view)
     throw notFound();
+  const hasNotations = (view.notation?.elements ?? []).length > 0;
   return /* @__PURE__ */ jsx(
     LikeC4Diagram,
     {
@@ -13250,6 +13202,7 @@ function ViewEditor() {
       showDiagramTitle: !0,
       showElementLinks: !0,
       showNavigationButtons: !0,
+      showNotations: isDevelopment || hasNotations,
       enableDynamicViewWalkthrough: !0,
       enableFocusMode: !1,
       onNavigateTo,