@griddle/core 0.1.0

package/src/packing.ts

@@ -0,0 +1,169 @@
+// packing.ts — dense repacking for loop mode.
+//
+// Loop mode repeats the content's bounding box, so any hole inside it repeats
+// too. `computePack` arranges tiles into the tightest layout it can find:
+//
+// 1. Exact search: for each candidate width W (widest first) whose W x H
+//    rectangle exactly matches the total tile area, run a bounded
+//    backtracking tiler (cover the topmost-leftmost empty cell at each step).
+//    If it succeeds the layout has ZERO holes.
+// 2. Fallback: a gap-filling greedy — walk cells in reading order and drop
+//    the largest remaining tile that fits at each empty cell. Minimizes holes
+//    but cannot always reach zero (not every tile mix tiles a rectangle).
+//
+// Rectangle packing is NP-hard in general; the exact search is capped by a
+// node budget so worst-case inputs degrade to the greedy instead of hanging.
+
+import type { CellPos } from './types.js';
+
+export interface PackTile {
+  id: string;
+  w: number;
+  h: number;
+}
+
+export interface PackComputation {
+  placements: Map<string, CellPos>;
+  /** Bounding box of the packed layout, in cells. */
+  width: number;
+  height: number;
+  /** Empty cells left inside the bounding box (0 = perfectly dense). */
+  holes: number;
+}
+
+const EXACT_NODE_BUDGET = 50_000;
+
+export function computePack(tiles: PackTile[], maxCols: number): PackComputation | null {
+  if (tiles.length === 0 || maxCols <= 0) return null;
+  const area = tiles.reduce((s, t) => s + t.w * t.h, 0);
+  const maxW = Math.max(...tiles.map((t) => t.w));
+  const maxH = Math.max(...tiles.map((t) => t.h));
+
+  for (let w = Math.min(maxCols, area); w >= maxW; w--) {
+    if (area % w !== 0) continue;
+    const h = area / w;
+    if (h < maxH) continue;
+    const exact = exactPack(tiles, w, h);
+    if (exact) return { placements: exact, width: w, height: h, holes: 0 };
+  }
+
+  return greedyPack(tiles, Math.min(maxCols, area));
+}
+
+/**
+ * Bounded backtracking tiler: every step covers the topmost-leftmost empty
+ * cell, trying each distinct unused tile size there. Returns null when no
+ * complete tiling is found (or the node budget runs out).
+ */
+function exactPack(tiles: PackTile[], w: number, h: number): Map<string, CellPos> | null {
+  const order = [...tiles].sort((a, b) => b.w * b.h - a.w * a.h || b.h - a.h);
+  const n = order.length;
+  const occ = new Uint8Array(w * h);
+  const used = new Array<boolean>(n).fill(false);
+  const placements = new Map<string, CellPos>();
+  let nodes = 0;
+
+  const fits = (c: number, r: number, tw: number, th: number): boolean => {
+    if (c + tw > w || r + th > h) return false;
+    for (let y = r; y < r + th; y++) {
+      for (let x = c; x < c + tw; x++) {
+        if (occ[y * w + x]) return false;
+      }
+    }
+    return true;
+  };
+  const mark = (c: number, r: number, tw: number, th: number, v: number): void => {
+    for (let y = r; y < r + th; y++) {
+      for (let x = c; x < c + tw; x++) occ[y * w + x] = v;
+    }
+  };
+
+  const rec = (scanFrom: number): boolean => {
+    if (++nodes > EXACT_NODE_BUDGET) return false;
+    let idx = scanFrom;
+    while (idx < w * h && occ[idx]) idx++;
+    if (idx >= w * h) return true;
+    const c = idx % w;
+    const r = (idx - c) / w;
+    // Identical-size tiles are interchangeable; trying one per size is enough.
+    const triedSizes = new Set<string>();
+    for (let i = 0; i < n; i++) {
+      if (used[i]) continue;
+      const t = order[i]!;
+      const sizeKey = `${t.w}x${t.h}`;
+      if (triedSizes.has(sizeKey)) continue;
+      triedSizes.add(sizeKey);
+      if (!fits(c, r, t.w, t.h)) continue;
+      used[i] = true;
+      mark(c, r, t.w, t.h, 1);
+      placements.set(t.id, { col: c, row: r });
+      if (rec(idx + 1)) return true;
+      used[i] = false;
+      mark(c, r, t.w, t.h, 0);
+      placements.delete(t.id);
+    }
+    return false;
+  };
+
+  return rec(0) ? placements : null;
+}
+
+/**
+ * Gap-filling greedy: walk cells in reading order; at each empty cell place
+ * the largest remaining tile that fits, otherwise leave the cell as a hole
+ * and move on. Never widens the layout to skip a fillable gap.
+ */
+function greedyPack(tiles: PackTile[], w: number): PackComputation {
+  const remaining = [...tiles].sort((a, b) => b.w * b.h - a.w * a.h || b.h - a.h);
+  const placements = new Map<string, CellPos>();
+  const occ: boolean[][] = [];
+
+  const fits = (c: number, r: number, tw: number, th: number): boolean => {
+    if (c + tw > w) return false;
+    for (let y = r; y < r + th; y++) {
+      const row = occ[y];
+      if (!row) continue;
+      for (let x = c; x < c + tw; x++) {
+        if (row[x]) return false;
+      }
+    }
+    return true;
+  };
+  const mark = (c: number, r: number, tw: number, th: number): void => {
+    for (let y = r; y < r + th; y++) {
+      let row = occ[y];
+      if (!row) {
+        row = new Array<boolean>(w).fill(false);
+        occ[y] = row;
+      }
+      for (let x = c; x < c + tw; x++) row[x] = true;
+    }
+  };
+
+  let idx = 0;
+  while (remaining.length > 0) {
+    const c = idx % w;
+    const r = (idx - c) / w;
+    if (!occ[r]?.[c]) {
+      const i = remaining.findIndex((t) => fits(c, r, t.w, t.h));
+      if (i >= 0) {
+        const t = remaining.splice(i, 1)[0]!;
+        placements.set(t.id, { col: c, row: r });
+        mark(c, r, t.w, t.h);
+      }
+      // else: unfillable hole — leave it and keep scanning.
+    }
+    idx++;
+  }
+
+  let width = 0;
+  let height = 0;
+  let area = 0;
+  for (const t of tiles) {
+    const p = placements.get(t.id)!;
+    width = Math.max(width, p.col + t.w);
+    height = Math.max(height, p.row + t.h);
+    area += t.w * t.h;
+  }
+  return { placements, width, height, holes: width * height - area };
+}

package/src/pan.ts

@@ -0,0 +1,217 @@
+// PanController — headless camera for loop mode. No DOM, no timers.
+//
+// The controller owns an unbounded 2D camera offset. Three inputs move it:
+// - dragStart/dragMove/dragEnd: pointer-driven panning. While dragging, the
+//   target follows the pointer 1:1 (inverted — content follows the finger)
+//   and a velocity estimate is kept; on release the target keeps coasting
+//   under exponential friction (inertia/fling).
+// - scrollBy: external deltas (wheel/trackpad). Applied directly to both
+//   camera and target — the browser already smooths these.
+// - tick(now): advances easing + inertia. Adapters call this from their rAF
+//   loop and apply the camera to the plane's CSS transform.
+//
+// All rates are per-second (exponential, frame-rate independent).
+
+export interface CameraState {
+  /** Unbounded camera offset, px. */
+  x: number;
+  y: number;
+  /** Velocity estimate, px/s. */
+  vx: number;
+  vy: number;
+  /** True while the camera is still easing/coasting toward its target. */
+  isMoving: boolean;
+  /** True between dragStart and dragEnd. */
+  isDragging: boolean;
+}
+
+export interface PanPhysicsOptions {
+  /** Inertia velocity decay rate after release, 1/s. Default 4. */
+  friction?: number;
+  /** Camera approach rate toward the target, 1/s. Default 12. */
+  ease?: number;
+  /** Fling velocity clamp, px/s. Default 6000. */
+  maxVelocity?: number;
+}
+
+interface Sample {
+  t: number;
+  x: number;
+  y: number;
+}
+
+const SETTLE_DISTANCE = 0.1; // px
+const SETTLE_VELOCITY = 5; // px/s
+const VELOCITY_WINDOW_MS = 100;
+
+export class PanController {
+  private friction: number;
+  private ease: number;
+  private maxVelocity: number;
+
+  private x = 0;
+  private y = 0;
+  private targetX = 0;
+  private targetY = 0;
+  private vx = 0;
+  private vy = 0;
+
+  private dragging = false;
+  private lastPointer: { x: number; y: number } | null = null;
+  private samples: Sample[] = [];
+  private lastTick: number | null = null;
+
+  constructor(physics: PanPhysicsOptions = {}) {
+    this.friction = physics.friction ?? 4;
+    this.ease = physics.ease ?? 12;
+    this.maxVelocity = physics.maxVelocity ?? 6000;
+  }
+
+  setPhysics(physics: PanPhysicsOptions): void {
+    if (physics.friction !== undefined) this.friction = physics.friction;
+    if (physics.ease !== undefined) this.ease = physics.ease;
+    if (physics.maxVelocity !== undefined) this.maxVelocity = physics.maxVelocity;
+  }
+
+  state(): CameraState {
+    const settled =
+      Math.abs(this.targetX - this.x) < SETTLE_DISTANCE &&
+      Math.abs(this.targetY - this.y) < SETTLE_DISTANCE &&
+      Math.abs(this.vx) < SETTLE_VELOCITY &&
+      Math.abs(this.vy) < SETTLE_VELOCITY;
+    return {
+      x: this.x,
+      y: this.y,
+      vx: this.vx,
+      vy: this.vy,
+      isMoving: this.dragging || !settled,
+      isDragging: this.dragging,
+    };
+  }
+
+  /** Begin a pan gesture at pointer position (px, py), in any stable pixel space. */
+  dragStart(px: number, py: number, now: number): void {
+    this.dragging = true;
+    this.lastPointer = { x: px, y: py };
+    this.samples = [{ t: now, x: px, y: py }];
+    // Grabbing the plane stops any in-flight coast.
+    this.vx = 0;
+    this.vy = 0;
+    this.targetX = this.x;
+    this.targetY = this.y;
+  }
+
+  /** Pointer moved during a pan gesture. */
+  dragMove(px: number, py: number, now: number): void {
+    if (!this.dragging || !this.lastPointer) return;
+    // Content follows the finger: camera moves opposite the pointer delta.
+    this.targetX -= px - this.lastPointer.x;
+    this.targetY -= py - this.lastPointer.y;
+    this.lastPointer = { x: px, y: py };
+    this.samples.push({ t: now, x: px, y: py });
+    while (this.samples.length > 2 && now - this.samples[0]!.t > VELOCITY_WINDOW_MS) {
+      this.samples.shift();
+    }
+  }
+
+  /** End the pan gesture, converting recent pointer motion into a fling. */
+  dragEnd(now: number): void {
+    if (!this.dragging) return;
+    this.dragging = false;
+    this.lastPointer = null;
+    const first = this.samples[0];
+    const last = this.samples[this.samples.length - 1];
+    if (first && last && last.t > first.t) {
+      const dt = (last.t - first.t) / 1000;
+      // Pointer velocity, inverted into camera space.
+      let vx = -(last.x - first.x) / dt;
+      let vy = -(last.y - first.y) / dt;
+      const speed = Math.hypot(vx, vy);
+      if (speed > this.maxVelocity) {
+        const s = this.maxVelocity / speed;
+        vx *= s;
+        vy *= s;
+      }
+      this.vx = vx;
+      this.vy = vy;
+    }
+    this.samples = [];
+  }
+
+  /** Abort a drag without inertia. */
+  dragCancel(): void {
+    this.dragging = false;
+    this.lastPointer = null;
+    this.samples = [];
+    this.vx = 0;
+    this.vy = 0;
+  }
+
+  /** External scroll delta (native scroll / wheel). Applied directly. */
+  scrollBy(dx: number, dy: number): void {
+    this.x += dx;
+    this.y += dy;
+    this.targetX += dx;
+    this.targetY += dy;
+  }
+
+  /** Jump the camera (and target) to an absolute offset. Kills motion. */
+  moveTo(x: number, y: number): void {
+    this.x = x;
+    this.y = y;
+    this.targetX = x;
+    this.targetY = y;
+    this.vx = 0;
+    this.vy = 0;
+  }
+
+  /** Stop all motion at the current offset. */
+  stop(): void {
+    this.targetX = this.x;
+    this.targetY = this.y;
+    this.vx = 0;
+    this.vy = 0;
+  }
+
+  /**
+   * Advance the simulation to time `now` (ms). Returns the camera state.
+   * Call once per animation frame.
+   */
+  tick(now: number): CameraState {
+    const last = this.lastTick ?? now;
+    this.lastTick = now;
+    let dt = (now - last) / 1000;
+    if (dt <= 0) return this.state();
+    if (dt > 0.1) dt = 0.1; // clamp long gaps (tab switch) to avoid jumps
+
+    if (!this.dragging) {
+      // Inertia: the target coasts and the velocity decays exponentially.
+      const decay = Math.exp(-this.friction * dt);
+      if (Math.abs(this.vx) > SETTLE_VELOCITY || Math.abs(this.vy) > SETTLE_VELOCITY) {
+        // Integrate v over the step: x += v/friction * (1 - decay)
+        const integral = this.friction > 0 ? (1 - decay) / this.friction : dt;
+        this.targetX += this.vx * integral;
+        this.targetY += this.vy * integral;
+        this.vx *= decay;
+        this.vy *= decay;
+      } else {
+        this.vx = 0;
+        this.vy = 0;
+      }
+    }
+
+    // Ease the camera toward the target (frame-rate independent lerp).
+    const k = 1 - Math.exp(-this.ease * dt);
+    this.x += (this.targetX - this.x) * k;
+    this.y += (this.targetY - this.y) * k;
+    if (
+      Math.abs(this.targetX - this.x) < SETTLE_DISTANCE &&
+      Math.abs(this.targetY - this.y) < SETTLE_DISTANCE
+    ) {
+      this.x = this.targetX;
+      this.y = this.targetY;
+    }
+
+    return this.state();
+  }
+}

package/src/positioning.ts

@@ -0,0 +1,292 @@
+// Positioning helpers — pure functions, no state.
+//
+// Tiles can opt out of grid flow by setting `position: 'absolute'` or `'fixed'`.
+// Out-of-flow tiles keep their `col/row/w/h` fields (so they can fall back to
+// in-flow if the user toggles position back to 'static') but the layout engine
+// ignores them — they don't displace neighbors and they don't get displaced.
+//
+// Coordinate translation between the configured unit space (pixels / subcell /
+// cells) and raw pixels lives here so adapters and engine share one source of
+// truth.
+
+import type { GridConfig, Tile } from './types.js';
+
+/**
+ * Whether a tile participates in grid layout. `static`, `relative`, `sticky`,
+ * and tiles with no `position` set are all in flow. `absolute` and `fixed`
+ * tiles are not.
+ */
+export function isInFlow(tile: Tile): boolean {
+  const p = tile.position;
+  return !p || p === 'static' || p === 'relative' || p === 'sticky';
+}
+
+/** True for tiles that the engine should ignore for collisions and displacement. */
+export function isOutOfFlow(tile: Tile): boolean {
+  return !isInFlow(tile);
+}
+
+/**
+ * Convert `pinned` (in the configured `pinUnits`) to raw pixels. Used by
+ * adapters to compute `left/top` for absolute and fixed tiles.
+ */
+export function pinnedToPixels(
+  pinned: { x: number; y: number },
+  config: GridConfig,
+): { x: number; y: number } {
+  const colSize = config.unitWidth + (config.gap ?? 0);
+  const rowSize = config.unitHeight + (config.gap ?? 0);
+  switch (config.pinUnits ?? 'pixels') {
+    case 'pixels':
+      return { x: pinned.x, y: pinned.y };
+    case 'subcell':
+      return { x: pinned.x * colSize, y: pinned.y * rowSize };
+    case 'cells':
+      return { x: Math.round(pinned.x) * colSize, y: Math.round(pinned.y) * rowSize };
+  }
+}
+
+/** Inverse of `pinnedToPixels`. Convert pixels back to the configured pin-unit space. */
+export function pixelsToPin(
+  pixels: { x: number; y: number },
+  config: GridConfig,
+): { x: number; y: number } {
+  const colSize = config.unitWidth + (config.gap ?? 0);
+  const rowSize = config.unitHeight + (config.gap ?? 0);
+  switch (config.pinUnits ?? 'pixels') {
+    case 'pixels':
+      return { x: pixels.x, y: pixels.y };
+    case 'subcell':
+      return { x: pixels.x / colSize, y: pixels.y / rowSize };
+    case 'cells':
+      return { x: Math.round(pixels.x / colSize), y: Math.round(pixels.y / rowSize) };
+  }
+}
+
+/**
+ * Convert `offset` (in the configured `relativeUnits`) to raw pixels. Used by
+ * adapters to compute the visual nudge for `relative` tiles.
+ */
+export function offsetToPixels(
+  offset: { x: number; y: number },
+  config: GridConfig,
+): { x: number; y: number } {
+  const colSize = config.unitWidth + (config.gap ?? 0);
+  const rowSize = config.unitHeight + (config.gap ?? 0);
+  if ((config.relativeUnits ?? 'pixels') === 'pixels') {
+    return { x: offset.x, y: offset.y };
+  }
+  return { x: offset.x * colSize, y: offset.y * rowSize };
+}
+
+/** Inverse of `offsetToPixels`. */
+export function pixelsToOffset(
+  pixels: { x: number; y: number },
+  config: GridConfig,
+): { x: number; y: number } {
+  const colSize = config.unitWidth + (config.gap ?? 0);
+  const rowSize = config.unitHeight + (config.gap ?? 0);
+  if ((config.relativeUnits ?? 'pixels') === 'pixels') {
+    return { x: pixels.x, y: pixels.y };
+  }
+  return { x: pixels.x / colSize, y: pixels.y / rowSize };
+}
+
+/**
+ * Inputs to `computeTileLayout`. The adapter supplies live viewport/scroll
+ * values so sticky and fixed tiles can react to scrolling.
+ */
+export interface TileLayoutInput {
+  tile: { col: number; row: number; w: number; h: number; position?: import('./types.js').TilePosition; pinned?: { x: number; y: number }; offset?: { x: number; y: number }; sticky?: import('./types.js').StickyConfig };
+  config: import('./types.js').GridConfig;
+  scrollX: number;
+  scrollY: number;
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+export interface TileLayout {
+  /** Left edge in pixels relative to the scroll content origin. */
+  left: number;
+  /** Top edge in pixels relative to the scroll content origin. */
+  top: number;
+  /** Rendered width in pixels (derived from w + cellSize + gap). */
+  width: number;
+  /** Rendered height in pixels. */
+  height: number;
+  /** Optional CSS transform — currently used for `relative` offsets. */
+  transform?: string;
+  /** Stacking hint. Static tiles 1, sticky 40, absolute 30, fixed 50. */
+  zIndex: number;
+  /**
+   * The effective position mode that was applied (after honoring
+   * `enablePositioning`). Useful for adapters that want to add classes.
+   */
+  effective: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+}
+
+/**
+ * Compute where a tile should render in the scroll content, given current
+ * scroll/viewport state. Encapsulates the math for relative offsets, absolute
+ * pinned coords (in the configured pinUnits), fixed (anchored to the
+ * scrollable viewport via `pinned + scroll` math), and sticky (pins at an
+ * edge once scrolled past `threshold`). When `GridConfig.enablePositioning`
+ * is false, every tile is treated as `static`.
+ */
+export function computeTileLayout(input: TileLayoutInput): TileLayout {
+  const { tile, config, scrollX, scrollY, viewportWidth, viewportHeight } = input;
+  const gap = config.gap ?? 0;
+  const halfGap = gap / 2;
+  const colSize = config.unitWidth + gap;
+  const rowSize = config.unitHeight + gap;
+  const width = tile.w * config.unitWidth + (tile.w - 1) * gap;
+  const height = tile.h * config.unitHeight + (tile.h - 1) * gap;
+  const enabled = config.enablePositioning ?? false;
+  const pos = enabled ? (tile.position ?? 'static') : 'static';
+
+  if (pos === 'absolute') {
+    const px = pinnedToPixels(tile.pinned ?? { x: 0, y: 0 }, config);
+    return { left: px.x, top: px.y, width, height, zIndex: 30, effective: 'absolute' };
+  }
+  if (pos === 'fixed') {
+    const px = pinnedToPixels(tile.pinned ?? { x: 0, y: 0 }, config);
+    return {
+      left: px.x + scrollX,
+      top: px.y + scrollY,
+      width,
+      height,
+      zIndex: 50,
+      effective: 'fixed',
+    };
+  }
+  if (pos === 'sticky') {
+    const sticky = tile.sticky ?? { edge: 'top', threshold: 0 };
+    const threshold = sticky.threshold ?? 0;
+    let left = tile.col * colSize + halfGap;
+    let top = tile.row * rowSize + halfGap;
+    if (sticky.edge === 'top') {
+      const stickyTop = scrollY + threshold;
+      if (top < stickyTop) top = stickyTop;
+    } else if (sticky.edge === 'bottom') {
+      const stickyBottom = scrollY + viewportHeight - height - threshold;
+      if (top > stickyBottom) top = stickyBottom;
+    } else if (sticky.edge === 'left') {
+      const stickyLeft = scrollX + threshold;
+      if (left < stickyLeft) left = stickyLeft;
+    } else if (sticky.edge === 'right') {
+      const stickyRight = scrollX + viewportWidth - width - threshold;
+      if (left > stickyRight) left = stickyRight;
+    }
+    return { left, top, width, height, zIndex: 40, effective: 'sticky' };
+  }
+  // static / relative — tile is centered in its cell with halfGap inset
+  const baseLeft = tile.col * colSize + halfGap;
+  const baseTop = tile.row * rowSize + halfGap;
+  if (pos === 'relative' && tile.offset) {
+    const off = offsetToPixels(tile.offset, config);
+    return {
+      left: baseLeft,
+      top: baseTop,
+      width,
+      height,
+      transform: `translate(${off.x}px, ${off.y}px)`,
+      zIndex: 1,
+      effective: 'relative',
+    };
+  }
+  return { left: baseLeft, top: baseTop, width, height, zIndex: 1, effective: 'static' };
+}
+
+/**
+ * Adjust pre-computed layouts so multiple sticky tiles pinned to the same edge
+ * stack instead of overlapping — the natural CSS-sticky behavior where, as you
+ * scroll, a later sticky element pushes the previous one off-screen by taking
+ * its pinned spot.
+ *
+ * Pass the array of {tile, layout} pairs (in any order); this mutates the
+ * `layout.left`/`layout.top` values for sticky tiles in place. Run it AFTER
+ * `computeTileLayout` and BEFORE rendering. Non-sticky entries are skipped.
+ */
+export function resolveStickyStacking(
+  entries: { tile: TileLayoutInput['tile']; layout: TileLayout }[],
+): void {
+  const tops: { tile: TileLayoutInput['tile']; layout: TileLayout }[] = [];
+  const bots: { tile: TileLayoutInput['tile']; layout: TileLayout }[] = [];
+  const lefts: { tile: TileLayoutInput['tile']; layout: TileLayout }[] = [];
+  const rights: { tile: TileLayoutInput['tile']; layout: TileLayout }[] = [];
+  for (const e of entries) {
+    if (e.layout.effective !== 'sticky') continue;
+    const edge = e.tile.sticky?.edge ?? 'top';
+    if (edge === 'top') tops.push(e);
+    else if (edge === 'bottom') bots.push(e);
+    else if (edge === 'left') lefts.push(e);
+    else rights.push(e);
+  }
+
+  // Top: sort by natural row ascending. A later (larger-row) sticky whose
+  // current rendered top intrudes on an earlier one pushes it up off-screen.
+  tops.sort((a, b) => a.tile.row - b.tile.row);
+  for (let i = 0; i < tops.length; i++) {
+    const a = tops[i];
+    if (!a) continue;
+    for (let j = i + 1; j < tops.length; j++) {
+      const b = tops[j];
+      if (!b) continue;
+      const aBottom = a.layout.top + a.layout.height;
+      if (b.layout.top < aBottom) {
+        a.layout.top = b.layout.top - a.layout.height;
+        break;
+      }
+    }
+  }
+
+  // Bottom: mirror of top — sort by natural row descending.
+  bots.sort((a, b) => b.tile.row - a.tile.row);
+  for (let i = 0; i < bots.length; i++) {
+    const a = bots[i];
+    if (!a) continue;
+    for (let j = i + 1; j < bots.length; j++) {
+      const b = bots[j];
+      if (!b) continue;
+      const aTop = a.layout.top;
+      const bBottom = b.layout.top + b.layout.height;
+      if (bBottom > aTop) {
+        a.layout.top = bBottom;
+        break;
+      }
+    }
+  }
+
+  // Left: mirror of top along the col axis.
+  lefts.sort((a, b) => a.tile.col - b.tile.col);
+  for (let i = 0; i < lefts.length; i++) {
+    const a = lefts[i];
+    if (!a) continue;
+    for (let j = i + 1; j < lefts.length; j++) {
+      const b = lefts[j];
+      if (!b) continue;
+      const aRight = a.layout.left + a.layout.width;
+      if (b.layout.left < aRight) {
+        a.layout.left = b.layout.left - a.layout.width;
+        break;
+      }
+    }
+  }
+
+  // Right: mirror of bottom along the col axis.
+  rights.sort((a, b) => b.tile.col - a.tile.col);
+  for (let i = 0; i < rights.length; i++) {
+    const a = rights[i];
+    if (!a) continue;
+    for (let j = i + 1; j < rights.length; j++) {
+      const b = rights[j];
+      if (!b) continue;
+      const aLeft = a.layout.left;
+      const bRight = b.layout.left + b.layout.width;
+      if (bRight > aLeft) {
+        a.layout.left = bRight;
+        break;
+      }
+    }
+  }
+}