@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/headless/table-layout.js

@@ -1,161 +1,200 @@
+// Table geometry: column widths, and the height that follows.
+// One owner, because the component, node-sizing and board-doc must agree.
+// Flat numbers stay in metrics.ts.
+/** 13px Satoshi. Deliberately wide: guessing narrow leaves a gap. */
 const CELL_CHAR_W = 6.7;
+/** px-3 on both sides of a cell. */
 export const TABLE_CELL_PAD_X = 12;
+/** One line of a cell: 13px over leading-[18px]. */
 const ROW_LINE_H = 18;
+/** The hairline between two rows. */
 const ROW_BORDER = 1;
+/** The "no rows configured" placeholder. */
 const TABLE_EMPTY_H = 56;
+/** A section band: 11px caps over a 16px line + py-1.5 + border. */
 const SECTION_ROW_H = 29;
+/** A note under a row: 11px over a 16px line. */
 const NOTE_LINE_H = 16;
+/** Indent of the first cell per depth step. */
 export const TABLE_DEPTH_INDENT = 16;
+// The table card's own rhythm.
+/** Title row: 24px icon chip + py-3 + border. */
 export const TABLE_TITLE_H = 49;
+/** Column heads: 16px line + py-2 + border. */
 export const TABLE_COLHEAD_H = 33;
+/** py-2.5 top and bottom. */
 const TABLE_ROW_PAD_Y = 20;
+/** The narrowest a table card gets, however little it says. */
 export const TABLE_MIN_W = 360;
+/** The widest it gets, so a 13px line stays under about 75 characters. */
 export const TABLE_MAX_W = 760;
+/** A column left blank to be filled in still gets room to write. */
 const FILL_COL_CH = 32;
+/** Excalifont runs about 12% wider than Satoshi over the same text. */
 const HAND_FONT_FACTOR = 1.12;
+/** The widest a drag may make a card. */
 export const TABLE_RESIZE_MAX_W = 1600;
+/** The floor. Under 9 characters a head like "Price" wraps. */
 const MIN_COL_CH = 9;
+/** The ceiling, so one long column cannot eat the card. */
 const MAX_COL_CH = 48;
 export function tableColumnCount(headers, rows) {
-    return Math.max(headers.length, rows.reduce((max, row)=>Math.max(max, row.cells?.length ?? 0), 0), 1);
+	return Math.max(headers.length, rows.reduce((max, row) => Math.max(max, row.cells?.length ?? 0), 0), 1);
 }
+/** Fractions summing to 1. `explicit` is relative, so [1,1,3] and [10,10,30]
+*  are one split. Otherwise the content decides. */
 export function tableColumnWeights(headers, rows, explicit) {
-    const count = tableColumnCount(headers, rows);
-    if (explicit && explicit.length === count && explicit.every((w)=>w > 0)) {
-        return normalize(explicit);
-    }
-    return normalize(naturalColumnChars(headers, rows, count));
+	const count = tableColumnCount(headers, rows);
+	if (explicit && explicit.length === count && explicit.every((w) => w > 0)) {
+		return normalize(explicit);
+	}
+	return normalize(naturalColumnChars(headers, rows, count));
 }
+/** Characters each column wants: its longest line, between the floor and the ceiling. */
 function naturalColumnChars(headers, rows, count) {
-    return Array.from({
-        length: count
-    }, (_, i)=>{
-        const head = headers[i]?.length ?? 0;
-        const cells = rows.filter((row)=>!row.section).map((row)=>row.cells?.[i] ?? "");
-        const body = cells.reduce((max, cell)=>Math.max(max, cell.length), 0);
-        const blank = cells.length > 0 && cells.every(isBlankCell);
-        const wants = blank ? Math.max(head, FILL_COL_CH) : Math.max(head, body);
-        return Math.min(MAX_COL_CH, Math.max(MIN_COL_CH, wants));
-    });
-}
+	return Array.from({ length: count }, (_, i) => {
+		const head = headers[i]?.length ?? 0;
+		const cells = rows.filter((row) => !row.section).map((row) => row.cells?.[i] ?? "");
+		const body = cells.reduce((max, cell) => Math.max(max, cell.length), 0);
+		// "...", "…" or nothing: the column is a blank to write in, not content.
+		const blank = cells.length > 0 && cells.every(isBlankCell);
+		const wants = blank ? Math.max(head, FILL_COL_CH) : Math.max(head, body);
+		return Math.min(MAX_COL_CH, Math.max(MIN_COL_CH, wants));
+	});
+}
+/** A placeholder rather than a value: empty, dots, an ellipsis, a dash or a question mark. */
 export function isBlankCell(value) {
-    return /^[\s.…?\-–—_]*$/.test(value);
+	return /^[\s.…?\-–—_]*$/.test(value);
 }
+/** The narrowest a column gets: enough for a head like "Price" not to wrap. */
 export const TABLE_COL_MIN_W = MIN_COL_CH * CELL_CHAR_W + TABLE_CELL_PAD_X * 2;
+/** `minmax(floor, …fr)`, not a bare `fr`: a long cell must not widen its column,
+*  and a thin weight must not squeeze a head below the floor. */
 export function tableGridTemplate(weights, floor = 0) {
-    const min = floor > 0 ? `${floor}px` : "0";
-    return weights.map((w)=>`minmax(${min}, ${w.toFixed(4)}fr)`).join(" ");
+	const min = floor > 0 ? `${floor}px` : "0";
+	return weights.map((w) => `minmax(${min}, ${w.toFixed(4)}fr)`).join(" ");
 }
+/** Pixel widths for weights, with columns under the floor pinned there, as the grid does. */
 export function tableColumnPx(weights, width) {
-    const out = weights.map(()=>0);
-    const pinned = new Set();
-    let changed = true;
-    while(changed){
-        changed = false;
-        const free = weights.reduce((sum, w, i)=>sum + (pinned.has(i) ? 0 : w), 0);
-        const room = width - pinned.size * TABLE_COL_MIN_W;
-        weights.forEach((w, i)=>{
-            if (pinned.has(i)) return;
-            out[i] = free > 0 ? room * w / free : 0;
-            if (out[i] < TABLE_COL_MIN_W && pinned.size < weights.length - 1) {
-                pinned.add(i);
-                changed = true;
-            }
-        });
-    }
-    return out.map((px, i)=>pinned.has(i) ? TABLE_COL_MIN_W : px);
+	const out = weights.map(() => 0);
+	const pinned = new Set();
+	let changed = true;
+	while (changed) {
+		changed = false;
+		const free = weights.reduce((sum, w, i) => sum + (pinned.has(i) ? 0 : w), 0);
+		const room = width - pinned.size * TABLE_COL_MIN_W;
+		weights.forEach((w, i) => {
+			if (pinned.has(i)) return;
+			out[i] = free > 0 ? room * w / free : 0;
+			if (out[i] < TABLE_COL_MIN_W && pinned.size < weights.length - 1) {
+				pinned.add(i);
+				changed = true;
+			}
+		});
+	}
+	return out.map((px, i) => pinned.has(i) ? TABLE_COL_MIN_W : px);
 }
 function charWidth(font) {
-    return font === "hand" ? CELL_CHAR_W * HAND_FONT_FACTOR : CELL_CHAR_W;
+	return font === "hand" ? CELL_CHAR_W * HAND_FONT_FACTOR : CELL_CHAR_W;
 }
+/** The width that fits the content, clamped to TABLE_MIN_W..TABLE_MAX_W and
+*  never past `ceiling`. A card the user resized keeps that width instead. */
 export function tableWidth(headers, rows, ceiling = TABLE_MAX_W, font = "plain") {
-    const fitted = Math.ceil(naturalWidth(headers, rows, font));
-    return Math.min(ceiling, TABLE_MAX_W, Math.max(TABLE_MIN_W, fitted));
+	const fitted = Math.ceil(naturalWidth(headers, rows, font));
+	return Math.min(ceiling, TABLE_MAX_W, Math.max(TABLE_MIN_W, fitted));
 }
+/** The narrowest a drag may make a card: every column at its floor. */
 export function tableMinWidth(headers, rows) {
-    return tableColumnCount(headers, rows) * TABLE_COL_MIN_W + 2;
+	return tableColumnCount(headers, rows) * TABLE_COL_MIN_W + 2;
 }
+/** The width at which every column holds its longest line, up to the per-column cap. */
 function naturalWidth(headers, rows, font) {
-    const count = tableColumnCount(headers, rows);
-    return naturalColumnChars(headers, rows, count).reduce((sum, ch)=>sum + ch * charWidth(font) + TABLE_CELL_PAD_X * 2, 0);
+	const count = tableColumnCount(headers, rows);
+	return naturalColumnChars(headers, rows, count).reduce((sum, ch) => sum + ch * charWidth(font) + TABLE_CELL_PAD_X * 2, 0);
 }
+/** Column weights for a card `width` wide. A card with room for the content
+*  splits by content; a squeezed one falls back to the author's weights. */
 export function tableWeightsAt(headers, rows, width, { explicit, font = "plain" } = {}) {
-    if (width >= naturalWidth(headers, rows, font)) return tableColumnWeights(headers, rows);
-    return tableColumnWeights(headers, rows, explicit);
+	if (width >= naturalWidth(headers, rows, font)) return tableColumnWeights(headers, rows);
+	return tableColumnWeights(headers, rows, explicit);
 }
+/** Figure columns get `tabular-nums`. Not right-aligned: a table node is read
+*  across, and a right-aligned middle column opens a gutter mid-sentence. */
 export function tableNumericColumns(rows, count) {
-    return Array.from({
-        length: count
-    }, (_, i)=>{
-        const values = rows.filter((row)=>!row.section).map((row)=>row.cells?.[i]?.trim() ?? "").filter(Boolean);
-        return values.length > 0 && values.every(isFigure);
-    });
+	return Array.from({ length: count }, (_, i) => {
+		const values = rows.filter((row) => !row.section).map((row) => row.cells?.[i]?.trim() ?? "").filter(Boolean);
+		return values.length > 0 && values.every(isFigure);
+	});
 }
+/** A price, a count, a percentage, a multiplier. Not "$20 a month". */
 function isFigure(value) {
-    return /^[-+]?[$€£]?\s?\d[\d\s.,]*\s?[%x×]?$/.test(value);
+	return /^[-+]?[$€£]?\s?\d[\d\s.,]*\s?[%x×]?$/.test(value);
 }
+/** How many lines a cell takes at the width its column gets. */
 function wrappedLines(text, columnWidth, charW = CELL_CHAR_W) {
-    const inner = Math.max(charW, columnWidth - TABLE_CELL_PAD_X * 2);
-    const perLine = Math.max(1, Math.floor(inner / charW));
-    return Math.max(1, Math.ceil(text.length / perLine));
+	const inner = Math.max(charW, columnWidth - TABLE_CELL_PAD_X * 2);
+	const perLine = Math.max(1, Math.floor(inner / charW));
+	return Math.max(1, Math.ceil(text.length / perLine));
 }
+/** Pixel widths of the columns when the card is `width` wide. */
 export function tableColumnsAt(headers, rows, width, { sizing, weights }) {
-    const count = tableColumnCount(headers, rows);
-    const inner = Math.max(count * TABLE_COL_MIN_W, width - 2);
-    const pinned = sizing.columnWidths;
-    if (pinned && pinned.length === count && pinned.every((w)=>w > 0)) {
-        return tableColumnPx(pinned, inner);
-    }
-    const split = sizing.userWidth != null ? tableColumnWeights(headers, rows, weights) : tableWeightsAt(headers, rows, width, {
-        explicit: weights,
-        font: sizing.font
-    });
-    return tableColumnPx(split, inner);
-}
+	const count = tableColumnCount(headers, rows);
+	const inner = Math.max(count * TABLE_COL_MIN_W, width - 2);
+	const pinned = sizing.columnWidths;
+	if (pinned && pinned.length === count && pinned.every((w) => w > 0)) {
+		return tableColumnPx(pinned, inner);
+	}
+	const split = sizing.userWidth != null ? tableColumnWeights(headers, rows, weights) : tableWeightsAt(headers, rows, width, {
+		explicit: weights,
+		font: sizing.font
+	});
+	return tableColumnPx(split, inner);
+}
+/** The card's width and the pixel width of each column, from what the user fixed. */
 export function tableColumns(headers, rows, sizing = {}, weights) {
-    const count = tableColumnCount(headers, rows);
-    const pinned = sizing.columnWidths;
-    const hasPinned = pinned && pinned.length === count && pinned.every((w)=>w > 0);
-    const width = sizing.userWidth ?? (hasPinned ? Math.round(pinned.reduce((sum, w)=>sum + w, 0)) + 2 : tableWidth(headers, rows, TABLE_MAX_W, sizing.font));
-    return {
-        width,
-        columns: tableColumnsAt(headers, rows, width, {
-            sizing,
-            weights
-        })
-    };
-}
+	const count = tableColumnCount(headers, rows);
+	const pinned = sizing.columnWidths;
+	const hasPinned = pinned && pinned.length === count && pinned.every((w) => w > 0);
+	const width = sizing.userWidth ?? (hasPinned ? Math.round(pinned.reduce((sum, w) => sum + w, 0)) + 2 : tableWidth(headers, rows, TABLE_MAX_W, sizing.font));
+	return {
+		width,
+		columns: tableColumnsAt(headers, rows, width, {
+			sizing,
+			weights
+		})
+	};
+}
+/** Each row's height: its content, or the height the user pinned if that is more. */
 export function tableRowHeights(rows, columns, sizing = {}) {
-    const charW = charWidth(sizing.font ?? "plain");
-    const full = columns.reduce((sum, px)=>sum + px, 0);
-    return rows.map((row, i)=>{
-        if (row.section) return Math.max(SECTION_ROW_H, sizing.rowHeights?.[i] ?? 0);
-        const indent = (row.depth ?? 0) * TABLE_DEPTH_INDENT;
-        const lines = columns.reduce((max, px, c)=>Math.max(max, wrappedLines(row.cells?.[c] ?? "", c === 0 ? px - indent : px, charW)), 1);
-        const note = row.note ? wrappedLines(row.note, full - indent) * NOTE_LINE_H : 0;
-        const content = TABLE_ROW_PAD_Y + lines * ROW_LINE_H + ROW_BORDER + note;
-        return Math.max(content, sizing.rowHeights?.[i] ?? 0);
-    });
-}
+	const charW = charWidth(sizing.font ?? "plain");
+	const full = columns.reduce((sum, px) => sum + px, 0);
+	return rows.map((row, i) => {
+		if (row.section) return Math.max(SECTION_ROW_H, sizing.rowHeights?.[i] ?? 0);
+		const indent = (row.depth ?? 0) * TABLE_DEPTH_INDENT;
+		const lines = columns.reduce((max, px, c) => Math.max(max, wrappedLines(row.cells?.[c] ?? "", c === 0 ? px - indent : px, charW)), 1);
+		const note = row.note ? wrappedLines(row.note, full - indent) * NOTE_LINE_H : 0;
+		const content = TABLE_ROW_PAD_Y + lines * ROW_LINE_H + ROW_BORDER + note;
+		return Math.max(content, sizing.rowHeights?.[i] ?? 0);
+	});
+}
+/** The card's height at a given width, wrapping included. A height the user set is a floor. */
 export function tableHeight(headers, rows, width, { explicit, sizing = {} } = {}) {
-    const head = headers.length > 0 ? TABLE_COLHEAD_H : 0;
-    if (rows.length === 0) return TABLE_TITLE_H + head + TABLE_EMPTY_H;
-    const columns = tableColumnsAt(headers, rows, width, {
-        sizing,
-        weights: explicit
-    });
-    const body = tableRowHeights(rows, columns, sizing).reduce((sum, h)=>sum + h, 0);
-    return Math.max(sizing.userHeight ?? 0, TABLE_TITLE_H + head + body);
-}
+	const head = headers.length > 0 ? TABLE_COLHEAD_H : 0;
+	if (rows.length === 0) return TABLE_TITLE_H + head + TABLE_EMPTY_H;
+	const columns = tableColumnsAt(headers, rows, width, {
+		sizing,
+		weights: explicit
+	});
+	const body = tableRowHeights(rows, columns, sizing).reduce((sum, h) => sum + h, 0);
+	return Math.max(sizing.userHeight ?? 0, TABLE_TITLE_H + head + body);
+}
+/** The width a column needs to hold its longest line, for a double-click on its border. */
 export function tableColumnFit(headers, rows, col, font = "plain") {
-    const longest = [
-        headers[col] ?? "",
-        ...rows.filter((row)=>!row.section).map((row)=>row.cells?.[col] ?? "")
-    ].reduce((max, text)=>Math.max(max, text.length), 0);
-    const px = Math.ceil(longest * charWidth(font)) + TABLE_CELL_PAD_X * 2;
-    return Math.max(TABLE_COL_MIN_W, Math.min(px, TABLE_RESIZE_MAX_W));
+	const longest = [headers[col] ?? "", ...rows.filter((row) => !row.section).map((row) => row.cells?.[col] ?? "")].reduce((max, text) => Math.max(max, text.length), 0);
+	const px = Math.ceil(longest * charWidth(font)) + TABLE_CELL_PAD_X * 2;
+	return Math.max(TABLE_COL_MIN_W, Math.min(px, TABLE_RESIZE_MAX_W));
 }
 function normalize(weights) {
-    const total = weights.reduce((sum, w)=>sum + w, 0);
-    return total > 0 ? weights.map((w)=>w / total) : weights.map(()=>1 / weights.length);
+	const total = weights.reduce((sum, w) => sum + w, 0);
+	return total > 0 ? weights.map((w) => w / total) : weights.map(() => 1 / weights.length);
 }

package/dist/canvas/index.js

@@ -1,3 +1,5 @@
+// @heyramzi/ui/canvas public API. Server-safe: nothing here touches the DOM.
+// Svelte components are imported by path, like "@heyramzi/ui/canvas/ui/canvas-grid.svelte".
 export * from "./types.js";
 export * from "./plugin.js";
 export { tryCatch, tryCatchAsync } from "../lib/result.js";

package/dist/canvas/lod/lod-mode.svelte.js

@@ -1,22 +1,24 @@
 import { untrack } from "svelte";
-export const LOW_BELOW = 0.4;
-export const FULL_ABOVE = 0.46;
+// One flag per canvas: a card reading it re-renders when it flips, not on every zoom frame.
+/** Below this zoom a card is a box. */
+export const LOW_BELOW = .4;
+/** Back to the full card above this. The gap stops a zoom held at the line from swapping every card each frame. */
+export const FULL_ABOVE = .46;
 const modes = new WeakMap();
+/** The shared flag for one canvas's store. The first card to ask starts the one effect that keeps it. */
 export function lodMode(store) {
-    const known = modes.get(store);
-    if (known) return known;
-    const mode = $state({
-        low: store.viewport.zoom < LOW_BELOW
-    });
-    modes.set(store, mode);
-    $effect.root(()=>{
-        $effect(()=>{
-            const zoom = store.viewport.zoom;
-            untrack(()=>{
-                if (mode.low && zoom > FULL_ABOVE) mode.low = false;
-                else if (!mode.low && zoom < LOW_BELOW) mode.low = true;
-            });
-        });
-    });
-    return mode;
+	const known = modes.get(store);
+	if (known) return known;
+	const mode = $state({ low: store.viewport.zoom < LOW_BELOW });
+	modes.set(store, mode);
+	$effect.root(() => {
+		$effect(() => {
+			const zoom = store.viewport.zoom;
+			untrack(() => {
+				if (mode.low && zoom > FULL_ABOVE) mode.low = false;
+				else if (!mode.low && zoom < LOW_BELOW) mode.low = true;
+			});
+		});
+	});
+	return mode;
 }

package/dist/canvas/lod/render-all.svelte.js

@@ -1,45 +1,42 @@
 import { tick } from "svelte";
-const hold = $state({
-    count: 0
-});
-export const renderAll = {
-    get on () {
-        return hold.count > 0;
-    }
-};
-const frame = ()=>new Promise((resolve)=>requestAnimationFrame(()=>resolve()));
+// An export reads the page's markup, so it holds this open: every card is drawn in full until it lets go.
+const hold = $state({ count: 0 });
+/** True while something needs every card drawn in full. */
+export const renderAll = { get on() {
+	return hold.count > 0;
+} };
+const frame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+// Arrows draw a beat after their cards, once the cards are measured, so they are counted too.
 const DRAWN = ".svelte-flow__node, .svelte-flow__edge";
 const SETTLE_FRAMES = 8;
-const GIVE_UP_MS = 4000;
+const GIVE_UP_MS = 4e3;
+/** The page's card fade-in is switched off under this attribute, so a card that remounts is captured solid. */
 export const EVERY_CARD_ATTR = "data-cv-every-card";
+/** Runs `use` with every card drawn in full. Waits until the number of cards and arrows on the page holds still. */
 export async function withEveryCard(root, use) {
-    hold.count += 1;
-    const marked = root instanceof Element ? root : null;
-    marked?.setAttribute(EVERY_CARD_ATTR, "");
-    try {
-        await tick();
-        const start = performance.now();
-        let last = -1;
-        let still = 0;
-        while(still < SETTLE_FRAMES && performance.now() - start < GIVE_UP_MS){
-            await frame();
-            const now = root.querySelectorAll(DRAWN).length;
-            still = now === last ? still + 1 : 0;
-            last = now;
-        }
-        if ("getAnimations" in root) {
-            const running = root.getAnimations({
-                subtree: true
-            });
-            await Promise.race([
-                Promise.allSettled(running.map((animation)=>animation.finished)),
-                new Promise((resolve)=>setTimeout(resolve, 1000))
-            ]);
-        }
-        await frame();
-        return await use();
-    } finally{
-        hold.count -= 1;
-        if (hold.count === 0) marked?.removeAttribute(EVERY_CARD_ATTR);
-    }
+	hold.count += 1;
+	const marked = root instanceof Element ? root : null;
+	marked?.setAttribute(EVERY_CARD_ATTR, "");
+	try {
+		await tick();
+		const start = performance.now();
+		let last = -1;
+		let still = 0;
+		while (still < SETTLE_FRAMES && performance.now() - start < GIVE_UP_MS) {
+			await frame();
+			const now = root.querySelectorAll(DRAWN).length;
+			still = now === last ? still + 1 : 0;
+			last = now;
+		}
+		// A fade that began before the switch-off still has to land.
+		if ("getAnimations" in root) {
+			const running = root.getAnimations({ subtree: true });
+			await Promise.race([Promise.allSettled(running.map((animation) => animation.finished)), new Promise((resolve) => setTimeout(resolve, 1e3))]);
+		}
+		await frame();
+		return await use();
+	} finally {
+		hold.count -= 1;
+		if (hold.count === 0) marked?.removeAttribute(EVERY_CARD_ATTR);
+	}
 }

package/dist/canvas/ops/arrange.js

@@ -1,83 +1,90 @@
 export const ALIGNMENTS = [
-    "left",
-    "right",
-    "top",
-    "bottom",
-    "center-horizontal",
-    "center-vertical"
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"center-horizontal",
+	"center-vertical"
 ];
+// =========================
+// ALIGN
+// =========================
+/** "center-horizontal" puts the centres on one vertical axis, as tldraw named it. */
 export function alignPositions(items, alignment) {
-    const moved = new Map();
-    if (items.length < 2) return moved;
-    const left = Math.min(...items.map((item)=>item.position.x));
-    const top = Math.min(...items.map((item)=>item.position.y));
-    const right = Math.max(...items.map((item)=>item.position.x + item.width));
-    const bottom = Math.max(...items.map((item)=>item.position.y + item.height));
-    for (const item of items){
-        const { x, y } = item.position;
-        const next = {
-            x,
-            y
-        };
-        if (alignment === "left") next.x = left;
-        else if (alignment === "right") next.x = right - item.width;
-        else if (alignment === "top") next.y = top;
-        else if (alignment === "bottom") next.y = bottom - item.height;
-        else if (alignment === "center-horizontal") next.x = (left + right) / 2 - item.width / 2;
-        else next.y = (top + bottom) / 2 - item.height / 2;
-        if (next.x !== x || next.y !== y) moved.set(item.id, next);
-    }
-    return moved;
+	const moved = new Map();
+	if (items.length < 2) return moved;
+	const left = Math.min(...items.map((item) => item.position.x));
+	const top = Math.min(...items.map((item) => item.position.y));
+	const right = Math.max(...items.map((item) => item.position.x + item.width));
+	const bottom = Math.max(...items.map((item) => item.position.y + item.height));
+	for (const item of items) {
+		const { x, y } = item.position;
+		const next = {
+			x,
+			y
+		};
+		if (alignment === "left") next.x = left;
+		else if (alignment === "right") next.x = right - item.width;
+		else if (alignment === "top") next.y = top;
+		else if (alignment === "bottom") next.y = bottom - item.height;
+		else if (alignment === "center-horizontal") next.x = (left + right) / 2 - item.width / 2;
+		else next.y = (top + bottom) / 2 - item.height / 2;
+		if (next.x !== x || next.y !== y) moved.set(item.id, next);
+	}
+	return moved;
 }
+// =========================
+// DISTRIBUTE AND STACK
+// =========================
 function along(axis) {
-    const horizontal = axis === "horizontal";
-    return {
-        start: (item)=>horizontal ? item.position.x : item.position.y,
-        size: (item)=>horizontal ? item.width : item.height,
-        place: (item, at)=>horizontal ? {
-                x: at,
-                y: item.position.y
-            } : {
-                x: item.position.x,
-                y: at
-            }
-    };
+	const horizontal = axis === "horizontal";
+	return {
+		start: (item) => horizontal ? item.position.x : item.position.y,
+		size: (item) => horizontal ? item.width : item.height,
+		place: (item, at) => horizontal ? {
+			x: at,
+			y: item.position.y
+		} : {
+			x: item.position.x,
+			y: at
+		}
+	};
 }
 function inOrder(items, axis) {
-    const { start } = along(axis);
-    return [
-        ...items
-    ].sort((a, b)=>start(a) - start(b));
+	const { start } = along(axis);
+	return [...items].sort((a, b) => start(a) - start(b));
 }
+/** Space the boxes so every gap matches. The first and last stay where they are. */
 export function distributePositions(items, axis) {
-    const moved = new Map();
-    if (items.length < 3) return moved;
-    const { start, size, place } = along(axis);
-    const sorted = inOrder(items, axis);
-    const first = sorted[0];
-    const last = sorted[sorted.length - 1];
-    if (!first || !last) return moved;
-    const span = start(last) + size(last) - start(first);
-    const used = sorted.reduce((sum, item)=>sum + size(item), 0);
-    const gap = (span - used) / (sorted.length - 1);
-    let cursor = start(first);
-    for (const item of sorted){
-        if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
-        cursor += size(item) + gap;
-    }
-    return moved;
+	const moved = new Map();
+	if (items.length < 3) return moved;
+	const { start, size, place } = along(axis);
+	const sorted = inOrder(items, axis);
+	const first = sorted[0];
+	const last = sorted[sorted.length - 1];
+	if (!first || !last) return moved;
+	const span = start(last) + size(last) - start(first);
+	const used = sorted.reduce((sum, item) => sum + size(item), 0);
+	const gap = (span - used) / (sorted.length - 1);
+	let cursor = start(first);
+	for (const item of sorted) {
+		if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
+		cursor += size(item) + gap;
+	}
+	return moved;
 }
+/** Put the boxes in a row or a column, `gap` apart, in the order they sit now. The first stays put. */
 export function stackPositions(items, axis, gap) {
-    const moved = new Map();
-    if (items.length < 2) return moved;
-    const { start, size, place } = along(axis);
-    const sorted = inOrder(items, axis);
-    const first = sorted[0];
-    if (!first) return moved;
-    let cursor = start(first);
-    for (const item of sorted){
-        if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
-        cursor += size(item) + gap;
-    }
-    return moved;
+	const moved = new Map();
+	if (items.length < 2) return moved;
+	const { start, size, place } = along(axis);
+	const sorted = inOrder(items, axis);
+	const first = sorted[0];
+	if (!first) return moved;
+	let cursor = start(first);
+	for (const item of sorted) {
+		if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
+		cursor += size(item) + gap;
+	}
+	return moved;
 }