likec4 1.15.0 → 1.16.0

package/dist/__app__/src/chunks/{-index-overview-BwT9t8VB.js → -index-overview-BRH5n7M1.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-Q7z-4OPp.js";
+import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-DejpCNPJ.js";
 import { u as useRouter } from "./tanstack-router-CfO1HFS2.js";
 import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-zEZHE7gJ.js";
 import { memo, useRef, useMemo } from "react";

package/dist/__app__/src/chunks/{main-Q7z-4OPp.js → main-DejpCNPJ.js}

@@ -1825,7 +1825,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.11.9", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "11.11.10", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time$1.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;
@@ -2033,8 +2033,6 @@ function isWillChangeMotionValue(value) {
   return !!(isMotionValue(value) && value.add);
 }
 function addValueToWillChange(visualElement, key) {
-  if (!visualElement.applyWillChange)
-    return;
   const willChange = visualElement.getValue("willChange");
   if (isWillChangeMotionValue(willChange))
     return willChange.add(key);
@@ -4208,7 +4206,7 @@ function scrapeMotionValuesFromProps$1(props2, prevProps, visualElement) {
   const { style } = props2, newValues = {};
   for (const key in style)
     (isMotionValue(style[key]) || prevProps.style && isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props2) || ((_a = visualElement?.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) && (newValues[key] = style[key]);
-  return visualElement && style && typeof style.willChange == "string" && (visualElement.applyWillChange = !1), newValues;
+  return newValues;
 }
 function scrapeMotionValuesFromProps(props2, prevProps, visualElement) {
   const newValues = scrapeMotionValuesFromProps$1(props2, prevProps, visualElement);
@@ -4223,36 +4221,19 @@ function useConstant(init) {
   const ref = useRef$1(null);
   return ref.current === null && (ref.current = init()), ref.current;
 }
-function getWillChangeName(name) {
-  if (transformProps.has(name))
-    return "transform";
-  if (acceleratedValues.has(name))
-    return camelToDash(name);
-}
-function makeState({ applyWillChange = !1, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount: onMount2 }, props2, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount: onMount2 }, props2, context, presenceContext) {
   const state = {
-    latestValues: makeLatestValues(props2, context, presenceContext, isStatic ? !1 : applyWillChange, scrapeMotionValuesFromProps2),
+    latestValues: makeLatestValues(props2, context, presenceContext, scrapeMotionValuesFromProps2),
     renderState: createRenderState()
   };
   return onMount2 && (state.mount = (instance) => onMount2(props2, instance, state)), state;
 }
 const makeUseVisualState = (config) => (props2, isStatic) => {
-  const context = useContext$1(MotionContext), presenceContext = useContext$1(PresenceContext), make = () => makeState(config, props2, context, presenceContext, isStatic);
+  const context = useContext$1(MotionContext), presenceContext = useContext$1(PresenceContext), make = () => makeState(config, props2, context, presenceContext);
   return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props2, definition, callback) {
-  const list2 = Array.isArray(definition) ? definition : [definition];
-  for (let i2 = 0; i2 < list2.length; i2++) {
-    const resolved = resolveVariantFromProps(props2, list2[i2]);
-    if (resolved) {
-      const { transitionEnd, transition, ...target } = resolved;
-      callback(target, transitionEnd);
-    }
-  }
-}
-function makeLatestValues(props2, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-  var _a;
-  const values = {}, willChange = /* @__PURE__ */ new Set(), applyWillChange = shouldApplyWillChange && ((_a = props2.style) === null || _a === void 0 ? void 0 : _a.willChange) === void 0, motionValues = scrapeMotionValues(props2, {});
+function makeLatestValues(props2, context, presenceContext, scrapeMotionValues) {
+  const values = {}, motionValues = scrapeMotionValues(props2, {});
   for (const key in motionValues)
     values[key] = resolveMotionValue(motionValues[key]);
   let { initial, animate } = props2;
@@ -4261,23 +4242,26 @@ function makeLatestValues(props2, context, presenceContext, shouldApplyWillChang
   let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === !1 : !1;
   isInitialAnimationBlocked = isInitialAnimationBlocked || initial === !1;
   const variantToSet = isInitialAnimationBlocked ? animate : initial;
-  return variantToSet && typeof variantToSet != "boolean" && !isAnimationControls(variantToSet) && forEachDefinition(props2, variantToSet, (target, transitionEnd) => {
-    for (const key in target) {
-      let valueTarget = target[key];
-      if (Array.isArray(valueTarget)) {
-        const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
-        valueTarget = valueTarget[index2];
+  if (variantToSet && typeof variantToSet != "boolean" && !isAnimationControls(variantToSet)) {
+    const list2 = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+    for (let i2 = 0; i2 < list2.length; i2++) {
+      const resolved = resolveVariantFromProps(props2, list2[i2]);
+      if (resolved) {
+        const { transitionEnd, transition, ...target } = resolved;
+        for (const key in target) {
+          let valueTarget = target[key];
+          if (Array.isArray(valueTarget)) {
+            const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+            valueTarget = valueTarget[index2];
+          }
+          valueTarget !== null && (values[key] = valueTarget);
+        }
+        for (const key in transitionEnd)
+          values[key] = transitionEnd[key];
       }
-      valueTarget !== null && (values[key] = valueTarget);
-    }
-    for (const key in transitionEnd)
-      values[key] = transitionEnd[key];
-  }), applyWillChange && (animate && initial !== !1 && !isAnimationControls(animate) && forEachDefinition(props2, animate, (target) => {
-    for (const name in target) {
-      const memberName = getWillChangeName(name);
-      memberName && willChange.add(memberName);
     }
-  }), willChange.size && (values.willChange = Array.from(willChange).join(","))), values;
+  }
+  return values;
 }
 const createHtmlRenderState = () => ({
   style: {},
@@ -4397,7 +4381,6 @@ const isSVGTag = (tag) => typeof tag == "string" && tag.toLowerCase() === "svg",
   })
 }, htmlMotionConfig = {
   useVisualState: makeUseVisualState({
-    applyWillChange: !0,
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
     createRenderState: createHtmlRenderState
   })
@@ -4552,7 +4535,7 @@ class VisualElement {
     return {};
   }
   constructor({ parent, props: props2, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
-    this.applyWillChange = !1, this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
       this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
     }, this.renderScheduledAt = 0, this.scheduleRender = () => {
       const now2 = time$1.now();
@@ -4752,7 +4735,7 @@ function getComputedStyle$1(element) {
 }
 class HTMLVisualElement extends DOMVisualElement {
   constructor() {
-    super(...arguments), this.type = "html", this.applyWillChange = !0, this.renderInstance = renderHTML;
+    super(...arguments), this.type = "html", this.renderInstance = renderHTML;
   }
   readValueFromInstance(instance, key) {
     if (transformProps.has(key)) {
@@ -5240,7 +5223,18 @@ function useAnimate() {
     scope.animations.forEach((animation) => animation.stop());
   }), [scope, animate];
 }
-var rootClassName = "likec4-diagram-root", s$2 = { done: !1, hasNext: !1 };
+var rootClassName = "likec4-diagram-root";
+function u$9(t2, n2, a2) {
+  let o2 = (r2) => t2(r2, ...n2);
+  return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
+}
+function u$8(r2, n2, a2) {
+  let o2 = r2.length - n2.length;
+  if (o2 === 0) return r2(...n2);
+  if (o2 === 1) return u$9(r2, n2, a2);
+  throw new Error("Wrong number of arguments");
+}
+var s$2 = { done: !1, hasNext: !1 };
 function x$1(t2, ...o2) {
   let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? f$2(e2) : void 0), p2 = 0;
   for (; p2 < o2.length; ) {
@@ -5304,45 +5298,24 @@ function o$7() {
   let e2 = /* @__PURE__ */ new Set();
   return (t2) => e2.has(t2) ? s$2 : (e2.add(t2), { done: !1, hasNext: !0, next: t2 });
 }
-function u$9(t2, n2, a2) {
-  let o2 = (r2) => t2(r2, ...n2);
-  return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
-}
-function u$8(r2, n2, a2) {
-  let o2 = r2.length - n2.length;
-  if (o2 === 0) return r2(...n2);
-  if (o2 === 1) return u$9(r2, n2, a2);
-  throw new Error("Wrong number of arguments");
-}
 function r$4(...n2) {
   return u$8(Object.values, n2);
 }
-function u$7(...e2) {
-  return u$8(i$7, e2);
-}
-function i$7(e2, a2) {
-  let n2 = [];
-  for (let [o2, r2] of e2.entries()) {
-    if (!a2(r2, o2, e2)) break;
-    n2.push(r2);
-  }
-  return n2;
-}
-function i$6(...e2) {
+function i$7(...e2) {
   return u$8(r$3, e2);
 }
 var r$3 = (e2, t2) => e2.length >= t2, T$1 = { asc: (r2, n2) => r2 > n2, desc: (r2, n2) => r2 < n2 };
 function m$2(r2, n2) {
   let [e2, ...o2] = n2;
   if (!s$1(e2)) {
-    let t2 = u$6(...o2);
+    let t2 = u$7(...o2);
     return r2(e2, t2);
   }
-  let a2 = u$6(e2, ...o2);
+  let a2 = u$7(e2, ...o2);
   return (t2) => r2(t2, a2);
 }
-function u$6(r2, n2, ...e2) {
-  let o2 = typeof r2 == "function" ? r2 : r2[0], a2 = typeof r2 == "function" ? "asc" : r2[1], { [a2]: t2 } = T$1, i2 = n2 === void 0 ? void 0 : u$6(n2, ...e2);
+function u$7(r2, n2, ...e2) {
+  let o2 = typeof r2 == "function" ? r2 : r2[0], a2 = typeof r2 == "function" ? "asc" : r2[1], { [a2]: t2 } = T$1, i2 = n2 === void 0 ? void 0 : u$7(n2, ...e2);
   return (y2, c) => {
     let l2 = o2(y2), p2 = o2(c);
     return t2(l2, p2) ? 1 : t2(p2, l2) ? -1 : i2?.(y2, c) ?? 0;
@@ -5355,6 +5328,27 @@ function s$1(r2) {
   return d$2(n2) && typeof e2 == "string" && e2 in T$1 && o2.length === 0;
 }
 var d$2 = (r2) => typeof r2 == "function" && r2.length === 1;
+function u$6(...e2) {
+  return u$8(i$6, e2);
+}
+function i$6(e2, a2) {
+  let n2 = [];
+  for (let [o2, r2] of e2.entries()) {
+    if (!a2(r2, o2, e2)) break;
+    n2.push(r2);
+  }
+  return n2;
+}
+function b(t2) {
+  return (e2, r2) => {
+    if (r2 === 0) return t2(e2);
+    if (!Number.isInteger(r2)) throw new TypeError(`precision must be an integer: ${r2.toString()}`);
+    if (r2 > 15 || r2 < -15) throw new RangeError("precision must be between -15 and 15");
+    if (Number.isNaN(e2) || !Number.isFinite(e2)) return t2(e2);
+    let n2 = 10 ** r2;
+    return t2(e2 * n2) / n2;
+  };
+}
 function m$1(...r2) {
   return u$8(o$6, r2);
 }
@@ -5376,20 +5370,10 @@ function t$7(...e2) {
 function r$2(e2) {
   return [...e2].reverse();
 }
-function b(t2) {
-  return (e2, r2) => {
-    if (r2 === 0) return t2(e2);
-    if (!Number.isInteger(r2)) throw new TypeError(`precision must be an integer: ${r2.toString()}`);
-    if (r2 > 15 || r2 < -15) throw new RangeError("precision must be between -15 and 15");
-    if (Number.isNaN(e2) || !Number.isFinite(e2)) return t2(e2);
-    let n2 = 10 ** r2;
-    return t2(e2 * n2) / n2;
-  };
-}
-function p$3(...o2) {
-  return u$8(t$6, o2);
+function p$3(...n2) {
+  return u$8(t$6, n2);
 }
-var t$6 = (o2, e2) => o2[e2];
+var t$6 = (n2, e2) => n2[e2];
 function t$5(...n2) {
   return u$8(o$4, n2);
 }
@@ -6339,7 +6323,7 @@ function useLayoutConstraints() {
         T((n2) => n2.draggable !== !1),
         m((x2) => x2.id)
       );
-      i$6(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
+      i$7(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
     },
     onNodeDrag: () => {
       solverRef.current?.onMove((nodes) => {
@@ -7301,7 +7285,7 @@ function bezierControlPoints(diagramEdge) {
   const handles = [
     // start
   ];
-  for (; i$6(bezierPoints, 3); ) {
+  for (; i$7(bezierPoints, 3); ) {
     const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
     inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
       const { x: x2, y: y2 } = bezier.get(t2);
@@ -7337,7 +7321,7 @@ function diagramViewToXYFlowData(view, opts) {
   const ns = "", nodeById = (id2) => nonNullable(nodeLookup.get(id2), `Node not found: ${id2}`);
   let next;
   for (; next = traverse.shift(); ) {
-    const { node: node2, parent } = next, isCompound = i$6(node2.children, 1) || node2.kind == ElementKind.Group;
+    const { node: node2, parent } = next, isCompound = i$7(node2.children, 1) || node2.kind == ElementKind.Group;
     isCompound && traverse.push(...node2.children.map((child) => ({ node: nodeById(child), parent: node2 })));
     const position2 = {
       x: node2.position[0],
@@ -7381,7 +7365,7 @@ function diagramViewToXYFlowData(view, opts) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id2 = ns + edge.id;
-    if (!i$6(edge.points, 2)) {
+    if (!i$7(edge.points, 2)) {
       console.error("edge should have at least 2 points", edge);
       continue;
     }
@@ -7725,7 +7709,7 @@ function createDiagramStore(props2) {
               const _updated = acc[data.edge.id] = {
                 points: data.edge.points
               };
-              data.label?.bbox && (_updated.labelBBox = data.label.bbox), data.edge.labelBBox && (_updated.labelBBox ??= data.edge.labelBBox), i$6(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
+              data.label?.bbox && (_updated.labelBBox = data.label.bbox), data.edge.labelBBox && (_updated.labelBBox ??= data.edge.labelBBox), i$7(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
               const allX = [
                 ...data.edge.points.map((p2) => p2[0]),
                 ...controlPoints.map((p2) => p2.x),
@@ -7977,7 +7961,7 @@ function createDiagramStore(props2) {
           },
           align: (mode) => {
             const { scheduleSaveManualLayout, xystore } = get(), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
-            if (!i$6(nodesToAlign, 2)) {
+            if (!i$7(nodesToAlign, 2)) {
               console.warn("At least 2 nodes must be selected to align");
               return;
             }
@@ -13835,7 +13819,7 @@ function createNode$1(nodeType, element, ctx) {
     return node2;
   const g = ctx.g, parent = x$1(
     element.ancestors(),
-    u$7((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
+    u$6((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
     d(),
     (found) => found ? createNode$1("compound", found, ctx) : null
   ), xynode = {
@@ -14667,7 +14651,7 @@ const classes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
     edgesep: 20
   },
   edgeLabel: {
-    width: 60
+    width: 65
   },
   emptyNodeOffset: 150,
   nodeWidth: 270,
@@ -14762,7 +14746,7 @@ function createNode(column, nodeType, element, ctx) {
     return invariant(node2.type !== "empty", `Node ${element.id} is empty`), node2;
   const g = ctx.g, parent = x$1(
     element.ancestors(),
-    u$7((ancestor) => !isAncestor(ancestor.id, ctx.subjectId)),
+    u$6((ancestor) => !isAncestor(ancestor.id, ctx.subjectId)),
     f(
       (ancestor) => ctx.diagramNodes.has(ancestor.id) || ctx.connected[column].has(ancestor.id) || ctx.scope === "global" && ctx.subjectElement.ascendingSiblings().some((s2) => s2.id === ancestor.id)
     ),
@@ -14905,7 +14889,10 @@ function layout(subjectId, view, likec4model, scope) {
     },
     forEachIncoming(sourceId, relations) {
       const source = createNode("incomers", "element", likec4model.element(sourceId), ctx);
-      g.setEdge(graphId(source).port, subject.id), subject.data.ports.left.push({
+      g.setEdge(graphId(source).port, subject.id, {
+        width: Sizes.edgeLabel.width,
+        weight: source.type === "compound" ? 0 : 1
+      }), subject.data.ports.left.push({
         id: source.id,
         type: "in"
       }), source.data.ports.right.push({
@@ -14919,7 +14906,10 @@ function layout(subjectId, view, likec4model, scope) {
     },
     forEachOutgoing(targetId, relations) {
       const target = createNode("outgoers", "element", likec4model.element(targetId), ctx);
-      g.setEdge(subjectElement.id, graphId(target).port), subject.data.ports.right.push({
+      g.setEdge(subjectElement.id, graphId(target).port, {
+        width: Sizes.edgeLabel.width,
+        weight: target.type === "compound" ? 1 : 2
+      }), subject.data.ports.right.push({
         id: target.id,
         type: "out"
       }), target.data.ports.left.push({
@@ -14940,7 +14930,7 @@ function layout(subjectId, view, likec4model, scope) {
     g.setEdge(subject.id, graphId(target).port);
   }
   const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length);
-  subjectPortsCount > 2 && (g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 2) * 1);
+  subjectPortsCount > 3 && (g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 3) * 5);
   const nodebounds = applyDagreLayout(ctx.g), xynodes = [
     subject,
     ...ctx.columns.incomers.values(),
@@ -15265,6 +15255,9 @@ function RelationshipEdge$1({
               Text$6,
               {
                 fw: isMultiRelation ? "500" : "400",
+                style: {
+                  whiteSpace: isMultiRelation ? "nowrap" : void 0
+                },
                 component: "div",
                 className: edgeLabelText$1,
                 lineClamp: 3,
@@ -16640,7 +16633,7 @@ function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
   invariant(start, "start should be defined");
   let path = `M ${start[0]},${start[1]}`;
-  for (; i$6(points, 3); ) {
+  for (; i$7(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
@@ -19410,6 +19403,7 @@ function StaticLikeC4Diagram({
   view,
   fitView = !0,
   fitViewPadding = 0,
+  showElementLinks = !0,
   background = "transparent",
   ...rest
 }) {
@@ -19424,7 +19418,7 @@ function StaticLikeC4Diagram({
       zoomable: !1,
       controls: !1,
       background,
-      showElementLinks: !0,
+      showElementLinks,
       showDiagramTitle: !1,
       showNotations: !1,
       showRelationshipDetails: !1,
@@ -19545,7 +19539,7 @@ function DiagramPreview$1({ diagram }) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-BwT9t8VB.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-BRH5n7M1.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -19836,6 +19830,7 @@ function DiagramPreview({
         renderIcon: RenderIcon,
         fitView: !0,
         fitViewPadding: 0,
+        showElementLinks: !1,
         initialWidth: width2,
         initialHeight: height
       }
@@ -21722,35 +21717,39 @@ function PanelGroupWithForwardedRef({
       eagerValues.layout = [];
     };
   }, []);
-  const registerResizeHandle2 = useCallback((dragHandleId) => function(event) {
-    event.preventDefault();
+  const registerResizeHandle2 = useCallback((dragHandleId) => {
+    let isRTL = !1;
     const panelGroupElement = panelGroupElementRef.current;
-    if (!panelGroupElement)
-      return () => null;
-    const {
-      direction: direction2,
-      dragState: dragState2,
-      id: groupId2,
-      keyboardResizeBy: keyboardResizeBy2,
-      onLayout: onLayout2
-    } = committedValuesRef.current, {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current, {
-      initialLayout
-    } = dragState2 ?? {}, pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement);
-    let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement);
-    const isHorizontal = direction2 === "horizontal";
-    document.dir === "rtl" && isHorizontal && (delta = -delta);
-    const panelConstraints = panelDataArray.map((panelData) => panelData.constraints), nextLayout = adjustLayoutByDelta({
-      delta,
-      initialLayout: initialLayout ?? prevLayout,
-      panelConstraints,
-      pivotIndices,
-      prevLayout,
-      trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
-    }), layoutChanged = !compareLayouts(prevLayout, nextLayout);
-    (isPointerEvent(event) || isMouseEvent(event)) && prevDeltaRef.current != delta && (prevDeltaRef.current = delta, !layoutChanged && delta !== 0 ? isHorizontal ? reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX) : reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX) : reportConstraintsViolation(dragHandleId, 0)), layoutChanged && (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
+    return panelGroupElement && window.getComputedStyle(panelGroupElement, null).getPropertyValue("direction") === "rtl" && (isRTL = !0), function(event) {
+      event.preventDefault();
+      const panelGroupElement2 = panelGroupElementRef.current;
+      if (!panelGroupElement2)
+        return () => null;
+      const {
+        direction: direction2,
+        dragState: dragState2,
+        id: groupId2,
+        keyboardResizeBy: keyboardResizeBy2,
+        onLayout: onLayout2
+      } = committedValuesRef.current, {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current, {
+        initialLayout
+      } = dragState2 ?? {}, pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement2);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement2);
+      const isHorizontal = direction2 === "horizontal";
+      isHorizontal && isRTL && (delta = -delta);
+      const panelConstraints = panelDataArray.map((panelData) => panelData.constraints), nextLayout = adjustLayoutByDelta({
+        delta,
+        initialLayout: initialLayout ?? prevLayout,
+        panelConstraints,
+        pivotIndices,
+        prevLayout,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      }), layoutChanged = !compareLayouts(prevLayout, nextLayout);
+      (isPointerEvent(event) || isMouseEvent(event)) && prevDeltaRef.current != delta && (prevDeltaRef.current = delta, !layoutChanged && delta !== 0 ? isHorizontal ? reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX) : reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX) : reportConstraintsViolation(dragHandleId, 0)), layoutChanged && (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
+    };
   }, []), resizePanel2 = useCallback((panelData, unsafePanelSize) => {
     const {
       onLayout: onLayout2

package/dist/__app__/src/main.js

@@ -1,4 +1,4 @@
 import "react/jsx-runtime";
-import "./chunks/main-Q7z-4OPp.js";
+import "./chunks/main-DejpCNPJ.js";
 import "react";
 import "react-dom/client";