@fieldnotes/core 0.66.0 → 0.67.0

package/dist/index.js

@@ -7174,19 +7174,181 @@ async function renderHtmlElements(elements, options) {
   return sources;
 }
 
+// src/fog/fog-style.ts
+var DEFAULT_PROCEDURAL_OPACITY = 0.6;
+var DEFAULT_PROCEDURAL_SCALE = 256;
+var DEFAULT_PROCEDURAL_SEED = 0;
+var DEFAULT_PROCEDURAL_DETAIL = 2;
+var DEFAULT_PROCEDURAL_TINT = "#ffffff";
+var MIN_SCALE = 64;
+var MAX_SCALE = 1024;
+var MIN_DETAIL = 1;
+var MAX_DETAIL = 4;
+var MAX_SEED = 65535;
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function finiteOrDefault(value, defaultValue) {
+  return value !== void 0 && Number.isFinite(value) ? value : defaultValue;
+}
+function resolveFogStyle(style, legacyColor, defaultColor) {
+  if (style && style.kind === "procedural") {
+    const opacity = clamp(finiteOrDefault(style.opacity, DEFAULT_PROCEDURAL_OPACITY), 0, 1);
+    const scale = clamp(
+      finiteOrDefault(style.scale, DEFAULT_PROCEDURAL_SCALE),
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    const seed = clamp(
+      Math.floor(finiteOrDefault(style.seed, DEFAULT_PROCEDURAL_SEED)),
+      0,
+      MAX_SEED
+    );
+    const detail = clamp(
+      Math.floor(finiteOrDefault(style.detail, DEFAULT_PROCEDURAL_DETAIL)),
+      MIN_DETAIL,
+      MAX_DETAIL
+    );
+    return {
+      kind: "procedural",
+      backdrop: style.backdrop,
+      // `tint` is required for typed callers. Keep a visible runtime fallback for
+      // untyped/older JavaScript hosts instead of producing a flat same-color overlay.
+      tint: style.tint || DEFAULT_PROCEDURAL_TINT,
+      opacity,
+      scale,
+      seed,
+      detail
+    };
+  }
+  if (style && (!style.kind || style.kind === "solid")) {
+    return { kind: "solid", color: style.color };
+  }
+  return { kind: "solid", color: legacyColor ?? defaultColor };
+}
+
+// src/fog/fog-procedural-tile.ts
+var TILE_PX = 128;
+function xorshift32(state) {
+  state ^= state << 13;
+  state ^= state >>> 17;
+  state ^= state << 5;
+  return state >>> 0;
+}
+function seedState(seed) {
+  return seed * 2654435761 + 1 >>> 0 || 1;
+}
+function smoothstep(t) {
+  return t * t * (3 - 2 * t);
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function generateGradients(size, prngState) {
+  const count = size * size;
+  const gx = new Float32Array(count);
+  const gy = new Float32Array(count);
+  let s = prngState;
+  for (let i = 0; i < count; i++) {
+    s = xorshift32(s);
+    const angle = (s >>> 0) / 4294967296 * Math.PI * 2;
+    gx[i] = Math.cos(angle);
+    gy[i] = Math.sin(angle);
+  }
+  return { gx, gy, state: s };
+}
+function perlinNoise(px, py, gridSize, gx, gy) {
+  const gx0 = Math.floor(px) % gridSize;
+  const gy0 = Math.floor(py) % gridSize;
+  const gx1 = (gx0 + 1) % gridSize;
+  const gy1 = (gy0 + 1) % gridSize;
+  const fx = px - Math.floor(px);
+  const fy = py - Math.floor(py);
+  const sx = smoothstep(fx);
+  const sy = smoothstep(fy);
+  const dot = (ix, iy, dx, dy) => {
+    const idx = iy * gridSize + ix;
+    return gx[idx] * dx + gy[idx] * dy;
+  };
+  const n00 = dot(gx0, gy0, fx, fy);
+  const n10 = dot(gx1, gy0, fx - 1, fy);
+  const n01 = dot(gx0, gy1, fx, fy - 1);
+  const n11 = dot(gx1, gy1, fx - 1, fy - 1);
+  return lerp(lerp(n00, n10, sx), lerp(n01, n11, sx), sy);
+}
+function layeredNoise(x, y, octaves, gridSize, gx, gy) {
+  let value = 0;
+  let amplitude = 1;
+  let frequency = 1;
+  let maxAmplitude = 0;
+  for (let o = 0; o < octaves; o++) {
+    value += perlinNoise(x * frequency, y * frequency, gridSize * frequency, gx, gy) * amplitude;
+    maxAmplitude += amplitude;
+    amplitude *= 0.5;
+    frequency *= 2;
+  }
+  return (value / maxAmplitude + 1) * 0.5;
+}
+function generateProceduralTile(style) {
+  const gridSize = 8;
+  const maxFreq = gridSize * (1 << style.detail - 1);
+  const { gx, gy } = generateGradients(maxFreq, seedState(style.seed));
+  const data = new Uint8ClampedArray(TILE_PX * TILE_PX * 4);
+  for (let py = 0; py < TILE_PX; py++) {
+    for (let px = 0; px < TILE_PX; px++) {
+      const nx = px / TILE_PX * gridSize;
+      const ny = py / TILE_PX * gridSize;
+      const n2 = layeredNoise(nx, ny, style.detail, gridSize, gx, gy);
+      const alpha = Math.round(n2 * style.opacity * 255);
+      const idx = (py * TILE_PX + px) * 4;
+      data[idx] = 255;
+      data[idx + 1] = 255;
+      data[idx + 2] = 255;
+      data[idx + 3] = alpha;
+    }
+  }
+  return { data, width: TILE_PX, height: TILE_PX };
+}
+var tileCache = /* @__PURE__ */ new Map();
+var MAX_CACHED_TILES = 16;
+function getCachedProceduralTile(style) {
+  const key = `${style.opacity}\0${style.seed}\0${style.detail}`;
+  const cached = tileCache.get(key);
+  if (cached) return cached;
+  const tile = generateProceduralTile(style);
+  if (tileCache.size >= MAX_CACHED_TILES) {
+    const oldest = tileCache.keys().next().value;
+    if (oldest !== void 0) tileCache.delete(oldest);
+  }
+  tileCache.set(key, tile);
+  return tile;
+}
+function clearProceduralTileCache() {
+  tileCache.clear();
+}
+
 // 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();
+  patternCache = /* @__PURE__ */ new Map();
   state = null;
   viewMode = "off";
   dirty = true;
-  editorColor;
-  playerColor;
+  editorStyle;
+  playerStyle;
   constructor(options = {}) {
-    this.editorColor = options.editorColor ?? DEFAULT_EDITOR_COLOR;
-    this.playerColor = options.playerColor ?? DEFAULT_PLAYER_COLOR;
+    this.editorStyle = resolveFogStyle(
+      options.editorStyle,
+      options.editorColor,
+      DEFAULT_EDITOR_COLOR
+    );
+    this.playerStyle = resolveFogStyle(
+      options.playerStyle,
+      options.playerColor,
+      DEFAULT_PLAYER_COLOR
+    );
   }
   setState(state) {
     this.state = state;
@@ -7212,12 +7374,23 @@ var FogRenderer = class {
   isVisible() {
     return this.viewMode !== "off" && this.state !== null;
   }
+  getResolvedStyle(mode) {
+    return mode === "editor" ? this.editorStyle : this.playerStyle;
+  }
   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 mode = this.viewMode === "editor" ? "editor" : "player";
+    const style = this.getResolvedStyle(mode);
+    const proceduralStyle = style.kind === "procedural" ? style : null;
+    const color = style.kind === "procedural" ? normalizeCanvasColor(
+      ctx,
+      style.backdrop,
+      mode === "player" ? DEFAULT_PLAYER_COLOR : DEFAULT_EDITOR_COLOR
+    ) : style.color;
+    const safetyColor = proceduralStyle && mode === "player" ? DEFAULT_PLAYER_COLOR : null;
     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);
@@ -7248,7 +7421,22 @@ var FogRenderer = class {
           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) {
+            if (safetyColor) {
+              ctx.fillStyle = safetyColor;
+              ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+            }
+            ctx.fillStyle = color;
             ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+            if (proceduralStyle) {
+              this.paintProceduralOverlay(
+                ctx,
+                proceduralStyle,
+                clipX,
+                clipY,
+                clipR - clipX,
+                clipB - clipY
+              );
+            }
           }
           continue;
         }
@@ -7256,18 +7444,33 @@ var FogRenderer = class {
           continue;
         }
         if (data) {
+          if (safetyColor) this.renderTile(ctx, data, tx, ty, def, safetyColor);
           this.renderTile(ctx, data, tx, ty, def, color);
+          if (proceduralStyle) {
+            this.renderTileProceduralOverlay(ctx, data, tx, ty, def, proceduralStyle);
+          }
         }
       }
     }
     ctx.restore();
     this.dirty = false;
   }
-  renderForExport(ctx, state, mode, color) {
+  renderForExport(ctx, state, mode, color, style) {
     const def = state.definition;
     const cellSize = def.cellSize;
     const tileWorldSize = FOG_TILE_CELLS * cellSize;
-    const fogColor = color ?? (mode === "editor" ? this.editorColor : this.playerColor);
+    const resolved = style ? resolveFogStyle(
+      style,
+      void 0,
+      mode === "editor" ? DEFAULT_EDITOR_COLOR : DEFAULT_PLAYER_COLOR
+    ) : this.getResolvedStyle(mode);
+    const proceduralStyle = !color && resolved.kind === "procedural" ? resolved : null;
+    const fogColor = color ?? (proceduralStyle ? normalizeCanvasColor(
+      ctx,
+      proceduralStyle.backdrop,
+      mode === "player" ? DEFAULT_PLAYER_COLOR : DEFAULT_EDITOR_COLOR
+    ) : resolved.kind === "solid" ? resolved.color : resolved.backdrop);
+    const safetyColor = proceduralStyle && mode === "player" ? DEFAULT_PLAYER_COLOR : null;
     const baseCovered = def.base === "covered";
     const tileMap = /* @__PURE__ */ new Map();
     for (const tile of state.tiles) {
@@ -7290,20 +7493,129 @@ var FogRenderer = class {
           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) {
+            if (safetyColor) {
+              ctx.fillStyle = safetyColor;
+              ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+            }
+            ctx.fillStyle = fogColor;
             ctx.fillRect(clipX, clipY, clipR - clipX, clipB - clipY);
+            if (proceduralStyle) {
+              this.paintProceduralOverlay(
+                ctx,
+                proceduralStyle,
+                clipX,
+                clipY,
+                clipR - clipX,
+                clipB - clipY
+              );
+            }
           }
           continue;
         }
         if (data) {
+          if (safetyColor) this.renderTileForExport(ctx, data, tx, ty, def, safetyColor);
           this.renderTileForExport(ctx, data, tx, ty, def, fogColor);
+          if (proceduralStyle) {
+            this.renderTileProceduralOverlay(ctx, data, tx, ty, def, proceduralStyle);
+          }
         }
       }
     }
   }
   dispose() {
     this.tileCache.clear();
+    this.patternCache.clear();
+    clearProceduralTileCache();
     this.state = null;
   }
+  getOrCreatePattern(ctx, style, worldScale) {
+    const key = `${style.backdrop}\0${style.tint}\0${style.opacity}\0${style.scale}\0${style.seed}\0${style.detail}\0${worldScale}`;
+    const cached = this.patternCache.get(key);
+    if (cached !== void 0) return cached;
+    let pattern = null;
+    try {
+      const tileData = getCachedProceduralTile(style);
+      pattern = this.createPatternFromTileData(ctx, tileData, style, worldScale);
+    } catch {
+    }
+    if (this.patternCache.size >= 32) {
+      const oldest = this.patternCache.keys().next().value;
+      if (oldest !== void 0) this.patternCache.delete(oldest);
+    }
+    this.patternCache.set(key, pattern);
+    return pattern;
+  }
+  createPatternFromTileData(ctx, tileData, style, worldScale) {
+    if (typeof document === "undefined") return null;
+    const sourceCanvas = document.createElement("canvas");
+    sourceCanvas.width = tileData.width;
+    sourceCanvas.height = tileData.height;
+    const sourceCtx = sourceCanvas.getContext("2d");
+    if (!sourceCtx) return null;
+    const imageData = new ImageData(
+      new Uint8ClampedArray(tileData.data),
+      tileData.width,
+      tileData.height
+    );
+    sourceCtx.putImageData(imageData, 0, 0);
+    sourceCtx.globalCompositeOperation = "source-in";
+    sourceCtx.fillStyle = normalizeCanvasColor(sourceCtx, style.tint, "#ffffff");
+    sourceCtx.fillRect(0, 0, tileData.width, tileData.height);
+    sourceCtx.globalCompositeOperation = "source-over";
+    const patternScale = style.scale * worldScale / tileData.width;
+    const pattern = ctx.createPattern(sourceCanvas, "repeat");
+    if (pattern && typeof pattern.setTransform === "function" && typeof DOMMatrix !== "undefined") {
+      try {
+        pattern.setTransform(new DOMMatrix([patternScale, 0, 0, patternScale, 0, 0]));
+        return pattern;
+      } catch {
+      }
+    }
+    const patternPx = Math.round(style.scale * worldScale);
+    if (patternPx < 1) return null;
+    const patternCanvas = document.createElement("canvas");
+    patternCanvas.width = patternPx;
+    patternCanvas.height = patternPx;
+    const patternCtx = patternCanvas.getContext("2d");
+    if (!patternCtx) return null;
+    patternCtx.drawImage(sourceCanvas, 0, 0, patternPx, patternPx);
+    return ctx.createPattern(patternCanvas, "repeat");
+  }
+  paintProceduralOverlay(ctx, style, x, y, w, h) {
+    const pattern = this.getOrCreatePattern(ctx, style, 1);
+    if (!pattern) return;
+    ctx.save();
+    ctx.fillStyle = pattern;
+    ctx.fillRect(x, y, w, h);
+    ctx.restore();
+  }
+  renderTileProceduralOverlay(ctx, data, tx, ty, def, style) {
+    const cellSize = def.cellSize;
+    const tileWorldX = tx * FOG_TILE_CELLS * cellSize;
+    const tileWorldY = ty * FOG_TILE_CELLS * cellSize;
+    const pattern = this.getOrCreatePattern(ctx, style, 1);
+    if (!pattern) return;
+    const bytes = decodeBase64(data);
+    ctx.save();
+    ctx.fillStyle = pattern;
+    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;
+        if (!revealed) {
+          ctx.fillRect(cellWorldX, cellWorldY, cellSize, cellSize);
+        }
+      }
+    }
+    ctx.restore();
+  }
   tileRaster(data, color) {
     const key = `${color}\0${data}`;
     const cached = this.tileCache.get(key);
@@ -7387,6 +7699,22 @@ function getVisibleWorld(camera, viewportWidth, viewportHeight) {
     h: bottomRight.y - topLeft.y
   };
 }
+function normalizeCanvasColor(ctx, value, fallback) {
+  const previous = ctx.fillStyle;
+  try {
+    ctx.fillStyle = "#010203";
+    ctx.fillStyle = value;
+    const first = ctx.fillStyle;
+    ctx.fillStyle = "#040506";
+    ctx.fillStyle = value;
+    const second = ctx.fillStyle;
+    return typeof first === "string" && first === second ? first : fallback;
+  } catch {
+    return fallback;
+  } finally {
+    ctx.fillStyle = previous;
+  }
+}
 
 // src/canvas/export-image.ts
 var DEFAULT_IMAGE_TIMEOUT_MS = 1e4;
@@ -7802,7 +8130,13 @@ async function exportImage(store, options = {}, layerManager) {
   }
   if (options.fog) {
     const fogRenderer = new FogRenderer();
-    fogRenderer.renderForExport(ctx, options.fog.state, options.fog.mode, options.fog.color);
+    fogRenderer.renderForExport(
+      ctx,
+      options.fog.state,
+      options.fog.mode,
+      options.fog.color,
+      options.fog.style
+    );
   }
   const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
   return new Promise((resolve) => {
@@ -8196,7 +8530,13 @@ async function exportSvg(store, options = {}, layerManager) {
     if (fogCtx) {
       fogCtx.translate(-bounds.x, -bounds.y);
       const fogRenderer = new FogRenderer();
-      fogRenderer.renderForExport(fogCtx, fogState, options.fog.mode, options.fog.color);
+      fogRenderer.renderForExport(
+        fogCtx,
+        fogState,
+        options.fog.mode,
+        options.fog.color,
+        options.fog.style
+      );
       try {
         const fogDataUri = fogCanvas.toDataURL("image/png");
         if (fogDataUri.startsWith("data:")) {
@@ -11191,26 +11531,35 @@ var Viewport = class _Viewport {
     const expected = base.expectedCanvasTypes ? /* @__PURE__ */ new Set([...declared, ...base.expectedCanvasTypes]) : declared;
     return { ...base, htmlPainters: registry, expectedCanvasTypes: expected };
   }
-  async exportImage(options) {
-    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 };
-      }
+  /**
+   * Carry constructor-configured fog presentation into both implicit exports and
+   * explicit state/mode exports. Explicit style and legacy color overrides win.
+   */
+  withFogDefaults(options) {
+    const fog = options.fog;
+    if (fog === false) return options;
+    if (fog !== void 0) {
+      if (fog.style !== void 0 || fog.color !== void 0) return options;
+      return {
+        ...options,
+        fog: { ...fog, style: this.fogRenderer.getResolvedStyle(fog.mode) }
+      };
     }
+    if (!this.fogRenderer.isVisible()) return options;
+    const state = this.fogManager.getState();
+    if (!state) return options;
+    const mode = this.fogRenderer.getViewMode();
+    return {
+      ...options,
+      fog: { state, mode, style: this.fogRenderer.getResolvedStyle(mode) }
+    };
+  }
+  async exportImage(options) {
+    const opts = this.withFogDefaults(this.withHtmlDefaults(options));
     return exportImage(this.store, opts, this.layerManager);
   }
   async exportSVG(options) {
-    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 };
-      }
-    }
+    const opts = this.withFogDefaults(this.withHtmlDefaults(options));
     return exportSvg(this.store, opts, this.layerManager);
   }
   loadState(state) {
@@ -12844,15 +13193,15 @@ function applyCameraView(camera, view, canvasW, canvasH) {
 var DEFAULT_DURATION_MS3 = 400;
 var FRAMED_EPSILON = 1e-6;
 var easeOutCubic2 = (t) => 1 - Math.pow(1 - t, 3);
-function lerp(a, b, k) {
+function lerp2(a, b, k) {
   return a + (b - a) * k;
 }
 function lerpView(from, to, k) {
   return {
-    x: lerp(from.x, to.x, k),
-    y: lerp(from.y, to.y, k),
-    w: lerp(from.w, to.w, k),
-    h: lerp(from.h, to.h, k)
+    x: lerp2(from.x, to.x, k),
+    y: lerp2(from.y, to.y, k),
+    w: lerp2(from.w, to.w, k),
+    h: lerp2(from.h, to.h, k)
   };
 }
 function viewsClose(a, b) {
@@ -14106,7 +14455,7 @@ var PencilTool = class {
 };
 
 // src/elements/stroke-erase.ts
-function lerp2(a, b, t) {
+function lerp3(a, b, t) {
   return {
     x: a.x + (b.x - a.x) * t,
     y: a.y + (b.y - a.y) * t,
@@ -14165,13 +14514,13 @@ function erasePoints(points, eraser, radius) {
     erased = true;
     if (tLo > 0) {
       if (current.length === 0) current.push(a);
-      current.push(lerp2(a, b, tLo));
+      current.push(lerp3(a, b, tLo));
       flush();
     } else {
       flush();
     }
     if (tHi < 1) {
-      current = [lerp2(a, b, tHi), b];
+      current = [lerp3(a, b, tHi), b];
     }
   }
   flush();
@@ -16687,7 +17036,7 @@ var FogTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.66.0";
+var VERSION = "0.67.0";
 export {
   AWARENESS_MAX_SELECTION,
   AWARENESS_PRESENCE_KIND,
@@ -16795,6 +17144,7 @@ export {
   isPingPresence,
   pathDistanceCells,
   recommendedFogCellSize,
+  resolveFogStyle,
   resolveHtmlRouting,
   setFontSize,
   smartSnap,