Rust + WebAssembly
layout engine

// One async call. No bundler needed.
import { layout } from "./js/index.js";

const items = [
  { text: "WebAssembly", weight: 100 },
  { text: "Rust",        weight: 80  },
  { text: "layout",      weight: 40  },
];

const placements = await layout(items, {
  mode:        "pretty",  // "pretty" | "balanced" | "fast"
  width:       960,
  height:      600,
  minFontSize: 14,
  maxFontSize: 88,
  padding:     2,
  // The font you render with. Words get measured in it via canvas,
  // so footprints match the drawn glyphs. Defaults to sans-serif.
  font:        "Inter, sans-serif",
});
// → [{ text, x, y, rotation, fontSize, baselineOffset }, ...]
// x/y are bbox center — render with center anchoring.

const ctx = canvas.getContext("2d");
ctx.textAlign    = "center";
ctx.textBaseline = "middle";
for (const p of placements) {
  ctx.save();
  ctx.translate(p.x, p.y);
  if (p.rotation) ctx.rotate(p.rotation * Math.PI / 180);
  ctx.font = `${p.fontSize}px Inter, sans-serif`;
  ctx.fillText(p.text, 0, 0);
  ctx.restore();
}

// Layout runs on a dedicated Worker.
// Concurrent calls are safe — request IDs are matched.
import { createLayoutWorker } from "./js/layout-worker.js";

const layoutWorker = createLayoutWorker();

const placements = await layoutWorker.layout(items, {
  mode:   "pretty",
  width:  960,
  height: 600,
});

// Render exactly as before — x/y are still bbox centers.
// Call layoutWorker.terminate() when you're done with the worker.
layoutWorker.terminate();

import { treemap } from "./js/index.js";

const rects = await treemap(
  [
    { text: "Rust",   weight: 78 },
    { text: "wasm",   weight: 40 },
    { text: "layout", weight: 30 },
    /* … */
  ],
  { width: 960, height: 600 },
);
// → [{ text, value, x, y, width, height }, ...]
// x/y are top-left — render with fillRect.

const ctx = canvas.getContext("2d");
for (const r of rects) {
  ctx.fillRect(r.x, r.y, r.width, r.height);
}