@symbo.ls/brender 3.14.678 → 3.14.679

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @symbo.ls/brender
 
+## 3.14.679
+
+### Patch Changes
+
+- c80283f: The faces a built page takes are the faces it draws (XMA r12 results, item 2). `window.__smblsFacesReady` and `brender.faces.inline: true` took every face of a family the page's styles name when any character of the page was in its range: a page that draws a family only in bold headings asked for its regular face too, and a page that draws TBCContractica 300/400/500/700 loaded 100 and 900 as well.
+
+  `@symbo.ls/brender` exports `drawnFaces(html, { readSheet })` (also `@symbo.ls/brender/drawnFaces`): which `@font-face` rules of the page's faces sheet its elements draw, read as the browser picks them — each element's family, weight and style from the cascade (`!important`, specificity, order, inheritance, `var()`, the `font` shorthand, the browser's bold headings, italic emphasis and system-font form controls), each character of its own text in the face of its family list that holds it (style, then weight, then `unicode-range`). Rules under `@media` / `@supports` / `@container` / `@layer` and for states (`:hover`, `:focus`, …) count as possibilities where they would win; `::placeholder` and the strings of `::before` / `::after` count. It returns `Map<rule index, characters>`, or `null` when a stylesheet of the page cannot be read.
+
+  `smbls build` uses it: `inline: true` inlines the faces the page draws, the list form the drawn faces of the listed families, and the function form gets `face.drawn` (the characters drawn in that face; `null` when the page was not read). The faces promise loads the drawn faces by address, each with a character drawn in it. The page's `<link rel="stylesheet">` files and their `@import`s are read from the build output; a page with a stylesheet the build cannot read, or a build with a brender that predates the reader, keeps the earlier rule. The log says on how many pages the drawn faces were read (`Faces drawn: read on N of M pages`), and the report says it per page (`facesRead`).
+
+- Updated dependencies [bfef7bf]
+- Updated dependencies [0e57128]
+- Updated dependencies [9f253fc]
+- Updated dependencies [9f253fc]
+- Updated dependencies [de2f734]
+- Updated dependencies [d9194ce]
+  - @symbo.ls/element@3.14.819
+  - @symbo.ls/utils@3.14.855
+  - smbls@3.14.862
+  - @symbo.ls/fetch@3.14.675
+  - @symbo.ls/helmet@3.14.674
+
 ## 3.14.678
 
 ### Patch Changes

package/README.md

@@ -209,6 +209,8 @@ No inline script — a strict Content-Security-Policy (`script-src 'self'`, no `
 
 The marks describe the faces by address. `smbls build` marks each page again after its `file:` URLs point into the build output, so the version follows the files the page ships (every page of a build carries the same one when the font URLs are site-root or absolute; a relative URL differs by the page's directory, and so does the version). Its `brender.faces.inline` step moves files into the sheet as `data:` URLs and keeps both marks as they were: an inlined face still names its file. A tool that changes the addresses in a page itself calls `markFacesSheet(html)` (exported): it writes both marks again from the rules the sheet holds, leaves the sheet's text and its other attributes as they are, and returns a page without a faces sheet unchanged. `facesSheetMarks(rules)` returns `{ version, files }` for a sheet's text or its rules (`null` without a `@font-face`).
 
+**The faces a page draws.** `drawnFaces(html, { readSheet })` (exported, also as `@symbo.ls/brender/drawnFaces`) reads which faces of the sheet the page's elements draw, as the browser picks them: each element's family, weight and style from the cascade (`!important`, specificity, order, inheritance, `var()`, the `font` shorthand, the browser's own rules for headings, emphasis and form controls), each character of its text against the faces' `unicode-range`. Rules under `@media` / `@supports` / `@container` / `@layer` and for states (`:hover`, …) count as possibilities. It returns a `Map` from a `@font-face` rule's index in the sheet to the characters drawn in it, or `null` when a stylesheet of the page cannot be read: `readSheet(href, from)` returns the text of a `<link rel="stylesheet">` file or an `@import` (`from`: the address of the sheet that imports it), or `null`. A `<link data-smbls-font>` (a font service's `@font-face` sheet) is not read. `smbls build` uses it for `brender.faces.inline: true` and `window.__smblsFacesReady` (CLI README, "Which faces a page draws").
+
 The runtime also reads what pages from brender up to 3.14.664 carry — the inline `window.__BRENDER__` flag, `window.__BR_REGISTRY__`, `window.__BRENDER_HYDRATE__` — and, when a policy blocked that flag, takes a `data-br` element directly in the mount node for the mark. An smbls runtime older than this format does not know the `<meta>`: keep `smbls` and `@symbo.ls/brender` at the same release.
 
 **The data is the build's.** A pre-rendered page shows the answers its render got until it is rendered again — a `smbls build` page until the next build. A page flagged stale (`<html data-smbls-stale>` from the host, or the project's `fetch.seed.isStale(stamp)` / `fetch.seed.maxAge`) shows them at once and then, after the adoption, asks again and swaps in what changed; `fetch.seed: false` keeps the answers out of the page. See `@symbo.ls/fetch`, "A pre-built page shows the data of its build".

package/dist/esm/drawnFaces.js

@@ -0,0 +1,3 @@
+import{parseHTML as ue}from"linkedom";import{stylesheetRules as he}from"./pageWeight.js";const G=/<style\b[^>]*\bdata-smbls-faces\b[^>]*>([\s\S]*?)<\/style\s*>/i,me=/@font-face\s*\{([^}]*)\}/gi,de=/<(script|template|noscript)\b([^>]*)>[\s\S]*?<\/\1\s*>/gi,H=8,J=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","math","emoji","fangsong","-apple-system","blinkmacsystemfont"]),pe=new Set(["hover","focus","focus-visible","focus-within","active","visited","link","any-link","target","target-within","checked","indeterminate","default","disabled","enabled","read-only","read-write","required","optional","valid","invalid","user-valid","user-invalid","in-range","out-of-range","placeholder-shown","autofill","-webkit-autofill","open","closed","popover-open","modal","fullscreen","picture-in-picture","playing","paused","current","past","future","defined","lang","dir","state","blank","local-link","scope","host","host-context"]),V=new Set(["before","after","first-line","first-letter"]),B=new Set(["is","where","matches","-webkit-any","-moz-any","has"]),ge=`h1,h2,h3,h4,h5,h6,th{font-weight:bold}b,strong{font-weight:bolder}
+em,i,cite,var,dfn,address{font-style:italic}code,kbd,samp,pre,tt,listing,xmp,plaintext{font-family:monospace}
+input,textarea,select,button{font-family:system-ui;font-weight:400;font-style:normal}`,P=new Set(["font","font-family","font-weight","font-style"]),F=/^\s*(?:only\s+)?(?:all|screen)\s*$/i,K=/var\(\s*(--[\w-]+)/g,q=(t,s)=>{let n=0,o=null;for(let r=s;r<t.length;r++){const e=t[r];if(o){e==="\\"?r++:e===o&&(o=null);continue}if(e==='"'||e==="'")o=e;else if(e==="(")n++;else if(e===")"&&!--n)return r}return-1},L=(t,s)=>{const n=[];let o=0,r=null,e=0;for(let i=0;i<t.length;i++){const l=t[i];if(r){l==="\\"?i++:l===r&&(r=null);continue}l==='"'||l==="'"?r=l:l==="("||l==="["||l==="{"?o++:l===")"||l==="]"||l==="}"?o=Math.max(0,o-1):l===s&&!o&&(n.push(t.slice(e,i)),e=i+1)}return n.push(t.slice(e)),n},X=/[\w\- -￿]/,C=(t,s)=>{let n=s;for(;n<t.length;)if(t[n]==="\\")n+=2;else if(X.test(t[n]))n++;else break;return n},Q=t=>{let s=0,n=0,o=0;const r=e=>{s+=Math.floor(e/1e6),n+=Math.floor(e/1e3)%1e3,o+=e%1e3};for(let e=0;e<t.length;){const i=t[e];if(i==='"'||i==="'"){const l=t.indexOf(i,e+1);e=l===-1?t.length:l+1}else if(i==="#")s++,e=C(t,e+1);else if(i===".")n++,e=C(t,e+1);else if(i==="["){n++;const l=t.indexOf("]",e);e=l===-1?t.length:l+1}else if(i===":"){const l=t[e+1]===":",u=e+(l?2:1),f=C(t,u),h=t.slice(u,f).toLowerCase();let g=null,a=f;if(t[f]==="("){const m=q(t,f);g=t.slice(f+1,m===-1?t.length:m),a=m===-1?t.length:m+1}l||V.has(h)?o++:h==="where"||(B.has(h)||h==="not"?g&&r(Math.max(0,...L(g,",").map(m=>Q(m.trim())))):n++),e=a}else i==="*"||i===">"||i==="+"||i==="~"||i==="|"||/\s/.test(i)?e++:X.test(i)||i==="\\"?(o++,e=C(t,e)):e++}return s*1e6+n*1e3+o},Z=t=>{let s=!1,n="element";return{text:(e=>{let i="";for(let l=0;l<e.length;){const u=e[l];if(u==='"'||u==="'"){const f=e.indexOf(u,l+1),h=f===-1?e.length:f+1;i+=e.slice(l,h),l=h}else if(u==="["){const f=e.indexOf("]",l),h=f===-1?e.length:f+1;i+=e.slice(l,h),l=h}else if(u===":"){const f=e[l+1]===":",h=l+(f?2:1),g=C(e,h),a=e.slice(h,g).toLowerCase();let m=null,O=g;if(e[g]==="("){const d=q(e,g);m=e.slice(g+1,d===-1?e.length:d),O=d===-1?e.length:d+1}if(f||V.has(a))a==="placeholder"||a==="-webkit-input-placeholder"||a==="-moz-placeholder"?n="placeholder":a==="before"||a==="after"?n=a:a==="first-line"||a==="first-letter"?s=!0:n=null,i+=":is(*)";else if(a==="not"&&m!==null){const d=ee(m);d.conditional?(s=!0,i+=":is(*)"):i+=`:not(${d.text})`}else if(B.has(a)&&m!==null){const d=ee(m);d.conditional&&(s=!0),i+=`:${a==="matches"||a.endsWith("-any")?"is":a}(${d.text||"*"})`}else pe.has(a)||a.startsWith("-webkit-")||a.startsWith("-moz-")?(s=!0,i+=":is(*)"):i+=e.slice(l,O);l=O}else i+=u,l++}return i})(t),conditional:s,target:n}},ye=t=>{let s="";for(let n=0;n<t.length;){const o=t[n];if(o==='"'||o==="'"||o==="["){const r=t.indexOf(o==="["?"]":o,n+1),e=r===-1?t.length:r+1;s+=t.slice(n,e),n=e}else if(o===":"){let r=C(t,n+(t[n+1]===":"?2:1));if(t[r]==="("){const e=q(t,r);r=e===-1?t.length:e+1}s+=":is(*)",n=r}else s+=o,n++}return s},ee=t=>{let s=!1;return{text:L(t,",").map(o=>{const r=Z(o.trim());return r.conditional&&(s=!0),r.text||"*"}).join(", "),conditional:s}},te=t=>{const s=[];for(const n of L(t.replace(/\/\*[\s\S]*?\*\//g,""),";")){if(n.includes("{"))continue;const o=n.indexOf(":");if(o===-1)continue;const r=n.slice(0,o).trim(),e=r.startsWith("--")?r:r.toLowerCase();if(!P.has(e)&&e!=="content"&&!e.startsWith("--"))continue;let i=n.slice(o+1).trim();const l=/!\s*important\s*$/i.test(i);l&&(i=i.replace(/!\s*important\s*$/i,"").trim()),s.push({prop:e,value:i,important:l})}return s},we=/^@import\s+(?:url\(\s*)?(['"]?)([^'")\s]+)\1\s*\)?\s*([^;]*)/i,T=(t,s,n,o,r=null,e=[])=>{const i=he(t);if(!i)return n.unknown=!0,e;for(const l of i){const u=l.indexOf("{");if(u===-1){const a=we.exec(l);if(!a)continue;const m=n.readSheet?n.readSheet(a[2],o):null;typeof m!="string"?n.unknown=!0:T(m,s||!!a[3].trim()&&!F.test(a[3]),n,a[2],r,e);continue}if(!l.endsWith("}"))continue;const f=l.slice(0,u).trim(),h=l.slice(u+1,-1);if(f[0]==="@"){const a=(/^@([\w-]+)/.exec(f)||[])[1]?.toLowerCase();a==="media"?T(h,s||!F.test(f.slice(6)),n,o,r,e):(a==="supports"||a==="container"||a==="document"||a==="scope"||a==="starting-style"||a==="layer")&&T(h,!0,n,o,r,e);continue}const g=r?L(f,",").map(a=>a.includes("&")?a.replace(/&/g,`:is(${r})`):`:is(${r}) ${a.trim()}`).join(", "):f;if(e.push({selector:g,block:h,conditional:s}),h.includes("{")){const a=h.slice(h.search(/[^;{}]*\{/));T(a,s,n,o,g,e)}}return e},N=(t,s,n=0)=>{const o=t.indexOf("var(");if(o===-1)return[t];if(n>8)return[];const r=q(t,o+3);if(r===-1)return[];const e=t.slice(o+4,r),i=L(e,","),l=i[0].trim(),u=i.length>1?i.slice(1).join(",").trim():null,f=s.get(l),h=f&&f.length?f:u!==null?N(u,s,n+1):[],g=[];for(const a of h)for(const m of N(t.slice(0,o)+a+t.slice(r+1),s,n+1))if(g.includes(m)||g.push(m),g.length>=H)return g;return g},ne=t=>t.trim().replace(/^(['"])([\s\S]*)\1$/,"$2").replace(/\\(.)/g,"$1").trim().toLowerCase(),be=t=>L(t,",").map(ne).filter(Boolean),se={normal:400,bold:700},oe=(t,s)=>{const n=String(t).trim().toLowerCase();if(n in se)return se[n];if(n==="bolder")return s<350?400:s<550?700:900;if(n==="lighter")return s<550?100:s<750?400:700;const o=Number(n);return Number.isFinite(o)&&o>=1&&o<=1e3?o:null},ie=t=>{const s=String(t).trim().toLowerCase().split(/\s+/)[0];return s==="italic"||s==="oblique"||s==="normal"?s:null},Se=/\\([0-9a-f]{1,6})\s?|\\([\s\S])/gi,ke=(t,s)=>{let n="";for(const o of t.matchAll(/(["'])((?:\\[\s\S]|(?!\1)[^\\])*)\1|attr\(\s*([\w-]+)[^)]*\)/gi))o[3]?n+=s.getAttribute(o[3])||"":n+=o[2].replace(Se,(r,e,i)=>{if(!e)return i;const l=parseInt(e,16);return l>0&&l<=1114111?String.fromCodePoint(l):"\uFFFD"});return n},ve=new Set(["caption","icon","menu","message-box","small-caption","status-bar"]),Oe=t=>{const s=t.trim();if(ve.has(s.toLowerCase()))return{family:"system-ui",weight:"normal",style:"normal"};const n=[];let o=s;for(;;){const u=/^\s*([^\s,'"]+)/.exec(o);if(!u)break;const f=u[1];if(/^[\d.]/.test(f)&&!/^\d{1,4}$/.test(f)||/^\d{1,4}$/.test(f)&&Number(f)>1e3)break;const h=f.toLowerCase();if(/^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller|calc\(|clamp\(|min\(|max\()/.test(h)||(n.push(h),o=o.slice(u[0].length),n.length>4))break}const r=/^\s*(?:[^\s/]+|(?:calc|clamp|min|max)\([^)]*\))(?:\s*\/\s*[^\s]+)?\s+/.exec(o);if(!r)return null;const e=o.slice(r[0].length).trim();if(!e)return null;let i="normal",l="normal";for(const u of n)u==="italic"||u==="oblique"?l=u:(u==="bold"||u==="bolder"||u==="lighter"||/^\d{1,4}$/.test(u))&&(i=u);return{family:e,weight:i,style:l}},_=(t,s)=>{const n=new RegExp(`(?:^|;|\\s)${s}\\s*:\\s*([^;]+)`,"i").exec(t);return n?n[1].trim():null},Ae=t=>{if(!t)return null;const s=[];for(const n of String(t).split(",")){const o=n.trim().replace(/^u\+/i,"");if(!o)continue;if(o.includes("?")){s.push([parseInt(o.replace(/\?/g,"0"),16),parseInt(o.replace(/\?/g,"f"),16)]);continue}const[r,e]=o.split("-"),i=parseInt(r,16);s.push([i,e?parseInt(e,16):i])}return s.length?s:null},Ee=t=>{const s=[];let n=0;for(const o of t.matchAll(me)){const r=o[1],e=ne(_(r,"font-family")||""),i=String(_(r,"font-weight")||"400").trim().split(/\s+/).map(l=>oe(l,400)||400);s.push({index:n++,family:e,min:Math.min(...i),max:Math.max(...i),style:ie(_(r,"font-style")||"normal")||"normal",ranges:Ae(_(r,"unicode-range"))})}return s},le={italic:["italic","oblique","normal"],oblique:["oblique","italic","normal"],normal:["normal","oblique","italic"]},xe=(t,s)=>{for(const n of le[s]||le.normal){const o=t.filter(r=>r.style===n);if(o.length)return o}return t},Me=(t,s)=>{const n=t.filter(i=>i.min<=s&&s<=i.max);if(n.length)return n;const o=t.filter(i=>i.max<s).sort((i,l)=>l.max-i.max),r=t.filter(i=>i.min>s).sort((i,l)=>i.min-l.min);let e;return s>=400&&s<=500?e=r.find(i=>i.min<=500)||o[0]||r[0]:s<400?e=o[0]||r[0]:e=r[0]||o[0],e?t.filter(i=>i.min===e.min&&i.max===e.max):[]},Le=(t,s)=>!t.ranges||t.ranges.some(([n,o])=>s>=n&&s<=o),re=t=>t.ua?0:t.important?2:1,ce=(t,s)=>{const n=re(t),o=re(s);return n!==o?n>o:t.rank!==s.rank?t.rank>s.rank:t.order>s.order},D=t=>{let s=null;for(const o of t)!o.conditional&&(!s||ce(o,s))&&(s=o);const n=s?[s]:[];for(const o of t)o.conditional&&(!s||ce(o,s))&&n.push(o);return{list:n,inherit:!s}},U=t=>{const s=[],n=new Set;for(const o of t){const r=JSON.stringify(o);if(!n.has(r)&&(n.add(r),s.push(o),s.length>=H))break}return s},ae=(t,s)=>{K.lastIndex=0;let n;for(;n=K.exec(t);)s.add(n[1]);return s},fe={vars:new Map,family:[["serif"]],weight:[400],style:["normal"]},Ce=new Set(["script","style","template","noscript","head","title"]),Y=(t,s)=>{const n=new Map(s.vars),o=[...new Set(t.filter(e=>e.prop.startsWith("--")).map(e=>e.prop))];for(const e of o){const{list:i,inherit:l}=D(t.filter(f=>f.prop===e)),u=l?[...s.vars.get(e)||[]]:[];for(const f of i){const h=f.value.trim();/^(inherit|unset)$/i.test(h)?u.push(...s.vars.get(e)||[]):/^(initial|revert|revert-layer)$/i.test(h)||u.push(h)}n.set(e,U(u))}for(const e of o)n.set(e,U(n.get(e).flatMap(i=>N(i,n))));const r={vars:n};for(const e of["family","weight","style"]){const i="font-"+e,{list:l,inherit:u}=D(t.filter(h=>h.prop===i||h.prop==="font")),f=u?[...s[e]]:[];for(const h of l){const g=f.length;for(const a of N(h.value,n)){const m=a.trim().toLowerCase();if(m==="inherit"||m==="unset"){f.push(...s[e]);continue}if(m==="initial"||m==="revert"||m==="revert-layer"){f.push(...fe[e]);continue}let O=a;if(h.prop==="font"){const d=Oe(a);if(!d)continue;O=d[e]}if(e==="family")f.push(be(O));else if(e==="style"){const d=ie(O);d&&f.push(d)}else for(const d of s.weight){const $=oe(O,d);$&&f.push($)}}f.length===g&&f.push(...s[e])}r[e]=U(f)}return r},Ne=(t,s={})=>{const n=new Map,o=G.exec(t);if(!o)return n;const r=Ee(o[1]);if(!r.length)return n;const e=new Map;for(const c of r)e.has(c.family)||e.set(c.family,[]),e.get(c.family).push(c);const i=t.replace(G,"<style data-smbls-faces></style>").replace(de,"<$1$2></$1>"),{document:l}=ue(i),u={readSheet:typeof s.readSheet=="function"?s.readSheet:null,unknown:!1},f=[],h=(c,y,w,b)=>{for(const S of T(c,y,u,b)){const p=te(S.block);p.length&&f.push({selector:S.selector,decls:p,conditional:S.conditional,ua:w})}};h(ge,!1,!0);for(const c of l.querySelectorAll("style, link")){const y=c.getAttribute("media"),w=!!y&&!F.test(y);if(c.localName==="style"){c.hasAttribute("data-smbls-faces")||h(c.textContent||"",w,!1);continue}const b=(c.getAttribute("rel")||"").toLowerCase().split(/\s+/);if(!b.includes("stylesheet")||c.hasAttribute("data-smbls-font")||c.hasAttribute("disabled"))continue;const S=c.getAttribute("href")||"",p=u.readSheet&&S?u.readSheet(S):null;if(typeof p!="string")return null;h(p,w||b.includes("alternate"),!1,S)}if(u.unknown)return null;const g=[];for(const c of l.querySelectorAll("[style]")){const y=te(c.getAttribute("style")||"");y.length&&g.push({el:c,decls:y})}const a=new Set,m=[...f.flatMap(c=>c.decls),...g.flatMap(c=>c.decls)];for(const c of m)(P.has(c.prop)||c.prop==="content")&&ae(c.value,a);for(let c=-1;c!==a.size;){c=a.size;for(const y of m)a.has(y.prop)&&ae(y.value,a)}const O=c=>P.has(c.prop)||c.prop==="content"||a.has(c.prop),d={element:new Map,placeholder:new Map,before:new Map,after:new Map};let $=0;for(const c of f){const y=c.decls.filter(O);if(y.length)for(const w of L(c.selector,",")){const b=w.trim();if(!b)continue;let{text:S,conditional:p,target:E}=Z(b);if(!E)continue;let k;try{k=l.querySelectorAll(S)}catch{try{k=l.querySelectorAll(ye(S))}catch{continue}p=!0}const A=c.ua?0:Q(b),x=y.map(v=>({...v,rank:A,order:++$,conditional:p||c.conditional,ua:c.ua})),M=d[E];for(const v of k)M.has(v)||M.set(v,[]),M.get(v).push(...x)}}for(const{el:c,decls:y}of g){const w=y.filter(O);w.length&&(d.element.has(c)||d.element.set(c,[]),d.element.get(c).push(...w.map(b=>({...b,rank:1e9,order:++$,conditional:!1,ua:!1}))))}const I=new Map,W=(c,y)=>{if(y.trim())for(const w of c.family)for(const b of c.weight)for(const S of c.style){const p=JSON.stringify([w,b,S]);I.set(p,(I.get(p)||"")+y)}},j=(c,y)=>{const w=Y(d.element.get(c)||[],y);let b="";for(const p of c.childNodes)p.nodeType===3?b+=p.textContent:p.nodeType===1&&!Ce.has(p.localName)&&j(p,w);const S=c.localName;if(S==="input"||S==="textarea"){b+=" "+(c.getAttribute("value")||"");const p=c.getAttribute("placeholder");p&&W(d.placeholder.has(c)?Y(d.placeholder.get(c),w):w,p)}W(w,b);for(const p of["before","after"]){const E=d[p].get(c);if(!E)continue;const k=Y(E,w);for(const A of D(E.filter(x=>x.prop==="content")).list)for(const x of N(A.value,k.vars))W(k,ke(x,c))}};l.documentElement&&j(l.documentElement,fe);for(const[c,y]of I){const[w,b,S]=JSON.parse(c),p=new Map;for(const k of w){if(J.has(k))break;const A=e.get(k);A&&!p.has(k)&&p.set(k,Me(xe(A,S),b))}if(!p.size)continue;const E=new Set;for(const k of y){if(E.has(k))continue;E.add(k);const A=k.codePointAt(0);if(!(A<=32||A===160))for(const x of w){if(J.has(x))break;const M=p.get(x)||[];let v=null;for(let R=M.length-1;R>=0&&!v;R--)Le(M[R],A)&&(v=M[R]);if(!v)continue;const z=n.get(v.index)||"";z.includes(k)||n.set(v.index,z+k);break}}}return n};export{Ne as drawnFaces};

package/dist/esm/index.js

@@ -1 +1 @@
-import{createEnv as e}from"./env.js";import{resetKeys as r,assignKeys as t,mapKeysToElements as o}from"./keys.js";import{loadProject as a,loadAndRenderAll as m}from"./load.js";import{render as s,renderElement as p,renderRoute as i,renderPage as l,resetGlobalCSSCache as d,getAccumulatedEmotionCSS as n,replaceEmotionCSS as c,adoptionScripts as f,prerenderParts as S,buildStamp as g}from"./render.js";import{extractMetadata as h,generateHeadHtml as u}from"./metadata.js";import{collectBrNodes as P,hydrate as y}from"./hydrate.js";import{generateSitemap as C}from"./sitemap.js";import{prefetchPageData as E,injectPrefetchedState as R}from"./prefetch.js";import{composeIntoShell as b}from"./shell.js";import{trimSpriteToPage as k,classRulesForPage as x,markupClasses as A,trimVariablesToPage as K,stylesheetRules as T}from"./pageWeight.js";import{markFacesSheet as j,facesSheetMarks as F}from"./faces.js";var z={createEnv:e,resetKeys:r,assignKeys:t,mapKeysToElements:o,loadProject:a,loadAndRenderAll:m,render:s,renderElement:p,renderRoute:i,renderPage:l,resetGlobalCSSCache:d,getAccumulatedEmotionCSS:n,replaceEmotionCSS:c,extractMetadata:h,generateHeadHtml:u,collectBrNodes:P,hydrate:y,generateSitemap:C,prefetchPageData:E,injectPrefetchedState:R,composeIntoShell:b,adoptionScripts:f,prerenderParts:S,buildStamp:g,trimSpriteToPage:k,classRulesForPage:x,markupClasses:A,trimVariablesToPage:K,stylesheetRules:T,markFacesSheet:j,facesSheetMarks:F};export{f as adoptionScripts,t as assignKeys,g as buildStamp,x as classRulesForPage,P as collectBrNodes,b as composeIntoShell,e as createEnv,z as default,h as extractMetadata,F as facesSheetMarks,u as generateHeadHtml,C as generateSitemap,n as getAccumulatedEmotionCSS,y as hydrate,R as injectPrefetchedState,m as loadAndRenderAll,a as loadProject,o as mapKeysToElements,j as markFacesSheet,A as markupClasses,E as prefetchPageData,S as prerenderParts,s as render,p as renderElement,l as renderPage,i as renderRoute,c as replaceEmotionCSS,d as resetGlobalCSSCache,r as resetKeys,T as stylesheetRules,k as trimSpriteToPage,K as trimVariablesToPage};
+import{createEnv as e}from"./env.js";import{resetKeys as r,assignKeys as t,mapKeysToElements as o}from"./keys.js";import{loadProject as a,loadAndRenderAll as m}from"./load.js";import{render as s,renderElement as p,renderRoute as i,renderPage as l,resetGlobalCSSCache as d,getAccumulatedEmotionCSS as n,replaceEmotionCSS as c,adoptionScripts as f,prerenderParts as S,buildStamp as g}from"./render.js";import{extractMetadata as h,generateHeadHtml as u}from"./metadata.js";import{collectBrNodes as P,hydrate as y}from"./hydrate.js";import{generateSitemap as C}from"./sitemap.js";import{prefetchPageData as E,injectPrefetchedState as R}from"./prefetch.js";import{composeIntoShell as b}from"./shell.js";import{trimSpriteToPage as k,classRulesForPage as x,markupClasses as A,trimVariablesToPage as F,stylesheetRules as K}from"./pageWeight.js";import{markFacesSheet as T,facesSheetMarks as j}from"./faces.js";import{drawnFaces as H}from"./drawnFaces.js";var L={createEnv:e,resetKeys:r,assignKeys:t,mapKeysToElements:o,loadProject:a,loadAndRenderAll:m,render:s,renderElement:p,renderRoute:i,renderPage:l,resetGlobalCSSCache:d,getAccumulatedEmotionCSS:n,replaceEmotionCSS:c,extractMetadata:h,generateHeadHtml:u,collectBrNodes:P,hydrate:y,generateSitemap:C,prefetchPageData:E,injectPrefetchedState:R,composeIntoShell:b,adoptionScripts:f,prerenderParts:S,buildStamp:g,trimSpriteToPage:k,classRulesForPage:x,markupClasses:A,trimVariablesToPage:F,stylesheetRules:K,markFacesSheet:T,facesSheetMarks:j,drawnFaces:H};export{f as adoptionScripts,t as assignKeys,g as buildStamp,x as classRulesForPage,P as collectBrNodes,b as composeIntoShell,e as createEnv,L as default,H as drawnFaces,h as extractMetadata,j as facesSheetMarks,u as generateHeadHtml,C as generateSitemap,n as getAccumulatedEmotionCSS,y as hydrate,R as injectPrefetchedState,m as loadAndRenderAll,a as loadProject,o as mapKeysToElements,T as markFacesSheet,A as markupClasses,E as prefetchPageData,S as prerenderParts,s as render,p as renderElement,l as renderPage,i as renderRoute,c as replaceEmotionCSS,d as resetGlobalCSSCache,r as resetKeys,K as stylesheetRules,k as trimSpriteToPage,F as trimVariablesToPage};

package/drawnFaces.js

@@ -0,0 +1,783 @@
+// ── The faces a built page's elements draw ──────────────────────────────────
+// XMA r12 results (mirc #503, item 2): window.__smblsFacesReady and
+// `brender.faces.inline: true` took every face of a family the page's styles
+// name, when any character of the whole page was in its range — a page that
+// draws Playfair Display only in bold headings still asked for its regular
+// face, ~60 KB a page never needs.
+//
+// This reads the page as the browser would draw it: each element's
+// font-family, font-weight and font-style from the rules that match it (the
+// cascade: origin, !important, specificity, order; inheritance; var(); the
+// `font` shorthand; the browser's own bold headings, italic emphasis and
+// system-font form controls), then the characters of the element's own text
+// against the faces sheet (`<style data-smbls-faces>`) by the browser's face
+// matching (style, then weight; then unicode-range per character, falling to
+// the next family for a character no face of a family covers).
+//
+// What can change after the first view counts too, so no face that may be
+// drawn is left out: a rule under @media / @supports / @container / @layer,
+// and a rule whose selector names a state (:hover, :focus, :checked, …) or
+// :lang(), adds its value as a possibility wherever it would win. A rule for
+// `::placeholder` reaches the field's placeholder, one for `::before` /
+// `::after` the strings and attr() of its `content`; other generated content
+// (`::marker`, counters' own text) is not read. A name in a family list that
+// the sheet does not declare (a system font) is passed over, so the next
+// family counts for every character; a generic family (`sans-serif`,
+// `system-ui`, …) ends the list.
+//
+// The page's stylesheets are its `<style>` elements, its
+// `<link rel="stylesheet">` files and their @import files, read by
+// `options.readSheet(href, from)` (`from`: the address of the sheet that
+// imports it, none for the page) — a `<link data-smbls-font>` (a font
+// service's sheet of @font-face rules, smbls fontFaces.js) is not read.
+//
+// Returns Map<index, chars>: `index` the n-th `@font-face` rule of the faces
+// sheet (in order, as /@font-face\s*\{([^}]*)\}/g finds them), `chars` the
+// characters the page draws in it (unique, in order of first use) — or null
+// when a stylesheet of the page cannot be read (no readSheet, another origin,
+// a sheet that does not parse): any face may be drawn then.
+import { parseHTML } from 'linkedom'
+import { stylesheetRules } from './pageWeight.js'
+
+const FACES_STYLE = /<style\b[^>]*\bdata-smbls-faces\b[^>]*>([\s\S]*?)<\/style\s*>/i
+const FACE_RULE = /@font-face\s*\{([^}]*)\}/gi
+const RAW = /<(script|template|noscript)\b([^>]*)>[\s\S]*?<\/\1\s*>/gi
+
+// At most this many values per property and element: a page whose
+// variables branch more is read with the first ones.
+const MAX_VALUES = 8
+
+const GENERIC = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif',
+  'ui-monospace', 'ui-rounded', 'math', 'emoji', 'fangsong', '-apple-system', 'blinkmacsystemfont'
+])
+
+// Selector states: matched as if they held (the value is a possibility).
+const STATES = new Set([
+  'hover', 'focus', 'focus-visible', 'focus-within', 'active', 'visited', 'link', 'any-link', 'target',
+  'target-within', 'checked', 'indeterminate', 'default', 'disabled', 'enabled', 'read-only', 'read-write',
+  'required', 'optional', 'valid', 'invalid', 'user-valid', 'user-invalid', 'in-range', 'out-of-range',
+  'placeholder-shown', 'autofill', '-webkit-autofill', 'open', 'closed', 'popover-open', 'modal',
+  'fullscreen', 'picture-in-picture', 'playing', 'paused', 'current', 'past', 'future', 'defined',
+  'lang', 'dir', 'state', 'blank', 'local-link', 'scope', 'host', 'host-context'
+])
+const LEGACY_PSEUDO_ELEMENTS = new Set(['before', 'after', 'first-line', 'first-letter'])
+const SELECTOR_LISTS = new Set(['is', 'where', 'matches', '-webkit-any', '-moz-any', 'has'])
+
+// The browser's own rules (lowest in the cascade): bold headings, italic
+// emphasis, a system font in form controls (`font: inherit` undoes it).
+const UA_RULES = `h1,h2,h3,h4,h5,h6,th{font-weight:bold}b,strong{font-weight:bolder}
+em,i,cite,var,dfn,address{font-style:italic}code,kbd,samp,pre,tt,listing,xmp,plaintext{font-family:monospace}
+input,textarea,select,button{font-family:system-ui;font-weight:400;font-style:normal}`
+
+const FONT_PROPS = new Set(['font', 'font-family', 'font-weight', 'font-style'])
+const ALWAYS_MEDIA = /^\s*(?:only\s+)?(?:all|screen)\s*$/i
+const VAR_NAME = /var\(\s*(--[\w-]+)/g
+
+// ── Text helpers ────────────────────────────────────────────────────────────
+// The end of a balanced (…) that opens at `at` (quotes skipped); -1 if none.
+const closeOf = (text, at) => {
+  let depth = 0
+  let quote = null
+  for (let i = at; i < text.length; i++) {
+    const ch = text[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '(') depth++
+    else if (ch === ')' && !--depth) return i
+  }
+  return -1
+}
+
+// Split at top-level `sep` (outside quotes, (), [], {}).
+const splitTop = (text, sep) => {
+  const out = []
+  let depth = 0
+  let quote = null
+  let start = 0
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '(' || ch === '[' || ch === '{') depth++
+    else if (ch === ')' || ch === ']' || ch === '}') depth = Math.max(0, depth - 1)
+    else if (ch === sep && !depth) {
+      out.push(text.slice(start, i))
+      start = i + 1
+    }
+  }
+  out.push(text.slice(start))
+  return out
+}
+
+const IDENT_CHAR = /[\w\- -￿]/
+const identEnd = (text, at) => {
+  let i = at
+  while (i < text.length) {
+    if (text[i] === '\\') i += 2
+    else if (IDENT_CHAR.test(text[i])) i++
+    else break
+  }
+  return i
+}
+
+// ── Selectors ───────────────────────────────────────────────────────────────
+// Specificity of one complex selector, as one number (a, b, c → a·1e6 + b·1e3 + c).
+const specificityOf = (sel) => {
+  let a = 0
+  let b = 0
+  let c = 0
+  const add = (n) => {
+    a += Math.floor(n / 1e6)
+    b += Math.floor(n / 1e3) % 1e3
+    c += n % 1e3
+  }
+  for (let i = 0; i < sel.length;) {
+    const ch = sel[i]
+    if (ch === '"' || ch === "'") {
+      const end = sel.indexOf(ch, i + 1)
+      i = end === -1 ? sel.length : end + 1
+    } else if (ch === '#') {
+      a++
+      i = identEnd(sel, i + 1)
+    } else if (ch === '.') {
+      b++
+      i = identEnd(sel, i + 1)
+    } else if (ch === '[') {
+      b++
+      const end = sel.indexOf(']', i)
+      i = end === -1 ? sel.length : end + 1
+    } else if (ch === ':') {
+      const element = sel[i + 1] === ':'
+      const start = i + (element ? 2 : 1)
+      const end = identEnd(sel, start)
+      const name = sel.slice(start, end).toLowerCase()
+      let args = null
+      let next = end
+      if (sel[end] === '(') {
+        const close = closeOf(sel, end)
+        args = sel.slice(end + 1, close === -1 ? sel.length : close)
+        next = close === -1 ? sel.length : close + 1
+      }
+      if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) c++
+      else if (name === 'where') { /* 0 */ } else if (SELECTOR_LISTS.has(name) || name === 'not') {
+        if (args) add(Math.max(0, ...splitTop(args, ',').map((s) => specificityOf(s.trim()))))
+      } else b++
+      i = next
+    } else if (ch === '*' || ch === '>' || ch === '+' || ch === '~' || ch === '|' || /\s/.test(ch)) i++
+    else if (IDENT_CHAR.test(ch) || ch === '\\') {
+      c++
+      i = identEnd(sel, i)
+    } else i++
+  }
+  return a * 1e6 + b * 1e3 + c
+}
+
+// The selector css-select can match: states and pseudo-elements become
+// `:is(*)` (a no-op). `conditional` when a state, :lang() or a ::first-*
+// was taken out; `target` 'element', 'placeholder' (::placeholder),
+// 'before' / 'after', or null for what draws no text of the page's
+// (::marker, ::selection, …).
+const staticSelector = (sel) => {
+  let conditional = false
+  let target = 'element'
+  const walk = (text) => {
+    let out = ''
+    for (let i = 0; i < text.length;) {
+      const ch = text[i]
+      if (ch === '"' || ch === "'") {
+        const end = text.indexOf(ch, i + 1)
+        const stop = end === -1 ? text.length : end + 1
+        out += text.slice(i, stop)
+        i = stop
+      } else if (ch === '[') {
+        const end = text.indexOf(']', i)
+        const stop = end === -1 ? text.length : end + 1
+        out += text.slice(i, stop)
+        i = stop
+      } else if (ch === ':') {
+        const element = text[i + 1] === ':'
+        const start = i + (element ? 2 : 1)
+        const end = identEnd(text, start)
+        const name = text.slice(start, end).toLowerCase()
+        let args = null
+        let next = end
+        if (text[end] === '(') {
+          const close = closeOf(text, end)
+          args = text.slice(end + 1, close === -1 ? text.length : close)
+          next = close === -1 ? text.length : close + 1
+        }
+        if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) {
+          if (name === 'placeholder' || name === '-webkit-input-placeholder' || name === '-moz-placeholder') target = 'placeholder'
+          else if (name === 'before' || name === 'after') target = name
+          else if (name === 'first-line' || name === 'first-letter') conditional = true
+          else target = null
+          out += ':is(*)'
+        } else if (name === 'not' && args !== null) {
+          const inner = staticSelectorList(args)
+          // a state inside :not() — drop the :not() (matches more, never less)
+          if (inner.conditional) {
+            conditional = true
+            out += ':is(*)'
+          } else out += `:not(${inner.text})`
+        } else if (SELECTOR_LISTS.has(name) && args !== null) {
+          const inner = staticSelectorList(args)
+          if (inner.conditional) conditional = true
+          out += `:${name === 'matches' || name.endsWith('-any') ? 'is' : name}(${inner.text || '*'})`
+        } else if (STATES.has(name) || name.startsWith('-webkit-') || name.startsWith('-moz-')) {
+          conditional = true
+          out += ':is(*)'
+        } else out += text.slice(i, next)
+        i = next
+      } else {
+        out += ch
+        i++
+      }
+    }
+    return out
+  }
+  const text = walk(sel)
+  return { text, conditional, target }
+}
+// What is left when css-select still cannot match a selector: every
+// pseudo-class out (it matches more, never less).
+const looseSelector = (text) => {
+  let out = ''
+  for (let i = 0; i < text.length;) {
+    const ch = text[i]
+    if (ch === '"' || ch === "'" || ch === '[') {
+      const end = text.indexOf(ch === '[' ? ']' : ch, i + 1)
+      const stop = end === -1 ? text.length : end + 1
+      out += text.slice(i, stop)
+      i = stop
+    } else if (ch === ':') {
+      let end = identEnd(text, i + (text[i + 1] === ':' ? 2 : 1))
+      if (text[end] === '(') {
+        const close = closeOf(text, end)
+        end = close === -1 ? text.length : close + 1
+      }
+      out += ':is(*)'
+      i = end
+    } else {
+      out += ch
+      i++
+    }
+  }
+  return out
+}
+const staticSelectorList = (list) => {
+  let conditional = false
+  const parts = splitTop(list, ',').map((s) => {
+    const r = staticSelector(s.trim())
+    if (r.conditional) conditional = true
+    return r.text || '*'
+  })
+  return { text: parts.join(', '), conditional }
+}
+
+// ── Declarations ────────────────────────────────────────────────────────────
+// The declarations of a block (its nested rules aside) that name a font
+// property, `content` or a custom property.
+const declarationsOf = (block) => {
+  const out = []
+  for (const part of splitTop(block.replace(/\/\*[\s\S]*?\*\//g, ''), ';')) {
+    if (part.includes('{')) continue
+    const colon = part.indexOf(':')
+    if (colon === -1) continue
+    const prop = part.slice(0, colon).trim()
+    const key = prop.startsWith('--') ? prop : prop.toLowerCase()
+    if (!FONT_PROPS.has(key) && key !== 'content' && !key.startsWith('--')) continue
+    let value = part.slice(colon + 1).trim()
+    const important = /!\s*important\s*$/i.test(value)
+    if (important) value = value.replace(/!\s*important\s*$/i, '').trim()
+    out.push({ prop: key, value, important })
+  }
+  return out
+}
+
+// Every style rule of a stylesheet text, at any depth of @media /
+// @supports / @container / @layer (and CSS nesting), and of the files its
+// @import rules name (`ctx.readSheet`): { selector, block, conditional }.
+// `ctx.unknown` turns true for a sheet that cannot be read.
+const IMPORT = /^@import\s+(?:url\(\s*)?(['"]?)([^'")\s]+)\1\s*\)?\s*([^;]*)/i
+const styleRulesOf = (css, conditional, ctx, from, parent = null, into = []) => {
+  const rules = stylesheetRules(css)
+  if (!rules) {
+    ctx.unknown = true
+    return into
+  }
+  for (const rule of rules) {
+    const open = rule.indexOf('{')
+    if (open === -1) {
+      const m = IMPORT.exec(rule)
+      if (!m) continue
+      const sheet = ctx.readSheet ? ctx.readSheet(m[2], from) : null
+      if (typeof sheet !== 'string') ctx.unknown = true
+      else styleRulesOf(sheet, conditional || (!!m[3].trim() && !ALWAYS_MEDIA.test(m[3])), ctx, m[2], parent, into)
+      continue
+    }
+    if (!rule.endsWith('}')) continue
+    const prelude = rule.slice(0, open).trim()
+    const body = rule.slice(open + 1, -1)
+    if (prelude[0] === '@') {
+      const name = (/^@([\w-]+)/.exec(prelude) || [])[1]?.toLowerCase()
+      if (name === 'media') styleRulesOf(body, conditional || !ALWAYS_MEDIA.test(prelude.slice(6)), ctx, from, parent, into)
+      // a layer reorders the cascade: its rules count as possibilities
+      else if (name === 'supports' || name === 'container' || name === 'document' || name === 'scope' || name === 'starting-style' || name === 'layer') {
+        styleRulesOf(body, true, ctx, from, parent, into)
+      }
+      continue
+    }
+    const selector = parent
+      ? splitTop(prelude, ',').map((s) => s.includes('&') ? s.replace(/&/g, `:is(${parent})`) : `:is(${parent}) ${s.trim()}`).join(', ')
+      : prelude
+    into.push({ selector, block: body, conditional })
+    // nested rules (CSS nesting)
+    if (body.includes('{')) {
+      const nested = body.slice(body.search(/[^;{}]*\{/))
+      styleRulesOf(nested, conditional, ctx, from, selector, into)
+    }
+  }
+  return into
+}
+
+// ── Values ──────────────────────────────────────────────────────────────────
+// var() in `value`, from `vars` (name → values): every resulting text (at
+// most MAX_VALUES); null when a var() has no value and no fallback.
+const substitute = (value, vars, depth = 0) => {
+  const at = value.indexOf('var(')
+  if (at === -1) return [value]
+  if (depth > 8) return []
+  const close = closeOf(value, at + 3)
+  if (close === -1) return []
+  const inner = value.slice(at + 4, close)
+  const comma = splitTop(inner, ',')
+  const name = comma[0].trim()
+  const fallback = comma.length > 1 ? comma.slice(1).join(',').trim() : null
+  const known = vars.get(name)
+  const options = known && known.length ? known : fallback !== null ? substitute(fallback, vars, depth + 1) : []
+  const out = []
+  for (const option of options) {
+    for (const rest of substitute(value.slice(0, at) + option + value.slice(close + 1), vars, depth + 1)) {
+      if (!out.includes(rest)) out.push(rest)
+      if (out.length >= MAX_VALUES) return out
+    }
+  }
+  return out
+}
+
+const unquote = (name) => name.trim().replace(/^(['"])([\s\S]*)\1$/, '$2').replace(/\\(.)/g, '$1').trim().toLowerCase()
+const familiesOf = (value) => splitTop(value, ',').map(unquote).filter(Boolean)
+
+const WEIGHT_WORDS = { normal: 400, bold: 700 }
+const weightOf = (value, parent) => {
+  const v = String(value).trim().toLowerCase()
+  if (v in WEIGHT_WORDS) return WEIGHT_WORDS[v]
+  if (v === 'bolder') return parent < 350 ? 400 : parent < 550 ? 700 : 900
+  if (v === 'lighter') return parent < 550 ? 100 : parent < 750 ? 400 : 700
+  const n = Number(v)
+  return Number.isFinite(n) && n >= 1 && n <= 1000 ? n : null
+}
+const styleOf = (value) => {
+  const v = String(value).trim().toLowerCase().split(/\s+/)[0]
+  return v === 'italic' || v === 'oblique' || v === 'normal' ? v : null
+}
+
+// The text a `content` value draws: its strings (CSS escapes read) and
+// attr() values; '' for none, normal, url(), counters and quotes.
+const CSS_ESCAPE = /\\([0-9a-f]{1,6})\s?|\\([\s\S])/gi
+const contentText = (value, el) => {
+  let out = ''
+  for (const m of value.matchAll(/(["'])((?:\\[\s\S]|(?!\1)[^\\])*)\1|attr\(\s*([\w-]+)[^)]*\)/gi)) {
+    if (m[3]) out += el.getAttribute(m[3]) || ''
+    else {
+      out += m[2].replace(CSS_ESCAPE, (all, hex, ch) => {
+        if (!hex) return ch
+        const code = parseInt(hex, 16)
+        return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '\ufffd'
+      })
+    }
+  }
+  return out
+}
+
+const SYSTEM_FONTS = new Set(['caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'])
+// The `font` shorthand → { family, weight, style } (null: not a font).
+const fontShorthand = (value) => {
+  const v = value.trim()
+  if (SYSTEM_FONTS.has(v.toLowerCase())) return { family: 'system-ui', weight: 'normal', style: 'normal' }
+  const tokens = []
+  let rest = v
+  // the tokens before the size: style, variant, weight, stretch
+  for (;;) {
+    const m = /^\s*([^\s,'"]+)/.exec(rest)
+    if (!m) break
+    const word = m[1]
+    if (/^[\d.]/.test(word) && !/^\d{1,4}$/.test(word)) break // a size (12px, 1.2em, 100%)
+    if (/^\d{1,4}$/.test(word) && Number(word) > 1000) break
+    const low = word.toLowerCase()
+    if (/^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller|calc\(|clamp\(|min\(|max\()/.test(low)) break
+    tokens.push(low)
+    rest = rest.slice(m[0].length)
+    if (tokens.length > 4) break
+  }
+  // the size [/ line-height], then the families
+  const size = /^\s*(?:[^\s/]+|(?:calc|clamp|min|max)\([^)]*\))(?:\s*\/\s*[^\s]+)?\s+/.exec(rest)
+  if (!size) return null
+  const family = rest.slice(size[0].length).trim()
+  if (!family) return null
+  let weight = 'normal'
+  let style = 'normal'
+  for (const t of tokens) {
+    if (t === 'italic' || t === 'oblique') style = t
+    else if (t === 'bold' || t === 'bolder' || t === 'lighter' || /^\d{1,4}$/.test(t)) weight = t
+  }
+  return { family, weight, style }
+}
+
+// ── The faces sheet ─────────────────────────────────────────────────────────
+const descriptor = (body, name) => {
+  const m = new RegExp(`(?:^|;|\\s)${name}\\s*:\\s*([^;]+)`, 'i').exec(body)
+  return m ? m[1].trim() : null
+}
+const rangesOf = (text) => {
+  if (!text) return null
+  const out = []
+  for (const part of String(text).split(',')) {
+    const p = part.trim().replace(/^u\+/i, '')
+    if (!p) continue
+    if (p.includes('?')) {
+      out.push([parseInt(p.replace(/\?/g, '0'), 16), parseInt(p.replace(/\?/g, 'f'), 16)])
+      continue
+    }
+    const [x, y] = p.split('-')
+    const from = parseInt(x, 16)
+    out.push([from, y ? parseInt(y, 16) : from])
+  }
+  return out.length ? out : null
+}
+const facesOf = (sheet) => {
+  const faces = []
+  let index = 0
+  for (const m of sheet.matchAll(FACE_RULE)) {
+    const body = m[1]
+    const family = unquote(descriptor(body, 'font-family') || '')
+    const weights = String(descriptor(body, 'font-weight') || '400').trim().split(/\s+/).map((w) => weightOf(w, 400) || 400)
+    faces.push({
+      index: index++,
+      family,
+      min: Math.min(...weights),
+      max: Math.max(...weights),
+      style: styleOf(descriptor(body, 'font-style') || 'normal') || 'normal',
+      ranges: rangesOf(descriptor(body, 'unicode-range'))
+    })
+  }
+  return faces
+}
+
+// The browser's face matching (CSS Fonts 4, §5.2): style first, then weight.
+const STYLE_ORDER = { italic: ['italic', 'oblique', 'normal'], oblique: ['oblique', 'italic', 'normal'], normal: ['normal', 'oblique', 'italic'] }
+const byStyle = (faces, style) => {
+  for (const s of STYLE_ORDER[style] || STYLE_ORDER.normal) {
+    const got = faces.filter((f) => f.style === s)
+    if (got.length) return got
+  }
+  return faces
+}
+const byWeight = (faces, w) => {
+  const within = faces.filter((f) => f.min <= w && w <= f.max)
+  if (within.length) return within
+  const below = faces.filter((f) => f.max < w).sort((x, y) => y.max - x.max)
+  const above = faces.filter((f) => f.min > w).sort((x, y) => x.min - y.min)
+  let pick
+  if (w >= 400 && w <= 500) pick = above.find((f) => f.min <= 500) || below[0] || above[0]
+  else if (w < 400) pick = below[0] || above[0]
+  else pick = above[0] || below[0]
+  return pick ? faces.filter((f) => f.min === pick.min && f.max === pick.max) : []
+}
+const covers = (face, code) => !face.ranges || face.ranges.some(([from, to]) => code >= from && code <= to)
+
+// ── The page ────────────────────────────────────────────────────────────────
+// The cascade's order of origins: the browser's rules, the page's, the
+// page's !important ones (the browser's !important ones are not read).
+const levelOf = (d) => (d.ua ? 0 : d.important ? 2 : 1)
+const beats = (x, y) => {
+  const lx = levelOf(x)
+  const ly = levelOf(y)
+  if (lx !== ly) return lx > ly
+  if (x.rank !== y.rank) return x.rank > y.rank
+  return x.order > y.order
+}
+// The values that may win: the winner of the rules that always hold, and
+// every conditional one that would beat it; `inherit` when no rule always
+// holds (the inherited value stays possible).
+const winnersOf = (list) => {
+  let base = null
+  for (const d of list) if (!d.conditional && (!base || beats(d, base))) base = d
+  const out = base ? [base] : []
+  for (const d of list) if (d.conditional && (!base || beats(d, base))) out.push(d)
+  return { list: out, inherit: !base }
+}
+const uniq = (values) => {
+  const out = []
+  const keys = new Set()
+  for (const v of values) {
+    const key = JSON.stringify(v)
+    if (keys.has(key)) continue
+    keys.add(key)
+    out.push(v)
+    if (out.length >= MAX_VALUES) break
+  }
+  return out
+}
+const varsIn = (text, into) => {
+  VAR_NAME.lastIndex = 0
+  let m
+  while ((m = VAR_NAME.exec(text))) into.add(m[1])
+  return into
+}
+
+const ROOT = { vars: new Map(), family: [['serif']], weight: [400], style: ['normal'] }
+const SKIP = new Set(['script', 'style', 'template', 'noscript', 'head', 'title'])
+
+// One element's possible fonts, from its declarations and its parent's.
+const fontOf = (decls, parent) => {
+  // custom properties (inherited): the raw values first, then var() in them
+  const vars = new Map(parent.vars)
+  const names = [...new Set(decls.filter((d) => d.prop.startsWith('--')).map((d) => d.prop))]
+  for (const name of names) {
+    const { list, inherit } = winnersOf(decls.filter((d) => d.prop === name))
+    const values = inherit ? [...(parent.vars.get(name) || [])] : []
+    for (const d of list) {
+      const v = d.value.trim()
+      if (/^(inherit|unset)$/i.test(v)) values.push(...(parent.vars.get(name) || []))
+      else if (!/^(initial|revert|revert-layer)$/i.test(v)) values.push(v)
+    }
+    vars.set(name, uniq(values))
+  }
+  for (const name of names) vars.set(name, uniq(vars.get(name).flatMap((v) => substitute(v, vars))))
+  const font = { vars }
+  // font-family, font-weight, font-style (the `font` shorthand sets all three)
+  for (const prop of ['family', 'weight', 'style']) {
+    const longhand = 'font-' + prop
+    const { list, inherit } = winnersOf(decls.filter((d) => d.prop === longhand || d.prop === 'font'))
+    const values = inherit ? [...parent[prop]] : []
+    for (const d of list) {
+      const before = values.length
+      for (const text of substitute(d.value, vars)) {
+        const keyword = text.trim().toLowerCase()
+        if (keyword === 'inherit' || keyword === 'unset') {
+          values.push(...parent[prop])
+          continue
+        }
+        if (keyword === 'initial' || keyword === 'revert' || keyword === 'revert-layer') {
+          values.push(...ROOT[prop])
+          continue
+        }
+        let raw = text
+        if (d.prop === 'font') {
+          const f = fontShorthand(text)
+          if (!f) continue
+          raw = f[prop]
+        }
+        if (prop === 'family') values.push(familiesOf(raw))
+        else if (prop === 'style') {
+          const st = styleOf(raw)
+          if (st) values.push(st)
+        } else {
+          for (const p of parent.weight) {
+            const w = weightOf(raw, p)
+            if (w) values.push(w)
+          }
+        }
+      }
+      // A value that is no value (a var() with none, a word that is not a
+      // font) leaves the property inherited.
+      if (values.length === before) values.push(...parent[prop])
+    }
+    font[prop] = uniq(values)
+  }
+  return font
+}
+
+/**
+ * The faces of the page's faces sheet that its elements draw.
+ * @param {string} html - a page built ahead (its faces sheet in place)
+ * @param {{ readSheet?: (href: string, from?: string) => string | null }} [options]
+ * @returns {Map<number, string> | null} faces sheet rule index → the characters
+ *   drawn in it; null when a stylesheet of the page cannot be read
+ */
+export const drawnFaces = (html, options = {}) => {
+  const drawn = new Map()
+  const sheet = FACES_STYLE.exec(html)
+  if (!sheet) return drawn
+  const faces = facesOf(sheet[1])
+  if (!faces.length) return drawn
+  const families = new Map()
+  for (const f of faces) {
+    if (!families.has(f.family)) families.set(f.family, [])
+    families.get(f.family).push(f)
+  }
+  // Scripts, templates and the faces sheet hold no text the page draws.
+  const lean = html.replace(FACES_STYLE, '<style data-smbls-faces></style>').replace(RAW, '<$1$2></$1>')
+  const { document } = parseHTML(lean)
+
+  // The rules: the browser's, then the page's sheets in document order,
+  // then the style attributes (above every rule).
+  const ctx = { readSheet: typeof options.readSheet === 'function' ? options.readSheet : null, unknown: false }
+  const rules = []
+  const add = (css, conditional, ua, from) => {
+    for (const rule of styleRulesOf(css, conditional, ctx, from)) {
+      const decls = declarationsOf(rule.block)
+      if (decls.length) rules.push({ selector: rule.selector, decls, conditional: rule.conditional, ua })
+    }
+  }
+  add(UA_RULES, false, true)
+  for (const el of document.querySelectorAll('style, link')) {
+    const media = el.getAttribute('media')
+    const conditional = !!media && !ALWAYS_MEDIA.test(media)
+    if (el.localName === 'style') {
+      if (!el.hasAttribute('data-smbls-faces')) add(el.textContent || '', conditional, false)
+      continue
+    }
+    const rel = (el.getAttribute('rel') || '').toLowerCase().split(/\s+/)
+    if (!rel.includes('stylesheet') || el.hasAttribute('data-smbls-font') || el.hasAttribute('disabled')) continue
+    const href = el.getAttribute('href') || ''
+    const css = ctx.readSheet && href ? ctx.readSheet(href) : null
+    if (typeof css !== 'string') return null
+    add(css, conditional || rel.includes('alternate'), false, href)
+  }
+  if (ctx.unknown) return null
+  const attributed = []
+  for (const el of document.querySelectorAll('[style]')) {
+    const decls = declarationsOf(el.getAttribute('style') || '')
+    if (decls.length) attributed.push({ el, decls })
+  }
+  // Only the custom properties a font or `content` declaration reads (at
+  // any depth).
+  const wanted = new Set()
+  const every = [...rules.flatMap((r) => r.decls), ...attributed.flatMap((a) => a.decls)]
+  for (const d of every) if (FONT_PROPS.has(d.prop) || d.prop === 'content') varsIn(d.value, wanted)
+  for (let size = -1; size !== wanted.size;) {
+    size = wanted.size
+    for (const d of every) if (wanted.has(d.prop)) varsIn(d.value, wanted)
+  }
+  const keep = (d) => FONT_PROPS.has(d.prop) || d.prop === 'content' || wanted.has(d.prop)
+
+  // Per element (and per ::placeholder, ::before, ::after of it): its
+  // declarations of those properties, each with its place in the cascade.
+  const declared = { element: new Map(), placeholder: new Map(), before: new Map(), after: new Map() }
+  let order = 0
+  for (const rule of rules) {
+    const decls = rule.decls.filter(keep)
+    if (!decls.length) continue
+    for (const part of splitTop(rule.selector, ',')) {
+      const selector = part.trim()
+      if (!selector) continue
+      let { text, conditional, target } = staticSelector(selector)
+      if (!target) continue
+      let matched
+      try {
+        matched = document.querySelectorAll(text)
+      } catch (err) {
+        // matched with its pseudo-classes out: a possibility, never certain
+        try { matched = document.querySelectorAll(looseSelector(text)) } catch (err2) { continue }
+        conditional = true
+      }
+      const rank = rule.ua ? 0 : specificityOf(selector)
+      const entries = decls.map((d) => ({ ...d, rank, order: ++order, conditional: conditional || rule.conditional, ua: rule.ua }))
+      const into = declared[target]
+      for (const el of matched) {
+        if (!into.has(el)) into.set(el, [])
+        into.get(el).push(...entries)
+      }
+    }
+  }
+  for (const { el, decls } of attributed) {
+    const own = decls.filter(keep)
+    if (!own.length) continue
+    if (!declared.element.has(el)) declared.element.set(el, [])
+    declared.element.get(el).push(...own.map((d) => ({ ...d, rank: 1e9, order: ++order, conditional: false, ua: false })))
+  }
+
+  // The characters of each element's own text, per font it may be drawn in.
+  const textOf = new Map()
+  const addText = (font, text) => {
+    if (!text.trim()) return
+    for (const family of font.family) {
+      for (const weight of font.weight) {
+        for (const style of font.style) {
+          const key = JSON.stringify([family, weight, style])
+          textOf.set(key, (textOf.get(key) || '') + text)
+        }
+      }
+    }
+  }
+  const walk = (el, parent) => {
+    const font = fontOf(declared.element.get(el) || [], parent)
+    let own = ''
+    for (const node of el.childNodes) {
+      if (node.nodeType === 3) own += node.textContent
+      else if (node.nodeType === 1 && !SKIP.has(node.localName)) walk(node, font)
+    }
+    const tag = el.localName
+    if (tag === 'input' || tag === 'textarea') {
+      own += ' ' + (el.getAttribute('value') || '')
+      // ::placeholder inherits from its field
+      const placeholder = el.getAttribute('placeholder')
+      if (placeholder) addText(declared.placeholder.has(el) ? fontOf(declared.placeholder.get(el), font) : font, placeholder)
+    }
+    addText(font, own)
+    // ::before / ::after inherit from the element; their text is `content`
+    for (const kind of ['before', 'after']) {
+      const decls = declared[kind].get(el)
+      if (!decls) continue
+      const box = fontOf(decls, font)
+      for (const d of winnersOf(decls.filter((x) => x.prop === 'content')).list) {
+        for (const value of substitute(d.value, box.vars)) addText(box, contentText(value, el))
+      }
+    }
+  }
+  if (document.documentElement) walk(document.documentElement, ROOT)
+
+  // The faces those characters are drawn in: per family, the faces of the
+  // style and weight the browser picks; per character, the last of them
+  // whose unicode-range holds it (CSS Fonts 4: overlapping ranges, the last
+  // rule first), else the next family.
+  for (const [key, text] of textOf) {
+    const [list, weight, style] = JSON.parse(key)
+    const chosen = new Map()
+    for (const family of list) {
+      if (GENERIC.has(family)) break
+      const all = families.get(family)
+      if (all && !chosen.has(family)) chosen.set(family, byWeight(byStyle(all, style), weight))
+    }
+    if (!chosen.size) continue
+    const seen = new Set()
+    for (const ch of text) {
+      if (seen.has(ch)) continue
+      seen.add(ch)
+      const code = ch.codePointAt(0)
+      if (code <= 32 || code === 0xa0) continue
+      for (const family of list) {
+        if (GENERIC.has(family)) break
+        const set = chosen.get(family) || []
+        let face = null
+        for (let i = set.length - 1; i >= 0 && !face; i--) if (covers(set[i], code)) face = set[i]
+        if (!face) continue
+        const chars = drawn.get(face.index) || ''
+        if (!chars.includes(ch)) drawn.set(face.index, chars + ch)
+        break
+      }
+    }
+  }
+  return drawn
+}

package/index.js

@@ -16,6 +16,9 @@ import { trimSpriteToPage, classRulesForPage, markupClasses, trimVariablesToPage
 // page's faces name (`smbls build` maps file: URLs into its output) marks the
 // sheet again.
 import { markFacesSheet, facesSheetMarks } from './faces.js'
+// The faces a page's elements draw (XMA r12 results, item 2): `smbls build`
+// inlines and awaits only those.
+import { drawnFaces } from './drawnFaces.js'
 
 export {
   createEnv,
@@ -48,7 +51,8 @@ export {
   trimVariablesToPage,
   stylesheetRules,
   markFacesSheet,
-  facesSheetMarks
+  facesSheetMarks,
+  drawnFaces
 }
 
 export default {
@@ -82,5 +86,6 @@ export default {
   trimVariablesToPage,
   stylesheetRules,
   markFacesSheet,
-  facesSheetMarks
+  facesSheetMarks,
+  drawnFaces
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.14.678",
+  "version": "3.14.679",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -30,6 +30,11 @@
       "development": "./faces.js",
       "import": "./dist/esm/faces.js",
       "default": "./dist/esm/faces.js"
+    },
+    "./drawnFaces": {
+      "development": "./drawnFaces.js",
+      "import": "./dist/esm/drawnFaces.js",
+      "default": "./dist/esm/drawnFaces.js"
     }
   },
   "source": "index.js",
@@ -53,16 +58,16 @@
   "dependencies": {
     "@symbo.ls/css": "^3.14.782",
     "@symbo.ls/default-config": "^3.14.789",
-    "@symbo.ls/element": "^3.14.818",
-    "@symbo.ls/fetch": "^3.14.674",
-    "@symbo.ls/helmet": "^3.14.673",
+    "@symbo.ls/element": "^3.14.819",
+    "@symbo.ls/fetch": "^3.14.675",
+    "@symbo.ls/helmet": "^3.14.674",
     "@symbo.ls/scratch": "^3.14.796",
-    "@symbo.ls/utils": "^3.14.854",
+    "@symbo.ls/utils": "^3.14.855",
     "esbuild": "^0.28.1",
     "linkedom": "^0.16.8"
   },
   "peerDependencies": {
-    "smbls": "^3.14.860"
+    "smbls": "^3.14.862"
   },
   "optionalDependencies": {
     "@symbo.ls/funcql": "^3.14.0"