automatick 0.0.1

package/dist/react/PerformanceOverlay.cjs

@@ -0,0 +1,341 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/PerformanceOverlay.tsx
+var PerformanceOverlay_exports = {};
+__export(PerformanceOverlay_exports, {
+  PerformanceOverlay: () => PerformanceOverlay
+});
+module.exports = __toCommonJS(PerformanceOverlay_exports);
+var import_react4 = __toESM(require("react"), 1);
+
+// src/react/hooks.ts
+var import_react2 = __toESM(require("react"), 1);
+
+// src/react/SimulationContext.tsx
+var import_react = __toESM(require("react"), 1);
+var SimulationContext = import_react.default.createContext(null);
+
+// src/react/hooks.ts
+function useSimulation() {
+  const ctx = import_react2.default.useContext(SimulationContext);
+  if (!ctx) {
+    throw new Error("useSimulation must be used within a <Simulation>");
+  }
+  return ctx;
+}
+
+// src/react/EngineContext.tsx
+var import_react3 = __toESM(require("react"), 1);
+var EngineContext = import_react3.default.createContext(
+  null
+);
+
+// src/react/PerformanceOverlay.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function formatTime(ms) {
+  if (ms < 1e-3) return "<1\xB5s";
+  if (ms < 1) return `${Math.round(ms * 1e3)}\xB5s`;
+  if (ms < 10) return `${ms.toFixed(1)}ms`;
+  return `${Math.round(ms)}ms`;
+}
+var CHART_WIDTH = 120;
+var CHART_HEIGHT = 60;
+function PerfChart({
+  entries
+}) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "canvas",
+      {
+        width: CHART_WIDTH,
+        height: CHART_HEIGHT,
+        style: { display: "block", width: CHART_WIDTH, height: CHART_HEIGHT }
+      }
+    );
+  }
+  let currentMax = 0;
+  for (const e of entries) {
+    const total = e.stepMs + (e.drawMs ?? 0);
+    if (total > currentMax) currentMax = total;
+  }
+  const max = Math.max(currentMax, 1e-3);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: -2,
+          right: 0,
+          fontSize: 10,
+          color: "#888"
+        },
+        children: formatTime(max)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "canvas",
+      {
+        width: CHART_WIDTH,
+        height: CHART_HEIGHT,
+        style: { display: "block", width: CHART_WIDTH, height: CHART_HEIGHT },
+        ref: (canvas) => {
+          if (!canvas) return;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.clearRect(0, 0, CHART_WIDTH, CHART_HEIGHT);
+          const n = entries.length;
+          const chartTop = 10;
+          const chartH = CHART_HEIGHT - chartTop;
+          function yPos(ms) {
+            return chartTop + chartH - ms / max * chartH;
+          }
+          const hasAnyDraw = entries.some((e) => e.drawMs !== void 0);
+          const stepGrad = ctx.createLinearGradient(0, 0, 0, CHART_HEIGHT);
+          stepGrad.addColorStop(0, "rgba(79, 195, 247, 0.25)");
+          stepGrad.addColorStop(1, "rgba(79, 195, 247, 0.05)");
+          ctx.fillStyle = stepGrad;
+          ctx.beginPath();
+          ctx.moveTo(0, CHART_HEIGHT);
+          for (let i = 0; i < n; i++) {
+            ctx.lineTo(
+              i / Math.max(n - 1, 1) * CHART_WIDTH,
+              yPos(entries[i].stepMs)
+            );
+          }
+          ctx.lineTo(CHART_WIDTH, CHART_HEIGHT);
+          ctx.closePath();
+          ctx.fill();
+          if (hasAnyDraw) {
+            const drawGrad = ctx.createLinearGradient(0, 0, 0, CHART_HEIGHT);
+            drawGrad.addColorStop(0, "rgba(129, 199, 132, 0.25)");
+            drawGrad.addColorStop(1, "rgba(129, 199, 132, 0.05)");
+            ctx.fillStyle = drawGrad;
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+              const e = entries[i];
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              ctx.lineTo(x, yPos(e.stepMs + (e.drawMs ?? 0)));
+            }
+            for (let i = n - 1; i >= 0; i--) {
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              ctx.lineTo(x, yPos(entries[i].stepMs));
+            }
+            ctx.closePath();
+            ctx.fill();
+          }
+          ctx.strokeStyle = "rgba(255,255,255,0.2)";
+          ctx.setLineDash([3, 3]);
+          ctx.beginPath();
+          ctx.moveTo(0, chartTop);
+          ctx.lineTo(CHART_WIDTH, chartTop);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          ctx.strokeStyle = "#4fc3f7";
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          for (let i = 0; i < n; i++) {
+            const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+            const y = yPos(entries[i].stepMs);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          ctx.stroke();
+          if (hasAnyDraw) {
+            ctx.strokeStyle = "#81c784";
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+              const e = entries[i];
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              const y = yPos(e.stepMs + (e.drawMs ?? 0));
+              if (i === 0) ctx.moveTo(x, y);
+              else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+          }
+        }
+      }
+    )
+  ] });
+}
+function PerformanceOverlay() {
+  const { tick } = useSimulation();
+  const engineCtx = import_react4.default.useContext(EngineContext);
+  const [view, setView] = import_react4.default.useState("compact");
+  const [perf, setPerf] = import_react4.default.useState([]);
+  import_react4.default.useEffect(() => {
+    if (engineCtx) {
+      setPerf(engineCtx.getPerformance());
+    }
+  }, [engineCtx, tick]);
+  const stepValues = perf.map((p) => p.stepMs);
+  const drawValues = perf.filter((p) => p.drawMs !== void 0).map((p) => p.drawMs);
+  const hasDrawData = drawValues.length > 0;
+  const avgStep = stepValues.length > 0 ? stepValues.reduce((a, b) => a + b, 0) / stepValues.length : 0;
+  const avgDraw = hasDrawData ? drawValues.reduce((a, b) => a + b, 0) / drawValues.length : 0;
+  const avgTotal = avgStep + avgDraw;
+  if (view === "hidden") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setView("compact"),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 12px",
+          background: "rgba(20, 20, 28, 0.92)",
+          border: "1px solid rgba(255,255,255,0.08)",
+          borderRadius: 20,
+          fontFamily: "monospace",
+          fontSize: 11,
+          color: "#ddd",
+          cursor: "pointer",
+          lineHeight: 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: "#81c784",
+                boxShadow: "0 0 4px #81c784"
+              }
+            }
+          ),
+          formatTime(avgTotal)
+        ]
+      }
+    );
+  }
+  const isExpanded = view === "expanded";
+  const headerBtn = {
+    background: "none",
+    border: "none",
+    color: "#888",
+    cursor: "pointer",
+    padding: "2px 4px",
+    fontSize: 10,
+    lineHeight: 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: 140,
+        padding: "8px 10px",
+        background: "rgba(20, 20, 28, 0.92)",
+        borderRadius: 8,
+        fontFamily: "monospace",
+        fontSize: 11,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.08)",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 8,
+              color: "#999"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                "avg / ",
+                stepValues.length,
+                "f"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", gap: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    style: headerBtn,
+                    onClick: () => setView(isExpanded ? "compact" : "expanded"),
+                    title: isExpanded ? "Collapse" : "Expand",
+                    children: isExpanded ? "\u25BC" : "\u25B6"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    style: headerBtn,
+                    onClick: () => setView("hidden"),
+                    title: "Hide",
+                    children: "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PerfChart, { entries: perf }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: hasDrawData ? "1fr 1fr 1fr" : "1fr 1fr"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#4fc3f7", marginBottom: 4 }, children: "step" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#ddd" }, children: formatTime(avgStep) })
+              ] }),
+              hasDrawData && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#81c784", marginBottom: 4 }, children: "draw" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#ddd" }, children: formatTime(avgDraw) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#999", marginBottom: 4 }, children: "total" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#ddd" }, children: formatTime(avgTotal) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PerformanceOverlay
+});

package/dist/react/PerformanceOverlay.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Performance overlay with three states: hidden (pill), compact (numbers),
+ * expanded (chart + numbers). Place inside a `<Simulation>`.
+ */
+declare function PerformanceOverlay(): react_jsx_runtime.JSX.Element;
+
+export { PerformanceOverlay };

package/dist/react/PerformanceOverlay.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Performance overlay with three states: hidden (pill), compact (numbers),
+ * expanded (chart + numbers). Place inside a `<Simulation>`.
+ */
+declare function PerformanceOverlay(): react_jsx_runtime.JSX.Element;
+
+export { PerformanceOverlay };

package/dist/react/PerformanceOverlay.js

@@ -0,0 +1,290 @@
+import {
+  EngineContext
+} from "../chunk-OA6FGXTP.js";
+import {
+  useSimulation
+} from "../chunk-AIKB2FNR.js";
+import "../chunk-66FUVAAG.js";
+
+// src/react/PerformanceOverlay.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatTime(ms) {
+  if (ms < 1e-3) return "<1\xB5s";
+  if (ms < 1) return `${Math.round(ms * 1e3)}\xB5s`;
+  if (ms < 10) return `${ms.toFixed(1)}ms`;
+  return `${Math.round(ms)}ms`;
+}
+var CHART_WIDTH = 120;
+var CHART_HEIGHT = 60;
+function PerfChart({
+  entries
+}) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        width: CHART_WIDTH,
+        height: CHART_HEIGHT,
+        style: { display: "block", width: CHART_WIDTH, height: CHART_HEIGHT }
+      }
+    );
+  }
+  let currentMax = 0;
+  for (const e of entries) {
+    const total = e.stepMs + (e.drawMs ?? 0);
+    if (total > currentMax) currentMax = total;
+  }
+  const max = Math.max(currentMax, 1e-3);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: -2,
+          right: 0,
+          fontSize: 10,
+          color: "#888"
+        },
+        children: formatTime(max)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        width: CHART_WIDTH,
+        height: CHART_HEIGHT,
+        style: { display: "block", width: CHART_WIDTH, height: CHART_HEIGHT },
+        ref: (canvas) => {
+          if (!canvas) return;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.clearRect(0, 0, CHART_WIDTH, CHART_HEIGHT);
+          const n = entries.length;
+          const chartTop = 10;
+          const chartH = CHART_HEIGHT - chartTop;
+          function yPos(ms) {
+            return chartTop + chartH - ms / max * chartH;
+          }
+          const hasAnyDraw = entries.some((e) => e.drawMs !== void 0);
+          const stepGrad = ctx.createLinearGradient(0, 0, 0, CHART_HEIGHT);
+          stepGrad.addColorStop(0, "rgba(79, 195, 247, 0.25)");
+          stepGrad.addColorStop(1, "rgba(79, 195, 247, 0.05)");
+          ctx.fillStyle = stepGrad;
+          ctx.beginPath();
+          ctx.moveTo(0, CHART_HEIGHT);
+          for (let i = 0; i < n; i++) {
+            ctx.lineTo(
+              i / Math.max(n - 1, 1) * CHART_WIDTH,
+              yPos(entries[i].stepMs)
+            );
+          }
+          ctx.lineTo(CHART_WIDTH, CHART_HEIGHT);
+          ctx.closePath();
+          ctx.fill();
+          if (hasAnyDraw) {
+            const drawGrad = ctx.createLinearGradient(0, 0, 0, CHART_HEIGHT);
+            drawGrad.addColorStop(0, "rgba(129, 199, 132, 0.25)");
+            drawGrad.addColorStop(1, "rgba(129, 199, 132, 0.05)");
+            ctx.fillStyle = drawGrad;
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+              const e = entries[i];
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              ctx.lineTo(x, yPos(e.stepMs + (e.drawMs ?? 0)));
+            }
+            for (let i = n - 1; i >= 0; i--) {
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              ctx.lineTo(x, yPos(entries[i].stepMs));
+            }
+            ctx.closePath();
+            ctx.fill();
+          }
+          ctx.strokeStyle = "rgba(255,255,255,0.2)";
+          ctx.setLineDash([3, 3]);
+          ctx.beginPath();
+          ctx.moveTo(0, chartTop);
+          ctx.lineTo(CHART_WIDTH, chartTop);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          ctx.strokeStyle = "#4fc3f7";
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          for (let i = 0; i < n; i++) {
+            const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+            const y = yPos(entries[i].stepMs);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          ctx.stroke();
+          if (hasAnyDraw) {
+            ctx.strokeStyle = "#81c784";
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+              const e = entries[i];
+              const x = i / Math.max(n - 1, 1) * CHART_WIDTH;
+              const y = yPos(e.stepMs + (e.drawMs ?? 0));
+              if (i === 0) ctx.moveTo(x, y);
+              else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+          }
+        }
+      }
+    )
+  ] });
+}
+function PerformanceOverlay() {
+  const { tick } = useSimulation();
+  const engineCtx = React.useContext(EngineContext);
+  const [view, setView] = React.useState("compact");
+  const [perf, setPerf] = React.useState([]);
+  React.useEffect(() => {
+    if (engineCtx) {
+      setPerf(engineCtx.getPerformance());
+    }
+  }, [engineCtx, tick]);
+  const stepValues = perf.map((p) => p.stepMs);
+  const drawValues = perf.filter((p) => p.drawMs !== void 0).map((p) => p.drawMs);
+  const hasDrawData = drawValues.length > 0;
+  const avgStep = stepValues.length > 0 ? stepValues.reduce((a, b) => a + b, 0) / stepValues.length : 0;
+  const avgDraw = hasDrawData ? drawValues.reduce((a, b) => a + b, 0) / drawValues.length : 0;
+  const avgTotal = avgStep + avgDraw;
+  if (view === "hidden") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setView("compact"),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 12px",
+          background: "rgba(20, 20, 28, 0.92)",
+          border: "1px solid rgba(255,255,255,0.08)",
+          borderRadius: 20,
+          fontFamily: "monospace",
+          fontSize: 11,
+          color: "#ddd",
+          cursor: "pointer",
+          lineHeight: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: "#81c784",
+                boxShadow: "0 0 4px #81c784"
+              }
+            }
+          ),
+          formatTime(avgTotal)
+        ]
+      }
+    );
+  }
+  const isExpanded = view === "expanded";
+  const headerBtn = {
+    background: "none",
+    border: "none",
+    color: "#888",
+    cursor: "pointer",
+    padding: "2px 4px",
+    fontSize: 10,
+    lineHeight: 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: 140,
+        padding: "8px 10px",
+        background: "rgba(20, 20, 28, 0.92)",
+        borderRadius: 8,
+        fontFamily: "monospace",
+        fontSize: 11,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.08)",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 8,
+              color: "#999"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "avg / ",
+                stepValues.length,
+                "f"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    style: headerBtn,
+                    onClick: () => setView(isExpanded ? "compact" : "expanded"),
+                    title: isExpanded ? "Collapse" : "Expand",
+                    children: isExpanded ? "\u25BC" : "\u25B6"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    style: headerBtn,
+                    onClick: () => setView("hidden"),
+                    title: "Hide",
+                    children: "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(PerfChart, { entries: perf }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: hasDrawData ? "1fr 1fr 1fr" : "1fr 1fr"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: { color: "#4fc3f7", marginBottom: 4 }, children: "step" }),
+                /* @__PURE__ */ jsx("div", { style: { color: "#ddd" }, children: formatTime(avgStep) })
+              ] }),
+              hasDrawData && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: { color: "#81c784", marginBottom: 4 }, children: "draw" }),
+                /* @__PURE__ */ jsx("div", { style: { color: "#ddd" }, children: formatTime(avgDraw) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: { color: "#999", marginBottom: 4 }, children: "total" }),
+                /* @__PURE__ */ jsx("div", { style: { color: "#ddd" }, children: formatTime(avgTotal) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PerformanceOverlay
+};