@bitcobblers/wod-wiki-lang 0.1.0

package/dist/react.cjs

@@ -0,0 +1,842 @@
+'use strict';
+
+var react = require('react');
+var wodWikiCore = require('@bitcobblers/wod-wiki-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/hooks/useRuntimeExecution.ts
+
+// src/runtime/INowProvider.ts
+var wallClockNow = {
+  now: () => /* @__PURE__ */ new Date(),
+  nowMs: () => Date.now()
+};
+
+// src/runtime/events/TickEvent.ts
+var TickEvent = class _TickEvent {
+  constructor(data, now = wallClockNow) {
+    this.now = now;
+    const nowMs = this.now.nowMs();
+    _TickEvent._counter++;
+    this.timestamp = new Date(nowMs + _TickEvent._counter);
+    this.data = data;
+  }
+  now;
+  name = "tick";
+  timestamp;
+  data;
+  static _counter = 0;
+};
+
+// src/react/hooks/useRuntimeExecution.ts
+var EXECUTION_TICK_RATE_MS = 20;
+var useRuntimeExecution = (runtime) => {
+  const [status, setStatus] = react.useState("idle");
+  const [elapsedTime, setElapsedTime] = react.useState(0);
+  const [stepCount, setStepCount] = react.useState(0);
+  const [startTime, setStartTime] = react.useState(null);
+  const intervalRef = react.useRef(null);
+  const startTimeRef = react.useRef(null);
+  const executeStep = react.useCallback(() => {
+    if (!runtime) return;
+    try {
+      const tickEvent = new TickEvent(void 0, runtime.nowProvider);
+      runtime.handle(tickEvent);
+      setStepCount((prev) => prev + 1);
+    } catch (error) {
+      stop();
+      setStatus("error");
+      console.error("Runtime execution error:", error);
+    }
+  }, [runtime]);
+  react.useEffect(() => {
+    if (!runtime) return;
+    const unsubscribe = runtime.subscribeToStack((snapshot) => {
+      if (snapshot.blocks.length === 0 && (status === "running" || status === "paused")) {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+        setStatus("completed");
+      }
+    });
+    return unsubscribe;
+  }, [runtime, status]);
+  const start = react.useCallback(() => {
+    if (!runtime) {
+      console.warn("Cannot start execution: runtime is null");
+      return;
+    }
+    if (status === "running") {
+      console.warn("Cannot start execution: already running");
+      return;
+    }
+    if (status === "paused") {
+      runtime.handle({
+        name: "timer:resume",
+        timestamp: /* @__PURE__ */ new Date(),
+        data: {}
+      });
+    }
+    setStatus("running");
+    const now = runtime?.nowProvider?.nowMs() ?? wallClockNow.nowMs();
+    startTimeRef.current = now - elapsedTime;
+    if (elapsedTime === 0) {
+      setStartTime(now);
+    }
+    intervalRef.current = setInterval(executeStep, EXECUTION_TICK_RATE_MS);
+  }, [runtime, status, elapsedTime, executeStep]);
+  const pause = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (runtime) {
+      runtime.handle({
+        name: "timer:pause",
+        timestamp: /* @__PURE__ */ new Date(),
+        data: {}
+      });
+    }
+    setStatus("paused");
+  }, [runtime]);
+  const stop = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setStatus("idle");
+  }, []);
+  const reset = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setElapsedTime(0);
+    setStepCount(0);
+    setStatus("idle");
+    setStartTime(null);
+    startTimeRef.current = null;
+  }, [runtime]);
+  const step = react.useCallback(() => {
+    if (!runtime) {
+      console.warn("Cannot step: runtime is null");
+      return;
+    }
+    if (status === "running") {
+      console.warn("Cannot step while running");
+      return;
+    }
+    setStatus("paused");
+    executeStep();
+  }, [runtime, status, executeStep]);
+  react.useEffect(() => {
+    if (status !== "running" || !startTimeRef.current) return;
+    const updateInterval = setInterval(() => {
+      setElapsedTime((runtime?.nowProvider?.nowMs() ?? wallClockNow.nowMs()) - startTimeRef.current);
+    }, 100);
+    return () => clearInterval(updateInterval);
+  }, [status]);
+  react.useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    reset();
+  }, [runtime, reset]);
+  return react.useMemo(() => ({
+    status,
+    elapsedTime,
+    stepCount,
+    startTime,
+    start,
+    pause,
+    stop,
+    reset,
+    step
+  }), [status, elapsedTime, stepCount, startTime, start, pause, stop, reset, step]);
+};
+
+// src/utils/formatTime.ts
+var formatTimeMMSS = (ms) => {
+  if (ms === void 0 || ms === null || !Number.isFinite(ms)) {
+    return "--:--";
+  }
+  const isNegative = ms < 0;
+  const absMs = Math.abs(ms);
+  const totalSeconds = Math.floor(absMs / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const sign = isNegative ? "-" : "";
+  return `${sign}${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+var formatTimeHHMMSS = (ms) => {
+  if (ms === void 0 || ms === null || !Number.isFinite(ms)) {
+    return "--:--:--";
+  }
+  const isNegative = ms < 0;
+  const absMs = Math.abs(ms);
+  const totalSeconds = Math.floor(absMs / 1e3);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const sign = isNegative ? "-" : "";
+  return `${sign}${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+var formatDurationSmart = (ms) => {
+  if (ms === void 0 || ms === null || !Number.isFinite(ms)) {
+    return "--:--";
+  }
+  const absMs = Math.abs(ms);
+  const totalSeconds = Math.floor(absMs / 1e3);
+  if (totalSeconds >= 3600) {
+    return formatTimeHHMMSS(ms);
+  }
+  return formatTimeMMSS(ms);
+};
+
+// src/utils/timeUtils.ts
+var calculateDuration = (spans, now) => {
+  if (!spans || !Array.isArray(spans)) return 0;
+  return spans.reduce((total, span) => {
+    if ("started" in span) {
+      const start2 = span.started;
+      const end = span.ended ?? now;
+      return total + Math.max(0, end - start2);
+    }
+    const start = span.start instanceof Date ? span.start.getTime() : span.start || 0;
+    const stop = span.stop ? span.stop instanceof Date ? span.stop.getTime() : span.stop : now;
+    return total + Math.max(0, stop - start);
+  }, 0);
+};
+
+// src/react/hooks/useBlockMemory.ts
+function useBlockMemory(block, type) {
+  const tag = type;
+  const getVal = () => {
+    const loc = block?.getMemoryByTag(tag)[0];
+    if (!loc) return void 0;
+    if (tag === "round") return loc.metrics[0];
+    return loc.metrics[0]?.value;
+  };
+  const [value, setValue] = react.useState(getVal);
+  react.useEffect(() => {
+    if (!block) {
+      setValue(void 0);
+      return;
+    }
+    setValue(getVal());
+    const loc = block.getMemoryByTag(tag)[0];
+    if (loc) {
+      const unsubscribe = loc.subscribe((newFrags) => {
+        if (tag === "round") {
+          setValue(newFrags[0]);
+        } else {
+          setValue(newFrags[0]?.value);
+        }
+      });
+      return unsubscribe;
+    }
+    return void 0;
+  }, [block, type]);
+  return value;
+}
+function useTimerState(block) {
+  return useBlockMemory(block, "time");
+}
+function useRoundState(block) {
+  return useBlockMemory(block, "round");
+}
+function useDisplayState(block) {
+  return useBlockMemory(block, "display");
+}
+function useTimerDisplay(block) {
+  const timer = useTimerState(block);
+  const getNow = () => {
+    if (typeof window.__chromecast_senderClockTimeMs === "function") {
+      return window.__chromecast_senderClockTimeMs();
+    }
+    return Date.now();
+  };
+  const [now, setNow] = react.useState(getNow());
+  const isRunning = react.useMemo(() => {
+    if (!timer || timer.spans.length === 0) return false;
+    const lastSpan = timer.spans[timer.spans.length - 1];
+    return lastSpan.ended === void 0;
+  }, [timer]);
+  react.useEffect(() => {
+    if (!isRunning) return;
+    let animationFrameId;
+    let running = true;
+    const tick = () => {
+      if (running) {
+        setNow(getNow());
+        animationFrameId = requestAnimationFrame(tick);
+      }
+    };
+    animationFrameId = requestAnimationFrame(tick);
+    return () => {
+      running = false;
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [isRunning]);
+  return react.useMemo(() => {
+    if (!timer) return null;
+    const elapsed = calculateDuration(timer.spans, now);
+    const remaining = timer.durationMs !== void 0 ? Math.max(0, timer.durationMs - elapsed) : void 0;
+    const isComplete = timer.durationMs !== void 0 && elapsed >= timer.durationMs;
+    const displayMs = timer.direction === "down" && remaining !== void 0 ? remaining : elapsed;
+    return {
+      elapsed,
+      remaining,
+      isRunning,
+      direction: timer.direction,
+      isComplete,
+      formatted: formatDurationSmart(displayMs)
+    };
+  }, [timer, now, isRunning]);
+}
+function useRoundDisplay(block) {
+  const round = useRoundState(block);
+  const display = useDisplayState(block);
+  return react.useMemo(() => {
+    if (!round) return null;
+    const label = display?.roundDisplay ?? (round.total !== void 0 ? `Round ${round.current} of ${round.total}` : `Round ${round.current}`);
+    const progress = round.total !== void 0 ? Math.min(1, (round.current - 1) / round.total) : void 0;
+    return {
+      current: round.current,
+      total: round.total,
+      label,
+      progress
+    };
+  }, [round, display?.roundDisplay]);
+}
+function useFragmentSource(block) {
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    if (!block) return;
+    const loc = block.getMemoryByTag("metric:display")[0];
+    if (!loc) return;
+    return loc.subscribe(() => setVersion((v) => v + 1));
+  }, [block]);
+  return react.useMemo(() => {
+    if (!block) return void 0;
+    const locs = block.getMemoryByTag("metric:display");
+    if (locs.length === 0) return void 0;
+    const allFragments = wodWikiCore.MetricContainer.empty(block.key.toString());
+    for (const loc of locs) allFragments.merge(loc.metrics);
+    return allFragments;
+  }, [block, version]);
+}
+var ScriptRuntimeContext = react.createContext(void 0);
+var ScriptRuntimeProvider = ({
+  runtime,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ScriptRuntimeContext.Provider, { value: runtime, children });
+};
+function useScriptRuntime() {
+  const runtime = react.useContext(ScriptRuntimeContext);
+  if (!runtime) {
+    throw new Error("useScriptRuntime must be used within ScriptRuntimeProvider");
+  }
+  return runtime;
+}
+
+// src/react/hooks/useOutputStatements.ts
+function useOutputStatements(runtime) {
+  const contextRuntime = useScriptRuntime();
+  const resolvedRuntime = runtime !== void 0 ? runtime : contextRuntime;
+  const [outputs, setOutputs] = react.useState(() => {
+    return resolvedRuntime?.getOutputStatements?.() ?? [];
+  });
+  react.useEffect(() => {
+    if (!resolvedRuntime) {
+      setOutputs([]);
+      return;
+    }
+    setOutputs(resolvedRuntime.getOutputStatements());
+    const unsubscribe = resolvedRuntime.subscribeToOutput?.(() => {
+      setOutputs(resolvedRuntime.getOutputStatements());
+    });
+    return unsubscribe;
+  }, [resolvedRuntime]);
+  const data = react.useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    const byBlockKey = /* @__PURE__ */ new Map();
+    const segments = [];
+    const metrics = [];
+    for (const output of outputs) {
+      byId.set(output.id, output);
+      const blockOutputs = byBlockKey.get(output.sourceBlockKey) ?? [];
+      blockOutputs.push(output);
+      byBlockKey.set(output.sourceBlockKey, blockOutputs);
+      switch (output.outputType) {
+        case "segment":
+          segments.push(output);
+          break;
+        case "metric":
+          metrics.push(output);
+          break;
+      }
+    }
+    const completions = segments.filter((s) => s.completionReason !== void 0);
+    return { outputs, byId, byBlockKey, segments, completions, metrics };
+  }, [outputs]);
+  return data;
+}
+function useLiveAnalytics(runtime) {
+  const contextRuntime = useScriptRuntime();
+  const resolvedRuntime = runtime !== void 0 ? runtime : contextRuntime;
+  const [analytics, setAnalytics] = react.useState(
+    () => resolvedRuntime?.getLiveAnalytics?.() ?? []
+  );
+  react.useEffect(() => {
+    if (!resolvedRuntime) {
+      setAnalytics([]);
+      return;
+    }
+    setAnalytics(resolvedRuntime.getLiveAnalytics?.() ?? []);
+    const unsubscribe = resolvedRuntime.subscribeToOutput?.(() => {
+      setAnalytics(resolvedRuntime.getLiveAnalytics?.() ?? []);
+    });
+    return unsubscribe;
+  }, [resolvedRuntime]);
+  return analytics;
+}
+function useOutputStatement(runtime, id) {
+  const { byId } = useOutputStatements(runtime);
+  if (id === null) return void 0;
+  return byId.get(id);
+}
+function useBlockOutputs(runtime, blockKey) {
+  const { byBlockKey } = useOutputStatements(runtime);
+  if (!blockKey) return [];
+  return byBlockKey.get(blockKey) ?? [];
+}
+function useOutputHierarchy(runtime) {
+  const { outputs } = useOutputStatements(runtime);
+  return react.useMemo(() => {
+    const depthMap = /* @__PURE__ */ new Map();
+    for (const output of outputs) {
+      depthMap.set(output.id, output.stackLevel);
+    }
+    return depthMap;
+  }, [outputs]);
+}
+function useMemorySubscription(memoryRef) {
+  const [value, setValue] = react.useState(memoryRef?.get());
+  react.useEffect(() => {
+    if (!memoryRef) {
+      setValue(void 0);
+      return;
+    }
+    setValue(memoryRef.get());
+    const unsubscribe = memoryRef.subscribe((newValue) => {
+      setValue(newValue);
+    });
+    return unsubscribe;
+  }, [memoryRef]);
+  return value;
+}
+function useStackSnapshot() {
+  const runtime = useScriptRuntime();
+  const [snapshot, setSnapshot] = react.useState({
+    type: "initial",
+    blocks: runtime.stack.blocks,
+    depth: runtime.stack.count,
+    clockTime: runtime.clock.currentDate
+  });
+  react.useEffect(() => {
+    const unsubscribe = runtime.subscribeToStack((s) => {
+      setSnapshot(s);
+    });
+    return unsubscribe;
+  }, [runtime]);
+  return snapshot;
+}
+function useSnapshotBlocks() {
+  const snapshot = useStackSnapshot();
+  return snapshot.blocks;
+}
+function useSnapshotCurrentBlock() {
+  const snapshot = useStackSnapshot();
+  return snapshot.blocks.length > 0 ? snapshot.blocks[snapshot.blocks.length - 1] : void 0;
+}
+function useNextPreview() {
+  const blocks = useSnapshotBlocks();
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const block of blocks) {
+      const nextLocs = block.getMemoryByTag("metric:next");
+      for (const loc of nextLocs) {
+        const unsub = loc.subscribe(() => {
+          setVersion((v) => v + 1);
+        });
+        unsubscribes.push(unsub);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [blocks]);
+  return react.useMemo(() => {
+    for (const block of blocks) {
+      const nextLocs = block.getMemoryByTag("metric:next");
+      if (nextLocs.length === 0) continue;
+      const metrics = wodWikiCore.MetricContainer.empty(block.key.toString());
+      for (const loc of nextLocs) metrics.merge(loc.metrics);
+      if (metrics.length > 0) {
+        return { metrics, block };
+      }
+    }
+    return null;
+  }, [blocks, version]);
+}
+function useStackTimers() {
+  const blocks = useSnapshotBlocks();
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const block of blocks) {
+      const timerLoc = block.getMemoryByTag("time")[0];
+      if (timerLoc) {
+        const unsub = timerLoc.subscribe(() => {
+          setVersion((v) => v + 1);
+        });
+        unsubscribes.push(unsub);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [blocks]);
+  return react.useMemo(() => {
+    const entries = [];
+    for (const block of blocks) {
+      const timerLoc = block.getMemoryByTag("time")[0];
+      if (!timerLoc) continue;
+      const timer = timerLoc.metrics[0]?.value;
+      if (!timer) continue;
+      entries.push({
+        block,
+        timer,
+        isPinned: timer.role === "primary"
+      });
+    }
+    return entries;
+  }, [blocks, version]);
+}
+function usePrimaryTimer() {
+  const timers = useStackTimers();
+  return react.useMemo(() => {
+    if (timers.length === 0) return void 0;
+    const leaf = timers[0];
+    if (leaf.block.blockType === "Rest") return leaf;
+    const pinned = [...timers].reverse().find((t) => t.isPinned);
+    if (pinned) return pinned;
+    return leaf;
+  }, [timers]);
+}
+function useSecondaryTimers() {
+  const timers = useStackTimers();
+  const primary = usePrimaryTimer();
+  return react.useMemo(() => {
+    if (!primary) return [];
+    return timers.filter((t) => t.block !== primary.block);
+  }, [timers, primary]);
+}
+function useActiveControls() {
+  const blocks = useSnapshotBlocks();
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const block of blocks) {
+      const controlsLocs = block.getMemoryByTag("controls");
+      for (const loc of controlsLocs) {
+        const unsub = loc.subscribe(() => {
+          setVersion((v) => v + 1);
+        });
+        unsubscribes.push(unsub);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [blocks]);
+  return react.useMemo(() => {
+    const pinned = [];
+    const topButtons = [];
+    for (let i = 0; i < blocks.length; i++) {
+      const controlsLocs = blocks[i].getMemoryByTag("controls");
+      if (controlsLocs.length === 0) continue;
+      const buttons = controlsLocs[0].metrics.map((f) => f.value).filter(Boolean);
+      const isTop = i === blocks.length - 1;
+      for (const btn of buttons) {
+        if (btn.isPinned) {
+          pinned.push(btn);
+        } else if (isTop) {
+          topButtons.push(btn);
+        }
+      }
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const btn of pinned) {
+      if (!seen.has(btn.id)) {
+        seen.add(btn.id);
+        result.push(btn);
+      }
+    }
+    for (const btn of topButtons) {
+      if (!seen.has(btn.id)) {
+        seen.add(btn.id);
+        result.push(btn);
+      }
+    }
+    return result;
+  }, [blocks, version]);
+}
+function useStackFragmentSources() {
+  const blocks = useSnapshotBlocks();
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const block of blocks) {
+      const displayLocs = block.getMemoryByTag("metric:display");
+      for (const loc of displayLocs) {
+        const unsub = loc.subscribe(() => {
+          setVersion((v) => v + 1);
+        });
+        unsubscribes.push(unsub);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [blocks]);
+  return react.useMemo(() => {
+    if (blocks.length === 0) return void 0;
+    const entries = [];
+    const orderedBlocks = [...blocks].reverse();
+    orderedBlocks.forEach((block, index) => {
+      if (block.blockType === "Root" && !block.label) return;
+      const displayLocs = block.getMemoryByTag("metric:display");
+      let source;
+      if (displayLocs.length === 0) {
+        if (!block.label) return;
+        source = wodWikiCore.MetricContainer.empty(block.key.toString());
+      } else {
+        const mergedMetrics = wodWikiCore.MetricContainer.empty(block.key.toString());
+        for (const loc of displayLocs) mergedMetrics.merge(loc.metrics);
+        source = mergedMetrics;
+      }
+      const isLeaf = index === orderedBlocks.length - 1;
+      const metricGroups = displayLocs.length > 1 ? displayLocs.map((loc) => loc.metrics) : void 0;
+      entries.push({
+        source,
+        block,
+        depth: index,
+        isLeaf,
+        label: block.label,
+        metricGroups
+      });
+    });
+    return entries.length > 0 ? entries : void 0;
+  }, [blocks, version]);
+}
+function useStackDisplayRows() {
+  const blocks = useSnapshotBlocks();
+  const [version, setVersion] = react.useState(0);
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const block of blocks) {
+      const displayLocs = block.getMemoryByTag("metric:display");
+      for (const loc of displayLocs) {
+        const unsub = loc.subscribe(() => {
+          setVersion((v) => v + 1);
+        });
+        unsubscribes.push(unsub);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [blocks]);
+  return react.useMemo(() => {
+    if (blocks.length === 0) return void 0;
+    const entries = [];
+    const orderedBlocks = [...blocks].reverse();
+    orderedBlocks.forEach((block, index) => {
+      if (block.blockType === "Root" && !block.label) return;
+      const displayLocs = block.getMemoryByTag("metric:display");
+      const displayRows = displayLocs.map((loc) => loc.metrics);
+      if (displayRows.length === 0 && !block.label) return;
+      const isLeaf = index === orderedBlocks.length - 1;
+      const metricGroups = displayLocs.length > 1 ? displayLocs.map((loc) => loc.metrics) : void 0;
+      entries.push({
+        block,
+        displayRows,
+        label: block.label,
+        depth: index,
+        isLeaf,
+        metricGroups
+      });
+    });
+    return entries.length > 0 ? entries : void 0;
+  }, [blocks, version]);
+}
+
+// src/runtime/browserRuntimeNow.ts
+function getRuntimeNowMs() {
+  if (typeof window !== "undefined") {
+    const senderClock = window.__chromecast_senderClockTimeMs;
+    if (typeof senderClock === "function") {
+      try {
+        const value = senderClock();
+        if (Number.isFinite(value)) {
+          return value;
+        }
+      } catch {
+      }
+    }
+  }
+  return Date.now();
+}
+function createBrowserRuntimeNow() {
+  return {
+    now: () => new Date(getRuntimeNowMs()),
+    nowMs: () => getRuntimeNowMs()
+  };
+}
+
+// src/react/hooks/useTimerElapsed.ts
+function useTimerElapsed(blockKey) {
+  const runtime = useScriptRuntime();
+  const block = react.useMemo(() => {
+    return runtime.stack.blocks.find((b) => b.key.toString() === blockKey);
+  }, [runtime, blockKey]);
+  const [timerState, setTimerState] = react.useState(() => {
+    return block?.getMemoryByTag("time")[0]?.metrics[0]?.value;
+  });
+  react.useEffect(() => {
+    const unsubscribe = runtime.stack.subscribe(() => {
+      const foundBlock = runtime.stack.blocks.find((b) => b.key.toString() === blockKey);
+      if (foundBlock) {
+        const timerLoc = foundBlock.getMemoryByTag("time")[0];
+        setTimerState(timerLoc?.metrics[0]?.value);
+      } else {
+        setTimerState(void 0);
+      }
+    });
+    return unsubscribe;
+  }, [runtime, blockKey]);
+  react.useEffect(() => {
+    if (!block) {
+      setTimerState(void 0);
+      return;
+    }
+    const timerLoc = block.getMemoryByTag("time")[0];
+    setTimerState(timerLoc?.metrics[0]?.value);
+    if (timerLoc) {
+      const unsubscribe = timerLoc.subscribe((newFrags) => {
+        setTimerState(newFrags[0]?.value);
+      });
+      return unsubscribe;
+    }
+  }, [block]);
+  const timeSpans = timerState?.spans || [];
+  const isRunning = timeSpans.length > 0 && timeSpans[timeSpans.length - 1].ended === void 0;
+  const [now, setNow] = react.useState(getRuntimeNowMs());
+  const elapsed = react.useMemo(() => {
+    if (timeSpans.length === 0) return 0;
+    return calculateDuration(timeSpans, now);
+  }, [timeSpans, now]);
+  react.useEffect(() => {
+    if (!isRunning) return;
+    let animationFrameId;
+    const update = () => {
+      setNow(getRuntimeNowMs());
+      animationFrameId = requestAnimationFrame(update);
+    };
+    update();
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isRunning]);
+  return {
+    elapsed,
+    isRunning,
+    timeSpans
+  };
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var BlockTimerDisplay = ({
+  block,
+  className,
+  showRounds = true,
+  compact = false
+}) => {
+  const timer = useTimerDisplay(block);
+  const round = useRoundDisplay(block);
+  if (!timer) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-4 text-muted-foreground", className), children: "No timer active" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+      "font-mono font-bold tabular-nums",
+      compact ? "text-3xl" : "text-5xl md:text-6xl",
+      timer.isRunning ? "text-primary" : "text-foreground"
+    ), children: timer.formatted }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+      "text-xs uppercase tracking-wider mt-2",
+      timer.isRunning ? "text-success" : "text-muted-foreground"
+    ), children: timer.isComplete ? "Complete" : timer.isRunning ? "Running" : "Paused" }),
+    timer.remaining !== void 0 && timer.remaining > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground mt-1", children: [
+      Math.ceil(timer.remaining / 1e3),
+      "s remaining"
+    ] }),
+    showRounds && round && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+      "mt-3 px-3 py-1 rounded-full text-sm",
+      "bg-secondary text-secondary-foreground"
+    ), children: round.label })
+  ] });
+};
+
+exports.BlockTimerDisplay = BlockTimerDisplay;
+exports.ScriptRuntimeProvider = ScriptRuntimeProvider;
+exports.createBrowserRuntimeNow = createBrowserRuntimeNow;
+exports.getRuntimeNowMs = getRuntimeNowMs;
+exports.runtimeNow = wallClockNow;
+exports.useActiveControls = useActiveControls;
+exports.useBlockMemory = useBlockMemory;
+exports.useBlockOutputs = useBlockOutputs;
+exports.useDisplayState = useDisplayState;
+exports.useFragmentSource = useFragmentSource;
+exports.useLiveAnalytics = useLiveAnalytics;
+exports.useMemorySubscription = useMemorySubscription;
+exports.useNextPreview = useNextPreview;
+exports.useOutputHierarchy = useOutputHierarchy;
+exports.useOutputStatement = useOutputStatement;
+exports.useOutputStatements = useOutputStatements;
+exports.usePrimaryTimer = usePrimaryTimer;
+exports.useRoundDisplay = useRoundDisplay;
+exports.useRoundState = useRoundState;
+exports.useRuntimeExecution = useRuntimeExecution;
+exports.useScriptRuntime = useScriptRuntime;
+exports.useSecondaryTimers = useSecondaryTimers;
+exports.useSnapshotBlocks = useSnapshotBlocks;
+exports.useSnapshotCurrentBlock = useSnapshotCurrentBlock;
+exports.useStackDisplayRows = useStackDisplayRows;
+exports.useStackFragmentSources = useStackFragmentSources;
+exports.useStackSnapshot = useStackSnapshot;
+exports.useStackTimers = useStackTimers;
+exports.useTimerDisplay = useTimerDisplay;
+exports.useTimerElapsed = useTimerElapsed;
+exports.useTimerState = useTimerState;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map