@joystyk/pwa 0.0.0-stage → 0.2.0

package/dist/client/elements.js

@@ -0,0 +1,319 @@
+import { formatBytes } from "../asset-manifest.js";
+import { pinStatus, unpinGame } from "./pinned.js";
+import { PIN_CHANGED } from "./availability.js";
+import { browserPinPorts, pinGame } from "./pins.js";
+//#region src/client/elements.ts
+var sheet = (css) => {
+	const s = new CSSStyleSheet();
+	s.replaceSync(css);
+	return s;
+};
+var BUTTON_CSS = `
+  button {
+    min-block-size: var(--jy-target-min, 2.75rem);
+    padding: 0.25rem 1rem;
+    border: 2px solid var(--jy-border, GrayText);
+    border-radius: var(--jy-radius-pill, 999px);
+    background: transparent;
+    color: var(--jy-text, CanvasText);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  button:focus-visible {
+    outline: 3px solid var(--jy-focus-ring, Highlight);
+    outline-offset: 2px;
+  }
+  button:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+  [hidden] {
+    display: none !important;
+  }
+`;
+var el = (tag, props = {}) => Object.assign(document.createElement(tag), props);
+var TOAST_CSS = sheet(`
+  :host {
+    position: fixed;
+    z-index: 1000;
+    inset-block-end: max(1rem, env(safe-area-inset-bottom));
+    inset-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+  }
+  .toast {
+    pointer-events: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+    max-inline-size: 28rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--jy-border, GrayText);
+    border-radius: var(--jy-radius-m, 0.75rem);
+    background: var(--jy-surface-raised, Canvas);
+    color: var(--jy-text, CanvasText);
+    box-shadow: var(--jy-shadow, 0 4px 16px rgb(0 0 0 / 0.2));
+  }
+  p {
+    flex: 1 1 14rem;
+    margin: 0;
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .primary {
+    border-color: var(--jy-accent, LinkText);
+    background: var(--jy-accent, LinkText);
+    color: var(--jy-on-accent, Canvas);
+  }
+  ${BUTTON_CSS}
+`);
+/** `<jy-update-toast>`: says an update is ready and offers Refresh or Later. */
+var UpdateToast = class extends HTMLElement {
+	#message = el("p");
+	#refresh = el("button", {
+		type: "button",
+		className: "primary",
+		textContent: "Refresh"
+	});
+	#later = el("button", {
+		type: "button",
+		textContent: "Later"
+	});
+	/** Called with 'refresh' or 'later'. */
+	onChoice = () => void 0;
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		root.adoptedStyleSheets = [TOAST_CSS];
+		const box = el("div", { className: "toast" });
+		const status = el("div");
+		status.setAttribute("role", "status");
+		this.#message.append(el("strong", { textContent: "Update ready." }), " Refresh to get the newest Joystyk.");
+		status.append(this.#message);
+		const actions = el("div", { className: "actions" });
+		actions.append(this.#refresh, this.#later);
+		box.append(status, actions);
+		root.append(box);
+		this.#refresh.addEventListener("click", () => this.onChoice("refresh"));
+		this.#later.addEventListener("click", () => this.onChoice("later"));
+	}
+};
+var SECURITY_CSS = sheet(`
+  dialog {
+    box-sizing: border-box;
+    max-inline-size: min(28rem, calc(100vw - 2rem));
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--jy-border, GrayText);
+    border-radius: var(--jy-radius-m, 0.75rem);
+    background: var(--jy-surface-raised, Canvas);
+    color: var(--jy-text, CanvasText);
+    box-shadow: var(--jy-shadow, 0 4px 16px rgb(0 0 0 / 0.2));
+    font: inherit;
+  }
+  dialog::backdrop {
+    background: rgb(0 0 0 / 0.6);
+  }
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: var(--jy-step-1, 1.25rem);
+  }
+  p {
+    margin: 0 0 1rem;
+  }
+  .status:empty {
+    display: none;
+  }
+  .primary {
+    border-color: var(--jy-accent, LinkText);
+    background: var(--jy-accent, LinkText);
+    color: var(--jy-on-accent, Canvas);
+  }
+  ${BUTTON_CSS}
+`);
+/**
+* `<jy-security-update>`: the forced update's notice (offline-and-updates.md, Rule 2). A
+* modal dialog that takes focus and blocks the page: it gives the reason and one action,
+* Update now. Escape doesn't close it; the page reloads instead.
+*/
+var SecurityUpdate = class extends HTMLElement {
+	#dialog = el("dialog");
+	#status = el("p", { className: "status" });
+	#button = el("button", {
+		type: "button",
+		className: "primary",
+		textContent: "Update now"
+	});
+	/** Called once, when the player chooses Update now. */
+	onUpdate = () => void 0;
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		root.adoptedStyleSheets = [SECURITY_CSS];
+		const title = el("h2", {
+			id: "security-update-title",
+			textContent: "Security update"
+		});
+		const reason = el("p", {
+			id: "security-update-reason",
+			textContent: "This version of Joystyk has a security problem that a new version fixes. Update to keep playing. Your game is saved first, so you can carry on where you left off."
+		});
+		this.#dialog.setAttribute("aria-labelledby", title.id);
+		this.#dialog.setAttribute("aria-describedby", reason.id);
+		this.#dialog.setAttribute("closedby", "none");
+		this.#status.setAttribute("role", "status");
+		this.#dialog.append(title, reason, this.#status, this.#button);
+		root.append(this.#dialog);
+		this.#dialog.addEventListener("cancel", (event) => event.preventDefault());
+		this.#dialog.addEventListener("close", () => {
+			if (this.isConnected) this.#open();
+		});
+		this.#button.addEventListener("click", () => {
+			if (this.#button.disabled) return;
+			this.#button.disabled = true;
+			this.#status.textContent = "Saving your game, then updating…";
+			this.onUpdate();
+		});
+	}
+	connectedCallback() {
+		this.#open();
+	}
+	#open() {
+		if (!this.#dialog.open) this.#dialog.showModal();
+		this.#button.focus();
+	}
+};
+var TOGGLE_CSS = sheet(`
+  :host {
+    display: block;
+    min-block-size: var(--jy-target-min, 2.75rem);
+  }
+  .wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+  }
+  button[aria-pressed='true'] {
+    border-color: var(--jy-success, currentColor);
+  }
+  .status {
+    margin: 0;
+    font-size: var(--jy-step--1, 0.9rem);
+    color: var(--jy-text-muted, inherit);
+  }
+  ${BUTTON_CSS}
+`);
+/** Whether this browser can pin games at all. */
+var canPin = () => "serviceWorker" in navigator && "caches" in window;
+/**
+* `<jy-offline-toggle game-id="nim" game-name="Nim" assets="/games/nim/manifest.json">`: a
+* toggle button that pins the game for offline play or removes it. It stays empty (its box
+* reserved by the page's stylesheet) until a service worker is active, so a player never
+* sees a control that can't work.
+*/
+var OfflineToggle = class extends HTMLElement {
+	static observedAttributes = ["game-id", "assets"];
+	/** Swapped in tests. */
+	ports = browserPinPorts;
+	#wrap = el("div", {
+		className: "wrap",
+		hidden: true
+	});
+	#button = el("button", { type: "button" });
+	#status = el("p", { className: "status" });
+	#pinned = false;
+	#busy = false;
+	#generation = 0;
+	#onConnection = () => this.#render();
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		root.adoptedStyleSheets = [TOGGLE_CSS];
+		this.#button.append(el("span", {
+			textContent: "⤓ ",
+			ariaHidden: "true"
+		}), "Make available offline");
+		this.#status.setAttribute("role", "status");
+		this.#wrap.append(this.#button, this.#status);
+		root.append(this.#wrap);
+		this.#button.addEventListener("click", () => void this.#toggle());
+	}
+	get #gameId() {
+		return this.getAttribute("game-id") ?? "";
+	}
+	get #gameName() {
+		return this.getAttribute("game-name") ?? "This game";
+	}
+	connectedCallback() {
+		addEventListener("online", this.#onConnection);
+		addEventListener("offline", this.#onConnection);
+		this.#load();
+	}
+	disconnectedCallback() {
+		removeEventListener("online", this.#onConnection);
+		removeEventListener("offline", this.#onConnection);
+		this.#generation += 1;
+	}
+	attributeChangedCallback() {
+		if (this.isConnected) this.#load();
+	}
+	async #load() {
+		const generation = ++this.#generation;
+		this.#wrap.hidden = true;
+		if (!canPin() || this.#gameId === "") return;
+		await navigator.serviceWorker.ready;
+		const record = await pinStatus(this.#gameId, this.ports()).catch(() => null);
+		if (generation !== this.#generation) return;
+		this.#pinned = record !== null;
+		this.#status.textContent = record === null ? "" : `${this.#gameName} plays offline on this device (${formatBytes(record.totalBytes)}).`;
+		this.#wrap.hidden = false;
+		this.#render();
+	}
+	#render() {
+		this.#button.setAttribute("aria-pressed", String(this.#pinned));
+		const offline = !navigator.onLine && !this.#pinned;
+		this.#button.disabled = this.#busy || offline;
+		if (offline && !this.#busy) this.#status.textContent = "Connect to the internet to make this game available offline.";
+	}
+	async #toggle() {
+		if (this.#busy) return;
+		const generation = this.#generation;
+		const id = this.#gameId;
+		const name = this.#gameName;
+		this.#busy = true;
+		this.#render();
+		if (this.#pinned) {
+			await unpinGame(id, this.ports());
+			this.#pinned = false;
+			this.#status.textContent = `Removed ${name} from this device.`;
+		} else {
+			this.#status.textContent = `Saving ${name} for offline play…`;
+			const result = await pinGame({
+				gameId: id,
+				assets: this.getAttribute("assets") ?? `/games/${id}/manifest.json`
+			}, this.ports());
+			if (result.ok) {
+				this.#pinned = true;
+				this.#status.textContent = `${name} plays offline on this device (${formatBytes(result.value.record.totalBytes)}).`;
+			} else this.#status.textContent = result.error.message;
+		}
+		this.#busy = false;
+		dispatchEvent(new Event(PIN_CHANGED));
+		if (generation === this.#generation) this.#render();
+	}
+};
+/** Registers the elements once. */
+var definePwaElements = () => {
+	if (customElements.get("jy-update-toast") === void 0) customElements.define("jy-update-toast", UpdateToast);
+	if (customElements.get("jy-security-update") === void 0) customElements.define("jy-security-update", SecurityUpdate);
+	if (customElements.get("jy-offline-toggle") === void 0) customElements.define("jy-offline-toggle", OfflineToggle);
+};
+//#endregion
+export { OfflineToggle, SecurityUpdate, UpdateToast, definePwaElements };
+
+//# sourceMappingURL=elements.js.map

package/dist/client/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../src/client/elements.ts"],"sourcesContent":["// The PWA's frame UI, as small custom elements with no framework: the \"Update ready\" toast,\n// the forced security update's notice and the \"Make available offline\" control. Each renders\n// into its own shadow root and styles itself with a constructed stylesheet, which the site's\n// CSP allows, and reads the frame's design tokens (@joystyk/ui/tokens.css) through\n// inheritance, with plain fallbacks. None renders anything until the page needs it.\nimport { PIN_CHANGED } from './availability.ts';\nimport { formatBytes } from '../asset-manifest.ts';\nimport { pinStatus, unpinGame } from './pinned.ts';\nimport { browserPinPorts, pinGame, type PinPorts } from './pins.ts';\n\nconst sheet = (css: string): CSSStyleSheet => {\n  const s = new CSSStyleSheet();\n  s.replaceSync(css);\n  return s;\n};\n\nconst BUTTON_CSS = `\n  button {\n    min-block-size: var(--jy-target-min, 2.75rem);\n    padding: 0.25rem 1rem;\n    border: 2px solid var(--jy-border, GrayText);\n    border-radius: var(--jy-radius-pill, 999px);\n    background: transparent;\n    color: var(--jy-text, CanvasText);\n    font: inherit;\n    font-weight: 600;\n    cursor: pointer;\n  }\n  button:focus-visible {\n    outline: 3px solid var(--jy-focus-ring, Highlight);\n    outline-offset: 2px;\n  }\n  button:disabled {\n    cursor: default;\n    opacity: 0.6;\n  }\n  [hidden] {\n    display: none !important;\n  }\n`;\n\nconst el = <K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  props: Partial<HTMLElementTagNameMap[K]> = {},\n): HTMLElementTagNameMap[K] => Object.assign(document.createElement(tag), props);\n\n// --- The update toast ---------------------------------------------------------------------------\n\nconst TOAST_CSS = sheet(`\n  :host {\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: max(1rem, env(safe-area-inset-bottom));\n    inset-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));\n    display: flex;\n    justify-content: flex-end;\n    pointer-events: none;\n  }\n  .toast {\n    pointer-events: auto;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem 0.75rem;\n    max-inline-size: 28rem;\n    padding: 0.75rem 1rem;\n    border: 1px solid var(--jy-border, GrayText);\n    border-radius: var(--jy-radius-m, 0.75rem);\n    background: var(--jy-surface-raised, Canvas);\n    color: var(--jy-text, CanvasText);\n    box-shadow: var(--jy-shadow, 0 4px 16px rgb(0 0 0 / 0.2));\n  }\n  p {\n    flex: 1 1 14rem;\n    margin: 0;\n  }\n  .actions {\n    display: flex;\n    gap: 0.5rem;\n  }\n  .primary {\n    border-color: var(--jy-accent, LinkText);\n    background: var(--jy-accent, LinkText);\n    color: var(--jy-on-accent, Canvas);\n  }\n  ${BUTTON_CSS}\n`);\n\n/** `<jy-update-toast>`: says an update is ready and offers Refresh or Later. */\nexport class UpdateToast extends HTMLElement {\n  #message = el('p');\n  #refresh = el('button', { type: 'button', className: 'primary', textContent: 'Refresh' });\n  #later = el('button', { type: 'button', textContent: 'Later' });\n  /** Called with 'refresh' or 'later'. */\n  onChoice: (choice: 'refresh' | 'later') => void = () => undefined;\n\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: 'open' });\n    root.adoptedStyleSheets = [TOAST_CSS];\n    const box = el('div', { className: 'toast' });\n    // A polite status region: announced once, never stealing focus from a game or a page.\n    const status = el('div');\n    status.setAttribute('role', 'status');\n    this.#message.append(el('strong', { textContent: 'Update ready.' }), ' Refresh to get the newest Joystyk.');\n    status.append(this.#message);\n    const actions = el('div', { className: 'actions' });\n    actions.append(this.#refresh, this.#later);\n    box.append(status, actions);\n    root.append(box);\n    this.#refresh.addEventListener('click', () => this.onChoice('refresh'));\n    this.#later.addEventListener('click', () => this.onChoice('later'));\n  }\n}\n\n// --- The security update notice -----------------------------------------------------------------\n\nconst SECURITY_CSS = sheet(`\n  dialog {\n    box-sizing: border-box;\n    max-inline-size: min(28rem, calc(100vw - 2rem));\n    padding: 1.25rem 1.5rem;\n    border: 1px solid var(--jy-border, GrayText);\n    border-radius: var(--jy-radius-m, 0.75rem);\n    background: var(--jy-surface-raised, Canvas);\n    color: var(--jy-text, CanvasText);\n    box-shadow: var(--jy-shadow, 0 4px 16px rgb(0 0 0 / 0.2));\n    font: inherit;\n  }\n  dialog::backdrop {\n    background: rgb(0 0 0 / 0.6);\n  }\n  h2 {\n    margin: 0 0 0.5rem;\n    font-size: var(--jy-step-1, 1.25rem);\n  }\n  p {\n    margin: 0 0 1rem;\n  }\n  .status:empty {\n    display: none;\n  }\n  .primary {\n    border-color: var(--jy-accent, LinkText);\n    background: var(--jy-accent, LinkText);\n    color: var(--jy-on-accent, Canvas);\n  }\n  ${BUTTON_CSS}\n`);\n\n/**\n * `<jy-security-update>`: the forced update's notice (offline-and-updates.md, Rule 2). A\n * modal dialog that takes focus and blocks the page: it gives the reason and one action,\n * Update now. Escape doesn't close it; the page reloads instead.\n */\nexport class SecurityUpdate extends HTMLElement {\n  #dialog = el('dialog');\n  #status = el('p', { className: 'status' });\n  #button = el('button', { type: 'button', className: 'primary', textContent: 'Update now' });\n  /** Called once, when the player chooses Update now. */\n  onUpdate: () => void = () => undefined;\n\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: 'open' });\n    root.adoptedStyleSheets = [SECURITY_CSS];\n    const title = el('h2', { id: 'security-update-title', textContent: 'Security update' });\n    const reason = el('p', {\n      id: 'security-update-reason',\n      textContent:\n        'This version of Joystyk has a security problem that a new version fixes. Update to keep playing. Your game is saved first, so you can carry on where you left off.',\n    });\n    this.#dialog.setAttribute('aria-labelledby', title.id);\n    this.#dialog.setAttribute('aria-describedby', reason.id);\n    this.#dialog.setAttribute('closedby', 'none');\n    this.#status.setAttribute('role', 'status');\n    this.#dialog.append(title, reason, this.#status, this.#button);\n    root.append(this.#dialog);\n    // Blocking means blocking: Escape and close requests leave it open.\n    this.#dialog.addEventListener('cancel', (event) => event.preventDefault());\n    this.#dialog.addEventListener('close', () => {\n      if (this.isConnected) this.#open();\n    });\n    this.#button.addEventListener('click', () => {\n      if (this.#button.disabled) return;\n      this.#button.disabled = true;\n      this.#status.textContent = 'Saving your game, then updating…';\n      this.onUpdate();\n    });\n  }\n\n  connectedCallback(): void {\n    this.#open();\n  }\n\n  #open(): void {\n    if (!this.#dialog.open) this.#dialog.showModal();\n    this.#button.focus();\n  }\n}\n\n// --- The offline control ------------------------------------------------------------------------\n\nconst TOGGLE_CSS = sheet(`\n  :host {\n    display: block;\n    min-block-size: var(--jy-target-min, 2.75rem);\n  }\n  .wrap {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem 0.75rem;\n  }\n  button[aria-pressed='true'] {\n    border-color: var(--jy-success, currentColor);\n  }\n  .status {\n    margin: 0;\n    font-size: var(--jy-step--1, 0.9rem);\n    color: var(--jy-text-muted, inherit);\n  }\n  ${BUTTON_CSS}\n`);\n\n/** Whether this browser can pin games at all. */\nconst canPin = (): boolean => 'serviceWorker' in navigator && 'caches' in window;\n\n/**\n * `<jy-offline-toggle game-id=\"nim\" game-name=\"Nim\" assets=\"/games/nim/manifest.json\">`: a\n * toggle button that pins the game for offline play or removes it. It stays empty (its box\n * reserved by the page's stylesheet) until a service worker is active, so a player never\n * sees a control that can't work.\n */\nexport class OfflineToggle extends HTMLElement {\n  static readonly observedAttributes = ['game-id', 'assets'];\n  /** Swapped in tests. */\n  ports: () => PinPorts = browserPinPorts;\n  #wrap = el('div', { className: 'wrap', hidden: true });\n  #button = el('button', { type: 'button' });\n  #status = el('p', { className: 'status' });\n  #pinned = false;\n  #busy = false;\n  #generation = 0;\n  #onConnection = (): void => this.#render();\n\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: 'open' });\n    root.adoptedStyleSheets = [TOGGLE_CSS];\n    this.#button.append(el('span', { textContent: '⤓ ', ariaHidden: 'true' }), 'Make available offline');\n    this.#status.setAttribute('role', 'status');\n    this.#wrap.append(this.#button, this.#status);\n    root.append(this.#wrap);\n    this.#button.addEventListener('click', () => void this.#toggle());\n  }\n\n  get #gameId(): string {\n    return this.getAttribute('game-id') ?? '';\n  }\n\n  get #gameName(): string {\n    return this.getAttribute('game-name') ?? 'This game';\n  }\n\n  connectedCallback(): void {\n    addEventListener('online', this.#onConnection);\n    addEventListener('offline', this.#onConnection);\n    void this.#load();\n  }\n\n  disconnectedCallback(): void {\n    removeEventListener('online', this.#onConnection);\n    removeEventListener('offline', this.#onConnection);\n    this.#generation += 1;\n  }\n\n  attributeChangedCallback(): void {\n    if (this.isConnected) void this.#load();\n  }\n\n  async #load(): Promise<void> {\n    const generation = ++this.#generation;\n    this.#wrap.hidden = true;\n    if (!canPin() || this.#gameId === '') return;\n    // Resolves once a worker is active; never, when the kill switch kept it from registering.\n    await navigator.serviceWorker.ready;\n    const record = await pinStatus(this.#gameId, this.ports()).catch(() => null);\n    if (generation !== this.#generation) return;\n    this.#pinned = record !== null;\n    this.#status.textContent =\n      record === null ? '' : `${this.#gameName} plays offline on this device (${formatBytes(record.totalBytes)}).`;\n    this.#wrap.hidden = false;\n    this.#render();\n  }\n\n  #render(): void {\n    this.#button.setAttribute('aria-pressed', String(this.#pinned));\n    const offline = !navigator.onLine && !this.#pinned;\n    this.#button.disabled = this.#busy || offline;\n    if (offline && !this.#busy)\n      this.#status.textContent = 'Connect to the internet to make this game available offline.';\n  }\n\n  async #toggle(): Promise<void> {\n    if (this.#busy) return;\n    const generation = this.#generation;\n    const id = this.#gameId;\n    const name = this.#gameName;\n    this.#busy = true;\n    this.#render();\n    if (this.#pinned) {\n      await unpinGame(id, this.ports());\n      this.#pinned = false;\n      this.#status.textContent = `Removed ${name} from this device.`;\n    } else {\n      this.#status.textContent = `Saving ${name} for offline play…`;\n      const result = await pinGame(\n        { gameId: id, assets: this.getAttribute('assets') ?? `/games/${id}/manifest.json` },\n        this.ports(),\n      );\n      if (result.ok) {\n        this.#pinned = true;\n        this.#status.textContent = `${name} plays offline on this device (${formatBytes(result.value.record.totalBytes)}).`;\n      } else {\n        this.#status.textContent = result.error.message;\n      }\n    }\n    this.#busy = false;\n    dispatchEvent(new Event(PIN_CHANGED));\n    if (generation === this.#generation) this.#render();\n  }\n}\n\n/** Registers the elements once. */\nexport const definePwaElements = (): void => {\n  if (customElements.get('jy-update-toast') === undefined) customElements.define('jy-update-toast', UpdateToast);\n  if (customElements.get('jy-security-update') === undefined)\n    customElements.define('jy-security-update', SecurityUpdate);\n  if (customElements.get('jy-offline-toggle') === undefined) customElements.define('jy-offline-toggle', OfflineToggle);\n};\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'jy-update-toast': UpdateToast;\n    'jy-security-update': SecurityUpdate;\n    'jy-offline-toggle': OfflineToggle;\n  }\n}\n"],"mappings":"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"}

package/dist/client/forced.d.ts

@@ -0,0 +1,33 @@
+import { type Control } from '../control.js';
+/** How the page shows the notice. The default is `<jy-security-update>`. */
+export interface SecurityNotice {
+    /** Shows the blocking notice; `update` runs when the player chooses Update now. */
+    show(update: () => void): void;
+}
+export type ForcedUpdateOptions = {
+    /** This page's release time (`__JOYSTYK_RELEASE_TIME__`). */
+    readonly releaseTime: string;
+    /** Saves the game in play: the launcher's `requestSave`. Without it, nothing is saved. */
+    readonly saveGame?: () => Promise<void>;
+    /** Brings in the new release's worker before the reload, when there is one. */
+    readonly prepare?: () => Promise<void>;
+    /** How often to read the flag file. Default 15 minutes. */
+    readonly checkMs?: number;
+    readonly notice?: SecurityNotice;
+    /** Reads the flag file; swapped in tests. */
+    readonly read?: () => Promise<Control | null>;
+    /** Reloads the page; swapped in tests. */
+    readonly reload?: () => void;
+};
+export interface ForcedUpdates {
+    /** Reads the flag file now and acts on it; resolves with what it said. */
+    check(): Promise<Control | null>;
+    /** Acts on a flag file read elsewhere. */
+    observe(control: Control | null): void;
+    /** True once the notice is up. */
+    readonly forcing: boolean;
+    dispose(): void;
+}
+/** The default notice: `<jy-security-update>` at the end of the body. */
+export declare const securityNotice: () => SecurityNotice;
+export declare const watchForcedUpdates: (options: ForcedUpdateOptions) => ForcedUpdates;

package/dist/client/forced.js

@@ -0,0 +1,57 @@
+import { mustUpdate } from "../control.js";
+import { readControl } from "./control.js";
+//#region src/client/forced.ts
+var DEFAULT_CHECK_MS = 9e5;
+/** The default notice: `<jy-security-update>` at the end of the body. */
+var securityNotice = () => ({ show: (update) => {
+	import("./elements.js").then(({ definePwaElements }) => {
+		definePwaElements();
+		const notice = document.createElement("jy-security-update");
+		notice.onUpdate = update;
+		document.body.append(notice);
+	});
+} });
+var watchForcedUpdates = (options) => {
+	const read = options.read ?? readControl;
+	const reload = options.reload ?? (() => location.reload());
+	const notice = options.notice ?? securityNotice();
+	const cleanups = [];
+	let forcing = false;
+	const force = () => {
+		if (forcing) return;
+		forcing = true;
+		const saved = Promise.resolve().then(() => options.saveGame?.()).catch(() => void 0);
+		notice.show(() => {
+			saved.then(() => options.prepare?.()).catch(() => void 0).then(reload);
+		});
+	};
+	const observe = (control) => {
+		if (mustUpdate(control, options.releaseTime)) force();
+	};
+	const check = async () => {
+		const control = await read();
+		observe(control);
+		return control;
+	};
+	const interval = setInterval(() => void check(), options.checkMs ?? DEFAULT_CHECK_MS);
+	cleanups.push(() => clearInterval(interval));
+	const onVisible = () => {
+		if (document.visibilityState === "visible") check();
+	};
+	document.addEventListener("visibilitychange", onVisible);
+	cleanups.push(() => document.removeEventListener("visibilitychange", onVisible));
+	return {
+		check,
+		observe,
+		get forcing() {
+			return forcing;
+		},
+		dispose: () => {
+			for (const cleanup of cleanups.splice(0)) cleanup();
+		}
+	};
+};
+//#endregion
+export { securityNotice, watchForcedUpdates };
+
+//# sourceMappingURL=forced.js.map

package/dist/client/forced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced.js","names":[],"sources":["../../src/client/forced.ts"],"sourcesContent":["// Forced security updates (offline-and-updates.md, Rule 2). The page reads the flag file at\n// start, every 15 minutes, whenever the tab comes back into view and on each navigation to\n// the index. When the file names a minimum release later than this page's, the page shows a\n// blocking notice and asks the launcher to save the game in play. Only when the player\n// chooses Update now, and the save has landed, does it bring in the new worker and reload: a\n// game never swaps code without that save (Rule 2). A page that can't reach the flag file\n// reads no instruction, so offline play goes on.\nimport { mustUpdate, type Control } from '../control.ts';\nimport { readControl } from './control.ts';\n\n/** How the page shows the notice. The default is `<jy-security-update>`. */\nexport interface SecurityNotice {\n  /** Shows the blocking notice; `update` runs when the player chooses Update now. */\n  show(update: () => void): void;\n}\n\nexport type ForcedUpdateOptions = {\n  /** This page's release time (`__JOYSTYK_RELEASE_TIME__`). */\n  readonly releaseTime: string;\n  /** Saves the game in play: the launcher's `requestSave`. Without it, nothing is saved. */\n  readonly saveGame?: () => Promise<void>;\n  /** Brings in the new release's worker before the reload, when there is one. */\n  readonly prepare?: () => Promise<void>;\n  /** How often to read the flag file. Default 15 minutes. */\n  readonly checkMs?: number;\n  readonly notice?: SecurityNotice;\n  /** Reads the flag file; swapped in tests. */\n  readonly read?: () => Promise<Control | null>;\n  /** Reloads the page; swapped in tests. */\n  readonly reload?: () => void;\n};\n\nexport interface ForcedUpdates {\n  /** Reads the flag file now and acts on it; resolves with what it said. */\n  check(): Promise<Control | null>;\n  /** Acts on a flag file read elsewhere. */\n  observe(control: Control | null): void;\n  /** True once the notice is up. */\n  readonly forcing: boolean;\n  dispose(): void;\n}\n\nconst DEFAULT_CHECK_MS = 15 * 60 * 1000;\n\n/** The default notice: `<jy-security-update>` at the end of the body. */\nexport const securityNotice = (): SecurityNotice => ({\n  show: (update) => {\n    void import('./elements.ts').then(({ definePwaElements }) => {\n      definePwaElements();\n      const notice = document.createElement('jy-security-update');\n      notice.onUpdate = update;\n      document.body.append(notice);\n    });\n  },\n});\n\nexport const watchForcedUpdates = (options: ForcedUpdateOptions): ForcedUpdates => {\n  const read = options.read ?? readControl;\n  const reload = options.reload ?? (() => location.reload());\n  const notice = options.notice ?? securityNotice();\n  const cleanups: (() => void)[] = [];\n  let forcing = false;\n\n  const force = (): void => {\n    if (forcing) return;\n    forcing = true;\n    // Saving starts with the notice: the notice stops input, and pausing stops a real-time\n    // game from running on unattended behind it.\n    const saved = Promise.resolve()\n      .then(() => options.saveGame?.())\n      .catch(() => undefined);\n    notice.show(() => {\n      void saved\n        .then(() => options.prepare?.())\n        .catch(() => undefined)\n        .then(reload);\n    });\n  };\n\n  const observe = (control: Control | null): void => {\n    if (mustUpdate(control, options.releaseTime)) force();\n  };\n\n  const check = async (): Promise<Control | null> => {\n    const control = await read();\n    observe(control);\n    return control;\n  };\n\n  const interval = setInterval(() => void check(), options.checkMs ?? DEFAULT_CHECK_MS);\n  cleanups.push(() => clearInterval(interval));\n  const onVisible = (): void => {\n    if (document.visibilityState === 'visible') void check();\n  };\n  document.addEventListener('visibilitychange', onVisible);\n  cleanups.push(() => document.removeEventListener('visibilitychange', onVisible));\n\n  return {\n    check,\n    observe,\n    get forcing() {\n      return forcing;\n    },\n    dispose: () => {\n      for (const cleanup of cleanups.splice(0)) cleanup();\n    },\n  };\n};\n"],"mappings":";;;AA0CA,IAAM,mBAAmB;;AAGzB,IAAa,wBAAwC,EACnD,OAAO,WAAW;CAChB,OAAY,gBAAgB,CAAC,MAAM,EAAE,wBAAwB;EAC3D,kBAAkB;EAClB,MAAM,SAAS,SAAS,cAAc,oBAAoB;EAC1D,OAAO,WAAW;EAClB,SAAS,KAAK,OAAO,MAAM;CAC7B,CAAC;AACH,EACF;AAEA,IAAa,sBAAsB,YAAgD;CACjF,MAAM,OAAO,QAAQ,QAAQ;CAC7B,MAAM,SAAS,QAAQ,iBAAiB,SAAS,OAAO;CACxD,MAAM,SAAS,QAAQ,UAAU,eAAe;CAChD,MAAM,WAA2B,CAAC;CAClC,IAAI,UAAU;CAEd,MAAM,cAAoB;EACxB,IAAI,SAAS;EACb,UAAU;EAGV,MAAM,QAAQ,QAAQ,QAAQ,CAAC,CAC5B,WAAW,QAAQ,WAAW,CAAC,CAAC,CAChC,YAAY,KAAA,CAAS;EACxB,OAAO,WAAW;GAChB,MACG,WAAW,QAAQ,UAAU,CAAC,CAAC,CAC/B,YAAY,KAAA,CAAS,CAAC,CACtB,KAAK,MAAM;EAChB,CAAC;CACH;CAEA,MAAM,WAAW,YAAkC;EACjD,IAAI,WAAW,SAAS,QAAQ,WAAW,GAAG,MAAM;CACtD;CAEA,MAAM,QAAQ,YAAqC;EACjD,MAAM,UAAU,MAAM,KAAK;EAC3B,QAAQ,OAAO;EACf,OAAO;CACT;CAEA,MAAM,WAAW,kBAAkB,KAAK,MAAM,GAAG,QAAQ,WAAW,gBAAgB;CACpF,SAAS,WAAW,cAAc,QAAQ,CAAC;CAC3C,MAAM,kBAAwB;EAC5B,IAAI,SAAS,oBAAoB,WAAW,MAAW;CACzD;CACA,SAAS,iBAAiB,oBAAoB,SAAS;CACvD,SAAS,WAAW,SAAS,oBAAoB,oBAAoB,SAAS,CAAC;CAE/E,OAAO;EACL;EACA;EACA,IAAI,UAAU;GACZ,OAAO;EACT;EACA,eAAe;GACb,KAAK,MAAM,WAAW,SAAS,OAAO,CAAC,GAAG,QAAQ;EACpD;CACF;AACF"}

package/dist/client/index.d.ts

@@ -0,0 +1,7 @@
+export { definePwaElements, OfflineToggle, SecurityUpdate, UpdateToast } from './elements.js';
+export { browserCachePorts, pinnedGames, pinStatus, unpinGame, type CachePorts } from './pinned.js';
+export { browserPinPorts, PIN_MESSAGES, pinGame, refreshPinnedGames, type Pinned, type PinError, type PinErrorCode, type PinPorts, } from './pins.js';
+export { readControl } from './control.js';
+export { securityNotice, watchForcedUpdates, type ForcedUpdateOptions, type ForcedUpdates, type SecurityNotice, } from './forced.js';
+export { dailyToPrefetch, disablePwa, registerPwa, toastPrompt, type DailyPrefetcher, type PwaController, type PwaOptions, type UpdatePrompt, } from './register.js';
+export { watchOfflineAvailability, PIN_CHANGED, type AvailabilityPorts } from './availability.js';

package/dist/client/index.js

@@ -0,0 +1,8 @@
+import { browserCachePorts, pinStatus, pinnedGames, unpinGame } from "./pinned.js";
+import { PIN_CHANGED, watchOfflineAvailability } from "./availability.js";
+import { readControl } from "./control.js";
+import { PIN_MESSAGES, browserPinPorts, pinGame, refreshPinnedGames } from "./pins.js";
+import { OfflineToggle, SecurityUpdate, UpdateToast, definePwaElements } from "./elements.js";
+import { securityNotice, watchForcedUpdates } from "./forced.js";
+import { dailyToPrefetch, disablePwa, registerPwa, toastPrompt } from "./register.js";
+export { OfflineToggle, PIN_CHANGED, PIN_MESSAGES, SecurityUpdate, UpdateToast, browserCachePorts, browserPinPorts, dailyToPrefetch, definePwaElements, disablePwa, pinGame, pinStatus, pinnedGames, readControl, refreshPinnedGames, registerPwa, securityNotice, toastPrompt, unpinGame, watchForcedUpdates, watchOfflineAvailability };

package/dist/client/pinned.d.ts

@@ -0,0 +1,13 @@
+import { type PinRecord } from '../pin-record.js';
+/** The Cache Storage a pin lives in, and the origin its keys belong to. Tests pass fakes. */
+export type CachePorts = {
+    readonly caches: CacheStorage;
+    readonly origin: string;
+};
+export declare const browserCachePorts: () => CachePorts;
+/** Every pinned game, read from each pin's own record, sorted by name. */
+export declare const pinnedGames: (ports?: CachePorts) => Promise<PinRecord[]>;
+/** The game's pin, or null when it isn't available offline. */
+export declare const pinStatus: (gameId: string, ports?: CachePorts) => Promise<PinRecord | null>;
+/** Removes every pinned build of the game. */
+export declare const unpinGame: (gameId: string, ports?: CachePorts) => Promise<void>;

package/dist/client/pinned.js

@@ -0,0 +1,29 @@
+import { PIN_RECORD_PATH, parsePinnedCacheName } from "../names.js";
+import { parsePinRecord } from "../pin-record.js";
+//#region src/client/pinned.ts
+var browserCachePorts = () => ({
+	caches: globalThis.caches,
+	origin: location.origin
+});
+/** Every pinned game, read from each pin's own record, sorted by name. */
+var pinnedGames = async (ports = browserCachePorts()) => {
+	const found = [];
+	for (const name of await ports.caches.keys()) {
+		const pinned = parsePinnedCacheName(name);
+		if (pinned === null) continue;
+		const response = await (await ports.caches.open(name)).match(new URL(PIN_RECORD_PATH, ports.origin).href);
+		const record = response === void 0 ? null : parsePinRecord(await response.json().catch(() => null));
+		if (record !== null && record.id === pinned.id && record.version === pinned.version) found.push(record);
+	}
+	return found.sort((a, b) => a.name.localeCompare(b.name, "en"));
+};
+/** The game's pin, or null when it isn't available offline. */
+var pinStatus = async (gameId, ports = browserCachePorts()) => (await pinnedGames(ports)).find((record) => record.id === gameId) ?? null;
+/** Removes every pinned build of the game. */
+var unpinGame = async (gameId, ports = browserCachePorts()) => {
+	for (const name of await ports.caches.keys()) if (parsePinnedCacheName(name)?.id === gameId) await ports.caches.delete(name);
+};
+//#endregion
+export { browserCachePorts, pinStatus, pinnedGames, unpinGame };
+
+//# sourceMappingURL=pinned.js.map

package/dist/client/pinned.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinned.js","names":[],"sources":["../../src/client/pinned.ts"],"sourcesContent":["// Reading and removing pins: what the offline page needs, without the code that pins.\nimport { parsePinnedCacheName, PIN_RECORD_PATH } from '../names.ts';\nimport { parsePinRecord, type PinRecord } from '../pin-record.ts';\n\n/** The Cache Storage a pin lives in, and the origin its keys belong to. Tests pass fakes. */\nexport type CachePorts = {\n  readonly caches: CacheStorage;\n  readonly origin: string;\n};\n\nexport const browserCachePorts = (): CachePorts => ({ caches: globalThis.caches, origin: location.origin });\n\n/** Every pinned game, read from each pin's own record, sorted by name. */\nexport const pinnedGames = async (ports: CachePorts = browserCachePorts()): Promise<PinRecord[]> => {\n  const found: PinRecord[] = [];\n  for (const name of await ports.caches.keys()) {\n    const pinned = parsePinnedCacheName(name);\n    if (pinned === null) continue;\n    const response = await (await ports.caches.open(name)).match(new URL(PIN_RECORD_PATH, ports.origin).href);\n    const record = response === undefined ? null : parsePinRecord(await response.json().catch(() => null));\n    if (record !== null && record.id === pinned.id && record.version === pinned.version) found.push(record);\n  }\n  return found.sort((a, b) => a.name.localeCompare(b.name, 'en'));\n};\n\n/** The game's pin, or null when it isn't available offline. */\nexport const pinStatus = async (gameId: string, ports: CachePorts = browserCachePorts()): Promise<PinRecord | null> =>\n  (await pinnedGames(ports)).find((record) => record.id === gameId) ?? null;\n\n/** Removes every pinned build of the game. */\nexport const unpinGame = async (gameId: string, ports: CachePorts = browserCachePorts()): Promise<void> => {\n  for (const name of await ports.caches.keys()) {\n    if (parsePinnedCacheName(name)?.id === gameId) await ports.caches.delete(name);\n  }\n};\n"],"mappings":";;;AAUA,IAAa,2BAAuC;CAAE,QAAQ,WAAW;CAAQ,QAAQ,SAAS;AAAO;;AAGzG,IAAa,cAAc,OAAO,QAAoB,kBAAkB,MAA4B;CAClG,MAAM,QAAqB,CAAC;CAC5B,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,KAAK,GAAG;EAC5C,MAAM,SAAS,qBAAqB,IAAI;EACxC,IAAI,WAAW,MAAM;EACrB,MAAM,WAAW,OAAO,MAAM,MAAM,OAAO,KAAK,IAAI,EAAA,CAAG,MAAM,IAAI,IAAI,iBAAiB,MAAM,MAAM,CAAC,CAAC,IAAI;EACxG,MAAM,SAAS,aAAa,KAAA,IAAY,OAAO,eAAe,MAAM,SAAS,KAAK,CAAC,CAAC,YAAY,IAAI,CAAC;EACrG,IAAI,WAAW,QAAQ,OAAO,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,SAAS,MAAM,KAAK,MAAM;CACxG;CACA,OAAO,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,IAAI,CAAC;AAChE;;AAGA,IAAa,YAAY,OAAO,QAAgB,QAAoB,kBAAkB,OACnF,MAAM,YAAY,KAAK,EAAA,CAAG,MAAM,WAAW,OAAO,OAAO,MAAM,KAAK;;AAGvE,IAAa,YAAY,OAAO,QAAgB,QAAoB,kBAAkB,MAAqB;CACzG,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,KAAK,GACzC,IAAI,qBAAqB,IAAI,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM,OAAO,OAAO,IAAI;AAEjF"}

package/dist/client/pins.d.ts

@@ -0,0 +1,43 @@
+import { type Result } from '@joystyk/contracts';
+import type { PersistResult } from '@joystyk/storage/browser';
+import type { PinRecord } from '../pin-record.js';
+import { type CachePorts } from './pinned.js';
+/** What pinning touches; tests pass fakes. */
+export type PinPorts = CachePorts & {
+    readonly fetch: (url: string, init?: RequestInit) => Promise<Response>;
+    /** Asks the browser to keep the site's data; called on the first pin only. */
+    readonly persist: () => Promise<PersistResult>;
+};
+export declare const browserPinPorts: () => PinPorts;
+export type PinErrorCode = 'Offline' | 'Quota' | 'Invalid' | 'Incomplete' | 'Unsupported';
+export type PinError = {
+    readonly code: PinErrorCode;
+    /** For players. */
+    readonly message: string;
+    /** For developers. */
+    readonly detail: string;
+};
+export declare const PIN_MESSAGES: Readonly<Record<PinErrorCode, string>>;
+export type Pinned = {
+    readonly record: PinRecord;
+    /** Set on the first pin, when persistent storage was requested; null otherwise. */
+    readonly persisted: PersistResult | null;
+};
+/**
+ * Makes a game available offline, or brings its pin up to date: reads the asset manifest at
+ * `assets` (the game manifest's `assets`), caches every file and the game's page, then
+ * removes older builds. The first pin asks for persistent storage.
+ */
+export declare const pinGame: (input: {
+    readonly gameId: string;
+    readonly assets: string;
+}, ports?: PinPorts) => Promise<Result<Pinned, PinError>>;
+/**
+ * Brings every pin up to the build the server has now: same version, missing files added and
+ * stale ones dropped; a new version, a new cache, then the old one removed. Call it at a safe
+ * point while online (Rule 2); a pin that fails to refresh keeps its old build.
+ */
+export declare const refreshPinnedGames: (ports?: PinPorts) => Promise<{
+    refreshed: string[];
+    failed: string[];
+}>;