@fieldnotes/core 0.64.0 → 0.66.0

package/dist/index.js

@@ -454,8 +454,464 @@ function sanitizeAttributes(el, tag) {
   }
 }
 
+// src/fog/types.ts
+var FOG_STATE_VERSION = 1;
+var FOG_TILE_CELLS = 128;
+var FOG_MAX_TILES = 256;
+
+// src/fog/tile-codec.ts
+var TILE_BYTES = FOG_TILE_CELLS * FOG_TILE_CELLS / 8;
+var CANONICAL_B64_LENGTH = Math.ceil(TILE_BYTES / 3) * 4;
+var B64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+var B64_LOOKUP = new Uint8Array(128);
+for (let i = 0; i < B64_CHARS.length; i++) B64_LOOKUP[B64_CHARS.charCodeAt(i)] = i;
+function encodeBase64(bytes) {
+  let result = "";
+  const len = bytes.length;
+  for (let i = 0; i < len; i += 3) {
+    const a = bytes[i];
+    const b = i + 1 < len ? bytes[i + 1] : 0;
+    const c = i + 2 < len ? bytes[i + 2] : 0;
+    result += B64_CHARS[a >> 2 & 63];
+    result += B64_CHARS[(a << 4 | b >> 4) & 63];
+    result += i + 1 < len ? B64_CHARS[(b << 2 | c >> 6) & 63] : "=";
+    result += i + 2 < len ? B64_CHARS[c & 63] : "=";
+  }
+  return result;
+}
+function decodeBase64(str) {
+  if (str.length % 4 !== 0) throw new Error("Invalid base64 length");
+  let padCount = 0;
+  if (str.length >= 2 && str[str.length - 1] === "=") {
+    padCount++;
+    if (str[str.length - 2] === "=") padCount++;
+  }
+  const byteLen = str.length / 4 * 3 - padCount;
+  const bytes = new Uint8Array(byteLen);
+  let j = 0;
+  for (let i = 0; i < str.length; i += 4) {
+    const a = B64_LOOKUP[str.charCodeAt(i)];
+    const b = B64_LOOKUP[str.charCodeAt(i + 1)];
+    const c = str[i + 2] === "=" ? 0 : B64_LOOKUP[str.charCodeAt(i + 2)];
+    const d = str[i + 3] === "=" ? 0 : B64_LOOKUP[str.charCodeAt(i + 3)];
+    bytes[j++] = a << 2 | b >> 4;
+    if (j < byteLen) bytes[j++] = (b << 4 | c >> 2) & 255;
+    if (j < byteLen) bytes[j++] = (c << 6 | d) & 255;
+  }
+  return bytes;
+}
+function createTileBytes(fill) {
+  const bytes = new Uint8Array(TILE_BYTES);
+  if (fill) bytes.fill(255);
+  return bytes;
+}
+function setBit(bytes, col, row, value) {
+  const index = row * FOG_TILE_CELLS + col;
+  const byteIndex = index >> 3;
+  const bitIndex = 7 - (index & 7);
+  if (value) {
+    bytes[byteIndex] = bytes[byteIndex] | 1 << bitIndex;
+  } else {
+    bytes[byteIndex] = bytes[byteIndex] & ~(1 << bitIndex);
+  }
+}
+function isTileAllValue(bytes, value) {
+  const expected = value ? 255 : 0;
+  for (let i = 0; i < TILE_BYTES; i++) {
+    if (bytes[i] !== expected) return false;
+  }
+  return true;
+}
+function isBaseValue(base) {
+  return base === "revealed";
+}
+function isTileBase(bytes, base) {
+  return isTileAllValue(bytes, isBaseValue(base));
+}
+function canonicalizeEdgePadding(bytes, def, tileX, tileY) {
+  const baseVal = isBaseValue(def.base);
+  const worldX = tileX * FOG_TILE_CELLS * def.cellSize;
+  const worldY = tileY * FOG_TILE_CELLS * def.cellSize;
+  const boundsRight = def.bounds.x + def.bounds.w;
+  const boundsBottom = def.bounds.y + def.bounds.h;
+  for (let row = 0; row < FOG_TILE_CELLS; row++) {
+    for (let col = 0; col < FOG_TILE_CELLS; col++) {
+      const cellWorldX = worldX + col * def.cellSize;
+      const cellWorldY = worldY + row * def.cellSize;
+      const outside = cellWorldX < def.bounds.x || cellWorldY < def.bounds.y || cellWorldX >= boundsRight || cellWorldY >= boundsBottom;
+      if (outside) {
+        setBit(bytes, col, row, baseVal);
+      }
+    }
+  }
+}
+function canonicalizeFogTile(tile, def) {
+  const bytes = decodeBase64(tile.data);
+  canonicalizeEdgePadding(bytes, def, tile.x, tile.y);
+  if (isTileBase(bytes, def.base)) return null;
+  return { x: tile.x, y: tile.y, data: encodeBase64(bytes) };
+}
+function isCanonicalBase64(str) {
+  if (str.length !== CANONICAL_B64_LENGTH) return false;
+  if (str[str.length - 1] !== "=" || str[str.length - 2] === "=") return false;
+  for (let i = 0; i < str.length - 1; i++) {
+    if (!B64_CHARS.includes(str[i])) return false;
+  }
+  const finalSextet = B64_CHARS.indexOf(str[str.length - 2]);
+  return finalSextet >= 0 && (finalSextet & 3) === 0;
+}
+function isSafeInteger(n2) {
+  return typeof n2 === "number" && Number.isSafeInteger(n2);
+}
+function isFinitePositive(n2) {
+  return typeof n2 === "number" && Number.isFinite(n2) && n2 > 0;
+}
+function isFiniteBounds(b) {
+  if (typeof b !== "object" || b === null) return false;
+  const r = b;
+  return typeof r["x"] === "number" && Number.isFinite(r["x"]) && typeof r["y"] === "number" && Number.isFinite(r["y"]) && isFinitePositive(r["w"]) && isFinitePositive(r["h"]);
+}
+function tileIntersectsBounds(x, y, def) {
+  const tileWorldX = x * FOG_TILE_CELLS * def.cellSize;
+  const tileWorldY = y * FOG_TILE_CELLS * def.cellSize;
+  const tileWorldW = FOG_TILE_CELLS * def.cellSize;
+  const tileWorldH = FOG_TILE_CELLS * def.cellSize;
+  return !(tileWorldX + tileWorldW <= def.bounds.x || tileWorldY + tileWorldH <= def.bounds.y || tileWorldX >= def.bounds.x + def.bounds.w || tileWorldY >= def.bounds.y + def.bounds.h);
+}
+function validateFogDefinition(def) {
+  if (typeof def !== "object" || def === null) {
+    throw new Error("Invalid fog definition: expected an object");
+  }
+  const d = def;
+  if (d["version"] !== 1) throw new Error("Invalid fog definition: unsupported version");
+  if (typeof d["generation"] !== "string" || d["generation"].length === 0 || d["generation"].length > 128 || !/^[\x20-\x7e]+$/.test(d["generation"])) {
+    throw new Error("Invalid fog definition: invalid generation");
+  }
+  if (!isFiniteBounds(d["bounds"])) {
+    throw new Error("Invalid fog definition: invalid bounds");
+  }
+  if (!isFinitePositive(d["cellSize"])) {
+    throw new Error("Invalid fog definition: invalid cellSize");
+  }
+  if (d["tileCells"] !== 128) {
+    throw new Error("Invalid fog definition: tileCells must be 128");
+  }
+  if (d["base"] !== "covered" && d["base"] !== "revealed") {
+    throw new Error("Invalid fog definition: invalid base");
+  }
+}
+function validateFogTile(tile, def) {
+  if (typeof tile !== "object" || tile === null) {
+    throw new Error("Invalid fog tile: expected an object");
+  }
+  const t = tile;
+  if (!isSafeInteger(t["x"]) || !isSafeInteger(t["y"])) {
+    throw new Error("Invalid fog tile: coordinates must be safe integers");
+  }
+  if (!tileIntersectsBounds(t["x"], t["y"], def)) {
+    throw new Error("Invalid fog tile: coordinates outside bounds");
+  }
+  if (typeof t["data"] !== "string" || !isCanonicalBase64(t["data"])) {
+    throw new Error("Invalid fog tile: invalid data");
+  }
+  const decoded = decodeBase64(t["data"]);
+  if (decoded.length !== TILE_BYTES) {
+    throw new Error("Invalid fog tile: decoded data wrong length");
+  }
+  if (isTileBase(decoded, def.base)) {
+    throw new Error("Invalid fog tile: base-value tiles must be omitted");
+  }
+  const canonical = new Uint8Array(decoded);
+  canonicalizeEdgePadding(canonical, def, t["x"], t["y"]);
+  for (let i = 0; i < decoded.length; i++) {
+    if (decoded[i] !== canonical[i]) {
+      throw new Error("Invalid fog tile: non-canonical edge padding");
+    }
+  }
+}
+function validateFogState(state) {
+  if (typeof state !== "object" || state === null) {
+    throw new Error("Invalid fog state: expected an object");
+  }
+  const s = state;
+  validateFogDefinition(s["definition"]);
+  const def = s["definition"];
+  if (!Array.isArray(s["tiles"])) {
+    throw new Error("Invalid fog state: tiles must be an array");
+  }
+  const tiles = s["tiles"];
+  if (tiles.length > FOG_MAX_TILES) {
+    throw new Error(`Invalid fog state: too many tiles (${tiles.length} > ${FOG_MAX_TILES})`);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const tile of tiles) {
+    validateFogTile(tile, def);
+    const t = tile;
+    const key = `${t.x},${t.y}`;
+    if (seen.has(key)) {
+      throw new Error(`Invalid fog state: duplicate tile at (${t.x}, ${t.y})`);
+    }
+    seen.add(key);
+  }
+}
+function recommendedFogCellSize(bounds) {
+  let cellSize = 1;
+  while (true) {
+    const tileWorldSize = FOG_TILE_CELLS * cellSize;
+    const minTX = Math.floor(bounds.x / tileWorldSize);
+    const minTY = Math.floor(bounds.y / tileWorldSize);
+    const maxTX = Math.ceil((bounds.x + bounds.w) / tileWorldSize) - 1;
+    const maxTY = Math.ceil((bounds.y + bounds.h) / tileWorldSize) - 1;
+    const tw = maxTX - minTX + 1;
+    const th = maxTY - minTY + 1;
+    if (tw * th <= FOG_MAX_TILES) return cellSize;
+    cellSize++;
+    if (cellSize > 1e4) return cellSize;
+  }
+}
+function tileKey(x, y) {
+  return `${x},${y}`;
+}
+function worldToCell(worldX, worldY, cellSize) {
+  const cellX = Math.floor(worldX / cellSize);
+  const cellY = Math.floor(worldY / cellSize);
+  const tx = Math.floor(cellX / FOG_TILE_CELLS);
+  const ty = Math.floor(cellY / FOG_TILE_CELLS);
+  let col = cellX - tx * FOG_TILE_CELLS;
+  let row = cellY - ty * FOG_TILE_CELLS;
+  if (col < 0) col += FOG_TILE_CELLS;
+  if (row < 0) row += FOG_TILE_CELLS;
+  return { tx, ty, col, row };
+}
+function rasterizeRegion(state, region, operation) {
+  const { definition } = state;
+  const bitValue = operation === "reveal";
+  const tileMap = /* @__PURE__ */ new Map();
+  for (const tile of state.tiles) {
+    tileMap.set(tileKey(tile.x, tile.y), decodeBase64(tile.data));
+  }
+  const baseFill = isBaseValue(definition.base);
+  const affectedTiles = /* @__PURE__ */ new Set();
+  const setCellIfInBounds = (worldX, worldY) => {
+    if (worldX < definition.bounds.x || worldY < definition.bounds.y || worldX >= definition.bounds.x + definition.bounds.w || worldY >= definition.bounds.y + definition.bounds.h) {
+      return;
+    }
+    const { tx, ty, col, row } = worldToCell(worldX, worldY, definition.cellSize);
+    if (!tileIntersectsBounds(tx, ty, definition)) return;
+    const key = tileKey(tx, ty);
+    let bytes = tileMap.get(key);
+    if (!bytes) {
+      bytes = createTileBytes(baseFill);
+      tileMap.set(key, bytes);
+    } else if (!affectedTiles.has(key)) {
+      const clone = new Uint8Array(bytes);
+      tileMap.set(key, clone);
+      bytes = clone;
+    }
+    affectedTiles.add(key);
+    setBit(bytes, col, row, bitValue);
+  };
+  switch (region.kind) {
+    case "brush":
+      rasterizeBrush(region.points, region.radius, definition, setCellIfInBounds);
+      break;
+    case "rectangle":
+      rasterizeRectangle(region.from, region.to, definition, setCellIfInBounds);
+      break;
+    case "polygon":
+      rasterizePolygon(region.points, definition, setCellIfInBounds);
+      break;
+  }
+  if (affectedTiles.size === 0) return { changed: [], noop: true };
+  const changedTiles = [];
+  let hasChange = false;
+  for (const key of affectedTiles) {
+    const bytes = tileMap.get(key);
+    const [txStr, tyStr] = key.split(",");
+    const tx = Number(txStr);
+    const ty = Number(tyStr);
+    canonicalizeEdgePadding(bytes, definition, tx, ty);
+    const newData = encodeBase64(bytes);
+    const originalTile = state.tiles.find((t) => t.x === tx && t.y === ty);
+    if (originalTile) {
+      if (originalTile.data !== newData) {
+        hasChange = true;
+        changedTiles.push({ x: tx, y: ty, data: newData });
+      }
+    } else if (!isTileBase(bytes, definition.base)) {
+      hasChange = true;
+      changedTiles.push({ x: tx, y: ty, data: newData });
+    }
+  }
+  if (!hasChange) return { changed: [], noop: true };
+  return { changed: changedTiles, noop: false };
+}
+function applyRasterResult(state, result) {
+  if (result.noop) return state;
+  const changedMap = /* @__PURE__ */ new Map();
+  for (const t of result.changed) changedMap.set(tileKey(t.x, t.y), t);
+  const tiles = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const tile of state.tiles) {
+    const key = tileKey(tile.x, tile.y);
+    seen.add(key);
+    const changed = changedMap.get(key);
+    if (changed) {
+      const bytes = decodeBase64(changed.data);
+      if (!isTileBase(bytes, state.definition.base)) {
+        tiles.push(changed);
+      }
+    } else {
+      tiles.push(tile);
+    }
+  }
+  for (const t of result.changed) {
+    const key = tileKey(t.x, t.y);
+    if (seen.has(key)) continue;
+    const bytes = decodeBase64(t.data);
+    if (!isTileBase(bytes, state.definition.base)) {
+      tiles.push(t);
+    }
+  }
+  if (tiles.length > FOG_MAX_TILES) {
+    throw new Error(`Fog tile cap exceeded: ${tiles.length} > ${FOG_MAX_TILES}`);
+  }
+  return { definition: state.definition, tiles };
+}
+function sampleAndSimplify(points, tolerance) {
+  if (points.length <= 2) return [...points];
+  const sampled = [points[0]];
+  let lastSampled = points[0];
+  for (let i = 1; i < points.length - 1; i++) {
+    const p = points[i];
+    const dx = p.x - lastSampled.x;
+    const dy = p.y - lastSampled.y;
+    if (dx * dx + dy * dy >= tolerance * tolerance) {
+      sampled.push(p);
+      lastSampled = p;
+    }
+  }
+  sampled.push(points[points.length - 1]);
+  return sampled;
+}
+function rasterizeBrush(points, radius, def, setCell) {
+  if (points.length === 0) return;
+  const simplified = sampleAndSimplify(points, def.cellSize * 0.5);
+  for (let i = 0; i < simplified.length; i++) {
+    const p = simplified[i];
+    rasterizeDisc(p.x, p.y, radius, def, setCell);
+    if (i > 0) {
+      const prev = simplified[i - 1];
+      rasterizeCapsuleSegment(prev.x, prev.y, p.x, p.y, radius, def, setCell);
+    }
+  }
+}
+function rasterizeDisc(cx, cy, radius, def, setCell) {
+  const minX = Math.max(def.bounds.x, cx - radius);
+  const maxX = Math.min(def.bounds.x + def.bounds.w - 1, cx + radius);
+  const minY = Math.max(def.bounds.y, cy - radius);
+  const maxY = Math.min(def.bounds.y + def.bounds.h - 1, cy + radius);
+  const startCol = Math.floor(minX / def.cellSize) * def.cellSize;
+  const startRow = Math.floor(minY / def.cellSize) * def.cellSize;
+  const r2 = radius * radius;
+  for (let wy = startRow; wy <= maxY; wy += def.cellSize) {
+    for (let wx = startCol; wx <= maxX; wx += def.cellSize) {
+      const cellCenterX = wx + def.cellSize * 0.5;
+      const cellCenterY = wy + def.cellSize * 0.5;
+      const dx = cellCenterX - cx;
+      const dy = cellCenterY - cy;
+      if (dx * dx + dy * dy <= r2) {
+        setCell(wx, wy);
+      }
+    }
+  }
+}
+function rasterizeCapsuleSegment(x1, y1, x2, y2, radius, def, setCell) {
+  const segDx = x2 - x1;
+  const segDy = y2 - y1;
+  const segLen2 = segDx * segDx + segDy * segDy;
+  if (segLen2 === 0) return;
+  const minX = Math.max(def.bounds.x, Math.min(x1, x2) - radius);
+  const maxX = Math.min(def.bounds.x + def.bounds.w - 1, Math.max(x1, x2) + radius);
+  const minY = Math.max(def.bounds.y, Math.min(y1, y2) - radius);
+  const maxY = Math.min(def.bounds.y + def.bounds.h - 1, Math.max(y1, y2) + radius);
+  const startCol = Math.floor(minX / def.cellSize) * def.cellSize;
+  const startRow = Math.floor(minY / def.cellSize) * def.cellSize;
+  const r2 = radius * radius;
+  for (let wy = startRow; wy <= maxY; wy += def.cellSize) {
+    for (let wx = startCol; wx <= maxX; wx += def.cellSize) {
+      const cellCenterX = wx + def.cellSize * 0.5;
+      const cellCenterY = wy + def.cellSize * 0.5;
+      const t = Math.max(
+        0,
+        Math.min(1, ((cellCenterX - x1) * segDx + (cellCenterY - y1) * segDy) / segLen2)
+      );
+      const projX = x1 + t * segDx;
+      const projY = y1 + t * segDy;
+      const dx = cellCenterX - projX;
+      const dy = cellCenterY - projY;
+      if (dx * dx + dy * dy <= r2) {
+        setCell(wx, wy);
+      }
+    }
+  }
+}
+function rasterizeRectangle(from, to, def, setCell) {
+  const minX = Math.max(def.bounds.x, Math.min(from.x, to.x));
+  const maxX = Math.min(def.bounds.x + def.bounds.w - 1, Math.max(from.x, to.x));
+  const minY = Math.max(def.bounds.y, Math.min(from.y, to.y));
+  const maxY = Math.min(def.bounds.y + def.bounds.h - 1, Math.max(from.y, to.y));
+  const startCol = Math.floor(minX / def.cellSize) * def.cellSize;
+  const startRow = Math.floor(minY / def.cellSize) * def.cellSize;
+  for (let wy = startRow; wy <= maxY; wy += def.cellSize) {
+    for (let wx = startCol; wx <= maxX; wx += def.cellSize) {
+      setCell(wx, wy);
+    }
+  }
+}
+function rasterizePolygon(points, def, setCell) {
+  if (points.length < 3) return;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  minX = Math.max(def.bounds.x, minX);
+  maxX = Math.min(def.bounds.x + def.bounds.w - 1, maxX);
+  minY = Math.max(def.bounds.y, minY);
+  maxY = Math.min(def.bounds.y + def.bounds.h - 1, maxY);
+  const startCol = Math.floor(minX / def.cellSize) * def.cellSize;
+  const startRow = Math.floor(minY / def.cellSize) * def.cellSize;
+  for (let wy = startRow; wy <= maxY; wy += def.cellSize) {
+    for (let wx = startCol; wx <= maxX; wx += def.cellSize) {
+      const cx = wx + def.cellSize * 0.5;
+      const cy = wy + def.cellSize * 0.5;
+      if (pointInPolygon(cx, cy, points)) {
+        setCell(wx, wy);
+      }
+    }
+  }
+}
+function pointInPolygon(x, y, polygon) {
+  let inside = false;
+  const n2 = polygon.length;
+  for (let i = 0, j = n2 - 1; i < n2; j = i++) {
+    const pi = polygon[i];
+    const pj = polygon[j];
+    if (pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
 // src/core/state-serializer.ts
-var CURRENT_VERSION = 2;
+var CURRENT_VERSION = 3;
 var ELEMENT_TYPES = [
   "stroke",
   "note",
@@ -467,7 +923,7 @@ var ELEMENT_TYPES = [
   "grid",
   "template"
 ];
-function exportState(elements, camera, layers = [], activeLayerId) {
+function exportState(elements, camera, layers = [], activeLayerId, fog) {
   const state = {
     version: CURRENT_VERSION,
     camera: {
@@ -484,6 +940,7 @@ function exportState(elements, camera, layers = [], activeLayerId) {
     layers: layers.map((l) => ({ ...l }))
   };
   if (activeLayerId) state.activeLayerId = activeLayerId;
+  if (fog) state.fog = structuredClone(fog);
   return state;
 }
 function parseState(json) {
@@ -561,6 +1018,9 @@ function validateState(data) {
     }
   }
   cleanBindings(elements);
+  if (obj["fog"] !== void 0 && obj["fog"] !== null) {
+    validateFogState(obj["fog"]);
+  }
 }
 function validateElement(el) {
   if (!isRecord(el)) {
@@ -706,12 +1166,14 @@ var AutoSave = class {
     this.key = options.key ?? DEFAULT_KEY;
     this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
     this.layerManager = options.layerManager;
+    this.fogManager = options.fogManager;
     this.adapter = options.adapter ?? new LocalStorageAdapter();
     this.onError = options.onError;
   }
   key;
   debounceMs;
   layerManager;
+  fogManager;
   adapter;
   timerId = null;
   unsubscribers = [];
@@ -729,6 +1191,9 @@ var AutoSave = class {
     if (this.layerManager) {
       this.unsubscribers.push(this.layerManager.on("change", schedule));
     }
+    if (this.fogManager) {
+      this.unsubscribers.push(this.fogManager.on("change", schedule));
+    }
   }
   stop() {
     this.cancelPending();
@@ -765,7 +1230,8 @@ var AutoSave = class {
     this.saving = true;
     try {
       const layers = this.layerManager?.snapshot() ?? [];
-      const state = exportState(this.store.snapshot(), this.camera, layers);
+      const fog = this.fogManager?.getState() ?? void 0;
+      const state = exportState(this.store.snapshot(), this.camera, layers, void 0, fog);
       await this.adapter.save(this.key, JSON.stringify(state));
     } catch (e) {
       this.onError?.(e instanceof Error ? e : new Error(String(e)));
@@ -5097,6 +5563,8 @@ var MinimapController = class {
   // read the `viewport` parameter. Assigned in the constructor body instead.
   htmlPainters;
   scene = null;
+  fogRenderer = null;
+  fogUnsub = null;
   frameId = null;
   debounceTimer = null;
   dragging = false;
@@ -5111,6 +5579,15 @@ var MinimapController = class {
     this.renderScene();
     this.requestDraw();
   }
+  setFogRenderer(renderer) {
+    if (this.disposed) return;
+    if (this.fogUnsub) {
+      this.fogUnsub();
+      this.fogUnsub = null;
+    }
+    this.fogRenderer = renderer;
+    this.invalidateScene();
+  }
   requestDraw() {
     if (this.disposed || this.frameId !== null) return;
     this.frameId = this.requestFrame(this.draw);
@@ -5172,8 +5649,15 @@ var MinimapController = class {
   }
   currentMapping() {
     const viewportRect = this.viewport.getVisibleRect();
-    const content = getElementsBoundingBox(this.sceneElements());
-    return content ? unionBounds(content, viewportRect) : viewportRect;
+    let mapping = getElementsBoundingBox(this.sceneElements());
+    mapping = mapping ? unionBounds(mapping, viewportRect) : viewportRect;
+    if (this.fogRenderer?.isVisible()) {
+      const fogState = this.fogRenderer.getState();
+      if (fogState) {
+        mapping = unionBounds(mapping, fogState.definition.bounds);
+      }
+    }
+    return mapping;
   }
   onViewChanged() {
     if (this.disposed) return;
@@ -5231,6 +5715,23 @@ var MinimapController = class {
       ctx.drawImage(layerCanvas, 0, 0);
       ctx.restore();
     }
+    if (this.fogRenderer?.isVisible()) {
+      const fogState = this.fogRenderer.getState();
+      const fogMode = this.fogRenderer.getViewMode();
+      if (fogState && (fogMode === "editor" || fogMode === "player")) {
+        ctx.save();
+        ctx.setTransform(
+          dpr * transform.scale,
+          0,
+          0,
+          dpr * transform.scale,
+          dpr * transform.offsetX,
+          dpr * transform.offsetY
+        );
+        this.fogRenderer.renderForExport(ctx, fogState, fogMode);
+        ctx.restore();
+      }
+    }
     this.scene = { canvas: sceneCanvas, transform, mapping };
   }
   renderLayerElements(ctx, elements, t, dpr) {
@@ -5343,9 +5844,15 @@ var Minimap = class {
     this.canvas = canvas;
     this.controller = new MinimapController(viewport, canvas, { width: WIDTH, height: HEIGHT });
   }
+  setFogRenderer(renderer) {
+    this.controller.setFogRenderer(renderer);
+  }
   scheduleDraw() {
     this.controller.requestDraw();
   }
+  invalidateScene() {
+    this.controller.invalidateScene();
+  }
   destroy() {
     this.controller.dispose();
     this.canvas.remove();
@@ -6667,6 +7174,220 @@ async function renderHtmlElements(elements, options) {
   return sources;
 }
 
+// src/fog/fog-renderer.ts
+var DEFAULT_EDITOR_COLOR = "rgba(30, 40, 60, 0.45)";
+var DEFAULT_PLAYER_COLOR = "#0b1020";
+var FogRenderer = class {
+  tileCache = /* @__PURE__ */ new Map();
+  state = null;
+  viewMode = "off";
+  dirty = true;
+  editorColor;
+  playerColor;
+  constructor(options = {}) {
+    this.editorColor = options.editorColor ?? DEFAULT_EDITOR_COLOR;
+    this.playerColor = options.playerColor ?? DEFAULT_PLAYER_COLOR;
+  }
+  setState(state) {
+    this.state = state;
+    this.dirty = true;
+  }
+  setViewMode(mode) {
+    if (mode === this.viewMode) return;
+    this.viewMode = mode;
+    this.dirty = true;
+  }
+  getState() {
+    return this.state;
+  }
+  getViewMode() {
+    return this.viewMode;
+  }
+  markDirty() {
+    this.dirty = true;
+  }
+  isDirty() {
+    return this.dirty;
+  }
+  isVisible() {
+    return this.viewMode !== "off" && this.state !== null;
+  }
+  render(ctx, camera, viewportWidth, viewportHeight, _dpr) {
+    if (!this.state || this.viewMode === "off") return;
+    const def = this.state.definition;
+    const cellSize = def.cellSize;
+    const tileWorldSize = FOG_TILE_CELLS * cellSize;
+    const color = this.viewMode === "editor" ? this.editorColor : this.playerColor;
+    const worldBounds = getVisibleWorld(camera, viewportWidth, viewportHeight);
+    const minTX = Math.floor(Math.max(def.bounds.x, worldBounds.x) / tileWorldSize);
+    const minTY = Math.floor(Math.max(def.bounds.y, worldBounds.y) / tileWorldSize);
+    const maxTX = Math.floor(
+      Math.min(def.bounds.x + def.bounds.w - 1, worldBounds.x + worldBounds.w) / tileWorldSize
+    );
+    const maxTY = Math.floor(
+      Math.min(def.bounds.y + def.bounds.h - 1, worldBounds.y + worldBounds.h) / tileWorldSize
+    );
+    ctx.save();
+    ctx.translate(camera.position.x, camera.position.y);
+    ctx.scale(camera.zoom, camera.zoom);
+    const tileMap = /* @__PURE__ */ new Map();
+    for (const tile of this.state.tiles) {
+      tileMap.set(`${tile.x},${tile.y}`, tile.data);
+    }
+    const baseCovered = def.base === "covered";
+    for (let ty = minTY; ty <= maxTY; ty++) {
+      for (let tx = minTX; tx <= maxTX; tx++) {
+        const key = `${tx},${ty}`;
+        const data = tileMap.get(key);
+        const tileWorldX = tx * tileWorldSize;
+        const tileWorldY = ty * tileWorldSize;
+        if (!data && baseCovered) {
+          ctx.fillStyle = color;
+          const clipX = Math.max(tileWorldX, def.bounds.x);
+          const clipY = Math.max(tileWorldY, def.bounds.y);
+          const clipR = Math.min(tileWorldX + tileWorldSize, def.bounds.x + def.bounds.w);
+          const clipB = Math.min(tileWorldY + tileWorldSize, def.bounds.y + def.bounds.h);
+          if (clipR > clipX && clipB > clipY) {
+            ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+          }
+          continue;
+        }
+        if (!data && !baseCovered) {
+          continue;
+        }
+        if (data) {
+          this.renderTile(ctx, data, tx, ty, def, color);
+        }
+      }
+    }
+    ctx.restore();
+    this.dirty = false;
+  }
+  renderForExport(ctx, state, mode, color) {
+    const def = state.definition;
+    const cellSize = def.cellSize;
+    const tileWorldSize = FOG_TILE_CELLS * cellSize;
+    const fogColor = color ?? (mode === "editor" ? this.editorColor : this.playerColor);
+    const baseCovered = def.base === "covered";
+    const tileMap = /* @__PURE__ */ new Map();
+    for (const tile of state.tiles) {
+      tileMap.set(`${tile.x},${tile.y}`, tile.data);
+    }
+    const minTX = Math.floor(def.bounds.x / tileWorldSize);
+    const minTY = Math.floor(def.bounds.y / tileWorldSize);
+    const maxTX = Math.floor((def.bounds.x + def.bounds.w - 1) / tileWorldSize);
+    const maxTY = Math.floor((def.bounds.y + def.bounds.h - 1) / tileWorldSize);
+    for (let ty = minTY; ty <= maxTY; ty++) {
+      for (let tx = minTX; tx <= maxTX; tx++) {
+        const key = `${tx},${ty}`;
+        const data = tileMap.get(key);
+        const tileWorldX = tx * tileWorldSize;
+        const tileWorldY = ty * tileWorldSize;
+        if (!data && baseCovered) {
+          ctx.fillStyle = fogColor;
+          const clipX = Math.max(tileWorldX, def.bounds.x);
+          const clipY = Math.max(tileWorldY, def.bounds.y);
+          const clipR = Math.min(tileWorldX + tileWorldSize, def.bounds.x + def.bounds.w);
+          const clipB = Math.min(tileWorldY + tileWorldSize, def.bounds.y + def.bounds.h);
+          if (clipR > clipX && clipB > clipY) {
+            ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+          }
+          continue;
+        }
+        if (data) {
+          this.renderTileForExport(ctx, data, tx, ty, def, fogColor);
+        }
+      }
+    }
+  }
+  dispose() {
+    this.tileCache.clear();
+    this.state = null;
+  }
+  tileRaster(data, color) {
+    const key = `${color}\0${data}`;
+    const cached = this.tileCache.get(key);
+    if (cached) return cached;
+    if (typeof document === "undefined") return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = FOG_TILE_CELLS;
+    canvas.height = FOG_TILE_CELLS;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    const bytes = decodeBase64(data);
+    ctx.fillStyle = color;
+    for (let row = 0; row < FOG_TILE_CELLS; row++) {
+      for (let col = 0; col < FOG_TILE_CELLS; col++) {
+        const index = row * FOG_TILE_CELLS + col;
+        const byteIndex = index >> 3;
+        const bitIndex = 7 - (index & 7);
+        const revealed = (bytes[byteIndex] >> bitIndex & 1) === 1;
+        if (!revealed) ctx.fillRect(col, row, 1, 1);
+      }
+    }
+    if (this.tileCache.size >= 256) {
+      const oldest = this.tileCache.keys().next().value;
+      if (oldest !== void 0) this.tileCache.delete(oldest);
+    }
+    this.tileCache.set(key, canvas);
+    return canvas;
+  }
+  renderTile(ctx, data, tx, ty, def, color) {
+    const cellSize = def.cellSize;
+    const tileWorldX = tx * FOG_TILE_CELLS * cellSize;
+    const tileWorldY = ty * FOG_TILE_CELLS * cellSize;
+    const raster = this.tileRaster(data, color);
+    if (raster) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(def.bounds.x, def.bounds.y, def.bounds.w, def.bounds.h);
+      ctx.clip();
+      ctx.imageSmoothingEnabled = false;
+      ctx.drawImage(
+        raster,
+        tileWorldX,
+        tileWorldY,
+        FOG_TILE_CELLS * cellSize,
+        FOG_TILE_CELLS * cellSize
+      );
+      ctx.restore();
+      return;
+    }
+    const bytes = decodeBase64(data);
+    ctx.fillStyle = color;
+    for (let row = 0; row < FOG_TILE_CELLS; row++) {
+      for (let col = 0; col < FOG_TILE_CELLS; col++) {
+        const cellWorldX = tileWorldX + col * cellSize;
+        const cellWorldY = tileWorldY + row * cellSize;
+        if (cellWorldX < def.bounds.x || cellWorldY < def.bounds.y || cellWorldX >= def.bounds.x + def.bounds.w || cellWorldY >= def.bounds.y + def.bounds.h) {
+          continue;
+        }
+        const index = row * FOG_TILE_CELLS + col;
+        const byteIndex = index >> 3;
+        const bitIndex = 7 - (index & 7);
+        const revealed = (bytes[byteIndex] >> bitIndex & 1) === 1;
+        const covered = !revealed;
+        if (covered) {
+          ctx.fillRect(cellWorldX, cellWorldY, cellSize, cellSize);
+        }
+      }
+    }
+  }
+  renderTileForExport(ctx, data, tx, ty, def, color) {
+    this.renderTile(ctx, data, tx, ty, def, color);
+  }
+};
+function getVisibleWorld(camera, viewportWidth, viewportHeight) {
+  const topLeft = camera.screenToWorld({ x: 0, y: 0 });
+  const bottomRight = camera.screenToWorld({ x: viewportWidth, y: viewportHeight });
+  return {
+    x: topLeft.x,
+    y: topLeft.y,
+    w: bottomRight.x - topLeft.x,
+    h: bottomRight.y - topLeft.y
+  };
+}
+
 // src/canvas/export-image.ts
 var DEFAULT_IMAGE_TIMEOUT_MS = 1e4;
 var DEFAULT_MAX_DIMENSION = 16384;
@@ -7079,6 +7800,10 @@ async function exportImage(store, options = {}, layerManager) {
     renderGridForBounds(ctx, grid, bounds);
     ctx.restore();
   }
+  if (options.fog) {
+    const fogRenderer = new FogRenderer();
+    fogRenderer.renderForExport(ctx, options.fog.state, options.fog.mode, options.fog.color);
+  }
   const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
   return new Promise((resolve) => {
     canvas.toBlob((blob) => resolve(blob), mimeType, options.quality);
@@ -7460,6 +8185,27 @@ async function exportSvg(store, options = {}, layerManager) {
     const opacity = layerManager?.getLayer?.(grid.layerId)?.opacity ?? 1;
     body += opacity === 1 ? emitted : `<g opacity="${n(opacity)}">${emitted}</g>`;
   }
+  if (options.fog && typeof document !== "undefined") {
+    const fogState = options.fog.state;
+    const fogW = Math.max(1, Math.ceil(bounds.w));
+    const fogH = Math.max(1, Math.ceil(bounds.h));
+    const fogCanvas = document.createElement("canvas");
+    fogCanvas.width = fogW;
+    fogCanvas.height = fogH;
+    const fogCtx = fogCanvas.getContext("2d");
+    if (fogCtx) {
+      fogCtx.translate(-bounds.x, -bounds.y);
+      const fogRenderer = new FogRenderer();
+      fogRenderer.renderForExport(fogCtx, fogState, options.fog.mode, options.fog.color);
+      try {
+        const fogDataUri = fogCanvas.toDataURL("image/png");
+        if (fogDataUri.startsWith("data:")) {
+          body += `<image href="${esc(fogDataUri)}" x="${n(bounds.x)}" y="${n(bounds.y)}" width="${n(bounds.w)}" height="${n(bounds.h)}" />`;
+        }
+      } catch {
+      }
+    }
+  }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(bounds.w)}" height="${n(bounds.h)}" viewBox="${n(bounds.x)} ${n(bounds.y)} ${n(bounds.w)} ${n(bounds.h)}">${body}</svg>`;
 }
 function emitElement(el, imageDataUris, htmlDataUris, rasterScale, firstGrid, store, resourceOptions) {
@@ -8297,6 +9043,7 @@ var RenderLoop = class {
   layerCache;
   marginViewport;
   hybridSurface;
+  fogRenderer;
   activeDrawingLayerId = null;
   gridCacheDirty = true;
   // set on recenter/viewport-change; consumed by the grid block
@@ -8320,6 +9067,7 @@ var RenderLoop = class {
     this.layerCache = deps.layerCache;
     this.marginViewport = deps.marginViewport;
     this.hybridSurface = deps.hybridSurface;
+    this.fogRenderer = deps.fogRenderer;
   }
   requestRender() {
     this.needsRender = true;
@@ -8629,9 +9377,12 @@ var RenderLoop = class {
       group.push(element);
     }
     const activeTool = this.toolManager.activeTool;
-    const overlayOrder = visibleElements.length + 1;
+    const fogVisible = this.fogRenderer?.isVisible() ?? false;
+    const fogOrder = visibleElements.length + 1;
+    const overlayOrder = fogVisible ? fogOrder + 1 : visibleElements.length + 1;
     const hasOverlay = activeTool?.renderOverlay !== void 0 || this.overlays.size > 0;
-    if (hybridActive && hasOverlay) hybridOrders.add(overlayOrder);
+    if (fogVisible) hybridOrders.add(fogOrder);
+    if (hasOverlay && (hybridActive || fogVisible)) hybridOrders.add(overlayOrder);
     this.hybridSurface.beginFrame(hybridOrders, this.canvasEl.width, this.canvasEl.height);
     for (const [layerId, elements] of this.layerGroups) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
@@ -8745,8 +9496,18 @@ var RenderLoop = class {
       }
       hybridCtx.restore();
     }
+    if (fogVisible && this.fogRenderer) {
+      const fogCtx = this.hybridSurface.getContext(fogOrder);
+      if (fogCtx) {
+        fogCtx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+        fogCtx.save();
+        fogCtx.scale(dpr, dpr);
+        this.fogRenderer.render(fogCtx, this.camera, cssWidth, cssHeight, dpr);
+        fogCtx.restore();
+      }
+    }
     const overlayT0 = performance.now();
-    if (hybridActive && hasOverlay) {
+    if ((hybridActive || fogVisible) && hasOverlay) {
       const overlayCtx = this.hybridSurface.getContext(overlayOrder);
       if (overlayCtx) {
         overlayCtx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
@@ -9757,6 +10518,248 @@ var ElementActivation = class {
   }
 };
 
+// src/fog/fog-command.ts
+var FogRegionCommand = class {
+  constructor(manager, before, after) {
+    this.manager = manager;
+    this.before = before;
+    this.after = after;
+  }
+  execute(_store) {
+    this.manager.applyTilesDirect(this.after);
+  }
+  undo(_store) {
+    this.manager.applyTilesDirect(this.before);
+  }
+};
+var FogResetCommand = class {
+  constructor(manager, before, after) {
+    this.manager = manager;
+    this.before = before;
+    this.after = after;
+  }
+  execute(_store) {
+    this.manager.restoreHistoryState(this.after);
+  }
+  undo(_store) {
+    this.manager.restoreHistoryState(this.before);
+  }
+};
+
+// src/fog/fog-manager.ts
+function defaultIdFactory() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `fog-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+var FogManager = class {
+  state = null;
+  viewMode = "off";
+  idFactory;
+  onCommand;
+  changeListeners = /* @__PURE__ */ new Set();
+  viewListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.idFactory = options.idFactory ?? defaultIdFactory;
+    this.onCommand = options.onCommand;
+  }
+  getState() {
+    if (!this.state) return null;
+    return {
+      definition: { ...this.state.definition, bounds: { ...this.state.definition.bounds } },
+      tiles: this.state.tiles.map((t) => ({ ...t }))
+    };
+  }
+  getViewMode() {
+    return this.viewMode;
+  }
+  initialize(options) {
+    const base = options.base ?? "covered";
+    const cellSize = options.cellSize ?? recommendedFogCellSize(options.bounds);
+    const generation = this.idFactory();
+    const newState = {
+      definition: {
+        version: 1,
+        generation,
+        bounds: { ...options.bounds },
+        cellSize,
+        tileCells: FOG_TILE_CELLS,
+        base
+      },
+      tiles: []
+    };
+    validateFogState(newState);
+    const before = this.state;
+    this.state = newState;
+    const command = new FogResetCommand(this, before, newState);
+    this.onCommand?.(command);
+    this.notifyChange({ kind: "definition" });
+    return structuredClone(newState);
+  }
+  loadState(state, meta) {
+    if (state !== null) {
+      validateFogState(state);
+      this.state = structuredClone(state);
+    } else {
+      this.state = null;
+    }
+    this.notifyChange({
+      kind: state === null ? "disable" : "definition",
+      origin: meta?.origin
+    });
+  }
+  /** Restores a historical visual state without reusing its causal generation id. */
+  restoreHistoryState(state) {
+    if (state === null) {
+      this.loadState(null);
+      return;
+    }
+    this.loadState({
+      definition: { ...state.definition, generation: this.idFactory() },
+      tiles: state.tiles
+    });
+  }
+  setBounds(bounds) {
+    if (!this.state) return;
+    const def = this.state.definition;
+    validateFogState({
+      definition: { ...def, bounds: { ...bounds } },
+      tiles: []
+    });
+    const shrinks = bounds.x > def.bounds.x || bounds.y > def.bounds.y || bounds.x + bounds.w < def.bounds.x + def.bounds.w || bounds.y + bounds.h < def.bounds.y + def.bounds.h;
+    const nextDefinition = {
+      ...def,
+      bounds: { ...bounds },
+      generation: shrinks ? this.idFactory() : def.generation
+    };
+    const tiles = this.state.tiles.flatMap((tile) => {
+      const tileWorldX = tile.x * FOG_TILE_CELLS * def.cellSize;
+      const tileWorldY = tile.y * FOG_TILE_CELLS * def.cellSize;
+      const tileWorldW = FOG_TILE_CELLS * def.cellSize;
+      const tileWorldH = FOG_TILE_CELLS * def.cellSize;
+      const intersects2 = !(tileWorldX + tileWorldW <= bounds.x || tileWorldY + tileWorldH <= bounds.y || tileWorldX >= bounds.x + bounds.w || tileWorldY >= bounds.y + bounds.h);
+      if (!intersects2) return [];
+      const canonical = canonicalizeFogTile(tile, nextDefinition);
+      return canonical ? [canonical] : [];
+    });
+    const before = this.state;
+    this.state = {
+      definition: nextDefinition,
+      tiles
+    };
+    const command = new FogResetCommand(this, before, this.state);
+    this.onCommand?.(command);
+    this.notifyChange({ kind: "definition" });
+  }
+  reset(base) {
+    if (!this.state) return;
+    const before = this.state;
+    const generation = this.idFactory();
+    this.state = {
+      definition: { ...this.state.definition, base, generation },
+      tiles: []
+    };
+    const command = new FogResetCommand(this, before, this.state);
+    this.onCommand?.(command);
+    this.notifyChange({ kind: "reset" });
+  }
+  disable() {
+    if (!this.state) return;
+    const before = this.state;
+    this.state = null;
+    const command = new FogResetCommand(this, before, null);
+    this.onCommand?.(command);
+    this.notifyChange({ kind: "disable" });
+  }
+  setViewMode(mode) {
+    if (mode === this.viewMode) return;
+    this.viewMode = mode;
+    this.notifyView({ mode });
+  }
+  applyRegion(region, operation) {
+    if (!this.state) return;
+    const result = rasterizeRegion(this.state, region, operation);
+    if (result.noop) return;
+    const before = this.collectTiles(result.changed);
+    const newState = applyRasterResult(this.state, result);
+    this.state = newState;
+    const command = new FogRegionCommand(this, before, result.changed);
+    this.onCommand?.(command);
+    this.notifyChange({
+      kind: "tiles",
+      tiles: result.changed.map((t) => ({ x: t.x, y: t.y }))
+    });
+  }
+  applyPatchDirect(patch, meta) {
+    if (!this.state) return;
+    const result = applyRasterResult(this.state, { changed: patch.tiles, noop: false });
+    this.state = result;
+    this.notifyChange({
+      kind: "tiles",
+      tiles: patch.tiles.map((t) => ({ x: t.x, y: t.y })),
+      origin: meta?.origin
+    });
+  }
+  applyTilesDirect(tiles) {
+    if (!this.state) return;
+    const result = applyRasterResult(this.state, { changed: tiles, noop: false });
+    this.state = result;
+    this.notifyChange({
+      kind: "tiles",
+      tiles: tiles.map((t) => ({ x: t.x, y: t.y }))
+    });
+  }
+  on(event, listener) {
+    if (event === "change") {
+      const l2 = listener;
+      this.changeListeners.add(l2);
+      return () => this.changeListeners.delete(l2);
+    }
+    const l = listener;
+    this.viewListeners.add(l);
+    return () => this.viewListeners.delete(l);
+  }
+  dispose() {
+    this.changeListeners.clear();
+    this.viewListeners.clear();
+  }
+  collectTiles(changed) {
+    if (!this.state) return [];
+    const result = [];
+    for (const c of changed) {
+      const existing = this.state.tiles.find((t) => t.x === c.x && t.y === c.y);
+      if (existing) {
+        result.push(existing);
+      } else {
+        const baseVal = this.state.definition.base === "revealed";
+        result.push({
+          x: c.x,
+          y: c.y,
+          data: encodeBase64(createTileBytes(baseVal))
+        });
+      }
+    }
+    return result;
+  }
+  notifyChange(event) {
+    for (const listener of this.changeListeners) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+  notifyView(event) {
+    for (const listener of this.viewListeners) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+};
+
 // src/canvas/viewport.ts
 var EMPTY_IDS = [];
 function noop2() {
@@ -9883,8 +10886,13 @@ var Viewport = class _Viewport {
       });
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
+    this.fogManager = new FogManager({
+      onCommand: (cmd) => this.history.push(cmd)
+    });
+    this.fogRenderer = new FogRenderer(options.fog);
     if (options.minimap) {
       this.minimap = new Minimap(this.wrapper, this);
+      this.minimap.setFogRenderer(this.fogRenderer);
     }
     this.domNodeManager = new DomNodeManager({
       domLayer: this.paintStack,
@@ -9914,7 +10922,18 @@ var Viewport = class _Viewport {
       domNodeManager: this.domNodeManager,
       layerCache,
       marginViewport: this.marginViewport,
-      hybridSurface: new HybridRenderSurface(this.paintStack)
+      hybridSurface: new HybridRenderSurface(this.paintStack),
+      fogRenderer: this.fogRenderer
+    });
+    this.fogManager.on("change", () => {
+      this.fogRenderer.setState(this.fogManager.getState());
+      this.renderLoop.requestRender();
+      this.minimap?.invalidateScene();
+    });
+    this.fogManager.on("view", () => {
+      this.fogRenderer.setViewMode(this.fogManager.getViewMode());
+      this.renderLoop.requestRender();
+      this.minimap?.invalidateScene();
     });
     this.unsubHtmlPainters = this.htmlPainters.onChange(() => this.onHtmlRegistryChanged());
     this.unsubCamera = this.camera.onChange(() => {
@@ -10026,6 +11045,8 @@ var Viewport = class _Viewport {
   _smartGuides = false;
   _gridSize;
   renderLoop;
+  fogManager;
+  fogRenderer;
   domNodeManager;
   interactMode;
   onHtmlElementMount;
@@ -10061,6 +11082,9 @@ var Viewport = class _Viewport {
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
+  get fog() {
+    return this.fogManager;
+  }
   get snapToGrid() {
     return this._snapToGrid;
   }
@@ -10145,7 +11169,8 @@ var Viewport = class _Viewport {
       this.store.snapshot(),
       this.camera,
       this.layerManager.snapshot(),
-      this.layerManager.activeLayerId
+      this.layerManager.activeLayerId,
+      this.fogManager.getState()
     );
   }
   exportJSON() {
@@ -10167,12 +11192,31 @@ var Viewport = class _Viewport {
     return { ...base, htmlPainters: registry, expectedCanvasTypes: expected };
   }
   async exportImage(options) {
-    return exportImage(this.store, this.withHtmlDefaults(options), this.layerManager);
+    const opts = this.withHtmlDefaults(options);
+    if (opts.fog === void 0 && this.fogRenderer.isVisible()) {
+      const state = this.fogManager.getState();
+      if (state) {
+        const mode = this.fogRenderer.getViewMode();
+        opts.fog = { state, mode };
+      }
+    }
+    return exportImage(this.store, opts, this.layerManager);
   }
   async exportSVG(options) {
-    return exportSvg(this.store, this.withHtmlDefaults(options), this.layerManager);
+    const opts = this.withHtmlDefaults(options);
+    if (opts.fog === void 0 && this.fogRenderer.isVisible()) {
+      const state = this.fogManager.getState();
+      if (state) {
+        const mode = this.fogRenderer.getViewMode();
+        opts.fog = { state, mode };
+      }
+    }
+    return exportSvg(this.store, opts, this.layerManager);
   }
   loadState(state) {
+    if (state.fog != null) {
+      validateFogState(state.fog);
+    }
     this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
@@ -10207,6 +11251,7 @@ var Viewport = class _Viewport {
         }
       }
     }
+    this.fogManager.loadState(state.fog ?? null);
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -10618,6 +11663,8 @@ var Viewport = class _Viewport {
     this.unsubToolRegister();
     this.unsubRecorderEnd();
     this.unsubHtmlPainters();
+    this.fogManager.dispose();
+    this.fogRenderer.dispose();
     this.activation?.dispose();
     this.activation = null;
     this.activationListeners.clear();
@@ -12100,26 +13147,820 @@ var RemoteFocusReceiver = class {
   }
 };
 
-// src/tools/hand-tool.ts
-var HandTool = class {
-  name = "hand";
-  panning = false;
-  lastScreen = { x: 0, y: 0 };
-  onActivate(ctx) {
-    ctx.setCursor?.("grab");
-  }
-  onDeactivate(ctx) {
-    ctx.setCursor?.("default");
-  }
-  onPointerDown(state, ctx) {
-    this.panning = true;
-    this.lastScreen = { x: state.x, y: state.y };
-    ctx.setCursor?.("grabbing");
+// src/canvas/awareness-presence.ts
+var AWARENESS_PRESENCE_KIND = "awareness";
+var AWARENESS_MAX_SELECTION = 256;
+var MAX_ID_LENGTH = 128;
+var MAX_NAME_LENGTH = 64;
+var MAX_COLOR_LENGTH2 = 64;
+var MAX_ROLE_LENGTH = 32;
+var MAX_TOOL_LENGTH = 64;
+function isBoundedString(value, max) {
+  return typeof value === "string" && value.length <= max;
+}
+function isOptionalBoundedString(value, max) {
+  return value === void 0 || isBoundedString(value, max);
+}
+function isFinitePoint4(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const point = value;
+  return typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y);
+}
+function isAwarenessPresence(data) {
+  if (typeof data !== "object" || data === null) return false;
+  const payload = data;
+  if (payload.kind !== AWARENESS_PRESENCE_KIND) return false;
+  if (!isBoundedString(payload.id, MAX_ID_LENGTH) || payload.id.length === 0) return false;
+  if ("cleared" in payload) return payload.cleared === true;
+  if (!isOptionalBoundedString(payload.name, MAX_NAME_LENGTH)) return false;
+  if (!isOptionalBoundedString(payload.color, MAX_COLOR_LENGTH2)) return false;
+  if (!isOptionalBoundedString(payload.role, MAX_ROLE_LENGTH)) return false;
+  if (!isOptionalBoundedString(payload.tool, MAX_TOOL_LENGTH)) return false;
+  if (payload.cursor !== void 0 && !isFinitePoint4(payload.cursor)) return false;
+  if (payload.selection !== void 0) {
+    if (!Array.isArray(payload.selection)) return false;
+    if (payload.selection.length > AWARENESS_MAX_SELECTION) return false;
+    for (const id of payload.selection) {
+      if (!isBoundedString(id, MAX_ID_LENGTH) || id.length === 0) return false;
+    }
   }
-  onPointerMove(state, ctx) {
-    if (!this.panning) return;
-    const dx = state.x - this.lastScreen.x;
-    const dy = state.y - this.lastScreen.y;
+  return true;
+}
+
+// src/canvas/awareness-roster.ts
+var DEFAULT_STALE_MS = 45e3;
+var EMPTY_PEERS = Object.freeze([]);
+var EMPTY_SELECTION = Object.freeze([]);
+function sameSelection(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+function samePoint2(a, b) {
+  if (a === null || b === null) return a === b;
+  return a.x === b.x && a.y === b.y;
+}
+function toPeer(from, data, prev) {
+  const cursor = data.cursor ? { x: data.cursor.x, y: data.cursor.y } : null;
+  const incoming = data.selection ?? EMPTY_SELECTION;
+  const selection = prev && sameSelection(prev.selection, incoming) ? prev.selection : incoming.length === 0 ? EMPTY_SELECTION : Object.freeze([...incoming]);
+  const tool = data.tool ?? null;
+  if (prev && prev.id === data.id && prev.name === data.name && prev.color === data.color && prev.role === data.role && prev.tool === tool && prev.selection === selection && samePoint2(prev.cursor, cursor)) {
+    return prev;
+  }
+  const peer = {
+    from,
+    id: data.id,
+    ...data.name === void 0 ? {} : { name: data.name },
+    ...data.color === void 0 ? {} : { color: data.color },
+    ...data.role === void 0 ? {} : { role: data.role },
+    cursor,
+    selection,
+    tool
+  };
+  return peer;
+}
+var PeerRoster = class {
+  staleMs;
+  now;
+  rows = /* @__PURE__ */ new Map();
+  discovered = /* @__PURE__ */ new Map();
+  changeListeners = /* @__PURE__ */ new Set();
+  discoverListeners = /* @__PURE__ */ new Set();
+  leaveListeners = /* @__PURE__ */ new Set();
+  snapshot = EMPTY_PEERS;
+  snapshotDirty = false;
+  staleTimer = null;
+  isDisposed = false;
+  constructor(options = {}) {
+    this.staleMs = options.staleMs ?? DEFAULT_STALE_MS;
+    this.now = options.now ?? (() => Date.now());
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  /**
+   * Applies a presence payload from `from`. Non-awareness or malformed payloads
+   * return `false` untouched, so hosts can feed every presence frame through.
+   */
+  apply(from, data) {
+    if (this.isDisposed || !isAwarenessPresence(data)) return false;
+    const isNew = !this.discovered.has(from);
+    this.discovered.set(from, this.now());
+    if ("cleared" in data) {
+      this.dropRow(from, "cleared");
+    } else {
+      const prev = this.rows.get(from);
+      const next = toPeer(from, data, prev);
+      if (next !== prev) {
+        this.rows.set(from, next);
+        this.changed();
+      }
+    }
+    this.armStaleTimer();
+    if (isNew) this.emit(this.discoverListeners, (l) => l(from));
+    return true;
+  }
+  /** Server-authored presence-leave: drops the row AND the discovery entry. */
+  remove(from) {
+    if (this.isDisposed) return;
+    const hadEntry = this.discovered.delete(from);
+    this.dropRow(from, "left");
+    if (hadEntry) this.armStaleTimer();
+  }
+  getPeers() {
+    if (this.snapshotDirty) {
+      this.snapshot = this.rows.size === 0 ? EMPTY_PEERS : Object.freeze([...this.rows.values()]);
+      this.snapshotDirty = false;
+    }
+    return this.snapshot;
+  }
+  getPeer(from) {
+    return this.rows.get(from);
+  }
+  /** Fires only when `getPeers()` would return a new reference. */
+  onChange(listener) {
+    this.changeListeners.add(listener);
+    return () => this.changeListeners.delete(listener);
+  }
+  /** First valid frame from a sender since its discovery entry was last dropped. */
+  onDiscover(listener) {
+    this.discoverListeners.add(listener);
+    return () => this.discoverListeners.delete(listener);
+  }
+  onLeave(listener) {
+    this.leaveListeners.add(listener);
+    return () => this.leaveListeners.delete(listener);
+  }
+  dispose() {
+    if (this.isDisposed) return;
+    this.isDisposed = true;
+    if (this.staleTimer !== null) clearTimeout(this.staleTimer);
+    this.staleTimer = null;
+    this.rows.clear();
+    this.discovered.clear();
+    this.snapshot = EMPTY_PEERS;
+    this.snapshotDirty = false;
+    this.changeListeners.clear();
+    this.discoverListeners.clear();
+    this.leaveListeners.clear();
+  }
+  dropRow(from, reason) {
+    const row = this.rows.get(from);
+    if (!row) return;
+    this.rows.delete(from);
+    this.changed();
+    this.emit(this.leaveListeners, (l) => l(row, reason));
+  }
+  changed() {
+    this.snapshotDirty = true;
+    this.emit(this.changeListeners, (l) => l());
+  }
+  emit(listeners, call) {
+    for (const listener of [...listeners]) {
+      try {
+        call(listener);
+      } catch {
+      }
+    }
+  }
+  armStaleTimer() {
+    if (this.staleTimer !== null) clearTimeout(this.staleTimer);
+    this.staleTimer = null;
+    if (!Number.isFinite(this.staleMs) || this.staleMs <= 0 || this.isDisposed || this.discovered.size === 0) {
+      return;
+    }
+    let earliest = Infinity;
+    for (const seen of this.discovered.values()) if (seen < earliest) earliest = seen;
+    const delay = Math.min(Math.max(0, earliest + this.staleMs - this.now()), 2 ** 31 - 1);
+    this.staleTimer = setTimeout(() => {
+      this.staleTimer = null;
+      this.expireStale();
+    }, delay);
+  }
+  expireStale() {
+    const t = this.now();
+    for (const from of [...this.discovered.keys()]) {
+      const seen = this.discovered.get(from);
+      if (seen === void 0 || t - seen < this.staleMs) continue;
+      this.discovered.delete(from);
+      this.dropRow(from, "stale");
+    }
+    this.armStaleTimer();
+  }
+};
+
+// src/canvas/awareness-publisher.ts
+var DEFAULT_FIELDS = Object.freeze({
+  cursor: true,
+  selection: false,
+  tool: true
+});
+var DEFAULT_INTERVAL_MS = 50;
+var DEFAULT_HEARTBEAT_MS = 15e3;
+var MAX_TIMER_DELAY_MS = 2 ** 31 - 1;
+var MAX_IDENTITY_ID_LENGTH = 128;
+var MAX_IDENTITY_NAME_LENGTH = 64;
+var MAX_IDENTITY_COLOR_LENGTH = 64;
+var MAX_IDENTITY_ROLE_LENGTH = 32;
+var MAX_TOOL_LENGTH2 = 64;
+var MAX_SELECTION_ID_LENGTH = 128;
+function normalizeIntervalMs(value) {
+  return Number.isFinite(value) && value >= 0 ? value : 0;
+}
+function normalizeHeartbeatMs(value) {
+  return Number.isFinite(value) && value > 0 ? value : 0;
+}
+var LocalAwareness = class {
+  host;
+  element;
+  send;
+  selectionFilter;
+  onError;
+  intervalMs;
+  heartbeatMs;
+  identity;
+  fields;
+  lastPointer = null;
+  selection = [];
+  selectionFailed = false;
+  tool;
+  dirty = false;
+  lastSentAt = null;
+  throttleTimer = null;
+  heartbeatTimer = null;
+  unsubscribers = [];
+  isDisposed = false;
+  handlePointerMove = (e) => this.onPointerMove(e);
+  handlePointerEnd = (e) => this.onPointerEnd(e);
+  constructor(host, options) {
+    const element = options.element ?? host.domLayer.parentElement;
+    if (!element) throw new Error("LocalAwareness: the viewport wrapper is not mounted");
+    this.host = host;
+    this.element = element;
+    this.send = options.send;
+    this.selectionFilter = options.selectionFilter;
+    this.onError = options.onError;
+    this.intervalMs = normalizeIntervalMs(options.intervalMs ?? DEFAULT_INTERVAL_MS);
+    this.heartbeatMs = normalizeHeartbeatMs(options.heartbeatMs ?? DEFAULT_HEARTBEAT_MS);
+    this.identity = this.normalizeIdentity(options.identity);
+    this.fields = mergeFields(DEFAULT_FIELDS, options.fields ?? {});
+    this.tool = host.toolManager.activeTool?.name ?? null;
+    if (this.fields.selection) this.refreshSelection();
+    const opts = { passive: true };
+    element.addEventListener("pointermove", this.handlePointerMove, opts);
+    element.addEventListener("pointerleave", this.handlePointerEnd, opts);
+    element.addEventListener("pointercancel", this.handlePointerEnd, opts);
+    this.unsubscribers.push(
+      host.onSelectionChange(() => {
+        if (this.fields.selection) this.schedule();
+      }),
+      host.toolManager.onChange((name) => {
+        this.tool = name;
+        if (this.fields.tool) this.schedule();
+      })
+    );
+    this.armHeartbeat();
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  getFields() {
+    return this.fields;
+  }
+  setIdentity(identity) {
+    this.identity = this.normalizeIdentity(identity);
+    this.schedule();
+  }
+  /** Merges the given flags into the current policy; `undefined` keys are ignored. */
+  setFields(fields) {
+    this.fields = mergeFields(this.fields, fields);
+    this.schedule();
+  }
+  /**
+   * Requests a full frame: immediate when idle, otherwise folded into the
+   * pending trailing frame (so N simultaneous requests cost one frame). Hosts
+   * call it when the connection becomes live or reconnects.
+   */
+  announce() {
+    this.schedule();
+  }
+  /**
+   * The complete state a frame carries right now. Side-effecting when
+   * selection publishing is on: re-reads `getSelectedIds()`, re-runs
+   * `selectionFilter`, updates the fail-closed selection state, and may call
+   * `onError`. A no-op with respect to selection while publishing is off.
+   */
+  getState() {
+    const frame = { kind: AWARENESS_PRESENCE_KIND, id: this.identity.id };
+    if (this.identity.name !== void 0) frame.name = this.identity.name;
+    if (this.identity.color !== void 0) frame.color = this.identity.color;
+    if (this.identity.role !== void 0) frame.role = this.identity.role;
+    if (this.fields.cursor && this.lastPointer !== null) {
+      frame.cursor = { x: this.lastPointer.x, y: this.lastPointer.y };
+    }
+    if (this.fields.selection) {
+      this.refreshSelection();
+      if (!this.selectionFailed && this.selection.length > 0) {
+        frame.selection = [...this.selection];
+      }
+    }
+    if (this.fields.tool && this.tool !== null && this.tool.length <= MAX_TOOL_LENGTH2) {
+      frame.tool = this.tool;
+    }
+    return frame;
+  }
+  dispose() {
+    if (this.isDisposed) return;
+    this.isDisposed = true;
+    if (this.throttleTimer !== null) clearTimeout(this.throttleTimer);
+    this.throttleTimer = null;
+    if (this.heartbeatTimer !== null) clearTimeout(this.heartbeatTimer);
+    this.heartbeatTimer = null;
+    this.element.removeEventListener("pointermove", this.handlePointerMove);
+    this.element.removeEventListener("pointerleave", this.handlePointerEnd);
+    this.element.removeEventListener("pointercancel", this.handlePointerEnd);
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers.length = 0;
+    this.safeSend({ kind: AWARENESS_PRESENCE_KIND, id: this.identity.id, cleared: true });
+  }
+  now() {
+    return Date.now();
+  }
+  onPointerMove(e) {
+    if (!e.isPrimary) return;
+    const rect = this.element.getBoundingClientRect();
+    const world = this.host.camera.screenToWorld({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+    this.lastPointer = Number.isFinite(world.x) && Number.isFinite(world.y) ? { x: world.x, y: world.y } : null;
+    if (this.fields.cursor) this.schedule();
+  }
+  onPointerEnd(e) {
+    if (!e.isPrimary || this.lastPointer === null) return;
+    this.lastPointer = null;
+    if (this.fields.cursor) this.schedule();
+  }
+  refreshSelection() {
+    try {
+      const raw = this.host.getSelectedIds();
+      const ids = this.selectionFilter ? this.selectionFilter(raw) : raw;
+      if (!Array.isArray(ids)) throw new TypeError("selectionFilter must return an array");
+      for (const id of ids) {
+        if (typeof id !== "string") throw new TypeError("selectionFilter must return strings");
+        if (id.length === 0 || id.length > MAX_SELECTION_ID_LENGTH) {
+          throw new TypeError("selectionFilter must return ids of 1..128 characters");
+        }
+      }
+      this.selection = ids.slice(0, AWARENESS_MAX_SELECTION);
+      this.selectionFailed = false;
+    } catch (error) {
+      this.selection = [];
+      this.selectionFailed = true;
+      this.report(error);
+    }
+  }
+  schedule() {
+    if (this.isDisposed) return;
+    this.dirty = true;
+    if (this.throttleTimer !== null) return;
+    const elapsed = this.lastSentAt === null ? Infinity : this.now() - this.lastSentAt;
+    if (elapsed >= this.intervalMs) {
+      this.flush();
+      return;
+    }
+    this.throttleTimer = setTimeout(
+      () => {
+        this.throttleTimer = null;
+        if (this.dirty) this.flush();
+      },
+      Math.min(this.intervalMs - elapsed, MAX_TIMER_DELAY_MS)
+    );
+  }
+  flush() {
+    this.dirty = false;
+    this.lastSentAt = this.now();
+    this.safeSend(this.getState());
+    this.armHeartbeat();
+  }
+  armHeartbeat() {
+    if (this.heartbeatTimer !== null) clearTimeout(this.heartbeatTimer);
+    this.heartbeatTimer = null;
+    if (this.heartbeatMs <= 0 || this.isDisposed) return;
+    this.heartbeatTimer = setTimeout(
+      () => {
+        this.heartbeatTimer = null;
+        this.flush();
+      },
+      Math.min(this.heartbeatMs, MAX_TIMER_DELAY_MS)
+    );
+  }
+  safeSend(frame) {
+    try {
+      this.send(frame);
+    } catch (error) {
+      this.report(error);
+    }
+  }
+  report(error) {
+    try {
+      this.onError?.(error);
+    } catch {
+    }
+  }
+  /**
+   * Truncates identity strings to the wire caps and rejects an invalid id, so a
+   * sender can never publish a frame that the wire guard would drop outright.
+   * A truncated field is reported through `onError` (a `RangeError`) rather
+   * than silently shortened, so a caller passing an over-long name finds out.
+   */
+  normalizeIdentity(identity) {
+    if (identity.id.length === 0 || identity.id.length > MAX_IDENTITY_ID_LENGTH) {
+      throw new RangeError("LocalAwareness: identity.id must be 1..128 characters");
+    }
+    const normalized = {
+      id: identity.id
+    };
+    if (identity.name !== void 0) {
+      normalized.name = identity.name.slice(0, MAX_IDENTITY_NAME_LENGTH);
+      if (identity.name.length > MAX_IDENTITY_NAME_LENGTH) {
+        this.report(
+          new RangeError(
+            `LocalAwareness: identity.name truncated to ${MAX_IDENTITY_NAME_LENGTH} characters`
+          )
+        );
+      }
+    }
+    if (identity.color !== void 0) {
+      normalized.color = identity.color.slice(0, MAX_IDENTITY_COLOR_LENGTH);
+      if (identity.color.length > MAX_IDENTITY_COLOR_LENGTH) {
+        this.report(
+          new RangeError(
+            `LocalAwareness: identity.color truncated to ${MAX_IDENTITY_COLOR_LENGTH} characters`
+          )
+        );
+      }
+    }
+    if (identity.role !== void 0) {
+      normalized.role = identity.role.slice(0, MAX_IDENTITY_ROLE_LENGTH);
+      if (identity.role.length > MAX_IDENTITY_ROLE_LENGTH) {
+        this.report(
+          new RangeError(
+            `LocalAwareness: identity.role truncated to ${MAX_IDENTITY_ROLE_LENGTH} characters`
+          )
+        );
+      }
+    }
+    return normalized;
+  }
+};
+function mergeFields(current, patch) {
+  return Object.freeze({
+    cursor: patch.cursor ?? current.cursor,
+    selection: patch.selection ?? current.selection,
+    tool: patch.tool ?? current.tool
+  });
+}
+
+// src/canvas/remote-cursor-overlay.ts
+var PEER_COLORS = Object.freeze([
+  "#e11d48",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0d9488",
+  "#0284c7",
+  "#2563eb",
+  "#7c3aed",
+  "#c026d3",
+  "#db2777",
+  "#4d7c0f",
+  "#b45309"
+]);
+function defaultPeerColor(seed) {
+  if (seed.length === 0) return PEER_COLORS[0] ?? "#2563eb";
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return PEER_COLORS[hash % PEER_COLORS.length] ?? "#2563eb";
+}
+var DEFAULT_LABEL_FONT = "12px sans-serif";
+var LABEL_PAD_X = 6;
+var LABEL_PAD_Y = 3;
+var LABEL_HEIGHT = 16;
+var LABEL_OFFSET = 14;
+var MAX_LABEL_WIDTH_CACHE = 64;
+var RemoteCursorOverlay = class {
+  host;
+  roster;
+  colorFor;
+  showLabels;
+  labelFont;
+  labelWidths = /* @__PURE__ */ new Map();
+  unregister;
+  unsubscribe;
+  isDisposed = false;
+  constructor(host, roster, options = {}) {
+    this.host = host;
+    this.roster = roster;
+    this.colorFor = options.colorFor;
+    this.showLabels = options.showLabels ?? true;
+    this.labelFont = options.labelFont ?? DEFAULT_LABEL_FONT;
+    this.unregister = host.registerOverlay((ctx) => this.render(ctx));
+    this.unsubscribe = roster.onChange(() => {
+      if (this.labelWidths.size > MAX_LABEL_WIDTH_CACHE) this.labelWidths.clear();
+      host.requestRender();
+    });
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  resolveColor(peer) {
+    return this.colorFor?.(peer) ?? peer.color ?? defaultPeerColor(peer.id);
+  }
+  dispose() {
+    if (this.isDisposed) return;
+    this.isDisposed = true;
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    this.unregister?.();
+    this.unregister = null;
+    this.labelWidths.clear();
+    this.host.requestRender();
+  }
+  render(ctx) {
+    if (this.isDisposed) return;
+    const zoom = this.host.camera.zoom;
+    const inv = zoom > 0 && Number.isFinite(zoom) ? 1 / zoom : 1;
+    for (const peer of this.roster.getPeers()) {
+      if (peer.cursor === null) continue;
+      const color = this.resolveColor(peer);
+      ctx.save();
+      ctx.translate(peer.cursor.x, peer.cursor.y);
+      ctx.scale(inv, inv);
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(0, 16);
+      ctx.lineTo(4.5, 12.5);
+      ctx.lineTo(11, 12.5);
+      ctx.closePath();
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.strokeStyle = "#ffffff";
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      if (this.showLabels && peer.name !== void 0 && peer.name.length > 0) {
+        this.drawLabel(ctx, peer.name, color);
+      }
+      ctx.restore();
+    }
+  }
+  drawLabel(ctx, name, color) {
+    ctx.font = this.labelFont;
+    const key = `${this.labelFont} ${name}`;
+    let width = this.labelWidths.get(key);
+    if (width === void 0) {
+      width = ctx.measureText(name).width;
+      this.labelWidths.set(key, width);
+    }
+    const w = width + LABEL_PAD_X * 2;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.roundRect(LABEL_OFFSET, LABEL_OFFSET, w, LABEL_HEIGHT + LABEL_PAD_Y, 4);
+    ctx.fill();
+    ctx.fillStyle = "#ffffff";
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    ctx.fillText(name, LABEL_OFFSET + LABEL_PAD_X, LABEL_OFFSET + (LABEL_HEIGHT + LABEL_PAD_Y) / 2);
+  }
+};
+
+// src/canvas/remote-selection-overlay.ts
+var DEFAULT_ALPHA = 0.6;
+var DEFAULT_LINE_WIDTH_PX = 2;
+var RemoteSelectionOverlay = class {
+  host;
+  roster;
+  colorFor;
+  alpha;
+  lineWidthPx;
+  signatures = [];
+  outlines = [];
+  storeDirty = true;
+  unregister;
+  unsubscribers = [];
+  isDisposed = false;
+  constructor(host, roster, options = {}) {
+    this.host = host;
+    this.roster = roster;
+    this.colorFor = options.colorFor;
+    this.alpha = options.alpha ?? DEFAULT_ALPHA;
+    this.lineWidthPx = options.lineWidthPx ?? DEFAULT_LINE_WIDTH_PX;
+    this.unregister = host.registerOverlay((ctx) => this.render(ctx));
+    const invalidate = () => {
+      this.storeDirty = true;
+      host.requestRender();
+    };
+    this.unsubscribers.push(
+      roster.onChange(() => host.requestRender()),
+      host.store.onChange(invalidate),
+      host.layerManager.on("change", invalidate)
+    );
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  dispose() {
+    if (this.isDisposed) return;
+    this.isDisposed = true;
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers.length = 0;
+    this.unregister?.();
+    this.unregister = null;
+    this.signatures = [];
+    this.outlines = [];
+    this.host.requestRender();
+  }
+  resolveColor(peer) {
+    return this.colorFor?.(peer) ?? peer.color ?? defaultPeerColor(peer.id);
+  }
+  /** Recomputes outlines only when the selection signature or the store/layers changed. */
+  rebuild() {
+    const peers = this.roster.getPeers();
+    const next = [];
+    for (const peer of peers) {
+      if (peer.selection.length === 0) continue;
+      next.push({ from: peer.from, selection: peer.selection, color: this.resolveColor(peer) });
+    }
+    let changed = this.storeDirty || next.length !== this.signatures.length;
+    if (!changed) {
+      for (let i = 0; i < next.length; i++) {
+        const a = next[i];
+        const b = this.signatures[i];
+        if (!a || !b || a.from !== b.from || a.selection !== b.selection || a.color !== b.color) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    if (!changed) return;
+    this.storeDirty = false;
+    this.signatures = next;
+    if (next.length === 0) {
+      this.outlines = [];
+      return;
+    }
+    const colorById = /* @__PURE__ */ new Map();
+    for (const sig of next) {
+      for (const id of sig.selection) if (!colorById.has(id)) colorById.set(id, sig.color);
+    }
+    const layers = this.host.layerManager;
+    const rects = computeElementRects(
+      this.host.store,
+      (element) => colorById.has(element.id) && layers.isLayerVisible(element.layerId) ? element.id : null
+    );
+    this.outlines = rects.map((rect) => ({ rect, color: colorById.get(rect.id) ?? "#2563eb" }));
+  }
+  render(ctx) {
+    if (this.isDisposed) return;
+    this.rebuild();
+    if (this.outlines.length === 0) return;
+    const zoom = this.host.camera.zoom;
+    const inv = zoom > 0 && Number.isFinite(zoom) ? 1 / zoom : 1;
+    ctx.save();
+    ctx.globalAlpha = this.alpha;
+    ctx.lineWidth = this.lineWidthPx * inv;
+    for (const { rect, color } of this.outlines) {
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.translate(rect.x + rect.w / 2, rect.y + rect.h / 2);
+      if (rect.rotation !== 0) ctx.rotate(rect.rotation);
+      ctx.strokeRect(-rect.w / 2, -rect.h / 2, rect.w, rect.h);
+      ctx.restore();
+    }
+    ctx.restore();
+  }
+};
+
+// src/canvas/attach-awareness.ts
+function attachAwareness(viewport, channel, options) {
+  const {
+    roster: rosterOptions,
+    cursors: cursorOptions,
+    selections: selectionOptions,
+    publish,
+    ...localOptions
+  } = options;
+  const roster = new PeerRoster(rosterOptions);
+  let local = null;
+  let cursors = null;
+  let selections = null;
+  const unsubscribers = [];
+  try {
+    local = publish === false ? null : new LocalAwareness(viewport, {
+      ...localOptions,
+      send: (data) => channel.sendPresence(data)
+    });
+    cursors = cursorOptions === false ? null : new RemoteCursorOverlay(viewport, roster, cursorOptions ?? {});
+    selections = selectionOptions === void 0 || selectionOptions === false ? null : new RemoteSelectionOverlay(
+      viewport,
+      roster,
+      selectionOptions === true ? {} : selectionOptions
+    );
+    if (publish !== false) unsubscribers.push(roster.onDiscover(() => local?.announce()));
+    unsubscribers.push(
+      channel.onPresence((from, data) => {
+        roster.apply(from, data);
+      })
+    );
+    unsubscribers.push(channel.onPresenceLeave((from) => roster.remove(from)));
+  } catch (error) {
+    for (let i = unsubscribers.length - 1; i >= 0; i--) {
+      try {
+        unsubscribers[i]?.();
+      } catch {
+      }
+    }
+    unsubscribers.length = 0;
+    try {
+      selections?.dispose();
+    } catch {
+    }
+    try {
+      cursors?.dispose();
+    } catch {
+    }
+    try {
+      local?.dispose();
+    } catch {
+    }
+    try {
+      roster.dispose();
+    } catch {
+    }
+    throw error;
+  }
+  let disposed = false;
+  return {
+    roster,
+    local,
+    cursors,
+    selections,
+    announce: () => local?.announce(),
+    setFields: (fields) => local?.setFields(fields),
+    dispose: () => {
+      if (disposed) return;
+      disposed = true;
+      try {
+        local?.dispose();
+      } catch {
+      }
+      try {
+        cursors?.dispose();
+      } catch {
+      }
+      try {
+        selections?.dispose();
+      } catch {
+      }
+      try {
+        roster.dispose();
+      } catch {
+      }
+      for (const unsub of unsubscribers) {
+        try {
+          unsub();
+        } catch {
+        }
+      }
+      unsubscribers.length = 0;
+    }
+  };
+}
+
+// src/tools/hand-tool.ts
+var HandTool = class {
+  name = "hand";
+  panning = false;
+  lastScreen = { x: 0, y: 0 };
+  onActivate(ctx) {
+    ctx.setCursor?.("grab");
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(state, ctx) {
+    this.panning = true;
+    this.lastScreen = { x: state.x, y: state.y };
+    ctx.setCursor?.("grabbing");
+  }
+  onPointerMove(state, ctx) {
+    if (!this.panning) return;
+    const dx = state.x - this.lastScreen.x;
+    const dy = state.y - this.lastScreen.y;
     this.lastScreen = { x: state.x, y: state.y };
     ctx.camera.pan(dx, dy);
   }
@@ -13765,7 +15606,7 @@ var MeasureTool = class {
 // src/tools/path-tool.ts
 var EPS2 = 1e-6;
 var DEFAULT_COMMIT_TAP_RADIUS_PX = 12;
-function samePoint2(a, b) {
+function samePoint3(a, b) {
   return Math.abs(a.x - b.x) < EPS2 && Math.abs(a.y - b.y) < EPS2;
 }
 var PathTool = class {
@@ -13909,7 +15750,7 @@ var PathTool = class {
       return;
     }
     const last = this.lastWaypoint();
-    if (this.cursor && last && !samePoint2(this.cursor, last)) {
+    if (this.cursor && last && !samePoint3(this.cursor, last)) {
       this.waypoints.push({ ...this.cursor });
     }
     this.scheduleEmission();
@@ -13970,7 +15811,7 @@ var PathTool = class {
    * world point.
    */
   withinCommitRadius(point, last, ctx) {
-    if (samePoint2(point, last)) return true;
+    if (samePoint3(point, last)) return true;
     if (this.hasSnappingGrid()) return false;
     const zoom = ctx.camera.zoom;
     if (!(zoom > 0)) return false;
@@ -14018,7 +15859,7 @@ var PathTool = class {
   measure(cursor) {
     const points = this.waypoints.map((p) => ({ ...p }));
     const last = points[points.length - 1];
-    if (cursor && (!last || !samePoint2(cursor, last))) points.push({ ...cursor });
+    if (cursor && (!last || !samePoint3(cursor, last))) points.push({ ...cursor });
     const { total, cumulative } = pathDistanceCells(points, {
       gridSize: this.gridSize,
       gridType: this.gridType,
@@ -14665,9 +16506,191 @@ var PingTool = class {
   }
 };
 
+// src/tools/fog-tool.ts
+var DEFAULT_RADIUS5 = 40;
+var MIN_POINT_DISTANCE = 4;
+var FogTool = class {
+  name = "fog";
+  drawing = false;
+  points = [];
+  startPoint = null;
+  operation;
+  shape;
+  radius;
+  manager;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(manager, options = {}) {
+    this.manager = manager;
+    this.operation = options.operation ?? "reveal";
+    this.shape = options.shape ?? "brush";
+    this.radius = options.radius ?? DEFAULT_RADIUS5;
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("crosshair");
+  }
+  onDeactivate(ctx) {
+    this.cancelGesture(ctx);
+    ctx.setCursor?.("default");
+  }
+  getOptions() {
+    return {
+      operation: this.operation,
+      shape: this.shape,
+      radius: this.radius
+    };
+  }
+  setOptions(options) {
+    if (options.operation !== void 0) this.operation = options.operation;
+    if (options.shape !== void 0) this.shape = options.shape;
+    if (options.radius !== void 0 && Number.isFinite(options.radius) && options.radius > 0) {
+      this.radius = options.radius;
+    }
+    for (const listener of this.optionListeners) listener();
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
+  onPointerDown(state, ctx) {
+    if (this.drawing) return;
+    this.drawing = true;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.startPoint = world;
+    this.points = [world];
+    ctx.requestRender();
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (this.shape === "rectangle") {
+      if (this.startPoint) this.points = [this.startPoint, world];
+    } else {
+      const last = this.points[this.points.length - 1];
+      if (last) {
+        const dx = world.x - last.x;
+        const dy = world.y - last.y;
+        if (dx * dx + dy * dy < MIN_POINT_DISTANCE * MIN_POINT_DISTANCE) return;
+      }
+      this.points.push(world);
+    }
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    const region = this.buildRegion();
+    if (region) {
+      this.manager.applyRegion(region, this.operation);
+    }
+    this.points = [];
+    this.startPoint = null;
+    ctx.requestRender();
+  }
+  onPointerCancel(_state, ctx) {
+    this.cancelGesture(ctx);
+  }
+  onKeyDown(event, ctx) {
+    if (event.key === "Escape" && this.drawing) {
+      this.cancelGesture(ctx);
+      return true;
+    }
+    return false;
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing || this.points.length === 0) return;
+    ctx.save();
+    ctx.strokeStyle = this.operation === "reveal" ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.4)";
+    ctx.fillStyle = this.operation === "reveal" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)";
+    ctx.lineWidth = 2;
+    ctx.setLineDash([6, 4]);
+    switch (this.shape) {
+      case "brush":
+        this.renderBrushPreview(ctx);
+        break;
+      case "rectangle":
+        this.renderRectanglePreview(ctx);
+        break;
+      case "polygon":
+        this.renderPolygonPreview(ctx);
+        break;
+    }
+    ctx.restore();
+  }
+  buildRegion() {
+    switch (this.shape) {
+      case "brush": {
+        if (this.points.length === 0) return null;
+        return { kind: "brush", points: this.points, radius: this.radius };
+      }
+      case "rectangle": {
+        if (!this.startPoint || this.points.length < 2) return null;
+        const end = this.points[this.points.length - 1];
+        if (this.startPoint.x === end.x && this.startPoint.y === end.y) return null;
+        return { kind: "rectangle", from: this.startPoint, to: end };
+      }
+      case "polygon": {
+        if (this.points.length < 3) return null;
+        return { kind: "polygon", points: this.points };
+      }
+    }
+  }
+  cancelGesture(ctx) {
+    this.drawing = false;
+    this.points = [];
+    this.startPoint = null;
+    ctx.requestRender();
+  }
+  renderBrushPreview(ctx) {
+    if (this.points.length === 1) {
+      const p = this.points[0];
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, this.radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      return;
+    }
+    ctx.beginPath();
+    for (let i = 0; i < this.points.length; i++) {
+      const p = this.points[i];
+      if (i === 0) ctx.moveTo(p.x, p.y);
+      else ctx.lineTo(p.x, p.y);
+    }
+    ctx.lineWidth = this.radius * 2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.stroke();
+  }
+  renderRectanglePreview(ctx) {
+    if (this.points.length < 2) return;
+    const from = this.points[0];
+    const to = this.points[this.points.length - 1];
+    const x = Math.min(from.x, to.x);
+    const y = Math.min(from.y, to.y);
+    const w = Math.abs(to.x - from.x);
+    const h = Math.abs(to.y - from.y);
+    ctx.fillRect(x, y, w, h);
+    ctx.strokeRect(x, y, w, h);
+  }
+  renderPolygonPreview(ctx) {
+    if (this.points.length < 2) return;
+    const first = this.points[0];
+    ctx.beginPath();
+    ctx.moveTo(first.x, first.y);
+    for (let i = 1; i < this.points.length; i++) {
+      const p = this.points[i];
+      ctx.lineTo(p.x, p.y);
+    }
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+  }
+};
+
 // src/index.ts
-var VERSION = "0.64.0";
+var VERSION = "0.66.0";
 export {
+  AWARENESS_MAX_SELECTION,
+  AWARENESS_PRESENCE_KIND,
   ArrowTool,
   AutoSave,
   Camera,
@@ -14677,6 +16700,12 @@ export {
   ElementStore,
   EraserTool,
   FOCUS_PRESENCE_KIND,
+  FOG_MAX_TILES,
+  FOG_STATE_VERSION,
+  FOG_TILE_CELLS,
+  FogManager,
+  FogRenderer,
+  FogTool,
   HandTool,
   HistoryStack,
   HtmlPainterMissingError,
@@ -14686,6 +16715,7 @@ export {
   LASER_TRAIL_PRESENCE_KIND,
   LaserTool,
   LayerManager,
+  LocalAwareness,
   LocalStorageAdapter,
   MEASURE_PRESENCE_KIND,
   MeasureTool,
@@ -14694,16 +16724,20 @@ export {
   NoteTool,
   PATH_PRESENCE_KIND,
   PATH_PRESENCE_MAX_POINTS,
+  PEER_COLORS,
   PING_PRESENCE_KIND,
   PathTool,
+  PeerRoster,
   PencilTool,
   PingInput,
   PingTool,
+  RemoteCursorOverlay,
   RemoteFocusReceiver,
   RemoteLaserOverlay,
   RemoteMeasureOverlay,
   RemotePathOverlay,
   RemotePingOverlay,
+  RemoteSelectionOverlay,
   SelectTool,
   ShapeTool,
   TemplateTool,
@@ -14712,8 +16746,10 @@ export {
   VERSION,
   Viewport,
   applyCameraView,
+  attachAwareness,
   boundsIntersect,
   cameraOriginForView,
+  canonicalizeFogTile,
   captureCameraView,
   computeElementRects,
   createArrow,
@@ -14725,11 +16761,14 @@ export {
   createStroke,
   createTemplate,
   createText,
+  defaultPeerColor,
   drawHexPath,
   elementRectsEqual,
   exportImage,
   exportSvg,
   fitZoomForView,
+  decodeBase64 as fogDecodeBase64,
+  encodeBase64 as fogEncodeBase64,
   footprintFromSize,
   getActiveFormats,
   getArrowBounds,
@@ -14747,6 +16786,7 @@ export {
   getHexCellsInSquare,
   getHexDistance,
   gridDistanceCells,
+  isAwarenessPresence,
   isFocusPresence,
   isLaserTrailPresence,
   isMeasurePresence,
@@ -14754,6 +16794,7 @@ export {
   isPathPresence,
   isPingPresence,
   pathDistanceCells,
+  recommendedFogCellSize,
   resolveHtmlRouting,
   setFontSize,
   smartSnap,
@@ -14770,6 +16811,9 @@ export {
   toggleBold,
   toggleItalic,
   toggleStrikethrough,
-  toggleUnderline
+  toggleUnderline,
+  validateFogDefinition,
+  validateFogState,
+  validateFogTile
 };
 //# sourceMappingURL=index.js.map