livegauge 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1080 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Gauge: () => Gauge
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Gauge.tsx
+var import_react3 = require("react");
+
+// src/theme.ts
+function parseColorRgb(color) {
+  const hex = color.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+  const rgb = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgb) return [+rgb[1], +rgb[2], +rgb[3]];
+  return [128, 128, 128];
+}
+function rgba(r, g, b, a) {
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+function resolveTheme(color, mode) {
+  const [r, g, b] = parseColorRgb(color);
+  const isDark = mode === "dark";
+  return {
+    accent: color,
+    accentRgb: [r, g, b],
+    arcTrack: isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.07)",
+    arcFill: color,
+    needleColor: isDark ? "#e5e5e5" : "#1a1a1a",
+    needleShadow: isDark ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.2)",
+    dotUp: "#22c55e",
+    dotDown: "#ef4444",
+    dotFlat: color,
+    glowUp: "rgba(34, 197, 94, 0.25)",
+    glowDown: "rgba(239, 68, 68, 0.25)",
+    glowFlat: rgba(r, g, b, 0.2),
+    tickColor: isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.15)",
+    tickLabelColor: isDark ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.4)",
+    valueColor: isDark ? "#e5e5e5" : "#1a1a1a",
+    labelColor: isDark ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.4)",
+    bgRgb: isDark ? [10, 10, 10] : [255, 255, 255],
+    labelFont: '11px "SF Mono", Menlo, Monaco, "Cascadia Code", monospace',
+    valueFont: '600 28px "SF Mono", Menlo, monospace',
+    tickFont: '10px "SF Mono", Menlo, Monaco, "Cascadia Code", monospace'
+  };
+}
+
+// src/useGaugeEngine.ts
+var import_react = require("react");
+
+// src/math/lerp.ts
+function lerp(current, target, speed, dt = 16.67) {
+  const factor = 1 - Math.pow(1 - speed, dt / 16.67);
+  return current + (target - current) * factor;
+}
+
+// src/canvas/dpr.ts
+function getDpr() {
+  if (typeof window === "undefined") return 1;
+  return Math.min(window.devicePixelRatio || 1, 3);
+}
+function applyDpr(ctx, dpr, w, h) {
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+}
+
+// src/draw/arc.ts
+function drawArcTrack(ctx, layout, palette) {
+  ctx.beginPath();
+  ctx.arc(layout.cx, layout.cy, layout.radius, layout.startAngle, layout.endAngle, false);
+  ctx.strokeStyle = palette.arcTrack;
+  ctx.lineWidth = layout.arcWidth;
+  ctx.lineCap = "round";
+  ctx.stroke();
+}
+function drawArcZones(ctx, layout, zones, arcWidth) {
+  const { cx, cy, radius } = layout;
+  const outerR = radius + arcWidth;
+  const innerR = Math.max(0, radius - arcWidth);
+  const capAngle = arcWidth / 2 / radius + 0.02;
+  for (let i = 0; i < zones.length; i++) {
+    const zone = zones[i];
+    const startA = layout.valueToAngle(zone.from);
+    const endA = layout.valueToAngle(zone.to);
+    if (Math.abs(endA - startA) < 1e-3) continue;
+    const isFirst = i === 0;
+    const isLast = i === zones.length - 1;
+    if (isFirst || isLast) {
+      ctx.save();
+      ctx.beginPath();
+      const clipStart = isFirst ? startA - capAngle : startA;
+      const clipEnd = isLast ? endA + capAngle : endA;
+      ctx.arc(cx, cy, outerR, clipStart, clipEnd, false);
+      ctx.arc(cx, cy, innerR, clipEnd, clipStart, true);
+      ctx.closePath();
+      ctx.clip();
+      ctx.beginPath();
+      ctx.arc(cx, cy, radius, startA, endA, false);
+      ctx.strokeStyle = zone.color;
+      ctx.lineWidth = arcWidth;
+      ctx.lineCap = "round";
+      ctx.stroke();
+      ctx.restore();
+    } else {
+      ctx.beginPath();
+      ctx.arc(cx, cy, radius, startA, endA, false);
+      ctx.strokeStyle = zone.color;
+      ctx.lineWidth = arcWidth;
+      ctx.lineCap = "butt";
+      ctx.stroke();
+    }
+  }
+}
+function drawArcFill(ctx, layout, palette, valueAngle) {
+  const span = Math.abs(valueAngle - layout.startAngle);
+  if (span < 2e-3) return;
+  ctx.beginPath();
+  ctx.arc(layout.cx, layout.cy, layout.radius, layout.startAngle, valueAngle, false);
+  ctx.strokeStyle = palette.arcFill;
+  ctx.lineWidth = layout.arcWidth;
+  ctx.lineCap = "round";
+  ctx.stroke();
+}
+function drawMinMaxLabels(ctx, layout, palette, min, max, formatValue) {
+  ctx.font = palette.tickFont;
+  ctx.fillStyle = palette.tickLabelColor;
+  ctx.textBaseline = "top";
+  const yOffset = layout.arcWidth / 2 + 6;
+  const minX = layout.cx + Math.cos(layout.startAngle) * layout.radius;
+  const minY = layout.cy + Math.sin(layout.startAngle) * layout.radius;
+  ctx.textAlign = "left";
+  ctx.fillText(formatValue(min), minX - 4, minY + yOffset);
+  const maxX = layout.cx + Math.cos(layout.endAngle) * layout.radius;
+  const maxY = layout.cy + Math.sin(layout.endAngle) * layout.radius;
+  ctx.textAlign = "right";
+  ctx.fillText(formatValue(max), maxX + 4, maxY + yOffset);
+}
+
+// src/draw/needle.ts
+function drawNeedle(ctx, layout, palette, angle, momentum, momentumGlowAlpha = 0, showDot = true) {
+  const { cx, cy, radius } = layout;
+  const needleLen = radius - layout.arcWidth / 2 - 6;
+  const tipX = cx + Math.cos(angle) * needleLen;
+  const tipY = cy + Math.sin(angle) * needleLen;
+  if (showDot && momentumGlowAlpha > 0.01) {
+    const glowColor = momentum === "up" ? palette.glowUp : momentum === "down" ? palette.glowDown : palette.glowFlat;
+    ctx.save();
+    ctx.globalAlpha = momentumGlowAlpha * 0.6;
+    ctx.shadowColor = glowColor;
+    ctx.shadowBlur = 18;
+    ctx.beginPath();
+    ctx.arc(tipX, tipY, 6, 0, Math.PI * 2);
+    ctx.fillStyle = glowColor;
+    ctx.fill();
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.shadowColor = palette.needleShadow;
+  ctx.shadowBlur = 8;
+  ctx.shadowOffsetY = 2;
+  const perpAngle = angle + Math.PI / 2;
+  const baseW = 3.5;
+  const bx1 = cx + Math.cos(perpAngle) * baseW;
+  const by1 = cy + Math.sin(perpAngle) * baseW;
+  const bx2 = cx - Math.cos(perpAngle) * baseW;
+  const by2 = cy - Math.sin(perpAngle) * baseW;
+  ctx.beginPath();
+  ctx.moveTo(bx1, by1);
+  ctx.lineTo(tipX, tipY);
+  ctx.lineTo(bx2, by2);
+  ctx.closePath();
+  ctx.fillStyle = palette.needleColor;
+  ctx.fill();
+  ctx.restore();
+  ctx.beginPath();
+  ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+  ctx.fillStyle = palette.needleColor;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(cx, cy, 2.5, 0, Math.PI * 2);
+  ctx.fillStyle = palette.accent;
+  ctx.fill();
+}
+var CIRCLE_PULSE_INTERVAL = 1500;
+var CIRCLE_PULSE_DURATION = 900;
+function drawCirclePointer(ctx, layout, palette, angle, momentum, momentumGlowAlpha = 0, pulse = false, now_ms = performance.now()) {
+  const { cx, cy, radius, arcWidth } = layout;
+  const pointerRadius = arcWidth / 2 + 2;
+  const px = cx + Math.cos(angle) * radius;
+  const py = cy + Math.sin(angle) * radius;
+  const baseAlpha = ctx.globalAlpha;
+  if (pulse) {
+    const t = now_ms % CIRCLE_PULSE_INTERVAL / CIRCLE_PULSE_DURATION;
+    if (t < 1) {
+      const ringRadius = pointerRadius + t * 12;
+      const pulseAlpha = 0.35 * (1 - t);
+      ctx.beginPath();
+      ctx.arc(px, py, ringRadius, 0, Math.PI * 2);
+      ctx.strokeStyle = palette.dotFlat;
+      ctx.lineWidth = 1.5;
+      ctx.globalAlpha = baseAlpha * pulseAlpha;
+      ctx.stroke();
+      ctx.globalAlpha = baseAlpha;
+    }
+  }
+  if (momentumGlowAlpha > 0.01) {
+    const glowColor = momentum === "up" ? palette.glowUp : momentum === "down" ? palette.glowDown : palette.glowFlat;
+    ctx.save();
+    ctx.globalAlpha = momentumGlowAlpha * 0.5;
+    ctx.shadowColor = glowColor;
+    ctx.shadowBlur = 16;
+    ctx.beginPath();
+    ctx.arc(px, py, pointerRadius + 2, 0, Math.PI * 2);
+    ctx.fillStyle = glowColor;
+    ctx.fill();
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.shadowColor = "rgba(0,0,0,0.3)";
+  ctx.shadowBlur = 6;
+  ctx.shadowOffsetY = 1;
+  ctx.beginPath();
+  ctx.arc(px, py, pointerRadius, 0, Math.PI * 2);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill();
+  ctx.restore();
+}
+
+// src/draw/ticks.ts
+function autoTickCount(radius) {
+  if (radius < 60) return 5;
+  if (radius < 100) return 7;
+  if (radius < 160) return 9;
+  return 11;
+}
+function drawTicks(ctx, layout, palette, min, max, tickCount, showLabels, formatValue) {
+  const { cx, cy, radius, arcWidth } = layout;
+  const outerR = radius + arcWidth / 2 + 2;
+  const majorLen = 8;
+  const minorLen = 4;
+  const totalAngle = layout.endAngle - layout.startAngle;
+  const majorSteps = tickCount - 1;
+  for (let i = 0; i <= majorSteps; i++) {
+    const t = i / majorSteps;
+    const angle = layout.startAngle + t * totalAngle;
+    const isMajor = true;
+    const len = isMajor ? majorLen : minorLen;
+    const innerR = outerR;
+    const outerTick = outerR + len;
+    const cosA = Math.cos(angle);
+    const sinA = Math.sin(angle);
+    ctx.beginPath();
+    ctx.moveTo(cx + cosA * innerR, cy + sinA * innerR);
+    ctx.lineTo(cx + cosA * outerTick, cy + sinA * outerTick);
+    ctx.strokeStyle = palette.tickColor;
+    ctx.lineWidth = isMajor ? 1.5 : 1;
+    ctx.lineCap = "round";
+    ctx.stroke();
+    if (i < majorSteps) {
+      const nextT = (i + 1) / majorSteps;
+      const midT = (t + nextT) / 2;
+      const midAngle = layout.startAngle + midT * totalAngle;
+      const cosM = Math.cos(midAngle);
+      const sinM = Math.sin(midAngle);
+      ctx.beginPath();
+      ctx.moveTo(cx + cosM * innerR, cy + sinM * innerR);
+      ctx.lineTo(cx + cosM * (outerR + minorLen), cy + sinM * (outerR + minorLen));
+      ctx.strokeStyle = palette.tickColor;
+      ctx.lineWidth = 1;
+      ctx.lineCap = "round";
+      ctx.stroke();
+    }
+    if (showLabels && isMajor) {
+      const value = min + t * (max - min);
+      const labelR = outerTick + 10;
+      const lx = cx + cosA * labelR;
+      const ly = cy + sinA * labelR;
+      ctx.font = palette.tickFont;
+      ctx.fillStyle = palette.tickLabelColor;
+      ctx.textBaseline = "middle";
+      if (t < 0.1) {
+        ctx.textAlign = "right";
+      } else if (t > 0.9) {
+        ctx.textAlign = "left";
+      } else if (t < 0.4) {
+        ctx.textAlign = "right";
+      } else if (t > 0.6) {
+        ctx.textAlign = "left";
+      } else {
+        ctx.textAlign = "center";
+      }
+      ctx.fillText(formatValue(value), lx, ly);
+    }
+  }
+}
+
+// src/draw/dot.ts
+var PULSE_INTERVAL = 1500;
+var PULSE_DURATION = 900;
+function drawDot(ctx, x, y, palette, momentum, pulse = true, now_ms = performance.now()) {
+  const baseAlpha = ctx.globalAlpha;
+  const dotColor = momentum === "up" ? palette.dotUp : momentum === "down" ? palette.dotDown : palette.dotFlat;
+  const glowColor = momentum === "up" ? palette.glowUp : momentum === "down" ? palette.glowDown : palette.glowFlat;
+  if (pulse) {
+    const t = now_ms % PULSE_INTERVAL / PULSE_DURATION;
+    if (t < 1) {
+      const radius = 6 + t * 10;
+      const pulseAlpha = 0.35 * (1 - t);
+      ctx.beginPath();
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+      ctx.strokeStyle = dotColor;
+      ctx.lineWidth = 1.5;
+      ctx.globalAlpha = baseAlpha * pulseAlpha;
+      ctx.stroke();
+    }
+  }
+  ctx.save();
+  ctx.globalAlpha = baseAlpha * 0.4;
+  ctx.shadowColor = glowColor;
+  ctx.shadowBlur = 12;
+  ctx.beginPath();
+  ctx.arc(x, y, 4, 0, Math.PI * 2);
+  ctx.fillStyle = glowColor;
+  ctx.fill();
+  ctx.restore();
+  ctx.globalAlpha = baseAlpha;
+  ctx.beginPath();
+  ctx.arc(x, y, 5, 0, Math.PI * 2);
+  ctx.fillStyle = dotColor;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(x, y, 2.5, 0, Math.PI * 2);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill();
+  ctx.globalAlpha = baseAlpha;
+}
+
+// src/draw/loading.ts
+var SWEEP_SPEED = 12e-4;
+var SWEEP_ARC_LEN = Math.PI * 0.4;
+var BREATH_SPEED = 2e-3;
+function loadingBreath(now_ms) {
+  return 0.3 + 0.15 * Math.sin(now_ms * BREATH_SPEED);
+}
+function drawLoading(ctx, layout, palette, now_ms) {
+  const totalAngle = layout.endAngle - layout.startAngle;
+  const breath = loadingBreath(now_ms);
+  ctx.save();
+  ctx.globalAlpha = breath * 0.5;
+  ctx.beginPath();
+  ctx.arc(layout.cx, layout.cy, layout.radius, layout.startAngle, layout.endAngle, false);
+  ctx.strokeStyle = palette.arcTrack;
+  ctx.lineWidth = layout.arcWidth;
+  ctx.lineCap = "round";
+  ctx.stroke();
+  ctx.restore();
+  const sweepT = now_ms * SWEEP_SPEED % 1;
+  const eased = sweepT < 0.5 ? 2 * sweepT * sweepT : 1 - Math.pow(-2 * sweepT + 2, 2) / 2;
+  const sweepCenter = layout.startAngle + eased * totalAngle;
+  const halfLen = SWEEP_ARC_LEN / 2;
+  const sweepStart = Math.max(layout.startAngle, sweepCenter - halfLen);
+  const sweepEnd = Math.min(layout.endAngle, sweepCenter + halfLen);
+  ctx.save();
+  ctx.globalAlpha = breath;
+  ctx.beginPath();
+  ctx.arc(layout.cx, layout.cy, layout.radius, sweepStart, sweepEnd, false);
+  ctx.strokeStyle = palette.accent;
+  ctx.lineWidth = layout.arcWidth;
+  ctx.lineCap = "round";
+  ctx.stroke();
+  ctx.restore();
+}
+
+// src/draw/particles.ts
+function createParticleState() {
+  return { particles: [], cooldown: 0, burstCount: 0 };
+}
+var MAX_PARTICLES = 80;
+var PARTICLE_LIFETIME = 1;
+var COOLDOWN_MS = 400;
+var MAGNITUDE_THRESHOLD = 0.08;
+var MAX_BURSTS = 3;
+function spawnOnSwing(state, momentum, dotX, dotY, swingMagnitude, accentColor, dt, options) {
+  state.cooldown = Math.max(0, state.cooldown - dt);
+  if (momentum === "flat") return 0;
+  if (state.cooldown > 0) return 0;
+  if (swingMagnitude < MAGNITUDE_THRESHOLD) {
+    state.burstCount = 0;
+    return 0;
+  }
+  if (momentum === "down" && options?.downMomentum !== true) return 0;
+  if (state.burstCount >= MAX_BURSTS) return 0;
+  state.cooldown = COOLDOWN_MS;
+  const scale = options?.scale ?? 1;
+  const isUp = momentum === "up";
+  const mag = Math.min(swingMagnitude * 5, 1);
+  const burstFalloff = mag > 0.6 ? 1 : [1, 0.6, 0.35][state.burstCount] ?? 0.35;
+  state.burstCount++;
+  const count = Math.round((12 + mag * 20) * scale * burstFalloff);
+  const speedMultiplier = 1 + mag * 0.8;
+  for (let i = 0; i < count && state.particles.length < MAX_PARTICLES; i++) {
+    const baseAngle = isUp ? -Math.PI / 2 : Math.PI / 2;
+    const spread = Math.PI * 1.2;
+    const angle = baseAngle + (Math.random() - 0.5) * spread;
+    const speed = (60 + Math.random() * 100) * speedMultiplier;
+    state.particles.push({
+      x: dotX + (Math.random() - 0.5) * 24,
+      y: dotY + (Math.random() - 0.5) * 8,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      life: 1,
+      size: (1 + Math.random() * 1.2) * scale * burstFalloff,
+      color: accentColor
+    });
+  }
+  return burstFalloff;
+}
+function drawParticles(ctx, state, dt) {
+  if (state.particles.length === 0) return;
+  const dtSec = dt / 1e3;
+  ctx.save();
+  let writeIdx = 0;
+  for (let i = 0; i < state.particles.length; i++) {
+    const p = state.particles[i];
+    p.life -= dtSec / PARTICLE_LIFETIME;
+    if (p.life <= 0) continue;
+    p.x += p.vx * dtSec;
+    p.y += p.vy * dtSec;
+    p.vx *= 0.95;
+    p.vy *= 0.95;
+    ctx.globalAlpha = p.life * 0.55;
+    ctx.fillStyle = p.color;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, p.size * (0.5 + p.life * 0.5), 0, Math.PI * 2);
+    ctx.fill();
+    state.particles[writeIdx++] = p;
+  }
+  state.particles.length = writeIdx;
+  ctx.restore();
+}
+
+// src/draw/index.ts
+var SHAKE_DECAY_RATE = 2e-3;
+var SHAKE_MIN_AMPLITUDE = 0.2;
+function createShakeState() {
+  return { amplitude: 0 };
+}
+function drawGaugeFrame(ctx, layout, palette, opts) {
+  const reveal = opts.chartReveal;
+  if (opts.loading && reveal < 0.01) {
+    drawLoading(ctx, layout, palette, opts.now_ms);
+    return;
+  }
+  const shake = opts.shakeState;
+  let shakeX = 0;
+  let shakeY = 0;
+  if (shake && shake.amplitude > SHAKE_MIN_AMPLITUDE) {
+    shakeX = (Math.random() - 0.5) * 2 * shake.amplitude;
+    shakeY = (Math.random() - 0.5) * 2 * shake.amplitude;
+    ctx.save();
+    ctx.translate(shakeX, shakeY);
+  }
+  if (shake) {
+    const decayRate = Math.pow(SHAKE_DECAY_RATE, opts.dt / 1e3);
+    shake.amplitude *= decayRate;
+    if (shake.amplitude < SHAKE_MIN_AMPLITUDE) shake.amplitude = 0;
+  }
+  const revealRamp = (start, end) => {
+    const t = Math.max(0, Math.min(1, (reveal - start) / (end - start)));
+    return t * t * (3 - 2 * t);
+  };
+  const trackAlpha = revealRamp(0, 0.4);
+  if (trackAlpha > 0.01) {
+    ctx.save();
+    ctx.globalAlpha = trackAlpha;
+    drawArcTrack(ctx, layout, palette);
+    ctx.restore();
+  }
+  if (opts.zones && opts.zones.length > 0 && trackAlpha > 0.01) {
+    ctx.save();
+    ctx.globalAlpha = trackAlpha * 0.6;
+    drawArcZones(ctx, layout, opts.zones, layout.arcWidth);
+    ctx.restore();
+  }
+  const fillAlpha = revealRamp(0.2, 0.7);
+  if (fillAlpha > 0.01) {
+    ctx.save();
+    ctx.globalAlpha = fillAlpha;
+    drawArcFill(ctx, layout, palette, opts.valueAngle);
+    ctx.restore();
+  }
+  if (opts.showTicks) {
+    const tickAlpha = revealRamp(0.15, 0.6);
+    if (tickAlpha > 0.01) {
+      ctx.save();
+      ctx.globalAlpha = tickAlpha;
+      drawTicks(
+        ctx,
+        layout,
+        palette,
+        opts.min,
+        opts.max,
+        opts.tickCount,
+        opts.showTickLabels,
+        opts.formatValue
+      );
+      ctx.restore();
+    }
+  }
+  {
+    const labelAlpha = revealRamp(0.15, 0.6);
+    if (labelAlpha > 0.01 && !opts.showTickLabels) {
+      ctx.save();
+      ctx.globalAlpha = labelAlpha;
+      drawMinMaxLabels(ctx, layout, palette, opts.min, opts.max, opts.formatValue);
+      ctx.restore();
+    }
+  }
+  const needleAlpha = revealRamp(0.3, 0.8);
+  if (needleAlpha > 0.01) {
+    ctx.save();
+    ctx.globalAlpha = needleAlpha;
+    if (opts.pointer === "circle") {
+      drawCirclePointer(
+        ctx,
+        layout,
+        palette,
+        opts.valueAngle,
+        opts.momentum,
+        opts.momentumGlowAlpha,
+        opts.showPulse,
+        opts.now_ms
+      );
+    } else {
+      drawNeedle(
+        ctx,
+        layout,
+        palette,
+        opts.valueAngle,
+        opts.momentum,
+        opts.momentumGlowAlpha,
+        opts.showDot
+      );
+    }
+    ctx.restore();
+  }
+  {
+    const tipLen = layout.radius - layout.arcWidth / 2 - 6;
+    const tipX = layout.cx + Math.cos(opts.valueAngle) * tipLen;
+    const tipY = layout.cy + Math.sin(opts.valueAngle) * tipLen;
+    if (opts.showDot && opts.pointer !== "circle") {
+      const dotAlpha = revealRamp(0.4, 0.9);
+      if (dotAlpha > 0.01) {
+        ctx.save();
+        ctx.globalAlpha = dotAlpha;
+        drawDot(ctx, tipX, tipY, palette, opts.momentum, opts.showPulse, opts.now_ms);
+        ctx.restore();
+      }
+    }
+    if (opts.particleState && reveal > 0.9) {
+      const burstIntensity = spawnOnSwing(
+        opts.particleState,
+        opts.momentum,
+        tipX,
+        tipY,
+        opts.swingMagnitude,
+        palette.accent,
+        opts.dt,
+        opts.particleOptions
+      );
+      if (burstIntensity > 0 && shake) {
+        shake.amplitude = (3 + opts.swingMagnitude * 4) * burstIntensity;
+      }
+      drawParticles(ctx, opts.particleState, opts.dt);
+    }
+  }
+  if (opts.loading && reveal < 1) {
+    ctx.save();
+    ctx.globalAlpha = 1 - reveal;
+    drawLoading(ctx, layout, palette, opts.now_ms);
+    ctx.restore();
+  }
+  if (shake && (shakeX !== 0 || shakeY !== 0)) {
+    ctx.restore();
+  }
+}
+
+// src/useGaugeEngine.ts
+var MAX_DELTA_MS = 50;
+var CHART_REVEAL_SPEED = 0.14;
+var CHART_REVEAL_SPEED_FWD = 0.09;
+var MOMENTUM_GLOW_SPEED = 0.08;
+var VALUE_HISTORY_SIZE = 30;
+var SWING_MAGNITUDE_SPEED = 0.06;
+function useGaugeEngine(canvasRef, containerRef, config) {
+  const configRef = (0, import_react.useRef)(config);
+  configRef.current = config;
+  const displayValueRef = (0, import_react.useRef)(config.value);
+  const displayMinRef = (0, import_react.useRef)(config.min);
+  const displayMaxRef = (0, import_react.useRef)(config.max);
+  const rangeInitedRef = (0, import_react.useRef)(false);
+  const sizeRef = (0, import_react.useRef)({ w: 0, h: 0 });
+  const layoutRef = (0, import_react.useRef)(null);
+  const ctxRef = (0, import_react.useRef)(null);
+  const rafRef = (0, import_react.useRef)(0);
+  const lastFrameRef = (0, import_react.useRef)(0);
+  const reducedMotionRef = (0, import_react.useRef)(false);
+  const chartRevealRef = (0, import_react.useRef)(0);
+  const particleStateRef = (0, import_react.useRef)(createParticleState());
+  const shakeStateRef = (0, import_react.useRef)(createShakeState());
+  const momentumGlowRef = (0, import_react.useRef)(0);
+  const swingMagnitudeRef = (0, import_react.useRef)(0);
+  const valueHistoryRef = (0, import_react.useRef)([]);
+  const lastMomentumRef = (0, import_react.useRef)("flat");
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      sizeRef.current = { w: width, h: height };
+    });
+    ro.observe(container);
+    const rect = container.getBoundingClientRect();
+    sizeRef.current = { w: rect.width, h: rect.height };
+    return () => ro.disconnect();
+  }, [containerRef]);
+  (0, import_react.useEffect)(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    reducedMotionRef.current = mql.matches;
+    const onChange = (e) => {
+      reducedMotionRef.current = e.matches;
+    };
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const onVisibility = () => {
+      if (!document.hidden && !rafRef.current) {
+        rafRef.current = requestAnimationFrame(draw);
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const draw = (0, import_react.useCallback)(() => {
+    if (document.hidden) {
+      rafRef.current = 0;
+      return;
+    }
+    const canvas = canvasRef.current;
+    const { w, h } = sizeRef.current;
+    if (!canvas || w === 0 || h === 0) {
+      rafRef.current = requestAnimationFrame(draw);
+      return;
+    }
+    const cfg = configRef.current;
+    const dpr = getDpr();
+    const now_ms = performance.now();
+    const dt = lastFrameRef.current ? Math.min(now_ms - lastFrameRef.current, MAX_DELTA_MS) : 16.67;
+    lastFrameRef.current = now_ms;
+    const targetW = Math.round(w * dpr);
+    const targetH = Math.round(h * dpr);
+    if (canvas.width !== targetW || canvas.height !== targetH) {
+      canvas.width = targetW;
+      canvas.height = targetH;
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+    }
+    let ctx = ctxRef.current;
+    if (!ctx || ctx.canvas !== canvas) {
+      ctx = canvas.getContext("2d");
+      ctxRef.current = ctx;
+    }
+    if (!ctx) {
+      rafRef.current = requestAnimationFrame(draw);
+      return;
+    }
+    applyDpr(ctx, dpr, w, h);
+    const noMotion = reducedMotionRef.current;
+    const speed = noMotion ? 1 : cfg.lerpSpeed;
+    const smoothValue = lerp(displayValueRef.current, cfg.value, speed, dt);
+    displayValueRef.current = smoothValue;
+    if (!rangeInitedRef.current) {
+      displayMinRef.current = cfg.min;
+      displayMaxRef.current = cfg.max;
+      rangeInitedRef.current = true;
+    } else {
+      displayMinRef.current = lerp(displayMinRef.current, cfg.min, 0.06, dt);
+      displayMaxRef.current = lerp(displayMaxRef.current, cfg.max, 0.06, dt);
+    }
+    const displayMin = displayMinRef.current;
+    const displayMax = displayMaxRef.current;
+    const range = displayMax - displayMin || 1;
+    const arcWidth = 12;
+    const paddingH = 20;
+    const hasValueDisplay = cfg.valueDisplayRef != null;
+    const paddingBottom = hasValueDisplay ? cfg.label ? 58 : 44 : 24;
+    const tickSpace = cfg.showTicks && cfg.showTickLabels ? 30 : cfg.showTicks ? 14 : 0;
+    const availableW = w - paddingH * 2 - tickSpace * 2;
+    const availableH = h - paddingBottom - tickSpace - 8;
+    const radius = Math.max(20, Math.min(availableW / 2, availableH) - arcWidth / 2);
+    const cx = w / 2;
+    const cy = h - paddingBottom;
+    const startAngle = cfg.startAngle;
+    const endAngle = cfg.endAngle;
+    const totalAngle = endAngle - startAngle;
+    const valueToAngle = (v) => {
+      const t = Math.max(0, Math.min(1, (v - displayMin) / range));
+      return startAngle + t * totalAngle;
+    };
+    const layout = {
+      w,
+      h,
+      cx,
+      cy,
+      radius,
+      arcWidth,
+      startAngle,
+      endAngle,
+      valueToAngle
+    };
+    layoutRef.current = layout;
+    const history = valueHistoryRef.current;
+    const lastEntry = history[history.length - 1];
+    if (!lastEntry || lastEntry.value !== cfg.value) {
+      history.push({ time: now_ms / 1e3, value: cfg.value });
+      if (history.length > VALUE_HISTORY_SIZE) {
+        history.splice(0, history.length - VALUE_HISTORY_SIZE);
+      }
+    }
+    let momentum = "flat";
+    if (cfg.showMomentum && history.length >= 5) {
+      if (cfg.momentumOverride) {
+        momentum = cfg.momentumOverride;
+      } else {
+        const points = history.map((h2) => ({ time: h2.time, value: h2.value }));
+        let min = Infinity, max = -Infinity;
+        for (const p of points) {
+          if (p.value < min) min = p.value;
+          if (p.value > max) max = p.value;
+        }
+        const pRange = max - min;
+        if (pRange > 0) {
+          const tailStart = Math.max(0, points.length - 5);
+          const first = points[tailStart].value;
+          const last = points[points.length - 1].value;
+          const delta = last - first;
+          const threshold = pRange * 0.12;
+          if (delta > threshold) momentum = "up";
+          else if (delta < -threshold) momentum = "down";
+        }
+      }
+    }
+    lastMomentumRef.current = momentum;
+    const targetSwing = momentum !== "flat" ? Math.min(1, Math.abs(cfg.value - (history[Math.max(0, history.length - 5)]?.value ?? cfg.value)) / (range * 0.1 || 1)) : 0;
+    swingMagnitudeRef.current = lerp(swingMagnitudeRef.current, targetSwing, SWING_MAGNITUDE_SPEED, dt);
+    const glowTarget = momentum !== "flat" ? 1 : 0;
+    momentumGlowRef.current = lerp(momentumGlowRef.current, glowTarget, MOMENTUM_GLOW_SPEED, dt);
+    const hasData = !cfg.loading;
+    const revealTarget = hasData ? 1 : 0;
+    const revealSpeed = noMotion ? 1 : revealTarget > chartRevealRef.current ? CHART_REVEAL_SPEED_FWD : CHART_REVEAL_SPEED;
+    chartRevealRef.current = lerp(chartRevealRef.current, revealTarget, revealSpeed, dt);
+    if (chartRevealRef.current > 0.999) chartRevealRef.current = 1;
+    if (chartRevealRef.current < 1e-3) chartRevealRef.current = 0;
+    const chartReveal = chartRevealRef.current;
+    const valueAngle = valueToAngle(smoothValue);
+    const tickCount = cfg.tickCount > 0 ? cfg.tickCount : autoTickCount(radius);
+    drawGaugeFrame(ctx, layout, cfg.palette, {
+      smoothValue,
+      valueAngle,
+      min: displayMin,
+      max: displayMax,
+      momentum,
+      momentumGlowAlpha: momentumGlowRef.current,
+      zones: cfg.zones,
+      showTicks: cfg.showTicks,
+      tickCount,
+      showTickLabels: cfg.showTickLabels,
+      showDot: cfg.showDot,
+      showPulse: cfg.showPulse,
+      pointer: cfg.pointer,
+      formatValue: cfg.formatValue,
+      dt,
+      now_ms,
+      chartReveal,
+      loading: cfg.loading,
+      particleState: cfg.degenOptions ? particleStateRef.current : void 0,
+      particleOptions: cfg.degenOptions,
+      swingMagnitude: swingMagnitudeRef.current,
+      shakeState: cfg.degenOptions ? shakeStateRef.current : void 0
+    });
+    const valEl = cfg.valueDisplayRef?.current;
+    if (valEl) {
+      const wrapper = valEl.parentElement;
+      if (cfg.loading) {
+        if (wrapper) wrapper.style.opacity = "0";
+      } else {
+        if (wrapper) wrapper.style.opacity = "1";
+        valEl.textContent = cfg.formatValue(smoothValue);
+        if (cfg.showMomentum) {
+          const mc = momentum === "up" ? "#22c55e" : momentum === "down" ? "#ef4444" : "";
+          if (mc) valEl.style.color = mc;
+          else valEl.style.removeProperty("color");
+        } else {
+          valEl.style.removeProperty("color");
+        }
+      }
+      if (wrapper) {
+        if (cfg.pointer === "circle") {
+          wrapper.style.bottom = `${paddingBottom - 5}px`;
+        } else {
+          wrapper.style.bottom = "4px";
+        }
+      }
+    }
+    rafRef.current = requestAnimationFrame(draw);
+  }, [canvasRef]);
+  (0, import_react.useEffect)(() => {
+    rafRef.current = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [draw]);
+  return layoutRef;
+}
+
+// src/useTooltip.ts
+var import_react2 = require("react");
+function useTooltip(config) {
+  const configRef = (0, import_react2.useRef)(config);
+  configRef.current = config;
+  const onMouseMove = (0, import_react2.useCallback)((e) => {
+    const cfg = configRef.current;
+    if (!cfg.enabled) return;
+    const canvas = cfg.canvasRef.current;
+    const tooltip = cfg.tooltipRef.current;
+    if (!canvas || !tooltip) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const val = cfg.posToValue(x, y);
+    if (val === null) {
+      tooltip.style.opacity = "0";
+      tooltip.style.pointerEvents = "none";
+      return;
+    }
+    tooltip.textContent = cfg.formatValue(val);
+    tooltip.style.opacity = "1";
+    const tw = tooltip.offsetWidth;
+    const th = tooltip.offsetHeight;
+    let tx = e.clientX - rect.left - tw / 2;
+    let ty = e.clientY - rect.top - th - 10;
+    if (tx < 2) tx = 2;
+    if (tx + tw > rect.width - 2) tx = rect.width - tw - 2;
+    if (ty < 2) ty = e.clientY - rect.top + 14;
+    tooltip.style.left = `${tx}px`;
+    tooltip.style.top = `${ty}px`;
+  }, []);
+  const onMouseLeave = (0, import_react2.useCallback)(() => {
+    const tooltip = configRef.current.tooltipRef.current;
+    if (tooltip) {
+      tooltip.style.opacity = "0";
+      tooltip.style.pointerEvents = "none";
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const canvas = config.canvasRef.current;
+    if (!canvas) return;
+    canvas.addEventListener("mousemove", onMouseMove);
+    canvas.addEventListener("mouseleave", onMouseLeave);
+    return () => {
+      canvas.removeEventListener("mousemove", onMouseMove);
+      canvas.removeEventListener("mouseleave", onMouseLeave);
+    };
+  }, [config.canvasRef, onMouseMove, onMouseLeave]);
+}
+
+// src/Gauge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultFormatValue = (v) => v.toFixed(0);
+function Gauge({
+  value,
+  min = 0,
+  max = 100,
+  theme = "dark",
+  color = "#3b82f6",
+  zones,
+  ticks = true,
+  tickLabels = false,
+  arcWidth,
+  showValue = true,
+  label,
+  momentum = true,
+  degen: degenProp,
+  loading = false,
+  lerpSpeed = 0.08,
+  pointer = "needle",
+  dot = false,
+  pulse = false,
+  tooltip = false,
+  formatValue = defaultFormatValue,
+  startAngle = Math.PI,
+  endAngle = Math.PI * 2,
+  className,
+  style
+}) {
+  const canvasRef = (0, import_react3.useRef)(null);
+  const containerRef = (0, import_react3.useRef)(null);
+  const valueDisplayRef = (0, import_react3.useRef)(null);
+  const tooltipRef = (0, import_react3.useRef)(null);
+  const palette = (0, import_react3.useMemo)(() => {
+    const p = resolveTheme(color, theme);
+    if (arcWidth != null) {
+    }
+    return p;
+  }, [color, theme, arcWidth]);
+  const isDark = theme === "dark";
+  const showMomentum = momentum !== false;
+  const momentumOverride = typeof momentum === "string" ? momentum : void 0;
+  const degenEnabled = degenProp != null && degenProp !== false;
+  const degenOptions = degenEnabled ? typeof degenProp === "object" ? degenProp : {} : void 0;
+  const tickCount = typeof ticks === "number" ? ticks : 0;
+  const showTicks = ticks !== false;
+  const safeValue = value != null && Number.isFinite(value) ? value : 0;
+  const layoutRef = useGaugeEngine(canvasRef, containerRef, {
+    value: safeValue,
+    min,
+    max,
+    palette,
+    lerpSpeed,
+    zones,
+    showTicks,
+    tickCount,
+    showTickLabels: tickLabels,
+    showDot: dot,
+    showPulse: pulse,
+    pointer,
+    showMomentum,
+    momentumOverride,
+    degenOptions,
+    loading,
+    formatValue,
+    valueDisplayRef: showValue ? valueDisplayRef : void 0,
+    startAngle,
+    endAngle,
+    label
+  });
+  const posToValue = (0, import_react3.useCallback)((cssX, cssY) => {
+    const lay = layoutRef.current;
+    if (!lay) return null;
+    const dx = cssX - lay.cx;
+    const dy = cssY - lay.cy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const halfArc = lay.arcWidth / 2;
+    if (dist < lay.radius - halfArc - 14 || dist > lay.radius + halfArc + 14) return null;
+    let angle = Math.atan2(dy, dx);
+    if (angle < 0) angle += Math.PI * 2;
+    const totalAngle = lay.endAngle - lay.startAngle;
+    let normStart = lay.startAngle % (Math.PI * 2);
+    if (normStart < 0) normStart += Math.PI * 2;
+    let rel = angle - normStart;
+    if (rel < -0.1) rel += Math.PI * 2;
+    if (rel < -0.05 || rel > totalAngle + 0.05) return null;
+    const t = Math.max(0, Math.min(1, rel / totalAngle));
+    return min + t * (max - min);
+  }, [layoutRef, min, max]);
+  useTooltip({
+    enabled: tooltip,
+    canvasRef,
+    tooltipRef,
+    theme,
+    formatValue,
+    posToValue
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: { display: "block", cursor: tooltip ? "crosshair" : void 0 }
+          }
+        ),
+        tooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              opacity: 0,
+              transition: "opacity 0.12s",
+              padding: "4px 8px",
+              borderRadius: 4,
+              fontSize: 11,
+              fontWeight: 600,
+              fontFamily: '"SF Mono", Menlo, monospace',
+              whiteSpace: "nowrap",
+              background: isDark ? "rgba(255,255,255,0.92)" : "rgba(0,0,0,0.85)",
+              color: isDark ? "#111" : "#fff",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.18)"
+            }
+          }
+        ),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 4,
+          pointerEvents: "none",
+          transition: "opacity 0.3s"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ref: valueDisplayRef,
+              style: {
+                fontSize: 28,
+                fontWeight: 600,
+                fontFamily: '"SF Mono", Menlo, monospace',
+                color: isDark ? "rgba(255,255,255,0.85)" : "#111",
+                transition: "color 0.3s",
+                letterSpacing: "-0.02em"
+              }
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+            fontSize: 11,
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.35)",
+            marginTop: 2
+          }, children: label })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Gauge
+});