samagotchi 0.154.0 → 0.155.0

data/lib/samagotchi/web/markdown_renderer.rb

@@ -3,6 +3,7 @@
 require "nokogiri"
 require "uri"
 require_relative "../block_renderers"
+require_relative "../inline_widgets"
 
 module Samagotchi
   module Web
@@ -25,6 +26,12 @@ module Samagotchi
         extension: { header_ids: nil }
       }.freeze
 
+      # A code block as the parse tree has it: its language (nil for an indented
+      # block or a bare fence) and its literal, the source between the fences.
+      Fence = Data.define(:language, :literal)
+      # A JSON string's < > & as \u escapes: the same JSON once parsed.
+      JSON_MARKUP = { "<" => "\\u003c", ">" => "\\u003e", "&" => "\\u0026" }.freeze
+
       def initialize(enabled: false)
         @enabled = enabled
       end
@@ -61,7 +68,7 @@ module Samagotchi
         })
         return nil unless html
 
-        sanitize(html, fence_languages(markdown.to_s))
+        sanitize(html, fences(markdown.to_s))
       end
 
       private
@@ -81,17 +88,17 @@ module Samagotchi
         @commonmarker_installed = Gem::Specification.find_all_by_name("commonmarker").any?
       end
 
-      # Every code block's language, in document order (nil for an indented block
-      # or a bare fence): the highlighter drops it from the HTML, the parse tree
-      # has it. [] for a text with no fence: its blocks have no language.
-      def fence_languages(markdown)
+      # Every code block, in document order: the highlighter drops the language
+      # from the HTML, the parse tree has it. [] for a text with no fence: its
+      # blocks have no language.
+      def fences(markdown)
         return [] unless markdown.include?("```") || markdown.include?("~~~")
 
-        languages = []
+        fences = []
         Commonmarker.parse(markdown, options: OPTIONS).walk do |node|
-          languages << language_of(node.fence_info) if node.type == :code_block
+          fences << Fence.new(language: language_of(node.fence_info), literal: node.string_content) if node.type == :code_block
         end
-        languages
+        fences
       end
 
       def language_of(info)
@@ -100,16 +107,34 @@ module Samagotchi
       end
 
       # After the walk, which drops every attribute it doesn't know. Blocks and
-      # languages pair by position; a count that differs says the two parses
+      # fences pair by position; a count that differs says the two parses
       # disagree, and then no block gets one (it shows as source).
-      def mark_languages(fragment, languages)
+      def mark_languages(fragment, fences)
         blocks = fragment.css("pre")
-        return unless blocks.size == languages.size
+        return unless blocks.size == fences.size
+
+        blocks.zip(fences) do |pre, fence|
+          next unless fence.language
+
+          pre["data-lang"] = fence.language
+          mark_widget(pre, fence.literal) if fence.language == InlineWidgets::LANG
+        end
+      end
 
-        blocks.zip(languages) { |pre, language| pre["data-lang"] = language if language }
+      # A chi-ui block carries what the page draws or why it doesn't. The JSON
+      # is an attribute value (Nokogiri escapes its quotes), and its < > & are
+      # \u escapes, so the HTML holds no model markup even as attribute text.
+      def mark_widget(pre, literal)
+        widget = InlineWidgets.parse(literal)
+        if widget.ok?
+          pre["data-widget"] = widget.widget_json.gsub(/[<>&]/, JSON_MARKUP)
+        else
+          pre["data-widget-error"] = widget.error
+        end
+        pre["data-widget-lenient"] = "" if widget.lenient?
       end
 
-      def sanitize(html, languages)
+      def sanitize(html, fences)
         fragment = Nokogiri::HTML5.fragment(html)
         fragment.traverse do |node|
           next unless node.element?
@@ -122,7 +147,7 @@ module Samagotchi
             sanitize_attributes(node)
           end
         end
-        mark_languages(fragment, languages)
+        mark_languages(fragment, fences)
         fragment.to_html
       end
 

data/lib/samagotchi/web/message_display.rb

@@ -134,6 +134,9 @@ module Samagotchi
           end
           next if role == "system"
           next if role == "tool_response"
+          # KernelLoop's recovery line: a row of its turn the page showed as
+          # nothing live (no turn opens with it, Steer.recovery?).
+          next if Samagotchi::Steer.recovery?(m)
 
           stripped = Samagotchi::OutputFormatter.strip_markup(content)
           did = parts && %w[model assistant].include?(role) ? message_parts(list, index, cwd, marks) : nil
@@ -165,7 +168,11 @@ module Samagotchi
           # record by this, not by its place.
           turn_id = m[:turn_id] || m["turn_id"]
           message[:turn_id] = turn_id.to_s if norm_role == "user" && turn_id
-          # The turn it revised (a Revise stack, Engine#stamp_opening), and
+          # An opening no turn ran (TurnFlow#abort_continue!'s reason): its own
+          # id, which a card's stamp names (Bridge::CardPlaces#opening_of).
+          opening_id = m[:opening_id] || m["opening_id"]
+          message[:opening_id] = opening_id.to_s if norm_role == "user" && opening_id && !turn_id && !message[:merged]
+          # The turn it revised (a Revise stack, TurnStages::VerifyAnchors#stamp_opening), and
           # whether it was a Verify turn (the page offers no Revise on its
           # answer).
           if norm_role == "user" && turn_id && !message[:merged]

data/lib/samagotchi/web/public/app.js

@@ -71,6 +71,7 @@ import { createAnnotateBar } from "./annotate_bar.js";
 import { VERIFY_PRESET, VERIFY_UNAVAILABLE, verifyWorkerUnavailable, withVerify } from "./verify_preset.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { createBlockHost } from "./block_host.js";
+import { createWidgetDrawer } from "./inline_widgets.js";
 import { copyText, installCopy } from "./copy.js";
 import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
 import { installDetailsMotion } from "./details_motion.js";
@@ -1856,7 +1857,10 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
-createBlockHost({ roots: turnRoots(), sessionId: () => store.selected });
+// chi-ui blocks (inline_widgets.js) are a core drawer, ahead of the bundles'
+// renderers; a picks' Fill reply only fills the composer.
+const widgets = createWidgetDrawer({ roots: turnRoots(), composerText: () => promptEl.value, fillComposer });
+createBlockHost({ roots: turnRoots(), sessionId: () => store.selected, drawers: [widgets] });
 // A steps block, a thinking block and the recap open and close by hand
 // with their height animated (details_motion.js), in the history and on
 // the stage.

data/lib/samagotchi/web/public/block_host.js

@@ -1,8 +1,6 @@
-// Draws a bundle's fenced blocks in the page (docs/internals/block-renderers.md).
-// One observer per turn root, filtered to TEXTS, as copy.js and answer_fold.js:
-// every path that fills a root (a reload, a session switch, a turn's end, an
-// answer_display, Revise's clones, a step's swap) arrives the same way, and
-// cards, the asking slot and question replies are never touched.
+// Draws a bundle's fenced blocks in the page (docs/internals/block-renderers.md),
+// in a hidden frame per language. Finding and watching the blocks is
+// block_watch.js's; this is its frame drawer, after any core drawers.
 //
 // The DOM is the state: a <figure class="block-drawn"> right before the <pre>
 // (block_source.js) says it is drawn, so a Revise clone needs nothing, and
@@ -16,16 +14,13 @@
 import { html, render as litRender } from "./vendor/lit-html.js";
 import { createBlockFrame, FRAME_TIMEOUT_MS } from "./block_frame.js";
 import { DRAWN, figureOf, setSourceShown } from "./block_source.js";
+import { createBlockWatch, failBlock, holdingView } from "./block_watch.js";
 import { copyText } from "./copy.js";
-import { keepFollowing, shouldFollowScroll } from "./scroll.js";
-import { TEXTS } from "./text_roots.js";
 
-const BLOCKS = "pre[data-lang]";
 // MessageDisplay::MAX_RENDER_BYTES's number: a source over it stays source.
 export const MAX_SOURCE_BYTES = 64 * 1024;
 export const CACHE_SIZE = 200;
 export const MARK_PREFIX = "chi_block_rendering:";
-const IO_MARGIN = "600px 0px";
 const MAX_RETRIES = 5;
 // The biggest picture a page shows, whatever the renderer: a model-written
 // directive can ask Mermaid for an SVG tens of millions of px tall, which breaks
@@ -126,43 +121,6 @@ export function currentTheme(doc = document, win = window) {
   };
 }
 
-// The nearest scroller holding +el+, +root+ at the latest. IntersectionObserver
-// needs it named: with root:null a rootMargin doesn't pass an overflow:auto
-// between, so a block just under #history's fold wouldn't count.
-function scrollerOf(el, root, win) {
-  for (let at = el.parentElement; at && at !== root; at = at.parentElement) {
-    const { overflowY } = win.getComputedStyle(at);
-    if (overflowY === "auto" || overflowY === "scroll") return at;
-  }
-  return root;
-}
-
-// One IntersectionObserver per scroller. +el+ moved to another scroller (the
-// stage's hand-off to the history) moves with it.
-function ioWatcher(win) {
-  const observers = new Map();
-  const watched = new WeakMap();
-  return (el, scroller, onNear) => {
-    let io = observers.get(scroller);
-    if (!io) {
-      io = new win.IntersectionObserver((entries) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          io.unobserve(entry.target);
-          const near = watched.get(entry.target);
-          watched.delete(entry.target);
-          near?.onNear();
-        }
-      }, { root: scroller, rootMargin: IO_MARGIN });
-      observers.set(scroller, io);
-    }
-    const before = watched.get(el);
-    if (before && before.io !== io) before.io.unobserve(el);
-    watched.set(el, { io, onNear });
-    io.observe(el);
-  };
-}
-
 function guardedStorage(get) {
   const use = (fn, fallback) => { try { return fn(get()); } catch (_) { return fallback; } };
   return {
@@ -172,26 +130,22 @@ function guardedStorage(get) {
   };
 }
 
-// @param roots the turn roots (app.js turnRoots())
-// @param sessionId () => the open session's id: the frames go on a change, to
-//   limit what they hold (docs/internals/block-renderers.md, residual risk)
-// The rest are seams for the specs.
-export function createBlockHost({
-  roots, sessionId, listRenderers = fetchRendererList, fetchFile = fetchRendererFile, makeFrame = createBlockFrame,
+
+// The drawer of a bundle's renderers (block_watch.js has the contract): one
+// frame per language, waiting for /api/block_renderers to say who draws what.
+// @param roots the turn roots, for the view held and the zoom's listeners
+// The rest are createBlockHost's.
+export function createFrameDrawer({
+  roots, listRenderers = fetchRendererList, fetchFile = fetchRendererFile, makeFrame = createBlockFrame,
   decodeImage = async (url) => { const img = new win.Image(); img.src = url; await img.decode(); return { width: img.naturalWidth, height: img.naturalHeight }; },
-  decodeTimeoutMs = DECODE_TIMEOUT_MS, theme = currentTheme, copy = copyText,
-  watch = null, doc = document, win = window, storage = guardedStorage(() => globalThis.sessionStorage),
+  decodeTimeoutMs = DECODE_TIMEOUT_MS, theme = currentTheme,
+  doc = document, win = window, storage = guardedStorage(() => globalThis.sessionStorage),
 }) {
-  const near = watch || ioWatcher(win);
   const cache = new Map();
   const frames = new Map();
   // A language whose renderer didn't load, and why: until the session changes,
   // its blocks don't fetch it again one by one.
   const broken = new Map();
-  // Blocks with a draw on its way (not a drawn state: that is the figure): pre =>
-  // {target, scroller, start, drawing}. Until it starts, a block whose scroller
-  // changed (the stage's hand-off to the history) gets watched there.
-  const waiting = new WeakMap();
   // The marks of the renders running now: mark => when it started. Such a mark isn't
   // a leftover from an earlier load.
   const inFlight = new Map();
@@ -199,17 +153,19 @@ export function createBlockHost({
   // render has its blocks wait for that one, and each draws into whichever is connected.
   const coming = new Map();
   const retries = new WeakMap();
+  // What needsDraw checked, so draw draws that: pre => {lang, source, renderer}.
+  const checked = new WeakMap();
   let list = null;
   let listLoad = null;
-  let session = sessionId();
 
-  function withRenderers(fn) {
-    if (list) { fn(list); return; }
+  // The list once loaded; till then a promise of it, asked for once per page load.
+  function renderers() {
+    if (list) return list;
     listLoad ??= listRenderers().then(
-      (renderers) => { list = new Map((renderers || []).map((r) => [r.lang, r])); return list; },
+      (got) => { list = new Map((got || []).map((r) => [r.lang, r])); return list; },
       () => { list = new Map(); return list; }, // a failed list: no drawing
     );
-    listLoad.then(fn);
+    return listLoad;
   }
 
   function dropFrames() {
@@ -218,13 +174,6 @@ export function createBlockHost({
     broken.clear();
   }
 
-  function noticeSession() {
-    const now = sessionId();
-    if (now === session) return;
-    session = now;
-    dropFrames();
-  }
-
   function frameFor(lang, renderer) {
     let frame = frames.get(lang);
     if (frame && !frame.dead()) return frame;
@@ -242,24 +191,7 @@ export function createBlockHost({
 
   const cacheKey = (lang, themeName, source) => `${lang}\u0000${themeName}\u0000${source}`;
   const markKey = (lang, source) => `${MARK_PREFIX}${lang}:${sourceHash(source)}`;
-
-  function rootOf(el) {
-    return roots.find((root) => root.contains(el)) || roots[0];
-  }
-
-  // +mutate+ with the view held: a viewer at the bottom stays there, and a
-  // block above a reader's view keeps what they read where it is. Browsers that
-  // anchor scrolling have done it by the second read, and there is nothing left.
-  function holdingView(pre, mutate, bottomOf) {
-    const scroller = scrollerOf(pre, rootOf(pre), win);
-    if (shouldFollowScroll(scroller)) return keepFollowing(scroller, mutate);
-    const before = pre.getBoundingClientRect().bottom;
-    if (before > scroller.getBoundingClientRect().top) return mutate();
-    const result = mutate();
-    const after = bottomOf();
-    if (after !== before) scroller.scrollTop += after - before;
-    return result;
-  }
+  const langOf = (pre) => pre.getAttribute("data-lang");
 
   function setMark(mark) {
     storage.set(mark);
@@ -347,28 +279,10 @@ export function createBlockHost({
       return;
     }
     const figure = makeFigure(picture, themeName, lang);
-    holdingView(pre, () => {
+    holdingView(pre, roots, () => {
       pre.before(figure);
       setSourceShown(figure, pre, false);
-    }, () => figure.getBoundingClientRect().bottom);
-  }
-
-  // The <pre> stays as it is, under one muted line: never markup (the words are
-  // a renderer's, driven by the model's input), and shown by CSS, so a bubble's
-  // textContent, its dedupe and an annotation's text stay what they were (copy.js's
-  // rule for its buttons).
-  function fail(pre, lang, message) {
-    if (!pre.isConnected) return;
-    pre.dataset.blockFailed = "1";
-    const note = doc.createElement("div");
-    note.className = "block-note";
-    const first = String(message ?? "").split("\n")[0].trim();
-    const words = `Couldn't draw this ${lang} block${first ? `: ${first}` : ""}`;
-    note.dataset.text = words;
-    note.setAttribute("role", "note");
-    note.setAttribute("aria-label", words);
-    note.title = "Click to copy";
-    pre.after(note);
+    }, () => figure.getBoundingClientRect().bottom, win);
   }
 
   function pictureFor(key, lang, source, renderer, now) {
@@ -407,21 +321,37 @@ export function createBlockHost({
     }
   }
 
-  async function draw(pre, lang, source, renderer) {
+  // A claimed language has a renderer: the list is loaded by then.
+  function needsDraw(pre, figure) {
+    const lang = langOf(pre);
+    const source = pre.textContent;
+    const now = theme(doc, win);
+    if (figure && figure.dataset.theme === now.name) return false;
+    const hit = cache.get(cacheKey(lang, now.name, source));
+    if (hit) { place(pre, hit, now.name, lang); return false; } // no flash: this frame
+    if (!figure) {
+      if (new TextEncoder().encode(source).length > MAX_SOURCE_BYTES) { failBlock(pre, lang, "it is over 64 KB"); return false; }
+      const mark = markKey(lang, source);
+      if (storage.has(mark) && !inFlight.has(mark)) { failBlock(pre, lang, "it hung or took too long the last time"); return false; }
+    }
+    checked.set(pre, { lang, source, renderer: list.get(lang) });
+    return true;
+  }
+
+  async function draw(pre, { reconsider }) {
+    const { lang, source, renderer } = checked.get(pre);
     const now = theme(doc, win);
     const key = cacheKey(lang, now.name, source);
     const hit = cache.get(key);
-    if (hit) { waiting.delete(pre); place(pre, hit, now.name, lang); return; }
-    if (broken.has(lang)) { waiting.delete(pre); fail(pre, lang, broken.get(lang)); return; }
+    if (hit) { place(pre, hit, now.name, lang); return; }
+    if (broken.has(lang)) { failBlock(pre, lang, broken.get(lang)); return; }
     let retry = false;
     try {
       place(pre, await pictureFor(key, lang, source, renderer, now), now.name, lang);
     } catch (e) {
       // A redraw that failed keeps the picture it has.
-      if (!e?.dropped && !figureOf(pre)) fail(pre, lang, e?.message);
+      if (!e?.dropped && !figureOf(pre)) failBlock(pre, lang, e?.message);
       retry = !!e?.dropped;
-    } finally {
-      waiting.delete(pre);
     }
     // Queued behind a frame that died (another block's timeout): a new frame's
     // turn. A session switch's frames go with their blocks, which aren't connected.
@@ -430,100 +360,45 @@ export function createBlockHost({
     if (!retry) return;
     const tries = (retries.get(pre) || 0) + 1;
     retries.set(pre, tries);
-    if (tries <= MAX_RETRIES) consider(pre);
-    else fail(pre, lang, "its renderer keeps stopping");
-  }
-
-  // A copy.js wrap took the <pre> away from a figure placed first: back with it.
-  function rejoin(pre) {
-    if (figureOf(pre) || !pre.hidden) return;
-    const wrap = pre.parentElement;
-    const stray = wrap?.classList.contains("code-wrap") && wrap.previousElementSibling;
-    if (stray?.classList?.contains(DRAWN)) wrap.insertBefore(stray, pre);
-  }
-
-  function watchFor(entry) {
-    const scroller = scrollerOf(entry.target, rootOf(entry.target), win);
-    if (scroller === entry.scroller) return;
-    entry.scroller = scroller;
-    near(entry.target, scroller, entry.start);
-  }
-
-  function consider(pre) {
-    if (!pre.isConnected || !pre.closest(TEXTS) || pre.dataset.blockFailed) return;
-    const pending = waiting.get(pre);
-    if (pending) {
-      if (!pending.drawing) watchFor(pending);
-      return;
-    }
-    rejoin(pre);
-    const lang = pre.getAttribute("data-lang");
-    const source = pre.textContent;
-    if (!source.trim()) return; // an empty fence is left alone
-    withRenderers((renderers) => {
-      const renderer = renderers.get(lang);
-      if (!renderer || !pre.isConnected || waiting.has(pre) || pre.dataset.blockFailed) return;
-      const now = theme(doc, win);
-      const figure = figureOf(pre);
-      if (figure && figure.dataset.theme === now.name) return;
-      const hit = cache.get(cacheKey(lang, now.name, source));
-      if (hit) { place(pre, hit, now.name, lang); return; } // no flash: this frame
-      if (!figure) {
-        if (new TextEncoder().encode(source).length > MAX_SOURCE_BYTES) { fail(pre, lang, "it is over 64 KB"); return; }
-        const mark = markKey(lang, source);
-        if (storage.has(mark) && !inFlight.has(mark)) { fail(pre, lang, "it hung or took too long the last time"); return; }
-      }
-      // A drawn block's <pre> is hidden, which never intersects: its figure does.
-      const entry = {
-        target: figure || pre,
-        scroller: null,
-        drawing: false,
-        start: () => { entry.drawing = true; draw(pre, lang, source, renderer); },
-      };
-      waiting.set(pre, entry);
-      watchFor(entry);
-    });
-  }
-
-  function scan(el) {
-    if (el.matches?.(BLOCKS)) consider(el);
-    for (const pre of el.querySelectorAll?.(BLOCKS) || []) consider(pre);
+    if (tries <= MAX_RETRIES) reconsider(pre);
+    else failBlock(pre, lang, "its renderer keeps stopping");
   }
 
   for (const root of roots) {
-    new win.MutationObserver((records) => {
-      noticeSession();
-      for (const record of records) {
-        for (const node of record.addedNodes) if (node.nodeType === 1) scan(node);
-      }
-    }).observe(root, { childList: true, subtree: true });
-    scan(root);
-
     root.addEventListener("mousedown", (e) => {
-      if (e.target.closest?.(".block-toggle, .block-zoom")) e.preventDefault();
+      if (e.target.closest?.(".block-zoom")) e.preventDefault();
     });
     // Delegated, so a Revise clone's work too.
     root.addEventListener("click", (e) => {
-      const toggle = e.target.closest?.(".block-toggle");
-      if (toggle) {
-        e.preventDefault();
-        e.stopPropagation();
-        const figure = toggle.parentElement;
-        setSourceShown(figure, figure.nextElementSibling, !figure.classList.contains("source"));
-        return;
-      }
-      const note = e.target.closest?.(".block-note");
-      if (note) { copy(note.dataset.text); return; }
-      if (e.target.closest?.(".block-zoom, .block-img")) {
-        const figure = e.target.closest(`.${DRAWN}`);
-        setZoomed(figure, !figure.classList.contains("natural"));
-      }
+      if (!e.target.closest?.(".block-zoom, .block-img")) return;
+      const figure = e.target.closest(`.${DRAWN}`);
+      setZoomed(figure, !figure.classList.contains("natural"));
     });
   }
 
+  return {
+    claims(lang) {
+      const known = renderers();
+      return known.then ? known.then((got) => got.has(lang)) : known.has(lang);
+    },
+    needsDraw,
+    draw,
+    sessionChanged: dropFrames,
+    dropFrames,
+  };
+}
+
+// @param roots the turn roots (app.js turnRoots())
+// @param sessionId () => the open session's id: the frames go on a change, to
+//   limit what they hold (docs/internals/block-renderers.md, residual risk)
+// @param drawers core drawers, asked before the bundle renderers
+// The rest are seams for the specs.
+export function createBlockHost({ roots, sessionId, drawers = [], copy = copyText, watch = null, win = window, ...frameOpts }) {
+  const frames = createFrameDrawer({ roots, win, ...frameOpts });
+  const watcher = createBlockWatch({ roots, sessionId, drawers: [...drawers, frames], watch, copy, win });
+  // A system theme change redraws through the figure (needsDraw's theme check).
   win.matchMedia?.("(prefers-color-scheme: dark)").addEventListener?.("change", () => {
-    for (const root of roots) scan(root);
+    for (const root of roots) watcher.scan(root);
   });
-
-  return { scan, dropFrames };
+  return { scan: watcher.scan, dropFrames: frames.dropFrames };
 }

data/lib/samagotchi/web/public/block_renderers.css

@@ -8,6 +8,8 @@
 .block-img{display:block;max-width:100%;max-height:50000px;object-fit:contain;height:auto;margin:0 auto;cursor:zoom-in}
 .block-drawn.natural .block-img{max-width:50000px;margin:0;cursor:zoom-out}
 .block-drawn.source .block-scroll{display:none}
+/* A chi-ui widget (inline_widgets.js): its host holds the shadow root, whose own sheet is widgets.css; the source hides it as the picture. */
+.block-drawn.source>.widget-host{display:none}
 .block-toggle,.block-zoom{position:absolute;top:5px;right:5px;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0 5px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-3);opacity:0;transition:opacity .12s}
 .code-wrap>.block-drawn>.block-toggle{right:34px}
 .block-zoom{right:34px}

data/lib/samagotchi/web/public/block_source.js

@@ -1,4 +1,4 @@
-// A drawn block's two faces (block_host.js): the picture, or its source. The
+// A drawn block's two faces (block_watch.js, block_host.js): the picture, or its source. The
 // source <pre> stays in the DOM right after the figure, `hidden` while the
 // picture shows, so whatever reads text (a claim's walk, copy) sees what it
 // always did. The DOM is the state: a Revise clone carries both with it.
@@ -18,15 +18,18 @@ export function figureOf(pre) {
   return before?.classList?.contains(DRAWN) ? before : null;
 }
 
-// The source shown (and the picture hidden), or the other way round.
+// The source shown (and the picture hidden), or the other way round. A
+// figure that isn't a picture names its own face (data-toggle-picture: a
+// chi-ui widget's "Show the widget").
 export function setSourceShown(figure, pre, shown) {
   pre.hidden = !shown;
   figure.classList.toggle("source", shown);
   const toggle = figure.querySelector(":scope > .block-toggle");
   if (!toggle) return;
   toggle.setAttribute("aria-pressed", shown ? "true" : "false");
-  toggle.setAttribute("aria-label", shown ? HIDE : SHOW);
-  toggle.title = shown ? HIDE : SHOW;
+  const hide = figure.dataset.togglePicture || HIDE;
+  toggle.setAttribute("aria-label", shown ? hide : SHOW);
+  toggle.title = shown ? hide : SHOW;
 }
 
 // A jump that lands in a drawn block's source shows it (history_reveal.js).