@witchcraft/layout 1.0.0

package/src/runtime/helpers/getResizeLimit.ts

@@ -0,0 +1,60 @@
+import { castType } from "@alanscodelog/utils/castType"
+import { keys } from "@alanscodelog/utils/keys"
+
+import { getMaxInt } from "../settings.js"
+import type {
+	Direction,
+	Edge, ExtendedDirection, LayoutFrame
+} from "../types/index.js"
+
+export function getResizeLimit<TDir extends ExtendedDirection>(
+	edge: Edge,
+	touchingFrames: LayoutFrame[],
+	dir: TDir,
+	amount: number,
+	margin: number
+): TDir extends "horizontal" ? Record<"left" | "right", number> : TDir extends "vertical" ? Record<"up" | "down", number> : number {
+	const limits: Partial<Record<Direction, number>> = dir === "horizontal"
+		? { left: -Infinity, right: Infinity }
+		: dir === "vertical"
+			? { up: -Infinity, down: Infinity }
+			: { [dir]: dir === "up" || dir === "left" ? -Infinity : Infinity }
+
+	if (amount === 0) {
+		throw new Error("Amount cannot be zero.")
+	}
+	castType<ExtendedDirection>(dir)
+
+	for (const frame of touchingFrames) {
+		if (dir === "vertical" || dir === "up") {
+			if (frame.y < edge.startY) {
+				limits.up = Math.max(limits[dir]!, frame.y)
+			}
+		}
+		if (dir === "vertical" || dir === "down") {
+			if (frame.y >= edge.startY) {
+				limits.down = Math.min(limits[dir]!, frame.y + frame.height)
+			}
+		}
+		if (dir === "horizontal" || dir === "left") {
+			if (frame.x < edge.startX) {
+				limits.left = Math.max(limits[dir]!, frame.x)
+			}
+		}
+		if (dir === "horizontal" || dir === "right") {
+			if (frame.x >= edge.startX) {
+				limits.right = Math.min(limits[dir]!, frame.x + frame.width)
+			}
+		}
+	}
+
+	for (const key of keys(limits)) {
+		// this happens when we drag window edges
+		if (limits[key] === -Infinity) limits[key] = 0
+		if (limits[key] === Infinity) limits[key] = getMaxInt()
+
+		limits[key]! += (dir === "left" || dir === "up" ? margin : -margin)
+	}
+	if (dir === "horizontal" || dir === "vertical") return limits as any
+	return limits[dir] as any
+}

package/src/runtime/helpers/getShapeSquareCss.ts

@@ -0,0 +1,28 @@
+import { getMaxInt } from "../settings.js"
+import type { BaseSquare } from "../types/index.js"
+
+export function getShapeSquareCss(
+	obj: BaseSquare,
+	pad?: string
+): {
+	x: string
+	y: string
+	width: string
+	height: string
+} {
+	const unscale = getMaxInt() / 100
+	const css = {
+		x: `${obj.x / unscale}%`,
+		y: `${obj.y / unscale}%`,
+		width: `${obj.width / unscale}%`,
+		height: `${obj.height / unscale}%`
+	}
+	if (pad) {
+		css.width = `calc(${css.width} - (${pad}*2))`
+		css.height = `calc(${css.height}  - (${pad}*2))`
+		css.x = `calc(${css.x} + (${pad}))`
+		css.y = `calc(${css.y} + (${pad}))`
+	}
+
+	return css
+}

package/src/runtime/helpers/getSideTouching.ts

@@ -0,0 +1,9 @@
+import type { EdgeSide, LayoutFrame } from "../types/index.js"
+
+export function getSideTouching(frameA: LayoutFrame, frameB: LayoutFrame): EdgeSide | undefined {
+	if (frameA.x + frameA.width === frameB.x) return "right"
+	if (frameA.x === frameB.x + frameB.width) return "left"
+	if (frameA.y + frameA.height === frameB.y) return "bottom"
+	if (frameA.y === frameB.y + frameB.height) return "top"
+	return undefined
+}

package/src/runtime/helpers/getVisualEdgeCss.ts

@@ -0,0 +1,53 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+
+import { getMaxInt } from "../settings.js"
+import type {
+	Edge,
+	EdgeCss } from "../types/index.js"
+
+export function getVisualEdgeCss(
+	edge: Edge,
+	{
+		translate = true,
+		edgeWidth = `var(--layoutEdgeWidth, 2px)`,
+		padLongAxis,
+		padShortAxis
+	}: {
+		translate?: boolean
+		edgeWidth?: string
+		padLongAxis?: string
+		padShortAxis?: string
+	} = {}
+): EdgeCss {
+	const dir = getEdgeOrientation(edge)
+	const unscale = getMaxInt() / 100
+	const w = (edge.endX - edge.startX) / unscale
+	const h = (edge.endY - edge.startY) / unscale
+	const width = dir === "vertical" ? edgeWidth : `${w}%`
+	const height = dir === "horizontal" ? edgeWidth : `${h}%`
+
+	const x = `${edge.startX / unscale}%`
+	const y = `${edge.startY / unscale}%`
+
+	const xTranslate = dir === "vertical" ? "-50%" : "0"
+	const yTranslate = dir === "horizontal" ? "-50%" : "0"
+
+	const translation = translate ? `translate(${xTranslate}, ${yTranslate})` : ""
+	const css = {
+		x, y, width, height, translate: translation
+	}
+
+	if (padLongAxis) {
+		const axis = dir === "vertical" ? "height" : "width"
+		const coord = dir === "vertical" ? "y" : "x"
+		css[axis] = `calc(${css[axis]} - (${padLongAxis}*2))`
+		css[coord] = `calc(${css[coord]} + (${padLongAxis}))`
+	}
+	if (padShortAxis) {
+		const axis = dir === "vertical" ? "width" : "height"
+		const coord = dir === "vertical" ? "x" : "y"
+		css[axis] = `calc(${css[axis]} - (${padShortAxis}*2))`
+		css[coord] = `calc(${css[coord]} + (${padShortAxis}))`
+	}
+	return css
+}

package/src/runtime/helpers/getVisualEdges.ts

@@ -0,0 +1,155 @@
+import { multisplice, MULTISPLICE_ITEM } from "@alanscodelog/utils/multisplice"
+
+import { addPointsToIntersection } from "./addPointsToIntersection.js"
+import { assertEdgeSorted } from "./assertEdgeSorted.js"
+import { containsEdge } from "./containsEdge.js"
+import { doEdgesOverlap } from "./doEdgesOverlap.js"
+import { frameToEdges } from "./frameToEdges.js"
+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 type {
+	Edge,
+	Intersections,
+	LayoutFrame, Orientation
+} from "../types/index.js"
+
+/**
+ * Returns the "visual" edges that can be dragged.
+ *
+ * Visual edges are a combination of all edges shared by frames that must be moved together.
+ *
+ * For example, if we have two frames A and B, they share the center edge, and the function would return this single edge (unless `includeWindowEdges` is true).
+ *
+ * ```
+ * ┌──┰──┐
+ * │A ┃B │ returns   ┃
+ * └──┸──┘
+ * ```
+ * Or in this example, we would get two edges:
+ * - The one shared by A, B, and C, because no frame edge sharing this edge can without also moving the other frames touching the edge.
+ * - The one shared by A and B.
+ *```
+ * ┌──┰──┐
+ * │A ┃C │              ┃
+ * ┝━━┫  │ returns   ━━ ┃
+ * │B ┃  │              ┃
+ * └──┸──┘
+ * ```
+ *
+ * And here, we get four edges, because all four can be moved on their own (moving the edge would only affect the two frames sharing that edge).
+ *```
+ * ┌──┰──┐
+ * │A ┃C │             ┃
+ * ┝━━╋━━┥ returns   ━━ ━━
+ * │B ┃D │             ┃
+ * └──┸──┘
+ * ```
+ *
+ */
+export function getVisualEdges<T extends boolean = false>(
+	frames: LayoutFrame[],
+	{
+		separateByDir = false as T,
+		includeWindowEdges = false
+	}: {
+		/**
+		 * Whether the result is separated into horizontal/vertical edges or not.
+		 *
+		 * @default false
+		 */
+		separateByDir?: T
+		/**
+		 * Whether to include edges along the window edges.
+		 *
+		 * @default false
+		 */
+		includeWindowEdges?: boolean
+	} = {}
+): T extends true ? Record<Orientation, Edge[]> : Edge[] {
+	let extVertEdges: Edge[] = []
+	let extHorzEdges: Edge[] = []
+	const intersections: Intersections = {
+		// x: {y: count}
+	}
+	const max = getMaxInt()
+	for (const frame of frames) {
+		const frameEdges = frameToEdges(frame)
+		addPointsToIntersection(intersections, Object.values(frameToPoints(frame)))
+
+		secondlabel: for (const edge of Object.values(frameEdges)) {
+			const dir = edge === frameEdges.left || edge === frameEdges.right
+				? "vertical"
+				: "horizontal"
+
+			const startKey = dir === "vertical" ? "startX" : "startY"
+			const endKey = dir === "vertical" ? "endX" : "endY"
+			const arr = dir === "vertical" ? extVertEdges : extHorzEdges
+			const indexes = []
+			const edges = []
+			for (const [i, e] of arr.entries()) {
+				if (containsEdge(edge, e, dir)) {
+					continue secondlabel
+				}
+				if (doEdgesOverlap(e, edge, dir)) {
+					indexes.push(i)
+					edges.push(e)
+				}
+			}
+			if (indexes.length > 0) {
+				multisplice(arr, indexes, 1)
+				edges.push(edge)
+				const newEdge = unionEdges(edges, dir)
+				arr.push(newEdge)
+			} else if (includeWindowEdges || (edge[startKey] !== 0 && edge[endKey] !== max)) {
+				arr.push(edge)
+			}
+		}
+	}
+	const changesV: Record<number, Edge[]> = {}
+	for (const [i, edge] of extVertEdges.entries()) {
+		const possibleIntersections = intersections[edge.startX]
+		assertEdgeSorted(edge)
+		if (possibleIntersections) {
+			const splits = Object.keys(possibleIntersections).filter(_y => {
+				const y = Number.parseInt(_y, 10)
+				const isIntersection = possibleIntersections[_y as any as number] === 4
+				return isIntersection && inRange(y, edge.startY, edge.endY)
+			}).map(_ => Number.parseInt(_, 10))
+			if (splits.length === 0) continue
+			changesV[i] = splitEdge(extVertEdges[i], "vertical", splits)
+		}
+	}
+	extVertEdges = multisplice(
+		extVertEdges,
+		Object.keys(changesV) as any,
+		1,
+		Object.values(changesV) as any,
+		{ insert: MULTISPLICE_ITEM.MATCH_INDEX }
+	).array.flat()
+
+	const changesH: Record<number, Edge[]> = {}
+	for (const [i, edge] of extHorzEdges.entries()) {
+		const splits = Object.keys(intersections)
+			.filter(x => intersections[x as any as number][edge.startY] === 4)
+			.map(_ => Number.parseInt(_, 10))
+		if (splits.length === 0) continue
+		changesH[i] = splitEdge(extHorzEdges[i], "horizontal", splits)
+	}
+	extHorzEdges = multisplice(
+		extHorzEdges,
+		Object.keys(changesH) as any,
+		1,
+		Object.values(changesH) as any,
+		{ insert: MULTISPLICE_ITEM.MATCH_INDEX }
+	).array.flat()
+
+	if (separateByDir) {
+		return { vertical: extVertEdges, horizontal: extHorzEdges } satisfies Record<Orientation, Edge[]> as any
+	}
+
+	return extVertEdges.concat(extHorzEdges) satisfies Edge[] as any
+}

package/src/runtime/helpers/getVisualEdgesCss.ts

@@ -0,0 +1,13 @@
+import { getVisualEdgeCss } from "./getVisualEdgeCss.js"
+
+import type {
+	Edge,
+	EdgeCss
+} from "../types/index.js"
+
+export function getVisualEdgesCss(
+	edges: Edge[],
+	opts: Parameters<typeof getVisualEdgeCss>[1] = {}
+): EdgeCss[] {
+	return edges.map(edge => getVisualEdgeCss(edge, opts))
+}

package/src/runtime/helpers/getWinAndFrameById.ts

@@ -0,0 +1,28 @@
+import { getFrameConstant } from "./getFrameConstant.js"
+import { getWinByFrameUuid } from "./getWinByFrameUuid.js"
+import { getWindowConstant } from "./getWindowConstant.js"
+
+import type {
+	AnyUuid, FrameId, Layout,
+	LayoutFrame,
+	LayoutWindow, WindowId
+} from "../types/index.js"
+
+export function getWinAndFrameById<T extends boolean = false>(
+	layout: Layout,
+	/** winId can be undefined only if frameId is a uuid */
+	winId: WindowId | undefined,
+	frameId: AnyUuid | FrameId,
+	assert: T = false as T
+): T extends true ? { win: LayoutWindow, frame: LayoutFrame } : { win?: LayoutWindow, frame?: LayoutFrame } {
+	let win: LayoutWindow | undefined
+	if (winId === undefined) {
+		win = getWinByFrameUuid(layout, frameId, assert)
+	} else {
+		win = layout.windows[getWindowConstant(layout, winId, assert) as any]
+	}
+
+	const maybeFrameId = (win !== undefined ? getFrameConstant(win, frameId, assert) : undefined)
+	const frame = win?.frames[maybeFrameId as any]
+	return { win, frame } satisfies { win?: LayoutWindow, frame?: LayoutFrame } as any
+}

package/src/runtime/helpers/getWinByFrameUuid.ts

@@ -0,0 +1,19 @@
+import type { AnyUuid, Layout, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+export function getWinByFrameUuid<T extends boolean = false>(
+	layout: Layout,
+	frameId: AnyUuid,
+	assert: T = false as T
+): T extends true ? LayoutWindow : LayoutWindow | undefined {
+	for (const win of Object.values(layout.windows)) {
+		if (win.frames[frameId]) {
+			return win
+		}
+	}
+	if (assert) {
+		throw new KnownError(LAYOUT_ERROR.INVALID_ID, "Could not find window with frame with that id.", { id: frameId })
+	}
+	return undefined as any
+}

package/src/runtime/helpers/getWinById.ts

@@ -0,0 +1,12 @@
+import { getWindowConstant } from "./getWindowConstant.js"
+
+import type { Layout, LayoutWindow, WindowId } from "../types/index.js"
+
+export function getWinById<T extends boolean = false>(
+	layout: Layout,
+	winId: WindowId,
+	assert: T = false as T
+): T extends true ? LayoutWindow : LayoutWindow | undefined {
+	const winId_ = getWindowConstant(layout, winId, assert)
+	return layout.windows[winId_ as any]
+}

package/src/runtime/helpers/getWindowConstant.ts

@@ -0,0 +1,21 @@
+import { assertItemIn } from "./assertItemIn.js"
+import { assertLayoutHasActiveWindow } from "./assertLayoutHasActiveWindow.js"
+
+import type { Layout } from "../types/index.js"
+
+export function getWindowConstant<T extends boolean = false>(
+	layout: Layout,
+	constant: "ACTIVE" | string | undefined,
+	assert: T = false as T
+): T extends true ? string : string | undefined {
+	switch (constant) {
+		case "ACTIVE": {
+			if (assert) assertLayoutHasActiveWindow(layout)
+			return layout.activeWindow as any
+		}
+		default: {
+			if (assert) assertItemIn(layout.windows, constant)
+			return constant as any
+		}
+	}
+}

package/src/runtime/helpers/inRange.ts

@@ -0,0 +1,5 @@
+export function inRange(coord: number, lowerLimit: number, upperLimit: number, inclusive = true): boolean {
+	return inclusive
+		? coord >= lowerLimit && coord <= upperLimit
+		: coord > lowerLimit && coord < upperLimit
+}

package/src/runtime/helpers/index.ts

@@ -0,0 +1,64 @@
+/* Autogenerated Index */
+
+export { addPointsToIntersection } from "./addPointsToIntersection.js"
+export { assertEdgeSorted } from "./assertEdgeSorted.js"
+export { assertItemIn } from "./assertItemIn.js"
+export { assertItemNotIn } from "./assertItemNotIn.js"
+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"
+export { convertLayoutWindowToWorkspace } from "./convertLayoutWindowToWorkspace.js"
+export { copySize } from "./copySize.js"
+export { createEdge } from "./createEdge.js"
+export { dirToOrientation } from "./dirToOrientation.js"
+export { dirToSide } from "./dirToSide.js"
+export { doEdgesOverlap } from "./doEdgesOverlap.js"
+export { doesEdgeContinueEdge } from "./doesEdgeContinueEdge.js"
+export { edgeToPoints } from "./edgeToPoints.js"
+export { findDraggableEdge } from "./findDraggableEdge.js"
+export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js"
+export { frameToEdges } from "./frameToEdges.js"
+export { frameToPoints } from "./frameToPoints.js"
+export { getEdgeOrientation } from "./getEdgeOrientation.js"
+export { getEdgeSharedDirection } from "./getEdgeSharedDirection.js"
+export { getEdgeSide } from "./getEdgeSide.js"
+export { getFrameById } from "./getFrameById.js"
+export { getFrameConstant } from "./getFrameConstant.js"
+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 { getSideTouching } from "./getSideTouching.js"
+export { getVisualEdgeCss } from "./getVisualEdgeCss.js"
+export { getVisualEdges } from "./getVisualEdges.js"
+export { getVisualEdgesCss } from "./getVisualEdgesCss.js"
+export { getWinAndFrameById } from "./getWinAndFrameById.js"
+export { getWinByFrameUuid } from "./getWinByFrameUuid.js"
+export { getWinById } from "./getWinById.js"
+export { getWindowConstant } from "./getWindowConstant.js"
+export { inRange } from "./inRange.js"
+export { isEdgeEqual } from "./isEdgeEqual.js"
+export { isEdgeParallel } from "./isEdgeParallel.js"
+export { isPointEqual } from "./isPointEqual.js"
+export { isSizeAboveMin } from "./isSizeAboveMin.js"
+export { isSizeEqual } from "./isSizeEqual.js"
+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 { oppositeSide } from "./oppositeSide.js"
+export { resizeByEdge } from "./resizeByEdge.js"
+export { sideToDirection } from "./sideToDirection.js"
+export { sideToOrientation } from "./sideToOrientation.js"
+export { splitEdge } from "./splitEdge.js"
+export { toCoord } from "./toCoord.js"
+export { toId } from "./toId.js"
+export { toWindowCoord } from "./toWindowCoord.js"
+export { unionEdges } from "./unionEdges.js"

package/src/runtime/helpers/isEdgeEqual.ts

@@ -0,0 +1,14 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { isEdgeParallel } from "./isEdgeParallel.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function isEdgeEqual(edgeA: Edge, edgeB: Edge, orientation?: Orientation): boolean {
+	orientation ??= getEdgeOrientation(edgeA)
+	if (!isEdgeParallel(edgeA, edgeB)) return false
+	if (orientation === "horizontal") {
+		return edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY
+	} else {
+		return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX
+	}
+}

package/src/runtime/helpers/isEdgeParallel.ts

@@ -0,0 +1,10 @@
+import { getEdgeSharedDirection } from "./getEdgeSharedDirection.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function isEdgeParallel(edgeA: Edge, edgeB: Edge, dir?: Orientation): boolean {
+	const sharedDir = getEdgeSharedDirection(edgeA, edgeB)
+	if (dir === undefined) return sharedDir !== false
+	if (dir === sharedDir) return true
+	return false
+}

package/src/runtime/helpers/isPointEqual.ts

@@ -0,0 +1,5 @@
+import type { Point } from "../types/index.js"
+
+export function isPointEqual(pointA: Point, pointB: Point): boolean {
+	return pointA.x === pointB.x && pointA.y === pointB.y
+}

package/src/runtime/helpers/isSizeAboveMin.ts

@@ -0,0 +1,8 @@
+import type { Size } from "../types/index.js"
+
+export function isSizeAboveMin(
+	size: Size,
+	min: Size
+): boolean {
+	return size.width >= min.width && size.height >= min.height
+}

package/src/runtime/helpers/isSizeEqual.ts

@@ -0,0 +1,5 @@
+import type { Size } from "../types/index.js"
+
+export function isSizeEqual(sizeA: Size, sizeB: Size): boolean {
+	return sizeA.width === sizeB.width && sizeA.height === sizeB.height
+}

package/src/runtime/helpers/isWindowEdge.ts

@@ -0,0 +1,11 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+
+import { getMaxInt } from "../settings.js"
+import type { Edge, Orientation } from "../types/index.js"
+
+export function isWindowEdge(edge: Edge, edgeDirection?: Orientation): boolean {
+	edgeDirection ??= getEdgeOrientation(edge)
+	const max = getMaxInt()
+	return (edgeDirection === "vertical" && (edge.startX === 0 || edge.startX === max))
+		|| (edgeDirection === "horizontal" && (edge.startY === 0 || edge.startY === max))
+}

package/src/runtime/helpers/isWindowEdgePoint.ts

@@ -0,0 +1,8 @@
+import { getMaxInt } from "../settings.js"
+import type { Point } from "../types/index.js"
+
+export function isWindowEdgePoint(point: Point): boolean {
+	const max = getMaxInt()
+	return (point.x === 0 || point.x === max)
+		|| (point.y === 0 || point.y === max)
+}

package/src/runtime/helpers/moveEdge.ts

@@ -0,0 +1,21 @@
+import { getMoveEdgeInfo } from "./getMoveEdgeInfo.js"
+import { resizeByEdge } from "./resizeByEdge.js"
+
+import { getMarginSize } from "../settings.js"
+import type {
+	Edge, LayoutFrame,
+	Point,
+	Size
+} from "../types/index.js"
+
+export function moveEdge(
+	touchingFrames: LayoutFrame[] | undefined,
+	edge: Edge | undefined,
+	/** Window scaled/snaped position. See {@link toWindowCoord} */
+	position: Point,
+	margin: Size = getMarginSize()
+): void {
+	if (!edge || !touchingFrames) return
+	const { pos, dir, distance } = getMoveEdgeInfo(touchingFrames, edge, position, margin)
+	resizeByEdge(touchingFrames, edge, dir, pos, distance)
+}

package/src/runtime/helpers/numberToScaledPercent.ts

@@ -0,0 +1,19 @@
+import { snapNumber } from "@alanscodelog/utils/snapNumber"
+
+import { getMaxInt } from "../settings.js"
+
+/**
+ * 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.
+ *
+ * ```
+ * -----------
+ * |    *    |
+ * -----------
+ *      |    ^100px
+ *      ^ 50px
+ * // returns 50 / 100 * scale or 50000 (50%)
+ * ```
+ */
+export function numberToScaledPercent(num: number, max: number, scale: number = getMaxInt()): number {
+	return snapNumber((num / max) * scale, 1)
+}

package/src/runtime/helpers/numberToScaledSize.ts

@@ -0,0 +1,28 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+
+import { numberToScaledPercent } from "./numberToScaledPercent.js"
+
+import { getMaxInt } from "../settings.js"
+import type { LayoutWindow, PxSize, Size } from "../types/index.js"
+
+export function numberToScaledSize(
+	win: LayoutWindow,
+	size: PxSize | number,
+	scale: number = getMaxInt()
+): Size {
+	const scaledSize = {
+		width: numberToScaledPercent(
+			typeof size === "number" ? size : size.pxWidth,
+			win.pxWidth,
+			scale
+		),
+		height:
+			numberToScaledPercent(
+				typeof size === "number" ? size : size.pxHeight,
+				win.pxHeight,
+				scale
+			)
+	}
+	if (scaledSize.width > scale) unreachable()
+	return scaledSize
+}

package/src/runtime/helpers/oppositeSide.ts

@@ -0,0 +1,45 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+
+import type { Direction, EdgeSide,
+	ExtendedDirection,
+	ExtendedEdgeSide, HasOpposite,
+	Point,
+	Size
+} from "../types/index.js"
+
+export function oppositeSide<
+	T extends Direction
+	| EdgeSide
+	| ExtendedDirection
+	| ExtendedEdgeSide
+	| keyof Point
+	| keyof Size
+>(dir: T): T {
+	switch (dir) {
+		case "x":
+			return "y" satisfies HasOpposite as any
+		case "y":
+			return "x" satisfies HasOpposite as any
+		case "width":
+			return "height" satisfies HasOpposite as any
+		case "height":
+			return "width" satisfies HasOpposite as any
+		case "left":
+			return "right" satisfies HasOpposite as any
+		case "right":
+			return "left" satisfies HasOpposite as any
+		case "up":
+			return "down" satisfies HasOpposite as any
+		case "top":
+			return "bottom" satisfies HasOpposite as any
+		case "bottom":
+			return "top" satisfies HasOpposite as any
+		case "down":
+			return "up" satisfies HasOpposite as any
+		case "horizontal":
+			return "vertical" satisfies HasOpposite as any
+		case "vertical":
+			return "horizontal" satisfies HasOpposite as any
+	}
+	unreachable()
+}