likec4 1.28.1 → 1.29.0

package/__app__/src/main.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useDeferredValue, use, StrictMode } from "react";
+import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useDeferredValue, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, flushSync } from "react-dom";
@@ -17015,11 +17015,13 @@ const AnimatePresence = ({ children: children2, custom: custom5, initial = !0, o
     return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : !1, custom: custom5, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, anchorX, children: child }, key2);
   }) });
 }, DeprecatedLayoutGroupContext = createContext(null);
-let invariant = () => {
-};
-const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any, MotionGlobalConfig = {
-  useManualTiming: !1
-}, stepsOrder = [
+function useIsMounted() {
+  const isMounted = useRef(!1);
+  return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
+    isMounted.current = !1;
+  }), []), isMounted;
+}
+const stepsOrder = [
   "read",
   // Read
   "resolveKeyframes",
@@ -17071,7 +17073,9 @@ function createRenderStep(runNextFrame, stepName) {
   };
   return step;
 }
-const maxElapsed = 40;
+const MotionGlobalConfig = {
+  useManualTiming: !1
+}, maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   let runNextFrame = !1, useDefaultElapsed = !0;
   const state = {
@@ -17092,13 +17096,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
       steps[stepsOrder[i2]].cancel(process2);
   }, state, steps };
 }
-const { schedule: frame$1, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$3, !0);
-function useIsMounted() {
-  const isMounted = useRef(!1);
-  return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
-    isMounted.current = !1;
-  }), []), isMounted;
-}
+const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any, { schedule: frame$1, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$3, !0);
 function useForceUpdate() {
   const isMounted = useIsMounted(), [forcedRenderCount, setForcedRenderCount] = useState(0), forceRender = useCallback(() => {
     isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
@@ -17302,7 +17300,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [visualElement]
   );
 }
-const { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1), camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({});
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({}), { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1);
 function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
   const { visualElement: parent } = useContext(MotionContext), lazyContext = useContext(LazyContext), presenceContext = useContext(PresenceContext), reducedMotionConfig = useContext(MotionConfigContext).reducedMotion, visualElementRef = useRef(null);
   createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component2, {
@@ -17329,7 +17327,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   }), visualElement;
 }
 function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
-  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = props;
+  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
   visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)), visualElement.projection.setOptions({
     layoutId,
     layout: layout2,
@@ -17344,6 +17342,7 @@ function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor,
      */
     animationType: typeof layout2 == "string" ? layout2 : "both",
     initialPromotionConfig,
+    crossfade: layoutCrossfade,
     layoutScroll,
     layoutRoot
   });
@@ -17352,6 +17351,8 @@ function getClosestProjectingNode(visualElement) {
   if (visualElement)
     return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
+let invariant = () => {
+};
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component: Component2 }) {
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
@@ -17871,9 +17872,6 @@ function resolveVariant(visualElement, definition, custom5) {
   const props = visualElement.getProps();
   return resolveVariantFromProps(props, definition, custom5 !== void 0 ? custom5 : props.custom, visualElement);
 }
-function getValueTransition$1(transition, key2) {
-  return transition?.[key2] ?? transition?.default ?? transition;
-}
 const positionalKeys = /* @__PURE__ */ new Set([
   "width",
   "height",
@@ -17883,6 +17881,16 @@ const positionalKeys = /* @__PURE__ */ new Set([
   "bottom",
   ...transformPropOrder
 ]);
+let now$1;
+function clearTime() {
+  now$1 = void 0;
+}
+const time = {
+  now: () => (now$1 === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now$1),
+  set: (newTime) => {
+    now$1 = newTime, queueMicrotask(clearTime);
+  }
+};
 function addUniqueItem(arr, item) {
   arr.indexOf(item) === -1 && arr.push(item);
 }
@@ -17918,16 +17926,7 @@ class SubscriptionManager {
 function velocityPerSecond(velocity, frameDuration) {
   return frameDuration ? velocity * (1e3 / frameDuration) : 0;
 }
-let now$1;
-function clearTime() {
-  now$1 = void 0;
-}
-const time = {
-  now: () => (now$1 === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now$1),
-  set: (newTime) => {
-    now$1 = newTime, queueMicrotask(clearTime);
-  }
-}, MAX_VELOCITY_DELTA = 30, isFloat = (value) => !isNaN(parseFloat(value));
+const MAX_VELOCITY_DELTA = 30, isFloat = (value) => !isNaN(parseFloat(value));
 class MotionValue {
   /**
    * @param init - The initiating value
@@ -17936,7 +17935,7 @@ class MotionValue {
    * -  `transformer`: A function to transform incoming values with.
    */
   constructor(init2, options = {}) {
-    this.version = "12.6.3", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "12.7.3", 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(init2), this.owner = options.owner;
@@ -18138,151 +18137,14 @@ function addValueToWillChange(visualElement, key2) {
   const willChange = visualElement.getValue("willChange");
   if (isWillChangeMotionValue(willChange))
     return willChange.add(key2);
+  if (!willChange && MotionGlobalConfig.WillChange) {
+    const newWillChange = new MotionGlobalConfig.WillChange("auto");
+    visualElement.addValue("willChange", newWillChange), newWillChange.add(key2);
+  }
 }
 function getOptimisedAppearId(visualElement) {
   return visualElement.props[optimizedAppearDataAttribute];
 }
-const secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3, millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
-// @__NO_SIDE_EFFECTS__
-function memo(callback) {
-  let result;
-  return () => (result === void 0 && (result = callback()), result);
-}
-const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
-class GroupAnimation {
-  constructor(animations2) {
-    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
-  }
-  get finished() {
-    return Promise.all(this.animations.map((animation) => animation.finished));
-  }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(propName) {
-    return this.animations[0][propName];
-  }
-  setAll(propName, newValue) {
-    for (let i2 = 0; i2 < this.animations.length; i2++)
-      this.animations[i2][propName] = newValue;
-  }
-  attachTimeline(timeline, fallback) {
-    const subscriptions = this.animations.map((animation) => {
-      if (supportsScrollTimeline() && animation.attachTimeline)
-        return animation.attachTimeline(timeline);
-      if (typeof fallback == "function")
-        return fallback(animation);
-    });
-    return () => {
-      subscriptions.forEach((cancel, i2) => {
-        cancel && cancel(), this.animations[i2].stop();
-      });
-    };
-  }
-  get time() {
-    return this.getAll("time");
-  }
-  set time(time2) {
-    this.setAll("time", time2);
-  }
-  get speed() {
-    return this.getAll("speed");
-  }
-  set speed(speed) {
-    this.setAll("speed", speed);
-  }
-  get startTime() {
-    return this.getAll("startTime");
-  }
-  get duration() {
-    let max2 = 0;
-    for (let i2 = 0; i2 < this.animations.length; i2++)
-      max2 = Math.max(max2, this.animations[i2].duration);
-    return max2;
-  }
-  runAll(methodName) {
-    this.animations.forEach((controls) => controls[methodName]());
-  }
-  flatten() {
-    this.runAll("flatten");
-  }
-  play() {
-    this.runAll("play");
-  }
-  pause() {
-    this.runAll("pause");
-  }
-  cancel() {
-    this.runAll("cancel");
-  }
-  complete() {
-    this.runAll("complete");
-  }
-}
-class GroupAnimationWithThen extends GroupAnimation {
-  then(onResolve, _onReject) {
-    return this.finished.finally(onResolve).then(() => {
-    });
-  }
-}
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", supportsFlags = {};
-function memoSupports(callback, supportsFlag) {
-  const memoized = /* @__PURE__ */ memo(callback);
-  return () => supportsFlags[supportsFlag] ?? memoized();
-}
-const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
-  try {
-    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
-  } catch {
-    return !1;
-  }
-  return !0;
-}, "linearEasing"), generateLinearEasing = (easing, duration, resolution = 10) => {
-  let points = "";
-  const numPoints = Math.max(Math.round(duration / resolution), 2);
-  for (let i2 = 0; i2 < numPoints; i2++)
-    points += easing(i2 / (numPoints - 1)) + ", ";
-  return `linear(${points.substring(0, points.length - 2)})`;
-}, cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
-  linear: "linear",
-  ease: "ease",
-  easeIn: "ease-in",
-  easeOut: "ease-out",
-  easeInOut: "ease-in-out",
-  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
-  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
-  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
-  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
-};
-function mapEasingToNativeEasing(easing, duration) {
-  if (easing)
-    return typeof easing == "function" && supportsLinearEasing() ? generateLinearEasing(easing, duration) : isBezierDefinition(easing) ? cubicBezierAsString(easing) : Array.isArray(easing) ? easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut) : supportedWaapiEasing[easing];
-}
-function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}, pseudoElement = void 0) {
-  const keyframeOptions = {
-    [valueName]: keyframes2
-  };
-  times && (keyframeOptions.offset = times);
-  const easing = mapEasingToNativeEasing(ease2, duration);
-  return Array.isArray(easing) && (keyframeOptions.easing = easing), element.animate(keyframeOptions, {
-    delay: delay2,
-    duration,
-    easing: Array.isArray(easing) ? "linear" : easing,
-    fill: "both",
-    iterations: repeat + 1,
-    direction: repeatType === "reverse" ? "alternate" : "normal",
-    pseudoElement
-  });
-}
-function isGenerator(type) {
-  return typeof type == "function" && "applyToOptions" in type;
-}
-function isWaapiSupportedEasing(easing) {
-  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
-}
-function attachTimeline(animation, timeline) {
-  animation.timeline = timeline, animation.onfinish = null;
-}
 const calcBezier = (t2, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t2 + (3 * a2 - 6 * a1)) * t2 + 3 * a1) * t2, subdivisionPrecision = 1e-7, subdivisionMaxIterations = 12;
 function binarySubdivide(x2, lowerBound, upperBound, mX1, mX2) {
   let currentX, currentT, i2 = 0;
@@ -18668,6 +18530,9 @@ class DOMKeyframesResolver extends KeyframeResolver {
 const isAnimatable = (value, name) => name === "zIndex" ? !1 : !!(typeof value == "number" || Array.isArray(value) || typeof value == "string" && // It's animatable if we have a string
 (complex.test(value) || value === "0") && // And it contains numbers and/or colors
 !value.startsWith("url("));
+function isGenerator(type) {
+  return typeof type == "function" && "applyToOptions" in type;
+}
 function hasKeyframesChanged(keyframes2) {
   const current = keyframes2[0];
   if (keyframes2.length === 1)
@@ -18765,15 +18630,6 @@ class BaseAnimation {
     });
   }
 }
-const maxGeneratorDuration = 2e4;
-function calcGeneratorDuration(generator) {
-  let duration = 0;
-  const timeStep = 50;
-  let state = generator.next(duration);
-  for (; !state.done && duration < maxGeneratorDuration; )
-    duration += timeStep, state = generator.next(duration);
-  return duration >= maxGeneratorDuration ? 1 / 0 : duration;
-}
 const mixNumber$1 = (from, to, progress2) => from + (to - from) * progress2;
 function hueToRgb(p2, q, t2) {
   return t2 < 0 && (t2 += 1), t2 > 1 && (t2 -= 1), t2 < 1 / 6 ? p2 + (q - p2) * 6 * t2 : t2 < 1 / 2 ? q : t2 < 2 / 3 ? p2 + (q - p2) * (2 / 3 - t2) * 6 : p2;
@@ -18857,14 +18713,6 @@ const mixComplex = (origin, target) => {
 function mix(from, to, p2) {
   return typeof from == "number" && typeof to == "number" && typeof p2 == "number" ? mixNumber$1(from, to, p2) : getMixer(from)(from, to);
 }
-function createGeneratorEasing(options, scale2 = 100, createGenerator) {
-  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-  return {
-    type: "keyframes",
-    ease: (progress2) => generator.next(duration * progress2).value / scale2,
-    duration: /* @__PURE__ */ millisecondsToSeconds(duration)
-  };
-}
 const velocitySampleDuration = 5;
 function calcGeneratorVelocity(resolveValue, t2, current) {
   const prevT = Math.max(t2 - velocitySampleDuration, 0);
@@ -18898,7 +18746,7 @@ const springDefaults = {
   // in seconds
   minDamping: 0.05,
   maxDamping: 1
-}, safeMin = 1e-3;
+}, secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3, millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3, safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope, derivative, dampingRatio = 1 - bounce;
   dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio), duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration)), dampingRatio < 1 ? (envelope = (undampedFreq2) => {
@@ -18940,7 +18788,47 @@ function approximateRoot(envelope, derivative, initialGuess) {
 function calcAngularFreq(undampedFreq, dampingRatio) {
   return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
-const durationKeys = ["duration", "bounce"], physicsKeys = ["stiffness", "damping", "mass"];
+const maxGeneratorDuration = 2e4;
+function calcGeneratorDuration(generator) {
+  let duration = 0;
+  const timeStep = 50;
+  let state = generator.next(duration);
+  for (; !state.done && duration < maxGeneratorDuration; )
+    duration += timeStep, state = generator.next(duration);
+  return duration >= maxGeneratorDuration ? 1 / 0 : duration;
+}
+function createGeneratorEasing(options, scale2 = 100, createGenerator) {
+  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+  return {
+    type: "keyframes",
+    ease: (progress2) => generator.next(duration * progress2).value / scale2,
+    duration: /* @__PURE__ */ millisecondsToSeconds(duration)
+  };
+}
+const supportsFlags = {};
+// @__NO_SIDE_EFFECTS__
+function memo(callback) {
+  let result;
+  return () => (result === void 0 && (result = callback()), result);
+}
+function memoSupports(callback, supportsFlag) {
+  const memoized = /* @__PURE__ */ memo(callback);
+  return () => supportsFlags[supportsFlag] ?? memoized();
+}
+const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
+  try {
+    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+  } catch {
+    return !1;
+  }
+  return !0;
+}, "linearEasing"), generateLinearEasing = (easing, duration, resolution = 10) => {
+  let points = "";
+  const numPoints = Math.max(Math.round(duration / resolution), 2);
+  for (let i2 = 0; i2 < numPoints; i2++)
+    points += easing(i2 / (numPoints - 1)) + ", ";
+  return `linear(${points.substring(0, points.length - 2)})`;
+}, durationKeys = ["duration", "bounce"], physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys2) {
   return keys2.some((key2) => options[key2] !== void 0);
 }
@@ -19059,7 +18947,7 @@ function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstan
     }
   };
 }
-const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1), easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", easingLookup = {
+const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1), easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", easingLookup = {
   linear: noop$3,
   easeIn,
   easeInOut,
@@ -19300,7 +19188,44 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
   // or until we implement support for linear() easing.
   // "background-color"
-]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
+]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
+  linear: "linear",
+  ease: "ease",
+  easeIn: "ease-in",
+  easeOut: "ease-out",
+  easeInOut: "ease-in-out",
+  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
+  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
+  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
+};
+function mapEasingToNativeEasing(easing, duration) {
+  if (easing)
+    return typeof easing == "function" && supportsLinearEasing() ? generateLinearEasing(easing, duration) : isBezierDefinition(easing) ? cubicBezierAsString(easing) : Array.isArray(easing) ? easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut) : supportedWaapiEasing[easing];
+}
+function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}, pseudoElement = void 0) {
+  const keyframeOptions = {
+    [valueName]: keyframes2
+  };
+  times && (keyframeOptions.offset = times);
+  const easing = mapEasingToNativeEasing(ease2, duration);
+  return Array.isArray(easing) && (keyframeOptions.easing = easing), element.animate(keyframeOptions, {
+    delay: delay2,
+    duration,
+    easing: Array.isArray(easing) ? "linear" : easing,
+    fill: "both",
+    iterations: repeat + 1,
+    direction: repeatType === "reverse" ? "alternate" : "normal",
+    pseudoElement
+  });
+}
+function attachTimeline(animation, timeline) {
+  animation.timeline = timeline, animation.onfinish = null;
+}
+function isWaapiSupportedEasing(easing) {
+  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
+}
+const sampleDelta = 10, maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
   return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
@@ -19509,6 +19434,86 @@ const underDampedSpring = {
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
   return !!Object.keys(transition).length;
 }
+function getValueTransition$1(transition, key2) {
+  return transition?.[key2] ?? transition?.default ?? transition;
+}
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
+class GroupAnimation {
+  constructor(animations2) {
+    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
+  }
+  get finished() {
+    return Promise.all(this.animations.map((animation) => animation.finished));
+  }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
+  getAll(propName) {
+    return this.animations[0][propName];
+  }
+  setAll(propName, newValue) {
+    for (let i2 = 0; i2 < this.animations.length; i2++)
+      this.animations[i2][propName] = newValue;
+  }
+  attachTimeline(timeline, fallback) {
+    const subscriptions = this.animations.map((animation) => {
+      if (supportsScrollTimeline() && animation.attachTimeline)
+        return animation.attachTimeline(timeline);
+      if (typeof fallback == "function")
+        return fallback(animation);
+    });
+    return () => {
+      subscriptions.forEach((cancel, i2) => {
+        cancel && cancel(), this.animations[i2].stop();
+      });
+    };
+  }
+  get time() {
+    return this.getAll("time");
+  }
+  set time(time2) {
+    this.setAll("time", time2);
+  }
+  get speed() {
+    return this.getAll("speed");
+  }
+  set speed(speed) {
+    this.setAll("speed", speed);
+  }
+  get startTime() {
+    return this.getAll("startTime");
+  }
+  get duration() {
+    let max2 = 0;
+    for (let i2 = 0; i2 < this.animations.length; i2++)
+      max2 = Math.max(max2, this.animations[i2].duration);
+    return max2;
+  }
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
+  }
+  flatten() {
+    this.runAll("flatten");
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
+  }
+}
+class GroupAnimationWithThen extends GroupAnimation {
+  then(onResolve, _onReject) {
+    return this.finished.finally(onResolve).then(() => {
+    });
+  }
+}
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
   const valueTransition = getValueTransition$1(transition, name) || {}, delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
@@ -19820,20 +19825,7 @@ const animations = {
   exit: {
     Feature: ExitAnimationFeature
   }
-}, isDragging = {
-  x: !1,
-  y: !1
 };
-function isDragActive() {
-  return isDragging.x || isDragging.y;
-}
-function setDragLock(axis) {
-  return axis === "x" || axis === "y" ? isDragging[axis] ? null : (isDragging[axis] = !0, () => {
-    isDragging[axis] = !1;
-  }) : isDragging.x || isDragging.y ? null : (isDragging.x = isDragging.y = !0, () => {
-    isDragging.x = isDragging.y = !1;
-  });
-}
 function addDomEvent(target, eventName, handler, options = { passive: !0 }) {
   return target.addEventListener(eventName, handler, options), () => target.removeEventListener(eventName, handler);
 }
@@ -20101,6 +20093,20 @@ function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
 function resolvePointElastic(dragElastic, label2) {
   return typeof dragElastic == "number" ? dragElastic : dragElastic[label2] || 0;
 }
+const isDragging = {
+  x: !1,
+  y: !1
+};
+function isDragActive() {
+  return isDragging.x || isDragging.y;
+}
+function setDragLock(axis) {
+  return axis === "x" || axis === "y" ? isDragging[axis] ? null : (isDragging[axis] = !0, () => {
+    isDragging[axis] = !1;
+  }) : isDragging.x || isDragging.y ? null : (isDragging.x = isDragging.y = !0, () => {
+    isDragging.x = isDragging.y = !1;
+  });
+}
 const elementDragControls = /* @__PURE__ */ new WeakMap();
 class VisualElementDragControls {
   constructor(visualElement) {
@@ -20499,12 +20505,7 @@ function delay(callback, timeout2) {
 }
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"], numBorders = borders.length, asNumber = (value) => typeof value == "string" ? parseFloat(value) : value, isPx = (value) => typeof value == "number" || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
-  shouldCrossfadeOpacity ? (target.opacity = mixNumber$1(
-    0,
-    // TODO Reinstate this if only child
-    lead.opacity !== void 0 ? lead.opacity : 1,
-    easeCrossfadeIn(progress2)
-  ), target.opacityExit = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2))) : isOnlyMember && (target.opacity = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, lead.opacity !== void 0 ? lead.opacity : 1, progress2));
+  shouldCrossfadeOpacity ? (target.opacity = mixNumber$1(0, lead.opacity ?? 1, easeCrossfadeIn(progress2)), target.opacityExit = mixNumber$1(follow.opacity ?? 1, 0, easeCrossfadeOut(progress2))) : isOnlyMember && (target.opacity = mixNumber$1(follow.opacity ?? 1, lead.opacity ?? 1, progress2));
   for (let i2 = 0; i2 < numBorders; i2++) {
     const borderLabel = `border${borders[i2]}Radius`;
     let followRadius = getRadius(follow, borderLabel), leadRadius = getRadius(lead, borderLabel);
@@ -29617,12 +29618,7 @@ let epoch = 0, atom = (initialValue) => {
       epoch++;
       let runListenerQueue = !listenerQueue.length;
       for (let listener of listeners)
-        listenerQueue.push(
-          listener,
-          $atom.value,
-          oldValue,
-          changedKey
-        );
+        listenerQueue.push(listener, $atom.value, oldValue, changedKey);
       if (runListenerQueue) {
         for (lqIndex = 0; lqIndex < listenerQueue.length; lqIndex += QUEUE_ITEMS_PER_LISTENER)
           listenerQueue[lqIndex](
@@ -33971,7 +33967,7 @@ function focusedBounds(params) {
 }
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
-const useDiagramActorRef = () => {
+const DiagramActorContextProvider = DiagramActorSafeContext.Provider, useDiagramActorRef = () => {
   const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null)
     throw new Error("DiagramActorRef is not provided");
@@ -34961,7 +34957,7 @@ function CompoundTitle({ id: id2, data }) {
     }
   );
 }
-const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
+const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.animated ?? !1, next.animated ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
   return memo$2(Edge, edgePropsEqual);
 }
@@ -35237,6 +35233,9 @@ const translate = {
           padding: "0px"
         },
         labelContents: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
           padding: "2px 5px 4px 0px"
         },
         labelText: {
@@ -35265,9 +35264,9 @@ function EdgeLabel({
   const stepNum = isStepEdgeId(id2) ? extractStep(id2) : null, classes2 = labelsva({
     isStepEdge: stepNum !== null
   });
-  return /* @__PURE__ */ jsxs(Box$1, { className: cx(classes2.root, className), ...rest, children: [
-    stepNum !== null && /* @__PURE__ */ jsx(Box$1, { className: classes2.stepNumber, children: stepNum }),
-    /* @__PURE__ */ jsxs(Box$1, { className: classes2.labelContents, children: [
+  return /* @__PURE__ */ jsxs(Box, { className: cx(classes2.root, className), ...rest, children: [
+    stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes2.stepNumber, children: stepNum }),
+    /* @__PURE__ */ jsxs(Box, { className: classes2.labelContents, children: [
       n$5(label2) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes2.labelText, lineClamp: 5, children: label2 }),
       n$5(technology2) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes2.labelTechnology, children: "[ " + technology2 + " ]" }),
       children2
@@ -42343,7 +42342,7 @@ function ElementDetails({
     })),
     shallowEqual
   );
-  return /* @__PURE__ */ jsx(ElementDetailsActorContext, { value: actorRef, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(
     ElementDetailsCard,
     {
       onClose,
@@ -46117,7 +46116,7 @@ const autolayoutButton = css({
       translateY: -10
     },
     align: "flex-start",
-    className: clsx(
+    className: cx(
       "react-flow__panel",
       panel,
       "likec4-top-left-panel"
@@ -46129,7 +46128,7 @@ const autolayoutButton = css({
         /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
           Group,
           {
-            className: clsx(navigationButtons, "likec4-navigation-webview"),
+            className: cx(navigationButtons, "likec4-navigation-webview"),
             gap: "xs",
             children: [
               burgerMenu,
@@ -48130,6 +48129,7 @@ const diagramMachine = xstate_cjsExports.setup({
     "enabled: FitView": ({ context: context2 }) => context2.features.enableFitView,
     "enabled: FocusMode": ({ context: context2 }) => context2.features.enableFocusMode,
     "enabled: Readonly": ({ context: context2 }) => context2.features.enableReadOnly,
+    "enabled: RelationshipDetails": ({ context: context2 }) => context2.features.enableRelationshipDetails,
     "not readonly": ({ context: context2 }) => !context2.features.enableReadOnly,
     "is dynamic view": ({ context: context2 }) => context2.view.__ === "dynamic",
     "is another view": ({ context: context2, event }) => {
@@ -48142,7 +48142,8 @@ const diagramMachine = xstate_cjsExports.setup({
     "click: selected node": ({ event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), event.node.selected === !0),
     "click: same node": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.lastClickedNode?.id === event.node.id),
     "click: focused node": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.focusedNode === event.node.id),
-    "click: node has connections": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.xyedges.some((e2) => e2.source === event.node.id || e2.target === event.node.id))
+    "click: node has connections": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.xyedges.some((e2) => e2.source === event.node.id || e2.target === event.node.id)),
+    "click: selected edge": ({ event }) => (xstate_cjsExports.assertEvent(event, "xyflow.edgeClick"), event.edge.selected === !0 || event.edge.data.active === !0)
   },
   actions: {
     "trigger:NavigateTo": (_, _params) => {
@@ -48573,7 +48574,27 @@ const diagramMachine = xstate_cjsExports.setup({
                 focusedNode: ({ event }) => event.nodeId
               }),
               target: "focused"
-            }
+            },
+            "xyflow.edgeClick": [{
+              guard: xstate_cjsExports.and([
+                "is dynamic view",
+                "click: selected edge"
+              ]),
+              actions: xstate_cjsExports.raise(({ event }) => ({
+                type: "walkthrough.start",
+                stepId: event.edge.id
+              }))
+            }, {
+              guard: xstate_cjsExports.and([
+                "enabled: RelationshipDetails",
+                "click: selected edge"
+              ]),
+              actions: xstate_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context: context2, event }) => ({
+                type: "open.relationshipDetails",
+                viewId: context2.view.id,
+                edgeId: event.edge.id
+              }))
+            }]
           }
         },
         focused: {
@@ -48586,12 +48607,12 @@ const diagramMachine = xstate_cjsExports.setup({
             xstate_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
           ],
-          exit: xstate_cjsExports.enqueueActions(({ enqueue, context: context2 }) => {
-            enqueue.stopChild("hotkey"), context2.viewportBeforeFocus ? enqueue({ type: "xyflow:setViewport", params: { viewport: context2.viewportBeforeFocus } }) : enqueue({ type: "xyflow:fitDiagram" }), enqueue.assign((s2) => ({
-              ...unfocusNodesEdges(s2),
+          exit: xstate_cjsExports.enqueueActions(({ enqueue, context: context2, event }) => {
+            enqueue.stopChild("hotkey"), context2.viewportBeforeFocus ? enqueue({ type: "xyflow:setViewport", params: { viewport: context2.viewportBeforeFocus } }) : enqueue({ type: "xyflow:fitDiagram" }), enqueue.assign({
+              ...unfocusNodesEdges({ context: context2 }),
               viewportBeforeFocus: null,
               focusedNode: null
-            }));
+            });
           }),
           on: {
             "xyflow.nodeClick": [
@@ -48681,6 +48702,18 @@ const diagramMachine = xstate_cjsExports.setup({
                 }), enqueue.assign(updateActiveWalkthrough), enqueue("xyflow:fitFocusedBounds");
               })
             },
+            "xyflow.edgeClick": {
+              actions: [
+                xstate_cjsExports.assign(({ event, context: context2 }) => !isStepEdgeId(event.edge.id) || event.edge.id === context2.activeWalkthrough?.stepId ? {} : {
+                  activeWalkthrough: {
+                    stepId: event.edge.id,
+                    parallelPrefix: getParallelStepsPrefix(event.edge.id)
+                  }
+                }),
+                xstate_cjsExports.assign(updateActiveWalkthrough),
+                "xyflow:fitFocusedBounds"
+              ]
+            },
             "notations.unhighlight": {
               actions: xstate_cjsExports.assign((s2) => ({
                 ...updateActiveWalkthrough(s2)
@@ -48896,7 +48929,7 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = xstateReact_cjsExports.useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 }) });
 }
 function LikeC4Diagram({
   onCanvasClick,
@@ -49104,11 +49137,11 @@ function Fallback$1({ error, resetErrorBoundary }) {
 }
 const LikeC4ModelDataContext = createContext(null);
 function useLikeC4ModelDataContext() {
-  return use(LikeC4ModelDataContext);
+  return useContext(LikeC4ModelDataContext);
 }
 function LikeC4ModelContext({ likec4data, children: children2 }) {
   const $likec4model = useMemo(() => computed(likec4data, (data) => createLikeC4Model(data)), [likec4data]), model = useStore($likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContext, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children: children2 }) });
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContext.Provider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children: children2 }) });
 }
 css({
   position: "absolute",