@aethervtt/shard-platform-web 0.0.1 → 0.2.0

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export interface WebPlatformOptions {
 }
 export declare function createWebPlatform(options?: WebPlatformOptions): Platform;
 export { createWebAudioBackend, type WebAudioBackend } from './audio.js';
-export { createDomInputSource } from './input.js';
+export { type AudioRenderPlan, audioBufferWav, measureAudioBuffer, renderAudioPreview, } from './audio-preview.js';
+export { createDomInputSource, type DomInputOptions } from './input.js';
+export { createWebPerformance } from './performance.js';
 export { createIndexedDbStorage } from './storage.js';
 export { createWebWorkers } from './workers.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { ShardError } from "@aethervtt/shard-core";
 import { createWebAudioBackend } from "./audio.js";
+import { createWebPerformance } from "./performance.js";
 import { createIndexedDbStorage } from "./storage.js";
 import { createWebWorkers } from "./workers.js";
 function createWebPlatform(options = {}) {
@@ -20,9 +21,22 @@ function createWebPlatform(options = {}) {
     return res;
   };
   const fs = {
+    resolveUrl: (path) => new URL(path, baseUrl).href,
     writable: false,
     readText: async (path) => (await fetchOk(path)).text(),
     readBytes: async (path) => new Uint8Array(await (await fetchOk(path)).arrayBuffer()),
+    readRange: async (path, offset, length) => {
+      const res = await fetch(new URL(path, baseUrl), {
+        headers: { Range: `bytes=${offset}-${offset + length - 1}` }
+      });
+      if (!res.ok) {
+        throw new ShardError("platform/fs-not-found", `Failed to fetch "${path}" (${res.status})`, {
+          path
+        });
+      }
+      const bytes = new Uint8Array(await res.arrayBuffer());
+      return res.status === 206 ? bytes : bytes.subarray(offset, offset + length);
+    },
     writeText: async (path) => readOnly(path),
     writeBytes: async (path) => readOnly(path),
     exists: async (path) => (await fetch(new URL(path, baseUrl), { method: "HEAD" })).ok
@@ -42,6 +56,7 @@ function createWebPlatform(options = {}) {
     },
     fs,
     storage: createIndexedDbStorage(options.storageName),
+    performance: createWebPerformance(),
     clock: { now: () => performance.now() },
     log: {
       log: (level, message, data) => console[level](`[shard] ${message}`, data ?? "")
@@ -49,13 +64,23 @@ function createWebPlatform(options = {}) {
   };
 }
 import { createWebAudioBackend as createWebAudioBackend2 } from "./audio.js";
+import {
+  audioBufferWav,
+  measureAudioBuffer,
+  renderAudioPreview
+} from "./audio-preview.js";
 import { createDomInputSource } from "./input.js";
+import { createWebPerformance as createWebPerformance2 } from "./performance.js";
 import { createIndexedDbStorage as createIndexedDbStorage2 } from "./storage.js";
 import { createWebWorkers as createWebWorkers2 } from "./workers.js";
 export {
+  audioBufferWav,
   createDomInputSource,
   createIndexedDbStorage2 as createIndexedDbStorage,
   createWebAudioBackend2 as createWebAudioBackend,
+  createWebPerformance2 as createWebPerformance,
   createWebPlatform,
-  createWebWorkers2 as createWebWorkers
+  createWebWorkers2 as createWebWorkers,
+  measureAudioBuffer,
+  renderAudioPreview
 };

package/dist/input.d.ts

@@ -1,6 +1,19 @@
-import type { InputSource } from '@aethervtt/shard-platform';
+import { type InputSource } from '@aethervtt/shard-platform';
+export interface DomInputOptions {
+    /**
+     * The element's context menu. 'block' (default): never shown, for a game that owns its page.
+     * 'pass': shown unless a control drags with the right button, for a host with menus of its own
+     * (0060).
+     */
+    contextMenu?: 'block' | 'pass';
+}
 /**
- * DOM input: pointer and wheel events on `element` (positions in its backing pixels), keys and
- * focus on the window, gamepads polled on drain. Works in browsers and Tauri webviews alike.
+ * DOM input: pointer and wheel events on `element` (positions in its backing pixels, and in CSS
+ * pixels for `pointer` events), keys and focus on the window, gamepads polled on drain. Works in
+ * browsers and Tauri webviews alike.
+ *
+ * Events pass through to the page unless the scene takes them (0060): a press with a button an
+ * enabled control drags with, a claimed pointer's later events, and the wheel while a control
+ * zooms with it are `preventDefault`ed; so is the context menu, unless `contextMenu` is 'pass'.
  */
-export declare function createDomInputSource(element: HTMLElement): InputSource;
+export declare function createDomInputSource(element: HTMLElement, options?: DomInputOptions): InputSource;

package/dist/input.js

@@ -1,14 +1,57 @@
+import {
+  MODIFIERS
+} from "@aethervtt/shard-platform";
 const BUTTONS = ["left", "middle", "right", "back", "forward"];
-function createDomInputSource(element) {
-  const queue = [];
+function modifiersOf(e) {
+  return (e.shiftKey ? MODIFIERS.shift : 0) | (e.ctrlKey ? MODIFIERS.ctrl : 0) | (e.altKey ? MODIFIERS.alt : 0) | (e.metaKey ? MODIFIERS.meta : 0);
+}
+function kindOf(e) {
+  return e.pointerType === "touch" ? "touch" : e.pointerType === "pen" ? "pen" : "mouse";
+}
+function createDomInputSource(element, options = {}) {
+  const blockMenu = (options.contextMenu ?? "block") === "block";
+  const events = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const queue = {
+    push(e) {
+      events.push(e);
+      for (const listener of listeners) listener();
+    }
+  };
   const target = globalThis.window;
   const toPixels = (e) => {
     const rect = element.getBoundingClientRect();
     const sx = element instanceof HTMLCanvasElement ? element.width / Math.max(1, rect.width) : 1;
     const sy = element instanceof HTMLCanvasElement ? element.height / Math.max(1, rect.height) : 1;
-    return { x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy, sx, sy };
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    return { x: cx * sx, y: cy * sy, cx, cy, sx, sy };
   };
   const knownPads = /* @__PURE__ */ new Set();
+  let policy = { buttons: [], wheel: false, touch: false };
+  const down = /* @__PURE__ */ new Map();
+  const claimed = /* @__PURE__ */ new Set();
+  const touchAction = element.style.touchAction;
+  const capture = (id) => {
+    try {
+      element.setPointerCapture?.(id);
+    } catch {
+    }
+  };
+  const pointer = (e, phase, cx, cy) => {
+    const button = phase === "move" ? down.get(e.pointerId) ?? "left" : BUTTONS[e.button] ?? "left";
+    queue.push({
+      type: "pointer",
+      id: e.pointerId,
+      phase,
+      pointer: kindOf(e),
+      button,
+      x: cx,
+      y: cy,
+      modifiers: modifiersOf(e)
+    });
+  };
+  const takes = (e) => e.pointerType === "touch" ? policy.touch : policy.buttons.includes(BUTTONS[e.button] ?? "left");
   const onKeyDown = (e) => {
     if (!e.ctrlKey && !e.metaKey) {
       if (e.key.length === 1) queue.push({ type: "text", text: e.key });
@@ -21,43 +64,76 @@ function createDomInputSource(element) {
     queue.push({ type: "key", code: e.code, pressed: false });
   };
   const onPointerDown = (e) => {
-    const { x, y } = toPixels(e);
+    const { x, y, cx, cy } = toPixels(e);
+    down.set(e.pointerId, BUTTONS[e.button] ?? "left");
+    if (takes(e)) {
+      e.preventDefault();
+      capture(e.pointerId);
+    }
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "start", x, y });
     else queue.push({ type: "mouse-button", button: BUTTONS[e.button] ?? "left", pressed: true });
+    pointer(e, "down", cx, cy);
   };
   const onPointerUp = (e) => {
-    const { x, y } = toPixels(e);
+    const { x, y, cx, cy } = toPixels(e);
+    if (claimed.has(e.pointerId)) e.preventDefault();
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "end", x, y });
     else queue.push({ type: "mouse-button", button: BUTTONS[e.button] ?? "left", pressed: false });
+    if (down.has(e.pointerId)) pointer(e, "up", cx, cy);
+    down.delete(e.pointerId);
+    claimed.delete(e.pointerId);
+  };
+  const onPointerCancel = (e) => {
+    if (!down.has(e.pointerId)) return;
+    const { x, y, cx, cy } = toPixels(e);
+    if (e.pointerType === "touch")
+      queue.push({ type: "touch", id: e.pointerId, phase: "end", x, y });
+    pointer(e, "cancel", cx, cy);
+    down.delete(e.pointerId);
+    claimed.delete(e.pointerId);
   };
   const onPointerMove = (e) => {
-    const { x, y, sx, sy } = toPixels(e);
+    const { x, y, cx, cy, sx, sy } = toPixels(e);
+    if (claimed.has(e.pointerId)) e.preventDefault();
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "move", x, y });
     else queue.push({ type: "mouse-move", x, y, dx: e.movementX * sx, dy: e.movementY * sy });
+    pointer(e, "move", cx, cy);
   };
   const onWheel = (e) => {
+    if (policy.wheel) e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
-    queue.push({ type: "wheel", dx: e.deltaX * scale, dy: e.deltaY * scale });
+    const { cx, cy } = toPixels(e);
+    queue.push({
+      type: "wheel",
+      dx: e.deltaX * scale,
+      dy: e.deltaY * scale,
+      x: cx,
+      y: cy,
+      modifiers: modifiersOf(e)
+    });
   };
   const onBlur = () => queue.push({ type: "focus", focused: false });
   const onFocus = () => queue.push({ type: "focus", focused: true });
-  const onContextMenu = (e) => e.preventDefault();
+  const onContextMenu = (e) => {
+    if (blockMenu || policy.buttons.includes("right")) e.preventDefault();
+  };
   target.addEventListener("keydown", onKeyDown);
   target.addEventListener("keyup", onKeyUp);
   target.addEventListener("blur", onBlur);
   target.addEventListener("focus", onFocus);
   element.addEventListener("pointerdown", onPointerDown);
   target.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerCancel);
   element.addEventListener("pointermove", onPointerMove);
-  element.addEventListener("wheel", onWheel, { passive: true });
+  element.addEventListener("wheel", onWheel, { passive: false });
   element.addEventListener("contextmenu", onContextMenu);
   return {
     drain(out) {
-      for (const e of queue) out.push(e);
-      queue.length = 0;
+      for (const e of events) out.push(e);
+      events.length = 0;
       const pads = globalThis.navigator?.getGamepads?.() ?? [];
       for (let i = 0; i < pads.length; i++) {
         const pad = pads[i];
@@ -76,13 +152,29 @@ function createDomInputSource(element) {
         }
       }
     },
+    onInput(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    claimPointer(id) {
+      if (!down.has(id) || claimed.has(id)) return;
+      claimed.add(id);
+      capture(id);
+    },
+    setPointerPolicy(next) {
+      policy = { buttons: [...next.buttons], wheel: next.wheel, touch: next.touch };
+      element.style.touchAction = next.touch ? "none" : touchAction;
+    },
     dispose() {
+      listeners.clear();
+      element.style.touchAction = touchAction;
       target.removeEventListener("keydown", onKeyDown);
       target.removeEventListener("keyup", onKeyUp);
       target.removeEventListener("blur", onBlur);
       target.removeEventListener("focus", onFocus);
       element.removeEventListener("pointerdown", onPointerDown);
       target.removeEventListener("pointerup", onPointerUp);
+      element.removeEventListener("pointercancel", onPointerCancel);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("wheel", onWheel);
       element.removeEventListener("contextmenu", onContextMenu);

package/dist/performance.d.ts

@@ -0,0 +1,7 @@
+import type { HostPerformance } from '@aethervtt/shard-platform';
+/**
+ * The page's own instruments (0062): a `longtask` observer, and resource timing for downloads.
+ * One per page: the observer starts on the first call and keeps every long task since, buffered
+ * ones from before it included. Three.js pages can use it too, so both renderers measure alike.
+ */
+export declare function createWebPerformance(): HostPerformance;

package/dist/performance.js

@@ -0,0 +1,116 @@
+const RESOURCE_BUFFER = 1e4;
+const TASK_HISTORY = 1e3;
+let shared;
+function createWebPerformance() {
+  if (shared) return shared;
+  const listeners = /* @__PURE__ */ new Set();
+  const tasks = [];
+  const observes = typeof PerformanceObserver !== "undefined" && PerformanceObserver.supportedEntryTypes?.includes("longtask");
+  if (observes) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        tasks.push([entry.startTime, entry.duration]);
+        if (tasks.length > TASK_HISTORY) tasks.shift();
+        for (const listener of listeners) listener(entry.startTime, entry.duration);
+      }
+    }).observe({ type: "longtask", buffered: true });
+  }
+  const timing = typeof performance !== "undefined" && "getEntriesByType" in performance;
+  if (timing && performance.setResourceTimingBufferSize) {
+    performance.setResourceTimingBufferSize(RESOURCE_BUFFER);
+  }
+  shared = {
+    userAgent: typeof navigator === "undefined" ? "unknown" : navigator.userAgent,
+    ...observes && {
+      onLongTask(listener) {
+        for (const [start, duration] of tasks) listener(start, duration);
+        listeners.add(listener);
+        return () => void listeners.delete(listener);
+      }
+    },
+    ...timing && { downloads },
+    heap,
+    startSampler,
+    measure
+  };
+  return shared;
+}
+const MEMORY_EVERY_MS = 5e3;
+let measured;
+let measuring = false;
+let measuredAt = Number.NEGATIVE_INFINITY;
+function heap() {
+  const page = performance;
+  if (globalThis.crossOriginIsolated && page.measureUserAgentSpecificMemory) {
+    const now = performance.now();
+    if (!measuring && now - measuredAt >= MEMORY_EVERY_MS) {
+      measuring = true;
+      measuredAt = now;
+      page.measureUserAgentSpecificMemory().then((r) => {
+        measured = { usedBytes: r.bytes, source: "measureUserAgentSpecificMemory" };
+      }).catch(() => {
+      }).finally(() => {
+        measuring = false;
+      });
+    }
+    if (measured) return measured;
+  }
+  const memory = page.memory;
+  if (!memory) return void 0;
+  return {
+    usedBytes: memory.usedJSHeapSize,
+    totalBytes: memory.totalJSHeapSize,
+    limitBytes: memory.jsHeapSizeLimit,
+    source: "performance.memory"
+  };
+}
+const SAMPLE_INTERVAL_MS = 1;
+async function startSampler() {
+  const Ctor = globalThis.Profiler;
+  if (!Ctor) return void 0;
+  let profiler;
+  try {
+    profiler = new Ctor({ sampleInterval: SAMPLE_INTERVAL_MS, maxBufferSize: 1e5 });
+  } catch {
+    return void 0;
+  }
+  return {
+    stop: async () => {
+      const trace = await profiler.stop();
+      const { hottestFromSelfProfile, samplesFromSelfProfile } = await import("@aethervtt/shard-core/capture");
+      return {
+        hottest: hottestFromSelfProfile(trace, SAMPLE_INTERVAL_MS),
+        samples: samplesFromSelfProfile(trace, SAMPLE_INTERVAL_MS)
+      };
+    }
+  };
+}
+function measure(name, track, start, ms) {
+  try {
+    performance.measure(name, {
+      start,
+      end: start + ms,
+      detail: {
+        devtools: { dataType: "track-entry", track: `shard ${track}`, trackGroup: "Shard" }
+      }
+    });
+  } catch {
+  }
+}
+function downloads() {
+  const result = { transferred: 0, decoded: 0 };
+  const add = (entry) => {
+    result.transferred += entry.transferSize;
+    result.decoded += entry.decodedBodySize;
+  };
+  for (const entry of performance.getEntriesByType("navigation")) {
+    add(entry);
+  }
+  for (const entry of performance.getEntriesByType("resource")) {
+    add(entry);
+  }
+  return result;
+}
+export {
+  createWebPerformance
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aethervtt/shard-platform-web",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -16,8 +16,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@aethervtt/shard-core": "0.0.1",
-    "@aethervtt/shard-platform": "0.0.1"
+    "@aethervtt/shard-core": "0.2.0",
+    "@aethervtt/shard-platform": "0.2.0"
   },
   "repository": {
     "type": "git",
@@ -29,6 +29,6 @@
     "provenance": true
   },
   "shard": {
-    "buildSha": "d6c5c6aef4675575c878b02cf2c8f738b4190229"
+    "buildSha": "32c22a3944ed23f5d1baa90bf7cc9fae724f5fd8"
   }
 }