htmlboard 0.7.0 → 0.8.0

package/README.md

@@ -40,6 +40,7 @@ Modern AI agents and developers generate dozens of HTML mockups, layout variatio
 - 📱 **Device Filters**: **Mobile**, **Tablet** and **Desktop** (and **Components**, or your own categories) lay out just those designs, side by side, to compare them.
 - 🔎 **Search**: Find designs by name, file, tags or section (case and accents don't matter); the others fade out in place.
 - 👁️ **Sections You Can Fold and Hide**: Fold a section in the list, or hide it from the canvas: its designs unload, so a canvas of hundreds of designs stays light. <kbd>Alt</kbd> + click its eye to see only that one; the list remembers what you folded and hid.
+- 🖼️ **Light When Zoomed Out**: Below 25%, each design shows as a picture of its page, made in the background, and the page under it isn't drawn: hundreds of designs pan and zoom smoothly, and their animations don't keep your computer busy. Zoom in and they're live again.
 - 📸 **Copy or Save as an Image**: Hover a design for two buttons: copy it to the clipboard as a PNG of its full size (twice that on a Retina screen), or save it in a folder you choose once. <kbd>C</kbd> and <kbd>S</kbd> do the same for the selected design.
 - 🎯 **Focus & Zoom-to-Fit**: Click a design in the list or double-click it on the canvas to fit it, <kbd>Shift</kbd> + <kbd>1</kbd> fits everything, <kbd>←</kbd> <kbd>→</kbd> step through the designs.
 - 🔗 **Deep Links**: The URL follows the selected design (`http://localhost:3000/#checkout-b`), so you can share or reload a view of one design.
@@ -377,7 +378,9 @@ It writes each file's size, category, label, variants and description as tags af
 | <kbd>?</kbd> | Show the shortcuts |
 | <kbd>Esc</kbd> | Deselect, then clear the search, then the filter |
 
-On the canvas the designs are pictures: the canvas takes every click and scroll, so <kbd>Ctrl</kbd> + scroll never zooms the page itself. Use **Open** (or <kbd>Enter</kbd>) to try a design's links and hover states on its own.
+On the canvas the designs don't take clicks: the canvas takes every click and scroll, so <kbd>Ctrl</kbd> + scroll never zooms the page itself. Use **Open** (or <kbd>Enter</kbd>) to try a design's links and hover states on its own.
+
+**Zoomed out, pictures.** Below 25% zoom, each design shows a picture of its page instead of the page itself, so a canvas of hundreds of designs stays light: its animations stop, and nothing is drawn again until the view changes. The pictures are made in the background, a few at a time, nearest the middle of the screen first, once a page has loaded and built itself; until then, and while a saved design's picture is made again, its page shows as before. Zoom in past 25% and the designs come back to life once the canvas stops. A picture has the limits of an image of a design (below).
 
 **Images of a design.** Hovering a design shows two buttons over its top right corner. **Copy** puts it in the clipboard as a PNG, to paste anywhere; **Save** writes it in a folder you pick the first time (the canvas remembers it for the project, <kbd>Shift</kbd> + click picks another), as `<design id>.png`, then `-2`, `-3`… so it never replaces an image. Browsers without folder access (Firefox, Safari) download it instead. Your browser draws the image from the page as its frame shows it, with its stylesheets, fonts and images, at the frame's size and your screen's pixel density. A few things can't be in it: images from other sites that don't allow it, pages inside the page (iframes), and shadow DOM.
 
@@ -473,7 +476,7 @@ htmlboard/
 │   │   ├── explorer.css  # Dark chrome, dot grid
 │   │   ├── explorer.js   # Layout, pan/zoom, search, live reload
 │   │   ├── check.js      # Checks the designs in frames out of sight, for `htmlboard check`
-│   │   ├── picture.js    # A design as an image, drawn by the browser (copy, save)
+│   │   ├── picture.js    # A design as an image, drawn by the browser (copy, save, zoomed out)
 │   │   ├── probe.js      # Notes script errors and failed loads in the frames the check loads
 │   │   ├── favicon.svg, logo.svg, mark.svg
 │   │   └── fonts/        # Inter and Bricolage Grotesque (OFL)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlboard",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Infinite canvas and design explorer for HTML artboards — designed for humans and LLMs",
   "type": "module",
   "bin": {

package/src/client/explorer.css

@@ -351,6 +351,13 @@ kbd {
 /* Well off screen: not drawn (see paint in explorer.js) */
 .frame.is-away { content-visibility: hidden; }
 
+/* Zoomed out, a picture of the page over it, and the page not drawn while the picture is up to date
+   (see pictures in explorer.js) */
+.page { position: absolute; inset: 0; }
+.frame.is-still .page { content-visibility: hidden; }
+.picture { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; user-select: none; }
+.frame.is-picture .picture { display: block; }
+
 .overlay { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; }
 
 .label, .section-title, .outline, .size { position: absolute; left: 0; top: 0; }

package/src/client/explorer.js

@@ -1,11 +1,11 @@
 // HtmlBoard explorer: every design of the project side by side on one canvas.
 // Each design is an HTML file shown in an iframe at its real size, and the canvas pans and zooms
-// with one CSS transform. Names, outlines and section titles are drawn over it in screen pixels,
-// so they stay sharp and readable at any zoom. The server lists the designs at /api/designs and
-// pushes saved files at /api/events.
+// with one CSS transform. Zoomed out, a picture of each page stands in for it. Names, outlines and
+// section titles are drawn over it in screen pixels, so they stay sharp and readable at any zoom.
+// The server lists the designs at /api/designs and pushes saved files at /api/events.
 
 import { checkDesigns } from './check.js';
-import { drawDesign } from './picture.js';
+import { drawDesign, forgetFiles } from './picture.js';
 
 const FRAME_GAP = 120;    // canvas px between the designs of a section
 const SECTION_GAP = 560;   // canvas px between sections
@@ -25,6 +25,11 @@ const DOUBLE_MS = 350;
 const CHANGE_MS = 60;      // saved files arriving this close together are applied at once
 const SETTLE_MS = 200;     // the canvas has stopped moving after this long still
 const AWAY_MARGIN = 0.25;  // of the screen's size: designs further off screen than this skip rendering
+const PICTURE_ZOOM = 0.25; // below this zoom, designs show as pictures of their pages
+const DRAWN_MS = 150;      // a page drawn this long has asked for its fonts and images…
+const QUIET_MS = 300;      // …and one that hasn't changed for this long has built itself,
+const BUILD_MS = 3000;     // or this long after it loaded, if it keeps changing
+const PICTURES_AT_ONCE = 3; // pictures made at the same time
 const DEFAULT_SIZE = [1200, 800]; // a design whose entry gives no size; without a height it grows with its page
 const FIT_HEIGHT = 100;    // a frame that fits its page however short (a component's) starts this tall
 
@@ -46,13 +51,14 @@ const state = {
   // { id, name, designs, el, group, head, x, y, w, h, hidden, collapsed, searchCollapsed }
   sections: [],
   grouped: false,       // more than one section: each can be folded in the list and hidden from the canvas
-  designs: [],          // { id, file, path, title, search, section, w, h, autoHeight, x, y, frame, iframe, label, item, … }
+  designs: [],          // { id, file, path, title, search, section, w, h, autoHeight, x, y, frame, page, iframe, picture, label, item, … }
   view: { x: 0, y: 0, z: 1 },
   selected: null,
   hover: null,
   actions: null,        // the design whose buttons show (copy, save as an image)
   query: [],            // the search's words, folded
   category: '',         // the filter: a category, or '' for all
+  pictures: false,      // zoomed out: designs show as pictures
   // What the first view fitted ('all' or a design). Until the user moves the canvas, it is fitted
   // again when the designs' real sizes come in.
   autoFit: null,
@@ -106,6 +112,7 @@ async function fetchManifest() {
 }
 
 function build(manifest) {
+  for (const design of state.designs) if (design.pictured) URL.revokeObjectURL(design.pictured.url);
   els.world.replaceChildren();
   els.list.replaceChildren();
   for (const node of els.overlay.querySelectorAll('.label, .section-title')) node.remove();
@@ -180,17 +187,30 @@ function makeDesign(board, section) {
     autoHeight: !Number(board.height),
     x: 0,
     y: 0,
+    // Its page: how many times it loaded, when it last did and last changed, since when it's drawn
+    loads: 0,
+    loadedAt: 0,
+    changedAt: 0,
+    drawnSince: 0,
+    pictured: null,  // the picture it has: { url, w, h, loads } (the size and load it was made at)
+    picturing: false,
+    failedAt: -1,    // the load a picture couldn't be made of
   };
   design.search = fold([design.title, file, board.description, board.category, ...(board.tags || []), section.name]
     .filter(Boolean).join(' '));
   design.frame = el('div', 'frame');
+  design.page = el('div', 'page');
   design.iframe = el('iframe');
   design.iframe.title = design.title;
   design.iframe.tabIndex = -1;
   design.iframe.setAttribute('scrolling', 'no');
   design.iframe.addEventListener('load', () => onLoad(design));
   design.iframe.src = urlOf(file); // loads once placeFrames puts it on the canvas
-  design.frame.append(design.iframe);
+  design.page.append(design.iframe);
+  design.picture = el('img', 'picture');
+  design.picture.alt = '';
+  design.picture.draggable = false;
+  design.frame.append(design.page, design.picture);
 
   design.label = el('div', 'label', design.title);
   els.overlay.insertBefore(design.label, els.hover);
@@ -218,18 +238,27 @@ function showDims(design) {
 
 function onLoad(design) {
   const doc = design.iframe.contentDocument;
-  if (!doc || !design.autoHeight) return;
-  growToPage(design);
-  doc.fonts?.ready.then(() => growToPage(design));
-  // Pages go on building themselves after they load (components, scripts): measured again when
-  // they change. Not when the frame grows: a page always a bit taller than its frame would grow forever.
+  design.loads++; // its picture, if any, is of the page before
+  design.loadedAt = design.changedAt = performance.now();
+  paintFrame(design);
+  schedulePictures();
+  if (!doc) return;
+  if (design.autoHeight) {
+    growToPage(design);
+    doc.fonts?.ready.then(() => growToPage(design));
+  }
+  // Pages go on building themselves after they load (components, scripts): the picture waits for
+  // them, and a page without a height is measured again when its content changes. Not when the
+  // frame grows: a page always a bit taller than its frame would grow forever.
   let timer = 0;
-  new design.iframe.contentWindow.MutationObserver(() => {
+  new design.iframe.contentWindow.MutationObserver((records) => {
+    design.changedAt = performance.now();
+    if (!design.autoHeight || !records.some((record) => record.type === 'childList')) return;
     clearTimeout(timer);
     timer = setTimeout(() => {
       if (design.autoHeight && design.iframe.contentDocument === doc) growToPage(design);
     }, 50);
-  }).observe(doc.documentElement, { childList: true, subtree: true });
+  }).observe(doc.documentElement, { childList: true, subtree: true, characterData: true, attributes: true });
 }
 
 // A design without a height takes its page's.
@@ -411,8 +440,15 @@ function setHidden(fn, { reveal = true } = {}) {
 // back, it loads again.
 function placeFrames() {
   for (const design of state.designs) {
-    if (design.section.hidden) design.frame.remove();
-    else if (!design.frame.isConnected) els.world.append(design.frame);
+    if (!design.section.hidden) {
+      if (!design.frame.isConnected) els.world.append(design.frame);
+    } else if (design.frame.isConnected) {
+      design.frame.remove();
+      // Its picture shows until the page has loaded again and been pictured anew
+      design.loads++;
+      design.loadedAt = 0;
+      design.drawnSince = 0;
+    }
   }
 }
 
@@ -487,19 +523,22 @@ function paint() {
   const { x, y, z } = state.view;
   const screen = size();
   els.world.style.transform = `translate(${x}px, ${y}px) scale(${z})`;
+  // Zoomed out, designs show as pictures. Zooming in, they come back to life once the canvas stops,
+  // not on the way past.
+  if (z < PICTURE_ZOOM) state.pictures = true;
+  else if (!moving) state.pictures = false;
   // A design well off screen skips rendering: its page stays loaded, it just isn't drawn, so the
   // designs on screen don't wait for the ones that aren't.
   const mx = screen.w * AWAY_MARGIN;
   const my = screen.h * AWAY_MARGIN;
   for (const design of state.designs) {
-    if (!placed(design)) continue;
-    const left = x + design.x * z;
-    const top = y + design.y * z;
-    const away = left + design.w * z < -mx || left > screen.w + mx || top + design.h * z < -my || top > screen.h + my;
-    // Measured again on its way back: a page measured while it isn't drawn can come out a few px off
-    if (design.away && !away && design.autoHeight) requestAnimationFrame(() => growToPage(design));
-    design.away = away;
-    design.frame.classList.toggle('is-away', away);
+    if (placed(design)) {
+      const left = x + design.x * z;
+      const top = y + design.y * z;
+      design.away = left + design.w * z < -mx || left > screen.w + mx || top + design.h * z < -my || top > screen.h + my;
+      design.frame.classList.toggle('is-away', design.away);
+    }
+    paintFrame(design);
   }
   // Dots every 32 canvas px, doubled or halved to stay 16 to 64 screen px apart.
   let grid = 32 * z;
@@ -546,6 +585,7 @@ function paint() {
   els.zoom.textContent = `${Math.round(z * 100)}%`;
   paintMarks();
   saveView();
+  schedulePictures();
 }
 
 // Selection and hover: the outlines and the names' colours.
@@ -620,11 +660,17 @@ function saveView() {
 // again on each frame; once it stops, they are drawn again, sharp, at the new zoom. (Kept as a layer
 // for good, it would hold more memory, and some browsers would leave it blurry after a zoom.)
 let settleTimer = 0;
+let moving = false;
 function setView(view) {
   state.view = view;
+  moving = true;
   els.world.classList.add('is-moving');
   clearTimeout(settleTimer);
-  settleTimer = setTimeout(() => els.world.classList.remove('is-moving'), SETTLE_MS);
+  settleTimer = setTimeout(() => {
+    moving = false;
+    els.world.classList.remove('is-moving');
+    paint(); // zoomed in, the designs come back to life; pictures carry on
+  }, SETTLE_MS);
   paint();
 }
 
@@ -923,6 +969,114 @@ function download(blob, name) {
   setTimeout(() => URL.revokeObjectURL(link.href), 10000);
 }
 
+// ---------------------------------------------------------------- pictures when zoomed out
+
+// Zoomed out, a design shows a picture of its page, and the page under it isn't drawn: a canvas of
+// many designs stays light, and their animations stop until it's zoomed in again. Pictures are made
+// a few at a time while the canvas rests, nearest the middle of the screen first, of pages that have
+// been drawn (a page loads its fonts and images as it's drawn) and have built themselves. Until a
+// design has a picture, and while its picture is out of date (its page reloaded, or resized), its
+// page is drawn, under the old picture if it has one.
+
+// What a design shows: its page, or zoomed out, its picture over it
+function paintFrame(design) {
+  const picture = state.pictures && Boolean(design.pictured);
+  const still = picture && isFresh(design); // the page under it isn't drawn
+  design.frame.classList.toggle('is-picture', picture);
+  design.frame.classList.toggle('is-still', still);
+  const drawn = placed(design) && design.frame.isConnected && !design.away && !still;
+  if (!drawn) {
+    design.drawnSince = 0;
+  } else if (!design.drawnSince) {
+    design.drawnSince = performance.now();
+    // Measured again on its way back: a page measured while it isn't drawn can come out a few px off
+    if (design.loadedAt && design.autoHeight) requestAnimationFrame(() => growToPage(design));
+  }
+}
+
+// Whether a design's picture shows its page as it is: made of this load, at this size
+function isFresh(design) {
+  const { pictured } = design;
+  return Boolean(pictured) && pictured.loads === design.loads && pictured.w === design.w && pictured.h === design.h;
+}
+
+let picturing = 0; // pictures being made
+let pictureTimer = 0;
+function schedulePictures() {
+  clearTimeout(pictureTimer);
+  if (moving) return; // carries on when the canvas stops
+  while (picturing < PICTURES_AT_ONCE) {
+    const { design, wait } = nextPicture();
+    if (!design) {
+      if (wait < Infinity) pictureTimer = setTimeout(schedulePictures, wait);
+      else if (!picturing) forgetFiles(); // every picture made: what they shared can go
+      return;
+    }
+    picturing++;
+    design.picturing = true;
+    takePicture(design).finally(() => {
+      design.picturing = false;
+      picturing--;
+      setTimeout(schedulePictures); // the canvas gets a turn between pictures
+    });
+  }
+}
+
+// The next design to picture, or how long until one is ready
+function nextPicture() {
+  const now = performance.now();
+  const { x, y, z } = state.view;
+  const screen = size();
+  let next = null;
+  let nearest = Infinity;
+  let wait = Infinity;
+  for (const design of state.designs) {
+    if (design.picturing || !design.drawnSince || !design.loadedAt || isFresh(design) || design.failedAt === design.loads) continue;
+    if (design.iframe.contentDocument?.readyState !== 'complete') continue;
+    const ready = Math.max(design.drawnSince + DRAWN_MS, Math.min(design.changedAt + QUIET_MS, design.loadedAt + BUILD_MS));
+    if (ready > now) {
+      wait = Math.min(wait, ready - now);
+      continue;
+    }
+    const distance = Math.hypot(x + (design.x + design.w / 2) * z - screen.w / 2, y + (design.y + design.h / 2) * z - screen.h / 2);
+    if (distance < nearest) {
+      next = design;
+      nearest = distance;
+    }
+  }
+  return { design: next, wait };
+}
+
+// Sharp up to PICTURE_ZOOM, at the screen's pixel density (twice on a Retina screen)
+async function takePicture(design) {
+  const { loads, w, h } = design;
+  const scale = PICTURE_ZOOM * clamp(window.devicePixelRatio || 1, 1, 2);
+  let url = '';
+  try {
+    const canvas = await drawDesign(design.iframe, { width: w, height: h, scale });
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/webp', 0.9));
+    canvas.width = 0; // its pixels can go
+    if (!blob) throw new Error('no picture');
+    url = URL.createObjectURL(blob);
+    const image = new Image();
+    image.src = url;
+    await image.decode(); // so it shows at once
+  } catch {
+    if (url) URL.revokeObjectURL(url);
+    if (design.loads === loads) design.failedAt = loads; // its page stays drawn, until it loads again
+    return;
+  }
+  // Its page reloaded, or the design changed size, while it was made (or the canvas was rebuilt)
+  if (design.loads !== loads || design.w !== w || design.h !== h || !state.designs.includes(design)) {
+    URL.revokeObjectURL(url);
+    return;
+  }
+  if (design.pictured) URL.revokeObjectURL(design.pictured.url);
+  design.pictured = { url, w, h, loads };
+  design.picture.src = url;
+  paintFrame(design);
+}
+
 // ---------------------------------------------------------------- panels and messages
 
 function toggleList(show = els.app.classList.contains('is-collapsed')) {
@@ -1075,6 +1229,7 @@ async function reloadAll() {
     toast(`Could not read the designs (${err.message})`);
     return;
   }
+  forgetFiles();
   if (JSON.stringify(manifest) !== state.manifest) rebuild(manifest);
   else state.designs.filter((d) => d.frame.isConnected).forEach(reloadFrame);
   toast('Designs reloaded');
@@ -1097,6 +1252,7 @@ async function applyChanges() {
   pending.files.clear();
   pending.manifest = false;
   pending.folders = false;
+  forgetFiles(); // pictures read the files again
 
   // A new canvas loads every design afresh, so nothing else is left to do.
   if (manifestChanged) {

package/src/client/picture.js

@@ -15,6 +15,17 @@ const IMPORT_RULE = 3;
 const FONT_FACE_RULE = 5;
 const LEFT_OUT = new Set(['script', 'noscript', 'style', 'link', 'source', 'track']);
 
+// What pictures of several designs share, read once for all of them: the files (fonts, images) as
+// data: URLs, and each linked stylesheet's CSS, for each set of its fonts the designs use. Kept until
+// forgetFiles(): after a file changes, or once every picture is made.
+const shared = { files: new Map(), sheets: new Map(), svgs: new Map() };
+
+export function forgetFiles() {
+  shared.files.clear();
+  shared.sheets.clear();
+  shared.svgs.clear();
+}
+
 /**
  * The page in `iframe` drawn on a canvas, `width` × `height` CSS px at `scale` device px per CSS px
  * (less when that would make a canvas too big to draw).
@@ -48,6 +59,7 @@ export async function drawDesign(iframe, { width, height, scale = 1 }) {
   context.fillStyle = backdrop(doc, win);
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  image.src = ''; // the copy of the page it holds can go now, not when memory runs short
   return canvas;
 }
 
@@ -82,7 +94,7 @@ function reader(win) {
   } catch {
     // Can't tell
   }
-  const read = new Map();
+  const read = shared.files;
   return {
     used,
     // '' when it can't be read: missing, or another site's that doesn't allow it
@@ -95,6 +107,19 @@ function reader(win) {
       }
       return read.get(url);
     },
+    // An SVG file, parsed (a sprite of icons that <use> draws from); null when it can't be read
+    svg(url) {
+      if (!shared.svgs.has(url)) {
+        shared.svgs.set(url, fetch(url)
+          .then((res) => (res.ok ? res.text() : ''))
+          .then((text) => {
+            const parsed = text && new DOMParser().parseFromString(text, 'image/svg+xml');
+            return parsed && !parsed.querySelector('parsererror') ? parsed : null;
+          })
+          .catch(() => null));
+      }
+      return shared.svgs.get(url);
+    },
   };
 }
 
@@ -138,45 +163,79 @@ async function inlineUrls(css, base, files) {
 /** All the CSS the page has, in its order, with the files it uses inlined */
 async function styles(doc, files) {
   const parts = [];
-  for (const sheet of doc.styleSheets) if (!sheet.disabled) parts.push(await sheetCss(sheet, doc.baseURI, files));
-  for (const sheet of doc.adoptedStyleSheets || []) parts.push(await rulesCss(sheet.cssRules, doc.baseURI, files));
+  for (const sheet of doc.styleSheets) if (!sheet.disabled) parts.push(await sheetCss(sheet, doc.baseURI, files, []));
+  for (const sheet of doc.adoptedStyleSheets || []) parts.push(await rulesCss(sheet.cssRules, doc.baseURI, files, []));
   return parts.join('\n');
 }
 
-async function sheetCss(sheet, base, files, media = sheet.media?.mediaText) {
-  const href = sheet.href || base;
+// `fonts` collects the files of the font faces read, to tell which of them a page used.
+async function sheetCss(sheet, base, files, fonts, media = sheet.media?.mediaText) {
   let css;
+  if (sheet.href) {
+    // A linked stylesheet, often the same in every design: read once for each set of its fonts used
+    const saved = shared.sheets.get(sheet.href);
+    const key = saved && fontsKey(saved.fonts, files.used);
+    if (saved?.css.has(key)) {
+      css = saved.css.get(key);
+      fonts.push(...saved.fonts);
+    } else {
+      const own = [];
+      css = await readSheet(sheet, sheet.href, files, own);
+      fonts.push(...own);
+      const entry = saved || { fonts: own, css: new Map() };
+      entry.css.set(fontsKey(entry.fonts, files.used), css);
+      shared.sheets.set(sheet.href, entry);
+    }
+  } else {
+    css = await readSheet(sheet, base, files, fonts);
+  }
+  return media && media !== 'all' ? `@media ${media} {\n${css}\n}` : css;
+}
+
+async function readSheet(sheet, base, files, fonts) {
   try {
-    css = await rulesCss(sheet.cssRules, href, files);
+    return await rulesCss(sheet.cssRules, base, files, fonts);
   } catch {
     // Another site's stylesheet, which the page can use but not read: fetched again, as most allow
     // (font services and CDNs do).
-    css = sheet.href ? await fetch(sheet.href).then((res) => (res.ok ? res.text() : '')).catch(() => '') : '';
-    css = await inlineUrls(css, href, files);
+    const css = sheet.href ? await fetch(sheet.href).then((res) => (res.ok ? res.text() : '')).catch(() => '') : '';
+    return inlineUrls(css, base, files);
   }
-  return media && media !== 'all' ? `@media ${media} {\n${css}\n}` : css;
 }
 
-async function rulesCss(rules, base, files) {
+async function rulesCss(rules, base, files, fonts) {
   const parts = [];
   for (const rule of rules) {
     if (rule.type === IMPORT_RULE) {
-      let css = rule.styleSheet ? await sheetCss(rule.styleSheet, base, files, rule.media?.mediaText) : '';
+      let css = rule.styleSheet ? await sheetCss(rule.styleSheet, base, files, fonts, rule.media?.mediaText) : '';
       if (rule.supportsText) css = `@supports ${rule.supportsText} {\n${css}\n}`;
       if (rule.layerName != null) css = `@layer${rule.layerName ? ` ${rule.layerName}` : ''} {\n${css}\n}`;
       parts.push(css);
-    } else if (rule.type !== FONT_FACE_RULE || !unusedFont(rule, base, files.used)) {
+    } else if (rule.type === FONT_FACE_RULE) {
+      const urls = fontFiles(rule, base);
+      fonts.push(...urls);
+      if (!unusedFont(urls, files.used)) parts.push(rule.cssText);
+    } else {
       parts.push(rule.cssText);
     }
   }
   return inlineUrls(parts.join('\n'), base, files);
 }
 
+// The files a font face loads from (not the ones inside it, as data: URLs)
+function fontFiles(rule, base) {
+  return [...rule.cssText.matchAll(URL_RE)].map((match) => match[2].trim())
+    .filter((url) => !/^data:/i.test(url)).map((url) => absolute(url, base)).filter(Boolean);
+}
+
 // A font face whose files the page never loaded
-function unusedFont(rule, base, used) {
-  if (!used) return false;
-  const urls = [...rule.cssText.matchAll(URL_RE)].map((match) => match[2].trim()).filter((url) => !/^data:/i.test(url));
-  return urls.length > 0 && !urls.some((url) => used.has(absolute(url, base)));
+function unusedFont(urls, used) {
+  return Boolean(used) && urls.length > 0 && !urls.some((url) => used.has(url));
+}
+
+// Which of a stylesheet's fonts a page loaded: pages that loaded the same ones get the same CSS
+function fontsKey(fonts, used) {
+  return used ? fonts.filter((url) => used.has(url)).join(' ') : '*';
 }
 
 // ---------------------------------------------------------------- the page's HTML
@@ -192,6 +251,29 @@ async function copyPage(doc, files) {
   const live = [root, ...root.querySelectorAll('*')];
   const copies = [copy, ...copy.querySelectorAll('*')]; // the same elements, in the same order
   const waits = [];
+  const symbols = new Map(); // another file's symbol that <use> draws (`file#id`) → its id in the copy
+  let sprite = null; // where the copy keeps them
+  let count = 0;
+  const symbolFrom = async (file, id) => {
+    const key = `${file}#${id}`;
+    if (!symbols.has(key)) {
+      symbols.set(key, files.svg(file).then((svg) => {
+        const symbol = svg?.getElementById(id);
+        if (!symbol) return '';
+        if (!sprite) {
+          sprite = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          sprite.setAttribute('aria-hidden', 'true');
+          sprite.setAttribute('style', 'position: absolute; width: 0; height: 0; overflow: hidden');
+          (copy.querySelector('body') || copy).append(sprite);
+        }
+        const inlined = doc.importNode(symbol, true);
+        inlined.id = `htmlboard-symbol-${++count}`;
+        sprite.append(inlined);
+        return inlined.id;
+      }));
+    }
+    return symbols.get(key);
+  };
   live.forEach((el, i) => {
     const out = copies[i];
     const tag = el.localName;
@@ -211,6 +293,18 @@ async function copyPage(doc, files) {
           out.setAttribute('href', data || TRANSPARENT);
         }));
       }
+    } else if (tag === 'use') {
+      // A symbol from another file (a sprite of icons), which an image can't load: brought in
+      const href = el.getAttribute('href') ?? el.getAttribute('xlink:href') ?? '';
+      const hash = href.indexOf('#');
+      const file = hash > 0 ? absolute(href.slice(0, hash), doc.baseURI) : null;
+      if (file && hash < href.length - 1) {
+        waits.push(symbolFrom(file, href.slice(hash + 1)).then((id) => {
+          if (!id) return;
+          out.removeAttribute('xlink:href');
+          out.setAttribute('href', `#${id}`);
+        }));
+      }
     } else if (tag === 'canvas') {
       // Without scripts (as in an image), a canvas shows what it holds instead of its drawing
       asImage(el, out, canvasData(el));