@neobyzantine/series-player 0.2.0

package/dist/index.js

@@ -0,0 +1,732 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnimatedEventMap: () => AnimatedEventMap,
+  AnimatorControls: () => AnimatorControls,
+  EventAnimator: () => EventAnimator,
+  SeriesEventPanel: () => SeriesEventPanel,
+  SeriesPlayer: () => SeriesPlayer,
+  SeriesStepList: () => SeriesStepList,
+  useSeriesPlayer: () => useSeriesPlayer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SeriesPlayer.tsx
+var import_react3 = require("react");
+
+// src/useSeriesPlayer.ts
+var import_react = require("react");
+function useSeriesPlayer(entries, onEventLoad, opts) {
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const [event, setEvent] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [jumpHistory, setJumpHistory] = (0, import_react.useState)([]);
+  const [autoPlaying, setAutoPlaying] = (0, import_react.useState)(false);
+  const autoTimerRef = (0, import_react.useRef)(null);
+  const loadingSlugRef = (0, import_react.useRef)(null);
+  const onEventChangeRef = (0, import_react.useRef)(opts?.onEventChange);
+  onEventChangeRef.current = opts?.onEventChange;
+  const autoPlayIntervalRef = (0, import_react.useRef)(opts?.autoPlayInterval ?? 12e3);
+  autoPlayIntervalRef.current = opts?.autoPlayInterval ?? 12e3;
+  const clearAutoTimer = (0, import_react.useCallback)(() => {
+    if (autoTimerRef.current) {
+      clearTimeout(autoTimerRef.current);
+      autoTimerRef.current = null;
+    }
+  }, []);
+  const loadSlug = (0, import_react.useCallback)(
+    async (slug, index) => {
+      loadingSlugRef.current = slug;
+      clearAutoTimer();
+      setLoading(true);
+      setError(null);
+      try {
+        const ev = await onEventLoad(slug);
+        if (loadingSlugRef.current !== slug) return;
+        setEvent(ev);
+        if (index >= 0) onEventChangeRef.current?.(index, ev);
+      } catch (err) {
+        if (loadingSlugRef.current === slug) {
+          setError(err instanceof Error ? err.message : "Failed to load event");
+        }
+      } finally {
+        if (loadingSlugRef.current === slug) setLoading(false);
+      }
+    },
+    [onEventLoad, clearAutoTimer]
+  );
+  (0, import_react.useEffect)(() => {
+    const entry = entries[0];
+    if (entry) void loadSlug(entry.slug, 0);
+  }, []);
+  const loadAtIndex = (0, import_react.useCallback)(
+    (index) => {
+      const entry = entries[index];
+      if (entry) void loadSlug(entry.slug, index);
+    },
+    [entries, loadSlug]
+  );
+  const next = (0, import_react.useCallback)(() => {
+    setCurrentIndex((prev2) => {
+      if (prev2 >= entries.length - 1) {
+        setAutoPlaying(false);
+        clearAutoTimer();
+        return prev2;
+      }
+      const next2 = prev2 + 1;
+      setJumpHistory([]);
+      loadAtIndex(next2);
+      return next2;
+    });
+  }, [entries.length, loadAtIndex, clearAutoTimer]);
+  const prev = (0, import_react.useCallback)(() => {
+    setJumpHistory((hist) => {
+      if (hist.length > 0) {
+        const restored = hist[hist.length - 1];
+        const newHist = hist.slice(0, -1);
+        setCurrentIndex(restored);
+        loadAtIndex(restored);
+        return newHist;
+      }
+      setCurrentIndex((idx) => {
+        if (idx <= 0) return idx;
+        const newIdx = idx - 1;
+        loadAtIndex(newIdx);
+        return newIdx;
+      });
+      return hist;
+    });
+  }, [loadAtIndex]);
+  const goTo = (0, import_react.useCallback)(
+    (index) => {
+      if (index < 0 || index >= entries.length) return;
+      setJumpHistory([]);
+      setAutoPlaying(false);
+      clearAutoTimer();
+      setCurrentIndex(index);
+      loadAtIndex(index);
+    },
+    [entries.length, loadAtIndex, clearAutoTimer]
+  );
+  const jumpToRelated = (0, import_react.useCallback)(
+    (slug) => {
+      setJumpHistory((hist) => [...hist, currentIndex]);
+      loadingSlugRef.current = slug;
+      clearAutoTimer();
+      setLoading(true);
+      setError(null);
+      onEventLoad(slug).then((ev) => {
+        if (loadingSlugRef.current !== slug) return;
+        setEvent(ev);
+        setLoading(false);
+      }).catch((err) => {
+        if (loadingSlugRef.current === slug) {
+          setError(err instanceof Error ? err.message : "Failed to load event");
+          setLoading(false);
+        }
+      });
+    },
+    [currentIndex, onEventLoad, clearAutoTimer]
+  );
+  const backFromJump = (0, import_react.useCallback)(() => {
+    setJumpHistory((hist) => {
+      if (!hist.length) return hist;
+      const restored = hist[hist.length - 1];
+      const newHist = hist.slice(0, -1);
+      setCurrentIndex(restored);
+      loadAtIndex(restored);
+      return newHist;
+    });
+  }, [loadAtIndex]);
+  const toggleAutoPlay = (0, import_react.useCallback)(() => {
+    setAutoPlaying((prev2) => {
+      if (prev2) {
+        clearAutoTimer();
+        return false;
+      }
+      autoTimerRef.current = setTimeout(() => {
+        next();
+      }, autoPlayIntervalRef.current);
+      return true;
+    });
+  }, [clearAutoTimer, next]);
+  return [
+    { currentIndex, event, loading, error, jumpHistory, autoPlaying },
+    { next, prev, goTo, jumpToRelated, backFromJump, toggleAutoPlay }
+  ];
+}
+
+// src/SeriesStepList.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SeriesStepList({ entries, currentIndex, jumpHistory, onSelect }) {
+  const isJumped = jumpHistory.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "nb-sp-steps", children: entries.map((entry, i) => {
+    const isActive = !isJumped && i === currentIndex;
+    const isDone = !isJumped && i < currentIndex;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
+      {
+        className: `nb-sp-step${isActive ? " nb-sp-step--active" : ""}${isDone ? " nb-sp-step--done" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "nb-sp-step-btn",
+            onClick: () => onSelect(i),
+            "aria-current": isActive ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nb-sp-step-num", children: i + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "nb-sp-step-body", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nb-sp-step-title", children: entry.title }),
+                entry.date_display && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nb-sp-step-date", children: entry.date_display })
+              ] })
+            ]
+          }
+        )
+      },
+      entry.slug
+    );
+  }) });
+}
+
+// src/AnimatorControls.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AnimatorControls({
+  playing,
+  current,
+  total,
+  currentStep,
+  accentColor = "#CFB53B",
+  onPlay,
+  onPause,
+  onReset,
+  onStepForward,
+  onStepBack
+}) {
+  if (total === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "nb-sp-anim-controls", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "nb-sp-anim-btns", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "nb-sp-anim-btn",
+          onClick: onReset,
+          title: "Reset animation",
+          disabled: current < 0,
+          children: "\u23EE"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "nb-sp-anim-btn",
+          onClick: onStepBack,
+          title: "Step back",
+          disabled: current <= 0,
+          children: "\u23EA"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: `nb-sp-anim-btn nb-sp-anim-btn--play${playing ? " nb-sp-anim-btn--active" : ""}`,
+          onClick: playing ? onPause : onPlay,
+          style: { borderColor: `${accentColor}66`, color: accentColor },
+          children: playing ? "\u23F8" : "\u25B6"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "nb-sp-anim-btn",
+          onClick: onStepForward,
+          title: "Step forward",
+          disabled: current >= total - 1,
+          children: "\u23E9"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nb-sp-anim-counter", children: current < 0 ? `0 / ${total}` : `${current + 1} / ${total}` })
+    ] }),
+    currentStep && (currentStep.label || currentStep.narration) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "nb-sp-anim-narration", children: [
+      currentStep.label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nb-sp-anim-label", style: { color: accentColor }, children: currentStep.label }),
+      currentStep.narration && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nb-sp-anim-text", children: currentStep.narration })
+    ] })
+  ] });
+}
+
+// src/AnimatedEventMap.tsx
+var import_react2 = require("react");
+var import_react_leaflet = require("react-leaflet");
+
+// src/EventAnimator.ts
+var import_leaflet = __toESM(require("leaflet"));
+var EventAnimator = class {
+  constructor(map, geojson, color, options) {
+    this.current = -1;
+    this.playing = false;
+    this.timer = null;
+    this.pulseMarker = null;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.map = map;
+    this.color = color;
+    this.stepMs = options?.stepMs ?? 7500;
+    this.ttsEnabled = options?.ttsEnabled ?? false;
+    this.steps = (geojson.features ?? []).filter((f) => f.properties.sort_order != null && f.geometry?.type === "Point").sort((a, b) => a.properties.sort_order - b.properties.sort_order);
+  }
+  get total() {
+    return this.steps.length;
+  }
+  on(event, fn) {
+    if (!this.listeners.has(event)) this.listeners.set(event, []);
+    this.listeners.get(event).push(fn);
+    return this;
+  }
+  emit(event, data) {
+    this.listeners.get(event)?.forEach((fn) => fn(data));
+  }
+  play() {
+    if (this.playing || this.total === 0) return;
+    this.playing = true;
+    this.emit("play");
+    if (this.current < 0) {
+      this.goto(0);
+    } else {
+      this.schedule();
+    }
+  }
+  pause() {
+    if (!this.playing) return;
+    this.playing = false;
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    window.speechSynthesis?.cancel();
+    this.emit("pause");
+  }
+  reset() {
+    this.pause();
+    this.current = -1;
+    this.clearPulse();
+    window.speechSynthesis?.cancel();
+    this.emit("reset");
+  }
+  stepForward() {
+    this.pause();
+    if (this.current + 1 < this.total) this.goto(this.current + 1);
+  }
+  stepBack() {
+    this.pause();
+    if (this.current - 1 >= 0) this.goto(this.current - 1);
+  }
+  setTTS(enabled) {
+    this.ttsEnabled = enabled;
+    if (!enabled) window.speechSynthesis?.cancel();
+  }
+  goto(index) {
+    if (index < 0 || index >= this.total) return;
+    this.current = index;
+    const feat = this.steps[index];
+    const props = feat.properties;
+    const [lng, lat] = feat.geometry.coordinates;
+    this.map.flyTo([lat, lng], props.zoom ?? 8, { duration: 1.4, easeLinearity: 0.4 });
+    this.clearPulse();
+    this.pulseMarker = import_leaflet.default.marker([lat, lng], {
+      icon: import_leaflet.default.divIcon({
+        className: "",
+        html: `<div class="nb-anim-pulse" style="--anim-color:${this.color}"></div>`,
+        iconSize: [48, 48],
+        iconAnchor: [24, 24]
+      }),
+      zIndexOffset: 1e3,
+      interactive: false
+    }).addTo(this.map);
+    if (this.ttsEnabled) this.speak(props.narration ?? props.label ?? "");
+    this.emit("step", { index, total: this.total, props });
+    if (this.playing) this.schedule();
+  }
+  schedule() {
+    const props = this.steps[this.current]?.properties;
+    const delay = props?.animation_pause_ms ?? this.stepMs;
+    this.timer = setTimeout(() => {
+      if (this.current + 1 >= this.total) {
+        this.playing = false;
+        window.speechSynthesis?.cancel();
+        this.emit("complete");
+      } else {
+        this.goto(this.current + 1);
+      }
+    }, delay);
+  }
+  clearPulse() {
+    if (this.pulseMarker) {
+      this.map.removeLayer(this.pulseMarker);
+      this.pulseMarker = null;
+    }
+  }
+  speak(text) {
+    const ss = window.speechSynthesis;
+    if (!ss || !text) return;
+    ss.cancel();
+    setTimeout(() => {
+      if (ss.paused) ss.resume();
+      const u = new SpeechSynthesisUtterance(text);
+      u.lang = "en-GB";
+      u.rate = 0.7;
+      u.pitch = 0.95;
+      u.volume = 1;
+      ss.speak(u);
+    }, 80);
+  }
+};
+
+// src/AnimatedEventMap.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnimatorDriver({ geojson, color, stepMs, ttsEnabled, onAnimatorReady, onStep, onComplete }) {
+  const map = (0, import_react_leaflet.useMap)();
+  const animatorRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const animator = new EventAnimator(map, geojson, color, { stepMs, ttsEnabled });
+    if (onStep) animator.on("step", onStep);
+    if (onComplete) animator.on("complete", onComplete);
+    animatorRef.current = animator;
+    onAnimatorReady?.(animator);
+    return () => {
+      animator.reset();
+      animatorRef.current = null;
+    };
+  }, [geojson, color, stepMs, ttsEnabled]);
+  return null;
+}
+function AnimatedEventMap({
+  geojson,
+  color = "#CFB53B",
+  stepMs = 7500,
+  ttsEnabled = false,
+  onAnimatorReady,
+  onStep,
+  onComplete,
+  center = [41, 29],
+  // Constantinople
+  zoom = 5,
+  height = "400px",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `nb-sp-map-wrap${className ? ` ${className}` : ""}`, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react_leaflet.MapContainer,
+    {
+      center,
+      zoom,
+      style: { height: "100%", width: "100%" },
+      zoomControl: true,
+      scrollWheelZoom: false,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_leaflet.TileLayer,
+          {
+            url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            attribution: '\xA9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            maxZoom: 18
+          }
+        ),
+        geojson && geojson.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          AnimatorDriver,
+          {
+            geojson,
+            color,
+            stepMs,
+            ttsEnabled,
+            onAnimatorReady,
+            onStep,
+            onComplete
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/SeriesEventPanel.tsx
+var import_actor = require("@neobyzantine/actor");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function defaultSanitize(html) {
+  return html.replace(/<[^>]*>/g, "");
+}
+function SeriesEventPanel({
+  event,
+  loading,
+  error,
+  accentColor = "#CFB53B",
+  resolvePortrait,
+  sanitizeHtml = defaultSanitize,
+  onActorClick,
+  onRelatedClick,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `nb-sp-panel nb-sp-panel--loading${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "nb-sp-panel-spinner" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `nb-sp-panel nb-sp-panel--error${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "nb-sp-panel-error", children: error }) });
+  }
+  if (!event) return null;
+  const hasActors = (event.actors?.length ?? 0) > 0;
+  const hasGallery = (event.gallery_images?.length ?? 0) > 0;
+  const hasRelations = (event.relations?.length ?? 0) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("article", { className: `nb-sp-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "nb-sp-panel-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "nb-sp-panel-title", style: { color: accentColor }, children: event.title }),
+      event.date_display && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "nb-sp-panel-date", children: event.date_display })
+    ] }),
+    event.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: "nb-sp-panel-body",
+        dangerouslySetInnerHTML: { __html: sanitizeHtml(event.description) }
+      }
+    ),
+    hasActors && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "nb-sp-panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "nb-sp-panel-section-title", children: "Key Figures" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_actor.ActorGrid,
+        {
+          actors: event.actors,
+          resolvePortrait,
+          onActorClick,
+          columns: 2,
+          compact: true
+        }
+      )
+    ] }),
+    hasGallery && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "nb-sp-panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "nb-sp-panel-section-title", children: "Gallery" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "nb-sp-panel-gallery", children: event.gallery_images.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "img",
+        {
+          src,
+          alt: "",
+          className: "nb-sp-panel-gallery-img",
+          loading: "lazy"
+        },
+        i
+      )) })
+    ] }),
+    hasRelations && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "nb-sp-panel-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "nb-sp-panel-section-title", children: "Related Events" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "nb-sp-panel-relations", children: event.relations.map((rel) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: `nb-sp-panel-rel nb-sp-panel-rel--${rel.type}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "nb-sp-panel-rel-btn",
+          onClick: () => onRelatedClick?.(rel.slug),
+          children: [
+            rel.title,
+            rel.date && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "nb-sp-panel-rel-date", children: [
+              " (",
+              rel.date,
+              ")"
+            ] })
+          ]
+        }
+      ) }, rel.slug)) })
+    ] })
+  ] });
+}
+
+// src/SeriesPlayer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SeriesPlayer({
+  entries,
+  onEventLoad,
+  accentColor,
+  ttsEnabled = false,
+  autoPlayInterval = 12e3,
+  resolvePortrait,
+  sanitizeHtml,
+  onEventChange,
+  height = "600px",
+  className
+}) {
+  const [animatorState, setAnimatorState] = (0, import_react3.useState)({ playing: false, current: -1, currentProps: null });
+  const animatorRef = (0, import_react3.useRef)(null);
+  const [state, actions] = useSeriesPlayer(entries, onEventLoad, {
+    onEventChange,
+    autoPlayInterval
+  });
+  const currentEntry = entries[state.currentIndex];
+  const resolvedColor = accentColor ?? currentEntry?.color ?? "#CFB53B";
+  const geojson = state.event?.locations ? {
+    type: "FeatureCollection",
+    features: state.event.locations.map((loc) => ({
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [loc.lng, loc.lat] },
+      properties: {
+        sort_order: loc.sort_order,
+        label: loc.label,
+        narration: loc.narration_text,
+        zoom: void 0,
+        animation_pause_ms: void 0
+      }
+    }))
+  } : null;
+  const handleAnimatorReady = (0, import_react3.useCallback)((animator) => {
+    animatorRef.current = animator;
+    setAnimatorState({ playing: false, current: -1, currentProps: null });
+  }, []);
+  const handleStep = (0, import_react3.useCallback)((data) => {
+    setAnimatorState((prev) => ({ ...prev, current: data.index, currentProps: data.props }));
+  }, []);
+  const handleComplete = (0, import_react3.useCallback)(() => {
+    setAnimatorState((prev) => ({ ...prev, playing: false }));
+  }, []);
+  const handlePlay = (0, import_react3.useCallback)(() => {
+    animatorRef.current?.play();
+    setAnimatorState((prev) => ({ ...prev, playing: true }));
+  }, []);
+  const handlePause = (0, import_react3.useCallback)(() => {
+    animatorRef.current?.pause();
+    setAnimatorState((prev) => ({ ...prev, playing: false }));
+  }, []);
+  const handleReset = (0, import_react3.useCallback)(() => {
+    animatorRef.current?.reset();
+    setAnimatorState({ playing: false, current: -1, currentProps: null });
+  }, []);
+  const handleStepForward = (0, import_react3.useCallback)(() => {
+    animatorRef.current?.stepForward();
+  }, []);
+  const handleStepBack = (0, import_react3.useCallback)(() => {
+    animatorRef.current?.stepBack();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `nb-sp-root${className ? ` ${className}` : ""}`,
+      style: { "--nb-sp-accent": resolvedColor },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("aside", { className: "nb-sp-sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          SeriesStepList,
+          {
+            entries,
+            currentIndex: state.currentIndex,
+            jumpHistory: state.jumpHistory,
+            onSelect: actions.goTo
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("main", { className: "nb-sp-main", style: { height }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            AnimatedEventMap,
+            {
+              geojson,
+              color: resolvedColor,
+              ttsEnabled,
+              onAnimatorReady: handleAnimatorReady,
+              onStep: handleStep,
+              onComplete: handleComplete,
+              height: "100%",
+              className: "nb-sp-map"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            AnimatorControls,
+            {
+              playing: animatorState.playing,
+              current: animatorState.current,
+              total: geojson?.features.length ?? 0,
+              currentStep: animatorState.currentProps,
+              accentColor: resolvedColor,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onReset: handleReset,
+              onStepForward: handleStepForward,
+              onStepBack: handleStepBack
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "nb-sp-nav-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "nb-sp-nav-btn",
+                onClick: actions.prev,
+                disabled: state.currentIndex === 0 && state.jumpHistory.length === 0,
+                children: "\u2190 Previous"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "nb-sp-nav-label", children: [
+              state.currentIndex + 1,
+              " / ",
+              entries.length
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "nb-sp-nav-btn",
+                onClick: actions.next,
+                disabled: state.currentIndex >= entries.length - 1,
+                children: "Next \u2192"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("aside", { className: "nb-sp-detail", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          SeriesEventPanel,
+          {
+            event: state.event,
+            loading: state.loading,
+            error: state.error,
+            accentColor: resolvedColor,
+            resolvePortrait,
+            sanitizeHtml,
+            onRelatedClick: actions.jumpToRelated
+          }
+        ) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedEventMap,
+  AnimatorControls,
+  EventAnimator,
+  SeriesEventPanel,
+  SeriesPlayer,
+  SeriesStepList,
+  useSeriesPlayer
+});
+//# sourceMappingURL=index.js.map