@texuli/core 0.4.0 → 0.5.0

package/README.md

@@ -12,9 +12,9 @@ when you need Texuli's URL policy to sanitize links and media from agents
 or users. It has no runtime dependencies and imports no UI framework.
 
 > **Status: 0.x release.** Texuli is in development. The packages are
-> published to npm as `0.4.0`, a pre-1.0 release (1.0.0 will be the first
-> stable release). Under 0.x, a new minor (`0.5.0`) may contain breaking
-> changes, so pin the exact version or use `^0.4.0`, which accepts only 0.4.x.
+> published to npm as `0.5.0`, a pre-1.0 release (1.0.0 will be the first
+> stable release). Under 0.x, a new minor (`0.6.0`) may contain breaking
+> changes, so pin the exact version or use `^0.5.0`, which accepts only 0.5.x.
 
 ## Install
 
@@ -66,7 +66,7 @@ keep bundles narrow.
 
 | Texel | Subpath | Headline exports |
 | --- | --- | --- |
-| URL policy | `url-policy` | `safeHref`, `safeImageSrc`, `safeImageSrcset`, `safeMediaSrc` |
+| URL policy | `url-policy` | `safeHref`, `safeImageSrc`, `safeImageSrcset`, `filterImageSrcset`, `safeMediaSrc` |
 | Ids | `ids` | `createIdScope`, `createIdFamily`, `ariaLabelledBy`, `ariaDescribedBy`, `ensureElementId` |
 | Keyboard | `keyboard` | `parseShortcut`, `matchesShortcut`, `formatShortcut`, `createShortcutMap`, `getNavigationIntent` |
 | Roving focus and typeahead | `roving` | `createRovingFocus`, `createTypeahead`, `setRovingTabIndex` |

package/dist/editor/markdown.js

@@ -14,16 +14,62 @@ export const MARKDOWN_CODEC_LIMITS = Object.freeze({
     /** Nested emphasis and links. */
     inlineDepth: 6,
 });
-const FENCE = /^ {0,3}(`{3,}|~{3,})\s*([a-z][a-z0-9+-]{0,31})?\s*$/i;
-const HEADING = /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?[ \t]*#*[ \t]*$/;
+// Line patterns stay linear on hostile lines: no two neighboring quantifiers
+// can match the same characters, and `.` uses the `s` flag so U+2028 and
+// U+2029 inside a line never make a `(.*)$` tail backtrack. The fence info
+// string and the heading closing sequence are read by hand (their regex
+// forms backtracked quadratically, and cubically, on runs of spaces).
+const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;
+const FENCE_LANG = /^[a-z][a-z0-9+-]{0,31}$/i;
+const HEADING_OPEN = /^ {0,3}(#+)/;
 const RULE = /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
-const QUOTE = /^ {0,3}> ?(.*)$/;
-const BULLET = /^( {0,3})([-*+])[ \t]+(.*)$/;
-const ORDERED = /^( {0,3})(\d{1,9})[.)][ \t]+(.*)$/;
+const QUOTE = /^ {0,3}> ?(.*)$/s;
+const BULLET = /^( {0,3})([-*+])[ \t]+(.*)$/s;
+const ORDERED = /^( {0,3})(\d{1,9})[.)][ \t]+(.*)$/s;
 const TASK = /^\[([ xX])\][ \t]+/;
 const IMAGE_ONLY = /^!\[((?:[^\]\\\n]|\\.)*)\]\(\s*<?([^\s()<>]+)>?\s*\)$/;
 const ESCAPABLE = /[\\`*_{}[\]()#+\-.!~<>|]/;
 const isBlank = (line) => line.trim() === '';
+const isSpace = (char) => char === ' ' || char === '\t';
+/** A fence opening line: its marker and the optional language. */
+function readFence(line) {
+    const open = FENCE_OPEN.exec(line);
+    if (!open)
+        return null;
+    const info = line.slice(open[0].length).trim();
+    if (info !== '' && !FENCE_LANG.test(info))
+        return null;
+    return info
+        ? { marker: open[1], lang: info.toLowerCase() }
+        : { marker: open[1] };
+}
+/**
+ * An ATX heading line: up to 6 `#` (a 7th or later reads as part of the
+ * closing sequence), then text after a space or tab, with the closing
+ * sequence of spaces, `#` and spaces dropped from the end.
+ */
+function readHeading(line) {
+    const open = HEADING_OPEN.exec(line);
+    if (!open)
+        return null;
+    const hashes = open[1];
+    const level = Math.min(hashes.length, 6);
+    const rest = line.slice(open[0].length - hashes.length + level);
+    let start = 0;
+    while (isSpace(rest[start]))
+        start += 1;
+    let end = rest.length;
+    while (end > start && isSpace(rest[end - 1]))
+        end -= 1;
+    while (end > start && rest[end - 1] === '#')
+        end -= 1;
+    while (end > start && isSpace(rest[end - 1]))
+        end -= 1;
+    // Without a space or tab after the opening, only a closing sequence may follow.
+    if (start === 0 && end > 0)
+        return null;
+    return { level, text: rest.slice(start, end) };
+}
 function listMarker(line) {
     const bullet = BULLET.exec(line);
     if (bullet)
@@ -33,8 +79,8 @@ function listMarker(line) {
         return { ordered: true, start: Number(ordered[2]), content: ordered[3] ?? '' };
     return null;
 }
-const startsBlock = (line) => FENCE.test(line) ||
-    HEADING.test(line) ||
+const startsBlock = (line) => readFence(line) !== null ||
+    readHeading(line) !== null ||
     RULE.test(line) ||
     QUOTE.test(line) ||
     listMarker(line) !== null;
@@ -84,9 +130,9 @@ class Reader {
                 i += 1;
                 continue;
             }
-            const fence = FENCE.exec(line);
+            const fence = readFence(line);
             if (fence) {
-                const marker = fence[1] ?? '```';
+                const marker = fence.marker;
                 const body = [];
                 i += 1;
                 while (i < lines.length && !(lines[i] ?? '').trim().startsWith(marker)) {
@@ -94,7 +140,7 @@ class Reader {
                     i += 1;
                 }
                 i += 1;
-                const lang = fence[2]?.toLowerCase();
+                const lang = fence.lang;
                 push(() => {
                     const code = this.budget.text(this.budget.clean(body.join('\n'), '\n\t'));
                     return lang
@@ -103,16 +149,16 @@ class Reader {
                 });
                 continue;
             }
-            const heading = HEADING.exec(line);
+            const heading = readHeading(line);
             if (heading) {
-                const level = (heading[1] ?? '#').length;
+                const level = heading.level;
                 if (level > 4)
                     this.budget.report('heading-clamped', 'Headings deeper than level 4 became level 4.');
                 push(() => ({
                     id: this.budget.newId(),
                     type: 'heading',
                     level: Math.min(level, 4),
-                    content: trimEdges(this.inline((heading[2] ?? '').trim())),
+                    content: trimEdges(this.inline(heading.text.trim())),
                 }));
                 i += 1;
                 continue;
@@ -356,8 +402,13 @@ function parseInline(source, depth, marks, inLink, out, budget) {
             }
         }
         if (ch === '\n') {
-            if (/ {2,}$/.test(buffer)) {
-                buffer = buffer.replace(/ +$/, '');
+            // Count trailing spaces by hand: an unanchored `/ {2,}$/` rescans the
+            // whole buffer on every soft line break (quadratic in a long paragraph).
+            let spaces = 0;
+            while (buffer.charCodeAt(buffer.length - 1 - spaces) === 32)
+                spaces += 1;
+            if (spaces >= 2) {
+                buffer = buffer.slice(0, buffer.length - spaces);
                 flush();
                 out.push({ type: 'break' });
                 budget.chars += 1;
@@ -453,15 +504,79 @@ function matchLink(scan, at) {
     const labelEnd = scan.bracket(at);
     if (labelEnd === -1 || source[labelEnd + 1] !== '(')
         return null;
-    const target = /^\(\s*<?((?:[^\s()<>]|\([^\s()<>]*\))*)>?(?:\s+"[^"\n]*")?\s*\)/.exec(source.slice(labelEnd + 1, labelEnd + 1 + 2_100));
+    // A target is read from at most 2,100 characters after the label.
+    const target = readLinkTarget(source.slice(labelEnd + 1, labelEnd + 1 + 2_100), 0);
     if (!target)
         return null;
-    return {
-        labelStart: at + 1,
-        labelEnd,
-        href: target[1] ?? '',
-        end: labelEnd + 1 + target[0].length,
+    return { labelStart: at + 1, labelEnd, href: target.href, end: labelEnd + 1 + target.end };
+}
+const isWhitespace = (char) => char !== undefined && /\s/.test(char);
+/** A target character: not whitespace, a parenthesis or an angle bracket. */
+const isTargetChar = (char) => char !== undefined && !/[\s()<>]/.test(char);
+/**
+ * Reads a link target `(<href> "title")` whose `(` is at `open`, by hand.
+ * It returns what `/\(\s*<?((?:[^\s()<>]|\([^\s()<>]*\))*)>?(?:\s+"[^"\n]*")?\s*\)/y`
+ * returned (the href and the index after `)`), but in linear time: in that
+ * regex `\(\s*`, `\s+"` and `\s*\)` competed for one whitespace run, so
+ * `[a](` + 3,990 spaces + `x` took about 250 ms.
+ */
+function readLinkTarget(source, open) {
+    // The optional title and the closing parenthesis from `from`: the index
+    // after `)`, or -1.
+    const close = (from) => {
+        let at = from;
+        while (isWhitespace(source[at]))
+            at += 1;
+        if (source[at] === ')')
+            return at + 1;
+        if (at === from || source[at] !== '"')
+            return -1;
+        at += 1;
+        while (at < source.length && source[at] !== '"' && source[at] !== '\n')
+            at += 1;
+        if (source[at] !== '"')
+            return -1;
+        at += 1;
+        while (isWhitespace(source[at]))
+            at += 1;
+        return source[at] === ')' ? at + 1 : -1;
     };
+    let at = open + 1;
+    while (isWhitespace(source[at]))
+        at += 1;
+    const afterSpace = at;
+    if (source[at] === '<')
+        at += 1;
+    const hrefStart = at;
+    // Plain characters and balanced `(…)` groups without whitespace inside.
+    for (;;) {
+        if (isTargetChar(source[at]))
+            at += 1;
+        else if (source[at] === '(') {
+            let inner = at + 1;
+            while (isTargetChar(source[inner]))
+                inner += 1;
+            if (source[inner] !== ')')
+                break;
+            at = inner + 1;
+        }
+        else
+            break;
+    }
+    const href = source.slice(hrefStart, at);
+    if (source[at] === '>')
+        at += 1;
+    const end = close(at);
+    if (end !== -1)
+        return { href, end };
+    // The regex backtracked into the leading whitespace: `( "title")` is an
+    // empty href with a title.
+    if (afterSpace > open + 1) {
+        const titled = close(open + 1);
+        if (titled !== -1)
+            return { href: '', end: titled };
+    }
+    return null;
 }
 // ---------------------------------------------------------------------------
 // Writing
@@ -493,6 +608,20 @@ function prepareMarks(content) {
             for (const ch of node.text)
                 chars.push({ ch, marks: node.marks });
     }
+    // The nearest character on each side of every position, so a run of
+    // breaks is crossed in constant time (linear, not quadratic, in breaks).
+    const previous = new Array(chars.length);
+    const next = new Array(chars.length);
+    for (let k = 0, last = -1; k < chars.length; k += 1) {
+        previous[k] = last;
+        if (chars[k] !== null)
+            last = k;
+    }
+    for (let k = chars.length - 1, last = chars.length; k >= 0; k -= 1) {
+        next[k] = last;
+        if (chars[k] !== null)
+            last = k;
+    }
     for (const type of ['strong', 'em', 'strike']) {
         let i = 0;
         const marked = (c) => c?.marks.some((m) => m.type === type) === true;
@@ -500,13 +629,8 @@ function prepareMarks(content) {
         const has = (k) => {
             if (chars[k] !== null)
                 return marked(chars[k]);
-            let left = k - 1;
-            while (chars[left] === null)
-                left -= 1;
-            let right = k + 1;
-            while (chars[right] === null)
-                right += 1;
-            return left >= 0 && marked(chars[left]) && marked(chars[right]);
+            const left = previous[k];
+            return left >= 0 && marked(chars[left]) && marked(chars[next[k]]);
         };
         while (i < chars.length) {
             if (!has(i)) {
@@ -536,16 +660,21 @@ function prepareMarks(content) {
 }
 function writeInline(content, em) {
     const open = { strong: '**', em, strike: '~~' };
-    const texts = content.flatMap((node, index) => (node.type === 'text' ? [{ node, index }] : []));
+    const texts = content.flatMap((node) => (node.type === 'text' ? [{ node }] : []));
     const stack = [];
     const outer = (marks) => marks.filter((m) => m.type !== 'code');
-    /** Where the span of `mark` starting at text `t` ends (marks that end later nest outside). */
-    const spanEnd = (t, mark) => {
-        let end = t;
-        while (texts[end + 1]?.node.marks.some((m) => markKey(m) === markKey(mark)))
-            end += 1;
-        return end;
-    };
+    // Where the span of each mark starting at text `t` ends (marks that end
+    // later nest outside), computed once from the end so long spans stay linear.
+    const ends = new Array(texts.length);
+    for (let t = texts.length - 1; t >= 0; t -= 1) {
+        const here = new Map();
+        for (const mark of texts[t].node.marks) {
+            const key = markKey(mark);
+            here.set(key, ends[t + 1]?.get(key) ?? t);
+        }
+        ends[t] = here;
+    }
+    const spanEnd = (t, mark) => ends[t]?.get(markKey(mark)) ?? t;
     const ordered = (t) => {
         const marks = outer(texts[t].node.marks);
         const opened = (mark) => {
@@ -575,10 +704,11 @@ function writeInline(content, em) {
         return common;
     };
     let t = 0;
-    content.forEach((node, index) => {
+    content.forEach((node) => {
         if (node.type === 'break') {
             // Marks the next text keeps stay open across the break.
-            const next = texts.findIndex((entry) => entry.index > index);
+            // `t` texts are written, so the next one is `texts[t]`.
+            const next = t < texts.length ? t : -1;
             keepCommon(next === -1 ? [] : ordered(next).filter((m) => stack.some((s) => markKey(s) === markKey(m))));
             out += '\\\n';
             return;

package/dist/focus-scope/focus-scope.d.ts

@@ -20,6 +20,13 @@ export interface FocusScopeOptions {
     cycleTabNavigation?: boolean;
     /** Called before focus returns to the opener; call `preventDefault()` to cancel. */
     onBeforeRestoreFocus?: (event: FocusRestoreEvent) => void;
+    /**
+     * Focus-exempt regions outside the container (an undo toaster, the live
+     * announcer). While focus is inside one, Tab and Shift+Tab move natively
+     * between the region's own stops; past its last (or before its first) stop,
+     * focus wraps back into the scope. Queried on every Tab.
+     */
+    exemptRegions?: () => readonly Element[];
 }
 /** An activated, framework-free keyboard focus scope. */
 export interface FocusScope {

package/dist/focus-scope/focus-scope.js

@@ -44,11 +44,35 @@ export function createFocusScope(container, options = {}) {
             return;
         focus(resolveInitialTarget(container, options), true);
     };
+    /** The exempt region holding `node`, when it sits outside the container. */
+    const exemptRegionOf = (node) => {
+        if (!node || container.contains(node))
+            return null;
+        for (const region of options.exemptRegions?.() ?? []) {
+            if (region.contains(node))
+                return region;
+        }
+        return null;
+    };
     const onKeyDown = (event) => {
         if (!active || !isTopScope(scope, document) || event.key !== 'Tab')
             return;
         const tabbable = getTabbableElements(container);
         const current = document.activeElement;
+        const region = exemptRegionOf(current);
+        if (region) {
+            // Inside a focus-exempt region: native order between its own stops,
+            // then back into the scope at either end.
+            const stops = getTabbableElements(region);
+            const at = stops.indexOf(current);
+            const leaving = event.shiftKey ? at <= 0 : at < 0 || at === stops.length - 1;
+            if (!leaving)
+                return;
+            event.preventDefault();
+            const target = event.shiftKey ? tabbable[tabbable.length - 1] : tabbable[0];
+            focus(target ?? container, !target);
+            return;
+        }
         const index = tabbable.indexOf(current);
         const cycle = options.cycleTabNavigation === true;
         if (!cycle && !(event.shiftKey ? index <= 0 : index < 0 || index === tabbable.length - 1)) {

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { lockScroll } from './scroll-lock/scroll-lock.js';
 export type { TabbableOptions } from './tabbable/index.js';
 export { getFocusableElements, getTabbableElements, isFocusable, isTabbable, } from './tabbable/index.js';
 export { type HrefTrust, safeHref } from './url/safe-href.js';
+export { filterImageSrcset } from './url-policy/filter-image-srcset.js';
 export { safeImageSrc } from './url-policy/safe-image-src.js';
 export { safeImageSrcset } from './url-policy/safe-image-srcset.js';
 export { type SafeMediaSrcOptions, safeMediaSrc } from './url-policy/safe-media-src.js';

package/dist/index.js

@@ -18,6 +18,7 @@ export { createRovingFocus, createTypeahead, indexOfSelected, isItemDisabled, se
 export { lockScroll } from "./scroll-lock/scroll-lock.js";
 export { getFocusableElements, getTabbableElements, isFocusable, isTabbable, } from "./tabbable/index.js";
 export { safeHref } from "./url/safe-href.js";
+export { filterImageSrcset } from "./url-policy/filter-image-srcset.js";
 export { safeImageSrc } from "./url-policy/safe-image-src.js";
 export { safeImageSrcset } from "./url-policy/safe-image-srcset.js";
 export { safeMediaSrc } from "./url-policy/safe-media-src.js";

package/dist/inert/inert.js

@@ -30,8 +30,15 @@ const SKIPPED_TAGS = new Set([
     'TEMPLATE',
     'TITLE',
 ]);
+// Realm-independent: an element from another window, or one whose timer runs
+// after the global Element binding is gone, is still an element.
 function isElement(value) {
-    return typeof Element !== 'undefined' && value instanceof Element;
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const node = value;
+    return (node.nodeType === 1 &&
+        typeof node.setAttribute === 'function' &&
+        typeof node.contains === 'function');
 }
 /**
  * The elements to make inert so that only `keep` (and their descendants) stay

package/dist/overlay/core.js

@@ -245,6 +245,8 @@ export function createOverlayCore(options, features = {}) {
             focusScope = features.focusScope(element, {
                 ...(options.initialFocus ? { initialFocus: options.initialFocus } : {}),
                 ...(options.cycleTabNavigation ? { cycleTabNavigation: true } : {}),
+                // Focus-exempt regions (the toast region) keep their own Tab order.
+                exemptRegions: exemptElements,
                 onBeforeRestoreFocus: (event) => {
                     if (options.restoreFocus === false)
                         event.preventDefault();

package/dist/url-policy/filter-image-srcset.d.ts

@@ -0,0 +1,11 @@
+import type { HrefTrust } from '../url/safe-href.js';
+/**
+ * Filter an image `srcset` candidate by candidate, where `safeImageSrcset`
+ * refuses the whole value. Every candidate URL goes through the image URL
+ * policy (`safeImageSrc`) at `trust`; a refused or malformed candidate (or one
+ * whose URL holds a comma) is dropped and the rest are kept. Candidates keep
+ * the descriptor kind of the first kept one (`x` or `w`), since a srcset
+ * cannot mix them. Returns `undefined` when nothing is left, so a caller can
+ * drop `sizes` with it.
+ */
+export declare function filterImageSrcset(value: unknown, trust?: HrefTrust): string | undefined;

package/dist/url-policy/filter-image-srcset.js

@@ -0,0 +1,60 @@
+import { safeImageSrcset } from "./safe-image-srcset.js";
+/**
+ * Split a `srcset` into candidates the way the HTML parser reads it: a URL is
+ * a run of non-whitespace (so a `data:` URL may hold commas), trailing commas
+ * end it, and descriptors run to the next comma.
+ */
+function candidates(value) {
+    const out = [];
+    let index = 0;
+    while (index < value.length) {
+        while (index < value.length && /[\s,]/.test(value[index] ?? ''))
+            index += 1;
+        if (index >= value.length)
+            break;
+        let end = index;
+        while (end < value.length && !/\s/.test(value[end] ?? ''))
+            end += 1;
+        let url = value.slice(index, end);
+        index = end;
+        if (url.endsWith(',')) {
+            url = url.replace(/,+$/, '');
+            out.push({ url, descriptors: '' });
+            continue;
+        }
+        let close = index;
+        while (close < value.length && value[close] !== ',')
+            close += 1;
+        out.push({ url, descriptors: value.slice(index, close).trim() });
+        index = close + 1;
+    }
+    return out;
+}
+/**
+ * Filter an image `srcset` candidate by candidate, where `safeImageSrcset`
+ * refuses the whole value. Every candidate URL goes through the image URL
+ * policy (`safeImageSrc`) at `trust`; a refused or malformed candidate (or one
+ * whose URL holds a comma) is dropped and the rest are kept. Candidates keep
+ * the descriptor kind of the first kept one (`x` or `w`), since a srcset
+ * cannot mix them. Returns `undefined` when nothing is left, so a caller can
+ * drop `sizes` with it.
+ */
+export function filterImageSrcset(value, trust = 'untrusted') {
+    if (typeof value !== 'string' || value.trim() === '' || value.length > 16_384)
+        return undefined;
+    const kept = [];
+    let kind;
+    for (const { url, descriptors } of candidates(value)) {
+        if (url === '' || url.includes(','))
+            continue;
+        const candidate = safeImageSrcset(descriptors ? `${url} ${descriptors}` : url, trust);
+        if (candidate === undefined)
+            continue;
+        const candidateKind = descriptors.endsWith('w') ? 'width' : 'density';
+        kind ??= candidateKind;
+        if (candidateKind !== kind)
+            continue;
+        kept.push(candidate);
+    }
+    return kept.length > 0 ? safeImageSrcset(kept.join(', '), trust) : undefined;
+}

package/dist/url-policy/index.d.ts

@@ -1,4 +1,5 @@
 export { type HrefTrust, safeHref } from '../url/safe-href.js';
+export { filterImageSrcset } from './filter-image-srcset.js';
 export { safeImageSrc } from './safe-image-src.js';
 export { safeImageSrcset } from './safe-image-srcset.js';
 export { type SafeMediaSrcOptions, safeMediaSrc } from './safe-media-src.js';

package/dist/url-policy/index.js

@@ -1,4 +1,5 @@
 export { safeHref } from "../url/safe-href.js";
+export { filterImageSrcset } from "./filter-image-srcset.js";
 export { safeImageSrc } from "./safe-image-src.js";
 export { safeImageSrcset } from "./safe-image-srcset.js";
 export { safeMediaSrc } from "./safe-media-src.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texuli/core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Texels: framework-free behavior and policy that every Texuli component is built from.",
   "keywords": [
     "svelte",