@rr0/ufoathome 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+<img src="doc/web/ufoathome/UFOAtHome.png" align=right alt="UFO@home logo">
+
+The UFO@home project aims to provide a standardized and efficient way to report and replay UFO sightings.
+
+See its [Wiki](https://github.com/RR0/UfoAtHome/wiki).

package/dist-embed/rr0-ufo-recorder.mjs

@@ -0,0 +1,494 @@
+const S = `
+<div class="appearance">
+  <div class="presets" role="group" aria-label="UFO shape">
+    <button class="preset" id="preset-oval" type="button" data-preset="oval">Oval</button>
+    <button class="preset" id="preset-saucer" type="button" data-preset="saucer">Saucer</button>
+    <button class="preset" id="preset-triangle" type="button" data-preset="triangle">Triangle</button>
+  </div>
+  <label>Color <input id="color" type="color" value="#39ff14"/></label>
+  <label>Transparency <input id="transparency" type="range" min="0" max="1" step="0.05" value="0"/></label>
+  <label>Halo <input id="haloScale" type="range" min="0" max="3" step="0.1" value="1.5"/></label>
+</div>
+<div class="toolbar">
+  <button id="record" type="button">Record</button>
+  <label>Sampling rate (ms) <input id="samplingRate" type="number" min="16" step="16" value="100"/></label>
+</div>
+<div id="player-slot"></div>
+`, b = `
+:host {
+  display: block;
+  font-family: sans-serif;
+}
+.appearance, .toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+  flex-wrap: wrap;
+}
+.presets {
+  display: flex;
+  gap: 0.25em;
+}
+button.preset {
+  cursor: pointer;
+}
+button.preset[aria-pressed="true"] {
+  outline: 2px solid #39f;
+  font-weight: bold;
+}
+`, k = `
+<div class="toolbar">
+  <button id="play" type="button">Play</button>
+  <button id="pause" type="button">Pause</button>
+  <input id="seek" type="range" min="0" max="0" value="0" step="1"/>
+</div>
+<canvas id="canvas" width="640" height="360"></canvas>
+`, A = `
+:host {
+  display: block;
+  font-family: sans-serif;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+canvas {
+  background: #050510;
+  border: 1px solid #333;
+}
+input[type=range] {
+  flex: 1;
+}
+`;
+function P(i, t = "#39ff14") {
+  return { kind: "oval", bounds: i, color: t, angle: 0, transparency: 0, haloScale: 0, selected: !1 };
+}
+function g(i, t, e = "#39ff14") {
+  return { kind: "polygon", bounds: i, points: t, color: e, angle: 0, transparency: 0, haloScale: 0, selected: !1 };
+}
+function R(i, t = "#39ff14") {
+  const { width: e, height: s } = i, n = [
+    { x: 0.5 * e, y: 0 },
+    { x: 0.8 * e, y: 0.25 * s },
+    { x: e, y: 0.5 * s },
+    { x: 0.8 * e, y: 0.75 * s },
+    { x: 0.5 * e, y: s },
+    { x: 0.2 * e, y: 0.75 * s },
+    { x: 0, y: 0.5 * s },
+    { x: 0.2 * e, y: 0.25 * s }
+  ];
+  return g(i, n, t);
+}
+function T(i, t = "#39ff14") {
+  const { width: e, height: s } = i, n = [
+    { x: 0, y: 0 },
+    { x: e, y: s / 2 },
+    { x: 0, y: s }
+  ];
+  return g(i, n, t);
+}
+const B = {
+  oval: P,
+  saucer: R,
+  triangle: T
+};
+function L(i, t) {
+  return {
+    ...B[t.presetId](i, t.color),
+    transparency: t.transparency,
+    haloScale: t.haloScale
+  };
+}
+function F(i, t, e) {
+  const { bounds: s } = i;
+  return t >= s.x && t <= s.x + s.width && e >= s.y && e <= s.y + s.height;
+}
+function v(i, t, e) {
+  const s = i.bounds.width, n = i.bounds.height;
+  return {
+    ...i,
+    bounds: { x: t - s / 2, y: e - n / 2, width: s, height: n }
+  };
+}
+class h {
+  keyframes = [];
+  addKeyframe(t, e) {
+    const s = this.findInsertIndex(t);
+    this.keyframes[s]?.t === t ? this.keyframes[s] = { t, shapes: e } : this.keyframes.splice(s, 0, { t, shapes: e });
+  }
+  findInsertIndex(t) {
+    let e = 0, s = this.keyframes.length;
+    for (; e < s; ) {
+      const n = e + s >>> 1;
+      this.keyframes[n].t < t ? e = n + 1 : s = n;
+    }
+    return e;
+  }
+  getKeyframeAt(t) {
+    const e = this.findInsertIndex(t), s = this.keyframes[e];
+    return s?.t === t ? s : void 0;
+  }
+  getShapeAt(t, e) {
+    return this.getKeyframeAt(t)?.shapes.find((s) => s.sourceId === e)?.shape;
+  }
+  /**
+   * Finds the most recent shape recorded at-or-before t for that source (hold-last-value),
+   * which is what playback needs since not every source has a keyframe at every sampled tick.
+   */
+  getLatestShapeAt(t, e) {
+    let s = this.findInsertIndex(t);
+    for (this.keyframes[s]?.t !== t && (s -= 1); s >= 0; s--) {
+      const n = this.keyframes[s].shapes.find((r) => r.sourceId === e);
+      if (n) return n.shape;
+    }
+  }
+  hitTest(t, e, s) {
+    const n = this.getKeyframeAt(t);
+    if (n) {
+      for (let r = n.shapes.length - 1; r >= 0; r--)
+        if (F(n.shapes[r].shape, e, s))
+          return n.shapes[r];
+    }
+  }
+  get duration() {
+    return this.keyframes.length === 0 ? 0 : this.keyframes[this.keyframes.length - 1].t;
+  }
+  get sourceIds() {
+    const t = /* @__PURE__ */ new Set();
+    for (const e of this.keyframes)
+      for (const s of e.shapes)
+        t.add(s.sourceId);
+    return [...t];
+  }
+  get allKeyframes() {
+    return this.keyframes;
+  }
+  toJSON() {
+    return { keyframes: this.keyframes };
+  }
+  static fromJSON(t) {
+    const e = new h();
+    for (const s of t.keyframes)
+      e.addKeyframe(s.t, s.shapes);
+    return e;
+  }
+}
+class c {
+  constructor(t, e, s) {
+    this.event = t, this.timeline = e, this.witnessId = s;
+  }
+  static create(t, e, s) {
+    return new c({ eventType: "sighting", time: t, place: e }, new h(), s);
+  }
+}
+class u {
+  constructor(t, e) {
+    this.timeline = t, this.onFrame = e;
+  }
+  rafId = null;
+  state = "stopped";
+  currentT = 0;
+  lastWallTime = 0;
+  play() {
+    if (this.state === "playing") return;
+    this.state = "playing", this.lastWallTime = performance.now();
+    const t = () => {
+      if (this.state !== "playing") return;
+      const e = performance.now();
+      if (this.currentT += e - this.lastWallTime, this.lastWallTime = e, this.currentT >= this.timeline.duration) {
+        this.currentT = this.timeline.duration, this.resolveFrame(this.currentT), this.stop();
+        return;
+      }
+      this.resolveFrame(this.currentT), this.rafId = requestAnimationFrame(t);
+    };
+    this.rafId = requestAnimationFrame(t);
+  }
+  pause() {
+    this.state === "playing" && (this.state = "paused", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null));
+  }
+  stop() {
+    this.state = "stopped", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
+  }
+  seek(t) {
+    this.currentT = Math.max(0, Math.min(t, this.timeline.duration)), this.resolveFrame(this.currentT);
+  }
+  get playbackState() {
+    return this.state;
+  }
+  get time() {
+    return this.currentT;
+  }
+  resolveFrame(t) {
+    const e = /* @__PURE__ */ new Map();
+    for (const s of this.timeline.sourceIds) {
+      const n = this.timeline.getLatestShapeAt(t, s);
+      n && e.set(s, n);
+    }
+    this.onFrame(t, e);
+  }
+}
+const d = 6, m = d / 2, C = 20;
+class M {
+  constructor(t) {
+    this.ctx = t;
+  }
+  clear(t, e) {
+    this.ctx.clearRect(0, 0, t, e);
+  }
+  paintShape(t) {
+    this.ctx.save(), this.ctx.globalAlpha = 1 - t.transparency, t.haloScale > 0 && this.paintHalo(t), this.paintBase(t), t.selected && this.paintSelectionHandles(t), this.ctx.restore();
+  }
+  paintBase(t) {
+    if (this.ctx.fillStyle = t.color, this.ctx.beginPath(), t.kind === "oval") {
+      const { x: e, y: s, width: n, height: r } = t.bounds, o = n / 2, l = r / 2;
+      this.ctx.ellipse(e + o, s + l, o, l, t.angle, 0, 2 * Math.PI);
+    } else {
+      const { x: e, y: s } = t.bounds;
+      this.ctx.save(), this.ctx.translate(e, s), this.ctx.rotate(t.angle), t.points.forEach((n, r) => {
+        r === 0 ? this.ctx.moveTo(n.x, n.y) : this.ctx.lineTo(n.x, n.y);
+      }), this.ctx.closePath(), this.ctx.restore();
+    }
+    this.ctx.fill();
+  }
+  paintHalo(t) {
+    this.ctx.save(), this.ctx.shadowColor = t.color, this.ctx.shadowBlur = C * t.haloScale, this.paintBase(t), this.ctx.restore();
+  }
+  paintSelectionHandles(t) {
+    const { x: e, y: s, width: n, height: r } = t.bounds, o = n / 2, l = r / 2;
+    this.ctx.strokeStyle = "lightgray", this.ctx.strokeRect(e, s, n, r), this.ctx.fillStyle = "lightgray";
+    const I = [
+      [e, s],
+      [e + o, s],
+      [e + n, s],
+      [e + n, s + l],
+      [e + n, s + r],
+      [e + o, s + r],
+      [e, s + r],
+      [e, s + l]
+    ];
+    for (const [w, x] of I)
+      this.ctx.fillRect(w - m, x - m, d, d);
+  }
+}
+function N(i) {
+  return {
+    version: 1,
+    time: i.event.time,
+    place: i.event.place,
+    witnessId: i.witnessId,
+    timeline: i.timeline.toJSON()
+  };
+}
+function D(i) {
+  return new c(
+    { eventType: "sighting", time: i.time, place: i.place },
+    h.fromJSON(i.timeline),
+    i.witnessId
+  );
+}
+class H extends HTMLElement {
+  static get observedAttributes() {
+    return ["src"];
+  }
+  shadow;
+  canvas;
+  canvasRenderer;
+  playButton;
+  pauseButton;
+  seekInput;
+  currentSighting = c.create();
+  player;
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open" });
+    const t = document.createElement("template");
+    t.innerHTML = `<style>${A}</style>${k}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.canvas = this.shadow.getElementById("canvas"), this.canvasRenderer = new M(this.canvas.getContext("2d")), this.playButton = this.shadow.getElementById("play"), this.pauseButton = this.shadow.getElementById("pause"), this.seekInput = this.shadow.getElementById("seek"), this.playButton.addEventListener("click", () => this.player.play()), this.pauseButton.addEventListener("click", () => this.player.pause()), this.seekInput.addEventListener("input", () => this.player.seek(Number(this.seekInput.value))), this.player = new u(this.currentSighting.timeline, (e, s) => this.onFrame(e, s)), this.refresh();
+  }
+  connectedCallback() {
+    const t = this.getAttribute("src");
+    t && this.loadFromSrc(t);
+  }
+  attributeChangedCallback(t, e, s) {
+    t === "src" && s && s !== e && this.isConnected && this.loadFromSrc(s);
+  }
+  /** Fetches a SightingRecordingJson from `url` and loads it — what the `src` attribute uses. */
+  async loadFromSrc(t) {
+    const e = await fetch(t);
+    this.sightingData = await e.json();
+  }
+  get sightingData() {
+    return N(this.currentSighting);
+  }
+  set sightingData(t) {
+    this.currentSighting = D(t), this.player = new u(this.currentSighting.timeline, (e, s) => this.onFrame(e, s)), this.refresh();
+  }
+  /**
+   * The live Sighting/Timeline, exposed so UfoRecorderElement (which composes
+   * this element) can add keyframes to it directly as it records.
+   */
+  get sighting() {
+    return this.currentSighting;
+  }
+  /** Exposed so UfoRecorderElement can paint a live drag preview on the same canvas. */
+  get canvasElement() {
+    return this.canvas;
+  }
+  get renderer() {
+    return this.canvasRenderer;
+  }
+  /**
+   * Re-reads the timeline's duration into the seek slider and repaints the
+   * current frame — call after externally mutating `sighting.timeline`
+   * (e.g. UfoRecorderElement adding keyframes while recording).
+   */
+  refresh() {
+    this.seekInput.max = String(this.currentSighting.timeline.duration), this.player.seek(this.player.time);
+  }
+  onFrame(t, e) {
+    this.canvasRenderer.clear(this.canvas.width, this.canvas.height);
+    for (const s of e.values())
+      this.canvasRenderer.paintShape(s);
+    this.seekInput.value = String(t);
+  }
+}
+const p = "rr0-ufo-player";
+function E() {
+  customElements.get(p) || customElements.define(p, H);
+}
+class _ {
+  constructor(t, e) {
+    this.timeline = t, this.clock = e;
+  }
+  currentPointer = null;
+  shapePrototype = null;
+  sourceId = "";
+  start(t, e) {
+    this.sourceId = t, this.shapePrototype = e, this.currentPointer = null, this.clock.start((s) => this.recordSample(s));
+  }
+  onPointerMove(t, e) {
+    this.currentPointer = { x: t, y: e };
+  }
+  stop() {
+    this.clock.stop();
+  }
+  recordSample(t) {
+    if (!this.currentPointer || !this.shapePrototype) return;
+    const e = v(this.shapePrototype, this.currentPointer.x, this.currentPointer.y);
+    this.timeline.addKeyframe(t, [{ sourceId: this.sourceId, shape: e }]);
+  }
+}
+class O {
+  constructor(t) {
+    this.intervalMs = t;
+  }
+  rafId = null;
+  startTime = 0;
+  lastTick = 0;
+  start(t) {
+    this.startTime = performance.now(), this.lastTick = 0;
+    const e = () => {
+      const s = performance.now() - this.startTime;
+      s - this.lastTick >= this.intervalMs && (this.lastTick = s, t(s)), this.rafId = requestAnimationFrame(e);
+    };
+    this.rafId = requestAnimationFrame(e);
+  }
+  stop() {
+    this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
+  }
+}
+E();
+const a = { width: 48, height: 28 }, U = "ufo-1", y = ["oval", "saucer", "triangle"], K = { presetId: "oval", color: "#39ff14", transparency: 0, haloScale: 1.5 };
+class J extends HTMLElement {
+  shadow;
+  playerElement;
+  recordButton;
+  samplingRateInput;
+  presetButtons;
+  colorInput;
+  transparencyInput;
+  haloScaleInput;
+  recorder;
+  isRecording = !1;
+  currentAppearance = { ...K };
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open" });
+    const t = document.createElement("template");
+    t.innerHTML = `<style>${b}</style>${S}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.playerElement = document.createElement(p), this.shadow.getElementById("player-slot").replaceWith(this.playerElement), this.recordButton = this.shadow.getElementById("record"), this.samplingRateInput = this.shadow.getElementById("samplingRate"), this.presetButtons = {
+      oval: this.shadow.getElementById("preset-oval"),
+      saucer: this.shadow.getElementById("preset-saucer"),
+      triangle: this.shadow.getElementById("preset-triangle")
+    }, this.colorInput = this.shadow.getElementById("color"), this.transparencyInput = this.shadow.getElementById("transparency"), this.haloScaleInput = this.shadow.getElementById("haloScale"), this.playerElement.canvasElement.addEventListener("pointerdown", (e) => this.onPointerDown(e)), this.playerElement.canvasElement.addEventListener("pointermove", (e) => this.onPointerMove(e)), this.recordButton.addEventListener("click", () => this.toggleRecording());
+    for (const e of y)
+      this.presetButtons[e].addEventListener("click", () => this.setAppearance({ presetId: e }));
+    this.colorInput.addEventListener("input", () => this.setAppearance({ color: this.colorInput.value })), this.transparencyInput.addEventListener(
+      "input",
+      () => this.setAppearance({ transparency: Number(this.transparencyInput.value) })
+    ), this.haloScaleInput.addEventListener(
+      "input",
+      () => this.setAppearance({ haloScale: Number(this.haloScaleInput.value) })
+    ), this.updatePresetButtons(), this.renderPreview();
+  }
+  get sightingData() {
+    return this.playerElement.sightingData;
+  }
+  set sightingData(t) {
+    this.playerElement.sightingData = t;
+  }
+  /** The UFO's appearance (shape preset, color, transparency, halo) used for the next recording. */
+  get appearance() {
+    return { ...this.currentAppearance };
+  }
+  set appearance(t) {
+    this.setAppearance(t);
+  }
+  setAppearance(t) {
+    this.currentAppearance = { ...this.currentAppearance, ...t }, this.updatePresetButtons(), this.isRecording || this.renderPreview();
+  }
+  updatePresetButtons() {
+    for (const t of y)
+      this.presetButtons[t]?.setAttribute(
+        "aria-pressed",
+        String(t === this.currentAppearance.presetId)
+      );
+  }
+  get samplingRate() {
+    return Number(this.samplingRateInput.value);
+  }
+  buildPrototype(t = this.defaultBounds()) {
+    return L(t, this.currentAppearance);
+  }
+  defaultBounds() {
+    const t = this.playerElement.canvasElement;
+    return {
+      x: t.width / 2 - a.width / 2,
+      y: t.height / 2 - a.height / 2,
+      width: a.width,
+      height: a.height
+    };
+  }
+  renderPreview() {
+    const t = this.playerElement.canvasElement;
+    this.playerElement.renderer.clear(t.width, t.height), this.playerElement.renderer.paintShape(this.buildPrototype());
+  }
+  toggleRecording() {
+    const t = this.playerElement.canvasElement;
+    this.isRecording ? (this.recorder?.stop(), this.isRecording = !1, this.recordButton.textContent = "Record", t.style.cursor = "", t.style.touchAction = "", this.playerElement.refresh()) : (this.recorder = new _(this.playerElement.sighting.timeline, new O(this.samplingRate)), this.recorder.start(U, this.buildPrototype()), this.isRecording = !0, this.recordButton.textContent = "Stop", t.style.cursor = "crosshair", t.style.touchAction = "none");
+  }
+  onPointerDown(t) {
+    this.isRecording && this.onPointerMove(t);
+  }
+  onPointerMove(t) {
+    if (!this.isRecording) return;
+    const e = this.playerElement.canvasElement, s = e.getBoundingClientRect(), n = t.clientX - s.left, r = t.clientY - s.top;
+    this.recorder?.onPointerMove(n, r), this.playerElement.renderer.clear(e.width, e.height), this.playerElement.renderer.paintShape(
+      v(this.buildPrototype({ x: 0, y: 0, width: a.width, height: a.height }), n, r)
+    );
+  }
+}
+const f = "rr0-ufo-recorder";
+function W() {
+  E(), customElements.get(f) || customElements.define(f, J);
+}
+W();

package/dist-embed-player/rr0-ufo-player.mjs

@@ -0,0 +1,275 @@
+const g = `
+<div class="toolbar">
+  <button id="play" type="button">Play</button>
+  <button id="pause" type="button">Pause</button>
+  <input id="seek" type="range" min="0" max="0" value="0" step="1"/>
+</div>
+<canvas id="canvas" width="640" height="360"></canvas>
+`, v = `
+:host {
+  display: block;
+  font-family: sans-serif;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+canvas {
+  background: #050510;
+  border: 1px solid #333;
+}
+input[type=range] {
+  flex: 1;
+}
+`;
+function x(a, t, s) {
+  const { bounds: e } = a;
+  return t >= e.x && t <= e.x + e.width && s >= e.y && s <= e.y + e.height;
+}
+class o {
+  keyframes = [];
+  addKeyframe(t, s) {
+    const e = this.findInsertIndex(t);
+    this.keyframes[e]?.t === t ? this.keyframes[e] = { t, shapes: s } : this.keyframes.splice(e, 0, { t, shapes: s });
+  }
+  findInsertIndex(t) {
+    let s = 0, e = this.keyframes.length;
+    for (; s < e; ) {
+      const i = s + e >>> 1;
+      this.keyframes[i].t < t ? s = i + 1 : e = i;
+    }
+    return s;
+  }
+  getKeyframeAt(t) {
+    const s = this.findInsertIndex(t), e = this.keyframes[s];
+    return e?.t === t ? e : void 0;
+  }
+  getShapeAt(t, s) {
+    return this.getKeyframeAt(t)?.shapes.find((e) => e.sourceId === s)?.shape;
+  }
+  /**
+   * Finds the most recent shape recorded at-or-before t for that source (hold-last-value),
+   * which is what playback needs since not every source has a keyframe at every sampled tick.
+   */
+  getLatestShapeAt(t, s) {
+    let e = this.findInsertIndex(t);
+    for (this.keyframes[e]?.t !== t && (e -= 1); e >= 0; e--) {
+      const i = this.keyframes[e].shapes.find((n) => n.sourceId === s);
+      if (i) return i.shape;
+    }
+  }
+  hitTest(t, s, e) {
+    const i = this.getKeyframeAt(t);
+    if (i) {
+      for (let n = i.shapes.length - 1; n >= 0; n--)
+        if (x(i.shapes[n].shape, s, e))
+          return i.shapes[n];
+    }
+  }
+  get duration() {
+    return this.keyframes.length === 0 ? 0 : this.keyframes[this.keyframes.length - 1].t;
+  }
+  get sourceIds() {
+    const t = /* @__PURE__ */ new Set();
+    for (const s of this.keyframes)
+      for (const e of s.shapes)
+        t.add(e.sourceId);
+    return [...t];
+  }
+  get allKeyframes() {
+    return this.keyframes;
+  }
+  toJSON() {
+    return { keyframes: this.keyframes };
+  }
+  static fromJSON(t) {
+    const s = new o();
+    for (const e of t.keyframes)
+      s.addKeyframe(e.t, e.shapes);
+    return s;
+  }
+}
+class c {
+  constructor(t, s, e) {
+    this.event = t, this.timeline = s, this.witnessId = e;
+  }
+  static create(t, s, e) {
+    return new c({ eventType: "sighting", time: t, place: s }, new o(), e);
+  }
+}
+class d {
+  constructor(t, s) {
+    this.timeline = t, this.onFrame = s;
+  }
+  rafId = null;
+  state = "stopped";
+  currentT = 0;
+  lastWallTime = 0;
+  play() {
+    if (this.state === "playing") return;
+    this.state = "playing", this.lastWallTime = performance.now();
+    const t = () => {
+      if (this.state !== "playing") return;
+      const s = performance.now();
+      if (this.currentT += s - this.lastWallTime, this.lastWallTime = s, this.currentT >= this.timeline.duration) {
+        this.currentT = this.timeline.duration, this.resolveFrame(this.currentT), this.stop();
+        return;
+      }
+      this.resolveFrame(this.currentT), this.rafId = requestAnimationFrame(t);
+    };
+    this.rafId = requestAnimationFrame(t);
+  }
+  pause() {
+    this.state === "playing" && (this.state = "paused", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null));
+  }
+  stop() {
+    this.state = "stopped", this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
+  }
+  seek(t) {
+    this.currentT = Math.max(0, Math.min(t, this.timeline.duration)), this.resolveFrame(this.currentT);
+  }
+  get playbackState() {
+    return this.state;
+  }
+  get time() {
+    return this.currentT;
+  }
+  resolveFrame(t) {
+    const s = /* @__PURE__ */ new Map();
+    for (const e of this.timeline.sourceIds) {
+      const i = this.timeline.getLatestShapeAt(t, e);
+      i && s.set(e, i);
+    }
+    this.onFrame(t, s);
+  }
+}
+const l = 6, u = l / 2, k = 20;
+class I {
+  constructor(t) {
+    this.ctx = t;
+  }
+  clear(t, s) {
+    this.ctx.clearRect(0, 0, t, s);
+  }
+  paintShape(t) {
+    this.ctx.save(), this.ctx.globalAlpha = 1 - t.transparency, t.haloScale > 0 && this.paintHalo(t), this.paintBase(t), t.selected && this.paintSelectionHandles(t), this.ctx.restore();
+  }
+  paintBase(t) {
+    if (this.ctx.fillStyle = t.color, this.ctx.beginPath(), t.kind === "oval") {
+      const { x: s, y: e, width: i, height: n } = t.bounds, r = i / 2, h = n / 2;
+      this.ctx.ellipse(s + r, e + h, r, h, t.angle, 0, 2 * Math.PI);
+    } else {
+      const { x: s, y: e } = t.bounds;
+      this.ctx.save(), this.ctx.translate(s, e), this.ctx.rotate(t.angle), t.points.forEach((i, n) => {
+        n === 0 ? this.ctx.moveTo(i.x, i.y) : this.ctx.lineTo(i.x, i.y);
+      }), this.ctx.closePath(), this.ctx.restore();
+    }
+    this.ctx.fill();
+  }
+  paintHalo(t) {
+    this.ctx.save(), this.ctx.shadowColor = t.color, this.ctx.shadowBlur = k * t.haloScale, this.paintBase(t), this.ctx.restore();
+  }
+  paintSelectionHandles(t) {
+    const { x: s, y: e, width: i, height: n } = t.bounds, r = i / 2, h = n / 2;
+    this.ctx.strokeStyle = "lightgray", this.ctx.strokeRect(s, e, i, n), this.ctx.fillStyle = "lightgray";
+    const f = [
+      [s, e],
+      [s + r, e],
+      [s + i, e],
+      [s + i, e + h],
+      [s + i, e + n],
+      [s + r, e + n],
+      [s, e + n],
+      [s, e + h]
+    ];
+    for (const [p, y] of f)
+      this.ctx.fillRect(p - u, y - u, l, l);
+  }
+}
+function S(a) {
+  return {
+    version: 1,
+    time: a.event.time,
+    place: a.event.place,
+    witnessId: a.witnessId,
+    timeline: a.timeline.toJSON()
+  };
+}
+function w(a) {
+  return new c(
+    { eventType: "sighting", time: a.time, place: a.place },
+    o.fromJSON(a.timeline),
+    a.witnessId
+  );
+}
+class b extends HTMLElement {
+  static get observedAttributes() {
+    return ["src"];
+  }
+  shadow;
+  canvas;
+  canvasRenderer;
+  playButton;
+  pauseButton;
+  seekInput;
+  currentSighting = c.create();
+  player;
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open" });
+    const t = document.createElement("template");
+    t.innerHTML = `<style>${v}</style>${g}`, this.shadow.appendChild(t.content.cloneNode(!0)), this.canvas = this.shadow.getElementById("canvas"), this.canvasRenderer = new I(this.canvas.getContext("2d")), this.playButton = this.shadow.getElementById("play"), this.pauseButton = this.shadow.getElementById("pause"), this.seekInput = this.shadow.getElementById("seek"), this.playButton.addEventListener("click", () => this.player.play()), this.pauseButton.addEventListener("click", () => this.player.pause()), this.seekInput.addEventListener("input", () => this.player.seek(Number(this.seekInput.value))), this.player = new d(this.currentSighting.timeline, (s, e) => this.onFrame(s, e)), this.refresh();
+  }
+  connectedCallback() {
+    const t = this.getAttribute("src");
+    t && this.loadFromSrc(t);
+  }
+  attributeChangedCallback(t, s, e) {
+    t === "src" && e && e !== s && this.isConnected && this.loadFromSrc(e);
+  }
+  /** Fetches a SightingRecordingJson from `url` and loads it — what the `src` attribute uses. */
+  async loadFromSrc(t) {
+    const s = await fetch(t);
+    this.sightingData = await s.json();
+  }
+  get sightingData() {
+    return S(this.currentSighting);
+  }
+  set sightingData(t) {
+    this.currentSighting = w(t), this.player = new d(this.currentSighting.timeline, (s, e) => this.onFrame(s, e)), this.refresh();
+  }
+  /**
+   * The live Sighting/Timeline, exposed so UfoRecorderElement (which composes
+   * this element) can add keyframes to it directly as it records.
+   */
+  get sighting() {
+    return this.currentSighting;
+  }
+  /** Exposed so UfoRecorderElement can paint a live drag preview on the same canvas. */
+  get canvasElement() {
+    return this.canvas;
+  }
+  get renderer() {
+    return this.canvasRenderer;
+  }
+  /**
+   * Re-reads the timeline's duration into the seek slider and repaints the
+   * current frame — call after externally mutating `sighting.timeline`
+   * (e.g. UfoRecorderElement adding keyframes while recording).
+   */
+  refresh() {
+    this.seekInput.max = String(this.currentSighting.timeline.duration), this.player.seek(this.player.time);
+  }
+  onFrame(t, s) {
+    this.canvasRenderer.clear(this.canvas.width, this.canvas.height);
+    for (const e of s.values())
+      this.canvasRenderer.paintShape(e);
+    this.seekInput.value = String(t);
+  }
+}
+const m = "rr0-ufo-player";
+function E() {
+  customElements.get(m) || customElements.define(m, b);
+}
+E();

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@rr0/ufoathome",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "UFO@home — record and replay a UFO sighting's shape, movement and appearance",
+  "author": "Jérôme Beau <rr0@rr0.org> (https://rr0.org)",
+  "license": "MIT",
+  "homepage": "https://github.com/RR0/UfoAtHome#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RR0/UfoAtHome.git"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    "./player": "./dist-embed-player/rr0-ufo-player.mjs",
+    "./recorder": "./dist-embed/rr0-ufo-recorder.mjs"
+  },
+  "files": [
+    "dist-embed",
+    "dist-embed-player"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "build:embed": "tsc --noEmit && vite build --config vite.embed.config.ts",
+    "build:embed-player": "tsc --noEmit && vite build --config vite.embed-player.config.ts",
+    "build:all": "npm run build && npm run build:embed && npm run build:embed-player",
+    "prepublishOnly": "npm run build:embed && npm run build:embed-player && npm test",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@rr0/data": "^0.3.40",
+    "@rr0/place": "^0.5.3",
+    "@rr0/time": "^0.11.2"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^6.3.5",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "ufo",
+    "sighting",
+    "web-component",
+    "rr0"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}