@vuu-ui/vuu-layout 0.8.35 → 0.8.37

package/esm/drag-drop/Draggable.js

@@ -0,0 +1,190 @@
+import { findTarget, followPath } from '../utils/pathUtils.js';
+import { getProps } from '../utils/propUtils.js';
+import { BoxModel } from './BoxModel.js';
+import { DragState } from './DragState.js';
+import { identifyDropTarget, DropTarget } from './DropTarget.js';
+import DropTargetCanvas from './DropTargetRenderer.js';
+
+let _dragStartCallback;
+let _dragMoveCallback;
+let _dragEndCallback;
+let _dragStartX;
+let _dragStartY;
+let _dragContainer;
+let _dragState;
+let _dropTarget = null;
+let _validDropTargetPaths;
+let _dragInstructions;
+let _measurements;
+let _simpleDrag;
+let _dragThreshold;
+let _mouseDownTimer = null;
+const DEFAULT_DRAG_THRESHOLD = 3;
+const _dropTargetRenderer = new DropTargetCanvas();
+const SCALE_FACTOR = 0.4;
+function getDragContainer(rootContainer, dragContainerPath) {
+  if (dragContainerPath) {
+    return followPath(rootContainer, dragContainerPath);
+  } else {
+    return findTarget(
+      rootContainer,
+      // TODO dropTarget is not good
+      (props) => props.dropTarget
+    );
+  }
+}
+const Draggable = {
+  handleMousedown(e, dragStartCallback, dragInstructions = {}) {
+    _dragStartCallback = dragStartCallback;
+    _dragInstructions = dragInstructions;
+    _dragStartX = e.clientX;
+    _dragStartY = e.clientY;
+    _dragThreshold = dragInstructions.dragThreshold === void 0 ? DEFAULT_DRAG_THRESHOLD : dragInstructions.dragThreshold;
+    if (_dragThreshold === 0) {
+      _dragStartCallback(e, 0, 0);
+    } else {
+      window.addEventListener("mousemove", preDragMousemoveHandler, false);
+      window.addEventListener("mouseup", preDragMouseupHandler, false);
+      _mouseDownTimer = window.setTimeout(() => {
+        window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+        window.removeEventListener("mouseup", preDragMouseupHandler, false);
+        _dragStartCallback?.(e, 0, 0);
+      }, 500);
+    }
+    e.preventDefault();
+  },
+  // called from handleDragStart (_dragCallback)
+  initDrag(rootContainer, dragContainerPath, { top, left, right, bottom }, dragPos, dragHandler, intrinsicSize, dropTargets) {
+    ({ drag: _dragMoveCallback, drop: _dragEndCallback } = dragHandler);
+    return initDrag(
+      rootContainer,
+      dragContainerPath,
+      { top, left, right, bottom },
+      dragPos,
+      intrinsicSize,
+      dropTargets
+    );
+  }
+};
+function preDragMousemoveHandler(e) {
+  const x_diff = e.clientX - _dragStartX ;
+  const y_diff = e.clientY - _dragStartY ;
+  const mouseMoveDistance = Math.max(Math.abs(x_diff), Math.abs(y_diff));
+  if (mouseMoveDistance > _dragThreshold) {
+    window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+    window.removeEventListener("mouseup", preDragMouseupHandler, false);
+    _dragStartCallback?.(e, x_diff, y_diff);
+    _dragStartCallback = null;
+  }
+}
+function preDragMouseupHandler() {
+  if (_mouseDownTimer) {
+    window.clearTimeout(_mouseDownTimer);
+    _mouseDownTimer = null;
+  }
+  window.removeEventListener("mousemove", preDragMousemoveHandler, false);
+  window.removeEventListener("mouseup", preDragMouseupHandler, false);
+}
+function initDrag(rootContainer, dragContainerPath, dragRect, dragPos, intrinsicSize, dropTargets) {
+  _dragContainer = getDragContainer(rootContainer, dragContainerPath);
+  const { "data-path": dataPath, path = dataPath } = getProps(_dragContainer);
+  if (dropTargets) {
+    const dropPaths = dropTargets.map((id) => findTarget(rootContainer, (props) => props.id === id)).map((target) => target.props.path);
+    _validDropTargetPaths = dropPaths;
+  }
+  _measurements = BoxModel.measure(_dragContainer, dropTargets);
+  const dragZone = _measurements[path];
+  _dragState = new DragState(
+    dragZone,
+    dragPos.x,
+    dragPos.y,
+    dragRect,
+    intrinsicSize
+  );
+  const pctX = Math.round(_dragState.x.mousePct * 100);
+  const pctY = Math.round(_dragState.y.mousePct * 100);
+  window.addEventListener("mousemove", dragMousemoveHandler, false);
+  window.addEventListener("mouseup", dragMouseupHandler, false);
+  window.addEventListener("keydown", dragKeydownHandler, false);
+  _simpleDrag = false;
+  _dropTargetRenderer.prepare(dragRect, "tab-only");
+  return _dragInstructions.DoNotTransform ? "transform:none" : (
+    // scale factor should be applied in caller, not here
+    `transform:scale(${SCALE_FACTOR},${SCALE_FACTOR});transform-origin:${pctX}% ${pctY}%;`
+  );
+}
+function dragMousemoveHandler(evt) {
+  const x = evt.clientX;
+  const y = evt.clientY;
+  const dragState = _dragState;
+  const currentDropTarget = _dropTarget;
+  let dropTarget;
+  let newX, newY;
+  if (dragState.update("x", x)) {
+    newX = dragState.x.pos;
+  }
+  if (dragState.update("y", y)) {
+    newY = dragState.y.pos;
+  }
+  if (newX === void 0 && newY === void 0) ; else {
+    _dragMoveCallback?.(newX, newY);
+  }
+  if (_simpleDrag || _dragContainer === void 0) {
+    return;
+  }
+  if (dragState.inBounds()) {
+    dropTarget = identifyDropTarget(
+      x,
+      y,
+      _dragContainer,
+      _measurements,
+      dragState.hasIntrinsicSize(),
+      _validDropTargetPaths
+    );
+  } else {
+    dropTarget = identifyDropTarget(
+      dragState.dropX(),
+      dragState.dropY(),
+      _dragContainer,
+      _measurements
+    );
+  }
+  if (currentDropTarget) {
+    if (dropTarget == null || dropTarget.box !== currentDropTarget.box) {
+      _dropTarget = null;
+    }
+  }
+  if (dropTarget) {
+    _dropTargetRenderer.draw(dropTarget, dragState);
+    _dropTarget = dropTarget;
+  }
+}
+function dragKeydownHandler(evt) {
+  if (evt.key === "Escape") {
+    _dropTarget = null;
+    onDragEnd();
+  }
+}
+function dragMouseupHandler() {
+  onDragEnd();
+}
+function onDragEnd() {
+  if (_dropTarget) {
+    const dropTarget = _dropTargetRenderer.hoverDropTarget || DropTarget.getActiveDropTarget(_dropTarget);
+    _dragEndCallback?.(dropTarget);
+    _dropTarget = null;
+  } else {
+    _dragEndCallback?.();
+  }
+  _dragMoveCallback = null;
+  _dragEndCallback = null;
+  _dragContainer = void 0;
+  _dropTargetRenderer.clear();
+  _validDropTargetPaths = void 0;
+  window.removeEventListener("mousemove", dragMousemoveHandler, false);
+  window.removeEventListener("mouseup", dragMouseupHandler, false);
+  window.removeEventListener("keydown", dragKeydownHandler, false);
+}
+
+export { Draggable };
+//# sourceMappingURL=Draggable.js.map

package/esm/drag-drop/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.ts"],"sourcesContent":["import { rect } from \"@vuu-ui/vuu-utils\";\nimport { ReactElement } from \"react\";\nimport { LayoutModel } from \"../layout-reducer\";\nimport { findTarget, followPath, getProps } from \"../utils\";\nimport { BoxModel, Measurements } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState, IntrinsicSizes } from \"./DragState\";\nimport { DropTarget, identifyDropTarget } from \"./DropTarget\";\nimport DropTargetRenderer from \"./DropTargetRenderer\";\n\nexport type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;\nexport type DragMoveCallback = (\n  x: number | undefined,\n  y: number | undefined\n) => void;\nexport type DragEndCallback = (droppedTarget?: Partial<DropTarget>) => void;\nexport type DragInstructions = {\n  DoNotRemove?: boolean;\n  DoNotTransform?: boolean;\n  dragThreshold?: number;\n  DriftHomeIfNoDropTarget?: boolean;\n  RemoveDraggableOnDragEnd?: boolean;\n};\n\nlet _dragStartCallback: DragStartCallback | null;\nlet _dragMoveCallback: DragMoveCallback | null;\nlet _dragEndCallback: DragEndCallback | null;\n\nlet _dragStartX: number;\nlet _dragStartY: number;\nlet _dragContainer: ReactElement | undefined;\nlet _dragState: DragState;\nlet _dropTarget: DropTarget | null = null;\nlet _validDropTargetPaths: string[] | undefined;\nlet _dragInstructions: DragInstructions;\nlet _measurements: Measurements;\nlet _simpleDrag: boolean;\nlet _dragThreshold: number;\nlet _mouseDownTimer: number | null = null;\n\nconst DEFAULT_DRAG_THRESHOLD = 3;\nconst _dropTargetRenderer = new DropTargetRenderer();\nconst SCALE_FACTOR = 0.4;\n\nfunction getDragContainer(\n  rootContainer: ReactElement,\n  dragContainerPath: string\n) {\n  if (dragContainerPath) {\n    return followPath(rootContainer, dragContainerPath) as ReactElement;\n  } else {\n    return findTarget(\n      rootContainer,\n      // TODO dropTarget is not good\n      (props) => props.dropTarget\n    ) as ReactElement;\n  }\n}\n\nexport const Draggable = {\n  handleMousedown(\n    e: MouseEvent,\n    dragStartCallback: DragStartCallback,\n    dragInstructions: DragInstructions = {}\n  ) {\n    _dragStartCallback = dragStartCallback;\n    _dragInstructions = dragInstructions;\n\n    _dragStartX = e.clientX;\n    _dragStartY = e.clientY;\n\n    _dragThreshold =\n      dragInstructions.dragThreshold === undefined\n        ? DEFAULT_DRAG_THRESHOLD\n        : dragInstructions.dragThreshold;\n\n    if (_dragThreshold === 0) {\n      // maybe this should be -1\n      _dragStartCallback(e, 0, 0);\n    } else {\n      window.addEventListener(\"mousemove\", preDragMousemoveHandler, false);\n      window.addEventListener(\"mouseup\", preDragMouseupHandler, false);\n\n      _mouseDownTimer = window.setTimeout(() => {\n        window.removeEventListener(\"mousemove\", preDragMousemoveHandler, false);\n        window.removeEventListener(\"mouseup\", preDragMouseupHandler, false);\n        _dragStartCallback?.(e, 0, 0);\n      }, 500);\n    }\n\n    e.preventDefault();\n  },\n\n  // called from handleDragStart (_dragCallback)\n  initDrag(\n    rootContainer: ReactElement,\n    dragContainerPath: string,\n    { top, left, right, bottom }: rect,\n    dragPos: { x: number; y: number },\n    dragHandler: {\n      drag: DragMoveCallback;\n      drop: DragEndCallback;\n    },\n    intrinsicSize?: IntrinsicSizes,\n    dropTargets?: string[]\n  ) {\n    ({ drag: _dragMoveCallback, drop: _dragEndCallback } = dragHandler);\n    return initDrag(\n      rootContainer,\n      dragContainerPath,\n      { top, left, right, bottom } as DragDropRect,\n      dragPos,\n      intrinsicSize,\n      dropTargets\n    );\n  },\n};\n\nfunction preDragMousemoveHandler(e: MouseEvent) {\n  const x = true;\n  const y = true;\n\n  const x_diff = x ? e.clientX - _dragStartX : 0;\n  const y_diff = y ? e.clientY - _dragStartY : 0;\n  const mouseMoveDistance = Math.max(Math.abs(x_diff), Math.abs(y_diff));\n\n  // when we do finally move the draggee, we are going to 'jump' by the amount of the drag threshold, should we\n  // attempt to animate this ?\n  if (mouseMoveDistance > _dragThreshold) {\n    window.removeEventListener(\"mousemove\", preDragMousemoveHandler, false);\n    window.removeEventListener(\"mouseup\", preDragMouseupHandler, false);\n    _dragStartCallback?.(e, x_diff, y_diff);\n    _dragStartCallback = null;\n  }\n}\n\nfunction preDragMouseupHandler() {\n  if (_mouseDownTimer) {\n    window.clearTimeout(_mouseDownTimer);\n    _mouseDownTimer = null;\n  }\n  window.removeEventListener(\"mousemove\", preDragMousemoveHandler, false);\n  window.removeEventListener(\"mouseup\", preDragMouseupHandler, false);\n}\n\nfunction initDrag(\n  rootContainer: ReactElement,\n  dragContainerPath: string,\n  dragRect: DragDropRect,\n  dragPos: { x: number; y: number },\n  intrinsicSize?: IntrinsicSizes,\n  dropTargets?: string[]\n) {\n  _dragContainer = getDragContainer(rootContainer, dragContainerPath);\n\n  const { \"data-path\": dataPath, path = dataPath } = getProps(_dragContainer);\n\n  if (dropTargets) {\n    const dropPaths = dropTargets\n      .map((id) => findTarget(rootContainer, (props) => props.id === id))\n      .map((target) => (target as LayoutModel).props.path);\n    _validDropTargetPaths = dropPaths;\n  }\n\n  // const start = window.performance.now();\n  // translate the layout $position to drag-oriented co-ordinates, ignoring splitters\n\n  _measurements = BoxModel.measure(_dragContainer, dropTargets);\n  // console.log({ _measurements });\n  // onsole.log({ measurements: _measurements });\n  // const end = window.performance.now();\n  // console.log(`[Draggable] measurements took ${end - start}ms`, _measurements);\n\n  const dragZone = _measurements[path];\n\n  _dragState = new DragState(\n    dragZone,\n    dragPos.x,\n    dragPos.y,\n    dragRect,\n    intrinsicSize\n  );\n\n  const pctX = Math.round(_dragState.x.mousePct * 100);\n  const pctY = Math.round(_dragState.y.mousePct * 100);\n\n  window.addEventListener(\"mousemove\", dragMousemoveHandler, false);\n  window.addEventListener(\"mouseup\", dragMouseupHandler, false);\n  window.addEventListener(\"keydown\", dragKeydownHandler, false);\n\n  _simpleDrag = false;\n\n  _dropTargetRenderer.prepare(dragRect, \"tab-only\");\n\n  return _dragInstructions.DoNotTransform\n    ? \"transform:none\"\n    : // scale factor should be applied in caller, not here\n      `transform:scale(${SCALE_FACTOR},${SCALE_FACTOR});transform-origin:${pctX}% ${pctY}%;`;\n}\n\nfunction dragMousemoveHandler(evt: MouseEvent) {\n  const x = evt.clientX;\n  const y = evt.clientY;\n  const dragState = _dragState;\n  const currentDropTarget = _dropTarget;\n  let dropTarget;\n  let newX, newY;\n\n  if (dragState.update(\"x\", x)) {\n    newX = dragState.x.pos;\n  }\n\n  if (dragState.update(\"y\", y)) {\n    newY = dragState.y.pos;\n  }\n\n  if (newX === undefined && newY === undefined) {\n    //onsole.log('both x and y are unchanged');\n  } else {\n    _dragMoveCallback?.(newX, newY);\n  }\n\n  if (_simpleDrag || _dragContainer === undefined) {\n    return;\n  }\n\n  if (dragState.inBounds()) {\n    dropTarget = identifyDropTarget(\n      x,\n      y,\n      _dragContainer,\n      _measurements,\n      dragState.hasIntrinsicSize(),\n      _validDropTargetPaths\n    );\n  } else {\n    dropTarget = identifyDropTarget(\n      dragState.dropX(),\n      dragState.dropY(),\n      _dragContainer,\n      _measurements\n    );\n  }\n\n  // did we have an existing droptarget which is no longer such ...\n  if (currentDropTarget) {\n    if (dropTarget == null || dropTarget.box !== currentDropTarget.box) {\n      _dropTarget = null;\n    }\n  }\n\n  if (dropTarget) {\n    _dropTargetRenderer.draw(dropTarget, dragState);\n    _dropTarget = dropTarget;\n  }\n}\n\nfunction dragKeydownHandler(evt: KeyboardEvent) {\n  if (evt.key === \"Escape\") {\n    _dropTarget = null;\n    onDragEnd();\n  }\n}\n\nfunction dragMouseupHandler() {\n  onDragEnd();\n}\n\nfunction onDragEnd() {\n  if (_dropTarget) {\n    const dropTarget =\n      _dropTargetRenderer.hoverDropTarget ||\n      DropTarget.getActiveDropTarget(_dropTarget);\n\n    _dragEndCallback?.(dropTarget as DropTarget);\n\n    _dropTarget = null;\n  } else {\n    _dragEndCallback?.();\n  }\n\n  _dragMoveCallback = null;\n  _dragEndCallback = null;\n\n  _dragContainer = undefined;\n  _dropTargetRenderer.clear();\n  _validDropTargetPaths = undefined;\n  window.removeEventListener(\"mousemove\", dragMousemoveHandler, false);\n  window.removeEventListener(\"mouseup\", dragMouseupHandler, false);\n  window.removeEventListener(\"keydown\", dragKeydownHandler, false);\n}\n"],"names":["DropTargetRenderer"],"mappings":"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"}

package/esm/drag-drop/DropMenu.css

@@ -0,0 +1,71 @@
+.vuuDropMenu {
+  margin-left: -50%;
+  margin-bottom: -50%;
+  background-color: white;
+  border: solid 1px var(--grey40);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+  border-radius: 3px;
+}
+
+.vuuDropMenu-left,
+.vuuDropMenu-right {
+  flex-direction: column;
+}
+
+.vuuDropMenu-bottom {
+  transform: translate(0, -30px);
+}
+
+.vuuDropMenu-right {
+  transform: translate(-20px, 0);
+}
+
+.vuuDropMenu-item {
+  --vuu-icon-size: 20px;
+  width: 32px;
+  height: 32px;
+  background-color: var(--grey20);
+  border-bottom: solid 1px var(--grey40);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuuDropMenu-item .Icon {
+  transform: scale(1.25);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-left .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(180deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-top .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(270deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {
+  transform: scale(1.25) rotate(90deg);
+  transform-origin: center center;
+}
+
+.vuuDropMenu-item .hwIcon-path {
+  fill: grey;
+}
+.vuuDropMenu-item:hover {
+  background-color: rgba(200, 200, 200, 0.5);
+}
+
+.vuuDropMenu-item:hover .hwIcon-path-2 {
+  fill: blue;
+}
+
+.vuuDropMenu-item:last-child {
+  border-bottom: none;
+}

package/esm/drag-drop/DropMenu.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+
+function computeMenuPosition(dropTarget, offsetTop = 0, offsetLeft = 0) {
+  const { pos, clientRect: box } = dropTarget;
+  const menuOffset = 20;
+  return pos.position.West ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, "left"] : pos.position.South ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, "bottom"] : pos.position.East ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, "right"] : (
+    /* North | Header*/
+    [
+      pos.x - offsetLeft,
+      box.top - offsetTop + menuOffset,
+      "top"
+    ]
+  );
+}
+const classBase = "vuuDropMenu";
+const DropMenu = ({
+  className,
+  dropTarget,
+  onHover,
+  orientation
+}) => {
+  const dropTargets = dropTarget.toArray();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classBase, className, `${classBase}-${orientation}`),
+      onMouseLeave: () => onHover(null),
+      children: dropTargets.map((target, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${classBase}-item`,
+          "data-icon": i === 0 ? "column-2A" : "column-2B",
+          onMouseEnter: () => onHover(target)
+        },
+        i
+      ))
+    }
+  );
+};
+
+export { DropMenu, computeMenuPosition };
+//# sourceMappingURL=DropMenu.js.map

package/esm/drag-drop/DropMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAMO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/esm/drag-drop/DropTarget.js

@@ -0,0 +1,240 @@
+import 'react';
+import { getProps } from '../utils/propUtils.js';
+import { typeOf } from '../utils/typeOf.js';
+import { RelativeDropPosition, Position, BoxModel, getPosition, positionValues } from './BoxModel.js';
+
+const isTabstrip = (dropTarget) => dropTarget.pos.tab && typeOf(dropTarget.component) === "Stack" && dropTarget.pos.position.Header;
+const { north, south, east, west } = positionValues;
+const eastwest = east + west;
+const northsouth = north + south;
+class DropTarget {
+  constructor({
+    component,
+    pos,
+    clientRect,
+    nextDropTarget
+  }) {
+    this.component = component;
+    this.pos = pos;
+    this.clientRect = clientRect;
+    this.nextDropTarget = nextDropTarget;
+    this.active = false;
+    this.dropRect = void 0;
+  }
+  targetTabPos(tab) {
+    const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;
+    return positionRelativeToTab === RelativeDropPosition.BEFORE ? tabLeft : tabLeft + tabWidth;
+  }
+  /**
+   * Determine what will be rendered by the dropTargetRenderer
+   *
+   * @param {*} lineWidth
+   * @param {*} dragState
+   * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
+   */
+  getTargetDropOutline(lineWidth, dragState) {
+    if (this.pos.tab) {
+      return this.getDropTabOutline(lineWidth, this.pos.tab);
+    } else if (dragState && dragState.hasIntrinsicSize()) {
+      return this.getIntrinsicDropRect(dragState);
+    } else {
+      const [l, t, r, b] = this.getDropRectOutline(
+        lineWidth,
+        dragState
+      );
+      return { l, t, r, b };
+    }
+  }
+  getDropTabOutline(lineWidth, tab) {
+    const {
+      clientRect: { top, left, right, bottom, header }
+    } = this;
+    const inset = 0;
+    const gap = Math.round(lineWidth / 2) + inset;
+    const t = Math.round(top);
+    const l = Math.round(left + gap);
+    const r = Math.round(right - gap);
+    const b = Math.round(bottom - gap);
+    const tabLeft = this.targetTabPos(tab);
+    const tabWidth = 60;
+    const tabHeight = (header?.bottom ?? 0) - (header?.top ?? 0);
+    return { l, t, r, b, tabLeft, tabWidth, tabHeight };
+  }
+  getIntrinsicDropRect(dragState) {
+    const { pos, clientRect: rect2 } = this;
+    const { x, y } = dragState;
+    let height = dragState.intrinsicSize?.height ?? 0;
+    let width = dragState.intrinsicSize?.height ?? 0;
+    if (height && height > rect2.height) {
+      console.log(`DropTarget: we're going to blow the gaff`);
+      height = rect2.height;
+    } else if (width && width > rect2.width) {
+      console.log(`DropTarget: we're going to blow the gaff`);
+      width = rect2.width;
+    }
+    const left = Math.min(
+      rect2.right - width,
+      Math.max(rect2.left, Math.round(pos.x - x.mousePct * width))
+    );
+    const top = Math.min(
+      rect2.bottom - height,
+      Math.max(rect2.top, Math.round(pos.y - y.mousePct * height))
+    );
+    const [l, t, r, b] = this.dropRect = [
+      left,
+      top,
+      left + width,
+      top + height
+    ];
+    const guideLines = pos.position.EastOrWest ? [l, rect2.top, l, rect2.bottom, r, rect2.top, r, rect2.bottom] : [rect2.left, t, rect2.right, t, rect2.left, b, rect2.right, b];
+    return { l, r, t, b, guideLines };
+  }
+  /**
+   * @returns  [left, top, right, bottom]
+   */
+  getDropRectOutline(lineWidth, dragState) {
+    const { pos, clientRect: rect2 } = this;
+    const { width: suggestedWidth, height: suggestedHeight, position } = pos;
+    const { width: intrinsicWidth, height: intrinsicHeight } = dragState?.intrinsicSize ?? {};
+    const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;
+    const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;
+    this.dropRect = void 0;
+    const { top: t, left: l, right: r, bottom: b } = rect2;
+    const inset = 0;
+    const gap = Math.round(lineWidth / 2) + inset;
+    switch (position) {
+      case Position.North:
+      case Position.Header: {
+        const halfHeight = Math.round((b - t) / 2);
+        const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
+        return sizeWidth && l + sizeWidth < r ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] : [l + gap, t + gap, r - gap, t + gap + height];
+      }
+      case Position.West: {
+        const halfWidth = Math.round((r - l) / 2);
+        const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
+        return sizeHeight && t + sizeHeight < b ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] : [l + gap, t + gap, l - gap + width, b - gap];
+      }
+      case Position.East: {
+        const halfWidth = Math.round((r - l) / 2);
+        const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
+        return sizeHeight && t + sizeHeight < b ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] : [r - gap - width, t + gap, r - gap, b - gap];
+      }
+      case Position.South: {
+        const halfHeight = Math.round((b - t) / 2);
+        const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
+        return sizeWidth && l + sizeWidth < r ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] : [l + gap, b - gap - height, r - gap, b - gap];
+      }
+      case Position.Centre: {
+        return [l + gap, t + gap, r - gap, b - gap];
+      }
+      default:
+        console.warn(`DropTarget does not recognize position ${position}`);
+        return null;
+    }
+  }
+  activate() {
+    this.active = true;
+    return this;
+  }
+  toArray() {
+    let dropTarget = this;
+    const dropTargets = [dropTarget];
+    while (dropTarget = dropTarget.nextDropTarget) {
+      dropTargets.push(dropTarget);
+    }
+    return dropTargets;
+  }
+  static getActiveDropTarget(dropTarget) {
+    return dropTarget === null ? null : dropTarget?.active ? dropTarget : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);
+  }
+}
+function identifyDropTarget(x, y, rootLayout, measurements, intrinsicSize, validDropTargets) {
+  let dropTarget = null;
+  const allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(
+    rootLayout,
+    measurements,
+    x,
+    y,
+    validDropTargets
+  );
+  if (allBoxesContainingPoint.length) {
+    const [component, ...containers] = allBoxesContainingPoint;
+    const {
+      "data-path": dataPath,
+      path = dataPath,
+      "data-row-placeholder": isRowPlaceholder
+    } = getProps(component);
+    const clientRect = measurements[path];
+    const placeholderOrientation = intrinsicSize && isRowPlaceholder ? "row" : void 0;
+    const pos = getPosition(x, y, clientRect, placeholderOrientation);
+    const box = measurements[path];
+    const nextDropTarget = ([nextTarget, ...targets]) => {
+      if (pos.position?.Header || pos.closeToTheEdge) {
+        const targetPosition = getTargetPosition(
+          nextTarget,
+          pos,
+          box,
+          measurements,
+          x,
+          y
+        );
+        if (targetPosition) {
+          const [containerPos, clientRect2] = targetPosition;
+          return new DropTarget({
+            component: nextTarget,
+            pos: containerPos,
+            clientRect: clientRect2,
+            nextDropTarget: nextDropTarget(targets) ?? null
+          });
+        } else if (targets.length) {
+          return nextDropTarget(targets);
+        }
+      }
+    };
+    dropTarget = new DropTarget({
+      component,
+      pos,
+      clientRect,
+      nextDropTarget: nextDropTarget(containers) ?? null
+    }).activate();
+  }
+  return dropTarget;
+}
+function getTargetPosition(container, { closeToTheEdge, position }, box, measurements, x, y) {
+  if (!container || container.type === "DraggableLayout") {
+    return;
+  }
+  const containingBox = measurements[container.props.path];
+  const closeToTop = closeToTheEdge & positionValues.north;
+  const closeToRight = closeToTheEdge & positionValues.east;
+  const closeToBottom = closeToTheEdge & positionValues.south;
+  const closeToLeft = closeToTheEdge & positionValues.west;
+  const atTop = (closeToTop || position.Header) && Math.round(box.top) === Math.round(containingBox.top);
+  const atRight = closeToRight && Math.round(box.right) === Math.round(containingBox.right);
+  const atBottom = closeToBottom && Math.round(box.bottom) === Math.round(containingBox.bottom);
+  const atLeft = closeToLeft && Math.round(box.left) === Math.round(containingBox.left);
+  if (atTop || atRight || atBottom || atLeft) {
+    const { "data-path": dataPath, path = dataPath } = container.props;
+    const clientRect = measurements[path];
+    const containerPos = getPosition(x, y, clientRect);
+    if ((isVBox(container) || isTabbedContainer(container)) && closeToTheEdge & eastwest) {
+      containerPos.width = 120;
+      return [containerPos, clientRect];
+    } else if ((isHBox(container) || isTabbedContainer(container)) && (position.Header || closeToTheEdge & northsouth)) {
+      containerPos.height = 120;
+      return [containerPos, clientRect];
+    }
+  }
+}
+function isTabbedContainer(component) {
+  return typeOf(component) === "Stack";
+}
+function isVBox(component) {
+  return typeOf(component) === "Flexbox" && component.props.style.flexDirection === "column";
+}
+function isHBox(component) {
+  return typeOf(component) === "Flexbox" && component.props.style.flexDirection === "row";
+}
+
+export { DropTarget, identifyDropTarget, isTabstrip };
+//# sourceMappingURL=DropTarget.js.map

package/esm/drag-drop/DropTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropTarget.js","sources":["../../src/drag-drop/DropTarget.ts"],"sourcesContent":["import { rect, rectTuple } from \"@vuu-ui/vuu-utils\";\nimport { LayoutModel } from \"../layout-reducer\";\nimport { getProps, typeOf } from \"../utils\";\nimport {\n  BoxModel,\n  getPosition,\n  Measurements,\n  Position,\n  positionValues,\n  RelativeDropPosition,\n} from \"./BoxModel\";\nimport { DragDropRect, DropPos, DropPosTab } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\n\nexport const isTabstrip = (dropTarget: DropTarget) =>\n  dropTarget.pos.tab &&\n  typeOf(dropTarget.component) === \"Stack\" &&\n  dropTarget.pos.position.Header;\n\nconst { north, south, east, west } = positionValues;\nconst eastwest = east + west;\nconst northsouth = north + south;\n\nexport interface DropTargetProps {\n  component: LayoutModel;\n  pos: DropPos;\n  clientRect: DragDropRect;\n  nextDropTarget: DropTarget | null;\n}\n\nexport type GuideLine = [\n  number,\n  number,\n  number,\n  number,\n  number,\n  number,\n  number,\n  number\n];\nexport interface TargetDropOutline {\n  l: number;\n  r: number;\n  t: number;\n  b: number;\n  tabLeft?: number;\n  tabWidth?: number;\n  tabHeight?: number;\n  guideLines?: GuideLine;\n}\n\nexport class DropTarget {\n  private active: boolean;\n\n  public box: unknown;\n  public clientRect: DragDropRect;\n  public component: LayoutModel;\n  public dropRect: rectTuple | undefined;\n  public nextDropTarget: DropTarget | null;\n  public pos: DropPos;\n\n  constructor({\n    component,\n    pos,\n    clientRect /*, closeToTheEdge*/,\n    nextDropTarget,\n  }: DropTargetProps) {\n    this.component = component;\n    this.pos = pos;\n    this.clientRect = clientRect;\n    this.nextDropTarget = nextDropTarget;\n    this.active = false;\n    this.dropRect = undefined;\n  }\n\n  targetTabPos(tab: DropPosTab) {\n    const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;\n    return positionRelativeToTab === RelativeDropPosition.BEFORE\n      ? tabLeft\n      : tabLeft + tabWidth;\n  }\n\n  /**\n   * Determine what will be rendered by the dropTargetRenderer\n   *\n   * @param {*} lineWidth\n   * @param {*} dragState\n   * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}\n   */\n  getTargetDropOutline(\n    lineWidth: number,\n    dragState?: DragState\n  ): TargetDropOutline {\n    if (this.pos.tab) {\n      return this.getDropTabOutline(lineWidth, this.pos.tab);\n    } else if (dragState && dragState.hasIntrinsicSize()) {\n      return this.getIntrinsicDropRect(dragState);\n    } else {\n      const [l, t, r, b] = this.getDropRectOutline(\n        lineWidth,\n        dragState\n      ) as rectTuple;\n      return { l, t, r, b };\n    }\n  }\n\n  getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline {\n    const {\n      clientRect: { top, left, right, bottom, header },\n    } = this;\n\n    const inset = 0;\n    const gap = Math.round(lineWidth / 2) + inset;\n\n    const t = Math.round(top);\n    const l = Math.round(left + gap);\n    const r = Math.round(right - gap);\n    const b = Math.round(bottom - gap);\n    const tabLeft = this.targetTabPos(tab);\n    const tabWidth = 60; // should really measure text\n    const tabHeight = (header?.bottom ?? 0) - (header?.top ?? 0);\n    return { l, t, r, b, tabLeft, tabWidth, tabHeight };\n  }\n\n  getIntrinsicDropRect(dragState: DragState): TargetDropOutline {\n    const { pos, clientRect: rect } = this;\n\n    const { x, y } = dragState;\n\n    let height = dragState.intrinsicSize?.height ?? 0;\n    let width = dragState.intrinsicSize?.height ?? 0;\n\n    if (height && height > rect.height) {\n      console.log(`DropTarget: we're going to blow the gaff`);\n      height = rect.height;\n    } else if (width && width > rect.width) {\n      console.log(`DropTarget: we're going to blow the gaff`);\n      width = rect.width;\n    }\n\n    const left = Math.min(\n      rect.right - width,\n      Math.max(rect.left, Math.round(pos.x - x.mousePct * width))\n    );\n    const top = Math.min(\n      rect.bottom - height,\n      Math.max(rect.top, Math.round(pos.y - y.mousePct * height))\n    );\n    const [l, t, r, b] = (this.dropRect = [\n      left,\n      top,\n      left + width,\n      top + height,\n    ]);\n\n    const guideLines: GuideLine = pos.position.EastOrWest\n      ? [l, rect.top, l, rect.bottom, r, rect.top, r, rect.bottom]\n      : [rect.left, t, rect.right, t, rect.left, b, rect.right, b];\n\n    return { l, r, t, b, guideLines };\n  }\n\n  /**\n   * @returns  [left, top, right, bottom]\n   */\n  getDropRectOutline(lineWidth: number, dragState?: DragState) {\n    const { pos, clientRect: rect } = this;\n    const { width: suggestedWidth, height: suggestedHeight, position } = pos;\n\n    const { width: intrinsicWidth, height: intrinsicHeight } =\n      dragState?.intrinsicSize ?? {};\n    const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;\n    const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;\n\n    this.dropRect = undefined;\n\n    const { top: t, left: l, right: r, bottom: b } = rect;\n\n    const inset = 0;\n    const gap = Math.round(lineWidth / 2) + inset;\n\n    switch (position) {\n      case Position.North:\n      case Position.Header: {\n        const halfHeight = Math.round((b - t) / 2);\n        const height = sizeHeight\n          ? Math.min(halfHeight, Math.round(sizeHeight))\n          : halfHeight;\n        return sizeWidth && l + sizeWidth < r\n          ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] // need flex direction indicator\n          : [l + gap, t + gap, r - gap, t + gap + height];\n      }\n      case Position.West: {\n        const halfWidth = Math.round((r - l) / 2);\n        const width = sizeWidth\n          ? Math.min(halfWidth, Math.round(sizeWidth))\n          : halfWidth;\n        return sizeHeight && t + sizeHeight < b\n          ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] // need flex direction indicator\n          : [l + gap, t + gap, l - gap + width, b - gap];\n      }\n      case Position.East: {\n        const halfWidth = Math.round((r - l) / 2);\n        const width = sizeWidth\n          ? Math.min(halfWidth, Math.round(sizeWidth))\n          : halfWidth;\n        return sizeHeight && t + sizeHeight < b\n          ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] // need flex direction indicator\n          : [r - gap - width, t + gap, r - gap, b - gap];\n      }\n      case Position.South: {\n        const halfHeight = Math.round((b - t) / 2);\n        const height = sizeHeight\n          ? Math.min(halfHeight, Math.round(sizeHeight))\n          : halfHeight;\n\n        return sizeWidth && l + sizeWidth < r\n          ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] // need flex direction indicator\n          : [l + gap, b - gap - height, r - gap, b - gap];\n      }\n      case Position.Centre: {\n        return [l + gap, t + gap, r - gap, b - gap];\n      }\n      default:\n        console.warn(`DropTarget does not recognize position ${position}`);\n        return null;\n    }\n  }\n\n  activate() {\n    this.active = true;\n    return this;\n  }\n\n  toArray(this: DropTarget) {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\n    let dropTarget: DropTarget | null = this;\n    const dropTargets = [dropTarget];\n    // eslint-disable-next-line no-cond-assign\n    while ((dropTarget = dropTarget.nextDropTarget)) {\n      dropTargets.push(dropTarget);\n    }\n    return dropTargets;\n  }\n\n  static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null {\n    return dropTarget === null\n      ? null\n      : dropTarget?.active\n      ? dropTarget\n      : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);\n  }\n}\n\n// Initial entry to this method is always via the app (may be it should be *on* the app)\nexport function identifyDropTarget(\n  x: number,\n  y: number,\n  rootLayout: LayoutModel,\n  measurements: Measurements,\n  intrinsicSize?: number,\n  validDropTargets?: string[]\n) {\n  let dropTarget = null;\n\n  const allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(\n    rootLayout,\n    measurements,\n    x,\n    y,\n    validDropTargets\n  );\n\n  if (allBoxesContainingPoint.length) {\n    const [component, ...containers] = allBoxesContainingPoint;\n    const {\n      \"data-path\": dataPath,\n      path = dataPath,\n      \"data-row-placeholder\": isRowPlaceholder,\n    } = getProps(component);\n    const clientRect = measurements[path];\n    const placeholderOrientation =\n      intrinsicSize && isRowPlaceholder ? \"row\" : undefined;\n    const pos = getPosition(x, y, clientRect, placeholderOrientation);\n    const box = measurements[path];\n\n    const nextDropTarget = ([nextTarget, ...targets]: LayoutModel[]):\n      | DropTarget\n      | undefined => {\n      if (pos.position?.Header || pos.closeToTheEdge) {\n        const targetPosition = getTargetPosition(\n          nextTarget,\n          pos,\n          box,\n          measurements,\n          x,\n          y\n        );\n        if (targetPosition) {\n          const [containerPos, clientRect] = targetPosition;\n\n          return new DropTarget({\n            component: nextTarget,\n            pos: containerPos,\n            clientRect,\n            nextDropTarget: nextDropTarget(targets) ?? null,\n          });\n        } else if (targets.length) {\n          return nextDropTarget(targets);\n        }\n      }\n    };\n    dropTarget = new DropTarget({\n      component,\n      pos,\n      clientRect,\n      nextDropTarget: nextDropTarget(containers) ?? null,\n    }).activate();\n  }\n\n  return dropTarget;\n}\n\nfunction getTargetPosition(\n  container: LayoutModel,\n  { closeToTheEdge, position }: DropPos,\n  box: rect,\n  measurements: Measurements,\n  x: number,\n  y: number\n): [DropPos, DragDropRect] | undefined {\n  if (!container || container.type === \"DraggableLayout\") {\n    return;\n  }\n\n  const containingBox = measurements[container.props.path];\n  const closeToTop = closeToTheEdge & positionValues.north;\n  const closeToRight = closeToTheEdge & positionValues.east;\n  const closeToBottom = closeToTheEdge & positionValues.south;\n  const closeToLeft = closeToTheEdge & positionValues.west;\n\n  const atTop =\n    (closeToTop || position.Header) &&\n    Math.round(box.top) === Math.round(containingBox.top);\n  const atRight =\n    closeToRight && Math.round(box.right) === Math.round(containingBox.right);\n  const atBottom =\n    closeToBottom &&\n    Math.round(box.bottom) === Math.round(containingBox.bottom);\n  const atLeft =\n    closeToLeft && Math.round(box.left) === Math.round(containingBox.left);\n\n  if (atTop || atRight || atBottom || atLeft) {\n    const { \"data-path\": dataPath, path = dataPath } = container.props;\n    const clientRect = measurements[path];\n    const containerPos = getPosition(x, y, clientRect);\n\n    // if its a VBox and we're close to left or right ...\n    if (\n      (isVBox(container) || isTabbedContainer(container)) &&\n      closeToTheEdge & eastwest\n    ) {\n      containerPos.width = 120;\n      return [containerPos, clientRect];\n    }\n    // if it's a HBox and we're close to top or bottom ...\n    else if (\n      (isHBox(container) || isTabbedContainer(container)) &&\n      (position.Header || closeToTheEdge & northsouth)\n    ) {\n      containerPos.height = 120;\n      return [containerPos, clientRect];\n    }\n  }\n}\n\nfunction isTabbedContainer(component: LayoutModel) {\n  return typeOf(component) === \"Stack\";\n}\n\nfunction isVBox(component: LayoutModel) {\n  return (\n    typeOf(component) === \"Flexbox\" &&\n    component.props.style.flexDirection === \"column\"\n  );\n}\n\nfunction isHBox(component: LayoutModel) {\n  return (\n    typeOf(component) === \"Flexbox\" &&\n    component.props.style.flexDirection === \"row\"\n  );\n}\n"],"names":["rect","clientRect"],"mappings":";;;;;AAcO,MAAM,UAAa,GAAA,CAAC,UACzB,KAAA,UAAA,CAAW,GAAI,CAAA,GAAA,IACf,MAAO,CAAA,UAAA,CAAW,SAAS,CAAA,KAAM,OACjC,IAAA,UAAA,CAAW,IAAI,QAAS,CAAA,OAAA;AAE1B,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,IAAA,EAAM,MAAS,GAAA,cAAA,CAAA;AACrC,MAAM,WAAW,IAAO,GAAA,IAAA,CAAA;AACxB,MAAM,aAAa,KAAQ,GAAA,KAAA,CAAA;AA8BpB,MAAM,UAAW,CAAA;AAAA,EAUtB,WAAY,CAAA;AAAA,IACV,SAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,GACkB,EAAA;AAClB,IAAA,IAAA,CAAK,SAAY,GAAA,SAAA,CAAA;AACjB,IAAA,IAAA,CAAK,GAAM,GAAA,GAAA,CAAA;AACX,IAAA,IAAA,CAAK,UAAa,GAAA,UAAA,CAAA;AAClB,IAAA,IAAA,CAAK,cAAiB,GAAA,cAAA,CAAA;AACtB,IAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA;AACd,IAAA,IAAA,CAAK,QAAW,GAAA,KAAA,CAAA,CAAA;AAAA,GAClB;AAAA,EAEA,aAAa,GAAiB,EAAA;AAC5B,IAAA,MAAM,EAAE,IAAM,EAAA,OAAA,EAAS,KAAO,EAAA,QAAA,EAAU,uBAA0B,GAAA,GAAA,CAAA;AAClE,IAAA,OAAO,qBAA0B,KAAA,oBAAA,CAAqB,MAClD,GAAA,OAAA,GACA,OAAU,GAAA,QAAA,CAAA;AAAA,GAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,oBAAA,CACE,WACA,SACmB,EAAA;AACnB,IAAI,IAAA,IAAA,CAAK,IAAI,GAAK,EAAA;AAChB,MAAA,OAAO,IAAK,CAAA,iBAAA,CAAkB,SAAW,EAAA,IAAA,CAAK,IAAI,GAAG,CAAA,CAAA;AAAA,KAC5C,MAAA,IAAA,SAAA,IAAa,SAAU,CAAA,gBAAA,EAAoB,EAAA;AACpD,MAAO,OAAA,IAAA,CAAK,qBAAqB,SAAS,CAAA,CAAA;AAAA,KACrC,MAAA;AACL,MAAA,MAAM,CAAC,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,CAAC,IAAI,IAAK,CAAA,kBAAA;AAAA,QACxB,SAAA;AAAA,QACA,SAAA;AAAA,OACF,CAAA;AACA,MAAA,OAAO,EAAE,CAAA,EAAG,CAAG,EAAA,CAAA,EAAG,CAAE,EAAA,CAAA;AAAA,KACtB;AAAA,GACF;AAAA,EAEA,iBAAA,CAAkB,WAAmB,GAAoC,EAAA;AACvE,IAAM,MAAA;AAAA,MACJ,YAAY,EAAE,GAAA,EAAK,IAAM,EAAA,KAAA,EAAO,QAAQ,MAAO,EAAA;AAAA,KAC7C,GAAA,IAAA,CAAA;AAEJ,IAAA,MAAM,KAAQ,GAAA,CAAA,CAAA;AACd,IAAA,MAAM,GAAM,GAAA,IAAA,CAAK,KAAM,CAAA,SAAA,GAAY,CAAC,CAAI,GAAA,KAAA,CAAA;AAExC,IAAM,MAAA,CAAA,GAAI,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACxB,IAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,GAAO,GAAG,CAAA,CAAA;AAC/B,IAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,GAAG,CAAA,CAAA;AAChC,IAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,MAAA,GAAS,GAAG,CAAA,CAAA;AACjC,IAAM,MAAA,OAAA,GAAU,IAAK,CAAA,YAAA,CAAa,GAAG,CAAA,CAAA;AACrC,IAAA,MAAM,QAAW,GAAA,EAAA,CAAA;AACjB,IAAA,MAAM,SAAa,GAAA,CAAA,MAAA,EAAQ,MAAU,IAAA,CAAA,KAAM,QAAQ,GAAO,IAAA,CAAA,CAAA,CAAA;AAC1D,IAAA,OAAO,EAAE,CAAG,EAAA,CAAA,EAAG,GAAG,CAAG,EAAA,OAAA,EAAS,UAAU,SAAU,EAAA,CAAA;AAAA,GACpD;AAAA,EAEA,qBAAqB,SAAyC,EAAA;AAC5D,IAAA,MAAM,EAAE,GAAA,EAAK,UAAYA,EAAAA,KAAAA,EAAS,GAAA,IAAA,CAAA;AAElC,IAAM,MAAA,EAAE,CAAG,EAAA,CAAA,EAAM,GAAA,SAAA,CAAA;AAEjB,IAAI,IAAA,MAAA,GAAS,SAAU,CAAA,aAAA,EAAe,MAAU,IAAA,CAAA,CAAA;AAChD,IAAI,IAAA,KAAA,GAAQ,SAAU,CAAA,aAAA,EAAe,MAAU,IAAA,CAAA,CAAA;AAE/C,IAAI,IAAA,MAAA,IAAU,MAASA,GAAAA,KAAAA,CAAK,MAAQ,EAAA;AAClC,MAAA,OAAA,CAAQ,IAAI,CAA0C,wCAAA,CAAA,CAAA,CAAA;AACtD,MAAA,MAAA,GAASA,KAAK,CAAA,MAAA,CAAA;AAAA,KACL,MAAA,IAAA,KAAA,IAAS,KAAQA,GAAAA,KAAAA,CAAK,KAAO,EAAA;AACtC,MAAA,OAAA,CAAQ,IAAI,CAA0C,wCAAA,CAAA,CAAA,CAAA;AACtD,MAAA,KAAA,GAAQA,KAAK,CAAA,KAAA,CAAA;AAAA,KACf;AAEA,IAAA,MAAM,OAAO,IAAK,CAAA,GAAA;AAAA,MAChBA,MAAK,KAAQ,GAAA,KAAA;AAAA,MACb,IAAA,CAAK,GAAIA,CAAAA,KAAAA,CAAK,IAAM,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAI,GAAA,CAAA,CAAE,QAAW,GAAA,KAAK,CAAC,CAAA;AAAA,KAC5D,CAAA;AACA,IAAA,MAAM,MAAM,IAAK,CAAA,GAAA;AAAA,MACfA,MAAK,MAAS,GAAA,MAAA;AAAA,MACd,IAAA,CAAK,GAAIA,CAAAA,KAAAA,CAAK,GAAK,EAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,CAAI,GAAA,CAAA,CAAE,QAAW,GAAA,MAAM,CAAC,CAAA;AAAA,KAC5D,CAAA;AACA,IAAA,MAAM,CAAC,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA,GAAK,KAAK,QAAW,GAAA;AAAA,MACpC,IAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAO,GAAA,KAAA;AAAA,MACP,GAAM,GAAA,MAAA;AAAA,KACR,CAAA;AAEA,IAAA,MAAM,UAAwB,GAAA,GAAA,CAAI,QAAS,CAAA,UAAA,GACvC,CAAC,CAAA,EAAGA,KAAK,CAAA,GAAA,EAAK,CAAGA,EAAAA,KAAAA,CAAK,MAAQ,EAAA,CAAA,EAAGA,MAAK,GAAK,EAAA,CAAA,EAAGA,KAAK,CAAA,MAAM,CACzD,GAAA,CAACA,KAAK,CAAA,IAAA,EAAM,CAAGA,EAAAA,KAAAA,CAAK,KAAO,EAAA,CAAA,EAAGA,KAAK,CAAA,IAAA,EAAM,CAAGA,EAAAA,KAAAA,CAAK,OAAO,CAAC,CAAA,CAAA;AAE7D,IAAA,OAAO,EAAE,CAAA,EAAG,CAAG,EAAA,CAAA,EAAG,GAAG,UAAW,EAAA,CAAA;AAAA,GAClC;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAA,CAAmB,WAAmB,SAAuB,EAAA;AAC3D,IAAA,MAAM,EAAE,GAAA,EAAK,UAAYA,EAAAA,KAAAA,EAAS,GAAA,IAAA,CAAA;AAClC,IAAA,MAAM,EAAE,KAAO,EAAA,cAAA,EAAgB,MAAQ,EAAA,eAAA,EAAiB,UAAa,GAAA,GAAA,CAAA;AAErE,IAAM,MAAA,EAAE,OAAO,cAAgB,EAAA,MAAA,EAAQ,iBACrC,GAAA,SAAA,EAAW,iBAAiB,EAAC,CAAA;AAC/B,IAAM,MAAA,UAAA,GAAa,mBAAmB,eAAmB,IAAA,CAAA,CAAA;AACzD,IAAM,MAAA,SAAA,GAAY,kBAAkB,cAAkB,IAAA,CAAA,CAAA;AAEtD,IAAA,IAAA,CAAK,QAAW,GAAA,KAAA,CAAA,CAAA;AAEhB,IAAM,MAAA,EAAE,KAAK,CAAG,EAAA,IAAA,EAAM,GAAG,KAAO,EAAA,CAAA,EAAG,MAAQ,EAAA,CAAA,EAAMA,GAAAA,KAAAA,CAAAA;AAEjD,IAAA,MAAM,KAAQ,GAAA,CAAA,CAAA;AACd,IAAA,MAAM,GAAM,GAAA,IAAA,CAAK,KAAM,CAAA,SAAA,GAAY,CAAC,CAAI,GAAA,KAAA,CAAA;AAExC,IAAA,QAAQ,QAAU;AAAA,MAChB,KAAK,QAAS,CAAA,KAAA,CAAA;AAAA,MACd,KAAK,SAAS,MAAQ,EAAA;AACpB,QAAA,MAAM,UAAa,GAAA,IAAA,CAAK,KAAO,CAAA,CAAA,CAAA,GAAI,KAAK,CAAC,CAAA,CAAA;AACzC,QAAM,MAAA,MAAA,GAAS,aACX,IAAK,CAAA,GAAA,CAAI,YAAY,IAAK,CAAA,KAAA,CAAM,UAAU,CAAC,CAC3C,GAAA,UAAA,CAAA;AACJ,QAAO,OAAA,SAAA,IAAa,CAAI,GAAA,SAAA,GAAY,CAChC,GAAA,CAAC,IAAI,GAAK,EAAA,CAAA,GAAI,GAAK,EAAA,CAAA,GAAI,SAAY,GAAA,GAAA,EAAK,IAAI,GAAM,GAAA,MAAM,CACxD,GAAA,CAAC,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,GAAM,MAAM,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,KAAK,SAAS,IAAM,EAAA;AAClB,QAAA,MAAM,SAAY,GAAA,IAAA,CAAK,KAAO,CAAA,CAAA,CAAA,GAAI,KAAK,CAAC,CAAA,CAAA;AACxC,QAAM,MAAA,KAAA,GAAQ,YACV,IAAK,CAAA,GAAA,CAAI,WAAW,IAAK,CAAA,KAAA,CAAM,SAAS,CAAC,CACzC,GAAA,SAAA,CAAA;AACJ,QAAO,OAAA,UAAA,IAAc,CAAI,GAAA,UAAA,GAAa,CAClC,GAAA,CAAC,IAAI,GAAK,EAAA,CAAA,GAAI,GAAK,EAAA,CAAA,GAAI,GAAM,GAAA,KAAA,EAAO,IAAI,UAAa,GAAA,GAAG,CACxD,GAAA,CAAC,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,GAAM,KAAO,EAAA,CAAA,GAAI,GAAG,CAAA,CAAA;AAAA,OACjD;AAAA,MACA,KAAK,SAAS,IAAM,EAAA;AAClB,QAAA,MAAM,SAAY,GAAA,IAAA,CAAK,KAAO,CAAA,CAAA,CAAA,GAAI,KAAK,CAAC,CAAA,CAAA;AACxC,QAAM,MAAA,KAAA,GAAQ,YACV,IAAK,CAAA,GAAA,CAAI,WAAW,IAAK,CAAA,KAAA,CAAM,SAAS,CAAC,CACzC,GAAA,SAAA,CAAA;AACJ,QAAO,OAAA,UAAA,IAAc,CAAI,GAAA,UAAA,GAAa,CAClC,GAAA,CAAC,IAAI,GAAM,GAAA,KAAA,EAAO,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,EAAK,IAAI,UAAa,GAAA,GAAG,CACxD,GAAA,CAAC,CAAI,GAAA,GAAA,GAAM,KAAO,EAAA,CAAA,GAAI,GAAK,EAAA,CAAA,GAAI,GAAK,EAAA,CAAA,GAAI,GAAG,CAAA,CAAA;AAAA,OACjD;AAAA,MACA,KAAK,SAAS,KAAO,EAAA;AACnB,QAAA,MAAM,UAAa,GAAA,IAAA,CAAK,KAAO,CAAA,CAAA,CAAA,GAAI,KAAK,CAAC,CAAA,CAAA;AACzC,QAAM,MAAA,MAAA,GAAS,aACX,IAAK,CAAA,GAAA,CAAI,YAAY,IAAK,CAAA,KAAA,CAAM,UAAU,CAAC,CAC3C,GAAA,UAAA,CAAA;AAEJ,QAAO,OAAA,SAAA,IAAa,CAAI,GAAA,SAAA,GAAY,CAChC,GAAA,CAAC,IAAI,GAAK,EAAA,CAAA,GAAI,GAAM,GAAA,MAAA,EAAQ,CAAI,GAAA,SAAA,GAAY,KAAK,CAAI,GAAA,GAAG,CACxD,GAAA,CAAC,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,GAAM,MAAQ,EAAA,CAAA,GAAI,GAAK,EAAA,CAAA,GAAI,GAAG,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,KAAK,SAAS,MAAQ,EAAA;AACpB,QAAO,OAAA,CAAC,IAAI,GAAK,EAAA,CAAA,GAAI,KAAK,CAAI,GAAA,GAAA,EAAK,IAAI,GAAG,CAAA,CAAA;AAAA,OAC5C;AAAA,MACA;AACE,QAAQ,OAAA,CAAA,IAAA,CAAK,CAA0C,uCAAA,EAAA,QAAQ,CAAE,CAAA,CAAA,CAAA;AACjE,QAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAAA,GACF;AAAA,EAEA,QAAW,GAAA;AACT,IAAA,IAAA,CAAK,MAAS,GAAA,IAAA,CAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAA0B,GAAA;AAExB,IAAA,IAAI,UAAgC,GAAA,IAAA,CAAA;AACpC,IAAM,MAAA,WAAA,GAAc,CAAC,UAAU,CAAA,CAAA;AAE/B,IAAQ,OAAA,UAAA,GAAa,WAAW,cAAiB,EAAA;AAC/C,MAAA,WAAA,CAAY,KAAK,UAAU,CAAA,CAAA;AAAA,KAC7B;AACA,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAAO,oBAAoB,UAAkD,EAAA;AAC3E,IAAO,OAAA,UAAA,KAAe,OAClB,IACA,GAAA,UAAA,EAAY,SACZ,UACA,GAAA,UAAA,CAAW,mBAAoB,CAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AAAA,GAC9D;AACF,CAAA;AAGO,SAAS,mBACd,CACA,EAAA,CAAA,EACA,UACA,EAAA,YAAA,EACA,eACA,gBACA,EAAA;AACA,EAAA,IAAI,UAAa,GAAA,IAAA,CAAA;AAEjB,EAAA,MAAM,0BAA0B,QAAS,CAAA,uBAAA;AAAA,IACvC,UAAA;AAAA,IACA,YAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,wBAAwB,MAAQ,EAAA;AAClC,IAAA,MAAM,CAAC,SAAA,EAAW,GAAG,UAAU,CAAI,GAAA,uBAAA,CAAA;AACnC,IAAM,MAAA;AAAA,MACJ,WAAa,EAAA,QAAA;AAAA,MACb,IAAO,GAAA,QAAA;AAAA,MACP,sBAAwB,EAAA,gBAAA;AAAA,KAC1B,GAAI,SAAS,SAAS,CAAA,CAAA;AACtB,IAAM,MAAA,UAAA,GAAa,aAAa,IAAI,CAAA,CAAA;AACpC,IAAM,MAAA,sBAAA,GACJ,aAAiB,IAAA,gBAAA,GAAmB,KAAQ,GAAA,KAAA,CAAA,CAAA;AAC9C,IAAA,MAAM,GAAM,GAAA,WAAA,CAAY,CAAG,EAAA,CAAA,EAAG,YAAY,sBAAsB,CAAA,CAAA;AAChE,IAAM,MAAA,GAAA,GAAM,aAAa,IAAI,CAAA,CAAA;AAE7B,IAAA,MAAM,cAAiB,GAAA,CAAC,CAAC,UAAA,EAAe,UAAO,CAE9B,KAAA;AACf,MAAA,IAAI,GAAI,CAAA,QAAA,EAAU,MAAU,IAAA,GAAA,CAAI,cAAgB,EAAA;AAC9C,QAAA,MAAM,cAAiB,GAAA,iBAAA;AAAA,UACrB,UAAA;AAAA,UACA,GAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAA;AAAA,UACA,CAAA;AAAA,UACA,CAAA;AAAA,SACF,CAAA;AACA,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAM,MAAA,CAAC,YAAcC,EAAAA,WAAU,CAAI,GAAA,cAAA,CAAA;AAEnC,UAAA,OAAO,IAAI,UAAW,CAAA;AAAA,YACpB,SAAW,EAAA,UAAA;AAAA,YACX,GAAK,EAAA,YAAA;AAAA,YACL,UAAAA,EAAAA,WAAAA;AAAA,YACA,cAAA,EAAgB,cAAe,CAAA,OAAO,CAAK,IAAA,IAAA;AAAA,WAC5C,CAAA,CAAA;AAAA,SACH,MAAA,IAAW,QAAQ,MAAQ,EAAA;AACzB,UAAA,OAAO,eAAe,OAAO,CAAA,CAAA;AAAA,SAC/B;AAAA,OACF;AAAA,KACF,CAAA;AACA,IAAA,UAAA,GAAa,IAAI,UAAW,CAAA;AAAA,MAC1B,SAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA,EAAgB,cAAe,CAAA,UAAU,CAAK,IAAA,IAAA;AAAA,KAC/C,EAAE,QAAS,EAAA,CAAA;AAAA,GACd;AAEA,EAAO,OAAA,UAAA,CAAA;AACT,CAAA;AAEA,SAAS,iBAAA,CACP,WACA,EAAE,cAAA,EAAgB,UAClB,EAAA,GAAA,EACA,YACA,EAAA,CAAA,EACA,CACqC,EAAA;AACrC,EAAA,IAAI,CAAC,SAAA,IAAa,SAAU,CAAA,IAAA,KAAS,iBAAmB,EAAA;AACtD,IAAA,OAAA;AAAA,GACF;AAEA,EAAA,MAAM,aAAgB,GAAA,YAAA,CAAa,SAAU,CAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,UAAA,GAAa,iBAAiB,cAAe,CAAA,KAAA,CAAA;AACnD,EAAM,MAAA,YAAA,GAAe,iBAAiB,cAAe,CAAA,IAAA,CAAA;AACrD,EAAM,MAAA,aAAA,GAAgB,iBAAiB,cAAe,CAAA,KAAA,CAAA;AACtD,EAAM,MAAA,WAAA,GAAc,iBAAiB,cAAe,CAAA,IAAA,CAAA;AAEpD,EAAA,MAAM,KACH,GAAA,CAAA,UAAA,IAAc,QAAS,CAAA,MAAA,KACxB,IAAK,CAAA,KAAA,CAAM,GAAI,CAAA,GAAG,CAAM,KAAA,IAAA,CAAK,KAAM,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GACJ,YAAgB,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,KAAK,CAAM,KAAA,IAAA,CAAK,KAAM,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC1E,EAAM,MAAA,QAAA,GACJ,aACA,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,MAAM,CAAM,KAAA,IAAA,CAAK,KAAM,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC5D,EAAM,MAAA,MAAA,GACJ,WAAe,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA,CAAI,IAAI,CAAM,KAAA,IAAA,CAAK,KAAM,CAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAEvE,EAAI,IAAA,KAAA,IAAS,OAAW,IAAA,QAAA,IAAY,MAAQ,EAAA;AAC1C,IAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,IAAO,GAAA,QAAA,KAAa,SAAU,CAAA,KAAA,CAAA;AAC7D,IAAM,MAAA,UAAA,GAAa,aAAa,IAAI,CAAA,CAAA;AACpC,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,CAAG,EAAA,CAAA,EAAG,UAAU,CAAA,CAAA;AAGjD,IAAA,IAAA,CACG,OAAO,SAAS,CAAA,IAAK,kBAAkB,SAAS,CAAA,KACjD,iBAAiB,QACjB,EAAA;AACA,MAAA,YAAA,CAAa,KAAQ,GAAA,GAAA,CAAA;AACrB,MAAO,OAAA,CAAC,cAAc,UAAU,CAAA,CAAA;AAAA,KAClC,MAAA,IAAA,CAGG,MAAO,CAAA,SAAS,CAAK,IAAA,iBAAA,CAAkB,SAAS,CAChD,MAAA,QAAA,CAAS,MAAU,IAAA,cAAA,GAAiB,UACrC,CAAA,EAAA;AACA,MAAA,YAAA,CAAa,MAAS,GAAA,GAAA,CAAA;AACtB,MAAO,OAAA,CAAC,cAAc,UAAU,CAAA,CAAA;AAAA,KAClC;AAAA,GACF;AACF,CAAA;AAEA,SAAS,kBAAkB,SAAwB,EAAA;AACjD,EAAO,OAAA,MAAA,CAAO,SAAS,CAAM,KAAA,OAAA,CAAA;AAC/B,CAAA;AAEA,SAAS,OAAO,SAAwB,EAAA;AACtC,EAAA,OACE,OAAO,SAAS,CAAA,KAAM,aACtB,SAAU,CAAA,KAAA,CAAM,MAAM,aAAkB,KAAA,QAAA,CAAA;AAE5C,CAAA;AAEA,SAAS,OAAO,SAAwB,EAAA;AACtC,EAAA,OACE,OAAO,SAAS,CAAA,KAAM,aACtB,SAAU,CAAA,KAAA,CAAM,MAAM,aAAkB,KAAA,KAAA,CAAA;AAE5C;;;;"}