@pie-players/pie-players-shared 0.3.73 → 0.3.75

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,6 +92,10 @@ 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;
 }
 /**
@@ -67,6 +106,10 @@ function resolvePurifier() {
  *   `form`, `meta`, `link`).
  * - 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,
@@ -144,7 +190,3 @@ export function buildAuthoringAllowList(elementTagNames) {
     }
     return [...out];
 }
-/** Reset the memoised DOMPurify instance. Only intended for tests. */
-export function resetPurifierForTesting() {
-    purifierInstance = null;
-}

package/dist/security/sanitize-svg-icon.d.ts

@@ -10,5 +10,3 @@
  * or the input is not a string.
  */
 export declare function sanitizeSvgIcon(icon: unknown): string;
-/** Reset sanitizer state. Intended for tests. */
-export declare function resetSvgSanitizerForTesting(): void;

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

@@ -61,8 +61,3 @@ export function sanitizeSvgIcon(icon) {
     stringCache.set(icon, str);
     return str;
 }
-/** Reset sanitizer state. Intended for tests. */
-export function resetSvgSanitizerForTesting() {
-    svgPurifierInstance = null;
-    stringCache.clear();
-}

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

@@ -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

@@ -14,6 +14,11 @@
  * the real divergence — an image has `alt`, a table has `<caption>`,
  * `aria-label` and `aria-labelledby` — which is why it is a function rather than
  * a template.
+ *
+ * Content inside an editing host is never wrapped, on either pass. The editor
+ * owns that DOM: ProseMirror reads the wrapper as a foreign mutation and redraws
+ * the node without it, so an observer-driven wrap and the editor undo each other
+ * for as long as the editor holds an image.
  */
 /** What one content kind needs in order to be wrapped. */
 export interface OverwideWrapSpec {
@@ -27,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 {
     /**
@@ -40,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

@@ -14,8 +14,22 @@
  * the real divergence — an image has `alt`, a table has `<caption>`,
  * `aria-label` and `aria-labelledby` — which is why it is a function rather than
  * a template.
+ *
+ * Content inside an editing host is never wrapped, on either pass. The editor
+ * owns that DOM: ProseMirror reads the wrapper as a foreign mutation and redraws
+ * the node without it, so an observer-driven wrap and the editor undo each other
+ * for as long as the editor holds an image.
  */
 const PIE_CUSTOM_ELEMENT_TAG_REGEX = /^pie-/i;
+/**
+ * An editing host: `contenteditable` in any state but `false`. A
+ * `contenteditable="false"` island inside a host still belongs to the host's
+ * editor — ProseMirror marks every leaf node that way, images included — so the
+ * test looks past such islands to the nearest host. A read-only editor root
+ * (`contenteditable="false"`) is no host; ProseMirror registers no DOM mutations
+ * while its view is not editable.
+ */
+const EDITING_HOST_SELECTOR = '[contenteditable]:not([contenteditable="false" i])';
 function isInsidePieCustomElement(node, root) {
     let ancestor = node.parentElement;
     while (ancestor && ancestor !== root) {
@@ -26,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;
@@ -38,22 +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/policy.js

@@ -6,6 +6,7 @@
  * reports them as a framework error and delivers as an ordinary section, which is
  * loud without costing the learner the content.
  */
+import { normalizeMediaFragment } from "../media/index.js";
 /**
  * Applied when `playbackPolicy` is absent entirely. The restrictive values are
  * the defaults because a timed-media section is authored to sequence: a section
@@ -43,21 +44,6 @@ function isCorrectnessCondition(condition) {
 function trimmed(value) {
     return typeof value === "string" ? value.trim() : "";
 }
-function normalizeRange(value) {
-    if (!value || typeof value !== "object")
-        return null;
-    const raw = value;
-    const start = Number(raw.startSeconds);
-    if (!Number.isFinite(start) || start < 0)
-        return null;
-    const end = Number(raw.endSeconds);
-    // An end at or before the start is a window that can never contain a
-    // position, so it is treated as no end — the same rule
-    // `normalizeMediaFragment` applies in the toolkit, kept identical on purpose.
-    if (!Number.isFinite(end) || end <= start)
-        return { startSeconds: start };
-    return { startSeconds: start, endSeconds: end };
-}
 function normalizePlaybackPolicy(value) {
     if (value === undefined || value === null) {
         return { policy: { ...TIMED_MEDIA_PLAYBACK_POLICY_DEFAULTS }, error: null };
@@ -179,7 +165,10 @@ export function normalizeTimedMediaSectionData(args) {
             continue;
         }
         seenIdentifiers.add(identifier);
-        const range = normalizeRange(cue.range);
+        // The same rule as every other authored media range: an end at or before
+        // the start is a window that can never contain a position, so it is
+        // treated as no end.
+        const range = normalizeMediaFragment(cue.range);
         if (!range) {
             errors.push({
                 code: "invalid-cue-range",