@jini-ai/cms 0.5.5 → 0.5.7

package/dist/widgets/html/gallery-render.js

@@ -0,0 +1,65 @@
+import { escapeHtml } from '@jini-ai/core/text';
+import { parseEmbedHtmlAttributes } from '../markers/html-attributes.js';
+import { parseGalleryConfig } from '../markers/gallery.js';
+/** Layout-only baseline; host themes override jini classes/custom properties without palette coupling. */
+export const GALLERY_STYLE = `<style data-jini-gallery-style>
+.jini-gallery{gap:var(--jini-gallery-gap,1rem)}
+.jini-gallery-item{margin:0;min-width:0;break-inside:avoid}
+.jini-gallery audio{display:block;width:100%}
+.jini-gallery img,.jini-gallery video{display:block;width:100%;height:auto;aspect-ratio:var(--jini-gallery-ratio,auto);object-fit:cover}
+.jini-gallery-single{display:grid;grid-template-columns:1fr}
+.jini-gallery-grid{display:grid;grid-template-columns:repeat(var(--jini-gallery-columns,3),minmax(0,1fr))}
+.jini-gallery-masonry{columns:var(--jini-gallery-columns,3);column-gap:var(--jini-gallery-gap,1rem)}
+.jini-gallery-masonry .jini-gallery-item{margin-block-end:var(--jini-gallery-gap,1rem)}
+.jini-gallery-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
+.jini-gallery-carousel .jini-gallery-item{flex:0 0 min(85%,36rem);scroll-snap-align:start}
+@media(max-width:48rem){.jini-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jini-gallery-masonry{columns:2}}
+@media(max-width:30rem){.jini-gallery-grid{grid-template-columns:1fr}.jini-gallery-masonry{columns:1}}
+</style>`;
+/** Render one ordered figure using the host's established image renderer and alt fallback.
+ * Missing alt is flagged in markup as well as validation; an explicit empty alt stays decorative.
+ */
+function renderFigure({ image, media, renderImage }) {
+    if ((image.slug !== undefined || image.mediaId !== undefined) && !media)
+        return '';
+    const storedAlt = typeof media?.alt === 'string' && media.alt.length > 0 ? media.alt : undefined;
+    const alt = image.alt ?? storedAlt;
+    const missingAlt = alt === undefined ? ' data-jini-alt-missing="true"' : '';
+    const markup = renderImage({ image: { ...image, alt: alt ?? '' }, media });
+    const caption = image.caption === undefined ? '' : `<figcaption>${escapeHtml({ text: image.caption })}</figcaption>`;
+    return `<figure class="jini-gallery-item"${missingAlt}>${markup}${caption}</figure>`;
+}
+/** Server-render accessible gallery markup. Image URLs, metadata and srcset belong to the host
+ * image pipeline supplied as a port, never templated here. Invalid config produces no output.
+ * @complexity O(n) time and output space for at most 50 images, without I/O.
+ */
+export function renderGallery({ config, media, renderImage, renderRawHtml }, _optional = {}) {
+    const parsed = parseGalleryConfig({ config }, { allowEmpty: true });
+    if (!parsed.config)
+        return '';
+    const gallery = parsed.config;
+    const records = typeof media === 'object' && media !== null && !Array.isArray(media) ? media : {};
+    if (gallery.mode === 'html')
+        return renderRawHtml?.({ html: gallery.html ?? '', media: records }) ?? '';
+    // Media-mode configs come from the Media widget editor; naming the Gallery editor there misleads.
+    if (gallery.images.length === 0)
+        return `<div class="jini-gallery jini-gallery-empty" role="note">${gallery.mode === 'media' ? 'Choose media in the Media widget editor.' : 'Choose images in the Gallery widget editor.'}</div>`;
+    const figures = gallery.images.map(image => renderFigure({ image, media: (image.slug ?? image.mediaId) !== undefined && Object.hasOwn(records, (image.slug ?? image.mediaId)) ? records[(image.slug ?? image.mediaId)] : undefined, renderImage })).join('');
+    const ratio = gallery.aspectRatio === undefined ? '' : `;--jini-gallery-ratio:${gallery.aspectRatio}`;
+    // TODO: bind data-jini-lightbox through a host theme's lightbox script slot when one exists.
+    // Until then the gallery stays readable and keyboard-scrollable without any client script.
+    const attributes = {
+        role: 'region', 'aria-label': gallery.mode === 'media' ? 'Media' : 'Image gallery',
+        ...(gallery.layout === 'carousel' ? { tabindex: '0', 'aria-roledescription': 'carousel' } : {}),
+        ...(gallery.lightbox === true ? { 'data-jini-lightbox': 'true' } : {}),
+        ...parseEmbedHtmlAttributes({ text: gallery.htmlAttributes ?? '' }).attributes,
+    };
+    const extraClass = [gallery.cssClass, attributes.class].filter(Boolean).join(' ');
+    delete attributes.class;
+    // Layout styles remain the base; authored safe style declarations override them in order.
+    const authoredStyle = attributes.style;
+    delete attributes.style;
+    const extra = Object.entries(attributes).map(([name, value]) => ` ${name}="${escapeHtml({ text: value })}"`).join('');
+    return GALLERY_STYLE + `<div class="jini-gallery jini-gallery-${gallery.layout}${extraClass ? ` ${escapeHtml({ text: extraClass })}` : ''}"${extra} style="--jini-gallery-columns:${gallery.columns ?? 3}${ratio}${authoredStyle ? `;${escapeHtml({ text: authoredStyle })}` : ''}">${figures}</div>`;
+}
+//# sourceMappingURL=gallery-render.js.map

package/dist/widgets/html/html-embeds.d.ts

@@ -107,6 +107,8 @@ import { type MarkerAttribute } from "../markers/marker.js";
  * — this interface is the compatibility seam, not a ceiling.
  */
 export interface PageHtmlEmbedRef {
+    /** Occurrence identity for placement overrides sharing one saved widget. */
+    readonly placementKey?: string;
     readonly type: string;
     readonly id: string | null;
     /** See this file's header for why this is NOT the same mechanism as `name` below, despite the
@@ -129,6 +131,8 @@ export interface PageHtmlEmbedRef {
      */
     readonly header: boolean;
     readonly mode?: "html";
+    /** Full inline configuration for compound embeds; existing scalar projections remain stable. */
+    readonly config?: Readonly<Record<string, unknown>>;
 }
 /**
  * Resource bound (Programmer workflow step 5a4) mirroring `embed-service.ts`'s

package/dist/widgets/html/html-embeds.js

@@ -156,12 +156,18 @@ function configBooleanDefaultTrue(config, key) {
 function toEmbedRef(marker) {
     return {
         type: marker.type.toLowerCase(),
-        id: normalizeEmbedId(configString(marker.config, "id")),
+        // Only saved widget overlays use placement keys. Inline Media content already has its own
+        // occurrence id below; a second key would make rendering miss the resolver's media:<n> result.
+        ...(marker.type.toLowerCase() === "widget" && marker.config.content !== undefined ? { placementKey: `placement:${marker.occurrence}` } : {}),
+        // Inline galleries have no target entity. Key by occurrence so repeated assets with different
+        // layouts/captions cannot overwrite each other's resolved IR, even with an authored id.
+        id: (marker.type.toLowerCase() === "gallery" || (marker.type.toLowerCase() === "media" && (marker.config.content !== undefined || marker.config.items !== undefined || marker.config.html !== undefined))) ? `${marker.type.toLowerCase()}:${marker.occurrence}` : normalizeEmbedId(configString(marker.config, "id")),
         slug: normalizeEmbedSlug(configString(marker.config, "slug")),
         name: configString(marker.config, "name"),
         variant: configString(marker.config, "variant"),
         header: configBooleanDefaultTrue(marker.config, "header"),
         ...(marker.config.mode === "html" ? { mode: "html" } : {}),
+        config: marker.config,
     };
 }
 /**

package/dist/widgets/html/index.d.ts

@@ -1,5 +1,8 @@
+export { resolveGalleryWidgetMedia } from "../resolver-service.js";
 export * from "./html-embeds.js";
 export * from "./legacy-widget-markers.js";
+export * from "./gallery-render.js";
 export * from "./resolve-html-page-embeds.js";
 export type { ResolveHtmlPageEmbedsDeps } from "../resolver-service.js";
+export * from './server-fragment.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/widgets/html/index.js

@@ -1,4 +1,7 @@
+export { resolveGalleryWidgetMedia } from "../resolver-service.js";
 export * from "./html-embeds.js";
 export * from "./legacy-widget-markers.js";
+export * from "./gallery-render.js";
 export * from "./resolve-html-page-embeds.js";
+export * from './server-fragment.js';
 //# sourceMappingURL=index.js.map

package/dist/widgets/html/server-fragment.d.ts

@@ -0,0 +1,9 @@
+/** Reject executable/unsupported markup rather than quietly preserving a plugin's unsafe output.
+ * URLs are local or HTTP(S); form submission remains native. No inline style, events, SVG,
+ * iframe, script, srcdoc, data URLs, or enhancement assets are admitted. */
+export declare function validateServerWidgetFragment(required: {
+    html: string;
+}, optional?: {
+    maxBytes?: number;
+}): string;
+//# sourceMappingURL=server-fragment.d.ts.map

package/dist/widgets/html/server-fragment.js

@@ -0,0 +1,38 @@
+/** Public plugin fragments are HTML, never same-origin script (ADR-025). Use the existing
+ * HTML parser, not regex sanitization: decoded attributes and foreign namespaces matter. */
+import { parseFragment, serialize } from 'parse5';
+const ELEMENTS = new Set(['div', 'span', 'p', 'br', 'hr', 'strong', 'em', 'b', 'i', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'blockquote', 'pre', 'code', 'a', 'img', 'figure', 'figcaption', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'form', 'label', 'input', 'textarea', 'select', 'option', 'button']);
+const ATTRIBUTES = new Set(['id', 'class', 'title', 'role', 'href', 'src', 'alt', 'width', 'height', 'action', 'method', 'name', 'value', 'type', 'required', 'disabled', 'checked', 'selected', 'multiple', 'placeholder', 'for', 'rows', 'cols', 'min', 'max', 'step', 'colspan', 'rowspan']);
+/** Reject executable/unsupported markup rather than quietly preserving a plugin's unsafe output.
+ * URLs are local or HTTP(S); form submission remains native. No inline style, events, SVG,
+ * iframe, script, srcdoc, data URLs, or enhancement assets are admitted. */
+export function validateServerWidgetFragment(required, optional = {}) {
+    if (new TextEncoder().encode(required.html).byteLength > (optional.maxBytes ?? 65536))
+        throw new Error('widget HTML exceeds its size cap');
+    const root = parseFragment(required.html);
+    const visit = (node) => {
+        if ('tagName' in node) {
+            if (node.namespaceURI !== 'http://www.w3.org/1999/xhtml' || !ELEMENTS.has(node.tagName))
+                throw new Error('executable or unsupported widget element');
+            for (const attr of node.attrs) {
+                if (attr.namespace || (!ATTRIBUTES.has(attr.name) && !/^aria-[a-z-]+$/.test(attr.name)))
+                    throw new Error('executable or unsupported widget attribute');
+                if (['href', 'src', 'action'].includes(attr.name)) {
+                    // URL parsing catches entity-decoded schemes and embedded tab/newline obfuscation.
+                    const value = attr.value;
+                    if (/[\u0000-\u0020\\]/.test(value) || value.startsWith('//'))
+                        throw new Error('unsafe widget URL');
+                    const url = new URL(value, 'https://widget.invalid/');
+                    if (!['http:', 'https:'].includes(url.protocol))
+                        throw new Error('unsafe widget URL');
+                }
+            }
+            for (const child of node.childNodes)
+                visit(child);
+        }
+    };
+    for (const node of root.childNodes)
+        visit(node);
+    return serialize(root);
+}
+//# sourceMappingURL=server-fragment.js.map

package/dist/widgets/markers/gallery.d.ts

@@ -0,0 +1,50 @@
+/** Inline gallery configuration; media resolution remains owned by the media embed pipeline. */
+export interface GalleryImage {
+    readonly mediaId?: string;
+    readonly slug?: string;
+    readonly src?: string;
+    readonly alt?: string;
+    readonly caption?: string;
+}
+export interface GalleryConfig {
+    readonly images: readonly GalleryImage[];
+    readonly layout: 'single' | 'grid' | 'carousel' | 'masonry';
+    readonly mode?: 'media' | 'html';
+    readonly html?: string;
+    readonly htmlAttributes?: string;
+    readonly cssClass?: string;
+    readonly columns?: number;
+    readonly aspectRatio?: string;
+    readonly lightbox?: boolean;
+}
+export declare const MAX_GALLERY_IMAGES = 50;
+/** Pure validation result, with missing-alt warnings separate from fatal configuration errors.
+ * Explicit alt="" denotes decorative content. Unknown keys remain available to host authoring.
+ * @complexity O(n) time and space for at most 50 images; oversized arrays are rejected before walking.
+ */
+export declare function parseGalleryConfig({ config }: {
+    config: unknown;
+}, { allowEmpty }?: {
+    allowEmpty?: boolean;
+}): {
+    config?: GalleryConfig;
+    errors: string[];
+    warnings: string[];
+};
+/** References describe authored intent even when another config field is invalid. Do not gate
+ * safe-delete or export on successful rendering: that would hide the broken page needing protection.
+ * Images beyond the renderable image cap cannot render and do not expand the reference index.
+ * @complexity O(min(n,50)) time and space over the authored image list; no I/O or resolution.
+ */
+export declare function galleryMediaReferences({ config }: {
+    config: unknown;
+}, _optional?: Record<string, never>): readonly {
+    mediaId: string;
+    index: number;
+}[];
+/** Authored slug references, independent of render validity. Tokens and quoted data attributes
+ * share the media reference key rules. Marker values are already entity-decoded by the scanner. */
+export declare function mediaHtmlSlugs({ html }: {
+    html: string;
+}, _optional?: Record<string, never>): readonly string[];
+//# sourceMappingURL=gallery.d.ts.map

package/dist/widgets/markers/gallery.js

@@ -0,0 +1,164 @@
+import { decodeMarkerHtmlAttribute } from './marker.js';
+import { isPlausibleMediaRefId } from './media-reference.js';
+export const MAX_GALLERY_IMAGES = 50;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/** Same bounded, single-path-segment contract the media resolver accepts. No I/O. */
+function validMediaId(value) {
+    return isPlausibleMediaRefId({ value });
+}
+/** Native URL parsing validates browser-loaded sources; hosts may enforce stricter URL policy. */
+function validSource(value) {
+    if (typeof value !== 'string' || value.length === 0 || value.length > 2048)
+        return false;
+    try {
+        const url = new URL(value);
+        return ['http:', 'https:'].includes(url.protocol) && !url.username && !url.password;
+    }
+    catch {
+        return false;
+    }
+}
+/** Numeric CSS ratio only: prevents configuration text becoming arbitrary CSS declarations. */
+function validRatio(value) {
+    if (typeof value !== 'string' || !/^\d+(?:\.\d+)?(?:\s*\/\s*\d+(?:\.\d+)?)?$/.test(value))
+        return false;
+    return value.split('/').every(part => Number.isFinite(Number(part)) && Number(part) > 0);
+}
+/** Validate one image independently so a bad sibling never hides another image's diagnostics. */
+function imageErrors(value, index) {
+    const path = `images[${index}]`;
+    if (!isRecord(value))
+        return [`${path} must be an object`];
+    const errors = [];
+    if ((value.mediaId !== undefined) === (value.src !== undefined))
+        errors.push(`${path} requires exactly one of mediaId or src`);
+    if (value.mediaId !== undefined && !validMediaId(value.mediaId))
+        errors.push(`${path}.mediaId must be a nonempty media id of at most 200 characters, without slashes or whitespace`);
+    if (value.src !== undefined && !validSource(value.src))
+        errors.push(`${path}.src must be an HTTP(S) image URL without credentials, at most 2048 characters`);
+    for (const key of ['alt', 'caption']) {
+        if (value[key] !== undefined && typeof value[key] !== 'string')
+            errors.push(`${path}.${key} must be a string`);
+    }
+    return errors;
+}
+/** Pure validation result, with missing-alt warnings separate from fatal configuration errors.
+ * Explicit alt="" denotes decorative content. Unknown keys remain available to host authoring.
+ * @complexity O(n) time and space for at most 50 images; oversized arrays are rejected before walking.
+ */
+export function parseGalleryConfig({ config }, { allowEmpty = false } = {}) {
+    if (!isRecord(config))
+        return { errors: ['gallery config must be an object'], warnings: [] };
+    if (config.mode !== undefined || config.items !== undefined || config.html !== undefined)
+        return parseMediaContent({ config });
+    if (!Array.isArray(config.images) || (!allowEmpty && config.images.length === 0) || config.images.length > MAX_GALLERY_IMAGES) {
+        return { errors: [`images must contain between 1 and ${MAX_GALLERY_IMAGES} images`], warnings: [] };
+    }
+    const errors = config.images.flatMap(imageErrors);
+    const warnings = config.images.flatMap((image, index) => isRecord(image) && image.alt === undefined
+        ? [`images[${index}].alt is missing; supply alt text or an explicit empty string for a decorative image`] : []);
+    if (typeof config.layout !== 'string' || !['grid', 'carousel', 'masonry'].includes(config.layout))
+        errors.push('layout must be grid, carousel or masonry');
+    if (config.columns !== undefined && (!Number.isInteger(config.columns) || Number(config.columns) < 2 || Number(config.columns) > 6))
+        errors.push('columns must be an integer between 2 and 6');
+    if (config.aspectRatio !== undefined && !validRatio(config.aspectRatio))
+        errors.push('aspectRatio must be a positive number or ratio such as 16/9');
+    if (config.lightbox !== undefined && typeof config.lightbox !== 'boolean')
+        errors.push('lightbox must be a boolean');
+    if (errors.length > 0)
+        return { errors, warnings };
+    return { config: config, errors, warnings };
+}
+/** References describe authored intent even when another config field is invalid. Do not gate
+ * safe-delete or export on successful rendering: that would hide the broken page needing protection.
+ * Images beyond the renderable image cap cannot render and do not expand the reference index.
+ * @complexity O(min(n,50)) time and space over the authored image list; no I/O or resolution.
+ */
+export function galleryMediaReferences({ config }, _optional = {}) {
+    if (!isRecord(config))
+        return [];
+    const refs = [];
+    const items = Array.isArray(config.items) ? config.items : Array.isArray(config.images) ? config.images : [];
+    for (const [index, item] of items.slice(0, MAX_GALLERY_IMAGES).entries()) {
+        if (!isRecord(item))
+            continue;
+        const key = item.slug ?? item.mediaId;
+        if (validMediaId(key))
+            refs.push({ mediaId: key, index });
+    }
+    if (typeof config.html === 'string') {
+        for (const key of mediaHtmlSlugs({ html: config.html }))
+            refs.push({ mediaId: key, index: refs.length });
+    }
+    if (isRecord(config.content))
+        refs.push(...galleryMediaReferences({ config: config.content }));
+    return refs;
+}
+/** Normalize the new slug-first content into the existing gallery render contract. Legacy images
+ * remain read-only compatibility input; authored media items never accept raw URLs. O(n), n<=50. */
+function parseMediaContent({ config }) {
+    const errors = [];
+    const mode = config.mode ?? (config.html !== undefined ? 'html' : 'media');
+    if (mode !== 'media' && mode !== 'html')
+        errors.push('mode must be media or html');
+    for (const key of ['htmlAttributes', 'cssClass'])
+        if (config[key] !== undefined && typeof config[key] !== 'string')
+            errors.push(`${key} must be a string`);
+    if (mode === 'html') {
+        if (typeof config.html !== 'string' || config.html.length > 65536)
+            errors.push('html must be a string of at most 65536 characters');
+        return errors.length ? { errors, warnings: [] } : { config: { ...config, mode, images: [], layout: 'single' }, errors, warnings: [] };
+    }
+    if (!Array.isArray(config.items) || config.items.length > MAX_GALLERY_IMAGES)
+        return { errors: ['items must be an array of at most 50 slug items'], warnings: [] };
+    const images = [];
+    config.items.forEach((item, index) => {
+        if (!isRecord(item)) {
+            errors.push(`items[${index}] must be an object`);
+            return;
+        }
+        if (!validMediaId(item.slug))
+            errors.push(`items[${index}].slug must be a nonempty slug of at most 200 characters without slashes or whitespace`);
+        if (item.src !== undefined || item.mediaId !== undefined)
+            errors.push(`items[${index}] uses slug, never src or mediaId`);
+        for (const key of ['alt', 'caption'])
+            if (item[key] !== undefined && typeof item[key] !== 'string')
+                errors.push(`items[${index}].${key} must be a string`);
+        images.push(item);
+    });
+    const requestedLayout = config.layout ?? 'single';
+    let layout = 'single';
+    if (requestedLayout === 'single' || requestedLayout === 'grid' || requestedLayout === 'carousel' || requestedLayout === 'masonry') {
+        layout = requestedLayout;
+    }
+    else {
+        errors.push('layout must be single, grid, carousel or masonry');
+    }
+    if (config.columns !== undefined && (!Number.isInteger(config.columns) || Number(config.columns) < 1 || Number(config.columns) > 6))
+        errors.push('columns must be an integer between 1 and 6');
+    if (config.aspectRatio !== undefined && !validRatio(config.aspectRatio))
+        errors.push('aspectRatio must be a positive number or ratio such as 16/9');
+    if (errors.length)
+        return { errors, warnings: [] };
+    const normalized = { ...config, mode: 'media', images, layout };
+    return { config: normalized, errors, warnings: [] };
+}
+/** Authored slug references, independent of render validity. Tokens and quoted data attributes
+ * share the media reference key rules. Marker values are already entity-decoded by the scanner. */
+export function mediaHtmlSlugs({ html }, _optional = {}) {
+    const keys = [];
+    for (const match of html.matchAll(/\{\{media:([^{}]+)\}\}/g)) {
+        const key = decodeMarkerHtmlAttribute({ value: match[1] });
+        if (validMediaId(key))
+            keys.push(key);
+    }
+    for (const match of html.matchAll(/\bdata-media-slug\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi)) {
+        const key = decodeMarkerHtmlAttribute({ value: match[1] ?? match[2] ?? match[3] ?? '' });
+        if (validMediaId(key))
+            keys.push(key);
+    }
+    return keys;
+}
+//# sourceMappingURL=gallery.js.map

package/dist/widgets/markers/html-attributes.d.ts

@@ -89,10 +89,15 @@ export declare function isAllowedEmbedHtmlAttributeName({ name }: {
  * therefore the ONLY path to acceptance for a name; nothing here tries to sanitize an otherwise-
  * disallowed name or value into something safe.
  *
+ * @param options.styleContext Use `stylesheet` only for a style element's CSS text; allows
+ *   non-ASCII scalar hex escapes for glyphs while preserving the inline escape restriction.
+ *
  * @complexity Time O(n) in `text`'s length (one regex pass over it), space O(k) for k accepted
  *   attributes plus O(e) for e rejected tokens.
  */
 export declare function parseEmbedHtmlAttributes({ text }: {
     text: string;
-}, _optional?: Record<string, never>): ParsedEmbedHtmlAttributes;
+}, options?: {
+    styleContext?: "stylesheet";
+}): ParsedEmbedHtmlAttributes;
 //# sourceMappingURL=html-attributes.d.ts.map

package/dist/widgets/markers/html-attributes.js

@@ -116,16 +116,28 @@ function isUnsafeUrlValue(value) {
  * Whether a `style` value carries a known CSS injection or CSS-escape-bypass vector:
  * `expression(...)` (legacy IE script-in-CSS), a `javascript:`/`vbscript:` value inside a CSS
  * `url(...)`, `-moz-binding`/`behavior:` (XBL/HTC script bindings), `@import` (pulls in a second,
- * unvetted stylesheet), or ANY backslash — a CSS escape sequence (`\65` is `e`) can respell any of
- * the above past a plain substring check, so a backslash anywhere in the value is rejected outright
+ * unvetted stylesheet), or ANY backslash in an inline attribute — a CSS escape sequence (`\65`
+ * is `e`) can respell any of the above past a plain substring check, so a backslash anywhere in
+ * an inline value is rejected outright
  * rather than trying to first decode every possible CSS escape. Plain `url(...)` values (background
  * images) are otherwise allowed — authors here are the owner/admins, not anonymous input.
+ * Stylesheets additionally allow non-ASCII scalar hex escapes (e.g. `\2713` for a checkmark).
+ * They cannot respell the ASCII injection vocabulary. Only the validation projection changes;
+ * the accepted value remains byte-for-byte authored CSS. ASCII/invalid/other escapes still fail.
  *
- * @complexity O(n) in the value's length (one regex test).
+ * @complexity O(n) time/space in the value's length; escape matches consume at most six digits.
  */
 const UNSAFE_STYLE_PATTERN = /expression\(|javascript:|vbscript:|-moz-binding|behavior:|@import|\\/i;
-function isUnsafeStyleValue(value) {
-    return UNSAFE_STYLE_PATTERN.test(value);
+function isUnsafeStyleValue(value, { styleContext } = {}) {
+    const inspected = styleContext === "stylesheet"
+        ? value.replace(/\\([0-9a-f]{1,6})(?:\r\n|[ \t\n\r\f])?/gi, (escape, hex) => {
+            const codePoint = Number.parseInt(hex, 16);
+            if (codePoint < 0xa0 || codePoint > 0x10ffff || (codePoint >= 0xd800 && codePoint <= 0xdfff))
+                return escape;
+            return String.fromCodePoint(codePoint);
+        })
+        : value;
+    return UNSAFE_STYLE_PATTERN.test(inspected);
 }
 /**
  * Classifies one already-tokenized `name`/`value` pair into a rejection reason, or `null` when it is
@@ -144,14 +156,14 @@ function isUnsafeStyleValue(value) {
  * @complexity O(1) — four fixed checks against one already-extracted token; each check's own O(n) in
  * the token's length is linear, not nested.
  */
-function classifyEmbedHtmlAttributeToken(name, value) {
+function classifyEmbedHtmlAttributeToken(name, value, options = {}) {
     if (name.startsWith("on"))
         return { reason: "event-handler", attribute: name };
     if (isUnsafeUrlValue(value))
         return { reason: "unsafe-url", attribute: name };
     if (!isAllowedEmbedHtmlAttributeName({ name: name }))
         return { reason: "disallowed-name", attribute: name };
-    if (name === "style" && isUnsafeStyleValue(value))
+    if (name === "style" && isUnsafeStyleValue(value, options))
         return { reason: "unsafe-style", attribute: name };
     return null;
 }
@@ -172,10 +184,13 @@ const HTML_ATTRIBUTE_TOKEN = /([^\s="']+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s"']+)))
  * therefore the ONLY path to acceptance for a name; nothing here tries to sanitize an otherwise-
  * disallowed name or value into something safe.
  *
+ * @param options.styleContext Use `stylesheet` only for a style element's CSS text; allows
+ *   non-ASCII scalar hex escapes for glyphs while preserving the inline escape restriction.
+ *
  * @complexity Time O(n) in `text`'s length (one regex pass over it), space O(k) for k accepted
  *   attributes plus O(e) for e rejected tokens.
  */
-export function parseEmbedHtmlAttributes({ text }, _optional = {}) {
+export function parseEmbedHtmlAttributes({ text }, options = {}) {
     const trimmed = text.trim();
     if (trimmed === "")
         return { attributes: {}, errors: [], error: null };
@@ -198,7 +213,7 @@ export function parseEmbedHtmlAttributes({ text }, _optional = {}) {
         consumed = match.index + match[0].length;
         const name = (match[1] ?? "").toLowerCase();
         const value = match[2] ?? match[3] ?? match[4] ?? "";
-        const rejection = classifyEmbedHtmlAttributeToken(name, value);
+        const rejection = classifyEmbedHtmlAttributeToken(name, value, options);
         if (rejection) {
             errors.push(rejection);
             continue;

package/dist/widgets/markers/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./marker.js";
 export * from "./html-attributes.js";
+export * from "./gallery.js";
+export * from "./media-reference.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/widgets/markers/index.js

@@ -1,3 +1,5 @@
 export * from "./marker.js";
 export * from "./html-attributes.js";
+export * from "./gallery.js";
+export * from "./media-reference.js";
 //# sourceMappingURL=index.js.map

package/dist/widgets/markers/marker.d.ts

@@ -99,6 +99,10 @@ export interface ScanEmbedMarkersResult {
      */
     readonly rejected: readonly EmbedMarkerRejection[];
 }
+/** Shared decoding seam for authored media references; parsing and indexing use one entity policy. */
+export declare function decodeMarkerHtmlAttribute({ value }: {
+    value: string;
+}, _optional?: Record<string, never>): string;
 /**
  * Produce a same-length copy of `html` with every HTML comment, and the raw-text content of every
  * `<script>`/`<style>` element, replaced by space filler. {@link scanEmbedMarkers} runs

package/dist/widgets/markers/marker.js

@@ -89,6 +89,10 @@ function decodeAttributeValue(value) {
         return codePoint > 0 && codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : whole;
     });
 }
+/** Shared decoding seam for authored media references; parsing and indexing use one entity policy. */
+export function decodeMarkerHtmlAttribute({ value }, _optional = {}) {
+    return decodeAttributeValue(value);
+}
 /** The inverse of {@link decodeAttributeValue} for a value written back double-quoted. */
 function encodeDoubleQuotedValue(value) {
     return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
@@ -512,6 +516,8 @@ export const EMBED_MARKER_TARGET_KEYS = {
     form: ["id", "slug"],
     taxonomy: ["id"],
     media: ["id", "slug"],
+    // Inline ordered images, not a persisted gallery entity; each mediaId is its own reference.
+    gallery: [],
     post: ["id", "slug"],
     content: ["id", "slug"],
     [COLLECTION_MARKER_TYPE]: ["id", "typeKey"],

package/dist/widgets/markers/media-reference.d.ts

@@ -0,0 +1,11 @@
+/** Mirrors the public renderer's `MAX_MEDIA_REF_ID_LENGTH`/`PLAUSIBLE_MEDIA_REF_ID_PATTERN`
+ * shape check for an assetId/transformName that will become a `/m/` URL path segment. Widgets
+ * must not depend on the host renderer above it in the layering: this check guards repository
+ * lookup keys, and the renderer re-checks immediately before URL templating as defense in depth.
+ * Shared by media and gallery config so their media-reference contracts cannot drift.
+ * @complexity O(n) in the reference length, with a 200-character bound; no I/O.
+ */
+export declare function isPlausibleMediaRefId({ value }: {
+    value: unknown;
+}, _optional?: Record<string, never>): boolean;
+//# sourceMappingURL=media-reference.d.ts.map

package/dist/widgets/markers/media-reference.js

@@ -0,0 +1,11 @@
+/** Mirrors the public renderer's `MAX_MEDIA_REF_ID_LENGTH`/`PLAUSIBLE_MEDIA_REF_ID_PATTERN`
+ * shape check for an assetId/transformName that will become a `/m/` URL path segment. Widgets
+ * must not depend on the host renderer above it in the layering: this check guards repository
+ * lookup keys, and the renderer re-checks immediately before URL templating as defense in depth.
+ * Shared by media and gallery config so their media-reference contracts cannot drift.
+ * @complexity O(n) in the reference length, with a 200-character bound; no I/O.
+ */
+export function isPlausibleMediaRefId({ value }, _optional = {}) {
+    return typeof value === 'string' && value.length > 0 && value.length <= 200 && /^[^\s/]+$/.test(value);
+}
+//# sourceMappingURL=media-reference.js.map

package/dist/widgets/page-embed-types.d.ts

@@ -10,7 +10,7 @@
  * ~990 modules and seconds of cold start per render (see `__tests__/worker-import-graph.test.ts`
  * under `server/inbound/public-http/http/site/`).
  */
-export declare const PAGE_EMBED_TYPES: readonly ["widget", "form", "taxonomy", "media", "post", "content"];
+export declare const PAGE_EMBED_TYPES: readonly ["widget", "form", "taxonomy", "media", "gallery", "post", "content"];
 export type PageEmbedType = (typeof PAGE_EMBED_TYPES)[number];
 /**
  * Does the page-embed stage OWN this marker type — i.e. is a REQ-28 placeholder the honest answer

package/dist/widgets/page-embed-types.js

@@ -10,7 +10,7 @@
  * ~990 modules and seconds of cold start per render (see `__tests__/worker-import-graph.test.ts`
  * under `server/inbound/public-http/http/site/`).
  */
-export const PAGE_EMBED_TYPES = ["widget", "form", "taxonomy", "media", "post", "content"];
+export const PAGE_EMBED_TYPES = ["widget", "form", "taxonomy", "media", "gallery", "post", "content"];
 const PAGE_EMBED_TYPE_SET = new Set(PAGE_EMBED_TYPES);
 /**
  * Does the page-embed stage OWN this marker type — i.e. is a REQ-28 placeholder the honest answer