@witchcraft/layout 0.3.0 → 0.4.0

package/dist/runtime/helpers/consoleDebugWindow.js

@@ -0,0 +1,222 @@
+import { castType } from "@alanscodelog/utils/castType";
+import { settings } from "../settings.js";
+export function consoleDebugWindow(win, targetWidth = 100, labelFunc = createDebugLabeler()) {
+  const consoleCharAspect = 0.5;
+  const windowAspect = win.pxWidth / win.pxHeight;
+  const effectiveRatio = 1 / windowAspect * consoleCharAspect;
+  console.log(boxesToText(Object.values(win.frames), targetWidth, {
+    heightScale: effectiveRatio,
+    labelFunc
+  }));
+}
+export function boxesToText(boxes, targetWidth = 100, {
+  border = {},
+  heightScale = 1,
+  labelFunc = () => ""
+} = {}) {
+  border = {
+    horizontal: "\u2500",
+    vertical: "\u2502",
+    topLeft: "\u250C",
+    topRight: "\u2510",
+    bottomLeft: "\u2514",
+    bottomRight: "\u2518",
+    cross: "\u253C",
+    fill: " ",
+    labelBg: " ",
+    ...border
+  };
+  castType(border);
+  const normBoxes = boxes.map((box) => ({
+    ...box,
+    original: box,
+    id: box.id,
+    x: box.x / 100,
+    y: box.y / 100,
+    width: box.width / 100,
+    height: box.height / 100
+  }));
+  let minX = Infinity, minY = Infinity;
+  let maxX = -Infinity, maxY = -Infinity;
+  normBoxes.forEach((box) => {
+    minX = Math.min(minX, box.x);
+    minY = Math.min(minY, box.y);
+    maxX = Math.max(maxX, box.x + box.width);
+    maxY = Math.max(maxY, box.y + box.height);
+  });
+  const availableWidth = targetWidth;
+  const availableHeight = Math.floor(availableWidth * heightScale);
+  const totalWidth = maxX - minX || 1;
+  const totalHeight = maxY - minY || 1;
+  const scaleX_final = availableWidth / totalWidth;
+  const scaleY_final = availableHeight / totalHeight;
+  const scaledBoxes = normBoxes.map((box) => {
+    const idPart = box.id !== void 0 && box.id !== null && box.id !== "" ? String(box.id) : "??";
+    const funcLabel = labelFunc(box.original);
+    const label = funcLabel && funcLabel.trim() ? `${idPart} ${funcLabel}` : idPart;
+    return {
+      id: box.id,
+      x: (box.x - minX) * scaleX_final,
+      y: (box.y - minY) * scaleY_final,
+      width: box.width * scaleX_final,
+      height: box.height * scaleY_final,
+      label,
+      original: box
+    };
+  });
+  const cols = Math.min(availableWidth, Math.floor(totalWidth * scaleX_final));
+  const rows = Math.min(availableHeight, Math.floor(totalHeight * scaleY_final));
+  if (cols < 1 || rows < 1) {
+    return new Error("Grid too small to display");
+  }
+  const grid = Array(rows).fill(null).map(
+    () => Array(cols).fill(null).map(() => ({
+      char: border.fill,
+      priority: 0,
+      type: "fill",
+      boxIndex: -1
+    }))
+  );
+  function setCell(x, y, char, priority, type, boxIndex) {
+    if (x < 0 || y < 0 || x >= cols || y >= rows) return;
+    const current = grid[y][x];
+    if (boxIndex > current.boxIndex || boxIndex === current.boxIndex && priority > current.priority) {
+      grid[y][x] = { char, priority, type, boxIndex };
+    }
+  }
+  function getCell(x, y) {
+    if (x < 0 || y < 0 || x >= cols || y >= rows) return void 0;
+    return grid[y][x];
+  }
+  for (let boxIndex = scaledBoxes.length - 1; boxIndex >= 0; boxIndex--) {
+    const box = scaledBoxes[boxIndex];
+    const x1 = Math.round(box.x);
+    const y1 = Math.round(box.y);
+    const x2 = Math.round(box.x + box.width);
+    const y2 = Math.round(box.y + box.height);
+    const clampedX1 = Math.max(0, Math.min(cols - 1, x1));
+    const clampedY1 = Math.max(0, Math.min(rows - 1, y1));
+    const clampedX2 = Math.max(0, Math.min(cols - 1, x2));
+    const clampedY2 = Math.max(0, Math.min(rows - 1, y2));
+    if (clampedX1 >= clampedX2 || clampedY1 >= clampedY2) continue;
+    const edgePriority = 10;
+    if (clampedY1 >= 0 && clampedY1 < rows) {
+      for (let x = clampedX1 + 1; x < clampedX2; x++) {
+        const cell = getCell(x, clampedY1);
+        if (cell && cell.type === "vertical" && cell.boxIndex !== boxIndex) {
+          setCell(x, clampedY1, border.cross, edgePriority, "cross", boxIndex);
+        } else {
+          setCell(x, clampedY1, border.horizontal, edgePriority, "horizontal", boxIndex);
+        }
+      }
+    }
+    if (clampedY2 >= 0 && clampedY2 < rows && clampedY2 !== clampedY1) {
+      for (let x = clampedX1 + 1; x < clampedX2; x++) {
+        const cell = getCell(x, clampedY2);
+        if (cell && cell.type === "vertical" && cell.boxIndex !== boxIndex) {
+          setCell(x, clampedY2, border.cross, edgePriority, "cross", boxIndex);
+        } else {
+          setCell(x, clampedY2, border.horizontal, edgePriority, "horizontal", boxIndex);
+        }
+      }
+    }
+    if (clampedX1 >= 0 && clampedX1 < cols) {
+      for (let y = clampedY1 + 1; y < clampedY2; y++) {
+        const cell = getCell(clampedX1, y);
+        if (cell && (cell.type === "horizontal" || cell.type === "cross") && cell.boxIndex !== boxIndex) {
+          setCell(clampedX1, y, border.cross, edgePriority, "cross", boxIndex);
+        } else {
+          setCell(clampedX1, y, border.vertical, edgePriority, "vertical", boxIndex);
+        }
+      }
+    }
+    if (clampedX2 >= 0 && clampedX2 < cols && clampedX2 !== clampedX1) {
+      for (let y = clampedY1 + 1; y < clampedY2; y++) {
+        const cell = getCell(clampedX2, y);
+        if (cell && (cell.type === "horizontal" || cell.type === "cross") && cell.boxIndex !== boxIndex) {
+          setCell(clampedX2, y, border.cross, edgePriority, "cross", boxIndex);
+        } else {
+          setCell(clampedX2, y, border.vertical, edgePriority, "vertical", boxIndex);
+        }
+      }
+    }
+    const cornerPriority = 20;
+    const corners = [
+      { x: clampedX1, y: clampedY1, char: border.topLeft, type: "corner" },
+      { x: clampedX2, y: clampedY1, char: border.topRight, type: "corner" },
+      { x: clampedX1, y: clampedY2, char: border.bottomLeft, type: "corner" },
+      { x: clampedX2, y: clampedY2, char: border.bottomRight, type: "corner" }
+    ];
+    corners.forEach((corner) => {
+      if (corner.x < 0 || corner.y < 0 || corner.x >= cols || corner.y >= rows) return;
+      const cell = getCell(corner.x, corner.y);
+      if (cell && cell.boxIndex !== boxIndex && cell.type !== "fill") {
+        if (cell.type === "horizontal" || cell.type === "vertical" || cell.type === "cross") {
+          setCell(corner.x, corner.y, border.cross, cornerPriority, "cross", boxIndex);
+        } else {
+          setCell(corner.x, corner.y, corner.char, cornerPriority, corner.type, boxIndex);
+        }
+      } else {
+        setCell(corner.x, corner.y, corner.char, cornerPriority, corner.type, boxIndex);
+      }
+    });
+    const labelPriority = 30;
+    if (box.label && box.label.trim().length > 0) {
+      const labelText = String(box.label);
+      const boxWidth = clampedX2 - clampedX1;
+      const boxHeight = clampedY2 - clampedY1;
+      const interiorWidth = boxWidth - 2;
+      const interiorHeight = boxHeight - 2;
+      if (interiorWidth >= 1 && interiorHeight >= 0) {
+        let displayText = labelText;
+        if (displayText.length > interiorWidth) {
+          displayText = displayText.substring(0, interiorWidth);
+        }
+        const interiorLeft = clampedX1 + 1;
+        const interiorRight = clampedX2 - 1;
+        const interiorTop = clampedY1 + 1;
+        const interiorBottom = clampedY2 - 1;
+        const interiorCenterX = Math.floor((interiorLeft + interiorRight) / 2);
+        const interiorCenterY = Math.floor((interiorTop + interiorBottom) / 2);
+        let startX = interiorCenterX - Math.floor(displayText.length / 2);
+        if (startX < interiorLeft) {
+          startX = interiorLeft;
+        }
+        if (startX + displayText.length > interiorRight) {
+          startX = interiorRight - displayText.length;
+        }
+        for (let i = 0; i < displayText.length; i++) {
+          const xPos = startX + i;
+          const yPos = interiorCenterY;
+          if (xPos >= interiorLeft && xPos < interiorRight && yPos >= interiorTop && yPos < interiorBottom) {
+            setCell(xPos, yPos, border.labelBg, labelPriority, "label", boxIndex);
+            setCell(xPos, yPos, displayText[i], labelPriority + 1, "label", boxIndex);
+          }
+        }
+      }
+    }
+  }
+  const displayGrid = grid.map((row) => row.map((cell) => cell.char).join("")).join("\n");
+  return displayGrid;
+}
+export function createDebugLabeler({
+  showPxSize = false,
+  showCollapsed = true,
+  showDocked = true,
+  showSize = true,
+  showPos = true,
+  getWin
+} = {}) {
+  return function(f) {
+    if (showPxSize && !getWin) throw new Error("showPxSize is true but getWin is not provided");
+    const win = showPxSize ? getWin?.(f) : void 0;
+    const widthPx = showPxSize ? Math.round(f.width / settings.maxInt * win.pxWidth) : void 0;
+    const heightPx = showPxSize ? Math.round(f.height / settings.maxInt * win.pxHeight) : void 0;
+    const isCollapsed = showCollapsed && typeof f.collapsed === "number" ? "~" : "";
+    const isDocked = showDocked && f.docked ? "*" : "";
+    const size = showSize ? ` ${f.width}x${f.height}` : "";
+    const pos = showPos ? ` ${f.x},${f.y}` : "";
+    const pxSize = showPxSize ? ` ${widthPx}x${heightPx}px` : "";
+    return `${isCollapsed}${isDocked}${size}${pos}${pxSize}`;
+  };
+}

package/dist/runtime/helpers/convertLayoutWindowToWorkspace.js

@@ -1,6 +1,6 @@
-import { cloneDeep } from "es-toolkit/object";
+import { walk } from "@alanscodelog/utils/walk";
 export function convertLayoutWindowToWorkspace(layout) {
-  const l = cloneDeep(layout);
+  const l = walk(layout, void 0, { save: true });
   delete l.id;
   delete l.pxHeight;
   delete l.pxWidth;

package/dist/runtime/helpers/framesRedistributeFix.d.ts

@@ -0,0 +1,87 @@
+import type { EdgeSide, LayoutFrame, LayoutWindow } from "../types/index.js";
+/**
+ * Prepares frames that need to be temporarily repositioned before redistribution
+ * and returns functions to apply/revert the fixes after redistribution. Used mostly internally for collapse/uncollapse of docked frames and similar operations.
+ *
+ * It exists because if you try to resize a layout like this to the right, you will get issues with frame edges not lining up as frame B would be resized less than A. If you had a frame at the empty space that you excluded, it's right edge would no longer align with B's.
+ *
+ * This helper takes frames like A, moves the edge so it's shared then moved them back. Just excluding them from the calcuation usually leads to subtler errors. Such as if there are frames after A and B to the right, excluding A would mean A's right edge would stop aligning with those other frames.
+ *
+ * ┌────────────┐
+ * │A           │
+ * └──┬─────────┤
+ *    │B        │
+ *    └─────────┘
+ *
+ * It has two modes, shrink and expand meant for collapse/uncollapse operations.
+ *
+ * ## Expand
+ *
+ * When multiple frames are docked* they may share an edge like this:
+ * For example, if we collapse A, we need to allow everything else to expand,
+ * but if we expand D it will overflow the bounds of the window and we'd get an error.
+ * To avoid this, we shrink these frames towards the opposite side first.
+ *
+ * collapsed size/amount
+ * ├──┘
+ * │  shrink amount
+ * │  ├───┘
+ * ├──────┬───────────┐
+ * │A*│   │B*         │
+ * │      ├──────┬────┤
+ * │  │   │E     │C*  │
+ * │      │      │    │
+ * ├──┴───┴──────┤    │
+ * │D*           │    │
+ * └──────┬──────┴────┘
+ *        │we would shrink D to here
+ *
+ *  D.x = A.x + A.width, and then subtract the difference from it's width
+ *
+ * ***IMPROTANT: It needs to stay aligned with the right side of A and the rest of the frames, or redistribute doesn't know how to redistribute it properly.
+ *
+ * When redistribute expands it again by shrinkAmount it will end up at A.x + collapseSize.
+ *
+ * This works fine when collapseSize is 0, but otherwise breaks so we keep a list of
+ * fixes to make after redistributing to place it's left edge back at the right place (it's right edge will have been moved by redistribute).
+ *
+ * ## Shrink
+ *
+ * Mirrors collapse, the only difference being we can skip the fixes if the frame was fully collapsed to 0.
+ *
+ * Why is this? Well take this example where A is docked and collapsed and B is docked, in the following two cases we would have no problems expanding as B ends where A begins, but if B shares the edge and A is not fully collapsed it is no longer aligned with the "end" of A.
+ *
+ * Ok:
+ * A - fully collapsed to 0
+ * ~ ┌──────────┐
+ * │ │B*        │
+ * │ ├──────────┤
+ * │ │          │
+ * │ │          │
+ * │ └──────────┘
+ *
+ * Ok:
+ * A collapsed to non-zero size
+ * Note B still shares A's right edge
+ * ┌──┬─────────┐
+ * │A~│B*       │
+ * │  ├─────────┤
+ * │  │         │
+ * │  │         │
+ * └──┴─────────┘
+ *
+ * Causes issues:
+ * A collapsed to non-zero size with B docked first
+ * B looses alignment with A causing issues when redistributing
+ * ┌────────────┐
+ * │B*          │
+ * ├──┬─────────┤
+ * │A~│         │
+ * │  │         │
+ * └──┴─────────┘
+ *
+ */
+export declare function framesRedistributeFix(win: LayoutWindow, frame: LayoutFrame, dockedSide: EdgeSide, posKey: "x" | "y", sizeKey: "width" | "height", mode?: "shrink" | "expand"): {
+    applyFixes: () => void;
+    toFix: string[];
+};

package/dist/runtime/helpers/framesRedistributeFix.js

@@ -0,0 +1,54 @@
+import { oppositeSide } from "./oppositeSide.js";
+import { settings } from "../settings.js";
+export function framesRedistributeFix(win, frame, dockedSide, posKey, sizeKey, mode = "shrink") {
+  const framesToFix = [];
+  const opposite = oppositeSide(dockedSide);
+  if (mode === "expand" && frame[sizeKey] === 0) {
+    return {
+      applyFixes: () => {
+      },
+      toFix: []
+    };
+  }
+  for (const other of Object.values(win.frames)) {
+    if (frame.id === other.id || !other.docked) continue;
+    if (mode === "expand" && (other.width === 0 || other.height === 0)) continue;
+    if (other.docked === opposite) continue;
+    if (dockedSide === "left" || dockedSide === "top") {
+      if (other[posKey] !== 0) continue;
+      other[posKey] = frame[posKey] + frame[sizeKey];
+      other[sizeKey] -= frame[sizeKey];
+      framesToFix.push({
+        id: other.id,
+        posKey,
+        sizeKey,
+        type: "start"
+      });
+    } else {
+      if (other[posKey] + other[sizeKey] !== settings.maxInt) continue;
+      other[sizeKey] -= frame[sizeKey];
+      framesToFix.push({
+        id: other.id,
+        posKey,
+        sizeKey,
+        type: "end"
+      });
+    }
+  }
+  return {
+    applyFixes: () => {
+      for (const fix of framesToFix) {
+        const other = win.frames[fix.id];
+        if (fix.type === "start") {
+          const sizeDiff = other[fix.posKey];
+          other[fix.posKey] = 0;
+          other[fix.sizeKey] += sizeDiff;
+        } else {
+          const sizeDiff = settings.maxInt - (other[fix.posKey] + other[fix.sizeKey]);
+          other[fix.sizeKey] += sizeDiff;
+        }
+      }
+    },
+    toFix: framesToFix.map((f) => f.id)
+  };
+}

package/dist/runtime/helpers/getMoveEdgeInfo.d.ts

@@ -1,11 +1,15 @@
 import type { Direction, Edge, LayoutFrame, Point, Size } from "../types/index.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
 export declare function getMoveEdgeInfo(touchingFrames: LayoutFrame[], edge: Edge, 
 /** Window scaled/snaped position. See {@link toWindowCoord} */
-position: Point, margin?: Size, clamp?: boolean): {
+position: Point, margin?: Size, clamp?: boolean, 
+/** Skip the collapsed frame check. Used internally during window resize adjustments. */
+ignoreCollapsedCheck?: boolean): {
     x: number;
     y: number;
     dir: Direction;
     isPassedLimit: boolean;
     pos: number;
     distance: number;
-};
+} | KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME>;

package/dist/runtime/helpers/getMoveEdgeInfo.js

@@ -1,8 +1,17 @@
-import { clampNumber } from "./clampNumber.js";
+import { clampNumber } from "@alanscodelog/utils/clampNumber";
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
 import { getResizeLimit } from "./getResizeLimit.js";
 import { settings } from "../settings.js";
-export function getMoveEdgeInfo(touchingFrames, edge, position, margin = settings.minSizeScaled, clamp = true) {
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function getMoveEdgeInfo(touchingFrames, edge, position, margin = settings.minSizeScaled, clamp = true, ignoreCollapsedCheck = false) {
+  if (!ignoreCollapsedCheck) {
+    for (const frame of touchingFrames) {
+      if (frame.collapsed) {
+        return new KnownError(LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME, `Cannot resize non-0 collapsed frame ${frame.id}.`, { frame });
+      }
+    }
+  }
   const { x: posX, y: posY } = position;
   const edgeDirection = getEdgeOrientation(edge);
   const dir = edgeDirection === "horizontal" ? posY < edge.startY ? "up" : "down" : posX < edge.startX ? "left" : "right";

package/dist/runtime/helpers/getPinnedEdgesForCollapsedFrames.d.ts

@@ -0,0 +1,5 @@
+export declare function getPinnedEdgesForCollapsedFrames(win: {
+    frames: Record<string, any>;
+}, frame: {
+    id: string;
+}, dockedSide: string, posKey: string, sizeKey: string): number[];

package/dist/runtime/helpers/getPinnedEdgesForCollapsedFrames.js

@@ -0,0 +1,18 @@
+export function getPinnedEdgesForCollapsedFrames(win, frame, dockedSide, posKey, sizeKey) {
+  const pinnedEdgeCoordinates = [];
+  const isHorizontal = dockedSide === "left" || dockedSide === "right";
+  for (const other of Object.values(win.frames)) {
+    if (frame.id === other.id || !other.collapsed) continue;
+    const otherIsHorizontal = other.docked === "left" || other.docked === "right";
+    if (isHorizontal === otherIsHorizontal) {
+      if (other.docked === "left" || other.docked === "top") {
+        const edge = other[posKey] + other[sizeKey];
+        pinnedEdgeCoordinates.push(edge);
+      } else {
+        const edge = other[posKey];
+        pinnedEdgeCoordinates.push(edge);
+      }
+    }
+  }
+  return pinnedEdgeCoordinates;
+}

package/dist/runtime/helpers/getShapeRectCss.d.ts

@@ -0,0 +1,7 @@
+import type { BaseRect } from "../types/index.js";
+export declare function getShapeRectCss(obj: BaseRect, pad?: string): {
+    x: string;
+    y: string;
+    width: string;
+    height: string;
+};

package/dist/runtime/helpers/{getShapeSquareCss.js → getShapeRectCss.js}

@@ -1,5 +1,5 @@
 import { settings } from "../settings.js";
-export function getShapeSquareCss(obj, pad) {
+export function getShapeRectCss(obj, pad) {
   const unscale = settings.maxInt / 100;
   const css = {
     x: `${obj.x / unscale}%`,

package/dist/runtime/helpers/index.d.ts

@@ -1,3 +1,4 @@
+export { clampNumber } from "@alanscodelog/utils/clampNumber";
 export { addPointsToIntersection } from "./addPointsToIntersection.js";
 export { assertEdgeSorted } from "./assertEdgeSorted.js";
 export { assertItemIn } from "./assertItemIn.js";
@@ -6,7 +7,6 @@ export { assertLayoutHasActiveWindow } from "./assertLayoutHasActiveWindow.js";
 export { assertValidWinAndFrame } from "./assertValidWinAndFrame.js";
 export { assertValidWinAndFrameIds } from "./assertValidWinAndFrameIds.js";
 export { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js";
-export { clampNumber } from "./clampNumber.js";
 export { cloneFrame } from "./cloneFrame.js";
 export { cloneFrames } from "./cloneFrames.js";
 export { containsEdge } from "./containsEdge.js";
@@ -33,7 +33,7 @@ export { getIntersections } from "./getIntersections.js";
 export { getIntersectionsCss } from "./getIntersectionsCss.js";
 export { getMoveEdgeInfo } from "./getMoveEdgeInfo.js";
 export { getResizeLimit } from "./getResizeLimit.js";
-export { getShapeSquareCss } from "./getShapeSquareCss.js";
+export { getShapeRectCss } from "./getShapeRectCss.js";
 export { getSideTouching } from "./getSideTouching.js";
 export { getVisualEdgeCss } from "./getVisualEdgeCss.js";
 export { getVisualEdges } from "./getVisualEdges.js";
@@ -52,7 +52,7 @@ export { isWindowEdge } from "./isWindowEdge.js";
 export { isWindowEdgePoint } from "./isWindowEdgePoint.js";
 export { moveEdge } from "./moveEdge.js";
 export { numberToScaledPercent } from "./numberToScaledPercent.js";
-export { numberToScaledSize } from "./numberToScaledSize.js";
+export { pxSizeToScaledSize } from "./pxSizeToScaledSize.js";
 export { oppositeSide } from "./oppositeSide.js";
 export { resizeByEdge } from "./resizeByEdge.js";
 export { scaledPointToPx } from "./scaledPointToPx.js";

package/dist/runtime/helpers/index.js

@@ -1,3 +1,4 @@
+export { clampNumber } from "@alanscodelog/utils/clampNumber";
 export { addPointsToIntersection } from "./addPointsToIntersection.js";
 export { assertEdgeSorted } from "./assertEdgeSorted.js";
 export { assertItemIn } from "./assertItemIn.js";
@@ -6,7 +7,6 @@ export { assertLayoutHasActiveWindow } from "./assertLayoutHasActiveWindow.js";
 export { assertValidWinAndFrame } from "./assertValidWinAndFrame.js";
 export { assertValidWinAndFrameIds } from "./assertValidWinAndFrameIds.js";
 export { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js";
-export { clampNumber } from "./clampNumber.js";
 export { cloneFrame } from "./cloneFrame.js";
 export { cloneFrames } from "./cloneFrames.js";
 export { containsEdge } from "./containsEdge.js";
@@ -33,7 +33,7 @@ export { getIntersections } from "./getIntersections.js";
 export { getIntersectionsCss } from "./getIntersectionsCss.js";
 export { getMoveEdgeInfo } from "./getMoveEdgeInfo.js";
 export { getResizeLimit } from "./getResizeLimit.js";
-export { getShapeSquareCss } from "./getShapeSquareCss.js";
+export { getShapeRectCss } from "./getShapeRectCss.js";
 export { getSideTouching } from "./getSideTouching.js";
 export { getVisualEdgeCss } from "./getVisualEdgeCss.js";
 export { getVisualEdges } from "./getVisualEdges.js";
@@ -52,7 +52,7 @@ export { isWindowEdge } from "./isWindowEdge.js";
 export { isWindowEdgePoint } from "./isWindowEdgePoint.js";
 export { moveEdge } from "./moveEdge.js";
 export { numberToScaledPercent } from "./numberToScaledPercent.js";
-export { numberToScaledSize } from "./numberToScaledSize.js";
+export { pxSizeToScaledSize } from "./pxSizeToScaledSize.js";
 export { oppositeSide } from "./oppositeSide.js";
 export { resizeByEdge } from "./resizeByEdge.js";
 export { scaledPointToPx } from "./scaledPointToPx.js";

package/dist/runtime/helpers/moveEdge.js

@@ -3,6 +3,8 @@ import { resizeByEdge } from "./resizeByEdge.js";
 import { settings } from "../settings.js";
 export function moveEdge(touchingFrames, edge, position, margin = settings.minSizeScaled) {
   if (!edge || !touchingFrames) return;
-  const { pos, dir, distance } = getMoveEdgeInfo(touchingFrames, edge, position, margin);
+  const result = getMoveEdgeInfo(touchingFrames, edge, position, margin);
+  if (result instanceof Error) return;
+  const { pos, dir, distance } = result;
   resizeByEdge(touchingFrames, edge, dir, pos, distance);
 }

package/dist/runtime/helpers/pxSizeToScaledSize.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutWindow, PxSize, Size } from "../types/index.js";
+export declare function pxSizeToScaledSize(win: Pick<LayoutWindow, "pxWidth" | "pxHeight">, size: PxSize | number, scale?: number): Size;

package/dist/runtime/helpers/{numberToScaledSize.js → pxSizeToScaledSize.js}

@@ -1,7 +1,7 @@
 import { unreachable } from "@alanscodelog/utils/unreachable";
 import { numberToScaledPercent } from "./numberToScaledPercent.js";
 import { settings } from "../settings.js";
-export function numberToScaledSize(win, size, scale = settings.maxInt) {
+export function pxSizeToScaledSize(win, size, scale = settings.maxInt) {
   const scaledSize = {
     width: numberToScaledPercent(
       typeof size === "number" ? size : size.pxWidth,

package/dist/runtime/helpers/updateWindowSizeWithEvent.d.ts

@@ -1,2 +1,5 @@
 import type { LayoutWindow, PxPos, PxSize } from "../types/index.js";
+/**
+ * See also the experimental {@link getUpdateWindowSizeInfo} for the function that will likely replace this.
+ */
 export declare function updateWindowWithEvent(win: LayoutWindow, event: PxPos & PxSize): void;

package/dist/runtime/helpers/validateLayoutShape.d.ts

@@ -0,0 +1,5 @@
+import type { LayoutFrame } from "../types/index.js";
+/**
+ * For testing, validates the resulting layout is valid (frames do not overlap, have no gaps between them and form a rectangular area.
+ */
+export declare function validateLayoutShape(frames: Pick<LayoutFrame, "x" | "y" | "width" | "height">[]): boolean;

package/dist/runtime/helpers/validateLayoutShape.js

@@ -0,0 +1,28 @@
+export function validateLayoutShape(frames) {
+  const n = frames.length;
+  if (n === 0) return false;
+  let totalArea = 0;
+  let minX = Infinity, minY = Infinity;
+  let maxX = -Infinity, maxY = -Infinity;
+  for (const f of frames) {
+    totalArea += f.width * f.height;
+    minX = Math.min(minX, f.x);
+    minY = Math.min(minY, f.y);
+    maxX = Math.max(maxX, f.x + f.width);
+    maxY = Math.max(maxY, f.y + f.height);
+  }
+  const boundingArea = (maxX - minX) * (maxY - minY);
+  if (Math.abs(totalArea - boundingArea) > 1e-3) {
+    return false;
+  }
+  for (let i = 0; i < n; i++) {
+    for (let j = i + 1; j < n; j++) {
+      const a = frames[i];
+      const b = frames[j];
+      if (a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y) {
+        return false;
+      }
+    }
+  }
+  return true;
+}

package/dist/runtime/layout/applyFrameChanges.js

@@ -26,4 +26,10 @@ export function applyFrameChanges(win, change) {
   for (const frame of change.deleted) {
     delete win.frames[frame.id];
   }
+  if (change.window) {
+    for (const [key, value] of Object.entries(change.window)) {
+      ;
+      win[key] = value;
+    }
+  }
 }

package/dist/runtime/layout/createSplitDecoShapes.js

@@ -22,6 +22,6 @@ export function createSplitDecoShapes(frames, deco, snapAmount = settings.snapPo
   }
   return [
     { type: "edge", data: edge, attrs: { class: classes.splitEdge ?? "deco-split-edge bg-red-500" } },
-    { type: "square", data: newFrame, attrs: { class: classes.splitNewFrame ?? "deco-split-new-frame bg-blue-500/50" } }
+    { type: "rect", data: newFrame, attrs: { class: classes.splitNewFrame ?? "deco-split-new-frame bg-blue-500/50" } }
   ];
 }

package/dist/runtime/layout/getFrameCollapseInfo.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutChange, LayoutWindow } from "../types/index.js";
+import type { LayoutChange, LayoutWindow, Size } from "../types/index.js";
 import { LAYOUT_ERROR } from "../types/index.js";
 import { KnownError } from "../utils/KnownError.js";
 /**
@@ -10,4 +10,7 @@ import { KnownError } from "../utils/KnownError.js";
  * the freed space to neighboring frames. The pre-collapse size is stored in
  * `collapsed` so it can be restored later.
  */
-export declare function getFrameCollapseInfo(win: LayoutWindow, frameId: string): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED>;
+export declare function getFrameCollapseInfo(win: LayoutWindow, frameId: string, { collapseSizeScaled }?: {
+    /** Override the target collapse size. If provided, the frame will collapse to this size instead of settings.collapseSizeScaled. */
+    collapseSizeScaled?: Size;
+}): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED> | KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES>;