@joystyk/ui 0.0.0 → 0.2.0

package/dist/ad-slot.js

@@ -0,0 +1,628 @@
+import { isSlotId, slot, slotBoxStyles } from "./slots.js";
+import { SLOT_SURFACES, adQueryUrl, defaultSurface, isContextId, parseAdFill } from "./ad-wire.js";
+import { compiled } from "@gyral/core/compiled";
+import { command, css, define, defineDriver, defineHook, nothing, prop, provideDrivers, subscription } from "@gyral/core";
+//#region src/ad-slot.ts
+var _gyral$t0 = {
+	"id": "q51qqnbqkd",
+	"html": "<a class=\"fill creative\" rel=\"sponsored noopener external\" data-intent-on=\"jy-ad-image\"> <img decoding=\"async\"> <span class=\"headline\"></span> </a>",
+	"parts": [
+		[
+			3,
+			[0],
+			"href"
+		],
+		[
+			3,
+			[0],
+			"data-intent"
+		],
+		[
+			3,
+			[0, 1],
+			"src"
+		],
+		[
+			3,
+			[0, 1],
+			"alt"
+		],
+		[
+			3,
+			[0, 1],
+			"width"
+		],
+		[
+			3,
+			[0, 1],
+			"height"
+		],
+		[7, [0, 1]],
+		[1, [0, 3]]
+	],
+	"segments": [
+		"<a class=\"fill creative\" rel=\"sponsored noopener external\" data-intent-on=\"jy-ad-image\"",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		"> <img decoding=\"async\"",
+		{
+			"k": "attr",
+			"name": "src"
+		},
+		{
+			"k": "attr",
+			"name": "alt"
+		},
+		{
+			"k": "attr",
+			"name": "width"
+		},
+		{
+			"k": "attr",
+			"name": "height"
+		},
+		{ "k": "hook" },
+		"> <span class=\"headline\">",
+		{
+			"k": "child",
+			"in": "span"
+		},
+		"</span> </a>"
+	]
+};
+var _gyral$t1 = {
+	"id": "1fbaoqud476",
+	"html": "<a class=\"fill house\"> <span class=\"headline\"></span> <span class=\"text\"></span> <span class=\"cta\"></span> </a>",
+	"parts": [
+		[
+			3,
+			[0],
+			"href"
+		],
+		[1, [0, 1]],
+		[1, [0, 3]],
+		[1, [0, 5]]
+	],
+	"segments": [
+		"<a class=\"fill house\"",
+		{
+			"k": "attr",
+			"name": "href"
+		},
+		"> <span class=\"headline\">",
+		{
+			"k": "child",
+			"in": "span"
+		},
+		"</span> <span class=\"text\">",
+		{
+			"k": "child",
+			"in": "span"
+		},
+		"</span> <span class=\"cta\">",
+		{
+			"k": "child",
+			"in": "span"
+		},
+		"</span> </a>"
+	]
+};
+var _gyral$t2 = {
+	"id": "2bnfexl58wh",
+	"html": "<div part=\"box\" data-intent-on=\"jy-ad-near\"><p class=\"label\"></p></div>",
+	"parts": [
+		[
+			3,
+			[0],
+			"class"
+		],
+		[
+			3,
+			[0],
+			"data-slot"
+		],
+		[
+			3,
+			[0],
+			"data-flow"
+		],
+		[
+			3,
+			[0],
+			"data-intent"
+		],
+		[7, [0]],
+		[1, [0, 0]],
+		[0, [0]]
+	],
+	"segments": [
+		"<div part=\"box\" data-intent-on=\"jy-ad-near\"",
+		{
+			"k": "attr",
+			"name": "class"
+		},
+		{
+			"k": "attr",
+			"name": "data-slot"
+		},
+		{
+			"k": "attr",
+			"name": "data-flow"
+		},
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		{ "k": "hook" },
+		"><p class=\"label\">",
+		{
+			"k": "child",
+			"in": "p"
+		},
+		"</p>",
+		{
+			"k": "child",
+			"in": "div"
+		},
+		"</div>"
+	]
+};
+/** The v1 source: every visitor sees ads, so it never changes. */
+var alwaysShowAds = {
+	get: () => "show",
+	subscribe: () => () => {}
+};
+var watchEntitlement = (source) => subscription("ad-entitlement", (emit) => {
+	emit(source.get());
+	return source.subscribe(emit);
+});
+/** The default entitlement driver: `alwaysShowAds`. */
+var adEntitlement = watchEntitlement(alwaysShowAds);
+/** Gives every `<ad-slot>` below `element` its entitlement from `source`. */
+var provideAdEntitlement = (element, source) => provideDrivers(element, { "ad-entitlement": watchEntitlement(source) });
+/** `navigator.onLine` now and on every `online` / `offline` event. */
+var connectivity = subscription("connectivity", (emit) => {
+	const report = () => emit(navigator.onLine);
+	report();
+	addEventListener("online", report);
+	addEventListener("offline", report);
+	return () => {
+		removeEventListener("online", report);
+		removeEventListener("offline", report);
+	};
+});
+/**
+* Asks the ad endpoint for a slot's fill and parses the answer at the boundary. No cookies go
+* with it. Fails on a network error, a non-2xx status or an answer that doesn't parse.
+*/
+var adServer = defineDriver({
+	name: "ad-server",
+	run: async (url, { signal }) => {
+		const response = await fetch(url, {
+			signal,
+			credentials: "omit",
+			headers: { accept: "application/json" }
+		});
+		if (!response.ok) throw new Error(`ad endpoint answered ${String(response.status)}`);
+		const fill = parseAdFill(await response.json());
+		if (fill === null) throw new Error("ad endpoint answer did not parse");
+		return fill;
+	},
+	toError: (cause) => cause instanceof Error ? cause.message : String(cause)
+});
+/** Sends an impression beacon: a bodiless POST that outlives the page, without cookies. */
+var adBeacon = defineDriver({
+	name: "ad-beacon",
+	run: async (url) => {
+		await fetch(url, {
+			method: "POST",
+			keepalive: true,
+			credentials: "omit"
+		});
+	},
+	toError: (cause) => cause instanceof Error ? cause.message : String(cause)
+});
+/** What the slot shows: its reserved box (empty or filled), or nothing at all. Pure. */
+var slotPresentation = (s) => s.entitlement === "hide" || s.online === false || s.ad._tag === "Empty" ? "collapsed" : "reserved";
+/** A Standard Schema from a type guard, so an invalid attribute is reported, not guessed at. */
+var guard = (is, message) => ({ "~standard": {
+	version: 1,
+	vendor: "joystyk",
+	validate: (value) => is(value) ? { value } : { issues: [{ message }] }
+} });
+var isSurface = (value) => SLOT_SURFACES.includes(value);
+var props = {
+	/** The registry id (attribute `slot-id`; `slot` is taken by the platform). */
+	slotId: prop.string({
+		required: true,
+		schema: guard(isSlotId, "Expected a slot id from packages/ui/src/slots.ts.")
+	}),
+	/** The kind of page the slot is on (attribute `page`). Default: the slot's first surface. */
+	page: prop.string({ schema: guard(isSurface, `Expected one of ${SLOT_SURFACES.join(", ")}.`) }),
+	/** The game the page or screen is about (attribute `game-id`). */
+	gameId: prop.string({ schema: guard(isContextId, "Expected a kebab-case game id.") }),
+	/** The category the page is about (attribute `category`). */
+	category: prop.string({ schema: guard(isContextId, "Expected a kebab-case category id.") })
+};
+/** The context the slot sends: what the page is about, never who is looking. */
+var queryOf = (p) => ({
+	slot: p.slotId,
+	page: p.page ?? defaultSurface(p.slotId),
+	game: p.gameId ?? null,
+	category: p.category ?? null
+});
+var watchAds = () => command(adEntitlement, void 0, { onSuccess: (entitlement) => ({
+	_tag: "Entitled",
+	entitlement
+}) });
+var watchConnectivity = () => command(connectivity, void 0, { onSuccess: (online) => ({
+	_tag: "Connectivity",
+	online
+}) });
+/** Asks the endpoint for `url`'s fill; the latest request wins. */
+var requestFill = (url) => command(adServer, url, {
+	onSuccess: (fill) => ({
+		_tag: "Loaded",
+		url,
+		fill
+	}),
+	onFailure: () => ({
+		_tag: "LoadFailed",
+		url
+	}),
+	key: "ad-server",
+	concurrency: "switch"
+});
+/** Reports an impression. Nothing comes back: a lost beacon is a lost count, never an error shown. */
+var sendBeacon = (url) => command(adBeacon, url, { onFailure: () => void 0 });
+/** Starts the request once the box is near, ads are shown and the browser is online. */
+var load = (s, p) => {
+	if (!s.near || s.ad._tag !== "Waiting" || s.entitlement === "hide" || s.online === false) return s;
+	const url = adQueryUrl(queryOf(p));
+	return [{
+		...s,
+		ad: {
+			_tag: "Loading",
+			url
+		}
+	}, [requestFill(url)]];
+};
+var urlOf = (ad) => ad._tag === "Waiting" ? null : ad.url;
+var NEAR_EVENT = "jy-ad-near";
+var IMAGE_EVENT = "jy-ad-image";
+var observers = /* @__PURE__ */ new WeakMap();
+/**
+* Tells the slot, once, when its box comes within 300 px of the viewport: the lazy load.
+* Dispatches `jy-ad-near` on the box.
+*/
+var nearViewport = defineHook({
+	client: (el, _args, prev) => {
+		if (prev !== void 0) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries.some((e) => e.isIntersecting)) return;
+			observer.disconnect();
+			el.dispatchEvent(new CustomEvent(NEAR_EVENT, { bubbles: true }));
+		}, { rootMargin: "300px" });
+		observer.observe(el);
+		observers.set(el, () => observer.disconnect());
+	},
+	dispose: (el) => {
+		observers.get(el)?.();
+		observers.delete(el);
+	}
+});
+/**
+* Reports a creative's image: `seen` once it has loaded and at least half of it is on
+* screen, `broken` if it fails to load. Dispatches `jy-ad-image` with the status as detail.
+*/
+var reportImage = defineHook({
+	client: (el, [src], prev) => {
+		if (prev?.[0] === src) return;
+		observers.get(el)?.();
+		if (!(el instanceof HTMLImageElement)) return;
+		let visible = false;
+		let done = false;
+		const report = (status) => {
+			if (done) return;
+			done = true;
+			stop();
+			el.dispatchEvent(new CustomEvent(IMAGE_EVENT, {
+				bubbles: true,
+				detail: status
+			}));
+		};
+		const check = () => {
+			if (el.complete && el.naturalWidth > 0 && visible) report("seen");
+		};
+		const onError = () => report("broken");
+		const observer = new IntersectionObserver((entries) => {
+			visible = entries.some((e) => e.isIntersecting);
+			check();
+		}, { threshold: .5 });
+		const stop = () => {
+			observer.disconnect();
+			el.removeEventListener("load", check);
+			el.removeEventListener("error", onError);
+		};
+		el.addEventListener("load", check);
+		el.addEventListener("error", onError);
+		observer.observe(el);
+		observers.set(el, stop);
+		if (el.complete && el.naturalWidth === 0 && el.getAttribute("src") !== "") queueMicrotask(() => {
+			if (el.complete && el.naturalWidth === 0) onError();
+		});
+	},
+	dispose: (el) => {
+		observers.get(el)?.();
+		observers.delete(el);
+	}
+});
+var styles = css`
+  @layer components {
+    :host {
+      display: block;
+      container-type: inline-size;
+    }
+    :host(:state(collapsed)) {
+      display: none;
+    }
+    .box {
+      box-sizing: border-box;
+      min-block-size: 0;
+      /* The same grid empty or filled: the label never moves when a fill arrives (no layout shift). */
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: var(--jy-space-3xs, 0.25rem);
+      margin-inline: auto;
+      padding: var(--jy-space-2xs, 0.5rem);
+      border: 1px dashed color-mix(in oklch, var(--jy-text, CanvasText) 30%, transparent);
+      border-radius: var(--jy-radius-s, 0.5rem);
+      background: repeating-linear-gradient(
+        135deg,
+        transparent 0 10px,
+        color-mix(in oklch, var(--jy-text, CanvasText) 4%, transparent) 10px 20px
+      );
+      color: var(--jy-text-muted, GrayText);
+      font-size: 0.8rem;
+      text-align: center;
+      overflow: clip;
+      contain: layout paint;
+    }
+    .box.filled {
+      border-style: solid;
+      background: var(--jy-surface-raised, Canvas);
+    }
+    p {
+      margin: 0;
+    }
+    /* The label reads before anything else in the slot, as the ASA's 2022 rulings ask: bold
+       12 px capitals on a solid chip in the page's text colour (over 14:1 contrast in both
+       schemes), unlike the slot's surface and outside the creative (advertising-policy.md, 5). */
+    .label {
+      justify-self: start;
+      padding-inline: 0.5em;
+      border-radius: 0.25rem;
+      background: var(--jy-text, CanvasText);
+      color: var(--jy-surface-raised, Canvas);
+      font-family: var(--jy-font-mono, ui-monospace, monospace);
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1.4;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      text-align: start;
+    }
+    .fill {
+      display: grid;
+      grid-template-rows: minmax(0, 1fr) auto;
+      gap: var(--jy-space-3xs, 0.25rem);
+      min-block-size: 0;
+      color: var(--jy-text, CanvasText);
+      text-decoration: none;
+      border-radius: var(--jy-radius-s, 0.5rem);
+    }
+    .fill:focus-visible {
+      outline: 2px solid var(--jy-focus-ring, Highlight);
+      outline-offset: 2px;
+    }
+    .fill:hover .headline,
+    .fill:hover .cta {
+      text-decoration: underline;
+    }
+    img {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      min-block-size: 0;
+      object-fit: contain;
+    }
+    .headline {
+      font-weight: 600;
+      line-height: 1.25;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      overflow: hidden;
+    }
+    .house {
+      grid-template-rows: auto auto auto;
+      align-content: center;
+      justify-items: center;
+    }
+    .house .text {
+      color: var(--jy-text-muted, GrayText);
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 5;
+      line-clamp: 5;
+      overflow: hidden;
+    }
+    .house .cta {
+      color: var(--jy-accent, LinkText);
+      font-weight: 600;
+    }
+    /* Short boxes (banners, the presenting line): image and words side by side. */
+    .box[data-flow='row'] {
+      padding-block: var(--jy-space-3xs, 0.25rem);
+      gap: 0;
+    }
+    .box.filled[data-flow='row'] .fill {
+      grid-template-rows: minmax(0, 1fr);
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+      align-items: center;
+      text-align: start;
+    }
+    .box.filled[data-flow='row'] .house {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-rows: auto auto;
+      justify-items: start;
+    }
+    .box.filled[data-flow='row'] .house .text {
+      grid-column: 1;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+    }
+    .box.filled[data-flow='row'] .house .cta {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
+    .box.filled[data-flow='row'] .headline {
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+    }
+    @media (forced-colors: active) {
+      .box {
+        border-color: CanvasText;
+      }
+      .label {
+        border: 1px solid CanvasText;
+      }
+    }
+  }
+`;
+/** Banners and the presenting line are short: their fill lays out in a row. */
+var flowOf = (slotId) => {
+	const shape = slot(slotId).shape;
+	return shape === "medium rectangle" || shape === "tall rail" ? "column" : "row";
+};
+var creativeView = (f, intent) => compiled(_gyral$t0, [
+	f.href,
+	intent,
+	f.image.src,
+	f.alt,
+	f.image.width,
+	f.image.height,
+	reportImage(f.image.src),
+	f.headline
+]);
+var houseView = (f) => compiled(_gyral$t1, [
+	f.href,
+	f.headline,
+	f.text,
+	f.cta
+]);
+var AdSlot = define()("ad-slot", {
+	props,
+	init: () => ({
+		entitlement: "show",
+		online: null,
+		near: false,
+		ad: { _tag: "Waiting" }
+	}),
+	subscriptions: () => [watchAds(), watchConnectivity()],
+	states: (s) => ({
+		collapsed: slotPresentation(s) === "collapsed",
+		online: s.online === true
+	}),
+	intent: {
+		Near: () => ({ _tag: "Near" }),
+		Image: ({ event }) => {
+			const status = event instanceof CustomEvent ? event.detail : void 0;
+			return status === "seen" || status === "broken" ? {
+				_tag: "Image",
+				status
+			} : void 0;
+		}
+	},
+	update: {
+		Entitled: (s, m, { props: p }) => load({
+			...s,
+			entitlement: m.entitlement
+		}, p),
+		Connectivity: (s, m, { props: p }) => load({
+			...s,
+			online: m.online
+		}, p),
+		Near: (s, _m, { props: p }) => load({
+			...s,
+			near: true
+		}, p),
+		Loaded: (s, m) => urlOf(s.ad) !== m.url || s.ad._tag !== "Loading" ? s : {
+			...s,
+			ad: m.fill.kind === "collapse" ? {
+				_tag: "Empty",
+				url: m.url
+			} : {
+				_tag: "Filled",
+				url: m.url,
+				fill: m.fill,
+				seen: false
+			}
+		},
+		LoadFailed: (s, m) => urlOf(s.ad) !== m.url || s.ad._tag !== "Loading" ? s : {
+			...s,
+			ad: {
+				_tag: "Empty",
+				url: m.url
+			}
+		},
+		Image: (s, m) => {
+			if (s.ad._tag !== "Filled" || s.ad.fill.kind !== "creative") return s;
+			if (m.status === "broken") return {
+				...s,
+				ad: {
+					_tag: "Empty",
+					url: s.ad.url
+				}
+			};
+			return s.ad.seen ? s : [{
+				...s,
+				ad: {
+					...s.ad,
+					seen: true
+				}
+			}, [sendBeacon(s.ad.fill.beacon)]];
+		},
+		PropsChanged: (s, { props: p }) => {
+			const url = adQueryUrl(queryOf(p));
+			return urlOf(s.ad) === url ? s : load({
+				...s,
+				ad: { _tag: "Waiting" }
+			}, p);
+		}
+	},
+	view: (s, i, { props: p }) => {
+		if (slotPresentation(s) === "collapsed") return nothing;
+		const fill = s.ad._tag === "Filled" ? s.ad.fill : null;
+		return compiled(_gyral$t2, [
+			fill === null ? "box" : "box filled",
+			p.slotId,
+			flowOf(p.slotId),
+			i.Near,
+			nearViewport(),
+			slot(p.slotId).label,
+			fill === null ? nothing : fill.kind === "creative" ? creativeView(fill, i.Image) : houseView(fill)
+		]);
+	},
+	styles: [styles, slotBoxStyles()]
+});
+//#endregion
+export { AdSlot, adBeacon, adEntitlement, adServer, alwaysShowAds, connectivity, provideAdEntitlement, queryOf, requestFill, slotPresentation };
+
+//# sourceMappingURL=ad-slot.js.map

package/dist/ad-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ad-slot.js","names":["_gyral$compiled"],"sources":["../src/ad-slot.ts"],"sourcesContent":["// <ad-slot>: the one billboard component (docs/design-docs/monetization.md). It reserves its\n// slot's exact box from the slot registry, labels it as advertising and, once the box comes\n// near the viewport, asks the site's ad endpoint what to show: a booked creative (an image\n// and a headline, linked through the first-party click notice), a house promotion, or\n// nothing. Whatever arrives fills the reserved box, so nothing shifts. Games never render it;\n// it belongs to the frame (D-07), and nothing it shows ever enters a game's canvas.\n//\n// The request carries the page's context only (ad-wire.ts): the slot, the kind of page and\n// the game or category it is about. No cookies (`credentials: 'omit'`), no user or device id.\n//\n// Collapse rules, in `slotPresentation`:\n// - the entitlement source says \"hide\" (ad-free, v2): the slot collapses;\n// - the browser is offline: the slot collapses. Until the connectivity driver first reports,\n//   the slot assumes it is online and keeps the box the server rendered; on a page the\n//   service worker served offline (`data-offline` on <html>), tokens.css hides it instead\n//   until it hears it is online (its `online` state), so nothing shifts at first paint;\n// - the endpoint said \"collapse\", failed, or sent something that doesn't parse, or the\n//   creative's image failed to load: the slot collapses;\n// - otherwise it keeps its reserved box; at a width where the registry has no box (the rail\n//   on narrow screens) CSS hides it.\n//\n// Impressions: a creative counts once, when its image has loaded and at least half of it is\n// on screen; the slot then sends one beacon (monetization.md, \"Counting\"). House promotions\n// aren't counted.\n//\n// The entitlement source, the connectivity signal, the ad request and the beacon are drivers,\n// substituted by name: `provideAdEntitlement(element, source)` above the slots, `el.drivers`\n// or `provideDrivers` in tests.\nimport {\n  command,\n  css,\n  define,\n  defineHook,\n  defineDriver,\n  html,\n  nothing,\n  prop,\n  provideDrivers,\n  subscription,\n  type Command,\n  type Next,\n  type PropsOf,\n} from '@gyral/core';\nimport {\n  adQueryUrl,\n  defaultSurface,\n  isContextId,\n  parseAdFill,\n  SLOT_SURFACES,\n  type AdFill,\n  type AdQuery,\n  type CreativeFill,\n  type HouseFill,\n} from './ad-wire.ts';\nimport { isSlotId, slot, slotBoxStyles, type SlotId, type SlotSurface } from './slots.ts';\n\n/** Whether the visitor sees ads. 'hide' arrives with ad-free entitlements in v2. */\nexport type AdEntitlement = 'show' | 'hide';\n\n/** Where `<ad-slot>` learns whether to show ads. */\nexport interface AdEntitlementSource {\n  get(): AdEntitlement;\n  /** Calls `listener` on every change; returns how to stop. */\n  subscribe(listener: (entitlement: AdEntitlement) => void): () => void;\n}\n\n/** The v1 source: every visitor sees ads, so it never changes. */\nexport const alwaysShowAds: AdEntitlementSource = {\n  get: () => 'show',\n  subscribe: () => () => {},\n};\n\nconst watchEntitlement = (source: AdEntitlementSource) =>\n  subscription<AdEntitlement>('ad-entitlement', (emit) => {\n    emit(source.get());\n    return source.subscribe(emit);\n  });\n\n/** The default entitlement driver: `alwaysShowAds`. */\nexport const adEntitlement = watchEntitlement(alwaysShowAds);\n\n/** Gives every `<ad-slot>` below `element` its entitlement from `source`. */\nexport const provideAdEntitlement = (element: Element, source: AdEntitlementSource): (() => void) =>\n  provideDrivers(element, { 'ad-entitlement': watchEntitlement(source) });\n\n/** `navigator.onLine` now and on every `online` / `offline` event. */\nexport const connectivity = subscription<boolean>('connectivity', (emit) => {\n  const report = (): void => emit(navigator.onLine);\n  report();\n  addEventListener('online', report);\n  addEventListener('offline', report);\n  return () => {\n    removeEventListener('online', report);\n    removeEventListener('offline', report);\n  };\n});\n\n/**\n * Asks the ad endpoint for a slot's fill and parses the answer at the boundary. No cookies go\n * with it. Fails on a network error, a non-2xx status or an answer that doesn't parse.\n */\nexport const adServer = defineDriver<string, AdFill, string>({\n  name: 'ad-server',\n  run: async (url, { signal }) => {\n    const response = await fetch(url, { signal, credentials: 'omit', headers: { accept: 'application/json' } });\n    if (!response.ok) throw new Error(`ad endpoint answered ${String(response.status)}`);\n    const fill = parseAdFill(await response.json());\n    if (fill === null) throw new Error('ad endpoint answer did not parse');\n    return fill;\n  },\n  toError: (cause) => (cause instanceof Error ? cause.message : String(cause)),\n});\n\n/** Sends an impression beacon: a bodiless POST that outlives the page, without cookies. */\nexport const adBeacon = defineDriver<string, void, string>({\n  name: 'ad-beacon',\n  run: async (url) => {\n    await fetch(url, { method: 'POST', keepalive: true, credentials: 'omit' });\n  },\n  toError: (cause) => (cause instanceof Error ? cause.message : String(cause)),\n});\n\n/** Where the slot's fill stands. */\nexport type AdLoad =\n  /** Not near the viewport yet: nothing asked. */\n  | { readonly _tag: 'Waiting' }\n  | { readonly _tag: 'Loading'; readonly url: string }\n  | { readonly _tag: 'Filled'; readonly url: string; readonly fill: CreativeFill | HouseFill; readonly seen: boolean }\n  /** Nothing to show, or something failed: the slot collapses. */\n  | { readonly _tag: 'Empty'; readonly url: string };\n\nexport interface AdSlotState {\n  readonly entitlement: AdEntitlement;\n  /** What the connectivity driver last said; null until it first reports (assumed online). */\n  readonly online: boolean | null;\n  /** The box has come near the viewport once. */\n  readonly near: boolean;\n  readonly ad: AdLoad;\n}\n\nexport type AdSlotMsg =\n  | { readonly _tag: 'Entitled'; readonly entitlement: AdEntitlement }\n  | { readonly _tag: 'Connectivity'; readonly online: boolean }\n  /** The box came within a screen's reach of the viewport. */\n  | { readonly _tag: 'Near' }\n  | { readonly _tag: 'Loaded'; readonly url: string; readonly fill: AdFill }\n  | { readonly _tag: 'LoadFailed'; readonly url: string }\n  /** The creative's image loaded and is at least half on screen, or it failed to load. */\n  | { readonly _tag: 'Image'; readonly status: 'seen' | 'broken' };\n\n/** What the slot shows: its reserved box (empty or filled), or nothing at all. Pure. */\nexport const slotPresentation = (s: AdSlotState): 'reserved' | 'collapsed' =>\n  s.entitlement === 'hide' || s.online === false || s.ad._tag === 'Empty' ? 'collapsed' : 'reserved';\n\n/** A Standard Schema from a type guard, so an invalid attribute is reported, not guessed at. */\nconst guard = <T extends string>(is: (value: unknown) => value is T, message: string) => ({\n  '~standard': {\n    version: 1 as const,\n    vendor: 'joystyk',\n    validate: (value: unknown): { readonly value: T } | { readonly issues: readonly { readonly message: string }[] } =>\n      is(value) ? { value } : { issues: [{ message }] },\n  },\n});\n\nconst isSurface = (value: unknown): value is SlotSurface => (SLOT_SURFACES as readonly unknown[]).includes(value);\n\nconst props = {\n  /** The registry id (attribute `slot-id`; `slot` is taken by the platform). */\n  slotId: prop.string({\n    required: true,\n    schema: guard<SlotId>(isSlotId, 'Expected a slot id from packages/ui/src/slots.ts.'),\n  }),\n  /** The kind of page the slot is on (attribute `page`). Default: the slot's first surface. */\n  page: prop.string({ schema: guard(isSurface, `Expected one of ${SLOT_SURFACES.join(', ')}.`) }),\n  /** The game the page or screen is about (attribute `game-id`). */\n  gameId: prop.string({ schema: guard(isContextId, 'Expected a kebab-case game id.') }),\n  /** The category the page is about (attribute `category`). */\n  category: prop.string({ schema: guard(isContextId, 'Expected a kebab-case category id.') }),\n};\nexport type AdSlotProps = PropsOf<typeof props>;\n\n/** The context the slot sends: what the page is about, never who is looking. */\nexport const queryOf = (p: AdSlotProps): AdQuery => ({\n  slot: p.slotId,\n  page: p.page ?? defaultSurface(p.slotId),\n  game: p.gameId ?? null,\n  category: p.category ?? null,\n});\n\nconst watchAds = (): Command<AdSlotMsg> =>\n  command(adEntitlement, undefined, { onSuccess: (entitlement): AdSlotMsg => ({ _tag: 'Entitled', entitlement }) });\nconst watchConnectivity = (): Command<AdSlotMsg> =>\n  command(connectivity, undefined, { onSuccess: (online): AdSlotMsg => ({ _tag: 'Connectivity', online }) });\n\n/** Asks the endpoint for `url`'s fill; the latest request wins. */\nexport const requestFill = (url: string): Command<AdSlotMsg> =>\n  command(adServer, url, {\n    onSuccess: (fill): AdSlotMsg => ({ _tag: 'Loaded', url, fill }),\n    onFailure: (): AdSlotMsg => ({ _tag: 'LoadFailed', url }),\n    key: 'ad-server',\n    concurrency: 'switch',\n  });\n\n/** Reports an impression. Nothing comes back: a lost beacon is a lost count, never an error shown. */\nconst sendBeacon = (url: string): Command<AdSlotMsg> =>\n  command<string, void, string, AdSlotMsg>(adBeacon, url, { onFailure: () => undefined });\n\n/** Starts the request once the box is near, ads are shown and the browser is online. */\nconst load = (s: AdSlotState, p: AdSlotProps): Next<AdSlotState, AdSlotMsg> => {\n  if (!s.near || s.ad._tag !== 'Waiting' || s.entitlement === 'hide' || s.online === false) return s;\n  const url = adQueryUrl(queryOf(p));\n  return [{ ...s, ad: { _tag: 'Loading', url } }, [requestFill(url)]];\n};\n\nconst urlOf = (ad: AdLoad): string | null => (ad._tag === 'Waiting' ? null : ad.url);\n\nconst NEAR_EVENT = 'jy-ad-near';\nconst IMAGE_EVENT = 'jy-ad-image';\n\nconst observers = new WeakMap<Element, () => void>();\n\n/**\n * Tells the slot, once, when its box comes within 300 px of the viewport: the lazy load.\n * Dispatches `jy-ad-near` on the box.\n */\nconst nearViewport = defineHook<[]>({\n  client: (el, _args, prev) => {\n    if (prev !== undefined) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (!entries.some((e) => e.isIntersecting)) return;\n        observer.disconnect();\n        el.dispatchEvent(new CustomEvent(NEAR_EVENT, { bubbles: true }));\n      },\n      { rootMargin: '300px' },\n    );\n    observer.observe(el);\n    observers.set(el, () => observer.disconnect());\n  },\n  dispose: (el) => {\n    observers.get(el)?.();\n    observers.delete(el);\n  },\n});\n\n/**\n * Reports a creative's image: `seen` once it has loaded and at least half of it is on\n * screen, `broken` if it fails to load. Dispatches `jy-ad-image` with the status as detail.\n */\nconst reportImage = defineHook<[src: string]>({\n  client: (el, [src], prev) => {\n    if (prev?.[0] === src) return;\n    observers.get(el)?.();\n    if (!(el instanceof HTMLImageElement)) return;\n    let visible = false;\n    let done = false;\n    const report = (status: 'seen' | 'broken'): void => {\n      if (done) return;\n      done = true;\n      stop();\n      el.dispatchEvent(new CustomEvent(IMAGE_EVENT, { bubbles: true, detail: status }));\n    };\n    const check = (): void => {\n      if (el.complete && el.naturalWidth > 0 && visible) report('seen');\n    };\n    const onError = (): void => report('broken');\n    const observer = new IntersectionObserver(\n      (entries) => {\n        visible = entries.some((e) => e.isIntersecting);\n        check();\n      },\n      { threshold: 0.5 },\n    );\n    const stop = (): void => {\n      observer.disconnect();\n      el.removeEventListener('load', check);\n      el.removeEventListener('error', onError);\n    };\n    el.addEventListener('load', check);\n    el.addEventListener('error', onError);\n    observer.observe(el);\n    observers.set(el, stop);\n    if (el.complete && el.naturalWidth === 0 && el.getAttribute('src') !== '') {\n      // Already failed before the listener was attached.\n      queueMicrotask(() => {\n        if (el.complete && el.naturalWidth === 0) onError();\n      });\n    }\n  },\n  dispose: (el) => {\n    observers.get(el)?.();\n    observers.delete(el);\n  },\n});\n\nconst styles = css`\n  @layer components {\n    :host {\n      display: block;\n      container-type: inline-size;\n    }\n    :host(:state(collapsed)) {\n      display: none;\n    }\n    .box {\n      box-sizing: border-box;\n      min-block-size: 0;\n      /* The same grid empty or filled: the label never moves when a fill arrives (no layout shift). */\n      grid-template-rows: auto minmax(0, 1fr);\n      gap: var(--jy-space-3xs, 0.25rem);\n      margin-inline: auto;\n      padding: var(--jy-space-2xs, 0.5rem);\n      border: 1px dashed color-mix(in oklch, var(--jy-text, CanvasText) 30%, transparent);\n      border-radius: var(--jy-radius-s, 0.5rem);\n      background: repeating-linear-gradient(\n        135deg,\n        transparent 0 10px,\n        color-mix(in oklch, var(--jy-text, CanvasText) 4%, transparent) 10px 20px\n      );\n      color: var(--jy-text-muted, GrayText);\n      font-size: 0.8rem;\n      text-align: center;\n      overflow: clip;\n      contain: layout paint;\n    }\n    .box.filled {\n      border-style: solid;\n      background: var(--jy-surface-raised, Canvas);\n    }\n    p {\n      margin: 0;\n    }\n    /* The label reads before anything else in the slot, as the ASA's 2022 rulings ask: bold\n       12 px capitals on a solid chip in the page's text colour (over 14:1 contrast in both\n       schemes), unlike the slot's surface and outside the creative (advertising-policy.md, 5). */\n    .label {\n      justify-self: start;\n      padding-inline: 0.5em;\n      border-radius: 0.25rem;\n      background: var(--jy-text, CanvasText);\n      color: var(--jy-surface-raised, Canvas);\n      font-family: var(--jy-font-mono, ui-monospace, monospace);\n      font-size: 0.75rem;\n      font-weight: 700;\n      line-height: 1.4;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      text-align: start;\n    }\n    .fill {\n      display: grid;\n      grid-template-rows: minmax(0, 1fr) auto;\n      gap: var(--jy-space-3xs, 0.25rem);\n      min-block-size: 0;\n      color: var(--jy-text, CanvasText);\n      text-decoration: none;\n      border-radius: var(--jy-radius-s, 0.5rem);\n    }\n    .fill:focus-visible {\n      outline: 2px solid var(--jy-focus-ring, Highlight);\n      outline-offset: 2px;\n    }\n    .fill:hover .headline,\n    .fill:hover .cta {\n      text-decoration: underline;\n    }\n    img {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      min-block-size: 0;\n      object-fit: contain;\n    }\n    .headline {\n      font-weight: 600;\n      line-height: 1.25;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      line-clamp: 2;\n      overflow: hidden;\n    }\n    .house {\n      grid-template-rows: auto auto auto;\n      align-content: center;\n      justify-items: center;\n    }\n    .house .text {\n      color: var(--jy-text-muted, GrayText);\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 5;\n      line-clamp: 5;\n      overflow: hidden;\n    }\n    .house .cta {\n      color: var(--jy-accent, LinkText);\n      font-weight: 600;\n    }\n    /* Short boxes (banners, the presenting line): image and words side by side. */\n    .box[data-flow='row'] {\n      padding-block: var(--jy-space-3xs, 0.25rem);\n      gap: 0;\n    }\n    .box.filled[data-flow='row'] .fill {\n      grid-template-rows: minmax(0, 1fr);\n      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n      align-items: center;\n      text-align: start;\n    }\n    .box.filled[data-flow='row'] .house {\n      grid-template-columns: minmax(0, 1fr) auto;\n      grid-template-rows: auto auto;\n      justify-items: start;\n    }\n    .box.filled[data-flow='row'] .house .text {\n      grid-column: 1;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n    }\n    .box.filled[data-flow='row'] .house .cta {\n      grid-column: 2;\n      grid-row: 1 / span 2;\n    }\n    .box.filled[data-flow='row'] .headline {\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n    }\n    @media (forced-colors: active) {\n      .box {\n        border-color: CanvasText;\n      }\n      .label {\n        border: 1px solid CanvasText;\n      }\n    }\n  }\n`;\n\n/** Banners and the presenting line are short: their fill lays out in a row. */\nconst flowOf = (slotId: SlotId): 'row' | 'column' => {\n  const shape = slot(slotId).shape;\n  return shape === 'medium rectangle' || shape === 'tall rail' ? 'column' : 'row';\n};\n\n// `sponsored` for search engines; `external` keeps the catalog's router from handling the click\n// itself: the browser asks the server, which counts it and answers with \"You're leaving Joystyk\".\nconst creativeView = (f: CreativeFill, intent: string) => html`<a\n  class=\"fill creative\"\n  href=${f.href}\n  rel=\"sponsored noopener external\"\n  data-intent=${intent}\n  data-intent-on=\"jy-ad-image\"\n>\n  <img src=${f.image.src} alt=${f.alt} width=${f.image.width} height=${f.image.height} decoding=\"async\" ${reportImage(f.image.src)} />\n  <span class=\"headline\">${f.headline}</span>\n</a>`;\n\nconst houseView = (f: HouseFill) => html`<a class=\"fill house\" href=${f.href}>\n  <span class=\"headline\">${f.headline}</span>\n  <span class=\"text\">${f.text}</span>\n  <span class=\"cta\">${f.cta}</span>\n</a>`;\n\nexport const AdSlot = define<AdSlotState, AdSlotMsg, AdSlotProps>()('ad-slot', {\n  props,\n  init: () => ({ entitlement: 'show', online: null, near: false, ad: { _tag: 'Waiting' } }),\n  subscriptions: () => [watchAds(), watchConnectivity()],\n  // `online` only once the browser says so: tokens.css keeps a slot on a page served offline\n  // hidden without it.\n  states: (s) => ({ collapsed: slotPresentation(s) === 'collapsed', online: s.online === true }),\n  intent: {\n    Near: () => ({ _tag: 'Near' }),\n    Image: ({ event }) => {\n      const status = event instanceof CustomEvent ? (event.detail as unknown) : undefined;\n      return status === 'seen' || status === 'broken' ? { _tag: 'Image', status } : undefined;\n    },\n  },\n  update: {\n    Entitled: (s, m, { props: p }) => load({ ...s, entitlement: m.entitlement }, p),\n    Connectivity: (s, m, { props: p }) => load({ ...s, online: m.online }, p),\n    Near: (s, _m, { props: p }) => load({ ...s, near: true }, p),\n    Loaded: (s, m) =>\n      urlOf(s.ad) !== m.url || s.ad._tag !== 'Loading'\n        ? s\n        : {\n            ...s,\n            ad:\n              m.fill.kind === 'collapse'\n                ? { _tag: 'Empty', url: m.url }\n                : { _tag: 'Filled', url: m.url, fill: m.fill, seen: false },\n          },\n    LoadFailed: (s, m) =>\n      urlOf(s.ad) !== m.url || s.ad._tag !== 'Loading' ? s : { ...s, ad: { _tag: 'Empty', url: m.url } },\n    Image: (s, m) => {\n      if (s.ad._tag !== 'Filled' || s.ad.fill.kind !== 'creative') return s;\n      if (m.status === 'broken') return { ...s, ad: { _tag: 'Empty', url: s.ad.url } };\n      return s.ad.seen ? s : [{ ...s, ad: { ...s.ad, seen: true } }, [sendBeacon(s.ad.fill.beacon)]];\n    },\n    // Client navigation can reuse the element for another game or category: ask again.\n    PropsChanged: (s, { props: p }) => {\n      const url = adQueryUrl(queryOf(p));\n      return urlOf(s.ad) === url ? s : load({ ...s, ad: { _tag: 'Waiting' } }, p);\n    },\n  },\n  view: (s, i, { props: p }) => {\n    if (slotPresentation(s) === 'collapsed') return nothing;\n    const fill = s.ad._tag === 'Filled' ? s.ad.fill : null;\n    return html`<div\n      class=${fill === null ? 'box' : 'box filled'}\n      data-slot=${p.slotId}\n      data-flow=${flowOf(p.slotId)}\n      part=\"box\"\n      data-intent=${i.Near}\n      data-intent-on=\"jy-ad-near\"\n      ${nearViewport()}\n    >\n      <p class=\"label\">${slot(p.slotId).label}</p>\n      ${fill === null ? nothing : fill.kind === 'creative' ? creativeView(fill, i.Image) : houseView(fill)}\n    </div>`;\n  },\n  styles: [styles, slotBoxStyles()],\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ad-slot': InstanceType<typeof AdSlot>;\n  }\n}\n"],"mappings":"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"}