@joystyk/pwa 0.0.0 → 0.2.0

package/dist/build/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../src/build/plugin.ts"],"sourcesContent":["// The PWA build step, as a Vite plugin for the site's client build. After Vite writes the\n// client, it adds, from the built output:\n//\n//   assets/icon-*.svg|png, assets/offline-*.js|css   hashed, immutable (Rule 1)\n//   manifest.webmanifest, offline.html                served no-cache\n//   games/<id>/manifest.json                          every file each game needs (Rule 1)\n//   sw.js                                             one classic script, precache list injected\n//   sw-remove.js                                      the emergency self-removing worker (Rule 5)\n//   pwa-control.json                                  the default flag file\n//   release.json                                      the release ID and time, for the server\n//\n// The worker is bundled from Workbox modules with Vite itself, so the build needs no other\n// bundler. Precache revisions hash the rendered output (the blog's lesson): the site renders\n// its shell pages at build time exactly as the server will, and the build fails if any\n// precache entry is missing.\nimport { existsSync, statSync } from 'node:fs';\nimport { mkdir, readFile, writeFile } from 'node:fs/promises';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { build, type Logger, type Plugin, type ResolvedConfig } from 'vite';\nimport * as z from 'zod/mini';\nimport { canonicalReleaseTime, DEFAULT_CONTROL, RELEASE_RECORD_FILE, type ReleaseRecord } from '../control.ts';\nimport { OFFLINE_URL, WEB_MANIFEST_URL } from '../names.ts';\nimport {\n  contentHash,\n  gameAssetManifest,\n  injectManifest,\n  offlinePage,\n  precacheEntries,\n  webManifest,\n  type BuildGame,\n  type PrecacheSource,\n} from './documents.ts';\nimport { fileSets, type GameSource } from './graph.ts';\nimport { iconPng, iconSvg } from './icons.ts';\n\n/** What the site supplies at build time, once the client build is on disk. */\nexport type SiteBuildInput = {\n  /** The games this build lists: each gets an asset manifest. */\n  readonly games: readonly BuildGame[];\n  /**\n   * Games whose code is in the bundle but which this build doesn't list, such as test games\n   * outside test builds. Their code is kept out of the shell and gets no asset manifest.\n   */\n  readonly unlisted?: readonly GameSource[];\n  /** Answers a request exactly as the production server will; used to hash the shell pages. */\n  readonly render: (path: string) => Promise<Response>;\n  /** Server-rendered paths to precache, such as '/' and '/favicon.svg'. */\n  readonly shellPages: readonly string[];\n};\n\nexport type PwaPluginOptions = {\n  /** The release ID baked into the worker (git SHA + date). */\n  readonly release: string;\n  /**\n   * When the release's code was committed, as an RFC 3339 date-time. Releases are ordered by\n   * it: the flag file's minimum release is one (control.ts).\n   */\n  readonly releaseTime: string;\n  /** Loads the site's half, given the output directory. Called after the client is written. */\n  readonly site: (context: { readonly outDir: string }) => Promise<SiteBuildInput>;\n};\n\nconst SOURCE = fileURLToPath(new URL('..', import.meta.url));\n\n// Workspace builds use TypeScript; installed tarballs carry the same modules as JS.\nconst script = (folder: string, name: string): string => {\n  const source = join(SOURCE, folder, `${name}.ts`);\n  return existsSync(source) ? source : join(SOURCE, folder, `${name}.js`);\n};\n\n/** Bundles one browser or worker script into a single minified classic script. */\nconst bundleScript = async (entry: string, define: Record<string, string> = {}): Promise<string> => {\n  const result = await build({\n    configFile: false,\n    root: SOURCE,\n    logLevel: 'warn',\n    publicDir: false,\n    define: { 'process.env.NODE_ENV': JSON.stringify('production'), ...define },\n    build: {\n      write: false,\n      emptyOutDir: false,\n      copyPublicDir: false,\n      minify: true,\n      target: 'es2022',\n      sourcemap: false,\n      reportCompressedSize: false,\n      lib: { entry, formats: ['iife'], name: 'joystykPwa', fileName: () => 'bundle.js' },\n    },\n  });\n  for (const output of Array.isArray(result) ? result : [result]) {\n    if (!('output' in output)) continue;\n    for (const item of output.output) if (item.type === 'chunk' && item.isEntry) return item.code;\n  }\n  throw new Error(`[pwa] Bundling ${entry} produced no script.`);\n};\n\nconst write = async (file: string, content: string | Uint8Array): Promise<void> => {\n  await mkdir(dirname(file), { recursive: true });\n  await writeFile(file, content);\n};\n\nconst manifestSchema = z.record(\n  z.string(),\n  z.object({\n    file: z.string(),\n    name: z.optional(z.string()),\n    src: z.optional(z.string()),\n    isEntry: z.optional(z.boolean()),\n    isDynamicEntry: z.optional(z.boolean()),\n    imports: z.optional(z.array(z.string())),\n    dynamicImports: z.optional(z.array(z.string())),\n    css: z.optional(z.array(z.string())),\n    assets: z.optional(z.array(z.string())),\n  }),\n);\n\n/** The plugin. Add it to the site's client build only. */\nexport const joystykPwa = (options: PwaPluginOptions): Plugin => {\n  const releaseTime = canonicalReleaseTime(options.releaseTime);\n  if (releaseTime === null)\n    throw new Error(`[pwa] releaseTime \"${options.releaseTime}\" isn't a date-time such as 2026-10-09T14:03:12Z.`);\n  let config: ResolvedConfig | undefined;\n  let logger: Logger | undefined;\n  return {\n    name: 'joystyk-pwa',\n    apply: 'build',\n    enforce: 'post',\n    configResolved(resolved) {\n      config = resolved;\n      logger = resolved.logger;\n    },\n    async writeBundle(output, bundle) {\n      if (config === undefined || config.build.ssr !== false) return;\n      const outDir = resolve(config.root, output.dir ?? config.build.outDir);\n      const manifestPath = join(outDir, '.vite', 'manifest.json');\n      if (!existsSync(manifestPath)) throw new Error('[pwa] The client build needs `build.manifest: true`.');\n      const manifest = manifestSchema.parse(JSON.parse(await readFile(manifestPath, 'utf8')));\n      const sources = new Map(\n        Object.values(bundle)\n          .filter((item) => item.type === 'chunk')\n          .map((chunk) => [chunk.fileName, chunk.moduleIds]),\n      );\n      const site = await options.site({ outDir });\n\n      // Hashed, immutable files beside Vite's own.\n      const hashed = async (name: string, ext: string, content: string | Uint8Array): Promise<string> => {\n        const file = `assets/${name}-${contentHash(content)}.${ext}`;\n        await write(join(outDir, file), content);\n        return file;\n      };\n      const iconFiles = {\n        svg: await hashed('icon', 'svg', iconSvg()),\n        png192: await hashed('icon-192', 'png', iconPng(192)),\n        png512: await hashed('icon-512', 'png', iconPng(512)),\n        maskable512: await hashed('icon-maskable-512', 'png', iconPng(512, true)),\n      };\n      const offlineCss = await hashed('offline', 'css', await readFile(join(SOURCE, 'offline', 'offline.css')));\n      const offlineJs = await hashed('offline', 'js', await bundleScript(script('offline', 'offline')));\n      const url = (file: string): string => `/${file}`;\n\n      const manifestJson = `${JSON.stringify(webManifest({ svg: url(iconFiles.svg), png192: url(iconFiles.png192), png512: url(iconFiles.png512), maskable512: url(iconFiles.maskable512) }), null, 2)}\\n`;\n      await write(join(outDir, 'manifest.webmanifest'), manifestJson);\n      const offlineHtml = offlinePage({ css: url(offlineCss), js: url(offlineJs), icon: url(iconFiles.svg) });\n      await write(join(outDir, 'offline.html'), offlineHtml);\n\n      // Each game's asset manifest.\n      const sets = fileSets(manifest, site.games, config.root, site.unlisted ?? [], sources);\n      const sizeOf = (file: string): number => statSync(join(outDir, file)).size;\n      for (const game of site.games) {\n        const assets = gameAssetManifest(\n          game,\n          options.release,\n          sets.shell,\n          sets.games.get(game.id) ?? new Set(),\n          sizeOf,\n        );\n        if (!game.assets.startsWith('/') || game.assets.includes('..'))\n          throw new Error(`[pwa] ${game.id}: assets \"${game.assets}\" must be a site path.`);\n        await write(join(outDir, game.assets), `${JSON.stringify(assets, null, 2)}\\n`);\n      }\n\n      // Tier 1: the shell's code, the icons, the offline page and the rendered shell pages.\n      const rendered: PrecacheSource[] = [];\n      for (const path of site.shellPages) {\n        const response = await site.render(path);\n        if (response.status !== 200)\n          throw new Error(`[pwa] Precaching ${path}: the server answers ${String(response.status)}, not 200.`);\n        rendered.push({ url: path, hashed: false, body: new Uint8Array(await response.arrayBuffer()) });\n      }\n      const files = [...sets.shell, ...Object.values(iconFiles), offlineCss, offlineJs];\n      const entries = precacheEntries(\n        [\n          ...rendered,\n          { url: OFFLINE_URL, hashed: false, body: offlineHtml },\n          { url: WEB_MANIFEST_URL, hashed: false, body: manifestJson },\n          ...files.map((file): PrecacheSource => ({ url: url(file), hashed: true, file })),\n        ],\n        (file) => existsSync(join(outDir, file)),\n      );\n\n      const worker = injectManifest(\n        await bundleScript(script('sw', 'sw'), { __JOYSTYK_RELEASE__: JSON.stringify(options.release) }),\n        entries,\n      );\n      await write(join(outDir, 'sw.js'), worker);\n      await write(join(outDir, 'sw-remove.js'), await bundleScript(script('sw', 'remove-sw')));\n      await write(join(outDir, 'pwa-control.json'), `${JSON.stringify(DEFAULT_CONTROL, null, 2)}\\n`);\n      const record: ReleaseRecord = { release: options.release, releaseTime };\n      await write(join(outDir, RELEASE_RECORD_FILE), `${JSON.stringify(record, null, 2)}\\n`);\n      logger?.info(\n        `[pwa] sw.js ${(worker.length / 1024).toFixed(1)} kB for release ${options.release} (${releaseTime}):${String(entries.length)} precache entries; asset manifests for ${site.games.map((g) => g.id).join(', ') || 'no games'}.`,\n      );\n    },\n  };\n};\n"],"mappings":"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"}

package/dist/client/availability.d.ts

@@ -0,0 +1,12 @@
+export declare const PIN_CHANGED = "joystyk:pin-changed";
+export type AvailabilityPorts = {
+    readonly root: Document;
+    readonly online: () => boolean;
+    readonly pins: () => Promise<readonly {
+        readonly id: string;
+    }[]>;
+};
+/** Keep catalog labels accurate across SPA navigation and pin changes. One cache read per
+ * refresh serves the entire listing. Unavailable links explain their state and do not
+ * navigate to a broken game while offline. */
+export declare const watchOfflineAvailability: (ports?: AvailabilityPorts) => (() => void);

package/dist/client/availability.js

@@ -0,0 +1,94 @@
+import { pinnedGames } from "./pinned.js";
+import { isGameId } from "@joystyk/contracts";
+//#region src/client/availability.ts
+var PIN_CHANGED = "joystyk:pin-changed";
+/** Keep catalog labels accurate across SPA navigation and pin changes. One cache read per
+* refresh serves the entire listing. Unavailable links explain their state and do not
+* navigate to a broken game while offline. */
+var watchOfflineAvailability = (ports = {
+	root: document,
+	online: () => navigator.onLine,
+	pins: () => pinnedGames()
+}) => {
+	let disposed = false;
+	let generation = 0;
+	let scheduled = false;
+	const roots = () => {
+		const found = [];
+		const visit = (root) => {
+			found.push(root);
+			for (const element of root.querySelectorAll("*")) if (element.shadowRoot !== null) visit(element.shadowRoot);
+		};
+		visit(ports.root);
+		return found;
+	};
+	const refresh = async () => {
+		const current = ++generation;
+		const ids = new Set((await ports.pins().catch(() => [])).map((pin) => pin.id));
+		if (disposed || current !== generation) return;
+		const offline = !ports.online();
+		const surfaces = roots();
+		observer.disconnect();
+		for (const surface of surfaces) observer.observe(surface, {
+			childList: true,
+			subtree: true
+		});
+		for (const label of surfaces.flatMap((surface) => [...surface.querySelectorAll("jy-offline-availability[game-id]")])) {
+			const id = label.getAttribute("game-id");
+			if (!isGameId(id)) continue;
+			const pinned = ids.has(id);
+			const message = pinned ? "Available offline" : offline ? "Unavailable offline" : "";
+			if (label.textContent !== message) label.textContent = message;
+			label.hidden = message === "";
+			label.dataset["available"] = String(pinned);
+			const link = (label.closest("article, li, tr") ?? label.parentElement)?.querySelector(`a[href="/games/${id}"]`);
+			if (link !== null && link !== void 0) {
+				if (offline && !pinned) link.setAttribute("aria-disabled", "true");
+				else link.removeAttribute("aria-disabled");
+			}
+		}
+	};
+	const schedule = () => {
+		if (disposed || scheduled) return;
+		scheduled = true;
+		queueMicrotask(() => {
+			scheduled = false;
+			if (!disposed) refresh();
+		});
+	};
+	const onClick = (event) => {
+		if (event.composedPath().find((target) => target instanceof Element && target.matches("a[aria-disabled=\"true\"]")) !== void 0 && !ports.online()) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	};
+	const observer = new MutationObserver((changes) => {
+		if (changes.some((change) => [...change.addedNodes].some((node) => node instanceof Element))) schedule();
+	});
+	observer.observe(ports.root, {
+		childList: true,
+		subtree: true
+	});
+	for (const name of [
+		"online",
+		"offline",
+		PIN_CHANGED
+	]) addEventListener(name, schedule);
+	ports.root.addEventListener("click", onClick, true);
+	schedule();
+	return () => {
+		disposed = true;
+		generation += 1;
+		observer.disconnect();
+		for (const name of [
+			"online",
+			"offline",
+			PIN_CHANGED
+		]) removeEventListener(name, schedule);
+		ports.root.removeEventListener("click", onClick, true);
+	};
+};
+//#endregion
+export { PIN_CHANGED, watchOfflineAvailability };
+
+//# sourceMappingURL=availability.js.map

package/dist/client/availability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability.js","names":[],"sources":["../../src/client/availability.ts"],"sourcesContent":["import { isGameId } from '@joystyk/contracts';\nimport { pinnedGames } from './pinned.ts';\n\nexport const PIN_CHANGED = 'joystyk:pin-changed';\nexport type AvailabilityPorts = {\n  readonly root: Document;\n  readonly online: () => boolean;\n  readonly pins: () => Promise<readonly { readonly id: string }[]>;\n};\n\n/** Keep catalog labels accurate across SPA navigation and pin changes. One cache read per\n * refresh serves the entire listing. Unavailable links explain their state and do not\n * navigate to a broken game while offline. */\nexport const watchOfflineAvailability = (\n  ports: AvailabilityPorts = {\n    root: document,\n    online: () => navigator.onLine,\n    pins: () => pinnedGames(),\n  },\n): (() => void) => {\n  let disposed = false;\n  let generation = 0;\n  let scheduled = false;\n  const roots = (): (Document | ShadowRoot)[] => {\n    const found: (Document | ShadowRoot)[] = [];\n    const visit = (root: Document | ShadowRoot): void => {\n      found.push(root);\n      for (const element of root.querySelectorAll('*')) if (element.shadowRoot !== null) visit(element.shadowRoot);\n    };\n    visit(ports.root);\n    return found;\n  };\n  const refresh = async (): Promise<void> => {\n    const current = ++generation;\n    const ids = new Set((await ports.pins().catch(() => [])).map((pin) => pin.id));\n    if (disposed || current !== generation) return;\n    const offline = !ports.online();\n    const surfaces = roots();\n    observer.disconnect();\n    for (const surface of surfaces) observer.observe(surface, { childList: true, subtree: true });\n    for (const label of surfaces.flatMap((surface) => [\n      ...surface.querySelectorAll<HTMLElement>('jy-offline-availability[game-id]'),\n    ])) {\n      const id = label.getAttribute('game-id');\n      if (!isGameId(id)) continue;\n      const pinned = ids.has(id);\n      const message = pinned ? 'Available offline' : offline ? 'Unavailable offline' : '';\n      if (label.textContent !== message) label.textContent = message;\n      label.hidden = message === '';\n      label.dataset['available'] = String(pinned);\n      const scope = label.closest('article, li, tr') ?? label.parentElement;\n      const link = scope?.querySelector<HTMLAnchorElement>(`a[href=\"/games/${id}\"]`);\n      if (link !== null && link !== undefined) {\n        if (offline && !pinned) link.setAttribute('aria-disabled', 'true');\n        else link.removeAttribute('aria-disabled');\n      }\n    }\n  };\n  const schedule = (): void => {\n    if (disposed || scheduled) return;\n    scheduled = true;\n    queueMicrotask(() => {\n      scheduled = false;\n      if (!disposed) void refresh();\n    });\n  };\n  const onClick = (event: Event): void => {\n    const link = event\n      .composedPath()\n      .find((target) => target instanceof Element && target.matches('a[aria-disabled=\"true\"]'));\n    if (link !== undefined && !ports.online()) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n  const observer = new MutationObserver((changes) => {\n    // A newly mounted custom element may hold its labels inside a shadow root;\n    // querySelector on the added host cannot see them. Text-only label updates\n    // do not schedule another refresh.\n    if (changes.some((change) => [...change.addedNodes].some((node) => node instanceof Element))) schedule();\n  });\n  observer.observe(ports.root, { childList: true, subtree: true });\n  for (const name of ['online', 'offline', PIN_CHANGED]) addEventListener(name, schedule);\n  ports.root.addEventListener('click', onClick, true);\n  schedule();\n  return () => {\n    disposed = true;\n    generation += 1;\n    observer.disconnect();\n    for (const name of ['online', 'offline', PIN_CHANGED]) removeEventListener(name, schedule);\n    ports.root.removeEventListener('click', onClick, true);\n  };\n};\n"],"mappings":";;;AAGA,IAAa,cAAc;;;;AAU3B,IAAa,4BACX,QAA2B;CACzB,MAAM;CACN,cAAc,UAAU;CACxB,YAAY,YAAY;AAC1B,MACiB;CACjB,IAAI,WAAW;CACf,IAAI,aAAa;CACjB,IAAI,YAAY;CAChB,MAAM,cAAyC;EAC7C,MAAM,QAAmC,CAAC;EAC1C,MAAM,SAAS,SAAsC;GACnD,MAAM,KAAK,IAAI;GACf,KAAK,MAAM,WAAW,KAAK,iBAAiB,GAAG,GAAG,IAAI,QAAQ,eAAe,MAAM,MAAM,QAAQ,UAAU;EAC7G;EACA,MAAM,MAAM,IAAI;EAChB,OAAO;CACT;CACA,MAAM,UAAU,YAA2B;EACzC,MAAM,UAAU,EAAE;EAClB,MAAM,MAAM,IAAI,KAAK,MAAM,MAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,EAAA,CAAG,KAAK,QAAQ,IAAI,EAAE,CAAC;EAC7E,IAAI,YAAY,YAAY,YAAY;EACxC,MAAM,UAAU,CAAC,MAAM,OAAO;EAC9B,MAAM,WAAW,MAAM;EACvB,SAAS,WAAW;EACpB,KAAK,MAAM,WAAW,UAAU,SAAS,QAAQ,SAAS;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAC5F,KAAK,MAAM,SAAS,SAAS,SAAS,YAAY,CAChD,GAAG,QAAQ,iBAA8B,kCAAkC,CAC7E,CAAC,GAAG;GACF,MAAM,KAAK,MAAM,aAAa,SAAS;GACvC,IAAI,CAAC,SAAS,EAAE,GAAG;GACnB,MAAM,SAAS,IAAI,IAAI,EAAE;GACzB,MAAM,UAAU,SAAS,sBAAsB,UAAU,wBAAwB;GACjF,IAAI,MAAM,gBAAgB,SAAS,MAAM,cAAc;GACvD,MAAM,SAAS,YAAY;GAC3B,MAAM,QAAQ,eAAe,OAAO,MAAM;GAE1C,MAAM,QADQ,MAAM,QAAQ,iBAAiB,KAAK,MAAM,cAAA,EACpC,cAAiC,kBAAkB,GAAG,GAAG;GAC7E,IAAI,SAAS,QAAQ,SAAS,KAAA,GAAW;IACvC,IAAI,WAAW,CAAC,QAAQ,KAAK,aAAa,iBAAiB,MAAM;SAC5D,KAAK,gBAAgB,eAAe;GAC3C;EACF;CACF;CACA,MAAM,iBAAuB;EAC3B,IAAI,YAAY,WAAW;EAC3B,YAAY;EACZ,qBAAqB;GACnB,YAAY;GACZ,IAAI,CAAC,UAAU,QAAa;EAC9B,CAAC;CACH;CACA,MAAM,WAAW,UAAuB;EAItC,IAHa,MACV,aAAa,CAAC,CACd,MAAM,WAAW,kBAAkB,WAAW,OAAO,QAAQ,2BAAyB,CACrF,MAAS,KAAA,KAAa,CAAC,MAAM,OAAO,GAAG;GACzC,MAAM,eAAe;GACrB,MAAM,yBAAyB;EACjC;CACF;CACA,MAAM,WAAW,IAAI,kBAAkB,YAAY;EAIjD,IAAI,QAAQ,MAAM,WAAW,CAAC,GAAG,OAAO,UAAU,CAAC,CAAC,MAAM,SAAS,gBAAgB,OAAO,CAAC,GAAG,SAAS;CACzG,CAAC;CACD,SAAS,QAAQ,MAAM,MAAM;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC;CAC/D,KAAK,MAAM,QAAQ;EAAC;EAAU;EAAW;CAAW,GAAG,iBAAiB,MAAM,QAAQ;CACtF,MAAM,KAAK,iBAAiB,SAAS,SAAS,IAAI;CAClD,SAAS;CACT,aAAa;EACX,WAAW;EACX,cAAc;EACd,SAAS,WAAW;EACpB,KAAK,MAAM,QAAQ;GAAC;GAAU;GAAW;EAAW,GAAG,oBAAoB,MAAM,QAAQ;EACzF,MAAM,KAAK,oBAAoB,SAAS,SAAS,IAAI;CACvD;AACF"}

package/dist/client/control.d.ts

@@ -0,0 +1,3 @@
+import { type Control } from '../control.js';
+/** Reads the flag file. A failure (offline, a bad file) reads as no instruction. */
+export declare const readControl: () => Promise<Control | null>;

package/dist/client/control.js

@@ -0,0 +1,19 @@
+import { CONTROL_URL } from "../names.js";
+import { parseControl } from "../control.js";
+//#region src/client/control.ts
+/** Reads the flag file. A failure (offline, a bad file) reads as no instruction. */
+var readControl = async () => {
+	try {
+		const response = await fetch(CONTROL_URL, {
+			cache: "no-store",
+			credentials: "omit"
+		});
+		return response.ok ? parseControl(await response.json()) : null;
+	} catch {
+		return null;
+	}
+};
+//#endregion
+export { readControl };
+
+//# sourceMappingURL=control.js.map

package/dist/client/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","names":[],"sources":["../../src/client/control.ts"],"sourcesContent":["// The page reads the flag file (../control.ts) straight from the network: the worker never\n// caches it, and the request skips the HTTP cache too.\nimport { parseControl, type Control } from '../control.ts';\nimport { CONTROL_URL } from '../names.ts';\n\n/** Reads the flag file. A failure (offline, a bad file) reads as no instruction. */\nexport const readControl = async (): Promise<Control | null> => {\n  try {\n    const response = await fetch(CONTROL_URL, { cache: 'no-store', credentials: 'omit' });\n    return response.ok ? parseControl(await response.json()) : null;\n  } catch {\n    return null;\n  }\n};\n"],"mappings":";;;;AAMA,IAAa,cAAc,YAAqC;CAC9D,IAAI;EACF,MAAM,WAAW,MAAM,MAAM,aAAa;GAAE,OAAO;GAAY,aAAa;EAAO,CAAC;EACpF,OAAO,SAAS,KAAK,aAAa,MAAM,SAAS,KAAK,CAAC,IAAI;CAC7D,QAAQ;EACN,OAAO;CACT;AACF"}

package/dist/client/elements.d.ts

@@ -0,0 +1,45 @@
+import { type PinPorts } from './pins.js';
+/** `<jy-update-toast>`: says an update is ready and offers Refresh or Later. */
+export declare class UpdateToast extends HTMLElement {
+    #private;
+    /** Called with 'refresh' or 'later'. */
+    onChoice: (choice: 'refresh' | 'later') => void;
+    constructor();
+}
+/**
+ * `<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.
+ */
+export declare class SecurityUpdate extends HTMLElement {
+    #private;
+    /** Called once, when the player chooses Update now. */
+    onUpdate: () => void;
+    constructor();
+    connectedCallback(): void;
+}
+/**
+ * `<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.
+ */
+export declare class OfflineToggle extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    /** Swapped in tests. */
+    ports: () => PinPorts;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+/** Registers the elements once. */
+export declare const definePwaElements: () => void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'jy-update-toast': UpdateToast;
+        'jy-security-update': SecurityUpdate;
+        'jy-offline-toggle': OfflineToggle;
+    }
+}

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;