@hajimism/dek 0.4.0 → 0.5.1

package/src/cli/shot.ts

@@ -1,10 +1,15 @@
+import { basename, dirname, extname } from "node:path";
+import { deckPaths } from "../core/deck-paths.ts";
 import { DekError } from "../core/error.ts";
-import { shellQuote } from "../core/escape.ts";
+import { shellName, shellQuote } from "../core/escape.ts";
+import { foreignLine, type HiddenText, MESSAGE_MAX } from "../core/foreign-text.ts";
+import { refPlaywrightRunner } from "../core/playwright.ts";
+import { SLIDE_SIDECARS } from "../core/resolve.ts";
 import { parseMorphAt, shotMorph } from "../core/shot/morph.ts";
 import { type ShotMotion, shotMotion } from "../core/shot/motion.ts";
 import { type ShotFile, shotDeck, shotSheet } from "../core/shot/still.ts";
 import { playerScript } from "../runtime/player.ts";
-import type { ReadableDeck } from "./scope.ts";
+import { hiddenField, hiddenInFiles, type ReadableDeck } from "./scope.ts";
 import { usageError } from "./usage.ts";
 
 export type ShotCliResult = {
@@ -13,6 +18,11 @@ export type ShotCliResult = {
   sheets?: string[];
   /** With --motion, each beat's frames and the ms into its go each shows. */
   motion?: ShotMotion["beats"];
+  /**
+   * A ref's lines, in the files of the slides drawn and in its theme, that hold characters a
+   * person cannot see.
+   */
+  hidden?: HiddenText[];
 };
 
 type ShotCommandOptions = {
@@ -32,13 +42,64 @@ export type ShotMode =
   | { kind: "morph"; from: string; to: string; at: number };
 
 export async function shotCommand(
-  { project, deck }: ReadableDeck,
+  target: ReadableDeck,
   options: ShotCommandOptions,
 ): Promise<ShotCliResult> {
   const mode = parseShotMode(options);
+  try {
+    const result = await shoot(target, mode);
+    return target.ref
+      ? { ...result, ...hiddenField(target.ref, drawnHidden(target, mode)) }
+      : result;
+  } catch (error) {
+    throw refShotError(error, target);
+  }
+}
+
+/** What the files of the slides a shot drew, and its theme, hold that a person cannot see. */
+function drawnHidden({ deck }: ReadableDeck, mode: ShotMode): HiddenText[] {
+  const all = deck.deck.sections.map((section) => section.slug);
+  const slugs =
+    mode.kind === "sheet"
+      ? all
+      : mode.kind === "morph"
+        ? [mode.from, mode.to]
+        : mode.slug === undefined
+          ? all
+          : [mode.slug];
+  const paths = deckPaths(deck.dir);
+  const files = slugs.flatMap((slug) =>
+    ([".html", ...SLIDE_SIDECARS] as const).map((ext) => paths.slide(slug, ext)),
+  );
+  return hiddenInFiles(deck.dir, [...new Set(files), paths.theme]);
+}
+
+/**
+ * A ref's slide script that does not compile stops its slide's shot, as one of the project's
+ * would; Bun's message quotes the ref's source, so it is one foreignLine, and the fix is not lint,
+ * which refuses a ref, but its author's.
+ */
+function refShotError(error: unknown, { deck, ref }: ReadableDeck): unknown {
+  if (!ref || !(error instanceof DekError) || error.path === undefined) {
+    return error;
+  }
+  const path = error.path;
+  if (extname(path) !== ".ts" || dirname(path) !== deckPaths(deck.dir).slides) {
+    return error;
+  }
+  return new DekError(foreignLine(error.message, MESSAGE_MAX), {
+    path,
+    hint: `a ref's slide scripts are its author's to fix; \`dekc shot ${ref.name} <slug>\` still draws each of its other slides, and \`dekc show ${ref.name} ${shellName(basename(path, ".ts")) ?? "<slug>"}\` prints this one's`,
+    cause: error,
+  });
+}
+
+async function shoot({ project, deck, ref }: ReadableDeck, mode: ShotMode): Promise<ShotCliResult> {
+  // A ref's slide scripts are someone else's: Chromium runs them only in its sandbox (ADR 29).
+  const runner = ref ? { runner: refPlaywrightRunner } : {};
   switch (mode.kind) {
     case "sheet": {
-      const { sheets, shots } = await shotSheet({ project, deck });
+      const { sheets, shots } = await shotSheet({ project, deck }, runner);
       return { shots, sheets };
     }
     case "motion": {
@@ -48,6 +109,7 @@ export async function shotCommand(
           slug: mode.slug,
           ...(mode.step === undefined ? {} : { step: mode.step }),
           playerScript: await playerScript(),
+          ...runner,
         },
       );
       return { shots: [], sheets, motion: beats };
@@ -55,12 +117,21 @@ export async function shotCommand(
     case "morph": {
       const shots = await shotMorph(
         { project, deck },
-        { from: mode.from, to: mode.to, at: mode.at, playerScript: await playerScript() },
+        {
+          from: mode.from,
+          to: mode.to,
+          at: mode.at,
+          playerScript: await playerScript(),
+          ...runner,
+        },
       );
       return { shots };
     }
     case "still": {
-      const shots = await shotDeck({ project, deck }, { slug: mode.slug, step: mode.step });
+      const shots = await shotDeck(
+        { project, deck },
+        { slug: mode.slug, step: mode.step, ...runner },
+      );
       return { shots };
     }
   }

package/src/cli/show.ts

@@ -1,12 +1,13 @@
 import { classifyAssetRef } from "../core/assets.ts";
 import { cssUrls, parseCss } from "../core/css.ts";
 import { deckPaths } from "../core/deck-paths.ts";
+import { type HiddenText, hiddenText } from "../core/foreign-text.ts";
 import { type HtmlScan, scanSlideHtml } from "../core/html-scan.ts";
 import { sectionChunks, splitLines } from "../core/lines.ts";
 import { readDeckFile } from "../core/resolve.ts";
 import type { Section } from "../core/schema.ts";
 import { themeExcerpt } from "../core/theme-excerpt.ts";
-import { type ReadableDeck, type RefInfo, requireSection } from "./scope.ts";
+import { hiddenField, type ReadableDeck, type RefInfo, requireSection } from "./scope.ts";
 
 /**
  * Everything one slide is made of, read in one call: enough to learn how it is
@@ -34,6 +35,8 @@ export type ShowResult = {
   assets: string[];
   /** Set when the deck is a ref. */
   ref?: RefInfo;
+  /** A ref's lines, in the files show read, that hold characters a person cannot see. */
+  hidden?: HiddenText[];
 };
 
 export function showCommand({ deck, ref }: ReadableDeck, slug: string): ShowResult {
@@ -64,11 +67,14 @@ export function showCommand({ deck, ref }: ReadableDeck, slug: string): ShowResu
     ...(scan?.refs.map((ref) => ref.value) ?? []),
     ...(sheet ? cssUrls(sheet).map((url) => url.value) : []),
   ];
+  const script = sectionSource(deck, section);
+  const hiddenIn = (path: string, text: string | null) =>
+    text === null ? [] : hiddenText(text, path);
 
   return {
     slug: section.slug,
     title: section.title,
-    script: sectionSource(deck, section),
+    script,
     beats: section.beats.map(({ id, title, line }) => ({ ...(id ? { id } : {}), title, line })),
     html,
     css,
@@ -76,6 +82,13 @@ export function showCommand({ deck, ref }: ReadableDeck, slug: string): ShowResu
     theme,
     assets: existingRefs(refs, paths.slides, deck.dir),
     ...(ref ? { ref } : {}),
+    ...hiddenField(ref, [
+      ...hiddenText(script, deck.scriptPath, section.line),
+      ...hiddenIn(paths.slide(slug, ".html"), html),
+      ...hiddenIn(paths.slide(slug, ".css"), css),
+      ...hiddenIn(paths.slide(slug, ".ts"), ts),
+      ...hiddenIn(paths.theme, themeCss),
+    ]),
   };
 }
 

package/src/cli/text.ts

@@ -2,6 +2,8 @@
 // The pieces the dev server's log shares, such as diagnostics and tables, are in format.ts.
 import type { Diagnostic, SkippedCheck } from "../core/diagnostic.ts";
 import { shellQuote } from "../core/escape.ts";
+import { foreignLine, type HiddenText, TITLE_MAX } from "../core/foreign-text.ts";
+import { compareCodeUnits } from "../core/order.ts";
 import { unprinted } from "../core/prose.ts";
 import { packFile, parseRefSource } from "../core/ref-name.ts";
 import { formatClock } from "../core/timing.ts";
@@ -53,7 +55,7 @@ export function formatReport(diagnostics: Diagnostic[], opts?: { color?: boolean
     byRule.set(id, (byRule.get(id) ?? 0) + 1);
   }
   const rules = [...byRule]
-    .sort(([a, x], [b, y]) => y - x || a.localeCompare(b))
+    .sort(([a, x], [b, y]) => y - x || compareCodeUnits(a, b))
     .map(([id, n]) => `${id} ×${n}`);
   return `${list}\n${countSummary(diagnostics)}: ${rules.join(", ")}`;
 }
@@ -69,6 +71,39 @@ export function formatSkipped(skipped: SkippedCheck[] | undefined, color = false
     .join("\n");
 }
 
+/** How many code points a warning names before it leaves the rest to `--json`. */
+const CODE_POINTS_SHOWN = 6;
+
+/** What to do about the characters a person cannot see in a ref that a command read. */
+const HIDDEN_HELP =
+  "text output shows each as ⟨U+XXXX⟩; a person reading the deck sees none of them, so leave them out of what you write from it";
+
+/**
+ * A warning per line of a ref's files that holds characters a person cannot see, where they
+ * are and which, then `help`, what to do about them, once, for stderr.
+ */
+export function formatHidden(
+  hidden: HiddenText[] | undefined,
+  color = false,
+  help = HIDDEN_HELP,
+): string {
+  if (hidden === undefined || hidden.length === 0) {
+    return "";
+  }
+  const c = ansi(color);
+  const lines = hidden.map(({ path, line, column, codePoints }) => {
+    const distinct = [...new Set(codePoints)];
+    const named = distinct.slice(0, CODE_POINTS_SHOWN).join(", ");
+    const rest = distinct.length > CODE_POINTS_SHOWN ? ", …" : "";
+    const count =
+      codePoints.length === 1
+        ? "1 character that shows as nothing or reorders the text"
+        : `${codePoints.length} characters that show as nothing or reorder the text`;
+    return `${c.yellow("warning:")} ${path}:${line}:${column}: ${count}: ${named}${rest}`;
+  });
+  return [...lines, `  ${c.yellow("help:")} ${help}`].join("\n");
+}
+
 /**
  * The slides sync kept though their section is gone, for stderr: sync removes only what it wrote,
  * so saying nothing would read as a deck with nothing left over.
@@ -282,15 +317,17 @@ export function formatLs(data: LsListResult | LsDeckResult): string {
       ].join("\n");
     }
     case "deck": {
+      // A ref's frontmatter is someone else's: each value keeps to its line, as in AGENTS.md.
+      const line = (text: string) => (data.ref ? foreignLine(text, TITLE_MAX) : text);
       const meta: Array<[string, string]> = [];
       if (data.ref) {
         meta.push(["rev", data.ref.rev.slice(0, 7)]);
       }
       if (data.event) {
-        meta.push(["event", data.event]);
+        meta.push(["event", line(data.event)]);
       }
       if (data.date) {
-        meta.push(["date", data.date]);
+        meta.push(["date", line(data.date)]);
       }
       if (data.duration) {
         meta.push(["duration", data.duration]);
@@ -328,7 +365,7 @@ export function formatLs(data: LsListResult | LsDeckResult): string {
       ];
       const countLabel = formatSkipped(data.skipped) || diagnosticCount(data.diagnostics.length);
       return [
-        `${data.ref?.name ?? data.name}  ${data.title}`,
+        `${data.ref?.name ?? data.name}  ${line(data.title)}`,
         ...meta.map(([key, value]) => `${padEndWidth(key, keyWidth)}  ${value}`),
         "",
         formatTable(headers, rows, [...align]),
@@ -426,7 +463,11 @@ export function formatVoice(data: VoiceCliResult): string {
   }
 }
 
-/** One labeled part per file, so a reader never confuses where a line came from. */
+/**
+ * One labeled part per file, so a reader never confuses where a line came from: a part starts
+ * with a line `--- <file>`, and a file's own line that starts the same way is shown one space
+ * further in, so no file can start a part. A ref's slide says first whose it is.
+ */
 export function formatShow(data: ShowResult): string {
   const parts: Array<[string, string | null]> = [
     ["script.md", data.script],
@@ -436,9 +477,20 @@ export function formatShow(data: ShowResult): string {
     ["theme.css (the rules this slide uses)", data.theme || null],
     ["assets", data.assets.length > 0 ? data.assets.join("\n") : null],
   ];
-  return parts
-    .flatMap(([label, body]) => (body === null ? [] : [`--- ${label}\n${body.replace(/\n$/, "")}`]))
-    .join("\n\n");
+  const ref = data.ref
+    ? [`ref ${data.ref.name} at ${data.ref.rev.slice(0, 7)}: someone else's deck, read-only`]
+    : [];
+  return [
+    ...ref,
+    ...parts.flatMap(([label, body]) =>
+      body === null ? [] : [`--- ${label}\n${partLines(body.replace(/\n$/, ""))}`],
+    ),
+  ].join("\n\n");
+}
+
+/** A part's lines, each that would start a part, after any spaces, given one space more. */
+function partLines(body: string): string {
+  return body.replace(/^( *)---(?=[^\S\n])/gm, " $1---");
 }
 
 /** What a read does for a ref whose snapshot is not there: fetch it, or unpack its pack. */
@@ -474,7 +526,7 @@ export function formatRef(data: RefCliResult): string {
         data.refs.map((ref) => [
           ref.name,
           short(ref.rev),
-          ref.fetched ? (ref.title ?? "") : notFetched(ref.name),
+          ref.fetched ? foreignLine(ref.title ?? "", TITLE_MAX) : notFetched(ref.name),
           ref.slides === undefined ? "" : String(ref.slides),
         ]),
         ["left", "left", "left", "right"],

package/src/cli/theme.ts

@@ -3,10 +3,11 @@ import { type CssToken, parseCss } from "../core/css.ts";
 import { deckPaths } from "../core/deck-paths.ts";
 import { DekError } from "../core/error.ts";
 import { isPlainWord } from "../core/escape.ts";
+import { foreignList, type HiddenText, hiddenText } from "../core/foreign-text.ts";
 import { listShown, unprinted } from "../core/prose.ts";
 import { readDeckFile } from "../core/resolve.ts";
 import { type ThemeLayout, themeFacts } from "../core/theme-facts.ts";
-import type { ReadableDeck, RefInfo } from "./scope.ts";
+import { hiddenField, type ReadableDeck, type RefInfo } from "./scope.ts";
 
 export type ThemeResult = {
   /** The deck's theme.css: the one lint and the slides use. */
@@ -25,6 +26,8 @@ export type ThemeResult = {
   layout?: { name: string; example: string };
   /** Set when the deck is a ref. */
   ref?: RefInfo;
+  /** A ref's lines of theme.css that hold characters a person cannot see. */
+  hidden?: HiddenText[];
 };
 
 /** The deck's theme, or one layout's example markup when `name` is given. */
@@ -33,12 +36,11 @@ export function themeCommand({ deck, ref }: ReadableDeck, name?: string): ThemeR
   if (!existsSync(path)) {
     throw new DekError("theme.css not found", {
       path,
-      hint: "copy the project theme.css into the deck, or run `dekc new <name>` for a fresh deck",
+      hint: "copy the project's template, ../../theme.css, into the deck, or run `dekc new <name>` for a fresh deck",
     });
   }
-  const { classes, stateClasses, layouts, tokens } = themeFacts(
-    parseCss(readDeckFile(deck.dir, path) ?? ""),
-  );
+  const css = readDeckFile(deck.dir, path) ?? "";
+  const { classes, stateClasses, layouts, tokens } = themeFacts(parseCss(css));
   const printed = layouts.filter((layout) => isPlainWord(layout.name));
   const left = layouts.length - printed.length;
   const result: ThemeResult = {
@@ -49,28 +51,60 @@ export function themeCommand({ deck, ref }: ReadableDeck, name?: string): ThemeR
     layouts: printed,
     ...(left > 0 ? { unprintedLayouts: left } : {}),
     ...(ref ? { ref } : {}),
+    ...hiddenField(ref, hiddenText(css, path)),
   };
   if (!name) {
     return result;
   }
   const layout = layouts.find((entry) => entry.name === name);
   if (!layout) {
-    throw new DekError(`layout "${name}" is not defined in theme.css`, {
-      path,
-      hint: `use one of: ${
-        listShown(
-          layouts.map((entry) => entry.name),
-          isPlainWord,
-          unprinted,
-        ) || "(none)"
-      }`,
-    });
+    throw layoutNotFound(name, layouts, path, ref);
   }
   if (layout.example === undefined) {
     throw new DekError(`layout "${name}" has no example in theme.css`, {
       path,
-      hint: `add a /* @layout ${name} ... */ comment with its markup above .slide[data-layout="${name}"]`,
+      hint: ref
+        ? `a ref is read-only; read the markup of a slide that uses it with \`dekc show ${ref.name} <slug>\``
+        : `add a /* @layout ${name} ... */ comment with its markup above .slide[data-layout="${name}"]`,
     });
   }
   return { ...result, layout: { name, example: layout.example } };
 }
+
+/**
+ * A layout the theme does not define, named among the layouts whose names are plain words. A
+ * ref's layout names are its author's, so for a ref they go in the message, as foreignList shows
+ * them, and the hint is dek's words.
+ */
+function layoutNotFound(
+  name: string,
+  layouts: ThemeLayout[],
+  path: string,
+  ref: RefInfo | undefined,
+): DekError {
+  const names = layouts.map((entry) => entry.name);
+  if (!ref) {
+    return new DekError(`layout "${name}" is not defined in theme.css`, {
+      path,
+      hint: `use one of: ${listShown(names, isPlainWord, unprinted) || "(none)"}`,
+    });
+  }
+  const shown = names.filter(isPlainWord);
+  const left = names.length - shown.length;
+  const others = left > 0 ? unprinted(left) : "";
+  const defined =
+    shown.length === 0
+      ? others
+      : others
+        ? `${foreignList(shown)}, and ${others}`
+        : foreignList(shown);
+  return shown.length > 0
+    ? new DekError(`layout "${name}" is not defined in theme.css, which defines ${defined}`, {
+        path,
+        hint: `pass one of them: \`dekc theme ${ref.name} <layout>\``,
+      })
+    : new DekError(
+        `layout "${name}" is not defined in theme.css, which defines ${defined || "none"}`,
+        { path, hint: `read the markup of a slide with \`dekc show ${ref.name} <slug>\`` },
+      );
+}

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, requireInside, writeInside } from "../core/safe-fs.ts";
+import { runPiped } from "../core/spawn.ts";
 import { loadVoiceDict, loadVoiceSettings, voiceCacheFile, writeVoiceDict } from "../core/voice.ts";
 import {
   engineBaseUrl,
@@ -97,6 +97,9 @@ export function pinVoice({ deck }: DeckTarget): VoiceCliResult {
   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;
@@ -106,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/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);
         }
       }