@warpgogol/werkstatt-shared 0.13.0 → 0.14.1

package/src/share/schemas/tests/section-shell.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import {
+  sectionDensitySchema,
+  sectionToneSchema,
+  sectionContainerVariantSchema,
+  sectionShellAnimatedSchema,
+} from "../section-shell.ts";
+
+describe("sectionDensitySchema", () => {
+  it("accepts valid densities", () => {
+    for (const d of ["compact", "normal", "spacious", "flush"]) {
+      expect(sectionDensitySchema.parse(d)).toBe(d);
+    }
+  });
+
+  it("rejects invalid density", () => {
+    expect(() => sectionDensitySchema.parse("loose")).toThrow();
+  });
+});
+
+describe("sectionToneSchema", () => {
+  it("accepts valid tones", () => {
+    for (const t of ["default", "warning", "success", "muted"]) {
+      expect(sectionToneSchema.parse(t)).toBe(t);
+    }
+  });
+});
+
+describe("sectionContainerVariantSchema", () => {
+  it("accepts valid variants", () => {
+    for (const v of ["default", "narrow", "full"]) {
+      expect(sectionContainerVariantSchema.parse(v)).toBe(v);
+    }
+  });
+});
+
+describe("sectionShellAnimatedSchema", () => {
+  it("accepts valid values", () => {
+    expect(sectionShellAnimatedSchema.parse("none")).toBe("none");
+    expect(sectionShellAnimatedSchema.parse("reveal")).toBe("reveal");
+  });
+});

package/src/share/schemas/tests/section-stats.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from "vitest";
+import { statItemSchema } from "../section-stats.ts";
+
+describe("statItemSchema", () => {
+  it("accepts a valid stat item", () => {
+    const result = statItemSchema.safeParse({
+      label: "Users",
+      value: "10K",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects empty object", () => {
+    const result = statItemSchema.safeParse({});
+    expect(result.success).toBe(false);
+  });
+});

package/src/share/schemas/tests/site-background.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { siteBackgroundLayerSchema } from "../site-background.ts";
+
+describe("siteBackgroundLayerSchema", () => {
+  it("accepts color kind", () => {
+    const result = siteBackgroundLayerSchema.safeParse({ kind: "color" });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts image kind with imageName", () => {
+    const result = siteBackgroundLayerSchema.safeParse({
+      kind: "image",
+      imageName: "bg",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts gradient kind with required fields", () => {
+    const result = siteBackgroundLayerSchema.safeParse({
+      kind: "gradient",
+      direction: "vertical",
+      stops: [
+        { at: 0, color: "#000" },
+        { at: 1, color: "#fff" },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects invalid kind", () => {
+    expect(() => siteBackgroundLayerSchema.parse({ kind: "video" })).toThrow();
+  });
+});

package/src/share/schemas/tests/standard-list-item.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { standardListItemSchema } from "../standard-list-item.ts";
+
+describe("standardListItemSchema", () => {
+  it("accepts a valid list item", () => {
+    const result = standardListItemSchema.safeParse({
+      text: "Test item",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects empty object", () => {
+    const result = standardListItemSchema.safeParse({});
+    expect(result.success).toBe(false);
+  });
+});

package/src/share/scripts/external-link-qr.ts

@@ -85,7 +85,7 @@ export function initExternalLinkQr(options?: ExternalLinkQrOptions): void {
 
   async function generateQr(href: string): Promise<void> {
     if (!canvas) return;
-    const { toCanvas } = await import("qrcode");
+    const { toCanvas } = await import("qrcode/lib/browser.js");
     await toCanvas(canvas, href, {
       width: 256,
       margin: 2,
@@ -189,8 +189,16 @@ export function initExternalLinkQr(options?: ExternalLinkQrOptions): void {
     canvas.addEventListener("click", () => {
       const link = openLinkBtn?.getAttribute("href");
       if (link) window.open(link, "_blank", "noopener,noreferrer");
+      closeModal();
+    });
+  }
+
+  if (openLinkBtn) {
+    openLinkBtn.addEventListener("click", () => {
+      closeModal();
     });
   }
 
   attachTriggers();
+  modal.setAttribute("data-external-link-qr-modal-initialized", "true");
 }

package/src/share/scripts/gsap-counter.ts

@@ -165,4 +165,6 @@ export async function initGsapCounter(options: GsapCounterOptions = {}): Promise
       }
     });
   });
+
+  document.documentElement.setAttribute("data-gsap-counter-initialized", "true");
 }

package/src/share/scripts/inline-number-animation.ts

@@ -117,4 +117,6 @@ export async function initInlineNumberAnimation(
       },
     });
   });
+
+  document.documentElement.setAttribute("data-inline-number-initialized", "true");
 }

package/src/share/scripts/live-photos.ts

@@ -247,4 +247,6 @@ export async function initLivePhotos(options: LivePhotosOptions = {}): Promise<v
       }
     });
   }
+
+  document.documentElement.setAttribute("data-live-photos-initialized", "true");
 }

package/src/share/scripts/tests/external-link-qr.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initExternalLinkQr } from "../external-link-qr.ts";
+
+describe("initExternalLinkQr", () => {
+  it("is a function", () => {
+    expect(typeof initExternalLinkQr).toBe("function");
+  });
+});

package/src/share/scripts/tests/external-links.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { applyExternalLinkBehavior } from "../external-links.ts";
+
+describe("applyExternalLinkBehavior", () => {
+  beforeEach(() => {
+    vi.stubGlobal("document", {
+      querySelectorAll: vi.fn(() => []),
+    });
+    vi.stubGlobal("window", {
+      location: { href: "https://example.com/", origin: "https://example.com" },
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("is a function", () => {
+    expect(typeof applyExternalLinkBehavior).toBe("function");
+  });
+
+  it("does not throw when no anchors exist", () => {
+    expect(() => applyExternalLinkBehavior()).not.toThrow();
+  });
+});

package/src/share/scripts/tests/gsap-counter.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initGsapCounter } from "../gsap-counter.ts";
+
+describe("initGsapCounter", () => {
+  it("is an async function", () => {
+    expect(typeof initGsapCounter).toBe("function");
+  });
+});

package/src/share/scripts/tests/gsap-mountain-journey.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initMountainJourneyAnimation } from "../gsap-mountain-journey.ts";
+
+describe("initMountainJourneyAnimation", () => {
+  it("is an async function", () => {
+    expect(typeof initMountainJourneyAnimation).toBe("function");
+  });
+});

package/src/share/scripts/tests/gsap-parallax.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initGsapParallax } from "../gsap-parallax.ts";
+
+describe("initGsapParallax", () => {
+  it("is an async function", () => {
+    expect(typeof initGsapParallax).toBe("function");
+  });
+});

package/src/share/scripts/tests/gsap-reveal.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initGsapReveal } from "../gsap-reveal.ts";
+
+describe("initGsapReveal", () => {
+  it("is an async function", () => {
+    expect(typeof initGsapReveal).toBe("function");
+  });
+});

package/src/share/scripts/tests/gsap-stagger.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initGsapStagger } from "../gsap-stagger.ts";
+
+describe("initGsapStagger", () => {
+  it("is an async function", () => {
+    expect(typeof initGsapStagger).toBe("function");
+  });
+});

package/src/share/scripts/tests/inline-number-animation.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initInlineNumberAnimation } from "../inline-number-animation.ts";
+
+describe("initInlineNumberAnimation", () => {
+  it("is an async function", () => {
+    expect(typeof initInlineNumberAnimation).toBe("function");
+  });
+});

package/src/share/scripts/tests/lenis.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initLenis } from "../lenis.ts";
+
+describe("initLenis", () => {
+  it("is an async function", () => {
+    expect(typeof initLenis).toBe("function");
+  });
+});

package/src/share/scripts/tests/live-photos.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initLivePhotos } from "../live-photos.ts";
+
+describe("initLivePhotos", () => {
+  it("is an async function", () => {
+    expect(typeof initLivePhotos).toBe("function");
+  });
+});

package/src/share/scripts/tests/lordicon.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { initLordIconOnDemand } from "../lordicon.ts";
+
+describe("initLordIconOnDemand", () => {
+  it("is a function", () => {
+    expect(typeof initLordIconOnDemand).toBe("function");
+  });
+});

package/src/share/scripts/tests/orchestrator.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import { runStandardLayoutOrchestration } from "../orchestrator.ts";
+
+describe("runStandardLayoutOrchestration", () => {
+  it("is an async function", () => {
+    expect(typeof runStandardLayoutOrchestration).toBe("function");
+  });
+});

package/src/share/scripts/tests/scheduler.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { scheduleTask } from "../scheduler.ts";
+
+describe("scheduleTask", () => {
+  beforeEach(() => {
+    vi.stubGlobal("window", {
+      requestIdleCallback: vi.fn(),
+      setTimeout: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("is a function", () => {
+    expect(typeof scheduleTask).toBe("function");
+  });
+
+  it("does not throw when scheduling a task", () => {
+    expect(() => scheduleTask(() => undefined)).not.toThrow();
+  });
+});

package/src/share/scripts/video-player.test.ts

@@ -0,0 +1,210 @@
+/*
+<MODULE_CONTRACT>
+<purpose>RFC-0950: tests for video-player runtime — conditional Plyr controls, viewport play/pause, HLS+autoplay timing.</purpose>
+<keywords>RFC-0950, video-player, test</keywords>
+</MODULE_CONTRACT>
+<CHANGE_SUMMARY><item>RFC-0950: initial video-player tests.</item></CHANGE_SUMMARY>
+*/
+
+import { test, expect, vi, beforeEach, afterEach } from "vitest";
+
+// ── Mocks ───────────────────────────────────────────────────────────────────
+
+vi.mock("plyr", () => ({
+  default: vi.fn(() => ({ destroy: vi.fn() })),
+}));
+
+vi.mock("hls.js/light", () => {
+  const hlsRef = { current: null as any };
+  const fn = vi.fn(function Hls() {
+    return hlsRef.current;
+  });
+  const Hls = Object.assign(fn, {
+    isSupported: vi.fn(() => true),
+    _hlsRef: hlsRef,
+  });
+  return { default: Hls };
+});
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function createMockVideo(attrs: Record<string, string | undefined> = {}): any {
+  const video: any = {
+    dataset: {},
+    canPlayType: vi.fn(() => ""),
+    play: vi.fn(() => Promise.resolve()),
+    pause: vi.fn(),
+    load: vi.fn(),
+    insertBefore: vi.fn(),
+    firstChild: null,
+  };
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v !== undefined) video.dataset[k] = v;
+  }
+  return video;
+}
+
+let observerCallbacks: ((
+  entries: { isIntersecting: boolean; target: any }[],
+  obs: { unobserve: () => void },
+) => void)[] = [];
+let observerOptions: { threshold?: number; rootMargin?: string }[] = [];
+
+class MockIntersectionObserver {
+  callback: (
+    entries: { isIntersecting: boolean; target: any }[],
+    obs: { unobserve: () => void },
+  ) => void;
+  options: { threshold?: number; rootMargin?: string };
+  constructor(
+    cb: (
+      entries: { isIntersecting: boolean; target: any }[],
+      obs: { unobserve: () => void },
+    ) => void,
+    opts: { threshold?: number; rootMargin?: string },
+  ) {
+    this.callback = cb;
+    this.options = opts;
+    observerCallbacks.push(cb);
+    observerOptions.push(opts);
+  }
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+}
+
+// ── Setup / teardown ────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  observerCallbacks = [];
+  observerOptions = [];
+  (globalThis as any).IntersectionObserver = MockIntersectionObserver;
+  (globalThis as any).window = globalThis;
+  (globalThis as any).document = {
+    querySelectorAll: vi.fn(() => []),
+    createElement: vi.fn((tag: string) => ({ tagName: tag.toUpperCase() })),
+  };
+});
+
+afterEach(() => {
+  delete (globalThis as any).IntersectionObserver;
+  delete (globalThis as any).window;
+  delete (globalThis as any).document;
+  vi.restoreAllMocks();
+});
+
+async function triggerUpgrade(video: any): Promise<void> {
+  const { initVideoPlayers } = await import("../scripts/video-player.ts");
+  vi.spyOn(globalThis.document as any, "querySelectorAll").mockReturnValue([video]);
+  await initVideoPlayers();
+
+  expect(observerCallbacks.length).toBeGreaterThanOrEqual(1);
+  observerCallbacks[0]!([{ isIntersecting: true, target: video }], { unobserve: vi.fn() });
+  await new Promise((r) => setTimeout(r, 100));
+}
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+test("initVideoPlayers: returns early when no [data-video-player] elements", async () => {
+  const querySelectorAll = vi.spyOn(globalThis.document as any, "querySelectorAll");
+  querySelectorAll.mockReturnValue([]);
+  const { initVideoPlayers } = await import("../scripts/video-player.ts");
+  await initVideoPlayers();
+  expect(observerCallbacks.length).toBe(0);
+  querySelectorAll.mockRestore();
+});
+
+test("upgrade: data-controls='false' configures Plyr with only ['mute']", async () => {
+  const video = createMockVideo({ controls: "false" });
+  await triggerUpgrade(video);
+
+  const Plyr = (await import("plyr")).default;
+  expect(Plyr).toHaveBeenCalledWith(video, expect.objectContaining({ controls: ["mute"] }));
+});
+
+test("upgrade: without data-controls uses full Plyr controls list", async () => {
+  const video = createMockVideo({});
+  await triggerUpgrade(video);
+
+  const Plyr = (await import("plyr")).default;
+  expect(Plyr).toHaveBeenCalledWith(
+    video,
+    expect.objectContaining({
+      controls: expect.arrayContaining([
+        "play-large",
+        "play",
+        "progress",
+        "current-time",
+        "mute",
+        "volume",
+        "captions",
+        "fullscreen",
+      ]),
+    }),
+  );
+});
+
+test("upgrade: data-autoplay='true' sets up viewport play/pause observer with threshold 0.5", async () => {
+  const video = createMockVideo({ autoplay: "true" });
+  await triggerUpgrade(video);
+
+  const playPauseOpts = observerOptions.find((o) => o.threshold === 0.5);
+  expect(
+    playPauseOpts,
+    "play/pause observer with threshold 0.5 must be created when data-autoplay is true",
+  ).toBeDefined();
+});
+
+test("upgrade: data-autoplay='true' with HLS waits for MEDIA_ATTACHED before play()", async () => {
+  const video = createMockVideo({ autoplay: "true", hls: "https://example.com/stream.m3u8" });
+
+  const hlsInstance = {
+    loadSource: vi.fn(),
+    attachMedia: vi.fn(),
+    destroy: vi.fn(),
+    on: vi.fn(),
+  };
+  const Hls = (await import("hls.js/light")).default as any;
+  Hls._hlsRef.current = hlsInstance;
+
+  await triggerUpgrade(video);
+
+  expect(Hls).toHaveBeenCalled();
+  expect(hlsInstance.attachMedia).toHaveBeenCalledWith(video);
+
+  const attachedCall = hlsInstance.on.mock.calls.find((c: any[]) => c[0] === "hls.MEDIA_ATTACHED");
+  expect(attachedCall, "Hls must register a MEDIA_ATTACHED listener before play()").toBeDefined();
+  attachedCall![1]();
+
+  await new Promise((r) => setTimeout(r, 20));
+  expect(video.play).toHaveBeenCalled();
+});
+
+test("upgrade: data-autoplay='true' without HLS calls play() directly", async () => {
+  const video = createMockVideo({ autoplay: "true" });
+  await triggerUpgrade(video);
+
+  expect(video.play).toHaveBeenCalled();
+});
+
+test("upgrade: skip already-upgraded videos (data-video-player-ready='true')", async () => {
+  const video = createMockVideo({ videoPlayerReady: "true" });
+  await triggerUpgrade(video);
+
+  const Plyr = (await import("plyr")).default;
+  expect(Plyr).not.toHaveBeenCalled();
+});
+
+test("upgrade: viewport observer pauses video when scrolled out", async () => {
+  const video = createMockVideo({ autoplay: "true" });
+  await triggerUpgrade(video);
+
+  const playPauseIdx = observerOptions.findIndex((o) => o.threshold === 0.5);
+  expect(playPauseIdx).toBeGreaterThan(-1);
+
+  observerCallbacks[playPauseIdx]!([{ isIntersecting: false, target: video }], {
+    unobserve: vi.fn(),
+  });
+  expect(video.pause).toHaveBeenCalled();
+});

package/src/share/scripts/video-player.ts

@@ -15,6 +15,7 @@
 </MODULE_CONTRACT>
 <CHANGE_SUMMARY>
   <item>RFC-0210: introduced the lazy feature-video player runtime.</item>
+  <item>RFC-0950: added viewport play/pause observer, conditional Plyr controls, and HLS+autoplay timing.</item>
 </CHANGE_SUMMARY>
 */
 
@@ -33,9 +34,11 @@ async function upgrade(video: HTMLVideoElement): Promise<void> {
   video.dataset.videoPlayerReady = "true";
 
   const hlsUrl = video.dataset.hls;
+  const autoplay = video.dataset.autoplay === "true";
+  const controlsDisabled = video.dataset.controls === "false";
   let mode: "file" | "stream" = "file";
   let impl: "native" | "hlsjs" | "progressive" = "progressive";
-  let hlsInstance: { destroy: () => void } | null = null;
+  let hlsInstance: unknown = null;
 
   if (hlsUrl) {
     if (nativeHlsSupported(video)) {
@@ -70,24 +73,81 @@ async function upgrade(video: HTMLVideoElement): Promise<void> {
   // Brand the UI with Plyr (the native controls remain the fallback if this fails).
   try {
     const { default: Plyr } = await import("plyr");
-    const player = new Plyr(video, {
-      controls: [
-        "play-large",
-        "play",
-        "progress",
-        "current-time",
-        "mute",
-        "volume",
-        "captions",
-        "fullscreen",
-      ],
-    });
+    const plyrControls = controlsDisabled
+      ? ["mute"]
+      : [
+          "play-large",
+          "play",
+          "progress",
+          "current-time",
+          "mute",
+          "volume",
+          "captions",
+          "fullscreen",
+        ];
+    const player = new Plyr(video, { controls: plyrControls });
     // Keep hls.js bound across Plyr's internal media swaps.
     void player;
     void hlsInstance;
   } catch {
     /* Plyr unavailable — native controls already present */
   }
+
+  // RFC-0950: viewport play/pause for autoplay-enabled videos.
+  if (autoplay) {
+    await playWhenReady(
+      video,
+      hlsInstance as { on: (event: string, listener: () => void) => void } | null,
+    );
+    setupViewportObserver(video);
+  }
+}
+
+async function playWhenReady(
+  video: HTMLVideoElement,
+  hls: { on: (event: string, listener: () => void) => void } | null,
+): Promise<void> {
+  if (hls) {
+    // Wait for hls.js to attach media before calling play().
+    await new Promise<void>((resolve) => {
+      let resolved = false;
+      const timeout = setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+        }
+      }, 200);
+      hls.on("hls.MEDIA_ATTACHED", () => {
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeout);
+          resolve();
+        }
+      });
+    });
+  }
+  try {
+    await video.play();
+  } catch {
+    /* Autoplay may be blocked by browser policy — user can interact via controls. */
+  }
+}
+
+function setupViewportObserver(video: HTMLVideoElement): void {
+  if (!("IntersectionObserver" in window)) return;
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          void video.play().catch(() => {});
+        } else {
+          video.pause();
+        }
+      }
+    },
+    { threshold: 0.5 },
+  );
+  observer.observe(video);
 }
 
 export async function initVideoPlayers(_options: VideoPlayersOptions = {}): Promise<void> {