@pie-players/pie-players-shared 0.3.74 → 1.0.0-beta.0

package/dist/pie/scoring.d.ts

@@ -20,14 +20,9 @@ export type ScorePieItemOptions = {
     container?: Pick<ParentNode, "querySelector">;
     env?: Partial<Env>;
     models?: PieModel[];
-    /**
-     * Existing callers keep the historical scorePieItem controller call shape.
-     * provideScore() opts into the item-player score result shape explicitly.
-     */
-    outcomeArguments?: "session-env" | "model-session-env";
     /**
      * Preserve one result slot per model, including undefined for missing element/controller.
-     * Existing scorePieItem callers keep the filtered result shape by default.
+     * Missing slots are filtered out by default.
      */
     includeMissingResults?: boolean;
     /** The scoring player's bundle type; `player.js` scores nothing locally. */

package/dist/pie/scoring.js

@@ -62,13 +62,9 @@ const findRenderedPieElement = (root, modelId) => {
     return (root.querySelector(`[id="${escapedId}"]`) ||
         root.querySelector(`[pie-id="${escapedId}"]`));
 };
-const invokeOutcome = async (controller, model, session, env, argumentShape) => {
-    if (argumentShape === "model-session-env") {
-        const outcome = controller.outcome;
-        return outcome.call(controller, model, session, env);
-    }
+const invokeOutcome = async (controller, model, session, env) => {
     const outcome = controller.outcome;
-    return outcome.call(controller, session, env);
+    return outcome.call(controller, model, session, env);
 };
 /**
  * Score a PIE item by calling outcome on all PIE elements
@@ -76,7 +72,6 @@ const invokeOutcome = async (controller, model, session, env, argumentShape) =>
 export async function scorePieItem(config, sessionData, options = {}) {
     const root = options.container ?? document;
     const models = options.models ?? config.models ?? [];
-    const outcomeArguments = options.outcomeArguments ?? "session-env";
     const scoringEnv = {
         ...options.env,
         mode: "evaluate",
@@ -91,7 +86,7 @@ export async function scorePieItem(config, sessionData, options = {}) {
             if (controller?.outcome) {
                 return {
                     ...session,
-                    ...(await invokeOutcome(controller, model, session, scoringEnv, outcomeArguments)),
+                    ...(await invokeOutcome(controller, model, session, scoringEnv)),
                 };
             }
             else {

package/dist/pie/session-commit.js

@@ -93,7 +93,7 @@ function assignedElementsOf(element) {
  * elements assigned to each `<slot>`.
  *
  * `querySelectorAll("*")` sees none of the last two, and both are load-bearing
- * here. The section player mounts each item inside `<pie-item-shell>`'s shadow
+ * here. The section player mounts each item inside `<pie-item-scope>`'s shadow
  * root, and projects its item pane through a slot on the assessment toolkit -
  * a walk that stops at `<slot>` finds every delivery element in a section
  * unreachable.

package/dist/pie/stages.d.ts

@@ -1,56 +1,21 @@
 /**
- * Canonical stage vocabulary (M6 of the Coherent Options Surface track).
+ * Stage vocabulary of the section player's `pie-stage-change` event.
  *
- * One monotonic stage list is the unified replacement for the previous
- * drift of `toolkit-ready`, `section-ready`, `section-controller-ready`,
- * `interaction-ready`, `readiness-change`, and `ready` — all of which
- * have been removed. Hosts ask the same question — "is this CE at
- * stage ≥ X?" — across every `<pie-section-player-*>` and
- * `<pie-assessment-toolkit>` element.
+ * A cohort (one section and attempt) moves through `composed`,
+ * `engine-ready`, `interactive` and `disposed`, in that order. The section
+ * runtime engine in `@pie-players/pie-assessment-toolkit` is the only emitter;
+ * it dispatches the event on the layout element. `pie-loading-complete` is
+ * not a stage; it fires once per cohort when the section controller is ready
+ * and the element pre-warm has resolved. `readiness.mode = "strict"` only
+ * delays `interactive`.
  *
- * The four-stage canonical list (`composed`, `engine-ready`, `interactive`,
- * `disposed`) was finalized after the M5/M6 cumulative review confirmed
- * zero internal or external consumers for the original `attached`,
- * `runtime-bound`, and `ui-rendered` stages. The retro keeps the same
- * shape for both the toolkit CE and the layout CEs — every CE iterates
- * through the same list so subscribers don't need to special-case shape.
- *
- * Locked decisions (see `m6_ready_vocab_canonical_followup.plan.md`):
- * - **A1** Stage machine model with one canonical event family.
- * - **B1** "All items loaded" is reclassified as `pie-loading-complete`,
- *   not a stage. (The previous `ready` DOM event alias was removed in
- *   the broad architecture review compat sweep.)
- * - **C1** `readiness.mode = "strict"` only delays the `interactive`
- *   transition; every earlier stage fires identically across modes.
- * - **D1** One DOM event family `pie-stage-change` with the stage in the
- *   payload, mirroring the M3 `framework-error` idiom.
- *
- * Failure semantics deliberately stay in the M3 framework-error contract —
- * `status: "failed"` records the position; the framework error records the
- * cause.
+ * `status` is `entered`, or `failed` for the stage a non-recoverable
+ * framework error stopped the chain at, with `skipped` for each later stage
+ * up to `interactive`. The `framework-error` event carries the cause.
  */
 export declare const STAGES: readonly ["composed", "engine-ready", "interactive", "disposed"];
 export type Stage = (typeof STAGES)[number];
 export type StageStatus = "entered" | "skipped" | "failed";
-/**
- * Subset of the source CE shape used by stage subscribers. Both shapes
- * apply every canonical stage post-retro — the distinction stays in the
- * type so future shape-specific stages (e.g. layout-only `paginated`) can
- * be added without churn at the call sites.
- */
-export type StageSourceCe = "toolkit" | "layout";
-/**
- * Stages that apply to a given CE shape. Post-retro the toolkit and the
- * layout CEs share the same canonical list; `applicableStages` is kept as
- * an indirection so the tracker, telemetry, and tests don't have to be
- * rewritten when a future stage diverges between shapes.
- */
-export declare function applicableStages(_sourceCe: StageSourceCe): readonly Stage[];
-/**
- * Strict ordering index used by the tracker to detect monotonic
- * violations. `disposed` is last; `composed` is first.
- */
-export declare function stageOrdinal(stage: Stage): number;
 export type StageChangeDetail = {
     stage: Stage;
     status: StageStatus;
@@ -68,7 +33,6 @@ export type LoadingCompleteDetail = {
     sectionId: string;
     attemptId?: string;
     itemCount: number;
-    loadedCount: number;
     timestamp: string;
     sourceCe: string;
 };

package/dist/pie/stages.js

@@ -1,33 +1,17 @@
 /**
- * Canonical stage vocabulary (M6 of the Coherent Options Surface track).
+ * Stage vocabulary of the section player's `pie-stage-change` event.
  *
- * One monotonic stage list is the unified replacement for the previous
- * drift of `toolkit-ready`, `section-ready`, `section-controller-ready`,
- * `interaction-ready`, `readiness-change`, and `ready` — all of which
- * have been removed. Hosts ask the same question — "is this CE at
- * stage ≥ X?" — across every `<pie-section-player-*>` and
- * `<pie-assessment-toolkit>` element.
+ * A cohort (one section and attempt) moves through `composed`,
+ * `engine-ready`, `interactive` and `disposed`, in that order. The section
+ * runtime engine in `@pie-players/pie-assessment-toolkit` is the only emitter;
+ * it dispatches the event on the layout element. `pie-loading-complete` is
+ * not a stage; it fires once per cohort when the section controller is ready
+ * and the element pre-warm has resolved. `readiness.mode = "strict"` only
+ * delays `interactive`.
  *
- * The four-stage canonical list (`composed`, `engine-ready`, `interactive`,
- * `disposed`) was finalized after the M5/M6 cumulative review confirmed
- * zero internal or external consumers for the original `attached`,
- * `runtime-bound`, and `ui-rendered` stages. The retro keeps the same
- * shape for both the toolkit CE and the layout CEs — every CE iterates
- * through the same list so subscribers don't need to special-case shape.
- *
- * Locked decisions (see `m6_ready_vocab_canonical_followup.plan.md`):
- * - **A1** Stage machine model with one canonical event family.
- * - **B1** "All items loaded" is reclassified as `pie-loading-complete`,
- *   not a stage. (The previous `ready` DOM event alias was removed in
- *   the broad architecture review compat sweep.)
- * - **C1** `readiness.mode = "strict"` only delays the `interactive`
- *   transition; every earlier stage fires identically across modes.
- * - **D1** One DOM event family `pie-stage-change` with the stage in the
- *   payload, mirroring the M3 `framework-error` idiom.
- *
- * Failure semantics deliberately stay in the M3 framework-error contract —
- * `status: "failed"` records the position; the framework error records the
- * cause.
+ * `status` is `entered`, or `failed` for the stage a non-recoverable
+ * framework error stopped the chain at, with `skipped` for each later stage
+ * up to `interactive`. The `framework-error` event carries the cause.
  */
 export const STAGES = Object.freeze([
     "composed",
@@ -35,23 +19,3 @@ export const STAGES = Object.freeze([
     "interactive",
     "disposed",
 ]);
-/**
- * Stages that apply to a given CE shape. Post-retro the toolkit and the
- * layout CEs share the same canonical list; `applicableStages` is kept as
- * an indirection so the tracker, telemetry, and tests don't have to be
- * rewritten when a future stage diverges between shapes.
- */
-export function applicableStages(_sourceCe) {
-    return STAGES;
-}
-/**
- * Strict ordering index used by the tracker to detect monotonic
- * violations. `disposed` is last; `composed` is first.
- */
-export function stageOrdinal(stage) {
-    const idx = STAGES.indexOf(stage);
-    if (idx === -1) {
-        throw new Error(`Unknown stage \`${stage}\``);
-    }
-    return idx;
-}

package/dist/pie/updates.js

@@ -8,7 +8,6 @@ import { createPieLogger, isGlobalDebugEnabled } from "./logger.js";
 import { findPieController } from "./scoring.js";
 import { defaultPieElementOptions } from "./types.js";
 import { findOrAddSession } from "./utils.js";
-// Create module-level logger (respects global debug flag - pass function for dynamic checking)
 const logger = createPieLogger("pie-updates", () => isGlobalDebugEnabled());
 const describeControllerShape = (controller) => {
     if (!controller)
@@ -67,8 +66,10 @@ const trackRemoval = (element) => {
     return () => wasConnected && !element.isConnected;
 };
 /**
- * Helper function to apply controller to element
- * Extracted to eliminate duplication and ensure consistent controller invocation
+ * Runs the controller's `model()` and assigns the result to the element, with
+ * the authored model's `id` and `element` as defaults, together with the
+ * session the controller may have written to. Assigns nothing once the element
+ * was removed.
  */
 const applyControllerToElement = async (element, model, elementSession, controller, env, logPrefix, wasRemoved, onElementSessionUpdate) => {
     logger.debug(`${logPrefix} Using controller, env:`, env);
@@ -118,7 +119,7 @@ const applyControllerToElement = async (element, model, elementSession, controll
     }
     catch (err) {
         logger.error(`${logPrefix} ❌ Controller error:`, err);
-        throw err; // Re-throw - controller errors are fatal
+        throw err; // The caller reports it and falls back to the authored model.
     }
 };
 const resolveAndValidateUpdateOptions = (opts) => {

package/dist/pie/utils.d.ts

@@ -60,8 +60,6 @@ export declare const getPackageWithoutVersion: (packages: string) => string;
 /**
  * Find or add a session entry for a given element
  *
- * TODO: kinda gnarly, copied from player project
- *
  * @param data - Session data array
  * @param id - Model/element ID
  * @param element - Element tag name (optional)

package/dist/pie/utils.js

@@ -103,8 +103,6 @@ export const getPackageWithoutVersion = (packages) => packages
 /**
  * Find or add a session entry for a given element
  *
- * TODO: kinda gnarly, copied from player project
- *
  * @param data - Session data array
  * @param id - Model/element ID
  * @param element - Element tag name (optional)

package/dist/security/sanitize-item-markup.d.ts

@@ -31,10 +31,14 @@ export interface SanitizeItemMarkupOptions {
  * Sanitize raw item/passage markup before it is injected into the DOM.
  *
  * - Strips `<script>`, event-handler attributes, unknown protocols and
- *   a standard set of dangerous tags (`iframe`, `object`, `embed`, `base`,
- *   `form`, `meta`, `link`).
+ *   the other tags in `SANITIZER_FORBIDDEN_TAGS` (`iframe`, `object`, `embed`,
+ *   `base`, `form`, `meta`, `link`, `style`, `foreignObject`).
  * - Preserves PIE custom elements (`pie-*`) and any extra tags listed in
  *   `allowedCustomElements`.
+ * - Marks elements that carry an authored color, as `markAuthoredColors`
+ *   in `@pie-element/shared-utils` describes, so a color scheme can override
+ *   it. A host that opts out with `trust-markup` or supplies its own
+ *   sanitizer gets no markers.
  * - During SSR (no `window`) returns an empty string so untrusted markup
  *   never reaches the prerender output; the live renderer will re-run the
  *   sanitizer on hydrate.
@@ -42,8 +46,8 @@ export interface SanitizeItemMarkupOptions {
 export declare function sanitizeItemMarkup(markup: string, options?: SanitizeItemMarkupOptions): string;
 /**
  * Build the default `ItemMarkupSanitizer` used by the players. The returned
- * function is stable for a given set of allowed custom elements so callers
- * can safely use reference equality when deciding whether to re-sanitize.
+ * function captures the options once; each call returns a new function, so a
+ * caller that compares sanitizers by identity keeps the one it built.
  */
 export declare function createDefaultItemMarkupSanitizer(options?: SanitizeItemMarkupOptions): ItemMarkupSanitizer;
 /**

package/dist/security/sanitize-item-markup.js

@@ -7,6 +7,7 @@
  * or supply their own sanitizer function if they need a stricter / looser
  * allow-list.
  */
+import { markAuthoredColors } from "@pie-element/shared-utils";
 import DOMPurify from "dompurify";
 import { SANITIZER_FORBIDDEN_ATTRS, SANITIZER_FORBIDDEN_TAGS, } from "./sanitize-forbidden-lists.js";
 import { installStyleAttributeHook } from "./sanitize-style-attribute.js";
@@ -29,6 +30,40 @@ const BASE_ALLOWED_ATTRS = [
     "lang",
     "dir",
 ];
+// MathML authored content uses that DOMPurify drops: elementary math, which
+// `@pie-element/shared-math-rendering-mathjax` rewrites as a table before
+// MathJax reads it, and `semantics`, `annotation`, `mprescripts` and `none`.
+// `annotation-xml` stays out because it is an HTML integration point.
+const MATHML_TAGS = new Set([
+    "mstack",
+    "mlongdiv",
+    "msgroup",
+    "msrow",
+    "msline",
+    "mscarries",
+    "mscarry",
+    "semantics",
+    "annotation",
+    "mprescripts",
+    "none",
+]);
+const MATHML_ATTRS = [
+    "stackalign",
+    "charalign",
+    "charspacing",
+    "longdivstyle",
+    "position",
+    "shift",
+    "location",
+    "crossout",
+    "leftoverhang",
+    "rightoverhang",
+    "mslinethickness",
+    "linebreak",
+];
+// Prefixed MathML such as `<m:math>`, which the HTML parser reads as unknown
+// HTML elements and the math adapter re-creates as MathML.
+const PREFIXED_TAG = /^[a-z_][\w.-]*:[a-z][\w.-]*$/;
 const BASE_URI_SAFE_ATTRS = ["pie-id"];
 const FORBIDDEN_TAGS = SANITIZER_FORBIDDEN_TAGS;
 const FORBIDDEN_ATTRS = SANITIZER_FORBIDDEN_ATTRS;
@@ -57,16 +92,24 @@ function resolvePurifier() {
     // `style` is URI-safe to DOMPurify, so nothing inside it is inspected
     // without this. See sanitize-style-attribute.ts.
     installStyleAttributeHook(purifierInstance);
+    // After the style filter, so only declarations that survive it are marked.
+    // The markers are the contract a color scheme's CSS overrides authored
+    // colors through, shared with element model HTML. (PIE-1119)
+    purifierInstance.addHook?.("afterSanitizeAttributes", (node) => markAuthoredColors(node));
     return purifierInstance;
 }
 /**
  * Sanitize raw item/passage markup before it is injected into the DOM.
  *
  * - Strips `<script>`, event-handler attributes, unknown protocols and
- *   a standard set of dangerous tags (`iframe`, `object`, `embed`, `base`,
- *   `form`, `meta`, `link`).
+ *   the other tags in `SANITIZER_FORBIDDEN_TAGS` (`iframe`, `object`, `embed`,
+ *   `base`, `form`, `meta`, `link`, `style`, `foreignObject`).
  * - Preserves PIE custom elements (`pie-*`) and any extra tags listed in
  *   `allowedCustomElements`.
+ * - Marks elements that carry an authored color, as `markAuthoredColors`
+ *   in `@pie-element/shared-utils` describes, so a color scheme can override
+ *   it. A host that opts out with `trust-markup` or supplies its own
+ *   sanitizer gets no markers.
  * - During SSR (no `window`) returns an empty string so untrusted markup
  *   never reaches the prerender output; the live renderer will re-run the
  *   sanitizer on hydrate.
@@ -80,8 +123,11 @@ export function sanitizeItemMarkup(markup, options = {}) {
     const allowedCustomElements = (options.allowedCustomElements ?? []).map((name) => name.toLowerCase());
     const explicitCustomElementSet = new Set(allowedCustomElements);
     const result = purifier.sanitize(markup, {
-        ADD_TAGS: allowedCustomElements,
-        ADD_ATTR: BASE_ALLOWED_ATTRS,
+        // DOMPurify still removes a tag in FORBID_TAGS that this accepts.
+        ADD_TAGS: (tagName) => explicitCustomElementSet.has(tagName) ||
+            MATHML_TAGS.has(tagName) ||
+            PREFIXED_TAG.test(tagName),
+        ADD_ATTR: [...BASE_ALLOWED_ATTRS, ...MATHML_ATTRS],
         ADD_URI_SAFE_ATTR: BASE_URI_SAFE_ATTRS,
         FORBID_TAGS: FORBIDDEN_TAGS,
         FORBID_ATTR: FORBIDDEN_ATTRS,
@@ -121,8 +167,8 @@ export function sanitizeItemMarkup(markup, options = {}) {
 }
 /**
  * Build the default `ItemMarkupSanitizer` used by the players. The returned
- * function is stable for a given set of allowed custom elements so callers
- * can safely use reference equality when deciding whether to re-sanitize.
+ * function captures the options once; each call returns a new function, so a
+ * caller that compares sanitizers by identity keeps the one it built.
  */
 export function createDefaultItemMarkupSanitizer(options = {}) {
     const { allowedCustomElements, wrapOverwideContent } = options;

package/dist/security/sanitize-svg-icon.js

@@ -51,8 +51,8 @@ export function sanitizeSvgIcon(icon) {
     });
     const str = typeof result === "string" ? result : String(result ?? "");
     if (stringCache.size >= STRING_CACHE_MAX) {
-        // Naive LRU: clear oldest half when the cache fills up. Tool icons are
-        // a small fixed set per assessment so this is rarely hit.
+        // Evict the oldest-inserted half when full; a hit does not refresh an entry.
+        // Tool icons are a small fixed set per assessment, so this rarely runs.
         const keys = [...stringCache.keys()];
         for (let i = 0; i < keys.length / 2; i += 1) {
             stringCache.delete(keys[i]);

package/dist/security/wrap-overwide-images.d.ts

@@ -24,7 +24,7 @@
  *   they never appeared in the authored markup string.
  *
  * The wrapping itself lives in `./wrap-overwide.js`, shared with the table
- * wrapper: only the four values below and the accessible name differ.
+ * wrapper: only the spec below differs.
  */
 import { type WrapOverwideOptions } from "./wrap-overwide.js";
 export type WrapOverwideImagesInElementOptions = WrapOverwideOptions;

package/dist/security/wrap-overwide-images.js

@@ -24,7 +24,7 @@
  *   they never appeared in the authored markup string.
  *
  * The wrapping itself lives in `./wrap-overwide.js`, shared with the table
- * wrapper: only the four values below and the accessible name differ.
+ * wrapper: only the spec below differs.
  */
 import { isOverwideWrapMutation, wrapOverwideInElement, wrapOverwideMarkup, } from "./wrap-overwide.js";
 function buildAriaLabel(image) {
@@ -32,12 +32,31 @@ function buildAriaLabel(image) {
     const trimmed = alt ? alt.trim() : "";
     return trimmed ? `Scrollable image: ${trimmed}` : "Scrollable image";
 }
+/**
+ * A block-level image — an element's own `display: block`, a flex item — gets a
+ * block wrapper, so wrapping it adds no line box below it — a host reset of
+ * `img { display: block }` included. The live pass reads the computed display;
+ * markup parsed off-document has only the inline style, so the live pass reads
+ * a wrapper built there again.
+ */
+function imageLayoutClass(image) {
+    const view = image.ownerDocument?.defaultView;
+    const display = view
+        ? view.getComputedStyle(image).display
+        : image.style?.display;
+    const blockLevel = !!display &&
+        !display.startsWith("inline") &&
+        display !== "none" &&
+        display !== "contents";
+    return blockLevel ? "pie-image-scroll-block" : null;
+}
 const IMAGE_SPEC = {
     selector: "img",
     wrapperTag: "span",
     wrapperClass: "pie-image-scroll",
     markupProbe: /<img\b/i,
     buildAriaLabel,
+    layoutClass: imageLayoutClass,
 };
 /**
  * Wrap every unwrapped `<img>` descendant of `root` with the shared

package/dist/security/wrap-overwide.d.ts

@@ -32,6 +32,11 @@ export interface OverwideWrapSpec {
     markupProbe: RegExp;
     /** The wrapper's accessible name for one node. */
     buildAriaLabel: (node: Element) => string;
+    /**
+     * An extra wrapper class carrying the node's own layout, or `null` for none.
+     * Absent when every wrapper lays out alike.
+     */
+    layoutClass?: (node: Element) => string | null;
 }
 export interface WrapOverwideOptions {
     /**
@@ -45,6 +50,9 @@ export interface WrapOverwideOptions {
 /**
  * Wrap every unwrapped match under `root`. Returns the number newly wrapped so
  * callers can short-circuit when nothing changed. Idempotent.
+ *
+ * Under a connected `root`, a wrapper whose layout was never read live gains
+ * the layout class this pass would have given it.
  */
 export declare function wrapOverwideInElement(root: Element, spec: OverwideWrapSpec, options?: WrapOverwideOptions): number;
 /**

package/dist/security/wrap-overwide.js

@@ -40,9 +40,18 @@ function isInsidePieCustomElement(node, root) {
     }
     return false;
 }
+/**
+ * Wrappers whose layout class was read from the live cascade. A wrapper built
+ * off-document saw only its node's inline style, so the first live pass to meet
+ * it reads the layout again; this set keeps that to once per wrapper.
+ */
+const liveLayoutRead = new WeakSet();
 /**
  * Wrap every unwrapped match under `root`. Returns the number newly wrapped so
  * callers can short-circuit when nothing changed. Idempotent.
+ *
+ * Under a connected `root`, a wrapper whose layout was never read live gains
+ * the layout class this pass would have given it.
  */
 export function wrapOverwideInElement(root, spec, options = {}) {
     const { skipPieDescendants = false } = options;
@@ -52,24 +61,59 @@ export function wrapOverwideInElement(root, spec, options = {}) {
     const ownerDocument = root.ownerDocument;
     if (!ownerDocument)
         return 0;
-    let wrapped = 0;
+    const readsLiveLayout = !!spec.layoutClass && !!ownerDocument.defaultView && root.isConnected;
+    const targets = [];
+    const unread = [];
     for (const node of nodes) {
         const parent = node.parentElement;
         if (!parent)
             continue;
         // Idempotency — already wrapped.
-        if (parent.classList?.contains(spec.wrapperClass))
+        const wrapped = parent.classList?.contains(spec.wrapperClass);
+        if (wrapped && (!readsLiveLayout || liveLayoutRead.has(parent)))
             continue;
         // Authored-markup pass: leave PIE custom-element internals alone.
         if (skipPieDescendants && isInsidePieCustomElement(node, root))
             continue;
         if (node.closest(EDITING_HOST_SELECTOR))
             continue;
+        if (!wrapped)
+            targets.push(node);
+        else if (!unread.some((other) => other.parentElement === parent))
+            unread.push(node);
+    }
+    // Layout is read for every node before the first insertion: a read after a
+    // wrap forces a fresh style resolution, one per node. A wrapper's own styles
+    // override its node's layout — the theme makes every wrapped image a block —
+    // so an existing wrapper is read with its classes lifted.
+    const unreadWrappers = unread.map((node) => node.parentElement);
+    const liftedClasses = unreadWrappers.map((wrapper) => wrapper.className);
+    for (const wrapper of unreadWrappers)
+        wrapper.className = "";
+    const layoutClasses = targets.map((node) => spec.layoutClass?.(node) ?? null);
+    const unreadLayoutClasses = unread.map((node) => spec.layoutClass?.(node) ?? null);
+    for (const [index, wrapper] of unreadWrappers.entries()) {
+        wrapper.className = liftedClasses[index];
+        const layoutClass = unreadLayoutClasses[index];
+        if (layoutClass)
+            wrapper.classList.add(layoutClass);
+        liveLayoutRead.add(wrapper);
+    }
+    let wrapped = 0;
+    for (const [index, node] of targets.entries()) {
+        const parent = node.parentElement;
+        if (!parent)
+            continue;
         const wrapper = ownerDocument.createElement(spec.wrapperTag);
-        wrapper.className = spec.wrapperClass;
+        const layoutClass = layoutClasses[index];
+        wrapper.className = layoutClass
+            ? `${spec.wrapperClass} ${layoutClass}`
+            : spec.wrapperClass;
         wrapper.setAttribute("tabindex", "0");
         wrapper.setAttribute("role", "region");
         wrapper.setAttribute("aria-label", spec.buildAriaLabel(node));
+        if (readsLiveLayout)
+            liveLayoutRead.add(wrapper);
         parent.insertBefore(wrapper, node);
         wrapper.appendChild(node);
         wrapped += 1;

package/dist/timed-media/media-element-source.js

@@ -116,6 +116,5 @@ export function createMediaElementTimeSource(element, options = {}) {
 export function findMediaElement(root) {
     if (!root)
         return null;
-    const found = root.querySelector("video, audio");
-    return found ?? null;
+    return root.querySelector("video, audio");
 }