@joystyk/ui 0.0.0-stage → 0.2.0

package/dist/ad-wire.d.ts

@@ -0,0 +1,96 @@
+import * as z from 'zod/mini';
+import { type SlotId, type SlotSurface } from './slots.js';
+/** Where `<ad-slot>` asks which creative to show. */
+export declare const AD_SLOT_PATH = "/api/ads/slot";
+/** Where a rendered creative reports its impression (a beacon, POST with no body). */
+export declare const AD_IMPRESSION_PATH = "/api/ads/impression";
+/** The first-party click notice ("You're leaving Joystyk"): `/ads/click/<creative id>?slot=<slot id>`. */
+export declare const AD_CLICK_PREFIX = "/ads/click/";
+/** Creative images, at content-hashed, immutable URLs: `/ads/creative/<sha256>.<ext>`. */
+export declare const AD_CREATIVE_PREFIX = "/ads/creative/";
+export declare const SLOT_SURFACES: readonly ["home", "category", "game", "results", "daily"];
+/** A game or category id: kebab-case, as the catalog writes them. */
+export declare const isContextId: (value: unknown) => value is string;
+/** The context a slot sends: what the page is about, never who is looking at it. */
+export interface AdQuery {
+    readonly slot: SlotId;
+    readonly page: SlotSurface;
+    /** The game the page or screen is about, if any. The server derives its category. */
+    readonly game: string | null;
+    /** The category page's category, if any (ignored when `game` is set). */
+    readonly category: string | null;
+}
+/** The surface a slot is on when its element doesn't say: the first the registry lists. */
+export declare const defaultSurface: (slotId: SlotId) => SlotSurface;
+/**
+ * The request URL for `query`, with its parameters in one fixed order and empty ones left out,
+ * so equal contexts share one cache entry at the edge.
+ */
+export declare function adQueryUrl(query: AdQuery): string;
+/** A booked creative: an image, its alt text and a headline, linked through the click notice. */
+export declare const CreativeFillSchema: z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"creative">;
+    id: z.ZodMiniInt;
+    image: z.ZodMiniObject<{
+        src: z.ZodMiniString<string>;
+        width: z.ZodMiniInt;
+        height: z.ZodMiniInt;
+    }, z.core.$strip>;
+    alt: z.ZodMiniString<string>;
+    headline: z.ZodMiniString<string>;
+    href: z.ZodMiniString<string>;
+    beacon: z.ZodMiniString<string>;
+}, z.core.$strip>;
+/** Our own promotion for an unsold slot: a game from the catalog, or "Advertise with us". */
+export declare const HouseFillSchema: z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"house">;
+    headline: z.ZodMiniString<string>;
+    text: z.ZodMiniString<string>;
+    cta: z.ZodMiniString<string>;
+    href: z.ZodMiniString<string>;
+}, z.core.$strip>;
+/** Nothing to show: the slot collapses. */
+export declare const CollapseFillSchema: z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"collapse">;
+}, z.core.$strip>;
+export declare const AdFillSchema: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"creative">;
+    id: z.ZodMiniInt;
+    image: z.ZodMiniObject<{
+        src: z.ZodMiniString<string>;
+        width: z.ZodMiniInt;
+        height: z.ZodMiniInt;
+    }, z.core.$strip>;
+    alt: z.ZodMiniString<string>;
+    headline: z.ZodMiniString<string>;
+    href: z.ZodMiniString<string>;
+    beacon: z.ZodMiniString<string>;
+}, z.core.$strip>, z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"house">;
+    headline: z.ZodMiniString<string>;
+    text: z.ZodMiniString<string>;
+    cta: z.ZodMiniString<string>;
+    href: z.ZodMiniString<string>;
+}, z.core.$strip>, z.ZodMiniObject<{
+    kind: z.ZodMiniLiteral<"collapse">;
+}, z.core.$strip>], "kind">;
+export type CreativeFill = z.infer<typeof CreativeFillSchema>;
+export type HouseFill = z.infer<typeof HouseFillSchema>;
+export type AdFill = z.infer<typeof AdFillSchema>;
+/** Parses an endpoint answer; null for anything that doesn't fit, which collapses the slot. */
+export declare const parseAdFill: (value: unknown) => AdFill | null;
+/** The endpoint's query string, as an object of its parameters. */
+export declare const AdQuerySchema: z.ZodMiniObject<{
+    slot: z.ZodMiniString<string>;
+    page: z.ZodMiniEnum<{
+        results: "results";
+        home: "home";
+        category: "category";
+        game: "game";
+        daily: "daily";
+    }>;
+    game: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    category: z.ZodMiniOptional<z.ZodMiniString<string>>;
+}, z.core.$strip>;
+/** Parses the query string the endpoint receives. Null when any part is missing or invalid. */
+export declare function parseAdQuery(params: URLSearchParams): AdQuery | null;

package/dist/ad-wire.js

@@ -0,0 +1,101 @@
+import { SLOTS, isSlotId } from "./slots.js";
+import * as z from "zod/mini";
+//#region src/ad-wire.ts
+/** Where `<ad-slot>` asks which creative to show. */
+var AD_SLOT_PATH = "/api/ads/slot";
+/** Where a rendered creative reports its impression (a beacon, POST with no body). */
+var AD_IMPRESSION_PATH = "/api/ads/impression";
+/** The first-party click notice ("You're leaving Joystyk"): `/ads/click/<creative id>?slot=<slot id>`. */
+var AD_CLICK_PREFIX = "/ads/click/";
+/** Creative images, at content-hashed, immutable URLs: `/ads/creative/<sha256>.<ext>`. */
+var AD_CREATIVE_PREFIX = "/ads/creative/";
+var SLOT_SURFACES = [
+	"home",
+	"category",
+	"game",
+	"results",
+	"daily"
+];
+var KEBAB = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+/** A game or category id: kebab-case, as the catalog writes them. */
+var isContextId = (value) => typeof value === "string" && value.length <= 64 && KEBAB.test(value);
+/** The surface a slot is on when its element doesn't say: the first the registry lists. */
+var defaultSurface = (slotId) => SLOTS.find((s) => s.id === slotId)?.surfaces[0] ?? "home";
+/**
+* The request URL for `query`, with its parameters in one fixed order and empty ones left out,
+* so equal contexts share one cache entry at the edge.
+*/
+function adQueryUrl(query) {
+	const params = new URLSearchParams({
+		slot: query.slot,
+		page: query.page
+	});
+	if (query.game !== null) params.set("game", query.game);
+	else if (query.category !== null) params.set("category", query.category);
+	return `${AD_SLOT_PATH}?${params.toString()}`;
+}
+/** A path on this site: starts with one `/`, never `//` or a backslash (no other origin). */
+var sitePath = z.string().check(z.refine((value) => value.startsWith("/") && !value.startsWith("//") && !value.includes("\\") && value.length <= 512, "Expected a path on this site"));
+var text = (max) => z.string().check(z.minLength(1), z.maxLength(max));
+var dimension = z.int().check(z.positive(), z.lte(4096));
+/** A booked creative: an image, its alt text and a headline, linked through the click notice. */
+var CreativeFillSchema = z.object({
+	kind: z.literal("creative"),
+	id: z.int().check(z.positive()),
+	image: z.object({
+		src: sitePath,
+		width: dimension,
+		height: dimension
+	}),
+	alt: text(150),
+	headline: text(90),
+	/** The click notice on this site; the advertiser's link never reaches the page. */
+	href: sitePath,
+	/** Where the slot reports that the creative rendered. */
+	beacon: sitePath
+});
+/** Our own promotion for an unsold slot: a game from the catalog, or "Advertise with us". */
+var HouseFillSchema = z.object({
+	kind: z.literal("house"),
+	headline: text(90),
+	text: text(200),
+	/** The call to action, the link's visible words. */
+	cta: text(40),
+	href: sitePath
+});
+/** Nothing to show: the slot collapses. */
+var CollapseFillSchema = z.object({ kind: z.literal("collapse") });
+var AdFillSchema = z.discriminatedUnion("kind", [
+	CreativeFillSchema,
+	HouseFillSchema,
+	CollapseFillSchema
+]);
+/** Parses an endpoint answer; null for anything that doesn't fit, which collapses the slot. */
+var parseAdFill = (value) => {
+	const parsed = AdFillSchema.safeParse(value);
+	return parsed.success ? parsed.data : null;
+};
+var contextId = z.string().check(z.refine(isContextId, "Expected a kebab-case id"));
+/** The endpoint's query string, as an object of its parameters. */
+var AdQuerySchema = z.object({
+	slot: z.string().check(z.refine(isSlotId, "Expected a slot id from packages/ui/src/slots.ts")),
+	page: z.enum(SLOT_SURFACES),
+	game: z.optional(contextId),
+	category: z.optional(contextId)
+}).check(z.refine((q) => SLOTS.some((s) => s.id === q.slot && s.surfaces.includes(q.page)), "The slot never appears on that kind of page"));
+/** Parses the query string the endpoint receives. Null when any part is missing or invalid. */
+function parseAdQuery(params) {
+	const parsed = AdQuerySchema.safeParse(Object.fromEntries(params));
+	if (!parsed.success) return null;
+	const { slot, page, game, category } = parsed.data;
+	return {
+		slot,
+		page,
+		game: game ?? null,
+		category: game === void 0 ? category ?? null : null
+	};
+}
+//#endregion
+export { AD_CLICK_PREFIX, AD_CREATIVE_PREFIX, AD_IMPRESSION_PATH, AD_SLOT_PATH, AdFillSchema, AdQuerySchema, CollapseFillSchema, CreativeFillSchema, HouseFillSchema, SLOT_SURFACES, adQueryUrl, defaultSurface, isContextId, parseAdFill, parseAdQuery };
+
+//# sourceMappingURL=ad-wire.js.map

package/dist/ad-wire.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ad-wire.js","names":[],"sources":["../src/ad-wire.ts"],"sourcesContent":["// What `<ad-slot>` asks the site's ad endpoint, and what it gets back (monetization.md,\n// \"Serving\"). Both sides import this file: the site builds its answers to fit it, and the\n// browser parses every answer through it before rendering anything (invariant 2). Browser\n// code imports zod/mini (D-22).\n//\n// A request carries only the context of the page: the slot, the kind of page, and the game\n// or category the page is about. Never a user, a cookie or a device: every visitor on the\n// same page and date gets the same answer, so it can be cached at the edge.\nimport * as z from 'zod/mini';\nimport { SLOTS, isSlotId, type SlotId, type SlotSurface } from './slots.ts';\n\n/** Where `<ad-slot>` asks which creative to show. */\nexport const AD_SLOT_PATH = '/api/ads/slot';\n/** Where a rendered creative reports its impression (a beacon, POST with no body). */\nexport const AD_IMPRESSION_PATH = '/api/ads/impression';\n/** The first-party click notice (\"You're leaving Joystyk\"): `/ads/click/<creative id>?slot=<slot id>`. */\nexport const AD_CLICK_PREFIX = '/ads/click/';\n/** Creative images, at content-hashed, immutable URLs: `/ads/creative/<sha256>.<ext>`. */\nexport const AD_CREATIVE_PREFIX = '/ads/creative/';\n\nexport const SLOT_SURFACES = ['home', 'category', 'game', 'results', 'daily'] as const satisfies readonly SlotSurface[];\n\nconst KEBAB = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;\n/** A game or category id: kebab-case, as the catalog writes them. */\nexport const isContextId = (value: unknown): value is string =>\n  typeof value === 'string' && value.length <= 64 && KEBAB.test(value);\n\n/** The context a slot sends: what the page is about, never who is looking at it. */\nexport interface AdQuery {\n  readonly slot: SlotId;\n  readonly page: SlotSurface;\n  /** The game the page or screen is about, if any. The server derives its category. */\n  readonly game: string | null;\n  /** The category page's category, if any (ignored when `game` is set). */\n  readonly category: string | null;\n}\n\n/** The surface a slot is on when its element doesn't say: the first the registry lists. */\nexport const defaultSurface = (slotId: SlotId): SlotSurface =>\n  SLOTS.find((s) => s.id === slotId)?.surfaces[0] ?? 'home';\n\n/**\n * The request URL for `query`, with its parameters in one fixed order and empty ones left out,\n * so equal contexts share one cache entry at the edge.\n */\nexport function adQueryUrl(query: AdQuery): string {\n  const params = new URLSearchParams({ slot: query.slot, page: query.page });\n  if (query.game !== null) params.set('game', query.game);\n  else if (query.category !== null) params.set('category', query.category);\n  return `${AD_SLOT_PATH}?${params.toString()}`;\n}\n\n/** A path on this site: starts with one `/`, never `//` or a backslash (no other origin). */\nconst sitePath = z\n  .string()\n  .check(\n    z.refine(\n      (value) => value.startsWith('/') && !value.startsWith('//') && !value.includes('\\\\') && value.length <= 512,\n      'Expected a path on this site',\n    ),\n  );\nconst text = (max: number) => z.string().check(z.minLength(1), z.maxLength(max));\nconst dimension = z.int().check(z.positive(), z.lte(4096));\n\n/** A booked creative: an image, its alt text and a headline, linked through the click notice. */\nexport const CreativeFillSchema = z.object({\n  kind: z.literal('creative'),\n  id: z.int().check(z.positive()),\n  image: z.object({ src: sitePath, width: dimension, height: dimension }),\n  alt: text(150),\n  headline: text(90),\n  /** The click notice on this site; the advertiser's link never reaches the page. */\n  href: sitePath,\n  /** Where the slot reports that the creative rendered. */\n  beacon: sitePath,\n});\n\n/** Our own promotion for an unsold slot: a game from the catalog, or \"Advertise with us\". */\nexport const HouseFillSchema = z.object({\n  kind: z.literal('house'),\n  headline: text(90),\n  text: text(200),\n  /** The call to action, the link's visible words. */\n  cta: text(40),\n  href: sitePath,\n});\n\n/** Nothing to show: the slot collapses. */\nexport const CollapseFillSchema = z.object({ kind: z.literal('collapse') });\n\nexport const AdFillSchema = z.discriminatedUnion('kind', [CreativeFillSchema, HouseFillSchema, CollapseFillSchema]);\n\nexport type CreativeFill = z.infer<typeof CreativeFillSchema>;\nexport type HouseFill = z.infer<typeof HouseFillSchema>;\nexport type AdFill = z.infer<typeof AdFillSchema>;\n\n/** Parses an endpoint answer; null for anything that doesn't fit, which collapses the slot. */\nexport const parseAdFill = (value: unknown): AdFill | null => {\n  const parsed = AdFillSchema.safeParse(value);\n  return parsed.success ? parsed.data : null;\n};\n\nconst contextId = z.string().check(z.refine(isContextId, 'Expected a kebab-case id'));\n\n/** The endpoint's query string, as an object of its parameters. */\nexport const AdQuerySchema = z\n  .object({\n    slot: z.string().check(z.refine(isSlotId, 'Expected a slot id from packages/ui/src/slots.ts')),\n    page: z.enum(SLOT_SURFACES),\n    game: z.optional(contextId),\n    category: z.optional(contextId),\n  })\n  .check(\n    z.refine(\n      (q) => SLOTS.some((s) => s.id === q.slot && s.surfaces.includes(q.page)),\n      'The slot never appears on that kind of page',\n    ),\n  );\n\n/** Parses the query string the endpoint receives. Null when any part is missing or invalid. */\nexport function parseAdQuery(params: URLSearchParams): AdQuery | null {\n  const parsed = AdQuerySchema.safeParse(Object.fromEntries(params));\n  if (!parsed.success) return null;\n  const { slot, page, game, category } = parsed.data;\n  return { slot: slot as SlotId, page, game: game ?? null, category: game === undefined ? (category ?? null) : null };\n}\n"],"mappings":"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"}

package/dist/button.d.ts

@@ -0,0 +1,40 @@
+import { type PropsOf } from '@gyral/core';
+/**
+ * `<jy-button>`: the frame's button. It wraps a native `<button>`, so it gets keyboard
+ * activation, focus and the button role from the platform. The label is the element's
+ * content: `<jy-button>Play</jy-button>`.
+ *
+ * With the `toggle` attribute it is a toggle button: it exposes `aria-pressed`, flips on
+ * each activation and starts from the `pressed` attribute.
+ *
+ * Outputs (listen with `child()` in a Gyral parent, or `OUTPUT_EVENT` elsewhere):
+ * - `{ _tag: 'Activated' }` for a plain button;
+ * - `{ _tag: 'Toggled', pressed }` for a toggle button, with the new state.
+ */
+declare const props: {
+    toggle: import("@gyral/core").Prop<boolean>;
+    pressed: import("@gyral/core").Prop<boolean>;
+};
+export type ButtonProps = PropsOf<typeof props>;
+export interface ButtonState {
+    readonly pressed: boolean;
+}
+export type ButtonMsg = {
+    readonly _tag: 'Activate';
+};
+export type ButtonOutput = {
+    readonly _tag: 'Activated';
+} | {
+    readonly _tag: 'Toggled';
+    readonly pressed: boolean;
+};
+export declare const Button: import("@gyral/core").GyralElementClass<ButtonState, ButtonMsg, PropsOf<{
+    toggle: import("@gyral/core").Prop<boolean>;
+    pressed: import("@gyral/core").Prop<boolean>;
+}>, ButtonOutput, "Activate">;
+declare global {
+    interface HTMLElementTagNameMap {
+        'jy-button': InstanceType<typeof Button>;
+    }
+}
+export {};

package/dist/button.js

@@ -0,0 +1,133 @@
+import { compiled } from "@gyral/core/compiled";
+import { css, define, outputs, prop } from "@gyral/core";
+//#region src/button.ts
+var _gyral$t0 = {
+	"id": "16pf2gug297",
+	"html": "<button type=\"button\" part=\"button\"><slot></slot></button>",
+	"parts": [[
+		3,
+		[0],
+		"aria-pressed"
+	], [
+		3,
+		[0],
+		"data-intent"
+	]],
+	"segments": [
+		"<button type=\"button\" part=\"button\"",
+		{
+			"k": "attr",
+			"name": "aria-pressed"
+		},
+		{
+			"k": "attr",
+			"name": "data-intent"
+		},
+		"><slot></slot></button>"
+	]
+};
+/**
+* `<jy-button>`: the frame's button. It wraps a native `<button>`, so it gets keyboard
+* activation, focus and the button role from the platform. The label is the element's
+* content: `<jy-button>Play</jy-button>`.
+*
+* With the `toggle` attribute it is a toggle button: it exposes `aria-pressed`, flips on
+* each activation and starts from the `pressed` attribute.
+*
+* Outputs (listen with `child()` in a Gyral parent, or `OUTPUT_EVENT` elsewhere):
+* - `{ _tag: 'Activated' }` for a plain button;
+* - `{ _tag: 'Toggled', pressed }` for a toggle button, with the new state.
+*/
+var props = {
+	toggle: prop.boolean(),
+	pressed: prop.boolean()
+};
+var emit = outputs();
+var styles = css`
+  @layer components {
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--jy-space-2xs, 0.5rem);
+      min-block-size: var(--jy-target-min, 2.75rem);
+      min-inline-size: var(--jy-target-min, 2.75rem);
+      padding-block: var(--jy-space-2xs, 0.5rem);
+      padding-inline: var(--jy-space-s, 1rem);
+      border: 1px solid transparent;
+      border-radius: var(--jy-radius-pill, 999px);
+      background: var(--jy-accent, oklch(50% 0.2 285));
+      color: var(--jy-on-accent, oklch(99% 0.005 285));
+      font: inherit;
+      font-weight: 600;
+      line-height: 1.2;
+      cursor: pointer;
+      touch-action: manipulation;
+      transition:
+        background-color var(--jy-duration-fast, 120ms) var(--jy-ease-out, ease-out),
+        scale var(--jy-duration-fast, 120ms) var(--jy-ease-out, ease-out);
+
+      &:hover {
+        background: var(--jy-accent-hover, oklch(44% 0.2 285));
+      }
+
+      &:active {
+        scale: 0.97;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--jy-focus-ring, oklch(55% 0.22 285));
+        outline-offset: 2px;
+      }
+
+      &[aria-pressed='false'] {
+        border-color: var(--jy-border, currentColor);
+        background: var(--jy-surface-raised, Canvas);
+        color: var(--jy-text, CanvasText);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      button:active {
+        scale: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      button {
+        border-color: ButtonText;
+      }
+
+      button[aria-pressed='true'] {
+        background: Highlight;
+        color: HighlightText;
+      }
+    }
+  }
+`;
+var Button = define()("jy-button", {
+	props,
+	init: (p) => ({ pressed: p.pressed }),
+	intent: { Activate: () => ({ _tag: "Activate" }) },
+	update: {
+		Activate: (s, _m, { props: p }) => {
+			if (!p.toggle) return [s, [emit({ _tag: "Activated" })]];
+			const pressed = !s.pressed;
+			return [{ pressed }, [emit({
+				_tag: "Toggled",
+				pressed
+			})]];
+		},
+		PropsChanged: (s, { props: p, prev }) => p.pressed === prev.pressed ? s : { pressed: p.pressed }
+	},
+	view: (s, i, { props: p }) => compiled(_gyral$t0, [p.toggle ? String(s.pressed) : null, i.Activate]),
+	styles
+});
+//#endregion
+export { Button };
+
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["_gyral$compiled"],"sources":["../src/button.ts"],"sourcesContent":["import { css, define, html, outputs, prop, type PropsOf } from '@gyral/core';\n\n/**\n * `<jy-button>`: the frame's button. It wraps a native `<button>`, so it gets keyboard\n * activation, focus and the button role from the platform. The label is the element's\n * content: `<jy-button>Play</jy-button>`.\n *\n * With the `toggle` attribute it is a toggle button: it exposes `aria-pressed`, flips on\n * each activation and starts from the `pressed` attribute.\n *\n * Outputs (listen with `child()` in a Gyral parent, or `OUTPUT_EVENT` elsewhere):\n * - `{ _tag: 'Activated' }` for a plain button;\n * - `{ _tag: 'Toggled', pressed }` for a toggle button, with the new state.\n */\nconst props = {\n  toggle: prop.boolean(),\n  pressed: prop.boolean(),\n};\nexport type ButtonProps = PropsOf<typeof props>;\n\nexport interface ButtonState {\n  readonly pressed: boolean;\n}\n\nexport type ButtonMsg = { readonly _tag: 'Activate' };\n\nexport type ButtonOutput = { readonly _tag: 'Activated' } | { readonly _tag: 'Toggled'; readonly pressed: boolean };\n\nconst emit = outputs<ButtonOutput>();\n\nconst styles = css`\n  @layer components {\n    :host {\n      display: inline-block;\n    }\n\n    button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--jy-space-2xs, 0.5rem);\n      min-block-size: var(--jy-target-min, 2.75rem);\n      min-inline-size: var(--jy-target-min, 2.75rem);\n      padding-block: var(--jy-space-2xs, 0.5rem);\n      padding-inline: var(--jy-space-s, 1rem);\n      border: 1px solid transparent;\n      border-radius: var(--jy-radius-pill, 999px);\n      background: var(--jy-accent, oklch(50% 0.2 285));\n      color: var(--jy-on-accent, oklch(99% 0.005 285));\n      font: inherit;\n      font-weight: 600;\n      line-height: 1.2;\n      cursor: pointer;\n      touch-action: manipulation;\n      transition:\n        background-color var(--jy-duration-fast, 120ms) var(--jy-ease-out, ease-out),\n        scale var(--jy-duration-fast, 120ms) var(--jy-ease-out, ease-out);\n\n      &:hover {\n        background: var(--jy-accent-hover, oklch(44% 0.2 285));\n      }\n\n      &:active {\n        scale: 0.97;\n      }\n\n      &:focus-visible {\n        outline: 2px solid var(--jy-focus-ring, oklch(55% 0.22 285));\n        outline-offset: 2px;\n      }\n\n      &[aria-pressed='false'] {\n        border-color: var(--jy-border, currentColor);\n        background: var(--jy-surface-raised, Canvas);\n        color: var(--jy-text, CanvasText);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      button:active {\n        scale: none;\n      }\n    }\n\n    @media (forced-colors: active) {\n      button {\n        border-color: ButtonText;\n      }\n\n      button[aria-pressed='true'] {\n        background: Highlight;\n        color: HighlightText;\n      }\n    }\n  }\n`;\n\nexport const Button = define<ButtonState, ButtonMsg, ButtonProps, ButtonOutput>()('jy-button', {\n  props,\n  init: (p) => ({ pressed: p.pressed }),\n  intent: {\n    Activate: () => ({ _tag: 'Activate' }),\n  },\n  update: {\n    Activate: (s, _m, { props: p }) => {\n      if (!p.toggle) return [s, [emit({ _tag: 'Activated' })]];\n      const pressed = !s.pressed;\n      return [{ pressed }, [emit({ _tag: 'Toggled', pressed })]];\n    },\n    // A parent that changes `pressed` takes control of the toggle state.\n    PropsChanged: (s, { props: p, prev }) => (p.pressed === prev.pressed ? s : { pressed: p.pressed }),\n  },\n  view: (s, i, { props: p }) => html`\n    <button\n      type=\"button\"\n      part=\"button\"\n      aria-pressed=${p.toggle ? String(s.pressed) : null}\n      data-intent=${i.Activate}\n    >\n      <slot></slot>\n    </button>\n  `,\n  styles,\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'jy-button': InstanceType<typeof Button>;\n  }\n}\n"],"mappings":";;;AAAA,IAAA,YAAA;CAAA,MAAA;CAAA,QAAA;CAAA,SAAA,CAAA;EAAA;EAAA,CAAA,CAAA;EAAA;CAAA,GAAA;EAAA;EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;CAAA,YAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;GAAA,KAAA;GAAA,QAAA;EAAA;EAAA;CAAA;AAAA;;;;;;;;;;;;;AAcA,IAAA,QAAA;CACA,QAAA,KAAA,QAAA;CACA,SAAA,KAAA,QAAA;AACA;AAWA,IAAA,OAAA,QAAA;AAEA,IAAA,SAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,IAAA,SAAA,OAAA,CAAA,CAAA,aAAA;CACA;CACA,OAAA,OAAA,EAAA,SAAA,EAAA,QAAA;CACA,QAAA,EACA,iBAAA,EAAA,MAAA,WAAA,GACA;CACA,QAAA;EACA,WAAA,GAAA,IAAA,EAAA,OAAA,QAAA;GACA,IAAA,CAAA,EAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,EAAA,MAAA,YAAA,CAAA,CAAA,CAAA;GACA,MAAA,UAAA,CAAA,EAAA;GACA,OAAA,CAAA,EAAA,QAAA,GAAA,CAAA,KAAA;IAAA,MAAA;IAAA;GAAA,CAAA,CAAA,CAAA;EACA;EAEA,eAAA,GAAA,EAAA,OAAA,GAAA,WAAA,EAAA,YAAA,KAAA,UAAA,IAAA,EAAA,SAAA,EAAA,QAAA;CACA;CACA,OAAA,GAAA,GAAA,EAAA,OAAA,QAAgCA,SAAA,WAAA,CAAA,EAIX,SAAA,OAAA,EAAA,OAAA,IAAA,MAAmC,EACpC,QAAU,CAAA;CAK9B;AACA,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Button, type ButtonMsg, type ButtonOutput, type ButtonProps, type ButtonState } from './button.js';
+export { AdSlot, adBeacon, adEntitlement, adServer, alwaysShowAds, connectivity, provideAdEntitlement, queryOf, requestFill, slotPresentation, type AdEntitlement, type AdEntitlementSource, type AdLoad, type AdSlotMsg, type AdSlotProps, type AdSlotState, } from './ad-slot.js';
+export { SLOTS, SLOT_IDS, isSlotId, slot, slotBoxStyles, type SlotDefinition, type SlotId, type SlotSize, type SlotSurface, type TargetingKey, } from './slots.js';
+export { AD_CLICK_PREFIX, AD_CREATIVE_PREFIX, AD_IMPRESSION_PATH, AD_SLOT_PATH, AdFillSchema, AdQuerySchema, adQueryUrl, defaultSurface, isContextId, parseAdFill, parseAdQuery, SLOT_SURFACES, type AdFill, type AdQuery, type CreativeFill, type HouseFill, } from './ad-wire.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+import { SLOTS, SLOT_IDS, isSlotId, slot, slotBoxStyles } from "./slots.js";
+import { AD_CLICK_PREFIX, AD_CREATIVE_PREFIX, AD_IMPRESSION_PATH, AD_SLOT_PATH, AdFillSchema, AdQuerySchema, SLOT_SURFACES, adQueryUrl, defaultSurface, isContextId, parseAdFill, parseAdQuery } from "./ad-wire.js";
+import { AdSlot, adBeacon, adEntitlement, adServer, alwaysShowAds, connectivity, provideAdEntitlement, queryOf, requestFill, slotPresentation } from "./ad-slot.js";
+import { Button } from "./button.js";
+export { AD_CLICK_PREFIX, AD_CREATIVE_PREFIX, AD_IMPRESSION_PATH, AD_SLOT_PATH, AdFillSchema, AdQuerySchema, AdSlot, Button, SLOTS, SLOT_IDS, SLOT_SURFACES, adBeacon, adEntitlement, adQueryUrl, adServer, alwaysShowAds, connectivity, defaultSurface, isContextId, isSlotId, parseAdFill, parseAdQuery, provideAdEntitlement, queryOf, requestFill, slot, slotBoxStyles, slotPresentation };

package/dist/slots.d.ts

@@ -0,0 +1,38 @@
+export type SlotId = 'index-hero' | 'index-inline' | 'category-rail' | 'game-page' | 'results' | 'daily-presenting';
+/** Every slot id, in registry order. */
+export declare const SLOT_IDS: readonly SlotId[];
+export declare const isSlotId: (value: unknown) => value is SlotId;
+/** Pages and screens a slot can appear on. `results` and `daily` belong to the launcher. */
+export type SlotSurface = 'home' | 'category' | 'game' | 'results' | 'daily';
+export type TargetingKey = 'page' | 'game' | 'category' | 'date';
+/** A creative's box, in CSS pixels. */
+export interface SlotSize {
+    readonly width: number;
+    readonly height: number;
+}
+export interface SlotDefinition {
+    readonly id: SlotId;
+    /** Where the slot sits, as the monetization design describes it. */
+    readonly placement: string;
+    readonly shape: 'wide banner' | 'responsive banner' | 'tall rail' | 'medium rectangle' | 'logo and line';
+    readonly surfaces: readonly SlotSurface[];
+    /**
+     * The box on narrow and wide containers. The slot is wide when the space it sits in is at
+     * least as wide as the wide box; null hides the slot at that width.
+     */
+    readonly sizes: {
+        readonly narrow: SlotSize | null;
+        readonly wide: SlotSize | null;
+    };
+    readonly targeting: readonly TargetingKey[];
+    /** The visible label, as US FTC and UK ASA rules require. */
+    readonly label: 'Advertisement' | 'Sponsored';
+}
+export declare const SLOTS: readonly SlotDefinition[];
+export declare function slot(id: SlotId): SlotDefinition;
+/**
+ * The CSS that gives every slot its reserved box, generated from the registry so the sizes
+ * have one source. `<ad-slot>` is its own size container: a slot takes its wide box when its
+ * container is at least as wide as that box, and its narrow box (or nothing) otherwise.
+ */
+export declare function slotBoxStyles(slots?: readonly SlotDefinition[]): string;

package/dist/slots.js

@@ -0,0 +1,154 @@
+//#region src/slots.ts
+/** Every slot id, in registry order. */
+var SLOT_IDS = [
+	"index-hero",
+	"index-inline",
+	"category-rail",
+	"game-page",
+	"results",
+	"daily-presenting"
+];
+var isSlotId = (value) => typeof value === "string" && SLOT_IDS.includes(value);
+var SLOTS = [
+	{
+		id: "index-hero",
+		placement: "Top of the home page, under the featured games. One sponsor per day or week.",
+		shape: "wide banner",
+		surfaces: ["home"],
+		sizes: {
+			narrow: {
+				width: 320,
+				height: 100
+			},
+			wide: {
+				width: 728,
+				height: 90
+			}
+		},
+		targeting: ["page", "date"],
+		label: "Advertisement"
+	},
+	{
+		id: "index-inline",
+		placement: "Between rows of the game grid; several per page, rotating creatives.",
+		shape: "responsive banner",
+		surfaces: ["home"],
+		sizes: {
+			narrow: {
+				width: 320,
+				height: 100
+			},
+			wide: {
+				width: 728,
+				height: 90
+			}
+		},
+		targeting: [
+			"page",
+			"category",
+			"date"
+		],
+		label: "Advertisement"
+	},
+	{
+		id: "category-rail",
+		placement: "Sidebar on the index and category pages; hidden on narrow screens.",
+		shape: "tall rail",
+		surfaces: ["home", "category"],
+		sizes: {
+			narrow: null,
+			wide: {
+				width: 160,
+				height: 600
+			}
+		},
+		targeting: [
+			"page",
+			"category",
+			"date"
+		],
+		label: "Advertisement"
+	},
+	{
+		id: "game-page",
+		placement: "Game page, under the launcher and above the rules.",
+		shape: "medium rectangle",
+		surfaces: ["game"],
+		sizes: {
+			narrow: {
+				width: 300,
+				height: 250
+			},
+			wide: {
+				width: 300,
+				height: 250
+			}
+		},
+		targeting: [
+			"page",
+			"game",
+			"category",
+			"date"
+		],
+		label: "Advertisement"
+	},
+	{
+		id: "results",
+		placement: "The game-over screen, beside \"play again\". Never an interstitial.",
+		shape: "medium rectangle",
+		surfaces: ["results"],
+		sizes: {
+			narrow: {
+				width: 300,
+				height: 250
+			},
+			wide: {
+				width: 300,
+				height: 250
+			}
+		},
+		targeting: [
+			"game",
+			"category",
+			"date"
+		],
+		label: "Advertisement"
+	},
+	{
+		id: "daily-presenting",
+		placement: "Daily games: a presenting sponsor, sold per day.",
+		shape: "logo and line",
+		surfaces: ["daily"],
+		sizes: {
+			narrow: {
+				width: 320,
+				height: 50
+			},
+			wide: {
+				width: 468,
+				height: 60
+			}
+		},
+		targeting: ["game", "date"],
+		label: "Sponsored"
+	}
+];
+var byId = new Map(SLOTS.map((s) => [s.id, s]));
+function slot(id) {
+	const found = byId.get(id);
+	if (found === void 0) throw new Error(`Unknown slot "${id}"; slots are listed in packages/ui/src/slots.ts.`);
+	return found;
+}
+var box = (size) => size === null ? "display: none;" : `display: grid; inline-size: min(100%, ${String(size.width)}px); aspect-ratio: ${String(size.width)} / ${String(size.height)};`;
+/**
+* The CSS that gives every slot its reserved box, generated from the registry so the sizes
+* have one source. `<ad-slot>` is its own size container: a slot takes its wide box when its
+* container is at least as wide as that box, and its narrow box (or nothing) otherwise.
+*/
+function slotBoxStyles(slots = SLOTS) {
+	return `@layer components {\n${slots.map((s) => `  .box[data-slot='${s.id}'] { ${box(s.sizes.narrow)} }`).join("\n")}\n${slots.filter((s) => s.sizes.wide !== null).map((s) => `  @container (inline-size >= ${String(s.sizes.wide?.width)}px) {\n    .box[data-slot='${s.id}'] { ${box(s.sizes.wide)} }\n  }`).join("\n")}\n}\n`;
+}
+//#endregion
+export { SLOTS, SLOT_IDS, isSlotId, slot, slotBoxStyles };
+
+//# sourceMappingURL=slots.js.map

package/dist/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","names":[],"sources":["../src/slots.ts"],"sourcesContent":["// The billboard slot registry (docs/design-docs/monetization.md, \"v1 slots\"): the one source\n// of truth for slot ids, where each slot may appear, its size per breakpoint and the keys a\n// campaign can target. `<ad-slot>` reserves each slot's exact box from it, so a creative\n// arriving later never shifts the layout. It lives in `ui`, beside `<ad-slot>`, because the\n// catalog's pages and the launcher's results screen both render slots and only `ui` is\n// below both; `@joystyk/catalog` re-exports it.\n\nexport type SlotId = 'index-hero' | 'index-inline' | 'category-rail' | 'game-page' | 'results' | 'daily-presenting';\n\n/** Every slot id, in registry order. */\nexport const SLOT_IDS: readonly SlotId[] = [\n  'index-hero',\n  'index-inline',\n  'category-rail',\n  'game-page',\n  'results',\n  'daily-presenting',\n];\n\nexport const isSlotId = (value: unknown): value is SlotId =>\n  typeof value === 'string' && (SLOT_IDS as readonly string[]).includes(value);\n\n/** Pages and screens a slot can appear on. `results` and `daily` belong to the launcher. */\nexport type SlotSurface = 'home' | 'category' | 'game' | 'results' | 'daily';\n\nexport type TargetingKey = 'page' | 'game' | 'category' | 'date';\n\n/** A creative's box, in CSS pixels. */\nexport interface SlotSize {\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface SlotDefinition {\n  readonly id: SlotId;\n  /** Where the slot sits, as the monetization design describes it. */\n  readonly placement: string;\n  readonly shape: 'wide banner' | 'responsive banner' | 'tall rail' | 'medium rectangle' | 'logo and line';\n  readonly surfaces: readonly SlotSurface[];\n  /**\n   * The box on narrow and wide containers. The slot is wide when the space it sits in is at\n   * least as wide as the wide box; null hides the slot at that width.\n   */\n  readonly sizes: { readonly narrow: SlotSize | null; readonly wide: SlotSize | null };\n  readonly targeting: readonly TargetingKey[];\n  /** The visible label, as US FTC and UK ASA rules require. */\n  readonly label: 'Advertisement' | 'Sponsored';\n}\n\nexport const SLOTS: readonly SlotDefinition[] = [\n  {\n    id: 'index-hero',\n    placement: 'Top of the home page, under the featured games. One sponsor per day or week.',\n    shape: 'wide banner',\n    surfaces: ['home'],\n    sizes: { narrow: { width: 320, height: 100 }, wide: { width: 728, height: 90 } },\n    targeting: ['page', 'date'],\n    label: 'Advertisement',\n  },\n  {\n    id: 'index-inline',\n    placement: 'Between rows of the game grid; several per page, rotating creatives.',\n    shape: 'responsive banner',\n    surfaces: ['home'],\n    sizes: { narrow: { width: 320, height: 100 }, wide: { width: 728, height: 90 } },\n    targeting: ['page', 'category', 'date'],\n    label: 'Advertisement',\n  },\n  {\n    id: 'category-rail',\n    placement: 'Sidebar on the index and category pages; hidden on narrow screens.',\n    shape: 'tall rail',\n    surfaces: ['home', 'category'],\n    sizes: { narrow: null, wide: { width: 160, height: 600 } },\n    targeting: ['page', 'category', 'date'],\n    label: 'Advertisement',\n  },\n  {\n    id: 'game-page',\n    placement: 'Game page, under the launcher and above the rules.',\n    shape: 'medium rectangle',\n    surfaces: ['game'],\n    sizes: { narrow: { width: 300, height: 250 }, wide: { width: 300, height: 250 } },\n    targeting: ['page', 'game', 'category', 'date'],\n    label: 'Advertisement',\n  },\n  {\n    id: 'results',\n    placement: 'The game-over screen, beside \"play again\". Never an interstitial.',\n    shape: 'medium rectangle',\n    surfaces: ['results'],\n    sizes: { narrow: { width: 300, height: 250 }, wide: { width: 300, height: 250 } },\n    targeting: ['game', 'category', 'date'],\n    label: 'Advertisement',\n  },\n  {\n    id: 'daily-presenting',\n    placement: 'Daily games: a presenting sponsor, sold per day.',\n    shape: 'logo and line',\n    surfaces: ['daily'],\n    sizes: { narrow: { width: 320, height: 50 }, wide: { width: 468, height: 60 } },\n    targeting: ['game', 'date'],\n    label: 'Sponsored',\n  },\n];\n\nconst byId = new Map(SLOTS.map((s) => [s.id, s]));\n\nexport function slot(id: SlotId): SlotDefinition {\n  const found = byId.get(id);\n  if (found === undefined) throw new Error(`Unknown slot \"${id}\"; slots are listed in packages/ui/src/slots.ts.`);\n  return found;\n}\n\nconst box = (size: SlotSize | null): string =>\n  size === null\n    ? 'display: none;'\n    : `display: grid; inline-size: min(100%, ${String(size.width)}px); aspect-ratio: ${String(size.width)} / ${String(size.height)};`;\n\n/**\n * The CSS that gives every slot its reserved box, generated from the registry so the sizes\n * have one source. `<ad-slot>` is its own size container: a slot takes its wide box when its\n * container is at least as wide as that box, and its narrow box (or nothing) otherwise.\n */\nexport function slotBoxStyles(slots: readonly SlotDefinition[] = SLOTS): string {\n  const narrow = slots.map((s) => `  .box[data-slot='${s.id}'] { ${box(s.sizes.narrow)} }`).join('\\n');\n  const wide = slots\n    .filter((s) => s.sizes.wide !== null)\n    .map(\n      (s) =>\n        `  @container (inline-size >= ${String(s.sizes.wide?.width)}px) {\\n    .box[data-slot='${s.id}'] { ${box(s.sizes.wide)} }\\n  }`,\n    )\n    .join('\\n');\n  return `@layer components {\\n${narrow}\\n${wide}\\n}\\n`;\n}\n"],"mappings":";;AAUA,IAAa,WAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,YAAY,UACvB,OAAO,UAAU,YAAa,SAA+B,SAAS,KAAK;AA6B7E,IAAa,QAAmC;CAC9C;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,OAAO;GAAE,QAAQ;IAAE,OAAO;IAAK,QAAQ;GAAI;GAAG,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAG;EAAE;EAC/E,WAAW,CAAC,QAAQ,MAAM;EAC1B,OAAO;CACT;CACA;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,OAAO;GAAE,QAAQ;IAAE,OAAO;IAAK,QAAQ;GAAI;GAAG,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAG;EAAE;EAC/E,WAAW;GAAC;GAAQ;GAAY;EAAM;EACtC,OAAO;CACT;CACA;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,QAAQ,UAAU;EAC7B,OAAO;GAAE,QAAQ;GAAM,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAI;EAAE;EACzD,WAAW;GAAC;GAAQ;GAAY;EAAM;EACtC,OAAO;CACT;CACA;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,OAAO;GAAE,QAAQ;IAAE,OAAO;IAAK,QAAQ;GAAI;GAAG,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAI;EAAE;EAChF,WAAW;GAAC;GAAQ;GAAQ;GAAY;EAAM;EAC9C,OAAO;CACT;CACA;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,SAAS;EACpB,OAAO;GAAE,QAAQ;IAAE,OAAO;IAAK,QAAQ;GAAI;GAAG,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAI;EAAE;EAChF,WAAW;GAAC;GAAQ;GAAY;EAAM;EACtC,OAAO;CACT;CACA;EACE,IAAI;EACJ,WAAW;EACX,OAAO;EACP,UAAU,CAAC,OAAO;EAClB,OAAO;GAAE,QAAQ;IAAE,OAAO;IAAK,QAAQ;GAAG;GAAG,MAAM;IAAE,OAAO;IAAK,QAAQ;GAAG;EAAE;EAC9E,WAAW,CAAC,QAAQ,MAAM;EAC1B,OAAO;CACT;AACF;AAEA,IAAM,OAAO,IAAI,IAAI,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AAEhD,SAAgB,KAAK,IAA4B;CAC/C,MAAM,QAAQ,KAAK,IAAI,EAAE;CACzB,IAAI,UAAU,KAAA,GAAW,MAAM,IAAI,MAAM,iBAAiB,GAAG,iDAAiD;CAC9G,OAAO;AACT;AAEA,IAAM,OAAO,SACX,SAAS,OACL,mBACA,yCAAyC,OAAO,KAAK,KAAK,EAAE,qBAAqB,OAAO,KAAK,KAAK,EAAE,KAAK,OAAO,KAAK,MAAM,EAAE;;;;;;AAOnI,SAAgB,cAAc,QAAmC,OAAe;CAS9E,OAAO,wBARQ,MAAM,KAAK,MAAM,qBAAqB,EAAE,GAAG,OAAO,IAAI,EAAE,MAAM,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,IAQhE,EAAO,IAPzB,MACV,QAAQ,MAAM,EAAE,MAAM,SAAS,IAAI,CAAC,CACpC,KACE,MACC,gCAAgC,OAAO,EAAE,MAAM,MAAM,KAAK,EAAE,6BAA6B,EAAE,GAAG,OAAO,IAAI,EAAE,MAAM,IAAI,EAAE,QAC3H,CAAC,CACA,KAAK,IACkC,EAAK;AACjD"}