@fxi/zartigl 0.5.0 → 0.7.0

package/dist/story.js

@@ -0,0 +1,561 @@
+async function D(t, e) {
+  return t(), e();
+}
+function n(t, e) {
+  if (!t)
+    throw new Error(`Invalid story document: ${e}`);
+}
+function d(t) {
+  return typeof t == "object" && t !== null && !Array.isArray(t);
+}
+function p(t, e, s) {
+  n(d(t), `${e} must be a localized object`), n(
+    typeof t[s] == "string",
+    `${e}.${s} must be a string`
+  );
+}
+function y(t, e) {
+  n(typeof t == "string", `${e} must be a string`);
+  let s;
+  try {
+    s = new URL(t);
+  } catch {
+    throw new Error(`Invalid story document: ${e} must be a valid URL`);
+  }
+  n(
+    s.protocol === "https:" || s.protocol === "http:",
+    `${e} must use HTTP or HTTPS`
+  );
+}
+function b(t, e, s) {
+  n(d(t), `${e} must be an object`), n(
+    typeof t.id == "string" && t.id.length > 0,
+    `${e}.id is required`
+  ), n(
+    ["copy", "stage", "analysis", "edge"].includes(String(t.slot)),
+    `${e}.slot is invalid`
+  ), n(
+    ["copy", "view", "widget", "text", "credit", "label"].includes(
+      String(t.type)
+    ),
+    `${e}.type is invalid`
+  ), t.type === "copy" && (p(t.heading, `${e}.heading`, s), t.text !== void 0 && p(t.text, `${e}.text`, s), t.references !== void 0 && (n(
+    Array.isArray(t.references) && t.references.length > 0,
+    `${e}.references must not be empty`
+  ), t.references.forEach((r, i) => {
+    const o = `${e}.references[${i}]`;
+    n(d(r), `${o} must be an object`), p(
+      r.label,
+      `${o}.label`,
+      s
+    ), y(r.url, `${o}.url`);
+  })), t.backdrop !== void 0 && n(
+    ["none", "dark-gradient"].includes(String(t.backdrop)),
+    `${e}.backdrop is invalid`
+  )), t.type === "view" && n(typeof t.view == "string", `${e}.view is required`), t.type === "widget" && (n(typeof t.widget == "string", `${e}.widget is required`), t.caption !== void 0 && p(t.caption, `${e}.caption`, s)), ["text", "credit", "label"].includes(String(t.type)) && p(t.text, `${e}.text`, s);
+}
+const v = [
+  "full",
+  "split-left",
+  "split-right",
+  "overlay"
+];
+function w(t, e = {}) {
+  const s = e.layouts ?? v;
+  n(d(t), "root must be an object"), n(t.schemaVersion === 1, "schemaVersion must be 1"), n(
+    typeof t.defaultLocale == "string",
+    "defaultLocale is required"
+  );
+  const r = t.defaultLocale;
+  p(t.title, "title", r), n(
+    d(t.themes) && Object.keys(t.themes).length > 0,
+    "themes must not be empty"
+  ), n(
+    Array.isArray(t.scenes) && t.scenes.length > 0,
+    "scenes must not be empty"
+  );
+  const i = /* @__PURE__ */ new Set();
+  for (const [o, a] of t.scenes.entries()) {
+    const l = `scenes[${o}]`;
+    n(d(a), `${l} must be an object`), n(
+      typeof a.id == "string" && a.id.length > 0,
+      `${l}.id is required`
+    ), n(!i.has(a.id), `${l}.id is duplicated`), i.add(a.id), n(
+      typeof a.theme == "string" && a.theme in t.themes,
+      `${l}.theme is unknown`
+    ), n(
+      s.includes(String(a.layout)),
+      `${l}.layout is invalid`
+    ), p(a.name, `${l}.name`, r), n(
+      Array.isArray(a.blocks),
+      `${l}.blocks must be an array`
+    ), n(
+      !("scrollVh" in a),
+      `${l}.scrollVh is not supported by scene navigation`
+    ), n(
+      a.durationMs === void 0 || typeof a.durationMs == "number" && Number.isFinite(a.durationMs) && a.durationMs > 0,
+      `${l}.durationMs must be a positive finite number`
+    ), a.playback !== void 0 && (n(
+      d(a.playback),
+      `${l}.playback must be an object`
+    ), n(
+      ["none", "autoplay", "sequence"].includes(
+        String(a.playback.mode)
+      ),
+      `${l}.playback.mode is invalid`
+    ), a.playback.mode === "sequence" && (n(
+      Array.isArray(a.playback.times) && a.playback.times.length > 0,
+      `${l}.playback.times must not be empty`
+    ), n(
+      a.playback.times.every(
+        (h) => typeof h == "string" && Number.isFinite(Date.parse(h))
+      ),
+      `${l}.playback.times contains an invalid date`
+    ), n(
+      typeof a.playback.intervalMs == "number" && a.playback.intervalMs > 0,
+      `${l}.playback.intervalMs must be positive`
+    )));
+    const c = /* @__PURE__ */ new Set();
+    a.blocks.forEach((h, u) => {
+      b(h, `${l}.blocks[${u}]`, r), n(
+        !c.has(h.id),
+        `${l}.blocks[${u}].id is duplicated`
+      ), c.add(h.id);
+    });
+  }
+}
+function T(t) {
+  n(d(t), "views root must be an object"), n(t.schemaVersion === 1, "views schemaVersion must be 1"), n(Array.isArray(t.views), "views must be an array");
+  const e = /* @__PURE__ */ new Set();
+  for (const [s, r] of t.views.entries())
+    n(d(r), `views[${s}] must be an object`), n(
+      typeof r.id == "string" && r.id.length > 0,
+      `views[${s}].id is required`
+    ), n(!e.has(r.id), `views[${s}].id is duplicated`), e.add(r.id), n(
+      typeof r.type == "string" && r.type.length > 0,
+      `views[${s}].type is required`
+    ), n(
+      d(r.config),
+      `views[${s}].config must be an object`
+    );
+}
+function A(t, e) {
+  const s = new Set(e.views.map((r) => r.id));
+  for (const r of t.scenes)
+    for (const i of r.blocks)
+      i.type === "view" && n(
+        s.has(i.view),
+        `scene ${r.id} references unknown view ${i.view}`
+      );
+}
+function I(t, e, s, r = []) {
+  for (const i of [e, ...r, s])
+    if (t[i])
+      return t[i];
+  return Object.values(t).find(Boolean) ?? "";
+}
+function k(t, e, s = {}) {
+  return w(t, s), T(e), A(t, e), { story: t, views: e };
+}
+function q(t) {
+  return t.blocks.find((e) => e.type === "view")?.view;
+}
+function P(t, e) {
+  return {
+    href: t.url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    textContent: e
+  };
+}
+class V {
+  constructor(e, s = {}) {
+    this.update = e, this.revealTimer = null, this.hideTimer = null, this.shownAt = 0, this.visible = !1, this.revealDelayMs = s.revealDelayMs ?? 120, this.minimumVisibleMs = s.minimumVisibleMs ?? 450;
+  }
+  show() {
+    this.clearHideTimer(), !(this.visible || this.revealTimer !== null) && (this.revealTimer = setTimeout(() => {
+      this.revealTimer = null, this.visible = !0, this.shownAt = Date.now(), this.update(!0);
+    }, this.revealDelayMs));
+  }
+  hide(e = !1) {
+    if (this.clearRevealTimer(), this.clearHideTimer(), !this.visible)
+      return;
+    const s = e ? 0 : Math.max(0, this.minimumVisibleMs - (Date.now() - this.shownAt));
+    if (s === 0) {
+      this.setVisible(!1);
+      return;
+    }
+    this.hideTimer = setTimeout(() => {
+      this.hideTimer = null, this.setVisible(!1);
+    }, s);
+  }
+  setVisible(e) {
+    this.visible !== e && (this.visible = e, this.update(e));
+  }
+  clearRevealTimer() {
+    this.revealTimer !== null && (clearTimeout(this.revealTimer), this.revealTimer = null);
+  }
+  clearHideTimer() {
+    this.hideTimer !== null && (clearTimeout(this.hideTimer), this.hideTimer = null);
+  }
+}
+function _(t, e, s) {
+  return s <= 0 ? 0 : Math.max(0, Math.min(s - 1, t + e));
+}
+function $(t) {
+  return t.blocks.some(
+    (e) => e.type === "copy" && e.showTime === !0
+  );
+}
+class L {
+  constructor() {
+    this.enabled = !1;
+  }
+  get visible() {
+    return this.enabled;
+  }
+  setScene(e) {
+    this.enabled = $(e);
+  }
+  accept(e) {
+    return this.enabled && Number.isFinite(e) ? e : null;
+  }
+}
+function F(t, e, s, r) {
+  if (s <= 1)
+    return { index: 0, direction: 1 };
+  const i = t + e;
+  if (i >= 0 && i < s)
+    return { index: i, direction: e };
+  if (r === "loop")
+    return { index: e === 1 ? 0 : s - 1, direction: e };
+  const o = e === 1 ? -1 : 1;
+  return { index: t + o, direction: o };
+}
+function j(t, e) {
+  if (t.length === 0)
+    return 0;
+  let s = 0;
+  for (let r = 1; r < t.length && !(Date.parse(t[r]) > e); r++)
+    s = r;
+  return s;
+}
+class C {
+  constructor() {
+    this.viewFactories = /* @__PURE__ */ new Map(), this.viewAdapters = /* @__PURE__ */ new Map(), this.widgets = /* @__PURE__ */ new Map();
+  }
+  registerViewType(e, s) {
+    if (this.viewFactories.has(e))
+      throw new Error(`View type already registered: ${e}`);
+    return this.viewFactories.set(e, s), this;
+  }
+  registerWidgetType(e, s) {
+    if (this.widgets.has(e))
+      throw new Error(`Widget type already registered: ${e}`);
+    return this.widgets.set(e, s), this;
+  }
+  getViewAdapter(e) {
+    const s = this.viewAdapters.get(e);
+    if (s)
+      return s;
+    const r = this.viewFactories.get(e);
+    if (!r)
+      throw new Error(`Unregistered view type: ${e}`);
+    const i = r();
+    return this.viewAdapters.set(e, i), i;
+  }
+  getWidget(e) {
+    const s = this.widgets.get(e);
+    if (!s)
+      throw new Error(`Unregistered widget type: ${e}`);
+    return s;
+  }
+  destroy() {
+    for (const e of this.viewAdapters.values())
+      e.destroy();
+    this.viewAdapters.clear();
+  }
+}
+const M = {
+  request: (t) => requestAnimationFrame(t),
+  cancel: (t) => cancelAnimationFrame(t)
+};
+class N {
+  constructor(e, s = M) {
+    this.callbacks = e, this.frames = s, this.active = !1, this.resumeAfterInteraction = !1, this.latestTime = null, this.appliedTime = null, this.frame = null;
+  }
+  get interacting() {
+    return this.active;
+  }
+  begin() {
+    this.active || (this.active = !0, this.resumeAfterInteraction = this.callbacks.isPlaying(), this.latestTime = null, this.appliedTime = null, this.callbacks.pause());
+  }
+  request(e) {
+    !this.active || !Number.isFinite(e) || (this.latestTime = e, this.callbacks.present(e), this.frame === null && (this.frame = this.frames.request(() => {
+      this.frame = null, !(!this.active || this.latestTime === null) && this.applyLatest();
+    })));
+  }
+  end() {
+    if (!this.active)
+      return;
+    this.cancelFrame(), this.latestTime !== null && this.latestTime !== this.appliedTime && this.applyLatest();
+    const e = this.latestTime, s = this.resumeAfterInteraction;
+    this.active = !1, this.latestTime = null, this.appliedTime = null, this.resumeAfterInteraction = !1, this.callbacks.finish(e, s);
+  }
+  /** Abandons pending work without resuming playback (for navigation/cleanup). */
+  cancel() {
+    this.cancelFrame(), this.active = !1, this.latestTime = null, this.appliedTime = null, this.resumeAfterInteraction = !1;
+  }
+  applyLatest() {
+    const e = this.latestTime;
+    e !== null && (this.appliedTime = e, this.callbacks.apply(e));
+  }
+  cancelFrame() {
+    this.frame !== null && (this.frames.cancel(this.frame), this.frame = null);
+  }
+}
+class R {
+  constructor(e = console.error) {
+    this.onCleanupError = e, this.generation = 0, this.controller = null, this.cleanup = null;
+  }
+  begin() {
+    this.cancel();
+    const e = this.generation, s = new AbortController();
+    return this.controller = s, {
+      signal: s.signal,
+      isCurrent: () => this.generation === e && !s.signal.aborted,
+      runIfCurrent: (r) => this.generation !== e || s.signal.aborted ? !1 : (r(), !0),
+      settle: (r) => {
+        if (r) {
+          if (this.generation !== e || s.signal.aborted) {
+            this.invoke(r);
+            return;
+          }
+          this.cleanup = r;
+        }
+      }
+    };
+  }
+  cancel() {
+    this.generation++, this.controller?.abort(), this.controller = null;
+    const e = this.cleanup;
+    this.cleanup = null, e && this.invoke(e);
+  }
+  invoke(e) {
+    try {
+      e();
+    } catch (s) {
+      this.onCleanupError(s);
+    }
+  }
+}
+function x(t, e, s = 7) {
+  const r = (c, h) => Array.from({ length: h - c + 1 }, (u, g) => c + g), i = Math.max(0, Math.floor((s - 5) / 2)), o = 2 * i + 5;
+  if (t <= o)
+    return r(0, t - 1);
+  const a = Math.max(0, Math.min(t - 1, e)), l = o - 2;
+  return a <= i + 2 ? [...r(0, l - 1), "gap", t - 1] : a >= t - 3 - i ? [0, "gap", ...r(t - l, t - 1)] : [0, "gap", ...r(a - i, a + i), "gap", t - 1];
+}
+function H(t = customElements, e = "story-pager") {
+  if (t.get(e))
+    return;
+  class s extends HTMLElement {
+    constructor() {
+      super(), this.count = 0, this.labels = null, this.current = 0, this.isPlaying = !1, this.fill = 0, this.isDisabled = !1;
+      const i = this.ownerDocument, o = (a, l) => {
+        const c = i.createElement("button");
+        return c.type = "button", c.className = a, c.addEventListener("click", l), c;
+      };
+      this.nav = i.createElement("nav"), this.nav.className = "story-pager__nav", this.previous = o(
+        "story-pager__previous",
+        () => this.request(this.current - 1)
+      ), this.next = o(
+        "story-pager__next",
+        () => this.request(this.current + 1)
+      ), this.toggle = o(
+        "story-pager__toggle",
+        () => this.dispatchEvent(new Event("story-pager-toggle", { bubbles: !0 }))
+      ), this.steps = i.createElement("ol"), this.steps.className = "story-pager__steps", this.steps.addEventListener("click", (a) => {
+        const l = a.target.closest(
+          "[data-step]"
+        );
+        l && this.request(Number(l.dataset.step));
+      }), this.nav.append(this.previous, this.steps, this.next, this.toggle);
+    }
+    connectedCallback() {
+      this.nav.isConnected || this.append(this.nav);
+    }
+    configure(i, o) {
+      this.count = i, this.labels = o, this.nav.setAttribute("aria-label", o.navigation), this.previous.setAttribute("aria-label", o.previous), this.next.setAttribute("aria-label", o.next), this.render();
+    }
+    get index() {
+      return this.current;
+    }
+    set index(i) {
+      this.current = i, this.fill = 0, this.render();
+    }
+    get playing() {
+      return this.isPlaying;
+    }
+    set playing(i) {
+      this.isPlaying = i, this.syncToggle();
+    }
+    get progress() {
+      return this.fill;
+    }
+    set progress(i) {
+      this.fill = Math.max(0, Math.min(1, i)), this.steps.querySelector('[aria-current="step"]')?.style.setProperty("--progress", String(this.fill));
+    }
+    get disabled() {
+      return this.isDisabled;
+    }
+    set disabled(i) {
+      this.isDisabled = i, this.render();
+    }
+    request(i) {
+      this.isDisabled || i < 0 || i >= this.count || this.dispatchEvent(
+        new CustomEvent("story-pager-navigate", {
+          bubbles: !0,
+          detail: { index: i }
+        })
+      );
+    }
+    syncToggle() {
+      const i = this.labels;
+      this.toggle.classList.toggle("is-playing", this.isPlaying), this.toggle.setAttribute("aria-pressed", String(this.isPlaying)), i && this.toggle.setAttribute(
+        "aria-label",
+        this.isPlaying ? i.pause : i.play
+      );
+    }
+    render() {
+      const i = this.labels;
+      if (!i)
+        return;
+      const o = this.ownerDocument, a = o.activeElement, l = a instanceof HTMLElement && this.steps.contains(a) ? a.dataset.step : void 0;
+      this.steps.replaceChildren(
+        ...x(this.count, this.current).map((c) => {
+          const h = o.createElement("li");
+          if (c === "gap")
+            return h.className = "story-pager__gap", h.textContent = "…", h.setAttribute("aria-hidden", "true"), h;
+          const u = o.createElement("button");
+          return u.type = "button", u.className = "story-pager__step", u.dataset.step = String(c), u.textContent = String(c + 1), u.setAttribute("aria-label", i.step(c)), u.disabled = this.isDisabled, c === this.current && (u.setAttribute("aria-current", "step"), u.style.setProperty("--progress", String(this.fill))), h.append(u), h;
+        })
+      ), l !== void 0 && this.steps.querySelector(`[data-step="${l}"]`)?.focus(), this.previous.disabled = this.isDisabled || this.current <= 0, this.next.disabled = this.isDisabled || this.current >= this.count - 1, this.toggle.disabled = this.isDisabled, this.syncToggle();
+    }
+  }
+  t.define(e, s);
+}
+class O {
+  constructor(e, s = () => performance.now()) {
+    this.onDone = e, this.now = s, this.durationMs = 0, this.elapsedMs = 0, this.startedAt = null, this.timer = null;
+  }
+  /** Restart from zero; runs at once unless `paused`. */
+  start(e, s = !1) {
+    this.stop(), this.durationMs = Math.max(0, e), this.elapsedMs = 0, s || this.resume();
+  }
+  get running() {
+    return this.startedAt !== null;
+  }
+  /** Elapsed share of the duration, 0–1. */
+  get progress() {
+    if (this.durationMs <= 0)
+      return 0;
+    const e = this.startedAt === null ? 0 : this.now() - this.startedAt;
+    return Math.min(1, (this.elapsedMs + e) / this.durationMs);
+  }
+  pause() {
+    this.startedAt !== null && (this.elapsedMs += this.now() - this.startedAt, this.startedAt = null, this.clear());
+  }
+  resume() {
+    if (this.startedAt !== null || this.durationMs <= 0)
+      return;
+    const e = this.durationMs - this.elapsedMs;
+    e <= 0 || (this.startedAt = this.now(), this.timer = setTimeout(() => {
+      this.timer = null, this.elapsedMs = this.durationMs, this.startedAt = null, this.onDone();
+    }, e));
+  }
+  /** Stop without firing; the progress drops to zero. */
+  stop() {
+    this.clear(), this.startedAt = null, this.elapsedMs = 0;
+  }
+  clear() {
+    this.timer !== null && (clearTimeout(this.timer), this.timer = null);
+  }
+}
+function U(t) {
+  const e = new URLSearchParams(t.replace(/^#/, "")), s = {}, r = e.get("s");
+  r && (s.scene = r);
+  const i = e.get("paused");
+  return (i === "1" || i === "0") && (s.paused = i === "1"), s;
+}
+function z(t, e) {
+  const s = new URLSearchParams({ s: t });
+  return e && s.set("paused", "1"), s.toString();
+}
+const f = 1;
+function S(t) {
+  const e = Math.min(100 - f, Math.max(0, t * 100)), s = 100 - f - e;
+  return `-${m(e)}% 0px -${m(s)}% 0px`;
+}
+const m = (t) => Math.round(t * 100) / 100, E = (t, e) => new IntersectionObserver(t, e);
+class B {
+  /**
+   * @param sections Scene sections in document order.
+   * @param onActivate Called once each time another section becomes active.
+   */
+  constructor(e, s, r = {}) {
+    this.sections = e, this.onActivate = s, this.crossing = /* @__PURE__ */ new Set(), this.activeIndex = -1;
+    const i = r.createObserver ?? E;
+    this.observer = i((o) => this.update(o), {
+      root: r.root ?? null,
+      rootMargin: S(r.line ?? 0.5),
+      threshold: 0
+    });
+    for (const o of e)
+      this.observer.observe(o);
+  }
+  /** Index of the active section, -1 before the first one is reached. */
+  get active() {
+    return this.activeIndex;
+  }
+  destroy() {
+    this.observer.disconnect(), this.crossing.clear();
+  }
+  update(e) {
+    for (const r of e) {
+      const i = this.sections.indexOf(r.target);
+      i < 0 || (r.isIntersecting ? this.crossing.add(i) : this.crossing.delete(i));
+    }
+    if (this.crossing.size === 0)
+      return;
+    const s = Math.max(...this.crossing);
+    s !== this.activeIndex && (this.activeIndex = s, this.onActivate(s, this.sections[s]));
+  }
+}
+export {
+  v as DEFAULT_STORY_LAYOUTS,
+  V as LoadingIndicator,
+  C as StoryRegistry,
+  O as StorySceneTimer,
+  B as StoryScroller,
+  N as StoryTimeInteraction,
+  L as StoryTimePresentation,
+  R as StoryWidgetLifecycle,
+  S as activationMargin,
+  F as advanceStorySequence,
+  H as defineStoryPager,
+  D as initializeAfterStaticRender,
+  _ as nextStoryIndex,
+  k as parseStoryDocuments,
+  U as parseStoryHash,
+  I as resolveLocalizedText,
+  $ as sceneShowsTime,
+  q as sceneViewId,
+  j as sequenceIndexAtOrBefore,
+  P as storyExternalLinkAttributes,
+  z as storyHash,
+  x as storyPagerItems,
+  w as validateStoryDocument,
+  A as validateStoryReferences,
+  T as validateViewsDocument
+};