@witchcraft/layout 0.1.3 → 0.2.0

package/dist/runtime/drag/types.d.ts

@@ -1,11 +1,16 @@
-import type { Direction, Edge, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js";
+import type { ComputedRef, InjectionKey, Ref } from "vue";
+import type { Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "../types/index.js";
 export type DragState = {
     /** The current directions in the corresponding orientations that the user is dragging in. */
     dragDirections: Record<Orientation, Direction | undefined>;
     /** The curren point (in scaled window coordinates) the user is dragging at. */
     dragPoint?: Point;
-    /** Whether the user is currently dragging. Is true during all drag events. */
-    isDragging: boolean;
+    /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
+    isDragging: boolean | "frame" | "edge";
+    /** Whether to show the moved frames while dragging. */
+    showDragging: boolean;
+    /** The frame being dragged during a frame drag. Only set when isDragging is "frame". */
+    draggingFrameId?: FrameId;
     /**
      * The edges that are currently being dragged. There are multiple edges if they drag an intersection since what's actually happening is we're just dragging the closest horizontal and vertical edges.
      */
@@ -44,12 +49,23 @@ export type DragState = {
     isDraggingFromWindowEdge: boolean;
     win: LayoutWindow;
 };
+export interface ActionDragChangeResult {
+    /** Whether the drag should update the edges. Defaults to false. */
+    updateEdges?: boolean;
+    /** Deco shapes produced by this action during this drag step. */
+    shapes: LayoutShape[];
+    /** Whether to show the moved edges while dragging. Defaults to true. */
+    showDragging?: boolean;
+}
+export type DragChangeResult = Omit<ActionDragChangeResult, "shapes">;
 /**
- * Note that the return type only affects the `move` event but is also typed as `boolean` for other events for ease of use.
+ * Called when the drag coordinates change (during any event).
+ *
+ * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
+ *
+ * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
  */
-export interface DragChangeHandler {
-    <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: () => void): boolean | undefined;
-}
+export type DragChangeHandler = <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) => ActionDragChangeResult;
 /**
  * A drag action describes when and how to handle a drag event.
  *
@@ -60,11 +76,6 @@ export interface DragChangeHandler {
 export interface IDragAction {
     /** A unique name for your action. */
     name: string;
-    /**
-     * Called when the drag coordinates change (during any event). Should return true to allow the edges to be moved, or false to prevent it.
-     *
-     * Can be used to save some context/info to later apply safely during onDragApply.
-     */
     onDragChange: DragChangeHandler;
     /**
      *
@@ -88,5 +99,63 @@ export interface IDragAction {
      *
      * You should reset your state here.
      */
-    cancel(): void;
+    cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
+    /**
+     * Plugins should implement some basic debug logs by calling {@link DragActionHandler.debugState } at least before and after applying actions in onDragApply. Debug can be a string because it can be an object key to filter on (see the debugState function).
+     *
+     *
+     * Calls look like this usually, where this.state is the plugin state:
+     * ```ts
+     * DragActionHandler.debugState(this.name, "before", state, this.state, this.debug)
+     * ```
+     */
+    debug: boolean | string;
+    /**
+     * The action handler will call this regardless of whether the action is active or not.
+     *
+     * Can be used by actions to return display hints.
+     *
+     * Actions should keep the state of the hints locally and update them in canHandlerRequest/onDrag*, etc. and only use this to return the state of the actions, not update them as that could become expensive.
+     */
+    getTextHints(type: "start" | "move" | "end"): {
+        /** Hint texts to display regarding the action state/usage. Undefined means no hint. */
+        actions?: string[];
+        /** Error texts/hints to display when the action produces an error. */
+        errors?: string[];
+    };
+}
+export type EdgeDragStartData = {
+    edge?: Edge;
+    intersection?: IntersectionEntry;
+};
+export type FrameDragStartData = {
+    frameId: FrameId;
+};
+export type DragStartFn = {
+    (e: PointerEvent, type: "edge", data: EdgeDragStartData): void;
+    (e: PointerEvent, type: "frame", data: FrameDragStartData): void;
+};
+export interface UseFramesContext {
+    dragStart: DragStartFn;
+    dragMove: (e: PointerEvent) => void;
+    dragEnd: (e?: PointerEvent, options?: {
+        apply?: boolean;
+    }) => void;
+    cancel: () => void;
+    dragDirections: Ref<Record<Orientation, Direction | undefined>>;
+    dragPoint: Ref<Point | undefined>;
+    isDragging: Ref<false | "frame" | "edge">;
+    draggingEdges: Ref<Edge[]>;
+    draggingIntersection: Ref<IntersectionEntry | undefined>;
+    visualEdges: Ref<Edge[]>;
+    touchingFrames: Ref<Record<string, LayoutFrame>[]>;
+    touchingFramesArrays: Ref<LayoutFrame[][]>;
+    frames: ComputedRef<Record<string, LayoutFrame>>;
+    dragHoveredFrame: ComputedRef<LayoutFrame | undefined>;
+    intersections: ComputedRef<IntersectionEntry[]>;
+    isDraggingFromWindowEdge: Ref<boolean>;
+    forceRecalculateEdges: () => void;
+    state: ComputedRef<DragState>;
+    frameDragFrameId: Ref<FrameId | undefined>;
 }
+export declare const dragContextInjectionKey: InjectionKey<UseFramesContext>;

package/dist/runtime/drag/types.js

@@ -0,0 +1 @@
+export const dragContextInjectionKey = Symbol("dragContext");

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

@@ -0,0 +1,12 @@
+/**
+ * Get the clip-path polygon for a zone's side. Ends the shape at a 45° angle.
+ *
+ * e.g. for a right zone, it looks like it's cutting the top and bottom left corners.
+ *
+ * Accepts scaled coordinates.
+ */
+import type { DragZone } from "../types/index.js";
+export declare function createZoneSideClipPath(zone: DragZone, { frameEdgePx, windowEdgePx }: {
+    frameEdgePx: number;
+    windowEdgePx: number;
+}): string | undefined;

package/dist/runtime/helpers/createZoneSideClipPath.js

@@ -0,0 +1,17 @@
+export function createZoneSideClipPath(zone, { frameEdgePx, windowEdgePx }) {
+  const side = zone.side;
+  const thicknessPx = zone.type === "window" ? windowEdgePx : frameEdgePx;
+  const pxLength = zone.side === "center" ? 0 : zone.side === "right" || zone.side === "left" ? zone.pxHeight : zone.pxWidth;
+  if (side === "center") return void 0;
+  const t = thicknessPx;
+  const l = pxLength;
+  if (side === "bottom")
+    return `polygon(${t}px 0px, ${l - t}px 0px, ${l}px ${t}px, 0px ${t}px)`;
+  if (side === "left")
+    return `polygon(0px 0px, ${t}px ${t}px, ${t}px ${l - t}px, 0px ${l}px)`;
+  if (side === "top")
+    return `polygon(0px 0px, ${t}px ${t}px, ${l - t}px ${t}px, ${l}px 0px)`;
+  if (side === "right")
+    return `polygon(${t}px 0px, 0px ${t}px, 0px ${l - t}px, ${t}px ${l}px)`;
+  return void 0;
+}

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

@@ -1,2 +1,4 @@
 import type { Edge, Orientation } from "../types/index.js";
-export declare function doEdgesOverlap(edgeA: Edge, edgeB: Edge, dir?: Orientation): boolean;
+export declare function doEdgesOverlap(edgeA: Edge, edgeB: Edge, dir?: Orientation, 
+/** If you pass inclusive true it will also match edges that start where the other edge ends or vice versa. */
+inclusive?: boolean): boolean;

package/dist/runtime/helpers/doEdgesOverlap.js

@@ -1,22 +1,22 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
 import { inRange } from "./inRange.js";
 import { isEdgeParallel } from "./isEdgeParallel.js";
-export function doEdgesOverlap(edgeA, edgeB, dir) {
+export function doEdgesOverlap(edgeA, edgeB, dir, inclusive = false) {
   dir ??= getEdgeOrientation(edgeA);
   if (!isEdgeParallel(edgeA, edgeB)) return false;
   if (dir === "horizontal") {
     if (edgeA.startY !== edgeB.startY) return false;
     const leftMost = edgeA.startX <= edgeB.startX ? edgeA : edgeB;
     const rightMost = edgeB === leftMost ? edgeA : edgeB;
-    const startOverlaps = inRange(leftMost.endX, rightMost.startX, rightMost.endX);
-    const endOverlaps = inRange(rightMost.startX, leftMost.startX, leftMost.endX);
+    const startOverlaps = inRange(leftMost.endX, rightMost.startX, rightMost.endX, inclusive);
+    const endOverlaps = inRange(rightMost.startX, leftMost.startX, leftMost.endX, inclusive);
     return startOverlaps || endOverlaps;
   } else {
     if (edgeA.startX !== edgeB.startX) return false;
     const topMost = edgeA.startY <= edgeB.startY ? edgeA : edgeB;
     const bottomMost = edgeB === topMost ? edgeA : edgeB;
-    const startOverlaps = inRange(topMost.endY, bottomMost.startY, bottomMost.endY);
-    const endOverlaps = inRange(bottomMost.startY, topMost.startY, topMost.endY);
+    const startOverlaps = inRange(topMost.endY, bottomMost.startY, bottomMost.endY, inclusive);
+    const endOverlaps = inRange(bottomMost.startY, topMost.startY, topMost.endY, inclusive);
     return startOverlaps || endOverlaps;
   }
 }

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

@@ -0,0 +1,19 @@
+import type { LayoutWindow } from "../types/index.js";
+/**
+ * Compute the inner boundaries of a docked region by looking at already docked frames.
+ *
+ * For example, if A, B, and C are docked, this returns the area of C.
+ * ┌─────────┐
+ * │A*       │
+ * ├────┬────┤
+ * │B*  │C   │
+ * ├────┴────┤
+ * │D*       │
+ * └─────────┘
+ */
+export declare function getDockBoundaries(win: LayoutWindow): {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};

package/dist/runtime/helpers/getDockBoundaries.js

@@ -0,0 +1,14 @@
+import { settings } from "../settings.js";
+export function getDockBoundaries(win) {
+  let minX = 0;
+  let maxX = settings.maxInt;
+  let minY = 0;
+  let maxY = settings.maxInt;
+  for (const f of Object.values(win.frames)) {
+    if (f.docked === "left") minX = Math.max(minX, f.x + f.width);
+    if (f.docked === "right") maxX = Math.min(maxX, f.x);
+    if (f.docked === "top") minY = Math.max(minY, f.y + f.height);
+    if (f.docked === "bottom") maxY = Math.min(maxY, f.y);
+  }
+  return { minX, maxX, minY, maxY };
+}

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

@@ -0,0 +1,2 @@
+import type { Edge } from "../types/index.js";
+export declare function getEdgeLength(edge: Edge): number;

package/dist/runtime/helpers/getEdgeLength.js

@@ -0,0 +1,5 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+export function getEdgeLength(edge) {
+  const orientation = getEdgeOrientation(edge);
+  return orientation === "horizontal" ? Math.abs(edge.endX - edge.startX) : Math.abs(edge.endY - edge.startY);
+}

package/dist/runtime/helpers/getIntersections.js

@@ -4,7 +4,7 @@ import { addPointsToIntersection } from "./addPointsToIntersection.js";
 import { edgeToPoints } from "./edgeToPoints.js";
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
 import { inRange } from "./inRange.js";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function getIntersections(visualEdges) {
   const intersections = {
     // x: {y: count}
@@ -13,7 +13,7 @@ export function getIntersections(visualEdges) {
     addPointsToIntersection(intersections, Object.values(edgeToPoints(edge)));
   }
   const points = [];
-  const maxInt = getMaxInt();
+  const maxInt = settings.maxInt;
   for (const x of keys(intersections)) {
     for (const y of keys(intersections[x])) {
       castType(x);

package/dist/runtime/helpers/getIntersectionsCss.js

@@ -1,10 +1,10 @@
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function getIntersectionsCss(entries, {
   intersectionWidth = `var(--layoutIntersectionWidth, 8px)`,
   /** How much to shift the intersections by when it's not on a four corner intersection. Otherwise it tends to look ugly because it overlaps one of the frame edges, this shifts it away from it. */
   shiftAmount = `var(--layoutIntersectionShiftAmount, 2px)`
 } = {}) {
-  const unscale = getMaxInt() / 100;
+  const unscale = settings.maxInt / 100;
   return entries.map((entry) => {
     const point = entry.point;
     const css = {

package/dist/runtime/helpers/getMoveEdgeInfo.js

@@ -1,8 +1,8 @@
 import { clampNumber } from "./clampNumber.js";
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
 import { getResizeLimit } from "./getResizeLimit.js";
-import { getMarginSize } from "../settings.js";
-export function getMoveEdgeInfo(touchingFrames, edge, position, margin = getMarginSize(), clamp = true) {
+import { settings } from "../settings.js";
+export function getMoveEdgeInfo(touchingFrames, edge, position, margin = settings.minSizeScaled, clamp = true) {
   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/getResizeLimit.js

@@ -1,6 +1,6 @@
 import { castType } from "@alanscodelog/utils/castType";
 import { keys } from "@alanscodelog/utils/keys";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function getResizeLimit(edge, touchingFrames, dir, amount, margin) {
   const limits = dir === "horizontal" ? { left: -Infinity, right: Infinity } : dir === "vertical" ? { up: -Infinity, down: Infinity } : { [dir]: dir === "up" || dir === "left" ? -Infinity : Infinity };
   if (amount === 0) {
@@ -31,7 +31,7 @@ export function getResizeLimit(edge, touchingFrames, dir, amount, margin) {
   }
   for (const key of keys(limits)) {
     if (limits[key] === -Infinity) limits[key] = 0;
-    if (limits[key] === Infinity) limits[key] = getMaxInt();
+    if (limits[key] === Infinity) limits[key] = settings.maxInt;
     limits[key] += dir === "left" || dir === "up" ? margin : -margin;
   }
   if (dir === "horizontal" || dir === "vertical") return limits;

package/dist/runtime/helpers/getShapeSquareCss.js

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

package/dist/runtime/helpers/getVisualEdgeCss.js

@@ -1,5 +1,5 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function getVisualEdgeCss(edge, {
   translate = true,
   edgeWidth = `var(--layoutEdgeWidth, 2px)`,
@@ -7,7 +7,7 @@ export function getVisualEdgeCss(edge, {
   padShortAxis
 } = {}) {
   const dir = getEdgeOrientation(edge);
-  const unscale = getMaxInt() / 100;
+  const unscale = settings.maxInt / 100;
   const w = (edge.endX - edge.startX) / unscale;
   const h = (edge.endY - edge.startY) / unscale;
   const width = dir === "vertical" ? edgeWidth : `${w}%`;

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

@@ -1,6 +1,6 @@
 import type { Edge, LayoutFrame, Orientation } from "../types/index.js";
 /**
- * Returns the "visual" edges that can be dragged.
+ * Returns the "visual" edges that can be dragged (so will not return edges for collapsed frames without some area).
  *
  * Visual edges are a combination of all edges shared by frames that must be moved together.
  *

package/dist/runtime/helpers/getVisualEdges.js

@@ -8,7 +8,7 @@ import { frameToPoints } from "./frameToPoints.js";
 import { inRange } from "./inRange.js";
 import { splitEdge } from "./splitEdge.js";
 import { unionEdges } from "./unionEdges.js";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function getVisualEdges(frames, {
   separateByDir = false,
   includeWindowEdges = false
@@ -18,8 +18,9 @@ export function getVisualEdges(frames, {
   const intersections = {
     // x: {y: count}
   };
-  const max = getMaxInt();
+  const max = settings.maxInt;
   for (const frame of frames) {
+    if (frame.collapsed && (frame.width === 0 || frame.height === 0)) continue;
     const frameEdges = frameToEdges(frame);
     addPointsToIntersection(intersections, Object.values(frameToPoints(frame)));
     secondlabel: for (const edge of Object.values(frameEdges)) {
@@ -33,7 +34,7 @@ export function getVisualEdges(frames, {
         if (containsEdge(edge, e, dir)) {
           continue secondlabel;
         }
-        if (doEdgesOverlap(e, edge, dir)) {
+        if (doEdgesOverlap(e, edge, dir, true)) {
           indexes.push(i);
           edges.push(e);
         }

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

@@ -13,6 +13,7 @@ export { containsEdge } from "./containsEdge.js";
 export { convertLayoutWindowToWorkspace } from "./convertLayoutWindowToWorkspace.js";
 export { copySize } from "./copySize.js";
 export { createEdge } from "./createEdge.js";
+export { createZoneSideClipPath } from "./createZoneSideClipPath.js";
 export { dirToOrientation } from "./dirToOrientation.js";
 export { dirToSide } from "./dirToSide.js";
 export { doEdgesOverlap } from "./doEdgesOverlap.js";
@@ -22,6 +23,7 @@ export { findDraggableEdge } from "./findDraggableEdge.js";
 export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js";
 export { frameToEdges } from "./frameToEdges.js";
 export { frameToPoints } from "./frameToPoints.js";
+export { getEdgeLength } from "./getEdgeLength.js";
 export { getEdgeOrientation } from "./getEdgeOrientation.js";
 export { getEdgeSharedDirection } from "./getEdgeSharedDirection.js";
 export { getEdgeSide } from "./getEdgeSide.js";
@@ -53,6 +55,7 @@ export { numberToScaledPercent } from "./numberToScaledPercent.js";
 export { numberToScaledSize } from "./numberToScaledSize.js";
 export { oppositeSide } from "./oppositeSide.js";
 export { resizeByEdge } from "./resizeByEdge.js";
+export { scaledPointToPx } from "./scaledPointToPx.js";
 export { sideToDirection } from "./sideToDirection.js";
 export { sideToOrientation } from "./sideToOrientation.js";
 export { splitEdge } from "./splitEdge.js";
@@ -60,3 +63,4 @@ export { toCoord } from "./toCoord.js";
 export { toId } from "./toId.js";
 export { toWindowCoord } from "./toWindowCoord.js";
 export { unionEdges } from "./unionEdges.js";
+export { updateWindowWithEvent } from "./updateWindowSizeWithEvent.js";

package/dist/runtime/helpers/index.js

@@ -13,6 +13,7 @@ export { containsEdge } from "./containsEdge.js";
 export { convertLayoutWindowToWorkspace } from "./convertLayoutWindowToWorkspace.js";
 export { copySize } from "./copySize.js";
 export { createEdge } from "./createEdge.js";
+export { createZoneSideClipPath } from "./createZoneSideClipPath.js";
 export { dirToOrientation } from "./dirToOrientation.js";
 export { dirToSide } from "./dirToSide.js";
 export { doEdgesOverlap } from "./doEdgesOverlap.js";
@@ -22,6 +23,7 @@ export { findDraggableEdge } from "./findDraggableEdge.js";
 export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js";
 export { frameToEdges } from "./frameToEdges.js";
 export { frameToPoints } from "./frameToPoints.js";
+export { getEdgeLength } from "./getEdgeLength.js";
 export { getEdgeOrientation } from "./getEdgeOrientation.js";
 export { getEdgeSharedDirection } from "./getEdgeSharedDirection.js";
 export { getEdgeSide } from "./getEdgeSide.js";
@@ -53,6 +55,7 @@ export { numberToScaledPercent } from "./numberToScaledPercent.js";
 export { numberToScaledSize } from "./numberToScaledSize.js";
 export { oppositeSide } from "./oppositeSide.js";
 export { resizeByEdge } from "./resizeByEdge.js";
+export { scaledPointToPx } from "./scaledPointToPx.js";
 export { sideToDirection } from "./sideToDirection.js";
 export { sideToOrientation } from "./sideToOrientation.js";
 export { splitEdge } from "./splitEdge.js";
@@ -60,3 +63,4 @@ export { toCoord } from "./toCoord.js";
 export { toId } from "./toId.js";
 export { toWindowCoord } from "./toWindowCoord.js";
 export { unionEdges } from "./unionEdges.js";
+export { updateWindowWithEvent } from "./updateWindowSizeWithEvent.js";

package/dist/runtime/helpers/isEdgeEqual.js

@@ -1,11 +1,9 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
-import { isEdgeParallel } from "./isEdgeParallel.js";
 export function isEdgeEqual(edgeA, edgeB, orientation) {
   orientation ??= getEdgeOrientation(edgeA);
-  if (!isEdgeParallel(edgeA, edgeB)) return false;
   if (orientation === "horizontal") {
-    return edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY;
+    return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX && edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY;
   } else {
-    return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX;
+    return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX && edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY;
   }
 }

package/dist/runtime/helpers/isWindowEdge.js

@@ -1,7 +1,7 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function isWindowEdge(edge, edgeDirection) {
   edgeDirection ??= getEdgeOrientation(edge);
-  const max = getMaxInt();
+  const max = settings.maxInt;
   return edgeDirection === "vertical" && (edge.startX === 0 || edge.startX === max) || edgeDirection === "horizontal" && (edge.startY === 0 || edge.startY === max);
 }

package/dist/runtime/helpers/isWindowEdgePoint.js

@@ -1,5 +1,5 @@
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function isWindowEdgePoint(point) {
-  const max = getMaxInt();
+  const max = settings.maxInt;
   return point.x === 0 || point.x === max || (point.y === 0 || point.y === max);
 }

package/dist/runtime/helpers/moveEdge.js

@@ -1,7 +1,7 @@
 import { getMoveEdgeInfo } from "./getMoveEdgeInfo.js";
 import { resizeByEdge } from "./resizeByEdge.js";
-import { getMarginSize } from "../settings.js";
-export function moveEdge(touchingFrames, edge, position, margin = getMarginSize()) {
+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);
   resizeByEdge(touchingFrames, edge, dir, pos, distance);

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

@@ -1,5 +1,5 @@
 /**
- * Given a number (e.g. the x coordinate in px), and the max value it could be (e.g. the max width of it's container in px), returns it's position as a scaled percentage.
+ * Given a number (e.g. the x coordinate in px), and the max value it could be (e.g. the max width of it's container in px), returns it's position as a rounded scaled percentage.
  *
  * ```
  * -----------

package/dist/runtime/helpers/numberToScaledPercent.js

@@ -1,5 +1,5 @@
 import { snapNumber } from "@alanscodelog/utils/snapNumber";
-import { getMaxInt } from "../settings.js";
-export function numberToScaledPercent(num, max, scale = getMaxInt()) {
+import { settings } from "../settings.js";
+export function numberToScaledPercent(num, max, scale = settings.maxInt) {
   return snapNumber(num / max * scale, 1);
 }

package/dist/runtime/helpers/numberToScaledSize.js

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

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

@@ -0,0 +1,7 @@
+import type { LayoutFrame } from "../types/index.js";
+/**
+ * Rotates the list of frames given by 90, 180, or 270 degrees around the 50% center.
+ *
+ * Used mainly in testing to catch issues with incorrect handling of the same scenario in different orientations.
+ */
+export declare function rotateLayout(frames: LayoutFrame[], rotation: 90 | 180 | 270): void;

package/dist/runtime/helpers/rotateFrames.js

@@ -0,0 +1,36 @@
+import { settings } from "../settings.js";
+export function rotateLayout(frames, rotation) {
+  const sides = ["top", "right", "bottom", "left"];
+  const shift = rotation / 90;
+  for (const frame of frames) {
+    const { x, y, width, height, docked } = frame;
+    if (docked) {
+      const currentIndex = sides.indexOf(docked);
+      if (currentIndex !== -1) {
+        frame.docked = sides[(currentIndex + shift) % 4];
+      }
+    }
+    switch (rotation) {
+      case 90:
+        frame.x = settings.maxInt - (y + height);
+        frame.y = x;
+        frame.width = height;
+        frame.height = width;
+        break;
+      case 180:
+        frame.x = settings.maxInt - (x + width);
+        frame.y = settings.maxInt - (y + height);
+        frame.width = width;
+        frame.height = height;
+        break;
+      case 270:
+        frame.x = y;
+        frame.y = settings.maxInt - (x + width);
+        frame.width = height;
+        frame.height = width;
+        break;
+      default:
+        throw new Error(`Unknown rotation ${rotation}`);
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+/** Convert a scaled point to pixel coords for a given window. */
+export declare function scaledPointToPx(point: {
+    x: number;
+    y: number;
+}, win: {
+    pxWidth: number;
+    pxHeight: number;
+    pxX: number;
+    pxY: number;
+}, scale?: number): {
+    x: number;
+    y: number;
+};

package/dist/runtime/helpers/scaledPointToPx.js

@@ -0,0 +1,7 @@
+import { settings } from "../settings.js";
+export function scaledPointToPx(point, win, scale = settings.maxInt) {
+  return {
+    x: point.x / scale * win.pxWidth + win.pxX,
+    y: point.y / scale * win.pxHeight + win.pxY
+  };
+}

package/dist/runtime/helpers/toWindowCoord.js

@@ -1,7 +1,7 @@
 import { snapNumber } from "@alanscodelog/utils/snapNumber";
 import { numberToScaledPercent } from "./numberToScaledPercent.js";
-import { getSnapPoint } from "../settings.js";
-export function toWindowCoord(win, e, snapAmount = getSnapPoint()) {
+import { settings } from "../settings.js";
+export function toWindowCoord(win, e, snapAmount = settings.snapPointScaled) {
   const x = numberToScaledPercent(e.clientX - win.pxX, win.pxWidth);
   const y = numberToScaledPercent(e.clientY - win.pxY, win.pxHeight);
   if (snapAmount) {

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

@@ -0,0 +1,10 @@
+import { type LayoutChange, type LayoutWindow } from "../types/index.js";
+/**
+ *
+ * Most actions that change the layout will return a LayoutChange object without mutating the window.
+ *
+ * This function applies the changes returned by them.
+ *
+ * Mutates the frame positions in the window given.
+ */
+export declare function applyFrameChanges(win: LayoutWindow, change: LayoutChange<any>): void;

package/dist/runtime/layout/applyFrameChanges.js

@@ -0,0 +1,29 @@
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function applyFrameChanges(win, change) {
+  for (const frame of change.modified) {
+    const target = win.frames[frame.id];
+    if (!target) {
+      throw new KnownError(LAYOUT_ERROR.INVALID_ID, `Frame ${frame.id} not found in window ${win.id}`, { id: frame.id });
+    }
+    if ("docked" in frame) {
+      target.docked = frame.docked;
+    }
+    if ("collapsed" in frame) {
+      target.collapsed = frame.collapsed;
+    }
+    target.x = frame.x;
+    target.y = frame.y;
+    target.width = frame.width;
+    target.height = frame.height;
+  }
+  for (const frame of change.created) {
+    if (win.frames[frame.id]) {
+      throw new KnownError(LAYOUT_ERROR.ID_ALREADY_EXISTS, `Frame ${frame.id} already exists in window ${win.id}`, { id: frame.id });
+    }
+    win.frames[frame.id] = frame;
+  }
+  for (const frame of change.deleted) {
+    delete win.frames[frame.id];
+  }
+}

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

@@ -1,2 +1,7 @@
 import type { Direction, LayoutFrame, Point, Size, SplitDeco } from "../types/index.js";
-export declare function createSplitDecoFromDrag(frames: Record<string, LayoutFrame>, frame: LayoutFrame, dragDirection: Direction, dragPoint: Point, snapAmount?: Point, minSize?: Size): SplitDeco;
+export declare function createSplitDecoFromDrag(frames: Record<string, LayoutFrame>, frame: LayoutFrame, dragDirection: Direction, dragPoint: Point, snapAmount?: Point, minSize?: Size, classes?: {
+    /** @default "deco-split-edge bg-red-500" */
+    splitEdge?: string;
+    /** @default "deco-split-new-frame bg-blue-500/50" */
+    splitNewFrame?: string;
+}): SplitDeco;