@hajimism/dek 0.3.3 → 0.5.0

package/src/cli/tty.ts

@@ -10,15 +10,29 @@ const codes = {
   bold: "\x1b[1m",
 } as const;
 
+/** The codes dek's own palette writes, which are all terminalSafe lets through. */
+const PALETTE = new Set<string>([reset, ...Object.values(codes)]);
+
+/**
+ * Text with no control character but a newline and a tab: each other shows as U+FFFD, the escape
+ * that starts a color code included. A result's and an error's text go through it before dek
+ * paints them, so what a deck or a ref wrote carries no color, conceal, or cursor move of its own.
+ */
+export function plainText(text: string): string {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: matching them is the point.
+  return text.replace(/[\x00-\x08\x0b-\x1f\x7f-\x9f]/g, "\uFFFD");
+}
+
 /**
  * Text for a terminal: dek's own colors, newlines, and tabs pass, and every other control
  * character shows as U+FFFD. A deck title, a file name, or a ref's title fetched from GitHub
- * could otherwise set the window title, draw a fake link (OSC 8), or clear the screen.
+ * could otherwise set the window title, draw a fake link (OSC 8), clear the screen, or hide
+ * itself from a person while an agent reading the bytes sees it, as conceal (SGR 8) does.
  */
 export function terminalSafe(text: string): string {
   // biome-ignore lint/suspicious/noControlCharactersInRegex: matching them is the point.
   return text.replace(/\x1b\[[0-9;]*m|[\x00-\x08\x0b-\x1f\x7f-\x9f]/g, (match) =>
-    match.length > 1 ? match : "\uFFFD",
+    PALETTE.has(match) ? match : plainText(match),
   );
 }
 

package/src/cli/voice.ts

@@ -1,9 +1,9 @@
-import { spawn } from "node:child_process";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { DekError } from "../core/error.ts";
 import { deckProjectRoot } from "../core/path.ts";
-import { isCachedFile, writeInside } from "../core/safe-fs.ts";
+import { isCachedFile, requireInside, writeInside } from "../core/safe-fs.ts";
+import { runPiped } from "../core/spawn.ts";
 import { loadVoiceDict, loadVoiceSettings, voiceCacheFile, writeVoiceDict } from "../core/voice.ts";
 import {
   engineBaseUrl,
@@ -91,11 +91,15 @@ export function pinVoice({ deck }: DeckTarget): VoiceCliResult {
   const pinDir = join(deck.dir, "voice", "pin");
   const pinTimeline = join(pinDir, "timeline.json");
   const pinAudio = join(pinDir, "master.wav");
-  writeInside(pinTimeline, readFileSync(timelinePath), root);
-  writeInside(pinAudio, readFileSync(audioPath), root);
+  // The folders on the way may be links too; what is pinned comes from inside the project.
+  writeInside(pinTimeline, readFileSync(requireInside(timelinePath, root)), root);
+  writeInside(pinAudio, readFileSync(requireInside(audioPath, root)), root);
   return { action: "pin", timelinePath: pinTimeline, audioPath: pinAudio };
 }
 
+/** A clip of a sentence or two plays well inside this. */
+const PLAY_TIMEOUT_MS = 5 * 60 * 1000;
+
 async function playWav(path: string): Promise<void> {
   if (process.env.DEK_VOICE_PLAY === "0") {
     return;
@@ -105,9 +109,11 @@ async function playWav(path: string): Promise<void> {
   if (!bin) {
     return;
   }
-  await new Promise<void>((resolve) => {
-    const child = spawn(bin, [path], { stdio: "ignore" });
-    child.on("exit", () => resolve());
-    child.on("error", () => resolve());
-  });
+  // Playing is a courtesy: the clip is written either way, so a player that is missing, fails,
+  // or hangs is let go.
+  await runPiped([bin, path], {
+    label: `${bin} failed`,
+    hint: `play ${path} yourself`,
+    timeoutMs: PLAY_TIMEOUT_MS,
+  }).catch(() => {});
 }

package/src/core/alignment.ts

@@ -0,0 +1,320 @@
+import type { Box, MeasuredElement } from "./slide-measure.ts";
+
+/** What lining up needs to know of an element. */
+export type AlignedElement = Pick<
+  MeasuredElement,
+  | "box"
+  | "parent"
+  | "rect"
+  | "textRects"
+  | "baseline"
+  | "opacity"
+  | "decorative"
+  | "inline"
+  | "tilted"
+  | "paints"
+  | "picture"
+  | "fontSize"
+>;
+
+/** An edge items side by side share (`top`, `middle`, `bottom`), or items stacked (`left`, …). */
+export type AlignedEdge = "top" | "middle" | "bottom" | "left" | "center" | "right";
+
+/**
+ * Two items that nearly line up and do not: `element` is the one off the line, `other` the one it
+ * misses, both indices into the elements measured. `of` says whether their boxes miss each other
+ * or the text that starts inside them.
+ */
+export type Misalignment = {
+  element: number;
+  other: number;
+  edge: AlignedEdge;
+  of: "box" | "text";
+  /** How far apart, in the slide's own pixels. */
+  by: number;
+};
+
+/** Edges this close are one line; layout rounds to fractions of a pixel nobody sees. */
+const SAME = 0.5;
+/** Edges closer than this look like one, on a projector as on a laptop. */
+const SEEN = 1.5;
+/** Edges this far apart, or farther, read as a choice; nearer, as a mistake. */
+const NEAR = 8;
+
+type Side = "start" | "center" | "end";
+const SIDES: Side[] = ["start", "center", "end"];
+type Axis = Record<Side, AlignedEdge>;
+/** Items side by side, compared down the slide. */
+const ROW: Axis = { start: "top", center: "middle", end: "bottom" };
+/** Items stacked, compared across it. */
+const COLUMN: Axis = { start: "left", center: "center", end: "right" };
+
+function along(rect: Box, axis: Axis): Record<Side, number> {
+  return axis === ROW
+    ? { start: rect.top, center: (rect.top + rect.bottom) / 2, end: rect.bottom }
+    : { start: rect.left, center: (rect.left + rect.right) / 2, end: rect.right };
+}
+
+/** Side by side when only their heights overlap, stacked when only their widths do. */
+function relation(a: Box, b: Box): Axis | undefined {
+  const across = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+  const down = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+  if (down > 0 && across <= 0) {
+    return ROW;
+  }
+  if (across > 0 && down <= 0) {
+    return COLUMN;
+  }
+  return undefined;
+}
+
+function union(rects: Box[]): Box {
+  return {
+    left: Math.min(...rects.map((rect) => rect.left)),
+    top: Math.min(...rects.map((rect) => rect.top)),
+    right: Math.max(...rects.map((rect) => rect.right)),
+    bottom: Math.max(...rects.map((rect) => rect.bottom)),
+  };
+}
+
+const near = (apart: number): boolean => Math.abs(apart) >= SEEN && Math.abs(apart) <= NEAR;
+
+/** What an item is, as its tag and first class say, whatever beat it shows at or id it has. */
+const kindOf = (box: string): string => box.replace(/#[^.[]+|\[data-step="[^"]*"\]/g, "");
+
+/** An item compared: one element, or the row or the stack several form beside another item. */
+type Group = {
+  members: number[];
+  rect: Box;
+  line: FirstLine | undefined;
+  /** Whether every member paints its box or is a picture, so its edges show. */
+  framed: boolean;
+  kind: string | undefined;
+};
+
+/**
+ * The items on a slide that nearly line up and do not. Items are compared within one parent, and
+ * only when they sit side by side, compared by top, middle, and bottom, or stacked, compared by
+ * left, center, and right. Several items in a row under one item, or stacked beside it, are
+ * compared with it as the row or the stack they form, by the member at that edge. An item lines
+ * up when it shares one of those edges, or, side by side, a baseline: a heading over a wider list,
+ * an icon centered beside a line of text, and a number on its unit's baseline all pass. Where
+ * nothing is shared and the nearest edge is two pixels to eight away, it reads as a mistake; so
+ * does a start, top or left, that nearly meets where the end meets, between items that hold text.
+ * Items of one kind whose box the audience sees, as a row of cards, are held to more: one that
+ * shares its top and nearly its bottom with the others is a little shorter, and ones that start
+ * on one line should start their text on one line too.
+ *
+ * Inline boxes, which sit on a line of text, decoration, what the beat has not shown, what a
+ * transform turns, and the parts of a picture, such as an SVG's shapes, are not items. Of two
+ * items that miss each other, the one fewer others line up with is off the line, and of two alike
+ * the later; each is named once for each of its edges.
+ */
+export function findMisalignments(elements: AlignedElement[]): Misalignment[] {
+  const inPicture = (index: number): boolean => {
+    for (let at = elements[index]?.parent ?? -1; at >= 0; at = elements[at]?.parent ?? -1) {
+      if (elements[at]?.picture) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const items = elements.flatMap((element, index) =>
+    element.opacity >= 0.01 &&
+    !element.decorative &&
+    !element.inline &&
+    !element.tilted &&
+    element.rect.right > element.rect.left &&
+    element.rect.bottom > element.rect.top &&
+    !inPicture(index)
+      ? [index]
+      : [],
+  );
+  const lines = firstLines(elements);
+  const rectOf = (index: number): Box => elements[index]?.rect ?? union([]);
+
+  // The row or the stack `item` forms beside `other`: the items `other` relates to as it does to
+  // `item`, which sit across that from `item` or from one another.
+  const groupOf = (item: number, other: number, axis: Axis, siblings: number[]): Group => {
+    const across = axis === ROW ? COLUMN : ROW;
+    const members = [item];
+    for (let at = 0; at < members.length; at++) {
+      const member = members[at] ?? item;
+      for (const candidate of siblings) {
+        if (
+          !members.includes(candidate) &&
+          candidate !== other &&
+          relation(rectOf(candidate), rectOf(other)) === axis &&
+          relation(rectOf(candidate), rectOf(member)) === across
+        ) {
+          members.push(candidate);
+        }
+      }
+    }
+    members.sort((a, b) => a - b);
+    const kinds = new Set(members.map((member) => kindOf(elements[member]?.box ?? "")));
+    const memberLines = members.flatMap((member) => lines[member] ?? []);
+    return {
+      members,
+      rect: union(members.map(rectOf)),
+      line: memberLines.reduce<FirstLine | undefined>(
+        (first, line) => (!first || earlier(line.rect, first.rect) ? line : first),
+        undefined,
+      ),
+      framed: members.every(
+        (member) => elements[member]?.paints === true || elements[member]?.picture === true,
+      ),
+      kind: kinds.size === 1 ? [...kinds][0] : undefined,
+    };
+  };
+  // The member whose edge is the group's on that side.
+  const at = (group: Group, axis: Axis, side: Side): number =>
+    side === "center"
+      ? (group.members[0] ?? -1)
+      : group.members.reduce((best, member) => {
+          const value = along(rectOf(member), axis)[side];
+          const kept = along(rectOf(best), axis)[side];
+          return (side === "start" ? value < kept : value > kept) ? member : best;
+        });
+
+  type Miss = Misalignment & { key: string };
+  const misses: Miss[] = [];
+  // How many items each one lines up with, edge by edge.
+  const support = new Map<string, number>();
+  const lineUp = (index: number, key: string) => {
+    support.set(`${index}\0${key}`, (support.get(`${index}\0${key}`) ?? 0) + 1);
+  };
+  const compare = (
+    [a, b]: [number, number],
+    edge: AlignedEdge,
+    of: Miss["of"],
+    apart: number,
+  ): void => {
+    const key = `${of}\0${edge}`;
+    if (Math.abs(apart) < SAME) {
+      lineUp(a, key);
+      lineUp(b, key);
+    } else if (near(apart)) {
+      misses.push({ element: b, other: a, edge, of, by: Math.round(Math.abs(apart)), key });
+    }
+  };
+
+  const siblings = Map.groupBy(items, (index) => elements[index]?.parent ?? -1);
+  for (const group of siblings.values()) {
+    for (const [index, a] of group.entries()) {
+      for (const b of group.slice(index + 1)) {
+        const axis = relation(rectOf(a), rectOf(b));
+        if (!axis) {
+          continue;
+        }
+        const one = groupOf(a, b, axis, group);
+        const two = groupOf(b, a, axis, group);
+        // A row or a stack is compared once, as its first member.
+        if (one.members[0] !== a || two.members[0] !== b) {
+          continue;
+        }
+        const from = along(one.rect, axis);
+        const to = along(two.rect, axis);
+        const apart = (side: Side) => to[side] - from[side];
+        const shared = (side: Side) => Math.abs(apart(side)) < SAME;
+        const pair = (side: Side): [number, number] => [at(one, axis, side), at(two, axis, side)];
+        for (const side of SIDES.filter(shared)) {
+          compare(pair(side), axis[side], "box", 0);
+        }
+        const texts = one.line !== undefined && two.line !== undefined;
+        const cards =
+          one.framed && two.framed && texts && one.kind !== undefined && one.kind === two.kind;
+        // Text set on one baseline lines up, whatever boxes that do not show do. A baseline is
+        // worked out from the font's ascent, which layout may round where a canvas does not, so
+        // two that look like one count as one.
+        const baseline =
+          axis === ROW &&
+          !(one.framed && two.framed) &&
+          one.line?.baseline !== undefined &&
+          two.line?.baseline !== undefined &&
+          Math.abs(one.line.baseline - two.line.baseline) < SEEN;
+        if (baseline) {
+          // Nothing more to compare.
+        } else if (shared("center")) {
+          // Centered on one line, whatever their sizes.
+        } else if (shared("start") || shared("end")) {
+          // Side by side, text starts at the top, so a top a few pixels off reads where the
+          // bottoms meet; and a row of cards is one height, so one that shares its top and nearly
+          // its bottom is a little shorter. Stacked, items take the width their words give them,
+          // as tags set flush right do, and only an edge none of them shares can be off.
+          if (axis === ROW && shared("end") && texts) {
+            compare(pair("start"), axis.start, "box", apart("start"));
+          } else if (axis === ROW && shared("start") && cards) {
+            compare(pair("end"), axis.end, "box", apart("end"));
+          }
+        } else {
+          const nearest = SIDES.reduce((best, side) =>
+            Math.abs(apart(side)) < Math.abs(apart(best)) ? side : best,
+          );
+          compare(pair(nearest), axis[nearest], "box", apart(nearest));
+        }
+        // Text in cards off the line moved with them, and is named by their edge. Text centered
+        // in its card lines up by its middle, whatever its length.
+        if (cards && shared("start") && one.line && two.line) {
+          const [from, to] = [along(one.line.rect, axis), along(two.line.rect, axis)];
+          const centered = Math.abs(to.center - from.center) < SAME;
+          if (axis === COLUMN || one.line.fontSize === two.line.fontSize) {
+            compare([a, b], axis.start, "text", centered ? 0 : to.start - from.start);
+          }
+        }
+      }
+    }
+  }
+
+  const named = new Set<string>();
+  return misses.flatMap(({ key, ...miss }) => {
+    const ofOther = support.get(`${miss.other}\0${key}`) ?? 0;
+    const ofElement = support.get(`${miss.element}\0${key}`) ?? 0;
+    const found =
+      ofElement > ofOther ? { ...miss, element: miss.other, other: miss.element } : miss;
+    const id = `${found.element}\0${key}`;
+    if (named.has(id)) {
+      return [];
+    }
+    named.add(id);
+    return [found];
+  });
+}
+
+/** The first line of text in an element: where it is drawn, its baseline, and its size. */
+type FirstLine = { rect: Box; baseline?: number; fontSize: number };
+
+/** Whether `a` comes before `b` in reading order: higher, or as high and further left. */
+function earlier(a: Box, b: Box): boolean {
+  return a.top < b.top - SAME || (Math.abs(a.top - b.top) < SAME && a.left < b.left);
+}
+
+/**
+ * Each element's first line of text, its own or a descendant's, in reading order. Decoration and
+ * what the beat has not shown have none.
+ */
+function firstLines(elements: AlignedElement[]): Array<FirstLine | undefined> {
+  const first: Array<FirstLine | undefined> = elements.map(() => undefined);
+  // A parent comes before its children, so walking back reaches every child before its parent.
+  for (let index = elements.length - 1; index >= 0; index--) {
+    const element = elements[index];
+    if (!element || element.decorative || element.opacity < 0.01) {
+      continue;
+    }
+    const [own] = element.textRects;
+    const kept = first[index];
+    if (own && (!kept || earlier(own, kept.rect))) {
+      first[index] = {
+        rect: own,
+        fontSize: element.fontSize,
+        ...(element.baseline !== undefined ? { baseline: element.baseline } : {}),
+      };
+    }
+    const mine = first[index];
+    const parent = first[element.parent];
+    if (mine && element.parent >= 0 && (!parent || earlier(mine.rect, parent.rect))) {
+      first[element.parent] = mine;
+    }
+  }
+  return first;
+}

package/src/core/annotation-rows.ts

@@ -3,6 +3,8 @@
 // edit, and the Markdown Copy writes. No DOM and no file system here, so all of it is decided by
 // these functions alone.
 
+import { isPlainWord } from "./escape.ts";
+
 /** A box on the slide, in logical pixels, from its top left. */
 export type Box = { x: number; y: number; width: number; height: number };
 
@@ -115,8 +117,10 @@ export function formatNotes(
     groups.set(key, [...(groups.get(key) ?? []), row]);
   }
 
+  // The deck's folder and the notes file are the project's text, which a clone brings along.
+  const folder = shown(deck, "<deck>");
   const lines = [
-    `## Notes on decks/${deck}`,
+    `## Notes on decks/${folder}`,
     "",
     "Boxes and points are in the slide's own pixels, from its top left.",
   ];
@@ -129,11 +133,11 @@ export function formatNotes(
     const title = slides[index]?.title;
     lines.push(
       "",
-      `### Slide ${index + 1} of ${slides.length}, ${first.slug}${title ? ` (${JSON.stringify(title)})` : ""}, ${beatLabel(first.step)}`,
+      `### Slide ${index + 1} of ${slides.length}, ${shown(first.slug, "<slug>")}${title ? ` (${JSON.stringify(title)})` : ""}, ${beatLabel(first.step)}`,
     );
     for (const row of group) {
       const where = (target: TargetRow): string =>
-        `${describe(target)} at decks/${deck}/slides/${row.slug}.html:${target.line}:${target.column} (${measure(target)})${target.found ? "" : ", as written before an edit; the line may have moved"}`;
+        `${describe(target)} at decks/${folder}/slides/${shown(row.slug, "<slug>")}.html:${target.line}:${target.column} (${measure(target)})${target.found ? "" : ", as written before an edit; the line may have moved"}`;
       lines.push("");
       if (row.targets.length === 1 && row.targets[0]) {
         lines.push(`${row.number}. ${where(row.targets[0])}`);
@@ -159,7 +163,15 @@ function beatLabel(step: string): string {
   if (step === "0") {
     return "as it arrives";
   }
-  return /^\d+$/.test(step) ? `at beat ${step}` : `at beat \`${step}\``;
+  if (/^\d+$/.test(step)) {
+    return `at beat ${step}`;
+  }
+  return isPlainWord(step) ? `at beat \`${step}\`` : "at beat <step>";
+}
+
+/** `word` as it is when it is plain, else `placeholder`: see `isPlainWord`. */
+function shown(word: string, placeholder: string): string {
+  return isPlainWord(word) ? word : placeholder;
 }
 
 function describe(target: TargetRow): string {

package/src/core/annotations.ts

@@ -9,6 +9,7 @@ import {
 } from "./annotation-rows.ts";
 import { deckPaths } from "./deck-paths.ts";
 import { DekError } from "./error.ts";
+import { shellName } from "./escape.ts";
 import { deckSlides, type WrittenElement, writtenElements } from "./html.ts";
 import { type ProjectDeck, readDeckFile } from "./resolve.ts";
 import { readSourceIfExists, writeInside } from "./safe-fs.ts";
@@ -306,11 +307,28 @@ function toRow(
     text: note.text,
     targets,
     changed,
-    shot: `dekc shot ${deck.name} ${note.slug} --step ${note.step}`,
+    shot: shotCommand(deck.name, note.slug, note.step),
     createdAt: note.createdAt,
   };
 }
 
+/**
+ * The shot of a note's slide at its beat, as a command to paste. Each name is the file's, so one
+ * that no word holds alike in every shell is a placeholder, and one that starts with a dash goes
+ * after `--`, where it reads as no flag.
+ */
+function shotCommand(deck: string, slug: string, step: string): string {
+  const [name, slide, beat] = [
+    shellName(deck) ?? "<deck>",
+    shellName(slug) ?? "<slug>",
+    shellName(step) ?? "<step>",
+  ];
+  const flag = step.startsWith("-") ? `--step=${beat}` : `--step ${beat}`;
+  return deck.startsWith("-") || slug.startsWith("-")
+    ? `dekc shot ${flag} -- ${name} ${slide}`
+    : `dekc shot ${name} ${slide} ${flag}`;
+}
+
 /** A hash of each of the slide's own files there is, by its extension. */
 function slideFileHashes(deck: ProjectDeck, slug: string): Record<string, string> {
   const paths = deckPaths(deck.dir);

package/src/core/assets.ts

@@ -1,5 +1,6 @@
 import { readFileSync, realpathSync, statSync } from "node:fs";
 import { extname, relative, resolve, sep } from "node:path";
+import { decodeAttribute } from "./attribute-value.ts";
 import { parseCss } from "./css.ts";
 import {
   type CssEditor,
@@ -10,9 +11,10 @@ import {
   shareTokensWithTransitions,
 } from "./css-transform.ts";
 import { deckPaths } from "./deck-paths.ts";
+import { escapeAttr } from "./escape.ts";
 import { isInside } from "./path.ts";
 import { listSlideFiles, readDeckFile } from "./resolve.ts";
-import { attributeUrls } from "./url-attributes.ts";
+import { attributeUrls, trimUrl } from "./url-attributes.ts";
 
 /** Where one reference from a slide or a stylesheet points. */
 export type AssetRef =
@@ -35,13 +37,14 @@ const SCHEME_RE = /^[a-z][a-z0-9+.-]*:/i;
  * Resolves a reference the one way lint, show, and the build agree on: the
  * deck root first, which is where the dev server and the build look for
  * `assets/`, then next to the file that names it, so `../assets/x` from
- * slides/ still resolves. A query string or fragment is not part of the path.
+ * slides/ still resolves. A query string or fragment is not part of the path, and only the C0
+ * controls and spaces at its ends are trimmed, as the URL parser trims them.
  */
 export function classifyAssetRef(
   raw: string,
   options: { deckDir: string; from: string },
 ): AssetRef {
-  const value = raw.trim().split(/[?#]/)[0] ?? "";
+  const value = trimUrl(raw).split(/[?#]/)[0] ?? "";
   if (!value) {
     return { kind: "skip" };
   }
@@ -93,7 +96,7 @@ export function fileInside(
 
 /** True when a reference is written as `assets/...` from the deck root, or is not a local path at all. */
 export function isCanonicalAssetPath(raw: string): boolean {
-  const value = raw.trim();
+  const value = trimUrl(raw);
   if (!value || value.startsWith("#") || SCHEME_RE.test(value) || REMOTE_RE.test(value)) {
     return true;
   }
@@ -118,8 +121,10 @@ export function inlineAssets(
 
 /**
  * The rewriter handler `inlineAssets` runs, for a pass that rewrites more than URLs. The URLs are
- * the ones lint checks, read by the same parser: every candidate of a `srcset` keeps its
- * descriptors, links and text stay as written.
+ * the ones lint checks, read by the same parser and decoded as the browser decodes them: every
+ * candidate of a `srcset` keeps its descriptors, links and text stay as written. The rewriter
+ * writes a value as it is given, escaping only `"`, so each data: URI goes in escaped, in place
+ * of the URL as written, and an attribute with nothing to inline is never written at all.
  */
 export function assetInliner(
   deckDir: string,
@@ -128,7 +133,8 @@ export function assetInliner(
   return {
     element(el) {
       const tag = el.tagName.toLowerCase();
-      for (const [name, value] of [...el.attributes]) {
+      for (const [name, written] of [...el.attributes]) {
+        const { value, writtenAt } = decodeAttribute(written);
         const named = attributeUrls(tag, name.toLowerCase(), value);
         if (named?.use !== "resource") {
           continue;
@@ -137,9 +143,11 @@ export function assetInliner(
           const uri = inlinedUri(url, deckDir, from);
           return uri === undefined
             ? rewritten
-            : rewritten.slice(0, offset) + uri + rewritten.slice(offset + url.length);
-        }, value);
-        if (inlined !== value) {
+            : rewritten.slice(0, writtenAt(offset)) +
+                escapeAttr(uri) +
+                rewritten.slice(writtenAt(offset + url.length));
+        }, written);
+        if (inlined !== written) {
           el.setAttribute(name, inlined);
         }
       }