@polyxd/react 0.1.1 → 0.2.0

package/dist/components/content.js

@@ -1,14 +1,102 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { resolveFormat, useBindings, useSurface } from "../context.js";
 import { asList, absolute, childPointer, get } from "../data.js";
-import { formatValue } from "../format.js";
+import { formatValue, safeColor } from "../format.js";
 import { Render, useA11y } from "../surface.js";
 import { Icon } from "./avatar.js";
 import { Heading } from "./structure.js";
+import { Paging } from "./table.js";
+/** A colour value shown as itself: a swatch beside the text. */
+export function Swatch({ value }) {
+    const color = safeColor(value);
+    return _jsx("span", { className: `pxd-swatch${color ? "" : " pxd-swatch-unknown"}`, style: color ? { background: color } : undefined, "aria-hidden": "true" });
+}
+/** Only these link targets are live; anything else stays text. */
+const LINK_OK = /^(https?:|mailto:|tel:|\/|#)/i;
+/**
+ * The limited markup of a 'rich' Text: **bold**, *italic*, `code` and [text](href). Parsed into
+ * elements, never injected as HTML, so anything else (including tags) is shown exactly as typed.
+ */
+export function richText(text) {
+    const out = [];
+    let buf = "";
+    let i = 0;
+    const flush = () => {
+        if (buf)
+            out.push(buf);
+        buf = "";
+    };
+    while (i < text.length) {
+        if (text[i] === "`") {
+            const end = text.indexOf("`", i + 1);
+            if (end > i + 1) {
+                flush();
+                out.push(_jsx("code", { children: text.slice(i + 1, end) }, out.length));
+                i = end + 1;
+                continue;
+            }
+        }
+        if (text.startsWith("**", i)) {
+            const end = text.indexOf("**", i + 2);
+            if (end > i + 2) {
+                flush();
+                out.push(_jsx("strong", { children: richText(text.slice(i + 2, end)) }, out.length));
+                i = end + 2;
+                continue;
+            }
+        }
+        if (text[i] === "*") {
+            const end = text.indexOf("*", i + 1);
+            if (end > i + 1) {
+                flush();
+                out.push(_jsx("em", { children: richText(text.slice(i + 1, end)) }, out.length));
+                i = end + 1;
+                continue;
+            }
+        }
+        if (text[i] === "[") {
+            const m = /^\[([^\]]+)\]\(([^)\s]+)\)/.exec(text.slice(i));
+            if (m) {
+                flush();
+                const href = LINK_OK.test(m[2]) ? m[2] : undefined;
+                out.push(href ? (_jsx("a", { href: href, rel: "noopener noreferrer", children: richText(m[1]) }, out.length)) : (_jsx("span", { children: richText(m[1]) }, out.length)));
+                i += m[0].length;
+                continue;
+            }
+        }
+        buf += text[i++];
+    }
+    flush();
+    return out;
+}
 export function Text({ node }) {
     const b = useBindings();
-    return (_jsx("p", { className: `pxd-text pxd-text-${node.variant ?? "body"}`, ...useA11y(node), children: b.text(node.text, node.format) }));
+    const s = useSurface();
+    const a11y = useA11y(node);
+    const variant = node.variant ?? "body";
+    const color = node.format?.type === "color";
+    const content = (v, format = node.format) => {
+        const text = b.text(v, format);
+        return format?.type === "color" ? (_jsxs(_Fragment, { children: [_jsx(Swatch, { value: text }), text] })) : (text);
+    };
+    if (variant === "rich") {
+        return (_jsx("p", { className: "pxd-text pxd-text-body pxd-text-rich", ...a11y, children: richText(b.text(node.text)) }));
+    }
+    if (variant === "quote") {
+        return (_jsxs("figure", { className: "pxd-text-quote", ...a11y, children: [_jsx("blockquote", { children: _jsx("p", { className: "pxd-text pxd-text-body", children: content(node.text) }) }), node.cite !== undefined && _jsx("figcaption", { className: "pxd-text-cite", children: b.text(node.cite) })] }));
+    }
+    if (variant === "list") {
+        const pointer = node.items ? absolute(node.items.path, b.scope) : undefined;
+        const entries = pointer ? asList(get(s.data, pointer)) : [];
+        const List = node.ordered ? "ol" : "ul";
+        const intro = b.text(node.text);
+        return (_jsxs("div", { className: "pxd-text-list", ...a11y, children: [intro && _jsx("p", { className: "pxd-text pxd-text-body", children: intro }), _jsx(List, { className: `pxd-text-list-items${node.ordered ? " pxd-text-list-ordered" : ""}`, children: entries.map((entry, i) => {
+                        const raw = node.itemPath && pointer ? get(s.data, absolute(node.itemPath, { pointer: childPointer(pointer, i) })) : entry;
+                        return _jsx("li", { children: content(raw) }, i);
+                    }) })] }));
+    }
+    return (_jsx("p", { className: `pxd-text pxd-text-${variant}${color ? " pxd-text-color" : ""}`, ...a11y, children: content(node.text) }));
 }
 export function Metric({ node }) {
     const b = useBindings();
@@ -37,18 +125,28 @@ export function DetailList({ node }) {
         const raw = b.value(item.value);
         // In a receipt, a zero charge reads as "Free".
         if (receipt && item.format?.type === "currency" && raw === 0 && !item.total)
-            return { text: "Free", free: true };
-        return { text: b.text(item.value, item.format), free: false };
+            return { text: "Free", free: true, color: false };
+        return { text: b.text(item.value, item.format), free: false, color: item.format?.type === "color" };
     };
+    // The 'Change' link per row (GOV.UK summary list). The row's key travels with the context.
+    const change = (item, label) => node.rowAction ? (_jsxs("button", { type: "button", className: "pxd-link pxd-detail-change", onClick: () => s.dispatch({ event: { name: node.rowAction.event.name, context: { key: item.key ?? label, ...(node.rowAction.event.context ?? {}) } } }, b.scope, node.id), children: ["Change", _jsxs("span", { className: "pxd-sr-only", children: [" ", label] })] })) : null;
     const rows = node.items.filter((i) => !i.total);
     const totals = node.items.filter((i) => i.total);
-    return (_jsxs("div", { className: `pxd-detail-list${receipt ? " pxd-receipt" : ""}${node.layout === "grid" ? " pxd-detail-grid" : ""}`, ...useA11y(node), children: [node.title !== undefined && _jsx(Heading, { className: "pxd-detail-title", children: b.text(node.title) }), _jsxs("dl", { children: [rows.map((item, i) => {
+    return (_jsxs("div", { className: `pxd-detail-list${receipt ? " pxd-receipt" : ""}${node.layout === "grid" ? " pxd-detail-grid" : ""}${node.rowAction ? " pxd-detail-actions" : ""}`, ...useA11y(node), children: [node.title !== undefined && _jsx(Heading, { className: "pxd-detail-title", children: b.text(node.title) }), _jsxs("dl", { children: [rows.map((item, i) => {
                         const v = value(item);
-                        return (_jsxs("div", { className: "pxd-detail-row", children: [_jsx("dt", { children: b.text(item.label) }), _jsx("dd", { className: v.free ? "pxd-free" : undefined, children: v.text })] }, item.key ?? i));
-                    }), totals.map((item, i) => (_jsxs("div", { className: "pxd-detail-row pxd-total", children: [_jsx("dt", { children: b.text(item.label) }), _jsx("dd", { children: value(item).text })] }, item.key ?? `t${i}`)))] })] }));
+                        const label = b.text(item.label);
+                        return (_jsxs("div", { className: "pxd-detail-row", children: [_jsx("dt", { children: label }), _jsxs("dd", { className: v.free ? "pxd-free" : undefined, children: [v.color && _jsx(Swatch, { value: v.text }), v.text] }), node.rowAction && _jsx("dd", { className: "pxd-detail-row-action", children: change(item, label) })] }, item.key ?? i));
+                    }), totals.map((item, i) => (_jsxs("div", { className: "pxd-detail-row pxd-total", children: [_jsx("dt", { children: b.text(item.label) }), _jsx("dd", { children: value(item).text }), node.rowAction && _jsx("dd", { className: "pxd-detail-row-action" })] }, item.key ?? `t${i}`)))] })] }));
 }
 /** Stable value used for selecting an item: its id when present, else its index. */
 const itemValue = (item, index) => (item && typeof item === "object" && "id" in item ? item.id : index);
+/** ISO date → UTC parts, or undefined when it isn't one. */
+function dateParts(v) {
+    if (v === null || v === undefined || v === "")
+        return undefined;
+    const d = new Date(String(v));
+    return Number.isNaN(d.getTime()) ? undefined : { y: d.getUTCFullYear(), m: d.getUTCMonth(), d: d.getUTCDate() };
+}
 export function Collection({ node }) {
     const b = useBindings();
     const s = useSurface();
@@ -66,30 +164,407 @@ export function Collection({ node }) {
         const cur = Array.isArray(selected) ? selected : [];
         b.write(node.selected, cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
     };
+    const selectedCount = Array.isArray(selected) ? selected.length : 0;
     const label = b.text(node.label);
     // Grid for visual items (a Card with media), list otherwise, unless the document says which.
     const template = s.byId.get(node.items.componentId);
-    const grid = node.layout === "grid" || (node.layout !== "list" && node.layout !== "timeline" && template?.component === "Card" && !!template.media);
-    const timeline = node.layout === "timeline";
+    const layout = node.layout ?? "auto";
+    const grid = layout === "grid" || (layout === "auto" && template?.component === "Card" && !!template.media);
+    const timeline = layout === "timeline";
+    const carousel = layout === "carousel";
+    const calendar = layout === "calendar";
+    // Items in the order people put them ('order' holds item values); unknown values keep host order at the end.
+    const reorderable = node.reorderable === true;
+    const order = reorderable && node.order ? b.value(node.order) : undefined;
+    const values = items.map((item, i) => itemValue(item, i));
+    const indices = items.map((_, i) => i);
+    if (Array.isArray(order)) {
+        const rank = (i) => {
+            const r = order.indexOf(values[i]);
+            return r < 0 ? order.length + i : r;
+        };
+        indices.sort((a, c) => rank(a) - rank(c));
+    }
+    const move = (from, to) => {
+        if (!node.order || to < 0 || to >= indices.length || from === to)
+            return;
+        const next = [...indices];
+        next.splice(to, 0, ...next.splice(from, 1));
+        b.write(node.order, next.map((i) => values[i]));
+    };
+    const [dragging, setDragging] = useState(null);
+    // Carousel: which item is in view, for the readout and the buttons.
+    const track = useRef(null);
+    const [position, setPosition] = useState(0);
+    const slides = () => Array.from(track.current?.children ?? []);
+    const measure = () => {
+        const el = track.current;
+        if (!el)
+            return;
+        const left = el.scrollLeft;
+        let best = 0;
+        slides().forEach((c, i) => {
+            if (Math.abs(c.offsetLeft - el.offsetLeft - left) < Math.abs(slides()[best].offsetLeft - el.offsetLeft - left))
+                best = i;
+        });
+        setPosition(best);
+    };
+    const goTo = (i) => {
+        const el = track.current;
+        const target = slides()[Math.max(0, Math.min(items.length - 1, i))];
+        if (el && target)
+            el.scrollTo({ left: target.offsetLeft - el.offsetLeft, behavior: "smooth" });
+    };
+    // Calendar: the month shown starts at the first dated item (or today) and moves a month at a time.
+    const dated = calendar ? items.map((_, i) => dateParts(node.datePath ? get(s.data, absolute(node.datePath, { pointer: childPointer(pointer, i) })) : undefined)) : [];
+    const [month, setMonth] = useState(null);
+    const first = dated.find(Boolean);
+    const today = new Date();
+    const shown = month ?? (first ? { y: first.y, m: first.m } : { y: today.getUTCFullYear(), m: today.getUTCMonth() });
+    const shiftMonth = (by) => {
+        const d = new Date(Date.UTC(shown.y, shown.m + by, 1));
+        setMonth({ y: d.getUTCFullYear(), m: d.getUTCMonth() });
+    };
     if (!items.length && node.empty)
         return _jsx(Render, { id: node.empty });
-    return (_jsxs("div", { className: "pxd-collection", ...useA11y(node), children: [_jsxs("div", { className: "pxd-collection-label", id: labelId, children: [label, " ", _jsxs("span", { className: "pxd-count", children: ["(", items.length, ")"] })] }), _jsx("ul", { className: `pxd-collection-list${grid ? " pxd-collection-grid" : ""}${timeline ? " pxd-timeline" : ""}`, "aria-labelledby": labelId, children: items.map((item, i) => {
-                    const v = itemValue(item, i);
-                    const scope = { pointer: childPointer(pointer, i) };
-                    return (_jsxs("li", { className: "pxd-collection-item", children: [selection !== "none" && (_jsx("input", { type: selection === "single" ? "radio" : "checkbox", className: "pxd-collection-select", name: selection === "single" ? `${node.id}-selection` : undefined, checked: isSelected(v), onChange: () => toggle(v), "aria-label": `Select item ${i + 1} of ${items.length}` })), _jsx("div", { className: "pxd-collection-content", children: _jsx(Render, { id: node.items.componentId, scope: scope }) })] }, String(v)));
-                }) })] }));
+    const itemEl = (i, pos) => {
+        const item = items[i];
+        const v = values[i];
+        const scope = { pointer: childPointer(pointer, i) };
+        return (_jsxs("li", { className: `pxd-collection-item${dragging === pos ? " pxd-collection-dragging" : ""}`, draggable: reorderable || undefined, onDragStart: reorderable ? () => setDragging(pos) : undefined, onDragOver: reorderable ? (e) => e.preventDefault() : undefined, onDrop: reorderable
+                ? () => {
+                    if (dragging !== null)
+                        move(dragging, pos);
+                    setDragging(null);
+                }
+                : undefined, onDragEnd: reorderable ? () => setDragging(null) : undefined, children: [reorderable && (_jsxs("div", { className: "pxd-collection-reorder", children: [_jsx("span", { className: "pxd-collection-handle", "aria-hidden": "true", children: _jsx(Icon, { name: "menu", size: 16 }) }), _jsx("button", { type: "button", className: "pxd-icon-button pxd-collection-move", "aria-label": `Move item ${pos + 1} up`, disabled: pos === 0, onClick: () => move(pos, pos - 1), children: _jsx(Icon, { name: "sortUp", size: 16 }) }), _jsx("button", { type: "button", className: "pxd-icon-button pxd-collection-move", "aria-label": `Move item ${pos + 1} down`, disabled: pos === items.length - 1, onClick: () => move(pos, pos + 1), children: _jsx(Icon, { name: "sortDown", size: 16 }) })] })), selection !== "none" && (_jsx("input", { type: selection === "single" ? "radio" : "checkbox", className: "pxd-collection-select", name: selection === "single" ? `${node.id}-selection` : undefined, checked: isSelected(v), onChange: () => toggle(v), "aria-label": `Select item ${pos + 1} of ${items.length}` })), _jsx("div", { className: "pxd-collection-content", children: _jsx(Render, { id: node.items.componentId, scope: scope }) })] }, String(v)));
+    };
+    const bulk = selection === "multiple" && selectedCount > 0 && (_jsxs("div", { className: "pxd-table-toolbar pxd-table-bulk", role: "toolbar", "aria-label": `Actions for ${selectedCount} selected`, children: [_jsxs("p", { className: "pxd-bulk-count", "aria-live": "polite", children: [selectedCount, " selected"] }), node.bulkActions && _jsx(Render, { id: node.bulkActions }), _jsx("button", { type: "button", className: "pxd-button pxd-button-tertiary", onClick: () => b.write(node.selected, []), children: "Cancel" })] }));
+    let body;
+    if (carousel) {
+        body = (_jsxs("div", { className: "pxd-carousel", role: "group", "aria-roledescription": "carousel", "aria-labelledby": labelId, children: [_jsx("ul", { className: "pxd-collection-list pxd-carousel-track", "aria-labelledby": labelId, ref: track, onScroll: measure, children: indices.map((i, pos) => itemEl(i, pos)) }), _jsxs("div", { className: "pxd-carousel-controls", children: [_jsx("button", { type: "button", className: "pxd-icon-button", "aria-label": "Previous item", disabled: position <= 0, onClick: () => goTo(position - 1), children: _jsx(Icon, { name: "chevronLeft", size: 18 }) }), _jsxs("p", { className: "pxd-carousel-position", "aria-live": "polite", children: [position + 1, " of ", items.length] }), _jsx("button", { type: "button", className: "pxd-icon-button", "aria-label": "Next item", disabled: position >= items.length - 1, onClick: () => goTo(position + 1), children: _jsx(Icon, { name: "chevronRight", size: 18 }) })] })] }));
+    }
+    else if (calendar) {
+        const monthName = new Intl.DateTimeFormat(s.locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(new Date(Date.UTC(shown.y, shown.m, 1)));
+        // Weeks start on Monday; 2024-01-01 was one.
+        const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(s.locale, { weekday: "short", timeZone: "UTC" }).format(new Date(Date.UTC(2024, 0, 1 + i))));
+        const firstDay = (new Date(Date.UTC(shown.y, shown.m, 1)).getUTCDay() + 6) % 7;
+        const days = new Date(Date.UTC(shown.y, shown.m + 1, 0)).getUTCDate();
+        const cells = [...Array(firstDay).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)];
+        while (cells.length % 7)
+            cells.push(null);
+        const weeks = Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
+        const onDay = (d) => indices.filter((i) => dated[i] && dated[i].y === shown.y && dated[i].m === shown.m && dated[i].d === d);
+        body = (_jsxs("div", { className: "pxd-calendar", children: [_jsxs("div", { className: "pxd-calendar-header", children: [_jsx("button", { type: "button", className: "pxd-icon-button", "aria-label": "Previous month", onClick: () => shiftMonth(-1), children: _jsx(Icon, { name: "chevronLeft", size: 18 }) }), _jsx("p", { className: "pxd-calendar-month", "aria-live": "polite", children: monthName }), _jsx("button", { type: "button", className: "pxd-icon-button", "aria-label": "Next month", onClick: () => shiftMonth(1), children: _jsx(Icon, { name: "chevronRight", size: 18 }) })] }), _jsxs("table", { className: "pxd-calendar-grid", children: [_jsxs("caption", { className: "pxd-sr-only", children: [label, ", ", monthName] }), _jsx("thead", { children: _jsx("tr", { children: weekdays.map((w) => (_jsx("th", { scope: "col", children: w }, w))) }) }), _jsx("tbody", { children: weeks.map((week, wi) => (_jsx("tr", { children: week.map((d, di) => d === null ? (_jsx("td", { className: "pxd-calendar-empty" }, di)) : (_jsxs("td", { className: `pxd-calendar-day${onDay(d).length ? " pxd-calendar-has-items" : ""}`, children: [_jsx("span", { className: "pxd-calendar-date", children: d }), onDay(d).length > 0 && (_jsx("ul", { className: "pxd-calendar-items", children: onDay(d).map((i) => (_jsxs("li", { className: "pxd-collection-item", children: [selection !== "none" && (_jsx("input", { type: selection === "single" ? "radio" : "checkbox", className: "pxd-collection-select", name: selection === "single" ? `${node.id}-selection` : undefined, checked: isSelected(values[i]), onChange: () => toggle(values[i]), "aria-label": `Select item on ${d}` })), _jsx("div", { className: "pxd-collection-content", children: _jsx(Render, { id: node.items.componentId, scope: { pointer: childPointer(pointer, i) } }) })] }, String(values[i])))) }))] }, di))) }, wi))) })] })] }));
+    }
+    else {
+        body = (_jsx("ul", { className: `pxd-collection-list${grid ? " pxd-collection-grid" : ""}${timeline ? " pxd-timeline" : ""}${reorderable ? " pxd-collection-reorderable" : ""}`, "aria-labelledby": labelId, children: indices.map((i, pos) => itemEl(i, pos)) }));
+    }
+    return (_jsxs("div", { className: "pxd-collection", ...useA11y(node), children: [_jsxs("div", { className: "pxd-collection-label", id: labelId, children: [label, " ", _jsxs("span", { className: "pxd-count", children: ["(", items.length, ")"] })] }), bulk, body, node.page && _jsx(Paging, { node: node, rows: items.length })] }));
 }
-const NUMERIC = new Set(["number", "currency", "percent", "duration"]);
+/**
+ * Media: an image by default; a video or audio player with native controls and a transcript; a
+ * gallery of the host's images; or a QR code of a value, drawn here so no URL leaves the surface.
+ */
 export function Media({ node }) {
     const b = useBindings();
     const s = useSurface();
-    const ref = b.value(node.src);
+    const a11y = useA11y(node);
+    const kind = node.kind ?? "image";
+    const ref = node.src ? b.value(node.src) : undefined;
     const url = ref ? s.resolveMedia?.(ref) : undefined;
     const alt = node.decorative ? "" : b.text(node.alt);
     const cls = `pxd-media pxd-media-${node.aspect ?? "auto"}`;
+    if (kind === "qr")
+        return _jsx(QRCode, { text: b.text(node.value), alt: alt, a11y: a11y });
+    if (kind === "gallery") {
+        const pointer = node.items ? absolute(node.items.path, b.scope) : undefined;
+        const entries = pointer ? asList(get(s.data, pointer)) : [];
+        return (_jsx("ul", { className: "pxd-gallery", "aria-label": alt || undefined, ...a11y, children: entries.map((_, i) => {
+                const scope = { pointer: childPointer(pointer, i) };
+                const imageRef = node.imagePath ? get(s.data, absolute(node.imagePath, scope)) : undefined;
+                const src = imageRef ? s.resolveMedia?.(String(imageRef)) : undefined;
+                const itemAlt = node.altPath ? String(get(s.data, absolute(node.altPath, scope)) ?? "") : "";
+                return (_jsx("li", { children: src ? _jsx("img", { className: `${cls} pxd-gallery-image`, src: src, alt: itemAlt }) : _jsx("div", { className: `${cls} pxd-media-placeholder pxd-gallery-image`, role: "img", "aria-label": itemAlt || undefined }) }, i));
+            }) }));
+    }
+    if (kind === "video" || kind === "audio") {
+        const transcript = node.transcript !== undefined ? b.text(node.transcript) : undefined;
+        const posterRef = node.poster !== undefined ? b.text(node.poster) : undefined;
+        const poster = posterRef ? s.resolveMedia?.(posterRef) : undefined;
+        return (_jsxs("figure", { className: `pxd-media-player pxd-media-${kind}`, ...a11y, children: [kind === "video" ? (url ? (_jsx("video", { className: cls, controls: true, src: url, poster: poster, "aria-label": alt || undefined })) : (_jsx("div", { className: `${cls} pxd-media-placeholder`, role: "img", "aria-label": alt || undefined }))) : url ? (_jsx("audio", { className: "pxd-media-audio-player", controls: true, src: url, "aria-label": alt || undefined })) : (_jsx("div", { className: "pxd-media-placeholder pxd-media-audio-placeholder", role: "img", "aria-label": alt || undefined })), alt && _jsx("figcaption", { className: "pxd-media-caption", children: alt }), transcript && (_jsxs("details", { className: "pxd-media-transcript", children: [_jsx("summary", { children: "Transcript" }), _jsx("p", { className: "pxd-text pxd-text-body", children: transcript })] }))] }));
+    }
     if (!url)
         return _jsx("div", { className: `${cls} pxd-media-placeholder`, role: node.decorative ? "presentation" : "img", "aria-label": alt || undefined });
-    return _jsx("img", { className: cls, src: url, alt: alt, ...useA11y(node) });
+    return _jsx("img", { className: cls, src: url, alt: alt, ...a11y });
+}
+/* ---- QR codes: byte mode, error correction level M, versions 1–10 (up to 213 bytes). ---- */
+/** Per version at level M: error-correction codewords per block, then [blocks, data codewords] groups. */
+const QR_BLOCKS = [
+    [10, [[1, 16]]],
+    [16, [[1, 28]]],
+    [26, [[1, 44]]],
+    [18, [[2, 32]]],
+    [24, [[2, 43]]],
+    [16, [[4, 27]]],
+    [18, [[4, 31]]],
+    [22, [[2, 38], [2, 39]]],
+    [22, [[3, 36], [2, 37]]],
+    [26, [[4, 43], [1, 44]]],
+];
+const QR_ALIGN = [[], [6, 18], [6, 22], [6, 26], [6, 30], [6, 34], [6, 22, 38], [6, 24, 42], [6, 26, 46], [6, 28, 50]];
+function gfMul(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+}
+function rsRemainder(data, degree) {
+    const divisor = new Array(degree).fill(0);
+    divisor[degree - 1] = 1;
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < degree; j++) {
+            divisor[j] = gfMul(divisor[j], root);
+            if (j + 1 < degree)
+                divisor[j] ^= divisor[j + 1];
+        }
+        root = gfMul(root, 2);
+    }
+    const result = new Array(degree).fill(0);
+    for (const byte of data) {
+        const factor = byte ^ result.shift();
+        result.push(0);
+        divisor.forEach((coef, i) => (result[i] ^= gfMul(coef, factor)));
+    }
+    return result;
+}
+const QR_MASKS = [
+    (x, y) => (x + y) % 2 === 0,
+    (_x, y) => y % 2 === 0,
+    (x) => x % 3 === 0,
+    (x, y) => (x + y) % 3 === 0,
+    (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0,
+    (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+    (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+    (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+/** The module grid for a text, or undefined when it is longer than version 10 holds. */
+export function qrEncode(text) {
+    const bytes = Array.from(new TextEncoder().encode(text));
+    let version = 0;
+    let dataCodewords = 0;
+    for (let v = 1; v <= 10 && !version; v++) {
+        const total = QR_BLOCKS[v - 1][1].reduce((a, [n, len]) => a + n * len, 0);
+        if (4 + (v < 10 ? 8 : 16) + bytes.length * 8 <= total * 8)
+            (version = v), (dataCodewords = total);
+    }
+    if (!version)
+        return undefined;
+    const [ecPerBlock, groups] = QR_BLOCKS[version - 1];
+    // Bit stream: mode, count, data, terminator, byte alignment, pad codewords.
+    const bits = [];
+    const push = (val, n) => {
+        for (let i = n - 1; i >= 0; i--)
+            bits.push((val >>> i) & 1);
+    };
+    push(4, 4);
+    push(bytes.length, version < 10 ? 8 : 16);
+    for (const b of bytes)
+        push(b, 8);
+    const capacity = dataCodewords * 8;
+    push(0, Math.min(4, capacity - bits.length));
+    while (bits.length % 8)
+        bits.push(0);
+    for (let pad = 0xec; bits.length < capacity; pad ^= 0xec ^ 0x11)
+        push(pad, 8);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((a, bit) => (a << 1) | bit, 0));
+    // Blocks with their error correction, interleaved.
+    const blocks = [];
+    let k = 0;
+    for (const [count, len] of groups) {
+        for (let i = 0; i < count; i++) {
+            const d = data.slice(k, k + len);
+            blocks.push({ d, e: rsRemainder(d, ecPerBlock) });
+            k += len;
+        }
+    }
+    const codewords = [];
+    const longest = Math.max(...blocks.map((bl) => bl.d.length));
+    for (let i = 0; i < longest; i++)
+        for (const bl of blocks)
+            if (i < bl.d.length)
+                codewords.push(bl.d[i]);
+    for (let i = 0; i < ecPerBlock; i++)
+        for (const bl of blocks)
+            codewords.push(bl.e[i]);
+    // The grid, with function patterns marked so data and masks leave them alone.
+    const size = version * 4 + 17;
+    const grid = Array.from({ length: size }, () => new Array(size).fill(false));
+    const isFn = Array.from({ length: size }, () => new Array(size).fill(false));
+    const set = (x, y, dark) => {
+        if (x >= 0 && y >= 0 && x < size && y < size)
+            (grid[y][x] = dark), (isFn[y][x] = true);
+    };
+    for (let i = 0; i < size; i++)
+        (set(6, i, i % 2 === 0), set(i, 6, i % 2 === 0));
+    const finder = (cx, cy) => {
+        for (let dy = -4; dy <= 4; dy++)
+            for (let dx = -4; dx <= 4; dx++) {
+                const dist = Math.max(Math.abs(dx), Math.abs(dy));
+                set(cx + dx, cy + dy, dist !== 2 && dist !== 4);
+            }
+    };
+    finder(3, 3);
+    finder(size - 4, 3);
+    finder(3, size - 4);
+    const positions = QR_ALIGN[version - 1];
+    const last = positions.length - 1;
+    positions.forEach((px, i) => positions.forEach((py, j) => {
+        if ((i === 0 && j === 0) || (i === 0 && j === last) || (i === last && j === 0))
+            return;
+        for (let dy = -2; dy <= 2; dy++)
+            for (let dx = -2; dx <= 2; dx++)
+                set(px + dx, py + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+    }));
+    const formatBits = (mask) => {
+        const d = mask; // level M is 00
+        let rem = d;
+        for (let i = 0; i < 10; i++)
+            rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+        const f = ((d << 10) | rem) ^ 0x5412;
+        const bit = (i) => ((f >>> i) & 1) === 1;
+        for (let i = 0; i <= 5; i++)
+            set(8, i, bit(i));
+        set(8, 7, bit(6));
+        set(8, 8, bit(7));
+        set(7, 8, bit(8));
+        for (let i = 9; i < 15; i++)
+            set(14 - i, 8, bit(i));
+        for (let i = 0; i < 8; i++)
+            set(size - 1 - i, 8, bit(i));
+        for (let i = 8; i < 15; i++)
+            set(8, size - 15 + i, bit(i));
+        set(8, size - 8, true);
+    };
+    formatBits(0);
+    if (version >= 7) {
+        let rem = version;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const v = (version << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const bit = ((v >>> i) & 1) === 1;
+            const a = size - 11 + (i % 3);
+            const c = Math.floor(i / 3);
+            set(a, c, bit);
+            set(c, a, bit);
+        }
+    }
+    // Codewords zigzag upward and downward in two-module columns from the right, skipping the timing column.
+    let bi = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        for (let vert = 0; vert < size; vert++) {
+            for (let j = 0; j < 2; j++) {
+                const x = right - j;
+                const y = ((right + 1) & 2) === 0 ? size - 1 - vert : vert;
+                if (!isFn[y][x] && bi < codewords.length * 8) {
+                    grid[y][x] = ((codewords[bi >>> 3] >>> (7 - (bi & 7))) & 1) === 1;
+                    bi++;
+                }
+            }
+        }
+    }
+    // The mask with the lowest penalty.
+    const apply = (mask) => {
+        for (let y = 0; y < size; y++)
+            for (let x = 0; x < size; x++)
+                if (!isFn[y][x] && QR_MASKS[mask](x, y))
+                    grid[y][x] = !grid[y][x];
+    };
+    const penalty = () => {
+        let p = 0;
+        const line = (cells) => {
+            let run = 0;
+            let prev = null;
+            cells.forEach((c, i) => {
+                if (c === prev) {
+                    run++;
+                    if (run === 5)
+                        p += 3;
+                    else if (run > 5)
+                        p += 1;
+                }
+                else
+                    (prev = c), (run = 1);
+                if (i + 7 <= cells.length) {
+                    const seg = cells.slice(i, i + 7);
+                    const finderLike = seg[0] && !seg[1] && seg[2] && seg[3] && seg[4] && !seg[5] && seg[6];
+                    const lightBefore = i >= 4 && cells.slice(i - 4, i).every((c) => !c);
+                    const lightAfter = i + 11 <= cells.length && cells.slice(i + 7, i + 11).every((c) => !c);
+                    if (finderLike && (lightBefore || lightAfter))
+                        p += 40;
+                }
+            });
+        };
+        for (let i = 0; i < size; i++)
+            (line(grid[i]), line(grid.map((row) => row[i])));
+        for (let y = 0; y < size - 1; y++)
+            for (let x = 0; x < size - 1; x++)
+                if (grid[y][x] === grid[y][x + 1] && grid[y][x] === grid[y + 1][x] && grid[y][x] === grid[y + 1][x + 1])
+                    p += 3;
+        const dark = grid.flat().filter(Boolean).length;
+        const total = size * size;
+        p += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * 10;
+        return p;
+    };
+    let best = 0;
+    let bestScore = Infinity;
+    for (let m = 0; m < 8; m++) {
+        formatBits(m);
+        apply(m);
+        const score = penalty();
+        apply(m);
+        if (score < bestScore)
+            (bestScore = score), (best = m);
+    }
+    formatBits(best);
+    apply(best);
+    return grid;
+}
+/** A QR code on a canvas, in the surface's text and surface colours; too long a value falls back to text. */
+function QRCode({ text, alt, a11y }) {
+    const ref = useRef(null);
+    const grid = useMemo(() => (text ? qrEncode(text) : undefined), [text]);
+    useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas || !grid)
+            return;
+        const scale = 4;
+        const quiet = 4;
+        const size = grid.length;
+        canvas.width = canvas.height = (size + quiet * 2) * scale;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const style = getComputedStyle(canvas);
+        const dark = style.getPropertyValue("--pxd-color-text-default").trim() || "#000";
+        const light = style.getPropertyValue("--pxd-color-surface-default").trim() || "#fff";
+        ctx.fillStyle = light;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = dark;
+        grid.forEach((row, y) => row.forEach((on, x) => on && ctx.fillRect((x + quiet) * scale, (y + quiet) * scale, scale, scale)));
+    }, [grid]);
+    if (!grid) {
+        return (_jsxs("div", { className: "pxd-qr pxd-qr-placeholder", role: "img", "aria-label": alt || `QR code: ${text}`, ...a11y, children: [_jsx("span", { className: "pxd-qr-mark", "aria-hidden": "true", children: "QR" }), _jsx("span", { className: "pxd-qr-text", children: text })] }));
+    }
+    return _jsx("canvas", { ref: ref, className: "pxd-qr", role: "img", "aria-label": alt || `QR code: ${text}`, ...a11y });
 }
 const STATUS_ICON = { info: "info", success: "check", warning: "alert", error: "alert", empty: "inbox", undo: "check" };
 /**