@aeroswarm/weather-layer 0.0.0-stage → 0.1.2

package/dist/index.js

@@ -0,0 +1,1035 @@
+// src/clouds3d.ts
+var FT_TO_M = 0.3048;
+var KT_TO_MS = 0.514444;
+var DEFAULT_BASE_M = 600;
+var MAX_PER_LAYER = 14;
+function seededRandom(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function buildCloudField(state, options = {}) {
+  const radius = options.radiusM ?? 12e3;
+  const elevation = options.elevationM ?? 0;
+  const random = seededRandom(options.seed ?? 1);
+  const field = [];
+  state.clouds.layers.forEach((layer, layerIndex) => {
+    const count = Math.max(1, Math.round(layer.coverage * MAX_PER_LAYER));
+    const baseM = layer.baseFt === null ? DEFAULT_BASE_M : layer.baseFt * FT_TO_M;
+    for (let i = 0; i < count; i++) {
+      const angle = random() * Math.PI * 2;
+      const distance = Math.sqrt(random()) * radius;
+      const size = (layer.convective ? 1400 : 800) * (0.6 + random() * 0.9);
+      field.push({
+        id: `cloud-${layerIndex}-${i}`,
+        eastM: Math.sin(angle) * distance,
+        northM: Math.cos(angle) * distance,
+        altM: elevation + baseM + random() * (layer.convective ? 400 : 120),
+        sizeM: size,
+        opacity: Math.min(0.9, 0.3 + layer.coverage * 0.5) * (layer.convective ? 1.1 : 1),
+        convective: layer.convective
+      });
+    }
+  });
+  return field;
+}
+function advanceCloudField(field, wind, dtSeconds, options = {}) {
+  if (wind.toDeg === null || wind.speedKt <= 0) return field.map((c) => ({ ...c }));
+  const radius = options.radiusM ?? 12e3;
+  const meters = wind.speedKt * KT_TO_MS * dtSeconds * (options.timeScale ?? 12);
+  const east = Math.sin(wind.toDeg * Math.PI / 180) * meters;
+  const north = Math.cos(wind.toDeg * Math.PI / 180) * meters;
+  return field.map((cloud) => {
+    let eastM = cloud.eastM + east;
+    let northM = cloud.northM + north;
+    if (Math.hypot(eastM, northM) > radius) {
+      eastM = -eastM * 0.98;
+      northM = -northM * 0.98;
+    }
+    return { ...cloud, eastM, northM };
+  });
+}
+function offsetToLonLat(centerLat, centerLon, eastM, northM) {
+  const metersPerDegLat = 111320;
+  const metersPerDegLon = metersPerDegLat * Math.cos(centerLat * Math.PI / 180);
+  return {
+    lat: centerLat + northM / metersPerDegLat,
+    lon: centerLon + eastM / metersPerDegLon
+  };
+}
+
+// src/cloudLayer.ts
+function makeCloudSpriteUrl() {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 128;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  const gradient = ctx.createRadialGradient(64, 64, 4, 64, 64, 62);
+  gradient.addColorStop(0, "rgba(255,255,255,0.95)");
+  gradient.addColorStop(0.55, "rgba(255,255,255,0.45)");
+  gradient.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, 128, 128);
+  return canvas.toDataURL("image/png");
+}
+function createCloudLayer3D(ria, options) {
+  const model = new ria.FeatureModel(new ria.MemoryStore(), { reference: ria.reference });
+  const painter = new ria.FeaturePainter();
+  const spriteUrl = makeCloudSpriteUrl();
+  const only3D = options.only3D ?? true;
+  painter.getDetailLevelScales = () => [1 / 1e5, 1 / 2e4, 1 / 5e3];
+  painter.paintBody = (geoCanvas, feature, shape, _layer, map) => {
+    if (only3D && map.reference.identifier !== "EPSG:4978") return;
+    const size = Number(feature.properties.sizeM) || 800;
+    geoCanvas.drawIcon(shape, {
+      url: spriteUrl,
+      width: `${size}m`,
+      height: `${size}m`,
+      opacity: Number(feature.properties.opacity) || 0.5,
+      draped: false,
+      modulationColor: feature.properties.convective === true ? "#8f98a3" : "#ffffff"
+    });
+  };
+  const layer = new ria.FeatureLayer(model, {
+    id: options.id ?? "weather-clouds",
+    label: "Awan",
+    painter,
+    selectable: false,
+    visible: true
+  });
+  let wind = { toDeg: null, speedKt: 0 };
+  let field = [];
+  let knownIds = /* @__PURE__ */ new Set();
+  const render = () => {
+    const next = /* @__PURE__ */ new Set();
+    for (const cloud of field) {
+      const { lat, lon } = offsetToLonLat(
+        options.center.lat,
+        options.center.lon,
+        cloud.eastM,
+        cloud.northM
+      );
+      model.put(
+        new ria.Feature(
+          ria.createPoint(ria.reference, [lon, lat, cloud.altM]),
+          { sizeM: cloud.sizeM, opacity: cloud.opacity, convective: cloud.convective },
+          cloud.id
+        )
+      );
+      next.add(cloud.id);
+    }
+    for (const id of knownIds) if (!next.has(id)) model.remove(id);
+    knownIds = next;
+  };
+  const interval = options.updateIntervalMs ?? 500;
+  const timer = setInterval(() => {
+    if (!layer.visible || field.length === 0) return;
+    field = advanceCloudField(field, wind, interval / 1e3, {
+      radiusM: options.radiusM,
+      timeScale: options.timeScale
+    });
+    render();
+  }, interval);
+  return {
+    layer,
+    setState(state) {
+      wind = { toDeg: state.wind.toDeg, speedKt: state.wind.speedKt };
+      field = buildCloudField(state, {
+        radiusM: options.radiusM,
+        elevationM: options.elevationM
+      });
+      render();
+    },
+    setVisible(visible) {
+      layer.visible = visible;
+    },
+    destroy() {
+      clearInterval(timer);
+      for (const id of knownIds) model.remove(id);
+      knownIds = /* @__PURE__ */ new Set();
+      field = [];
+    }
+  };
+}
+
+// src/colorRamp.ts
+function rampColor(stops, value) {
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  if (!first || !last) return [0, 0, 0, 0];
+  if (Number.isNaN(value) || value <= first[0]) return [first[1], first[2], first[3], first[4] ?? 1];
+  if (value >= last[0]) return [last[1], last[2], last[3], last[4] ?? 1];
+  for (let i = 1; i < stops.length; i++) {
+    const hi = stops[i];
+    const lo = stops[i - 1];
+    if (value <= hi[0]) {
+      const t = (value - lo[0]) / (hi[0] - lo[0] || 1);
+      const mix = (a, b) => a + (b - a) * t;
+      return [mix(lo[1], hi[1]), mix(lo[2], hi[2]), mix(lo[3], hi[3]), mix(lo[4] ?? 1, hi[4] ?? 1)];
+    }
+  }
+  return [last[1], last[2], last[3], last[4] ?? 1];
+}
+var rgbaCss = ([r, g, b, a], alpha = 1) => `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${(a * alpha).toFixed(3)})`;
+var WIND_RAMP = [
+  [0, 98, 113, 184],
+  [2, 61, 110, 163],
+  [4, 74, 148, 170],
+  [7, 74, 146, 115],
+  [10, 77, 142, 56],
+  [13, 160, 168, 50],
+  [17, 210, 168, 48],
+  [22, 220, 110, 40],
+  [28, 190, 50, 50],
+  [36, 150, 40, 120]
+];
+var CLOUD_RAMP = [
+  [0, 255, 255, 255, 0],
+  [20, 235, 238, 242, 0.15],
+  [60, 205, 210, 218, 0.45],
+  [100, 150, 158, 170, 0.75]
+];
+var PRECIPITATION_RAMP = [
+  [0, 120, 190, 230, 0],
+  [0.1, 120, 190, 230, 0.45],
+  [1, 70, 190, 200, 0.7],
+  [3, 80, 190, 110, 0.78],
+  [6, 210, 220, 60, 0.82],
+  [12, 240, 170, 40, 0.85],
+  [25, 225, 80, 50, 0.88],
+  [50, 170, 40, 150, 0.9]
+];
+var TEMPERATURE_RAMP = [
+  [10, 80, 90, 200, 0.7],
+  [20, 70, 170, 200, 0.7],
+  [26, 120, 200, 110, 0.7],
+  [30, 235, 200, 70, 0.72],
+  [34, 235, 130, 50, 0.75],
+  [40, 200, 50, 50, 0.8]
+];
+
+// src/screenField.ts
+import {
+  directionFromUV,
+  sampleScalar,
+  sampleWind,
+  speedOf
+} from "@aeroswarm/weather";
+
+// src/math.ts
+var RAD = Math.PI / 180;
+function screenVector(toDeg, screenOffsetDeg = 0) {
+  const angle = (toDeg + screenOffsetDeg) * RAD;
+  return { x: Math.sin(angle), y: -Math.cos(angle) };
+}
+var clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+function windParticleCount(width, height, max = 520) {
+  return Math.min(max, Math.round(width * height / 2600));
+}
+function rainCount(pool, intensity) {
+  return Math.round(pool * clamp(intensity));
+}
+function particleSpeed(speedKt, gustKt = 0) {
+  return (speedKt + gustKt) * 7;
+}
+function gustPulse(gustiness, timeMs) {
+  if (gustiness <= 0) return 0;
+  const wave = 0.5 + 0.5 * Math.sin(timeMs / 700) * Math.sin(timeMs / 1900 + 1);
+  return wave * gustiness * 20;
+}
+function lightningInterval(perMinute, random) {
+  if (perMinute <= 0) return Number.POSITIVE_INFINITY;
+  return 6e4 / perMinute * (0.4 + random * 1.2);
+}
+
+// src/screenField.ts
+function buildScreenWindField(grid, width, height, unproject, screenOffsetDeg, cell = 24) {
+  const cols = Math.max(1, Math.ceil(width / cell));
+  const rows = Math.max(1, Math.ceil(height / cell));
+  const dx = new Float32Array(cols * rows);
+  const dy = new Float32Array(cols * rows);
+  const speed = new Float32Array(cols * rows).fill(Number.NaN);
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const ll = unproject((col + 0.5) * cell, (row + 0.5) * cell);
+      const wind = ll ? sampleWind(grid, ll.lon, ll.lat) : null;
+      if (!wind) continue;
+      const index = row * cols + col;
+      const vector = screenVector((directionFromUV(wind.u, wind.v) + 180) % 360, screenOffsetDeg);
+      dx[index] = vector.x;
+      dy[index] = vector.y;
+      speed[index] = speedOf(wind.u, wind.v);
+    }
+  }
+  return { cols, rows, cell, dx, dy, speed };
+}
+function buildScreenScalarField(grid, width, height, unproject, cell = 8) {
+  const cols = Math.max(1, Math.ceil(width / cell));
+  const rows = Math.max(1, Math.ceil(height / cell));
+  const values = new Float32Array(cols * rows).fill(Number.NaN);
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const ll = unproject((col + 0.5) * cell, (row + 0.5) * cell);
+      const value = ll ? sampleScalar(grid, ll.lon, ll.lat) : null;
+      if (value !== null) values[row * cols + col] = value;
+    }
+  }
+  return { cols, rows, cell, values };
+}
+function windAt(field, x, y) {
+  const col = Math.floor(x / field.cell);
+  const row = Math.floor(y / field.cell);
+  if (col < 0 || row < 0 || col >= field.cols || row >= field.rows) return null;
+  const index = row * field.cols + col;
+  const speed = field.speed[index];
+  if (Number.isNaN(speed)) return null;
+  return { dx: field.dx[index], dy: field.dy[index], speed };
+}
+
+// src/flowRenderer.ts
+var FlowRenderer = class {
+  constructor(options) {
+    this.options = options;
+    this.frameInterval = 1e3 / (options.maxFps ?? 30);
+    this.reduceMotion = options.reducedMotion ?? (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches);
+    this.canvas = document.createElement("canvas");
+    this.canvas.dataset.weatherLayer = "flow";
+    Object.assign(this.canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: String(options.zIndex ?? 4)
+    });
+    options.container.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D tidak tersedia");
+    this.ctx = ctx;
+    this.resize();
+  }
+  options;
+  canvas;
+  ctx;
+  grid = null;
+  field = null;
+  particles = [];
+  width = 1;
+  height = 1;
+  dpr = 1;
+  offset = 0;
+  raf = 0;
+  running = false;
+  last = 0;
+  accumulated = 0;
+  frameInterval;
+  reduceMotion;
+  setWind(grid) {
+    this.grid = grid;
+    this.refreshField();
+  }
+  setScreenOffset(degrees) {
+    if (degrees === this.offset) return;
+    this.offset = degrees;
+    this.refreshField();
+  }
+  /** Dipanggil saat peta bergerak/zoom: petakan ulang medan ke layar. */
+  refreshField() {
+    this.field = this.grid ? buildScreenWindField(this.grid, this.width, this.height, this.options.unproject, this.offset) : null;
+    if (!this.field) this.ctx.clearRect(0, 0, this.width, this.height);
+  }
+  resize() {
+    const rect = this.options.container.getBoundingClientRect();
+    this.width = Math.max(1, Math.round(rect.width));
+    this.height = Math.max(1, Math.round(rect.height));
+    this.dpr = Math.min(2, window.devicePixelRatio || 1);
+    this.canvas.width = this.width * this.dpr;
+    this.canvas.height = this.height * this.dpr;
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    const count = Math.min(this.options.maxParticles ?? 3e3, Math.round(this.width * this.height / 700));
+    this.particles = Array.from({ length: count }, () => this.spawn());
+    this.refreshField();
+  }
+  setVisible(visible) {
+    this.canvas.style.display = visible ? "block" : "none";
+    if (visible) this.start();
+    else this.stop();
+  }
+  setOpacity(opacity) {
+    this.canvas.style.opacity = String(Math.min(1, Math.max(0, opacity)));
+  }
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this.last = performance.now();
+    const tick = (now) => {
+      if (!this.running) return;
+      this.accumulated += now - this.last;
+      this.last = now;
+      if (!document.hidden && this.accumulated >= this.frameInterval) {
+        this.step(Math.min(0.1, this.accumulated / 1e3));
+        this.accumulated = 0;
+      }
+      this.raf = requestAnimationFrame(tick);
+    };
+    this.raf = requestAnimationFrame(tick);
+  }
+  stop() {
+    this.running = false;
+    cancelAnimationFrame(this.raf);
+  }
+  destroy() {
+    this.stop();
+    this.canvas.remove();
+  }
+  spawn() {
+    return {
+      x: Math.random() * this.width,
+      y: Math.random() * this.height,
+      age: Math.floor(Math.random() * 60),
+      life: 50 + Math.random() * 80
+    };
+  }
+  step(dt) {
+    const ctx = this.ctx;
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.fillStyle = `rgba(0,0,0,${this.reduceMotion ? 1 : 0.07})`;
+    ctx.fillRect(0, 0, this.width, this.height);
+    ctx.globalCompositeOperation = "source-over";
+    const field = this.field;
+    if (!field) return;
+    const pixelsPerMs = this.options.pixelsPerMs ?? 9;
+    ctx.lineWidth = 1.3;
+    ctx.lineCap = "round";
+    const motion = this.reduceMotion ? 0 : 1;
+    const buckets = /* @__PURE__ */ new Map();
+    for (const p of this.particles) {
+      const wind = windAt(field, p.x, p.y);
+      if (!wind || p.age > p.life) {
+        Object.assign(p, this.spawn(), { age: 0 });
+        continue;
+      }
+      const step = wind.speed * pixelsPerMs * dt * motion;
+      const nx = p.x + wind.dx * step;
+      const ny = p.y + wind.dy * step;
+      const key = Math.round(wind.speed / 1.5);
+      let bucket = buckets.get(key);
+      if (!bucket) {
+        bucket = { color: rgbaCss(rampColor(WIND_RAMP, key * 1.5), 0.85), path: new Path2D() };
+        buckets.set(key, bucket);
+      }
+      bucket.path.moveTo(p.x, p.y);
+      bucket.path.lineTo(nx, ny);
+      p.x = nx;
+      p.y = ny;
+      p.age++;
+      if (nx < 0 || ny < 0 || nx > this.width || ny > this.height) p.age = p.life + 1;
+    }
+    for (const { color, path } of buckets.values()) {
+      ctx.strokeStyle = color;
+      ctx.stroke(path);
+    }
+  }
+};
+
+// src/renderer.ts
+var CALM = {
+  wind: { fromDeg: null, toDeg: null, speedKt: 0, gustiness: 0, turbulent: false },
+  clouds: { layers: [], total: 0 },
+  visibility: { meters: null, haze: 0 },
+  obscuration: null,
+  precipitation: null,
+  thunderstorm: null
+};
+var DROP_POOL = 700;
+function makePuffSprite() {
+  const sprite = document.createElement("canvas");
+  sprite.width = sprite.height = 128;
+  const ctx = sprite.getContext("2d");
+  if (ctx) {
+    const gradient = ctx.createRadialGradient(64, 64, 4, 64, 64, 62);
+    gradient.addColorStop(0, "rgba(255,255,255,0.95)");
+    gradient.addColorStop(0.55, "rgba(255,255,255,0.45)");
+    gradient.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 128, 128);
+  }
+  return sprite;
+}
+var WeatherRenderer = class {
+  constructor(options) {
+    this.options = options;
+    this.theme = options.theme ?? "light";
+    this.frameInterval = 1e3 / (options.maxFps ?? 30);
+    this.reduceMotion = options.reducedMotion ?? (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches);
+    this.windCanvas = this.createCanvas("wind");
+    this.fxCanvas = this.createCanvas("fx");
+    const wind = this.windCanvas.getContext("2d");
+    const fx = this.fxCanvas.getContext("2d");
+    if (!wind || !fx) throw new Error("Canvas 2D tidak tersedia");
+    this.wind = wind;
+    this.fx = fx;
+    this.resize();
+  }
+  options;
+  windCanvas;
+  fxCanvas;
+  wind;
+  fx;
+  puff = makePuffSprite();
+  drops = Array.from({ length: DROP_POOL }, () => ({
+    x: Math.random(),
+    y: Math.random(),
+    len: 0.6 + Math.random() * 0.8,
+    speed: 0.7 + Math.random() * 0.6
+  }));
+  state = CALM;
+  theme;
+  screenOffset = 0;
+  width = 1;
+  height = 1;
+  dpr = 1;
+  particles = [];
+  clouds = [];
+  raf = 0;
+  lastFrame = 0;
+  accumulated = 0;
+  flash = 0;
+  bolt = null;
+  nextBolt = 0;
+  frameInterval;
+  reduceMotion;
+  running = false;
+  setState(state) {
+    this.state = state;
+    if (this.reduceMotion) this.renderFrame(performance.now(), 0);
+  }
+  /** Putaran peta (derajat) yang ditambahkan ke arah geografis angin. */
+  setScreenOffset(degrees) {
+    this.screenOffset = degrees;
+  }
+  setTheme(theme) {
+    this.theme = theme;
+  }
+  setVisible(visible) {
+    for (const canvas of [this.windCanvas, this.fxCanvas]) {
+      canvas.style.display = visible ? "block" : "none";
+    }
+    if (visible) this.start();
+    else this.stop();
+  }
+  setOpacity(opacity) {
+    for (const canvas of [this.windCanvas, this.fxCanvas]) {
+      canvas.style.opacity = String(clamp(opacity));
+    }
+  }
+  resize() {
+    const rect = this.options.container.getBoundingClientRect();
+    this.width = Math.max(1, Math.round(rect.width));
+    this.height = Math.max(1, Math.round(rect.height));
+    this.dpr = Math.min(2, window.devicePixelRatio || 1);
+    for (const canvas of [this.windCanvas, this.fxCanvas]) {
+      canvas.width = this.width * this.dpr;
+      canvas.height = this.height * this.dpr;
+    }
+    this.wind.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.fx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.seedParticles();
+    this.seedClouds();
+  }
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this.lastFrame = performance.now();
+    const tick = (now) => {
+      if (!this.running) return;
+      const dt = (now - this.lastFrame) / 1e3;
+      this.lastFrame = now;
+      this.accumulated += dt * 1e3;
+      if (!document.hidden && this.accumulated >= this.frameInterval) {
+        this.renderFrame(now, Math.min(0.1, this.accumulated / 1e3));
+        this.accumulated = 0;
+      }
+      this.raf = requestAnimationFrame(tick);
+    };
+    this.raf = requestAnimationFrame(tick);
+  }
+  stop() {
+    this.running = false;
+    cancelAnimationFrame(this.raf);
+  }
+  destroy() {
+    this.stop();
+    this.windCanvas.remove();
+    this.fxCanvas.remove();
+  }
+  // ---- internal --------------------------------------------------------
+  createCanvas(name) {
+    const canvas = document.createElement("canvas");
+    canvas.dataset.weatherLayer = name;
+    Object.assign(canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: String(this.options.zIndex ?? 5)
+    });
+    this.options.container.appendChild(canvas);
+    return canvas;
+  }
+  seedParticles() {
+    const count = windParticleCount(this.width, this.height);
+    this.particles = Array.from({ length: count }, () => this.newParticle());
+    this.wind.clearRect(0, 0, this.width, this.height);
+  }
+  newParticle() {
+    return {
+      x: Math.random() * this.width,
+      y: Math.random() * this.height,
+      age: Math.floor(Math.random() * 80),
+      life: 60 + Math.random() * 90
+    };
+  }
+  seedClouds() {
+    this.clouds = Array.from({ length: 16 }, (_, i) => {
+      const size = 90 + Math.random() * 120;
+      const count = 5 + Math.floor(Math.random() * 4);
+      return {
+        x: Math.random() * (this.width + 300) - 150,
+        y: Math.random() * (this.height + 100) - 50,
+        layer: 0.6 + Math.random() * 0.8,
+        threshold: i / 16,
+        puffs: Array.from({ length: count }, () => ({
+          dx: (Math.random() - 0.5) * size * 1.4,
+          dy: (Math.random() - 0.5) * size * 0.5,
+          r: size * (0.5 + Math.random() * 0.5)
+        }))
+      };
+    });
+  }
+  renderFrame(now, dt) {
+    const { wind, thunderstorm } = this.state;
+    const motion = this.reduceMotion ? 0 : 1;
+    const toDeg = wind.toDeg;
+    const vector = toDeg === null ? null : screenVector(toDeg, this.screenOffset);
+    const gust = gustPulse(wind.gustiness, now);
+    const speed = particleSpeed(wind.speedKt, gust);
+    this.drawWind(now, dt, vector, wind.turbulent, speed, motion);
+    const fx = this.fx;
+    fx.clearRect(0, 0, this.width, this.height);
+    this.drawClouds(dt, vector, wind.speedKt, motion);
+    this.drawPrecipitation(dt, vector, wind.speedKt, motion);
+    this.drawHaze(now, motion);
+    this.drawLightning(now, dt, thunderstorm?.lightningPerMinute ?? 0);
+  }
+  drawWind(now, dt, vector, turbulent, speed, motion) {
+    const ctx = this.wind;
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.fillStyle = `rgba(0,0,0,${this.reduceMotion ? 1 : 0.1})`;
+    ctx.fillRect(0, 0, this.width, this.height);
+    ctx.globalCompositeOperation = "source-over";
+    if (this.state.wind.speedKt <= 0) return;
+    const alpha = Math.min(0.75, 0.22 + this.state.wind.speedKt / 50);
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = this.theme === "dark" ? `rgba(120,200,220,${alpha})` : `rgba(31,122,140,${alpha})`;
+    ctx.beginPath();
+    for (const p of this.particles) {
+      const fromX = p.x;
+      const fromY = p.y;
+      let vx;
+      let vy;
+      if (turbulent || vector === null) {
+        vx = Math.cos(p.age / 12 + p.x) * 0.7;
+        vy = Math.sin(p.age / 14 + p.y) * 0.7;
+      } else {
+        const wobble = Math.sin(p.y / 55 + now / 1400) * 0.35 + Math.cos(p.x / 70 - now / 1700) * 0.25;
+        vx = vector.x - wobble * 0.25 * vector.y;
+        vy = vector.y + wobble * 0.25 * vector.x;
+      }
+      p.x += vx * speed * dt * motion;
+      p.y += vy * speed * dt * motion;
+      p.age++;
+      ctx.moveTo(fromX, fromY);
+      ctx.lineTo(p.x, p.y);
+      if (p.x < 0 || p.x > this.width || p.y < 0 || p.y > this.height || p.age > p.life) {
+        Object.assign(p, this.newParticle(), { age: 0 });
+      }
+    }
+    ctx.stroke();
+  }
+  drawClouds(dt, vector, speedKt, motion) {
+    const ctx = this.fx;
+    const cover = this.state.clouds.total;
+    const precipitation = this.state.precipitation;
+    const dark = clamp(
+      (precipitation?.intensity ?? 0) * 0.6 + (this.state.thunderstorm?.overhead ? 0.4 : 0)
+    );
+    if (cover <= 0) return;
+    for (const cloud of this.clouds) {
+      if (vector) {
+        cloud.x += vector.x * speedKt * 1.4 * cloud.layer * dt * motion;
+        cloud.y += vector.y * speedKt * 1.4 * cloud.layer * dt * motion;
+      }
+      if (cloud.x < -250) cloud.x = this.width + 250;
+      if (cloud.x > this.width + 250) cloud.x = -250;
+      if (cloud.y < -150) cloud.y = this.height + 150;
+      if (cloud.y > this.height + 150) cloud.y = -150;
+      const visible = clamp((cover * 1.15 - cloud.threshold) * 4);
+      if (visible <= 0) continue;
+      ctx.globalAlpha = visible * (0.38 + 0.3 * cover) * (1 - dark * 0.15);
+      for (const puff of cloud.puffs) {
+        ctx.drawImage(
+          this.puff,
+          cloud.x + puff.dx - puff.r,
+          cloud.y + puff.dy - puff.r,
+          puff.r * 2,
+          puff.r * 2
+        );
+      }
+    }
+    ctx.globalAlpha = 1;
+    if (dark > 0 || cover > 0.6) {
+      ctx.fillStyle = `rgba(38,48,62,${(cover * 0.2 + dark * 0.32).toFixed(3)})`;
+      ctx.fillRect(0, 0, this.width, this.height);
+    }
+  }
+  drawPrecipitation(dt, vector, speedKt, motion) {
+    const precipitation = this.state.precipitation;
+    if (!precipitation) return;
+    const ctx = this.fx;
+    const count = rainCount(this.drops.length, precipitation.intensity);
+    const slant = (vector?.x ?? 0) * Math.min(1, speedKt / 25) * 0.5;
+    const snow = precipitation.kind === "snow";
+    const fall = snow ? 0.25 : 1.6;
+    if (snow) ctx.fillStyle = "rgba(255,255,255,0.8)";
+    else {
+      ctx.strokeStyle = `rgba(150,185,225,${(0.3 + 0.3 * precipitation.intensity).toFixed(2)})`;
+      ctx.lineWidth = precipitation.kind === "drizzle" ? 0.7 : 1.1;
+      ctx.beginPath();
+    }
+    for (let i = 0; i < count; i++) {
+      const drop = this.drops[i];
+      if (!drop) continue;
+      drop.y += drop.speed * dt * fall * motion;
+      drop.x += slant * dt * fall * motion;
+      if (drop.y > 1) {
+        drop.y = -0.05;
+        drop.x = Math.random();
+      }
+      if (drop.x > 1) drop.x = 0;
+      if (drop.x < 0) drop.x = 1;
+      const x = drop.x * this.width;
+      const y = drop.y * this.height;
+      if (snow) ctx.fillRect(x, y, 2, 2);
+      else {
+        const length = 12 * drop.len;
+        ctx.moveTo(x, y);
+        ctx.lineTo(x - slant * length, y - length);
+      }
+    }
+    if (!snow) ctx.stroke();
+  }
+  drawHaze(now, motion) {
+    const { visibility, obscuration } = this.state;
+    const haze = Math.max(visibility.haze, (obscuration?.density ?? 0) * 0.7);
+    if (haze <= 0.01) return;
+    const ctx = this.fx;
+    const dark = this.theme === "dark";
+    ctx.fillStyle = `${dark ? "rgba(150,160,168," : "rgba(214,219,223,"}${(haze * 0.78).toFixed(3)})`;
+    ctx.fillRect(0, 0, this.width, this.height);
+    if (obscuration?.kind === "fog" || (visibility.meters ?? 1e4) < 1500) {
+      for (let i = 0; i < 3; i++) {
+        const cx = now / 40 * (i + 1) * 0.8 * motion % (this.width * 1.3) + i * this.width * 0.2;
+        const cy = this.height * (0.3 + i * 0.25);
+        const gradient = ctx.createRadialGradient(cx, cy, 10, cx, cy, this.width * 0.5);
+        gradient.addColorStop(0, dark ? "rgba(170,180,188,0.35)" : "rgba(235,238,240,0.5)");
+        gradient.addColorStop(1, "rgba(0,0,0,0)");
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.width, this.height);
+      }
+    }
+  }
+  drawLightning(now, dt, perMinute) {
+    if (this.reduceMotion) return;
+    const ctx = this.fx;
+    if (perMinute > 0 && now > this.nextBolt) {
+      this.flash = 1;
+      this.bolt = this.makeBolt();
+      this.nextBolt = now + lightningInterval(perMinute, Math.random());
+    }
+    if (this.flash <= 0) return;
+    ctx.fillStyle = `rgba(255,255,255,${(this.flash * 0.35).toFixed(3)})`;
+    ctx.fillRect(0, 0, this.width, this.height);
+    if (this.bolt && this.flash > 0.35) {
+      ctx.strokeStyle = `rgba(255,255,255,${this.flash.toFixed(2)})`;
+      ctx.lineWidth = 2.2;
+      ctx.beginPath();
+      this.bolt.forEach(([x, y], i) => {
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.stroke();
+    }
+    this.flash -= dt * 3.2;
+  }
+  makeBolt() {
+    let x = this.width * (0.2 + Math.random() * 0.6);
+    let y = 0;
+    const points = [[x, y]];
+    const reach = this.height * (0.5 + Math.random() * 0.3);
+    while (y < reach) {
+      x += (Math.random() - 0.5) * 36;
+      y += 14 + Math.random() * 22;
+      points.push([x, y]);
+    }
+    return points;
+  }
+};
+
+// src/overlay.ts
+function mapScreenOffset(map) {
+  const camera = map.camera;
+  if (!camera) return 0;
+  try {
+    if (map.reference?.identifier === "EPSG:4978") {
+      return -(camera.asLookAt?.(1e3).yaw ?? 0);
+    }
+    return -(camera.asLook2D?.().rotation ?? 0);
+  } catch {
+    return 0;
+  }
+}
+function detectTheme() {
+  const explicit = document.documentElement.dataset.theme;
+  if (explicit === "dark" || explicit === "light") return explicit;
+  return matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function createWeatherOverlay(map, options = {}) {
+  const container = map.domNode;
+  if (getComputedStyle(container).position === "static") {
+    container.style.position = "relative";
+  }
+  const theme = options.theme ?? "auto";
+  const renderer = new WeatherRenderer({
+    container,
+    theme: theme === "auto" ? detectTheme() : theme,
+    zIndex: options.zIndex,
+    maxFps: options.maxFps
+  });
+  const offsetOf = options.getScreenOffset ?? mapScreenOffset;
+  let width = container.clientWidth;
+  let height = container.clientHeight;
+  const handle = map.on("MapChange", () => {
+    renderer.setScreenOffset(offsetOf(map));
+    if (container.clientWidth !== width || container.clientHeight !== height) {
+      width = container.clientWidth;
+      height = container.clientHeight;
+      renderer.resize();
+    }
+  });
+  const themeObserver = theme === "auto" ? new MutationObserver(() => renderer.setTheme(detectTheme())) : null;
+  themeObserver?.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"]
+  });
+  renderer.setScreenOffset(offsetOf(map));
+  renderer.start();
+  return {
+    renderer,
+    setState: (state) => renderer.setState(state),
+    setVisible: (visible) => renderer.setVisible(visible),
+    setOpacity: (opacity) => renderer.setOpacity(opacity),
+    destroy() {
+      handle.remove();
+      themeObserver?.disconnect();
+      renderer.destroy();
+    }
+  };
+}
+
+// src/scalarRenderer.ts
+var ScalarRenderer = class {
+  constructor(options) {
+    this.options = options;
+    this.ramp = options.ramp ?? CLOUD_RAMP;
+    this.canvas = document.createElement("canvas");
+    this.canvas.dataset.weatherLayer = "scalar";
+    Object.assign(this.canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: String(options.zIndex ?? 3)
+    });
+    options.container.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D tidak tersedia");
+    this.ctx = ctx;
+    this.resize();
+  }
+  options;
+  canvas;
+  ctx;
+  small = document.createElement("canvas");
+  grid = null;
+  ramp;
+  width = 1;
+  height = 1;
+  dpr = 1;
+  setGrid(grid, ramp) {
+    this.grid = grid;
+    if (ramp) this.ramp = ramp;
+    this.draw();
+  }
+  resize() {
+    const rect = this.options.container.getBoundingClientRect();
+    this.width = Math.max(1, Math.round(rect.width));
+    this.height = Math.max(1, Math.round(rect.height));
+    this.dpr = Math.min(2, window.devicePixelRatio || 1);
+    this.canvas.width = this.width * this.dpr;
+    this.canvas.height = this.height * this.dpr;
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.draw();
+  }
+  /** Gambar ulang setelah peta bergerak atau di-zoom. */
+  draw() {
+    const ctx = this.ctx;
+    ctx.clearRect(0, 0, this.width, this.height);
+    if (!this.grid) return;
+    const field = buildScreenScalarField(this.grid, this.width, this.height, this.options.unproject);
+    this.small.width = field.cols;
+    this.small.height = field.rows;
+    const small = this.small.getContext("2d");
+    if (!small) return;
+    const image = small.createImageData(field.cols, field.rows);
+    for (let i = 0; i < field.values.length; i++) {
+      const value = field.values[i];
+      if (Number.isNaN(value)) continue;
+      const [r, g, b, a] = rampColor(this.ramp, value);
+      image.data[i * 4] = r;
+      image.data[i * 4 + 1] = g;
+      image.data[i * 4 + 2] = b;
+      image.data[i * 4 + 3] = Math.round(a * 255);
+    }
+    small.putImageData(image, 0, 0);
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(this.small, 0, 0, field.cols * field.cell, field.rows * field.cell);
+  }
+  setVisible(visible) {
+    this.canvas.style.display = visible ? "block" : "none";
+  }
+  setOpacity(opacity) {
+    this.canvas.style.opacity = String(Math.min(1, Math.max(0, opacity)));
+  }
+  destroy() {
+    this.canvas.remove();
+  }
+};
+
+// src/fieldOverlay.ts
+function createFieldOverlay(map, options) {
+  const container = map.domNode;
+  if (getComputedStyle(container).position === "static") container.style.position = "relative";
+  const offsetOf = options.getScreenOffset ?? mapScreenOffset;
+  const scalar = new ScalarRenderer({ container, unproject: options.unproject, zIndex: options.zIndex });
+  const flow = new FlowRenderer({
+    container,
+    unproject: options.unproject,
+    zIndex: (options.zIndex ?? 3) + 1,
+    maxFps: options.maxFps,
+    pixelsPerMs: options.pixelsPerMs
+  });
+  let width = container.clientWidth;
+  let height = container.clientHeight;
+  let pending = null;
+  const refresh = () => {
+    pending = null;
+    if (container.clientWidth !== width || container.clientHeight !== height) {
+      width = container.clientWidth;
+      height = container.clientHeight;
+      scalar.resize();
+      flow.resize();
+    }
+    flow.setScreenOffset(offsetOf(map));
+    flow.refreshField();
+    scalar.draw();
+  };
+  const handle = map.on("MapChange", () => {
+    if (pending === null) pending = setTimeout(refresh, 100);
+  });
+  flow.setScreenOffset(offsetOf(map));
+  flow.start();
+  return {
+    setWind: (grid) => flow.setWind(grid),
+    setScalar: (grid, ramp) => scalar.setGrid(grid, ramp),
+    setVisible(visible) {
+      flow.setVisible(visible);
+      scalar.setVisible(visible);
+    },
+    setOpacity(opacity) {
+      flow.setOpacity(opacity);
+      scalar.setOpacity(opacity);
+    },
+    destroy() {
+      if (pending !== null) clearTimeout(pending);
+      handle.remove();
+      flow.destroy();
+      scalar.destroy();
+    }
+  };
+}
+
+// src/riaUnproject.ts
+function createRiaUnproject(map, deps) {
+  const toWgs84 = deps.createTransformation(map.reference, deps.wgs84);
+  return (x, y) => {
+    try {
+      const mapPoint = map.viewToMapTransformation.transform(deps.createPoint(null, [x, y, 0]));
+      const point = toWgs84.transform(mapPoint);
+      return Number.isFinite(point.x) && Number.isFinite(point.y) ? { lon: point.x, lat: point.y } : null;
+    } catch {
+      return null;
+    }
+  };
+}
+export {
+  CLOUD_RAMP,
+  FlowRenderer,
+  PRECIPITATION_RAMP,
+  ScalarRenderer,
+  TEMPERATURE_RAMP,
+  WIND_RAMP,
+  WeatherRenderer,
+  advanceCloudField,
+  buildCloudField,
+  buildScreenScalarField,
+  buildScreenWindField,
+  clamp,
+  createCloudLayer3D,
+  createFieldOverlay,
+  createRiaUnproject,
+  createWeatherOverlay,
+  gustPulse,
+  lightningInterval,
+  makeCloudSpriteUrl,
+  mapScreenOffset,
+  offsetToLonLat,
+  particleSpeed,
+  rainCount,
+  rampColor,
+  rgbaCss,
+  screenVector,
+  seededRandom,
+  windAt,
+  windParticleCount
+};
+//# sourceMappingURL=index.js.map